diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
index 655851d030..e237d349c7 100644
--- a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
+++ b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -20,8 +20,8 @@ public function index(Request $request)
      *
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
-    public function open(Process $process, $id)
+    public function open(Process $process)
     {
-        return view('processes-catalogue.open', compact('id'));
+        return view('processes-catalogue.open', compact('process'));
     }
 }
diff --git a/resources/js/components/shared/EllipsisMenu.vue b/resources/js/components/shared/EllipsisMenu.vue
index b23084d926..2fbd635897 100644
--- a/resources/js/components/shared/EllipsisMenu.vue
+++ b/resources/js/components/shared/EllipsisMenu.vue
@@ -1,5 +1,6 @@
 <template>
   <b-dropdown
+    v-if="filterActions.length > 0"
     :variant="variant ? variant : 'ellipsis'"
     no-caret
     no-flip
@@ -9,7 +10,6 @@
     class="ellipsis-dropdown-main"
     @show="onShow"
     @hide="onHide"
-    v-if="filterActions.length > 0"    
   >
     <template v-if="customButton" #button-content>
       <i
@@ -20,6 +20,9 @@
         {{ customButton.content }} <b v-if="showProgress && data && data.batch"> {{ getTotalProgress(data.batch, data.progress) }}%</b>
       </span>
     </template>
+    <template v-else-if="lauchpad" #button-content>
+      <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
+    </template>
     <template v-else #button-content>
       <i class="fas fa-ellipsis-h ellipsis-menu-icon" />
     </template>
@@ -74,21 +77,21 @@
       </div>
       <div v-for="action in filterActions">
         <b-dropdown-divider v-if="action.value == 'divider'"/>
-        <b-dropdown-item v-else
-            :key="action.value"
-            :href="action.link ? itemLink(action, data) : null"
-            class="ellipsis-dropdown-item mx-auto"
-            @click="!action.link ? onClick(action, data) : null"
+        <b-dropdown-item
+          v-else
+          :key="action.value"
+          :href="action.link ? itemLink(action, data) : null"
+          class="ellipsis-dropdown-item mx-auto"
+          @click="!action.link ? onClick(action, data) : null"
         >
           <div class="ellipsis-dropdown-content">
             <i
-                class="pr-1 fa-fw"
-                :class="action.icon"
+              class="pr-1 fa-fw"
+              :class="action.icon"
             />
             <span>{{ $t(action.content) }}</span>
           </div>
         </b-dropdown-item>
-
       </div>
     </div>
   </b-dropdown>
