diff --git a/ui/app/assets/css/tailwind.css b/ui/app/assets/css/tailwind.css
index ccbd20e6..856a63ed 100644
--- a/ui/app/assets/css/tailwind.css
+++ b/ui/app/assets/css/tailwind.css
@@ -33,6 +33,22 @@
 }
 
 @layer components {
+  .shell-surface {
+    background:
+      radial-gradient(circle at top left, rgb(99 102 241 / 0.1), transparent 28%),
+      radial-gradient(circle at top right, rgb(245 158 11 / 0.08), transparent 22%),
+      linear-gradient(180deg, rgb(255 255 255 / 0.84), rgb(248 250 252 / 0.9));
+    backdrop-filter: blur(16px);
+  }
+
+  .dark .shell-surface {
+    background:
+      radial-gradient(circle at top left, rgb(99 102 241 / 0.12), transparent 26%),
+      radial-gradient(circle at top right, rgb(245 158 11 / 0.07), transparent 20%),
+      linear-gradient(180deg, rgb(9 12 18 / 0.84), rgb(17 24 39 / 0.9));
+    backdrop-filter: blur(16px);
+  }
+
   .play-overlay {
     position: relative;
     display: block;
diff --git a/ui/app/layouts/default.vue b/ui/app/layouts/default.vue
index a65a89df..9968217a 100644
--- a/ui/app/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -39,7 +39,7 @@
         <Simple @show_settings="show_settings = true" />
       </div>
 
-      <div v-else key="regular" class="shell-stage flex flex-col">
+      <div v-else key="regular" class="shell-stage shell-surface flex flex-col">
         <Shutdown v-if="app_shutdown" />
 
         <div id="main_container" class="shell-root flex flex-col" v-else>
@@ -183,13 +183,14 @@
                         color="neutral"
                         variant="ghost"
                         size="sm"
-                        icon="i-lucide-refresh-cw"
-                        @click="$router.go(0)"
-                      >
-                        <span class="hidden xl:inline">Reload</span>
-                      </UButton>
+                        icon="i-lucide-search"
+                        aria-label="Search routes and actions"
+                        title="Search routes and actions"
+                        class="shrink-0 lg:hidden"
+                        @click="showRouteSearch = true"
+                      />
 
-                      <UDashboardSearchButton class="shrink-0" />
+                      <UDashboardSearchButton class="hidden shrink-0 lg:inline-flex" />
 
                       <UButton
                         color="neutral"
@@ -203,6 +204,16 @@
                         <span class="hidden xl:inline">{{ colorModeButtonTitle }}</span>
                       </UButton>
 
+                      <UButton
+                        color="neutral"
+                        variant="ghost"
+                        size="sm"
+                        icon="i-lucide-refresh-cw"
+                        @click="$router.go(0)"
+                      >
+                        <span class="hidden xl:inline">Reload</span>
+                      </UButton>
+
                       <UButton
                         color="neutral"
                         variant="ghost"
@@ -706,7 +717,7 @@ const handleSwipeCancel = (): void => {
 };
 
 const dashboardSidebarUi = {
-  root: 'border-r border-default bg-default/95 backdrop-blur-sm',
+  root: 'shell-surface border-r border-default bg-default/95 backdrop-blur-sm',
   header: 'border-b border-default px-2.5 py-3',
   body: 'gap-3 px-2.5 py-3',
   footer: 'border-t border-default px-2.5 py-3',