diff --git a/public/ufh-2025.pdf b/public/ufh-2025.pdf
index e5b91dd..b478798 100644
Binary files a/public/ufh-2025.pdf and b/public/ufh-2025.pdf differ
diff --git a/src/components/Graphics.astro b/src/components/Graphics.astro
index 59b4e49..25ccc4f 100644
--- a/src/components/Graphics.astro
+++ b/src/components/Graphics.astro
@@ -11,7 +11,8 @@ const { imageMetadatas, alt } = Astro.props;
     imageMetadatas.then((metadatas) => (
         <!--suppress HtmlUnknownTag -->
     <graphics-element data-image-srcs={JSON.stringify(metadatas.map(({default: {src}}) => src))}>
-        <img class="max-h-dvh object-contain rounded-xl" src={metadatas[0].default.src} width={metadatas[0].default.width}
+        <img class="max-h-dvh object-contain rounded-xl" src={metadatas[0].default.src}
+             width={metadatas[0].default.width}
              height={metadatas[0].default.height} alt={alt}/>
     </graphics-element>
         ))
diff --git a/src/components/Spacer.astro b/src/components/Spacer.astro
index 17022c1..108c0a4 100644
--- a/src/components/Spacer.astro
+++ b/src/components/Spacer.astro
@@ -2,4 +2,11 @@
 
 ---
 
-<div class="h-1/4dvh"/>
+<!-- Large screen spacer -->
+<div class="hidden lg:block h-1/4dvh"/>
+
+<!-- Small screen spacer. -->
+<div class="lg:hidden">
+    <br/>
+    <br/>
+</div>
diff --git a/src/components/TextCardPair.astro b/src/components/TextCardPair.astro
new file mode 100644
index 0000000..cedb554
--- /dev/null
+++ b/src/components/TextCardPair.astro
@@ -0,0 +1,18 @@
+---
+import Article from "./Article.astro";
+---
+<div class="hero">
+    <div class="hero-content flex-col lg:flex-row w-full pt-0 pb-0">
+        <!-- Content side. -->
+        <div class="basis-1/2 self-stretch flex items-center">
+            <Article>
+                <slot/>
+            </Article>
+        </div>
+
+        <!-- Graphics side. -->
+        <div class="basis-1/2 self-stretch">
+            <slot name="graphics"/>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/TwoColumn.astro b/src/components/TextImagePair.astro
similarity index 86%
rename from src/components/TwoColumn.astro
rename to src/components/TextImagePair.astro
index e04602f..ac54666 100644
--- a/src/components/TwoColumn.astro
+++ b/src/components/TextImagePair.astro
@@ -2,12 +2,7 @@
 import Article from "./Article.astro";
 ---
 <div class="hero">
-    <div class="hero-content flex-col lg:flex-row-reverse w-full p-0">
-        <!-- Graphics side. -->
-        <div class="basis-1/2 self-stretch">
-            <slot name="graphics"/>
-        </div>
-
+    <div class="hero-content flex-col lg:flex-row w-full pt-0 pb-0">
         <!-- Content side. -->
         <div class="basis-1/2 self-stretch">
             <div class="sticky top-1/3">
@@ -16,5 +11,10 @@ import Article from "./Article.astro";
                 </Article>
             </div>
         </div>
+
+        <!-- Graphics side. -->
+        <div class="basis-1/2 self-stretch">
+            <slot name="graphics"/>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/components/TwoColumnVideo.astro b/src/components/TextVideoPair.astro
similarity index 59%
rename from src/components/TwoColumnVideo.astro
rename to src/components/TextVideoPair.astro
index 214a594..4b695e7 100644
--- a/src/components/TwoColumnVideo.astro
+++ b/src/components/TextVideoPair.astro
@@ -1,16 +1,16 @@
 ---
 ---
 <div class="hero">
-    <div class="hero-content flex-col lg:flex-row-reverse w-full p-0">
+    <div class="hero-content flex-col lg:flex-row-reverse w-full pt-0 pb-0">
         <!-- Graphics side. -->
