diff --git a/website/src/assets/styles/tailwind.css b/website/src/assets/styles/tailwind.css
index d788c067c..be1e06f8b 100644
--- a/website/src/assets/styles/tailwind.css
+++ b/website/src/assets/styles/tailwind.css
@@ -18,7 +18,6 @@ limitations under the License.
 @tailwind components;
 @tailwind utilities;
 
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -47,13 +46,13 @@ limitations under the License.
 
     --warning: 38 92% 50%;
     --warning-foreground: 48 96% 89%;
-  
+
     --success: 120, 100%, 25%;
     --success-foreground: 60 9.1% 97.8%;
 
     --progress: 240, 83%, 58%;
     --progress-foreground: 60 9.1% 97.8%;
-  
+
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
     --ring: 24.6 95% 53.1%;
@@ -105,7 +104,7 @@ limitations under the License.
 
     --warning: 38 92% 50%;
     --warning-foreground: 48 96% 89%;
-  
+
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 20.5 90.2% 48.2%;
@@ -131,7 +130,6 @@ limitations under the License.
   }
 }
 
-
 @layer base {
   /* setting default background, text color and font */
   html {
diff --git a/website/src/common/CommandMenu.tsx b/website/src/common/CommandMenu.tsx
index 0b16e7f80..0f64ba479 100644
--- a/website/src/common/CommandMenu.tsx
+++ b/website/src/common/CommandMenu.tsx
@@ -64,7 +64,7 @@ export function CommandMenu() {
       <Button
         variant="outline"
         className={cn(
-          "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+          "relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
         )}
         onClick={() => setOpen(true)}
       >
diff --git a/website/src/common/DailySummary.tsx b/website/src/common/DailySummary.tsx
index 75065f4e1..1a5fe63c8 100644
--- a/website/src/common/DailySummary.tsx
+++ b/website/src/common/DailySummary.tsx
@@ -59,7 +59,7 @@ export default function DailySummary(props: DailySummaryProps) {
     <Card
       className={twMerge(
         "w-[310px] h-[124px] md:w-[316px] md:h-[124px] hover:scale-105 duration-300 hover:bg-muted border-border",
-        workload === data.name && "border-2 border-front"
+        workload === data.name && "border-2 border-front",
       )}
       onClick={() => getWorkload()}
     >
diff --git a/website/src/common/Footer.tsx b/website/src/common/Footer.tsx
index 6d980841a..516470021 100644
--- a/website/src/common/Footer.tsx
+++ b/website/src/common/Footer.tsx
@@ -93,7 +93,11 @@ const Footer: React.FC = () => {
               <h5 className="font-bold md:text-lg text-base">{item.title}</h5>
               <div className="my-4 md:my-7 flex flex-col gap-y-2">
                 {item.links.map((link, key) => (
-                  <Link className="md:text-base text-xs text-foreground/80 hover:text-primary/80" key={key} to={link.to}>
+                  <Link
+                    className="md:text-base text-xs text-foreground/80 hover:text-primary/80"
+                    key={key}
+                    to={link.to}
+                  >
                     {link.title}
                   </Link>
                 ))}
@@ -109,4 +113,4 @@ const Footer: React.FC = () => {
   );
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/website/src/common/Hero.tsx b/website/src/common/Hero.tsx
index 435a7ad50..b0d641164 100644
--- a/website/src/common/Hero.tsx
+++ b/website/src/common/Hero.tsx
@@ -25,7 +25,9 @@ export default function Hero({ title, description, children }: HeroProps) {
   return (
     <section className="flex flex-col items-center p-12">
       <div className="flex flex-col items-center gap-4 max-w-screen-lg">
-        <h2 className="text-4xl md:text-6xl font-semibold text-primary mb-4">{title}</h2>
+        <h2 className="text-4xl md:text-6xl font-semibold text-primary mb-4">
+          {title}
+        </h2>
         <p className="md:my-6 leading-loose text-foreground/80">
           {description}
         </p>
@@ -33,4 +35,4 @@ export default function Hero({ title, description, children }: HeroProps) {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/website/src/common/Navbar.tsx b/website/src/common/Navbar.tsx
index 996e81cc1..aab5fe3b1 100644
--- a/website/src/common/Navbar.tsx
+++ b/website/src/common/Navbar.tsx
@@ -55,7 +55,7 @@ export default function Navbar(): JSX.Element {
     <nav className="flex flex-col relative">
       <div
         className={twMerge(
-          "w-full bg-background z-[49] flex justify-between lg:justify-center p-4 border-b border-border"
+          "w-full bg-background z-[49] flex justify-between lg:justify-center p-4 border-b border-border",
         )}
       >
         <Link to="/" className="flex flex-1 gap-x-2 items-center">
@@ -77,8 +77,8 @@ export default function Navbar(): JSX.Element {
                     isPending
                       ? "pointer-events-none opacity-50"
                       : isActive
-                      ? "text-primary"
-                      : ""
+                        ? "text-primary"
+                        : "",
                   )
                 }
               >
@@ -130,8 +130,8 @@ export default function Navbar(): JSX.Element {
                           isPending
                             ? "pointer-events-none "
                             : isActive
-                            ? "text-primary"
-                            : ""
+                              ? "text-primary"
+                              : "",
                         )
                       }
                     >
@@ -147,8 +147,8 @@ export default function Navbar(): JSX.Element {
                             isPending
                               ? "pointer-events-none "
                               : isActive
-                              ? "text-primary"
-                              : ""
+                                ? "text-primary"
+                                : "",
                           )
                         }
                       >
diff --git a/website/src/common/VitessRefsCommand.tsx b/website/src/common/VitessRefsCommand.tsx
index acdc6a46a..e0b187b77 100644
--- a/website/src/common/VitessRefsCommand.tsx
+++ b/website/src/common/VitessRefsCommand.tsx
@@ -94,7 +94,7 @@ export default function VitessRefsCommand({
       <Button
         variant="outline"
         className={cn(
-          "relative justify-between rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-4 w-full md:w-40 lg:w-64"
+          "relative justify-between rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-4 w-full md:w-40 lg:w-64",
         )}
         onClick={() => setOpen(true)}
       >
diff --git a/website/src/common/WorkloadsCommand.tsx b/website/src/common/WorkloadsCommand.tsx
index 40eee06ac..776b49811 100644
--- a/website/src/common/WorkloadsCommand.tsx
+++ b/website/src/common/WorkloadsCommand.tsx
@@ -93,7 +93,7 @@ export default function WorkloadsCommand({
       <Button
         variant="outline"
         className={cn(
-          "relative justify-between rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-4 w-full md:w-40 lg:w-64"
+          "relative justify-between rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-4 w-full md:w-40 lg:w-64",
         )}
         onClick={() => setOpen(true)}
       >
diff --git a/website/src/components/ui/badge.tsx b/website/src/components/ui/badge.tsx
index 4be74190c..a87b4005d 100644
--- a/website/src/components/ui/badge.tsx
+++ b/website/src/components/ui/badge.tsx
@@ -19,7 +19,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/library/utils";
 
-export type Variant = "warning" | "success" | "progress" | "default" | "secondary" | "destructive" | "outline" | null | undefined;
+export type Variant =
+  | "warning"
+  | "success"
+  | "progress"
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | null
+  | undefined;
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -41,7 +50,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface BadgeProps
diff --git a/website/src/components/ui/button.tsx b/website/src/components/ui/button.tsx
index c65f8e179..1705aa01f 100644
--- a/website/src/components/ui/button.tsx
+++ b/website/src/components/ui/button.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/library/utils";
 
diff --git a/website/src/components/ui/card.tsx b/website/src/components/ui/card.tsx
index 5969e2a1c..b1d68c4d2 100644
--- a/website/src/components/ui/card.tsx
+++ b/website/src/components/ui/card.tsx
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import { cn } from "@/library/utils"
+import * as React from "react";
+import { cn } from "@/library/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -25,12 +25,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -41,8 +41,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -52,12 +52,12 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -68,16 +68,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -88,7 +88,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/website/src/components/ui/chart.tsx b/website/src/components/ui/chart.tsx
index 3f4dc4876..32452da84 100644
--- a/website/src/components/ui/chart.tsx
+++ b/website/src/components/ui/chart.tsx
@@ -14,51 +14,51 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    config: ChartConfig
+    config: ChartConfig;
     children: React.ComponentProps<
       typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
+    >["children"];
   }
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -67,7 +67,7 @@ const ChartContainer = React.forwardRef<
         ref={ref}
         className={cn(
           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
+          className,
         )}
         {...props}
       >
@@ -77,17 +77,17 @@ const ChartContainer = React.forwardRef<
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
+  );
+});
+ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
+    ([_, config]) => config.theme || config.color,
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -100,29 +100,29 @@ ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
-`
+`,
         ),
       }}
     />
-  )
-}
+  );
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
     React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
     }
 >(
   (
@@ -141,36 +141,36 @@ const ChartTooltipContent = React.forwardRef<
       nameKey,
       labelKey,
     },
-    ref
+    ref,
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return null;
       }
 
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
+          : itemConfig?.label;
 
       if (labelFormatter) {
         return (
           <div className={cn("font-medium", labelClassName)}>
             {labelFormatter(value, payload)}
           </div>
-        )
+        );
       }
 
       if (!value) {
-        return null
+        return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
     }, [
       label,
       labelFormatter,
@@ -179,35 +179,35 @@ const ChartTooltipContent = React.forwardRef<
       labelClassName,
       config,
       labelKey,
-    ])
+    ]);
 
     if (!active || !payload?.length) {
-      return null
+      return null;
     }
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
       <div
         ref={ref}
         className={cn(
           "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
+          className,
         )}
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
                 key={item.dataKey}
                 className={cn(
                   "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
+                  indicator === "dot" && "items-center",
                 )}
               >
                 {formatter && item.value && item.name ? (
@@ -227,7 +227,7 @@ const ChartTooltipContent = React.forwardRef<
                               "w-0 border-[1.5px] border-dashed bg-transparent":
                                 indicator === "dashed",
                               "my-0.5": nestLabel && indicator === "dashed",
-                            }
+                            },
                           )}
                           style={
                             {
@@ -241,7 +241,7 @@ const ChartTooltipContent = React.forwardRef<
                     <div
                       className={cn(
                         "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        nestLabel ? "items-end" : "items-center",
                       )}
                     >
                       <div className="grid gap-1.5">
@@ -259,33 +259,33 @@ const ChartTooltipContent = React.forwardRef<
                   </>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
+      hideIcon?: boolean;
+      nameKey?: string;
     }
 >(
   (
     { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
+    ref,
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     if (!payload?.length) {
-      return null
+      return null;
     }
 
     return (
@@ -294,18 +294,18 @@ const ChartLegendContent = React.forwardRef<
         className={cn(
           "flex items-center justify-center gap-4",
           verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
+          className,
         )}
       >
         {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
               key={item.value}
               className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
@@ -320,22 +320,22 @@ const ChartLegendContent = React.forwardRef<
               )}
               {itemConfig?.label}
             </div>
-          )
+          );
         })}
       </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,
