diff --git a/frontend/web/src/components/setting/AccessTokenSection.tsx b/frontend/web/src/components/setting/AccessTokenSection.tsx
index 3f3863f7..47075dd4 100644
--- a/frontend/web/src/components/setting/AccessTokenSection.tsx
+++ b/frontend/web/src/components/setting/AccessTokenSection.tsx
@@ -64,7 +64,7 @@ const AccessTokenSection = () => {
         <div className="w-full">
           <div className="sm:flex sm:items-center">
             <div className="sm:flex-auto">
-              <p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Access Tokens</p>
+              <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Access Tokens</p>
               <p className="mt-2 text-sm text-gray-700 dark:text-gray-600">A list of all access tokens for your account.</p>
             </div>
             <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
diff --git a/frontend/web/src/components/setting/AccountSection.tsx b/frontend/web/src/components/setting/AccountSection.tsx
index 972550b7..baa0a654 100644
--- a/frontend/web/src/components/setting/AccountSection.tsx
+++ b/frontend/web/src/components/setting/AccountSection.tsx
@@ -16,7 +16,7 @@ const AccountSection: React.FC = () => {
   return (
     <>
       <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 dark:text-gray-500">{t("common.account")}</p>
+        <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("common.account")}</p>
         <p className="flex flex-row justify-start items-center mt-2 dark:text-gray-400">
           <span className="text-xl">{currentUser.nickname}</span>
           {isAdmin && <span className="ml-2 bg-blue-600 text-white px-2 leading-6 text-sm rounded-full">Admin</span>}
diff --git a/frontend/web/src/components/setting/MemberSection.tsx b/frontend/web/src/components/setting/MemberSection.tsx
index 03a213a9..7a28495e 100644
--- a/frontend/web/src/components/setting/MemberSection.tsx
+++ b/frontend/web/src/components/setting/MemberSection.tsx
@@ -47,7 +47,7 @@ const MemberSection = () => {
         <div className="w-full">
           <div className="sm:flex sm:items-center">
             <div className="sm:flex-auto">
-              <p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">{t("user.self")}</p>
+              <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("user.self")}</p>
               <p className="mt-2 text-sm text-gray-700 dark:text-gray-600">
                 A list of all the users in your workspace including their nickname, email and role.
               </p>
diff --git a/frontend/web/src/components/setting/PreferenceSection.tsx b/frontend/web/src/components/setting/PreferenceSection.tsx
index 56f1f826..982837ab 100644
--- a/frontend/web/src/components/setting/PreferenceSection.tsx
+++ b/frontend/web/src/components/setting/PreferenceSection.tsx
@@ -58,9 +58,9 @@ const PreferenceSection: React.FC = () => {
   };
 
   return (
-    <>
-      <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 dark:text-gray-500">{t("settings.preference.self")}</p>
+    <div className="w-full flex flex-col sm:flex-row justify-start items-start gap-4 sm:gap-x-16">
+      <p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("settings.preference.self")}</p>
+      <div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
         <div className="w-full flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center gap-x-1">
             <span className="dark:text-gray-400">{t("settings.preference.color-theme")}</span>
@@ -91,7 +91,7 @@ const PreferenceSection: React.FC = () => {
           </Select>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/frontend/web/src/components/setting/WorkspaceSection.tsx b/frontend/web/src/components/setting/WorkspaceSection.tsx
index 1c7d5b89..4b02f0de 100644
--- a/frontend/web/src/components/setting/WorkspaceSection.tsx
+++ b/frontend/web/src/components/setting/WorkspaceSection.tsx
@@ -79,53 +79,55 @@ const WorkspaceSection: React.FC = () => {
   };
 
   return (
-    <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 dark:text-gray-500">{t("settings.workspace.self")}</p>
-      <div className="w-full flex flex-col justify-start items-start">
-        <p className="mt-2 dark:text-gray-400">Instance URL</p>
-        <Input
-          className="w-full mt-2"
-          placeholder="Your instance URL. Using for website SEO. Leave it empty if you don't want cawler to index your website."
-          value={workspaceSetting.instanceUrl}
-          onChange={(event) => handleInstanceUrlChange(event.target.value)}
-        />
-      </div>
-      <div className="w-full flex flex-col justify-start items-start">
-        <p className="mt-2 dark:text-gray-400">{t("settings.workspace.custom-style")}</p>
-        <Textarea
-          className="w-full mt-2"
-          placeholder="* {font-family: ui-monospace Monaco Consolas;}"
-          minRows={2}
-          maxRows={5}
-          value={workspaceSetting.customStyle}
-          onChange={(event) => handleCustomStyleChange(event.target.value)}
-        />
-      </div>
-      <div className="w-full flex flex-col justify-start items-start">
-        <Checkbox
-          label={t("settings.workspace.enable-user-signup.self")}
-          checked={workspaceSetting.enableSignup}
-          onChange={(event) => handleEnableSignUpChange(event.target.checked)}
-        />
-        <p className="mt-2 text-gray-500">{t("settings.workspace.enable-user-signup.description")}</p>
-      </div>
-      <div className="w-full flex flex-row justify-between items-center">
-        <div className="flex flex-row justify-start items-center gap-x-1">
-          <span className="dark:text-gray-400">{t("settings.workspace.default-visibility")}</span>
+    <div className="w-full flex flex-col sm:flex-row justify-start items-start gap-4 sm:gap-x-16">
+      <p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("settings.workspace.self")}</p>
+      <div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
+        <div className="w-full flex flex-col justify-start items-start">
+          <p className="dark:text-gray-400">Instance URL</p>
+          <Input
+            className="w-full mt-2"
+            placeholder="Your instance URL. Using for website SEO. Leave it empty if you don't want cawler to index your website."
+            value={workspaceSetting.instanceUrl}
+            onChange={(event) => handleInstanceUrlChange(event.target.value)}
+          />
+        </div>
+        <div className="w-full flex flex-col justify-start items-start">
+          <p className="mt-2 dark:text-gray-400">{t("settings.workspace.custom-style")}</p>
+          <Textarea
+            className="w-full mt-2"
+            placeholder="* {font-family: ui-monospace Monaco Consolas;}"
+            minRows={2}
+            maxRows={5}
+            value={workspaceSetting.customStyle}
+            onChange={(event) => handleCustomStyleChange(event.target.value)}
+          />
+        </div>
+        <div className="w-full flex flex-col justify-start items-start">
+          <Checkbox
+            label={t("settings.workspace.enable-user-signup.self")}
+            checked={workspaceSetting.enableSignup}
+            onChange={(event) => handleEnableSignUpChange(event.target.checked)}
+          />
+          <p className="mt-2 text-gray-500">{t("settings.workspace.enable-user-signup.description")}</p>
+        </div>
+        <div className="w-full flex flex-row justify-between items-center">
+          <div className="flex flex-row justify-start items-center gap-x-1">
+            <span className="dark:text-gray-400">{t("settings.workspace.default-visibility")}</span>
+          </div>
+          <Select
+            defaultValue={workspaceSetting.defaultVisibility || Visibility.PRIVATE}
+            onChange={(_, value) => handleDefaultVisibilityChange(value as Visibility)}
+          >
+            <Option value={Visibility.PRIVATE}>{t(`shortcut.visibility.private.self`)}</Option>
+            <Option value={Visibility.WORKSPACE}>{t(`shortcut.visibility.workspace.self`)}</Option>
+            <Option value={Visibility.PUBLIC}>{t(`shortcut.visibility.public.self`)}</Option>
+          </Select>
+        </div>
+        <div>
+          <Button variant="outlined" color="neutral" disabled={!allowSave} onClick={handleSaveWorkspaceSetting}>
+            {t("common.save")}
+          </Button>
         </div>
-        <Select
-          defaultValue={workspaceSetting.defaultVisibility || Visibility.PRIVATE}
-          onChange={(_, value) => handleDefaultVisibilityChange(value as Visibility)}
-        >
-          <Option value={Visibility.PRIVATE}>{t(`shortcut.visibility.private.self`)}</Option>
-          <Option value={Visibility.WORKSPACE}>{t(`shortcut.visibility.workspace.self`)}</Option>
-          <Option value={Visibility.PUBLIC}>{t(`shortcut.visibility.public.self`)}</Option>
-        </Select>
-      </div>
-      <div>
-        <Button variant="outlined" color="neutral" disabled={!allowSave} onClick={handleSaveWorkspaceSetting}>
-          {t("common.save")}
-        </Button>
       </div>
     </div>
   );
diff --git a/frontend/web/src/pages/SubscriptionSetting.tsx b/frontend/web/src/pages/SubscriptionSetting.tsx
index d6acfd5d..3bf23bf1 100644
--- a/frontend/web/src/pages/SubscriptionSetting.tsx
+++ b/frontend/web/src/pages/SubscriptionSetting.tsx
@@ -38,9 +38,9 @@ const SubscriptionSetting: React.FC = () => {
   };
 
   return (
-    <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-8 pb-24 flex flex-col justify-start items-start gap-y-12">
+    <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-8 pb-24 flex flex-col justify-start items-start gap-y-12">
       <div className="w-full">
-        <p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Subscription</p>
+        <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Subscription</p>
         <div className="mt-2">
           <span className="text-gray-500 mr-2">Current plan:</span>
           <span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span>
diff --git a/frontend/web/src/pages/UserSetting.tsx b/frontend/web/src/pages/UserSetting.tsx
index 02e004d8..69fd5297 100644
--- a/frontend/web/src/pages/UserSetting.tsx
+++ b/frontend/web/src/pages/UserSetting.tsx
@@ -4,7 +4,7 @@ import AccountSection from "../components/setting/AccountSection";
 
 const Setting: React.FC = () => {
   return (
-    <div className="mx-auto max-w-8xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
+    <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
       <AccountSection />
       <AccessTokenSection />
       <PreferenceSection />
diff --git a/frontend/web/src/pages/WorkspaceSetting.tsx b/frontend/web/src/pages/WorkspaceSetting.tsx
index d783aa50..b7bb7283 100644
--- a/frontend/web/src/pages/WorkspaceSetting.tsx
+++ b/frontend/web/src/pages/WorkspaceSetting.tsx
@@ -26,12 +26,12 @@ const WorkspaceSetting: React.FC = () => {
   }
 
   return (
-    <div className="mx-auto max-w-8xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
+    <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
       <Alert variant="soft" color="warning" startDecorator={<Icon.Info />}>
         You can see the settings items below because you are an Admin.
       </Alert>
       <div className="w-full flex flex-col">
-        <p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Subscription</p>
+        <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Subscription</p>
         <div className="mt-2">
           <span className="text-gray-500 mr-2">Current plan:</span>
           <span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span>