diff --git a/app/Livewire/MonacoEditor.php b/app/Livewire/MonacoEditor.php
index bd2a3c868..156c63d3a 100644
--- a/app/Livewire/MonacoEditor.php
+++ b/app/Livewire/MonacoEditor.php
@@ -12,26 +12,26 @@ class MonacoEditor extends Component
         'configurationChanged' => '$refresh',
     ];
 
-    public $language;
-
     public function __construct(
-        public ?string $id = null,
-        public ?string $name = null,
-        public ?string $type = 'text',
-        public ?string $monacoContent = null,
-        public ?string $value = null,
-        public ?string $label = null,
-        public ?string $placeholder = null,
-        public bool $required = false,
-        public bool $disabled = false,
-        public bool $readonly = false,
-        public bool $allowTab = false,
-        public bool $spellcheck = false,
-        public ?string $helper = null,
-        public bool $realtimeValidation = false,
-        public bool $allowToPeak = true,
-        public string $defaultClass = 'input scrollbar font-mono',
-        public string $defaultClassInput = 'input'
+        public ?string $id,
+        public ?string $name,
+        public ?string $type,
+        public ?string $monacoContent,
+        public ?string $value,
+        public ?string $label,
+        public ?string $placeholder,
+        public bool $required,
+        public bool $disabled,
+        public bool $readonly,
+        public bool $allowTab,
+        public bool $spellcheck,
+        public ?string $helper,
+        public bool $realtimeValidation,
+        public bool $allowToPeak,
+        public string $defaultClass,
+        public string $defaultClassInput,
+        public ?string $language
+
     ) {
         //
     }
diff --git a/app/Livewire/Project/Shared/Logs.php b/app/Livewire/Project/Shared/Logs.php
index e646f8a26..5af0a6a50 100644
--- a/app/Livewire/Project/Shared/Logs.php
+++ b/app/Livewire/Project/Shared/Logs.php
@@ -59,15 +59,6 @@ public function loadContainers($server_id)
         }
     }
 
-    public function loadMetrics()
-    {
-        return;
-        $server = data_get($this->resource, 'destination.server');
-        if ($server->isFunctional()) {
-            $this->cpu = $server->getCpuMetrics();
-        }
-    }
-
     public function mount()
     {
         try {
@@ -122,7 +113,6 @@ public function mount()
 
             }
 
-            $this->loadMetrics();
         } catch (\Exception $e) {
             return handleError($e, $this);
         }
diff --git a/app/View/Components/ApexCharts.php b/app/View/Components/ApexCharts.php
deleted file mode 100644
index 6b86055d9..000000000
--- a/app/View/Components/ApexCharts.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-namespace App\View\Components;
-
-use Closure;
-use Illuminate\Contracts\View\View;
-use Illuminate\View\Component;
-
-class ApexCharts extends Component
-{
-    public string $chartId;
-
-    public $seriesData;
-
-    public $categories;
-
-    public $seriesName;
-
-    public function __construct($chartId, $seriesData, $categories, $seriesName = '')
-    {
-        $this->chartId = $chartId;
-        $this->seriesData = $seriesData;
-        $this->categories = $categories;
-        $this->seriesName = $seriesName ?? 'Series';
-    }
-
-    /**
-     * Get the view / contents that represent the component.
-     */
-    public function render(): View|Closure|string
-    {
-        return view('components.apex-charts');
-    }
-}
diff --git a/resources/css/app.css b/resources/css/app.css
index 42496cffe..a037def51 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -4,7 +4,6 @@
 
 html,
 body {
-    zoom: 0.95;
     @apply h-full bg-neutral-50 text-neutral-800 dark:bg-base dark:text-neutral-400;
 }
 
@@ -12,6 +11,18 @@ body {
     @apply text-sm antialiased scrollbar;
 }
 
