diff --git a/web/src/app/(user)/canvas/components/infinite-canvas.tsx b/web/src/app/(user)/canvas/components/infinite-canvas.tsx
index 7ed1753..f9293da 100644
--- a/web/src/app/(user)/canvas/components/infinite-canvas.tsx
+++ b/web/src/app/(user)/canvas/components/infinite-canvas.tsx
@@ -65,7 +65,7 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
 
     const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
         const target = event.target instanceof Element ? event.target : null;
-        if (target?.closest(".ant-modal,.ant-popover,.ant-dropdown,.ant-select-dropdown,.ant-picker-dropdown")) return;
+        if (target?.closest("[data-canvas-no-zoom],.ant-modal,.ant-popover,.ant-dropdown,.ant-select-dropdown,.ant-picker-dropdown")) return;
 
         const delta = -event.deltaY;
         const factor = Math.pow(1.1, delta / 100);
@@ -87,6 +87,7 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
 
     const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
         const target = event.target instanceof Element ? event.target : null;
+        if (target?.closest("[data-canvas-no-zoom]")) return;
         if (target?.closest("[data-connection-create-menu]")) return;
         const isBackgroundClick = !target?.closest("[data-node-id],[data-connection-id]");
 
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 74431ae..c72a9b5 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -332,14 +332,14 @@
         width: 32px;
     }
 
-    .canvas-composer-mode-button span,
-    .canvas-model-picker-text,
-    .canvas-select-chevron,
-    .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
+    .canvas-composer-tools .canvas-composer-mode-button span,
+    .canvas-composer-tools .canvas-model-picker-text,
+    .canvas-composer-tools .canvas-select-chevron,
+    .canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
         display: none;
     }
 
-    .canvas-composer-model-picker {
+    .canvas-composer-tools .canvas-composer-model-picker {
         width: 32px;
         min-width: 32px;
         justify-content: center;
@@ -353,7 +353,7 @@
             width: auto;
         }
 
-        .canvas-composer-mode-button span {
+        .canvas-composer-tools .canvas-composer-mode-button span {
             display: inline;
             font-size: 12px;
             line-height: 1;
@@ -365,12 +365,12 @@
             width: auto !important;
         }
 
-        .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
+        .canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
             display: inline-flex;
             min-width: 0;
         }
 
-        .canvas-composer-model-picker {
+        .canvas-composer-tools .canvas-composer-model-picker {
             width: auto;
             min-width: 9rem;
             justify-content: flex-start;
@@ -378,8 +378,8 @@
             padding-inline: 0.75rem;
         }
 
-        .canvas-model-picker-text,
-        .canvas-select-chevron {
+        .canvas-composer-tools .canvas-model-picker-text,
+        .canvas-composer-tools .canvas-select-chevron {
             display: inline;
         }
     }
diff --git a/web/src/components/model-picker.tsx b/web/src/components/model-picker.tsx
index ac826c3..2a55df5 100644
--- a/web/src/components/model-picker.tsx
+++ b/web/src/components/model-picker.tsx
@@ -49,7 +49,14 @@ export function ModelPicker({ config, value, onChange, className, fullWidth = fa
                 <ModelIcon model={current} />
                 <span className="canvas-model-picker-text min-w-0 flex-1 truncate text-left">{current || placeholder}</span>
             </SelectTrigger>
-            <SelectContent className="z-50 w-80 max-w-[calc(100vw-24px)] rounded-xl border border-border/70 bg-popover p-1 shadow-xl" position="popper" align="start">
+            <SelectContent
+                data-canvas-no-zoom
+                className="z-50 w-80 max-w-[calc(100vw-24px)] rounded-xl border border-border/70 bg-popover p-1 shadow-xl"
+                position="popper"
+                align="start"
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
+            >
                 {options.length ? (
                     options.map((model) => (
                         <SelectItem key={model} value={model} textValue={model}>
@@ -77,7 +84,7 @@ function ModelLabel({ model }: { model: string }) {
 
 function ModelIcon({ model }: { model: string }) {
     const icon = resolveModelIcon(model);
-    return icon ? <img src={icon} alt="" className="size-4 shrink-0" /> : <Cpu className="size-4 shrink-0 opacity-70" />;
+    return icon ? <img src={icon} alt="" className="size-4 shrink-0 dark:invert" /> : <Cpu className="size-4 shrink-0 opacity-70" />;
 }
 
 function resolveModelIcon(model: string) {