fix: add collapsible function to templates and fix design bugs (#4305)

* Updated colors * Fixed design for small screens * Change border radius * Changed size of text on templates description * Fix shine effect on small screens * Fixed icons on starter templates * Updated mono font to JetBrains * Updated icon hit area for X * Added gradient wrapper and x-gradient * Changed colors and font weights for nav component * Added zoom on hover of gradient * Fixed input size * Fixed all templates to show everything * Hide scrollbar * Change text size of card * Removed title of the categories * Removed unused currentTab from templatecategory * Updated position of search icon * Updated style of inputs * Updated search clear button * Fixed bug on small screens * Added no results query * Fixed background on get started cards * Added focus ring on nav component * Added tab index to search and sidebar buttons * Added keyboard navigation to templates * Updated templatesModal to use ShadCN Sidebar * Implemented collapsible sidebar * Fix collapsible to work on mobile but be overlaying content * Added noise to styleUtils * Updated padding and sizes for mobile * Updated text size * Updated font family to inter * Made get started components fetch title and description from the flow * Updated description on get started component * Updated naming of sidebar * Updated description of start from scratch * Updated color of selected sidebar item * Changed text color for sidebar not active items * changed description sizes * changed to line clamp * Reduced gap between icon and category text * Fixed no results state * Fixed X icon only appearing on hover * Fix auto focus issue * fixed hover color of primary button * Fixed gradients to use stops if it exists and stop using random gradient * removed random gradient * Fixed design of cards in templates * Updated nav to go through tests * Fixed focus on input * [autofix.ci] apply automated fixes * New color * fix testes * Fixed starter projects test * ✨ (starter-projects.spec.ts): add Page import to test function parameters for better code readability and maintainability 📝 (starter-projects.spec.ts): refactor test to include a function for waiting for template visibility, improving code readability and reducing duplication --------- Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-31 16:39:58 -03:00 · 2024-10-31 16:39:58 -03:00 · 3279b8a1e8
commit 3279b8a1e8
parent a03da10750
30 changed files with 1312 additions and 283 deletions
--- a/docs/css/custom.css
+++ b/docs/css/custom.css
@ -8,7 +8,7 @@
  --ifm-navbar-link-hover-color: initial;
  --ifm-navbar-padding-vertical: 0;
  --ifm-navbar-item-padding-vertical: 0;
-  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica,
+  --ifm-font-family-base: Inter, -apple-system, BlinkMacSystemFont, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
  --ifm-font-family-monospace: "SFMono-Regular", "Roboto Mono", Consolas,
    "Liberation Mono", Menlo, Courier, monospace;
@ -118,17 +118,15 @@ body {
  width: 24px;
  height: 24px;
  display: flex;
-  background: url("/logos/gitLight.svg")
-    no-repeat;
+  background: url("/logos/gitLight.svg") no-repeat;
 }

-[data-theme='dark'] .header-github-link:before {
+[data-theme="dark"] .header-github-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
-  background: url("/logos/gitDark.svg")
-    no-repeat;
+  background: url("/logos/gitDark.svg") no-repeat;
 }

 /* Twitter */
@ -145,7 +143,7 @@ body {
  background-size: contain;
 }

-[data-theme='dark'] .header-twitter-link::before {
+[data-theme="dark"] .header-twitter-link::before {
  content: "";
  width: 24px;
  height: 24px;
@ -164,7 +162,7 @@ body {
  opacity: 0.6;
 }

-[data-theme='dark'] .header-discord-link::before {
+[data-theme="dark"] .header-discord-link::before {
  content: "";
  width: 24px;
  height: 24px;
@ -241,6 +239,8 @@ body {
  min-height: 70px;
 }

-.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(:first-child) {
-  margin-top: 0.25rem!important;
-}
+.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(
+    :first-child
+  ) {
+  margin-top: 0.25rem !important;
+}
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@ -5,12 +5,10 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
      rel="stylesheet"
    />
    <script
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -61,7 +61,6 @@
        "p-debounce": "^4.0.0",
        "pako": "^2.1.0",
        "playwright": "^1.44.1",
-        "random-gradient": "^0.0.2",
        "react": "^18.3.1",
        "react-ace": "^11.0.1",
        "react-cookie": "^7.1.4",
@ -14330,16 +14329,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/random-gradient": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/random-gradient/-/random-gradient-0.0.2.tgz",
-      "integrity": "sha512-1RfI+1PL7ZFNRjNX0pp5UI+RNpfwkRro0q3A20xEOOn5yIIN4Du+RbwzN9ryozq1s85ubREEtLqUXtirRc//Ww==",
-      "license": "MIT",
-      "dependencies": {
-        "string-hash": "^1.1.3",
-        "tinycolor2": "^1.4.1"
-      }
-    },
    "node_modules/rc": {
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -15912,12 +15901,6 @@
        "safe-buffer": "~5.2.0"
      }
    },
-    "node_modules/string-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
-      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
-      "license": "CC0-1.0"
-    },
    "node_modules/string-width": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@ -16338,12 +16321,6 @@
      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
      "license": "MIT"
    },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "license": "MIT"
-    },
    "node_modules/tmp": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@ -56,7 +56,6 @@
    "p-debounce": "^4.0.0",
    "pako": "^2.1.0",
    "playwright": "^1.44.1",