+.apexcharts-tooltip {
+    @apply dark:text-white dark:border-coolgray-300 dark:bg-coolgray-200 shadow-none !important;
+}
+
+.apexcharts-tooltip-title {
+    @apply hidden !important;
+}
+
+.apexcharts-xaxistooltip {
+    @apply hidden !important;
+}
+
 .input,
 .select {
     @apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300;
@@ -116,15 +127,19 @@ .alert-success {
 .alert-error {
     @apply flex items-center gap-2 text-error;
 }
+
 .tag {
     @apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
 }
+
 .add-tag {
     @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
 }
+
 .dropdown-item {
     @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
+
 .dropdown-item-no-padding {
     @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
@@ -200,12 +215,15 @@ .kbd-custom {
 .box {
     @apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
 }
+
 .box-boarding {
     @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
 }
+
 .box-without-bg {
     @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-black;
 }
+
 .box-without-bg-without-border {
     @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
 }
diff --git a/resources/views/components/forms/monaco-editor.blade.php b/resources/views/components/forms/monaco-editor.blade.php
index 880e0759b..d3793785b 100644
--- a/resources/views/components/forms/monaco-editor.blade.php
+++ b/resources/views/components/forms/monaco-editor.blade.php
@@ -1,7 +1,5 @@
 <div wire:key="{{ rand() }}" class="coolify-monaco-editor flex-1">
-    <div
-        x-ref="monacoRef"
-        x-data="{
+    <div x-ref="monacoRef" x-data="{
         monacoContent: @entangle($id),
         monacoLanguage: '',
         monacoPlaceholder: true,
@@ -25,383 +23,382 @@
             this.monacoPlaceholder = value === '';
         },
         monacoEditorFocus() {
-            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId }}));
+            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
         },
         monacoEditorAddLoaderScriptToHead() {
             let script = document.createElement('script');
             script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/loader.min.js';
             document.head.appendChild(script);
         }
-    }"
-        x-modelable="monacoContent"
-    >
-        <div
-            x-cloak x-init="
-        if(typeof _amdLoaderGlobal == 'undefined') {
+    }" x-modelable="monacoContent">
+        <div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined') {
             monacoEditorAddLoaderScriptToHead();
         }
