diff --git a/src/components/queryBuilder/BuilderHost.vue b/src/components/queryBuilder/BuilderHost.vue
index 10bc610..baa4d91 100644
--- a/src/components/queryBuilder/BuilderHost.vue
+++ b/src/components/queryBuilder/BuilderHost.vue
@@ -57,7 +57,7 @@
         </div>
         <div
           class="p-1"
-          :class="typeof value == 'object' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'object' && queryMode != 'structure' ? 'bg-gray-200' : ''"
           title="Visual Builder"
           @click="queryMode = 'builder'"
         >
@@ -65,7 +65,7 @@
         </div>
         <div
           class="p-1"
-          :class="typeof value == 'string' ? 'bg-gray-200' : ''"
+          :class="typeof value == 'string' && queryMode != 'structure' ? 'bg-gray-200' : ''"
           title="SQL Editor"
           @click="queryMode = 'editor'"
         >
@@ -136,10 +136,16 @@ export default defineComponent({
       } else {
         this.value = "";
       }
+      this.activeQueryId = undefined;
     },
     activeQueryId() {
       let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
       if (query != undefined) {
+        if (typeof query == "string") {
+          this.queryMode = "editor";
+        } else {
+          this.queryMode = "builder";
+        }
         this.value = query;
       }
     },