diff --git a/devices/wim/config/ags/icons/down-large.svg b/devices/wim/config/ags/icons/down-large.svg
new file mode 100644
index 00000000..43a9efa5
--- /dev/null
+++ b/devices/wim/config/ags/icons/down-large.svg
@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -3 14 14" id="meteor-icon-kit__regular-chevron-down-s" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier">
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.70711 0.29289C1.31658 -0.09763 0.68342 -0.09763 0.29289 0.29289C-0.09763 0.68342 -0.09763 1.3166 0.29289 1.7071L6.2929 7.7071C6.6834 8.0976 7.3166 8.0976 7.7071 7.7071L13.7071 1.7071C14.0976 1.3166 14.0976 0.68342 13.7071 0.29289C13.3166 -0.09763 12.6834 -0.09763 12.2929 0.29289L7 5.5858L1.70711 0.29289z" fill="#ffffff"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/devices/wim/config/ags/js/quick-settings/toggle-button.js b/devices/wim/config/ags/js/quick-settings/toggle-button.js
index 474b0de2..98d6dce7 100644
--- a/devices/wim/config/ags/js/quick-settings/toggle-button.js
+++ b/devices/wim/config/ags/js/quick-settings/toggle-button.js
@@ -1,44 +1,39 @@
+import App   from 'resource:///com/github/Aylur/ags/app.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
-import { Icon } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
 
-import Gtk from 'gi://Gtk';
 import EventBox from '../misc/cursorbox.js';
 
 
-// TODO: use Widget.ToggleButton instead
-export default () => {
-    const widget = EventBox({});
+export default () => EventBox({
+    child: ToggleButton({
+        setup: self => {
+            // Open at startup if there are players
+            const id = Mpris.connect('changed', () => {
+                self.set_active(Mpris.players.length > 0);
+                Mpris.disconnect(id);
+            });
+        },
 
-    const toggleButton = Gtk.ToggleButton.new();
-    toggleButton.add(Icon({
-        icon: 'go-down-symbolic',
-        className: 'arrow',
-        css: '-gtk-icon-transform: rotate(180deg);',
-    }));
+        connections: [['toggled', self => {
+            const rev = self.get_parent().get_parent().get_parent().children[1];
 
-    // Setup
-    const id = Mpris.connect('changed', () => {
-        toggleButton.set_active(Mpris.players.length > 0);
-        Mpris.disconnect(id);
-    });
+            if (self.get_active()) {
+                self.get_children()[0]
+                    .setCss('-gtk-icon-transform: rotate(0deg);');
+                rev.revealChild = true;
+            }
+            else {
+                self.get_children()[0]
+                    .setCss('-gtk-icon-transform: rotate(180deg);');
+                rev.revealChild = false;
+            }
+        }]],
 
-    // Connections
-    toggleButton.connect('toggled', () => {
-        const rev = toggleButton.get_parent().get_parent().get_parent().children[1];
-
-        if (toggleButton.get_active()) {
-            toggleButton.get_children()[0]
-                .setCss('-gtk-icon-transform: rotate(0deg);');
-            rev.revealChild = true;
-        }
-        else {
-            toggleButton.get_children()[0]
-                .setCss('-gtk-icon-transform: rotate(180deg);');
-            rev.revealChild = false;
-        }
-    });
-
-    widget.add(toggleButton);
-
-    return widget;
-};
+        child: Icon({
+            icon: App.configDir + '/icons/down-large.svg',
+            className: 'arrow',
+            css: '-gtk-icon-transform: rotate(180deg);',
+        }),
+    }),
+});