diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx
index 514f1f25..1a698c83 100644
--- a/apps/web/src/components/Layout.tsx
+++ b/apps/web/src/components/Layout.tsx
@@ -319,7 +319,7 @@ export default function Layout({
       />
 
       {isSideBarOpen && (
-        <div className="flex flex-col h-full bg-ceramic-50/60 min-w-[33%] max-w-[33%] lg:min-w-[25%] lg:max-w-[25%] overflow-auto border-r border-gray-200">
+        <div className="flex flex-col h-full bg-ceramic-50/60 min-w-[360px] max-w-[360px] 3xl:min-w-[400px] 3xl:max-w-[400px] overflow-auto border-r border-gray-200">
           <div className="flex items-center justify-between pt-0.5 pl-4 pr-5">
             <div className="font-trap tracking-tight text-2xl antialiased text-gray-800 flex items-center gap-x-1 scale-90">
               <SparklesIcon className="h-4 w-4" />
@@ -476,7 +476,7 @@ export default function Layout({
         className={clsx(
           `flex flex-col h-screen w-full ${syne.className} relative`,
           isSideBarOpen
-            ? `md:max-w-[67%] lg:max-w-[75%]`
+            ? `max-w-[calc(100%-360px)] 3xl:max-w-[calc(100%-400px)]`
             : `md:max-w-[100%] lg:max-w-[100%]`
         )}
       >
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 01b1c952..ac7be754 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -14,6 +14,9 @@ const config: Config = {
   },
   theme: {
     extend: {
+      screens: {
+        '3xl': '1920px',
+      },
       transitionProperty: {
         mw: 'max-width',
         m: 'margin',