diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 80ca05038..1a5a641d9 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -166,323 +166,335 @@ export default function CollectionCardComponent({
   }
 
   return (
-    <Card
-      className={cn(
-        "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
-        disabled ? "pointer-events-none opacity-50" : "",
-        onClick ? "cursor-pointer" : ""
-      )}
-      onClick={onClick}
-    >
-      <div>
-        <CardHeader>
-          <div>
-            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-              <IconComponent
-                className={cn(
-                  "flex-shrink-0",
-                  data.is_component
-                    ? "mx-0.5 h-6 w-6 text-component-icon"
-                    : "h-7 w-7 flex-shrink-0 text-flow-icon"
-                )}
-                name={data.is_component ? "ToyBrick" : "Group"}
-              />
-              <ShadTooltip content={data.name}>
-                <div className="w-full truncate">{data.name}</div>
-              </ShadTooltip>
-              {data?.metadata !== undefined && (
-                <div className="flex gap-3">
-                  {data.private && (
-                    <ShadTooltip content="Private">
-                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="Lock" className="h-4 w-4" />
-                      </span>
-                    </ShadTooltip>
+    <>
+      <Card
+        className={cn(
+          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
+          disabled ? "pointer-events-none opacity-50" : "",
+          onClick ? "cursor-pointer" : ""
+        )}
+        onClick={onClick}
+      >
+        <div>
+          <CardHeader>
+            <div>
+              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+                <IconComponent
+                  className={cn(
+                    "flex-shrink-0",
+                    data.is_component
+                      ? "mx-0.5 h-6 w-6 text-component-icon"
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
                   )}
-                  {!data.is_component && (
-                    <ShadTooltip content="Components">
+                  name={data.is_component ? "ToyBrick" : "Group"}
+                />
+                <ShadTooltip content={data.name}>
+                  <div className="w-full truncate">{data.name}</div>
+                </ShadTooltip>
+                {data?.metadata !== undefined && (
+                  <div className="flex gap-3">
+                    {data.private && (
+                      <ShadTooltip content="Private">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="Lock" className="h-4 w-4" />
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    {!data.is_component && (
+                      <ShadTooltip content="Components">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="ToyBrick" className="h-4 w-4" />
+                          <span data-testid={`total-${data.name}`}>
+                            {data?.metadata?.total ?? 0}
+                          </span>
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    <ShadTooltip content="Likes">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="ToyBrick" className="h-4 w-4" />
-                        <span data-testid={`total-${data.name}`}>
-                          {data?.metadata?.total ?? 0}
+                        <IconComponent
+                          name="Heart"
+                          className={cn("h-4 w-4 ")}
+                        />
+                        <span data-testid={`likes-${data.name}`}>
+                          {likes_count ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
-                  )}
-                  <ShadTooltip content="Likes">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
-                      <span data-testid={`likes-${data.name}`}>
-                        {likes_count ?? 0}
-                      </span>
-                    </span>
-                  </ShadTooltip>
-                  <ShadTooltip content="Downloads">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                      <span data-testid={`downloads-${data.name}`}>
-                        {downloads_count ?? 0}
-                      </span>
-                    </span>
-                  </ShadTooltip>
-                </div>
-              )}
-
-              {onDelete && data?.metadata === undefined && (
-                <DeleteConfirmationModal
-                  onConfirm={() => {
-                    onDelete();
-                  }}
-                >
-                  <IconComponent
-                    name="Trash2"
-                    className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                  />
-                </DeleteConfirmationModal>
-              )}
-            </CardTitle>
-          </div>
-          {data.user_created && data.user_created.username && (
-            <span className="text-sm text-primary">
-              by <b>{data.user_created.username}</b>
-              {data.last_tested_version && (
-                <>
-                  {" "}
-                  |{" "}
-                  <span className="text-xs">
-                    {" "}
-                    ⛓︎ v{data.last_tested_version}
-                  </span>
-                </>
-              )}
-            </span>
-          )}
-
-          <CardDescription className="pb-2 pt-2">
-            <div className="truncate-doubleline">{data.description}</div>
-          </CardDescription>
-        </CardHeader>
-      </div>
-
-      <CardFooter>
-        <div className="flex w-full items-center justify-between gap-2">
-          <div className="flex w-full flex-wrap items-end justify-between gap-2">
-            <div className="flex w-full flex-1 flex-wrap gap-2">
-              {data.tags &&
-                data.tags.length > 0 &&
-                data.tags.map((tag, index) => (
-                  <Badge
-                    key={index}
-                    variant="outline"
-                    size="xq"
-                    className="text-muted-foreground"
-                  >
-                    {tag.name}
-                  </Badge>
-                ))}
-            </div>
-            {data.liked_by_count != undefined && (
-              <div className="flex gap-0.5">
-                {playground && data?.metadata !== undefined && (
-                  <ShadTooltip
-                    content={
-                      authorized ? "Playground" : "Please review your API key."
-                    }
-                  >
-                    <Button
-                      disabled={loadingLike}
-                      variant="ghost"
-                      size="icon"
-                      className={
-                        "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "")
-                      }
-                      onClick={(e) => {
-                        if (!authorized) {
-                          return;
-                        }
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setLoadingPlayground(true);
-                        if (getFlowById(data.id)) {
-                          setCurrentFlowId(data.id);
-                          setOpenPlayground(true);
-                          setLoadingPlayground(false);
-                        } else {
-                          getFlowData().then((res) => {
-                            setCurrentFlow(res);
-                            setOpenPlayground(true);
-                            setLoadingPlayground(false);
-                          });
-                        }
-                      }}
-                      data-testid={`playground-${data.name}`}
-                    >
-                      {!loadingPlayground ? (
+                    <ShadTooltip content="Downloads">
+                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent
-                          name="BotMessageSquareIcon"
-                          className={cn(
-                            "h-5 w-5 select-none",
-                            !authorized ? " text-ring" : ""
-                          )}
+                          name="DownloadCloud"
+                          className="h-4 w-4"
                         />
-                      ) : (
-                        <Loading className="h-4 w-4 select-none text-medium-indigo" />
-                      )}
-                    </Button>
-                  </ShadTooltip>
+                        <span data-testid={`downloads-${data.name}`}>
+                          {downloads_count ?? 0}
+                        </span>
+                      </span>
+                    </ShadTooltip>
+                  </div>
                 )}
-                {onDelete && data?.metadata !== undefined ? (
-                  <ShadTooltip
-                    content={
-                      authorized ? "Delete" : "Please review your API key."
-                    }
+
+                {onDelete && data?.metadata === undefined && (
+                  <DeleteConfirmationModal
+                    onConfirm={() => {
+                      onDelete();
+                    }}
                   >
-                    <DeleteConfirmationModal
-                      onConfirm={() => {
-                        onDelete();
-                      }}
+                    <IconComponent
+                      name="Trash2"
+                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    />
+                  </DeleteConfirmationModal>
+                )}
+              </CardTitle>
+            </div>
+            {data.user_created && data.user_created.username && (
+              <span className="text-sm text-primary">
+                by <b>{data.user_created.username}</b>
+                {data.last_tested_version && (
+                  <>
+                    {" "}
+                    |{" "}
+                    <span className="text-xs">
+                      {" "}
+                      ⛓︎ v{data.last_tested_version}
+                    </span>
+                  </>
+                )}
+              </span>
+            )}
+
+            <CardDescription className="pb-2 pt-2">
+              <div className="truncate-doubleline">{data.description}</div>
+            </CardDescription>
+          </CardHeader>
+        </div>
+
+        <CardFooter>
+          <div className="flex w-full items-center justify-between gap-2">
+            <div className="flex w-full flex-wrap items-end justify-between gap-2">
+              <div className="flex w-full flex-1 flex-wrap gap-2">
+                {data.tags &&
+                  data.tags.length > 0 &&
+                  data.tags.map((tag, index) => (
+                    <Badge
+                      key={index}
+                      variant="outline"
+                      size="xq"
+                      className="text-muted-foreground"
+                    >
+                      {tag.name}
+                    </Badge>
+                  ))}
+              </div>
+              {data.liked_by_count != undefined && (
+                <div className="flex gap-0.5">
+                  {playground && data?.metadata !== undefined && (
+                    <ShadTooltip
+                      content={
+                        authorized
+                          ? "Playground"
+                          : "Please review your API key."
+                      }
                     >
                       <Button
+                        disabled={loadingLike}
                         variant="ghost"
                         size="icon"
                         className={
                           "whitespace-nowrap" +
                           (!authorized ? " cursor-not-allowed" : "")
                         }
+                        onClick={(e) => {
+                          if (!authorized) {
+                            return;
+                          }
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setLoadingPlayground(true);
+                          if (getFlowById(data.id)) {
+                            setCurrentFlowId(data.id);
+                            setOpenPlayground(true);
+                            setLoadingPlayground(false);
+                          } else {
+                            getFlowData().then((res) => {
+                              setCurrentFlow(res);
+                              setOpenPlayground(true);
+                              setLoadingPlayground(false);
+                            });
+                          }
+                        }}
+                        data-testid={`playground-${data.name}`}
+                      >
+                        {!loadingPlayground ? (
+                          <IconComponent
+                            name="BotMessageSquareIcon"
+                            className={cn(
+                              "h-5 w-5 select-none",
+                              !authorized ? " text-ring" : ""
+                            )}
+                          />
+                        ) : (
+                          <Loading className="h-4 w-4 select-none text-medium-indigo" />
+                        )}
+                      </Button>
+                    </ShadTooltip>
+                  )}
+                  {onDelete && data?.metadata !== undefined ? (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Delete" : "Please review your API key."
+                      }
+                    >
+                      <DeleteConfirmationModal
+                        onConfirm={() => {
+                          onDelete();
+                        }}
+                      >
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className={
+                            "whitespace-nowrap" +
+                            (!authorized ? " cursor-not-allowed" : "")
+                          }
+                        >
+                          <IconComponent
+                            name="Trash2"
+                            className={cn(
+                              "h-5 w-5",
+                              !authorized ? " text-ring" : ""
+                            )}
+                          />
+                        </Button>
+                      </DeleteConfirmationModal>
+                    </ShadTooltip>
+                  ) : (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Like" : "Please review your API key."
+                      }
+                    >
+                      <Button
+                        disabled={loadingLike}
+                        variant="ghost"
+                        size="icon"
+                        className={
+                          "whitespace-nowrap" +
+                          (!authorized ? " cursor-not-allowed" : "")
+                        }
+                        onClick={() => {
+                          if (!authorized) {
+                            return;
+                          }
+                          handleLike();
+                        }}
+                        data-testid={`like-${data.name}`}
                       >
                         <IconComponent
-                          name="Trash2"
+                          name="Heart"
                           className={cn(
                             "h-5 w-5",
+                            liked_by_user
+                              ? "fill-destructive stroke-destructive"
+                              : "",
                             !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
-                    </DeleteConfirmationModal>
-                  </ShadTooltip>
-                ) : (
+                    </ShadTooltip>
+                  )}
                   <ShadTooltip
                     content={
-                      authorized ? "Like" : "Please review your API key."
+                      authorized
+                        ? isStore
+                          ? "Download"
+                          : "Install Locally"
+                        : "Please review your API key."
                     }
                   >
                     <Button
-                      disabled={loadingLike}
+                      disabled={loading}
                       variant="ghost"
                       size="icon"
                       className={
                         "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "")
+                        (!authorized ? " cursor-not-allowed" : "") +
+                        (!loading ? " p-0.5" : "")
                       }
                       onClick={() => {
-                        if (!authorized) {
+                        if (loading || !authorized) {
                           return;
                         }
-                        handleLike();
+                        handleInstall();
                       }}
-                      data-testid={`like-${data.name}`}
+                      data-testid={`install-${data.name}`}
                     >
                       <IconComponent
-                        name="Heart"
+                        name={
+                          loading ? "Loader2" : isStore ? "Download" : "Plus"
+                        }
                         className={cn(
-                          "h-5 w-5",
-                          liked_by_user
-                            ? "fill-destructive stroke-destructive"
-                            : "",
+                          loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
                           !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>
                   </ShadTooltip>
-                )}
-                <ShadTooltip
-                  content={
-                    authorized
-                      ? isStore
-                        ? "Download"
-                        : "Install Locally"
-                      : "Please review your API key."
-                  }
-                >
-                  <Button
-                    disabled={loading}
-                    variant="ghost"
-                    size="icon"
-                    className={
-                      "whitespace-nowrap" +
-                      (!authorized ? " cursor-not-allowed" : "") +
-                      (!loading ? " p-0.5" : "")
-                    }
-                    onClick={() => {
-                      if (loading || !authorized) {
-                        return;
-                      }
-                      handleInstall();
-                    }}
-                    data-testid={`install-${data.name}`}
-                  >
-                    <IconComponent
-                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
-                      className={cn(
-                        loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                        !authorized ? " text-ring" : ""
-                      )}
-                    />
-                  </Button>
-                </ShadTooltip>
-              </div>
-            )}
-            {button && button}
-            {playground && data?.metadata === undefined && (
-              <Button
-                disabled={loadingPlayground}
-                key={data.id}
-                tabIndex={-1}
-                variant="outline"
-                size="sm"
-                className="gap-2 whitespace-nowrap"
-                data-testid={"playground-flow-button-" + data.id}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setLoadingPlayground(true);
-                  if (getFlowById(data.id)) {
-                    setCurrentFlowId(data.id);
-                    setOpenPlayground(true);
-                    setLoadingPlayground(false);
-                  } else {
-                    getFlowData().then((res) => {
-                      setCurrentFlow(res);
+                </div>
+              )}
+              {button && button}
+              {playground && data?.metadata === undefined && (
+                <Button
+                  disabled={loadingPlayground}
+                  key={data.id}
+                  tabIndex={-1}
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 whitespace-nowrap"
+                  data-testid={"playground-flow-button-" + data.id}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLoadingPlayground(true);
+                    if (getFlowById(data.id)) {
+                      setCurrentFlowId(data.id);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
-                    });
-                  }
-                }}
-              >
-                {!loadingPlayground ? (
-                  <IconComponent
-                    name="BotMessageSquareIcon"
-                    className="h-4 w-4 select-none"
-                  />
-                ) : (
-                  <Loading className="h-4 w-4 text-medium-indigo" />
-                )}
-                Playground
-              </Button>
-            )}
-            {openPlayground && (
-              <IOModal
-                cleanOnClose={true}
-                open={openPlayground}
-                setOpen={setOpenPlayground}
-              >
-                <></>
-              </IOModal>
-            )}
+                    } else {
+                      getFlowData().then((res) => {
+                        setCurrentFlow(res);
+                        setOpenPlayground(true);
+                        setLoadingPlayground(false);
+                      });
+                    }
+                  }}
+                >
+                  {!loadingPlayground ? (
+                    <IconComponent
+                      name="BotMessageSquareIcon"
+                      className="h-4 w-4 select-none"
+                    />
+                  ) : (
+                    <Loading className="h-4 w-4 text-medium-indigo" />
+                  )}
+                  Playground
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
-      </CardFooter>
-    </Card>
+        </CardFooter>
+      </Card>
+      {openPlayground && (
+        <IOModal
+          cleanOnClose={true}
+          open={openPlayground}
+          setOpen={setOpenPlayground}
+        >
+          <></>
+        </IOModal>
+      )}
+    </>
   );
 }
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 93fdd5d41..46b934198 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -128,7 +128,7 @@ export default function IOModal({
         <div className="flex items-center">
           <span className="pr-2">Playground</span>
           <IconComponent
-            name="Zap"
+            name="BotMessageSquareIcon"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />