diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
new file mode 100644
index 0000000000..8a5c5f7196
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+    /**
+     * Get the list of requests.
+     *
+     * @return \Illuminate\View\View|\Illuminate\Contracts\View
+     */
+    public function index($type = null)
+    {
+       // This is a temporary API the engine team will provide the new
+        return view('cases.casesMain');
+    }
+}
diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
new file mode 100644
index 0000000000..3b492172de
--- /dev/null
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -0,0 +1,32 @@
+<template>
+  <button
+    type="button"
+    :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+        tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    color: {
+      type: String,
+      default: () => "gray",
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const onClick = () => {
+      emit("click");
+    };
+    return {
+      onClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/buttons/index.js b/resources/jscomposition/base/buttons/index.js
new file mode 100644
index 0000000000..a86eca3ca3
--- /dev/null
+++ b/resources/jscomposition/base/buttons/index.js
@@ -0,0 +1,3 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export { OutlineButton };
diff --git a/resources/jscomposition/base/cards/ThreeSectionCard.vue b/resources/jscomposition/base/cards/ThreeSectionCard.vue
new file mode 100644
index 0000000000..9ff7ef6221
--- /dev/null
+++ b/resources/jscomposition/base/cards/ThreeSectionCard.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="tw-flex tw-justify-between tw-items-center
+            tw-p-4 tw-transition tw-duration-150 tw-ease-out
+            hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+    :class="[{
+      [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+      [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+    }]"
+    @click="handleClick"
+  >
+    <div>
+      <slot name="header">
+        <div class="tw-text-xs">
+          {{ header }}
+        </div>
+      </slot>
+      <slot name="body">
+        <div class="tw-text-2xl">
+          {{ body }}
+        </div>
+      </slot>
+    </div>
+
+    <slot name="icon">
+      <i
+        :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+      />
+    </slot>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    header: {
+      type: String,
+      default: () => "header",
+    },
+    body: {
+      type: String,
+      default: () => "body",
+    },
+    icon: {
+      type: String,
+      default: () => "",
+    },
+    active: {
+      type: Boolean,
+      default: () => false,
+    },
+    color: {
+      type: String,
+      default: () => "gray",
+    },
+  },
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click");
+    };
+    return {
+      handleClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/cards/index.js b/resources/jscomposition/base/cards/index.js
new file mode 100644
index 0000000000..e14a1b5958
--- /dev/null
+++ b/resources/jscomposition/base/cards/index.js
@@ -0,0 +1,3 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue";
+
+export { ThreeSectionCard };
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
new file mode 100644
index 0000000000..d203f60b34
--- /dev/null
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="t-relative">
+    <slot
+      v-bind="{
+        toogleShow,
+        data,
+      }"
+      name="input">
+      <button
+        @click.prevent.stop="show = !show"
+        class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
+        <span>{{ data?.label || data?.value || "" }} </span>
+
+        <i class="fas fa-chevron-down" />
+      </button>
+    </slot>
+
+    <transition :name="animation">
+      <div
+        v-if="show"
+        :class="'bg-' + color + '-500'"
+        class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
+        <ul class="list-none overflow-hidden rounded">
+          <li
+            v-for="(option, index) in optionsModel"
+            :key="index"
+            class="hover:bg-gray-200"
+            :class="{
+              'bg-gray-300': option?.value === data?.value,
+            }"
+            @click.prevent.stop="onClick(option, index)">
+            <slot
+              name="option"
+              v-bind="{
+                option,
+              }">
+              <span
+                class="flex py-2 px-4 transition duration-300"
+                :class="'theme-' + color"
+                >{{ option.label || option.value }}</span
+              >
+            </slot>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+} from "vue";
+
+export default defineComponent({
+  props: {
+    color: {
+      type: String,
+      default: () => "blue",
+    },
+    animation: {
+      type: String,
+      default: () => "fade",
+    },
+    // Example input options {"label":"Label 1" , "value": "1"}
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    const show = ref(false);
+    const count = ref(0);
+
+    const data = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      },
+    });
+
+    const optionsModel = computed({
+      get() {
+        return props.options;
+      },
+      set(val) {
+        emit("update:options", val);
+      },
+    });
+
+    const onClick = (option, index) => {
+      show.value = false;
+      data.value = option;
+
+      emit("change", option);
+    };
+
+    const addBodyListener = () => {
+      show.value = false;
+    };
+
+    const toogleShow = () => {
+      show.value = !show.value;
+    };
+
+    onMounted(() => {
+      document.body.addEventListener("click", addBodyListener);
+    });
+
+    onUnmounted(() => {
+      document.body.removeEventListener("click", addBodyListener);
+    });
+
+    return {
+      show,
+      data,
+      optionsModel,
+      count,
+      onClick,
+      toogleShow,
+    };
+  },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+  transition: all 0.5s;
+  transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+  transition: all 0.5s;
+  transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+  transition: all 0.5s;
+  transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.5s;
+  transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: all 0.5s;
+  transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+  opacity: 0;
+  transform: scale(0) rotate(360deg);
+}
+</style>
diff --git a/resources/jscomposition/base/form/InputLeading.vue b/resources/jscomposition/base/form/InputLeading.vue
new file mode 100644
index 0000000000..a2fb84868f
--- /dev/null
+++ b/resources/jscomposition/base/form/InputLeading.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+        <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+            <slot name="icon">
+                <i :class="icon"></i>
+            </slot>
+        </div>
+        <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+                tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
+                placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
+                focus-visible:tw-outline-none
+                sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+    </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    props: {
+        placeholder: {
+            type: String,
+            default: () => ""
+        },
+        icon: {
+            type: String,
+            default: () => ("fa-solid fa-magnifying-glass")
+        }
+    },
+    setup(props, { emit }) {
+        return {};
+    }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/form/index.js b/resources/jscomposition/base/form/index.js
new file mode 100644
index 0000000000..8eec1e2f5b
--- /dev/null
+++ b/resources/jscomposition/base/form/index.js
@@ -0,0 +1,9 @@
+import Dropdown from "./Dropdown.vue";
+import InputLeading from "./InputLeading.vue";
+
+export default {}
+
+export {
+    Dropdown,
+    InputLeading
+}
\ No newline at end of file
diff --git a/resources/jscomposition/base/index.js b/resources/jscomposition/base/index.js
new file mode 100644
index 0000000000..ddbe2a67b6
--- /dev/null
+++ b/resources/jscomposition/base/index.js
@@ -0,0 +1,7 @@
+export * from "./buttons/index"
+export * from "./cards/index"
+export * from "./form/index"
+export * from "./table/index"
+export * from "./ui/index"
+
+export default {}
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
new file mode 100644
index 0000000000..638ba50f69
--- /dev/null
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
+    <table class="tw-w-full tw-border-collapse">
+      <thead class="tw-border-b tw-sticky tw-top-0 tw-bg-gray-100">
+        <tr>
+          <THeader
+            v-for="(column, index) in columns"
+            :key="index"
+            :columns="columns"
+            :column="column">
+            <slot :name="`theader-${column.field}`"> </slot>
+          </THeader>
+        </tr>
+      </thead>
+      <tbody>
+        <TRow v-for="(row, indexRow) in data" :key="indexRow">
+          <TCell
+            v-for="(column, indexColumn) in columns"
+            :key="indexColumn"
+            :columns="columns"
+            :column="column"
+            :row="row">
+            <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+          </TCell>
+        </TRow>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import THeader from "./THeader.vue";
+import TRow from "./TRow.vue";
+import TCell from "./TCell.vue";
+
+function generateUniqueId(length = 8) {
+  const charset =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let uniqueId = "";
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    uniqueId += charset[randomIndex];
+  }
+  return uniqueId;
+}
+
+export default defineComponent({
+  components: {
+    THeader,
+    TRow,
+    TCell,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
new file mode 100644
index 0000000000..37fa4d9dff
--- /dev/null
+++ b/resources/jscomposition/base/table/Pagination.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white tw-tw-px-4 tw-py-3 sm:tw-px-6">
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
+
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
+
+    <div>
+      <div
+        class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
+        <input
+          class="tw-block tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1 focus-visible:tw-outline-none placeholder:tw-text-gray-400"
+          placeholder="1" />
+      </div>
+    </div>
+
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
+
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
+
+    <div>
+      <span> 153 items </span>
+    </div>
+
+    <div>
+      <span> 15 per page</span>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
new file mode 100644
index 0000000000..e990f8d452
--- /dev/null
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -0,0 +1,46 @@
+<template>
+  <td class="tw-p-3">
+    <slot
+      v-if="!column.cellRenderer"
+      :columns="columns"
+      :column="column"
+      :row="row">
+      {{ getValue() }}
+    </slot>
+
+    <component v-else :is="column.cellRenderer()" />
+  </td>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { isFunction, get } from "lodash";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => {},
+    },
+    row: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(props, { emit }) {
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return get(props.row, props.column?.field) || "";
+    };
+    return {
+      getValue,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
new file mode 100644
index 0000000000..e7dee4d39e
--- /dev/null
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -0,0 +1,59 @@
+<template>
+  <th>
+    <div class="tw-flex tw-justify-between">
+      <div
+        class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left
+         tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
+        :style="{ width: width + 'px' }">
+        <slot>
+          {{ getValue() }}
+        </slot>
+      </div>
+      <div
+        :class="{ '!tw-cursor-col-resize': column.resizable }"
+        class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
+        @mousedown="column.resizable ? columnResize.startResize($event) : null">
+        &nbsp;
+      </div>
+    </div>
+  </th>
+</template>
+
+<script>
+import { isFunction } from "lodash";
+import { defineComponent, computed } from "vue";
+import { columnResizeComposable } from "./composables/columnComposable";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(props, { emit }) {
+    const columnResize = columnResizeComposable(props.column);
+
+    const width = computed(() => {
+      return props.column.width || 200;
+    });
+
+    const getValue = () => {
+      if (isFunction(props.column?.headerFormatter)) {
+        return props.column?.headerFormatter(props.columns);
+      }
+
+      return props.column.headerName || props.column.field || "";
+    };
+    return {
+      getValue,
+      width,
+      columnResize,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/TRow.vue b/resources/jscomposition/base/table/TRow.vue
new file mode 100644
index 0000000000..ad929a275a
--- /dev/null
+++ b/resources/jscomposition/base/table/TRow.vue
@@ -0,0 +1,15 @@
+<template>
+  <tr class="tw-border-b">
+    <slot></slot>
+  </tr>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js
new file mode 100644
index 0000000000..2ce357f833
--- /dev/null
+++ b/resources/jscomposition/base/table/composables/columnComposable.js
@@ -0,0 +1,52 @@
+import { ref, onUnmounted } from "vue";
+
+export default {};
+/**
+ * This composable only works with columns in AppTable
+ * @param {*} column is a ref variable, come from App Table
+ * @param {*} tableName
+ * @returns
+ */
+export const columnResizeComposable = (column) => {
+  const startX = ref(0);
+  const startWidth = ref(0);
+  const isResizing = ref(false);
+
+  //Resize the column value
+  const doResize = (event) => {
+    if (isResizing.value) {
+      const diff = event.pageX - startX.value;
+      const min = 63;
+      const currentWidth = Math.max(min, startWidth.value + diff);
+
+      column.width = currentWidth;
+    }
+  };
+
+  const stopResize = () => {
+    if (isResizing.value) {
+      document.removeEventListener("mousemove", doResize);
+      document.removeEventListener("mouseup", stopResize);
+      isResizing.value = false;
+    }
+  };
+
+  // Init the events in mousemove and finish in mouseup event
+  const startResize = (event, index) => {
+    isResizing.value = true;
+    startX.value = event.pageX;
+    startWidth.value = column.width || 200;
+
+    document.addEventListener("mousemove", doResize);
+    document.addEventListener("mouseup", stopResize);
+  };
+
+  onUnmounted(() => {
+    document.removeEventListener("mousemove", doResize);
+    document.removeEventListener("mouseup", stopResize);
+  });
+
+  return {
+    startResize,
+  };
+};
diff --git a/resources/jscomposition/base/table/index.js b/resources/jscomposition/base/table/index.js
new file mode 100644
index 0000000000..9a2e23b1cf
--- /dev/null
+++ b/resources/jscomposition/base/table/index.js
@@ -0,0 +1,9 @@
+import BaseTable from "./BaseTable.vue";
+import Pagination from "./Pagination.vue";
+import TCell from "./TCell.vue";
+import THeader from "./THeader.vue";
+import TRow from "./TRow.vue";
+
+export default {};
+
+export { BaseTable, Pagination, TCell, THeader, TRow };
diff --git a/resources/jscomposition/base/ui/Badge.vue b/resources/jscomposition/base/ui/Badge.vue
new file mode 100644
index 0000000000..f1f6c173b4
--- /dev/null
+++ b/resources/jscomposition/base/ui/Badge.vue
@@ -0,0 +1,24 @@
+<template>
+  <span
+    :class="`tw-inline-flex tw-items-center
+        tw-text-sm tw-border-1 tw-rounded-lg tw-border tw-border-${color}-300
+        tw-bg-${color}-50 tw-px-2 tw-py-1 tw-text-${color}-500`">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    color: {
+      type: String,
+      default: () => "gray",
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
new file mode 100644
index 0000000000..0e62cb7097
--- /dev/null
+++ b/resources/jscomposition/base/ui/index.js
@@ -0,0 +1,5 @@
+import Badge from "./Badge.vue";
+
+export default {};
+
+export { Badge };
diff --git a/resources/jscomposition/cases/casesMain/App.vue b/resources/jscomposition/cases/casesMain/App.vue
new file mode 100644
index 0000000000..fc6d013cb4
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="tw-p-4">
+    <RouterView></RouterView>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { RouterView } from "vue-router";
+
+export default defineComponent({
+  components: {
+    RouterView,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
new file mode 100644
index 0000000000..ff7a733cc7
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="tw-w-full tw-space-y-4">
+    <CaseFilter />
+
+    <BadgesSection v-model="badgesData" />
+
+    <BaseTable :columns="columnsConfig" :data="data" />
+
+    <Pagination />
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import CaseFilter from "./components/CaseFilter.vue";
+import BadgesSection from "./components/BadgesSection.vue";
+import { BaseTable, Pagination } from "../../base";
+import { getColumns } from "./config/columns";
+import { Breadcrums } from "../../system";
+import { badges } from "./config/badges";
+import { getData } from "./api";
+
+export default defineComponent({
+  props: {
+    listId: {
+      type: String,
+      default: () => "myCases",
+    },
+  },
+  components: {
+    CaseFilter,
+    BadgesSection,
+    BaseTable,
+    Pagination,
+    Breadcrums,
+  },
+  setup(props, { emit }) {
+    const badgesData = ref(badges);
+    const columnsConfig = ref();
+    const data = ref();
+
+    onMounted(async () => {
+      data.value = await getData();
+
+      columnsConfig.value = getColumns(props.listId);
+    });
+
+    return {
+      columnsConfig,
+      data,
+      badgesData,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
new file mode 100644
index 0000000000..71e136cc11
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="tw-w-full tw-space-y-4">
+    <Breadcrums />
+
+    <AppCounters
+      class="tw-w-full"
+      v-model="countersData"
+      @change="onChangeCounter" />
+
+    <RouterView :key="route.fullPath" />
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import AppCounters from "./components/AppCounters.vue";
+import { formatCounters } from "./utils/counters";
+import { getCounters } from "./api";
+import { Breadcrums } from "../../system";
+import { useRouter, useRoute } from "vue-router/composables";
+
+export default defineComponent({
+  components: {
+    AppCounters,
+    Breadcrums,
+  },
+  setup() {
+    const countersData = ref([]);
+    const router = useRouter();
+    const route = useRoute();
+
+    const onChangeCounter = (counter) => {
+      if (typeof counter.url == "function") {
+        return counter.url();
+      }
+
+      router.push({ path: counter.url }).catch((e) => {});
+    };
+
+    onMounted(async () => {
+      const resCounters = await getCounters();
+      countersData.value = formatCounters(resCounters);
+    });
+
+    return {
+      countersData,
+      route,
+      onChangeCounter,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/api/index.js b/resources/jscomposition/cases/casesMain/api/index.js
new file mode 100644
index 0000000000..b7cbc82bc6
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/api/index.js
@@ -0,0 +1,35 @@
+export default {};
+
+// Method to get counters - change with processmaker API
+export const getCounters = async () => {
+  const url = "http://localhost:3000/appcounters";
+  return {
+    myCases: 36,
+    inProgress: 20,
+    completed: 125,
+    allCases: 145,
+    allRequests: 777,
+  };
+};
+
+// Method to get data case list - change with processmaker API
+export const getData = async () => {
+  let objects_list = [];
+
+  for (let i = 0; i <= 31; i++) {
+    const obj = {
+      caseNumber: `${i}`,
+      caseTitle: `Case Title ${i}`,
+      process: `Process ${i}`,
+      task: `Task ${i}`,
+      participants: `Avatar ${i}`,
+      status: `badge ${i}`,
+      started: `21/21/${i}`,
+      completed: `22/22/${i}`,
+    };
+
+    objects_list.push(obj);
+  }
+
+  return objects_list;
+};
diff --git a/resources/jscomposition/cases/casesMain/components/AppCounters.vue b/resources/jscomposition/cases/casesMain/components/AppCounters.vue
new file mode 100644
index 0000000000..203bede000
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/AppCounters.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="tw-w-auto tw-flex tw-flex-col sm:tw-flex-row tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-4 sm:tw-py-0">
+    <ThreeSectionCard
+      v-for="(counter, index) in data"
+      :key="index"
+      :header="counter.header"
+      :body="counter.body"
+      :active="counter.active"
+      class="tw-w-full"
+      :color="counter.color"
+      :icon="counter.icon"
+      @click="onClick(counter, index)" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted } from "vue";
+import { ThreeSectionCard } from "../../../base/index";
+
+export default defineComponent({
+  components: { ThreeSectionCard },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ["input", "change", "update:value"],
+  setup(props, { emit }) {
+    const data = computed({
+      get() {
+        return props.value;
+      },
+      set(dt) {
+        emit("input", dt);
+      },
+    });
+
+    const onClick = (counter, idxCounter) => {
+      const dt = data.value.map((x, index) => {
+        x.active = false;
+
+        if (index == idxCounter) {
+          x.active = true;
+        }
+        return x;
+      });
+
+      data.value = dt;
+
+      emit("change", counter, idxCounter);
+    };
+
+    onMounted(() => {});
+
+    return {
+      data,
+      onClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue b/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
new file mode 100644
index 0000000000..03a1b14a30
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="tw-isolate tw-flex -tw-space-x-1 tw-overflow-hidden tw-justify-center">
+    <img
+      class="tw-relative tw-z-30 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      alt="" />
+    <img
+      class="tw-relative tw-z-20 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      alt="" />
+    <img
+      class="tw-relative tw-z-10 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+      alt="" />
+    <img
+      class="tw-relative tw-z-0 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      alt="" />
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
new file mode 100644
index 0000000000..af50e69d44
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="tw-flex tw-justify-center">
+    <Badge color="green"> In progress </Badge>
+  </div>
+</template>
+
+<script>
+import { Badge } from "../../../base/ui/index";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    Badge,
+  },
+  props: {},
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/BadgesSection.vue b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
new file mode 100644
index 0000000000..86065b6759
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="tw-flex tw-space-x-1">
+    <Badge
+      class="tw-text-xs"
+      color="gray"
+      v-for="(item, index) in data"
+      :key="index">
+      {{ item.label }}
+    </Badge>
+  </div>
+</template>
+<script>
+import { Badge } from "../../../base/ui/index";
+import { defineComponent, computed } from "vue";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    Badge,
+  },
+  setup(props, { emit }) {
+    const data = computed(() => {
+      return props.value;
+    });
+
+    return {
+      data,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/CaseFilter.vue b/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
new file mode 100644
index 0000000000..3d9e721653
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="tw-flex tw-space-x-2">
+    <div class="tw-w-full">
+      <InputLeading placeholder="Search here"></InputLeading>
+    </div>
+  </div>
+</template>
+<script>
+import { OutlineButton } from "../../../base/buttons/index";
+import { InputLeading } from "../../../base/form/index";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    OutlineButton,
+    InputLeading,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/config/badges.js b/resources/jscomposition/cases/casesMain/config/badges.js
new file mode 100644
index 0000000000..d2832c87ba
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/badges.js
@@ -0,0 +1,16 @@
+export default {};
+
+export const badges = [
+  {
+    label: "Status : In progress",
+  },
+  {
+    label: "Status : To do",
+  },
+  {
+    label: "Status : New Badge",
+  },
+  {
+    label: "Status : Badge Example",
+  },
+];
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
new file mode 100644
index 0000000000..531f9b6a60
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -0,0 +1,129 @@
+import BadgeContainer from "../components/BadgeContainer.vue";
+import AvatarContainer from "../components/AvatarContainer.vue";
+
+export default {};
+/**
+ * Example Column
+ * field: String
+ * headerName: String
+ * headerFormatter: callback
+ * resizable: Boolean
+ * visible: Callback
+ * formatter: Callback - Build the value in the cell
+ * width: Number
+ * cellRenderer: Object Vue to custom the cell
+ */
+
+// My cases: [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+// In Progress : [ Case#, Case Title, Process, Task, Participants, Status, Started]
+// Completed : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+// AllCases : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+// AllRequest : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+
+export const caseNumberColumn = () => ({
+  field: "caseNumber",
+  headerName: "Case #",
+  resizable: true,
+  width: 200,
+});
+
+export const caseTitleColumn = () => ({
+  field: "caseTitle",
+  headerName: "Case Title",
+  resizable: true,
+  width: 200,
+});
+
+export const processColumn = () => ({
+  field: "process",
+  headerName: "Process",
+  resizable: true,
+  width: 200,
+});
+
+export const taskColumn = () => ({
+  field: "task",
+  headerName: "Task",
+  resizable: true,
+  width: 200,
+});
+
+export const participantsColumn = () => ({
+  field: "participants",
+  headerName: "Participants",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => {
+    return AvatarContainer;
+  },
+});
+
+export const statusColumn = () => ({
+  field: "status",
+  headerName: "Status",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => {
+    return BadgeContainer;
+  },
+});
+
+export const startedColumn = () => ({
+  field: "started",
+  headerName: "Started",
+  resizable: true,
+  width: 200,
+});
+
+export const completedColumn = () => ({
+  field: "completed",
+  headerName: "Completed",
+  resizable: true,
+  width: 200,
+});
+
+export const getColumns = (type) => {
+  const columnsDefinition = {
+    "my-cases": [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn(),
+    ],
+    "in-progress": [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+    ],
+    completed: [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn(),
+    ],
+    "all-cases": [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn(),
+    ],
+  };
+
+  return columnsDefinition[type] || columnsDefinition.myCases;
+};
diff --git a/resources/jscomposition/cases/casesMain/config/index.js b/resources/jscomposition/cases/casesMain/config/index.js
new file mode 100644
index 0000000000..963420fb99
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/index.js
@@ -0,0 +1,2 @@
+export * from "./columns";
+export * from "./badges";
diff --git a/resources/jscomposition/cases/casesMain/main.js b/resources/jscomposition/cases/casesMain/main.js
new file mode 100644
index 0000000000..97c89abc83
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/main.js
@@ -0,0 +1,19 @@
+import App from "./App.vue";
+import { routes } from "./routes";
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  mode: "history",
+  base: "/",
+  routes,
+});
+
+new Vue({
+  el: "#cases-main",
+  router,
+  components: {
+    App,
+  },
+  render: (h) => h(App),
+});
diff --git a/resources/jscomposition/cases/casesMain/routes.js b/resources/jscomposition/cases/casesMain/routes.js
new file mode 100644
index 0000000000..e21e05406e
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/routes.js
@@ -0,0 +1,27 @@
+import CasesMain from "./CasesMain.vue";
+import CasesDataSection from "./CasesDataSection.vue";
+
+export default {};
+
+export const routes = [
+  {
+    name: "cases",
+    path: "/cases-main",
+    component: CasesMain,
+    props(route) {
+      return {};
+    },
+    children: [
+      {
+        name: "cases-request",
+        path: ":id?",
+        component: CasesDataSection,
+        props(route) {
+          return {
+            listId: route.params?.id || "my-cases",
+          };
+        },
+      },
+    ],
+  },
+];
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
new file mode 100644
index 0000000000..2ce87946f8
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -0,0 +1,46 @@
+export default {};
+import { t } from "i18next";
+
+export const formatCounters = (data) => {
+  const counters = [
+    {
+      header: t("My cases"),
+      body: data.myCases.toString(),
+      color: "amber",
+      icon: "fa-regular fa-user",
+      url: "/cases-main/my-cases",
+    },
+    {
+      header: t("In progress"),
+      body: data.inProgress.toString(),
+      color: "green",
+      icon: "fa-solid fa-list",
+      url: "/cases-main/in-progress",
+    },
+    {
+      header: t("Completed"),
+      body: data.completed.toString(),
+      color: "blue",
+      icon: "fa-regular fa-circle-check",
+      url: "/cases-main/completed",
+    },
+    {
+      header: t("All cases"),
+      body: data.allCases.toString(),
+      color: "purple",
+      icon: "fa-regular fa-clipboard",
+      url: "/cases-main/all-cases",
+    },
+    {
+      header: t("All requests"),
+      body: data.allRequests.toString(),
+      color: "gray",
+      icon: "fa-solid fa-play",
+      url: () => {
+        window.location.href = "/cases";
+      },
+    },
+  ];
+
+  return counters;
+};
diff --git a/resources/jscomposition/cases/casesMain/utils/index.js b/resources/jscomposition/cases/casesMain/utils/index.js
new file mode 100644
index 0000000000..d6a4a113d4
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/utils/index.js
@@ -0,0 +1 @@
+export * from "./counters";
diff --git a/resources/jscomposition/system/Breadcrums.vue b/resources/jscomposition/system/Breadcrums.vue
new file mode 100644
index 0000000000..a302a27c55
--- /dev/null
+++ b/resources/jscomposition/system/Breadcrums.vue
@@ -0,0 +1,46 @@
+<template>
+  <nav class="tw-flex tw-text-xs tw-text-gray-400 hover:tw-text-gray-500">
+    <ol class="tw-flex tw-items-center tw-space-x-1">
+      <li>
+        <div>
+          <a href="#" class="">
+            <i class="fa-solid fa-house"></i>
+            <span class="sr-only">Home</span>
+          </a>
+        </div>
+      </li>
+      <li v-for="page in pages" :key="page.name">
+        <div class="tw-flex tw-items-center">
+          <svg
+            class="tw-h-5 tw-w-5 tw-flex-shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            aria-hidden="true">
+            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+          </svg>
+          <a
+            :href="page.href"
+            class="tw-text-gray-500 hover:tw-text-gray-700"
+            :aria-current="page.current ? 'page' : undefined"
+            >{{ page.name }}</a
+          >
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    const pages = [
+      { name: "Projects", href: "#", current: false },
+      { name: "Project Nero", href: "#", current: true },
+    ];
+    return {
+      pages,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/index.js b/resources/jscomposition/system/index.js
new file mode 100644
index 0000000000..02e0d67feb
--- /dev/null
+++ b/resources/jscomposition/system/index.js
@@ -0,0 +1,5 @@
+import Breadcrums from "./Breadcrums.vue";
+
+export default {};
+
+export { Breadcrums };
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
new file mode 100644
index 0000000000..96c49d4dcb
--- /dev/null
+++ b/resources/views/cases/casesMain.blade.php
@@ -0,0 +1,22 @@
+@extends('layouts.layout')
+
+@section('title')
+@endsection
+
+@section('sidebar')
+@include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+@endsection
+
+@section('content')
+<div id="cases-main"></div>
+@endsection
+
+@section('js')
+<script src="{{mix('js/composition/cases/casesMain/main.js')}}"></script>
+@endsection
+
+@section('css')
+@endsection
diff --git a/resources/views/layouts/layout.blade.php b/resources/views/layouts/layout.blade.php
index 2fd4356d4c..301ddc5189 100644
--- a/resources/views/layouts/layout.blade.php
+++ b/resources/views/layouts/layout.blade.php
@@ -39,6 +39,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
     <link href="{{ mix('css/sidebar.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/tailwind.css') }}" rel="stylesheet">
     <link href="/css/bpmn-symbols/css/bpmn.css" rel="stylesheet">
     @yield('css')
     <script type="text/javascript">
diff --git a/routes/web.php b/routes/web.php
index c3848838a7..79f9f40450 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,6 +32,7 @@
 use ProcessMaker\Http\Controllers\ProcessesCatalogueController;
 use ProcessMaker\Http\Controllers\ProfileController;
 use ProcessMaker\Http\Controllers\RequestController;
+use ProcessMaker\Http\Controllers\CasesController;
 use ProcessMaker\Http\Controllers\Saml\MetadataController;
 use ProcessMaker\Http\Controllers\TaskController;
 use ProcessMaker\Http\Controllers\TemplateController;
@@ -136,6 +137,8 @@
     Route::post('/keep-alive', [LoginController::class, 'keepAlive'])->name('keep-alive');
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
+    // 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')
         ->where('type', 'all|in_progress|completed')
         ->middleware('no-cache');
diff --git a/webpack.mix.js b/webpack.mix.js
index 34d8ca2839..e26379255a 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -121,7 +121,7 @@ mix
   .js("resources/js/requests/mobile.js", "public/js/requests/mobile.js")
   .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/js/processes/translations/import.js", "public/js/processes/translations")
 
   .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")