diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000..3c9aa7d
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,3 @@
+export default defineAppConfig({
+    
+})
\ No newline at end of file
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
new file mode 100644
index 0000000..4119734
--- /dev/null
+++ b/app/assets/css/main.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 93e0e2b..d65ccfb 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-gradient-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-gray-950 dark:to-gray-900">
     <!-- Hero Section -->
     <UContainer class="py-16 sm:py-24">
       <div class="text-center">
@@ -71,7 +71,7 @@ const resources = [
 
         <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
           <UButton
-            to="/docs"
+            to="/mcp"
             size="xl"
             icon="i-heroicons-book-open"
             class="shadow-lg"
@@ -98,13 +98,13 @@ const resources = [
             Nuxt 4
           </UBadge>
           <UBadge
-            color="success"
+            color="error"
             variant="subtle"
           >
             MCP Protocol
           </UBadge>
           <UBadge
-            color="primary"
+            color="secondary"
             variant="subtle"
           >
             TypeScript
@@ -135,10 +135,9 @@ const resources = [
           v-for="feature in features"
           :key="feature.title"
           :ui="{
-            body: { padding: 'p-6' },
-            ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-            shadow: 'shadow-lg hover:shadow-xl transition-shadow duration-300'
+            body: 'p-6',
           }"
+          variant="subtle"
         >
           <div class="flex flex-col items-start gap-4">
             <div class="p-3 rounded-lg bg-primary/10">
@@ -178,11 +177,10 @@ const resources = [
           :to="resource.to"
           target="_blank"
           color="neutral"
-          variant="outline"
+          variant="subtle"
           size="lg"
           block
           :ui="{
-            padding: { lg: 'px-4 py-6' },
             base: 'hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200'
           }"
         >
@@ -201,10 +199,9 @@ const resources = [
     <UContainer class="py-16">
       <UCard
         :ui="{
-          body: { padding: 'p-8 sm:p-12' },
-          ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
-          background: 'bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20'
+          body: 'p-8 sm:p-12',
         }"
+        variant="outline"
       >
         <div class="grid md:grid-cols-2 gap-8">
           <div>
@@ -214,14 +211,18 @@ const resources = [
             <p class="text-gray-600 dark:text-gray-400 mb-4">
               Configure your MCP client to connect to my server:
             </p>
-            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
-              <pre class="text-sm text-gray-100 overflow-x-auto"><code>{
+            <UCard 
+            variant="solid">
+              <pre class="text-sm text-gray-100 overflow-x-auto">
+                <code>
+{
   "mcpServers": {
     "artmcp": {
       "url": "https://api.arthurdanjou.fr/mcp/mcp"
     }
   }
-}</code></pre>
+}</code>
+              </pre>
             </UCard>
           </div>
 
@@ -232,12 +233,14 @@ const resources = [
             <p class="text-gray-600 dark:text-gray-400 mb-4">
               Use REST API endpoints in your applications:
             </p>
-            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
-              <pre class="text-sm text-gray-100 overflow-x-auto"><code># Get profile information
+            <UCard variant="solid">
+              <pre class="text-sm text-gray-100 overflow-x-auto">
+<code># Get profile information
 curl https://api.arthurdanjou.fr/api/profile
 
 # Get technical skills
-curl https://api.arthurdanjou.fr/api/skills</code></pre>
+curl https://api.arthurdanjou.fr/api/skills</code>
+              </pre>
             </UCard>
           </div>
         </div>
@@ -255,7 +258,7 @@ curl https://api.arthurdanjou.fr/api/skills</code></pre>
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
           <UButton
-            to="/docs"
+            to="/mcp"
             size="xl"
             icon="i-heroicons-arrow-right"
             trailing
diff --git a/app/pages/docs.vue b/app/pages/mcp.vue
similarity index 91%
rename from app/pages/docs.vue
rename to app/pages/mcp.vue
index 06d01c8..377338d 100644
--- a/app/pages/docs.vue
+++ b/app/pages/mcp.vue
@@ -78,7 +78,7 @@ const apiEndpoints = [
 <template>
   <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
     <!-- Hero Header -->
-    <div class="bg-gradient-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
+    <div class="bg-linear-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
       <UContainer class="py-16">
         <div class="text-center text-white">
           <UBadge
@@ -125,7 +125,8 @@ const apiEndpoints = [
       <!-- Overview -->
       <UCard
         class="mb-8"
-        :ui="{ body: { padding: 'p-8' } }"
+        :ui="{ body: 'p-8' }"
+        variant="outline"
       >
         <h2 class="text-3xl font-bold mb-4">
           What is ArtMCP?
@@ -137,7 +138,7 @@ const apiEndpoints = [
           <div class="flex items-start gap-3">
             <UIcon
               name="i-heroicons-check-circle"
-              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
             />
             <div>
               <p class="font-medium">
@@ -148,7 +149,7 @@ const apiEndpoints = [
           <div class="flex items-start gap-3">
             <UIcon
               name="i-heroicons-check-circle"
-              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
             />
             <div>
               <p class="font-medium">
@@ -159,7 +160,7 @@ const apiEndpoints = [
           <div class="flex items-start gap-3">
             <UIcon
               name="i-heroicons-check-circle"
-              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
             />
             <div>
               <p class="font-medium">
@@ -170,7 +171,7 @@ const apiEndpoints = [
           <div class="flex items-start gap-3">
             <UIcon
               name="i-heroicons-check-circle"
-              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
             />
             <div>
               <p class="font-medium">
@@ -181,7 +182,7 @@ const apiEndpoints = [
           <div class="flex items-start gap-3">
             <UIcon
               name="i-heroicons-check-circle"
-              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
             />
             <div>
               <p class="font-medium">
@@ -192,7 +193,7 @@ const apiEndpoints = [
           <div class="flex items-start gap-3">
             <UIcon
               name="i-heroicons-check-circle"
-              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+              class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
             />
             <div>
               <p class="font-medium">
@@ -206,7 +207,8 @@ const apiEndpoints = [
       <!-- Quick Start -->
       <UCard
         class="mb-8"
-        :ui="{ body: { padding: 'p-8' } }"
+        :ui="{ body: 'p-8' }"
+        variant="outline"
       >
         <h2 class="text-3xl font-bold mb-6">
           Quick Start
@@ -220,14 +222,16 @@ const apiEndpoints = [
             <h3 class="text-xl font-semibold mb-4">
               MCP Configuration
             </h3>
-            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
-              <pre class="text-sm text-gray-100 overflow-x-auto"><code>{
+            <UCard variant="solid">
+              <pre class="text-sm text-gray-100 overflow-x-auto">
+<code>{
   "mcpServers": {
     "artmcp": {
-      "url": "https://api.arthurdanjou.fr/mcp/mcp"
+      "url": "https://api.arthurdanjou.fr/mcp"
     }
   }
-}</code></pre>
+}</code>      
+              </pre>
             </UCard>
           </div>
 
@@ -235,8 +239,8 @@ const apiEndpoints = [
             <h3 class="text-xl font-semibold mb-4">
               Direct Connection
             </h3>
-            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
-              <pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp/mcp</code></pre>
+            <UCard variant="solid">
+              <pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp</code></pre>
             </UCard>
             <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
               Use this URL to connect your MCP client directly
@@ -248,7 +252,8 @@ const apiEndpoints = [
       <!-- Tools Section -->
       <UCard
         class="mb-8"
-        :ui="{ body: { padding: 'p-8' } }"
+        :ui="{ body: 'p-8' }"
+        variant="outline"
       >
         <h2 class="text-3xl font-bold mb-4">
           Tools
@@ -306,7 +311,8 @@ const apiEndpoints = [
       <!-- Prompts Section -->
       <UCard
         class="mb-8"
-        :ui="{ body: { padding: 'p-8' } }"
+        :ui="{ body: 'p-8' }"
+        variant="outline"
       >
         <h2 class="text-3xl font-bold mb-4">
           Prompts
@@ -319,12 +325,13 @@ const apiEndpoints = [
           <UCard
             v-for="prompt in prompts"
             :key="prompt.name"
-            :ui="{ body: { padding: 'p-4' }, ring: 'ring-1 ring-gray-200 dark:ring-gray-800' }"
+            :ui="{ body: 'p-4' }"
+            variant="outline"
           >
             <div class="flex items-start gap-3">
               <UIcon
                 name="i-heroicons-chat-bubble-left-right"
-                class="w-5 h-5 text-primary flex-shrink-0 mt-0.5"
+                class="w-5 h-5 text-primary shrink-0 mt-0.5"
               />
               <div>
                 <h3 class="font-semibold mb-1">
@@ -342,7 +349,8 @@ const apiEndpoints = [
       <!-- Resources Section -->
       <UCard
         class="mb-8"
-        :ui="{ body: { padding: 'p-8' } }"
+        :ui="{ body: 'p-8' }"
+        variant="outline"
       >
         <h2 class="text-3xl font-bold mb-4">
           Resources
@@ -355,7 +363,8 @@ const apiEndpoints = [
           <UCard
             v-for="resource in resources"
             :key="resource.uri"
-            :ui="{ body: { padding: 'p-4' }, ring: 'ring-1 ring-gray-200 dark:ring-gray-800' }"
+            :ui="{ body: 'p-4' }"
+            variant="outline"
           >
             <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2">
@@ -379,7 +388,7 @@ const apiEndpoints = [
       </UCard>
 
       <!-- API Endpoints Section -->
-      <UCard :ui="{ body: { padding: 'p-8' } }">
+      <UCard :ui="{ body: 'p-8'}">
         <h2 class="text-3xl font-bold mb-4">
           REST API Endpoints
         </h2>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index adc3c79..5542e2e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,6 +10,8 @@ export default defineNuxtConfig({
     '@nuxt/ui'
   ],
 
+  css: ['~/assets/css/main.css'],
+
   devtools: {
     enabled: true,
   },
@@ -61,7 +63,7 @@ export default defineNuxtConfig({
   mcp: {
     name: 'ArtMCP',
     version: '1.0.0',
-    browserRedirect: '/docs'
+    browserRedirect: '/mcp'
   },
 
   studio: {