From 54aadd73d7ad2f242426d622bc4893ab0396bd3e Mon Sep 17 00:00:00 2001
From: DasProffi <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 16 Jul 2025 01:27:43 +0200
Subject: [PATCH 1/5] feat: adopt hightide version 0.1.21

---
 .../mutations/tasks/task_mutations.ts         | 275 +++++-------------
 .../tasks/task_template_mutations.ts          |  28 +-
 api-services/mutations/tasks/util.ts          |   3 +-
 .../mutations/tasks/ward_mutations.ts         |   1 -
 api-services/service/tasks/TaskService.ts     | 147 ++++++++++
 .../service/tasks/TaskSubtaskService.ts       |  40 +++
 api-services/service/users/PatientService.ts  |   6 +-
 api-services/types/tasks/patient.ts           |   2 +-
 api-services/types/tasks/task.ts              |  39 ++-
 api-services/types/tasks/tasks_templates.ts   |   8 +-
 tasks/components/PillLabel.tsx                |  55 ++--
 tasks/components/RoomOverview.tsx             |   8 +-
 tasks/components/SubtaskView.tsx              |   6 +-
 tasks/components/cards/BedCard.tsx            |   2 +-
 tasks/components/cards/DragCard.tsx           |   2 +-
 tasks/components/cards/PatientCard.tsx        |  53 ++--
 tasks/components/cards/TaskCard.tsx           |  79 +++--
 tasks/components/cards/TaskTemplateCard.tsx   |   2 +-
 tasks/components/cards/WardCard.tsx           |   4 +-
 tasks/components/layout/DashboardDisplay.tsx  | 150 +++++++---
 tasks/components/layout/PatientList.tsx       |  19 +-
 tasks/components/layout/TwoColumn.tsx         |  79 +++--
 tasks/components/modals/TaskDetailModal.tsx   |  31 +-
 tasks/components/pill/PillLabel.tsx           |   0
 tasks/globals.css                             |  28 +-
 tasks/pages/ward/[wardId].tsx                 |   8 +-
 26 files changed, 638 insertions(+), 437 deletions(-)
 create mode 100644 api-services/service/tasks/TaskService.ts
 create mode 100644 api-services/service/tasks/TaskSubtaskService.ts
 delete mode 100644 tasks/components/pill/PillLabel.tsx

diff --git a/api-services/mutations/tasks/task_mutations.ts b/api-services/mutations/tasks/task_mutations.ts
index 088040311..c655c886d 100644
--- a/api-services/mutations/tasks/task_mutations.ts
+++ b/api-services/mutations/tasks/task_mutations.ts
@@ -1,298 +1,159 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { noop } from '@helpwave/hightide'
-import {
-  AssignTaskRequest,
-  CreateSubtaskRequest,
-  CreateTaskRequest,
-  DeleteSubtaskRequest, DeleteTaskRequest,
-  GetTaskRequest,
-  GetTasksByPatientRequest,
-  UnassignTaskRequest,
-  UpdateSubtaskRequest,
-  UpdateTaskRequest
-} from '@helpwave/proto-ts/services/tasks_svc/v1/task_svc_pb'
-import type { CreateSubTaskDTO, SubTaskDTO, TaskDTO } from '../../types/tasks/task'
-import { emptyTask } from '../../types/tasks/task'
+import type { SubTaskDTO, TaskDTO } from '../../types/tasks/task'
 import { QueryKeys } from '../query_keys'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
-import { GRPCConverter } from '../../util/util'
 import { roomOverviewsQueryKey } from './room_mutations'
-import { GRPCMapper } from './util'
+import type { TaskAssignmentRequestProps } from '../../service/tasks/TaskService'
+import { TaskService } from '../../service/tasks/TaskService'
+import { TaskSubtaskService } from '../../service/tasks/TaskSubtaskService'
 
-type TaskAssignmentRequestProps = {
-  taskId: string,
-  userId: string,
-}
-
-export const useTaskQuery = (taskId: string | undefined) => {
+export const useTaskQuery = (taskId?: string) => {
   return useQuery({
     queryKey: [QueryKeys.tasks, taskId, 'get'],
     enabled: !!taskId,
     queryFn: async () => {
-      if (!taskId) {
-        return emptyTask
-      }
-
-      const req = new GetTaskRequest()
-      req.setId(taskId)
-
-      const res = await APIServices.task.getTask(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('TasksByPatient query failed')
-      }
-
-      const task: TaskDTO = {
-        id: res.getId(),
-        name: res.getName(),
-        notes: res.getDescription(),
-        status: GRPCConverter.taskStatusFromGRPC(res.getStatus()),
-        assignee: res.getAssignedUserId(),
-        subtasks: res.getSubtasksList().map(GRPCMapper.subtaskFromGRPC),
-        createdAt: res.getCreatedAt() ? GRPCConverter.timestampToDate(res.getCreatedAt()!) : new Date(),
-        dueDate: res.getDueAt() ? GRPCConverter.timestampToDate(res.getCreatedAt()!) : new Date(),
-        isPublicVisible: true, // TODO set when backend provides it
-        // use res.getCreatedAt()
-      }
-
-      return task
+      return await TaskService.get(taskId!)
     },
   })
 }
 
-export const useTasksByPatientQuery = (patientId: string | undefined) => {
+export const useTasksByPatientQuery = (patientId?: string) => {
   return useQuery({
     queryKey: [QueryKeys.tasks, QueryKeys.patients, patientId],
     enabled: !!patientId,
     queryFn: async () => {
-      if (!patientId) {
-        return
-      }
-
-      const req = new GetTasksByPatientRequest()
-      req.setPatientId(patientId)
-
-      const res = await APIServices.task.getTasksByPatient(req, getAuthenticatedGrpcMetadata())
-
-      const tasks: TaskDTO[] = res.getTasksList().map(task => {
-        const dueAt = task.getDueAt()
-        return {
-          id: task.getId(),
-          name: task.getName(),
-          status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
-          notes: task.getDescription(),
-          isPublicVisible: task.getPublic(),
-          assignee: task.getAssignedUserId(),
-          dueDate: dueAt ? GRPCConverter.timestampToDate(dueAt) : undefined,
-          subtasks: task.getSubtasksList().map(GRPCMapper.subtaskFromGRPC),
-          creationDate: task.getCreatedAt() ? GRPCConverter.timestampToDate(task.getCreatedAt()!) : undefined,
-          creatorId: task.getCreatedBy(),
-        }
-      })
+      return await TaskService.getByPatientId(patientId!)
+    }
+  })
+}
 
-      return tasks
+export const useMyTasksQuery = () => {
+  return useQuery({
+    queryKey: [QueryKeys.tasks, 'my'],
+    queryFn: async () => {
+      return await TaskService.getMyTasks()
     }
   })
 }
 
-// TODO move patientId to task object
-export const useTaskCreateMutation = (callback: (task: TaskDTO) => void = noop, patientId: string) => {
+export const useTaskCreateMutation = (options?: UseMutationOptions<TaskDTO, unknown, TaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (task: TaskDTO) => {
-      const req = new CreateTaskRequest()
-        .setName(task.name)
-        .setPatientId(patientId)
-        .setDescription(task.notes)
-        .setPublic(task.isPublicVisible)
-        .setInitialStatus(GRPCConverter.taskStatusToGrpc(task.status))
-        .setDueAt(task.dueDate ? GRPCConverter.dateToTimestamp(task.dueDate) : undefined)
-        .setSubtasksList(task.subtasks.map(subtask => (new CreateTaskRequest.SubTask())
-          .setName(subtask.name)
-          .setDone(subtask.isDone)))
-
-      if(task.assignee) {
-        req.setAssignedUserId(task.assignee)
-      }
-
-      const res = await APIServices.task.createTask(req, getAuthenticatedGrpcMetadata())
-      const newTask: TaskDTO = {
-        ...task,
-        id: res.getId()
-      }
-
-      callback(newTask)
-      return newTask
+      return await TaskService.create(task)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks, QueryKeys.patients]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
     }
   })
 }
 
-export const useTaskUpdateMutation = (callback: () => void = noop) => {
+export const useTaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, TaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (task: TaskDTO) => {
-      const updateTask = new UpdateTaskRequest()
-
-      updateTask.setId(task.id)
-      updateTask.setDescription(task.notes)
-      updateTask.setName(task.name)
-      updateTask.setDueAt(task.dueDate ? GRPCConverter.dateToTimestamp(task.dueDate) : undefined)
-      updateTask.setStatus(GRPCConverter.taskStatusToGrpc(task.status))
-
-      await APIServices.task.updateTask(updateTask, getAuthenticatedGrpcMetadata())
-
-      callback()
-      return !!updateTask.toObject()
+      return await TaskService.update(task)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
     }
   })
 }
 
-export const useTaskDeleteMutation = (callback: () => void = noop) => {
+export const useTaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (taskId: string) => {
-      const req = new DeleteTaskRequest()
-      req.setId(taskId)
-      await APIServices.task.deleteTask(req, getAuthenticatedGrpcMetadata())
-
-      callback()
-      return req.toObject()
+      return await TaskService.delete(taskId)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
     }
   })
 }
 
-// TODO: taskId: string | undefined => taskId: string -> A taskId is always required to create a SubTask
-export const useSubTaskAddMutation = (taskId: string | undefined, callback: (subtask: SubTaskDTO) => void = noop) => {
+export const useSubTaskAddMutation = (options?: UseMutationOptions<SubTaskDTO, unknown, SubTaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async (subtask: CreateSubTaskDTO) => {
-      const usedTaskId = subtask.taskId ?? taskId ?? ''
-      if (!usedTaskId) {
-        return
-      }
-      const req = new CreateSubtaskRequest()
-      req.setSubtask(new CreateSubtaskRequest.Subtask().setName(subtask.name))
-      req.setTaskId(usedTaskId)
-      const res = await APIServices.task.createSubtask(req, getAuthenticatedGrpcMetadata())
-
-      const newSubtask: SubTaskDTO = {
-        id: res.getSubtaskId(),
-        name: subtask.name,
-        isDone: false,
-      }
-
-      callback(newSubtask)
-      return req.toObject()
+    mutationFn: async (subtask: SubTaskDTO) => {
+      return await TaskSubtaskService.create(subtask)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
     }
   })
 }
 
-// TODO move taskId parameter to subtask object
-export const useSubTaskUpdateMutation = (taskId?: string, callback: (subtask: SubTaskDTO) => void = noop) => {
+export const useSubTaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, SubTaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (subtask: SubTaskDTO) => {
-      if (!taskId) {
-        throw Error('SubTaskUpdateMutation: A taskId must be provided')
-      }
-      const req = new UpdateSubtaskRequest()
-      req.setSubtaskId(subtask.id)
-        .setTaskId(taskId)
-        .setSubtask(new UpdateSubtaskRequest.Subtask()
-          .setName(subtask.name)
-          .setDone(subtask.isDone))
-      await APIServices.task.updateSubtask(req, getAuthenticatedGrpcMetadata())
-
-      const newSubtask: SubTaskDTO = { ...subtask }
-
-      callback(newSubtask)
-      return req.toObject()
+      return await TaskSubtaskService.update(subtask)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
     }
   })
 }
 
-export const useSubTaskDeleteMutation = (callback: () => void = noop) => {
+export const useSubTaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (subtaskId: string) => {
-      const req = new DeleteSubtaskRequest()
-      // req.setTaskId()
-      req.setSubtaskId(subtaskId)
-      await APIServices.task.deleteSubtask(req, getAuthenticatedGrpcMetadata())
-
-      callback()
-      return req.toObject()
+      return await TaskSubtaskService.delete(subtaskId)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
     }
   })
 }
 
-export const useAssignTaskMutation = (callback: () => void = noop) => {
+export const useAssignTaskMutation = (options?: UseMutationOptions<boolean, unknown, TaskAssignmentRequestProps>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async ({
-                         taskId,
-                         userId
-                       }: TaskAssignmentRequestProps) => {
-      const req = new AssignTaskRequest()
-      req.setTaskId(taskId)
-      req.setUserId(userId)
-      const res = await APIServices.task.assignTask(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('error in AssignTaskToUser')
-      }
-
-      callback()
-      return req.toObject()
+    mutationFn: async (props: TaskAssignmentRequestProps) => {
+      return await TaskService.assign(props)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
     }
   })
 }
 
-export const useUnassignTaskMutation = (callback: () => void = noop) => {
+export const useUnassignTaskMutation = (options?: UseMutationOptions<boolean, unknown, TaskAssignmentRequestProps>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async ({
-                         taskId,
-                         userId
-                       }: TaskAssignmentRequestProps) => {
-      const req = new UnassignTaskRequest()
-      req.setTaskId(taskId)
-      req.setUserId(userId)
-      const res = await APIServices.task.unassignTask(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('error in UnAssignTaskToUser')
-      }
-
-      callback()
-      return req.toObject()
+    mutationFn: async (props: TaskAssignmentRequestProps) => {
+      return await TaskService.unassign(props)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.tasks]).catch(console.error)
     }
   })
diff --git a/api-services/mutations/tasks/task_template_mutations.ts b/api-services/mutations/tasks/task_template_mutations.ts
index abfa5f2c3..1ba23b1b8 100644
--- a/api-services/mutations/tasks/task_template_mutations.ts
+++ b/api-services/mutations/tasks/task_template_mutations.ts
@@ -5,7 +5,8 @@ import {
   CreateTaskTemplateSubTaskRequest,
   DeleteTaskTemplateRequest,
   DeleteTaskTemplateSubTaskRequest,
-  GetAllTaskTemplatesRequest, UpdateTaskTemplateRequest,
+  GetAllTaskTemplatesRequest,
+  UpdateTaskTemplateRequest,
   UpdateTaskTemplateSubTaskRequest
 } from '@helpwave/proto-ts/services/tasks_svc/v1/task_template_svc_pb'
 import type { TaskTemplateDTO, TaskTemplateFormType } from '../../types/tasks/tasks_templates'
@@ -22,7 +23,7 @@ export const useWardTaskTemplateQuery = (wardId?: string) => {
       let wardTaskTemplates: TaskTemplateDTO[] = []
       if (wardId !== undefined) {
         const req = new GetAllTaskTemplatesRequest()
-        req.setWardId(wardId)
+          .setWardId(wardId)
         const res = await APIServices.taskTemplates.getAllTaskTemplates(req, getAuthenticatedGrpcMetadata())
         wardTaskTemplates = res.getTemplatesList().map((template) => ({
           id: template.getId(),
@@ -32,7 +33,8 @@ export const useWardTaskTemplateQuery = (wardId?: string) => {
           subtasks: template.getSubtasksList().map((subtask) => ({
             id: subtask.getId(),
             name: subtask.getName(),
-            isDone: false
+            isDone: false,
+            taskId: template.getId(),
           })),
           isPublicVisible: template.getIsPublic()
         }))
@@ -46,14 +48,12 @@ export const useWardTaskTemplateQuery = (wardId?: string) => {
 
 type UseAllTaskTemplatesByCreatorProps = {
   createdBy?: string,
-  onSuccess: (data: TaskTemplateDTO[]) => void,
   type: QueryKey,
 }
 export const useAllTaskTemplatesByCreator = ({
-  createdBy,
-  onSuccess = noop,
-  type = 'wardTaskTemplates'
-}: UseAllTaskTemplatesByCreatorProps) => {
+                                               createdBy,
+                                               type = 'wardTaskTemplates'
+                                             }: UseAllTaskTemplatesByCreatorProps) => {
   const queryKey = type
   const onlyPrivate = type === 'personalTaskTemplates'
   return useQuery({
@@ -73,7 +73,8 @@ export const useAllTaskTemplatesByCreator = ({
           subtasks: template.getSubtasksList().map((subtask) => ({
             id: subtask.getId(),
             name: subtask.getName(),
-            isDone: false
+            isDone: false,
+            taskId: template.getId(),
           })),
           isPublicVisible: template.getIsPublic()
         }))
@@ -81,12 +82,11 @@ export const useAllTaskTemplatesByCreator = ({
       }
       return personalTaskTemplates
     },
-    onSuccess
   })
 }
 
-export const usePersonalTaskTemplateQuery = (createdBy?: string, onSuccess: (data: TaskTemplateDTO[]) => void = noop) => {
-  return useAllTaskTemplatesByCreator({ createdBy, onSuccess, type: 'personalTaskTemplates' })
+export const usePersonalTaskTemplateQuery = (createdBy?: string) => {
+  return useAllTaskTemplatesByCreator({ createdBy, type: 'personalTaskTemplates' })
 }
 
 export const useUpdateMutation = (queryKey: QueryKey, setTemplate: (taskTemplate?: TaskTemplateDTO) => void) => {
@@ -147,7 +147,7 @@ export const useUpdateMutation = (queryKey: QueryKey, setTemplate: (taskTemplate
       queryClient.setQueryData<TaskTemplateDTO[]>(
         [queryKey],
         (old) => old
-)
+      )
       return { previousTaskTemplates }
     },
     onError: (_, newTodo, context) => {
@@ -214,7 +214,7 @@ export const useDeleteMutation = (queryKey: QueryKey, setTemplate: (task?: TaskT
       queryClient.setQueryData<TaskTemplateDTO[]>(
         [queryKey],
         (old) => old
-)
+      )
       return { previousTaskTemplate }
     },
     onError: (_, newTodo, context) => {
diff --git a/api-services/mutations/tasks/util.ts b/api-services/mutations/tasks/util.ts
index 4b2eded2b..ddac460c6 100644
--- a/api-services/mutations/tasks/util.ts
+++ b/api-services/mutations/tasks/util.ts
@@ -7,9 +7,10 @@ interface GRPCSubTask {
 }
 
 export const GRPCMapper = {
-  subtaskFromGRPC: (subTask: GRPCSubTask): SubTaskDTO => ({
+  subtaskFromGRPC: (subTask: GRPCSubTask, taskId: string): SubTaskDTO => ({
     id: subTask.getId(),
     name: subTask.getName(),
     isDone: subTask.getDone(),
+    taskId
   })
 }
diff --git a/api-services/mutations/tasks/ward_mutations.ts b/api-services/mutations/tasks/ward_mutations.ts
index e537122c5..ae38f64c3 100644
--- a/api-services/mutations/tasks/ward_mutations.ts
+++ b/api-services/mutations/tasks/ward_mutations.ts
@@ -81,7 +81,6 @@ export const useWardQuery = (id: string) => useQuery({
     if (!res.toObject()) {
       console.error('error in Ward query')
     }
-
     return {
       id: res.getId(),
       name: res.getName(),
diff --git a/api-services/service/tasks/TaskService.ts b/api-services/service/tasks/TaskService.ts
new file mode 100644
index 000000000..1c1e9ba72
--- /dev/null
+++ b/api-services/service/tasks/TaskService.ts
@@ -0,0 +1,147 @@
+import type { TaskDTO } from '../../types/tasks/task'
+import { APIServices } from '../../services'
+import {
+  AssignTaskRequest,
+  CreateTaskRequest,
+  DeleteTaskRequest,
+  GetAssignedTasksRequest,
+  GetTaskRequest,
+  GetTasksByPatientRequest,
+  UnassignTaskRequest,
+  UpdateTaskRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/task_svc_pb'
+import { GRPCConverter } from '../../util/util'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import { GRPCMapper } from '../../mutations/tasks/util'
+
+export type TaskAssignmentRequestProps = {
+  taskId: string,
+  userId: string,
+}
+
+export const TaskService = {
+  get: async function (taskId: string): Promise<TaskDTO> {
+    const req = new GetTaskRequest()
+    req.setId(taskId)
+
+    const res = await APIServices.task.getTask(req, getAuthenticatedGrpcMetadata())
+
+    if (!res.toObject()) {
+      console.error('TasksByPatient query failed')
+    }
+
+    return {
+      id: res.getId(),
+      name: res.getName(),
+      notes: res.getDescription(),
+      status: GRPCConverter.taskStatusFromGRPC(res.getStatus()),
+      assignee: res.getAssignedUserId(),
+      subtasks: res.getSubtasksList().map(value => GRPCMapper.subtaskFromGRPC(value, res.getId())),
+      creatorId: res.getCreatedBy(),
+      createdAt: res.getCreatedAt() ? GRPCConverter.timestampToDate(res.getCreatedAt()!) : new Date(),
+      dueDate: res.getDueAt() ? GRPCConverter.timestampToDate(res.getCreatedAt()!) : new Date(),
+      isPublicVisible: res.getPublic(),
+      patientId: res.getPatient()!.getId(),
+      // use res.getCreatedAt()
+    }
+  },
+  getByPatientId: async function (patientId: string): Promise<TaskDTO[]> {
+    const req = new GetTasksByPatientRequest()
+    req.setPatientId(patientId)
+
+    const res = await APIServices.task.getTasksByPatient(req, getAuthenticatedGrpcMetadata())
+
+    return res.getTasksList().map(task => {
+      const dueAt = task.getDueAt()
+      return {
+        id: task.getId(),
+        name: task.getName(),
+        status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
+        notes: task.getDescription(),
+        isPublicVisible: task.getPublic(),
+        assignee: task.getAssignedUserId(),
+        dueDate: dueAt ? GRPCConverter.timestampToDate(dueAt) : undefined,
+        subtasks: task.getSubtasksList().map(value => GRPCMapper.subtaskFromGRPC(value, task.getId())),
+        creationDate: task.getCreatedAt() ? GRPCConverter.timestampToDate(task.getCreatedAt()!) : undefined,
+        creatorId: task.getCreatedBy(),
+        patientId: task.getPatientId(),
+      }
+    })
+  },
+  getMyTasks: async function (): Promise<TaskDTO[]> {
+    const req = new GetAssignedTasksRequest()
+
+    const res = await APIServices.task.getAssignedTasks(req, getAuthenticatedGrpcMetadata())
+
+    return res.getTasksList().map(task => {
+      const dueAt = task.getDueAt()
+      return {
+        id: task.getId(),
+        name: task.getName(),
+        status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
+        notes: task.getDescription(),
+        isPublicVisible: task.getPublic(),
+        assignee: task.getAssignedUserId(),
+        dueDate: dueAt ? GRPCConverter.timestampToDate(dueAt) : undefined,
+        subtasks: task.getSubtasksList().map(value => GRPCMapper.subtaskFromGRPC(value, task.getId())),
+        creationDate: task.getCreatedAt() ? GRPCConverter.timestampToDate(task.getCreatedAt()!) : undefined,
+        creatorId: task.getCreatedBy(),
+        patientId: task.getPatient()!.getId(),
+      }
+    })
+  },
+  create: async function (task: TaskDTO): Promise<TaskDTO> {
+    const req = new CreateTaskRequest()
+      .setName(task.name)
+      .setPatientId(task.patientId)
+      .setDescription(task.notes)
+      .setPublic(task.isPublicVisible)
+      .setInitialStatus(GRPCConverter.taskStatusToGrpc(task.status))
+      .setDueAt(task.dueDate ? GRPCConverter.dateToTimestamp(task.dueDate) : undefined)
+      .setSubtasksList(task.subtasks.map(subtask => (new CreateTaskRequest.SubTask())
+        .setName(subtask.name)
+        .setDone(subtask.isDone)))
+
+    if (task.assignee) {
+      req.setAssignedUserId(task.assignee)
+    }
+
+    const res = await APIServices.task.createTask(req, getAuthenticatedGrpcMetadata())
+    return {
+      ...task,
+      id: res.getId()
+    }
+  },
+  update: async function (task: TaskDTO): Promise<boolean> {
+    const req = new UpdateTaskRequest()
+      .setId(task.id)
+      .setDescription(task.notes)
+      .setName(task.name)
+      .setDueAt(task.dueDate ? GRPCConverter.dateToTimestamp(task.dueDate) : undefined)
+      .setStatus(GRPCConverter.taskStatusToGrpc(task.status))
+
+    const res = await APIServices.task.updateTask(req, getAuthenticatedGrpcMetadata())
+
+    return !!res.toObject()
+  },
+  delete: async function (taskId: string): Promise<boolean> {
+    const req = new DeleteTaskRequest()
+      .setId(taskId)
+    await APIServices.task.deleteTask(req, getAuthenticatedGrpcMetadata())
+    return !!req.toObject()
+  },
+  assign: async function ({ taskId, userId }: TaskAssignmentRequestProps): Promise<boolean> {
+    const req = new AssignTaskRequest()
+      .setTaskId(taskId)
+      .setUserId(userId)
+    const res = await APIServices.task.assignTask(req, getAuthenticatedGrpcMetadata())
+    return !!res.toObject()
+  },
+  unassign: async function ({ taskId, userId }: TaskAssignmentRequestProps): Promise<boolean> {
+    const req = new UnassignTaskRequest()
+      .setTaskId(taskId)
+      .setUserId(userId)
+    const res = await APIServices.task.unassignTask(req, getAuthenticatedGrpcMetadata())
+    return !!res.toObject()
+  }
+}
diff --git a/api-services/service/tasks/TaskSubtaskService.ts b/api-services/service/tasks/TaskSubtaskService.ts
new file mode 100644
index 000000000..8bfb1f796
--- /dev/null
+++ b/api-services/service/tasks/TaskSubtaskService.ts
@@ -0,0 +1,40 @@
+import type { SubTaskDTO } from '../../types/tasks/task'
+import { APIServices } from '../../services'
+import {
+  CreateSubtaskRequest,
+  DeleteSubtaskRequest,
+  UpdateSubtaskRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/task_svc_pb'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+
+export const TaskSubtaskService = {
+  create: async function (subtask: SubTaskDTO): Promise<SubTaskDTO> {
+    const req = new CreateSubtaskRequest()
+      .setSubtask(new CreateSubtaskRequest.Subtask().setName(subtask.name))
+      .setTaskId(subtask.taskId)
+    const res = await APIServices.task.createSubtask(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      ...subtask,
+      id: res.getSubtaskId(),
+      isDone: false,
+    }
+  },
+  update: async function (subtask: SubTaskDTO): Promise<boolean> {
+    const req = new UpdateSubtaskRequest()
+    req.setSubtaskId(subtask.id)
+      .setTaskId(subtask.taskId)
+      .setSubtask(new UpdateSubtaskRequest.Subtask()
+        .setName(subtask.name)
+        .setDone(subtask.isDone))
+    const res = await APIServices.task.updateSubtask(req, getAuthenticatedGrpcMetadata())
+
+    return !!res.toObject()
+  },
+  delete: async function (subtaskId: string): Promise<boolean> {
+    const req = new DeleteSubtaskRequest()
+      .setSubtaskId(subtaskId)
+    const res = await APIServices.task.deleteSubtask(req, getAuthenticatedGrpcMetadata())
+    return !!res.toObject()
+  },
+}
diff --git a/api-services/service/users/PatientService.ts b/api-services/service/users/PatientService.ts
index 4c16413f4..62baafba7 100644
--- a/api-services/service/users/PatientService.ts
+++ b/api-services/service/users/PatientService.ts
@@ -41,8 +41,10 @@ export const PatientService = {
         subtasks: task.getSubtasksList().map(subtask => ({
           id: subtask.getId(),
           name: subtask.getName(),
-          isDone: subtask.getDone()
-        }))
+          isDone: subtask.getDone(),
+          taskId: task.getId(),
+        })),
+        patientId: res.getId(),
       }))
     }
   },
diff --git a/api-services/types/tasks/patient.ts b/api-services/types/tasks/patient.ts
index 83d81d158..f9309cbef 100644
--- a/api-services/types/tasks/patient.ts
+++ b/api-services/types/tasks/patient.ts
@@ -18,7 +18,7 @@ export const emptyPatient: PatientDTO = {
 }
 
 export type PatientWithTasksNumberDTO = PatientMinimalDTO & {
-  tasksUnscheduled: number,
+  tasksTodo: number,
   tasksInProgress: number,
   tasksDone: number,
 }
diff --git a/api-services/types/tasks/task.ts b/api-services/types/tasks/task.ts
index 8bffa8af5..93265d98f 100644
--- a/api-services/types/tasks/task.ts
+++ b/api-services/types/tasks/task.ts
@@ -4,12 +4,10 @@ export type SubTaskDTO = {
   id: string,
   name: string,
   isDone: boolean,
+  taskId: string,
 }
 
-export type CreateSubTaskDTO = SubTaskDTO & {
-  taskId?: string,
-}
-
+// The order in the array defines the sorting order
 const taskStatus = ['done', 'inProgress', 'todo'] as const
 
 export type TaskStatus = typeof taskStatus[number]
@@ -28,9 +26,38 @@ const taskStatusTranslation: Translation<TaskStatusTranslationType> = {
     done: 'Fertig'
   }
 }
+
+type TaskStatusColor = {
+  background: string,
+  icon: string,
+  text: string,
+}
+
+const taskColorMapping: Record<TaskStatus, TaskStatusColor> = {
+  todo: {
+    background: 'bg-todo-background',
+    text: 'text-todo-text',
+    icon: 'text-todo-icon',
+  },
+  inProgress: {
+    background: 'bg-inprogress-background',
+    text: 'text-inprogress-text',
+    icon: 'text-inprogress-icon',
+  },
+  done: {
+    background: 'bg-done-background',
+    text: 'text-done-text',
+    icon: 'text-done-icon',
+  },
+}
+
 export const TaskStatusUtil = {
   taskStatus,
-  translation: taskStatusTranslation
+  translation: taskStatusTranslation,
+  compare: (a: TaskStatus, b: TaskStatus): number => {
+    return taskStatus.indexOf(a) - taskStatus.indexOf(b)
+  },
+  colors: taskColorMapping
 }
 
 export type TaskDTO = {
@@ -43,6 +70,7 @@ export type TaskDTO = {
   dueDate?: Date,
   createdAt?: Date,
   creatorId?: string,
+  patientId: string,
   isPublicVisible: boolean,
 }
 
@@ -52,6 +80,7 @@ export const emptyTask: TaskDTO = {
   notes: '',
   status: 'todo',
   subtasks: [],
+  patientId: '',
   isPublicVisible: false
 }
 
diff --git a/api-services/types/tasks/tasks_templates.ts b/api-services/types/tasks/tasks_templates.ts
index 2eb10de51..07c9e886d 100644
--- a/api-services/types/tasks/tasks_templates.ts
+++ b/api-services/types/tasks/tasks_templates.ts
@@ -1,13 +1,11 @@
+import type { SubTaskDTO } from './task'
+
 export type TaskTemplateDTO = {
   wardId?: string,
   id: string,
   name: string,
   notes: string,
-  subtasks: {
-    isDone: boolean,
-    id: string,
-    name: string,
-  }[],
+  subtasks: SubTaskDTO[],
   isPublicVisible: boolean,
 }
 
diff --git a/tasks/components/PillLabel.tsx b/tasks/components/PillLabel.tsx
index ad6777a65..22b4ec313 100644
--- a/tasks/components/PillLabel.tsx
+++ b/tasks/components/PillLabel.tsx
@@ -12,21 +12,6 @@ type PillLabelTranslation = TaskStatusTranslationType
 
 const defaultPillLabelTranslation: Translation<TaskStatusTranslationType> = TaskStatusUtil.translation
 
-const mapping = {
-  todo: {
-    mainClassName: 'bg-tag-red-background text-tag-red-text',
-    iconClassName: 'bg-tag-red-icon',
-  },
-  inProgress: {
-    mainClassName: 'bg-tag-yellow-background text-tag-yellow-text',
-    iconClassName: 'bg-tag-yellow-icon',
-  },
-  done: {
-    mainClassName: 'bg-tag-green-background text-tag-green-text',
-    iconClassName: 'bg-tag-green-icon',
-  },
-} as const
-
 export type PillLabelProps = {
   count?: number,
   taskStatus?: TaskStatus,
@@ -40,13 +25,18 @@ export const PillLabel = ({
                             count,
                             taskStatus = 'todo'
                           }: PropsForTranslation<PillLabelTranslation, PillLabelProps>) => {
-  const state = mapping[taskStatus]
+  const taskStatusColor = TaskStatusUtil.colors[taskStatus]
+  const iconColor: Record<TaskStatus, string> = {
+    done: 'bg-done-icon',
+    inProgress: 'bg-inprogress-icon',
+    todo: 'bg-todo-icon',
+  }
   const translation = useTranslation([defaultPillLabelTranslation], overwriteTranslation)
 
   return (
-    <div className={clsx(`row items-center justify-between pl-2 pr-3 py-1 rounded-lg text-sm`, state.mainClassName)}>
+    <div className={clsx(`row items-center justify-between pl-2 pr-3 py-1 rounded-lg text-sm`, taskStatusColor.background, taskStatusColor.text)}>
       <div className="row gap-x-2 items-center">
-        <div className={clsx(`rounded-full w-2 h-2`, state.iconClassName)}/>
+        <div className={clsx(`rounded-full w-2 h-2`, iconColor[taskStatus])}/>
         <span>{translation(taskStatus)}</span>
       </div>
       {count ?? '-'}
@@ -59,7 +49,7 @@ export const PillLabel = ({
 //
 
 export type PillLabelsColumnProps = {
-  unscheduledCount?: number,
+  todoCount?: number,
   inProgressCount?: number,
   doneCount?: number,
 }
@@ -67,10 +57,10 @@ export type PillLabelsColumnProps = {
 /**
  * A column showing the all TaskStates with a PillLabel for each
  */
-export const PillLabelsColumn = ({ unscheduledCount, inProgressCount, doneCount }: PillLabelsColumnProps) => {
+export const PillLabelsColumn = ({ todoCount, inProgressCount, doneCount }: PillLabelsColumnProps) => {
   return (
     <div className="col gap-y-2">
-      <PillLabel count={unscheduledCount} taskStatus="todo"/>
+      <PillLabel count={todoCount} taskStatus="todo"/>
       <PillLabel count={inProgressCount} taskStatus="inProgress"/>
       <PillLabel count={doneCount} taskStatus="done"/>
     </div>
@@ -101,37 +91,38 @@ export const PillLabelBox = ({ unscheduled, inProgress, done }: PillLabelBoxProp
     borderLeftWidth: between,
     borderRightWidth: between,
   }
+
   return (
-    <div className="row gap-x-0 h-6">
+    <div className="flex-row-0 h-6">
       <div
-        className="row rounded-l-md pl-2 pr-1 items-center bg-tag-red-background text-tag-red-text"
+        className="row rounded-l-md pl-2 pr-1 items-center bg-todo-background text-todo-text"
       >
-        <div className="rounded-full w-2 h-2 bg-tag-red-icon mr-1"/>
+        <div className="rounded-full w-2 h-2 bg-todo-icon mr-1"/>
         {unscheduled}
       </div>
       <div
-        className="w-0 h-0 border-solid border-r-transparent border-b-transparent border-tag-red-background"
+        className="w-0 h-0 border-solid border-r-transparent border-b-transparent border-todo-background"
         style={borderStyle}
       />
       <div
-        className="w-0 h-0 border-tag-yellow-background border-solid border-l-transparent border-t-transparent"
+        className="w-0 h-0 border-inprogress-background border-solid border-l-transparent border-t-transparent"
         style={borderStyle}
       />
-      <div className="row px-1 items-center bg-tag-yellow-background text-tag-yellow-text">
-        <div className="rounded-full w-2 h-2 mr-1 bg-tag-yellow-icon"/>
+      <div className="row px-1 items-center bg-inprogress-background text-inprogress-text">
+        <div className="rounded-full w-2 h-2 mr-1 bg-inprogress-icon"/>
         {inProgress}
       </div>
       <div
-        className="w-0 h-0 border-tag-yellow-background border-solid border-r-transparent border-b-transparent"
+        className="w-0 h-0 border-inprogress-background border-solid border-r-transparent border-b-transparent"
         style={borderStyle}
       />
       <div
-        className="w-0 h-0 border-tag-green-background border-solid border-l-transparent border-t-transparent"
+        className="w-0 h-0 border-done-background border-solid border-l-transparent border-t-transparent"
         style={borderStyle}
       />
       <div
-        className="row bg-tag-green-background rounded-r-md pl-1 pr-2 items-center text-tag-green-text">
-        <div className="rounded-full w-2 h-2 bg-tag-green-icon mr-1"/>
+        className="row bg-done-background rounded-r-md pl-1 pr-2 items-center text-done-text">
+        <div className="rounded-full w-2 h-2 bg-done-icon mr-1"/>
         {done}
       </div>
     </div>
diff --git a/tasks/components/RoomOverview.tsx b/tasks/components/RoomOverview.tsx
index e8ac5a4fe..6a39bb052 100644
--- a/tasks/components/RoomOverview.tsx
+++ b/tasks/components/RoomOverview.tsx
@@ -48,9 +48,11 @@ export const RoomOverview = ({ room }: RoomOverviewProps) => {
                         <PatientCard
                           bedName={bed.name}
                           patientName={bed.patient.name}
-                          doneTasks={bed.patient.tasksDone}
-                          inProgressTasks={bed.patient.tasksInProgress}
-                          unscheduledTasks={bed.patient.tasksUnscheduled}
+                          taskCounts={{
+                            done: bed.patient.tasksDone,
+                            inProgress:bed.patient.tasksInProgress,
+                            todo: bed.patient.tasksTodo,
+                          }}
                           onClick={(event) => {
                             event.stopPropagation()
                             if (bed.patient) {
diff --git a/tasks/components/SubtaskView.tsx b/tasks/components/SubtaskView.tsx
index 3e46d5a71..7a831bfaf 100644
--- a/tasks/components/SubtaskView.tsx
+++ b/tasks/components/SubtaskView.tsx
@@ -57,9 +57,9 @@ export const SubtaskView = ({
 
   const translation = useTranslation([defaultSubtaskViewTranslation], overwriteTranslation)
   const isCreatingTask = taskId === ''
-  const addSubtaskMutation = useSubTaskAddMutation(taskId)
+  const addSubtaskMutation = useSubTaskAddMutation()
   const deleteSubtaskMutation = useSubTaskDeleteMutation()
-  const updateSubtaskMutation = useSubTaskUpdateMutation(taskId)
+  const updateSubtaskMutation = useSubTaskUpdateMutation()
 
   const scrollableRef = useRef<Scrollbars>(null)
   const [scrollToBottomFlag, setScrollToBottom] = useState(false)
@@ -94,7 +94,7 @@ export const SubtaskView = ({
         <span className="textstyle-title-normal">{translation('subtasks')}</span>
         <SolidButton
           onClick={() => {
-            const newSubtask = { id: '', name: `${translation('newSubtask')} ${subtasks.length + 1}`, isDone: false }
+            const newSubtask: SubTaskDTO = { id: '', name: `${translation('newSubtask')} ${subtasks.length + 1}`, isDone: false, taskId: taskId ?? '' }
             onChange([...subtasks, newSubtask])
             if (!isCreatingTask) {
               addSubtaskMutation.mutate(newSubtask)
diff --git a/tasks/components/cards/BedCard.tsx b/tasks/components/cards/BedCard.tsx
index a1544bcf4..ccc667aee 100644
--- a/tasks/components/cards/BedCard.tsx
+++ b/tasks/components/cards/BedCard.tsx
@@ -47,7 +47,7 @@ export const BedCard = ({
         {...restCardProps}
       >
         <div className="row justify-between">
-          <span className="textstyle-title-sm">{bedName}</span>
+          <span className="textstyle-title-normal">{bedName}</span>
           <span>{translation('nobody')}</span>
         </div>
         <div className="col grow justify-center items-center">
diff --git a/tasks/components/cards/DragCard.tsx b/tasks/components/cards/DragCard.tsx
index 586927217..c68687392 100644
--- a/tasks/components/cards/DragCard.tsx
+++ b/tasks/components/cards/DragCard.tsx
@@ -27,7 +27,7 @@ export const DragCard = ({
 }: DragCardProps) => {
   return (
     <div className={clsx('card-md border-2', {
-      'hover:brightness-95 border-transparent hover:border-primary cursor-pointer': !cardDragProperties.isDragging && !cardDragProperties.isOver, // default
+      'border-transparent hover:border-primary cursor-pointer': !cardDragProperties.isDragging && !cardDragProperties.isOver, // default
       'border-primary': isSelected,
       'cursor-grabbing': cardDragProperties.isDragging,
       'border-warning border-dashed': cardDragProperties.isOver && cardDragProperties.isDangerous,
diff --git a/tasks/components/cards/PatientCard.tsx b/tasks/components/cards/PatientCard.tsx
index 8676c3520..bd46b078b 100644
--- a/tasks/components/cards/PatientCard.tsx
+++ b/tasks/components/cards/PatientCard.tsx
@@ -1,6 +1,5 @@
-
 import type { Translation } from '@helpwave/hightide'
-import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
+import { type PropsForTranslation, useTranslation } from '@helpwave/hightide'
 import { PillLabelsColumn } from '../PillLabel'
 import { DragCard, type DragCardProps } from './DragCard'
 import clsx from 'clsx'
@@ -18,43 +17,47 @@ const defaultPatientCardTranslations: Translation<PatientCardTranslation> = {
   }
 }
 
+type TaskCounts = {
+  todo: number,
+  inProgress: number,
+  done: number,
+}
+
 export type PatientCardProps = DragCardProps & {
   bedName?: string,
   patientName: string,
-  unscheduledTasks?: number,
-  inProgressTasks?: number,
-  doneTasks?: number,
+  taskCounts?: TaskCounts,
 }
 
 /**
  * A Card for displaying a Patient and the tasks
  */
 export const PatientCard = ({
-  overwriteTranslation,
-  bedName,
-  patientName,
-  unscheduledTasks,
-  inProgressTasks,
-  doneTasks,
-  isSelected,
-  onClick,
-  className,
-  ...restCardProps
-}: PropsForTranslation<PatientCardTranslation, PatientCardProps>) => {
+                              overwriteTranslation,
+                              bedName,
+                              patientName,
+                              taskCounts,
+                              isSelected,
+                              onClick,
+                              className,
+                              ...restCardProps
+                            }: PropsForTranslation<PatientCardTranslation, PatientCardProps>) => {
   const translation = useTranslation([defaultPatientCardTranslations], overwriteTranslation)
   return (
-    <DragCard isSelected={isSelected} onClick={onClick} className={clsx('min-h-40',className)} {...restCardProps}>
+    <DragCard isSelected={isSelected} onClick={onClick} className={clsx('min-h-40', className)} {...restCardProps}>
       <div className="row justify-between">
-        <span className="textstyle-title-sm whitespace-nowrap" >{bedName ?? translation('bedNotAssigned')}</span>
+        <span className="textstyle-title-normal whitespace-nowrap">{bedName ?? translation('bedNotAssigned')}</span>
         <span className="ml-2 truncate">{patientName}</span>
       </div>
-      <div className="min-w-[150px] max-w-[200px] mt-1">
-        <PillLabelsColumn
-          doneCount={doneTasks}
-          inProgressCount={inProgressTasks}
-          unscheduledCount={unscheduledTasks}
-        />
-      </div>
+      {taskCounts && (
+        <div className="min-w-[150px] max-w-[200px] mt-1">
+          <PillLabelsColumn
+            doneCount={taskCounts.done}
+            inProgressCount={taskCounts.inProgress}
+            todoCount={taskCounts.todo}
+          />
+        </div>
+      )}
     </DragCard>
   )
 }
diff --git a/tasks/components/cards/TaskCard.tsx b/tasks/components/cards/TaskCard.tsx
index 537c3b353..ad5c641e6 100644
--- a/tasks/components/cards/TaskCard.tsx
+++ b/tasks/components/cards/TaskCard.tsx
@@ -1,29 +1,35 @@
 import clsx from 'clsx'
-import { ProgressIndicator } from '@helpwave/hightide'
-import { LockIcon } from 'lucide-react'
 import type { Translation } from '@helpwave/hightide'
-import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
-import { Avatar } from '@helpwave/hightide'
-import type { TaskDTO } from '@helpwave/api-services/types/tasks/task'
+import { Avatar, noop, ProgressIndicator, type PropsForTranslation, useTranslation } from '@helpwave/hightide'
+import { LockIcon, UserIcon } from 'lucide-react'
+import type { TaskDTO, TaskStatusTranslationType } from '@helpwave/api-services/types/tasks/task'
+import { TaskStatusUtil } from '@helpwave/api-services/types/tasks/task'
 import { useUserQuery } from '@helpwave/api-services/mutations/users/user_mutations'
 
 type TaskCardTranslation = {
   assigned: string,
+  noDescription: string,
 }
 
 const defaultTaskCardTranslations: Translation<TaskCardTranslation> = {
   en: {
-    assigned: 'assigned'
+    assigned: 'assigned',
+    noDescription: 'No description',
   },
   de: {
-    assigned: 'zugewiesen'
+    assigned: 'zugewiesen',
+    noDescription: 'Keine Beschreibung',
   }
 }
 
+type TranslationType = TaskCardTranslation & TaskStatusTranslationType
+
 export type TaskCardProps = {
   task: TaskDTO,
   onClick: () => void,
-  isSelected: boolean,
+  isSelected?: boolean,
+  showStatus?: boolean,
+  className?: string,
 }
 
 /**
@@ -33,9 +39,11 @@ export const TaskCard = ({
                            overwriteTranslation,
                            task,
                            isSelected = false,
-                           onClick = () => undefined
-                         }: PropsForTranslation<TaskCardTranslation, TaskCardProps>) => {
-  const translation = useTranslation([defaultTaskCardTranslations], overwriteTranslation)
+                           showStatus = false,
+                           onClick = noop,
+                           className,
+                         }: PropsForTranslation<TranslationType, TaskCardProps>) => {
+  const translation = useTranslation([TaskStatusUtil.translation, defaultTaskCardTranslations], overwriteTranslation)
   const progress = task.subtasks.length === 0 ? 1 : task.subtasks.filter(value => value.isDone).length / task.subtasks.length
   const isOverDue = task.dueDate && task.dueDate < new Date() && task.status !== 'done'
 
@@ -44,27 +52,46 @@ export const TaskCard = ({
   return (
     <div
       onClick={onClick}
-      className={clsx('card-md row w-full justify-between !p-2 border-2 hover:brightness-97 hover:border-primary cursor-pointer', {
+      className={clsx('card-md flex-row-2 w-full justify-between !p-2 border-2 hover:border-primary cursor-pointer', {
         'border-negative': isOverDue,
         'border-primary': isSelected && !isOverDue,
-      })}
+      }, className)}
     >
-      <div className="col gap-y-0 overflow-hidden">
-        <div className="row overflow-hidden items-center gap-x-1">
-          {!task.isPublicVisible && <div className="w-[12px]"><LockIcon size={12}/></div>}
-          <span className="textstyle-title-sm truncate">{task.name}</span>
+      <div className="flex-col-2 justify-between overflow-hidden">
+        <div className="flex-col-1 overflow-hidden">
+          <div className="flex-row-1 overflow-hidden items-center">
+            {!task.isPublicVisible && <div className="w-4"><LockIcon size={16}/></div>}
+            <span className="textstyle-title-normal truncate">{task.name}</span>
+          </div>
+          <span
+            className={clsx(
+              'truncate w-full',
+              {
+                'text-description': !!task.notes,
+                'text-disabled-text': !task.notes,
+              }
+            )}
+          >
+            {task.notes ? task.notes : translation('noDescription')}
+        </span>
         </div>
-        <span className="overflow-hidden w-full block text-gray-500 text-ellipsis whitespace-nowrap">
-            {task.notes}
-          </span>
-      </div>
-      <div className="col gap-y-1 w-[24px]">
-        {assignee && assignee.avatarUrl &&
-          <Avatar avatarUrl={assignee.avatarUrl} alt={translation('assigned')} size="tiny"/>}
-        {task.subtasks.length > 0 && (
-          <ProgressIndicator progress={progress}/>
+        {showStatus && (
+          <div
+            className={clsx(
+              'chip justify-start w-min text-nowrap', TaskStatusUtil.colors[task.status].background, TaskStatusUtil.colors[task.status].text
+            )}
+          >
+            {translation(task.status)}
+          </div>
         )}
       </div>
+      <div className="flex-col-2 min-w-6">
+        {(assignee && assignee.avatarUrl) ?
+          (<Avatar avatarUrl={assignee.avatarUrl} alt={translation('assigned')} size="tiny"/>):
+          (<UserIcon className="min-w-6 bg-disabled-background text-disabled-text rounded-full" size={24}/>)
+        }
+        <ProgressIndicator progress={task.subtasks.length > 0 ? progress : 1}/>
+      </div>
     </div>
   )
 }
diff --git a/tasks/components/cards/TaskTemplateCard.tsx b/tasks/components/cards/TaskTemplateCard.tsx
index 5562554a5..72dba55f7 100644
--- a/tasks/components/cards/TaskTemplateCard.tsx
+++ b/tasks/components/cards/TaskTemplateCard.tsx
@@ -50,7 +50,7 @@ export const TaskTemplateCard = ({
     >
       <div className="col w-full gap-y-0">
       <div className="row items-center justify-between overflow-hidden gap-x-1">
-        <h4 className="textstyle-title-sm">{name}</h4>
+        <h4 className="textstyle-title-normal">{name}</h4>
         {typeForLabel && (
           <Chip
             color={typeForLabel === 'ward' ? 'red' : 'default'}
diff --git a/tasks/components/cards/WardCard.tsx b/tasks/components/cards/WardCard.tsx
index 7d9ee2ed2..07b80c92c 100644
--- a/tasks/components/cards/WardCard.tsx
+++ b/tasks/components/cards/WardCard.tsx
@@ -18,9 +18,9 @@ export const WardCard = ({
 }: WardCardProps) => {
   return (
     <EditCard className={clsx('group cursor-pointer', className)} {...editCardProps}>
-      <div className="col gap-y-2">
+      <div className="flex-col-2 justify-between">
         <div className="row w-full overflow-hidden">
-          <span className="textstyle-title-sm flex-1 truncate">{ward.name}</span>
+          <span className="textstyle-title-normal flex-1 truncate">{ward.name}</span>
         </div>
         <div className="row gap-x-1">
           <Bed/>
diff --git a/tasks/components/layout/DashboardDisplay.tsx b/tasks/components/layout/DashboardDisplay.tsx
index 8da9a2718..295752ef9 100644
--- a/tasks/components/layout/DashboardDisplay.tsx
+++ b/tasks/components/layout/DashboardDisplay.tsx
@@ -10,6 +10,13 @@ import { PatientCard } from '../cards/PatientCard'
 import { AddCard } from '@/components/cards/AddCard'
 import { useAuth } from '@helpwave/api-services/authentication/useAuth'
 import { ColumnTitle } from '@/components/ColumnTitle'
+import { useMyTasksQuery } from '@helpwave/api-services/mutations/tasks/task_mutations'
+import { Scrollbars } from 'react-custom-scrollbars-2'
+import { TaskCard } from '@/components/cards/TaskCard'
+import { useMemo, useState } from 'react'
+import type { TaskDTO } from '@helpwave/api-services/types/tasks/task'
+import { TaskStatusUtil } from '@helpwave/api-services/types/tasks/task'
+import { TaskDetailModal } from '@/components/modals/TaskDetailModal'
 
 type DashboardDisplayTranslation = {
   patients: string,
@@ -18,6 +25,8 @@ type DashboardDisplayTranslation = {
   recent: string,
   showAllOrganizations: string,
   addWard: string,
+  myTasks: string,
+  noTasks: string,
 }
 
 const defaultDashboardDisplayTranslations: Translation<DashboardDisplayTranslation> = {
@@ -28,6 +37,8 @@ const defaultDashboardDisplayTranslations: Translation<DashboardDisplayTranslati
     recent: 'Recently used',
     showAllOrganizations: 'Show all organizations',
     addWard: 'Add Ward',
+    myTasks: 'My Tasks',
+    noTasks: 'No tasks'
   },
   de: {
     patients: 'Patienten',
@@ -36,6 +47,8 @@ const defaultDashboardDisplayTranslations: Translation<DashboardDisplayTranslati
     recent: 'Kürzlich Benutzt',
     showAllOrganizations: 'Alle Organisationen anzeigen',
     addWard: 'Station hinzufügen',
+    myTasks: 'Meine Aufgaben',
+    noTasks: 'Keine Aufgaben',
   }
 }
 
@@ -50,6 +63,7 @@ export const DashboardDisplay = ({
   const translation = useTranslation([defaultDashboardDisplayTranslations], overwriteTranslation)
   const { organization } = useAuth()
   const router = useRouter()
+  const [taskDetailModalId, setTaskDetailModalId] = useState<string>()
 
   // TODO replace with recent wards later
   const {
@@ -60,49 +74,111 @@ export const DashboardDisplay = ({
     data: patients,
     isLoading: isLoadingPatients
   } = useRecentPatientsQuery()
+  const {
+    data: tasks,
+    isLoading: isTasksLoading
+  } = useMyTasksQuery()
+
+  const sortedTasks = useMemo<TaskDTO[]>(() => {
+    return [...(tasks ?? [])].sort((a, b) => TaskStatusUtil.compare(a.status, b.status) * -1)
+  }, [tasks])
+
+  const cardWidth = 'min-w-64 max-w-64'
 
   return (
-    <div className="col py-4 px-6 @container">
+    <div className="flex-col-2 py-4 px-6 @container">
+      <TaskDetailModal
+        taskId={taskDetailModalId}
+        isOpen={!!taskDetailModalId}
+        onClose={() => setTaskDetailModalId(undefined)}
+      />
       <InvitationBanner/>
       <ColumnTitle title={translation('recent')}/>
-      <LoadingAndErrorComponent
-        isLoading={isLoadingPatients}
-      >
-        {patients && patients.length > 0 && (
-          <>
-            <ColumnTitle title={translation('patients')} type="subtitle"/>
-            <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
-              {patients?.map(patient => (
-                <PatientCard
-                  key={patient.id}
-                  className={clsx({ '!cursor-not-allowed': !patient.wardId })}
-                  bedName={patient.bed?.name}
-                  patientName={patient.name}
-                  onClick={() => patient.wardId ? router.push(`/ward/${patient.wardId}`) : undefined}
+      <div className="flex-col-6">
+        <LoadingAndErrorComponent isLoading={isTasksLoading} className="min-h-29" minimumLoadingDuration={200}>
+          <div className="col gap-y-1">
+            <ColumnTitle title={translation('myTasks')} type="subtitle"/>
+            <Scrollbars autoHeight={true} autoHide={true}>
+              <div className="flex-row-4">
+                {sortedTasks.length > 0 && sortedTasks.map(task => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    onClick={() => {
+                      setTaskDetailModalId(task.id)
+                    }}
+                    isSelected={false}
+                    showStatus={true}
+                    className={cardWidth}
+                  />
+                ))}
+                {sortedTasks.length === 0 && (
+                  <div
+                    className="card-md flex-row-0 items-center justify-center bg-disabled-background text-disabled-text min-w-64 max-w-64 max-h-30 min-h-30"
+                  >
+                    {translation('noTasks')}
+                  </div>
+                )}
+              </div>
+            </Scrollbars>
+          </div>
+        </LoadingAndErrorComponent>
+        <LoadingAndErrorComponent isLoading={isLoadingWards} className="min-h-28" minimumLoadingDuration={200}>
+          <div className="col gap-y-1">
+            <ColumnTitle title={translation('wards')} type="subtitle"/>
+            <Scrollbars autoHeight={true} autoHide={true}>
+              <div className="flex-row-4">
+                {wards && wards.length > 0 && wards?.map(ward => (
+                  <WardCard
+                    key={ward.id}
+                    ward={ward}
+                    onClick={() => router.push(`/ward/${ward.id}`)}
+                    className={cardWidth}
+                  />
+                ))}
+                <AddCard
+                  text={translation('addWard')}
+                  onClick={() => router.push(`/organizations/${organization?.id}`)}
+                  className={cardWidth}
                 />
-              ))}
-            </div>
-          </>
-        )}
-      </LoadingAndErrorComponent>
-      <LoadingAndErrorComponent isLoading={isLoadingWards}>
-        <div className="col gap-y-1">
-          <ColumnTitle title={translation('wards')} type="subtitle"/>
-          <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
-            {wards && wards.length > 0 && wards?.map(ward => (
-              <WardCard
-                key={ward.id}
-                ward={ward}
-                onClick={() => router.push(`/ward/${ward.id}`)}
-              />
-            ))}
-            <AddCard
-              text={translation('addWard')}
-              onClick={() => router.push(`/organizations/${organization?.id}`)}
-            />
+              </div>
+            </Scrollbars>
           </div>
-        </div>
-      </LoadingAndErrorComponent>
+        </LoadingAndErrorComponent>
+        <LoadingAndErrorComponent isLoading={isLoadingPatients} className="min-h-28" minimumLoadingDuration={200}>
+          {patients && patients.length > 0 && (
+            <div className="col gap-y-1">
+              <ColumnTitle title={translation('patients')} type="subtitle"/>
+              <Scrollbars autoHeight={true} autoHide={true}>
+                <div className="flex-col-4">
+                  <div className="flex-row-4">
+                    {patients?.filter((_, index) => index % 2 == 0).map(patient => (
+                      <PatientCard
+                        key={patient.id}
+                        className={clsx(cardWidth, '!min-h-12', { '!cursor-not-allowed': !patient.wardId })}
+                        bedName={patient.bed?.name}
+                        patientName={patient.name}
+                        onClick={() => patient.wardId ? router.push(`/ward/${patient.wardId}`) : undefined}
+                      />
+                    ))}
+                  </div>
+                  <div className="flex-row-4">
+                    {patients?.filter((_, index) => index % 2 == 1).map(patient => (
+                      <PatientCard
+                        key={patient.id}
+                        className={clsx(cardWidth, '!min-h-12', { '!cursor-not-allowed': !patient.wardId })}
+                        bedName={patient.bed?.name}
+                        patientName={patient.name}
+                        onClick={() => patient.wardId ? router.push(`/ward/${patient.wardId}`) : undefined}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </Scrollbars>
+            </div>
+          )}
+        </LoadingAndErrorComponent>
+      </div>
     </div>
   )
 }
diff --git a/tasks/components/layout/PatientList.tsx b/tasks/components/layout/PatientList.tsx
index 1aeb259a0..c4bd7f706 100644
--- a/tasks/components/layout/PatientList.tsx
+++ b/tasks/components/layout/PatientList.tsx
@@ -204,6 +204,7 @@ export const PatientList = ({
             label={<span className="textstyle-accent">{`${translation('active')} (${filteredActive.length})`}</span>}
             className={clsx('border-2 border-transparent bg-transparent !shadow-none')}
             headerClassName="bg-transparent"
+            contentClassName="!px-0"
           >
             {filteredActive.map(patient => (
               <Draggable
@@ -216,11 +217,11 @@ export const PatientList = ({
                   },
                   discharged: false
                 }}
-                className="not-last:border-b-2 not-last:pb-2 border-b-gray-300"
+                className="not-last:border-b-2 not-last:pb-2 border-b-divider"
               >
                 {() => (
                   <div
-                    className="row justify-between items-center cursor-pointer"
+                    className="row justify-between items-center cursor-pointer mx-2 px-2 py-1 hover:bg-primary/20 rounded-lg"
                     onClick={() => updateContext({
                       ...context,
                       patientId: patient.id,
@@ -228,7 +229,7 @@ export const PatientList = ({
                       bedId: patient.bed.id
                     })}
                   >
-                    <span className="textstyle-title-sm w-1/3 text-ellipsis">{patient.name}</span>
+                    <span className="textstyle-title-normal w-1/3 text-ellipsis">{patient.name}</span>
                     <div className="row flex-1 justify-between items-center">
                       <Chip color="blue" variant="fullyRounded" className="min-w-40 justify-center">
                         {activeLabelText(patient)}
@@ -269,18 +270,18 @@ export const PatientList = ({
                       patient,
                       discharged: false
                     }}
-                    className="not-last:border-b-2 not-last:pb-2 border-b-gray-300"
+                    className="not-last:border-b-2 not-last:pb-2 border-b-divider"
                   >
                     {() => (
                       <div
                         key={patient.id}
-                        className="row rounded items-center cursor-pointer"
+                        className="row rounded items-center cursor-pointer mx-2 px-2 py-1 hover:bg-primary/20 rounded-lg"
                         onClick={() => updateContext({
                           wardId: context.wardId,
                           patientId: patient.id
                         })}
                       >
-                        <span className="textstyle-title-sm w-1/3 text-ellipsis">{patient.name}</span>
+                        <span className="textstyle-title-normal w-1/3 text-ellipsis">{patient.name}</span>
                         <div className="row flex-1 justify-between items-center">
                           <Chip color="yellow" variant="fullyRounded" className="min-w-40 justify-center">
                             {`${translation('unassigned')}`}
@@ -323,18 +324,18 @@ export const PatientList = ({
                       patient,
                       discharged: true
                     }}
-                    className="not-last:border-b-2 not-last:pb-2 border-b-gray-300"
+                    className="not-last:border-b-2 not-last:pb-2 border-b-divider"
                   >
                     {() => (
                       <div
                         key={patient.id}
-                        className="row justify-between items-center"
+                        className="row justify-between items-center cursor-not-pointer mx-2 px-2 py-1 hover:bg-primary/20 rounded-lg"
                         onClick={() => updateContext({
                           wardId: context.wardId,
                           patientId: patient.id
                         })}
                       >
-                        <span className="textstyle-title-sm">{patient.name}</span>
+                        <span className="textstyle-title-normal">{patient.name}</span>
                         <div className="row gap-x-4">
                           <TextButton onClick={event => {
                             event.stopPropagation()
diff --git a/tasks/components/layout/TwoColumn.tsx b/tasks/components/layout/TwoColumn.tsx
index 4ba6a735c..51ec82c40 100644
--- a/tasks/components/layout/TwoColumn.tsx
+++ b/tasks/components/layout/TwoColumn.tsx
@@ -1,7 +1,9 @@
-import { createRef, useEffect, useState, type ReactNode } from 'react'
+import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { Scrollbars } from 'react-custom-scrollbars-2'
 import { ChevronLeft, ChevronRight, GripVertical } from 'lucide-react'
 import clsx from 'clsx'
+import { useResizeCallbackWrapper } from '@helpwave/hightide'
+
 /**
  * Only px and %
  * e.g. 250px or 10%
@@ -12,7 +14,7 @@ type Constraint = {
 }
 
 type ColumnConstraints = {
-  left? : Constraint,
+  left?: Constraint,
   right?: Constraint,
 }
 
@@ -39,18 +41,16 @@ type TwoColumnProps = {
  * of the columns can be changed via the initialLayoutState
  */
 export const TwoColumn = ({
-  right,
-  left,
-  baseLayoutValue = '50%',
-  disableResize = true,
-  constraints = defaultConstraint
-}: TwoColumnProps) => {
-  const ref = createRef<HTMLDivElement>()
+                            right,
+                            left,
+                            baseLayoutValue = '50%',
+                            disableResize = true,
+                            constraints = defaultConstraint
+                          }: TwoColumnProps) => {
+  const ref = useRef<HTMLDivElement>(null)
   const [fullWidth, setFullWidth] = useState(0)
   const [leftWidth, setLeftWidth] = useState(0)
   const [isDragging, setIsDragging] = useState(false)
-  const headerHeight = 64
-  const dividerHitBoxWidth = 24
   constraints = { ...defaultConstraint, ...constraints }
 
   const convertToLeftWidth = (constraint: string, usedFullWidth: number) => {
@@ -81,7 +81,7 @@ export const TwoColumn = ({
     let left = dragPosition
     if (dragPosition < leftMin) {
       left = leftMin
-    } else if (fullWidth - dragPosition - dividerHitBoxWidth < rightMin) {
+    } else if (fullWidth - dragPosition < rightMin) {
       left = fullWidth - rightMin
     }
     return left
@@ -97,29 +97,29 @@ export const TwoColumn = ({
     setFullWidth(newFullWidth)
   }, [ref, baseLayoutValue]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const leftFocus = convertToLeftWidth(baseLayoutValue, fullWidth) < leftWidth - dividerHitBoxWidth / 2
+  const leftFocus = convertToLeftWidth(baseLayoutValue, fullWidth) < leftWidth / 2
   const [scrollbarsBarMaxHeight, setScrollbarsBarMaxHeight] = useState(800)
 
-  const handleWindowResize = () => {
-    setScrollbarsBarMaxHeight(window.innerHeight - headerHeight)
-    setFullWidth(window.innerWidth)
-  }
+  useResizeCallbackWrapper(useCallback(() => {
+    if (ref.current?.scrollHeight) {
+      setScrollbarsBarMaxHeight(ref.current.scrollHeight)
+    }
+    if (ref.current?.offsetWidth) {
+      setFullWidth(ref.current.offsetWidth)
+    }
+  }, [ref]))
 
   useEffect(() => {
-    window.addEventListener('resize', handleWindowResize)
-    return () => {
-      window.removeEventListener('resize', handleWindowResize)
+    if (ref.current?.scrollHeight) {
+      setScrollbarsBarMaxHeight(ref.current.scrollHeight)
     }
   }, [])
 
-  useEffect(handleWindowResize)
-
-  const rightWidth = fullWidth - leftWidth - dividerHitBoxWidth
+  const rightWidth = fullWidth - leftWidth
   return (
     <div
       ref={ref}
-      className={clsx(`relative row`, { 'select-none': isDragging })}
-      style={{ height: `calc(100vh - ${headerHeight}px)` }}
+      className={clsx(`relative row h-full max-h-full`, { 'select-none': isDragging })}
       onMouseMove={event => isDragging ? setLeftWidth(calcPosition(event.pageX)) : undefined}
       onMouseUp={() => setIsDragging(false)}
       onTouchEnd={() => setIsDragging(false)}
@@ -130,41 +130,38 @@ export const TwoColumn = ({
       { /* TODO maybe use the loading animation or something else to create a smoother transition from showing nothing */}
       {fullWidth !== 0 && (
         <>
-          <div
-            className="overflow-hidden"
-            style={{ width: leftWidth + 'px' }}
-          >
+          <div className="overflow-hidden" style={{ width: leftWidth + 'px' }}>
             <Scrollbars autoHide={true} style={{ maxHeight: scrollbarsBarMaxHeight, maxWidth: leftWidth }}>
               {left(leftWidth)}
             </Scrollbars>
           </div>
           <div
-            onMouseDown={() => disableResize ? undefined : setIsDragging(true)}
-            onTouchStart={() => disableResize ? undefined : setIsDragging(true)}
-            className={clsx(`row relative h-full justify-center`, { '!cursor-col-resize': !disableResize })}
-            style={{ width: `${dividerHitBoxWidth}px` }}
+            className={clsx(`absolute flex-col-0 h-full justify-center`)}
+            style={{ left: leftWidth + 'px' }}
           >
-              <div className="bg-gray-300 my-4 rounded-lg w-0.5" />
+            <div className="bg-twocolum-background -translate-x-1/2 h-full my-4 rounded-lg w-0.5"/>
             {!disableResize && (
               <div
-                className="absolute top-[50%] bg-gray-300 rounded-xl w-4 h-12 -translate-y-[50%] col justify-center items-center"
+                className={clsx(
+                  'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 bg-twocolum-background rounded-xl w-4 h-12 flex-col-0 justify-center items-center',
+                  { '!cursor-col-resize': !disableResize }
+                )}
+                onMouseDown={() => disableResize ? undefined : setIsDragging(true)}
+                onTouchStart={() => disableResize ? undefined : setIsDragging(true)}
               >
-                <GripVertical className="text-white"/>
+                <GripVertical className="text-twocolum-text"/>
               </div>
             )}
             {!disableResize && (
               <button
-                className="absolute top-[5%] rounded-full bg-gray-300 hover:bg-gray-400 z-[1] text-white p-0.5"
+                className="absolute top-1/20 -translate-x-1/2 rounded-full bg-twocolum-background text-twocolum-text hover:brightness-90 p-0.5 z-[2]"
                 onClick={() => setLeftWidth(leftFocus ? convertToLeftWidth(baseLayoutValue, fullWidth) : fullWidth - convertToLeftWidth(constraints.right?.min ?? defaultConstraint.right.min, fullWidth))}
               >
                 {leftFocus ? <ChevronLeft/> : <ChevronRight/>}
               </button>
             )}
           </div>
-          <div
-            className="overflow-hidden"
-            style={{ width: (rightWidth) + 'px' }}
-          >
+          <div className="overflow-hidden" style={{ width: (rightWidth) + 'px' }}>
             <Scrollbars autoHide={true} style={{ maxHeight: scrollbarsBarMaxHeight, maxWidth: rightWidth }}>
               {right(rightWidth)}
             </Scrollbars>
diff --git a/tasks/components/modals/TaskDetailModal.tsx b/tasks/components/modals/TaskDetailModal.tsx
index 6b7844448..fc3afb36e 100644
--- a/tasks/components/modals/TaskDetailModal.tsx
+++ b/tasks/components/modals/TaskDetailModal.tsx
@@ -255,15 +255,17 @@ const TaskDetailViewSidebar = ({
   )
 }
 
-export type TaskDetailModalProps = Omit<ModalProps, keyof OverlayHeaderProps> & {
+type CreateInformation = {
+  wardId: string,
+  patientId: string,
+  initialStatus: TaskStatus,
+}
+export type TaskDetailModalProps = Omit<ModalProps, keyof OverlayHeaderProps> & Pick<ModalProps, 'onClose'> & {
   /**
    * A not set or empty taskId is seen as creating a new task
    */
   taskId?: string,
-  wardId: string,
-  patientId: string,
-  onClose: () => void,
-  initialStatus?: TaskStatus,
+  createInformation?: CreateInformation,
 }
 
 /**
@@ -271,11 +273,9 @@ export type TaskDetailModalProps = Omit<ModalProps, keyof OverlayHeaderProps> &
  */
 export const TaskDetailModal = ({
                                   overwriteTranslation,
-                                  patientId,
                                   taskId = '',
-                                  wardId,
-                                  initialStatus,
                                   onClose,
+                                  createInformation,
                                   className,
                                   ...modalProps
                                 }: PropsForTranslation<TaskDetailViewTranslation, TaskDetailModalProps>) => {
@@ -297,14 +297,15 @@ export const TaskDetailModal = ({
 
   const [task, setTask] = useState<TaskDTO>({
     ...emptyTask,
-    status: initialStatus ?? 'todo'
+    patientId: createInformation?.patientId ?? '',
+    status: createInformation?.initialStatus ?? 'todo'
   })
 
   const deleteTaskMutation = useTaskDeleteMutation()
   const updateTaskMutation = useTaskUpdateMutation()
-  const createTaskMutation = useTaskCreateMutation(() => {
-    onClose()
-  }, patientId)
+  const createTaskMutation = useTaskCreateMutation({
+    onSuccess: () => onClose()
+  })
 
   useEffect(() => {
     if (data && taskId) {
@@ -321,7 +322,7 @@ export const TaskDetailModal = ({
     data: wardTaskTemplatesData,
     isLoading: wardTaskTemplatesIsLoading,
     error: wardTaskTemplatesError
-  } = useWardTaskTemplateQuery(wardId)
+  } = useWardTaskTemplateQuery(createInformation?.wardId)
 
   const taskNameMinimumLength = 1
   const isValid = task.name.length >= taskNameMinimumLength
@@ -395,7 +396,7 @@ export const TaskDetailModal = ({
 
   const templateSidebar = (
     <div
-      className="absolute left-[-250px] top-0 col w-[250px] overflow-hidden p-4 pb-0 bg-gray-100 rounded-l-xl h-full"
+      className="absolute left-[-250px] top-0 col w-[250px] overflow-hidden p-4 pb-0 rounded-l-xl h-full bg-task-modal-sidebar-background text-task-modal-sidebar-text"
     >
       {personalTaskTemplatesData && wardTaskTemplatesData && (
         <TaskTemplateListColumn
@@ -405,7 +406,7 @@ export const TaskDetailModal = ({
             setSelectedTemplateId(id)
             setTask({ ...task, name, notes, subtasks })
           }}
-          onColumnEditClick={() => router.push(`/ward/${wardId}/templates`)}
+          onColumnEditClick={() => router.push(`/ward/${createInformation?.wardId}/templates`)}
         />
       )}
       {(personalTaskTemplatesIsLoading || wardTaskTemplatesIsLoading || personalTaskTemplatesError || wardTaskTemplatesError) ?
diff --git a/tasks/components/pill/PillLabel.tsx b/tasks/components/pill/PillLabel.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/tasks/globals.css b/tasks/globals.css
index fbf0d4e62..01769ef78 100644
--- a/tasks/globals.css
+++ b/tasks/globals.css
@@ -4,9 +4,30 @@
 @source "./node_modules/@helpwave/hightide";
 
 @theme {
+  /* Colors */
+  --color-todo-background: var(--color-tag-red-background);
+  --color-todo-text: var(--color-tag-red-text);
+  --color-todo-icon: var(--color-tag-red-icon);
+
+  --color-inprogress-background: var(--color-tag-yellow-background);
+  --color-inprogress-text: var(--color-tag-yellow-text);
+  --color-inprogress-icon: var(--color-tag-yellow-icon);
+
+  --color-done-background: var(--color-tag-green-background);
+  --color-done-text: var(--color-tag-green-text);
+  --color-done-icon: var(--color-tag-green-icon);
+
   /* Header */
   --color-header-background: var(--color-white);
-  --color-header-text: var(--color-text-dark);
+  --color-header-text: var(--color-text-default);
+
+  /* TaskModalSidebar */
+  --color-task-modal-sidebar-background: var(--color-background);
+  --color-task-modal-sidebar-text: var(--color-text-default);
+
+  /* TwoColumn */
+  --color-twocolum-background: #C6C6C6;
+  --color-twocolum-text: #FFFFFF;
 }
 
 @layer base {
@@ -14,6 +35,9 @@
   @variant dark {
     /* Header */
     --color-header-background: var(--color-black);
-    --color-header-text: var(--color-text-light);
+
+    /* TwoColumn */
+    --color-twocolum-background: #363636;
+    --color-twocolum-text: var(--color-description);
   }
 }
diff --git a/tasks/pages/ward/[wardId].tsx b/tasks/pages/ward/[wardId].tsx
index 65c53e205..9a8b68495 100644
--- a/tasks/pages/ward/[wardId].tsx
+++ b/tasks/pages/ward/[wardId].tsx
@@ -329,9 +329,11 @@ const WardOverview: NextPage = ({ overwriteTranslation }: PropsForTranslation<Wa
                 <PatientCard
                   bedName={draggedPatient.bed.name}
                   patientName={draggedPatient.bed.patient.name}
-                  unscheduledTasks={draggedPatient.bed.patient.tasksUnscheduled}
-                  inProgressTasks={draggedPatient.bed.patient.tasksInProgress}
-                  doneTasks={draggedPatient.bed.patient.tasksDone}
+                  taskCounts={{
+                    done: draggedPatient.bed.patient.tasksDone,
+                    inProgress: draggedPatient.bed.patient.tasksInProgress,
+                    todo: draggedPatient.bed.patient.tasksTodo
+                  }}
                 />
               )
             )}

From be9b7005a2b3aa403cfef56cf67619d064f0eb25 Mon Sep 17 00:00:00 2001
From: Felix Thape <felix.thape@gmail.com>
Date: Thu, 17 Jul 2025 22:40:29 +0200
Subject: [PATCH 2/5] feat: implement hightide version 0.1.24

---
 api-services/authentication/useAuth.tsx       |   2 +-
 .../properties/property_mutations.ts          | 193 ++-------------
 .../properties/property_value_mutations.ts    | 160 ++----------
 .../properties/property_view_src_mutations.ts |  59 ++---
 api-services/mutations/tasks/bed_mutations.ts |  90 ++-----
 .../mutations/tasks/patient_mutations.ts      |  26 +-
 .../mutations/tasks/room_mutations.ts         |   2 +-
 .../mutations/tasks/task_mutations.ts         |   8 +
 .../tasks/task_template_mutations.ts          |  25 +-
 .../AttachedPropertyValueService.ts           | 146 +++++++++++
 .../service/properties/PropertyService.ts     | 167 +++++++++++++
 .../properties/PropertyViewSourceService.ts   |  48 ++++
 api-services/service/tasks/BedService.ts      |  47 ++++
 api-services/service/tasks/PatientService.ts  | 213 ++++++++++++++++
 .../service/tasks/TaskTemplateService.ts      |  25 ++
 api-services/service/users/PatientService.ts  | 227 ------------------
 .../types/properties/attached_property.ts     |   4 +-
 api-services/types/properties/property.ts     |  10 +-
 api-services/util/util.ts                     |   6 +-
 customer/pages/settings/index.tsx             |   2 +-
 customer/pages/team/index.tsx                 |   2 +-
 pnpm-lock.yaml                                |  10 +-
 tasks/components/KanbanHeader.tsx             |   2 +
 tasks/components/OrganizationForm.tsx         |   1 -
 .../components/OrganizationInvitationList.tsx |   1 -
 tasks/components/OrganizationMemberList.tsx   |   3 +-
 tasks/components/RoomList.tsx                 |   1 -
 tasks/components/TaskTemplateWardPreview.tsx  |   1 -
 tasks/components/UserInvitationList.tsx       |   3 +-
 tasks/components/UserMenu.tsx                 |   5 +-
 tasks/components/cards/OrganizationCard.tsx   |  17 +-
 tasks/components/cards/TaskCard.tsx           |   4 +-
 tasks/components/cards/UserCard.tsx           |   3 +-
 tasks/components/layout/DashboardDisplay.tsx  |   6 +-
 tasks/components/layout/PatientDetails.tsx    |   8 +-
 tasks/components/layout/PatientList.tsx       |   1 -
 tasks/components/layout/TasksKanbanBoard.tsx  |   1 -
 tasks/components/layout/WardDetails.tsx       |   1 -
 .../layout/property/PropertyDetails.tsx       |  11 +-
 .../layout/property/PropertyDetailsField.tsx  |  12 +-
 .../layout/property/PropertyDetailsRules.tsx  |  18 +-
 .../layout/property/PropertyDisplay.tsx       |   9 +-
 .../layout/property/PropertyEntry.tsx         |  62 ++++-
 .../layout/property/PropertyList.tsx          |  64 +++--
 .../property/PropertySubjectTypeSelect.tsx    |   6 +-
 .../layout/property/SubjectTypeIcon.tsx       |   4 +-
 tasks/components/modals/ManageBedsModal.tsx   |   1 -
 tasks/components/modals/TaskDetailModal.tsx   |   1 -
 tasks/components/selects/AssigneeSelect.tsx   |   3 +-
 tasks/next.config.js                          |   1 +
 tasks/package.json                            |   2 +-
 tasks/pages/_app.tsx                          |  17 +-
 tasks/pages/index.tsx                         |   1 -
 tasks/pages/properties.tsx                    |   6 +-
 tasks/pages/templates.tsx                     |   1 -
 tasks/pages/ward/[wardId].tsx                 |   2 +-
 56 files changed, 945 insertions(+), 806 deletions(-)
 create mode 100644 api-services/service/properties/AttachedPropertyValueService.ts
 create mode 100644 api-services/service/properties/PropertyService.ts
 create mode 100644 api-services/service/properties/PropertyViewSourceService.ts
 create mode 100644 api-services/service/tasks/BedService.ts
 create mode 100644 api-services/service/tasks/PatientService.ts
 create mode 100644 api-services/service/tasks/TaskTemplateService.ts
 delete mode 100644 api-services/service/users/PatientService.ts

diff --git a/api-services/authentication/useAuth.tsx b/api-services/authentication/useAuth.tsx
index 61a53a481..64ccec1b4 100644
--- a/api-services/authentication/useAuth.tsx
+++ b/api-services/authentication/useAuth.tsx
@@ -26,7 +26,7 @@ const UserFromIdTokenClaims = IdTokenClaimsSchema.transform((obj) => ({
   email: obj.email,
   name: obj.name,
   nickname: obj.preferred_username,
-  avatarUrl: `https://cdn.helpwave.de/boringavatar.svg#${obj.sub}`,
+  avatarUrl: `https://cdn.helpwave.de/boringavatar.svg`,
   organization: obj.organization
 }))
 
diff --git a/api-services/mutations/properties/property_mutations.ts b/api-services/mutations/properties/property_mutations.ts
index 0b5ddb3ea..d564fcdb6 100644
--- a/api-services/mutations/properties/property_mutations.ts
+++ b/api-services/mutations/properties/property_mutations.ts
@@ -1,53 +1,14 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { noop } from '@helpwave/hightide'
-import {
-  CreatePropertyRequest,
-  GetPropertiesRequest,
-  GetPropertyRequest,
-  UpdatePropertyRequest
-} from '@helpwave/proto-ts/services/property_svc/v1/property_svc_pb'
-import { FieldType } from '@helpwave/proto-ts/services/property_svc/v1/types_pb'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import { QueryKeys } from '../query_keys'
-import type { Property, SelectData, SelectOption, SubjectType } from '../../types/properties/property'
-import { GRPCConverter } from '../../util/util'
+import type { Property, SelectOption, PropertySubjectType } from '../../types/properties/property'
+import { PropertyService } from '../../service/properties/PropertyService'
 
-export const usePropertyListQuery = (subjectType?: SubjectType) => {
+export const usePropertyListQuery = (subjectType?: PropertySubjectType) => {
   return useQuery({
     queryKey: [QueryKeys.properties, subjectType ?? 'all'],
     queryFn: async (): Promise<Property[]> => {
-      const req = new GetPropertiesRequest()
-      if (subjectType) {
-        req.setSubjectType(GRPCConverter.subjectTypeMapperToGRPC(subjectType))
-      }
-      const result = await APIServices.property.getProperties(req, getAuthenticatedGrpcMetadata())
-      return result.getPropertiesList().filter(value => value.getFieldType() !== FieldType.FIELD_TYPE_UNSPECIFIED).map(property => {
-        const fieldType = GRPCConverter.fieldTypeMapperFromGRPC(property.getFieldType())
-        const selectData = property.getSelectData()
-        const mustHaveSelectData = fieldType === 'singleSelect' || fieldType === 'multiSelect'
-        if (!selectData && mustHaveSelectData) {
-          throw Error('usePropertyListQuery could not find selectData')
-        }
-        return {
-          id: property.getId(),
-          name: property.getName(),
-          description: property.getDescription(),
-          subjectType: GRPCConverter.subjectTypeMapperFromGRPC(property.getSubjectType()),
-          fieldType,
-          isArchived: property.getIsArchived(),
-          setId: property.getSetId(),
-          selectData: mustHaveSelectData ? {
-            isAllowingFreetext: selectData!.getAllowFreetext(),
-            options: selectData!.getOptionsList().map(option => ({
-              id: option.getId(),
-              name: option.getName(),
-              description: option.getDescription(),
-              isCustom: option.getIsCustom()
-            }))
-          } : undefined
-        }
-      })
+      return await PropertyService.getList(subjectType)
     },
   })
 }
@@ -57,89 +18,22 @@ export const usePropertyQuery = (id?: string) => {
     queryKey: [QueryKeys.properties, id],
     enabled: !!id,
     queryFn: async (): Promise<Property> => {
-      if (!id) {
-        throw Error('usePropertyQuery no id in mutate')
-      }
-      const req = new GetPropertyRequest()
-      req.setId(id)
-
-      const result = await APIServices.property.getProperty(req, getAuthenticatedGrpcMetadata())
-
-      const fieldType = GRPCConverter.fieldTypeMapperFromGRPC(result.getFieldType())
-      let selectData: SelectData | undefined
-      if (fieldType === 'singleSelect' || fieldType === 'multiSelect') {
-        const responseSelectData = result.getSelectData()
-        if (!responseSelectData) {
-          throw Error('usePropertyQuery could not find selectData')
-        }
-        selectData = {
-          isAllowingFreetext: responseSelectData.getAllowFreetext(),
-          options: responseSelectData.getOptionsList().map(option => ({
-            id: option.getId(),
-            name: option.getName(),
-            description: option.getDescription(),
-            isCustom: option.getIsCustom()
-          }))
-        }
-      }
-      return {
-        id: result.getId(),
-        name: result.getName(),
-        description: result.getDescription(),
-        subjectType: GRPCConverter.subjectTypeMapperFromGRPC(result.getSubjectType()),
-        fieldType,
-        isArchived: result.getIsArchived(),
-        setId: result.getSetId(),
-        alwaysIncludeForViewSource: result.getAlwaysIncludeForViewSource(),
-        selectData,
-      }
+      return await PropertyService.get(id!)
     },
   })
 }
 
-export const usePropertyCreateMutation = (callback: (property: Property) => void = noop) => {
+export const usePropertyCreateMutation = (options?: UseMutationOptions<Property, unknown, Property>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (property: Property) => {
-      const req = new CreatePropertyRequest()
-      req.setName(property.name)
-      if (property.description) {
-        req.setDescription(property.description)
-      }
-      req.setSubjectType(GRPCConverter.subjectTypeMapperToGRPC(property.subjectType))
-      req.setFieldType(GRPCConverter.fieldTypeMapperToGRPC(property.fieldType))
-      if (property.setId) {
-        req.setSetId(property.setId)
-      }
-      if (property.fieldType === 'singleSelect' || property.fieldType === 'multiSelect') {
-        if (!property.selectData) {
-          throw Error('Select FieldType, but select data not set')
-        }
-        const selectDataVal = new CreatePropertyRequest.SelectData()
-        selectDataVal.setAllowFreetext(property.selectData.isAllowingFreetext)
-        selectDataVal.setOptionsList(property.selectData.options.map(option => {
-          const optionVal = new CreatePropertyRequest.SelectData.SelectOption()
-          optionVal.setName(option.name)
-          if (option.description) {
-            optionVal.setDescription(option.description)
-          }
-          return optionVal
-        }))
-        req.setSelectData(selectDataVal)
-      }
-
-      const result = await APIServices.property.createProperty(req, getAuthenticatedGrpcMetadata())
-
-      const id = result.getPropertyId()
-
-      const newValue = {
-        ...property,
-        id
-      }
-      callback(newValue)
-      return newValue
+      return await PropertyService.create(property)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.properties]).catch(console.error)
     }
   })
@@ -156,62 +50,17 @@ export type PropertyUpdateType = {
   selectUpdate?: PropertySelectDataUpdate,
 }
 
-export const usePropertyUpdateMutation = (callback: (property: Property) => void = noop) => {
+export const usePropertyUpdateMutation = (options?: UseMutationOptions<boolean, unknown, PropertyUpdateType>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async ({ property, selectUpdate }: PropertyUpdateType) => {
-      const req = new UpdatePropertyRequest()
-      req.setId(property.id)
-      req.setName(property.name)
-      req.setIsArchived(property.isArchived)
-      req.setSubjectType(GRPCConverter.subjectTypeMapperToGRPC(property.subjectType))
-      if (property.description) {
-        req.setDescription(property.description)
-      }
-      if (property.setId) {
-        req.setSetId(property.setId)
-      }
-      if (property.fieldType === 'singleSelect' || property.fieldType === 'multiSelect') {
-        if (!property.selectData) {
-          throw Error('Select FieldType, but select data not set')
-        }
-        const selectDataVal = new UpdatePropertyRequest.SelectData()
-        selectDataVal.setAllowFreetext(property.selectData.isAllowingFreetext)
-        if(selectUpdate) {
-          const createList = selectUpdate.add.map(option => {
-            const optionVal = new UpdatePropertyRequest.SelectData.SelectOption()
-            optionVal.setId('')
-            optionVal.setName(option.name)
-            if (option.description) {
-              optionVal.setDescription(option.description)
-            }
-            optionVal.setIsCustom(option.isCustom)
-            return optionVal
-          })
-          const updateList = selectUpdate.update.map(option => {
-            const optionVal = new UpdatePropertyRequest.SelectData.SelectOption()
-            optionVal.setId(option.id)
-            optionVal.setName(option.name)
-            if (option.description) {
-              optionVal.setDescription(option.description)
-            }
-            optionVal.setIsCustom(option.isCustom)
-            return optionVal
-          })
-          selectDataVal.setUpsertOptionsList([...updateList, ...createList])
-          selectDataVal.setRemoveOptionsList(selectUpdate.remove)
-        }
-        req.setSelectData(selectDataVal)
-      }
-
-      const result = await APIServices.property.updateProperty(req, getAuthenticatedGrpcMetadata())
-      if (!result.toObject()) {
-        throw Error('usePropertyUpdateMutation: error in result')
-      }
-      callback(property)
-      return property
+    ...options,
+    mutationFn: async (props) => {
+      return await PropertyService.update(props)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.properties]).catch(console.error)
     }
   })
diff --git a/api-services/mutations/properties/property_value_mutations.ts b/api-services/mutations/properties/property_value_mutations.ts
index 69ed366fb..fcad1adc8 100644
--- a/api-services/mutations/properties/property_value_mutations.ts
+++ b/api-services/mutations/properties/property_value_mutations.ts
@@ -1,164 +1,38 @@
-import { noop } from '@helpwave/hightide'
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
-  AttachPropertyValueRequest,
-  GetAttachedPropertyValuesRequest,
-  GetAttachedPropertyValuesResponse,
-  PatientPropertyMatcher, TaskPropertyMatcher
-} from '@helpwave/proto-ts/services/property_svc/v1/property_value_svc_pb'
-import {
-  Date as ProtoDate
-} from '@helpwave/proto-ts/services/property_svc/v1/types_pb'
-import { ArrayUtil } from '@helpwave/hightide'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import { QueryKeys } from '../query_keys'
-import type { FieldType, SubjectType } from '../../types/properties/property'
-import type { AttachedProperty, DisplayableAttachedProperty } from '../../types/properties/attached_property'
-import { GRPCConverter } from '../../util/util'
-import type { Update } from '../../types/update'
-import { emptyPropertyValue } from '../../types/properties/attached_property'
+import type { PropertySubjectType } from '../../types/properties/property'
+import type { AttachedProperty } from '../../types/properties/attached_property'
+import type {
+  AttachedPropertyMutationUpdate } from '../../service/properties/AttachedPropertyValueService'
+import {
+  AttachedPropertyValueService
+} from '../../service/properties/AttachedPropertyValueService'
 
-export const usePropertyWithValueListQuery = (subjectId: string | undefined, subjectType: SubjectType, wardId?: string) => {
+export const usePropertyWithValueListQuery = (subjectId: string | undefined, subjectType: PropertySubjectType, wardId?: string) => {
   return useQuery({
     queryKey: [QueryKeys.properties, QueryKeys.attachedProperties, subjectId],
     enabled: !!subjectId,
     queryFn: async () => {
-      if (!subjectId) {
-        return undefined
-      }
-      const req = new GetAttachedPropertyValuesRequest()
-
-      switch (subjectType) {
-        case 'task': {
-          const taskMatcher = new TaskPropertyMatcher()
-          taskMatcher.setTaskId(subjectId)
-          if (wardId) taskMatcher.setWardId(wardId)
-          req.setTaskMatcher(taskMatcher)
-          break
-        }
-        case 'patient': {
-          const patientMatcher = new PatientPropertyMatcher()
-          patientMatcher.setPatientId(subjectId)
-          if (wardId) patientMatcher.setWardId(wardId)
-          req.setPatientMatcher(patientMatcher)
-          break
-        }
-      }
-
-      const res = await APIServices.propertyValues.getAttachedPropertyValues(req, getAuthenticatedGrpcMetadata())
-
-      const results: DisplayableAttachedProperty[] = res.getValuesList().map(result => {
-        const selectValue = result.getSelectValue()
-        const valueCase = result.getValueCase()
-        const isValueNotSet = valueCase === GetAttachedPropertyValuesResponse.Value.ValueCase.VALUE_NOT_SET
-
-        return {
-          propertyId: result.getPropertyId(),
-          subjectId,
-          subjectType,
-          name: result.getName(),
-          description: result.getDescription(),
-          fieldType: GRPCConverter.fieldTypeMapperFromGRPC(result.getFieldType()),
-          value: isValueNotSet ? emptyPropertyValue : {
-            textValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.TEXT_VALUE ? undefined : result.getTextValue(),
-            numberValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.NUMBER_VALUE ? undefined : result.getNumberValue(),
-            boolValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.BOOL_VALUE ? undefined : result.getBoolValue(),
-            dateValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.DATE_VALUE ? undefined : result.getDateValue()!.getDate()!.toDate(),
-            dateTimeValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.DATE_TIME_VALUE ? undefined : result.getDateTimeValue()!.toDate(),
-            singleSelectValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.SELECT_VALUE ? undefined : {
-              id: selectValue!.getId(),
-              name: selectValue!.getName(),
-              description: selectValue!.getDescription(),
-            },
-            multiSelectValue: (valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.MULTI_SELECT_VALUE ? [] : result.getMultiSelectValue()!.getSelectValuesList()).map(value => ({
-              id: value.getId(),
-              name: value.getName(),
-              description: value.getDescription()
-            })) ?? [],
-          }
-        }
-      })
-      return results
+      return await AttachedPropertyValueService.get({ subjectId: subjectId!, subjectType, wardId })
     },
   })
 }
 
-type AttachedPropertyMutationUpdate<T extends AttachedProperty> = Update<T> & {
-  fieldType: FieldType,
-}
-
 /**
  * Mutation to insert or update a properties value for a properties attached to a subject
  */
-export const useAttachPropertyMutation = <T extends AttachedProperty>(callback: (property: T) => void = noop) => {
+export const useAttachPropertyMutation = <T extends AttachedProperty>(options?: UseMutationOptions<AttachedProperty, unknown, AttachedPropertyMutationUpdate<T>>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (update: AttachedPropertyMutationUpdate<T>) => {
-      const req = new AttachPropertyValueRequest()
-      const { update: property, previous, fieldType } = update
-
-      req.setPropertyId(property.propertyId)
-        .setSubjectId(property.subjectId)
-
-      switch (fieldType) {
-        case 'text':
-          if (property.value.textValue !== undefined) {
-            req.setTextValue(property.value.textValue)
-          }
-          break
-        case 'number':
-          if (property.value.numberValue !== undefined) {
-            req.setNumberValue(property.value.numberValue)
-          }
-          break
-        case 'checkbox':
-          if (property.value.boolValue !== undefined) {
-            req.setBoolValue(property.value.boolValue)
-          }
-          break
-        case 'date':
-          if (property.value.dateValue !== undefined) {
-            const protoDate = new ProtoDate().setDate(GRPCConverter.dateToTimestamp(property.value.dateValue))
-            req.setDateValue(protoDate)
-          }
-          break
-        case 'dateTime':
-          if (property.value.dateTimeValue !== undefined) {
-            req.setDateTimeValue(GRPCConverter.dateToTimestamp(property.value.dateTimeValue))
-          }
-          break
-        case 'singleSelect':
-          if (property.value.singleSelectValue !== undefined) {
-            req.setSelectValue(property.value.singleSelectValue.id)
-          }
-          break
-        case 'multiSelect':
-          if (property.value.multiSelectValue !== undefined) {
-            const previousOptions = previous?.value.multiSelectValue?.map(value => value.id) ?? []
-            const newOptions = property.value.multiSelectValue.map(value => value.id)
-            const addIds = ArrayUtil.difference(newOptions, previousOptions)
-            const deleteIds = ArrayUtil.difference(previousOptions, newOptions)
-
-            req.setMultiSelectValue(new AttachPropertyValueRequest.MultiSelectValue()
-              .setSelectValuesList(addIds)
-              .setRemoveSelectValuesList(deleteIds))
-          }
-          break
-        default:
-          console.warn('invalid type for property value mutation')
-      }
-
-      await APIServices.propertyValues.attachPropertyValue(req, getAuthenticatedGrpcMetadata())
-
-      const newProperty: T = {
-        ...property,
-      }
-
-      callback(newProperty)
-      return newProperty
+      return await AttachedPropertyValueService.create(update)
     },
-    onSuccess: (data) => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.properties, QueryKeys.attachedProperties, data.subjectId]).catch(console.error)
     },
   })
diff --git a/api-services/mutations/properties/property_view_src_mutations.ts b/api-services/mutations/properties/property_view_src_mutations.ts
index 14c3f2e0f..4d0492294 100644
--- a/api-services/mutations/properties/property_view_src_mutations.ts
+++ b/api-services/mutations/properties/property_view_src_mutations.ts
@@ -1,54 +1,25 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import {
-  FilterUpdate,
-  UpdatePropertyViewRuleRequest
-} from '@helpwave/proto-ts/services/property_svc/v1/property_views_svc_pb'
-import {
-  PatientPropertyMatcher,
-  TaskPropertyMatcher
-} from '@helpwave/proto-ts/services/property_svc/v1/property_value_svc_pb'
 import { QueryKeys } from '../query_keys'
-import type { SubjectType } from '../../types/properties/property'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
-
-type PropertyViewRuleFilterUpdate = {
-  subjectId: string,
-  appendToAlwaysInclude?: string[],
-  removeFromAlwaysInclude?: string[],
-  appendToDontAlwaysInclude?: string[],
-  removeFromDontAlwaysInclude?: string[],
-}
+import type { PropertySubjectType } from '../../types/properties/property'
+import type {
+  PropertyViewRuleFilterUpdate
+} from '../../service/properties/PropertyViewSourceService'
+import {
+  PropertyViewSourceService
+} from '../../service/properties/PropertyViewSourceService'
 
-export const useUpdatePropertyViewRuleRequest = (subjectType: SubjectType, wardId?: string) => {
+export const useUpdatePropertyViewRuleRequest = (subjectType: PropertySubjectType, wardId?: string, options?: UseMutationOptions<boolean, unknown, PropertyViewRuleFilterUpdate>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (update: PropertyViewRuleFilterUpdate) => {
-      const req = new UpdatePropertyViewRuleRequest()
-      if (subjectType === 'patient') {
-        const matcher = new PatientPropertyMatcher().setPatientId(update.subjectId)
-        if (wardId) {
-          matcher.setWardId(wardId)
-        }
-        req.setPatientMatcher(matcher)
-      }
-      if (subjectType === 'task') {
-        const matcher = new TaskPropertyMatcher().setTaskId(update.subjectId)
-        if (wardId) {
-          matcher.setWardId(wardId)
-        }
-        req.setTaskMatcher(matcher)
-      }
-
-      req.setFilterUpdate(new FilterUpdate()
-        .setAppendToAlwaysIncludeList(update.appendToAlwaysInclude ?? [])
-        .setRemoveFromAlwaysIncludeList(update.removeFromAlwaysInclude ?? [])
-        .setAppendToDontAlwaysIncludeList(update.removeFromAlwaysInclude ?? [])
-        .setRemoveFromDontAlwaysIncludeList(update.removeFromDontAlwaysInclude ?? []))
-
-      await APIServices.propertyViewSource.updatePropertyViewRule(req, getAuthenticatedGrpcMetadata())
+      return await PropertyViewSourceService.update(update, subjectType, wardId)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.properties]).catch(console.error)
     }
   })
diff --git a/api-services/mutations/tasks/bed_mutations.ts b/api-services/mutations/tasks/bed_mutations.ts
index 74a79d1c4..378ff628f 100644
--- a/api-services/mutations/tasks/bed_mutations.ts
+++ b/api-services/mutations/tasks/bed_mutations.ts
@@ -1,54 +1,32 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
-  CreateBedRequest,
-  DeleteBedRequest,
-  GetBedRequest,
-  UpdateBedRequest
-} from '@helpwave/proto-ts/services/tasks_svc/v1/bed_svc_pb'
 import { QueryKeys } from '../query_keys'
 import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import type { BedWithRoomId } from '../../types/tasks/bed'
 import { roomOverviewsQueryKey } from './room_mutations'
+import { BedService } from '../../service/tasks/BedService'
 
-export const useBedQuery = (bedId: string | undefined) => {
+export const useBedQuery = (id?: string) => {
   return useQuery({
     queryKey: [QueryKeys.beds],
-    enabled: !!bedId,
+    enabled: !!id,
     queryFn: async () => {
-      const req = new GetBedRequest()
-      if (bedId) {
-        req.setId(bedId)
-      }
-      const res = await APIServices.bed.getBed(req, getAuthenticatedGrpcMetadata())
-
-      const bed: BedWithRoomId = {
-        id: res.getId(),
-        name: res.getName(),
-        roomId: res.getRoomId()
-      }
-
-      return bed
+      return await BedService.get(id!)
     },
   })
 }
 
-export const useBedCreateMutation = () => {
+export const useBedCreateMutation = (options?: UseMutationOptions<BedWithRoomId, unknown, BedWithRoomId>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (bed: BedWithRoomId) => {
-      const req = new CreateBedRequest()
-      req.setRoomId(bed.roomId)
-      req.setName(bed.name)
-      const res = await APIServices.bed.createBed(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('error in BedCreate')
-      }
-
-      return { id: res.getId(), name: bed.name }
+      return await BedService.create(bed)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.beds]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
@@ -56,50 +34,34 @@ export const useBedCreateMutation = () => {
   })
 }
 
-export const useBedUpdateMutation = () => {
+export const useBedUpdateMutation = (options?: UseMutationOptions<boolean, unknown, BedWithRoomId>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (bed: BedWithRoomId) => {
-      const req = new UpdateBedRequest()
-      req.setId(bed.id)
-      req.setName(bed.name)
-      req.setRoomId(bed.roomId)
-
-      const res = await APIServices.bed.updateBed(req, getAuthenticatedGrpcMetadata())
-
-      const obj = res.toObject() // TODO: what is the type of this?
-
-      if (!obj) {
-        throw new Error('error in BedUpdate')
-      }
-
-      return obj
+      return await BedService.update(bed)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([APIServices.bed]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
     },
   })
 }
 
-export const useBedDeleteMutation = () => {
+export const useBedDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (bedId: string) => {
-      const req = new DeleteBedRequest()
-      req.setId(bedId)
-
-      const res = await APIServices.bed.deleteBed(req, getAuthenticatedGrpcMetadata())
-
-      const obj = res.toObject() // TODO: what is the type of this?
-
-      if (!obj) {
-        throw new Error('error in BedDelete')
-      }
-
-      return obj
+      return await BedService.delete(bedId)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([APIServices.bed]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
diff --git a/api-services/mutations/tasks/patient_mutations.ts b/api-services/mutations/tasks/patient_mutations.ts
index 646b2dcc9..9a8698603 100644
--- a/api-services/mutations/tasks/patient_mutations.ts
+++ b/api-services/mutations/tasks/patient_mutations.ts
@@ -4,18 +4,14 @@ import type { PatientDTO } from '../../types/tasks/patient'
 import { QueryKeys } from '../query_keys'
 import type { BedWithPatientId } from '../../types/tasks/bed'
 import { roomOverviewsQueryKey } from './room_mutations'
-import { PatientService } from '../../service/users/PatientService'
+import { PatientService } from '../../service/tasks/PatientService'
 
 export const usePatientDetailsQuery = (patientId?: string) => {
   return useQuery({
     queryKey: [QueryKeys.patients, patientId],
     enabled: !!patientId,
     queryFn: async () => {
-      if (!patientId) {
-        return
-      }
-
-      return await PatientService.getPatientDetails(patientId)
+      return await PatientService.getDetails(patientId!)
     },
   })
 }
@@ -57,33 +53,41 @@ export const useRecentPatientsQuery = () => {
   })
 }
 
-export const usePatientCreateMutation = () => {
+export const usePatientCreateMutation = (options?: UseMutationOptions<PatientDTO, unknown, PatientDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (patient: PatientDTO) => {
       return await PatientService.create(patient)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.rooms]).catch(reason => console.error(reason))
       queryClient.invalidateQueries([QueryKeys.patients]).catch(reason => console.error(reason))
     }
   })
 }
 
-export const usePatientUpdateMutation = () => {
+export const usePatientUpdateMutation = (options?: UseMutationOptions<boolean, unknown, PatientDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (patient: PatientDTO) => {
       return await PatientService.update(patient)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.patients]).catch(reason => console.error(reason))
       queryClient.invalidateQueries([QueryKeys.rooms]).catch(reason => console.error(reason))
     }
   })
 }
 
-export const useAssignBedMutation = (options?: UseMutationOptions<BedWithPatientId, unknown, BedWithPatientId, unknown>) => {
+export const useAssignBedMutation = (options?: UseMutationOptions<boolean, unknown, BedWithPatientId, unknown>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
diff --git a/api-services/mutations/tasks/room_mutations.ts b/api-services/mutations/tasks/room_mutations.ts
index 9d395b0a8..5a43babfa 100644
--- a/api-services/mutations/tasks/room_mutations.ts
+++ b/api-services/mutations/tasks/room_mutations.ts
@@ -60,7 +60,7 @@ export const useRoomOverviewsQuery = (wardId: string | undefined) => {
             patient: !patient ? undefined : {
               id: patient.getId(),
               name: patient.getHumanReadableIdentifier(),
-              tasksUnscheduled: patient.getTasksUnscheduled(),
+              tasksTodo: patient.getTasksUnscheduled(),
               tasksInProgress: patient.getTasksInProgress(),
               tasksDone: patient.getTasksDone()
             }
diff --git a/api-services/mutations/tasks/task_mutations.ts b/api-services/mutations/tasks/task_mutations.ts
index c655c886d..442aac343 100644
--- a/api-services/mutations/tasks/task_mutations.ts
+++ b/api-services/mutations/tasks/task_mutations.ts
@@ -39,6 +39,7 @@ export const useMyTasksQuery = () => {
 export const useTaskCreateMutation = (options?: UseMutationOptions<TaskDTO, unknown, TaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (task: TaskDTO) => {
       return await TaskService.create(task)
     },
@@ -55,6 +56,7 @@ export const useTaskCreateMutation = (options?: UseMutationOptions<TaskDTO, unkn
 export const useTaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, TaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (task: TaskDTO) => {
       return await TaskService.update(task)
     },
@@ -71,6 +73,7 @@ export const useTaskUpdateMutation = (options?: UseMutationOptions<boolean, unkn
 export const useTaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (taskId: string) => {
       return await TaskService.delete(taskId)
     },
@@ -87,6 +90,7 @@ export const useTaskDeleteMutation = (options?: UseMutationOptions<boolean, unkn
 export const useSubTaskAddMutation = (options?: UseMutationOptions<SubTaskDTO, unknown, SubTaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (subtask: SubTaskDTO) => {
       return await TaskSubtaskService.create(subtask)
     },
@@ -102,6 +106,7 @@ export const useSubTaskAddMutation = (options?: UseMutationOptions<SubTaskDTO, u
 export const useSubTaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, SubTaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (subtask: SubTaskDTO) => {
       return await TaskSubtaskService.update(subtask)
     },
@@ -117,6 +122,7 @@ export const useSubTaskUpdateMutation = (options?: UseMutationOptions<boolean, u
 export const useSubTaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (subtaskId: string) => {
       return await TaskSubtaskService.delete(subtaskId)
     },
@@ -132,6 +138,7 @@ export const useSubTaskDeleteMutation = (options?: UseMutationOptions<boolean, u
 export const useAssignTaskMutation = (options?: UseMutationOptions<boolean, unknown, TaskAssignmentRequestProps>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (props: TaskAssignmentRequestProps) => {
       return await TaskService.assign(props)
     },
@@ -147,6 +154,7 @@ export const useAssignTaskMutation = (options?: UseMutationOptions<boolean, unkn
 export const useUnassignTaskMutation = (options?: UseMutationOptions<boolean, unknown, TaskAssignmentRequestProps>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (props: TaskAssignmentRequestProps) => {
       return await TaskService.unassign(props)
     },
diff --git a/api-services/mutations/tasks/task_template_mutations.ts b/api-services/mutations/tasks/task_template_mutations.ts
index 1ba23b1b8..77f056db9 100644
--- a/api-services/mutations/tasks/task_template_mutations.ts
+++ b/api-services/mutations/tasks/task_template_mutations.ts
@@ -13,35 +13,16 @@ import type { TaskTemplateDTO, TaskTemplateFormType } from '../../types/tasks/ta
 import { APIServices } from '../../services'
 import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import type { SubTaskDTO } from '../../types/tasks/task'
+import { TaskTemplateService } from '../../service/tasks/TaskTemplateService'
 
 type QueryKey = 'personalTaskTemplates' | 'wardTaskTemplates'
 
 export const useWardTaskTemplateQuery = (wardId?: string) => {
   return useQuery({
     queryKey: ['wardTaskTemplates', wardId],
+    enabled: !!wardId,
     queryFn: async () => {
-      let wardTaskTemplates: TaskTemplateDTO[] = []
-      if (wardId !== undefined) {
-        const req = new GetAllTaskTemplatesRequest()
-          .setWardId(wardId)
-        const res = await APIServices.taskTemplates.getAllTaskTemplates(req, getAuthenticatedGrpcMetadata())
-        wardTaskTemplates = res.getTemplatesList().map((template) => ({
-          id: template.getId(),
-          wardId,
-          name: template.getName(),
-          notes: template.getDescription(),
-          subtasks: template.getSubtasksList().map((subtask) => ({
-            id: subtask.getId(),
-            name: subtask.getName(),
-            isDone: false,
-            taskId: template.getId(),
-          })),
-          isPublicVisible: template.getIsPublic()
-        }))
-        return wardTaskTemplates
-      }
-
-      return wardTaskTemplates
+      return await TaskTemplateService.getWard(wardId!)
     },
   })
 }
diff --git a/api-services/service/properties/AttachedPropertyValueService.ts b/api-services/service/properties/AttachedPropertyValueService.ts
new file mode 100644
index 000000000..e10a9430e
--- /dev/null
+++ b/api-services/service/properties/AttachedPropertyValueService.ts
@@ -0,0 +1,146 @@
+import type { AttachedProperty, DisplayableAttachedProperty } from '../../types/properties/attached_property'
+import { emptyPropertyValue } from '../../types/properties/attached_property'
+import type { FieldType, PropertySubjectType } from '../../types/properties/property'
+import {
+  AttachPropertyValueRequest,
+  GetAttachedPropertyValuesRequest,
+  GetAttachedPropertyValuesResponse,
+  PatientPropertyMatcher,
+  TaskPropertyMatcher
+} from '@helpwave/proto-ts/services/property_svc/v1/property_value_svc_pb'
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import { GRPCConverter } from '../../util/util'
+import type { Update } from '../../types/update'
+import { Date as ProtoDate } from '@helpwave/proto-ts/services/property_svc/v1/types_pb'
+import { ArrayUtil } from '@helpwave/hightide'
+
+export type AttachedPropertyValueIdentifier = {
+  subjectId: string,
+  subjectType: PropertySubjectType,
+  wardId?: string,
+}
+
+export type AttachedPropertyMutationUpdate<T extends AttachedProperty> = Update<T> & {
+  fieldType: FieldType,
+}
+
+export const AttachedPropertyValueService = {
+  get: async (propertyValueIdentifier: AttachedPropertyValueIdentifier): Promise<DisplayableAttachedProperty[]> => {
+    const { subjectId , subjectType, wardId } = propertyValueIdentifier
+
+    const req = new GetAttachedPropertyValuesRequest()
+
+    switch (subjectType) {
+      case 'task': {
+        const taskMatcher = new TaskPropertyMatcher()
+        taskMatcher.setTaskId(subjectId)
+        if (wardId) taskMatcher.setWardId(wardId)
+        req.setTaskMatcher(taskMatcher)
+        break
+      }
+      case 'patient': {
+        const patientMatcher = new PatientPropertyMatcher()
+        patientMatcher.setPatientId(subjectId)
+        if (wardId) patientMatcher.setWardId(wardId)
+        req.setPatientMatcher(patientMatcher)
+        break
+      }
+    }
+
+    const res = await APIServices.propertyValues.getAttachedPropertyValues(req, getAuthenticatedGrpcMetadata())
+
+    return res.getValuesList().map(result => {
+      const selectValue = result.getSelectValue()
+      const valueCase = result.getValueCase()
+      const isValueNotSet = valueCase === GetAttachedPropertyValuesResponse.Value.ValueCase.VALUE_NOT_SET
+
+      return {
+        propertyId: result.getPropertyId(),
+        subjectId,
+        subjectType,
+        name: result.getName(),
+        description: result.getDescription(),
+        fieldType: GRPCConverter.fieldTypeMapperFromGRPC(result.getFieldType()),
+        value: isValueNotSet ? emptyPropertyValue : {
+          textValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.TEXT_VALUE ? undefined : result.getTextValue(),
+          numberValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.NUMBER_VALUE ? undefined : result.getNumberValue(),
+          boolValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.BOOL_VALUE ? undefined : result.getBoolValue(),
+          dateValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.DATE_VALUE ? undefined : result.getDateValue()!.getDate()!.toDate(),
+          dateTimeValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.DATE_TIME_VALUE ? undefined : result.getDateTimeValue()!.toDate(),
+          singleSelectValue: valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.SELECT_VALUE ? undefined : {
+            id: selectValue!.getId(),
+            name: selectValue!.getName(),
+            description: selectValue!.getDescription(),
+          },
+          multiSelectValue: (valueCase !== GetAttachedPropertyValuesResponse.Value.ValueCase.MULTI_SELECT_VALUE ? [] : result.getMultiSelectValue()!.getSelectValuesList()).map(value => ({
+            id: value.getId(),
+            name: value.getName(),
+            description: value.getDescription()
+          })) ?? [],
+        }
+      }
+    })
+  },
+  create: async <T extends AttachedProperty>(update: AttachedPropertyMutationUpdate<T>): Promise<AttachedProperty> => {
+    const req = new AttachPropertyValueRequest()
+    const { update: property, previous, fieldType } = update
+
+    req.setPropertyId(property.propertyId)
+      .setSubjectId(property.subjectId)
+
+    switch (fieldType) {
+      case 'text':
+        if (property.value.textValue !== undefined) {
+          req.setTextValue(property.value.textValue)
+        }
+        break
+      case 'number':
+        if (property.value.numberValue !== undefined) {
+          req.setNumberValue(property.value.numberValue)
+        }
+        break
+      case 'checkbox':
+        if (property.value.boolValue !== undefined) {
+          req.setBoolValue(property.value.boolValue)
+        }
+        break
+      case 'date':
+        if (property.value.dateValue !== undefined) {
+          const protoDate = new ProtoDate().setDate(GRPCConverter.dateToTimestamp(property.value.dateValue))
+          req.setDateValue(protoDate)
+        }
+        break
+      case 'dateTime':
+        if (property.value.dateTimeValue !== undefined) {
+          req.setDateTimeValue(GRPCConverter.dateToTimestamp(property.value.dateTimeValue))
+        }
+        break
+      case 'singleSelect':
+        if (property.value.singleSelectValue !== undefined) {
+          req.setSelectValue(property.value.singleSelectValue.id)
+        }
+        break
+      case 'multiSelect':
+        if (property.value.multiSelectValue !== undefined) {
+          const previousOptions = previous?.value.multiSelectValue?.map(value => value.id) ?? []
+          const newOptions = property.value.multiSelectValue.map(value => value.id)
+          const addIds = ArrayUtil.difference(newOptions, previousOptions)
+          const deleteIds = ArrayUtil.difference(previousOptions, newOptions)
+
+          req.setMultiSelectValue(new AttachPropertyValueRequest.MultiSelectValue()
+            .setSelectValuesList(addIds)
+            .setRemoveSelectValuesList(deleteIds))
+        }
+        break
+      default:
+        console.warn('invalid type for property value mutation')
+    }
+
+    await APIServices.propertyValues.attachPropertyValue(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      ...property,
+    }
+  }
+}
diff --git a/api-services/service/properties/PropertyService.ts b/api-services/service/properties/PropertyService.ts
new file mode 100644
index 000000000..40a0822c3
--- /dev/null
+++ b/api-services/service/properties/PropertyService.ts
@@ -0,0 +1,167 @@
+import type { Property, PropertySelectData, PropertySubjectType } from '../../types/properties/property'
+import {
+  CreatePropertyRequest,
+  GetPropertiesRequest,
+  GetPropertyRequest, UpdatePropertyRequest
+} from '@helpwave/proto-ts/services/property_svc/v1/property_svc_pb'
+import { GRPCConverter } from '../../util/util'
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import { FieldType } from '@helpwave/proto-ts/services/property_svc/v1/types_pb'
+import type { PropertyUpdateType } from '../../mutations/properties/property_mutations'
+
+export const PropertyService = {
+  get: async (id: string): Promise<Property> => {
+    const req = new GetPropertyRequest()
+    req.setId(id)
+
+    const result = await APIServices.property.getProperty(req, getAuthenticatedGrpcMetadata())
+
+    const fieldType = GRPCConverter.fieldTypeMapperFromGRPC(result.getFieldType())
+    let selectData: PropertySelectData | undefined
+    if (fieldType === 'singleSelect' || fieldType === 'multiSelect') {
+      const responseSelectData = result.getSelectData()
+      if (!responseSelectData) {
+        throw Error('usePropertyQuery could not find selectData')
+      }
+      selectData = {
+        isAllowingFreetext: responseSelectData.getAllowFreetext(),
+        options: responseSelectData.getOptionsList().map(option => ({
+          id: option.getId(),
+          name: option.getName(),
+          description: option.getDescription(),
+          isCustom: option.getIsCustom()
+        }))
+      }
+    }
+    return {
+      id: result.getId(),
+      name: result.getName(),
+      description: result.getDescription(),
+      subjectType: GRPCConverter.subjectTypeMapperFromGRPC(result.getSubjectType()),
+      fieldType,
+      isArchived: result.getIsArchived(),
+      setId: result.getSetId(),
+      alwaysIncludeForViewSource: result.getAlwaysIncludeForViewSource(),
+      selectData,
+    }
+  },
+  getList: async (subjectType?: PropertySubjectType): Promise<Property[]> => {
+    const req = new GetPropertiesRequest()
+    if (subjectType) {
+      req.setSubjectType(GRPCConverter.subjectTypeMapperToGRPC(subjectType))
+    }
+    const result = await APIServices.property.getProperties(req, getAuthenticatedGrpcMetadata())
+    return result.getPropertiesList().filter(value => value.getFieldType() !== FieldType.FIELD_TYPE_UNSPECIFIED).map(property => {
+      const fieldType = GRPCConverter.fieldTypeMapperFromGRPC(property.getFieldType())
+      const selectData = property.getSelectData()
+      const mustHaveSelectData = fieldType === 'singleSelect' || fieldType === 'multiSelect'
+      if (!selectData && mustHaveSelectData) {
+        throw Error('usePropertyListQuery could not find selectData')
+      }
+      return {
+        id: property.getId(),
+        name: property.getName(),
+        description: property.getDescription(),
+        subjectType: GRPCConverter.subjectTypeMapperFromGRPC(property.getSubjectType()),
+        fieldType,
+        isArchived: property.getIsArchived(),
+        setId: property.getSetId(),
+        selectData: mustHaveSelectData ? {
+          isAllowingFreetext: selectData!.getAllowFreetext(),
+          options: selectData!.getOptionsList().map(option => ({
+            id: option.getId(),
+            name: option.getName(),
+            description: option.getDescription(),
+            isCustom: option.getIsCustom()
+          }))
+        } : undefined
+      }
+    })
+  },
+  create: async (property: Property): Promise<Property> => {
+    const req = new CreatePropertyRequest()
+    req.setName(property.name)
+    if (property.description) {
+      req.setDescription(property.description)
+    }
+    req.setSubjectType(GRPCConverter.subjectTypeMapperToGRPC(property.subjectType))
+    req.setFieldType(GRPCConverter.fieldTypeMapperToGRPC(property.fieldType))
+    if (property.setId) {
+      req.setSetId(property.setId)
+    }
+    if (property.fieldType === 'singleSelect' || property.fieldType === 'multiSelect') {
+      if (!property.selectData) {
+        throw Error('Select FieldType, but select data not set')
+      }
+      const selectDataVal = new CreatePropertyRequest.SelectData()
+      selectDataVal.setAllowFreetext(property.selectData.isAllowingFreetext)
+      selectDataVal.setOptionsList(property.selectData.options.map(option => {
+        const optionVal = new CreatePropertyRequest.SelectData.SelectOption()
+        optionVal.setName(option.name)
+        if (option.description) {
+          optionVal.setDescription(option.description)
+        }
+        return optionVal
+      }))
+      req.setSelectData(selectDataVal)
+    }
+
+    const result = await APIServices.property.createProperty(req, getAuthenticatedGrpcMetadata())
+
+    const id = result.getPropertyId()
+
+    return {
+      ...property,
+      id
+    }
+  },
+  update: async ({ property, selectUpdate }: PropertyUpdateType): Promise<boolean> => {
+    const req = new UpdatePropertyRequest()
+    req.setId(property.id)
+    req.setName(property.name)
+    req.setIsArchived(property.isArchived)
+    req.setSubjectType(GRPCConverter.subjectTypeMapperToGRPC(property.subjectType))
+    if (property.description) {
+      req.setDescription(property.description)
+    }
+    if (property.setId) {
+      req.setSetId(property.setId)
+    }
+    if (property.fieldType === 'singleSelect' || property.fieldType === 'multiSelect') {
+      if (!property.selectData) {
+        throw Error('Select FieldType, but select data not set')
+      }
+      const selectDataVal = new UpdatePropertyRequest.SelectData()
+      selectDataVal.setAllowFreetext(property.selectData.isAllowingFreetext)
+      if (selectUpdate) {
+        const createList = selectUpdate.add.map(option => {
+          const optionVal = new UpdatePropertyRequest.SelectData.SelectOption()
+          optionVal.setId('')
+          optionVal.setName(option.name)
+          if (option.description) {
+            optionVal.setDescription(option.description)
+          }
+          optionVal.setIsCustom(option.isCustom)
+          return optionVal
+        })
+        const updateList = selectUpdate.update.map(option => {
+          const optionVal = new UpdatePropertyRequest.SelectData.SelectOption()
+          optionVal.setId(option.id)
+          optionVal.setName(option.name)
+          if (option.description) {
+            optionVal.setDescription(option.description)
+          }
+          optionVal.setIsCustom(option.isCustom)
+          return optionVal
+        })
+        selectDataVal.setUpsertOptionsList([...updateList, ...createList])
+        selectDataVal.setRemoveOptionsList(selectUpdate.remove)
+      }
+      req.setSelectData(selectDataVal)
+    }
+
+    const result = await APIServices.property.updateProperty(req, getAuthenticatedGrpcMetadata())
+    return !!result
+  }
+}
diff --git a/api-services/service/properties/PropertyViewSourceService.ts b/api-services/service/properties/PropertyViewSourceService.ts
new file mode 100644
index 000000000..5de55a872
--- /dev/null
+++ b/api-services/service/properties/PropertyViewSourceService.ts
@@ -0,0 +1,48 @@
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import {
+  FilterUpdate,
+  UpdatePropertyViewRuleRequest
+} from '@helpwave/proto-ts/services/property_svc/v1/property_views_svc_pb'
+import {
+  PatientPropertyMatcher,
+  TaskPropertyMatcher
+} from '@helpwave/proto-ts/services/property_svc/v1/property_value_svc_pb'
+import type { PropertySubjectType } from '../../types/properties/property'
+
+export type PropertyViewRuleFilterUpdate = {
+  subjectId: string,
+  appendToAlwaysInclude?: string[],
+  removeFromAlwaysInclude?: string[],
+  appendToDontAlwaysInclude?: string[],
+  removeFromDontAlwaysInclude?: string[],
+}
+
+export const PropertyViewSourceService = {
+  update: async (update: PropertyViewRuleFilterUpdate, subjectType: PropertySubjectType, wardId?: string): Promise<boolean> => {
+    const req = new UpdatePropertyViewRuleRequest()
+    if (subjectType === 'patient') {
+      const matcher = new PatientPropertyMatcher().setPatientId(update.subjectId)
+      if (wardId) {
+        matcher.setWardId(wardId)
+      }
+      req.setPatientMatcher(matcher)
+    }
+    if (subjectType === 'task') {
+      const matcher = new TaskPropertyMatcher().setTaskId(update.subjectId)
+      if (wardId) {
+        matcher.setWardId(wardId)
+      }
+      req.setTaskMatcher(matcher)
+    }
+
+    req.setFilterUpdate(new FilterUpdate()
+      .setAppendToAlwaysIncludeList(update.appendToAlwaysInclude ?? [])
+      .setRemoveFromAlwaysIncludeList(update.removeFromAlwaysInclude ?? [])
+      .setAppendToDontAlwaysIncludeList(update.removeFromAlwaysInclude ?? [])
+      .setRemoveFromDontAlwaysIncludeList(update.removeFromDontAlwaysInclude ?? []))
+
+    await APIServices.propertyViewSource.updatePropertyViewRule(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+}
diff --git a/api-services/service/tasks/BedService.ts b/api-services/service/tasks/BedService.ts
new file mode 100644
index 000000000..b42546b95
--- /dev/null
+++ b/api-services/service/tasks/BedService.ts
@@ -0,0 +1,47 @@
+import type { BedWithRoomId } from '../../types/tasks/bed'
+import {
+  CreateBedRequest,
+  DeleteBedRequest,
+  GetBedRequest,
+  UpdateBedRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/bed_svc_pb'
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+
+export const BedService = {
+  get: async (id: string): Promise<BedWithRoomId> => {
+    const req = new GetBedRequest()
+      .setId(id)
+    const res = await APIServices.bed.getBed(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      id: res.getId(),
+      name: res.getName(),
+      roomId: res.getRoomId()
+    }
+  },
+  create: async (bed: BedWithRoomId): Promise<BedWithRoomId> => {
+    const req = new CreateBedRequest()
+      .setRoomId(bed.roomId)
+      .setName(bed.name)
+    const res = await APIServices.bed.createBed(req, getAuthenticatedGrpcMetadata())
+
+    return { ...bed, id: res.getId() }
+  },
+  update: async (bed: BedWithRoomId): Promise<boolean> => {
+    const req = new UpdateBedRequest()
+      .setId(bed.id)
+      .setName(bed.name)
+      .setRoomId(bed.roomId)
+
+    await APIServices.bed.updateBed(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  delete: async (id: string): Promise<boolean> => {
+    const req = new DeleteBedRequest()
+    req.setId(id)
+
+    await APIServices.bed.deleteBed(req, getAuthenticatedGrpcMetadata())
+    return true
+  }
+}
diff --git a/api-services/service/tasks/PatientService.ts b/api-services/service/tasks/PatientService.ts
new file mode 100644
index 000000000..b47c719cf
--- /dev/null
+++ b/api-services/service/tasks/PatientService.ts
@@ -0,0 +1,213 @@
+import type {
+    PatientDetailsDTO, PatientDTO,
+    PatientListDTO,
+    PatientMinimalDTO,
+    PatientWithBedIdDTO,
+    RecentPatientDTO
+} from '../../types/tasks/patient'
+import { GRPCConverter } from '../../util/util'
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import {
+    AssignBedRequest,
+    CreatePatientRequest, DeletePatientRequest, DischargePatientRequest,
+    GetPatientAssignmentByWardRequest,
+    GetPatientDetailsRequest, GetPatientListRequest,
+    GetPatientsByWardRequest, GetRecentPatientsRequest, ReadmitPatientRequest, UnassignBedRequest, UpdatePatientRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/patient_svc_pb'
+import type { RoomWithMinimalBedAndPatient } from '../../types/tasks/room'
+import type { BedWithPatientId } from '../../types/tasks/bed'
+
+export const PatientService = {
+    getDetails: async function (patientId: string): Promise<PatientDetailsDTO> {
+        const req = new GetPatientDetailsRequest()
+        req.setId(patientId)
+
+        const res = await APIServices.patient.getPatientDetails(req, getAuthenticatedGrpcMetadata())
+
+        return {
+            id: res.getId(),
+            note: res.getNotes(),
+            name: res.getHumanReadableIdentifier(),
+            discharged: res.getIsDischarged(),
+            tasks: res.getTasksList().map(task => ({
+                id: task.getId(),
+                name: task.getName(),
+                status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
+                notes: task.getDescription(),
+                isPublicVisible: task.getPublic(),
+                assignee: task.getAssignedUserId(),
+                dueDate: new Date(), // TODO replace later
+                subtasks: task.getSubtasksList().map(subtask => ({
+                    id: subtask.getId(),
+                    name: subtask.getName(),
+                    isDone: subtask.getDone(),
+                    taskId: task.getId(),
+                })),
+                patientId: res.getId(),
+            }))
+        }
+    },
+    getPatientsByWard: async function (wardId: string): Promise<PatientWithBedIdDTO[]> {
+        const req = new GetPatientsByWardRequest()
+        req.setWardId(wardId)
+        const res = await APIServices.patient.getPatientsByWard(req, getAuthenticatedGrpcMetadata())
+
+        return res.getPatientsList().map((patient) => ({
+            id: patient.getId(),
+            name: patient.getHumanReadableIdentifier(),
+            note: patient.getNotes(),
+            bedId: patient.getBedId(),
+        }))
+    },
+    getPatientAssignmentByWard: async function (wardId: string): Promise<RoomWithMinimalBedAndPatient[]> {
+        const req = new GetPatientAssignmentByWardRequest()
+        req.setWardId(wardId)
+        const res = await APIServices.patient.getPatientAssignmentByWard(req, getAuthenticatedGrpcMetadata())
+
+        return res.getRoomsList().map((room) => ({
+            id: room.getId(),
+            name: room.getName(),
+            beds: room.getBedsList().map(bed => {
+                let patient: PatientMinimalDTO | undefined
+                const objectPatient = bed.getPatient()
+                if (objectPatient) {
+                    patient = {
+                        id: objectPatient.getId(),
+                        name: objectPatient.getName()
+                    }
+                }
+                return {
+                    id: bed.getId(),
+                    name: bed.getName(),
+                    patient
+                }
+            })
+        }))
+    },
+    getPatientList: async function (wardId?: string): Promise<PatientListDTO> {
+        const req = new GetPatientListRequest()
+        if (wardId) {
+            req.setWardId(wardId)
+        }
+        const res = await APIServices.patient.getPatientList(req, getAuthenticatedGrpcMetadata())
+
+        return {
+            active: res.getActiveList().map(value => {
+                const room = value.getRoom()
+                const bed = value.getBed()
+
+                if (!room) {
+                    console.error('no room for active patient in PatientList')
+                }
+
+                if (!bed) {
+                    console.error('no room for active patient in PatientList')
+                }
+                return ({
+                    id: value.getId(),
+                    name: value.getHumanReadableIdentifier(),
+                    bed: {
+                        id: bed?.getId() ?? '',
+                        name: bed?.getName() ?? ''
+                    },
+                    room: {
+                        id: room?.getId() ?? '',
+                        name: room?.getName() ?? '',
+                        wardId: room?.getWardId() ?? ''
+                    }
+                })
+            }),
+            discharged: res.getDischargedPatientsList().map(value => ({
+                id: value.getId(),
+                name: value.getHumanReadableIdentifier(),
+            })),
+            unassigned: res.getUnassignedPatientsList().map(value => ({
+                id: value.getId(),
+                name: value.getHumanReadableIdentifier(),
+            }))
+        }
+    },
+    getRecentPatients: async function (): Promise<RecentPatientDTO[]> {
+        const req = new GetRecentPatientsRequest()
+        const res = await APIServices.patient.getRecentPatients(req, getAuthenticatedGrpcMetadata())
+
+        const patients: RecentPatientDTO[] = []
+        for (const patient of res.getRecentPatientsList()) {
+            const room = patient.getRoom()
+            const bed = patient.getBed()
+            let wardId: string | undefined
+            if (room) {
+                wardId = room?.getWardId()
+            }
+
+            patients.push({
+                id: patient.getId(),
+                name: patient.getHumanReadableIdentifier(),
+                wardId,
+                bed: bed ? { id: bed.getId(), name: bed.getName() } : undefined,
+                room: room ? { id: room.getId(), name: room.getId() } : undefined
+            })
+        }
+        return patients
+    },
+    create: async function (patient: PatientDTO): Promise<PatientDTO> {
+        const req = new CreatePatientRequest()
+        req.setNotes(patient.note)
+        req.setHumanReadableIdentifier(patient.name)
+        const res = await APIServices.patient.createPatient(req, getAuthenticatedGrpcMetadata())
+
+        const id = res.getId()
+
+        if (!id) {
+            throw new Error('create room failed')
+        }
+
+        return { ...patient, id }
+    },
+    update: async function (patient: PatientDTO): Promise<boolean> {
+        const req = new UpdatePatientRequest()
+        req.setId(patient.id)
+        req.setNotes(patient.note)
+        req.setHumanReadableIdentifier(patient.name)
+
+        await APIServices.patient.updatePatient(req, getAuthenticatedGrpcMetadata())
+        return true
+    },
+    delete: async function (patientId: string): Promise<boolean> {
+        const req = new DeletePatientRequest()
+        req.setId(patientId)
+
+        await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
+        return true
+    },
+    assignToBed: async function (bedWithPatientId: BedWithPatientId): Promise<boolean> {
+        const req = new AssignBedRequest()
+        req.setId(bedWithPatientId.patientId)
+        req.setBedId(bedWithPatientId.id)
+
+        await APIServices.patient.assignBed(req, getAuthenticatedGrpcMetadata())
+        return true
+    },
+    unassignFromBed: async function (patientId: string): Promise<boolean> {
+        const req = new UnassignBedRequest()
+        req.setId(patientId)
+
+        await APIServices.patient.unassignBed(req, getAuthenticatedGrpcMetadata())
+        return true
+    },
+    discharge: async function (patientId: string): Promise<boolean> {
+        const req = new DischargePatientRequest()
+        req.setId(patientId)
+
+        await APIServices.patient.dischargePatient(req, getAuthenticatedGrpcMetadata())
+        return true
+    },
+    reAdmit: async function (patientId: string): Promise<boolean> {
+        const req = new ReadmitPatientRequest()
+        req.setPatientId(patientId)
+
+        await APIServices.patient.readmitPatient(req, getAuthenticatedGrpcMetadata())
+        return true
+    }
+}
diff --git a/api-services/service/tasks/TaskTemplateService.ts b/api-services/service/tasks/TaskTemplateService.ts
new file mode 100644
index 000000000..7e4ec352a
--- /dev/null
+++ b/api-services/service/tasks/TaskTemplateService.ts
@@ -0,0 +1,25 @@
+import type { TaskTemplateDTO } from '../../types/tasks/tasks_templates'
+import { GetAllTaskTemplatesRequest } from '@helpwave/proto-ts/services/tasks_svc/v1/task_template_svc_pb'
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+
+export const TaskTemplateService = {
+  getWard: async (wardId: string): Promise<TaskTemplateDTO[]> => {
+      const req = new GetAllTaskTemplatesRequest()
+        .setWardId(wardId)
+      const res = await APIServices.taskTemplates.getAllTaskTemplates(req, getAuthenticatedGrpcMetadata())
+      return  res.getTemplatesList().map((template) => ({
+        id: template.getId(),
+        wardId,
+        name: template.getName(),
+        notes: template.getDescription(),
+        subtasks: template.getSubtasksList().map((subtask) => ({
+          id: subtask.getId(),
+          name: subtask.getName(),
+          isDone: false,
+          taskId: template.getId(),
+        })),
+        isPublicVisible: template.getIsPublic()
+      }))
+  }
+}
diff --git a/api-services/service/users/PatientService.ts b/api-services/service/users/PatientService.ts
deleted file mode 100644
index 62baafba7..000000000
--- a/api-services/service/users/PatientService.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-import type {
-  PatientDetailsDTO, PatientDTO,
-  PatientListDTO,
-  PatientMinimalDTO,
-  PatientWithBedIdDTO,
-  RecentPatientDTO
-} from '../../types/tasks/patient'
-import { GRPCConverter } from '../../util/util'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
-import {
-  AssignBedRequest,
-  CreatePatientRequest, DeletePatientRequest, DischargePatientRequest,
-  GetPatientAssignmentByWardRequest,
-  GetPatientDetailsRequest, GetPatientListRequest,
-  GetPatientsByWardRequest, GetRecentPatientsRequest, ReadmitPatientRequest, UnassignBedRequest, UpdatePatientRequest
-} from '@helpwave/proto-ts/services/tasks_svc/v1/patient_svc_pb'
-import type { RoomWithMinimalBedAndPatient } from '../../types/tasks/room'
-import type { BedWithPatientId } from '../../types/tasks/bed'
-
-export const PatientService = {
-  getPatientDetails: async function(patientId: string): Promise<PatientDetailsDTO> {
-    const req = new GetPatientDetailsRequest()
-    req.setId(patientId)
-
-    const res = await APIServices.patient.getPatientDetails(req, getAuthenticatedGrpcMetadata())
-
-    return {
-      id: res.getId(),
-      note: res.getNotes(),
-      name: res.getHumanReadableIdentifier(),
-      discharged: res.getIsDischarged(),
-      tasks: res.getTasksList().map(task => ({
-        id: task.getId(),
-        name: task.getName(),
-        status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
-        notes: task.getDescription(),
-        isPublicVisible: task.getPublic(),
-        assignee: task.getAssignedUserId(),
-        dueDate: new Date(), // TODO replace later
-        subtasks: task.getSubtasksList().map(subtask => ({
-          id: subtask.getId(),
-          name: subtask.getName(),
-          isDone: subtask.getDone(),
-          taskId: task.getId(),
-        })),
-        patientId: res.getId(),
-      }))
-    }
-  },
-  getPatientsByWard: async function(wardId: string): Promise<PatientWithBedIdDTO[]> {
-    const req = new GetPatientsByWardRequest()
-    req.setWardId(wardId)
-    const res = await APIServices.patient.getPatientsByWard(req, getAuthenticatedGrpcMetadata())
-
-    return res.getPatientsList().map((patient) => ({
-      id: patient.getId(),
-      name: patient.getHumanReadableIdentifier(),
-      note: patient.getNotes(),
-      bedId: patient.getBedId(),
-    }))
-  },
-  getPatientAssignmentByWard:  async function(wardId: string): Promise<RoomWithMinimalBedAndPatient[]> {
-    const req = new GetPatientAssignmentByWardRequest()
-    req.setWardId(wardId)
-    const res = await APIServices.patient.getPatientAssignmentByWard(req, getAuthenticatedGrpcMetadata())
-
-    return  res.getRoomsList().map((room) => ({
-      id: room.getId(),
-      name: room.getName(),
-      beds: room.getBedsList().map(bed => {
-        let patient: PatientMinimalDTO | undefined
-        const objectPatient = bed.getPatient()
-        if (objectPatient) {
-          patient = {
-            id: objectPatient.getId(),
-            name: objectPatient.getName()
-          }
-        }
-        return {
-          id: bed.getId(),
-          name: bed.getName(),
-          patient
-        }
-      })
-    }))
-  },
-  getPatientList: async function(wardId?: string): Promise<PatientListDTO> {
-    const req = new GetPatientListRequest()
-    if (wardId) {
-      req.setWardId(wardId)
-    }
-    const res = await APIServices.patient.getPatientList(req, getAuthenticatedGrpcMetadata())
-
-    return {
-      active: res.getActiveList().map(value => {
-        const room = value.getRoom()
-        const bed = value.getBed()
-
-        if (!room) {
-          console.error('no room for active patient in PatientList')
-        }
-
-        if (!bed) {
-          console.error('no room for active patient in PatientList')
-        }
-        return ({
-          id: value.getId(),
-          name: value.getHumanReadableIdentifier(),
-          bed: {
-            id: bed?.getId() ?? '',
-            name: bed?.getName() ?? ''
-          },
-          room: {
-            id: room?.getId() ?? '',
-            name: room?.getName() ?? '',
-            wardId: room?.getWardId() ?? ''
-          }
-        })
-      }),
-      discharged: res.getDischargedPatientsList().map(value => ({
-        id: value.getId(),
-        name: value.getHumanReadableIdentifier(),
-      })),
-      unassigned: res.getUnassignedPatientsList().map(value => ({
-        id: value.getId(),
-        name: value.getHumanReadableIdentifier(),
-      }))
-    }
-  },
-  getRecentPatients: async function(): Promise<RecentPatientDTO[]> {
-    const req = new GetRecentPatientsRequest()
-    const res = await APIServices.patient.getRecentPatients(req, getAuthenticatedGrpcMetadata())
-
-    const patients: RecentPatientDTO[] = []
-    for (const patient of res.getRecentPatientsList()) {
-      const room = patient.getRoom()
-      const bed = patient.getBed()
-      let wardId: string | undefined
-      if (room) {
-        wardId = room?.getWardId()
-      }
-
-      patients.push({
-        id: patient.getId(),
-        name: patient.getHumanReadableIdentifier(),
-        wardId,
-        bed: bed ? { id: bed.getId(), name: bed.getName() } : undefined,
-        room: room ? { id: room.getId(), name: room.getId() } : undefined
-      })
-    }
-    return patients
-  },
-  create: async function(patient: PatientDTO): Promise<PatientDTO> {
-    const req = new CreatePatientRequest()
-    req.setNotes(patient.note)
-    req.setHumanReadableIdentifier(patient.name)
-    const res = await APIServices.patient.createPatient(req, getAuthenticatedGrpcMetadata())
-
-    const id = res.getId()
-
-    if (!id) {
-      throw new Error('create room failed')
-    }
-
-    return { ...patient, id }
-  },
-  update: async function(patient: PatientDTO): Promise<PatientDTO> {
-    const req = new UpdatePatientRequest()
-    req.setId(patient.id)
-    req.setNotes(patient.note)
-    req.setHumanReadableIdentifier(patient.name)
-
-    const res = await APIServices.patient.updatePatient(req, getAuthenticatedGrpcMetadata())
-
-    if (!res.toObject()) {
-      throw new Error('error in PatientUpdate')
-    }
-
-    return patient
-  },
-  delete: async function(patientId: string): Promise<boolean> {
-    const req = new DeletePatientRequest()
-    req.setId(patientId)
-
-    const res = await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
-
-    return !!res.toObject()
-  },
-  assignToBed: async function(bedWithPatientId: BedWithPatientId): Promise<BedWithPatientId> {
-    const req = new AssignBedRequest()
-    req.setId(bedWithPatientId.patientId)
-    req.setBedId(bedWithPatientId.id)
-
-    const res = await APIServices.patient.assignBed(req, getAuthenticatedGrpcMetadata())
-
-    if (!res.toObject()) {
-      throw new Error('assign bed request failed')
-    }
-
-    return bedWithPatientId
-  },
-  unassignFromBed: async function(patientId: string): Promise<boolean> {
-    const req = new UnassignBedRequest()
-    req.setId(patientId)
-
-    const res = await APIServices.patient.unassignBed(req, getAuthenticatedGrpcMetadata())
-
-    return !!res.toObject()
-  },
-  discharge: async function(patientId: string): Promise<boolean> {
-    const req = new DischargePatientRequest()
-    req.setId(patientId)
-
-    const res = await APIServices.patient.dischargePatient(req, getAuthenticatedGrpcMetadata())
-
-    return !!res.toObject()
-  },
-  reAdmit: async function(patientId: string): Promise<boolean> {
-    const req = new ReadmitPatientRequest()
-    req.setPatientId(patientId)
-
-    const res = await APIServices.patient.readmitPatient(req, getAuthenticatedGrpcMetadata())
-
-    return !!res.toObject()
-  }
-}
diff --git a/api-services/types/properties/attached_property.ts b/api-services/types/properties/attached_property.ts
index 23996c1f8..c3e7a840c 100644
--- a/api-services/types/properties/attached_property.ts
+++ b/api-services/types/properties/attached_property.ts
@@ -1,4 +1,4 @@
-import type { FieldType, SelectOption, SubjectType } from './property'
+import type { FieldType, SelectOption, PropertySubjectType } from './property'
 
 export type AttachPropertySelectValue = Omit<SelectOption, 'isCustom'>
 
@@ -39,7 +39,7 @@ export type AttachedProperty = {
 }
 
 export type DisplayableAttachedProperty = AttachedProperty & {
-  subjectType: SubjectType,
+  subjectType: PropertySubjectType,
   fieldType: FieldType,
   name: string,
   description?: string,
diff --git a/api-services/types/properties/property.ts b/api-services/types/properties/property.ts
index 1d1b2427a..a8bb3a947 100644
--- a/api-services/types/properties/property.ts
+++ b/api-services/types/properties/property.ts
@@ -1,5 +1,5 @@
 export const subjectTypeList = ['patient', 'task'] as const
-export type SubjectType = typeof subjectTypeList[number]
+export type PropertySubjectType = typeof subjectTypeList[number]
 
 export const fieldTypeList = ['multiSelect', 'singleSelect', 'number', 'text', 'date', 'dateTime', 'checkbox'] as const
 export type FieldType = typeof fieldTypeList[number]
@@ -11,20 +11,20 @@ export type SelectOption = {
   isCustom: boolean,
 }
 
-export type SelectData = {
+export type PropertySelectData = {
   isAllowingFreetext: boolean,
   options: SelectOption[],
 }
 
 export type Property = {
   id: string,
-  subjectType: SubjectType,
+  subjectType: PropertySubjectType,
   fieldType: FieldType,
   name: string,
   description?: string,
   isArchived: boolean,
   setId?: string,
-  selectData?: SelectData,
+  selectData?: PropertySelectData,
   alwaysIncludeForViewSource?: boolean,
 }
 
@@ -35,7 +35,7 @@ export const emptySelectOption: SelectOption = {
   isCustom: false,
 }
 
-export const emptySelectData: SelectData = {
+export const emptySelectData: PropertySelectData = {
   isAllowingFreetext: true,
   options: [
     {
diff --git a/api-services/util/util.ts b/api-services/util/util.ts
index 4a5af4207..8126a92b4 100644
--- a/api-services/util/util.ts
+++ b/api-services/util/util.ts
@@ -5,7 +5,7 @@ import {
   SubjectType as GRPCSubjectType
 } from '@helpwave/proto-ts/services/property_svc/v1/types_pb'
 import type { TaskStatus } from '../types/tasks/task'
-import type { FieldType, SubjectType } from '../types/properties/property'
+import type { FieldType, PropertySubjectType } from '../types/properties/property'
 
 export const GRPCConverter = {
   taskStatusFromGRPC: (status: ProtoTaskStatus): TaskStatus => {
@@ -46,7 +46,7 @@ export const GRPCConverter = {
 
     return timestamp
   },
-  subjectTypeMapperToGRPC: (subjectType: SubjectType): GRPCSubjectType => {
+  subjectTypeMapperToGRPC: (subjectType: PropertySubjectType): GRPCSubjectType => {
     switch (subjectType) {
       case 'patient':
         return GRPCSubjectType.SUBJECT_TYPE_PATIENT
@@ -54,7 +54,7 @@ export const GRPCConverter = {
         return GRPCSubjectType.SUBJECT_TYPE_TASK
     }
   },
-  subjectTypeMapperFromGRPC: (subjectType: GRPCSubjectType): SubjectType => {
+  subjectTypeMapperFromGRPC: (subjectType: GRPCSubjectType): PropertySubjectType => {
     switch (subjectType) {
       case GRPCSubjectType.SUBJECT_TYPE_PATIENT:
         return 'patient'
diff --git a/customer/pages/settings/index.tsx b/customer/pages/settings/index.tsx
index a08a66b7f..37a5ff3d8 100644
--- a/customer/pages/settings/index.tsx
+++ b/customer/pages/settings/index.tsx
@@ -78,7 +78,7 @@ const Settings: NextPage<PropsForTranslation<SettingsTranslation>> = ({ overwrit
     <Page pageTitle={titleWrapper(translation.settings)}>
       <Section titleText={translation.settings}>
         <span>{translation.settingsDescription}</span>
-        <LoadingAndErrorComponent isLoading={isLoading} hasError={isError} minimumLoadingDuration={200}>
+        <LoadingAndErrorComponent isLoading={isLoading} hasError={isError}>
           {!!data && (
             <ContactInformationForm
               initialValue={data}
diff --git a/customer/pages/team/index.tsx b/customer/pages/team/index.tsx
index 928b443be..38c63d230 100644
--- a/customer/pages/team/index.tsx
+++ b/customer/pages/team/index.tsx
@@ -54,7 +54,7 @@ const Team: NextPage<PropsForTranslation<TeamTranslation, TeamServerSideProps>>
   return (
     <Page pageTitle={titleWrapper(translation.team)} mainContainerClassName="min-h-[auto] pb-6">
       <Section titleText={translation.team}>
-        <LoadingAndErrorComponent isLoading={isLoading} hasError={isError} minimumLoadingDuration={200}>
+        <LoadingAndErrorComponent isLoading={isLoading} hasError={isError}>
           {!!data && (
             <div className="col gap-y-1">
               <span>{translation.teamDescription}</span>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e07fb0e9e..994c89a07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,8 +176,8 @@ importers:
         specifier: workspace:*
         version: link:../api-services
       '@helpwave/hightide':
-        specifier: ^0.1.21
-        version: 0.1.21(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)
+        specifier: ^0.1.24
+        version: 0.1.24(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)
       '@tailwindcss/postcss':
         specifier: ^4.1.3
         version: 4.1.5
@@ -336,8 +336,8 @@ packages:
   '@helpwave/hightide@0.0.17':
     resolution: {integrity: sha512-FTktcuyJ9/Vh3odP6r+LLFWHdqV+dHSxzJTOQrY9FZ4ikHSbhmAOfrszi4CZG69/K5KjGkv9WMuvmn+cK+YkQw==}
 
-  '@helpwave/hightide@0.1.21':
-    resolution: {integrity: sha512-09XS2+Eidk2j+xRwezhgowdIbn8Ujk1RSDxuuKF2afK6AYA54EgaScdTg+qnmFnAUtrO/eJuDbJCROc4rQvGlA==}
+  '@helpwave/hightide@0.1.24':
+    resolution: {integrity: sha512-DPd8k9vFe+4gV8je50Vikt7lHl35fU6bTgcNxMu0VXNFLMnbHLdhAQ27uytC3eiCZ1x6haZBZBxWd7+0AhMKeQ==}
 
   '@helpwave/proto-ts@0.64.0-89e2023.0':
     resolution: {integrity: sha512-EqHsZDOttnCBqcAZ0WiRO32rGMICwvGUxvhSltU0KahFsbIx8o5DZ3l9N8GdB3c/66qe5tabTvVKbUzxf66Yjw==}
@@ -2685,7 +2685,7 @@ snapshots:
       - babel-plugin-react-compiler
       - sass
 
-  '@helpwave/hightide@0.1.21(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)':
+  '@helpwave/hightide@0.1.24(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)':
     dependencies:
       '@radix-ui/react-checkbox': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tailwindcss/cli': 4.1.10
diff --git a/tasks/components/KanbanHeader.tsx b/tasks/components/KanbanHeader.tsx
index 47e200e14..9db1bcb6c 100644
--- a/tasks/components/KanbanHeader.tsx
+++ b/tasks/components/KanbanHeader.tsx
@@ -43,7 +43,9 @@ export const KanbanHeader = ({
   const translation = useTranslation([defaultKanbanHeaderTranslations], overwriteTranslation)
   return (
     <ColumnTitle
+      type="subtitle"
       title={translation('tasks')}
+      titleRowClassName="min-h-10"
       actions={(
         <Input
           value={searchValue}
diff --git a/tasks/components/OrganizationForm.tsx b/tasks/components/OrganizationForm.tsx
index 5946cb3aa..96786d73f 100644
--- a/tasks/components/OrganizationForm.tsx
+++ b/tasks/components/OrganizationForm.tsx
@@ -161,7 +161,6 @@ export const OrganizationForm = ({
       <LoadingAndErrorComponent
         isLoading={!organizationForm}
         className="min-h-69"
-        minimumLoadingDuration={200} // prevents errors flickering
       >
         <div className="col gap-y-1">
           <Input
diff --git a/tasks/components/OrganizationInvitationList.tsx b/tasks/components/OrganizationInvitationList.tsx
index 8d3b33a06..4fe80a235 100644
--- a/tasks/components/OrganizationInvitationList.tsx
+++ b/tasks/components/OrganizationInvitationList.tsx
@@ -123,7 +123,6 @@ export const OrganizationInvitationList = ({
       isLoading={isLoading && !!context.state.organizationId}
       hasError={isError && !!context.state.organizationId}
       className="min-h-72"
-      minimumLoadingDuration={200}
     >
       <InputModal
         className="min-w-[400px]"
diff --git a/tasks/components/OrganizationMemberList.tsx b/tasks/components/OrganizationMemberList.tsx
index 9f6968a3c..93bc1e1a1 100644
--- a/tasks/components/OrganizationMemberList.tsx
+++ b/tasks/components/OrganizationMemberList.tsx
@@ -126,7 +126,7 @@ export const OrganizationMemberList = ({
               navigator.clipboard.writeText(orgMember.email).catch(console.error)
             }}
           >
-            <Avatar avatarUrl={orgMember.avatarURL} alt="" size="small"/>
+            <Avatar image={{ avatarUrl: orgMember.avatarURL, alt: '' }} name={orgMember.name} size="lg" fullyRounded={true}/>
             <div className="col items-start gap-y-0">
               <span className="font-bold truncate">{orgMember.name}</span>
               <span className="textstyle-description text-sm truncate">{orgMember.email}</span>
@@ -210,7 +210,6 @@ export const OrganizationMemberList = ({
         hasError={(isError || !data) && !members}
         isLoading={!members && isLoading}
         className="min-h-131"
-        minimumLoadingDuration={200}
       >
         <ColumnTitle
           title={translation('member', { count: 2 /* Always use plural */ }) + ` (${usedMembers.length})`}
diff --git a/tasks/components/RoomList.tsx b/tasks/components/RoomList.tsx
index 494a9b757..24e53dae9 100644
--- a/tasks/components/RoomList.tsx
+++ b/tasks/components/RoomList.tsx
@@ -287,7 +287,6 @@ export const RoomList = ({
         isLoading={isLoading}
         hasError={isError}
         className="min-h-101"
-        minimumLoadingDuration={200}
       >
         <TableWithSelection
           data={usedRooms}
diff --git a/tasks/components/TaskTemplateWardPreview.tsx b/tasks/components/TaskTemplateWardPreview.tsx
index 09316685f..95612b91c 100644
--- a/tasks/components/TaskTemplateWardPreview.tsx
+++ b/tasks/components/TaskTemplateWardPreview.tsx
@@ -53,7 +53,6 @@ export const TaskTemplateWardPreview = ({
       isLoading={isLoading || !context.state.wardId}
       hasError={isError}
       className="min-h-27"
-      minimumLoadingDuration={200}
     >
       {taskTemplates && (
         <div className="@container flex-col-2">
diff --git a/tasks/components/UserInvitationList.tsx b/tasks/components/UserInvitationList.tsx
index 43f11d733..9f4e7b5f8 100644
--- a/tasks/components/UserInvitationList.tsx
+++ b/tasks/components/UserInvitationList.tsx
@@ -71,7 +71,7 @@ export const UserInvitationList = ({
         const invite = data[cell.row.index]!
         return (
           <div key="name" className="row justify-start items-center gap-x-2 h-8">
-            <Avatar avatarUrl={invite.organization.id} alt="" size="small"/>
+            <Avatar image={{ avatarUrl: invite.organization.id, alt: '' }} name={invite.organization.longName} size="md" fullyRounded={true}/>
             <span>{invite.organization.longName}</span>
           </div>
         )
@@ -127,7 +127,6 @@ export const UserInvitationList = ({
         isLoading={isLoading || !data}
         hasError={isError}
         className="min-h-157"
-        minimumLoadingDuration={200}
       >
         {data && (
           <Table
diff --git a/tasks/components/UserMenu.tsx b/tasks/components/UserMenu.tsx
index 6a76424c0..00ac83d73 100644
--- a/tasks/components/UserMenu.tsx
+++ b/tasks/components/UserMenu.tsx
@@ -87,12 +87,11 @@ export const UserMenu = ({
              className="row relative items-center group cursor-pointer select-none">
           {/* TODO set this color in the css config */}
           <div className="text-sm font-semibold text-description group-hover:text-primary">{user.name}</div>
-          <Avatar avatarUrl={user.avatarUrl} alt={user.email} size="small"/>
+          <Avatar image={{ avatarUrl: user.avatarUrl, alt: user.email }} name={user?.name} size="lg" fullyRounded={true} />
         </div>
       )}>
         {({ close }) => {
-          const withClose = (func: () => void) =>
-          {
+          const withClose = (func: () => void) => {
             return () => {
               func()
               close()
diff --git a/tasks/components/cards/OrganizationCard.tsx b/tasks/components/cards/OrganizationCard.tsx
index aeab8a6d3..3bfff7a15 100644
--- a/tasks/components/cards/OrganizationCard.tsx
+++ b/tasks/components/cards/OrganizationCard.tsx
@@ -1,4 +1,3 @@
-
 import { Mail } from 'lucide-react'
 import type { Translation } from '@helpwave/hightide'
 import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
@@ -31,10 +30,10 @@ export type OrganizationCardProps = EditCardProps & {
  * A Card displaying a Organization
  */
 export const OrganizationCard = ({
-  overwriteTranslation,
-  organization,
-  ...editCardProps
-}: PropsForTranslation<OrganizationCardTranslation, OrganizationCardProps>) => {
+                                   overwriteTranslation,
+                                   organization,
+                                   ...editCardProps
+                                 }: PropsForTranslation<OrganizationCardTranslation, OrganizationCardProps>) => {
   const translation = useTranslation([defaultOrganizationCardTranslation], overwriteTranslation)
   const organizationMemberCount = organization.members.length
 
@@ -55,7 +54,13 @@ export const OrganizationCard = ({
           <div className="text-left my-1 font-semibold text-gray-600 text-sm truncate">
             {`${organizationMemberCount} ${organizationMemberCount > 1 ? translation('members') : translation('member')}`}
           </div>
-          <AvatarGroup avatars={organization.members.map(user => ({ avatarUrl: user.avatarURL, alt: user.name }))}/>
+          <AvatarGroup
+            avatars={organization.members.map(user => ({
+              image: { avatarUrl: user.avatarURL, alt: user.name },
+              name: user.name,
+            }))}
+            fullyRounded={true}
+          />
         </div>
       </div>
     </EditCard>
diff --git a/tasks/components/cards/TaskCard.tsx b/tasks/components/cards/TaskCard.tsx
index ad5c641e6..4f4e92e79 100644
--- a/tasks/components/cards/TaskCard.tsx
+++ b/tasks/components/cards/TaskCard.tsx
@@ -86,8 +86,8 @@ export const TaskCard = ({
         )}
       </div>
       <div className="flex-col-2 min-w-6">
-        {(assignee && assignee.avatarUrl) ?
-          (<Avatar avatarUrl={assignee.avatarUrl} alt={translation('assigned')} size="tiny"/>):
+        {assignee ?
+          (<Avatar image={assignee?.avatarUrl ? { avatarUrl: assignee.avatarUrl, alt: '' } : undefined} name={assignee.name} size="md" fullyRounded={true}/>) :
           (<UserIcon className="min-w-6 bg-disabled-background text-disabled-text rounded-full" size={24}/>)
         }
         <ProgressIndicator progress={task.subtasks.length > 0 ? progress : 1}/>
diff --git a/tasks/components/cards/UserCard.tsx b/tasks/components/cards/UserCard.tsx
index 1368ccde8..ca863ccbb 100644
--- a/tasks/components/cards/UserCard.tsx
+++ b/tasks/components/cards/UserCard.tsx
@@ -1,4 +1,3 @@
-
 import { Avatar } from '@helpwave/hightide'
 import type { User } from '@helpwave/api-services/authentication/useAuth'
 
@@ -13,7 +12,7 @@ const UserCard = ({ user }: UserCardProps) => {
   return (
     <div className="row w-80 h-22 rounded-lg border-2">
       <div className="p-2">
-        <Avatar avatarUrl={user.avatarUrl} alt="profile picture" size="large" />
+        <Avatar image={{ avatarUrl: user.avatarUrl, alt: '' }} name={user.name} size="md" fullyRounded={true}/>
       </div>
       <div className="p-2 w-56 h-20">
         <div className="text-lg font-semibold leading-normal text-slate-600 truncate">{user.nickname}</div>
diff --git a/tasks/components/layout/DashboardDisplay.tsx b/tasks/components/layout/DashboardDisplay.tsx
index 295752ef9..e668601f0 100644
--- a/tasks/components/layout/DashboardDisplay.tsx
+++ b/tasks/components/layout/DashboardDisplay.tsx
@@ -95,7 +95,7 @@ export const DashboardDisplay = ({
       <InvitationBanner/>
       <ColumnTitle title={translation('recent')}/>
       <div className="flex-col-6">
-        <LoadingAndErrorComponent isLoading={isTasksLoading} className="min-h-29" minimumLoadingDuration={200}>
+        <LoadingAndErrorComponent isLoading={isTasksLoading} className="min-h-29">
           <div className="col gap-y-1">
             <ColumnTitle title={translation('myTasks')} type="subtitle"/>
             <Scrollbars autoHeight={true} autoHide={true}>
@@ -123,7 +123,7 @@ export const DashboardDisplay = ({
             </Scrollbars>
           </div>
         </LoadingAndErrorComponent>
-        <LoadingAndErrorComponent isLoading={isLoadingWards} className="min-h-28" minimumLoadingDuration={200}>
+        <LoadingAndErrorComponent isLoading={isLoadingWards} className="min-h-28">
           <div className="col gap-y-1">
             <ColumnTitle title={translation('wards')} type="subtitle"/>
             <Scrollbars autoHeight={true} autoHide={true}>
@@ -145,7 +145,7 @@ export const DashboardDisplay = ({
             </Scrollbars>
           </div>
         </LoadingAndErrorComponent>
-        <LoadingAndErrorComponent isLoading={isLoadingPatients} className="min-h-28" minimumLoadingDuration={200}>
+        <LoadingAndErrorComponent isLoading={isLoadingPatients} className="min-h-28">
           {patients && patients.length > 0 && (
             <div className="col gap-y-1">
               <ColumnTitle title={translation('patients')} type="subtitle"/>
diff --git a/tasks/components/layout/PatientDetails.tsx b/tasks/components/layout/PatientDetails.tsx
index b06a2413d..09de1960b 100644
--- a/tasks/components/layout/PatientDetails.tsx
+++ b/tasks/components/layout/PatientDetails.tsx
@@ -149,10 +149,12 @@ export const PatientDetail = ({
       <TaskDetailModal
         isOpen={isShowingTask}
         onClose={() => setTaskId(undefined)}
-        wardId={wardId}
+        createInformation={{
+          wardId,
+          patientId: newPatient.id,
+          initialStatus: initialTaskStatus ?? 'todo',
+        }}
         taskId={taskId}
-        patientId={newPatient.id}
-        initialStatus={initialTaskStatus}
       />
       <ColumnTitle
         title={translation('patientDetails')}
diff --git a/tasks/components/layout/PatientList.tsx b/tasks/components/layout/PatientList.tsx
index c4bd7f706..8147345fc 100644
--- a/tasks/components/layout/PatientList.tsx
+++ b/tasks/components/layout/PatientList.tsx
@@ -195,7 +195,6 @@ export const PatientList = ({
         hasError={isError || !data}
         isLoading={isLoading}
         className="min-h-128"
-        minimumLoadingDuration={200}
       >
         <div className="col gap-y-4 mb-8">
           <ExpandableUncontrolled
diff --git a/tasks/components/layout/TasksKanbanBoard.tsx b/tasks/components/layout/TasksKanbanBoard.tsx
index 164a62312..38c576028 100644
--- a/tasks/components/layout/TasksKanbanBoard.tsx
+++ b/tasks/components/layout/TasksKanbanBoard.tsx
@@ -187,7 +187,6 @@ export const TasksKanbanBoard = ({
       <LoadingAndErrorComponent
         isLoading={isLoading}
         hasError={isError}
-        minimumLoadingDuration={200}
         className="min-h-78"
       >
         <DndContext
diff --git a/tasks/components/layout/WardDetails.tsx b/tasks/components/layout/WardDetails.tsx
index 5a03f4560..552501f61 100644
--- a/tasks/components/layout/WardDetails.tsx
+++ b/tasks/components/layout/WardDetails.tsx
@@ -107,7 +107,6 @@ export const WardDetail = ({
         isLoading={!isCreatingNewWard && ((isLoading && !ward) || !newWard.id)}
         hasError={isError && !isCreatingNewWard && !ward}
         className="h-full"
-        minimumLoadingDuration={200}
       >
         <ConfirmModal
           headerProps={{
diff --git a/tasks/components/layout/property/PropertyDetails.tsx b/tasks/components/layout/property/PropertyDetails.tsx
index 002ef1bc8..20203ca81 100644
--- a/tasks/components/layout/property/PropertyDetails.tsx
+++ b/tasks/components/layout/property/PropertyDetails.tsx
@@ -7,7 +7,7 @@ import {
   usePropertyQuery,
   usePropertyUpdateMutation
 } from '@helpwave/api-services/mutations/properties/property_mutations'
-import type { Property, SelectData } from '@helpwave/api-services/types/properties/property'
+import type { Property, PropertySelectData } from '@helpwave/api-services/types/properties/property'
 import { emptyProperty, emptySelectData } from '@helpwave/api-services/types/properties/property'
 import { PropertyDetailsBasicInfo } from '@/components/layout/property/PropertyDetailsBasicInfo'
 import { PropertyDetailsField } from '@/components/layout/property/PropertyDetailsField'
@@ -69,8 +69,10 @@ export const PropertyDetails = ({
   const [value, setValue] = useState<Property>({
     ...emptyProperty,
   })
-  const propertyCreateMutation = usePropertyCreateMutation(property => {
-    updateContext({ ...contextState, propertyId: property.id })
+  const propertyCreateMutation = usePropertyCreateMutation({
+    onSuccess: property => {
+      updateContext({ ...contextState, propertyId: property.id })
+    }
   })
 
   useEffect(() => {
@@ -107,7 +109,6 @@ export const PropertyDetails = ({
         isLoading={!isCreatingNewProperty && isLoading}
         hasError={!isCreatingNewProperty && isError}
         className="min-h-128"
-        minimumLoadingDuration={200}
       >
         <PropertyDetailsBasicInfo
           value={value}
@@ -139,7 +140,7 @@ export const PropertyDetails = ({
               const isSelect = fieldDetails.fieldType === 'singleSelect' || fieldDetails.fieldType === 'multiSelect'
               if (isCreatingNewProperty) {
                 setValue(prevState => {
-                  let selectData: SelectData | undefined = fieldDetails.selectData ? { ...fieldDetails.selectData } : undefined
+                  let selectData: PropertySelectData | undefined = fieldDetails.selectData ? { ...fieldDetails.selectData } : undefined
                   if (isSelect) {
                     selectData ??= emptySelectData
                     if (selectUpdate) {
diff --git a/tasks/components/layout/property/PropertyDetailsField.tsx b/tasks/components/layout/property/PropertyDetailsField.tsx
index b8545330a..61dd1f054 100644
--- a/tasks/components/layout/property/PropertyDetailsField.tsx
+++ b/tasks/components/layout/property/PropertyDetailsField.tsx
@@ -13,7 +13,7 @@ import {
   useTranslation
 } from '@helpwave/hightide'
 import { Plus, X } from 'lucide-react'
-import type { FieldType, Property, SelectData, SelectOption } from '@helpwave/api-services/types/properties/property'
+import type { FieldType, Property, PropertySelectData, SelectOption } from '@helpwave/api-services/types/properties/property'
 import { fieldTypeList } from '@helpwave/api-services/types/properties/property'
 import { useEffect, useMemo, useState } from 'react'
 import type { ColumnDef, RowSelectionState } from '@tanstack/react-table'
@@ -44,12 +44,12 @@ const defaultPropertySelectOptionsUpdaterPropsTranslation: Translation<PropertyS
 }
 
 type PropertySelectOptionsUpdaterProps = {
-  value: SelectData,
-  onChange: (data: SelectData, update: SelectDataUpdate) => void,
+  value: PropertySelectData,
+  onChange: (data: PropertySelectData, update: SelectDataUpdate) => void,
 }
 
 type PropertySelectOptionsUpdaterState = {
-  data: SelectData,
+  data: PropertySelectData,
   update: SelectDataUpdate,
 }
 
@@ -281,8 +281,8 @@ export const PropertyDetailsField = ({
       )}
       {isSelectType && (
         <Tile
-          title={{ value: translation('allowCustomValues'), className: 'textstyle-label-md' }}
-          description={{ value: translation('allowCustomValuesDescription') }}
+          title={translation('allowCustomValues')}
+          description={translation('allowCustomValuesDescription')}
           suffix={(
             <Checkbox
               checked={usedValue.selectData!.isAllowingFreetext}
diff --git a/tasks/components/layout/property/PropertyDetailsRules.tsx b/tasks/components/layout/property/PropertyDetailsRules.tsx
index d79893c33..783133aa6 100644
--- a/tasks/components/layout/property/PropertyDetailsRules.tsx
+++ b/tasks/components/layout/property/PropertyDetailsRules.tsx
@@ -1,5 +1,5 @@
 import { Expandable } from '@helpwave/hightide'
-import type { PropsForTranslation , ExpandableProps, Translation } from '@helpwave/hightide'
+import type { PropsForTranslation, ExpandableProps, Translation } from '@helpwave/hightide'
 import { useTranslation } from '@helpwave/hightide'
 import { Tile } from '@helpwave/hightide'
 import { Checkbox } from '@helpwave/hightide'
@@ -43,18 +43,18 @@ export type PropertyDetailsRulesProps = {
  * The Layout for the PropertyDetails basic information input
  */
 export const PropertyDetailsRules = ({
-  overwriteTranslation,
-  value,
-  onChange,
-  onEditComplete,
-  expandableOptions
-}: PropsForTranslation<PropertyDetailsRulesTranslation, PropertyDetailsRulesProps>) => {
+                                       overwriteTranslation,
+                                       value,
+                                       onChange,
+                                       onEditComplete,
+                                       expandableOptions
+                                     }: PropsForTranslation<PropertyDetailsRulesTranslation, PropertyDetailsRulesProps>) => {
   const translation = useTranslation([defaultPropertyDetailsRulesTranslation], overwriteTranslation)
   return (
     <Expandable {...expandableOptions} contentClassName="max-h-128" label={translation('rules')}>
       <Tile
-        title={{ value: translation('alwaysVisible'), className: 'textstyle-label-md' }}
-        description={{ value: translation('alwaysVisibleDescription') }}
+        title={translation('alwaysVisible')}
+        description={translation('alwaysVisibleDescription')}
         suffix={(
           <Checkbox
             checked={value.alwaysIncludeForViewSource ?? false}
diff --git a/tasks/components/layout/property/PropertyDisplay.tsx b/tasks/components/layout/property/PropertyDisplay.tsx
index 92eb62781..fa29e4d2f 100644
--- a/tasks/components/layout/property/PropertyDisplay.tsx
+++ b/tasks/components/layout/property/PropertyDisplay.tsx
@@ -10,7 +10,7 @@ import {
 } from '@helpwave/hightide'
 import { useContext, useEffect, useMemo } from 'react'
 import { Plus, Tag } from 'lucide-react'
-import type { FieldType, Property, SubjectType } from '@helpwave/api-services/types/properties/property'
+import type { FieldType, Property, PropertySubjectType } from '@helpwave/api-services/types/properties/property'
 import { usePropertyListQuery } from '@helpwave/api-services/mutations/properties/property_mutations'
 import { useUpdates } from '@helpwave/api-services/util/useUpdates'
 import { PropertyContext } from '@/pages/properties'
@@ -26,7 +26,7 @@ type PropertyDisplayTranslation = {
   search: string,
   edit: string,
   name: string,
-} & { [key in SubjectType | FieldType]: string }
+} & { [key in PropertySubjectType | FieldType]: string }
 
 const defaultPropertyDisplayTranslation: Translation<PropertyDisplayTranslation> = {
   en: {
@@ -105,8 +105,8 @@ export const PropertyDisplay = ({
         const value = propertyList[cell.row.index]!
         return (
           <Tile
-            title={{ value: value.name }}
-            description={{ value: translation(value.fieldType) }}
+            title={value.name}
+            description={translation(value.fieldType)}
           />
         )
       },
@@ -187,7 +187,6 @@ export const PropertyDisplay = ({
         isLoading={isLoading}
         hasError={isError}
         className="min-h-190"
-        minimumLoadingDuration={200}
       >
         <Table
           data={filteredProperties}
diff --git a/tasks/components/layout/property/PropertyEntry.tsx b/tasks/components/layout/property/PropertyEntry.tsx
index 824266418..c4505e056 100644
--- a/tasks/components/layout/property/PropertyEntry.tsx
+++ b/tasks/components/layout/property/PropertyEntry.tsx
@@ -10,7 +10,11 @@ import {
 import type { Property } from '@helpwave/api-services/types/properties/property'
 import type { AttachedProperty } from '@helpwave/api-services/types/properties/attached_property'
 import { emptyPropertyValue } from '@helpwave/api-services/types/properties/attached_property'
-import { usePropertyQuery } from '@helpwave/api-services/mutations/properties/property_mutations'
+import {
+  usePropertyQuery,
+  usePropertyUpdateMutation
+} from '@helpwave/api-services/mutations/properties/property_mutations'
+import { PropertyService } from '@helpwave/api-services/service/properties/PropertyService'
 
 type PropertyEntryDisplayProps = {
   property: Property,
@@ -50,6 +54,29 @@ export const PropertyEntryDisplay = ({
     return newProperty
   }
 
+  const updatePropertyMutation = usePropertyUpdateMutation({
+    onSuccess: (success, variables) => {
+      if (!success) {
+        return
+      }
+      PropertyService.get(property.id).then((property) => {
+        const update = updater(attachedValue => {
+          const option = property.selectData?.options.find(value => value.name === variables.selectUpdate?.add[0]?.name)
+          if (!option) {
+            return
+          }
+          if (property.fieldType === 'singleSelect') {
+            attachedValue.value.singleSelectValue = option
+          } else if (property.fieldType === 'multiSelect') {
+            attachedValue.value.multiSelectValue = [...attachedValue.value.multiSelectValue, option]
+          }
+        })
+        onChange(update)
+        onEditComplete(update)
+      })
+    }
+  })
+
   switch (property.fieldType) {
     case 'text':
       return (
@@ -141,6 +168,22 @@ export const PropertyEntryDisplay = ({
               label: option.name,
               searchTags: [option.name]
             }))}
+          onAddNew={(name) => {
+            updatePropertyMutation.mutate({
+              property,
+              selectUpdate: {
+                add: [
+                  {
+                    id: '',
+                    name,
+                    isCustom: true,
+                  }
+                ],
+                update: [],
+                remove: []
+              },
+            })
+          }}
           selectedDisplayOverwrite={attachedProperty.value.singleSelectValue?.name}
           alignmentVertical="topOutside"
         />
@@ -170,6 +213,22 @@ export const PropertyEntryDisplay = ({
               selected: !!attachedProperty.value.multiSelectValue.find(value => value.id === option.id),
               searchTags: [option.name]
             }))}
+          onAddNew={(name) => {
+            updatePropertyMutation.mutate({
+              property,
+              selectUpdate: {
+                add: [
+                  {
+                    id: '',
+                    name,
+                    isCustom: true,
+                  }
+                ],
+                update: [],
+                remove: []
+              },
+            })
+          }}
           useChipDisplay={true}
           alignmentVertical="topOutside"
         />
@@ -201,7 +260,6 @@ export const PropertyEntry = ({
     <LoadingAndErrorComponent
       isLoading={isLoading}
       hasError={isError || !property}
-      minimumLoadingDuration={200}
       className="min-h-15"
     >
       <PropertyEntryDisplay property={property!} attachedProperty={attachedProperty} {...restProps}/>
diff --git a/tasks/components/layout/property/PropertyList.tsx b/tasks/components/layout/property/PropertyList.tsx
index 421f4b823..18a24272a 100644
--- a/tasks/components/layout/property/PropertyList.tsx
+++ b/tasks/components/layout/property/PropertyList.tsx
@@ -1,13 +1,12 @@
 import { LoadingAnimation } from '@helpwave/hightide'
-import type { PropsForTranslation , Translation } from '@helpwave/hightide'
+import type { PropsForTranslation, Translation } from '@helpwave/hightide'
 import { useTranslation } from '@helpwave/hightide'
-import { Tile } from '@helpwave/hightide'
 import { Plus, Tag } from 'lucide-react'
 import { LoadingAndErrorComponent } from '@helpwave/hightide'
 import { Menu, MenuItem } from '@helpwave/hightide'
 import { useEffect, useState } from 'react'
 import { SearchableList } from '@helpwave/hightide'
-import type { SubjectType } from '@helpwave/api-services/types/properties/property'
+import type { PropertySubjectType } from '@helpwave/api-services/types/properties/property'
 import {
   useAttachPropertyMutation,
   usePropertyWithValueListQuery
@@ -22,6 +21,7 @@ import {
   useUpdatePropertyViewRuleRequest
 } from '@helpwave/api-services/mutations/properties/property_view_src_mutations'
 import { PropertyEntry } from '@/components/layout/property/PropertyEntry'
+import { ColumnTitle } from '@/components/ColumnTitle'
 
 type PropertyListTranslation = {
   properties: string,
@@ -41,17 +41,17 @@ const defaultPropertyListTranslation: Translation<PropertyListTranslation> = {
 
 export type PropertyListProps = {
   subjectId: string,
-  subjectType: SubjectType,
+  subjectType: PropertySubjectType,
 }
 
 /**
  * A component for listing properties for a subject
  */
 export const PropertyList = ({
-  overwriteTranslation,
-  subjectId,
-  subjectType
-}: PropsForTranslation<PropertyListTranslation, PropertyListProps>) => {
+                               overwriteTranslation,
+                               subjectId,
+                               subjectType
+                             }: PropsForTranslation<PropertyListTranslation, PropertyListProps>) => {
   const translation = useTranslation([defaultPropertyListTranslation], overwriteTranslation)
   const {
     data: propertyList,
@@ -77,20 +77,32 @@ export const PropertyList = ({
       className="min-h-48"
     >
       <div className="col gap-y-2">
-        <Tile
-          title={{ value: translation('properties'), className: 'textstyle-title-lg' }}
-          prefix={<Tag className="text-primary" size={20}/>}
-          className="!gap-x-2"
+        <ColumnTitle
+          type="subtitle"
+          title={(
+            <div className="flex-row-2 items-center">
+              <Tag className="text-primary" size={20}/>
+              {translation('properties')}
+            </div>
+          )}
         />
         {properties && properties.map((property, index) => (
-            <PropertyEntry
-              key={index}
-              attachedProperty={property}
-              onChange={value => setProperties(prevState => prevState
-                .map(value1 => value1.propertyId === value.propertyId && value1.subjectId === value.subjectId ? { ...value1, ...value } : value1))}
-              onEditComplete={value => addOrUpdatePropertyMutation.mutate({ previous: property, update: value, fieldType: property.fieldType })}
-              onRemove={value => addOrUpdatePropertyMutation.mutate({ previous: property, update: value, fieldType: property.fieldType })}
-            />
+          <PropertyEntry
+            key={index}
+            attachedProperty={property}
+            onChange={value => setProperties(prevState => prevState
+              .map(value1 => value1.propertyId === value.propertyId && value1.subjectId === value.subjectId ? { ...value1, ...value } : value1))}
+            onEditComplete={value => addOrUpdatePropertyMutation.mutate({
+              previous: property,
+              update: value,
+              fieldType: property.fieldType
+            })}
+            onRemove={value => addOrUpdatePropertyMutation.mutate({
+              previous: property,
+              update: value,
+              fieldType: property.fieldType
+            })}
+          />
         ))}
         <Menu<HTMLDivElement>
           trigger={({ toggleOpen }, ref) => (
@@ -122,8 +134,16 @@ export const PropertyList = ({
                     <MenuItem
                       key={property.id}
                       onClick={() => {
-                        const attachedProperty : AttachedProperty = { propertyId: property.id, subjectId, value: emptyPropertyValue }
-                        addOrUpdatePropertyMutation.mutate({ previous: attachedProperty, update: attachedProperty, fieldType: property.fieldType })
+                        const attachedProperty: AttachedProperty = {
+                          propertyId: property.id,
+                          subjectId,
+                          value: emptyPropertyValue
+                        }
+                        addOrUpdatePropertyMutation.mutate({
+                          previous: attachedProperty,
+                          update: attachedProperty,
+                          fieldType: property.fieldType
+                        })
                         updateViewRulesMutation.mutate({ subjectId, appendToAlwaysInclude: [property.id] })
                         close()
                       }}
diff --git a/tasks/components/layout/property/PropertySubjectTypeSelect.tsx b/tasks/components/layout/property/PropertySubjectTypeSelect.tsx
index 3daab348f..039ed4855 100644
--- a/tasks/components/layout/property/PropertySubjectTypeSelect.tsx
+++ b/tasks/components/layout/property/PropertySubjectTypeSelect.tsx
@@ -3,10 +3,10 @@ import type { PropsForTranslation } from '@helpwave/hightide'
 import { useTranslation } from '@helpwave/hightide'
 import type { SelectProps } from '@helpwave/hightide'
 import { Select } from '@helpwave/hightide'
-import type { SubjectType } from '@helpwave/api-services/types/properties/property'
+import type { PropertySubjectType } from '@helpwave/api-services/types/properties/property'
 import { subjectTypeList } from '@helpwave/api-services/types/properties/property'
 
-type PropertySubjectTypeSelectTranslation = { [key in SubjectType]: string }
+type PropertySubjectTypeSelectTranslation = { [key in PropertySubjectType]: string }
 
 const defaultPropertySubjectTypeSelectTranslation: Translation<PropertySubjectTypeSelectTranslation> = {
   en: {
@@ -25,7 +25,7 @@ const defaultPropertySubjectTypeSelectTranslation: Translation<PropertySubjectTy
 export const PropertySubjectTypeSelect = ({
   overwriteTranslation,
   ...props
-}: PropsForTranslation<PropertySubjectTypeSelectTranslation, Omit<SelectProps<SubjectType>, 'options'>>) => {
+}: PropsForTranslation<PropertySubjectTypeSelectTranslation, Omit<SelectProps<PropertySubjectType>, 'options'>>) => {
   const translation = useTranslation([defaultPropertySubjectTypeSelectTranslation], overwriteTranslation)
   return (
     <Select
diff --git a/tasks/components/layout/property/SubjectTypeIcon.tsx b/tasks/components/layout/property/SubjectTypeIcon.tsx
index 2eb966f31..095b95615 100644
--- a/tasks/components/layout/property/SubjectTypeIcon.tsx
+++ b/tasks/components/layout/property/SubjectTypeIcon.tsx
@@ -1,9 +1,9 @@
 import type { LucideProps } from 'lucide-react'
 import { NotepadText, UserRound } from 'lucide-react'
-import type { SubjectType } from '@helpwave/api-services/types/properties/property'
+import type { PropertySubjectType } from '@helpwave/api-services/types/properties/property'
 
 export type SubjectTypeIconProps = {
-  subjectType: SubjectType,
+  subjectType: PropertySubjectType,
 } & LucideProps
 
 export const SubjectTypeIcon = ({ subjectType, ...props }: SubjectTypeIconProps) => {
diff --git a/tasks/components/modals/ManageBedsModal.tsx b/tasks/components/modals/ManageBedsModal.tsx
index 35c47da4d..521f97cf9 100644
--- a/tasks/components/modals/ManageBedsModal.tsx
+++ b/tasks/components/modals/ManageBedsModal.tsx
@@ -184,7 +184,6 @@ export const ManageBedsModal = ({
         isLoading={isLoading || !data}
         hasError={isError || !beds || !room}
         className="min-h-116"
-        minimumLoadingDuration={200}
       >
         {room && beds && (
           <Table
diff --git a/tasks/components/modals/TaskDetailModal.tsx b/tasks/components/modals/TaskDetailModal.tsx
index fc3afb36e..16d4db1f4 100644
--- a/tasks/components/modals/TaskDetailModal.tsx
+++ b/tasks/components/modals/TaskDetailModal.tsx
@@ -458,7 +458,6 @@ export const TaskDetailModal = ({
           isLoading={(isLoading || !data) && !isCreating}
           hasError={isError}
           className="min-h-138"
-          minimumLoadingDuration={200}
         >
           {tasksDetails}
           {buttons}
diff --git a/tasks/components/selects/AssigneeSelect.tsx b/tasks/components/selects/AssigneeSelect.tsx
index 0d023b949..034a75d19 100644
--- a/tasks/components/selects/AssigneeSelect.tsx
+++ b/tasks/components/selects/AssigneeSelect.tsx
@@ -28,7 +28,6 @@ export const AssigneeSelect = ({
       isLoading={isLoading}
       hasError={isError}
       className="min-h-10 w-full"
-      minimumLoadingDuration={200}
     >
       <Select
         value={data?.find(user => user.id === value)}
@@ -36,7 +35,7 @@ export const AssigneeSelect = ({
           value,
           label: (
             <div className="row items-center gap-x-1">
-              <Avatar alt="" avatarUrl={value.avatarURL} size="tiny"/>
+              <Avatar image={{ avatarUrl:value.avatarURL, alt: '' }}  name={value.name} size="md" fullyRounded={true}/>
               {value.name}
             </div>
           ),
diff --git a/tasks/next.config.js b/tasks/next.config.js
index f9727f8a3..50b29eaf7 100644
--- a/tasks/next.config.js
+++ b/tasks/next.config.js
@@ -9,6 +9,7 @@ const nextConfig = {
     remotePatterns: [
       new URL('https://cdn.helpwave.de/**'),
       new URL('https://helpwave.de/**'),
+      new URL('https://source.boringavatars.com/**'),
     ],
   },
 }
diff --git a/tasks/package.json b/tasks/package.json
index 4a8d1ab6b..536f0e894 100644
--- a/tasks/package.json
+++ b/tasks/package.json
@@ -14,7 +14,7 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "7.0.2",
     "@helpwave/api-services": "workspace:*",
-    "@helpwave/hightide": "^0.1.21",
+    "@helpwave/hightide": "^0.1.24",
     "@tailwindcss/postcss": "^4.1.3",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
diff --git a/tasks/pages/_app.tsx b/tasks/pages/_app.tsx
index e16b69b00..9ae875b6a 100644
--- a/tasks/pages/_app.tsx
+++ b/tasks/pages/_app.tsx
@@ -6,7 +6,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { LanguageProvider, ThemeProvider } from '@helpwave/hightide'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools/production'
 import { ProvideAuth } from '@helpwave/api-services/authentication/useAuth'
-import { ProvideUpdates } from '@helpwave/api-services/util/useUpdates'
 import titleWrapper from '@/utils/titleWrapper'
 import MobileInterceptor from '@/components/MobileInterceptor'
 import '../globals.css'
@@ -38,19 +37,19 @@ function MyApp({
           <QueryClientProvider client={queryClient}>
             <ProvideAuth>
               <InitializationChecker>
-                <ProvideUpdates>
                   <Head>
                     <title>{titleWrapper()}</title>
-                    <style>{`
-            :root {
-              --font-inter: ${inter.style.fontFamily};
-              --font-space: ${spaceGrotesk.style.fontFamily};
-            }
-            `}</style>
+                    <style>
+                      {
+                        `:root {
+                          --font-inter: ${inter.style.fontFamily};
+                          --font-space: ${spaceGrotesk.style.fontFamily};
+                        }`
+                      }
+                    </style>
                   </Head>
                   <Component {...pageProps} />
                   {config.env === 'development' && <ReactQueryDevtools position="bottom-left"/>}
-                </ProvideUpdates>
               </InitializationChecker>
             </ProvideAuth>
           </QueryClientProvider>
diff --git a/tasks/pages/index.tsx b/tasks/pages/index.tsx
index 12bdcbe71..ed5f9927e 100644
--- a/tasks/pages/index.tsx
+++ b/tasks/pages/index.tsx
@@ -95,7 +95,6 @@ const Dashboard: NextPage<PropsForTranslation<DashboardTranslation, DashboardSer
           isLoading={isLoading}
           hasError={isError}
           loadingComponent={(<LoadingAnimation classname="h-full"/>)}
-          minimumLoadingDuration={200}
         >
           {/* TODO reenable once newsfeed is active again
           <TwoColumn
diff --git a/tasks/pages/properties.tsx b/tasks/pages/properties.tsx
index 5d11e4487..5f778293c 100644
--- a/tasks/pages/properties.tsx
+++ b/tasks/pages/properties.tsx
@@ -3,7 +3,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useTranslation } from '@helpwave/hightide'
 import type { PropsForTranslation } from '@helpwave/hightide'
-import type { SubjectType } from '@helpwave/api-services/types/properties/property'
+import type { PropertySubjectType } from '@helpwave/api-services/types/properties/property'
 import { subjectTypeList } from '@helpwave/api-services/types/properties/property'
 import { TwoColumn } from '@/components/layout/TwoColumn'
 import { PageWithHeader } from '@/components/layout/PageWithHeader'
@@ -27,7 +27,7 @@ const defaultOrganizationsPageTranslation = {
 
 export type PropertiesContextState = {
   propertyId?: string,
-  subjectType?: SubjectType,
+  subjectType?: PropertySubjectType,
 }
 
 export const emptyPropertiesContextState: PropertiesContextState = {
@@ -56,7 +56,7 @@ const PropertiesPage: NextPage = ({ overwriteTranslation }: PropsForTranslation<
   if ((propertyId || subjectType) && !usedQueryParam) {
     setContext({
       ...context,
-      subjectType: subjectTypeList.find(value => value === subjectType) ? subjectType as SubjectType : undefined,
+      subjectType: subjectTypeList.find(value => value === subjectType) ? subjectType as PropertySubjectType : undefined,
       propertyId: propertyId as string
     })
     setUsedQueryParam(true)
diff --git a/tasks/pages/templates.tsx b/tasks/pages/templates.tsx
index f63b54a55..bbb9eea83 100644
--- a/tasks/pages/templates.tsx
+++ b/tasks/pages/templates.tsx
@@ -136,7 +136,6 @@ const PersonalTaskTemplatesPage: NextPage = ({ overwriteTranslation }: PropsForT
           loadingComponent={(
             <LoadingAnimation classname="h-full"/>
           )}
-          minimumLoadingDuration={200}
         >
           <TwoColumn
             disableResize={false}
diff --git a/tasks/pages/ward/[wardId].tsx b/tasks/pages/ward/[wardId].tsx
index 9a8b68495..905251388 100644
--- a/tasks/pages/ward/[wardId].tsx
+++ b/tasks/pages/ward/[wardId].tsx
@@ -110,7 +110,7 @@ const WardOverview: NextPage = ({ overwriteTranslation }: PropsForTranslation<Wa
   const [draggingBedId, setDraggingBedId] = useState<string>()
 
   const assignBedMutation = useAssignBedMutation({
-    onSuccess: (bed) => {
+    onSuccess: (_, bed) => {
       if (draggingRoomId) {
         setContextState({
           ...contextState,

From 5fd7bfe92fdc519d4877f5143672967483d7fdf7 Mon Sep 17 00:00:00 2001
From: Felix Thape <felix.thape@gmail.com>
Date: Sat, 19 Jul 2025 16:08:09 +0200
Subject: [PATCH 3/5] feat: implement hightide version 0.1.25 and update
 mutations

---
 api-services/mutations/query_keys.ts          |   1 +
 .../mutations/tasks/room_mutations.ts         | 124 ++----
 .../mutations/tasks/task_mutations.ts         |  17 +-
 .../tasks/task_template_mutations.ts          | 292 +++++--------
 api-services/mutations/tasks/util.ts          |   4 +-
 .../mutations/tasks/ward_mutations.ts         | 136 ++-----
 api-services/service/tasks/PatientService.ts  | 384 +++++++++---------
 api-services/service/tasks/RoomService.ts     |  71 ++++
 .../service/tasks/TaskSubtaskService.ts       |  16 +-
 .../service/tasks/TaskTemplateService.ts      | 137 ++++++-
 api-services/service/tasks/WardService.ts     |  83 ++++
 api-services/types/tasks/room.ts              |   4 +-
 api-services/types/tasks/task.ts              |   4 +-
 api-services/types/tasks/tasks_templates.ts   |   8 +-
 pnpm-lock.yaml                                |  10 +-
 tasks/components/OrganizationForm.tsx         |   2 +-
 tasks/components/RoomList.tsx                 | 102 ++---
 tasks/components/SubtaskTile.tsx              |  12 +-
 tasks/components/SubtaskView.tsx              |  57 +--
 tasks/components/WardForm.tsx                 |   2 +-
 .../components/layout/TaskTemplateDetails.tsx | 175 +++++---
 .../components/layout/TaskTemplateDisplay.tsx |  87 ++--
 tasks/components/layout/WardDetails.tsx       |  12 +-
 tasks/components/layout/WardDisplay.tsx       |   4 +-
 tasks/components/modals/TaskDetailModal.tsx   |  15 +-
 tasks/package.json                            |   2 +-
 .../pages/organizations/[organizationId].tsx  |  11 +-
 tasks/pages/templates.tsx                     | 143 +++----
 tasks/pages/ward/[wardId]/templates.tsx       | 123 +++---
 29 files changed, 1034 insertions(+), 1004 deletions(-)
 create mode 100644 api-services/service/tasks/RoomService.ts
 create mode 100644 api-services/service/tasks/WardService.ts

diff --git a/api-services/mutations/query_keys.ts b/api-services/mutations/query_keys.ts
index 323bc26f1..d69c67b4c 100644
--- a/api-services/mutations/query_keys.ts
+++ b/api-services/mutations/query_keys.ts
@@ -8,6 +8,7 @@ export const QueryKeys = {
   beds: 'beds',
   patients: 'patients',
   tasks: 'tasks',
+  taskTemplates: 'taskTemplates',
   // Users
   invitations: 'invitations',
   organizations: 'organizations',
diff --git a/api-services/mutations/tasks/room_mutations.ts b/api-services/mutations/tasks/room_mutations.ts
index 5a43babfa..44391d70b 100644
--- a/api-services/mutations/tasks/room_mutations.ts
+++ b/api-services/mutations/tasks/room_mutations.ts
@@ -1,38 +1,15 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
-  CreateRoomRequest,
-  DeleteRoomRequest,
-  GetRoomOverviewsByWardRequest,
-  GetRoomRequest,
-  UpdateRoomRequest
-} from '@helpwave/proto-ts/services/tasks_svc/v1/room_svc_pb'
-import { noop } from '@helpwave/hightide'
-import type { RoomDTO, RoomMinimalDTO, RoomOverviewDTO } from '../../types/tasks/room'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import type { RoomMinimalDTO } from '../../types/tasks/room'
 import { QueryKeys } from '../query_keys'
+import { RoomService } from '../../service/tasks/RoomService'
 
 export const useRoomQuery = (roomId?: string) => {
   return useQuery({
     queryKey: [QueryKeys.rooms, roomId],
     enabled: !!roomId,
     queryFn: async () => {
-      const req = new GetRoomRequest()
-      if (roomId) {
-        req.setId(roomId)
-      }
-      const res = await APIServices.room.getRoom(req, getAuthenticatedGrpcMetadata())
-
-      const room: RoomDTO = {
-        id: res.getId(),
-        name: res.getName(),
-        beds: res.getBedsList().map(bed => ({
-          id: bed.getId(),
-          name: bed.getName()
-        }))
-      }
-
-      return room
+      return await RoomService.get(roomId!)
     },
   })
 }
@@ -43,98 +20,55 @@ export const useRoomOverviewsQuery = (wardId: string | undefined) => {
     queryKey: [QueryKeys.rooms, roomOverviewsQueryKey],
     enabled: !!wardId,
     queryFn: async () => {
-      const req = new GetRoomOverviewsByWardRequest()
-      if (wardId) {
-        req.setId(wardId)
-      }
-      const res = await APIServices.room.getRoomOverviewsByWard(req, getAuthenticatedGrpcMetadata())
-
-      const rooms: RoomOverviewDTO[] = res.getRoomsList().map((room) => ({
-        id: room.getId(),
-        name: room.getName(),
-        beds: room.getBedsList().map(bed => {
-          const patient = bed.getPatient()
-          return {
-            id: bed.getId(),
-            name: bed.getName(),
-            patient: !patient ? undefined : {
-              id: patient.getId(),
-              name: patient.getHumanReadableIdentifier(),
-              tasksTodo: patient.getTasksUnscheduled(),
-              tasksInProgress: patient.getTasksInProgress(),
-              tasksDone: patient.getTasksDone()
-            }
-          }
-        })
-      }))
-
-      return rooms
+      return await RoomService.getWardOverview(wardId!)
     },
   })
 }
 
-export const useRoomUpdateMutation = (callback: (room: RoomMinimalDTO) => void) => {
+export const useRoomCreateMutation = (options?: UseMutationOptions<RoomMinimalDTO, unknown, RoomMinimalDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (room: RoomMinimalDTO) => {
-      const req = new UpdateRoomRequest()
-      req.setId(room.id)
-      req.setName(room.name)
-      const res = await APIServices.room.updateRoom(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('error in RoomUpdate')
-      }
-
-      callback(room)
-      return room
+      return await RoomService.create(room)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.rooms]).catch(console.error)
-    },
+      queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
+    }
   })
 }
 
-export const useRoomCreateMutation = (callback: (room: RoomMinimalDTO) => void = noop, wardId: string) => {
+export const useRoomUpdateMutation = (options?: UseMutationOptions<boolean, unknown, RoomMinimalDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (room: RoomMinimalDTO) => {
-      const req = new CreateRoomRequest()
-      req.setWardId(wardId)
-      req.setName(room.name)
-      const res = await APIServices.room.createRoom(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.getId()) {
-        console.error('RoomCreate failed')
-      }
-
-      room.id = res.getId()
-      callback(room)
-      return room
+      return await RoomService.update(room)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.rooms]).catch(console.error)
-      queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
-    }
+    },
   })
 }
 
-export const useRoomDeleteMutation = (callback: () => void = noop) => {
+export const useRoomDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (roomId: string) => {
-      const req = new DeleteRoomRequest()
-      req.setId(roomId)
-      const res = await APIServices.room.deleteRoom(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('RoomDelete failed')
-      }
-
-      callback()
-      return req.toObject()
+      return await RoomService.delete(roomId)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.rooms]).catch(console.error)
       queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
     }
diff --git a/api-services/mutations/tasks/task_mutations.ts b/api-services/mutations/tasks/task_mutations.ts
index 442aac343..351f25af4 100644
--- a/api-services/mutations/tasks/task_mutations.ts
+++ b/api-services/mutations/tasks/task_mutations.ts
@@ -1,10 +1,11 @@
 import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import type { SubTaskDTO, TaskDTO } from '../../types/tasks/task'
+import type { SubtaskDTO, TaskDTO } from '../../types/tasks/task'
 import { QueryKeys } from '../query_keys'
 import { roomOverviewsQueryKey } from './room_mutations'
 import type { TaskAssignmentRequestProps } from '../../service/tasks/TaskService'
 import { TaskService } from '../../service/tasks/TaskService'
+import type { SubtaskDeleteParameter } from '../../service/tasks/TaskSubtaskService'
 import { TaskSubtaskService } from '../../service/tasks/TaskSubtaskService'
 
 export const useTaskQuery = (taskId?: string) => {
@@ -87,11 +88,11 @@ export const useTaskDeleteMutation = (options?: UseMutationOptions<boolean, unkn
   })
 }
 
-export const useSubTaskAddMutation = (options?: UseMutationOptions<SubTaskDTO, unknown, SubTaskDTO>) => {
+export const useSubtaskAddMutation = (options?: UseMutationOptions<SubtaskDTO, unknown, SubtaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
-    mutationFn: async (subtask: SubTaskDTO) => {
+    mutationFn: async (subtask: SubtaskDTO) => {
       return await TaskSubtaskService.create(subtask)
     },
     onSuccess: (data, variables, context) => {
@@ -103,11 +104,11 @@ export const useSubTaskAddMutation = (options?: UseMutationOptions<SubTaskDTO, u
   })
 }
 
-export const useSubTaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, SubTaskDTO>) => {
+export const useSubtaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, SubtaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
-    mutationFn: async (subtask: SubTaskDTO) => {
+    mutationFn: async (subtask: SubtaskDTO) => {
       return await TaskSubtaskService.update(subtask)
     },
     onSuccess: (data, variables, context) => {
@@ -119,12 +120,12 @@ export const useSubTaskUpdateMutation = (options?: UseMutationOptions<boolean, u
   })
 }
 
-export const useSubTaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
+export const useSubtaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, SubtaskDeleteParameter>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
-    mutationFn: async (subtaskId: string) => {
-      return await TaskSubtaskService.delete(subtaskId)
+    mutationFn: async (parameter: SubtaskDeleteParameter) => {
+      return await TaskSubtaskService.delete(parameter)
     },
     onSuccess: (data, variables, context) => {
       if (options?.onSuccess) {
diff --git a/api-services/mutations/tasks/task_template_mutations.ts b/api-services/mutations/tasks/task_template_mutations.ts
index 77f056db9..de4c3e0d1 100644
--- a/api-services/mutations/tasks/task_template_mutations.ts
+++ b/api-services/mutations/tasks/task_template_mutations.ts
@@ -1,259 +1,155 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { noop } from '@helpwave/hightide'
+import type { TaskTemplateDTO } from '../../types/tasks/tasks_templates'
+import type { SubtaskDTO } from '../../types/tasks/task'
+import type {
+  TaskTemplateGetOptions } from '../../service/tasks/TaskTemplateService'
 import {
-  CreateTaskTemplateRequest,
-  CreateTaskTemplateSubTaskRequest,
-  DeleteTaskTemplateRequest,
-  DeleteTaskTemplateSubTaskRequest,
-  GetAllTaskTemplatesRequest,
-  UpdateTaskTemplateRequest,
-  UpdateTaskTemplateSubTaskRequest
-} from '@helpwave/proto-ts/services/tasks_svc/v1/task_template_svc_pb'
-import type { TaskTemplateDTO, TaskTemplateFormType } from '../../types/tasks/tasks_templates'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
-import type { SubTaskDTO } from '../../types/tasks/task'
-import { TaskTemplateService } from '../../service/tasks/TaskTemplateService'
+  TaskTemplateService,
+  TaskTemplateSubtaskService
+} from '../../service/tasks/TaskTemplateService'
+import { QueryKeys } from '../query_keys'
 
-type QueryKey = 'personalTaskTemplates' | 'wardTaskTemplates'
+const TaskTemplateTypeQueryKey = {
+  personal: 0,
+  ward: 1
+} as const
+
+export const useTaskTemplateQuery = (options?: TaskTemplateGetOptions) => {
+  return useQuery({
+    queryKey: [QueryKeys.taskTemplates],
+    queryFn: async () => {
+      return await TaskTemplateService.getMany(options)
+    },
+  })
+}
 
 export const useWardTaskTemplateQuery = (wardId?: string) => {
   return useQuery({
-    queryKey: ['wardTaskTemplates', wardId],
+    queryKey: [QueryKeys.taskTemplates, TaskTemplateTypeQueryKey.ward, wardId],
     enabled: !!wardId,
     queryFn: async () => {
-      return await TaskTemplateService.getWard(wardId!)
+      return await TaskTemplateService.getByWard(wardId!)
     },
   })
 }
 
-type UseAllTaskTemplatesByCreatorProps = {
-  createdBy?: string,
-  type: QueryKey,
-}
-export const useAllTaskTemplatesByCreator = ({
-                                               createdBy,
-                                               type = 'wardTaskTemplates'
-                                             }: UseAllTaskTemplatesByCreatorProps) => {
-  const queryKey = type
-  const onlyPrivate = type === 'personalTaskTemplates'
+export const useAllTaskTemplatesByCreator = (
+  createdBy: string,
+  onlyPersonal: boolean = false
+) => {
   return useQuery({
-    queryKey: [queryKey, createdBy],
+    queryKey: [QueryKeys.taskTemplates, onlyPersonal ? TaskTemplateTypeQueryKey.personal : TaskTemplateTypeQueryKey.ward, createdBy],
     queryFn: async () => {
-      let personalTaskTemplates: TaskTemplateDTO[] = []
-      if (createdBy !== undefined) {
-        const req = new GetAllTaskTemplatesRequest()
-        req.setCreatedBy(createdBy)
-        req.setPrivateOnly(onlyPrivate)
-        const res = await APIServices.taskTemplates.getAllTaskTemplates(req, getAuthenticatedGrpcMetadata())
-
-        personalTaskTemplates = res.getTemplatesList().map((template) => ({
-          id: template.getId(),
-          name: template.getName(),
-          notes: template.getDescription(),
-          subtasks: template.getSubtasksList().map((subtask) => ({
-            id: subtask.getId(),
-            name: subtask.getName(),
-            isDone: false,
-            taskId: template.getId(),
-          })),
-          isPublicVisible: template.getIsPublic()
-        }))
-        return personalTaskTemplates
-      }
-      return personalTaskTemplates
+      return await TaskTemplateService.getByCreator(createdBy)
     },
   })
 }
 
 export const usePersonalTaskTemplateQuery = (createdBy?: string) => {
-  return useAllTaskTemplatesByCreator({ createdBy, type: 'personalTaskTemplates' })
+  return useQuery({
+    queryKey: [QueryKeys.taskTemplates, TaskTemplateTypeQueryKey.personal, createdBy],
+    enabled: !!createdBy,
+    queryFn: async () => {
+      return await TaskTemplateService.getByCreator(createdBy!, false)
+    },
+  })
 }
 
-export const useUpdateMutation = (queryKey: QueryKey, setTemplate: (taskTemplate?: TaskTemplateDTO) => void) => {
+export const useTaskTemplateCreateMutation = (options?: UseMutationOptions<TaskTemplateDTO, unknown, TaskTemplateDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async (templateForm: TaskTemplateFormType) => {
-      const updateTaskTemplate = new UpdateTaskTemplateRequest()
-
-      const taskTemplate = templateForm.template
-
-      updateTaskTemplate.setName(taskTemplate.name)
-      updateTaskTemplate.setDescription(taskTemplate.notes)
-      updateTaskTemplate.setId(taskTemplate.id)
-
-      const updateSubtaskTemplate = new UpdateTaskTemplateSubTaskRequest()
-      const createSubTaskTemplate = new CreateTaskTemplateSubTaskRequest()
-      const deleteSubtaskTaskTemplate = new DeleteTaskTemplateSubTaskRequest()
-
-      if (templateForm.deletedSubtaskIds) {
-        for (const id of templateForm.deletedSubtaskIds) {
-          if (!id) {
-            continue
-          }
-          deleteSubtaskTaskTemplate.setId(id)
-          await APIServices.taskTemplates.deleteTaskTemplateSubTask(deleteSubtaskTaskTemplate, getAuthenticatedGrpcMetadata())
-        }
-      }
-
-      for (const subtask of taskTemplate.subtasks) {
-        // create new subtasks
-        if (!subtask.id) {
-          createSubTaskTemplate.setName(subtask.name)
-          createSubTaskTemplate.setTaskTemplateId(taskTemplate.id)
-
-          const res = await APIServices.taskTemplates.createTaskTemplateSubTask(createSubTaskTemplate, getAuthenticatedGrpcMetadata())
-          subtask.id = res.getId()
-
-          continue
-        }
-
-        // update subtask
-        updateSubtaskTemplate.setName(subtask.name)
-        updateSubtaskTemplate.setSubtaskId(subtask.id)
-
-        await APIServices.taskTemplates.updateTaskTemplateSubTask(updateSubtaskTemplate, getAuthenticatedGrpcMetadata())
-      }
-
-      // update task template
-      const res = await APIServices.taskTemplates.updateTaskTemplate(updateTaskTemplate, getAuthenticatedGrpcMetadata())
-      const newTaskTemplate: TaskTemplateDTO = { ...taskTemplate, ...res }
-
-      templateForm.deletedSubtaskIds = []
-      setTemplate(newTaskTemplate)
-    },
-    onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: [queryKey] })
-      const previousTaskTemplates = queryClient.getQueryData<TaskTemplateDTO[]>([queryKey])
-      queryClient.setQueryData<TaskTemplateDTO[]>(
-        [queryKey],
-        (old) => old
-      )
-      return { previousTaskTemplates }
+    ...options,
+    mutationFn: async (taskTemplate: TaskTemplateDTO) => {
+      return await TaskTemplateService.create(taskTemplate)
     },
-    onError: (_, newTodo, context) => {
-      queryClient.setQueryData([queryKey], context === undefined ? [] : context.previousTaskTemplates)
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      const key = data.wardId ? TaskTemplateTypeQueryKey.ward : TaskTemplateTypeQueryKey.personal
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.taskTemplates, key] }).catch(console.error)
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: [queryKey] }).catch(console.error)
-    }
   })
 }
 
-export const useCreateMutation = (wardId: string, queryKey: QueryKey, setTemplate: (taskTemplate: TaskTemplateDTO | undefined) => void) => {
+export const useTaskTemplateUpdateMutation = (options?: UseMutationOptions<boolean, unknown, TaskTemplateDTO>) => {
   const queryClient = useQueryClient()
-
   return useMutation({
-    mutationFn: async (taskTemplate: TaskTemplateDTO) => {
-      const createTaskTemplate = new CreateTaskTemplateRequest()
-
-      createTaskTemplate.setName(taskTemplate.name)
-      createTaskTemplate.setDescription(taskTemplate.notes)
-      createTaskTemplate.setSubtasksList(taskTemplate.subtasks.map((cSubtask) => {
-        const subTask = new CreateTaskTemplateRequest.SubTask()
-        subTask.setName(cSubtask.name)
-        return subTask
-      }))
-
-      if (wardId) {
-        createTaskTemplate.setWardId(wardId)
-      }
-
-      const res = await APIServices.taskTemplates.createTaskTemplate(createTaskTemplate, getAuthenticatedGrpcMetadata())
-      const newTaskTemplate: TaskTemplateDTO = { ...taskTemplate, ...res }
-
-      setTemplate(newTaskTemplate)
+    ...options,
+    mutationFn: async (template: TaskTemplateDTO) => {
+      return await TaskTemplateService.update(template)
     },
-    onError: (_, newTodo, context) => {
-      queryClient.setQueryData([queryKey], context === undefined ? [] : context.previousTaskTemplate)
-    },
-    onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: [queryKey] })
-      const previousTaskTemplate = queryClient.getQueryData<TaskTemplateDTO[]>([queryKey])
-      queryClient.setQueryData<TaskTemplateDTO[]>([queryKey], (old) => old)
-      return { previousTaskTemplate }
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: [queryKey] }).catch(console.error)
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      const key = variables.wardId ? TaskTemplateTypeQueryKey.ward : TaskTemplateTypeQueryKey.personal
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.taskTemplates, key] }).catch(console.error)
     },
   })
 }
 
-export const useDeleteMutation = (queryKey: QueryKey, setTemplate: (task?: TaskTemplateDTO) => void) => {
+export const useTaskTemplateDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async (taskTemplate: TaskTemplateDTO) => {
-      const deleteTaskTemplate = new DeleteTaskTemplateRequest()
-      deleteTaskTemplate.setId(taskTemplate.id)
-      await APIServices.taskTemplates.deleteTaskTemplate(deleteTaskTemplate, getAuthenticatedGrpcMetadata())
-
-      setTemplate(undefined)
-    },
-    onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: [queryKey] })
-      const previousTaskTemplate = queryClient.getQueryData<TaskTemplateDTO[]>([queryKey])
-      queryClient.setQueryData<TaskTemplateDTO[]>(
-        [queryKey],
-        (old) => old
-      )
-      return { previousTaskTemplate }
+    ...options,
+    mutationFn: async (taskTemplateId: string) => {
+      return await TaskTemplateService.delete(taskTemplateId)
     },
-    onError: (_, newTodo, context) => {
-      queryClient.setQueryData([queryKey], context === undefined ? [] : context.previousTaskTemplate)
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: [queryKey] }).catch(console.error)
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.taskTemplates] }).catch(console.error)
     },
   })
 }
 
-export const useSubTaskTemplateDeleteMutation = (callback: () => void = noop) => {
+export const useTaskTemplateSubtaskCreateMutation = (options?: UseMutationOptions<SubtaskDTO, unknown, SubtaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async (subtaskId: string) => {
-      const deleteSubtaskTaskTemplate = new DeleteTaskTemplateSubTaskRequest()
-      deleteSubtaskTaskTemplate.setId(subtaskId)
-      await APIServices.taskTemplates.deleteTaskTemplateSubTask(deleteSubtaskTaskTemplate, getAuthenticatedGrpcMetadata())
-      queryClient.invalidateQueries(['personalTaskTemplates']).catch(console.error)
-      callback()
-      return deleteSubtaskTaskTemplate.toObject()
+    ...options,
+    mutationFn: async (subtask: SubtaskDTO) => {
+      return await TaskTemplateSubtaskService.create(subtask)
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ['personalTaskTemplates'] }).catch(console.error)
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.taskTemplates] }).catch(console.error)
     },
   })
 }
 
-export const useSubTaskTemplateUpdateMutation = (callback: (subtask: SubTaskDTO) => void = noop) => {
+export const useTaskTemplateSubtaskUpdateMutation = (options?: UseMutationOptions<boolean, unknown, SubtaskDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async (subtask: SubTaskDTO) => {
-      const updateSubtaskTemplate = new UpdateTaskTemplateSubTaskRequest()
-      updateSubtaskTemplate.setName(subtask.name)
-      updateSubtaskTemplate.setSubtaskId(subtask.id)
-      await APIServices.taskTemplates.updateTaskTemplateSubTask(updateSubtaskTemplate, getAuthenticatedGrpcMetadata())
-      const newSubtask: SubTaskDTO = { ...subtask }
-      queryClient.invalidateQueries(['wardTaskTemplates']).catch(console.error)
-      callback(newSubtask)
-      return updateSubtaskTemplate.toObject()
+    ...options,
+    mutationFn: async (subtask: SubtaskDTO) => {
+      return await TaskTemplateSubtaskService.update(subtask)
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ['personalTaskTemplates'] }).catch(console.error)
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.taskTemplates] }).catch(console.error)
     },
   })
 }
 
-export const useSubTaskTemplateAddMutation = (taskTemplateId: string) => {
+export const useTaskTemplateSubtaskDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: async (subtask: SubTaskDTO) => {
-      const createSubTaskTemplate = new CreateTaskTemplateSubTaskRequest()
-      createSubTaskTemplate.setName(subtask.name)
-      createSubTaskTemplate.setTaskTemplateId(taskTemplateId)
-      await APIServices.taskTemplates.createTaskTemplateSubTask(createSubTaskTemplate, getAuthenticatedGrpcMetadata())
-
-      queryClient.invalidateQueries(['wardTaskTemplates']).catch(console.error)
-      return createSubTaskTemplate.toObject()
+    ...options,
+    mutationFn: async (subtaskId: string) => {
+      return await TaskTemplateSubtaskService.delete(subtaskId)
+    },
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.taskTemplates] }).catch(console.error)
     },
   })
 }
diff --git a/api-services/mutations/tasks/util.ts b/api-services/mutations/tasks/util.ts
index ddac460c6..a7f12816a 100644
--- a/api-services/mutations/tasks/util.ts
+++ b/api-services/mutations/tasks/util.ts
@@ -1,4 +1,4 @@
-import type { SubTaskDTO } from '../../types/tasks/task'
+import type { SubtaskDTO } from '../../types/tasks/task'
 
 interface GRPCSubTask {
   getId: () => string,
@@ -7,7 +7,7 @@ interface GRPCSubTask {
 }
 
 export const GRPCMapper = {
-  subtaskFromGRPC: (subTask: GRPCSubTask, taskId: string): SubTaskDTO => ({
+  subtaskFromGRPC: (subTask: GRPCSubTask, taskId: string): SubtaskDTO => ({
     id: subTask.getId(),
     name: subTask.getName(),
     isDone: subTask.getDone(),
diff --git a/api-services/mutations/tasks/ward_mutations.ts b/api-services/mutations/tasks/ward_mutations.ts
index ae38f64c3..a684659e5 100644
--- a/api-services/mutations/tasks/ward_mutations.ts
+++ b/api-services/mutations/tasks/ward_mutations.ts
@@ -1,35 +1,22 @@
+import type { UseMutationOptions } from '@tanstack/react-query'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
-  CreateWardRequest,
-  DeleteWardRequest,
-  GetWardDetailsRequest,
-  GetWardOverviewsRequest,
-  GetWardRequest,
-  UpdateWardRequest
-} from '@helpwave/proto-ts/services/tasks_svc/v1/ward_svc_pb'
-import { noop } from '@helpwave/hightide'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
-import type { WardDetailDTO, WardMinimalDTO, WardOverviewDTO } from '../../types/tasks/wards'
+import type { WardDetailDTO, WardMinimalDTO } from '../../types/tasks/wards'
 import { QueryKeys } from '../query_keys'
+import { WardService } from '../../service/tasks/WardService'
 
-export const useWardOverviewsQuery = (organisationId?: string) => {
+export const useWardQuery = (id: string) => useQuery({
+  queryKey: [QueryKeys.wards, id],
+  enabled: !!id,
+  queryFn: async (): Promise<WardMinimalDTO> => {
+    return await WardService.get(id)
+  }
+})
+
+export const useWardOverviewsQuery = () => {
   return useQuery({
-    queryKey: [QueryKeys.wards, organisationId],
+    queryKey: [QueryKeys.wards],
     queryFn: async () => {
-      const req = new GetWardOverviewsRequest()
-      const res = await APIServices.ward.getWardOverviews(req, getAuthenticatedGrpcMetadata())
-
-      const wards: WardOverviewDTO[] = res.getWardsList().map((ward) => ({
-        id: ward.getId(),
-        name: ward.getName(),
-        bedCount: ward.getBedCount(),
-        unscheduled: ward.getTasksTodo(),
-        inProgress: ward.getTasksInProgress(),
-        done: ward.getTasksDone(),
-      }))
-
-      return wards
+      return await WardService.getWardOverviews()
     }
   })
 }
@@ -38,104 +25,55 @@ export const useWardDetailsQuery = (wardId?: string) => {
   return useQuery({
     queryKey: [QueryKeys.wards, wardId],
     enabled: !!wardId,
-    queryFn: async (): Promise<WardDetailDTO | null> => {
-      if (!wardId) {
-        return null
-      }
-
-      const req = new GetWardDetailsRequest()
-      req.setId(wardId)
-      const res = await APIServices.ward.getWardDetails(req, getAuthenticatedGrpcMetadata())
-
-      return {
-        id: res.getId(),
-        name: res.getName(),
-        rooms: res.getRoomsList().map((room) => ({
-          id: room.getId(),
-          name: room.getName(),
-          beds: room.getBedsList().map((bed) => ({
-            id: bed.getId()
-          }))
-        })),
-        task_templates: res.getTaskTemplatesList().map((taskTemplate) => ({
-          id: taskTemplate.getId(),
-          name: taskTemplate.getName(),
-          subtasks: taskTemplate.getSubtasksList().map((subTask) => ({
-            id: subTask.getId(),
-            name: subTask.getName()
-          }))
-        }))
-      }
+    queryFn: async (): Promise<WardDetailDTO> => {
+      return await WardService.getDetails(wardId!)
     }
   })
 }
 
-export const useWardQuery = (id: string) => useQuery({
-  queryKey: [QueryKeys.wards, id],
-  enabled: !!id,
-  queryFn: async (): Promise<WardMinimalDTO> => {
-    const req = new GetWardRequest()
-    req.setId(id)
-    const res = await APIServices.ward.getWard(req, getAuthenticatedGrpcMetadata())
-
-    if (!res.toObject()) {
-      console.error('error in Ward query')
-    }
-    return {
-      id: res.getId(),
-      name: res.getName(),
-    }
-  }
-})
-
-export const useWardUpdateMutation = (callback: (ward: WardMinimalDTO) => void = noop) => {
+export const useWardCreateMutation = (options?: UseMutationOptions<WardMinimalDTO, unknown, WardMinimalDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (ward: WardMinimalDTO) => {
-      const req = new UpdateWardRequest()
-      req.setId(ward.id)
-      req.setName(ward.name)
-      await APIServices.ward.updateWard(req, getAuthenticatedGrpcMetadata())
-
-      callback(ward)
+      return await WardService.create(ward)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        return options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
     }
   })
 }
 
-export const useWardCreateMutation = (callback: (ward: WardMinimalDTO) => void = noop) => {
+export const useWardUpdateMutation = (options?: UseMutationOptions<boolean, unknown, WardMinimalDTO>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (ward: WardMinimalDTO) => {
-      const createWardRequest = new CreateWardRequest()
-      createWardRequest.setName(ward.name)
-      const res = await APIServices.ward.createWard(createWardRequest, getAuthenticatedGrpcMetadata())
-      const newWard: WardMinimalDTO = {
-        ...ward,
-        id: res.getId()
-      }
-
-      callback(newWard)
+      return await WardService.update(ward)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        return options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
     }
   })
 }
 
-export const useWardDeleteMutation = (callback: () => void = noop) => {
+export const useWardDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
+    ...options,
     mutationFn: async (wardId: string) => {
-      const req = new DeleteWardRequest()
-      req.setId(wardId)
-      await APIServices.ward.deleteWard(req, getAuthenticatedGrpcMetadata())
-
-      callback()
+      return await WardService.delete(wardId)
     },
-    onSuccess: () => {
+    onSuccess: (data, variables, context) => {
+      if (options?.onSuccess) {
+        return options.onSuccess(data, variables, context)
+      }
       queryClient.invalidateQueries([QueryKeys.wards]).catch(console.error)
     }
   })
diff --git a/api-services/service/tasks/PatientService.ts b/api-services/service/tasks/PatientService.ts
index b47c719cf..299e9b857 100644
--- a/api-services/service/tasks/PatientService.ts
+++ b/api-services/service/tasks/PatientService.ts
@@ -1,213 +1,207 @@
 import type {
-    PatientDetailsDTO, PatientDTO,
-    PatientListDTO,
-    PatientMinimalDTO,
-    PatientWithBedIdDTO,
-    RecentPatientDTO
+  PatientDetailsDTO, PatientDTO,
+  PatientListDTO,
+  PatientMinimalDTO,
+  PatientWithBedIdDTO,
+  RecentPatientDTO
 } from '../../types/tasks/patient'
 import { GRPCConverter } from '../../util/util'
 import { APIServices } from '../../services'
 import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import {
-    AssignBedRequest,
-    CreatePatientRequest, DeletePatientRequest, DischargePatientRequest,
-    GetPatientAssignmentByWardRequest,
-    GetPatientDetailsRequest, GetPatientListRequest,
-    GetPatientsByWardRequest, GetRecentPatientsRequest, ReadmitPatientRequest, UnassignBedRequest, UpdatePatientRequest
+  AssignBedRequest,
+  CreatePatientRequest, DeletePatientRequest, DischargePatientRequest,
+  GetPatientAssignmentByWardRequest,
+  GetPatientDetailsRequest, GetPatientListRequest,
+  GetPatientsByWardRequest, GetRecentPatientsRequest, ReadmitPatientRequest, UnassignBedRequest, UpdatePatientRequest
 } from '@helpwave/proto-ts/services/tasks_svc/v1/patient_svc_pb'
 import type { RoomWithMinimalBedAndPatient } from '../../types/tasks/room'
 import type { BedWithPatientId } from '../../types/tasks/bed'
 
 export const PatientService = {
-    getDetails: async function (patientId: string): Promise<PatientDetailsDTO> {
-        const req = new GetPatientDetailsRequest()
-        req.setId(patientId)
-
-        const res = await APIServices.patient.getPatientDetails(req, getAuthenticatedGrpcMetadata())
-
-        return {
-            id: res.getId(),
-            note: res.getNotes(),
-            name: res.getHumanReadableIdentifier(),
-            discharged: res.getIsDischarged(),
-            tasks: res.getTasksList().map(task => ({
-                id: task.getId(),
-                name: task.getName(),
-                status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
-                notes: task.getDescription(),
-                isPublicVisible: task.getPublic(),
-                assignee: task.getAssignedUserId(),
-                dueDate: new Date(), // TODO replace later
-                subtasks: task.getSubtasksList().map(subtask => ({
-                    id: subtask.getId(),
-                    name: subtask.getName(),
-                    isDone: subtask.getDone(),
-                    taskId: task.getId(),
-                })),
-                patientId: res.getId(),
-            }))
-        }
-    },
-    getPatientsByWard: async function (wardId: string): Promise<PatientWithBedIdDTO[]> {
-        const req = new GetPatientsByWardRequest()
-        req.setWardId(wardId)
-        const res = await APIServices.patient.getPatientsByWard(req, getAuthenticatedGrpcMetadata())
-
-        return res.getPatientsList().map((patient) => ({
-            id: patient.getId(),
-            name: patient.getHumanReadableIdentifier(),
-            note: patient.getNotes(),
-            bedId: patient.getBedId(),
-        }))
-    },
-    getPatientAssignmentByWard: async function (wardId: string): Promise<RoomWithMinimalBedAndPatient[]> {
-        const req = new GetPatientAssignmentByWardRequest()
-        req.setWardId(wardId)
-        const res = await APIServices.patient.getPatientAssignmentByWard(req, getAuthenticatedGrpcMetadata())
-
-        return res.getRoomsList().map((room) => ({
-            id: room.getId(),
-            name: room.getName(),
-            beds: room.getBedsList().map(bed => {
-                let patient: PatientMinimalDTO | undefined
-                const objectPatient = bed.getPatient()
-                if (objectPatient) {
-                    patient = {
-                        id: objectPatient.getId(),
-                        name: objectPatient.getName()
-                    }
-                }
-                return {
-                    id: bed.getId(),
-                    name: bed.getName(),
-                    patient
-                }
-            })
-        }))
-    },
-    getPatientList: async function (wardId?: string): Promise<PatientListDTO> {
-        const req = new GetPatientListRequest()
-        if (wardId) {
-            req.setWardId(wardId)
+  getDetails: async function (patientId: string): Promise<PatientDetailsDTO> {
+    const req = new GetPatientDetailsRequest()
+      .setId(patientId)
+
+    const res = await APIServices.patient.getPatientDetails(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      id: res.getId(),
+      note: res.getNotes(),
+      name: res.getHumanReadableIdentifier(),
+      discharged: res.getIsDischarged(),
+      tasks: res.getTasksList().map(task => ({
+        id: task.getId(),
+        name: task.getName(),
+        status: GRPCConverter.taskStatusFromGRPC(task.getStatus()),
+        notes: task.getDescription(),
+        isPublicVisible: task.getPublic(),
+        assignee: task.getAssignedUserId(),
+        dueDate: new Date(), // TODO replace later
+        subtasks: task.getSubtasksList().map(subtask => ({
+          id: subtask.getId(),
+          name: subtask.getName(),
+          isDone: subtask.getDone(),
+          taskId: task.getId(),
+        })),
+        patientId: res.getId(),
+      }))
+    }
+  },
+  getPatientsByWard: async function (wardId: string): Promise<PatientWithBedIdDTO[]> {
+    const req = new GetPatientsByWardRequest()
+      .setWardId(wardId)
+    const res = await APIServices.patient.getPatientsByWard(req, getAuthenticatedGrpcMetadata())
+
+    return res.getPatientsList().map((patient) => ({
+      id: patient.getId(),
+      name: patient.getHumanReadableIdentifier(),
+      note: patient.getNotes(),
+      bedId: patient.getBedId(),
+    }))
+  },
+  getPatientAssignmentByWard: async function (wardId: string): Promise<RoomWithMinimalBedAndPatient[]> {
+    const req = new GetPatientAssignmentByWardRequest()
+    req.setWardId(wardId)
+    const res = await APIServices.patient.getPatientAssignmentByWard(req, getAuthenticatedGrpcMetadata())
+
+    return res.getRoomsList().map((room) => ({
+      id: room.getId(),
+      name: room.getName(),
+      wardId,
+      beds: room.getBedsList().map(bed => {
+        let patient: PatientMinimalDTO | undefined
+        const objectPatient = bed.getPatient()
+        if (objectPatient) {
+          patient = {
+            id: objectPatient.getId(),
+            name: objectPatient.getName()
+          }
         }
-        const res = await APIServices.patient.getPatientList(req, getAuthenticatedGrpcMetadata())
-
         return {
-            active: res.getActiveList().map(value => {
-                const room = value.getRoom()
-                const bed = value.getBed()
-
-                if (!room) {
-                    console.error('no room for active patient in PatientList')
-                }
-
-                if (!bed) {
-                    console.error('no room for active patient in PatientList')
-                }
-                return ({
-                    id: value.getId(),
-                    name: value.getHumanReadableIdentifier(),
-                    bed: {
-                        id: bed?.getId() ?? '',
-                        name: bed?.getName() ?? ''
-                    },
-                    room: {
-                        id: room?.getId() ?? '',
-                        name: room?.getName() ?? '',
-                        wardId: room?.getWardId() ?? ''
-                    }
-                })
-            }),
-            discharged: res.getDischargedPatientsList().map(value => ({
-                id: value.getId(),
-                name: value.getHumanReadableIdentifier(),
-            })),
-            unassigned: res.getUnassignedPatientsList().map(value => ({
-                id: value.getId(),
-                name: value.getHumanReadableIdentifier(),
-            }))
+          id: bed.getId(),
+          name: bed.getName(),
+          patient
         }
-    },
-    getRecentPatients: async function (): Promise<RecentPatientDTO[]> {
-        const req = new GetRecentPatientsRequest()
-        const res = await APIServices.patient.getRecentPatients(req, getAuthenticatedGrpcMetadata())
-
-        const patients: RecentPatientDTO[] = []
-        for (const patient of res.getRecentPatientsList()) {
-            const room = patient.getRoom()
-            const bed = patient.getBed()
-            let wardId: string | undefined
-            if (room) {
-                wardId = room?.getWardId()
-            }
-
-            patients.push({
-                id: patient.getId(),
-                name: patient.getHumanReadableIdentifier(),
-                wardId,
-                bed: bed ? { id: bed.getId(), name: bed.getName() } : undefined,
-                room: room ? { id: room.getId(), name: room.getId() } : undefined
-            })
-        }
-        return patients
-    },
-    create: async function (patient: PatientDTO): Promise<PatientDTO> {
-        const req = new CreatePatientRequest()
-        req.setNotes(patient.note)
-        req.setHumanReadableIdentifier(patient.name)
-        const res = await APIServices.patient.createPatient(req, getAuthenticatedGrpcMetadata())
-
-        const id = res.getId()
-
-        if (!id) {
-            throw new Error('create room failed')
+      })
+    }))
+  },
+  getPatientList: async function (wardId?: string): Promise<PatientListDTO> {
+    const req = new GetPatientListRequest()
+    if (wardId) {
+      req.setWardId(wardId)
+    }
+    const res = await APIServices.patient.getPatientList(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      active: res.getActiveList().map(value => {
+        const room = value.getRoom()
+        const bed = value.getBed()
+
+        if (!room) {
+          console.error('no room for active patient in PatientList')
         }
 
-        return { ...patient, id }
-    },
-    update: async function (patient: PatientDTO): Promise<boolean> {
-        const req = new UpdatePatientRequest()
-        req.setId(patient.id)
-        req.setNotes(patient.note)
-        req.setHumanReadableIdentifier(patient.name)
-
-        await APIServices.patient.updatePatient(req, getAuthenticatedGrpcMetadata())
-        return true
-    },
-    delete: async function (patientId: string): Promise<boolean> {
-        const req = new DeletePatientRequest()
-        req.setId(patientId)
-
-        await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
-        return true
-    },
-    assignToBed: async function (bedWithPatientId: BedWithPatientId): Promise<boolean> {
-        const req = new AssignBedRequest()
-        req.setId(bedWithPatientId.patientId)
-        req.setBedId(bedWithPatientId.id)
-
-        await APIServices.patient.assignBed(req, getAuthenticatedGrpcMetadata())
-        return true
-    },
-    unassignFromBed: async function (patientId: string): Promise<boolean> {
-        const req = new UnassignBedRequest()
-        req.setId(patientId)
-
-        await APIServices.patient.unassignBed(req, getAuthenticatedGrpcMetadata())
-        return true
-    },
-    discharge: async function (patientId: string): Promise<boolean> {
-        const req = new DischargePatientRequest()
-        req.setId(patientId)
-
-        await APIServices.patient.dischargePatient(req, getAuthenticatedGrpcMetadata())
-        return true
-    },
-    reAdmit: async function (patientId: string): Promise<boolean> {
-        const req = new ReadmitPatientRequest()
-        req.setPatientId(patientId)
-
-        await APIServices.patient.readmitPatient(req, getAuthenticatedGrpcMetadata())
-        return true
+        if (!bed) {
+          console.error('no room for active patient in PatientList')
+        }
+        return ({
+          id: value.getId(),
+          name: value.getHumanReadableIdentifier(),
+          bed: {
+            id: bed?.getId() ?? '',
+            name: bed?.getName() ?? ''
+          },
+          room: {
+            id: room?.getId() ?? '',
+            name: room?.getName() ?? '',
+            wardId: room?.getWardId() ?? ''
+          }
+        })
+      }),
+      discharged: res.getDischargedPatientsList().map(value => ({
+        id: value.getId(),
+        name: value.getHumanReadableIdentifier(),
+      })),
+      unassigned: res.getUnassignedPatientsList().map(value => ({
+        id: value.getId(),
+        name: value.getHumanReadableIdentifier(),
+      }))
+    }
+  },
+  getRecentPatients: async function (): Promise<RecentPatientDTO[]> {
+    const req = new GetRecentPatientsRequest()
+    const res = await APIServices.patient.getRecentPatients(req, getAuthenticatedGrpcMetadata())
+
+    const patients: RecentPatientDTO[] = []
+    for (const patient of res.getRecentPatientsList()) {
+      const room = patient.getRoom()
+      const bed = patient.getBed()
+      let wardId: string | undefined
+      if (room) {
+        wardId = room?.getWardId()
+      }
+
+      patients.push({
+        id: patient.getId(),
+        name: patient.getHumanReadableIdentifier(),
+        wardId,
+        bed: bed ? { id: bed.getId(), name: bed.getName() } : undefined,
+        room: room ? { id: room.getId(), name: room.getId() } : undefined
+      })
     }
+    return patients
+  },
+  create: async function (patient: PatientDTO): Promise<PatientDTO> {
+    const req = new CreatePatientRequest()
+      .setNotes(patient.note)
+      .setHumanReadableIdentifier(patient.name)
+    const res = await APIServices.patient.createPatient(req, getAuthenticatedGrpcMetadata())
+    return { ...patient, id: res.getId() }
+  },
+  update: async function (patient: PatientDTO): Promise<boolean> {
+    const req = new UpdatePatientRequest()
+      .setId(patient.id)
+      .setNotes(patient.note)
+      .setHumanReadableIdentifier(patient.name)
+
+    await APIServices.patient.updatePatient(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  delete: async function (patientId: string): Promise<boolean> {
+    const req = new DeletePatientRequest()
+      .setId(patientId)
+
+    await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  assignToBed: async function (bedWithPatientId: BedWithPatientId): Promise<boolean> {
+    const req = new AssignBedRequest()
+      .setId(bedWithPatientId.patientId)
+      .setBedId(bedWithPatientId.id)
+
+    await APIServices.patient.assignBed(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  unassignFromBed: async function (patientId: string): Promise<boolean> {
+    const req = new UnassignBedRequest()
+      .setId(patientId)
+
+    await APIServices.patient.unassignBed(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  discharge: async function (patientId: string): Promise<boolean> {
+    const req = new DischargePatientRequest()
+      .setId(patientId)
+
+    await APIServices.patient.dischargePatient(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  reAdmit: async function (patientId: string): Promise<boolean> {
+    const req = new ReadmitPatientRequest()
+      .setPatientId(patientId)
+
+    await APIServices.patient.readmitPatient(req, getAuthenticatedGrpcMetadata())
+    return true
+  }
 }
diff --git a/api-services/service/tasks/RoomService.ts b/api-services/service/tasks/RoomService.ts
new file mode 100644
index 000000000..c856eb3a7
--- /dev/null
+++ b/api-services/service/tasks/RoomService.ts
@@ -0,0 +1,71 @@
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import {
+  CreateRoomRequest, DeleteRoomRequest,
+  GetRoomOverviewsByWardRequest,
+  GetRoomRequest, UpdateRoomRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/room_svc_pb'
+import type { RoomDTO, RoomMinimalDTO, RoomOverviewDTO } from '../../types/tasks/room'
+
+export const RoomService = {
+  get: async (id: string): Promise<RoomDTO> => {
+    const req = new GetRoomRequest()
+      .setId(id)
+    const res = await APIServices.room.getRoom(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      id: res.getId(),
+      name: res.getName(),
+      wardId: res.getWardId(),
+      beds: res.getBedsList().map(bed => ({
+        id: bed.getId(),
+        name: bed.getName()
+      }))
+    }
+  },
+  getWardOverview: async (wardId: string): Promise<RoomOverviewDTO[]> => {
+    const req = new GetRoomOverviewsByWardRequest()
+      .setId(wardId)
+    const res = await APIServices.room.getRoomOverviewsByWard(req, getAuthenticatedGrpcMetadata())
+
+    return res.getRoomsList().map((room) => ({
+      id: room.getId(),
+      name: room.getName(),
+      wardId,
+      beds: room.getBedsList().map(bed => {
+        const patient = bed.getPatient()
+        return {
+          id: bed.getId(),
+          name: bed.getName(),
+          patient: !patient ? undefined : {
+            id: patient.getId(),
+            name: patient.getHumanReadableIdentifier(),
+            tasksTodo: patient.getTasksUnscheduled(),
+            tasksInProgress: patient.getTasksInProgress(),
+            tasksDone: patient.getTasksDone()
+          }
+        }
+      })
+    }))
+  },
+  create: async (room: RoomMinimalDTO): Promise<RoomMinimalDTO> => {
+    const req = new CreateRoomRequest()
+      .setWardId(room.wardId)
+      .setName(room.name)
+    const res = await APIServices.room.createRoom(req, getAuthenticatedGrpcMetadata())
+    return { ...room, id: res.getId() }
+  },
+  update: async (room: RoomMinimalDTO): Promise<boolean> => {
+    const req = new UpdateRoomRequest()
+      .setId(room.id)
+      .setName(room.name)
+    await APIServices.room.updateRoom(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  delete: async (id: string): Promise<boolean> => {
+    const req = new DeleteRoomRequest()
+      .setId(id)
+    await APIServices.room.deleteRoom(req, getAuthenticatedGrpcMetadata())
+    return true
+  }
+}
diff --git a/api-services/service/tasks/TaskSubtaskService.ts b/api-services/service/tasks/TaskSubtaskService.ts
index 8bfb1f796..c95985ff1 100644
--- a/api-services/service/tasks/TaskSubtaskService.ts
+++ b/api-services/service/tasks/TaskSubtaskService.ts
@@ -1,4 +1,4 @@
-import type { SubTaskDTO } from '../../types/tasks/task'
+import type { SubtaskDTO } from '../../types/tasks/task'
 import { APIServices } from '../../services'
 import {
   CreateSubtaskRequest,
@@ -7,8 +7,13 @@ import {
 } from '@helpwave/proto-ts/services/tasks_svc/v1/task_svc_pb'
 import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 
+export type SubtaskDeleteParameter = {
+  id: string,
+  taskId: string,
+}
+
 export const TaskSubtaskService = {
-  create: async function (subtask: SubTaskDTO): Promise<SubTaskDTO> {
+  create: async function (subtask: SubtaskDTO): Promise<SubtaskDTO> {
     const req = new CreateSubtaskRequest()
       .setSubtask(new CreateSubtaskRequest.Subtask().setName(subtask.name))
       .setTaskId(subtask.taskId)
@@ -20,7 +25,7 @@ export const TaskSubtaskService = {
       isDone: false,
     }
   },
-  update: async function (subtask: SubTaskDTO): Promise<boolean> {
+  update: async function (subtask: SubtaskDTO): Promise<boolean> {
     const req = new UpdateSubtaskRequest()
     req.setSubtaskId(subtask.id)
       .setTaskId(subtask.taskId)
@@ -31,9 +36,10 @@ export const TaskSubtaskService = {
 
     return !!res.toObject()
   },
-  delete: async function (subtaskId: string): Promise<boolean> {
+  delete: async function ({ id, taskId }: SubtaskDeleteParameter): Promise<boolean> {
     const req = new DeleteSubtaskRequest()
-      .setSubtaskId(subtaskId)
+      .setSubtaskId(id)
+      .setTaskId(taskId)
     const res = await APIServices.task.deleteSubtask(req, getAuthenticatedGrpcMetadata())
     return !!res.toObject()
   },
diff --git a/api-services/service/tasks/TaskTemplateService.ts b/api-services/service/tasks/TaskTemplateService.ts
index 7e4ec352a..0a59c389a 100644
--- a/api-services/service/tasks/TaskTemplateService.ts
+++ b/api-services/service/tasks/TaskTemplateService.ts
@@ -1,25 +1,128 @@
 import type { TaskTemplateDTO } from '../../types/tasks/tasks_templates'
-import { GetAllTaskTemplatesRequest } from '@helpwave/proto-ts/services/tasks_svc/v1/task_template_svc_pb'
+import {
+  CreateTaskTemplateRequest,
+  CreateTaskTemplateSubTaskRequest,
+  DeleteTaskTemplateRequest,
+  DeleteTaskTemplateSubTaskRequest,
+  GetAllTaskTemplatesRequest,
+  UpdateTaskTemplateRequest,
+  UpdateTaskTemplateSubTaskRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/task_template_svc_pb'
 import { APIServices } from '../../services'
 import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import type { SubtaskDTO } from '../../types/tasks/task'
+
+export type TaskTemplateGetOptions = {
+  wardId?: string,
+  onlyPersonal?: boolean,
+  creatorId?: string,
+}
 
 export const TaskTemplateService = {
-  getWard: async (wardId: string): Promise<TaskTemplateDTO[]> => {
-      const req = new GetAllTaskTemplatesRequest()
-        .setWardId(wardId)
-      const res = await APIServices.taskTemplates.getAllTaskTemplates(req, getAuthenticatedGrpcMetadata())
-      return  res.getTemplatesList().map((template) => ({
-        id: template.getId(),
-        wardId,
-        name: template.getName(),
-        notes: template.getDescription(),
-        subtasks: template.getSubtasksList().map((subtask) => ({
-          id: subtask.getId(),
-          name: subtask.getName(),
-          isDone: false,
-          taskId: template.getId(),
-        })),
-        isPublicVisible: template.getIsPublic()
+  /* TODO use when we can get the wardId here
+  get: async (id: string): Promise<TaskTemplateDTO> => {
+    const req = new GetTaskTemplateRequest()
+      .setId(id)
+    const res = await APIServices.taskTemplates.getTaskTemplate(req, getAuthenticatedGrpcMetadata())
+    return {
+      id: res.getId(),
+      name: res.getName(),
+      notes: res.getDescription(),
+      subtasks: res.getSubtasksList().map((subtask) => ({
+        id: subtask.getId(),
+        name: subtask.getName(),
+        isDone: false,
+        taskId: res.getId(),
+      })),
+      isPublicVisible: res.getIsPublic(),
+      creatorId: res.getCreatedBy(),
+    }
+  },
+  */
+  getMany: async (options?: TaskTemplateGetOptions): Promise<TaskTemplateDTO[]> => {
+    const req = new GetAllTaskTemplatesRequest()
+    if (options?.wardId) {
+      req.setWardId(options.wardId)
+    }
+    if (options?.creatorId) {
+      req.setCreatedBy(options.creatorId)
+    }
+    if (options?.onlyPersonal) {
+      req.setPrivateOnly(options.onlyPersonal)
+    }
+    const res = await APIServices.taskTemplates.getAllTaskTemplates(req, getAuthenticatedGrpcMetadata())
+    return res.getTemplatesList().map((template) => ({
+      id: template.getId(),
+      wardId: options?.wardId,
+      name: template.getName(),
+      notes: template.getDescription(),
+      subtasks: template.getSubtasksList().map((subtask) => ({
+        id: subtask.getId(),
+        name: subtask.getName(),
+        isDone: false,
+        taskId: template.getId(),
+      })),
+      isPublicVisible: template.getIsPublic(),
+      creatorId: template.getCreatedBy(),
+    }))
+  },
+  getByWard: async (wardId: string): Promise<TaskTemplateDTO[]> => {
+    return TaskTemplateService.getMany({ wardId })
+  },
+  getByCreator: async (creatorId: string, onlyPersonal: boolean = false): Promise<TaskTemplateDTO[]> => {
+    return TaskTemplateService.getMany({ creatorId, onlyPersonal })
+  },
+  create: async (taskTemplate: TaskTemplateDTO): Promise<TaskTemplateDTO> => {
+    const req = new CreateTaskTemplateRequest()
+      .setName(taskTemplate.name)
+      .setDescription(taskTemplate.notes)
+      .setSubtasksList(taskTemplate.subtasks.map((cSubtask) => {
+        const subTask = new CreateTaskTemplateRequest.SubTask()
+        subTask.setName(cSubtask.name)
+        return subTask
       }))
+    if (taskTemplate?.wardId) {
+      req.setWardId(taskTemplate.wardId)
+    }
+
+    const res = await APIServices.taskTemplates.createTaskTemplate(req, getAuthenticatedGrpcMetadata())
+    return { ...taskTemplate, id: res.getId() }
+  },
+  update: async (taskTemplate: TaskTemplateDTO): Promise<boolean> => {
+    const updateTaskTemplate = new UpdateTaskTemplateRequest()
+      .setId(taskTemplate.id)
+      .setName(taskTemplate.name)
+      .setDescription(taskTemplate.notes)
+    await APIServices.taskTemplates.updateTaskTemplate(updateTaskTemplate, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  delete: async (taskTemplateId: string): Promise<boolean> => {
+    const req = new DeleteTaskTemplateRequest()
+      .setId(taskTemplateId)
+    await APIServices.taskTemplates.deleteTaskTemplate(req, getAuthenticatedGrpcMetadata())
+    return true
+  }
+}
+
+export const TaskTemplateSubtaskService = {
+  create: async (subtask: SubtaskDTO): Promise<SubtaskDTO> => {
+    const req = new CreateTaskTemplateSubTaskRequest()
+      .setName(subtask.name)
+      .setTaskTemplateId(subtask.taskId)
+    const res = await APIServices.taskTemplates.createTaskTemplateSubTask(req, getAuthenticatedGrpcMetadata())
+    return { ...subtask, id: res.getId() }
+  },
+  update: async (subtask: SubtaskDTO): Promise<boolean> => {
+    const req = new UpdateTaskTemplateSubTaskRequest()
+      .setName(subtask.name)
+      .setSubtaskId(subtask.id)
+    await APIServices.taskTemplates.updateTaskTemplateSubTask(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  delete: async (subtaskId: string): Promise<boolean> => {
+    const req = new DeleteTaskTemplateSubTaskRequest()
+      .setId(subtaskId)
+    await APIServices.taskTemplates.deleteTaskTemplateSubTask(req, getAuthenticatedGrpcMetadata())
+    return true
   }
 }
diff --git a/api-services/service/tasks/WardService.ts b/api-services/service/tasks/WardService.ts
new file mode 100644
index 000000000..c8eebccfb
--- /dev/null
+++ b/api-services/service/tasks/WardService.ts
@@ -0,0 +1,83 @@
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import {
+  CreateWardRequest,
+  DeleteWardRequest,
+  GetWardDetailsRequest,
+  GetWardOverviewsRequest,
+  GetWardRequest,
+  UpdateWardRequest
+} from '@helpwave/proto-ts/services/tasks_svc/v1/ward_svc_pb'
+import type { WardDetailDTO, WardMinimalDTO, WardOverviewDTO } from '../../types/tasks/wards'
+
+export const WardService = {
+  get: async (id: string): Promise<WardMinimalDTO> => {
+    const req = new GetWardRequest()
+      .setId(id)
+    const res = await APIServices.ward.getWard(req, getAuthenticatedGrpcMetadata())
+    return {
+      id: res.getId(),
+      name: res.getName(),
+    }
+  },
+  getDetails: async (wardId: string): Promise<WardDetailDTO> => {
+    const req = new GetWardDetailsRequest()
+      .setId(wardId)
+    const res = await APIServices.ward.getWardDetails(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      id: res.getId(),
+      name: res.getName(),
+      rooms: res.getRoomsList().map((room) => ({
+        id: room.getId(),
+        name: room.getName(),
+        beds: room.getBedsList().map((bed) => ({
+          id: bed.getId()
+        }))
+      })),
+      task_templates: res.getTaskTemplatesList().map((taskTemplate) => ({
+        id: taskTemplate.getId(),
+        name: taskTemplate.getName(),
+        subtasks: taskTemplate.getSubtasksList().map((subTask) => ({
+          id: subTask.getId(),
+          name: subTask.getName()
+        }))
+      }))
+    }
+  },
+  getWardOverviews: async (): Promise<WardOverviewDTO[]> => {
+    const req = new GetWardOverviewsRequest()
+    const res = await APIServices.ward.getWardOverviews(req, getAuthenticatedGrpcMetadata())
+
+    return res.getWardsList().map((ward) => ({
+      id: ward.getId(),
+      name: ward.getName(),
+      bedCount: ward.getBedCount(),
+      unscheduled: ward.getTasksTodo(),
+      inProgress: ward.getTasksInProgress(),
+      done: ward.getTasksDone(),
+    }))
+  },
+  create: async (ward: WardMinimalDTO): Promise<WardMinimalDTO> => {
+    const createWardRequest = new CreateWardRequest()
+    createWardRequest.setName(ward.name)
+    const res = await APIServices.ward.createWard(createWardRequest, getAuthenticatedGrpcMetadata())
+    return {
+      ...ward,
+      id: res.getId()
+    }
+  },
+  update: async (ward: WardMinimalDTO): Promise<boolean> => {
+    const req = new UpdateWardRequest()
+      .setId(ward.id)
+      .setName(ward.name)
+    await APIServices.ward.updateWard(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
+  delete: async (id: string): Promise<boolean> => {
+    const req = new DeleteWardRequest()
+      .setId(id)
+    await APIServices.ward.deleteWard(req, getAuthenticatedGrpcMetadata())
+    return true
+  }
+}
diff --git a/api-services/types/tasks/room.ts b/api-services/types/tasks/room.ts
index 47436abf7..f6cc4f522 100644
--- a/api-services/types/tasks/room.ts
+++ b/api-services/types/tasks/room.ts
@@ -3,9 +3,6 @@ import type { BedDTO, BedWithMinimalPatientDTO, BedWithPatientWithTasksNumberDTO
 export type RoomMinimalDTO = {
   id: string,
   name: string,
-}
-
-export type RoomWithWardId = RoomMinimalDTO & {
   wardId: string,
 }
 
@@ -20,6 +17,7 @@ export type RoomOverviewDTO = RoomMinimalDTO & {
 export const emptyRoomOverview: RoomOverviewDTO = {
   id: '',
   name: '',
+  wardId: '',
   beds: []
 }
 
diff --git a/api-services/types/tasks/task.ts b/api-services/types/tasks/task.ts
index 93265d98f..685e93206 100644
--- a/api-services/types/tasks/task.ts
+++ b/api-services/types/tasks/task.ts
@@ -1,6 +1,6 @@
 import type { Translation } from '@helpwave/hightide'
 
-export type SubTaskDTO = {
+export type SubtaskDTO = {
   id: string,
   name: string,
   isDone: boolean,
@@ -66,7 +66,7 @@ export type TaskDTO = {
   assignee?: string,
   notes: string,
   status: TaskStatus,
-  subtasks: SubTaskDTO[],
+  subtasks: SubtaskDTO[],
   dueDate?: Date,
   createdAt?: Date,
   creatorId?: string,
diff --git a/api-services/types/tasks/tasks_templates.ts b/api-services/types/tasks/tasks_templates.ts
index 07c9e886d..d69be2bac 100644
--- a/api-services/types/tasks/tasks_templates.ts
+++ b/api-services/types/tasks/tasks_templates.ts
@@ -1,12 +1,13 @@
-import type { SubTaskDTO } from './task'
+import type { SubtaskDTO } from './task'
 
 export type TaskTemplateDTO = {
   wardId?: string,
   id: string,
   name: string,
   notes: string,
-  subtasks: SubTaskDTO[],
+  subtasks: SubtaskDTO[],
   isPublicVisible: boolean,
+  creatorId: string,
 }
 
 export const emptyTaskTemplate: TaskTemplateDTO = {
@@ -14,7 +15,8 @@ export const emptyTaskTemplate: TaskTemplateDTO = {
   isPublicVisible: false,
   name: '',
   notes: '',
-  subtasks: []
+  subtasks: [],
+  creatorId: ''
 }
 
 export type TaskTemplateFormType = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 994c89a07..833d42a52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,8 +176,8 @@ importers:
         specifier: workspace:*
         version: link:../api-services
       '@helpwave/hightide':
-        specifier: ^0.1.24
-        version: 0.1.24(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)
+        specifier: ^0.1.25
+        version: 0.1.25(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)
       '@tailwindcss/postcss':
         specifier: ^4.1.3
         version: 4.1.5
@@ -336,8 +336,8 @@ packages:
   '@helpwave/hightide@0.0.17':
     resolution: {integrity: sha512-FTktcuyJ9/Vh3odP6r+LLFWHdqV+dHSxzJTOQrY9FZ4ikHSbhmAOfrszi4CZG69/K5KjGkv9WMuvmn+cK+YkQw==}
 
-  '@helpwave/hightide@0.1.24':
-    resolution: {integrity: sha512-DPd8k9vFe+4gV8je50Vikt7lHl35fU6bTgcNxMu0VXNFLMnbHLdhAQ27uytC3eiCZ1x6haZBZBxWd7+0AhMKeQ==}
+  '@helpwave/hightide@0.1.25':
+    resolution: {integrity: sha512-3UoSnhCl0yi0K2lst3lOPl0b38R4Mxwdaj3bMmptrJGp3DLauDt94iCWEcoulbcV8O8LsJ1qdtrIOhG1i3400Q==}
 
   '@helpwave/proto-ts@0.64.0-89e2023.0':
     resolution: {integrity: sha512-EqHsZDOttnCBqcAZ0WiRO32rGMICwvGUxvhSltU0KahFsbIx8o5DZ3l9N8GdB3c/66qe5tabTvVKbUzxf66Yjw==}
@@ -2685,7 +2685,7 @@ snapshots:
       - babel-plugin-react-compiler
       - sass
 
-  '@helpwave/hightide@0.1.24(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)':
+  '@helpwave/hightide@0.1.25(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)':
     dependencies:
       '@radix-ui/react-checkbox': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tailwindcss/cli': 4.1.10
diff --git a/tasks/components/OrganizationForm.tsx b/tasks/components/OrganizationForm.tsx
index 96786d73f..58e124b57 100644
--- a/tasks/components/OrganizationForm.tsx
+++ b/tasks/components/OrganizationForm.tsx
@@ -109,7 +109,7 @@ export const OrganizationForm = ({
   const maxMailLength = 320
 
   const inputErrorClasses = 'border-negative focus:border-negative focus:ring-negative border-2'
-  const inputClasses = 'mt-1 block rounded-md w-full border-gray-300 shadow-sm focus:outline-none focus:border-primary focus:ring-primary'
+  const inputClasses = 'mt-1 block rounded-md w-full'
 
   function validateShortName(organization: OrganizationMinimalDTO) {
     const shortName = organization.shortName.trim()
diff --git a/tasks/components/RoomList.tsx b/tasks/components/RoomList.tsx
index 24e53dae9..3620f0967 100644
--- a/tasks/components/RoomList.tsx
+++ b/tasks/components/RoomList.tsx
@@ -10,8 +10,8 @@ import {
   TextButton,
   useTranslation
 } from '@helpwave/hightide'
-import { useContext, useEffect, useMemo, useState } from 'react'
-import type { RoomMinimalDTO } from '@helpwave/api-services/types/tasks/room'
+import { useContext, useMemo, useState } from 'react'
+import type { RoomOverviewDTO } from '@helpwave/api-services/types/tasks/room'
 import {
   useRoomCreateMutation,
   useRoomDeleteMutation,
@@ -91,17 +91,13 @@ const defaultRoomListTranslations: Translation<RoomListTranslation> = {
   }
 }
 
-export type RoomListRoomRepresentation = RoomMinimalDTO & {
-  bedCount: number,
-}
-
 type DeleteDialogState = {
   isShowing: boolean,
   /** If not set, the entire selection will be deleted */
-  value?: RoomListRoomRepresentation,
+  value?: RoomOverviewDTO,
 }
+
 export type RoomListProps = {
-  rooms?: RoomListRoomRepresentation[], // TODO replace with more optimized RoomDTO
   roomsPerPage?: number,
 }
 
@@ -110,45 +106,29 @@ export type RoomListProps = {
  */
 export const RoomList = ({
                            overwriteTranslation,
-                           rooms
+                           roomsPerPage = 5
                          }: PropsForTranslation<RoomListTranslation, RoomListProps>) => {
   const translation = useTranslation([defaultRoomListTranslations], overwriteTranslation)
   const context = useContext(OrganizationOverviewContext)
   const [selectionState, setSelectionState] = useState<RowSelectionState>({})
-  const [usedRooms, setUsedRooms] = useState<RoomListRoomRepresentation[]>(rooms ?? [])
   const [deleteRoomDialogState, setDeleteRoomDialogState] = useState<DeleteDialogState>({ isShowing: false })
   const [managedRoom, setManagedRoom] = useState<string>()
 
-  const creatRoomMutation = useRoomCreateMutation((room) => {
-    context.updateContext({ ...context.state })
-    setUsedRooms(prevState => [...prevState, { ...room, bedCount: 0 }])
-  }, context.state.wardId ?? '') // Not good but should be safe most of the time
-  const deleteRoomMutation = useRoomDeleteMutation(() => {
-    context.updateContext({ ...context.state })
-  })
-  const updateRoomMutation = useRoomUpdateMutation(() => context.updateContext({ ...context.state }))
+  const creatRoomMutation = useRoomCreateMutation()
+  const deleteRoomMutation = useRoomDeleteMutation()
+  const updateRoomMutation = useRoomUpdateMutation()
 
-  const { data, isError, isLoading } = useRoomOverviewsQuery(context.state.wardId) // TODO use a more light weight query
-
-  useEffect(() => {
-    if (data) {
-      setUsedRooms(data.map(room => ({
-        id: room.id,
-        name: room.name,
-        bedCount: room.beds.length
-      })))
-    }
-  }, [data])
+  const { data: rooms, isError, isLoading } = useRoomOverviewsQuery(context.state.wardId) // TODO use a more light weight query
 
   const minRoomNameLength = 1
   const maxRoomNameLength = 32
 
-  const columns = useMemo<ColumnDef<RoomListRoomRepresentation>[]>(() => [
+  const columns = useMemo<ColumnDef<RoomOverviewDTO>[]>(() => [
     {
       id: 'room',
       header: translation('roomName'),
       cell: ({ cell }) => {
-        const room = usedRooms[cell.row.index]!
+        const room = (rooms ?? [])[cell.row.index]!
         return (
           <InputUncontrolled
             value={room.name}
@@ -176,7 +156,7 @@ export const RoomList = ({
     {
       id: 'bedCount',
       header: translation('bedCount'),
-      accessorKey: 'bedCount',
+      accessorFn: room => room.beds.length,
       sortingFn: 'text',
       minSize: 190,
       meta: {
@@ -187,7 +167,7 @@ export const RoomList = ({
       id: 'manage',
       header: translation('manageBeds'),
       cell: ({ cell }) => {
-        const room = usedRooms[cell.row.index]!
+        const room = (rooms ?? [])[cell.row.index]!
         return (
           <TextButton onClick={() => setManagedRoom(room.id)} color="primary">
             {translation('manage')}
@@ -201,7 +181,7 @@ export const RoomList = ({
       id: 'actions',
       header: '',
       cell: ({ cell }) => {
-        const room = usedRooms[cell.row.index]!
+        const room = (rooms ?? [])[cell.row.index]!
         return (
           <TextButton
             onClick={() => setDeleteRoomDialogState({ isShowing: true, value: room })}
@@ -215,15 +195,7 @@ export const RoomList = ({
       maxSize: 140,
       enableResizing: false,
     }
-  ], [translation, updateRoomMutation, usedRooms])
-
-  const addRoom = () => {
-    const newRoom = {
-      id: '',
-      name: translation('room') + (usedRooms.length + 1),
-    }
-    creatRoomMutation.mutate(newRoom)
-  }
+  ], [translation, updateRoomMutation, rooms])
 
   const selectedElementCount = Object.keys(selectionState).length
 
@@ -235,7 +207,7 @@ export const RoomList = ({
           descriptionText: translation('dangerZoneText', { count: selectedElementCount }),
         }}
         isOpen={deleteRoomDialogState.isShowing}
-        onCancel={() => setDeleteRoomDialogState({ ...deleteRoomDialogState, isShowing: false })}
+        onCancel={() => setDeleteRoomDialogState({ isShowing: false })}
         onConfirm={() => {
           if (deleteRoomDialogState.value) {
             if (selectionState[deleteRoomDialogState.value.id]) {
@@ -246,13 +218,14 @@ export const RoomList = ({
             deleteRoomMutation.mutate(deleteRoomDialogState.value.id)
           } else {
             Object.keys(selectionState).forEach(value => {
-              const room = usedRooms.find(room => room.id === value)
+              const room = (rooms ?? []).find(room => room.id === value)
               if (room) {
                 deleteRoomMutation.mutate(room.id)
               }
             })
             setSelectionState({})
           }
+          setDeleteRoomDialogState({ isShowing: false })
         }}
         confirmType="negative"
       />
@@ -263,7 +236,7 @@ export const RoomList = ({
         onClose={() => setManagedRoom(undefined)}
       />
       <ColumnTitle
-        title={translation('room', { count: 2 /* Always use plural */ }) + ((!isLoading && !isError) ? ` (${usedRooms.length})` : '')}
+        title={translation('room', { count: 2 /* Always use plural */ }) + ((!isLoading && !isError) ? ` (${rooms.length})` : '')}
         actions={!isLoading && !isError && (
           <div className="row gap-x-2">
             {(selectedElementCount > 0) && (
@@ -276,7 +249,18 @@ export const RoomList = ({
                 {translation('removeSelection')}
               </SolidButton>
             )}
-            <SolidButton onClick={addRoom} color="positive" size="small" startIcon={<Plus size={18}/>}>
+            <SolidButton
+              onClick={() => {
+                creatRoomMutation.mutate({
+                  id: '',
+                  name: translation('room') + ' ' + (rooms.length + 1),
+                  wardId: context.state.wardId
+                })
+              }}
+              color="positive"
+              size="small"
+              startIcon={<Plus size={18}/>}
+            >
               {translation('addRoom')}
             </SolidButton>
           </div>
@@ -288,17 +272,19 @@ export const RoomList = ({
         hasError={isError}
         className="min-h-101"
       >
-        <TableWithSelection
-          data={usedRooms}
-          columns={columns}
-          rowSelection={selectionState}
-          onRowSelectionChange={setSelectionState}
-          disableClickRowClickSelection={true}
-          fillerRow={() => (<FillerRowElement className="h-10"/>)}
-          initialState={{
-            pagination: { pageSize: 5 }
-          }}
-        />
+        {rooms && (
+          <TableWithSelection
+            data={rooms}
+            columns={columns}
+            rowSelection={selectionState}
+            onRowSelectionChange={setSelectionState}
+            disableClickRowClickSelection={true}
+            fillerRow={() => (<FillerRowElement className="h-10"/>)}
+            initialState={{
+              pagination: { pageSize: roomsPerPage }
+            }}
+          />
+        )}
       </LoadingAndErrorComponent>
     </div>
   )
diff --git a/tasks/components/SubtaskTile.tsx b/tasks/components/SubtaskTile.tsx
index edc51d8e5..c2bdec6ac 100644
--- a/tasks/components/SubtaskTile.tsx
+++ b/tasks/components/SubtaskTile.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Checkbox, type PropsForTranslation, TextButton, ToggleableInput, useTranslation } from '@helpwave/hightide'
-import type { SubTaskDTO } from '@helpwave/api-services/types/tasks/task'
+import type { SubtaskDTO } from '@helpwave/api-services/types/tasks/task'
 
 type SubtaskTileTranslation = {
   subtasks: string,
@@ -19,9 +19,9 @@ const defaultSubtaskTileTranslation = {
 }
 
 type SubtaskTileProps = {
-  subtask: SubTaskDTO,
+  subtask: SubtaskDTO,
   onRemoveClick: () => void,
-  onChange: (subtask: SubTaskDTO) => void,
+  onChange: (subtask: SubtaskDTO) => void,
 }
 
 /**
@@ -37,7 +37,7 @@ export const SubtaskTile = ({
 
   const minTaskNameLength = 2
   const maxTaskNameLength = 64
-  const [localSubtask, setLocalSubtask] = useState<SubTaskDTO>({ ...subtask })
+  const [localSubtask, setLocalSubtask] = useState<SubtaskDTO>({ ...subtask })
 
   useEffect(() => {
     setLocalSubtask(subtask)
@@ -47,7 +47,7 @@ export const SubtaskTile = ({
     <div className="row gap-x-2 items-center overflow-x-hidden w-full">
       <Checkbox
         onChange={isDone => {
-          const newSubtask: SubTaskDTO = {
+          const newSubtask: SubtaskDTO = {
             ...localSubtask,
             isDone
           }
@@ -64,7 +64,7 @@ export const SubtaskTile = ({
             name
           })}
           onEditCompleted={name => {
-            const newSubtask: SubTaskDTO = {
+            const newSubtask: SubtaskDTO = {
               ...localSubtask,
               name
             }
diff --git a/tasks/components/SubtaskView.tsx b/tasks/components/SubtaskView.tsx
index 7a831bfaf..43febcf51 100644
--- a/tasks/components/SubtaskView.tsx
+++ b/tasks/components/SubtaskView.tsx
@@ -4,12 +4,7 @@ import { Plus } from 'lucide-react'
 import type { Translation } from '@helpwave/hightide'
 import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
 import { SolidButton } from '@helpwave/hightide'
-import type { SubTaskDTO } from '@helpwave/api-services/types/tasks/task'
-import {
-  useSubTaskAddMutation,
-  useSubTaskDeleteMutation,
-  useSubTaskUpdateMutation
-} from '@helpwave/api-services/mutations/tasks/task_mutations'
+import type { SubtaskDTO } from '@helpwave/api-services/types/tasks/task'
 import { SubtaskTile } from './SubtaskTile'
 import { TaskTemplateContext } from '@/pages/templates'
 
@@ -36,12 +31,27 @@ const defaultSubtaskViewTranslation: Translation<SubtaskViewTranslation> = {
 }
 
 type SubtaskViewProps = {
-  // TODO: This component should not decide between two mutate functions. Pass mutate function instead.
-  subtasks: SubTaskDTO[],
-  taskId?: string,
+  subtasks: SubtaskDTO[],
+  taskOrTemplateId?: string,
   createdBy?: string,
-  taskTemplateId?: string,
-  onChange: (subtasks: SubTaskDTO[]) => void,
+  /**
+   * Gives the full list with updates
+   *
+   * New items are only created locally
+   */
+  onChange: (subtasks: SubtaskDTO[]) => void,
+  /**
+   * Callback when an item is added and not creating
+   */
+  onAdd: (subtask: SubtaskDTO) => void,
+  /**
+   * Callback when an item is updated and not creating
+   */
+  onUpdate: (subtask: SubtaskDTO) => void,
+  /**
+   * Callback when an item is removed and not creating
+   */
+  onRemove: (subtask: SubtaskDTO) => void,
 }
 
 /**
@@ -50,16 +60,16 @@ type SubtaskViewProps = {
 export const SubtaskView = ({
   overwriteTranslation,
   subtasks,
-  taskId,
+  taskOrTemplateId,
   onChange,
+  onAdd,
+  onUpdate,
+  onRemove,
 }: PropsForTranslation<SubtaskViewTranslation, SubtaskViewProps>) => {
   const context = useContext(TaskTemplateContext)
 
   const translation = useTranslation([defaultSubtaskViewTranslation], overwriteTranslation)
-  const isCreatingTask = taskId === ''
-  const addSubtaskMutation = useSubTaskAddMutation()
-  const deleteSubtaskMutation = useSubTaskDeleteMutation()
-  const updateSubtaskMutation = useSubTaskUpdateMutation()
+  const isCreating = taskOrTemplateId === ''
 
   const scrollableRef = useRef<Scrollbars>(null)
   const [scrollToBottomFlag, setScrollToBottom] = useState(false)
@@ -72,10 +82,9 @@ export const SubtaskView = ({
     setScrollToBottom(false)
   }, [scrollToBottomFlag, subtasks])
 
-  const removeSubtask = (subtask: SubTaskDTO, index: number) => {
+  const removeSubtask = (subtask: SubtaskDTO, index: number) => {
     const filteredSubtasks = subtasks.filter((_, subtaskIndex) => subtaskIndex !== index)
-    // undefined because taskId === "" would mean task creation // TODO: this seems like a terrible way of differentiating things..
-    if (taskId === undefined) {
+    if (isCreating) {
       context.updateContext({
         ...context.state,
         template: { ...context.state.template, subtasks: filteredSubtasks },
@@ -84,7 +93,7 @@ export const SubtaskView = ({
       })
     } else {
       onChange(filteredSubtasks)
-      deleteSubtaskMutation.mutate(subtask.id)
+      onRemove(subtask)
     }
   }
 
@@ -94,10 +103,10 @@ export const SubtaskView = ({
         <span className="textstyle-title-normal">{translation('subtasks')}</span>
         <SolidButton
           onClick={() => {
-            const newSubtask: SubTaskDTO = { id: '', name: `${translation('newSubtask')} ${subtasks.length + 1}`, isDone: false, taskId: taskId ?? '' }
+            const newSubtask: SubtaskDTO = { id: '', name: `${translation('newSubtask')} ${subtasks.length + 1}`, isDone: false, taskId: taskOrTemplateId ?? '' }
             onChange([...subtasks, newSubtask])
-            if (!isCreatingTask) {
-              addSubtaskMutation.mutate(newSubtask)
+            if (!isCreating) {
+              onAdd(newSubtask)
             }
             setScrollToBottom(true)
           }}
@@ -119,7 +128,7 @@ export const SubtaskView = ({
                   const newSubtasks = [...subtasks]
                   newSubtasks[index] = newSubtask
                   if (subtask.id) {
-                    updateSubtaskMutation.mutate(newSubtask)
+                    onUpdate(newSubtask)
                   }
                   onChange(newSubtasks)
                 }}
diff --git a/tasks/components/WardForm.tsx b/tasks/components/WardForm.tsx
index c324fc0d7..fe3cec94e 100644
--- a/tasks/components/WardForm.tsx
+++ b/tasks/components/WardForm.tsx
@@ -60,7 +60,7 @@ export const WardForm = ({
   const maxWardNameLength = 32
 
   const inputErrorClasses = 'border-negative focus:border-negative focus:ring-negative border-2'
-  const inputClasses = 'mt-1 block rounded-md w-full border-gray-300 shadow-sm focus:outline-none focus:border-primary focus:ring-primary'
+  const inputClasses = 'mt-1 block rounded-md w-full'
 
   function validateName(ward: WardFormInfoDTO) {
     const wardName = ward.name.trim()
diff --git a/tasks/components/layout/TaskTemplateDetails.tsx b/tasks/components/layout/TaskTemplateDetails.tsx
index 9a30809e7..523f79255 100644
--- a/tasks/components/layout/TaskTemplateDetails.tsx
+++ b/tasks/components/layout/TaskTemplateDetails.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import type { Translation } from '@helpwave/hightide'
 import {
@@ -10,10 +10,18 @@ import {
   TextButton,
   useTranslation
 } from '@helpwave/hightide'
-import type { TaskTemplateDTO } from '@helpwave/api-services/types/tasks/tasks_templates'
 import { SubtaskView } from '../SubtaskView'
 import { ColumnTitle } from '../ColumnTitle'
-import { TaskTemplateContext, type TaskTemplateFormType } from '@/pages/templates'
+import { emptyTaskTemplate } from '@/pages/templates'
+import { TaskTemplateContext } from '@/pages/templates'
+import {
+  useTaskTemplateCreateMutation,
+  useTaskTemplateDeleteMutation,
+  useTaskTemplateSubtaskCreateMutation,
+  useTaskTemplateSubtaskDeleteMutation,
+  useTaskTemplateSubtaskUpdateMutation,
+  useTaskTemplateUpdateMutation
+} from '@helpwave/api-services/mutations/tasks/task_template_mutations'
 
 type TaskTemplateDetailsTranslation = {
   updateTaskTemplate: string,
@@ -43,7 +51,7 @@ const defaultTaskTemplateDetailsTranslations: Translation<TaskTemplateDetailsTra
     update: 'Update',
     tooLong: `Too long, at most {{characters}} characters`,
     tooShort: `Too short, at least {{characters}} characters`,
-    required: 'Required Field, cannot be empty'
+    required: 'Required Field, cannot be empty',
   },
   de: {
     updateTaskTemplate: 'Task Template bearbeiten',
@@ -61,32 +69,62 @@ const defaultTaskTemplateDetailsTranslations: Translation<TaskTemplateDetailsTra
   }
 }
 
-export type TaskTemplateDetailsProps = {
-  onCreate: (taskTemplate: TaskTemplateDTO) => void,
-  onUpdate: (taskTemplate: TaskTemplateFormType) => void,
-  onDelete: (taskTemplate: TaskTemplateDTO) => void,
-}
+export type TaskTemplateDetailsProps = object
 
 /**
  * The right side of the task templates page
  */
 export const TaskTemplateDetails = ({
                                       overwriteTranslation,
-                                      onCreate,
-                                      onUpdate,
-                                      onDelete,
                                     }: PropsForTranslation<TaskTemplateDetailsTranslation, TaskTemplateDetailsProps>) => {
-  const context = useContext(TaskTemplateContext)
-
+  const { state, updateContext } = useContext(TaskTemplateContext)
+  const { template, wardId } = state
   const translation = useTranslation([defaultTaskTemplateDetailsTranslations], overwriteTranslation)
-  const isCreatingNewTemplate = context.state.template.id === ''
+
+  const createMutation = useTaskTemplateCreateMutation({
+    onSuccess: (taskTemplate) => {
+      updateContext(prevState => ({
+        ...prevState,
+        hasChanges: false,
+        isValid: taskTemplate !== undefined,
+        template: taskTemplate
+      }))
+    }
+  })
+
+  const updateMutation = useTaskTemplateUpdateMutation({
+    onSuccess: () => {
+      updateContext(prevState => ({
+        ...prevState,
+        hasChanges: false,
+        isValid: true,
+      }))
+    },
+  })
+
+  const deleteMutation = useTaskTemplateDeleteMutation({
+    onSuccess: () => {
+      updateContext(prevState => ({
+        ...prevState,
+        hasChanges: false,
+        isValid: true,
+        template: emptyTaskTemplate
+      }))
+    },
+  })
+
+  const createSubtaskMutation = useTaskTemplateSubtaskCreateMutation()
+  const updateSubtaskMutation = useTaskTemplateSubtaskUpdateMutation()
+  const removeSubtaskMutation = useTaskTemplateSubtaskDeleteMutation()
+
+  const isCreatingNewTemplate = !template.id
   const [isShowingConfirmDialog, setIsShowingConfirmDialog] = useState(false)
   const [touched, setTouched] = useState({
     name: !isCreatingNewTemplate
   })
 
   const inputErrorClasses = 'border-negative focus:border-negative focus:ring-negative border-2'
-  const inputClasses = 'mt-1 block rounded-md w-full border-gray-300 shadow-sm focus:outline-none focus:border-primary focus:ring-primary'
+  const inputClasses = 'mt-1 block rounded-md w-full'
 
   const minNameLength = 2
   const maxNameLength = 32
@@ -102,9 +140,18 @@ export const TaskTemplateDetails = ({
     }
   }
 
-  const nameErrorMessage: string | undefined = validateName(context.state.template.name)
+  const nameErrorMessage: string | undefined = validateName(template.name)
   const isDisplayingNameError: boolean = touched.name && nameErrorMessage !== undefined
 
+  useEffect(() => {
+    if(isCreatingNewTemplate && template.wardId !== wardId) {
+      updateContext(prevState => ({
+        ...prevState,
+        template: { ...template, wardId }
+      }))
+    }
+  }, [isCreatingNewTemplate, template, updateContext, wardId])
+
   return (
     <div className="col py-4 px-6">
       <ConfirmModal
@@ -115,7 +162,7 @@ export const TaskTemplateDetails = ({
         onCancel={() => setIsShowingConfirmDialog(false)}
         onConfirm={() => {
           setIsShowingConfirmDialog(false)
-          onDelete(context.state.template)
+          deleteMutation.mutate(template.id)
         }}
         confirmType="negative"
       />
@@ -123,50 +170,54 @@ export const TaskTemplateDetails = ({
         title={isCreatingNewTemplate ? translation('createTaskTemplate') : translation('updateTaskTemplate')}
         description={!isCreatingNewTemplate ? translation('updateTaskTemplateDescription') : undefined}
       />
-      <div className=" col gap-y-4 max-w-[400px] mb-4">
-        <div>
-          <Input
-            id="name"
-            value={context.state.template.name}
-            label={{ name: translation('name') }}
-            type="text"
-            onBlur={() => setTouched({ name: true })}
-            onChangeText={text => {
-              context.updateContext({
-                template: { ...context.state.template, name: text },
-                isValid: validateName(text) === undefined,
-                hasChanges: true,
-                deletedSubtaskIds: context.state.deletedSubtaskIds
-              })
-            }}
-            maxLength={maxNameLength}
-            className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingNameError })}
-          />
-          {isDisplayingNameError && <span className="textstyle-form-error">{nameErrorMessage}</span>}
-        </div>
+      <div className=" col gap-y-4 max-w-128 mb-4">
+        <Input
+          id="name"
+          value={template.name}
+          label={{ name: translation('name') }}
+          type="text"
+          onBlur={() => setTouched({ name: true })}
+          onChangeText={text => {
+            updateContext(prevState => ({
+              ...prevState,
+              template: { ...prevState.template, name: text },
+              isValid: validateName(text) === undefined,
+              hasChanges: true,
+              deletedSubtaskIds: state.deletedSubtaskIds
+            }))
+          }}
+          maxLength={maxNameLength}
+          className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingNameError })}
+        />
+        {isDisplayingNameError && <span className="textstyle-form-error">{nameErrorMessage}</span>}
         <Textarea
           headline={translation('notes')}
           id="notes"
-          value={context.state.template.notes}
+          value={template.notes}
           onChangeText={text => {
-            context.updateContext({
-              template: { ...context.state.template, notes: text },
-              isValid: context.state.isValid,
+            updateContext(prevState => ({
+              ...prevState,
+              template: { ...state.template, notes: text },
+              isValid: state.isValid,
               hasChanges: true,
-              deletedSubtaskIds: context.state.deletedSubtaskIds
-            })
+              deletedSubtaskIds: state.deletedSubtaskIds
+            }))
           }}
         />
       </div>
       <SubtaskView
-        taskTemplateId={context.state.template.id}
-        subtasks={context.state.template.subtasks}
-        onChange={subtasks => context.updateContext({
+        taskOrTemplateId={template.id}
+        subtasks={template.subtasks}
+        onChange={subtasks => updateContext(prevState => ({
+          ...prevState,
           hasChanges: true,
-          isValid: context.state.isValid,
-          template: { ...context.state.template, subtasks },
-          deletedSubtaskIds: context.state.deletedSubtaskIds
-        })}
+          isValid: state.isValid,
+          template: { ...template, subtasks },
+          deletedSubtaskIds: state.deletedSubtaskIds
+        }))}
+        onAdd={subtask => createSubtaskMutation.mutate(subtask)}
+        onUpdate={subtask => updateSubtaskMutation.mutate(subtask)}
+        onRemove={subtask => removeSubtaskMutation.mutate(subtask.id)}
       />
       <div className={clsx('row mt-12',
         {
@@ -176,16 +227,26 @@ export const TaskTemplateDetails = ({
       >
         <SolidButton
           className="w-auto"
-          onClick={() => isCreatingNewTemplate ? onCreate(context.state.template) : onUpdate(context.state)}
-          disabled={!context.state.isValid}
+          onClick={() => {
+            if (isCreatingNewTemplate) {
+              createMutation.mutate(template)
+            } else {
+              updateMutation.mutate(template)
+            }
+          }}
+          disabled={!state.isValid}
         >
           {isCreatingNewTemplate ? translation('create') : translation('update')}
         </SolidButton>
         {!isCreatingNewTemplate &&
           (
-<TextButton color="negative"
-                       onClick={() => setIsShowingConfirmDialog(true)}>{translation('deleteTaskTemplate')}</TextButton>
-)
+            <TextButton
+              color="negative"
+              onClick={() => setIsShowingConfirmDialog(true)}
+            >
+              {translation('deleteTaskTemplate')}
+            </TextButton>
+          )
         }
       </div>
     </div>
diff --git a/tasks/components/layout/TaskTemplateDisplay.tsx b/tasks/components/layout/TaskTemplateDisplay.tsx
index becbb670f..5235fa8dd 100644
--- a/tasks/components/layout/TaskTemplateDisplay.tsx
+++ b/tasks/components/layout/TaskTemplateDisplay.tsx
@@ -1,12 +1,15 @@
 import { useRouter } from 'next/router'
 import type { Translation } from '@helpwave/hightide'
+import { LoadingAndErrorComponent } from '@helpwave/hightide'
 import { type PropsForTranslation, SelectUncontrolled, useTranslation } from '@helpwave/hightide'
-import type { TaskTemplateDTO } from '@helpwave/api-services/types/tasks/tasks_templates'
 import { AddCard } from '../cards/AddCard'
 import { TaskTemplateCard } from '../cards/TaskTemplateCard'
 import clsx from 'clsx'
 import { ColumnTitle } from '@/components/ColumnTitle'
 import { useWardOverviewsQuery } from '@helpwave/api-services/mutations/tasks/ward_mutations'
+import { useContext } from 'react'
+import { emptyTaskTemplate, TaskTemplateContext } from '@/pages/templates'
+import type { TaskTemplateDTO } from '@helpwave/api-services/types/tasks/tasks_templates'
 
 export type TaskTemplateDisplayTranslation = {
   addNewTaskTemplate: string,
@@ -30,37 +33,41 @@ const defaultTaskTemplateDisplayTranslation: Translation<TaskTemplateDisplayTran
   }
 }
 
-export type TaskTemplateDisplayProps = {
-  wardId: string,
-  selectedId: string,
-  onSelectChange: (taskTemplate: TaskTemplateDTO | undefined) => void,
-  taskTemplates: TaskTemplateDTO[],
-  variant: 'wardTemplates' | 'personalTemplates',
-}
+export type TaskTemplateDisplayProps = object
 
 /**
  * A column for showing TaskTemplates either for Ward or Private templates
  */
 export const TaskTemplateDisplay = ({
                                       overwriteTranslation,
-                                      wardId,
-                                      selectedId,
-                                      onSelectChange,
-                                      taskTemplates,
-                                      variant,
                                     }: PropsForTranslation<TaskTemplateDisplayTranslation, TaskTemplateDisplayProps>) => {
   const translation = useTranslation([defaultTaskTemplateDisplayTranslation], overwriteTranslation)
+  const { state, updateContext } = useContext(TaskTemplateContext)
+  const { isLoading, template, wardId, hasError, templates } = state
 
   const router = useRouter()
   const { data: wards, isLoading: isLoadingWards, isError: isErrorWards } = useWardOverviewsQuery()
 
+  const isShowingWardTemplates = !!wardId
+  const selectedId = template.id
+
+  const onChangeSelected = (taskTemplate: TaskTemplateDTO) => {
+    updateContext(prevState => ({
+      ...prevState,
+      template: taskTemplate,
+      hasChanges: false,
+      isValid: !!taskTemplate.id,
+      deletedSubtaskIds: []
+    }))
+  }
+
   return (
     <div className="py-4 px-6 @container">
       <ColumnTitle
-        title={variant === 'personalTemplates' ? translation('personalTaskTemplates') : translation('wardTaskTemplates')}
+        title={!isShowingWardTemplates ? translation('personalTaskTemplates') : translation('wardTaskTemplates')}
         actions={(
           <SelectUncontrolled<string>
-            value={variant === 'personalTemplates' ? 'personal' : wardId}
+            value={!isShowingWardTemplates ? 'personal' : wardId}
             options={[...(wards ?? []).map(value => ({
               label: value.name,
               value: value.id,
@@ -82,29 +89,35 @@ export const TaskTemplateDisplay = ({
         )}
         containerClassName="mb-2"
       />
-      <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
-        {taskTemplates.map(taskTemplate => (
-          <TaskTemplateCard
-            key={taskTemplate.id}
-            name={taskTemplate.name}
-            subtaskCount={taskTemplate.subtasks.length}
-            isSelected={selectedId === taskTemplate.id}
-            onEditClick={() => onSelectChange(taskTemplate)}
-            onClick={() => onSelectChange(taskTemplate)}
-            className="!min-h-17 !h-auto"
+      <LoadingAndErrorComponent
+        isLoading={isLoading}
+        hasError={hasError}
+        className="min-h-40"
+      >
+        <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
+          {templates && templates.map(taskTemplate => (
+            <TaskTemplateCard
+              key={taskTemplate.id}
+              name={taskTemplate.name}
+              subtaskCount={taskTemplate.subtasks.length}
+              isSelected={selectedId === taskTemplate.id}
+              onEditClick={() => onChangeSelected(taskTemplate)}
+              onClick={() => onChangeSelected(taskTemplate)}
+              className="!min-h-17 !h-auto"
+            />
+          ))}
+          <AddCard
+            onClick={() => onChangeSelected(emptyTaskTemplate)}
+            className={clsx(
+              '!min-h-17 !h-auto',
+              {
+                'border-primary border-2': selectedId === ''
+              }
+            )}
+            text={translation('addNewTaskTemplate')}
           />
-        ))}
-        <AddCard
-          onClick={() => onSelectChange(undefined)}
-          className={clsx(
-            '!min-h-17 !h-auto',
-            {
-              'border-primary border-2': selectedId === ''
-            }
-          )}
-          text={translation('addNewTaskTemplate')}
-        />
-      </div>
+        </div>
+      </LoadingAndErrorComponent>
     </div>
   )
 }
diff --git a/tasks/components/layout/WardDetails.tsx b/tasks/components/layout/WardDetails.tsx
index 552501f61..ec4210ff7 100644
--- a/tasks/components/layout/WardDetails.tsx
+++ b/tasks/components/layout/WardDetails.tsx
@@ -66,7 +66,6 @@ const defaultWardDetailTranslations: Translation<WardDetailTranslation> = {
 }
 
 export type WardDetailProps = {
-  organizationId: string,
   ward?: WardDetailDTO,
 }
 
@@ -95,11 +94,14 @@ export const WardDetail = ({
     }
   }, [data, isCreatingNewWard])
 
-  const createWardMutation = useWardCreateMutation((ward) => context.updateContext({ ...context.state, wardId: ward.id }))
-  const updateWardMutation = useWardUpdateMutation((ward) => {
-    setNewWard({ ...newWard, name: ward.name })
+  const createWardMutation = useWardCreateMutation({
+    onSuccess: (ward) => context.updateContext({
+      ...context.state,
+      wardId: ward.id
+    })
   })
-  const deleteWardMutation = useWardDeleteMutation(() => context.updateContext({ ...context.state, wardId: '' }))
+  const updateWardMutation = useWardUpdateMutation()
+  const deleteWardMutation = useWardDeleteMutation()
 
   return (
     <div className="col py-4 px-6">
diff --git a/tasks/components/layout/WardDisplay.tsx b/tasks/components/layout/WardDisplay.tsx
index 097667040..173ed56cc 100644
--- a/tasks/components/layout/WardDisplay.tsx
+++ b/tasks/components/layout/WardDisplay.tsx
@@ -25,7 +25,6 @@ const defaultWardDisplayTranslations: Translation<WardDisplayTranslation> = {
 }
 
 export type WardDisplayProps = {
-  organizationId: string,
   selectedWardId?: string,
 }
 
@@ -34,13 +33,12 @@ export type WardDisplayProps = {
  */
 export const WardDisplay = ({
                               overwriteTranslation,
-                              organizationId,
                               selectedWardId,
                             }: PropsForTranslation<WardDisplayTranslation, WardDisplayProps>) => {
   const translation = useTranslation([defaultWardDisplayTranslations], overwriteTranslation)
   const router = useRouter()
   const context = useContext(OrganizationOverviewContext)
-  const { data, isLoading, isError } = useWardOverviewsQuery(organizationId)
+  const { data, isLoading, isError } = useWardOverviewsQuery()
 
   const wards = data?.sort((a, b) => a.name.localeCompare(b.name))
   selectedWardId ??= context.state.wardId
diff --git a/tasks/components/modals/TaskDetailModal.tsx b/tasks/components/modals/TaskDetailModal.tsx
index 16d4db1f4..a8e64f3cd 100644
--- a/tasks/components/modals/TaskDetailModal.tsx
+++ b/tasks/components/modals/TaskDetailModal.tsx
@@ -26,7 +26,7 @@ import {
   useWardTaskTemplateQuery
 } from '@helpwave/api-services/mutations/tasks/task_template_mutations'
 import {
-  useAssignTaskMutation,
+  useAssignTaskMutation, useSubtaskAddMutation, useSubtaskDeleteMutation, useSubtaskUpdateMutation,
   useTaskCreateMutation,
   useTaskDeleteMutation,
   useTaskQuery,
@@ -307,6 +307,10 @@ export const TaskDetailModal = ({
     onSuccess: () => onClose()
   })
 
+  const addSubtaskMutation = useSubtaskAddMutation()
+  const updateSubtaskMutation = useSubtaskUpdateMutation()
+  const deleteSubtaskMutation = useSubtaskDeleteMutation()
+
   useEffect(() => {
     if (data && taskId) {
       setTask(data)
@@ -374,7 +378,14 @@ export const TaskDetailModal = ({
             onEditCompleted={(text) => updateTaskLocallyAndExternally({ ...task, notes: text })}
           />
         </div>
-        <SubtaskView subtasks={task.subtasks} taskId={taskId} onChange={(subtasks) => setTask({ ...task, subtasks })}/>
+        <SubtaskView
+          subtasks={task.subtasks}
+          taskOrTemplateId={taskId}
+          onChange={(subtasks) => setTask({ ...task, subtasks })}
+          onAdd={subtask => addSubtaskMutation.mutate(subtask)}
+          onUpdate={subtask => updateSubtaskMutation.mutate(subtask)}
+          onRemove={subtask => deleteSubtaskMutation.mutate(subtask)}
+        />
       </div>
       <TaskDetailViewSidebar task={task} onChange={setTask} isCreating={isCreating}/>
     </div>
diff --git a/tasks/package.json b/tasks/package.json
index 536f0e894..0825fc3fe 100644
--- a/tasks/package.json
+++ b/tasks/package.json
@@ -14,7 +14,7 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "7.0.2",
     "@helpwave/api-services": "workspace:*",
-    "@helpwave/hightide": "^0.1.24",
+    "@helpwave/hightide": "^0.1.25",
     "@tailwindcss/postcss": "^4.1.3",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
diff --git a/tasks/pages/organizations/[organizationId].tsx b/tasks/pages/organizations/[organizationId].tsx
index e9a193806..282f2dab8 100644
--- a/tasks/pages/organizations/[organizationId].tsx
+++ b/tasks/pages/organizations/[organizationId].tsx
@@ -76,7 +76,10 @@ const WardsPage: NextPage = ({ overwriteTranslation }: PropsForTranslation<Wards
   return (
     <PageWithHeader
       crumbs={[
-        { display: organization?.longName ?? translation('organizations'), link: `/organizations?organizationId=${organizationId}` },
+        {
+          display: organization?.longName ?? translation('organizations'),
+          link: `/organizations?organizationId=${organizationId}`
+        },
         { display: translation('wards'), link: `/organizations/${organizationId}` }
       ]}
     >
@@ -86,10 +89,8 @@ const WardsPage: NextPage = ({ overwriteTranslation }: PropsForTranslation<Wards
       <OrganizationOverviewContext.Provider value={{ state: contextState, updateContext: setContextState }}>
         <TwoColumn
           disableResize={false}
-          left={() => (<WardDisplay organizationId={organizationId} />)}
-          right={() => (
-            <WardDetail key={contextState.wardId} organizationId={organizationId}/>
-          )}
+          left={() => (<WardDisplay/>)}
+          right={() => (<WardDetail key={contextState.wardId}/>)}
         />
       </OrganizationOverviewContext.Provider>
     </PageWithHeader>
diff --git a/tasks/pages/templates.tsx b/tasks/pages/templates.tsx
index bbb9eea83..a2565cf04 100644
--- a/tasks/pages/templates.tsx
+++ b/tasks/pages/templates.tsx
@@ -1,16 +1,12 @@
-import { createContext, useState } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 
-import { LoadingAnimation, type PropsForTranslation, useTranslation } from '@helpwave/hightide'
-import { LoadingAndErrorComponent } from '@helpwave/hightide'
+import { type PropsForTranslation, useTranslation } from '@helpwave/hightide'
 import type { TaskTemplateDTO } from '@helpwave/api-services/types/tasks/tasks_templates'
-import { useAuth } from '@helpwave/api-services/authentication/useAuth'
 import {
-  useCreateMutation,
-  useDeleteMutation,
-  usePersonalTaskTemplateQuery,
-  useUpdateMutation
+  usePersonalTaskTemplateQuery
 } from '@helpwave/api-services/mutations/tasks/task_template_mutations'
 import { TwoColumn } from '@/components/layout/TwoColumn'
 import { PageWithHeader } from '@/components/layout/PageWithHeader'
@@ -18,6 +14,7 @@ import { TaskTemplateDisplay } from '@/components/layout/TaskTemplateDisplay'
 import { TaskTemplateDetails } from '@/components/layout/TaskTemplateDetails'
 import titleWrapper from '@/utils/titleWrapper'
 import { useRouteParameters } from '@/hooks/useRouteParameters'
+import { useAuth } from '@helpwave/api-services/authentication/useAuth'
 
 type PersonalTaskTemplateTranslation = {
   taskTemplates: string,
@@ -35,19 +32,14 @@ const defaultPersonalTaskTemplateTranslations = {
   }
 }
 
-export type TaskTemplateFormType = {
-  isValid: boolean,
-  hasChanges: boolean,
-  template: TaskTemplateDTO,
-  wardId?: string,
-  deletedSubtaskIds?: string[],
-}
-
 export type TaskTemplateContextState = {
   isValid: boolean,
-  template: TaskTemplateDTO,
+  isLoading: boolean,
+  hasError: boolean,
   hasChanges: boolean,
+  template: TaskTemplateDTO,
   wardId?: string,
+  templates: TaskTemplateDTO[],
   deletedSubtaskIds?: string[],
 }
 
@@ -56,19 +48,23 @@ export const emptyTaskTemplate: TaskTemplateDTO = {
   isPublicVisible: false,
   name: '',
   notes: '',
-  subtasks: []
+  subtasks: [],
+  creatorId: ''
 }
 
 export type TaskTemplateContextType = {
-  state: TaskTemplateFormType,
-  updateContext: (context: TaskTemplateContextState) => void,
+  state: TaskTemplateContextState,
+  updateContext: Dispatch<SetStateAction<TaskTemplateContextState>>,
 }
 
 export const taskTemplateContextState = {
   isValid: false,
-  template: emptyTaskTemplate,
+  isLoading: true,
+  hasError: false,
   hasChanges: false,
-  deletedSubtaskIds: []
+  template: emptyTaskTemplate,
+  deletedSubtaskIds: [],
+  templates: [],
 }
 
 export const TaskTemplateContext = createContext<TaskTemplateContextType>({
@@ -84,43 +80,30 @@ const PersonalTaskTemplatesPage: NextPage = ({ overwriteTranslation }: PropsForT
   const { isLoading, isError, data } = usePersonalTaskTemplateQuery(user?.id)
 
   const [contextState, setContextState] = useState<TaskTemplateContextState>(taskTemplateContextState)
-
-  const wardId = '' // TODO: why is this empty? (tracing back where is value originally came from lead me to the fact that this value would always be undefined or an empty string, thus I hardcoded it here now but it would be great to know if this is correct)
-  const createMutation = useCreateMutation(wardId, 'personalTaskTemplates', taskTemplate =>
-    setContextState({
-      ...contextState,
-      hasChanges: false,
-      isValid: taskTemplate !== undefined,
-      template: taskTemplate ?? emptyTaskTemplate
-    }))
-
-  const updateMutation = useUpdateMutation('personalTaskTemplates', taskTemplate => {
-    setContextState({
-      ...contextState,
-      hasChanges: false,
-      isValid: taskTemplate !== undefined,
-      template: taskTemplate ?? emptyTaskTemplate
+  useEffect(() => {
+    setContextState(prevState => {
+      const newState = { ...prevState, hasError: isError, isLoading, hasChanges: false, isValid: true }
+      if (data) {
+        newState.templates = data
+        newState.template = data.find(value => value.id === prevState.template.id) ?? emptyTaskTemplate
+      }
+      return newState
     })
-  })
-
-  const deleteMutation = useDeleteMutation('personalTaskTemplates', taskTemplate =>
-    setContextState({
-      ...contextState,
-      hasChanges: false,
-      isValid: taskTemplate !== undefined,
-      template: taskTemplate ?? emptyTaskTemplate
-    }))
-
-  if (!contextState.hasChanges && templateId && !usedQueryParam) {
-    const newSelected = data?.find(value => value.id === templateId) ?? emptyTaskTemplate
-    setContextState({
-      ...contextState,
-      isValid: newSelected.id !== '',
-      hasChanges: false,
-      template: newSelected
-    })
-    setUsedQueryParam(true)
-  }
+  }, [isLoading, isError, data])
+
+  useEffect(() => {
+    if (!contextState.hasChanges && templateId && !usedQueryParam) {
+      const newSelected = data?.find(value => value.id === templateId) ?? emptyTaskTemplate
+      setContextState({
+        ...contextState,
+        isValid: newSelected.id !== '',
+        hasChanges: false,
+        template: newSelected,
+        wardId: newSelected.wardId
+      })
+      setUsedQueryParam(true)
+    }
+  }, [contextState, data, templateId, usedQueryParam])
 
   return (
     <PageWithHeader
@@ -130,45 +113,11 @@ const PersonalTaskTemplatesPage: NextPage = ({ overwriteTranslation }: PropsForT
         <title>{titleWrapper(translation('personalTaskTemplates'))}</title>
       </Head>
       <TaskTemplateContext.Provider value={{ state: contextState, updateContext: setContextState }}>
-        <LoadingAndErrorComponent
-          isLoading={isLoading}
-          hasError={isError || !data}
-          loadingComponent={(
-            <LoadingAnimation classname="h-full"/>
-          )}
-        >
-          <TwoColumn
-            disableResize={false}
-            left={() => (
-              // TODO move this data checking and so on into the TaskTemplateDisplay Component
-              data && (
-                <TaskTemplateDisplay
-                  onSelectChange={taskTemplate => {
-                    setContextState({
-                      ...contextState,
-                      template: taskTemplate ?? emptyTaskTemplate,
-                      hasChanges: false,
-                      isValid: taskTemplate !== undefined,
-                      deletedSubtaskIds: []
-                    })
-                  }}
-                  wardId={wardId}
-                  selectedId={contextState.template.id}
-                  taskTemplates={data}
-                  variant="personalTemplates"
-                />
-              )
-            )}
-            right={() => (
-              <TaskTemplateDetails
-                key={contextState.template.id}
-                onCreate={createMutation.mutate}
-                onUpdate={updateMutation.mutate}
-                onDelete={deleteMutation.mutate}
-              />
-            )}
-          />
-        </LoadingAndErrorComponent>
+        <TwoColumn
+          disableResize={false}
+          left={() => (<TaskTemplateDisplay/>)}
+          right={() => (<TaskTemplateDetails key={contextState.template.id}/>)}
+        />
       </TaskTemplateContext.Provider>
     </PageWithHeader>
   )
diff --git a/tasks/pages/ward/[wardId]/templates.tsx b/tasks/pages/ward/[wardId]/templates.tsx
index 367b86a32..a5a70daef 100644
--- a/tasks/pages/ward/[wardId]/templates.tsx
+++ b/tasks/pages/ward/[wardId]/templates.tsx
@@ -1,17 +1,18 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
-import { LoadingAndErrorComponent } from '@helpwave/hightide'
 import { useWardQuery } from '@helpwave/api-services/mutations/tasks/ward_mutations'
 import {
-  useCreateMutation,
-  useDeleteMutation,
-  useUpdateMutation,
   useWardTaskTemplateQuery
 } from '@helpwave/api-services/mutations/tasks/task_template_mutations'
 import { useAuth } from '@helpwave/api-services/authentication/useAuth'
-import { emptyTaskTemplate, TaskTemplateContext, taskTemplateContextState, type TaskTemplateContextState } from '@/pages/templates'
+import {
+  emptyTaskTemplate,
+  TaskTemplateContext,
+  taskTemplateContextState,
+  type TaskTemplateContextState
+} from '@/pages/templates'
 import { TwoColumn } from '@/components/layout/TwoColumn'
 import { PageWithHeader } from '@/components/layout/PageWithHeader'
 import titleWrapper from '@/utils/titleWrapper'
@@ -44,51 +45,56 @@ const defaultWardTaskTemplateTranslations = {
 const WardTaskTemplatesPage: NextPage = ({ overwriteTranslation }: PropsForTranslation<WardTaskTemplateTranslation>) => {
   const translation = useTranslation([defaultWardTaskTemplateTranslations], overwriteTranslation)
   const { wardId, templateId } = useRouteParameters<'wardId', 'templateId'>()
-  const [usedQueryParam, setUsedQueryParam] = useState(false)
-  const { isLoading, isError, data } = useWardTaskTemplateQuery(wardId)
+
   const { data: ward } = useWardQuery(wardId)
   const { organization } = useAuth()
-  const [contextState, setContextState] = useState<TaskTemplateContextState>(taskTemplateContextState)
 
-  const createMutation = useCreateMutation(wardId, 'wardTaskTemplates', taskTemplate =>
-    setContextState({
-      ...contextState,
-      hasChanges: false,
-      isValid: taskTemplate !== undefined,
-      template: taskTemplate ?? emptyTaskTemplate
-    }))
+  const [usedQueryParam, setUsedQueryParam] = useState(false)
+  const { isLoading, isError, data } = useWardTaskTemplateQuery(wardId)
+  const [contextState, setContextState] = useState<TaskTemplateContextState>(taskTemplateContextState)
 
-  const updateMutation = useUpdateMutation('wardTaskTemplates', taskTemplate =>
-    setContextState({
-      ...contextState,
-      hasChanges: false,
-      isValid: taskTemplate !== undefined,
-      template: taskTemplate ?? emptyTaskTemplate
-    }))
+  useEffect(() => {
+    setContextState(prevState => {
+      const newState = { ...prevState, hasError: isError, isLoading, hasChanges: false, isValid: true }
+      if (data) {
+        newState.templates = data
+        const template = data.find(value => value.id === prevState.template.id)
+        if (template) {
+          newState.template = template
+        }
+      }
+      return newState
+    })
+  }, [isLoading, isError, data])
 
-  const deleteMutation = useDeleteMutation('wardTaskTemplates', taskTemplate =>
-    setContextState({
-      ...contextState,
-      hasChanges: false,
-      isValid: taskTemplate !== undefined,
-      template: taskTemplate ?? emptyTaskTemplate
+  useEffect(() => {
+    setContextState(prevState => ({
+      ...prevState,
+      wardId,
     }))
+  }, [wardId])
 
-  if (!contextState.hasChanges && templateId && !usedQueryParam) {
-    const newSelected = data?.find(value => value.id === templateId) ?? emptyTaskTemplate
-    setContextState({
-      ...contextState,
-      isValid: newSelected.id !== '',
-      hasChanges: false,
-      template: newSelected
-    })
-    setUsedQueryParam(true)
-  }
+  useEffect(() => {
+    if (!contextState.hasChanges && templateId && !usedQueryParam) {
+      const newSelected = data?.find(value => value.id === templateId) ?? emptyTaskTemplate
+      setContextState({
+        ...contextState,
+        isValid: newSelected.id !== '',
+        hasChanges: false,
+        template: newSelected,
+        wardId: newSelected.wardId
+      })
+      setUsedQueryParam(true)
+    }
+  }, [contextState, data, templateId, usedQueryParam])
 
   return (
     <PageWithHeader
       crumbs={[
-        { display: organization?.name ?? translation('organization'), link: `/organizations?organizationId=${organization?.id}` },
+        {
+          display: organization?.name ?? translation('organization'),
+          link: `/organizations?organizationId=${organization?.id}`
+        },
         { display: ward?.name ?? translation('ward'), link: `/organizations/${organization?.id}?wardId=${wardId}` },
         { display: translation('taskTemplates'), link: `/ward/${wardId}/templates` }
       ]}
@@ -99,41 +105,8 @@ const WardTaskTemplatesPage: NextPage = ({ overwriteTranslation }: PropsForTrans
       <TaskTemplateContext.Provider value={{ state: contextState, updateContext: setContextState }}>
         <TwoColumn
           disableResize={false}
-          left={() => (
-            <LoadingAndErrorComponent
-              isLoading={isLoading}
-              hasError={isError}
-            >
-              {data && (
-                <TaskTemplateDisplay
-                  onSelectChange={taskTemplate => {
-                    setContextState({
-                      ...contextState,
-                      template: taskTemplate ?? {
-                        ...emptyTaskTemplate,
-                        wardId
-                      },
-                      hasChanges: false,
-                      isValid: taskTemplate !== undefined,
-                      deletedSubtaskIds: []
-                    })
-                  }}
-                  wardId={wardId}
-                  selectedId={contextState.template.id}
-                  taskTemplates={data}
-                  variant="wardTemplates"
-                />
-              )}
-            </LoadingAndErrorComponent>
-          )}
-          right={() => (
-            <TaskTemplateDetails
-              key={contextState.template.id}
-              onCreate={createMutation.mutate}
-              onUpdate={updateMutation.mutate}
-              onDelete={deleteMutation.mutate}
-            />
-          )}
+          left={() => (<TaskTemplateDisplay/>)}
+          right={() => (<TaskTemplateDetails/>)}
         />
       </TaskTemplateContext.Provider>
     </PageWithHeader>

From 103a735f01f00a478dcac9caf81eb64e999703ea Mon Sep 17 00:00:00 2001
From: DasProffi <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 22 Jul 2025 00:39:19 +0200
Subject: [PATCH 4/5] feat: directly open patient details by id

---
 api-services/authentication/useAuth.tsx       |   3 +-
 .../mutations/tasks/patient_mutations.ts      |  50 ++-
 .../users/organization_member_mutations.ts    |  31 +-
 .../mutations/users/user_mutations.ts         |  15 +-
 api-services/service/tasks/PatientService.ts  | 155 +++++-----
 api-services/service/tasks/RoomService.ts     |   7 +-
 .../users/OrganizationMemberService.ts        |  18 ++
 .../service/users/OrganizationService.ts      | 107 +++----
 api-services/service/users/UserService.ts     |  17 +
 api-services/types/tasks/bed.ts               |   2 +-
 api-services/types/tasks/patient.ts           |  50 ++-
 .../types/users/organization_member.ts        |   6 +-
 api-services/types/users/organizations.ts     |   9 +-
 api-services/types/users/user.ts              |   6 +
 pnpm-lock.yaml                                |  16 +
 tasks/components/OrganizationForm.tsx         |  14 +-
 tasks/components/OrganizationMemberList.tsx   |  24 +-
 tasks/components/RoomOverview.tsx             | 151 ++++-----
 tasks/components/cards/OrganizationCard.tsx   |   6 +-
 .../components/dnd-kit-instances/patients.ts  |  35 ++-
 tasks/components/layout/DashboardDisplay.tsx  |  24 +-
 tasks/components/layout/PatientDetails.tsx    |  30 +-
 tasks/components/layout/PatientList.tsx       | 124 +++++---
 tasks/components/layout/WardRoomList.tsx      |  52 +++-
 tasks/components/modals/AddPatientModal.tsx   |  76 ++---
 tasks/components/modals/ManageBedsModal.tsx   |   2 +-
 .../modals/PatientDischargeModal.tsx          |   2 +-
 tasks/components/modals/TaskDetailModal.tsx   |   7 +-
 tasks/components/selects/AssigneeSelect.tsx   |  29 +-
 tasks/components/selects/RoomBedSelect.tsx    |  14 +-
 tasks/next.config.js                          |   1 -
 tasks/package.json                            |   1 +
 tasks/pages/ward/[wardId].tsx                 | 292 +++++-------------
 33 files changed, 709 insertions(+), 667 deletions(-)
 create mode 100644 api-services/service/users/OrganizationMemberService.ts
 create mode 100644 api-services/service/users/UserService.ts
 create mode 100644 api-services/types/users/user.ts

diff --git a/api-services/authentication/useAuth.tsx b/api-services/authentication/useAuth.tsx
index 64ccec1b4..7a45e8d6f 100644
--- a/api-services/authentication/useAuth.tsx
+++ b/api-services/authentication/useAuth.tsx
@@ -129,12 +129,11 @@ export const ProvideAuth = ({ children }: PropsWithChildren) => {
             console.debug('Creating a new organization')
             OrganizationService.create({
               id: '',
-              email: 'test@helpwave.de',
+              contactEmail: 'test@helpwave.de',
               longName: 'Test Organization',
               shortName: 'Test-Org',
               avatarURL: 'https://helpwave.de/favicon.ico',
               isPersonal: false,
-              isVerified: false,
             }).then(organization => {
               setUser(() => ({
                 ...user,
diff --git a/api-services/mutations/tasks/patient_mutations.ts b/api-services/mutations/tasks/patient_mutations.ts
index 9a8698603..81352b74b 100644
--- a/api-services/mutations/tasks/patient_mutations.ts
+++ b/api-services/mutations/tasks/patient_mutations.ts
@@ -87,7 +87,24 @@ export const usePatientUpdateMutation = (options?: UseMutationOptions<boolean, u
   })
 }
 
-export const useAssignBedMutation = (options?: UseMutationOptions<boolean, unknown, BedWithPatientId, unknown>) => {
+export const usePatientDeleteMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    ...options,
+    mutationFn: async (id) => {
+      return await PatientService.delete(id)
+    },
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess) {
+        options.onSuccess(data, variables, context)
+      }
+      queryClient.invalidateQueries([QueryKeys.patients]).catch(reason => console.error(reason))
+      queryClient.invalidateQueries([QueryKeys.rooms]).catch(reason => console.error(reason))
+    }
+  })
+}
+
+export const usePatientAssignToBedMutation = (options?: UseMutationOptions<boolean, unknown, BedWithPatientId, unknown>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
@@ -104,7 +121,7 @@ export const useAssignBedMutation = (options?: UseMutationOptions<boolean, unkno
   })
 }
 
-export const useUnassignMutation = (options?: UseMutationOptions<boolean, unknown, string, unknown>) => {
+export const usePatientUnassignMutation = (options?: UseMutationOptions<boolean, unknown, string, unknown>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
@@ -138,7 +155,7 @@ export const usePatientDischargeMutation = (options?: UseMutationOptions<boolean
   })
 }
 
-export const useReadmitPatientMutation = (options?: UseMutationOptions<boolean, unknown, string, unknown>) => {
+export const usePatientReadmitMutation = (options?: UseMutationOptions<boolean, unknown, string>) => {
   const queryClient = useQueryClient()
   return useMutation({
     ...options,
@@ -154,3 +171,30 @@ export const useReadmitPatientMutation = (options?: UseMutationOptions<boolean,
     }
   })
 }
+
+type PatientReadmitAndAssignVariable = {
+  patientId: string,
+  bedId: string,
+}
+export const usePatientReadmitAndAssignMutation = (options?: UseMutationOptions<boolean, unknown, PatientReadmitAndAssignVariable>) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    ...options,
+    mutationFn: async ({ patientId, bedId }) => {
+      await PatientService.reAdmit(patientId)
+      return await PatientService.assignToBed({ patientId, bedId })
+    },
+    onMutate: (variables) => {
+      if(options?.onMutate){
+        options.onMutate(variables)
+      }
+    },
+    onSuccess: (data, variables, context) => {
+      if(options?.onSuccess){
+        options.onSuccess(data, variables, context)
+      }
+      queryClient.invalidateQueries([QueryKeys.rooms, roomOverviewsQueryKey]).catch(console.error)
+      queryClient.invalidateQueries([QueryKeys.patients]).catch(console.error)
+    }
+  })
+}
diff --git a/api-services/mutations/users/organization_member_mutations.ts b/api-services/mutations/users/organization_member_mutations.ts
index 1adc559f6..e392a28e7 100644
--- a/api-services/mutations/users/organization_member_mutations.ts
+++ b/api-services/mutations/users/organization_member_mutations.ts
@@ -1,35 +1,16 @@
 import { useQuery } from '@tanstack/react-query'
-import { GetMembersByOrganizationRequest } from '@helpwave/proto-ts/services/user_svc/v1/organization_svc_pb'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import { QueryKeys } from '../query_keys'
-import type { OrganizationMember } from '../../types/users/organization_member'
+import { useAuth } from '../../authentication/useAuth'
+import { OrganizationMemberService } from '../../service/users/OrganizationMemberService'
 
-export const useMembersByOrganizationQuery = (organizationId?: string) => {
+export const useMembersByOrganizationQuery = () => {
+  const { organization } = useAuth()
+  const organizationId = organization?.id
   return useQuery({
     queryKey: [QueryKeys.organizations, organizationId, 'members'],
     enabled: !!organizationId,
     queryFn: async () => {
-      if (!organizationId) {
-        return []
-      }
-
-      const req = new GetMembersByOrganizationRequest()
-      req.setId(organizationId)
-
-      const res = await APIServices.organization.getMembersByOrganization(req, getAuthenticatedGrpcMetadata())
-
-      if (!res.toObject()) {
-        console.error('error in MembersByOrganization')
-      }
-
-      const members: OrganizationMember[] = res.getMembersList().map(member => ({
-        id: member.getUserId(),
-        name: member.getNickname(),
-        email: member.getEmail(),
-        avatarURL: member.getAvatarUrl(),
-      }))
-      return members
+      return await OrganizationMemberService.getByOrganization(organizationId!)
     },
   })
 }
diff --git a/api-services/mutations/users/user_mutations.ts b/api-services/mutations/users/user_mutations.ts
index 9155ded11..0dff78b26 100644
--- a/api-services/mutations/users/user_mutations.ts
+++ b/api-services/mutations/users/user_mutations.ts
@@ -1,21 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
-import { ReadPublicProfileRequest } from '@helpwave/proto-ts/services/user_svc/v1/user_svc_pb'
 import { QueryKeys } from '../query_keys'
-import { APIServices } from '../../services'
-import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import { UserService } from '../../service/users/UserService'
 
-export const useUserQuery = (userId: string | undefined) => {
-  const enabled = !!userId && userId !== '00000000-0000-0000-0000-000000000000'
+export const useUserQuery = (userId?: string) => {
+  const enabled = !!userId
   return useQuery({
     queryKey: [QueryKeys.users, userId],
     enabled,
     queryFn: async () => {
-      if (!enabled || !userId) return
-      const req = new ReadPublicProfileRequest()
-      req.setId(userId)
-
-      const res = await APIServices.user.readPublicProfile(req, getAuthenticatedGrpcMetadata())
-      return res.toObject()
+      return await UserService.get(userId!)
     },
   })
 }
diff --git a/api-services/service/tasks/PatientService.ts b/api-services/service/tasks/PatientService.ts
index 299e9b857..b1ef166e6 100644
--- a/api-services/service/tasks/PatientService.ts
+++ b/api-services/service/tasks/PatientService.ts
@@ -1,7 +1,7 @@
 import type {
-  PatientDetailsDTO, PatientDTO,
+  PatientDetailsDTO,
+  PatientDTO,
   PatientListDTO,
-  PatientMinimalDTO,
   PatientWithBedIdDTO,
   RecentPatientDTO
 } from '../../types/tasks/patient'
@@ -10,13 +10,20 @@ import { APIServices } from '../../services'
 import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 import {
   AssignBedRequest,
-  CreatePatientRequest, DeletePatientRequest, DischargePatientRequest,
+  CreatePatientRequest,
+  DeletePatientRequest,
+  DischargePatientRequest,
   GetPatientAssignmentByWardRequest,
-  GetPatientDetailsRequest, GetPatientListRequest,
-  GetPatientsByWardRequest, GetRecentPatientsRequest, ReadmitPatientRequest, UnassignBedRequest, UpdatePatientRequest
+  GetPatientDetailsRequest,
+  GetPatientListRequest,
+  GetPatientsByWardRequest,
+  GetRecentPatientsRequest,
+  ReadmitPatientRequest,
+  UnassignBedRequest,
+  UpdatePatientRequest
 } from '@helpwave/proto-ts/services/tasks_svc/v1/patient_svc_pb'
 import type { RoomWithMinimalBedAndPatient } from '../../types/tasks/room'
-import type { BedWithPatientId } from '../../types/tasks/bed'
+import type { BedWithMinimalPatientDTO, BedWithPatientId } from '../../types/tasks/bed'
 
 export const PatientService = {
   getDetails: async function (patientId: string): Promise<PatientDetailsDTO> {
@@ -27,9 +34,11 @@ export const PatientService = {
 
     return {
       id: res.getId(),
-      note: res.getNotes(),
-      name: res.getHumanReadableIdentifier(),
+      notes: res.getNotes(),
+      humanReadableIdentifier: res.getHumanReadableIdentifier(),
       discharged: res.getIsDischarged(),
+      bed: res.getBed()?.toObject(),
+      room: res.getRoom()?.toObject(),
       tasks: res.getTasksList().map(task => ({
         id: task.getId(),
         name: task.getName(),
@@ -45,7 +54,7 @@ export const PatientService = {
           taskId: task.getId(),
         })),
         patientId: res.getId(),
-      }))
+      })),
     }
   },
   getPatientsByWard: async function (wardId: string): Promise<PatientWithBedIdDTO[]> {
@@ -53,12 +62,7 @@ export const PatientService = {
       .setWardId(wardId)
     const res = await APIServices.patient.getPatientsByWard(req, getAuthenticatedGrpcMetadata())
 
-    return res.getPatientsList().map((patient) => ({
-      id: patient.getId(),
-      name: patient.getHumanReadableIdentifier(),
-      note: patient.getNotes(),
-      bedId: patient.getBedId(),
-    }))
+    return res.getPatientsList().map((patient) => patient.toObject())
   },
   getPatientAssignmentByWard: async function (wardId: string): Promise<RoomWithMinimalBedAndPatient[]> {
     const req = new GetPatientAssignmentByWardRequest()
@@ -66,25 +70,18 @@ export const PatientService = {
     const res = await APIServices.patient.getPatientAssignmentByWard(req, getAuthenticatedGrpcMetadata())
 
     return res.getRoomsList().map((room) => ({
-      id: room.getId(),
-      name: room.getName(),
-      wardId,
-      beds: room.getBedsList().map(bed => {
-        let patient: PatientMinimalDTO | undefined
-        const objectPatient = bed.getPatient()
-        if (objectPatient) {
-          patient = {
-            id: objectPatient.getId(),
-            name: objectPatient.getName()
-          }
-        }
-        return {
-          id: bed.getId(),
-          name: bed.getName(),
-          patient
-        }
-      })
-    }))
+        ...room.toObject(),
+        wardId,
+        beds: room.getBedsList().map<BedWithMinimalPatientDTO>(bed => ({
+          ...bed.toObject(),
+          patient: bed.hasPatient() ? {
+            ...bed.getPatient()!.toObject(),
+            bedId: bed.getId(),
+            humanReadableIdentifier: bed.getPatient()!.getName(),
+          } : undefined,
+        }))
+      }
+    ))
   },
   getPatientList: async function (wardId?: string): Promise<PatientListDTO> {
     const req = new GetPatientListRequest()
@@ -99,36 +96,23 @@ export const PatientService = {
         const bed = value.getBed()
 
         if (!room) {
-          console.error('no room for active patient in PatientList')
+          throw new Error('No room for active patient in PatientList')
         }
-
         if (!bed) {
-          console.error('no room for active patient in PatientList')
+          throw new Error('No bed for active patient in PatientList')
         }
         return ({
           id: value.getId(),
-          name: value.getHumanReadableIdentifier(),
-          bed: {
-            id: bed?.getId() ?? '',
-            name: bed?.getName() ?? ''
-          },
-          room: {
-            id: room?.getId() ?? '',
-            name: room?.getName() ?? '',
-            wardId: room?.getWardId() ?? ''
-          }
+          humanReadableIdentifier: value.getHumanReadableIdentifier(),
+          bed: bed!.toObject(),
+          room: room!.toObject(),
         })
       }),
-      discharged: res.getDischargedPatientsList().map(value => ({
-        id: value.getId(),
-        name: value.getHumanReadableIdentifier(),
-      })),
-      unassigned: res.getUnassignedPatientsList().map(value => ({
-        id: value.getId(),
-        name: value.getHumanReadableIdentifier(),
-      }))
+      discharged: res.getDischargedPatientsList().map(value => value.toObject()),
+      unassigned: res.getUnassignedPatientsList().map(value => value.toObject())
     }
-  },
+  }
+  ,
   getRecentPatients: async function (): Promise<RecentPatientDTO[]> {
     const req = new GetRecentPatientsRequest()
     const res = await APIServices.patient.getRecentPatients(req, getAuthenticatedGrpcMetadata())
@@ -144,59 +128,78 @@ export const PatientService = {
 
       patients.push({
         id: patient.getId(),
-        name: patient.getHumanReadableIdentifier(),
+        humanReadableIdentifier: patient.getHumanReadableIdentifier(),
         wardId,
-        bed: bed ? { id: bed.getId(), name: bed.getName() } : undefined,
-        room: room ? { id: room.getId(), name: room.getId() } : undefined
+        bed: bed?.toObject(),
+        room: room?.toObject()
       })
     }
     return patients
-  },
+  }
+  ,
   create: async function (patient: PatientDTO): Promise<PatientDTO> {
     const req = new CreatePatientRequest()
-      .setNotes(patient.note)
-      .setHumanReadableIdentifier(patient.name)
+      .setNotes(patient.notes)
+      .setHumanReadableIdentifier(patient.humanReadableIdentifier)
     const res = await APIServices.patient.createPatient(req, getAuthenticatedGrpcMetadata())
+
+    try {
+      if (patient.bedId) {
+        await PatientService.assignToBed({ patientId: res.getId(), bedId: patient.bedId })
+      }
+    } catch (err) {
+      console.log(err)
+    }
+
     return { ...patient, id: res.getId() }
-  },
+  }
+  ,
   update: async function (patient: PatientDTO): Promise<boolean> {
     const req = new UpdatePatientRequest()
       .setId(patient.id)
-      .setNotes(patient.note)
-      .setHumanReadableIdentifier(patient.name)
+      .setNotes(patient.notes)
+      .setHumanReadableIdentifier(patient.humanReadableIdentifier)
 
     await APIServices.patient.updatePatient(req, getAuthenticatedGrpcMetadata())
     return true
-  },
-  delete: async function (patientId: string): Promise<boolean> {
-    const req = new DeletePatientRequest()
-      .setId(patientId)
+  }
+  ,
+  delete:
 
-    await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
-    return true
-  },
+    async function (patientId: string): Promise<boolean> {
+      const req = new DeletePatientRequest()
+        .setId(patientId)
+
+      await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
+      return true
+    }
+
+  ,
   assignToBed: async function (bedWithPatientId: BedWithPatientId): Promise<boolean> {
     const req = new AssignBedRequest()
       .setId(bedWithPatientId.patientId)
-      .setBedId(bedWithPatientId.id)
+      .setBedId(bedWithPatientId.bedId)
 
     await APIServices.patient.assignBed(req, getAuthenticatedGrpcMetadata())
     return true
-  },
+  }
+  ,
   unassignFromBed: async function (patientId: string): Promise<boolean> {
     const req = new UnassignBedRequest()
       .setId(patientId)
 
     await APIServices.patient.unassignBed(req, getAuthenticatedGrpcMetadata())
     return true
-  },
+  }
+  ,
   discharge: async function (patientId: string): Promise<boolean> {
     const req = new DischargePatientRequest()
       .setId(patientId)
 
     await APIServices.patient.dischargePatient(req, getAuthenticatedGrpcMetadata())
     return true
-  },
+  }
+  ,
   reAdmit: async function (patientId: string): Promise<boolean> {
     const req = new ReadmitPatientRequest()
       .setPatientId(patientId)
diff --git a/api-services/service/tasks/RoomService.ts b/api-services/service/tasks/RoomService.ts
index c856eb3a7..7b99845ea 100644
--- a/api-services/service/tasks/RoomService.ts
+++ b/api-services/service/tasks/RoomService.ts
@@ -6,6 +6,7 @@ import {
   GetRoomRequest, UpdateRoomRequest
 } from '@helpwave/proto-ts/services/tasks_svc/v1/room_svc_pb'
 import type { RoomDTO, RoomMinimalDTO, RoomOverviewDTO } from '../../types/tasks/room'
+import type { BedWithPatientWithTasksNumberDTO } from '../../types/tasks/bed'
 
 export const RoomService = {
   get: async (id: string): Promise<RoomDTO> => {
@@ -32,14 +33,16 @@ export const RoomService = {
       id: room.getId(),
       name: room.getName(),
       wardId,
-      beds: room.getBedsList().map(bed => {
+      beds: room.getBedsList().map<BedWithPatientWithTasksNumberDTO>(bed => {
         const patient = bed.getPatient()
         return {
           id: bed.getId(),
           name: bed.getName(),
           patient: !patient ? undefined : {
             id: patient.getId(),
-            name: patient.getHumanReadableIdentifier(),
+            humanReadableIdentifier: patient.getHumanReadableIdentifier(),
+            bedId: bed.getId(),
+            wardId: wardId,
             tasksTodo: patient.getTasksUnscheduled(),
             tasksInProgress: patient.getTasksInProgress(),
             tasksDone: patient.getTasksDone()
diff --git a/api-services/service/users/OrganizationMemberService.ts b/api-services/service/users/OrganizationMemberService.ts
new file mode 100644
index 000000000..14422ef36
--- /dev/null
+++ b/api-services/service/users/OrganizationMemberService.ts
@@ -0,0 +1,18 @@
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import type { OrganizationMember } from '../../types/users/organization_member'
+import { GetMembersByOrganizationRequest } from '@helpwave/proto-ts/services/user_svc/v1/organization_svc_pb'
+
+export const OrganizationMemberService = {
+  getByOrganization: async (id: string): Promise<OrganizationMember[]> => {
+    const req = new GetMembersByOrganizationRequest()
+    .setId(id)
+
+    const res = await APIServices.organization.getMembersByOrganization(req, getAuthenticatedGrpcMetadata())
+
+    return res.getMembersList().map(member => ({
+      ...member.toObject(),
+      avatarURL: 'https://cdn.helpwave.de/boringavatar.svg', // TODO remove later
+    }))
+  },
+}
diff --git a/api-services/service/users/OrganizationService.ts b/api-services/service/users/OrganizationService.ts
index f1a470ae4..0fe2a36b7 100644
--- a/api-services/service/users/OrganizationService.ts
+++ b/api-services/service/users/OrganizationService.ts
@@ -4,20 +4,49 @@ import type {
   OrganizationWithMinimalMemberDTO
 } from '../../types/users/organizations'
 import {
-  CreateOrganizationRequest, CreatePersonalOrganizationRequest, DeleteOrganizationRequest,
+  CreateOrganizationRequest,
+  CreatePersonalOrganizationRequest,
+  DeleteOrganizationRequest,
   GetOrganizationRequest,
-  GetOrganizationsForUserRequest, UpdateOrganizationRequest
+  GetOrganizationsForUserRequest,
+  UpdateOrganizationRequest
 } from '@helpwave/proto-ts/services/user_svc/v1/organization_svc_pb'
 import { APIServices } from '../../services'
 import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
 
 export const OrganizationService = {
+  get: async (id: string): Promise<OrganizationWithMinimalMemberDTO> => {
+    const req = new GetOrganizationRequest()
+      .setId(id)
+
+    const res = await APIServices.organization.getOrganization(req, getAuthenticatedGrpcMetadata())
+
+    return {
+      ...res.toObject(),
+      members: res.getMembersList().map(member => ({
+        ...member.toObject(),
+      }))
+    }
+  },
+  getForUser: async (): Promise<OrganizationDTO[]> => {
+    const req = new GetOrganizationsForUserRequest()
+    const res = await APIServices.organization.getOrganizationsForUser(req, getAuthenticatedGrpcMetadata())
+
+    return res.getOrganizationsList().map(organization => ({
+      ...organization.toObject(),
+      avatarURL: 'https://cdn.helpwave.de/boringavatar.svg', // TODO remove later
+      members: organization.getMembersList().map(member => ({
+        ...member.toObject(),
+        avatarURL: 'https://cdn.helpwave.de/boringavatar.svg', // TODO remove later
+      }))
+    }))
+  },
   create: async (organization: OrganizationMinimalDTO): Promise<OrganizationMinimalDTO> => {
     const req = new CreateOrganizationRequest()
-    req.setLongName(organization.longName)
-    req.setShortName(organization.shortName)
-    req.setIsPersonal(organization.isPersonal)
-    req.setContactEmail(organization.email)
+      .setLongName(organization.longName)
+      .setShortName(organization.shortName)
+      .setIsPersonal(organization.isPersonal)
+      .setContactEmail(organization.contactEmail)
     const res = await APIServices.organization.createOrganization(req, getAuthenticatedGrpcMetadata())
 
     return { ...organization, id: res.getId() }
@@ -27,61 +56,25 @@ export const OrganizationService = {
     const res = await APIServices.organization.createPersonalOrganization(req, getAuthenticatedGrpcMetadata())
     return res.getId()
   },
-  delete: async (id: string): Promise<boolean> => {
-    const req = new DeleteOrganizationRequest()
-    req.setId(id)
-    await APIServices.organization.deleteOrganization(req, getAuthenticatedGrpcMetadata())
-    return true
-  },
-  get: async (id: string): Promise<OrganizationWithMinimalMemberDTO> => {
-    const req = new GetOrganizationRequest()
-    req.setId(id)
-
-    const res = await APIServices.organization.getOrganization(req, getAuthenticatedGrpcMetadata())
-
-    return {
-      id: res.getId(),
-      email: res.getContactEmail(),
-      isVerified: true, // TODO update later
-      longName: res.getLongName(),
-      shortName: res.getShortName(),
-      isPersonal: res.getIsPersonal(),
-      avatarURL: res.getAvatarUrl(),
-      members: res.getMembersList().map(member => ({ id: member.getUserId() }))
-    }
-  },
-  getForUser:
-    async (): Promise<OrganizationDTO[]> => {
-      const req = new GetOrganizationsForUserRequest()
-      const res = await APIServices.organization.getOrganizationsForUser(req, getAuthenticatedGrpcMetadata())
-
-      return res.getOrganizationsList().map(organization => ({
-        id: organization.getId(),
-        email: organization.getContactEmail(),
-        isPersonal: organization.getIsPersonal(),
-        avatarUrl: organization.getAvatarUrl(),
-        longName: organization.getLongName(),
-        shortName: organization.getShortName(),
-        avatarURL: organization.getAvatarUrl(),
-        isVerified: true, // TODO change Later
-        members: organization.getMembersList().map(member => ({
-          id: member.getUserId(),
-          email: member.getEmail(),
-          name: member.getNickname(),
-          avatarURL: member.getAvatarUrl(),
-        }))
-      }))
-    },
   update: async (organization: OrganizationMinimalDTO): Promise<OrganizationMinimalDTO> => {
     const req = new UpdateOrganizationRequest()
-    req.setId(organization.id)
-    req.setLongName(organization.longName)
-    req.setShortName(organization.shortName)
-    req.setIsPersonal(organization.isPersonal)
-    req.setAvatarUrl(organization.avatarURL)
-    req.setContactEmail(organization.email)
+      .setId(organization.id)
+      .setLongName(organization.longName)
+      .setShortName(organization.shortName)
+      .setIsPersonal(organization.isPersonal)
+      .setContactEmail(organization.contactEmail)
+
+    if(organization.avatarURL) {
+      req.setAvatarUrl(organization.avatarURL)
+    }
     await APIServices.organization.updateOrganization(req, getAuthenticatedGrpcMetadata())
 
     return organization
+  },
+  delete: async (id: string): Promise<boolean> => {
+    const req = new DeleteOrganizationRequest()
+      .setId(id)
+    await APIServices.organization.deleteOrganization(req, getAuthenticatedGrpcMetadata())
+    return true
   }
 }
diff --git a/api-services/service/users/UserService.ts b/api-services/service/users/UserService.ts
new file mode 100644
index 000000000..cbc7842a2
--- /dev/null
+++ b/api-services/service/users/UserService.ts
@@ -0,0 +1,17 @@
+import { APIServices } from '../../services'
+import { getAuthenticatedGrpcMetadata } from '../../authentication/grpc_metadata'
+import { ReadPublicProfileRequest } from '@helpwave/proto-ts/services/user_svc/v1/user_svc_pb'
+import type { User } from '../../types/users/user'
+
+export const UserService = {
+  get: async (id: string): Promise<User> => {
+    const req = new ReadPublicProfileRequest()
+      .setId(id)
+
+    const res = await APIServices.user.readPublicProfile(req, getAuthenticatedGrpcMetadata())
+    return {
+      ...res.toObject(),
+      avatarUrl: `https://cdn.helpwave.de/boringavatar.svg`
+    }
+  },
+}
diff --git a/api-services/types/tasks/bed.ts b/api-services/types/tasks/bed.ts
index 7b55867c3..4ad6671f4 100644
--- a/api-services/types/tasks/bed.ts
+++ b/api-services/types/tasks/bed.ts
@@ -34,6 +34,6 @@ export type BedWithMinimalPatientDTO = BedMinimalDTO & {
 }
 
 export type BedWithPatientId = {
-  id: string,
+  bedId: string,
   patientId: string,
 }
diff --git a/api-services/types/tasks/patient.ts b/api-services/types/tasks/patient.ts
index f9309cbef..505238c12 100644
--- a/api-services/types/tasks/patient.ts
+++ b/api-services/types/tasks/patient.ts
@@ -1,20 +1,21 @@
 import type { TaskDTO, TaskMinimalDTO } from './task'
+import type { RoomMinimalDTO } from './room'
+import type { BedMinimalDTO } from './bed'
 
 export type PatientMinimalDTO = {
   id: string,
-  name: string,
+  humanReadableIdentifier: string,
+  bedId?: string,
 }
 
-export type PatientDTO = PatientMinimalDTO & {
-  note: string,
-  tasks: TaskMinimalDTO[],
+export type PatientWithBedIdDTO = PatientMinimalDTO & {
+  notes: string,
+  bedId?: string,
 }
 
-export const emptyPatient: PatientDTO = {
-  id: '',
-  note: '',
-  name: '',
-  tasks: []
+export type PatientDTO = PatientMinimalDTO & {
+  notes: string,
+  tasks: TaskMinimalDTO[],
 }
 
 export type PatientWithTasksNumberDTO = PatientMinimalDTO & {
@@ -23,25 +24,15 @@ export type PatientWithTasksNumberDTO = PatientMinimalDTO & {
   tasksDone: number,
 }
 
-export type PatientCompleteDTO = PatientMinimalDTO & {
-  note: string,
-  tasks: TaskDTO[],
-}
-
-export const emptyPatientMinimal: PatientMinimalDTO = {
-  id: '',
-  name: ''
-}
-
 export type PatientWithBedAndRoomDTO = PatientMinimalDTO & {
-  room: { id: string, name: string, wardId: string },
-  bed: { id: string, name: string },
+  room: RoomMinimalDTO,
+  bed: BedMinimalDTO,
 }
 
 export type RecentPatientDTO = PatientMinimalDTO & {
   wardId?: string,
-  room?: { id: string, name: string },
-  bed?: { id: string, name: string },
+  room?: RoomMinimalDTO,
+  bed?: BedMinimalDTO,
 }
 
 export type PatientListDTO = {
@@ -50,21 +41,18 @@ export type PatientListDTO = {
   discharged: PatientMinimalDTO[],
 }
 
-export type PatientWithBedIdDTO = PatientMinimalDTO & {
-  note: string,
-  bedId: string,
-}
-
 export type PatientDetailsDTO = PatientMinimalDTO & {
-  note: string,
+  notes: string,
   tasks: TaskDTO[],
   discharged: boolean,
+  room?: RoomMinimalDTO,
+  bed?: BedMinimalDTO,
 }
 
 export const emptyPatientDetails: PatientDetailsDTO = {
   id: '',
-  name: '',
-  note: '',
+  humanReadableIdentifier: '',
+  notes: '',
   tasks: [],
   discharged: false
 }
diff --git a/api-services/types/users/organization_member.ts b/api-services/types/users/organization_member.ts
index b0d642ee5..78cdfe0a0 100644
--- a/api-services/types/users/organization_member.ts
+++ b/api-services/types/users/organization_member.ts
@@ -1,9 +1,9 @@
 export type OrganizationMemberMinimalDTO = {
-  id: string,
+  userId: string,
 }
 
 export type OrganizationMember = OrganizationMemberMinimalDTO & {
   email: string,
-  name: string,
-  avatarURL: string,
+  nickname: string,
+  avatarURL?: string,
 }
diff --git a/api-services/types/users/organizations.ts b/api-services/types/users/organizations.ts
index 88e05877a..012b524c1 100644
--- a/api-services/types/users/organizations.ts
+++ b/api-services/types/users/organizations.ts
@@ -4,10 +4,9 @@ export type OrganizationMinimalDTO = {
   id: string,
   shortName: string,
   longName: string,
-  email: string,
-  isVerified: boolean,
+  contactEmail: string,
   isPersonal: boolean,
-  avatarURL: string,
+  avatarURL?: string,
 }
 
 export type OrganizationDTO = OrganizationMinimalDTO & {
@@ -18,10 +17,8 @@ export const emptyOrganization: OrganizationDTO = {
   id: '',
   shortName: '',
   longName: '',
-  email: '',
-  avatarURL: '',
+  contactEmail: '',
   isPersonal: false,
-  isVerified: false,
   members: []
 }
 
diff --git a/api-services/types/users/user.ts b/api-services/types/users/user.ts
new file mode 100644
index 000000000..ded089b9f
--- /dev/null
+++ b/api-services/types/users/user.ts
@@ -0,0 +1,6 @@
+export type User = {
+  id: string,
+  name: string,
+  nickname: string,
+  avatarUrl?: string,
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 833d42a52..2cd67083b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -169,6 +169,9 @@ importers:
       '@dnd-kit/core':
         specifier: 6.3.1
         version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/modifiers':
+        specifier: 9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@dnd-kit/sortable':
         specifier: 7.0.2
         version: 7.0.2(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
@@ -265,6 +268,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
   '@dnd-kit/sortable@7.0.2':
     resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==}
     peerDependencies:
@@ -2568,6 +2577,13 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       tslib: 2.8.1
 
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.8.1
+
   '@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
diff --git a/tasks/components/OrganizationForm.tsx b/tasks/components/OrganizationForm.tsx
index 58e124b57..987aaa0f7 100644
--- a/tasks/components/OrganizationForm.tsx
+++ b/tasks/components/OrganizationForm.tsx
@@ -134,10 +134,10 @@ export const OrganizationForm = ({
   }
 
   function validateEmailWithOrganization(organization: OrganizationMinimalDTO) {
-    const email = organization.email.trim()
+    const email = organization.contactEmail.trim()
     if (email === '') {
       return translation('required')
-    } else if (!validateEmail(organization.email)) {
+    } else if (!validateEmail(organization.contactEmail)) {
       return translation('invalidEmail')
     }
   }
@@ -213,7 +213,7 @@ export const OrganizationForm = ({
             <div className="flex-1 mr-2">
               <Input
                 id="email"
-                value={organizationForm.organization.email}
+                value={organizationForm.organization.contactEmail}
                 label={{ name: translation('contactEmail') }}
                 type="email"
                 onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
@@ -222,20 +222,16 @@ export const OrganizationForm = ({
                 })}
                 onChangeText={text => triggerOnChange({
                   ...organizationForm.organization,
-                  email: text
+                  contactEmail: text
                 }, false, { ...organizationForm.touched })}
                 onEditCompleted={text => triggerOnChange({
                   ...organizationForm.organization,
-                  email: text
+                  contactEmail: text
                 }, true, { ...organizationForm.touched, email: true })}
                 maxLength={maxMailLength}
                 className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingEmailNameError })}
               />
             </div>
-            {
-              !organizationForm.organization.isVerified &&
-              <span className="text-negative mb-3">{translation('notVerified')}</span>
-            }
           </div>
           {isDisplayingEmailNameError && <span className="textstyle-form-error">{emailErrorMessage}</span>}
           <span className="textstyle-form-description">{translation('contactEmailDescription')}</span>
diff --git a/tasks/components/OrganizationMemberList.tsx b/tasks/components/OrganizationMemberList.tsx
index 93bc1e1a1..d1c34d1f8 100644
--- a/tasks/components/OrganizationMemberList.tsx
+++ b/tasks/components/OrganizationMemberList.tsx
@@ -18,7 +18,6 @@ import { OrganizationContext } from '@/pages/organizations'
 import { ColumnTitle } from '@/components/ColumnTitle'
 import { Trash } from 'lucide-react'
 import type { ColumnDef, RowSelectionState } from '@tanstack/react-table'
-import type { OrganizationInvitation } from '@/components/OrganizationInvitationList'
 
 type OrganizationMemberListTranslation = {
   edit: string,
@@ -103,7 +102,7 @@ export const OrganizationMemberList = ({
 
   const context = useContext(OrganizationContext)
   organizationId ??= context.state.organizationId
-  const { data, isLoading, isError } = useMembersByOrganizationQuery(organizationId)
+  const { data, isLoading, isError } = useMembersByOrganizationQuery()
   const membersByOrganization = useMemo(() => data ?? [], [data])
   const usedMembers: OrganizationMember[] = useMemo(
     () => members ?? membersByOrganization ?? [], [members, membersByOrganization]
@@ -112,7 +111,7 @@ export const OrganizationMemberList = ({
   const removeMemberMutation = useRemoveMemberMutation(organizationId)
   const [deleteDialogState, setDeleteDialogState] = useState<DeleteDialogState>(defaultDeleteDialogState)
   const [selectionState, setSelectionState] = useState<RowSelectionState>({})
-  const columns = useMemo<ColumnDef<OrganizationInvitation>[]>(() => [
+  const columns = useMemo<ColumnDef<OrganizationMember>[]>(() => [
     {
       id: 'member',
       header: translation('member'),
@@ -126,9 +125,14 @@ export const OrganizationMemberList = ({
               navigator.clipboard.writeText(orgMember.email).catch(console.error)
             }}
           >
-            <Avatar image={{ avatarUrl: orgMember.avatarURL, alt: '' }} name={orgMember.name} size="lg" fullyRounded={true}/>
+            <Avatar
+              image={orgMember.avatarURL ? { avatarUrl: orgMember.avatarURL, alt: '' } : undefined}
+              name={orgMember.nickname}
+              size="lg"
+              fullyRounded={true}
+            />
             <div className="col items-start gap-y-0">
-              <span className="font-bold truncate">{orgMember.name}</span>
+              <span className="font-bold truncate">{orgMember.nickname}</span>
               <span className="textstyle-description text-sm truncate">{orgMember.email}</span>
             </div>
           </TextButton>
@@ -187,17 +191,17 @@ export const OrganizationMemberList = ({
         onCancel={() => setDeleteDialogState(defaultDeleteDialogState)}
         onConfirm={() => {
           if (deleteDialogState.member) {
-            if (selectionState[deleteDialogState.member.id]) {
+            if (selectionState[deleteDialogState.member.userId]) {
               const newSelection = { ...selectionState }
-              delete newSelection[deleteDialogState.member.id]
+              delete newSelection[deleteDialogState.member.userId]
               setSelectionState(newSelection)
             }
-            removeMemberMutation.mutate(deleteDialogState.member.id)
+            removeMemberMutation.mutate(deleteDialogState.member.userId)
           } else {
             Object.keys(selectionState).forEach(value => {
-              const member = usedMembers.find(member => member.id === value)
+              const member = usedMembers.find(member => member.userId === value)
               if (member) {
-                removeMemberMutation.mutate(member.id)
+                removeMemberMutation.mutate(member.userId)
               }
             })
             setSelectionState({})
diff --git a/tasks/components/RoomOverview.tsx b/tasks/components/RoomOverview.tsx
index 6a39bb052..503f83e93 100644
--- a/tasks/components/RoomOverview.tsx
+++ b/tasks/components/RoomOverview.tsx
@@ -1,34 +1,25 @@
 import { useContext, useRef } from 'react'
 import type { RoomOverviewDTO } from '@helpwave/api-services/types/tasks/room'
-import type { BedMinimalDTO } from '@helpwave/api-services/types/tasks/bed'
-import type { PatientDTO } from '@helpwave/api-services/types/tasks/patient'
-import { emptyPatient } from '@helpwave/api-services/types/tasks/patient'
+import type { BedWithPatientWithTasksNumberDTO } from '@helpwave/api-services/types/tasks/bed'
 import { BedCard } from './cards/BedCard'
 import { PatientCard } from './cards/PatientCard'
-import { Droppable, Draggable } from './dnd-kit-instances/patients'
+import { WardOverviewDraggable, WardOverviewDroppable } from './dnd-kit-instances/patients'
 import { DragCard } from './cards/DragCard'
 import { WardOverviewContext } from '@/pages/ward/[wardId]'
+import { noop } from '@helpwave/hightide'
 
 export type RoomOverviewProps = {
   room: RoomOverviewDTO,
+  onBedClick?: (bed: BedWithPatientWithTasksNumberDTO) => void,
 }
 
 /**
  * A component to show all beds and patients within a room in a ward
  */
-export const RoomOverview = ({ room }: RoomOverviewProps) => {
+export const RoomOverview = ({ room, onBedClick = noop }: RoomOverviewProps) => {
   const context = useContext(WardOverviewContext)
   const ref = useRef<HTMLDivElement>(null)
 
-  const setSelectedBed = (room: RoomOverviewDTO, bed: BedMinimalDTO, patientId?: string, patient?: PatientDTO) =>
-    context.updateContext({
-      ...context.state,
-      roomId: room.id,
-      bedId: bed.id,
-      patientId,
-      patient
-    })
-
   const selectedBedId = context.state.bedId
 
   return (
@@ -38,69 +29,79 @@ export const RoomOverview = ({ room }: RoomOverviewProps) => {
         <span className="textstyle-title-normal">{room.name}</span>
       </div>
       <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-4">
-        {room.beds.map((bed, index) => bed.patient && bed.patient?.id ?
-            (
-              <Droppable id={bed.id} key={index} data={{ bed, room, patient: bed.patient }}>
-                {({ isOver }) => bed.patient && bed.patient?.id && (
-                  <DragCard className="!p-0 !border-0">
-                    <Draggable id={bed.patient.id + 'roomOverview'} data={{ bed, room, patient: bed.patient }}>
-                      {() => bed.patient && bed.patient?.id && (
-                        <PatientCard
-                          bedName={bed.name}
-                          patientName={bed.patient.name}
-                          taskCounts={{
-                            done: bed.patient.tasksDone,
-                            inProgress:bed.patient.tasksInProgress,
-                            todo: bed.patient.tasksTodo,
-                          }}
-                          onClick={(event) => {
-                            event.stopPropagation()
-                            if (bed.patient) {
-                              setSelectedBed(room, bed, bed.patient.id)
-                            }
-                          }}
-                          isSelected={selectedBedId === bed.id}
-                          cardDragProperties={{ isOver, isDangerous: true }}
-                        />
-                      )}
-                    </Draggable>
-                  </DragCard>
-                )}
-              </Droppable>
-            ) : (
-              // Maybe also wrap inside the drag and drop later
-              <Droppable key={bed.id} id={bed.id} data={{ bed, room, patient: bed.patient }}>
-                {({ isOver, active }) => {
-                  const source = active?.data.current
-
-                  if (isOver) {
-                    return (
-                      <PatientCard
-                        bedName={bed.name}
-                        patientName={source?.patient?.name ?? ''} // TODO: bad!
-                        cardDragProperties={{ isOver }}
-                      />
-                    )
-                  } else {
-                    return (
-                      <BedCard
-                        bedName={bed.name}
-                        // TODO move patient creation to here
-                        onClick={(event) => {
-                          event.stopPropagation()
-                          setSelectedBed(room, bed, undefined, {
-                            ...emptyPatient,
-                            id: '',
-                            name: `Patient ${room?.beds.findIndex(bedOfRoom => bedOfRoom.id === bed.id) ?? 1}`
-                          })
+        {room.beds.map((bed, index) => {
+          const patient = bed.patient
+          if (patient) {
+            return (
+              <WardOverviewDroppable id={bed.id} key={index} data={{ type: 'bed', bed, room, patient }}>
+                {({ active, isOver }) => {
+                  const activeData = active?.data?.current
+                  const isOriginalBed = activeData?.patient?.id === patient.id
+                  return (
+                    <DragCard className="!p-0 !border-0">
+                      <WardOverviewDraggable
+                        id={patient.id + 'roomOverview'}
+                        data={{ type: 'assignedPatient', bed, room, patient }}
+                      >
+                        {() => {
+                          if(isOriginalBed && !isOver) {
+                            return (
+                              <BedCard
+                                bedName={bed.name}
+                                isSelected={selectedBedId === bed.id}
+                              />
+                            )
+                          }
+                          return (
+                            <PatientCard
+                              bedName={bed.name}
+                              patientName={patient.humanReadableIdentifier}
+                              taskCounts={{
+                                done: patient.tasksDone,
+                                inProgress: patient.tasksInProgress,
+                                todo: patient.tasksTodo,
+                              }}
+                              onClick={() => {
+                                onBedClick(bed)
+                              }}
+                              isSelected={selectedBedId === bed.id}
+                              cardDragProperties={{ isOver, isDangerous: !isOriginalBed }}
+                            />
+                          )
                         }}
-                        isSelected={selectedBedId === bed.id}
-                      />
-                    )
-                  }
+                      </WardOverviewDraggable>
+                    </DragCard>
+                  )
                 }}
-              </Droppable>
-            ))}
+              </WardOverviewDroppable>
+            )
+          }
+          return (
+            <WardOverviewDroppable key={bed.id} id={bed.id} data={{ type: 'bed', bed, room, patient: bed.patient }}>
+              {({ isOver, active }) => {
+                const activeData = active?.data.current
+
+                if (isOver && activeData) {
+                  return (
+                    <PatientCard
+                      bedName={bed.name}
+                      patientName={activeData.patient.humanReadableIdentifier}
+                      cardDragProperties={{ isOver }}
+                    />
+                  )
+                } else {
+                  return (
+                    <BedCard
+                      bedName={bed.name}
+                      onClick={() => onBedClick(bed)}
+                      isSelected={selectedBedId === bed.id}
+                    />
+                  )
+                }
+              }}
+            </WardOverviewDroppable>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/tasks/components/cards/OrganizationCard.tsx b/tasks/components/cards/OrganizationCard.tsx
index 3bfff7a15..6daa6e0e8 100644
--- a/tasks/components/cards/OrganizationCard.tsx
+++ b/tasks/components/cards/OrganizationCard.tsx
@@ -48,7 +48,7 @@ export const OrganizationCard = ({
         </div>
         <div className="row items-center overflow-hidden gap-x-2">
           <Mail/>
-          <span className="w-full truncate text-sm">{organization.email}</span>
+          <span className="w-full truncate text-sm">{organization.contactEmail}</span>
         </div>
         <div className="row justify-between">
           <div className="text-left my-1 font-semibold text-gray-600 text-sm truncate">
@@ -56,8 +56,8 @@ export const OrganizationCard = ({
           </div>
           <AvatarGroup
             avatars={organization.members.map(user => ({
-              image: { avatarUrl: user.avatarURL, alt: user.name },
-              name: user.name,
+              image: user.avatarURL ? { avatarUrl: user.avatarURL, alt: user.nickname } : undefined,
+              name: user.nickname,
             }))}
             fullyRounded={true}
           />
diff --git a/tasks/components/dnd-kit-instances/patients.ts b/tasks/components/dnd-kit-instances/patients.ts
index c41c62b6c..ad17320a7 100644
--- a/tasks/components/dnd-kit-instances/patients.ts
+++ b/tasks/components/dnd-kit-instances/patients.ts
@@ -1,4 +1,4 @@
-import type { PatientMinimalDTO } from '@helpwave/api-services/types/tasks/patient'
+import type { PatientMinimalDTO, PatientWithTasksNumberDTO } from '@helpwave/api-services/types/tasks/patient'
 import type { BedWithPatientWithTasksNumberDTO } from '@helpwave/api-services/types/tasks/bed'
 import type { RoomOverviewDTO } from '@helpwave/api-services/types/tasks/room'
 import type {
@@ -12,30 +12,33 @@ import { DndContext as DndContextFree } from '@/components/dnd-kit/typesafety'
 import { Droppable as DroppableFree } from '@/components/dnd-kit/Droppable'
 import { Draggable as DraggableFree } from '@/components/dnd-kit/Draggable'
 
-type DraggableData = {
-  // patient from 'patient list'
+export type WardOverviewDraggableData = {
+  type: 'patientListItem',
   patient: PatientMinimalDTO,
   discharged: boolean,
+  assigned: boolean,
 } | {
-  // patient from 'room overview'
+  type: 'assignedPatient',
   bed: BedWithPatientWithTasksNumberDTO,
   room: RoomOverviewDTO,
-  patient: PatientMinimalDTO,
+  patient: PatientWithTasksNumberDTO,
 }
-type DroppableData = {
+export type WardOverViewDroppableData = {
+  type: 'bed',
   bed: BedWithPatientWithTasksNumberDTO,
   room: RoomOverviewDTO,
-  patient: PatientMinimalDTO | undefined,
+  patient?: PatientMinimalDTO,
 } | {
-  patientListSection: 'unassigned' | 'discharged',
+  type: 'section',
+  section: 'unassigned' | 'discharged',
 }
 
-export const Droppable = DroppableFree<DraggableData, DroppableData>
-export const Draggable = DraggableFree<DraggableData, DroppableData>
-export const DndContext = DndContextFree<DraggableData, DroppableData>
+export const WardOverviewDroppable = DroppableFree<WardOverviewDraggableData, WardOverViewDroppableData>
+export const WardOverviewDraggable = DraggableFree<WardOverviewDraggableData, WardOverViewDroppableData>
+export const WardOverviewDndContext = DndContextFree<WardOverviewDraggableData, WardOverViewDroppableData>
 
-export type DragStartEvent = DragStartEventFree<DraggableData, DroppableData>
-export type DragMoveEvent = DragMoveEventFree<DraggableData, DroppableData>
-export type DragOverEvent = DragOverEventFree<DraggableData, DroppableData>
-export type DragEndEvent = DragEndEventFree<DraggableData, DroppableData>
-export type DragCancelEvent = DragCancelEventFree<DraggableData, DroppableData>
+export type WardOverviewDragStartEvent = DragStartEventFree<WardOverviewDraggableData, WardOverViewDroppableData>
+export type WardOverviewDragMoveEvent = DragMoveEventFree<WardOverviewDraggableData, WardOverViewDroppableData>
+export type WardOverviewDragOverEvent = DragOverEventFree<WardOverviewDraggableData, WardOverViewDroppableData>
+export type WardOverviewDragEndEvent = DragEndEventFree<WardOverviewDraggableData, WardOverViewDroppableData>
+export type WardOverviewDragCancelEvent = DragCancelEventFree<WardOverviewDraggableData, WardOverViewDroppableData>
diff --git a/tasks/components/layout/DashboardDisplay.tsx b/tasks/components/layout/DashboardDisplay.tsx
index e668601f0..e86ddc3c7 100644
--- a/tasks/components/layout/DashboardDisplay.tsx
+++ b/tasks/components/layout/DashboardDisplay.tsx
@@ -155,10 +155,16 @@ export const DashboardDisplay = ({
                     {patients?.filter((_, index) => index % 2 == 0).map(patient => (
                       <PatientCard
                         key={patient.id}
-                        className={clsx(cardWidth, '!min-h-12', { '!cursor-not-allowed': !patient.wardId })}
+                        className={clsx(cardWidth, '!min-h-12')}
                         bedName={patient.bed?.name}
-                        patientName={patient.name}
-                        onClick={() => patient.wardId ? router.push(`/ward/${patient.wardId}`) : undefined}
+                        patientName={patient.humanReadableIdentifier}
+                        onClick={() => {
+                          if(patient.wardId) {
+                            router.push(`/ward/${patient.wardId}?patientId=${patient.id}`).catch(console.error)
+                          } else if(wards && wards.length > 0) {
+                            router.push(`/ward/${wards[0]!.id}?patientId=${patient.id}`).catch(console.error)
+                          }
+                        }}
                       />
                     ))}
                   </div>
@@ -166,10 +172,16 @@ export const DashboardDisplay = ({
                     {patients?.filter((_, index) => index % 2 == 1).map(patient => (
                       <PatientCard
                         key={patient.id}
-                        className={clsx(cardWidth, '!min-h-12', { '!cursor-not-allowed': !patient.wardId })}
+                        className={clsx(cardWidth, '!min-h-12')}
                         bedName={patient.bed?.name}
-                        patientName={patient.name}
-                        onClick={() => patient.wardId ? router.push(`/ward/${patient.wardId}`) : undefined}
+                        patientName={patient.humanReadableIdentifier}
+                        onClick={() => {
+                          if(patient.wardId) {
+                            router.push(`/ward/${patient.wardId}?patientId=${patient.id}`).catch(console.error)
+                          } else if(wards && wards.length > 0) {
+                            router.push(`/ward/${wards[0]!.id}?patientId=${patient.id}`).catch(console.error)
+                          }
+                        }}
                       />
                     ))}
                   </div>
diff --git a/tasks/components/layout/PatientDetails.tsx b/tasks/components/layout/PatientDetails.tsx
index 09de1960b..3b48dad4c 100644
--- a/tasks/components/layout/PatientDetails.tsx
+++ b/tasks/components/layout/PatientDetails.tsx
@@ -12,12 +12,12 @@ import {
 } from '@helpwave/hightide'
 import type { TaskStatus } from '@helpwave/api-services/types/tasks/task'
 import {
-  useAssignBedMutation,
+  usePatientAssignToBedMutation,
   usePatientDetailsQuery,
   usePatientDischargeMutation,
   usePatientUpdateMutation,
-  useReadmitPatientMutation,
-  useUnassignMutation
+  usePatientReadmitMutation,
+  usePatientUnassignMutation
 } from '@helpwave/api-services/mutations/tasks/patient_mutations'
 import type { PatientDetailsDTO } from '@helpwave/api-services/types/tasks/patient'
 import { emptyPatientDetails } from '@helpwave/api-services/types/tasks/patient'
@@ -65,7 +65,6 @@ const defaultPatientDetailTranslations: Translation<PatientDetailTranslation> =
 
 export type PatientDetailProps = {
   wardId: string,
-  patient?: PatientDetailsDTO,
   width?: number,
 }
 
@@ -75,7 +74,6 @@ export type PatientDetailProps = {
 export const PatientDetail = ({
                                 overwriteTranslation,
                                 wardId,
-                                patient = emptyPatientDetails
                               }: PropsForTranslation<PatientDetailTranslation, PatientDetailProps>) => {
   const [isShowingDischargeDialog, setIsShowingDischargeDialog] = useState(false)
   const translation = useTranslation([defaultPatientDetailTranslations], overwriteTranslation)
@@ -83,12 +81,12 @@ export const PatientDetail = ({
   const context = useContext(WardOverviewContext)
 
   const updateMutation = usePatientUpdateMutation()
-  const readmitMutation = useReadmitPatientMutation()
+  const readmitMutation = usePatientReadmitMutation()
   const dischargeMutation = usePatientDischargeMutation({
     onSuccess: () =>
       context.updateContext({ wardId: context.state.wardId })
   })
-  const unassignMutation = useUnassignMutation({
+  const unassignMutation = usePatientUnassignMutation({
     onSuccess: () =>
       context.updateContext({ wardId: context.state.wardId })
   })
@@ -98,7 +96,7 @@ export const PatientDetail = ({
     isLoading
   } = usePatientDetailsQuery(context.state.patientId)
 
-  const [newPatient, setNewPatient] = useState<PatientDetailsDTO>(patient)
+  const [newPatient, setNewPatient] = useState<PatientDetailsDTO>(emptyPatientDetails)
   const [taskId, setTaskId] = useState<string>()
   const [isShowingSavedNotification, setIsShowingSavedNotification] = useState(false)
   const [initialTaskStatus, setInitialTaskStatus] = useState<TaskStatus>()
@@ -112,7 +110,7 @@ export const PatientDetail = ({
   }, [data])
 
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const assignBedMutation = useAssignBedMutation({
+  const assignBedMutation = usePatientAssignToBedMutation({
     onSuccess: () => {
       setIsSubmitting(false)
     }
@@ -176,24 +174,24 @@ export const PatientDetail = ({
                 labelClassName="text-xl font-semibold"
                 className="text-lg font-semibold"
                 id="humanReadableIdentifier"
-                value={newPatient.name}
+                value={newPatient.humanReadableIdentifier}
                 onChangeText={name => changeSavedValue({
                   ...newPatient,
-                  name
+                  humanReadableIdentifier: name
                 })}
               />
             </div>
             <RoomBedSelect
               initialRoomAndBed={{
-                roomId: context.state.roomId ?? '',
-                bedId: context.state.bedId ?? ''
+                roomId: newPatient.room?.id,
+                bedId: newPatient.bed?.id,
               }}
               wardId={context.state.wardId}
               onChange={(roomBedDropdownIds) => {
                 if (roomBedDropdownIds.bedId && context.state.patientId) {
                   context.updateContext({ ...context.state, ...roomBedDropdownIds })
                   assignBedMutation.mutate({
-                    id: roomBedDropdownIds.bedId,
+                    bedId: roomBedDropdownIds.bedId,
                     patientId: context.state.patientId
                   })
                 }
@@ -205,10 +203,10 @@ export const PatientDetail = ({
           <div className="flex-1">
             <Textarea
               headline={translation('notes')}
-              value={newPatient.note}
+              value={newPatient.notes}
               onChangeText={text => changeSavedValue({
                 ...newPatient,
-                note: text
+                notes: text
               })}
             />
           </div>
diff --git a/tasks/components/layout/PatientList.tsx b/tasks/components/layout/PatientList.tsx
index 8147345fc..4b972fac9 100644
--- a/tasks/components/layout/PatientList.tsx
+++ b/tasks/components/layout/PatientList.tsx
@@ -1,10 +1,10 @@
 import { useContext, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import type { Translation } from '@helpwave/hightide'
-import { ExpandableUncontrolled } from '@helpwave/hightide'
 import {
   Chip,
   ConfirmModal,
+  ExpandableUncontrolled,
   Input,
   LoadingAndErrorComponent,
   MultiSearchWithMapping,
@@ -15,15 +15,17 @@ import {
   useTranslation
 } from '@helpwave/hightide'
 import {
+  usePatientCreateMutation,
   usePatientDischargeMutation,
   usePatientListQuery,
-  useReadmitPatientMutation
+  usePatientReadmitMutation
 } from '@helpwave/api-services/mutations/tasks/patient_mutations'
 import type { PatientDTO, PatientMinimalDTO, PatientWithBedAndRoomDTO } from '@helpwave/api-services/types/tasks/patient'
 import { useUpdates } from '@helpwave/api-services/util/useUpdates'
-import { Draggable, Droppable } from '../dnd-kit-instances/patients'
+import { WardOverviewDraggable, WardOverviewDroppable } from '../dnd-kit-instances/patients'
 import { WardOverviewContext } from '@/pages/ward/[wardId]'
 import { PatientDischargeModal } from '@/components/modals/PatientDischargeModal'
+import type { AddPatientModalValue } from '@/components/modals/AddPatientModal'
 import { AddPatientModal } from '@/components/modals/AddPatientModal'
 import { ColumnTitle } from '@/components/ColumnTitle'
 
@@ -79,13 +81,20 @@ const defaultPatientListTranslations: Translation<PatientListTranslation> = {
   }
 }
 
-export type PatientListOpenedSectionsType = {
+type AddModalState = {
+  value: AddPatientModalValue,
+  isOpen: boolean,
+}
+
+type OpenedSectionsResolved = {
   active: boolean,
   unassigned: boolean,
   discharged: boolean,
 }
 
-export const defaultPatientListOpenedSections: PatientListOpenedSectionsType = {
+type OpenedSectionsOptions = Partial<OpenedSectionsResolved>
+
+export const defaultOpenedSectionsResolved: OpenedSectionsResolved = {
   active: true,
   unassigned: true,
   discharged: false
@@ -94,7 +103,7 @@ export const defaultPatientListOpenedSections: PatientListOpenedSectionsType = {
 export type PatientListProps = {
   onDischarge?: (patient: PatientDTO) => void,
   wardId: string,
-  initialOpenedSections?: PatientListOpenedSectionsType,
+  initialOpenedSections?: OpenedSectionsOptions,
   width?: number,
 }
 
@@ -104,10 +113,12 @@ export type PatientListProps = {
 export const PatientList = ({
                               overwriteTranslation,
                               wardId,
-                              initialOpenedSections = defaultPatientListOpenedSections
+                              initialOpenedSections = defaultOpenedSectionsResolved
                             }: PropsForTranslation<PatientListTranslation, PatientListProps>) => {
   const translation = useTranslation([defaultPatientListTranslations], overwriteTranslation)
   const [search, setSearch] = useState('')
+
+
   const {
     state: context,
     updateContext
@@ -117,10 +128,19 @@ export const PatientList = ({
     isLoading,
     isError,
     refetch: refetchPatientListQuery
-  } = usePatientListQuery(wardId) // TODO: is this the right organizationId?; related: https://github.com/helpwave/web/issues/793
-  const [isShowingAddPatientModal, setIsShowingAddPatientModal] = useState(0)
+  } = usePatientListQuery(wardId)
+
+  const [addModalState, setAddModalState] = useState<AddModalState>({
+    value: {
+      name: ''
+    },
+    isOpen: false
+  })
+
+  const createPatientMutation = usePatientCreateMutation()
+
   const dischargeMutation = usePatientDischargeMutation()
-  const readmitPatientMutation = useReadmitPatientMutation()
+  const readmitPatientMutation = usePatientReadmitMutation()
   const [dischargingPatient, setDischargingPatient] = useState<PatientMinimalDTO>()
   const [deletePatient, setDeletePatient] = useState<PatientMinimalDTO>()
 
@@ -135,9 +155,9 @@ export const PatientList = ({
   const activeLabelText = (patient: PatientWithBedAndRoomDTO) => patient.room.wardId === wardId
     ? `${patient.room.name} - ${patient.bed.name}`
     : translation('otherWard')
-  const filteredActive = !data ? [] : MultiSearchWithMapping(search, data.active, value => [value.name, activeLabelText(value)])
-  const filteredUnassigned = !data ? [] : SimpleSearchWithMapping(search, data.unassigned, value => value.name)
-  const filteredDischarged = !data ? [] : SimpleSearchWithMapping(search, data.discharged, value => value.name)
+  const filteredActive = !data ? [] : MultiSearchWithMapping(search, data.active, value => [value.humanReadableIdentifier, activeLabelText(value)])
+  const filteredUnassigned = !data ? [] : SimpleSearchWithMapping(search, data.unassigned, value => value.humanReadableIdentifier)
+  const filteredDischarged = !data ? [] : SimpleSearchWithMapping(search, data.discharged, value => value.humanReadableIdentifier)
 
   return (
     <div className="relative col py-4 px-6">
@@ -168,10 +188,20 @@ export const PatientList = ({
         patient={dischargingPatient}
       />
       <AddPatientModal
-        key={isShowingAddPatientModal}
-        isOpen={isShowingAddPatientModal !== 0}
-        onConfirm={() => setIsShowingAddPatientModal(0)}
-        onCancel={() => setIsShowingAddPatientModal(0)}
+        isOpen={addModalState.isOpen}
+        value={addModalState.value}
+        onChange={value => setAddModalState(prevState => ({ ...prevState, value: value }))}
+        onConfirm={() => {
+          createPatientMutation.mutate({
+            id: '', // TODO remove id from create Patient type
+            humanReadableIdentifier: addModalState.value.name,
+            bedId: addModalState.value.bedId,
+            notes: '',
+            tasks: []
+          })
+          setAddModalState({ value: { name: '' }, isOpen: false })
+        }}
+        onCancel={() => setAddModalState({ value: { name: '' }, isOpen: false })}
         wardId={context.wardId}
       />
       <ColumnTitle
@@ -183,7 +213,7 @@ export const PatientList = ({
               className="whitespace-nowrap"
               color="positive"
               onClick={() => {
-                setIsShowingAddPatientModal(Math.random() * 100000000 + 1)
+                setAddModalState(prevState => ({ ...prevState, isOpen: false }))
               }}
             >
               {translation('addPatient')}
@@ -206,15 +236,14 @@ export const PatientList = ({
             contentClassName="!px-0"
           >
             {filteredActive.map(patient => (
-              <Draggable
+              <WardOverviewDraggable
                 id={patient.id + 'patientList'}
                 key={patient.id}
                 data={{
-                  patient: {
-                    id: patient.id,
-                    name: patient.name
-                  },
-                  discharged: false
+                  type: 'patientListItem',
+                  patient,
+                  discharged: false,
+                  assigned: true,
                 }}
                 className="not-last:border-b-2 not-last:pb-2 border-b-divider"
               >
@@ -224,11 +253,10 @@ export const PatientList = ({
                     onClick={() => updateContext({
                       ...context,
                       patientId: patient.id,
-                      roomId: patient.room.id,
                       bedId: patient.bed.id
                     })}
                   >
-                    <span className="textstyle-title-normal w-1/3 text-ellipsis">{patient.name}</span>
+                    <span className="textstyle-title-normal w-1/3 text-ellipsis">{patient.humanReadableIdentifier}</span>
                     <div className="row flex-1 justify-between items-center">
                       <Chip color="blue" variant="fullyRounded" className="min-w-40 justify-center">
                         {activeLabelText(patient)}
@@ -242,10 +270,16 @@ export const PatientList = ({
                     </div>
                   </div>
                 )}
-              </Draggable>
+              </WardOverviewDraggable>
             ))}
           </ExpandableUncontrolled>
-          <Droppable id="patientListUnassigned" data={{ patientListSection: 'unassigned' }}>
+          <WardOverviewDroppable
+            id="patientListUnassigned"
+            data={{
+              type: 'section',
+              section: 'unassigned',
+            }}
+          >
             {({ isOver }) => (
               <ExpandableUncontrolled
                 isExpanded={initialOpenedSections?.unassigned}
@@ -262,25 +296,27 @@ export const PatientList = ({
                 headerClassName="bg-transparent"
               >
                 {filteredUnassigned.map((patient) => (
-                  <Draggable
+                  <WardOverviewDraggable
                     id={patient.id}
                     key={patient.id}
                     data={{
+                      type: 'patientListItem',
                       patient,
-                      discharged: false
+                      discharged: false,
+                      assigned: false,
                     }}
                     className="not-last:border-b-2 not-last:pb-2 border-b-divider"
                   >
                     {() => (
                       <div
                         key={patient.id}
-                        className="row rounded items-center cursor-pointer mx-2 px-2 py-1 hover:bg-primary/20 rounded-lg"
+                        className="row items-center cursor-pointer mx-2 px-2 py-1 hover:bg-primary/20 rounded-lg"
                         onClick={() => updateContext({
                           wardId: context.wardId,
                           patientId: patient.id
                         })}
                       >
-                        <span className="textstyle-title-normal w-1/3 text-ellipsis">{patient.name}</span>
+                        <span className="textstyle-title-normal w-1/3 text-ellipsis">{patient.humanReadableIdentifier}</span>
                         <div className="row flex-1 justify-between items-center">
                           <Chip color="yellow" variant="fullyRounded" className="min-w-40 justify-center">
                             {`${translation('unassigned')}`}
@@ -294,12 +330,18 @@ export const PatientList = ({
                         </div>
                       </div>
                     )}
-                  </Draggable>
+                  </WardOverviewDraggable>
                 ))}
               </ExpandableUncontrolled>
             )}
-          </Droppable>
-          <Droppable id="patientListDischarged" data={{ patientListSection: 'discharged' }}>
+          </WardOverviewDroppable>
+          <WardOverviewDroppable
+            id="patientListDischarged"
+            data={{
+              type: 'section',
+              section: 'unassigned',
+            }}
+          >
             {({ isOver }) => (
               <ExpandableUncontrolled
                 isExpanded={initialOpenedSections?.discharged}
@@ -316,12 +358,14 @@ export const PatientList = ({
                 headerClassName="bg-transparent"
               >
                 {filteredDischarged.map(patient => (
-                  <Draggable
+                  <WardOverviewDraggable
                     id={patient.id}
                     key={patient.id}
                     data={{
+                      type: 'patientListItem',
                       patient,
-                      discharged: true
+                      discharged: false,
+                      assigned: false,
                     }}
                     className="not-last:border-b-2 not-last:pb-2 border-b-divider"
                   >
@@ -334,7 +378,7 @@ export const PatientList = ({
                           patientId: patient.id
                         })}
                       >
-                        <span className="textstyle-title-normal">{patient.name}</span>
+                        <span className="textstyle-title-normal">{patient.humanReadableIdentifier}</span>
                         <div className="row gap-x-4">
                           <TextButton onClick={event => {
                             event.stopPropagation()
@@ -356,11 +400,11 @@ export const PatientList = ({
                         </div>
                       </div>
                     )}
-                  </Draggable>
+                  </WardOverviewDraggable>
                 ))}
               </ExpandableUncontrolled>
             )}
-          </Droppable>
+          </WardOverviewDroppable>
         </div>
       </LoadingAndErrorComponent>
     </div>
diff --git a/tasks/components/layout/WardRoomList.tsx b/tasks/components/layout/WardRoomList.tsx
index e746a3585..40d5dd2e4 100644
--- a/tasks/components/layout/WardRoomList.tsx
+++ b/tasks/components/layout/WardRoomList.tsx
@@ -1,5 +1,6 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import type { Translation } from '@helpwave/hightide'
+import { range } from '@helpwave/hightide'
 import { LoadingAndErrorComponent, type PropsForTranslation, SolidButton, useTranslation } from '@helpwave/hightide'
 import type { BedWithPatientWithTasksNumberDTO } from '@helpwave/api-services/types/tasks/bed'
 import type { RoomOverviewDTO } from '@helpwave/api-services/types/tasks/room'
@@ -11,11 +12,14 @@ import { WardOverviewContext } from '@/pages/ward/[wardId]'
 import { AddCard } from '@/components/cards/AddCard'
 import { router } from 'next/client'
 import { ColumnTitle } from '@/components/ColumnTitle'
+import { AddPatientModal, type AddPatientModalValue } from '@/components/modals/AddPatientModal'
+import { usePatientCreateMutation } from '@helpwave/api-services/mutations/tasks/patient_mutations'
 
 type WardRoomListTranslation = {
   roomOverview: string,
   showPatientList: string,
   addRooms: string,
+  patient: string,
 }
 
 const defaultWardRoomListTranslation: Translation<WardRoomListTranslation> = {
@@ -23,17 +27,25 @@ const defaultWardRoomListTranslation: Translation<WardRoomListTranslation> = {
     roomOverview: 'Ward Overview',
     showPatientList: 'Show Patient List',
     addRooms: 'Add Rooms',
+    patient: 'Patient',
   },
   de: {
     roomOverview: 'Stationsübersicht',
     showPatientList: 'Patientenliste',
     addRooms: 'Räume hinzufügen',
+    patient: 'Patient',
   }
 }
 
+type AddModalState = {
+  value: AddPatientModalValue,
+  isOpen: boolean,
+}
+
 export type WardRoomListProps = {
   selectedBed?: BedWithPatientWithTasksNumberDTO,
   rooms?: RoomOverviewDTO[],
+  wardId: string,
 }
 
 /**
@@ -41,7 +53,8 @@ export type WardRoomListProps = {
  */
 export const WardRoomList = ({
                                overwriteTranslation,
-                               rooms
+                               rooms,
+                               wardId
                              }: PropsForTranslation<WardRoomListTranslation, WardRoomListProps>) => {
   const translation = useTranslation([defaultWardRoomListTranslation], overwriteTranslation)
   const {
@@ -66,8 +79,33 @@ export const WardRoomList = ({
     }
   }, [observeAttribute, refetch])
 
+  const createPatientMutation = usePatientCreateMutation()
+  const [addModalState, setAddModalState] = useState<AddModalState>({
+    value: {
+      name: ''
+    },
+    isOpen: false
+  })
+
   return (
     <div className="relative col px-6 py-4 @container">
+      <AddPatientModal
+        isOpen={addModalState.isOpen}
+        onCancel={() => setAddModalState({ value: { name : '' },isOpen: false })}
+        onConfirm={() => {
+          createPatientMutation.mutate({
+            id: '',
+            humanReadableIdentifier: addModalState.value.name,
+            bedId: addModalState.value.bedId,
+            notes: '',
+            tasks: [],
+          })
+          setAddModalState({ value: { name: '' }, isOpen: false })
+        }}
+        onChange={(value) => setAddModalState(prevState => ({ ...prevState, value }))}
+        value={addModalState.value}
+        wardId={wardId}
+      />
       <ColumnTitle
         title={translation('roomOverview')}
         actions={(
@@ -88,6 +126,16 @@ export const WardRoomList = ({
             <RoomOverview
               key={index}
               room={room}
+              onBedClick={(bed) => {
+                setAddModalState({
+                  value: {
+                    name: `${translation('patient')} ${range(3).map(() => Math.floor(Math.random() * 10)).map(String).join('')}`,
+                    bedId: bed.id,
+                    roomId: room.id,
+                  },
+                  isOpen: true
+                })
+              }}
             />
           )) : (
             <AddCard
diff --git a/tasks/components/modals/AddPatientModal.tsx b/tasks/components/modals/AddPatientModal.tsx
index ec9f4b78f..97f9ca86c 100644
--- a/tasks/components/modals/AddPatientModal.tsx
+++ b/tasks/components/modals/AddPatientModal.tsx
@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import clsx from 'clsx'
 import type { ConfirmModalProps, Translation } from '@helpwave/hightide'
-import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
-import { Input, ConfirmModal } from '@helpwave/hightide'
-import { noop } from '@helpwave/hightide'
-import { useAssignBedMutation, usePatientCreateMutation } from '@helpwave/api-services/mutations/tasks/patient_mutations'
-import { emptyPatient } from '@helpwave/api-services/types/tasks/patient'
-import type { RoomBedSelectIds } from '@/components/selects/RoomBedSelect'
+import { InputUncontrolled } from '@helpwave/hightide'
+import { ConfirmModal, type PropsForTranslation, useTranslation } from '@helpwave/hightide'
+import type { RoomBedSelectionValue } from '@/components/selects/RoomBedSelect'
 import { RoomBedSelect } from '@/components/selects/RoomBedSelect'
 
 type AddPatientModalTranslation = {
@@ -31,48 +28,42 @@ const defaultAddPatientModalTranslation: Translation<AddPatientModalTranslation>
   }
 }
 
+export type AddPatientModalValue = RoomBedSelectionValue & {
+  name: string,
+}
+
 export type AddPatientModalProps = ConfirmModalProps & {
   wardId: string,
+  value: AddPatientModalValue,
+  onChange: (value: AddPatientModalValue) => void,
 }
 
 /**
  * A Modal for adding a Patient
  */
 export const AddPatientModal = ({
-  overwriteTranslation,
-  wardId,
-  headerProps,
-  onConfirm = noop,
-  ...modalProps
-}: PropsForTranslation<AddPatientModalTranslation, AddPatientModalProps>) => {
+                                  overwriteTranslation,
+                                  wardId,
+                                  headerProps,
+                                  value,
+                                  onChange,
+                                  ...modalProps
+                                }: PropsForTranslation<AddPatientModalTranslation, AddPatientModalProps>) => {
   const translation = useTranslation([defaultAddPatientModalTranslation], overwriteTranslation)
-  const [dropdownId, setDropdownId] = useState<RoomBedSelectIds>({})
-  const [patientName, setPatientName] = useState<string>('')
   const [touched, setTouched] = useState<boolean>(false)
-  const assignBedMutation = useAssignBedMutation()
-  const createPatientMutation = usePatientCreateMutation()
+  const { name, roomId, bedId } = value
 
   const minimumNameLength = 4
-  const trimmedPatientName = patientName.trim()
+  const trimmedPatientName = name.trim()
   const validPatientName = trimmedPatientName.length >= minimumNameLength
-  const validRoomAndBed = dropdownId.roomId && dropdownId.bedId
+  const validRoomAndBed = roomId && bedId
   const isShowingError = touched && !validPatientName
 
-  const createPatient = () => createPatientMutation.mutateAsync({ ...emptyPatient, name: trimmedPatientName })
-    .then((patient) => {
-      if (dropdownId.bedId) {
-        return assignBedMutation.mutateAsync({ id: dropdownId.bedId, patientId: patient.id })
-      }
-    })
-
   return (
     <ConfirmModal
       headerProps={{
+        titleText: translation('addPatient'),
         ...headerProps,
-        titleText: headerProps?.titleText ?? translation('addPatient')      }}
-      onConfirm={() => {
-        onConfirm()
-        createPatient().catch(console.error)
       }}
       buttonOverwrites={[{}, {}, { disabled: !validPatientName }]}
       {...modalProps}
@@ -80,22 +71,33 @@ export const AddPatientModal = ({
       <div className="col gap-y-4 min-w-[300px]">
         <div className="col gap-y-1">
           <span className="textstyle-label-md">{translation('name')}</span>
-          <Input
-            value={patientName}
-            onChangeText={(text) => {
+          <InputUncontrolled
+            value={name}
+            onEditCompleted={name => {
               setTouched(true)
-              setPatientName(text)
+              onChange({ ...value, name })
             }}
           />
-          {isShowingError && <span className="textstyle-form-error">{translation('minimumLength', { replacements: { characters: minimumNameLength.toString() } })}</span>}
+          {isShowingError && (
+            <span className="textstyle-form-error">
+              {translation('minimumLength', { replacements: { characters: minimumNameLength.toString() } })}
+            </span>
+          )}
         </div>
         <RoomBedSelect
-          initialRoomAndBed={dropdownId}
+          initialRoomAndBed={{ roomId, bedId }}
           wardId={wardId}
-          onChange={(roomBedDropdownIds) => setDropdownId(roomBedDropdownIds)}
+          onChange={(roomBedDropdownIds) => onChange({ ...roomBedDropdownIds, name })}
           isClearable={true}
         />
-        <span className={clsx({ 'text-warning': !validRoomAndBed, 'text-transparent': validRoomAndBed })}>{translation('noBedSelected')}</span>
+        <span
+          className={clsx({
+            'text-warning': !validRoomAndBed,
+            'text-transparent': validRoomAndBed
+          })}
+        >
+          {translation('noBedSelected')}
+        </span>
       </div>
     </ConfirmModal>
   )
diff --git a/tasks/components/modals/ManageBedsModal.tsx b/tasks/components/modals/ManageBedsModal.tsx
index 521f97cf9..859f26cf8 100644
--- a/tasks/components/modals/ManageBedsModal.tsx
+++ b/tasks/components/modals/ManageBedsModal.tsx
@@ -126,7 +126,7 @@ export const ManageBedsModal = ({
     {
       id: 'patientName',
       header: translation('patient'),
-      accessorFn: ({ patient }) => patient?.name ?? (<FillerRowElement/>),
+      accessorFn: ({ patient }) => patient?.humanReadableIdentifier ?? (<FillerRowElement/>),
       sortingFn: 'text',
       minSize: 190,
       meta: {
diff --git a/tasks/components/modals/PatientDischargeModal.tsx b/tasks/components/modals/PatientDischargeModal.tsx
index 2c9b4c152..67f1caeb1 100644
--- a/tasks/components/modals/PatientDischargeModal.tsx
+++ b/tasks/components/modals/PatientDischargeModal.tsx
@@ -42,7 +42,7 @@ export const PatientDischargeModal = ({
       {patient && (
         <>
           <span className="mt-2">{`${translation('followingPatient')}: `}</span>
-          <span className="font-medium">{patient.name}</span>
+          <span className="font-medium">{patient.humanReadableIdentifier}</span>
         </>
       )}
     </ConfirmModal>
diff --git a/tasks/components/modals/TaskDetailModal.tsx b/tasks/components/modals/TaskDetailModal.tsx
index a8e64f3cd..a6986b40e 100644
--- a/tasks/components/modals/TaskDetailModal.tsx
+++ b/tasks/components/modals/TaskDetailModal.tsx
@@ -120,10 +120,8 @@ const TaskDetailViewSidebar = ({
   const translation = useTranslation([defaultTaskDetailViewTranslation], overwriteTranslation)
 
   const [isShowingPublicDialog, setIsShowingPublicDialog] = useState(false)
-  const { organization } = useAuth()
 
   const updateTaskMutation = useTaskUpdateMutation()
-
   const assignTaskToUserMutation = useAssignTaskMutation()
   const unassignTaskToUserMutation = useUnassignTaskMutation()
 
@@ -157,12 +155,11 @@ const TaskDetailViewSidebar = ({
         <label className="textstyle-label-md">{translation('assignee')}</label>
         <div className="row items-center gap-x-2">
           <AssigneeSelect
-            organizationId={organization?.id ?? ''}
             value={task.assignee}
             onChange={(assignee) => {
-              onChange({ ...task, assignee: assignee.id })
+              onChange({ ...task, assignee: assignee.userId })
               if (!isCreating) {
-                assignTaskToUserMutation.mutate({ taskId: task.id, userId: assignee.id })
+                assignTaskToUserMutation.mutate({ taskId: task.id, userId: assignee.userId })
               }
             }}
           />
diff --git a/tasks/components/selects/AssigneeSelect.tsx b/tasks/components/selects/AssigneeSelect.tsx
index 034a75d19..2695d7951 100644
--- a/tasks/components/selects/AssigneeSelect.tsx
+++ b/tasks/components/selects/AssigneeSelect.tsx
@@ -1,27 +1,23 @@
 import type { SelectProps } from '@helpwave/hightide'
-import { Avatar } from '@helpwave/hightide'
-import { Select } from '@helpwave/hightide'
-import { LoadingAndErrorComponent } from '@helpwave/hightide'
+import { Avatar, LoadingAndErrorComponent, Select } from '@helpwave/hightide'
 import clsx from 'clsx'
 import { useMembersByOrganizationQuery } from '@helpwave/api-services/mutations/users/organization_member_mutations'
 import type { OrganizationMember } from '@helpwave/api-services/types/users/organization_member'
 
 export type AssigneeSelectProps = Omit<SelectProps<OrganizationMember>, 'options' | 'value'> & {
   value?: string,
-  organizationId: string,
 }
 
 /**
  * A Select component for picking an assignee
  */
 export const AssigneeSelect = ({
-  organizationId,
-  value,
-  className,
-  onChange,
-  ...selectProps
-} : AssigneeSelectProps) => {
-  const { data, isLoading, isError } = useMembersByOrganizationQuery(organizationId)
+                                 value,
+                                 className,
+                                 onChange,
+                                 ...selectProps
+                               }: AssigneeSelectProps) => {
+  const { data, isLoading, isError } = useMembersByOrganizationQuery()
 
   return (
     <LoadingAndErrorComponent
@@ -30,16 +26,19 @@ export const AssigneeSelect = ({
       className="min-h-10 w-full"
     >
       <Select
-        value={data?.find(user => user.id === value)}
+        value={data?.find(user => user.userId === value)}
         options={(data ?? []).map(value => ({
           value,
           label: (
             <div className="row items-center gap-x-1">
-              <Avatar image={{ avatarUrl:value.avatarURL, alt: '' }}  name={value.name} size="md" fullyRounded={true}/>
-              {value.name}
+              <Avatar
+                image={value.avatarURL ? { avatarUrl: value.avatarURL, alt: '' } : undefined} name={value.nickname} size="md"
+                fullyRounded={true}
+              />
+              {value.nickname}
             </div>
           ),
-          searchTags: [value.name, value.email],
+          searchTags: [value.nickname, value.email],
         }))}
         className={clsx('w-full', className)}
         onChange={(user) => {
diff --git a/tasks/components/selects/RoomBedSelect.tsx b/tasks/components/selects/RoomBedSelect.tsx
index 678f786e4..4d26025ac 100644
--- a/tasks/components/selects/RoomBedSelect.tsx
+++ b/tasks/components/selects/RoomBedSelect.tsx
@@ -47,7 +47,7 @@ const defaultRoomBedSelectTranslation: Translation<RoomBedSelectTranslation> = {
   }
 }
 
-export type RoomBedSelectIds = {
+export type RoomBedSelectionValue = {
   /**
    * undefined value here means select a room and bed
    */
@@ -56,12 +56,12 @@ export type RoomBedSelectIds = {
 }
 
 export type RoomBedSelectProps = {
-  initialRoomAndBed: RoomBedSelectIds,
+  initialRoomAndBed: RoomBedSelectionValue,
   wardId: string,
   /**
    * Only triggers on valid input
    */
-  onChange?: (RoomBedSelectIds: RoomBedSelectIds) => void,
+  onChange?: (RoomBedSelectIds: RoomBedSelectionValue) => void,
   isSubmitting?: boolean,
   isClearable?: boolean,
   disabled?: boolean,
@@ -81,7 +81,7 @@ export const RoomBedSelect = ({
                               }: PropsForTranslation<RoomBedSelectTranslation, RoomBedSelectProps>) => {
   const translation = useTranslation([defaultRoomBedSelectTranslation], overwriteTranslation)
   const { data, isError, isLoading } = usePatientAssignmentByWardQuery(wardId)
-  const [currentSelection, setCurrentSelection] = useState<RoomBedSelectIds>({ ...initialRoomAndBed })
+  const [currentSelection, setCurrentSelection] = useState<RoomBedSelectionValue>({ ...initialRoomAndBed })
   const ref = useRef<HTMLDivElement>(null)
   const currentRoom = data?.find(value => value.id === currentSelection.roomId)
   const [touched, setTouched] = useState(false)
@@ -203,6 +203,12 @@ export const RoomBedSelect = ({
       <LoadingAndErrorComponent
         isLoading={isLoading}
         hasError={isError || !data}
+        className={clsx(
+          {
+            'min-h-17': isUsingWidthLayout,
+            'min-h-22': !isUsingWidthLayout,
+          }
+        )}
       >
         <div className="col">
           <div
diff --git a/tasks/next.config.js b/tasks/next.config.js
index 50b29eaf7..f9727f8a3 100644
--- a/tasks/next.config.js
+++ b/tasks/next.config.js
@@ -9,7 +9,6 @@ const nextConfig = {
     remotePatterns: [
       new URL('https://cdn.helpwave.de/**'),
       new URL('https://helpwave.de/**'),
-      new URL('https://source.boringavatars.com/**'),
     ],
   },
 }
diff --git a/tasks/package.json b/tasks/package.json
index 0825fc3fe..1f8481de3 100644
--- a/tasks/package.json
+++ b/tasks/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/modifiers": "9.0.0",
     "@helpwave/api-services": "workspace:*",
     "@helpwave/hightide": "^0.1.25",
     "@tailwindcss/postcss": "^4.1.3",
diff --git a/tasks/pages/ward/[wardId].tsx b/tasks/pages/ward/[wardId].tsx
index 905251388..68eb2eab7 100644
--- a/tasks/pages/ward/[wardId].tsx
+++ b/tasks/pages/ward/[wardId].tsx
@@ -1,30 +1,29 @@
-import { createContext, useCallback, useEffect, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { ConfirmModal, type PropsForTranslation, useTranslation } from '@helpwave/hightide'
+import { type PropsForTranslation, useTranslation } from '@helpwave/hightide'
 import { DragOverlay, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
-import type { BedWithPatientWithTasksNumberDTO } from '@helpwave/api-services/types/tasks/bed'
+import { restrictToWindowEdges } from '@dnd-kit/modifiers'
 import { useWardQuery } from '@helpwave/api-services/mutations/tasks/ward_mutations'
 import {
-  useAssignBedMutation,
-  usePatientCreateMutation,
+  usePatientAssignToBedMutation,
   usePatientDischargeMutation,
-  useReadmitPatientMutation,
-  useUnassignMutation
+  usePatientReadmitAndAssignMutation,
+  usePatientReadmitMutation,
+  usePatientUnassignMutation
 } from '@helpwave/api-services/mutations/tasks/patient_mutations'
-import type { PatientDTO, PatientMinimalDTO } from '@helpwave/api-services/types/tasks/patient'
-import { useUpdates } from '@helpwave/api-services/util/useUpdates'
-import { DndContext, type DragEndEvent, type DragStartEvent } from '@/components/dnd-kit-instances/patients'
-import { TwoColumn } from '@/components/layout/TwoColumn'
+import type { WardOverviewDraggableData } from '@/components/dnd-kit-instances/patients'
+import { WardOverviewDndContext } from '@/components/dnd-kit-instances/patients'
 import { PatientDetail } from '@/components/layout/PatientDetails'
 import { PageWithHeader } from '@/components/layout/PageWithHeader'
 import titleWrapper from '@/utils/titleWrapper'
-import { WardRoomList } from '@/components/layout/WardRoomList'
 import { PatientList } from '@/components/layout/PatientList'
 import { DragCard } from '@/components/cards/DragCard'
 import { PatientCard } from '@/components/cards/PatientCard'
 import { useRouteParameters } from '@/hooks/useRouteParameters'
 import { useAuth } from '@helpwave/api-services/authentication/useAuth'
+import { TwoColumn } from '@/components/layout/TwoColumn'
+import { WardRoomList } from '@/components/layout/WardRoomList'
 
 type WardOverviewTranslation = {
   beds: string,
@@ -55,21 +54,13 @@ const defaultWardOverviewTranslation = {
 }
 
 export type WardOverviewContextState = {
-  /**
-   patient set means creating patient
-   patientId is the current patient
-   */
-  patient?: PatientDTO,
   patientId?: string,
   bedId?: string,
-  roomId?: string,
   wardId: string,
-  organizationId?: string,
 }
 
 const emptyWardOverviewContextState = {
   wardId: '',
-  organizationId: '',
 }
 
 export type WardOverviewContextType = {
@@ -85,158 +76,36 @@ export const WardOverviewContext = createContext<WardOverviewContextType>({
 const WardOverview: NextPage = ({ overwriteTranslation }: PropsForTranslation<WardOverviewTranslation>) => {
   const translation = useTranslation([defaultWardOverviewTranslation], overwriteTranslation)
 
-
-  // TODO: could we differentiate between the two using two different states?
-  const [draggedPatient, setDraggedPatient] = useState<{
-    patient?: PatientMinimalDTO,
-    bed?: BedWithPatientWithTasksNumberDTO,
-  }>()
-  const wardId = useRouteParameters<'wardId'>().wardId
-  const { data: ward, refetch } = useWardQuery(wardId)
+  // Parsing URL and loading data for breadcrumbs
+  const [usedQueryParam, setUsedQueryParam] = useState(false)
+  const { wardId, patientId } = useRouteParameters<'wardId', 'patientId'>()
+  const { data: ward } = useWardQuery(wardId)
   const { organization } = useAuth()
 
-  const { observeAttribute } = useUpdates()
+  const [contextState, setContextState] = useState<WardOverviewContextState>({ wardId, patientId })
   useEffect(() => {
-    const subscription = observeAttribute('aggregateType', 'task').subscribe(() => refetch())
-    return () => {
-      subscription.unsubscribe()
+    if (!usedQueryParam && !!patientId) {
+      setContextState(prevState => ({ ...prevState, patientId, wardId }))
+      setUsedQueryParam(true)
     }
-  }, [observeAttribute, refetch])
-
-  const [contextState, setContextState] = useState<WardOverviewContextState>({
-    wardId
-  })
-  const [draggingRoomId, setDraggingRoomId] = useState<string>()
-  const [draggingBedId, setDraggingBedId] = useState<string>()
+  }, [patientId, wardId, usedQueryParam])
 
-  const assignBedMutation = useAssignBedMutation({
-    onSuccess: (_, bed) => {
-      if (draggingRoomId) {
-        setContextState({
-          ...contextState,
-          bedId: bed.id,
-          patientId: bed.patientId,
-          roomId: draggingRoomId,
-          patient: undefined
-        })
-      } else {
-        setContextState({
-          ...contextState,
-          bedId: bed.id,
-          patientId: bed.patientId,
-          patient: undefined
-        })
-      }
-
-      setDraggingRoomId(undefined)
-    }
-  })
-  const unassignMutation = useUnassignMutation()
+  // Mutations
+  const assignBedMutation = usePatientAssignToBedMutation()
+  const unassignMutation = usePatientUnassignMutation()
   const dischargeMutation = usePatientDischargeMutation()
-  const readmitPatientMutation = useReadmitPatientMutation({
-    onSuccess: (_, variables, _2) => {
-      if (draggingBedId) {
-        assignBedMutation.mutate({
-          id: draggingBedId,
-          patientId: variables
-        })
-      }
-    }
-  })
+  const readmitMutation = usePatientReadmitMutation()
+  const readmitAndAssignMutation = usePatientReadmitAndAssignMutation()
 
+  // Drag and Drop
+  const [draggedElementData, setDraggedElementData] = useState<WardOverviewDraggableData>()
   const sensorOptions = { activationConstraint: { distance: 8 } }
   const sensors = useSensors(
     useSensor(MouseSensor, sensorOptions),
     useSensor(TouchSensor, sensorOptions)
   )
 
-  const handleDragStart = useCallback(({ active }: DragStartEvent) => {
-    const source = active.data.current
-
-    // TODO: I am unfamiliar with the code base and types, is this a good way of dealing with this?
-    if (!source) {
-      return
-    }
-
-    if ('bed' in source) {
-      setDraggedPatient({ bed: source.bed })
-    } else {
-      setDraggedPatient({ patient: source.patient })
-    }
-  }, [])
-
-  const readmitAndAssignPatient = useCallback(async (patientId: string, bedId: string) => {
-    setDraggingBedId(bedId)
-    readmitPatientMutation.mutate(patientId)
-  }, [readmitPatientMutation])
-
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    const {
-      active,
-      over
-    } = event
-    const source = active.data.current
-    const target = over?.data.current
-
-    const patientId = draggedPatient?.patient?.id ?? draggedPatient?.bed?.patient?.id ?? ''
-
-    if (source && target) {
-      if ('patientListSection' in target) {
-        // Moving inside of patient list
-        if (target.patientListSection === 'unassigned') {
-          if ('discharged' in source && source.discharged) {
-            readmitPatientMutation.mutate(patientId)
-          }
-          unassignMutation.mutate(patientId) // TODO: is this correct?, doing two mutations for a patient if previously discharged?
-        } else if (target.patientListSection === 'discharged') { // TODO: can we unify the formats for patients PREVIOUSLY having been discharged and patients BEING discharged? (boolean vs.patientListSection)
-          dischargeMutation.mutate(patientId)
-        }
-      } else {
-        // Moving on bed cards
-        setDraggingRoomId(target.room.id)
-        if ('discharged' in source && source.discharged) {
-          readmitAndAssignPatient(patientId, target.bed.id).catch(console.error)
-        } else {
-          assignBedMutation.mutate({
-            id: target.bed.id,
-            patientId
-          })
-        }
-      }
-    }
-
-    setDraggedPatient(undefined)
-  }, [assignBedMutation, unassignMutation, readmitPatientMutation, readmitAndAssignPatient, dischargeMutation, draggedPatient])
-
-  const handleDragCancel = useCallback(() => {
-    setDraggedPatient(undefined)
-  }, [])
-
-  const isShowingPatientDialog = !!contextState.patient
-  const isShowingPatientList = contextState.patientId === undefined || isShowingPatientDialog
-
-  useEffect(() => {
-    setContextState({ wardId })
-  }, [wardId])
-
-  const createPatientMutation = usePatientCreateMutation()
-
-  // TODO: can we somehow assert that the patient is not undefined here?
-  const createPatient = () => contextState.patient && createPatientMutation.mutateAsync(contextState.patient)
-    .then((patient) => {
-      // TODO: is it a good idea to have this much state in one object?, also this shouldn't be called context I think
-      setContextState({
-        ...contextState,
-        patient,
-      })
-
-      if (contextState.bedId) {
-        return assignBedMutation.mutateAsync({
-          id: contextState.bedId,
-          patientId: patient.id
-        })
-      }
-    })
+  const isShowingPatientList = !contextState.patientId
 
   return (
     <PageWithHeader
@@ -258,44 +127,49 @@ const WardOverview: NextPage = ({ overwriteTranslation }: PropsForTranslation<Wa
       <Head>
         <title>{titleWrapper(translation('roomOverview'))}</title>
       </Head>
-      <ConfirmModal
-        isOpen={isShowingPatientDialog}
-        headerProps={{ titleText: translation('addPatientDialogTitle') }}
-        onConfirm={() => {
-          if (contextState.patient) {
-            createPatient()
-          } else {
-            setContextState({
-              ...emptyWardOverviewContextState,
-              wardId: contextState.wardId,
-              patient: undefined
-            })
-          }
-        }}
-        onDecline={() => {
-          setContextState({
-            ...emptyWardOverviewContextState,
-            wardId: contextState.wardId,
-            patient: undefined
-          })
-        }}
-        onCancel={() => {
-          setContextState({
-            ...emptyWardOverviewContextState,
-            wardId: contextState.wardId,
-            patient: undefined
-          })
-        }}
-      />
       <WardOverviewContext.Provider value={{
         state: contextState,
         updateContext: setContextState
       }}>
-        <DndContext
+        <WardOverviewDndContext
           sensors={sensors}
-          onDragStart={handleDragStart}
-          onDragCancel={handleDragCancel}
-          onDragEnd={handleDragEnd}
+          onDragStart={event => {
+            setDraggedElementData(event.active.data.current)
+          }}
+          onDragCancel={() => {
+            setDraggedElementData(undefined)
+          }}
+          onDragAbort={() => {
+            setDraggedElementData(undefined)
+          }}
+          onDragEnd={({ active, over }) => {
+            const draggedData = active.data.current
+            const overData = over?.data.current
+            if (!draggedData || !overData) {
+              setDraggedElementData(undefined)
+              return
+            }
+            const patientId = draggedData.patient.id
+            const isDischarged = draggedData.type === 'patientListItem' && draggedData.discharged
+            const isAssigned =  (draggedData.type === 'patientListItem' && draggedData.assigned) || (draggedData.type === 'assignedPatient')
+            if (overData.type === 'section') {
+              if (isDischarged && overData.section === 'unassigned') {
+                readmitMutation.mutate(patientId)
+              } else if(!isDischarged && overData.section === 'unassigned' && isAssigned) {
+                unassignMutation.mutate(patientId)
+              } else if (!isDischarged && overData.section === 'discharged') {
+                dischargeMutation.mutate(patientId)
+              }
+              // other cases don't produce a change
+            } else if (overData.type === 'bed') {
+              if (isDischarged) {
+                readmitAndAssignMutation.mutate({ patientId, bedId: overData.bed.id })
+              } else {
+                assignBedMutation.mutate({ patientId, bedId: overData.bed.id })
+              }
+            }
+            setDraggedElementData(undefined)
+          }}
         >
           <TwoColumn
             disableResize={false}
@@ -304,41 +178,41 @@ const WardOverview: NextPage = ({ overwriteTranslation }: PropsForTranslation<Wa
               left: { min: '33%' }
             }}
             baseLayoutValue="-580px"
-            left={() => (<WardRoomList key={wardId}/>)}
+            left={() => (<WardRoomList key={wardId} wardId={wardId}/>)}
             right={width =>
               isShowingPatientList ? (
                   <PatientList width={width} wardId={wardId}/>
                 ) :
-                contextState.patientId && (
+                (
                   <PatientDetail
-                    key={contextState.patient?.id}
+                    key={contextState.patientId}
                     wardId={wardId}
                     width={width}
                   />
                 )
             }
           />
-          {/* TODO Later reenable the dropAnimation */}
-          <DragOverlay style={{ width: '200px' }} dropAnimation={null}>
-            {draggedPatient && (draggedPatient.patient ? (
-                  <DragCard cardDragProperties={{ isDragging: true }}>
-                    <span>{draggedPatient.patient.name}</span>
-                  </DragCard>
-                )
-                : draggedPatient.bed && draggedPatient.bed.patient && (
+          {/* TODO Optimistic updates in the patient mutations affecting
+          the roomoverview mutation are needed to enable dropanimations */}
+          <DragOverlay dropAnimation={null} modifiers={[restrictToWindowEdges]}>
+            {draggedElementData && (draggedElementData.type === 'patientListItem' ? (
+                <DragCard cardDragProperties={{ isDragging: true }}>
+                  <span>{draggedElementData.patient.humanReadableIdentifier}</span>
+                </DragCard>
+              ) : (
                 <PatientCard
-                  bedName={draggedPatient.bed.name}
-                  patientName={draggedPatient.bed.patient.name}
+                  bedName={draggedElementData.bed.name}
+                  patientName={draggedElementData.patient.humanReadableIdentifier}
                   taskCounts={{
-                    done: draggedPatient.bed.patient.tasksDone,
-                    inProgress: draggedPatient.bed.patient.tasksInProgress,
-                    todo: draggedPatient.bed.patient.tasksTodo
+                    done: draggedElementData.patient.tasksDone,
+                    inProgress: draggedElementData.patient.tasksInProgress,
+                    todo: draggedElementData.patient.tasksTodo
                   }}
                 />
               )
             )}
           </DragOverlay>
-        </DndContext>
+        </WardOverviewDndContext>
       </WardOverviewContext.Provider>
     </PageWithHeader>
   )

From 395df9a5afd035fecdc02cd921e32161c3119944 Mon Sep 17 00:00:00 2001
From: DasProffi <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 22 Jul 2025 10:45:46 +0200
Subject: [PATCH 5/5] feat: allow navigation to patient in WardOverview

---
 api-services/service/tasks/PatientService.ts |  51 +++-----
 api-services/types/tasks/patient.ts          |   1 +
 tasks/components/SubtaskTile.tsx             |   1 +
 tasks/components/SubtaskView.tsx             |   1 +
 tasks/components/TaskTemplateListColumn.tsx  |  10 +-
 tasks/components/cards/AddCard.tsx           |   2 +-
 tasks/components/cards/TaskTemplateCard.tsx  |  25 ++--
 tasks/components/layout/DashboardDisplay.tsx | 125 ++++++++++++-------
 tasks/components/layout/WardRoomList.tsx     |  19 ++-
 tasks/components/modals/TaskDetailModal.tsx  | 120 +++++++++---------
 tasks/translation/medical.ts                 |  56 +++++++++
 tasks/translation/tasks.ts                   |  56 +++++++++
 12 files changed, 311 insertions(+), 156 deletions(-)
 create mode 100644 tasks/translation/medical.ts
 create mode 100644 tasks/translation/tasks.ts

diff --git a/api-services/service/tasks/PatientService.ts b/api-services/service/tasks/PatientService.ts
index b1ef166e6..818d95222 100644
--- a/api-services/service/tasks/PatientService.ts
+++ b/api-services/service/tasks/PatientService.ts
@@ -39,6 +39,7 @@ export const PatientService = {
       discharged: res.getIsDischarged(),
       bed: res.getBed()?.toObject(),
       room: res.getRoom()?.toObject(),
+      wardId: res.getRoom()?.getWardId(),
       tasks: res.getTasksList().map(task => ({
         id: task.getId(),
         name: task.getName(),
@@ -111,32 +112,23 @@ export const PatientService = {
       discharged: res.getDischargedPatientsList().map(value => value.toObject()),
       unassigned: res.getUnassignedPatientsList().map(value => value.toObject())
     }
-  }
-  ,
+  },
   getRecentPatients: async function (): Promise<RecentPatientDTO[]> {
     const req = new GetRecentPatientsRequest()
     const res = await APIServices.patient.getRecentPatients(req, getAuthenticatedGrpcMetadata())
 
     const patients: RecentPatientDTO[] = []
     for (const patient of res.getRecentPatientsList()) {
-      const room = patient.getRoom()
-      const bed = patient.getBed()
-      let wardId: string | undefined
-      if (room) {
-        wardId = room?.getWardId()
-      }
-
       patients.push({
         id: patient.getId(),
         humanReadableIdentifier: patient.getHumanReadableIdentifier(),
-        wardId,
-        bed: bed?.toObject(),
-        room: room?.toObject()
+        bed: patient.getBed()?.toObject(),
+        room: patient.getRoom()?.toObject(),
+        wardId: patient.getRoom()?.getWardId(),
       })
     }
     return patients
-  }
-  ,
+  },
   create: async function (patient: PatientDTO): Promise<PatientDTO> {
     const req = new CreatePatientRequest()
       .setNotes(patient.notes)
@@ -152,8 +144,7 @@ export const PatientService = {
     }
 
     return { ...patient, id: res.getId() }
-  }
-  ,
+  },
   update: async function (patient: PatientDTO): Promise<boolean> {
     const req = new UpdatePatientRequest()
       .setId(patient.id)
@@ -162,19 +153,14 @@ export const PatientService = {
 
     await APIServices.patient.updatePatient(req, getAuthenticatedGrpcMetadata())
     return true
-  }
-  ,
-  delete:
-
-    async function (patientId: string): Promise<boolean> {
-      const req = new DeletePatientRequest()
-        .setId(patientId)
-
-      await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
-      return true
-    }
+  },
+  delete: async function (patientId: string): Promise<boolean> {
+    const req = new DeletePatientRequest()
+      .setId(patientId)
 
-  ,
+    await APIServices.patient.deletePatient(req, getAuthenticatedGrpcMetadata())
+    return true
+  },
   assignToBed: async function (bedWithPatientId: BedWithPatientId): Promise<boolean> {
     const req = new AssignBedRequest()
       .setId(bedWithPatientId.patientId)
@@ -182,24 +168,21 @@ export const PatientService = {
 
     await APIServices.patient.assignBed(req, getAuthenticatedGrpcMetadata())
     return true
-  }
-  ,
+  },
   unassignFromBed: async function (patientId: string): Promise<boolean> {
     const req = new UnassignBedRequest()
       .setId(patientId)
 
     await APIServices.patient.unassignBed(req, getAuthenticatedGrpcMetadata())
     return true
-  }
-  ,
+  },
   discharge: async function (patientId: string): Promise<boolean> {
     const req = new DischargePatientRequest()
       .setId(patientId)
 
     await APIServices.patient.dischargePatient(req, getAuthenticatedGrpcMetadata())
     return true
-  }
-  ,
+  },
   reAdmit: async function (patientId: string): Promise<boolean> {
     const req = new ReadmitPatientRequest()
       .setPatientId(patientId)
diff --git a/api-services/types/tasks/patient.ts b/api-services/types/tasks/patient.ts
index 505238c12..7c40272ed 100644
--- a/api-services/types/tasks/patient.ts
+++ b/api-services/types/tasks/patient.ts
@@ -47,6 +47,7 @@ export type PatientDetailsDTO = PatientMinimalDTO & {
   discharged: boolean,
   room?: RoomMinimalDTO,
   bed?: BedMinimalDTO,
+  wardId?: string,
 }
 
 export const emptyPatientDetails: PatientDetailsDTO = {
diff --git a/tasks/components/SubtaskTile.tsx b/tasks/components/SubtaskTile.tsx
index c2bdec6ac..bff5f101c 100644
--- a/tasks/components/SubtaskTile.tsx
+++ b/tasks/components/SubtaskTile.tsx
@@ -80,6 +80,7 @@ export const SubtaskTile = ({
           onClick={onRemoveClick}
           aria-label={translation('remove')}
           color="negative"
+          size="small"
         >
           {translation('remove')}
         </TextButton>
diff --git a/tasks/components/SubtaskView.tsx b/tasks/components/SubtaskView.tsx
index 43febcf51..3c513bd56 100644
--- a/tasks/components/SubtaskView.tsx
+++ b/tasks/components/SubtaskView.tsx
@@ -110,6 +110,7 @@ export const SubtaskView = ({
             }
             setScrollToBottom(true)
           }}
+          size="small"
         >
           <div className="row items-center gap-x-2">
             <Plus size={18}/>
diff --git a/tasks/components/TaskTemplateListColumn.tsx b/tasks/components/TaskTemplateListColumn.tsx
index 1b3924874..d4b391af3 100644
--- a/tasks/components/TaskTemplateListColumn.tsx
+++ b/tasks/components/TaskTemplateListColumn.tsx
@@ -49,9 +49,9 @@ export const TaskTemplateListColumn = ({
   }, [ref.current?.clientHeight])
 
   return (
-    <div className="col overflow-hidden h-full">
-      <div className="row overflow-hidden">
-        <span className="textstyle-lg mb-4 flex-1">
+    <div className="flex-col-2 overflow-hidden h-full">
+      <div className="row overflow-hidden min-h-8">
+        <span className="textstyle-title-md flex-1">
           {translation('template')}
         </span>
         {onColumnEditClick && <Edit onClick={onColumnEditClick}/>}
@@ -59,14 +59,14 @@ export const TaskTemplateListColumn = ({
       <div className="overflow-hidden h-full" ref={ref}>
         <div>
           <Scrollbars autoHeight autoHeightMin={height} autoHide>
-            <div className="col gap-y-2">
+            <div className="col gap-y-2 pb-4">
               {templates.map((taskTemplateExtension) => (
                 <TaskTemplateCard
                   key={taskTemplateExtension.taskTemplate.id}
                   name={taskTemplateExtension.taskTemplate.name}
                   subtaskCount={taskTemplateExtension.taskTemplate.subtasks.length}
                   onClick={() => onTileClick(taskTemplateExtension.taskTemplate)}
-                  className="min-h-auto"
+                  className="min-h-auto px-2 py-1"
                   isSelected={activeId === taskTemplateExtension.taskTemplate.id}
                   typeForLabel={taskTemplateExtension.type}
                 />
diff --git a/tasks/components/cards/AddCard.tsx b/tasks/components/cards/AddCard.tsx
index df3f1049a..63e8fc341 100644
--- a/tasks/components/cards/AddCard.tsx
+++ b/tasks/components/cards/AddCard.tsx
@@ -21,7 +21,7 @@ export const AddCard = ({
     <div
       onClick={onClick}
       className={clsx(
-        'card-md row justify-center items-center gap-x-1 text-gray-400 border-2 hover:border-primary h-full hover:brightness-[98%] min-h-28',
+        'card-md flex-col-1 justify-center items-center gap-x-1 text-description border-2 hover:border-primary h-full min-h-28',
         { 'cursor-pointer': !!onClick },
         {
           'border-primary': isSelected,
diff --git a/tasks/components/cards/TaskTemplateCard.tsx b/tasks/components/cards/TaskTemplateCard.tsx
index 72dba55f7..9110ddd8b 100644
--- a/tasks/components/cards/TaskTemplateCard.tsx
+++ b/tasks/components/cards/TaskTemplateCard.tsx
@@ -49,18 +49,19 @@ export const TaskTemplateCard = ({
       {...editCardProps}
     >
       <div className="col w-full gap-y-0">
-      <div className="row items-center justify-between overflow-hidden gap-x-1">
-        <h4 className="textstyle-title-normal">{name}</h4>
-        {typeForLabel && (
-          <Chip
-            color={typeForLabel === 'ward' ? 'red' : 'default'}
-            variant="fullyRounded"
-          >
-            {typeForLabel === 'ward' ? translation('ward') : translation('personal')}
-          </Chip>
-        )}
-      </div>
-      <span>{subtaskCount + ' ' + translation('subtask')}</span>
+        <div className="row items-center justify-between overflow-hidden gap-x-1">
+          <h4 className="textstyle-title-normal truncate">{name}</h4>
+          {typeForLabel && (
+            <Chip
+              color={typeForLabel === 'ward' ? 'red' : 'blue'}
+              variant="fullyRounded"
+              className="!font-semibold text-xs"
+            >
+              {typeForLabel === 'ward' ? translation('ward') : translation('personal')}
+            </Chip>
+          )}
+        </div>
+        <span>{subtaskCount + ' ' + translation('subtask')}</span>
       </div>
     </EditCard>
   )
diff --git a/tasks/components/layout/DashboardDisplay.tsx b/tasks/components/layout/DashboardDisplay.tsx
index e86ddc3c7..d4557ebe9 100644
--- a/tasks/components/layout/DashboardDisplay.tsx
+++ b/tasks/components/layout/DashboardDisplay.tsx
@@ -1,6 +1,11 @@
 import clsx from 'clsx'
 import type { Translation } from '@helpwave/hightide'
-import { LoadingAndErrorComponent, type PropsForTranslation, useTranslation } from '@helpwave/hightide'
+import {
+  LoadingAndErrorComponent,
+  type PropsForTranslation,
+  TranslationPluralCount,
+  useTranslation
+} from '@helpwave/hightide'
 import { useRouter } from 'next/router'
 import { useWardOverviewsQuery } from '@helpwave/api-services/mutations/tasks/ward_mutations'
 import { useRecentPatientsQuery } from '@helpwave/api-services/mutations/tasks/patient_mutations'
@@ -15,13 +20,11 @@ import { Scrollbars } from 'react-custom-scrollbars-2'
 import { TaskCard } from '@/components/cards/TaskCard'
 import { useMemo, useState } from 'react'
 import type { TaskDTO } from '@helpwave/api-services/types/tasks/task'
-import { TaskStatusUtil } from '@helpwave/api-services/types/tasks/task'
 import { TaskDetailModal } from '@/components/modals/TaskDetailModal'
+import type { MedicalTranslationType } from '@/translation/medical'
+import { medicalTranslation } from '@/translation/medical'
 
 type DashboardDisplayTranslation = {
-  patients: string,
-  organizations: string,
-  wards: string,
   recent: string,
   showAllOrganizations: string,
   addWard: string,
@@ -29,11 +32,10 @@ type DashboardDisplayTranslation = {
   noTasks: string,
 }
 
+type TranslationType = MedicalTranslationType & DashboardDisplayTranslation
+
 const defaultDashboardDisplayTranslations: Translation<DashboardDisplayTranslation> = {
   en: {
-    patients: 'Patients',
-    organizations: 'Organizations',
-    wards: 'Wards',
     recent: 'Recently used',
     showAllOrganizations: 'Show all organizations',
     addWard: 'Add Ward',
@@ -41,9 +43,6 @@ const defaultDashboardDisplayTranslations: Translation<DashboardDisplayTranslati
     noTasks: 'No tasks'
   },
   de: {
-    patients: 'Patienten',
-    organizations: 'Organisationen',
-    wards: 'Stationen',
     recent: 'Kürzlich Benutzt',
     showAllOrganizations: 'Alle Organisationen anzeigen',
     addWard: 'Station hinzufügen',
@@ -59,8 +58,8 @@ export type DashboardDisplayProps = Record<string, unknown>
  */
 export const DashboardDisplay = ({
                                    overwriteTranslation,
-                                 }: PropsForTranslation<DashboardDisplayTranslation, DashboardDisplayProps>) => {
-  const translation = useTranslation([defaultDashboardDisplayTranslations], overwriteTranslation)
+                                 }: PropsForTranslation<TranslationType, DashboardDisplayProps>) => {
+  const translation = useTranslation([medicalTranslation, defaultDashboardDisplayTranslations], overwriteTranslation)
   const { organization } = useAuth()
   const router = useRouter()
   const [taskDetailModalId, setTaskDetailModalId] = useState<string>()
@@ -79,9 +78,16 @@ export const DashboardDisplay = ({
     isLoading: isTasksLoading
   } = useMyTasksQuery()
 
-  const sortedTasks = useMemo<TaskDTO[]>(() => {
-    return [...(tasks ?? [])].sort((a, b) => TaskStatusUtil.compare(a.status, b.status) * -1)
+  const todo = useMemo<TaskDTO[]>(() => {
+    return (tasks ?? []).filter(value => value.status === 'todo')
+  }, [tasks])
+  const inProgress = useMemo<TaskDTO[]>(() => {
+    return (tasks ?? []).filter(value => value.status === 'inProgress')
   }, [tasks])
+  const done = useMemo<TaskDTO[]>(() => {
+    return (tasks ?? []).filter(value => value.status === 'done')
+  }, [tasks])
+
 
   const cardWidth = 'min-w-64 max-w-64'
 
@@ -98,34 +104,67 @@ export const DashboardDisplay = ({
         <LoadingAndErrorComponent isLoading={isTasksLoading} className="min-h-29">
           <div className="col gap-y-1">
             <ColumnTitle title={translation('myTasks')} type="subtitle"/>
-            <Scrollbars autoHeight={true} autoHide={true}>
-              <div className="flex-row-4">
-                {sortedTasks.length > 0 && sortedTasks.map(task => (
-                  <TaskCard
-                    key={task.id}
-                    task={task}
-                    onClick={() => {
-                      setTaskDetailModalId(task.id)
-                    }}
-                    isSelected={false}
-                    showStatus={true}
-                    className={cardWidth}
-                  />
-                ))}
-                {sortedTasks.length === 0 && (
-                  <div
-                    className="card-md flex-row-0 items-center justify-center bg-disabled-background text-disabled-text min-w-64 max-w-64 max-h-30 min-h-30"
-                  >
-                    {translation('noTasks')}
+            <div className="flex-col-4">
+              {todo.length > 0 && (
+                <Scrollbars autoHeight={true} autoHide={true}>
+                  <div className="flex-row-4">
+                    {todo.map(task => (
+                      <TaskCard
+                        key={task.id}
+                        task={task}
+                        onClick={() => {
+                          setTaskDetailModalId(task.id)
+                        }}
+                        isSelected={false}
+                        showStatus={true}
+                        className={cardWidth}
+                      />
+                    ))}
                   </div>
-                )}
-              </div>
-            </Scrollbars>
+                </Scrollbars>
+              )}
+              {inProgress.length > 0 && (
+                <Scrollbars autoHeight={true} autoHide={true}>
+                  <div className="flex-row-4">
+                    {inProgress.map(task => (
+                      <TaskCard
+                        key={task.id}
+                        task={task}
+                        onClick={() => {
+                          setTaskDetailModalId(task.id)
+                        }}
+                        isSelected={false}
+                        showStatus={true}
+                        className={cardWidth}
+                      />
+                    ))}
+                  </div>
+                </Scrollbars>
+              )}
+              {done.length > 0 && (
+                <Scrollbars autoHeight={true} autoHide={true}>
+                  <div className="flex-row-4">
+                    {done.map(task => (
+                      <TaskCard
+                        key={task.id}
+                        task={task}
+                        onClick={() => {
+                          setTaskDetailModalId(task.id)
+                        }}
+                        isSelected={false}
+                        showStatus={true}
+                        className={cardWidth}
+                      />
+                    ))}
+                  </div>
+                </Scrollbars>
+              )}
+            </div>
           </div>
         </LoadingAndErrorComponent>
         <LoadingAndErrorComponent isLoading={isLoadingWards} className="min-h-28">
           <div className="col gap-y-1">
-            <ColumnTitle title={translation('wards')} type="subtitle"/>
+            <ColumnTitle title={translation('ward', { count: TranslationPluralCount.many })} type="subtitle"/>
             <Scrollbars autoHeight={true} autoHide={true}>
               <div className="flex-row-4">
                 {wards && wards.length > 0 && wards?.map(ward => (
@@ -148,7 +187,7 @@ export const DashboardDisplay = ({
         <LoadingAndErrorComponent isLoading={isLoadingPatients} className="min-h-28">
           {patients && patients.length > 0 && (
             <div className="col gap-y-1">
-              <ColumnTitle title={translation('patients')} type="subtitle"/>
+              <ColumnTitle title={translation('patient', { count: TranslationPluralCount.many })} type="subtitle"/>
               <Scrollbars autoHeight={true} autoHide={true}>
                 <div className="flex-col-4">
                   <div className="flex-row-4">
@@ -159,9 +198,9 @@ export const DashboardDisplay = ({
                         bedName={patient.bed?.name}
                         patientName={patient.humanReadableIdentifier}
                         onClick={() => {
-                          if(patient.wardId) {
+                          if (patient.wardId) {
                             router.push(`/ward/${patient.wardId}?patientId=${patient.id}`).catch(console.error)
-                          } else if(wards && wards.length > 0) {
+                          } else if (wards && wards.length > 0) {
                             router.push(`/ward/${wards[0]!.id}?patientId=${patient.id}`).catch(console.error)
                           }
                         }}
@@ -176,9 +215,9 @@ export const DashboardDisplay = ({
                         bedName={patient.bed?.name}
                         patientName={patient.humanReadableIdentifier}
                         onClick={() => {
-                          if(patient.wardId) {
+                          if (patient.wardId) {
                             router.push(`/ward/${patient.wardId}?patientId=${patient.id}`).catch(console.error)
-                          } else if(wards && wards.length > 0) {
+                          } else if (wards && wards.length > 0) {
                             router.push(`/ward/${wards[0]!.id}?patientId=${patient.id}`).catch(console.error)
                           }
                         }}
diff --git a/tasks/components/layout/WardRoomList.tsx b/tasks/components/layout/WardRoomList.tsx
index 40d5dd2e4..a77b14070 100644
--- a/tasks/components/layout/WardRoomList.tsx
+++ b/tasks/components/layout/WardRoomList.tsx
@@ -1,7 +1,12 @@
 import { useContext, useEffect, useState } from 'react'
 import type { Translation } from '@helpwave/hightide'
-import { range } from '@helpwave/hightide'
-import { LoadingAndErrorComponent, type PropsForTranslation, SolidButton, useTranslation } from '@helpwave/hightide'
+import {
+  LoadingAndErrorComponent,
+  type PropsForTranslation,
+  range,
+  SolidButton,
+  useTranslation
+} from '@helpwave/hightide'
 import type { BedWithPatientWithTasksNumberDTO } from '@helpwave/api-services/types/tasks/bed'
 import type { RoomOverviewDTO } from '@helpwave/api-services/types/tasks/room'
 import { useRoomOverviewsQuery } from '@helpwave/api-services/mutations/tasks/room_mutations'
@@ -91,7 +96,7 @@ export const WardRoomList = ({
     <div className="relative col px-6 py-4 @container">
       <AddPatientModal
         isOpen={addModalState.isOpen}
-        onCancel={() => setAddModalState({ value: { name : '' },isOpen: false })}
+        onCancel={() => setAddModalState({ value: { name: '' }, isOpen: false })}
         onConfirm={() => {
           createPatientMutation.mutate({
             id: '',
@@ -127,6 +132,14 @@ export const WardRoomList = ({
               key={index}
               room={room}
               onBedClick={(bed) => {
+                if (bed.patient) {
+                  updateContext({
+                    patientId: bed.patient.id,
+                    bedId: bed.id,
+                    wardId: room.wardId,
+                  })
+                  return
+                }
                 setAddModalState({
                   value: {
                     name: `${translation('patient')} ${range(3).map(() => Math.floor(Math.random() * 10)).map(String).join('')}`,
diff --git a/tasks/components/modals/TaskDetailModal.tsx b/tasks/components/modals/TaskDetailModal.tsx
index a6986b40e..8031085c2 100644
--- a/tasks/components/modals/TaskDetailModal.tsx
+++ b/tasks/components/modals/TaskDetailModal.tsx
@@ -1,7 +1,9 @@
-import type { OverlayHeaderProps, Translation } from '@helpwave/hightide'
+import type { FormTranslationType, OverlayHeaderProps, Translation } from '@helpwave/hightide'
 import {
   ConfirmModal,
+  formTranslation,
   Input,
+  Label,
   LoadingAndErrorComponent,
   LoadingAnimation,
   Modal,
@@ -15,7 +17,7 @@ import {
   useTranslation
 } from '@helpwave/hightide'
 import clsx from 'clsx'
-import { X } from 'lucide-react'
+import { ChevronRight, Globe, LockIcon, X } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useAuth } from '@helpwave/api-services/authentication/useAuth'
@@ -26,7 +28,10 @@ import {
   useWardTaskTemplateQuery
 } from '@helpwave/api-services/mutations/tasks/task_template_mutations'
 import {
-  useAssignTaskMutation, useSubtaskAddMutation, useSubtaskDeleteMutation, useSubtaskUpdateMutation,
+  useAssignTaskMutation,
+  useSubtaskAddMutation,
+  useSubtaskDeleteMutation,
+  useSubtaskUpdateMutation,
   useTaskCreateMutation,
   useTaskDeleteMutation,
   useTaskQuery,
@@ -39,68 +44,41 @@ import { SubtaskView } from '../SubtaskView'
 import { TaskVisibilitySelect } from '@/components/selects/TaskVisibilitySelect'
 import { TaskStatusSelect } from '@/components/selects/TaskStatusSelect'
 import { AssigneeSelect } from '@/components/selects/AssigneeSelect'
+import { usePatientDetailsQuery } from '@helpwave/api-services/mutations/tasks/patient_mutations'
+import Link from 'next/link'
+import { useWardOverviewsQuery } from '@helpwave/api-services/mutations/tasks/ward_mutations'
+import type { MedicalTranslationType } from '@/translation/medical'
+import { medicalTranslation } from '@/translation/medical'
+import type { TasksTranslationType } from '@/translation/tasks'
+import { tasksTranslation } from '@/translation/tasks'
 
-type TaskDetailViewTranslation = {
-  close: string,
-  notes: string,
-  subtasks: string,
-  assignee: string,
-  dueDate: string,
-  status: string,
-  visibility: string,
-  creationTime: string,
-  private: string,
-  public: string,
-  create: string,
-  delete: string,
+type TaskDetailViewAddonTranslation = {
+  finishTask: string,
   deleteTask: string,
   deleteTaskDescription: string,
-  publish: string,
   publishTask: string,
   publishTaskDescription: string,
-  finish: string,
 }
 
-const defaultTaskDetailViewTranslation: Translation<TaskDetailViewTranslation> = {
+type TranslationType = FormTranslationType
+  & MedicalTranslationType
+  & TasksTranslationType
+  & TaskDetailViewAddonTranslation
+
+const defaultTaskDetailViewTranslation: Translation<TaskDetailViewAddonTranslation> = {
   en: {
-    close: 'Close',
-    notes: 'Notes',
-    subtasks: 'Subtasks',
-    assignee: 'Assignee',
-    dueDate: 'Due date',
-    status: 'Status',
-    visibility: 'Visibility',
-    creationTime: 'Creation time',
-    private: 'private',
-    public: 'public',
-    create: 'Create',
-    delete: 'Delete',
+    finishTask: 'Finish Task',
     deleteTask: 'Delete Task',
     deleteTaskDescription: 'The Tasks will be irrevocably removed',
-    publish: 'Publish',
     publishTask: 'Publish task',
     publishTaskDescription: 'This cannot be undone',
-    finish: 'Finish task',
   },
   de: {
-    close: 'Schließen',
-    notes: 'Notizen',
-    subtasks: 'Unteraufgaben',
-    assignee: 'Verantwortlich',
-    dueDate: 'Fälligkeitsdatum',
-    status: 'Status',
-    visibility: 'Sichtbarkeit',
-    creationTime: 'Erstell Zeit',
-    private: 'privat',
-    public: 'öffentlich',
-    create: 'Hinzufügen',
-    delete: 'Löschen',
+    finishTask: 'Fertigstellen',
     deleteTask: 'Task löschen',
     deleteTaskDescription: 'Der Tasks wird unwiederruflich gelöscht',
-    publish: 'Veröffentlichen',
     publishTask: 'Task Veröffentlichen',
     publishTaskDescription: 'Diese Handlung kann nicht rückgängig gemacht werden',
-    finish: 'Fertigstellen',
   }
 }
 
@@ -116,8 +94,8 @@ const TaskDetailViewSidebar = ({
                                  task,
                                  onChange,
                                  isCreating
-                               }: PropsForTranslation<TaskDetailViewTranslation, TaskDetailViewSidebarProps>) => {
-  const translation = useTranslation([defaultTaskDetailViewTranslation], overwriteTranslation)
+                               }: PropsForTranslation<TranslationType, TaskDetailViewSidebarProps>) => {
+  const translation = useTranslation([formTranslation, medicalTranslation, tasksTranslation, defaultTaskDetailViewTranslation], overwriteTranslation)
 
   const [isShowingPublicDialog, setIsShowingPublicDialog] = useState(false)
 
@@ -132,6 +110,9 @@ const TaskDetailViewSidebar = ({
     }
   }
 
+  const { data: patient, isLoading, isError } = usePatientDetailsQuery(task.patientId)
+  const { data: wards, isLoading: isLoadingWards, isError: isErrorWards } = useWardOverviewsQuery() // TODO use a more lightwheight querry
+
   return (
     <div className="col min-w-[250px] gap-y-4">
       <ConfirmModal
@@ -208,7 +189,7 @@ const TaskDetailViewSidebar = ({
         </div>
       </div>
       <div>
-        <label className="textstyle-label-md">{translation('status')}</label>
+        <Label labelType="labelMedium">{translation('status')}</Label>
         <TaskStatusSelect
           value={task.status}
           removeOptions={isCreating ? ['done'] : []}
@@ -222,12 +203,16 @@ const TaskDetailViewSidebar = ({
         />
       </div>
       <div className="select-none">
-        <label className="textstyle-label-md">{translation('visibility')}</label>
+        <Label labelType="labelMedium">{translation('visibility')}</Label>
         {!isCreating ? (
-          <div className="row justify-between items-center">
-            <span>{task.isPublicVisible ? translation('public') : translation('private')}</span>
+          <div className="flex-row-4 justify-between items-center">
+            <div className="flex-row-1 items-center">
+              {task.isPublicVisible ? (<Globe size={18}/>) : (<LockIcon size={18}/>)}
+              <span
+                className="font-semibold">{task.isPublicVisible ? translation('public') : translation('private')}</span>
+            </div>
             {!task.isPublicVisible && !isCreating && (
-              <TextButton size="small" onClick={() => setIsShowingPublicDialog(true)}>
+              <TextButton size="small" color="primary" onClick={() => setIsShowingPublicDialog(true)}>
                 <span>{translation('publish')}</span>
               </TextButton>
             )}
@@ -242,9 +227,28 @@ const TaskDetailViewSidebar = ({
           />
         )}
       </div>
+      {!isCreating && (
+        <div className="flex-col-0">
+          <Label labelType="labelMedium">{translation('patient', { count: 1 })}</Label>
+          <LoadingAndErrorComponent
+            isLoading={isLoading || isLoadingWards}
+            hasError={isError || isErrorWards}
+            className="min-h-7"
+          >
+            <Link
+              href={`/ward/${patient?.wardId ?? (wards ?? [])[0]?.id}?patientId=${patient?.id}`}
+              className="flex-row-4 justify-between items-center group"
+            >
+              <span className="font-semibold">{patient?.humanReadableIdentifier}</span>
+              <ChevronRight size={20}
+                            className="min-h-7 min-w-7 p-1 rounded-md group-hover:bg-button-text-hover-background"/>
+            </Link>
+          </LoadingAndErrorComponent>
+        </div>
+      )}
       {task.createdAt && (
         <div className="col gap-y-1">
-          <span className="textstyle-label-md">{translation('creationTime')}</span>
+          <span className="textstyle-label-md">{translation('createdAt')}</span>
           <TimeDisplay date={new Date(task.createdAt)}/>
         </div>
       )}
@@ -275,8 +279,8 @@ export const TaskDetailModal = ({
                                   createInformation,
                                   className,
                                   ...modalProps
-                                }: PropsForTranslation<TaskDetailViewTranslation, TaskDetailModalProps>) => {
-  const translation = useTranslation([defaultTaskDetailViewTranslation], overwriteTranslation)
+                                }: PropsForTranslation<TranslationType, TaskDetailModalProps>) => {
+  const translation = useTranslation([formTranslation, medicalTranslation, tasksTranslation, defaultTaskDetailViewTranslation], overwriteTranslation)
   const [selectedTemplateId, setSelectedTemplateId] = useState<TaskTemplateDTO['id'] | undefined>(undefined)
   const [isShowingDeleteDialog, setIsShowingDeleteDialog] = useState(false)
   const router = useRouter()
@@ -351,7 +355,7 @@ export const TaskDetailModal = ({
                 updateTaskMutation.mutate({ ...task, status: 'done' })
                 onClose()
               }}>
-                {translation('finish')}
+                {translation('finishTask')}
               </SolidButton>
             )}
           </>
diff --git a/tasks/translation/medical.ts b/tasks/translation/medical.ts
new file mode 100644
index 000000000..77230179d
--- /dev/null
+++ b/tasks/translation/medical.ts
@@ -0,0 +1,56 @@
+import type { Translation, TranslationPlural } from '@helpwave/hightide'
+
+export type MedicalTranslationType = {
+  organization: TranslationPlural,
+  ward: TranslationPlural,
+  room: TranslationPlural,
+  bed: TranslationPlural,
+  patient: TranslationPlural,
+}
+
+export const medicalTranslation: Translation<MedicalTranslationType> = {
+  en: {
+    organization: {
+      one: 'Organization',
+      other: 'Organizations'
+    },
+    ward: {
+      one: 'Ward',
+      other: 'Wards'
+    },
+    room: {
+      one: 'Room',
+      other: 'Rooms'
+    },
+    bed: {
+      one: 'Bed',
+      other: 'Beds'
+    },
+    patient: {
+      one: 'Patient',
+      other: 'Patients'
+    },
+  },
+  de: {
+    organization: {
+      one: 'Organisation',
+      other: 'Organisationen'
+    },
+    ward: {
+      one: 'Station',
+      other: 'Stationen'
+    },
+    room: {
+      one: 'Zimmer',
+      other: 'Zimmer'
+    },
+    bed: {
+      one: 'Bett',
+      other: 'Betten'
+    },
+    patient: {
+      one: 'Patient',
+      other: 'Patienten'
+    },
+  }
+}
diff --git a/tasks/translation/tasks.ts b/tasks/translation/tasks.ts
new file mode 100644
index 000000000..025f32386
--- /dev/null
+++ b/tasks/translation/tasks.ts
@@ -0,0 +1,56 @@
+import type { Translation, TranslationPlural } from '@helpwave/hightide'
+
+export type TasksTranslationType = {
+  task: TranslationPlural,
+  subtask: TranslationPlural,
+  visibility: string,
+  private: string,
+  public: string,
+  publish: string,
+  notes: string,
+  status: string,
+  assignee: string,
+  dueDate: string,
+  createdAt: string,
+}
+
+export const tasksTranslation: Translation<TasksTranslationType> = {
+  en: {
+    task: {
+      one: 'Task',
+      other: 'Tasks'
+    },
+    subtask: {
+      one: 'Subtask',
+      other: 'Subtasks',
+    },
+    visibility: 'Visibility',
+    private: 'private',
+    public: 'public',
+    publish: 'publish',
+    notes: 'notes',
+    status: 'Status',
+    assignee: 'Assignee',
+    dueDate: 'Due Date',
+    createdAt: 'Created at',
+  },
+  de: {
+    task: {
+      one: 'Task',
+      other: 'Tasks'
+    },
+    subtask: {
+      one: 'Unteraufgabe',
+      other: 'Unteraufgaben'
+    },
+    visibility: 'Sichtbarkeit',
+    private: 'Privat',
+    public: 'Öffentlich',
+    publish: 'Veröffentlichen',
+    notes: 'Notizen',
+    status: 'Status',
+    assignee: 'Verantwortlich',
+    dueDate: 'Fälligkeitsdatum',
+    createdAt: 'Erstellt am',
+  }
+}