diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 00000000..0c8d2113
--- /dev/null
+++ b/src/lib/components/Header.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { base } from '$app/paths';
+  import {
+    Link,
+    OutboundLink 
+  } from 'carbon-components-svelte';
+</script>
+
+<header>
+  <div class="mb-20 px-12 py-2 bg-slate-900">
+    <nav class="flex flex-row flex-wrap gap-4 md:gap-8">
+      <Link class="!text-white text-xs" href="{base}">Home</Link>
+      <Link class="!text-white" href="{base}/about">About + Credits</Link>
+      <Link class="!text-white" href="{base}/data-guide">Data Guide</Link>
+      <OutboundLink class="!text-white" href="https://migrants-and-the-state.github.io/">M/S Project</OutboundLink>
+      <OutboundLink class="!text-white" href="https://github.com/migrants-and-the-state">GitHub</OutboundLink>
+    </nav>
+  </div>
+
+  <div class="px-12">
+    <h1>M/S Corpus UI (v1-Sample)</h1>
+  </div>
+</header>
\ No newline at end of file
diff --git a/src/lib/components/InfoPane.svelte b/src/lib/components/InfoPane.svelte
new file mode 100644
index 00000000..1afe96e9
--- /dev/null
+++ b/src/lib/components/InfoPane.svelte
@@ -0,0 +1,68 @@
+<script>
+  import {
+		StructuredList,
+		StructuredListHead,
+		StructuredListRow,
+		StructuredListCell,
+		StructuredListBody
+	} from 'carbon-components-svelte';
+	import {
+		FolderShared as AFileIcon,
+		Document as PageIcon,
+		Identification as G325AIcon,
+		Policy as NatCertIcon
+	} from 'carbon-icons-svelte';
+</script>
+
+<div class="flex w-full flex-wrap md:flex-nowrap md:gap-10">
+  <div class="basis-full md:basis-1/2">
+    <p class="py-6">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada odio.
+      Sed laoreet tortor eu orci ornare, condimentum commodo metus egestas. Donec vitae felis
+      purus. Nulla ullamcorper venenatis varius. Vivamus varius in diam ut iaculis. Curabitur
+      elementum risus non accumsan tincidunt.
+    </p>
+  </div>
+  <div class="basis-full md:basis-1/2">
+    <div class="max-w-prose">
+      <StructuredList condensed>
+        <StructuredListHead>
+          <StructuredListRow head>
+            <StructuredListCell head>Statistics</StructuredListCell>
+            <StructuredListCell head>This v1-Sample</StructuredListCell>
+            <StructuredListCell head>Full Corpus (Ongoing)</StructuredListCell>
+          </StructuredListRow>
+        </StructuredListHead>
+        <StructuredListBody>
+          <StructuredListRow>
+            <StructuredListCell noWrap><AFileIcon class="inline" /> A-Files</StructuredListCell>
+            <StructuredListCell>0</StructuredListCell>
+            <StructuredListCell>0</StructuredListCell>
+          </StructuredListRow>
+
+          <StructuredListRow>
+            <StructuredListCell noWrap><PageIcon class="inline" /> Pages</StructuredListCell>
+            <StructuredListCell>0</StructuredListCell>
+            <StructuredListCell>0</StructuredListCell>
+          </StructuredListRow>
+
+          <StructuredListRow>
+            <StructuredListCell noWrap
+              ><G325AIcon class="inline" /> G325A Forms*</StructuredListCell
+            >
+            <StructuredListCell>0</StructuredListCell>
+            <StructuredListCell>0</StructuredListCell>
+          </StructuredListRow>
+
+          <StructuredListRow>
+            <StructuredListCell noWrap
+              ><NatCertIcon class="inline" /> Naturalization Certificates*</StructuredListCell
+            >
+            <StructuredListCell>0</StructuredListCell>
+            <StructuredListCell>0</StructuredListCell>
+          </StructuredListRow>
+        </StructuredListBody>
+      </StructuredList>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/SearchTabs.svelte b/src/lib/components/SearchTabs.svelte
new file mode 100644
index 00000000..5eb00aca
--- /dev/null
+++ b/src/lib/components/SearchTabs.svelte
@@ -0,0 +1,336 @@
+<script>
+	import { onMount } from 'svelte';
+	import { addDocument, search } from '$lib/search';
+
+	import {
+		Form,
+		FormGroup,
+		NumberInput,
+		Select,
+		SelectItem,
+		RadioButtonGroup,
+		RadioButton,
+		MultiSelect,
+		TextInput,
+		Button,
+		ButtonSet,
+		Link,
+		Tag,
+		Tabs,
+		Tab,
+		TabContent
+	} from 'carbon-components-svelte';
+	import {
+		FolderShared as AFileIcon,
+		Document as PageIcon,
+		Identification as G325AIcon,
+		Policy as NatCertIcon
+	} from 'carbon-icons-svelte';
+
+	let query = '';
+	let results = [];
+	let selectedFields = [];
+	let selectedPageFields = [];
+	let yearMin = 1800;
+	let yearMax = 1980;
+
+	// Sample documents
+	const documents = [
+		{ id: 1, content: 'First document content' },
+		{ id: 2, content: 'Second document content' }
+	];
+
+	onMount(() => {
+		documents.forEach((doc) => addDocument(doc.id, doc.content));
+	});
+
+	function handleSearch() {
+		results = search(query, { suggest: true });
+	}
+
+	$: console.log('query length', query.length);
+	$: isSearchInvalid = selectedFields.length === 0 && query.length > 0;
+	$: selectedFieldsLabel = selectedFields.length === 0 ? 'Select' : selectedFields.join(', ');
+	$: selectedPageFieldsLabel =
+		selectedPageFields.length === 0 ? 'Select' : selectedPageFields.join(', ');
+</script>
+
+<Tabs type="container" autoWidth>
+	<Tab label="Find A-Files" />
+	<Tab label="Find Pages" />
+	<Tab label="Find G325A Forms *" />
+	<Tab label="Find Naturalization Certificates *" />
+	<svelte:fragment slot="content">
+		<TabContent class="bg-white">
+			<div class="max-w-prose py-4">
+				<p class="py-2">
+					<AFileIcon class="inline" size="20" /> <span class="font-bold"> A-Files</span> are Fusce non
+					accumsan diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula.
+				</p>
+				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
+			</div>
+			<Form
+				on:submit={(e) => {
+					e.preventDefault();
+					handleSearch();
+				}}
+			>
+				<div class="py-4 font-bold">Search Within</div>
+				<FormGroup legendText="Fields">
+					<div class="flex flex-row justify-start">
+						<div class="basis-1/3">
+							<MultiSelect
+								label={selectedFieldsLabel}
+								selectionFeedback="fixed"
+								bind:selectedIds={selectedFields}
+								size="lg"
+								useTitleInItem="true"
+								sortItem={() => {}}
+								items={[
+									{ id: 'A-Number', text: 'A-Number (NARA)' },
+									{ id: 'CoB', text: 'Country of birth (NARA)' },
+									{ id: 'Last Name', text: 'Last name (NARA)' },
+									{ id: 'First Name', text: 'First name (NARA)' },
+									{ id: 'PoE', text: 'Port of entry (NARA)' },
+									{ id: 'Doc Types', text: 'Document Types (CNN)' },
+									{ id: 'Form Titles', text: 'Form Titles (LLM)' }
+								]}
+							/>
+						</div>
+						<div class="basis-2/3">
+							<TextInput
+								placeholder="Search..."
+								invalidText="Select 1+ fields for the search"
+								bind:value={query}
+								invalid={isSearchInvalid}
+							/>
+						</div>
+					</div>
+				</FormGroup>
+
+				<div class="py-4 font-bold">Advanced Filters</div>
+
+				<FormGroup legendText="Page Count">
+					<div class="flex justify-start py-2">
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="Minimum"
+								value="0"
+								min="0"
+								max="1000"
+								invalidText="Number must be between 0 and 1000."
+							/>
+						</div>
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="Maximum"
+								value="1000"
+								min="0"
+								max="1000"
+								invalidText="Number must be between 0 and 1000."
+							/>
+						</div>
+					</div>
+				</FormGroup>
+
+				<FormGroup legendText="Date of Entry (NARA)">
+					<div class="flex justify-start py-2">
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="Start Year"
+								value={yearMin}
+								min={yearMin}
+								max={yearMax}
+								invalidText="Number must be between {yearMin} and {yearMax}."
+							/>
+						</div>
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="End Year"
+								value={yearMax}
+								min={yearMin}
+								max={yearMax}
+								invalidText="Number must be between {yearMin} and {yearMax}."
+							/>
+						</div>
+					</div>
+				</FormGroup>
+
+				<FormGroup legendText="Date of Birth (NARA)">
+					<div class="flex justify-start py-2">
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="Start Year"
+								value={yearMin}
+								min={yearMin}
+								max={yearMax}
+								invalidText="Number must be between {yearMin} and {yearMax}."
+							/>
+						</div>
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="End Year"
+								value={yearMax}
+								min={yearMin}
+								max={yearMax}
+								invalidText="Number must be between {yearMin} and {yearMax}."
+							/>
+						</div>
+					</div>
+				</FormGroup>
+
+				<FormGroup>
+					<RadioButtonGroup legendText="Sex (NARA)" name="sex" selected="any">
+						<RadioButton labelText="Any" value="any" />
+						<RadioButton labelText="Unset" value="unset" />
+						<RadioButton labelText="F" value="F" />
+						<RadioButton labelText="M" value="M" />
+					</RadioButtonGroup>
+				</FormGroup>
+				<ButtonSet>
+					<Button kind="secondary">Reset</Button>
+					<Button on:click={handleSearch}>Submit</Button>
+				</ButtonSet>
+			</Form>
+		</TabContent>
+
+		<TabContent class="bg-white">
+			<div class="max-w-prose py-4">
+				<p class="py-2">
+					<PageIcon class="inline" size="20" /> <span class="font-bold">Pages</span> are Fusce non accumsan
+					diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula.
+				</p>
+				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
+			</div>
+			<Form
+				on:submit={(e) => {
+					e.preventDefault();
+				}}
+			>
+				<div class="py-4 font-bold">Search Within</div>
+				<FormGroup legendText="Fields">
+					<div class="flex flex-row justify-start">
+						<div class="basis-1/3">
+							<MultiSelect
+								label={selectedPageFieldsLabel}
+								selectionFeedback="fixed"
+								bind:selectedIds={selectedPageFields}
+								size="lg"
+								useTitleInItem="true"
+								sortItem={() => {}}
+								items={[
+									{ id: 'Page Text', text: 'Page Text (OCR)' },
+									{ id: 'Countries', text: 'Countries (NLP)' },
+									{ id: 'Form Title', text: 'Form Title (LLM)' },
+									{ id: 'Years', text: 'Years (NLP)' }
+								]}
+							/>
+						</div>
+						<div class="basis-2/3">
+							<TextInput
+								placeholder="Search..."
+								invalidText="Select 1+ fields for the search"
+								bind:value={query}
+								invalid={isSearchInvalid}
+							/>
+						</div>
+					</div>
+				</FormGroup>
+
+				<div class="py-4 font-bold">Advanced Filters</div>
+
+				<FormGroup legendText="Date of Birth (LLM)">
+					<div class="flex justify-start py-2">
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="Start Year"
+								value={yearMin}
+								min={yearMin}
+								max={yearMax}
+								invalidText="Number must be between {yearMin} and {yearMax}."
+							/>
+						</div>
+						<div class="basis-1/2">
+							<NumberInput
+								inline
+								helperText="End Year"
+								value={yearMax}
+								min={yearMin}
+								max={yearMax}
+								invalidText="Number must be between {yearMin} and {yearMax}."
+							/>
+						</div>
+					</div>
+				</FormGroup>
+
+				<FormGroup>
+					<RadioButtonGroup legendText="Document Type (CNN)" name="document type" selected="any">
+						<RadioButton labelText="Any" value="any" />
+						<RadioButton labelText="Unset" value="unset" />
+						<RadioButton labelText="Form" value="form" />
+						<RadioButton labelText="Letter" value="letter" />
+						<RadioButton labelText="Photograph" value="photograph" />
+						<RadioButton labelText="Miscellaneous" value="miscellaneous" />
+					</RadioButtonGroup>
+				</FormGroup>
+
+				<!-- <FormGroup>
+					<RadioButtonGroup legendText="Form Type (Heuristic)" name="form type" selected="any">
+						<RadioButton labelText="Any" value="any" />
+						<RadioButton labelText="Unset" value="unset" />
+						<RadioButton labelText="G325A" value="g325a" />
+						<RadioButton labelText="Naturalization Cert" value="cert_naturalization" />
+					</RadioButtonGroup>
+				</FormGroup> -->
+
+				<FormGroup>
+					<RadioButtonGroup legendText="Sex (LLM)" name="sex" selected="any">
+						<RadioButton labelText="Any" value="any" />
+						<RadioButton labelText="Unset" value="unset" />
+						<RadioButton labelText="F" value="F" />
+						<RadioButton labelText="M" value="M" />
+					</RadioButtonGroup>
+				</FormGroup>
+
+				<ButtonSet>
+					<Button kind="secondary">Reset</Button>
+					<Button>Submit</Button>
+				</ButtonSet>
+			</Form>
+		</TabContent>
+		<TabContent class="bg-white">
+			<div class="max-w-prose py-4">
+				<p class="py-2">
+					<G325AIcon class="inline" size="20" /> <span class="font-bold">G325A Forms</span> are Fusce
+					non accumsan diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula.
+				</p>
+				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
+			</div>
+		</TabContent>
+		<TabContent class="bg-white">
+			<div class="max-w-prose py-4">
+				<p class="py-2">
+					<NatCertIcon class="inline" size="20" />
+					<span class="font-bold">Naturalization Certificates</span> are Fusce non accumsan diam. Quisque
+					ex felis, semper nec lorem vitae, gravida efficitur ligula.
+				</p>
+				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
+			</div>
+		</TabContent>
+	</svelte:fragment>
+</Tabs>
+
+<div>
+	<ul>
+		{#each results as result}
+			<li>{result}</li>
+		{/each}
+	</ul>
+</div>
diff --git a/src/lib/index.js b/src/lib/index.js
index 856f2b6c..c7ab7734 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+// place files you want to import through the `$lib` alias in this folder.
\ No newline at end of file
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
index c8cacf08..189f71e2 100644
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@@ -1 +1 @@
-export const prerender = true;
\ No newline at end of file
+export const prerender = true;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5fce8e82..96e9f0e8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,91 +1,13 @@
 <script>
 	import '../app.css';
-	import {
-		OverflowMenu,
-		OverflowMenuItem,
-		StructuredList,
-		StructuredListHead,
-		StructuredListRow,
-		StructuredListCell,
-		StructuredListBody,
-		Link
-	} from 'carbon-components-svelte';
-	import { 
-		FolderShared as AFileIcon,
-		Document as PageIcon,
-		Identification as G325AIcon,
-		Policy as NatCertIcon
-	} from "carbon-icons-svelte";
+  import Header from '$lib/components/Header.svelte';
+	
 	let { children } = $props();
 </script>
 
-<OverflowMenu size="xl">
-	<OverflowMenuItem text="About" href="" />
-	<OverflowMenuItem text="Data Guide" href="" />
-	<OverflowMenuItem
-		text="M/S Project"
-		href="https://migrants-and-the-state.github.io/"
-	/>
-	<OverflowMenuItem
-		text="GitHub"
-		href="https://github.com/migrants-and-the-state"
-	/>
-</OverflowMenu>
-
-<div class="min-h-screen p-12">
-	<header>
-		<h1 class="mb-6">M/S Corpus UI (v1-Sample)</h1>
-	</header>
-	<div class="flex w-full flex-wrap md:flex-nowrap md:gap-10">
-		<div class="basis-full md:basis-1/2">
-			<p class="py-6">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet malesuada
-				odio. Sed laoreet tortor eu orci ornare, condimentum commodo metus egestas. Donec vitae
-				felis purus. Nulla ullamcorper venenatis varius. Vivamus varius in diam ut iaculis.
-				Curabitur elementum risus non accumsan tincidunt.
-			</p>
-			<Link href="">Read More</Link>
-		</div>
-		<div class="basis-full md:basis-1/2">
-			<div class="max-w-prose">
-				<StructuredList condensed>
-					<StructuredListHead>
-						<StructuredListRow head>
-							<StructuredListCell head>Statistics</StructuredListCell>
-							<StructuredListCell head>This v1-Sample</StructuredListCell>
-							<StructuredListCell head>Full Corpus (Ongoing)</StructuredListCell>
-						</StructuredListRow>
-					</StructuredListHead>
-					<StructuredListBody>
-						<StructuredListRow>
-							<StructuredListCell noWrap><AFileIcon class="inline"/> A-Files</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-						</StructuredListRow>
-
-						<StructuredListRow>
-							<StructuredListCell noWrap><PageIcon class="inline"/> Pages</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-						</StructuredListRow>
-
-						<StructuredListRow>
-							<StructuredListCell noWrap><G325AIcon class="inline"/> G325A Forms*</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-						</StructuredListRow>
-
-						<StructuredListRow>
-							<StructuredListCell noWrap><NatCertIcon class="inline" /> Naturalization Certificates*</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-							<StructuredListCell>0</StructuredListCell>
-						</StructuredListRow>
-					</StructuredListBody>
-				</StructuredList>
-			</div>
-		</div>
-	</div>
-	<main class="w-full">
+<div class="min-h-screen">
+	<Header />
+	<main class="w-full p-12">
 		{@render children()}
 	</main>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 96a4a566..60bd6da2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,315 +1,7 @@
 <script>
-	import { onMount } from 'svelte';
-	import { addDocument, search } from '$lib/search';
-
-	import {
-		Form,
-		FormGroup,
-		NumberInput,
-		Select,
-		SelectItem,
-		RadioButtonGroup,
-		RadioButton,
-		MultiSelect,
-		TextInput,
-		Button,
-		ButtonSet,
-		Link,
-		Tag,
-		Tabs,
-		Tab,
-		TabContent
-	} from 'carbon-components-svelte';
-	import { 
-		FolderShared as AFileIcon,
-		Document as PageIcon,
-		Identification as G325AIcon,
-		Policy as NatCertIcon
-	} from "carbon-icons-svelte";
-
-	let query = '';
-	let results = [];
-	let selectedFields = [];
-	let selectedPageFields = [];
-	let yearMin = 1800;
-	let yearMax = 1980;
-
-	// Sample documents
-	const documents = [
-		{ id: 1, content: 'First document content' },
-		{ id: 2, content: 'Second document content' }
-	];
-
-	onMount(() => {
-		documents.forEach((doc) => addDocument(doc.id, doc.content));
-	});
-
-	function handleSearch() {
-		results = search(query, { suggest: true });
-	}
-
-	$: console.log('query length', query.length);
-	$: isSearchInvalid = selectedFields.length === 0 && query.length > 0;
-	$: selectedFieldsLabel = selectedFields.length === 0 ? 'Select' : selectedFields.join(', ');
-	$: selectedPageFieldsLabel =
-		selectedPageFields.length === 0 ? 'Select' : selectedPageFields.join(', ');
+	import InfoPane from '$lib/components/InfoPane.svelte';
+	import SearchTabs from '$lib/components/SearchTabs.svelte';
 </script>
 
-<Tabs type="container" autoWidth>
-	<Tab label="Find A-Files" />
-	<Tab label="Find Pages" />
-	<Tab label="Find G325A Forms *" />
-	<Tab label="Find Naturalization Certificates *" />
-	<svelte:fragment slot="content">
-		<TabContent class="bg-white">
-			<div class="max-w-prose py-4">
-				<p class="py-2"><AFileIcon class="inline" size=20/> <span class="font-bold"> A-Files</span> are Fusce non accumsan diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula. </p>
-				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
-			</div>
-			<Form on:submit={(e) => { e.preventDefault(); handleSearch(); }}>
-				<div class="py-4 font-bold">Search Within</div>
-				<FormGroup legendText="Fields">
-					<div class="flex flex-row justify-start">
-						<div class="basis-1/3">
-							<MultiSelect
-								label={selectedFieldsLabel}
-								selectionFeedback="fixed"
-								bind:selectedIds={selectedFields}
-								size="lg"
-								useTitleInItem="true"
-								sortItem={() => {}}
-								items={[
-									{ id: 'A-Number', text: 'A-Number (NARA)' },
-									{ id: 'CoB', text: 'Country of birth (NARA)' },
-									{ id: 'Last Name', text: 'Last name (NARA)' },
-									{ id: 'First Name', text: 'First name (NARA)' },
-									{ id: 'PoE', text: 'Port of entry (NARA)' },
-									{ id: 'Doc Types', text: 'Document Types (CNN)' },
-									{ id: 'Form Titles', text: 'Form Titles (LLM)' }
-								]}
-							/>
-						</div>
-						<div class="basis-2/3">
-							<TextInput
-								placeholder="Search..."
-								invalidText="Select 1+ fields for the search"
-								bind:value={query}
-								invalid={isSearchInvalid}
-							/>
-						</div>
-					</div>
-				</FormGroup>
-
-				<div class="py-4 font-bold">Advanced Filters</div>
-
-				<FormGroup legendText="Page Count">
-					<div class="flex justify-start py-2">
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="Minimum"
-								value="0"
-								min="0"
-								max="1000"
-								invalidText="Number must be between 0 and 1000."
-							/>
-						</div>
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="Maximum"
-								value="1000"
-								min="0"
-								max="1000"
-								invalidText="Number must be between 0 and 1000."
-							/>
-						</div>
-					</div>
-				</FormGroup>
-
-				<FormGroup legendText="Date of Entry (NARA)">
-					<div class="flex justify-start py-2">
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="Start Year"
-								value={yearMin}
-								min={yearMin}
-								max={yearMax}
-								invalidText="Number must be between {yearMin} and {yearMax}."
-							/>
-						</div>
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="End Year"
-								value={yearMax}
-								min={yearMin}
-								max={yearMax}
-								invalidText="Number must be between {yearMin} and {yearMax}."
-							/>
-						</div>
-					</div>
-				</FormGroup>
-
-				<FormGroup legendText="Date of Birth (NARA)">
-					<div class="flex justify-start py-2">
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="Start Year"
-								value={yearMin}
-								min={yearMin}
-								max={yearMax}
-								invalidText="Number must be between {yearMin} and {yearMax}."
-							/>
-						</div>
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="End Year"
-								value={yearMax}
-								min={yearMin}
-								max={yearMax}
-								invalidText="Number must be between {yearMin} and {yearMax}."
-							/>
-						</div>
-					</div>
-				</FormGroup>
-
-				<FormGroup>
-					<RadioButtonGroup legendText="Sex (NARA)" name="sex" selected="any">
-						<RadioButton labelText="Any" value="any" />
-						<RadioButton labelText="Unset" value="unset" />
-						<RadioButton labelText="F" value="F" />
-						<RadioButton labelText="M" value="M" />
-					</RadioButtonGroup>
-				</FormGroup>
-				<ButtonSet>
-					<Button kind="secondary">Reset</Button>
-					<Button on:click={handleSearch}>Submit</Button>
-				</ButtonSet>
-			</Form>
-		</TabContent>
-			
-		<TabContent class="bg-white">
-			<div class="max-w-prose py-4">
-				<p class="py-2"><PageIcon class="inline" size=20/> <span class="font-bold">Pages</span> are Fusce non accumsan diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula. </p>
-				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
-			</div>
-			<Form on:submit={(e) => { e.preventDefault(); }}>
-				<div class="py-4 font-bold">Search Within</div>
-				<FormGroup legendText="Fields">
-					<div class="flex flex-row justify-start">
-						<div class="basis-1/3">
-							<MultiSelect
-								label={selectedPageFieldsLabel}
-								selectionFeedback="fixed"
-								bind:selectedIds={selectedPageFields}
-								size="lg"
-								useTitleInItem="true"
-								sortItem={() => {}}
-								items={[
-									{ id: 'Page Text', text: 'Page Text (OCR)' },
-									{ id: 'Countries', text: 'Countries (NLP)' },
-									{ id: 'Form Title', text: 'Form Title (LLM)' },
-									{ id: 'Years', text: 'Years (NLP)' }
-								]}
-							/>
-						</div>
-						<div class="basis-2/3">
-							<TextInput
-								placeholder="Search..."
-								invalidText="Select 1+ fields for the search"
-								bind:value={query}
-								invalid={isSearchInvalid}
-							/>
-						</div>
-					</div>
-				</FormGroup>
-
-				<div class="py-4 font-bold">Advanced Filters</div>
-
-				<FormGroup legendText="Date of Birth (LLM)">
-					<div class="flex justify-start py-2">
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="Start Year"
-								value={yearMin}
-								min={yearMin}
-								max={yearMax}
-								invalidText="Number must be between {yearMin} and {yearMax}."
-							/>
-						</div>
-						<div class="basis-1/2">
-							<NumberInput
-								inline
-								helperText="End Year"
-								value={yearMax}
-								min={yearMin}
-								max={yearMax}
-								invalidText="Number must be between {yearMin} and {yearMax}."
-							/>
-						</div>
-					</div>
-				</FormGroup>
-
-				<FormGroup>
-					<RadioButtonGroup legendText="Document Type (CNN)" name="document type" selected="any">
-						<RadioButton labelText="Any" value="any" />
-						<RadioButton labelText="Unset" value="unset" />
-						<RadioButton labelText="Form" value="form" />
-						<RadioButton labelText="Letter" value="letter" />
-						<RadioButton labelText="Photograph" value="photograph" />
-						<RadioButton labelText="Miscellaneous" value="miscellaneous" />
-					</RadioButtonGroup>
-				</FormGroup>
-
-				<!-- <FormGroup>
-					<RadioButtonGroup legendText="Form Type (Heuristic)" name="form type" selected="any">
-						<RadioButton labelText="Any" value="any" />
-						<RadioButton labelText="Unset" value="unset" />
-						<RadioButton labelText="G325A" value="g325a" />
-						<RadioButton labelText="Naturalization Cert" value="cert_naturalization" />
-					</RadioButtonGroup>
-				</FormGroup> -->
-
-				<FormGroup>
-					<RadioButtonGroup legendText="Sex (LLM)" name="sex" selected="any">
-						<RadioButton labelText="Any" value="any" />
-						<RadioButton labelText="Unset" value="unset" />
-						<RadioButton labelText="F" value="F" />
-						<RadioButton labelText="M" value="M" />
-					</RadioButtonGroup>
-				</FormGroup>
-
-				<ButtonSet>
-					<Button kind="secondary">Reset</Button>
-					<Button>Submit</Button>
-				</ButtonSet>
-			</Form>
-		</TabContent>
-		<TabContent class="bg-white">
-			<div class="max-w-prose py-4">
-				<p class="py-2"><G325AIcon class="inline" size=20/> <span class="font-bold">G325A Forms</span> are Fusce non accumsan diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula. </p>
-				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
-			</div>
-		</TabContent>
-		<TabContent class="bg-white">
-			<div class="max-w-prose py-4">
-				<p class="py-2"><NatCertIcon class="inline" size=20/>  <span class="font-bold">Naturalization Certificates</span> are Fusce non accumsan diam. Quisque ex felis, semper nec lorem vitae, gravida efficitur ligula. </p>
-				<p class="py-2">Read more in the <Link href="">Data Guide</Link>.</p>
-			</div>
-		</TabContent>
-	</svelte:fragment>
-</Tabs>
-
-
-<div>
-	<ul>
-		{#each results as result}
-			<li>{result}</li>
-		{/each}
-	</ul>
-</div>
\ No newline at end of file
+<InfoPane />
+<SearchTabs />
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 00000000..b14aa408
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1 @@
+<h2>About + Credits</h2>
\ No newline at end of file
diff --git a/src/routes/data-guide/+page.svelte b/src/routes/data-guide/+page.svelte
new file mode 100644
index 00000000..39090841
--- /dev/null
+++ b/src/routes/data-guide/+page.svelte
@@ -0,0 +1 @@
+<h2>Data Guide</h2>
\ No newline at end of file
diff --git a/static/favicon.png b/static/favicon.png
index 825b9e65..d6b77637 100644
Binary files a/static/favicon.png and b/static/favicon.png differ