diff --git a/Cargo.lock b/Cargo.lock
index 4c8b2ffd..aa94e813 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1499,9 +1499,9 @@ checksum = "460fbee9c2c2f33933d720630a6a0bac33ba7053db5344fac858d4b8952d77d5"
 
 [[package]]
 name = "crypto-common"
-version = "0.1.6"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1bfb12502f3fc46cca1bb51ac28df9d618d813cdc3d2f25b9fe775a34af26bb3"
+checksum = "78c8292055d1c1df0cce5d180393dc8cce0abec0a7102adb6c7b1eef6016d60a"
 dependencies = [
  "generic-array",
  "typenum",
@@ -2253,7 +2253,7 @@ dependencies = [
 [[package]]
 name = "dioxus-primitives"
 version = "0.0.1"
-source = "git+https://github.com/DioxusLabs/components#8e25631c7d4234ee070509156ed2abebb7b1d6e9"
+source = "git+https://github.com/DioxusLabs/components#98067ce2da493651b0c089db91e9903714c211f7"
 dependencies = [
  "dioxus",
  "dioxus-time",
@@ -3168,9 +3168,9 @@ dependencies = [
 
 [[package]]
 name = "generic-array"
-version = "0.14.9"
+version = "0.14.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4bb6743198531e02858aeaea5398fcc883e71851fcbcb5a2f773e2fb6cb1edf2"
+checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
 dependencies = [
  "typenum",
  "version_check",
@@ -3832,9 +3832,9 @@ checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
 
 [[package]]
 name = "hyper"
-version = "1.7.0"
+version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eb3aa54a13a0dfe7fbe3a59e0c76093041720fdc77b110cc0fc260fafb4dc51e"
+checksum = "1744436df46f0bde35af3eda22aeaba453aada65d8f1c171cd8a5f59030bd69f"
 dependencies = [
  "atomic-waker",
  "bytes",
@@ -5810,7 +5810,7 @@ checksum = "3af6b589e163c5a788fab00ce0c0366f6efbb9959c2f9874b224936af7fce7e1"
 dependencies = [
  "base64",
  "indexmap",
- "quick-xml 0.38.3",
+ "quick-xml 0.38.4",
  "serde",
  "time",
 ]
@@ -6059,9 +6059,9 @@ dependencies = [
 
 [[package]]
 name = "quick-xml"
-version = "0.38.3"
+version = "0.38.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42a232e7487fc2ef313d96dde7948e7a3c05101870d8985e4fd8d26aedd27b89"
+checksum = "b66c2058c55a409d601666cffe35f04333cf1013010882cec174a7467cd4e21c"
 dependencies = [
  "memchr",
 ]
@@ -6671,7 +6671,7 @@ dependencies = [
  "phf_codegen 0.11.3",
  "precomputed-hash",
  "rustc-hash 2.1.1",
- "servo_arc 0.4.1",
+ "servo_arc 0.4.3",
  "smallvec",
  "to_shmem",
  "to_shmem_derive",
@@ -6818,9 +6818,9 @@ dependencies = [
 
 [[package]]
 name = "servo_arc"
-version = "0.4.1"
+version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "204ea332803bd95a0b60388590d59cf6468ec9becf626e2451f1d26a1d972de4"
+checksum = "170fb83ab34de17dc69aa7c67482b22218ddb85da56546f9bd6b929e32a05930"
 dependencies = [
  "serde",
  "stable_deref_trait",
@@ -7174,7 +7174,7 @@ dependencies = [
  "rustc-hash 2.1.1",
  "selectors 0.32.0",
  "serde",
- "servo_arc 0.4.1",
+ "servo_arc 0.4.3",
  "smallbitvec",
  "smallvec",
  "static_assertions",
@@ -7245,7 +7245,7 @@ dependencies = [
  "cssparser 0.35.0",
  "euclid",
  "selectors 0.32.0",
- "servo_arc 0.4.1",
+ "servo_arc 0.4.3",
  "smallbitvec",
  "smallvec",
  "string_cache",
@@ -7283,7 +7283,7 @@ dependencies = [
  "malloc_size_of_derive",
  "selectors 0.32.0",
  "serde",
- "servo_arc 0.4.1",
+ "servo_arc 0.4.3",
  "stylo_atoms",
  "stylo_malloc_size_of",
  "thin-vec",
@@ -7714,7 +7714,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fb61262d1e7e4cc777e40cb2f101d5fa51f3eeac50c3a7355b2027b9274baa35"
 dependencies = [
  "cssparser 0.35.0",
- "servo_arc 0.4.1",
+ "servo_arc 0.4.3",
  "smallbitvec",
  "smallvec",
  "string_cache",
@@ -8824,9 +8824,9 @@ dependencies = [
 
 [[package]]
 name = "weezl"
-version = "0.1.11"
+version = "0.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "009936b22a61d342859b5f0ea64681cbb35a358ab548e2a44a8cf0dac2d980b8"
+checksum = "a28ac98ddc8b9274cb41bb4d9d4d5c425b6020c50c46f25559911905610b4a88"
 
 [[package]]
 name = "wgpu"
diff --git a/preview/assets/hero.css b/preview/assets/hero.css
index 78ca826e..8b0e2393 100644
--- a/preview/assets/hero.css
+++ b/preview/assets/hero.css
@@ -3,8 +3,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 50px;
     margin: 0;
+    height: calc(100vh - 4rem);
 }
 
 #hero > h1,
@@ -14,6 +14,7 @@
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.5rem;
     font-weight: 500;
+    text-align: center;
 }
 
 #hero > h1 {
@@ -31,9 +32,37 @@
     margin-bottom: 50px;
 }
 
+#scroll-down-icon {
+    position: absolute;
+    top: 95%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    fill: none;
+    stroke: var(--secondary-color-4);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+    animation: scroll-down-icon-animation 3000ms ease-in-out infinite;
+}
+
+@keyframes scroll-down-icon-animation {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
 #hero-search-container {
     display: flex;
-    width: 100%;
+    width: 80%;
+    padding: 10px;
     max-width: 800px;
     flex-direction: column;
     align-items: center;
@@ -72,14 +101,31 @@
     background-color: var(--primary-color-3);
 }
 
-#version-compatibility-notice {
+.explaination {
+    margin-bottom: 1rem;
+    padding-left: 5vw;
+    padding-right: 5vw;
+    min-width: 50vw;
+    text-align: center;
+}
+
+.explaination-box h3 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+.explaination-box {
     display: flex;
-    flex-direction: row;
+    max-width: 30vw;
+    width: 10rem;
+    min-height: 10rem;
+    box-sizing: border-box;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0.5em 1em;
+    padding: 1rem;
+    border: 1px solid var(--primary-color-6);
     border-radius: 0.5rem;
-    margin: 1em auto;
-    background: var(--primary-warning-color);
-    gap: 1em;
+    margin: 0.5rem;
+    background-color: var(--primary-color-2);
 }
diff --git a/preview/assets/main.css b/preview/assets/main.css
index 1522e69b..36ba89ec 100644
--- a/preview/assets/main.css
+++ b/preview/assets/main.css
@@ -94,7 +94,7 @@ body {
 }
 
 .code-block[data-collapsed="true"] {
-    height: 10em;
+    height: 20em;
     backdrop-filter: blur(1px);
     mask: linear-gradient(
         to bottom,
@@ -155,7 +155,7 @@ body {
 .component-preview-frame {
     display: flex;
     width: 100%;
-    min-height: 25vh;
+    min-height: 20rem;
     max-height: 100%;
     box-sizing: border-box;
     flex-direction: column;
@@ -191,6 +191,7 @@ body {
     margin-right: 5vw;
     font-size: 1em;
     overflow-x: scroll;
+    max-width: 90vw;
 }
 
 .component-installation {
@@ -211,7 +212,7 @@ body {
 .component-code {
     display: flex;
     width: 100%;
-    min-height: 25vh;
+    min-height: 20rem;
     max-height: 100%;
     box-sizing: border-box;
     flex-direction: column;
diff --git a/preview/src/components/date_picker/component.rs b/preview/src/components/date_picker/component.rs
index f82bac33..2ce5410e 100644
--- a/preview/src/components/date_picker/component.rs
+++ b/preview/src/components/date_picker/component.rs
@@ -21,10 +21,7 @@ pub fn DatePicker(props: DatePickerProps) -> Element {
                 disabled: props.disabled,
                 read_only: props.read_only,
                 attributes: props.attributes,
-                date_picker::DatePickerPopover {
-                    popover_root: PopoverRoot,
-                    {props.children}
-                }
+                date_picker::DatePickerPopover { popover_root: PopoverRoot, {props.children} }
             }
         }
     }
@@ -40,10 +37,8 @@ pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
             attributes: props.attributes,
             {props.children}
             DatePickerPopoverTrigger {}
-            DatePickerPopoverContent {
-                align: ContentAlign::Center,
-                date_picker::DatePickerCalendar {
-                    calendar: Calendar,
+            DatePickerPopoverContent { align: ContentAlign::Center,
+                date_picker::DatePickerCalendar { calendar: Calendar,
                     CalendarHeader {
                         CalendarNavigation {
                             CalendarPreviousMonthButton {}
@@ -62,9 +57,7 @@ pub fn DatePickerInput(props: DatePickerInputProps) -> Element {
 #[component]
 pub fn DatePickerPopoverTrigger(props: PopoverTriggerProps) -> Element {
     rsx! {
-        PopoverTrigger {
-            aria_label: "Show Calendar",
-            attributes: props.attributes,
+        PopoverTrigger { aria_label: "Show Calendar", attributes: props.attributes,
             svg {
                 class: "date-picker-expand-icon",
                 view_box: "0 0 24 24",
diff --git a/preview/src/components/input/variants/main/mod.rs b/preview/src/components/input/variants/main/mod.rs
index 2919782d..ecacf7e6 100644
--- a/preview/src/components/input/variants/main/mod.rs
+++ b/preview/src/components/input/variants/main/mod.rs
@@ -11,10 +11,7 @@ pub fn Demo() -> Element {
             value: name,
         }
         if !name.read().is_empty() {
-            p {
-                id: "input-greeting",
-                "Hello, {name}!"
-            }
+            p { id: "input-greeting", "Hello, {name}!" }
         }
     }
 }
diff --git a/preview/src/main.rs b/preview/src/main.rs
index cb26f80b..4e198ddd 100644
--- a/preview/src/main.rs
+++ b/preview/src/main.rs
@@ -1,6 +1,6 @@
 use core::panic;
 
-use crate::components::tabs::component::*;
+use crate::components::{separator::Separator, tabs::component::*};
 use crate::dioxus_router::LinkProps;
 use dioxus::prelude::*;
 use dioxus_i18n::prelude::*;
@@ -162,7 +162,10 @@ fn NavigationLayout() -> Element {
 
     rsx! {
         document::Link { rel: "stylesheet", href: asset!("/assets/main.css") }
-        document::Link { rel: "stylesheet", href: asset!("/assets/dx-components-theme.css") }
+        document::Link {
+            rel: "stylesheet",
+            href: asset!("/assets/dx-components-theme.css"),
+        }
         document::Link { rel: "stylesheet", href: asset!("/assets/hero.css") }
         Navbar {}
         Outlet::<Route> {}
@@ -446,6 +449,74 @@ fn LightModeIcon() -> Element {
     }
 }
 
+/// lucide plus icon
+#[component]
+fn PlusIcon() -> Element {
+    rsx! {
+        svg {
+            height: "2rem",
+            view_box: "0 0 24 24",
+            width: "2rem",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-label": "Add",
+            path {
+                d: "M5 12h14m-7-7v14",
+                fill: "none",
+                stroke: "currentColor",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                stroke_width: "2",
+            }
+        }
+    }
+}
+
+/// lucide search icon
+#[component]
+fn SearchIcon() -> Element {
+    rsx! {
+        svg {
+            height: "2rem",
+            view_box: "0 0 24 24",
+            width: "2rem",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-label": "Search",
+            g {
+                fill: "none",
+                stroke: "currentColor",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                stroke_width: "2",
+                path { d: "m21 21l-4.34-4.34" }
+                circle { cx: "11", cy: "11", r: "8" }
+            }
+        }
+    }
+}
+
+/// lucide edit icon
+#[component]
+fn EditIcon() -> Element {
+    rsx! {
+        svg {
+            height: "2rem",
+            view_box: "0 0 24 24",
+            width: "2rem",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-label": "Edit",
+            g {
+                fill: "none",
+                stroke: "currentColor",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                stroke_width: "2",
+                path { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }
+                path { d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" }
+            }
+        }
+    }
+}
+
 #[derive(PartialEq, Display, EnumIter, EnumString)]
 enum Language {
     English,
@@ -814,7 +885,7 @@ fn CliComponentInstallation(name: String) -> Element {
                         flex_direction: "row",
                         justify_content: "space-between",
                         align_items: "center",
-                        "cargo install dioxus-cli@0.7.0"
+                        "cargo install dioxus-cli"
                         CopyButton {}
                     }
                 }
@@ -900,19 +971,31 @@ fn Home(iframe: Option<bool>, dark_mode: Option<bool>) -> Element {
                 h2 {
                     b { "Accessible" }
                     ", "
-                    i { "unstyled" }
-                    " foundational components for Dioxus."
+                    i { "customizable" }
+                    " components for Dioxus."
                 }
-                div { id: "hero-search-container",
-                    input {
-                        id: "hero-search-input",
-                        r#type: "search",
-                        placeholder: "Search components...",
-                        value: search,
-                        oninput: move |e| {
-                            search.set(e.value());
-                        },
-                    }
+                Explaination {}
+                svg {
+                    id: "scroll-down-icon",
+                    view_box: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    polyline { points: "6 9 12 15 18 9" }
+                }
+            }
+            Separator {
+                style: "margin: 15px 20vw; width: 60vw;",
+                horizontal: true,
+                decorative: true,
+            }
+            div { id: "hero-search-container",
+                input {
+                    id: "hero-search-input",
+                    r#type: "search",
+                    placeholder: "Search components...",
+                    value: search,
+                    oninput: move |e| {
+                        search.set(e.value());
+                    },
                 }
             }
             ComponentGallery { search }
@@ -920,6 +1003,31 @@ fn Home(iframe: Option<bool>, dark_mode: Option<bool>) -> Element {
     }
 }
 
+#[component]
+fn Explaination() -> Element {
+    rsx! {
+        div { class: "explaination",
+            p {
+                "Dioxus components is a shadcn-inspired library of components built on top of Dioxus primitives"
+            }
+            div { display: "flex", justify_content: "space-between",
+                div { class: "explaination-box",
+                    h3 { SearchIcon {} }
+                    p { "Find a component" }
+                }
+                div { class: "explaination-box",
+                    h3 { PlusIcon {} }
+                    p { "Add it with dx" }
+                }
+                div { class: "explaination-box",
+                    h3 { EditIcon {} }
+                    p { "Customize it for your project" }
+                }
+            }
+        }
+    }
+}
+
 #[component]
 fn ComponentGallery(search: String) -> Element {
     rsx! {
diff --git a/test-harness/src/main.rs b/test-harness/src/main.rs
index 934da1ec..a4e5588c 100644
--- a/test-harness/src/main.rs
+++ b/test-harness/src/main.rs
@@ -23,15 +23,16 @@ fn App() -> Element {
 #[component]
 pub fn Hero() -> Element {
     rsx! {
-        div {
-            id: "hero",
+        div { id: "hero",
             img { src: HEADER_SVG, id: "header" }
             div { id: "links",
                 a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
                 a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
                 a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
                 a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
-                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
+                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus",
+                    "💫 VSCode Extension"
+                }
                 a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
             }
         }