diff --git a/app/pages/docs.vue b/app/pages/docs.vue
index fa2f088..70bd596 100644
--- a/app/pages/docs.vue
+++ b/app/pages/docs.vue
@@ -76,7 +76,7 @@ const apiEndpoints = [
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+  <div class="min-h-screen bg-linear-to-b from-gray-50 to-white dark:from-neutral-950 dark:to-neutral-900">
     <!-- Hero Header -->
     <div class="bg-linear-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
       <UContainer class="py-16">
@@ -224,7 +224,7 @@ const apiEndpoints = [
             </h3>
             <UCard
               :ui="{
-                body: 'bg-gray-900 dark:bg-gray-950'
+                body: 'bg-neutral-900 dark:bg-neutral-950'
               }"
             >
               <pre class="text-sm text-gray-100 overflow-x-auto">
@@ -245,7 +245,7 @@ const apiEndpoints = [
             </h3>
             <UCard
               :ui="{
-                body: 'bg-gray-900 dark:bg-gray-950'
+                body: 'bg-neutral-900 dark:bg-neutral-950'
               }"
             >
               <pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp</code></pre>
@@ -384,7 +384,7 @@ const apiEndpoints = [
                   {{ resource.title }}
                 </h3>
               </div>
-              <code class="text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+              <code class="text-xs text-gray-600 dark:text-gray-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded">
                 {{ resource.uri }}
               </code>
               <p class="text-sm text-gray-600 dark:text-gray-400">
@@ -408,7 +408,7 @@ const apiEndpoints = [
           <div
             v-for="endpoint in apiEndpoints"
             :key="endpoint.path"
-            class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            class="flex items-center gap-3 p-3 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
           >
             <UBadge
               color="success"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 0ae3f0c..e7d5122 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -43,7 +43,7 @@ const resources = [
 </script>
 
 <template>
-  <div class="min-h-screen bg-linear-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900">
+  <div class="min-h-screen bg-linear-to-b from-gray-50 to-white dark:from-neutral-950 dark:to-neutral-900">
     <!-- Hero Section -->
     <UContainer class="py-16 sm:py-24">
       <div class="text-center">
@@ -181,7 +181,7 @@ const resources = [
           size="lg"
           block
           :ui="{
-            base: 'hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200'
+            base: 'hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors duration-200'
           }"
         >
           <div class="flex flex-col items-center gap-2">
@@ -213,7 +213,7 @@ const resources = [
             </p>
             <UCard
               :ui="{
-                body: 'bg-gray-900 dark:bg-gray-950'
+                body: 'bg-neutral-900 dark:bg-neutral-950'
               }"
             >
               <pre class="text-sm text-gray-100 overflow-x-auto">
@@ -238,7 +238,7 @@ const resources = [
             </p>
             <UCard
               :ui="{
-                body: 'bg-gray-900 dark:bg-gray-950'
+                body: 'bg-neutral-900 dark:bg-neutral-950'
               }"
             >
               <pre class="text-sm text-gray-100 overflow-x-auto">