-  key: string
+  key: string,
 ) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
@@ -343,15 +343,15 @@ function getPayloadConfigFromPayload(
     typeof payload.payload === "object" &&
     payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
   if (
     key in payload &&
     typeof payload[key as keyof typeof payload] === "string"
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
@@ -359,12 +359,12 @@ function getPayloadConfigFromPayload(
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
   }
 
   return configLabelKey in config
     ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -374,4 +374,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};
diff --git a/website/src/components/ui/command.tsx b/website/src/components/ui/command.tsx
index 5eda224d1..6b48f571f 100644
--- a/website/src/components/ui/command.tsx
+++ b/website/src/components/ui/command.tsx
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
 
-import { cn } from "@/library/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/library/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -30,12 +30,12 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
 
@@ -48,27 +48,30 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b border-border px-3" cmdk-input-wrapper="">
+  <div
+    className="flex items-center border-b border-border px-3"
+    cmdk-input-wrapper=""
+  >
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
         "flex h-11 w-full border-border rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -79,9 +82,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -92,9 +95,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -104,13 +107,13 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -121,8 +124,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -132,13 +135,13 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground ",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -148,13 +151,13 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -166,4 +169,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/website/src/components/ui/data-table-faceted-filter.tsx b/website/src/components/ui/data-table-faceted-filter.tsx
index 66c65db84..78a8c4ce5 100644
--- a/website/src/components/ui/data-table-faceted-filter.tsx
+++ b/website/src/components/ui/data-table-faceted-filter.tsx
@@ -115,7 +115,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                       }
                       const filterValues = Array.from(selectedValues);
                       column?.setFilterValue(
-                        filterValues.length ? filterValues : undefined
+                        filterValues.length ? filterValues : undefined,
                       );
                     }}
                   >
