diff --git a/src/app/shared/nodes/generic-node/generic-node.css b/src/app/shared/nodes/generic-node/generic-node.css
index 8004af3..d05ecf7 100644
--- a/src/app/shared/nodes/generic-node/generic-node.css
+++ b/src/app/shared/nodes/generic-node/generic-node.css
@@ -748,6 +748,54 @@
   resize: vertical;
 }
 
+.node-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  background: #fff;
+  color: #0f172a;
+  padding: 6px 10px;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.node-toggle-track {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  border-radius: 999px;
+  background: #cbd5e1;
+  transition: background-color 0.2s ease;
+}
+
+.node-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
+  transition: transform 0.2s ease;
+}
+
+.node-toggle-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: lowercase;
+}
+
+.node-toggle-on .node-toggle-track {
+  background: #2563eb;
+}
+
+.node-toggle-on .node-toggle-thumb {
+  transform: translateX(14px);
+}
+
 .llm-modal-actions {
   display: flex;
   justify-content: flex-end;
diff --git a/src/app/shared/nodes/generic-node/generic-node.html b/src/app/shared/nodes/generic-node/generic-node.html
index 5145b8f..a91f9bd 100644
--- a/src/app/shared/nodes/generic-node/generic-node.html
+++ b/src/app/shared/nodes/generic-node/generic-node.html
@@ -187,10 +187,18 @@
         @if (localEditorLoading) {
         <input type="text" [ngModel]="localEditorValue" placeholder="Loading..." disabled (pointerdown)="$event.stopPropagation()" />
         } @else if (localEditorType === 'boolean') {
-        <select [(ngModel)]="localEditorValue" (pointerdown)="$event.stopPropagation()">
-          <option value="true">true</option>
-          <option value="false">false</option>
-        </select>
+        <button
+          type="button"
+          class="node-toggle"
+          [class.node-toggle-on]="localEditorValue === 'true'"
+          [attr.aria-pressed]="localEditorValue === 'true'"
+          (pointerdown)="$event.stopPropagation()"
+          (click)="localEditorValue = localEditorValue === 'true' ? 'false' : 'true'">
+          <span class="node-toggle-track">
+            <span class="node-toggle-thumb"></span>
+          </span>
+          <span class="node-toggle-label">{{ localEditorValue === 'true' ? 'true' : 'false' }}</span>
+        </button>
         } @else if (localEditorHasRetriever) {
         <select [(ngModel)]="localEditorValue" (pointerdown)="$event.stopPropagation()">
           <option value="">{{ localEditorOptions.length ? ('Select ' + (localEditorLabel | lowercase) + '...') : 'No options available' }}</option>