diff --git a/src/components/Prose.astro b/src/components/Article.astro
similarity index 83%
rename from src/components/Prose.astro
rename to src/components/Article.astro
index 9993033..ebe3765 100644
--- a/src/components/Prose.astro
+++ b/src/components/Article.astro
@@ -1,6 +1,3 @@
----
-
----
 <article class="prose">
     <slot/>
 </article>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 2090d74..b26c26c 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,5 +1,22 @@
-<div class="hero min-h-screen">
+---
+interface Props {
+	graphicSrc: string;
+}
+
+const { graphicSrc } = Astro.props;
+---
+<div class="hero">
     <div class="hero-content flex-col lg:flex-row-reverse">
-        <slot/>
+        <!-- Graphics side. -->
+        <div class="basis-2/5 self-stretch">
+            <div class="h-dvh sticky top-0 border flex justify-center items-center">
+                <p class="p-8">{graphicSrc}</p>
+            </div>
+        </div>
+
+        <!-- Content side. -->
+        <div class="basis-1/2">
+            <slot/>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
deleted file mode 100644
index e760169..0000000
--- a/src/components/Welcome.astro
+++ /dev/null
@@ -1,209 +0,0 @@
----
-import astroLogo from "../assets/astro.svg";
-import background from "../assets/background.svg";
----
-
-<div id="container">
-	<img id="background" src={background.src} alt="" fetchpriority="high" />
-	<main>
-		<section id="hero">
-			<a href="https://astro.build"
-				><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
-			>
-			<h1>
-				To get started, open the <code><pre>src/pages</pre></code> directory in your project.
-			</h1>
-			<section id="links">
-				<a class="button" href="https://docs.astro.build">Read our docs</a>
-				<a href="https://astro.build/chat"
-					>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
-						><path
-							fill="currentColor"
-							d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
-						></path></svg
-					>
-				</a>
-			</section>
-		</section>
-	</main>
-
-	<a href="https://astro.build/blog/astro-5/" id="news" class="box">
-		<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
-			><path
-				d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
-				fill="#111827"></path></svg
-		>
-		<h2>What's New in Astro 5.0?</h2>
-		<p>
-			From content layers to server islands, click to learn more about the new features and
-			improvements in Astro 5.0
-		</p>
-	</a>
-</div>
-
-<style>
-	#background {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: -1;
-		filter: blur(100px);
-	}
-
-	#container {
-		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
-		height: 100%;
-	}
-
-	main {
-		height: 100%;
-		display: flex;
-		justify-content: center;
-	}
-
-	#hero {
-		display: flex;
-		align-items: start;
-		flex-direction: column;
-		justify-content: center;
-		padding: 16px;
-	}
-
-	h1 {
-		font-size: 22px;
-		margin-top: 0.25em;
-	}
-
-	#links {
-		display: flex;
-		gap: 16px;
-	}
-
-	#links a {
-		display: flex;
-		align-items: center;
-		padding: 10px 12px;
-		color: #111827;
-		text-decoration: none;
-		transition: color 0.2s;
-	}
-
-	#links a:hover {
-		color: rgb(78, 80, 86);
-	}
-
-	#links a svg {
-		height: 1em;
-		margin-left: 8px;
-	}
-
-	#links a.button {
-		color: white;
-		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
-		box-shadow:
-			inset 0 0 0 1px rgba(255, 255, 255, 0.12),
-			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
-		border-radius: 10px;
-	}
-
-	#links a.button:hover {
-		color: rgb(230, 230, 230);
-		box-shadow: none;
-	}
-
-	pre {
-		font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-			'DejaVu Sans Mono', monospace;
-		font-weight: normal;
-		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		margin: 0;
-	}
-
-	h2 {
-		margin: 0 0 1em;
-		font-weight: normal;
-		color: #111827;
-		font-size: 20px;
-	}
-
-	p {
-		color: #4b5563;
-		font-size: 16px;
-		line-height: 24px;
-		letter-spacing: -0.006em;
-		margin: 0;
-	}
-
-	code {
-		display: inline-block;
-		background:
-			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
-			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		padding: 6px 8px;
-	}
-
-	.box {
-		padding: 16px;
-		background: rgba(255, 255, 255, 1);
-		border-radius: 16px;
-		border: 1px solid white;
-	}
-
-	#news {
-		position: absolute;
-		bottom: 16px;
-		right: 16px;
-		max-width: 300px;
-		text-decoration: none;
-		transition: background 0.2s;
-		backdrop-filter: blur(50px);
-	}
-
-	#news:hover {
-		background: rgba(255, 255, 255, 0.55);
-	}
-
-	@media screen and (max-height: 368px) {
-		#news {
-			display: none;
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		#container {
-			display: flex;
-			flex-direction: column;
-		}
-
-		#hero {
-			display: block;
-			padding-top: 10%;
-		}
-
-		#links {
-			flex-wrap: wrap;
-		}
-
-		#links a.button {
-			padding: 14px 18px;
-		}
-
-		#news {
-			right: 16px;
-			left: 16px;
-			bottom: 2.5rem;
-			max-width: 100%;
-		}
-
-		h1 {
-			line-height: 1.5;
-		}
-	}
-</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 63cad93..27e76a9 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,7 +1,7 @@
 ---
 ---
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scroll-smooth">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c8719e9..5dddceb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,128 +1,106 @@
 ---
