diff --git a/web/src/components/setting/AccessTokenSection.tsx b/web/src/components/setting/AccessTokenSection.tsx
index 57429e8..7d88199 100644
--- a/web/src/components/setting/AccessTokenSection.tsx
+++ b/web/src/components/setting/AccessTokenSection.tsx
@@ -45,7 +45,7 @@ const AccessTokenSection = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
+      <div className="w-full 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/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
index fb17d01..90068ff 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-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-2">
+      <div className="w-full 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/MemberSection.tsx b/web/src/components/setting/MemberSection.tsx
index 13164c1..527f570 100644
--- a/web/src/components/setting/MemberSection.tsx
+++ b/web/src/components/setting/MemberSection.tsx
@@ -20,7 +20,7 @@ const MemberSection = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
+      <div className="w-full 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 c8affbd..ac5abd8 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-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
+    <div className="w-full 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/Setting.tsx b/web/src/pages/Setting.tsx
index e0ecac7..69e90fd 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -9,7 +9,7 @@ const Setting: React.FC = () => {
   const isAdmin = currentUser.role === "ADMIN";
 
   return (
-    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start space-y-4">
+    <div className="mx-auto max-w-6xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
       <AccountSection />
       <AccessTokenSection />
       {isAdmin && (