diff --git a/src/components/FloatingActionBar.tsx b/src/components/FloatingActionBar.tsx
index 89851d05..bdf7a6c4 100644
--- a/src/components/FloatingActionBar.tsx
+++ b/src/components/FloatingActionBar.tsx
@@ -181,6 +181,12 @@ export function FloatingActionBar() {
   } = useWorkflowStore();
   const [runMenuOpen, setRunMenuOpen] = useState(false);
   const runMenuRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Defer client-only rendering to avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const { valid, errors } = validateWorkflow();
 
@@ -246,7 +252,7 @@ export function FloatingActionBar() {
         <div className="w-px h-5 bg-neutral-600 mx-1.5" />
 
         {/* Replicate icon - only show if API key is configured */}
-        {providerSettings.providers.replicate?.apiKey && (
+        {mounted && providerSettings.providers.replicate?.apiKey && (
           <ProviderIconButton
             provider="replicate"
             onClick={() => setModelSearchOpen(true, "replicate")}
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 847a6189..d952d8b5 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -360,7 +360,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
                   type="target"
                   position={Position.Left}
                   id={input.name}
-                  style={{ top: `${topPercent}%` }}
+                  style={{ top: `calc(${topPercent}% - 5px)` }}
                   data-handletype={input.type}
                   isConnectable={true}
                   title={input.description || input.label}
@@ -387,7 +387,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
             type="target"
             position={Position.Left}
             id="image"
-            style={{ top: "35%" }}
+            style={{ top: "calc(35% - 5px)" }}
             data-handletype="image"
             isConnectable={true}
           />
@@ -406,7 +406,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
             type="target"
             position={Position.Left}
             id="text"
-            style={{ top: "65%" }}
+            style={{ top: "calc(65% - 5px)" }}
             data-handletype="text"
           />
           {/* Default text label */}
@@ -427,7 +427,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         type="source"
         position={Position.Right}
         id="image"
-        style={{ top: "50%" }}
+        style={{ top: "calc(50% - 5px)" }}
         data-handletype="image"
       />
       {/* Output label */}
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index 4033dc6b..f9c7774c 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -195,7 +195,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
                   type="target"
                   position={Position.Left}
                   id={input.name}
-                  style={{ top: `${topPercent}%` }}
+                  style={{ top: `calc(${topPercent}% - 5px)` }}
                   data-handletype={input.type}
                   isConnectable={true}
                   title={input.description || input.label}
@@ -222,7 +222,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
             type="target"
             position={Position.Left}
             id="image"
-            style={{ top: "35%" }}
+            style={{ top: "calc(35% - 5px)" }}
             data-handletype="image"
             isConnectable={true}
           />
@@ -241,7 +241,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
             type="target"
             position={Position.Left}
             id="text"
-            style={{ top: "65%" }}
+            style={{ top: "calc(65% - 5px)" }}
             data-handletype="text"
           />
           {/* Default text label */}
@@ -262,7 +262,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
         type="source"
         position={Position.Right}
         id="image"
-        style={{ top: "50%" }}
+        style={{ top: "calc(50% - 5px)" }}
         data-handletype="image"
       />
       {/* Output label */}