diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 878d52f..6c997ed 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -21,7 +21,7 @@ const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
 }) => (
   <li>
     <A
-      class="tooltip tooltip-bottom rounded-full"
+      class="tooltip rounded-box tooltip-bottom"
       href={href}
       data-tip={tooltip}
     >
@@ -106,8 +106,8 @@ export const Header = () => {
   }
 
   return (
-    <ul class="navbar rounded-box sticky inset-x-0 top-2 z-10 mx-2 mt-2 flex w-auto items-center justify-center bg-base-200 p-2 sm:gap-2">
-      <div class="navbar-start">
+    <ul class="navbar rounded-box sticky inset-x-0 top-2 z-10 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
+      <div class="navbar-start gap-4">
         <div class="drawer w-auto lg:hidden">
           <input id="navs" type="checkbox" class="drawer-toggle" />
 
@@ -120,7 +120,7 @@ export const Header = () => {
           <div class="drawer-side">
             <label for="navs" class="drawer-overlay" />
 
-            <ul class="menu rounded-box z-50 gap-2 bg-base-300 p-2 shadow">
+            <ul class="menu rounded-box z-50 min-h-full w-2/5 gap-2 bg-base-300 p-2 shadow">
               <For each={navs()}>
                 {({ href, name }) => (
                   <li>
@@ -133,7 +133,7 @@ export const Header = () => {
         </div>
 
         <a
-          class="btn btn-ghost text-xl normal-case"
+          class="text-xl font-bold normal-case"
           href="https://github.com/metacubex/metacubexd"
           target="_blank"
         >
@@ -143,7 +143,7 @@ export const Header = () => {
 
       <Show when={location.pathname !== '/setup'}>
         <div class="navbar-center hidden lg:flex">
-          <ul class="menu menu-horizontal px-1">
+          <ul class="menu menu-horizontal gap-2">
             <For each={navs()}>
               {({ href, name, icon }) => (
                 <Nav href={href} tooltip={name}>
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 75b91a0..d830c3b 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -210,7 +210,7 @@ export default () => {
                 <tr>
                   <For each={headerGroup.headers}>
                     {(header) => (
-                      <th>
+                      <th class="bg-base-200">
                         <div
                           class={twMerge(
                             'flex items-center justify-between',