diff --git a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
index 18ed7f7e..fec867c9 100644
--- a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DatePicker } from '@/components/ui/date-picker';
@@ -22,10 +22,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { AddTaskDialogProps } from '@/components/utils/types';
+import {
+  AddFieldKey,
+  AddTaskDialogProps,
+  FieldKey,
+} from '@/components/utils/types';
 import { format } from 'date-fns';
+import { ADDTASKDIALOG_FIELDS } from './constants';
+import { useAddTaskDialogKeyboard } from './UseTaskDialogKeyboard';
+import { useAddTaskDialogFocusMap } from './UseTaskDialogFocusMap';
 
 export const AddTaskdialog = ({
+  onOpenChange,
   isOpen,
   setIsOpen,
   newTask,
@@ -42,6 +50,60 @@ export const AddTaskdialog = ({
   const [dependencySearch, setDependencySearch] = useState('');
   const [showDependencyResults, setShowDependencyResults] = useState(false);
 
+  const inputRefs = useRef<
+    Partial<
+      Record<
+        FieldKey,
+        HTMLInputElement | HTMLButtonElement | HTMLSelectElement | null
+      >
+    >
+  >({});
+  const [focusedFieldIndex, setFocusedFieldIndex] = useState(0);
+
+  const focusedField = ADDTASKDIALOG_FIELDS[focusedFieldIndex];
+
+  const handleDialogOpenChange = (open: boolean) => {
+    onOpenChange?.(open);
+    setIsOpen(open);
+  };
+
+  useEffect(() => {
+    const element = inputRefs.current[focusedField];
+    if (!element) return;
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+    });
+  }, [focusedField]);
+
+  const focusMap = useAddTaskDialogFocusMap({
+    fields: ADDTASKDIALOG_FIELDS,
+    inputRefs: inputRefs as any,
+  });
+
+  useEffect(() => {
+    focusMap(focusedField);
+  }, [focusedField, focusMap]);
+
+  const closeDialog = () => setIsOpen(false);
+
+  const onEnter = (field: AddFieldKey) => {
+    const element = inputRefs.current[field];
+    if (!element) return;
+
+    element.focus();
+    element.click();
+  };
+
+  const handleDialogKeyDown = useAddTaskDialogKeyboard({
+    fields: ADDTASKDIALOG_FIELDS,
+    focusedFieldIndex,
+    setFocusedFieldIndex,
+    onEnter,
+    closeDialog,
+  });
+
   const getFilteredTasks = () => {
     const availableTasks = allTasks.filter(
       (task) =>
@@ -117,9 +179,10 @@ export const AddTaskdialog = ({
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={isOpen} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>
         <Button
+          type="button"
           id="add-new-task"
           variant="outline"
           onClick={() => setIsOpen(true)}
@@ -128,7 +191,7 @@ export const AddTaskdialog = ({
           <Key label="a" />
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent tabIndex={0} onKeyDown={handleDialogKeyDown}>
         <DialogHeader>
           <DialogTitle>
             <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
@@ -142,295 +205,342 @@ export const AddTaskdialog = ({
             Fill in the details below to add a new task.
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4 h-96  overflow-auto p-4">
-          <div className="grid grid-cols-8 items-center gap-4">
-            <Label htmlFor="description" className="text-right col-span-2">
-              Description
-            </Label>
-            <div className="col-span-6">
-              <Input
-                id="description"
-                name="description"
-                type="text"
-                value={newTask.description}
-                onChange={(e) =>
-                  setNewTask({
-                    ...newTask,
-                    description: e.target.value,
-                  })
-                }
-                required
-                className="col-span-6"
-              />
+        <div className="h-96 overflow-auto p-2">
+          <div className="flex flex-col items-start justify-start">
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'description' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+            >
+              <Label htmlFor="description" className="text-left col-span-1">
+                Description
+              </Label>
+              <div className="col-span-3">
+                <Input
+                  ref={(element) => (inputRefs.current.description = element)}
+                  id="description"
+                  name="description"
+                  type="text"
+                  value={newTask.description}
+                  onChange={(e) =>
+                    setNewTask({
+                      ...newTask,
+                      description: e.target.value,
+                    })
+                  }
+                  required
+                  className="col-span-6"
+                />
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="priority" className="text-right">
-              Priority
-            </Label>
-            <div className="col-span-1 flex items-center">
-              <select
-                id="priority"
-                name="priority"
-                value={newTask.priority}
-                onChange={(e) =>
-                  setNewTask({
-                    ...newTask,
-                    priority: e.target.value,
-                  })
-                }
-                className="border rounded-md px-2 py-1 w-full bg-white text-black dark:bg-black dark:text-white transition-colors"
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'priority' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label
+                htmlFor="priority"
+                className="col-span-1 text-left w-[75px]"
               >
-                <option value="H">H</option>
-                <option value="M">M</option>
-                <option value="L">L</option>
-              </select>
+                Priority
+              </Label>
+              <div className="col-span-1 flex items-center">
+                <select
+                  ref={(element) => (inputRefs.current.priority = element)}
+                  id="priority"
+                  name="priority"
+                  value={newTask.priority}
+                  onChange={(e) =>
+                    setNewTask({
+                      ...newTask,
+                      priority: e.target.value,
+                    })
+                  }
+                  className="border rounded-md px-2 py-1 w-full bg-white text-black dark:bg-black dark:text-white transition-colors"
+                >
+                  <option value="H">H</option>
+                  <option value="M">M</option>
+                  <option value="L">L</option>
+                </select>
+              </div>
             </div>
-          </div>
 
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="project" className="text-right">
-              Project
-            </Label>
-            <div className="col-span-3 space-y-2">
-              <Select
-                value={
-                  isCreatingNewProject ? '__CREATE_NEW__' : newTask.project
-                }
-                onValueChange={(value) => {
-                  if (value === '__CREATE_NEW__') {
-                    setIsCreatingNewProject(true);
-                    setNewTask({ ...newTask, project: '' });
-                  } else if (value === '__NONE__') {
-                    setIsCreatingNewProject(false);
-                    setNewTask({ ...newTask, project: '' });
-                  } else {
-                    setIsCreatingNewProject(false);
-                    setNewTask({ ...newTask, project: value });
-                  }
-                }}
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'project' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+            >
+              <Label
+                htmlFor="project"
+                className="text-left col-span-1 w-[77px]"
               >
-                <SelectTrigger id="project" data-testid="project-select">
-                  <SelectValue
-                    placeholder={
-                      uniqueProjects.length
-                        ? 'Select a project'
-                        : 'No projects yet'
+                Project
+              </Label>
+              <div className="col-span-3 space-y-2">
+                <Select
+                  value={
+                    isCreatingNewProject ? '__CREATE_NEW__' : newTask.project
+                  }
+                  onValueChange={(value) => {
+                    if (value === '__CREATE_NEW__') {
+                      setIsCreatingNewProject(true);
+                      setNewTask({ ...newTask, project: '' });
+                    } else if (value === '__NONE__') {
+                      setIsCreatingNewProject(false);
+                      setNewTask({ ...newTask, project: '' });
+                    } else {
+                      setIsCreatingNewProject(false);
+                      setNewTask({ ...newTask, project: value });
                     }
-                  >
-                    {isCreatingNewProject
-                      ? newTask.project
-                        ? `New: ${newTask.project}`
-                        : '+ Create new project…'
-                      : undefined}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent
-                  onWheel={(e) => e.stopPropagation()}
-                  className="max-h-60 overflow-y-auto"
+                  }}
                 >
-                  <SelectItem value="__CREATE_NEW__">
-                    + Create new project…
-                  </SelectItem>
-                  <SelectItem value="__NONE__">No project</SelectItem>
-                  {uniqueProjects.map((project: string) => (
-                    <SelectItem key={project} value={project}>
-                      {project}
+                  <SelectTrigger
+                    onKeyDown={(e) => {
+                      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                      }
+                      if (e.key === 'Enter') {
+                        (e.currentTarget as HTMLButtonElement).click();
+                      }
+                    }}
+                    ref={(element) => (inputRefs.current.project = element)}
+                    id="project"
+                    data-testid="project-select"
+                  >
+                    <SelectValue
+                      placeholder={
+                        uniqueProjects.length
+                          ? 'Select a project'
+                          : 'No projects yet'
+                      }
+                    >
+                      {isCreatingNewProject
+                        ? newTask.project
+                          ? `New: ${newTask.project}`
+                          : '+ Create new project…'
+                        : undefined}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent
+                    onWheel={(e) => e.stopPropagation()}
+                    className="max-h-60 overflow-y-auto"
+                  >
+                    <SelectItem value="__CREATE_NEW__">
+                      + Create new project…
                     </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                    <SelectItem value="__NONE__">No project</SelectItem>
+                    {uniqueProjects.map((project: string) => (
+                      <SelectItem key={project} value={project}>
+                        {project}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
 
-              {isCreatingNewProject && (
-                <Input
-                  id="project-name"
-                  placeholder="New project name"
-                  value={newTask.project}
-                  autoFocus
-                  onChange={(e) =>
-                    setNewTask({ ...newTask, project: e.target.value })
+                {isCreatingNewProject && (
+                  <Input
+                    id="project-name"
+                    placeholder="New project name"
+                    value={newTask.project}
+                    autoFocus
+                    onChange={(e) =>
+                      setNewTask({ ...newTask, project: e.target.value })
+                    }
+                  />
+                )}
+              </div>
+            </div>
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'due' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label htmlFor="due" className="text-left w-[77px] col-span-1">
+                Due
+              </Label>
+              <div className="col-span-3">
+                <DateTimePicker
+                  ref={(element) => (inputRefs.current.due = element)}
+                  date={
+                    newTask.due
+                      ? new Date(
+                          newTask.due.includes('T')
+                            ? newTask.due
+                            : `${newTask.due}T00:00:00`
+                        )
+                      : undefined
                   }
+                  onDateTimeChange={(date, hasTime) => {
+                    setNewTask({
+                      ...newTask,
+                      due: date
+                        ? hasTime
+                          ? date.toISOString()
+                          : format(date, 'yyyy-MM-dd')
+                        : '',
+                    });
+                  }}
+                  placeholder="Select due date and time"
                 />
-              )}
-            </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="due" className="text-right">
-              Due
-            </Label>
-            <div className="col-span-3">
-              <DateTimePicker
-                date={
-                  newTask.due
-                    ? new Date(
-                        newTask.due.includes('T')
-                          ? newTask.due
-                          : `${newTask.due}T00:00:00`
-                      )
-                    : undefined
-                }
-                onDateTimeChange={(date, hasTime) => {
-                  setNewTask({
-                    ...newTask,
-                    due: date
-                      ? hasTime
-                        ? date.toISOString()
-                        : format(date, 'yyyy-MM-dd')
-                      : '',
-                  });
-                }}
-                placeholder="Select due date and time"
-              />
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="start" className="text-right">
-              Start
-            </Label>
-            <div className="col-span-3">
-              <DateTimePicker
-                date={
-                  newTask.start
-                    ? new Date(
-                        newTask.start.includes('T')
-                          ? newTask.start
-                          : `${newTask.start}T00:00:00`
-                      )
-                    : undefined
-                }
-                onDateTimeChange={(date, hasTime) => {
-                  setNewTask({
-                    ...newTask,
-                    start: date
-                      ? hasTime
-                        ? date.toISOString()
-                        : format(date, 'yyyy-MM-dd')
-                      : '',
-                  });
-                }}
-                placeholder="Select start date and time"
-              />
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'start' ? 'dark:bg-muted/50 bg-black/15' : ''}`}
+            >
+              <Label htmlFor="start" className="text-left col-span-1 w-[77px]">
+                Start
+              </Label>
+              <div className="col-span-3">
+                <DateTimePicker
+                  ref={(element) => (inputRefs.current.start = element)}
+                  date={
+                    newTask.start
+                      ? new Date(
+                          newTask.start.includes('T')
+                            ? newTask.start
+                            : `${newTask.start}T00:00:00`
+                        )
+                      : undefined
+                  }
+                  onDateTimeChange={(date, hasTime) => {
+                    setNewTask({
+                      ...newTask,
+                      start: date
+                        ? hasTime
+                          ? date.toISOString()
+                          : format(date, 'yyyy-MM-dd')
+                        : '',
+                    });
+                  }}
+                  placeholder="Select start date and time"
+                />
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="end" className="text-right">
-              End
-            </Label>
-            <div className="col-span-3">
-              <DatePicker
-                date={newTask.end ? new Date(newTask.end) : undefined}
-                onDateChange={(date) => {
-                  setNewTask({
-                    ...newTask,
-                    end: date ? format(date, 'yyyy-MM-dd') : '',
-                  });
-                }}
-                placeholder="Select an end date"
-              />
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'end' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label htmlFor="end" className="text-left col-span-1 w-[77px]">
+                End
+              </Label>
+              <div className="col-span-3">
+                <DatePicker
+                  ref={(element) => (inputRefs.current.end = element)}
+                  date={newTask.end ? new Date(newTask.end) : undefined}
+                  onDateChange={(date) => {
+                    setNewTask({
+                      ...newTask,
+                      end: date ? format(date, 'yyyy-MM-dd') : '',
+                    });
+                  }}
+                  placeholder="Select an end date"
+                />
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="entry" className="text-right">
-              Entry
-            </Label>
-            <div className="col-span-3">
-              <DateTimePicker
-                date={
-                  newTask.entry
-                    ? new Date(
-                        newTask.entry.includes('T')
-                          ? newTask.entry
-                          : `${newTask.entry}T00:00:00`
-                      )
-                    : undefined
-                }
-                onDateTimeChange={(date, hasTime) => {
-                  setNewTask({
-                    ...newTask,
-                    entry: date
-                      ? hasTime
-                        ? date.toISOString()
-                        : format(date, 'yyyy-MM-dd')
-                      : '',
-                  });
-                }}
-                placeholder="Select entry date and time"
-              />
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'entry' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label htmlFor="entry" className="text-left col-span-1 w-[77px]">
+                Entry
+              </Label>
+              <div className="col-span-3">
+                <DateTimePicker
+                  ref={(element) => (inputRefs.current.entry = element)}
+                  date={
+                    newTask.entry
+                      ? new Date(
+                          newTask.entry.includes('T')
+                            ? newTask.entry
+                            : `${newTask.entry}T00:00:00`
+                        )
+                      : undefined
+                  }
+                  onDateTimeChange={(date, hasTime) => {
+                    setNewTask({
+                      ...newTask,
+                      entry: date
+                        ? hasTime
+                          ? date.toISOString()
+                          : format(date, 'yyyy-MM-dd')
+                        : '',
+                    });
+                  }}
+                  placeholder="Select entry date and time"
+                />
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="wait" className="text-right">
-              Wait
-            </Label>
-            <div className="col-span-3">
-              <DateTimePicker
-                date={
-                  newTask.wait
-                    ? new Date(
-                        newTask.wait.includes('T')
-                          ? newTask.wait
-                          : `${newTask.wait}T00:00:00`
-                      )
-                    : undefined
-                }
-                onDateTimeChange={(date, hasTime) => {
-                  setNewTask({
-                    ...newTask,
-                    wait: date
-                      ? hasTime
-                        ? date.toISOString()
-                        : format(date, 'yyyy-MM-dd')
-                      : '',
-                  });
-                }}
-                placeholder="Select wait date and time"
-              />
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'wait' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label htmlFor="wait" className="text-left col-span-1 w-[77px]">
+                Wait
+              </Label>
+              <div className="col-span-3">
+                <DateTimePicker
+                  ref={(element) => (inputRefs.current.wait = element)}
+                  date={
+                    newTask.wait
+                      ? new Date(
+                          newTask.wait.includes('T')
+                            ? newTask.wait
+                            : `${newTask.wait}T00:00:00`
+                        )
+                      : undefined
+                  }
+                  onDateTimeChange={(date, hasTime) => {
+                    setNewTask({
+                      ...newTask,
+                      wait: date
+                        ? hasTime
+                          ? date.toISOString()
+                          : format(date, 'yyyy-MM-dd')
+                        : '',
+                    });
+                  }}
+                  placeholder="Select wait date and time"
+                />
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="recur" className="text-right">
-              Recur
-            </Label>
-            <div className="col-span-1 flex items-center">
-              <select
-                id="recur"
-                name="recur"
-                value={newTask.recur}
-                onChange={(e) =>
-                  setNewTask({
-                    ...newTask,
-                    recur: e.target.value,
-                  })
-                }
-                className="border rounded-md px-2 py-1 w-full bg-white text-black dark:bg-black dark:text-white transition-colors"
-              >
-                <option value="">None</option>
-                <option value="daily">Daily</option>
-                <option value="weekly">Weekly</option>
-                <option value="monthly">Monthly</option>
-                <option value="yearly">Yearly</option>
-              </select>
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'recur' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label htmlFor="recur" className="text-left col-span-1 w-[77px]">
+                Recur
+              </Label>
+              <div className="col-span-3 flex items-start">
+                <select
+                  ref={(element) => (inputRefs.current.recur = element)}
+                  id="recur"
+                  name="recur"
+                  value={newTask.recur}
+                  onChange={(e) =>
+                    setNewTask({
+                      ...newTask,
+                      recur: e.target.value,
+                    })
+                  }
+                  className="border rounded-md px-2 py-1 w-full bg-white text-black dark:bg-black dark:text-white transition-colors"
+                >
+                  <option value="">None</option>
+                  <option value="daily">Daily</option>
+                  <option value="weekly">Weekly</option>
+                  <option value="monthly">Monthly</option>
+                  <option value="yearly">Yearly</option>
+                </select>
+              </div>
             </div>
-          </div>
-          <div className="grid grid-cols-8 items-center gap-4">
-            <Label htmlFor="tags" className="text-right col-span-2">
-              Tags
-            </Label>
-            <div className="col-span-6">
-              <Input
-                id="tags"
-                name="tags"
-                placeholder="Add a tag"
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
-                required
-                className="col-span-6"
-              />
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'tags' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label htmlFor="tags" className="text-left col-spa w-[77px]">
+                Tags
+              </Label>
+              <div className="col-span-3">
+                <Input
+                  ref={(element) => (inputRefs.current.tags = element)}
+                  id="tags"
+                  name="tags"
+                  placeholder="Add a tag"
+                  value={tagInput}
+                  onChange={(e) => setTagInput(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
+                  required
+                  className="col-span-6"
+                />
+              </div>
             </div>
-          </div>
 
-          <div className="mt-2">
             {newTask.tags.length > 0 && (
               <div className="grid grid-cols-4 items-center">
                 <div> </div>
@@ -450,25 +560,30 @@ export const AddTaskdialog = ({
                 </div>
               </div>
             )}
-          </div>
-          <div className="grid grid-cols-8 items-center gap-4">
-            <Label htmlFor="annotations" className="text-right col-span-2">
-              Annotation
-            </Label>
-            <div className="col-span-6">
-              <Input
-                id="annotations"
-                name="annotations"
-                placeholder="Add an annotation"
-                value={annotationInput}
-                onChange={(e) => setAnnotationInput(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleAddAnnotation()}
-                className="col-span-6"
-              />
+
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'annotations' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label
+                htmlFor="annotations"
+                className="text-left col-span-1 w-[77px]"
+              >
+                Annotation
+              </Label>
+              <div className="col-span-3">
+                <Input
+                  ref={(element) => (inputRefs.current.annotations = element)}
+                  id="annotations"
+                  name="annotations"
+                  placeholder="Add an annotation"
+                  value={annotationInput}
+                  onChange={(e) => setAnnotationInput(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleAddAnnotation()}
+                  className="col-span-3"
+                />
+              </div>
             </div>
-          </div>
 
-          <div className="mt-2">
             {newTask.annotations.length > 0 && (
               <div className="grid grid-cols-4 items-center">
                 <div> </div>
@@ -489,115 +604,122 @@ export const AddTaskdialog = ({
                 </div>
               </div>
             )}
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="depends" className="text-right">
-              Depends On
-            </Label>
-            <div className="col-span-3 space-y-2 relative">
-              {/* Search input */}
-              <Input
-                placeholder="Search and select tasks this depends on..."
-                value={dependencySearch}
-                onChange={(e) => {
-                  setDependencySearch(e.target.value);
-                  setShowDependencyResults(e.target.value.trim() !== '');
-                }}
-                onFocus={() =>
-                  setShowDependencyResults(dependencySearch.trim() !== '')
-                }
-              />
 
-              {/* Search results dropdown */}
-              {showDependencyResults && (
-                <div className="absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-y-auto">
-                  {(() => {
-                    const filteredTasks = getFilteredTasks();
+            <div
+              className={`grid grid-cols-4 items-center gap-4 border-b py-6 px-2 w-full ${focusedField === 'depends' ? 'dark:bg-muted/50 bg-black/15' : ''} `}
+            >
+              <Label
+                htmlFor="depends"
+                className="text-left col-span-1 w-[87px]"
+              >
+                Depends On
+              </Label>
+              <div className="col-span-3 space-y-2 relative">
+                {/* Search input */}
+                <Input
+                  ref={(element) => (inputRefs.current.depends = element)}
+                  placeholder="Search and select tasks this depends on..."
+                  value={dependencySearch}
+                  onChange={(e) => {
+                    setDependencySearch(e.target.value);
+                    setShowDependencyResults(e.target.value.trim() !== '');
+                  }}
+                  onFocus={() =>
+                    setShowDependencyResults(dependencySearch.trim() !== '')
+                  }
+                />
 
-                    if (filteredTasks.length === 0) {
-                      return (
-                        <div className="p-3 text-sm text-muted-foreground text-center">
-                          No tasks found matching your search
-                        </div>
-                      );
-                    }
+                {/* Search results dropdown */}
+                {showDependencyResults && (
+                  <div className="absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-y-auto">
+                    {(() => {
+                      const filteredTasks = getFilteredTasks();
 
-                    return filteredTasks.map((task) => (
-                      <div
-                        key={task.uuid}
-                        className="p-3 cursor-pointer hover:bg-accent transition-colors"
-                        onMouseDown={(e) => {
-                          e.preventDefault(); // prevents blur
-                          setNewTask({
-                            ...newTask,
-                            depends: [...newTask.depends, task.uuid],
-                          });
-                          setDependencySearch('');
-                          setShowDependencyResults(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2 w-full min-w-0">
-                          <span className="font-medium text-xs shrink-0 text-muted-foreground">
-                            #{task.id}
-                          </span>
-                          <span className="truncate flex-1 text-sm">
-                            {task.description}
-                          </span>
-                          {task.project && (
-                            <Badge
-                              variant="secondary"
-                              className="text-xs px-1 py-0 shrink-0"
-                            >
-                              {task.project}
-                            </Badge>
-                          )}
-                        </div>
-                      </div>
-                    ));
-                  })()}
-                </div>
-              )}
+                      if (filteredTasks.length === 0) {
+                        return (
+                          <div className="p-3 text-sm text-muted-foreground text-center">
+                            No tasks found matching your search
+                          </div>
+                        );
+                      }
 
-              {/* Display selected dependencies */}
-              {newTask.depends.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {newTask.depends.map((taskUuid) => {
-                    const dependentTask = allTasks.find(
-                      (t) => t.uuid === taskUuid
-                    );
-                    return (
-                      <Badge
-                        key={taskUuid}
-                        variant="secondary"
-                        className="flex items-center gap-1"
-                      >
-                        <span>
-                          #{dependentTask?.id || '?'}{' '}
-                          {dependentTask?.description?.substring(0, 20) ||
-                            taskUuid.substring(0, 8)}
-                          {dependentTask?.description &&
-                            dependentTask.description.length > 20 &&
-                            '...'}
-                        </span>
-                        <button
-                          type="button"
-                          className="ml-1 text-red-500 hover:text-red-700"
-                          onClick={() => {
+                      return filteredTasks.map((task) => (
+                        <div
+                          key={task.uuid}
+                          className="p-3 cursor-pointer hover:bg-accent transition-colors"
+                          onMouseDown={(e) => {
+                            e.preventDefault(); // prevents blur
                             setNewTask({
                               ...newTask,
-                              depends: newTask.depends.filter(
-                                (d) => d !== taskUuid
-                              ),
+                              depends: [...newTask.depends, task.uuid],
                             });
+                            setDependencySearch('');
+                            setShowDependencyResults(false);
                           }}
                         >
-                          ✖
-                        </button>
-                      </Badge>
-                    );
-                  })}
-                </div>
-              )}
+                          <div className="flex items-center gap-2 w-full min-w-0">
+                            <span className="font-medium text-xs shrink-0 text-muted-foreground">
+                              #{task.id}
+                            </span>
+                            <span className="truncate flex-1 text-sm">
+                              {task.description}
+                            </span>
+                            {task.project && (
+                              <Badge
+                                variant="secondary"
+                                className="text-xs px-1 py-0 shrink-0"
+                              >
+                                {task.project}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                )}
+
+                {/* Display selected dependencies */}
+                {newTask.depends.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {newTask.depends.map((taskUuid) => {
+                      const dependentTask = allTasks.find(
+                        (t) => t.uuid === taskUuid
+                      );
+                      return (
+                        <Badge
+                          key={taskUuid}
+                          variant="secondary"
+                          className="flex items-center gap-1"
+                        >
+                          <span>
+                            #{dependentTask?.id || '?'}{' '}
+                            {dependentTask?.description?.substring(0, 20) ||
+                              taskUuid.substring(0, 8)}
+                            {dependentTask?.description &&
+                              dependentTask.description.length > 20 &&
+                              '...'}
+                          </span>
+                          <button
+                            type="button"
+                            className="ml-1 text-red-500 hover:text-red-700"
+                            onClick={() => {
+                              setNewTask({
+                                ...newTask,
+                                depends: newTask.depends.filter(
+                                  (d) => d !== taskUuid
+                                ),
+                              });
+                            }}
+                          >
+                            ✖
+                          </button>
+                        </Badge>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
index 2c2be1e6..8c46fe17 100644
--- a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
@@ -38,7 +38,7 @@ 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 { EDITTASKDIALOG_FIELDS } from './constants';
 import { useTaskDialogFocusMap } from './UseTaskDialogFocusMap';
 
 export const TaskDialog = ({
@@ -97,7 +97,7 @@ export const TaskDialog = ({
     editState.isEditingRecur ||
     editState.isEditingAnnotations;
 
-  const focusedField = FIELDS[focusedFieldIndex];
+  const focusedField = EDITTASKDIALOG_FIELDS[focusedFieldIndex];
 
   const stopEditing = () => {
     onUpdateState({
@@ -145,12 +145,12 @@ export const TaskDialog = ({
   ]);
 
   const focusMap = useTaskDialogFocusMap({
-    fields: FIELDS,
+    fields: EDITTASKDIALOG_FIELDS,
     inputRefs: inputRefs,
   });
 
   const handleDialogKeyDown = useTaskDialogKeyboard({
-    fields: FIELDS,
+    fields: EDITTASKDIALOG_FIELDS,
     focusedFieldIndex: focusedFieldIndex,
     setFocusedFieldIndex: setFocusedFieldIndex,
     isEditingAny: isEditingAny,
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 78a3f940..4463de8e 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -1119,6 +1119,7 @@ export const Tasks = (
                     />
                     <div className="flex justify-center">
                       <AddTaskdialog
+                        onOpenChange={handleDialogOpenChange}
                         isOpen={isAddTaskOpen}
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
@@ -1429,6 +1430,7 @@ export const Tasks = (
                   <div className="flex items-center justify-left">
                     <div className="pr-2">
                       <AddTaskdialog
+                        onOpenChange={handleDialogOpenChange}
                         isOpen={isAddTaskOpen}
                         setIsOpen={setIsAddTaskOpen}
                         newTask={newTask}
diff --git a/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx
index a08f8c2c..c400692b 100644
--- a/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogFocusMap.tsx
@@ -25,3 +25,18 @@ export function useTaskDialogFocusMap<F extends readonly string[]>({
     [fields, inputRefs]
   );
 }
+
+export function useAddTaskDialogFocusMap<F extends readonly string[]>({
+  fields,
+  inputRefs,
+}: UseTaskDialogFocusMapProps<F>) {
+  return React.useCallback(
+    (field: F[number]) => {
+      const element = inputRefs.current[field];
+      if (!element) return;
+
+      element.focus();
+    },
+    [fields, inputRefs]
+  );
+}
diff --git a/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx
index 7c5d027f..af8c8b94 100644
--- a/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/UseTaskDialogKeyboard.tsx
@@ -1,4 +1,7 @@
-import { UseTaskDialogKeyboardProps } from '@/components/utils/types';
+import {
+  AddTaskProps,
+  UseTaskDialogKeyboardProps,
+} from '@/components/utils/types';
 import React from 'react';
 
 export function useTaskDialogKeyboard<F extends readonly string[]>({
@@ -55,3 +58,49 @@ export function useTaskDialogKeyboard<F extends readonly string[]>({
     ]
   );
 }
+
+export function useAddTaskDialogKeyboard<F extends readonly string[]>({
+  fields,
+  focusedFieldIndex,
+  setFocusedFieldIndex,
+  onEnter,
+  closeDialog,
+}: AddTaskProps<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 && (e.key === 'Enter' || e.key === 'Escape')) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setFocusedFieldIndex((i) => Math.min(i + 1, fields.length - 1));
+          break;
+
+        case 'ArrowUp':
+          e.preventDefault();
+          setFocusedFieldIndex((i) => Math.max(i - 1, 0));
+          break;
+
+        case 'Enter':
+          e.preventDefault();
+          e.stopPropagation();
+          const field = fields[focusedFieldIndex];
+          onEnter(field);
+          break;
+
+        case 'Escape':
+          e.preventDefault();
+          closeDialog();
+          break;
+      }
+    },
+    [fields, focusedFieldIndex, setFocusedFieldIndex, onEnter, closeDialog]
+  );
+}
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
index 51d11ab6..4c97f6da 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
@@ -927,4 +927,57 @@ describe('AddTaskDialog Component', () => {
       });
     });
   });
+
+  describe('Testing Shortcuts', () => {
+    beforeEach(() => {
+      Element.prototype.scrollIntoView = jest.fn();
+    });
+
+    test('ArrowDown moves focus to next field', async () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = await screen.findByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+
+      const prioritySelect = screen.getByLabelText(/priority/i);
+      const priorityRow = prioritySelect.closest('div.grid');
+      expect(priorityRow).toHaveClass('bg-black/15');
+    });
+
+    test('Enter focuses priority select when priority row is focused', async () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = await screen.findByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+
+      const prioritySelect = screen.getByLabelText(/priority/i);
+      expect(prioritySelect).toHaveFocus();
+    });
+
+    test('Arrow keys do navigate while editing', () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = screen.getByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+
+      const descriptionRow = screen.getByText(/priority/i);
+      expect(descriptionRow).toBeInTheDocument();
+    });
+
+    test('DateTimePicker is visible when any date field is in edit mode', async () => {
+      render(<AddTaskdialog {...mockProps} isOpen />);
+
+      const dialog = screen.getByRole('dialog');
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'ArrowDown' });
+      fireEvent.keyDown(dialog, { key: 'Enter' });
+
+      expect(
+        screen.getByPlaceholderText('Select due date and time')
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index 36886824..83436dc0 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -225,11 +225,7 @@ describe('Tasks Component', () => {
 
       render(<Tasks {...mockProps} />);
 
-      await waitFor(async () => {
-        expect(await screen.findByText('Task 1')).toBeInTheDocument();
-      });
-
-      expect(screen.getByLabelText('Show:')).toHaveValue('20');
+      expect(await screen.findByLabelText('Show:')).toHaveValue('20');
     });
 
     test('updates pagination when "Tasks per Page" is changed', async () => {
diff --git a/frontend/src/components/HomeComponents/Tasks/constants.ts b/frontend/src/components/HomeComponents/Tasks/constants.ts
index 15305563..d03eeb0c 100644
--- a/frontend/src/components/HomeComponents/Tasks/constants.ts
+++ b/frontend/src/components/HomeComponents/Tasks/constants.ts
@@ -1,4 +1,4 @@
-export const FIELDS = [
+export const EDITTASKDIALOG_FIELDS = [
   'description',
   'due',
   'start',
@@ -12,3 +12,18 @@ export const FIELDS = [
   'recur',
   'annotations',
 ] as const;
+
+export const ADDTASKDIALOG_FIELDS = [
+  'description',
+  'priority',
+  'project',
+  'due',
+  'start',
+  'end',
+  'entry',
+  'wait',
+  'recur',
+  'tags',
+  'annotations',
+  'depends',
+] as const;
diff --git a/frontend/src/components/utils/types.ts b/frontend/src/components/utils/types.ts
index 54d4482b..d7279701 100644
--- a/frontend/src/components/utils/types.ts
+++ b/frontend/src/components/utils/types.ts
@@ -1,4 +1,7 @@
-import { FIELDS } from '../HomeComponents/Tasks/constants';
+import {
+  ADDTASKDIALOG_FIELDS,
+  EDITTASKDIALOG_FIELDS,
+} from '../HomeComponents/Tasks/constants';
 
 export interface User {
   name: string;
@@ -115,6 +118,7 @@ export interface TaskFormData {
 }
 
 export interface AddTaskDialogProps {
+  onOpenChange: (open: boolean) => void;
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
   newTask: TaskFormData;
@@ -172,7 +176,17 @@ export interface UseTaskDialogKeyboardProps<F extends readonly string[]> {
   stopEditing: () => void;
 }
 
-export type FieldKey = (typeof FIELDS)[number];
+export type AddTaskProps<F extends readonly string[]> = {
+  fields: F;
+  focusedFieldIndex: number;
+  setFocusedFieldIndex: React.Dispatch<React.SetStateAction<number>>;
+  onEnter: (field: F[number]) => void;
+  closeDialog: () => void;
+};
+
+export type AddFieldKey = (typeof ADDTASKDIALOG_FIELDS)[number];
+
+export type FieldKey = (typeof EDITTASKDIALOG_FIELDS)[number];
 
 export type RefMap = Record<string, HTMLElement | null>;