diff --git a/ProcessMaker/Http/Controllers/Api/ProcessRequestController.php b/ProcessMaker/Http/Controllers/Api/ProcessRequestController.php
index 29f6df3b0e..a57f89cd23 100644
--- a/ProcessMaker/Http/Controllers/Api/ProcessRequestController.php
+++ b/ProcessMaker/Http/Controllers/Api/ProcessRequestController.php
@@ -839,4 +839,43 @@ public function endEventDestination(ProcessRequest $request)
 
         return response()->json(['message' => __('End event found'), 'data' => $data]);
     }
+
+    /**
+     * This endpoint returns requests by case number
+     *  
+     * @param Request $request
+     *
+     * @return ApiCollection
+     */
+    public function getRequestsByCase(Request $request, User $user = null)
+    {
+        if (!$user) {
+            $user = Auth::user();
+        }
+
+        // Validate the inputs, including optional ones
+        $request->validate([
+            'case_number' => 'required|integer',
+            'order_by' => 'nullable|string|in:id,name,status,user_id,initiated_at,participants',
+            'order_direction' => 'nullable|string|in:asc,desc',
+            'page' => 'nullable|integer|min:1',
+            'per_page' => 'nullable|integer',
+        ]);
+
+        $query = ProcessRequest::forUser($user);
+        
+        // Filter by case_number
+        $query->filterByCaseNumber($request);
+
+        // Apply ordering only if a valid order_by field is provided
+        $query->applyOrdering($request);
+        $response = $query->applyPagination($request);
+        
+        // Get activeTasks and participants
+        $response = $response->map(function ($processRequest) use ($request) {
+            return new ProcessRequestResource($processRequest);
+        });
+
+        return new ApiCollection($response);
+    }
 }
diff --git a/ProcessMaker/Http/Controllers/Api/TaskController.php b/ProcessMaker/Http/Controllers/Api/TaskController.php
index 2b25834bd5..93c167271a 100644
--- a/ProcessMaker/Http/Controllers/Api/TaskController.php
+++ b/ProcessMaker/Http/Controllers/Api/TaskController.php
@@ -53,6 +53,15 @@ class TaskController extends Controller
         'Completed' => 'CLOSED',
     ];
 
+    protected $defaultCase = [
+        'id', // Task #
+        'element_name', // Task Name
+        'user_id', // Participant
+        'process_id', // Process
+        'due_at', // Due At
+        'process_request_id', // Request Id #
+    ];
+
     /**
      * Display a listing of the resource.
      *
@@ -149,6 +158,55 @@ public function index(Request $request, $getTotal = false, User $user = null)
         return new TaskCollection($response);
     }
 
+    /**
+     * Get the task list related to the case
+     * @param Request $request
+     * @param User $user used by Saved Search package to return accurate counts
+     * @return array
+     */
+    public function indexCase(Request $request, User $user = null)
+    {
+        if (!$user) {
+            $user = Auth::user();
+        }
+
+        // Validate the inputs, including optional ones
+        $request->validate([
+            'case_number' => 'required|integer',
+            'status' => 'nullable|string|in:ACTIVE,CLOSED',
+            'order_by' => 'nullable|string|in:id,element_name,due_at,user.lastname,process.name',
+            'order_direction' => 'nullable|string|in:asc,desc',
+            'page' => 'nullable|integer|min:1',
+            'per_page' => 'nullable|integer',
+        ]);
+
+        // Get only the columns defined
+        $query = ProcessRequestToken::select($this->defaultCase);
+        // Filter by case_number
+        $query->filterByCaseNumber($request);
+        // Filter by status
+        $query->filterByStatus($request);
+        // Return the process information
+        $query->getProcess();
+        // Return the user information
+        $query->getUser();
+        // Filter only the task related to the user
+        $this->applyForCurrentUser($query, $user);
+        // Exclude non visible task
+        $this->excludeNonVisibleTasks($query, $request);
+        // Apply ordering only if a valid order_by field is provided
+        $query->applyOrdering($request);
+
+        try {
+            $response = $query->applyPagination($request);
+            $response->inOverdue = 0;
+        } catch (QueryException $e) {
+            return $this->handleQueryException($e);
+        }
+
+        return new TaskCollection($response);
+    }
+
     /**
      * Display the specified resource.
      * @TODO remove this method,view and route this is not a used file
diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
new file mode 100644
index 0000000000..e8a94dcbab
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -0,0 +1,199 @@
+<?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');
+    }
+    /**
+     * Cases Detail
+     *
+     * @param ProcessRequest $request
+     *
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function edit(ProcessRequest $request)
+    {
+        if (!request()->input('skipInterstitial') && $request->status === 'ACTIVE') {
+            $startEvent = $request->tokens()->orderBy('id')->first();
+            if ($startEvent) {
+                $definition = $startEvent->getDefinition();
+                $allowInterstitial = false;
+                if (isset($definition['allowInterstitial'])) {
+                    $allowInterstitial = filter_var(
+                        $definition['allowInterstitial'],
+                        FILTER_VALIDATE_BOOLEAN,
+                        FILTER_NULL_ON_FAILURE
+                    );
+                }
+                if ($allowInterstitial && $request->user_id == Auth::id() && request()->has('fromTriggerStartEvent')) {
+                    $active = $request->tokens()
+                        ->where('user_id', Auth::id())
+                        ->where('element_type', 'task')
+                        ->where('status', 'ACTIVE')
+                        ->orderBy('id')->first();
+
+                    // If the interstitial is enabled on the start event, then use it as the task
+                    if ($active) {
+                        $task = $allowInterstitial ? $startEvent : $active;
+                    } else {
+                        $task = $startEvent;
+                    }
+
+                    return redirect(route('tasks.edit', [
+                        'task' => $task->getKey(),
+                    ]));
+                }
+            }
+        }
+
+        $userHasCommentsForRequest = Comment::where('commentable_type', ProcessRequest::class)
+                ->where('commentable_id', $request->id)
+                ->where('body', 'like', '%{{' . \Auth::user()->id . '}}%')
+                ->count() > 0;
+
+        $requestMedia = $request->media()->get()->pluck('id');
+
+        $userHasCommentsForMedia = Comment::where('commentable_type', \ProcessMaker\Models\Media::class)
+                ->whereIn('commentable_id', $requestMedia)
+                ->where('body', 'like', '%{{' . \Auth::user()->id . '}}%')
+                ->count() > 0;
+
+        if (!$userHasCommentsForMedia && !$userHasCommentsForRequest) {
+            $this->authorize('view', $request);
+        }
+
+        $request->participants;
+        $request->user;
+        $request->summary = $request->summary();
+
+        if ($request->status === 'CANCELED' && $request->process->cancel_screen_id) {
+            $request->summary_screen = $request->process->cancelScreen;
+        } else {
+            $request->summary_screen = $request->getSummaryScreen();
+        }
+        $request->request_detail_screen = Screen::find($request->process->request_detail_screen_id);
+
+        $canCancel = Auth::user()->can('cancel', $request->processVersion);
+        $canViewComments = (Auth::user()->hasPermissionsFor('comments')->count() > 0) || class_exists(PackageServiceProvider::class);
+        $canManuallyComplete = Auth::user()->is_administrator && $request->status === 'ERROR';
+        $canRetry = false;
+
+        if ($canManuallyComplete) {
+            $retry = RetryProcessRequest::for($request);
+
+            $canRetry = $retry->hasRetriableTasks() &&
+                !$retry->hasNonRetriableTasks() &&
+                !$retry->isChildRequest();
+        }
+
+        $files = \ProcessMaker\Models\Media::getFilesRequest($request);
+
+        $canPrintScreens = $this->canUserPrintScreen($request);
+
+        $manager = app(ScreenBuilderManager::class);
+        event(new ScreenBuilderStarting($manager, ($request->summary_screen) ? $request->summary_screen->type : 'FORM'));
+
+        $addons = [];
+        $dataActionsAddons = [];
+
+        $isProcessManager = $request->process?->manager_id === Auth::user()->id;
+
+        $eligibleRollbackTask = null;
+        $errorTask = RollbackProcessRequest::getErrorTask($request);
+        if ($errorTask) {
+            $eligibleRollbackTask = RollbackProcessRequest::eligibleRollbackTask($errorTask);
+        }
+        $this->summaryScreenTranslation($request);
+        return view('cases.edit', compact(
+            'request',
+            'files',
+            'canCancel',
+            'canViewComments',
+            'canManuallyComplete',
+            'canRetry',
+            'manager',
+            'canPrintScreens',
+            'addons',
+            'isProcessManager',
+            'eligibleRollbackTask',
+            'errorTask',
+        ));
+    }
+
+    /**
+     * the user may or may not print forms
+     *
+     * @param ProcessRequest $request
+     * @return bool
+     */
+    private function canUserPrintScreen(ProcessRequest $request)
+    {
+        //validate user is administrator
+        if (Auth::user()->is_administrator) {
+            return true;
+        }
+
+        //validate user is participant or requester
+        if (in_array(Auth::user()->id, $request->participants()->get()->pluck('id')->toArray())) {
+            return true;
+        }
+
+        // Any user with permissions Edit Request Data, Edit Task Data and view All Requests
+        if (Auth::user()->can('view-all_requests') && Auth::user()->can('edit-request_data') && Auth::user()->can('edit-task_data')) {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Translates the summary screen strings
+     * @param ProcessRequest $request
+     * @return void
+     */
+    public function summaryScreenTranslation(ProcessRequest $request): void
+    {
+        if ($request->summary_screen) {
+            $processTranslation = new ProcessTranslation($request->process);
+            $translatedConf = $processTranslation->applyTranslations($request->summary_screen);
+            $request->summary_screen['config'] = $translatedConf;
+        }
+    }
+}
diff --git a/ProcessMaker/Http/Controllers/RequestController.php b/ProcessMaker/Http/Controllers/RequestController.php
index b4924debc7..d36004d1e0 100644
--- a/ProcessMaker/Http/Controllers/RequestController.php
+++ b/ProcessMaker/Http/Controllers/RequestController.php
@@ -45,7 +45,7 @@ public function index($type = null)
             $this->authorize('view-all_requests');
         }
 
-        $title = 'My Cases';
+        $title = 'My Request';
 
         $types = ['all'=>'All Requests', 'in_progress'=>'Requests In Progress', 'completed'=>'Completed Requests'];
 
diff --git a/ProcessMaker/Http/Middleware/GenerateMenus.php b/ProcessMaker/Http/Middleware/GenerateMenus.php
index 2105da72fb..d8db58df4d 100644
--- a/ProcessMaker/Http/Middleware/GenerateMenus.php
+++ b/ProcessMaker/Http/Middleware/GenerateMenus.php
@@ -36,10 +36,10 @@ public function handle(Request $request, Closure $next)
                     ['route' => 'process.browser.index', 'id' => 'process-browser']
                 )->active('process-browser/*');
             });
-            $menu->group(['prefix' => 'requests'], function ($request_items) {
+            $menu->group(['prefix' => 'cases'], function ($request_items) {
                 $request_items->add(
                     __('Cases'),
-                    ['route' => 'cases.index', 'id' => 'requests']
+                    ['route' => 'cases-main.index', 'id' => 'cases']
                 )->active('cases/*');
             });
             //@TODO change the index to the correct blade
@@ -140,25 +140,53 @@ public function handle(Request $request, Closure $next)
             $submenu = $menu->add(__('Processes'));
         });
         Menu::make('sidebar_request', function ($menu) {
-            $submenu = $menu->add(__('Cases'));
-            $submenu->add(__('My Cases'), [
-                'route' => ['cases_by_type', ''],
+            $submenu = $menu->add(__('Requests'));
+            $submenu->add(__('My Requests'), [
+                'route' => ['requests_by_type', ''],
                 'icon' => 'fa-id-badge',
             ]);
             $submenu->add(__('In Progress'), [
-                'route' => ['cases_by_type', 'in_progress'],
+                'route' => ['requests_by_type', 'in_progress'],
                 'icon' => 'fa-clipboard-list',
             ]);
             $submenu->add(__('Completed'), [
-                'route' => ['cases_by_type', 'completed'],
+                'route' => ['requests_by_type', 'completed'],
                 'icon' => 'fa-clipboard-check',
             ]);
             if (\Auth::check() && \Auth::user()->can('view-all_requests')) {
+                $submenu->add(__('All Requests'), [
+                    'route' => ['requests_by_type', 'all'],
+                    'icon' => 'fa-clipboard',
+                ]);
+            }
+        });
+
+        Menu::make('sidebar_cases', function ($menu) {
+            $submenu = $menu->add(__('Cases'));
+            $submenu->add(__('My Cases'), [
+                'route' => ['cases-main.index', ''],
+                'icon' => 'fa-user',
+            ]);
+            $submenu->add(__('In Progress'), [
+                'route' => ['cases-main.index', 'in_progress'],
+                'icon' => 'fa-list',
+            ]);
+            $submenu->add(__('Completed'), [
+                'route' => ['cases-main.index', 'completed'],
+                'icon' => 'fa-check-circle',
+            ]);
+            if (\Auth::check() && \Auth::user()->can('view-all_cases')) {
                 $submenu->add(__('All Cases'), [
-                    'route' => ['cases_by_type', 'all'],
+                    'route' => ['cases-main.index', 'all'],
                     'icon' => 'fa-clipboard',
                 ]);
             }
+            if (\Auth::check() && \Auth::user()->can('view-my_requests')) {
+                $submenu->add(__('My Requests'), [
+                    'route' => ['requests_by_type', ''],
+                    'icon' => 'fa-play',
+                ]);
+            }
         });
 
         Menu::make('sidebar_processes', function ($menu) {
diff --git a/ProcessMaker/Models/ProcessRequest.php b/ProcessMaker/Models/ProcessRequest.php
index 989521a8b9..6ddb886dcc 100644
--- a/ProcessMaker/Models/ProcessRequest.php
+++ b/ProcessMaker/Models/ProcessRequest.php
@@ -165,8 +165,6 @@ class ProcessRequest extends ProcessMakerModel implements ExecutionInstanceInter
         'participants',
     ];
 
-    const DEFAULT_CASE_TITLE = 'Case #{{_request.case_number}}';
-
     /**
      * Determine whether the item should be indexed.
      *
@@ -1002,7 +1000,7 @@ public function getCaseTitleFromProcess(): string
             $caseTitle = $this->process()->select('case_title')->first()->case_title;
         }
 
-        return $caseTitle ?: self::DEFAULT_CASE_TITLE;
+        return $caseTitle ?: $this->name;
     }
 
     /**
@@ -1091,4 +1089,36 @@ public function getElementDestination(): ?array
 
         return $endEvents->first()->elementDestination;
     }
+
+    /**
+     * Scope apply order
+     */
+    public function scopeApplyOrdering($query, $request)
+    {
+        $orderBy = $request->input('order_by', 'name');
+        $orderDirection = $request->input('order_direction', 'asc');
+
+        return $query->orderBy($orderBy, $orderDirection);
+    }
+
+    /**
+     * Scope apply pagination
+     */
+    public function scopeApplyPagination($query, $request)
+    {
+        $page = $request->input('page', 1);
+        $perPage = $request->input('per_page', 10);
+
+        return $query->paginate($perPage);
+    }
+
+    /**
+     * Scope to filter by case_number
+     */
+    public function scopeFilterByCaseNumber($query, $request)
+    {
+        $caseNumber = $request->input('case_number');
+
+        return $query->where('case_number', $caseNumber);
+    }
 }
diff --git a/ProcessMaker/Models/ProcessRequestToken.php b/ProcessMaker/Models/ProcessRequestToken.php
index 1b88fe7ca6..0a0b8c32c3 100644
--- a/ProcessMaker/Models/ProcessRequestToken.php
+++ b/ProcessMaker/Models/ProcessRequestToken.php
@@ -288,6 +288,70 @@ public function assignableUsers()
         return new TokenAssignableUsers($query, $this);
     }
 
+    /**
+     * Scope to filter by case_number through the processRequest relationship
+     */
+    public function scopeFilterByCaseNumber($query, $request)
+    {
+        $caseNumber = $request->input('case_number');
+
+        return $query->whereHas('processRequest', function ($query) use ($caseNumber) {
+            $query->where('case_number', $caseNumber);
+        });
+    }
+
+    /**
+     * Scope to filter by status
+     */
+    public function scopeFilterByStatus($query, $request)
+    {
+        $status = $request->input('status', 'ACTIVE');
+
+        return $query->where('status', $status);
+    }
+
+    /**
+     * Scope get process information
+     */
+    public function scopeGetProcess($query)
+    {
+        return $query->with(['process' => function ($query) {
+            $query->select('id', 'name');
+        }]);
+    }
+
+    /**
+     * Scope get user information
+     */
+    public function scopeGetUser($query)
+    {
+        return $query->with(['user' => function ($query) {
+            $query->select('id', 'firstname', 'lastname', 'username', 'avatar');
+        }]);
+    }
+
+    /**
+     * Scope apply order
+     */
+    public function scopeApplyOrdering($query, $request)
+    {
+        $orderBy = $request->input('order_by', 'due_at');
+        $orderDirection = $request->input('order_direction', 'asc');
+
+        return $query->orderBy($orderBy, $orderDirection);
+    }
+
+    /**
+     * Scope apply pagination
+     */
+    public function scopeApplyPagination($query, $request)
+    {
+        $page = $request->input('page', 1);
+        $perPage = $request->input('per_page', 10);
+
+        return $query->paginate($perPage);
+    }
+
     /**
      * Returns either the owner element or its properties
      *
diff --git a/ProcessMaker/Observers/UserObserver.php b/ProcessMaker/Observers/UserObserver.php
index 36c14ca046..d8e45ef942 100644
--- a/ProcessMaker/Observers/UserObserver.php
+++ b/ProcessMaker/Observers/UserObserver.php
@@ -37,6 +37,7 @@ public function created(User $user): void
     {
         $perList = [
             'view-process-catalog',
+            'view-my_requests',
         ];
         $permissionIds = Permission::whereIn('name', $perList)->pluck('id')->toArray();
         $user->permissions()->attach($permissionIds);
diff --git a/database/seeders/PermissionSeeder.php b/database/seeders/PermissionSeeder.php
index f0e3c0b198..8acb45e4da 100644
--- a/database/seeders/PermissionSeeder.php
+++ b/database/seeders/PermissionSeeder.php
@@ -3,7 +3,9 @@
 namespace Database\Seeders;
 
 use Illuminate\Database\Seeder;
+use ProcessMaker\Models\Group;
 use ProcessMaker\Models\Permission;
+use ProcessMaker\Models\User;
 
 class PermissionSeeder extends Seeder
 {
@@ -83,8 +85,10 @@ class PermissionSeeder extends Seeder
         'Username and Password' => [
             'edit-user-and-password',
         ],
-        'Requests' => [
+        'Cases and Requests' => [
+            'view-all_cases',
             'view-all_requests',
+            'view-my_requests',
             'edit-request_data',
             'edit-task_data',
         ],
@@ -114,16 +118,24 @@ class PermissionSeeder extends Seeder
         ],
     ];
 
+    private $defaultPermissions = [
+        'view-my_requests',
+    ];
+
     public function run($seedUser = null)
     {
         foreach ($this->permissionGroups as $groupName => $permissions) {
             foreach ($permissions as $permissionString) {
-                Permission::updateOrCreate([
+                $permission = Permission::updateOrCreate([
                     'name' => $permissionString,
                 ], [
                     'title' => ucwords(preg_replace('/(\-|_)/', ' ', $permissionString)),
                     'group' => $groupName,
                 ]);
+
+                if (in_array($permissionString, $this->defaultPermissions)) {
+                    $this->assignDefaultPermission($permission);
+                }
             }
         }
 
@@ -134,4 +146,26 @@ public function run($seedUser = null)
             $seedUser->save();
         }
     }
+
+    /**
+     * Assign default permission to users and groups.
+     */
+    private function assignDefaultPermission(Permission $permission): void
+    {
+        $userIds = User::nonSystem()->pluck('id');
+        $groupIds = Group::pluck('id');
+    
+        // Define the chunk size for the permission assignment
+        $chunkSize = 500;
+    
+        // Attach user IDs in chunks
+        $userIds->chunk($chunkSize)->each(function ($chunk) use ($permission) {
+            $permission->users()->attach($chunk);
+        });
+    
+        // Attach group IDs in chunks
+        $groupIds->chunk($chunkSize)->each(function ($chunk) use ($permission) {
+            $permission->groups()->attach($chunk);
+        });
+    }
 }
