diff --git a/widget/WirePlumber.tsx b/widget/WirePlumber.tsx
index 9902d2f..65a2dd0 100644
--- a/widget/WirePlumber.tsx
+++ b/widget/WirePlumber.tsx
@@ -7,52 +7,59 @@ const WirePlumber = function () {
   const audio = AstalWp.get_default()?.audio!;
 
   const speakers = bind(audio, "speakers");
+  const defaultSpeaker = speakers.as((speakers) =>
+    speakers.find((speaker) => speaker.is_default),
+  );
 
-  return speakers.as((speakers) => {
-    const defaultSpeaker = speakers.find((speaker) => speaker.is_default);
-    if (!defaultSpeaker) {
-      return <></>;
-    }
-    return (
-      <menubutton
-        onScroll={(_, __, dy) => {
-          defaultSpeaker.set_volume(
-            Mathf.clamp(
-              defaultSpeaker.volume - Mathf.sign(dy) * 0.02,
-              0.0,
-              1.0,
-            ),
-          );
-        }}
-      >
-        <label
-          cursor={Gdk.Cursor.new_from_name("pointer", null)}
-          label={bind(defaultSpeaker, "volume").as(
-            (volume) => `  ${Math.floor(volume * 100)}%`,
-          )}
-          hasTooltip={true}
-          tooltipText={bind(defaultSpeaker, "description").as(
-            (description) => description,
-          )}
-        />
-        <popover cssClasses={["WirePlumberMenu"]}>
-          <box vertical>
-            {speakers.map((speaker) => (
-              <button
-                cssClasses={bind(speaker, "is_default").as((is_default) => [
-                  is_default ? "active" : "",
-                ])}
-                cursor={Gdk.Cursor.new_from_name("pointer", null)}
-                onClicked={() => speaker.set_is_default(true)}
-              >
-                {speaker.description}
-              </button>
-            ))}
-          </box>
-        </popover>
-      </menubutton>
-    );
-  });
+  return (
+    <>
+      {defaultSpeaker.as((defaultSpeaker) =>
+        defaultSpeaker ? (
+          <menubutton
+            onScroll={(_, __, dy) => {
+              defaultSpeaker.set_volume(
+                Mathf.clamp(
+                  defaultSpeaker.volume - Mathf.sign(dy) * 0.02,
+                  0.0,
+                  1.0,
+                ),
+              );
+            }}
+          >
+            <label
+              cursor={Gdk.Cursor.new_from_name("pointer", null)}
+              label={bind(defaultSpeaker, "volume").as(
+                (volume) => `  ${Math.floor(volume * 100)}%`,
+              )}
+              hasTooltip={true}
+              tooltipText={bind(defaultSpeaker, "description").as(
+                (description) => description,
+              )}
+            />
+            <popover cssClasses={["WirePlumberMenu"]}>
+              <box vertical>
+                {speakers.as((speakers) =>
+                  speakers.map((speaker) => (
+                    <button
+                      cssClasses={bind(speaker, "is_default").as(
+                        (is_default) => [is_default ? "active" : ""],
+                      )}
+                      cursor={Gdk.Cursor.new_from_name("pointer", null)}
+                      onClicked={() => speaker.set_is_default(true)}
+                    >
+                      {speaker.description}
+                    </button>
+                  )),
+                )}
+              </box>
+            </popover>
+          </menubutton>
+        ) : (
+          <></>
+        ),
+      )}
+    </>
+  );
 };
 
 export default WirePlumber;