diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 708dd4e0..28554c04 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -29,4 +29,7 @@ declare module 'vue' {
     TwoFADialog: typeof import('./src/components/TwoFADialog.vue')['default']
     Uptime: typeof import('./src/components/Uptime.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
+  }
 }
diff --git a/frontend/src/icon.ts b/frontend/src/icon.ts
index 0599e6af..96206996 100644
--- a/frontend/src/icon.ts
+++ b/frontend/src/icon.ts
@@ -54,6 +54,7 @@ import {
     faTerminal, faWarehouse, faHome, faRocket,
     faRotate,
     faCloudArrowDown, faArrowsRotate,
+    faExpand,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -109,6 +110,7 @@ library.add(
     faRotate,
     faCloudArrowDown,
     faArrowsRotate,
+    faExpand
 );
 
 export { FontAwesomeIcon };
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 7572a23a..d84248f7 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -167,6 +167,9 @@
 
                     <!-- YAML editor -->
                     <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
+                        <button v-if="isEditMode" v-b-modal.compose-editor-modal class="expand-button">
+                            <font-awesome-icon icon="expand" />
+                        </button>
                         <prism-editor
                             ref="editor"
                             v-model="stack.composeYAML"
@@ -181,6 +184,24 @@
                     <div v-if="isEditMode" class="mb-3">
                         {{ yamlError }}
                     </div>
+                    <!-- YAML modal fullscreen editor -->
+                    <BModal id="compose-editor-modal" :title="stack.composeFileName" scrollable size="fullscreen" hide-footer>
+                        <div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
+                            <prism-editor
+                                ref="editor"
+                                v-model="stack.composeYAML"
+                                class="yaml-editor"
+                                :highlight="highlighterYAML"
+                                line-numbers :readonly="!isEditMode"
+                                @input="yamlCodeChange"
+                                @focus="editorFocus = true"
+                                @blur="editorFocus = false"
+                            ></prism-editor>
+                        </div>
+                        <div v-if="isEditMode" class="mb-3">
+                            {{ yamlError }}
+                        </div>
+                    </BModal>
 
                     <!-- ENV editor -->
                     <div v-if="isEditMode">
@@ -808,6 +829,24 @@ export default {
     &.edit-mode {
         background-color: #2c2f38 !important;
     }
+    position: relative;
+}
+
+.expand-button {
+    all: unset;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    z-index: 10;
+}
+
+.expand-button svg {
+    width:20px;
+    height: 20px;
+}
+
+.expand-button:hover {
+    color: white;
 }
 
 .agent-name {