diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 79f1fdbed0..95f7115307 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -7,18 +7,21 @@
       :process="selectedProcess ? selectedProcess.name : ''"
       :template="guidedTemplates ? 'Guided Templates' : ''"
     />
-    <div class="tw-flex tw-h-full">
-      <CollapsableContainer
+    <div class="tw-flex tw-h-full tw-relative">
+      <component :is="isMobile ? 'mobile-drawer' : 'collapsable-container'"
         v-model="showMenu"
-        class="tw-w-80"
-        position="right"
-        @change="hideMenu"
+        :class="{
+          'tw-w-80': !isMobile,
+          'tw-w-full tw-h-full': isMobile && showMenu,
+          'tw-w-0 tw-h-full': isMobile && !showMenu,
+        }"
+        :position="isMobile ? 'left' : 'right'"
       >
         <MenuCatologue
           ref="categoryList"
           title="Available Processes"
           preicon="fas fa-play-circle"
-          class="pt-3 menu-catalog"
+          class="pt-3 menu-catalog tw-bg-white tw-h-full tw-w-full"
           show-bookmark="true"
           :category-count="categoryCount"
           :data="listCategories"
@@ -27,7 +30,7 @@
           @categorySelected="selectCategory"
           @addCategories="addCategories"
         />
-      </CollapsableContainer>
+      </component>
 
       <div
         ref="processInfo"
@@ -69,6 +72,7 @@ import MenuCatologue from "./menuCatologue.vue";
 import CatalogueEmpty from "./CatalogueEmpty.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
 import CollapsableContainer from "../../../jscomposition/base/ui/CollapsableContainer.vue";
