diff --git a/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php b/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
index 9b460e9712..40e7cdd9dd 100644
--- a/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
+++ b/ProcessMaker/Http/Controllers/Api/ProcessLaunchpadController.php
@@ -47,7 +47,6 @@ public function getProcesses(Request $request)
         // Get the processes
         $processes = $processes
             ->select('processes.*')
-            ->withRequestCount()
             ->orderBy('processes.name', 'asc')
             ->paginate($perPage);
 
@@ -58,6 +57,10 @@ 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);
     }
 
@@ -104,8 +107,9 @@ public function index(Request $request, Process $process)
             }])
             ->where('id', $process->id)
             ->get()
-            ->map(function ($process) {
+            ->map(function ($process) use ($request) {
                 $process->counts = $this->getCounts($process->id);
+                $process->bookmark_id = Bookmark::getBookmarked(true, $process->id, $request->user()->id);
 
                 return $process;
             });
diff --git a/ProcessMaker/Models/Process.php b/ProcessMaker/Models/Process.php
index 111b637904..35526657be 100644
--- a/ProcessMaker/Models/Process.php
+++ b/ProcessMaker/Models/Process.php
@@ -1816,15 +1816,4 @@ public function scopeOrderByRecentRequests($query)
                 ->limit(1)
         );
     }
-
-    public function scopeWithRequestCount($query)
-    {
-        return $query->withCount(['requests' => function ($query) {
-            return $query->where('status', 'ACTIVE')
-                // User has participated
-                ->whereHas('tokens', function ($q) {
-                    $q->where('user_id', Auth::user()->id);
-                });
-        }]);
-    }
 }
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 034588dfcd..11f2f6c160 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -10,7 +10,7 @@
     >
       <Card
         v-for="(process, index) in processList"
-        :key="index"
+        :key="`${index}_${renderKey}`"
         :process="process"
         @openProcessInfo="openProcessInfo"
         :hideBookmark="categoryId === 'all_templates'"
@@ -66,9 +66,9 @@ export default {
       totalPages: 1,
       pmql: "",
       filter: "",
-      bookmarkIcon: "far fa-bookmark",
       showEmpty: false,
       loading: false,
+      renderKey: 0,
     };
   },
   watch: {
@@ -92,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;
         });
     },
     /**
diff --git a/resources/js/processes-catalogue/components/Process.vue b/resources/js/processes-catalogue/components/Process.vue
index f8fb5e12a8..65681a22f7 100644
--- a/resources/js/processes-catalogue/components/Process.vue
+++ b/resources/js/processes-catalogue/components/Process.vue
@@ -1,15 +1,54 @@
 <template>
-  <div v-if="selectedProcess">
+  <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"
-      :permission="permission"
       @goBackCategory="goBackCategory"
     />
     <ProcessScreen
       v-if="verifyScreen"
       :process="selectedProcess"
-      :permission="permission"
       @goBackCategory="goBackCategory"
     />
   </div>
@@ -18,15 +57,18 @@
 <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", "permission", "isDocumenterInstalled"],
+  props: ["process", "processId"],
   components: {
-    ProcessInfo, ProcessScreen
+    ProcessInfo, ProcessScreen, MiniPieChart, Bookmark
   },
   data() {
     return {
       loadedProcess: null,
+      showDetails: false,
     };
   },
   computed: {
@@ -56,6 +98,12 @@ export default {
 
       return screenId !== 0;
     },
+    processVersion() {
+      return moment(this.selectedProcess.updated_at).format();
+    },
+    startedCases() {
+      return this.selectedProcess.counts?.total || 0;
+    },
   },
   methods: {
     goBackCategory() {
@@ -67,9 +115,109 @@ export default {
       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>
\ No newline at end of file
+</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 ca1ca956b4..c18f207457 100644
--- a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
@@ -1,79 +1,11 @@
 <template>
   <div id="processCollapseInfo">
     <div id="processData">
-      <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="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"
-              :startEvent="singleStartEvent"
-              :processEvents="processEvents"
-            />
-          </div>
-        </div>
-      </div>
+      <process-header
+        :process="process"
+        @goBack="goBack()"
+        @onProcessNavigate="onProcessNavigate()"
+      />
       <div
         id="collapseProcessInfo"
         class="collapse show"
@@ -154,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";
@@ -166,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,
@@ -178,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;
@@ -194,39 +124,12 @@ export default {
     ProcessMaker.EventBus.$on("reloadByNewScreen", (newScreen) => {
       window.location.reload();
     });
-    this.getStartEvents();
   },
   data() {
     return {
-      processEvents: [],
-      singleStartEvent: null,
     };
   },
   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;
-          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");
-        });
-    },
-    /**
-     * Change button title
-     */
-    toogleInfoCollapsed() {
-      this.infoCollapsed = !this.infoCollapsed;
-    },
     /**
      * Verify if the Description is large
      */
