diff --git a/javascript/global.css b/javascript/global.css
index a179273..4f7ff5a 100644
--- a/javascript/global.css
+++ b/javascript/global.css
@@ -174,6 +174,18 @@
   height: 2.5rem
 }
 
+.h-96 {
+  height: 24rem
+}
+
+.h-32 {
+  height: 8rem
+}
+
+.h-full {
+  height: 100%
+}
+
 .max-h-96 {
   max-height: 24rem
 }
@@ -223,6 +235,22 @@
   width: 3rem
 }
 
+.w-96 {
+  width: 24rem
+}
+
+.w-32 {
+  width: 8rem
+}
+
+.w-1\/2 {
+  width: 50%
+}
+
+.w-4\/5 {
+  width: 80%
+}
+
 .max-w-4xl {
   max-width: 56rem
 }
@@ -235,6 +263,14 @@
   max-width: 64rem
 }
 
+.max-w-full {
+  max-width: 100%
+}
+
+.flex-shrink {
+  flex-shrink: 1
+}
+
 .flex-grow {
   flex-grow: 1
 }
@@ -249,6 +285,16 @@
   animation: spin 1s linear infinite
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+}
+
 .cursor-pointer {
   cursor: pointer
 }
@@ -265,6 +311,10 @@
   align-items: center
 }
 
+.justify-end {
+  justify-content: flex-end
+}
+
 .justify-center {
   justify-content: center
 }
@@ -391,6 +441,11 @@
   line-height: 1.75rem
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem
+}
+
 .font-semibold {
   font-weight: 600
 }
@@ -441,6 +496,11 @@
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }
@@ -496,4 +556,9 @@
 .hover\:bg-gray-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity))
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
 }
\ No newline at end of file
diff --git a/javascript/global.css.js b/javascript/global.css.js
index 81c79c3..154959f 100644
--- a/javascript/global.css.js
+++ b/javascript/global.css.js
@@ -176,6 +176,18 @@ docStyle.innerHTML = `*, ::before, ::after {
   height: 2.5rem
 }
 
+.h-96 {
+  height: 24rem
+}
+
+.h-32 {
+  height: 8rem
+}
+
+.h-full {
+  height: 100%
+}
+
 .max-h-96 {
   max-height: 24rem
 }
@@ -225,6 +237,22 @@ docStyle.innerHTML = `*, ::before, ::after {
   width: 3rem
 }
 
+.w-96 {
+  width: 24rem
+}
+
+.w-32 {
+  width: 8rem
+}
+
+.w-1\\/2 {
+  width: 50%
+}
+
+.w-4\\/5 {
+  width: 80%
+}
+
 .max-w-4xl {
   max-width: 56rem
 }
@@ -237,6 +265,14 @@ docStyle.innerHTML = `*, ::before, ::after {
   max-width: 64rem
 }
 
+.max-w-full {
+  max-width: 100%
+}
+
+.flex-shrink {
+  flex-shrink: 1
+}
+
 .flex-grow {
   flex-grow: 1
 }
@@ -251,6 +287,16 @@ docStyle.innerHTML = `*, ::before, ::after {
   animation: spin 1s linear infinite
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+}
+
 .cursor-pointer {
   cursor: pointer
 }
@@ -267,6 +313,10 @@ docStyle.innerHTML = `*, ::before, ::after {
   align-items: center
 }
 
+.justify-end {
+  justify-content: flex-end
+}
+
 .justify-center {
   justify-content: center
 }
@@ -393,6 +443,11 @@ docStyle.innerHTML = `*, ::before, ::after {
   line-height: 1.75rem
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem
+}
+
 .font-semibold {
   font-weight: 600
 }
@@ -443,6 +498,11 @@ docStyle.innerHTML = `*, ::before, ::after {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }
@@ -499,6 +559,11 @@ docStyle.innerHTML = `*, ::before, ::after {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity))
 }
