diff --git a/packages/settings-ui/package.json b/packages/settings-ui/package.json
index d6530402..ebed03e2 100644
--- a/packages/settings-ui/package.json
+++ b/packages/settings-ui/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@glzr/components": "1.0.0",
+    "@solidjs/router": "0.14.8",
     "smorf": "1.0.0",
     "solid-js": "1.9.2",
     "tailwindcss": "3.4.13 ",
diff --git a/packages/settings-ui/src/index.css b/packages/settings-ui/src/index.css
index 3b3ee9ac..56c45f47 100644
--- a/packages/settings-ui/src/index.css
+++ b/packages/settings-ui/src/index.css
@@ -8,6 +8,10 @@ body,
   height: 100%;
 }
 
+.tabler-icon {
+  stroke-width: 1;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
diff --git a/packages/settings-ui/src/index.tsx b/packages/settings-ui/src/index.tsx
index 95afb8dd..b1e977ba 100644
--- a/packages/settings-ui/src/index.tsx
+++ b/packages/settings-ui/src/index.tsx
@@ -1,6 +1,14 @@
 /* @refresh reload */
 import './index.css';
+import { Route, Router } from '@solidjs/router';
 import { render } from 'solid-js/web';
-import { App } from './App';
+import { WidgetSettings } from './settings/WidgetSettings';
 
-render(() => <App />, document.getElementById('root')!);
+render(
+  () => (
+    <Router>
+      <Route path="/" component={WidgetSettings} />
+    </Router>
+  ),
+  document.getElementById('root')!,
+);
diff --git a/packages/settings-ui/src/FileTree.tsx b/packages/settings-ui/src/settings/WidgetConfigTree.tsx
similarity index 94%
rename from packages/settings-ui/src/FileTree.tsx
rename to packages/settings-ui/src/settings/WidgetConfigTree.tsx
index f7fb5974..7f63ea28 100644
--- a/packages/settings-ui/src/FileTree.tsx
+++ b/packages/settings-ui/src/settings/WidgetConfigTree.tsx
@@ -16,12 +16,15 @@ export interface FileItem {
   children?: FileItem[];
 }
 
-export interface FileTreeProps {
+export interface WidgetConfigTreeProps {
   files: FileItem[];
   onSelect: (file: FileItem) => void;
 }
 
-export function FileTree({ files, onSelect }: FileTreeProps) {
+export function WidgetConfigTree({
+  files,
+  onSelect,
+}: WidgetConfigTreeProps) {
   const [expanded, setExpanded] = createSignal<Record<string, boolean>>(
     {},
   );
diff --git a/packages/settings-ui/src/App.tsx b/packages/settings-ui/src/settings/WidgetSettings.tsx
similarity index 71%
rename from packages/settings-ui/src/App.tsx
rename to packages/settings-ui/src/settings/WidgetSettings.tsx
index 28fe2f3c..0dda052a 100644
--- a/packages/settings-ui/src/App.tsx
+++ b/packages/settings-ui/src/settings/WidgetSettings.tsx
@@ -1,5 +1,5 @@
-import { FileItem, FileTree } from './FileTree';
-import { WidgetSettings } from './WidgetSettings';
+import { FileItem, WidgetConfigTree } from './WidgetConfigTree';
+import { WidgetSettingsForm } from './WidgetSettingsForm';
 
 const initialFiles: FileItem[] = [
   {
@@ -26,13 +26,13 @@ const initialFiles: FileItem[] = [
     children: [
       {
         name: 'Vacation.jpg',
-        type: 'image',
+        type: 'file',
         size: '3.2 MB',
         modified: '2023-09-28',
       },
       {
         name: 'Family.png',
-        type: 'image',
+        type: 'file',
         size: '2.9 MB',
         modified: '2023-09-29',
       },
@@ -40,23 +40,23 @@ const initialFiles: FileItem[] = [
   },
   {
     name: 'Music.mp3',
-    type: 'audio',
+    type: 'file',
     size: '5.4 MB',
     modified: '2023-10-01',
   },
   {
     name: 'Video.mp4',
-    type: 'video',
+    type: 'file',
     size: '15.7 MB',
     modified: '2023-10-02',
   },
 ];
 
-export function App() {
+export function WidgetSettings() {
   return (
     <div class="app">
-      <FileTree files={initialFiles} onSelect={() => {}} />
-      <WidgetSettings />
+      <WidgetConfigTree files={initialFiles} onSelect={() => {}} />
+      <WidgetSettingsForm />
     </div>
   );
 }
diff --git a/packages/settings-ui/src/WidgetSettings.tsx b/packages/settings-ui/src/settings/WidgetSettingsForm.tsx
similarity index 88%
rename from packages/settings-ui/src/WidgetSettings.tsx
rename to packages/settings-ui/src/settings/WidgetSettingsForm.tsx
index 6f96112c..708b6954 100644
--- a/packages/settings-ui/src/WidgetSettings.tsx
+++ b/packages/settings-ui/src/settings/WidgetSettingsForm.tsx
@@ -46,8 +46,8 @@ type WidgetPreset = {
   };
 };
 
-export function WidgetSettings() {
-  const widgetForm = createForm<WidgetSettings>({
+export function WidgetSettingsForm() {
+  const settingsForm = createForm<WidgetSettings>({
     htmlPath: '',
     zOrder: 'normal',
     shownInTaskbar: false,
@@ -59,7 +59,7 @@ export function WidgetSettings() {
   });
 
   const presetNames = createMemo(() =>
-    widgetForm.value.presets.map(preset => preset.name),
+    settingsForm.value.presets.map(preset => preset.name),
   );
 
   const [selectedPreset, setSelectedPreset] = createSignal<string | null>(
@@ -67,7 +67,7 @@ export function WidgetSettings() {
   );
 
   function addNewPreset() {
-    widgetForm.setValue('presets', presets => [
+    settingsForm.setValue('presets', presets => [
       ...presets,
       {
         name: presets.length ? `default${presets.length + 1}` : 'default',
@@ -83,7 +83,7 @@ export function WidgetSettings() {
     ]);
 
     if (!selectedPreset()) {
-      setSelectedPreset(widgetForm.value.presets[0].name);
+      setSelectedPreset(settingsForm.value.presets[0].name);
     }
   }
 
@@ -97,11 +97,11 @@ export function WidgetSettings() {
 
       <Card>
         <CardHeader>
-          <CardTitle>Widget Settings</CardTitle>
+          <CardTitle>Widget settings</CardTitle>
         </CardHeader>
 
         <CardContent class="space-y-4">
-          <Field of={widgetForm} path="htmlPath">
+          <Field of={settingsForm} path="htmlPath">
             {inputProps => (
               <TextField
                 id="html-path"
@@ -112,7 +112,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="zOrder">
+          <Field of={settingsForm} path="zOrder">
             {inputProps => (
               <SelectField
                 id="z-order"
@@ -137,7 +137,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="shownInTaskbar">
+          <Field of={settingsForm} path="shownInTaskbar">
             {inputProps => (
               <SwitchField
                 id="shown-in-taskbar"
@@ -147,7 +147,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="focused">
+          <Field of={settingsForm} path="focused">
             {inputProps => (
               <SwitchField
                 id="focused"
@@ -157,7 +157,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="resizable">
+          <Field of={settingsForm} path="resizable">
             {inputProps => (
               <SwitchField
                 id="resizable"
@@ -167,7 +167,7 @@ export function WidgetSettings() {
             )}
           </Field>
 
-          <Field of={widgetForm} path="transparent">
+          <Field of={settingsForm} path="transparent">
             {inputProps => (
               <SwitchField
                 id="transparent"
@@ -185,9 +185,9 @@ export function WidgetSettings() {
         </CardHeader>
 
         <CardContent class="space-y-4">
-          {widgetForm.value.presets.map((_, index) => (
+          {settingsForm.value.presets.map((_, index) => (
             <div class="border p-4 rounded-md space-y-2">
-              <Field of={widgetForm} path={`presets.${index}.name`}>
+              <Field of={settingsForm} path={`presets.${index}.name`}>
                 {inputProps => (
                   <TextField
                     id={`name-${index}`}
@@ -198,7 +198,7 @@ export function WidgetSettings() {
               </Field>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
-                <Field of={widgetForm} path={`presets.${index}.anchor`}>
+                <Field of={settingsForm} path={`presets.${index}.anchor`}>
                   {inputProps => (
                     <SelectField
                       id={`anchor-${index}`}
@@ -223,7 +223,7 @@ export function WidgetSettings() {
                 </Field>
 
                 <Field
-                  of={widgetForm}
+                  of={settingsForm}
                   path={`presets.${index}.monitorSelection.type`}
                 >
                   {inputProps => (
@@ -245,7 +245,7 @@ export function WidgetSettings() {
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                 {/* TODO: Change to px/percent input. */}
-                <Field of={widgetForm} path={`presets.${index}.offsetX`}>
+                <Field of={settingsForm} path={`presets.${index}.offsetX`}>
                   {inputProps => (
                     <TextField
                       id={`offset-x-${index}`}
@@ -256,7 +256,7 @@ export function WidgetSettings() {
                 </Field>
 
                 {/* TODO: Change to px/percent input. */}
-                <Field of={widgetForm} path={`presets.${index}.offsetY`}>
+                <Field of={settingsForm} path={`presets.${index}.offsetY`}>
                   {inputProps => (
                     <TextField
                       id={`offset-y-${index}`}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index deb27fc2..64a08839 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,6 +162,9 @@ importers:
       '@glzr/components':
         specifier: 1.0.0
         version: link:../../../glzr-components
+      '@solidjs/router':
+        specifier: 0.14.8
+        version: 0.14.8(solid-js@1.9.2)
       smorf:
         specifier: 1.0.0
         version: link:../../../smorf
@@ -1004,6 +1007,11 @@ packages:
     peerDependencies:
       solid-js: ^1.6.12
 
+  '@solidjs/router@0.14.8':
+    resolution: {integrity: sha512-S+rD5Twp0820cM03wEIYtb7/4KN7Cfr3BP+qPIqb7IXO/SZ72tWqHEMQsmcjDbr4yVfpA+5Sq0Y+xcq09y1gQA==}
+    peerDependencies:
+      solid-js: ^1.8.6
+
   '@swc/helpers@0.5.13':
     resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
 
@@ -2793,6 +2801,10 @@ snapshots:
     dependencies:
       solid-js: 1.9.2
 
+  '@solidjs/router@0.14.8(solid-js@1.9.2)':
+    dependencies:
+      solid-js: 1.9.2
+
   '@swc/helpers@0.5.13':
     dependencies:
       tslib: 2.6.2