diff --git a/docs/.vitepress/theme/components/home/HomeHeroBefore.vue b/docs/.vitepress/theme/components/home/HomeHeroBefore.vue
new file mode 100644
index 000000000..db504fa90
--- /dev/null
+++ b/docs/.vitepress/theme/components/home/HomeHeroBefore.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Badge from '../base/Badge.vue';
+import lucidePackage from '../../../../../packages/lucide/package.json';
+import HomeContainer from './HomeContainer.vue';
+const currentVersion = lucidePackage.version;
+
+</script>
+<template>
+  <HomeContainer class="container">
+    <Badge>v{{ currentVersion }}</Badge>
+  </HomeContainer>
+</template>
+
+<style scoped>
+.container {
+  margin-block: 0;;
+  margin-top: 37px;
+  margin-bottom: -96px;
+  display: flex;
+  justify-content: center;
+}
+.badge {
+  display: inline-block;
+}
+
+@media (min-width: 640px) {
+  .container {
+    margin-bottom: -131px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    justify-content: flex-start;
+  }
+  .badge {
+    display: inline-block;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
index 252b215d1..7331c7706 100644
--- a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
+++ b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue
@@ -153,21 +153,8 @@ onBeforeUnmount(() => {
     background: var(--vp-c-bg-soft);
   }
   .card-wrapper {
-    margin-top: 0;
+    margin-top: 8px;
   }
 }
 
-/* .search-box :deep(.input) {
-  background: var(--vp-code-block-bg-light);
-  color: var(--vp-code-block-color);
-  padding: 12px 16px;
-  height: auto;
-  font-size: 16px;
-  box-shadow: var(--vp-shadow-4);
-}
-
-.search-box :deep(.input)::placeholder {
-  color: var(--vp-c-text-inverse-2)
-} */
-
 </style>
diff --git a/docs/.vitepress/theme/components/home/HomeHeroInfo.vue b/docs/.vitepress/theme/components/home/HomeHeroInfo.vue
deleted file mode 100644
index f55e45aa3..000000000
--- a/docs/.vitepress/theme/components/home/HomeHeroInfo.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import Badge from '../base/Badge.vue';
-import lucidePackage from '../../../../../packages/lucide/package.json';
-const currentVersion = lucidePackage.version;
-</script>
-<template>
-  <div class="hero-badge">
-    <Badge>v{{ currentVersion }}</Badge>
-  </div>
-  <h1>
-    <span class="name">Beautiful &</span><br>
-    <span class="text">consistent icons</span>
-  </h1>
-  <p class="tagline">Made by the community.</p>
-</template>
-
-<style scoped>
-h1 {
-  line-height: 64px;
-  font-size: 56px;
-  max-width: 576px;
-  font-weight: 700;
-  white-space: pre-wrap;
-}
-.name {
-  color: var(--vp-c-brand);
-}
-.badge {
-  display: inline-block;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/icons/RelatedIcons.vue b/docs/.vitepress/theme/components/icons/RelatedIcons.vue
index a9d95287d..47f470d7e 100644
--- a/docs/.vitepress/theme/components/icons/RelatedIcons.vue
+++ b/docs/.vitepress/theme/components/icons/RelatedIcons.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <section class="category">
+  <section class="related-icons">
     <h2 class="title">
       Related Icons
     </h2>
@@ -18,17 +18,13 @@ defineProps<{
 </template>
 
 <style scoped>
-.icon {
-  aspect-ratio: 1/1;
-}
-
 .title {
   margin-bottom: 24px;
   font-size: 19px;
   font-weight: 500;
 }
 
-.category {
+.related-icons {
   margin-bottom: 32px;
 }
 </style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 2ba120c93..b9ac9e2b1 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -4,7 +4,7 @@ import './style.css'
 import { Theme } from 'vitepress'
 import IconsSidebarNavAfter from './layouts/IconsSidebarNavAfter.vue'
 import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue'
-import HomeHeroInfo from "./components/home/HomeHeroInfo.vue";
+import HomeHeroBefore from "./components/home/HomeHeroBefore.vue";
 import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle'
 import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView'
 
@@ -12,7 +12,7 @@ const theme: Partial<Theme> = {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'home-hero-info': () => h(HomeHeroInfo),
+      'home-hero-before': () => h(HomeHeroBefore),
       'sidebar-nav-after': () => h(IconsSidebarNavAfter),
       'home-hero-image': () => h(HomeHeroIconsCard)
     })