diff --git a/resources/css/app.css b/resources/css/app.css
index fa29bf90f..a1939d71e 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -280,7 +280,7 @@ .subtitle {
 }
 
 .fullscreen {
-    @apply fixed top-0 left-0 w-full h-full z-[9999] bg-coolgray-100 overflow-y-auto scrollbar pb-4;
+    @apply fixed top-0 left-0 w-full h-full z-[9999] dark:bg-coolgray-100 bg-white overflow-y-auto scrollbar pb-4;
 }
 
 .toast {
diff --git a/resources/views/livewire/project/application/deployment/index.blade.php b/resources/views/livewire/project/application/deployment/index.blade.php
index f36c24fa2..03a8a0d8a 100644
--- a/resources/views/livewire/project/application/deployment/index.blade.php
+++ b/resources/views/livewire/project/application/deployment/index.blade.php
@@ -27,18 +27,17 @@ class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         @endif
         @forelse ($deployments as $deployment)
             <a @class([
-                'dark:bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline',
+                'dark:bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline box-without-bg bg-white',
                 'dark:hover:bg-coolgray-200' =>
                     data_get($deployment, 'status') === 'queued',
                 'border-warning hover:bg-warning hover:text-black' =>
                     data_get($deployment, 'status') === 'in_progress' ||
                     data_get($deployment, 'status') === 'cancelled-by-user',
-                'border-error hover:bg-error' =>
+                'border-error dark:hover:bg-error hover:bg-neutral-200' =>
                     data_get($deployment, 'status') === 'failed',
-                'border-success hover:bg-success' =>
+                'border-success dark:hover:bg-success hover:bg-neutral-200' =>
                     data_get($deployment, 'status') === 'finished',
-            ]) href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}"
-                class="hover:no-underline">
+            ]) href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}">
                 <div class="flex flex-col justify-start">
                     <div class="flex gap-1">
                         {{ $deployment->created_at }} UTC
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index 5d80cd127..1426ef583 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -1,11 +1,45 @@
 <div>
     <h1 class="py-0">Deployment</h1>
     <livewire:project.application.heading :application="$application" />
-    <div class="pt-4" x-data="{ fullscreen: false, alwaysScroll: false, intervalId: null }">
+    <div class="pt-4" x-data="{
+        fullscreen: false,
+        alwaysScroll: false,
+        intervalId: null,
+        makeFullscreen() {
+            this.fullscreen = !this.fullscreen;
+            if (this.fullscreen === false) {
+                this.alwaysScroll = false;
+                clearInterval(this.intervalId);
+            }
+        },
+        toggleScroll() {
+            this.alwaysScroll = !this.alwaysScroll;
+
+            if (this.alwaysScroll) {
+                this.intervalId = setInterval(() => {
+                    const screen = document.getElementById('screen');
+                    const logs = document.getElementById('logs');
+                    if (screen.scrollTop !== logs.scrollHeight) {
+                        screen.scrollTop = logs.scrollHeight;
+                    }
+                }, 100);
+            } else {
+                clearInterval(this.intervalId);
+                this.intervalId = null;
+            }
+        },
+        goTop() {
+            this.alwaysScroll = false;
+            clearInterval(this.intervalId);
+            const screen = document.getElementById('screen');
+            screen.scrollTop = 0;
+        }
+    }">
         <livewire:project.application.deployment-navbar :application_deployment_queue="$application_deployment_queue" />
         @if (data_get($application_deployment_queue, 'status') === 'in_progress')
             <div class="flex items-center gap-1 pt-2 ">Deployment is
-                <div class="dark:text-warning"> {{ Str::headline(data_get($this->application_deployment_queue, 'status')) }}.
+                <div class="dark:text-warning">
+                    {{ Str::headline(data_get($this->application_deployment_queue, 'status')) }}.
                 </div>
                 <x-loading class="loading-ring" />
             </div>
