diff --git a/memento-note/components/organize-notebook-dialog.tsx b/memento-note/components/organize-notebook-dialog.tsx
index 4a85ae9..6856c00 100644
--- a/memento-note/components/organize-notebook-dialog.tsx
+++ b/memento-note/components/organize-notebook-dialog.tsx
@@ -100,36 +100,36 @@ export function OrganizeNotebookDialog({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4"
             onClick={handleClose}
-          />
-          <motion.div
-            initial={{ opacity: 0, x: slide }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: slide }}
-            transition={{ type: 'spring', stiffness: 300, damping: 32 }}
-            className="fixed end-0 top-0 bottom-0 z-50 w-full max-w-md bg-memento-paper dark:bg-zinc-900 border-s border-border shadow-2xl flex flex-col"
-            onClick={e => e.stopPropagation()}
           >
-            {/* Header */}
-            <div className="px-5 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
-              <div className="flex items-center gap-2.5">
-                <div className="w-8 h-8 rounded-xl bg-brand-accent/10 flex items-center justify-center">
-                  <Sparkles size={15} className="text-brand-accent" />
-                </div>
-                <div>
-                  <h2 className="text-sm font-semibold text-ink dark:text-dark-ink font-memento-serif">{t('organizeNotebook.title')}</h2>
-                  <p className="text-[10px] text-concrete truncate max-w-[200px]">{notebookName}</p>
+            <motion.div
+              initial={{ opacity: 0, scale: 0.96 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.96 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 28 }}
+              className="w-full max-w-lg bg-memento-paper dark:bg-zinc-900 rounded-2xl border border-border shadow-2xl flex flex-col max-h-[85vh] overflow-hidden"
+              onClick={e => e.stopPropagation()}
+            >
+              {/* Header */}
+              <div className="px-5 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-8 h-8 rounded-xl bg-brand-accent/10 flex items-center justify-center">
+                    <Sparkles size={15} className="text-brand-accent" />
+                  </div>
+                  <div>
+                    <h2 className="text-sm font-semibold text-ink dark:text-dark-ink font-memento-serif">{t('organizeNotebook.title')}</h2>
+                    <p className="text-[10px] text-concrete truncate max-w-[240px]">{notebookName}</p>
+                  </div>
                 </div>
+                <button onClick={handleClose} disabled={step === 'analyzing' || step === 'executing'}
+                  className="w-7 h-7 rounded-lg flex items-center justify-center text-concrete hover:text-ink hover:bg-foreground/5 transition-colors disabled:opacity-30">
+                  <X size={15} />
+                </button>
               </div>
-              <button onClick={handleClose} disabled={step === 'analyzing' || step === 'executing'}
-                className="w-7 h-7 rounded-lg flex items-center justify-center text-concrete hover:text-ink hover:bg-foreground/5 transition-colors disabled:opacity-30">
-                <X size={15} />
-              </button>
-            </div>
 
-            {/* Content */}
-            <div className="flex-1 overflow-y-auto custom-scrollbar">
+              {/* Content */}
+              <div className="flex-1 overflow-y-auto custom-scrollbar">
               <AnimatePresence mode="wait">
 
                 {/* IDLE */}