diff --git a/memento-note/components/note-editor.tsx b/memento-note/components/note-editor.tsx
index abbdf24..5c8cef8 100644
--- a/memento-note/components/note-editor.tsx
+++ b/memento-note/components/note-editor.tsx
@@ -673,11 +673,11 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
 
     return (
       <>
-        {/* ── outer container: white like prototype ── */}
-        <div className="h-full flex overflow-hidden transition-all duration-500">
+        {/* ── outer container ── */}
+        <div className="h-full flex items-stretch overflow-hidden transition-all duration-500">
 
           {/* ── main scrollable column ── */}
-          <div className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-zinc-950">
+          <div className="flex-1 flex flex-col overflow-y-auto bg-background">
 
             {/* TOOLBAR — px-12 py-8, bg-white/90, rounded-full buttons */}
             <div className="px-12 py-8 flex items-center justify-between sticky top-0 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-sm z-40 border-b border-black/10 dark:border-white/10">
@@ -883,9 +883,9 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
             </div>
           </div>
 
-          {/* ── Side panel: AI Chat (prototype style: w-[400px], border-l, bg-white) ── */}
+          {/* ── Side panel: AI Chat ── */}
           {aiOpen && (
-            <div className="w-[400px] border-l border-black/10 dark:border-white/10 bg-white dark:bg-zinc-950 shadow-2xl flex flex-col z-50 shrink-0">
+            <div className="w-[400px] h-full self-stretch border-l border-black/10 dark:border-white/10 bg-background flex flex-col z-50 shrink-0">
               <ContextualAIChat
                 onClose={() => setAiOpen(false)}
                 noteTitle={title}
@@ -908,7 +908,7 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
 
           {/* ── Side panel: Document Info ── */}
           {infoOpen && (
-            <div className="w-[400px] border-l border-black/10 dark:border-white/10 bg-white dark:bg-zinc-950 shadow-2xl flex flex-col z-50 shrink-0">
+            <div className="w-[400px] h-full self-stretch border-l border-black/10 dark:border-white/10 bg-background flex flex-col z-50 shrink-0">
               <NoteDocumentInfoPanel
                 note={note}
                 content={content}