@@ -17,7 +51,7 @@ class="dark:text-warning">{{ Str::headline(data_get($application_deployment_queu
         @endif
         <div id="screen" :class="fullscreen ? 'fullscreen' : ''">
             <div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
-                class="relative flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto dark:text-white bg-coolgray-100 scrollbar border-coolgray-300"
+                class="relative flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
                 :class="fullscreen ? '' : 'max-h-[40rem] border border-dotted rounded'">
                 <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4"
                     x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24"
@@ -58,7 +92,11 @@ class="fixed top-4 right-16" x-on:click="toggleScroll"><svg class="icon" viewBox
                                     <br>COMMAND: <br>{{ $line['command'] }} <br><br>OUTPUT:
                                     @endif @if (str($line['output'])->contains('http://') || str($line['output'])->contains('https://'))
                                         @php
-                                            $line['output'] = preg_replace('/(https?:\/\/[^\s]+)/', '<a href="$1" target="_blank" class="underline text-neutral-400">$1</a>', $line['output']);
+                                            $line['output'] = preg_replace(
+                                                '/(https?:\/\/[^\s]+)/',
+                                                '<a href="$1" target="_blank" class="underline text-neutral-400">$1</a>',
+                                                $line['output'],
+                                            );
                                         @endphp {!! $line['output'] !!}
                                     @else
                                         {{ $line['output'] }}
@@ -71,39 +109,5 @@ class="fixed top-4 right-16" x-on:click="toggleScroll"><svg class="icon" viewBox
                 </div>
             </div>
         </div>
-        <script>
-            function makeFullscreen() {
-                this.fullscreen = !this.fullscreen;
-                if (this.fullscreen === false) {
-                    this.alwaysScroll = false;
-                    clearInterval(this.intervalId);
-                }
-            }
-
-            function toggleScroll() {
-                this.alwaysScroll = !this.alwaysScroll;
-
-                if (this.alwaysScroll) {
-                    this.intervalId = setInterval(() => {
-                        const screen = document.getElementById('screen');
-                        const logs = document.getElementById('logs');
-                        if (screen.scrollTop !== logs.scrollHeight) {
-                            screen.scrollTop = logs.scrollHeight;
-                        }
-                    }, 100);
-                } else {
-                    clearInterval(this.intervalId);
-                    this.intervalId = null;
-                }
-            }
-
-            function goTop() {
-                this.alwaysScroll = false;
-                clearInterval(this.intervalId);
-                const screen = document.getElementById('screen');
-                screen.scrollTop = 0;
-            }
-        </script>
     </div>
-
 </div>
diff --git a/resources/views/livewire/project/application/previews.blade.php b/resources/views/livewire/project/application/previews.blade.php
index 45d0fba63..6d1eb8614 100644
--- a/resources/views/livewire/project/application/previews.blade.php
+++ b/resources/views/livewire/project/application/previews.blade.php
@@ -57,7 +57,7 @@ class="dark:text-warning">{{ $application->destination->server->name }}</span>.<
         <div class="pb-4">Previews</div>
         <div class="flex flex-wrap gap-6">
             @foreach ($application->previews as $preview)
-                <div class="flex flex-col p-4 bg-coolgray-200">
+                <div class="flex flex-col p-4 dark:bg-coolgray-200">
                     <div class="flex gap-2">PR #{{ data_get($preview, 'pull_request_id') }} |
                         @if (Str::of(data_get($preview, 'status'))->startsWith('running'))
                             <x-status.running :status="data_get($preview, 'status')" />
@@ -78,7 +78,7 @@ class="dark:text-warning">{{ $application->destination->server->name }}</span>.<
                         </a>
                     </div>
                     <div class="flex items-center gap-2 pt-6">
-                        <x-forms.button class="bg-coolgray-500"
+                        <x-forms.button class="dark:bg-coolgray-500"
                             wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
                             @if (data_get($preview, 'status') === 'exited')
                                 Deploy
@@ -88,17 +88,17 @@ class="dark:text-warning">{{ $application->destination->server->name }}</span>.<
                         </x-forms.button>
                         <a
                             href="{{ route('project.application.deployment.index', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
-                            <x-forms.button class="bg-coolgray-500">
+                            <x-forms.button class="dark:bg-coolgray-500">
                                 Deployment Logs
                             </x-forms.button>
                         </a>
                         <a
                             href="{{ route('project.application.logs', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
-                            <x-forms.button class="bg-coolgray-500">
+                            <x-forms.button class="dark:bg-coolgray-500">
                                 Application Logs
                             </x-forms.button>
                         </a>
-                        <x-forms.button isError class="bg-coolgray-500"
+                        <x-forms.button isError class="dark:bg-coolgray-500"
                             wire:click="stop({{ data_get($preview, 'pull_request_id') }})">Delete
                         </x-forms.button>
                     </div>
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 7f8ce9495..ad4e74e0c 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -1,5 +1,38 @@
 <div>
-    <div x-init="$wire.getLogs" id="screen" x-data="{ fullscreen: false, alwaysScroll: false, intervalId: null }">
+    <div x-init="$wire.getLogs" id="screen" x-data="{
+        fullscreen: false,
+        alwaysScroll: false,
+        intervalId: null,
+        makeFullscreen() {
+            this.fullscreen = !this.fullscreen;
+            if (this.fullscreen === false) {
+                this.alwaysScroll = false;
+                clearInterval(this.intervalId);
+            }
+        },
+        toggleScroll() {
+            this.alwaysScroll = !this.alwaysScroll;
+
+            if (this.alwaysScroll) {
+                this.intervalId = setInterval(() => {
+                    const screen = document.getElementById('screen');
+                    const logs = document.getElementById('logs');
+                    if (screen.scrollTop !== logs.scrollHeight) {
+                        screen.scrollTop = logs.scrollHeight;
+                    }
+                }, 100);
+            } else {
+                clearInterval(this.intervalId);
+                this.intervalId = null;
+            }
+        },
+        goTop() {
+            this.alwaysScroll = false;
+            clearInterval(this.intervalId);
+            const screen = document.getElementById('screen');
+            screen.scrollTop = 0;
+        }
+    }">
         <div class="flex items-center gap-2">
             @if ($resource?->type() === 'application')
                 <h3>{{ $container }}</h3>
@@ -24,7 +57,7 @@
             <x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
         </form>
         <div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
-            <div class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto dark:text-white bg-coolgray-100 scrollbar border-coolgray-300"
+            <div class="flex flex-col-reverse w-full px-4 py-2 overflow-y-auto bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
                 :class="fullscreen ? '' : 'max-h-96 border border-solid rounded'">
                 <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4"
                     x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24"
@@ -61,39 +94,5 @@ class="fixed top-4 right-16" x-on:click="toggleScroll"><svg class="icon" viewBox
                 @endif
             </div>
         </div>
-        <script>
-            function makeFullscreen() {
-                this.fullscreen = !this.fullscreen;
-                if (this.fullscreen === false) {
-                    this.alwaysScroll = false;
-                    clearInterval(this.intervalId);
-                }
-            }
-
-            function toggleScroll() {
-                this.alwaysScroll = !this.alwaysScroll;
-
-                if (this.alwaysScroll) {
-                    this.intervalId = setInterval(() => {
-                        const screen = document.getElementById('screen');
-                        const logs = document.getElementById('logs');
-                        if (screen.scrollTop !== logs.scrollHeight) {
-                            screen.scrollTop = logs.scrollHeight;
-                        }
-                    }, 100);
-                } else {
-                    clearInterval(this.intervalId);
-                    this.intervalId = null;
-                }
-            }
-
-            function goTop() {
-                this.alwaysScroll = false;
-                clearInterval(this.intervalId);
-                const screen = document.getElementById('screen');
-                screen.scrollTop = 0;
-            }
-        </script>
     </div>
-
 </div>