diff --git a/lib/aprsme_web/components/core_components.ex b/lib/aprsme_web/components/core_components.ex
index eefe19a..baa840f 100644
--- a/lib/aprsme_web/components/core_components.ex
+++ b/lib/aprsme_web/components/core_components.ex
@@ -748,35 +748,35 @@ defmodule AprsmeWeb.CoreComponents do
     <%= if @variant == :horizontal do %>
       <ul class="menu menu-horizontal px-1">
         <li>
-          <.link navigate={@home_url} class="text-gray-900 hover:text-gray-700">
+          <.link navigate={@home_url} class="text-base-content hover:text-base-content/70">
             {gettext("Home")}
           </.link>
         </li>
-        <li><.link navigate="/api" class="text-gray-900 hover:text-gray-700">API</.link></li>
+        <li><.link navigate="/api" class="text-base-content hover:text-base-content/70">API</.link></li>
         <li>
-          <.link navigate="/about" class="text-gray-900 hover:text-gray-700">
+          <.link navigate="/about" class="text-base-content hover:text-base-content/70">
             {gettext("About")}
           </.link>
         </li>
         <%= if @current_user do %>
           <li>
-            <.link navigate="/users/settings" class="text-gray-900 hover:text-gray-700">
+            <.link navigate="/users/settings" class="text-base-content hover:text-base-content/70">
               {gettext("Settings")}
             </.link>
           </li>
           <li>
-            <.link href="/users/log_out" method="delete" class="text-gray-900 hover:text-gray-700">
+            <.link href="/users/log_out" method="delete" class="text-base-content hover:text-base-content/70">
               {gettext("Log out")}
             </.link>
           </li>
         <% else %>
           <li>
-            <.link navigate="/users/register" class="text-gray-900 hover:text-gray-700">
+            <.link navigate="/users/register" class="text-base-content hover:text-base-content/70">
               {gettext("Register")}
             </.link>
           </li>
           <li>
-            <.link navigate="/users/log_in" class="text-gray-900 hover:text-gray-700">
+            <.link navigate="/users/log_in" class="text-base-content hover:text-base-content/70">
               {gettext("Log in")}
             </.link>
           </li>
@@ -784,33 +784,33 @@ defmodule AprsmeWeb.CoreComponents do
       </ul>
     <% else %>
       <li>
-        <.link navigate={@home_url} class="text-gray-900 hover:text-gray-700">
+        <.link navigate={@home_url} class="text-base-content hover:text-base-content/70">
           {gettext("Home")}
         </.link>
       </li>
-      <li><.link navigate="/api" class="text-gray-900 hover:text-gray-700">API</.link></li>
+      <li><.link navigate="/api" class="text-base-content hover:text-base-content/70">API</.link></li>
       <li>
-        <.link navigate="/about" class="text-gray-900 hover:text-gray-700">{gettext("About")}</.link>
+        <.link navigate="/about" class="text-base-content hover:text-base-content/70">{gettext("About")}</.link>
       </li>
       <%= if @current_user do %>
         <li>
-          <.link navigate="/users/settings" class="text-gray-900 hover:text-gray-700">
+          <.link navigate="/users/settings" class="text-base-content hover:text-base-content/70">
             {gettext("Settings")}
           </.link>
         </li>
         <li>
-          <.link href="/users/log_out" method="delete" class="text-gray-900 hover:text-gray-700">
+          <.link href="/users/log_out" method="delete" class="text-base-content hover:text-base-content/70">
             {gettext("Log out")}
           </.link>
         </li>
       <% else %>
         <li>
-          <.link navigate="/users/register" class="text-gray-900 hover:text-gray-700">
+          <.link navigate="/users/register" class="text-base-content hover:text-base-content/70">
             {gettext("Register")}
           </.link>
         </li>
         <li>
-          <.link navigate="/users/log_in" class="text-gray-900 hover:text-gray-700">
+          <.link navigate="/users/log_in" class="text-base-content hover:text-base-content/70">
             {gettext("Log in")}
           </.link>
         </li>
diff --git a/lib/aprsme_web/components/layouts/app.html.heex b/lib/aprsme_web/components/layouts/app.html.heex
index 77ea184..4357d7b 100644
--- a/lib/aprsme_web/components/layouts/app.html.heex
+++ b/lib/aprsme_web/components/layouts/app.html.heex
@@ -66,7 +66,6 @@
     right: 0 !important;
     bottom: 0 !important;
     height: 100vh !important;
-    width: 100vw !important;
     z-index: 1 !important;
     transition: right 0.3s ease-in-out !important;
   }
@@ -89,53 +88,6 @@
     }
   }
 
-  /* Slideover toggle button styles */
-  body.map-page .slideover-toggle {
-    position: fixed !important;
-    right: 10px;
-    top: 10px;
-    z-index: 1001;
-    background: white;
-    border: 2px solid rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    padding: 10px;
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  body.map-page .slideover-toggle:hover {
-    background: #f8fafc;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-    transform: translateY(-1px);
-  }
-
-  body.map-page .slideover-toggle:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  }
-
-  /* Hide toggle on desktop when slideover is open */
-  @media (min-width: 1024px) {
-    body.map-page .slideover-toggle.slideover-open {
-      display: none;
-    }
-  }
-
-  /* Mobile toggle adjustments */
-  @media (max-width: 1023px) {
-    body.map-page .slideover-toggle {
-      right: 15px;
-      top: 15px;
-      padding: 12px;
-      border-radius: 50%;
-      width: 48px;
-      height: 48px;
-    }
-  }
 
   /* Slideover panel responsive styles */
   body.map-page .slideover-panel {
@@ -144,7 +96,7 @@
     right: 0;
     height: 100vh;
     width: 352px;
-    background: white;
+    background: var(--color-base-100);
     box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
     z-index: 1000;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/lib/aprsme_web/live/map_live/index.ex b/lib/aprsme_web/live/map_live/index.ex
index d0e0802..10ff42b 100644
--- a/lib/aprsme_web/live/map_live/index.ex
+++ b/lib/aprsme_web/live/map_live/index.ex
@@ -1021,16 +1021,6 @@ defmodule AprsmeWeb.MapLive.Index do
 
     <.locate_button />
 
-    <.slideover_panel
-      slideover_open={@slideover_open}
-      loading={@loading}
-      connection_status={@connection_status}
-      packets={@packets}
-      show_all_packets={@show_all_packets}
-      tracked_callsign={@tracked_callsign}
-      tracked_callsign_latest_packet={@tracked_callsign_latest_packet}
-    />
-
     <.toggle_button slideover_open={@slideover_open} />
 
     <.bottom_controls {assigns} />
@@ -1599,13 +1589,14 @@ defmodule AprsmeWeb.MapLive.Index do
             </svg>
             <span class="font-medium">{gettext("Navigation")}</span>
           </div>
-          <.navigation
-            variant={:vertical}
-            class="text-sm"
-            current_user={@current_user}
-            map_state={%{lat: @map_center.lat, lng: @map_center.lng, zoom: @map_zoom}}
-            tracked_callsign={@tracked_callsign}
-          />
+          <ul class="menu menu-sm text-sm">
+            <.navigation
+              variant={:vertical}
+              current_user={@current_user}
+              map_state={%{lat: @map_center.lat, lng: @map_center.lng, zoom: @map_zoom}}
+              tracked_callsign={@tracked_callsign}
+            />
+          </ul>
         </div>
         
     <!-- Last Update -->