From 6adba9f2b085bf53596f9836539b9e4fbdf31c24 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Wed, 8 Apr 2026 14:24:35 -0600
Subject: [PATCH] Resolve FOUR-30502

---
 .../components/ProcessHeaderStart.vue         |  11 +-
 .../components/ProcessScreen.vue              |   1 +
 .../components/utils/DisplayScreen.vue        |  43 +++-
 .../js/requests/components/SummaryMobile.vue  |  26 ++-
 .../js/requests/components/screenDetail.vue   |  24 +-
 .../views/processes-catalogue/index.blade.php |   3 +
 .../processes-catalogue/mobile.blade.php      |   2 +-
 resources/views/requests/preview.blade.php    |   6 +-
 resources/views/requests/show.blade.php       |  28 ++-
 resources/views/requests/showMobile.blade.php |  10 +-
 .../prospect-process-shell-styles.blade.php   | 211 ++++++++++++++++++
 resources/views/tasks/edit.blade.php          |  47 ++--
 resources/views/tasks/editMobile.blade.php    |  44 ++--
 resources/views/tasks/preview.blade.php       |  48 ++--
 14 files changed, 402 insertions(+), 102 deletions(-)
 create mode 100644 resources/views/shared/prospect-process-shell-styles.blade.php

diff --git a/resources/js/processes-catalogue/components/ProcessHeaderStart.vue b/resources/js/processes-catalogue/components/ProcessHeaderStart.vue
index c920b1acba..b6ebd4068d 100644
--- a/resources/js/processes-catalogue/components/ProcessHeaderStart.vue
+++ b/resources/js/processes-catalogue/components/ProcessHeaderStart.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
-    <div class="header-mobile">
+  <div :class="{ 'prospect-process-shell': isProspectProcess }">
+    <div class="header-mobile prospect-process-header-mobile">
       <div class="title">
         {{ process.name }}
       </div>
     </div>
-    <div class="header card card-body card-custom">
+    <div class="header card card-body card-custom prospect-process-header">
       <div class="d-flex justify-content-between">
         <div class="d-flex align-items-center flex-grow-1">
           <i class="fas fa-chevron-left mr-2 custom-color" 
@@ -84,6 +84,11 @@ export default {
       singleStartEvent: null,
     }
   },
+  computed: {
+    isProspectProcess() {
+      return (this.process?.name || "").toLowerCase().includes("prospect");
+    },
+  },
   mounted() {
     this.getStartEvents();
   },
diff --git a/resources/js/processes-catalogue/components/ProcessScreen.vue b/resources/js/processes-catalogue/components/ProcessScreen.vue
index 710af17d34..4303772e12 100644
--- a/resources/js/processes-catalogue/components/ProcessScreen.vue
+++ b/resources/js/processes-catalogue/components/ProcessScreen.vue
@@ -10,6 +10,7 @@
     <display-screen
       v-if="showScreen"
       :screen="screen"
+      :process="process"
     />
     <create-template-modal
       id="create-template-modal"
diff --git a/resources/js/processes-catalogue/components/utils/DisplayScreen.vue b/resources/js/processes-catalogue/components/utils/DisplayScreen.vue
index f72ab3cd71..8d8f5095bd 100644
--- a/resources/js/processes-catalogue/components/utils/DisplayScreen.vue
+++ b/resources/js/processes-catalogue/components/utils/DisplayScreen.vue
@@ -1,25 +1,46 @@
 <template>
-  <div class="screen-container">
-    <vue-form-renderer
-      v-model="previewData"
-      :config="screen.config"
-      :computed="screen.computed"
-      :custom-css="screen.custom_css"
-      :watchers="screen.watchers"
-      :show-errors="true"
-    />
+  <div
+    class="screen-container"
+    :class="{ 'prospect-process-shell': isProspectProcess }">
+    <div class="prospect-screen-shell">
+      <div class="prospect-screen-frame">
+        <vue-form-renderer
+          v-model="previewData"
+          class="prospect-form-renderer"
+          :config="screen.config"
+          :computed="screen.computed"
+          :custom-css="screen.custom_css"
+          :watchers="screen.watchers"
+          :show-errors="true"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["screen"],
+  props: {
+    screen: {
+      type: Object,
+      required: true,
+    },
+    process: {
+      type: Object,
+      default: null,
+    },
+  },
   data() {
     return {
       disabled: false,
       previewData: {},
     };
   },
