diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx
index b9269af..518b302 100644
--- a/frontend/src/Settings.tsx
+++ b/frontend/src/Settings.tsx
@@ -1,18 +1,17 @@
 import { Button } from "@kobalte/core/button";
-import { FolderPicker } from "./components/FolderPicker";
+import { FolderPicker } from "./components/folder-picker/FolderPicker";
 import { Shortcuts } from "./components/shortcuts/Shortcuts";
 
 export const Settings = () => {
     return (
         <>
             <main class="container pt-2">
-                <div class="flex px-4 gap-2 items-center">
+                <div class="flex flex-col px-4 gap-2">
                     <Button as="a" href="/">
                         Back to home
                     </Button>
-                    <h1 class="text-2xl font-bold">Settings</h1>
-                </div>
-                <div class="flex flex-col px-4 gap-2">
+                    <h1 class="text-3xl font-bold">Settings</h1>
+
                     <FolderPicker />
                     <Shortcuts />
                 </div>
diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
index 50c3563..b7b0a34 100644
--- a/frontend/src/components/ImageViewer.tsx
+++ b/frontend/src/components/ImageViewer.tsx
@@ -1,7 +1,7 @@
-import { createEffect, createSignal } from "solid-js";
 import { listen } from "@tauri-apps/api/event";
-import { FolderPicker } from "./FolderPicker";
+import { createEffect, createSignal } from "solid-js";
 import { sendImage } from "../network";
+import { FolderPicker } from "./folder-picker/FolderPicker";
 
 export function ImageViewer() {
     const [latestImage, setLatestImage] = createSignal<string | null>(null);
diff --git a/frontend/src/components/FolderPicker.tsx b/frontend/src/components/folder-picker/FolderPicker.tsx
similarity index 100%
rename from frontend/src/components/FolderPicker.tsx
rename to frontend/src/components/folder-picker/FolderPicker.tsx