diff --git a/components/tailored/marketplace/glyphs/Glyphs.vue b/components/tailored/marketplace/glyphs/Glyphs.vue
index bdb59dd9af..0ed2f36364 100644
--- a/components/tailored/marketplace/glyphs/Glyphs.vue
+++ b/components/tailored/marketplace/glyphs/Glyphs.vue
@@ -2,7 +2,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-// @ts-nocheck
 import { mapState } from 'vuex'
 import { ChevronLeftIcon } from 'satellite-lucide-icons'
 import { marketGlyphs } from '~/mock/marketplace'
diff --git a/components/tailored/messaging/enhancers/glyphs/Glyphs.html b/components/tailored/messaging/enhancers/glyphs/Glyphs.html
index 547a1dc92a..868a99f58a 100644
--- a/components/tailored/messaging/enhancers/glyphs/Glyphs.html
+++ b/components/tailored/messaging/enhancers/glyphs/Glyphs.html
@@ -8,16 +8,31 @@
       type="primary"
     />
   </div>
-  <TailoredMessagingEnhancersGlyphsNav @navSelected="(val) => {filter(val)}"></TailoredMessagingEnhancersGlyphsNav>
+
+  <TailoredMessagingEnhancersGlyphsNav
+    @navSelected="(val) => {filter(val)}"
+  ></TailoredMessagingEnhancersGlyphsNav>
   <div class="glyph-content hidden-scroll">
     <UiScroll verticalScroll scrollbarVisibility="scroll" class="glyph-content">
       <TailoredMessagingEnhancersGlyphsMostUsed></TailoredMessagingEnhancersGlyphsMostUsed>
-      <TailoredMessagingEnhancersGlyphsPack
-        v-for="pack in filteredGlyphs"
-        :key="pack.id"
-        :pack="pack"
-      ></TailoredMessagingEnhancersGlyphsPack>
+
+      <div v-for="(pack, i) in filteredGlyphs">
+        <v-responsive max-height="100%">
+          <v-lazy
+            v-model="pack.isActive"
+            :options="{
+              threshold: .5 
+            }"
+            min-height="50"
+            transition="fade-transition"
+          >
+            <TailoredMessagingEnhancersGlyphsPack :key="pack.id" :pack="pack">
+            </TailoredMessagingEnhancersGlyphsPack>
+          </v-lazy>
+        </v-responsive>
+      </div>
     </UiScroll>
   </div>
+
   <TailoredMessagingEnhancersGlyphsItemInfo></TailoredMessagingEnhancersGlyphsItemInfo>
 </div>
diff --git a/nuxt.config.js b/nuxt.config.js
index 0a2e223d13..6e278c27bd 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -75,6 +75,7 @@ export default defineNuxtConfig({
     { src: '~/plugins/thirdparty/multiselect.ts' },
     { src: '~/plugins/thirdparty/v-calendar.ts' },
     { src: '~/plugins/thirdparty/videoplayer.ts' },
+    { src: '~/plugins/thirdparty/vuetify.ts' },
     // Local
     { src: '~/plugins/local/classLoader.ts' },
     { src: '~/plugins/local/notifications.ts', mode: 'client' },
diff --git a/package.json b/package.json
index 83aff450ca..b486cfaeae 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "@nuxt/bridge": "npm:@nuxt/bridge-edge@3.0.0-27258277.84e299f",
     "@nuxt/types": "^2.15.3",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/vuetify": "^1.12.1",
     "@types/ed2curve": "^0.2.2",
     "@types/elliptic": "^6.4.13",
     "@types/jest": "^27.0.3",
diff --git a/plugins/thirdparty/vuetify.ts b/plugins/thirdparty/vuetify.ts
new file mode 100644
index 0000000000..0bcc8485db
--- /dev/null
+++ b/plugins/thirdparty/vuetify.ts
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+Vue.use(Vuetify)
+
+export default new Vuetify
\ No newline at end of file