diff --git a/web/src/components/DemoBanner.tsx b/web/src/components/DemoBanner.tsx
index 2f3dd56..a648ae1 100644
--- a/web/src/components/DemoBanner.tsx
+++ b/web/src/components/DemoBanner.tsx
@@ -13,7 +13,7 @@ const DemoBanner: React.FC = () => {
 
   return (
     <div className="z-10 relative flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
-      <div className="w-full max-w-4xl px-4 flex flex-row justify-between items-center gap-x-3">
+      <div className="w-full max-w-6xl px-4 flex flex-row justify-between items-center gap-x-3">
         <span>✨Slash - An open source, self-hosted bookmarks and link sharing platform</span>
         <a
           className="shadow flex flex-row justify-center items-center px-2 py-1 rounded-md text-sm sm:text-base text-white bg-blue-600 hover:bg-blue-700"
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 1887845..2312005 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -19,7 +19,7 @@ const Header: React.FC = () => {
   return (
     <>
       <div className="w-full bg-gray-50 border-b border-b-gray-200">
-        <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
+        <div className="w-full max-w-6xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center shrink mr-2">
             <Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
               <img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
diff --git a/web/src/components/setting/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
index 72f8884..1b4e27a 100644
--- a/web/src/components/setting/AccountSection.tsx
+++ b/web/src/components/setting/AccountSection.tsx
@@ -12,7 +12,7 @@ const AccountSection: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start gap-y-2">
+      <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start gap-y-2">
         <p className="text-base font-semibold leading-6 text-gray-900">Account</p>
         <p className="flex flex-row justify-start items-center mt-2">
           <span className="text-xl">{currentUser.nickname}</span>
diff --git a/web/src/components/setting/UserSection.tsx b/web/src/components/setting/UserSection.tsx
index 49c4d40..fc11391 100644
--- a/web/src/components/setting/UserSection.tsx
+++ b/web/src/components/setting/UserSection.tsx
@@ -20,7 +20,7 @@ const MemberSection = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+      <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
         <div className="w-full">
           <div className="sm:flex sm:items-center">
             <div className="sm:flex-auto">
diff --git a/web/src/components/setting/WorkspaceSection.tsx b/web/src/components/setting/WorkspaceSection.tsx
index 44606e9..d05c4f1 100644
--- a/web/src/components/setting/WorkspaceSection.tsx
+++ b/web/src/components/setting/WorkspaceSection.tsx
@@ -17,7 +17,7 @@ const WorkspaceSection: React.FC = () => {
   };
 
   return (
-    <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+    <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
       <p className="text-base font-semibold leading-6 text-gray-900">Workspace settings</p>
       <div className="w-full flex flex-col justify-start items-start">
         <Checkbox
diff --git a/web/src/pages/Account.tsx b/web/src/pages/Account.tsx
index 4d5ecc3..14453a8 100644
--- a/web/src/pages/Account.tsx
+++ b/web/src/pages/Account.tsx
@@ -11,7 +11,7 @@ const Account: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+      <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
         <p className="text-3xl my-2">{currentUser.nickname}</p>
         <p className="leading-8 flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 9313765..961e718 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -43,7 +43,7 @@ const Home: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-4xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-6xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
         <Navigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index ecaeaec..ca3bb34 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -8,7 +8,7 @@ const Setting: React.FC = () => {
   const isAdmin = currentUser.role === "ADMIN";
 
   return (
-    <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+    <div className="mx-auto max-w-6xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
       <AccountSection />
       {isAdmin && (
         <>