diff --git a/.gitignore b/.gitignore
index a7025f771..d0be9ce93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ packages/**/src/aliases.ts
 packages/**/LICENSE
 categories.json
 tags.json
+.vercel
diff --git a/docs/.vitepress/components/HomeHeroIconsCard.vue b/docs/.vitepress/components/HomeHeroIconsCard.vue
index a8f56a9b6..005e1bc09 100644
--- a/docs/.vitepress/components/HomeHeroIconsCard.vue
+++ b/docs/.vitepress/components/HomeHeroIconsCard.vue
@@ -6,12 +6,14 @@ console.log(data);
 </script>
 
 <template>
-  <TransitionGroup class="icons-card" name="list" tag="div">
-    <LucideIcon
-      v-for="icon in data.icons"
-      v-bind="icon"
-    />
-  </TransitionGroup>
+  <div class="icons-card">
+    <TransitionGroup  name="list">
+      <LucideIcon
+        v-for="icon in data.icons"
+        v-bind="icon"
+      />
+    </TransitionGroup>
+  </div>
 </template>
 
 <style scoped>
diff --git a/docs/.vitepress/components/IconDetailOverlay.vue b/docs/.vitepress/components/IconDetailOverlay.vue
index 85a6b7446..697053f52 100644
--- a/docs/.vitepress/components/IconDetailOverlay.vue
+++ b/docs/.vitepress/components/IconDetailOverlay.vue
@@ -56,25 +56,30 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 .overlay-container {
   position: fixed;
   top: 0;
-  left: 0;
-  right: 0;
+  left: var(--left, 0);
+  right: var(--right, 0);
   bottom: 0;
   pointer-events: none;
   height: 100%;
   width: 100%;
   display: flex;
   align-items: flex-end;
+  width: auto;
 }
 
 @media (min-width: 960px) {
   .overlay-container {
-    left: var(--vp-sidebar-width);
+    --left: var(--vp-sidebar-width);
   }
 }
 
 @media (min-width: 1440px) {
   .overlay-container {
-    left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    --left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    --right: calc(((100% - (var(--vp-layout-max-width) - var(--vp-sidebar-width))) - 272px) / 2);
+  }
+  .overlay-panel {
+    border-top-right-radius: 8px;
   }
 }
 
diff --git a/docs/.vitepress/components/IconGrid.vue b/docs/.vitepress/components/IconGrid.vue
new file mode 100644
index 000000000..49989d2bc
--- /dev/null
+++ b/docs/.vitepress/components/IconGrid.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { IconEntity } from '../types'
+import IconItem from './IconItem.vue'
+
+const emit = defineEmits(['setActiveIcon'])
+
+defineProps<{
+  icons: IconEntity[]
+  activeIcon: string
+}>()
+
+function setActiveIcon(name: string) {
+  console.log(name);
+
+  emit('setActiveIcon', name)
+}
+
+</script>
+
+<template>
+  <div class="icons">
+    <div class="icon" v-for="icon in icons" :key="icon.name">
+      <IconItem v-bind="icon" @setActiveIcon="setActiveIcon(icon.name)" :active="activeIcon === icon.name"/>
+    </div>
+  </div>
+</template>
+
+<style>
+.icons {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+  /* padding: 32px 32px 96px; */
+  gap: 8px;
+  width: 100%;
+}
+
+.icon {
+  aspect-ratio: 1/1;
+}
+</style>
diff --git a/docs/.vitepress/components/IconsCategoryOverview.vue b/docs/.vitepress/components/IconsCategoryOverview.vue
new file mode 100644
index 000000000..9b9b457af
--- /dev/null
+++ b/docs/.vitepress/components/IconsCategoryOverview.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { IconEntity, Category } from '../types'
+import IconItem from './IconItem.vue'
+import IconDetailOverlay from './IconDetailOverlay.vue'
+import IconGrid from './IconGrid.vue'
+
+const props = defineProps<{
+  icons: IconEntity[]
+  categories: Category[]
+}>()
+
+const activeIconName = ref('')
+
+function setActiveIconName(name: string) {
+  activeIconName.value = name
+}
+
+const activeIcon = computed(() =>
+  props.icons?.find((icon) => icon.name === activeIconName.value)
+)
+
+const categories = computed(() => {
+  if( !props.categories?.length || !props.icons?.length ) return []
+  return props.categories.map(({ name, title }) => {
+  const categoryIcons = props.icons.filter((icon) => props.icons.categories.includes(name))
+
+  // const isSearching = icons.length !== data.length;
+  // const searchResults = isSearching
+  //   ? categoryIcons.filter(icon => icons.some((item) => item?.name === icon?.name))
+  //   : categoryIcons;
+
+  return {
+    title,
+    name,
+    icons: categoryIcons,
+    // isActive: name === activeCategory,
+  };
+})
+})
+
+</script>
+
+<template>
+  <section class="category" v-for="category in categories" :key="category.name">
+      <h2 >{{ category.title }}</h2>
+      <IconGrid :activeIcon="activeIcon" :icons="icons" @setActiveIcon="setActiveIconName"/>
+    </section>
+  <IconDetailOverlay :icon="activeIcon" @close="setActiveIconName('')"/>
+</template>
+
+<style>
+.icons {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+  /* padding: 32px 32px 96px; */
+  gap: 8px;
+  width: 100%;
+}
+
+.icon {
+  aspect-ratio: 1/1;
+}
+</style>
diff --git a/docs/.vitepress/components/IconsOverview.vue b/docs/.vitepress/components/IconsOverview.vue
index 1f0d07539..6a1519c2f 100644
--- a/docs/.vitepress/components/IconsOverview.vue
+++ b/docs/.vitepress/components/IconsOverview.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import type { IconEntity } from '../types'
 import IconItem from './IconItem.vue'
 import IconDetailOverlay from './IconDetailOverlay.vue'
