diff --git a/ProcessMaker/Helpers/MobileHelper.php b/ProcessMaker/Helpers/MobileHelper.php
index f577f4284f..2d8254f763 100644
--- a/ProcessMaker/Helpers/MobileHelper.php
+++ b/ProcessMaker/Helpers/MobileHelper.php
@@ -13,4 +13,9 @@ public static function isMobile($userAgent)
 
         return false;
     }
+
+    public static function detectMobile()
+    {
+        return isset($_SERVER['HTTP_USER_AGENT']) && self::isMobile($_SERVER['HTTP_USER_AGENT']);
+    }
 }
diff --git a/ProcessMaker/Http/Controllers/Api/ProcessController.php b/ProcessMaker/Http/Controllers/Api/ProcessController.php
index b55cd6a597..e6000c96bb 100644
--- a/ProcessMaker/Http/Controllers/Api/ProcessController.php
+++ b/ProcessMaker/Http/Controllers/Api/ProcessController.php
@@ -45,7 +45,7 @@ class ProcessController extends Controller
 {
     const CAROUSEL_TYPES = [
         'IMAGE' => 'image',
-        'EMBED' => 'embed'
+        'EMBED' => 'embed',
     ];
 
     /**
@@ -128,6 +128,7 @@ public function index(Request $request)
                     'id' => $item['id'],
                     'events'=> $item['start_events']];
             });
+
             return new ApiCollection($modifiedCollection);
         }
 
@@ -402,7 +403,7 @@ public function store(Request $request)
      * @param Process $process
      * @return ResponseFactory|Response
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Put(
      *     path="/processes/{processId}",
@@ -520,7 +521,7 @@ public function update(Request $request, Process $process)
     public function updateBpmn(Request $request, Process $process)
     {
         $request->validate(Process::rules($process));
-        
+
         // bpmn validation
         if ($schemaErrors = $this->validateBpmn($request)) {
             $warnings = [];
@@ -557,7 +558,8 @@ public function updateBpmn(Request $request, Process $process)
         ], 200);
     }
 
-    private function updateSubprocessElement($parentProcess, $request, $process) {
+    private function updateSubprocessElement($parentProcess, $request, $process)
+    {
         $definitions = $parentProcess->getDefinitions();
         $elements = $definitions->getElementsByTagName('callActivity');
         foreach ($elements as $element) {
@@ -584,7 +586,7 @@ private function updateSubprocessElement($parentProcess, $request, $process) {
      * @param Process $process
      * @return ResponseFactory|Response
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Put(
      *     path="/processes/{processId}/draft",
@@ -948,7 +950,7 @@ public function startProcesses(Request $request)
      * @param Process $process
      * @return ResponseFactory|Response
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Put(
      *     path="/processes/{processId}/restore",
@@ -1294,7 +1296,7 @@ public function import_ready($code)
      *
      * @return resource
      *
-     * @throws \Throwable
+     * @throws Throwable
      *
      * @OA\Post(
      *     path="/processes/{process_id}/import/assignments",
@@ -1440,7 +1442,7 @@ public function importAssignments(Process $process, Request $request)
      * @param Process $process
      * @param Request $request
      *
-     * @return \ProcessMaker\Http\Resources\ProcessRequests
+     * @return ProcessRequests
      *
      * @OA\Post(
      *     path="/process_events/{process_id}",
@@ -1778,7 +1780,7 @@ public function deleteMediaImages(Request $request, Process $process)
      * @param string $uuid
      * @param string $collectionName
      * @return bool
-    */
+     */
     private function deleteImage(Process $process, $uuid, $collectionName)
     {
         // Retrieve the media image by UUID and collection name
@@ -1788,6 +1790,7 @@ private function deleteImage(Process $process, $uuid, $collectionName)
         // If the media image exists, delete it and return true
         if ($mediaImagen) {
             $mediaImagen->delete();
+
             return true;
         } else {
             // Otherwise, return false
diff --git a/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php b/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
index a25e7452e6..40e7cdd9dd 100644
--- a/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
+++ b/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
@@ -12,6 +12,7 @@
 use ProcessMaker\Models\Media;
 use ProcessMaker\Models\Process;
 use ProcessMaker\Models\ProcessLaunchpad;
+use ProcessMaker\Models\ProcessRequest;
 
 class ProcessLaunchpadController extends Controller
 {
@@ -24,7 +25,9 @@ public function getProcesses(Request $request)
         $processes = Process::nonSystem()->active();
         // Filter by category
         $category = $request->input('category', null);
-        if (!empty($category)) {
+        if ($category === 'recent') {
+            $processes->orderByRecentRequests();
+        } elseif (!empty($category)) {
             $processes->processCategory($category);
         }
         // Filter pmql
@@ -54,9 +57,30 @@ public function getProcesses(Request $request)
             $process->launchpad = ProcessLaunchpad::getLaunchpad($launchpad, $process->id);
         }
 
+        $process = $processes->map(function ($process) {
+            $process->counts = $this->getCounts($process->id);
+        });
+
         return new ProcessCollection($processes);
     }
 
+    protected function getCounts($processId)
+    {
+        $result = ProcessRequest::where('process_id', $processId)
+            ->selectRaw('status, count(*) as count')
+            ->groupBy('status')
+            ->get();
+
+        $completed = $result->where('status', 'COMPLETED')->first()?->count ?? 0;
+        $in_progress = $result->where('status', 'ACTIVE')->first()?->count ?? 0;
+
+        return [
+            'completed' => $completed,
+            'in_progress' => $in_progress,
+            'total' => $completed + $in_progress,
+        ];
+    }
+
     /**
      * Get the size of the page.
      * per_page=# (integer, the page requested) (Default: 10).
@@ -83,7 +107,12 @@ public function index(Request $request, Process $process)
             }])
             ->where('id', $process->id)
             ->get()
-            ->toArray();
+            ->map(function ($process) use ($request) {
+                $process->counts = $this->getCounts($process->id);
+                $process->bookmark_id = Bookmark::getBookmarked(true, $process->id, $request->user()->id);
+
+                return $process;
+            });
 
         return new ApiResource($processes);
     }
@@ -120,9 +149,9 @@ public function destroy(ProcessLaunchpad $launch)
         return response([], 204);
     }
 
-   /**
-    * Store the elements related to the carousel [IMAGE, EMBED URL]
-    */
+    /**
+     * Store the elements related to the carousel [IMAGE, EMBED URL]
+     */
     public function saveContentCarousel(Request $request, Process $process)
     {
         $contentCarousel = $request->input('imagesCarousel');
@@ -144,7 +173,6 @@ public function saveContentCarousel(Request $request, Process $process)
                         // Nothing
                         break;
                 }
-
             }
         }
     }
diff --git a/ProcessMaker/Http/Controllers/Api/TaskDraftController.php b/ProcessMaker/Http/Controllers/Api/TaskDraftController.php
index d9b4c6bae8..a721e6c434 100644
--- a/ProcessMaker/Http/Controllers/Api/TaskDraftController.php
+++ b/ProcessMaker/Http/Controllers/Api/TaskDraftController.php
@@ -12,6 +12,19 @@
 
 class TaskDraftController extends Controller
 {
+    public function index(Request $request, ProcessRequestToken $task)
+    {
+        $search = ['task_id' => $task->id];
+        $draft = TaskDraft::where($search)->first();
+
+        if ($draft) {
+            $draftData = $draft->data;
+            return new ApiResource($draftData);
+        }
+
+        return new ApiResource(null);
+    }
+
     public function update(Request $request, ProcessRequestToken $task)
     {
         $search = ['task_id' => $task->id];
@@ -24,7 +37,6 @@ public function update(Request $request, ProcessRequestToken $task)
         }
         $draft->data = $data;
         $draft->saveOrFail();
-
         return new ApiResource($draft);
     }
 
diff --git a/ProcessMaker/Http/Controllers/Auth/LoginController.php b/ProcessMaker/Http/Controllers/Auth/LoginController.php
index 4b3d7cf925..61ed085d2b 100644
--- a/ProcessMaker/Http/Controllers/Auth/LoginController.php
+++ b/ProcessMaker/Http/Controllers/Auth/LoginController.php
@@ -277,11 +277,11 @@ public function loggedOut(Request $request)
      * Handle a login request to the application.
      * Overrides the original login action.
      *
-     * @param  \Illuminate\Http\Request $request
-     * @param  \ProcessMaker\Models\User $user
+     * @param  Request $request
+     * @param  User $user
      * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\Response|\Illuminate\Http\JsonResponse
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     public function login(Request $request, User $user)
     {
@@ -340,7 +340,7 @@ public function login(Request $request, User $user)
     /**
      * Throws locked error message
      *
-     * @throws \Illuminate\Validation\ValidationException
+     * @throws ValidationException
      */
     protected function throwLockedLoginResponse()
     {
diff --git a/ProcessMaker/Http/Controllers/ProcessController.php b/ProcessMaker/Http/Controllers/ProcessController.php
index 9da007d074..74bb1600bd 100644
--- a/ProcessMaker/Http/Controllers/ProcessController.php
+++ b/ProcessMaker/Http/Controllers/ProcessController.php
@@ -124,7 +124,7 @@ public function edit(Process $process)
             'canEditData',
             'addons',
             'assignedProjects',
-            'isDraft'
+            'isDraft',
         ]));
     }
 
diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
index 7e333e24a7..4c394861f8 100644
--- a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
+++ b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -5,12 +5,13 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Helpers\MobileHelper;
 use ProcessMaker\Http\Controllers\Controller;
 use ProcessMaker\Managers\ScreenBuilderManager;
-use ProcessMaker\Models\Process;
 use ProcessMaker\Models\Bookmark;
-use ProcessMaker\Models\ProcessLaunchpad;
+use ProcessMaker\Models\Process;
 use ProcessMaker\Models\ProcessCategory;
+use ProcessMaker\Models\ProcessLaunchpad;
 use ProcessMaker\Traits\HasControllerAddons;
 
 /**
@@ -22,7 +23,7 @@
 class ProcessesCatalogueController extends Controller
 {
     use HasControllerAddons;
-    
+
     public function index(Request $request, Process $process = null)
     {
         $manager = app(ScreenBuilderManager::class);
@@ -33,6 +34,13 @@ public function index(Request $request, Process $process = null)
             $process->launchpad = ProcessLaunchpad::getLaunchpad(true, $process->id);
             $process->bookmark_id = Bookmark::getBookmarked(true, $process->id, $currentUser['id']);
         }
+
+        if (MobileHelper::detectMobile()) {
+            $title = __('Process Browser');
+
+            return view('processes-catalogue.mobile', compact('title', 'process', 'currentUser', 'manager'));
+        }
+
         return view('processes-catalogue.index', compact('process', 'currentUser', 'manager'));
     }
 }
diff --git a/ProcessMaker/Http/Controllers/TaskController.php b/ProcessMaker/Http/Controllers/TaskController.php
index f66d143828..cb8ccdc17d 100644
--- a/ProcessMaker/Http/Controllers/TaskController.php
+++ b/ProcessMaker/Http/Controllers/TaskController.php
@@ -165,8 +165,12 @@ public function edit(ProcessRequestToken $task, string $preview = '')
 
     public function quickFillEdit(ProcessRequestToken $task)
     {
+        $screenVersion = $task->getScreenVersion();
+        $screenFields = $screenVersion ? $screenVersion->screenFilteredFields() : [];
+
         return view('tasks.editQuickFill', [
             'task' => $task,
+            'screenFields' => $screenFields,
         ]);
     }
 }
diff --git a/ProcessMaker/Models/Process.php b/ProcessMaker/Models/Process.php
index efa6d91c04..35526657be 100644
--- a/ProcessMaker/Models/Process.php
+++ b/ProcessMaker/Models/Process.php
@@ -1162,29 +1162,34 @@ public function manageCustomRoutes()
                         break;
 
                     default:
-                        if ($webEntryProperties->webentryRouteConfig->firstUrlSegment !== '') {
-                            $webentryRouteConfig = $webEntryProperties->webentryRouteConfig;
-                            try {
-                                WebentryRoute::updateOrCreate(
-                                    [
-                                        'process_id' => $this->id,
-                                        'node_id' => $webentryRouteConfig->nodeId,
-                                    ],
-                                    [
-                                        'first_segment' => $webentryRouteConfig->firstUrlSegment,
-                                        'params' => $webentryRouteConfig->parameters,
-                                    ]
-                                );
-                            } catch (\Exception $e) {
-                                \Log::info('*** Error: ' . $e->getMessage());
-                            }
-                        }
+                        $this->manageWebentryRoute($webEntryProperties);
                         break;
                 }
             }
         }
     }
 
+    private function manageWebentryRoute($webEntryProperties)
+    {
+        if ($webEntryProperties->webentryRouteConfig->firstUrlSegment !== '') {
+            $webentryRouteConfig = $webEntryProperties->webentryRouteConfig;
+            try {
+                WebentryRoute::updateOrCreate(
+                    [
+                        'process_id' => $this->id,
+                        'node_id' => $webentryRouteConfig->nodeId,
+                    ],
+                    [
+                        'first_segment' => $webentryRouteConfig->firstUrlSegment,
+                        'params' => $webentryRouteConfig->parameters,
+                    ]
+                );
+            } catch (Exception $e) {
+                \Log::info('*** Error: ' . $e->getMessage());
+            }
+        }
+    }
+
     /**
      * Get node element attributes
      *
@@ -1250,7 +1255,7 @@ private function getStartEventPermissions(User $user)
     /**
      * Process events relationship.
      *
-     * @return \ProcessMaker\Models\ProcessEvents
+     * @return ProcessEvents
      */
     public function events()
     {
@@ -1287,7 +1292,7 @@ public function launchpad()
     /**
      * Assignments of the process.
      *
-     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     * @return HasMany
      */
     public function assignments()
     {
@@ -1616,7 +1621,7 @@ private function validateSchema(BpmnDocument $document)
     private function deleteUnusedCustomRoutes($url, $processId, $nodeId)
     {
         // Delete unused custom routes
-        $customRoute = webentryRoute::where('process_id', $processId)->where('node_id', $nodeId)->first();
+        $customRoute = WebentryRoute::where('process_id', $processId)->where('node_id', $nodeId)->first();
         if ($customRoute) {
             $customRoute->delete();
         }
@@ -1751,9 +1756,9 @@ public function scopeFilter($query, $filterStr)
                  ->orWhere('processes.description', 'like', $filter)
                  ->orWhere('processes.status', '=', $filterStr)
                  ->orWhereHas('user', function ($query) use ($filter) {
-                    $query->where('firstname', 'like', $filter)
-                        ->orWhere('lastname', 'like', $filter);
-                })
+                     $query->where('firstname', 'like', $filter)
+                         ->orWhere('lastname', 'like', $filter);
+                 })
                  ->orWhereIn('processes.id', function ($qry) use ($filter) {
                      $qry->select('assignable_id')
                          ->from('category_assignments')
@@ -1797,4 +1802,18 @@ public function hasAlternative()
     {
         return true;
     }
+
+    public function scopeOrderByRecentRequests($query)
+    {
+        return $query->orderByDesc(
+            ProcessRequest::select('id')
+                // User has participated
+                ->whereHas('tokens', function ($q) {
+                    $q->where('user_id', Auth::user()->id);
+                })
+                ->whereColumn('process_id', 'processes.id')
+                ->orderByDesc('id') // using ID because created_at is not indexed
+                ->limit(1)
+        );
+    }
 }
diff --git a/ProcessMaker/Models/ProcessRequest.php b/ProcessMaker/Models/ProcessRequest.php
index 5ab2a1f681..accec25261 100644
--- a/ProcessMaker/Models/ProcessRequest.php
+++ b/ProcessMaker/Models/ProcessRequest.php
@@ -527,10 +527,11 @@ public function summary()
                 $result[] = [
                     'key' => $key,
                     'value' => $value,
-                    'type' => $type
+                    'type' => $type,
                 ];
             }
         }
+
         return $result;
     }
 