-        <div class="basis-1/2 self-stretch">
-            <div class="h-dvh sticky top-0 flex justify-center items-center">
+        <div class="hidden lg:block basis-1/2 self-stretch">
+            <div class="lg:h-dvh sticky top-0 flex justify-center items-center">
                 <slot name="graphics"/>
             </div>
         </div>
 
         <!-- Content side. -->
-        <div class="basis-1/2">
+        <div class="lg:basis-1/2">
             <slot/>
         </div>
     </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 47127ff..fc9f00d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,7 +9,7 @@ const { imageSrcs } = Astro.props;
 <html lang="en" class="scroll-smooth">
 <head>
     <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
     <meta name="generator" content={Astro.generator}/>
     <title>Pinpoint</title>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 778bc18..5c7da72 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,8 +2,9 @@
 import { Image } from "astro:assets";
 import Article from "../components/Article.astro";
 import HeroText from "../components/HeroText.astro";
-import TwoColumn from "../components/TwoColumn.astro";
-import TwoColumnVideo from "../components/TwoColumnVideo.astro";
+import TextCardPair from "../components/TextCardPair.astro";
+import TextImagePair from "../components/TextImagePair.astro";
+import TextVideoPair from "../components/TextVideoPair.astro";
 import Layout from "../layouts/Layout.astro";
 
 import Graphics from "../components/Graphics.astro";
@@ -28,6 +29,15 @@ import Kenneth from "../assets/people/kenneth.avif";
 import Qiqi from "../assets/people/qiqi.avif";
 import Selina from "../assets/people/selina.avif";
 