@@ -252,6 +155,12 @@ export default {
 @import url("./scss/processes.css");
 @import '~styles/variables';
 
+#collapseProcessInfo {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
+
 .wizard-link {
   text-transform: none;
 }
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 f3c454ea18..eb21654132 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -1,51 +1,10 @@
 <template>
-  <div class="process-info-main">
-    <div class="mobile-process-nav bg-primary">
-      <div class="left">
-        <a href="#" @click.prevent="goBackCategory">
-          <i class="fas fa-arrow-left" />
-        </a>
-      </div>
-      <div>
-        <a href="#" @click.prevent="showDetails = !showDetails">
-          <i class="fas fa-info-circle" />
-        </a>
-      </div>
-      <div class="right">
-        <a href="#">
-          <i class="fas fa-bookmark" />
-        </a>
-      </div>
-    </div>
-    <div class="mobile-process-details" v-if="showDetails">
-      <h1>{{ $t('Details') }}</h1>
-      <h2>{{ process.name }}</h2>
-      <p>{{ process.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="process.counts?.in_progress"
-          :total="startedCases"
-          :name="$t('In Progress')"
-          color="#4EA075"
-        />
-        <mini-pie-chart
-          :count="process.counts?.completed"
-          :total="startedCases"
-          :name="$t('Completed')"
-          color="#478FCC"
-        />
-      </div>
-    </div>
+  <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"
@@ -77,16 +36,14 @@
 import ProcessCollapseInfo from "./ProcessCollapseInfo.vue";
 import ProcessTab from "./ProcessTab.vue";
 import ProcessesCarousel from "./ProcessesCarousel.vue";
-import MiniPieChart from "./MiniPieChart.vue";
 
 export default {
   components: {
     ProcessCollapseInfo,
     ProcessTab,
     ProcessesCarousel,
-    MiniPieChart,
   },
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "currentUser"],
+  props: ["process", "currentUserId", "currentUser"],
   data() {
     return {
       listCategories: [],
@@ -96,7 +53,6 @@ export default {
       firstImage: 0,
       lastImage: null,
       indexSelectedImage: 0,
-      showDetails: false,
     };
   },
   mounted() {
@@ -114,30 +70,10 @@ export default {
       this.firstImage = pos + 1;
     });
 
-    if (window.ProcessMaker?.navbarMobile) {
-      window.ProcessMaker.navbarMobile.display = false;
-    }
-  },
-  beforeDestroy() {
-    if (window.ProcessMaker?.navbarMobile) {
-      window.ProcessMaker.navbarMobile.display = true;
-    }
   },
   computed: {
-    processVersion() {
-      return moment(this.process.updated_at).format();
-    },
-    startedCases() {
-      return this.process.counts?.total || 0;
-    },
   },
   methods: {
-    /**
-     * Return a process cards
-     */
-    goBackCategory() {
-      this.$emit("goBackCategory");
-    },
     closeFullCarousel() {
       this.$root.$emit("clickCarouselImage", false);
     },
@@ -146,86 +82,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@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;
-  }
- 
-  i {
-    display: block;
-    color: #FFFFFF;
-    padding: 1em;
-    font-size: 1.5em;
-  }
-
-  @media (max-width: $lp-breakpoint) {
-    display: flex;
-    flex-direction: row;
-  }
-}
-
-.mobile-process-details {
-  @media (min-width: $lp-breakpoint) {
-    display: none;
-  }
-
-  width: 100%;
-  position: absolute;
-  z-index: 5;
-  padding: 1em;
-  background-color: white;
-  box-shadow: 0px 8px 8px #00000021;
-
-  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>
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/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 0ce2012151..82886ba2d8 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -21,7 +21,6 @@
           :from-process-list="fromProcessList"
           @categorySelected="selectCategory"
           :filter-categories="filterCategories"
-          :permission="permission"
           @addCategories="addCategories"
         />
         <div class="mobile-slide-close">
@@ -39,11 +38,11 @@
           <div class="mobile-menu-control" v-show="showMobileMenuControl">
             <span @click="showMenu = !showMenu">
               <i class="fa fa-bars"></i>
-              {{ category?.name || 'N/A' }}
+              {{ category?.name || '' }}
             </span>
           </div>
         
-          <router-view :permission="permission" @goBackCategory="goBackCategory"></router-view>
+          <router-view @goBackCategory="goBackCategory"></router-view>
 
       </div>
     </div>
@@ -59,7 +58,7 @@ export default {
   components: {
     MenuCatologue, CatalogueEmpty, Breadcrumbs,
   },
-  props: ["permission", "isDocumenterInstalled", "currentUserId", "process", "currentUser"],
+  props: ["currentUserId", "process", "currentUser"],
   data() {
     return {
       showMenu: false,
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
index 9fc6b47fbb..0d13c72409 100644
--- a/resources/js/processes-catalogue/components/menuCatologue.vue
+++ b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -197,16 +197,22 @@ export default {
 
       const query = this.$route.query;
 
-      this.selectedProcessItem = null;
-      this.selectedTemplateItem = null;
-
       if (query.categoryId) {
-        this.selectedProcessItem = this.data.find((category) => {
+        const selectedProcessItem = this.data.find((category) => {
           return String(category.id) === String(query.categoryId);
         });
-        this.selectedTemplateItem = this.filteredTemplateOptions.find((category) => {
+
+        if (selectedProcessItem) {
+          this.selectProcessItem(selectedProcessItem);
+        }
+
+        const selectedTemplateItem = this.filteredTemplateOptions.find((category) => {
           return String(category.id) === String(query.categoryId);
         });
+
+        if (selectedTemplateItem) {
+          this.selectTemplateItem(selectedTemplateItem);
+        }
       }
     },
     /**
@@ -273,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;
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/scss/processes.css b/resources/js/processes-catalogue/components/scss/processes.css
index de034f18be..12762f28e8 100644
--- a/resources/js/processes-catalogue/components/scss/processes.css
+++ b/resources/js/processes-catalogue/components/scss/processes.css
@@ -53,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 5f7b10fd79..ceec46094c 100644
--- a/resources/js/processes-catalogue/components/utils/Card.vue
+++ b/resources/js/processes-catalogue/components/utils/Card.vue
@@ -28,25 +28,26 @@
           variant="custom"
         />
       </div>
-      <div class="requests-count" v-if="process.requests_count">
-        {{ process.requests_count }}
-      </div>
-      <div class="card-bookmark">
-        <i
-          v-if="!hideBookmark"
-          :ref="`bookmark-${process.id}`"
-          v-b-tooltip.hover.bottom
-          :title="$t(labelTooltip)"
-          :class="bookmarkIcon()"
-          @click="checkBookmark(process)"
-        />
+      <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 {
+  components: {
+    Bookmark
+  },
   props: {
     process: null,
     hideBookmark: {
@@ -60,38 +61,15 @@ export default {
       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;
-      }
-      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";
+  computed: {
+    caseCount() {
+      if (this.process?.counts?.total) {
+        return this.process.counts.total.toLocaleString();
       }
-      this.labelTooltip = this.$t("Add to My Bookmarks");
-      return "fas fa-bookmark unmarked";
-    },
+      return null;
+    }
+  },
+  methods: {
     /**
      * Open the process
      */
@@ -156,22 +134,20 @@ export default {
   background-color: #F9E7C3;
   margin-right: 8px;
   
-  border-radius: 50%;
-  width: 30px;
+  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 {
-  float: right;
-  font-size: 24px;
-}
-.card-bookmark:hover {
-  cursor: pointer;
+
+.bookmark {
+  float:right;
 }
 .card-text {
   height: 100%;
@@ -207,18 +183,6 @@ export default {
     margin-right: 10px;
   }
 }
-.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;
-}
 .title-process {
   color: #556271;
   font-family: Poppins, sans-serif;
diff --git a/resources/js/processes-catalogue/index.js b/resources/js/processes-catalogue/index.js
index 0b7630ff87..3e42fb8151 100644
--- a/resources/js/processes-catalogue/index.js
+++ b/resources/js/processes-catalogue/index.js
@@ -16,7 +16,7 @@ const router = new VueRouter({
       component: ProcessListing,
       props(route) {
         return {
-          categoryId: route.query.categoryId || null,
+          categoryId: route.query.categoryId || 'recent',
         };
       }
     },
@@ -38,7 +38,11 @@ new Vue({
   el: "#processes-catalogue",
   components: { ProcessesCatalogue },
   router,
-  data: {
+  data() {
+    return {
+      permission: window.ProcessMaker.permission,
+      isDocumenterInstalled: window.ProcessMaker.isDocumenterInstalled,
+    };
   },
   methods: {
   },
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
index 82d96e845f..b249ad389e 100644
--- a/resources/views/processes-catalogue/mobile.blade.php
+++ b/resources/views/processes-catalogue/mobile.blade.php
@@ -7,15 +7,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