diff --git a/package.json b/package.json
index 9e92914283..faa7025532 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "@babel/eslint-parser": "^7.15.8",
         "@babel/preset-env": "^7.23.9",
         "accounting": "^0.4.1",
+        "autoprefixer": "^10.4.20",
         "babel-plugin-istanbul": "^6.1.1",
         "chartjs-plugin-colorschemes": "^0.4.0",
         "cross-env": "^7.0.3",
@@ -38,9 +39,11 @@
         "laravel-mix": "^6.0.49",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.45",
+        "postcss": "^8.4.45",
         "resolve-url-loader": "^3.1.2",
         "sass": "^1.77.4",
         "sass-loader": "^12.6.0",
+        "tailwindcss": "^3.4.10",
         "vue-loader": "^15.10.0"
     },
     "dependencies": {
@@ -60,7 +63,6 @@
         "@processmaker/vue-form-elements": "0.59.0",
         "@processmaker/vue-multiselect": "2.3.0",
         "@tinymce/tinymce-vue": "2.0.0",
-        "autoprefixer": "10.4.5",
         "axios": "^0.27.2",
         "bootstrap": "^4.5.3",
         "bootstrap-vue": "^2.18.1",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..33ad091d26
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index aafdb15225..9e49f82b07 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -382,6 +382,13 @@ export default {
   right: 7px;
   background-color: #F2F8FE
 }
+.pm-table-ellipsis-column{
+  text-transform: capitalize;
+}
+.pm-table-column-header-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .pm-table-ellipsis-column .pm-table-filter-button {
   opacity: 0;
   visibility: hidden;
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index ef273f8e53..dabd3b3b8a 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -275,6 +275,13 @@ export default {
         return this.$props.columns;
       }
       return [
+        {
+          label: "Request ID",
+          field: "id",
+          sortable: true,
+          default: true,
+          width: 115,
+        },
         {
           label: "Case #",
           field: "case_number",
@@ -408,7 +415,7 @@ export default {
       return `
       <a href="${this.openRequest(value, 1)}"
          class="text-nowrap">
-         ${value.case_title_formatted || value.case_title || ""}
+         ${value.case_title_formatted || value.case_title || value.name}
       </a>`;
     },
     formatParticipants(participants) {
@@ -622,15 +629,6 @@ export default {
   }
 };
 </script>
-<style>
-  .pm-table-ellipsis-column{
-    text-transform: uppercase;
-  }
-  .pm-table-column-header-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>
 <style lang="scss" scoped>
   @import url("../../../sass/_scrollbar.scss");
 </style>
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 5db813ee4d..04181f5e63 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -917,7 +917,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .tasks-table-card {
   padding: 0;
 }
@@ -944,10 +944,6 @@ export default {
   background-color: #EDF1F6;
   color: #888;
 }
-.pm-table-column-header-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 </style>
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");
diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
new file mode 100644
index 0000000000..d27a27ec11
--- /dev/null
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -0,0 +1,31 @@
+<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.prevent.stop="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..6ad84225d4
--- /dev/null
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -0,0 +1,269 @@
+<template>
+  <div
+    ref="inputRef"
+    class="tw-relative">
+    <slot
+      v-bind="{
+        toogleShow,
+        data,
+      }"
+      name="input">
+      <button
+        class="tw-flex tw-w-full tw-justify-between tw-items-center tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset
+        tw-ring-gray-300 tw-rounded-lg focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
+        @click.prevent.stop="toogleShow">
+        <span>{{ data?.label || data?.value }} </span>
+
+        <i class="fas fa-chevron-down" />
+      </button>
+    </slot>
+
+    <transition :name="animation">
+      <div
+        v-if="show"
+        ref="containerRef"
+        class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
+        :style="{ width: `${widthContainer}px`, top: `${top}px` }">
+        <ul class="tw-list-none tw-overflow-hidden tw-rounded">
+          <slot
+            name="options"
+            v-bind="{
+              options: optionsModel,
+              data,
+              onClick,
+            }">
+            <li
+              v-for="(option, index) in optionsModel"
+              :key="index"
+              class="hover:tw-bg-gray-200"
+              @click.prevent.stop="onClick(option, index)">
+              <slot
+                name="option"
+                v-bind="{
+                  option,
+                  data,
+                }">
+                <span
+                  :class="{
+                    'tw-bg-gray-300': option?.value === data?.value,
+                  }"
+                  class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+                  {{ option.label || option.value }}
+                </span>
+              </slot>
+            </li>
+          </slot>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
+} from "vue";
+/**
+ * <Dropdown
+ *  animation="fade"
+ *  :options='{"label":"Label 1" , "value": "1"}'
+ *  :value="model"
+ * />
+ *
+ * slot::input -> dropdown button
+ * slot:option -> Custom component dropdown option
+ */
+
+export default defineComponent({
+  props: {
+    animation: {
+      type: String,
+      default: () => "fade",
+    },
+    // Example input options {"label":"Label 1" , "value": "1"}
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    value: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  emits: ["input", "change"],
+  setup(props, { emit }) {
+    const inputRef = ref();
+    const containerRef = ref();
+
+    const show = ref(false);
+    const widthContainer = ref(100);
+    const top = ref(0);
+
+    const data = computed({
+      get() {
+        return props.value;
+      },
+      set(value) {
+        emit("input", value);
+      },
+    });
+
+    const optionsModel = computed({
+      get() {
+        return props.options;
+      },
+      set(val) {
+        emit("update:options", val);
+      },
+    });
+
+    const onClick = (option) => {
+      show.value = false;
+      data.value = option;
+
+      emit("change", option);
+    };
+
+    /**
+     * This method calculates the new position for dropdown menu
+     * Considers:
+     * - Space down in relation to viewport
+     *
+     * Increase other use cases
+     */
+    const calculatePosition = () => {
+      const rect = inputRef.value?.getBoundingClientRect();
+      const containerRect = containerRef.value.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      widthContainer.value = rect.width || 100;
+
+      let container = inputRef.value.parentElement;
+      let topPosition = 0;
+
+      while (container && container !== document.body) {
+        // If the container has scroll, we add their offsets
+        if (container.scrollTop || container.scrollLeft) {
+          topPosition += container.scrollTop;
+        }
+        container = container.parentElement;
+      }
+
+      // Check: Does the dropdown menu have space down?
+      if (rect.top + containerRect.height > viewportHeight) {
+        topPosition = rect.top - containerRect.height;
+
+        top.value = topPosition;
+        return;
+      }
+
+      top.value = inputRef.value.offsetTop - topPosition;
+    };
+
+    const addBodyListener = () => {
+      show.value = false;
+    };
+
+    const toogleShow = ($event) => {
+      show.value = !show.value;
+
+      nextTick(() => {
+        calculatePosition($event);
+      });
+    };
+
+    onMounted(() => {
+      document.body.addEventListener("click", addBodyListener);
+    });
+
+    onUnmounted(() => {
+      document.body.removeEventListener("click", addBodyListener);
+    });
+
+    return {
+      containerRef,
+      show,
+      data,
+      inputRef,
+      optionsModel,
+      top,
+      widthContainer,
+      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..d65427d1b6
--- /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-lg 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: () => ("fas fa-search")
+        }
+    },
+    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..6e0b02a8a4
--- /dev/null
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -0,0 +1,120 @@
+<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 tw-table-fixed">
+      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
+        <tr>
+          <THeader
+            v-for="(column, index) in columns"
+            :key="index"
+            :columns="columns"
+            :column="column"
+          >
+            <slot :name="`theader-${column.field}`" />
+            <template #filter>
+              <slot :name="`theader-filter-${column.field}`" />
+            </template>
+          </THeader>
+          <th class="tw-sticky tw-w-0" />
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="(row, indexRow) in data">
+          <TRow :key="`row-${indexRow}`">
+            <template #[`cell`]>
+              <TCell
+                v-for="(column, indexColumn) in columns"
+                :key="indexColumn"
+                :columns="columns"
+                :column="column"
+                :row="row"
+                @toogleContainer="(e)=>toogleContainer(e, indexRow)"
+              >
+                <slot :name="`tcell-${indexRow}-${column.field}`" />
+              </TCell>
+            </template>
+            <template
+              v-if="`checkEllpisisMenu(${indexRow})`"
+              #[`menu`]
+            >
+              <slot :name="`ellipsis-menu-${indexRow}`" />
+            </template>
+          </TRow>
+          <ContainerRow
+            v-if="`checkContainerRow(${indexRow})`"
+            :key="`container-${indexRow}`"
+            :show-row="getShowContainer(indexRow)"
+            :columns="columns"
+          >
+            <slot :name="`container-row-${indexRow}`" />
+          </ContainerRow>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent, ref, onUpdated, useSlots, computed,
+} from "vue";
+import THeader from "./THeader.vue";
+import TRow from "./TRow.vue";
+import TCell from "./TCell.vue";
+import ContainerRow from "./ContainerRow.vue";
+
+export default defineComponent({
+  components: {
+    THeader,
+    TRow,
+    TCell,
+    ContainerRow,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const slots = useSlots();
+    const configRow = ref([]);
+    const showContainer = ref(false);
+
+    const toogleContainer = (toogle, index) => {
+      configRow.value.splice(index, 1, { showContainer: toogle });
+    };
+
+    const checkContainerRow = computed((index) => Object.hasOwn(slots, `container-row-${index}`));
+    const checkEllpisisMenu = computed((index) => Object.hasOwn(slots, `ellipsis-menu-${index}`));
+
+    onUpdated(async () => {
+      if (configRow.value.length === 0) {
+        configRow.value = props.data ? structuredClone(props.data).fill({ showContainer: false }) : [];
+      }
+    });
+
+    const getShowContainer = (index) => configRow.value[index]?.showContainer;
+
+    return {
+      configRow,
+      showContainer,
+      toogleContainer,
+      getShowContainer,
+      slots,
+      checkContainerRow,
+      checkEllpisisMenu,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/ContainerRow.vue b/resources/jscomposition/base/table/ContainerRow.vue
new file mode 100644
index 0000000000..0e960b83b0
--- /dev/null
+++ b/resources/jscomposition/base/table/ContainerRow.vue
@@ -0,0 +1,23 @@
+<template>
+  <tr
+    v-if="showRow"
+    class="tw-border-b"
+  >
+    <td :colspan="columns.length">
+      <slot />
+    </td>
+  </tr>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: ["showRow", "columns"],
+  setup(props) {
+    return {
+      view: props.showRow,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
new file mode 100644
index 0000000000..81aba43a3c
--- /dev/null
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -0,0 +1,70 @@
+<template>
+  <td
+    class="tw-relative"
+    :style="{ width: `${column.width}px` }"
+  >
+    <div v-if="!column.cellRenderer">
+      <slot
+        :columns="columns"
+        :column="column"
+        :row="row"
+      >
+        <div class="tw-p-3">
+          {{ getValue() }}
+        </div>
+      </slot>
+    </div>
+    <component
+      :is="getComponent()"
+      v-else
+      v-bind="getParams()"
+      :columns="columns"
+      :column="column"
+      :row="row"
+      @collapseContainer="collapseContainer"
+    />
+  </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) || "";
+    };
+
+    const getComponent = () => props.column.cellRenderer().component || props.column.cellRenderer();
+
+    const getParams = () => props.column.cellRenderer().params || {};
+
+    const collapseContainer = (value) => emit("toogleContainer", value);
+
+    return {
+      getComponent,
+      getParams,
+      getValue,
+      collapseContainer,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
new file mode 100644
index 0000000000..be3c1e0588
--- /dev/null
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -0,0 +1,58 @@
+<template>
+  <th
+    class="tw-relative"
+    :style="{ width: width + 'px' }">
+    <div
+      class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis">
+      <slot>
+        {{ getValue() }}
+      </slot>
+    </div>
+
+    <div class="tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-5 tw-flex tw-items-center">
+      <slot name="filter" />
+    </div>
+
+    <div
+      class="tw-absolute tw-right-0 tw-top-0 tw-w-1
+        tw-h-full tw-cursor-col-resize tw-select-none tw-border-r tw-border-gray-400"
+      @mousedown="column.resizable ? columnResize.startResize($event) : null" />
+  </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(() => props.column.width || 200);
+
+    const getValue = () => {
+      if (isFunction(props.column?.headerFormatter)) {
+        return props.column?.headerFormatter(props.columns);
+      }
+
+      return props.column.header || 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..7506895657
--- /dev/null
+++ b/resources/jscomposition/base/table/TRow.vue
@@ -0,0 +1,25 @@
+<template>
+  <tr
+    class="tw-border-b tw-relative"
+    @mouseover="menu = true"
+    @mouseleave="menu = false"
+  >
+    <slot :name="`cell`" />
+    <template v-if="menu">
+      <slot :name="`menu`" />
+    </template>
+  </tr>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup() {
+    const menu = ref(false);
+    return {
+      menu,
+    };
+  },
+});
+</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..dde1e46c5c
--- /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 = 30;
+      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..c290a40e63
--- /dev/null
+++ b/resources/jscomposition/base/table/index.js
@@ -0,0 +1,9 @@
+import BaseTable from "./BaseTable.vue";
+import Pagination from "../../system/table/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/AppAvatar.vue b/resources/jscomposition/base/ui/AppAvatar.vue
new file mode 100644
index 0000000000..185a9a4eb8
--- /dev/null
+++ b/resources/jscomposition/base/ui/AppAvatar.vue
@@ -0,0 +1,35 @@
+<template>
+  <span
+    v-if="initials"
+    class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+      tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+    @click.prevent="$emit('click')">
+    <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+  </span>
+
+  <img
+    v-else
+    class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 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=""
+    @click.prevent="$emit('click')">
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    src: {
+      type: String,
+      default: () => null,
+    },
+    initials: {
+      type: String,
+      default: () => "NA",
+    },
+  },
+  setup(props, { emit }) {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
new file mode 100644
index 0000000000..df33d1e9df
--- /dev/null
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -0,0 +1,206 @@
+<template>
+  <div
+    ref="tooltipWrapper"
+    class="tw-relative"
+    @mouseenter="($event) => hover && showTooltip($event)"
+    @mouseleave="($event) => hover && hideTooltip($event)">
+    <slot name="default" />
+    <div
+      v-if="visible"
+      ref="tooltip"
+      class="tooltip-content"
+      :style="{
+        top: `${tooltipPosition.top}px`,
+        left: `${tooltipPosition.left}px`,
+      }"
+      :class="calculatedPosition">
+      <slot name="content">
+        {{ content }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref, watch, onMounted, nextTick, onUnmounted, computed,
+} from "vue";
+
+export default {
+  props: {
+    content: {
+      type: String,
+    },
+    hover: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      default: "top", // options: 'top', 'bottom', 'left', 'right'
+      validator: (value) => ["top", "bottom", "left", "right"].includes(value),
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const tooltip = ref(null);
+    const tooltipWrapper = ref(null);
+    const tooltipPosition = ref({ top: 0, left: 0 });
+    const visible = props.hover
+      ? ref(false)
+      : computed({
+        get: () => props.value,
+        set: (val) => {
+          emit("input", val);
+        },
+      });
+    const calculatedPosition = ref(props.position);
+
+    const calculatePosition = () => {
+      const wrapperRect = tooltipWrapper.value.getBoundingClientRect();
+      const tooltipRect = tooltip.value.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let top = 0;
+      let left = 0;
+
+      // Position calculated dynamicaly
+      switch (props.position) {
+        case "top":
+          top = wrapperRect.top - tooltipRect.height - 10;
+          left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          // Verify space top
+          if (top < 0) {
+            calculatedPosition.value = "bottom";
+            top = wrapperRect.bottom + 10;
+          }
+          break;
+        case "left":
+          top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
+          left = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (left < 0) {
+            calculatedPosition.value = "right";
+            left = wrapperRect.right + 10;
+          }
+          break;
+        case "right":
+          top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
+          left = wrapperRect.right + 10;
+          // Verify space right
+          if (left + tooltipRect.width > viewportWidth) {
+            calculatedPosition.value = "left";
+            left = wrapperRect.left - tooltipRect.width - 10;
+          }
+          break;
+        case "bottom":
+        default:
+          top = wrapperRect.bottom + 10;
+          left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          // Verify space bottom
+          if (top + tooltipRect.height > viewportHeight) {
+            calculatedPosition.value = "top";
+            top = wrapperRect.top - tooltipRect.height - 10;
+          }
+
+          const leftaux = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (leftaux < 0) {
+            calculatedPosition.value = "right-bottom";
+            left = wrapperRect.right + 100;
+          }
+      }
+
+      // Verify if tooltip leaves the viewport
+      top = Math.max(10, Math.min(top, viewportHeight - tooltipRect.height - 10));
+      left = Math.max(10, Math.min(left, viewportWidth - tooltipRect.width - 10));
+
+      tooltipPosition.value = { top, left };
+    };
+
+    const showTooltip = () => {
+      visible.value = true;
+      nextTick(() => {
+        calculatePosition();
+      });
+    };
+
+    const hideTooltip = () => {
+      visible.value = false;
+    };
+
+    const clickIntoPopover = (event) => {
+      if (!tooltipWrapper.value.contains(event.target)) {
+        hideTooltip();
+      }
+    };
+
+    // Recalculated position when property visible changes
+    const unwatch = watch(
+      () => props.value,
+      (newVal) => {
+        if (newVal) {
+          showTooltip();
+        } else {
+          hideTooltip();
+        }
+      },
+    );
+
+    onMounted(() => {
+      if (props.visible) {
+        showTooltip();
+      }
+
+      !props.hover && document.body.addEventListener("click", clickIntoPopover);
+    });
+
+    onUnmounted(() => {
+      document.body.removeEventListener("click", clickIntoPopover);
+      unwatch();
+    });
+
+    return {
+      tooltip,
+      tooltipWrapper,
+      tooltipPosition,
+      visible,
+      calculatedPosition,
+      showTooltip,
+      hideTooltip,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tooltip-content {
+  position: fixed;
+  z-index: 1000;
+}
+
+.tooltip-content.top {
+  transform: translateX(-50%);
+}
+
+.tooltip-content.bottom {
+  transform: translateX(-50%);
+}
+
+.tooltip-content.left {
+  transform: translateY(-50%);
+}
+
+.tooltip-content.right {
+  transform: translateY(-50%);
+}
+
+.tooltip-content.right-bottom {
+  transform: translateY(-50%);
+  transform: translateX(-50%);
+}
+</style>
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/CollapsableContainer.vue b/resources/jscomposition/base/ui/CollapsableContainer.vue
new file mode 100644
index 0000000000..b3fc74dcae
--- /dev/null
+++ b/resources/jscomposition/base/ui/CollapsableContainer.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="tw-flex tw-transition-all tw-duration-500"
+    :class="{ '!tw-w-0' : collapse}">
+    <slot name="left">
+      <div class="tw-relative tw-group tw-w-3">
+        <div class="tw-transition tw-duration-250 tw-w-[2px] tw-h-full">
+          <div
+            :class="{
+              'tw-visible' : collapse,
+              'tw-invisible' : !collapse,
+            }"
+            class="hover:tw-cursor-pointer tw-z-10
+            tw-transition-all tw-duration-250 group-hover:tw-ease-in
+            tw-flex tw-justify-center tw-items-center tw-text-[8px]
+            tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-bg-white group-hover:tw-visible
+            tw-absolute tw-left-[-12px] tw-top-[41px] tw-w-6 tw-h-6 tw-rounded-full"
+            @click.prevent="onClick">
+            <i
+              class="fa"
+              :class="{ 'fa-chevron-right' : !collapse, 'fa-chevron-left' : collapse }" />
+          </div>
+        </div>
+      </div>
+    </slot>
+
+    <div
+      class="tw-flex tw-w-full tw-transition-all tw-duration-500"
+      :class="{
+        'tw-opacity-0' : collapse,
+        'tw-opacity-100' : !collapse,
+      }">
+      <slot
+        name="default" />
+    </div>
+
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const collapse = ref(false);
+
+const onClick = () => {
+  collapse.value = !collapse.value;
+};
+</script>
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
new file mode 100644
index 0000000000..3ecdf6bdb9
--- /dev/null
+++ b/resources/jscomposition/base/ui/index.js
@@ -0,0 +1,10 @@
+import Badge from "./Badge.vue";
+import AppAvatar from "./AppAvatar.vue";
+import AppPopover from "./AppPopover.vue";
+import CollapsableContainer from "./CollapsableContainer.vue";
+
+export default {};
+
+export {
+  Badge, AppAvatar, AppPopover, CollapsableContainer,
+};
diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
new file mode 100644
index 0000000000..1f982e1a0c
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -0,0 +1,58 @@
+import { api } from "../variables";
+
+const getData = async () => {
+  const objectsList = [];
+
+  for (let i = 0; i <= 31; i += 1) {
+    const obj = {
+      id: `${i}`,
+      case_number: 100,
+      element_name: `Case Title ${i}`,
+      process: {
+        name: `Process ${i}`,
+      },
+      user: {
+        fullname: `Avatar ${i}`,
+      },
+      current_task: `Task ${i}`,
+      status: "IN_PROGRESS",
+      started: `21/21/${i}`,
+      due_at: `21/21/${i}`,
+      completed_date: `21/21/${i}`,
+      screen_id: 4,
+    };
+
+    objectsList.push(obj);
+  }
+
+  return objectsList;
+};
+
+export const getDataRequests = async ({ params, pagination }) => {
+  const response = await api.get("requests-by-case", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
+
+  return response.data.data;
+};
+
+export const getDataTask = async ({ params, pagination }) => {
+  const response = await api.get("tasks-by-case/", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
+
+  return response.data.data;
+};
+const getScreenData = (id) => {
+  const response = ProcessMaker.apiClient.get(`screens/${id}`);
+
+  return response;
+};
+
+export { getData, getScreenData };
diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
new file mode 100644
index 0000000000..d244d7550e
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
@@ -0,0 +1,50 @@
+<template>
+  <Tabs
+    :tab-default="tabDefault"
+    :tabs="tabs"
+  />
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import Tabs from "./Tabs.vue";
+import TaskTable from "./TaskTable.vue";
+import RequestTable from "./RequestTable.vue";
+import TabHistory from "./TabHistory.vue";
+import CompletedForms from "./CompletedForms.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: CompletedForms,
+      },
+      {
+        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: TabHistory,
+      },
+      {
+        name: translate.t("Requests"), href: "#requests", current: "requests", show: true, content: RequestTable,
+      },
+    ];
+
+    return {
+      tabs,
+      tabDefault,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
new file mode 100644
index 0000000000..df5fae7851
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <BaseTable
+      id="completed-forms"
+      :columns="columnsConfig"
+      :data="data"
+    >
+      <template
+        v-for="(item, index) in data"
+        #[`container-row-${index}`]
+      >
+        <display-form
+          :key="`display-${index}`"
+          :data="item"
+        />
+      </template>
+      <template
+        v-for="(item, index) in data"
+        #[`ellipsis-menu-${index}`]
+      >
+        <ellipsis-menu
+          :key="`ellipsis-${index}`"
+          :data="item"
+        />
+      </template>
+    </BaseTable>
+    <Pagination />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { BaseTable, Pagination } from "../../../base";
+import DisplayForm from "./DisplayForm.vue";
+import EllipsisMenu from "./EllipsisMenu.vue";
+import { getData } from "../api/index";
+import { getColumns } from "../config/columns";
+
+export default defineComponent({
+  components: {
+    BaseTable, Pagination, DisplayForm, EllipsisMenu,
+  },
+  setup() {
+    const data = ref(null);
+    const columnsConfig = ref(null);
+
+    onMounted(async () => {
+      data.value = await getData();
+      columnsConfig.value = getColumns("completed_forms");
+    });
+
+    return {
+      data,
+      columnsConfig,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/DisplayForm.vue b/resources/jscomposition/cases/casesDetail/components/DisplayForm.vue
new file mode 100644
index 0000000000..3ffb06bc86
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/DisplayForm.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="tw-py-10 tw-px-32 tw-max-h-[450px] tw-overflow-auto">
+    <vue-form-renderer
+      v-if="screen !== null"
+      v-model="previewData"
+      :config="screen.config"
+      :computed="screen.computed"
+      :custom-css="screen.custom_css"
+      :watchers="screen.watchers"
+      :show-errors="true"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from "vue";
+import { getScreenData } from "../api/index";
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const previewData = ref({});
+    const screen = ref(null);
+
+    const getScreen = (screenId) => {
+      Promise.resolve(getScreenData(screenId)).then((response) => { screen.value = response.data; });
+    };
+
+    onMounted(() => {
+      getScreen(props.data?.screen_id);
+    });
+
+    return {
+      screen,
+      previewData,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue b/resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue
new file mode 100644
index 0000000000..4376c3bf79
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue
@@ -0,0 +1,54 @@
+<template>
+  <td class="tw-sticky tw-w-0 tw-right-0 tw-top-0">
+    <div class="tw-float-right tw-relative tw-right-4">
+      <button
+        v-for="item in menuOptions"
+        :key="item.menu"
+        type="button"
+        class="tw-rounded-lg tw-bg-white tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-600 tw-shadow-sm
+        tw-ring-1 tw-ring-gray-300 hover:tw-bg-gray-50 tw-gap-2"
+        @click="executeCallback(item)"
+      >
+        <i
+          class="tw-text-xl tw-text-gray-600"
+          :class="item.icon"
+        />
+      </button>
+    </div>
+  </td>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const onPrint = () => {
+      const { data } = props;
+      window.open(`/requests/${data.case_number}/task/${data.id}/screen/${data.screen_id}`);
+    };
+
+    const menuOptions = [
+      {
+        icon: "fa fa-print",
+        callback: onPrint,
+        name: "print",
+      },
+    ];
+
+    const executeCallback = (item) => item.callback();
+
+    return {
+      menuOptions,
+      executeCallback,
+      onPrint,
+    };
+  },
+});
+</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..c3b38c5c19
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <SortTable
+      id="request-table"
+      :columns="columnsConfig"
+      :data="data"
+      @changeFilter="onChangeFilter" />
+    <Pagination
+      :total="dataPagination.total"
+      :page="dataPagination.page"
+      :pages="dataPagination.pages" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { SortTable, Pagination } from "../../../system";
+import { getDataRequests } from "../api/index";
+import { getColumns } from "../config/columns";
+import { getRequestId } from "../variables";
+
+export default defineComponent({
+  components: { SortTable, Pagination },
+  setup() {
+    const data = ref(null);
+    const columnsConfig = ref(null);
+    const dataPagination = ref({
+      total: 15,
+      page: 1,
+      pages: 1,
+      perPage: 15,
+    });
+
+    const formatData = (filter) => ({
+      params: {
+        case_number: getRequestId(),
+        include: "participants,activeTasks",
+        ...filter,
+      },
+      pagination: {
+        page: dataPagination.value.page,
+        perPage: dataPagination.value.perPage,
+      },
+    });
+
+    const onChangeFilter = async (dataFilter) => {
+      data.value = await getDataRequests(formatData({
+        order_by: dataFilter.field,
+        order_direction: dataFilter.filter,
+      }));
+    };
+
+    onMounted(async () => {
+      data.value = await getDataRequests(formatData({}));
+      columnsConfig.value = getColumns("requests");
+    });
+
+    return {
+      data,
+      dataPagination,
+      columnsConfig,
+      formatData,
+      onChangeFilter,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/TabHistory.vue b/resources/jscomposition/cases/casesDetail/components/TabHistory.vue
new file mode 100644
index 0000000000..6a8adf283a
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/TabHistory.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-gap-2">
+    <span>{{ processName }}</span>
+    <TimeLine
+      :commentable_id="commentableId"
+      :commentable_type="comentableType"
+      :adding="false"
+      :readonly="status === 'COMPLETED'"
+      :timeline="false" />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+import TimeLine from "../../../../js/components/Timeline.vue";
+import {
+  getRequestId, getRequestStatus, getComentableType, getProcessName,
+} from "../variables";
+
+export default defineComponent({
+  components: { TimeLine },
+  setup() {
+    const status = ref(getRequestStatus());
+    const commentableId = ref(getRequestId());
+    const comentableType = ref(getComentableType());
+    const processName = ref(getProcessName());
+    return {
+      status,
+      commentableId,
+      comentableType,
+      processName,
+    };
+  },
+});
+</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..5c9cc509c6
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/Tabs.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-pointer-events-auto">
+    <nav
+      class="tw-mb-px tw-flex tw-space-x-2 tw-border-b tw-border-gray-300"
+      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-grow tw-overflow-hidden">
+      <slot :name="`${tabSelected}`">
+        <component :is="content" />
+      </slot>
+    </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..60276e8a0a
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-w-full tw-py-3 tw-overflow-hidden tw-space-y-3">
+    <SortTable
+      id="task-table"
+      :columns="columnsConfig"
+      :data="data"
+      class="tw-grow tw-overflow-y-scroll tw-overflow-hidden"
+      @changeFilter="onChangeFilter"
+    />
+
+    <Pagination
+      :total="dataPagination.total"
+      :page="dataPagination.page"
+      :pages="dataPagination.pages"
+      @perPage="onPerPage"
+      @go="onGo"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { SortTable, Pagination } from "../../../system";
+import { getDataTask } from "../api/index";
+import { getColumns } from "../config/columns";
+import { getRequestId } from "../variables";
+
+const data = ref(null);
+const columnsConfig = ref(null);
+const dataPagination = ref({
+  total: 153,
+  page: 1,
+  pages: 10,
+  perPage: 15,
+});
+
+const formatData = (filter) => ({
+  params: {
+    case_number: getRequestId(),
+    status: "ACTIVE",
+    ...filter,
+  },
+  pagination: {
+    page: dataPagination.value.page,
+    perPage: dataPagination.value.perPage,
+  },
+});
+
+const onGo = async (page) => {
+  dataPagination.value.page = page;
+
+  data.value = await getDataTask(formatData({}));
+};
+
+const onPerPage = async (perPage) => {
+  dataPagination.value.perPage = perPage;
+
+  data.value = await getDataTask(formatData({}));
+};
+
+const onChangeFilter = async (dataFilter) => {
+  data.value = await getDataTask(formatData({
+    order_by: dataFilter.field,
+    order_direction: dataFilter.filter,
+  }));
+};
+
+onMounted(async () => {
+  data.value = await getDataTask(formatData({}));
+  columnsConfig.value = getColumns("tasks");
+});
+</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..7203deca15
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -0,0 +1,186 @@
+import {
+  LinkCell,
+  StatusCell,
+  TruncatedOptionsCell,
+  CollapseFormCell,
+} from "../../../system/index";
+
+export default {};
+
+// Column for Task
+const taskNumberColumn = () => ({
+  field: "case_number",
+  header: "Tasks #",
+  resizable: true,
+  width: 200,
+  filter: true,
+  formatter:(row, column, columns)=>{
+    return row.element_name;
+  },
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/tasks/${row.id}/edit`;
+      },
+    },
+  }),
+});
+
+const taskNameColumn = () => ({
+  field: "element_name",
+  header: "Task Name",
+  resizable: true,
+  width: 200,
+  filter: true,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/tasks/${row.id}/edit`;
+      },
+    },
+  }),
+});
+
+const processNameColumn = () => ({
+  field: "process.name",
+  header: "Process",
+  resizable: true,
+  width: 200,
+});
+
+const assignedColumn = () => ({
+  field: "user.fullname",
+  header: "Assigned",
+  resizable: true,
+  width: 200,
+  filter: true,
+});
+
+const dueDateColumn = () => ({
+  field: "due_at",
+  header: "Due Date",
+  resizable: true,
+  width: 200,
+  filter: true,
+});
+
+// Columns for Requests
+const requestIdColumn = () => ({
+  field: "id",
+  header: "Request ID",
+  resizable: true,
+  filter: { type: "sortable" },
+  width: 80,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/requests/${row.id}`;
+      },
+    },
+  }),
+});
+
+const processRequestColumn = () => ({
+  field: "name",
+  header: "Process Name",
+  resizable: true,
+  width: 200,
+  filter: { type: "sortable" },
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/requests/${row.id}`;
+      },
+    },
+  }),
+});
+
+const taskColumn = () => ({
+  field: "active_tasks",
+  header: "Task",
+  resizable: true,
+  width: 140,
+  formatter:(row, column, columns)=>{
+    return row.active_tasks.length? row.active_tasks[0].element_name : "";
+  },
+  cellRenderer: () => ({
+    component: TruncatedOptionsCell,
+    params: {
+      click: (option, row, column, columns) => {
+        window.document.location = `/tasks/${option.id}/edit`;
+      },
+      formatterOptions:(option, row, column, columns)=>{
+        return option.element_name;
+      }
+    },
+  }),
+});
+
+const statusColumn = () => ({
+  field: "status",
+  header: "Status",
+  filter: { type: "sortable" },
+  resizable: true,
+  width: 140,
+  cellRenderer: () => ({
+    component: StatusCell,
+  }),
+});
+
+const startedColumn = () => ({
+  field: "initiated_at",
+  header: "Started",
+  filter: { type: "sortable" },
+  resizable: true,
+  width: 200,
+});
+
+const completedDateColumn = () => ({
+  field: "completed_date",
+  header: "Completed Date",
+  resizable: true,
+  width: 200,
+});
+
+const actionColumn = () => ({
+  field: "",
+  header: "",
+  resizable: false,
+  width: 50,
+  cellRenderer: () => CollapseFormCell,
+  params: {},
+});
+
+export const getColumns = (type) => {
+  const columns = {
+    tasks: [
+      taskNumberColumn(),
+      taskNameColumn(),
+      processNameColumn(),
+      assignedColumn(),
+      dueDateColumn(),
+    ],
+    requests: [
+      requestIdColumn(),
+      processRequestColumn(),
+      taskColumn(),
+      statusColumn(),
+      startedColumn(),
+    ],
+    completed_forms: [
+      actionColumn(),
+      taskNumberColumn(),
+      taskNameColumn(),
+      processNameColumn(),
+      assignedColumn(),
+      completedDateColumn(),
+      dueDateColumn(),
+    ],
+  };
+
+  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..50e0eae0fc
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/edit.js
@@ -0,0 +1,380 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+import Tabs from "./components/Tabs.vue";
+import Timeline from "../../../js/components/Timeline.vue";
+import { CollapsableContainer } from "../../base";
+
+Vue.component("Timeline", Timeline);
+
+new Vue({
+  el: "#case-detail",
+  components: { CaseDetail, Tabs, CollapsableContainer },
+  data() {
+    return {
+      activeTab: "pending",
+      showCancelRequest: false,
+      fieldsToUpdate: [],
+      jsonData: "",
+      selectedData: "",
+      monacoLargeOptions: {
+        automaticLayout: true,
+      },
+      showJSONEditor: false,
+      data,
+      requestId,
+      request,
+      files,
+      refreshTasks: 0,
+      canCancel,
+      canViewPrint,
+      status: "ACTIVE",
+      userRequested: [],
+      errorLogs,
+      disabled: false,
+      retryDisabled: false,
+      packages: [],
+      processId,
+      canViewComments,
+      isObjectLoading: false,
+      showTree: false,
+      showTabs: true,
+      showInfo: true,
+      tabDefault: "details",
+      tabs: [
+        {
+          name: "Details", href: "#details", current: "details", show: true, content: null,
+        },
+        {
+          name: "Comments", href: "#comments", current: "comments", show: true, content: null,
+        },
+      ],
+      headerModel: false,
+    };
+  },
+  computed: {
+    activeErrors() {
+      return this.request.status === "ERROR";
+    },
+    activePending() {
+      return this.request.status === "ACTIVE";
+    },
+    /**
+     * Get the list of participants in the request.
+     *
+     */
+    participants() {
+      return this.request.participants;
+    },
+    /**
+     * Request Summary - that is blank place holder if there are in progress tasks,
+     * if the request is completed it will show key value pairs.
+     *
+     */
+    showSummary() {
+      return this.request.status === "ACTIVE" || this.request.status === "COMPLETED" || this.request.status === "CANCELED";
+    },
+    /**
+     * Show tasks if request status is not completed or pending
+     *
+     */
+    showTasks() {
+      return this.request.status !== "COMPLETED" && this.request.status !== "PENDING";
+    },
+    /**
+     * If the screen summary is configured.
+     */
+    showScreenSummary() {
+      return this.request.summary_screen !== null;
+    },
+    /**
+     * Get the summary of the Request.
+     *
+     */
+    summary() {
+      return this.request.summary;
+    },
+    /**
+     * Get Screen summary
+     * */
+    screenSummary() {
+      return this.request.summary_screen;
+    },
+    /**
+     * prepare data screen
+     */
+    dataSummary() {
+      const options = {};
+      this.request.summary.forEach((option) => {
+        if (option.type === "datetime") {
+          options[option.key] = moment(option.value)
+            .tz(window.ProcessMaker.user.timezone)
+            .format("MM/DD/YYYY HH:mm");
+        } else if (option.type === "date") {
+          options[option.key] = moment(option.value)
+            .tz(window.ProcessMaker.user.timezone)
+            .format("MM/DD/YYYY");
+        } else {
+          options[option.key] = option.value;
+        }
+      });
+      return options;
+    },
+    /**
+     * If the screen request detail is configured.
+     */
+    showScreenRequestDetail() {
+      return !!this.request.request_detail_screen;
+    },
+    /**
+     * Get Screen request detail
+     */
+    screenRequestDetail() {
+      return this.request.request_detail_screen ? this.request.request_detail_screen.config : null;
+    },
+    classStatusCard() {
+      const header = {
+        ACTIVE: "active-style",
+        COMPLETED: "active-style",
+        CANCELED: "canceled-style ",
+        ERROR: "canceled-style",
+      };
+      return `card-header text-status ${header[this.request.status.toUpperCase()]}`;
+    },
+    labelDate() {
+      const label = {
+        ACTIVE: "In Progress Since",
+        COMPLETED: "Completed On",
+        CANCELED: "Canceled ",
+        ERROR: "Failed On",
+      };
+      return label[this.request.status.toUpperCase()];
+    },
+    statusDate() {
+      const status = {
+        ACTIVE: this.request.created_at,
+        COMPLETED: this.request.completed_at,
+        CANCELED: this.request.updated_at,
+        ERROR: this.request.updated_at,
+      };
+
+      return status[this.request.status.toUpperCase()];
+    },
+    statusLabel() {
+      const status = {
+        ACTIVE: this.$t("In Progress"),
+        COMPLETED: this.$t("Completed"),
+        CANCELED: this.$t("Canceled"),
+        ERROR: this.$t("Error"),
+      };
+
+      return status[this.request.status.toUpperCase()];
+    },
+    requestBy() {
+      return [this.request.user];
+    },
+    panCommentInVueOptionsComponents() {
+      return "pan-comment" in Vue.options.components;
+    },
+  },
+  mounted() {
+    this.packages = window.ProcessMaker.requestShowPackages;
+    this.listenRequestUpdates();
+    this.cleanScreenButtons();
+    this.editJsonData();
+  },
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+      if (tab === "overview") {
+        this.isObjectLoading = true;
+      }
+      ProcessMaker.EventBus.$emit("tab-switched", tab);
+    },
+    switchTabInfo(tab) {
+      this.showInfo = !this.showInfo;
+      if (window.Intercom) {
+        window.Intercom("update", { hide_default_launcher: tab === "comments" });
+      }
+    },
+    onLoadedObject() {
+      this.isObjectLoading = false;
+    },
+    requestStatusClass(status) {
+      const bubbleColor = {
+        active: "text-success",
+        inactive: "text-danger",
+        error: "text-danger",
+        draft: "text-warning",
+        archived: "text-info",
+        completed: "text-primary",
+      };
+      return `fas fa-circle ${bubbleColor[status.toLowerCase()]} small`;
+    },
+    // Data editor
+    updateRequestData() {
+      const data = JSON.parse(this.jsonData);
+      ProcessMaker.apiClient.put(`requests/${this.requestId}`, {
+        data,
+      }).then(() => {
+        this.fieldsToUpdate.splice(0);
+        ProcessMaker.alert(this.$t("The request data was saved."), "success");
+      });
+    },
+    saveJsonData() {
+      try {
+        const value = JSON.parse(this.jsonData);
+        this.updateRequestData();
+      } catch (e) {
+        // Invalid data
+      }
+    },
+    editJsonData() {
+      this.jsonData = JSON.stringify(this.data, null, 4);
+    },
+    /**
+     * Refresh the Request details.
+     *
+     */
+    refreshRequest() {
+      this.$refs.pending.fetch();
+      this.$refs.completed.fetch();
+      ProcessMaker.apiClient.get(`requests/${this.requestId}`, {
+        params: {
+          include: "participants,user,summary,summaryScreen",
+        },
+      }).then((response) => {
+        for (const attribute in response.data) {
+          this.updateModel(this.request, attribute, response.data[attribute]);
+        }
+        this.refreshTasks++;
+      });
+    },
+    /**
+     * Update a model property.
+     *
+     */
+    updateModel(obj, prop, value, defaultValue) {
+      const descriptor = Object.getOwnPropertyDescriptor(obj, prop);
+      value = value !== undefined ? value : (descriptor ? obj[prop] : defaultValue);
+      if (descriptor && !(descriptor.get instanceof Function)) {
+        delete obj[prop];
+        Vue.set(obj, prop, value);
+      } else if (descriptor && obj[prop] !== value) {
+        Vue.set(obj, prop, value);
+      }
+    },
+    /**
+     * Listen for Request updates.
+     *
+     */
+    listenRequestUpdates() {
+      const userId = document.head.querySelector("meta[name=\"user-id\"]").content;
+      Echo.private(`ProcessMaker.Models.User.${userId}`).notification((token) => {
+        if (token.request_id === this.requestId) {
+          this.refreshRequest();
+        }
+      });
+    },
+    /**
+     * disable buttons in screen
+     */
+    cleanScreenButtons() {
+      if (this.showScreenSummary) {
+        this.$refs.screen.config[0].items.forEach((item) => {
+          item.config.disabled = true;
+          if (item.component === "FormButton") {
+            item.config.event = "";
+            item.config.variant = `${item.config.variant}  disabled`;
+          }
+        });
+      }
+    },
+    okCancel() {
+      // single click
+      if (this.disabled) {
+        return;
+      }
+      this.disabled = true;
+      ProcessMaker.apiClient.put(`requests/${this.requestId}`, {
+        status: "CANCELED",
+      }).then(() => {
+        ProcessMaker.alert(this.$t("The request was canceled."), "success");
+        window.location.reload();
+      }).catch(() => {
+        this.disabled = false;
+      });
+    },
+    onCancel() {
+      ProcessMaker.confirmModal(
+        this.$t("Caution!"),
+        this.$t("Are you sure you want cancel this request?"),
+        "",
+        () => {
+          this.okCancel();
+        },
+      );
+    },
+    completeRequest() {
+      ProcessMaker.confirmModal(
+        this.$t("Caution!"),
+        this.$t("Are you sure you want to complete this request?"),
+        "",
+        () => {
+          ProcessMaker.apiClient.put(`requests/${this.requestId}`, {
+            status: "COMPLETED",
+          }).then(() => {
+            ProcessMaker.alert(this.$t("Request Completed"), "success");
+            window.location.reload();
+          });
+        },
+      );
+    },
+    retryRequest() {
+      const apiRequest = () => {
+        this.retryDisabled = true;
+        let success = true;
+
+        ProcessMaker.apiClient.put(`requests/${this.requestId}/retry`).then((response) => {
+          if (response.status !== 200) {
+            return;
+          }
+
+          const { message } = response.data;
+          success = response.data.success || false;
+
+          if (success) {
+            if (Array.isArray(message)) {
+              for (const line of message) {
+                ProcessMaker.alert(this.$t(line), "success");
+              }
+            }
+          } else {
+            ProcessMaker.alert(this.$t("Request could not be retried"), "danger");
+          }
+        }).finally(() => setTimeout(() => window.location.reload(), success ? 3000 : 1000));
+      };
+
+      ProcessMaker.confirmModal(
+        this.$t("Confirm"),
+        this.$t("Are you sure you want to retry this request?"),
+        "default",
+        apiRequest,
+      );
+    },
+    rollback(errorTaskId, rollbackToName) {
+      ProcessMaker.confirmModal(
+        this.$t("Confirm"),
+        this.$t(
+          "Are you sure you want to rollback to the task @{{name}}? Warning! This request will continue as the current published process version.",
+          { name: rollbackToName },
+        ),
+        "default",
+        () => {
+          ProcessMaker.apiClient.post(`tasks/${errorTaskId}/rollback`).then((response) => {
+            window.location.reload();
+          });
+        },
+      );
+    },
+  },
+});
diff --git a/resources/jscomposition/cases/casesDetail/variables/index.js b/resources/jscomposition/cases/casesDetail/variables/index.js
new file mode 100644
index 0000000000..70f1e26039
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/variables/index.js
@@ -0,0 +1,11 @@
+export default {};
+
+export const getRequestId = () => requestId;
+
+export const getRequestStatus = () => request.status;
+
+export const getComentableType = () => comentable_type;
+
+export const getProcessName = () => request.process.name;
+
+export const api = window.ProcessMaker?.apiClient;
diff --git a/resources/jscomposition/cases/casesMain/App.vue b/resources/jscomposition/cases/casesMain/App.vue
new file mode 100644
index 0000000000..6f6b358b21
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="tw-flex tw-h-[90vh] ">
+    <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..d4040f7f21
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
+    <CaseFilter />
+
+    <BadgesSection v-model="badgesData" />
+
+    <FilterableTable
+      :columns="columnsConfig"
+      :data="data"
+      class="tw-grow tw-overflow-y-scroll" />
+
+    <Pagination
+      :total="dataPagination.total"
+      :page="dataPagination.page"
+      :pages="dataPagination.pages"
+      @perPage="onPerPage"
+      @go="onGo" />
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import CaseFilter from "./components/CaseFilter.vue";
+import BadgesSection from "./components/BadgesSection.vue";
+import { Pagination } from "../../base";
+import { getColumns } from "./config/columns";
+import { FilterableTable } from "../../system";
+import { badges } from "./config/badges";
+import { getAllData } from "./api";
+
+export default defineComponent({
+  components: {
+    CaseFilter,
+    BadgesSection,
+    Pagination,
+    FilterableTable,
+  },
+  props: {
+    listId: {
+      type: String,
+      default: () => "",
+    },
+  },
+  setup(props) {
+    const badgesData = ref(badges);
+    const columnsConfig = ref();
+    const data = ref();
+
+    const dataPagination = ref({
+      total: 153,
+      page: 0,
+      pages: 10,
+      perPage: 15,
+    });
+
+    const getData = () => getAllData({
+      type: props.listId,
+      page: dataPagination.value.page,
+      perPage: dataPagination.value.perPage,
+    });
+
+    const onGo = async (page) => {
+      dataPagination.value.page = page;
+
+      data.value = await getData();
+    };
+
+    const onPerPage = async (perPage) => {
+      dataPagination.value.perPage = perPage;
+
+      data.value = await getData();
+    };
+
+    onMounted(async () => {
+      data.value = await getData();
+
+      columnsConfig.value = getColumns(props.listId);
+    });
+
+    return {
+      dataPagination,
+      columnsConfig,
+      data,
+      badgesData,
+      onGo,
+      onPerPage,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
new file mode 100644
index 0000000000..8fd2746a4d
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="tw-w-full tw-space-y-4 tw-flex-col tw-flex tw-grow">
+    <Breadcrums :pages="pages" />
+
+    <div
+      class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl
+      tw-border-gray-200 tw-border tw-space-y-4 tw-flex
+      tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
+      <AppCounters
+        v-model="countersData"
+        class="tw-w-full"
+        @change="onChangeCounter" />
+      <RouterView :key="route.fullPath" />
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router/composables";
+import AppCounters from "./components/AppCounters.vue";
+import { formatCounters } from "./utils/counters";
+import { getCounters } from "./api";
+import { Breadcrums } from "../../system";
+import { configHomeBreadcrum } from "../../config/index";
+
+export default defineComponent({
+  components: {
+    AppCounters,
+    Breadcrums,
+  },
+  setup() {
+    const countersData = ref([]);
+    const router = useRouter();
+    const route = useRoute();
+    const pages = ref([]);
+
+    const onChangeCounter = (counter) => {
+      if (typeof counter.url === "function") {
+        return counter.url();
+      }
+
+      pages.value.pop();
+      pages.value.push({ name: counter.header, current: true });
+
+      router.push({ path: counter.url }).catch((e) => { });
+    };
+
+    const initCounters = async () => {
+      let currentCounter = [];
+      const resCounters = await getCounters();
+
+      countersData.value = formatCounters(resCounters);
+      currentCounter = countersData.value.find((counter) => counter.url === route.path) ?? countersData.value[0];
+
+      currentCounter.active = true;
+    };
+
+    const initBreadcrums = () => {
+      const currentCounter = countersData.value.find((e) => e.active) ?? countersData.value[0];
+      pages.value = [
+        configHomeBreadcrum(),
+        { name: "Cases", href: "/cases", current: false },
+      ];
+
+      pages.value.push({ name: currentCounter.header, current: true });
+    };
+
+    onMounted(async () => {
+      await initCounters();
+      initBreadcrums();
+    });
+
+    return {
+      countersData,
+      route,
+      onChangeCounter,
+      pages,
+    };
+  },
+});
+</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..566f0adfb3
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/api/index.js
@@ -0,0 +1,555 @@
+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 () => {
+  const 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;
+};
+
+export const allCasesData = () => ({
+  data: [
+    {
+      case_number: 0,
+      user_id: 3,
+      case_title: "aut enim natus",
+      case_title_formatted: "ratione repellat <b>rerum</b>",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 5, name: "eligendi ut" },
+        { id: 29869, name: "dolorem qui" },
+        { id: 3, name: "accusantium consectetur" },
+      ],
+      requests: [
+        {
+          id: 92570,
+          name: "delectus voluptatem",
+          parent_request: 24,
+        },
+        { id: 8846, name: "est accusamus culpa", parent_request: 2 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "123", name: "libero tenetur quos quibusdam" },
+        { id: "node_2329", name: "modi voluptas quo" },
+        { id: "node_4561", name: "asperiores tenetur" },
+      ],
+      participants: [{ id: 25, name: "Dr. Madie Predovic PhD" }],
+      initiated_at: "1997-08-01T19:59:17.000000Z",
+      completed_at: "2015-11-10T21:25:11.000000Z",
+    },
+    {
+      case_number: 1,
+      user_id: 3,
+      case_title: "et tempora omnis",
+      case_title_formatted: "odio reprehenderit eum",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 39969254, name: "aut itaque" },
+        { id: 316545, name: "voluptatem optio" },
+        { id: 540006393, name: "et dolor" },
+      ],
+      requests: [
+        { id: 689, name: "voluptas aut", parent_request: 185512574 },
+        {
+          id: 3262060,
+          name: "adipisci est qui",
+          parent_request: 93397820,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8166", name: "asperiores qui qui molestias" },
+        { id: "node_4102", name: "non repudiandae aut" },
+        { id: "node_4351", name: "ducimus facilis" },
+      ],
+      participants: [
+        { id: 122025, name: "Jaylin Heaney" },
+        { id: 6, name: "Jessika Heller" },
+        { id: 748506844, name: "Jillian Gibson" },
+      ],
+      initiated_at: "1980-12-28T08:22:58.000000Z",
+      completed_at: "2012-07-05T12:27:04.000000Z",
+    },
+    {
+      case_number: 2,
+      user_id: 3,
+      case_title: "qui cum amet",
+      case_title_formatted: "ad ab modi",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 6624, name: "velit voluptatibus" },
+        { id: 34, name: "consequatur quis" },
+        { id: 527764, name: "sint dolores" },
+      ],
+      requests: [
+        { id: 57, name: "impedit ducimus", parent_request: 476 },
+        { id: 4, name: "qui dolorum non", parent_request: 688 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1050", name: "maiores vel iste a" },
+        { id: "node_7764", name: "vel nesciunt ratione" },
+        { id: "node_4394", name: "molestiae qui" },
+      ],
+      participants: [
+        { id: 8, name: "Kristofer Crist" },
+        { id: 163202910, name: "Leonard Bergnaum DDS" },
+        { id: 444, name: "Mr. Arvid Schiller MD" },
+      ],
+      initiated_at: "1983-05-19T16:24:24.000000Z",
+      completed_at: "2019-09-07T09:29:56.000000Z",
+    },
+    {
+      case_number: 3,
+      user_id: 3,
+      case_title: "voluptatem quidem quia",
+      case_title_formatted: "qui officiis sapiente",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 92, name: "repellendus voluptatibus" },
+        { id: 880611150, name: "architecto est" },
+        { id: 9284, name: "eligendi veniam" },
+      ],
+      requests: [
+        { id: 3, name: "et aliquid", parent_request: 34377361 },
+        {
+          id: 400403,
+          name: "consequatur vel magni",
+          parent_request: 81981614,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1259", name: "et temporibus totam quia" },
+        { id: "node_6096", name: "perferendis animi sapiente" },
+        { id: "node_3455", name: "ut occaecati" },
+      ],
+      participants: [
+        { id: 448166, name: "Eldon Cartwright DVM" },
+        { id: 62433751, name: "Miss Ofelia Grimes" },
+        { id: 96612, name: "Dr. Wilburn Treutel" },
+      ],
+      initiated_at: "2006-05-21T07:20:51.000000Z",
+      completed_at: "1982-03-29T07:36:25.000000Z",
+    },
+    {
+      case_number: 4,
+      user_id: 1,
+      case_title: "sit ut sit",
+      case_title_formatted: "voluptatem deleniti commodi",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 767, name: "cupiditate in" },
+        { id: 38716, name: "recusandae sequi" },
+        { id: 5101818, name: "ut atque" },
+      ],
+      requests: [
+        { id: 845, name: "est voluptates", parent_request: 991 },
+        {
+          id: 6922,
+          name: "repellat deserunt vitae",
+          parent_request: 7,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_9443", name: "et dignissimos quibusdam esse" },
+        { id: "node_3803", name: "fuga voluptatem ratione" },
+        { id: "node_6273", name: "non omnis" },
+      ],
+      participants: [
+        { id: 2, name: "Allene Purdy" },
+        { id: 13471022, name: "Rhiannon Beer DDS" },
+        { id: 493335, name: "Emma Lemke PhD" },
+      ],
+      initiated_at: "1989-01-02T20:52:49.000000Z",
+      completed_at: "1990-07-04T19:11:55.000000Z",
+    },
+    {
+      case_number: 5,
+      user_id: 1,
+      case_title: "est est ad",
+      case_title_formatted: "dicta vel molestiae",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 69224450, name: "vero ea" },
+        { id: 2477, name: "excepturi voluptatem" },
+        { id: 11857, name: "aut occaecati" },
+      ],
+      requests: [
+        {
+          id: 95,
+          name: "molestias voluptatem",
+          parent_request: 6682658,
+        },
+        { id: 9706673, name: "et quasi ipsum", parent_request: 2 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1023", name: "quia a molestiae labore" },
+        { id: "node_8478", name: "assumenda omnis quis" },
+        { id: "node_1863", name: "repellendus saepe" },
+      ],
+      participants: [
+        { id: 5762571, name: "Prof. Chad Ledner" },
+        { id: 9550, name: "Leta Wunsch Jr." },
+        { id: 6589672, name: "Mr. Raul Turcotte" },
+      ],
+      initiated_at: "2018-07-11T00:44:04.000000Z",
+      completed_at: "1977-04-21T20:33:50.000000Z",
+    },
+    {
+      case_number: 6,
+      user_id: 1,
+      case_title: "ullam error doloribus",
+      case_title_formatted: "officiis molestiae ut",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 5181637, name: "delectus dolores" },
+        { id: 58250809, name: "fuga beatae" },
+        { id: 93813951, name: "atque neque" },
+      ],
+      requests: [
+        {
+          id: 6694520,
+          name: "nihil aperiam",
+          parent_request: 525456,
+        },
+        {
+          id: 9067565,
+          name: "beatae voluptatem dolorem",
+          parent_request: 0,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8227", name: "totam rerum aut ipsum" },
+        { id: "node_5132", name: "culpa nisi deleniti" },
+        { id: "node_7065", name: "exercitationem minus" },
+      ],
+      participants: [
+        { id: 37343205, name: "Abbey Fay" },
+        { id: 9459, name: "Dr. Ricardo Bernier" },
+        { id: 790987, name: "Baylee Brekke" },
+      ],
+      initiated_at: "2022-12-11T20:48:55.000000Z",
+      completed_at: "2021-11-07T18:15:58.000000Z",
+    },
+    {
+      case_number: 7,
+      user_id: 3,
+      case_title: "eaque amet repellendus",
+      case_title_formatted: "et debitis sit",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 328969, name: "facere sit" },
+        { id: 30, name: "aut omnis" },
+        { id: 261429681, name: "rerum est" },
+      ],
+      requests: [
+        { id: 5157906, name: "voluptate ratione", parent_request: 0 },
+        {
+          id: 60923,
+          name: "voluptatem eius ipsa",
+          parent_request: 27,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8511", name: "cumque exercitationem quia sit" },
+        { id: "node_4341", name: "et qui aliquid" },
+        { id: "node_8437", name: "rerum exercitationem" },
+      ],
+      participants: [
+        { id: 7556, name: "Bonnie Altenwerth" },
+        { id: 442, name: "Prof. Nathanael Vandervort" },
+        { id: 23533498, name: "Kirk Pfeffer" },
+      ],
+      initiated_at: "1974-10-13T02:35:47.000000Z",
+      completed_at: "1976-05-06T00:54:14.000000Z",
+    },
+    {
+      case_number: 8,
+      user_id: 3,
+      case_title: "reiciendis optio dicta",
+      case_title_formatted: "voluptas omnis culpa",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 44327628, name: "quod illum" },
+        { id: 5080232, name: "in omnis" },
+        { id: 54, name: "veritatis qui" },
+      ],
+      requests: [
+        {
+          id: 4444,
+          name: "corrupti adipisci",
+          parent_request: 2310454,
+        },
+        {
+          id: 562211360,
+          name: "voluptatibus id omnis",
+          parent_request: 4,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8141", name: "fugiat tenetur nihil pariatur" },
+        { id: "node_1343", name: "omnis labore illo" },
+        { id: "node_0356", name: "aut aspernatur" },
+      ],
+      participants: [
+        { id: 2, name: "Luella Gislason" },
+        { id: 47785406, name: "Miss Janae Turner" },
+        { id: 96768614, name: "Amya Larson" },
+      ],
+      initiated_at: "1978-01-13T20:53:00.000000Z",
+      completed_at: "2003-05-09T01:51:49.000000Z",
+    },
+    {
+      case_number: 9,
+      user_id: 1,
+      case_title: "sint eius corporis",
+      case_title_formatted: "eaque ea quas",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 219515988, name: "consequatur maiores" },
+        { id: 174836, name: "soluta sed" },
+        { id: 9, name: "hic architecto" },
+      ],
+      requests: [
+        { id: 3084, name: "tempore incidunt", parent_request: 30470 },
+        {
+          id: 2,
+          name: "neque aut suscipit",
+          parent_request: 81171529,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_7893", name: "quos ipsam odit quia" },
+        { id: "node_0942", name: "et voluptatem perferendis" },
+        { id: "node_3020", name: "voluptas recusandae" },
+      ],
+      participants: [
+        { id: 8, name: "Kira Buckridge" },
+        { id: 34, name: "Briana Rath" },
+        { id: 3526, name: "Mr. Franco Veum" },
+      ],
+      initiated_at: "1988-02-11T06:46:46.000000Z",
+      completed_at: "1997-11-09T18:06:35.000000Z",
+    },
+    {
+      case_number: 11,
+      user_id: 3,
+      case_title: "facere accusantium sequi",
+      case_title_formatted: "inventore et sequi",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 94422, name: "sapiente culpa" },
+        { id: 4, name: "vero dolorum" },
+        { id: 294713669, name: "sit dolor" },
+      ],
+      requests: [
+        {
+          id: 898,
+          name: "voluptatum perferendis",
+          parent_request: 116178,
+        },
+        {
+          id: 96313178,
+          name: "dolor quis ad",
+          parent_request: 480366,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_3665", name: "eligendi explicabo suscipit sed" },
+        { id: "node_7456", name: "eaque pariatur consectetur" },
+        { id: "node_8114", name: "dignissimos occaecati" },
+      ],
+      participants: [
+        { id: 52560, name: "Turner Schuppe" },
+        { id: 16577119, name: "Chasity Reinger" },
+        { id: 116, name: "Victor Padberg" },
+      ],
+      initiated_at: "1995-05-26T12:28:06.000000Z",
+      completed_at: "1995-12-13T11:27:23.000000Z",
+    },
+    {
+      case_number: 12,
+      user_id: 1,
+      case_title: "quasi perspiciatis ut",
+      case_title_formatted: "perferendis non ut",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 284983263, name: "dolorem soluta" },
+        { id: 95252498, name: "quos aut" },
+        { id: 1115, name: "sed saepe" },
+      ],
+      requests: [
+        { id: 17469, name: "tenetur temporibus", parent_request: 3 },
+        {
+          id: 94439,
+          name: "odio accusantium sed",
+          parent_request: 189566,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_6891", name: "unde ratione ab quia" },
+        { id: "node_2660", name: "tenetur odio sed" },
+        { id: "node_5814", name: "ut unde" },
+      ],
+      participants: [
+        { id: 44, name: "Kathlyn Johns IV" },
+        { id: 447100, name: "Mr. Jamie Yundt" },
+        { id: 6992588, name: "Cade McCullough" },
+      ],
+      initiated_at: "1994-05-27T02:03:26.000000Z",
+      completed_at: "2021-01-29T20:34:17.000000Z",
+    },
+    {
+      case_number: 13,
+      user_id: 1,
+      case_title: "recusandae quas provident",
+      case_title_formatted: "placeat veniam fugiat",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 16, name: "ad ratione" },
+        { id: 605, name: "molestiae libero" },
+        { id: 57, name: "quia aspernatur" },
+      ],
+      requests: [
+        { id: 4536, name: "sit quia", parent_request: 78 },
+        { id: 7982002, name: "ea ut itaque", parent_request: 7 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1228", name: "error vero exercitationem in" },
+        { id: "node_1423", name: "et quia voluptas" },
+        { id: "node_8448", name: "consequatur ipsa" },
+      ],
+      participants: [
+        { id: 629, name: "Mrs. Vivianne Kling Sr." },
+        { id: 170285, name: "Anthony Reichert" },
+        { id: 845, name: "Miss Cayla Hyatt DVM" },
+      ],
+      initiated_at: "1994-01-07T14:19:05.000000Z",
+      completed_at: "1976-07-19T06:02:22.000000Z",
+    },
+    {
+      case_number: 14,
+      user_id: 1,
+      case_title: "dolore expedita possimus",
+      case_title_formatted: "quia consequuntur blanditiis",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 96, name: "deleniti nam" },
+        { id: 79, name: "totam aut" },
+        { id: 142841245, name: "commodi quod" },
+      ],
+      requests: [
+        { id: 346, name: "eum consequatur", parent_request: 78984 },
+        {
+          id: 353990,
+          name: "aut dolorem deleniti",
+          parent_request: 6272,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_0731", name: "quia excepturi ea aspernatur" },
+        { id: "node_4862", name: "iure fugit sed" },
+        { id: "node_6267", name: "repellendus fugiat" },
+      ],
+      participants: [
+        { id: 76277, name: "Madonna Purdy" },
+        { id: 28625426, name: "Mr. Timmothy Ankunding MD" },
+        { id: 377993949, name: "Johann Stoltenberg" },
+      ],
+      initiated_at: "1972-11-14T13:12:41.000000Z",
+      completed_at: "1989-03-29T06:06:42.000000Z",
+    },
+    {
+      case_number: 15,
+      user_id: 3,
+      case_title: "adipisci quisquam nulla",
+      case_title_formatted: "velit facere nihil",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 770828, name: "recusandae saepe" },
+        { id: 5361354, name: "quia voluptatem" },
+        { id: 47187, name: "earum molestiae" },
+      ],
+      requests: [
+        { id: 4160, name: "voluptas qui", parent_request: 50115 },
+        {
+          id: 3757,
+          name: "sunt delectus perspiciatis",
+          parent_request: 942749,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_7354", name: "commodi sint aliquid et" },
+        { id: "node_0561", name: "quod similique eum" },
+        { id: "node_1082", name: "soluta ut" },
+      ],
+      participants: [
+        { id: 53865127, name: "Marcellus Bailey" },
+        { id: 4, name: "Adrianna Leannon" },
+        { id: 86, name: "Dr. Luis Miller Jr." },
+      ],
+      initiated_at: "1980-10-10T09:54:40.000000Z",
+      completed_at: "1990-08-24T08:24:20.000000Z",
+    },
+  ],
+  meta: {
+    total: 1000, perPage: 15, currentPage: 1, lastPage: 67,
+  },
+});
+
+export const getAllData = async ({ type, page, perPage }) => {
+  const response = [];
+  const allData = allCasesData();
+
+  for (let index = 0; index < perPage; index += 1) {
+    const idxLooper = index % (allData.data.length - 1);
+
+    const item = allData.data[idxLooper];
+    item.case_number = index + 100 * page;
+    item.case_title = `${type} ${page} ${item.case_title}`;
+    item.case_title_formatted = `${type} ${page} ${item.case_title_formatted}`;
+    response.push(item);
+  }
+
+  return response;
+};
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/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..90f90028dc
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -0,0 +1,233 @@
+import moment from "moment";
+
+import {
+  CaseTitleCell,
+  TruncatedOptionsCell,
+  ParticipantsCell,
+  StatusCell,
+  LinkCell,
+} from "../../../system/index";
+
+const formatDate = (value, format) => {
+  let config = "DD/MM/YYYY hh:mm";
+  if (
+    typeof ProcessMaker !== "undefined"
+    && ProcessMaker.user
+    && ProcessMaker.user.datetime_format
+  ) {
+    if (format === "datetime") {
+      config = ProcessMaker.user.datetime_format;
+    }
+    if (format === "date") {
+      config = ProcessMaker.user.datetime_format.replace(
+        /[\sHh:msaAzZ]/g,
+        "",
+      );
+    }
+  }
+  if (value) {
+    if (moment(value).isValid()) {
+      return moment(value).format(config);
+    }
+    return value;
+  }
+  return "n/a";
+};
+
+export default {};
+/**
+ * Example Column
+ * field: String
+ * header: String
+ * headerFormatter: callback
+ * resizable: Boolean
+ * visible: Callback
+ * formatter: Callback - Build the value in the cell
+ * width: Number
+ * cellRenderer: Object Vue to custom the cell
+ * filter: This attribute is optional
+ */
+
+// 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: "case_number",
+  header: "Case #",
+  resizable: true,
+  width: 100,
+  filter: {
+    dataType: "string",
+    operators: ["=", ">", ">=", "in", "between"],
+  },
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/cases/${row.case_number}`;
+      },
+    },
+  }),
+});
+
+export const caseTitleColumn = () => ({
+  field: "case_title",
+  header: "Case Title",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => ({
+    component: CaseTitleCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/cases/${row.case_number}`;
+      },
+    },
+  }),
+  filter: {
+    dataType: "string",
+    operators: ["=", ">", ">=", "in", "between"],
+  },
+});
+
+export const processColumn = () => ({
+  field: "processes",
+  header: "Process",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => ({
+    component: TruncatedOptionsCell,
+    params: {
+      click: (option, row, column, columns) => {
+      },
+    },
+  }),
+  filter: {
+    dataType: "string",
+    operators: ["="],
+  },
+});
+
+export const taskColumn = () => ({
+  field: "tasks",
+  header: "Task",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => ({
+    component: TruncatedOptionsCell,
+    params: {
+      click: (option, row, column, columns) => {
+        window.document.location = `/tasks/${option.id}/edit`;
+      },
+    },
+  }),
+  filter: {
+    dataType: "string",
+    operators: ["="],
+  },
+});
+
+export const participantsColumn = () => ({
+  field: "participants",
+  header: "Participants",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => ({
+    component: ParticipantsCell,
+    params: {
+      click: (option, row, column, columns) => {
+        window.document.location = `/profile/${option.id}`;
+      },
+    },
+  }),
+  filter: {
+    dataType: "string",
+    operators: ["="],
+  },
+});
+
+export const statusColumn = () => ({
+  field: "case_status",
+  header: "Status",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => ({
+    component: StatusCell,
+  }),
+  filter: {
+    dataType: "string",
+    operators: ["="],
+  },
+});
+
+export const startedColumn = () => ({
+  field: "initiated_at",
+  header: "Started",
+  resizable: true,
+  width: 200,
+  formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"),
+  filter: {
+    dataType: "datetime",
+    operators: ["between", ">", ">=", "<", "<="],
+  },
+});
+
+export const completedColumn = () => ({
+  field: "completed_at",
+  header: "Completed",
+  resizable: true,
+  width: 200,
+  formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"),
+  filter: {
+    dataType: "datetime",
+    operators: ["between", ">", ">=", "<", "<="],
+  },
+});
+
+export const getColumns = (type) => {
+  const columnsDefinition = {
+    default: [
+      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: [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn(),
+    ],
+  };
+
+  return columnsDefinition[type] || columnsDefinition.default;
+};
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..cea03cba52
--- /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",
+    component: CasesMain,
+    props(route) {
+      return {};
+    },
+    children: [
+      {
+        name: "cases-request",
+        path: ":id?",
+        component: CasesDataSection,
+        props(route) {
+          return {
+            listId: route.params?.id || "",
+          };
+        },
+      },
+    ],
+  },
+];
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
new file mode 100644
index 0000000000..4de961bad1
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -0,0 +1,53 @@
+import { t } from "i18next";
+
+export default {};
+
+export const formatCounters = (data) => {
+  const counters = [
+    {
+      header: t("My cases"),
+      body: data.myCases.toString(),
+      color: "amber",
+      icon: "far fa-user",
+      url: "/cases",
+    },
+    {
+      header: t("In progress"),
+      body: data.inProgress.toString(),
+      color: "green",
+      icon: "fas fa-list",
+      url: "/cases/in_progress",
+    },
+    {
+      header: t("Completed"),
+      body: data.completed.toString(),
+      color: "blue",
+      icon: "far fa-check-circle",
+      url: "/cases/completed",
+    },
+  ];
+
+  if (data.allCases) {
+    counters.push({
+      header: t("All cases"),
+      body: data.allCases.toString(),
+      color: "purple",
+      icon: "far fa-clipboard",
+      url: "/cases/all",
+    });
+  }
+
+  if (data.allRequests) {
+    counters.push({
+      header: t("My requests"),
+      body: data.allRequests.toString(),
+      color: "gray",
+      icon: "fas fa-play",
+      url: () => {
+        window.location.href = "/requests";
+      },
+    });
+  }
+
+  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/config/configBreadcrum.js b/resources/jscomposition/config/configBreadcrum.js
new file mode 100644
index 0000000000..7cce51641b
--- /dev/null
+++ b/resources/jscomposition/config/configBreadcrum.js
@@ -0,0 +1,9 @@
+export const configHomeBreadcrum = () => ({
+  name: "",
+  icon: "fas fa-home",
+  href: "/",
+  current: false,
+  first: true,
+});
+
+export default {};
diff --git a/resources/jscomposition/config/index.js b/resources/jscomposition/config/index.js
new file mode 100644
index 0000000000..e173e903ac
--- /dev/null
+++ b/resources/jscomposition/config/index.js
@@ -0,0 +1 @@
+export * from "./configBreadcrum";
diff --git a/resources/jscomposition/system/Breadcrums.vue b/resources/jscomposition/system/Breadcrums.vue
new file mode 100644
index 0000000000..9ee3d8277e
--- /dev/null
+++ b/resources/jscomposition/system/Breadcrums.vue
@@ -0,0 +1,46 @@
+<template>
+  <nav class="tw-py-3 tw-px-4 tw-flex tw-text-sm tw-bg-white tw-w-full tw-border-gray-200 tw-border-y">
+    <ol class="tw-flex tw-items-center tw-space-x-1">
+      <li
+        v-for="page in model"
+        :key="page.name" >
+        <div class="tw-flex tw-items-center">
+          <i
+            v-if="!page.first"
+            class="fas fa-slash fa-xs tw-rotate-90 tw-mr-1" />
+          <a
+            v-if="!page.current"
+            :href="page.href"
+            class="tw-text-sky-600"
+            :aria-current="page.current ? 'page' : undefined" >
+            <i
+              :class="page.icon"
+              class="tw-mr-1" />
+            {{ page.name }}
+          </a>
+          <span
+            v-else
+            class="tw-text-black" >
+            {{ page.name }}
+          </span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+<script>
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    pages: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const model = computed(() => props.pages);
+    return { model };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/index.js b/resources/jscomposition/system/index.js
new file mode 100644
index 0000000000..462c7f79f3
--- /dev/null
+++ b/resources/jscomposition/system/index.js
@@ -0,0 +1,7 @@
+import Breadcrums from "./Breadcrums.vue";
+
+export * from "./table/index"
+
+export default {};
+
+export { Breadcrums };
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
new file mode 100644
index 0000000000..f58b5ab632
--- /dev/null
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -0,0 +1,30 @@
+<template>
+  <BaseTable
+    :columns="columns"
+    :data="data"
+    class="tw-grow tw-overflow-y-scroll">
+    <template
+      v-for="(column, index) in columns"
+      #[`theader-filter-${column.field}`]>
+      <FilterColumn
+        v-if="column.filter"
+        :key="`default-${index}`"
+        :filter="column.filter" />
+    </template>
+  </BaseTable>
+</template>
+<script setup>
+import { BaseTable } from "../../base";
+import { FilterColumn } from "./filter/defaultFilter/index";
+
+defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
new file mode 100644
index 0000000000..9f00435935
--- /dev/null
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -0,0 +1,241 @@
+<template>
+  <div
+    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-text-gray-500 tw-text-sm">
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel > 0
+      }"
+      class=" tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="first">
+      <g id="chevron-double-left">
+        <path
+          id="Shape"
+          d="M10 15L5 10L10 5M15 15L10 10L15 5"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
+
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100 ': pageModel > 0
+      }"
+      class="tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="prev">
+      <g id="chevron-left">
+        <path
+          id="Shape"
+          d="M12.5 15L7.5 10L12.5 5"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
+
+    <div
+      class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
+      <input
+        inputmode="numeric"
+        pattern="\d*"
+        :value="pageModel"
+        class="tw-block tw-w-10 tw-text-center tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1
+          focus-visible:tw-outline-none placeholder:tw-text-gray-400"
+        placeholder="1"
+        @change="$emit('go',parseInt($event.target.value))">
+    </div>
+
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages - 1
+      }"
+      class="tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="next">
+      <g id="chevron-right">
+        <path
+          id="Shape"
+          d="M7.5 5L12.5 10L7.5 15"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
+
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages - 1
+      }"
+      class="tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="last">
+      <g id="chevron-double-right">
+        <path
+          id="Shape"
+          d="M10 5L15 10L10 15M5 5L10 10L5 15"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
+
+    <div class="tw-px-2">
+      <span>{{ `${totalModel} items` }} </span>
+    </div>
+
+    <div>
+      <Dropdown
+        v-model="selectedOption"
+        class="tw-w-40"
+        :options="optionsModel"
+        @change="onChangeOption">
+        <template #input="{toogleShow}">
+          <div
+            class="tw-flex tw-full tw-items-center tw-space-x-2"
+            @click.prevent.stop="toogleShow()">
+            <span>
+              {{ `${selectedOption.value} ${$t("per page")}` }}
+            </span>
+            <i
+              class=" hover:tw-bg-gray-100 tw-rounded-md hover:tw-cursor-pointer tw-p-1 fas fa-chevron-down" />
+          </div>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, computed } from "vue";
+import { t } from "i18next";
+import { Dropdown } from "../../base/form";
+
+export default defineComponent({
+  components: {
+    Dropdown,
+  },
+  props: {
+    total: {
+      type: Number,
+      default: () => (0),
+    },
+    page: {
+      type: Number,
+      default: () => (0),
+    },
+    pages: {
+      type: Number,
+      default: () => (0),
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ["perPage", "go"],
+  setup(props, { emit }) {
+    const totalModel = computed(() => props.total);
+    const pageModel = ref(props.page);
+    const optionsPerPage = [
+      {
+        value: 15,
+        label: `15 ${t("items")}`,
+      },
+      {
+        value: 30,
+        label: `30 ${t("items")}`,
+      },
+      {
+        value: 50,
+        label: `50 ${t("items")}`,
+      },
+    ];
+
+    const optionsModel = ref(props.options.length ? props.options : optionsPerPage);
+
+    const selectedOption = ref({
+      value: 15,
+      label: "15 items",
+    });
+
+    const first = () => {
+      if (pageModel.value > 0) {
+        pageModel.value = 0;
+        emit("go", 0);
+      }
+    };
+
+    const prev = () => {
+      if (pageModel.value > 0) {
+        pageModel.value -= 1;
+        emit("go", pageModel.value);
+      }
+    };
+
+    const next = () => {
+      if (pageModel.value < props.pages - 1) {
+        pageModel.value += 1;
+        emit("go", pageModel.value);
+      }
+    };
+
+    const last = () => {
+      if (pageModel.value < props.pages - 1) {
+        pageModel.value = props.pages - 1;
+        emit("go", pageModel.value);
+      }
+    };
+
+    const onChangeOption = (e) => {
+      selectedOption.value = e;
+      emit("perPage", e.value);
+    };
+
+    return {
+      optionsModel,
+      selectedOption,
+      totalModel,
+      pageModel,
+      first,
+      last,
+      next,
+      onChangeOption,
+      prev,
+    };
+  },
+});
+</script>
+<style scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>
diff --git a/resources/jscomposition/system/table/SortTable.vue b/resources/jscomposition/system/table/SortTable.vue
new file mode 100644
index 0000000000..3c1db18512
--- /dev/null
+++ b/resources/jscomposition/system/table/SortTable.vue
@@ -0,0 +1,46 @@
+<template>
+  <BaseTable
+    :key="indexFilter"
+    :columns="columns"
+    :data="data"
+    class="tw-grow tw-overflow-y-scroll">
+    <template
+      v-for="(column, index) in columns"
+      #[`theader-filter-${column.field}`]>
+      <SortableFilter
+        v-if="column.filter"
+        :key="`sortable-${index}`"
+        :state="indexFilter == index ? 'asc': ''"
+        @change="e=> onChangeFilter(column, e, index)" />
+    </template>
+  </BaseTable>
+</template>
+<script setup>
+import { ref } from "vue";
+import { BaseTable } from "../../base";
+import { SortableFilter } from "./filter/sortableFilter/index";
+
+const emit = defineEmits(["changeFilter"]);
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const indexFilter = ref(-1);
+
+const onChangeFilter = (columm, val, index) => {
+  indexFilter.value = index;
+
+  emit("changeFilter", {
+    field: columm.field,
+    filter: val,
+  });
+};
+</script>
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
new file mode 100644
index 0000000000..1212cec9c4
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="tw-text-nowrap tw-whitespace-nowrap tw-p-3">
+    <a
+      href="#"
+      class="hover:tw-text-blue-500"
+      @click.prevent="onClick">
+      <div
+        v-if="row.case_title_formatted"
+        class="tw-overflow-hidden tw-text-ellipsis"
+        v-html="row.case_title_formatted" />
+      <span
+        v-else
+        class="tw-overflow-hidden tw-text-ellipsis">{{ getValue() }}</span>
+    </a>
+  </div>
+</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: () => ({}),
+    },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
+  },
+  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,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/CollapseFormCell.vue b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
new file mode 100644
index 0000000000..ab2d971895
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="tw-flex tw-justify-center">
+    <button
+      type="button"
+      class="tw-rounded-lg tw-bg-white tw-px-2.5 tw-py-1 tw-text-sm tw-font-semibold tw-text-gray-900
+        tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50"
+      @click="showScreen"
+    >
+      <i
+        class="fas"
+        :class="viewScreen ? 'fa-angle-down' : 'fa-angle-right'"
+      />
+    </button>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const viewScreen = ref(false);
+
+    const showScreen = () => {
+      viewScreen.value = !viewScreen.value;
+      emit("collapseContainer", viewScreen.value);
+    };
+
+    return {
+      viewScreen,
+      showScreen,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
new file mode 100644
index 0000000000..5456b17a64
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/LinkCell.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-p-3">
+    <a
+      class="hover:tw-text-blue-500"
+      href="#"
+      @click.prevent="onClick">
+      {{ getValue() }}
+    </a>
+  </div>
+</template>
+<script setup>
+import { defineProps } from "vue";
+import { isFunction, get } from "lodash";
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  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>
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
new file mode 100644
index 0000000000..4907726bd9
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
+    <div
+      v-for="(participant, index) in participants"
+      :key="index"
+      class="tw-group">
+      <AppPopover
+        position="bottom"
+        :hover="true">
+        <AppAvatar
+          :class="`${participant.color}`"
+          :initials="participant.name[0]"
+          class="tw-cursor-pointer"
+          @click="onClick(participant)" />
+        <template #content>
+          <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+            {{ participant.name }}
+          </div>
+        </template>
+      </AppPopover>
+    </div>
+
+    <span
+      v-if="participants.length == 1"
+      class="tw-px-2">
+      {{ participants[0].name }}
+    </span>
+  </div>
+</template>
+<script>
+import { defineComponent, computed, ref } from "vue";
+import { AppAvatar, AppPopover } from "../../../base";
+
+const colors = [
+  "tw-bg-green-500",
+  "tw-bg-gray-400",
+  "tw-bg-yellow-500",
+  "tw-bg-emerald-500",
+  "tw-bg-red-500",
+  "tw-bg-blue-500",
+  "tw-bg-gray-500",
+  "tw-bg-purple-500",
+];
+
+const getRandomInt = (max) => Math.floor(Math.random() * max);
+
+export default defineComponent({
+  components: {
+    AppPopover,
+    AppAvatar,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
+  },
+  setup(props) {
+    const participants = computed(() => {
+      const response = props.row[props.column.field].map((e) => ({
+        ...e,
+        color: colors[getRandomInt(colors.length - 1)],
+      }));
+      return response;
+    });
+
+    const onClick = (participant) => {
+      props.click && props.click(participant, props.row, props.column, props.columns);
+    };
+
+    return {
+      participants,
+      onClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/StatusCell.vue b/resources/jscomposition/system/table/cell/StatusCell.vue
new file mode 100644
index 0000000000..9556db9a3a
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/StatusCell.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="tw-flex tw-justify-center">
+    <span
+      :class="`tw-inline-flex tw-items-center tw-text-xs tw-border-1 tw-rounded-lg
+        tw-bg-${color}-100 tw-px-2 tw-py-1 tw-text-${color}-500`">
+      {{ label }}
+    </span>
+  </div>
+</template>
+<script>
+import { defineComponent, computed } from "vue";
+
+export const statuses = {
+  DRAFT: {
+    color: "red",
+    label: "Draft",
+  },
+  CANCELED: {
+    color: "red",
+    label: "Canceled",
+  },
+  COMPLETED: {
+    color: "blue",
+    label: "Completed",
+  },
+  ERROR: {
+    color: "red",
+    label: "Error",
+  },
+  IN_PROGRESS: {
+    color: "green",
+    label: "In progress",
+  },
+  ACTIVE: {
+    color: "green",
+    label: "In progress",
+  },
+};
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const color = computed(() => {
+      return (
+        statuses[props.row[props.column.field]].color || statuses.IN_PROGRESS.color
+      );
+    });
+
+    const label = computed(() => {
+      return (
+        statuses[props.row[props.column.field]].label || statuses.IN_PROGRESS.label
+      );
+    });
+
+    return {
+      color,
+      label,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
new file mode 100644
index 0000000000..e6c369cc5d
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
+    <div class="tw-overflow-hidden tw-text-ellipsis ">
+      <a
+        v-if="optionsModel.length <= 1"
+        class="hover:tw-text-blue-500"
+        href="#"
+        @click.prevent.stop="onClickOption(row[column.field][0], 0)">
+        {{ getValue() }}
+
+      </a>
+      <span v-else>
+        {{ getValue() }}
+      </span>
+    </div>
+
+    <AppPopover
+      v-if="optionsModel.length > 1"
+      v-model="show"
+      :hover="false"
+      position="bottom"
+      class="!tw-absolute tw-right-0 tw-top-0  tw-h-full tw-flex tw-items-center">
+      <div
+        class="tw-self-center tw-px-2 tw-rounded-md hover:tw-cursor-pointer hover:tw-bg-gray-200 tw-bg-white "
+        @click.prevent.stop="onClick">
+        <i class="fas fa-ellipsis-v" />
+      </div>
+
+      <template #content>
+        <ul
+          class="tw-bg-white tw-list-none tw-text-gray-600
+            tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
+          <li
+            v-for="(option, index) in optionsModel"
+            :key="index"
+            class="hover:tw-bg-gray-100"
+            @click.prevent.stop="onClickOption(option, index)">
+            <span class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
+              {{ getValueOption(option, index) }}
+            </span>
+          </li>
+        </ul>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+import { isFunction } from "lodash";
+import { AppPopover } from "../../../base/index";
+
+export default defineComponent({
+  components: {
+    AppPopover,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
+    formatterOptions: {
+      type: Function,
+      default: new Function(),
+    },
+  },
+  setup(props) {
+    const show = ref(false);
+    const optionsModel = ref(props.row[props.column.field]);
+
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return props.row[props.column.field].length ? props.row[props.column.field][0].name : "";
+    };
+
+    const getValueOption = (option, index) => {
+      if (isFunction(props.formatterOptions)) {
+        return props.formatterOptions(option, props.row, props.column, props.columns);
+      }
+      return "";
+    };
+
+    const onClick = () => {
+      show.value = !show.value;
+    };
+
+    const onClickOption = (option, index) => {
+      props.click && props.click(option, props.row, props.column, props.columns);
+    };
+
+    const onClose = () => {
+      show.value = false;
+    };
+
+    return {
+      show,
+      optionsModel,
+      onClose,
+      onClickOption,
+      onClick,
+      getValue,
+      getValueOption,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/index.js b/resources/jscomposition/system/table/cell/index.js
new file mode 100644
index 0000000000..218f02f1da
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/index.js
@@ -0,0 +1,15 @@
+import ParticipantsCell from "./ParticipantsCell.vue";
+import TruncatedOptionsCell from "./TruncatedOptionsCell.vue";
+import StatusCell from "./StatusCell.vue";
+import CaseTitleCell from "./CaseTitleCell.vue";
+import LinkCell from "./LinkCell.vue";
+import CollapseFormCell from "./CollapseFormCell.vue";
+
+export {
+  ParticipantsCell,
+  TruncatedOptionsCell,
+  StatusCell,
+  CaseTitleCell,
+  LinkCell,
+  CollapseFormCell,
+};
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
new file mode 100644
index 0000000000..43e625d64f
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <AppPopover
+      v-model="show"
+      :hover="false"
+      position="bottom">
+      <i
+        class="hover:tw-cursor-pointer tw-px-1 fas fa-ellipsis-v"
+        @click.prevent.stop="onClick" />
+
+      <template #content>
+        <div
+          class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between
+            tw-font-normal tw-bg-white tw-text-gray-600tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
+          <SortingButtons
+            @asc="onAsc"
+            @desc="onDesc" />
+
+          <div class="tw-grow tw-overflow-auto tw-space-y-4">
+            <FilterOperator
+              ref="filterOperatorsRef"
+              :operators="filter.operators"
+              :type="filter.dataType"
+              @change="(e) => onChangeFilterOperator(e)" />
+          </div>
+
+          <FooterButtons />
+        </div>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+import { AppPopover } from "../../../../base/index";
+import SortingButtons from "./SortingButtons.vue";
+import FilterOperator from "./operator/FilterOperator.vue";
+import FooterButtons from "./FooterButtons.vue";
+
+export default defineComponent({
+  components: {
+    AppPopover,
+    SortingButtons,
+    FilterOperator,
+    FooterButtons,
+  },
+  props: {
+    // FilterInterface {
+    //   operators = []  Array
+    //   dataType = null String
+    // }
+    filter: Object,
+  },
+  setup() {
+    const show = ref(false);
+
+    // Model that saves the values
+    const filterOperator = ref({
+      id: new Date().getTime(),
+      value: null,
+    });
+
+    const onClick = () => {
+      show.value = !show.value;
+    };
+
+    const onAsc = () => {};
+
+    const onDesc = () => {};
+
+    const onChangeFilterOperator = (element) => {
+      filterOperator.value.value = element;
+    };
+
+    return {
+      show,
+      filterOperator,
+      onClick,
+      onAsc,
+      onDesc,
+      onChangeFilterOperator,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue b/resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue
new file mode 100644
index 0000000000..e6d69b3d2f
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="tw-flex tw-space-x-2 tw-justify-end tw-font-semibold">
+    <OutlineButton class="!tw-py-2">
+      <span>{{ $t("Cancel") }}</span>
+    </OutlineButton>
+
+    <OutlineButton class="!tw-py-2">
+      <span>{{ $t("Clear") }}</span>
+    </OutlineButton>
+
+    <OutlineButton
+      class="!tw-py-2 tw-bg-gray-500 tw-text-white hover:tw-bg-gray-700">
+      <span>{{ $t("Apply") }}</span>
+    </OutlineButton>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { OutlineButton } from "../../../../base/index";
+
+export default defineComponent({
+  components: {
+    OutlineButton,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/SortingButtons.vue b/resources/jscomposition/system/table/filter/defaultFilter/SortingButtons.vue
new file mode 100644
index 0000000000..bfc4d66f76
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/SortingButtons.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="tw-flex tw-justify-center tw-text-gray-500 tw-text-xs">
+    <div
+      class="tw-space-x-2 tw-inline-flex tw-items-center
+        tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset
+        tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
+      @click="$emit('asc')">
+      <i class="fas fa-sort-amount-up-alt" />
+
+      <span>{{ $t("Sort Ascending") }}</span>
+    </div>
+
+    <div
+      class="tw-space-x-2 -tw-ml-px tw-inline-flex tw-items-center
+        tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300
+        hover:tw-bg-gray-100 focus:tw-z-10"
+      @click="$emit('desc')">
+      <i class="fas fa-sort-amount-down" />
+
+      <span>{{ $t("Sort Descending") }}</span>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/index.js b/resources/jscomposition/system/table/filter/defaultFilter/index.js
new file mode 100644
index 0000000000..a3208c7eed
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/index.js
@@ -0,0 +1,11 @@
+import FilterColumn from "./FilterColumn.vue";
+import FooterButtons from "./FooterButtons.vue";
+import SortingButtons from "./SortingButtons.vue";
+
+export * from "./operator/index";
+
+export {
+  FilterColumn,
+  FooterButtons,
+  SortingButtons,
+};
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/BetweenOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/BetweenOperator.vue
new file mode 100644
index 0000000000..19182999e8
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/BetweenOperator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="tw-flex tw-space-x-2">
+    <input
+      v-for="(element, index) in inputs"
+      :key="index"
+      v-model="inputs[index].value"
+      :placeholder="placeholder"
+      type="text"
+      class="tw-p-2 tw-rounded-md tw-border-0
+        tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+        focus:tw-ring-2 focus:tw-ring-inset"
+      @change="onChange()">
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    placeholder: {
+      type: String,
+      default: () => ("value"),
+    },
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: "from",
+        value: null,
+      },
+      {
+        id: "to",
+        value: null,
+      },
+    ]);
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/DateBetweenOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/DateBetweenOperator.vue
new file mode 100644
index 0000000000..f89cfb1a6f
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/DateBetweenOperator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-space-y-2">
+    <input
+      v-for="(element, index) in inputs"
+      :key="index"
+      v-model="inputs[index].value"
+      :placeholder="placeholder"
+      type="datetime-local"
+      class="tw-p-2 tw-rounded-md tw-border-0
+        tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+        focus:tw-ring-2 focus:tw-ring-inset"
+      @change="onChange()">
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    placeholder: {
+      type: String,
+      default: () => ("value"),
+    },
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: "from",
+        value: null,
+      },
+      {
+        id: "to",
+        value: null,
+      },
+    ]);
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/DateOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/DateOperator.vue
new file mode 100644
index 0000000000..ffa69b243e
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/DateOperator.vue
@@ -0,0 +1,18 @@
+<template>
+  <input
+    type="datetime-local"
+    class="tw-px-2 tw-block tw-w-full tw-rounded-md
+        tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1
+          tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+          focus:tw-ring-2 focus:tw-ring-inset"
+    @change="$emit('change', $event.target.value)">
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue
new file mode 100644
index 0000000000..d51977d4f4
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="tw-space-y-2 tw-text-xs">
+    <slot name="header" />
+
+    <Dropdown
+      v-model="operator"
+      :options="operatorsModel"
+      @change="onChangeOperator" />
+
+    <component
+      :is="operatorType?.component()"
+      placeholder="Type value"
+      class="tw-flex-1"
+      @change="onChangeValue" />
+  </div>
+</template>
+<script>
+import {
+  defineComponent, ref, onMounted,
+} from "vue";
+import { Dropdown } from "../../../../../base";
+import { getOperatorType } from "./operatorConfig";
+
+const defaultOperators = [
+  {
+    value: "=",
+    label: "=",
+  },
+  {
+    value: ">",
+    label: ">",
+  },
+  {
+    value: ">=",
+    label: ">=",
+  },
+  {
+    value: "<",
+    label: ">",
+  },
+  {
+    value: "<=",
+    label: "<=",
+  },
+  {
+    value: "between",
+    label: "between",
+  },
+  {
+    value: "in",
+    label: "in",
+  },
+  {
+    value: "contains",
+    label: "contains",
+  },
+  {
+    value: "regex",
+    label: "regex",
+  },
+];
+
+export default defineComponent({
+  components: {
+    Dropdown,
+  },
+  props: {
+    operators: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: () => "string", // string , number , datetime
+    },
+  },
+  setup(props, { emit }) {
+    const operatorsModel = ref(defaultOperators);
+
+    const operator = ref({
+      value: "=",
+      label: "=",
+    });
+
+    const operatorType = ref();
+
+    const onChangeOperator = (val) => {
+      operatorType.value = getOperatorType(val.value, props.type);
+    };
+
+    // Get the values of the input, datetime, between etc and emit the change to the parent
+    const onChangeValue = (e) => {
+      emit("change", {
+        operator: operator.value.value,
+        value: e,
+      });
+    };
+
+    onMounted(() => {
+      // Selecting the operators to show in dropdown
+      operatorsModel.value = defaultOperators.filter((op) => {
+        if (!props.operators.length) {
+          return op;
+        }
+
+        return props.operators.includes(op.value);
+      });
+
+      // Load first operator with its components
+      operatorType.value = getOperatorType(
+        operatorsModel.value[0].value,
+        props.type,
+      );
+    });
+
+    return {
+      operator,
+      operatorType,
+      operatorsModel,
+      onChangeOperator,
+      onChangeValue,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/InOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/InOperator.vue
new file mode 100644
index 0000000000..b12b073084
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/InOperator.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="tw-space-y-2 tw-items-center">
+    <div
+      v-for="(element, index) in inputs"
+      :key="index"
+      class="tw-flex tw-space-x-1 tw-items-center">
+      <input
+        v-model="inputs[index].value"
+        type="text"
+        class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0
+          tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset
+          tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2
+          focus:tw-ring-inset focus:tw-ring-indigo-600"
+        @change="onChange">
+
+      <span
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
+          tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300
+          tw-border tw-border-color-gray-400">
+        <i
+          class="fas fa-plus"
+          @click.prevent.stop="addInput" />
+      </span>
+
+      <span
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
+        tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300
+        tw-border tw-border-color-gray-400">
+        <i
+          class="fas fa-minus"
+          @click.prevent.stop="removeInput(index)" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: new Date().getTime(),
+        value: null,
+      },
+    ]);
+
+    const addInput = () => {
+      inputs.value.push({
+        id: new Date().getTime(),
+        value: null,
+      });
+    };
+
+    const removeInput = (index) => {
+      inputs.value.splice(index, 1);
+    };
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      addInput,
+      removeInput,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/InputOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/InputOperator.vue
new file mode 100644
index 0000000000..82ea3fc6b0
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/InputOperator.vue
@@ -0,0 +1,17 @@
+<template>
+  <input
+    type="text"
+    class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900
+      tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+      focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600"
+    @change="$emit('change', $event.target.value)">
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/index.js b/resources/jscomposition/system/table/filter/defaultFilter/operator/index.js
new file mode 100644
index 0000000000..b1c78c6c8e
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/index.js
@@ -0,0 +1,15 @@
+import BetweenOperator from "./BetweenOperator.vue";
+import FilterOperator from "./FilterOperator.vue";
+import InOperator from "./InOperator.vue";
+import InputOperator from "./InputOperator.vue";
+import DateOperator from "./DateOperator.vue";
+import DateBetweenOperator from "./DateBetweenOperator.vue";
+
+export {
+  BetweenOperator,
+  FilterOperator,
+  InOperator,
+  InputOperator,
+  DateOperator,
+  DateBetweenOperator,
+};
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/operator/operatorConfig.js b/resources/jscomposition/system/table/filter/defaultFilter/operator/operatorConfig.js
new file mode 100644
index 0000000000..366769d6c4
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/operatorConfig.js
@@ -0,0 +1,39 @@
+import InputOperator from "./InputOperator.vue";
+import BetweenOperator from "./BetweenOperator.vue";
+import InOperator from "./InOperator.vue";
+import DateOperator from "./DateOperator.vue";
+import DateBetweenOperator from "./DateBetweenOperator.vue";
+
+const operatorType = [
+  {
+    operator: ["=", ">", "<", ">=", "<=", "contains", "regex"],
+    type: ["number", "string"],
+    component: () => InputOperator,
+  },
+  {
+    operator: ["between"],
+    type: ["number", "string"],
+    component: () => BetweenOperator,
+  },
+  {
+    operator: ["in"],
+    type: ["number", "string"],
+    component: () => InOperator,
+  },
+  {
+    operator: ["<", "<=", ">", ">="],
+    type: ["datetime"],
+    component: () => DateOperator,
+  },
+  {
+    operator: ["between"],
+    type: ["datetime"],
+    component: () => DateBetweenOperator,
+  },
+];
+
+export const getOperatorType = (operator = "=", type = "string") => {
+  const response = operatorType.find((e) => e.operator.includes(operator) && e.type.includes(type));
+
+  return response;
+};
diff --git a/resources/jscomposition/system/table/filter/index.js b/resources/jscomposition/system/table/filter/index.js
new file mode 100644
index 0000000000..72464fa69c
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/index.js
@@ -0,0 +1,2 @@
+export * from "./defaultFilter/index";
+export * from "./sortableFilter/index";
diff --git a/resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue b/resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue
new file mode 100644
index 0000000000..94a930dd8c
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    :class="{ 'tw-text-blue-500': order }"
+    class="hover:tw-text-blue-600 tw-cursor-pointer">
+    <i
+      v-if="!order"
+      class="fas fa-sort"
+      @click.prevent="onChange('asc')" />
+
+    <i
+      v-if="order == 'asc'"
+      class="fas fa-sort-up"
+      @click.prevent="onChange('desc')" />
+
+    <i
+      v-if="order == 'desc'"
+      class="fas fa-sort-down"
+      @click.prevent="onChange('asc')" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const emit = defineEmits(["change"]);
+
+const props = defineProps({
+  state: {
+    type: String,
+    default: () => (""),
+  },
+});
+
+const order = ref(props.state);
+
+const onChange = (val) => {
+  order.value = val;
+  emit("change", val);
+};
+
+</script>
diff --git a/resources/jscomposition/system/table/filter/sortableFilter/index.js b/resources/jscomposition/system/table/filter/sortableFilter/index.js
new file mode 100644
index 0000000000..6d8f856462
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/sortableFilter/index.js
@@ -0,0 +1,5 @@
+import SortableFilter from "./SortableFilter.vue";
+
+export {
+  SortableFilter,
+};
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
new file mode 100644
index 0000000000..f6470d7d1e
--- /dev/null
+++ b/resources/jscomposition/system/table/index.js
@@ -0,0 +1,12 @@
+import FilterableTable from "./FilterableTable.vue";
+import SortTable from "./SortTable.vue";
+import Pagination from "./Pagination.vue";
+
+export * from "./cell/index";
+export * from "./filter/index";
+
+export {
+  FilterableTable,
+  SortTable,
+  Pagination,
+};
diff --git a/resources/sass/tailwind.css b/resources/sass/tailwind.css
new file mode 100644
index 0000000000..e66e36037c
--- /dev/null
+++ b/resources/sass/tailwind.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    a{
+      color: #0872C2;
+    }
+  }
\ No newline at end of file
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
new file mode 100644
index 0000000000..c14ac7fb97
--- /dev/null
+++ b/resources/views/cases/casesMain.blade.php
@@ -0,0 +1,19 @@
+@extends('layouts.layout',['content_margin' => '', 'overflow-auto' => ''])
+
+@section('title')
+@endsection
+
+@section('sidebar')
+@include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_cases')])
+@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/cases/edit.blade.php b/resources/views/cases/edit.blade.php
new file mode 100644
index 0000000000..810de3a7c4
--- /dev/null
+++ b/resources/views/cases/edit.blade.php
@@ -0,0 +1,185 @@
+@extends('layouts.layout',['content_margin' => '', 'overflow-auto' => ''])
+
+@section('title')
+  {{ __('Case Detail') }}
+@endsection
+
+@section('sidebar')
+  @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_cases')])
+@endsection
+
+@section('breadcrumbs')
+  @include('shared.breadcrumbs', ['routes' => [
+      __('Cases') => route('cases.index'),
+  ]])
+@endsection
+
+@section('content')
+<div id="case-detail" class="tw-p-4 tw-flex tw-overflow-hidden tw-space-x-2 tw-grow tw-h-full">
+    <case-detail class="tw-overflow-hidden tw-border tw-border-gray-200 tw-shadow-md tw-px-3
+      tw-flex-1 tw-bg-white tw-rounded-2xl">
+    </case-detail>
+
+    <collapsable-container class="tw-w-80">
+      <template>
+        <div class="tw-w-full tw-flex tw-border tw-border-gray-200 tw-shadow-md tw-px-3
+          tw-bg-white tw-rounded-2xl">
+            <Tabs
+              class="tw-w-full"
+              :tab-default="tabDefault"
+              :tabs="tabs" >
+
+              <template #details>
+                <ul class="tw-w-full tw-space-y-3 tw-py-3 tw-text-gray-500">
+                  @if ($canCancel == true && $request->status === 'ACTIVE')
+                    <li class="tw-flex tw-items-center tw-justify-center">
+                      <button type="button" class="tw-w-full tw-border tw-border-gray-300 tw-px-3 tw-py-2
+                        tw-shadow-sm tw-rounded-md" @click="onCancel" aria-haspopup="dialog">
+                        <i class="fas fa-ban"></i>  
+                        <span>{{ __('Cancel Request') }}</span>
+                      </button>
+                    </li>
+                  @endif
+
+                  <div :class="classStatusCard">
+                    <span style="margin:0; padding:0; line-height:1">@{{ __(statusLabel) }}</span>
+                  </div>
+
+                  <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                    <p class="section-title">@{{ __(labelDate) }}:</p>
+                    <i class="far fa-calendar-alt"></i>
+                    <small>@{{ moment(statusDate).format() }}</small>
+                  </li>
+
+                  @if ($request->user_id)
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Requested By') }}:</p>
+                      <avatar-image
+                        v-if="userRequested"
+                        size="32"
+                        class="d-inline-flex pull-left align-items-center"
+                        :input-data="requestBy"
+                        display-name="true"
+                      ></avatar-image>
+                      <span v-if="!userRequested">{{ __('Web Entry') }}</span>
+                    </li>
+                  @endif
+
+                  <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                    <p class="section-title">{{ __('Process') }}</p>
+                    {{ $request->name }}
+                    <p class="launchpad-link">
+                      <a href="{{route('process.browser.index', [$request->process_id])}}">
+                        {{ __('Open Process Launchpad') }}
+                      </a>
+                    </p>
+                  </li>
+                  
+                  @if ($request->participants->count())
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Participants') }}:</p>
+                      <avatar-image
+                        size="32"
+                        class="d-inline-flex pull-left align-items-center"
+                        :input-data="participants"
+                        hide-name="true"
+                      ></avatar-image>
+                    </li>
+                  @endif
+
+                  @if ($canManuallyComplete == true)
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Manually Complete Request') }}</p>
+                      <button
+                        type="button"
+                        class="btn btn-outline-success btn-block"
+                        data-toggle="modal"
+                        @click="completeRequest"
+                      >
+                        <i class="fas fa-stop-circle"></i> {{ __('Complete') }}
+                      </button>
+                    </li>
+                  @endif
+                  @if ($canRetry === true)
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Retry Request') }}</p>
+                      <button id="retryRequestButton" type="button" class="btn btn-outline-info btn-block"
+                        data-toggle="modal" :disabled="retryDisabled" @click="retryRequest">
+                        <i class="fas fa-sync"></i> {{ __('Retry') }}
+                      </button>
+                    </li>
+                  @endif
+                  @if ($eligibleRollbackTask)
+                    @can('rollback', $errorTask)
+                      <li
+                        v-if="{{ $isProcessManager ? 'true' : 'false' }} ||
+                          {{ Auth::user()->is_administrator ? 'true' : 'false' }}"
+                        class="list-group-item"
+                      >
+                        <p class="section-title">{{ __('Rollback Request') }}</p>
+                          <button
+                            id="retryRequestButton"
+                            type="button"
+                            class="btn btn-outline-info btn-block"
+                            data-toggle="modal"
+                            @click="rollback({{ $errorTask->id }}, '{{ $eligibleRollbackTask->element_name }}')"
+                          >
+                            <i class="fas fa-undo"></i> {{ __('Rollback') }}
+                          </button>
+                          <small>{{ __('Rollback to task') }}: <b>{{ $eligibleRollbackTask->element_name }}</b> ({{ $eligibleRollbackTask->element_id }})</small>
+                        </li>
+                      @endcan
+                    @endif
+                    @if ($request->parentRequest)
+                      <li class="list-group-item">
+                        <p class="section-title">{{ __('Parent Request') }}</p>
+                        <i :class="requestStatusClass('{{ $request->parentRequest->status }}')"></i>
+                        <a href="/requests/{{ $request->parentRequest->getKey() }}">{{ $request->parentRequest->name }}</a>
+                      </li>
+                    @endif
+                    @if (count($request->childRequests))
+                      <li class="list-group-item">
+                        <p class="section-title">{{ __('Child Requests') }}</p>
+                        @foreach ($request->childRequests as $childRequest)
+                          <div>
+                            <i :class="requestStatusClass('{{ $childRequest->status }}')"></i>
+                            <a href="/requests/{{ $childRequest->getKey() }}">{{ $childRequest->name }}</a>
+                          </div>
+                        @endforeach
+                      </li>
+                    @endif
+                </ul>
+              </template>
+
+              <template #comments v-if="panCommentInVueOptionsComponents">
+                <comment-container
+                  class="tw-grow tw-overflow-hidden"
+                  :commentable_id="requestId"
+                  commentable_type="{{ get_class($request) }}"
+                  name="{{ $request->name }}"
+                  :readonly="request.status === 'COMPLETED'"
+                />
+              </template>
+            </Tabs>
+        </div>
+      </template>
+    </collapsable-container>
+
+</div>
+@endsection
+
+@section('js')
+  <script>
+    const data = @json($request->getRequestData());
+    const requestId = @json($request->getKey());
+    const request = @json($request->getRequestAsArray());
+    const files = @json($files);
+    const canCancel = @json($canCancel);
+    const canViewPrint = @json($canPrintScreens);
+    const errorLogs = @json(['data' => $request->getErrors()]);
+    const processId = @json($request->process->id);
+    const canViewComments = @json($canViewComments);
+    const comentable_type = @json(get_class($request));
+  </script>
+  <script src="{{mix('js/composition/cases/casesDetail/edit.js')}}"></script>
+@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/resources/views/requests/index.blade.php b/resources/views/requests/index.blade.php
index 4ee1c39b49..951e9c72d9 100644
--- a/resources/views/requests/index.blade.php
+++ b/resources/views/requests/index.blade.php
@@ -10,7 +10,7 @@
 
 @section('breadcrumbs')
 @include('shared.breadcrumbs', ['routes' => [
-    __('Cases') => route('requests.index'),
+    __('Requests') => route('requests.index'),
     function() use ($title) { return [__($title), null]; }
 ]])
 @endsection
@@ -22,21 +22,21 @@ function() use ($title) { return [__($title), null]; }
                 <counter-card
                     color="info"
                     icon="id-badge"
-                    link="{{ route('cases_by_type', ['type' => '']) }}"
+                    link="{{ route('requests_by_type', ['type' => '']) }}"
                     url='requests?total=true&pmql=(status = "In Progress") AND (requester = "{{ Auth::user()->username }}")'
-                    :title="__('My Cases')"
+                    :title="__('My Requests')"
                 ></counter-card>
                 <counter-card
                     color="success"
                     icon="clipboard-list"
-                    link="{{ route('cases_by_type', ['type' => 'in_progress']) }}"
+                    link="{{ route('requests_by_type', ['type' => 'in_progress']) }}"
                     url='requests?total=true&pmql=(status = "In Progress")'
                     :title="__('In Progress')"
                 ></counter-card>
                 <counter-card
                     color="primary"
                     icon="clipboard-check"
-                    link="{{ route('cases_by_type', ['type' => 'completed']) }}"
+                    link="{{ route('requests_by_type', ['type' => 'completed']) }}"
                     url='requests?total=true&pmql=(status = "Completed")'
                     :title="__('Completed')"
                 ></counter-card>
@@ -44,9 +44,9 @@ function() use ($title) { return [__($title), null]; }
                     <counter-card
                         color="secondary"
                         icon="clipboard"
-                        link="{{ route('cases_by_type', ['type' => 'all']) }}"
+                        link="{{ route('requests_by_type', ['type' => 'all']) }}"
                         url='requests?total=true'
-                        :title="__('All Cases')"
+                        :title="__('All Requests')"
                     ></counter-card>
                 @endcan
             </counter-card-group>
diff --git a/routes/api.php b/routes/api.php
index 4e55539bbe..f32d2b8c2a 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -189,6 +189,7 @@
 
     // Tasks
     Route::get('tasks', [TaskController::class, 'index'])->name('tasks.index'); // Already filtered in controller
+    Route::get('tasks-by-case', [TaskController::class, 'indexCase'])->name('tasks.indexCase');
     Route::get('tasks/{task}', [TaskController::class, 'show'])->name('tasks.show')->middleware('can:view,task');
     Route::get('tasks/{task}/screen_fields', [TaskController::class, 'getScreenFields'])->name('getScreenFields.show')->middleware('can:view,task');
     Route::get('tasks/{task}/screens/{screen}', [TaskController::class, 'getScreen'])->name('tasks.get_screen')->middleware('can:viewScreen,task,screen');
@@ -213,7 +214,8 @@
     Route::get('/tasks/rule-execution-log', [InboxRulesController::class, 'executionLog'])->name('inboxrules.execution-log');
 
     // Cases
-    Route::get('cases', [ProcessRequestController::class, 'index'])->name('cases.index');
+    //Route::get('cases', [ProcessRequestController::class, 'index'])->name('cases.index');
+    Route::get('requests-by-case', [ProcessRequestController::class, 'getRequestsByCase'])->name('requests.getRequestsByCase');
     // Requests
     Route::get('requests', [ProcessRequestController::class, 'index'])->name('requests.index'); // Already filtered in controller
     Route::get('requests/{process}/count', [ProcessRequestController::class, 'getCount'])->name('requests.count');
diff --git a/routes/web.php b/routes/web.php
index c3848838a7..5d652f693e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,6 +17,7 @@
 use ProcessMaker\Http\Controllers\Auth\LoginController;
 use ProcessMaker\Http\Controllers\Auth\ResetPasswordController;
 use ProcessMaker\Http\Controllers\Auth\TwoFactorAuthController;
+use ProcessMaker\Http\Controllers\CasesController;
 use ProcessMaker\Http\Controllers\Designer\DesignerController;
 use ProcessMaker\Http\Controllers\HomeController;
 use ProcessMaker\Http\Controllers\InboxRulesController;
@@ -135,18 +136,18 @@
 
     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/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
-        ->where('type', 'all|in_progress|completed')
-        ->middleware('no-cache');
+    Route::get('cases', [CasesController::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/{type?}', [CasesController::class, 'index'])->name('cases-main.index')
+    ->where('type', 'in_progress|completed|all')
+    ->middleware('no-cache'); 
     // Requests
-    Route::get('requests', function () {
-        return redirect()->route('cases.index');
-    })->name('requests.index')->middleware('no-cache');
-    Route::get('requests/{type?}', function ($type = null) {
-        return redirect()->route('cases_by_type', ['type' => $type]);
-    })->where('type', 'all|in_progress|completed')->name('requests_by_type')->middleware('no-cache');
-
+    Route::get('requests', [RequestController::class, 'index'])
+        ->name('requests.index')
+        ->middleware('no-cache');
+    Route::get('requests/{type?}', [RequestController::class, 'index'])
+    ->where('type', 'all|in_progress|completed')->name('requests_by_type')->middleware('no-cache');
     Route::get('requests/{request}', [RequestController::class, 'show'])->name('requests.show');
     Route::get('request/{request}/files/{media}', [RequestController::class, 'downloadFiles'])->middleware('can:view,request');
     Route::get('requests/search', [RequestController::class, 'search'])->name('requests.search');
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000000..170eca4655
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: "tw-",
+  content: [
+    "./resources/**/*.blade.php",
+    "./resources/**/*.js",
+    "./resources/**/*.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  safelist: [
+    {
+      pattern: /(bg|outline|border|text)-(gray|purple|blue|amber|green|gray)-(100|200|300|400|500)/,
+      variants: ["hover"],
+    },
+  ],
+};
diff --git a/tests/Feature/Api/PermissionsTest.php b/tests/Feature/Api/PermissionsTest.php
index 85dc86c365..23ae7f07f5 100644
--- a/tests/Feature/Api/PermissionsTest.php
+++ b/tests/Feature/Api/PermissionsTest.php
@@ -211,4 +211,55 @@ public function testCategoryPermission()
         $context('script', ScriptCategory::class);
         $context('screen', ScreenCategory::class);
     }
+
+    /**
+     * Test if the created event in UserObserver assigns the correct permissions.
+     */
+    public function testSetPermissionsViewMyRequestForUser()
+    {
+        $permissionName = 'view-my_requests';
+        $permissionTitle = 'View My Requests';
+        // Ensure permission is created without duplicates
+        Permission::firstOrCreate(['name' => $permissionName, 'title' => $permissionTitle]);
+
+        // Create a user (this should trigger the observer)
+        $user = User::factory()->create();
+
+        // Assert the user has been assigned the correct permissions
+        $this->assertTrue($user->permissions()->where('name', $permissionName)->exists());
+    }
+
+    /**
+     * Test that the permissions are seeded and assigned to users and groups.
+     */
+    public function testSetPermissionsViewMyRequestForUsersAndGroupCreated()
+    {
+        //Set up the users and groups
+        $users = User::factory()->count(5)->create();
+        $groups = Group::factory()->count(3)->create();
+
+        //Run the seeder
+        $this->seed(PermissionSeeder::class);
+        $permissionName = 'view-my_requests';
+        $permissionTitle = 'View My Requests';
+
+        //Verify that the permission exists
+        $this->assertDatabaseHas('permissions', [
+            'name' => $permissionName,
+            'group' => 'Cases and Requests',
+            'title' => $permissionTitle,
+        ]);
+
+        //Verify that the permission is assigned to users
+        $permission = Permission::where('name', $permissionName)->first();
+        $this->assertNotNull($permission);
+        foreach ($users as $user) {
+            $this->assertTrue($user->hasPermission($permissionName));
+        }
+
+        //Verify that the permission is assigned to groups
+        foreach ($groups as $group) {
+            $this->assertTrue($permission->groups->contains($group));
+        }
+    }
 }
diff --git a/tests/Feature/Api/ProcessRequestsTest.php b/tests/Feature/Api/ProcessRequestsTest.php
index bc6c837089..438e97daef 100644
--- a/tests/Feature/Api/ProcessRequestsTest.php
+++ b/tests/Feature/Api/ProcessRequestsTest.php
@@ -30,6 +30,7 @@ class ProcessRequestsTest extends TestCase
     public $withPermissions = true;
 
     const API_TEST_URL = '/requests';
+    const API_REQUESTS_BY_CASE = '/requests-by-case';
 
     const STRUCTURE = [
         'id',
@@ -986,4 +987,44 @@ public function testScreenRequested()
         $data = $response->json()['data'];
         $this->assertEmpty($data);
     }
+    
+    /**
+     * Get a list of Requests by Cases.
+     */
+    public function testRequestByCase()
+    {
+        ProcessRequest::query()->delete();
+        $request = ProcessRequest::factory()->create();
+        ProcessRequest::factory()->count(9)->create([
+            'parent_request_id' => $request->id,
+        ]);
+
+        $url = self::API_REQUESTS_BY_CASE . '?case_number=' . $request->case_number;
+        
+        $response = $this->apiCall('GET', $url);
+
+        //Validate the header status code
+        $response->assertStatus(200);
+
+        // Verify structure
+        $response->assertJsonStructure([
+            'data' => ['*' => self::STRUCTURE],
+            'meta',
+        ]);
+
+        // Verify count
+        $this->assertEquals(10, $response->json()['meta']['total']);
+    }
+
+    /**
+     * Get a list of Requests by Cases.
+     */
+    public function testRequestByCaseWithoutCaseNumber()
+    {        
+        $response = $this->apiCall('GET', self::API_REQUESTS_BY_CASE);
+
+        //Validate the header status code
+        $response->assertStatus(422);
+        $this->assertEquals('The Case number field is required.', $response->json()['message']);
+    }
 }
diff --git a/tests/Feature/Api/TaskControllerTest.php b/tests/Feature/Api/TaskControllerTest.php
new file mode 100644
index 0000000000..49ca029b3b
--- /dev/null
+++ b/tests/Feature/Api/TaskControllerTest.php
@@ -0,0 +1,110 @@
+<?php
+
+namespace Tests\Feature\Api;
+
+use Illuminate\Support\Facades\Auth;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\User;
+use Tests\Feature\Shared\RequestHelper;
+use Tests\TestCase;
+
+class TaskControllerTest extends TestCase
+{
+    use RequestHelper;
+
+    const API_TASK_BY_CASE = '/tasks-by-case';
+
+    const TASK_BY_CASE_STRUCTURE = [
+        'id',
+        'element_name',
+        'user_id',
+        'process_id',
+        'due_at',
+        'process_request_id',
+    ];
+
+    /**
+     * Test indexCase without case_number.
+     *
+     * @return void
+     */
+    public function test_index_case_requires_case_number()
+    {
+        // Simulate an authenticated user
+        $user = User::factory()->create();
+        Auth::login($user);
+
+        // Call the endpoint without the 'case_number' parameter
+        $response = $this->apiCall('GET', self::API_TASK_BY_CASE);
+
+        // Check if the response returns a 400 error due to missing 'case_number'
+        $response->assertStatus(422)
+                 ->assertJson(['message' => 'The Case number field is required.']);
+    }
+
+    /**
+     * Test indexCase returns active tasks related to the case_number.
+     *
+     * @return void
+     */
+    public function test_index_case_returns_active_tasks_for_case_number()
+    {
+        // Simulate an authenticated user
+        $user = User::factory()->create();
+        Auth::login($user);
+
+        // Create a ProcessRequestToken associated with a specific case_number
+        $processRequest = ProcessRequest::factory()->create();
+        ProcessRequestToken::factory()->create([
+            'user_id' => $user->id,
+            'status' => 'ACTIVE',
+            'process_request_id' => $processRequest->id, // id del ProcessRequest
+        ]);
+
+        // Call the endpoint with the 'case_number' parameter
+        $filter = "?case_number=$processRequest->case_number";
+        $response = $this->apiCall('GET', self::API_TASK_BY_CASE . $filter);
+
+        // Check if the response is successful and contains the expected tasks
+        $response->assertStatus(200);
+        $this->assertCount(1, $response->json('data'));
+        $response->assertJsonStructure([
+            'data' => ['*' => self::TASK_BY_CASE_STRUCTURE],
+            'meta',
+        ]);
+    }
+
+    /**
+     * Test indexCase returns completed tasks related to the case_number.
+     *
+     * @return void
+     */
+    public function test_index_case_returns_inactive_tasks_for_case_number()
+    {
+        // Simulate an authenticated user
+        $user = User::factory()->create();
+        Auth::login($user);
+
+        // Create a ProcessRequestToken associated with a specific case_number
+        $processRequest = ProcessRequest::factory()->create();
+        ProcessRequestToken::factory()->create([
+            'user_id' => $user->id,
+            'status' => 'CLOSED',
+            'process_request_id' => $processRequest->id, // id del ProcessRequest
+        ]);
+
+        // Call the endpoint with the 'case_number' parameter
+        $filter = "?case_number=$processRequest->case_number&status=CLOSED";
+        $response = $this->apiCall('GET', self::API_TASK_BY_CASE . $filter);
+
+        // Check if the response is successful and contains the expected tasks
+        $response->assertStatus(200);
+        $this->assertCount(1, $response->json('data'));
+        $response->assertJsonStructure([
+            'data' => ['*' => self::TASK_BY_CASE_STRUCTURE],
+            'meta',
+        ]);
+    }
+}
diff --git a/tests/Feature/Api/UsersTest.php b/tests/Feature/Api/UsersTest.php
index 3c9dbbd61d..e728593866 100644
--- a/tests/Feature/Api/UsersTest.php
+++ b/tests/Feature/Api/UsersTest.php
@@ -196,7 +196,7 @@ public function testDefaultValuesOfUser()
             'lastname' => $faker->lastName(),
             'email' => $faker->email(),
             'status' => $faker->randomElement(['ACTIVE', 'INACTIVE']),
-            'password' => $faker->password(8) . 'A' . '1',
+            'password' => $faker->password(8) . 'A' . '1' . '+',
             'timezone' => 'America/Monterrey',
         ]);
 
diff --git a/tests/Feature/RedirectTest.php b/tests/Feature/RedirectTest.php
index f595a5100b..0da2c3e6b3 100644
--- a/tests/Feature/RedirectTest.php
+++ b/tests/Feature/RedirectTest.php
@@ -24,11 +24,11 @@ public function test401RedirectsToLogin()
             'is_administrator' => false,
         ]);
         Auth::login($user);
-        $response = $this->get('/cases');
+        $response = $this->get('/requests');
         $response->assertStatus(200);
         $response->assertViewIs('requests.index');
         Auth::logoutCurrentDevice();
-        $response = $this->get('/cases');
+        $response = $this->get('/requests');
         //302 because we want to make sure they are being redirected
         $response->assertStatus(302);
     }
diff --git a/tests/Feature/RequestTest.php b/tests/Feature/RequestTest.php
index ee2138d301..f39421c5ec 100644
--- a/tests/Feature/RequestTest.php
+++ b/tests/Feature/RequestTest.php
@@ -45,7 +45,7 @@ class RequestTest extends TestCase
     public function testIndexRoute()
     {
         // get the URL
-        $response = $this->webCall('GET', '/cases');
+        $response = $this->webCall('GET', '/requests');
         $response->assertStatus(200);
         // check the correct view is called
         $response->assertViewIs('requests.index');
diff --git a/upgrades/2024_09_24_142322_update_request_permissions_group_name.php b/upgrades/2024_09_24_142322_update_request_permissions_group_name.php
new file mode 100644
index 0000000000..0144917fbc
--- /dev/null
+++ b/upgrades/2024_09_24_142322_update_request_permissions_group_name.php
@@ -0,0 +1,16 @@
+<?php
+
+use ProcessMaker\Models\Permission;
+use ProcessMaker\Upgrades\UpgradeMigration as Upgrade;
+
+class UpdateRequestPermissionsGroupName extends Upgrade
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Permission::where('group', 'Requests')
+        ->update(['group' => 'Cases and Requests']);
+    }
+}
diff --git a/webpack.mix.js b/webpack.mix.js
index 66f88e3053..ece7502148 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -121,7 +121,8 @@ 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/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")
@@ -169,6 +170,9 @@ mix
   .sass("resources/sass/sidebar/sidebar.scss", "public/css")
   .sass("resources/sass/app.scss", "public/css")
   .sass("resources/sass/admin/queues.scss", "public/css/admin")
+  .postCss("resources/sass/tailwind.css", "public/css", [
+    require("tailwindcss"),
+  ])
   .version();
 
 mix.vue({ version: 2 });