diff --git a/servers/nextjs/components/ui/alert-dialog.tsx b/servers/nextjs/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..57760f2e
--- /dev/null
+++ b/servers/nextjs/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.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}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/servers/nextjs/components/ui/alert.tsx b/servers/nextjs/components/ui/alert.tsx
new file mode 100644
index 00000000..5afd41d1
--- /dev/null
+++ b/servers/nextjs/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/servers/nextjs/components/ui/aspect-ratio.tsx b/servers/nextjs/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..d6a5226f
--- /dev/null
+++ b/servers/nextjs/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/servers/nextjs/components/ui/breadcrumb.tsx b/servers/nextjs/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..1fd4b2c0
--- /dev/null
+++ b/servers/nextjs/components/ui/breadcrumb.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/servers/nextjs/components/ui/calendar.tsx b/servers/nextjs/components/ui/calendar.tsx
new file mode 100644
index 00000000..a623682d
--- /dev/null
+++ b/servers/nextjs/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/servers/nextjs/components/ui/carousel.tsx b/servers/nextjs/components/ui/carousel.tsx
new file mode 100644
index 00000000..5a363667
--- /dev/null
+++ b/servers/nextjs/components/ui/carousel.tsx
@@ -0,0 +1,261 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/servers/nextjs/components/ui/collapsible.tsx b/servers/nextjs/components/ui/collapsible.tsx
new file mode 100644
index 00000000..9fa48946
--- /dev/null
+++ b/servers/nextjs/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/servers/nextjs/components/ui/context-menu.tsx b/servers/nextjs/components/ui/context-menu.tsx
new file mode 100644
index 00000000..802fb9f9
--- /dev/null
+++ b/servers/nextjs/components/ui/context-menu.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/servers/nextjs/components/ui/drawer.tsx b/servers/nextjs/components/ui/drawer.tsx
new file mode 100644
index 00000000..6a0ef53d
--- /dev/null
+++ b/servers/nextjs/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/servers/nextjs/components/ui/form.tsx b/servers/nextjs/components/ui/form.tsx
new file mode 100644
index 00000000..ad1ae028
--- /dev/null
+++ b/servers/nextjs/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/servers/nextjs/components/ui/hover-card.tsx b/servers/nextjs/components/ui/hover-card.tsx
new file mode 100644
index 00000000..74efa6be
--- /dev/null
+++ b/servers/nextjs/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/servers/nextjs/components/ui/input-otp.tsx b/servers/nextjs/components/ui/input-otp.tsx
new file mode 100644
index 00000000..2e346336
--- /dev/null
+++ b/servers/nextjs/components/ui/input-otp.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { cn } from "@/lib/utils"
+import { MinusIcon } from "@radix-ui/react-icons"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <MinusIcon />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/servers/nextjs/components/ui/menubar.tsx b/servers/nextjs/components/ui/menubar.tsx
new file mode 100644
index 00000000..59e48746
--- /dev/null
+++ b/servers/nextjs/components/ui/menubar.tsx
@@ -0,0 +1,255 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
diff --git a/servers/nextjs/components/ui/navigation-menu.tsx b/servers/nextjs/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000..a8beb64c
--- /dev/null
+++ b/servers/nextjs/components/ui/navigation-menu.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/servers/nextjs/components/ui/pagination.tsx b/servers/nextjs/components/ui/pagination.tsx
new file mode 100644
index 00000000..484e5ce7
--- /dev/null
+++ b/servers/nextjs/components/ui/pagination.tsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/servers/nextjs/components/ui/resizable.tsx b/servers/nextjs/components/ui/resizable.tsx
new file mode 100644
index 00000000..2f83b002
--- /dev/null
+++ b/servers/nextjs/components/ui/resizable.tsx
@@ -0,0 +1,44 @@
+"use client"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/servers/nextjs/components/ui/sidebar.tsx b/servers/nextjs/components/ui/sidebar.tsx
new file mode 100644
index 00000000..5e5b3384
--- /dev/null
+++ b/servers/nextjs/components/ui/sidebar.tsx
@@ -0,0 +1,772 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { ViewVerticalIcon } from "@radix-ui/react-icons"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | 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
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // 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)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // 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<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              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 { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        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 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]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            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",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {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-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <ViewVerticalIcon />
+      <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-sidebar-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]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[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 w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md: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-2 focus-visible:ring-sidebar-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-sidebar-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-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>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-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md: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-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-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-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-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: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-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 { isMobile, 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" || isMobile}
+          {...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-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md: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-sidebar-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-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-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-sidebar-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-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-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-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-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,
+}
diff --git a/servers/nextjs/components/ui/toggle-group.tsx b/servers/nextjs/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..1c876bbe
--- /dev/null
+++ b/servers/nextjs/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/servers/nextjs/presentation-layouts/general/BasicInfoSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/BasicInfoSlideLayout.tsx
new file mode 100644
index 00000000..9b9d1ff4
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/BasicInfoSlideLayout.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'basic-info-slide'
+export const layoutName = 'Basic Info'
+export const layoutDescription = 'A clean slide layout with title, description text, and a supporting image.'
+
+const basicInfoSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Product Overview').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(800).default('Our product offers customizable dashboards for real-time reporting and data-driven decisions. It integrates with third-party tools to enhance operations and scales with business growth for improved efficiency.').meta({
+        description: "Main description text content",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        __image_prompt__: 'Business team in meeting room discussing product features and solutions'
+    }).meta({
+        description: "Supporting image for the slide",
+    })
+})
+
+export const Schema = basicInfoSlideSchema
+
+export type BasicInfoSlideData = z.infer<typeof basicInfoSlideSchema>
+
+interface BasicInfoSlideLayoutProps {
+    data?: Partial<BasicInfoSlideData>
+}
+
+const BasicInfoSlideLayout: React.FC<BasicInfoSlideLayoutProps> = ({ data: slideData }) => {
+    // Generate initials from presenter name
+    const getInitials = (name: string) => {
+        return name.split(' ').map(word => word.charAt(0).toUpperCase()).join('');
+    };
+
+    const presenterInitials = getInitials(slideData?.presenterName || 'John Doe');
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+
+
+                {/* Main Content */}
+                <div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
+                    {/* Left Section - Image */}
+                    <div className="flex-1 flex items-center justify-center pr-8">
+                        <div className="w-full max-w-lg h-80 rounded-2xl overflow-hidden shadow-lg">
+                            <img
+                                src={slideData?.image?.__image_url__ || ''}
+                                alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Right Section - Content */}
+                    <div className="flex-1 flex flex-col justify-center pl-8 space-y-6">
+                        {/* Title */}
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                            {slideData?.title || 'Product Overview'}
+                        </h1>
+
+                        {/* Purple accent line */}
+                        <div className="w-20 h-1 bg-purple-600"></div>
+
+                        {/* Description */}
+                        <p className="text-base sm:text-lg text-gray-700 leading-relaxed">
+                            {slideData?.description || 'Our product offers customizable dashboards for real-time reporting and data-driven decisions. It integrates with third-party tools to enhance operations and scales with business growth for improved efficiency.'}
+                        </p>
+
+                        
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default BasicInfoSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/BulletIconsOnlySlideLayout.tsx b/servers/nextjs/presentation-layouts/general/BulletIconsOnlySlideLayout.tsx
new file mode 100644
index 00000000..6bb423a6
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/BulletIconsOnlySlideLayout.tsx
@@ -0,0 +1,191 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema, IconSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'bullet-icons-only-slide'
+export const layoutName = 'Bullet Icons Only'
+export const layoutDescription = 'A slide layout with title, grid of bullet points with icons (no descriptions), and a supporting image.'
+
+const bulletIconsOnlySlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Solutions').meta({
+        description: "Main title of the slide",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        __image_prompt__: 'Business professionals collaborating and discussing solutions'
+    }).meta({
+        description: "Supporting image for the slide",
+    }),
+    bulletPoints: z.array(z.object({
+        title: z.string().min(2).max(100).meta({
+            description: "Bullet point title",
+        }),
+        subtitle: z.string().min(5).max(200).optional().meta({
+            description: "Optional short subtitle or brief explanation",
+        }),
+        icon: IconSchema,
+    })).min(2).max(6).default([
+        {
+            title: 'Custom Software',
+            subtitle: 'We create tailored software to optimize processes and boost efficiency.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/code.js',
+                __icon_query__: 'code software development'
+            }
+        },
+        {
+            title: 'Digital Consulting',
+            subtitle: 'Our consultants guide organizations in leveraging the latest technologies.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/users.js',
+                __icon_query__: 'users consulting team'
+            }
+        },
+        {
+            title: 'Support Services',
+            subtitle: 'We provide ongoing support to help businesses adapt and maintain performance.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/headphones.js',
+                __icon_query__: 'headphones support service'
+            }
+        },
+        {
+            title: 'Scalable Marketing',
+            subtitle: 'Our data-driven strategies help businesses expand their reach and engagement.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/trending-up.js',
+                __icon_query__: 'trending up marketing growth'
+            }
+        }
+    ]).meta({
+        description: "List of bullet points with icons and optional subtitles",
+    })
+})
+
+export const Schema = bulletIconsOnlySlideSchema
+
+export type BulletIconsOnlySlideData = z.infer<typeof bulletIconsOnlySlideSchema>
+
+interface BulletIconsOnlySlideLayoutProps {
+    data?: Partial<BulletIconsOnlySlideData>
+}
+
+const BulletIconsOnlySlideLayout: React.FC<BulletIconsOnlySlideLayoutProps> = ({ data: slideData }) => {
+    const bulletPoints = slideData?.bulletPoints || []
+    
+    // Function to determine grid classes based on number of bullets
+    const getGridClasses = (count: number) => {
+        if (count <= 2) {
+            return 'grid-cols-1 gap-6'
+        } else if (count <= 4) {
+            return 'grid-cols-2 gap-6'
+        } else {
+            return 'grid-cols-2 lg:grid-cols-3 gap-6'
+        }
+    }
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+                {/* Decorative Wave Patterns */}
+                <div className="absolute top-0 left-0 w-32 h-full opacity-10 overflow-hidden">
+                    <svg className="w-full h-full" viewBox="0 0 100 400" fill="none">
+                        <path d="M0 100C25 150 50 50 75 100C87.5 125 100 100 100 100V0H0V100Z" fill="#8b5cf6" opacity="0.4"/>
+                        <path d="M0 200C37.5 250 62.5 150 100 200V150C75 175 50 150 25 175L0 200Z" fill="#8b5cf6" opacity="0.3"/>
+                    </svg>
+                </div>
+                
+                <div className="absolute bottom-0 left-0 w-48 h-32 opacity-10 overflow-hidden">
+                    <svg className="w-full h-full" viewBox="0 0 200 100" fill="none">
+                        <path d="M0 50C50 25 100 75 150 50C175 37.5 200 50 200 50V100H0V50Z" fill="#8b5cf6" opacity="0.2"/>
+                    </svg>
+                </div>
+
+                {/* Main Content */}
+                <div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
+                    {/* Left Section - Title and Bullet Points */}
+                    <div className="flex-1 flex flex-col pr-8">
+                        {/* Title */}
+                        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 mb-8">
+                            {slideData?.title || 'Solutions'}
+                        </h1>
+
+                        {/* Bullet Points Grid */}
+                        <div className={`grid ${getGridClasses(bulletPoints.length)} flex-1 content-center`}>
+                            {bulletPoints.map((bullet, index) => (
+                                <div 
+                                    key={index} 
+                                    className={`flex items-start space-x-4 p-4 rounded-lg transition-all duration-200 hover:bg-gray-50`}
+                                >
+                                    {/* Icon */}
+                                    <div className="flex-shrink-0 w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center">
+                                        <img 
+                                            src={bullet.icon.__icon_url__} 
+                                            alt={bullet.icon.__icon_query__}
+                                            className="w-6 h-6 object-contain brightness-0 invert"
+                                        />
+                                    </div>
+                                    
+                                    {/* Content */}
+                                    <div className="flex-1">
+                                        <h3 className="text-lg sm:text-xl font-semibold text-gray-900 mb-1">
+                                            {bullet.title}
+                                        </h3>
+                                        {bullet.subtitle && (
+                                            <p className="text-sm text-gray-700 leading-relaxed">
+                                                {bullet.subtitle}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Right Section - Image */}
+                    <div className="flex-shrink-0 w-96 flex items-center justify-center relative">
+                        {/* Decorative Elements */}
+                        <div className="absolute top-8 right-8 text-purple-600 opacity-60">
+                            <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
+                                <path d="M16 0l4.12 8.38L28 12l-7.88 3.62L16 24l-4.12-8.38L4 12l7.88-3.62L16 0z"/>
+                            </svg>
+                        </div>
+                        
+                        <div className="absolute top-16 left-8 opacity-20">
+                            <svg width="80" height="20" viewBox="0 0 80 20" className="text-purple-600">
+                                <path
+                                    d="M0 10 Q20 0 40 10 T80 10"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    fill="none"
+                                />
+                            </svg>
+                        </div>
+
+                        {/* Main Image */}
+                        <div className="w-full h-80 rounded-2xl overflow-hidden shadow-lg">
+                            <img
+                                src={slideData?.image?.__image_url__ || ''}
+                                alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default BulletIconsOnlySlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/BulletWithIconsSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/BulletWithIconsSlideLayout.tsx
new file mode 100644
index 00000000..2c244ca2
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/BulletWithIconsSlideLayout.tsx
@@ -0,0 +1,164 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema, IconSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'bullet-with-icons-slide'
+export const layoutName = 'Bullet with Icons'
+export const layoutDescription = 'A bullets style slide with main content, supporting image, and bullet points with icons and descriptions.'
+
+const bulletWithIconsSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Problem').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(500).default('Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.').meta({
+        description: "Main description text explaining the problem or topic",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        __image_prompt__: 'Business people analyzing documents and charts in office'
+    }).meta({
+        description: "Supporting image for the slide",
+    }),
+    bulletPoints: z.array(z.object({
+        title: z.string().min(2).max(100).meta({
+            description: "Bullet point title",
+        }),
+        description: z.string().min(10).max(300).meta({
+            description: "Bullet point description",
+        }),
+        icon: IconSchema,
+    })).min(1).max(3).default([
+        {
+            title: 'Inefficiency',
+            description: 'Businesses struggle to find digital tools that meet their needs, causing operational slowdowns.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/alert-triangle.js',
+                __icon_query__: 'warning alert inefficiency'
+            }
+        },
+        {
+            title: 'High Costs',
+            description: 'Outdated systems increase expenses, while small businesses struggle to expand their market reach.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/trending-up.js',
+                __icon_query__: 'trending up costs chart'
+            }
+        }
+    ]).meta({
+        description: "List of bullet points with icons and descriptions",
+    })
+})
+
+export const Schema = bulletWithIconsSlideSchema
+
+export type BulletWithIconsSlideData = z.infer<typeof bulletWithIconsSlideSchema>
+
+interface BulletWithIconsSlideLayoutProps {
+    data?: Partial<BulletWithIconsSlideData>
+}
+
+const BulletWithIconsSlideLayout: React.FC<BulletWithIconsSlideLayoutProps> = ({ data: slideData }) => {
+    const bulletPoints = slideData?.bulletPoints || []
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-gradient-to-br from-gray-50 to-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+
+
+                {/* Main Content */}
+                <div className="flex flex-col h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
+                    {/* Title Section - Full Width */}
+                    <div className="mb-8">
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
+                            {slideData?.title || 'Problem'}
+                        </h1>
+                    </div>
+
+                    {/* Content Container */}
+                    <div className="flex flex-1">
+                        {/* Left Section - Image with Grid Pattern */}
+                        <div className="flex-1 relative">
+                        {/* Grid Pattern Background */}
+                        <div className="absolute top-0 left-0 w-full h-full">
+                            <svg className="w-full h-full opacity-30" viewBox="0 0 200 200">
+                                <defs>
+                                    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+                                        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#8b5cf6" strokeWidth="0.5"/>
+                                    </pattern>
+                                </defs>
+                                <rect width="100%" height="100%" fill="url(#grid)" />
+                            </svg>
+                        </div>
+                        
+                        {/* Image Container */}
+                        <div className="relative z-10 h-full flex items-center justify-center p-4">
+                            <div className="w-full max-w-md h-80 rounded-2xl overflow-hidden shadow-lg">
+                                <img
+                                    src={slideData?.image?.__image_url__ || ''}
+                                    alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Decorative Sparkle */}
+                        <div className="absolute top-20 right-8 text-purple-600">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 0l3.09 6.26L22 9l-6.91 2.74L12 18l-3.09-6.26L2 9l6.91-2.74L12 0z"/>
+                            </svg>
+                        </div>
+                    </div>
+
+                        {/* Right Section - Content */}
+                        <div className="flex-1 flex flex-col justify-center pl-8 lg:pl-16">
+                            {/* Description */}
+                            <p className="text-lg text-gray-700 leading-relaxed mb-8">
+                                {slideData?.description || 'Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.'}
+                            </p>
+
+                        {/* Bullet Points */}
+                        <div className="space-y-6">
+                            {bulletPoints.map((bullet, index) => (
+                                <div key={index} className="flex items-start space-x-4">
+                                    {/* Icon */}
+                                    <div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg shadow-md flex items-center justify-center">
+                                        <img 
+                                            src={bullet.icon.__icon_url__} 
+                                            alt={bullet.icon.__icon_query__}
+                                            className="w-6 h-6 object-contain text-gray-700"
+                                        />
+                                    </div>
+                                    
+                                    {/* Content */}
+                                    <div className="flex-1">
+                                        <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                                            {bullet.title}
+                                        </h3>
+                                        <div className="w-12 h-0.5 bg-purple-600 mb-3"></div>
+                                        <p className="text-base text-gray-700 leading-relaxed">
+                                            {bullet.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default BulletWithIconsSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/ChartWithBulletsSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/ChartWithBulletsSlideLayout.tsx
new file mode 100644
index 00000000..4dcbb7b6
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/ChartWithBulletsSlideLayout.tsx
@@ -0,0 +1,294 @@
+import React from 'react'
+import * as z from "zod";
+import { IconSchema } from '@/presentation-layouts/defaultSchemes';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart";
+import { BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Cell, ResponsiveContainer } from "recharts";
+
+export const layoutId = 'chart-with-bullets-slide'
+export const layoutName = 'Chart with Bullet Boxes'
+export const layoutDescription = 'A slide layout with title, description, chart on the left and colored bullet boxes with icons on the right. Only choose this if data is available.'
+
+const chartDataSchema = z.object({
+    name: z.string().meta({ description: "Data point name" }),
+    value: z.number().meta({ description: "Data point value" }),
+    category: z.string().optional().meta({ description: "Category for grouping" }),
+    x: z.number().optional().meta({ description: "X coordinate for scatter plots" }),
+    y: z.number().optional().meta({ description: "Y coordinate for scatter plots" }),
+});
+
+const chartWithBulletsSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Market Size').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(500).default('Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.').meta({
+        description: "Description text below the title",
+    }),
+    chartType: z.enum(['bar', 'line', 'pie', 'area', 'scatter']).default('bar').meta({
+        description: "Type of chart to display",
+    }),
+    data: z.array(chartDataSchema).min(2).max(10).default([
+        { name: '2021', value: 5 },
+        { name: '2022', value: 12 },
+        { name: '2023', value: 18 },
+        { name: '2024', value: 23 },
+        { name: '2025', value: 26 },
+    ]).meta({
+        description: "Chart data points",
+    }),
+    dataKey: z.string().default('value').meta({
+        description: "Key field for chart values",
+    }),
+    categoryKey: z.string().default('name').meta({
+        description: "Key field for chart categories",
+    }),
+    color: z.string().default('#3b82f6').meta({
+        description: "Primary color for chart elements",
+    }),
+    showLegend: z.boolean().default(false).meta({
+        description: "Whether to show chart legend",
+    }),
+    showTooltip: z.boolean().default(true).meta({
+        description: "Whether to show chart tooltip",
+    }),
+    bulletPoints: z.array(z.object({
+        title: z.string().min(2).max(100).meta({
+            description: "Bullet point title",
+        }),
+        description: z.string().min(10).max(300).meta({
+            description: "Bullet point description",
+        }),
+        icon: IconSchema,
+    })).min(1).max(3).default([
+        {
+            title: 'Total Addressable Market',
+            description: 'Companies can use TAM to plan future expansion and investment.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/target.js',
+                __icon_query__: 'target market scope'
+            }
+        },
+        {
+            title: 'Serviceable Available Market',
+            description: 'Indicates more measurable market segments for sales efforts.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/pie-chart.js',
+                __icon_query__: 'pie chart analysis'
+            }
+        },
+        {
+            title: 'Serviceable Obtainable Market',
+            description: 'Help companies plan development strategies according to the market.',
+            icon: {
+                __icon_url__: 'https://cdn.jsdelivr.net/npm/lucide@latest/dist/esm/icons/trending-up.js',
+                __icon_query__: 'trending up growth'
+            }
+        }
+    ]).meta({
+        description: "List of bullet points with colored boxes and icons",
+    })
+})
+
+export const Schema = chartWithBulletsSlideSchema
+
+export type ChartWithBulletsSlideData = z.infer<typeof chartWithBulletsSlideSchema>
+
+interface ChartWithBulletsSlideLayoutProps {
+    data?: Partial<ChartWithBulletsSlideData>
+}
+
+const chartConfig = {
+    value: {
+        label: "Value",
+    },
+    name: {
+        label: "Name",
+    },
+};
+
+const CHART_COLORS = [
+    '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', 
+    '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+];
+
+const BULLET_COLORS = [
+    '#7F31E9', '#2C78DA', '#F58AAB', '#10b981', '#f59e0b', 
+    '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
+];
+
+const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> = ({ data: slideData }) => {
+    const chartData = slideData?.data || [];
+    const chartType = slideData?.chartType || 'bar';
+    const color = slideData?.color || '#3b82f6';
+    const dataKey = slideData?.dataKey || 'value';
+    const categoryKey = slideData?.categoryKey || 'name';
+    const showLegend = slideData?.showLegend || false;
+    const showTooltip = slideData?.showTooltip || true;
+    const bulletPoints = slideData?.bulletPoints || []
+
+    const renderChart = () => {
+        const commonProps = {
+            data: chartData,
+            margin: { top: 20, right: 30, left: 40, bottom: 60 },
+        };
+
+        switch (chartType) {
+            case 'bar':
+                return (
+                    <BarChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} />
+                    </BarChart>
+                );
+            
+            case 'line':
+                return (
+                    <LineChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Line 
+                            type="monotone" 
+                            dataKey={dataKey} 
+                            stroke={color} 
+                            strokeWidth={3}
+                            dot={{ fill: color, strokeWidth: 2, r: 4 }}
+                        />
+                    </LineChart>
+                );
+            
+            case 'area':
+                return (
+                    <AreaChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey={categoryKey} />
+                        <YAxis />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Area 
+                            type="monotone" 
+                            dataKey={dataKey} 
+                            stroke={color} 
+                            fill={color} 
+                            fillOpacity={0.6}
+                        />
+                    </AreaChart>
+                );
+            
+            case 'pie':
+                return (
+                    <PieChart margin={{ top: 20, right: 30, left: 40, bottom: 60 }}>
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Pie
+                            data={chartData}
+                            cx="50%"
+                            cy="40%"
+                            outerRadius={70}
+                            fill={color}
+                            dataKey={dataKey}
+                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                        >
+                            {chartData.map((entry, index) => (
+                                <Cell key={`cell-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                            ))}
+                        </Pie>
+                    </PieChart>
+                );
+            
+            case 'scatter':
+                return (
+                    <ScatterChart {...commonProps}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="x" type="number" />
+                        <YAxis dataKey="y" type="number" />
+                        {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}
+                        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+                        <Scatter dataKey="value" fill={color} />
+                    </ScatterChart>
+                );
+            
+            default:
+                return <div>Unsupported chart type</div>;
+        }
+    };
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+                {/* Main Content */}
+                <div className="flex h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
+                    {/* Left Section - Title, Description, Chart */}
+                    <div className="flex-1 flex flex-col pr-8">
+                        {/* Title */}
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
+                            {slideData?.title || 'Market Size'}
+                        </h1>
+
+                        {/* Description */}
+                        <p className="text-base text-gray-700 leading-relaxed mb-8">
+                            {slideData?.description || 'Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.'}
+                        </p>
+
+                        {/* Chart Container */}
+                        <div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-100 p-4">
+                            <ChartContainer config={chartConfig} className="h-full w-full">
+                                {renderChart()}
+                            </ChartContainer>
+                        </div>
+                    </div>
+
+                    {/* Right Section - Bullet Point Boxes */}
+                    <div className="flex-shrink-0 w-80 flex flex-col justify-center space-y-4">
+                        {bulletPoints.map((bullet, index) => (
+                            <div 
+                                key={index} 
+                                className="rounded-2xl p-6 text-white"
+                                style={{
+                                    backgroundColor: BULLET_COLORS[index % BULLET_COLORS.length]
+                                }}
+                            >
+                                {/* Icon and Title */}
+                                <div className="flex items-center space-x-3 mb-3">
+                                    <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
+                                        <img 
+                                            src={bullet.icon.__icon_url__} 
+                                            alt={bullet.icon.__icon_query__}
+                                            className="w-5 h-5 object-contain brightness-0 invert"
+                                        />
+                                    </div>
+                                    <h3 className="text-lg font-semibold">
+                                        {bullet.title}
+                                    </h3>
+                                </div>
+                                
+                                {/* Description */}
+                                <p className="text-sm leading-relaxed opacity-90">
+                                    {bullet.description}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ChartWithBulletsSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/IntroSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/IntroSlideLayout.tsx
new file mode 100644
index 00000000..a458f450
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/IntroSlideLayout.tsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'general-intro-slide'
+export const layoutName = 'Intro Slide'
+export const layoutDescription = 'A clean slide layout with title, description text, presenter info, and a supporting image.'
+
+const introSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Product Overview').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(800).default('Our product offers customizable dashboards for real-time reporting and data-driven decisions. It integrates with third-party tools to enhance operations and scales with business growth for improved efficiency.').meta({
+        description: "Main description text content",
+    }),
+    presenterName: z.string().min(2).max(50).default('John Doe').meta({
+        description: "Name of the presenter",
+    }),
+    presentationDate: z.string().min(2).max(50).default('December 2024').meta({
+        description: "Date of the presentation",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        __image_prompt__: 'Business team in meeting room discussing product features and solutions'
+    }).meta({
+        description: "Supporting image for the slide",
+    })
+})
+
+export const Schema = introSlideSchema
+
+export type IntroSlideData = z.infer<typeof introSlideSchema>
+
+interface IntroSlideLayoutProps {
+    data?: Partial<IntroSlideData>
+}
+
+const IntroSlideLayout: React.FC<IntroSlideLayoutProps> = ({ data: slideData }) => {
+    // Generate initials from presenter name
+    const getInitials = (name: string) => {
+        return name.split(' ').map(word => word.charAt(0).toUpperCase()).join('');
+    };
+
+    const presenterInitials = getInitials(slideData?.presenterName || 'John Doe');
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+
+
+                {/* Main Content */}
+                <div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
+                    {/* Left Section - Image */}
+                    <div className="flex-1 flex items-center justify-center pr-8">
+                        <div className="w-full max-w-lg h-80 rounded-2xl overflow-hidden shadow-lg">
+                            <img
+                                src={slideData?.image?.__image_url__ || ''}
+                                alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Right Section - Content */}
+                    <div className="flex-1 flex flex-col justify-center pl-8 space-y-6">
+                        {/* Title */}
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                            {slideData?.title || 'Product Overview'}
+                        </h1>
+
+                        {/* Purple accent line */}
+                        <div className="w-20 h-1 bg-purple-600"></div>
+
+                        {/* Description */}
+                        <p className="text-base sm:text-lg text-gray-700 leading-relaxed">
+                            {slideData?.description || 'Our product offers customizable dashboards for real-time reporting and data-driven decisions. It integrates with third-party tools to enhance operations and scales with business growth for improved efficiency.'}
+                        </p>
+
+                        {/* Presenter Section */}
+                        <div className="bg-white/50 backdrop-blur-sm rounded-lg p-4 lg:p-6 border border-gray-200 shadow-sm">
+                            <div className="flex items-center gap-4">
+                                {/* Custom Initials Icon */}
+                                <div className="w-10 h-10 lg:w-12 lg:h-12 bg-purple-600 rounded-full flex items-center justify-center">
+                                    <span className="text-white font-bold text-sm lg:text-base">
+                                        {presenterInitials}
+                                    </span>
+                                </div>
+                                
+                                {/* Presenter Info */}
+                                <div className="flex flex-col">
+                                    <span className="text-lg lg:text-xl font-bold text-gray-900">
+                                        {slideData?.presenterName || 'John Doe'}
+                                    </span>
+                                    <span className="text-sm lg:text-base text-gray-600 font-medium">
+                                        {slideData?.presentationDate || 'December 2024'}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default IntroSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/MetricsSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/MetricsSlideLayout.tsx
new file mode 100644
index 00000000..e3a06cb4
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/MetricsSlideLayout.tsx
@@ -0,0 +1,158 @@
+import React from 'react'
+import * as z from "zod";
+
+export const layoutId = 'metrics-slide'
+export const layoutName = 'Metrics'
+export const layoutDescription = 'A slide layout for showcasing key business metrics with large numbers and descriptive text boxes. This should only be used with metrics and numbers.'
+
+const metricsSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Company Traction').meta({
+        description: "Main title of the slide",
+    }),
+    metrics: z.array(z.object({
+        value: z.string().min(1).max(10).meta({
+            description: "Metric value (e.g., 150+, 95%, $2M). No long values. Keep simple number."
+        }),
+        label: z.string().min(2).max(100).meta({
+            description: "Metric label/title"
+        }),
+        description: z.string().min(10).max(300).meta({
+            description: "Detailed description of the metric. Explanation of the metric."
+        }),
+    })).min(2).max(6).default([
+        {
+            value: '150+',
+            label: 'Clients Onboarded',
+            description: 'Larana Inc. has successfully built a diverse client base, gaining trust across industries.'
+        },
+        {
+            value: '200+',
+            label: 'projects completed.',
+            description: 'Delivering over 200 projects, Larana Inc. consistently meets evolving client needs.'
+        },
+        {
+            value: '95%',
+            label: 'client satisfaction.',
+            description: 'With a strong focus on customer success, Larana Inc. has a 95% satisfaction rate.'
+        }
+    ]).meta({
+        description: "List of key business metrics to display",
+    })
+})
+
+export const Schema = metricsSlideSchema
+
+export type MetricsSlideData = z.infer<typeof metricsSlideSchema>
+
+interface MetricsSlideLayoutProps {
+    data?: Partial<MetricsSlideData>
+}
+
+const MetricsSlideLayout: React.FC<MetricsSlideLayoutProps> = ({ data: slideData }) => {
+    const metrics = slideData?.metrics || []
+    
+    // Function to determine layout classes based on number of metrics
+    const getLayoutClasses = (count: number) => {
+        if (count === 1) {
+            return 'grid grid-cols-1'
+        } else if (count === 2) {
+            return 'grid grid-cols-1 md:grid-cols-2'
+        } else if (count === 3) {
+            return 'grid grid-cols-1 md:grid-cols-3'
+        } else if (count === 4) {
+            return 'grid grid-cols-2 md:grid-cols-4'
+        } else if (count === 5) {
+            return 'grid grid-cols-2 md:grid-cols-3'
+        } else {
+            return 'grid grid-cols-2 md:grid-cols-3'
+        }
+    }
+    
+    // Function to get individual item classes
+    const getItemClasses = (count: number) => {
+        // All items use same classes now
+        return ''
+    }
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden flex flex-col"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+                {/* Decorative Wave Patterns */}
+                <div className="absolute top-0 left-0 w-64 h-full opacity-10 overflow-hidden">
+                    <svg className="w-full h-full" viewBox="0 0 200 400" fill="none">
+                        <path d="M0 100C50 150 100 50 150 100C175 125 200 100 200 100V0H0V100Z" fill="#8b5cf6" opacity="0.3"/>
+                        <path d="M0 200C75 250 125 150 200 200V150C150 175 100 150 50 175L0 200Z" fill="#8b5cf6" opacity="0.2"/>
+                        <path d="M0 300C100 350 150 250 200 300V250C125 275 75 250 25 275L0 300Z" fill="#8b5cf6" opacity="0.1"/>
+                    </svg>
+                </div>
+                
+                <div className="absolute top-0 right-0 w-64 h-full opacity-10 overflow-hidden transform scale-x-[-1]">
+                    <svg className="w-full h-full" viewBox="0 0 200 400" fill="none">
+                        <path d="M0 100C50 150 100 50 150 100C175 125 200 100 200 100V0H0V100Z" fill="#8b5cf6" opacity="0.3"/>
+                        <path d="M0 200C75 250 125 150 200 200V150C150 175 100 150 50 175L0 200Z" fill="#8b5cf6" opacity="0.2"/>
+                        <path d="M0 300C100 350 150 250 200 300V250C125 275 75 250 25 275L0 300Z" fill="#8b5cf6" opacity="0.1"/>
+                    </svg>
+                </div>
+
+
+
+                {/* Main Content */}
+                <div className="relative z-10 px-8 sm:px-12 lg:px-20 pb-12 flex-1 flex flex-col justify-center">
+                    <div className="space-y-12">
+                        {/* Title */}
+                        <div className="text-center">
+                            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
+                                {slideData?.title || 'Company Traction'}
+                            </h1>
+                        </div>
+
+                        {/* Metrics Section */}
+                        <div className="flex justify-center">
+                            {/* Metrics Layout - Each metric grouped vertically */}
+                            <div className={`${getLayoutClasses(metrics.length)} gap-6 lg:gap-8 place-content-center place-items-center`}>
+                            {metrics.map((metric, index) => (
+                                <div key={index} className={`text-center space-y-4 ${getItemClasses(metrics.length)}`}>
+                                    {/* Label */}
+                                    <div className="text-sm text-gray-600 font-medium">
+                                        {metric.label}
+                                    </div>
+                                    
+                                    {/* Large Metric Value */}
+                                    <div className="text-4xl sm:text-5xl lg:text-6xl font-bold text-purple-600">
+                                        {metric.value}
+                                    </div>
+                                    
+                                    {/* Description Box */}
+                                    <div 
+                                        className="bg-purple-50 rounded-lg p-4 lg:p-5 text-center mt-4"
+                                        style={{
+                                            backgroundColor: 'rgba(139, 92, 246, 0.08)'
+                                        }}
+                                    >
+                                        <p className="text-xs sm:text-sm text-gray-700 leading-relaxed">
+                                            {metric.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MetricsSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/MetricsWithImageSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/MetricsWithImageSlideLayout.tsx
new file mode 100644
index 00000000..26f5fb7a
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/MetricsWithImageSlideLayout.tsx
@@ -0,0 +1,128 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'metrics-with-image-slide'
+export const layoutName = 'Metrics with Image'
+export const layoutDescription = 'A slide layout with supporting image on the left and title, description, and metrics grid on the right. Can be used alternatively with MetricSlide.'
+
+const metricsWithImageSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Competitive Advantage').meta({
+        description: "Main title of the slide",
+    }),
+    description: z.string().min(10).max(600).default('Ginyard International Co. stands out by offering custom digital solutions tailored to client needs, alongside long-term support to ensure lasting relationships and continuous adaptation.').meta({
+        description: "Description text below the title",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        __image_prompt__: 'Person holding tablet with analytics dashboard and charts'
+    }).meta({
+        description: "Supporting image for the slide",
+    }),
+    metrics: z.array(z.object({
+        label: z.string().min(2).max(100).meta({
+            description: "Metric label/title"
+        }),
+        value: z.string().min(1).max(20).meta({
+            description: "Metric value (e.g., 200+, 95%, 50%)"
+        }),
+    })).min(1).max(4).default([
+        {
+            label: 'Satisfied Clients',
+            value: '200+'
+        },
+        {
+            label: 'Client Retention Rate',
+            value: '95%'
+        },
+        
+    ]).meta({
+        description: "List of key business metrics to display",
+    })
+})
+
+export const Schema = metricsWithImageSlideSchema
+
+export type MetricsWithImageSlideData = z.infer<typeof metricsWithImageSlideSchema>
+
+interface MetricsWithImageSlideLayoutProps {
+    data?: Partial<MetricsWithImageSlideData>
+}
+
+const MetricsWithImageSlideLayout: React.FC<MetricsWithImageSlideLayoutProps> = ({ data: slideData }) => {
+    const metrics = slideData?.metrics || []
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+                {/* Decorative Wave Patterns */}
+                <div className="absolute bottom-0 left-0 w-48 h-48 opacity-10 overflow-hidden">
+                    <svg className="w-full h-full" viewBox="0 0 200 200" fill="none">
+                        <path d="M0 100C50 75 100 125 150 100C175 87.5 200 100 200 100V200H0V100Z" fill="#8b5cf6" opacity="0.4"/>
+                        <path d="M0 150C75 175 125 125 200 150V175C150 162.5 100 175 50 162.5L0 150Z" fill="#8b5cf6" opacity="0.3"/>
+                    </svg>
+                </div>
+                
+                <div className="absolute top-0 right-0 w-64 h-64 opacity-10 overflow-hidden">
+                    <svg className="w-full h-full" viewBox="0 0 200 200" fill="none">
+                        <path d="M100 0C150 50 200 0 200 50C200 100 150 150 100 150C50 150 0 100 0 50C0 0 50 50 100 0Z" fill="#8b5cf6" opacity="0.2"/>
+                    </svg>
+                </div>
+
+                {/* Main Content */}
+                <div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
+                    {/* Left Section - Image */}
+                    <div className="flex-1 flex items-center justify-center pr-8">
+                        <div className="w-full max-w-lg h-96 rounded-2xl overflow-hidden shadow-lg">
+                            <img
+                                src={slideData?.image?.__image_url__ || ''}
+                                alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Right Section - Content and Metrics */}
+                    <div className="flex-1 flex flex-col justify-center pl-8 space-y-6">
+                        {/* Title */}
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                            {slideData?.title || 'Competitive Advantage'}
+                        </h1>
+
+                        {/* Description */}
+                        <p className="text-base sm:text-lg text-gray-700 leading-relaxed">
+                            {slideData?.description || 'Ginyard International Co. stands out by offering custom digital solutions tailored to client needs, alongside long-term support to ensure lasting relationships and continuous adaptation.'}
+                        </p>
+
+                        {/* Metrics Grid */}
+                        <div className="grid grid-cols-2 gap-6">
+                            {metrics.map((metric, index) => (
+                                <div key={index} className="text-center space-y-2">
+                                    <div className="text-sm text-gray-600 font-medium">
+                                        {metric.label}
+                                    </div>
+                                    <div className="text-3xl sm:text-4xl lg:text-5xl font-bold text-purple-600">
+                                        {metric.value}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MetricsWithImageSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/NumberedBulletsSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/NumberedBulletsSlideLayout.tsx
new file mode 100644
index 00000000..95a0091f
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/NumberedBulletsSlideLayout.tsx
@@ -0,0 +1,148 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'numbered-bullets-slide'
+export const layoutName = 'Numbered Bullets'
+export const layoutDescription = 'A slide layout with large title, supporting image, and numbered bullet points with descriptions.'
+
+const numberedBulletsSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Market Validation').meta({
+        description: "Main title of the slide",
+    }),
+    image: ImageSchema.default({
+        __image_url__: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        __image_prompt__: 'Business people analyzing charts and data on wall'
+    }).meta({
+        description: "Supporting image for the slide",
+    }),
+    bulletPoints: z.array(z.object({
+        title: z.string().min(2).max(100).meta({
+            description: "Bullet point title",
+        }),
+        description: z.string().min(10).max(300).meta({
+            description: "Bullet point description",
+        }),
+    })).min(1).max(4).default([
+        {
+            title: 'Customer Insights',
+            description: 'Surveys reveal that 78% of businesses are planning to invest in digital solutions, with 85% preferring customized approaches.'
+        },
+        {
+            title: 'Pilot Program Success',
+            description: 'The survey revealed that 78% of businesses plan to invest in digital solutions, and 85% prefer a tailored approach.'
+        },
+        {
+            title: 'Pilot Program Success',
+            description: 'The survey revealed that 78% of businesses plan to invest in digital solutions, and 85% prefer a tailored approach.'
+        },
+        {
+            title: 'Pilot Program Success',
+            description: 'The survey revealed that 78% of businesses plan to invest in digital solutions, and 85% prefer a tailored approach.'
+        }
+    ]).meta({
+        description: "List of numbered bullet points with descriptions",
+    })
+})
+
+export const Schema = numberedBulletsSlideSchema
+
+export type NumberedBulletsSlideData = z.infer<typeof numberedBulletsSlideSchema>
+
+interface NumberedBulletsSlideLayoutProps {
+    data?: Partial<NumberedBulletsSlideData>
+}
+
+const NumberedBulletsSlideLayout: React.FC<NumberedBulletsSlideLayoutProps> = ({ data: slideData }) => {
+    const bulletPoints = slideData?.bulletPoints || []
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+
+                {/* Main Content Container */}
+                <div className="px-8 sm:px-12 lg:px-20 pt-8 pb-8 h-full">
+                    {/* Top Section - Title and Image */}
+                    <div className="flex items-start justify-between mb-8">
+                        {/* Title Section */}
+                        <div className="flex-1 pr-8">
+                            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-4">
+                                {slideData?.title || 'Market Validation'}
+                            </h1>
+                            {/* Purple accent line */}
+                            <div className="w-24 h-1 bg-purple-600 mb-6"></div>
+                        </div>
+
+                        {/* Image Section */}
+                        <div className="flex-shrink-0 w-80 h-48">
+                            <img
+                                src={slideData?.image?.__image_url__ || ''}
+                                alt={slideData?.image?.__image_prompt__ || slideData?.title || ''}
+                                className="w-full h-full object-cover rounded-lg shadow-md"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Numbered Bullet Points */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+                        {bulletPoints.map((bullet, index) => (
+                            <div key={index} className="flex items-start space-x-4">
+                                {/* Number */}
+                                <div className="flex-shrink-0">
+                                    <div className="text-4xl sm:text-5xl font-bold text-gray-900">
+                                        {String(index + 1).padStart(2, '0')}
+                                    </div>
+                                </div>
+                                
+                                {/* Content */}
+                                <div className="flex-1 pt-2">
+                                    <h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-3">
+                                        {bullet.title}
+                                    </h3>
+                                    <p className="text-base text-gray-700 leading-relaxed">
+                                        {bullet.description}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Decorative Wave Pattern at Bottom */}
+                    <div className="absolute bottom-0 left-0 right-0 h-20 overflow-hidden">
+                        <svg 
+                            className="w-full h-full opacity-20" 
+                            viewBox="0 0 1200 200" 
+                            fill="none" 
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path 
+                                d="M0 100C300 150 600 50 900 100C1050 125 1125 100 1200 100V200H0V100Z" 
+                                fill="url(#wave-gradient)" 
+                            />
+                            <defs>
+                                <linearGradient id="wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                    <stop offset="0%" stopColor="#8b5cf6" />
+                                    <stop offset="50%" stopColor="#a855f7" />
+                                    <stop offset="100%" stopColor="#c084fc" />
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default NumberedBulletsSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/TableOfContentsSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/TableOfContentsSlideLayout.tsx
new file mode 100644
index 00000000..83d7eb9e
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/TableOfContentsSlideLayout.tsx
@@ -0,0 +1,145 @@
+import React from 'react'
+import * as z from "zod";
+
+export const layoutId = 'table-of-contents-slide'
+export const layoutName = 'Table of Contents'
+export const layoutDescription = 'A professional table of contents layout with numbered sections, and page references. This should be right after introduction slide if ever used.'
+
+const tableOfContentsSlideSchema = z.object({
+    sections: z.array(z.object({
+        number: z.number().min(1).meta({
+            description: "Section number"
+        }),
+        title: z.string().min(1).max(100).meta({
+            description: "Section title"
+        }),
+        pageNumber: z.string().min(1).max(10).meta({
+            description: "Page number for this section"
+        })
+    })).default([
+        { number: 1, title: "Problem", pageNumber: "03" },
+        { number: 2, title: "Solution", pageNumber: "04" },
+        { number: 3, title: "Product Overview", pageNumber: "05" },
+        { number: 4, title: "Market Size", pageNumber: "06" },
+        { number: 5, title: "Market Validation", pageNumber: "07" },
+        { number: 6, title: "Company Traction", pageNumber: "08" },
+        { number: 7, title: "Product Performance", pageNumber: "09" },
+        { number: 8, title: "Business Model", pageNumber: "10" },
+        { number: 9, title: "Competitive Advantage", pageNumber: "11" },
+        { number: 10, title: "Team Member", pageNumber: "12" }
+    ]).meta({
+        description: "List of table of contents sections",
+    })
+})
+
+export const Schema = tableOfContentsSlideSchema
+
+export type TableOfContentsSlideData = z.infer<typeof tableOfContentsSlideSchema>
+
+interface TableOfContentsSlideLayoutProps {
+    data?: Partial<TableOfContentsSlideData>
+}
+
+const TableOfContentsSlideLayout: React.FC<TableOfContentsSlideLayoutProps> = ({ data: slideData }) => {
+    const sections = slideData?.sections || []
+    const midPoint = Math.ceil(sections.length / 2)
+    const leftSections = sections.slice(0, midPoint)
+    const rightSections = sections.slice(midPoint)
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg px-8 sm:px-12 lg:px-20 py-8 sm:py-12 lg:py-16 max-h-[720px] aspect-video bg-white relative z-20 mx-auto"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+
+                {/* Title Section */}
+                <div className="text-center mb-8 sm:mb-12">
+                    <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
+                        Table of Contents
+                    </h1>
+                    {/* Decorative Wave */}
+                    <div className="flex justify-center">
+                        <svg width="80" height="20" viewBox="0 0 80 20" className="text-purple-600">
+                            <path
+                                d="M0 10 Q20 0 40 10 T80 10"
+                                stroke="currentColor"
+                                strokeWidth="3"
+                                fill="none"
+                            />
+                        </svg>
+                    </div>
+                </div>
+
+                {/* Content Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-12">
+                    {/* Left Column */}
+                    <div className="space-y-4 sm:space-y-6">
+                        {leftSections.map((section) => (
+                            <div key={section.number} className="flex items-center justify-between group">
+                                <div className="flex items-center space-x-4">
+                                    {/* Number Box */}
+                                    <div className="w-12 h-12 sm:w-14 sm:h-14 bg-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg sm:text-xl group-hover:bg-purple-700 transition-colors">
+                                        {section.number}
+                                    </div>
+                                    {/* Title */}
+                                    <span className="text-lg sm:text-xl font-medium text-gray-800 group-hover:text-purple-600 transition-colors">
+                                        {section.title}
+                                    </span>
+                                </div>
+                                {/* Page Number */}
+                                <div className="text-right">
+                                    <span className="text-lg sm:text-xl text-gray-600">
+                                        {section.pageNumber}
+                                    </span>
+                                    {/* Dotted line effect */}
+                                    <div className="text-gray-300 text-sm mt-1">
+                                        .....
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="space-y-4 sm:space-y-6">
+                        {rightSections.map((section) => (
+                            <div key={section.number} className="flex items-center justify-between group">
+                                <div className="flex items-center space-x-4">
+                                    {/* Number Box */}
+                                    <div className="w-12 h-12 sm:w-14 sm:h-14 bg-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-lg sm:text-xl group-hover:bg-purple-700 transition-colors">
+                                        {section.number}
+                                    </div>
+                                    {/* Title */}
+                                    <span className="text-lg sm:text-xl font-medium text-gray-800 group-hover:text-purple-600 transition-colors">
+                                        {section.title}
+                                    </span>
+                                </div>
+                                {/* Page Number */}
+                                <div className="text-right">
+                                    <span className="text-lg sm:text-xl text-gray-600">
+                                        {section.pageNumber}
+                                    </span>
+                                    {/* Dotted line effect */}
+                                    <div className="text-gray-300 text-sm mt-1">
+                                        .....
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default TableOfContentsSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/TeamSlideLayout.tsx b/servers/nextjs/presentation-layouts/general/TeamSlideLayout.tsx
new file mode 100644
index 00000000..1307ab5e
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/TeamSlideLayout.tsx
@@ -0,0 +1,169 @@
+import React from 'react'
+import * as z from "zod";
+import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
+
+export const layoutId = 'team-slide'
+export const layoutName = 'Team Slide'
+export const layoutDescription = 'A slide layout showcasing team members with photos, names, positions, and descriptions alongside company information.'
+
+const teamMemberSchema = z.object({
+    name: z.string().min(2).max(50).meta({
+        description: "Team member's full name"
+    }),
+    position: z.string().min(2).max(50).meta({
+        description: "Job title or position"
+    }),
+    description: z.string().min(10).max(120).meta({
+        description: "Brief description of the team member (around 100 characters)"
+    }),
+    image: ImageSchema
+});
+
+const teamSlideSchema = z.object({
+    title: z.string().min(3).max(100).default('Our Team Members').meta({
+        description: "Main title of the slide",
+    }),
+    companyDescription: z.string().min(10).max(600).default('Ginyard International Co. is a leading provider of innovative digital solutions tailored for businesses. Our mission is to empower organizations to achieve their goals through cutting-edge technology and strategic partnerships.').meta({
+        description: "Company description or team introduction text",
+    }),
+    teamMembers: z.array(teamMemberSchema).min(2).max(6).default([
+        {
+            name: 'Juliana Silva',
+            position: 'CEO',
+            description: 'Strategic leader with 15+ years experience in digital transformation and business growth.',
+            image: {
+                __image_url__: 'https://images.unsplash.com/photo-1494790108755-2616b612994a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
+                __image_prompt__: 'Professional businesswoman CEO headshot'
+            }
+        },
+        {
+            name: 'Daniel Gallego',
+            position: 'CTO',
+            description: 'Technology expert specializing in scalable solutions and innovative software architecture.',
+            image: {
+                __image_url__: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
+                __image_prompt__: 'Professional businessman CTO headshot'
+            }
+        },
+        {
+            name: 'Ketut Susilo',
+            position: 'COO',
+            description: 'Operations leader focused on efficiency, process optimization, and team development.',
+            image: {
+                __image_url__: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
+                __image_prompt__: 'Professional businessman COO headshot'
+            }
+        },
+        {
+            name: 'Anna Robertson',
+            position: 'CMO',
+            description: 'Marketing strategist with expertise in brand development and customer engagement.',
+            image: {
+                __image_url__: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
+                __image_prompt__: 'Professional businesswoman CMO headshot'
+            }
+        }
+    ]).meta({
+        description: "List of team members with their information",
+    })
+})
+
+export const Schema = teamSlideSchema
+
+export type TeamSlideData = z.infer<typeof teamSlideSchema>
+
+interface TeamSlideLayoutProps {
+    data?: Partial<TeamSlideData>
+}
+
+const TeamSlideLayout: React.FC<TeamSlideLayoutProps> = ({ data: slideData }) => {
+    const teamMembers = slideData?.teamMembers || []
+    
+    // Function to determine grid classes based on number of team members
+    const getGridClasses = (count: number) => {
+        if (count <= 2) {
+            return 'grid-cols-1 gap-6'
+        } else if (count <= 4) {
+            return 'grid-cols-2 gap-6'
+        } else {
+            return 'grid-cols-2 lg:grid-cols-3 gap-4'
+        }
+    }
+
+    return (
+        <>
+            {/* Import Google Fonts */}
+            <link 
+                href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" 
+                rel="stylesheet"
+            />
+            
+            <div 
+                className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
+                style={{
+                    fontFamily: 'Poppins, sans-serif'
+                }}
+            >
+                {/* Decorative Wave Pattern */}
+                <div className="absolute bottom-0 left-0 w-80 h-40 opacity-10 overflow-hidden">
+                    <svg className="w-full h-full" viewBox="0 0 300 150" fill="none">
+                        <path d="M0 75C75 50 150 100 225 75C262.5 62.5 300 75 300 75V150H0V75Z" fill="#8b5cf6" opacity="0.3"/>
+                        <path d="M0 100C100 125 200 75 300 100V125C225 112.5 150 125 75 112.5L0 100Z" fill="#8b5cf6" opacity="0.2"/>
+                    </svg>
+                </div>
+
+                {/* Main Content */}
+                <div className="relative z-10 flex h-full px-8 sm:px-12 lg:px-20 pb-8">
+                    {/* Left Section - Title and Company Description */}
+                    <div className="flex-1 flex flex-col justify-center pr-8 space-y-6">
+                        {/* Title */}
+                        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
+                            {slideData?.title || 'Our Team Members'}
+                        </h1>
+
+                        {/* Purple accent line */}
+                        <div className="w-20 h-1 bg-purple-600"></div>
+
+                        {/* Company Description */}
+                        <p className="text-base sm:text-lg text-gray-700 leading-relaxed">
+                            {slideData?.companyDescription || 'Ginyard International Co. is a leading provider of innovative digital solutions tailored for businesses. Our mission is to empower organizations to achieve their goals through cutting-edge technology and strategic partnerships.'}
+                        </p>
+                    </div>
+
+                    {/* Right Section - Team Members Grid */}
+                    <div className="flex-1 flex items-center justify-center pl-8">
+                        <div className={`grid ${getGridClasses(teamMembers.length)} w-full max-w-2xl`}>
+                            {teamMembers.map((member, index) => (
+                                <div key={index} className="text-center space-y-3">
+                                    {/* Member Photo */}
+                                    <div className="w-32 h-32 mx-auto rounded-lg overflow-hidden shadow-md">
+                                        <img
+                                            src={member.image.__image_url__ || ''}
+                                            alt={member.image.__image_prompt__ || member.name}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    </div>
+                                    
+                                    {/* Member Info */}
+                                    <div>
+                                        <h3 className="text-lg font-semibold text-gray-900">
+                                            {member.name}
+                                        </h3>
+                                        <p className="text-sm font-medium text-gray-600 italic mb-2">
+                                            {member.position}
+                                        </p>
+                                        <p className="text-xs text-gray-600 leading-relaxed px-2">
+                                            {member.description}
+                                        </p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default TeamSlideLayout 
\ No newline at end of file
diff --git a/servers/nextjs/presentation-layouts/general/setting.json b/servers/nextjs/presentation-layouts/general/setting.json
new file mode 100644
index 00000000..8a00ff22
--- /dev/null
+++ b/servers/nextjs/presentation-layouts/general/setting.json
@@ -0,0 +1,5 @@
+{
+    "description": "General purpose layouts for common presentation elements",
+    "ordered": false,
+    "isDefault": false
+} 
\ No newline at end of file