diff --git a/index.html b/index.html
index 197c8faa..0ea53cf9 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/svg" href="/src/assets/favicon.svg" />
     <title>Solid App</title>
@@ -10,7 +13,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
+    <div id="root" style="display: contents"></div>
     <script src="/src/index.tsx" type="module"></script>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
index 841896cc..5e801cfe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
-import { Route, Routes, useLocation, useNavigate } from '@solidjs/router'
-import { For, Show, onMount } from 'solid-js'
+import { Route, Routes, useNavigate } from '@solidjs/router'
+import { Show, onMount } from 'solid-js'
 import { Header } from '~/components/Header'
-import { themes } from '~/constants'
 import { Config } from '~/pages/Config'
 import { Connections } from '~/pages/Connections'
 import { Logs } from '~/pages/Logs'
@@ -9,10 +8,9 @@ import { Overview } from '~/pages/Overview'
 import { Proxies } from '~/pages/Proxies'
 import { Rules } from '~/pages/Rules'
 import { Setup } from '~/pages/Setup'
-import { curTheme, selectedEndpoint, setCurTheme } from '~/signals'
+import { curTheme, selectedEndpoint } from '~/signals'
 
 export const App = () => {
-  const location = useLocation()
   const navigate = useNavigate()
 
   onMount(() => {
@@ -23,39 +21,12 @@ export const App = () => {
 
   return (
     <div
-      class="relative min-h-screen p-4 subpixel-antialiased"
+      class="relative h-screen flex-col overflow-y-auto p-4 subpixel-antialiased"
       data-theme={curTheme()}
     >
-      <div class="sticky inset-x-0 top-0 z-50 flex items-center rounded-md bg-base-200 px-4 py-2">
-        <Show when={location.pathname !== '/setup'}>
-          <Header />
-        </Show>
+      <Header />
 
-        <div class="dropdown-end dropdown-hover dropdown ml-auto">
-          <label tabindex="0" class="btn btn-sm m-2 uppercase">
-            Themes
-          </label>
-
-          <ul
-            tabindex="0"
-            class="menu dropdown-content rounded-box z-[1] gap-2 bg-base-300 p-2 shadow"
-          >
-            <For each={themes}>
-              {(theme) => (
-                <li
-                  data-theme={theme}
-                  class="btn btn-xs"
-                  onClick={() => setCurTheme(theme)}
-                >
-                  {theme}
-                </li>
-              )}
-            </For>
-          </ul>
-        </div>
-      </div>
-
-      <div class="py-4">
+      <div class="flex-1 py-4">
         <Routes>
           <Show when={selectedEndpoint()}>
             <Route path="/" component={Overview} />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index d4d58dbe..8c04f52d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { A, useNavigate } from '@solidjs/router'
+import { A, useLocation, useNavigate } from '@solidjs/router'
 import {
   IconFileStack,
   IconGlobe,
@@ -8,62 +8,105 @@ import {
   IconRuler,
   IconSettings,
 } from '@tabler/icons-solidjs'
-import { setSelectedEndpoint } from '~/signals'
+import { For, Show } from 'solid-js'
+import { themes } from '~/constants'
+import { setCurTheme, setSelectedEndpoint } from '~/signals'
 
 export const Header = () => {
+  const location = useLocation()
   const navigate = useNavigate()
 
   return (
-    <ul class="menu rounded-box menu-horizontal">
-      <li>
-        <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
-          <IconHome />
-        </A>
-      </li>
+    <div class="sticky inset-x-0 top-0 z-10 flex items-center rounded-md bg-base-200 px-4 py-2">
+      <Show when={location.pathname !== '/setup'}>
+        <ul class="menu rounded-box menu-horizontal">
+          <li>
+            <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
+              <IconHome />
+            </A>
+          </li>
 
-      <li>
-        <A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
-          <IconGlobe />
-        </A>
-      </li>
+          <li>
+            <A
+              class="tooltip tooltip-bottom"
+              href="/proxies"
+              data-tip="Proxies"
+            >
+              <IconGlobe />
+            </A>
+          </li>
 
-      <li>
-        <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
-          <IconRuler />
-        </A>
-      </li>
+          <li>
+            <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
+              <IconRuler />
+            </A>
+          </li>
 
-      <li>
-        <A class="tooltip tooltip-bottom" href="/conns" data-tip="Connections">
-          <IconNetwork />
-        </A>
-      </li>
+          <li>
+            <A
+              class="tooltip tooltip-bottom"
+              href="/conns"
+              data-tip="Connections"
+            >
+              <IconNetwork />
+            </A>
+          </li>
 
-      <li>
-        <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
-          <IconFileStack />
-        </A>
-      </li>
+          <li>
+            <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
+              <IconFileStack />
+            </A>
+          </li>
 
-      <li>
-        <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
-          <IconSettings />
-        </A>
-      </li>
+          <li>
+            <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
+              <IconSettings />
+            </A>
+          </li>
 
-      <li>
-        <button
-          class="tooltip tooltip-bottom"
-          data-tip="Switch Endpoint"
-          onClick={() => {
-            setSelectedEndpoint('')
+          <li>
+            <button
+              class="tooltip tooltip-bottom"
+              data-tip="Switch Endpoint"
+              onClick={() => {
+                setSelectedEndpoint('')
 
-            navigate('/setup')
-          }}
-        >
-          <IconNetworkOff />
-        </button>
-      </li>
-    </ul>
+                navigate('/setup')
+              }}
+            >
+              <IconNetworkOff />
+            </button>
+          </li>
+        </ul>
+      </Show>
+
+      <div class="drawer drawer-end ml-auto w-auto">
+        <input id="themes" type="checkbox" class="drawer-toggle" />
+
+        <div class="drawer-content">
+          <label for="themes" class="btn drawer-button btn-sm m-2 uppercase">
+            Themes
+          </label>
+        </div>
+
+        <div class="drawer-side">
+          <label for="themes" class="drawer-overlay" />
+
+          <ul class="menu rounded-box z-50 gap-2 bg-base-300 p-2 shadow">
+            <For each={themes}>
+              {(theme) => (
+                <li
+                  data-theme={theme}
+                  class="btn btn-xs"
+                  onClick={() => setCurTheme(theme)}
+                >
+                  {theme}
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+      </div>
+    </div>
   )
 }
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index a52167a1..715ff0b3 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -40,13 +40,13 @@ export const Setup = () => {
     setEndpointList(endpointList().filter((e) => e.id !== id))
 
   return (
-    <div class="mx-auto flex w-2/3 flex-col items-center gap-4 py-10">
+    <div class="mx-auto flex flex-col items-center gap-4 py-10 sm:w-2/3">
       <form class="contents" use:form={form}>
-        <div class="join flex w-full">
+        <div class="flex w-full flex-col gap-4">
           <input
             name="url"
             type="url"
-            class="input join-item input-bordered flex-1"
+            class="input input-bordered"
             placeholder="http://127.0.0.1:9000"
             list="defaultEndpoints"
           />
@@ -59,7 +59,7 @@ export const Setup = () => {
             name="secret"
             type="password"
             autocomplete="new-password"
-            class="input join-item input-bordered"
+            class="input input-bordered"
             placeholder="secret"
           />
 
