diff --git a/src/pages/editor-page/canvas/area-node/area-node-context-menu.tsx b/src/pages/editor-page/canvas/area-node/area-node-context-menu.tsx
new file mode 100644
index 00000000..c1aeca67
--- /dev/null
+++ b/src/pages/editor-page/canvas/area-node/area-node-context-menu.tsx
@@ -0,0 +1,54 @@
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuTrigger,
+} from '@/components/context-menu/context-menu';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
+import { useChartDB } from '@/hooks/use-chartdb';
+import type { Area } from '@/lib/domain/area';
+import { Pencil, Trash2 } from 'lucide-react';
+import React, { useCallback } from 'react';
+
+export interface AreaNodeContextMenuProps {
+    area: Area;
+    onEditName?: () => void;
+}
+
+export const AreaNodeContextMenu: React.FC<
+    React.PropsWithChildren<AreaNodeContextMenuProps>
+> = ({ children, area, onEditName }) => {
+    const { removeArea, readonly } = useChartDB();
+    const { isMd: isDesktop } = useBreakpoint('md');
+
+    const removeAreaHandler = useCallback(() => {
+        removeArea(area.id);
+    }, [removeArea, area.id]);
+
+    if (!isDesktop || readonly) {
+        return <>{children}</>;
+    }
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger>{children}</ContextMenuTrigger>
+            <ContextMenuContent>
+                {onEditName ? (
+                    <ContextMenuItem
+                        onClick={onEditName}
+                        className="flex justify-between gap-3"
+                    >
+                        <span>Edit Area Name</span>
+                        <Pencil className="size-3.5" />
+                    </ContextMenuItem>
+                ) : null}
+                <ContextMenuItem
+                    onClick={removeAreaHandler}
+                    className="flex justify-between gap-3"
+                >
+                    <span>Delete Area</span>
+                    <Trash2 className="size-3.5 text-red-700" />
+                </ContextMenuItem>
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+};
diff --git a/src/pages/editor-page/canvas/area-node/area-node.tsx b/src/pages/editor-page/canvas/area-node/area-node.tsx
index 1164dbf4..4d3dd186 100644
--- a/src/pages/editor-page/canvas/area-node/area-node.tsx
+++ b/src/pages/editor-page/canvas/area-node/area-node.tsx
@@ -12,9 +12,10 @@ import {
 } from '@/components/tooltip/tooltip';
 import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
-import { Check, GripVertical } from 'lucide-react';
+import { Check, GripVertical, Pencil } from 'lucide-react';
 import { Button } from '@/components/button/button';
 import { useLayout } from '@/hooks/use-layout';
