diff --git a/packages/docs/components/Modal.md b/packages/docs/components/Modal.md
index e8b2245e7..1cf4758a0 100644
--- a/packages/docs/components/Modal.md
+++ b/packages/docs/components/Modal.md
@@ -44,7 +44,10 @@ The component supports the W3C ARIA APG [Dialog (Modal) Pattern](https://www.w3.
 | component        | Component to be injected.<br/>Close the component by emitting a 'close' event — `$emit('close')`                                                                                                                                                       | Component                   | -                                                   |                                                                                                                                                                      |
 | content          | Text content, unnecessary when default slot is used                                                                                                                                                                                                    | string                      | -                                                   |                                                                                                                                                                      |
 | events           | Events to be binded to the injected component                                                                                                                                                                                                          | {}                          | -                                                   |                                                                                                                                                                      |
-| fullScreen       | Display modal as full screen                                                                                                                                                                                                                           | boolean                     | -                                                   | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                          |
+| fullheight       | Display modal in fullheight                                                                                                                                                                                                                            | boolean                     | -                                                   | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                          |
+| fullscreen       | Display modal in fullwidth and fullheight                                                                                                                                                                                                              | boolean                     | -                                                   | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                          |
+| fullwidth        | Display modal in fullwidth                                                                                                                                                                                                                             | boolean                     | -                                                   | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                          |
+| height           | Height of the modal                                                                                                                                                                                                                                    | Numberish                   | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;height: undefined<br>}</code>                    |
 | iconPack         | Icon pack to use                                                                                                                                                                                                                                       | string                      | `mdi`, `fa`, `fas and any other custom icon pack`   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;iconPack: undefined<br>}</code>                  |
 | mobileBreakpoint | Mobile breakpoint as `max-width` value                                                                                                                                                                                                                 | string                      | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;mobileBreakpoint: undefined<br>}</code>          |
 | overlay          | Show an overlay                                                                                                                                                                                                                                        | boolean                     | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;overlay: true<br>}</code>                        |
@@ -52,7 +55,7 @@ The component supports the W3C ARIA APG [Dialog (Modal) Pattern](https://www.w3.
 | props            | Props to be binded to the injected component                                                                                                                                                                                                           | any                         | -                                                   |                                                                                                                                                                      |
 | teleport         | Append the component to another part of the DOM.<br/>Set `true` to append the component to the body.<br/>In addition, any CSS selector string or an actual DOM node can be used.                                                                       | boolean \| object \| string | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;teleport: false<br>}</code>                      |
 | trapFocus        | Trap focus inside the modal                                                                                                                                                                                                                            | boolean                     | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;trapFocus: true<br>}</code>                      |
-| width            | Width of the Modal                                                                                                                                                                                                                                     | Numberish                   | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;width: 960<br>}</code>                           |
+| width            | Width of the modal                                                                                                                                                                                                                                     | Numberish                   | -                                                   | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>modal: {<br>&nbsp;&nbsp;width: undefined<br>}</code>                     |
 
 ### Events
 