-    "random-gradient": "^0.0.2",
    "react": "^18.3.1",
    "react-ace": "^11.0.1",
    "react-cookie": "^7.1.4",
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@ -239,7 +239,7 @@ export default function NodeStatus({
        >
          <div className="cursor-help">
            {conditionSuccess && validationStatus?.data?.duration ? (
-              <div className="mr-1 flex gap-1 rounded-sm bg-emerald-50 px-1 font-jetbrains text-[11px] font-bold text-emerald-500">
+              <div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-emerald-50 px-1 text-[11px] font-bold text-emerald-500">
                <Check className="h-4 w-4 items-center self-center" />
                <span>
                  {normalizeTimeString(validationStatus?.data?.duration)}
--- a/src/frontend/src/components/GradientWrapper/index.tsx
+++ b/src/frontend/src/components/GradientWrapper/index.tsx
@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+export function GradientWrapper({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <svg width="0" height="0" className="absolute">
+        <defs>
+          <linearGradient id="x-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="-35.61%" stopColor="#e6b1e1" />
+            <stop offset="13.03%" stopColor="#e94b71" />
+            <stop offset="61.67%" stopColor="#b79bde" />
+            <stop offset="126.52%" stopColor="#e955cb" />
+          </linearGradient>
+        </defs>
+      </svg>
+      {children}
+    </>
+  );
+}
--- a/src/frontend/src/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@ -101,7 +101,7 @@ const CustomInputPopover = ({
              className={cn(
                "flex items-center gap-1 truncate bg-muted",
                nodeStyle &&
-                  "rounded-[3px] bg-emerald-100 px-1 font-jetbrains text-emerald-700 hover:bg-emerald-200",
+                  "font-jetbrains rounded-[3px] bg-emerald-100 px-1 text-emerald-700 hover:bg-emerald-200",
              )}
            >
              <div className="max-w-36 truncate">{selectedOption}</div>
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@ -5,11 +5,11 @@ import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";

 const buttonVariants = cva(
-  "noflow nowheel nopan nodelete nodrag  inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-100 disabled:disabled-state disabled:pointer-events-none  ring-offset-background",
+  "noflow nowheel nopan nodelete nodrag inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-100 disabled:disabled-state [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground  hover:bg-primary-hover",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
@ -19,9 +19,9 @@ const buttonVariants = cva(
        secondary:
          "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
        ghost: "hover:bg-accent hover:text-accent-foreground",
-        menu: "hover:bg-muted hover:text-accent-foreground focus:!ring-0 focus-visible:!ring-0",
+        menu: "hover:bg-muted hover:text-accent-foreground focus-visible:!ring-offset-0",
        "menu-active":
-          "font-semibold hover:bg-muted hover:text-accent-foreground focus:!ring-0 focus-visible:!ring-0",
+          "font-semibold hover:bg-muted hover:text-accent-foreground focus-visible:!ring-offset-0",
        link: "underline-offset-4 hover:underline text-primary",
      },
      size: {
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@ -12,7 +12,7 @@ const DialogPortal = ({
  ...props
 }: DialogPrimitive.DialogPortalProps) => (
  <DialogPrimitive.Portal {...props}>
-    <div className="nopan nodelete nodrag noflow fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <div className="nopan nodelete nodrag noflow fixed inset-0 z-50 flex items-center justify-center">
      {children}
    </div>
  </DialogPrimitive.Portal>
@ -43,13 +43,13 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed z-50 flex w-full max-w-lg flex-col gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] sm:rounded-lg md:w-full",
+        "fixed z-50 flex w-full max-w-lg flex-col gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
        className,
      )}
      {...props}
    >
      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-2.5 top-2.5 rounded-sm p-1.5 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <Cross2Icon className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
@ -63,10 +63,7 @@ const DialogHeader = ({
  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
-    className={cn(
-      "flex flex-col space-y-1 text-center sm:text-left",
-      className,
-    )}
+    className={cn("flex flex-col space-y-1 text-left", className)}
    {...props}
  />
 );
--- a/src/frontend/src/components/ui/separator.tsx
+++ b/src/frontend/src/components/ui/separator.tsx
@ -17,7 +17,7 @@ const Separator = React.forwardRef<
      decorative={decorative}
      orientation={orientation}
      className={cn(
-        "shrink-0 bg-zinc-300 dark:bg-zinc-700",
+        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className,
      )}
--- a/src/frontend/src/components/ui/sheet.tsx
+++ b/src/frontend/src/components/ui/sheet.tsx
@ -0,0 +1,140 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../utils/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
--- a/src/frontend/src/components/ui/sidebar.tsx
+++ b/src/frontend/src/components/ui/sidebar.tsx
@ -0,0 +1,751 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../utils/utils";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "19rem";
+const SIDEBAR_WIDTH_ICON = "4rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    width?: string;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      width = SIDEBAR_WIDTH,
+      ...props
+    },
+    ref,
+  ) => {
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        if (setOpenProp) {
+          return setOpenProp?.(
+            typeof value === "function" ? value(open) : value,
+          );
+        }
+
+        _setOpen(value);
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open],
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return setOpen((open) => !open);
+    }, [setOpen]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, toggleSidebar],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": width,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex h-full w-full text-foreground has-[[data-variant=inset]]:bg-background",
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { state } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "group flex h-full w-[--sidebar-width] flex-col bg-background text-foreground",
+            className,
+          )}
+          data-side={side}
+          ref={ref}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col group-data-[side=left]:border-r group-data-[side=right]:border-l"
+          >
+            {children}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer relative block h-full flex-col"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative h-full w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+            // Keep icon width on mobile when collapsed
+            "max-sm:w-[--sidebar-width-icon]",
+          )}
+        />
+        <div
+          className={cn(
+            "absolute inset-y-0 z-50 flex h-full transition-[left,right,width] duration-200 ease-linear",
+            // Adjust width based on state and device
+            "w-[--sidebar-width]",
+            "max-sm:group-data-[state=collapsed]:w-[--sidebar-width-icon]",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            // Position absolute relative to parent container on mobile
+            "max-sm:absolute max-sm:h-[100%] max-sm:group-data-[state=expanded]:bg-background/80",
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className={cn(
+              "flex h-full w-full flex-col bg-background",
+              "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow",
+              // Add shadow on mobile
+              "max-sm:shadow-lg",
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-8 w-8", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:hover:bg group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:m-2 peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 peer-data-[variant=inset]:ml-0 peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-1 focus-visible:ring-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-border", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-foreground/70 outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:-inset-2 after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-ring transition-[width,height,padding] hover:bg-accent hover:text-accent-foreground focus-visible:ring-1 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "text-secondary-foreground hover:bg-accent hover:text-accent-foreground ",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--border))] hover:bg-accent hover:text-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed"}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-1 peer-hover/menu-button:text-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:-inset-2 after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-foreground",
+      "peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-foreground outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-1 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground",
+        "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@ -1,3 +1,4 @@
+import { GradientWrapper } from "@/components/GradientWrapper";
 import { CustomWrapper } from "@/customization/custom-wrapper";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode } from "react";
