diff --git a/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx b/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
index 2b853f25c..425f3c650 100644
--- a/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
+++ b/frontend/src/app/tasks/__tests__/components/CreateTask.test.tsx
@@ -280,7 +280,8 @@ describe('TaskForm', () => {
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
-      projectId: '1',
+      projectId: 1,
+      projectName: 'Holidays',
       startTime: '12:00',
       story: 'story!',
       taskType: 'mock-test',
@@ -316,7 +317,8 @@ describe('TaskForm', () => {
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
-      projectId: '1',
+      projectId: 1,
+      projectName: 'Holidays',
       startTime: '12:00',
       story: 'story!',
       taskType: 'mock-test',
@@ -352,7 +354,8 @@ describe('TaskForm', () => {
       date: '2023-01-01',
       description: 'description!',
       endTime: '13:00',
-      projectId: '1',
+      projectId: 1,
+      projectName: 'Holidays',
       startTime: '12:00',
       story: 'story!',
       taskType: 'mock-test',
diff --git a/frontend/src/app/tasks/components/CreateTask.tsx b/frontend/src/app/tasks/components/CreateTask.tsx
index b0960691a..437ddd7ec 100644
--- a/frontend/src/app/tasks/components/CreateTask.tsx
+++ b/frontend/src/app/tasks/components/CreateTask.tsx
@@ -31,7 +31,10 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
     isTimerRunning,
     selectStartTime,
     handleSubmit,
-    formRef
+    formRef,
+    selectTemplate,
+    handleProject,
+    templateName
   } = useTaskForm()
 
   return (
@@ -39,8 +42,10 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
       <Select
         name="templates"
         label="Select template"
-        value=""
-        onChange={() => {}}
+        value={templateName}
+        onChange={(templateId) => {
+          selectTemplate(parseInt(templateId), templates)
+        }}
         options={templates.map((template) => ({
           value: template.id.toString(),
           label: template.name
@@ -78,15 +83,12 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
         ref={formRef}
       >
         <Select
-          onChange={(value) => handleChange('projectId', value)}
-          value={task.projectId}
+          onChange={(value) => handleProject(value, projects)}
+          value={task.projectName}
           name="projectId"
           label="Select project"
           placeholder="Select project"
-          options={projects.map((project) => ({
-            label: project.description,
-            value: project.id.toString()
-          }))}
+          options={projects.map((project) => project.description)}
           required
         />
         <Stack flexDirection="row" sx={{ gap: { xs: '8px', sm: '30px' } }}>
@@ -131,7 +133,7 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
           label="Task description"
           sx={{ minHeight: '208px' }}
           placeholder="Task description..."
-          value={task.description}
+          value={task.description || ''}
         ></TextArea>
         <Select
           name="taskType"
@@ -142,7 +144,7 @@ export const CreateTask = ({ projects, taskTypes, templates }: CreateTaskProps)
           placeholder="Select task type"
         />
         <Input
-          value={task.story}
+          value={task.story || ''}
           onChange={(e) => handleChange('story', e.target.value)}
           name="story"
           placeholder="Story"
diff --git a/frontend/src/app/tasks/components/EditTask.tsx b/frontend/src/app/tasks/components/EditTask.tsx
index a42521aed..7e0885878 100644
--- a/frontend/src/app/tasks/components/EditTask.tsx
+++ b/frontend/src/app/tasks/components/EditTask.tsx
@@ -81,10 +81,10 @@ export const EditTask = ({ task, tasks, projects, taskTypes, closeForm }: EditTa
         onChange={(e) => handleChange('description', e.target.value)}
         label="Task description"
         placeholder="Task description..."
-        value={formState.description}
+        value={formState.description || ''}
       />
       <Input
-        value={formState.story}
+        value={formState.story || ''}
         onChange={(e) => handleChange('story', e.target.value)}
         name="story"
         placeholder="Story"
diff --git a/frontend/src/app/tasks/components/TaskBox.tsx b/frontend/src/app/tasks/components/TaskBox.tsx
index c316f1781..6594f441a 100644
--- a/frontend/src/app/tasks/components/TaskBox.tsx
+++ b/frontend/src/app/tasks/components/TaskBox.tsx
@@ -4,15 +4,20 @@ import { useState } from 'react'
 import Box from '@mui/joy/Box'
 import Button from '@mui/joy/Button'
 import Typography from '@mui/joy/Typography'
-import { Delete24Filled, Edit24Filled } from '@fluentui/react-icons'
+import {
+  Delete24Filled,
+  Edit24Filled,
+  ArrowMaximize24Filled,
+  ArrowMinimize24Filled
+} from '@fluentui/react-icons'
 
 import { Project } from '@/domain/Project'
 import { TaskType } from '@/domain/TaskType'
+import { Task } from '@/domain/Task'
 
 import { ScreenReaderOnly } from '@/ui/ScreenReaderOnly/ScreenReaderOnly'
 import { ConfirmationModal } from '@/ui/ConfirmationModal/ConfirmationModal'
 import { styled } from '@mui/joy/styles'
-import { Task } from '@/domain/Task'
 import { getTimeDifference, convertTimeToMinutes } from '../utils/time'
 
 import { EditTask } from './EditTask'
@@ -30,6 +35,7 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
 
   const [deleteModalOpen, setDeleteModalOpen] = useState(false)
   const [editMode, setEditMode] = useState(false)
+  const [expandedTask, setExpandedTask] = useState(false)
 
   const timeDifference = () => {
     const startMinutes = convertTimeToMinutes(task.startTime)
@@ -68,11 +74,22 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
             <Typography textColor="#1E2AA5" fontWeight="bold">
               {task.startTime}-{task.endTime} ({timeDifference()})
             </Typography>
+            {expandedTask && (
+              <>
+                <Typography textColor="#1E2AA5">{task.description}</Typography>
+                <Typography textColor="#1E2AA5">{task.story}</Typography>
+              </>
+            )}
           </>
         )}
       </Box>
       <Box display="flex" gap="8px">
-        <IconButton onClick={() => setEditMode(true)}>
+        <IconButton
+          onClick={() => {
+            setEditMode(true)
+            setExpandedTask(false)
+          }}
+        >
           <Edit24Filled color="#2f3338" />
           <ScreenReaderOnly>Edit task</ScreenReaderOnly>
         </IconButton>
@@ -80,6 +97,16 @@ export const TaskBox = ({ task, projects, taskTypes, tasks }: TaskProps) => {
           <Delete24Filled color="#2f3338" />
           <ScreenReaderOnly>Delete task {task.id}</ScreenReaderOnly>
         </IconButton>
+
+        <IconButton onClick={() => setExpandedTask((prevState) => !prevState)}>
+          {expandedTask ? (
+            <ArrowMinimize24Filled color="#2f3338" />
+          ) : (
+            <ArrowMaximize24Filled color="#2f3338" />
+          )}
+          <ScreenReaderOnly>Expand Task</ScreenReaderOnly>
+        </IconButton>
+
         <ConfirmationModal
           open={deleteModalOpen}
           closeModal={() => setDeleteModalOpen(false)}
diff --git a/frontend/src/app/tasks/hooks/useCreateTaskForm.ts b/frontend/src/app/tasks/hooks/useCreateTaskForm.ts
index b84c7dd24..fbd609600 100644
--- a/frontend/src/app/tasks/hooks/useCreateTaskForm.ts
+++ b/frontend/src/app/tasks/hooks/useCreateTaskForm.ts
@@ -1,5 +1,5 @@
 import { format } from 'date-fns'
-import { useEffect, useRef, useCallback } from 'react'
+import { useEffect, useRef, useCallback, useState } from 'react'
 
 import { useForm } from '@/hooks/useForm/useForm'
 import { useTimer } from '@/hooks/useTimer/useTimer'
@@ -9,6 +9,8 @@ import { useGetTasks } from './useGetTasks'
 import { useCreateTask } from './useCreateTask'
 
 import { useAlert } from '@/ui/Alert/useAlert'
+import { Template } from '@/domain/Template'
+import { Project } from '@/domain/Project'
 import { TaskIntent, getOverlappingTasks } from '@/domain/Task'
 import { convertTimeToMinutes, getTimeDifference } from '../utils/time'
 
@@ -18,18 +20,20 @@ export const useTaskForm = () => {
   const { addTask } = useCreateTask()
   const { showError } = useAlert()
   const { tasks } = useGetTasks()
+  const [templateName, setTemplateName] = useState('')
 
   const { startTimer, stopTimer, seconds, minutes, hours, isTimerRunning } = useTimer()
-  const { formState, handleChange, resetForm } = useForm<TaskIntent>({
+  const { formState, handleChange, resetForm, setFormState } = useForm<TaskIntent>({
     initialValues: {
       userId,
-      projectId: '',
+      projectId: null,
+      projectName: '',
       taskType: '',
       story: '',
       description: '',
       startTime: '',
       endTime: '',
-      date: ''
+      date: format(new Date(), 'yyyy-MM-dd')
     }
   })
 
@@ -54,19 +58,41 @@ export const useTaskForm = () => {
     addTask(formState)
   }, [addTask, formState, showError, tasks])
 
-  const setDate = () => handleChange('date', format(new Date(), 'yyyy-MM-dd'))
+  const handleProject = (value: string, projects: Array<Project>) => {
+    const project = projects.find((project) => project.description === value)
+    handleChange('projectName', value)
+    if (project) {
+      handleChange('projectId', project.id)
+    } else {
+      handleChange('projectId', null)
+    }
+  }
+
+  const selectTemplate = (templateId: number, templates: Array<Template>) => {
+    const template = templates.find((t) => t.id === templateId)
+    if (template) {
+      setTemplateName(template.name)
+      setFormState((prevState) => ({
+        ...prevState,
+        taskType: template.taskType,
+        description: template.description || '',
+        startTime: template.startTime || '',
+        endTime: template.endTime || '',
+        projectId: template.projectId,
+        story: template.story || ''
+      }))
+    }
+  }
 
   const onStartTimer = () => {
     handleChange('startTime', format(new Date(), 'HH:mm'))
     handleChange('endTime', '')
 
-    setDate()
     startTimer()
   }
 
   const selectStartTime = (option: string) => {
     handleChange('startTime', option)
-    setDate()
   }
 
   const onStopTimer = () => {
@@ -113,7 +139,10 @@ export const useTaskForm = () => {
     loggedTime: makeLoggedTime(),
     isTimerRunning,
     selectStartTime,
+    handleProject,
     handleSubmit,
-    formRef
+    formRef,
+    selectTemplate,
+    templateName
   }
 }
diff --git a/frontend/src/app/tasks/hooks/useEditTask.ts b/frontend/src/app/tasks/hooks/useEditTask.ts
index 2fb3e2444..efceb4b24 100644
--- a/frontend/src/app/tasks/hooks/useEditTask.ts
+++ b/frontend/src/app/tasks/hooks/useEditTask.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Task } from '@/domain/Task'
+import { TaskIntent, Task } from '@/domain/Task'
 import { useAlert } from '@/ui/Alert/useAlert'
 import { useClientFetch } from '@/infra/lib/useClientFetch'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser/useGetCurrentUser'
@@ -11,7 +11,7 @@ export const useEditTask = ({ handleSuccess }: { handleSuccess: () => void }) =>
   const { id: userId } = useGetCurrentUser()
   const queryClient = useQueryClient()
 
-  const { mutate } = useMutation((task: Task) => editTask(task, apiClient), {
+  const { mutate } = useMutation((task: TaskIntent) => editTask(task, apiClient), {
     onSuccess: (data) => {
       queryClient.setQueryData<Array<Task>>(['tasks', userId], (prevData) =>
         prevData!.map((task) => {
diff --git a/frontend/src/app/tasks/hooks/useEditTaskForm.ts b/frontend/src/app/tasks/hooks/useEditTaskForm.ts
index d01f6930f..ae9e9a99c 100644
--- a/frontend/src/app/tasks/hooks/useEditTaskForm.ts
+++ b/frontend/src/app/tasks/hooks/useEditTaskForm.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react'
 
 import { useAlert } from '@/ui/Alert/useAlert'
 import { useForm } from '@/hooks/useForm/useForm'
-import { Task, getOverlappingTasks } from '@/domain/Task'
+import { Task, TaskIntent, getOverlappingTasks } from '@/domain/Task'
 import { useEditTask } from './useEditTask'
 import { Project } from '@/domain/Project'
 
@@ -13,7 +13,7 @@ type UseEditTaskFormProps = {
 }
 
 export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps) => {
-  const { formState, handleChange, resetForm } = useForm<Task>({
+  const { formState, handleChange, resetForm } = useForm<TaskIntent>({
     initialValues: task
   })
   const formRef = useRef<HTMLFormElement>(null)
@@ -22,7 +22,7 @@ export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps
   const { editTask } = useEditTask({ handleSuccess: closeForm })
 
   const handleSubmit = useCallback(() => {
-    const validation = Task.safeParse(formState)
+    const validation = TaskIntent.safeParse(formState)
 
     if (!validation.success) {
       validation.error.issues.map(({ message }) => {
@@ -47,9 +47,11 @@ export const useEditTaskForm = ({ task, tasks, closeForm }: UseEditTaskFormProps
 
   const handleProject = (value: string, projects: Array<Project>) => {
     const project = projects.find((project) => project.description === value)
+    handleChange('projectName', value)
     if (project) {
       handleChange('projectId', project.id)
-      handleChange('projectName', value)
+    } else {
+      handleChange('projectId', null)
     }
   }
 
diff --git a/frontend/src/domain/Task.ts b/frontend/src/domain/Task.ts
index 4e21f7a0e..328d1ab1e 100644
--- a/frontend/src/domain/Task.ts
+++ b/frontend/src/domain/Task.ts
@@ -6,48 +6,47 @@ function getMinutes(time: string) {
   return hours * 60 + minutes
 }
 
-const timeValidation = (startTime: string, endTime: string, ctx: z.RefinementCtx) => {
-  if (getMinutes(startTime) > getMinutes(endTime)) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'End time must be after Start time'
-    })
-  }
+export type Task = {
+  id: number
+  userId: number
+  projectId: number
+  taskType: string | null
+  story: string | null
+  description: string | null
+  startTime: string
+  endTime: string
+  date: string
+  customerName: string
+  projectName: string
 }
 
-export const Task = z
-  .object({
-    id: z.number(),
-    userId: z.number(),
-    projectId: z.number().min(1, { message: 'Project is required' }),
-    taskType: z.string().nullable(),
-    story: z.string(),
-    description: z.string(),
-    startTime: z.string().min(1, { message: 'Start time is required' }),
-    endTime: z.string().min(1, { message: 'End time is required ' }),
-    date: z.string(),
-    customerName: z.string(),
-    projectName: z.string()
-  })
-  .superRefine((obj, ctx) => {
-    timeValidation(obj.startTime, obj.endTime, ctx)
-  })
-
-export type Task = z.infer<typeof Task>
-
 export const TaskIntent = z
   .object({
+    id: z.number().optional(),
     userId: z.number(),
-    projectId: z.string().min(1, { message: 'Project is required' }),
-    taskType: z.string().optional(),
-    story: z.string(),
-    description: z.string(),
+    projectId: z.number().nullable(),
+    projectName: z.string(),
+    taskType: z.string().nullable(),
+    story: z.string().nullable(),
+    description: z.string().nullable(),
     startTime: z.string().min(1, { message: 'Start time is required' }),
     endTime: z.string().min(1, { message: 'End time is required ' }),
     date: z.string()
   })
   .superRefine((obj, ctx) => {
-    timeValidation(obj.startTime, obj.endTime, ctx)
+    if (getMinutes(obj.startTime) > getMinutes(obj.endTime)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'End time must be after Start time'
+      })
+    }
+
+    if (obj.projectId === null) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Project is required'
+      })
+    }
   })
 export type TaskIntent = z.infer<typeof TaskIntent>
 
diff --git a/frontend/src/domain/Template.ts b/frontend/src/domain/Template.ts
index 7a16ab6bf..77969b3c2 100644
--- a/frontend/src/domain/Template.ts
+++ b/frontend/src/domain/Template.ts
@@ -1,12 +1,12 @@
 export type Template = {
   id: number
   name: string
-  story: string
-  description: string
-  taskType: string
-  userId: number
-  projectId: number
+  story: string | null
+  description: string | null
+  taskType: string | null
+  userId: number | null
+  projectId: number | null
   isGlobal: boolean
-  startTime: string
-  endTime: string
+  startTime: string | null
+  endTime: string | null
 }
diff --git a/frontend/src/hooks/useForm/useForm.ts b/frontend/src/hooks/useForm/useForm.ts
index 7e3dc9e58..a6aa63bf3 100644
--- a/frontend/src/hooks/useForm/useForm.ts
+++ b/frontend/src/hooks/useForm/useForm.ts
@@ -13,5 +13,5 @@ export const useForm = <T>({ initialValues }: UseFormProps<T>) => {
 
   const resetForm = useCallback(() => setFormState(initialValues), [initialValues])
 
-  return { handleChange, formState, resetForm }
+  return { handleChange, formState, resetForm, setFormState }
 }
diff --git a/frontend/src/infra/task/editTask.ts b/frontend/src/infra/task/editTask.ts
index 1169ffd04..217ecd950 100644
--- a/frontend/src/infra/task/editTask.ts
+++ b/frontend/src/infra/task/editTask.ts
@@ -1,7 +1,7 @@
-import { Task } from '@/domain/Task'
+import { Task, TaskIntent } from '@/domain/Task'
 import { ApiClient } from '../lib/apiClient'
 
-export const editTask = async (task: Task, apiClient: ApiClient): Promise<Task> => {
+export const editTask = async (task: TaskIntent, apiClient: ApiClient): Promise<Task> => {
   return apiClient(`/v1/timelog/tasks/${task.id}`, {
     method: 'PUT',
     body: JSON.stringify({
diff --git a/frontend/src/ui/Select/select-utils.tsx b/frontend/src/ui/Select/select-utils.ts
similarity index 93%
rename from frontend/src/ui/Select/select-utils.tsx
rename to frontend/src/ui/Select/select-utils.ts
index 3b04e881b..e0a1ae443 100644
--- a/frontend/src/ui/Select/select-utils.tsx
+++ b/frontend/src/ui/Select/select-utils.ts
@@ -1,7 +1,7 @@
 import { Options, Option } from './types'
 
 export const getDisplayValue = (value: string, options: Options) => {
-  if (options[0] === 'string') {
+  if (typeof options[0] === 'string') {
     return value
   }