diff --git a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
index 4e35342c..6e0a335f 100644
--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -61,8 +61,14 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
             <Button
               className={classes.button}
               color="secondary"
-              onClick={() => props.managerActions.addSubscription({ topic, qos }, props.connection.id)}
+              onClick={() => {
+                const trimmedTopic = topic.trim();
+                if (trimmedTopic !== "") {
+                  props.managerActions.addSubscription({ topic: trimmedTopic, qos }, props.connection.id);
+                }
+              }}
               variant="contained"
+              disabled={topic.trim() === ""}
             >
               <Add /> Add
             </Button>