+import { AreaNodeContextMenu } from './area-node-context-menu';
 
 export type AreaNodeType = Node<
     {
@@ -62,79 +63,93 @@ export const AreaNode: React.FC<NodeProps<AreaNodeType>> = React.memo(
         };
 
         return (
-            <div
-                className={cn(
-                    'flex h-full flex-col rounded-md border-2 shadow-sm',
-                    selected ? 'border-pink-600' : 'border-transparent'
-                )}
-                style={{
-                    backgroundColor: `${area.color}15`,
-                    borderColor: selected ? undefined : area.color,
-                }}
-                onClick={(e) => {
-                    if (e.detail === 2) {
-                        openAreaInEditor();
-                    }
-                }}
+            <AreaNodeContextMenu
+                area={area}
+                onEditName={() => setEditMode(true)}
             >
-                {!readonly ? (
-                    <NodeResizer
-                        isVisible={focused}
-                        lineClassName="!border-4 !border-transparent"
-                        handleClassName="!h-[10px] !w-[10px] !rounded-full !bg-pink-600"
-                        minHeight={100}
-                        minWidth={100}
-                    />
-                ) : null}
-                <div className="group flex h-8 items-center justify-between rounded-t-md px-2">
-                    <div className="flex w-full items-center gap-1">
-                        <GripVertical className="size-4 shrink-0 text-slate-700 opacity-60 dark:text-slate-300" />
+                <div
+                    className={cn(
+                        'flex h-full flex-col rounded-md border-2 shadow-sm',
+                        selected ? 'border-pink-600' : 'border-transparent'
+                    )}
+                    style={{
+                        backgroundColor: `${area.color}15`,
+                        borderColor: selected ? undefined : area.color,
+                    }}
+                    onClick={(e) => {
+                        if (e.detail === 2) {
+                            openAreaInEditor();
+                        }
+                    }}
+                >
+                    {!readonly ? (
+                        <NodeResizer
+                            isVisible={focused}
+                            lineClassName="!border-4 !border-transparent"
+                            handleClassName="!h-[10px] !w-[10px] !rounded-full !bg-pink-600"
+                            minHeight={100}
+                            minWidth={100}
+                        />
+                    ) : null}
+                    <div className="group flex h-8 items-center justify-between rounded-t-md px-2">
+                        <div className="flex w-full items-center gap-1">
+                            <GripVertical className="size-4 shrink-0 text-slate-700 opacity-60 dark:text-slate-300" />
 
-                        {editMode && !readonly ? (
-                            <div className="flex w-full items-center">
-                                <Input
-                                    ref={inputRef}
-                                    autoFocus
-                                    type="text"
-                                    placeholder={area.name}
-                                    value={areaName}
-                                    onClick={(e) => e.stopPropagation()}
-                                    onChange={(e) =>
-                                        setAreaName(e.target.value)
-                                    }
-                                    className="h-6 bg-white/70 focus-visible:ring-0 dark:bg-slate-900/70"
-                                />
+                            {editMode && !readonly ? (
+                                <div className="flex w-full items-center">
+                                    <Input
+                                        ref={inputRef}
+                                        autoFocus
+                                        type="text"
+                                        placeholder={area.name}
+                                        value={areaName}
+                                        onClick={(e) => e.stopPropagation()}
+                                        onChange={(e) =>
+                                            setAreaName(e.target.value)
+                                        }
+                                        className="h-6 bg-white/70 focus-visible:ring-0 dark:bg-slate-900/70"
+                                    />
+                                    <Button
+                                        variant="ghost"
+                                        className="ml-1 size-6 p-0 hover:bg-white/20"
+                                        onClick={editAreaName}
+                                    >
+                                        <Check className="size-3.5 text-slate-700 dark:text-slate-300" />
+                                    </Button>
+                                </div>
+                            ) : !readonly ? (
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <div
+                                            className="text-editable truncate px-1 py-0.5 text-base font-semibold text-slate-700 dark:text-slate-300"
+                                            onDoubleClick={enterEditMode}
+                                        >
+                                            {area.name}
+                                        </div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {t('tool_tips.double_click_to_edit')}
+                                    </TooltipContent>
+                                </Tooltip>
+                            ) : (
+                                <div className="truncate px-1 py-0.5 text-base font-semibold text-slate-700 dark:text-slate-300">
+                                    {area.name}
+                                </div>
+                            )}
+                            {!editMode && !readonly && (
                                 <Button
                                     variant="ghost"
-                                    className="ml-1 size-6 p-0 hover:bg-white/20"
-                                    onClick={editAreaName}
+                                    className="ml-auto size-5 p-0 opacity-0 transition-opacity hover:bg-white/20 group-hover:opacity-100"
+                                    onClick={enterEditMode}
                                 >
-                                    <Check className="size-3.5 text-slate-700 dark:text-slate-300" />
+                                    <Pencil className="size-3 text-slate-700 dark:text-slate-300" />
                                 </Button>
-                            </div>
-                        ) : !readonly ? (
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <div
-                                        className="text-editable max-w-[200px] cursor-text truncate px-1 py-0.5 text-base font-semibold text-slate-700 dark:text-slate-300"
-                                        onDoubleClick={enterEditMode}
-                                    >
-                                        {area.name}
-                                    </div>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {t('tool_tips.double_click_to_edit')}
-                                </TooltipContent>
-                            </Tooltip>
-                        ) : (
-                            <div className="truncate px-1 py-0.5 text-base font-semibold text-slate-700 dark:text-slate-300">
-                                {area.name}
-                            </div>
-                        )}
+                            )}
+                        </div>
                     </div>
+                    <div className="flex-1" />
                 </div>
-                <div className="flex-1" />
-            </div>
+            </AreaNodeContextMenu>
         );
     }
 );
