diff --git a/src/modules/record/components/TaskRecordDuration.vue b/src/modules/record/components/TaskRecordDuration.vue
deleted file mode 100644
index 8fe5433..0000000
--- a/src/modules/record/components/TaskRecordDuration.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
-import type { TaskRecord } from '../models/task-record'
-
-const props = defineProps<{
-  record: TaskRecord
-}>()
-
-const { duration } = useTaskRecordMetadata(props.record)
-</script>
-
-<template>
-  <div class="task-record-link-container content">
-    <span v-if="duration !== null">last time: {{ duration }} minutes </span>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.task-record-link-container {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-</style>
diff --git a/src/modules/record/components/TaskRecordPreview.vue b/src/modules/record/components/TaskRecordPreview.vue
index 0a8978c..793b323 100644
--- a/src/modules/record/components/TaskRecordPreview.vue
+++ b/src/modules/record/components/TaskRecordPreview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useTaskRecordMetadata } from '../hooks/useTaskRecordMetadata'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
-import TaskRecordDuration from './TaskRecordDuration.vue'
 
 const props = defineProps<{
   taskId: string
@@ -10,15 +10,18 @@ const props = defineProps<{
 const recordStore = useTaskRecordStore()
 
 const taskRecord = computed(() => recordStore.getTaskRecord(props.taskId))
+const { duration } = useTaskRecordMetadata(taskRecord)
 </script>
 
 <template>
   <div>
     <div class="content">
-      <h3 class="subtitle is-4">Record</h3>
-      <task-record-duration v-if="taskRecord" :record="taskRecord" />
+      <div v-if="taskRecord" class="task-record-link-container content">
+        <span v-if="duration !== null">last time: {{ duration }} minutes </span>
+      </div>
       <div v-else>No record yet</div>
     </div>
+    <hr />
     <router-link
       :to="{
         name: 'record-view',
@@ -29,3 +32,11 @@ const taskRecord = computed(() => recordStore.getTaskRecord(props.taskId))
     >
   </div>
 </template>
+
+<style scoped lang="scss">
+.task-record-link-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+</style>
diff --git a/src/views/task/TaskView.vue b/src/views/task/TaskView.vue
index 289183f..7d261db 100644
--- a/src/views/task/TaskView.vue
+++ b/src/views/task/TaskView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TaskRecordList from '@/modules/record/components/TaskRecordPreview.vue'
+import TaskRecordPreview from '@/modules/record/components/TaskRecordPreview.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'
 
@@ -30,7 +30,6 @@ const task = computed(() => taskStore.getTask(props.id))
       >user story link</a
     >
     <div class="content">
-      <h3 class="subtitle is-4">Tasks</h3>
       <ol>
         <li v-for="step in task.steps" :key="step.id">
           <div class="step-item">
@@ -40,7 +39,7 @@ const task = computed(() => taskStore.getTask(props.id))
         </li>
       </ol>
     </div>
-    <task-record-list :task-id="id" />
+    <task-record-preview :task-id="id" />
   </div>
   <div v-else>Task not found</div>
 </template>