diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 20c8cf8..9e87dd2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,7 +12,6 @@ import { SearchImageContextProvider } from "@contexts/SearchImageContext";
 import { WithNotifications } from "@contexts/Notifications";
 import { ProtectedRoute } from "@components/protected-route";
 import { AppWrapper } from "@components/app-wrapper";
-import { WithDock } from "@components/dock";
 
 export const App = () => {
 	onAndroidMount();
@@ -25,14 +24,12 @@ export const App = () => {
 
 					<Route path="/" component={ProtectedRoute}>
 						<Route path="/" component={WithNotifications}>
-							<Route path="/" component={WithDock}>
-								<Route path="/" component={FrontPage} />
-								<Route path="/image/:imageId" component={ImagePage} />
-								<Route path="/entity/:entityId" component={Entity} />
-								<Route path="/gallery/:entity" component={Gallery} />
-							</Route>
-							<Route path="/settings" component={Settings} />
+							<Route path="/" component={FrontPage} />
+							<Route path="/image/:imageId" component={ImagePage} />
+							<Route path="/entity/:entityId" component={Entity} />
+							<Route path="/gallery/:entity" component={Gallery} />
 						</Route>
+						<Route path="/settings" component={Settings} />
 					</Route>
 				</Route>
 				<Route path="*" component={() => <Navigate href="/" />} />
diff --git a/frontend/src/components/app-wrapper/dock.tsx b/frontend/src/components/app-wrapper/dock.tsx
new file mode 100644
index 0000000..61a23db
--- /dev/null
+++ b/frontend/src/components/app-wrapper/dock.tsx
@@ -0,0 +1,19 @@
+import { A } from "@solidjs/router";
+import { IconHome, IconPhoto, IconSearch } from "@tabler/icons-solidjs";
+import { Component } from "solid-js";
+
+export const Dock: Component = () => {
+	return (
+		<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
+			<A href="/" class="w-full flex justify-center items-center">
+				<IconHome />
+			</A>
+			<A href="/" class="w-full flex justify-center items-center">
+				<IconSearch />
+			</A>
+			<A href="/" class="w-full flex justify-center items-center">
+				<IconPhoto />
+			</A>
+		</div>
+	);
+};
diff --git a/frontend/src/components/app-wrapper/index.tsx b/frontend/src/components/app-wrapper/index.tsx
index db448b3..3d742e2 100644
--- a/frontend/src/components/app-wrapper/index.tsx
+++ b/frontend/src/components/app-wrapper/index.tsx
@@ -1,7 +1,15 @@
 import { Component, ParentProps } from "solid-js";
+import { Topbar } from "./topbar";
+import { Dock } from "./dock";
 
 export const AppWrapper: Component<ParentProps> = (props) => {
 	return (
-		<div class="flex w-full justify-center h-screen">{props.children}</div>
+		<div class="w-full flex flex-col items-center h-screen">
+			<div class="container flex flex-col w-full h-full">
+				<Topbar />
+				{props.children}
+				<Dock />
+			</div>
+		</div>
 	);
 };
diff --git a/frontend/src/components/app-wrapper/topbar.tsx b/frontend/src/components/app-wrapper/topbar.tsx
new file mode 100644
index 0000000..0e2b889
--- /dev/null
+++ b/frontend/src/components/app-wrapper/topbar.tsx
@@ -0,0 +1,16 @@
+import { useNavigate } from "@solidjs/router";
+import { IconArrowLeft } from "@tabler/icons-solidjs";
+import { Component } from "solid-js";
+
+export const Topbar: Component = () => {
+	const nav = useNavigate();
+
+	return (
+		<div class="w-full flex items-center bg-white rounded-xl h-16">
+			<div class="cursor-pointer" onClick={() => nav(-1)}>
+				<IconArrowLeft />
+			</div>
+			<h1 class="font-bold text-2xl">Haystack</h1>
+		</div>
+	);
+};
diff --git a/frontend/src/components/dock/index.tsx b/frontend/src/components/dock/index.tsx
deleted file mode 100644
index d54dbc5..0000000
--- a/frontend/src/components/dock/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { A, useNavigate } from "@solidjs/router";
-import {
-	IconArrowLeft,
-	IconHome,
-	IconPhoto,
-	IconSearch,
-} from "@tabler/icons-solidjs";
-import { Component, ParentProps } from "solid-js";
-
-export const WithDock: Component<ParentProps> = (props) => {
-	const nav = useNavigate();
-
-	return (
-		<div class="w-full flex flex-col items-center">
-			{/* TODO: this should only show up when NOT on the home page. */}
-			<div class="cursor-pointer" onClick={() => nav(-1)}>
-				<IconArrowLeft />
-			</div>
-			{props.children}
-			<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
-				<A href="/" class="w-full flex justify-center items-center">
-					<IconHome />
-				</A>
-				<A href="/" class="w-full flex justify-center items-center">
-					<IconSearch />
-				</A>
-				<A href="/" class="w-full flex justify-center items-center">
-					<IconPhoto />
-				</A>
-			</div>
-		</div>
-	);
-};