diff --git a/packages/oruga/src/components/modal/Modal.vue b/packages/oruga/src/components/modal/Modal.vue
index 252b19eaf..3ac40d2d1 100644
--- a/packages/oruga/src/components/modal/Modal.vue
+++ b/packages/oruga/src/components/modal/Modal.vue
@@ -41,11 +41,14 @@ defineOptions({
 const props = withDefaults(defineProps<ModalProps<C>>(), {
     override: undefined,
     active: false,
-    fullScreen: false,
     content: undefined,
-    width: () => getDefault("modal.width", 960),
     animation: () => getDefault("modal.animation", "zoom-out"),
     overlay: () => getDefault("modal.overlay", true),
+    width: () => getDefault("modal.width"),
+    height: () => getDefault("modal.height"),
+    fullscreen: false,
+    fullheight: false,
+    fullwidth: false,
     cancelable: () =>
         getDefault("modal.cancelable", ["escape", "x", "outside"]),
     trapFocus: () => getDefault("modal.trapFocus", true),
@@ -98,9 +101,17 @@ const showX = computed(() =>
         : props.cancelable,
 );
 
-const customStyle = computed(() =>
-    !props.fullScreen ? { maxWidth: toCssDimension(props.width) } : null,
-);
+// TODO: Maybe remove?!
+const contentStyle = computed(() => ({
+    width:
+        !props.fullscreen && !props.fullwidth
+            ? toCssDimension(props.width)
+            : undefined,
+    height:
+        !props.fullscreen && !props.fullheight
+            ? toCssDimension(props.height)
+            : undefined,
+}));
 
 const toggleScroll = usePreventScrolling(props.clipScroll);
 
@@ -117,7 +128,7 @@ onMounted(() => {
     if (isActive.value && props.overlay) toggleScroll(isActive.value);
 });
 
-// --- Events Feature ---
+// #region --- Close Events Feature ---
 
 if (isClient)
     if (!props.overlay)
@@ -165,7 +176,9 @@ function close(...args: [] | [string] | CloseEventArgs<C>): void {
     emits("close", ...args);
 }
 
-// --- Animation Feature ---
+// #endregion --- Close Events Feature ---
+
+// #region --- Animation Feature ---
 
 const isAnimated = ref(props.active);
 
@@ -179,12 +192,20 @@ function beforeLeave(): void {
     isAnimated.value = false;
 }
 
-// --- Computed Component Classes ---
+// #endregion --- Animation Feature ---
+
+// #region --- Computed Component Classes ---
 
 const rootClasses = defineClasses(
     ["rootClass", "o-modal"],
     ["mobileClass", "o-modal--mobile", null, isMobile],
     ["activeClass", "o-modal--active", null, isActive],
+    [
+        "teleportClass",
+        "o-modal--teleport",
+        null,
+        computed(() => !!props.teleport),
+    ],
 );
 
 const overlayClasses = defineClasses(["overlayClass", "o-modal__overlay"]);
@@ -195,16 +216,32 @@ const contentClasses = defineClasses(
         "fullScreenClass",
         "o-modal__content--full-screen",
         null,
-        computed(() => props.fullScreen),
+        computed(() => props.fullscreen),
+    ],
+    [
+        "fullheightClass",
+        "o-modal__content--fullheight",
+        null,
+        computed(() => props.fullheight || props.fullscreen),
+    ],
+    [
+        "fullwidthClass",
+        "o-modal__content--fullwidth",
+        null,
+        computed(() => props.fullwidth || props.fullscreen),
     ],
 );
 
 const closeClasses = defineClasses(["closeClass", "o-modal__close"]);
 
-// --- Expose Public Functionalities ---
+// #endregion --- Computed Component Classes ---
+
+// #region --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ close });
+
+// #endregion --- Expose Public Functionalities ---
 </script>
 
 <template>
@@ -234,21 +271,21 @@ defineExpose({ close });
                 <div
                     ref="contentElement"
                     :class="contentClasses"
-                    :style="customStyle">
-                    <!-- injected component for programmatic usage -->
-                    <component
-                        :is="$props.component"
-                        v-if="$props.component"
-                        v-bind="$props.props"
-                        v-on="$props.events || {}"
-                        @close="close" />
-
+                    :style="contentStyle">
                     <!--
                         @slot Modal default content, default is content prop
                         @binding {(...args): void} close - function to close the component
                     -->
-                    <slot v-else :close="close">
-                        <div v-if="content">{{ content }}</div>
+                    <slot :close="close">
+                        <!-- injected component for programmatic usage -->
+                        <component
+                            :is="$props.component"
+                            v-if="$props.component"
+                            v-bind="$props.props"
+                            v-on="$props.events || {}"
+                            @close="close" />
+
+                        <div v-else-if="content">{{ content }}</div>
                     </slot>
 
                     <CloseButton
diff --git a/packages/oruga/src/components/modal/examples/inspector.vue b/packages/oruga/src/components/modal/examples/inspector.vue
index d903adbc4..0eaaca152 100644
--- a/packages/oruga/src/components/modal/examples/inspector.vue
+++ b/packages/oruga/src/components/modal/examples/inspector.vue
@@ -40,13 +40,22 @@ const inspectData: InspectData<ModalClasses, ModalProps> = {
             data.active = true;
         },
     },
-    fullScreenClass: {
-        class: "fullScreenClass",
-        description: "Class of the content element when fullscreen.",
-        properties: ["fullScreen"],
+    fullheightClass: {
+        class: "fullheightClass",
+        description: "Class of the content element when fullheight.",
+        properties: ["fullheight"],
         action: (data): void => {
             data.active = true;
-            data.fullScreen = true;
+            data.fullheight = true;
+        },
+    },
+    fullwidthClass: {
+        class: "fullwidthClass",
+        description: "Class of the content element when fullwidth.",
+        properties: ["fullwidth"],
+        action: (data): void => {
+            data.active = true;
+            data.fullwidth = true;
         },
     },
     closeClass: {
diff --git a/packages/oruga/src/components/modal/examples/teleport.vue b/packages/oruga/src/components/modal/examples/teleport.vue
index fd43a646f..89affaded 100644
--- a/packages/oruga/src/components/modal/examples/teleport.vue
+++ b/packages/oruga/src/components/modal/examples/teleport.vue
@@ -12,7 +12,12 @@ const isActive = ref(false);
             variant="primary"
             @click="isActive = true" />
 
-        <o-modal v-model:active="isActive" teleport>
+        <o-modal
+            v-model:active="isActive"
+            teleport
+            full-screen
+            fullheight
+            fillwidth>
             <div style="padding: 10px; background-color: white">
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
diff --git a/packages/oruga/src/components/modal/props.ts b/packages/oruga/src/components/modal/props.ts
index 951e83eaf..c5ebe3dcf 100644
--- a/packages/oruga/src/components/modal/props.ts
+++ b/packages/oruga/src/components/modal/props.ts
@@ -7,16 +7,22 @@ export type ModalProps<C extends Component = Component> = {
     override?: boolean;
     /** Whether modal is active or not, use v-model:active to make it two-way binding */
     active?: boolean;
-    /** Display modal as full screen */
-    fullScreen?: boolean;
     /** Text content, unnecessary when default slot is used */
     content?: string;
-    /** Width of the Modal */
-    width?: Numberish;
     /** Custom animation (transition name) */
     animation?: string;
     /** Show an overlay  */
     overlay?: boolean;
+    /** Width of the modal */
+    width?: Numberish;
+    /** Height of the modal */
+    height?: Numberish;
+    /** Display modal in fullwidth and fullheight */
+    fullscreen?: boolean;
+    /** Display modal in fullheight */
+    fullheight?: boolean;
+    /** Display modal in fullwidth */
+    fullwidth?: boolean;
     /**
      * Is Modal cancleable by clicking 'X', pressing escape or clicking outside
      * @values escape, x, outside, button, true, false
@@ -89,8 +95,10 @@ export type ModalClasses = Partial<{
     overlayClass: ComponentClass;
     /** Class of the content element */
     contentClass: ComponentClass;
-    /** Class of the content element when fullscreen */
-    fullScreenClass: ComponentClass;
+    /** Class of the content element when fullheght */
+    fullheightClass: ComponentClass;
+    /** Class of the content element when fullwidth */
+    fullwidthClass: ComponentClass;
     /** Class of the close button element */
     closeClass: ComponentClass;
     /** Class of the body when modal is open and scroll is clipped */
diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts
index 2cd0119ed..665315ea0 100644
--- a/packages/oruga/src/components/types.ts
+++ b/packages/oruga/src/components/types.ts
@@ -864,12 +864,14 @@ Use menu only in situations where your dropdown is related to a navigation menu.
             }>;
         modal?: ComponentConfigBase &
             Partial<{
-                /** Width of the Modal */
-                width: Numberish;
                 /** Custom animation (transition name) */
                 animation: string;
                 /** Show an overlay */
                 overlay: boolean;
+                /** Width of the modal */
+                width: Numberish;
+                /** Height of the modal */
+                height: Numberish;
                 /** Is Modal cancleable by clicking 'X', pressing escape or clicking outside */
                 cancelable: boolean | string[];
                 /** Set `true` to remove the body scrollbar.
@@ -909,8 +911,10 @@ In addition, any CSS selector string or an actual DOM node can be used. */
                 overlayClass: ClassDefinition;
                 /** Class of the content element */
                 contentClass: ClassDefinition;
-                /** Class of the content element when fullscreen */
-                fullScreenClass: ClassDefinition;
+                /** Class of the content element when fullheght */
+                fullheightClass: ClassDefinition;
+                /** Class of the content element when fullwidth */
+                fullwidthClass: ClassDefinition;
                 /** Class of the close button element */
                 closeClass: ClassDefinition;
                 /** Class of the body when modal is open and scroll is clipped */