+  computed: {
+    isProspectProcess() {
+      return (this.process?.name || "").toLowerCase().includes("prospect");
+    },
+  },
   watch: {
     screen: {
       deep: true,
@@ -33,6 +54,6 @@ export default {
 
 <style scoped>
 .screen-container {
-  padding: 16px;
+  padding: 16px 0;
 }
 </style>
diff --git a/resources/js/requests/components/SummaryMobile.vue b/resources/js/requests/components/SummaryMobile.vue
index 2d2aa44ed5..6b41343f61 100644
--- a/resources/js/requests/components/SummaryMobile.vue
+++ b/resources/js/requests/components/SummaryMobile.vue
@@ -1,23 +1,31 @@
 <template v-if="showSummary">
   <div>
     <template v-if="showScreenSummary">
-      <div class="p-3">
-        <vue-form-renderer
-          ref="screen"
-          v-model="dataSummary"
-          :config="screenSummary.config"
-          :computed="screenSummary.computed"
-        />
+      <div class="p-3 prospect-summary-section">
+        <div class="prospect-screen-shell">
+          <div class="prospect-screen-frame prospect-screen-frame--compact">
+            <vue-form-renderer
+              ref="screen"
+              v-model="dataSummary"
+              :config="screenSummary.config"
+              :custom-css="screenSummary.custom_css"
+              :computed="screenSummary.computed"
+            />
+          </div>
+        </div>
       </div>
     </template>
     <template v-if="showScreenRequestDetail && !showScreenSummary">
-      <div class="card">
-        <div class="card-body">
+      <div class="prospect-summary-section">
+        <div class="prospect-screen-shell">
+          <div class="prospect-screen-frame prospect-screen-frame--compact">
           <vue-form-renderer
             ref="screenRequestDetail"
             v-model="dataSummary"
             :config="screenRequestDetail"
+            :custom-css="request.request_detail_screen && request.request_detail_screen.custom_css"
           />
+          </div>
         </div>
       </div>
     </template>
diff --git a/resources/js/requests/components/screenDetail.vue b/resources/js/requests/components/screenDetail.vue
index eb4af674c1..4e5b48b055 100644
--- a/resources/js/requests/components/screenDetail.vue
+++ b/resources/js/requests/components/screenDetail.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="card h-100">
-    <b-overlay
+  <div class="prospect-screen-shell">
+    <div class="prospect-screen-frame prospect-screen-frame--compact">
+      <b-overlay
           id="overlay-background"
           :show="disabled"
           :variant="variant"
@@ -8,7 +9,7 @@
           :blur="blur"
           rounded="sm"
         >
-    <div class="w-100 d-print-none" align="right">
+    <div class="prospect-screen-toolbar w-100 d-print-none">
       <button
         type="button"
         @click="print"
@@ -20,7 +21,7 @@
         <i class="fas fa-print"></i> {{ $t("Print") }}
       </button>
     </div>
-    <div v-for="page in printablePages" :key="page" class="card">
+    <div v-for="page in printablePages" :key="page" class="card prospect-screen-page">
       <div class="card-body h-100" :style="cardStyles">
         <component
           ref="print"
@@ -29,13 +30,16 @@
           :data="formData"
           @update="onUpdate"
           :config="json"
+          :computed="rowData.computed"
+          :custom-css="rowData.custom_css"
+          :watchers="rowData.watchers"
           csrf-token=""
           submiturl=""
           token-id=""
         />
       </div>
     </div>
-    <div class="w-100 d-print-none" align="right">
+    <div class="prospect-screen-toolbar w-100 d-print-none">
       <button
         type="button"
         @click="print"
@@ -48,6 +52,7 @@
       </button>
     </div>
   </b-overlay>
+    </div>
   </div>
 </template>
 
@@ -230,3 +235,12 @@
   }
 </script>
 
+<style scoped>
+.prospect-screen-page + .prospect-screen-page {
+  margin-top: 1rem;
+}
+
+.prospect-screen-toolbar {
+  align-items: center;
+}
+</style>
diff --git a/resources/views/processes-catalogue/index.blade.php b/resources/views/processes-catalogue/index.blade.php
index ca34bff986..311b581cac 100644
--- a/resources/views/processes-catalogue/index.blade.php
+++ b/resources/views/processes-catalogue/index.blade.php
@@ -11,6 +11,9 @@
 @section('meta')
   <meta name="request-id" content="">
 @endsection
+@section('css')
+  @include('shared.prospect-process-shell-styles')
+@endsection
 
 @section('content')
   <div id="processes-catalogue" class="px-3 tw-h-[99%] tw-overflow-hidden">
diff --git a/resources/views/processes-catalogue/mobile.blade.php b/resources/views/processes-catalogue/mobile.blade.php
index 520ee45b11..7678393176 100644
--- a/resources/views/processes-catalogue/mobile.blade.php
+++ b/resources/views/processes-catalogue/mobile.blade.php
@@ -38,5 +38,5 @@
 @endsection
 
 @section('css')
-
+  @include('shared.prospect-process-shell-styles')
 @endsection
diff --git a/resources/views/requests/preview.blade.php b/resources/views/requests/preview.blade.php
index bbcdc7fe56..75db6ffebe 100644
--- a/resources/views/requests/preview.blade.php
+++ b/resources/views/requests/preview.blade.php
@@ -7,6 +7,9 @@
 @section('meta')
     <meta name="request-id" content="{{ $request->getKey() }}">
 @endsection
+@section('css')
+    @include('shared.prospect-process-shell-styles')
+@endsection
 
 
 @section('sidebar')
@@ -20,7 +23,8 @@
     ]])
 @endsection
 @section('content')
-    <div id="request" class="container d-print-block">
+    @php($isProspectProcess = \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower($request->process->name ?? ''), 'prospect'))
+    <div id="request" class="container d-print-block {{ $isProspectProcess ? 'prospect-process-shell' : '' }}">
         <div class="row">
             <div class="col-sm-12">
                 <screen-detail :row-data="config" v-bind:can-print="true" :timeout-on-load="true">
diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index 8b9510af97..c3e3ec7578 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -11,6 +11,9 @@
 @section('meta')
   <meta name="request-id" content="{{ $request->id }}">
 @endsection
+@section('css')
+  @include('shared.prospect-process-shell-styles')
+@endsection
 
 @section('breadcrumbs')
   @include('shared.breadcrumbs', [
@@ -22,7 +25,8 @@
   ])
 @endsection
 @section('content')
-  <div id="request">
+  @php($isProspectProcess = \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower($request->process->name ?? ''), 'prospect'))
+  <div id="request" class="{{ $isProspectProcess ? 'prospect-process-shell' : '' }}">
     <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
     <div class="info-main" :class="{ 'menu-open': showMenu }">
       <div class="container-fluid px-3">
@@ -119,20 +123,26 @@
                 <div class="card card-body border-top-0 p-0"
                   v-bind:class="{ 'tab-pane':true, active: showSummary && !activePending}" id="summary" role="tabpanel"
                   aria-labelledby="summary-tab">
-                  <template v-if="showSummary">
-                    <template v-if="showScreenSummary">
-                      <div class="p-3">
-                        <vue-form-renderer ref="screen" :config="screenSummary.config" v-model="dataSummary"
-                          :custom-css="screenSummary?.custom_css"
-                          :computed="screenSummary.computed" />
+                    <template v-if="showSummary">
+                      <template v-if="showScreenSummary">
+                      <div class="p-3 prospect-summary-section">
+                        <div class="prospect-screen-shell">
+                          <div class="prospect-screen-frame prospect-screen-frame--compact">
+                            <vue-form-renderer ref="screen" :config="screenSummary.config" v-model="dataSummary"
+                              :custom-css="screenSummary?.custom_css"
+                              :computed="screenSummary.computed" />
+                          </div>
+                        </div>
                       </div>
                     </template>
                     <template v-if="showScreenRequestDetail && !showScreenSummary">