@ -12,16 +13,18 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
  return (
    <>
      <CustomWrapper>
-        <QueryClientProvider client={queryClient}>
-          <AuthProvider>
-            <TooltipProvider skipDelayDuration={0}>
-              <ReactFlowProvider>
-                <ApiInterceptor />
-                {children}
-              </ReactFlowProvider>
-            </TooltipProvider>
-          </AuthProvider>
-        </QueryClientProvider>
+        <GradientWrapper>
+          <QueryClientProvider client={queryClient}>
+            <AuthProvider>
+              <TooltipProvider skipDelayDuration={0}>
+                <ReactFlowProvider>
+                  <ApiInterceptor />
+                  {children}
+                </ReactFlowProvider>
+              </TooltipProvider>
+            </AuthProvider>
+          </QueryClientProvider>
+        </GradientWrapper>
      </CustomWrapper>
    </>
  );
--- a/src/frontend/src/hooks/use-mobile.ts
+++ b/src/frontend/src/hooks/use-mobile.ts
@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export function useMobile(breakpoint: number = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < breakpoint);
+    };
+
+    // Check initially
+    checkMobile();
+
+    // Add event listener
+    window.addEventListener("resize", checkMobile);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", checkMobile);
+  }, [breakpoint]);
+
+  return isMobile;
+}
--- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
+++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
@ -39,8 +39,9 @@ export const switchCaseModalSize = (size: string) => {
      height = "h-[80vh]";
      break;
    case "templates":
-      minWidth = "min-w-[85vw] max-w-[1200px]";
-      height = "h-[70vh] max-h-[700px]";
+      minWidth = "w-[97vw] max-w-[1200px]";
+      height =
+        "min-h-[700px] lg:min-h-0 h-[90vh] md:h-[80vh] lg:h-[50vw] lg:max-h-[640px]";
      break;
    case "three-cards":
      minWidth = "min-w-[1066px]";
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@ -80,7 +80,7 @@ const Header: React.FC<{
      <DialogTitle className="line-clamp-1 flex items-center pb-0.5">
        {children}
      </DialogTitle>
-      <DialogDescription className="line-clamp-2">
+      <DialogDescription className="line-clamp-3">
        {description}
      </DialogDescription>
    </DialogHeader>
@ -235,6 +235,7 @@ function BaseModal({
        <Dialog open={open} onOpenChange={setOpen}>
          {triggerChild}
          <DialogContent
+            onOpenAutoFocus={(event) => event.preventDefault()}
            onEscapeKeyDown={onEscapeKeyDown}
            className={contentClasses}
          >
--- a/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
@ -4,9 +4,6 @@ import { CardData } from "@/types/templates/types";
 import memoryChatbotSpiral from "../../../../assets/artwork-spiral-1-def.svg";
 import vectorRagSpiral from "../../../../assets/artwork-spiral-2-def.svg";
 import multiAgentSpiral from "../../../../assets/artwork-spiral-3-def.svg";
-import memoryChatbotBg from "../../../../assets/memory-chatbot-bg.png";
-import multiAgentBg from "../../../../assets/multi-agent-bg.png";
-import vectorRagBg from "../../../../assets/vector-rag-bg.png";
 import TemplateGetStartedCardComponent from "../TemplateGetStartedCardComponent";

 export default function GetStartedComponent() {
@ -15,43 +12,34 @@ export default function GetStartedComponent() {
  // Define the card data
  const cardData: CardData[] = [
    {
-      bgImage: memoryChatbotBg,
+      bg: "linear-gradient(145deg, #7CC0FF 0%, #96B9FF 50%, #CAA5FF 100%)",
      spiralImage: memoryChatbotSpiral,
      icon: "MessagesSquare",
      category: "Chatbot",
-      title: "Memory Chatbot",
-      description:
-        "Get hands-on with Langflow by building a simple RAGbot that uses memory.",
      flow: examples.find((example) => example.name === "Memory Chatbot"),
    },
    {
-      bgImage: vectorRagBg,
+      bg: "linear-gradient(145deg,  #388295 0%, #52B0C4 50%, #7CAB64 100%)",
      spiralImage: vectorRagSpiral,
-      icon: "MessagesSquare",
+      icon: "Database",
      category: "Vector RAG",
-      title: "Vector RAG",
-      description:
-        "Ingest data into a native vector store and efficiently retrieve it.",
      flow: examples.find((example) => example.name === "Vector Store RAG"),
    },
    {
-      bgImage: multiAgentBg,
+      bg: "linear-gradient(145deg, #DB52C2 0%, #DC4F88 50%, #FFA395 100%)",
      spiralImage: multiAgentSpiral,
-      icon: "MessagesSquare",
+      icon: "Bot",
      category: "Agents",
-      title: "Multi-Agent",
      flow: examples.find((example) => example.name === "Dynamic Agent"),
-      description:
-        "Deploy a team of agents with a Manager-Worker structure to tackle complex tasks.",
    },
  ];

  return (
-    <div className="flex flex-1 flex-col gap-8">
-      <BaseModal.Header description="Start building with templates that highlight Langflow's capabilities across Chatbot, RAG, and Agent use cases.">
-        Get Started
+    <div className="flex flex-1 flex-col gap-4 md:gap-8">
+      <BaseModal.Header description="Start with templates showcasing Langflow's Chatbot, RAG, and Agent use cases.">
+        Get started
      </BaseModal.Header>
-      <div className="grid flex-1 grid-cols-3 gap-4">
+      <div className="grid flex-1 grid-cols-1 gap-4 lg:grid-cols-3">
        {cardData.map((card, index) => (
          <TemplateGetStartedCardComponent key={index} {...card} />
        ))}
--- a/src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx
@ -1,5 +1,5 @@
 import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
-import gradient from "random-gradient";
+import { BG_NOISE, flowGradients } from "@/utils/styleUtils";
 import IconComponent, {
  ForwardedIconComponent,
 } from "../../../../components/genericIconComponent";
@ -9,47 +9,63 @@ export default function TemplateCardComponent({
  example,
  onClick,
 }: TemplateCardComponentProps) {
-  const gradientDirections = ["horizontal", "vertical", "diagonal"];
  const directionIndex =
-    (example.gradient ? example.gradient.length : example.name.length) %
-    gradientDirections.length;
-  const bgGradient = {
-    background: gradient(
-      example.gradient || example.name,
-      gradientDirections[directionIndex],
-    ),
+    (example.gradient && example.gradient.split(",").length == 1
+      ? example.gradient.length
+      : example.name.length) % flowGradients.length;
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick();
+    }
  };

+  const bgGradient =
+    BG_NOISE +
+    "," +
+    (example.gradient && example.gradient.split(",").length > 1
+      ? "linear-gradient(90deg, " + example.gradient + ")"
+      : flowGradients[directionIndex]);
+
  return (
    <div
-      className="group flex cursor-pointer flex-col gap-4 overflow-hidden"
+      className="group flex cursor-pointer gap-3 overflow-hidden rounded-md p-3 hover:bg-muted focus-visible:bg-muted"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
      onClick={onClick}
    >
      <div
-        className="relative h-40 rounded-xl p-4 brightness-[90%] contrast-125 saturate-[80%]"
+        className="relative h-20 w-20 shrink-0 overflow-hidden rounded-md p-4 outline-none ring-ring"
        style={{
-          backgroundImage:
-            "url(data:image/png;base64,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)," +
-            bgGradient.background,
+          backgroundImage: bgGradient,
+          transform: "scale(1)",
+          transition: "transform 0.3s ease-in-out",
        }}
      >
+        <div
+          className="absolute inset-0 transition-transform duration-300 group-hover:scale-125 group-focus-visible:scale-125"
+          style={{
+            backgroundImage: bgGradient,
+          }}
+        />
        <IconComponent
          name={example.icon || "FileText"}
-          className="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 !stroke-1 text-white opacity-80 mix-blend-overlay duration-300 group-hover:scale-105 group-hover:opacity-100"
+          className="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 text-white duration-300 group-hover:scale-105 group-focus-visible:scale-105"
        />
      </div>
      <div className="flex flex-1 flex-col justify-between">
        <div>
-          <div className="flex w-full items-center justify-between">
+          <div className="flex w-full items-center">
            <h3
-              className="line-clamp-3 text-lg font-semibold"
+              className="line-clamp-3 font-semibold"
              data-testid={`template_${convertTestName(example.name)}`}
            >
              {example.name}
            </h3>
            <ForwardedIconComponent
              name="ArrowRight"
-              className="mr-3 h-5 w-5 shrink-0 translate-x-0 opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100"
+              className="mr-3 h-5 w-5 shrink-0 translate-x-0 opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100"
            />
          </div>
          <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
--- a/src/frontend/src/modals/templatesModal/components/TemplateCategoryComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/TemplateCategoryComponent/index.tsx
@ -1,27 +1,13 @@
-import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
-import { ForwardedIconComponent } from "../../../../components/genericIconComponent";
 import { TemplateCategoryProps } from "../../../../types/templates/types";
 import TemplateExampleCard from "../TemplateCardComponent";

 export function TemplateCategoryComponent({
-  currentTab,
  examples,
  onCardClick,
 }: TemplateCategoryProps) {
  return (
    <>
-      <div className="flex items-center gap-3 font-medium">
-        <ForwardedIconComponent
-          name={currentTab?.icon ?? "Search"}
-          className="h-4 w-4 text-muted-foreground"
-        />
-        <span
-          data-testid={`category_title_${convertTestName(currentTab?.title ?? "All Templates")}`}
-        >
-          {currentTab?.title ?? "All Templates"}
-        </span>
-      </div>
-      <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {examples.map((example, index) => (
          <TemplateExampleCard
            key={index}
--- a/src/frontend/src/modals/templatesModal/components/TemplateContentComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/TemplateContentComponent/index.tsx
@ -62,51 +62,55 @@ export default function TemplateContentComponent({
    track("New Flow Created", { template: `${example.name} Template` });
  };

+  const handleClearSearch = () => {
+    setSearchQuery("");
+    if (searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  };
+
  const currentTabItem = categories.find((item) => item.id === currentTab);

+  const searchInputRef = useRef<HTMLInputElement>(null);
+
  return (
    <div className="flex flex-1 flex-col gap-6 overflow-hidden">
-      <div className="relative flex-1 p-px md:grow-0">
+      <div className="relative flex-1 grow-0 p-px">
        <ForwardedIconComponent
          name="Search"
-          className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"
+          className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
        />
        <Input
          type="search"
          placeholder="Search..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
-          className="w-full rounded-lg bg-background pl-8 lg:w-3/4"
+          ref={searchInputRef}
+          className="w-3/4 rounded-lg bg-background pl-8 lg:w-2/3"
        />
      </div>
      <div
        ref={scrollContainerRef}
-        className="flex flex-1 flex-col gap-6 overflow-auto"
+        className="flex flex-1 flex-col gap-6 overflow-auto scrollbar-hide"
      >
-        {currentTab === "all-templates" ? (
-          categories.map(
-            (value) =>
-              filteredExamples.filter((example) =>
-                example.tags?.includes(value.id),
-              ).length > 0 && (
-                <TemplateCategoryComponent
-                  key={value.id}
-                  currentTab={value}
-                  examples={filteredExamples.filter((example) =>
-                    example.tags?.includes(value.id),
-                  )}
-                  onCardClick={handleCardClick}
-                />
-              ),
-          )
-        ) : currentTabItem ? (
+        {currentTabItem && filteredExamples.length > 0 ? (
          <TemplateCategoryComponent
-            currentTab={currentTabItem}
            examples={filteredExamples}
            onCardClick={handleCardClick}
          />
        ) : (
-          <></>
+          <div className="flex flex-col items-center justify-center px-4 py-12 text-center">
+            <p className="text-sm text-secondary-foreground">
+              No templates found.{" "}
+              <a
+                className="cursor-pointer underline underline-offset-4"
+                onClick={handleClearSearch}
+              >
+                Clear your search
+              </a>{" "}
+              and try a different query.
+            </p>
+          </div>
        )}
      </div>
    </div>
--- a/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
@ -4,16 +4,16 @@ import { track } from "@/customization/utils/analytics";
 import useAddFlow from "@/hooks/flows/use-add-flow";
 import { useFolderStore } from "@/stores/foldersStore";
 import { updateIds } from "@/utils/reactflowUtils";
+import { BG_NOISE } from "@/utils/styleUtils";
+import { cn } from "@/utils/utils";
 import { useParams } from "react-router-dom";
 import { CardData } from "../../../../types/templates/types";

 export default function TemplateGetStartedCardComponent({
-  bgImage,
+  bg,
  spiralImage,
  icon,
  category,
-  title,
-  description,
  flow,
 }: CardData) {
  const addFlow = useAddFlow();
@ -31,28 +31,40 @@ export default function TemplateGetStartedCardComponent({
      });
      track("New Flow Created", { template: `${flow.name} Template` });
    } else {
-      console.error(`Flow template "${title}" not found`);
+      console.error(`Flow template not found`);
    }
  };

-  return (
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return flow ? (
    <div
-      className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-3xl border"
+      className="group relative flex h-full w-full cursor-pointer flex-col overflow-hidden rounded-3xl border focus-visible:border-ring"
+      tabIndex={1}
+      onKeyDown={handleKeyDown}
      onClick={handleClick}
    >
-      <img
-        src={bgImage}
-        alt={`${title} Background`}
-        className="absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] rounded-2xl object-cover"
+      <div
+        className={cn(
+          "absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] rounded-2xl object-cover brightness-90 saturate-[140%]",
+        )}
+        style={{
+          backgroundImage: BG_NOISE + "," + bg,
+        }}
      />
      <div className="absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] overflow-hidden rounded-2xl">
        <img
          src={spiralImage}
-          alt={`${title} Spiral`}
-          className="h-full w-full object-cover opacity-25 transition-all duration-300 group-hover:scale-[102%] group-hover:opacity-60"
+          alt={`${flow.name} Spiral`}
+          className="h-full w-full object-cover opacity-25 transition-all duration-300 group-hover:scale-[102%] group-hover:opacity-60 group-focus-visible:scale-[102%] group-focus-visible:opacity-60"
        />
      </div>
-      <div className="card-shine-effect absolute inset-2 flex h-[calc(100%-16px)] w-[calc(100%-16px)] flex-col items-start gap-4 rounded-2xl p-4 py-6 text-white">
+      <div className="card-shine-effect absolute inset-2 flex h-[calc(100%-16px)] min-w-[calc(100%-16px)] flex-col items-start gap-1 rounded-2xl p-4 text-white md:gap-3 lg:gap-4 lg:py-6">
        <div className="flex items-center gap-2 text-white mix-blend-overlay">
          <ForwardedIconComponent name={icon} className="h-4 w-4" />
          <span className="font-mono text-xs font-semibold uppercase tracking-wider">
@ -60,15 +72,21 @@ export default function TemplateGetStartedCardComponent({
          </span>
        </div>
        <div className="flex w-full items-center justify-between">
-          <h3 className="line-clamp-3 text-xl font-bold">{title}</h3>
+          <h3 className="line-clamp-3 text-lg font-bold lg:text-xl">
+            {flow.name}
+          </h3>
          <ForwardedIconComponent
            name="ArrowRight"
-            className="mr-3 h-5 w-5 shrink-0 translate-x-0 opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100"
+            className="mr-3 h-5 w-5 shrink-0 translate-x-0 opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100"
          />
        </div>

-        <p className="text-xs font-medium opacity-90">{description}</p>
+        <p className="line-clamp-3 w-full overflow-hidden text-sm font-medium opacity-90">
+          {flow.description}
+        </p>
      </div>
    </div>
+  ) : (
+    <></>
  );
 }
--- a/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx
+++ b/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx
@ -1,37 +1,86 @@
 import ForwardedIconComponent from "@/components/genericIconComponent";
 import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
-import { Button } from "@/components/ui/button";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { useMobile } from "@/hooks/use-mobile";
 import { cn } from "@/utils/utils";
 import { NavProps } from "../../../../types/templates/types";

-export function Nav({ links, currentTab, onClick }: NavProps) {
+export function Nav({ categories, currentTab, setCurrentTab }: NavProps) {
+  const isMobile = useMobile();
+
  return (
-    <div className="group flex flex-col gap-4">
-      <nav className="grid">
-        {links.map((link, index) => (
-          <Button
-            variant={link.id === currentTab ? "menu-active" : "menu"}
-            size="sm"
-            key={index}
-            onClick={() => onClick?.(link.id)}
-            className="group"
+    <Sidebar collapsible={isMobile ? "icon" : "none"}>
+      <SidebarContent className="gap-0 p-2">
+        <div
+          className={cn("relative flex items-center gap-2 px-2 py-3 md:px-4")}
+          data-testid="modal-title"
+        >
+          <SidebarTrigger
+            className={cn(
+              "flex h-8 shrink-0 items-center rounded-md text-lg font-semibold leading-none tracking-tight text-primary outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 md:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+            )}
+          />
+          <div
+            className={cn(
+              "flex h-8 shrink-0 items-center rounded-md text-lg font-semibold leading-none tracking-tight text-primary outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
+              "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+            )}
          >
-            <ForwardedIconComponent
-              name={link.icon}
-              className={cn(
-                "mr-2 h-4 w-4 stroke-2 text-muted-foreground",
-                link.id === currentTab && "text-pink-400",
-              )}
-            />
-            <span
-              data-testid={`side_nav_options_${convertTestName(link.title)}`}
-              className="flex-1 text-left text-primary"
+            Categories
+          </div>
+        </div>
+
+        {categories.map((category, index) => (
+          <SidebarGroup key={index}>
+            <SidebarGroupLabel
+              className={`${
+                index === 0
+                  ? "hidden"
+                  : "mb-1 text-sm font-semibold text-muted-foreground"
+              }`}
            >
-              {link.title}
-            </span>
-          </Button>
+              {category.title}
+            </SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {category.items.map((link) => (
+                  <SidebarMenuItem key={link.id}>
+                    <SidebarMenuButton
+                      onClick={() => setCurrentTab(link.id)}
+                      isActive={currentTab === link.id}
+                      data-testid={`side_nav_options_${link.title.toLowerCase().replace(/\s+/g, "-")}`}
+                    >
+                      <ForwardedIconComponent
+                        name={link.icon}
+                        className={`h-4 w-4 stroke-2 ${
+                          currentTab === link.id
+                            ? "x-gradient"
+                            : "text-muted-foreground"
+                        }`}
+                      />
+                      <span
+                        data-testid={`category_title_${convertTestName(link.title)}`}
+                      >
+                        {link.title}
+                      </span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
        ))}
-      </nav>
-    </div>
+      </SidebarContent>
+    </Sidebar>
  );
 }
--- a/src/frontend/src/modals/templatesModal/index.tsx
+++ b/src/frontend/src/modals/templatesModal/index.tsx
@ -1,5 +1,6 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { track } from "@/customization/utils/analytics";
 import useAddFlow from "@/hooks/flows/use-add-flow";
@ -9,8 +10,8 @@ import { useParams } from "react-router-dom";
 import { newFlowModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
 import GetStartedComponent from "./components/GetStartedComponent";
-import { Nav } from "./components/navComponent";
 import TemplateContentComponent from "./components/TemplateContentComponent";
+import { Nav } from "./components/navComponent";

 export default function TemplatesModal({
  open,
@ -26,8 +27,8 @@ export default function TemplatesModal({
    {
      title: "Templates",
      items: [
-        { title: "Get Started", icon: "SquarePlay", id: "get-started" },
-        { title: "All Templates", icon: "LayoutPanelTop", id: "all-templates" },
+        { title: "Get started", icon: "SquarePlay", id: "get-started" },
+        { title: "All templates", icon: "LayoutPanelTop", id: "all-templates" },
      ],
    },
    {
@ -44,58 +45,52 @@ export default function TemplatesModal({
    <BaseModal size="templates" open={open} setOpen={setOpen} className="p-0">
      <BaseModal.Content overflowHidden className="flex flex-col p-0">
        <div className="flex h-full">
-          <div className="flex w-60 flex-col gap-4 p-6 pl-4">
-            {categories.map((category, index) => (
-              <div key={index} className="flex flex-col gap-2">
-                <h2
-                  className={`pl-2 font-semibold ${index === 0 ? "mb-3 text-lg leading-none tracking-tight text-primary" : "text-sm text-muted-foreground"}`}
-                  data-testid={index === 0 ? "modal-title" : undefined}
-                >
-                  {category.title}
-                </h2>
-                <Nav
-                  links={category.items}
+          <SidebarProvider width="15rem" defaultOpen={false}>
+            <Nav
+              categories={categories}
+              currentTab={currentTab}
+              setCurrentTab={setCurrentTab}
+            />
+            <main className="flex flex-1 flex-col gap-4 overflow-hidden p-6 md:gap-8">
+              {currentTab === "get-started" ? (
+                <GetStartedComponent />
+              ) : (
+                <TemplateContentComponent
                  currentTab={currentTab}
-                  onClick={(id) => setCurrentTab(id)}
+                  categories={categories.flatMap((category) => category.items)}
                />
-              </div>
-            ))}
-          </div>
-          <Separator className="h-auto" orientation="vertical" />
-          <div className="flex flex-1 flex-col gap-8 overflow-hidden p-6">
-            {currentTab === "get-started" ? (
-              <GetStartedComponent />
-            ) : (
-              <TemplateContentComponent
-                currentTab={currentTab}
-                categories={categories.flatMap((category) => category.items)}
-              />
-            )}
-            <BaseModal.Footer>
-              <div className="flex w-full items-center justify-between pb-4">
-                <div className="flex flex-col items-start justify-center">
-                  <div className="font-semibold">Start from scratch</div>
-                  <div className="text-sm text-muted-foreground">
-                    Begin a fresh project to build from scratch.
+              )}
+              <BaseModal.Footer>
+                <div className="flex w-full flex-col justify-between gap-4 pb-4 sm:flex-row sm:items-center">
+                  <div className="flex flex-col items-start justify-center">
+                    <div className="font-semibold">Start from scratch</div>
+                    <div className="text-sm text-muted-foreground">
+                      Begin with a fresh flow to build from scratch.
+                    </div>
                  </div>
+                  <Button
+                    onClick={() => {
+                      addFlow().then((id) => {
+                        navigate(
+                          `/flow/${id}${folderId ? `/folder/${folderId}` : ""}`,
+                        );
+                      });
+                      track("New Flow Created", { template: "Blank Flow" });
+                    }}
+                    size="sm"
+                    data-testid="blank-flow"
+                    className="shrink-0"
+                  >
+                    <ForwardedIconComponent
+                      name="Plus"
+                      className="h-4 w-4 shrink-0"
+                    />
+                    Blank Flow
+                  </Button>
                </div>
-                <Button
-                  onClick={() => {
-                    addFlow().then((id) => {
-                      navigate(
-                        `/flow/${id}${folderId ? `/folder/${folderId}` : ""}`,
-                      );
-                    });
-                    track("New Flow Created", { template: "Blank Flow" });
-                  }}
-                  size="sm"
-                  data-testid="blank-flow"
-                >
-                  Create Blank Project
-                </Button>
-              </div>
-            </BaseModal.Footer>
-          </div>
+              </BaseModal.Footer>
+            </main>
+          </SidebarProvider>
        </div>
      </BaseModal.Content>
    </BaseModal>
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@ -174,7 +174,7 @@
    @apply flex gap-2;
  }
  .primary-input {
-    @apply placeholder:text-muted-foreground form-input block w-full truncate rounded-md border-[1px] border-border bg-background px-3 text-left text-sm  hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-[0.75px] focus:ring-foreground focus-visible:border-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
+    @apply form-input block w-full truncate rounded-md border-[1px] border-border bg-background px-3 text-left text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:placeholder-transparent focus:ring-0 focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground;
  }

  .skeleton-card {
@ -191,7 +191,7 @@

  /* The same as primary-input but no-truncate */
  .textarea-primary {
-    @apply placeholder:text-placeholder-foreground form-input block w-full rounded-md border-[1px] border-border bg-background px-3 text-left shadow-sm hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-foreground focus:ring-[0.75px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
+    @apply placeholder:text-placeholder-foreground form-input block w-full rounded-md border-[1px] border-border bg-background px-3 text-left shadow-sm hover:border-muted focus:border-muted focus:placeholder-transparent focus:ring-[0.75px] focus:ring-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-secondary disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground sm:text-sm;
  }

  .input-edit-node {
@ -220,7 +220,7 @@
    @apply w-6 fill-build-trigger stroke-build-trigger stroke-1;
  }
  .message-button-position {
-    @apply fixed top-20 right-4;
+    @apply fixed right-4 top-20;
  }
  .message-button-icon {
    @apply fill-medium-indigo stroke-medium-indigo stroke-1;
@ -1190,6 +1190,10 @@
    @apply w-fit;
  }

+  .x-gradient {
+    @apply stroke-[url(#x-gradient)] bg-blend-hard-light;
+  }
+
  .button-run-bg {
    @apply flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm bg-transparent p-0 hover:bg-muted hover:p-1;
  }
@ -1215,7 +1219,7 @@
  }

  .disabled-state {
-    @apply pointer-events-none bg-secondary text-hard-zinc;
+    @apply text-hard-zinc pointer-events-none bg-secondary;
  }

  .background-fade-input {
@ -1260,8 +1264,7 @@
  }

  .node-toolbar-buttons {
-    @apply flex items-center gap-1 rounded-lg text-foreground w-max min-w-10
-
+    @apply flex w-max min-w-10 items-center gap-1 rounded-lg text-foreground;
  }

  .share-button {
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@ -1,7 +1,17 @@
 body {
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@ -245,3 +255,13 @@ pre {
  /* bg ignored now */
  background-color: var(--canvas);
 }
+
+[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  background-color: hsl(var(--primary));
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
+  background-size: 16px 16px;
+  height: 16px;
+  opacity: 1 !important;
+  width: 16px;
+}
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@ -6,6 +6,9 @@

@layer base {
  :root {
+    --font-sans: "Inter", sans-serif;
+    --font-mono: "JetBrains Mono", monospace;
+
    --foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */
    --background: 0 0% 100%; /* hsl(0, 0%, 100%) */
    --muted: 240 5% 96%; /* hsl(240, 5%, 96%) */
--- a/src/frontend/src/types/templates/types.ts
+++ b/src/frontend/src/types/templates/types.ts
@ -12,17 +12,14 @@ export interface Category {
 }

 export interface CardData {
-  bgImage: string;
+  bg: string;
  spiralImage: string;
  icon: string;
  category: string;
-  title: string;
-  description: string;
  flow: FlowType | undefined;
 }

 export interface TemplateCategoryProps {
-  currentTab: NavItem;
  examples: any[];
  onCardClick: (example: any) => void;
 }
@ -44,7 +41,7 @@ export interface TemplateCardComponentProps {
 }

 export interface NavProps {
-  links: NavItem[];
+  categories: Category[];
  currentTab: string;
-  onClick?: (id: string) => void;
+  setCurrentTab: (id: string) => void;
 }
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@ -258,6 +258,9 @@ import { MistralIcon } from "../icons/mistral";
 import { SupabaseIcon } from "../icons/supabase";
 import { iconsType } from "../types/components";

+export const BG_NOISE =
+  "url(data:image/png;base64,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)";
+
 export const gradients = [
  "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
  "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
@ -292,6 +295,30 @@ export const gradients = [
  "bg-gradient-to-br from-lime-600 via-yellow-300 to-red-600",
 ];

+/* 
+Specifications
+#FF3276 -> #F480FF
+#1A0250 -> #2F10FE
+#98F4FE -> #9BFEAA
+#F480FF -> #7528FC
+#F480FF -> #9BFEAA
+#2F10FE -> #9BFEAA
+#BB277F -> #050154
+#7528FC -> #9BFEAA
+#2F10FE -> #98F4FE
+*/
+export const flowGradients = [
+  "linear-gradient(90deg, #FF3276 0%, #F480FF 100%)",
+  "linear-gradient(90deg, #1A0250 0%, #2F10FE 100%)",
+  "linear-gradient(90deg, #98F4FE 0%, #9BFEAA 100%)",
+  "linear-gradient(90deg, #F480FF 0%, #7528FC 100%)",
+  "linear-gradient(90deg, #F480FF 0%, #9BFEAA 100%)",
+  "linear-gradient(90deg, #2F10FE 0%, #9BFEAA 100%)",
+  "linear-gradient(90deg, #BB277F 0%, #050154 100%)",
+  "linear-gradient(90deg, #7528FC 0%, #9BFEAA 100%)",
+  "linear-gradient(90deg, #2F10FE 0%, #98F4FE 100%)",
+];
+
 export const nodeColors: { [char: string]: string } = {
  inputs: "#10B981",
  outputs: "#AA2411",
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@ -186,8 +186,8 @@ const config = {
          DEFAULT: "hsl(var(--inner-yellow))",
          foreground: "hsl(var(--inner-foreground-yellow))",
          muted: "hsl(var(--inner-yellow-muted-foreground))",
-          },
-          "inner-blue": {
+        },
+        "inner-blue": {
          DEFAULT: "hsl(var(--inner-blue))",
          foreground: "hsl(var(--inner-foreground-blue))",
          muted: "hsl(var(--inner-blue-muted-foreground))",
@ -244,28 +244,12 @@ const config = {
        sm: "calc(var(--radius) - 4px)",
      },
      borderWidth: {
-        '1.75': '1.75px',
-        '1.5': '1.5px',
+        1.75: "1.75px",
+        1.5: "1.5px",
      },
      fontFamily: {
-        sans: [
-          "Inter",
-          "ui-sans-serif",
-          "system-ui",
-          "-apple-system",
-          "BlinkMacSystemFont",
-          "Segoe UI",
-          "Roboto",
-          "Helvetica Neue",
-          "Arial",
-          "Noto Sans",
-          "sans-serif",
-          "Apple Color Emoji",
-          "Segoe UI Emoji",
-          "Segoe UI Symbol",
-          "Noto Color Emoji",
-        ],
-        jetbrains: ["JetBrains Mono", "monospace"],
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
      },
      boxShadow: {
        "frozen-ring": "0 0 10px 2px rgba(128, 190, 230, 0.5)",
--- a/src/frontend/tests/extended/features/starter-projects.spec.ts
+++ b/src/frontend/tests/extended/features/starter-projects.spec.ts
@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, Page, test } from "@playwright/test";

 test("user must be able to interact with starter projects", async ({
  page,
@ -22,9 +22,7 @@ test("user must be able to interact with starter projects", async ({
  }

  expect(page.getByText("Start from scratch")).toBeVisible();
-  expect(
-    page.getByRole("button", { name: "Create Blank Project" }),
-  ).toBeVisible();
+  expect(page.getByRole("button", { name: "Blank Flow" })).toBeVisible();

  await page.getByTestId("side_nav_options_all-templates").click();
  await page.waitForTimeout(500);
@ -70,15 +68,48 @@ test("user must be able to interact with starter projects", async ({

  expect(page.getByTestId(`category_title_agents`)).toBeVisible();

+  await page.waitForTimeout(500);
+
  expect(
    page.getByTestId(`template_basic-prompting-(hello,-world)`),
  ).not.toBeVisible();
  expect(page.getByTestId(`template_document-qa`)).not.toBeVisible();
  expect(page.getByTestId(`template_vector-store-rag`)).not.toBeVisible();

-  expect(page.getByTestId(`template_travel-planning-agents`)).toBeVisible();
-  expect(page.getByTestId(`template_sequential-tasks-agent`)).toBeVisible();
-  expect(page.getByTestId(`template_dynamic-agent`)).toBeVisible();
-  expect(page.getByTestId(`template_hierarchical-tasks-agent`)).toBeVisible();
-  expect(page.getByTestId(`template_simple-agent`)).toBeVisible();
+  await page.waitForTimeout(500);
+
+  await waitForTemplateVisibility(page, templateIds);
 });
+
+async function waitForTemplateVisibility(page: Page, templateIds: string[]) {
+  const timeout = 10000; // Increased timeout for better reliability
+
+  for (const templateId of templateIds) {
+    // Wait for the element to be attached to DOM first
+    await page.waitForSelector(`[data-testid="${templateId}"]`, {
+      state: "attached",
+      timeout,
+    });
+
+    // Wait for the element to be visible
+    await expect(
+      page.getByTestId(templateId).last(),
+      `Template ${templateId} should be visible`,
+    ).toBeVisible({
+      timeout,
+    });
+
+    // Optional: Ensure element is in viewport
+    const element = page.getByTestId(templateId).last();
+    await element.scrollIntoViewIfNeeded();
+  }
+}
+
+// Your test code
+const templateIds = [
+  "template_travel-planning-agents",
+  "template_sequential-tasks-agent",
+  "template_dynamic-agent",
+  "template_hierarchical-tasks-agent",
+  "template_simple-agent",
+];