@@ -103,7 +106,7 @@ export default {
   components: { PmqlInput },
   filters: { },
   mixins: [],
-  props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant"],
+  props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "lauchpad", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant"],
   data() {
     return {
       active: false,
@@ -166,7 +169,7 @@ export default {
       return this.actions.filter(action => {
         // Check if the action has a 'permission' property and it's a non-empty string
         if (!action.permission || typeof action.permission === 'string' && action.permission.trim() === '') {
-            return true; // No specific permission required or invalid format, so allow the action.
+          return true; // No specific permission required or invalid format, so allow the action.
         }
         let requiredPermissions;
         // Check if this.permission is of type string
@@ -175,7 +178,7 @@ export default {
         } else {
           requiredPermissions = action.permission;
         }
-        
+
         // Check if this.permission is of type object
         if (typeof this.permission === 'object' && this.permission !== null) {
           const keys = Object.keys(this.permission);
diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index 239dad1aba..e0ad61c235 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -16,10 +16,15 @@
       <b-col cols="10">
         <div class="d-flex">
           <b-col cols="9">
-            Process Map
+            <process-map
+              :process="process"
+              :permission="permission"
+              :current-user-id="currentUserId"
+              :is-documenter-installed="isDocumenterInstalled"
+            />
           </b-col>
           <b-col cols="3">
-            <process-options :process-id="processId" />
+            <process-options :process="process" />
           </b-col>
         </div>
         <b-col cols="12">
@@ -31,12 +36,13 @@
 </template>
 
 <script>
+import ProcessMap from "./ProcessMap.vue";
 import ProcessOptions from "./ProcessOptions.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
 
 export default {
-  components: { ProcessOptions, Breadcrumbs },
-  props: ["processId"],
+  components: { ProcessOptions, Breadcrumbs, ProcessMap },
+  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
   data() {
     return {
       fields: [],
diff --git a/resources/js/processes-catalogue/components/ProcessMap.vue b/resources/js/processes-catalogue/components/ProcessMap.vue
new file mode 100644
index 0000000000..8cb60f6a7f
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessMap.vue
@@ -0,0 +1,112 @@
+<template>
+  <div id="processMap">
+    <div id="processData">
+      <div
+        id="header"
+        class="d-flex justify-content-between mb-3"
+      >
+        <h4 class="d-flex align-items-center">
+          <i class="fas fa-arrow-circle-left text-secondary mr-2 title-font" />
+          {{ process.name }}
+        </h4>
+        <span class="border bg-white rounded-circle d-flex align-items-center p-0 ellipsis-border">
+          <ellipsis-menu
+            :actions="processLaunchpadActions"
+            :permission="permission"
+            :data="process"
+            :is-documenter-installed="isDocumenterInstalled"
+            :divider="false"
+            :lauchpad="true"
+            variant="none"
+            @navigate="onProcessNavigate"
+          />
+        </span>
+      </div>
+      <p> {{ process.description }}</p>
+    </div>
+    <create-template-modal
+      id="create-template-modal"
+      ref="create-template-modal"
+      asset-type="process"
+      :current-user-id="currentUserId"
+      :asset-name="processTemplateName"
+      :asset-id="processId"
+    />
+    <create-pm-block-modal
+      id="create-pm-block-modal"
+      ref="create-pm-block-modal"
+      :current-user-id="currentUserId"
+      :asset-name="pmBlockName"
+      :asset-id="processId"
+    />
+    <add-to-project-modal
+      id="add-to-project-modal"
+      ref="add-to-project-modal"
+      asset-type="process"
+      :asset-id="processId"
+      :asset-name="assetName"
+    />
+  </div>
+</template>
+
+<script>
+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";
+import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
+import processNavigationMixin from "../../components/shared/processNavigation";
+
+export default {
+  components: {
+    EllipsisMenu,
+    CreateTemplateModal,
+    CreatePmBlockModal,
+    AddToProjectModal,
+  },
+  mixins: [ellipsisMenuMixin, processNavigationMixin],
+  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
+  data() {
+    return {
+      processId: null,
+      processTemplateName: "",
+      pmBlockName: "",
+      assetName: "",
+      processLaunchpadActions: [],
+    };
+  },
+  mounted() {
+    this.getActions();
+  },
+  methods: {
+    showCreateTemplateModal(name, id) {
+      this.processId = id;
+      this.processTemplateName = name;
+      this.$refs["create-template-modal"].show();
+    },
+    showPmBlockModal(name, id) {
+      this.processId = id;
+      this.pmBlockName = name;
+      this.$refs["create-pm-block-modal"].show();
+    },
+    showAddToProjectModal(name, id) {
+      this.processId = id;
+      this.assetName = name;
+      this.assetType = "process";
+      this.$refs["add-to-project-modal"].show();
+    },
+    getActions() {
+      this.processLaunchpadActions = this.processActions.filter((action) => action.value !== "open-launchpad");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title-font {
+  font-size: 32px
+}
+.ellipsis-border{
+  border-color: #CDDDEE;
+}
+</style>
diff --git a/resources/js/processes-catalogue/components/ProcessOptions.vue b/resources/js/processes-catalogue/components/ProcessOptions.vue
index bca4b59279..8f353a1722 100644
--- a/resources/js/processes-catalogue/components/ProcessOptions.vue
+++ b/resources/js/processes-catalogue/components/ProcessOptions.vue
@@ -44,7 +44,7 @@
 <script>
 
 export default {
-  props: ["processId"],
+  props: ["process"],
   data() {
     return {
       processEvents: [],
@@ -58,16 +58,12 @@ export default {
      * get start events for dropdown Menu
      */
     getStartEvents() {
-      window.ProcessMaker.apiClient
-        .get(`processes/${this.processId}`)
-        .then((response) => {
-          const startEvents = response.data.start_events;
-          startEvents.forEach((event) => {
-            if (event.eventDefinitions.length === 0) {
-              this.processEvents.push(event);
-            }
-          });
-        });
+      const startEvents = this.process.start_events;
+      startEvents.forEach((event) => {
+        if (event.eventDefinitions.length === 0) {
+          this.processEvents.push(event);
+        }
+      });
     },
     /**
      * Start new request
diff --git a/resources/views/processes-catalogue/open.blade.php b/resources/views/processes-catalogue/open.blade.php
index d617bad9ac..9c9f5795fa 100644
--- a/resources/views/processes-catalogue/open.blade.php
+++ b/resources/views/processes-catalogue/open.blade.php
@@ -10,7 +10,13 @@
 
 @section('content')
   <div id="open-process" class="px-3 page-content mb-0">
-    <process-info :process-id={{$id}}></process-info>
+    <process-info
+      :process="{{$process}}"
+      :current-user-id="{{ \Auth::user()->id }}"
+      :permission="{{ \Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks') }}"
+      is-documenter-installed="{{\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled()}}"
+    >
+    </process-info>
   </div>
 @endsection
 
diff --git a/routes/web.php b/routes/web.php
index 571b5f82a0..bef3b8382f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -92,7 +92,7 @@
     Route::get('designer', [DesignerController::class, 'index'])->name('designer.index');
 
     Route::get('processes-catalogue', [ProcessesCatalogueController::class, 'index'])->name('processes.catalogue.index');
-    Route::get('processes-catalogue/{processId}', [ProcessesCatalogueController::class, 'open'])->name('processes.catalogue.open');
+    Route::get('processes-catalogue/{process}', [ProcessesCatalogueController::class, 'open'])->name('processes.catalogue.open');
 
     Route::get('processes', [ProcessController::class, 'index'])->name('processes.index');
     Route::get('processes/{process}/edit', [ProcessController::class, 'edit'])->name('processes.edit')->middleware('can:edit-processes');