+
+.focus\\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
+}
 `;
 document.head.appendChild(docStyle);
     
\ No newline at end of file
diff --git a/javascript/out.js b/javascript/out.js
index 970ec7e..abcd37a 100644
--- a/javascript/out.js
+++ b/javascript/out.js
@@ -971,7 +971,7 @@
             }
             return lazyType;
           }
-          function forwardRef3(render) {
+          function forwardRef4(render) {
             {
               if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
                 error("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...)).");
@@ -1868,7 +1868,7 @@
           exports.createElement = createElement$1;
           exports.createFactory = createFactory;
           exports.createRef = createRef;
-          exports.forwardRef = forwardRef3;
+          exports.forwardRef = forwardRef4;
           exports.isValidElement = isValidElement;
           exports.lazy = lazy;
           exports.memo = memo;
@@ -2382,9 +2382,9 @@
           if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function") {
             __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
           }
-          var React10 = require_react();
+          var React11 = require_react();
           var Scheduler = require_scheduler();
-          var ReactSharedInternals = React10.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+          var ReactSharedInternals = React11.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
           var suppressWarning = false;
           function setSuppressWarning(newSuppressWarning) {
             {
@@ -3989,7 +3989,7 @@
             {
               if (props.value == null) {
                 if (typeof props.children === "object" && props.children !== null) {
-                  React10.Children.forEach(props.children, function(child) {
+                  React11.Children.forEach(props.children, function(child) {
                     if (child == null) {
                       return;
                     }
@@ -12436,7 +12436,7 @@
             }
           }
           var fakeInternalInstance = {};
-          var emptyRefsObject = new React10.Component().refs;
+          var emptyRefsObject = new React11.Component().refs;
           var didWarnAboutStateAssignmentForComponent;
           var didWarnAboutUninitializedState;
           var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -24793,7 +24793,7 @@
         value: true
       });
       exports.default = void 0;
-      var React10 = _interopRequireWildcard(require_react());
+      var React11 = _interopRequireWildcard(require_react());
       var _propTypes = _interopRequireDefault(require_prop_types());
       var _reactDom = _interopRequireDefault(require_react_dom());
       var _domFns = require_domFns();
@@ -24879,7 +24879,7 @@
         }
       };
       var dragEventFor = eventsFor.mouse;
-      var DraggableCore = class extends React10.Component {
+      var DraggableCore = class extends React11.Component {
         constructor() {
           super(...arguments);
           _defineProperty(this, "dragging", false);
@@ -25043,7 +25043,7 @@
           return (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.nodeRef ? (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.nodeRef) === null || _this$props2 === void 0 ? void 0 : _this$props2.current : _reactDom.default.findDOMNode(this);
         }
         render() {
-          return /* @__PURE__ */ React10.cloneElement(React10.Children.only(this.props.children), {
+          return /* @__PURE__ */ React11.cloneElement(React11.Children.only(this.props.children), {
             // Note: mouseMove handler is attached to document so it will still function
             // when the user drags quickly and leaves the bounds of the element.
             onMouseDown: this.onMouseDown,
@@ -25213,7 +25213,7 @@
         }
       });
       exports.default = void 0;
-      var React10 = _interopRequireWildcard(require_react());
+      var React11 = _interopRequireWildcard(require_react());
       var _propTypes = _interopRequireDefault(require_prop_types());
       var _reactDom = _interopRequireDefault(require_react_dom());
       var _clsx = _interopRequireDefault(require_clsx());
@@ -25263,8 +25263,8 @@
         }
         return newObj;
       }
-      function _extends3() {
-        _extends3 = Object.assign ? Object.assign.bind() : function(target) {
+      function _extends4() {
+        _extends4 = Object.assign ? Object.assign.bind() : function(target) {
           for (var i5 = 1; i5 < arguments.length; i5++) {
             var source = arguments[i5];
             for (var key in source) {
@@ -25275,7 +25275,7 @@
           }
           return target;
         };
-        return _extends3.apply(this, arguments);
+        return _extends4.apply(this, arguments);
       }
       function _defineProperty(obj, key, value) {
         key = _toPropertyKey(key);
@@ -25302,7 +25302,7 @@
         }
         return (hint === "string" ? String : Number)(input);
       }
-      var Draggable4 = class extends React10.Component {
+      var Draggable4 = class extends React11.Component {
         // React 16.3+
         // Arity (props, state)
         static getDerivedStateFromProps(_ref, _ref2) {
@@ -25468,11 +25468,11 @@
             [defaultClassNameDragging]: this.state.dragging,
             [defaultClassNameDragged]: this.state.dragged
           });
-          return /* @__PURE__ */ React10.createElement(_DraggableCore.default, _extends3({}, draggableCoreProps, {
+          return /* @__PURE__ */ React11.createElement(_DraggableCore.default, _extends4({}, draggableCoreProps, {
             onStart: this.onDragStart,
             onDrag: this.onDrag,
             onStop: this.onDragStop
-          }), /* @__PURE__ */ React10.cloneElement(React10.Children.only(children), {
+          }), /* @__PURE__ */ React11.cloneElement(React11.Children.only(children), {
             className,
             style: {
               ...children.props.style,
@@ -26363,11 +26363,11 @@
   });
 
   // src/index.jsx
-  var React9 = __toESM(require_react());
+  var React10 = __toESM(require_react());
   var ReactDOM = __toESM(require_client());
 
   // src/ComfyAssistantOverlay.jsx
-  var import_react35 = __toESM(require_react());
+  var import_react36 = __toESM(require_react());
 
   // node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js
   var import_react = __toESM(require_react(), 1);
@@ -27878,9 +27878,9 @@
   var YoutubePlayer_default = YoutubePlayer;
 
   // src/SearchComponent.jsx
-  var import_react34 = __toESM(require_react());
+  var import_react35 = __toESM(require_react());
 
-  // node_modules/react-feather/dist/icons/loader.js
+  // node_modules/react-feather/dist/icons/external-link.js
   var import_react30 = __toESM(require_react());
   var import_prop_types2 = __toESM(require_prop_types());
   function _extends() {
@@ -27929,7 +27929,7 @@
     }
     return target;
   }
-  var Loader = (0, import_react30.forwardRef)(function(_ref, ref) {
+  var ExternalLink = (0, import_react30.forwardRef)(function(_ref, ref) {
     var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties(_ref, ["color", "size"]);
     return /* @__PURE__ */ import_react30.default.createElement("svg", _extends({
       ref,
@@ -27942,56 +27942,25 @@
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "12",
-      y1: "2",
-      x2: "12",
-      y2: "6"
+    }, rest), /* @__PURE__ */ import_react30.default.createElement("path", {
+      d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+    }), /* @__PURE__ */ import_react30.default.createElement("polyline", {
+      points: "15 3 21 3 21 9"
     }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "12",
-      y1: "18",
-      x2: "12",
-      y2: "22"
-    }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "4.93",
-      y1: "4.93",
-      x2: "7.76",
-      y2: "7.76"
-    }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "16.24",
-      y1: "16.24",
-      x2: "19.07",
-      y2: "19.07"
-    }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "2",
-      y1: "12",
-      x2: "6",
-      y2: "12"
-    }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "18",
-      y1: "12",
-      x2: "22",
-      y2: "12"
-    }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "4.93",
-      y1: "19.07",
-      x2: "7.76",
-      y2: "16.24"
-    }), /* @__PURE__ */ import_react30.default.createElement("line", {
-      x1: "16.24",
-      y1: "7.76",
-      x2: "19.07",
-      y2: "4.93"
+      x1: "10",
+      y1: "14",
+      x2: "21",
+      y2: "3"
     }));
   });
-  Loader.propTypes = {
+  ExternalLink.propTypes = {
     color: import_prop_types2.default.string,
     size: import_prop_types2.default.oneOfType([import_prop_types2.default.string, import_prop_types2.default.number])
   };
-  Loader.displayName = "Loader";
-  var loader_default = Loader;
+  ExternalLink.displayName = "ExternalLink";
+  var external_link_default = ExternalLink;
 
-  // node_modules/react-feather/dist/icons/search.js
+  // node_modules/react-feather/dist/icons/loader.js
   var import_react31 = __toESM(require_react());
   var import_prop_types3 = __toESM(require_prop_types());
   function _extends2() {
@@ -28040,7 +28009,7 @@
     }
     return target;
   }
-  var Search = (0, import_react31.forwardRef)(function(_ref, ref) {
+  var Loader = (0, import_react31.forwardRef)(function(_ref, ref) {
     var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties2(_ref, ["color", "size"]);
     return /* @__PURE__ */ import_react31.default.createElement("svg", _extends2({
       ref,
@@ -28053,11 +28022,122 @@
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */ import_react31.default.createElement("circle", {
+    }, rest), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "12",
+      y1: "2",
+      x2: "12",
+      y2: "6"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "12",
+      y1: "18",
+      x2: "12",
+      y2: "22"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "4.93",
+      y1: "4.93",
+      x2: "7.76",
+      y2: "7.76"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "16.24",
+      y1: "16.24",
+      x2: "19.07",
+      y2: "19.07"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "2",
+      y1: "12",
+      x2: "6",
+      y2: "12"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "18",
+      y1: "12",
+      x2: "22",
+      y2: "12"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "4.93",
+      y1: "19.07",
+      x2: "7.76",
+      y2: "16.24"
+    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+      x1: "16.24",
+      y1: "7.76",
+      x2: "19.07",
+      y2: "4.93"
+    }));
+  });
+  Loader.propTypes = {
+    color: import_prop_types3.default.string,
+    size: import_prop_types3.default.oneOfType([import_prop_types3.default.string, import_prop_types3.default.number])
+  };
+  Loader.displayName = "Loader";
+  var loader_default = Loader;
+
+  // node_modules/react-feather/dist/icons/search.js
+  var import_react32 = __toESM(require_react());
+  var import_prop_types4 = __toESM(require_prop_types());
+  function _extends3() {
+    _extends3 = Object.assign || function(target) {
+      for (var i5 = 1; i5 < arguments.length; i5++) {
+        var source = arguments[i5];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends3.apply(this, arguments);
+  }
+  function _objectWithoutProperties3(source, excluded) {
+    if (source == null)
+      return {};
+    var target = _objectWithoutPropertiesLoose3(source, excluded);
+    var key, i5;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i5 = 0; i5 < sourceSymbolKeys.length; i5++) {
+        key = sourceSymbolKeys[i5];
+        if (excluded.indexOf(key) >= 0)
+          continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key))
+          continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _objectWithoutPropertiesLoose3(source, excluded) {
+    if (source == null)
+      return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i5;
+    for (i5 = 0; i5 < sourceKeys.length; i5++) {
+      key = sourceKeys[i5];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Search = (0, import_react32.forwardRef)(function(_ref, ref) {
+    var _ref$color = _ref.color, color = _ref$color === void 0 ? "currentColor" : _ref$color, _ref$size = _ref.size, size = _ref$size === void 0 ? 24 : _ref$size, rest = _objectWithoutProperties3(_ref, ["color", "size"]);
+    return /* @__PURE__ */ import_react32.default.createElement("svg", _extends3({
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */ import_react32.default.createElement("circle", {
       cx: "11",
       cy: "11",
       r: "8"
-    }), /* @__PURE__ */ import_react31.default.createElement("line", {
+    }), /* @__PURE__ */ import_react32.default.createElement("line", {
       x1: "21",
       y1: "21",
       x2: "16.65",
@@ -28065,57 +28145,119 @@
     }));
   });
   Search.propTypes = {
-    color: import_prop_types3.default.string,
-    size: import_prop_types3.default.oneOfType([import_prop_types3.default.string, import_prop_types3.default.number])
+    color: import_prop_types4.default.string,
+    size: import_prop_types4.default.oneOfType([import_prop_types4.default.string, import_prop_types4.default.number])
   };
   Search.displayName = "Search";
   var search_default = Search;
 
   // src/SearchResultsDialog.jsx
-  var import_react32 = __toESM(require_react());
+  var import_react33 = __toESM(require_react());
   var import_react_draggable3 = __toESM(require_cjs());
   function SearchResultsDialog({ isOpen, close, data }) {
     if (!data)
       return null;
-    return /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement(
       _t,
       {
         open: isOpen,
         className: "relative z-50",
-        onClose: () => {
-        }
+        onClose: close
       },
-      /* @__PURE__ */ import_react32.default.createElement("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-2" }, /* @__PURE__ */ import_react32.default.createElement(_t.Panel, { className: "w-full max-w-4xl rounded-xl bg-comfy-light px-4 relative" }, /* @__PURE__ */ import_react32.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-2" }, /* @__PURE__ */ import_react33.default.createElement(_t.Panel, { className: "w-full max-w-4xl rounded-xl bg-comfy-light px-4 relative" }, /* @__PURE__ */ import_react33.default.createElement(
         "span",
         {
           className: "font-semibold absolute top-0 left-0 m-4 cursor-pointer",
           onClick: close
         },
         "X"
-      ), /* @__PURE__ */ import_react32.default.createElement(_t.Title, { className: "flex flex-row justify-center" }, "Search Results"), /* @__PURE__ */ import_react32.default.createElement("div", { className: "flex flex-col max-h-96 overflow-y-auto space-y-2 p-2 " }, data.items.map(
-        (item) => /* @__PURE__ */ import_react32.default.createElement("a", { className: "flex flex-col space-y-2 hover:bg-gray-500 text-white no-underline p-2 rounded", href: `https://openart.ai/workflows/${item.id}`, target: "_blank", key: item.id }, /* @__PURE__ */ import_react32.default.createElement("span", { className: "text-2xl" }, item.name), /* @__PURE__ */ import_react32.default.createElement("div", { className: "p-2 border rounded text-xs", dangerouslySetInnerHTML: { __html: item.description } }), /* @__PURE__ */ import_react32.default.createElement("hr", { className: "w-full" }))
-      ))))
+      ), /* @__PURE__ */ import_react33.default.createElement(_t.Title, { className: "flex flex-row justify-center" }, "Search Results"), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col max-h-96 overflow-y-auto space-y-2 p-2 " }, data.items.map(
+        (item) => /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement(
+          "div",
+          {
+            className: "flex flex-row space-y-2 justify-between space-x-2 items-center p-2 rounded",
+            key: item.id
+          },
+          /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-32 h-32 relative flex-grow" }, /* @__PURE__ */ import_react33.default.createElement(
+            "img",
+            {
+              className: "object-cover absolute w-32 h-32 rounded",
+              src: item.thumbnails[0].url
+            }
+          )),
+          /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col w-4/5" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-2xl" }, item.name), /* @__PURE__ */ import_react33.default.createElement(
+            "div",
+            {
+              className: "p-2 border rounded text-xs"
+            },
+            item.description.replace(/<[^>]*>?/gm, "").substring(0, 512)
+          ))
+        ), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-row w-full justify-end space-x-2 items-center" }, /* @__PURE__ */ import_react33.default.createElement(
+          "a",
+          {
+            className: "text-white no-underline px-2 ring-0 outline-none focus:outline-none",
+            href: `https://openart.ai/workflows/${item.id}`,
+            target: "_blank"
+          },
+          /* @__PURE__ */ import_react33.default.createElement(external_link_default, null),
+          " "
+        ), /* @__PURE__ */ import_react33.default.createElement(
+          "div",
+          {
+            onClick: (e4) => {
+              e4.target.classList.add("animate-pulse");
+              e4.target.innerHTML = "Loading...";
+              e4.target.disabled = true;
+              fetch(
+                "https://openart.ai/api/public/workflows/download",
+                {
+                  method: "POST",
+                  headers: {
+                    "Content-Type": "application/json"
+                  },
+                  body: JSON.stringify({
+                    workflow_id: item.id
+                  })
+                }
+              ).catch(() => {
+                alert("Error loading workflow");
+                e4.target.classList.remove("animate-pulse");
+                e4.target.disabled = false;
+                e4.target.innerHTML = "Use workflow";
+              }).then((res) => res.json()).then((res) => {
+                e4.target.classList.remove("animate-pulse");
+                e4.target.disabled = false;
+                e4.target.innerHTML = "Use workflow";
+                app.loadGraphData(JSON.parse(res.payload));
+                close();
+              });
+            },
+            className: "bg-comfy-dark p-2 rounded text-white text-lg font-semibold cursor-pointer"
+          },
+          "Use workflow"
+        )), /* @__PURE__ */ import_react33.default.createElement("hr", { className: "w-full" }))
+      ), data.items.length === 0 && /* @__PURE__ */ import_react33.default.createElement("div", { className: "text-center text-2xl" }, "No results found"))))
     );
   }
   var SearchResultsDialog_default = SearchResultsDialog;
 
   // src/SearchComponent.jsx
   function SearchComponent() {
-    const [searching, setSearching] = (0, import_react34.useState)(false);
-    const [loading, setLoading] = (0, import_react34.useState)(false);
-    const input = (0, import_react34.useRef)(null);
-    const [text, setText] = (0, import_react34.useState)("");
-    const [data, setData] = (0, import_react34.useState)(null);
+    const [searching, setSearching] = (0, import_react35.useState)(false);
+    const [loading, setLoading] = (0, import_react35.useState)(false);
+    const input = (0, import_react35.useRef)(null);
+    const [text, setText] = (0, import_react35.useState)("");
+    const [data, setData] = (0, import_react35.useState)(null);
     const search = () => {
       setLoading(true);
-      fetch(`https://openart.ai/api/workflows/list?query_type=workflow&keyword=${text}`).then((res) => res.json()).then((results) => {
+      fetch(`https://openart.ai/api/workflows/list?query_type=workflow&keyword=${text}&pagesSize=25`).then((res) => res.json()).then((results) => {
         setLoading(false);
         setData(results);
         setSearching(false);
         setText("");
       });
     };
-    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement("div", { className: "bottom-4 fixed w-full flex justify-center" }, /* @__PURE__ */ import_react34.default.createElement("div", { className: "w-full max-w-5xl flex" }, /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement("div", { className: "bottom-4 fixed w-full flex justify-center p-2" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "w-full max-w-5xl flex" }, /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         onClick: () => {
@@ -28131,16 +28273,16 @@
         },
         className: `bg-white ${searching ? "w-full" : "w-10 h-10"} rounded-full items-center  cursor-pointer flex  flex-row space-x-2 transition-width duration-300 ease-in-out`
       },
-      /* @__PURE__ */ import_react34.default.createElement(
+      /* @__PURE__ */ import_react35.default.createElement(
         "div",
         {
           onClick: () => searching && setSearching(false),
           onKeyDown: (e4) => e4.key === "Escape" && setSearching(false),
           className: "flex items-center justify-center w-10 h-10"
         },
-        loading ? /* @__PURE__ */ import_react34.default.createElement(loader_default, { className: "text-black animate-spin" }) : /* @__PURE__ */ import_react34.default.createElement(search_default, { className: "text-black" })
+        loading ? /* @__PURE__ */ import_react35.default.createElement(loader_default, { className: "text-black animate-spin" }) : /* @__PURE__ */ import_react35.default.createElement(search_default, { className: "text-black" })
       ),
-      searching && /* @__PURE__ */ import_react34.default.createElement(
+      searching && /* @__PURE__ */ import_react35.default.createElement(
         "input",
         {
           ref: input,
@@ -28156,19 +28298,19 @@
           type: "text"
         }
       )
-    ))), /* @__PURE__ */ import_react34.default.createElement(SearchResultsDialog_default, { isOpen: data != null, close: () => setData(null), data }));
+    ))), /* @__PURE__ */ import_react35.default.createElement(SearchResultsDialog_default, { isOpen: data != null, close: () => setData(null), data }));
   }
   var SearchComponent_default = SearchComponent;
 
   // src/ComfyAssistantOverlay.jsx
   var ComfyAssistantOverlay = () => {
-    const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
-    const [video, setVideo] = (0, import_react35.useState)(null);
+    const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
+    const [video, setVideo] = (0, import_react36.useState)(null);
     window.onLearnClick = () => {
       setIsOpen(true);
       setVideo(null);
     };
-    return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
+    return /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement(
       _t,
       {
         open: isOpen,
@@ -28176,12 +28318,12 @@
         onClose: () => {
         }
       },
-      !video && /* @__PURE__ */ import_react35.default.createElement(LearnDialog_default, { close: () => setIsOpen(false), startVideo: (video2) => setVideo(video2) }),
-      video && /* @__PURE__ */ import_react35.default.createElement(YoutubePlayer_default, { videoId: "BT2Kpm1cU-w", close: () => {
+      !video && /* @__PURE__ */ import_react36.default.createElement(LearnDialog_default, { close: () => setIsOpen(false), startVideo: (video2) => setVideo(video2) }),
+      video && /* @__PURE__ */ import_react36.default.createElement(YoutubePlayer_default, { videoId: "BT2Kpm1cU-w", close: () => {
         setIsOpen(false);
         setVideo(null);
       }, video })
-    ), /* @__PURE__ */ import_react35.default.createElement(SearchComponent_default, null));
+    ), /* @__PURE__ */ import_react36.default.createElement(SearchComponent_default, null));
   };
   var ComfyAssistantOverlay_default = ComfyAssistantOverlay;
 
