diff --git a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
index d2e5770e..234f2efa 100644
--- a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
@@ -1,4 +1,4 @@
-import { EditTaskDialogProps } from '../../utils/types';
+import { EditTaskDialogProps, FieldKey } from '../../utils/types';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DateTimePicker } from '@/components/ui/date-time-picker';
@@ -34,6 +34,10 @@ import {
 } from 'lucide-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { formattedDate, handleCopy } from './tasks-utils';
+import { useEffect, useRef, useState } from 'react';
+import { useTaskDialogKeyboard } from './UseTaskDialogKeyboard';
+import { FIELDS } from './constants';
+import { useTaskDialogFocusMap } from './UseTaskDialogFocusMap';
 
 export const TaskDialog = ({
   index,
@@ -67,6 +71,94 @@ export const TaskDialog = ({
   isOverdue,
   isUnsynced,
 }: EditTaskDialogProps) => {
+  const editButtonRef = useRef<
+    Partial<Record<FieldKey, HTMLButtonElement | null>>
+  >({});
+  const inputRefs = useRef<
+    Partial<Record<FieldKey, HTMLInputElement | HTMLButtonElement | null>>
+  >({});
+  const [focusedFieldIndex, setFocusedFieldIndex] = useState(0);
+
+  const isEditingAny =
+    editState.isEditing ||
+    editState.isEditingDueDate ||
+    editState.isEditingStartDate ||
+    editState.isEditingEndDate ||
+    editState.isEditingWaitDate ||
+    editState.isEditingEntryDate ||
+    editState.isEditingPriority ||
+    editState.isEditingProject ||
+    editState.isEditingTags ||
+    editState.isEditingDepends ||
+    editState.isEditingRecur ||
+    editState.isEditingAnnotations;
+
+  const focusedField = FIELDS[focusedFieldIndex];
+
+  const stopEditing = () => {
+    onUpdateState({
+      isEditing: false,
+      isEditingDueDate: false,
+      isEditingStartDate: false,
+      isEditingEndDate: false,
+      isEditingWaitDate: false,
+      isEditingEntryDate: false,
+      isEditingPriority: false,
+      isEditingProject: false,
+      isEditingTags: false,
+      isEditingDepends: false,
+      isEditingRecur: false,
+      isEditingAnnotations: false,
+    });
+  };
+
+  const triggerEditForField = (field: FieldKey) => {
+    editButtonRef.current[field]?.click();
+  };
+
+  useEffect(() => {
+    const element = editButtonRef.current[focusedField];
+    if (!element) return;
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+    });
+  }, [focusedField]);
+
+  useEffect(() => {
+    focusMap(focusedField);
+  }, [
+    focusedField,
+    editState.isEditing,
+    editState.isEditingDueDate,
+    editState.isEditingStartDate,
+    editState.isEditingEndDate,
+    editState.isEditingWaitDate,
+    editState.isEditingEntryDate,
+    editState.isEditingTags,
+    editState.isEditingAnnotations,
+  ]);
+
+  const focusMap = useTaskDialogFocusMap({
+    fields: FIELDS,
+    inputRefs: inputRefs,
+  });
+
+  const handleDialogKeyDown = useTaskDialogKeyboard({
+    fields: FIELDS,
+    focusedFieldIndex: focusedFieldIndex,
+    setFocusedFieldIndex: setFocusedFieldIndex,
+    isEditingAny: isEditingAny,
+    stopEditing: stopEditing,
+    triggerEditForField: triggerEditForField,
+  });
+
+  const saveAndExit = (onSave: () => void) => {
+    onSave();
+    stopEditing();
+  };
+
   const handleDialogOpenChange = (open: boolean) => {
     if (open) {
       onSelectTask(task, index);
@@ -175,7 +267,18 @@ export const TaskDialog = ({
           </TableCell>
         </TableRow>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[625px] max-h-[90vh] flex flex-col">
+      <DialogContent
+        onEscapeKeyDown={(e) => {
+          if (isEditingAny) {
+            e.preventDefault();
+            stopEditing();
+            return;
+          }
+        }}
+        tabIndex={0}
+        onKeyDown={handleDialogKeyDown}
+        className="sm:max-w-[625px] max-h-[90vh] flex flex-col"
+      >
         <DialogHeader>
           <DialogTitle>
             <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
@@ -203,13 +306,30 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'description' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Description:</TableCell>
                   <TableCell>
                     {editState.isEditing ? (
                       <>
                         <div className="flex items-center">
                           <Input
+                            aria-label="description"
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                e.preventDefault();
+                                saveAndExit(() => {
+                                  onSaveDescription(
+                                    task,
+                                    editState.editedDescription
+                                  );
+                                });
+                              }
+                            }}
+                            ref={(element) =>
+                              (inputRefs.current.description = element)
+                            }
                             id={`description-${task.id}`}
                             name={`description-${task.id}`}
                             type="text"
@@ -249,6 +369,9 @@ export const TaskDialog = ({
                       <>
                         <span>{task.description}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.description = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -260,12 +383,15 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'due' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Due:</TableCell>
                   <TableCell>
                     {editState.isEditingDueDate ? (
                       <div className="flex items-center gap-2">
                         <DateTimePicker
+                          ref={(element) => (inputRefs.current.due = element)}
                           date={
                             editState.editedDueDate &&
                             editState.editedDueDate !== ''
@@ -325,6 +451,9 @@ export const TaskDialog = ({
                       <>
                         <span>{formattedDate(task.due)}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.due = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -341,12 +470,17 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'start' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Start:</TableCell>
                   <TableCell>
                     {editState.isEditingStartDate ? (
                       <div className="flex items-center gap-2">
                         <DateTimePicker
+                          ref={(element: HTMLButtonElement | null) =>
+                            (inputRefs.current.start = element)
+                          }
                           date={
                             editState.editedStartDate &&
                             editState.editedStartDate !== ''
@@ -410,6 +544,9 @@ export const TaskDialog = ({
                       <>
                         <span>{formattedDate(task.start)}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.start = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -426,12 +563,15 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'end' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>End:</TableCell>
                   <TableCell>
                     {editState.isEditingEndDate ? (
                       <div className="flex items-center gap-2">
                         <DateTimePicker
+                          ref={(element) => (inputRefs.current.end = element)}
                           date={
                             editState.editedEndDate &&
                             editState.editedEndDate !== ''
@@ -491,6 +631,9 @@ export const TaskDialog = ({
                       <div className="flex items-center">
                         <span>{formattedDate(task.end)}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.end = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -507,12 +650,15 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'wait' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Wait:</TableCell>
                   <TableCell>
                     {editState.isEditingWaitDate ? (
                       <div className="flex items-center gap-2">
                         <DateTimePicker
+                          ref={(element) => (inputRefs.current.wait = element)}
                           date={
                             editState.editedWaitDate &&
                             editState.editedWaitDate !== ''
@@ -575,6 +721,9 @@ export const TaskDialog = ({
                       <>
                         <span>{formattedDate(task.wait)}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.wait = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -591,7 +740,9 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'depends' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Depends:</TableCell>
                   <TableCell>
                     {!editState.isEditingDepends ? (
@@ -623,6 +774,9 @@ export const TaskDialog = ({
                           );
                         })}
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.depends = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -631,6 +785,14 @@ export const TaskDialog = ({
                               isEditingDepends: true,
                               editedDepends: task.depends || [],
                             });
+
+                            setTimeout(() => {
+                              onUpdateState({ dependsDropdownOpen: true });
+                            }, 0);
+
+                            requestAnimationFrame(() => {
+                              inputRefs.current.depends?.focus();
+                            });
                           }}
                         >
                           <PencilIcon className="h-4 w-4 text-gray-500" />
@@ -670,12 +832,14 @@ export const TaskDialog = ({
                         <div className="flex items-center gap-2">
                           <div className="relative flex-1">
                             <Button
+                              ref={(element) => {
+                                editButtonRef.current.depends = element;
+                              }}
                               variant="outline"
                               size="sm"
                               onClick={() =>
                                 onUpdateState({
-                                  dependsDropdownOpen:
-                                    !editState.dependsDropdownOpen,
+                                  dependsDropdownOpen: true,
                                 })
                               }
                               className="w-full justify-start"
@@ -689,6 +853,9 @@ export const TaskDialog = ({
                                 className="absolute left-0 top-full mt-1 z-50 w-full bg-background border rounded-md shadow-lg max-h-60 overflow-y-auto"
                               >
                                 <Input
+                                  ref={(element) =>
+                                    (inputRefs.current.depends = element)
+                                  }
                                   type="text"
                                   placeholder="Search tasks..."
                                   value={editState.dependsSearchTerm}
@@ -726,6 +893,24 @@ export const TaskDialog = ({
                                           dependsSearchTerm: '',
                                         });
                                       }}
+                                      onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                          e.preventDefault();
+                                          onUpdateState({
+                                            editedDepends:
+                                              editState.editedDepends.includes(
+                                                t.uuid
+                                              )
+                                                ? editState.editedDepends.filter(
+                                                    (id) => id !== t.uuid
+                                                  )
+                                                : [
+                                                    ...editState.editedDepends,
+                                                    t.uuid,
+                                                  ],
+                                          });
+                                        }
+                                      }}
                                     >
                                       <input
                                         type="checkbox"
@@ -775,7 +960,9 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'priority' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Priority:</TableCell>
                   <TableCell>
                     {editState.isEditingPriority ? (
@@ -837,15 +1024,18 @@ export const TaskDialog = ({
                             : 'None'}
                         </span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.priority = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
-                          onClick={() =>
+                          onClick={() => {
                             onUpdateState({
                               editedPriority: task.priority || 'NONE',
                               isEditingPriority: true,
-                            })
-                          }
+                            });
+                          }}
                         >
                           <PencilIcon className="h-4 w-4 text-gray-500" />
                         </Button>
@@ -853,7 +1043,9 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'project' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Project:</TableCell>
                   <TableCell>
                     {editState.isEditingProject ? (
@@ -917,6 +1109,9 @@ export const TaskDialog = ({
                           {isCreatingNewProject && (
                             <div className="flex gap-4 justify-center items-center">
                               <Input
+                                ref={(element) => {
+                                  inputRefs.current.project = element;
+                                }}
                                 id="project-name"
                                 placeholder="New project name"
                                 value={editState.editedProject}
@@ -964,6 +1159,9 @@ export const TaskDialog = ({
                       <>
                         <span>{task.project}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.project = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -984,13 +1182,18 @@ export const TaskDialog = ({
                   <TableCell>Status:</TableCell>
                   <TableCell>{task.status}</TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'tags' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Tags:</TableCell>
                   <TableCell>
                     {editState.isEditingTags ? (
                       <div>
                         <div className="flex items-center w-full">
                           <Input
+                            ref={(element) =>
+                              (inputRefs.current.tags = element)
+                            }
                             type="text"
                             value={editState.editTagInput}
                             onChange={(e) => {
@@ -1101,6 +1304,9 @@ export const TaskDialog = ({
                           <span>No Tags</span>
                         )}
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.tags = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -1118,12 +1324,15 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'entry' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Entry:</TableCell>
                   <TableCell>
                     {editState.isEditingEntryDate ? (
                       <div className="flex items-center gap-2">
                         <DateTimePicker
+                          ref={(element) => (inputRefs.current.entry = element)}
                           date={
                             editState.editedEntryDate &&
                             editState.editedEntryDate !== ''
@@ -1187,6 +1396,9 @@ export const TaskDialog = ({
                       <>
                         <span>{formattedDate(task.entry)}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.entry = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -1203,7 +1415,9 @@ export const TaskDialog = ({
                     )}
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'recur' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Recur:</TableCell>
                   <TableCell>
                     {editState.isEditingRecur ? (
@@ -1280,6 +1494,9 @@ export const TaskDialog = ({
                       <div className="flex items-center">
                         <span>{task.recur || 'None'}</span>
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.recur = element)
+                          }
                           variant="ghost"
                           size="icon"
                           aria-label="edit"
@@ -1326,13 +1543,18 @@ export const TaskDialog = ({
                     </CopyToClipboard>
                   </TableCell>
                 </TableRow>
-                <TableRow>
+                <TableRow
+                  className={`${focusedField === 'annotations' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+                >
                   <TableCell>Annotations:</TableCell>
                   <TableCell>
                     {editState.isEditingAnnotations ? (
                       <div>
                         <div className="flex items-center w-full">
                           <Input
+                            ref={(element) =>
+                              (inputRefs.current.annotations = element)
+                            }
                             type="text"
                             value={editState.annotationInput}
                             onChange={(e) => {
@@ -1440,8 +1662,12 @@ export const TaskDialog = ({
                           <span>No Annotations</span>
                         )}
                         <Button
+                          ref={(element) =>
+                            (editButtonRef.current.annotations = element)
+                          }
                           variant="ghost"
                           size="icon"
+                          aria-label="edit"
                           onClick={() =>
                             onUpdateState({
                               isEditingAnnotations: true,
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 4a3fec6e..632c07ff 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -167,7 +167,7 @@ export const Tasks = (
         setSelectedIndex((prev) => Math.max(prev - 1, 0));
       }
 
-      if (e.key === 'e') {
+      if (e.key === 'Enter') {
         e.preventDefault();
         const task = currentTasks[selectedIndex];
         if (task) {
diff --git a/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx
new file mode 100644
index 00000000..a08f8c2c
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx
@@ -0,0 +1,27 @@
+import { UseTaskDialogFocusMapProps } from '@/components/utils/types';
+import React from 'react';
+
+export function useTaskDialogFocusMap<F extends readonly string[]>({
+  fields,
+  inputRefs,
+}: UseTaskDialogFocusMapProps<F>) {
+  return React.useCallback(
+    (field: F[number]) => {
+      const element = inputRefs.current[field];
+      if (!element) return;
+
+      element.focus();
+
+      if (
+        field === 'due' ||
+        field === 'start' ||
+        field === 'end' ||
+        field === 'wait' ||
+        field === 'entry'
+      ) {
+        element.click();
+      }
+    },
+    [fields, inputRefs]
+  );
+}
diff --git a/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx
new file mode 100644
index 00000000..7c5d027f
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx
@@ -0,0 +1,57 @@
+import { UseTaskDialogKeyboardProps } from '@/components/utils/types';
+import React from 'react';
+
+export function useTaskDialogKeyboard<F extends readonly string[]>({
+  fields,
+  focusedFieldIndex,
+  setFocusedFieldIndex,
+  isEditingAny,
+  triggerEditForField,
+  stopEditing,
+}: UseTaskDialogKeyboardProps<F>) {
+  return React.useCallback(
+    (e: React.KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+
+      const isTyping =
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable;
+
+      if (isTyping) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          if (isEditingAny) return;
+          setFocusedFieldIndex((i) => Math.min(i + 1, fields.length - 1));
+          break;
+
+        case 'ArrowUp':
+          e.preventDefault();
+          if (isEditingAny) return;
+          setFocusedFieldIndex((i) => Math.max(i - 1, 0));
+          break;
+
+        case 'Enter':
+          if (isEditingAny) return;
+          e.preventDefault();
+          triggerEditForField(fields[focusedFieldIndex]);
+          break;
+
+        case 'Escape':
+          e.preventDefault();
+          stopEditing();
+          break;
+      }
+    },
+    [
+      fields,
+      focusedFieldIndex,
+      isEditingAny,
+      setFocusedFieldIndex,
+      stopEditing,
+      triggerEditForField,
+    ]
+  );
+}
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
index e92b12e8..990e48d2 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx
@@ -689,4 +689,106 @@ describe('TaskDialog Component', () => {
       expect(screen.getByText('O')).toBeInTheDocument();
     });
   });
+
+  describe('Testing Shortcuts', () => {
+    beforeEach(() => {
+      Element.prototype.scrollIntoView = jest.fn();
+    });
+
+    test('ArrowDown moves focus to next field', async () => {
+      render(<TaskDialog {...defaultProps} isOpen />);
+
+      const dialog = await screen.findByRole('dialog');
+
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+
+      // description → due
+      const dueRow = screen.getByText('Due:').closest('tr');
+      expect(dueRow).toHaveClass('bg-black/15');
+    });
+
+    test('Enter opens edit mode for focused field', async () => {
+      const editStateWithEditingOn = {
+        ...defaultProps.editState,
+        isEditing: true,
+        editedDescription: defaultProps.task.description,
+      };
+
+      render(
+        <TaskDialog
+          {...defaultProps}
+          isOpen
+          editState={editStateWithEditingOn}
+        />
+      );
+
+      await screen.findByRole('dialog');
+
+      const descriptionInput = screen.getByLabelText('description');
+      expect(descriptionInput).toBeInTheDocument();
+      expect(descriptionInput).toHaveAttribute('type', 'text');
+      expect(descriptionInput).toHaveValue(defaultProps.task.description);
+    });
+
+    test('Arrow keys do not navigate while editing', () => {
+      render(<TaskDialog {...defaultProps} isOpen />);
+
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+
+      const descriptionRow = screen.getByText('Description:').closest('tr');
+      expect(descriptionRow).toBeInTheDocument();
+    });
+
+    test('Escape exits edit mode before closing dialog', () => {
+      const editStateWithEditingOn = {
+        ...defaultProps.editState,
+        isEditing: true,
+        editedDescription: defaultProps.task.description,
+      };
+
+      render(
+        <TaskDialog
+          {...defaultProps}
+          isOpen
+          editState={editStateWithEditingOn}
+        />
+      );
+
+      const dialog = screen.getByRole('dialog');
+
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+      const descriptionInput = screen.getByLabelText('description');
+      expect(descriptionInput).toBeInTheDocument();
+
+      fireEvent.keyDown(dialog, { key: 'Escape' });
+
+      expect(dialog).toBeInTheDocument();
+    });
+
+    test('DateTimePicker is visible when any date field is in edit mode', async () => {
+      const editStateWithDueDateEditing = {
+        ...defaultProps.editState,
+        isEditingDueDate: true,
+        editedDueDate: defaultProps.task.due || '',
+      };
+
+      render(
+        <TaskDialog
+          {...defaultProps}
+          isOpen
+          editState={editStateWithDueDateEditing}
+        />
+      );
+
+      await screen.findByRole('dialog');
+
+      expect(
+        await screen.findByRole('button', { name: /calender-button/i })
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/UseTaskDialogFocusMap.test.ts b/frontend/src/components/HomeComponents/Tasks/__tests__/UseTaskDialogFocusMap.test.ts
new file mode 100644
index 00000000..714e71d2
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/UseTaskDialogFocusMap.test.ts
@@ -0,0 +1,53 @@
+import { act, renderHook } from '@testing-library/react';
+import { useTaskDialogFocusMap } from '../UseTaskDialogFocusMap';
+
+describe('UseTaskDialogFocusMap', () => {
+  test('focus is being called for any field with an element', () => {
+    const focus = jest.fn();
+    const click = jest.fn();
+
+    const inputrefs = {
+      current: {
+        description: { focus, click },
+      },
+    };
+
+    const { result } = renderHook(() =>
+      useTaskDialogFocusMap({
+        fields: ['description'],
+        inputRefs: inputrefs as any,
+      })
+    );
+
+    act(() => {
+      result.current('description');
+    });
+
+    expect(focus).toHaveBeenCalled();
+  });
+
+  test('click is being called for date field', () => {
+    const focus = jest.fn();
+    const click = jest.fn();
+
+    const inputrefs = {
+      current: {
+        due: { focus, click },
+      },
+    };
+
+    const { result } = renderHook(() =>
+      useTaskDialogFocusMap({
+        fields: ['due'],
+        inputRefs: inputrefs as any,
+      })
+    );
+
+    act(() => {
+      result.current('due');
+    });
+
+    expect(focus).toHaveBeenCalled();
+    expect(click).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/UseTaskDialogKeyboard.test.ts b/frontend/src/components/HomeComponents/Tasks/__tests__/UseTaskDialogKeyboard.test.ts
new file mode 100644
index 00000000..ebe023cb
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/UseTaskDialogKeyboard.test.ts
@@ -0,0 +1,128 @@
+import { act, renderHook } from '@testing-library/react';
+import { useTaskDialogKeyboard } from '../UseTaskDialogKeyboard';
+
+const FIELDS = ['Description', 'start', 'due'] as const;
+const setFocusedFieldIndex = jest.fn();
+const triggerEditForField = jest.fn();
+const stopEditing = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('UseTaskDialogKeyboard', () => {
+  test('ArrowDown increments focusFieldsIndex', () => {
+    const { result } = renderHook(() =>
+      useTaskDialogKeyboard({
+        fields: FIELDS,
+        focusedFieldIndex: 0,
+        setFocusedFieldIndex,
+        stopEditing,
+        isEditingAny: false,
+        triggerEditForField,
+      })
+    );
+
+    act(() => {
+      result.current({
+        key: 'ArrowDown',
+        preventDefault: jest.fn(),
+        target: document.body,
+      } as any);
+    });
+
+    expect(setFocusedFieldIndex).toHaveBeenCalled();
+  });
+
+  test('ArrowUp decrement focusFieldsIndex', () => {
+    const { result } = renderHook(() =>
+      useTaskDialogKeyboard({
+        fields: FIELDS,
+        focusedFieldIndex: 1,
+        setFocusedFieldIndex,
+        stopEditing,
+        isEditingAny: false,
+        triggerEditForField,
+      })
+    );
+
+    act(() => {
+      result.current({
+        key: 'ArrowUp',
+        preventDefault: jest.fn(),
+        target: document.body,
+      } as any);
+    });
+
+    expect(setFocusedFieldIndex).toHaveBeenCalled();
+  });
+
+  test('Enter key trigger edit for focusfield', () => {
+    const { result } = renderHook(() =>
+      useTaskDialogKeyboard({
+        fields: FIELDS,
+        focusedFieldIndex: 2,
+        setFocusedFieldIndex: jest.fn(),
+        stopEditing: jest.fn(),
+        isEditingAny: false,
+        triggerEditForField,
+      })
+    );
+
+    act(() => {
+      result.current({
+        key: 'Enter',
+        preventDefault: jest.fn(),
+        target: document.body,
+      } as any);
+    });
+
+    expect(triggerEditForField).toHaveBeenCalledWith('due');
+  });
+
+  test('Escape key exit editing mode', () => {
+    const { result } = renderHook(() =>
+      useTaskDialogKeyboard({
+        fields: FIELDS,
+        focusedFieldIndex: 1,
+        setFocusedFieldIndex: jest.fn(),
+        stopEditing,
+        isEditingAny: false,
+        triggerEditForField: jest.fn(),
+      })
+    );
+
+    act(() => {
+      result.current({
+        key: 'Escape',
+        preventDefault: jest.fn(),
+        target: document.body,
+      } as any);
+    });
+
+    expect(stopEditing).toHaveBeenCalled();
+  });
+
+  test('prevent navigating when editing', () => {
+    const { result } = renderHook(() =>
+      useTaskDialogKeyboard({
+        fields: FIELDS,
+        focusedFieldIndex: 0,
+        setFocusedFieldIndex,
+        stopEditing,
+        isEditingAny: true,
+        triggerEditForField,
+      })
+    );
+
+    act(() => {
+      result.current({
+        key: 'ArrowDown',
+        preventDefault: jest.fn(),
+        target: document.createElement('div'),
+      } as any);
+    });
+
+    expect(setFocusedFieldIndex).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/components/HomeComponents/Tasks/constants.ts b/frontend/src/components/HomeComponents/Tasks/constants.ts
new file mode 100644
index 00000000..15305563
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/constants.ts
@@ -0,0 +1,14 @@
+export const FIELDS = [
+  'description',
+  'due',
+  'start',
+  'end',
+  'wait',
+  'depends',
+  'priority',
+  'project',
+  'tags',
+  'entry',
+  'recur',
+  'annotations',
+] as const;
diff --git a/frontend/src/components/ui/date-picker.tsx b/frontend/src/components/ui/date-picker.tsx
index b6775576..05370685 100644
--- a/frontend/src/components/ui/date-picker.tsx
+++ b/frontend/src/components/ui/date-picker.tsx
@@ -8,6 +8,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
+import React from 'react';
 
 interface DatePickerProps {
   date: Date | undefined;
@@ -16,40 +17,41 @@ interface DatePickerProps {
   className?: string;
 }
 
-export function DatePicker({
-  date,
-  onDateChange,
-  placeholder = 'Pick a date',
-  className,
-}: DatePickerProps) {
-  return (
-    <Popover modal={true}>
-      <PopoverTrigger asChild>
-        <Button
-          variant={'outline'}
-          type="button"
-          className={cn(
-            'w-full justify-start text-left font-normal',
-            !date && 'text-muted-foreground',
-            className
-          )}
+export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+  function DatePicker(
+    { date, onDateChange, placeholder = 'Pick a date', className },
+    ref
+  ) {
+    return (
+      <Popover modal={true}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            variant={'outline'}
+            type="button"
+            className={cn(
+              'w-full justify-start text-left font-normal',
+              !date && 'text-muted-foreground',
+              className
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date ? format(date, 'PPP') : <span>{placeholder}</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0"
+          align="start"
+          onOpenAutoFocus={(e) => e.preventDefault()}
         >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, 'PPP') : <span>{placeholder}</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-auto p-0"
-        align="start"
-        onOpenAutoFocus={(e) => e.preventDefault()}
-      >
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={onDateChange}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={onDateChange}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+);
diff --git a/frontend/src/components/ui/date-time-picker.tsx b/frontend/src/components/ui/date-time-picker.tsx
index a4d830b1..0ee83ab1 100644
--- a/frontend/src/components/ui/date-time-picker.tsx
+++ b/frontend/src/components/ui/date-time-picker.tsx
@@ -19,12 +19,13 @@ interface DateTimePickerProps {
   className?: string;
 }
 
-export function DateTimePicker({
-  date,
-  onDateTimeChange,
-  placeholder = 'Pick a date',
-  className,
-}: DateTimePickerProps) {
+export const DateTimePicker = React.forwardRef<
+  HTMLButtonElement,
+  DateTimePickerProps
+>(function DatePicker(
+  { date, onDateTimeChange, placeholder = 'Pick a date', className },
+  ref
+) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [internalDate, setInternalDate] = React.useState<Date | undefined>(
     date
@@ -125,6 +126,8 @@ export function DateTimePicker({
     <Popover open={isOpen} onOpenChange={setIsOpen} modal={true}>
       <PopoverTrigger asChild>
         <Button
+          aria-label="calender-button"
+          ref={ref}
           variant="outline"
           className={cn(
             'w-full justify-start text-left font-normal',
@@ -223,4 +226,4 @@ export function DateTimePicker({
       </PopoverContent>
     </Popover>
   );
-}
+});
diff --git a/frontend/src/components/utils/types.ts b/frontend/src/components/utils/types.ts
index e10f761e..2a3cbb08 100644
--- a/frontend/src/components/utils/types.ts
+++ b/frontend/src/components/utils/types.ts
@@ -1,3 +1,5 @@
+import { FIELDS } from '../HomeComponents/Tasks/constants';
+
 export interface User {
   name: string;
   email: string;
@@ -158,3 +160,21 @@ export interface EditTaskDialogProps {
   isOverdue: (due?: string) => boolean;
   isUnsynced: boolean;
 }
+
+export interface UseTaskDialogKeyboardProps<F extends readonly string[]> {
+  fields: F;
+  focusedFieldIndex: number;
+  setFocusedFieldIndex: React.Dispatch<React.SetStateAction<number>>;
+  isEditingAny: boolean;
+  triggerEditForField: (field: F[number]) => void;
+  stopEditing: () => void;
+}
+
+export type FieldKey = (typeof FIELDS)[number];
+
+export type RefMap = Record<string, HTMLElement | null>;
+
+export interface UseTaskDialogFocusMapProps<F extends readonly string[]> {
+  fields: F;
+  inputRefs: React.MutableRefObject<RefMap>;
+}