diff --git a/resources/img/pagination-images/first.svg b/resources/img/pagination-images/first.svg
new file mode 100644
index 0000000000..7399ee56fa
--- /dev/null
+++ b/resources/img/pagination-images/first.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35967 11.7681C8.6565 12.015 9.07204 12.0712 9.42511 11.9056C9.77817 11.74 10 11.3869 10 10.9995V1.00134C10 0.613911 9.77504 0.260851 9.42511 0.0952558C9.07517 -0.070339 8.65962 -0.0172236 8.35967 0.232731L2.36077 5.23182L2.00146 5.53176V1.00134C2.00146 0.448316 1.55467 0.00152292 1.00164 0.00152292C0.44862 0.00152292 0.00182629 0.448316 0.00182629 1.00134V10.9995C0.00182629 11.5525 0.44862 11.9993 1.00164 11.9993C1.55467 11.9993 2.00146 11.5525 2.00146 10.9995V6.46909L2.36077 6.76904L8.35967 11.7681Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/last.svg b/resources/img/pagination-images/last.svg
new file mode 100644
index 0000000000..621fd4a98e
--- /dev/null
+++ b/resources/img/pagination-images/last.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.64033 11.7681C2.3435 12.015 1.92796 12.0712 1.57489 11.9056C1.22183 11.74 1 11.3869 1 10.9995V1.00134C1 0.613911 1.22496 0.260851 1.57489 0.0952558C1.92483 -0.070339 2.34038 -0.0172236 2.64033 0.232731L8.63923 5.23182L8.99854 5.53176V1.00134C8.99854 0.448316 9.44533 0.00152292 9.99836 0.00152292C10.5514 0.00152292 10.9982 0.448316 10.9982 1.00134V10.9995C10.9982 11.5525 10.5514 11.9993 9.99836 11.9993C9.44533 11.9993 8.99854 11.5525 8.99854 10.9995V6.46909L8.63923 6.76904L2.64033 11.7681Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/next.svg b/resources/img/pagination-images/next.svg
new file mode 100644
index 0000000000..99343901d6
--- /dev/null
+++ b/resources/img/pagination-images/next.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.08203 5.16524L2.151 0.230924C1.50566 -0.305821 0.527344 0.152909 0.527344 0.992042V11.008C0.527344 11.8471 1.50566 12.3058 2.151 11.7691L8.08235 6.83476C8.60411 6.40069 8.6038 5.59931 8.08203 5.16524Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/previous.svg b/resources/img/pagination-images/previous.svg
new file mode 100644
index 0000000000..499314c292
--- /dev/null
+++ b/resources/img/pagination-images/previous.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.917967 5.16524L6.849 0.230924C7.49434 -0.305821 8.47266 0.152909 8.47266 0.992042V11.008C8.47266 11.8471 7.49434 12.3058 6.849 11.7691L0.917655 6.83476C0.395888 6.40069 0.3962 5.59931 0.917967 5.16524Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/smartinbox-images/open-case.svg b/resources/img/smartinbox-images/open-case.svg
new file mode 100644
index 0000000000..463e6a30fe
--- /dev/null
+++ b/resources/img/smartinbox-images/open-case.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.62643 0.949275C4.63442 0.997227 4.64241 1.04518 4.66639 1.09313C4.68237 1.14108 4.71434 1.18104 4.73831 1.221C4.7543 1.25297 4.76229 1.28494 4.78627 1.30892C4.79426 1.3249 4.81024 1.3249 4.82623 1.34088C4.83422 1.34888 4.84221 1.36486 4.8502 1.38084C4.87418 1.40482 4.90615 1.41281 4.93811 1.43679C4.97807 1.46876 5.01803 1.49273 5.06599 1.51671C5.11394 1.54068 5.16189 1.54868 5.20984 1.56466C5.24181 1.57265 5.27378 1.58864 5.30575 1.59663H8.69436C8.69436 1.59663 8.75829 1.56466 8.79026 1.55667C8.83821 1.54068 8.88617 1.53269 8.93412 1.50872C8.98207 1.48474 9.02203 1.46076 9.06199 1.4288C9.09396 1.40482 9.12593 1.39683 9.1499 1.37285C9.15789 1.36486 9.16589 1.34888 9.17388 1.33289C9.18187 1.3249 9.19785 1.31691 9.21384 1.30092C9.23781 1.27695 9.24581 1.23699 9.26179 1.21301C9.28577 1.17305 9.31773 1.13309 9.33372 1.08514C9.3497 1.03719 9.35769 0.989235 9.37368 0.941283C9.37368 0.909315 9.39765 0.877347 9.39765 0.837387C9.39765 0.821403 9.39765 0.805419 9.39765 0.789435C9.39765 0.773451 9.39765 0.757467 9.39765 0.741483C9.39765 0.709515 9.38167 0.677547 9.37368 0.637587C9.36569 0.589635 9.35769 0.541683 9.33372 0.493731C9.31773 0.445779 9.28577 0.405819 9.26179 0.365859C9.24581 0.333891 9.23781 0.301923 9.21384 0.277947C9.20585 0.261963 9.18986 0.261963 9.17388 0.245979C9.16589 0.237987 9.15789 0.222003 9.1499 0.206019C9.12593 0.182043 9.09396 0.174051 9.06199 0.150075C9.02203 0.118106 8.98207 0.0941305 8.93412 0.0701545C8.88617 0.0461784 8.83821 0.0381864 8.79026 0.0222024C8.75829 0.0142104 8.72633 -0.00177362 8.69436 -0.00976562H5.30575C5.30575 -0.00976562 5.24181 0.0222024 5.20984 0.0301944C5.16189 0.0461784 5.11394 0.0541704 5.06599 0.0781465C5.01803 0.102122 4.97807 0.126098 4.93811 0.158067C4.90615 0.182043 4.87418 0.190035 4.8502 0.214011C4.84221 0.222003 4.83422 0.237987 4.82623 0.253971C4.81823 0.261963 4.80225 0.269955 4.78627 0.285939C4.76229 0.309915 4.7543 0.349875 4.73831 0.373851C4.71434 0.413811 4.68237 0.453771 4.66639 0.501723C4.6504 0.549675 4.64241 0.597627 4.62643 0.645579C4.62643 0.677547 4.60245 0.709515 4.60245 0.749475C4.60245 0.765459 4.60245 0.781443 4.60245 0.797427C4.60245 0.813411 4.60245 0.829395 4.60245 0.845379C4.60245 0.877347 4.61843 0.909315 4.62643 0.949275ZM12.9221 1.27695C12.8502 1.20502 12.7623 1.13309 12.6824 1.07715C12.4186 0.901323 12.1149 0.805419 11.7953 0.805419H10.9961V1.60462C10.9961 2.0282 10.8282 2.43579 10.5245 2.73149C10.4526 2.80342 10.3647 2.87535 10.2848 2.93129C10.021 3.10712 9.71733 3.20302 9.39765 3.20302H4.60245C4.28277 3.20302 3.97907 3.10712 3.71534 2.93129C3.62742 2.87535 3.5475 2.80342 3.47558 2.73149C3.17188 2.4278 3.00405 2.0282 3.00405 1.60462V0.805419H2.20485C1.88517 0.805419 1.58147 0.901323 1.31773 1.07715C1.22982 1.13309 1.1499 1.20502 1.07797 1.27695C0.774277 1.58064 0.606445 1.98024 0.606445 2.40382V14.3918C0.606445 14.8154 0.774277 15.223 1.07797 15.5187C1.38167 15.8224 1.78127 15.9902 2.20485 15.9902H11.7953C12.2188 15.9902 12.6264 15.8224 12.9221 15.5187C13.2258 15.215 13.3937 14.8154 13.3937 14.3918V2.40382C13.3937 1.98024 13.2258 1.57265 12.9221 1.27695ZM3.83522 7.0232C3.84321 6.97525 3.8512 6.9273 3.87518 6.87935C3.89915 6.83139 3.93112 6.79143 3.96309 6.74348C3.98706 6.70352 4.01104 6.66356 4.04301 6.63159C4.09096 6.59163 4.13891 6.55967 4.19486 6.5277C4.22682 6.50372 4.25879 6.47974 4.29875 6.46376C4.39466 6.4238 4.49056 6.40782 4.59446 6.40782H9.38966C9.49356 6.40782 9.59745 6.43179 9.68537 6.46376C9.72533 6.47974 9.75729 6.51171 9.78926 6.5277C9.84521 6.55967 9.89316 6.58364 9.94111 6.63159C9.97308 6.66356 9.99705 6.71151 10.021 6.74348C10.053 6.79143 10.093 6.83139 10.1089 6.87935C10.1329 6.9273 10.1329 6.97525 10.1489 7.0232C10.1569 7.07115 10.1809 7.1271 10.1809 7.17505C10.1809 7.223 10.1729 7.27095 10.1649 7.3269C10.1569 7.37485 10.1489 7.43079 10.1329 7.47875C10.1169 7.5267 10.085 7.56666 10.061 7.60662C10.037 7.65457 10.013 7.69453 9.97308 7.73449C9.94111 7.77445 9.90115 7.79843 9.86119 7.83039C9.82123 7.86236 9.77328 7.89433 9.73332 7.91831C9.69336 7.94228 9.64541 7.95027 9.59745 7.95827C9.53352 7.97425 9.46159 7.99823 9.39765 7.99823H4.60245C4.53052 7.99823 4.46658 7.97425 4.40265 7.95827C4.3547 7.94228 4.30675 7.93429 4.26678 7.91831C4.21883 7.89433 4.17887 7.86236 4.13891 7.83039C4.09895 7.79843 4.05899 7.77445 4.02702 7.73449C3.99506 7.69453 3.97108 7.64658 3.93911 7.60662C3.91514 7.56666 3.88317 7.5267 3.86718 7.47875C3.8512 7.43079 3.84321 7.37485 3.83522 7.3269C3.83522 7.27895 3.81124 7.23099 3.81923 7.17505C3.81923 7.11911 3.83522 7.07115 3.8512 7.0232H3.83522ZM9.96509 10.9633C9.81324 11.1151 9.61344 11.195 9.39765 11.195H4.50655C4.30674 11.1631 4.11494 11.0672 3.98706 10.9073C3.85919 10.7475 3.78726 10.5477 3.80325 10.3479C3.81124 10.1481 3.90714 9.95627 4.051 9.81241C4.20285 9.67655 4.39466 9.59663 4.60245 9.59663H9.39765C9.61344 9.59663 9.81324 9.68454 9.96509 9.8284C10.1169 9.97225 10.1969 10.18 10.1969 10.3958C10.1969 10.6116 10.1089 10.8114 9.96509 10.9633Z" fill="#6A7888"/>
+</svg>
diff --git a/resources/js/app-layout.js b/resources/js/app-layout.js
index fd51785742..68e845aeae 100644
--- a/resources/js/app-layout.js
+++ b/resources/js/app-layout.js
@@ -220,6 +220,7 @@ if (isMobileNavbar === "true") {
     },
     data() {
       return {
+        display: true,
       };
     },
     mounted() {
diff --git a/resources/js/common/PMColumnFilterPopoverCommonMixin.js b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
index b2f6aa73ce..ba50c02a6f 100644
--- a/resources/js/common/PMColumnFilterPopoverCommonMixin.js
+++ b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
@@ -2,6 +2,10 @@ import { get, cloneDeep } from "lodash";
 
 const PMColumnFilterCommonMixin = {
   props: {
+    autosaveFilter: {
+      type: Boolean,
+      default: true
+    },
     advancedFilterProp: {
       type: Object,
       default: null
@@ -55,7 +59,9 @@ const PMColumnFilterCommonMixin = {
         order
       };
 
-      ProcessMaker.apiClient.put(url, config);
+      if (!this.autosaveFilter) {
+        ProcessMaker.apiClient.put(url, config);
+      }
       window.ProcessMaker.advanced_filter = config;
       window.ProcessMaker.EventBus.$emit("advanced-filter-updated");
     },
@@ -266,7 +272,13 @@ const PMColumnFilterCommonMixin = {
         this.tableHeaders[i].sortDesc = false;
       }
       for (let i in this.tableHeaders) {
-        if (this.tableHeaders[i].field === this.orderBy) {
+        if (this.tableHeaders[i].order_column !== undefined) {
+          if (this.orderBy === this.tableHeaders[i].order_column) {
+            let sort = this.sortOrder[0].direction;
+            this.tableHeaders[i].sortAsc = (sort.toLowerCase() === "asc");
+            this.tableHeaders[i].sortDesc = (sort.toLowerCase() === "desc");
+          }
+        } else if (this.orderBy.endsWith(this.tableHeaders[i].field)) {
           let sort = this.sortOrder[0].direction;
           this.tableHeaders[i].sortAsc = (sort.toLowerCase() === "asc");
           this.tableHeaders[i].sortDesc = (sort.toLowerCase() === "desc");
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue
index 5b8f1f8f81..b87a22d0dd 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.50002 2H9.50002C9.63263 2 9.75981 1.94732 9.85358 1.85355C9.94735 1.75979 10 1.63261 10 1.5V0.5C10 0.367392 9.94735 0.240215 9.85358 0.146447C9.75981 0.0526784 9.63263 0 9.50002 0H7.50002C7.36742 0 7.24024 0.0526784 7.14647 0.146447C7.0527 0.240215 7.00002 0.367392 7.00002 0.5V1.5C7.00002 1.63261 7.0527 1.75979 7.14647 1.85355C7.24024 1.94732 7.36742 2 7.50002 2ZM7.50002 6H11.5C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V4.5C12 4.36739 11.9473 4.24021 11.8536 4.14645C11.7598 4.05268 11.6326 4 11.5 4H7.50002C7.36742 4 7.24024 4.05268 7.14647 4.14645C7.0527 4.24021 7.00002 4.36739 7.00002 4.5V5.5C7.00002 5.63261 7.0527 5.75979 7.14647 5.85355C7.24024 5.94732 7.36742 6 7.50002 6ZM15.5 12H7.50002C7.36742 12 7.24024 12.0527 7.14647 12.1464C7.0527 12.2402 7.00002 12.3674 7.00002 12.5V13.5C7.00002 13.6326 7.0527 13.7598 7.14647 13.8536C7.24024 13.9473 7.36742 14 7.50002 14H15.5C15.6326 14 15.7598 13.9473 15.8536 13.8536C15.9473 13.7598 16 13.6326 16 13.5V12.5C16 12.3674 15.9473 12.2402 15.8536 12.1464C15.7598 12.0527 15.6326 12 15.5 12ZM7.50002 10H13.5C13.6326 10 13.7598 9.94732 13.8536 9.85355C13.9473 9.75979 14 9.63261 14 9.5V8.5C14 8.36739 13.9473 8.24021 13.8536 8.14645C13.7598 8.05268 13.6326 8 13.5 8H7.50002C7.36742 8 7.24024 8.05268 7.14647 8.14645C7.0527 8.24021 7.00002 8.36739 7.00002 8.5V9.5C7.00002 9.63261 7.0527 9.75979 7.14647 9.85355C7.24024 9.94732 7.36742 10 7.50002 10ZM5.50002 10H4.00002V0.5C4.00002 0.367392 3.94735 0.240215 3.85358 0.146447C3.75981 0.0526784 3.63263 0 3.50002 0H2.50002C2.36742 0 2.24024 0.0526784 2.14647 0.146447C2.0527 0.240215 2.00002 0.367392 2.00002 0.5V10H0.500024C0.0565866 10 -0.167788 10.5387 0.147212 10.8534L2.64721 13.8534C2.74097 13.9471 2.8681 13.9998 3.00065 13.9998C3.1332 13.9998 3.26033 13.9471 3.35409 13.8534L5.85409 10.8534C6.16721 10.5394 5.9444 10 5.50002 10Z" fill="#6A7888"/>
+  <svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.50002 2H9.50002C9.63263 2 9.75981 1.94732 9.85358 1.85355C9.94735 1.75979 10 1.63261 10 1.5V0.5C10 0.367392 9.94735 0.240215 9.85358 0.146447C9.75981 0.0526784 9.63263 0 9.50002 0H7.50002C7.36742 0 7.24024 0.0526784 7.14647 0.146447C7.0527 0.240215 7.00002 0.367392 7.00002 0.5V1.5C7.00002 1.63261 7.0527 1.75979 7.14647 1.85355C7.24024 1.94732 7.36742 2 7.50002 2ZM7.50002 6H11.5C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V4.5C12 4.36739 11.9473 4.24021 11.8536 4.14645C11.7598 4.05268 11.6326 4 11.5 4H7.50002C7.36742 4 7.24024 4.05268 7.14647 4.14645C7.0527 4.24021 7.00002 4.36739 7.00002 4.5V5.5C7.00002 5.63261 7.0527 5.75979 7.14647 5.85355C7.24024 5.94732 7.36742 6 7.50002 6ZM15.5 12H7.50002C7.36742 12 7.24024 12.0527 7.14647 12.1464C7.0527 12.2402 7.00002 12.3674 7.00002 12.5V13.5C7.00002 13.6326 7.0527 13.7598 7.14647 13.8536C7.24024 13.9473 7.36742 14 7.50002 14H15.5C15.6326 14 15.7598 13.9473 15.8536 13.8536C15.9473 13.7598 16 13.6326 16 13.5V12.5C16 12.3674 15.9473 12.2402 15.8536 12.1464C15.7598 12.0527 15.6326 12 15.5 12ZM7.50002 10H13.5C13.6326 10 13.7598 9.94732 13.8536 9.85355C13.9473 9.75979 14 9.63261 14 9.5V8.5C14 8.36739 13.9473 8.24021 13.8536 8.14645C13.7598 8.05268 13.6326 8 13.5 8H7.50002C7.36742 8 7.24024 8.05268 7.14647 8.14645C7.0527 8.24021 7.00002 8.36739 7.00002 8.5V9.5C7.00002 9.63261 7.0527 9.75979 7.14647 9.85355C7.24024 9.94732 7.36742 10 7.50002 10ZM5.50002 10H4.00002V0.5C4.00002 0.367392 3.94735 0.240215 3.85358 0.146447C3.75981 0.0526784 3.63263 0 3.50002 0H2.50002C2.36742 0 2.24024 0.0526784 2.14647 0.146447C2.0527 0.240215 2.00002 0.367392 2.00002 0.5V10H0.500024C0.0565866 10 -0.167788 10.5387 0.147212 10.8534L2.64721 13.8534C2.74097 13.9471 2.8681 13.9998 3.00065 13.9998C3.1332 13.9998 3.26033 13.9471 3.35409 13.8534L5.85409 10.8534C6.16721 10.5394 5.9444 10 5.50002 10Z"/>
   </svg>
 </template>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue
index 7e6adc61a1..14ff423fbf 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.49996 13H7.49996C7.36735 13 7.24018 13.0527 7.14641 13.1464C7.05264 13.2402 6.99996 13.3674 6.99996 13.5V14.5C6.99996 14.6326 7.05264 14.7598 7.14641 14.8536C7.24018 14.9473 7.36735 15 7.49996 15H9.49996C9.63257 15 9.75975 14.9473 9.85351 14.8536C9.94728 14.7598 9.99996 14.6326 9.99996 14.5V13.5C9.99996 13.3674 9.94728 13.2402 9.85351 13.1464C9.75975 13.0527 9.63257 13 9.49996 13ZM0.499961 5H1.99996V14.5C1.99996 14.6326 2.05264 14.7598 2.14641 14.8536C2.24018 14.9473 2.36735 15 2.49996 15H3.49996C3.63257 15 3.75975 14.9473 3.85351 14.8536C3.94728 14.7598 3.99996 14.6326 3.99996 14.5V5H5.49996C5.94402 5 6.16809 4.46125 5.8534 4.14656L3.3534 1.14656C3.25964 1.05287 3.13251 1.00023 2.99996 1.00023C2.86741 1.00023 2.74028 1.05287 2.64652 1.14656L0.146524 4.14656C-0.167226 4.46063 0.0552737 5 0.499961 5ZM13.5 5H7.49996C7.36735 5 7.24018 5.05268 7.14641 5.14645C7.05264 5.24021 6.99996 5.36739 6.99996 5.5V6.5C6.99996 6.63261 7.05264 6.75979 7.14641 6.85355C7.24018 6.94732 7.36735 7 7.49996 7H13.5C13.6326 7 13.7597 6.94732 13.8535 6.85355C13.9473 6.75979 14 6.63261 14 6.5V5.5C14 5.36739 13.9473 5.24021 13.8535 5.14645C13.7597 5.05268 13.6326 5 13.5 5ZM11.5 9H7.49996C7.36735 9 7.24018 9.05268 7.14641 9.14645C7.05264 9.24021 6.99996 9.36739 6.99996 9.5V10.5C6.99996 10.6326 7.05264 10.7598 7.14641 10.8536C7.24018 10.9473 7.36735 11 7.49996 11H11.5C11.6326 11 11.7597 10.9473 11.8535 10.8536C11.9473 10.7598 12 10.6326 12 10.5V9.5C12 9.36739 11.9473 9.24021 11.8535 9.14645C11.7597 9.05268 11.6326 9 11.5 9ZM15.5 1H7.49996C7.36735 1 7.24018 1.05268 7.14641 1.14645C7.05264 1.24021 6.99996 1.36739 6.99996 1.5V2.5C6.99996 2.63261 7.05264 2.75979 7.14641 2.85355C7.24018 2.94732 7.36735 3 7.49996 3H15.5C15.6326 3 15.7597 2.94732 15.8535 2.85355C15.9473 2.75979 16 2.63261 16 2.5V1.5C16 1.36739 15.9473 1.24021 15.8535 1.14645C15.7597 1.05268 15.6326 1 15.5 1Z" fill="#6A7888"/>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.49996 13H7.49996C7.36735 13 7.24018 13.0527 7.14641 13.1464C7.05264 13.2402 6.99996 13.3674 6.99996 13.5V14.5C6.99996 14.6326 7.05264 14.7598 7.14641 14.8536C7.24018 14.9473 7.36735 15 7.49996 15H9.49996C9.63257 15 9.75975 14.9473 9.85351 14.8536C9.94728 14.7598 9.99996 14.6326 9.99996 14.5V13.5C9.99996 13.3674 9.94728 13.2402 9.85351 13.1464C9.75975 13.0527 9.63257 13 9.49996 13ZM0.499961 5H1.99996V14.5C1.99996 14.6326 2.05264 14.7598 2.14641 14.8536C2.24018 14.9473 2.36735 15 2.49996 15H3.49996C3.63257 15 3.75975 14.9473 3.85351 14.8536C3.94728 14.7598 3.99996 14.6326 3.99996 14.5V5H5.49996C5.94402 5 6.16809 4.46125 5.8534 4.14656L3.3534 1.14656C3.25964 1.05287 3.13251 1.00023 2.99996 1.00023C2.86741 1.00023 2.74028 1.05287 2.64652 1.14656L0.146524 4.14656C-0.167226 4.46063 0.0552737 5 0.499961 5ZM13.5 5H7.49996C7.36735 5 7.24018 5.05268 7.14641 5.14645C7.05264 5.24021 6.99996 5.36739 6.99996 5.5V6.5C6.99996 6.63261 7.05264 6.75979 7.14641 6.85355C7.24018 6.94732 7.36735 7 7.49996 7H13.5C13.6326 7 13.7597 6.94732 13.8535 6.85355C13.9473 6.75979 14 6.63261 14 6.5V5.5C14 5.36739 13.9473 5.24021 13.8535 5.14645C13.7597 5.05268 13.6326 5 13.5 5ZM11.5 9H7.49996C7.36735 9 7.24018 9.05268 7.14641 9.14645C7.05264 9.24021 6.99996 9.36739 6.99996 9.5V10.5C6.99996 10.6326 7.05264 10.7598 7.14641 10.8536C7.24018 10.9473 7.36735 11 7.49996 11H11.5C11.6326 11 11.7597 10.9473 11.8535 10.8536C11.9473 10.7598 12 10.6326 12 10.5V9.5C12 9.36739 11.9473 9.24021 11.8535 9.14645C11.7597 9.05268 11.6326 9 11.5 9ZM15.5 1H7.49996C7.36735 1 7.24018 1.05268 7.14641 1.14645C7.05264 1.24021 6.99996 1.36739 6.99996 1.5V2.5C6.99996 2.63261 7.05264 2.75979 7.14641 2.85355C7.24018 2.94732 7.36735 3 7.49996 3H15.5C15.6326 3 15.7597 2.94732 15.8535 2.85355C15.9473 2.75979 16 2.63261 16 2.5V1.5C16 1.36739 15.9473 1.24021 15.8535 1.14645C15.7597 1.05268 15.6326 1 15.5 1Z"/>
   </svg>
 </template>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
index f8348637a3..4b01a48d1b 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
@@ -1,5 +1,27 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
-    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
-  </svg>
+  <span>
+    <svg v-if="!columnSortAsc && !columnSortDesc && !filterApplied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+      <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+    </svg>
+    <PMColumnFilterIconAsc v-if="columnSortAsc"></PMColumnFilterIconAsc>
+    <PMColumnFilterIconDesc v-if="columnSortDesc"></PMColumnFilterIconDesc>
+    <i v-if="filterApplied" class="fas fa-filter"></i>
+  </span>
 </template>
+<script>
+
+import PMColumnFilterIconAsc from './PMColumnFilterIconAsc.vue';
+import PMColumnFilterIconDesc from './PMColumnFilterIconDesc.vue';
+
+export default {
+  components: {
+    PMColumnFilterIconAsc,
+    PMColumnFilterIconDesc
+  },
+  props: [
+    "columnSortAsc",
+    "columnSortDesc",
+    "filterApplied",
+  ],
+};
+</script>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
index 30577c932b..a7acaa5bab 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
@@ -4,7 +4,11 @@
               variant="link"
               size="sm"
               class="pm-filter-popover-button">
-      <PMColumnFilterIconThreeDots></PMColumnFilterIconThreeDots>
+      <PMColumnFilterIconThreeDots
+        :columnSortAsc="columnSortAsc"
+        :columnSortDesc="columnSortDesc"
+        :filterApplied="filterApplied"
+      />
     </b-button>
     <b-popover :container="container"
                :boundary="boundary"
@@ -40,9 +44,24 @@
   export default {
     components: {
       PMColumnFilterForm,
-      PMColumnFilterIconThreeDots
+      PMColumnFilterIconThreeDots,
     },
-    props: ["container", "boundary", "id", "type", "value", "format", "formatRange", "operators", "viewConfig", "sort", "hideSortingButtons"],
+    props: [
+      "container",
+      "boundary",
+      "id",
+      "type",
+      "value",
+      "format",
+      "formatRange",
+      "operators",
+      "viewConfig",
+      "sort",
+      "hideSortingButtons",
+      "columnSortAsc",
+      "columnSortDesc",
+      "filterApplied",
+    ],
     data() {
       return {
         popoverShow: false
diff --git a/resources/js/components/PMTable.vue b/resources/js/components/PMTable.vue
index ce90719c3e..01ab3d2c77 100644
--- a/resources/js/components/PMTable.vue
+++ b/resources/js/components/PMTable.vue
@@ -67,7 +67,7 @@
     methods: {
       tableRowMouseover(row, rowIndex) {
         let container = this.$refs.filterTable.$el;
-        let scrolledWidth = container.scrollWidth - container.clientWidth;
+        let scrolledWidth = container.scrollWidth - container.clientWidth - container.scrollLeft;
         this.$emit('onRowMouseover', row, scrolledWidth, rowIndex);
       },
       getSlotName(field) {
diff --git a/resources/js/components/shared/EllipsisMenu.vue b/resources/js/components/shared/EllipsisMenu.vue
index 7499234d74..2fe28d9926 100644
--- a/resources/js/components/shared/EllipsisMenu.vue
+++ b/resources/js/components/shared/EllipsisMenu.vue
@@ -1,11 +1,13 @@
 <template>
   <b-dropdown
     v-if="filterActions.length > 0"
+    v-b-tooltip.hover="{ placement: 'bottom', title: 'Options', variant: 'secondary', customClass: 'ellipsis-tooltip' }"
     :variant="variant ? variant : 'outlined-secondary'"
-    toggle-class="static-header"
+    :toggle-class="['static-header', { 'contracted-menu': !lauchpad }, { 'expanded-menu': lauchpad }]"
     no-flip
     lazy
     right
+    no-caret
     offset="0"
     class="ellipsis-dropdown-main static-header"
     :popper-opts="{ placement: 'bottom-end' }"
@@ -22,12 +24,14 @@
       </span>
     </template>
     <template v-else-if="lauchpad" #button-content>
-      <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
+      <i class="fas fa-ellipsis-v ellipsis-menu-icon p-0 ellipsis-icon-v" />
+      <span>
+        {{ $t('Options') }}
+      </span>
     </template>
     <template v-else #button-content>
       <span class="text-capitalize screen-toolbar-button">
-        <i class="fas fa-cog" />
-        {{ $t("Options") }}
+        <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
       </span>
     </template>
     <div v-if="divider === true">
@@ -293,4 +297,31 @@ export default {
 .static-header {
   position: static !important;
 }
+.contracted-menu {
+  width: 40px;
+  height: 40px;
+  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  background-color: #FFFFFF;
+}
+.static-header:hover {
+  background-color: #EBEEF2;
+  border-radius: 4px;
+}
+.expanded-menu {
+  color: #556271;
+  text-transform: none;
+  border-radius: 4px;
+  font-size: 16px;
+}
+.ellipsis-icon-v {
+  height: 16px;
+  width: 16px;
+}
+.ellipsis-tooltip {
+  border-radius: 4px;
+}
+.ellipsis-tooltip .arrow {
+  display: none;
+}
 </style>
diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index c7f6215aef..e982e14da5 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -21,7 +21,8 @@
             :id="`${tableName}-column-${index}`"
             :key="index"
             class="pm-table-ellipsis-column"
-            :class="{ 'pm-table-filter-applied': column.filterApplied }"
+            :class="{ 'pm-table-filter-applied': column.filterApplied || column.sortAsc || column.sortDesc }"
+            :style="{ width: column.fixed_width + 'px' }"
           >
             <div
               class="pm-table-column-header"
@@ -37,7 +38,9 @@
             <div
               v-if="index !== visibleHeaders.length - 1"
               class="pm-table-column-resizer"
-              @mousedown="startResize($event, index)"
+              @dblclick="resetSize(index)"
+              :class="{ 'resizable': column.resizable === undefined || column.resizable }"
+              @mousedown="column.resizable === undefined || column.resizable ? startResize($event, index) : null"
             />
             <b-tooltip
               v-if="column.tooltip"
@@ -74,6 +77,7 @@
           <slot :name="`row-${rowIndex}`">
             <td
               v-for="(header, index) in visibleHeaders"
+              :class="{ 'pm-table-filter-applied-tbody': header.sortAsc || header.sortDesc }"
               :key="index"
             >
               <template v-if="containsHTML(getNestedPropertyValue(row, header))">
@@ -180,6 +184,7 @@ export default {
       startX: 0,
       startWidth: 0,
       resizingColumnIndex: -1,
+      originalWidths: [],
     };
   },
   computed: {
@@ -212,6 +217,9 @@ export default {
     },
     calculateColumnWidth(widthAdjust = 1) {
       this.visibleHeaders.forEach((headerColumn, index) => {
+        if (!this.originalWidths[index]) {
+          this.originalWidths[index] = headerColumn.width || this.calculateContent(index);
+        }
         if (this.calculateContent(index) !== 0) {
           headerColumn.width = (this.calculateContent(index) * widthAdjust) - 32;
         }
@@ -250,6 +258,11 @@ export default {
         this.resizingColumnIndex = -1;
       }
     },
+    resetSize(index) {
+      if (this.originalWidths[index]) {
+        this.visibleHeaders[index].width = this.originalWidths[index];
+      }
+    },
     handleRowClick(row, event) {
       this.$emit("table-row-click", row, event);
     },
@@ -279,8 +292,6 @@ export default {
   border-right: 1px solid rgba(0, 0, 0, 0.125);
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 5px;
-  scrollbar-width: 8px;
-  scrollbar-color: #6C757D;
   max-height: calc(100vh - 150px);
   overflow: hidden;
 }
@@ -306,9 +317,12 @@ export default {
   transform: translateY(-50%);
   height: 85%;
   width: 10px;
-  cursor: col-resize;
+  cursor: default;
   border-right: 1px solid rgba(0, 0, 0, 0.125);
 }
+.pm-table-column-resizer.resizable {
+  cursor: col-resize;
+}
 .pm-table-filter {
   width: 100%;
   max-height: 400px;
@@ -326,12 +340,17 @@ export default {
   height: 56px;
 }
 .pm-table-filter th:hover {
-  background-color: #FAFBFC;
+  background-color: #F2F8FE;
   color: #1572C2;
 }
 .pm-table-filter tbody tr:hover {
-  background-color: #FAFBFC;
-  color: #1572C2;
+  background-color: #EFF5FB;
+}
+.pm-table-filter tbody tr a {
+  color: #566877;
+}
+.pm-table-filter tbody tr a:hover {
+  color: #1990FF;
 }
 .pm-table-filter thead {
   position: sticky;
@@ -363,6 +382,10 @@ export default {
   opacity: 0;
   visibility: hidden;
 }
+.pm-table-filter-applied .pm-table-filter-button {
+  opacity: 1;
+  visibility: visible;
+}
 .pm-table-ellipsis-column:hover .pm-table-filter-button {
   opacity: 1;
   visibility: visible;
@@ -406,26 +429,38 @@ export default {
   color: #1572C2;
   background-color: #F2F8FE !important;
 }
+.pm-table-filter-applied-tbody {
+  background-color: rgba(247, 249, 251, 1) !important;
+}
 .pm-table-unread-row {
-  font-weight: bold;
+  background-color: #FFFDEA;
 }
 .status-success {
-  background-color: rgba(78, 160, 117, 0.2);
-  color: rgba(78, 160, 117, 1);
+  background-color: rgba(200, 240, 207, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
 }
 .status-danger {
-  background-color:rgba(237, 72, 88, 0.2);
-  color: rgba(237, 72, 88, 1);
+  background-color:rgba(255, 199, 199, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
 }
 .status-primary {
-  background: rgba(21, 114, 194, 0.2);
-  color: rgba(21, 114, 194, 1);
+  background: rgba(184, 220, 247, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
+}
+.status-warning {
+  background: rgba(249, 232, 195, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
 }
 @-moz-document url-prefix() {
   .pm-table-truncate {
@@ -434,14 +469,6 @@ export default {
     white-space: nowrap;
   }
 }
-.pm-table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.pm-table-container::-webkit-scrollbar-thumb {
-  background-color: #6C757D;
-  border-radius: 20px;
-}
 .ellipsis-dropdown-main ul.dropdown-menu.dropdown-menu-right.show {
   max-height: 250px;
   overflow-y: auto;
diff --git a/resources/js/components/shared/FilterTableBodyMixin.js b/resources/js/components/shared/FilterTableBodyMixin.js
index d153cd7fb0..a5ceec47a1 100644
--- a/resources/js/components/shared/FilterTableBodyMixin.js
+++ b/resources/js/components/shared/FilterTableBodyMixin.js
@@ -34,7 +34,8 @@ export default {
       this.page = page;
       this.fetch();
     },
-    changePerPage(value) {
+    changePerPage(value, page) {
+      this.page = page;
       this.perPage = value;
       this.fetch();
     },
@@ -81,6 +82,6 @@ export default {
       if (e.target.offsetWidth >= e.target.scrollWidth) {
         e.preventDefault();
       }
-    }
+    },
   },
 };
diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index 0323ebb1cf..e5581f48be 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -1,29 +1,51 @@
 <template>
   <div class="pagination">
-    <button
+    <b-button
       :disabled="currentPage === 1"
       class="pagination-button"
+      variant="light"
+      @click="firstPage"
+    >
+      <img src="/img/pagination-images/first.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage === 1"
+      class="pagination-button"
+      variant="light"
       @click="previousPage"
     >
-      <strong>&lt;</strong>
-    </button>
+      <img src="/img/pagination-images/previous.svg" :alt="$t('No Image')">
+    </b-button>
 
     <input
       ref="pageInput"
       v-model="pageInput"
       type="text"
       :placeholder="pageInputPlaceholder"
-      class="pagination-button pagination-input"
+      class="pagination-input"
       @keyup.enter="redirectPage(pageInput)"
     >
 
-    <button
+    <span class="pagination-total">
+      of {{ totalPageCount }}
+    </span>
+
+    <b-button
       :disabled="currentPage >= totalPageCount"
       class="pagination-button"
+      variant="light"
       @click="nextPage"
     >
-      <strong>&gt;</strong>
-    </button>
+      <img src="/img/pagination-images/next.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage >= totalPageCount"
+      class="pagination-button"
+      variant="light"
+      @click="lastPage"
+    >
+      <img src="/img/pagination-images/last.svg" :alt="$t('No Image')">
+    </b-button>
     <span class="pagination-total">
       {{ totalItems }}
     </span>
@@ -113,7 +135,7 @@ export default {
       return `${this.meta.per_page} per Page`;
     },
     pageInputPlaceholder() {
-      return `${this.currentPage}-${this.totalPageCount}`;
+      return `${this.currentPage}`;
     },
   },
   watch: {
@@ -132,17 +154,22 @@ export default {
         this.goToPage(this.currentPage - 1);
       }
     },
-    nextPage() {
-      if (this.currentPage < this.totalPageCount) {
-        this.goToPage(this.currentPage + 1);
+    firstPage() {
+      if (this.currentPage > 1) {
+        this.goToPage(1);
       }
     },
+    nextPage() {
+      this.goToPage(this.currentPage + 1);
+    },
+    lastPage() {
+      this.goToPage(this.totalPageCount);
+    },
     goToPage(page) {
       this.$emit("page-change", page);
     },
     changePerPage(value) {
-      this.goToPage(this.defaultPage);
-      this.$emit("per-page-change", value);
+      this.$emit("per-page-change", value, this.defaultPage);
     },
     redirectPage(value) {
       this.$emit("page-change", value);
@@ -176,28 +203,37 @@ export default {
   align-items: center;
   margin-top: 20px;
   font-weight: 400;
-  font-size: 15px;
-  color: #5C5C63;
+  font-size: 16px;
+  color: #556271;
+  gap: 8px;
 }
 .pagination-button {
-  background-color: #FFFFFF;
-  border: 1px solid #CDDDEE;
-  border-radius: 8px;
-  padding: 5px 10px;
-  color: #5C5C63;
-  margin-right: 8px;
-  font-weight: 400;
-  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  border-radius: 4px;
+  padding: 8px;
+  width: 32px;
+  height:32px;
+}
+.pagination-button:focus {
+  box-shadow: 0px 0px 0px 3px rgba(72, 145, 255, 0.4);
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.5;
 }
 .pagination-button:hover {
-  background-color: #FAFBFC;
+  background-color: #EBEEF2;
+}
+.btn.disabled:hover {
+  background-color: transparent;
 }
 .pagination-current-page {
     color: #1572C2;
     font-weight: 700;
 }
 .pagination-total {
-  margin-left: 10px;
+  padding: 0px 8px 0px 8px;
 }
 .pagination-dropup {
   font-weight: 400;
@@ -213,6 +249,13 @@ export default {
   font-size: 14.5px;
   color: #5C5C63;
 }
+.pagination-input {
+  border: solid 1px;
+  border-radius: 4px;
+  width: 44px;
+  height: 32;
+  border-color: #CDDDEE;
+}
 .pagination-input::placeholder {
   text-align: center;
 }
diff --git a/resources/js/components/shared/UtilsTable.js b/resources/js/components/shared/UtilsTable.js
new file mode 100644
index 0000000000..4be0e70a86
--- /dev/null
+++ b/resources/js/components/shared/UtilsTable.js
@@ -0,0 +1,30 @@
+export const ellipsisSortClick = (categoryColumn, context)=>{
+    context.fields.forEach(column => {
+        if (column.field !== categoryColumn.field) {
+        column.direction = "none";
+        column.filterApplied = false;
+        }
+    });
+
+    if (categoryColumn.direction === "asc") {
+        categoryColumn.direction = "desc";
+    } else if (categoryColumn.direction === "desc") {
+        categoryColumn.direction = "none";
+        categoryColumn.filterApplied = false;
+    } else {
+        categoryColumn.direction = "asc";
+        categoryColumn.filterApplied = true;
+    }
+
+    if (categoryColumn.direction !== "none") {
+        const sortOrder = [
+        {
+            sortField: categoryColumn.sortField || categoryColumn.field,
+            direction: categoryColumn.direction,
+        },
+        ];
+        context.dataManager(sortOrder);
+    } else {
+        context.fetch();
+    }
+}
\ No newline at end of file
diff --git a/resources/js/components/shared/index.js b/resources/js/components/shared/index.js
index 329a35ccdf..ed7ba872c1 100644
--- a/resources/js/components/shared/index.js
+++ b/resources/js/components/shared/index.js
@@ -54,6 +54,7 @@ import DataLoading from '../../components/common/DataLoading';
 import AvatarImage from '../../components/AvatarImage';
 import FilterTableBodyMixin from "./FilterTableBodyMixin";
 import PaginationTable from "./PaginationTable.vue";
+import { ellipsisSortClick } from "./UtilsTable";
 import TaskTooltip from "../../tasks/components/TaskTooltip.vue";
 
 export {
@@ -113,5 +114,6 @@ export {
   AvatarImage,
   FilterTableBodyMixin,
   PaginationTable,
+  ellipsisSortClick,
   TaskTooltip,
 };
diff --git a/resources/js/components/templates/SelectTemplateModal.vue b/resources/js/components/templates/SelectTemplateModal.vue
index 9e9ad46d7f..fe27a59d9e 100644
--- a/resources/js/components/templates/SelectTemplateModal.vue
+++ b/resources/js/components/templates/SelectTemplateModal.vue
@@ -19,7 +19,10 @@
       @ok.prevent="onSubmit"
       @close="close"
     >
-      <template-search :type="type" :component="currentComponent" @show-details="updateModal($event)" 
+      <template-search ref="template-search"
+        :type="type" 
+        :component="currentComponent" 
+        @show-details="updateModal($event)" 
         @blank-process-button-clicked="createBlankProcess()"
         @ai-process-button-clicked="createAiProcess()"
         :showTemplateOptionsActionBar="true"
@@ -121,6 +124,11 @@
       },
       show() {
         this.$bvModal.show('selectTemplate');
+      },
+      hideBackButton() {
+        this.headerButtons[0].hidden = false;
+        this.titleButtons[0].hidden = false;
+        this.hasHeaderButtons = false;
       }
     },
     mounted() {
diff --git a/resources/js/inbox-rules/components/InboxRuleFillData.vue b/resources/js/inbox-rules/components/InboxRuleFillData.vue
index ce5a5f0364..7010f58538 100644
--- a/resources/js/inbox-rules/components/InboxRuleFillData.vue
+++ b/resources/js/inbox-rules/components/InboxRuleFillData.vue
@@ -56,7 +56,7 @@
         this.$emit("submit", data);
       });
       this.receiveEvent('taskReady', () => {
-        this.sendEvent("fillData", this.inboxRuleData);
+        this.sendEvent("fillDataOverwriteExistingFields", this.inboxRuleData);
       });
     },
     methods: {
diff --git a/resources/js/processes-catalogue/components/Bookmark.vue b/resources/js/processes-catalogue/components/Bookmark.vue
new file mode 100644
index 0000000000..2f2533d72e
--- /dev/null
+++ b/resources/js/processes-catalogue/components/Bookmark.vue
@@ -0,0 +1,87 @@
+<template>
+    <i
+      v-b-tooltip.hover.bottom
+      :title="bookmarkTitle"
+      :class="bookmarkClass"
+      @click="checkBookmark()"
+    />
+</template>
+
+<script>
+export default {
+  props: {
+    process: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      bookmarkId: null,
+    };
+  },
+  mounted() {
+    this.bookmarkId = this.process?.bookmark_id;
+  },
+  methods: {
+    checkBookmark() {
+      if (this.isBookmarked) {
+        ProcessMaker.apiClient
+          .delete(`process_bookmarks/${this.bookmarkId}`)
+          .then(() => {
+            ProcessMaker.alert(this.$t("Process removed from Bookmarked List."), "success");
+            this.$emit('bookmark-updated', false);
+            this.bookmarkId = null;
+          });
+        return;
+      }
+      ProcessMaker.apiClient
+        .post(`process_bookmarks/${this.process.id}`)
+        .then(response => {
+          console.log(response);
+          ProcessMaker.alert(this.$t("Process added to Bookmarked List."), "success");
+          this.$emit('bookmark-updated', true);
+          this.bookmarkId = response.data.newId;
+        });
+    },
+  },
+  computed: {
+    isBookmarked() {
+      return this.bookmarkId && this.bookmarkId !== 0;
+    },
+    bookmarkClass() {
+      return this.isBookmarked ? "fas fa-bookmark marked bookmark" : "fas fa-bookmark unmarked bookmark";
+    },
+    bookmarkTitle() {
+      return this.isBookmarked ? this.$t("Remove from My Bookmarks") : this.$t("Add to My Bookmarks");
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~styles/variables';
+.bookmark {
+  font-size: 1.5em;
+}
+.bookmark:hover {
+  cursor: pointer;
+}
+
+.marked {
+  color: #f5bC00;
+}
+.unmarked {
+  color: #fff;
+  -webkit-text-stroke-color: #bed1e5;
+  -webkit-text-stroke-width: 2px;
+}
+.unmarked:hover {
+  @media (max-width: $lp-breakpoint) {
+    color: #fff;
+  }
+  color: #ffd445;
+  -webkit-text-stroke-width: 0;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index f8ad2b7dac..11f2f6c160 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -10,9 +10,10 @@
     >
       <Card
         v-for="(process, index) in processList"
-        :key="index"
+        :key="`${index}_${renderKey}`"
         :process="process"
         @openProcessInfo="openProcessInfo"
+        :hideBookmark="categoryId === 'all_templates'"
       />
       <pagination
         :total-row="totalRow"
@@ -43,13 +44,14 @@ import pagination from "./utils/pagination.vue";
 import SearchCards from "./utils/SearchCards.vue";
 import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import Card from "./utils/Card.vue";
+import { EventBus } from '../index.js';
 
 export default {
   components: {
     pagination, CatalogueEmpty, SearchCards, Card,
   },
   mixins: [dataLoadingMixin],
-  props: ["category"],
+  props: ["categoryId"],
   data() {
     return {
       processList: [],
@@ -63,14 +65,16 @@ export default {
       data: null,
       totalPages: 1,
       pmql: "",
-      bookmarkIcon: "far fa-bookmark",
+      filter: "",
       showEmpty: false,
       loading: false,
+      renderKey: 0,
     };
   },
   watch: {
-    category() {
+    categoryId() {
       this.pmql = "";
+      this.filter = "";
       this.loadCard();
     },
   },
@@ -88,6 +92,7 @@ export default {
           this.processList = response.data.data;
           this.totalRow = response.data.meta.total;
           this.totalPages = response.data.meta.total_pages;
+          this.renderKey = this.renderKey + 1;
         });
     },
     /**
@@ -100,7 +105,7 @@ export default {
      * Build URL for Process Cards
      */
     buildURL() {
-      if (this.category === undefined || this.category.id === -1) {
+      if (this.categoryId === 'all_processes') {
         return "process_bookmarks/processes?"
           + `&page=${this.currentPage}`
           + `&per_page=${this.perPage}`
@@ -110,7 +115,7 @@ export default {
           + "&cat_status=ACTIVE"
           + "&order_by=name&order_direction=asc";
       }
-      if (this.category.id === 0) {
+      if (this.categoryId === 'bookmarks') {
         return `process_bookmarks?page=${this.currentPage}`
           + `&per_page=${this.perPage}`
           + `&pmql=${encodeURIComponent(this.pmql)}`
@@ -118,9 +123,17 @@ export default {
           + "&launchpad=true"
           + "&order_by=name&order_direction=asc";
       }
+      if (this.categoryId === 'all_templates') {
+        return `templates/process?page=${this.currentPage}`
+          + `&per_page=${this.perPage}`
+          + `&filter=${encodeURIComponent(this.filter)}`
+          + `&order_by=name`
+          + `&order_direction=asc`
+          + `&include=user,categories,category`;
+      }
       return `process_bookmarks/processes?page=${this.currentPage}`
           + `&per_page=${this.perPage}`
-          + `&category=${this.category.id}`
+          + `&category=${this.categoryId}`
           + `&pmql=${encodeURIComponent(this.pmql)}`
           + "&bookmark=true"
           + "&launchpad=true"
@@ -130,8 +143,11 @@ export default {
      * Go to process info
      */
     openProcessInfo(process) {
-      const categoryId = this.category ? this.category.id : -1;
-      window.history.replaceState(null, null, `/process-browser/${process.id}?categorySelected=${categoryId}`);
+      if (this.categoryId === 'all_templates') {
+        EventBus.$emit('templates-selected', { template: process, type: "Process" });
+        return;
+      }
+      this.$router.push({ name: "show", params: { process: process, processId: process.id } });
       this.$emit("openProcess", process);
     },
     /**
@@ -147,6 +163,7 @@ export default {
     onFilter(value, showEmpty = false) {
       this.currentPage = 1;
       this.pmql = `(fulltext LIKE "%${value}%")`;
+      this.filter = value;
       this.showEmpty = showEmpty;
       this.loadCard();
     },
@@ -154,10 +171,16 @@ export default {
 };
 </script>
 
-<style>
+<style scoped lang="scss">
+
+@import '~styles/variables';
 .processList {
   display: flex;
   flex-wrap: wrap;
+  
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
 }
 .text-custom {
   color: #1572C2;
diff --git a/resources/js/processes-catalogue/components/MiniPieChart.vue b/resources/js/processes-catalogue/components/MiniPieChart.vue
new file mode 100644
index 0000000000..43cbf10c24
--- /dev/null
+++ b/resources/js/processes-catalogue/components/MiniPieChart.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="chart">
+    <div class="pie" :style="style"></div>
+    <div>{{ count.toLocaleString() }} {{ name }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: null,
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    color: {
+      type: String,
+      default: '#000',
+    },
+  },
+  computed: {
+    style() {
+      return {
+        backgroundImage: `conic-gradient(${this.color} 0%, ${this.color} ${this.percent}%, white ${this.percent}%, white 100%)`,
+        borderColor: this.color,
+      };
+    },
+    percent() {
+      return Math.round((this.count / this.total) * 100);
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '~styles/variables';
+.chart {
+  display: flex;
+  align-items: center;
+  font-style: italic;
+  color: $secondary;
+
+  div {
+    margin-right: 8px;
+  }
+}
+.pie {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/Process.vue b/resources/js/processes-catalogue/components/Process.vue
new file mode 100644
index 0000000000..65681a22f7
--- /dev/null
+++ b/resources/js/processes-catalogue/components/Process.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="process-info-main" v-if="selectedProcess">
+    <div class="mobile-process-nav bg-primary">
+      <div class="left">
+        <a href="#" @click.prevent="goBackCategory">
+          <i class="fas fa-arrow-left" />
+        </a>
+      </div>
+      <div class="center">
+        <a href="#" @click.prevent="showDetails = !showDetails">
+          <i class="fas fa-info-circle" />
+        </a>
+      </div>
+      <div class="right">
+        <bookmark
+          :process="selectedProcess"
+        />
+      </div>
+    </div>
+    <div class="mobile-process-details" :class="{ 'active' : showDetails }">
+      <h1>{{ $t('Details') }}</h1>
+      <h2>{{ selectedProcess.name }}</h2>
+      <p>{{ selectedProcess.description }}</p>
+      <h3>{{ $t('Version') }} {{ processVersion }}</h3>
+      <h1 class="started-cases-title">{{ $t('Started Cases') }}</h1>
+      <p class="started-cases">{{ startedCases.toLocaleString() }}</p>
+      <div class="charts">
+        <mini-pie-chart
+          :count="selectedProcess.counts?.in_progress"
+          :total="startedCases"
+          :name="$t('In Progress')"
+          color="#4EA075"
+        />
+        <mini-pie-chart
+          :count="selectedProcess.counts?.completed"
+          :total="startedCases"
+          :name="$t('Completed')"
+          color="#478FCC"
+        />
+      </div>
+    </div>
+
+
+    <ProcessInfo
+      v-if="!verifyScreen"
+      :process="selectedProcess"
+      @goBackCategory="goBackCategory"
+    />
+    <ProcessScreen
+      v-if="verifyScreen"
+      :process="selectedProcess"
+      @goBackCategory="goBackCategory"
+    />
+  </div>
+</template>
+
+<script>
+import ProcessInfo from "./ProcessInfo.vue";
+import ProcessScreen from "./ProcessScreen.vue";
+import MiniPieChart from "./MiniPieChart.vue";
+import Bookmark from "./Bookmark.vue";
+
+export default {
+  props: ["process", "processId"],
+  components: {
+    ProcessInfo, ProcessScreen, MiniPieChart, Bookmark
+  },
+  data() {
+    return {
+      loadedProcess: null,
+      showDetails: false,
+    };
+  },
+  computed: {
+    /**
+     * if we pass in a process, use that. Otherwise load the process by ID
+     **/
+    selectedProcess() {
+      if (this.process) {
+        return this.process;
+      }
+
+      if (this.loadedProcess) {
+        return this.loadedProcess;
+      }
+
+      return null;
+    },
+    /**
+     * Verify if the process open the info or Screen
+     */
+     verifyScreen() {
+      let screenId = 0;
+      const unparseProperties = this.selectedProcess?.launchpad?.properties || null;
+      if (unparseProperties !== null) {
+        screenId = JSON.parse(unparseProperties)?.screen_id || 0;
+      }
+
+      return screenId !== 0;
+    },
+    processVersion() {
+      return moment(this.selectedProcess.updated_at).format();
+    },
+    startedCases() {
+      return this.selectedProcess.counts?.total || 0;
+    },
+  },
+  methods: {
+    goBackCategory() {
+      this.$emit("goBackCategory");
+    },
+  },
+  mounted() {
+    if (!this.process && this.processId) {
+      ProcessMaker.apiClient
+        .get(`process_launchpad/${this.processId}`)
+        .then((response) => {
+          console.log("Process.vue got response", response.data[0]);
+          this.loadedProcess = response.data[0];
+        });
+    }
+
+    if (window.ProcessMaker?.navbarMobile) {
+      window.ProcessMaker.navbarMobile.display = false;
+    }
+  },
+  beforeDestroy() {
+    if (window.ProcessMaker?.navbarMobile) {
+      window.ProcessMaker.navbarMobile.display = true;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~styles/variables';
+.process-info-main {
+  overflow-y: auto;
+  position: relative;
+}
+.mobile-process-nav {
+  display: none;
+
+  div {
+    flex: 1;
+    text-align: center;
+  }
+
+  .left {
+    text-align: left;
+  }
+
+  .right {
+    text-align: right;
+  }
+ 
+  .left i, .center i {
+    display: block;
+    color: #FFFFFF;
+    padding: 1em;
+    font-size: 1.5em;
+  }
+
+  .right i {
+    padding: 1em;
+    -webkit-text-stroke-width: 0;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.mobile-process-details {
+  display: none;
+
+  width: 100%;
+  position: absolute;
+  z-index: 5;
+  padding: 1em;
+  background-color: white;
+  box-shadow: 0px 8px 8px #00000021;
+
+  &.active {
+    display: block;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    font-weight: 600;
+    color: $primary;
+  }
+
+  h2 {
+    font-size: 1em;
+    font-weight: 600;
+    color: $primary;
+  }
+
+  p {
+    font-size: 1em;
+  }
+
+  p.started-cases {
+    font-size: 3em;
+  }
+
+  h1.started-cases-title {
+    margin-bottom: 0;
+    padding-top: 0.5em;
+  }
+
+  h3 {
+    font-size: 1em;
+    color: $secondary;
+  }
+}
+
+.charts {
+  display: flex;
+  align-items: center;
+}</style>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
index a56527e5fa..c18f207457 100644
--- a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
@@ -1,93 +1,17 @@
 <template>
   <div id="processCollapseInfo">
     <div id="processData">
-      <div
-        id="header"
-        class="card card-body"
-      >
-        <div class="d-flex justify-content-between">
-          <div class="d-flex align-items-center">
-            <i
-              class="fas fa-arrow-left text-secondary mr-2 iconTitle"
-              @click="goBack"
-            />
-            <button
-              class="btn border-0 header-process title-process-button"
-              type="button"
-              data-toggle="collapse"
-              data-target="#collapseProcessInfo"
-              aria-controls="collapseProcessInfo"
-              :aria-expanded="infoCollapsed"
-              @click="toogleInfoCollapsed()"
-            >
-              <template v-if="infoCollapsed">
-                {{ $t('Process Info') }}
-                <i class="fas fa-angle-up pl-2" />
-              </template>
-              <template v-else>
-                {{ getNameEllipsis() }}
-                <i class="fas fa-angle-down pl-2" />
-              </template>
-            </button>
-          </div>
-          <div class="d-flex align-items-center">
-            <div class="card-bookmark mx-2">
-              <i
-                :ref="`bookmark-${process.id}-marked`"
-                v-b-tooltip.hover.bottom
-                :title="$t(labelTooltip)"
-                class="fas fa-bookmark"
-                :class="{ marked: showBookmarkIcon, unmarked: !showBookmarkIcon }"
-                @click="checkBookmark(process)"
-              />
-            </div>
-            <span class="ellipsis-border">
-              <ellipsis-menu
-                v-if="showEllipsis"
-                :actions="processLaunchpadActions"
-                :permission="permission"
-                :data="process"
-                :is-documenter-installed="isDocumenterInstalled"
-                :divider="false"
-                :lauchpad="true"
-                variant="none"
-                @navigate="onProcessNavigate"
-              />
-            </span>
-            <buttons-start :process="process" />
-          </div>
-        </div>
-      </div>
+      <process-header
+        :process="process"
+        @goBack="goBack()"
+        @onProcessNavigate="onProcessNavigate()"
+      />
       <div
         id="collapseProcessInfo"
         class="collapse show"
       >
         <div class="info-collapse">
           <div class="row">
-            <div class="col-sm-9">
-              <p class="title-process">
-                {{ process.name }}
-              </p>
-              <p
-                v-if="readActivated || !largeDescription"
-                class="description"
-              >
-                {{ process.description }}
-              </p>
-              <p
-                v-if="!readActivated && largeDescription"
-                class="description"
-              >
-                {{ process.description.slice(0,300) }}
-                <a
-                  v-if="!readActivated"
-                  class="read-more"
-                  @click="activateReadMore"
-                >
-                  ...
-                </a>
-              </p>
-            </div>
             <div class="wizard-container col-sm-3">
               <div class="wizard">
                 <b-button
@@ -106,18 +30,20 @@
             </div>
           </div>
           <b-row>
-            <b-col class="process-carousel col-sm-12 col-md-12 col-lg-12 col-xl-9 col-pm-9 col-9">
+            <b-col class="process-carousel col-12">
               <processes-carousel
                 :process="process"
+                :full-carousel="{ url: null, hideLaunchpad: false }"
               />
             </b-col>
-            <b-col class="process-options col-sm-12 col-md-12 col-lg-12 col-xl-3 col-pm-3 col-2">
+            <b-col class="process-options col-12">
               <process-options :process="process" />
             </b-col>
           </b-row>
         </div>
       </div>
     </div>
+    
     <create-template-modal
       id="create-template-modal"
       ref="create-template-modal"
@@ -160,8 +86,6 @@
 </template>
 
 <script>
-import ButtonsStart from "./optionsMenu/ButtonsStart.vue";
-import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import CreateTemplateModal from "../../components/templates/CreateTemplateModal.vue";
 import CreatePmBlockModal from "../../components/pm-blocks/CreatePmBlockModal.vue";
 import AddToProjectModal from "../../components/shared/AddToProjectModal.vue";
@@ -172,11 +96,10 @@ import ProcessOptions from "./ProcessOptions.vue";
 import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import processNavigationMixin from "../../components/shared/processNavigation";
 import ProcessesMixin from "./mixins/ProcessesMixin";
+import ProcessHeader from "./ProcessHeader.vue";
 
 export default {
   components: {
-    ButtonsStart,
-    EllipsisMenu,
     CreateTemplateModal,
     CreatePmBlockModal,
     AddToProjectModal,
@@ -184,9 +107,10 @@ export default {
     ProcessOptions,
     ProcessesCarousel,
     WizardHelperProcessModal,
+    ProcessHeader,
   },
   mixins: [ProcessesMixin, ellipsisMenuMixin, processNavigationMixin],
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
+  props: ["process", "currentUserId"],
   computed: {
     createdFromWizardTemplate() {
       return !!this.process?.properties?.wizardTemplateUuid;
@@ -201,13 +125,11 @@ export default {
       window.location.reload();
     });
   },
+  data() {
+    return {
+    };
+  },
   methods: {
-    /**
-     * Change button title
-     */
-    toogleInfoCollapsed() {
-      this.infoCollapsed = !this.infoCollapsed;
-    },
     /**
      * Verify if the Description is large
      */
@@ -231,6 +153,14 @@ export default {
 
 <style lang="scss" scoped>
 @import url("./scss/processes.css");
+@import '~styles/variables';
+
+#collapseProcessInfo {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
+
 .wizard-link {
   text-transform: none;
 }
@@ -285,4 +215,29 @@ export default {
     max-width: 100%;
   }
 }
+
+.header {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
+
+.header-mobile {
+  display: none;
+  padding: 1em;
+
+  .title {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.5em;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessHeader.vue b/resources/js/processes-catalogue/components/ProcessHeader.vue
new file mode 100644
index 0000000000..334497db46
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessHeader.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div class="header-mobile">
+        <div class="title">
+          {{ process.name }}
+        </div>
+        <div class="start-button">
+          <buttons-start
+            :process="process"
+            :title="$t('Start')"
+            :startEvent="singleStartEvent"
+            :processEvents="processEvents"
+          />
+        </div>
+      </div>
+      <div
+        class="header card card-body"
+      >
+        <div class="d-flex justify-content-between">
+          <div class="d-flex align-items-center">
+            <i
+              class="fas fa-arrow-left text-secondary mr-2 iconTitle"
+              @click="$emit('goBack')"
+            />
+            <button
+              v-if="enableCollapse"
+              class="btn border-0 header-process title-process-button"
+              type="button"
+              data-toggle="collapse"
+              data-target="#collapseProcessInfo"
+              aria-controls="collapseProcessInfo"
+              :aria-expanded="infoCollapsed"
+              @click="toggleInfoCollapsed()"
+            >
+              <template v-if="infoCollapsed">
+                {{ $t('Process Info') }}
+                <i class="fas fa-angle-up pl-2" />
+              </template>
+              <template v-else>
+                {{ getNameEllipsis() }}
+                <i class="fas fa-angle-down pl-2" />
+              </template>
+            </button>
+            <template v-else>
+              {{ getNameEllipsis() }}
+            </template>
+
+          </div>
+          <div class="d-flex align-items-center">
+            <div class="card-bookmark mx-2">
+              <bookmark :process="process" />
+            </div>
+            <span class="ellipsis-border">
+              <ellipsis-menu
+                v-if="showEllipsis"
+                :actions="processLaunchpadActions"
+                :data="process"
+                :divider="false"
+                :lauchpad="true"
+                variant="none"
+                @navigate="$emit('onProcessNavigate')"
+                :isDocumenterInstalled="$root.isDocumenterInstalled"
+                :permission="$root.permission"
+              />
+            </span>
+            <buttons-start
+              :process="process"
+              :startEvent="singleStartEvent"
+              :processEvents="processEvents"
+            />
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import ButtonsStart from "./optionsMenu/ButtonsStart.vue";
+import ProcessesMixin from "./mixins/ProcessesMixin";
+import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
+import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
+import Bookmark from "./Bookmark.vue";
+
+export default {
+  components: {
+    ButtonsStart,
+    EllipsisMenu,
+    Bookmark,
+  },
+  mixins: [
+    ProcessesMixin,
+    ellipsisMenuMixin
+  ],
+  props: {
+    process: {
+      type: Object,
+      required: true
+    },
+    enableCollapse: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      infoCollapsed: true,
+      processEvents: [],
+      singleStartEvent: null,
+    }
+  },
+  mounted() {
+    this.getStartEvents();
+    console.log("prcess from ProcessHeader", this.process);
+  },
+  methods: {
+     toggleInfoCollapsed() {
+      this.infoCollapsed = !this.infoCollapsed;
+    },
+    /**
+     * get start events for dropdown Menu
+     */
+    getStartEvents() {
+      this.processEvents = [];
+      ProcessMaker.apiClient
+        .get(`process_bookmarks/processes/${this.process.id}/start_events`)
+        .then((response) => {
+          this.processEvents = response.data.data;
+          const nonWebEntryStartEvents = this.processEvents.filter(e => !("webEntry" in e) || !e.webEntry);
+          if (nonWebEntryStartEvents.length === 1) {
+            this.singleStartEvent = nonWebEntryStartEvents[0].id;
+          }
+        })
+        .catch((err) => {
+          ProcessMaker.alert(err, "danger");
+        });
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("./scss/processes.css");
+@import '~styles/variables';
+.header {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
+
+.header-mobile {
+  display: none;
+  padding: 1em;
+
+  .title {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.5em;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.card-bookmark {
+  float: right;
+  font-size: 20px;
+}
+.card-bookmark:hover {
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index a4699a9fcb..88ad1a66f8 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -1,34 +1,58 @@
 <template>
-  <div class="process-info-main">
+  <div>
     <process-collapse-info
+      v-show="hideLaunchpad"
       :process="process"
-      :permission="permission"
       :current-user-id="currentUserId"
-      :is-documenter-installed="isDocumenterInstalled"
-      @goBackCategory="goBackCategory"
+      @goBackCategory="$emit('goBackCategory')"
     />
     <process-tab
+      v-show="hideLaunchpad"
       :current-user="currentUser"
       :process="process"
     />
+
+    <div w-100 h-100 v-show="!hideLaunchpad">
+      <div class="card card-body">
+      <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center">
+          <i class="fas fa-angle-left"
+          @click="closeFullCarousel"
+          />
+          <span style="margin-left: 10px;">{{ process.name }} {{ this.firstImage }} of {{ this.lastImage }}</span>
+        </div>
+      </div>
+      </div>
+      <processes-carousel
+        :process="process"
+        :full-carousel="{ url: null, hideLaunchpad: true }"
+        :index-selected-image="indexSelectedImage"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import ProcessCollapseInfo from "./ProcessCollapseInfo.vue";
 import ProcessTab from "./ProcessTab.vue";
+import ProcessesCarousel from "./ProcessesCarousel.vue";
 
 export default {
   components: {
     ProcessCollapseInfo,
     ProcessTab,
+    ProcessesCarousel,
   },
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "currentUser"],
+  props: ["process", "currentUserId", "currentUser"],
   data() {
     return {
       listCategories: [],
       selectCategory: 0,
       dataOptions: {},
+      hideLaunchpad: true,
+      firstImage: 0,
+      lastImage: null,
+      indexSelectedImage: 0,
     };
   },
   mounted() {
@@ -36,20 +60,23 @@ export default {
       id: this.process.id.toString(),
       type: "Process",
     };
+    this.$root.$on("clickCarouselImage", (val) => {
+      this.hideLaunchpad = !val.hideLaunchpad;
+      this.lastImage = val.countImages;
+      this.indexSelectedImage = val.imagePosition;
+      this.firstImage = this.indexSelectedImage + 1;
+    });
+    this.$root.$on("carouselImageSelected", (pos) => {
+      this.firstImage = pos + 1;
+    });
+
+  },
+  computed: {
   },
   methods: {
-    /**
-     * Return a process cards
-     */
-    goBackCategory() {
-      this.$emit("goBackCategory");
+    closeFullCarousel() {
+      this.$root.$emit("clickCarouselImage", false);
     },
   },
 };
-</script>
-
-<style lang="css" scoped>
-.process-info-main {
-  overflow-y: auto;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/ProcessListing.vue b/resources/js/processes-catalogue/components/ProcessListing.vue
new file mode 100644
index 0000000000..6f9dba2ede
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessListing.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="process-listing">
+
+    <CardProcess
+      v-if="!isTemplateCategory"
+      :categoryId="categoryId"
+    />
+
+    <wizard-templates
+        v-if="isTemplateCategory"
+        :categoryId="categoryId"
+    />
+
+  </div>
+</template>
+
+<script>
+import CardProcess from "./CardProcess.vue";
+import WizardTemplates from "./WizardTemplates.vue";
+export default {
+  props: ["categoryId"],
+  components: {
+    WizardTemplates,
+    CardProcess,
+  },
+  computed: {
+    isTemplateCategory() {
+      return ['guided_templates'].includes(this.categoryId)
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~styles/variables';
+
+.process-listing {
+  @media (max-width: $lp-breakpoint) {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index 8b028937da..016d9073b5 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="section-options">
-    <process-counter :process="process" />
+    <div class="left-column">
+      <process-description :process="process" />
+      <process-counter :process="process" />
+    </div>
     <chart-save-search :process="process" />
   </div>
 </template>
@@ -8,9 +11,10 @@
 <script>
 import ProcessCounter from "./optionsMenu/ProcessCounter.vue";
 import ChartSaveSearch from "./optionsMenu/ChartSaveSearch.vue";
+import ProcessDescription from "./optionsMenu/ProcessDescription.vue";
 
 export default {
-  components: { ProcessCounter, ChartSaveSearch },
+  components: { ProcessCounter, ChartSaveSearch, ProcessDescription },
   props: ["process"],
 };
 </script>
@@ -19,12 +23,18 @@ export default {
 .section-options {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  width: 98.5%;
+  margin-top: 20px;
 }
-@media (width < 1200px) {
+.left-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+@media (max-width: 2560px) {
   .section-options {
-    align-items: flex-start;
     flex-direction: row;
+    justify-content: space-between;
   }
 }
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessScreen.vue b/resources/js/processes-catalogue/components/ProcessScreen.vue
index 70d2d7f8d9..fcd14e1c18 100644
--- a/resources/js/processes-catalogue/components/ProcessScreen.vue
+++ b/resources/js/processes-catalogue/components/ProcessScreen.vue
@@ -1,47 +1,11 @@
 <template>
   <div id="process-screen">
-    <div
-      id="header"
-      class="card card-body"
-    >
-      <div class="d-flex justify-content-between">
-        <div class="d-flex align-items-center">
-          <i
-            class="fas fa-arrow-left text-secondary mr-2 iconTitle"
-            @click="goBack"
-          />
-          <span class="header-process">
-            {{ getNameEllipsis() }}
-          </span>
-        </div>
-        <div class="d-flex align-items-center">
-          <div class="card-bookmark mx-2">
-            <i
-              :ref="`bookmark-${process.id}-marked`"
-              v-b-tooltip.hover.bottom
-              :title="$t(labelTooltip)"
-              class="fas fa-bookmark"
-              :class="{ marked: showBookmarkIcon, unmarked: !showBookmarkIcon }"
-              @click="checkBookmark(process)"
-            />
-          </div>
-          <span class="ellipsis-border">
-            <ellipsis-menu
-              v-if="showEllipsis"
-              :actions="processLaunchpadActions"
-              :permission="permission"
-              :data="process"
-              :is-documenter-installed="isDocumenterInstalled"
-              :divider="false"
-              :lauchpad="true"
-              variant="none"
-              @navigate="onProcessNavigate"
-            />
-          </span>
-          <buttons-start :process="process" />
-        </div>
-      </div>
-    </div>
+    <process-header
+      :process="process"
+      @goBack="goBack()"
+      @onProcessNavigate="onProcessNavigate()"
+      :enableCollapse="false"
+    />
     <display-screen
       v-if="showScreen"
       :screen="screen"
@@ -91,6 +55,7 @@ import LaunchpadSettingsModal from "../../components/shared/LaunchpadSettingsMod
 import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import processNavigationMixin from "../../components/shared/processNavigation";
 import ProcessesMixin from "./mixins/ProcessesMixin";
+import ProcessHeader from "./ProcessHeader.vue";
 
 export default {
   components: {
@@ -101,9 +66,10 @@ export default {
     CreatePmBlockModal,
     AddToProjectModal,
     LaunchpadSettingsModal,
+    ProcessHeader,
   },
   mixins: [ellipsisMenuMixin, processNavigationMixin, ProcessesMixin],
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
+  props: ["process", "currentUserId"],
   data() {
     return {
       screen: {},
diff --git a/resources/js/processes-catalogue/components/ProcessTab.vue b/resources/js/processes-catalogue/components/ProcessTab.vue
index c327460d78..4a266b6d40 100644
--- a/resources/js/processes-catalogue/components/ProcessTab.vue
+++ b/resources/js/processes-catalogue/components/ProcessTab.vue
@@ -4,23 +4,33 @@
       id="tabs-custom"
       pills
       lazy
-    >
+      @input="onTabChanged"
+      >
       <b-tab
         :title="$t('My Requests')"
         active
-      >
-        <request-tab
-          :currentUser="currentUser"
-          :process="process"
-        ></request-tab>
+        >
+        <requests-listing
+          ref="requestList"
+          :filter="filterRequest"
+          :columns="columnsRequest"
+          :pmql="fullPmqlRequest"
+          :autosaveFilter="false"
+          ></requests-listing>
       </b-tab>
       <b-tab
         :title="$t('My Tasks')"
-      >
-        <task-tab
-          :currentUser="currentUser"
-          :process="process"
-        ></task-tab>
+        >
+        <tasks-list
+          ref="taskList"
+          :filter="filterTask"
+          :pmql="fullPmqlTask" 
+          :columns="columnsTask"
+          :disable-tooltip="false"
+          :disable-quick-fill-tooltip="false"
+          :fetch-on-created="false"
+          :autosaveFilter="false"
+          ></tasks-list>
       </b-tab>
     </b-tabs>
   </div>
@@ -29,10 +39,14 @@
 <script>
 import RequestTab from "./RequestTab.vue";
 import TaskTab from "./TaskTab.vue";
+import RequestsListing from "../../requests/components/RequestsListing.vue";
+import TasksList from "../../tasks/components/TasksList.vue";
 export default {
   components: {
     RequestTab,
     TaskTab,
+      RequestsListing,
+      TasksList
   },
   props: {
     currentUser: {
@@ -42,6 +56,65 @@ export default {
       type: Object,
     },
   },
+  data() {
+    return {
+      filterRequest: "",
+      fullPmqlRequest: `(user_id = ${ProcessMaker.user.id}) AND (process_id = ${this.process.id})`,
+      columnsRequest: [
+        {
+          label: "Case #",
+          field: "case_number",
+          sortable: true,
+          default: true,
+          width: 80
+        },
+        {
+          label: "Case title",
+          field: "case_title",
+          sortable: true,
+          default: true,
+          truncate: true,
+          width: 220
+        },
+        {
+          label: "Status",
+          field: "status",
+          sortable: true,
+          default: true,
+          width: 100,
+          filter_subject: {type: 'Status'}
+        },
+        {
+          label: "Started",
+          field: "initiated_at",
+          format: "datetime",
+          sortable: true,
+          default: true,
+          width: 160
+        },
+        {
+          label: "Completed",
+          field: "completed_at",
+          format: "datetime",
+          sortable: true,
+          default: true,
+          width: 160
+        },
+      ],
+      filterTask: "",
+      fullPmqlTask: `(user_id = ${ProcessMaker.user.id}) AND (process_id = ${this.process.id})`,
+      columnsTask: window.Processmaker.defaultColumns || null
+    };
+  },
+  methods: {
+    onTabChanged(activeTabIndex) {
+      if (activeTabIndex === 1) {
+        this.$nextTick(() => {
+          this.$refs.taskList.fetch();
+        });
+      }
+    }
+  }
 };
 </script>
 <style>
diff --git a/resources/js/processes-catalogue/components/ProcessesCarousel.vue b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
index 603ebbaf6f..4511de3101 100644
--- a/resources/js/processes-catalogue/components/ProcessesCarousel.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCarousel.vue
@@ -1,37 +1,64 @@
 <template>
-  <div class="carousel-container">
-    <b-carousel
-      id="processes-carousel"
-      v-model="slide"
-      no-animation
-      :interval="interval"
-      indicators
-      @sliding-start="onSlideStart"
-      @sliding-end="onSlideEnd"
+  <div
+    v-show="imagesLoaded"
+    class="h-100 w-100"
+  >
+    <button
+      :class="[fullPage ? 'prev-full' : 'prev']"
+      @click="prevSlide"
     >
-      <b-carousel-slide
-        v-for="(image, index) in images.length > 0 ? images : defaultImage"
-        :key="index"
+      <i class="fas fa-caret-left"></i>
+    </button>
+    <button
+      :class="[fullPage ? 'next-full' : 'next']"
+      @click="nextSlide"
+    >
+      <i class="fas fa-caret-right"></i>
+    </button>
+
+    <div
+      ref="containercarousel"
+      @resize="updateSlideWidth"
+      class="carousel"
+      :style="{
+        '--var-sizes-sm': `${100 / sizes.sm}%`,
+        '--var-sizes-md': `${100 / sizes.md}%`,
+        '--var-sizes-lg': `${100 / sizes.lg}%`,
+        '--var-sizes-xl': `${100 / sizes.xl}%`,
+        '--var-sizes-2xl': `${100 / sizes['2xl']}%`,
+        '--var-sizes-3xl': `${100 / sizes['3xl']}%`,
+      }"
+    >
+      <div
+        class="slides"
+        :style="{ transform: 'translateX(' + translateX + 'px)' }"
       >
-        <template #img>
+        <div
+          class="slide"
+          v-for="(image, index) in images.length > 0 ? images : defaultImage"
+          :key="index"
+        >
           <iframe
             v-if="image.type === 'embed'"
-            class="d-block iframe-carousel"
+            ref="slides"
+            :class="['content', fullPage ? 'iframe-carousel-full' : 'iframe-carousel']"
             :src="image.url"
             title="embed media"
+            @click="handleClick(image.url, index)"
           />
           <img
             v-else
+            ref="slides"
+            :class="['content', fullPage ? 'img-carousel-full' : 'img-carousel']"
             :src="image.url"
             :alt="process.name"
-            class="d-block img-carousel"
-          >
-        </template>
-      </b-carousel-slide>
-    </b-carousel>
+            @click="handleClick(image.url, index)"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
 export default {
   props: {
@@ -39,33 +66,110 @@ export default {
       type: Object,
       required: true,
     },
+    fullCarousel: {
+      type: Object,
+      default: null,
+    },
+    indexSelectedImage: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
+      discountSlide: 1,
       slide: 0,
       sliding: null,
       images: [],
-      defaultImage: Array(4).fill({ url: "/img/launchpad-images/defaultImage.svg" }),
+      imagesLoaded: true,
+      defaultImage: Array(4).fill({
+        url: "/img/launchpad-images/defaultImage.svg",
+      }),
       interval: 0,
+      resizeObserver: null,
+      currentIndex: 0,
+      slideWidth: 0,
+      translateX: 0,
+      fullPage: false,
+      sizes: {
+        sm: 1,
+        md: 1,
+        lg: 2,
+        xl: 2,
+        "2xl": 2,
+        "3xl": 3,
+      },
     };
   },
+  watch: {
+    'fullCarousel.hideLaunchpad': {
+      immediate: true,
+      handler(value) {
+        if (value) {
+          this.sizes = {
+            sm: 1,
+            md: 1,
+            lg: 1,
+            xl: 1,
+            "2xl": 1,
+            "3xl": 1,
+          };
+          this.discountSlide = 0;
+          this.fullPage = true;
+        } 
+      }
+    },
+    indexSelectedImage() {
+        this.currentIndex = 0;
+        this.currentIndex = this.indexSelectedImage - 1;
+        this.nextSlide();
+    },
+  },
+  computed: {
+    slideCount() {
+      return this.images.length - this.discountSlide;
+    },
+  },
   mounted() {
     this.getLaunchpadImages();
-    ProcessMaker.EventBus.$on("getLaunchpadImagesEvent", ({ indexImage, type }) => {
-      if (type === "delete") {
-        this.images.splice(indexImage, 1);
-      } else {
-        this.images = [];
-        this.getLaunchpadImages();
+    ProcessMaker.EventBus.$on(
+      "getLaunchpadImagesEvent",
+      ({ indexImage, type }) => {
+        if (type === "delete") {
+          this.images.splice(indexImage, 1);
+        } else {
+          this.images = [];
+          this.getLaunchpadImages();
+        }
+      }
+    );
+    this.$nextTick(() => {
+      this.updateSlideWidth();
+      this.resizeObserver = new ResizeObserver(this.updateSlideWidth);
+      if (this.$refs.containercarousel) {
+        this.resizeObserver.observe(this.$refs.containercarousel);
       }
     });
   },
+  beforeDestroy() {
+    if (this.resizeObserver && this.$refs.containercarousel) {
+      this.resizeObserver.unobserve(this.$refs.containercarousel);
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  },
   methods: {
-    onSlideStart(slide) {
-      this.sliding = true;
-    },
-    onSlideEnd(slide) {
-      this.sliding = false;
+    handleClick(url, index) {
+      if(!this.fullPage) {
+        const data = {
+          "url" : url,
+          "hideLaunchpad" : true,
+          "countImages" : this.images.length,
+          "imagePosition" : index,
+          };
+        this.$root.$emit("clickCarouselImage", data);
+      }
     },
     /**
      * Get images from Media library related to process.
@@ -91,11 +195,44 @@ export default {
               type: customProperties.type,
             });
           });
+          // If no images were loaded Carousel container is not shown
+          if (this.images.length === 0) {
+            this.imagesLoaded = false;
+          }
+          // If only one image is loaded, rest of carousel must be completed with default image
+          if (this.images.length === 1) {
+            for (let i = 1; i <= 3; i++) {
+              this.images[i] = {
+                url: "/img/launchpad-images/defaultImage.svg",
+                type: "image",
+              };
+            }
+          }
         })
         .catch((error) => {
           console.error(error);
         });
     },
+    updateSlideWidth() {
+      if (this.$refs.slides?.[0]) {
+        this.slideWidth = this.$refs.slides[0].offsetWidth + 11;
+        this.translateX = this.slideWidth * -this.currentIndex - 10;
+      }
+    },
+    prevSlide() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+        this.translateX += this.slideWidth;
+        this.$root.$emit("carouselImageSelected", this.currentIndex);
+      }
+    },
+    nextSlide() {
+      if (this.currentIndex < this.slideCount - 1) {
+        this.currentIndex++;
+        this.translateX -= this.slideWidth;
+        this.$root.$emit("carouselImageSelected", this.currentIndex);
+      }
+    },
   },
 };
 </script>
@@ -103,42 +240,168 @@ export default {
 .carousel-inner {
   overflow: hidden;
 }
+
 .img-carousel {
-  max-width: 800px;
-  height: 410px;
+  width: 100%;
+  height: auto;
   aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
 }
 .iframe-carousel {
-  border: 0px;
-  width: 800px;
-  height: 400px;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.img-carousel-full {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+.iframe-carousel-full {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: 16px;
+  margin-top: 2%;
+  margin-bottom: 2%;
 }
-.carousel-container {
+
+</style>
+<style>
+.carousel {
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
+}
+.slides {
   display: flex;
+  transition: transform 0.3s ease;
+}
+.slide {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.content {
+  display: flex;
+  align-items: center;
   justify-content: center;
-  border-radius: 16px;
-  background-color: #edf1f6;
+  background-color: #ccc;
+}
+
+.prev,
+.next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  cursor: pointer;
+  color: #556271;
+}
+.prev {
+  left: -10px;
+  background-color: #fff;
+}
+.next {
+  right: 4px;
+  background-color: #fff;
+}
+
+.prev-full,
+.next-full {
+  position: absolute;
+  top: 60%;
+  transform: translateY(-50%);
+  border: none;
+  cursor: pointer;
+  color: #556271;
+}
+
+.prev-full {
+  left: 80px;
+  background-color: #f7f9fb;
+}
+.next-full {
+  right: 16px;
+  background-color: #f7f9fb;
+}
+</style>
+<style>
+.carousel {
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
+}
+.slides {
+  display: flex;
+  transition: transform 0.3s ease;
+}
+.slide {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ccc;
+}
+
+.prev,
+.next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  cursor: pointer;
+  color: #556271;
+}
+.prev {
+  left: -10px;
+  background-color: #fff;
+}
+.next {
+  right: 4px;
+  background-color: #fff;
+}
+@media (min-width: 640px) {
+  .slide {
+    width: var(--var-sizes-sm);
+  }
+}
+@media (min-width: 768px) {
+  .slide {
+    width: var(--var-sizes-md);
+  }
 }
-@media (width <= 1500px) {
-  .img-carousel {
-    max-width: 700px;
+@media (min-width: 1024px) {
+  .slide {
+    width: var(--var-sizes-lg);
   }
 }
-@media (width <= 1366px) {
-  .img-carousel {
-    max-width: 590px;
+@media (min-width: 1280px) {
+  .slide {
+    width: var(--var-sizes-xl);
   }
 }
-@media (width <= 1200px) {
-  .img-carousel {
-    max-width: 513px;
-    height: auto;
+@media (min-width: 1536px) {
+  .slide {
+    width: var(--var-sizes-2xl);
   }
 }
-@media (width <= 992px) {
-  .img-carousel {
-    max-width: 486px;
-    height: auto;
+@media (min-width: 1920px) {
+  .slide {
+    width: var(--var-sizes-3xl);
   }
 }
 </style>
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 4cee707da8..8989da0063 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -6,94 +6,76 @@
       :process="selectedProcess ? selectedProcess.name : ''"
       :template="guidedTemplates ? 'Guided Templates' : ''"
     />
-    <div class="d-flex">
+    <div class="menu-mask" :class="{ 'menu-open' : showMenu }"></div>
+    <div class="process-catalog-main" :class="{ 'menu-open' : showMenu }">
       <div class="menu">
         <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
         <MenuCatologue
           ref="categoryList"
           title="Available Processes"
           preicon="fas fa-play-circle"
-          class="mt-3"
+          class="pt-3 menu-catalog"
           show-bookmark="true"
           :category-count="categoryCount"
           :data="listCategories"
           :from-process-list="fromProcessList"
-          :select="selectCategorie"
+          @categorySelected="selectCategory"
           :filter-categories="filterCategories"
-          :permission="permission"
-          @wizardLinkSelect="wizardTemplatesSelected"
           @addCategories="addCategories"
         />
+        <div class="mobile-slide-close">
+          <b-button variant="light" @click="showMenu = false" size="lg">
+            <i class="fa fa-times"></i>
+          </b-button>
+        </div>
+      </div>
+      <div class="slide-control">
+        <a href="#" @click="showMenu = !showMenu">
+          <i class="fa" :class="{ 'fa-caret-right' : !showMenu, 'fa-caret-left' : showMenu }"></i>
+        </a>
       </div>
       <div class="processes-info">
-        <div
-          v-if="!showWizardTemplates && !showCardProcesses && !showProcess && !showProcessScreen"
-          class="d-flex justify-content-center py-5"
-        >
-          <CatalogueEmpty />
-        </div>
-        <div v-else>
-          <CardProcess
-            v-if="showCardProcesses && !showWizardTemplates && !showProcess"
-            :key="key"
-            :category="category"
-            @openProcess="openProcess"
-            @wizardLinkSelect="wizardTemplatesSelected"
-          />
-          <ProcessInfo
-            v-if="showProcess && !showWizardTemplates && !showCardProcesses && !showProcessScreen"
-            :process="selectedProcess"
-            :current-user-id="currentUserId"
-            :current-user="currentUser"
-            :permission="permission"
-            :is-documenter-installed="isDocumenterInstalled"
-            @goBackCategory="returnedFromInfo"
-          />
-          <ProcessScreen
-            v-if="showProcessScreen && !showCardProcesses && !showWizardTemplates"
-            :process="selectedProcess"
-            :current-user-id="currentUserId"
-            :permission="permission"
-            :is-documenter-installed="isDocumenterInstalled"
-            @goBackCategory="returnedFromInfo"
-          />
-          <wizard-templates
-            v-if="showWizardTemplates"
-            :template="guidedTemplates"
-          />
-        </div>
+          <div class="mobile-menu-control" v-show="showMobileMenuControl">
+            <span @click="showMenu = !showMenu">
+              <i class="fa fa-bars"></i>
+              {{ category?.name || '' }}
+            </span>
+          </div>
+        
+          <router-view @goBackCategory="goBackCategory"></router-view>
+
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ProcessInfo from "./ProcessInfo.vue";
 import MenuCatologue from "./menuCatologue.vue";
 import CatalogueEmpty from "./CatalogueEmpty.vue";
-import CardProcess from "./CardProcess.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
-import WizardTemplates from "./WizardTemplates.vue";
-import ProcessScreen from "./ProcessScreen.vue";
 
 export default {
   components: {
-    MenuCatologue, CatalogueEmpty, Breadcrumbs, CardProcess, WizardTemplates, ProcessInfo, ProcessScreen,
+    MenuCatologue, CatalogueEmpty, Breadcrumbs,
   },
-  props: ["permission", "isDocumenterInstalled", "currentUserId", "process", "currentUser"],
+  props: ["currentUserId", "process", "currentUser"],
   data() {
     return {
+      showMenu: false,
+      isMobile: window.screen.width < 650,
       listCategories: [],
       defaultOptions: [
         {
-          id: -1,
+          id: 'recent',
+          name: this.$t("Recent Cases"),
+        },
+        {
+          id: 'all_processes',
           name: this.$t("All Processes"),
-          status: "ACTIVE",
         },
         {
-          id: 0,
+          id: 'bookmarks',
           name: this.$t("My Bookmarks"),
-          status: "ACTIVE",
         },
       ],
       fields: [],
@@ -110,22 +92,35 @@ export default {
       key: 0,
       totalPages: 1,
       filter: "",
-      markCategory: false,
       fromProcessList: false,
       categoryCount: 0,
+      hideLaunchpad: true,
     };
   },
   mounted() {
     const url = new URL(window.location.href);
     this.getCategories();
-    setTimeout(() => {
-      this.checkSelectedProcess();
-      if (this.hasGuidedTemplateParamsOnly(url) || this.hasTemplateParams(url)) {
-        // Loaded from URL with guided template parameters to show guided templates
-        // Dynamically load the component
-        this.$refs.categoryList.selectTemplateItem();
+
+    // Show the menu by default when not on mobile
+    if (!this.isMobile) {
+      this.showMenu = true;
+    }
+  },
+  watch: {
+    category: {
+      deep: true,
+      handler() {
+        // Only hide the menu automatically if we are on mobile
+        if (this.isMobile) {
+          this.showMenu = false;
+        }
       }
-    }, 500);
+    }
+  },
+  computed: {
+    showMobileMenuControl() {
+      return this.$route.name === "index";
+    }
   },
   methods: {
     /**
@@ -157,17 +152,15 @@ export default {
             + `&per_page=${this.numCategories}`
             + `&filter=${this.filter}`)
           .then((response) => {
-            if (!this.checkDefaultOptions()) {
-              this.listCategories = [...this.defaultOptions, ...this.listCategories];
-            }
-            this.listCategories = [...this.listCategories, ...response.data.data];
+
+            const loadedCategories = response.data.data.filter(category => {
+              // filter if category exists in the default options
+              return !this.defaultOptions.some(defaultOption => defaultOption.name === category.name);
+            });
+            this.listCategories = [...this.defaultOptions, ...loadedCategories]; 
+
             this.totalPages = response.data.meta.total_pages !== 0 ? response.data.meta.total_pages : 1;
             this.categoryCount = response.data.meta.total;
-            if (this.markCategory) {
-              const indexCategory = this.listCategories.findIndex((category) => category.name === this.category.name);
-              this.$refs.categoryList.markCategory(this.listCategories[indexCategory]);
-              this.markCategory = false;
-            }
           });
       }
     },
@@ -192,18 +185,6 @@ export default {
           const categories = this.process.process_category_id;
           categoryId = typeof categories === "string" ? categories.split(",")[0] : categories;
         }
-        if (categoryId !== "0" && categoryId !== "-1") {
-          ProcessMaker.apiClient
-            .get(`process_bookmarks/${categoryId}`)
-            .then((response) => {
-              this.category = response.data;
-              this.markCategory = true;
-              this.filterCategories(this.category.name);
-            });
-        } else {
-          this.category = this.getDefaultCategory(categoryId);
-          this.$refs.categoryList.markCategory(this.category, false);
-        }
       }
     },
     /**
@@ -215,42 +196,19 @@ export default {
     /**
      * Select a category and show display
      */
-    selectCategorie(value) {
-      const url = new URL(window.location.href);
-
-      // If url has Template Params, don't replace state.
-      if (!this.hasTemplateParams(url)) {
-        window.history.replaceState(null, null, "/process-browser");
-        this.key += 1;
-        this.category = value;
-        this.selectedProcess = null;
-        this.showCardProcesses = true;
-        this.guidedTemplates = false;
-        this.showWizardTemplates = false;
+    selectCategory(value) {
+      if (!value) {
+        return;
       }
+      
+      this.category = value;
 
-      this.showProcess = false;
-    },
-    /**
-     * Select a wizard templates and show display
-     */
-    wizardTemplatesSelected(hasUrlParams = false) {
-      if (!hasUrlParams) {
-        // Add the params if the guided template link was selected
-        const url = new URL(window.location.href);
-        if (!url.search.includes("?guided_templates=true")) {
-          url.searchParams.append("guided_templates", true);
-          history.pushState(null, "", url); // Update the URL without triggering a page reload
-        }
+      // Do not set the query if we are already on the route
+      if (String(this.$route.query.categoryId) === String(value.id)) {
+        return;
       }
 
-      // Update state variables
-      this.showWizardTemplates = true;
-      this.guidedTemplates = true;
-      this.showCardProcesses = false;
-      this.showProcess = false;
-      this.selectedProcess = null;
-      this.category = null;
+      this.$router.push({ name: 'index', query: { categoryId: value.id } });
     },
     /**
      * Select a process and show display
@@ -258,32 +216,14 @@ export default {
     openProcess(process) {
       this.showCardProcesses = false;
       this.guidedTemplates = false;
-      if (this.verifyScreen(process)) {
-        this.showProcess = false;
-        this.showProcessScreen = true;
-      } else {
-        this.showProcess = true;
-        this.showProcessScreen = false;
-      }
       this.selectedProcess = process;
     },
     /**
      * Return a process cards from process info
      */
-    returnedFromInfo() {
-      this.selectCategorie(this.category);
-    },
-    /**
-     * Verify if the process open the info or Screen
-     */
-    verifyScreen(process) {
-      let screenId = 0;
-      const unparseProperties = process.launchpad?.properties || null;
-      if (unparseProperties !== null) {
-        screenId = JSON.parse(unparseProperties)?.screen_id || 0;
-      }
-
-      return screenId !== 0;
+    goBackCategory() {
+      const categoryId = this.category ? this.category.id : 'recent'
+      this.$router.push({ name: "index", query: { categoryId } });
     },
     hasGuidedTemplateParamsOnly(url) {
       return url.search.includes("?guided_templates=true") && !url.search.includes("?guided_templates=true&template=");
@@ -295,13 +235,137 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '~styles/variables';
+
+
+@media (max-width: $lp-breakpoint) {
+  .breadcrum-main {
+    display: none;
+  }
+}
+
+.process-catalog-main {
+  display: flex;
+
+  @media (max-width: $lp-breakpoint) {
+      display: block;
+  }
+}
+
 .menu {
-  min-width: 304px;
+  left: -100%;
   height: calc(100vh - 145px);
-  overflow-y: auto;
+  overflow: hidden;
   margin-top: 15px;
+  transition: flex 0.3s;
+  flex: 0 0 0px;
+
+  .menu-catalog {
+    background-color: #F7F9FB;
+    flex: 1;
+    width: 315px;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    position: absolute;
+    z-index: 4; // above pagination
+    display: flex;
+    margin-top: 0;
+    width: 85%;
+    transition: left 0.3s;
+  }
+}
+
+.menu-mask {
+  display: none;
+  position: absolute;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 3;
+  transition: background-color 0.3s;
+  
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+
+.menu-mask.menu-open {
+  @media (max-width: $lp-breakpoint) {
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: block;
+  }
+}
+
+.menu-open .menu {
+  flex: 0 0 315px;
+  @media (max-width: $lp-breakpoint) {
+    left: 0%;
+  }
 }
+
+.mobile-slide-close {
+  display: none;
+  padding-left: 10px;
+  padding-top: 10px;
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+
+.slide-control {
+  border-left: 0;
+  border-right: 1px solid #DEE0E1;
+  margin-left: 10px;
+  
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+
+  a {
+    position: relative;
+    left: 10px;
+    top: 40px;
+    z-index: 5;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 60px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    border: 1px solid #DEE0E1;
+  }
+}
+
+.menu-open .slide-control {
+  border-right: 0;
+  border-left: 1px solid #DEE0E1;
+
+  a {
+    left: -10px;
+  }
+  
+}
+
+.mobile-menu-control {
+  display: none;
+  color: #6A7887;
+  font-size: 1.3em;
+  margin-top: 10px;
+  margin-left: 1em;
+  i {
+    margin-right: 3px;
+  }
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+
 .menu-title {
   color: #556271;
   font-size: 22px;
@@ -309,11 +373,21 @@ export default {
   font-weight: 600;
   line-height: 46.08px;
   letter-spacing: -0.44px;
+  display: block;
+  width: 315px;
+
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
 }
 .processes-info {
   width: 100%;
-  margin-right: 16px;
+  margin-right: -16px;
   height: calc(100vh - 145px);
-  padding-left: 32px;
+  overflow-x: hidden;
+  @media (max-width: $lp-breakpoint) {
+    padding-left: 0;
+  }
 }
+
 </style>
diff --git a/resources/js/processes-catalogue/components/RequestTab.vue b/resources/js/processes-catalogue/components/RequestTab.vue
index 0d5432bdca..07d7041dc1 100644
--- a/resources/js/processes-catalogue/components/RequestTab.vue
+++ b/resources/js/processes-catalogue/components/RequestTab.vue
@@ -132,7 +132,8 @@ export default {
       this.page = page;
       this.queryBuilder();
     },
-    changePerPage(value) {
+    changePerPage(value, page) {
+      this.page = page;
       this.perPage = value;
       this.queryBuilder();
     },
diff --git a/resources/js/processes-catalogue/components/TaskTab.vue b/resources/js/processes-catalogue/components/TaskTab.vue
index 0c67f94fdf..0c4c5ccf95 100644
--- a/resources/js/processes-catalogue/components/TaskTab.vue
+++ b/resources/js/processes-catalogue/components/TaskTab.vue
@@ -133,7 +133,8 @@ export default {
       this.page = page;
       this.queryBuilder();
     },
-    changePerPage(value) {
+    changePerPage(value, page) {
+      this.page = page;
       this.perPage = value;
       this.queryBuilder();
     },
diff --git a/resources/js/processes-catalogue/components/WizardTemplates.vue b/resources/js/processes-catalogue/components/WizardTemplates.vue
index 6bca595d5a..aaabd824c4 100644
--- a/resources/js/processes-catalogue/components/WizardTemplates.vue
+++ b/resources/js/processes-catalogue/components/WizardTemplates.vue
@@ -16,7 +16,7 @@ import TemplateSearch from "../../components/templates/TemplateSearch.vue";
 
 export default {
   components: { TemplateSearch },
-  props: ["template"],
+  props: ["categoryId"],
   data() {
     return {
       currentComponent: "template-select-card",
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
index 83a4aec20f..0d13c72409 100644
--- a/resources/js/processes-catalogue/components/menuCatologue.vue
+++ b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -3,6 +3,7 @@
     <SearchCategories
       ref="searchCategory"
       :filter-pmql="onFilter"
+      class="hide-on-mobile"
     />
     <div
       v-b-toggle.category-menu
@@ -48,6 +49,7 @@
         </p>
       </b-list-group>
     </b-collapse>
+    <div class="hide-on-mobile">
     <hr class="my-12">
     <div
       v-b-toggle.collapse-3
@@ -74,6 +76,7 @@
     <b-collapse
       id="collapse-3"
       visible
+      class="hide-on-mobile"
     >
       <b-list-group>
         <b-list-group-item
@@ -88,6 +91,7 @@
         </b-list-group-item>
       </b-list-group>
     </b-collapse>
+    </div>
 
     <select-template-modal
       ref="addProcessModal"
@@ -102,6 +106,7 @@
 <script>
 import SearchCategories from "./utils/SearchCategories.vue";
 import SelectTemplateModal from "../../components/templates/SelectTemplateModal.vue";
+import { EventBus } from '../index.js';
 
 export default {
   components: {
@@ -110,7 +115,6 @@ export default {
   },
   props: [
     "data",
-    "select",
     "title",
     "preicon",
     "filterCategories",
@@ -145,6 +149,11 @@ export default {
       comeFromProcess: false,
     };
   },
+  created() {
+    EventBus.$on('templates-selected', (obj) => {
+      this.openTemplate(obj);
+    });
+  },
   computed: {
     /**
      * Filters options regarding user permissions
@@ -168,26 +177,55 @@ export default {
       this.selectDefault();
     }
   },
+  watch: {
+    $route(r) {
+      this.handleRouteQuery();
+    },
+    data() {
+      this.handleRouteQuery();
+    }
+  },
   methods: {
+    handleRouteQuery() {
+
+      // Do not change the selected category if we are not in the index route.
+      // This way, we preserve the selected category when returning from process details.
+
+      if (this.$route.name !== "index") {
+        return;
+      }
+
+      const query = this.$route.query;
+
+      if (query.categoryId) {
+        const selectedProcessItem = this.data.find((category) => {
+          return String(category.id) === String(query.categoryId);
+        });
+
+        if (selectedProcessItem) {
+          this.selectProcessItem(selectedProcessItem);
+        }
+
+        const selectedTemplateItem = this.filteredTemplateOptions.find((category) => {
+          return String(category.id) === String(query.categoryId);
+        });
+
+        if (selectedTemplateItem) {
+          this.selectTemplateItem(selectedTemplateItem);
+        }
+      }
+    },
     /**
      * Adding categories
      */
     loadMore() {
       this.$emit("addCategories");
     },
-    markCategory(item, filter = true) {
-      this.comeFromProcess = true;
-      this.selectedProcessItem = item;
-      this.selectedTemplateItem = null;
-      if (filter) {
-        this.$refs.searchCategory.fillFilter(item.name);
-      }
-    },
     selectProcessItem(item) {
       this.comeFromProcess = false;
       this.selectedProcessItem = item;
       this.selectedTemplateItem = null;
-      this.select(item);
+      this.$emit('categorySelected', item);
     },
     /**
      * Enables All Templates option only if user has create-processes permission
@@ -201,14 +239,9 @@ export default {
           return obj.id === "guided_templates";
         });
       }
-      if (item.id === "all_templates") {
-        this.addNewProcess();
-        return;
-      }
       this.selectedTemplateItem = item;
       this.selectedProcessItem = null;
-      this.select(item);
-      this.$emit("wizardLinkSelect");
+      this.$emit('categorySelected', item);
     },
     /**
      * This method opens New Process modal window
@@ -218,11 +251,20 @@ export default {
         this.$refs.addProcessModal.show();
       });
     },
+    openTemplate(obj) {
+      this.$nextTick(() => {
+        this.$refs.addProcessModal.show();
+        this.$refs.addProcessModal.$nextTick(() => {
+          this.$refs.addProcessModal.$refs["template-search"].showDetails(obj);
+          this.$refs.addProcessModal.hideBackButton();
+        });
+      });
+    },
     isSelectedProcess(item) {
       return this.selectedProcessItem === item;
     },
-    isSelectedTemplate(index) {
-      return this.selectedTemplateItem === index;
+    isSelectedTemplate(item) {
+      return this.selectedTemplateItem === item;
     },
     onToggleCatalogue() {
       this.showCatalogue = !this.showCatalogue;
@@ -237,7 +279,7 @@ export default {
       this.filterCategories(value);
     },
     hasPermission() {
-      return this.permission.includes("create-processes");
+      return this.$root.permission.includes("create-processes");
     },
     checkPackageAiInstalled() {
       this.hasPackageAI = ProcessMaker.packages.includes("package-ai") ? 1 : 0;
@@ -256,13 +298,12 @@ export default {
 
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");
+@import "~styles/variables";
 i {
   font-size: 20px;
   color: #6a7888;
 }
 #category-menu > .list-group {
-  max-height: 37vh;
-  min-height: 37vh;
   overflow-y: auto;
 }
 .list-group-item {
@@ -313,4 +354,10 @@ i {
   padding: 12px 18px;
   gap: 16px;
 }
+
+.hide-on-mobile {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/mixins/ProcessesMixin.js b/resources/js/processes-catalogue/components/mixins/ProcessesMixin.js
index 36b4a75336..03afcf2a6c 100644
--- a/resources/js/processes-catalogue/components/mixins/ProcessesMixin.js
+++ b/resources/js/processes-catalogue/components/mixins/ProcessesMixin.js
@@ -12,8 +12,6 @@ const ProcessHeader = {
       readActivated: false,
       showEllipsis: false,
       labelTooltip: "",
-      showBookmarkIcon: false,
-      auxBookmarkId: this.process.bookmark_id ?? 0,
     };
   },
   mounted() {
@@ -23,41 +21,8 @@ const ProcessHeader = {
       id: this.process.id.toString(),
       type: "Process",
     };
-    this.bookmarkIcon();
   },
   methods: {
-    /**
-     * Verify if the process is marked
-     */
-    bookmarkIcon() {
-      this.labelTooltip = this.process.bookmark_id !== 0
-        ? this.$t("Remove from My Bookmarks") : this.$t("Add to My Bookmarks");
-      this.showBookmarkIcon = this.process.bookmark_id !== 0;
-    },
-    /**
-     * Check the bookmark to add bookmarked list or remove it
-     */
-    checkBookmark(process) {
-      if (this.auxBookmarkId) {
-        ProcessMaker.apiClient
-          .delete(`process_bookmarks/${this.auxBookmarkId}`)
-          .then(() => {
-            ProcessMaker.alert(this.$t("Process removed from Bookmarked List."), "success");
-            this.labelTooltip = this.$t("Add to My Bookmarks");
-            this.showBookmarkIcon = false;
-            this.auxBookmarkId = 0;
-          });
-        return;
-      }
-      ProcessMaker.apiClient
-        .post(`process_bookmarks/${process.id}`)
-        .then(($response) => {
-          ProcessMaker.alert(this.$t("Process added to Bookmarked List."), "success");
-          this.labelTooltip = this.$t("Remove from My Bookmarks");
-          this.showBookmarkIcon = true;
-          this.auxBookmarkId = $response.data.newId;
-        });
-    },
     showCreateTemplateModal(name, id) {
       this.processId = id;
       this.processTemplateName = name;
@@ -105,7 +70,7 @@ const ProcessHeader = {
         "create-process-templates",
         "view-projects",
       ];
-      this.showEllipsis = this.permission.some( (permission) => permissionsNeeded.includes(permission));
+      this.showEllipsis = this.$root.permission.some( (permission) => permissionsNeeded.includes(permission));
     },
     /**
      * Return a process cards from process info
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ButtonsStart.vue b/resources/js/processes-catalogue/components/optionsMenu/ButtonsStart.vue
index d62e3cde80..beb711f7cb 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ButtonsStart.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ButtonsStart.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="start-events btn-group mx-2">
     <button
-      v-if="havelessOneStartEvent"
+      v-if="startEvent"
       class="btn btn-success start-button"
       type="button"
       :disabled="processEvents.length === 0"
@@ -11,7 +11,7 @@
         class="fa fa-play-circle"
         style="font-size: 16px;"
       />
-      <span class="pl-2"> {{ $t('Start this process') }} </span>
+      <span class="pl-2"> {{ displayTitle }} </span>
     </button>
     <button
       v-else
@@ -20,19 +20,11 @@
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false"
-      @click="getStartEvents()"
     >
       <span>
-        <i
-          class="fa fa-play-circle"
-          style="font-size: 16px;"
-        />
-        <span class="pl-2"> {{ $t('Start this process') }} </span>
+        <i class="fa fa-play-circle" />
+        <span class="pl-2"> {{ displayTitle }} </span>
       </span>
-      <i
-        class="fas fa-caret-down"
-        style="font-size: 16px;"
-      />
     </button>
     <div class="dropdown-menu dropdown-menu-right scrollable-menu p-3 pb-0 mt-2">
       <div
@@ -72,49 +64,40 @@
 
 <script>
 export default {
-  props: ["process"],
+  props: {
+    process: {
+      type: Object,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: null,
+    },
+    startEvent: {
+      type: String,
+      default: null,
+    },
+    processEvents: {
+      type: Array,
+      default: () => [],
+    }
+  },
   data() {
     return {
-      processEvents: [],
-      havelessOneStartEvent: false,
-      startEvent: "",
       anonUserId: "2",
     };
   },
   mounted() {
-    this.getStartEvents();
   },
-  methods: {
-    /**
-     * get start events for dropdown Menu
-     */
-    getStartEvents() {
-      this.processEvents = [];
-      ProcessMaker.apiClient
-        .get(`process_bookmarks/processes/${this.process.id}/start_events`)
-        .then((response) => {
-          this.processEvents = response.data.data;
-          if (this.processEvents.length <= 1) {
-            const event = this.processEvents[0] ?? {};
-            if (!("webEntry" in event)) {
-              this.havelessOneStartEvent = true;
-              this.startEvent = event.id ?? 0;
-            }
-          }
-        })
-        .catch((err) => {
-          this.disableButton();
-          ProcessMaker.alert(err, "danger");
-        });
-    },
-    /**
-     * Disable Start Button
-     */
-    disableButton() {
-      this.havelessOneStartEvent = true;
-      this.processEvents = [];
-      this.startEvent = 0;
+  computed: {
+    displayTitle() {
+      if (this.title) {
+        return this.title;
+      }
+      return this.$t("Start this process");
     },
+  },
+  methods: {
     /**
      * Start new request
      */
@@ -150,7 +133,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '~styles/variables';
 .start-button {
   display: flex;
   align-items: center;
@@ -161,17 +145,25 @@ export default {
   width: 249px;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
-  font-weight: 600;
   line-height: 21px;
   letter-spacing: -0.02em;
   text-align: left;
   text-transform: capitalize;
-  padding: 5px 16px;
+  padding: 16px;
+
+  i {
+    font-size: 1.3em;
+    vertical-align: top;
+  }
+
+  @media (max-width: $lp-breakpoint) {
+    width: 100%;
+    font-size: 18px;
+    height: auto;
+  }
 }
 .scrollable-menu {
-    height: auto;
-    max-height: 280px;
-    overflow-x: hidden;
+  overflow-x: auto;
 }
 .dropdown-menu.show {
   width: 316px;
@@ -192,7 +184,6 @@ export default {
   text-transform: uppercase;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
-  font-weight: 700;
   line-height: 21px;
   letter-spacing: -0.02em;
   text-align: left;
@@ -208,7 +199,6 @@ export default {
   border: 0px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
-  font-weight: 400;
   line-height: 24px;
   letter-spacing: -0.02em;
   text-align: left;
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue b/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
index 136a05eaf0..a9e3d00974 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <span class="title">
+      {{ $t('Process Chart') }}
+    </span>
     <base-chart ref="baseChart" :process="process"></base-chart>
   </div>
 </template>
@@ -22,6 +25,13 @@ export default {
 </script>
 
 <style scoped>
+.title {
+  color: #1572C2;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
 .image-container {
   width: 100%;
   padding-top: 100%;
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
new file mode 100644
index 0000000000..5186553335
--- /dev/null
+++ b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="col-sm-9">
+      <span class="title">
+        {{ $t('Details') }}
+      </span>
+      <p class="title-process">
+        {{ process.name }}
+      </p>
+      <p
+        v-if="readActivated || !largeDescription"
+        class="description"
+      >
+        {{ process.description }}
+      </p>
+      <p
+        v-if="!readActivated && largeDescription"
+        class="description"
+      >
+        {{ process.description.slice(0,300) }}
+        <a
+          v-if="!readActivated"
+          class="read-more"
+          @click="activateReadMore"
+        >
+          ...
+        </a>
+      </p>
+    </div>
+</template>
+<script>
+export default {
+  props: ["process"],
+  data() {
+    return {
+      readActivated: false,
+      largeDescription: false,
+    };
+  },
+  methods: {
+    activateReadMore() {
+      this.readActivated = true;
+    },
+  },
+};
+</script>
+<style scoped>
+.title{
+  color: #1572C2;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.title-process {
+  color: #4C545C;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+.description {
+  color: #4f606d;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+</style>
diff --git a/resources/js/processes-catalogue/components/scss/processes.css b/resources/js/processes-catalogue/components/scss/processes.css
index 60277d471b..12762f28e8 100644
--- a/resources/js/processes-catalogue/components/scss/processes.css
+++ b/resources/js/processes-catalogue/components/scss/processes.css
@@ -44,12 +44,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: white;
-  border: 1px solid #CDDDEE;
-  border-radius: 19px;
-  width: 32px;
-  height: 32px;
-  margin: 0px 8px;
+  margin-right: 5px;
 }
 .ellipsis-border .dropdown-toggle::after {
     display:none;
@@ -58,27 +53,8 @@
   cursor: pointer;
   color: #1572C2;
 }
-.card-bookmark {
-  float: right;
-  font-size: 24px;
-}
-.card-bookmark:hover {
-  cursor: pointer;
-}
 #header {
   padding: 12px 16px;
   border-bottom: 1px solid #CDDDEE;
   box-shadow: 0px 6px 18px 0px #EFF1F4;
 }
-.marked {
-  color: #f5bC00;
-}
-.unmarked {
-  color: #ebf3f7;
-  -webkit-text-stroke-color: #bed1e5;
-  -webkit-text-stroke-width: 1px;
-}
-.unmarked:hover {
-  color: #ffd445;
-  -webkit-text-stroke-width: 0;
-}
diff --git a/resources/js/processes-catalogue/components/utils/Card.vue b/resources/js/processes-catalogue/components/utils/Card.vue
index bd6731d64a..ceec46094c 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -4,15 +4,6 @@
     class="card-process"
   >
     <b-card-text>
-      <div class="card-bookmark">
-        <i
-          :ref="`bookmark-${process.id}`"
-          v-b-tooltip.hover.bottom
-          :title="$t(labelTooltip)"
-          :class="bookmarkIcon()"
-          @click="checkBookmark(process)"
-        />
-      </div>
       <div
         class="card-info"
         @click="openInfo(process)"
@@ -37,51 +28,48 @@
           variant="custom"
         />
       </div>
+      <div class="requests-count" v-if="caseCount">
+        {{ caseCount }}
+      </div>
+      <bookmark
+        v-if="!hideBookmark"
+        :process="process"
+        class="bookmark"
+        @bookmark-updated="$parent.loadCard()"
+      />
     </b-card-text>
   </b-card>
 </template>
 
 <script>
+import Bookmark from "../Bookmark.vue";
+
 export default {
-  props: ["process"],
+  components: {
+    Bookmark
+  },
+  props: {
+    process: null,
+    hideBookmark: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       labelIcon: "Default Icon",
       labelTooltip: "",
     };
   },
-  methods: {
-    /**
-     * Check the bookmark to add bookmarked list or remove it
-     */
-    checkBookmark(process) {
-      if (process.bookmark_id) {
-        ProcessMaker.apiClient
-          .delete(`process_bookmarks/${process.bookmark_id}`)
-          .then(() => {
-            ProcessMaker.alert(this.$t("Process removed from Bookmarked List."), "success");
-            this.$parent.loadCard();
-          });
-        return;
+  computed: {
+    caseCount() {
+      if (this.process?.counts?.total) {
+        return this.process.counts.total.toLocaleString();
       }
-      ProcessMaker.apiClient
-        .post(`process_bookmarks/${process.id}`)
-        .then(() => {
-          ProcessMaker.alert(this.$t("Process added to Bookmarked List."), "success");
-          this.$parent.loadCard();
-        });
-    },
-    /**
-     * Verify if the process is marked
-     */
-    bookmarkIcon() {
-      if (this.process.bookmark_id !== 0) {
-        this.labelTooltip = this.$t("Remove from My Bookmarks");
-        return "fas fa-bookmark marked";
-      }
-      this.labelTooltip = this.$t("Add to My Bookmarks");
-      return "fas fa-bookmark unmarked";
-    },
+      return null;
+    }
+  },
+  methods: {
     /**
      * Open the process
      */
@@ -101,7 +89,10 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
+@import '~styles/variables';
+
 .card-process {
   max-width: 343px;
   min-width: 296px;
@@ -111,6 +102,14 @@ export default {
   margin-right: 1rem;
   border-radius: 16px;
   background-image: url("/img/launchpad-images/process_background.svg");
+
+  @media (max-width: $lp-breakpoint) {
+    width: 100%;
+    max-width: none;
+    min-width: none;
+    border-radius: 8px;
+    height: 100px;
+  }
 }
 .card-process:hover {
   box-shadow: 0px 3px 16px 2px #acbdcf75;
@@ -119,44 +118,70 @@ export default {
   padding: 32px;
   height: 100%;
   width: 100%;
+
+  @media (max-width: $lp-breakpoint) {
+    padding: 16px;
+  }
 }
 .card-img {
   border-radius: 16px;
 }
-.card-bookmark {
+.requests-count {
+  display: none;
   float: right;
-  font-size: 24px;
+  font-size: 14px;
+  font-weight: bold;
+  background-color: #F9E7C3;
+  margin-right: 8px;
+  
+  border-radius: 15px;
+  min-width: 30px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+
+  @media (max-width: $lp-breakpoint) {
+    display: flex;
+  }
 }
-.card-bookmark:hover {
-  cursor: pointer;
+
+.bookmark {
+  float:right;
 }
 .card-text {
   height: 100%;
+  display: flex;
+  width: 100%;
+  
+  @media (max-width: $lp-breakpoint) {
+    align-items: center;
+  }
 }
 .card-info {
   cursor: pointer;
   height: 100%;
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: baseline;
   justify-content: flex-end;
+
+  @media (max-width: $lp-breakpoint) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: normal;
+  }
 }
 .icon-process {
   width: 48px;
   height: 48px;
   margin-bottom: 16px;
-}
-.marked {
-  color: #f5bC00;
-}
-.unmarked {
-  color: #ebf3f7;
-  -webkit-text-stroke-color: #bed1e5;
-  -webkit-text-stroke-width: 1px;
-}
-.unmarked:hover {
-  color: #ffd445;
-  -webkit-text-stroke-width: 0;
+
+  @media (max-width: $lp-breakpoint) {
+    margin-bottom: 0;
+    margin-right: 10px;
+  }
 }
 .title-process {
   color: #556271;
diff --git a/resources/js/processes-catalogue/index.js b/resources/js/processes-catalogue/index.js
index acbe35c721..3e42fb8151 100644
--- a/resources/js/processes-catalogue/index.js
+++ b/resources/js/processes-catalogue/index.js
@@ -1,10 +1,48 @@
 import Vue from "vue";
+import Process from "./components/Process";
 import ProcessesCatalogue from "./components/ProcessesCatalogue";
+import ProcessListing from "./components/ProcessListing";
+
+export const EventBus = new Vue();
+Vue.use(VueRouter);
+const router = new VueRouter({
+  mode: "history",
+  base: "/process-browser",
+  //See https://v3.router.vuejs.org/guide/
+  routes: [
+    {
+      name: "index",
+      path: "",
+      component: ProcessListing,
+      props(route) {
+        return {
+          categoryId: route.query.categoryId || 'recent',
+        };
+      }
+    },
+    {
+      name: "show",
+      path: "/:processId",
+      component: Process,
+      props(route) {
+        return {
+          processId: parseInt(route.params.processId) || null,
+          process: route.params.process || null,
+        };
+      }
+    },
+  ]
+});
 
 new Vue({
   el: "#processes-catalogue",
   components: { ProcessesCatalogue },
-  data: {
+  router,
+  data() {
+    return {
+      permission: window.ProcessMaker.permission,
+      isDocumenterInstalled: window.ProcessMaker.isDocumenterInstalled,
+    };
   },
   methods: {
   },
diff --git a/resources/js/processes/categories/components/CategoriesListing.vue b/resources/js/processes/categories/components/CategoriesListing.vue
index 5fdfa97ad9..47200211dc 100644
--- a/resources/js/processes/categories/components/CategoriesListing.vue
+++ b/resources/js/processes/categories/components/CategoriesListing.vue
@@ -19,7 +19,7 @@
               <div
                 v-if="column.sortable"
                 :key="index"
-                @click="handleEllipsisClick(column)"
+                @click="onClickEllipsis(column)"
               >
                 <i
                   :class="['fas', {
@@ -112,6 +112,8 @@
   import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
   import paginationTable from "../../../components/shared/PaginationTable.vue";
   import FilterTableBodyMixin from "../../../components/shared/FilterTableBodyMixin";
+  import { ellipsisSortClick } from "../../../components/shared/UtilsTable";
+
   const uniqIdsMixin = createUniqIdsMixin();
 
   export default {
@@ -292,35 +294,8 @@
         };
         return bubbleColor[status];
       },
-      handleEllipsisClick(categoryColumn) {
-        this.fields.forEach(column => {
-          if (column.field !== categoryColumn.field) {
-            column.direction = "none";
-            column.filterApplied = false;
-          }
-        });
-
-        if (categoryColumn.direction === "asc") {
-          categoryColumn.direction = "desc";
-        } else if (categoryColumn.direction === "desc") {
-          categoryColumn.direction = "none";
-          categoryColumn.filterApplied = false;
-        } else {
-          categoryColumn.direction = "asc";
-          categoryColumn.filterApplied = true;
-        }
-
-        if (categoryColumn.direction !== "none") {
-          const sortOrder = [
-            {
-              sortField: categoryColumn.sortField || categoryColumn.field,
-              direction: categoryColumn.direction,
-            },
-          ];
-          this.dataManager(sortOrder);
-        } else {
-          this.fetch();
-        }
+      onClickEllipsis(column) {
+        ellipsisSortClick(column, this);
       },
     }
   };
diff --git a/resources/js/processes/screens/components/ScreenListing.vue b/resources/js/processes/screens/components/ScreenListing.vue
index 8d20fd1e49..611af1f2bc 100644
--- a/resources/js/processes/screens/components/ScreenListing.vue
+++ b/resources/js/processes/screens/components/ScreenListing.vue
@@ -7,36 +7,84 @@
             :empty-desc="$t('')"
             empty-icon="noData"
     />
-    <div v-show="!shouldShowLoader" class="card card-body screen-table-card" data-cy="screens-table">
-      <vuetable
-        :dataManager="dataManager"
-        :noDataTemplate="$t('No Data Available')"
-        :sortOrder="sortOrder"
-        :css="css"
-        :api-mode="false"
-        :fields="fields"
+    <div v-show="!shouldShowLoader" class="screen-table-card" data-cy="screens-table">
+      <filter-table
+        :headers="fields"
         :data="data"
-        data-path="data"
-        pagination-path="meta"
+        table-name="screens"
+        style="height: calc(100vh - 355px);"
       >
-        <template slot="title" slot-scope="props">
-          <b-link
-            :href="onScreenNavigate('edit-screen', props.rowData, props.rowIndex)"
-            v-if="permission.includes('edit-screens')"
-          ><span v-uni-id="props.rowData.id.toString()">{{props.rowData.title}}</span></b-link>
-          <span v-uni-id="props.rowData.id.toString()" v-else="permission.includes('edit-screens')">{{props.rowData.title}}</span>
+        <!-- Slot Table Header filter Button -->
+        <template v-for="(column, index) in fields" v-slot:[`filter-${column.field}`]>
+          <div
+            v-if="column.sortable"
+            :key="index"
+            @click="onClickEllipsis(column)"
+          >
+            <i
+              :class="['fas', {
+                'fa-sort': column.direction === 'none',
+                'fa-sort-up': column.direction === 'asc',
+                'fa-sort-down': column.direction === 'desc',
+              }]"
+            ></i>
+          </div>
         </template>
-
-        <template slot="actions" slot-scope="props">
-          <ellipsis-menu
-            :actions="screenActions"
-            :permission="permission"
-            :data="props.rowData"
-            :divider="true"
-            @navigate="onScreenNavigate"
-          />
+        <template v-for="(row, rowIndex) in data.data" v-slot:[`row-${rowIndex}`]>
+          <td
+            v-for="(header, colIndex) in fields"
+            :key="colIndex"
+            :data-cy="`screens-table-td-${rowIndex}-${colIndex}`"
+          >
+            <div
+              :data-cy="`screens-table-html-${rowIndex}-${colIndex}`"
+              v-if="containsHTML(row[header.field])"
+              v-html="sanitize(row[header.field])"
+            >
+            </div>
+            <template v-else>
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`screens-table-component-${rowIndex}-${colIndex}`"
+              >
+                <component
+                  :is="row[header.field].component"
+                  v-bind="row[header.field].props"
+                >
+                </component>
+              </template>
+              <template
+                v-else
+                :data-cy="`screens-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'title'">
+                  <b-link
+                    :href="onScreenNavigate('edit-screen', row, rowIndex)"
+                    v-if="permission.includes('edit-screens')"
+                  ><span v-uni-id="row.id.toString()">{{row.title}}</span></b-link>
+                  <span v-uni-id="row.id.toString()" v-else="permission.includes('edit-screens')">{{ row.title }}</span>
+                </template>
+                <template v-if="header.field === 'actions'">
+                  <ellipsis-menu
+                    :actions="screenActions"
+                    :permission="permission"
+                    :data="row"
+                    :divider="true"
+                    @navigate="onScreenNavigate"
+                  />
+                </template>
+                <template v-if="header.field !== 'title' && header.field !== 'actions'">
+                  <div
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </div>
+                </template>
+              </template>
+            </template>
+          </td>
         </template>
-      </vuetable>
+      </filter-table>
 
       <add-to-project-modal id="add-to-project-modal" ref="add-to-project-modal"  assetType="screen" :assetId="screenId" :assetName="assetName" :assignedProjects="assignedProjects"/>
     </div>
@@ -108,6 +156,7 @@ import screenNavigationMixin from "../../../components/shared/screenNavigation";
 import CreateTemplateModal from "../../../components/templates/CreateTemplateModal.vue";
 import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
 import PaginationTable from "../../../components/shared/PaginationTable.vue";
+import { ellipsisSortClick } from "../../../components/shared/UtilsTable";
 
 import { createUniqIdsMixin } from "vue-uniq-ids";
 import AddToProjectModal from "../../../components/shared/AddToProjectModal.vue";
@@ -137,43 +186,76 @@ export default {
         {
           title: () => this.$t("Name"),
           name: "__slot:title",
+          label: this.$t("Name"),
           field: "title",
-          sortField: "title"
+          sortable: true,
+          direction: "none",
+          width: 150,
+          sortField: "title",
         },
         {
           title: () => this.$t("Description"),
           name: "description",
-          sortField: "description"
+          label: this.$t("Description"),
+          field: "description",
+          sortable: true,
+          direction: "none",
+          width: 150,
+          sortField: "description",
         },
         {
           title: () => this.$t("Category"),
           name: "categories",
+          label: this.$t("Category"),
+          field: "category.name",
+          sortable: true,
+          direction: "none",
+          width: 150,
           sortField: "category.name",
           callback(categories) {
             return categories.map(item => item.name).join(', ');
-          }
+          },
         },
         {
           title: () => this.$t("Type"),
           name: "type",
+          label: this.$t("Type"),
+          field: "type",
+          sortable: true,
+          direction: "none",
+          width: 100,
           sortField: "type",
-          callback: this.formatType
+          callback: this.formatType,
         },
         {
           title: () => this.$t("Modified"),
           name: "updated_at",
+          label: this.$t("Modified"),
+          field: "updated_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
           sortField: "updated_at",
-          callback: "formatDate"
+          callback: "formatDate",
         },
         {
           title: () => this.$t("Created"),
           name: "created_at",
+          label: this.$t("Created"),
+          field: "created_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
           sortField: "created_at",
-          callback: "formatDate"
+          callback: "formatDate",
         },
         {
           name: "__slot:actions",
-          title: ""
+          title: "",
+          label: "",
+          field: "actions",
         }
       ]
     };
@@ -203,7 +285,7 @@ export default {
           }
         });
     },
-    showAddToProjectModal(title, id, projects) {        
+    showAddToProjectModal(title, id, projects) {
       this.screenId = id;
       this.assetName = title;
       this.assignedProjects = projects;
@@ -245,6 +327,10 @@ export default {
       this.page = page;
       this.fetch();
     },
+    onClickEllipsis(column) {
+      ellipsisSortClick(column, this);
+    },
+
   },
 
   computed: {}
diff --git a/resources/js/processes/scripts/components/ScriptListing.vue b/resources/js/processes/scripts/components/ScriptListing.vue
index 23d5104e37..27d2f8f171 100644
--- a/resources/js/processes/scripts/components/ScriptListing.vue
+++ b/resources/js/processes/scripts/components/ScriptListing.vue
@@ -7,49 +7,93 @@
             :empty-desc="$t('')"
             empty-icon="noData"
     />
-    <div v-show="!shouldShowLoader" class="card card-body scripts-table-card" data-cy="scripts-table">
-      <vuetable
-        :dataManager="dataManager"
-        :sortOrder="sortOrder"
-        :css="css"
-        :api-mode="false"
-        @vuetable:pagination-data="onPaginationData"
-        :fields="fields"
+    <div v-show="!shouldShowLoader" class="scripts-table-card" data-cy="scripts-table">
+      <filter-table
+        :headers="fields"
         :data="data"
-        data-path="data"
-        :noDataTemplate="$t('No Data Available')"
-        pagination-path="meta"
+        table-name="scripts"
+        style="height: calc(100vh - 355px);"
       >
-        <template slot="title" slot-scope="props">
-          <b-link
-            v-if="permission.includes('edit-scripts')"
-            :href="`/designer/scripts/${props.rowData.id}/builder`"
-            v-uni-id="props.rowData.id.toString()"
-          >{{ props.rowData.title }}</b-link>
-          <span v-uni-id="props.rowData.id.toString()" v-else="permission.includes('edit-scripts')">{{props.rowData.title}}</span>
+        <!-- Slot Table Header filter Button -->
+        <template v-for="(column, index) in fields" v-slot:[`filter-${column.field}`]>
+          <div
+            v-if="column.sortable"
+            :key="index"
+            @click="onClickEllipsis(column)"
+          >
+            <i
+              :class="['fas', {
+                'fa-sort': column.direction === 'none',
+                'fa-sort-up': column.direction === 'asc',
+                'fa-sort-down': column.direction === 'desc',
+              }]"
+            ></i>
+          </div>
         </template>
-
-        <template slot="actions" slot-scope="props">
-          <ellipsis-menu
-            :actions="scriptActions"
-            :permission="permission"
-            :data="props.rowData"
-            :divider="true"
-            @navigate="onScriptNavigate"
-          />
+        <template v-for="(row, rowIndex) in data.data" v-slot:[`row-${rowIndex}`]>
+          <td
+            v-for="(header, colIndex) in fields"
+            :key="colIndex"
+            :data-cy="`scripts-table-td-${rowIndex}-${colIndex}`"
+          >
+            <div
+              :data-cy="`datasource-table-html-${rowIndex}-${colIndex}`"
+              v-if="containsHTML(row[header.field])"
+              v-html="sanitize(row[header.field])"
+            >
+            </div>
+            <template v-else>
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`scripts-table-component-${rowIndex}-${colIndex}`"
+              >
+                <component
+                  :is="row[header.field].component"
+                  v-bind="row[header.field].props"
+                >
+                </component>
+              </template>
+              <template
+                v-else
+                :data-cy="`scripts-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'title'">
+                  <b-link
+                    v-if="permission.includes('edit-scripts')"
+                    :href="`/designer/scripts/${row.id}/builder`"
+                    v-uni-id="row.id.toString()"
+                  >{{ row.title }}</b-link>
+                  <span v-uni-id="row.id.toString()" v-else="permission.includes('edit-scripts')">{{ row.title }}</span>
+                </template>
+                <template v-if="header.field === 'actions'">
+                  <ellipsis-menu
+                    :actions="scriptActions"
+                    :permission="permission"
+                    :data="row"
+                    :divider="true"
+                    @navigate="onScriptNavigate"
+                  />
+                </template>
+                <template v-if="header.field !== 'title' && header.field !== 'actions'">
+                  <div
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </div>
+                </template>
+              </template>
+            </template>
+          </td>
         </template>
-      </vuetable>
+      </filter-table>
 
       <add-to-project-modal id="add-to-project-modal" ref="add-to-project-modal"  assetType="script" :assetId="assetId" :assetName="assetName"/>
 
-      <pagination
-        :single="$t('Script')"
-        :plural="$t('Scripts')"
-        :perPageSelectEnabled="true"
-        @changePerPage="changePerPage"
-        @vuetable-pagination:change-page="onPageChange"
-        ref="pagination"
-      ></pagination>
+      <pagination-table
+        :meta="data.meta"
+        @page-change="changePage"
+        @per-page-change="changePerPage"
+      />
     </div>
     <b-modal ref="myModalRef" :title="$t('Copy Script')" centered  header-close-content="&times;" >
       <form>
@@ -86,18 +130,20 @@
 </template>
 
 <script>
+import { createUniqIdsMixin } from "vue-uniq-ids";
 import datatableMixin from "../../../components/common/mixins/datatable";
 import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
 import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
 import ellipsisMenuMixin from "../../../components/shared/ellipsisMenuActions";
 import scriptNavigationMixin from "../../../components/shared/scriptNavigation";
 import AddToProjectModal from "../../../components/shared/AddToProjectModal.vue";
-import { createUniqIdsMixin } from "vue-uniq-ids";
+import { FilterTableBodyMixin, ellipsisSortClick } from "../../../components/shared";
+
 const uniqIdsMixin = createUniqIdsMixin();
 
 export default {
   components: { EllipsisMenu, AddToProjectModal },
-  mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, scriptNavigationMixin],
+  mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, scriptNavigationMixin, FilterTableBodyMixin],
   props: ["filter", "id", "permission", "scriptExecutors"],
   data() {
     return {
@@ -117,43 +163,76 @@ export default {
         {
           title: () => this.$t("Name"),
           name: "__slot:title",
+          label: this.$t("Name"),
           field: "title",
-          sortField: "title"
+          sortable: true,
+          direction: "none",
+          width: 180,
+          sortField: "title",
         },
         {
           title: () => this.$t("Description"),
           name: "description",
-          sortField: "description"
+          label: this.$t("Description"),
+          field: "description",
+          sortable: true,
+          direction: "none",
+          width: 180,
+          sortField: "description",
         },
         {
           title: () => this.$t("Category"),
           name: "categories",
           sortField: "category.name",
+          label: this.$t("Category"),
+          field: "category.name",
+          sortable: true,
+          direction: "none",
+          width: 150,
           callback(categories) {
             return categories.map(item => item.name).join(', ');
-          }
+          },
         },
         {
           title: () => this.$t("Language"),
           name: "language",
           sortField: "language",
-          callback: this.formatLanguage
+          label: this.$t("Language"),
+          field: "language",
+          sortable: true,
+          direction: "none",
+          width: 130,
+          callback: this.formatLanguage,
         },
         {
           title: () => this.$t("Modified"),
           name: "updated_at",
           sortField: "updated_at",
-          callback: "formatDate"
+          label: this.$t("Modified"),
+          field: "updated_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
+          callback: "formatDate",
         },
         {
           title: () => this.$t("Created"),
           name: "created_at",
           sortField: "created_at",
-          callback: "formatDate"
+          label: this.$t("Created"),
+          field: "created_at",
+          sortable: true,
+          direction: "none",
+          format: "datetime",
+          width: 140,
+          callback: "formatDate",
         },
         {
           name: "__slot:actions",
-          title: ""
+          title: "",
+          label: "",
+          field: "actions",
         }
       ]
     };
@@ -206,11 +285,14 @@ export default {
           this.loading = false;
         });
     },
-    showAddToProjectModal(title, id) {        
+    showAddToProjectModal(title, id) {
       this.assetId = id;
       this.assetName = title;
       this.$refs["add-to-project-modal"].show();
     },
+    onClickEllipsis(column) {
+      ellipsisSortClick(column, this);
+    },
   },
 
   computed: {}
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index fa76b09f36..7285f2f1c9 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -12,8 +12,6 @@
       >
         <!-- Slot Table Header -->
         <template v-for="(column, index) in tableHeaders" v-slot:[column.field]>
-          <PMColumnFilterIconAsc v-if="column.sortAsc"></PMColumnFilterIconAsc>
-          <PMColumnFilterIconDesc v-if="column.sortDesc"></PMColumnFilterIconDesc>
           <div :key="index" style="display: inline-block;">{{ $t(column.label) }}</div>
         </template>
         <!-- Slot Table Header filter Button -->
@@ -30,6 +28,9 @@
                                    :container="''"
                                    :boundary="'viewport'"
                                    :hideSortingButtons="column.hideSortingButtons"
+                                   :columnSortAsc="column.sortAsc"
+                                   :columnSortDesc="column.sortDesc"
+                                   :filterApplied="column.filterApplied"
                                    @onChangeSort="onChangeSort($event, column.field)"
                                    @onApply="onApply($event, column.field)"
                                    @onClear="onClear(column.field)"
@@ -40,6 +41,7 @@
         <template v-for="(row, rowIndex) in data.data" v-slot:[`row-${rowIndex}`]>
           <td
             v-for="(header, colIndex) in tableHeaders"
+            :class="{ 'pm-table-filter-applied-tbody': header.sortAsc || header.sortDesc }"
             :key="colIndex"
           >
             <template v-if="containsHTML(getNestedPropertyValue(row, header))">
@@ -450,6 +452,9 @@ export default {
               cancelToken: new CancelToken((c) => {
                 this.cancelToken = c;
               }),
+              headers: {
+                'Cache-Control': 'no-cache',
+              }
             },
           )
           .then((response) => {
diff --git a/resources/js/tasks/components/ListMixin.js b/resources/js/tasks/components/ListMixin.js
index 80967cb78f..7885cb3396 100644
--- a/resources/js/tasks/components/ListMixin.js
+++ b/resources/js/tasks/components/ListMixin.js
@@ -84,7 +84,10 @@ const ListMixin = {
               advancedFilter +
               this.columnsQuery,
 
-              { dataLoadingId: this.dataLoadingId }
+              {
+                dataLoadingId: this.dataLoadingId,
+                headers: { 'Cache-Control': 'no-cache'}
+              },
           )
           .then((response) => {
             this.data = this.transform(response.data);
diff --git a/resources/js/tasks/components/QuickFillPreview.vue b/resources/js/tasks/components/QuickFillPreview.vue
index 4356c1ee60..cda0cd0b5f 100644
--- a/resources/js/tasks/components/QuickFillPreview.vue
+++ b/resources/js/tasks/components/QuickFillPreview.vue
@@ -139,18 +139,18 @@
           <template v-slot:tooltip="{ tooltipRowData, previewTasks }">
             <b-button
               v-if="propFromButton === 'previewTask'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="previewTasks(tooltipRowData, 93, 'previewTask')"
             >
               <i class="fas fa-eye" />
             </b-button>
             <b-button
               v-if="propFromButton === 'fullTask'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="
                 previewTasks(tooltipRowData, 50, 'fullTask');
                 setTask();
@@ -160,9 +160,9 @@
             </b-button>
             <b-button
               v-if="propFromButton === 'inboxRules'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="previewTasks(tooltipRowData, 50, 'inboxRules')"
             >
               <i class="fas fa-eye" />
@@ -175,7 +175,7 @@
 </template>
 <script>
 export default {
-  props: ["task", "propColumns", "propFilters", "propFromButton"],
+  props: ["task", "propColumns", "propFilters", "propFromButton", "screenFields"],
   data() {
     return {
       processName: "",
@@ -269,9 +269,37 @@ export default {
       }
       this.$emit("close");
     },
-    buttonThisDataFromFullTask(data) {
+    validateBase64(field) {
+      const regex = /^data:image\/\w+;base64,/;
+      return regex.test(field);
+    },
+    buttonThisDataFromFullTask(quickFillData) {
+      // If the task does not have a draft yet, use the task data
+      const dataToUse = this.task.draft?.data ?? this.task.data;
+
+      const draftData = {};
+      this.screenFields.forEach((field) => {
+        const existingValue = _.get(dataToUse, field, null);
+
+        let quickFillValue;
+        if (existingValue) {
+          // If the value exists in the task data (or task draft data), don't overwrite it
+          quickFillValue = existingValue;
+        } else {
+          // use the value from the quick fill
+          quickFillValue = _.get(quickFillData, field, null);
+        }
+
+        if(this.validateBase64(quickFillValue)) {
+          _.set(draftData, field, existingValue);
+          return;
+        }
+        // Set the value. This handles nested values using dot notation in 'field' string
+        _.set(draftData, field, quickFillValue);
+      });
+
       return ProcessMaker.apiClient
-        .put("drafts/" + this.task.id, data)
+        .put("drafts/" + this.task.id, draftData)
         .then((response) => {
           this.task.draft = _.merge({}, this.task.draft, response.data);
           window.location.href = `/tasks/${this.task.id}/edit`;
diff --git a/resources/js/tasks/components/TaskListRowButtons.vue b/resources/js/tasks/components/TaskListRowButtons.vue
new file mode 100644
index 0000000000..8f09572f9f
--- /dev/null
+++ b/resources/js/tasks/components/TaskListRowButtons.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="pm-task-row-buttons">
+    <PMFloatingButtons ref="pmFloatingButtons">
+      <template v-slot:content>
+        <slot name="body">
+          <span v-for="(button, index) in buttons" :key="index">
+            <b-button :id="button.id + rowIndex"
+                      v-if="button.show"
+                      aria-label="button.title"
+                      @click="onClick(button)"
+                      variant="light"
+                      size="sm">
+              <i v-if="button.icon" 
+                 :class="button.icon"/>
+              <img v-else-if="button.imgSrc"
+                   :src="button.imgSrc"
+                   :alt="button.title"/>
+            </b-button>
+            <b-tooltip
+              :target="button.id + rowIndex"
+              :title="button.title"
+              custom-class="task-hover-tooltip"
+              placement="bottom"
+              :delay="0"
+              boundary="viewport"
+              :no-fade="true"
+              />
+            <div v-if="index < buttons.length - 1 && button.show" 
+                 class="task-vertical-separator">
+            </div>
+          </span>
+        </slot>
+      </template>
+    </PMFloatingButtons>
+  </div>
+</template>
+
+<script>
+  import PMFloatingButtons from "../../components/PMFloatingButtons.vue";
+  export default {
+    components: {
+      PMFloatingButtons
+    },
+    props: {
+      buttons: null,
+      row: null,
+      rowIndex: null,
+      colIndex: null,
+      showButtons: null
+    },
+    methods: {
+      show() {
+        this.triggerFloatingButtons(() => {
+          if (!this.showButtons) {
+            return;
+          }
+          this.$refs.pmFloatingButtons.show();
+        });
+      },
+      close() {
+        this.triggerFloatingButtons(() => {
+          this.$refs.pmFloatingButtons.close();
+        });
+      },
+      setMargin(size) {
+        this.$refs.pmFloatingButtons.$el.style.marginRight = size + "px";
+      },
+      disableFloatingButtons(state) {
+        this.$root["inbox-rule-row-button-floating-disable"] = state;
+      },
+      triggerFloatingButtons(callback) {
+        if (this.$root["inbox-rule-row-button-floating-disable"] === true) {
+          return;
+        }
+        callback();
+      },
+      onClick(button) {
+        this.disableFloatingButtons(false);
+        button.click(this.row);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .pm-task-row-buttons {
+    position: relative;
+    display: math;
+  }
+  .task-vertical-separator {
+    display: inline;
+    border-left: 1px solid #ccc;
+    margin-left: 4px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+</style>
+<style>
+  .task-hover-tooltip {
+    opacity: 1 !important;
+  }
+  .task-hover-tooltip .tooltip-inner {
+    background-color: #F2F6F7;
+    color: #556271;
+    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
+    border-radius: 7px;
+    padding: 9px 12px 9px 12px;
+    border: 1px solid #CDDDEE
+  }
+  .task-hover-tooltip .arrow::before {
+    border-bottom-color: #CDDDEE !important;
+  }
+  .task-hover-tooltip .arrow::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    border-width: 0 .4rem .4rem;
+    transform: translateY(3px);
+    border-color: transparent;
+    border-style: solid;
+    border-bottom-color: #F2F6F7;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/js/tasks/components/TaskTooltip.vue b/resources/js/tasks/components/TaskTooltip.vue
index 577ceb23c9..8f2cbc1413 100644
--- a/resources/js/tasks/components/TaskTooltip.vue
+++ b/resources/js/tasks/components/TaskTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :style="{ top: (position.y) + 'px', right:  '50px' }" class="task-tooltip">
+    <div :style="{ top: (position.y) + 'px', right: '45px' }" class="task-tooltip">
         <slot name="task-tooltip-body">
         </slot>
     </div>
@@ -18,7 +18,7 @@ export default {
 <style scoped>
 .task-tooltip {
   position: absolute;
-  padding: 8px;
+  padding: 3px 5px;
   border-radius: 4px;
   background-color: #FFFFFF;
   color: #566877;
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index b27f874437..f9f8b2014a 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -5,6 +5,7 @@
       data-cy="tasks-table"
     >
       <filter-table
+        ref="filterTable"
         :headers="tableHeaders"
         :data="data"
         :unread="unreadColumnName"
@@ -13,6 +14,7 @@
         :table-name="tableName"
         @table-row-click="handleRowClick"
         @table-row-mouseover="handleRowMouseover"
+        @table-tr-mouseleave="handleTrMouseleave"
         @table-row-mouseleave="handleRowMouseleave"
       >
         <!-- Slot Table Header -->
@@ -20,8 +22,6 @@
           v-for="(column, index) in visibleHeaders"
           v-slot:[column.field]
         >
-          <PMColumnFilterIconAsc v-if="column.sortAsc"></PMColumnFilterIconAsc>
-          <PMColumnFilterIconDesc v-if="column.sortDesc"></PMColumnFilterIconDesc>
           <div
             :key="index"
             style="display: inline-block"
@@ -53,6 +53,9 @@
             :viewConfig="getViewConfigFilter()"
             :container="''"
             :boundary="'viewport'"
+            :columnSortAsc="column.sortAsc"
+            :columnSortDesc="column.sortDesc"
+            :filterApplied="column.filterApplied"
             @onChangeSort="onChangeSort($event, column.field)"
             @onApply="onApply($event, column.field)"
             @onClear="onClear(column.field)"
@@ -67,8 +70,24 @@
         >
           <td
             v-for="(header, colIndex) in visibleHeaders"
+            :class="{ 'pm-table-filter-applied-tbody': header.sortAsc || header.sortDesc }"
             :key="colIndex"
           >
+            <!-- Slot for floating buttons -->
+            <template v-if="colIndex === visibleHeaders.length-1">
+              <TaskListRowButtons 
+                    :ref="'taskListRowButtons-'+rowIndex"
+                    :buttons="taskTooltipButtons"
+                    :row="row"
+                    :rowIndex="rowIndex"
+                    :colIndex="colIndex"
+                    :showButtons="isTooltipVisible">
+                <template v-slot:body>
+                  <slot name="tooltip" v-bind:previewTasks="previewTasks">
+                  </slot>
+                </template>
+              </TaskListRowButtons>
+            </template>
             <template v-if="containsHTML(getNestedPropertyValue(row, header))">
               <div
                 :id="`element-${rowIndex}-${colIndex}`"
@@ -148,38 +167,6 @@
           </td>
         </template>
       </filter-table>
-      <task-tooltip
-        :position="rowPosition"
-        v-show="isTooltipVisible"
-      >
-        <template v-slot:task-tooltip-body>
-          <div
-            @mouseover="clearHideTimer"
-            @mouseleave="hideTooltip"
-          >
-          <slot name="tooltip" v-bind:tooltipRowData="tooltipRowData" v-bind:previewTasks="previewTasks">
-            <span>
-              <b-button
-                v-if="!verifyURL('saved-searches')"
-                class="icon-button"
-                :aria-label="$t('Quick fill Preview')"
-                variant="light"
-                @click="previewTasks(tooltipRowData)"
-              >
-                <i class="fas fa-eye"/>
-              </b-button>
-            </span>
-            <ellipsis-menu
-              :actions="actions"
-              :data="tooltipRowData"
-              :divider="false"
-              @show="handleShowEllipsis"
-              @hide="handleHideEllipsis"
-            />
-          </slot>
-          </div>
-        </template>
-      </task-tooltip>
       <data-loading
         v-show="shouldShowLoader"
         :empty="$t('All clear')"
@@ -230,6 +217,7 @@ import TaskTooltip from "./TaskTooltip.vue";
 import PMColumnFilterIconAsc from "../../components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue";
 import PMColumnFilterIconDesc from "../../components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue";
 import FilterTableBodyMixin from "../../components/shared/FilterTableBodyMixin";
+import TaskListRowButtons from "./TaskListRowButtons.vue";
 import { get } from "lodash";
 
 const uniqIdsMixin = createUniqIdsMixin();
@@ -245,6 +233,7 @@ export default {
     TaskTooltip,
     PMColumnFilterIconAsc,
     PMColumnFilterIconDesc,
+    TaskListRowButtons
   },
   mixins: [
     datatableMixin,
@@ -300,6 +289,30 @@ export default {
     return {
       tooltipFromButton: "",
       selectedRow: 0,
+      taskTooltipButtons: [
+        {
+          id: "openPreviewButton",
+          ariaLabel: this.$t("Quick fill Preview"),
+          click: this.previewTasks,
+          icon: "fas fa-eye",
+          title: this.$t("Preview"),
+          show: !this.verifyURL('saved-searches') || false,
+        },
+        {
+          id: "openCaseButton",
+          title: this.$t("Open Case"),
+          click: this.redirectToRequest,
+          imgSrc: "/img/smartinbox-images/open-case.svg",
+          show: !this.verifyURL('saved-searches') || true,
+        },
+        {
+          id: "openTaskButton",
+          title: this.$t("Open Task"),
+          click: this.redirectToTask,
+          icon: "fas fa-external-link-alt",
+          show: !this.verifyURL('saved-searches') || true,
+        },
+      ],
       actions: [
         {
           value: "edit",
@@ -429,14 +442,21 @@ export default {
     },
     formatCaseNumber(processRequest, record) {
       return `
-      <a href="${this.openRequest(processRequest, 1)}"
+      <a href="${this.openTask(record, 1)}"
          class="text-nowrap">
          # ${processRequest.case_number || record.case_number}
       </a>`;
     },
     formatCaseTitle(processRequest, record) {
+      let draftBadge = "";
+      if (record.draft && record.status !== "CLOSED") {
+        draftBadge = `<span class="badge badge-warning status-warning">
+          ${this.$t("Draft")}
+        </span>`;
+      }
       return `
-      <a href="${this.openRequest(processRequest, 1)}"
+      ${draftBadge}
+      <a href="${this.openTask(record, 1)}"
          class="text-nowrap">
          ${
            processRequest.case_title_formatted ||
@@ -470,7 +490,8 @@ export default {
           field: "case_number",
           sortable: true,
           default: true,
-          width: 80,
+          width: 84,
+          fixed_width: 84,
           filter_subject: {
             type: "Relationship",
             value: "processRequest.case_number",
@@ -483,7 +504,8 @@ export default {
           name: "__slot:case_number",
           sortable: true,
           default: true,
-          width: 220,
+          width: 419,
+          fixed_width: 419,
           truncate: true,
           filter_subject: {
             type: "Relationship",
@@ -496,27 +518,16 @@ export default {
           field: "is_priority",
           sortable: false,
           default: true,
-          width: 40,
-        },
-        {
-          label: "Process",
-          field: "process",
-          sortable: true,
-          default: true,
-          width: 140,
-          truncate: true,
-          filter_subject: {
-            type: "Relationship",
-            value: "processRequest.name",
-          },
-          order_column: "process_requests.name",
+          fixed_width: 20,
+          resizable: false,
         },
         {
           label: "Task",
           field: "element_name",
           sortable: true,
           default: true,
-          width: 140,
+          width: 135,
+          fixed_width: 135,
           truncate: true,
           filter_subject: { value: "element_name" },
           order_column: "element_name",
@@ -526,7 +537,8 @@ export default {
           field: "status",
           sortable: true,
           default: true,
-          width: 100,
+          width: 183,
+          fixed_width: 183,
           filter_subject: { type: "Status" },
         },
         {
@@ -535,7 +547,8 @@ export default {
           format: "datetime",
           sortable: true,
           default: true,
-          width: 140,
+          width: 200,
+          fixed_width: 200,
         },
         {
           label: "Draft",
@@ -553,9 +566,16 @@ export default {
           format: "datetime",
           sortable: true,
           default: true,
-          width: 140,
+          width: 200,
+          fixed_width: 200,
         });
       }
+      columns.push({
+        label: "",
+        field: "options",
+        sortable: false,
+        width: 180,
+      });
       return columns;
     },
     onAction(action, rowData, index) {
@@ -650,7 +670,7 @@ export default {
     handleHideEllipsis() {
       this.ellipsisShow = false;
     },
-    handleRowMouseover(row) {
+    handleRowMouseover(row, index) {
       if (this.ellipsisShow) {
         this.isTooltipVisible = !this.disableRuleTooltip;
         this.clearHideTimer();
@@ -694,10 +714,12 @@ export default {
       if(this.fromButton === "inboxRules"){
         bottomBorderY = rect.bottom - topAdjust + 90 - elementHeight;
       }
+      //rowPosition deprecated is not used
       this.rowPosition = {
         x: rightBorderX,
         y: bottomBorderY,
       };
+      this.taskListRowButtonsShow(row, index);
     },
     handleRowMouseleave(visible) {
       this.startHideTimer();
@@ -716,9 +738,14 @@ export default {
       }
       this.isTooltipVisible = false;
     },
+    removeBadgeSpan(html) {
+      const badgeSpanRegex = /<span class="badge badge-warning status-warning">([^<]+)<\/span>/g;
+      return html.replace(badgeSpanRegex, "");
+    },
     sanitizeTooltip(html) {
       let cleanHtml = html.replace(/<script(.*?)>[\s\S]*?<\/script>/gi, "");
       cleanHtml = cleanHtml.replace(/<style(.*?)>[\s\S]*?<\/style>/gi, "");
+      cleanHtml = this.removeBadgeSpan(cleanHtml);
       cleanHtml = cleanHtml.replace(
         /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
         ""
@@ -777,7 +804,38 @@ export default {
     },
     onWatchShowPreview(value) {
       this.$emit('onWatchShowPreview', value);
-    }
+    },
+    redirectToTask(task) {
+      window.location.href = this.openTask(task);
+    },
+    redirectToRequest(task) {
+      window.location.href = this.openRequest(task.process_request);
+    },
+    handleTrMouseleave(row, index) {
+      this.taskListRowButtonsHide(row, index);
+    },
+    /**
+     * TaskListRowButtons replaces the TaskTooltip component. 
+     * Please ensure that any methods related to TaskTooltip are cleared.
+     * @param {object} row
+     * @param {int} index
+     */
+    taskListRowButtonsShow(row, index) {
+      let container = this.$refs.filterTable.$el;
+      let scrolledWidth = container.scrollWidth - container.clientWidth - container.scrollLeft;
+      let widthTd = this.$refs["taskListRowButtons-" + index][0].$el.parentNode.offsetWidth - 24;
+      this.$refs["taskListRowButtons-" + index][0].show();
+      this.$refs["taskListRowButtons-" + index][0].setMargin(scrolledWidth - widthTd);
+    },
+    /**
+     * TaskListRowButtons replaces the TaskTooltip component. 
+     * Please ensure that any methods related to TaskTooltip are cleared.
+     * @param {object} row
+     * @param {int} index
+     */
+    taskListRowButtonsHide(row, index) {
+      this.$refs["taskListRowButtons-" + index][0].close();
+    },
   },
 };
 </script>
@@ -788,26 +846,26 @@ export default {
 }
 .due-danger {
   background-color: rgba(237, 72, 88, 0.2);
-  color: rgba(237, 72, 88, 1);
-  font-weight: 600;
+  color: rgba(0, 0, 0, 0.75);
+  font-weight: 700;
   border-radius: 5px;
+  padding: 7px;
 }
 .due-primary {
-  background: rgba(205, 221, 238, 1);
-  color: rgba(86, 104, 119, 1);
-  font-weight: 600;
+  background: rgba(224, 229, 233, 1);
+  color: rgba(0, 0, 0, 0.75);
+  font-weight: 700;
   border-radius: 5px;
+  padding: 7px;
 }
 .btn-this-data {
   background-color: #1572c2;
   width: 197px;
   height: 40px;
 }
-
-.icon-button {
+.btn-light:hover {
+  background-color: #EDF1F6;
   color: #888;
-  width: 32px;
-  height: 32px;
 }
 </style>
 <style lang="scss" scoped>
diff --git a/resources/lang/en.json b/resources/lang/en.json
index 633d26ca3a..f7a643a2ff 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -2263,5 +2263,17 @@
   "Your In-Progress tasks in the saved search {{title}}": "Your In-Progress tasks in the saved search {{title}}",
   "Choose a saved search to see the tasks that you can use with an Inbox Rule.": "Choose a saved search to see the tasks that you can use with an Inbox Rule.",
   "No tasks to show.": "No tasks to show.",
-  "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters.": "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters."
+  "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters.": "But that's OK. You can still create this this Inbox Rule to apply to future tasks that match the above filters.",
+  "Recent Cases": "Recent Cases",
+  "No results": "No results",
+  "Process Info": "Process Info",
+  "Process Chart": "Process Chart",
+  "Create Template": "Create Template",
+  "This will create a PM Block based on the {{assetName}} Process": "This will create a PM Block based on the {{assetName}} Process",
+  "Author": "Author",
+  "Version": "Version",
+  "Type to search Screen": "Type to search Screen",
+  "Type to search Chart": "Type to search Chart",
+  "Open Case": "Open Case",
+  "Alternative": "Alternative"
 }
diff --git a/resources/sass/_scrollbar.scss b/resources/sass/_scrollbar.scss
index 4be0f570e2..27bab475b2 100644
--- a/resources/sass/_scrollbar.scss
+++ b/resources/sass/_scrollbar.scss
@@ -1,16 +1,18 @@
 /* Works on Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: #6A7888 #f7f9fb;
+  scrollbar-color: rgba(73, 94, 109, 0.5) transparent;
 }
 /* Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 *::-webkit-scrollbar-track {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), var(--icons-buttons-inter, #f7f9fb);
+  background-color: transparent;
+  border-radius: 4px;
 }
 *::-webkit-scrollbar-thumb {
-  background-color: #6A7888;
+  background-color: rgba(73, 94, 109, 0.5);
   border-radius: 4px;
 }
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index daf3e789fb..140d115001 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -140,3 +140,6 @@ $alertZIndex: 1051;
 $darkneutral: #42526E;
 $dangerlight: #FFEBE9;
 $successlight: #E6FFEB;
+
+// Launchpad Mobile Breakpoint
+$lp-breakpoint: 650px;
\ No newline at end of file
diff --git a/resources/views/layouts/mobile.blade.php b/resources/views/layouts/mobile.blade.php
index 22416f22ba..d8c2de03e0 100644
--- a/resources/views/layouts/mobile.blade.php
+++ b/resources/views/layouts/mobile.blade.php
@@ -1,10 +1,12 @@
-@extends('layouts.layout')
+@extends('layouts.layout', ['content_margin' => ''])
 
 @section('content')
-@include('layouts.navbarMobile')
-<div class="mobile-container">
-  @yield('content_mobile')
-</div>
+  <div class="mobile-flex-container">
+    @include('layouts.navbarMobile')
+    <div class="mobile-container">
+      @yield('content_mobile')
+    </div>
+  </div>
 @endsection
 
 
@@ -19,6 +21,14 @@
   #navbar {
     display: none;
   }
+  .mobile-flex-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  .mobile-container {
+    flex: 1;
+  }
 </style>
 
 @yield('css')
diff --git a/resources/views/layouts/navbarMobile.blade.php b/resources/views/layouts/navbarMobile.blade.php
index 96a56a88ea..1fa0c6402a 100644
--- a/resources/views/layouts/navbarMobile.blade.php
+++ b/resources/views/layouts/navbarMobile.blade.php
@@ -1,12 +1,16 @@
 @php
   $showPrincipalNavbar = 1;
 
-  if (Request::path() !== 'tasks' && Request::path() !== 'requests') {
+  if (
+    Request::path() !== 'tasks' &&
+    Request::path() !== 'requests' &&
+    !str_starts_with(Request::path(), 'process-browser')
+  ) {
     $showPrincipalNavbar = 0;
   }
 @endphp
-<div class="flex-grow-1">
-  <div id="navbarMobile">
+<div>
+  <div id="navbarMobile" v-if="display" v-cloak>
     @if($showPrincipalNavbar)
       <nav class="navbar navbar-light bg-primary d-print-none">
         @php
@@ -67,6 +71,11 @@ class="dropdown-item"
             'url' => route('requests.index'),
             'isActive' => Request::path() === 'requests',
           ],
+          [
+            'name' => __('Processes'),
+            'url' => route('process.browser.index'),
+            'isActive' => Request::path() === 'process-browser',
+          ],
         ];
       @endphp
       <!-- Nav tabs -->
diff --git a/resources/views/processes-catalogue/index.blade.php b/resources/views/processes-catalogue/index.blade.php
index 97a2c66ff1..ca0969ee28 100644
--- a/resources/views/processes-catalogue/index.blade.php
+++ b/resources/views/processes-catalogue/index.blade.php
@@ -13,15 +13,21 @@
     <processes-catalogue
       :process="{{$process ?? 0}}"
       :current-user-id="{{ \Auth::user()->id }}"
-      :permission="{{ \Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks', 'projects') }}"
       :current-user="{{ \Auth::user() }}"
-      is-documenter-installed="{{\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled()}}"
     >
     </processes-catalogue>
   </div>
 @endsection
 
 @section('js')
+  <script>
+    window.ProcessMaker.isDocumenterInstalled = {{
+      Js::from(\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled())
+    }};
+    window.ProcessMaker.permission = {{
+      Js::from(\Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks', 'projects'))
+    }};
+  </script>
   @foreach($manager->getScripts() as $script)
     <script src="{{$script}}"></script>
   @endforeach
diff --git a/resources/views/processes-catalogue/mobile.blade.php b/resources/views/processes-catalogue/mobile.blade.php
new file mode 100644
index 0000000000..b249ad389e
--- /dev/null
+++ b/resources/views/processes-catalogue/mobile.blade.php
@@ -0,0 +1,36 @@
+@extends('layouts.mobile')
+@section('title')
+{{__($title)}}
+@endsection
+@section('content_mobile')
+  <div class="page-content mb-0" id="processes-catalogue">
+    <processes-catalogue
+      :process="{{$process ?? 0}}"
+      :current-user-id="{{ \Auth::user()->id }}"
+      :current-user="{{ \Auth::user() }}"
+    >
+    </processes-catalogue>
+  </div>
+@endsection
+
+@section('js')
+  <script>
+    window.ProcessMaker.isDocumenterInstalled = {{
+      Js::from(\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled())
+    }};
+    window.ProcessMaker.permission = {{
+      Js::from(\Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks', 'projects'))
+    }};
+  </script>
+  @foreach($manager->getScripts() as $script)
+    <script src="{{$script}}"></script>
+  @endforeach
+  <script src="{{mix('js/processes-catalogue/index.js')}}"></script>
+  <script>
+    window.Processmaker.user = @json($currentUser);
+  </script>
+@endsection
+
+@section('css')
+
+@endsection
diff --git a/resources/views/tasks/editQuickFill.blade.php b/resources/views/tasks/editQuickFill.blade.php
index fcbf880944..78596e7b61 100644
--- a/resources/views/tasks/editQuickFill.blade.php
+++ b/resources/views/tasks/editQuickFill.blade.php
@@ -32,7 +32,8 @@ function() use ($task) {
 <div v-cloak id="quickfill" class="container-fluid px-3">
     <quick-fill-preview
     class="quick-fill-preview"
-    :task="{{ $task }}"
+    :task="task"
+    :screen-fields="screenFields"
     :prop-from-button ="'fullTask'"
     :prop-columns="columns"
     :prop-filters="filters"
@@ -43,6 +44,9 @@ class="quick-fill-preview"
 <script src="{{mix('js/tasks/show.js')}}"></script>
 <script>
     let task = @json($task);
+    task.draft = @json($task->draft);
+    task.data = @json($task->processRequest->data);
+    const screenFields = @json($screenFields);
     const store = new Vuex.Store();
     const main = new Vue({
       store: store,
@@ -50,6 +54,8 @@ class="quick-fill-preview"
       data: {
           isDisabled: true,
           data: {},
+          task,
+          screenFields,
           filters: {
             order: { by: "created_at", direction: "desc" },
             filters:[
diff --git a/resources/views/tasks/preview.blade.php b/resources/views/tasks/preview.blade.php
index 0e7a734d77..73228e45b1 100644
--- a/resources/views/tasks/preview.blade.php
+++ b/resources/views/tasks/preview.blade.php
@@ -428,6 +428,10 @@ class="card border-0"
               this.sendEvent('taskReady', this.task?.id);
             });
           },
+          validateBase64(field) {
+            const regex = /^data:image\/\w+;base64,/;
+            return regex.test(field);
+          },
         },
         mounted() {
           this.prepareData();
@@ -437,6 +441,45 @@ class="card border-0"
           });
 
           window.addEventListener('fillData', event => {
+            const newData = {};
+            screenFields.forEach((field) => {
+
+              const existingValue = _.get(this.formData, field, null);
+
+              let quickFillValue;
+
+              if (existingValue) {
+                // If the value exists in the task data, don't overwrite it
+                quickFillValue = existingValue;
+              } else {
+                // use the value from the quick fill(event.detail)
+                quickFillValue = _.get(event.detail, field, null);
+              }
+
+              if(this.validateBase64(quickFillValue)) {
+                _.set(newData, field, existingValue);
+                return;
+              }
+              // Set the value. This handles nested values using dot notation in 'field' string
+              _.set(newData, field, quickFillValue);
+              
+            });
+
+            this.formData = newData;
+          });
+          
+          // Used by inbox rules new/edit interface. With inbox rules, we always
+          // want to use all data saved in the inbox rule db record, regardless
+          // if the field exists or not.
+          window.addEventListener('fillDataOverwriteExistingFields', event => {
+            for (let key in event.detail) {
+              if (event.detail.hasOwnProperty(key)) {
+                let value = event.detail[key];
+                if (this.validateBase64(value)) {
+                  delete event.detail[key];
+                }
+              }
+            }
             this.formData = _.merge(_.cloneDeep(this.formData), event.detail);
           });
 
diff --git a/routes/web.php b/routes/web.php
index 2be96209ed..c9863aa524 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -210,4 +210,3 @@
 
 // SAML Metadata Route
 Route::resource('/saml/metadata', MetadataController::class)->only('index');
-
diff --git a/webpack.mix.js b/webpack.mix.js
index 811935b1a2..cac61838c5 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,6 +22,7 @@ mix.webpackConfig({
     symlinks: false,
     alias: {
       "vue-monaco": path.resolve(__dirname, "resources/js/vue-monaco-amd.js"),
+      "styles": path.resolve(__dirname, "resources/sass"),
     },
   },
 });
@@ -56,6 +57,7 @@ mix
   .copy("resources/img/launchpad-images/*", "public/img/launchpad-images")
   .copy("resources/img/launchpad-images/icons/*", "public/img/launchpad-images/icons")
   .copy("resources/img/smartinbox-images/*", "public/img/smartinbox-images")
+  .copy("resources/img/pagination-images/*", "public/img/pagination-images")
   .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")