diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 000000000..3c35941d2
--- /dev/null
+++ b/src/components/Hero.astro
@@ -0,0 +1,31 @@
+---
+import { LinkButton } from '@astrojs/starlight/components';
+import { Image } from 'astro:assets';
+
+const { tagline, getStarted, v1Docs } = Astro.props;
+---
+
+<div class="hero-bg">
+  <div class="bg-logo"></div>
+  <div class="bg-grad"></div>
+  <div class="bg-grad-red"></div>
+</div>
+
+<div class="lp-content">
+  <div class="lp-header lp-hero">
+    <div class="lp-header-content">
+      <Image class="lp-tauri-logo light" src={import('@assets/logo_light.svg')} alt="Tauri Logo" />
+      <Image class="lp-tauri-logo dark" src={import('@assets/logo.svg')} alt="Tauri Logo" />
+      <p class="lp-tagline">
+        {tagline}
+      </p>
+      <div class="actions">
+        <LinkButton icon="right-arrow" href="/start/">{getStarted}</LinkButton>
+        <LinkButton href="https://v1.tauri.app" variant="minimal" icon="external">
+          {v1Docs}
+        </LinkButton>
+      </div>
+    </div>
+    <Image src={import('@assets/logo-outline.svg')} alt="Tauri outline logo" />
+  </div>
+</div>
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index df8892ba2..0ed85518a 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -8,32 +8,20 @@ template: splash
 tableOfContents: false
 prev: false
 next: false
-hero:
-  tagline: Create small, fast, secure, cross-platform applications
-  image:
-    file: ../../assets/logo-outline.svg
-  actions:
-    - text: Get Started
-      link: /start/
-      icon: right-arrow
-      variant: primary
-    - text: Tauri 1.0 Documentation
-      link: https://v1.tauri.app
-      icon: external
-      variant: minimal
 ---
 
 import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
 import Cta from '@fragments/cta.mdx';
+import Hero from '@components/Hero.astro';
 import SponsorList from '@components/sponsors/SponsorList.astro';
 
-<div class="hero-bg">
-  <div class="bg-logo"></div>
-  <div class="bg-grad"></div>
-  <div class="bg-grad-red"></div>
-</div>
+<Hero
+  tagline="Create small, fast, secure, cross-platform applications"
+  getStarted="Get started"
+  v1Docs="Tauri 1.0 Documentation"
+/>
 
-<div class="lp-cta-card">
+<div>
   <Card title="Create a Project" icon="rocket">
     <Cta />
   </Card>
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
index f2c9a34ff..647dcd925 100644
--- a/src/styles/custom.scss
+++ b/src/styles/custom.scss
@@ -1,5 +1,6 @@
 @import url('./theme.scss');
 @import url('./overrides.scss');
+@import url('./lp.scss');
 
 .content details {
   padding: 0 1rem;
@@ -7,7 +8,7 @@
 
 .content details[open] {
   background-color: var(--sl-color-gray-6);
-  padding-bottom: rem;
+  padding-bottom: 1rem;
 }
 
 .content summary {
@@ -33,179 +34,11 @@
   color: var(--sl-color-white) !important;
 }
 
-@media (min-width: 50rem) {
-  .hero {
-    padding-block: clamp(2.5rem, calc(1rem + 10vmin), 5rem);
-  }
-}
-
-/* Index hero background */
-.hero-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  z-index: -1;
-  opacity: 0.7;
-  overflow: hidden;
-  background:
-    linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
-    linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
-    linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
-    linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
-    linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
-    linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
-    linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px),
-    linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px), transparent;
-  background-size:
-    32px 32px,
-    32px 32px,
-    256px 256px,
-    256px 256px,
-    256px 256px,
-    256px 256px,
-    256px 256px,
-    256px 256px;
-}
-
-/* Transition hero background grid smoothly to page background color. */
-.hero-bg::after {
-  content: '';
-  position: absolute;
-  inset: 70% 0 0;
-  background: linear-gradient(transparent, var(--sl-color-bg));
-}
-
-.bg-grad {
-  position: absolute;
-  top: -50%;
-  left: 50%;
-  width: 150vh;
-  height: 150vh;
-  opacity: 0.3;
-  background: radial-gradient(circle, var(--sl-color-accent) 0%, transparent 70%);
-  animation: 6s intro;
-}
-
-.bg-grad-red {
-  position: absolute;
-  top: 0%;
-  left: -50%;
-  width: 150vh;
-  height: 150vh;
-  opacity: 0.3;
-  background: radial-gradient(circle, var(--sl-color-orange) 0%, transparent 70%);
-  animation: 14s intro;
-}
-
-:root[data-theme='light'] {
-  .bg-grad {
-    opacity: 0.9;
-  }
-
-  .bg-grad-red {
-    opacity: 1;
-  }
-
-  .hero-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    z-index: -1;
-    opacity: 0.4;
-    overflow: hidden;
-    background:
-      linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
-      linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
-      linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
-      linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
-      linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
-      linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
-      linear-gradient(-90deg,
-        transparent 6px,
-        transparent 6px,
-        transparent 156px,
-        transparent 156px),
-      linear-gradient(var(--sl-color-gray-5) 1px, transparent 1px), transparent;
-    background-size:
-      32px 32px,
-      32px 32px,
-      256px 256px,
-      256px 256px,
-      256px 256px,
-      256px 256px,
-      256px 256px,
-      256px 256px;
-  }
-}
-
-/* Tauri logo on index page */
-.hero>img {
-  animation: 3s intro;
-  z-index: 10;
-  position: relative;
-  margin-bottom: -160px;
-  opacity: 0.2;
-}
-
-
-
-
-@media (min-width: 50rem) {
-  .hero>img {
-    z-index: 10;
-    margin: 0;
-    opacity: 0.7;
-
-  }
-}
 
 .sl-markdown-content .inline-icon {
   display: inline-block;
 }
 