@@ -124,7 +124,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                         "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                         isSelected
                           ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible"
+                          : "opacity-50 [&_svg]:invisible",
                       )}
                     >
                       <CheckIcon className={cn("h-4 w-4")} />
diff --git a/website/src/components/ui/data-table-view-options.tsx b/website/src/components/ui/data-table-view-options.tsx
index 324b38afd..93bc7eaa1 100644
--- a/website/src/components/ui/data-table-view-options.tsx
+++ b/website/src/components/ui/data-table-view-options.tsx
@@ -49,7 +49,7 @@ export function DataTableViewOptions<TData>({
           .getAllColumns()
           .filter(
             (column) =>
-              typeof column.accessorFn !== "undefined" && column.getCanHide()
+              typeof column.accessorFn !== "undefined" && column.getCanHide(),
           )
           .map((column) => {
             if (typeof column.columnDef.header !== "string") {
diff --git a/website/src/components/ui/dialog.tsx b/website/src/components/ui/dialog.tsx
index 6ec23adec..4e35a5542 100644
--- a/website/src/components/ui/dialog.tsx
+++ b/website/src/components/ui/dialog.tsx
@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -36,12 +36,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     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
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -53,7 +53,7 @@ const DialogContent = React.forwardRef<
       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
+        className,
       )}
       {...props}
     >
@@ -64,8 +64,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -74,12 +74,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -88,12 +88,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -103,12 +103,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -119,8 +119,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -133,4 +133,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/website/src/components/ui/dropdown-menu.tsx b/website/src/components/ui/dropdown-menu.tsx
index 9bb84b4e9..284e6ec56 100644
--- a/website/src/components/ui/dropdown-menu.tsx
+++ b/website/src/components/ui/dropdown-menu.tsx
@@ -62,7 +62,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border border-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",
-      className
+      className,
     )}
     {...props}
   />
@@ -80,7 +80,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border border-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",
-        className
+        className,
       )}
       {...props}
     />