-                      <div class="card">
-                        <div class="card-body">
+                      <div class="prospect-summary-section">
+                        <div class="prospect-screen-shell">
+                          <div class="prospect-screen-frame prospect-screen-frame--compact">
                           <vue-form-renderer ref="screenRequestDetail" :config="screenRequestDetail.config"
                             :custom-css="screenRequestDetail.custom_css"
                             v-model="dataSummary" />
+                          </div>
                         </div>
                       </div>
                     </template>
diff --git a/resources/views/requests/showMobile.blade.php b/resources/views/requests/showMobile.blade.php
index 90ba474b64..d1910f2a90 100644
--- a/resources/views/requests/showMobile.blade.php
+++ b/resources/views/requests/showMobile.blade.php
@@ -2,8 +2,12 @@
 @section('title')
   {{ __('Request Detail') }}
 @endsection
+@section('css')
+  @include('shared.prospect-process-shell-styles')
+@endsection
 @section('content_mobile')
-<div v-cloak id="requestMobile">
+@php($isProspectProcess = \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower($request->process->name ?? ''), 'prospect'))
+<div v-cloak id="requestMobile" class="{{ $isProspectProcess ? 'prospect-process-shell' : '' }}">
   <navbar-request-mobile :title="request.name"></navbar-request-mobile>
   <!--Header-->
   @if (shouldShow('requestStatusContainer'))
@@ -187,7 +191,3 @@ class="tab-pane card card-body border-top-0 p-3"
     });
   </script>
 @endsection
