diff --git a/client/app/components/ElementInfo.vue b/client/app/components/ElementInfo.vue
index ab4a39c..347a1d8 100644
--- a/client/app/components/ElementInfo.vue
+++ b/client/app/components/ElementInfo.vue
@@ -21,11 +21,13 @@ const onClick = () => {
 <template>
   <div
     border
-    border-gray-200
+    border-neutral-200
+    dark:border-neutral-700
     rounded
     p-2
-    bg-gray-50
-    :class="element ? 'cursor-pointer hover:bg-gray-100 transition-colors' : ''"
+    bg-neutral-50
+    dark:bg-neutral-800
+    :class="element ? 'cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors' : ''"
     @mouseenter="onEnter"
     @mouseleave="onLeave"
     @click="onClick"
@@ -38,12 +40,14 @@ const onClick = () => {
     >
       <div
         text-xs
-        text-gray-500
+        text-neutral-500
+        dark:text-neutral-400
       >
         {{ label }}
         <span
           v-if="element"
           text-blue-600
+          dark:text-blue-400
           ml-1
         >(hover to highlight, click to inspect)</span>
       </div>
diff --git a/client/app/components/Header.vue b/client/app/components/Header.vue
index dcb0d71..3324831 100644
--- a/client/app/components/Header.vue
+++ b/client/app/components/Header.vue
@@ -10,18 +10,21 @@ const pageTitle = computed(() => {
   <header
     flex
     px-4
-    py-2
     border="b base"
-    text-2xl
-    font-bold
-    text-gray-800
+    h-49px
+    items-center
+    font-semibold
+    text-neutral-800
     dark:text-white
-    gap-4
+    gap-1
     n-border-base
   >
-    <NuxtLink to="/">@nuxt/hints</NuxtLink>
+    <NuxtLink
+      to="/"
+      :class="pageTitle ? 'text-neutral-500 dark:text-neutral-400' : 'text-neutral-800 dark:text-white'"
+    >Hints</NuxtLink>
     <template v-if="pageTitle">
-      -
+      <Icon name="carbon:chevron-right" />
       <div>
         {{ pageTitle }}
       </div>
diff --git a/client/app/components/HydrationIssue.vue b/client/app/components/HydrationIssue.vue
index 9a7c178..53f50d2 100644
--- a/client/app/components/HydrationIssue.vue
+++ b/client/app/components/HydrationIssue.vue
@@ -84,7 +84,7 @@ function copy(text: string) {
         <div class="text-sm font-semibold">
           {{ componentName }}
         </div>
-        <div class="text-xs text-gray-500 truncate">
+        <div class="text-xs text-neutral-500 truncate">
           {{ filePath }}
         </div>
         <div class="mt-1 flex flex-wrap gap-2 text-[11px]">
@@ -148,7 +148,7 @@ function copy(text: string) {
 
     <div class="grid mt-3 gap-2 grid-cols-2">
       <div>
-        <div class="text-xs text-gray-500 mb-1">
+        <div class="text-xs text-neutral-500 mb-1">
           Pre Hydration
         </div>
         <div
@@ -157,7 +157,7 @@ function copy(text: string) {
         />
       </div>
       <div>
-        <div class="text-xs text-gray-500 mb-1">
+        <div class="text-xs text-neutral-500 mb-1">
           Post Hydration
         </div>
         <div
diff --git a/client/app/components/WebVitals/CLSMetric.vue b/client/app/components/WebVitals/CLSMetric.vue
index a3f1ed9..d116399 100644
--- a/client/app/components/WebVitals/CLSMetric.vue
+++ b/client/app/components/WebVitals/CLSMetric.vue
@@ -69,13 +69,15 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
       >
         <div
           border
-          border-gray-200
+          border-neutral-200
+          dark:border-neutral-800
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
+            dark:text-neutral-400
           >
             Largest Shift Score
           </div>
@@ -91,13 +93,15 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         <div
           v-if="metric.attribution.largestShiftTime !== undefined"
           border
-          border-gray-200
+          border-neutral-200
+          dark:border-neutral-800
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
+            dark:text-neutral-400
           >
             Shift Time
           </div>
@@ -115,14 +119,14 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
       <div
         v-if="metric.entries.length"
         border
-        border-blue-200
         rounded
         p-2
-        bg-blue-50
+        class="bg-blue-50 dark:bg-blue-800/10 border-blue-200 dark:border-blue-800"
       >
         <div
           text-xs
           text-blue-700
+          dark:text-blue-400
           font-semibold
         >
           Total Layout Shifts: {{ metric.entries.length }}
@@ -135,7 +139,8 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         items-center
         justify-between
         text-xs
-        text-gray-400
+        text-neutral-500
+        dark:text-neutral-400
       >
         <span v-if="metric.attribution.loadState">Load State: {{ metric.attribution.loadState }}</span>
         <span>ID: {{ metric.id }}</span>
diff --git a/client/app/components/WebVitals/INPMetric.vue b/client/app/components/WebVitals/INPMetric.vue
index b4d3690..e5d932a 100644
--- a/client/app/components/WebVitals/INPMetric.vue
+++ b/client/app/components/WebVitals/INPMetric.vue
@@ -77,13 +77,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
       >
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Input Delay
           </div>
@@ -98,13 +98,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
 
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Processing
           </div>
@@ -119,13 +119,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
 
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Presentation
           </div>
@@ -158,7 +158,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         </div>
         <div
           text-xs
-          text-gray-600
+          text-neutral-600
         >
           {{ metric.attribution.longAnimationFrameEntries.length }} frame(s)
         </div>
@@ -168,7 +168,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
           text-xs
         >
           <div
-            text-gray-500
+            text-neutral-500
             mb-1
           >
             Longest Script ({{ metric.attribution.longestScript.subpart }})
@@ -192,7 +192,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
       >
         <div>
           <span
-            text-gray-500
+            text-neutral-500
           >Total Script:</span>
           <span
             font-mono
@@ -201,7 +201,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         </div>
         <div>
           <span
-            text-gray-500
+            text-neutral-500
           >Style & Layout:</span>
           <span
             font-mono
@@ -210,7 +210,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         </div>
         <div v-if="metric.attribution.totalPaintDuration !== undefined">
           <span
-            text-gray-500
+            text-neutral-500
           >Paint:</span>
           <span
             font-mono
@@ -219,7 +219,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         </div>
         <div v-if="metric.attribution.totalUnattributedDuration !== undefined">
           <span
-            text-gray-500
+            text-neutral-500
           >Unattributed:</span>
           <span
             font-mono
@@ -234,7 +234,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
         items-center
         justify-between
         text-xs
-        text-gray-400
+        text-neutral-400
       >
         <span>Load State: {{ metric.attribution.loadState }}</span>
         <span>ID: {{ metric.id }}</span>
diff --git a/client/app/components/WebVitals/LCPMetric.vue b/client/app/components/WebVitals/LCPMetric.vue
index 4d8a966..c544e90 100644
--- a/client/app/components/WebVitals/LCPMetric.vue
+++ b/client/app/components/WebVitals/LCPMetric.vue
@@ -62,7 +62,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
           <div
             v-if="metric.attribution.url"
             text-xs
-            text-gray-600
+            text-neutral-600
             mt-1
             break-all
           >
@@ -79,13 +79,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
       >
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Time to First Byte
           </div>
@@ -100,13 +100,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
 
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Resource Load Delay
           </div>
@@ -121,13 +121,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
 
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Resource Load Duration
           </div>
@@ -142,13 +142,13 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
 
         <div
           border
-          border-gray-200
+          border-neutral-200
           rounded
           p-2
         >
           <div
             text-xs
-            text-gray-500
+            text-neutral-500
           >
             Element Render Delay
           </div>
@@ -165,7 +165,7 @@ const formatTime = (time: number) => `${time.toFixed(0)}ms`
       <!-- ID -->
       <div
         text-xs
-        text-gray-400
+        text-neutral-400
       >
         ID: {{ metric.id }}
       </div>
diff --git a/client/app/pages/hydration.vue b/client/app/pages/hydration.vue
index 4b378cd..bdb6a8f 100644
--- a/client/app/pages/hydration.vue
+++ b/client/app/pages/hydration.vue
@@ -12,9 +12,17 @@ const { hydration } = useHostHydration()
     gap-4
     p-4
   >
-    <HydrationIssue
-      v-for="issue in hydration"
-      :issue="issue"
-    />
+    <template v-if="hydration.length">
+      <HydrationIssue
+        v-for="issue in hydration"
+        :issue="issue"
+      />
+    </template>
+    <div
+      v-else
+      class="text-neutral-500 dark:text-neutral-400"
+    >
+      No hydration issues found
+    </div>
   </div>
 </template>
diff --git a/client/app/pages/index.vue b/client/app/pages/index.vue
index 115161c..a238bf4 100644
--- a/client/app/pages/index.vue
+++ b/client/app/pages/index.vue
@@ -11,7 +11,9 @@ const hydrationCount = computed(() => hydration.length || 0)
       to="/web-vitals"
       class="block"
     >
-      <n-card class="flex items-center justify-between p-4">
+      <n-card
+        class="flex items-center justify-between p-4 hover:border-neutral-400 dark:hover:border-neutral-500"
+      >
         <div class="flex items-center gap-3 min-w-0">
           <Icon
             name="material-symbols:monitoring"
@@ -21,7 +23,7 @@ const hydrationCount = computed(() => hydration.length || 0)
             <div class="text-sm font-medium truncate">
               Web Vitals
             </div>
-            <div class="text-xs text-gray-500">
+            <div class="text-xs text-neutral-500">
               LCP / INP / CLS
             </div>
           </div>
@@ -38,7 +40,7 @@ const hydrationCount = computed(() => hydration.length || 0)
       to="/hydration"
       class="block"
     >
-      <n-card class="flex items-center justify-between p-4">
+      <n-card class="flex items-center justify-between p-4 hover:border-neutral-400 dark:hover:border-neutral-500">
         <div class="flex items-center gap-3 min-w-0">
           <Icon
             name="material-symbols:water-full"
@@ -48,7 +50,7 @@ const hydrationCount = computed(() => hydration.length || 0)
             <div class="text-sm font-medium truncate">
               Hydration
             </div>
-            <div class="text-xs text-gray-500">
+            <div class="text-xs text-neutral-500">
               SSR vs client diffs
             </div>
           </div>
@@ -68,13 +70,18 @@ const hydrationCount = computed(() => hydration.length || 0)
       to="/third-party-scripts"
       class="block"
     >
-      <n-card class="p-4 flex items-center gap-3">
+      <n-card class="p-4 flex items-center gap-3 hover:border-neutral-400 dark:hover:border-neutral-500">
         <Icon
           name="material-symbols:extension"
           class="text-xl text-violet-500"
         />
-        <div class="text-sm font-medium truncate">
-          Third party scripts
+        <div class="min-w-0">
+          <div class="text-sm font-medium truncate">
+            Third party scripts
+          </div>
+          <div class="text-xs text-neutral-500">
+            Analyze third-party scripts speed.
+          </div>
         </div>
       </n-card>
     </NuxtLink>
diff --git a/client/app/pages/third-party-scripts.vue b/client/app/pages/third-party-scripts.vue
index 8af7bc9..2c5b478 100644
--- a/client/app/pages/third-party-scripts.vue
+++ b/client/app/pages/third-party-scripts.vue
@@ -7,7 +7,7 @@
     >
       <n-card p-3>
         <div
-          class="text-xs text-gray-500"
+          class="text-xs text-neutral-500"
         >
           3rd-party scripts
         </div>
@@ -19,7 +19,7 @@
       </n-card>
       <n-card p-3>
         <div
-          class="text-xs text-gray-500"
+          class="text-xs text-neutral-500"
         >
           Loaded
         </div>
@@ -31,7 +31,7 @@
       </n-card>
       <n-card p-3>
         <div
-          class="text-xs text-gray-500"
+          class="text-xs text-neutral-500"
         >
           Slow network (>{{ thresholds.network }}ms)
         </div>
@@ -43,7 +43,7 @@
       </n-card>
       <n-card p-3>
         <div
-          class="text-xs text-gray-500"
+          class="text-xs text-neutral-500"
         >
           Long parse (>{{ thresholds.parse }}ms)
         </div>
@@ -55,7 +55,7 @@
       </n-card>
       <n-card p-3>
         <div
-          class="text-xs text-gray-500"
+          class="text-xs text-neutral-500"
         >
           Render-blocking
         </div>
@@ -89,7 +89,7 @@
             class="min-w-0"
           >
             <div
-              class="text-xs text-gray-500"
+              class="text-xs text-neutral-500"
             >
               {{ s.domain }}
             </div>
@@ -192,7 +192,7 @@
             class="n-border-base border rounded p-2"
           >
             <div
-              class="text-xs text-gray-500"
+              class="text-xs text-neutral-500"
             >
               Total network
             </div>
@@ -206,7 +206,7 @@
             class="n-border-base border rounded p-2"
           >
             <div
-              class="text-xs text-gray-500"
+              class="text-xs text-neutral-500"
             >
               Parse + execute
             </div>
@@ -220,7 +220,7 @@
             class="n-border-base border rounded p-2"
           >
             <div
-              class="text-xs text-gray-500"
+              class="text-xs text-neutral-500"
             >
               Request
             </div>
@@ -234,7 +234,7 @@
             class="n-border-base border rounded p-2"
           >
             <div
-              class="text-xs text-gray-500"
+              class="text-xs text-neutral-500"
             >
               Download
             </div>
diff --git a/client/app/pages/web-vitals.vue b/client/app/pages/web-vitals.vue
index 7374c51..1d13a13 100644
--- a/client/app/pages/web-vitals.vue
+++ b/client/app/pages/web-vitals.vue
@@ -47,68 +47,35 @@ const displayItems = computed<AllItem[]>(() => {
     grid
     gap-4
   >
-    <header class="overflow-x-auto flex gap-4 grid-cols-4">
+    <header class="overflow-x-auto grid gap-4 grid-cols-4">
       <!-- All metrics button -->
-      <n-button
-        p-2
-        hoverable
+      <n-card
+        class="p-2 flex flex-col justify-center gap-1 cursor-pointer"
+        :class="[!selectedHeader ? 'border-neutral-500 dark:border-neutral-400 bg-neutral-50 dark:bg-neutral-800' : 'hover:border-neutral-400 dark:hover:border-neutral-500']"
         @click="selectedHeader = undefined"
       >
-        <div
-          flex
-          flex-col
-          gap-2
-        >
-          <span
-            font-bold
-            text-lg
-          >
-            All
-          </span>
-          <p
-            text-xs
-            text-gray-500
-          >
-            Show all issues
-          </p>
-        </div>
-      </n-button>
-      <n-button
+        <span class="text-lg font-bold">All</span>
+        <span class="text-xs text-neutral-700 dark:text-neutral-300">Show all issues</span>
+      </n-card>
+      <n-card
         v-for="header in headers"
-        p-2
-        hoverable
+        class="p-2 gap-1 flex flex-col justify-center cursor-pointer"
+        :class="[selectedHeader === header.key ? 'border-neutral-500 dark:border-neutral-400 bg-neutral-50 dark:bg-neutral-800' : 'hover:border-neutral-400 dark:hover:border-neutral-500']"
         @click="selectedHeader = selectedHeader === header.key ? undefined : header.key"
       >
-        <div
-          flex
-          flex-col
-          gap-2
+        <span class="text-lg font-bold">{{ header.title }}</span>
+        <span class="text-xs text-neutral-700 dark:text-neutral-300">{{ header.description }}</span>
+        <a
+          :href="header.articleLink"
+          target="_blank"
+          class="flex items-center gap-0.5 truncate max-w-full text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
+          rel="noopener noreferrer"
+          text-sm
         >
-          <span
-            font-bold
-            text-lg
-          >
-            {{ header.title }}
-          </span>
-          <span
-            text-xs
-            text-gray-500
-          >{{ header.description }}</span>
-          <p>
-            <span>Read more at</span>
-            <a
-              :href="header.articleLink"
-              target="_blank"
-              class="flex items-center gap-1 truncate max-w-full"
-              rel="noopener noreferrer"
-              text-sm
-            >
-              {{ header.articleLink }}
-              <icon name="akar-icons:link-out" />
-            </a>
-          </p>
-        </div>
-      </n-button>
+          {{ header.articleLink }}
+          <icon name="lucide:arrow-up-right" />
+        </a>
+      </n-card>
     </header>
 
     <main
@@ -135,9 +102,9 @@ const displayItems = computed<AllItem[]>(() => {
         v-else
         text-center
         py-8
-        text-gray-500
+        text-neutral-500
       >
-        No performance issues detected. All metrics are good! 🎉
+        No performance issues detected. {{ selectedHeader ? selectedHeader?.toUpperCase() : 'All' }} metrics are good! 🎉
       </div>
     </main>
   </div>
diff --git a/package.json b/package.json
index 1b0cd5f..51ed47f 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "prepack": "nuxt-module-build && npm run client:build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxi prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
diff --git a/src/devtools.ts b/src/devtools.ts
index 504a5a1..ce1b132 100644
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -32,9 +32,10 @@ export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
 
   nuxt.hook('devtools:customTabs', (tabs) => {
     tabs.push({
-      name: 'nuxt-hints',
-      title: '@nuxt/hints',
-      icon: 'carbon:apps',
+      name: 'hints',
+      title: 'Hints',
+      icon: 'carbon:idea',
+      category: 'analyze',
       view: {
         type: 'iframe',
         src: DEVTOOLS_UI_ROUTE,