diff --git a/config/livewire-ui-modal.php b/config/livewire-ui-modal.php
index 295029182..9325f7db8 100644
--- a/config/livewire-ui-modal.php
+++ b/config/livewire-ui-modal.php
@@ -37,7 +37,7 @@
     | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
     */
     'component_defaults' => [
-        'modal_max_width' => '2xl',
+        'modal_max_width' => '7xl',
 
         'close_modal_on_click_away' => true,
 
diff --git a/resources/css/app.css b/resources/css/app.css
index b5d09ef6d..40858504b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -17,6 +17,9 @@ .scrollbar {
 .main {
     @apply pt-4 pl-24 pr-10 mx-auto;
 }
+.custom-modal {
+    @apply px-8 py-4 border bg-base-100 border-coolgray-200;
+}
 .label-text,
 label {
     @apply text-neutral-400;
diff --git a/resources/views/livewire/project/service/compose-modal.blade.php b/resources/views/livewire/project/service/compose-modal.blade.php
index 55c30dfb0..3324b1741 100644
--- a/resources/views/livewire/project/service/compose-modal.blade.php
+++ b/resources/views/livewire/project/service/compose-modal.blade.php
@@ -1,4 +1,4 @@
-<form x-data="{ raw: true }" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
+<form x-data="{ raw: true }" class="flex flex-col gap-2 custom-modal" wire:submit.prevent='submit'>
     <div class="flex items-end gap-2">
         <h1>Docker Compose</h1>
         <div x-cloak x-show="raw">
diff --git a/resources/views/vendor/livewire-ui-modal/modal.blade.php b/resources/views/vendor/livewire-ui-modal/modal.blade.php
index 04980eb86..11f1a1451 100644
--- a/resources/views/vendor/livewire-ui-modal/modal.blade.php
+++ b/resources/views/vendor/livewire-ui-modal/modal.blade.php
@@ -27,7 +27,7 @@ class="fixed inset-0 z-10 overflow-y-auto"
                     x-transition:leave-end="opacity-0"
                     class="fixed inset-0 transition-all transform"
             >
-                <div class="absolute inset-0 opacity-50 bg-coolgray-200"></div>
+                <div class="absolute inset-0 bg-black opacity-70"></div>
             </div>
 
             <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
@@ -40,7 +40,6 @@ class="fixed inset-0 transition-all transform"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    x-bind:class="modalWidth"
                     class="fixed top-0 w-full overflow-hidden text-left align-bottom transition-all transform rounded-lg sm:my-8 sm:align-middle sm:w-full"
                     id="modal-container"
                     x-trap.noscroll.inert="show && showActiveComponent"