-
-@section('css')
-
-@endsection
diff --git a/resources/views/shared/prospect-process-shell-styles.blade.php b/resources/views/shared/prospect-process-shell-styles.blade.php
new file mode 100644
index 0000000000..2db4c6a0f9
--- /dev/null
+++ b/resources/views/shared/prospect-process-shell-styles.blade.php
@@ -0,0 +1,211 @@
+<style>
+  .prospect-process-shell {
+    --prospect-shell-bg: linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%);
+    --prospect-surface: #ffffff;
+    --prospect-surface-muted: #f8fbff;
+    --prospect-border: #d9e6f5;
+    --prospect-border-strong: #c5d6ec;
+    --prospect-shadow: 0 24px 56px rgba(15, 23, 42, 0.08);
+    --prospect-shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.06);
+    --prospect-text: #1f2937;
+    --prospect-muted: #64748b;
+    --prospect-accent: #1d4ed8;
+    --prospect-accent-soft: #dbeafe;
+  }
+
+  .prospect-process-shell .prospect-screen-shell {
+    background: var(--prospect-shell-bg);
+    border: 1px solid var(--prospect-border);
+    border-radius: 28px;
+    box-shadow: var(--prospect-shadow-soft);
+    padding: clamp(16px, 2vw, 28px);
+  }
+
+  .prospect-process-shell .prospect-screen-shell + .prospect-screen-shell {
+    margin-top: 1rem;
+  }
+
+  .prospect-process-shell .prospect-screen-frame {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding: clamp(20px, 3vw, 36px);
+    background: var(--prospect-surface);
+    border: 1px solid rgba(197, 214, 236, 0.8);
+    border-radius: 24px;
+    box-shadow: var(--prospect-shadow);
+  }
+
+  .prospect-process-shell .prospect-screen-frame--compact {
+    max-width: 980px;
+  }
+
+  .prospect-process-shell .prospect-screen-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .prospect-process-shell .prospect-screen-toolbar .btn.btn-secondary {
+    color: var(--prospect-accent);
+    background: var(--prospect-accent-soft);
+    border-color: #bfdbfe;
+    border-radius: 999px;
+    font-weight: 600;
+    padding-inline: 1rem;
+  }
+
+  .prospect-process-shell .prospect-screen-toolbar .btn.btn-secondary:hover,
+  .prospect-process-shell .prospect-screen-toolbar .btn.btn-secondary:focus {
+    background: #bfdbfe;
+    border-color: #93c5fd;
+    color: #1e3a8a;
+  }
+
+  .prospect-process-shell .prospect-process-header.card-custom {
+    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
+    border: 1px solid var(--prospect-border);
+    border-radius: 24px;
+    box-shadow: var(--prospect-shadow-soft);
+    padding: 1.25rem 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .prospect-process-shell .prospect-process-header .title,
+  .prospect-process-shell .prospect-process-header-mobile .title {
+    color: var(--prospect-text);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+
+  .prospect-process-shell .prospect-process-header .custom-color {
+    color: var(--prospect-accent);
+  }
+
+  .prospect-process-shell .prospect-process-header .info-button {
+    background-color: #dbeafe;
+  }
+
+  .prospect-process-shell .prospect-process-header .info-button span {
+    color: var(--prospect-accent);
+  }
+
+  .prospect-process-shell .prospect-process-header .info-button-active {
+    background-color: var(--prospect-accent) !important;
+  }
+
+  .prospect-process-shell .prospect-process-header .info-button-active span {
+    color: #ffffff;
+  }
+
+  .prospect-process-shell .prospect-process-header-mobile {
+    background: var(--prospect-surface);
+    border: 1px solid var(--prospect-border);
+    border-radius: 18px;
+    box-shadow: var(--prospect-shadow-soft);
+    margin-bottom: 1rem;
+  }
+
+  .prospect-process-shell .prospect-task-renderer,
+  .prospect-process-shell .prospect-summary-renderer,
+  .prospect-process-shell .prospect-form-renderer {
+    background: transparent;
+  }
+
+  .prospect-process-shell .prospect-task-renderer.card,
+  .prospect-process-shell .prospect-summary-renderer.card,
+  .prospect-process-shell .prospect-screen-page.card {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  .prospect-process-shell .prospect-screen-page + .prospect-screen-page {
+    margin-top: 1rem;
+  }
+
+  .prospect-process-shell .prospect-task-shell {
+    padding-bottom: 1.5rem;
+  }
+
+  .prospect-process-shell .prospect-summary-section {
+    padding: 0.5rem 0 1.5rem;
+  }
+
+  .prospect-process-shell .prospect-screen-frame .card-text,
+  .prospect-process-shell .prospect-screen-frame p,
+  .prospect-process-shell .prospect-screen-frame dd,
+  .prospect-process-shell .prospect-screen-frame dt {
+    color: var(--prospect-text);
+  }
+
+  .prospect-process-shell .prospect-screen-frame .text-muted {
+    color: var(--prospect-muted) !important;
+  }
+
+  .prospect-process-shell .prospect-screen-frame .table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .prospect-process-shell .prospect-screen-frame .table thead th {
+    background: var(--prospect-surface-muted);
+    color: var(--prospect-muted);
+    border-top: 0;
+    border-bottom: 1px solid var(--prospect-border);
+    font-size: 0.8125rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .prospect-process-shell .prospect-screen-frame .table td {
+    border-top-color: #e2e8f0;
+    vertical-align: middle;
+  }
+
+  .prospect-process-shell .prospect-screen-frame .btn-primary,
+  .prospect-process-shell .prospect-screen-frame .btn.btn-primary {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+    border-color: #1d4ed8;
+    border-radius: 999px;
+    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
+    font-weight: 600;
+    padding-inline: 1.25rem;
+  }
+
+  .prospect-process-shell .prospect-screen-frame .btn-outline-secondary,
+  .prospect-process-shell .prospect-screen-frame .btn.btn-secondary {
+    border-radius: 999px;
+  }
+
+  @media (max-width: 768px) {
+    .prospect-process-shell .prospect-screen-shell {
+      border-radius: 20px;
+      padding: 12px;
+    }
+
+    .prospect-process-shell .prospect-screen-frame {
+      border-radius: 18px;
+      padding: 16px;
+    }
+
+    .prospect-process-shell .prospect-screen-toolbar {
+      justify-content: stretch;
+    }
+
+    .prospect-process-shell .prospect-screen-toolbar .btn {
+      width: 100%;
+    }
+  }
+
+  @media print {
+    .prospect-process-shell .prospect-screen-shell,
+    .prospect-process-shell .prospect-screen-frame {
+      background: #ffffff;
+      border: 0;
+      box-shadow: none;
+      padding: 0;
+    }
+  }
+</style>
diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
index 9bc92cabfe..e783609182 100644
--- a/resources/views/tasks/edit.blade.php
+++ b/resources/views/tasks/edit.blade.php
@@ -26,9 +26,14 @@ function() use ($task) {
         '@{{taskTitle}}' => null,
       ], 'attributes' => 'v-cloak'])
 @endsection
+@section('css')
+  @include('shared.prospect-process-shell-styles')
+@endsection
 @section('content')
+@php($isProspectProcess = \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower($task->process->name ?? ''), 'prospect'))
 <div
   id="task"
+  class="{{ $isProspectProcess ? 'prospect-process-shell' : '' }}"
   v-cloak
 >
   <div class="menu-mask" :class="{ 'menu-open': showMenu }"></div>
@@ -88,25 +93,29 @@ class="nav-link">
               <div id="tab-form" role="tabpanel" aria-labelledby="tab-form" class="tab-pane active show">
                 @can('update', $task)
                   @unless($hitlEnabled)
-                    <task
-                      ref="task"
-                      class="card border-0"
-                      v-model="formData"
-                      :initial-task-id="{{ $task->id }}"
-                      :initial-request-id="{{ $task->process_request_id }}"
-                      :screen-version="{{ $task->screen['id'] ?? null }}"
-                      :user-id="{{ Auth::user()->id }}"
-                      csrf-token="{{ csrf_token() }}"
-                      initial-loop-context="{{ $task->getLoopContext() }}"
-                      :wait-loading-listeners="true"
-                      @task-updated="taskUpdated"
-                      @updated-page-core="updatePage"
-                      @submit="submit"
-                      @completed="completed"
-                      @@error="error"
-                      @closed="closed"
-                      @redirect="redirectToTask"
-                      @form-data-changed="handleFormDataChange" />
+                    <div class="prospect-screen-shell prospect-task-shell">
+                      <div class="prospect-screen-frame">
+                        <task
+                          ref="task"
+                          class="card border-0 prospect-task-renderer"
+                          v-model="formData"
+                          :initial-task-id="{{ $task->id }}"
+                          :initial-request-id="{{ $task->process_request_id }}"
+                          :screen-version="{{ $task->screen['id'] ?? null }}"
+                          :user-id="{{ Auth::user()->id }}"
+                          csrf-token="{{ csrf_token() }}"
+                          initial-loop-context="{{ $task->getLoopContext() }}"
+                          :wait-loading-listeners="true"
+                          @task-updated="taskUpdated"
+                          @updated-page-core="updatePage"
+                          @submit="submit"
+                          @completed="completed"
+                          @@error="error"
+                          @closed="closed"
+                          @redirect="redirectToTask"
+                          @form-data-changed="handleFormDataChange" />
+                      </div>
+                    </div>
                   @else
                     @include('tasks.partials.hitl-iframe', ['iframeSrc' => $iframeSrc ?? null])
                   @endunless
diff --git a/resources/views/tasks/editMobile.blade.php b/resources/views/tasks/editMobile.blade.php
index b7663cc9a0..81fda2ddba 100644
--- a/resources/views/tasks/editMobile.blade.php
+++ b/resources/views/tasks/editMobile.blade.php
@@ -7,9 +7,13 @@
 @section('title')
   {{ __('Edit Task') }}
 @endsection
+@section('css')
+  @include('shared.prospect-process-shell-styles')
+@endsection
 
 @section('content_mobile')
-<div v-cloak id="taskMobile">
+@php($isProspectProcess = \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower($task->process->name ?? ''), 'prospect'))
+<div v-cloak id="taskMobile" class="{{ $isProspectProcess ? 'prospect-process-shell' : '' }}">
   <navbar-task-mobile
     :task="task"
     :userIsAdmin="userIsAdmin"