+import Article from "../components/Article.astro";
 import Hero from "../components/Hero.astro";
-import Prose from "../components/Prose.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout>
-    <Hero>
-        <p>[Image: human atlas (solid, should look like a brain)]</p>
-        <div>
-            <Prose>
-                <h1>Pinpoint</h1>
-                <h3>Interactive 3D visualization and automation tools for human neuroscience research and
-                    neurosurgery.</h3>
-            </Prose>
+    <!-- Pinpoint Intro Sequence. -->
 
-            <div>
-                <a class="btn btn-primary" href="https://data.virtualbrainlab.org/Pinpoint/">Launch</a>
-                <a class="btn" href="#about">Learn More</a>
-            </div>
-        </div>
-    </Hero>
+    <Hero graphicSrc="[Image: human atlas (solid, should look like a brain)] [Insert multiple probes with planned routes and highlighted regions] [Remove probes, exploded brain view, highlight various regions on scroll]">
 
-    <br/>
+        <!-- Titles. -->
+        <div class="flex justify-center items-center h-dvh">
+            <div class="flex-col">
+                <Article>
+                    <h1 class="text-primary">Pinpoint</h1>
+                    <h3>Interactive 3D visualization and automation tools for human neuroscience research and
+                        neurosurgery.</h3>
+                </Article>
 
-    <Hero>
-        <p>[Insert multiple probes with planned routes and highlighted regions]</p>
-        <Prose>
-            <h2 id="about">Pinpoint aims to advance large-scale neuroscience research with intuitive browser-based
-                planning and
-                automation
-                tools for efficient and reproducible neurosurgery.</h2>
-        </Prose>
-    </Hero>
+                <br/>
 
-    <br/>
+                <div>
+                    <a class="btn btn-primary" href="https://data.virtualbrainlab.org/Pinpoint/">Launch</a>
+                    <a class="btn" href="#goal">Learn More</a>
+                </div>
+            </div>
+        </div>
 
-    <Hero>
-        <p>[Remove probes, exploded brain view, highlight various regions on scroll]</p>
-        <Prose>
-            <h2>Human behavior engage multiple regions of the brain.</h2>
-            <h3>Current tools are designed to study individual brain regions, depend on manual input, and require
-                extensive expertise ot operate.</h3>
-            <p>Modern neuroscientists need tools that enable the study of the whole brain to better understand human
-                behavior
-                and
-                cure neurodegenerative diseases that affect the whole brain like Parkinson's and Alzheimer's.</p>
-        </Prose>
-    </Hero>
+        <!-- Goal. -->
+        <div>
+            <span class="anchor" id="goal"></span>
+            <Article>
+                <h1>Pinpoint aims to advance large-scale neuroscience research with intuitive browser-based planning and
+                    automation tools for efficient and reproducible neurosurgery.
+                </h1>
+            </Article>
+        </div>
 
-    <br/>
+        <!-- Problem statement. -->
+        <div class="flex justify-center items-center h-dvh">
+            <Article>
+                <h2>Human behavior engage multiple regions of the brain.</h2>
+                <h3>Current tools are designed to study individual brain regions, depend on manual input, and
+                    require extensive expertise ot operate.</h3>
+                <p>Modern neuroscientists need tools that enable the study of the whole brain to better understand
+                    human behavior and cure neurodegenerative diseases that affect the whole brain like Parkinson's
+                    and Alzheimer's.</p>
+            </Article>
+        </div>
+    </Hero>
 
     <!-- Planning Phase. -->
 
     <!-- FIXME: This says "experiments" instead of surgery... do we want that? -->
