diff --git a/memento-note/components/note-card.tsx b/memento-note/components/note-card.tsx
index 61d9fb5..f38be31 100644
--- a/memento-note/components/note-card.tsx
+++ b/memento-note/components/note-card.tsx
@@ -9,6 +9,9 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
 } from '@/components/ui/dropdown-menu'
 import {
   AlertDialog,
@@ -20,7 +23,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-import { Pin, Bell, GripVertical, X, Link2, FolderOpen, StickyNote, LucideIcon, Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2, LogOut, Trash2, AlignLeft, FileCode2, PenLine, ListChecks } from 'lucide-react'
+import { Pin, Bell, GripVertical, X, Link2, FolderOpen, StickyNote, LucideIcon, Folder, Briefcase, FileText, Zap, BarChart3, Globe, Sparkles, Book, Heart, Crown, Music, Building2, LogOut, Trash2, AlignLeft, FileCode2, PenLine, ListChecks, ChevronRight } from 'lucide-react'
 import { useState, useEffect, useTransition, useOptimistic, memo, useMemo } from 'react'
 import dynamic from 'next/dynamic'
 import { useSession } from 'next-auth/react'
@@ -507,22 +510,37 @@ export const NoteCard = memo(function NoteCard({
             {notebooks.filter(nb => !nb.parentId).map((notebook: any) => {
                const NotebookIcon = getNotebookIcon(notebook.icon || 'folder')
                const children = notebooks.filter((c: any) => c.parentId === notebook.id)
-               return (
-                 <div key={notebook.id}>
-                   <DropdownMenuItem onClick={() => handleMoveToNotebook(notebook.id)}>
-                     <NotebookIcon className="h-4 w-4 mr-2" />
-                     {notebook.name}
-                   </DropdownMenuItem>
-                   {children.map((child: any) => {
-                     const ChildIcon = getNotebookIcon(child.icon || 'folder')
-                     return (
-                       <DropdownMenuItem key={child.id} onClick={() => handleMoveToNotebook(child.id)} className="pl-8">
-                         <ChildIcon className="h-4 w-4 mr-2" />
-                         └ {child.name}
+               if (children.length > 0) {
+                 return (
+                   <DropdownMenuSub key={notebook.id}>
+                     <DropdownMenuSubTrigger className="gap-2">
+                       <NotebookIcon className="h-4 w-4" />
+                       {notebook.name}
+                       <ChevronRight className="h-3 w-3 ml-auto opacity-50" />
+                     </DropdownMenuSubTrigger>
+                     <DropdownMenuSubContent>
+                       <DropdownMenuItem onClick={() => handleMoveToNotebook(notebook.id)}>
+                         <NotebookIcon className="h-4 w-4 mr-2" />
+                         {notebook.name}
                        </DropdownMenuItem>
-                     )
-                   })}
-                 </div>
+                       {children.map((child: any) => {
+                         const ChildIcon = getNotebookIcon(child.icon || 'folder')
+                         return (
+                           <DropdownMenuItem key={child.id} onClick={() => handleMoveToNotebook(child.id)}>
+                             <ChildIcon className="h-4 w-4 mr-2" />
+                             {child.name}
+                           </DropdownMenuItem>
+                         )
+                       })}
+                     </DropdownMenuSubContent>
+                   </DropdownMenuSub>
+                 )
+               }
+               return (
+                 <DropdownMenuItem key={notebook.id} onClick={() => handleMoveToNotebook(notebook.id)}>
+                   <NotebookIcon className="h-4 w-4 mr-2" />
+                   {notebook.name}
+                 </DropdownMenuItem>
                )
              })}
           </DropdownMenuContent>