@@ -26,23 +30,27 @@
       </div>
       <div id="interactionListener" class="container-fluid h-100 d-flex flex-column">
         <div id="tabContent" class="tab-content m-3 flex-grow-1">
-          <task
-            ref="task"
-            class="card border-0"
-            v-model="formData"
-            :initial-task-id="{{ $task->id }}"
-            :initial-request-id="{{ $task->process_request_id }}"
-            :user-id="{{ Auth::user()->id }}"
-            csrf-token="{{ csrf_token() }}"
-            initial-loop-context="{{ $task->getLoopContext() }}"
-            @task-updated="taskUpdated"
-            @submit="submit"
-            @completed="completed"
-            @@error="error"
-            @closed="closed"
-            @redirect="redirectToTask"
-            @form-data-changed="handleFormDataChange"
-          ></task>
+          <div class="prospect-screen-shell prospect-task-shell">
+            <div class="prospect-screen-frame">
+              <task
+                ref="task"
+                class="card border-0 prospect-task-renderer"
+                v-model="formData"
+                :initial-task-id="{{ $task->id }}"
+                :initial-request-id="{{ $task->process_request_id }}"
+                :user-id="{{ Auth::user()->id }}"
+                csrf-token="{{ csrf_token() }}"
+                initial-loop-context="{{ $task->getLoopContext() }}"
+                @task-updated="taskUpdated"
+                @submit="submit"
+                @completed="completed"
+                @@error="error"
+                @closed="closed"
+                @redirect="redirectToTask"
+                @form-data-changed="handleFormDataChange"
+              ></task>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/resources/views/tasks/preview.blade.php b/resources/views/tasks/preview.blade.php
index d3e683eb0f..fd71fd9943 100644
--- a/resources/views/tasks/preview.blade.php
+++ b/resources/views/tasks/preview.blade.php
@@ -39,6 +39,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
     <link href="/css/bpmn-symbols/css/bpmn.css" rel="stylesheet">
