diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index 1a7a835625..5f710fa384 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -6,6 +6,7 @@ const getData = async () => {
   for (let i = 0; i <= 31; i += 1) {
     const obj = {
       id: `${i}`,
+      case_number: 100,
       case_title: `Case Title ${i}`,
       process_name: `Process ${i}`,
       assigned: `Avatar ${i}`,
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index 223a686f37..d1b033172c 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -11,34 +11,23 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted } from "vue";
+<script setup>
+import { ref, onMounted } from "vue";
 import { BaseTable, Pagination } from "../../../base";
 import { getData } from "../api/index";
 import { getColumns } from "../config/columns";
 
-export default defineComponent({
-  components: { BaseTable, Pagination },
-  setup() {
-    const data = ref(null);
-    const columnsConfig = ref(null);
-    const dataPagination = ref({
-      total: 153,
-      page: 0,
-      pages: 10,
-      perPage: 15,
-    });
-
-    onMounted(async () => {
-      data.value = await getData();
-      columnsConfig.value = getColumns("tasks");
-    });
+const data = ref(null);
+const columnsConfig = ref(null);
+const dataPagination = ref({
+  total: 153,
+  page: 0,
+  pages: 10,
+  perPage: 15,
+});
 
-    return {
-      data,
-      dataPagination,
-      columnsConfig,
-    };
-  },
+onMounted(async () => {
+  data.value = await getData();
+  columnsConfig.value = getColumns("tasks");
 });
 </script>
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index a2a1477a5d..a08592af5e 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,15 +1,24 @@
 import {
   StatusCell,
+  LinkCell,
 } from "../../../system/index";
 
 export default {};
 
 // Column for Task
 const taskNumberColumn = () => ({
-  field: "id",
+  field: "case_number",
   header: "Tasks #",
   resizable: true,
   width: 200,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/tasks/${row.case_number}/edit`;
+      },
+    },
+  }),
 });
 
 const taskNameColumn = () => ({
@@ -17,6 +26,14 @@ const taskNameColumn = () => ({
   header: "Task Name",
   resizable: true,
   width: 200,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/tasks/${row.case_number}/edit`;
+      },
+    },
+  }),
 });
 
 const processNameColumn = () => ({
diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
index d864c6e2e5..db721c10b1 100644
--- a/resources/jscomposition/system/table/cell/LinkCell.vue
+++ b/resources/jscomposition/system/table/cell/LinkCell.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="row.case_title_formatted"
     class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
     :style="{ width: column.width + 'px' } ">
     <a
@@ -11,45 +10,37 @@
     </a>
   </div>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { defineProps } from "vue";
 import { isFunction, get } from "lodash";
 
-export default defineComponent({
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    row: {
-      type: Object,
-      default: () => ({}),
-    },
-    click: {
-      type: Function,
-      default: new Function(),
-    },
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
   },
-  setup(props) {
-    const getValue = () => {
-      if (isFunction(props.column?.formatter)) {
-        return props.column?.formatter(props.row, props.column, props.columns);
-      }
-      return get(props.row, props.column?.field) || "";
-    };
-
-    const onClick = () => {
-      props.click && props.click(props.row, props.column, props.columns);
-    };
-
-    return {
-      onClick,
-      getValue,
-    };
+  column: {
+    type: Object,
+    default: () => ({}),
+  },
+  row: {
+    type: Object,
+    default: () => ({}),
+  },
+  click: {
+    type: Function,
+    default: new Function(),
   },
 });
+
+const getValue = () => {
+  if (isFunction(props.column?.formatter)) {
+    return props.column?.formatter(props.row, props.column, props.columns);
+  }
+  return get(props.row, props.column?.field) || "";
+};
+
+const onClick = () => {
+  props.click && props.click(props.row, props.column, props.columns);
+};
 </script>