diff --git a/src/pages/editor-page/top-navbar/diagram-name.tsx b/src/pages/editor-page/top-navbar/diagram-name.tsx
index a3a6fb0a..d381f462 100644
--- a/src/pages/editor-page/top-navbar/diagram-name.tsx
+++ b/src/pages/editor-page/top-navbar/diagram-name.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button } from '@/components/button/button';
-import { Check } from 'lucide-react';
+import { Check, Pencil } from 'lucide-react';
 import { Input } from '@/components/input/input';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useClickAway, useKeyPressEvent } from 'react-use';
@@ -32,22 +32,39 @@ export const DiagramName: React.FC<DiagramNameProps> = () => {
     }, [diagramName]);
 
     const editDiagramName = useCallback(() => {
-        if (!editMode) return;
         if (editedDiagramName.trim()) {
             updateDiagramName(editedDiagramName.trim());
         }
         setEditMode(false);
-    }, [editedDiagramName, updateDiagramName, editMode]);
+    }, [editedDiagramName, updateDiagramName]);
 
+    // Handle click outside to save and exit edit mode
     useClickAway(inputRef, editDiagramName);
+
     useKeyPressEvent('Enter', editDiagramName);
 
-    const enterEditMode = (
-        event: React.MouseEvent<HTMLHeadingElement, MouseEvent>
-    ) => {
-        event.stopPropagation();
-        setEditMode(true);
-    };
+    useEffect(() => {
+        if (editMode) {
+            // Small delay to ensure the input is rendered
+            const timeoutId = setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.select();
+                }
+            }, 50); // Slightly longer delay to ensure DOM is ready
+
+            return () => clearTimeout(timeoutId);
+        }
+    }, [editMode]);
+
+    const enterEditMode = useCallback(
+        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            event.stopPropagation();
+            setEditedDiagramName(diagramName);
+            setEditMode(true);
+        },
+        [diagramName]
+    );
 
     return (
         <div className="group">
@@ -80,11 +97,16 @@ export const DiagramName: React.FC<DiagramNameProps> = () => {
                                 onChange={(e) =>
                                     setEditedDiagramName(e.target.value)
                                 }
-                                className="ml-1 h-7 focus-visible:ring-0"
+                                className="h-7 max-w-[300px] focus-visible:ring-0"
+                                style={{
+                                    width: `${
+                                        editedDiagramName.length * 8 + 30
+                                    }px`,
+                                }}
                             />
                             <Button
                                 variant="ghost"
-                                className="flex size-7 p-2 text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300"
+                                className="ml-1 flex size-7 p-2 text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300"
                                 onClick={editDiagramName}
                             >
                                 <Check />
@@ -97,7 +119,7 @@ export const DiagramName: React.FC<DiagramNameProps> = () => {
                                     <h1
                                         className={cn(
                                             labelVariants(),
-                                            'group-hover:underline'
+                                            'group-hover:underline max-w-[300px] truncate'
                                         )}
                                         onDoubleClick={(e) => {
                                             enterEditMode(e);
@@ -110,6 +132,16 @@ export const DiagramName: React.FC<DiagramNameProps> = () => {
                                     {t('tool_tips.double_click_to_edit')}
                                 </TooltipContent>
                             </Tooltip>
+                            <Button
+                                variant="ghost"
+                                className="ml-1 hidden size-5 p-0 hover:bg-background/50 group-hover:flex"
+                                onClick={enterEditMode}
+                            >
+                                <Pencil
+                                    strokeWidth="1.5"
+                                    className="!size-3.5 text-slate-600 dark:text-slate-400"
+                                />
+                            </Button>
                         </>
                     )}
                 </div>