diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 07f0e885e..aae13b4c8 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,5 +1,14 @@
 <nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
-    init() {
+    switchWidth() {
+            if (this.full === 'full') {
+                localStorage.removeItem('pageWidth');
+            } else {
+                localStorage.setItem('pageWidth', 'full');
+            }
+            window.location.reload();
+        },
+        init() {
+            this.full = localStorage.getItem('pageWidth');
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                 const userSettings = localStorage.getItem('theme');
                 if (userSettings !== 'system') {
@@ -60,13 +69,16 @@
                     </div>
                 </x-slot:title>
                 <div class="flex flex-col gap-1">
+                    <div class="mb-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Color</div>
                     <button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
                     <button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
                     <button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
+                    <div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Width</div>
+                    <button @click="switchWidth()" class="px-1 dropdown-item-no-padding" x-show="full">Center</button>
+                    <button @click="switchWidth()" class="px-1 dropdown-item-no-padding" x-show="!full">Full</button>
                 </div>
             </x-dropdown>
         </div>
-
     </div>
     <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 744f33739..caed5ff3a 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -5,7 +5,12 @@
         <livewire:layout-popups />
     @endif
     @auth
-        <div x-data="{ open: false }" x-cloak class="mx-auto max-w-7xl">
+        <div x-data="{
+            open: false,
+            init() {
+                this.pageWidth = localStorage.getItem('pageWidth');
+            }
+        }" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80"></div>
                 <div class="fixed inset-0 flex">
@@ -50,7 +55,7 @@
                 </a> --}}
             </div>
 
-            <main class="lg:pl-48" >
+            <main class="lg:pl-48">
                 <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
                     {{ $slot }}
                 </div>