diff --git a/memento-note/app/(admin)/admin/ai-test/page.tsx b/memento-note/app/(admin)/admin/ai-test/page.tsx
index 976e350..973eb38 100644
--- a/memento-note/app/(admin)/admin/ai-test/page.tsx
+++ b/memento-note/app/(admin)/admin/ai-test/page.tsx
@@ -103,9 +103,9 @@ export default function AITestPage() {
 
             {/* 3. Chat Test - Horizontal Layout */}
             <div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
-              <div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-violet-500/[0.05] to-transparent relative overflow-hidden">
+              <div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-zinc-500/[0.05] to-transparent relative overflow-hidden">
                 <div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:-rotate-6">
-                  <MessageSquare className="h-80 w-80 text-violet-500" />
+                  <MessageSquare className="h-80 w-80 text-zinc-500" />
                 </div>
                 <div className="relative space-y-8">
                   <div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
@@ -116,12 +116,12 @@ export default function AITestPage() {
                     <p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.chatTestDescription')}</p>
                   </div>
                   <div className="flex flex-wrap gap-3">
-                    <span className="px-4 py-2 bg-violet-500/10 rounded-xl text-violet-600 text-[10px] font-black uppercase tracking-widest">Conversational</span>
-                    <span className="px-4 py-2 bg-violet-500/10 rounded-xl text-violet-600 text-[10px] font-black uppercase tracking-widest">Streaming</span>
+                    <span className="px-4 py-2 bg-zinc-500/10 rounded-xl text-zinc-600 text-[10px] font-black uppercase tracking-widest">Conversational</span>
+                    <span className="px-4 py-2 bg-zinc-500/10 rounded-xl text-zinc-600 text-[10px] font-black uppercase tracking-widest">Streaming</span>
                   </div>
                 </div>
               </div>
-              <div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-violet-500/[0.01]">
+              <div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-zinc-500/[0.01]">
                 <div className="max-w-4xl">
                   <AI_TESTER type="chat" />
                 </div>
diff --git a/memento-note/app/(admin)/admin/settings/admin-settings-form.tsx b/memento-note/app/(admin)/admin/settings/admin-settings-form.tsx
index 14048e5..ed5d273 100644
--- a/memento-note/app/(admin)/admin/settings/admin-settings-form.tsx
+++ b/memento-note/app/(admin)/admin/settings/admin-settings-form.tsx
@@ -736,7 +736,7 @@ export function AdminSettingsForm({ config }: { config: Record<string, string> }
             {/* Chat Provider */}
             <div className={`space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50 ${activeAiTab === 'chat' ? 'block' : 'hidden'}`}>
               <h3 className="text-base font-semibold flex items-center gap-2">
-                <span className="text-blue-600">💬</span> {t('admin.ai.chatProvider')}
+                <span className="text-zinc-600">💬</span> {t('admin.ai.chatProvider')}
               </h3>
               <p className="text-xs text-muted-foreground">{t('admin.ai.chatDescription')}</p>
 
diff --git a/memento-note/app/(main)/layout.tsx b/memento-note/app/(main)/layout.tsx
index 0c07d84..6922f1c 100644
--- a/memento-note/app/(main)/layout.tsx
+++ b/memento-note/app/(main)/layout.tsx
@@ -36,7 +36,7 @@ export default async function MainLayout({
           <Sidebar user={session?.user} />
         </Suspense>
 
-        <main className="memento-paper-texture flex min-h-0 flex-1 flex-col overflow-y-auto scroll-smooth">
+        <main className="flex min-h-0 flex-1 flex-col overflow-y-auto scroll-smooth bg-background">
           {children}
         </main>
 
diff --git a/memento-note/app/(main)/settings/data/page.tsx b/memento-note/app/(main)/settings/data/page.tsx
index e7d83e4..4386fb5 100644
--- a/memento-note/app/(main)/settings/data/page.tsx
+++ b/memento-note/app/(main)/settings/data/page.tsx
@@ -127,7 +127,7 @@ export default function DataSettingsPage() {
         {/* Export card */}
         <div className="bg-card rounded-xl border border-border p-6 shadow-sm flex flex-col justify-between transition-all hover:shadow-md">
           <div className="space-y-4">
-            <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-600 shrink-0">
+            <div className="w-12 h-12 rounded-full bg-zinc-500/10 flex items-center justify-center text-zinc-600 shrink-0">
               <Download className="h-6 w-6" />
             </div>
             <div>
diff --git a/memento-note/app/globals.css b/memento-note/app/globals.css
index bb00d91..dcd8661 100644
--- a/memento-note/app/globals.css
+++ b/memento-note/app/globals.css
@@ -117,12 +117,10 @@
 /* Architectural Grid — texture & navigation (réf. architectural-grid1) */
 .memento-paper-texture {
   background-color: var(--background);
-  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
-  background-size: auto;
 }
 
 html.dark .memento-paper-texture {
-  background-image: none;
+  background-color: var(--background);
 }
 
 .memento-sidebar-depth {
@@ -353,15 +351,15 @@ html.dark .memento-active-nav {
   --popover-foreground: #212529;
   --primary: #ACB995;
   --primary-foreground: #F9F8F6;
-  --secondary: #75B2D6;
+  --secondary: #E9ECEF;
   --secondary-foreground: #212529;
-  --muted: #75B2D6;
+  --muted: #F1F3F5;
   --muted-foreground: rgba(33, 37, 41, 0.6);
-  --accent: #75B2D6;
+  --accent: #F8F9FA;
   --accent-foreground: #212529;
   --destructive: #E11D48;
-  --border: #75B2D6;
-  --input: #75B2D6;
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.08);
   --ring: rgba(33, 37, 41, 0.3);
   --ai-accent: #ACB995;
   --pinned-gold: #F59E0B;
@@ -373,7 +371,7 @@ html.dark .memento-active-nav {
   --sidebar-primary-foreground: #F9F8F6;
   --sidebar-accent: #F9F8F6;
   --sidebar-accent-foreground: #212529;
-  --sidebar-border: #75B2D6;
+  --sidebar-border: rgba(0, 0, 0, 0.05);
   --sidebar-ring: rgba(33, 37, 41, 0.2);
 }
 
@@ -479,139 +477,177 @@ html.dark {
 }
 
 [data-theme='midnight'] {
-  --background: oklch(0.94 0.005 250);
-  /* Gris-bleu très pâle */
-  --foreground: oklch(0.18 0.03 250);
-  /* Gris-bleu très foncé */
-  --card: oklch(0.97 0.006 250);
-  /* Gris-bleu pâle */
-  --card-foreground: oklch(0.18 0.03 250);
-  --primary: oklch(0.5 0.12 250);
-  /* Gris-bleu saturé */
-  --primary-foreground: oklch(0.99 0 0);
-  /* Blanc */
-  --secondary: oklch(0.2 0.01 250);
-  --secondary-foreground: oklch(0.18 0.03 250);
-  --muted: oklch(0.22 0.01 250);
-  --muted-foreground: oklch(0.55 0.02 250);
-  --accent: oklch(0.25 0.015 250);
-  --accent-foreground: oklch(0.18 0.03 250);
-  --destructive: oklch(0.6 0.22 25);
-  --border: oklch(0.82 0.015 250);
-  --input: oklch(0.82 0.015 250);
-  --ring: oklch(0.65 0.015 250);
-  --popover: oklch(0.97 0.006 250);
-  --popover-foreground: oklch(0.18 0.03 250);
-  --sidebar: oklch(0.9 0.01 250);
-  --sidebar-foreground: oklch(0.18 0.03 250);
-  --sidebar-primary: oklch(0.5 0.12 250);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.25 0.015 250);
-  --sidebar-accent-foreground: oklch(0.18 0.03 250);
-  --sidebar-border: oklch(0.85 0.015 250);
-  --sidebar-ring: oklch(0.65 0.015 250);
+  --background: #F8F9FA;
+  --foreground: #212529;
+  --card: #ffffff;
+  --card-foreground: #212529;
+  --primary: #ACB995;
+  --primary-foreground: #F8F9FA;
+  --secondary: #E9ECEF;
+  --secondary-foreground: #212529;
+  --muted: #F1F3F5;
+  --muted-foreground: rgba(33, 37, 41, 0.6);
+  --accent: #F8F9FA;
+  --accent-foreground: #212529;
+  --destructive: #E11D48;
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.08);
+  --ring: rgba(33, 37, 41, 0.3);
+  --popover: #ffffff;
+  --popover-foreground: #212529;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #212529;
+  --sidebar-primary: #212529;
+  --sidebar-primary-foreground: #F8F9FA;
+  --sidebar-accent: #F8F9FA;
+  --sidebar-accent-foreground: #212529;
+  --sidebar-border: rgba(0, 0, 0, 0.05);
+  --sidebar-ring: rgba(33, 37, 41, 0.2);
 }
 
 [data-theme='midnight'].dark {
-  --background: oklch(0.1 0.01 250);
-  /* Noir profond */
-  --foreground: oklch(0.96 0.005 250);
-  /* Blanc grisâtre */
-  --card: oklch(0.15 0.015 250);
-  /* Gris-bleu très foncé */
-  --card-foreground: oklch(0.96 0.005 250);
-  --primary: oklch(0.6 0.12 250);
-  /* Gris-bleu vibrant */
-  --primary-foreground: oklch(0.1 0 0);
-  /* Noir */
-  --secondary: oklch(0.18 0.015 250);
-  --secondary-foreground: oklch(0.96 0.005 250);
-  --muted: oklch(0.2 0.015 250);
-  --muted-foreground: oklch(0.5 0.02 250);
-  --accent: oklch(0.26 0.02 250);
-  --accent-foreground: oklch(0.96 0.005 250);
-  --destructive: oklch(0.65 0.2 25);
-  --border: oklch(0.33 0.02 250);
-  --input: oklch(0.33 0.02 250);
-  --ring: oklch(0.55 0.02 250);
-  --popover: oklch(0.15 0.015 250);
-  --popover-foreground: oklch(0.96 0.005 250);
-  --sidebar: oklch(0.08 0.01 250);
-  --sidebar-foreground: oklch(0.96 0.005 250);
-  --sidebar-primary: oklch(0.6 0.12 250);
-  --sidebar-primary-foreground: oklch(0.1 0 0);
-  --sidebar-accent: oklch(0.22 0.02 250);
-  --sidebar-accent-foreground: oklch(0.96 0.005 250);
-  --sidebar-border: oklch(0.3 0.02 250);
-  --sidebar-ring: oklch(0.55 0.02 250);
+  --background: #1C1C1C;
+  --foreground: #F8F9FA;
+  --card: #252525;
+  --card-foreground: #F8F9FA;
+  --primary: #ACB995;
+  --primary-foreground: #1C1C1C;
+  --secondary: #2A2A2A;
+  --secondary-foreground: #F8F9FA;
+  --muted: #222222;
+  --muted-foreground: rgba(248, 249, 250, 0.5);
+  --accent: #2A2A2A;
+  --accent-foreground: #F8F9FA;
+  --destructive: #E11D48;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: rgba(255, 255, 255, 0.2);
+  --popover: #252525;
+  --popover-foreground: #F8F9FA;
+  --sidebar: #181818;
+  --sidebar-foreground: #F8F9FA;
+  --sidebar-primary: #F8F9FA;
+  --sidebar-primary-foreground: #1C1C1C;
+  --sidebar-accent: #2A2A2A;
+  --sidebar-accent-foreground: #F8F9FA;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: rgba(255, 255, 255, 0.15);
 }
 
 [data-theme='blue'] {
-  --background: oklch(0.985 0.005 225);
-  /* Blanc légèrement bleuté */
-  --foreground: oklch(0.18 0.035 225);
-  /* Gris-bleu foncé saturé */
-  --card: oklch(1 0 0);
-  /* Blanc pur */
-  --card-foreground: oklch(0.18 0.035 225);
-  --primary: oklch(0.5 0.15 225);
-  /* Bleu vibrant */
-  --primary-foreground: oklch(0.99 0 0);
-  /* Blanc */
-  --secondary: oklch(0.93 0.008 225);
-  --secondary-foreground: oklch(0.18 0.035 225);
-  --muted: oklch(0.9 0.01 225);
-  --muted-foreground: oklch(0.58 0.015 225);
-  --accent: oklch(0.93 0.01 225);
-  --accent-foreground: oklch(0.18 0.035 225);
-  --destructive: oklch(0.6 0.2 25);
-  --border: oklch(0.83 0.012 225);
-  --input: oklch(0.83 0.012 225);
-  --ring: oklch(0.65 0.015 225);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.035 225);
-  --sidebar: oklch(0.965 0.008 225);
-  --sidebar-foreground: oklch(0.18 0.035 225);
-  --sidebar-primary: oklch(0.5 0.15 225);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.93 0.01 225);
-  --sidebar-accent-foreground: oklch(0.18 0.035 225);
-  --sidebar-border: oklch(0.87 0.012 225);
-  --sidebar-ring: oklch(0.65 0.015 225);
+  --background: #F8F9FA;
+  --foreground: #212529;
+  --card: #ffffff;
+  --card-foreground: #212529;
+  --primary: #ACB995;
+  --primary-foreground: #F8F9FA;
+  --secondary: #E9ECEF;
+  --secondary-foreground: #212529;
+  --muted: #F1F3F5;
+  --muted-foreground: rgba(33, 37, 41, 0.6);
+  --accent: #F8F9FA;
+  --accent-foreground: #212529;
+  --destructive: #E11D48;
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.08);
+  --ring: rgba(33, 37, 41, 0.3);
+  --popover: #ffffff;
+  --popover-foreground: #212529;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #212529;
+  --sidebar-primary: #212529;
+  --sidebar-primary-foreground: #F8F9FA;
+  --sidebar-accent: #F8F9FA;
+  --sidebar-accent-foreground: #212529;
+  --sidebar-border: rgba(0, 0, 0, 0.05);
+  --sidebar-ring: rgba(33, 37, 41, 0.2);
 }
 
 [data-theme='blue'].dark {
-  --background: oklch(0.13 0.008 225);
-  /* Noir légèrement bleuté */
-  --foreground: oklch(0.97 0.006 225);
-  /* Blanc légèrement bleuté */
-  --card: oklch(0.17 0.01 225);
-  /* Gris-bleu foncé */
-  --card-foreground: oklch(0.97 0.006 225);
-  --primary: oklch(0.6 0.15 225);
-  /* Bleu vibrant plus clair */
-  --primary-foreground: oklch(0.1 0 0);
-  /* Noir */
-  --secondary: oklch(0.22 0.015 225);
-  --secondary-foreground: oklch(0.97 0.006 225);
-  --muted: oklch(0.25 0.02 225);
-  --muted-foreground: oklch(0.52 0.018 225);
-  --accent: oklch(0.28 0.025 225);
-  --accent-foreground: oklch(0.97 0.006 225);
-  --destructive: oklch(0.65 0.22 25);
-  --border: oklch(0.35 0.018 225);
-  --input: oklch(0.35 0.018 225);
-  --ring: oklch(0.55 0.02 225);
-  --popover: oklch(0.17 0.01 225);
-  --popover-foreground: oklch(0.97 0.006 225);
-  --sidebar: oklch(0.1 0.01 225);
-  --sidebar-foreground: oklch(0.97 0.006 225);
-  --sidebar-primary: oklch(0.6 0.15 225);
-  --sidebar-primary-foreground: oklch(0.1 0 0);
-  --sidebar-accent: oklch(0.25 0.025 225);
-  --sidebar-accent-foreground: oklch(0.97 0.006 225);
-  --sidebar-border: oklch(0.32 0.018 225);
-  --sidebar-ring: oklch(0.55 0.02 225);
+  --background: #1C1C1C;
+  --foreground: #F8F9FA;
+  --card: #252525;
+  --card-foreground: #F8F9FA;
+  --primary: #ACB995;
+  --primary-foreground: #1C1C1C;
+  --secondary: #2A2A2A;
+  --secondary-foreground: #F8F9FA;
+  --muted: #222222;
+  --muted-foreground: rgba(248, 249, 250, 0.5);
+  --accent: #2A2A2A;
+  --accent-foreground: #F8F9FA;
+  --destructive: #E11D48;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: rgba(255, 255, 255, 0.2);
+  --popover: #252525;
+  --popover-foreground: #F8F9FA;
+  --sidebar: #181818;
+  --sidebar-foreground: #F8F9FA;
+  --sidebar-primary: #F8F9FA;
+  --sidebar-primary-foreground: #1C1C1C;
+  --sidebar-accent: #2A2A2A;
+  --sidebar-accent-foreground: #F8F9FA;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: rgba(255, 255, 255, 0.15);
+}
+
+[data-theme='ocean'] {
+  --background: #F8F9FA;
+  --foreground: #212529;
+  --card: #ffffff;
+  --card-foreground: #212529;
+  --primary: #ACB995;
+  --primary-foreground: #F8F9FA;
+  --secondary: #E9ECEF;
+  --secondary-foreground: #212529;
+  --muted: #F1F3F5;
+  --muted-foreground: rgba(33, 37, 41, 0.6);
+  --accent: #F8F9FA;
+  --accent-foreground: #212529;
+  --destructive: #E11D48;
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.08);
+  --ring: rgba(33, 37, 41, 0.3);
+  --popover: #ffffff;
+  --popover-foreground: #212529;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #212529;
+  --sidebar-primary: #212529;
+  --sidebar-primary-foreground: #F8F9FA;
+  --sidebar-accent: #F8F9FA;
+  --sidebar-accent-foreground: #212529;
+  --sidebar-border: rgba(0, 0, 0, 0.05);
+  --sidebar-ring: rgba(33, 37, 41, 0.2);
+}
+
+[data-theme='ocean'].dark {
+  --background: #1C1C1C;
+  --foreground: #F8F9FA;
+  --card: #252525;
+  --card-foreground: #F8F9FA;
+  --primary: #ACB995;
+  --primary-foreground: #1C1C1C;
+  --secondary: #2A2A2A;
+  --secondary-foreground: #F8F9FA;
+  --muted: #222222;
+  --muted-foreground: rgba(248, 249, 250, 0.5);
+  --accent: #2A2A2A;
+  --accent-foreground: #F8F9FA;
+  --destructive: #E11D48;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: rgba(255, 255, 255, 0.2);
+  --popover: #252525;
+  --popover-foreground: #F8F9FA;
+  --sidebar: #181818;
+  --sidebar-foreground: #F8F9FA;
+  --sidebar-primary: #F8F9FA;
+  --sidebar-primary-foreground: #1C1C1C;
+  --sidebar-accent: #2A2A2A;
+  --sidebar-accent-foreground: #F8F9FA;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: rgba(255, 255, 255, 0.15);
 }
 
 [data-theme='sepia'] {
@@ -922,64 +958,7 @@ html.dark {
   --sidebar-ring: oklch(0.6 0.02 55);
 }
 
-/* Ocean — soft teal/cyan tones */
-[data-theme='ocean'] {
-  --background: oklch(0.97 0.01 195);
-  --foreground: oklch(0.22 0.02 195);
-  --card: oklch(0.99 0.005 195);
-  --card-foreground: oklch(0.22 0.02 195);
-  --popover: oklch(0.99 0.005 195);
-  --popover-foreground: oklch(0.22 0.02 195);
-  --primary: oklch(0.5 0.12 195);
-  --primary-foreground: oklch(0.99 0 0);
-  --secondary: oklch(0.93 0.015 195);
-  --secondary-foreground: oklch(0.22 0.02 195);
-  --muted: oklch(0.92 0.012 195);
-  --muted-foreground: oklch(0.55 0.02 195);
-  --accent: oklch(0.92 0.015 195);
-  --accent-foreground: oklch(0.22 0.02 195);
-  --destructive: oklch(0.6 0.18 25);
-  --border: oklch(0.85 0.015 195);
-  --input: oklch(0.85 0.015 195);
-  --ring: oklch(0.5 0.12 195);
-  --sidebar: oklch(0.95 0.012 195);
-  --sidebar-foreground: oklch(0.22 0.02 195);
-  --sidebar-primary: oklch(0.5 0.12 195);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.92 0.015 195);
-  --sidebar-accent-foreground: oklch(0.22 0.02 195);
-  --sidebar-border: oklch(0.88 0.015 195);
-  --sidebar-ring: oklch(0.6 0.015 195);
-}
 
-[data-theme='ocean'].dark {
-  --background: oklch(0.14 0.01 195);
-  --foreground: oklch(0.95 0.01 195);
-  --card: oklch(0.18 0.015 195);
-  --card-foreground: oklch(0.95 0.01 195);
-  --popover: oklch(0.18 0.015 195);
-  --popover-foreground: oklch(0.95 0.01 195);
-  --primary: oklch(0.6 0.1 195);
-  --primary-foreground: oklch(0.1 0 0);
-  --secondary: oklch(0.24 0.02 195);
-  --secondary-foreground: oklch(0.95 0.01 195);
-  --muted: oklch(0.22 0.015 195);
-  --muted-foreground: oklch(0.55 0.02 195);
-  --accent: oklch(0.26 0.02 195);
-  --accent-foreground: oklch(0.95 0.01 195);
-  --destructive: oklch(0.65 0.18 25);
-  --border: oklch(0.33 0.02 195);
-  --input: oklch(0.33 0.02 195);
-  --ring: oklch(0.6 0.02 195);
-  --sidebar: oklch(0.12 0.01 195);
-  --sidebar-foreground: oklch(0.95 0.01 195);
-  --sidebar-primary: oklch(0.6 0.1 195);
-  --sidebar-primary-foreground: oklch(0.1 0 0);
-  --sidebar-accent: oklch(0.26 0.02 195);
-  --sidebar-accent-foreground: oklch(0.95 0.01 195);
-  --sidebar-border: oklch(0.33 0.02 195);
-  --sidebar-ring: oklch(0.6 0.02 195);
-}
 
 /* Sunset — warm coral/peach tones */
 [data-theme='sunset'] {
diff --git a/memento-note/components/ai-chat.tsx b/memento-note/components/ai-chat.tsx
index df5eb7c..d2c9acd 100644
--- a/memento-note/components/ai-chat.tsx
+++ b/memento-note/components/ai-chat.tsx
@@ -158,7 +158,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
 
   return (
     <aside className={cn(
-      "fixed bottom-20 right-6 border border-border/40 bg-card flex flex-col z-40 shadow-2xl rounded-2xl overflow-hidden transition-all duration-300",
+      "fixed bottom-20 right-6 border border-border/40 bg-[#FDFDFE] flex flex-col z-40 shadow-2xl rounded-2xl overflow-hidden transition-all duration-300",
       isExpanded ? "w-[80vw] h-[85vh] max-w-[1200px]" : "h-[700px] max-h-[85vh] w-[360px]"
     )}>
       {/* Header */}
@@ -255,7 +255,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
                   <div className={cn(
                     'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 border text-[10px] font-bold',
                     msg.role === 'user'
-                      ? 'bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300'
+                      ? 'bg-zinc-100 border-zinc-200 text-zinc-600'
                       : 'bg-[#75B2D6]/10 text-[#75B2D6] border-[#75B2D6]/20',
                   )}>
                     {msg.role === 'user' ? 'U' : <Bot className="h-4 w-4" />}
@@ -350,7 +350,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
         <div className="mb-3">
           <span className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground block mb-1.5 ml-1">{t('ai.discussionContextLabel')}</span>
           <Select value={chatScope} onValueChange={setChatScope}>
-            <SelectTrigger className="h-8 text-xs bg-card border-border/60">
+            <SelectTrigger className="h-8 text-xs bg-[#FDFDFE] border-border/60">
               <SelectValue placeholder={t('ai.selectNotebook')} />
             </SelectTrigger>
             <SelectContent>
@@ -388,7 +388,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
                     "py-1 rounded-md border text-[10px] font-medium transition-all flex flex-col items-center justify-center gap-0.5",
                     isSelected 
                       ? "border-[#75B2D6] bg-[#75B2D6]/10 text-[#75B2D6] shadow-sm" 
-                      : "border-border/60 bg-card text-muted-foreground hover:bg-muted hover:border-border"
+                      : "border-border/60 bg-[#FDFDFE] text-muted-foreground hover:bg-muted hover:border-border"
                   )}
                 >
                   <Icon className="h-3 w-3" />
@@ -400,7 +400,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
         </div>
 
         {/* Text Input */}
-        <div className="relative bg-card border border-border/60 rounded-xl p-1 focus-within:border-[#75B2D6] focus-within:ring-1 focus-within:ring-[#75B2D6]/20 transition-all shadow-sm">
+        <div className="relative bg-[#FDFDFE] border border-border/60 rounded-xl p-1 focus-within:border-[#75B2D6] focus-within:ring-1 focus-within:ring-[#75B2D6]/20 transition-all shadow-sm">
           <textarea 
             className="w-full bg-transparent border-none focus:ring-0 resize-none text-sm text-foreground placeholder:text-muted-foreground/70 p-2 min-h-[60px] max-h-[120px]" 
             placeholder={t('ai.chatPlaceholder')} 
diff --git a/memento-note/components/contextual-ai-chat.tsx b/memento-note/components/contextual-ai-chat.tsx
index 70a3d81..932e839 100644
--- a/memento-note/components/contextual-ai-chat.tsx
+++ b/memento-note/components/contextual-ai-chat.tsx
@@ -482,7 +482,7 @@ export function ContextualAIChat({
         />
       )}
       <aside className={cn(
-        'border-l border-border bg-[#F9F8F6] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
+        'border-l border-border bg-[#FDFDFE] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
         expanded
           ? 'fixed right-0 top-0 h-screen w-[640px] z-[200]'
           : 'h-full w-[360px]',
@@ -492,7 +492,7 @@ export function ContextualAIChat({
         <div className="p-6 border-b border-border shrink-0">
           <div className="flex items-start justify-between">
             <div className="min-w-0 space-y-2">
-              <h2 className="font-serif text-xl font-medium text-[#D4A373] flex items-center gap-2 leading-tight">
+              <h2 className="font-serif text-xl font-medium text-[#1C1C1C] flex items-center gap-2 leading-tight">
                 <Sparkles className="h-[18px] w-[18px] shrink-0 text-[#D4A373]" />
                 IA Assistant
               </h2>
@@ -534,7 +534,7 @@ export function ContextualAIChat({
             >
               {tab.label}
               {activeTab === tab.id && (
-                <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#D4A373]" />
+                <motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#75B2D6]" />
               )}
             </button>
           ))}
@@ -542,9 +542,9 @@ export function ContextualAIChat({
 
         <div className="flex-1 flex flex-col min-h-0 relative">
           {actionPreview && (
-            <div className="absolute inset-0 z-20 flex flex-col bg-[#F2F0E9]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
+            <div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
               <div className="px-6 py-4 border-b border-border flex items-center justify-between shrink-0">
-                <p className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373]">{actionPreview.label}</p>
+                <p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">{actionPreview.label}</p>
                 <button onClick={handleDiscardPreview} className="text-[#1C1C1C]/40 hover:text-[#1C1C1C]"><X size={18} /></button>
               </div>
               <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
@@ -554,13 +554,13 @@ export function ContextualAIChat({
               </div>
               <div className="p-6 border-t border-border flex gap-3 shrink-0">
                 <button onClick={handleDiscardPreview} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#1C1C1C]/40 hover:text-[#1C1C1C] transition-all">ANNULER</button>
-                <button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#F2F0E9] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
+                <button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#FDFDFE] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
               </div>
             </div>
           )}
 
           {resourcePreview && (
-            <div className="absolute inset-0 z-20 flex flex-col bg-[#F2F0E9]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
+            <div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
               <div className="px-6 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
                 <p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">
                   {resourcePreview.source === 'chat' ? 'Injecter depuis Discussion' : 'Aperçu IA'}
@@ -594,7 +594,7 @@ export function ContextualAIChat({
                   {messages.length === 0 && (
                     <div className="h-full flex flex-col items-center justify-center text-center space-y-6 py-12">
                       <div className="w-20 h-20 rounded-full bg-white/40 backdrop-blur-sm border border-dashed border-border flex items-center justify-center shadow-sm">
-                        <MessageSquare size={32} className="text-[#D4A373]/30" />
+                        <MessageSquare size={32} className="text-[#75B2D6]/60" />
                       </div>
                       <p className="text-xs font-serif italic text-[#1C1C1C]/40 leading-relaxed max-w-[200px]">Posez une question à l'Assistant pour commencer.</p>
                     </div>
@@ -606,12 +606,12 @@ export function ContextualAIChat({
                     return (
                       <div key={msg.id} className={cn('flex flex-col gap-3', !isAssistant && 'items-end')} onMouseEnter={() => isAssistant && setHoveredMsgId(msg.id)} onMouseLeave={() => setHoveredMsgId(null)}>
                         <div className="relative group max-w-[95%]">
-                          <div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#F2F0E9]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
+                          <div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#FDFDFE]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
                             {isAssistant ? <MarkdownContent content={content} /> : <p className="font-medium">{content}</p>}
                           </div>
                           {isAssistant && onApplyToNote && (hoveredMsgId === msg.id || messages.at(-1)?.id === msg.id) && (
                             <div className="flex gap-2 mt-3 opacity-0 group-hover:opacity-100 transition-all">
-                              <button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#F2F0E9] hover:opacity-90">REPLACER</button>
+                              <button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#FDFDFE] hover:opacity-90">REPLACER</button>
                               <button onClick={() => handleInjectFromChat(content, 'complete')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">COMPLÉTER</button>
                               <button onClick={() => handleInjectFromChat(content, 'merge')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">FUSIONNER</button>
                             </div>
@@ -623,7 +623,7 @@ export function ContextualAIChat({
                   {isLoading && (
                     <div className="flex flex-col gap-3">
                       <div className="bg-white/60 backdrop-blur-sm border border-border p-5 rounded-2xl shadow-sm w-fit">
-                        <div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse delay-150" /></div>
+                        <div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse delay-150" /></div>
                       </div>
                     </div>
                   )}
@@ -642,7 +642,7 @@ export function ContextualAIChat({
                             <SelectValue />
                           </div>
                         </SelectTrigger>
-                        <SelectContent className="rounded-xl border-border shadow-xl bg-[#F2F0E9]">
+                        <SelectContent className="rounded-xl border-border shadow-xl bg-[#FDFDFE]">
                           <SelectItem value="note" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Cette note</SelectItem>
                           <SelectItem value="all" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Tout Momento</SelectItem>
                           {notebooks.map(nb => (
@@ -664,11 +664,11 @@ export function ContextualAIChat({
                               className={cn(
                                 'h-[52px] rounded-xl border transition-all flex flex-col items-center justify-center gap-1.5 shadow-sm',
                                 isActive 
-                                  ? 'bg-[#ACB995]/10 border-[#ACB995] text-[#ACB995]' 
+                                  ? 'bg-[#75B2D6]/10 border-[#75B2D6] text-[#75B2D6]' 
                                   : 'bg-white/60 border-border text-[#1C1C1C]/40 hover:border-[#1C1C1C]/20'
                               )}
                             >
-                              <Icon size={14} className={isActive ? 'text-[#ACB995]' : 'text-[#1C1C1C]/40'} />
+                              <Icon size={14} className={isActive ? 'text-[#75B2D6]' : 'text-[#1C1C1C]/40'} />
                               <span className="text-[9px] font-bold uppercase tracking-tight">{tone.label}</span>
                             </button>
                           )
@@ -680,7 +680,7 @@ export function ContextualAIChat({
                   <div className="relative">
                     <textarea
                       rows={4}
-                      className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-[#ACB995] transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
+                      className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-[#75B2D6] transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
                       placeholder="Posez votre question sur cette note..."
                       value={input}
                       onChange={e => setInput(e.target.value)}
@@ -690,12 +690,12 @@ export function ContextualAIChat({
                     <div className="absolute right-4 bottom-4 flex gap-2">
                       <button 
                         onClick={() => setWebSearch(!webSearch)}
-                        className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-[#ACB995] bg-[#ACB995]/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
+                        className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-[#75B2D6] bg-[#75B2D6]/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
                         title="Web Search"
                       >
                         <Globe size={18} />
                       </button>
-                      <button onClick={handleSend} disabled={!input.trim() || isLoading} className="p-2.5 bg-[#ACB995] text-white rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg shadow-[#ACB995]/20 disabled:opacity-30">
+                      <button onClick={handleSend} disabled={!input.trim() || isLoading} className="p-2.5 bg-[#75B2D6] text-white rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg shadow-[#75B2D6]/20 disabled:opacity-30">
                         <Send size={18} />
                       </button>
                     </div>
@@ -725,7 +725,7 @@ export function ContextualAIChat({
                       initial={{ opacity: 0, y: -10 }}
                       animate={{ opacity: 1, y: 0 }}
                       onClick={onUndoLastAction}
-                      className="w-full py-3.5 bg-[#D4A373]/20 border border-[#D4A373]/50 rounded-xl flex items-center justify-center gap-2 text-[11px] font-bold text-[#D4A373] uppercase tracking-[0.2em] hover:bg-[#D4A373]/30 transition-all shadow-md"
+                      className="w-full py-3.5 bg-[#75B2D6]/20 border border-[#75B2D6]/50 rounded-xl flex items-center justify-center gap-2 text-[11px] font-bold text-[#75B2D6] uppercase tracking-[0.2em] hover:bg-[#75B2D6]/30 transition-all shadow-md"
                     >
                       <RotateCcw size={12} /> {t('ai.undoLastAction')}
                     </motion.button>
@@ -736,11 +736,11 @@ export function ContextualAIChat({
                       const isActive = action.id === 'translate' && showLangPicker
                       const Icon = action.icon
                       return (
-                        <button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-[#ACB995] bg-[#ACB995]/5" : "border-border hover:border-[#1C1C1C]/20")}>
-                          <div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#F2F0E9] shadow-sm", loading && "animate-pulse", isActive && "bg-[#ACB995] text-white")}>
+                        <button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-[#75B2D6] bg-[#75B2D6]/5" : "border-border hover:border-[#1C1C1C]/20")}>
+                          <div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#FDFDFE] shadow-sm", loading && "animate-pulse", isActive && "bg-[#75B2D6] text-white")}>
                             {loading ? <Loader2 size={14} className="animate-spin" /> : <Icon size={14} />}
                           </div>
-                          <span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-[#ACB995]" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
+                          <span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-[#75B2D6]" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
                         </button>
                       )
                     })}
@@ -763,7 +763,7 @@ export function ContextualAIChat({
                                   className={cn(
                                     "py-2 px-1 rounded-lg border text-[10px] font-bold uppercase tracking-tighter transition-all",
                                     translateTarget === lang 
-                                      ? "bg-[#ACB995] border-[#ACB995] text-white shadow-md shadow-[#ACB995]/20" 
+                                      ? "bg-[#75B2D6] border-[#75B2D6] text-white shadow-md shadow-[#75B2D6]/20" 
                                       : "bg-white/60 border-border text-[#1C1C1C]/60 hover:border-[#1C1C1C]/20"
                                   )}
                                 >
@@ -862,13 +862,13 @@ export function ContextualAIChat({
                       </button>
 
                       {generateResult?.type === 'slides' && generateResult.canvasId && (
-                        <motion.div
-                          initial={{ opacity: 0, y: 10 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          className="mt-4 p-4 bg-[#75B2D6]/10 border border-[#75B2D6]/20 rounded-xl space-y-3"
-                        >
-                          <div className="flex items-center justify-between">
-                            <span className="text-[9px] font-bold text-[#75B2D6] uppercase tracking-widest flex items-center gap-1.5">
+                          <motion.div
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="mt-4 p-4 bg-[#75B2D6]/10 border border-[#75B2D6]/20 rounded-xl space-y-3"
+                          >
+                            <div className="flex items-center justify-between">
+                              <span className="text-[9px] font-bold text-[#75B2D6] uppercase tracking-widest flex items-center gap-1.5">
                               <Check size={12} /> Présentation prête
                             </span>
                             <a
@@ -905,7 +905,7 @@ export function ContextualAIChat({
                                 mToast.error('Échec du téléchargement')
                               }
                             }}
-                            className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#ACB995] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
+                            className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#75B2D6] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
                           >
                             <Download size={13} />
                             Télécharger .pptx
diff --git a/memento-note/components/home-client.tsx b/memento-note/components/home-client.tsx
index 50e84ec..72b78be 100644
--- a/memento-note/components/home-client.tsx
+++ b/memento-note/components/home-client.tsx
@@ -477,7 +477,7 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
                     className="flex items-center gap-2 text-[13px] text-foreground font-medium hover:opacity-70 transition-opacity"
                   >
                     <Sparkles size={16} />
-                    <span>Réorganiser les notes</span>
+                    <span>{t('notes.reorganize') || 'Réorganiser les notes'}</span>
                   </button>
                 )}
               </div>
diff --git a/memento-note/components/label-badge.tsx b/memento-note/components/label-badge.tsx
index 5a5a1c6..e0869ac 100644
--- a/memento-note/components/label-badge.tsx
+++ b/memento-note/components/label-badge.tsx
@@ -46,8 +46,8 @@ export function LabelBadge({
       )}
       onClick={onClick}
     >
-      {isAI && <Sparkles className="h-3 w-3 text-sky-500 dark:text-sky-400" />}
-      {label}
+      {isAI && <Sparkles className="h-3 w-3 text-[#75B2D6]" />}
+      <span className="truncate">{label}</span>
       {onRemove && (
         <button
           onClick={(e) => {
@@ -60,9 +60,9 @@ export function LabelBadge({
         </button>
       )}
       {isAI && (
-        <span className="relative flex h-1.5 w-1.5 ml-0.5">
-          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
-          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-sky-500"></span>
+        <span className="relative flex h-1.5 w-1.5 ml-1">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]"></span>
         </span>
       )}
     </Badge>
diff --git a/memento-note/components/mcp/mcp-settings-panel.tsx b/memento-note/components/mcp/mcp-settings-panel.tsx
index 064ee1b..e1a22c7 100644
--- a/memento-note/components/mcp/mcp-settings-panel.tsx
+++ b/memento-note/components/mcp/mcp-settings-panel.tsx
@@ -120,7 +120,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
       {/* Section 1: What is MCP */}
       <div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden break-inside-avoid">
         <div className="flex items-center gap-3 p-6 border-b border-border">
-          <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
+          <div className="w-10 h-10 rounded-full bg-zinc-500/10 flex items-center justify-center text-zinc-500 shrink-0">
             <Info className="h-5 w-5" />
           </div>
           <div>
@@ -135,7 +135,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
             href="https://modelcontextprotocol.io"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline mt-4"
+            className="inline-flex items-center gap-1 text-sm text-zinc-600 hover:underline mt-4"
           >
             {t('mcpSettings.whatIsMcp.learnMore')}
             <ExternalLink className="h-3 w-3" />
@@ -156,7 +156,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
         <div className="p-6">
           <div className="space-y-4 text-sm">
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">{t('mcpSettings.serverStatus.mode')}</span>
+              <span className="text-zinc-600">{t('mcpSettings.serverStatus.mode')}</span>
               <Badge variant="secondary">{serverStatus.mode.toUpperCase()}</Badge>
             </div>
             {serverStatus.mode === 'sse' && serverStatus.url && (
diff --git a/memento-note/components/notification-panel.tsx b/memento-note/components/notification-panel.tsx
index 8b6c4b1..44189d8 100644
--- a/memento-note/components/notification-panel.tsx
+++ b/memento-note/components/notification-panel.tsx
@@ -48,11 +48,11 @@ interface ReminderNote {
 
 // ── Memento brand tokens ──────────────────────────────────────────────────────
 const C = {
-  blue:   '#E9ECEF',
+  blue:   '#FDFDFE',
   gold:   '#D4A373',
   green:  '#A3B18A',
   dark:   '#1C1C1C',
-  beige:  '#F2F0E9',
+  beige:  '#FDFDFE',
 }
 
 export function NotificationPanel() {
@@ -148,19 +148,19 @@ export function NotificationPanel() {
 
   // ── icon bg/color per notification type ──────────────────────────────────
   const notifIconStyle = (type: string) => {
-    if (type === 'agent_success')       return { bg: `${C.green}20`, color: C.green }
-    if (type === 'agent_slides_ready')  return { bg: `${C.blue}20`,  color: C.blue  }
-    if (type === 'agent_canvas_ready')  return { bg: `${C.blue}20`,  color: C.blue  }
+    if (type === 'agent_success')       return { bg: `${C.gold}20`,  color: C.gold  }
+    if (type === 'agent_slides_ready')  return { bg: `${C.gold}20`,  color: C.gold  }
+    if (type === 'agent_canvas_ready')  return { bg: `${C.gold}20`,  color: C.gold  }
     if (type === 'agent_failure')       return { bg: '#EF444420',     color: '#EF4444' }
-    return                                     { bg: `${C.gold}20`,  color: C.gold  }
+    return                                     { bg: `${C.green}20`,  color: C.green  }
   }
 
   const notifLabelColor = (type: string) => {
-    if (type === 'agent_success')       return C.green
-    if (type === 'agent_slides_ready')  return C.blue
-    if (type === 'agent_canvas_ready')  return C.blue
-    if (type === 'agent_failure')       return '#EF4444'
-    return C.gold
+    if (type.startsWith('agent')) {
+      if (type === 'agent_failure') return '#EF4444'
+      return C.gold
+    }
+    return C.green
   }
 
   return (
@@ -173,7 +173,7 @@ export function NotificationPanel() {
           {pendingCount > 0 && (
             <span
               className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center rounded-full text-white text-[9px] font-bold border border-white shadow-sm"
-              style={{ background: C.gold }}
+              style={{ background: C.green }}
             >
               {pendingCount > 9 ? '9+' : pendingCount}
             </span>
@@ -181,9 +181,9 @@ export function NotificationPanel() {
         </button>
       </PopoverTrigger>
 
-      <PopoverContent align="end" className="w-80 p-0 rounded-2xl overflow-hidden shadow-xl border border-black/10">
+      <PopoverContent align="end" className="w-80 p-0 rounded-2xl overflow-hidden shadow-2xl border border-black/20">
         {/* Header */}
-        <div className="px-4 py-3 border-b flex items-center justify-between" style={{ background: `${C.beige}` }}>
+        <div className="px-4 py-3 border-b flex items-center justify-between" style={{ background: '#FDFDFE' }}>
           <div className="flex items-center gap-2">
             <Bell className="h-4 w-4" style={{ color: C.dark }} />
             <span className="font-bold text-sm tracking-tight" style={{ color: C.dark }}>
@@ -203,7 +203,7 @@ export function NotificationPanel() {
             {pendingCount > 0 && (
               <span
                 className="h-5 px-1.5 flex items-center justify-center rounded-full text-white text-[9px] font-bold"
-                style={{ background: C.gold }}
+                style={{ background: C.green }}
               >
                 {pendingCount}
               </span>
@@ -323,15 +323,15 @@ export function NotificationPanel() {
                   <button
                     onClick={() => handleToggleReminder(note.id, true)}
                     className="mt-0.5 flex-none transition-colors hover:opacity-70"
-                    style={{ color: C.gold }}
+                    style={{ color: C.green }}
                     title={t('reminders.markDone')}
                   >
                     <Circle className="w-4 h-4" />
                   </button>
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1.5 mb-0.5">
-                      <AlertCircle className="w-3 h-3" style={{ color: C.gold }} />
-                      <span className="text-[9px] font-bold uppercase tracking-[0.2em]" style={{ color: C.gold }}>
+                      <AlertCircle className="w-3 h-3" style={{ color: C.green }} />
+                      <span className="text-[9px] font-bold uppercase tracking-[0.2em]" style={{ color: C.green }}>
                         {t('reminders.overdue')}
                       </span>
                     </div>
diff --git a/memento-note/components/ui/toast.tsx b/memento-note/components/ui/toast.tsx
index 6577704..8843476 100644
--- a/memento-note/components/ui/toast.tsx
+++ b/memento-note/components/ui/toast.tsx
@@ -29,7 +29,7 @@ export function Toaster() {
           success: 'border-l-4 border-l-emerald-400',
           error: 'border-l-4 border-l-red-400',
           warning: 'border-l-4 border-l-amber-400',
-          info: 'border-l-4 border-l-sky-400',
+          info: 'border-l-4 border-l-zinc-400',
         },
       }}
     />
diff --git a/memento-note/data/uploads/notes/36019132-5f46-4245-8ed0-a212d434cf7d.png b/memento-note/data/uploads/notes/36019132-5f46-4245-8ed0-a212d434cf7d.png
new file mode 100644
index 0000000..325fe6b
Binary files /dev/null and b/memento-note/data/uploads/notes/36019132-5f46-4245-8ed0-a212d434cf7d.png differ
diff --git a/memento-note/lib/i18n/LanguageProvider.tsx b/memento-note/lib/i18n/LanguageProvider.tsx
index c0e494d..b9b0cc4 100644
--- a/memento-note/lib/i18n/LanguageProvider.tsx
+++ b/memento-note/lib/i18n/LanguageProvider.tsx
@@ -24,37 +24,32 @@ function updateDocumentDirection(lang: SupportedLanguage) {
   document.documentElement.dir = RTL_LANGUAGES.includes(lang) ? 'rtl' : 'ltr'
 }
 
-/**
- * Resolve the actual language to use:
- * 1. If localStorage has a saved preference, use that (client only)
- * 2. Otherwise fall back to the server-detected initialLanguage
- */
-function resolveLanguage(fallback: SupportedLanguage): SupportedLanguage {
-  if (typeof window !== 'undefined') {
-    try {
-      const saved = localStorage.getItem('user-language') as SupportedLanguage
-      if (saved && SUPPORTED_LANGS.includes(saved)) return saved
-    } catch {}
-  }
-  return fallback
-}
+
 
 export function LanguageProvider({ children, initialLanguage = 'en', initialTranslations }: {
   children: ReactNode
   initialLanguage?: SupportedLanguage
   initialTranslations?: Translations
 }) {
-  // Resolve language synchronously from localStorage BEFORE any effect runs.
-  // This prevents the flash where initialLanguage ('en') overrides RTL.
-  const [language, setLanguageState] = useState<SupportedLanguage>(() => resolveLanguage(initialLanguage))
+  // Use server-provided initialLanguage for the first render to prevent hydration mismatch.
+  const [language, setLanguageState] = useState<SupportedLanguage>(initialLanguage)
 
   // Start with server-provided translations or English fallback
   const [translations, setTranslations] = useState<Translations>(
     (initialTranslations || enTranslations) as unknown as Translations
   )
+
   const cacheRef = useRef<Map<SupportedLanguage, Translations>>(new Map())
   const isFirstRender = useRef(true)
 
+  // Load saved preference from localStorage AFTER hydration
+  useEffect(() => {
+    const saved = localStorage.getItem('user-language') as SupportedLanguage
+    if (saved && SUPPORTED_LANGS.includes(saved) && saved !== initialLanguage) {
+      setLanguageState(saved)
+    }
+  }, [initialLanguage])
+
   // Load translations when language changes (with caching)
   // On first render, skip updateDocumentDirection since the inline script already set it.
   useEffect(() => {
diff --git a/memento-note/locales/en.json b/memento-note/locales/en.json
index 4b7ea0a..7112b09 100644
--- a/memento-note/locales/en.json
+++ b/memento-note/locales/en.json
@@ -42,11 +42,21 @@
     "noLabelsInNotebook": "No labels in this notebook yet",
     "archive": "Archive",
     "trash": "Trash",
-    "clearFilter": "Remove filter"
+    "clearFilter": "Remove filter",
+    "inbox": "Inbox",
+    "sharedWithMe": "Shared with me",
+    "sortNewest": "Newest first",
+    "sortOldest": "Oldest first",
+    "sortAlpha": "A → Z",
+    "accountMenu": "Account menu",
+    "profile": "Profile",
+    "signOut": "Sign out",
+    "sortOrder": "Sort order"
   },
   "notes": {
     "title": "Notes",
     "newNote": "New note",
+    "reorganize": "Reorganize notes",
     "untitled": "Untitled",
     "placeholder": "Take a note...",
     "markdownPlaceholder": "Take a note... (Markdown supported)",
diff --git a/memento-note/locales/fr.json b/memento-note/locales/fr.json
index ce3a310..3e611e8 100644
--- a/memento-note/locales/fr.json
+++ b/memento-note/locales/fr.json
@@ -42,11 +42,21 @@
     "noLabelsInNotebook": "Aucune étiquette dans ce carnet",
     "archive": "Archives",
     "trash": "Corbeille",
-    "clearFilter": "Retirer le filtre"
+    "clearFilter": "Retirer le filtre",
+    "inbox": "Boîte de réception",
+    "sharedWithMe": "Partagées avec moi",
+    "sortNewest": "Plus récentes",
+    "sortOldest": "Plus anciennes",
+    "sortAlpha": "A → Z",
+    "accountMenu": "Menu du compte",
+    "profile": "Profil",
+    "signOut": "Se déconnecter",
+    "sortOrder": "Ordre de tri"
   },
   "notes": {
     "title": "Notes",
     "newNote": "Nouvelle note",
+    "reorganize": "Réorganiser les notes",
     "untitled": "Sans titre",
     "placeholder": "Prenez une note...",
     "markdownPlaceholder": "Prenez une note... (Markdown supporté)",