diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
index 8a5c5f7196..36b60a3aaa 100644
--- a/ProcessMaker/Http/Controllers/CasesController.php
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -41,4 +41,8 @@ public function index($type = null)
        // This is a temporary API the engine team will provide the new
         return view('cases.casesMain');
     }
+    public function edit(ProcessRequest $request)
+    {
+        return view('cases.edit');
+    }
 }
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 638ba50f69..3fd2797617 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -9,7 +9,7 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.field}`"> </slot>
+            <slot :name="`theader-${column.header}`"> </slot>
           </THeader>
         </tr>
       </thead>
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index e7dee4d39e..cd10c14b54 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -47,7 +47,7 @@ export default defineComponent({
         return props.column?.headerFormatter(props.columns);
       }
 
-      return props.column.headerName || props.column.field || "";
+      return props.column.header || props.column.field || "";
     };
     return {
       getValue,
diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
new file mode 100644
index 0000000000..1a7a835625
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -0,0 +1,24 @@
+export default {};
+
+const getData = async () => {
+  const objectsList = [];
+
+  for (let i = 0; i <= 31; i += 1) {
+    const obj = {
+      id: `${i}`,
+      case_title: `Case Title ${i}`,
+      process_name: `Process ${i}`,
+      assigned: `Avatar ${i}`,
+      current_task: `Task ${i}`,
+      status: `badge ${i}`,
+      started: `21/21/${i}`,
+      due_date: `21/21/${i}`,
+    };
+
+    objectsList.push(obj);
+  }
+
+  return objectsList;
+};
+
+export { getData };
diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
new file mode 100644
index 0000000000..b348088f5c
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="container-fluid">
+    <Tabs
+      :tab-default="tabDefault"
+      :tabs="tabs"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import Tabs from "./Tabs.vue";
+import TaskTable from "./TaskTable.vue";
+import RequestTable from "./RequestTable.vue";
+
+export default defineComponent({
+  components: { Tabs },
+  setup() {
+    const translate = ProcessMaker.i18n;
+
+    const tabDefault = ref("tasks");
+
+    const tabs = [
+      {
+        name: translate.t("Tasks"), href: "#tasks", current: "tasks", show: true, content: TaskTable,
+      },
+      {
+        name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
+      },
+      {
+        name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+      },
+      {
+        name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
+      },
+      {
+        name: translate.t("History"), href: "#history", current: "history", show: true, content: "",
+      },
+      {
+        name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+      },
+    ];
+
+    return {
+      tabs,
+      tabDefault,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
new file mode 100644
index 0000000000..43af3690e6
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <BaseTable
+      id="request-table"
+      :columns="columnsConfig"
+      :data="data"
+    />
+    <Pagination />
+  </div>
+</template>
+
+<script>
+import { defineComponent, 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);
+
+    onMounted(async () => {
+      data.value = await getData();
+      columnsConfig.value = getColumns("requests");
+    });
+
+    return {
+      data,
+      columnsConfig,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/Tabs.vue b/resources/jscomposition/cases/casesDetail/components/Tabs.vue
new file mode 100644
index 0000000000..0f0f056932
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/Tabs.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="tw-block">
+    <div class="tw-border-b tw-border-gray-200">
+      <nav
+        class="tw-mb-px tw-flex tw-space-x-8"
+        aria-label="Tabs"
+      >
+        <template v-for="(tab, index) in tabs">
+          <a
+            v-if="tab.show"
+            :key="index"
+            :href="tab.href"
+            class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
+            :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
+              : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
+            ]"
+            :aria-current="tab.current ? 'page' : undefined"
+            @click="selectTab(tab)"
+          >
+            {{ tab.name }}
+          </a>
+        </template>
+      </nav>
+      <div class="tw-mt-3">
+        <component :is="content" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+
+export default defineComponent({
+  props: {
+    tabDefault: {
+      type: String,
+      required: true,
+    },
+    tabs: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props) {
+    const content = ref(null);
+    const tabSelected = ref(props.tabDefault);
+    const selectTab = (tab) => {
+      content.value = tab.content;
+      tabSelected.value = tab.current;
+    };
+
+    const defaultTab = () => props.tabs.find((tab) => tab.current === tabSelected.value);
+
+    onMounted(() => {
+      selectTab(defaultTab());
+    });
+
+    return {
+      content,
+      selectTab,
+      tabSelected,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
new file mode 100644
index 0000000000..ec56dc0555
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <BaseTable
+      id="task-table"
+      :columns="columnsConfig"
+      :data="data"
+    />
+    <Pagination />
+  </div>
+</template>
+
+<script>
+import { defineComponent, 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);
+
+    onMounted(async () => {
+      data.value = await getData();
+      columnsConfig.value = getColumns("tasks");
+    });
+
+    return {
+      data,
+      columnsConfig,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
new file mode 100644
index 0000000000..21f34b20e1
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -0,0 +1,99 @@
+import BadgeContainer from "../../casesMain/components/BadgeContainer.vue";
+import AvatarContainer from "../../casesMain/components/AvatarContainer.vue";
+
+export default {};
+
+// Column for Task
+const taskNumberColumn = () => ({
+  field: "id",
+  header: "Tasks #",
+  resizable: true,
+  width: 200,
+});
+
+const taskNameColumn = () => ({
+  field: "case_title",
+  header: "Task Name",
+  resizable: true,
+  width: 200,
+});
+
+const processNameColumn = () => ({
+  field: "process_name",
+  header: "Process",
+  resizable: true,
+  width: 200,
+});
+
+const assignedColumn = () => ({
+  field: "assigned",
+  header: "Assigned",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => AvatarContainer,
+});
+
+const dueDateColumn = () => ({
+  field: "due_date",
+  header: "Due Date",
+  resizable: true,
+  width: 200,
+});
+
+// Columns for Requests
+const requestNumberColumn = () => ({
+  field: "id",
+  header: "Request #",
+  resizable: true,
+  width: 200,
+});
+
+const requestNameColumn = () => ({
+  field: "case_title",
+  header: "Request Name",
+  resizable: true,
+  width: 200,
+});
+
+const currentTaskColumn = () => ({
+  field: "current_task",
+  header: "Current Task",
+  resizable: true,
+  width: 200,
+});
+
+const statusColumn = () => ({
+  field: "status",
+  header: "Status",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => BadgeContainer,
+});
+
+const startedColumn = () => ({
+  field: "started_date",
+  header: "started",
+  resizable: true,
+  width: 200,
+});
+
+export const getColumns = (type) => {
+  const columns = {
+    tasks: [
+      taskNumberColumn(),
+      taskNameColumn(),
+      processNameColumn(),
+      assignedColumn(),
+      dueDateColumn(),
+    ],
+    requests: [
+      requestNumberColumn(),
+      requestNameColumn(),
+      currentTaskColumn(),
+      statusColumn(),
+      startedColumn(),
+    ],
+  };
+
+  return columns[type];
+};
diff --git a/resources/jscomposition/cases/casesDetail/edit.js b/resources/jscomposition/cases/casesDetail/edit.js
new file mode 100644
index 0000000000..c633a6cb01
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/edit.js
@@ -0,0 +1,8 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+
+new Vue({
+  el: "#case-detail",
+  components: { CaseDetail },
+  data() {},
+});
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
new file mode 100644
index 0000000000..b95a5fba74
--- /dev/null
+++ b/resources/views/cases/edit.blade.php
@@ -0,0 +1,25 @@
+@extends('layouts.layout')
+
+@section('title')
+  {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+  @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+  @include('shared.breadcrumbs', ['routes' => [
+      __('Cases') => route('cases.index'),
+  ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
+  <case-detail></case-detail>
+</div>
+@endsection
+
+@section('js')
+  <script src="{{mix('js/composition/cases/casesDetail/edit.js')}}"></script>
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 79f9f40450..a2e4a3ede1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -137,6 +137,7 @@
     Route::post('/keep-alive', [LoginController::class, 'keepAlive'])->name('keep-alive');
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
+    Route::get('cases/{request}', [CasesController::class, 'edit'])->name('cases.edit');
     // This is a temporary API the engine team will create the API
     Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
diff --git a/webpack.mix.js b/webpack.mix.js
index e26379255a..ece7502148 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -122,6 +122,7 @@ mix
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
   .js("resources/jscomposition/cases/casesMain/main.js", "public/js/composition/cases/casesMain/main.js")
+  .js("resources/jscomposition/cases/casesDetail/edit.js", "public/js/composition/cases/casesDetail/edit.js")
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
   .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")