+import IconGrid from './IconGrid.vue'
 
 const props = defineProps<{
   icons: IconEntity[]
@@ -21,11 +22,7 @@ const activeIcon = computed(() =>
 </script>
 
 <template>
-  <div class="icons">
-    <div class="icon" v-for="icon in icons" :key="icon.name">
-      <IconItem v-bind="icon" @setActiveIcon="setActiveIconName" :active="activeIconName === icon.name"/>
-    </div>
-  </div>
+  <IconGrid :activeIcon="activeIconName" :icons="icons" @setActiveIcon="setActiveIconName"/>
   <IconDetailOverlay :icon="activeIcon" @close="setActiveIconName('')"/>
 </template>
 
@@ -33,7 +30,7 @@ const activeIcon = computed(() =>
 .icons {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
-  padding: 32px 32px 96px;
+  /* padding: 32px 32px 96px; */
   gap: 8px;
   width: 100%;
 }
diff --git a/docs/.vitepress/components/PageContainer.vue b/docs/.vitepress/components/PageContainer.vue
new file mode 100644
index 000000000..9653851f6
--- /dev/null
+++ b/docs/.vitepress/components/PageContainer.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="container">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  padding: 32px 32px 96px;
+}
+</style>
diff --git a/docs/guide/custom-page.md b/docs/guide/custom-page.md
index b2618670e..6260873df 100644
--- a/docs/guide/custom-page.md
+++ b/docs/guide/custom-page.md
@@ -1,7 +1,7 @@
 <script setup>
-  import Test from '../components/Test.vue'
+  import Test from '../.vitepress/components/Test.vue'
 </script>
 
 Hello world
 
-<Test/>
\ No newline at end of file
+<Test/>
diff --git a/docs/icons/categorized.md b/docs/icons/categorized.md
index 6789dc89e..cc93f2c62 100644
--- a/docs/icons/categorized.md
+++ b/docs/icons/categorized.md
@@ -3,19 +3,16 @@ layout: page
 outlineTitle: Categories
 ---
 
-<script setup>
-import { onMounted } from 'vue'
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
 import { data } from './index.data.ts'
+import PageContainer from '../.vitepress/components/PageContainer.vue'
+import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOverview.vue'
 
-const { categories, icons } = data
-onMounted(() => {
-  console.log(data)
-})
 </script>
 
-
 <div class="VPDoc content">
-  <section class="category" v-for="category in categories" :key="category.name">
-    <h2 >{{ category.title }}</h2>
-  </section>
+  <PageContainer>
+    <IconsCategoryOverview :categories="data.categories" :icon="data.icons" />
+  </PageContainer>
 </div>
diff --git a/docs/icons/index.md b/docs/icons/index.md
index bbcd6539b..4eb01dbc1 100644
--- a/docs/icons/index.md
+++ b/docs/icons/index.md
@@ -8,6 +8,7 @@ outlineTitle: Categories
 import { onMounted } from 'vue'
 import { data } from './index.data.ts'
 import IconsOverview from '../.vitepress/components/IconsOverview.vue'
+import PageContainer from '../.vitepress/components/PageContainer.vue'
 
 const { categories, icons } = data
 onMounted(() => {
@@ -15,4 +16,6 @@ onMounted(() => {
 })
 </script>
 
-<IconsOverview :icons="icons" />
+<PageContainer>
+  <IconsOverview :icons="icons" />
+</PageContainer>
diff --git a/docs/index.md b/docs/index.md
index 3a3ad0def..bc3401674 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -25,7 +25,7 @@ features:
   - title: Lightweight & Scalable
     details: Icons are lightweight, highly optimized scalable vector graphics (SVG).
     icon: |
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" x2="20.05" y1="8" y2="17.94"></line><line x1="9.69" x2="21.17" y1="8" y2="8"></line><line x1="7.38" x2="13.12" y1="12" y2="2.06"></line><line x1="9.69" x2="3.95" y1="16" y2="6.06"></line><line x1="14.31" x2="2.83" y1="16" y2="16"></line><line x1="16.62" x2="10.88" y1="12" y2="21.94"></line></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-expand"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"></path><path d="M3 16.2V21m0 0h4.8M3 21l6-6"></path><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"></path><path d="M3 7.8V3m0 0h4.8M3 3l6 6"></path></svg>
   - title: Clean & consistent
     details: Designed with a strict set of design rules for consistency in style and readability.
     icon: |