diff --git a/resources/css/app.css b/resources/css/app.css
index c055ca05..9d291a30 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,6 +7,7 @@
     --color-bg-secondary: #1b1c20;
     --color-bg-tertiary: #2A2C32;
     --color-bg-quaternary: #141518;
+    --color-bg-background: #080808;
     --color-text-primary: #ffffff;
     --color-text-secondary: #e3e4e6;
     --color-text-tertiary: #969799;
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 2fc01be7..f1b0f55a 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -55,14 +55,12 @@ const page = usePage<{
 </script>
 
 <template>
-    <div
-        v-bind="$attrs"
-        class="flex flex-wrap bg-default-background text-muted">
+    <div v-bind="$attrs" class="flex flex-wrap bg-background text-muted">
         <div
             :class="{
                 '!flex bg-default-background w-full z-50': showSidebarMenu,
             }"
-            class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[270px] px-2.5 2xl:px-4 py-4 sm:flex flex-col justify-between">
+            class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-4 py-4 sm:flex flex-col justify-between">
             <div>
                 <div
                     class="border-b border-default-background-separator pb-2 flex justify-between">
@@ -183,7 +181,7 @@ const page = usePage<{
                 <UserSettingsIcon></UserSettingsIcon>
             </ul>
         </div>
-        <div class="flex-1 sm:ml-[230px] 2xl:ml-[270px]">
+        <div class="flex-1 sm:ml-[230px] 2xl:ml-[250px]">
             <div
                 class="sm:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">
                 <Bars3Icon
diff --git a/tailwind.config.js b/tailwind.config.js
index e9057ef2..087dab56 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,6 +28,7 @@ export default {
                 'secondary': 'var(--color-bg-secondary)',
                 'tertiary': 'var(--color-bg-tertiary)',
                 'quaternary': 'var(--color-bg-quaternary)',
+                'background': 'var(--color-bg-background)',
                 'text-primary': 'var(--color-text-primary)',
                 'text-secondary': 'var(--color-text-secondary)',
                 'text-tertiary': 'var(--color-text-tertiary)',