diff --git a/resources/js/components/Menu.vue b/resources/js/components/Menu.vue
index bdf6ee9ba1..cab8a38a1c 100644
--- a/resources/js/components/Menu.vue
+++ b/resources/js/components/Menu.vue
@@ -168,7 +168,16 @@ export default {
       return item.items.filter((button) => button.hide !== true);
     },
     isVisible(item, type) {
-      return item.type === type && item.hide !== true;
+      if (item.type === type && item.hide !== true) {
+        if (item.displayCondition) {
+        // eslint-disable-next-line no-eval
+          return eval(`this.environment.${item.displayCondition}`);
+        }
+
+        return true;
+      }
+
+      return false;
     },
     changeItem(id, value) {
       this.changeItems[id] = value;
diff --git a/resources/js/processes/screen-builder/screen.vue b/resources/js/processes/screen-builder/screen.vue
index 954a571280..9320fe2819 100644
--- a/resources/js/processes/screen-builder/screen.vue
+++ b/resources/js/processes/screen-builder/screen.vue
@@ -41,7 +41,7 @@
           id="preview"
           class="h-100 m-0"
         >
-          <b-col class="overflow-auto h-100">
+          <b-col class="d-flex overflow-auto h-100">
             <vue-form-renderer
               v-if="renderComponent === 'task-screen'"
               ref="renderer"
@@ -55,6 +55,7 @@
               :watchers="preview.watchers"
               :show-errors="true"
               :mock-magic-variables="mockMagicVariables"
+              :device-screen="deviceScreen"
               @submit="previewSubmit"
               @update="onUpdate"
               @css-errors="cssErrors = $event"
@@ -372,6 +373,30 @@ export default {
           },
         ],
       },
+      {
+        id: "group_preview",
+        type: "group",
+        section: "left",
+        displayCondition: "displayPreview",
+        items: [
+          {
+            id: "button_preview_desktop",
+            type: "button",
+            title: this.$t("Preview Desktop"),
+            variant: "secondary",
+            icon: "fas fa-desktop",
+            action: "changeDeviceScreen(\"desktop\")",
+          },
+          {
+            id: "button_preview_mobile",
+            type: "button",
+            title: this.$t("Preview Mobile"),
+            variant: "outline-secondary",
+            icon: "fas fa-mobile pr-1",
+            action: "changeDeviceScreen(\"mobile\")",
+          },
+        ],
+      },
       {
         id: "group_properties",
         type: "group",
@@ -454,6 +479,7 @@ export default {
       },
       type: formTypes.form,
       mode: "editor",
+      deviceScreen: "desktop",
       // Computed properties
       computed: [],
       // Watchers
@@ -771,6 +797,20 @@ export default {
         this.$refs.builder.refreshContent();
       }
     },
+    changeDeviceScreen(deviceScreen) {
+      this.$refs.menuScreen.changeItem("button_preview_desktop", {
+        variant: deviceScreen === "desktop" ? "secondary" : "outline-secondary",
+      });
+      this.$refs.menuScreen.changeItem("button_preview_mobile", {
+        variant: deviceScreen === "mobile" ? "secondary" : "outline-secondary",
+      });
+
+      this.deviceScreen = deviceScreen;
+
+      this.$nextTick(() => {
+        this.$refs.renderer.checkIfIsMobile();
+      });
+    },
     onUpdate(data) {
       this.updateDataPreview();
       ProcessMaker.EventBus.$emit("form-data-updated", data);
diff --git a/resources/lang/en.json b/resources/lang/en.json
index dcc2470bdd..032716284d 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -638,6 +638,8 @@
   "Preview Screen was Submitted": "Preview Screen was Submitted",
   "Preview": "Preview",
   "Preview Screen": "Preview Screen",
+  "Preview Desktop": "Preview Desktop",
+  "Preview Mobile": "Preview Mobile",
   "Previous Task Assignee": "Previous Task Assignee",
   "primary": "primary",
   "Print": "Print",
diff --git a/routes/api.php b/routes/api.php
index 7d8a24780a..40bda4153a 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -122,7 +122,7 @@
     Route::get('processes', [ProcessController::class, 'index'])->name('processes.index')->middleware('can:view-processes');
     Route::get('processes/{process}', [ProcessController::class, 'show'])->name('processes.show')->middleware('can:view-processes');
     Route::post('processes/{process}/export', [ProcessController::class, 'export'])->name('processes.export')->middleware('can:export-processes');
-    Route::get('processes/{process}/bpmn', [ProcessController::class, 'downloadBpmn'])->name('processes.export')->middleware('can:view-processes');
+    Route::get('processes/{process}/bpmn', [ProcessController::class, 'downloadBpmn'])->name('processes.export.bpmn')->middleware('can:view-processes');
     Route::post('processes/import', [ProcessController::class, 'import'])->name('processes.import')->middleware('can:import-processes');
     Route::post('processes/import/validation', [ProcessController::class, 'preimportValidation'])->name('processes.preimportValidation')->middleware('can:import-processes');
     Route::get('processes/import/{code}/is_ready', [ProcessController::class, 'import_ready'])->name('processes.import_is_ready')->middleware('can:import-processes');