+        checkTheme();
         let monacoLoaderInterval = setInterval(() => {
-            if(typeof _amdLoaderGlobal !== 'undefined') {
-                require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }});
+            if (typeof _amdLoaderGlobal !== 'undefined') {
+                require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' } });
                 let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/base/worker/workerMain.min.js');`], { type: 'text/javascript' }));
                 window.MonacoEnvironment = { getWorkerUrl: () => proxy };
                 require(['vs/editor/editor.main'], () => {
                     monaco.editor.defineTheme('blackboard', {
-                    'base': 'vs-dark',
-                    'inherit': true,
-                    'rules': [
-                    {
-                    'background': '24292e',
-                    'token': ''
-                    },
-                    {
-                    'foreground': '959da5',
-                    'token': 'comment'
-                    },
-                    {
-                    'foreground': '959da5',
-                    'token': 'punctuation.definition.comment'
-                    },
-                    {
-                    'foreground': '959da5',
-                    'token': 'string.comment'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'constant'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'entity.name.constant'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'variable.other.constant'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'variable.language'
-                    },
-                    {
-                    'foreground': 'b392f0',
-                    'token': 'entity'
-                    },
-                    {
-                    'foreground': 'b392f0',
-                    'token': 'entity.name'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'token': 'variable.parameter.function'
-                    },
-                    {
-                    'foreground': '7bcc72',
-                    'token': 'entity.name.tag'
-                    },
-                    {
-                    'foreground': 'ea4a5a',
-                    'token': 'keyword'
-                    },
-                    {
-                    'foreground': 'ea4a5a',
-                    'token': 'storage'
-                    },
-                    {
-                    'foreground': 'ea4a5a',
-                    'token': 'storage.type'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'token': 'storage.modifier.package'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'token': 'storage.modifier.import'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'token': 'storage.type.java'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'punctuation.definition.string'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string punctuation.section.embedded source'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'support'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'meta.property-name'
-                    },
-                    {
-                    'foreground': 'fb8532',
-                    'token': 'variable'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'token': 'variable.other'
-                    },
-                    {
-                    'foreground': 'd73a49',
-                    'fontStyle': 'bold italic underline',
-                    'token': 'invalid.broken'
-                    },
-                    {
-                    'foreground': 'd73a49',
-                    'fontStyle': 'bold italic underline',
-                    'token': 'invalid.deprecated'
-                    },
-                    {
-                    'foreground': 'fafbfc',
-                    'background': 'd73a49',
-                    'fontStyle': 'italic underline',
-                    'token': 'invalid.illegal'
-                    },
-                    {
-                    'foreground': 'fafbfc',
-                    'background': 'd73a49',
-                    'fontStyle': 'italic underline',
-                    'token': 'carriage-return'
-                    },
-                    {
-                    'foreground': 'd73a49',
-                    'fontStyle': 'bold italic underline',
-                    'token': 'invalid.unimplemented'
-                    },
-                    {
-                    'foreground': 'd73a49',
-                    'token': 'message.error'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'token': 'string source'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'string variable'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'source.regexp'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string.regexp'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string.regexp.character-class'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string.regexp constant.character.escape'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string.regexp source.ruby.embedded'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'token': 'string.regexp string.regexp.arbitrary-repitition'
-                    },
-                    {
-                    'foreground': '7bcc72',
-                    'fontStyle': 'bold',
-                    'token': 'string.regexp constant.character.escape'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'support.constant'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'support.variable'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'meta.module-reference'
-                    },
-                    {
-                    'foreground': 'fb8532',
-                    'token': 'markup.list'
-                    },
-                    {
-                    'foreground': '0366d6',
-                    'fontStyle': 'bold',
-                    'token': 'markup.heading'
-                    },
-                    {
-                    'foreground': '0366d6',
-                    'fontStyle': 'bold',
-                    'token': 'markup.heading entity.name'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'markup.quote'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'fontStyle': 'italic',
-                    'token': 'markup.italic'
-                    },
-                    {
-                    'foreground': 'f6f8fa',
-                    'fontStyle': 'bold',
-                    'token': 'markup.bold'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'markup.raw'
-                    },
-                    {
-                    'foreground': 'b31d28',
-                    'background': 'ffeef0',
-                    'token': 'markup.deleted'
-                    },
-                    {
-                    'foreground': 'b31d28',
-                    'background': 'ffeef0',
-                    'token': 'meta.diff.header.from-file'
-                    },
-                    {
-                    'foreground': 'b31d28',
-                    'background': 'ffeef0',
-                    'token': 'punctuation.definition.deleted'
-                    },
-                    {
-                    'foreground': '176f2c',
-                    'background': 'f0fff4',
-                    'token': 'markup.inserted'
-                    },
-                    {
-                    'foreground': '176f2c',
-                    'background': 'f0fff4',
-                    'token': 'meta.diff.header.to-file'
-                    },
-                    {
-                    'foreground': '176f2c',
-                    'background': 'f0fff4',
-                    'token': 'punctuation.definition.inserted'
-                    },
-                    {
-                    'foreground': 'b08800',
-                    'background': 'fffdef',
-                    'token': 'markup.changed'
-                    },
-                    {
-                    'foreground': 'b08800',
-                    'background': 'fffdef',
-                    'token': 'punctuation.definition.changed'
-                    },
-                    {
-                    'foreground': '2f363d',
-                    'background': '959da5',
-                    'token': 'markup.ignored'
-                    },
-                    {
-                    'foreground': '2f363d',
-                    'background': '959da5',
-                    'token': 'markup.untracked'
-                    },
-                    {
-                    'foreground': 'b392f0',
-                    'fontStyle': 'bold',
-                    'token': 'meta.diff.range'
-                    },
-                    {
-                    'foreground': 'c8e1ff',
-                    'token': 'meta.diff.header'
-                    },
-                    {
-                    'foreground': '0366d6',
-                    'fontStyle': 'bold',
-                    'token': 'meta.separator'
-                    },
-                    {
-                    'foreground': '0366d6',
-                    'token': 'meta.output'
-                    },
-                    {
-                    'foreground': 'ffeef0',
-                    'token': 'brackethighlighter.tag'
-                    },
-                    {
-                    'foreground': 'ffeef0',
-                    'token': 'brackethighlighter.curly'
-                    },
-                    {
-                    'foreground': 'ffeef0',
-                    'token': 'brackethighlighter.round'
-                    },
-                    {
-                    'foreground': 'ffeef0',
-                    'token': 'brackethighlighter.square'
-                    },
-                    {
-                    'foreground': 'ffeef0',
-                    'token': 'brackethighlighter.angle'
-                    },
-                    {
-                    'foreground': 'ffeef0',
-                    'token': 'brackethighlighter.quote'
-                    },
-                    {
-                    'foreground': 'd73a49',
-                    'token': 'brackethighlighter.unmatched'
-                    },
-                    {
-                    'foreground': 'd73a49',
-                    'token': 'sublimelinter.mark.error'
-                    },
-                    {
-                    'foreground': 'fb8532',
-                    'token': 'sublimelinter.mark.warning'
-                    },
-                    {
-                    'foreground': '6a737d',
-                    'token': 'sublimelinter.gutter-mark'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'fontStyle': 'underline',
-                    'token': 'constant.other.reference.link'
-                    },
-                    {
-                    'foreground': '79b8ff',
-                    'fontStyle': 'underline',
-                    'token': 'string.other.link'
-                    }
-                    ],
-                    'colors': {
-                    'editor.foreground': '#f6f8fa',
-                    'editor.background': '#24292e',
-                    'editor.selectionBackground': '#4c2889',
-                    'editor.inactiveSelectionBackground': '#444d56',
-                    'editor.lineHighlightBackground': '#444d56',
-                    'editorCursor.foreground': '#ffffff',
-                    'editorWhitespace.foreground': '#6a737d',
-                    'editorIndentGuide.background': '#6a737d',
-                    'editorIndentGuide.activeBackground': '#f6f8fa',
-                    'editor.selectionHighlightBorder': '#444d56'
+                        'base': 'vs-dark',
+                        'inherit': true,
+                        'rules': [{
+                                'background': editorBackground,
+                                'token': ''
+                            },
+                            {
+                                'foreground': '959da5',
+                                'token': 'comment'
+                            },
+                            {
+                                'foreground': '959da5',
+                                'token': 'punctuation.definition.comment'
+                            },
+                            {
+                                'foreground': '959da5',
+                                'token': 'string.comment'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'constant'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'entity.name.constant'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'variable.other.constant'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'variable.language'
+                            },
+                            {
+                                'foreground': 'b392f0',
+                                'token': 'entity'
+                            },
+                            {
+                                'foreground': 'b392f0',
+                                'token': 'entity.name'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'token': 'variable.parameter.function'
+                            },
+                            {
+                                'foreground': '7bcc72',
+                                'token': 'entity.name.tag'
+                            },
+                            {
+                                'foreground': 'ea4a5a',
+                                'token': 'keyword'
+                            },
+                            {
+                                'foreground': 'ea4a5a',
+                                'token': 'storage'
+                            },
+                            {
+                                'foreground': 'ea4a5a',
+                                'token': 'storage.type'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'token': 'storage.modifier.package'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'token': 'storage.modifier.import'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'token': 'storage.type.java'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'punctuation.definition.string'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string punctuation.section.embedded source'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'support'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'meta.property-name'
+                            },
+                            {
+                                'foreground': 'fb8532',
+                                'token': 'variable'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'token': 'variable.other'
+                            },
+                            {
+                                'foreground': 'd73a49',
+                                'fontStyle': 'bold italic underline',
+                                'token': 'invalid.broken'
+                            },
+                            {
+                                'foreground': 'd73a49',
+                                'fontStyle': 'bold italic underline',
+                                'token': 'invalid.deprecated'
+                            },
+                            {
+                                'foreground': 'fafbfc',
+                                'background': 'd73a49',
+                                'fontStyle': 'italic underline',
+                                'token': 'invalid.illegal'
+                            },
+                            {
+                                'foreground': 'fafbfc',
+                                'background': 'd73a49',
+                                'fontStyle': 'italic underline',
+                                'token': 'carriage-return'
+                            },
+                            {
+                                'foreground': 'd73a49',
+                                'fontStyle': 'bold italic underline',
+                                'token': 'invalid.unimplemented'
+                            },
+                            {
+                                'foreground': 'd73a49',
+                                'token': 'message.error'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'token': 'string source'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'string variable'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'source.regexp'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string.regexp'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string.regexp.character-class'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string.regexp constant.character.escape'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string.regexp source.ruby.embedded'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'token': 'string.regexp string.regexp.arbitrary-repitition'
+                            },
+                            {
+                                'foreground': '7bcc72',
+                                'fontStyle': 'bold',
+                                'token': 'string.regexp constant.character.escape'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'support.constant'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'support.variable'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'meta.module-reference'
+                            },
+                            {
+                                'foreground': 'fb8532',
+                                'token': 'markup.list'
+                            },
+                            {
+                                'foreground': '0366d6',
+                                'fontStyle': 'bold',
+                                'token': 'markup.heading'
+                            },
+                            {
+                                'foreground': '0366d6',
+                                'fontStyle': 'bold',
+                                'token': 'markup.heading entity.name'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'markup.quote'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'fontStyle': 'italic',
+                                'token': 'markup.italic'
+                            },
+                            {
+                                'foreground': 'f6f8fa',
+                                'fontStyle': 'bold',
+                                'token': 'markup.bold'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'markup.raw'
+                            },
+                            {
+                                'foreground': 'b31d28',
+                                'background': 'ffeef0',
+                                'token': 'markup.deleted'
+                            },
+                            {
+                                'foreground': 'b31d28',
+                                'background': 'ffeef0',
+                                'token': 'meta.diff.header.from-file'
+                            },
+                            {
+                                'foreground': 'b31d28',
+                                'background': 'ffeef0',
+                                'token': 'punctuation.definition.deleted'
+                            },
+                            {
+                                'foreground': '176f2c',
+                                'background': 'f0fff4',
+                                'token': 'markup.inserted'
+                            },
+                            {
+                                'foreground': '176f2c',
+                                'background': 'f0fff4',
+                                'token': 'meta.diff.header.to-file'
+                            },
+                            {
+                                'foreground': '176f2c',
+                                'background': 'f0fff4',
+                                'token': 'punctuation.definition.inserted'
+                            },
+                            {
+                                'foreground': 'b08800',
+                                'background': 'fffdef',
+                                'token': 'markup.changed'
+                            },
+                            {
+                                'foreground': 'b08800',
+                                'background': 'fffdef',
+                                'token': 'punctuation.definition.changed'
+                            },
+                            {
+                                'foreground': '2f363d',
+                                'background': '959da5',
+                                'token': 'markup.ignored'
+                            },
+                            {
+                                'foreground': '2f363d',
+                                'background': '959da5',
+                                'token': 'markup.untracked'
+                            },
+                            {
+                                'foreground': 'b392f0',
+                                'fontStyle': 'bold',
+                                'token': 'meta.diff.range'
+                            },
+                            {
+                                'foreground': 'c8e1ff',
+                                'token': 'meta.diff.header'
+                            },
+                            {
+                                'foreground': '0366d6',
+                                'fontStyle': 'bold',
+                                'token': 'meta.separator'
+                            },
+                            {
+                                'foreground': '0366d6',
+                                'token': 'meta.output'
+                            },
+                            {
+                                'foreground': 'ffeef0',
+                                'token': 'brackethighlighter.tag'
+                            },
+                            {
+                                'foreground': 'ffeef0',
+                                'token': 'brackethighlighter.curly'
+                            },
+                            {
+                                'foreground': 'ffeef0',
+                                'token': 'brackethighlighter.round'
+                            },
+                            {
+                                'foreground': 'ffeef0',
+                                'token': 'brackethighlighter.square'
+                            },
+                            {
+                                'foreground': 'ffeef0',
+                                'token': 'brackethighlighter.angle'
+                            },
+                            {
+                                'foreground': 'ffeef0',
+                                'token': 'brackethighlighter.quote'
+                            },
+                            {
+                                'foreground': 'd73a49',
+                                'token': 'brackethighlighter.unmatched'
+                            },
+                            {
+                                'foreground': 'd73a49',
+                                'token': 'sublimelinter.mark.error'
+                            },
+                            {
+                                'foreground': 'fb8532',
+                                'token': 'sublimelinter.mark.warning'
+                            },
+                            {
+                                'foreground': '6a737d',
+                                'token': 'sublimelinter.gutter-mark'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'fontStyle': 'underline',
+                                'token': 'constant.other.reference.link'
+                            },
+                            {
+                                'foreground': '79b8ff',
+                                'fontStyle': 'underline',
+                                'token': 'string.other.link'
+                            }
+                        ],
+                        'colors': {
+                            'editor.foreground': '#f6f8fa',
+                            'editor.background': editorBackground,
+                            'editor.selectionBackground': '#4c2889',
+                            'editor.inactiveSelectionBackground': '#444d56',
+                            'editor.lineHighlightBackground': '#444d56',
+                            'editorCursor.foreground': '#ffffff',
+                            'editorWhitespace.foreground': '#6a737d',
+                            'editorIndentGuide.background': '#6a737d',
+                            'editorIndentGuide.activeBackground': '#f6f8fa',
+                            'editor.selectionHighlightBorder': '#444d56'
                         }
                     });
 
                     const editor = monaco.editor.create($refs.monacoEditorElement, {
                         value: monacoContent,
-                        theme: 'blackboard',
+                        theme: editorTheme,
+                        wordWrap: 'on',
+                        readOnly: '{{ $readonly ?? false }}',
+                        minimap: { enabled: false },
                         fontSize: monacoFontSize,
                         lineNumbersMinChars: 3,
                         automaticLayout: true,
-                        language: '{{$language}}'
+                        language: '{{ $language }}'
 
                     });
 
@@ -427,25 +424,14 @@
                 monacoLoader = false;
 
             }
-        }, 5);
-        "
-             :id="monacoId">
+        }, 5);" :id="monacoId">
         </div>