@@ -28189,7 +28331,7 @@
   var rootDomNode = document.createElement("div");
   document.body.appendChild(rootDomNode);
   var root = ReactDOM.createRoot(rootDomNode);
-  root.render(/* @__PURE__ */ React9.createElement(ComfyAssistantOverlay_default, null));
+  root.render(/* @__PURE__ */ React10.createElement(ComfyAssistantOverlay_default, null));
 })();
 /*! Bundled license information:
 
diff --git a/ui/src/SearchComponent.jsx b/ui/src/SearchComponent.jsx
index a378712..d8c04ac 100644
--- a/ui/src/SearchComponent.jsx
+++ b/ui/src/SearchComponent.jsx
@@ -10,7 +10,7 @@ function SearchComponent() {
     const [data,setData] = useState(null)
     const search = () => {
         setLoading(true)
-        fetch(`https://openart.ai/api/workflows/list?query_type=workflow&keyword=${text}`)
+        fetch(`https://openart.ai/api/workflows/list?query_type=workflow&keyword=${text}&pagesSize=25`)
             .then(res=>res.json())
             .then((results)=> {
                 setLoading(false)
@@ -23,7 +23,7 @@ function SearchComponent() {
 
     return (
         <>
-        <div className={'bottom-4 fixed w-full flex justify-center'}>
+        <div className={'bottom-4 fixed w-full flex justify-center p-2'}>
             <div className={'w-full max-w-5xl flex'}>
                 <div
                     onClick={() => {
diff --git a/ui/src/SearchResultsDialog.jsx b/ui/src/SearchResultsDialog.jsx
index 3755f9c..44bc90a 100644
--- a/ui/src/SearchResultsDialog.jsx
+++ b/ui/src/SearchResultsDialog.jsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {Dialog} from "@headlessui/react";
 import logo from "./logo.png";
 import Draggable from "react-draggable";
+import {ExternalLink} from "react-feather";
 function SearchResultsDialog({isOpen, close,data}) {
     if(!data) return null
 
@@ -9,7 +10,7 @@ function SearchResultsDialog({isOpen, close,data}) {
         <Dialog
             open={isOpen}
             className="relative z-50"
-            onClose={() => {}}
+            onClose={close}
         >
         <div className="fixed inset-0 flex w-screen items-center justify-center p-2">
             <Dialog.Panel className="w-full max-w-4xl rounded-xl bg-comfy-light px-4 relative">
@@ -17,14 +18,66 @@ function SearchResultsDialog({isOpen, close,data}) {
                               onClick={close}>X</span>
 
                 <Dialog.Title className={"flex flex-row justify-center"}>Search Results</Dialog.Title>
-                    <div className={"flex flex-col max-h-96 overflow-y-auto space-y-2 p-2 "}>
-                        {data.items.map(
-                            item=> <a className={"flex flex-col space-y-2 hover:bg-gray-500 text-white no-underline p-2 rounded"} href={`https://openart.ai/workflows/${item.id}`} target={"_blank"} key={item.id}>
-                                <span className={"text-2xl"} >{item.name}</span>
-                                <div className={"p-2 border rounded text-xs"} dangerouslySetInnerHTML={{__html:item.description}}/>
-                                <hr className={"w-full"}/>
-                            </a>
-                        )}
+                <div className={"flex flex-col max-h-96 overflow-y-auto space-y-2 p-2 "}>
+                    {data.items.map(
+                        item => <div className={"flex flex-col"}>
+                            <div
+                                className={"flex flex-row space-y-2 justify-between space-x-2 items-center p-2 rounded"}
+                                key={item.id}>
+                                <div className={"w-32 h-32 relative flex-grow"}>
+                                    <img className={"object-cover absolute w-32 h-32 rounded"}
+                                         src={item.thumbnails[0].url}/>
+                                </div>
+                                <div className={"flex flex-col w-4/5"}>
+                                    <span className={"text-2xl"}>
+                                        {item.name}
+                                         </span>
+                                    <div
+                                        className={"p-2 border rounded text-xs"}>{item.description.replace(/<[^>]*>?/gm, '').substring(0, 512)}</div>
+                                </div>
+                            </div>
+                            <div className={"flex flex-row w-full justify-end space-x-2 items-center"}>
+                                <a className={"text-white no-underline px-2 ring-0 outline-none focus:outline-none"}
+                                   href={`https://openart.ai/workflows/${item.id}`}
+                                   target={"_blank"}><ExternalLink/> </a>
+                                <div
+                                    onClick={(e) => {
+                                        e.target.classList.add('animate-pulse')
+                                        e.target.innerHTML = "Loading..."
+                                        e.target.disabled = true
+                                        fetch("https://openart.ai/api/public/workflows/download",
+                                            {
+                                                method: 'POST',
+                                                headers: {
+                                                    'Content-Type': 'application/json'
+                                                },
+                                                body: JSON.stringify({
+                                                    workflow_id: item.id
+                                                })
+                                            })
+                                            .catch(() => {
+                                                alert("Error loading workflow")
+                                                e.target.classList.remove('animate-pulse')
+                                                e.target.disabled = false
+                                                e.target.innerHTML = "Use workflow"
+                                            })
+                                            .then(res => res.json())
+                                            .then(res => {
+                                                e.target.classList.remove('animate-pulse')
+                                                e.target.disabled = false
+                                                e.target.innerHTML = "Use workflow"
+                                                app.loadGraphData(JSON.parse(res.payload))
+                                                close()
+                                            })
+
+                                    }}
+                                    className={"bg-comfy-dark p-2 rounded text-white text-lg font-semibold cursor-pointer"}>Use workflow
+                                </div>
+                            </div>
+                            <hr className={"w-full"}/>
+                        </div>
+                    )}
+                    {data.items.length === 0 && <div className={"text-center text-2xl"}>No results found</div>}
                 </div>
 
             </Dialog.Panel>