-    <Hero>
-        <p>[Move brain back to the center]</p>
-        <Prose>
-            <h1>Plan Your Next Experiment</h1>
-        </Prose>
-    </Hero>
-
-    <br/>
-
-    <Hero>
-        <p>[Scroll through various probe 3d models; left to right with labels, rat tetrode array, use nanoject for viral
-            injector]</p>
-        <Prose>
-            <h2>Simulate your lab</h2>
-            <h3>Use Neuropixel probes, viral injectors, and 2-photon lasers</h3>
-        </Prose>
-    </Hero>
+    <Hero graphicSrc="[Move brain back to the center], [Scroll through various probe 3d models; left to right with labels, rat tetrode array, use nanoject for viral injector], [Insert 1-shank neuro pixel probe vertically, bring in channel map, show coordinates in the corner, consider mouse brain]">
+        <div class="top-0 h-1/2dvh">
+            <Article>
+                <h1>Plan Your Next Experiment in Pinpoint</h1>
+            </Article>
+        </div>
 
-    <br/>
+        <div class="top-0 h-dvh">
+            <Article>
+                <h2>Simulate your lab</h2>
+                <h3>Use Neuropixel probes, viral injectors, and 2-photon lasers</h3>
+            </Article>
+        </div>
 
-    <Hero>
-        <p>[Insert 1-shank neuro pixel probe vertically, bring in channel map, show coordinates in the corner, consider
-            mouse brain]</p>
-        <p>[]</p>
-        <Prose>
-            <h2>View your plan in 3D</h2>
-        </Prose>
+        <div class="top-0 h-dvh">
+            <Article>
+                <h2>View your plan in 3D</h2>
+            </Article>
+        </div>
     </Hero>
 
-    <br/>
-
-    <!-- FIXME: Also says experiments -->
-    <!--<Hero>-->
-    <!--    <p>[Insert several more probes, rotate them out of each other's way, highlight target regions]</p>-->
-    <!--    <Prose>-->
-    <!--        <h2>Plan the most complex experiments with ease.</h2>-->
-    <!--    </Prose>-->
-    <!--</Hero>-->
-
-    <br/>
-
     <!-- Automation Phase -->
-    <!-- FIXME: This is demonstrating the end product, not what we have now. -->
-
-    <Hero>
-        <p>[Probes fade into insertion lines]</p>
-        <Prose>
-            <h1>Automate Your Experiment</h1>
-            <h3>Beta</h3>
-        </Prose>
-    </Hero>
-
-    <br/>
-
-    <Hero>
-        <p>[Draw plan lines from probes off screen on scroll]</p>
-        <Prose>
-            <h2>Automatically generate plans...</h2>
-        </Prose>
-    </Hero>
-
+    <Hero graphicSrc="[Probes fade into insertion lines], [Draw plan lines from probes off screen on scroll], [From off screen, probes move in while following the plan lines]">
+        <div class="top-0 h-1/2dvh">
+            <Article>
+                <h1>Automate Your Experiment</h1>
+            </Article>
+        </div>
 
-    <br/>
+        <div class="top-0 h-dvh">
+            <Article>
+                <h2>Robot-assisted surgeries.</h2>
+            </Article>
+        </div>
 
-    <!-- FIXME: Should we have a segment demonstrating how slow this would take for individual probes? -->
-    <Hero>
-        <p>[From off screen, probes move in while following the plan lines]</p>
-        <Prose>
-            <h2>... and run them in parallel</h2>
-        </Prose>
+        <div class="top-0 h-dvh">
+            <Article>
+                <h2>Future: Complete Automation</h2>
+            </Article>
+        </div>
     </Hero>
-
 </Layout>
+
+<style>
+    .anchor {
+        display: block;
+        height: 45dvh;
+        margin-top: -45dvh;
+        visibility: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 7e674e7..af2e14f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -6,7 +6,11 @@ import { dark } from "daisyui/src/theming/themes";
 export default {
 	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
 	theme: {
-		extend: {},
+		extend: {
+			height: {
+				"1/2dvh": "50dvh",
+			},
+		},
 	},
 	plugins: [typography, daisyui],