diff --git a/data/Indicator.css b/data/Indicator.css
index c39c7a5..4ca5a81 100644
--- a/data/Indicator.css
+++ b/data/Indicator.css
@@ -3,12 +3,12 @@
  * SPDX-FileCopyrightText: 2023 elementary, Inc. (https://elementary.io)
  */
 
-quicksettings box.font-size,
+quicksettings scalebox,
 quicksettings .togglebox {
     padding: 0.666rem; /* 6px */
 }
 
-quicksettings box.font-size scale {
+quicksettings scalebox scale {
     margin: 0.666rem 0.666rem 0; /* 6px */
 }
 
diff --git a/po/POTFILES b/po/POTFILES
index f570513..acc6a9f 100644
--- a/po/POTFILES
+++ b/po/POTFILES
@@ -11,3 +11,4 @@ src/Widgets/EndSessionDialog.vala
 src/Widgets/RotationToggle.vala
 src/Widgets/SessionBox.vala
 src/Widgets/SettingsToggle.vala
+src/Widgets/TextScale.vala
diff --git a/src/PopoverWidget.vala b/src/PopoverWidget.vala
index 1d74bd1..4bd948d 100644
--- a/src/PopoverWidget.vala
+++ b/src/PopoverWidget.vala
@@ -10,9 +10,6 @@ public class QuickSettings.PopoverWidget : Gtk.Box {
     private const string FDO_ACCOUNTS_PATH = "/org/freedesktop/Accounts";
 
     private Gtk.Popover? popover;
-    private Gtk.Button zoom_in_button;
-    private Gtk.Button zoom_out_button;
-    private Settings interface_settings;
 
     public PopoverWidget (Wingpanel.IndicatorManager.ServerType server_type) {
         Object (server_type: server_type);
@@ -116,45 +113,7 @@ public class QuickSettings.PopoverWidget : Gtk.Box {
             toggle_box.add (screen_reader);
             toggle_box.add (onscreen_keyboard);
 
-            zoom_out_button = new Gtk.Button.from_icon_name ("format-text-smaller-symbolic") {
-                tooltip_text = _("Decrease text size")
-            };
-            zoom_out_button.get_style_context ().add_class ("circular");
-
-            var zoom_adjustment = new Gtk.Adjustment (-1, 0.75, 1.75, 0.05, 0, 0);
-
-            var zoom_scale = new Gtk.Scale (HORIZONTAL, zoom_adjustment) {
-                draw_value = false,
-                hexpand = true
-            };
-            zoom_scale.add_mark (1, BOTTOM, null);
-            zoom_scale.add_mark (1.5, BOTTOM, null);
-
-            zoom_in_button = new Gtk.Button.from_icon_name ("format-text-larger-symbolic") {
-                tooltip_text = _("Increase text size")
-            };
-            zoom_in_button.get_style_context ().add_class ("circular");
-
-            var font_size_box = new Gtk.Box (HORIZONTAL, 0);
-            font_size_box.get_style_context ().add_class ("font-size");
-            font_size_box.add (zoom_out_button);
-            font_size_box.add (zoom_scale);
-            font_size_box.add (zoom_in_button);
-
-            scale_box.add (font_size_box);
-
-            interface_settings = new Settings ("org.gnome.desktop.interface");
-            interface_settings.bind ("text-scaling-factor", zoom_adjustment, "value", DEFAULT);
-            interface_settings.changed["text-scaling-factor"].connect (update_zoom_buttons);
-            update_zoom_buttons ();
-
-            zoom_in_button.clicked.connect (() => {
-                zoom_adjustment.value += 0.05;
-            });
-
-            zoom_out_button.clicked.connect (() => {
-                zoom_adjustment.value += -0.05;
-            });
+            scale_box.add (new TextScale ());
 
             var applications_settings = new Settings ("org.gnome.desktop.a11y.applications");
             applications_settings.bind ("screen-keyboard-enabled", onscreen_keyboard, "active", DEFAULT);
@@ -162,12 +121,6 @@ public class QuickSettings.PopoverWidget : Gtk.Box {
         }
     }
 
-    private void update_zoom_buttons () {
-        var scaling_factor = interface_settings.get_double ("text-scaling-factor");
-        zoom_in_button.sensitive = scaling_factor < 1.75;
-        zoom_out_button.sensitive = scaling_factor > 0.75;
-    }
-
     private async Pantheon.AccountsService? setup_accounts_services () {
         unowned GLib.DBusConnection connection;
         string path;
diff --git a/src/Widgets/TextScale.vala b/src/Widgets/TextScale.vala
new file mode 100644
index 0000000..cffcd2a
--- /dev/null
+++ b/src/Widgets/TextScale.vala
@@ -0,0 +1,59 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2024 elementary, Inc. (https://elementary.io)
+ */
+
+public class QuickSettings.TextScale : Gtk.Box {
+    private Gtk.Button zoom_in_button;
+    private Gtk.Button zoom_out_button;
+    private Settings interface_settings;
+
+    class construct {
+        set_css_name ("scalebox");
+    }
+
+    construct {
+        zoom_out_button = new Gtk.Button.from_icon_name ("format-text-smaller-symbolic") {
+            tooltip_text = _("Decrease text size")
+        };
+        zoom_out_button.get_style_context ().add_class ("circular");
+
+        var zoom_adjustment = new Gtk.Adjustment (-1, 0.75, 1.75, 0.05, 0, 0);
+
+        var zoom_scale = new Gtk.Scale (HORIZONTAL, zoom_adjustment) {
+            draw_value = false,
+            hexpand = true
+        };
+        zoom_scale.add_mark (1, BOTTOM, null);
+        zoom_scale.add_mark (1.5, BOTTOM, null);
+
+        zoom_in_button = new Gtk.Button.from_icon_name ("format-text-larger-symbolic") {
+            tooltip_text = _("Increase text size")
+        };
+        zoom_in_button.get_style_context ().add_class ("circular");
+
+        get_style_context ().add_class ("font-size");
+        add (zoom_out_button);
+        add (zoom_scale);
+        add (zoom_in_button);
+
+        interface_settings = new Settings ("org.gnome.desktop.interface");
+        interface_settings.bind ("text-scaling-factor", zoom_adjustment, "value", DEFAULT);
+        interface_settings.changed["text-scaling-factor"].connect (update_zoom_buttons);
+        update_zoom_buttons ();
+
+        zoom_in_button.clicked.connect (() => {
+            zoom_adjustment.value += 0.05;
+        });
+
+        zoom_out_button.clicked.connect (() => {
+            zoom_adjustment.value += -0.05;
+        });
+    }
+
+    private void update_zoom_buttons () {
+        var scaling_factor = interface_settings.get_double ("text-scaling-factor");
+        zoom_in_button.sensitive = scaling_factor < 1.75;
+        zoom_out_button.sensitive = scaling_factor > 0.75;
+    }
+}
diff --git a/src/meson.build b/src/meson.build
index 0609fb1..9f2e790 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -20,7 +20,8 @@ sources = [
     'Widgets' / 'EndSessionDialog.vala',
     'Widgets' / 'RotationToggle.vala',
     'Widgets' / 'SettingsToggle.vala',
-    'Widgets' / 'SessionBox.vala'
+    'Widgets' / 'SessionBox.vala',
+    'Widgets' / 'TextScale.vala',
 ]
 
 shared_module(