-:root[data-theme='light'] .hero>img {
-  filter: invert(1);
-}
-
-@keyframes intro {
-  0% {
-    scale: 1.4;
-    opacity: 0;
-  }
-
-  80% {
-    scale: 0.9;
-  }
-
-  100% {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion) {
-  * {
-    transition: none !important;
-  }
-}
-
-.lp-cta-card {
-  z-index: 100;
-  position: relative;
-}
-
-@media (min-width: 50rem) {
-  .lp-cta-card {
-    margin-top: -8em;
-  }
-}
-
-
 article.card {
   border-radius: 0.5rem;
 }
diff --git a/src/styles/lp.scss b/src/styles/lp.scss
new file mode 100644
index 000000000..81df83b15
--- /dev/null
+++ b/src/styles/lp.scss
@@ -0,0 +1,199 @@
+.lp-tauri-logo {
+    max-width: 360px;
+    // margin-inline: auto;
+}
+
+:root[data-theme='light'] {
+    .lp-tauri-logo.light {
+        display: block;
+    }
+
+    .lp-tauri-logo.dark {
+        display: none;
+    }
+}
+
+.lp-tauri-logo.light {
+    display: none;
+}
+
+.lp-content {
+    margin-block: 2rem;
+    margin-inline: auto;
+    min-height: 360px;
+}
+
+.lp-header {
+    display: grid;
+    grid-template-columns: 7fr 3fr;
+    gap: 3%;
+    padding-bottom: 2em;
+    align-items: center;
+}
+
+
+.lp-tagline {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+
+// hide h1 title
+.content-panel:has(h1#_top:not([data-page-title])) {
+    display: none;
+}
+
+
+
+.lp-hero>img {
+    animation: 3s intro;
+    animation-fill-mode: forwards;
+    transition: opacity 1s ease-in-out;
+    opacity: 0.2;
+    width: 400px;
+    height: 400px;
+    margin-block: auto;
+}
+
+@media (min-width: 50rem) {
+    .lp-hero>img {
+        opacity: 0.5;
+    }
+}
+
+@keyframes intro {
+    0% {
+        scale: 1.8;
+        opacity: 0;
+    }
+
+    80% {
+        scale: 1.2;
+        opacity: 0.5;
+    }
+
+    100% {
+        scale: 1.1;
+    }
+}
+
+:root[data-theme='light'] .lp-hero>img {
+    filter: invert(1);
+}
+
+
+@media (prefers-reduced-motion) {
+    * {
+        transition: none !important;
+    }
+}
+
+
+
+
+/* Index hero background */
+.hero-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    z-index: -1;
+    opacity: 0.7;
+    overflow: hidden;
+    background:
+        linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
+        linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
+        linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
+        linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px),
+        linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
+        linear-gradient(-90deg, var(--sl-color-gray-6) 1px, transparent 1px),
+        linear-gradient(-90deg, transparent 6px, transparent 6px, transparent 156px, transparent 156px),
+        linear-gradient(var(--sl-color-gray-6) 1px, transparent 1px), transparent;
+    background-size:
+        32px 32px,
+        32px 32px,
+        256px 256px,
+        256px 256px,
+        256px 256px,
+        256px 256px,
+        256px 256px,
+        256px 256px;
+}
+
+/* Transition hero background grid smoothly to page background color. */
+.hero-bg::after {
+    content: '';
+    position: absolute;
+    inset: 70% 0 0;
+    background: linear-gradient(transparent, var(--sl-color-bg));
+}
+
+.bg-grad {
+    position: absolute;
+    top: -50%;
+    left: 50%;
+    width: 150vh;
+    height: 150vh;
+    opacity: 0.3;
+    background: radial-gradient(circle, var(--sl-color-accent) 0%, transparent 70%);
+    animation: 6s intro;
+}
+
+.bg-grad-red {
+    position: absolute;
+    top: 0%;
+    left: -50%;
+    width: 150vh;
+    height: 150vh;
+    opacity: 0.3;
+    background: radial-gradient(circle, var(--sl-color-orange) 0%, transparent 70%);
+    animation: 14s intro;
+}
+
+:root[data-theme='light'] {
+    .bg-grad {
+        opacity: 0.9;
+    }
+
+    .bg-grad-red {
+        opacity: 1;
+    }
+
+    .hero-bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: -1;
+        opacity: 0.4;
+        overflow: hidden;
+        background:
+            linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
+            linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
+            linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
+            linear-gradient(var(--sl-color-gray-4) 1px, transparent 1px),
+            linear-gradient(transparent 6px, transparent 6px, transparent 156px, transparent 156px),
+            linear-gradient(-90deg, var(--sl-color-gray-4) 1px, transparent 1px),
+            linear-gradient(-90deg,
+                transparent 6px,
+                transparent 6px,
+                transparent 156px,
+                transparent 156px),
+            linear-gradient(var(--sl-color-gray-5) 1px, transparent 1px), transparent;
+        background-size:
+            32px 32px,
+            32px 32px,
+            256px 256px,
+            256px 256px,
+            256px 256px,
+            256px 256px,
+            256px 256px,
+            256px 256px;
+    }
+}
\ No newline at end of file