+import MobileDrawer from "../../../jscomposition/base/ui/MobileDrawer.vue";
 
 export default {
   components: {
@@ -76,6 +80,7 @@ export default {
     CatalogueEmpty,
     Breadcrumbs,
     CollapsableContainer,
+    MobileDrawer,
   },
   props: ["currentUserId", "process", "currentUser", "userConfig"],
   data() {
@@ -152,15 +157,17 @@ export default {
   },
   methods: {
     defineUserConfiguration() {
-      this.showMenu = this.userConfiguration.launchpad.isMenuCollapse;
+      this.showMenu = this.userConfiguration?.launchpad?.isMenuCollapse;
     },
     hideMenu(value) { // value is the new value of the menu
-      this.showMenu = value;
+      this.showMenu = !this.showMenu;
       this.$root.$emit("sizeChanged", value);
       this.updateUserConfiguration();
     },
     updateUserConfiguration() {
-      this.userConfiguration.launchpad.isMenuCollapse = this.showMenu;
+      if(this.userConfiguration?.launchpad) {
+        this.userConfiguration.launchpad.isMenuCollapse = this.showMenu;
+      }
       ProcessMaker.apiClient
         .put(this.urlConfiguration, {
           ui_configuration: this.userConfiguration,
diff --git a/resources/jscomposition/base/ui/MobileDrawer.vue b/resources/jscomposition/base/ui/MobileDrawer.vue
new file mode 100644
index 0000000000..476fe11bf0
--- /dev/null
+++ b/resources/jscomposition/base/ui/MobileDrawer.vue
@@ -0,0 +1,181 @@
+<template>
+  <transition :name="transitionName">
+    <div class="tw-flex tw-h-full tw-absolute">
+      <!-- Overlay: semi-transparent background, closes drawer on click -->
+      <transition name="fade">
+        <div
+          v-if="isOpen"
+          class="tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-50 tw-z-40 tw-transition-opacity tw-duration-300"
+          @click.prevent="closeDrawer">
+          <button
+            class="tw-absolute tw-top-2 tw-right-2 tw-size-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-white hover:tw-bg-gray-100 tw-transition-colors tw-duration-200 tw-cursor-pointer"
+            @click.prevent="closeDrawer"
+            aria-label="Close drawer">
+            <i class="fa fa-times tw-text-base tw-text-gray-600" />
+          </button>
+        </div>
+      </transition>
+
+      <!-- Drawer Modal Panel: slides in based on the position prop -->
+      <div
+        v-if="isOpen"
+        class="tw-absolute tw-w-[80%] tw-z-50 tw-shadow-2xl tw-overflow-y-auto tw-transition-transform tw-duration-300"
+        :class="drawerClass">
+        <!-- Main Drawer Content -->
+        <div class="tw-h-full">
+          <slot name="default"/>
+        </div>
+
+        <!-- Drawer Footer if slot provided -->
+        <div
+          v-if="$slots.footer"
+          class="tw-p-4 tw-border-t tw-border-solid tw-border-gray-200">
+          <slot name="footer"/>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { computed, toRefs, defineComponent } from "vue";
+
+const validPositions = ["left", "right", "top", "bottom"];
+const validButtonPositions = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+
+export default defineComponent({
+  name: "MobileDrawer",
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      default: "left",
+      validator: val => validPositions.includes(val),
+    },
+    title: {
+      type: String,
+      default: "Menu",
+    },
+    buttonPosition: {
+      type: String,
+      default: "top-left",
+      validator: val => validButtonPositions.includes(val),
+    },
+  },
+  setup(props, { emit }) {
+    const { value, position } = toRefs(props);
+
+    /**
+     * Open state, two-way bound to v-model
+     */
+    const isOpen = computed({
+      get: () => value.value,
+      set: val => emit("input", val),
+    });
+
+    /**
+     * Computed classes for drawer position/size
+     */
+    const drawerClass = computed(() => ({
+      "tw-top-0 tw-left-0 tw-h-full": position.value === "left",
+      "tw-top-0 tw-right-0 tw-h-full": position.value === "right",
+      "tw-top-0 tw-left-0 tw-max-h-[50vh]": position.value === "top",
+      "tw-bottom-0 tw-left-0 tw-max-h-[50vh]": position.value === "bottom",
+    }));
+
+    /**
+     * Transition name depending on drawer position
+     */
+    const transitionName = computed(() => {
+      const transitions = {
+        left: "slide-left",
+        right: "slide-right",
+        top: "slide-top",
+        bottom: "slide-bottom",
+      };
+      return transitions[position.value] || "slide-left";
+    });
+
+    /**
+     * Open the drawer (emit events)
+     */
+    const openDrawer = () => {
+      isOpen.value = true;
+      emit("change", true);
+      emit("open");
+    };
+
+    /**
+     * Close the drawer (emit events)
+     */
+    const closeDrawer = () => {
+      isOpen.value = false;
+      emit("change", false);
+      emit("close");
+    };
+
+    return {
+      isOpen,
+      transitionName,
+      drawerClass,
+      openDrawer,
+      closeDrawer,
+    };
+  }
+});
+</script>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-top-enter-active,
+.slide-top-leave-active,
+.slide-bottom-enter-active,
+.slide-bottom-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translateX(-100%);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.slide-top-enter-from,
+.slide-top-leave-to {
+  transform: translateY(-100%);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.slide-bottom-enter-from,
+.slide-bottom-leave-to {
+  transform: translateY(100%);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+  -webkit-transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  -webkit-opacity: 0;
+}
+</style>
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
index 3ecdf6bdb9..0b172de127 100644
--- a/resources/jscomposition/base/ui/index.js
+++ b/resources/jscomposition/base/ui/index.js
@@ -2,9 +2,10 @@ import Badge from "./Badge.vue";
 import AppAvatar from "./AppAvatar.vue";
 import AppPopover from "./AppPopover.vue";
 import CollapsableContainer from "./CollapsableContainer.vue";
+import MobileDrawer from "./MobileDrawer.vue";
 
 export default {};
 
 export {
-  Badge, AppAvatar, AppPopover, CollapsableContainer,
+  Badge, AppAvatar, AppPopover, CollapsableContainer, MobileDrawer,
 };