diff --git a/packages/react/src/components/about/ContactList.tsx b/packages/react/src/components/about/ContactList.tsx
index fd3511135..36b8ddf4c 100644
--- a/packages/react/src/components/about/ContactList.tsx
+++ b/packages/react/src/components/about/ContactList.tsx
@@ -3,10 +3,10 @@ import { AboutHeading } from "@/components/about/Heading";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-export function ContactList () {
+export function ContactList() {
   const { t } = useTranslation();
 
-	return (
+  return (
     <div>
       <AboutHeading>{t("about.contact.discord")}</AboutHeading>
       <Link to="https://discord.gg/A24AbzgvRJ" target="_blank">
@@ -41,4 +41,4 @@ export function ContactList () {
       <AboutFaqEmailForm />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/components/about/Description.tsx b/packages/react/src/components/about/Description.tsx
index 6a1e1fd02..6b3381d58 100644
--- a/packages/react/src/components/about/Description.tsx
+++ b/packages/react/src/components/about/Description.tsx
@@ -1,9 +1,16 @@
 import { cn } from "@/lib/utils";
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 
-export function AboutDescription (props: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) {
-
-	return (
-		<p {...props} className={cn('mt-2 leading-8 tracking-wide', props.className)} />
-	)
-}
\ No newline at end of file
+export function AboutDescription(
+  props: DetailedHTMLProps<
+    HTMLAttributes<HTMLParagraphElement>,
+    HTMLParagraphElement
+  >,
+) {
+  return (
+    <p
+      {...props}
+      className={cn("mt-2 leading-8 tracking-wide", props.className)}
+    />
+  );
+}
diff --git a/packages/react/src/components/about/Heading.tsx b/packages/react/src/components/about/Heading.tsx
index 61aae6217..60248bf16 100644
--- a/packages/react/src/components/about/Heading.tsx
+++ b/packages/react/src/components/about/Heading.tsx
@@ -1,9 +1,19 @@
 import { cn } from "@/lib/utils";
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 
-export function AboutHeading (props: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
-
-	return (
-		<h3 {...props} className={cn('text-2xl font-bold tracking-wide mt-3 mb-2', props.className)} />
-	)
-}
\ No newline at end of file
+export function AboutHeading(
+  props: DetailedHTMLProps<
+    HTMLAttributes<HTMLHeadingElement>,
+    HTMLHeadingElement
+  >,
+) {
+  return (
+    <h3
+      {...props}
+      className={cn(
+        "text-2xl font-bold tracking-wide mt-3 mb-2",
+        props.className,
+      )}
+    />
+  );
+}
diff --git a/packages/react/src/components/about/QuickLink.tsx b/packages/react/src/components/about/QuickLink.tsx
index 5b042922d..8e04c2a00 100644
--- a/packages/react/src/components/about/QuickLink.tsx
+++ b/packages/react/src/components/about/QuickLink.tsx
@@ -17,7 +17,7 @@ export interface QuickLinkProps {
 
 export function QuickLink({ className, icon, label, href }: QuickLinkProps) {
   return (
-    <Button className={className} size='lg' variant='outline' asChild>
+    <Button className={className} size="lg" variant="outline" asChild>
       <Link to={href} target="_blank">
         <div className={icon} />
         {label}
diff --git a/packages/react/src/components/about/request/LanguagePicker.tsx b/packages/react/src/components/about/request/LanguagePicker.tsx
index e0abd953c..ec52bc9e3 100644
--- a/packages/react/src/components/about/request/LanguagePicker.tsx
+++ b/packages/react/src/components/about/request/LanguagePicker.tsx
@@ -73,9 +73,9 @@ export function LanguagePicker<
       defaultValue={field.value}
       {...form.register(name, {
         required: {
-					value: true,
-					message: t('channelRequest.required')
-				},
+          value: true,
+          message: t("channelRequest.required"),
+        },
       })}
     >
       <SelectTrigger>
@@ -83,7 +83,9 @@ export function LanguagePicker<
       </SelectTrigger>
       <SelectContent>
         {languages.map(({ text, value }) => (
-          <SelectItem key={value} value={value}>{text}</SelectItem>
+          <SelectItem key={value} value={value}>
+            {text}
+          </SelectItem>
         ))}
       </SelectContent>
     </Select>
diff --git a/packages/react/src/components/layout/InlayContainer.tsx b/packages/react/src/components/layout/InlayContainer.tsx
index 16f855237..23ce10b1c 100644
--- a/packages/react/src/components/layout/InlayContainer.tsx
+++ b/packages/react/src/components/layout/InlayContainer.tsx
@@ -10,10 +10,10 @@ interface InlayContainerProps {
 export function InlayContainer({ children }: InlayContainerProps) {
   return (
     <div className="flex justify-center gap-4 p-4 md:p-8">
-      <div className="bg-base-3 flex h-fit w-80 shrink-0 flex-col gap-2 rounded-lg px-2 py-4">
+      <div className="flex h-fit w-80 shrink-0 flex-col gap-2 rounded-lg bg-base-3 px-2 py-4">
         {children}
       </div>
-      <div className="bg-base-3 w-full max-w-screen-lg rounded-lg p-2 md:p-4">
+      <div className="w-full max-w-screen-lg rounded-lg bg-base-3 p-2 md:p-4">
         <Suspense fallback={<Loading size="xl" />}>
           <Outlet />
         </Suspense>
@@ -36,9 +36,9 @@ export function InlayContainerTabItem({
   label,
   href,
 }: InlayContainerTabItemProps) {
-	const location = useLocation();
+  const location = useLocation();
 
-	return (
+  return (
     <Button
       asChild
       className="justify-start"
diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
index 83c67d3b6..7f91c850d 100644
--- a/packages/react/src/components/video/VideoCard.tsx
+++ b/packages/react/src/components/video/VideoCard.tsx
@@ -110,12 +110,12 @@ export function VideoCard({
               </div>
               <Link
                 to={`/channel/${channel?.id}`}
-                className="text-base-11 hover:text-base-12 line-clamp-1 text-xs md:text-sm"
+                className="line-clamp-1 text-xs text-base-11 hover:text-base-12 md:text-sm"
               >
                 {channel?.name}
               </Link>
               {status === "live" && (
-                <div className="text-base-11 flex gap-1 text-xs md:text-sm">
+                <div className="flex gap-1 text-xs text-base-11 md:text-sm">
                   <span className="text-red-500">
                     {t("component.videoCard.liveNow")}
                   </span>
@@ -134,7 +134,7 @@ export function VideoCard({
               {(type === "placeholder" || status === "upcoming") &&
                 status !== "live" &&
                 start_scheduled && (
-                  <span className="text-base-11 line-clamp-1 text-xs md:text-sm">
+                  <span className="line-clamp-1 text-xs text-base-11 md:text-sm">
                     {t("time.diff_future_date", {
                       0: dayjs(start_scheduled).fromNow(false),
                       1: dayjs(start_scheduled).format("hh:mm A"),
@@ -142,7 +142,7 @@ export function VideoCard({
                   </span>
                 )}
               {status === "past" && available_at && (
-                <span className="text-base-11 line-clamp-1 text-xs md:text-sm">
+                <span className="line-clamp-1 text-xs text-base-11 md:text-sm">
                   {t("time.distance_past_date", {
                     0: dayjs(available_at).fromNow(false),
                   })}
@@ -239,14 +239,14 @@ export function VideoCard({
                         : undefined
                     }
                   >
-                    <div className="text-base-11 hover:text-base-12 line-clamp-1 text-xs md:text-sm">
+                    <div className="line-clamp-1 text-xs text-base-11 hover:text-base-12 md:text-sm">
                       {channel.name}
                     </div>
                   </Link>
                 )}
                 <div className="flex text-xs md:text-sm">
                   {status === "live" && (
-                    <div className="text-base-11 flex gap-1">
+                    <div className="flex gap-1 text-base-11">
                       <span className="text-red-500">
                         {t("component.videoCard.liveNow")}
                       </span>
diff --git a/packages/react/src/routes/about/changelog.tsx b/packages/react/src/routes/about/changelog.tsx
index c77d77187..a83a0f7ce 100644
--- a/packages/react/src/routes/about/changelog.tsx
+++ b/packages/react/src/routes/about/changelog.tsx
@@ -1,9 +1,8 @@
-
 export default function AboutChangelog() {
-	return (
-      <iframe
-        className="min-h-[70vh] w-full"
-        src="https://holodexnet.github.io/Holodex/CHANGELOG.html"
-      />
+  return (
+    <iframe
+      className="min-h-[70vh] w-full"
+      src="https://holodexnet.github.io/Holodex/CHANGELOG.html"
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/routes/about/general.tsx b/packages/react/src/routes/about/general.tsx
index 65f92dfda..304fb1c3a 100644
--- a/packages/react/src/routes/about/general.tsx
+++ b/packages/react/src/routes/about/general.tsx
@@ -7,58 +7,51 @@ import { useTranslation } from "react-i18next";
 export default function AboutGeneral() {
   const { t } = useTranslation();
 
-  const quickLinks: QuickLinkProps[] = useMemo(() =>([
-    {
-      className: "border-blue-11 text-blue-11",
-      href: "https://twitter.com/holodex",
-      icon: "i-lucide:twitter",
-      label: t("about.quicklink.twitter"),
-    },
-    {
-      className: "border-blue-500 text-blue-500",
-      href: "https://ko-fi.com/holodex",
-      icon: "i-cib:ko-fi",
-      label: t("about.quicklink.ko-fi"),
-    },
-    {
-      className: "border-secondary-11 text-secondary-11",
-      href: "https://github.com/HolodexNet/Holodex",
-      icon: "i-lucide:github",
-      label: t("about.quicklink.github"),
-    },
-    {
-      className: "border-orange-10 text-orange-10",
-      href: "https://docs.holodex.net/docs/holodex/f4e6fa31af431-getting-started",
-      icon: "i-lucide:file-code",
-      label: t("about.quicklink.apiDocs"),
-    },
-    {
-      className: "border-violet-10 text-violet-10",
-      href: "https://discord.gg/A24AbzgvRJ",
-      icon: "i-carbon:logo-discord",
-      label: t("about.discordBtn"),
-    },
-  ]), [t]);
+  const quickLinks: QuickLinkProps[] = useMemo(
+    () => [
+      {
+        className: "border-blue-11 text-blue-11",
+        href: "https://twitter.com/holodex",
+        icon: "i-lucide:twitter",
+        label: t("about.quicklink.twitter"),
+      },
+      {
+        className: "border-blue-500 text-blue-500",
+        href: "https://ko-fi.com/holodex",
+        icon: "i-cib:ko-fi",
+        label: t("about.quicklink.ko-fi"),
+      },
+      {
+        className: "border-secondary-11 text-secondary-11",
+        href: "https://github.com/HolodexNet/Holodex",
+        icon: "i-lucide:github",
+        label: t("about.quicklink.github"),
+      },
+      {
+        className: "border-orange-10 text-orange-10",
+        href: "https://docs.holodex.net/docs/holodex/f4e6fa31af431-getting-started",
+        icon: "i-lucide:file-code",
+        label: t("about.quicklink.apiDocs"),
+      },
+      {
+        className: "border-violet-10 text-violet-10",
+        href: "https://discord.gg/A24AbzgvRJ",
+        icon: "i-carbon:logo-discord",
+        label: t("about.discordBtn"),
+      },
+    ],
+    [t],
+  );
 
   return (
     <article className="w-full">
       <AboutHeading>{t("about.general.summary.title")}</AboutHeading>
-      <AboutDescription>
-        {t("about.general.summary.0")}
-      </AboutDescription>
-      <AboutDescription>
-        {t("about.general.summary.1")}
-      </AboutDescription>
-      <AboutDescription>
-        {t("about.general.summary.2")}
-      </AboutDescription>
+      <AboutDescription>{t("about.general.summary.0")}</AboutDescription>
+      <AboutDescription>{t("about.general.summary.1")}</AboutDescription>
+      <AboutDescription>{t("about.general.summary.2")}</AboutDescription>
       <AboutHeading>{t("about.credits.title")}</AboutHeading>
-      <AboutDescription>
-        {t("about.general.credits.0")}
-      </AboutDescription>
-      <AboutDescription>
-        {t("about.general.credits.1")}
-      </AboutDescription>
+      <AboutDescription>{t("about.general.credits.0")}</AboutDescription>
+      <AboutDescription>{t("about.general.credits.1")}</AboutDescription>
       <ul className="list-inside list-disc pt-1">
         <li>RiceCakes (creator, admin)</li>
         <li>Xrave (admin)</li>
@@ -66,9 +59,7 @@ export default function AboutGeneral() {
         <li>MadeT (designer)</li>
         <li>NeloBlivion (twitch support, editor)</li>
         <li className="opacity-60">
-          <small>
-            {t("about.general.credits.addRequest")}
-          </small>
+          <small>{t("about.general.credits.addRequest")}</small>
         </li>
       </ul>
       <AboutHeading>{t("about.quicklinks")}</AboutHeading>
diff --git a/packages/react/src/routes/about/privacy.tsx b/packages/react/src/routes/about/privacy.tsx
index 3cff57601..986ac6f3b 100644
--- a/packages/react/src/routes/about/privacy.tsx
+++ b/packages/react/src/routes/about/privacy.tsx
@@ -18,27 +18,15 @@ export default function Privacy() {
         })}
       </AboutDescription>
       <AboutHeading>{t("about.privacy.heading.1")}</AboutHeading>
-      <AboutDescription>
-        {t("about.privacy.text.1-1")}
-      </AboutDescription>
-      <AboutDescription>
-        {t("about.privacy.text.1-2")}
-      </AboutDescription>
+      <AboutDescription>{t("about.privacy.text.1-1")}</AboutDescription>
+      <AboutDescription>{t("about.privacy.text.1-2")}</AboutDescription>
       <AboutHeading>{t("about.privacy.heading.2")}</AboutHeading>
-      <AboutDescription>
-        {t("about.privacy.text.2-1")}
-      </AboutDescription>
-      <AboutDescription>
-        {t("about.privacy.text.2-2")}
-      </AboutDescription>
+      <AboutDescription>{t("about.privacy.text.2-1")}</AboutDescription>
+      <AboutDescription>{t("about.privacy.text.2-2")}</AboutDescription>
       <AboutHeading>{t("about.privacy.heading.3")}</AboutHeading>
-      <AboutDescription>
-        {t("about.privacy.text.3-1")}
-      </AboutDescription>
+      <AboutDescription>{t("about.privacy.text.3-1")}</AboutDescription>
       <AboutHeading>{t("about.privacy.heading.4")}</AboutHeading>
-      <AboutDescription>
-        {t("about.privacy.text.4-1")}
-      </AboutDescription>
+      <AboutDescription>{t("about.privacy.text.4-1")}</AboutDescription>
       <AboutHeading>{t("about.privacy.heading.5")}</AboutHeading>
       <AboutDescription>
         {t("about.privacy.text.5-1")}{" "}
diff --git a/packages/react/src/routes/about/request.tsx b/packages/react/src/routes/about/request.tsx
index 9e7e3eb36..d21769b15 100644
--- a/packages/react/src/routes/about/request.tsx
+++ b/packages/react/src/routes/about/request.tsx
@@ -15,7 +15,7 @@ export default function AboutRequest() {
 
   return (
     <div className="flex flex-col gap-2">
-			<AboutHeading>{t('channelRequest.RequestType')}</AboutHeading>
+      <AboutHeading>{t("channelRequest.RequestType")}</AboutHeading>
       <RadioGroup className="flex flex-col gap-2" onValueChange={setType}>
         <RadioGroupItem value="addVtuber" className="sr-only" id="addVtuber" />
         <Label htmlFor="addVtuber">
@@ -46,10 +46,10 @@ export default function AboutRequest() {
           </RequestTypeRadioButton>
         </Label>
       </RadioGroup>
-			{type === 'addVtuber' && <AddVtuberForm />}
-			{type === 'addSubber' && <AddSubberForm />}
-			{type === 'modifyInfo' && <ModifyInfoForm />}
-			{type === 'delete' && <DeleteChannelForm />}
+      {type === "addVtuber" && <AddVtuberForm />}
+      {type === "addSubber" && <AddSubberForm />}
+      {type === "modifyInfo" && <ModifyInfoForm />}
+      {type === "delete" && <DeleteChannelForm />}
     </div>
   );
 }
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index 15ffaba27..615d0ce0a 100644
--- a/packages/react/src/routes/router.tsx
+++ b/packages/react/src/routes/router.tsx
@@ -13,10 +13,10 @@ const AboutGeneral = React.lazy(() => import("./about/general"));
 const AboutChangelog = React.lazy(() => import("./about/changelog"));
 const AboutFaq = React.lazy(() => import("./about/faq"));
 const AboutRequest = React.lazy(() => import("./about/request"));
-const AboutPlaceholder = React.lazy(() => import('./about/placeholder'));
+const AboutPlaceholder = React.lazy(() => import("./about/placeholder"));
 const AboutExtensions = React.lazy(() => import("./about/extensions"));
-const AboutContact = React.lazy(() => import('./about/contact'));
-const AboutPrivacy = React.lazy(() => import('./about/privacy'));
+const AboutContact = React.lazy(() => import("./about/contact"));
+const AboutPrivacy = React.lazy(() => import("./about/privacy"));
 const ChannelsOrg = React.lazy(() => import("./channelsOrg"));
 const Channel = React.lazy(() => import("./channel"));
 const Kitchensink = React.lazy(() => import("@/Kitchensink"));
@@ -108,17 +108,17 @@ const router = createBrowserRouter([
             element: <AboutPlaceholder />,
           },
           {
-            path: 'extensions',
-            element: <AboutExtensions />
+            path: "extensions",
+            element: <AboutExtensions />,
           },
           {
-            path: 'contact',
-            element: <AboutContact />
+            path: "contact",
+            element: <AboutContact />,
           },
           {
-            path: 'privacy',
-            element: <AboutPrivacy />
-          }
+            path: "privacy",
+            element: <AboutPrivacy />,
+          },
         ],
       },
       {
diff --git a/packages/react/src/services/reports.service.ts b/packages/react/src/services/reports.service.ts
index c3fdd5f75..ab65e01b7 100644
--- a/packages/react/src/services/reports.service.ts
+++ b/packages/react/src/services/reports.service.ts
@@ -34,7 +34,7 @@ export function useReportMutation(
       break;
 
     default:
-      throw new Error('Report type is not specified');
+      throw new Error("Report type is not specified");
   }
 
   return useMutation<unknown, Error, HolodexReportBody<typeof type>>({
diff --git a/packages/react/src/services/search.service.ts b/packages/react/src/services/search.service.ts
index a774009a1..c10a790af 100644
--- a/packages/react/src/services/search.service.ts
+++ b/packages/react/src/services/search.service.ts
@@ -10,17 +10,10 @@ interface SearchAutoCompleteParams {
 export function useSearchAutoCompleteMutation() {
   const client = useClient();
 
-  return useMutation<
-    SearchAutoComplete,
-    Error,
-    SearchAutoCompleteParams
-  >({
+  return useMutation<SearchAutoComplete, Error, SearchAutoCompleteParams>({
     mutationFn: async (params) =>
-      (
-        await client.get<SearchAutoComplete>(
-          "/api/v3/search/autocomplete",
-          { params },
-        )
-      ),
+      await client.get<SearchAutoComplete>("/api/v3/search/autocomplete", {
+        params,
+      }),
   });
 }
diff --git a/packages/react/src/shadcn/ui/accordion.tsx b/packages/react/src/shadcn/ui/accordion.tsx
index a9cdae153..f64affedf 100644
--- a/packages/react/src/shadcn/ui/accordion.tsx
+++ b/packages/react/src/shadcn/ui/accordion.tsx
@@ -1,10 +1,10 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -15,8 +15,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b border-b-base-6", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -27,16 +27,16 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-base-11 h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-base-11 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -46,13 +46,13 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
+      className,
     )}
     {...props}
   >
     <div className="pb-4 pt-0">{children}</div>
   </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/packages/react/src/shadcn/ui/alert.tsx b/packages/react/src/shadcn/ui/alert.tsx
index bcf65b2e7..d2463b7c5 100644
--- a/packages/react/src/shadcn/ui/alert.tsx
+++ b/packages/react/src/shadcn/ui/alert.tsx
@@ -1,10 +1,10 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "border-base [&>svg]:text-base-12 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~*]:pl-7",
+  "relative w-full rounded-lg border border-base px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-base-12 [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
@@ -17,8 +17,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -30,8 +30,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -42,8 +42,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -54,7 +54,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/react/src/shadcn/ui/calendar.tsx b/packages/react/src/shadcn/ui/calendar.tsx
index 89a71ad57..58380db86 100644
--- a/packages/react/src/shadcn/ui/calendar.tsx
+++ b/packages/react/src/shadcn/ui/calendar.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "./button.variants"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "./button.variants";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
@@ -25,24 +25,23 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
-        head_cell:
-          "text-base-11 rounded-md w-8 font-normal text-[0.8rem]",
+        head_cell: "text-base-11 rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
         cell: cn(
           "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-base-4",
           props.mode === "range"
             ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+            : "[&:has([aria-selected])]:rounded-md",
         ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
         ),
         day_range_start: "day-range-start",
         day_range_end: "day-range-end",
@@ -62,8 +61,8 @@ function Calendar({
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };
diff --git a/packages/react/src/shadcn/ui/form.tsx b/packages/react/src/shadcn/ui/form.tsx
index cb872460d..11f374c76 100644
--- a/packages/react/src/shadcn/ui/form.tsx
+++ b/packages/react/src/shadcn/ui/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
@@ -8,27 +8,27 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/shadcn/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/shadcn/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -36,21 +36,21 @@ const FormField = <
     <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 fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -59,36 +59,36 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -97,15 +97,16 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -119,15 +120,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -136,19 +137,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-[0.8rem] text-base-11", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+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
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -160,9 +161,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -173,4 +174,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/packages/react/src/shadcn/ui/radio-group.tsx b/packages/react/src/shadcn/ui/radio-group.tsx
index c96414a43..a6cd5e41b 100644
--- a/packages/react/src/shadcn/ui/radio-group.tsx
+++ b/packages/react/src/shadcn/ui/radio-group.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { CheckIcon } from "@radix-ui/react-icons"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -14,9 +14,9 @@ const RadioGroup = React.forwardRef<
       {...props}
       ref={ref}
     />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -27,7 +27,7 @@ const RadioGroupItem = React.forwardRef<
       ref={ref}
       className={cn(
         "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -35,8 +35,8 @@ const RadioGroupItem = React.forwardRef<
         <CheckIcon className="h-3.5 w-3.5 fill-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/packages/react/src/shadcn/ui/select.tsx b/packages/react/src/shadcn/ui/select.tsx
index d1393ad69..0e1925701 100644
--- a/packages/react/src/shadcn/ui/select.tsx
+++ b/packages/react/src/shadcn/ui/select.tsx
@@ -1,14 +1,14 @@
-import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as React from "react";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between rounded-md border border-base bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-base-8 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
       <CaretSortIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -41,7 +41,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-base bg-base 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",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -50,15 +50,15 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
       </SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -69,8 +69,8 @@ const SelectLabel = React.forwardRef<
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -80,7 +80,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-base-4 focus:text-base-12 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -91,8 +91,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -103,8 +103,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-base-6", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -115,4 +115,4 @@ export {
   SelectLabel,
   SelectItem,
   SelectSeparator,
-}
+};
diff --git a/packages/react/src/shadcn/ui/separator.tsx b/packages/react/src/shadcn/ui/separator.tsx
index 53e85ce56..920fca19f 100644
--- a/packages/react/src/shadcn/ui/separator.tsx
+++ b/packages/react/src/shadcn/ui/separator.tsx
@@ -1,7 +1,7 @@
-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 "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -9,7 +9,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -18,12 +18,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-base-6",
         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/packages/react/src/shadcn/ui/textarea.tsx b/packages/react/src/shadcn/ui/textarea.tsx
index a9944a29d..c4a5dd6aa 100644
--- a/packages/react/src/shadcn/ui/textarea.tsx
+++ b/packages/react/src/shadcn/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[60px] w-full rounded-md border border-base bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-base-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primaryA-8 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/packages/react/src/types/reports.d.ts b/packages/react/src/types/reports.d.ts
index f1ac2bca2..ce67b4e9c 100644
--- a/packages/react/src/types/reports.d.ts
+++ b/packages/react/src/types/reports.d.ts
@@ -1,6 +1,6 @@
 type HolodexReportType = "video" | "channel" | "contact";
 
-type HolodexReportBody<T> = T extends "video" | 'contact'
+type HolodexReportBody<T> = T extends "video" | "contact"
   ? DiscordEmbedField[]
   : DiscordRequestBody;
 
diff --git a/packages/react/src/types/search.d.ts b/packages/react/src/types/search.d.ts
index 98e6ca72c..ef2fe8e93 100644
--- a/packages/react/src/types/search.d.ts
+++ b/packages/react/src/types/search.d.ts
@@ -1,11 +1,10 @@
-
 interface SearchAutoComplete {
-	vtuber?: SearchAutoCompleteChannel[]
+  vtuber?: SearchAutoCompleteChannel[];
 }
 
 interface SearchAutoCompleteChannel {
-	id: string;
-	name: string;
-	english_name?: string;
-	org?: string;
-}
\ No newline at end of file
+  id: string;
+  name: string;
+  english_name?: string;
+  org?: string;
+}
diff --git a/packages/react/src/types/video.d.ts b/packages/react/src/types/video.d.ts
index 515f19347..063fb90b0 100644
--- a/packages/react/src/types/video.d.ts
+++ b/packages/react/src/types/video.d.ts
@@ -88,8 +88,8 @@ enum PLACEHOLDER_TYPES {
 }
 
 enum PLACEHOLDER_CERTAINTY {
-  CERTAIN = 'certain',
-  LIKELY = 'likely'
+  CERTAIN = "certain",
+  LIKELY = "likely",
 }
 
 interface PlaceholderCredit {