diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 569b1b6..9ef1a7d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -32,9 +32,9 @@ export const App = () => {
 								<Route path="/image/:imageId" component={ImagePage} />
 								<Route path="/entity/:entityId" component={Entity} />
 								<Route path="/gallery/:entity" component={Gallery} />
+								<Route path="/settings" component={Settings} />
 							</Route>
 						</Route>
-						<Route path="/settings" component={Settings} />
 					</Route>
 				</Route>
 				<Route path="*" component={() => <Navigate href="/" />} />
diff --git a/frontend/src/components/app-wrapper/topbar.tsx b/frontend/src/components/app-wrapper/topbar.tsx
index d45f1a2..9552534 100644
--- a/frontend/src/components/app-wrapper/topbar.tsx
+++ b/frontend/src/components/app-wrapper/topbar.tsx
@@ -1,6 +1,6 @@
 import { ProcessingImages } from "@components/notifications/ProcessingImage";
-import { useLocation, useNavigate } from "@solidjs/router";
-import { IconArrowLeft } from "@tabler/icons-solidjs";
+import { A, useLocation, useNavigate } from "@solidjs/router";
+import { IconArrowLeft, IconSettings } from "@tabler/icons-solidjs";
 import { Component, Show } from "solid-js";
 
 export const Topbar: Component = () => {
@@ -16,7 +16,12 @@ export const Topbar: Component = () => {
 			</Show>
 			<h1 class="font-bold text-2xl">Haystack</h1>
 			<div class="ml-auto">
-				<ProcessingImages />
+				<div class="flex items-center gap-2">
+					<ProcessingImages />
+					<A href="/settings" class="w-16 h-16 flex items-center">
+						<IconSettings />
+					</A>
+				</div>
 			</div>
 		</div>
 	);