diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 25380836c2..91f16a59a7 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -92,9 +92,7 @@ export default {
       renderKey: 0,
       showMoreVisible: false,
       cardMessage: "show-more",
-      switchMenu: null,
-      flagMenu: true,
-      
+      sumHeight: 0,
     };
   },
   watch: {
@@ -111,7 +109,6 @@ export default {
     },
   },
   mounted() {
-    this.switchMenu = this.categoryId;
     this.loadCard(()=>{
       this.$nextTick(()=>{
           const listCard = document.querySelector(".processes-info");
@@ -142,7 +139,13 @@ export default {
           this.renderKey = this.renderKey + 1;
           callback?.();
           const container =  document.querySelector(".processes-info");
-          container.scrollTop = container.scrollTop - 60;
+          if(!callback) {
+            this.$nextTick(() => {
+                if((container.scrollTop+container.clientHeight)>=container.scrollHeight-5){
+                  container.scrollTop = container.scrollTop - 1050;
+                } 
+            });
+          } 
         });
     },
     /**
diff --git a/resources/js/processes-catalogue/components/MiniPieChart.vue b/resources/js/processes-catalogue/components/MiniPieChart.vue
index 43cbf10c24..239bd5476c 100644
--- a/resources/js/processes-catalogue/components/MiniPieChart.vue
+++ b/resources/js/processes-catalogue/components/MiniPieChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chart">
     <div class="pie" :style="style"></div>
-    <div>{{ count.toLocaleString() }} {{ name }}</div>
+    <div>{{ percent.toLocaleString() }}% {{ name }}</div>
   </div>
 </template>
 
diff --git a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
index 9a6f4c9024..2d3897b3ef 100644
--- a/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessCollapseInfo.vue
@@ -1,14 +1,19 @@
 <template>
   <div id="processCollapseInfo">
     <div id="processData">
+      <process-header-start
+        :process="process"
+        @goBack="goBack()"
+      />
       <process-header
         :process="process"
+        :hide-header-options="true"
         @goBack="goBack()"
         @onProcessNavigate="onProcessNavigate"
       />
       <div
         id="collapseProcessInfo"
-        class="collapse show"
+        class="collapse show custom-class"
       >
         <div class="info-collapse">
           <div class="row">
@@ -97,6 +102,7 @@ import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import processNavigationMixin from "../../components/shared/processNavigation";
 import ProcessesMixin from "./mixins/ProcessesMixin";
 import ProcessHeader from "./ProcessHeader.vue";
+import ProcessHeaderStart from "./ProcessHeaderStart.vue";
 
 export default {
   components: {
@@ -108,6 +114,7 @@ export default {
     ProcessesCarousel,
     WizardHelperProcessModal,
     ProcessHeader,
+    ProcessHeaderStart,
   },
   mixins: [ProcessesMixin, ellipsisMenuMixin, processNavigationMixin],
   props: ["process", "currentUserId"],
@@ -160,7 +167,9 @@ export default {
     display: none;
   }
 }
-
+.custom-class {
+ margin-top: -13px;
+}
 .wizard-link {
   text-transform: none;
 }
diff --git a/resources/js/processes-catalogue/components/ProcessHeader.vue b/resources/js/processes-catalogue/components/ProcessHeader.vue
index 4b268d6f0a..0ab407be96 100644
--- a/resources/js/processes-catalogue/components/ProcessHeader.vue
+++ b/resources/js/processes-catalogue/components/ProcessHeader.vue
@@ -1,76 +1,85 @@
 <template>
   <div>
     <div class="header-mobile">
-        <div class="title">
-          {{ process.name }}
+      <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-body card-process-info clickable"
+      :style="{
+        borderRadius: infoCollapsed ? '8px 8px 0px 0px' : '8px',
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+      }"
+      data-toggle="collapse"
+      data-target="#collapseProcessInfo"
+      aria-controls="collapseProcessInfo"
+      :aria-expanded="infoCollapsed"
+      @click="toggleInfoCollapsed()"
+    >
+      <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center">
+          <template v-if="infoCollapsed">
+            <i class="fas fa-caret-down pl-2 mr-2 custom-color" />
+            <span class="custom-text">
+              {{ $t("Process Info") }}
+            </span>
+          </template>
+          <template v-else>
+            <i class="fas fa-caret-right pl-2 mr-2 custom-color" />
+            <span class="custom-text">
+              {{ $t("Process Info") }}
+            </span>
+          </template>
         </div>
-        <div class="start-button">
+        <div
+          v-if="!hideHeaderOptions"
+          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"
-            :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="ellipsisNavigate"
-                :isDocumenterInstalled="$root.isDocumenterInstalled"
-                :permission="$root.permission"
-              />
-            </span>
-            <buttons-start
+        <div
+          v-else
+          class="d-flex align-items-center"
+        >
+          <template v-if="!infoCollapsed">
+            <process-counter
               :process="process"
-              :startEvent="singleStartEvent"
-              :processEvents="processEvents"
+              :enable-collapse="enableCollapse"
             />
-          </div>
+          </template>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
@@ -80,33 +89,36 @@ import ProcessesMixin from "./mixins/ProcessesMixin";
 import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import Bookmark from "./Bookmark.vue";
+import ProcessCounter from "./optionsMenu/ProcessCounter.vue";
 
 export default {
   components: {
     ButtonsStart,
     EllipsisMenu,
     Bookmark,
+    ProcessCounter,
   },
-  mixins: [
-    ProcessesMixin,
-    ellipsisMenuMixin
-  ],
+  mixins: [ProcessesMixin, ellipsisMenuMixin],
   props: {
     process: {
       type: Object,
-      required: true
+      required: true,
     },
     enableCollapse: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
+    hideHeaderOptions: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       infoCollapsed: true,
       processEvents: [],
       singleStartEvent: null,
-    }
+    };
   },
   mounted() {
     this.getStartEvents();
@@ -127,7 +139,9 @@ export default {
         .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);
+          const nonWebEntryStartEvents = this.processEvents.filter(
+            (e) => !("webEntry" in e) || !e.webEntry
+          );
           if (nonWebEntryStartEvents.length === 1) {
             this.singleStartEvent = nonWebEntryStartEvents[0].id;
           }
@@ -136,13 +150,13 @@ export default {
           ProcessMaker.alert(err, "danger");
         });
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @import url("./scss/processes.css");
-@import '~styles/variables';
+@import "~styles/variables";
 .header {
   @media (max-width: $lp-breakpoint) {
     display: none;
@@ -158,7 +172,10 @@ export default {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 1.5em;
+    font-size: 22px;
+    letter-spacing: -0.2;
+    color: #4c545c;
+    font-weight: 400;
   }
 
   @media (max-width: $lp-breakpoint) {
@@ -175,4 +192,30 @@ export default {
 .card-bookmark:hover {
   cursor: pointer;
 }
-</style>
\ No newline at end of file
+
+.card-process-info {
+  border-color: #cdddee;
+  border-radius: 8px;
+  background-color: #fff;
+  margin-bottom: 12px;
+  border: 1px solid rgb(205, 221, 238);
+  padding-top: 13px;
+  height: 53px;
+  margin-right: 20px;
+}
+
+.custom-text {
+  font-size: 16px;
+  font-weight: 400;
+  color: #556271;
+  letter-spacing: -0.2;
+}
+
+.custom-color {
+  color: #4c545c;
+}
+
+.clickable {
+  cursor: pointer;
+}
+</style>
diff --git a/resources/js/processes-catalogue/components/ProcessHeaderStart.vue b/resources/js/processes-catalogue/components/ProcessHeaderStart.vue
new file mode 100644
index 0000000000..1abd9a02f9
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessHeaderStart.vue
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="header-mobile">
+      <div class="title">
+        {{ process.name }}
+      </div>
+    </div>
+    <div class="header card card-body card-custom">
+      <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" 
+            @click="$emit('goBack')" />
+          <div class="title text-truncate" v-b-tooltip.hover :title="process.name">
+            {{ process.name }}
+          </div>
+        </div>
+        <div class="d-flex align-items-center flex-shrink-0">
+          <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();
+  },
+  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-mobile .title,
+.header .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.d-flex.align-items-center {
+  min-width: 0;
+}
+
+.text-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.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: 16px;
+    color: #4C545C;
+    font-weight: 400;
+  }
+
+  @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;
+}
+
+.card-custom {
+  background-color: #F6F9FB;
+  border: 1px solid rgba(205, 221, 238, 0.125);
+}
+
+.title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  max-width: 100%;
+  font-size: 22px;
+  letter-spacing: -0.2;
+  color: #4C545C;
+  font-weight: 400;
+}
+
+.custom-color {
+  color: #4C545C;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/processes-catalogue/components/ProcessTab.vue b/resources/js/processes-catalogue/components/ProcessTab.vue
index 552964f72d..211968eebf 100644
--- a/resources/js/processes-catalogue/components/ProcessTab.vue
+++ b/resources/js/processes-catalogue/components/ProcessTab.vue
@@ -121,6 +121,7 @@ export default {
 .tab-style {
   background-color: white;
   padding-top: 32px;
+  width: 98.5%;
 }
 .nav-pills .nav-link.active {
   background-color: white;
@@ -150,7 +151,4 @@ export default {
   display: flex;
   justify-content: center;
 }
-div:has(.tab-pane) {
-  width: 100%;
-}
 </style>
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ProcessCounter.vue b/resources/js/processes-catalogue/components/optionsMenu/ProcessCounter.vue
index c48c99d3c1..282a4a1c14 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ProcessCounter.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ProcessCounter.vue
@@ -1,30 +1,68 @@
 <template>
-  <div class="process-counter">
+  <div class="spacing-class" v-if="!enableCollapse">
+    <span class="title">
+      {{ $t('Started Cases') }}
+    </span>
     <div>
-      <p class="process-counter-text">
-        {{ $t('Cases Started') }}
-      </p>
       <p class="process-counter-total">
         {{ count }}
       </p>
     </div>
-    <img
-      class="process-counter-image"
-      src="/img/launchpad-images/iconCounter.svg"
-      alt="icon Counter"
-    >
+    <div class="charts">
+      <mini-pie-chart
+        :count="process.counts.completed"
+        :total="process.counts.total"
+        :name="$t('In Progress')"
+        color="#4EA075"
+      />
+      <mini-pie-chart
+        :count="process.counts.in_progress"
+        :total="process.counts.total"
+        :name="$t('Completed')"
+        color="#478FCC"
+      />
+    </div>
+  </div>
+  <div v-else class="d-flex align-items-center">
+    <img class="thumb-size" :src="`/img/launchpad-images/icons/${processIcon}.svg`" :alt="$t('No Image')"></img>
+    <span class="text-summary">{{ count }} {{ $t('Cases started') }}</span>
+    <div class="charts">
+      <mini-pie-chart
+        :count="process.counts.completed"
+        :total="process.counts.total"
+        :name="$t('In Progress')"
+        color="#4EA075"
+      />
+      <mini-pie-chart
+        :count="process.counts.in_progress"
+        :total="process.counts.total"
+        :name="$t('Completed')"
+        color="#478FCC"
+      />
+    </div>
   </div>
 </template>
 <script>
+import MiniPieChart from "../MiniPieChart.vue";
+
 export default {
-  props: ["process"],
+  components: {
+    MiniPieChart,
+  },
+  props: ["process", "enableCollapse"],
   data() {
     return {
       count: 0,
+      completed: 0,
+      inProgress: 0,
+      processIcon: null,
+      completedCollapsed: 0,
+      inProgressCollapsed: 0,
     };
   },
   mounted() {
     this.fetch();
+    this.getProcessImage();
   },
   methods: {
     fetch() {
@@ -37,6 +75,13 @@ export default {
           this.count = 0;
         });
     },
+
+    getProcessImage() {
+      const propertiesString = this.process.launchpad["properties"];
+      const propertiesObject = JSON.parse(propertiesString);
+      this.processIcon = propertiesObject.icon;
+      return this.processIcon ? this.processIcon : null;
+    },
   },
 };
 </script>
@@ -52,10 +97,10 @@ export default {
   background: #e7f9ff;
 }
 .process-counter-total {
-  color: #556271;
-  margin: 0px;
+  color: #4C545C;
+  margin: 5px 0px 5px 0px;
   font-family: 'Open Sans', sans-serif;
-  font-size: 32px;
+  font-size: 55px;
   font-weight: 700;
   line-height: 43.58px;
   letter-spacing: -0.02em;
@@ -76,4 +121,31 @@ export default {
   width: 56px;
   height: 56px;
 }
+.thumb-size {
+  width: 22px;
+  height: 22px;
+}
+.d-flex.align-items-center > * {
+  margin-right: 8px;
+}
+.title {
+  color: #1572C2;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.text-summary {
+  color: #B1B8BF;
+  font-size: 16px;
+  font-weight: 400;
+  vertical-align: middle;
+  font-style: italic;
+}
+.charts {
+  display: flex;
+  align-items: center;
+}
+.spacing-class {
+  margin-top: 10px;
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
index 5186553335..6e8efaa0f7 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ProcessDescription.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="col-sm-9">
+    <div id="processDescription" class="col-sm-9">
       <span class="title">
         {{ $t('Details') }}
       </span>
@@ -12,17 +12,22 @@
       >
         {{ process.description }}
       </p>
+      <span 
+        v-if="readActivated || !largeDescription" 
+        class="class-version">
+        {{ $t('Version') }} {{ processVersion }}
+      </span>
       <p
         v-if="!readActivated && largeDescription"
         class="description"
       >
-        {{ process.description.slice(0,300) }}
+        {{ process.description.slice(0,190) }} ...
         <a
           v-if="!readActivated"
           class="read-more"
           @click="activateReadMore"
         >
-          ...
+        <span style="color: #1572C2;">{{ $t('More') }}</span>
         </a>
       </p>
     </div>
@@ -36,20 +41,40 @@ export default {
       largeDescription: false,
     };
   },
+  computed: {
+    processVersion() {
+      return moment(this.process.updated_at).format();
+    },
+  },
+  mounted() {
+    this.verifyDescription();
+  },
   methods: {
+    /**
+     * Verify if the Description is large
+     */
+    verifyDescription() {
+      if (this.process.description.length > 190) {
+        this.largeDescription = true;
+      }
+    },
     activateReadMore() {
       this.readActivated = true;
     },
   },
 };
 </script>
-<style scoped>
-.title{
+<style lang="scss" scoped>
+@import url("../scss/processes.css");
+@import '~styles/variables';
+
+.title {
   color: #1572C2;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.02em;
 }
+
 .title-process {
   color: #4C545C;
   font-family: 'Open Sans', sans-serif;
@@ -58,6 +83,7 @@ export default {
   letter-spacing: -0.02em;
   text-align: left;
 }
+
 .description {
   color: #4f606d;
   font-family: 'Open Sans', sans-serif;
@@ -67,4 +93,8 @@ export default {
   letter-spacing: -0.02em;
   text-align: left;
 }
+.class-version {
+  font-size: 1em;
+  color:#B1B8BF;
+}
 </style>
diff --git a/resources/js/processes-catalogue/components/scss/processes.css b/resources/js/processes-catalogue/components/scss/processes.css
index 12762f28e8..f7625af9f6 100644
--- a/resources/js/processes-catalogue/components/scss/processes.css
+++ b/resources/js/processes-catalogue/components/scss/processes.css
@@ -21,7 +21,16 @@
   padding: 32px;
   padding-bottom: 0px;
   background-color: white;
+  border-left: 1px solid rgb(205, 221, 238);
+  border-right: 1px solid rgb(205, 221, 238);
+  border-bottom: none;
+  border-top: 1px solid rgb(205, 221, 238);
+  border-radius: 0px;
+  margin-right: 20px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
+
 .title-process {
   color: #556271;
   font-family: 'Open Sans', sans-serif;