diff --git a/src/modules/task/components/TaskNotFound.vue b/src/modules/task/components/TaskNotFound.vue
new file mode 100644
index 0000000..0750a65
--- /dev/null
+++ b/src/modules/task/components/TaskNotFound.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="no-task-found">
+    <p>Task not found.</p>
+    <router-link :to="{ name: 'home' }" class="button">
+      <img src="/icons/left.svg" alt="left arrow" />
+      go to homepage</router-link
+    >
+  </div>
+</template>
+
+<style scoped>
+.no-task-found {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+</style>
diff --git a/src/views/task/EditTask.vue b/src/views/task/EditTask.vue
index 482fe4f..122e73d 100644
--- a/src/views/task/EditTask.vue
+++ b/src/views/task/EditTask.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TaskForm from '@/modules/task/components/TaskForm.vue'
+import TaskNotFound from '@/modules/task/components/TaskNotFound.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 
 const props = defineProps<{ id: string }>()
@@ -11,25 +12,6 @@ const task = store.getTask(props.id)
 <template>
   <div class="edit-task">
     <TaskForm v-if="task" :id="task.id" :initial-task="task" />
-    <div v-else class="no-task-found">
-      <p>Task not found.</p>
-      <router-link :to="{ name: 'home' }" class="button">
-        <img src="/icons/left.svg" alt="left arrow" />
-        go to homepage</router-link
-      >
-    </div>
+    <task-not-found v-else />
   </div>
 </template>
-
-<style scoped lang="scss">
-.edit-task {
-  .no-task-found {
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-  }
-}
-</style>
diff --git a/src/views/task/TaskView.vue b/src/views/task/TaskView.vue
index cca7985..9256e04 100644
--- a/src/views/task/TaskView.vue
+++ b/src/views/task/TaskView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
 import TaskRecordPreview from '@/modules/record/components/TaskRecordPreview.vue'
+import TaskNotFound from '@/modules/task/components/TaskNotFound.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -66,7 +67,7 @@ const deleteTask = () => {
     </div>
     <task-record-preview :task-id="id" />
   </div>
-  <div v-else>Task not found</div>
+  <task-not-found v-else />
 </template>
 
 <style scoped>