+    @include('shared.prospect-process-shell-styles')
     @yield('css')
     <script type="text/javascript">
     @if(Auth::user())
@@ -84,9 +85,10 @@
     @endif
 </head>
 <body>
+  @php($isProspectProcess = \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower($task->process->name ?? ''), 'prospect'))
   <div id="sidebar" style="display: 'none'"></div>
   <div id="navbar" style="display: 'none'"></div>
-    <div v-cloak id="task" class="container-fluid px-3">
+    <div v-cloak id="task" class="container-fluid px-3 {{ $isProspectProcess ? 'prospect-process-shell' : '' }}">
         <div class="d-flex flex-column flex-md-row" id="interactionListener">
             <div class="flex-grow-1">
                 <div v-if="isSelfService" class="alert alert-primary" role="alert">
@@ -95,26 +97,30 @@
                 </div>
                 <div class="container-fluid h-100 d-flex flex-column">
                     <div id="tabContent" class="tab-content flex-grow-1">
-                        <task
-                          ref="task"
-                          class="card border-0"
-                          v-model="formData"
-                          :initial-task-id="{{ $task->id }}"
-                          :initial-request-id="{{ $task->process_request_id }}"
-                          :user-id="{{ Auth::user()->id }}"
-                          csrf-token="{{ csrf_token() }}"
-                          initial-loop-context="{{ $task->getLoopContext() }}"
-                          @task-updated="taskUpdated"
-                          @after-submit="afterSubmit"
-                          @submit="submit"
-                          @completed="completed"
-                          @@error="error"
-                          @closed="closed"
-                          @redirect="redirectToTask"
-                          :task-preview="true"
-                          :always-allow-editing="alwaysAllowEditing"
-                          :disable-interstitial="disableInterstitial"
-                        ></task>
+                        <div class="prospect-screen-shell prospect-task-shell">
+                          <div class="prospect-screen-frame">
+                            <task
+                              ref="task"
+                              class="card border-0 prospect-task-renderer"
+                              v-model="formData"
+                              :initial-task-id="{{ $task->id }}"
+                              :initial-request-id="{{ $task->process_request_id }}"
+                              :user-id="{{ Auth::user()->id }}"
+                              csrf-token="{{ csrf_token() }}"
+                              initial-loop-context="{{ $task->getLoopContext() }}"
+                              @task-updated="taskUpdated"
+                              @after-submit="afterSubmit"
+                              @submit="submit"
+                              @completed="completed"
+                              @@error="error"
+                              @closed="closed"
+                              @redirect="redirectToTask"
+                              :task-preview="true"
+                              :always-allow-editing="alwaysAllowEditing"
+                              :disable-interstitial="disableInterstitial"
+                            ></task>
+                          </div>
+                        </div>
                     </div>
                 </div>
             </div>