From c8d49a4d0acba2a48aefc391ef38d54f714f9685 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Wed, 14 May 2025 14:02:34 +0800
Subject: [PATCH] UX: split admin logo and fonts to separate pages (#32700)

Before we had logo and fonts page merged together. Decided to split
them.
---
 .../addon/components/admin-font-chooser.gjs   |   4 +-
 .../addon/components/admin-fonts-form.gjs     |  14 +-
 .../addon/components/admin-logo-form.gjs      | 124 +++-----
 .../admin/addon/routes/admin-config-fonts.js  |   8 +
 .../routes/admin-config-logo-and-fonts.js     |   8 -
 .../admin/addon/routes/admin-config-logo.js   |   8 +
 .../admin/addon/routes/admin-route-map.js     |   3 +-
 .../admin/addon/templates/config-fonts.gjs    |  29 ++
 .../addon/templates/config-logo-and-fonts.gjs |  52 ----
 .../admin/addon/templates/config-logo.gjs     |  29 ++
 .../modal/update-default-text-size.gjs        |   8 +-
 .../app/lib/sidebar/admin-nav-map.js          |  15 +-
 .../admin/config/fonts_controller.rb          |   3 +
 config/locales/client.en.yml                  | 174 ++++++-----
 config/routes.rb                              |   3 +-
 docs/ADMIN-QUICK-START-GUIDE.md               |   4 +-
 lib/svg_sprite.rb                             |   1 +
 spec/system/admin_fonts_spec.rb               |  76 +++++
 spec/system/admin_logo_and_fonts_spec.rb      | 289 ------------------
 spec/system/admin_logo_spec.rb                | 207 +++++++++++++
 .../components/admin_fonts_form.rb            |   2 +-
 .../components/admin_logo_form.rb             |   2 +-
 spec/system/page_objects/pages/admin_fonts.rb |  15 +
 spec/system/page_objects/pages/admin_logo.rb  |  15 +
 .../pages/admin_logo_and_fonts.rb             |  19 --
 25 files changed, 546 insertions(+), 566 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/routes/admin-config-fonts.js
 delete mode 100644 app/assets/javascripts/admin/addon/routes/admin-config-logo-and-fonts.js
 create mode 100644 app/assets/javascripts/admin/addon/routes/admin-config-logo.js
 create mode 100644 app/assets/javascripts/admin/addon/templates/config-fonts.gjs
 delete mode 100644 app/assets/javascripts/admin/addon/templates/config-logo-and-fonts.gjs
 create mode 100644 app/assets/javascripts/admin/addon/templates/config-logo.gjs
 create mode 100644 spec/system/admin_fonts_spec.rb
 delete mode 100644 spec/system/admin_logo_and_fonts_spec.rb
 create mode 100644 spec/system/admin_logo_spec.rb
 create mode 100644 spec/system/page_objects/pages/admin_fonts.rb
 create mode 100644 spec/system/page_objects/pages/admin_logo.rb
 delete mode 100644 spec/system/page_objects/pages/admin_logo_and_fonts.rb

diff --git a/app/assets/javascripts/admin/addon/components/admin-font-chooser.gjs b/app/assets/javascripts/admin/addon/components/admin-font-chooser.gjs
index 55bc7f8d0ff..cfcd140554f 100644
--- a/app/assets/javascripts/admin/addon/components/admin-font-chooser.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-font-chooser.gjs
@@ -53,9 +53,9 @@ export default class AdminFontChooser extends Component {
         class="admin-fonts-form__more font"
       >
         {{#if this.showMoreFonts}}
-          {{i18n "admin.config.logo_and_fonts.fonts.form.less_fonts"}}
+          {{i18n "admin.config.fonts.form.fewer_fonts"}}
         {{else}}
-          {{i18n "admin.config.logo_and_fonts.fonts.form.more_fonts"}}
+          {{i18n "admin.config.fonts.form.more_fonts"}}
         {{/if}}
       </DButton>
     </@field.Custom>
diff --git a/app/assets/javascripts/admin/addon/components/admin-fonts-form.gjs b/app/assets/javascripts/admin/addon/components/admin-fonts-form.gjs
index 62f848d23d0..28ccb57b59f 100644
--- a/app/assets/javascripts/admin/addon/components/admin-fonts-form.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-fonts-form.gjs
@@ -85,7 +85,7 @@ export default class AdminFontsForm extends Component {
       this.toasts.success({
         duration: 3000,
         data: {
-          message: i18n("admin.config.logo_and_fonts.fonts.form.saved"),
+          message: i18n("admin.config.fonts.form.saved"),
         },
       });
       this.siteSettingChangeTracker.refreshPage({
@@ -121,7 +121,7 @@ export default class AdminFontsForm extends Component {
     >
       <form.Field
         @name="base_font"
-        @title={{i18n "admin.config.logo_and_fonts.fonts.form.base_font.title"}}
+        @title={{i18n "admin.config.fonts.form.base_font.title"}}
         @validation="required"
         @format="full"
         as |field|
@@ -133,9 +133,7 @@ export default class AdminFontsForm extends Component {
       </form.Field>
       <form.Field
         @name="heading_font"
-        @title={{i18n
-          "admin.config.logo_and_fonts.fonts.form.heading_font.title"
-        }}
+        @title={{i18n "admin.config.fonts.form.heading_font.title"}}
         @validation="required"
         @format="full"
         as |field|
@@ -147,11 +145,9 @@ export default class AdminFontsForm extends Component {
       </form.Field>
       <form.Field
         @name="default_text_size"
-        @title={{i18n
-          "admin.config.logo_and_fonts.fonts.form.default_text_size.title"
-        }}
+        @title={{i18n "admin.config.fonts.form.default_text_size.title"}}
         @description={{i18n
-          "admin.config.logo_and_fonts.fonts.form.default_text_size.description"
+          "admin.config.fonts.form.default_text_size.description"
         }}
         @validation="required"
         @format="full"
diff --git a/app/assets/javascripts/admin/addon/components/admin-logo-form.gjs b/app/assets/javascripts/admin/addon/components/admin-logo-form.gjs
index 912effd368c..a3322edeb1b 100644
--- a/app/assets/javascripts/admin/addon/components/admin-logo-form.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-logo-form.gjs
@@ -79,7 +79,7 @@ export default class AdminLogoForm extends Component {
       this.toasts.success({
         duration: 3000,
         data: {
-          message: i18n("admin.config.logo_and_fonts.logo.form.saved"),
+          message: i18n("admin.config.logo.form.saved"),
         },
       });
       this.siteSettingChangeTracker.refreshPage(data);
@@ -131,13 +131,9 @@ export default class AdminLogoForm extends Component {
       >
         <form.Field
           @name="logo"
-          @title={{i18n "admin.config.logo_and_fonts.logo.form.logo.title"}}
-          @description={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo.description"
-          }}
-          @helpText={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo.help_text"
-          }}
+          @title={{i18n "admin.config.logo.form.logo.title"}}
+          @description={{i18n "admin.config.logo.form.logo.description"}}
+          @helpText={{i18n "admin.config.logo.form.logo.help_text"}}
           @onSet={{fn this.handleUpload "logo"}}
           as |field|
         >
@@ -145,9 +141,7 @@ export default class AdminLogoForm extends Component {
         </form.Field>
         <form.Field
           @name="logo_dark_required"
-          @title={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo_dark.required"
-          }}
+          @title={{i18n "admin.config.logo.form.logo_dark.required"}}
           @format="full"
           as |field|
         >
@@ -157,12 +151,8 @@ export default class AdminLogoForm extends Component {
           <form.Section>
             <form.Field
               @name="logo_dark"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.logo_dark.title"
-              }}
-              @helpText={{i18n
-                "admin.config.logo_and_fonts.logo.form.logo_dark.help_text"
-              }}
+              @title={{i18n "admin.config.logo.form.logo_dark.title"}}
+              @helpText={{i18n "admin.config.logo.form.logo_dark.help_text"}}
               @onSet={{fn this.handleUpload "logo_dark"}}
               as |field|
             >
@@ -172,15 +162,9 @@ export default class AdminLogoForm extends Component {
         {{/if}}
         <form.Field
           @name="large_icon"
-          @title={{i18n
-            "admin.config.logo_and_fonts.logo.form.large_icon.title"
-          }}
-          @description={{i18n
-            "admin.config.logo_and_fonts.logo.form.large_icon.description"
-          }}
-          @helpText={{i18n
-            "admin.config.logo_and_fonts.logo.form.large_icon.help_text"
-          }}
+          @title={{i18n "admin.config.logo.form.large_icon.title"}}
+          @description={{i18n "admin.config.logo.form.large_icon.description"}}
+          @helpText={{i18n "admin.config.logo.form.large_icon.help_text"}}
           @onSet={{fn this.handleUpload "large_icon"}}
           @placeholderUrl={{this.placeholders.large_icon}}
           as |field|
@@ -189,10 +173,8 @@ export default class AdminLogoForm extends Component {
         </form.Field>
         <form.Field
           @name="favicon"
-          @title={{i18n "admin.config.logo_and_fonts.logo.form.favicon.title"}}
-          @description={{i18n
-            "admin.config.logo_and_fonts.logo.form.favicon.description"
-          }}
+          @title={{i18n "admin.config.logo.form.favicon.title"}}
+          @description={{i18n "admin.config.logo.form.favicon.description"}}
           @onSet={{fn this.handleUpload "favicon"}}
           @placeholderUrl={{this.placeholders.favicon}}
           as |field|
@@ -201,15 +183,9 @@ export default class AdminLogoForm extends Component {
         </form.Field>
         <form.Field
           @name="logo_small"
-          @title={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo_small.title"
-          }}
-          @description={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo_small.description"
-          }}
-          @helpText={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo_small.help_text"
-          }}
+          @title={{i18n "admin.config.logo.form.logo_small.title"}}
+          @description={{i18n "admin.config.logo.form.logo_small.description"}}
+          @helpText={{i18n "admin.config.logo.form.logo_small.help_text"}}
           @onSet={{fn this.handleUpload "logo_small"}}
           as |field|
         >
@@ -217,9 +193,7 @@ export default class AdminLogoForm extends Component {
         </form.Field>
         <form.Field
           @name="logo_small_dark_required"
-          @title={{i18n
-            "admin.config.logo_and_fonts.logo.form.logo_small_dark.required"
-          }}
+          @title={{i18n "admin.config.logo.form.logo_small_dark.required"}}
           @format="full"
           as |field|
         >
@@ -229,11 +203,9 @@ export default class AdminLogoForm extends Component {
           <form.Section>
             <form.Field
               @name="logo_small_dark"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.logo_small_dark.title"
-              }}
+              @title={{i18n "admin.config.logo.form.logo_small_dark.title"}}
               @helpText={{i18n
-                "admin.config.logo_and_fonts.logo.form.logo_small_dark.help_text"
+                "admin.config.logo.form.logo_small_dark.help_text"
               }}
               @onSet={{fn this.handleUpload "logo_small_dark"}}
               as |field|
@@ -244,7 +216,7 @@ export default class AdminLogoForm extends Component {
         {{/if}}
 
         <AdminConfigAreaCardSection
-          @heading={{i18n "admin.config.logo_and_fonts.logo.form.mobile"}}
+          @heading={{i18n "admin.config.logo.form.mobile"}}
           class="admin-logo-form__mobile-section"
           @collapsable={{true}}
           @collapsed={{true}}
@@ -252,15 +224,11 @@ export default class AdminLogoForm extends Component {
           <:content>
             <form.Field
               @name="mobile_logo"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.mobile_logo.title"
-              }}
+              @title={{i18n "admin.config.logo.form.mobile_logo.title"}}
               @description={{i18n
-                "admin.config.logo_and_fonts.logo.form.mobile_logo.description"
-              }}
-              @helpText={{i18n
-                "admin.config.logo_and_fonts.logo.form.mobile_logo.help_text"
+                "admin.config.logo.form.mobile_logo.description"
               }}
+              @helpText={{i18n "admin.config.logo.form.mobile_logo.help_text"}}
               @onSet={{fn this.handleUpload "mobile_logo"}}
               @placeholderUrl={{this.placeholders.mobile_logo}}
               as |field|
@@ -269,9 +237,7 @@ export default class AdminLogoForm extends Component {
             </form.Field>
             <form.Field
               @name="mobile_logo_dark_required"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.mobile_logo_dark.required"
-              }}
+              @title={{i18n "admin.config.logo.form.mobile_logo_dark.required"}}
               @format="full"
               as |field|
             >
@@ -282,10 +248,10 @@ export default class AdminLogoForm extends Component {
                 <form.Field
                   @name="mobile_logo_dark"
                   @title={{i18n
-                    "admin.config.logo_and_fonts.logo.form.mobile_logo_dark.title"
+                    "admin.config.logo.form.mobile_logo_dark.title"
                   }}
                   @helpText={{i18n
-                    "admin.config.logo_and_fonts.logo.form.mobile_logo_dark.help_text"
+                    "admin.config.logo.form.mobile_logo_dark.help_text"
                   }}
                   @onSet={{fn this.handleUpload "mobile_logo_dark"}}
                   as |field|
@@ -296,14 +262,12 @@ export default class AdminLogoForm extends Component {
             {{/if}}
             <form.Field
               @name="manifest_icon"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.manifest_icon.title"
-              }}
+              @title={{i18n "admin.config.logo.form.manifest_icon.title"}}
               @description={{i18n
-                "admin.config.logo_and_fonts.logo.form.manifest_icon.description"
+                "admin.config.logo.form.manifest_icon.description"
               }}
               @helpText={{i18n
-                "admin.config.logo_and_fonts.logo.form.manifest_icon.help_text"
+                "admin.config.logo.form.manifest_icon.help_text"
               }}
               @onSet={{fn this.handleUpload "manifest_icon"}}
               as |field|
@@ -313,10 +277,10 @@ export default class AdminLogoForm extends Component {
             <form.Field
               @name="manifest_screenshots"
               @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.manifest_screenshots.title"
+                "admin.config.logo.form.manifest_screenshots.title"
               }}
               @description={{i18n
-                "admin.config.logo_and_fonts.logo.form.manifest_screenshots.description"
+                "admin.config.logo.form.manifest_screenshots.description"
               }}
               @format="full"
               as |field|
@@ -333,14 +297,12 @@ export default class AdminLogoForm extends Component {
             </form.Field>
             <form.Field
               @name="apple_touch_icon"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.apple_touch_icon.title"
-              }}
+              @title={{i18n "admin.config.logo.form.apple_touch_icon.title"}}
               @description={{i18n
-                "admin.config.logo_and_fonts.logo.form.apple_touch_icon.description"
+                "admin.config.logo.form.apple_touch_icon.description"
               }}
               @helpText={{i18n
-                "admin.config.logo_and_fonts.logo.form.apple_touch_icon.help_text"
+                "admin.config.logo.form.apple_touch_icon.help_text"
               }}
               @onSet={{fn this.handleUpload "apple_touch_icon"}}
               @placeholderUrl={{this.placeholders.apple_touch_icon}}
@@ -351,7 +313,7 @@ export default class AdminLogoForm extends Component {
           </:content>
         </AdminConfigAreaCardSection>
         <AdminConfigAreaCardSection
-          @heading={{i18n "admin.config.logo_and_fonts.logo.form.email"}}
+          @heading={{i18n "admin.config.logo.form.email"}}
           class="admin-logo-form__email-section"
           @collapsable={{true}}
           @collapsed={{true}}
@@ -359,15 +321,11 @@ export default class AdminLogoForm extends Component {
           <:content>
             <form.Field
               @name="digest_logo"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.digest_logo.title"
-              }}
+              @title={{i18n "admin.config.logo.form.digest_logo.title"}}
               @description={{i18n
-                "admin.config.logo_and_fonts.logo.form.digest_logo.description"
-              }}
-              @helpText={{i18n
-                "admin.config.logo_and_fonts.logo.form.digest_logo.help_text"
+                "admin.config.logo.form.digest_logo.description"
               }}
+              @helpText={{i18n "admin.config.logo.form.digest_logo.help_text"}}
               @onSet={{fn this.handleUpload "digest_logo"}}
               @placeholderUrl={{this.placeholders.digest_logo}}
               as |field|
@@ -380,7 +338,7 @@ export default class AdminLogoForm extends Component {
           </:content>
         </AdminConfigAreaCardSection>
         <AdminConfigAreaCardSection
-          @heading={{i18n "admin.config.logo_and_fonts.logo.form.social_media"}}
+          @heading={{i18n "admin.config.logo.form.social_media"}}
           class="admin-logo-form__social-media-section"
           @collapsable={{true}}
           @collapsed={{true}}
@@ -388,11 +346,9 @@ export default class AdminLogoForm extends Component {
           <:content>
             <form.Field
               @name="opengraph_image"
-              @title={{i18n
-                "admin.config.logo_and_fonts.logo.form.opengraph_image.title"
-              }}
+              @title={{i18n "admin.config.logo.form.opengraph_image.title"}}
               @description={{i18n
-                "admin.config.logo_and_fonts.logo.form.opengraph_image.description"
+                "admin.config.logo.form.opengraph_image.description"
               }}
               @onSet={{fn this.handleUpload "opengraph_image"}}
               @placeholderUrl={{this.placeholders.opengraph_image}}
diff --git a/app/assets/javascripts/admin/addon/routes/admin-config-fonts.js b/app/assets/javascripts/admin/addon/routes/admin-config-fonts.js
new file mode 100644
index 00000000000..d34cebd3342
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/routes/admin-config-fonts.js
@@ -0,0 +1,8 @@
+import DiscourseRoute from "discourse/routes/discourse";
+import { i18n } from "discourse-i18n";
+
+export default class AdminConfigFontsRoute extends DiscourseRoute {
+  titleToken() {
+    return i18n("admin.config.fonts.title");
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/routes/admin-config-logo-and-fonts.js b/app/assets/javascripts/admin/addon/routes/admin-config-logo-and-fonts.js
deleted file mode 100644
index 7357796fe14..00000000000
--- a/app/assets/javascripts/admin/addon/routes/admin-config-logo-and-fonts.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import DiscourseRoute from "discourse/routes/discourse";
-import { i18n } from "discourse-i18n";
-
-export default class AdminConfigLogoAndFontsRoute extends DiscourseRoute {
-  titleToken() {
-    return i18n("admin.config.logo_and_fonts.title");
-  }
-}
diff --git a/app/assets/javascripts/admin/addon/routes/admin-config-logo.js b/app/assets/javascripts/admin/addon/routes/admin-config-logo.js
new file mode 100644
index 00000000000..982488ddf0c
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/routes/admin-config-logo.js
@@ -0,0 +1,8 @@
+import DiscourseRoute from "discourse/routes/discourse";
+import { i18n } from "discourse-i18n";
+
+export default class AdminConfigLogoRoute extends DiscourseRoute {
+  titleToken() {
+    return i18n("admin.config.logo.title");
+  }
+}
diff --git a/app/assets/javascripts/admin/addon/routes/admin-route-map.js b/app/assets/javascripts/admin/addon/routes/admin-route-map.js
index 987f419f083..7021b1b5165 100644
--- a/app/assets/javascripts/admin/addon/routes/admin-route-map.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-route-map.js
@@ -362,7 +362,8 @@ export default function () {
         this.route("developer", function () {
           this.route("settings", { path: "/" });
         });
-        this.route("logo-and-fonts");
+        this.route("logo");
+        this.route("fonts");
         this.route("navigation", function () {
           this.route("settings", { path: "/" });
         });
diff --git a/app/assets/javascripts/admin/addon/templates/config-fonts.gjs b/app/assets/javascripts/admin/addon/templates/config-fonts.gjs
new file mode 100644
index 00000000000..080c6b95203
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/templates/config-fonts.gjs
@@ -0,0 +1,29 @@
+import RouteTemplate from "ember-route-template";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DPageHeader from "discourse/components/d-page-header";
+import { i18n } from "discourse-i18n";
+import AdminFontsForm from "admin/components/admin-fonts-form";
+
+export default RouteTemplate(
+  <template>
+    <div class="admin-config-page">
+      <DPageHeader
+        @hideTabs={{true}}
+        @titleLabel={{i18n "admin.config.fonts.title"}}
+      >
+        <:breadcrumbs>
+          <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+          <DBreadcrumbsItem
+            @path="/admin/config/fonts"
+            @label={{i18n "admin.config.fonts.title"}}
+          />
+        </:breadcrumbs>
+      </DPageHeader>
+      <div class="admin-config-area">
+        <div class="admin-config-area__primary-content">
+          <AdminFontsForm />
+        </div>
+      </div>
+    </div>
+  </template>
+);
diff --git a/app/assets/javascripts/admin/addon/templates/config-logo-and-fonts.gjs b/app/assets/javascripts/admin/addon/templates/config-logo-and-fonts.gjs
deleted file mode 100644
index 6b2f131ff23..00000000000
--- a/app/assets/javascripts/admin/addon/templates/config-logo-and-fonts.gjs
+++ /dev/null
@@ -1,52 +0,0 @@
-import RouteTemplate from "ember-route-template";
-import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
-import DPageHeader from "discourse/components/d-page-header";
-import { i18n } from "discourse-i18n";
-import AdminConfigAreaCard from "admin/components/admin-config-area-card";
-import AdminFontsForm from "admin/components/admin-fonts-form";
-import AdminLogoForm from "admin/components/admin-logo-form";
-
-export default RouteTemplate(
-  <template>
-    <div class="admin-config-page">
-      <DPageHeader
-        @hideTabs={{true}}
-        @titleLabel={{i18n "admin.config.logo_and_fonts.title"}}
-      >
-        <:breadcrumbs>
-          <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
-          <DBreadcrumbsItem
-            @path="/admin/config/logo-and-fonts"
-            @label={{i18n "admin.config.logo_and_fonts.title"}}
-          />
-        </:breadcrumbs>
-      </DPageHeader>
-      <div class="admin-config-area">
-        <div class="admin-config-area__primary-content">
-          <AdminConfigAreaCard
-            @heading="admin.config.logo_and_fonts.logo.title"
-            @collapsable={{true}}
-            class="admin-config-area-logo-and-fonts__logo"
-          >
-            <:content>
-              <AdminLogoForm />
-            </:content>
-          </AdminConfigAreaCard>
-        </div>
-      </div>
-      <div class="admin-config-area">
-        <div class="admin-config-area__primary-content">
-          <AdminConfigAreaCard
-            @heading="admin.config.logo_and_fonts.fonts.title"
-            @collapsable={{true}}
-            class="admin-config-area-logo-and-fonts__fonts"
-          >
-            <:content>
-              <AdminFontsForm />
-            </:content>
-          </AdminConfigAreaCard>
-        </div>
-      </div>
-    </div>
-  </template>
-);
diff --git a/app/assets/javascripts/admin/addon/templates/config-logo.gjs b/app/assets/javascripts/admin/addon/templates/config-logo.gjs
new file mode 100644
index 00000000000..762ed38ebab
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/templates/config-logo.gjs
@@ -0,0 +1,29 @@
+import RouteTemplate from "ember-route-template";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DPageHeader from "discourse/components/d-page-header";
+import { i18n } from "discourse-i18n";
+import AdminLogoForm from "admin/components/admin-logo-form";
+
+export default RouteTemplate(
+  <template>
+    <div class="admin-config-page">
+      <DPageHeader
+        @hideTabs={{true}}
+        @titleLabel={{i18n "admin.config.logo.title"}}
+      >
+        <:breadcrumbs>
+          <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+          <DBreadcrumbsItem
+            @path="/admin/config/logo"
+            @label={{i18n "admin.config.logo.title"}}
+          />
+        </:breadcrumbs>
+      </DPageHeader>
+      <div class="admin-config-area">
+        <div class="admin-config-area__primary-content">
+          <AdminLogoForm />
+        </div>
+      </div>
+    </div>
+  </template>
+);
diff --git a/app/assets/javascripts/discourse/app/components/modal/update-default-text-size.gjs b/app/assets/javascripts/discourse/app/components/modal/update-default-text-size.gjs
index c14b47275ee..cbde8903a4f 100644
--- a/app/assets/javascripts/discourse/app/components/modal/update-default-text-size.gjs
+++ b/app/assets/javascripts/discourse/app/components/modal/update-default-text-size.gjs
@@ -19,24 +19,24 @@ export default class UpdateDefaultTextSize extends Component {
 
   <template>
     <DModal
-      @title={{i18n "admin.config.logo_and_fonts.fonts.backfill_modal.title"}}
+      @title={{i18n "admin.config.fonts.backfill_modal.title"}}
       @closeModal={{@closeModal}}
     >
       <:body>
         {{i18n
-          "admin.config.logo_and_fonts.fonts.backfill_modal.description"
+          "admin.config.fonts.backfill_modal.description"
           count=@model.count
         }}
       </:body>
       <:footer>
         <DButton
           @action={{this.updateExistingUsers}}
-          @label="admin.config.logo_and_fonts.fonts.backfill_modal.modal_yes"
+          @label="admin.config.fonts.backfill_modal.modal_yes"
           class="btn-primary"
         />
         <DButton
           @action={{this.cancel}}
-          @label="admin.config.logo_and_fonts.fonts.backfill_modal.modal_no"
+          @label="admin.config.fonts.backfill_modal.modal_no"
         />
       </:footer>
     </DModal>
diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js b/app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js
index 5bc6763c3b8..587a1fac0cc 100644
--- a/app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js
+++ b/app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js
@@ -218,12 +218,19 @@ export const ADMIN_NAV_MAP = [
     label: "admin.config_sections.appearance.title",
     links: [
       {
-        name: "admin_logo_and_fonts",
-        route: "adminConfig.logo-and-fonts",
-        label: "admin.config.logo_and_fonts.title",
-        description: "admin.config.logo_and_fonts.header_description",
+        name: "admin_logo",
+        route: "adminConfig.logo",
+        label: "admin.config.logo.title",
+        description: "admin.config.logo.header_description",
         icon: "fab-discourse",
       },
+      {
+        name: "admin_fonts",
+        route: "adminConfig.fonts",
+        label: "admin.config.fonts.title",
+        description: "admin.config.fonts.header_description",
+        icon: "font",
+      },
       {
         name: "admin_color_palettes",
         route: "adminCustomize.colors",
diff --git a/app/controllers/admin/config/fonts_controller.rb b/app/controllers/admin/config/fonts_controller.rb
index 828a0f2e99b..fa08745cb23 100644
--- a/app/controllers/admin/config/fonts_controller.rb
+++ b/app/controllers/admin/config/fonts_controller.rb
@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 class Admin::Config::FontsController < Admin::AdminController
+  def index
+  end
+
   def update
     SiteSetting::Update.call(
       guardian:,
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 60893327597..7635ddb2a1d 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5328,93 +5328,91 @@ en:
         login_and_authentication:
           title: "Login & authentication"
           header_description: "Configure how users log in and authenticate, secrets and keys, OAuth2 providers, and more"
-        logo_and_fonts:
-          title: "Logo & fonts"
-          header_description: "Customize the variations of your site logo and fonts"
-          logo:
-            title: "Logo"
-            form:
-              saved: "Logo settings are saved."
-              logo:
-                title: "Primary logo"
-                description: "Appears on the site's top navigation, as well as the top of the site's Email Notifications."
-                help_text: "Recommended size is 600 x 80 pixels."
-              logo_dark:
-                required: "Use a different logo for dark mode?"
-                title: "Primary logo dark"
-                help_text: "Recommended size is 600 x 80 pixels."
-              large_icon:
-                title: "Square icon"
-                description: "A squared version of the logo image appears at the top of the administration and is also the mobile home screen app logo."
-                help_text: "Recommended size is 512 x 512 pixels."
-              square_icon_dark:
-                required: "Use a different square icon for dark mode?"
-                title: "Square icon dark"
-                help_text: "Recommended size is 512 x 512 pixels."
-              favicon:
-                title: "Favicon"
-                description: "The logo will appear as the icon in the browser tab and the browser favorites/bookmarks."
-              logo_small:
-                title: "Small logo"
-                description: "The small logo image at the top left of your site, seen when scrolling down. If left blank, a home glyph will be shown."
-                help_text: "Recommended size is 120 x 120 pixels."
-              logo_small_dark:
-                required: "Use a different small logo for dark mode?"
-                title: "Small logo dark"
-                help_text: "Recommended size is 120 x 120 pixels."
-              mobile: "Mobile"
-              email: "Email"
-              social_media: "Social media"
-              mobile_logo:
-                title: "Mobile logo"
-                description: "The logo used on mobile version of your site. If left blank, the image from the `logo` setting will be used."
-                help_text: "Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1."
-              mobile_logo_dark:
-                required: "Use a different mobile logo for dark mode?"
-                title: "Mobile logo dark"
-                help_text: "Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1."
-              manifest_icon:
-                title: "Manifest icon"
-                description: "Image used as logo/splash image on Android. If left blank, large_icon will be used."
-                help_text: "Recommended size is 512 x 512 pixels."
-              manifest_screenshots:
-                title: "Manifest screenshots"
-                description: "Screenshots that showcase your instance features and functionality on its install prompt page. All images should be local uploads and of the same dimensions."
-              apple_touch_icon:
-                title: "Apple touch icon"
-                description: "Icon used for Apple touch devices. If left blank, large_icon will be used."
-                help_text: "Recommended size is 180 x 180 pixels. A transparent background is not recommended."
-              digest_logo:
-                title: "Digest logo"
-                description: "The alternate logo image used at the top of your site's email summary. If left blank, the image from the `logo` setting will be used."
-                help_text: "Use a wide rectangle image. Don't use an SVG image."
-              opengraph_image:
-                title: "OpenGraph image"
-                description: "Default opengraph image, used when the page has no other suitable image. If left blank, large_icon will be used."
-              x_summary_large_image:
-                title: "X summary large image"
-                description: "X card 'summary large image'. If left blank, regular card metadata is generated using the OpenGraph_image, as long as that is not also a .svg."
-                help_text: "recommended size is at least 280 x 150 pixels. Don't use an SVG image."
-          fonts:
-            title: "Fonts"
-            form:
-              more_fonts: "More fonts"
-              less_fonts: "Less fonts"
-              saved: "Font settings are saved."
-              base_font:
-                title: "Base font"
-              heading_font:
-                title: "Heading font"
-              default_text_size:
-                title: "Default text size"
-                description: "This size can be subsequently adjusted by each user according to their preferences."
-            backfill_modal:
-              title: "Apply new default text settings?"
-              description:
-                one: "You’ve updated the default text size. Would you like to apply this change to %{count} existing user?"
-                other: "You’ve updated the default text size. Would you like to apply this change to %{count} existing users?"
-              modal_yes: "Yes"
-              modal_no: "No, only apply going forward"
+
+        logo:
+          title: "Logo"
+          form:
+            saved: "Logo settings are saved."
+            logo:
+              title: "Primary logo"
+              description: "Appears on the site's top navigation, as well as the top of the site's Email Notifications."
+              help_text: "Recommended size is 600 x 80 pixels."
+            logo_dark:
+              required: "Use a different logo for dark mode?"
+              title: "Primary logo dark"
+              help_text: "Recommended size is 600 x 80 pixels."
+            large_icon:
+              title: "Square icon"
+              description: "A squared version of the logo image appears at the top of the administration and is also the mobile home screen app logo."
+              help_text: "Recommended size is 512 x 512 pixels."
+            square_icon_dark:
+              required: "Use a different square icon for dark mode?"
+              title: "Square icon dark"
+              help_text: "Recommended size is 512 x 512 pixels."
+            favicon:
+              title: "Favicon"
+              description: "The logo will appear as the icon in the browser tab and the browser favorites/bookmarks."
+            logo_small:
+              title: "Small logo"
+              description: "The small logo image at the top left of your site, seen when scrolling down. If left blank, a home glyph will be shown."
+              help_text: "Recommended size is 120 x 120 pixels."
+            logo_small_dark:
+              required: "Use a different small logo for dark mode?"
+              title: "Small logo dark"
+              help_text: "Recommended size is 120 x 120 pixels."
+            mobile: "Mobile"
+            email: "Email"
+            social_media: "Social media"
+            mobile_logo:
+              title: "Mobile logo"
+              description: "The logo used on mobile version of your site. If left blank, the image from the `logo` setting will be used."
+              help_text: "Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1."
+            mobile_logo_dark:
+              required: "Use a different mobile logo for dark mode?"
+              title: "Mobile logo dark"
+              help_text: "Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1."
+            manifest_icon:
+              title: "Manifest icon"
+              description: "Image used as logo/splash image on Android. If left blank, large_icon will be used."
+              help_text: "Recommended size is 512 x 512 pixels."
+            manifest_screenshots:
+              title: "Manifest screenshots"
+              description: "Screenshots that showcase your instance features and functionality on its install prompt page. All images should be local uploads and of the same dimensions."
+            apple_touch_icon:
+              title: "Apple touch icon"
+              description: "Icon used for Apple touch devices. If left blank, large_icon will be used."
+              help_text: "Recommended size is 180 x 180 pixels. A transparent background is not recommended."
+            digest_logo:
+              title: "Digest logo"
+              description: "The alternate logo image used at the top of your site's email summary. If left blank, the image from the `logo` setting will be used."
+              help_text: "Use a wide rectangle image. Don't use an SVG image."
+            opengraph_image:
+              title: "OpenGraph image"
+              description: "Default opengraph image, used when the page has no other suitable image. If left blank, large_icon will be used."
+            x_summary_large_image:
+              title: "X summary large image"
+              description: "X card 'summary large image'. If left blank, regular card metadata is generated using the OpenGraph_image, as long as that is not also a .svg."
+              help_text: "recommended size is at least 280 x 150 pixels. Don't use an SVG image."
+        fonts:
+          title: "Fonts"
+          form:
+            more_fonts: "More fonts"
+            fewer_fonts: "Fewer fonts"
+            saved: "Font settings are saved."
+            base_font:
+              title: "Base font"
+            heading_font:
+              title: "Heading font"
+            default_text_size:
+              title: "Default text size"
+              description: "This size can be subsequently adjusted by each user according to their preferences."
+          backfill_modal:
+            title: "Apply new default text settings?"
+            description:
+              one: "You’ve updated the default text size. Would you like to apply this change to %{count} existing user?"
+              other: "You’ve updated the default text size. Would you like to apply this change to %{count} existing users?"
+            modal_yes: "Yes"
+            modal_no: "No, only apply going forward"
 
         navigation:
           title: "Navigation"
@@ -6358,8 +6356,6 @@ en:
             toggle_description: "Color palette can be selected by users"
           colors:
             title: "Colors"
-          logo_and_fonts_hint: "Looking to update your logo and fonts?"
-          go_to_logo_and_fonts: "Go to Logo & fonts"
           save_changes: "Save changes"
           unsaved_changes: "You have unsaved changes"
           copy_of: "Copy of %{name}"
diff --git a/config/routes.rb b/config/routes.rb
index 69f278a01b7..4465269db40 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -429,7 +429,8 @@ Discourse::Application.routes.draw do
         get "experimental" => "site_settings#index"
         get "trust-levels" => "site_settings#index"
         get "group-permissions" => "site_settings#index"
-        get "/logo-and-fonts" => "logo#index"
+        get "/logo" => "logo#index"
+        get "/fonts" => "fonts#index"
         put "/logo" => "logo#update"
         put "/fonts" => "fonts#update"
         get "colors/:id" => "color_palettes#show"
diff --git a/docs/ADMIN-QUICK-START-GUIDE.md b/docs/ADMIN-QUICK-START-GUIDE.md
index 12e03ba6aec..72b5a363bcd 100644
--- a/docs/ADMIN-QUICK-START-GUIDE.md
+++ b/docs/ADMIN-QUICK-START-GUIDE.md
@@ -28,7 +28,7 @@ Help your new members feel right at home when they first arrive.
 
 → Personalize your **[<kbd>welcome topic</kbd>](%{base_url}/t/-/5/)** and fill out your **[<kbd>about page</kbd>](%{base_url}/about)**.
 
-→ Customize your **[<kbd>site appearance</kbd>](%{base_url}/admin/config/logo-and-fonts)**.
+→ Customize your **[<kbd>site appearance</kbd>](%{base_url}/admin/config/logo)**.
 
 → Set up different **[<kbd>login methods</kbd>](%{base_url}/admin/config/login-and-authentication)** for your members.
 
@@ -49,4 +49,4 @@ Welcome a few people in - the more, the merrier!
 
 * Join the [Discourse community](https://meta.discourse.org/).
 * Take inspiration from [other Discourse communities](https://discover.discourse.com/).
-* Read the [Discourse blog](https://blog.discourse.org/).
\ No newline at end of file
+* Read the [Discourse blog](https://blog.discourse.org/).
diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb
index e9c168f6373..be7b013294e 100644
--- a/lib/svg_sprite.rb
+++ b/lib/svg_sprite.rb
@@ -156,6 +156,7 @@ module SvgSprite
         flask
         folder
         folder-open
+        font
         forward
         forward-fast
         forward-step
diff --git a/spec/system/admin_fonts_spec.rb b/spec/system/admin_fonts_spec.rb
new file mode 100644
index 00000000000..f48298116e8
--- /dev/null
+++ b/spec/system/admin_fonts_spec.rb
@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+describe "Admin Fonts Page", type: :system do
+  fab!(:admin)
+  fab!(:image_upload)
+
+  let(:fonts_page) { PageObjects::Pages::AdminFonts.new }
+  let(:image_file) { file_from_fixtures("logo.png", "images") }
+  let(:modal) { PageObjects::Modals::Base.new }
+
+  before { sign_in(admin) }
+
+  describe "fonts" do
+    it "allows an admin to change the site's base font and heading font" do
+      fonts_page.visit
+      fonts_page.form.select_font("base", "helvetica")
+
+      expect(fonts_page.form).to have_no_font("heading", "JetBrains Mono")
+      fonts_page.form.show_more_fonts("heading")
+      fonts_page.form.select_font("heading", "jet-brains-mono")
+
+      fonts_page.form.submit
+      expect(fonts_page.form).to have_saved_successfully
+
+      expect(page.find("html")["style"]).to include(
+        "font-family: Helvetica; --heading-font-family: JetBrains Mono",
+      )
+
+      fonts_page.visit
+      expect(fonts_page.form.active_font("base")).to eq("Helvetica")
+
+      fonts_page.visit
+      expect(fonts_page.form.active_font("heading")).to eq("JetBrains Mono")
+    end
+
+    it "allows an admin to change default text size and does not update existing users preferences" do
+      Jobs.run_immediately!
+      fonts_page.visit
+      expect(page).to have_css("html.text-size-normal")
+      fonts_page.form.select_default_text_size("larger")
+
+      fonts_page.form.submit
+      expect(modal).to be_open
+      expect(modal.header).to have_content(
+        I18n.t("admin_js.admin.config.fonts.backfill_modal.title"),
+      )
+      modal.close
+      expect(modal).to be_closed
+      expect(fonts_page.form).to have_saved_successfully
+
+      expect(page.find("html")["class"]).to include("text-size-larger")
+
+      visit "/"
+      expect(page).to have_css("html.text-size-normal")
+    end
+
+    it "allows an admin to change default text size and updates existing users preferences" do
+      Jobs.run_immediately!
+      fonts_page.visit
+      expect(page).to have_css("html.text-size-normal")
+      fonts_page.form.select_default_text_size("larger")
+
+      fonts_page.form.submit
+      expect(modal).to be_open
+      expect(modal.header).to have_content(
+        I18n.t("admin_js.admin.config.fonts.backfill_modal.title"),
+      )
+      modal.click_primary_button
+      expect(modal).to be_closed
+      expect(fonts_page.form).to have_saved_successfully
+
+      visit "/"
+      expect(page).to have_css("html.text-size-larger")
+    end
+  end
+end
diff --git a/spec/system/admin_logo_and_fonts_spec.rb b/spec/system/admin_logo_and_fonts_spec.rb
deleted file mode 100644
index 02d28781cc6..00000000000
--- a/spec/system/admin_logo_and_fonts_spec.rb
+++ /dev/null
@@ -1,289 +0,0 @@
-# frozen_string_literal: true
-
-describe "Admin Logo and Fonts Page", type: :system do
-  fab!(:admin)
-  fab!(:image_upload)
-
-  let(:logo_and_fonts_page) { PageObjects::Pages::AdminLogoAndFonts.new }
-  let(:image_file) { file_from_fixtures("logo.png", "images") }
-  let(:modal) { PageObjects::Modals::Base.new }
-
-  before { sign_in(admin) }
-
-  describe "logo" do
-    describe "primary section" do
-      let(:primary_section_logos) do
-        %i[logo logo_dark large_icon favicon logo_small logo_small_dark]
-      end
-      it "can upload images and dark versions" do
-        logo_and_fonts_page.visit
-
-        expect(logo_and_fonts_page.logo_form).to have_no_form_field(:logo_dark)
-        logo_and_fonts_page.logo_form.toggle_dark_mode(:logo_dark_required)
-        expect(logo_and_fonts_page.logo_form).to have_form_field(:logo_dark)
-
-        expect(logo_and_fonts_page.logo_form).to have_no_form_field(:logo_small_dark)
-        logo_and_fonts_page.logo_form.toggle_dark_mode(:logo_small_dark_required)
-        expect(logo_and_fonts_page.logo_form).to have_form_field(:logo_small_dark)
-
-        primary_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.upload_image(image_type, image_file)
-        end
-
-        primary_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        visit("/")
-        logo_and_fonts_page.visit
-
-        expect(logo_and_fonts_page.logo_form).to have_form_field(:logo_dark)
-        expect(logo_and_fonts_page.logo_form).to have_form_field(:logo_small_dark)
-
-        primary_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-      end
-
-      it "can remove images" do
-        primary_section_logos.each { |image_type| SiteSetting.send("#{image_type}=", image_upload) }
-
-        logo_and_fonts_page.visit
-
-        primary_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        primary_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.remove_image(image_type)
-        end
-
-        logo_and_fonts_page.logo_form.submit
-
-        try_until_success do
-          primary_section_logos.each do |image_type|
-            expect(SiteSetting.send(image_type)).to eq(nil)
-          end
-        end
-      end
-    end
-
-    describe "mobile section" do
-      let(:mobile_section_logos) { %i[mobile_logo mobile_logo_dark manifest_icon apple_touch_icon] }
-      it "can upload images and dark versions" do
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_mobile_section
-
-        expect(logo_and_fonts_page.logo_form).to have_no_form_field(:mobile_logo_dark)
-        logo_and_fonts_page.logo_form.toggle_dark_mode(:mobile_logo_dark_required)
-        expect(logo_and_fonts_page.logo_form).to have_form_field(:mobile_logo_dark)
-
-        mobile_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.upload_image(image_type, image_file)
-        end
-
-        mobile_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        visit("/")
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_mobile_section
-
-        expect(logo_and_fonts_page.logo_form).to have_form_field(:mobile_logo_dark)
-
-        mobile_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-      end
-
-      it "can remove images" do
-        mobile_section_logos.each { |image_type| SiteSetting.send("#{image_type}=", image_upload) }
-
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_mobile_section
-
-        mobile_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        mobile_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.remove_image(image_type)
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        mobile_section_logos.each { |image_type| expect(SiteSetting.send(image_type)).to eq(nil) }
-      end
-    end
-
-    describe "email section" do
-      let(:email_section_logos) { %i[digest_logo] }
-      it "can upload images" do
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_email_section
-
-        email_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.upload_image(image_type, image_file)
-        end
-
-        email_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        visit("/")
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_email_section
-
-        email_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-      end
-
-      it "can remove images" do
-        email_section_logos.each { |image_type| SiteSetting.send("#{image_type}=", image_upload) }
-
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_email_section
-
-        email_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        email_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.remove_image(image_type)
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        email_section_logos.each { |image_type| expect(SiteSetting.send(image_type)).to eq(nil) }
-      end
-    end
-
-    describe "social media section" do
-      let(:social_media_section_logos) { %i[opengraph_image] }
-      it "can upload images" do
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_social_media_section
-
-        social_media_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.upload_image(image_type, image_file)
-        end
-
-        social_media_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        visit("/")
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_social_media_section
-
-        social_media_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-      end
-
-      it "can remove images" do
-        social_media_section_logos.each do |image_type|
-          SiteSetting.send("#{image_type}=", image_upload)
-        end
-
-        logo_and_fonts_page.visit
-        logo_and_fonts_page.logo_form.expand_social_media_section
-
-        social_media_section_logos.each do |image_type|
-          expect(logo_and_fonts_page.logo_form.image_uploader(image_type)).to have_uploaded_image
-        end
-
-        social_media_section_logos.each do |image_type|
-          logo_and_fonts_page.logo_form.remove_image(image_type)
-        end
-
-        logo_and_fonts_page.logo_form.submit
-        expect(logo_and_fonts_page.logo_form).to have_saved_successfully
-
-        social_media_section_logos.each do |image_type|
-          expect(SiteSetting.send(image_type)).to eq(nil)
-        end
-      end
-    end
-  end
-
-  describe "fonts" do
-    it "allows an admin to change the site's base font and heading font" do
-      logo_and_fonts_page.visit
-      logo_and_fonts_page.fonts_form.select_font("base", "helvetica")
-
-      expect(logo_and_fonts_page.fonts_form).to have_no_font("heading", "JetBrains Mono")
-      logo_and_fonts_page.fonts_form.show_more_fonts("heading")
-      logo_and_fonts_page.fonts_form.select_font("heading", "jet-brains-mono")
-
-      logo_and_fonts_page.fonts_form.submit
-      expect(logo_and_fonts_page.fonts_form).to have_saved_successfully
-
-      expect(page.find("html")["style"]).to include(
-        "font-family: Helvetica; --heading-font-family: JetBrains Mono",
-      )
-
-      logo_and_fonts_page.visit
-      expect(logo_and_fonts_page.fonts_form.active_font("base")).to eq("Helvetica")
-
-      logo_and_fonts_page.visit
-      expect(logo_and_fonts_page.fonts_form.active_font("heading")).to eq("JetBrains Mono")
-    end
-
-    it "allows an admin to change default text size and does not update existing users preferences" do
-      Jobs.run_immediately!
-      logo_and_fonts_page.visit
-      expect(page).to have_css("html.text-size-normal")
-      logo_and_fonts_page.fonts_form.select_default_text_size("larger")
-
-      logo_and_fonts_page.fonts_form.submit
-      expect(modal).to be_open
-      expect(modal.header).to have_content(
-        I18n.t("admin_js.admin.config.logo_and_fonts.fonts.backfill_modal.title"),
-      )
-      modal.close
-      expect(modal).to be_closed
-      expect(logo_and_fonts_page.fonts_form).to have_saved_successfully
-
-      expect(page.find("html")["class"]).to include("text-size-larger")
-
-      visit "/"
-      expect(page).to have_css("html.text-size-normal")
-    end
-
-    it "allows an admin to change default text size and updates existing users preferences" do
-      Jobs.run_immediately!
-      logo_and_fonts_page.visit
-      expect(page).to have_css("html.text-size-normal")
-      logo_and_fonts_page.fonts_form.select_default_text_size("larger")
-
-      logo_and_fonts_page.fonts_form.submit
-      expect(modal).to be_open
-      expect(modal.header).to have_content(
-        I18n.t("admin_js.admin.config.logo_and_fonts.fonts.backfill_modal.title"),
-      )
-      modal.click_primary_button
-      expect(modal).to be_closed
-      expect(logo_and_fonts_page.fonts_form).to have_saved_successfully
-
-      visit "/"
-      expect(page).to have_css("html.text-size-larger")
-    end
-  end
-end
diff --git a/spec/system/admin_logo_spec.rb b/spec/system/admin_logo_spec.rb
new file mode 100644
index 00000000000..15ff33832d7
--- /dev/null
+++ b/spec/system/admin_logo_spec.rb
@@ -0,0 +1,207 @@
+# frozen_string_literal: true
+
+describe "Admin Logo Page", type: :system do
+  fab!(:admin)
+  fab!(:image_upload)
+
+  let(:logo_page) { PageObjects::Pages::AdminLogo.new }
+  let(:image_file) { file_from_fixtures("logo.png", "images") }
+  let(:modal) { PageObjects::Modals::Base.new }
+
+  before { sign_in(admin) }
+
+  describe "primary section" do
+    let(:primary_section_logos) { %i[logo logo_dark large_icon favicon logo_small logo_small_dark] }
+    it "can upload images and dark versions" do
+      logo_page.visit
+
+      expect(logo_page.form).to have_no_form_field(:logo_dark)
+      logo_page.form.toggle_dark_mode(:logo_dark_required)
+      expect(logo_page.form).to have_form_field(:logo_dark)
+
+      expect(logo_page.form).to have_no_form_field(:logo_small_dark)
+      logo_page.form.toggle_dark_mode(:logo_small_dark_required)
+      expect(logo_page.form).to have_form_field(:logo_small_dark)
+
+      primary_section_logos.each do |image_type|
+        logo_page.form.upload_image(image_type, image_file)
+      end
+
+      primary_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      visit("/")
+      logo_page.visit
+
+      expect(logo_page.form).to have_form_field(:logo_dark)
+      expect(logo_page.form).to have_form_field(:logo_small_dark)
+
+      primary_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+    end
+
+    it "can remove images" do
+      primary_section_logos.each { |image_type| SiteSetting.send("#{image_type}=", image_upload) }
+
+      logo_page.visit
+
+      primary_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      primary_section_logos.each { |image_type| logo_page.form.remove_image(image_type) }
+
+      logo_page.form.submit
+
+      try_until_success do
+        primary_section_logos.each { |image_type| expect(SiteSetting.send(image_type)).to eq(nil) }
+      end
+    end
+  end
+
+  describe "mobile section" do
+    let(:mobile_section_logos) { %i[mobile_logo mobile_logo_dark manifest_icon apple_touch_icon] }
+    it "can upload images and dark versions" do
+      logo_page.visit
+      logo_page.form.expand_mobile_section
+
+      expect(logo_page.form).to have_no_form_field(:mobile_logo_dark)
+      logo_page.form.toggle_dark_mode(:mobile_logo_dark_required)
+      expect(logo_page.form).to have_form_field(:mobile_logo_dark)
+
+      mobile_section_logos.each { |image_type| logo_page.form.upload_image(image_type, image_file) }
+
+      mobile_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      visit("/")
+      logo_page.visit
+      logo_page.form.expand_mobile_section
+
+      expect(logo_page.form).to have_form_field(:mobile_logo_dark)
+
+      mobile_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+    end
+
+    it "can remove images" do
+      mobile_section_logos.each { |image_type| SiteSetting.send("#{image_type}=", image_upload) }
+
+      logo_page.visit
+      logo_page.form.expand_mobile_section
+
+      mobile_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      mobile_section_logos.each { |image_type| logo_page.form.remove_image(image_type) }
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      mobile_section_logos.each { |image_type| expect(SiteSetting.send(image_type)).to eq(nil) }
+    end
+  end
+
+  describe "email section" do
+    let(:email_section_logos) { %i[digest_logo] }
+    it "can upload images" do
+      logo_page.visit
+      logo_page.form.expand_email_section
+
+      email_section_logos.each { |image_type| logo_page.form.upload_image(image_type, image_file) }
+
+      email_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      visit("/")
+      logo_page.visit
+      logo_page.form.expand_email_section
+
+      email_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+    end
+
+    it "can remove images" do
+      email_section_logos.each { |image_type| SiteSetting.send("#{image_type}=", image_upload) }
+
+      logo_page.visit
+      logo_page.form.expand_email_section
+
+      email_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      email_section_logos.each { |image_type| logo_page.form.remove_image(image_type) }
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      email_section_logos.each { |image_type| expect(SiteSetting.send(image_type)).to eq(nil) }
+    end
+  end
+
+  describe "social media section" do
+    let(:social_media_section_logos) { %i[opengraph_image] }
+    it "can upload images" do
+      logo_page.visit
+      logo_page.form.expand_social_media_section
+
+      social_media_section_logos.each do |image_type|
+        logo_page.form.upload_image(image_type, image_file)
+      end
+
+      social_media_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      visit("/")
+      logo_page.visit
+      logo_page.form.expand_social_media_section
+
+      social_media_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+    end
+
+    it "can remove images" do
+      social_media_section_logos.each do |image_type|
+        SiteSetting.send("#{image_type}=", image_upload)
+      end
+
+      logo_page.visit
+      logo_page.form.expand_social_media_section
+
+      social_media_section_logos.each do |image_type|
+        expect(logo_page.form.image_uploader(image_type)).to have_uploaded_image
+      end
+
+      social_media_section_logos.each { |image_type| logo_page.form.remove_image(image_type) }
+
+      logo_page.form.submit
+      expect(logo_page.form).to have_saved_successfully
+
+      social_media_section_logos.each do |image_type|
+        expect(SiteSetting.send(image_type)).to eq(nil)
+      end
+    end
+  end
+end
diff --git a/spec/system/page_objects/components/admin_fonts_form.rb b/spec/system/page_objects/components/admin_fonts_form.rb
index 322be8a57b2..7617a83ac60 100644
--- a/spec/system/page_objects/components/admin_fonts_form.rb
+++ b/spec/system/page_objects/components/admin_fonts_form.rb
@@ -41,7 +41,7 @@ module PageObjects
 
       def has_saved_successfully?
         PageObjects::Components::Toasts.new.has_success?(
-          I18n.t("admin_js.admin.config.logo_and_fonts.fonts.form.saved"),
+          I18n.t("admin_js.admin.config.fonts.form.saved"),
         )
       end
 
diff --git a/spec/system/page_objects/components/admin_logo_form.rb b/spec/system/page_objects/components/admin_logo_form.rb
index bc0d1e82d76..119179fd5a9 100644
--- a/spec/system/page_objects/components/admin_logo_form.rb
+++ b/spec/system/page_objects/components/admin_logo_form.rb
@@ -49,7 +49,7 @@ module PageObjects
 
       def has_saved_successfully?
         PageObjects::Components::Toasts.new.has_success?(
-          I18n.t("admin_js.admin.config.logo_and_fonts.logo.form.saved"),
+          I18n.t("admin_js.admin.config.logo.form.saved"),
         )
       end
 
diff --git a/spec/system/page_objects/pages/admin_fonts.rb b/spec/system/page_objects/pages/admin_fonts.rb
new file mode 100644
index 00000000000..1994a3ff1c7
--- /dev/null
+++ b/spec/system/page_objects/pages/admin_fonts.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class AdminFonts < PageObjects::Pages::Base
+      def visit
+        page.visit("/admin/config/fonts")
+      end
+
+      def form
+        @form ||= PageObjects::Components::AdminFontsForm.new
+      end
+    end
+  end
+end
diff --git a/spec/system/page_objects/pages/admin_logo.rb b/spec/system/page_objects/pages/admin_logo.rb
new file mode 100644
index 00000000000..25a2698970f
--- /dev/null
+++ b/spec/system/page_objects/pages/admin_logo.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class AdminLogo < PageObjects::Pages::Base
+      def visit
+        page.visit("/admin/config/logo")
+      end
+
+      def form
+        @form ||= PageObjects::Components::AdminLogoForm.new
+      end
+    end
+  end
+end
diff --git a/spec/system/page_objects/pages/admin_logo_and_fonts.rb b/spec/system/page_objects/pages/admin_logo_and_fonts.rb
deleted file mode 100644
index ac93bbbea9f..00000000000
--- a/spec/system/page_objects/pages/admin_logo_and_fonts.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-module PageObjects
-  module Pages
-    class AdminLogoAndFonts < PageObjects::Pages::Base
-      def visit
-        page.visit("/admin/config/logo-and-fonts")
-      end
-
-      def logo_form
-        @logo_form ||= PageObjects::Components::AdminLogoForm.new
-      end
-
-      def fonts_form
-        @fonts_form ||= PageObjects::Components::AdminFontsForm.new
-      end
-    end
-  end
-end