diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f36be1576d6..96a9afb5eb9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -27,9 +27,13 @@ const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
 const AdminLogs = lazy(() => import("@/pages/Admin/Logging"));
 const AdminAgents = lazy(() => import("@/pages/Admin/Agents"));
 const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
-const GeneralAppearance = lazy(
-  () => import("@/pages/GeneralSettings/Appearance")
+const InterfaceSettings = lazy(
+  () => import("@/pages/GeneralSettings/Settings/Interface")
 );
+const BrandingSettings = lazy(
+  () => import("@/pages/GeneralSettings/Settings/Branding")
+);
+
 const GeneralApiKeys = lazy(() => import("@/pages/GeneralSettings/ApiKeys"));
 const GeneralLLMPreference = lazy(
   () => import("@/pages/GeneralSettings/LLMPreference")
@@ -186,8 +190,12 @@ export default function App() {
                     element={<AdminRoute Component={PrivacyAndData} />}
                   />
                   <Route
-                    path="/settings/appearance"
-                    element={<ManagerRoute Component={GeneralAppearance} />}
+                    path="/settings/interface"
+                    element={<ManagerRoute Component={InterfaceSettings} />}
+                  />
+                  <Route
+                    path="/settings/branding"
+                    element={<ManagerRoute Component={BrandingSettings} />}
                   />
                   <Route
                     path="/settings/beta-features"
diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
index 652297c7914..d2d1642b583 100644
--- a/frontend/src/components/EditingChatBubble/index.jsx
+++ b/frontend/src/components/EditingChatBubble/index.jsx
@@ -21,7 +21,9 @@ export default function EditingChatBubble({
       <p
         className={`text-xs text-white light:text-black/80 ${isUser ? "text-right" : ""}`}
       >
-        {isUser ? t("common.user") : t("appearance.message.assistant")}
+        {isUser
+          ? t("common.user")
+          : t("customization.items.welcome-messages.assistant")}
       </p>
       <div
         className={`relative flex w-full mt-2 items-start ${
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
index 98140bc8b39..97fbefee2d6 100644
--- a/frontend/src/components/SettingsButton/index.jsx
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -32,9 +32,8 @@ export default function SettingsButton() {
   return (
     <div className="flex w-fit">
       <Link
-        to={paths.settings.appearance()}
+        to={paths.settings.interface()}
         className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
-        // className="transition-all duration-300 p-2 rounded-full  bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
         aria-label="Settings"
         data-tooltip-id="footer-item"
         data-tooltip-content="Open settings"
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index 5d715f3f537..629d6ba1518 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -319,10 +319,21 @@ const SidebarOptions = ({ user = null, t }) => (
         <Option
           btnText={t("settings.customization")}
           icon={<PencilSimpleLine className="h-5 w-5 flex-shrink-0" />}
-          href={paths.settings.appearance()}
           user={user}
-          flex={true}
-          roles={["admin", "manager"]}
+          childOptions={[
+            {
+              btnText: t("settings.interface"),
+              href: paths.settings.interface(),
+              flex: true,
+              roles: ["admin", "manager"],
+            },
+            {
+              btnText: t("settings.branding"),
+              href: paths.settings.branding(),
+              flex: true,
+              roles: ["admin", "manager"],
+            },
+          ]}
         />
         <Option
           btnText={t("settings.tools")}
diff --git a/frontend/src/locales/ar/common.js b/frontend/src/locales/ar/common.js
index ffb7bcb9780..7e05a8db463 100644
--- a/frontend/src/locales/ar/common.js
+++ b/frontend/src/locales/ar/common.js
@@ -97,6 +97,8 @@ const TRANSLATIONS = {
     contact: "اتصل بالدعم",
     "browser-extension": "ملحق المتصفح",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -341,35 +343,6 @@ const TRANSLATIONS = {
       at: "أرسلت في",
     },
   },
-  appearance: {
-    title: "مظهر",
-    description: "تخصيص إعدادات مظهر منصتك.",
-    logo: {
-      title: "تخصيص الشعار",
-      description: "قم بتحميل شعارك المخصص لجعل روبوت المحادثة خاصا بك .",
-      add: "أضف شعارًا مخصصًا",
-      recommended: "الحجم الموصى به: 800 × 200",
-      remove: "قم بإزالة",
-      replace: "قم باستبدال",
-    },
-    message: {
-      title: "تخصيص الرسائل",
-      description: "قم بتخصيص الرسائل التلقائية التي يتم عرضها لمستعمليك.",
-      new: "جديد",
-      system: "نظام",
-      user: "مستعمل",
-      message: "رسالة",
-      assistant: "مساعد الدردشة لِـ إني ثينك إلْلْم",
-      "double-click": "انقر نقراً مزدوجاً للتحرير...",
-      save: "حفظ الرسائل",
-    },
-    icons: {
-      title: "أيقونات التذييل المخصصة",
-      description: "تخصيص أيقونات التذييل المعروضة في أسفل الشريط الجانبي.",
-      icon: "أيقونة",
-      link: "رابط",
-    },
-  },
   api: {
     title: " مفاتيح واجهة برمجة التطبيقات.",
     description:
@@ -686,6 +659,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/da/common.js b/frontend/src/locales/da/common.js
index 104abf02761..186f95f84ba 100644
--- a/frontend/src/locales/da/common.js
+++ b/frontend/src/locales/da/common.js
@@ -99,6 +99,8 @@ const TRANSLATIONS = {
     contact: "Kontakt support",
     "browser-extension": "Browserudvidelse",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -343,36 +345,6 @@ const TRANSLATIONS = {
       at: "Sendt kl.",
     },
   },
-  appearance: {
-    title: "Udseende",
-    description: "Tilpas platformens udseendeindstillinger.",
-    logo: {
-      title: "Tilpas logo",
-      description: "Upload dit tilpassede logo for at gøre din chatbot unik.",
-      add: "Tilføj et tilpasset logo",
-      recommended: "Anbefalet størrelse: 800 x 200",
-      remove: "Fjern",
-      replace: "Erstat",
-    },
-    message: {
-      title: "Tilpas beskeder",
-      description:
-        "Tilpas de automatiske beskeder, der vises for dine brugere.",
-      new: "Ny",
-      system: "system",
-      user: "bruger",
-      message: "besked",
-      assistant: "AnythingLLM Chat-assistent",
-      "double-click": "Dobbeltklik for at redigere...",
-      save: "Gem beskeder",
-    },
-    icons: {
-      title: "Tilpassede sidefodsikoner",
-      description: "Tilpas sidefodens ikoner, der vises nederst i sidebjælken.",
-      icon: "Ikon",
-      link: "Link",
-    },
-  },
   api: {
     title: "API-nøgler",
     description:
@@ -726,6 +698,79 @@ const TRANSLATIONS = {
     theme: "Tema-præference",
     language: "Foretrukket sprog",
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/de/common.js b/frontend/src/locales/de/common.js
index 90a171b68ba..f81776bbe33 100644
--- a/frontend/src/locales/de/common.js
+++ b/frontend/src/locales/de/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Support kontaktieren",
     "browser-extension": "Browser-Erweiterung",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -336,38 +338,6 @@ const TRANSLATIONS = {
       at: "Gesendet am",
     },
   },
-  appearance: {
-    title: "Erscheinungsbild",
-    description: "Passen Sie die Erscheinungseinstellungen Ihrer Plattform an.",
-    logo: {
-      title: "Logo anpassen",
-      description:
-        "Laden Sie Ihr eigenes Logo hoch, um Ihren Chatbot zu personalisieren.",
-      add: "Benutzerdefiniertes Logo hinzufügen",
-      recommended: "Empfohlene Größe: 800 x 200",
-      remove: "Entfernen",
-      replace: "Ersetzen",
-    },
-    message: {
-      title: "Nachrichten anpassen",
-      description:
-        "Passen Sie die automatischen Nachrichten an, die Ihren Benutzern angezeigt werden.",
-      new: "Neu",
-      system: "System",
-      user: "Benutzer",
-      message: "Nachricht",
-      assistant: "AnythingLLM Chat-Assistent",
-      "double-click": "Doppelklicken zum Bearbeiten...",
-      save: "Nachrichten speichern",
-    },
-    icons: {
-      title: "Benutzerdefinierte Fußzeilen-Icons",
-      description:
-        "Passen Sie die Fußzeilen-Icons an, die am unteren Rand der Seitenleiste angezeigt werden.",
-      icon: "Icon",
-      link: "Link",
-    },
-  },
   api: {
     title: "API-Schlüssel",
     description:
@@ -726,6 +696,79 @@ const TRANSLATIONS = {
     theme: "Bevozugtes Design",
     language: "Bevorzugte Sprache",
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/en/common.js b/frontend/src/locales/en/common.js
index 0bdd3e660ff..726f7e39c24 100644
--- a/frontend/src/locales/en/common.js
+++ b/frontend/src/locales/en/common.js
@@ -81,6 +81,8 @@ const TRANSLATIONS = {
     workspaces: "Workspaces",
     "workspace-chats": "Workspace Chats",
     customization: "Customization",
+    interface: "UI Preferences",
+    branding: "Branding & Whitelabeling",
     "api-keys": "Developer API",
     llm: "LLM",
     transcription: "Transcription",
@@ -364,35 +366,86 @@ const TRANSLATIONS = {
     },
   },
 
-  // Appearance
-  appearance: {
-    title: "Appearance",
-    description: "Customize the appearance settings of your platform.",
-    logo: {
-      title: "Customize Logo",
-      description: "Upload your custom logo to make your chatbot yours.",
-      add: "Add a custom logo",
-      recommended: "Recommended size: 800 x 200",
-      remove: "Remove",
-      replace: "Replace",
+  customization: {
+    interface: {
+      title: "UI Preferences",
+      description: "Set your UI preferences for AnythingLLM.",
     },
-    message: {
-      title: "Customize Messages",
-      description: "Customize the automatic messages displayed to your users.",
-      new: "New",
-      system: "system",
-      user: "user",
-      message: "message",
-      assistant: "AnythingLLM Chat Assistant",
-      "double-click": "Double click to edit...",
-      save: "Save Messages",
-    },
-    icons: {
-      title: "Custom Footer Icons",
+    branding: {
+      title: "Branding & Whitelabeling",
       description:
-        "Customize the footer icons displayed on the bottom of the sidebar.",
-      icon: "Icon",
-      link: "Link",
+        "White-label your AnythingLLM instance with custom branding.",
+    },
+    items: {
+      theme: {
+        title: "Theme",
+        description: "Select your preferred color theme for the application.",
+      },
+      "show-scrollbar": {
+        title: "Show Scrollbar",
+        description: "Enable or disable the scrollbar in the chat window.",
+      },
+      "support-email": {
+        title: "Support Email",
+        description:
+          "Set the support email address that should be accessible by users when they need help.",
+      },
+      "app-name": {
+        title: "Name",
+        description:
+          "Set a name that is displayed on the login page to all users.",
+      },
+      "chat-message-alignment": {
+        title: "Chat Message Alignment",
+        description:
+          "Select the message alignment mode when using the chat interface.",
+      },
+      "display-language": {
+        title: "Display Language",
+        description:
+          "Select the preferred language to render AnythingLLM's UI in - when translations are available.",
+      },
+      logo: {
+        title: "Brand Logo",
+        description: "Upload your custom logo to showcase on all pages.",
+        add: "Add a custom logo",
+        recommended: "Recommended size: 800 x 200",
+        remove: "Remove",
+        replace: "Replace",
+      },
+      "welcome-messages": {
+        title: "Welcome Messages",
+        description:
+          "Customize the welcome messages displayed to your users. Only non-admin users will see these messages.",
+        new: "New",
+        system: "system",
+        user: "user",
+        message: "message",
+        assistant: "AnythingLLM Chat Assistant",
+        "double-click": "Double click to edit...",
+        save: "Save Messages",
+      },
+      "browser-appearance": {
+        title: "Browser Appearance",
+        description:
+          "Customize the appearance of the browser tab and title when the app is open.",
+        tab: {
+          title: "Title",
+          description:
+            "Set a custom tab title when the app is open in a browser.",
+        },
+        favicon: {
+          title: "Favicon",
+          description: "Use a custom favicon for the browser tab.",
+        },
+      },
+      "sidebar-footer": {
+        title: "Sidebar Footer Items",
+        description:
+          "Customize the footer items displayed on the bottom of the sidebar.",
+        icon: "Icon",
+        link: "Link",
+      },
     },
   },
 
diff --git a/frontend/src/locales/es/common.js b/frontend/src/locales/es/common.js
index dbf7660d7b4..e5587797f82 100644
--- a/frontend/src/locales/es/common.js
+++ b/frontend/src/locales/es/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Contactar Soporte",
     "browser-extension": "Extensión del navegador",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -339,38 +341,6 @@ const TRANSLATIONS = {
       at: "Enviado a",
     },
   },
-  appearance: {
-    title: "Apariencia",
-    description: "Personaliza la configuración de apariencia de tu plataforma.",
-    logo: {
-      title: "Personalizar logotipo",
-      description:
-        "Sube tu logotipo personalizado para hacer que tu chatbot sea tuyo.",
-      add: "Agregar un logotipo personalizado",
-      recommended: "Tamaño recomendado: 800 x 200",
-      remove: "Eliminar",
-      replace: "Reemplazar",
-    },
-    message: {
-      title: "Personalizar mensajes",
-      description:
-        "Personaliza los mensajes automáticos que se muestran a tus usuarios.",
-      new: "Nuevo",
-      system: "sistema",
-      user: "usuario",
-      message: "mensaje",
-      assistant: "Asistente de chat AnythingLLM",
-      "double-click": "Haz doble clic para editar...",
-      save: "Guardar mensajes",
-    },
-    icons: {
-      title: "Iconos de pie de página personalizados",
-      description:
-        "Personaliza los iconos de pie de página que se muestran en la parte inferior de la barra lateral.",
-      icon: "Icono",
-      link: "Enlace",
-    },
-  },
   api: {
     title: "Claves API",
     description:
@@ -688,6 +658,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/fa/common.js b/frontend/src/locales/fa/common.js
index 4deeae36ca1..88288f3a4eb 100644
--- a/frontend/src/locales/fa/common.js
+++ b/frontend/src/locales/fa/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "تماس با پشتیبانی",
     "browser-extension": "افزونه مرورگر",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -333,37 +335,6 @@ const TRANSLATIONS = {
       at: "زمان ارسال",
     },
   },
-  appearance: {
-    title: "ظاهر",
-    description: "تنظیمات ظاهری پلتفرم خود را شخصی‌سازی کنید.",
-    logo: {
-      title: "شخصی‌سازی لوگو",
-      description: "لوگوی سفارشی خود را برای شخصی‌سازی ربات گفتگو آپلود کنید.",
-      add: "افزودن لوگوی سفارشی",
-      recommended: "اندازه پیشنهادی: 800 x 200",
-      remove: "حذف",
-      replace: "جایگزینی",
-    },
-    message: {
-      title: "شخصی‌سازی پیام‌ها",
-      description:
-        "پیام‌های خودکار نمایش داده شده به کاربران را شخصی‌سازی کنید.",
-      new: "جدید",
-      system: "سیستم",
-      user: "کاربر",
-      message: "پیام",
-      assistant: "دستیار گفتگوی AnythingLLM",
-      "double-click": "برای ویرایش دوبار کلیک کنید...",
-      save: "ذخیره پیام‌ها",
-    },
-    icons: {
-      title: "آیکون‌های سفارشی پاورقی",
-      description:
-        "آیکون‌های نمایش داده شده در پایین نوار کناری را شخصی‌سازی کنید.",
-      icon: "آیکون",
-      link: "لینک",
-    },
-  },
   api: {
     title: "کلیدهای API",
     description:
@@ -680,6 +651,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/fr/common.js b/frontend/src/locales/fr/common.js
index 43f552ba3aa..bf02d7372a7 100644
--- a/frontend/src/locales/fr/common.js
+++ b/frontend/src/locales/fr/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Contacter le Support",
     "browser-extension": "Extension de navigateur",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -340,39 +342,6 @@ const TRANSLATIONS = {
       at: "Envoyé à",
     },
   },
-  appearance: {
-    title: "Apparence",
-    description:
-      "Personnalisez les paramètres d'apparence de votre plateforme.",
-    logo: {
-      title: "Personnaliser le logo",
-      description:
-        "Téléchargez votre logo personnalisé pour rendre votre chatbot unique.",
-      add: "Ajouter un logo personnalisé",
-      recommended: "Taille recommandée: 800 x 200",
-      remove: "Supprimer",
-      replace: "Remplacer",
-    },
-    message: {
-      title: "Personnaliser les messages",
-      description:
-        "Personnalisez les messages automatiques affichés à vos utilisateurs.",
-      new: "Nouveau",
-      system: "système",
-      user: "utilisateur",
-      message: "message",
-      assistant: "Assistant de chat AnythingLLM",
-      "double-click": "Double-cliquez pour modifier...",
-      save: "Enregistrer les messages",
-    },
-    icons: {
-      title: "Icônes de pied de page personnalisées",
-      description:
-        "Personnalisez les icônes de pied de page affichées en bas de la barre latérale.",
-      icon: "Icône",
-      link: "Lien",
-    },
-  },
   api: {
     title: "Clés API",
     description:
@@ -690,6 +659,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/he/common.js b/frontend/src/locales/he/common.js
index c03b98eef63..74a331def58 100644
--- a/frontend/src/locales/he/common.js
+++ b/frontend/src/locales/he/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "צור קשר עם התמיכה",
     "browser-extension": "תוסף דפדפן",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -329,36 +331,6 @@ const TRANSLATIONS = {
       at: "נשלח ב-",
     },
   },
-  appearance: {
-    title: "מראה",
-    description: "התאם אישית את הגדרות המראה של הפלטפורמה שלך.",
-    logo: {
-      title: "התאם אישית את הלוגו",
-      description:
-        "העלה את הלוגו המותאם אישית שלך כדי להפוך את הצ'אטבוט שלך לשלך.",
-      add: "הוסף לוגו מותאם אישית",
-      recommended: "גודל מומלץ: 800 x 200",
-      remove: "הסר",
-      replace: "החלף",
-    },
-    message: {
-      title: "התאם אישית הודעות",
-      description: "התאם אישית את ההודעות האוטומטיות המוצגות למשתמשים שלך.",
-      new: "חדש",
-      system: "מערכת",
-      user: "משתמש",
-      message: "הודעה",
-      assistant: "AnythingLLM Chat Assistant",
-      "double-click": "לחץ פעמיים כדי לערוך...",
-      save: "שמור הודעות",
-    },
-    icons: {
-      title: "סמלי כותרת תחתונה מותאמים אישית",
-      description: "התאם אישית את סמלי כותרת התחתונה המוצגים בתחתית סרגל הצד.",
-      icon: "סמל",
-      link: "קישור",
-    },
-  },
   api: {
     title: "מפתחות API",
     description:
@@ -672,6 +644,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/it/common.js b/frontend/src/locales/it/common.js
index 358e7f04681..70e7aa2aa46 100644
--- a/frontend/src/locales/it/common.js
+++ b/frontend/src/locales/it/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Contatta il Supporto",
     "browser-extension": "Estensione del browser",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -338,39 +340,6 @@ const TRANSLATIONS = {
       at: "Inviato a",
     },
   },
-  appearance: {
-    title: "Aspetto",
-    description:
-      "Personalizza le impostazioni di aspetto della tua piattaforma.",
-    logo: {
-      title: "Personalizza logo",
-      description:
-        "Carica il tuo logo personalizzato per rendere tuo il chatbot.",
-      add: "Aggiungi un logo personalizzato",
-      recommended: "Dimensioni consigliate: 800 x 200",
-      remove: "Rimuovi",
-      replace: "Sostituisci",
-    },
-    message: {
-      title: "Personalizza messaggi",
-      description:
-        "Personalizza i messaggi automatici visualizzati dai tuoi utenti.",
-      new: "Nuovo",
-      system: "sistema",
-      user: "utente",
-      message: "messaggio",
-      assistant: "Assistente chat AnythingLLM",
-      "double-click": "Fai doppio clic per modificare...",
-      save: "Salva messaggi",
-    },
-    icons: {
-      title: "Icone a piè di pagina personalizzate",
-      description:
-        "Personalizza le icone a piè di pagina visualizzate nella parte inferiore della barra laterale.",
-      icon: "Icona",
-      link: "Collegamento",
-    },
-  },
   api: {
     title: "Chiavi API",
     description:
@@ -688,6 +657,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/ja/common.js b/frontend/src/locales/ja/common.js
index 6e1999ea675..e1ed2c3fd3f 100644
--- a/frontend/src/locales/ja/common.js
+++ b/frontend/src/locales/ja/common.js
@@ -1,4 +1,4 @@
-// @ts-nocheck
+// Anything with "null" requires a translation. Contribute to translation via a PR!
 const TRANSLATIONS = {
   onboarding: {
     home: {
@@ -70,8 +70,6 @@ const TRANSLATIONS = {
     yes: "はい",
     no: "いいえ",
   },
-
-  // Setting Sidebar menu items.
   settings: {
     title: "インスタンス設定",
     system: "一般設定",
@@ -100,9 +98,9 @@ const TRANSLATIONS = {
     "experimental-features": "実験的機能",
     contact: "サポートに連絡",
     "browser-extension": "ブラウザ拡張",
+    interface: null,
+    branding: null,
   },
-
-  // Page Definitions
   login: {
     "multi-user": {
       welcome: "ようこそ",
@@ -126,7 +124,6 @@ const TRANSLATIONS = {
       "back-to-login": "ログイン画面に戻る",
     },
   },
-
   welcomeMessage: {
     part1:
       "AnythingLLMへようこそ。AnythingLLMはMintplex LabsによるオープンソースのAIツールで、あらゆるものをトレーニングされたチャットボットに変換し、クエリやチャットが可能です。AnythingLLMはBYOK（Bring-Your-Own-Keys）ソフトウェアであり、このソフトウェアを使用するためのサブスクリプション、料金、または費用はありません。",
@@ -148,13 +145,10 @@ const TRANSLATIONS = {
     starOnGitHub: "GitHubでスターを付ける",
     contact: "Mintplex Labsに連絡",
   },
-
   "new-workspace": {
     title: "新しいワークスペース",
     placeholder: "マイワークスペース",
   },
-
-  // Workspace Settings menu items
   "workspaces—settings": {
     general: "一般設定",
     chat: "チャット設定",
@@ -162,8 +156,6 @@ const TRANSLATIONS = {
     members: "メンバー",
     agent: "エージェント構成",
   },
-
-  // General Appearance
   general: {
     vector: {
       title: "ベクター数",
@@ -199,8 +191,6 @@ const TRANSLATIONS = {
         "ワークスペース。この操作により、ベクターデータベース内のすべてのベクター埋め込みが削除されます。\n\n元のソースファイルはそのまま残ります。この操作は元に戻せません。",
     },
   },
-
-  // Chat Settings
   chat: {
     llm: {
       title: "ワークスペースLLMプロバイダー",
@@ -256,8 +246,6 @@ const TRANSLATIONS = {
       hint: "多くのLLMには有効な値の範囲があります。詳細はLLMプロバイダーの情報を参照してください。",
     },
   },
-
-  // Vector Database
   "vector-workspace": {
     identifier: "ベクターデータベース識別子",
     snippets: {
@@ -284,8 +272,6 @@ const TRANSLATIONS = {
       success: "ワークスペースのベクターデータベースがリセットされました！",
     },
   },
-
-  // Agent Configuration
   agent: {
     "performance-warning":
       "ツール呼び出しに対応していないLLMの性能は、モデルの能力や精度に大きく依存します。一部の機能が制限されたり、正しく動作しない場合があります。",
@@ -305,7 +291,6 @@ const TRANSLATIONS = {
         "このワークスペースの@agentエージェントで使用するLLMモデルを指定します。",
       wait: "-- モデルを読み込み中 --",
     },
-
     skill: {
       title: "デフォルトエージェントのスキル",
       description:
@@ -344,8 +329,6 @@ const TRANSLATIONS = {
       },
     },
   },
-
-  // Workspace Chats
   recorded: {
     title: "ワークスペースチャット履歴",
     description:
@@ -360,41 +343,6 @@ const TRANSLATIONS = {
       at: "送信日時",
     },
   },
-
-  // Appearance
-  appearance: {
-    title: "外観",
-    description: "プラットフォームの外観設定をカスタマイズします。",
-    logo: {
-      title: "ロゴのカスタマイズ",
-      description:
-        "独自のロゴをアップロードして、チャットボットの個性を表現しましょう。",
-      add: "カスタムロゴを追加",
-      recommended: "推奨サイズ: 800 x 200",
-      remove: "削除",
-      replace: "差し替え",
-    },
-    message: {
-      title: "メッセージのカスタマイズ",
-      description: "ユーザーに表示される自動メッセージをカスタマイズします。",
-      new: "新規",
-      system: "システム",
-      user: "ユーザー",
-      message: "メッセージ",
-      assistant: "AnythingLLMチャットアシスタント",
-      "double-click": "ダブルクリックで編集",
-      save: "メッセージを保存",
-    },
-    icons: {
-      title: "カスタムフッターアイコン",
-      description:
-        "サイドバー下部に表示されるフッターアイコンをカスタマイズします。",
-      icon: "アイコン",
-      link: "リンク",
-    },
-  },
-
-  // API Keys
   api: {
     title: "APIキー",
     description:
@@ -407,14 +355,12 @@ const TRANSLATIONS = {
       created: "作成日",
     },
   },
-
   llm: {
     title: "LLMの設定",
     description:
       "これは、お好みのLLMチャットおよび埋め込みプロバイダー用の認証情報と設定です。これらのキーが最新かつ正確でない場合、AnythingLLMは正しく動作しません。",
     provider: "LLMプロバイダー",
   },
-
   transcription: {
     title: "文字起こしモデルの設定",
     description:
@@ -426,7 +372,6 @@ const TRANSLATIONS = {
       "少なくとも2GBのRAMが推奨され、ファイルサイズは10Mb未満であることをお勧めします。",
     "warn-end": "組み込みモデルは初回使用時に自動的にダウンロードされます。",
   },
-
   embedding: {
     title: "埋め込み設定",
     "desc-start":
@@ -439,7 +384,6 @@ const TRANSLATIONS = {
         "AnythingLLMのネイティブ埋め込みエンジンを使用する場合、特に設定は必要ありません。",
     },
   },
-
   text: {
     title: "テキスト分割とチャンク化の設定",
     "desc-start":
@@ -454,14 +398,11 @@ const TRANSLATIONS = {
       description: "1つのベクトルに含まれる最大の文字数です。",
       recommend: "埋め込みモデルの最大長は",
     },
-
     overlap: {
       title: "テキストチャンクの重複",
       description: "隣接するテキストチャンク間に発生する最大の重複文字数です。",
     },
   },
-
-  // Vector Database
   vector: {
     title: "ベクターデータベース設定",
     description:
@@ -471,8 +412,6 @@ const TRANSLATIONS = {
       description: "LanceDBの場合、特に設定は必要ありません。",
     },
   },
-
-  // Embeddable Chat Widgets
   embeddable: {
     title: "埋め込みチャットウィジェット",
     description:
@@ -484,7 +423,6 @@ const TRANSLATIONS = {
       Active: "有効なドメイン",
     },
   },
-
   "embed-chats": {
     title: "埋め込みチャット履歴",
     export: "エクスポート",
@@ -498,7 +436,6 @@ const TRANSLATIONS = {
       at: "送信日時",
     },
   },
-
   multi: {
     title: "マルチユーザーモード",
     description:
@@ -523,8 +460,6 @@ const TRANSLATIONS = {
       password: "インスタンスパスワード",
     },
   },
-
-  // Event Logs
   event: {
     title: "イベントログ",
     description:
@@ -536,8 +471,6 @@ const TRANSLATIONS = {
       occurred: "発生日時",
     },
   },
-
-  // Privacy & Data-Handling
   privacy: {
     title: "プライバシーとデータ処理",
     description:
@@ -547,7 +480,6 @@ const TRANSLATIONS = {
     vector: "ベクターデータベース",
     anonymous: "匿名テレメトリが有効",
   },
-
   connectors: {
     "search-placeholder": "データコネクタを検索",
     "no-connectors": "データコネクタが見つかりません。",
@@ -663,7 +595,6 @@ const TRANSLATIONS = {
       task_explained:
         "完了後、ページ内容がドキュメントピッカーからワークスペースに埋め込めるようになります。",
     },
-
     manage: {
       documents: "ドキュメント",
       "data-connectors": "データコネクタ",
@@ -730,7 +661,6 @@ const TRANSLATIONS = {
       accept: "わかりました",
     },
   },
-
   chat_window: {
     welcome: "新しいワークスペースへようこそ。",
     get_started: "まずはじめに、",
@@ -746,7 +676,6 @@ const TRANSLATIONS = {
     microphone: "プロンプトを音声入力",
     send: "ワークスペースにプロンプトメッセージを送信",
   },
-
   profile_settings: {
     edit_account: "アカウントを編集",
     profile_picture: "プロフィール画像",
@@ -761,6 +690,79 @@ const TRANSLATIONS = {
     theme: "テーマ設定",
     language: "優先言語",
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/ko/common.js b/frontend/src/locales/ko/common.js
index 669e365cb93..99d1de24658 100644
--- a/frontend/src/locales/ko/common.js
+++ b/frontend/src/locales/ko/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "지원팀 연락",
     "browser-extension": "브라우저 확장 프로그램",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -329,36 +331,6 @@ const TRANSLATIONS = {
       at: "보낸 시각",
     },
   },
-  appearance: {
-    title: "외관",
-    description: "플랫폼의 외관 설정을 수정합니다.",
-    logo: {
-      title: "사용자 로고",
-      description:
-        "사용자의 로고를 업로드하여 챗봇을 자신의 것으로 만드십시오.",
-      add: "사용자 로고 추가",
-      recommended: "추천 크기: 800 x 200",
-      remove: "제거",
-      replace: "교체",
-    },
-    message: {
-      title: "사용자 메시지",
-      description: "사용자에게 표시되는 자동 메시지를 작성합니다.",
-      new: "새로운",
-      system: "시스템",
-      user: "사용자",
-      message: "메시지",
-      assistant: "AnythingLLM 채팅 어시스턴트",
-      "double-click": "더블 클릭하여 편집...",
-      save: "메시지 저장",
-    },
-    icons: {
-      title: "맞춤형 바닥글 아이콘",
-      description: "사이드바 하단에 표시되는 아이콘을 수정합니다.",
-      icon: "아이콘",
-      link: "링크",
-    },
-  },
   api: {
     title: "API 키",
     description:
@@ -672,6 +644,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/nl/common.js b/frontend/src/locales/nl/common.js
index d43995584d6..586250ac1ef 100644
--- a/frontend/src/locales/nl/common.js
+++ b/frontend/src/locales/nl/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Contact Ondersteuning",
     "browser-extension": "Browser Extensie",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -335,37 +337,6 @@ const TRANSLATIONS = {
       at: "Verzonden Om",
     },
   },
-  appearance: {
-    title: "Verschijning",
-    description: "Pas de verschijningsinstellingen van je platform aan.",
-    logo: {
-      title: "Logo Aanpassen",
-      description: "Upload je aangepaste logo om je chatbot eigen te maken.",
-      add: "Voeg een aangepast logo toe",
-      recommended: "Aanbevolen grootte: 800 x 200",
-      remove: "Verwijderen",
-      replace: "Vervangen",
-    },
-    message: {
-      title: "Berichten Aanpassen",
-      description:
-        "Pas de automatische berichten aan die aan je gebruikers worden weergegeven.",
-      new: "Nieuw",
-      system: "systeem",
-      user: "gebruiker",
-      message: "bericht",
-      assistant: "AnythingLLM Chat Assistent",
-      "double-click": "Dubbelklik om te bewerken...",
-      save: "Berichten Opslaan",
-    },
-    icons: {
-      title: "Aangepaste Voettekstpictogrammen",
-      description:
-        "Pas de voettekstpictogrammen aan die onder aan de zijbalk worden weergegeven.",
-      icon: "Pictogram",
-      link: "Link",
-    },
-  },
   api: {
     title: "API-sleutels",
     description:
@@ -683,6 +654,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/pt_BR/common.js b/frontend/src/locales/pt_BR/common.js
index bf9abb29ac4..1614eac6748 100644
--- a/frontend/src/locales/pt_BR/common.js
+++ b/frontend/src/locales/pt_BR/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Contato com Suporte",
     "browser-extension": "Extensão do navegador",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -336,38 +338,6 @@ const TRANSLATIONS = {
       at: "Enviado Em",
     },
   },
-  appearance: {
-    title: "Aparência",
-    description: "Personalize as configurações de aparência da sua plataforma.",
-    logo: {
-      title: "Personalizar Logo",
-      description:
-        "Envie seu logotipo personalizado para tornar seu chatbot seu.",
-      add: "Adicionar um logotipo personalizado",
-      recommended: "Tamanho recomendado: 800 x 200",
-      remove: "Remover",
-      replace: "Substituir",
-    },
-    message: {
-      title: "Personalizar Mensagens",
-      description:
-        "Personalize as mensagens automáticas exibidas aos seus usuários.",
-      new: "Novo",
-      system: "sistema",
-      user: "usuário",
-      message: "mensagem",
-      assistant: "Assistente de Chat AnythingLLM",
-      "double-click": "Clique duas vezes para editar...",
-      save: "Salvar Mensagens",
-    },
-    icons: {
-      title: "Ícones de Rodapé Personalizados",
-      description:
-        "Personalize os ícones de rodapé exibidos na parte inferior da barra lateral.",
-      icon: "Ícone",
-      link: "Link",
-    },
-  },
   api: {
     title: "Chaves API",
     description:
@@ -685,6 +655,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/ru/common.js b/frontend/src/locales/ru/common.js
index d1547e0be64..232cd0b44fa 100644
--- a/frontend/src/locales/ru/common.js
+++ b/frontend/src/locales/ru/common.js
@@ -98,6 +98,8 @@ const TRANSLATIONS = {
     contact: "Связаться с Поддержкой",
     "browser-extension": "Расширение браузера",
     "system-prompt-variables": "Переменные системного запроса",
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -344,38 +346,6 @@ const TRANSLATIONS = {
       at: "Отправлено в",
     },
   },
-  appearance: {
-    title: "Внешний вид",
-    description: "Настройте параметры внешнего вида вашей платформы.",
-    logo: {
-      title: "Настроить логотип",
-      description:
-        "Загрузите свой логотип, чтобы персонализировать ваш чат-бот.",
-      add: "Добавить пользовательский логотип",
-      recommended: "Рекомендуемый размер: 800 x 200",
-      remove: "Удалить",
-      replace: "Заменить",
-    },
-    message: {
-      title: "Настроить сообщения",
-      description:
-        "Настройте автоматические сообщения, отображаемые вашим пользователям.",
-      new: "Новое",
-      system: "система",
-      user: "пользователь",
-      message: "сообщение",
-      assistant: "Чат-ассистент AnythingLLM",
-      "double-click": "Дважды щелкните, чтобы редактировать...",
-      save: "Сохранить сообщения",
-    },
-    icons: {
-      title: "Пользовательские иконки в подвале",
-      description:
-        "Настройте иконки в подвале, отображаемые внизу боковой панели.",
-      icon: "Иконка",
-      link: "Ссылка",
-    },
-  },
   api: {
     title: "API ключи",
     description:
@@ -634,7 +604,6 @@ const TRANSLATIONS = {
       task_explained:
         "После завершения содержимое страницы будет доступно для внедрения в рабочие пространства через выбор документов.",
     },
-
     manage: {
       documents: "Документы",
       "data-connectors": "Коннекторы данных",
@@ -716,7 +685,6 @@ const TRANSLATIONS = {
     microphone: "Произнесите ваш запрос.",
     send: "Отправить запрос в рабочее пространство",
   },
-
   profile_settings: {
     edit_account: "Редактировать учётную запись",
     profile_picture: "Изображение профиля",
@@ -731,6 +699,79 @@ const TRANSLATIONS = {
     theme: "Предпочтения темы",
     language: "Предпочитаемый язык",
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/tr/common.js b/frontend/src/locales/tr/common.js
index 173d952a0aa..5e64bf519b9 100644
--- a/frontend/src/locales/tr/common.js
+++ b/frontend/src/locales/tr/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Destekle İletişime Geçin",
     "browser-extension": "Tarayıcı Uzantısı",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -335,38 +337,6 @@ const TRANSLATIONS = {
       at: "Gönderilme Zamanı",
     },
   },
-  appearance: {
-    title: "Görünüm",
-    description: "Platformunuzun görünüm ayarlarını özelleştirin.",
-    logo: {
-      title: "Logoyu Özelleştir",
-      description:
-        "Özel bir logo yükleyerek chatbot'unuzu kendinize ait hale getirin.",
-      add: "Özel bir logo ekle",
-      recommended: "Önerilen boyut: 800 x 200",
-      remove: "Kaldır",
-      replace: "Değiştir",
-    },
-    message: {
-      title: "Mesajları Özelleştir",
-      description:
-        "Kullanıcılarınıza gösterilen otomatik mesajları özelleştirin.",
-      new: "Yeni",
-      system: "sistem",
-      user: "kullanıcı",
-      message: "mesaj",
-      assistant: "AnythingLLM Sohbet Asistanı",
-      "double-click": "Düzenlemek için çift tıklayın...",
-      save: "Mesajları Kaydet",
-    },
-    icons: {
-      title: "Özel Altbilgi Simgeleri",
-      description:
-        "Kenar çubuğunun altında görüntülenen altbilgi simgelerini özelleştirin.",
-      icon: "Simge",
-      link: "Bağlantı",
-    },
-  },
   api: {
     title: "API Anahtarları",
     description:
@@ -684,6 +654,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/vn/common.js b/frontend/src/locales/vn/common.js
index 09f2be733c6..11a5c46331a 100644
--- a/frontend/src/locales/vn/common.js
+++ b/frontend/src/locales/vn/common.js
@@ -90,6 +90,8 @@ const TRANSLATIONS = {
     contact: "Liên hệ hỗ trợ",
     "browser-extension": "Tiện ích trình duyệt",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -334,36 +336,6 @@ const TRANSLATIONS = {
       at: "Sent At",
     },
   },
-  appearance: {
-    title: "Giao diện",
-    description: "Customize the appearance settings of your platform.",
-    logo: {
-      title: "Tùy chỉnh logo",
-      description: "Upload your custom logo to make your chatbot yours.",
-      add: "Add a custom logo",
-      recommended: "Recommended size: 800 x 200",
-      remove: "Remove",
-      replace: "Replace",
-    },
-    message: {
-      title: "Customize Messages",
-      description: "Customize the automatic messages displayed to your users.",
-      new: "New",
-      system: "system",
-      user: "user",
-      message: "message",
-      assistant: "AnythingLLM Chat Assistant",
-      "double-click": "Double click to edit...",
-      save: "Save Messages",
-    },
-    icons: {
-      title: "Custom Footer Icons",
-      description:
-        "Customize the footer icons displayed on the bottom of the sidebar.",
-      icon: "Icon",
-      link: "Link",
-    },
-  },
   api: {
     title: "Khóa API",
     description:
@@ -681,6 +653,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/zh/common.js b/frontend/src/locales/zh/common.js
index 794294b3a00..c6a30ca5062 100644
--- a/frontend/src/locales/zh/common.js
+++ b/frontend/src/locales/zh/common.js
@@ -94,6 +94,8 @@ const TRANSLATIONS = {
     contact: "联系支持",
     "browser-extension": "浏览器扩展",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -323,35 +325,6 @@ const TRANSLATIONS = {
       at: "发送时间",
     },
   },
-  appearance: {
-    title: "外观",
-    description: "自定义平台的外观设置。",
-    logo: {
-      title: "自定义图标",
-      description: "上传你的自定义图标，让你的聊天机器人成为你的。",
-      add: "添加自定义图标",
-      recommended: "建议尺寸：800 x 200",
-      remove: "移除",
-      replace: "替换",
-    },
-    message: {
-      title: "自定义消息",
-      description: "自定义向用户显示的自动消息。",
-      new: "新建",
-      system: "系统",
-      user: "用户",
-      message: "消息",
-      assistant: "AnythingLLM 聊天助手",
-      "double-click": "双击以编辑...",
-      save: "保存消息",
-    },
-    icons: {
-      title: "自定义页脚图标",
-      description: "自定义侧边栏底部显示的页脚图标。",
-      icon: "图标",
-      link: "链接",
-    },
-  },
   api: {
     title: "API 密钥",
     description: "API 密钥允许持有者以编程方式访问和管理此 AnythingLLM 实例。",
@@ -659,6 +632,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/zh_TW/common.js b/frontend/src/locales/zh_TW/common.js
index 32fd3d7d402..30cab3aff83 100644
--- a/frontend/src/locales/zh_TW/common.js
+++ b/frontend/src/locales/zh_TW/common.js
@@ -94,6 +94,8 @@ const TRANSLATIONS = {
     contact: "聯絡支援",
     "browser-extension": "瀏覽器擴充功能",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -324,35 +326,6 @@ const TRANSLATIONS = {
       at: "傳送時間",
     },
   },
-  appearance: {
-    title: "外觀",
-    description: "自訂平台的外觀設定。",
-    logo: {
-      title: "自訂 Logo",
-      description: "上傳您的自訂 Logo，讓您的對話機器人更具個人特色。",
-      add: "新增自訂 Logo",
-      recommended: "建議尺寸：800 x 200",
-      remove: "移除",
-      replace: "取代",
-    },
-    message: {
-      title: "自訂訊息",
-      description: "自訂顯示給使用者的自動訊息。",
-      new: "新增",
-      system: "系統",
-      user: "使用者",
-      message: "訊息",
-      assistant: "AnythingLLM 對話助理",
-      "double-click": "點兩下以編輯...",
-      save: "儲存訊息",
-    },
-    icons: {
-      title: "自訂頁尾圖示",
-      description: "自訂顯示在側邊欄底端的頁尾圖示。",
-      icon: "圖示",
-      link: "連結",
-    },
-  },
   api: {
     title: "API 金鑰",
     description:
@@ -662,6 +635,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Settings/Branding/index.jsx
similarity index 63%
rename from frontend/src/pages/GeneralSettings/Appearance/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/Branding/index.jsx
index 0ff55aa39b8..825a69ccbda 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/Branding/index.jsx
@@ -1,18 +1,14 @@
 import Sidebar from "@/components/SettingsSidebar";
 import { isMobile } from "react-device-detect";
-import FooterCustomization from "./FooterCustomization";
-import SupportEmail from "./SupportEmail";
-import CustomLogo from "./CustomLogo";
-import CustomMessages from "./CustomMessages";
+import FooterCustomization from "../components/FooterCustomization";
+import SupportEmail from "../components/SupportEmail";
+import CustomLogo from "../components/CustomLogo";
+import CustomMessages from "../components/CustomMessages";
 import { useTranslation } from "react-i18next";
-import CustomAppName from "./CustomAppName";
-import LanguagePreference from "./LanguagePreference";
-import CustomSiteSettings from "./CustomSiteSettings";
-import ShowScrollbar from "./ShowScrollbar";
-import ThemePreference from "./ThemePreference";
-import { MessageDirection } from "./MessageDirection";
+import CustomAppName from "../components/CustomAppName";
+import CustomSiteSettings from "../components/CustomSiteSettings";
 
-export default function Appearance() {
+export default function BrandingSettings() {
   const { t } = useTranslation();
 
   return (
@@ -26,19 +22,15 @@ export default function Appearance() {
           <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
             <div className="items-center">
               <p className="text-lg leading-6 font-bold text-white">
-                {t("appearance.title")}
+                {t("customization.branding.title")}
               </p>
             </div>
             <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
-              {t("appearance.description")}
+              {t("customization.branding.description")}
             </p>
           </div>
-          <ThemePreference />
-          <LanguagePreference />
-          <MessageDirection />
-          <ShowScrollbar />
-          <CustomLogo />
           <CustomAppName />
+          <CustomLogo />
           <CustomMessages />
           <FooterCustomization />
           <SupportEmail />
diff --git a/frontend/src/pages/GeneralSettings/Settings/Interface/index.jsx b/frontend/src/pages/GeneralSettings/Settings/Interface/index.jsx
new file mode 100644
index 00000000000..c55924812b0
--- /dev/null
+++ b/frontend/src/pages/GeneralSettings/Settings/Interface/index.jsx
@@ -0,0 +1,38 @@
+import Sidebar from "@/components/SettingsSidebar";
+import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import LanguagePreference from "../components/LanguagePreference";
+import ShowScrollbar from "../components/ShowScrollbar";
+import ThemePreference from "../components/ThemePreference";
+import { MessageDirection } from "../components/MessageDirection";
+
+export default function InterfaceSettings() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
+      <Sidebar />
+      <div
+        style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
+      >
+        <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
+            <div className="items-center">
+              <p className="text-lg leading-6 font-bold text-white">
+                {t("customization.interface.title")}
+              </p>
+            </div>
+            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              {t("customization.interface.description")}
+            </p>
+          </div>
+          <ThemePreference />
+          <LanguagePreference />
+          <MessageDirection />
+          <ShowScrollbar />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/CustomAppName/index.jsx
similarity index 94%
rename from frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/CustomAppName/index.jsx
index b94dbe505f0..025ec4a7b82 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/CustomAppName/index.jsx
@@ -2,8 +2,10 @@ import Admin from "@/models/admin";
 import System from "@/models/system";
 import showToast from "@/utils/toast";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function CustomAppName() {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
   const [hasChanges, setHasChanges] = useState(false);
   const [customAppName, setCustomAppName] = useState("");
@@ -62,10 +64,10 @@ export default function CustomAppName() {
       onSubmit={updateCustomAppName}
     >
       <h2 className="text-sm leading-6 font-semibold text-white">
-        Custom App Name
+        {t("customization.items.app-name.title")}
       </h2>
       <p className="text-xs text-white/60">
-        Set a custom app name that is displayed on the login page.
+        {t("customization.items.app-name.description")}
       </p>
       <div className="flex items-center gap-x-4">
         <input
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/CustomLogo/index.jsx
similarity index 93%
rename from frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/CustomLogo/index.jsx
index 0010506b1cb..b5388595e8c 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/CustomLogo/index.jsx
@@ -6,6 +6,7 @@ import { Plus } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 
 export default function CustomLogo() {
+  const { t } = useTranslation();
   const { logo: _initLogo, setLogo: _setLogo } = useLogo();
   const [logo, setLogo] = useState("");
   const [isDefaultLogo, setIsDefaultLogo] = useState(true);
@@ -66,15 +67,14 @@ export default function CustomLogo() {
   const triggerFileInputClick = () => {
     fileInputRef.current?.click();
   };
-  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <h2 className="text-sm leading-6 font-semibold text-white">
-        {t("appearance.logo.title")}
+        {t("customization.items.logo.title")}
       </h2>
       <p className="text-xs text-white/60">
-        {t("appearance.logo.description")}
+        {t("customization.items.logo.description")}
       </p>
       {isDefaultLogo ? (
         <div className="flex md:flex-row flex-col items-center">
@@ -99,10 +99,10 @@ export default function CustomLogo() {
                     <Plus className="w-6 h-6 text-black/80 m-2" />
                   </div>
                   <div className="text-theme-text-primary text-opacity-80 text-sm font-semibold py-1">
-                    {t("appearance.logo.add")}
+                    {t("customization.items.logo.add")}
                   </div>
                   <div className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1">
-                    {t("appearance.logo.recommended")}
+                    {t("customization.items.logo.recommended")}
                   </div>
                 </div>
               </div>
@@ -123,7 +123,7 @@ export default function CustomLogo() {
                 onClick={triggerFileInputClick}
                 className="text-[#FFFFFF] text-base font-medium hover:text-opacity-60 mx-2"
               >
-                {t("appearance.logo.replace")}
+                {t("customization.items.logo.replace")}
               </button>
 
               <input
@@ -138,7 +138,7 @@ export default function CustomLogo() {
                 onClick={handleRemoveLogo}
                 className="text-[#FFFFFF] text-base font-medium hover:text-opacity-60 mx-2"
               >
-                {t("appearance.logo.remove")}
+                {t("customization.items.logo.remove")}
               </button>
             </div>
           </div>
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/CustomMessages/index.jsx
similarity index 83%
rename from frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/CustomMessages/index.jsx
index 700bc28c523..22e7bdd8132 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/CustomMessages/index.jsx
@@ -6,9 +6,9 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export default function CustomMessages() {
+  const { t } = useTranslation();
   const [hasChanges, setHasChanges] = useState(false);
   const [messages, setMessages] = useState([]);
-  const { t } = useTranslation();
 
   useEffect(() => {
     async function fetchMessages() {
@@ -22,12 +22,18 @@ export default function CustomMessages() {
     if (type === "user") {
       setMessages([
         ...messages,
-        { user: t("appearance.message.double-click"), response: "" },
+        {
+          user: t("customization.items.welcome-messages.double-click"),
+          response: "",
+        },
       ]);
     } else {
       setMessages([
         ...messages,
-        { user: "", response: t("appearance.message.double-click") },
+        {
+          user: "",
+          response: t("customization.items.welcome-messages.double-click"),
+        },
       ]);
     }
   };
@@ -57,10 +63,10 @@ export default function CustomMessages() {
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <h2 className="text-sm leading-6 font-semibold text-white">
-        {t("appearance.message.title")}
+        {t("customization.items.welcome-messages.title")}
       </h2>
       <p className="text-xs text-white/60">
-        {t("appearance.message.description")}
+        {t("customization.items.welcome-messages.description")}
       </p>
       <div className="mt-2 flex flex-col gap-y-6 bg-theme-settings-input-bg rounded-lg pr-[31px] pl-[12px] pt-4 max-w-[700px]">
         {messages.map((message, index) => (
@@ -93,11 +99,11 @@ export default function CustomMessages() {
             <div className="flex items-center justify-start text-sm font-normal -ml-2">
               <Plus className="m-2" size={16} weight="bold" />
               <span className="leading-5">
-                {t("appearance.message.new")}{" "}
+                {t("customization.items.welcome-messages.new")}{" "}
                 <span className="font-bold italic mr-1">
-                  {t("appearance.message.system")}
+                  {t("customization.items.welcome-messages.system")}
                 </span>{" "}
-                {t("appearance.message.message")}
+                {t("customization.items.welcome-messages.message")}
               </span>
             </div>
           </button>
@@ -108,11 +114,11 @@ export default function CustomMessages() {
             <div className="flex items-center justify-start text-sm font-normal">
               <Plus className="m-2" size={16} weight="bold" />
               <span className="leading-5">
-                {t("appearance.message.new")}{" "}
+                {t("customization.items.welcome-messages.new")}{" "}
                 <span className="font-bold italic mr-1">
-                  {t("appearance.message.user")}
+                  {t("customization.items.welcome-messages.user")}
                 </span>{" "}
-                {t("appearance.message.message")}
+                {t("customization.items.welcome-messages.message")}
               </span>
             </div>
           </button>
@@ -124,7 +130,7 @@ export default function CustomMessages() {
             className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
             onClick={handleMessageSave}
           >
-            {t("appearance.message.save")}
+            {t("customization.items.welcome-messages.save")}
           </button>
         </div>
       )}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/CustomSiteSettings/index.jsx
similarity index 88%
rename from frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/CustomSiteSettings/index.jsx
index e0521be0744..125933bb17a 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/CustomSiteSettings/index.jsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import Admin from "@/models/admin";
 import showToast from "@/utils/toast";
+import { useTranslation } from "react-i18next";
 
 export default function CustomSiteSettings() {
+  const { t } = useTranslation();
   const [hasChanges, setHasChanges] = useState(false);
   const [settings, setSettings] = useState({
     title: null,
@@ -40,18 +42,18 @@ export default function CustomSiteSettings() {
       onSubmit={handleSiteSettingUpdate}
     >
       <h2 className="text-sm leading-6 font-semibold text-white">
-        Custom Site Settings
+        {t("customization.items.browser-appearance.title")}
       </h2>
       <p className="text-xs text-white/60">
-        Change the content of the browser tab for customization and branding.
+        {t("customization.items.browser-appearance.description")}
       </p>
 
       <div className="w-fit">
         <h2 className="text-sm leading-6 font-medium text-white mt-2">
-          Tab Title
+          {t("customization.items.browser-appearance.tab.title")}
         </h2>
         <p className="text-xs text-white/60">
-          Set a custom tab title when the app is open in a browser.
+          {t("customization.items.browser-appearance.tab.description")}
         </p>
         <div className="flex items-center gap-x-4">
           <input
@@ -75,10 +77,10 @@ export default function CustomSiteSettings() {
 
       <div className="w-fit">
         <h2 className="text-sm leading-6 font-medium text-white mt-2">
-          Tab Favicon
+          {t("customization.items.browser-appearance.favicon.title")}
         </h2>
         <p className="text-xs text-white/60">
-          Define a url to an image to use for your favicon
+          {t("customization.items.browser-appearance.favicon.description")}
         </p>
         <div className="flex items-center gap-x-2">
           <img
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/FooterCustomization/NewIconForm/index.jsx
similarity index 100%
rename from frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/FooterCustomization/NewIconForm/index.jsx
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/FooterCustomization/index.jsx
similarity index 90%
rename from frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/FooterCustomization/index.jsx
index 08d38e370ec..48b5d7a9f08 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/FooterCustomization/index.jsx
@@ -52,14 +52,14 @@ export default function FooterCustomization() {
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <h2 className="text-sm leading-6 font-semibold text-white">
-        {t("appearance.icons.title")}
+        {t("customization.items.sidebar-footer.title")}
       </h2>
       <p className="text-xs text-white/60">
-        {t("appearance.icons.description")}
+        {t("customization.items.sidebar-footer.description")}
       </p>
       <div className="mt-2 flex gap-x-3 font-medium text-white text-sm">
-        <div>{t("appearance.icons.icon")}</div>
-        <div>{t("appearance.icons.link")}</div>
+        <div>{t("customization.items.sidebar-footer.icon")}</div>
+        <div>{t("customization.items.sidebar-footer.link")}</div>
       </div>
       <div className="mt-2 flex flex-col gap-y-[10px]">
         {footerIcons.map((icon, index) => (
diff --git a/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/LanguagePreference/index.jsx
similarity index 84%
rename from frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/LanguagePreference/index.jsx
index 3e198fda199..c905b44aa03 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/LanguagePreference/index.jsx
@@ -1,6 +1,8 @@
 import { useLanguageOptions } from "@/hooks/useLanguageOptions";
+import { useTranslation } from "react-i18next";
 
 export default function LanguagePreference() {
+  const { t } = useTranslation();
   const {
     currentLanguage,
     supportedLanguages,
@@ -11,11 +13,10 @@ export default function LanguagePreference() {
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <h2 className="text-sm leading-6 font-semibold text-white">
-        Display Language
+        {t("customization.items.display-language.title")}
       </h2>
       <p className="text-xs text-white/60">
-        Select the preferred language to render AnythingLLM's UI in, when
-        applicable.
+        {t("customization.items.display-language.description")}
       </p>
       <div className="flex items-center gap-x-4">
         <select
diff --git a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx
similarity index 91%
rename from frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx
index 0dd6c70367a..8e89178996c 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx
@@ -1,16 +1,18 @@
 import { useChatMessageAlignment } from "@/hooks/useChatMessageAlignment";
 import { Tooltip } from "react-tooltip";
+import { useTranslation } from "react-i18next";
 
 export function MessageDirection() {
+  const { t } = useTranslation();
   const { msgDirection, setMsgDirection } = useChatMessageAlignment();
 
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <h2 className="text-sm leading-6 font-semibold text-white">
-        Message Chat Alignment
+        {t("customization.items.chat-message-alignment.title")}
       </h2>
       <p className="text-xs text-white/60">
-        Select the message alignment mode when using the chat interface.
+        {t("customization.items.chat-message-alignment.description")}
       </p>
       <div className="flex flex-row flex-wrap gap-x-4 pt-1 gap-y-4 md:gap-y-0">
         <ItemDirection
diff --git a/frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/ShowScrollbar/index.jsx
similarity index 90%
rename from frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/ShowScrollbar/index.jsx
index 6c427ec241c..14f4ead7a01 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/ShowScrollbar/index.jsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from "react";
 import Appearance from "@/models/appearance";
+import { useTranslation } from "react-i18next";
 
 export default function ShowScrollbar() {
+  const { t } = useTranslation();
   const [saving, setSaving] = useState(false);
   const [showScrollbar, setShowScrollbar] = useState(false);
 
@@ -29,10 +31,10 @@ export default function ShowScrollbar() {
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
       <h2 className="text-sm leading-6 font-semibold text-white">
-        Show chat window scrollbar
+        {t("customization.items.show-scrollbar.title")}
       </h2>
       <p className="text-xs text-white/60">
-        Enable or disable the scrollbar in the chat window
+        {t("customization.items.show-scrollbar.description")}
       </p>
       <div className="flex items-center gap-x-4">
         <label className="relative inline-flex cursor-pointer items-center">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/SupportEmail/index.jsx
similarity index 93%
rename from frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/SupportEmail/index.jsx
index 19c8b247168..54328006aa7 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/SupportEmail/index.jsx
@@ -3,6 +3,7 @@ import Admin from "@/models/admin";
 import System from "@/models/system";
 import showToast from "@/utils/toast";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function SupportEmail() {
   const { user } = useUser();
@@ -10,6 +11,7 @@ export default function SupportEmail() {
   const [hasChanges, setHasChanges] = useState(false);
   const [supportEmail, setSupportEmail] = useState("");
   const [originalEmail, setOriginalEmail] = useState("");
+  const { t } = useTranslation();
 
   useEffect(() => {
     const fetchSupportEmail = async () => {
@@ -57,11 +59,10 @@ export default function SupportEmail() {
       onSubmit={updateSupportEmail}
     >
       <h2 className="text-sm leading-6 font-semibold text-white">
-        Support Email
+        {t("customization.items.support-email.title")}
       </h2>
       <p className="text-xs text-white/60">
-        Set the support email address that shows up in the user menu while
-        logged into this instance.
+        {t("customization.items.support-email.description")}
       </p>
       <div className="flex items-center gap-x-4">
         <input
diff --git a/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/ThemePreference/index.jsx
similarity index 82%
rename from frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
rename to frontend/src/pages/GeneralSettings/Settings/components/ThemePreference/index.jsx
index f9f4a43009e..85d0acdfd91 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/ThemePreference/index.jsx
@@ -1,13 +1,17 @@
 import { useTheme } from "@/hooks/useTheme";
+import { useTranslation } from "react-i18next";
 
 export default function ThemePreference() {
+  const { t } = useTranslation();
   const { theme, setTheme, availableThemes } = useTheme();
 
   return (
     <div className="flex flex-col gap-y-0.5 my-4">
-      <h2 className="text-sm leading-6 font-semibold text-white">Theme</h2>
+      <h2 className="text-sm leading-6 font-semibold text-white">
+        {t("customization.items.theme.title")}
+      </h2>
       <p className="text-xs text-white/60">
-        Select your preferred theme for the application.
+        {t("customization.items.theme.description")}
       </p>
       <div className="flex items-center gap-x-4">
         <select
diff --git a/frontend/src/utils/paths.js b/frontend/src/utils/paths.js
index c591d440c51..61c2ea75f08 100644
--- a/frontend/src/utils/paths.js
+++ b/frontend/src/utils/paths.js
@@ -125,8 +125,11 @@ export default {
     security: () => {
       return "/settings/security";
     },
-    appearance: () => {
-      return "/settings/appearance";
+    interface: () => {
+      return "/settings/interface";
+    },
+    branding: () => {
+      return "/settings/branding";
     },
     agentSkills: () => {
       return "/settings/agents";