diff --git a/src/components/forms/date-picker-select.tsx b/src/components/forms/date-picker-select.tsx
index 6c84088..18fedd8 100644
--- a/src/components/forms/date-picker-select.tsx
+++ b/src/components/forms/date-picker-select.tsx
@@ -10,6 +10,7 @@ type DatePickerSelectProps = {
   value: Date | undefined
   isDateDisabled?: (date: Date) => boolean
   onChange: (date: Date | undefined) => void
+  disabled: boolean
 }
 
 export const DatePickerSelect = ({
@@ -17,6 +18,7 @@ export const DatePickerSelect = ({
   value,
   onChange,
   isDateDisabled,
+  disabled,
 }: DatePickerSelectProps) => {
   const [open, setOpen] = React.useState(false)
 
@@ -28,6 +30,7 @@ export const DatePickerSelect = ({
           variant="outline"
           data-selected={value ? 'true' : 'false'}
           className="w-full justify-between font-normal data-[selected=false]:text-gray-500"
+          disabled={disabled}
         >
           {value ? value.toLocaleDateString() : 'Select date'}
           <ChevronDownIcon />
@@ -39,6 +42,7 @@ export const DatePickerSelect = ({
           selected={value}
           captionLayout="dropdown"
           isDateDisabled={isDateDisabled}
+          disabled={disabled}
           onSelect={(date) => {
             onChange(date)
             setOpen(false)
diff --git a/src/components/todos/create-edit-todo-dialog.tsx b/src/components/todos/create-edit-todo-dialog.tsx
deleted file mode 100644
index 1ab739c..0000000
--- a/src/components/todos/create-edit-todo-dialog.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { CreateEditTodoForm, TTodoFormData } from '@/components/todos/create-edit-todo-form'
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import { type ReactNode } from 'react'
-
-type BaseProps = {
-  open: boolean
-  children: ReactNode
-  isMutationPending?: boolean
-  onSubmit: (data: TTodoFormData) => void
-  onOpenChange: (open: boolean) => void
-}
-
-type CreateModeProps = BaseProps & {
-  mode: 'create'
-  defaultData?: Partial<TTodoFormData>
-}
-
-type EditModeProps = BaseProps & {
-  mode: 'edit'
-  defaultData: Partial<TTodoFormData>
-}
-
-type CreateEditTodoDialogProps = CreateModeProps | EditModeProps
-
-export const CreateEditTodoDialog = ({
-  mode,
-  open,
-  children,
-  onSubmit,
-  defaultData,
-  onOpenChange,
-  isMutationPending,
-}: CreateEditTodoDialogProps) => {
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-
-      <AlertDialogContent>
-        <AlertDialogHeader className="">
-          <AlertDialogTitle className="h-max text-xl">
-            {mode === 'create' ? 'Create Todo' : 'Edit Todo'}
-          </AlertDialogTitle>
-        </AlertDialogHeader>
-
-        <CreateEditTodoForm
-          mode={mode}
-          onSubmit={onSubmit}
-          initialData={defaultData}
-          isSubmitting={isMutationPending}
-          onCancel={() => onOpenChange(false)}
-        />
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}
diff --git a/src/components/todos/create-todo-button.tsx b/src/components/todos/create-todo-button.tsx
index b5ea777..c00e69a 100644
--- a/src/components/todos/create-todo-button.tsx
+++ b/src/components/todos/create-todo-button.tsx
@@ -1,13 +1,13 @@
 import { USER_TYPE_ENUM } from '@/api/common/common-enum'
 import { TasksApi } from '@/api/tasks/tasks.api'
 import { TeamsApi } from '@/api/teams/teams.api'
-import { CreateEditTodoDialog } from '@/components/todos/create-edit-todo-dialog'
+import { TodoDialog } from '@/components/todos/todo-dialog'
 import { Button } from '@/components/ui/button'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { PlusIcon } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
-import { TTodoFormData } from './create-edit-todo-form'
+import { TTodoFormData } from './todo-form'
 
 type Props = {
   defaultData?: Partial<TTodoFormData>
@@ -47,7 +47,7 @@ export const CreateTodoButton = ({ defaultData, teamId }: Props) => {
   })
 
   return (
-    <CreateEditTodoDialog
+    <TodoDialog
       mode="create"
       defaultData={defaultData}
       open={showCreateTaskForm}
@@ -72,6 +72,6 @@ export const CreateTodoButton = ({ defaultData, teamId }: Props) => {
         <PlusIcon className="mr-1 h-4 w-4" />
         Create Todo
       </Button>
-    </CreateEditTodoDialog>
+    </TodoDialog>
   )
 }
diff --git a/src/components/todos/deferred-task-button.tsx b/src/components/todos/deferred-task-button.tsx
index 8ce401a..2b5ea42 100644
--- a/src/components/todos/deferred-task-button.tsx
+++ b/src/components/todos/deferred-task-button.tsx
@@ -14,15 +14,16 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import { DatePickerSelect } from '../forms/date-picker-select'
-import { TTodoFormData } from './create-edit-todo-form'
+import { TTodoFormData } from './todo-form'
 
 type DeferredTaskButtonProps = {
   todo: Partial<TTodoFormData>
   open: boolean
   setOpen: (open: boolean) => void
+  disabled: boolean
 }
 
-export const DeferredTaskButton = ({ todo, open, setOpen }: DeferredTaskButtonProps) => {
+export const DeferredTaskButton = ({ todo, open, setOpen, disabled }: DeferredTaskButtonProps) => {
   const [deferredTill, setDeferredTill] = useState<Date>()
   const queryClient = useQueryClient()
 
@@ -80,6 +81,7 @@ export const DeferredTaskButton = ({ todo, open, setOpen }: DeferredTaskButtonPr
                   value={deferredTill}
                   onChange={setDeferredTill}
                   isDateDisabled={(date) => !isDateValidForDefer(date, todo.dueDate)}
+                  disabled={disabled}
                 />
               </div>
             </div>
diff --git a/src/components/todos/edit-task-button.tsx b/src/components/todos/edit-task-button.tsx
index 18c8456..81aa269 100644
--- a/src/components/todos/edit-task-button.tsx
+++ b/src/components/todos/edit-task-button.tsx
@@ -1,15 +1,12 @@
-import { USER_TYPE_ENUM } from '@/api/common/common-enum'
-import { TasksApi } from '@/api/tasks/tasks.api'
 import { TTask } from '@/api/tasks/tasks.types'
+import { useUpdateTask } from '@/hooks/useUpdateTask'
 import { TodoUtil } from '@/lib/todo-util'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Edit2 } from 'lucide-react'
 import { useState } from 'react'
-import { toast } from 'sonner'
-import { CreateEditTodoDialog } from './create-edit-todo-dialog'
-import { TTodoFormData } from './create-edit-todo-form'
 import { Button } from '../ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+import { TodoDialog } from './todo-dialog'
+import { TTodoFormData } from './todo-form'
 
 type EditTodoButtonProps = {
   todo: TTask
@@ -17,56 +14,26 @@ type EditTodoButtonProps = {
 }
 
 export const EditTodoButton = ({ todo, teamId }: EditTodoButtonProps) => {
-  const queryClient = useQueryClient()
-
   const [showEditTaskForm, setShowEditTaskForm] = useState(false)
 
-  const updateTaskMutation = useMutation({
-    mutationFn: TasksApi.updateTask.fn,
-    onSuccess: (res) => {
-      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key() })
-      void queryClient.invalidateQueries({ queryKey: TasksApi.getWatchListTasks.key })
-      void queryClient.invalidateQueries({
-        queryKey: TasksApi.getTasks.key({ status: 'DEFERRED' }),
-      })
-
-      if (res.assignee?.user_type === USER_TYPE_ENUM.TEAM) {
-        void queryClient.invalidateQueries({
-          queryKey: TasksApi.getTasks.key({ teamId: res.assignee.assignee_id }),
-        })
-      }
-
-      // invalidate a task on the teams page if the task edited
-      if (teamId) {
-        void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key({ teamId }) })
-      }
-
-      toast.success('Todo updated successfully')
-      setShowEditTaskForm(false)
-    },
-    onError: () => {
-      toast.error('Failed to update todo, please try again')
-    },
+  const { mutation, handleSubmission } = useUpdateTask({
+    todo,
+    teamId,
   })
 
-  const handleSubmission = async (todoDetails: TTodoFormData) => {
-    const updateDetails = TodoUtil.getUpdateTodoDetails(todoDetails, todo)
-
-    if (Object.keys(updateDetails).length > 0) {
-      updateTaskMutation.mutate({
-        id: todo.id,
-        ...updateDetails,
-      })
-    }
+  const handleSubmit = (todoDetails: TTodoFormData) => {
+    handleSubmission(todoDetails, () => {
+      setShowEditTaskForm(false)
+    })
   }
 
   return (
-    <CreateEditTodoDialog
+    <TodoDialog
       mode="edit"
       open={showEditTaskForm}
-      onSubmit={handleSubmission}
+      onSubmit={handleSubmit}
       onOpenChange={setShowEditTaskForm}
-      isMutationPending={updateTaskMutation.isPending}
+      isMutationPending={mutation.isPending}
       defaultData={TodoUtil.getDefaultTodoFormData(todo)}
     >
       <Tooltip>
@@ -82,6 +49,6 @@ export const EditTodoButton = ({ todo, teamId }: EditTodoButtonProps) => {
         </TooltipTrigger>
         <TooltipContent>Edit Todo</TooltipContent>
       </Tooltip>
-    </CreateEditTodoDialog>
+    </TodoDialog>
   )
 }
diff --git a/src/components/todos/todo-dialog.tsx b/src/components/todos/todo-dialog.tsx
new file mode 100644
index 0000000..eef1f78
--- /dev/null
+++ b/src/components/todos/todo-dialog.tsx
@@ -0,0 +1,86 @@
+import { TodoForm, TTodoFormData } from '@/components/todos/todo-form'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { type ReactNode } from 'react'
+
+type BaseProps = {
+  open: boolean
+  children: ReactNode
+  onOpenChange: (open: boolean) => void
+}
+
+type CreateModeProps = BaseProps & {
+  mode: 'create'
+  defaultData?: Partial<TTodoFormData>
+  onSubmit: (data: TTodoFormData) => void
+  isMutationPending?: boolean
+}
+
+type EditModeProps = BaseProps & {
+  mode: 'edit'
+  defaultData: Partial<TTodoFormData>
+  onSubmit: (data: TTodoFormData) => void
+  isMutationPending?: boolean
+}
+
+type ViewModeProps = BaseProps & {
+  mode: 'view'
+  defaultData: Partial<TTodoFormData>
+  onSubmit?: undefined
+  isMutationPending?: undefined
+}
+
+export type TodoDialogProps = CreateModeProps | EditModeProps | ViewModeProps
+
+export type DialogMode = TodoDialogProps['mode']
+
+const TITLE_BY_MODE: Record<DialogMode, string> = {
+  create: 'Create Todo',
+  edit: 'Edit Todo',
+  view: 'View Todo',
+}
+
+export const TodoDialog = ({
+  mode,
+  open,
+  children,
+  defaultData,
+  onOpenChange,
+  onSubmit,
+  isMutationPending,
+}: TodoDialogProps) => {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="h-max text-xl">{TITLE_BY_MODE[mode]}</AlertDialogTitle>
+        </AlertDialogHeader>
+
+        {mode === 'view' ? (
+          <TodoForm
+            mode={mode}
+            initialData={defaultData}
+            onCancel={() => onOpenChange(false)}
+            disabled={true}
+          />
+        ) : (
+          <TodoForm
+            mode={mode}
+            initialData={defaultData}
+            onCancel={() => onOpenChange(false)}
+            disabled={false}
+            onSubmit={onSubmit}
+            isSubmitting={isMutationPending}
+          />
+        )}
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/src/components/todos/create-edit-todo-form.tsx b/src/components/todos/todo-form.tsx
similarity index 91%
rename from src/components/todos/create-edit-todo-form.tsx
rename to src/components/todos/todo-form.tsx
index 733ec7b..9d66554 100644
--- a/src/components/todos/create-edit-todo-form.tsx
+++ b/src/components/todos/todo-form.tsx
@@ -103,21 +103,35 @@ const SubmitButton = ({ text, isLoading, isDisabled, watch }: SubmitButtonProps)
   )
 }
 
-type CreateEditTodoFormProps = {
-  isSubmitting?: boolean
-  mode?: 'create' | 'edit'
+type BaseFormProps = {
   initialData?: Partial<TTodoFormData>
   onCancel: () => void
+  mode?: 'create' | 'edit' | 'view'
+  disabled: boolean
+}
+
+type CreateEditTodoFormProps = BaseFormProps & {
+  disabled: false
   onSubmit: (data: TTodoFormData) => void
+  isSubmitting?: boolean
 }
 
-export const CreateEditTodoForm = ({
+type ViewTodoFormProps = BaseFormProps & {
+  disabled: true
+  onSubmit?: undefined
+  isSubmitting?: undefined
+}
+
+type TodoFormProps = CreateEditTodoFormProps | ViewTodoFormProps
+
+export const TodoForm = ({
   onCancel,
-  onSubmit,
   initialData,
-  isSubmitting,
   mode = 'create',
-}: CreateEditTodoFormProps) => {
+  disabled,
+  onSubmit,
+  isSubmitting,
+}: TodoFormProps) => {
   const {
     control,
     register,
@@ -142,6 +156,7 @@ export const CreateEditTodoForm = ({
   const [deferModalOpen, setDeferModalOpen] = useState(false)
 
   const handleFormSubmit = (data: TTodoFormData) => {
+    if (disabled) return
     onSubmit(data)
   }
 
@@ -166,6 +181,7 @@ export const CreateEditTodoForm = ({
           type="text"
           placeholder="e.g Cool new title for my todo"
           {...register('title')}
+          disabled={disabled}
         />
       </FormInput>
 
@@ -181,6 +197,7 @@ export const CreateEditTodoForm = ({
           placeholder="e.g Nothing is cool in here"
           className="break-word max-h-32"
           {...register('description')}
+          disabled={disabled}
         />
       </FormInput>
 
@@ -200,6 +217,7 @@ export const CreateEditTodoForm = ({
               value={field.value}
               placeholder="Select assignee"
               onChange={(selectedOption) => field.onChange(selectedOption)}
+              disabled={disabled}
             />
           </FormInput>
         )}
@@ -227,6 +245,7 @@ export const CreateEditTodoForm = ({
                     isDateDisabled={(date) => isPastDate(date)}
                     value={field.value ? new Date(field.value) : undefined}
                     onChange={(date) => field.onChange(date?.toISOString())}
+                    disabled={disabled}
                   />
                 </div>
               </FormInput>
@@ -247,6 +266,7 @@ export const CreateEditTodoForm = ({
                 <Select
                   value={field.value}
                   onValueChange={(value) => field.onChange(value as TASK_PRIORITY_ENUM)}
+                  disabled={disabled}
                 >
                   <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select priority" />
@@ -282,6 +302,7 @@ export const CreateEditTodoForm = ({
                       field.onChange(value as TASK_STATUS_ENUM)
                     }
                   }}
+                  disabled={disabled}
                 >
                   <SelectTrigger className="w-full">
                     <SelectValue placeholder="Select task status" />
@@ -302,6 +323,7 @@ export const CreateEditTodoForm = ({
                     todo={initialData}
                     open={deferModalOpen}
                     setOpen={setDeferModalOpen}
+                    disabled={disabled}
                   />
                 )}
               </FormInput>
@@ -323,6 +345,7 @@ export const CreateEditTodoForm = ({
                   labelData={labels}
                   value={field.value ?? []}
                   onChange={field.onChange}
+                  disabled={disabled}
                 />
               </FormInput>
             )}
@@ -337,13 +360,14 @@ export const CreateEditTodoForm = ({
             Cancel
           </Button>
         )}
-
-        <SubmitButton
-          watch={watch}
-          isLoading={isSubmitting}
-          isDisabled={mode === 'edit' ? !isDirty : false}
-          text={isSubmitting ? buttonLoadingText : buttonText}
-        />
+        {!disabled && (
+          <SubmitButton
+            watch={watch}
+            isLoading={isSubmitting}
+            isDisabled={mode === 'edit' ? !isDirty : false}
+            text={isSubmitting ? buttonLoadingText : buttonText}
+          />
+        )}
       </div>
     </form>
   )
diff --git a/src/components/todos/todo-list-table.tsx b/src/components/todos/todo-list-table.tsx
index 88af9b8..2cbaf22 100644
--- a/src/components/todos/todo-list-table.tsx
+++ b/src/components/todos/todo-list-table.tsx
@@ -1,5 +1,6 @@
 import { TTask } from '@/api/tasks/tasks.types'
 import { useAuth } from '@/hooks/useAuth'
+import { useUpdateTask } from '@/hooks/useUpdateTask'
 import { DateFormats, DateUtil } from '@/lib/date-util'
 import {
   DashboardTasksTableTabs,
@@ -8,11 +9,15 @@ import {
 import { useNavigate, useSearch } from '@tanstack/react-router'
 import { Searchbar } from '../common/searchbar'
 
+import { TodoUtil } from '@/lib/todo-util'
+import { useState } from 'react'
 import { Shimmer } from '../common/shimmer'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'
 import { EditTodoButton } from './edit-task-button'
 import { IncludeDoneSwitch } from './include-done-switch'
 import { TaskPriorityLabel } from './task-priority-label'
+import { TodoDialog } from './todo-dialog'
+import { TTodoFormData } from './todo-form'
 import { TodoLabelsList } from './todo-labels-list'
 import { TodoStatusTable } from './todo-status-table'
 import { WatchListButton } from './watchlist-button'
@@ -57,10 +62,41 @@ const TodoListTableRow = ({
   userId,
 }: TodoListTableRowProps) => {
   const isEditTodoVisible = todo.assignee?.assignee_id === userId
+  const [showViewTodoModal, setShowViewTodoModal] = useState(false)
+
+  const { mutation, handleSubmission } = useUpdateTask({
+    todo,
+  })
+
+  const handleSubmit = (todoDetails: TTodoFormData) => {
+    handleSubmission(todoDetails, () => {
+      setShowViewTodoModal(false)
+    })
+  }
+
   return (
     <TableRow>
-      <TableCell className="whitespace-nowrap">{todo.title}</TableCell>
-
+      {isEditTodoVisible ? (
+        <TodoDialog
+          mode={'edit'}
+          defaultData={TodoUtil.getDefaultTodoFormData(todo)}
+          onOpenChange={setShowViewTodoModal}
+          open={showViewTodoModal}
+          onSubmit={handleSubmit}
+          isMutationPending={mutation.isPending}
+        >
+          <TableCell className="whitespace-nowrap">{todo.title}</TableCell>
+        </TodoDialog>
+      ) : (
+        <TodoDialog
+          mode={'view'}
+          defaultData={TodoUtil.getDefaultTodoFormData(todo)}
+          onOpenChange={setShowViewTodoModal}
+          open={showViewTodoModal}
+        >
+          <TableCell className="whitespace-nowrap">{todo.title}</TableCell>
+        </TodoDialog>
+      )}
       <TableCell className="whitespace-nowrap">
         <TodoStatusTable status={todo.status} />
       </TableCell>
@@ -91,7 +127,7 @@ const TodoListTableRow = ({
 
       <TableCell>
         {showActions ? (
-          <div className="flex items-center gap-0.5">
+          <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
             {isEditTodoVisible && <EditTodoButton todo={todo} />}
             <WatchListButton taskId={todo.id} isInWatchlist={todo.in_watchlist} />
           </div>
diff --git a/src/components/users/user-and-team-search.tsx b/src/components/users/user-and-team-search.tsx
index d359263..7645c9a 100644
--- a/src/components/users/user-and-team-search.tsx
+++ b/src/components/users/user-and-team-search.tsx
@@ -42,6 +42,7 @@ type UserAndTeamSearchProps = {
   placeholder?: string
   value: TUserOrTeamOption | null
   onChange: (value: TUserOrTeamOption | null) => void
+  disabled: boolean
 }
 
 const mapUserToOption = (user: { id: string; name: string }): TUserOrTeamOption => ({
@@ -82,6 +83,7 @@ export const UserAndTeamSearch = ({
   value,
   onChange,
   placeholder = 'Select assignee...',
+  disabled,
 }: UserAndTeamSearchProps) => {
   const { user: currentUser } = useAuth()
   const teamMatch = useMatch({ from: '/_internal/teams/$teamId', shouldThrow: false })
@@ -125,6 +127,7 @@ export const UserAndTeamSearch = ({
   })
 
   const handleSelect = (option: TUserOrTeamOption) => {
+    if (disabled) return
     setSelectedOption(option)
     onChange(option)
     setOpen(false)
@@ -132,6 +135,7 @@ export const UserAndTeamSearch = ({
   }
 
   const handleClear = () => {
+    if (disabled) return
     setSelectedOption(null)
     onChange(null)
     setOpen(false)
@@ -156,6 +160,7 @@ export const UserAndTeamSearch = ({
           variant="outline"
           role="combobox"
           aria-expanded={open}
+          disabled={disabled}
           className="w-full justify-between"
         >
           {selectedOption ? (
diff --git a/src/hooks/useUpdateTask.ts b/src/hooks/useUpdateTask.ts
new file mode 100644
index 0000000..bb1a09f
--- /dev/null
+++ b/src/hooks/useUpdateTask.ts
@@ -0,0 +1,70 @@
+import { USER_TYPE_ENUM } from '@/api/common/common-enum'
+import { TasksApi } from '@/api/tasks/tasks.api'
+import { TASK_STATUS_ENUM } from '@/api/tasks/tasks.enum'
+import { TTask } from '@/api/tasks/tasks.types'
+import { TTodoFormData } from '@/components/todos/todo-form'
+import { TodoUtil } from '@/lib/todo-util'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+type UseUpdateTaskOptions = {
+  todo: TTask
+  teamId?: string
+}
+
+export const useUpdateTask = ({ todo, teamId }: UseUpdateTaskOptions) => {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: TasksApi.updateTask.fn,
+    onSuccess: (res) => {
+      const wasTaskDeferred = todo.status === TASK_STATUS_ENUM.DEFERRED
+      const isTaskDeferred = res.status === TASK_STATUS_ENUM.DEFERRED
+      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key() })
+      void queryClient.invalidateQueries({ queryKey: TasksApi.getWatchListTasks.key })
+      if (wasTaskDeferred || isTaskDeferred) {
+        void queryClient.invalidateQueries({
+          queryKey: TasksApi.getTasks.key({ status: TASK_STATUS_ENUM.DEFERRED }),
+        })
+      }
+
+      if (res.assignee?.user_type === USER_TYPE_ENUM.TEAM) {
+        void queryClient.invalidateQueries({
+          queryKey: TasksApi.getTasks.key({ teamId: res.assignee.assignee_id }),
+        })
+      }
+
+      if (teamId) {
+        void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key({ teamId }) })
+      }
+
+      toast.success('Todo updated successfully')
+    },
+    onError: () => {
+      toast.error('Failed to update todo, please try again')
+    },
+  })
+
+  const handleSubmission = (todoDetails: TTodoFormData, customOnSuccess?: () => void) => {
+    const updateDetails = TodoUtil.getUpdateTodoDetails(todoDetails, todo)
+
+    if (Object.keys(updateDetails).length > 0) {
+      mutation.mutate(
+        {
+          id: todo.id,
+          ...updateDetails,
+        },
+        {
+          onSuccess: () => {
+            customOnSuccess?.()
+          },
+        },
+      )
+    }
+  }
+
+  return {
+    mutation,
+    handleSubmission,
+  }
+}
diff --git a/src/lib/todo-util.ts b/src/lib/todo-util.ts
index 716bb4d..e2e1be6 100644
--- a/src/lib/todo-util.ts
+++ b/src/lib/todo-util.ts
@@ -1,5 +1,5 @@
 import { TTask, UpdateTaskDto } from '@/api/tasks/tasks.types'
-import { TTodoFormData } from '@/components/todos/create-edit-todo-form'
+import { TTodoFormData } from '@/components/todos/todo-form'
 
 export class TodoUtil {
   static getUpdateTodoDetails = (
diff --git a/src/modules/dashboard/components/multi-labels-select.tsx b/src/modules/dashboard/components/multi-labels-select.tsx
index 8ab9581..c2c7a31 100644
--- a/src/modules/dashboard/components/multi-labels-select.tsx
+++ b/src/modules/dashboard/components/multi-labels-select.tsx
@@ -20,6 +20,7 @@ interface LabelMultiSelectProps {
   onSelectionChange: (labels: Label[]) => void
   placeholder?: string
   className?: string
+  disabled: boolean
 }
 
 export function LabelMultiSelect({
@@ -28,10 +29,12 @@ export function LabelMultiSelect({
   onSelectionChange,
   placeholder = 'Select labels...',
   className,
+  disabled,
 }: LabelMultiSelectProps) {
   const [open, setOpen] = React.useState(false)
 
   const handleSelect = (label: Label) => {
+    if (disabled) return
     const isSelected = selectedLabels.some((selected) => selected.id === label.id)
 
     if (isSelected) {
@@ -53,6 +56,7 @@ export function LabelMultiSelect({
             variant="outline"
             role="combobox"
             aria-expanded={open}
+            disabled={disabled}
             className="h-auto min-h-8 w-full justify-between bg-transparent"
           >
             <div className="flex flex-1 flex-wrap gap-1">
diff --git a/src/modules/dashboard/components/select-labels.tsx b/src/modules/dashboard/components/select-labels.tsx
index ee798d0..62fd3ac 100644
--- a/src/modules/dashboard/components/select-labels.tsx
+++ b/src/modules/dashboard/components/select-labels.tsx
@@ -5,9 +5,10 @@ type SelectLabelsProps = {
   labelData: Label[]
   value: string[] // array of label IDs
   onChange: (ids: string[]) => void
+  disabled: boolean
 }
 
-export function SelectLabels({ labelData, value, onChange }: SelectLabelsProps) {
+export function SelectLabels({ labelData, value, onChange, disabled }: SelectLabelsProps) {
   const selectedLabels = labelData.filter((label) => value?.includes(label.id))
 
   const handleSelectionChange = (labels: Label[]) => {
@@ -20,6 +21,7 @@ export function SelectLabels({ labelData, value, onChange }: SelectLabelsProps)
       selectedLabels={selectedLabels}
       onSelectionChange={handleSelectionChange}
       placeholder="Select labels for this task..."
+      disabled={disabled}
     />
   )
 }
diff --git a/src/modules/teams/team-tasks.tsx b/src/modules/teams/team-tasks.tsx
index 46cfe35..5a676d1 100644
--- a/src/modules/teams/team-tasks.tsx
+++ b/src/modules/teams/team-tasks.tsx
@@ -8,6 +8,8 @@ import { Searchbar } from '@/components/common/searchbar'
 import { EditTodoButton } from '@/components/todos/edit-task-button'
 import { IncludeDoneSwitch } from '@/components/todos/include-done-switch'
 import { TaskPriorityLabel } from '@/components/todos/task-priority-label'
+import { TodoDialog } from '@/components/todos/todo-dialog'
+import { TTodoFormData } from '@/components/todos/todo-form'
 import { TodoLabelsList } from '@/components/todos/todo-labels-list'
 import { TodoListTableHeader, TodoListTableRowShimmer } from '@/components/todos/todo-list-table'
 import { TodoStatusTable } from '@/components/todos/todo-status-table'
@@ -15,9 +17,12 @@ import { WatchListButton } from '@/components/todos/watchlist-button'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import { ReassignUser } from '@/components/users/reassign-user'
 import { useAuth } from '@/hooks/useAuth'
+import { useUpdateTask } from '@/hooks/useUpdateTask'
 import { DateFormats, DateUtil } from '@/lib/date-util'
+import { TodoUtil } from '@/lib/todo-util'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearch } from '@tanstack/react-router'
+import { useState } from 'react'
 
 type TodoListTableRowProps = {
   todo: TTask
@@ -29,11 +34,42 @@ const TodoListTableRow = ({ todo, team }: TodoListTableRowProps) => {
   const isRessignTodoCtaVisible =
     todo.assignee?.user_type === USER_TYPE_ENUM.TEAM && team?.poc_id === user.id
   const isEditTodoVisible = todo.assignee?.assignee_id === user.id
+  const [showViewTodoModal, setShowViewTodoModal] = useState(false)
+
+  const { mutation, handleSubmission } = useUpdateTask({
+    todo,
+    teamId: team?.id,
+  })
+
+  const handleSubmit = (todoDetails: TTodoFormData) => {
+    handleSubmission(todoDetails, () => {
+      setShowViewTodoModal(false)
+    })
+  }
 
   return (
     <TableRow>
-      <TableCell className="whitespace-nowrap">{todo.title}</TableCell>
-
+      {isEditTodoVisible ? (
+        <TodoDialog
+          mode={'edit'}
+          defaultData={TodoUtil.getDefaultTodoFormData(todo)}
+          onOpenChange={setShowViewTodoModal}
+          open={showViewTodoModal}
+          onSubmit={handleSubmit}
+          isMutationPending={mutation.isPending}
+        >
+          <TableCell className="whitespace-nowrap">{todo.title}</TableCell>
+        </TodoDialog>
+      ) : (
+        <TodoDialog
+          mode={'view'}
+          defaultData={TodoUtil.getDefaultTodoFormData(todo)}
+          onOpenChange={setShowViewTodoModal}
+          open={showViewTodoModal}
+        >
+          <TableCell className="whitespace-nowrap">{todo.title}</TableCell>
+        </TodoDialog>
+      )}
       <TableCell className="whitespace-nowrap">
         <TodoStatusTable status={todo.status} />
       </TableCell>
@@ -54,7 +90,7 @@ const TodoListTableRow = ({ todo, team }: TodoListTableRowProps) => {
         {todo.dueAt ? new DateUtil(todo.dueAt).format(DateFormats.D_MMM_YYYY) : '--'}
       </TableCell>
 
-      <TableCell className="flex items-center gap-0.5">
+      <TableCell className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
         {isRessignTodoCtaVisible && <ReassignUser taskId={todo.id} teamId={team.id} />}
         {isEditTodoVisible && <EditTodoButton todo={todo} teamId={team?.id} />}
         {!isRessignTodoCtaVisible && (