diff --git a/frontend/web/src/components/setting/WorkspaceSection.tsx b/frontend/web/src/components/setting/WorkspaceGeneralSettingSection.tsx
similarity index 98%
rename from frontend/web/src/components/setting/WorkspaceSection.tsx
rename to frontend/web/src/components/setting/WorkspaceGeneralSettingSection.tsx
index 877181f..bb49f07 100644
--- a/frontend/web/src/components/setting/WorkspaceSection.tsx
+++ b/frontend/web/src/components/setting/WorkspaceGeneralSettingSection.tsx
@@ -28,7 +28,7 @@ const convertFileToBase64 = (file: File) =>
     reader.onerror = (error) => reject(error);
   });
 
-const WorkspaceSection = () => {
+const WorkspaceGeneralSettingSection = () => {
   const { t } = useTranslation();
   const workspaceStore = useWorkspaceStore();
   const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>(workspaceStore.setting);
@@ -94,7 +94,7 @@ const WorkspaceSection = () => {
 
   return (
     <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>
+      <p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">General</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="w-full flex flex-col justify-start items-start">
@@ -166,4 +166,4 @@ const WorkspaceSection = () => {
   );
 };
 
-export default WorkspaceSection;
+export default WorkspaceGeneralSettingSection;
diff --git a/frontend/web/src/components/setting/MemberSection.tsx b/frontend/web/src/components/setting/WorkspaceMembersSection.tsx
similarity index 80%
rename from frontend/web/src/components/setting/MemberSection.tsx
rename to frontend/web/src/components/setting/WorkspaceMembersSection.tsx
index b08c3d2..baa40bd 100644
--- a/frontend/web/src/components/setting/MemberSection.tsx
+++ b/frontend/web/src/components/setting/WorkspaceMembersSection.tsx
@@ -9,7 +9,7 @@ import { useUserStore } from "@/stores";
 import { User } from "@/types/proto/api/v1/user_service";
 import { convertRoleFromPb } from "@/utils/user";
 
-const MemberSection = () => {
+const WorkspaceMembersSection = () => {
   const { t } = useTranslation();
   const userStore = useUserStore();
   const [showCreateUserDialog, setShowCreateUserDialog] = useState<boolean>(false);
@@ -43,29 +43,22 @@ const MemberSection = () => {
 
   return (
     <>
-      <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">
-              <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>
-            </div>
-            <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-              <Button
-                variant="outlined"
-                color="neutral"
-                onClick={() => {
-                  setShowCreateUserDialog(true);
-                  setCurrentEditingUser(undefined);
-                }}
-              >
-                {t("user.action.add-user")}
-              </Button>
-            </div>
+      <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">Members</p>
+        <div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
+          <div className="w-full flex justify-end">
+            <Button
+              variant="outlined"
+              color="neutral"
+              onClick={() => {
+                setShowCreateUserDialog(true);
+                setCurrentEditingUser(undefined);
+              }}
+            >
+              {t("user.action.add-user")}
+            </Button>
           </div>
-          <div className="mt-2 flow-root">
+          <div className="w-full flow-root">
             <div className="overflow-x-auto">
               <div className="inline-block border rounded-lg border-gray-300 dark:border-zinc-700 min-w-full align-middle">
                 <table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-700">
@@ -121,4 +114,4 @@ const MemberSection = () => {
   );
 };
 
-export default MemberSection;
+export default WorkspaceMembersSection;
diff --git a/frontend/web/src/pages/WorkspaceSetting.tsx b/frontend/web/src/pages/WorkspaceSetting.tsx
index 8a6cdae..27254f2 100644
--- a/frontend/web/src/pages/WorkspaceSetting.tsx
+++ b/frontend/web/src/pages/WorkspaceSetting.tsx
@@ -1,9 +1,9 @@
-import { Alert, Button } from "@mui/joy";
+import { Alert, Button, Divider } from "@mui/joy";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import Icon from "@/components/Icon";
-import MemberSection from "@/components/setting/MemberSection";
-import WorkspaceSection from "@/components/setting/WorkspaceSection";
+import WorkspaceGeneralSettingSection from "@/components/setting/WorkspaceGeneralSettingSection";
+import WorkspaceMembersSection from "@/components/setting/WorkspaceMembersSection";
 import { useUserStore, useWorkspaceStore } from "@/stores";
 import { stringifyPlanType } from "@/stores/subscription";
 import { Role } from "@/types/proto/api/v1/user_service";
@@ -40,8 +40,10 @@ const WorkspaceSetting = () => {
           </Link>
         </div>
       </div>
-      <MemberSection />
-      <WorkspaceSection />
+      <Divider />
+      <WorkspaceMembersSection />
+      <Divider />
+      <WorkspaceGeneralSettingSection />
     </div>
   );
 };