+import AutomationInsertion from "../assets/automation/0042.avif";
+import NeuropixelImage from "../assets/equipment/0000.avif";
+import Nanoject from "../assets/equipment/0024.avif";
+import Laser from "../assets/equipment/0046.avif";
+import Pipette from "../assets/equipment/0068.avif";
+import Insertion from "../assets/insertion/0084.avif";
+import IntroSplash from "../assets/intro/0015.avif";
+import IntroFull from "../assets/intro/0079.avif";
+
 // Import graphics.
 const introImporter = new GraphicsImporter(
 	import.meta.glob<DefaultImageMetadata>("/src/assets/intro/*.avif"),
@@ -45,49 +55,64 @@ const automationImporter = new GraphicsImporter(
 
 <Layout imageSrcs={[introImporter.getImageSrcs(), equipmentImporter.getImageSrcs(), insertionImporter.getImageSrcs(), automationImporter.getImageSrcs()]}>
     <!-- Pinpoint Intro Sequence. -->
-    <TwoColumnVideo>
+    <TextVideoPair>
         <Graphics imageMetadatas={introImporter.getImageMetadatas()} alt="Brain opening to reveal multiple regions"
                   slot="graphics"/>
 
+        <!-- Intro image for small screens. -->
+        <Image class="lg:hidden aspect-square max-h-1/2dvh object-contain" src={IntroSplash}
+               alt="Human brain with electrophysiology probe"/>
+
         <!-- Titles. -->
-        <div class="flex justify-center items-center h-dvh">
+        <div class="flex justify-center items-center lg:h-dvh">
             <div class="flex-col">
                 <Article>
                     <h1 class="text-primary">Pinpoint</h1>
                     <h2>Interactive 3D visualization and automation tools for neuroscience research and
                         surgery.</h2>
+                    <div class="flex gap-2">
+                        <a class="hidden lg:inline-flex btn btn-primary"
+                           href="https://data.virtualbrainlab.org/Pinpoint/">Launch</a>
+                        <a class="btn" href="https://virtualbrainlab.org/pinpoint/installation_and_use.html"
+                           target="_blank"
+                           rel="noopener noreferrer">Read the Documentation</a>
+                    </div>
+                    <p>Scroll to learn more...</p>
                 </Article>
-
-                <br/>
-
-                <div class="flex gap-2">
-                    <a class="btn btn-primary" href="https://data.virtualbrainlab.org/Pinpoint/">Launch</a>
-                    <a class="btn" href="https://virtualbrainlab.org/pinpoint/installation_and_use.html" target="_blank"
-                       rel="noopener noreferrer">Read the Documentation</a>
-                </div>
-
-                <div class="absolute bottom-20">
-                    <Article>
-                        <p>Scroll to learn more...</p>
-                    </Article>
-                </div>
             </div>
         </div>
 
+        <!-- Spacer for small screens. -->
+        <div class="lg:hidden">
+            <Spacer/>
+        </div>
+
         <!-- Goal. -->
-        <div class="h-dvh">
+        <div class="lg:h-dvh">
             <div class="sticky top-1/3">
                 <Article>
-                    <h1>Pinpoint aims to advance large-scale neuroscience research with intuitive browser-based
-                        planning and automation tools.
+                    <h1>Pinpoint aims to advance <span class="text-secondary">large-scale neuroscience</span> research
+                        with intuitive browser-based
+                        <span class="text-primary">planning</span> and <span class="text-primary">automation</span>
+                        tools.
                     </h1>
                 </Article>
             </div>
         </div>
 
+        <!-- Spacer for small screens. -->
+        <div class="lg:hidden">
+            <Spacer/>
+        </div>
+
+        <!-- Full intro image. -->
+        <Image class="lg:hidden aspect-square object-contain" src={IntroFull}
+               alt="Human brain with 3 electrophysiology probes and multiple regions"/>
+
         <!-- Problem statement. -->
-        <div class="h-1/3dvh"/>
-        <div class="h-3/2dvh">
+        <div class="hidden lg:block h-1/3dvh"/>
+
+        <div class="lg:h-3/2dvh">
             <div class="sticky top-1/3">
                 <Article>
                     <h2>Human behavior engage multiple regions of the brain.</h2>
@@ -99,24 +124,32 @@ const automationImporter = new GraphicsImporter(
                 </Article>
             </div>
         </div>
-        <div class="h-1/2dvh"/>
-    </TwoColumnVideo>
+        <div class="hidden lg:block h-1/2dvh"/>
+    </TextVideoPair>
 
     <!-- Planning Phase. -->
 
-    <Spacer/>
+    <!-- Spacer for small screens. -->
+    <div class="lg:hidden">
+        <Spacer/>
+    </div>
+
     <HeroText>
         <h1 class="text-center">Plan Your Next Surgery with<br/><span class="text-primary">Pinpoint</span></h1>
     </HeroText>
-    <Spacer/>
+
+    <!-- Spacer for small screens. -->
+    <div class="lg:hidden">
+        <Spacer/>
+    </div>
 
     <!-- Simulate Equipment. -->
-    <TwoColumnVideo>
+    <TextVideoPair>
         <Graphics imageMetadatas={equipmentImporter.getImageMetadatas()} alt="Showcase of equipment pinpoint supports"
                   slot="graphics"/>
 
-        <div class="h-1/3dvh"/>
-        <div class="h-3/2dvh">
+        <div class="hidden lg:block lg:h-1/3dvh"/>
+        <div class="lg:h-3/2dvh">
             <div class="sticky top-1/3">
                 <Article>
                     <h2>Simulate your equipment</h2>
@@ -125,16 +158,24 @@ const automationImporter = new GraphicsImporter(
                 </Article>
             </div>
         </div>
-        <div class="h-1/2dvh"/>
-    </TwoColumnVideo>
+        <div class="hidden lg:block lg:h-1/2dvh"/>
+
+        <!-- Equipment images for small screens. -->
+        <div class="lg:hidden flex flex-wrap gap-8">
+            <Image class="aspect-square object-contain" src={NeuropixelImage} alt="Neuropixels probe"/>
+            <Image class="aspect-square object-contain" src={Nanoject} alt="Nanoject"/>
+            <Image class="aspect-square object-contain" src={Laser} alt="2-photon laser"/>
+            <Image class="aspect-square object-contain" src={Pipette} alt="Pipette"/>
+        </div>
+    </TextVideoPair>
 
     <!-- Brain in detail. -->
-    <TwoColumnVideo>
+    <TextVideoPair>
         <Graphics imageMetadatas={insertionImporter.getImageMetadatas()}
                   alt="Electrophysiology probe inserted into brain" slot="graphics"/>
 
-        <div class="h-1/3dvh"/>
-        <div class="h-3/2dvh">
+        <div class="hidden lg:block lg:h-1/3dvh"/>
+        <div class="lg:h-3/2dvh">
             <div class="sticky top-1/3">
                 <Article>
                     <h2>See the brain in detail</h2>
@@ -143,24 +184,40 @@ const automationImporter = new GraphicsImporter(
                 </Article>
             </div>
         </div>
-        <div class="h-1/2dvh"/>
-    </TwoColumnVideo>
+        <div class="hidden lg:block lg:h-1/2dvh"/>
+
+        <div class="lg:hidden">
+            <Spacer/>
+            <Image class="lg:hidden aspect-square object-contain" src={Insertion}
+                   alt="Electrophysiology probe inserted into brain."/>
+        </div>
+    </TextVideoPair>
 
     <!-- Automation Phase -->
 
-    <Spacer/>
+    <!-- Spacer for small screens. -->
+    <div class="lg:hidden">
+        <Spacer/>
+    </div>
+
     <HeroText>
         <h1 class="text-center">Run Your Plan with<br/><span class="text-primary">Pinpoint Automation</span>
         </h1>
     </HeroText>
-    <Spacer/>
 
-    <TwoColumnVideo>
+    <!-- Spacer for small screens. -->
+    <div class="lg:hidden">
+        <Spacer/>
+    </div>
+
+    <TextVideoPair>
         <Graphics imageMetadatas={automationImporter.getImageMetadatas()}
                   alt="Automated insertion in pinpoint synced with real probe" slot="graphics"/>
 
-        <Spacer/>
-        <div class="h-3/2dvh">
+        <div class="hidden lg:block">
+            <Spacer/>
+        </div>
+        <div class="lg:h-3/2dvh">
             <div class="sticky top-1/3">
                 <Article>
                     <h2>Automation improves accuracy and efficiency</h2>
@@ -171,11 +228,14 @@ const automationImporter = new GraphicsImporter(
             </div>
         </div>
         <Spacer/>
-    </TwoColumnVideo>
+
+        <Image class="lg:hidden aspect-square object-contain" src={AutomationInsertion}
+               alt="Ephys Link inserting a probe."/>
+    </TextVideoPair>
 
     <Spacer/>
 
-    <TwoColumn>
+    <TextImagePair>
         <div slot="graphics">
             <Image class="rounded-xl" src={SensapexRig} alt="Sensapex Rig"/>
             <Article>
@@ -210,11 +270,11 @@ const automationImporter = new GraphicsImporter(
         <p>Support for platforms can be added through the <a
                 href="https://ephys-link.virtualbrainlab.org/">Ephys
             Link</a> project.</p>
-    </TwoColumn>
+    </TextImagePair>
 
     <Spacer/>
 
-    <TwoColumn>
+    <TextImagePair>
         <div slot="graphics">
             <Image class="rounded-xl" src={Parallax} alt="Parallax tracking view"/>
             <Article>
@@ -239,7 +299,7 @@ const automationImporter = new GraphicsImporter(
         <p>The reduction in human error and increase in efficiency will enable neuroscientists to scale
             up
             their work to new heights, unlocking studies and surgeries previously deemed impossible.</p>
-    </TwoColumn>
+    </TextImagePair>
 
     <!-- Outreach -->
 
@@ -251,7 +311,7 @@ const automationImporter = new GraphicsImporter(
     <Spacer/>
 
     <!-- Teaching. -->
-    <TwoColumn>
+    <TextImagePair>
         <div slot="graphics">
             <Image class="rounded-xl" src={TeachingPinpoint} alt="Teaching Pinpoint"/>
             <Article>
@@ -280,12 +340,12 @@ const automationImporter = new GraphicsImporter(
             <li><a href="https://www.ucl.ac.uk/neuropixels/training/2024-neuropixels-course">UCL
                 Neuropixels Course</a></li>
         </ul>
-    </TwoColumn>
+    </TextImagePair>
 
     <Spacer/>
 
     <!-- Undergrads. -->
-    <TwoColumn>
+    <TextImagePair>
         <div class="avatar-group -space-x-6 rtl:space-x-reverse" slot="graphics">
             <div class="avatar">
                 <div class="w-auto">
@@ -331,12 +391,12 @@ const automationImporter = new GraphicsImporter(
             <li>Kai Nylund (<a href="https://expd.uw.edu/mge/apply/research/">Mary Gates Scholar</a>)
             </li>
         </ul>
-    </TwoColumn>
+    </TextImagePair>
 
     <Spacer/>
 
     <!-- Open Source. -->
-    <TwoColumn>
+    <TextCardPair>
         <div class="card lg:card-side bg-base-200" slot="graphics">
             <figure class="max-w-sm">
                 <img src="https://repository-images.githubusercontent.com/439779355/697a35bd-3ae0-4fd1-b7c5-fb9471189739"
@@ -357,12 +417,12 @@ const automationImporter = new GraphicsImporter(
             submit changes.</h3>
         <p>The open nature of our code also ensures it will still be maintainable long after we achieve our
             main goals.</p>
-    </TwoColumn>
+    </TextCardPair>
 
     <Spacer/>
 
     <!-- Website. -->
-    <TwoColumn>
+    <TextCardPair>
         <div class="card lg:card-side bg-base-200" slot="graphics">
             <figure class="max-w-sm">
                 <img src="https://virtualbrainlab.org/_images/vbl-header.png"
@@ -380,12 +440,12 @@ const automationImporter = new GraphicsImporter(
 
         <h2>Learn more about our projects</h2>
         <p>See what else we've made and get in contact with us!</p>
-    </TwoColumn>
+    </TextCardPair>
 
     <Spacer/>
 
     <!-- What's next. -->
-    <TwoColumn>
+    <TextCardPair>
         <div class="card lg:card-side bg-base-200" slot="graphics">
             <figure class="max-w-sm">
                 <Image src={UfhTitle} alt="Unity for Humanity Pitch Deck Title Slide"/>
@@ -401,7 +461,7 @@ const automationImporter = new GraphicsImporter(
 
         <h2>What's next for Pinpoint</h2>
         <p>See our roadmap and goals for Pinpoint.</p>
-    </TwoColumn>
+    </TextCardPair>
 
     <Spacer/>
 
@@ -409,31 +469,32 @@ const automationImporter = new GraphicsImporter(
     <div class="hero">
         <div class="hero-content flex-col justify-center text-center p-0">
             <Article>
-                <Image src={MadeWithUnity} alt="Made with Unity"/>
+                <Image class="object-contain" src={MadeWithUnity} alt="Made with Unity"/>
                 <h2>Core Team:</h2>
             </Article>
 
             <br/>
 
-            <div class="flex space-x-8">
-                <a href="mailto:kjy5@uw.edu">
+            <div class="flex flex-wrap flex-shrink gap-8 justify-center">
+                <a href="mailto:daniel.birman@alleninsitute.org">
                     <div class="avatar">
                         <div class="w-48 rounded-full">
-                            <img src={Kenneth.src} alt="Kenneth J. Yang"/>
+                            <img src={Dan.src} alt="Dr. Daniel Birman"/>
                         </div>
                     </div>
                     <Article>
-                        <p><strong>Kenneth J. Yang</strong><br/>University of Washington</p>
+                        <p><strong>Daniel Birman, PhD</strong><br/>Software Engineer<br/>Allen Institute for Neural
+                            Dynamics</p>
                     </Article>
                 </a>
-                <a href="mailto:daniel.birman@alleninsitute.org">
+                <a href="mailto:kjy5@uw.edu">
                     <div class="avatar">
                         <div class="w-48 rounded-full">
-                            <img src={Dan.src} alt="Dr. Daniel Birman"/>
+                            <img src={Kenneth.src} alt="Kenneth J. Yang"/>
                         </div>
                     </div>
                     <Article>
-                        <p><strong>Daniel Birman, PhD</strong><br/>Allen Institute</p>
+                        <p><strong>Kenneth J. Yang</strong><br/>Computer Science<br/>University of Washington ('25)</p>
                     </Article>
                 </a>
             </div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 1610c18..ecb0157 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -7,6 +7,9 @@ export default {
 	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
 	theme: {
 		extend: {
+			maxHeight: {
+				"1/2dvh": "50dvh",
+			},
 			height: {
 				"1/2dvh": "50dvh",
 				"1/3dvh": "33dvh",