diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 87eb314..20c8cf8 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,48 +1,18 @@
-import { A, Navigate, Route, Router, useNavigate } from "@solidjs/router";
-import { type Component, type ParentProps } from "solid-js";
-import {
-	IconArrowLeft,
-	IconHome,
-	IconPhoto,
-	IconSearch,
-} from "@tabler/icons-solidjs";
-import { Entity } from "./Entity";
+import { Navigate, Route, Router } from "@solidjs/router";
 import { onAndroidMount } from "./mobile";
-import { FrontPage, Gallery, ImagePage, Login, Settings } from "./pages";
+import {
+	FrontPage,
+	Gallery,
+	ImagePage,
+	Login,
+	Settings,
+	Entity,
+} from "./pages";
 import { SearchImageContextProvider } from "@contexts/SearchImageContext";
 import { WithNotifications } from "@contexts/Notifications";
 import { ProtectedRoute } from "@components/protected-route";
-
-const AppWrapper: Component<ParentProps> = (props) => {
-	return (
-		<div class="flex w-full justify-center h-screen">{props.children}</div>
-	);
-};
-
-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>
-	);
-};
+import { AppWrapper } from "@components/app-wrapper";
+import { WithDock } from "@components/dock";
 
 export const App = () => {
 	onAndroidMount();
diff --git a/frontend/src/components/app-wrapper/index.tsx b/frontend/src/components/app-wrapper/index.tsx
new file mode 100644
index 0000000..db448b3
--- /dev/null
+++ b/frontend/src/components/app-wrapper/index.tsx
@@ -0,0 +1,7 @@
+import { Component, ParentProps } from "solid-js";
+
+export const AppWrapper: Component<ParentProps> = (props) => {
+	return (
+		<div class="flex w-full justify-center h-screen">{props.children}</div>
+	);
+};
diff --git a/frontend/src/components/dock/index.tsx b/frontend/src/components/dock/index.tsx
new file mode 100644
index 0000000..d54dbc5
--- /dev/null
+++ b/frontend/src/components/dock/index.tsx
@@ -0,0 +1,33 @@
+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>
+	);
+};
diff --git a/frontend/src/Entity.tsx b/frontend/src/pages/entity/index.tsx
similarity index 100%
rename from frontend/src/Entity.tsx
rename to frontend/src/pages/entity/index.tsx
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index bc80108..06db031 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -3,3 +3,4 @@ export * from "./gallery";
 export * from "./image";
 export * from "./settings";
 export * from "./login";
+export * from "./entity";