diff --git a/web/src/components/SettingDialog.tsx b/web/src/components/SettingDialog.tsx
index 393515c1..e9da0b2d 100644
--- a/web/src/components/SettingDialog.tsx
+++ b/web/src/components/SettingDialog.tsx
@@ -66,7 +66,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
                 onClick={() => handleSectionSelectorItemClick("system")}
                 className={`section-item ${state.selectedSection === "system" ? "selected" : ""}`}
               >
-                <span className="icon-text">🧑‍🔧</span> System
+                <span className="icon-text">🧑‍🔧</span> {t("setting.system")}
               </span>
             </div>
           </>
diff --git a/web/src/components/Settings/SystemSection.tsx b/web/src/components/Settings/SystemSection.tsx
index 4140015b..fd8bd205 100644
--- a/web/src/components/Settings/SystemSection.tsx
+++ b/web/src/components/Settings/SystemSection.tsx
@@ -97,17 +97,17 @@ const SystemSection = () => {
     <div className="section-container system-section-container">
       <p className="title-text">{t("common.basic")}</p>
       <p className="text-value">
-        Database File Size: <span className="font-mono font-medium">{formatBytes(state.dbSize)}</span>
+        {t("setting.system-section.database-file-size")}: <span className="font-mono font-medium">{formatBytes(state.dbSize)}</span>
       </p>
       <p className="title-text">{t("sidebar.setting")}</p>
       <label className="form-label">
-        <span className="normal-text">Allow user signup</span>
+        <span className="normal-text">{t("setting.system-section.allow-user-signup")}</span>
         <Switch size="sm" checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </label>
       <div className="form-label">
-        <span className="normal-text">Additional style</span>
+        <span className="normal-text">{t("setting.system-section.additional-style")}</span>
         <Button size="sm" onClick={handleSaveAdditionalStyle}>
-          Save
+          {t("common.save")}
         </Button>
       </div>
       <Textarea
@@ -118,14 +118,14 @@ const SystemSection = () => {
         }}
         minRows={4}
         maxRows={10}
-        placeholder="Additional css codes"
+        placeholder={t("setting.system-section.additional-style-placeholder")}
         value={state.additionalStyle}
         onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
       />
       <div className="form-label mt-2">
-        <span className="normal-text">Additional script</span>
+        <span className="normal-text">{t("setting.system-section.additional-script")}</span>
         <Button size="sm" onClick={handleSaveAdditionalScript}>
-          Save
+          {t("common.save")}
         </Button>
       </div>
       <Textarea
@@ -136,7 +136,7 @@ const SystemSection = () => {
         }}
         minRows={4}
         maxRows={10}
-        placeholder="Additional JavaScript codes"
+        placeholder={t("setting.system-section.additional-script-placeholder")}
         value={state.additionalScript}
         onChange={(event) => handleAdditionalScriptChanged(event.target.value)}
       />
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 18e10d5a..dfe4f035 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -133,6 +133,7 @@
     "preference": "Preference",
     "member": "Member",
     "member-list": "Member list",
+    "system": "System",
     "account-section": {
       "title": "Account Information",
       "change-password": "Change password"
@@ -148,6 +149,14 @@
     },
     "member-section": {
       "create-a-member": "Create a member"
+    },
+    "system-section": {
+      "database-file-size": "Database File Size",
+      "allow-user-signup": "Allow user signup",
+      "additional-style": "Additional style",
+      "additional-script": "Additional script",
+      "additional-style-placeholder": "Additional CSS codes",
+      "additional-script-placeholder": "Additional JavaScript codes"
     }
   },
   "amount-text": {
diff --git a/web/src/locales/vi.json b/web/src/locales/vi.json
index 1b2ce25a..59598132 100644
--- a/web/src/locales/vi.json
+++ b/web/src/locales/vi.json
@@ -132,6 +132,7 @@
     "preference": "Sở thích",
     "member": "Thành viên",
     "member-list": "Danh sách thành viên",
+    "system": "hệ thống",
     "account-section": {
       "title": "Thông tin tài khoản",
       "change-password": "Đổi mật khẩu"
@@ -147,6 +148,14 @@
     },
     "member-section": {
       "create-a-member": "Tạo thành viên"
+    },
+    "system-section": {
+      "database-file-size": "Kích thước tệp cơ sở dữ liệu",
+      "allow-user-signup": "Cho phép người dùng đăng ký",
+      "additional-style": "Phong cách bổ sung",
+      "additional-script": "Tập lệnh bổ sung",
+      "additional-style-placeholder": "Mã css bổ sung",
+      "additional-script-placeholder": "Mã JavaScript bổ sung"
     }
   },
   "amount-text": {
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 6bdc2688..f0042c37 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -133,6 +133,7 @@
     "preference": "偏好设置",
     "member": "成员",
     "member-list": "成员列表",
+    "system": "系统",
     "account-section": {
       "title": "账号信息",
       "change-password": "修改密码"
@@ -148,6 +149,14 @@
     },
     "member-section": {
       "create-a-member": "创建成员"
+    },
+    "system-section": {
+      "database-file-size": "数据库文件大小",
+      "allow-user-signup": "允许用户注册",
+      "additional-style": "自定义样式",
+      "additional-script": "自定义脚本",
+      "additional-style-placeholder": "自定义 CSS 代码",
+      "additional-script-placeholder": "自定义 JavaScript 代码"
     }
   },
   "amount-text": {