diff --git a/website/src/components/ui/input.tsx b/website/src/components/ui/input.tsx
index 37e65d746..eff45a895 100644
--- a/website/src/components/ui/input.tsx
+++ b/website/src/components/ui/input.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -28,14 +28,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/website/src/components/ui/label.tsx b/website/src/components/ui/label.tsx
index a6ed7db5c..903b4d141 100644
--- a/website/src/components/ui/label.tsx
+++ b/website/src/components/ui/label.tsx
@@ -21,7 +21,7 @@ import * as React from "react";
 import { cn } from "@/library/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/website/src/components/ui/popover.tsx b/website/src/components/ui/popover.tsx
index f5dbdf853..b7d8d2f27 100644
--- a/website/src/components/ui/popover.tsx
+++ b/website/src/components/ui/popover.tsx
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -34,12 +34,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border border-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",
-        className
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/website/src/components/ui/scroll-area.tsx b/website/src/components/ui/scroll-area.tsx
index c1e7cf392..ba82fb989 100644
--- a/website/src/components/ui/scroll-area.tsx
+++ b/website/src/components/ui/scroll-area.tsx
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -34,8 +34,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -50,13 +50,13 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      className,
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/website/src/components/ui/separator.tsx b/website/src/components/ui/separator.tsx
index b64067a58..849c0c5f6 100644
--- a/website/src/components/ui/separator.tsx
+++ b/website/src/components/ui/separator.tsx
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -25,7 +25,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -34,12 +34,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/website/src/components/ui/skeleton.tsx b/website/src/components/ui/skeleton.tsx
index f11197978..e471380a9 100644
--- a/website/src/components/ui/skeleton.tsx
+++ b/website/src/components/ui/skeleton.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
 function Skeleton({
   className,
@@ -25,7 +25,7 @@ function Skeleton({
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/website/src/components/ui/table.tsx b/website/src/components/ui/table.tsx
index 92f8ed432..56e1e0fe7 100644
--- a/website/src/components/ui/table.tsx
+++ b/website/src/components/ui/table.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -29,16 +29,16 @@ const Table = React.forwardRef<
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -49,8 +49,8 @@ const TableBody = React.forwardRef<
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -60,12 +60,12 @@ const TableFooter = React.forwardRef<
     ref={ref}
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -75,12 +75,12 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -90,12 +90,12 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -106,8 +106,8 @@ const TableCell = React.forwardRef<
     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -118,8 +118,8 @@ const TableCaption = React.forwardRef<
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = "TableCaption";
 
 export {
   Table,
@@ -130,4 +130,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/website/src/components/ui/toast.tsx b/website/src/components/ui/toast.tsx
index 43378ddaf..b6689a267 100644
--- a/website/src/components/ui/toast.tsx
+++ b/website/src/components/ui/toast.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -15,12 +15,12 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
@@ -35,8 +35,8 @@ const toastVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -49,9 +49,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -61,12 +61,12 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -76,15 +76,15 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
     toast-close=""
     {...props}
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -95,8 +95,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold", className)}
     {...props}
   />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -107,12 +107,12 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -124,4 +124,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};
diff --git a/website/src/components/ui/toaster.tsx b/website/src/components/ui/toaster.tsx
index a2209ba58..5ff57090a 100644
--- a/website/src/components/ui/toaster.tsx
+++ b/website/src/components/ui/toaster.tsx
@@ -5,11 +5,11 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+} from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -25,9 +25,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/website/src/components/ui/tooltip.tsx b/website/src/components/ui/tooltip.tsx
index a9432d60a..a42f81482 100644
--- a/website/src/components/ui/tooltip.tsx
+++ b/website/src/components/ui/tooltip.tsx
@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/library/utils"
+import { cn } from "@/library/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -34,11 +34,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
-      className
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/website/src/components/ui/use-toast.ts b/website/src/components/ui/use-toast.ts
index 16713070d..5a03b78a0 100644
--- a/website/src/components/ui/use-toast.ts
+++ b/website/src/components/ui/use-toast.ts
@@ -1,76 +1,73 @@
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
+    });
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
-}
+  toastTimeouts.set(toastId, timeout);
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -78,27 +75,27 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
     case "UPDATE_TOAST":
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
-      }
+      };
 
     case "DISMISS_TOAST": {
-      const { toastId } = action
+      const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+          addToRemoveQueue(toast.id);
+        });
       }
 
       return {
@@ -109,46 +106,46 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
-      }
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+    listener(memoryState);
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
@@ -157,36 +154,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };
diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx
index fa9c686c2..4147c589e 100644
--- a/website/src/pages/DailyPage/DailyPage.tsx
+++ b/website/src/pages/DailyPage/DailyPage.tsx
@@ -25,7 +25,7 @@ import DailyHero from "./components/DailyHero";
 export default function DailyPage() {
   const urlParams = new URLSearchParams(window.location.search);
   const [workload, setWorkload] = useState<string>(
-    urlParams.get("workload") ?? "OLTP"
+    urlParams.get("workload") ?? "OLTP",
   );
 
   const navigate = useNavigate();
diff --git a/website/src/pages/DailyPage/components/DailyCharts.tsx b/website/src/pages/DailyPage/components/DailyCharts.tsx
index 743b03e07..55adb5ca5 100644
--- a/website/src/pages/DailyPage/components/DailyCharts.tsx
+++ b/website/src/pages/DailyPage/components/DailyCharts.tsx
@@ -154,13 +154,13 @@ export default function DailyCharts(props: DailyChartsProps) {
       tps: item.tps.center,
       latency: item.latency.center,
       cpuTimeTotal: Number(
-        (item.total_components_cpu_time.center * 1000000).toFixed(2)
+        (item.total_components_cpu_time.center * 1000000).toFixed(2),
       ),
       cpuTimeVtgate: Number(
-        (item.components_cpu_time.vtgate.center * 1000000).toFixed(2)
+        (item.components_cpu_time.vtgate.center * 1000000).toFixed(2),
       ),
       cpuTimeVttablet: Number(
-        (item.components_cpu_time.vttablet.center * 1000000).toFixed(2)
+        (item.components_cpu_time.vttablet.center * 1000000).toFixed(2),
       ),
       memBytesTotal: item.total_components_mem_stats_alloc_bytes.center,
       memBytesVtgate: item.components_mem_stats_alloc_bytes.vtgate.center,
@@ -169,7 +169,7 @@ export default function DailyCharts(props: DailyChartsProps) {
   }
 
   const [expandedStates, setExpandedStates] = useState<boolean[]>(
-    Array(chartMetadas.length).fill(true)
+    Array(chartMetadas.length).fill(true),
   );
 
   const toggleExpand = (index: number) => {
diff --git a/website/src/pages/ForeignKeysPage/components/FKCommand.tsx b/website/src/pages/ForeignKeysPage/components/FKCommand.tsx
index 8daf047ca..16cc9d481 100644
--- a/website/src/pages/ForeignKeysPage/components/FKCommand.tsx
+++ b/website/src/pages/ForeignKeysPage/components/FKCommand.tsx
@@ -94,7 +94,7 @@ export default function FKProps({
       <Button
         variant="outline"
         className={cn(
-          "relative justify-between rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-4 w-full md:w-40 lg:w-64"
+          "relative justify-between rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-4 w-full md:w-40 lg:w-64",
         )}
         onClick={() => setOpen(true)}
       >
diff --git a/website/src/pages/HistoryPage/components/HistoryTable.tsx b/website/src/pages/HistoryPage/components/HistoryTable.tsx
index 494351403..d31503068 100644
--- a/website/src/pages/HistoryPage/components/HistoryTable.tsx
+++ b/website/src/pages/HistoryPage/components/HistoryTable.tsx
@@ -60,7 +60,7 @@ export function HistoryTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    initialGitRef ? [{ id: "sha", value: initialGitRef }] : []
+    initialGitRef ? [{ id: "sha", value: initialGitRef }] : [],
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -108,7 +108,7 @@ export function HistoryTable<TData, TValue>({
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </TableHead>
                   );
@@ -128,7 +128,7 @@ export function HistoryTable<TData, TValue>({
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </TableCell>
                   ))}
diff --git a/website/src/pages/HomePage/HomePage.tsx b/website/src/pages/HomePage/HomePage.tsx
index 7361a8812..55db8f0c4 100644
--- a/website/src/pages/HomePage/HomePage.tsx
+++ b/website/src/pages/HomePage/HomePage.tsx
@@ -18,7 +18,6 @@ import { Separator } from "@/components/ui/separator";
 import Diagram from "./components/Diagram";
 import HomePageHero from "./components/HomePageHero";
 import HowItWorks from "./components/HowItWorks";
-
 export default function HomePage() {
   return (
     <>
diff --git a/website/src/pages/HomePage/components/HowItWorks.tsx b/website/src/pages/HomePage/components/HowItWorks.tsx
index efaed9903..366ab3539 100644
--- a/website/src/pages/HomePage/components/HowItWorks.tsx
+++ b/website/src/pages/HomePage/components/HowItWorks.tsx
@@ -28,49 +28,80 @@ const items: HowItWorksCardItem[] = [
     title: "Workloads",
     content: (
       <>
-        Seven workloads are executed against every commit we decide to benchmark. These workloads define the SQL schema, the queries we execute, the configuration of the Vitess cluster, and the configuration of sysbench. The settings of our workload can be found on the
-        <Link to="https://github.com/vitessio/arewefastyet/tree/main/config/benchmarks" className="text-primary"> arewefastyet repository</Link>.
+        Seven workloads are executed against every commit we decide to
+        benchmark. These workloads define the SQL schema, the queries we
+        execute, the configuration of the Vitess cluster, and the configuration
+        of sysbench. The settings of our workload can be found on the
+        <Link
+          to="https://github.com/vitessio/arewefastyet/tree/main/config/benchmarks"
+          className="text-primary"
+        >
+          {" "}
+          arewefastyet repository
+        </Link>
+        .
         <br />
         <br />
-        We have two categories of workloads: OLTP and TPCC, both are a modified version of the official workloads.
+        We have two categories of workloads: OLTP and TPCC, both are a modified
+        version of the official workloads.
       </>
-    )
+    ),
   },
   {
     title: "Frequency",
     content: (
       <>
-        There are three cron schedules that enable us to periodically benchmark Vitess, the definition of these schedules is
-        <Link to="https://github.com/vitessio/arewefastyet/blob/main/config/prod/config.yaml#L3-L5" className="text-primary"> available in our yaml configuration</Link>.
+        There are three cron schedules that enable us to periodically benchmark
+        Vitess, the definition of these schedules is
+        <Link
+          to="https://github.com/vitessio/arewefastyet/blob/main/config/prod/config.yaml#L3-L5"
+          className="text-primary"
+        >
+          {" "}
+          available in our yaml configuration
+        </Link>
+        .
         <br />
         <br />
-        Generally, we benchmark the main and release branches of Vitess every night at midnight UTC. We also detect new PRs that need to be benchmarked every five minutes, and new tags/releases every minute.      </>
-    )
+        Generally, we benchmark the main and release branches of Vitess every
+        night at midnight UTC. We also detect new PRs that need to be
+        benchmarked every five minutes, and new tags/releases every minute.{" "}
+      </>
+    ),
   },
   {
     title: "Methodology",
     content: (
       <>
-        Each commit is benchmarked ten times by each workload. Under the hood, we use sysbench with a custom configuration to perform the benchmark. We then perform statistical analysis on the ten results of a given workload to get a more accurate and reliable result.
+        Each commit is benchmarked ten times by each workload. Under the hood,
+        we use sysbench with a custom configuration to perform the benchmark. We
+        then perform statistical analysis on the ten results of a given workload
+        to get a more accurate and reliable result.
         <br />
         <br />
-        Every execution is done on the same hardware: 192Gb of RAM and 2x Intel Xeon Silver 4214 Processor 24-Core @ 2.20GHz.      </>
-    )
+        Every execution is done on the same hardware: 192Gb of RAM and 2x Intel
+        Xeon Silver 4214 Processor 24-Core @ 2.20GHz.{" "}
+      </>
+    ),
   },
   {
     title: "Results",
     content: (
       <>
-We collect the same results as sysbench (QPS, TPS, Error rate, latency, etc), along with several Golang metrics such as the CPU used per query, and the total memory used per query.      </>
-    )
-
-  }
+        We collect the same results as sysbench (QPS, TPS, Error rate, latency,
+        etc), along with several Golang metrics such as the CPU used per query,
+        and the total memory used per query.{" "}
+      </>
+    ),
+  },
 ];
 
 export default function HowItWorks() {
   return (
     <section className="relative flex flex-col items-center p-page pb-14 bg-background text-foreground">
-      <h1 className="text-4xl font-semibold my-14 text-primary dark:text-front">How it works</h1>
+      <h1 className="text-4xl font-semibold my-14 text-primary dark:text-front">
+        How it works
+      </h1>
       <div className="flex flex-col md:flex-row md:flex-wrap justify-center items-center md:justify-between md:items-start gap-y-12 px-5 md:px-10 md:relative z-1">
         {items.map((item, key) => (
           <HowItWorksCard key={key} title={item.title} content={item.content} />
@@ -80,11 +111,19 @@ export default function HowItWorks() {
   );
 }
 
-function HowItWorksCard({ title, content }: { title: string; content: ReactNode }) {
+function HowItWorksCard({
+  title,
+  content,
+}: {
+  title: string;
+  content: ReactNode;
+}) {
   return (
     <Card className="w-full h-fit md:h-[640px] lg:h-[480px] xl:h-[400px] 2xl:h-[334px] md:w-[calc(50%_-_1.25rem)] border-border rounded-xl overflow-hidden">
       <CardHeader>
-        <CardTitle className="text-base md:text-3xl dark:text-primary font-semibold">{title}</CardTitle>
+        <CardTitle className="text-base md:text-3xl dark:text-primary font-semibold">
+          {title}
+        </CardTitle>
       </CardHeader>
       <CardContent>
         <p className="text-xs md:text-lg mt-2 text-foreground">{content}</p>
diff --git a/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareDialog.tsx b/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareDialog.tsx
index e32ec38a5..40c15be65 100644
--- a/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareDialog.tsx
+++ b/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareDialog.tsx
@@ -37,7 +37,7 @@ export type MacroQueriesCompareDialogProps = {
 };
 
 export default function MacroQueriesCompareDialog<MacroQueriesPlan, TValue>(
-  props: MacroQueriesCompareDialogProps
+  props: MacroQueriesCompareDialogProps,
 ) {
   const { data } = props;
 
diff --git a/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareHero.tsx b/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareHero.tsx
index 6e2373f0f..cc7f1238c 100644
--- a/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareHero.tsx
+++ b/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareHero.tsx
@@ -23,7 +23,7 @@ export type MacroQueriesCompareHeroProps = {
 };
 
 export default function MacroQueriesCompareHero(
-  props: MacroQueriesCompareHeroProps
+  props: MacroQueriesCompareHeroProps,
 ) {
   const { oldGitRef, newGitRef } = props.commits;
   const heroProps: HeroProps = {
diff --git a/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareTable.tsx b/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareTable.tsx
index ca9042d44..173b6bc3c 100644
--- a/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareTable.tsx
+++ b/website/src/pages/MacroQueriesComparePage/components/MacroQueriesCompareTable.tsx
@@ -62,7 +62,7 @@ export function MacroQueriesCompareTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -106,7 +106,7 @@ export function MacroQueriesCompareTable<TData, TValue>({
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </TableHead>
                   );
@@ -127,7 +127,7 @@ export function MacroQueriesCompareTable<TData, TValue>({
                         <TableCell key={cell.id}>
                           {flexRender(
                             cell.column.columnDef.cell,
-                            cell.getContext()
+                            cell.getContext(),
                           )}
                         </TableCell>
                       ))}
diff --git a/website/src/pages/PRPage/PRPage.tsx b/website/src/pages/PRPage/PRPage.tsx
index f44526af0..a279aa620 100644
--- a/website/src/pages/PRPage/PRPage.tsx
+++ b/website/src/pages/PRPage/PRPage.tsx
@@ -101,7 +101,7 @@ export default function PRPage() {
                       <p>
                         {format(
                           prData?.CreatedAt,
-                          "MMM d, yyyy, h:mm a 'GMT'XXX"
+                          "MMM d, yyyy, h:mm a 'GMT'XXX",
                         )}
                       </p>
                     </TooltipContent>
diff --git a/website/src/pages/PRsPage/components/PRHero.tsx b/website/src/pages/PRsPage/components/PRHero.tsx
index 89a4f3e56..19bd4d98b 100644
--- a/website/src/pages/PRsPage/components/PRHero.tsx
+++ b/website/src/pages/PRsPage/components/PRHero.tsx
@@ -20,8 +20,12 @@ const heroProps: HeroProps = {
   description: (
     <>
       If a given Pull Request on vitessio/vitess is labelled with the
-      <span className="bg-red-800 text-white px-2 py-1 rounded-2xl ml-2">Benchmark Me</span> label
-      the Pull Request will be handled and benchmarked by arewefastyet. For each commit on the Pull Request there will be two benchmarks: one on the Pull Request's HEAD and another on the base of the Pull Request.
+      <span className="bg-red-800 text-white px-2 py-1 rounded-2xl ml-2">
+        Benchmark Me
+      </span>{" "}
+      label the Pull Request will be handled and benchmarked by arewefastyet.
+      For each commit on the Pull Request there will be two benchmarks: one on
+      the Pull Request's HEAD and another on the base of the Pull Request.
       <br />
       <br />
       On this page you can find all benchmarked Pull Requests.
@@ -30,7 +34,5 @@ const heroProps: HeroProps = {
 };
 
 export default function PRHero() {
-  return (
-    <Hero title={heroProps.title} description={heroProps.description} />
-  );
+  return <Hero title={heroProps.title} description={heroProps.description} />;
 }
diff --git a/website/src/pages/PRsPage/components/PRTable.tsx b/website/src/pages/PRsPage/components/PRTable.tsx
index 835e70556..d4cee613d 100644
--- a/website/src/pages/PRsPage/components/PRTable.tsx
+++ b/website/src/pages/PRsPage/components/PRTable.tsx
@@ -53,7 +53,7 @@ export default function PRTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -97,7 +97,7 @@ export default function PRTable<TData, TValue>({
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </TableHead>
                   );
@@ -117,7 +117,7 @@ export default function PRTable<TData, TValue>({
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </TableCell>
                   ))}
diff --git a/website/src/pages/StatusPage/components/ExecutionQueue/ExecutionTable.tsx b/website/src/pages/StatusPage/components/ExecutionQueue/ExecutionTable.tsx
index 72f210f35..d1934c1f5 100644
--- a/website/src/pages/StatusPage/components/ExecutionQueue/ExecutionTable.tsx
+++ b/website/src/pages/StatusPage/components/ExecutionQueue/ExecutionTable.tsx
@@ -51,15 +51,15 @@ interface DataTableProps<ExecutionQueueType, TValue> {
 export function ExecutionQueueTable<ExecutionQueueType, TValue>({
   columns,
   data,
-  filterConfigs
+  filterConfigs,
 }: DataTableProps<ExecutionQueueType, TValue>) {
-  const [rowSelection, setRowSelection] = React.useState({})
+  const [rowSelection, setRowSelection] = React.useState({});
   const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
+    React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [sorting, setSorting] = React.useState<SortingState>([])
+    [],
+  );
+  const [sorting, setSorting] = React.useState<SortingState>([]);
 
   const table = useReactTable({
     data,
@@ -85,7 +85,7 @@ export function ExecutionQueueTable<ExecutionQueueType, TValue>({
 
   return (
     <div>
-      <DataTableToolbar table={table} filterConfigs={filterConfigs}/>
+      <DataTableToolbar table={table} filterConfigs={filterConfigs} />
       <div className="rounded-md border-border border">
         <Table>
           <TableHeader>
@@ -93,12 +93,15 @@ export function ExecutionQueueTable<ExecutionQueueType, TValue>({
               <TableRow key={headerGroup.id} className="border-border">
                 {headerGroup.headers.map((header) => {
                   return (
-                    <TableHead key={header.id} className="text-center font-semibold text-foreground">
+                    <TableHead
+                      key={header.id}
+                      className="text-center font-semibold text-foreground"
+                    >
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </TableHead>
                   );
@@ -118,7 +121,7 @@ export function ExecutionQueueTable<ExecutionQueueType, TValue>({
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </TableCell>
                   ))}
diff --git a/website/src/pages/StatusPage/components/PreviousExecutions/ExecutionTable.tsx b/website/src/pages/StatusPage/components/PreviousExecutions/ExecutionTable.tsx
index 9f1217b44..ee2b2ae77 100644
--- a/website/src/pages/StatusPage/components/PreviousExecutions/ExecutionTable.tsx
+++ b/website/src/pages/StatusPage/components/PreviousExecutions/ExecutionTable.tsx
@@ -52,13 +52,13 @@ interface DataTableProps<TData, TValue> {
 export function PreviousExecutionQueueTable<TData, TValue>({
   columns,
   data,
-  filterConfigs
+  filterConfigs,
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = React.useState({});
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -86,7 +86,7 @@ export function PreviousExecutionQueueTable<TData, TValue>({
 
   return (
     <div>
-      <DataTableToolbar table={table} filterConfigs={filterConfigs}/>
+      <DataTableToolbar table={table} filterConfigs={filterConfigs} />
       <div className="rounded-md border-border border">
         <Table>
           <TableHeader>
@@ -102,7 +102,7 @@ export function PreviousExecutionQueueTable<TData, TValue>({
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext()
+                            header.getContext(),
                           )}
                     </TableHead>
                   );
@@ -122,7 +122,7 @@ export function PreviousExecutionQueueTable<TData, TValue>({
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </TableCell>
                   ))}
diff --git a/website/src/utils/Utils.tsx b/website/src/utils/Utils.tsx
index 5cf9fdcf3..6d5d06091 100644
--- a/website/src/utils/Utils.tsx
+++ b/website/src/utils/Utils.tsx
@@ -61,7 +61,7 @@ export function formatGitRef(gitRef: string): string {
 }
 
 export function formatCompareData(
-  data: CompareData[]
+  data: CompareData[],
 ): MacroBenchmarkTableData[] {
   return (
     data.map((data: CompareData) => {
@@ -179,7 +179,7 @@ export function formatCompareData(
 }
 
 export function formatCompareResult(
-  data: CompareResult
+  data: CompareResult,
 ): MacroBenchmarkTableData {
   return {
     qpsTotal: {