diff --git a/src/Layout.tsx b/src/Layout.tsx
new file mode 100644
index 0000000..fae8e2c
--- /dev/null
+++ b/src/Layout.tsx
@@ -0,0 +1,67 @@
+import { Icon } from '@iconify-icon/solid';
+import { A } from '@solidjs/router';
+import { Component, ParentComponent } from 'solid-js';
+import { Portal } from 'solid-js/web';
+
+const WindowDragHandle: Component = () => {
+  return (
+    <Portal>
+      <div class="fixed inset-x-0 top-0 h-8 z-10" data-tauri-drag-region />
+    </Portal>
+  );
+};
+
+interface NavigationLinkProps {
+  href: string;
+}
+
+const NavigateLink: ParentComponent<NavigationLinkProps> = (props) => {
+  return (
+    <A
+      href={props.href}
+      class="hover:text-primary-hover"
+      activeClass="text-primary-active"
+      inactiveClass="text-on-surface">
+      <div class="flex flex-col justify-center items-center gap-2">{props.children}</div>
+    </A>
+  );
+};
+
+const Layout: ParentComponent = (props) => {
+  return (
+    <main class="flex flex-col items-stretch gap-0 size-full">
+      <header class="h-8 flex flex-row items-center pl-18 py-4">
+        <span class="z-20 text-title-lg italic">ComfyUI Resources</span>
+        <div class="grow" />
+      </header>
+      <div class="flex flex-row items-stretch gap-0 grow overflow-hidden">
+        <nav class="flex flex-col items-center gap-6 overflow-hidden w-24 py-4">
+          <NavigateLink href="/">
+            <Icon icon="tabler:folder" class="text-[28px] stroke-1" />
+            <span class="text-body-sm">Models</span>
+          </NavigateLink>
+          <NavigateLink href="/browse">
+            <Icon icon="tabler:world" class="text-[28px] stroke-1" />
+            <span class="text-body-sm">Browse</span>
+          </NavigateLink>
+          <NavigateLink href="/download">
+            <Icon icon="tabler:download" class="text-[28px] stroke-1" />
+            <span class="text-body-sm">Download</span>
+          </NavigateLink>
+          <NavigateLink href="/prompt">
+            <Icon icon="tabler:input-ai" class="text-[28px] stroke-1" />
+            <span class="text-body-sm">Prompt</span>
+          </NavigateLink>
+          <NavigateLink href="/setting">
+            <Icon icon="tabler:settings" class="text-[28px] stroke-1" />
+            <span class="text-body-sm">Settings</span>
+          </NavigateLink>
+        </nav>
+        <div class="grow overflow-hidden">{props.children}</div>
+      </div>
+      <WindowDragHandle />
+    </main>
+  );
+};
+
+export default Layout;
diff --git a/src/index.tsx b/src/index.tsx
index 6f34038..cdd9613 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,5 +5,6 @@ import './index.css';
 // Load components.
 import { Router } from '@solidjs/router';
 import { render } from 'solid-js/web';
+import Layout from './Layout';
 
-render(() => <Router />, document.getElementById('root') as HTMLElement);
+render(() => <Router root={Layout} />, document.getElementById('root') as HTMLElement);