-        <div x-show="monacoLoader"
-             class="absolute inset-0 z-20 flex items-center justify-center w-full h-full duration-1000 ease-out">
-            <svg class="w-4 h-4 text-gray-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
-                 viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-        </div>
-        <div x-show="!monacoLoader" class="relative z-10 w-full h-full">
+        <div class="relative z-10 w-full h-full">
             <div x-ref="monacoEditorElement" class="w-full h-96 text-md"></div>
             <div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
-                 :style="'font-size: ' + monacoFontSize"
-                 class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
-                 x-text="monacoPlaceholderText"></div>
+                :style="'font-size: ' + monacoFontSize"
+                class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
+                x-text="monacoPlaceholderText"></div>
         </div>
     </div>
 </div>
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index 7f7457c4f..24226ecdb 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -24,57 +24,53 @@ function handleKeydown(e) {
             @endif
         </label>
     @endif
-    @if($useMonacoEditor)
-        <x-forms.monaco-editor
-            id="{{ $id }}"
-            language="{{$monacoEditorLanguage }}"
-            name="{{ $name }}"
-            name="{{ $id }}"
-            model="{{ $value ?? $id }}"
-            wire:model="{{ $value ?? $id }}"
-            label="dockerfile"
-        />
+    @if ($useMonacoEditor)
+        <x-forms.monaco-editor id="{{ $id }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
+            name="{{ $id }}" model="{{ $value ?? $id }}" wire:model="{{ $value ?? $id }}"
+            readonly="{{ $readonly }}" label="dockerfile" />
     @else
-    @if ($type === 'password')
-        <div class="relative" x-data="{ type: 'password' }">
-            @if ($allowToPeak)
-                <div x-on:click="changePasswordFieldType"
-                    class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:dark:text-white">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
-                    </svg>
-                </div>
-            @endif
-            <input x-cloak x-show="type === 'password'" value="{{ $value }}"
-                {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
-                @if ($id !== 'null') wire:model={{ $id }} @endif
-                wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
-                wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
-                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
-                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
-                aria-placeholder="{{ $attributes->get('placeholder') }}">
-            <textarea x-cloak x-show="type !== 'password'" placeholder="{{ $placeholder }}"
-                {{ $attributes->merge(['class' => $defaultClass]) }}
-                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
+        @if ($type === 'password')
+            <div class="relative" x-data="{ type: 'password' }">
+                @if ($allowToPeak)
+                    <div x-on:click="changePasswordFieldType"
+                        class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer hover:dark:text-white">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+                            <path
+                                d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+                        </svg>
+                    </div>
+                @endif
+                <input x-cloak x-show="type === 'password'" value="{{ $value }}"
+                    {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
+                    @if ($id !== 'null') wire:model={{ $id }} @endif
+                    wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
+                    wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
+                    type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
+                    name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                    aria-placeholder="{{ $attributes->get('placeholder') }}">
+                <textarea x-cloak x-show="type !== 'password'" placeholder="{{ $placeholder }}"
+                    {{ $attributes->merge(['class' => $defaultClass]) }}
+                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
                 @else
             wire:model={{ $value ?? $id }}
                      wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
-                @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
-                name="{{ $name }}" name={{ $id }}></textarea>
+                    @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
+                    name="{{ $name }}" name={{ $id }}></textarea>
 
-        </div>
-    @else
-        <textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}" {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
-            @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
+            </div>
+        @else
+            <textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
+                {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
+                @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
     wire:model={{ $value ?? $id }}
     wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
-            @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
-            name="{{ $name }}" name={{ $id }}></textarea>
-    @endif
+                @disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
+                name="{{ $name }}" name={{ $id }}></textarea>
+        @endif
     @endif
     @error($id)
         <label class="label">
diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index 1b2628db1..df45b19b4 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -63,15 +63,21 @@
             let theme = localStorage.theme
             let baseColor = '#FCD452'
             let textColor = '#ffffff'
+            let editorBackground = '#181818'
+            let editorTheme = 'blackboard'
 
             function checkTheme() {
                 theme = localStorage.theme
                 if (theme == 'dark') {
                     baseColor = '#FCD452'
                     textColor = '#ffffff'
+                    editorBackground = '#181818'
+                    editorTheme = 'blackboard'
                 } else {
                     baseColor = 'black'
                     textColor = '#000000'
+                    editorBackground = '#ffffff'
+                    editorTheme = null
                 }
             }
             @auth
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index 89e8d44fe..c19a9c7e8 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -73,7 +73,7 @@
                         <option value="www">Redirect to www.</option>
                         <option value="non-www">Redirect to non-www.</option>
                     </x-forms.select>
-                    <x-modal-confirmation action="set_redirect" >
+                    <x-modal-confirmation action="set_redirect">
                         <x-slot:customButton>
                             <div class="w-[7.2rem]">Set Direction</div>
                         </x-slot:customButton>
@@ -231,10 +231,12 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                 @if ($application->settings->is_raw_compose_deployment_enabled)
                     <x-forms.textarea rows="10" readonly id="application.docker_compose_raw"
                         label="Docker Compose Content (applicationId: {{ $application->id }})"
-                        helper="You need to modify the docker compose file." />
+                        helper="You need to modify the docker compose file." monacoEditorLanguage="yaml"
+                        useMonacoEditor />
                 @else
                     <x-forms.textarea rows="10" readonly id="application.docker_compose"
-                        label="Docker Compose Content" helper="You need to modify the docker compose file." />
+                        label="Docker Compose Content" helper="You need to modify the docker compose file."
+                        monacoEditorLanguage="yaml" useMonacoEditor />
                 @endif
                 <div class="w-72">
                     <x-forms.checkbox label="Escape special characters in labels?"
@@ -246,7 +248,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
             @endif
 
             @if ($application->dockerfile)
-                <x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile" useMonacoEditor="{{true}}" rows="6"> </x-forms.textarea>
+                <x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile"
+                    useMonacoEditor rows="6"> </x-forms.textarea>
             @endif
             @if ($application->build_pack !== 'dockercompose')
                 <h3 class="pt-8">Network</h3>
@@ -263,7 +266,9 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                             helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host." />
                     @endif
                 </div>
-                <x-forms.textarea label="Container Labels" rows="15" id="customLabels"></x-forms.textarea>
+
+                <x-forms.textarea label="Container Labels" rows="15" id="customLabels"
+                    monacoEditorLanguage="ini" useMonacoEditor></x-forms.textarea>
                 <div class="w-72">
                     <x-forms.checkbox label="Escape special characters in labels?"
                         helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
diff --git a/resources/views/livewire/project/new/docker-compose.blade.php b/resources/views/livewire/project/new/docker-compose.blade.php
index 16bfab6b0..661e11b7e 100644
--- a/resources/views/livewire/project/new/docker-compose.blade.php
+++ b/resources/views/livewire/project/new/docker-compose.blade.php
@@ -6,7 +6,8 @@
             <h2>Docker Compose</h2>
             <x-forms.button type="submit">Save</x-forms.button>
         </div>
-        <x-forms.textarea useMonacoEditor="{{true}}" monacoEditorLanguage="yaml" label="Docker Compose file" rows="20" id="dockerComposeRaw"
+        <x-forms.textarea useMonacoEditor monacoEditorLanguage="yaml" label="Docker Compose file" rows="20"
+            id="dockerComposeRaw"
             placeholder='services:
   ghost:
     documentation: https://ghost.org/docs/config
diff --git a/resources/views/livewire/project/shared/logs.blade.php b/resources/views/livewire/project/shared/logs.blade.php
index 6b20d716b..10095df8b 100644
--- a/resources/views/livewire/project/shared/logs.blade.php
+++ b/resources/views/livewire/project/shared/logs.blade.php
@@ -60,78 +60,4 @@
             @endforelse
         </div>
     @endif
-    {{-- <section x-data="apex_app" class="container p-5 mx-auto my-20 bg-white drop-shadow-xl rounded-xl">
-        <div class="w-full" x-ref="chart"></div>
-    </section>
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script>
-        document.addEventListener("alpine:init", () => {
-            Alpine.data("apex_app", () => ({
-                data: @js($cpu),
-                init() {
-                    let chart = new ApexCharts(this.$refs.chart, this.options);
-                    chart.render();
-                    this.$watch("data", () => {
-                        chart.updateOptions(this.options);
-                    });
-                },
-
-                get options() {
-                    return {
-                        colors: [function({
-                            value,
-                            seriesIndex,
-                            w
-                        }) {
-                            if (value < 55) {
-                                return '#7E36AF'
-                            } else {
-                                return '#D9534F'
-                            }
-                        }, function({
-                            value,
-                            seriesIndex,
-                            w
-                        }) {
-                            if (value < 111) {
-                                return '#7E36AF'
-                            } else {
-                                return '#D9534F'
-                            }
-                        }],
-
-                        xaxis: {
-                            type: 'datetime'
-                        },
-                        dataLabels: {
-                            enabled: false
-                        },
-                        series: [{
-                            name: "Series name",
-                            data: this.data
-                        }],
-                        tooltip: {
-                            enabled: true
-                        },
-                        chart: {
-                            stroke: {
-                            curve: 'smooth',
-                        },
-                            height: 500,
-                            width: "100%",
-                            type: "line",
-                            toolbar: {
-                                show: true
-                            },
-                            animations: {
-                                initialAnimation: {
-                                    enabled: false
-                                }
-                            }
-                        },
-                    };
-                }
-            }));
-        });
-    </script> --}}
 </div>
diff --git a/resources/views/livewire/project/shared/metrics.blade.php b/resources/views/livewire/project/shared/metrics.blade.php
index 95ef9ced7..91767d5d6 100644
--- a/resources/views/livewire/project/shared/metrics.blade.php
+++ b/resources/views/livewire/project/shared/metrics.blade.php
@@ -40,15 +40,15 @@ class="pt-5">
                             id: '{!! $chartId !!}-cpu',
                             type: 'area',
                             toolbar: {
-                                show: false,
+                                show: true,
                                 tools: {
-                                    download: true,
+                                    download: false,
                                     selection: false,
-                                    zoom: false,
+                                    zoom: true,
                                     zoomin: false,
                                     zoomout: false,
                                     pan: false,
-                                    reset: false
+                                    reset: true
                                 },
                             },
                             animations: {
@@ -77,6 +77,7 @@ class="pt-5">
                             type: 'datetime',
                         },
                         series: [{
+                            name: "CPU %",
                             data: []
                         }],
                         noData: {
@@ -86,7 +87,10 @@ class="pt-5">
                             }
                         },
                         tooltip: {
-                            enabled: false,
+                            enabled: true,
+                            marker: {
+                                show: false,
+                            }
                         },
                         legend: {
                             show: false
@@ -145,15 +149,15 @@ class="pt-5">
                             id: '{!! $chartId !!}-memory',
                             type: 'area',
                             toolbar: {
-                                show: false,
+                                show: true,
                                 tools: {
-                                    download: true,
+                                    download: false,
                                     selection: false,
-                                    zoom: false,
+                                    zoom: true,
                                     zoomin: false,
                                     zoomout: false,
                                     pan: false,
-                                    reset: false
+                                    reset: true
                                 },
                             },
                             animations: {
@@ -188,6 +192,7 @@ class="pt-5">
                             }
                         },
                         series: [{
+                            name: "Memory (MB)",
                             data: []
                         }],
                         noData: {
@@ -197,7 +202,10 @@ class="pt-5">
                             }
                         },
                         tooltip: {
-                            enabled: false,
+                            enabled: true,
+                            marker: {
+                                show: false,
+                            }
                         },
                         legend: {
                             show: false
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index ab485bd9f..3d346e641 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -22,15 +22,15 @@
                 id: '{!! $chartId !!}-cpu',
                 type: 'area',
                 toolbar: {
-                    show: false,
+                    show: true,
                     tools: {
-                        download: true,
+                        download: false,
                         selection: false,
-                        zoom: false,
+                        zoom: true,
                         zoomin: false,
                         zoomout: false,
                         pan: false,
-                        reset: false
+                        reset: true
                     },
                 },
                 animations: {
@@ -59,6 +59,7 @@
                 type: 'datetime',
             },
             series: [{
+                name: 'CPU %',
                 data: []
             }],
             noData: {
@@ -68,7 +69,10 @@
                 }
             },
             tooltip: {
-                enabled: false,
+                enabled: true,
+                marker: {
+                    show: false,
+                }
             },
             legend: {
                 show: false
@@ -129,15 +133,15 @@
                     id: '{!! $chartId !!}-memory',
                     type: 'area',
                     toolbar: {
-                        show: false,
+                        show: true,
                         tools: {
-                            download: true,
+                            download: false,
                             selection: false,
-                            zoom: false,
+                            zoom: true,
                             zoomin: false,
                             zoomout: false,
                             pan: false,
-                            reset: false
+                            reset: true
                         },
                     },
                     animations: {
@@ -172,6 +176,7 @@
                     }
                 },
                 series: [{
+                    name: "Memory (MB)",
                     data: []
                 }],
                 noData: {
@@ -181,7 +186,10 @@
                     }
                 },
                 tooltip: {
-                    enabled: false,
+                    enabled: true,
+                    marker: {
+                        show: false,
+                    }
                 },
                 legend: {
                     show: false