diff --git a/packages/app/.prettierrc.json b/packages/app/.prettierrc.json
index f7e7dde5e..ef894e231 100644
--- a/packages/app/.prettierrc.json
+++ b/packages/app/.prettierrc.json
@@ -1,8 +1,16 @@
 {
   "trailingComma": "es5",
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
-  "printWidth": 70, 
-  "bracketSameLine": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css"
 }
diff --git a/packages/app/app/(legal)/data-request/components/createRequest.tsx b/packages/app/app/(legal)/data-request/components/createRequest.tsx
new file mode 100644
index 000000000..b02b5cf95
--- /dev/null
+++ b/packages/app/app/(legal)/data-request/components/createRequest.tsx
@@ -0,0 +1,58 @@
+'use client';
+import { CardContent } from '@/components/ui/card';
+import { useAccount } from 'wagmi';
+import { Button } from '@/components/ui/button';
+import { LuMail } from 'react-icons/lu';
+
+const CreateRequest = () => {
+  const { address } = useAccount();
+
+  const handleEmailClick = () => {
+    const subject = encodeURIComponent('Request for Personal Data');
+    const body = encodeURIComponent(`Dear StreamETH Support,
+
+I would like to request all my personal data saved by StreamETH.
+
+My login address is: ${address || 'Unknown'}
+
+Please provide me with the following information:
+
+[Please specify what personal data you are requesting]
+
+Thank you for your assistance.
+
+Best regards,
+[Your Name]`);
+
+    window.location.href = `mailto:support@streameth.org?subject=${subject}&body=${body}`;
+  };
+
+  return (
+    <CardContent className="space-y-4">
+      <h2 className="text-2xl font-bold">Request Your Personal Data</h2>
+      <p className="text-sm text-gray-600">
+        Please click the button below to email support@streameth.org with your
+        request:
+      </p>
+      <ul className="space-y-2 text-sm list-disc list-inside text-gray-600">
+        <li>
+          Your login address:{' '}
+          <span className="font-mono">{address || 'Not connected'}</span>
+        </li>
+        <li>Specify what personal data you are requesting</li>
+      </ul>
+      <p className="text-sm text-gray-600">
+        We will send an email confirmation that we received your request. We
+        will then follow up with a zip file containing all your personal data
+        saved on StreamETH.
+      </p>
+
+      <Button onClick={handleEmailClick} variant={'primary'} className="w-full">
+        <LuMail size={20} className="mr-2" />
+        Compose Email
+      </Button>
+    </CardContent>
+  );
+};
+
+export default CreateRequest;
diff --git a/packages/app/app/(legal)/data-request/page.tsx b/packages/app/app/(legal)/data-request/page.tsx
new file mode 100644
index 000000000..9fbe0e96f
--- /dev/null
+++ b/packages/app/app/(legal)/data-request/page.tsx
@@ -0,0 +1,38 @@
+'use server';
+
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import AuthorizationMessage from '@/components/authorization/AuthorizationMessage';
+import CheckAuthorization from '@/components/authorization/CheckAuthorization';
+import CreateRequest from './components/createRequest';
+
+const DataRequest = async () => {
+  const year = new Date().getFullYear();
+
+  const isAuthorized = await CheckAuthorization();
+  if (!isAuthorized) {
+    return <AuthorizationMessage />;
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <div className="flex flex-grow justify-center items-center">
+        <Card className="flex flex-col justify-between p-5 my-5 w-full max-w-4xl bg-gray-100">
+          <CardTitle className="mb-6 ml-4">
+            <Image
+              src={'/logo.png'}
+              alt={'StreamETH logo'}
+              width={50}
+              height={50}
+            />
+          </CardTitle>
+          <CreateRequest />
+        </Card>
+      </div>
+      <Footer active={'data_request'} />
+    </div>
+  );
+};
+
+export default DataRequest;
diff --git a/packages/app/app/(legal)/privacy/page.tsx b/packages/app/app/(legal)/privacy/page.tsx
index dde6c4ce3..515f53431 100644
--- a/packages/app/app/(legal)/privacy/page.tsx
+++ b/packages/app/app/(legal)/privacy/page.tsx
@@ -1,16 +1,16 @@
-import { Card, CardTitle, CardFooter } from '@/components/ui/card'
-import { promises as fs } from 'fs'
-import Image from 'next/image'
-import Footer from '@/components/Layout/Footer'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import { promises as fs } from 'fs';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
-const Terms = async () => {
-  const year = new Date().getFullYear()
+const Privacy = async () => {
+  const year = new Date().getFullYear();
   const file = await fs.readFile(
     process.cwd() + '/public/legal/privacy.md',
     'utf8'
-  )
+  );
 
   return (
     <div>
@@ -27,18 +27,17 @@ const Terms = async () => {
             </CardTitle>
             <Markdown
               remarkPlugins={[remarkGfm]}
-              className="prose prose-sm my-5 max-w-full p-4">
+              className="prose prose-sm my-5 max-w-full p-4"
+            >
               {file}
             </Markdown>
           </div>
-          <CardFooter>
-            © {year} StreamETH International B.V.
-          </CardFooter>
+          <CardFooter>© {year} StreamETH International B.V.</CardFooter>
         </Card>
       </div>
       <Footer active={'privacy'} />
     </div>
-  )
-}
+  );
+};
 
-export default Terms
+export default Privacy;
diff --git a/packages/app/app/(legal)/terms/page.tsx b/packages/app/app/(legal)/terms/page.tsx
index 4594a7ccd..1d26d3096 100644
--- a/packages/app/app/(legal)/terms/page.tsx
+++ b/packages/app/app/(legal)/terms/page.tsx
@@ -1,16 +1,16 @@
-import { Card, CardTitle, CardFooter } from '@/components/ui/card'
-import { promises as fs } from 'fs'
-import Image from 'next/image'
-import Footer from '@/components/Layout/Footer'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Card, CardTitle, CardFooter } from '@/components/ui/card';
+import { promises as fs } from 'fs';
+import Image from 'next/image';
+import Footer from '@/components/Layout/Footer';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 const Terms = async () => {
-  const year = new Date().getFullYear()
+  const year = new Date().getFullYear();
   const file = await fs.readFile(
     process.cwd() + '/public/legal/terms.md',
     'utf8'
-  )
+  );
 
   return (
     <div>
@@ -27,18 +27,17 @@ const Terms = async () => {
             </CardTitle>
             <Markdown
               remarkPlugins={[remarkGfm]}
-              className="prose prose-sm my-5 max-w-full p-4">
+              className="prose prose-sm my-5 max-w-full p-4"
+            >
               {file}
             </Markdown>
           </div>
-          <CardFooter>
-            © {year} StreamETH International B.V.
-          </CardFooter>
+          <CardFooter>© {year} StreamETH International B.V.</CardFooter>
         </Card>
       </div>
       <Footer active={'terms'} />
     </div>
-  )
-}
+  );
+};
 
-export default Terms
+export default Terms;
diff --git a/packages/app/app/(vod)/archive/page.tsx b/packages/app/app/(vod)/archive/page.tsx
index 57134e555..cd3816c61 100644
--- a/packages/app/app/(vod)/archive/page.tsx
+++ b/packages/app/app/(vod)/archive/page.tsx
@@ -1,55 +1,50 @@
-import { SearchPageProps } from '@/lib/types'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { fetchEvent } from '@/lib/services/eventService'
-import { redirect } from 'next/navigation'
-import {
-  generalMetadata,
-  archiveMetadata,
-} from '@/lib/utils/metadata'
-import { Metadata } from 'next'
-
-export default async function ArchivePage({
-  searchParams,
-}: SearchPageProps) {
+import { SearchPageProps } from '@/lib/types';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { fetchEvent } from '@/lib/services/eventService';
+import { redirect } from 'next/navigation';
+import { generalMetadata, archiveMetadata } from '@/lib/utils/metadata';
+import { Metadata } from 'next';
+
+export default async function ArchivePage({ searchParams }: SearchPageProps) {
   if (searchParams.organization) {
     const organization = await fetchOrganization({
       organizationSlug: searchParams.organization,
-    })
+    });
 
     if (!organization) {
-      return redirect('/404')
+      return redirect('/404');
     }
 
-    return redirect(`/${organization.slug}/videos`)
+    return redirect(`/${organization.slug}/videos`);
   }
 
   if (searchParams.event) {
     const event = await fetchEvent({
       eventSlug: searchParams.event,
-    })
+    });
 
     const organization = await fetchOrganization({
       organizationId: event?.organizationId as string,
-    })
+    });
 
     if (!event || !organization) {
-      return redirect('/404')
+      return redirect('/404');
     }
 
-    return redirect(`/${organization.slug}/videos`)
+    return redirect(`/${organization.slug}/videos`);
   }
 
-  return <>Page moved</>
+  return <>Page moved</>;
 }
 
 export async function generateMetadata({
   searchParams,
 }: SearchPageProps): Promise<Metadata> {
-  if (!searchParams.event) return generalMetadata
+  if (!searchParams.event) return generalMetadata;
   const event = await fetchEvent({
     eventSlug: searchParams.event,
-  })
+  });
 
-  if (!event) return generalMetadata
-  return archiveMetadata({ event })
+  if (!event) return generalMetadata;
+  return archiveMetadata({ event });
 }
diff --git a/packages/app/app/(vod)/watch/page.tsx b/packages/app/app/(vod)/watch/page.tsx
index 3cb1f09ef..92552fab4 100644
--- a/packages/app/app/(vod)/watch/page.tsx
+++ b/packages/app/app/(vod)/watch/page.tsx
@@ -1,48 +1,41 @@
-import { WatchPageProps } from '@/lib/types'
-import { Metadata } from 'next'
-import { apiUrl } from '@/lib/utils/utils'
-import { notFound } from 'next/navigation'
-import { generalMetadata, watchMetadata } from '@/lib/utils/metadata'
-import { fetchSession } from '@/lib/services/sessionService'
-import { redirect } from 'next/navigation'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
-export default async function Watch({
-  searchParams,
-}: WatchPageProps) {
-  if (!searchParams.session) return notFound()
+import { WatchPageProps } from '@/lib/types';
+import { Metadata } from 'next';
+import { apiUrl } from '@/lib/utils/utils';
+import { notFound } from 'next/navigation';
+import { generalMetadata, watchMetadata } from '@/lib/utils/metadata';
+import { fetchSession } from '@/lib/services/sessionService';
+import { redirect } from 'next/navigation';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
+export default async function Watch({ searchParams }: WatchPageProps) {
+  if (!searchParams.session) return notFound();
   const video = await fetchSession({
     session: searchParams.session,
-  })
+  });
 
-  if (!video) return notFound()
+  if (!video) return notFound();
   const organization = await fetchOrganization({
     organizationId: video.organizationId as string,
-  })
+  });
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
-  redirect(
-    `/${organization.slug}/watch?session=${searchParams.session}`
-  )
-  return 'loading...'
+  redirect(`/${organization.slug}/watch?session=${searchParams.session}`);
+  return 'loading...';
 }
 
 export async function generateMetadata({
   searchParams,
 }: WatchPageProps): Promise<Metadata> {
-  const response = await fetch(
-    `${apiUrl()}/sessions/${searchParams.session}`
-  )
-  const responseData = await response.json()
-  const video = responseData.data
+  const response = await fetch(`${apiUrl()}/sessions/${searchParams.session}`);
+  const responseData = await response.json();
+  const video = responseData.data;
 
-  if (!searchParams.session) return generalMetadata
+  if (!searchParams.session) return generalMetadata;
 
-  if (!video) return generalMetadata
-  const thumbnail =
-    video.coverImage ?? (await generateThumbnailAction(video))
+  if (!video) return generalMetadata;
+  const thumbnail = video.coverImage ?? (await generateThumbnailAction(video));
 
-  return watchMetadata({ session: video, thumbnail })
+  return watchMetadata({ session: video, thumbnail });
 }
diff --git a/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx b/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx
index 1a3d75b02..23d53b203 100644
--- a/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx
+++ b/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx
@@ -1,27 +1,22 @@
-import { Card, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardHeader, CardTitle } from '@/components/ui/card';
 
-import StagePreview from '../stage/components/StagePreview'
-import { AspectRatio } from '@/components/ui/aspect-ratio'
+import StagePreview from '../stage/components/StagePreview';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
 import SpeakerComponent, {
   SpeakerComponentSkeleton,
-} from '../speakers/components/SpeakerComponent'
+} from '../speakers/components/SpeakerComponent';
 import ScheduleComponent, {
   ScheduleSkeleton,
-} from '../schedule/components/ScheduleComponent'
-import Image from 'next/image'
-import { formatDate, isSameDate } from '@/lib/utils/time'
-import { Suspense } from 'react'
-import banner from '@/public/streameth_twitter_banner.jpeg'
-import { IExtendedEvent, IExtendedStage } from '@/lib/types'
-import SignUp from '@/components/plugins/SignUp'
-import MarkdownDisplay from '@/components/misc/MarkdownDisplay'
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/components/ui/tabs'
-import StageComponent from '../stage/components/StageComponent'
+} from '../schedule/components/ScheduleComponent';
+import Image from 'next/image';
+import { formatDate, isSameDate } from '@/lib/utils/time';
+import { Suspense } from 'react';
+import banner from '@/public/streameth_twitter_banner.jpeg';
+import { IExtendedEvent, IExtendedStage } from '@/lib/types';
+import SignUp from '@/components/plugins/SignUp';
+import MarkdownDisplay from '@/components/misc/MarkdownDisplay';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import StageComponent from '../stage/components/StageComponent';
 
 export default function EventHomeComponent({
   event,
@@ -29,32 +24,31 @@ export default function EventHomeComponent({
   params,
   searchParams,
 }: {
-  event: IExtendedEvent
-  stages: IExtendedStage[]
+  event: IExtendedEvent;
+  stages: IExtendedStage[];
 
   params: {
-    organization: string
-  }
+    organization: string;
+  };
   searchParams: {
-    stage?: string
-    date?: string
-    livestream?: string
-  }
+    stage?: string;
+    date?: string;
+    livestream?: string;
+  };
 }) {
   const style = {
     '--colors-accent': event.accentColor,
-  } as React.CSSProperties
-  const bannerImg = event.banner !== '' ? event.banner : banner
+  } as React.CSSProperties;
+  const bannerImg = event.banner !== '' ? event.banner : banner;
   return (
     <div
       className="flex w-full flex-col bg-background px-2"
-      style={{ ...style }}>
+      style={{ ...style }}
+    >
       <div className="relative z-50 mx-auto w-full max-w-full space-y-4 lg:my-4 lg:max-w-5xl">
         {!searchParams.livestream ? (
           <Card className="border bg-white shadow-none lg:rounded-xl">
-            <AspectRatio
-              ratio={3 / 1}
-              className="overflow-clip rounded-xl p-2">
+            <AspectRatio ratio={3 / 1} className="overflow-clip rounded-xl p-2">
               <Image
                 className="h-full rounded-lg object-contain"
                 src={bannerImg!}
@@ -79,10 +73,7 @@ export default function EventHomeComponent({
                 <p>
                   <span className="mr-2">&#128197;</span>
                   {formatDate(new Date(event.start))}
-                  {!isSameDate(
-                    new Date(event.start),
-                    new Date(event.end)
-                  )
+                  {!isSameDate(new Date(event.start), new Date(event.end))
                     ? ` - ${formatDate(new Date(event.end))}`
                     : ''}
                 </p>
@@ -90,10 +81,7 @@ export default function EventHomeComponent({
                   <span className="mr-2">&#9200;</span>
                   <span className="capitalize">
                     {event?.startTime
-                      ? `${event.startTime?.replace(
-                          /\s?[AP]M/g,
-                          ''
-                        )} - ${
+                      ? `${event.startTime?.replace(/\s?[AP]M/g, '')} - ${
                           event.endTime
                             ? event.endTime?.replace(/\s?[AP]M/g, '')
                             : ''
@@ -110,14 +98,12 @@ export default function EventHomeComponent({
             </CardHeader>
           </Card>
         ) : (
-          <StageComponent
-            event={event}
-            stageId={searchParams.livestream}
-          />
+          <StageComponent event={event} stageId={searchParams.livestream} />
         )}
         <Tabs
           defaultValue="schedule"
-          className="rounded-xl border bg-white p-2">
+          className="rounded-xl border bg-white p-2"
+        >
           <TabsList className="w-full justify-start bg-white">
             <TabsTrigger value="about">About</TabsTrigger>
             <TabsTrigger value="livestreams">Livestreams</TabsTrigger>
@@ -159,5 +145,5 @@ export default function EventHomeComponent({
         </Tabs>
       </div>
     </div>
-  )
+  );
 }
diff --git a/packages/app/app/[organization]/[event]/layout.tsx b/packages/app/app/[organization]/[event]/layout.tsx
index 08a08fccc..17763f84d 100644
--- a/packages/app/app/[organization]/[event]/layout.tsx
+++ b/packages/app/app/[organization]/[event]/layout.tsx
@@ -1,49 +1,46 @@
-import { notFound } from 'next/navigation'
-import Navbar from '@/components/Layout/NavbarTop'
-import { fetchNavBarRoutes } from '@/lib/data'
-import { fetchEvent } from '@/lib/services/eventService'
-import HomePageNavbar from '@/components/Layout/HomePageNavbar'
+import { notFound } from 'next/navigation';
+import Navbar from '@/components/Layout/NavbarTop';
+import { fetchNavBarRoutes } from '@/lib/data';
+import { fetchEvent } from '@/lib/services/eventService';
+import HomePageNavbar from '@/components/Layout/HomePageNavbar';
 const Layout = async ({
   children,
   params,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
   params: {
-    organization: string
-    event: string
-  }
+    organization: string;
+    event: string;
+  };
 }) => {
   const navbarRoutes = await fetchNavBarRoutes({
     event: params.event,
     organization: params.organization,
-  })
+  });
   const event = await fetchEvent({
     eventSlug: params.event,
-  })
+  });
 
   if (!event) {
-    return notFound()
+    return notFound();
   }
   const style = {
     '--colors-accent': event.accentColor,
     backgroundColor: event.accentColor,
-  } as React.CSSProperties
+  } as React.CSSProperties;
 
   return (
-    <div
-      className="z-1 flex h-full min-h-screen w-full flex-col"
-      style={style}>
+    <div className="z-1 flex h-full min-h-screen w-full flex-col" style={style}>
       <HomePageNavbar
         logo={event?.logo}
         pages={navbarRoutes.pages}
         showSearchBar={false}
       />
-      <main
-        className={`top-[74px] ml-auto flex w-full flex-grow lg:h-full`}>
+      <main className={`top-[74px] ml-auto flex w-full flex-grow lg:h-full`}>
         {children}
       </main>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/packages/app/app/[organization]/[event]/page.tsx b/packages/app/app/[organization]/[event]/page.tsx
index 669614e49..830b742b4 100644
--- a/packages/app/app/[organization]/[event]/page.tsx
+++ b/packages/app/app/[organization]/[event]/page.tsx
@@ -1,9 +1,9 @@
-import { notFound } from 'next/navigation'
-import { fetchEvent } from '@/lib/services/eventService'
-import { EventPageProps } from '@/lib/types'
-import { ResolvingMetadata, Metadata } from 'next'
-import { redirect } from 'next/navigation'
-import { fetchOrganization } from '@/lib/services/organizationService'
+import { notFound } from 'next/navigation';
+import { fetchEvent } from '@/lib/services/eventService';
+import { EventPageProps } from '@/lib/types';
+import { ResolvingMetadata, Metadata } from 'next';
+import { redirect } from 'next/navigation';
+import { fetchOrganization } from '@/lib/services/organizationService';
 // export async function generateStaticParams() {
 //   const allEvents = await fetchEvents({})
 //   const paths = allEvents.map((event) => ({
@@ -24,13 +24,13 @@ export default async function EventHome({
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return notFound()
+    return notFound();
   } else {
-    redirect(`/${organization.slug}`)
-    return 'loading...'
+    redirect(`/${organization.slug}`);
+    return 'loading...';
   }
 
   // if (!event) return notFound()
@@ -53,18 +53,18 @@ export async function generateMetadata(
   { params }: EventPageProps,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const { event } = params
+  const { event } = params;
   const eventInfo = await fetchEvent({
     eventSlug: event,
-  })
+  });
 
   if (!eventInfo) {
     return {
       title: 'StreamETH Event',
-    }
+    };
   }
 
-  const imageUrl = eventInfo.eventCover
+  const imageUrl = eventInfo.eventCover;
   try {
     return {
       title: eventInfo.name,
@@ -83,11 +83,11 @@ export async function generateMetadata(
           alt: eventInfo.name + ' Logo',
         },
       },
-    }
+    };
   } catch (e) {
-    console.log(e)
+    console.log(e);
     return {
       title: 'StreamETH Event',
-    }
+    };
   }
 }
diff --git a/packages/app/app/[organization]/[event]/schedule/components/DateSelect.tsx b/packages/app/app/[organization]/[event]/schedule/components/DateSelect.tsx
index 9e8509243..6e195dc26 100644
--- a/packages/app/app/[organization]/[event]/schedule/components/DateSelect.tsx
+++ b/packages/app/app/[organization]/[event]/schedule/components/DateSelect.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import {
   Select,
@@ -6,11 +6,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import useSearchParams from '@/lib/hooks/useSearchParams'
+} from '@/components/ui/select';
+import useSearchParams from '@/lib/hooks/useSearchParams';
 
 const DateSelect = ({ dates }: { dates: number[] }) => {
-  const { searchParams, handleTermChange } = useSearchParams()
+  const { searchParams, handleTermChange } = useSearchParams();
 
   return (
     <div className="flex flex-col space-y-2">
@@ -24,7 +24,8 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
               value,
             },
           ])
-        }>
+        }
+      >
         <SelectTrigger className="rounded-lg border bg-white">
           <SelectValue placeholder="Date select" />
         </SelectTrigger>
@@ -37,7 +38,7 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
         </SelectContent>
       </Select>
     </div>
-  )
-}
+  );
+};
 
-export default DateSelect
+export default DateSelect;
diff --git a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCard.tsx b/packages/app/app/[organization]/[event]/schedule/components/ScheduleCard.tsx
index 31e88c957..9fa7c0f4c 100644
--- a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCard.tsx
+++ b/packages/app/app/[organization]/[event]/schedule/components/ScheduleCard.tsx
@@ -1,19 +1,19 @@
-'use client'
-import ScheduleCardModal from './ScheduleCardModal'
-import moment from 'moment-timezone'
-import { getEventTimezoneText } from '@/lib/utils/time'
-import { ClockIcon, WavesIcon } from 'lucide-react'
+'use client';
+import ScheduleCardModal from './ScheduleCardModal';
+import moment from 'moment-timezone';
+import { getEventTimezoneText } from '@/lib/utils/time';
+import { ClockIcon, WavesIcon } from 'lucide-react';
 import {
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
+} from '@/components/ui/card';
 
-import { CredenzaTrigger, Credenza } from '@/components/ui/crezenda'
-import { IExtendedEvent, IExtendedSession } from '@/lib/types'
-import { Button } from '@/components/ui/button'
+import { CredenzaTrigger, Credenza } from '@/components/ui/crezenda';
+import { IExtendedEvent, IExtendedSession } from '@/lib/types';
+import { Button } from '@/components/ui/button';
 
 const ScheduleCard = ({
   event,
@@ -22,15 +22,15 @@ const ScheduleCard = ({
   speakers = false,
   date,
 }: {
-  event: IExtendedEvent
-  session: IExtendedSession
-  showTime?: boolean
-  speakers?: boolean
-  date?: string
+  event: IExtendedEvent;
+  session: IExtendedSession;
+  showTime?: boolean;
+  speakers?: boolean;
+  date?: string;
 }) => {
   const isActive =
     new Date(session.start).getTime() < Date.now() &&
-    new Date(session.end).getTime() > Date.now()
+    new Date(session.end).getTime() > Date.now();
 
   return (
     <Credenza>
@@ -71,7 +71,7 @@ const ScheduleCard = ({
       </CredenzaTrigger>
       {/* <ScheduleCardModal event={event} session={session} /> */}
     </Credenza>
-  )
-}
+  );
+};
 
-export default ScheduleCard
+export default ScheduleCard;
diff --git a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx b/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx
index 28052df08..0f30b3e15 100644
--- a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx
+++ b/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx
@@ -1,8 +1,8 @@
-'use client'
-import { useEffect, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
-import moment from 'moment-timezone'
-import { getEventTimezoneText } from '@/lib/utils/time'
+'use client';
+import { useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import moment from 'moment-timezone';
+import { getEventTimezoneText } from '@/lib/utils/time';
 import {
   CredenzaContent,
   CredenzaDescription,
@@ -10,33 +10,31 @@ import {
   CredenzaHeader,
   CredenzaFooter,
   CredenzaBody,
-} from '@/components/ui/crezenda'
-import SpeakerIcon from '@/components/speakers/speakerIcon'
-import { Button } from '@/components/ui/button'
-import { IExtendedEvent, IExtendedSession } from '@/lib/types'
+} from '@/components/ui/crezenda';
+import SpeakerIcon from '@/components/speakers/speakerIcon';
+import { Button } from '@/components/ui/button';
+import { IExtendedEvent, IExtendedSession } from '@/lib/types';
 
 const ScheduleCardModal = ({
   organizationSlug,
   event,
   session,
 }: {
-  organizationSlug: string
-  event: IExtendedEvent
-  session: IExtendedSession
+  organizationSlug: string;
+  event: IExtendedEvent;
+  session: IExtendedSession;
 }) => {
-  const [showGoToStage, setShowGoToStage] = useState(false)
-  const router = useRouter()
+  const [showGoToStage, setShowGoToStage] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
-    const url = window.location.href
-    setShowGoToStage(!url.includes('/stage'))
-  }, [])
+    const url = window.location.href;
+    setShowGoToStage(!url.includes('/stage'));
+  }, []);
 
   const handleGoToStage = () => {
-    router.push(
-      `/${event.organizationId}/watch?session=${session._id}`
-    )
-  }
+    router.push(`/${event.organizationId}/watch?session=${session._id}`);
+  };
 
   return (
     <CredenzaContent>
@@ -44,9 +42,9 @@ const ScheduleCardModal = ({
         <CredenzaTitle>{session.name}</CredenzaTitle>
         <CredenzaDescription>
           {new Date(session.start).toDateString()}{' '}
-          {moment(session.start).tz(event?.timezone).format('HH:mm')}{' '}
-          - {moment(session.end).tz(event?.timezone).format('HH:mm')}{' '}
-          ({getEventTimezoneText(event?.timezone)})
+          {moment(session.start).tz(event?.timezone).format('HH:mm')} -{' '}
+          {moment(session.end).tz(event?.timezone).format('HH:mm')} (
+          {getEventTimezoneText(event?.timezone)})
         </CredenzaDescription>
       </CredenzaHeader>
       <CredenzaBody>
@@ -65,7 +63,7 @@ const ScheduleCardModal = ({
         </CredenzaFooter>
       )}
     </CredenzaContent>
-  )
-}
+  );
+};
 
-export default ScheduleCardModal
+export default ScheduleCardModal;
diff --git a/packages/app/app/[organization]/[event]/schedule/components/ScheduleComponent.tsx b/packages/app/app/[organization]/[event]/schedule/components/ScheduleComponent.tsx
index 4cf052f19..0da8826f2 100644
--- a/packages/app/app/[organization]/[event]/schedule/components/ScheduleComponent.tsx
+++ b/packages/app/app/[organization]/[event]/schedule/components/ScheduleComponent.tsx
@@ -1,16 +1,11 @@
-import StageSelect from './StageSelect'
-import DateSelect from './DateSelect'
-import SessionList from '@/components/sessions/SessionList'
-import { fetchAllSessions } from '@/lib/data'
-import { getEventDays, getSessionDays } from '@/lib/utils/time'
-import { isSameDay } from '@/lib/utils/time'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { IExtendedEvent, IExtendedStage } from '@/lib/types'
+import StageSelect from './StageSelect';
+import DateSelect from './DateSelect';
+import SessionList from '@/components/sessions/SessionList';
+import { fetchAllSessions } from '@/lib/data';
+import { getEventDays, getSessionDays } from '@/lib/utils/time';
+import { isSameDay } from '@/lib/utils/time';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { IExtendedEvent, IExtendedStage } from '@/lib/types';
 
 const ScheduleComponent = async ({
   stages,
@@ -18,26 +13,26 @@ const ScheduleComponent = async ({
   stage,
   date,
 }: {
-  stages: IExtendedStage[]
-  event: IExtendedEvent
-  stage?: string
-  date?: string
+  stages: IExtendedStage[];
+  event: IExtendedEvent;
+  stage?: string;
+  date?: string;
 }) => {
   const sessionsData = await fetchAllSessions({
     event: event.slug,
     stageId: stage ?? stages[0]?._id,
-  })
+  });
 
-  const dates = getSessionDays(sessionsData.sessions)
+  const dates = getSessionDays(sessionsData.sessions);
   const sessions = sessionsData.sessions.filter((session) => {
     if (date) {
-      if (date === 'all') return true
-      return isSameDay(session.start, Number(date))
+      if (date === 'all') return true;
+      return isSameDay(session.start, Number(date));
     }
-    return isSameDay(session.start, Number(dates[0]))
-  })
+    return isSameDay(session.start, Number(dates[0]));
+  });
 
-  if (!sessionsData.sessions.length) return null
+  if (!sessionsData.sessions.length) return null;
 
   return (
     <Card id="schedule" className="border-none shadow-none">
@@ -47,16 +42,12 @@ const ScheduleComponent = async ({
       </CardHeader>
       <CardContent className="">
         <div className="relative flex w-full flex-col">
-          <SessionList
-            date={date}
-            event={event}
-            sessions={sessions}
-          />
+          <SessionList date={date} event={event} sessions={sessions} />
         </div>
       </CardContent>
     </Card>
-  )
-}
+  );
+};
 
 export const ScheduleSkeleton = () => (
   <div className="animate-pulse border-white border-opacity-[0.04] bg-white bg-opacity-[0.04] text-white shadow lg:rounded-xl">
@@ -74,13 +65,11 @@ export const ScheduleSkeleton = () => (
         {Array(5)
           .fill(0)
           .map((_, index) => (
-            <div
-              key={index}
-              className="h-20 rounded bg-gray-300"></div>
+            <div key={index} className="h-20 rounded bg-gray-300"></div>
           ))}
       </div>
     </div>
   </div>
-)
+);
 
-export default ScheduleComponent
+export default ScheduleComponent;
diff --git a/packages/app/app/[organization]/[event]/schedule/components/StageSelect.tsx b/packages/app/app/[organization]/[event]/schedule/components/StageSelect.tsx
index 26cc31893..59751e273 100644
--- a/packages/app/app/[organization]/[event]/schedule/components/StageSelect.tsx
+++ b/packages/app/app/[organization]/[event]/schedule/components/StageSelect.tsx
@@ -1,17 +1,17 @@
-'use client'
-import { IStageModel } from 'streameth-new-server/src/interfaces/stage.interface'
-import useSearchParams from '@/lib/hooks/useSearchParams'
+'use client';
+import { IStageModel } from 'streameth-new-server/src/interfaces/stage.interface';
+import useSearchParams from '@/lib/hooks/useSearchParams';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import { IExtendedStage } from '@/lib/types'
+} from '@/components/ui/select';
+import { IExtendedStage } from '@/lib/types';
 
 const StageSelect = ({ stages }: { stages: IExtendedStage[] }) => {
-  const { searchParams, handleTermChange } = useSearchParams()
+  const { searchParams, handleTermChange } = useSearchParams();
 
   return (
     <div className="flex flex-col space-y-2">
@@ -25,7 +25,8 @@ const StageSelect = ({ stages }: { stages: IExtendedStage[] }) => {
               value,
             },
           ])
-        }>
+        }
+      >
         <SelectTrigger className="rounded-lg border bg-white">
           <SelectValue placeholder="Stage select" />
         </SelectTrigger>
@@ -38,7 +39,7 @@ const StageSelect = ({ stages }: { stages: IExtendedStage[] }) => {
         </SelectContent>
       </Select>
     </div>
-  )
-}
+  );
+};
 
-export default StageSelect
+export default StageSelect;
diff --git a/packages/app/app/[organization]/[event]/schedule/page.tsx b/packages/app/app/[organization]/[event]/schedule/page.tsx
index 717a484c8..585756dc9 100644
--- a/packages/app/app/[organization]/[event]/schedule/page.tsx
+++ b/packages/app/app/[organization]/[event]/schedule/page.tsx
@@ -1,14 +1,11 @@
-import SchedulePageComponent from './components/ScheduleComponent'
-import type { Metadata, ResolvingMetadata } from 'next'
-import EmbedLayout from '@/components/Layout/EmbedLayout'
-import { fetchEvent } from '@/lib/services/eventService'
-import { EventPageProps } from '@/lib/types'
-import {
-  archiveMetadata,
-  generalMetadata,
-} from '@/lib/utils/metadata'
+import SchedulePageComponent from './components/ScheduleComponent';
+import type { Metadata, ResolvingMetadata } from 'next';
+import EmbedLayout from '@/components/Layout/EmbedLayout';
+import { fetchEvent } from '@/lib/services/eventService';
+import { EventPageProps } from '@/lib/types';
+import { archiveMetadata, generalMetadata } from '@/lib/utils/metadata';
 
-import { fetchEventStages } from '@/lib/services/stageService'
+import { fetchEventStages } from '@/lib/services/stageService';
 
 export default async function SchedulePage({
   params,
@@ -16,14 +13,14 @@ export default async function SchedulePage({
 }: EventPageProps) {
   const event = await fetchEvent({
     eventSlug: params.event,
-  })
+  });
 
   if (!event) {
-    return null
+    return null;
   }
   const stages = await fetchEventStages({
     eventId: params.event,
-  })
+  });
 
   return (
     <EmbedLayout>
@@ -34,23 +31,23 @@ export default async function SchedulePage({
         date={searchParams.date}
       />
     </EmbedLayout>
-  )
+  );
 }
 
 export async function generateMetadata(
   { params }: EventPageProps,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const { event } = params
+  const { event } = params;
   const eventInfo = await fetchEvent({
     eventSlug: event,
-  })
+  });
 
   if (!eventInfo) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   return archiveMetadata({
     event: eventInfo,
-  })
+  });
 }
diff --git a/packages/app/app/[organization]/[event]/speakers/components/SpeakerCard.tsx b/packages/app/app/[organization]/[event]/speakers/components/SpeakerCard.tsx
index 2980f1984..ca7c686fb 100644
--- a/packages/app/app/[organization]/[event]/speakers/components/SpeakerCard.tsx
+++ b/packages/app/app/[organization]/[event]/speakers/components/SpeakerCard.tsx
@@ -1,26 +1,26 @@
-import SpeakerModal from './SpeakerModal'
-import SpeakerPhoto from './SpeakerPhoto'
-import { ISessionModel } from 'streameth-new-server/src/interfaces/session.interface'
-import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface'
+import SpeakerModal from './SpeakerModal';
+import SpeakerPhoto from './SpeakerPhoto';
+import { ISessionModel } from 'streameth-new-server/src/interfaces/session.interface';
+import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface';
 
 import {
   Card,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
+} from '@/components/ui/card';
 
-import { CredenzaTrigger, Credenza } from '@/components/ui/crezenda'
-import { IExtendedEvent, IExtendedSession } from '@/lib/types'
+import { CredenzaTrigger, Credenza } from '@/components/ui/crezenda';
+import { IExtendedEvent, IExtendedSession } from '@/lib/types';
 
 const SpeakerCard = ({
   event,
   speaker,
   sessions,
 }: {
-  event: IExtendedEvent
-  speaker: ISpeakerModel
-  sessions: IExtendedSession[]
+  event: IExtendedEvent;
+  speaker: ISpeakerModel;
+  sessions: IExtendedSession[];
 }) => {
   const speakerSessions = sessions?.filter((session) =>
     session.speakers
@@ -28,7 +28,7 @@ const SpeakerCard = ({
           (sessionSpeaker) => sessionSpeaker?._id === speaker?._id
         )
       : []
-  )
+  );
 
   return (
     <Credenza>
@@ -47,7 +47,7 @@ const SpeakerCard = ({
       </CredenzaTrigger>
       <SpeakerModal speaker={speaker} sessions={speakerSessions} />
     </Credenza>
-  )
-}
+  );
+};
 
-export default SpeakerCard
+export default SpeakerCard;
diff --git a/packages/app/app/[organization]/[event]/speakers/components/SpeakerComponent.tsx b/packages/app/app/[organization]/[event]/speakers/components/SpeakerComponent.tsx
index 2ed29a093..e7f3fd638 100644
--- a/packages/app/app/[organization]/[event]/speakers/components/SpeakerComponent.tsx
+++ b/packages/app/app/[organization]/[event]/speakers/components/SpeakerComponent.tsx
@@ -1,33 +1,25 @@
-import SpeakerCard from './SpeakerCard'
+import SpeakerCard from './SpeakerCard';
 
-import { fetchEventSpeakers, fetchAllSessions } from '@/lib/data'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { IExtendedEvent } from '@/lib/types'
+import { fetchEventSpeakers, fetchAllSessions } from '@/lib/data';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { IExtendedEvent } from '@/lib/types';
 
-const SpeakerComponent = async ({
-  event,
-}: {
-  event: IExtendedEvent
-}) => {
+const SpeakerComponent = async ({ event }: { event: IExtendedEvent }) => {
   const speakers = await fetchEventSpeakers({
     event: event.slug,
-  })
+  });
 
   const sessionsData = await fetchAllSessions({
     event: event.slug,
-  })
+  });
 
-  if (!speakers.length) return null
+  if (!speakers.length) return null;
 
   return (
     <Card
       id="speakers"
-      className="border-white border-opacity-[0.04] bg-white bg-opacity-[0.04] text-white shadow lg:rounded-xl">
+      className="border-white border-opacity-[0.04] bg-white bg-opacity-[0.04] text-white shadow lg:rounded-xl"
+    >
       <CardContent className="grid w-full grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
         {speakers.map((speaker) => (
           <SpeakerCard
@@ -39,12 +31,12 @@ const SpeakerComponent = async ({
         ))}
       </CardContent>
     </Card>
-  )
-}
+  );
+};
 
 export const SpeakerComponentSkeleton = () => {
   // Assuming you want to show a placeholder for 8 speakers as an example
-  const skeletonSpeakers = Array(8).fill(0)
+  const skeletonSpeakers = Array(8).fill(0);
 
   return (
     <div className="animate-pulse border-white border-opacity-[0.04] bg-white bg-opacity-[0.04] text-white shadow lg:rounded-xl">
@@ -57,12 +49,13 @@ export const SpeakerComponentSkeleton = () => {
           {skeletonSpeakers.map((_, index) => (
             <div
               key={index}
-              className="h-56 w-full rounded-lg bg-gray-300"></div>
+              className="h-56 w-full rounded-lg bg-gray-300"
+            ></div>
           ))}
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SpeakerComponent
+export default SpeakerComponent;
diff --git a/packages/app/app/[organization]/[event]/speakers/components/SpeakerModal.tsx b/packages/app/app/[organization]/[event]/speakers/components/SpeakerModal.tsx
index f2b3dd78d..aa1840178 100644
--- a/packages/app/app/[organization]/[event]/speakers/components/SpeakerModal.tsx
+++ b/packages/app/app/[organization]/[event]/speakers/components/SpeakerModal.tsx
@@ -4,14 +4,14 @@ import {
   CredenzaTitle,
   CredenzaHeader,
   CredenzaBody,
-} from '@/components/ui/crezenda'
+} from '@/components/ui/crezenda';
 
-import Link from 'next/link'
-import { IExtendedSpeaker, IExtendedSession } from '@/lib/types'
+import Link from 'next/link';
+import { IExtendedSpeaker, IExtendedSession } from '@/lib/types';
 
 interface Params {
-  speaker: IExtendedSpeaker
-  sessions?: IExtendedSession[]
+  speaker: IExtendedSpeaker;
+  sessions?: IExtendedSession[];
 }
 
 const SpeakerModal = ({ speaker }: Params) => {
@@ -21,9 +21,7 @@ const SpeakerModal = ({ speaker }: Params) => {
         <CredenzaTitle>{speaker?.name}</CredenzaTitle>
         <CredenzaDescription>
           {speaker?.twitter && (
-            <Link
-              target="_blank"
-              href={`https://x.com/${speaker?.twitter}`}>
+            <Link target="_blank" href={`https://x.com/${speaker?.twitter}`}>
               Follow on X
             </Link>
           )}
@@ -31,7 +29,7 @@ const SpeakerModal = ({ speaker }: Params) => {
       </CredenzaHeader>
       <CredenzaBody className="p-4">{speaker?.bio}</CredenzaBody>
     </CredenzaContent>
-  )
-}
+  );
+};
 
-export default SpeakerModal
+export default SpeakerModal;
diff --git a/packages/app/app/[organization]/[event]/speakers/components/SpeakerPhoto.tsx b/packages/app/app/[organization]/[event]/speakers/components/SpeakerPhoto.tsx
index 8879da977..9bbb6b245 100644
--- a/packages/app/app/[organization]/[event]/speakers/components/SpeakerPhoto.tsx
+++ b/packages/app/app/[organization]/[event]/speakers/components/SpeakerPhoto.tsx
@@ -1,35 +1,35 @@
-import Image from 'next/image'
-import makeBlockie from 'ethereum-blockies-base64'
-import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface'
+import Image from 'next/image';
+import makeBlockie from 'ethereum-blockies-base64';
+import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface';
 
 function getFileIdFromUrl(url: string) {
-  const regex = /\/file\/d\/([^\/]+)\//
-  const match = url && url?.match(regex)
+  const regex = /\/file\/d\/([^\/]+)\//;
+  const match = url && url?.match(regex);
   if (match && match[1]) {
-    return `https://drive.google.com/uc?id=${match[1]}`
+    return `https://drive.google.com/uc?id=${match[1]}`;
   }
   // Return the original URL if no match is found
-  return url
+  return url;
 }
 
 function CreateBlockie(username: string) {
-  return makeBlockie(username)
+  return makeBlockie(username);
 }
 
 const SpeakerPhoto = ({
   speaker,
   size,
 }: {
-  speaker: ISpeakerModel
-  size?: 'sm' | 'md' | 'lg'
+  speaker: ISpeakerModel;
+  size?: 'sm' | 'md' | 'lg';
 }) => {
-  let sizeString
+  let sizeString;
   if (size === 'sm') {
-    sizeString = 'h-8 w-8 '
+    sizeString = 'h-8 w-8 ';
   } else if (size === 'md') {
-    sizeString = 'h-12 w-12'
+    sizeString = 'h-12 w-12';
   } else {
-    sizeString = 'w-full aspect-square rounded'
+    sizeString = 'w-full aspect-square rounded';
   }
 
   return (
@@ -47,7 +47,7 @@ const SpeakerPhoto = ({
         style={{ objectFit: 'cover' }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default SpeakerPhoto
+export default SpeakerPhoto;
diff --git a/packages/app/app/[organization]/[event]/speakers/page.tsx b/packages/app/app/[organization]/[event]/speakers/page.tsx
index e2e2d615d..fdab7514e 100644
--- a/packages/app/app/[organization]/[event]/speakers/page.tsx
+++ b/packages/app/app/[organization]/[event]/speakers/page.tsx
@@ -1,21 +1,21 @@
-import SpeakerPageComponent from './components/SpeakerComponent'
-import EmbedLayout from '@/components/Layout/EmbedLayout'
-import { fetchEvent } from '@/lib/services/eventService'
-import { notFound } from 'next/navigation'
-import { EventPageProps } from '@/lib/types'
+import SpeakerPageComponent from './components/SpeakerComponent';
+import EmbedLayout from '@/components/Layout/EmbedLayout';
+import { fetchEvent } from '@/lib/services/eventService';
+import { notFound } from 'next/navigation';
+import { EventPageProps } from '@/lib/types';
 
 const SpeakerPage = async ({ params }: EventPageProps) => {
   const event = await fetchEvent({
     eventId: params.event,
-  })
+  });
 
-  if (!event) return notFound()
+  if (!event) return notFound();
 
   return (
     <EmbedLayout>
       <SpeakerPageComponent event={event} />
     </EmbedLayout>
-  )
-}
+  );
+};
 
-export default SpeakerPage
+export default SpeakerPage;
diff --git a/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx b/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx
index f9e4ee49c..9ad9118d7 100644
--- a/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx
+++ b/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx
@@ -1,52 +1,52 @@
-import Player from '@/components/ui/Player'
-import SessionInfoBox from '@/components/sessions/SessionInfoBox'
-import Chat from '@/components/plugins/Chat'
-import { EventPageProps } from '@/lib/types'
-import { fetchAllSessions } from '@/lib/data'
-import { fetchEvent } from '@/lib/services/eventService'
-import { fetchStage } from '@/lib/services/stageService'
-import UpcomingSession from '../components/UpcomingSession'
-import { notFound } from 'next/navigation'
-import { generalMetadata, stageMetadata } from '@/lib/utils/metadata'
-import { Metadata } from 'next'
-import { fetchChat } from '@/lib/services/chatService'
-import { Livepeer } from 'livepeer'
-import { buildPlaybackUrl } from '@/lib/utils/utils'
+import Player from '@/components/ui/Player';
+import SessionInfoBox from '@/components/sessions/SessionInfoBox';
+import Chat from '@/components/plugins/Chat';
+import { EventPageProps } from '@/lib/types';
+import { fetchAllSessions } from '@/lib/data';
+import { fetchEvent } from '@/lib/services/eventService';
+import { fetchStage } from '@/lib/services/stageService';
+import UpcomingSession from '../components/UpcomingSession';
+import { notFound } from 'next/navigation';
+import { generalMetadata, stageMetadata } from '@/lib/utils/metadata';
+import { Metadata } from 'next';
+import { fetchChat } from '@/lib/services/chatService';
+import { Livepeer } from 'livepeer';
+import { buildPlaybackUrl } from '@/lib/utils/utils';
 
 export default async function Stage({ params }: EventPageProps) {
   if (!params.event || !params.stage) {
-    return notFound()
+    return notFound();
   }
 
   const event = await fetchEvent({
     eventId: params.event,
-  })
+  });
 
   const stage = await fetchStage({
     stage: params.stage,
-  })
+  });
 
   const livepeer = new Livepeer({
     apiKey: process.env.LIVEPEER_API_KEY,
-  })
+  });
 
   if (!event || !stage || !stage?._id) {
-    return notFound()
+    return notFound();
   }
 
-  const prevChatMessages = await fetchChat({ stageId: stage?._id })
+  const prevChatMessages = await fetchChat({ stageId: stage?._id });
   const stream = (
     await livepeer.stream.get(stage.streamSettings?.streamId ?? '')
-  ).stream
+  ).stream;
 
   if (!stream || !stream.playbackId) {
-    return notFound()
+    return notFound();
   }
 
-  const sessionsData = await fetchAllSessions({ stageId: stage._id })
+  const sessionsData = await fetchAllSessions({ stageId: stage._id });
   const currentSession = sessionsData.sessions.find((s) => {
-    return s.start < Date.now() && s.end > Date.now()
-  })
+    return s.start < Date.now() && s.end > Date.now();
+  });
 
   return (
     <div className="relative flex w-full flex-col gap-2 bg-event p-2 md:flex-row lg:max-h-[calc(100vh-54px)]">
@@ -54,9 +54,7 @@ export default async function Stage({ params }: EventPageProps) {
         <Player
           src={[
             {
-              src: buildPlaybackUrl(
-                stream.playbackId
-              ) as `${string}m3u8`,
+              src: buildPlaybackUrl(stream.playbackId) as `${string}m3u8`,
               width: 1920,
               height: 1080,
               mime: 'application/vnd.apple.mpegurl',
@@ -73,40 +71,34 @@ export default async function Stage({ params }: EventPageProps) {
         />
       </div>
       <div className="top-[54px] z-40 flex w-full flex-col gap-2 md:h-full lg:w-2/5">
-        <UpcomingSession
-          event={event}
-          currentSession={currentSession}
-        />
-        <Chat
-          prevChatMessages={prevChatMessages}
-          stageId={stage?._id}
-        />
+        <UpcomingSession event={event} currentSession={currentSession} />
+        <Chat prevChatMessages={prevChatMessages} stageId={stage?._id} />
       </div>
     </div>
-  )
+  );
 }
 
 export async function generateMetadata({
   params,
 }: EventPageProps): Promise<Metadata> {
   if (!params.event || !params.stage) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   const event = await fetchEvent({
     eventId: params.event,
-  })
+  });
 
   const stage = await fetchStage({
     stage: params.stage,
-  })
+  });
 
   if (!event || !stage) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   return stageMetadata({
     event,
     stage,
-  })
+  });
 }
diff --git a/packages/app/app/[organization]/[event]/stage/components/StageComponent.tsx b/packages/app/app/[organization]/[event]/stage/components/StageComponent.tsx
index 2ce55d1c9..2cf5dcd95 100644
--- a/packages/app/app/[organization]/[event]/stage/components/StageComponent.tsx
+++ b/packages/app/app/[organization]/[event]/stage/components/StageComponent.tsx
@@ -1,43 +1,43 @@
-import Player from '@/components/ui/Player'
-import SessionInfoBox from '@/components/sessions/SessionInfoBox'
-import { fetchAllSessions } from '@/lib/data'
-import { fetchStage } from '@/lib/services/stageService'
-import { fetchChat } from '@/lib/services/chatService'
-import { Livepeer } from 'livepeer'
-import { buildPlaybackUrl } from '@/lib/utils/utils'
-import { IExtendedEvent } from '@/lib/types'
+import Player from '@/components/ui/Player';
+import SessionInfoBox from '@/components/sessions/SessionInfoBox';
+import { fetchAllSessions } from '@/lib/data';
+import { fetchStage } from '@/lib/services/stageService';
+import { fetchChat } from '@/lib/services/chatService';
+import { Livepeer } from 'livepeer';
+import { buildPlaybackUrl } from '@/lib/utils/utils';
+import { IExtendedEvent } from '@/lib/types';
 export default async function StageComponent({
   event,
   stageId,
 }: {
-  event: IExtendedEvent
-  stageId: string
+  event: IExtendedEvent;
+  stageId: string;
 }) {
   const stage = await fetchStage({
     stage: stageId,
-  })
+  });
 
   const livepeer = new Livepeer({
     apiKey: process.env.LIVEPEER_API_KEY,
-  })
+  });
 
   if (!stage || !event) {
-    return null
+    return null;
   }
 
-  const prevChatMessages = await fetchChat({ stageId: stage?._id })
+  const prevChatMessages = await fetchChat({ stageId: stage?._id });
   const stream = (
     await livepeer.stream.get(stage.streamSettings?.streamId ?? '')
-  ).stream
+  ).stream;
 
   if (!stream || !stream.playbackId) {
-    return null
+    return null;
   }
 
-  const sessionsData = await fetchAllSessions({ stageId: stage._id })
+  const sessionsData = await fetchAllSessions({ stageId: stage._id });
   const currentSession = sessionsData.sessions.find((s) => {
-    return s.start < Date.now() && s.end > Date.now()
-  })
+    return s.start < Date.now() && s.end > Date.now();
+  });
 
   return (
     <div className="relative flex w-full flex-col gap-2 md:flex-row lg:max-h-[calc(100vh-54px)]">
@@ -45,9 +45,7 @@ export default async function StageComponent({
         <Player
           src={[
             {
-              src: buildPlaybackUrl(
-                stream.playbackId
-              ) as `${string}m3u8`,
+              src: buildPlaybackUrl(stream.playbackId) as `${string}m3u8`,
               width: 1920,
               height: 1080,
               mime: 'application/vnd.apple.mpegurl',
@@ -63,5 +61,5 @@ export default async function StageComponent({
         />
       </div>
     </div>
-  )
+  );
 }
diff --git a/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx b/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx
index 2dfd9f603..20289ae16 100644
--- a/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx
+++ b/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx
@@ -1,21 +1,21 @@
-'use client'
-import { Card, CardHeader } from '@/components/ui/card'
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { IExtendedStage } from '@/lib/types'
+'use client';
+import { Card, CardHeader } from '@/components/ui/card';
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { IExtendedStage } from '@/lib/types';
 
 export default function StagePreview({
   stage,
   eventCover,
 }: {
-  stage: IExtendedStage
-  organization: string
-  event: string
-  eventCover: string | undefined
+  stage: IExtendedStage;
+  organization: string;
+  event: string;
+  eventCover: string | undefined;
 }) {
-  const { handleTermChange } = useSearchParams()
+  const { handleTermChange } = useSearchParams();
 
-  if (!stage?.streamSettings?.streamId) return null
+  if (!stage?.streamSettings?.streamId) return null;
 
   return (
     <Card
@@ -27,11 +27,12 @@ export default function StagePreview({
             value: stage._id as string,
           },
         ])
-      }>
+      }
+    >
       <Thumbnail imageUrl={eventCover} />
       <CardHeader className="bg-transparent">
         <p className="text-lg font-normal lowercase">{stage.name}</p>
       </CardHeader>
     </Card>
-  )
+  );
 }
diff --git a/packages/app/app/[organization]/[event]/stage/components/UpcomingSession.tsx b/packages/app/app/[organization]/[event]/stage/components/UpcomingSession.tsx
index 11bc8cc13..6b54af592 100644
--- a/packages/app/app/[organization]/[event]/stage/components/UpcomingSession.tsx
+++ b/packages/app/app/[organization]/[event]/stage/components/UpcomingSession.tsx
@@ -1,32 +1,31 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { CardTitle } from '@/components/ui/card'
-import ScheduleCard from '../../schedule/components/ScheduleCard'
-import { IExtendedEvent, IExtendedSession } from '@/lib/types'
+'use client';
+import React, { useState, useEffect } from 'react';
+import { CardTitle } from '@/components/ui/card';
+import ScheduleCard from '../../schedule/components/ScheduleCard';
+import { IExtendedEvent, IExtendedSession } from '@/lib/types';
 
 const UpcomingSession = ({
   event,
   currentSession,
 }: {
-  event: IExtendedEvent
-  currentSession?: IExtendedSession
+  event: IExtendedEvent;
+  currentSession?: IExtendedSession;
 }) => {
   // State to control the visibility of the component
-  const [isVisible, setIsVisible] = useState(true)
+  const [isVisible, setIsVisible] = useState(true);
 
-  if (!currentSession) return
+  if (!currentSession) return;
 
   // Early return if the component is not visible
 
   return (
     <div className="relative rounded-lg border border-white border-opacity-10 bg-white bg-opacity-10">
       <div className="10 flex flex-row p-2">
-        <CardTitle className="text-lg text-white">
-          Happening now
-        </CardTitle>
+        <CardTitle className="text-lg text-white">Happening now</CardTitle>
         <button
           className="ml-auto text-white text-opacity-50 hover:text-opacity-100"
-          onClick={() => setIsVisible(!isVisible)}>
+          onClick={() => setIsVisible(!isVisible)}
+        >
           {isVisible ? 'Close' : 'Show'}
         </button>
       </div>
@@ -42,7 +41,7 @@ const UpcomingSession = ({
       )}
       {/* Close button */}
     </div>
-  )
-}
+  );
+};
 
-export default UpcomingSession
+export default UpcomingSession;
diff --git a/packages/app/app/[organization]/components/ChannelBanner.tsx b/packages/app/app/[organization]/components/ChannelBanner.tsx
index 06065805e..e3b6b7ff1 100644
--- a/packages/app/app/[organization]/components/ChannelBanner.tsx
+++ b/packages/app/app/[organization]/components/ChannelBanner.tsx
@@ -1,12 +1,12 @@
-import StreamethLogoWhite from '@/lib/svg/StreamethLogoWhite'
-import { IExtendedOrganization } from '@/lib/types'
-import Image from 'next/image'
-import React from 'react'
+import StreamethLogoWhite from '@/lib/svg/StreamethLogoWhite';
+import { IExtendedOrganization } from '@/lib/types';
+import Image from 'next/image';
+import React from 'react';
 
 const ChannelBanner = ({
   organization,
 }: {
-  organization: IExtendedOrganization
+  organization: IExtendedOrganization;
 }) => {
   return (
     <div className="relative hidden aspect-video h-full max-h-[200px] w-full md:block">
@@ -26,7 +26,7 @@ const ChannelBanner = ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ChannelBanner
+export default ChannelBanner;
diff --git a/packages/app/app/[organization]/components/ChannelDescription.tsx b/packages/app/app/[organization]/components/ChannelDescription.tsx
index 332038722..0fc7c2b50 100644
--- a/packages/app/app/[organization]/components/ChannelDescription.tsx
+++ b/packages/app/app/[organization]/components/ChannelDescription.tsx
@@ -1,35 +1,31 @@
-'use client'
-import React, { useEffect, useRef, useState } from 'react'
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
 
-const ChannelDescription = ({
-  description,
-}: {
-  description?: string
-}) => {
-  const contentRef = useRef<HTMLDivElement>(null)
-  const [isClamped, setClamped] = useState(false)
-  const [isExpanded, setExpanded] = useState(false)
+const ChannelDescription = ({ description }: { description?: string }) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isClamped, setClamped] = useState(false);
+  const [isExpanded, setExpanded] = useState(false);
 
   useEffect(() => {
     function handleResize() {
       if (contentRef && contentRef.current) {
         setClamped(
-          contentRef.current.scrollHeight >
-            contentRef.current.clientHeight
-        )
+          contentRef.current.scrollHeight > contentRef.current.clientHeight
+        );
       }
     }
-    handleResize()
-    window.addEventListener('resize', handleResize)
+    handleResize();
+    window.addEventListener('resize', handleResize);
 
-    return () => window.removeEventListener('resize', handleResize)
-  }, [contentRef])
+    return () => window.removeEventListener('resize', handleResize);
+  }, [contentRef]);
 
   return (
     <div className="hidden w-4/5 md:block">
       <div
         ref={contentRef}
-        className={!isExpanded ? 'line-clamp-2' : 'line-clamp-4'}>
+        className={!isExpanded ? 'line-clamp-2' : 'line-clamp-4'}
+      >
         {' '}
         {description}
       </div>
@@ -38,13 +34,14 @@ const ChannelDescription = ({
         <div className="flex cursor-pointer justify-end text-blue">
           <p
             className="text-title font-semibold"
-            onClick={() => setExpanded(!isExpanded)}>
+            onClick={() => setExpanded(!isExpanded)}
+          >
             {!isExpanded ? 'Read more' : ' Read less'}
           </p>
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ChannelDescription
+export default ChannelDescription;
diff --git a/packages/app/app/[organization]/components/ChannelPlayer.tsx b/packages/app/app/[organization]/components/ChannelPlayer.tsx
index b3a922f46..6c0165a3d 100644
--- a/packages/app/app/[organization]/components/ChannelPlayer.tsx
+++ b/packages/app/app/[organization]/components/ChannelPlayer.tsx
@@ -1,31 +1,31 @@
-import VideoDownload from './VideoDownload'
-import ViewCounts from './ViewCounts'
-import EmbedButton from '@/components/misc/interact/EmbedButton'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import PlayerWithControls from '@/components/ui/Player'
-import { CardTitle } from '@/components/ui/card'
-import Image from 'next/image'
-import React from 'react'
-import ChannelShareIcons from './ChannelShareIcons'
+import VideoDownload from './VideoDownload';
+import ViewCounts from './ViewCounts';
+import EmbedButton from '@/components/misc/interact/EmbedButton';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import PlayerWithControls from '@/components/ui/Player';
+import { CardTitle } from '@/components/ui/card';
+import Image from 'next/image';
+import React from 'react';
+import ChannelShareIcons from './ChannelShareIcons';
 import {
   IExtendedOrganization,
   IExtendedSession,
   IExtendedStage,
-} from '@/lib/types'
+} from '@/lib/types';
 
 const ChannelPlayer = ({
   libraryVideo,
   organization,
   activeStream,
 }: {
-  libraryVideo: IExtendedSession | null
-  organization: IExtendedOrganization
-  activeStream: IExtendedStage
+  libraryVideo: IExtendedSession | null;
+  organization: IExtendedOrganization;
+  activeStream: IExtendedStage;
 }) => {
   const getVideoUrl = () => {
-    if (libraryVideo) return libraryVideo?.videoUrl
-    return `https://livepeercdn.studio/hls/${activeStream.streamSettings?.playbackId}/index.m3u8`
-  }
+    if (libraryVideo) return libraryVideo?.videoUrl;
+    return `https://livepeercdn.studio/hls/${activeStream.streamSettings?.playbackId}/index.m3u8`;
+  };
 
   return (
     <div>
@@ -42,9 +42,7 @@ const ChannelPlayer = ({
       />
 
       <div className="p-4">
-        <CardTitle>
-          {libraryVideo?.name ?? activeStream.name}
-        </CardTitle>
+        <CardTitle>{libraryVideo?.name ?? activeStream.name}</CardTitle>
         <div className="mt-2 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div className="flex items-center gap-3">
             <div>
@@ -74,8 +72,7 @@ const ChannelPlayer = ({
                       className="text-muted-foreground"
                       playbackId={
                         libraryVideo?.playbackId ??
-                        (activeStream?.streamSettings
-                          ?.playbackId as string)
+                        (activeStream?.streamSettings?.playbackId as string)
                       }
                     />
                   ))}
@@ -98,16 +95,14 @@ const ChannelPlayer = ({
               className="bg-white"
             />
             {libraryVideo?.assetId && (
-              <VideoDownload
-                assetId={libraryVideo.assetId as string}
-              />
+              <VideoDownload assetId={libraryVideo.assetId as string} />
             )}
             <ChannelShareIcons organization={organization} />
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ChannelPlayer
+export default ChannelPlayer;
diff --git a/packages/app/app/[organization]/components/ChannelShareIcons.tsx b/packages/app/app/[organization]/components/ChannelShareIcons.tsx
index ee143e726..85c1526f6 100644
--- a/packages/app/app/[organization]/components/ChannelShareIcons.tsx
+++ b/packages/app/app/[organization]/components/ChannelShareIcons.tsx
@@ -1,25 +1,22 @@
-'use client'
+'use client';
 
-import React from 'react'
-import { Globe, Share2 } from 'lucide-react'
-import { Credenza, CredenzaTrigger } from '@/components/ui/crezenda'
-import { ShareModalContent } from '@/components/misc/interact/ShareButton'
-import Link from 'next/link'
-import { IExtendedOrganization } from '@/lib/types'
+import React from 'react';
+import { Globe, Share2 } from 'lucide-react';
+import { Credenza, CredenzaTrigger } from '@/components/ui/crezenda';
+import { ShareModalContent } from '@/components/misc/interact/ShareButton';
+import Link from 'next/link';
+import { IExtendedOrganization } from '@/lib/types';
 
 const ChannelShareIcons = ({
   organization,
 }: {
-  organization: IExtendedOrganization
+  organization: IExtendedOrganization;
 }) => {
   return (
     <div className="mt-auto flex items-center justify-start space-x-4">
       <Credenza>
         <CredenzaTrigger>
-          <Share2
-            className="text-muted-foreground text-white"
-            size={22}
-          />
+          <Share2 className="text-muted-foreground text-white" size={22} />
         </CredenzaTrigger>
         <ShareModalContent shareFor="channel" />
       </Credenza>
@@ -35,14 +32,11 @@ const ChannelShareIcons = ({
 
       {organization?.url && (
         <Link target="_blank" rel="noopener" href={organization?.url}>
-          <Globe
-            className="text-muted-foreground text-white"
-            size={25}
-          />
+          <Globe className="text-muted-foreground text-white" size={25} />
         </Link>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ChannelShareIcons
+export default ChannelShareIcons;
diff --git a/packages/app/app/[organization]/components/ShareVideoMenuItem.tsx b/packages/app/app/[organization]/components/ShareVideoMenuItem.tsx
index 1178cdb2c..35c4bbe04 100644
--- a/packages/app/app/[organization]/components/ShareVideoMenuItem.tsx
+++ b/packages/app/app/[organization]/components/ShareVideoMenuItem.tsx
@@ -1,20 +1,20 @@
-'use client'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import { buttonVariants } from '@/components/ui/button'
-import React, { useEffect, useState } from 'react'
+'use client';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import { buttonVariants } from '@/components/ui/button';
+import React, { useEffect, useState } from 'react';
 
 const ShareVideoMenuItem = ({ url }: { url: string }) => {
-  const [currentUrl, setCurrentUrl] = useState('')
+  const [currentUrl, setCurrentUrl] = useState('');
   useEffect(() => {
     // This code will only run on the client side
-    if (typeof window === 'undefined') return
-    setCurrentUrl(window.location.origin)
-  }, [])
+    if (typeof window === 'undefined') return;
+    setCurrentUrl(window.location.origin);
+  }, []);
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <ShareButton url={`${currentUrl}/${url}`} variant="ghost" />
     </div>
-  )
-}
+  );
+};
 
-export default ShareVideoMenuItem
+export default ShareVideoMenuItem;
diff --git a/packages/app/app/[organization]/components/UpcomingStreams.tsx b/packages/app/app/[organization]/components/UpcomingStreams.tsx
index ca1c0774c..66f38c4b5 100644
--- a/packages/app/app/[organization]/components/UpcomingStreams.tsx
+++ b/packages/app/app/[organization]/components/UpcomingStreams.tsx
@@ -1,32 +1,31 @@
-import { fetchStages } from '@/lib/services/stageService'
-import LivestreamCard from '@/components/misc/VideoCard/LivestreamCard'
-import React from 'react'
-import { VideoCardSkeletonMobile } from '@/components/misc/VideoCard/VideoCardSkeleton'
-import { Podcast } from 'lucide-react'
+import { fetchStages } from '@/lib/services/stageService';
+import LivestreamCard from '@/components/misc/VideoCard/LivestreamCard';
+import React from 'react';
+import { VideoCardSkeletonMobile } from '@/components/misc/VideoCard/VideoCardSkeleton';
+import { Podcast } from 'lucide-react';
 
 const UpcomingStreams = async ({
   organizationId,
   organizationSlug,
   currentStreamId,
 }: {
-  organizationId: string
-  organizationSlug: string
-  currentStreamId: string
+  organizationId: string;
+  organizationSlug: string;
+  currentStreamId: string;
 }) => {
   let livestreams = await fetchStages({
     organizationId,
-  })
+  });
 
   livestreams = livestreams.filter((livestream) => {
     // filter by streams in the future or happening today
-    return livestream._id !== currentStreamId
-  })
+    return livestream._id !== currentStreamId;
+  });
 
   livestreams = livestreams.filter((livestream) => {
-    return livestream.published
-  })
-  const org =
-    organizationSlug === 'livepeertv' ? 'tv' : organizationSlug
+    return livestream.published;
+  });
+  const org = organizationSlug === 'livepeertv' ? 'tv' : organizationSlug;
 
   return (
     <>
@@ -53,10 +52,10 @@ const UpcomingStreams = async ({
         </div>
       )}
     </>
-  )
-}
+  );
+};
 
-export default UpcomingStreams
+export default UpcomingStreams;
 
 export const UpcomingStreamsLoading = () => (
   <>
@@ -69,4 +68,4 @@ export const UpcomingStreamsLoading = () => (
       ))}
     </div>
   </>
-)
+);
diff --git a/packages/app/app/[organization]/components/VideoDownload.tsx b/packages/app/app/[organization]/components/VideoDownload.tsx
index 1b77cc5cd..eae255191 100644
--- a/packages/app/app/[organization]/components/VideoDownload.tsx
+++ b/packages/app/app/[organization]/components/VideoDownload.tsx
@@ -1,30 +1,31 @@
-import { Livepeer } from 'livepeer'
-import { ArrowDownToLine, Download } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { Livepeer } from 'livepeer';
+import { ArrowDownToLine, Download } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 
 const VideoDownload = async ({ assetId }: { assetId: string }) => {
   const livepeer = new Livepeer({
     apiKey: process.env.LIVEPEER_API_KEY,
-  })
+  });
 
-  if (!assetId) return null
+  if (!assetId) return null;
 
-  const asset = (await livepeer.asset.get(assetId)).asset
+  const asset = (await livepeer.asset.get(assetId)).asset;
 
-  if (!asset) return null
+  if (!asset) return null;
 
   return (
     <a
       href={asset.downloadUrl}
       download={asset.name}
       target="_blank"
-      className="flex items-center justify-center">
+      className="flex items-center justify-center"
+    >
       <Button className="bg-white" variant="outline">
         <Download size={24} className="cursor-pointer p-1" />
         Download
       </Button>
     </a>
-  )
-}
+  );
+};
 
-export default VideoDownload
+export default VideoDownload;
diff --git a/packages/app/app/[organization]/components/ViewCounts.tsx b/packages/app/app/[organization]/components/ViewCounts.tsx
index af98f2813..c97c598d8 100644
--- a/packages/app/app/[organization]/components/ViewCounts.tsx
+++ b/packages/app/app/[organization]/components/ViewCounts.tsx
@@ -1,19 +1,19 @@
-import { fetchSessionMetrics } from '@/lib/services/sessionService'
+import { fetchSessionMetrics } from '@/lib/services/sessionService';
 
 const ViewCounts = async ({
   playbackId,
   className,
 }: {
-  playbackId: string
-  className?: string
+  playbackId: string;
+  className?: string;
 }) => {
-  const data = await fetchSessionMetrics({ playbackId })
+  const data = await fetchSessionMetrics({ playbackId });
 
   return (
     <p className={className ?? 'text-secodary py-2 text-sm'}>
       {data.viewCount} views
     </p>
-  )
-}
+  );
+};
 
-export default ViewCounts
+export default ViewCounts;
diff --git a/packages/app/app/[organization]/components/WatchGrid.tsx b/packages/app/app/[organization]/components/WatchGrid.tsx
index f4d8ad11a..511679f72 100644
--- a/packages/app/app/[organization]/components/WatchGrid.tsx
+++ b/packages/app/app/[organization]/components/WatchGrid.tsx
@@ -1,15 +1,15 @@
-import { fetchAllSessions } from '@/lib/data'
-import Link from 'next/link'
-import VideoCardSkeleton from '@/components/misc/VideoCard/VideoCardSkeleton'
-import Videos from '@/components/misc/Videos'
-import { Video } from 'lucide-react'
+import { fetchAllSessions } from '@/lib/data';
+import Link from 'next/link';
+import VideoCardSkeleton from '@/components/misc/VideoCard/VideoCardSkeleton';
+import Videos from '@/components/misc/Videos';
+import { Video } from 'lucide-react';
 
 const WatchGrid = async ({
   organizationSlug,
   gridLength = 4,
 }: {
-  organizationSlug: string
-  gridLength?: number
+  organizationSlug: string;
+  gridLength?: number;
 }) => {
   const videos = (
     await fetchAllSessions({
@@ -18,7 +18,7 @@ const WatchGrid = async ({
       published: true,
       limit: gridLength,
     })
-  ).sessions
+  ).sessions;
 
   return (
     <div className="w-full">
@@ -26,9 +26,7 @@ const WatchGrid = async ({
         <h1 className="text-xl font-bold">Watch More</h1>
         <Link href={`/${organizationSlug}/videos`}>
           {videos.length !== 0 && (
-            <h3 className="text-sm hover:underline">
-              See more videos
-            </h3>
+            <h3 className="text-sm hover:underline">See more videos</h3>
           )}
         </Link>
       </div>
@@ -44,8 +42,8 @@ const WatchGrid = async ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
 export const WatchGridLoading = () => (
   <>
@@ -59,6 +57,6 @@ export const WatchGridLoading = () => (
       ))}
     </div>
   </>
-)
+);
 
-export default WatchGrid
+export default WatchGrid;
diff --git a/packages/app/app/[organization]/layout.tsx b/packages/app/app/[organization]/layout.tsx
index dadbbc800..35005cca1 100644
--- a/packages/app/app/[organization]/layout.tsx
+++ b/packages/app/app/[organization]/layout.tsx
@@ -1,19 +1,19 @@
-'use server'
+'use server';
 
-import HomePageNavbar from '@/components/Layout/HomePageNavbar'
-import Footer from '@/components/Layout/Footer'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import NotFound from '@/not-found'
-import Support from '@/components/misc/Support'
+import HomePageNavbar from '@/components/Layout/HomePageNavbar';
+import Footer from '@/components/Layout/Footer';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import NotFound from '@/not-found';
+import Support from '@/components/misc/Support';
 
 const Layout = async ({
   params,
   children,
 }: {
-  params: { organization: string }
-  children: React.ReactNode
+  params: { organization: string };
+  children: React.ReactNode;
 }) => {
-  const org = params.organization
+  const org = params.organization;
   const pages = [
     {
       name: 'Home',
@@ -25,14 +25,14 @@ const Layout = async ({
       href: `/${org}/videos`,
       bgColor: 'bg-muted',
     },
-  ]
+  ];
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return NotFound()
+    return NotFound();
   }
 
   return (
@@ -51,7 +51,7 @@ const Layout = async ({
         <Footer />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/packages/app/app/[organization]/livestream/components/ArchiveVideosSkeleton.tsx b/packages/app/app/[organization]/livestream/components/ArchiveVideosSkeleton.tsx
index 32107c94d..58a633fce 100644
--- a/packages/app/app/[organization]/livestream/components/ArchiveVideosSkeleton.tsx
+++ b/packages/app/app/[organization]/livestream/components/ArchiveVideosSkeleton.tsx
@@ -1,8 +1,4 @@
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-} from '@/components/ui/card'
+import { Card, CardDescription, CardHeader } from '@/components/ui/card';
 
 const ArchiveVideoSkeleton = () => {
   return (
@@ -21,7 +17,7 @@ const ArchiveVideoSkeleton = () => {
         </Card>
       ))}
     </div>
-  )
-}
+  );
+};
 
-export default ArchiveVideoSkeleton
+export default ArchiveVideoSkeleton;
diff --git a/packages/app/app/[organization]/livestream/components/CalendarReminder.tsx b/packages/app/app/[organization]/livestream/components/CalendarReminder.tsx
index 8ab7601a2..697e74340 100644
--- a/packages/app/app/[organization]/livestream/components/CalendarReminder.tsx
+++ b/packages/app/app/[organization]/livestream/components/CalendarReminder.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
 
-import { Button } from '@/components/ui/button'
-import generateGoogleCalendar from '@/lib/utils/generateGoogleCalendar'
-import { CalendarPlus } from 'lucide-react'
+import { Button } from '@/components/ui/button';
+import generateGoogleCalendar from '@/lib/utils/generateGoogleCalendar';
+import { CalendarPlus } from 'lucide-react';
 
 const CalendarReminder = ({
   eventName,
@@ -10,10 +10,10 @@ const CalendarReminder = ({
   start,
   end,
 }: {
-  eventName: string
-  description: string
-  start: string
-  end: string
+  eventName: string;
+  description: string;
+  start: string;
+  end: string;
 }) => {
   const handleAddToCalendar = () => {
     const url = generateGoogleCalendar({
@@ -21,28 +21,27 @@ const CalendarReminder = ({
       description,
       start: new Date(start),
       end: new Date(end),
-    })
+    });
 
-    window.open(url, '_blank', 'noopener,noreferrer')
-  }
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
 
   return (
     <>
       <Button
         className="hidden space-x-2 md:flex"
         variant={'outline'}
-        onClick={handleAddToCalendar}>
+        onClick={handleAddToCalendar}
+      >
         <CalendarPlus size={20} />
         <span>Add to Google Calendar</span>
       </Button>
-      <Button
-        className="space-x-2 md:hidden"
-        onClick={handleAddToCalendar}>
+      <Button className="space-x-2 md:hidden" onClick={handleAddToCalendar}>
         <CalendarPlus size={20} />
         <span>Add to Google Calendar</span>
       </Button>
     </>
-  )
-}
+  );
+};
 
-export default CalendarReminder
+export default CalendarReminder;
diff --git a/packages/app/app/[organization]/livestream/components/Counter.tsx b/packages/app/app/[organization]/livestream/components/Counter.tsx
index b0ea8f41d..103e189c8 100644
--- a/packages/app/app/[organization]/livestream/components/Counter.tsx
+++ b/packages/app/app/[organization]/livestream/components/Counter.tsx
@@ -1,42 +1,36 @@
-'use client'
+'use client';
 
-import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
-const CounterBox = ({
-  number,
-  lable,
-}: {
-  number: number
-  lable: string
-}) => {
+const CounterBox = ({ number, lable }: { number: number; lable: string }) => {
   return (
     <div className="flex flex-col items-center justify-between rounded-lg bg-white bg-opacity-70 p-1 text-black md:p-2">
       <div className="text-sm font-black md:text-4xl">{number}</div>
       <div className="text-xs md:text-xl">{lable}</div>
     </div>
-  )
-}
+  );
+};
 
 const Counter = ({
   timeToStart,
 }: {
-  timeToStart: number // time in milliseconds
+  timeToStart: number; // time in milliseconds
 }) => {
-  const router = useRouter()
-  const [time, setTime] = useState(timeToStart / 1000)
+  const router = useRouter();
+  const [time, setTime] = useState(timeToStart / 1000);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setTime(time - 1)
-    }, 1000)
+      setTime(time - 1);
+    }, 1000);
 
     if (time < 0) {
-      router.refresh()
+      router.refresh();
     }
 
-    return () => clearInterval(interval)
-  }, [time])
+    return () => clearInterval(interval);
+  }, [time]);
 
   return (
     <div className="m-2 flex flex-col items-center justify-between backdrop-blur-sm backdrop-brightness-50 md:m-4 md:p-0 md:backdrop-brightness-100">
@@ -45,29 +39,20 @@ const Counter = ({
           Stream will start in
         </p>
         <div className="m-2 flex flex-wrap items-center justify-center space-x-2 md:space-y-0">
-          <CounterBox
-            lable="days"
-            number={Math.floor(time / 86400)}
-          />
+          <CounterBox lable="days" number={Math.floor(time / 86400)} />
           <span className="text-lg text-white md:text-4xl">:</span>
           <CounterBox
             lable="hours"
             number={Math.floor((time % 86400) / 3600)}
           />
           <span className="text-lg text-white md:text-4xl">:</span>
-          <CounterBox
-            lable="minutes"
-            number={Math.floor((time % 3600) / 60)}
-          />
+          <CounterBox lable="minutes" number={Math.floor((time % 3600) / 60)} />
           <span className="text-lg text-white md:text-4xl">:</span>
-          <CounterBox
-            lable="seconds"
-            number={Math.floor(time % 60)}
-          />
+          <CounterBox lable="seconds" number={Math.floor(time % 60)} />
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Counter
+export default Counter;
diff --git a/packages/app/app/[organization]/livestream/components/PaginationSkeleteon.tsx b/packages/app/app/[organization]/livestream/components/PaginationSkeleteon.tsx
index 33062c113..b5424f73b 100644
--- a/packages/app/app/[organization]/livestream/components/PaginationSkeleteon.tsx
+++ b/packages/app/app/[organization]/livestream/components/PaginationSkeleteon.tsx
@@ -18,7 +18,7 @@ const PaginationSkeleton = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default PaginationSkeleton
+export default PaginationSkeleton;
diff --git a/packages/app/app/[organization]/livestream/components/Player.tsx b/packages/app/app/[organization]/livestream/components/Player.tsx
index 0d505621b..6c468cd05 100644
--- a/packages/app/app/[organization]/livestream/components/Player.tsx
+++ b/packages/app/app/[organization]/livestream/components/Player.tsx
@@ -1,20 +1,19 @@
-'use server'
+'use server';
 
-import { Livepeer } from 'livepeer'
-import { IExtendedStage } from '@/lib/types'
-import Counter from './Counter'
-import { PlayerWithControls } from '@/components/ui/Player'
-import { buildPlaybackUrl } from '@/lib/utils/utils'
-import { notFound } from 'next/navigation'
-import Image from 'next/image'
+import { Livepeer } from 'livepeer';
+import { IExtendedStage } from '@/lib/types';
+import Counter from './Counter';
+import { PlayerWithControls } from '@/components/ui/Player';
+import { buildPlaybackUrl } from '@/lib/utils/utils';
+import { notFound } from 'next/navigation';
+import Image from 'next/image';
 
 const Player = async ({ stage }: { stage: IExtendedStage }) => {
   if (!stage || !stage.streamSettings?.playbackId) {
-    return notFound()
+    return notFound();
   }
 
-  const timeLeft =
-    new Date(stage.streamDate as string).getTime() - Date.now()
+  const timeLeft = new Date(stage.streamDate as string).getTime() - Date.now();
 
   // const prevChatMessages = await fetchChat({ stageId: stage?._id })
   return (
@@ -54,7 +53,7 @@ const Player = async ({ stage }: { stage: IExtendedStage }) => {
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Player
+export default Player;
diff --git a/packages/app/app/[organization]/livestream/page.tsx b/packages/app/app/[organization]/livestream/page.tsx
index bbf3d3ea6..56411e2f3 100644
--- a/packages/app/app/[organization]/livestream/page.tsx
+++ b/packages/app/app/[organization]/livestream/page.tsx
@@ -1,17 +1,14 @@
-'use server'
-import SessionInfoBox from '@/components/sessions/SessionInfoBox'
-import { IExtendedSession, OrganizationPageProps } from '@/lib/types'
-import { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import {
-  generalMetadata,
-  livestreamMetadata,
-} from '@/lib/utils/metadata'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { Suspense } from 'react'
-import WatchGrid from '../components/WatchGrid'
-import { fetchStage } from '@/lib/services/stageService'
-import Player from './components/Player'
+'use server';
+import SessionInfoBox from '@/components/sessions/SessionInfoBox';
+import { IExtendedSession, OrganizationPageProps } from '@/lib/types';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { generalMetadata, livestreamMetadata } from '@/lib/utils/metadata';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { Suspense } from 'react';
+import WatchGrid from '../components/WatchGrid';
+import { fetchStage } from '@/lib/services/stageService';
+import Player from './components/Player';
 
 const Loading = () => {
   return (
@@ -33,8 +30,8 @@ const Loading = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default async function Livestream({
   params,
@@ -42,20 +39,19 @@ export default async function Livestream({
 }: OrganizationPageProps) {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
-  if (!searchParams.stage) return notFound()
+  if (!searchParams.stage) return notFound();
 
   const stage = await fetchStage({
     stage: searchParams.stage,
-  })
+  });
 
-  if (!stage?._id || !stage.streamSettings?.streamId)
-    return notFound()
+  if (!stage?._id || !stage.streamSettings?.streamId) return notFound();
 
   return (
     <Suspense key={stage._id} fallback={<Loading />}>
@@ -74,34 +70,31 @@ export default async function Livestream({
             <WatchGrid organizationSlug={params.organization} />
           </div>
           <div className="hidden md:block">
-            <WatchGrid
-              organizationSlug={params.organization}
-              gridLength={6}
-            />
+            <WatchGrid organizationSlug={params.organization} gridLength={6} />
           </div>
         </div>
       </div>
     </Suspense>
-  )
+  );
 }
 
 export async function generateMetadata({
   params,
   searchParams,
 }: OrganizationPageProps): Promise<Metadata> {
-  if (!searchParams.stage) return generalMetadata
+  if (!searchParams.stage) return generalMetadata;
   const stage = await fetchStage({
     stage: searchParams.stage,
-  })
+  });
 
   const organization = await fetchOrganization({
     organizationSlug: params?.organization,
-  })
+  });
 
-  if (!stage || !organization) return generalMetadata
+  if (!stage || !organization) return generalMetadata;
 
   return livestreamMetadata({
     livestream: stage,
     organization,
-  })
+  });
 }
diff --git a/packages/app/app/[organization]/page.tsx b/packages/app/app/[organization]/page.tsx
index 4a9e9c6df..c862cb935 100644
--- a/packages/app/app/[organization]/page.tsx
+++ b/packages/app/app/[organization]/page.tsx
@@ -1,35 +1,32 @@
-import NotFound from '@/not-found'
-import { Metadata, ResolvingMetadata } from 'next'
+import NotFound from '@/not-found';
+import { Metadata, ResolvingMetadata } from 'next';
 import {
   fetchOrganization,
   fetchOrganizations,
-} from '@/lib/services/organizationService'
-import { ChannelPageParams } from '@/lib/types'
-import ChannelShareIcons from './components/ChannelShareIcons'
-import Image from 'next/image'
-import { AspectRatio } from '@/components/ui/aspect-ratio'
-import { Suspense } from 'react'
-import { Card } from '@/components/ui/card'
-import StreamethLogoWhite from '@/lib/svg/StreamethLogoWhite'
-import WatchGrid, { WatchGridLoading } from './components/WatchGrid'
+} from '@/lib/services/organizationService';
+import { ChannelPageParams } from '@/lib/types';
+import ChannelShareIcons from './components/ChannelShareIcons';
+import Image from 'next/image';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
+import { Suspense } from 'react';
+import { Card } from '@/components/ui/card';
+import StreamethLogoWhite from '@/lib/svg/StreamethLogoWhite';
+import WatchGrid, { WatchGridLoading } from './components/WatchGrid';
 import UpcomingStreams, {
   UpcomingStreamsLoading,
-} from './components/UpcomingStreams'
-import { fetchOrganizationStages } from '@/lib/services/stageService'
-import Player from './livestream/components/Player'
-import SessionInfoBox from '@/components/sessions/SessionInfoBox'
-import ChannelDescription from './components/ChannelDescription'
-import {
-  livestreamMetadata,
-  generalMetadata,
-} from '@/lib/utils/metadata'
+} from './components/UpcomingStreams';
+import { fetchOrganizationStages } from '@/lib/services/stageService';
+import Player from './livestream/components/Player';
+import SessionInfoBox from '@/components/sessions/SessionInfoBox';
+import ChannelDescription from './components/ChannelDescription';
+import { livestreamMetadata, generalMetadata } from '@/lib/utils/metadata';
 
 export async function generateStaticParams() {
-  const organizations = await fetchOrganizations()
+  const organizations = await fetchOrganizations();
   const paths = organizations.map((organization) => ({
     organization: organization.slug,
-  }))
-  return paths
+  }));
+  return paths;
 }
 
 const OrganizationHome = async ({
@@ -37,15 +34,15 @@ const OrganizationHome = async ({
   searchParams,
 }: ChannelPageParams) => {
   if (!params.organization) {
-    return NotFound()
+    return NotFound();
   }
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return NotFound()
+    return NotFound();
   }
 
   const allStreams = (
@@ -57,15 +54,15 @@ const OrganizationHome = async ({
       stream.published &&
       (stream.streamSettings?.isActive ||
         new Date(stream?.streamDate as string) > new Date())
-  )
+  );
 
   const sortedStreams = allStreams.sort(
     (a, b) =>
       new Date(a.streamDate as string).getTime() -
       new Date(b.streamDate as string).getTime()
-  )
+  );
 
-  const stage = sortedStreams.length > 0 ? sortedStreams[0] : null
+  const stage = sortedStreams.length > 0 ? sortedStreams[0] : null;
 
   return (
     <div className="mx-auto w-full max-w-7xl space-y-4 md:p-4">
@@ -86,7 +83,8 @@ const OrganizationHome = async ({
         ) : (
           <AspectRatio
             ratio={3 / 1}
-            className="relative z-0 mt-3 w-full md:rounded-xl">
+            className="relative z-0 mt-3 w-full md:rounded-xl"
+          >
             {organization.banner ? (
               <Image
                 src={organization.banner}
@@ -106,12 +104,8 @@ const OrganizationHome = async ({
             <div className="absolute bottom-0 left-0 right-0 w-full space-y-2 p-4 text-white">
               <div className="flex w-full flex-row justify-between">
                 <div>
-                  <h2 className="text-2xl font-bold">
-                    {organization.name}
-                  </h2>
-                  <ChannelDescription
-                    description={organization.description}
-                  />
+                  <h2 className="text-2xl font-bold">{organization.name}</h2>
+                  <ChannelDescription description={organization.description} />
                 </div>
                 <ChannelShareIcons organization={organization} />
               </div>
@@ -132,55 +126,52 @@ const OrganizationHome = async ({
             <WatchGrid organizationSlug={params.organization} />
           </div>
           <div className="hidden md:block">
-            <WatchGrid
-              organizationSlug={params.organization}
-              gridLength={6}
-            />
+            <WatchGrid organizationSlug={params.organization} gridLength={6} />
           </div>
         </Suspense>
       </Card>
     </div>
-  )
-}
+  );
+};
 
 export async function generateMetadata(
   { params }: ChannelPageParams,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   if (!params.organization) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   const allStreams = (
     await fetchOrganizationStages({
       organizationId: organization._id,
     })
-  ).filter((stream) => stream.published)
+  ).filter((stream) => stream.published);
 
   const sortedStreams = allStreams.sort(
     (a, b) =>
       new Date(a.streamDate as string).getTime() -
       new Date(b.streamDate as string).getTime()
-  )
+  );
 
-  const stage = sortedStreams.length > 0 ? sortedStreams[0] : null
+  const stage = sortedStreams.length > 0 ? sortedStreams[0] : null;
 
   if (!stage) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   return livestreamMetadata({
     livestream: stage,
     organization,
-  })
+  });
 }
 
-export default OrganizationHome
+export default OrganizationHome;
diff --git a/packages/app/app/[organization]/videos/components/ArchiveVideos.tsx b/packages/app/app/[organization]/videos/components/ArchiveVideos.tsx
index 269772041..aa6c19635 100644
--- a/packages/app/app/[organization]/videos/components/ArchiveVideos.tsx
+++ b/packages/app/app/[organization]/videos/components/ArchiveVideos.tsx
@@ -1,7 +1,7 @@
-import { fetchAllSessions } from '@/lib/data'
-import Videos from '@/components/misc/Videos'
-import { FileQuestion } from 'lucide-react'
-import Pagination from './pagination'
+import { fetchAllSessions } from '@/lib/data';
+import Videos from '@/components/misc/Videos';
+import { FileQuestion } from 'lucide-react';
+import Pagination from './pagination';
 
 const ArchiveVideos = async ({
   organizationSlug,
@@ -9,10 +9,10 @@ const ArchiveVideos = async ({
   searchQuery,
   page,
 }: {
-  organizationSlug?: string
-  event?: string
-  searchQuery?: string
-  page?: number
+  organizationSlug?: string;
+  event?: string;
+  searchQuery?: string;
+  page?: number;
 }) => {
   const videos = await fetchAllSessions({
     organizationSlug,
@@ -22,7 +22,7 @@ const ArchiveVideos = async ({
     published: true,
     searchQuery,
     page: Number(page || 1),
-  })
+  });
 
   if (videos.pagination.totalItems === 0) {
     return (
@@ -32,18 +32,15 @@ const ArchiveVideos = async ({
           No videos have been uploaded yet
         </span>
       </div>
-    )
+    );
   }
 
   return (
     <>
-      <Videos
-        OrganizationSlug={organizationSlug}
-        videos={videos.sessions}
-      />
+      <Videos OrganizationSlug={organizationSlug} videos={videos.sessions} />
       <Pagination {...videos.pagination} />
     </>
-  )
-}
+  );
+};
 
-export default ArchiveVideos
+export default ArchiveVideos;
diff --git a/packages/app/app/[organization]/videos/components/eventSelect.tsx b/packages/app/app/[organization]/videos/components/eventSelect.tsx
index d2b7524f4..7470e9962 100644
--- a/packages/app/app/[organization]/videos/components/eventSelect.tsx
+++ b/packages/app/app/[organization]/videos/components/eventSelect.tsx
@@ -1,14 +1,14 @@
-'use client'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import Combobox from '@/components/ui/combo-box'
-import { IExtendedEvent } from '@/lib/types'
+'use client';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import Combobox from '@/components/ui/combo-box';
+import { IExtendedEvent } from '@/lib/types';
 
 const EventSelect = ({ events }: { events: IExtendedEvent[] }) => {
-  const { handleTermChange, searchParams } = useSearchParams()
-  const event = searchParams.get('event') || ''
+  const { handleTermChange, searchParams } = useSearchParams();
+  const event = searchParams.get('event') || '';
 
   if (events.length === 0) {
-    return null
+    return null;
   }
 
   return (
@@ -21,7 +21,7 @@ const EventSelect = ({ events }: { events: IExtendedEvent[] }) => {
             key: 'event',
             value: value,
           },
-        ])
+        ]);
       }}
       items={[
         { label: 'None', value: '' },
@@ -31,7 +31,7 @@ const EventSelect = ({ events }: { events: IExtendedEvent[] }) => {
         })),
       ]}
     />
-  )
-}
+  );
+};
 
-export default EventSelect
+export default EventSelect;
diff --git a/packages/app/app/[organization]/videos/components/pagination.tsx b/packages/app/app/[organization]/videos/components/pagination.tsx
index f82508b32..2688fb6b6 100644
--- a/packages/app/app/[organization]/videos/components/pagination.tsx
+++ b/packages/app/app/[organization]/videos/components/pagination.tsx
@@ -1,15 +1,15 @@
-'use client'
-import { IPagination } from '@/lib/types'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import React, { useState } from 'react'
-import { LuArrowLeft, LuArrowRight } from 'react-icons/lu'
+'use client';
+import { IPagination } from '@/lib/types';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import React, { useState } from 'react';
+import { LuArrowLeft, LuArrowRight } from 'react-icons/lu';
 
 const Pagination = (props: IPagination) => {
-  const [jumpPage, setJumpPage] = useState(props.currentPage)
-  const { handleTermChange, searchParams } = useSearchParams()
-  const currentPage = Number(searchParams.get('page')) || 1
+  const [jumpPage, setJumpPage] = useState(props.currentPage);
+  const { handleTermChange, searchParams } = useSearchParams();
+  const currentPage = Number(searchParams.get('page')) || 1;
 
   return (
     <div className="flex flex-row items-center justify-center p-2">
@@ -40,7 +40,8 @@ const Pagination = (props: IPagination) => {
               },
             ])
           }
-          variant="primary">
+          variant="primary"
+        >
           Go
         </Button>
       </div>
@@ -55,9 +56,10 @@ const Pagination = (props: IPagination) => {
                   key: 'page',
                   value: (currentPage - 1).toString(),
                 },
-              ])
+              ]);
             }
-          }}>
+          }}
+        >
           <LuArrowLeft size={24} />
         </button>
         <div className="mx-2">
@@ -70,14 +72,15 @@ const Pagination = (props: IPagination) => {
             if (currentPage < props.totalPages) {
               handleTermChange([
                 { key: 'page', value: (currentPage + 1).toString() },
-              ])
+              ]);
             }
-          }}>
+          }}
+        >
           <LuArrowRight size={24} />
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Pagination
+export default Pagination;
diff --git a/packages/app/app/[organization]/videos/page.tsx b/packages/app/app/[organization]/videos/page.tsx
index 08454f27c..848b05e26 100644
--- a/packages/app/app/[organization]/videos/page.tsx
+++ b/packages/app/app/[organization]/videos/page.tsx
@@ -2,42 +2,42 @@ import {
   ChannelPageParams,
   IExtendedEvent,
   OrganizationPageProps,
-} from '@/lib/types'
-import { Metadata, ResolvingMetadata } from 'next'
-import { fetchEvents } from '@/lib/services/eventService'
-import { Suspense } from 'react'
-import ArchiveVideos from './components/ArchiveVideos'
-import ArchiveVideoSkeleton from '../livestream/components/ArchiveVideosSkeleton'
-import Image from 'next/image'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { notFound } from 'next/navigation'
-import EventSelect from './components/eventSelect'
-import { fetchAllSessions } from '@/lib/data'
+} from '@/lib/types';
+import { Metadata, ResolvingMetadata } from 'next';
+import { fetchEvents } from '@/lib/services/eventService';
+import { Suspense } from 'react';
+import ArchiveVideos from './components/ArchiveVideos';
+import ArchiveVideoSkeleton from '../livestream/components/ArchiveVideosSkeleton';
+import Image from 'next/image';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { notFound } from 'next/navigation';
+import EventSelect from './components/eventSelect';
+import { fetchAllSessions } from '@/lib/data';
 import {
   generalMetadata,
   livestreamMetadata,
   organizationMetadata,
-} from '@/lib/utils/metadata'
+} from '@/lib/utils/metadata';
 
 export default async function ArchivePage({
   params,
   searchParams,
 }: OrganizationPageProps) {
   if (!params.organization) {
-    return notFound()
+    return notFound();
   }
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
   const events = await fetchEvents({
     organizationId: organization?._id,
-  })
+  });
 
   const results = await Promise.all(
     events.map(async (event) => {
@@ -47,15 +47,13 @@ export default async function ArchivePage({
           onlyVideos: true,
           published: true,
         })
-      ).sessions
+      ).sessions;
 
-      return sessions.length > 0 ? event : undefined
+      return sessions.length > 0 ? event : undefined;
     })
-  )
+  );
 
-  const eventsWithVideos = results.filter(
-    (event) => event !== undefined
-  )
+  const eventsWithVideos = results.filter((event) => event !== undefined);
 
   return (
     <div className="flex h-full w-full flex-col">
@@ -74,14 +72,10 @@ export default async function ArchivePage({
       <div className="m-auto h-full w-full max-w-7xl p-4">
         <div className="mb-4 flex w-full flex-row items-center justify-between space-x-2">
           <div className="w-full text-lg font-bold">
-            {searchParams.searchQuery
-              ? 'Search results'
-              : 'All videos'}
+            {searchParams.searchQuery ? 'Search results' : 'All videos'}
           </div>
           <div>
-            <EventSelect
-              events={eventsWithVideos as IExtendedEvent[]}
-            />
+            <EventSelect events={eventsWithVideos as IExtendedEvent[]} />
           </div>
         </div>
         <Suspense fallback={<ArchiveVideoSkeleton />}>
@@ -94,7 +88,7 @@ export default async function ArchivePage({
         </Suspense>
       </div>
     </div>
-  )
+  );
 }
 
 export async function generateMetadata(
@@ -102,18 +96,18 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   if (!params.organization) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return generalMetadata
+    return generalMetadata;
   }
 
   return organizationMetadata({
     organization,
-  })
+  });
 }
diff --git a/packages/app/app/[organization]/watch/page.tsx b/packages/app/app/[organization]/watch/page.tsx
index 457064e87..0ba029815 100644
--- a/packages/app/app/[organization]/watch/page.tsx
+++ b/packages/app/app/[organization]/watch/page.tsx
@@ -1,15 +1,15 @@
-import { PlayerWithControls } from '@/components/ui/Player'
-import SessionInfoBox from '@/components/sessions/SessionInfoBox'
-import { OrganizationPageProps } from '@/lib/types'
-import { Metadata } from 'next'
-import { notFound } from 'next/navigation'
-import { generalMetadata, watchMetadata } from '@/lib/utils/metadata'
-import { fetchSession } from '@/lib/services/sessionService'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { Suspense } from 'react'
-import WatchGrid from '../components/WatchGrid'
-import { getVideoUrlAction } from '@/lib/actions/livepeer'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
+import { PlayerWithControls } from '@/components/ui/Player';
+import SessionInfoBox from '@/components/sessions/SessionInfoBox';
+import { OrganizationPageProps } from '@/lib/types';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { generalMetadata, watchMetadata } from '@/lib/utils/metadata';
+import { fetchSession } from '@/lib/services/sessionService';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { Suspense } from 'react';
+import WatchGrid from '../components/WatchGrid';
+import { getVideoUrlAction } from '@/lib/actions/livepeer';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
 
 const Loading = () => {
   return (
@@ -31,8 +31,8 @@ const Loading = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default async function Watch({
   params,
@@ -40,27 +40,26 @@ export default async function Watch({
 }: OrganizationPageProps) {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
-  if (!searchParams.session) return notFound()
+  if (!searchParams.session) return notFound();
   const session = await fetchSession({
     session: searchParams.session,
-  })
+  });
 
-  if (!session || (!session.playbackId && !session.assetId))
-    return notFound()
+  if (!session || (!session.playbackId && !session.assetId)) return notFound();
 
-  const videoUrl = await getVideoUrlAction(session.assetId as string)
+  const videoUrl = await getVideoUrlAction(session.assetId as string);
 
   if (!videoUrl) {
-    return notFound()
+    return notFound();
   }
 
-  const thumbnail = await generateThumbnailAction(session)
+  const thumbnail = await generateThumbnailAction(session);
 
   return (
     <Suspense key={session._id} fallback={<Loading />}>
@@ -97,34 +96,31 @@ export default async function Watch({
             <WatchGrid organizationSlug={params.organization} />
           </div>
           <div className="hidden md:block">
-            <WatchGrid
-              organizationSlug={params.organization}
-              gridLength={6}
-            />
+            <WatchGrid organizationSlug={params.organization} gridLength={6} />
           </div>
         </div>
       </div>
     </Suspense>
-  )
+  );
 }
 
 export async function generateMetadata({
   params,
   searchParams,
 }: OrganizationPageProps): Promise<Metadata> {
-  if (!searchParams.session) return generalMetadata
+  if (!searchParams.session) return generalMetadata;
 
   const session = await fetchSession({
     session: searchParams.session,
-  })
+  });
   const organization = await fetchOrganization({
     organizationSlug: params?.organization,
-  })
+  });
 
-  if (!session || !organization) return generalMetadata
+  if (!session || !organization) return generalMetadata;
 
   const thumbnail =
-    session.coverImage ?? (await generateThumbnailAction(session))
+    session.coverImage ?? (await generateThumbnailAction(session));
 
-  return watchMetadata({ organization, session: session, thumbnail })
+  return watchMetadata({ organization, session: session, thumbnail });
 }
diff --git a/packages/app/app/api/google/callback/route.ts b/packages/app/app/api/google/callback/route.ts
index 0dd24c306..f2de27910 100644
--- a/packages/app/app/api/google/callback/route.ts
+++ b/packages/app/app/api/google/callback/route.ts
@@ -1,40 +1,34 @@
 import {
   generateGoogleAccessToken,
   isStreamingEnabled,
-} from '@/lib/utils/googleAuth'
-import { apiUrl } from '@/lib/utils/utils'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-import { redirect } from 'next/navigation'
-import { NextRequest, NextResponse } from 'next/server'
+} from '@/lib/utils/googleAuth';
+import { apiUrl } from '@/lib/utils/utils';
+import { revalidatePath } from 'next/cache';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams
-  const code = searchParams.get('code')
-  const state = searchParams.get('state')
-  const authuser = searchParams.get('authuser')
-  const decodedState = state
-    ? JSON.parse(decodeURIComponent(state))
-    : ''
-  const { redirectUrl, organizationId } = decodedState
-  const authToken = cookies().get('user-session')?.value
-  const originUrl = process.env.NEXT_PUBLIC_ORIGIN_URL || ''
+  const searchParams = request.nextUrl.searchParams;
+  const code = searchParams.get('code');
+  const state = searchParams.get('state');
+  const authuser = searchParams.get('authuser');
+  const decodedState = state ? JSON.parse(decodeURIComponent(state)) : '';
+  const { redirectUrl, organizationId } = decodedState;
+  const authToken = cookies().get('user-session')?.value;
+  const originUrl = process.env.NEXT_PUBLIC_ORIGIN_URL || '';
 
-  const parsedRedirectUrl = redirectUrl
-    ? originUrl + redirectUrl
-    : `/studio`
+  const parsedRedirectUrl = redirectUrl ? originUrl + redirectUrl : `/studio`;
 
   if (!code || !authToken) {
-    console.error('Google or auth token does not exist')
-    return redirect(parsedRedirectUrl)
+    console.error('Google or auth token does not exist');
+    return redirect(parsedRedirectUrl);
   }
 
   try {
-    const tokenDetails = await generateGoogleAccessToken(code)
+    const tokenDetails = await generateGoogleAccessToken(code);
     // Check if streaming is enabled
-    const streamEnabled = await isStreamingEnabled(
-      tokenDetails.access_token
-    )
+    const streamEnabled = await isStreamingEnabled(tokenDetails.access_token);
 
     if (streamEnabled) {
       // Add new auth to streamETh server storage
@@ -51,23 +45,20 @@ export async function GET(request: NextRequest) {
             type: 'youtube',
             accessToken: tokenDetails.access_token,
             refreshToken: tokenDetails.refresh_token,
-            expireTime:
-              new Date().getTime() + tokenDetails.expires_in,
+            expireTime: new Date().getTime() + tokenDetails.expires_in,
             name: tokenDetails.name,
             thumbnail: tokenDetails.thumbnail,
             channelId: tokenDetails.channelId,
           }),
         }
-      )
+      );
 
-      revalidatePath('/studio')
-      return NextResponse.redirect(
-        new URL(parsedRedirectUrl, request.url)
-      )
+      revalidatePath('/studio');
+      return NextResponse.redirect(new URL(parsedRedirectUrl, request.url));
     } else {
       return NextResponse.redirect(
         `${originUrl}/redirect/google?authuser=${authuser}`
-      )
+      );
     }
   } catch (err) {
     return NextResponse.json(
@@ -75,6 +66,6 @@ export async function GET(request: NextRequest) {
       {
         status: 500,
       }
-    )
+    );
   }
 }
diff --git a/packages/app/app/api/twitter/callback/route.ts b/packages/app/app/api/twitter/callback/route.ts
index f4da13abf..0d532b6c9 100644
--- a/packages/app/app/api/twitter/callback/route.ts
+++ b/packages/app/app/api/twitter/callback/route.ts
@@ -1,38 +1,33 @@
-import { apiUrl } from '@/lib/utils/utils'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-import { redirect } from 'next/navigation'
-import { NextRequest, NextResponse } from 'next/server'
-import {
-  createOAuth,
-  getUserProfileImage,
-} from '@/lib/utils/twitterAuth'
+import { apiUrl } from '@/lib/utils/utils';
+import { revalidatePath } from 'next/cache';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { NextRequest, NextResponse } from 'next/server';
+import { createOAuth, getUserProfileImage } from '@/lib/utils/twitterAuth';
 
 export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams
-  const oauthToken = searchParams.get('oauth_token')
-  const oauthVerifier = searchParams.get('oauth_verifier')
-  const redirectUrl = decodeURIComponent(
-    searchParams.get('redirectUrl')!
-  )
-  const organizationId = searchParams.get('organizationId')
-  const authToken = cookies().get('user-session')?.value
-  const originUrl = process.env.NEXT_PUBLIC_ORIGIN_URL!
+  const searchParams = request.nextUrl.searchParams;
+  const oauthToken = searchParams.get('oauth_token');
+  const oauthVerifier = searchParams.get('oauth_verifier');
+  const redirectUrl = decodeURIComponent(searchParams.get('redirectUrl')!);
+  const organizationId = searchParams.get('organizationId');
+  const authToken = cookies().get('user-session')?.value;
+  const originUrl = process.env.NEXT_PUBLIC_ORIGIN_URL!;
 
   if (!oauthToken || !authToken) {
-    console.error('Twitter oauth token does not exist')
-    return redirect(originUrl + redirectUrl)
+    console.error('Twitter oauth token does not exist');
+    return redirect(originUrl + redirectUrl);
   }
 
-  const oauth = createOAuth()
-  const url = 'https://api.twitter.com/oauth/access_token'
-  const method = 'POST'
+  const oauth = createOAuth();
+  const url = 'https://api.twitter.com/oauth/access_token';
+  const method = 'POST';
   const requestData = {
     url,
     method,
     data: { oauth_token: oauthToken, oauth_verifier: oauthVerifier },
-  }
-  const headers = oauth.toHeader(oauth.authorize(requestData))
+  };
+  const headers = oauth.toHeader(oauth.authorize(requestData));
   try {
     const responseToken = await fetch(url, {
       method: 'POST',
@@ -40,16 +35,14 @@ export async function GET(request: NextRequest) {
         'content-type': 'application/json',
         ...headers,
       },
-    })
+    });
 
-    const responseText = await responseToken.text()
-    const responseParams = new URLSearchParams(responseText)
-    const oauthAccessToken = responseParams.get('oauth_token')
-    const oauthAccessTokenSecret = responseParams.get(
-      'oauth_token_secret'
-    )
-    const userId = responseParams.get('user_id')
-    const screenName = responseParams.get('screen_name')
+    const responseText = await responseToken.text();
+    const responseParams = new URLSearchParams(responseText);
+    const oauthAccessToken = responseParams.get('oauth_token');
+    const oauthAccessTokenSecret = responseParams.get('oauth_token_secret');
+    const userId = responseParams.get('user_id');
+    const screenName = responseParams.get('screen_name');
     // if (!screenName) {
     //   throw new Error(`Screen name not found`)
     // }
@@ -74,18 +67,16 @@ export async function GET(request: NextRequest) {
           channelId: userId,
         }),
       }
-    )
+    );
 
-    revalidatePath('/studio')
-    return NextResponse.redirect(
-      new URL(originUrl + redirectUrl, request.url)
-    )
+    revalidatePath('/studio');
+    return NextResponse.redirect(new URL(originUrl + redirectUrl, request.url));
   } catch (err) {
     return NextResponse.json(
       { error: err },
       {
         status: 500,
       }
-    )
+    );
   }
 }
diff --git a/packages/app/app/api/twitter/request/route.ts b/packages/app/app/api/twitter/request/route.ts
index 735d4c3dd..d1be03de2 100644
--- a/packages/app/app/api/twitter/request/route.ts
+++ b/packages/app/app/api/twitter/request/route.ts
@@ -1,39 +1,36 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { createOAuth } from '@/lib/utils/twitterAuth'
+import { NextRequest, NextResponse } from 'next/server';
+import { createOAuth } from '@/lib/utils/twitterAuth';
 
 export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams
-  const state = searchParams.get('state')
-  const TWITTER_CALLBACK_URL = process.env.TWITTER_CALLBACK_URL!
-  const TWITTER_ACCESS_TOKEN = process.env.TWITTER_ACCESS_TOKEN!
-  const TWITTER_ACCESS_TOKEN_SECRET =
-    process.env.TWITTER_ACCESS_TOKEN_SECRET!
+  const searchParams = request.nextUrl.searchParams;
+  const state = searchParams.get('state');
+  const TWITTER_CALLBACK_URL = process.env.TWITTER_CALLBACK_URL!;
+  const TWITTER_ACCESS_TOKEN = process.env.TWITTER_ACCESS_TOKEN!;
+  const TWITTER_ACCESS_TOKEN_SECRET = process.env.TWITTER_ACCESS_TOKEN_SECRET!;
 
-  const method = 'POST'
-  const url = 'https://api.twitter.com/oauth/request_token'
-  const decodedState = state
-    ? JSON.parse(decodeURIComponent(state))
-    : ''
+  const method = 'POST';
+  const url = 'https://api.twitter.com/oauth/request_token';
+  const decodedState = state ? JSON.parse(decodeURIComponent(state)) : '';
 
-  const callbackUrlWithParams = new URL(TWITTER_CALLBACK_URL)
+  const callbackUrlWithParams = new URL(TWITTER_CALLBACK_URL);
   // Add personal redirect parameters to the callback URL
   Object.keys(decodedState).forEach((key) => {
-    callbackUrlWithParams.searchParams.append(key, decodedState[key])
-  })
-  const callback = encodeURI(callbackUrlWithParams.toString())
+    callbackUrlWithParams.searchParams.append(key, decodedState[key]);
+  });
+  const callback = encodeURI(callbackUrlWithParams.toString());
 
-  const oauth = createOAuth()
+  const oauth = createOAuth();
 
   const requestData = {
     url,
     method,
     data: { oauth_callback: callback },
-  }
+  };
   const token = {
     key: TWITTER_ACCESS_TOKEN,
     secret: TWITTER_ACCESS_TOKEN_SECRET,
-  }
-  const headers = oauth.toHeader(oauth.authorize(requestData, token))
+  };
+  const headers = oauth.toHeader(oauth.authorize(requestData, token));
 
   try {
     const response = await fetch(url, {
@@ -42,24 +39,24 @@ export async function GET(request: NextRequest) {
         'content-type': 'application/json',
         ...headers,
       },
-    })
+    });
 
-    const responseText = await response.text()
-    const responseParams = new URLSearchParams(responseText)
-    const oauthToken = responseParams.get('oauth_token')
+    const responseText = await response.text();
+    const responseParams = new URLSearchParams(responseText);
+    const oauthToken = responseParams.get('oauth_token');
 
     return NextResponse.redirect(
       new URL(
         `https://api.twitter.com/oauth/authorize?oauth_token=${oauthToken}`,
         request.url
       )
-    )
+    );
   } catch (err) {
     return NextResponse.json(
       { error: err },
       {
         status: 500,
       }
-    )
+    );
   }
 }
diff --git a/packages/app/app/api/upload/route.ts b/packages/app/app/api/upload/route.ts
index 7c64a09d0..a43b83e79 100644
--- a/packages/app/app/api/upload/route.ts
+++ b/packages/app/app/api/upload/route.ts
@@ -1,26 +1,26 @@
-import { NextRequest, NextResponse } from 'next/server'
-import S3Service from '@/lib/services/spacesService'
-import { validateEnv } from '@/lib/utils/utils'
+import { NextRequest, NextResponse } from 'next/server';
+import S3Service from '@/lib/services/spacesService';
+import { validateEnv } from '@/lib/utils/utils';
 
 export async function POST(request: NextRequest) {
-  const data = await request.formData()
-  const file: File | null = data.get('file') as unknown as File
-  const path = data.get('path') as string
+  const data = await request.formData();
+  const file: File | null = data.get('file') as unknown as File;
+  const path = data.get('path') as string;
   if (!file) {
-    return NextResponse.json({ success: false })
+    return NextResponse.json({ success: false });
   }
 
-  const bytes = await file.arrayBuffer()
-  const buffer = Buffer.from(bytes)
-  const s3 = new S3Service()
+  const bytes = await file.arrayBuffer();
+  const buffer = Buffer.from(bytes);
+  const s3 = new S3Service();
   const result = await s3.uploadFile(
     validateEnv('SPACE_STORAGE_PATH'),
     path + '/' + file.name,
     buffer,
     file.type
-  )
+  );
 
   return NextResponse.json({
     success: true,
-  })
+  });
 }
diff --git a/packages/app/app/api/video-download/route.ts b/packages/app/app/api/video-download/route.ts
index 61efe7f7e..f2ff985b0 100644
--- a/packages/app/app/api/video-download/route.ts
+++ b/packages/app/app/api/video-download/route.ts
@@ -1,20 +1,18 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server';
 
-export const GET = async (
-  req: NextRequest
-): Promise<NextResponse> => {
+export const GET = async (req: NextRequest): Promise<NextResponse> => {
   try {
-    const url = new URL(req.url)
+    const url = new URL(req.url);
 
-    const playbackId = url.searchParams.get('playbackId')
-    const Authorization = process.env.LIVEPEER_API_KEY
+    const playbackId = url.searchParams.get('playbackId');
+    const Authorization = process.env.LIVEPEER_API_KEY;
     if (!playbackId) {
-      return NextResponse.json('Missing playbackId', { status: 401 })
+      return NextResponse.json('Missing playbackId', { status: 401 });
     }
     if (!Authorization) {
       return NextResponse.json('Missing Authorization Token', {
         status: 401,
-      })
+      });
     }
 
     const response = await fetch(
@@ -25,12 +23,12 @@ export const GET = async (
           Authorization: Authorization,
         },
       }
-    )
+    );
 
-    const data = await response.json()
+    const data = await response.json();
 
-    return NextResponse.json(data)
+    return NextResponse.json(data);
   } catch (error) {
-    return NextResponse.json('Internal Server Error', { status: 500 })
+    return NextResponse.json('Internal Server Error', { status: 500 });
   }
-}
+};
diff --git a/packages/app/app/embed/page.tsx b/packages/app/app/embed/page.tsx
index 097587465..f9c1def43 100644
--- a/packages/app/app/embed/page.tsx
+++ b/packages/app/app/embed/page.tsx
@@ -1,20 +1,20 @@
-import Player from '@/components/ui/Player'
-import { notFound } from 'next/navigation'
-import { Suspense } from 'react'
-import { EmbedPageParams } from '@/lib/types'
-import { fetchStage } from '@/lib/services/stageService'
-import { buildPlaybackUrl } from '@/lib/utils/utils'
-import { fetchSession } from '@/lib/services/sessionService'
-import { getVideoUrlAction } from '@/lib/actions/livepeer'
+import Player from '@/components/ui/Player';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+import { EmbedPageParams } from '@/lib/types';
+import { fetchStage } from '@/lib/services/stageService';
+import { buildPlaybackUrl } from '@/lib/utils/utils';
+import { fetchSession } from '@/lib/services/sessionService';
+import { getVideoUrlAction } from '@/lib/actions/livepeer';
 
 const Embed = ({
   src,
   thumbnail,
   name,
 }: {
-  src: string
-  thumbnail?: string
-  name?: string
+  src: string;
+  thumbnail?: string;
+  name?: string;
 }) => {
   return (
     <div className="absolute left-0 top-0 flex h-screen w-screen items-center justify-center bg-black">
@@ -32,8 +32,8 @@ const Embed = ({
         ]}
       />
     </div>
-  )
-}
+  );
+};
 
 const EmbedPage = async ({ searchParams }: EmbedPageParams) => {
   if (
@@ -41,29 +41,29 @@ const EmbedPage = async ({ searchParams }: EmbedPageParams) => {
     !searchParams.stage &&
     !searchParams.session
   ) {
-    return notFound()
+    return notFound();
   }
 
   if (searchParams.playbackId) {
     const src = buildPlaybackUrl(
       searchParams.playbackId,
       Boolean(searchParams?.vod)
-    )
+    );
 
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <Embed src={src} />
       </Suspense>
-    )
+    );
   }
 
   if (searchParams.stage) {
     const stage = await fetchStage({
       stage: searchParams.stage,
-    })
+    });
 
     if (!stage || !stage.streamSettings?.playbackId) {
-      return notFound()
+      return notFound();
     }
 
     return (
@@ -74,24 +74,22 @@ const EmbedPage = async ({ searchParams }: EmbedPageParams) => {
           name={stage.name}
         />
       </Suspense>
-    )
+    );
   }
 
   if (searchParams.session) {
     const session = await fetchSession({
       session: searchParams.session,
-    })
+    });
 
     if (!session || (!session.playbackId && !session.assetId)) {
-      return notFound()
+      return notFound();
     }
 
-    const videoUrl = await getVideoUrlAction(
-      session.assetId as string
-    )
+    const videoUrl = await getVideoUrlAction(session.assetId as string);
 
     if (!videoUrl) {
-      return notFound()
+      return notFound();
     }
 
     return (
@@ -102,8 +100,8 @@ const EmbedPage = async ({ searchParams }: EmbedPageParams) => {
           name={session.name}
         />
       </Suspense>
-    )
+    );
   }
-}
+};
 
-export default EmbedPage
+export default EmbedPage;
diff --git a/packages/app/app/error.tsx b/packages/app/app/error.tsx
index a5e104dff..5c1b29344 100644
--- a/packages/app/app/error.tsx
+++ b/packages/app/app/error.tsx
@@ -1,20 +1,20 @@
-'use client'
+'use client';
 
-import { TriangleAlertIcon } from 'lucide-react'
-import Link from 'next/link'
-import { useEffect } from 'react'
+import { TriangleAlertIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect } from 'react';
 
 export default function Error({
   error,
   reset,
 }: {
-  error: Error
-  reset: () => void
+  error: Error;
+  reset: () => void;
 }) {
   useEffect(() => {
     // Log the error to an error reporting service
-    console.error(error)
-  }, [error])
+    console.error(error);
+  }, [error]);
 
   return (
     <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
@@ -24,18 +24,19 @@ export default function Error({
           Oops, something went wrong!
         </h1>
         <p className="mt-4 text-muted-foreground">
-          We are sorry, but an unexpected error has occurred. Please
-          try again later or contact support if the issue persists.
+          We are sorry, but an unexpected error has occurred. Please try again
+          later or contact support if the issue persists.
         </p>
         <div className="mt-6">
           <Link
             href="https://info.streameth.org/"
             className="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-            prefetch={false}>
+            prefetch={false}
+          >
             Go to Homepage
           </Link>
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/packages/app/app/layout.tsx b/packages/app/app/layout.tsx
index fda2e27ca..eb0f5f010 100644
--- a/packages/app/app/layout.tsx
+++ b/packages/app/app/layout.tsx
@@ -1,29 +1,30 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
-import GeneralContext from '@/lib/context/GeneralContext'
-import { MobileContextProvider } from '@/lib/context/MobileContext'
-import { LoadingContextProvider } from '@/lib/context/LoadingContext'
-import { TopNavbarContextProvider } from '@/lib/context/TopNavbarContext'
-import { generalMetadata } from '@/lib/utils/metadata'
-import { Toaster } from '@/components/ui/sonner'
-import CookieBanner from '@/components/misc/interact/CookieBanner'
-import { TooltipProvider } from '@/components/ui/tooltip'
+import './globals.css';
+import { Inter } from 'next/font/google';
+import GeneralContext from '@/lib/context/GeneralContext';
+import { MobileContextProvider } from '@/lib/context/MobileContext';
+import { LoadingContextProvider } from '@/lib/context/LoadingContext';
+import { TopNavbarContextProvider } from '@/lib/context/TopNavbarContext';
+import { generalMetadata } from '@/lib/utils/metadata';
+import { Toaster } from '@/components/ui/sonner';
+import CookieBanner from '@/components/misc/interact/CookieBanner';
+import { TooltipProvider } from '@/components/ui/tooltip';
 
 const inter = Inter({
   subsets: ['latin'],
   variable: '--font-inter',
-})
+});
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" className={`${inter.variable}`}>
       <body className="">
         <main
-          className={`${inter.variable} mx-auto flex min-h-screen w-full flex-col bg-background`}>
+          className={`${inter.variable} mx-auto flex min-h-screen w-full flex-col bg-background`}
+        >
           <TooltipProvider>
             <GeneralContext>
               <Toaster />
@@ -42,7 +43,7 @@ export default function RootLayout({
         </main>
       </body>
     </html>
-  )
+  );
 }
 
-export const metadata = generalMetadata
+export const metadata = generalMetadata;
diff --git a/packages/app/app/not-found.tsx b/packages/app/app/not-found.tsx
index 97a58b931..f100bc458 100644
--- a/packages/app/app/not-found.tsx
+++ b/packages/app/app/not-found.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from 'next/link';
 
 export default function Component() {
   return (
@@ -14,11 +14,12 @@ export default function Component() {
           <Link
             href="https://info.streameth.org"
             className="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-            prefetch={false}>
+            prefetch={false}
+          >
             Go Back
           </Link>
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/packages/app/app/redirect/google/page.tsx b/packages/app/app/redirect/google/page.tsx
index 758c4f428..cf21008af 100644
--- a/packages/app/app/redirect/google/page.tsx
+++ b/packages/app/app/redirect/google/page.tsx
@@ -1,27 +1,25 @@
-import Footer from '@/components/Layout/Footer'
-import { Button } from '@/components/ui/button'
-import Image from 'next/image'
-import Link from 'next/link'
-import React from 'react'
+import Footer from '@/components/Layout/Footer';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
 
 const GoogleRedirect = ({
   searchParams,
 }: {
-  searchParams: { authuser: string }
+  searchParams: { authuser: string };
 }) => {
   return (
     <div className="container mx-auto max-w-5xl space-y-2 p-12 text-black">
-      <h3 className="text-3xl font-bold">
-        Enable live streaming on YouTube
-      </h3>
+      <h3 className="text-3xl font-bold">Enable live streaming on YouTube</h3>
       <p>
-        To stream and repurpose content to YouTube, YouTube requires
-        you to enable live streaming on your channel. To do this,
-        follow these steps:{' '}
+        To stream and repurpose content to YouTube, YouTube requires you to
+        enable live streaming on your channel. To do this, follow these steps:{' '}
       </p>
       <p>1. Go to your YouTube live dashboard</p>
       <Link
-        href={`https://www.youtube.com/signin?authuser=${searchParams.authuser}&next=%2Flive_dashboard&app=desktop`}>
+        href={`https://www.youtube.com/signin?authuser=${searchParams.authuser}&next=%2Flive_dashboard&app=desktop`}
+      >
         <Button className="my-4">Open Youtube Live Dashboard</Button>
       </Link>
       <p>2. Follow YouTube&apos;s steps to enable live streaming.</p>
@@ -33,8 +31,8 @@ const GoogleRedirect = ({
         height={720}
       />
       <p>
-        3. Once live streaming is enabled, return to StreamEth and
-        connect again. It often takes 24-48 hours to be approved.
+        3. Once live streaming is enabled, return to StreamEth and connect
+        again. It often takes 24-48 hours to be approved.
       </p>
 
       <p className="mt-24">
@@ -43,7 +41,8 @@ const GoogleRedirect = ({
           target="_blank"
           className="font-medium text-primary underline"
           rel="noopener noopener"
-          href="https://t.me/+p7TgdE06G-4zZDU0">
+          href="https://t.me/+p7TgdE06G-4zZDU0"
+        >
           Contact Us
         </a>
       </p>
@@ -51,7 +50,7 @@ const GoogleRedirect = ({
         <Footer />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default GoogleRedirect
+export default GoogleRedirect;
diff --git a/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx b/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx
index 1901a587e..2ae185767 100644
--- a/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx
+++ b/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Button } from '@/components/ui/button'
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -12,30 +12,32 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { organizationSchema } from '@/lib/schema'
-import { toast } from 'sonner'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { organizationSchema } from '@/lib/schema';
+import { toast } from 'sonner';
 import {
   createOrganizationAction,
   updateOrganizationAction,
-} from '@/lib/actions/organizations'
-import { Loader2 } from 'lucide-react'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import { useRouter } from 'next/navigation'
-import { IExtendedOrganization } from '@/lib/types'
+} from '@/lib/actions/organizations';
+import { Loader2 } from 'lucide-react';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import { useRouter } from 'next/navigation';
+import { IExtendedOrganization } from '@/lib/types';
+
+interface CreateOrganizationFormProps {
+  organization?: IExtendedOrganization;
+  disableName?: boolean;
+}
 
 export default function CreateOrganizationForm({
   organization,
   disableName = false,
-}: {
-  organization?: IExtendedOrganization
-  disableName?: boolean
-}) {
-  const router = useRouter()
-  const [isOpen, setIsOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
+}: CreateOrganizationFormProps) {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const form = useForm<z.infer<typeof organizationSchema>>({
     resolver: zodResolver(organizationSchema),
@@ -45,12 +47,11 @@ export default function CreateOrganizationForm({
       logo: organization?.logo || '',
       email: organization?.email || '',
       description: organization?.description || '',
-      // url: organization?.url || '',
     },
-  })
+  });
 
   function onSubmit(values: z.infer<typeof organizationSchema>) {
-    setIsLoading(true)
+    setIsLoading(true);
 
     if (organization) {
       updateOrganizationAction({
@@ -60,40 +61,38 @@ export default function CreateOrganizationForm({
         },
       })
         .then(() => {
-          setIsOpen(false)
-          toast.success('Organization updated')
+          setIsOpen(false);
+          toast.success('Organization updated');
         })
         .catch(() => {
-          toast.error('Error updating organization')
+          toast.error('Error updating organization');
         })
         .finally(() => {
-          setIsLoading(false)
-        })
-      return
+          setIsLoading(false);
+        });
+      return;
     }
 
     createOrganizationAction({
       organization: values,
     })
       .then((response) => {
-        setIsOpen(false)
-        toast.success('Organization created')
-        router.push(`/studio/${response.slug}`)
+        setIsOpen(false);
+        toast.success('Organization created');
+        router.push(`/studio/${response.slug}`);
       })
       .catch(() => {
-        toast.error('Error creating organization')
+        toast.error('Error creating organization');
       })
       .finally(() => {
-        setIsLoading(false)
-      })
+        setIsLoading(false);
+      });
   }
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-4">
-        <div>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <div className="relative">
           <FormField
             control={form.control}
             name="banner"
@@ -102,10 +101,10 @@ export default function CreateOrganizationForm({
                 <FormControl>
                   <ImageUpload
                     className="h-40 w-full rounded-xl bg-neutrals-300"
-                    placeholder="Click to upload image here. Maximum image file size is 5MB.
-                    Best resolution of 1500 x 500px. Aspect ratio of 3:1."
-                    aspectRatio={1}
+                    placeholder="Click to upload image here. Image must be exactly 1500x500 pixels. Maximum file size is 5MB."
+                    aspectRatio={3 / 1}
                     path={`organizations`}
+                    requireExactSize={{ width: 1500, height: 500 }}
                     {...field}
                   />
                 </FormControl>
@@ -117,22 +116,22 @@ export default function CreateOrganizationForm({
             control={form.control}
             name="logo"
             render={({ field }) => (
-              <>
-                <FormItem className="relative z-40 mx-4 mt-[-50px] flex h-24 w-24 rounded-full bg-white p-1">
-                  <FormControl>
-                    <ImageUpload
-                      className="m-auto h-full w-full rounded-full bg-neutrals-300 text-white"
-                      aspectRatio={1}
-                      path={`organizations`}
-                      {...field}
-                    />
-                  </FormControl>
-                </FormItem>
+              <FormItem>
+                <FormControl>
+                  <ImageUpload
+                    placeholder="Upload logo"
+                    aspectRatio={1}
+                    path={`organizations`}
+                    isProfileImage={true}
+                    {...field}
+                  />
+                </FormControl>
                 <FormMessage />
-              </>
+              </FormItem>
             )}
           />
         </div>
+
         <FormField
           control={form.control}
           name="name"
@@ -142,11 +141,7 @@ export default function CreateOrganizationForm({
                 Organization name
               </FormLabel>
               <FormControl>
-                <Input
-                  disabled={disableName}
-                  placeholder="Name"
-                  {...field}
-                />
+                <Input disabled={disableName} placeholder="Name" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -183,39 +178,22 @@ export default function CreateOrganizationForm({
           )}
         />
 
-        {/* <FormField
-          control={form.control}
-          name="url"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel className="">Company website</FormLabel>
-              <FormControl>
-                <Input placeholder="Company website" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        /> */}
-
         <div className="flex flex-row justify-between">
           {!organization && (
             <Button
               type="button"
               onClick={() => {
-                router.back()
+                router.back();
               }}
-              variant={'outline'}>
+              variant={'outline'}
+            >
               Go back
             </Button>
           )}
-          <Button
-            type="submit"
-            className="ml-auto"
-            variant={'primary'}>
+          <Button type="submit" className="ml-auto" variant={'primary'}>
             {isLoading ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}
-                Please wait
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
               </>
             ) : organization ? (
               'Update'
@@ -226,5 +204,21 @@ export default function CreateOrganizationForm({
         </div>
       </form>
     </Form>
-  )
+  );
+}
+
+{
+  /* <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="">Company website</FormLabel>
+              <FormControl>
+                <Input placeholder="Company website" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        /> */
 }
diff --git a/packages/app/app/studio/(home)/create/page.tsx b/packages/app/app/studio/(home)/create/page.tsx
index 18c025bf5..744fd56d2 100644
--- a/packages/app/app/studio/(home)/create/page.tsx
+++ b/packages/app/app/studio/(home)/create/page.tsx
@@ -1,24 +1,16 @@
-import { Card, CardContent } from '@/components/ui/card'
-import CreateOrganizationForm from '../components/CreateOrganizationForm'
-import Image from 'next/image'
+import { Card, CardContent } from '@/components/ui/card';
+import CreateOrganizationForm from '../components/CreateOrganizationForm';
+import Image from 'next/image';
 
 const CreateOrganization = () => {
   return (
     <div className="mx-auto mt-12 flex w-full max-w-4xl flex-row">
       <div className="w-1/3 space-y-4 rounded-l-xl bg-neutrals-100 p-6">
-        <Image
-          src="/logo.png"
-          alt="streameth logo"
-          height={50}
-          width={50}
-        />
-        <h1 className="text-2xl font-medium">
-          Create an organization
-        </h1>
+        <Image src="/logo.png" alt="streameth logo" height={50} width={50} />
+        <h1 className="text-2xl font-medium">Create an organization</h1>
         <p className="text-sm text-muted-foreground">
-          Organizations are used to manage events and videos. You can
-          create multiple organizations to manage different types of
-          events.
+          Organizations are used to manage events and videos. You can create
+          multiple organizations to manage different types of events.
         </p>
       </div>
       <Card className="m-auto w-2/3 rounded-r-xl border-none bg-white shadow-none">
@@ -27,7 +19,7 @@ const CreateOrganization = () => {
         </CardContent>
       </Card>
     </div>
-  )
-}
+  );
+};
 
-export default CreateOrganization
+export default CreateOrganization;
diff --git a/packages/app/app/studio/(home)/layout.tsx b/packages/app/app/studio/(home)/layout.tsx
index 95f84f4c1..53beb1661 100644
--- a/packages/app/app/studio/(home)/layout.tsx
+++ b/packages/app/app/studio/(home)/layout.tsx
@@ -1,27 +1,23 @@
-import HomePageNavbar from '@/components/Layout/HomePageNavbar'
-import CheckAuthorization from '@/components/authorization/CheckAuthorization'
-import AuthorizationMessage from '@/components/authorization/AuthorizationMessage'
-import Support from '@/components/misc/Support'
+import HomePageNavbar from '@/components/Layout/HomePageNavbar';
+import CheckAuthorization from '@/components/authorization/CheckAuthorization';
+import AuthorizationMessage from '@/components/authorization/AuthorizationMessage';
+import Support from '@/components/misc/Support';
 
 const StudioLayout = async (props: { children: React.ReactNode }) => {
-  const isAuthorized = await CheckAuthorization()
+  const isAuthorized = await CheckAuthorization();
   if (!isAuthorized) {
-    return <AuthorizationMessage />
+    return <AuthorizationMessage />;
   }
 
   return (
     <div className="h-screen w-screen">
-      <HomePageNavbar
-        pages={[]}
-        showLogo={true}
-        showSearchBar={false}
-      />
+      <HomePageNavbar pages={[]} showLogo={true} showSearchBar={false} />
       <div className="top-[74px] flex h-[calc(100vh-74px)] flex-col">
         {props.children}
         <Support />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default StudioLayout
+export default StudioLayout;
diff --git a/packages/app/app/studio/(home)/page.tsx b/packages/app/app/studio/(home)/page.tsx
index f6240dbc5..723968ada 100644
--- a/packages/app/app/studio/(home)/page.tsx
+++ b/packages/app/app/studio/(home)/page.tsx
@@ -1,19 +1,19 @@
-import CreateOrganizationForm from './components/CreateOrganizationForm'
+import CreateOrganizationForm from './components/CreateOrganizationForm';
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
-import Link from 'next/link'
-import Image from 'next/image'
-import { fetchUserAction } from '@/lib/actions/users'
-import { IExtendedUser } from '@/lib/types'
-import { Button } from '@/components/ui/button'
+} from '@/components/ui/card';
+import Link from 'next/link';
+import Image from 'next/image';
+import { fetchUserAction } from '@/lib/actions/users';
+import { IExtendedUser } from '@/lib/types';
+import { Button } from '@/components/ui/button';
 
 const Studio = async () => {
-  const userData: IExtendedUser = await fetchUserAction({})
+  const userData: IExtendedUser = await fetchUserAction({});
 
   return (
     <div className="flex h-full flex-col">
@@ -23,16 +23,15 @@ const Studio = async () => {
             <div className="flex w-full flex-row items-center justify-between py-2">
               <CardTitle> Your organizations</CardTitle>
               <Link href="/studio/create">
-                <Button className="w-full">
-                  Create Organization
-                </Button>
+                <Button className="w-full">Create Organization</Button>
               </Link>
             </div>
             <div className="flex h-full flex-col space-y-2 overflow-auto">
               {userData?.organizations?.map((organization) => (
                 <Link
                   key={organization._id}
-                  href={`/studio/${organization.slug}`}>
+                  href={`/studio/${organization.slug}`}
+                >
                   <Card className="flex h-full flex-row overflow-hidden rounded-xl border border-secondary shadow-none">
                     <CardHeader className="relative p-3 lg:p-3">
                       <Image
@@ -59,9 +58,7 @@ const Studio = async () => {
         ) : (
           <Card className="m-auto w-full border-secondary">
             <CardHeader>
-              <CardTitle>
-                Create an organization to get started
-              </CardTitle>
+              <CardTitle>Create an organization to get started</CardTitle>
             </CardHeader>
             <CardContent>
               <CreateOrganizationForm />
@@ -70,7 +67,7 @@ const Studio = async () => {
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Studio
+export default Studio;
diff --git a/packages/app/app/studio/[organization]/Preview.tsx b/packages/app/app/studio/[organization]/Preview.tsx
index 493832db6..f3b995db6 100644
--- a/packages/app/app/studio/[organization]/Preview.tsx
+++ b/packages/app/app/studio/[organization]/Preview.tsx
@@ -1,17 +1,13 @@
-'use client'
+'use client';
 
-import { useEffect, useState } from 'react'
-import Player from '@/components/ui/Player'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-} from '@/components/ui/dialog'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { deleteSessionAction } from '@/lib/actions/sessions'
-import { toast } from 'sonner'
-import { Asset } from 'livepeer/models/components'
+import { useEffect, useState } from 'react';
+import Player from '@/components/ui/Player';
+import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { deleteSessionAction } from '@/lib/actions/sessions';
+import { toast } from 'sonner';
+import { Asset } from 'livepeer/models/components';
 
 const Preview = ({
   initialIsOpen,
@@ -20,36 +16,36 @@ const Preview = ({
   sessionId,
   organizationSlug,
 }: {
-  initialIsOpen: boolean
-  asset: Asset
-  organizationId: string
-  sessionId: string
-  organizationSlug: string
+  initialIsOpen: boolean;
+  asset: Asset;
+  organizationId: string;
+  sessionId: string;
+  organizationSlug: string;
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const { handleTermChange } = useSearchParams()
-  const { status, playbackUrl, playbackId } = asset
+  const [isOpen, setIsOpen] = useState(false);
+  const { handleTermChange } = useSearchParams();
+  const { status, playbackUrl, playbackId } = asset;
   useEffect(() => {
-    setIsOpen(initialIsOpen)
-  }, [initialIsOpen, playbackId])
+    setIsOpen(initialIsOpen);
+  }, [initialIsOpen, playbackId]);
 
   useEffect(() => {
     if (status?.phase === 'processing') {
       const interval = setInterval(() => {
         handleTermChange([
           { key: 'poll', value: new Date().getTime().toString() },
-        ])
-      }, 10000)
-      return () => clearInterval(interval)
+        ]);
+      }, 10000);
+      return () => clearInterval(interval);
     }
-  }, [status?.phase, handleTermChange])
+  }, [status?.phase, handleTermChange]);
 
   const handleClose = () => {
     if (isOpen) {
-      handleTermChange([{ key: 'previewId', value: '' }])
-      setIsOpen(false)
+      handleTermChange([{ key: 'previewId', value: '' }]);
+      setIsOpen(false);
     }
-  }
+  };
 
   const handleDelete = () => {
     deleteSessionAction({
@@ -57,13 +53,13 @@ const Preview = ({
       sessionId,
     })
       .then(() => {
-        toast.success('Session deleted')
-        handleClose()
+        toast.success('Session deleted');
+        handleClose();
       })
       .catch(() => {
-        toast.error('Error deleting session')
-      })
-  }
+        toast.error('Error deleting session');
+      });
+  };
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
@@ -72,10 +68,7 @@ const Preview = ({
           {status?.phase === 'processing' ? (
             <div className="flex aspect-video flex-col items-center justify-center rounded-lg bg-background p-4 text-black">
               <p className="">Video is processing</p>
-              <p>
-                {Math.round(Number(status?.progress ?? 0) * 100)}%
-                complete
-              </p>
+              <p>{Math.round(Number(status?.progress ?? 0) * 100)}% complete</p>
             </div>
           ) : (
             <Player
@@ -108,7 +101,7 @@ const Preview = ({
         </div>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default Preview
+export default Preview;
diff --git a/packages/app/app/studio/[organization]/clips/components/ClipContext.tsx b/packages/app/app/studio/[organization]/clips/components/ClipContext.tsx
index 485184d01..a672ddd9c 100644
--- a/packages/app/app/studio/[organization]/clips/components/ClipContext.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/ClipContext.tsx
@@ -1,69 +1,56 @@
-'use client'
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useRef,
-} from 'react'
+'use client';
+import React, { createContext, useContext, useState, useRef } from 'react';
 type PlaybackStatus = {
-  progress: number
-  offset: number
-}
+  progress: number;
+  offset: number;
+};
 
 type PlaybackTime = {
-  displayTime: number
-  unix: number
-}
+  displayTime: number;
+  unix: number;
+};
 
 type ClipContextType = {
-  playbackStatus: PlaybackStatus | null
+  playbackStatus: PlaybackStatus | null;
   setPlaybackStatus: React.Dispatch<
     React.SetStateAction<PlaybackStatus | null>
-  >
-  startTime: PlaybackTime
-  setStartTime: React.Dispatch<React.SetStateAction<PlaybackTime>>
-  endTime: PlaybackTime
-  setEndTime: React.Dispatch<React.SetStateAction<PlaybackTime>>
-  isLoading: boolean
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
-  videoRef: React.RefObject<HTMLVideoElement>
-  dragging: string | null
-  setDragging: React.Dispatch<React.SetStateAction<string | null>>
-  selectedTooltip: string | null
-  setSelectedTooltip: React.Dispatch<
-    React.SetStateAction<string | null>
-  >
-  fragmentLoading: boolean
-  setFragmentLoading: React.Dispatch<React.SetStateAction<boolean>>
-}
+  >;
+  startTime: PlaybackTime;
+  setStartTime: React.Dispatch<React.SetStateAction<PlaybackTime>>;
+  endTime: PlaybackTime;
+  setEndTime: React.Dispatch<React.SetStateAction<PlaybackTime>>;
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  videoRef: React.RefObject<HTMLVideoElement>;
+  dragging: string | null;
+  setDragging: React.Dispatch<React.SetStateAction<string | null>>;
+  selectedTooltip: string | null;
+  setSelectedTooltip: React.Dispatch<React.SetStateAction<string | null>>;
+  fragmentLoading: boolean;
+  setFragmentLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
 
-const ClipContext = createContext<ClipContextType | null>(null)
+const ClipContext = createContext<ClipContextType | null>(null);
 
-export const useClipContext = () => useContext(ClipContext)!
+export const useClipContext = () => useContext(ClipContext)!;
 
-export const ClipProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const [playbackStatus, setPlaybackStatus] =
-    useState<PlaybackStatus | null>(null)
+export const ClipProvider = ({ children }: { children: React.ReactNode }) => {
+  const [playbackStatus, setPlaybackStatus] = useState<PlaybackStatus | null>(
+    null
+  );
   const [startTime, setStartTime] = useState<PlaybackTime>({
     displayTime: 0,
     unix: 0,
-  })
+  });
   const [endTime, setEndTime] = useState<PlaybackTime>({
     displayTime: 0,
     unix: 0,
-  })
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [fragmentLoading, setFragmentLoading] =
-    useState<boolean>(false)
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [dragging, setDragging] = useState<string | null>(null)
-  const [selectedTooltip, setSelectedTooltip] = useState<
-    string | null
-  >(null)
+  });
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [fragmentLoading, setFragmentLoading] = useState<boolean>(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [selectedTooltip, setSelectedTooltip] = useState<string | null>(null);
 
   return (
     <ClipContext.Provider
@@ -83,8 +70,9 @@ export const ClipProvider = ({
         setSelectedTooltip,
         fragmentLoading,
         setFragmentLoading,
-      }}>
+      }}
+    >
       {children}
     </ClipContext.Provider>
-  )
-}
+  );
+};
diff --git a/packages/app/app/studio/[organization]/clips/components/ClipSessionList.tsx b/packages/app/app/studio/[organization]/clips/components/ClipSessionList.tsx
index fbeff6804..6628ff643 100644
--- a/packages/app/app/studio/[organization]/clips/components/ClipSessionList.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/ClipSessionList.tsx
@@ -1,22 +1,22 @@
-'use client'
-import VideoCard from '@/components/misc/VideoCard'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { IExtendedEvent, IExtendedSession } from '@/lib/types'
+'use client';
+import VideoCard from '@/components/misc/VideoCard';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { IExtendedEvent, IExtendedSession } from '@/lib/types';
 
 const ClipsSessionList = ({
   sessions,
   event,
 }: {
-  event?: IExtendedEvent
-  sessions: IExtendedSession[]
+  event?: IExtendedEvent;
+  sessions: IExtendedSession[];
 }) => {
-  const { handleTermChange } = useSearchParams()
+  const { handleTermChange } = useSearchParams();
   const sortedSessions = sessions.sort((a, b) => {
     return (
       new Date(b.createdAt ?? 0).getTime() -
       new Date(a.createdAt ?? 0).getTime()
-    )
-  })
+    );
+  });
   return (
     <>
       {sortedSessions.map((session) => (
@@ -24,16 +24,15 @@ const ClipsSessionList = ({
           <div
             className="cursor-pointer"
             onClick={() =>
-              handleTermChange([
-                { key: 'previewId', value: session._id },
-              ])
-            }>
+              handleTermChange([{ key: 'previewId', value: session._id }])
+            }
+          >
             <VideoCard event={event} session={session} />
           </div>
         </div>
       ))}
     </>
-  )
-}
+  );
+};
 
-export default ClipsSessionList
+export default ClipsSessionList;
diff --git a/packages/app/app/studio/[organization]/clips/components/ClipSlider.tsx b/packages/app/app/studio/[organization]/clips/components/ClipSlider.tsx
index 75503dc64..34eaf8099 100644
--- a/packages/app/app/studio/[organization]/clips/components/ClipSlider.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/ClipSlider.tsx
@@ -1,26 +1,18 @@
-'use client'
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-} from 'react'
-import { useClipContext } from './ClipContext'
+'use client';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { useClipContext } from './ClipContext';
 import {
   ArrowLeftSquare,
   ArrowRightSquare,
   PlayIcon,
   PauseIcon,
-} from 'lucide-react'
-import { debounce } from 'lodash'
-import { start } from 'repl'
+} from 'lucide-react';
+import { debounce } from 'lodash';
+import { start } from 'repl';
 
-const debouncedUpdate = debounce(
-  (callback: (data: any) => void, data: any) => {
-    callback(data)
-  },
-  100
-)
+const debouncedUpdate = debounce((callback: (data: any) => void, data: any) => {
+  callback(data);
+}, 100);
 
 const ClipSlider = () => {
   const {
@@ -36,28 +28,27 @@ const ClipSlider = () => {
     selectedTooltip,
     isLoading,
     fragmentLoading,
-  } = useClipContext()
+  } = useClipContext();
 
-  const [initialMousePos, setInitialMousePos] = useState<number>(0)
-  const [initialMarkerPos, setInitialMarkerPos] = useState<number>(0)
-  const [updateTimeStart, setUpdateTimeStart] =
-    useState<boolean>(false)
-  const [updateTimeEnd, setUpdateTimeEnd] = useState<boolean>(false)
+  const [initialMousePos, setInitialMousePos] = useState<number>(0);
+  const [initialMarkerPos, setInitialMarkerPos] = useState<number>(0);
+  const [updateTimeStart, setUpdateTimeStart] = useState<boolean>(false);
+  const [updateTimeEnd, setUpdateTimeEnd] = useState<boolean>(false);
 
   useEffect(() => {
     if (updateTimeStart && !fragmentLoading && playbackStatus) {
       setStartTime({
         unix: Date.now() - playbackStatus.offset,
         displayTime: startTime.displayTime,
-      })
-      setUpdateTimeStart(false)
+      });
+      setUpdateTimeStart(false);
     }
     if (updateTimeEnd && !fragmentLoading && playbackStatus) {
       setEndTime({
         unix: Date.now() - playbackStatus.offset,
         displayTime: endTime.displayTime,
-      })
-      setUpdateTimeEnd(false)
+      });
+      setUpdateTimeEnd(false);
     }
   }, [
     updateTimeStart,
@@ -70,7 +61,7 @@ const ClipSlider = () => {
     setEndTime,
     endTime.displayTime,
     fragmentLoading,
-  ])
+  ]);
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -78,42 +69,36 @@ const ClipSlider = () => {
         e.target instanceof HTMLElement &&
         (e.target.id === 'increment' || e.target.id === 'decrement')
       ) {
-        return
+        return;
       }
 
       if (selectedTooltip) {
-        const tooltipElement =
-          document.getElementById(selectedTooltip)
-        if (
-          tooltipElement &&
-          !tooltipElement.contains(e.target as Node)
-        ) {
-          setSelectedTooltip(null)
+        const tooltipElement = document.getElementById(selectedTooltip);
+        if (tooltipElement && !tooltipElement.contains(e.target as Node)) {
+          setSelectedTooltip(null);
         }
       }
-    }
+    };
 
-    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('mousedown', handleClickOutside);
 
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [selectedTooltip, setSelectedTooltip])
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [selectedTooltip, setSelectedTooltip]);
 
   const handle1SecondIncrementDecrement = useCallback(
     (increment: boolean, marker: string) => {
       if (videoRef.current && playbackStatus) {
         const time =
-          marker === 'start'
-            ? startTime.displayTime
-            : endTime.displayTime
-        const newTime = increment ? time + 1 : time - 1
+          marker === 'start' ? startTime.displayTime : endTime.displayTime;
+        const newTime = increment ? time + 1 : time - 1;
         if (marker === 'start') {
           if (newTime >= 0 && newTime < endTime.displayTime) {
             debouncedUpdate(setStartTime, {
               unix: Date.now() - playbackStatus.offset,
               displayTime: newTime,
-            })
+            });
           }
         } else if (marker === 'end') {
           if (
@@ -123,10 +108,10 @@ const ClipSlider = () => {
             debouncedUpdate(setEndTime, {
               unix: Date.now() - playbackStatus.offset,
               displayTime: newTime,
-            })
+            });
           }
         }
-        videoRef.current.currentTime = newTime
+        videoRef.current.currentTime = newTime;
       }
     },
     [
@@ -137,48 +122,42 @@ const ClipSlider = () => {
       setStartTime,
       setEndTime,
     ]
-  )
+  );
 
-  const handleMouseDown = (
-    marker: string,
-    event: React.MouseEvent
-  ) => {
-    setDragging(marker)
-    setSelectedTooltip(marker)
+  const handleMouseDown = (marker: string, event: React.MouseEvent) => {
+    setDragging(marker);
+    setSelectedTooltip(marker);
 
-    setInitialMousePos(event.clientX)
+    setInitialMousePos(event.clientX);
     setInitialMarkerPos(
       marker === 'start' ? startTime.displayTime : endTime.displayTime
-    )
-  }
+    );
+  };
 
   const handleMouseMove = useCallback(
     (event: MouseEvent) => {
       if (dragging && videoRef.current && playbackStatus) {
-        const rect = videoRef.current.getBoundingClientRect()
-        const mouseDelta = event.clientX - initialMousePos
+        const rect = videoRef.current.getBoundingClientRect();
+        const mouseDelta = event.clientX - initialMousePos;
         const pos =
           initialMarkerPos +
-          (mouseDelta / rect.width) * videoRef.current.duration
-        videoRef.current.currentTime = pos
+          (mouseDelta / rect.width) * videoRef.current.duration;
+        videoRef.current.currentTime = pos;
         if (dragging === 'start') {
           if (pos >= 0 && pos < endTime.displayTime) {
             setStartTime({
               unix: Date.now() - playbackStatus.offset,
               displayTime: pos,
-            })
-            setUpdateTimeStart(true)
+            });
+            setUpdateTimeStart(true);
           }
         } else if (dragging === 'end') {
-          if (
-            pos > startTime.displayTime &&
-            pos <= videoRef.current.duration
-          ) {
+          if (pos > startTime.displayTime && pos <= videoRef.current.duration) {
             setEndTime({
               unix: Date.now() - playbackStatus.offset,
               displayTime: pos,
-            })
-            setUpdateTimeEnd(true)
+            });
+            setUpdateTimeEnd(true);
           }
         }
       }
@@ -194,78 +173,76 @@ const ClipSlider = () => {
       setEndTime,
       videoRef,
     ]
-  )
+  );
 
   const handleMouseUp = useCallback(() => {
-    setDragging(null)
-  }, [])
+    setDragging(null);
+  }, []);
 
   useEffect(() => {
-    window.addEventListener('mousemove', handleMouseMove)
-    window.addEventListener('mouseup', handleMouseUp)
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
     window.addEventListener('keydown', (e) => {
       if (selectedTooltip) {
         if (e.key === 'ArrowRight') {
-          handle1SecondIncrementDecrement(true, selectedTooltip)
+          handle1SecondIncrementDecrement(true, selectedTooltip);
         } else if (e.key === 'ArrowLeft') {
-          handle1SecondIncrementDecrement(false, selectedTooltip)
+          handle1SecondIncrementDecrement(false, selectedTooltip);
         }
       }
 
       if (e.key == ' ' || e.code == 'Space' || e.keyCode == 32) {
         if (videoRef.current) {
           if (videoRef.current.paused) {
-            videoRef.current.play()
+            videoRef.current.play();
           } else {
-            videoRef.current.pause()
+            videoRef.current.pause();
           }
         }
       }
-    })
+    });
     return () => {
-      window.removeEventListener('mousemove', handleMouseMove)
-      window.removeEventListener('mouseup', handleMouseUp)
-    }
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
   }, [
     handle1SecondIncrementDecrement,
     handleMouseMove,
     handleMouseUp,
     selectedTooltip,
     videoRef,
-  ])
+  ]);
 
   const getMarkerPosition = (time: number) => {
     if (videoRef.current && videoRef.current.duration) {
-      return (time / videoRef.current.duration) * 100
+      return (time / videoRef.current.duration) * 100;
     }
-    return 0
-  }
+    return 0;
+  };
 
   const generateTimeStamps = (duration: number): number[] => {
-    const timestamps = []
+    const timestamps = [];
     for (let i = 0; i < duration; i += 1800) {
-      timestamps.push(i)
+      timestamps.push(i);
     }
-    return timestamps
-  }
+    return timestamps;
+  };
 
-  const handleSeek = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
+  const handleSeek = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (videoRef.current) {
-      const rect = e.currentTarget.getBoundingClientRect()
-      const pos = (e.clientX - rect.left) / rect.width
-      videoRef.current.currentTime = pos * videoRef.current.duration
+      const rect = e.currentTarget.getBoundingClientRect();
+      const pos = (e.clientX - rect.left) / rect.width;
+      videoRef.current.currentTime = pos * videoRef.current.duration;
     }
-  }
+  };
 
   const formatTime = (seconds: number) => {
-    if (!seconds) return '00:00:00'
+    if (!seconds) return '00:00:00';
 
-    const date = new Date(0)
-    date.setSeconds(seconds)
-    return date.toISOString().substr(11, 8)
-  }
+    const date = new Date(0);
+    date.setSeconds(seconds);
+    return date.toISOString().substr(11, 8);
+  };
 
   return (
     <div className="flex h-[200px] flex-col">
@@ -284,11 +261,10 @@ const ClipSlider = () => {
           <select
             onChange={(e) => {
               if (videoRef.current) {
-                videoRef.current.playbackRate = parseFloat(
-                  e.target.value
-                )
+                videoRef.current.playbackRate = parseFloat(e.target.value);
               }
-            }}>
+            }}
+          >
             <option value="0.5">0.5x</option>
             <option value="1" selected>
               1x
@@ -311,35 +287,27 @@ const ClipSlider = () => {
         <div className="relative mb-4 h-5" onClick={handleSeek}>
           {videoRef.current &&
             videoRef.current.duration &&
-            generateTimeStamps(videoRef.current.duration).map(
-              (time) => {
-                if (!videoRef || !videoRef.current) return 0
-                return (
+            generateTimeStamps(videoRef.current.duration).map((time) => {
+              if (!videoRef || !videoRef.current) return 0;
+              return (
+                <div
+                  key={time}
+                  className={`absolute flex flex-col`}
+                  style={{
+                    left: `${(time / videoRef.current.duration) * 100}%`,
+                  }}
+                >
+                  <p className={`text-xs ${time !== 0 && 'ml-[-25px]'}`}>
+                    {new Date(time * 1000).toISOString().substr(11, 8)}
+                  </p>
                   <div
-                    key={time}
-                    className={`absolute flex flex-col`}
-                    style={{
-                      left: `${
-                        (time / videoRef.current.duration) * 100
-                      }%`,
-                    }}>
-                    <p
-                      className={`text-xs ${
-                        time !== 0 && 'ml-[-25px]'
-                      }`}>
-                      {new Date(time * 1000)
-                        .toISOString()
-                        .substr(11, 8)}
-                    </p>
-                    <div
-                      className={`h-2 w-[1px] bg-black ${
-                        time !== 0 && 'ml-[-0.5px]'
-                      }`}
-                    />
-                  </div>
-                )
-              }
-            )}
+                    className={`h-2 w-[1px] bg-black ${
+                      time !== 0 && 'ml-[-0.5px]'
+                    }`}
+                  />
+                </div>
+              );
+            })}
         </div>
         <div className="relative flex h-10 rounded-full">
           <div className="my-auto h-2 w-full rounded-xl bg-gray-400" />
@@ -347,10 +315,9 @@ const ClipSlider = () => {
             className="absolute flex h-10 rounded-xl border-2 border-primary"
             style={{
               left: `${getMarkerPosition(startTime.displayTime)}%`,
-              right: `${
-                100 - getMarkerPosition(endTime.displayTime)
-              }%`,
-            }}>
+              right: `${100 - getMarkerPosition(endTime.displayTime)}%`,
+            }}
+          >
             <div className="my-auto h-2 w-full bg-gray-200" />
           </div>
           <Marker
@@ -387,8 +354,8 @@ const ClipSlider = () => {
         </div> */}
       </div>
     </div>
-  )
-}
+  );
+};
 
 const Marker = ({
   startTime,
@@ -400,32 +367,28 @@ const Marker = ({
   selectedTooltip,
   blocked,
 }: {
-  startTime: { displayTime: number; unix: number }
-  endTime: { displayTime: number; unix: number }
-  handleMouseDown: (marker: string, event: React.MouseEvent) => void
-  getMarkerPosition: (time: number) => number
-  formatTime: (seconds: number) => string
-  selectedTooltip: string | null
-  marker: string
-  handle1SecondIncrementDecrement: (
-    increment: boolean,
-    marker: string
-  ) => void
-  blocked: boolean
+  startTime: { displayTime: number; unix: number };
+  endTime: { displayTime: number; unix: number };
+  handleMouseDown: (marker: string, event: React.MouseEvent) => void;
+  getMarkerPosition: (time: number) => number;
+  formatTime: (seconds: number) => string;
+  selectedTooltip: string | null;
+  marker: string;
+  handle1SecondIncrementDecrement: (increment: boolean, marker: string) => void;
+  blocked: boolean;
 }) => {
   return (
     <div
       className={`absolute h-full w-[15px]`}
       style={{
         left: `${getMarkerPosition(
-          marker === 'start'
-            ? startTime.displayTime
-            : endTime.displayTime
+          marker === 'start' ? startTime.displayTime : endTime.displayTime
         )}%`,
       }}
       onMouseDown={(e) => {
-        !blocked && handleMouseDown(marker, e)
-      }}>
+        !blocked && handleMouseDown(marker, e);
+      }}
+    >
       <div className="relative h-full w-full">
         <div
           id={marker}
@@ -438,21 +401,17 @@ const Marker = ({
         {selectedTooltip === marker && (
           <div className="absolute left-[-55px] top-[-50px] flex flex-col items-center justify-center rounded-xl bg-primary p-1 text-xs text-white">
             <p className="flex w-[120px] flex-row items-center justify-center space-x-1">
-              <span>Use</span>{' '}
-              <ArrowLeftSquare width={15} height={15} />
-              <ArrowRightSquare width={15} height={15} />{' '}
-              <span>to trim</span>
+              <span>Use</span> <ArrowLeftSquare width={15} height={15} />
+              <ArrowRightSquare width={15} height={15} /> <span>to trim</span>
             </p>
             {formatTime(
-              marker === 'start'
-                ? startTime.displayTime
-                : endTime.displayTime
+              marker === 'start' ? startTime.displayTime : endTime.displayTime
             )}
           </div>
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ClipSlider
+export default ClipSlider;
diff --git a/packages/app/app/studio/[organization]/clips/components/ClipStatus.tsx b/packages/app/app/studio/[organization]/clips/components/ClipStatus.tsx
index 39229877a..c4f6d9d02 100644
--- a/packages/app/app/studio/[organization]/clips/components/ClipStatus.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/ClipStatus.tsx
@@ -1,11 +1,11 @@
-import { Livepeer } from 'livepeer'
+import { Livepeer } from 'livepeer';
 
 const ClipStatus = async ({ assetId }: { assetId: string }) => {
   const livepeer = new Livepeer({
     apiKey: process.env.LIVEPEER_API_KEY,
-  })
+  });
 
-  const currentClip = (await livepeer.asset.get(assetId)).asset
+  const currentClip = (await livepeer.asset.get(assetId)).asset;
 
   return (
     <div className="mr-auto flex flex-col">
@@ -15,7 +15,7 @@ const ClipStatus = async ({ assetId }: { assetId: string }) => {
         <p>Error: {currentClip?.status?.errorMessage}</p>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ClipStatus
+export default ClipStatus;
diff --git a/packages/app/app/studio/[organization]/clips/components/CreateClipButton.tsx b/packages/app/app/studio/[organization]/clips/components/CreateClipButton.tsx
index b589681c4..b9603ee31 100644
--- a/packages/app/app/studio/[organization]/clips/components/CreateClipButton.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/CreateClipButton.tsx
@@ -1,38 +1,26 @@
-'use client'
-import React from 'react'
-import {
-  createClipAction,
-  createSessionAction,
-} from '@/lib/actions/sessions'
-import { Button } from '@/components/ui/button'
-import { useClipContext } from './ClipContext'
-import { Loader2 } from 'lucide-react'
-import { toast } from 'sonner'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+'use client';
+import React from 'react';
+import { createClipAction, createSessionAction } from '@/lib/actions/sessions';
+import { Button } from '@/components/ui/button';
+import { useClipContext } from './ClipContext';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import {
   ISession,
   SessionType,
-} from 'streameth-new-server/src/interfaces/session.interface'
+} from 'streameth-new-server/src/interfaces/session.interface';
 import {
   IExtendedOrganization,
   IExtendedSession,
   IExtendedStage,
-} from '@/lib/types'
+} from '@/lib/types';
 
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from '@/components/ui/tabs'
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import Combobox from '@/components/ui/combo-box'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import Combobox from '@/components/ui/combo-box';
 import {
   Select,
   SelectTrigger,
@@ -40,12 +28,12 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
-} from '@/components/ui/select'
-import { createStateAction } from '@/lib/actions/state'
+} from '@/components/ui/select';
+import { createStateAction } from '@/lib/actions/state';
 import {
   StateStatus,
   StateType,
-} from 'streameth-new-server/src/interfaces/state.interface'
+} from 'streameth-new-server/src/interfaces/state.interface';
 
 const ClipButton = ({
   playbackId,
@@ -56,20 +44,20 @@ const ClipButton = ({
   custom,
   setDialogOpen,
 }: {
-  playbackId: string
-  selectedRecording: string
-  stageId?: string
-  organizationId: string
-  sessions: IExtendedSession[]
-  custom?: boolean
-  setDialogOpen: (value: boolean) => void
+  playbackId: string;
+  selectedRecording: string;
+  stageId?: string;
+  organizationId: string;
+  sessions: IExtendedSession[];
+  custom?: boolean;
+  setDialogOpen: (value: boolean) => void;
 }) => {
-  const [isLoading, setIsLoading] = React.useState(false)
-  const [name, setName] = React.useState('')
-  const { startTime, endTime } = useClipContext()
-  const [sessionId, setSessionId] = React.useState('')
-  const { handleTermChange } = useSearchParams()
-  const [dayFilter, setDayFilter] = React.useState('')
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [name, setName] = React.useState('');
+  const { startTime, endTime } = useClipContext();
+  const [sessionId, setSessionId] = React.useState('');
+  const { handleTermChange } = useSearchParams();
+  const [dayFilter, setDayFilter] = React.useState('');
 
   const handleCreateClip = async () => {
     let customSession: ISession = {
@@ -81,33 +69,33 @@ const ClipButton = ({
       organizationId,
       speakers: [],
       type: SessionType['clip'],
-    }
+    };
     if (custom) {
       customSession = await createSessionAction({
         session: { ...customSession },
-      })
+      });
     }
 
     const session = custom
       ? customSession
-      : sessions.find((s) => s._id === sessionId)
+      : sessions.find((s) => s._id === sessionId);
 
     if (!endTime || !startTime || startTime < endTime) {
-      toast.error('Start time must be earlier than end time.')
-      return
+      toast.error('Start time must be earlier than end time.');
+      return;
     }
 
     if (!selectedRecording) {
-      toast.error('No recording selected.')
-      return
+      toast.error('No recording selected.');
+      return;
     }
 
     if (!session) {
-      toast.error('Session information is missing.')
-      return
+      toast.error('Session information is missing.');
+      return;
     }
 
-    setIsLoading(true)
+    setIsLoading(true);
     createClipAction({
       playbackId,
       recordingId: selectedRecording,
@@ -116,9 +104,9 @@ const ClipButton = ({
       sessionId: session._id as string,
     })
       .then(async () => {
-        setIsLoading(false)
-        setSessionId('')
-        setDialogOpen(false)
+        setIsLoading(false);
+        setSessionId('');
+        setDialogOpen(false);
 
         await createStateAction({
           state: {
@@ -127,13 +115,13 @@ const ClipButton = ({
             sessionSlug: session.slug,
             organizationId: session.organizationId,
           },
-        })
+        });
 
-        toast.success('Clip created')
+        toast.success('Clip created');
       })
       .catch(() => {
-        setIsLoading(false)
-        toast.error('Error creating clip')
+        setIsLoading(false);
+        toast.error('Error creating clip');
       })
       .finally(() => {
         handleTermChange([
@@ -141,20 +129,18 @@ const ClipButton = ({
             key: 'previewId',
             value: session._id as string,
           },
-        ])
-        setIsLoading(false)
-      })
-  }
+        ]);
+        setIsLoading(false);
+      });
+  };
 
   const uniqueDates = sessions.filter(
     (session, index, self) =>
       index ===
       self.findIndex(
-        (t) =>
-          new Date(t.start).getDate() ===
-          new Date(session.start).getDate()
+        (t) => new Date(t.start).getDate() === new Date(session.start).getDate()
       )
-  )
+  );
 
   return (
     <div className="flex flex-grow flex-col space-y-2">
@@ -182,7 +168,8 @@ const ClipButton = ({
                   {uniqueDates.map((session) => (
                     <SelectItem
                       key={session._id}
-                      value={session.start.toString()}>
+                      value={session.start.toString()}
+                    >
                       {new Date(session.start).toDateString()}
                     </SelectItem>
                   ))}
@@ -190,9 +177,7 @@ const ClipButton = ({
               </SelectContent>
             </Select>
             <Combobox
-              value={
-                sessions.find((s) => s._id === sessionId)?.name || ''
-              }
+              value={sessions.find((s) => s._id === sessionId)?.name || ''}
               setValue={(value) => setSessionId(value)}
               placeholder="Select a session"
               items={[
@@ -201,7 +186,7 @@ const ClipButton = ({
                     return dayFilter !== ''
                       ? new Date(session.start).getDate() ===
                           new Date(Number(dayFilter)).getDate()
-                      : true
+                      : true;
                   })
                   .map((session) => ({
                     label:
@@ -226,19 +211,19 @@ const ClipButton = ({
         }
         onClick={handleCreateClip}
         variant="outlinePrimary"
-        className="mt-auto text-base">
+        className="mt-auto text-base"
+      >
         {isLoading ? (
           <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please
-            wait
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
           </>
         ) : (
           'Create clip'
         )}
       </Button>
     </div>
-  )
-}
+  );
+};
 
 const CreateClipButton = ({
   currentRecording,
@@ -247,16 +232,16 @@ const CreateClipButton = ({
   sessions,
   playbackId,
 }: {
-  currentRecording: string
-  organization: IExtendedOrganization
-  playbackId: string
-  currentStage: IExtendedStage
+  currentRecording: string;
+  organization: IExtendedOrganization;
+  playbackId: string;
+  currentStage: IExtendedStage;
   sessions: {
-    sessions: IExtendedSession[]
-  }
+    sessions: IExtendedSession[];
+  };
 }) => {
-  const { isLoading } = useClipContext()
-  const [dialogOpen, setIsOpen] = React.useState(false)
+  const { isLoading } = useClipContext();
+  const [dialogOpen, setIsOpen] = React.useState(false);
 
   return (
     <Dialog open={dialogOpen} onOpenChange={setIsOpen}>
@@ -269,9 +254,7 @@ const CreateClipButton = ({
                   Clip Session
                 </TabsTrigger>
               )}
-              <TabsTrigger value="custom">
-                Create Custom Clip
-              </TabsTrigger>
+              <TabsTrigger value="custom">Create Custom Clip</TabsTrigger>
             </TabsList>
             {sessions.sessions.length > 0 && (
               <TabsContent value="sessions">
@@ -307,11 +290,12 @@ const CreateClipButton = ({
         onClick={() => setIsOpen(true)}
         variant="outlinePrimary"
         className="w-full"
-        disabled={isLoading}>
+        disabled={isLoading}
+      >
         Create Clip
       </Button>
     </Dialog>
-  )
-}
+  );
+};
 
-export default CreateClipButton
+export default CreateClipButton;
diff --git a/packages/app/app/studio/[organization]/clips/components/Player.tsx b/packages/app/app/studio/[organization]/clips/components/Player.tsx
index 7604d72a3..3c628c431 100644
--- a/packages/app/app/studio/[organization]/clips/components/Player.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/Player.tsx
@@ -1,16 +1,11 @@
-'use client'
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-} from 'react'
-import Hls from 'hls.js'
-import { useClipContext } from './ClipContext'
+'use client';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import Hls from 'hls.js';
+import { useClipContext } from './ClipContext';
 
 export interface HlsPlayerProps {
-  playbackId: string
-  selectedStreamSession: string
+  playbackId: string;
+  selectedStreamSession: string;
 }
 
 const ReactHlsPlayer: React.FC<HlsPlayerProps> = ({
@@ -28,68 +23,68 @@ const ReactHlsPlayer: React.FC<HlsPlayerProps> = ({
     startTime,
     fragmentLoading,
     setFragmentLoading,
-  } = useClipContext()
+  } = useClipContext();
 
   const playbackRef = useRef<{ progress: number; offset: number }>({
     progress: 0,
     offset: 0,
-  })
+  });
 
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null);
 
-  const src = `https://link.storjshare.io/raw/juixm77hfsmhyslrxtycnqfmnlfq/catalyst-recordings-com/hls/${playbackId}/${selectedStreamSession}/output.m3u8`
+  const src = `https://link.storjshare.io/raw/juixm77hfsmhyslrxtycnqfmnlfq/catalyst-recordings-com/hls/${playbackId}/${selectedStreamSession}/output.m3u8`;
 
   useEffect(() => {
     if (Hls.isSupported() && videoRef.current) {
-      const hls = new Hls()
-      hls.loadSource(src)
-      hls.attachMedia(videoRef.current)
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(videoRef.current);
 
       hls.on(Hls.Events.FRAG_CHANGED, (event, data) => {
         if (videoRef.current) {
-          const progress = videoRef.current.currentTime
+          const progress = videoRef.current.currentTime;
           const offset =
             Date.now() -
             (data.frag.rawProgramDateTime
               ? new Date(data.frag.rawProgramDateTime).getTime()
-              : Date.now())
-          playbackRef.current = { progress, offset }
-          setPlaybackStatus(playbackRef.current)
-          console.log(data.frag.rawProgramDateTime)
-          setFragmentLoading(false)
+              : Date.now());
+          playbackRef.current = { progress, offset };
+          setPlaybackStatus(playbackRef.current);
+          console.log(data.frag.rawProgramDateTime);
+          setFragmentLoading(false);
         }
-      })
+      });
 
       // if seeking loading spinner
       videoRef.current.onseeking = () => {
-        setIsLoading(true)
-        setFragmentLoading(true)
-      }
+        setIsLoading(true);
+        setFragmentLoading(true);
+      };
 
       videoRef.current.onseeked = () => {
-        setIsLoading(false)
-      }
+        setIsLoading(false);
+      };
 
       // Set error handling
       hls.on(Hls.Events.ERROR, (event, data) => {
-        setError(data.details)
-      })
+        setError(data.details);
+      });
 
       const intervalId = setInterval(() => {
         if (videoRef.current) {
-          const progress = videoRef.current.currentTime
+          const progress = videoRef.current.currentTime;
           // Update progress without overwriting offset
-          playbackRef.current.progress = progress
-          setPlaybackStatus({ ...playbackRef.current })
+          playbackRef.current.progress = progress;
+          setPlaybackStatus({ ...playbackRef.current });
         }
-      }, 1000)
+      }, 1000);
 
       return () => {
-        hls.destroy()
-        clearInterval(intervalId)
-      }
+        hls.destroy();
+        clearInterval(intervalId);
+      };
     }
-  }, [src, setPlaybackStatus, videoRef, setIsLoading])
+  }, [src, setPlaybackStatus, videoRef, setIsLoading]);
 
   useEffect(() => {
     if (
@@ -101,9 +96,9 @@ const ReactHlsPlayer: React.FC<HlsPlayerProps> = ({
       setEndTime({
         displayTime: videoRef.current.duration,
         unix: Date.now() - playbackStatus.offset,
-      })
+      });
     }
-  }, [setEndTime, videoRef, playbackStatus])
+  }, [setEndTime, videoRef, playbackStatus]);
 
   return (
     <div className="relative mb-4 flex h-2/3 flex-grow">
@@ -115,14 +110,15 @@ const ReactHlsPlayer: React.FC<HlsPlayerProps> = ({
         ref={videoRef}
         autoPlay={false}
         controls={false}
-        className="sticky top-0 w-full rounded-lg"></video>
+        className="sticky top-0 w-full rounded-lg"
+      ></video>
       <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
         {isLoading && (
           <div className="h-20 w-20 animate-spin rounded-full border-b-2 border-t-2 border-primary" />
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ReactHlsPlayer
+export default ReactHlsPlayer;
diff --git a/packages/app/app/studio/[organization]/clips/components/RecordingSelect.tsx b/packages/app/app/studio/[organization]/clips/components/RecordingSelect.tsx
index 3c4481909..f16e88b7b 100644
--- a/packages/app/app/studio/[organization]/clips/components/RecordingSelect.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/RecordingSelect.tsx
@@ -1,25 +1,25 @@
-'use client'
-import React from 'react'
+'use client';
+import React from 'react';
 import {
   Select,
   SelectTrigger,
   SelectValue,
   SelectGroup,
   SelectItem,
-} from '@/components/ui/select'
-import { SelectContent } from '@/components/ui/select'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { Session } from 'livepeer/dist/models/components'
+} from '@/components/ui/select';
+import { SelectContent } from '@/components/ui/select';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { Session } from 'livepeer/dist/models/components';
 const RecordingSelect = ({
   selectedRecording,
   streamRecordings,
 }: {
-  selectedRecording?: string
-  streamRecordings: Session[]
+  selectedRecording?: string;
+  streamRecordings: Session[];
 }) => {
-  const { handleTermChange, searchParams } = useSearchParams()
+  const { handleTermChange, searchParams } = useSearchParams();
 
-  if (!streamRecordings) return <div>No stream sessions found</div>
+  if (!streamRecordings) return <div>No stream sessions found</div>;
 
   return (
     <div className="w-full space-y-2">
@@ -27,12 +27,13 @@ const RecordingSelect = ({
       <Select
         value={selectedRecording}
         onValueChange={(value) => {
-          const session = streamRecordings.find((s) => s.id === value)
+          const session = streamRecordings.find((s) => s.id === value);
           session &&
             handleTermChange([
               { key: 'selectedRecording', value: session.id ?? '' },
-            ])
-        }}>
+            ]);
+        }}
+      >
         <SelectTrigger className="bg-white">
           <SelectValue
             defaultValue={selectedRecording}
@@ -50,7 +51,7 @@ const RecordingSelect = ({
         </SelectContent>
       </Select>
     </div>
-  )
-}
+  );
+};
 
-export default RecordingSelect
+export default RecordingSelect;
diff --git a/packages/app/app/studio/[organization]/clips/components/SelectSession.tsx b/packages/app/app/studio/[organization]/clips/components/SelectSession.tsx
index 8cc6d37c8..6daf30f1b 100644
--- a/packages/app/app/studio/[organization]/clips/components/SelectSession.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/SelectSession.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 import {
   Select,
   SelectGroup,
@@ -6,27 +6,27 @@ import {
   SelectTrigger,
   SelectContent,
   SelectItem,
-} from '@/components/ui/select'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { IExtendedStage } from '@/lib/types'
+} from '@/components/ui/select';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { IExtendedStage } from '@/lib/types';
 
 const SelectSession = ({
   stages,
   currentStageId,
 }: {
-  stages: IExtendedStage[]
-  currentStageId?: string
+  stages: IExtendedStage[];
+  currentStageId?: string;
 }) => {
-  const { handleTermChange } = useSearchParams()
+  const { handleTermChange } = useSearchParams();
 
   const options = stages.map((stage) => ({
     label: stage.name,
     value: stage._id as string,
-  }))
+  }));
 
   const currentStage = options.find(
     (option) => option.value === currentStageId
-  )
+  );
 
   return (
     <div className="flex w-full flex-col space-y-2">
@@ -40,7 +40,8 @@ const SelectSession = ({
               value,
             },
           ])
-        }>
+        }
+      >
         <SelectTrigger className="bg-white">
           <SelectValue placeholder="Select a livestream" />
         </SelectTrigger>
@@ -53,7 +54,7 @@ const SelectSession = ({
         </SelectContent>
       </Select>
     </div>
-  )
-}
+  );
+};
 
-export default SelectSession
+export default SelectSession;
diff --git a/packages/app/app/studio/[organization]/clips/components/SessionSidebar.tsx b/packages/app/app/studio/[organization]/clips/components/SessionSidebar.tsx
index de1d2a89e..10fd7966a 100644
--- a/packages/app/app/studio/[organization]/clips/components/SessionSidebar.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/SessionSidebar.tsx
@@ -1,8 +1,8 @@
-'use client'
-import React from 'react'
-import ClipsSessionList from './ClipSessionList'
-import { IExtendedSession } from '@/lib/types'
-import Combobox from '@/components/ui/combo-box'
+'use client';
+import React from 'react';
+import ClipsSessionList from './ClipSessionList';
+import { IExtendedSession } from '@/lib/types';
+import Combobox from '@/components/ui/combo-box';
 import {
   Select,
   SelectTrigger,
@@ -10,36 +10,32 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
-} from '@/components/ui/select'
-import { CardTitle } from '@/components/ui/card'
-import { IExtendedEvent } from '@/lib/types'
-import { Session, Stream } from 'livepeer/dist/models/components'
+} from '@/components/ui/select';
+import { CardTitle } from '@/components/ui/card';
+import { IExtendedEvent } from '@/lib/types';
+import { Session, Stream } from 'livepeer/dist/models/components';
 
 const SessionSidebar = ({
   event,
   sessions,
 }: {
-  event?: IExtendedEvent
-  sessions: IExtendedSession[]
-  currentRecording?: string
+  event?: IExtendedEvent;
+  sessions: IExtendedSession[];
+  currentRecording?: string;
   recordings: {
-    parentStream: Stream | undefined
-    recordings: Session[]
-  }
+    parentStream: Stream | undefined;
+    recordings: Session[];
+  };
 }) => {
-  const [sessionId, setSessionId] = React.useState('')
+  const [sessionId, setSessionId] = React.useState('');
   const uniqueDates = sessions.filter(
     (session, index, self) =>
       index ===
       self.findIndex(
-        (t) =>
-          new Date(t.start).getDate() ===
-          new Date(session.start).getDate()
+        (t) => new Date(t.start).getDate() === new Date(session.start).getDate()
       )
-  )
-  const [dayFilter, setDayFilter] = React.useState(
-    uniqueDates[0]?.start || ''
-  )
+  );
+  const [dayFilter, setDayFilter] = React.useState(uniqueDates[0]?.start || '');
 
   return (
     <div className="h-full w-[400px] border-l bg-background bg-white">
@@ -61,7 +57,8 @@ const SessionSidebar = ({
                   {uniqueDates.map((session) => (
                     <SelectItem
                       key={session._id}
-                      value={session.start.toString()}>
+                      value={session.start.toString()}
+                    >
                       {new Date(session.start).toDateString()}
                     </SelectItem>
                   ))}
@@ -70,9 +67,7 @@ const SessionSidebar = ({
             </Select>
           )}
           <Combobox
-            value={
-              sessions.find((s) => s._id === sessionId)?.name || ''
-            }
+            value={sessions.find((s) => s._id === sessionId)?.name || ''}
             setValue={(value) => setSessionId(value)}
             placeholder="Select a session"
             items={[
@@ -104,14 +99,12 @@ const SessionSidebar = ({
                   new Date(Number(dayFilter)).getDate()
                 : true
             )
-            .filter((session) =>
-              sessionId ? session._id === sessionId : true
-            )
+            .filter((session) => (sessionId ? session._id === sessionId : true))
             .reverse()}
         />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SessionSidebar
+export default SessionSidebar;
diff --git a/packages/app/app/studio/[organization]/clips/components/TimeSetter.tsx b/packages/app/app/studio/[organization]/clips/components/TimeSetter.tsx
index 68ee61002..954473e43 100644
--- a/packages/app/app/studio/[organization]/clips/components/TimeSetter.tsx
+++ b/packages/app/app/studio/[organization]/clips/components/TimeSetter.tsx
@@ -1,38 +1,33 @@
-'use client'
-import React from 'react'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { useClipContext } from './ClipContext'
-import { Badge } from '@/components/ui/badge'
+'use client';
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useClipContext } from './ClipContext';
+import { Badge } from '@/components/ui/badge';
 
 type TimeSetterProps = {
-  label: string
-  type: 'start' | 'end'
-}
+  label: string;
+  type: 'start' | 'end';
+};
 
 const TimeSetter: React.FC<TimeSetterProps> = ({ label, type }) => {
-  const {
-    playbackStatus,
-    setStartTime,
-    setEndTime,
-    startTime,
-    endTime,
-  } = useClipContext()
+  const { playbackStatus, setStartTime, setEndTime, startTime, endTime } =
+    useClipContext();
 
   const handleSetTime = () => {
     if (playbackStatus) {
       const timeSetting = {
         unix: Date.now() - playbackStatus.offset,
         displayTime: playbackStatus.progress,
-      }
+      };
 
       if (type === 'start') {
-        setStartTime(timeSetting)
+        setStartTime(timeSetting);
       } else {
-        setEndTime(timeSetting)
+        setEndTime(timeSetting);
       }
     }
-  }
+  };
 
   return (
     <div className="w-[200px]">
@@ -41,19 +36,18 @@ const TimeSetter: React.FC<TimeSetterProps> = ({ label, type }) => {
         <Input
           className="border-none bg-white"
           value={
-            type === 'start'
-              ? startTime?.displayTime
-              : endTime?.displayTime
+            type === 'start' ? startTime?.displayTime : endTime?.displayTime
           }
         />
         <Badge
           className="absolute right-0 top-1/2 mx-2 -translate-y-1/2 transform rounded-full bg-accent text-xs text-accent-foreground"
-          onClick={handleSetTime}>
+          onClick={handleSetTime}
+        >
           Set {type.charAt(0).toUpperCase() + type.slice(1)}
         </Badge>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default TimeSetter
+export default TimeSetter;
diff --git a/packages/app/app/studio/[organization]/clips/page.tsx b/packages/app/app/studio/[organization]/clips/page.tsx
index 34e63a741..218fdd993 100644
--- a/packages/app/app/studio/[organization]/clips/page.tsx
+++ b/packages/app/app/studio/[organization]/clips/page.tsx
@@ -1,40 +1,28 @@
-import React, { Suspense } from 'react'
-import { ClipsPageParams } from '@/lib/types'
-import SelectSession from './components/SelectSession'
-import RecordingSelect from './components/RecordingSelect'
-import CreateClipButton from './components/CreateClipButton'
-import { ClipProvider } from './components/ClipContext'
-import ReactHlsPlayer from './components/Player'
-import {
-  fetchStageRecordings,
-  fetchStages,
-} from '@/lib/services/stageService'
-import { fetchAllSessions } from '@/lib/data'
-import { fetchEvent } from '@/lib/services/eventService'
-import { Film } from 'lucide-react'
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import Preview from '../Preview'
-import SessionSidebar from './components/SessionSidebar'
-import {
-  fetchAsset,
-  fetchSession,
-} from '@/lib/services/sessionService'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { notFound } from 'next/navigation'
-import ClipSlider from './components/ClipSlider'
+import React, { Suspense } from 'react';
+import { ClipsPageParams } from '@/lib/types';
+import SelectSession from './components/SelectSession';
+import RecordingSelect from './components/RecordingSelect';
+import CreateClipButton from './components/CreateClipButton';
+import { ClipProvider } from './components/ClipContext';
+import ReactHlsPlayer from './components/Player';
+import { fetchStageRecordings, fetchStages } from '@/lib/services/stageService';
+import { fetchAllSessions } from '@/lib/data';
+import { fetchEvent } from '@/lib/services/eventService';
+import { Film } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import Preview from '../Preview';
+import SessionSidebar from './components/SessionSidebar';
+import { fetchAsset, fetchSession } from '@/lib/services/sessionService';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { notFound } from 'next/navigation';
+import ClipSlider from './components/ClipSlider';
 
-const ClipContainer = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => (
+const ClipContainer = ({ children }: { children: React.ReactNode }) => (
   <div className="h-full w-full">
-    <div className="mx-auto flex h-full w-full flex-row">
-      {children}
-    </div>
+    <div className="mx-auto flex h-full w-full flex-row">{children}</div>
   </div>
-)
+);
 
 const SkeletonSidebar = () => (
   <div className="flex h-full w-1/3 flex-col border-l bg-background bg-white">
@@ -46,25 +34,22 @@ const SkeletonSidebar = () => (
       ))}
     </div>
   </div>
-)
+);
 
-const EventClips = async ({
-  params,
-  searchParams,
-}: ClipsPageParams) => {
-  const { stage, selectedRecording, previewId } = searchParams
+const EventClips = async ({ params, searchParams }: ClipsPageParams) => {
+  const { stage, selectedRecording, previewId } = searchParams;
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
   const stages = await fetchStages({
     organizationId: organization._id,
-  })
+  });
 
   if (stages.length === 0) {
     return (
@@ -74,8 +59,8 @@ const EventClips = async ({
             <Film className="rounded-lg p-4" size={84} />
             <p className="text-lg font-bold">Clip a livestream!</p>
             <p className="text-foreground-muted text-sm">
-              You dont have any stages to clip from, first create a
-              livestream to get started
+              You dont have any stages to clip from, first create a livestream
+              to get started
             </p>
             <Link href={`/studio/${params.organization}/livestreams`}>
               <Button variant={'primary'}>Create a livestream</Button>
@@ -83,12 +68,12 @@ const EventClips = async ({
           </div>
         </div>
       </ClipContainer>
-    )
+    );
   }
 
   const currentStage = stages.find((s) => {
-    return s._id === stage
-  })
+    return s._id === stage;
+  });
 
   if (!currentStage) {
     return (
@@ -99,8 +84,8 @@ const EventClips = async ({
             <Film className="rounded-lg p-4" size={84} />
             <p className="text-lg font-bold">Clip a livestream!</p>
             <p className="text-foreground-muted text-sm">
-              Please select a livestream that has a recordings from
-              the dropdown above
+              Please select a livestream that has a recordings from the dropdown
+              above
             </p>
             <p className="font-bold">or</p>
             <Link href={`/studio/${params.organization}/livestreams`}>
@@ -109,25 +94,25 @@ const EventClips = async ({
           </div>
         </div>
       </ClipContainer>
-    )
+    );
   }
 
   const stageRecordings = await fetchStageRecordings({
     streamId: currentStage?.streamSettings?.streamId ?? '',
-  })
+  });
 
   const currentRecording = (function () {
     if (selectedRecording) {
       const recording = stageRecordings?.recordings.find(
         (recording) => recording?.id === selectedRecording
-      )
+      );
       if (recording) {
-        return recording?.id ?? null
+        return recording?.id ?? null;
       }
-      return null
+      return null;
     }
-    return null
-  })()
+    return null;
+  })();
 
   if (
     stageRecordings?.recordings?.length === 0 ||
@@ -141,8 +126,8 @@ const EventClips = async ({
             <Film className="rounded-lg p-4" size={84} />
             <p className="text-lg font-bold">No recordings</p>
             <p className="text-foreground-muted text-sm">
-              This stream does not have any recordings, go live and
-              come back to clip to clip your livestream
+              This stream does not have any recordings, go live and come back to
+              clip to clip your livestream
             </p>
             <Link href={`/studio/${params.organization}/livestreams`}>
               <Button variant={'primary'}>Go Live</Button>
@@ -150,7 +135,7 @@ const EventClips = async ({
           </div>
         </div>
       </ClipContainer>
-    )
+    );
   }
 
   if (!currentRecording) {
@@ -158,44 +143,41 @@ const EventClips = async ({
       <ClipContainer>
         <div className="mx-auto mb-auto flex w-full max-w-[500px] flex-col space-y-4 p-4">
           <SelectSession stages={stages} currentStageId={stage} />
-          <RecordingSelect
-            streamRecordings={stageRecordings.recordings}
-          />
+          <RecordingSelect streamRecordings={stageRecordings.recordings} />
           <div className="mx-auto flex h-full w-full flex-col items-center justify-center space-y-2 rounded-lg border bg-background bg-white p-4 text-center">
             <Film className="rounded-lg p-4" size={84} />
             <p className="text-lg font-bold">Clip a livestream!</p>
             <p className="text-foreground-muted text-sm">
-              Please select a livestream recording from the dropdown
-              above
+              Please select a livestream recording from the dropdown above
             </p>
           </div>
         </div>
       </ClipContainer>
-    )
+    );
   }
 
   const event = await fetchEvent({
     eventId: currentStage.eventId as string,
-  })
+  });
   const sessions = await fetchAllSessions({
     stageId: currentStage._id,
-  })
+  });
   const previewAsset = await (async function () {
     if (previewId) {
       const session = await fetchSession({
         session: previewId,
-      })
+      });
       if (session) {
         return await fetchAsset({
           assetId: session.assetId as string,
-        })
+        });
       }
     }
-    return undefined
-  })()
+    return undefined;
+  })();
 
   if (!previewAsset) {
-    return notFound()
+    return notFound();
   }
 
   return (
@@ -213,17 +195,13 @@ const EventClips = async ({
         <div className="flex h-full w-full flex-col space-y-4 overflow-auto bg-white p-4">
           <ClipProvider>
             <ReactHlsPlayer
-              playbackId={
-                stageRecordings.parentStream?.playbackId ?? ''
-              }
+              playbackId={stageRecordings.parentStream?.playbackId ?? ''}
               selectedStreamSession={currentRecording}
             />
             <ClipSlider />
             <CreateClipButton
               currentRecording={currentRecording}
-              playbackId={
-                stageRecordings.parentStream?.playbackId ?? ''
-              }
+              playbackId={stageRecordings.parentStream?.playbackId ?? ''}
               organization={organization}
               currentStage={currentStage}
               sessions={sessions}
@@ -234,21 +212,16 @@ const EventClips = async ({
       <Suspense key={currentStage._id} fallback={<SkeletonSidebar />}>
         <SessionSidebar
           event={event ?? undefined}
-          sessions={sessions.sessions.filter(
-            (session) => session.assetId
-          )}
+          sessions={sessions.sessions.filter((session) => session.assetId)}
           currentRecording={currentRecording}
           recordings={stageRecordings}
         />
       </Suspense>
     </ClipContainer>
-  )
-}
+  );
+};
 
-const ClipsPage = async ({
-  params,
-  searchParams,
-}: ClipsPageParams) => {
+const ClipsPage = async ({ params, searchParams }: ClipsPageParams) => {
   const Skeleton = () => (
     <div className="mx-auto mb-auto flex w-full max-w-[500px] flex-col space-y-4 p-4">
       {/* SelectSession Skeleton */}
@@ -270,7 +243,7 @@ const ClipsPage = async ({
         </div>
       </div>
     </div>
-  )
+  );
 
   const Skeleton2 = () => (
     <div className="flex w-full flex-row">
@@ -302,7 +275,7 @@ const ClipsPage = async ({
       </div>
       <SkeletonSidebar />
     </div>
-  )
+  );
   return (
     <Suspense
       key={searchParams.stage + searchParams.selectedRecording}
@@ -312,10 +285,11 @@ const ClipsPage = async ({
         ) : (
           <Skeleton />
         )
-      }>
+      }
+    >
       <EventClips params={params} searchParams={searchParams} />
     </Suspense>
-  )
-}
+  );
+};
 
-export default ClipsPage
+export default ClipsPage;
diff --git a/packages/app/app/studio/[organization]/components/Navigation.tsx b/packages/app/app/studio/[organization]/components/Navigation.tsx
index f7c6bffaf..a195aaf42 100644
--- a/packages/app/app/studio/[organization]/components/Navigation.tsx
+++ b/packages/app/app/studio/[organization]/components/Navigation.tsx
@@ -1,10 +1,10 @@
-'use client'
-import { useState } from 'react'
-import { cn } from '@/lib/utils/utils'
-import { Accordion } from '@/components/ui/accordion'
-import Logo from '@/public/studio_logo.png'
-import LogoCollapsed from '@/public/logo.png'
-import NavigationItem from './NavigationItem'
+'use client';
+import { useState } from 'react';
+import { cn } from '@/lib/utils/utils';
+import { Accordion } from '@/components/ui/accordion';
+import Logo from '@/public/studio_logo.png';
+import LogoCollapsed from '@/public/logo.png';
+import NavigationItem from './NavigationItem';
 import {
   Radio,
   Videotape,
@@ -12,15 +12,15 @@ import {
   Home,
   CalendarDays,
   ScissorsLineDashed,
-} from 'lucide-react'
+} from 'lucide-react';
 import {
   ArrowLeftToLine,
   ArrowRightFromLine,
   Image as ImageIcon,
-} from 'lucide-react'
-import Image from 'next/image'
-import StreamethStudio from '@/lib/svg/StreamethStudio'
-import StreamethLogo from '@/lib/svg/StreamethLogo'
+} from 'lucide-react';
+import Image from 'next/image';
+import StreamethStudio from '@/lib/svg/StreamethStudio';
+import StreamethLogo from '@/lib/svg/StreamethLogo';
 
 const navigationItems = [
   {
@@ -65,14 +65,10 @@ const navigationItems = [
     icon: <Settings />,
     defaultCollapsed: false,
   },
-]
+];
 
-const Navigation = ({
-  organizationSlug,
-}: {
-  organizationSlug: string
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(false)
+const Navigation = ({ organizationSlug }: { organizationSlug: string }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   return (
     <aside
@@ -86,7 +82,8 @@ const Navigation = ({
       )}
       style={{
         transition: 'max-width 0.3s ease-out-in',
-      }}>
+      }}
+    >
       {isCollapsed ? (
         <div className="mx-1 my-2">
           <StreamethLogo />
@@ -110,7 +107,8 @@ const Navigation = ({
 
       <div
         onClick={() => setIsCollapsed(!isCollapsed)}
-        className="mb-5 mt-auto flex w-full cursor-pointer items-center justify-center text-white">
+        className="mb-5 mt-auto flex w-full cursor-pointer items-center justify-center text-white"
+      >
         {isCollapsed ? (
           <ArrowRightFromLine className="mx-auto cursor-pointer" />
         ) : (
@@ -121,7 +119,7 @@ const Navigation = ({
         )}
       </div>
     </aside>
-  )
-}
+  );
+};
 
-export default Navigation
+export default Navigation;
diff --git a/packages/app/app/studio/[organization]/components/NavigationItem.tsx b/packages/app/app/studio/[organization]/components/NavigationItem.tsx
index e4dab2b27..6342d613d 100644
--- a/packages/app/app/studio/[organization]/components/NavigationItem.tsx
+++ b/packages/app/app/studio/[organization]/components/NavigationItem.tsx
@@ -1,8 +1,8 @@
-'use client'
-import React from 'react'
-import { AccordionItem } from '@/components/ui/accordion'
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
+'use client';
+import React from 'react';
+import { AccordionItem } from '@/components/ui/accordion';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
 
 const NavigationItem = ({
   title,
@@ -11,37 +11,37 @@ const NavigationItem = ({
   organization,
   collapsed,
 }: {
-  title: string
-  navigationPath: string
-  icon: React.ReactNode
-  organization: string
-  collapsed?: boolean
+  title: string;
+  navigationPath: string;
+  icon: React.ReactNode;
+  organization: string;
+  collapsed?: boolean;
 }) => {
-  const pathname = usePathname()
-  const params = pathname.split('/')
+  const pathname = usePathname();
+  const params = pathname.split('/');
 
   const active =
-    params[3] === navigationPath ||
-    (!params[3] && navigationPath === '')
+    params[3] === navigationPath || (!params[3] && navigationPath === '');
 
   return (
     <AccordionItem
       value={title}
       title={title}
-      className="border-none text-white">
+      className="border-none text-white"
+    >
       <Link
         passHref
         className={`flex flex-row items-center border-none font-light no-underline drop-shadow ${
           collapsed ? 'justify-center' : 'mx-4 justify-start'
         } cursor-pointer space-x-2 p-2 ${
-          active &&
-          'rounded-lg bg-gradient-to-b from-[#4219FF] to-[#3D22BA]'
+          active && 'rounded-lg bg-gradient-to-b from-[#4219FF] to-[#3D22BA]'
         }`}
-        href={`/studio/${organization}/${navigationPath}`}>
+        href={`/studio/${organization}/${navigationPath}`}
+      >
         {icon} {!collapsed && <p>{title}</p>}
       </Link>
     </AccordionItem>
-  )
-}
+  );
+};
 
-export default NavigationItem
+export default NavigationItem;
diff --git a/packages/app/app/studio/[organization]/components/SwitchOrganization.tsx b/packages/app/app/studio/[organization]/components/SwitchOrganization.tsx
index 1c0587fe2..860fcaf96 100644
--- a/packages/app/app/studio/[organization]/components/SwitchOrganization.tsx
+++ b/packages/app/app/studio/[organization]/components/SwitchOrganization.tsx
@@ -1,19 +1,19 @@
-'use client'
-import Combobox from '@/components/ui/combo-box'
-import React from 'react'
-import { useRouter } from 'next/navigation'
-import { IExtendedOrganization } from '@/lib/types'
+'use client';
+import Combobox from '@/components/ui/combo-box';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { IExtendedOrganization } from '@/lib/types';
 const SwitchOrganization = ({
   organization,
   organizations = [],
 }: {
-  organization?: string
-  organizations?: IExtendedOrganization[]
+  organization?: string;
+  organizations?: IExtendedOrganization[];
 }) => {
-  const router = useRouter()
+  const router = useRouter();
   const selectedSort = organizations?.find(
     (o) => o?.slug === organization
-  )?.name
+  )?.name;
   return (
     <div className="px-2">
       <Combobox
@@ -28,11 +28,11 @@ const SwitchOrganization = ({
         variant="ghost"
         value={selectedSort || ''}
         setValue={(org) => {
-          router.push(`/studio/${org}`)
+          router.push(`/studio/${org}`);
         }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default SwitchOrganization
+export default SwitchOrganization;
diff --git a/packages/app/app/studio/[organization]/destinations/components/DeleteDestination.tsx b/packages/app/app/studio/[organization]/destinations/components/DeleteDestination.tsx
index 0953c3a77..ed470eb83 100644
--- a/packages/app/app/studio/[organization]/destinations/components/DeleteDestination.tsx
+++ b/packages/app/app/studio/[organization]/destinations/components/DeleteDestination.tsx
@@ -1,56 +1,55 @@
-'use client'
-import { Button } from '@/components/ui/button'
+'use client';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogClose,
   DialogContent,
   DialogFooter,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { deleteDestinationAction } from '@/lib/actions/organizations'
+} from '@/components/ui/dialog';
+import { deleteDestinationAction } from '@/lib/actions/organizations';
 
-import React, { useState } from 'react'
-import { LuTrash2 } from 'react-icons/lu'
-import { toast } from 'sonner'
+import React, { useState } from 'react';
+import { LuTrash2 } from 'react-icons/lu';
+import { toast } from 'sonner';
 
 const DeleteDestination = ({
   destinationId,
   organizationId,
 }: {
-  destinationId: string
+  destinationId: string;
 
-  organizationId: string
+  organizationId: string;
 }) => {
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [open, setOpen] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [open, setOpen] = useState(false);
   const handleDeleteDestination = async () => {
-    setIsDeleting(true)
+    setIsDeleting(true);
     await deleteDestinationAction({
       destinationId,
       organizationId,
     })
       .then((response) => {
         if (response) {
-          toast.success('Destination deleted')
-          setOpen(false)
+          toast.success('Destination deleted');
+          setOpen(false);
         } else {
-          toast.error('Error deleting destination')
+          toast.error('Error deleting destination');
         }
       })
       .catch(() => {
-        toast.error('Error deleting destination')
+        toast.error('Error deleting destination');
       })
       .finally(() => {
-        setIsDeleting(false)
-      })
-  }
+        setIsDeleting(false);
+      });
+  };
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>
         <Button className="justify-start" variant={'ghost'}>
-          <LuTrash2 className="h-5 w-5 pr-1 text-destructive" />{' '}
-          Delete
+          <LuTrash2 className="h-5 w-5 pr-1 text-destructive" /> Delete
         </Button>
       </DialogTrigger>
       <DialogContent className="flex flex-col items-center justify-center gap-5">
@@ -68,13 +67,14 @@ const DeleteDestination = ({
           <Button
             onClick={handleDeleteDestination}
             loading={isDeleting}
-            variant="destructive">
+            variant="destructive"
+          >
             Delete
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default DeleteDestination
+export default DeleteDestination;
diff --git a/packages/app/app/studio/[organization]/destinations/connect/components/YoutubeConnectButton.tsx b/packages/app/app/studio/[organization]/destinations/connect/components/YoutubeConnectButton.tsx
index 0cd7af095..faf160ec3 100644
--- a/packages/app/app/studio/[organization]/destinations/connect/components/YoutubeConnectButton.tsx
+++ b/packages/app/app/studio/[organization]/destinations/connect/components/YoutubeConnectButton.tsx
@@ -1,18 +1,17 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import React from 'react'
-import { SiYoutube } from 'react-icons/si'
+'use client';
+import { Button } from '@/components/ui/button';
+import React from 'react';
+import { SiYoutube } from 'react-icons/si';
 
 const YoutubeConnectButton = ({
   organizationSlug,
   organizationId,
 }: {
-  organizationSlug: string
-  organizationId?: string
+  organizationSlug: string;
+  organizationId?: string;
 }) => {
-  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ''
-  const redirectUri =
-    process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI || ''
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || '';
+  const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI || '';
 
   const handleYoutubeConnect = () => {
     const state = encodeURIComponent(
@@ -20,20 +19,21 @@ const YoutubeConnectButton = ({
         redirectUrl: `/studio/${organizationSlug}/destinations`,
         organizationId: organizationId,
       })
-    )
+    );
     // Encode the redirect URL
-    const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&access_type=offline&scope=https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube&state=${state}`
-    window.location.href = authUrl
-  }
+    const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&access_type=offline&scope=https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube&state=${state}`;
+    window.location.href = authUrl;
+  };
 
   return (
     <Button
       onClick={handleYoutubeConnect}
-      className="min-w-[200px] bg-[#FF0000]">
+      className="min-w-[200px] bg-[#FF0000]"
+    >
       <SiYoutube className="mr-2" />
       Youtube Channel
     </Button>
-  )
-}
+  );
+};
 
-export default YoutubeConnectButton
+export default YoutubeConnectButton;
diff --git a/packages/app/app/studio/[organization]/destinations/connect/page.tsx b/packages/app/app/studio/[organization]/destinations/connect/page.tsx
index f57fe19a2..9dd56749c 100644
--- a/packages/app/app/studio/[organization]/destinations/connect/page.tsx
+++ b/packages/app/app/studio/[organization]/destinations/connect/page.tsx
@@ -1,25 +1,25 @@
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
-import React from 'react'
-import { LuArrowLeft } from 'react-icons/lu'
-import { SiTwitter } from 'react-icons/si'
-import YoutubeConnectButton from './components/YoutubeConnectButton'
-import { fetchOrganization } from '@/lib/services/organizationService'
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import React from 'react';
+import { LuArrowLeft } from 'react-icons/lu';
+import { SiTwitter } from 'react-icons/si';
+import YoutubeConnectButton from './components/YoutubeConnectButton';
+import { fetchOrganization } from '@/lib/services/organizationService';
 
 const ConnectSocials = async ({
   params,
 }: {
-  params: { organization: string }
+  params: { organization: string };
 }) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
   const state = encodeURIComponent(
     JSON.stringify({
       redirectUrl: `/studio/${params.organization}/destinations`,
       organizationId: organization?._id,
     })
-  )
+  );
   return (
     <div className="mx-6 h-full p-2">
       <Link href={`/studio/${params.organization}/destinations`}>
@@ -32,9 +32,8 @@ const ConnectSocials = async ({
       <div className="flex flex-col overflow-auto rounded-xl border bg-white p-4">
         <h3 className="mb-3 text-lg font-bold">Add a destination</h3>
         <p>
-          Connect an account to StreamEth. Once connected, you can
-          stream and upload clips and videos to it as often as you
-          like.
+          Connect an account to StreamEth. Once connected, you can stream and
+          upload clips and videos to it as often as you like.
         </p>
         <div className="mt-4 flex w-fit flex-col gap-4">
           <YoutubeConnectButton
@@ -50,7 +49,7 @@ const ConnectSocials = async ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ConnectSocials
+export default ConnectSocials;
diff --git a/packages/app/app/studio/[organization]/destinations/page.tsx b/packages/app/app/studio/[organization]/destinations/page.tsx
index b5fdb772f..1afe6111a 100644
--- a/packages/app/app/studio/[organization]/destinations/page.tsx
+++ b/packages/app/app/studio/[organization]/destinations/page.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React from 'react';
 import {
   Card,
   CardTitle,
   CardDescription,
   CardHeader,
   CardContent,
-} from '@/components/ui/card'
+} from '@/components/ui/card';
 import {
   Table,
   TableHead,
@@ -13,37 +13,37 @@ import {
   TableRow,
   TableBody,
   TableCell,
-} from '@/components/ui/table'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import Image from 'next/image'
-import { SiX, SiYoutube } from 'react-icons/si'
-import { LuRadio } from 'react-icons/lu'
-import DeleteDestination from './components/DeleteDestination'
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
+} from '@/components/ui/table';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import Image from 'next/image';
+import { SiX, SiYoutube } from 'react-icons/si';
+import { LuRadio } from 'react-icons/lu';
+import DeleteDestination from './components/DeleteDestination';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
 
 const Destinations = async ({
   params,
 }: {
-  params: { organization: string }
+  params: { organization: string };
 }) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
-  if (!organization) return null
+  if (!organization) return null;
 
   const renderSocialTypeIcon = (type: string) => {
-    const className = 'absolute right-0 bottom-0'
+    const className = 'absolute right-0 bottom-0';
     switch (type) {
       case 'youtube':
-        return <SiYoutube color="#FF0000" className={className} />
+        return <SiYoutube color="#FF0000" className={className} />;
       case 'twitter':
-        return <SiX className={className} />
+        return <SiX className={className} />;
       default:
-        return <LuRadio color="#000" className={className} />
+        return <LuRadio color="#000" className={className} />;
     }
-  }
+  };
 
   return (
     <div className="mx-auto mt-12 flex h-[90%] w-full max-w-4xl">
@@ -67,43 +67,41 @@ const Destinations = async ({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {organization?.socials?.map(
-                ({ _id, name, type, thumbnail }) => (
-                  <TableRow key={_id}>
-                    <TableCell className="flex items-center gap-4">
-                      <div className="relative">
-                        <Image
-                          className="rounded-full"
-                          src={thumbnail!}
-                          width={50}
-                          height={50}
-                          alt={type}
-                        />
-                        {renderSocialTypeIcon(type)}
-                      </div>
-
-                      <div>
-                        <p className="font-semibold">{name}</p>
-                        <p className="text-ext-muted text-sm capitalize">
-                          {type}
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <DeleteDestination
-                        destinationId={_id}
-                        organizationId={organization._id}
+              {organization?.socials?.map(({ _id, name, type, thumbnail }) => (
+                <TableRow key={_id}>
+                  <TableCell className="flex items-center gap-4">
+                    <div className="relative">
+                      <Image
+                        className="rounded-full"
+                        src={thumbnail!}
+                        width={50}
+                        height={50}
+                        alt={type}
                       />
-                    </TableCell>
-                  </TableRow>
-                )
-              )}
+                      {renderSocialTypeIcon(type)}
+                    </div>
+
+                    <div>
+                      <p className="font-semibold">{name}</p>
+                      <p className="text-ext-muted text-sm capitalize">
+                        {type}
+                      </p>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <DeleteDestination
+                      destinationId={_id}
+                      organizationId={organization._id}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
             </TableBody>
           </Table>
         </CardContent>
       </Card>
     </div>
-  )
-}
+  );
+};
 
-export default Destinations
+export default Destinations;
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/DeleteEventButton.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/DeleteEventButton.tsx
index 02d33df5e..e47e4f1c7 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/DeleteEventButton.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/DeleteEventButton.tsx
@@ -1,48 +1,47 @@
-'use client'
-import { deleteEventAction } from '@/lib/actions/events'
-import { IExtendedEvent } from '@/lib/types'
-import { toast } from 'sonner'
-import { Button } from '@/components/ui/button'
-import { useRouter } from 'next/navigation'
+'use client';
+import { deleteEventAction } from '@/lib/actions/events';
+import { IExtendedEvent } from '@/lib/types';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { useRouter } from 'next/navigation';
 
 const DeleteEvent = ({
   organizationId,
   event,
 }: {
-  organizationId: string
-  event: IExtendedEvent
+  organizationId: string;
+  event: IExtendedEvent;
 }) => {
-  const router = useRouter()
+  const router = useRouter();
   const handleDeleteEvent = (eventId: string) => {
-    if (
-      window.confirm('Are you sure you want to delete this event?')
-    ) {
+    if (window.confirm('Are you sure you want to delete this event?')) {
       const response = deleteEventAction({
         eventId,
         organizationId: event.organizationId as string,
       })
         .then((response) => {
           if (response) {
-            toast.success('Event deleted')
-            router.push('/studio/' + organizationId)
+            toast.success('Event deleted');
+            router.push('/studio/' + organizationId);
           } else {
-            toast.error('Error deleting event')
+            toast.error('Error deleting event');
           }
         })
         .catch(() => {
-          toast.error('Error deleting event')
-        })
+          toast.error('Error deleting event');
+        });
     }
-  }
+  };
 
   return (
     <Button
       onClick={() => handleDeleteEvent(event._id!)}
       variant={'destructive'}
-      type="button">
+      type="button"
+    >
       Delete event
     </Button>
-  )
-}
+  );
+};
 
-export default DeleteEvent
+export default DeleteEvent;
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/eventAccordion.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/eventAccordion.tsx
index 4c3fac676..49f65b929 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/eventAccordion.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/eventAccordion.tsx
@@ -1,16 +1,16 @@
-'use client'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { eventSchema } from '@/lib/schema'
+'use client';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { eventSchema } from '@/lib/schema';
 
-import DataConfigElement from '@/components/misc/form/dataConfigElement'
+import DataConfigElement from '@/components/misc/form/dataConfigElement';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@/components/ui/accordion'
+} from '@/components/ui/accordion';
 
 import {
   Form,
@@ -19,38 +19,34 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import Combobox from '@/components/ui/combo-box'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import ColorPicker from '@/components/misc/form/colorPicker'
-import TimePicker from '@/components/misc/form/timePicker'
-import DatePicker from '@/components/misc/form/datePicker'
-import { generateTimezones } from '@/lib/utils/time'
-import { toast } from 'sonner'
-import { useCallback, useState } from 'react'
-import MDEditor from '@uiw/react-md-editor'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import Combobox from '@/components/ui/combo-box';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import ColorPicker from '@/components/misc/form/colorPicker';
+import TimePicker from '@/components/misc/form/timePicker';
+import DatePicker from '@/components/misc/form/datePicker';
+import { generateTimezones } from '@/lib/utils/time';
+import { toast } from 'sonner';
+import { useCallback, useState } from 'react';
+import MDEditor from '@uiw/react-md-editor';
 
-import {
-  syncEventImportAction,
-  updateEventAction,
-} from '@/lib/actions/events'
-import { IExtendedEvent } from '@/lib/types'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import DeleteEvent from '../DeleteEventButton'
+import { syncEventImportAction, updateEventAction } from '@/lib/actions/events';
+import { IExtendedEvent } from '@/lib/types';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import DeleteEvent from '../DeleteEventButton';
 
 const EventAccordion = ({
   organizationId,
   event,
 }: {
-  organizationId: string
-  event: IExtendedEvent
+  organizationId: string;
+  event: IExtendedEvent;
 }) => {
-  const { handleTermChange, searchParams } = useSearchParams()
-  const [isUpdatingEvent, setIsUpdatingEvent] =
-    useState<boolean>(false)
-  const [isSyncingEvent, setIsSyncingEvent] = useState<boolean>(false)
+  const { handleTermChange, searchParams } = useSearchParams();
+  const [isUpdatingEvent, setIsUpdatingEvent] = useState<boolean>(false);
+  const [isSyncingEvent, setIsSyncingEvent] = useState<boolean>(false);
   const form = useForm<z.infer<typeof eventSchema>>({
     resolver: zodResolver(eventSchema),
     defaultValues: {
@@ -67,10 +63,10 @@ const EventAccordion = ({
       dataImporter: event.dataImporter,
       timezone: event.timezone,
     },
-  })
+  });
   // 2. Define a submit handler.
   function onSubmit(values: z.infer<typeof eventSchema>) {
-    setIsUpdatingEvent(true)
+    setIsUpdatingEvent(true);
     const response = updateEventAction({
       event: {
         ...values,
@@ -81,39 +77,39 @@ const EventAccordion = ({
     })
       .then((response) => {
         if (response) {
-          toast.success('Event updated')
+          toast.success('Event updated');
         } else {
-          toast.error('Error updating event')
+          toast.error('Error updating event');
         }
       })
       .catch(() => {
-        toast.error('Error updating event')
+        toast.error('Error updating event');
       })
       .finally(() => {
-        setIsUpdatingEvent(false)
-      })
+        setIsUpdatingEvent(false);
+      });
   }
 
   const handleEventSync = async () => {
-    setIsSyncingEvent(true)
+    setIsSyncingEvent(true);
     const response = syncEventImportAction({
       eventId: event._id,
       organizationId: event.organizationId as string,
     })
       .then((response) => {
         if (response) {
-          toast.success('Event synced')
+          toast.success('Event synced');
         } else {
-          toast.error('Error syncing event')
+          toast.error('Error syncing event');
         }
       })
       .catch(() => {
-        toast.error('Error syncing event')
+        toast.error('Error syncing event');
       })
       .finally(() => {
-        setIsSyncingEvent(false)
-      })
-  }
+        setIsSyncingEvent(false);
+      });
+  };
 
   return (
     <Form {...form}>
@@ -129,8 +125,9 @@ const EventAccordion = ({
               },
               { key: 'stage', value: '' },
               { key: 'stageSettings', value: '' },
-            ])
-          }}>
+            ]);
+          }}
+        >
           <AccordionItem value="item-1" className="px-2 text-black">
             <AccordionTrigger>Basics</AccordionTrigger>
             <AccordionContent className="space-y-8 p-2">
@@ -167,7 +164,8 @@ const EventAccordion = ({
               <Button
                 disabled={isUpdatingEvent}
                 type="submit"
-                className="ml-auto">
+                className="ml-auto"
+              >
                 Save
               </Button>
             </AccordionContent>
@@ -252,10 +250,7 @@ const EventAccordion = ({
                   <FormItem>
                     <FormLabel className="">Location</FormLabel>
                     <FormControl>
-                      <Input
-                        placeholder="e.g Denver, US"
-                        {...field}
-                      />
+                      <Input placeholder="e.g Denver, US" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -283,7 +278,8 @@ const EventAccordion = ({
               <Button
                 disabled={isUpdatingEvent}
                 type="submit"
-                className="ml-auto">
+                className="ml-auto"
+              >
                 Save
               </Button>
             </AccordionContent>
@@ -374,7 +370,8 @@ const EventAccordion = ({
               <Button
                 disabled={isUpdatingEvent}
                 type="submit"
-                className="ml-auto">
+                className="ml-auto"
+              >
                 Save
               </Button>
             </AccordionContent>
@@ -383,8 +380,8 @@ const EventAccordion = ({
             <AccordionTrigger>Event CMS</AccordionTrigger>
             <AccordionContent className="space-y-8 p-2">
               <span>
-                Import your speaker data and your schedule from one of
-                our supported data providers.
+                Import your speaker data and your schedule from one of our
+                supported data providers.
               </span>
               <FormField
                 control={form.control}
@@ -410,7 +407,8 @@ const EventAccordion = ({
                   onClick={handleEventSync}
                   variant="secondary"
                   disabled={isSyncingEvent}
-                  type="button">
+                  type="button"
+                >
                   Sync
                 </Button>
               </div>
@@ -419,16 +417,13 @@ const EventAccordion = ({
           <AccordionItem value="item-4" className="px-2">
             <AccordionTrigger>More</AccordionTrigger>
             <AccordionContent className="flex flex-col space-y-8 p-2">
-              <DeleteEvent
-                organizationId={organizationId}
-                event={event}
-              />
+              <DeleteEvent organizationId={organizationId} event={event} />
             </AccordionContent>
           </AccordionItem>
         </Accordion>
       </form>
     </Form>
-  )
-}
+  );
+};
 
-export default EventAccordion
+export default EventAccordion;
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/index.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/index.tsx
index 2f80fae43..21a136bfa 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/index.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/index.tsx
@@ -1,24 +1,24 @@
-'use client'
-import EventAccordion from './eventAccordion'
-import StagesAccordion from './stagesAccordion'
-import { cn } from '@/lib/utils/utils'
-import { Button } from '@/components/ui/button'
-import CreateStageForm from '../stageSettings/createStageForm'
-import Link from 'next/link'
-import { IExtendedEvent, IExtendedStage } from '@/lib/types'
-import { updateEventAction } from '@/lib/actions/events'
-import { toast } from 'sonner'
-import { ArrowLeft } from 'lucide-react'
+'use client';
+import EventAccordion from './eventAccordion';
+import StagesAccordion from './stagesAccordion';
+import { cn } from '@/lib/utils/utils';
+import { Button } from '@/components/ui/button';
+import CreateStageForm from '../stageSettings/createStageForm';
+import Link from 'next/link';
+import { IExtendedEvent, IExtendedStage } from '@/lib/types';
+import { updateEventAction } from '@/lib/actions/events';
+import { toast } from 'sonner';
+import { ArrowLeft } from 'lucide-react';
 const Navigation = ({
   event,
   stages,
   organizationId,
   organizationSlug,
 }: {
-  event: IExtendedEvent
-  stages: IExtendedStage[]
-  organizationId: string
-  organizationSlug: string
+  event: IExtendedEvent;
+  stages: IExtendedStage[];
+  organizationId: string;
+  organizationSlug: string;
 }) => {
   const handlePublishEvent = () => {
     updateEventAction({
@@ -26,27 +26,27 @@ const Navigation = ({
     })
       .then((response) => {
         if (response) {
-          toast.success('Event updated')
+          toast.success('Event updated');
         } else {
-          toast.error('Error publishing event')
+          toast.error('Error publishing event');
         }
       })
       .catch(() => {
-        toast.error('Error publishing event')
-      })
-  }
+        toast.error('Error publishing event');
+      });
+  };
   return (
     <div
       className={cn(
         'flex h-full w-2/6 min-w-[400px] flex-col overflow-auto border-r border-border bg-white text-black'
-      )}>
+      )}
+    >
       <div className="flex flex-row items-center justify-between border-b border-border p-2">
-        <h3 className="mb-2 mt-4 text-2xl font-bold">
-          Event settings
-        </h3>
+        <h3 className="mb-2 mt-4 text-2xl font-bold">Event settings</h3>
         <Button
           onClick={handlePublishEvent}
-          variant={!event.unlisted ? 'outline' : 'default'}>
+          variant={!event.unlisted ? 'outline' : 'default'}
+        >
           {event.unlisted ? 'Publish' : 'Unpublish'}
         </Button>
       </div>
@@ -72,12 +72,13 @@ const Navigation = ({
       <div className="mt-auto flex flex-row items-center justify-between p-2">
         <Link
           href={`/studio/${organizationId}/event`}
-          className="flex flex-row p-2 hover:underline">
+          className="flex flex-row p-2 hover:underline"
+        >
           <ArrowLeft /> exit event editor
         </Link>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navigation
+export default Navigation;
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/stagesAccordion.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/stagesAccordion.tsx
index 0c6ae61ad..0e2a7649a 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/stagesAccordion.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/navigation/stagesAccordion.tsx
@@ -1,48 +1,43 @@
-'use client'
-import { useState } from 'react'
+'use client';
+import { useState } from 'react';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@/components/ui/accordion'
-import { deleteStageAction } from '@/lib/actions/stages'
-import { IExtendedEvent, IExtendedStage } from '@/lib/types'
-import { toast } from 'sonner'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import Link from 'next/link'
+} from '@/components/ui/accordion';
+import { deleteStageAction } from '@/lib/actions/stages';
+import { IExtendedEvent, IExtendedStage } from '@/lib/types';
+import { toast } from 'sonner';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import Link from 'next/link';
 
 const StageAccordion = ({
   organization,
   stages,
   event,
 }: {
-  organization: string
-  stages: IExtendedStage[]
-  event: IExtendedEvent
+  organization: string;
+  stages: IExtendedStage[];
+  event: IExtendedEvent;
 }) => {
-  const { handleTermChange, searchParams } = useSearchParams()
+  const { handleTermChange, searchParams } = useSearchParams();
 
-  const stageSetting = searchParams.get('stageSetting')
-  const selectedStage = searchParams.get('stage')
-  const [value, setValue] = useState(stageSetting ?? '')
-  const handleDeleteStage = async (
-    stageId: string,
-    organizationId: string
-  ) => {
-    if (
-      window.confirm('Are you sure you want to delete this stage?')
-    ) {
+  const stageSetting = searchParams.get('stageSetting');
+  const selectedStage = searchParams.get('stage');
+  const [value, setValue] = useState(stageSetting ?? '');
+  const handleDeleteStage = async (stageId: string, organizationId: string) => {
+    if (window.confirm('Are you sure you want to delete this stage?')) {
       await deleteStageAction({ stageId, organizationId })
         .then((response) => {
           if (response) {
-            toast.success('Stage deleted')
+            toast.success('Stage deleted');
           } else {
-            toast.error('Error deleting stage')
+            toast.error('Error deleting stage');
           }
         })
         .catch(() => {
-          toast.error('Error deleting stage')
+          toast.error('Error deleting stage');
         })
         .finally(() => {
           handleTermChange([
@@ -50,10 +45,10 @@ const StageAccordion = ({
               key: 'settings',
               value: 'event',
             },
-          ])
-        })
+          ]);
+        });
     }
-  }
+  };
   return (
     <Accordion type="single" value={value} onValueChange={setValue}>
       {stages.map((stage) => {
@@ -61,7 +56,8 @@ const StageAccordion = ({
           <AccordionItem
             className="px-2"
             key={stage._id}
-            value={stage?._id as string}>
+            value={stage?._id as string}
+          >
             <AccordionTrigger
               onClick={() => {
                 handleTermChange([
@@ -73,8 +69,9 @@ const StageAccordion = ({
                     key: 'settings',
                     value: 'stage',
                   },
-                ])
-              }}>
+                ]);
+              }}
+            >
               {stage.name}
             </AccordionTrigger>
             <AccordionContent
@@ -88,20 +85,20 @@ const StageAccordion = ({
                     key: 'stageSetting',
                     value: 'settings',
                   },
-                ])
-              }}>
+                ]);
+              }}
+            >
               <p className={`${'border-l border-primary'} px-2`}>
                 Livestream settings
               </p>
             </AccordionContent>
-            <Link
-              href={`/studio/${organization}/clips?stage=${stage._id}`}>
+            <Link href={`/studio/${organization}/clips?stage=${stage._id}`}>
               <AccordionContent>
                 <p
                   className={`${
-                    stageSetting === 'clip' &&
-                    'border-l border-primary'
-                  } px-2`}>
+                    stageSetting === 'clip' && 'border-l border-primary'
+                  } px-2`}
+                >
                   Clips
                 </p>
               </AccordionContent>
@@ -111,15 +108,16 @@ const StageAccordion = ({
                 handleDeleteStage(
                   stage._id as string,
                   event?.organizationId as string
-                )
-              }}>
+                );
+              }}
+            >
               <p className={`px-2`}>Delete</p>
             </AccordionContent>
           </AccordionItem>
-        )
+        );
       })}
     </Accordion>
-  )
-}
+  );
+};
 
-export default StageAccordion
+export default StageAccordion;
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/StageConfig.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/StageConfig.tsx
index cfa667788..3892f8de0 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/StageConfig.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/StageConfig.tsx
@@ -1,19 +1,19 @@
-import { fetchStage } from '@/lib/services/stageService'
-import LivestreamEmbedCode from '@/app/studio/[organization]/livestreams/[streamId]/components/LivestreamEmbedCode'
-import Multistream from '@/app/studio/[organization]/livestreams/[streamId]/components/Multistream'
-import StreamConfigWithPlayer from '@/app/studio/[organization]/livestreams/[streamId]/components/StreamConfigWithPlayer'
-import StreamHeader from '@/app/studio/[organization]/livestreams/[streamId]/components/StreamHeader'
+import { fetchStage } from '@/lib/services/stageService';
+import LivestreamEmbedCode from '@/app/studio/[organization]/livestreams/[streamId]/components/LivestreamEmbedCode';
+import Multistream from '@/app/studio/[organization]/livestreams/[streamId]/components/Multistream';
+import StreamConfigWithPlayer from '@/app/studio/[organization]/livestreams/[streamId]/components/StreamConfigWithPlayer';
+import StreamHeader from '@/app/studio/[organization]/livestreams/[streamId]/components/StreamHeader';
 
 const StreamConfig = async ({
   organization,
   stageId,
 }: {
-  organization: string
-  stageId: string
+  organization: string;
+  stageId: string;
 }) => {
-  const stage = await fetchStage({ stage: stageId })
+  const stage = await fetchStage({ stage: stageId });
   if (!stage || !stage.streamSettings?.streamId) {
-    return <div> no stage found</div>
+    return <div> no stage found</div>;
   }
 
   return (
@@ -37,7 +37,7 @@ const StreamConfig = async ({
         playerName={stage?.name}
       />
     </div>
-  )
-}
+  );
+};
 
-export default StreamConfig
+export default StreamConfig;
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/createStageForm.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/createStageForm.tsx
index 8e90085c9..9099ff5ac 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/createStageForm.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/createStageForm.tsx
@@ -1,9 +1,9 @@
-'use client'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Button } from '@/components/ui/button'
+'use client';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -11,27 +11,23 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   DialogHeader,
-} from '@/components/ui/dialog'
-import { StageSchema } from '@/lib/schema'
-import { toast } from 'sonner'
-import { createStageAction } from '@/lib/actions/stages'
-import { Loader2 } from 'lucide-react'
-import { IExtendedEvent } from '@/lib/types'
+} from '@/components/ui/dialog';
+import { StageSchema } from '@/lib/schema';
+import { toast } from 'sonner';
+import { createStageAction } from '@/lib/actions/stages';
+import { Loader2 } from 'lucide-react';
+import { IExtendedEvent } from '@/lib/types';
 
-export default function CreateStageForm({
-  event,
-}: {
-  event: IExtendedEvent
-}) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
+export default function CreateStageForm({ event }: { event: IExtendedEvent }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const form = useForm<z.infer<typeof StageSchema>>({
     resolver: zodResolver(StageSchema),
     defaultValues: {
@@ -42,24 +38,24 @@ export default function CreateStageForm({
         streamId: '',
       },
     },
-  })
+  });
 
   function onSubmit(values: z.infer<typeof StageSchema>) {
-    setIsLoading(true)
+    setIsLoading(true);
     createStageAction({
       stage: values,
     })
       .then(() => {
-        setIsOpen(false)
-        toast.success('Stage created')
+        setIsOpen(false);
+        toast.success('Stage created');
       })
       .catch(() => {
-        toast.error('Error creating stage')
+        toast.error('Error creating stage');
       })
       .finally(() => {
-        setIsLoading(false)
-        window.history.pushState(null, '', `?eventId=${event.slug}`)
-      })
+        setIsLoading(false);
+        window.history.pushState(null, '', `?eventId=${event.slug}`);
+      });
   }
 
   return (
@@ -72,9 +68,7 @@ export default function CreateStageForm({
           <DialogTitle>Create stage</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-8">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             <FormField
               control={form.control}
               name="name"
@@ -126,5 +120,5 @@ export default function CreateStageForm({
         </Form>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/multistream/CreateMultistreamTarget.tsx b/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/multistream/CreateMultistreamTarget.tsx
index 3ca8ebad3..38649613d 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/multistream/CreateMultistreamTarget.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/components/stageSettings/multistream/CreateMultistreamTarget.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
 
-import React, { useEffect, useState } from 'react'
-import { toast } from 'sonner'
-import { Button } from '@/components/ui/button'
+import React, { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -10,38 +10,38 @@ import {
   DialogTitle,
   DialogFooter,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { createMultistreamAction } from '@/lib/actions/stages'
-import { ReloadIcon } from '@radix-ui/react-icons'
-import { useFormState, useFormStatus } from 'react-dom'
-import { Plus } from 'lucide-react'
+} from '@/components/ui/dialog';
+import { createMultistreamAction } from '@/lib/actions/stages';
+import { ReloadIcon } from '@radix-ui/react-icons';
+import { useFormState, useFormStatus } from 'react-dom';
+import { Plus } from 'lucide-react';
 
 const initialState = {
   message: '',
   success: false,
-}
+};
 
 export const CreateMultistreamTarget = ({
   streamId,
   organizationId,
   btnName = 'Add',
 }: {
-  streamId?: string
-  organizationId?: string
-  btnName?: string
+  streamId?: string;
+  organizationId?: string;
+  btnName?: string;
 }) => {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
   const [state, formAction] = useFormState(
     createMultistreamAction,
     initialState
-  )
+  );
 
   useEffect(() => {
     if (state.message) {
-      toast[state.success ? 'success' : 'error'](state.message)
-      setOpen(false)
+      toast[state.success ? 'success' : 'error'](state.message);
+      setOpen(false);
     }
-  }, [state])
+  }, [state]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -59,5 +59,5 @@ export const CreateMultistreamTarget = ({
         </DialogHeader>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
diff --git a/packages/app/app/studio/[organization]/event/[eventId]/page.tsx b/packages/app/app/studio/[organization]/event/[eventId]/page.tsx
index e74e935f2..fd73171ab 100644
--- a/packages/app/app/studio/[organization]/event/[eventId]/page.tsx
+++ b/packages/app/app/studio/[organization]/event/[eventId]/page.tsx
@@ -1,18 +1,18 @@
-import React, { Suspense } from 'react'
-import { TooltipProvider } from '@/components/ui/tooltip'
-import { studioPageParams } from '@/lib/types'
-import { fetchEvent } from '@/lib/services/eventService'
-import { fetchEventStages } from '@/lib/services/stageService'
-import StreamConfig from './components/stageSettings/StageConfig'
-import EventHomeComponent from '@/app/[organization]/[event]/components/EventHomeComponent'
-import { notFound } from 'next/navigation'
-import Navigation from './components/navigation'
+import React, { Suspense } from 'react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { studioPageParams } from '@/lib/types';
+import { fetchEvent } from '@/lib/services/eventService';
+import { fetchEventStages } from '@/lib/services/stageService';
+import StreamConfig from './components/stageSettings/StageConfig';
+import EventHomeComponent from '@/app/[organization]/[event]/components/EventHomeComponent';
+import { notFound } from 'next/navigation';
+import Navigation from './components/navigation';
 
 export default async function EventPage({
   params,
   searchParams,
 }: studioPageParams) {
-  const { settings, stage: stageId } = searchParams
+  const { settings, stage: stageId } = searchParams;
 
   // const event = await fetchEvent({ eventId: params?.eventId })
   // if (!event) return notFound()
@@ -58,5 +58,5 @@ export default async function EventPage({
     //     </div>
     //   )}
     // </div>
-  )
+  );
 }
diff --git a/packages/app/app/studio/[organization]/event/components/DeleteEvent.tsx b/packages/app/app/studio/[organization]/event/components/DeleteEvent.tsx
index 1f55d0ae8..fec03c001 100644
--- a/packages/app/app/studio/[organization]/event/components/DeleteEvent.tsx
+++ b/packages/app/app/studio/[organization]/event/components/DeleteEvent.tsx
@@ -1,6 +1,6 @@
-'use client'
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
+'use client';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -9,30 +9,30 @@ import {
   DialogTitle,
   DialogTrigger,
   DialogClose,
-} from '@/components/ui/dialog'
-import { deleteEventAction } from '@/lib/actions/events'
-import { IExtendedEvent } from '@/lib/types'
-import { Trash2 } from 'lucide-react'
-import { ReactNode } from 'react'
+} from '@/components/ui/dialog';
+import { deleteEventAction } from '@/lib/actions/events';
+import { IExtendedEvent } from '@/lib/types';
+import { Trash2 } from 'lucide-react';
+import { ReactNode } from 'react';
 
 const DeleteAsset = ({
   event,
   TriggerComponent,
 }: {
-  event: IExtendedEvent
-  TriggerComponent: ReactNode
+  event: IExtendedEvent;
+  TriggerComponent: ReactNode;
 }) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [open, setOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
+  const [open, setOpen] = useState(false);
   const handleDelete = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     await deleteEventAction({
       organizationId: event.organizationId as string,
       eventId: event._id,
-    })
-    setIsLoading(false)
-    setOpen(false)
-  }
+    });
+    setIsLoading(false);
+    setOpen(false);
+  };
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -51,13 +51,14 @@ const DeleteAsset = ({
           <Button
             loading={isLoading}
             onClick={() => handleDelete()}
-            variant={'destructive'}>
+            variant={'destructive'}
+          >
             Delete event
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default DeleteAsset
+export default DeleteAsset;
diff --git a/packages/app/app/studio/[organization]/event/components/EventTable.tsx b/packages/app/app/studio/[organization]/event/components/EventTable.tsx
index 35b0260a4..6976ce2fc 100644
--- a/packages/app/app/studio/[organization]/event/components/EventTable.tsx
+++ b/packages/app/app/studio/[organization]/event/components/EventTable.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import { FilePenLine, Eye, TrashIcon } from 'lucide-react'
+import Image from 'next/image';
+import Link from 'next/link';
+import { FilePenLine, Eye, TrashIcon } from 'lucide-react';
 import {
   Table,
   TableHeader,
@@ -8,25 +8,25 @@ import {
   TableHead,
   TableBody,
   TableCell,
-} from '@/components/ui/table'
-import { Trash2 } from 'lucide-react'
+} from '@/components/ui/table';
+import { Trash2 } from 'lucide-react';
 import {
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { IExtendedEvent } from '@/lib/types'
-import DeleteEvent from './DeleteEvent'
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { IExtendedEvent } from '@/lib/types';
+import DeleteEvent from './DeleteEvent';
 
 const EventTable = async ({
   organization,
   events,
 }: {
-  organization: string
-  events: IExtendedEvent[]
+  organization: string;
+  events: IExtendedEvent[];
 }) => {
   return (
     <div className="flex h-full w-full flex-col bg-white">
@@ -34,9 +34,8 @@ const EventTable = async ({
         <CardHeader>
           <CardTitle>Events</CardTitle>
           <CardDescription className="max-w-[500px]">
-            Create a customised landing page for your event, stream on
-            multiple stages concurrently, and engage with your
-            audience in real time!
+            Create a customised landing page for your event, stream on multiple
+            stages concurrently, and engage with your audience in real time!
           </CardDescription>
         </CardHeader>
         <CardFooter>
@@ -76,9 +75,7 @@ const EventTable = async ({
                   </div>
                 </div>
               </TableCell>
-              <TableCell>
-                {event.unlisted ? 'unlisted' : 'public'}
-              </TableCell>
+              <TableCell>{event.unlisted ? 'unlisted' : 'public'}</TableCell>
               <TableCell>
                 {new Date(event.start).toDateString()} -
                 {new Date(event.end).toDateString()}
@@ -87,7 +84,8 @@ const EventTable = async ({
                 <Button variant={'outline'}>
                   <Link
                     className="events-center flex flex-row justify-center space-x-2"
-                    href={`/studio/${organization}/event/${event._id}`}>
+                    href={`/studio/${organization}/event/${event._id}`}
+                  >
                     <FilePenLine className="text-muted-foreground" />
                     <p className="">Edit</p>
                   </Link>
@@ -95,7 +93,8 @@ const EventTable = async ({
                 <Button variant={'outline'}>
                   <Link
                     className="events-center flex flex-row justify-center space-x-2"
-                    href={`/${event.organizationId}/${event.slug}`}>
+                    href={`/${event.organizationId}/${event.slug}`}
+                  >
                     <Eye className="text-muted-foreground" />
                     <p className="">View</p>
                   </Link>
@@ -114,7 +113,7 @@ const EventTable = async ({
         </TableBody>
       </Table>
     </div>
-  )
-}
+  );
+};
 
-export default EventTable
+export default EventTable;
diff --git a/packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx b/packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx
index 072f2d582..49009ddb4 100644
--- a/packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx
+++ b/packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx
@@ -1,16 +1,11 @@
-'use client'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { formSchema } from '@/lib/schema'
-import * as z from 'zod'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
+'use client';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { formSchema } from '@/lib/schema';
+import * as z from 'zod';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -18,33 +13,32 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import DatePicker from '@/components/misc/form/datePicker'
-import Combobox from '@/components/ui/combo-box'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import ColorPicker from '@/components/misc/form/colorPicker'
-import TimePicker from '@/components/misc/form/timePicker'
-import Link from 'next/link'
-import { createEventAction } from '@/lib/actions/events'
-import { toast } from 'sonner'
-import { generateTimezones } from '@/lib/utils/time'
-import { Loader2 } from 'lucide-react'
-import MDEditor from '@uiw/react-md-editor'
-import { IExtendedOrganization } from '@/lib/types'
-import { useRouter } from 'next/navigation'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
-import DataConfigElement from '@/components/misc/form/dataConfigElement'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import DatePicker from '@/components/misc/form/datePicker';
+import Combobox from '@/components/ui/combo-box';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import ColorPicker from '@/components/misc/form/colorPicker';
+import TimePicker from '@/components/misc/form/timePicker';
+import Link from 'next/link';
+import { createEventAction } from '@/lib/actions/events';
+import { toast } from 'sonner';
+import { generateTimezones } from '@/lib/utils/time';
+import { Loader2 } from 'lucide-react';
+import MDEditor from '@uiw/react-md-editor';
+import { IExtendedOrganization } from '@/lib/types';
+import { useRouter } from 'next/navigation';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
+import DataConfigElement from '@/components/misc/form/dataConfigElement';
 
 export default function CreateEventForm({
   organization,
 }: {
-  organization: IExtendedOrganization
+  organization: IExtendedOrganization;
 }) {
-  const [stage, setStage] = useState<number>(0)
-  const [isCreatingEvent, setIsCreatingEvent] =
-    useState<boolean>(false)
-  const router = useRouter()
+  const [stage, setStage] = useState<number>(0);
+  const [isCreatingEvent, setIsCreatingEvent] = useState<boolean>(false);
+  const router = useRouter();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -63,35 +57,33 @@ export default function CreateEventForm({
       accentColor: '',
       dataImporter: [],
     },
-  })
+  });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     if (values.start > values.end) {
-      toast.error('Start date must be before the end date')
-      setIsCreatingEvent(false)
-      return
+      toast.error('Start date must be before the end date');
+      setIsCreatingEvent(false);
+      return;
     }
-    setIsCreatingEvent(true)
+    setIsCreatingEvent(true);
     const response = createEventAction({
       event: { ...values, organizationId: organization?._id },
     })
       .then((response) => {
         if (response) {
-          toast.success('Event created')
-          router.push(
-            `/studio/${organization?.slug}/event/${response._id}`
-          )
-          router.refresh()
+          toast.success('Event created');
+          router.push(`/studio/${organization?.slug}/event/${response._id}`);
+          router.refresh();
         } else {
-          toast.error('Error creating event')
+          toast.error('Error creating event');
         }
       })
       .catch(() => {
-        toast.error('Error creating event')
+        toast.error('Error creating event');
       })
       .finally(() => {
-        setIsCreatingEvent(false)
-      })
+        setIsCreatingEvent(false);
+      });
   }
 
   return (
@@ -105,29 +97,28 @@ export default function CreateEventForm({
               { stage: 1, name: 'Design' },
               { stage: 2, name: 'Data' },
             ].map((i, index) => (
-              <div
-                className="relative flex w-full flex-col"
-                key={i.stage}>
+              <div className="relative flex w-full flex-col" key={i.stage}>
                 <div
                   onClick={() => setStage(i.stage)}
                   className={`z-50 mx-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-sm text-white ${
-                    stage === i.stage
-                      ? 'bg-green-500'
-                      : 'bg-secondary'
-                  }`}>
+                    stage === i.stage ? 'bg-green-500' : 'bg-secondary'
+                  }`}
+                >
                   {i.stage + 1}
                 </div>
                 {(i.stage === 0 || i.stage === 2) && (
                   <div
                     className={`${
                       i.stage === 2 ? 'right-0' : 'left-0'
-                    } absolute top-0 z-40 h-full w-1/2 bg-white`}></div>
+                    } absolute top-0 z-40 h-full w-1/2 bg-white`}
+                  ></div>
                 )}
                 <hr className="absolute top-[15px] z-[0] w-full bg-black" />
                 <p
                   className={`z-50 mx-auto ${
                     stage === i.stage ? 'text-black' : 'text-muted'
-                  }`}>
+                  }`}
+                >
                   {i.name}
                 </p>
               </div>
@@ -145,7 +136,8 @@ export default function CreateEventForm({
                       display: 'block',
                     }
               }
-              id="section1">
+              id="section1"
+            >
               <FormField
                 control={form.control}
                 name="name"
@@ -298,11 +290,10 @@ export default function CreateEventForm({
                       display: 'block',
                     }
               }
-              className="space-y-4 p-4">
+              className="space-y-4 p-4"
+            >
               <div className=" ">
-                <p className="mb-4 text-lg">
-                  Upload event Logo and Banner
-                </p>
+                <p className="mb-4 text-lg">Upload event Logo and Banner</p>
                 <FormField
                   control={form.control}
                   name="banner"
@@ -368,9 +359,7 @@ export default function CreateEventForm({
                   name="accentColor"
                   render={({ field }) => (
                     <FormItem className="w-full max-w-[600px]">
-                      <p className="mb-2 text-lg">
-                        Choose accent color
-                      </p>
+                      <p className="mb-2 text-lg">Choose accent color</p>
                       <FormControl>
                         <ColorPicker
                           color={field.value}
@@ -392,16 +381,15 @@ export default function CreateEventForm({
                   : {
                       display: 'block',
                     }
-              }>
+              }
+            >
               <div className="flex flex-col space-y-4">
-                <p className="text-lg font-semibold">
-                  Import event data
-                </p>
+                <p className="text-lg font-semibold">Import event data</p>
                 <p className="max-w-[550px]">
-                  Import your event data from Pretalx or Google
-                  sheets. Add Speakers and Schedule to your even. If
-                  you dont have a data source yet, you can create a
-                  new Google Sheet using our template.
+                  Import your event data from Pretalx or Google sheets. Add
+                  Speakers and Schedule to your even. If you dont have a data
+                  source yet, you can create a new Google Sheet using our
+                  template.
                 </p>
               </div>
               <FormField
@@ -426,9 +414,10 @@ export default function CreateEventForm({
                 <Button
                   variant={'outline'}
                   onClick={(e) => {
-                    e.preventDefault()
-                    setStage(stage - 1)
-                  }}>
+                    e.preventDefault();
+                    setStage(stage - 1);
+                  }}
+                >
                   Back
                 </Button>
               )}
@@ -436,9 +425,10 @@ export default function CreateEventForm({
                 <Button
                   variant={'primary'}
                   onClick={(e) => {
-                    e.preventDefault()
-                    setStage(stage + 1)
-                  }}>
+                    e.preventDefault();
+                    setStage(stage + 1);
+                  }}
+                >
                   Next
                 </Button>
               )}
@@ -446,11 +436,12 @@ export default function CreateEventForm({
                 <Button
                   disabled={getFormSubmitStatus(form)}
                   className="ml-2"
-                  type="submit">
+                  type="submit"
+                >
                   {isCreatingEvent ? (
                     <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}
-                      Please wait
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please
+                      wait
                     </>
                   ) : (
                     'Create Event'
@@ -462,5 +453,5 @@ export default function CreateEventForm({
         </CardContent>
       </Card>
     </Form>
-  )
+  );
 }
diff --git a/packages/app/app/studio/[organization]/event/create/page.tsx b/packages/app/app/studio/[organization]/event/create/page.tsx
index 6ec746e64..aff5238ab 100644
--- a/packages/app/app/studio/[organization]/event/create/page.tsx
+++ b/packages/app/app/studio/[organization]/event/create/page.tsx
@@ -1,32 +1,27 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import CreateEventForm from './components/createEventForm'
-import { studioPageParams } from '@/lib/types'
-import { notFound } from 'next/navigation'
-import { fetchOrganization } from '@/lib/services/organizationService'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import CreateEventForm from './components/createEventForm';
+import { studioPageParams } from '@/lib/types';
+import { notFound } from 'next/navigation';
+import { fetchOrganization } from '@/lib/services/organizationService';
 
 const CreateEventPage = async ({ params }: studioPageParams) => {
   if (!params.organization) {
-    return notFound()
+    return notFound();
   }
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return notFound()
+    return notFound();
   }
 
   return (
     <div className="h-full w-full p-4">
       <CreateEventForm organization={organization} />
     </div>
-  )
-}
+  );
+};
 
-export default CreateEventPage
+export default CreateEventPage;
diff --git a/packages/app/app/studio/[organization]/event/page.tsx b/packages/app/app/studio/[organization]/event/page.tsx
index 33b69a750..0bca4a1ca 100644
--- a/packages/app/app/studio/[organization]/event/page.tsx
+++ b/packages/app/app/studio/[organization]/event/page.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import EventTable from './components/EventTable'
-import { studioPageParams } from '@/lib/types'
-import { fetchEvents } from '@/lib/services/eventService'
+import React from 'react';
+import EventTable from './components/EventTable';
+import { studioPageParams } from '@/lib/types';
+import { fetchEvents } from '@/lib/services/eventService';
 
 const Events = async ({ params }: studioPageParams) => {
   // const events = await fetchEvents({
@@ -11,7 +11,7 @@ const Events = async ({ params }: studioPageParams) => {
   return (
     <></>
     // <EventTable organization={params.organization} events={events} />
-  )
-}
+  );
+};
 
-export default Events
+export default Events;
diff --git a/packages/app/app/studio/[organization]/layout.tsx b/packages/app/app/studio/[organization]/layout.tsx
index a010d3391..58568a0ef 100644
--- a/packages/app/app/studio/[organization]/layout.tsx
+++ b/packages/app/app/studio/[organization]/layout.tsx
@@ -1,28 +1,28 @@
-import { studioPageParams } from '@/lib/types'
-import React from 'react'
-import { Button } from '@/components/ui/button'
-import { fetchUserAction } from '@/lib/actions/users'
-import SwitchOrganization from './components/SwitchOrganization'
-import AuthorizationMessage from '@/components/authorization/AuthorizationMessage'
-import CheckAuthorization from '@/components/authorization/CheckAuthorization'
-import { hasOrganization } from '@/lib/utils/utils'
-import HomePageNavbar from '@/components/Layout/HomePageNavbar'
-import Link from 'next/link'
-import SidebarMenu from '@/components/Sidebar/SidebarMenu'
-import Support from '@/components/misc/Support'
+import { studioPageParams } from '@/lib/types';
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { fetchUserAction } from '@/lib/actions/users';
+import SwitchOrganization from './components/SwitchOrganization';
+import AuthorizationMessage from '@/components/authorization/AuthorizationMessage';
+import CheckAuthorization from '@/components/authorization/CheckAuthorization';
+import { hasOrganization } from '@/lib/utils/utils';
+import HomePageNavbar from '@/components/Layout/HomePageNavbar';
+import Link from 'next/link';
+import SidebarMenu from '@/components/Sidebar/SidebarMenu';
+import Support from '@/components/misc/Support';
 
 const Layout = async ({
   children,
   params,
 }: {
-  children: React.ReactNode
-  params: studioPageParams['params']
+  children: React.ReactNode;
+  params: studioPageParams['params'];
 }) => {
-  const isAuthorized = await CheckAuthorization()
+  const isAuthorized = await CheckAuthorization();
   if (!isAuthorized) {
-    return <AuthorizationMessage />
+    return <AuthorizationMessage />;
   }
-  const userData = await fetchUserAction({})
+  const userData = await fetchUserAction({});
 
   return (
     <div className="flex h-screen w-screen flex-row">
@@ -37,21 +37,14 @@ const Layout = async ({
         />
 
         <div className="top-[54px] flex h-[calc(100vh-54px)] flex-col overflow-hidden border-t border-secondary">
-          {!hasOrganization(
-            userData?.organizations,
-            params.organization
-          ) ? (
+          {!hasOrganization(userData?.organizations, params.organization) ? (
             <div className="mx-auto flex h-screen w-4/5 flex-col items-center justify-center text-center">
-              Organization not found or You do not belong to this
-              organization, switch organization or create a new one
+              Organization not found or You do not belong to this organization,
+              switch organization or create a new one
               <div className="mt-5 flex gap-5">
-                <SwitchOrganization
-                  organizations={userData?.organizations}
-                />
+                <SwitchOrganization organizations={userData?.organizations} />
                 <Link href="/studio/create">
-                  <Button variant="outlinePrimary">
-                    Create Organization
-                  </Button>
+                  <Button variant="outlinePrimary">Create Organization</Button>
                 </Link>
               </div>
             </div>
@@ -66,7 +59,7 @@ const Layout = async ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/AddSpeakersInput.tsx b/packages/app/app/studio/[organization]/library/[session]/components/AddSpeakersInput.tsx
index 47b63b990..0cc9df441 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/AddSpeakersInput.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/AddSpeakersInput.tsx
@@ -1,39 +1,37 @@
-import { ISpeaker } from 'streameth-new-server/src/interfaces/speaker.interface'
-import SpeakerIcon from '@/components/speakers/speakerIcon'
-import { useEffect, useState } from 'react'
-import { apiUrl, cn } from '@/lib/utils/utils'
-import { Button } from '@/components/ui/button'
+import { ISpeaker } from 'streameth-new-server/src/interfaces/speaker.interface';
+import SpeakerIcon from '@/components/speakers/speakerIcon';
+import { useEffect, useState } from 'react';
+import { apiUrl, cn } from '@/lib/utils/utils';
+import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from '@/components/ui/command'
+} from '@/components/ui/command';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
+} from '@/components/ui/popover';
 
 const AddSpeakersInput = ({
   speakers,
   eventId,
 }: {
-  speakers: ISpeaker[]
-  eventId: string
+  speakers: ISpeaker[];
+  eventId: string;
 }) => {
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-  const [allSpeakers, setAllSpeakers] = useState<ISpeaker[]>([])
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState('');
+  const [allSpeakers, setAllSpeakers] = useState<ISpeaker[]>([]);
   const fetchSpeakers = async (): Promise<any> =>
-    fetch(`${apiUrl()}/speakers/event/${eventId}`).then((res) =>
-      res.json()
-    )
+    fetch(`${apiUrl()}/speakers/event/${eventId}`).then((res) => res.json());
 
   useEffect(() => {
-    fetchSpeakers().then((speakers) => setAllSpeakers(speakers.data))
-  }, [])
+    fetchSpeakers().then((speakers) => setAllSpeakers(speakers.data));
+  }, []);
 
   return (
     <div>
@@ -48,19 +46,16 @@ const AddSpeakersInput = ({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-[200px] justify-between">
+            className="w-[200px] justify-between"
+          >
             {value
-              ? allSpeakers.find((speaker) => speaker._id === value)
-                  ?.name
+              ? allSpeakers.find((speaker) => speaker._id === value)?.name
               : 'Select speaker...'}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[200px] p-0">
           <Command>
-            <CommandInput
-              placeholder="Search speaker..."
-              className="h-9"
-            />
+            <CommandInput placeholder="Search speaker..." className="h-9" />
             <CommandEmpty>No speaker found.</CommandEmpty>
             <CommandGroup>
               {allSpeakers.map((speaker) => (
@@ -68,11 +63,10 @@ const AddSpeakersInput = ({
                   key={speaker.name}
                   value={speaker._id}
                   onSelect={(currentValue) => {
-                    setValue(
-                      currentValue === value ? '' : currentValue
-                    )
-                    setOpen(false)
-                  }}>
+                    setValue(currentValue === value ? '' : currentValue);
+                    setOpen(false);
+                  }}
+                >
                   {speaker.name}
                 </CommandItem>
               ))}
@@ -81,7 +75,7 @@ const AddSpeakersInput = ({
         </PopoverContent>
       </Popover>
     </div>
-  )
-}
+  );
+};
 
-export default AddSpeakersInput
+export default AddSpeakersInput;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/EditSessionForm.tsx b/packages/app/app/studio/[organization]/library/[session]/components/EditSessionForm.tsx
index c1eed35cf..359ca6035 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/EditSessionForm.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/EditSessionForm.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Button } from '@/components/ui/button'
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -12,35 +12,35 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { sessionSchema } from '@/lib/schema'
-import { toast } from 'sonner'
-import { Loader2, Trash2 } from 'lucide-react'
-import { IExtendedSession } from '@/lib/types'
-import { updateSessionAction } from '@/lib/actions/sessions'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
-import DeleteAsset from '../../components/DeleteAsset'
-import { Textarea } from '@/components/ui/textarea'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import { useRouter } from 'next/navigation'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { sessionSchema } from '@/lib/schema';
+import { toast } from 'sonner';
+import { Loader2, Trash2 } from 'lucide-react';
+import { IExtendedSession } from '@/lib/types';
+import { updateSessionAction } from '@/lib/actions/sessions';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
+import DeleteAsset from '../../components/DeleteAsset';
+import { Textarea } from '@/components/ui/textarea';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import { useRouter } from 'next/navigation';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@/components/ui/select';
 
 const EditSessionForm = ({
   session,
   organizationSlug,
 }: {
-  session: IExtendedSession
-  organizationSlug: string
+  session: IExtendedSession;
+  organizationSlug: string;
 }) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
 
   const form = useForm<z.infer<typeof sessionSchema>>({
     resolver: zodResolver(sessionSchema),
@@ -51,10 +51,10 @@ const EditSessionForm = ({
       assetId: session.assetId,
       published: session.published,
     },
-  })
+  });
 
   function onSubmit(values: z.infer<typeof sessionSchema>) {
-    setIsLoading(true)
+    setIsLoading(true);
 
     updateSessionAction({
       session: {
@@ -72,16 +72,14 @@ const EditSessionForm = ({
       .then(() => toast.success('Session updated'))
       .catch(() => toast.error('Error updating session'))
       .finally(() => {
-        setIsLoading(false)
-        router.push(`/studio/${organizationSlug}/library`)
-      })
+        setIsLoading(false);
+        router.push(`/studio/${organizationSlug}/library`);
+      });
   }
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
         <FormField
           control={form.control}
           name="name"
@@ -123,9 +121,8 @@ const EditSessionForm = ({
               <FormLabel>Visibility</FormLabel>
               <FormControl>
                 <Select
-                  onValueChange={(value) =>
-                    field.onChange(value === 'true')
-                  }>
+                  onValueChange={(value) => field.onChange(value === 'true')}
+                >
                   <SelectTrigger className="bg-white">
                     <SelectValue
                       placeholder={field.value ? 'Public' : 'Private'}
@@ -165,7 +162,8 @@ const EditSessionForm = ({
             TriggerComponent={
               <Button
                 variant={'destructive-outline'}
-                className="space-x-2 hover:bg-gray-100">
+                className="space-x-2 hover:bg-gray-100"
+              >
                 <Trash2 />
                 <p>Delete video</p>
               </Button>
@@ -174,7 +172,8 @@ const EditSessionForm = ({
           <Button
             disabled={getFormSubmitStatus(form) || isLoading}
             type="submit"
-            variant={'primary'}>
+            variant={'primary'}
+          >
             {isLoading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -187,7 +186,7 @@ const EditSessionForm = ({
         </div>
       </form>
     </Form>
-  )
-}
+  );
+};
 
-export default EditSessionForm
+export default EditSessionForm;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/ImageDropzone.tsx b/packages/app/app/studio/[organization]/library/[session]/components/ImageDropzone.tsx
index 6303c618c..1d6b58eae 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/ImageDropzone.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/ImageDropzone.tsx
@@ -1,74 +1,74 @@
-'use client'
+'use client';
 
-import Image from 'next/image'
-import { ImageUp, X } from 'lucide-react'
-import { getImageUrl } from '@/lib/utils/utils'
-import { toast } from 'sonner'
-import { useCallback, useState, forwardRef } from 'react'
-import { useDropzone } from 'react-dropzone'
+import Image from 'next/image';
+import { ImageUp, X } from 'lucide-react';
+import { getImageUrl } from '@/lib/utils/utils';
+import { toast } from 'sonner';
+import { useCallback, useState, forwardRef } from 'react';
+import { useDropzone } from 'react-dropzone';
 
 interface ImageDropzoneProps {
-  id?: string
-  placeholder?: string
-  onChange: (files: string | null) => void
-  value: string | null | undefined
-  path: string
+  id?: string;
+  placeholder?: string;
+  onChange: (files: string | null) => void;
+  value: string | null | undefined;
+  path: string;
 }
 
 function getImageData(file: File) {
-  const dataTransfer = new DataTransfer()
+  const dataTransfer = new DataTransfer();
 
-  dataTransfer.items.add(file)
+  dataTransfer.items.add(file);
 
-  const files = dataTransfer.files
-  const displayUrl = URL.createObjectURL(file)
-  return { files, displayUrl }
+  const files = dataTransfer.files;
+  const displayUrl = URL.createObjectURL(file);
+  return { files, displayUrl };
 }
 
 const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
   (props, ref) => {
-    const { onChange, value, path, ...rest } = props
+    const { onChange, value, path, ...rest } = props;
     const [preview, setPreview] = useState(
       value ? getImageUrl('/' + path + '/' + value) : ''
-    )
-    const [isUploading, setIsUploading] = useState(false)
+    );
+    const [isUploading, setIsUploading] = useState(false);
 
     const onSubmit = async (file: File) => {
-      if (!file) return
-      setIsUploading(true)
+      if (!file) return;
+      setIsUploading(true);
       try {
-        const data = new FormData()
-        data.set('file', file)
-        data.set('path', path)
+        const data = new FormData();
+        data.set('file', file);
+        data.set('path', path);
         const res = await fetch('/api/upload', {
           method: 'POST',
           body: data,
-        })
+        });
         if (!res.ok) {
-          throw new Error(await res.text())
+          throw new Error(await res.text());
         }
-        onChange(getImageUrl('/' + path + '/' + file.name))
-        toast.success('Image uploaded successfully')
-        setIsUploading(false)
+        onChange(getImageUrl('/' + path + '/' + file.name));
+        toast.success('Image uploaded successfully');
+        setIsUploading(false);
       } catch (e: any) {
         // Handle errors here
-        setIsUploading(false)
-        toast.error('Error uploading image')
-        console.error(e)
+        setIsUploading(false);
+        toast.error('Error uploading image');
+        console.error(e);
       }
-    }
+    };
 
     const onDrop = useCallback(
       (acceptedFiles: File[]) => {
         if (acceptedFiles.length > 0) {
-          const { displayUrl } = getImageData(acceptedFiles[0])
+          const { displayUrl } = getImageData(acceptedFiles[0]);
 
-          setPreview(displayUrl)
-          onSubmit(acceptedFiles[0])
+          setPreview(displayUrl);
+          onSubmit(acceptedFiles[0]);
         }
       },
       [onChange]
-    )
+    );
 
     const { getRootProps, getInputProps } = useDropzone({
       accept: {
@@ -77,7 +77,7 @@ const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
       maxSize: 5 * 1024 * 1024, // 5 MB
       maxFiles: 1,
       onDrop,
-    })
+    });
 
     return (
       <div ref={ref} {...rest}>
@@ -91,8 +91,8 @@ const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
               size={24}
               className="z-[9999999999994] ml-auto cursor-pointer rounded-md hover:bg-gray-300"
               onClick={() => {
-                onChange(null)
-                setPreview('')
+                onChange(null);
+                setPreview('');
               }}
             />
             <div className="z-10 flex h-40 items-center justify-center border border-dashed border-gray-400 bg-white transition">
@@ -108,26 +108,26 @@ const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
         ) : (
           <div
             {...getRootProps()}
-            className="z-10 flex h-40 cursor-pointer flex-col items-center justify-center space-y-4 rounded-md border-2 border-dashed border-gray-300 bg-white text-sm transition-colors hover:bg-gray-200">
+            className="z-10 flex h-40 cursor-pointer flex-col items-center justify-center space-y-4 rounded-md border-2 border-dashed border-gray-300 bg-white text-sm transition-colors hover:bg-gray-200"
+          >
             <ImageUp size={35} />
             <input {...getInputProps()} />
             <div className="mx-4">
               <p>
-                Drag and drop your thumbnail to upload... Or just
-                click here!
+                Drag and drop your thumbnail to upload... Or just click here!
               </p>
               <p>
-                Maximum image file size is 1MB. Best resolution of
-                1920 x 1080. Aspect ratio of 16:9
+                Maximum image file size is 1MB. Best resolution of 1920 x 1080.
+                Aspect ratio of 16:9
               </p>
             </div>
           </div>
         )}
       </div>
-    )
+    );
   }
-)
+);
 
-ImageDropzone.displayName = 'ImageDropzone'
+ImageDropzone.displayName = 'ImageDropzone';
 
-export default ImageDropzone
+export default ImageDropzone;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/SessionAccordion.tsx b/packages/app/app/studio/[organization]/library/[session]/components/SessionAccordion.tsx
index 80d1c929e..91da69355 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/SessionAccordion.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/SessionAccordion.tsx
@@ -1,7 +1,7 @@
-'use client'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
+'use client';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
 import {
   Form,
   FormControl,
@@ -9,32 +9,31 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { useRouter } from 'next/navigation'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/ui/button'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import { sessionSchema } from '@/lib/schema'
-import { useState } from 'react'
-import { toast } from 'sonner'
+} from '@/components/ui/form';
+import { useRouter } from 'next/navigation';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import { sessionSchema } from '@/lib/schema';
+import { useState } from 'react';
+import { toast } from 'sonner';
 import {
   updateSessionAction,
   deleteSessionAction,
-} from '@/lib/actions/sessions'
-import { IExtendedSession } from '@/lib/types'
-import { Loader2 } from 'lucide-react'
+} from '@/lib/actions/sessions';
+import { IExtendedSession } from '@/lib/types';
+import { Loader2 } from 'lucide-react';
 
 const SessionAccordion = ({
   session,
   organizationSlug,
 }: {
-  session: IExtendedSession
-  organizationSlug: string
+  session: IExtendedSession;
+  organizationSlug: string;
 }) => {
-  const router = useRouter()
-  const [isUpdatingSession, setIsUpdatingSession] =
-    useState<boolean>(false)
+  const router = useRouter();
+  const [isUpdatingSession, setIsUpdatingSession] = useState<boolean>(false);
   const form = useForm<z.infer<typeof sessionSchema>>({
     resolver: zodResolver(sessionSchema),
     defaultValues: {
@@ -42,11 +41,11 @@ const SessionAccordion = ({
       description: session.description,
       coverImage: session.coverImage,
     },
-  })
+  });
 
   // 2. Define a submit handler.
   function onSubmit(values: z.infer<typeof sessionSchema>) {
-    setIsUpdatingSession(true)
+    setIsUpdatingSession(true);
     updateSessionAction({
       session: {
         ...values,
@@ -62,47 +61,43 @@ const SessionAccordion = ({
     })
       .then((response) => {
         if (response) {
-          toast.success('Session updated')
+          toast.success('Session updated');
         } else {
-          toast.error('Error updating session')
+          toast.error('Error updating session');
         }
       })
       .catch(() => {
-        toast.error('Error updating session')
+        toast.error('Error updating session');
       })
       .finally(() => {
-        setIsUpdatingSession(false)
-      })
+        setIsUpdatingSession(false);
+      });
   }
 
   const handleDeleteSession = (e: any) => {
-    e.preventDefault()
-    if (
-      window.confirm('Are you sure you want to delete this session?')
-    ) {
+    e.preventDefault();
+    if (window.confirm('Are you sure you want to delete this session?')) {
       deleteSessionAction({
         organizationId: session.organizationId as string,
         sessionId: session._id!,
       })
         .then((response) => {
           if (response) {
-            toast.success('Session deleted')
-            router.push(`/studio/${organizationSlug}?settings=videos`)
+            toast.success('Session deleted');
+            router.push(`/studio/${organizationSlug}?settings=videos`);
           } else {
-            toast.error('Error deleting session')
+            toast.error('Error deleting session');
           }
         })
         .catch(() => {
-          toast.error('Error deleting session')
-        })
+          toast.error('Error deleting session');
+        });
     }
-  }
+  };
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-4">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <FormField
           control={form.control}
           name="name"
@@ -202,14 +197,15 @@ const SessionAccordion = ({
           <Button
             onClick={handleDeleteSession}
             variant={'destructive'}
-            className="w-full">
+            className="w-full"
+          >
             Delete session
           </Button>
           <Button className="w-full" type="submit">
             {isUpdatingSession ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}
-                Please Updating session
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please
+                Updating session
               </>
             ) : (
               'Update session'
@@ -218,7 +214,7 @@ const SessionAccordion = ({
         </div>
       </form>
     </Form>
-  )
-}
+  );
+};
 
-export default SessionAccordion
+export default SessionAccordion;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/SessionOptions.tsx b/packages/app/app/studio/[organization]/library/[session]/components/SessionOptions.tsx
index 089fe7349..ea68cb767 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/SessionOptions.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/SessionOptions.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
 
-import EmbedButton from '@/components/misc/interact/EmbedButton'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import VideoDownloadClient from '@/components/misc/VideoDownloadClient'
+import EmbedButton from '@/components/misc/interact/EmbedButton';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import VideoDownloadClient from '@/components/misc/VideoDownloadClient';
 
 const SessionOptions = ({
   name,
@@ -11,11 +11,11 @@ const SessionOptions = ({
   organizationSlug,
   sessionId,
 }: {
-  name: string
-  playbackId: string
-  assetId?: string
-  organizationSlug: string
-  sessionId: string
+  name: string;
+  playbackId: string;
+  assetId?: string;
+  organizationSlug: string;
+  sessionId: string;
 }) => {
   return (
     <div className="flex w-full flex-wrap items-center gap-2">
@@ -40,7 +40,7 @@ const SessionOptions = ({
         collapsable={true}
       />
     </div>
-  )
-}
+  );
+};
 
-export default SessionOptions
+export default SessionOptions;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/UploadToYoutubeButton.tsx b/packages/app/app/studio/[organization]/library/[session]/components/UploadToYoutubeButton.tsx
index 1b31f0dcc..29ca34ade 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/UploadToYoutubeButton.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/UploadToYoutubeButton.tsx
@@ -1,32 +1,27 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { uploadSessionToYouTubeAction } from '@/lib/actions/sessions'
-import { IExtendedOrganization } from '@/lib/types'
-import React, { useState } from 'react'
-import { SiYoutube } from 'react-icons/si'
-import { toast } from 'sonner'
-import { CiCirclePlus } from 'react-icons/ci'
+'use client';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { uploadSessionToYouTubeAction } from '@/lib/actions/sessions';
+import { IExtendedOrganization } from '@/lib/types';
+import React, { useState } from 'react';
+import { SiYoutube } from 'react-icons/si';
+import { toast } from 'sonner';
+import { CiCirclePlus } from 'react-icons/ci';
 
 const UploadToYoutubeButton = ({
   organization,
   organizationSlug,
   sessionId,
 }: {
-  organization: IExtendedOrganization | null
-  organizationSlug: string
-  sessionId: string
+  organization: IExtendedOrganization | null;
+  organizationSlug: string;
+  sessionId: string;
 }) => {
-  const [openModal, setOpenModal] = useState(false)
-  const [socialId, setSocialId] = useState<string>('')
-  const [isLoading, setIsLoading] = useState(false)
-  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ''
-  const redirectUri =
-    process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI || ''
+  const [openModal, setOpenModal] = useState(false);
+  const [socialId, setSocialId] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || '';
+  const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI || '';
 
   const handleYoutubeConnect = () => {
     const state = encodeURIComponent(
@@ -34,49 +29,49 @@ const UploadToYoutubeButton = ({
         redirectUrl: `/studio/${organizationSlug}/library/${sessionId}`,
         organizationId: organization?._id,
       })
-    )
+    );
     // Encode the redirect URL
-    const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&prompt=select_account&redirect_uri=${redirectUri}&response_type=code&access_type=offline&scope=https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube&state=${state}`
+    const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&prompt=select_account&redirect_uri=${redirectUri}&response_type=code&access_type=offline&scope=https://www.googleapis.com/auth/youtube.upload https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube&state=${state}`;
 
     // Calculate window size and position
-    const width = window.innerWidth * 0.7
-    const height = window.innerHeight * 0.7
-    const left = window.screen.width / 2 - width / 2
-    const top = window.screen.height / 2 - height / 2
+    const width = window.innerWidth * 0.7;
+    const height = window.innerHeight * 0.7;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
 
     // Open the OAuth URL in a new window
     window.open(
       authUrl,
       'YouTube OAuth',
       `width=${width},height=${height},top=${top},left=${left}`
-    )
-  }
+    );
+  };
   const hasSocials = organization?.socials?.length
     ? organization?.socials?.length > 0
-    : false
+    : false;
 
   const handleYoutubePublish = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       const response = await uploadSessionToYouTubeAction({
         type: 'youtube',
         sessionId,
         organizationId: organization?._id as string,
         socialId,
-      })
+      });
 
       if (response.message) {
-        toast.error('Error: ' + response.message)
+        toast.error('Error: ' + response.message);
       } else {
-        toast.success('Publish request successful')
+        toast.success('Publish request successful');
       }
     } catch (error) {
-      toast.error('Error uploading video to YouTube')
+      toast.error('Error uploading video to YouTube');
     } finally {
-      setIsLoading(false)
-      setOpenModal(false)
+      setIsLoading(false);
+      setOpenModal(false);
     }
-  }
+  };
 
   return (
     <Dialog open={openModal} onOpenChange={setOpenModal}>
@@ -98,18 +93,21 @@ const UploadToYoutubeButton = ({
                 key={_id}
                 className={`flex cursor-pointer flex-col items-center ${
                   socialId == _id ? 'opacity-100' : 'opacity-50'
-                }`}>
+                }`}
+              >
                 <div
                   className="h-14 w-14 cursor-pointer rounded-full bg-cover bg-center"
                   style={{
                     backgroundImage: `url(${thumbnail})`,
-                  }}></div>
+                  }}
+                ></div>
                 <p className="line-clamp-1 text-sm">{name}</p>
               </div>
             ))}
           <div
             onClick={handleYoutubeConnect}
-            className="flex cursor-pointer flex-col items-center">
+            className="flex cursor-pointer flex-col items-center"
+          >
             <CiCirclePlus color="#000" size={56} />
             <p className="text-sm">Add New</p>
           </div>
@@ -119,12 +117,13 @@ const UploadToYoutubeButton = ({
           loading={isLoading}
           onClick={handleYoutubePublish}
           variant="primary"
-          disabled={!hasSocials || !socialId}>
+          disabled={!hasSocials || !socialId}
+        >
           Publish
         </Button>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default UploadToYoutubeButton
+export default UploadToYoutubeButton;
diff --git a/packages/app/app/studio/[organization]/library/[session]/components/UploadTwitterButton.tsx b/packages/app/app/studio/[organization]/library/[session]/components/UploadTwitterButton.tsx
index 6f9e56a5b..7c6a686de 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/UploadTwitterButton.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/UploadTwitterButton.tsx
@@ -1,29 +1,25 @@
-'use client'
-import React, { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { SiTwitter } from 'react-icons/si'
-import { IExtendedOrganization } from '@/lib/types'
-import { uploadSessionToYouTubeAction } from '@/lib/actions/sessions'
-import { toast } from 'sonner'
-import { CiCirclePlus } from 'react-icons/ci'
+'use client';
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { SiTwitter } from 'react-icons/si';
+import { IExtendedOrganization } from '@/lib/types';
+import { uploadSessionToYouTubeAction } from '@/lib/actions/sessions';
+import { toast } from 'sonner';
+import { CiCirclePlus } from 'react-icons/ci';
 
 const UploadTwitterButton = ({
   organization,
   sessionId,
   organizationSlug,
 }: {
-  organization: IExtendedOrganization | null
-  organizationSlug: string
-  sessionId: string
+  organization: IExtendedOrganization | null;
+  organizationSlug: string;
+  sessionId: string;
 }) => {
-  const [openModal, setOpenModal] = useState(false)
-  const [socialId, setSocialId] = useState<string>('')
-  const [isLoading, setIsLoading] = useState(false)
+  const [openModal, setOpenModal] = useState(false);
+  const [socialId, setSocialId] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleTwitterConnect = () => {
     const state = encodeURIComponent(
@@ -31,46 +27,45 @@ const UploadTwitterButton = ({
         redirectUrl: `/studio/${organizationSlug}/library/${sessionId}`,
         organizationId: organization?._id,
       })
-    )
+    );
     // Encode the redirect URL
-    const authUrl = `/api/twitter/request?state=${state}`
+    const authUrl = `/api/twitter/request?state=${state}`;
 
     // Open the OAuth URL in a new window
-    window.location.href = authUrl
-  }
+    window.location.href = authUrl;
+  };
   const hasSocials = organization?.socials?.length
     ? organization?.socials?.length > 0
-    : false
+    : false;
 
   const handleTwitterPublish = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       const response = await uploadSessionToYouTubeAction({
         type: 'twitter',
         sessionId,
         organizationId: organization?._id as string,
         socialId,
-      })
+      });
 
       if (response.message) {
-        toast.error('Error: ' + response.message)
+        toast.error('Error: ' + response.message);
       } else {
-        toast.success('Publish request successful')
+        toast.success('Publish request successful');
       }
     } catch (error) {
-      toast.error('Error uploading video to Twitter')
+      toast.error('Error uploading video to Twitter');
     } finally {
-      setIsLoading(false)
-      setOpenModal(false)
+      setIsLoading(false);
+      setOpenModal(false);
     }
-  }
+  };
 
   return (
     <Dialog open={openModal} onOpenChange={setOpenModal}>
       <DialogTrigger>
         <Button className="min-w-[200px] bg-[#121212]">
-          <SiTwitter className="mr-2" /> Publish to X(Twitter) (Coming
-          Soon)
+          <SiTwitter className="mr-2" /> Publish to X(Twitter) (Coming Soon)
         </Button>
       </DialogTrigger>
       <DialogContent className="z-[99999999999999999] px-8">
@@ -85,18 +80,21 @@ const UploadTwitterButton = ({
                 key={_id}
                 className={`flex cursor-pointer flex-col items-center ${
                   socialId == _id ? 'opacity-100' : 'opacity-50'
-                }`}>
+                }`}
+              >
                 <div
                   className="h-14 w-14 cursor-pointer rounded-full bg-cover bg-center"
                   style={{
                     backgroundImage: `url(${thumbnail})`,
-                  }}></div>
+                  }}
+                ></div>
                 <p className="line-clamp-1 text-sm">{name}</p>
               </div>
             ))}
           <div
             onClick={handleTwitterConnect}
-            className="flex cursor-pointer flex-col items-center">
+            className="flex cursor-pointer flex-col items-center"
+          >
             <CiCirclePlus color="#000" size={56} />
             <p className="text-sm">Add New</p>
           </div>
@@ -106,12 +104,13 @@ const UploadTwitterButton = ({
           loading={isLoading}
           onClick={handleTwitterPublish}
           variant="primary"
-          disabled={!hasSocials || !socialId}>
+          disabled={!hasSocials || !socialId}
+        >
           Publish
         </Button>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default UploadTwitterButton
+export default UploadTwitterButton;
diff --git a/packages/app/app/studio/[organization]/library/[session]/page.tsx b/packages/app/app/studio/[organization]/library/[session]/page.tsx
index 9f98be112..01ae2a6b5 100644
--- a/packages/app/app/studio/[organization]/library/[session]/page.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/page.tsx
@@ -1,47 +1,43 @@
-'use server'
+'use server';
 
-import { studioPageParams } from '@/lib/types'
-import { fetchSession } from '@/lib/services/sessionService'
-import { PlayerWithControls } from '@/components/ui/Player'
-import { notFound } from 'next/navigation'
-import { ArrowLeft } from 'lucide-react'
-import EditSessionForm from './components/EditSessionForm'
-import Link from 'next/link'
-import SessionOptions from './components/SessionOptions'
-import { Label } from '@/components/ui/label'
-import GetHashButton from '../components/GetHashButton'
-import TextPlaceholder from '@/components/ui/text-placeholder'
-import { Button } from '@/components/ui/button'
-import { SiTwitter } from 'react-icons/si'
+import { studioPageParams } from '@/lib/types';
+import { fetchSession } from '@/lib/services/sessionService';
+import { PlayerWithControls } from '@/components/ui/Player';
+import { notFound } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+import EditSessionForm from './components/EditSessionForm';
+import Link from 'next/link';
+import SessionOptions from './components/SessionOptions';
+import { Label } from '@/components/ui/label';
+import GetHashButton from '../components/GetHashButton';
+import TextPlaceholder from '@/components/ui/text-placeholder';
+import { Button } from '@/components/ui/button';
+import { SiTwitter } from 'react-icons/si';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@/components/ui/accordion'
-import UploadToYoutubeButton from './components/UploadToYoutubeButton'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { getVideoUrlAction } from '@/lib/actions/livepeer'
-import UploadTwitterButton from './components/UploadTwitterButton'
+} from '@/components/ui/accordion';
+import UploadToYoutubeButton from './components/UploadToYoutubeButton';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { getVideoUrlAction } from '@/lib/actions/livepeer';
+import UploadTwitterButton from './components/UploadTwitterButton';
 
-const EditSession = async ({
-  params,
-  searchParams,
-}: studioPageParams) => {
+const EditSession = async ({ params, searchParams }: studioPageParams) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
   const session = await fetchSession({
     session: params.session,
-  })
+  });
 
-  if (!session || (!session.playbackId && !session.assetId))
-    return notFound()
+  if (!session || (!session.playbackId && !session.assetId)) return notFound();
 
-  const videoUrl = await getVideoUrlAction(session.assetId as string)
+  const videoUrl = await getVideoUrlAction(session.assetId as string);
 
   if (!videoUrl) {
-    return notFound()
+    return notFound();
   }
 
   return (
@@ -76,7 +72,8 @@ const EditSession = async ({
           <Accordion
             className="space-y-4"
             type="multiple"
-            defaultValue={['publishVideo', 'menu']}>
+            defaultValue={['publishVideo', 'menu']}
+          >
             <AccordionItem defaultChecked value="menu">
               <AccordionContent>
                 <SessionOptions
@@ -92,7 +89,8 @@ const EditSession = async ({
             <AccordionItem
               className="rounded-xl border bg-white px-4"
               value="publishVideo"
-              defaultChecked>
+              defaultChecked
+            >
               <AccordionTrigger>
                 <h1 className="text-lg font-bold">Publish video</h1>
               </AccordionTrigger>
@@ -101,9 +99,7 @@ const EditSession = async ({
                   <div className="min-w-[200px]">
                     <GetHashButton session={session} />
                   </div>
-                  {session?.socials?.some(
-                    (s) => s.name === 'youtube'
-                  ) ? (
+                  {session?.socials?.some((s) => s.name === 'youtube') ? (
                     <Button variant="outline">
                       Video Published to Youtube
                     </Button>
@@ -125,7 +121,8 @@ const EditSession = async ({
 
             <AccordionItem
               className="rounded-xl border bg-white px-4"
-              value="videoData">
+              value="videoData"
+            >
               <AccordionTrigger>
                 <h1 className="text-lg font-bold">Video data</h1>
               </AccordionTrigger>
@@ -145,9 +142,7 @@ const EditSession = async ({
                 {session.videoTranscription && (
                   <div>
                     <Label>Transcript</Label>
-                    <TextPlaceholder
-                      text={session.videoTranscription}
-                    />
+                    <TextPlaceholder text={session.videoTranscription} />
                   </div>
                 )}
               </AccordionContent>
@@ -156,7 +151,7 @@ const EditSession = async ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default EditSession
+export default EditSession;
diff --git a/packages/app/app/studio/[organization]/library/components/DeleteAsset.tsx b/packages/app/app/studio/[organization]/library/components/DeleteAsset.tsx
index 8f42cfd40..860aa1dcb 100644
--- a/packages/app/app/studio/[organization]/library/components/DeleteAsset.tsx
+++ b/packages/app/app/studio/[organization]/library/components/DeleteAsset.tsx
@@ -1,6 +1,6 @@
-'use client'
+'use client';
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -9,38 +9,38 @@ import {
   DialogTitle,
   DialogTrigger,
   DialogClose,
-} from '@/components/ui/dialog'
-import { deleteSessionAction } from '@/lib/actions/sessions'
-import { IExtendedSession } from '@/lib/types'
-import { Trash2 } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import { ReactNode, useState } from 'react'
+} from '@/components/ui/dialog';
+import { deleteSessionAction } from '@/lib/actions/sessions';
+import { IExtendedSession } from '@/lib/types';
+import { Trash2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState } from 'react';
 
 const DeleteAsset = ({
   session,
   href,
   TriggerComponent,
 }: {
-  session: IExtendedSession
-  href: string | 'refresh'
-  TriggerComponent: ReactNode
+  session: IExtendedSession;
+  href: string | 'refresh';
+  TriggerComponent: ReactNode;
 }) => {
-  const router = useRouter()
-  const [loading, setLoading] = useState(false)
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
 
   const handleDelete = async () => {
-    setLoading(true)
+    setLoading(true);
     await deleteSessionAction({
       organizationId: session.organizationId as string,
       sessionId: session._id,
-    })
-    setLoading(false)
+    });
+    setLoading(false);
 
     if (href === 'refresh') {
-      router.refresh()
+      router.refresh();
     }
-    router.push(href)
-  }
+    router.push(href);
+  };
 
   return (
     <Dialog>
@@ -59,13 +59,14 @@ const DeleteAsset = ({
           <Button
             loading={loading}
             onClick={() => handleDelete()}
-            variant={'destructive'}>
+            variant={'destructive'}
+          >
             Delete asset
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default DeleteAsset
+export default DeleteAsset;
diff --git a/packages/app/app/studio/[organization]/library/components/EmptyLibrary.tsx b/packages/app/app/studio/[organization]/library/components/EmptyLibrary.tsx
index b2aa3e8fe..8ee0896ec 100644
--- a/packages/app/app/studio/[organization]/library/components/EmptyLibrary.tsx
+++ b/packages/app/app/studio/[organization]/library/components/EmptyLibrary.tsx
@@ -1,13 +1,9 @@
-'use server'
+'use server';
 
-import EmptyFolder from '@/lib/svg/EmptyFolder'
-import UploadVideoDialog from './UploadVideoDialog'
+import EmptyFolder from '@/lib/svg/EmptyFolder';
+import UploadVideoDialog from './UploadVideoDialog';
 
-const EmptyLibrary = async ({
-  organizationId,
-}: {
-  organizationId: string
-}) => {
+const EmptyLibrary = async ({ organizationId }: { organizationId: string }) => {
   return (
     <div className="flex h-full flex-col items-center justify-center space-y-6 bg-white">
       <EmptyFolder />
@@ -19,7 +15,7 @@ const EmptyLibrary = async ({
       </div>
       <UploadVideoDialog organizationId={organizationId} />
     </div>
-  )
-}
+  );
+};
 
-export default EmptyLibrary
+export default EmptyLibrary;
diff --git a/packages/app/app/studio/[organization]/library/components/GetHashButton.tsx b/packages/app/app/studio/[organization]/library/components/GetHashButton.tsx
index 429dc7065..d06123624 100644
--- a/packages/app/app/studio/[organization]/library/components/GetHashButton.tsx
+++ b/packages/app/app/studio/[organization]/library/components/GetHashButton.tsx
@@ -1,33 +1,29 @@
-'use client'
+'use client';
 
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import TextPlaceholder from '@/components/ui/text-placeholder'
-import { updateAssetAction } from '@/lib/actions/sessions'
-import { IExtendedSession } from '@/lib/types'
-import React, { useState } from 'react'
-import { toast } from 'sonner'
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import TextPlaceholder from '@/components/ui/text-placeholder';
+import { updateAssetAction } from '@/lib/actions/sessions';
+import { IExtendedSession } from '@/lib/types';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
 
-const GetHashButton = ({
-  session,
-}: {
-  session: IExtendedSession
-}) => {
-  const [isGettingHash, setIsGetHash] = useState(false)
+const GetHashButton = ({ session }: { session: IExtendedSession }) => {
+  const [isGettingHash, setIsGetHash] = useState(false);
 
   const handleGetHash = async () => {
-    setIsGetHash(true)
+    setIsGetHash(true);
     await updateAssetAction(session)
       .then(() => {
-        toast.success('Hash generated')
+        toast.success('Hash generated');
       })
       .catch(() => {
-        toast.error('Failed to generate hash, try again later')
+        toast.error('Failed to generate hash, try again later');
       })
       .finally(() => {
-        setIsGetHash(false)
-      })
-  }
+        setIsGetHash(false);
+      });
+  };
   return (
     <div className="flex w-full flex-col">
       {session.ipfsURI ? (
@@ -40,12 +36,13 @@ const GetHashButton = ({
           loading={isGettingHash}
           variant="default"
           className="bg-[#0b3a53] text-white"
-          onClick={() => handleGetHash()}>
+          onClick={() => handleGetHash()}
+        >
           Publish to IPFS
         </Button>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default GetHashButton
+export default GetHashButton;
diff --git a/packages/app/app/studio/[organization]/library/components/LayoutSelection.tsx b/packages/app/app/studio/[organization]/library/components/LayoutSelection.tsx
index 9a4714846..34572f8ed 100644
--- a/packages/app/app/studio/[organization]/library/components/LayoutSelection.tsx
+++ b/packages/app/app/studio/[organization]/library/components/LayoutSelection.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
-import { LayoutGrid, Rows3 } from 'lucide-react'
-import { eLayout } from '@/lib/types'
-import useSearchParams from '@/lib/hooks/useSearchParams'
+import { LayoutGrid, Rows3 } from 'lucide-react';
+import { eLayout } from '@/lib/types';
+import useSearchParams from '@/lib/hooks/useSearchParams';
 
 const LayoutSelection = () => {
-  const { searchParams, handleTermChange } = useSearchParams()
-  const currentLayout = searchParams.get('layout')
+  const { searchParams, handleTermChange } = useSearchParams();
+  const currentLayout = searchParams.get('layout');
 
   const layoutOptions = [
     {
@@ -21,7 +21,7 @@ const LayoutSelection = () => {
       activeClass: 'text-white bg-[#3D22BA]',
       inactiveClass: 'hover:text-white hover:bg-[#3D22BA]',
     },
-  ]
+  ];
 
   return (
     <div className="flex justify-end space-x-2">
@@ -33,14 +33,12 @@ const LayoutSelection = () => {
             className={`cursor-pointer rounded-md border p-1 transition ${
               currentLayout === value ? activeClass : inactiveClass
             }`}
-            onClick={() =>
-              handleTermChange([{ key: 'layout', value }])
-            }
+            onClick={() => handleTermChange([{ key: 'layout', value }])}
           />
         )
       )}
     </div>
-  )
-}
+  );
+};
 
-export default LayoutSelection
+export default LayoutSelection;
diff --git a/packages/app/app/studio/[organization]/library/components/LibraryFilter.tsx b/packages/app/app/studio/[organization]/library/components/LibraryFilter.tsx
index 315020688..f80eda369 100644
--- a/packages/app/app/studio/[organization]/library/components/LibraryFilter.tsx
+++ b/packages/app/app/studio/[organization]/library/components/LibraryFilter.tsx
@@ -1,13 +1,13 @@
-'use client'
-import React, { useState } from 'react'
-import { FaFilter } from 'react-icons/fa'
-import { Button } from '@/components/ui/button'
+'use client';
+import React, { useState } from 'react';
+import { FaFilter } from 'react-icons/fa';
+import { Button } from '@/components/ui/button';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
-import { IExtendedStage } from '@/lib/types'
+} from '@/components/ui/popover';
+import { IExtendedStage } from '@/lib/types';
 import {
   Select,
   SelectContent,
@@ -15,40 +15,39 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import useSearchParams from '@/lib/hooks/useSearchParams'
+} from '@/components/ui/select';
+import useSearchParams from '@/lib/hooks/useSearchParams';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@/components/ui/accordion'
-import { SessionType } from 'streameth-new-server/src/interfaces/session.interface'
-import { Checkbox } from '@/components/ui/checkbox'
+} from '@/components/ui/accordion';
+import { SessionType } from 'streameth-new-server/src/interfaces/session.interface';
+import { Checkbox } from '@/components/ui/checkbox';
 
 const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
-  const { searchParams, handleTermChange } = useSearchParams()
+  const { searchParams, handleTermChange } = useSearchParams();
   const [selectedStage, setSelectedStage] = useState(
     searchParams.get('stage') || undefined
-  )
+  );
   const [selectedType, setSelectedType] = useState(
     searchParams.get('type') || undefined
-  )
+  );
   const [selectedVisibility, setSelectedVisibility] = useState(
     searchParams.get('published') || undefined
-  )
-  const [openPopover, setOpenPopover] = useState(false)
+  );
+  const [openPopover, setOpenPopover] = useState(false);
 
-  const count = [
-    selectedStage,
-    selectedType,
-    selectedVisibility,
-  ].reduce((count, item) => count + (item !== undefined ? 1 : 0), 0)
+  const count = [selectedStage, selectedType, selectedVisibility].reduce(
+    (count, item) => count + (item !== undefined ? 1 : 0),
+    0
+  );
   const handleClearFilter = () => {
-    setSelectedStage(undefined)
-    setSelectedType(undefined)
-    setSelectedVisibility(undefined)
-  }
+    setSelectedStage(undefined);
+    setSelectedType(undefined);
+    setSelectedVisibility(undefined);
+  };
   const handleSaveFilter = () => {
     handleTermChange([
       {
@@ -67,14 +66,14 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
         key: 'page',
         value: '1',
       },
-    ])
-    setOpenPopover(false)
-  }
+    ]);
+    setOpenPopover(false);
+  };
 
   const sessionTypes = Object.keys(SessionType).map((key) => ({
     label: key,
     value: (SessionType as any)[key],
-  }))
+  }));
 
   return (
     <Popover open={openPopover} onOpenChange={setOpenPopover}>
@@ -86,17 +85,11 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
       </PopoverTrigger>
       <PopoverContent className="space-y-4 p-0">
         <div className="flex items-center justify-between gap-2 border-b border-secondary p-2">
-          <Button
-            onClick={handleClearFilter}
-            size="sm"
-            variant="outline">
+          <Button onClick={handleClearFilter} size="sm" variant="outline">
             Clear
           </Button>
           <h4 className="text-center font-bold">Filters</h4>
-          <Button
-            onClick={handleSaveFilter}
-            size="sm"
-            variant="primary">
+          <Button onClick={handleSaveFilter} size="sm" variant="primary">
             Save
           </Button>
         </div>
@@ -114,7 +107,8 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
             <AccordionContent className="p-2">
               <Select
                 value={selectedStage}
-                onValueChange={(value) => setSelectedStage(value)}>
+                onValueChange={(value) => setSelectedStage(value)}
+              >
                 <SelectTrigger>
                   <SelectValue
                     defaultValue={selectedStage}
@@ -147,7 +141,8 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
             <AccordionContent className="p-2">
               <Select
                 value={selectedType}
-                onValueChange={(value) => setSelectedType(value)}>
+                onValueChange={(value) => setSelectedType(value)}
+              >
                 <SelectTrigger>
                   <SelectValue
                     defaultValue={selectedType}
@@ -172,9 +167,7 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
               <div className="flex items-center gap-2">
                 <Checkbox
                   checked={!!selectedVisibility}
-                  onCheckedChange={() =>
-                    setSelectedVisibility(undefined)
-                  }
+                  onCheckedChange={() => setSelectedVisibility(undefined)}
                 />
                 <h4 className="text-sm font-medium">Visibility</h4>
               </div>
@@ -182,9 +175,8 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
             <AccordionContent className="p-2">
               <Select
                 value={selectedVisibility}
-                onValueChange={(value) =>
-                  setSelectedVisibility(value)
-                }>
+                onValueChange={(value) => setSelectedVisibility(value)}
+              >
                 <SelectTrigger>
                   <SelectValue
                     defaultValue={selectedVisibility}
@@ -203,7 +195,7 @@ const LibraryFilter = ({ stages }: { stages: IExtendedStage[] }) => {
         </Accordion>
       </PopoverContent>
     </Popover>
-  )
-}
+  );
+};
 
-export default LibraryFilter
+export default LibraryFilter;
diff --git a/packages/app/app/studio/[organization]/library/components/LibraryGridLayout.tsx b/packages/app/app/studio/[organization]/library/components/LibraryGridLayout.tsx
index 982c7e8de..77ea02ca9 100644
--- a/packages/app/app/studio/[organization]/library/components/LibraryGridLayout.tsx
+++ b/packages/app/app/studio/[organization]/library/components/LibraryGridLayout.tsx
@@ -1,18 +1,18 @@
-'use client'
+'use client';
 
-import { IExtendedSession, eLayout } from '@/lib/types'
-import { Separator } from '@/components/ui/separator'
-import LayoutSelection from './LayoutSelection'
-import VideoCardWithMenu from './misc/VideoCardWithMenu'
-import { PopoverActions } from './misc/PopoverActions'
-import VideoCardProcessing from '@/components/misc/VideoCard/VideoCardProcessing'
+import { IExtendedSession, eLayout } from '@/lib/types';
+import { Separator } from '@/components/ui/separator';
+import LayoutSelection from './LayoutSelection';
+import VideoCardWithMenu from './misc/VideoCardWithMenu';
+import { PopoverActions } from './misc/PopoverActions';
+import VideoCardProcessing from '@/components/misc/VideoCard/VideoCardProcessing';
 
 const LibraryGridLayout = ({
   sessions,
   organizationSlug,
 }: {
-  sessions: IExtendedSession[]
-  organizationSlug: string
+  sessions: IExtendedSession[];
+  organizationSlug: string;
 }) => {
   return (
     <>
@@ -40,7 +40,7 @@ const LibraryGridLayout = ({
         ))}
       </div>
     </>
-  )
-}
+  );
+};
 
-export default LibraryGridLayout
+export default LibraryGridLayout;
diff --git a/packages/app/app/studio/[organization]/library/components/LibraryListLayout.tsx b/packages/app/app/studio/[organization]/library/components/LibraryListLayout.tsx
index 3ece7410e..78217d023 100644
--- a/packages/app/app/studio/[organization]/library/components/LibraryListLayout.tsx
+++ b/packages/app/app/studio/[organization]/library/components/LibraryListLayout.tsx
@@ -1,4 +1,4 @@
-'use server'
+'use server';
 
 import {
   Table,
@@ -6,18 +6,18 @@ import {
   TableRow,
   TableHead,
   TableBody,
-} from '@/components/ui/table'
-import TableCells from './TableCells'
-import { IExtendedSession } from '@/lib/types'
-import LayoutSelection from './LayoutSelection'
-import TableSort from '@/components/misc/TableSort'
+} from '@/components/ui/table';
+import TableCells from './TableCells';
+import { IExtendedSession } from '@/lib/types';
+import LayoutSelection from './LayoutSelection';
+import TableSort from '@/components/misc/TableSort';
 
 const LibraryListLayout = async ({
   sessions,
   organizationSlug,
 }: {
-  sessions: IExtendedSession[]
-  organizationSlug: string
+  sessions: IExtendedSession[];
+  organizationSlug: string;
 }) => {
   return (
     <Table className="bg-white">
@@ -44,7 +44,7 @@ const LibraryListLayout = async ({
         ))}
       </TableBody>
     </Table>
-  )
-}
+  );
+};
 
-export default LibraryListLayout
+export default LibraryListLayout;
diff --git a/packages/app/app/studio/[organization]/library/components/PublishCell.tsx b/packages/app/app/studio/[organization]/library/components/PublishCell.tsx
index 624dfa7c1..9794dfb0e 100644
--- a/packages/app/app/studio/[organization]/library/components/PublishCell.tsx
+++ b/packages/app/app/studio/[organization]/library/components/PublishCell.tsx
@@ -1,21 +1,21 @@
-'use client'
-import { toast } from 'sonner'
+'use client';
+import { toast } from 'sonner';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { IExtendedSession } from '@/lib/types'
-import { useState } from 'react'
-import { updateSessionAction } from '@/lib/actions/sessions'
-import { ChevronDown, Earth, Lock, Loader2 } from 'lucide-react'
+} from '@/components/ui/dropdown-menu';
+import { IExtendedSession } from '@/lib/types';
+import { useState } from 'react';
+import { updateSessionAction } from '@/lib/actions/sessions';
+import { ChevronDown, Earth, Lock, Loader2 } from 'lucide-react';
 
 const PublishCell = ({ item }: { item: IExtendedSession }) => {
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
 
   const handlePublishment = () => {
-    setIsLoading(true)
+    setIsLoading(true);
     updateSessionAction({
       session: {
         _id: item._id,
@@ -33,17 +33,17 @@ const PublishCell = ({ item }: { item: IExtendedSession }) => {
     })
       .then(() => {
         if (item.published === true) {
-          toast.success('Succesfully made your asset private')
+          toast.success('Succesfully made your asset private');
         } else if (item.published === false) {
-          toast.success('Succesfully made your asset public')
+          toast.success('Succesfully made your asset public');
         }
-        setIsLoading(false)
+        setIsLoading(false);
       })
       .catch(() => {
-        setIsLoading(false)
-        toast.error('Something went wrong...')
-      })
-  }
+        setIsLoading(false);
+        toast.error('Something went wrong...');
+      });
+  };
 
   return (
     <div className="flex items-center justify-start space-x-2">
@@ -67,7 +67,8 @@ const PublishCell = ({ item }: { item: IExtendedSession }) => {
         <DropdownMenuContent>
           <DropdownMenuItem
             className="cursor-pointer space-x-2"
-            onClick={() => handlePublishment()}>
+            onClick={() => handlePublishment()}
+          >
             {!item.published ? (
               <>
                 <Earth size={16} />
@@ -83,6 +84,6 @@ const PublishCell = ({ item }: { item: IExtendedSession }) => {
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
-  )
-}
-export default PublishCell
+  );
+};
+export default PublishCell;
diff --git a/packages/app/app/studio/[organization]/library/components/TableCells.tsx b/packages/app/app/studio/[organization]/library/components/TableCells.tsx
index 49a100de7..52b2ca77e 100644
--- a/packages/app/app/studio/[organization]/library/components/TableCells.tsx
+++ b/packages/app/app/studio/[organization]/library/components/TableCells.tsx
@@ -1,34 +1,34 @@
-import { TableCell } from '@/components/ui/table'
-import { IExtendedSession, eLayout } from '@/lib/types'
-import { EllipsisVertical } from 'lucide-react'
-import Link from 'next/link'
-import { formatDate } from '@/lib/utils/time'
-import { fetchSessionMetrics } from '@/lib/services/sessionService'
-import ProcessingSkeleton from './misc/ProcessingSkeleton'
-import { PopoverActions } from './misc/PopoverActions'
+import { TableCell } from '@/components/ui/table';
+import { IExtendedSession, eLayout } from '@/lib/types';
+import { EllipsisVertical } from 'lucide-react';
+import Link from 'next/link';
+import { formatDate } from '@/lib/utils/time';
+import { fetchSessionMetrics } from '@/lib/services/sessionService';
+import ProcessingSkeleton from './misc/ProcessingSkeleton';
+import { PopoverActions } from './misc/PopoverActions';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import PublishCell from './PublishCell'
+} from '@/components/ui/popover';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import PublishCell from './PublishCell';
 
 const TableCells = async ({
   item,
   organization,
 }: {
-  item: IExtendedSession
-  organization: string
+  item: IExtendedSession;
+  organization: string;
 }) => {
-  const imageUrl = await generateThumbnailAction(item)
+  const imageUrl = await generateThumbnailAction(item);
   const views = (
     await fetchSessionMetrics({ playbackId: item.playbackId ?? '' })
-  ).viewCount
+  ).viewCount;
 
   if (!item.videoUrl) {
-    return <ProcessingSkeleton item={item} />
+    return <ProcessingSkeleton item={item} />;
   }
 
   return (
@@ -36,16 +36,11 @@ const TableCells = async ({
       <TableCell className="relative max-w-[500px] font-medium">
         <div className="flex w-full flex-row items-center space-x-4">
           <div className="min-w-[100px]">
-            <Thumbnail
-              imageUrl={item.coverImage}
-              fallBack={imageUrl}
-            />
+            <Thumbnail imageUrl={item.coverImage} fallBack={imageUrl} />
           </div>
 
           <Link href={`library/${item._id}`}>
-            <span className="line-clamp-3 hover:underline">
-              {item.name}
-            </span>
+            <span className="line-clamp-3 hover:underline">{item.name}</span>
           </Link>
         </div>
       </TableCell>
@@ -56,16 +51,11 @@ const TableCells = async ({
       </TableCell>
       {item.updatedAt && (
         <TableCell className="truncate">
-          {formatDate(
-            new Date(item.updatedAt as string),
-            'ddd. MMM. D, YYYY'
-          )}
+          {formatDate(new Date(item.updatedAt as string), 'ddd. MMM. D, YYYY')}
         </TableCell>
       )}
 
-      <TableCell className="relative max-w-[100px]">
-        {views}
-      </TableCell>
+      <TableCell className="relative max-w-[100px]">{views}</TableCell>
       <TableCell>
         <Popover>
           <PopoverTrigger className="z-10">
@@ -81,7 +71,7 @@ const TableCells = async ({
         </Popover>
       </TableCell>
     </>
-  )
-}
+  );
+};
 
-export default TableCells
+export default TableCells;
diff --git a/packages/app/app/studio/[organization]/library/components/UploadVideoDialog.tsx b/packages/app/app/studio/[organization]/library/components/UploadVideoDialog.tsx
index 9380bb773..70d0bb772 100644
--- a/packages/app/app/studio/[organization]/library/components/UploadVideoDialog.tsx
+++ b/packages/app/app/studio/[organization]/library/components/UploadVideoDialog.tsx
@@ -1,6 +1,6 @@
-'use client'
+'use client';
 
-import { Separator } from '@/components/ui/separator'
+import { Separator } from '@/components/ui/separator';
 import {
   Dialog,
   DialogContent,
@@ -8,30 +8,26 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import UploadVideoForm from './upload/UploadVideoForm'
-import { useState } from 'react'
-import UploadComplete from '@/lib/svg/UploadComplete'
-import { useRouter } from 'next/navigation'
-import { LuFileUp } from 'react-icons/lu'
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import UploadVideoForm from './upload/UploadVideoForm';
+import { useState } from 'react';
+import UploadComplete from '@/lib/svg/UploadComplete';
+import { useRouter } from 'next/navigation';
+import { LuFileUp } from 'react-icons/lu';
 
-const UploadVideoDialog = ({
-  organizationId,
-}: {
-  organizationId: string
-}) => {
-  const [open, setOpen] = useState(false)
-  const [isUploaded, setIsUploaded] = useState(false)
-  const router = useRouter()
+const UploadVideoDialog = ({ organizationId }: { organizationId: string }) => {
+  const [open, setOpen] = useState(false);
+  const [isUploaded, setIsUploaded] = useState(false);
+  const router = useRouter();
 
   const onFinish = () => {
-    setIsUploaded(true)
+    setIsUploaded(true);
 
     setTimeout(() => {
-      setIsUploaded(false)
-    }, 10000)
-  }
+      setIsUploaded(false);
+    }, 10000);
+  };
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -49,19 +45,18 @@ const UploadVideoDialog = ({
                 <UploadComplete />
               </div>
               <div className="flex flex-col items-center space-y-2">
-                <DialogTitle>
-                  Video uploaded succesfully! 🎉
-                </DialogTitle>
+                <DialogTitle>Video uploaded succesfully! 🎉</DialogTitle>
                 <DialogDescription>
-                  Your video is currently being processed. This could
-                  take several minutes.
+                  Your video is currently being processed. This could take
+                  several minutes.
                 </DialogDescription>
               </div>
             </DialogHeader>
             <Button
               variant={'secondary'}
               className="mx-auto w-1/3 border-2"
-              onClick={() => router.refresh()}>
+              onClick={() => router.refresh()}
+            >
               Go back to Assets
             </Button>
           </>
@@ -82,7 +77,7 @@ const UploadVideoDialog = ({
         )}
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default UploadVideoDialog
+export default UploadVideoDialog;
diff --git a/packages/app/app/studio/[organization]/library/components/misc/PopoverActions.tsx b/packages/app/app/studio/[organization]/library/components/misc/PopoverActions.tsx
index 36d25c499..f7013e5e2 100644
--- a/packages/app/app/studio/[organization]/library/components/misc/PopoverActions.tsx
+++ b/packages/app/app/studio/[organization]/library/components/misc/PopoverActions.tsx
@@ -1,56 +1,50 @@
-'use client'
+'use client';
 
-import { ReactNode } from 'react'
-import { Copy, Eye, FilePenLine, Share2, Trash2 } from 'lucide-react'
-import { Dialog, DialogTrigger } from '@/components/ui/dialog'
-import { Button, buttonVariants } from '@/components/ui/button'
-import DeleteAsset from '../DeleteAsset'
-import { IExtendedSession, eLayout } from '@/lib/types'
-import Link from 'next/link'
-import { toast } from 'sonner'
-import VideoDownloadClient from '@/components/misc/VideoDownloadClient'
-import { ShareModalContent } from '@/components/misc/interact/ShareButton'
-import GetHashButton from '../GetHashButton'
+import { ReactNode } from 'react';
+import { Copy, Eye, FilePenLine, Share2, Trash2 } from 'lucide-react';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import { Button, buttonVariants } from '@/components/ui/button';
+import DeleteAsset from '../DeleteAsset';
+import { IExtendedSession, eLayout } from '@/lib/types';
+import Link from 'next/link';
+import { toast } from 'sonner';
+import VideoDownloadClient from '@/components/misc/VideoDownloadClient';
+import { ShareModalContent } from '@/components/misc/interact/ShareButton';
+import GetHashButton from '../GetHashButton';
 
 export const PopoverActions = ({
   session,
   organizationSlug,
   layout,
 }: {
-  session: IExtendedSession
-  organizationSlug: string
-  layout: eLayout
+  session: IExtendedSession;
+  organizationSlug: string;
+  layout: eLayout;
 }): ReactNode => {
   const url = `${
     location.origin
-  }/${organizationSlug}/watch?session=${session._id.toString()}`
+  }/${organizationSlug}/watch?session=${session._id.toString()}`;
 
   const handleCopy = () => {
-    navigator.clipboard.writeText(session.ipfsURI as string)
-    toast.success('Copied IPFS Hash to your clipboard')
-  }
+    navigator.clipboard.writeText(session.ipfsURI as string);
+    toast.success('Copied IPFS Hash to your clipboard');
+  };
 
   return (
     <div className="grid gap-4">
       <div className="grid gap-2">
         <Link
-          href={`/studio/${organizationSlug}/library/${
-            session._id as string
-          }`}>
-          <Button
-            variant={'ghost'}
-            className="w-full !justify-start space-x-2">
+          href={`/studio/${organizationSlug}/library/${session._id as string}`}
+        >
+          <Button variant={'ghost'} className="w-full !justify-start space-x-2">
             <FilePenLine />
             <p className="">Edit</p>
           </Button>
         </Link>
         <Link
-          href={`/${organizationSlug}/watch?session=${
-            session._id as string
-          }`}>
-          <Button
-            variant={'ghost'}
-            className="w-full !justify-start space-x-2">
+          href={`/${organizationSlug}/watch?session=${session._id as string}`}
+        >
+          <Button variant={'ghost'} className="w-full !justify-start space-x-2">
             <Eye />
             <p className="">View</p>
           </Button>
@@ -60,7 +54,8 @@ export const PopoverActions = ({
             <Button
               variant={'ghost'}
               className="space-x-2"
-              onClick={() => handleCopy()}>
+              onClick={() => handleCopy()}
+            >
               <Copy />
               <p>Copy IPFS Hash</p>
             </Button>
@@ -73,7 +68,8 @@ export const PopoverActions = ({
               className={buttonVariants({
                 variant: 'ghost',
                 className: 'w-full !justify-start space-x-2',
-              })}>
+              })}
+            >
               <Share2 />
               <p>Share</p>
             </span>
@@ -97,7 +93,8 @@ export const PopoverActions = ({
                 variant: 'ghost',
                 className:
                   'flex cursor-pointer !justify-start space-x-2 hover:bg-gray-100',
-              })}>
+              })}
+            >
               <Trash2 className="text-destructive" />
               <p>Delete</p>
             </span>
@@ -105,5 +102,5 @@ export const PopoverActions = ({
         />
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/packages/app/app/studio/[organization]/library/components/misc/ProcessingSkeleton.tsx b/packages/app/app/studio/[organization]/library/components/misc/ProcessingSkeleton.tsx
index e7f1e4a3f..cbf906feb 100644
--- a/packages/app/app/studio/[organization]/library/components/misc/ProcessingSkeleton.tsx
+++ b/packages/app/app/studio/[organization]/library/components/misc/ProcessingSkeleton.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
-import { TableCell } from '@/components/ui/table'
-import { Loader2 } from 'lucide-react'
-import Image from 'next/image'
-import DefaultThumbnail from '@/lib/svg/DefaultThumbnail'
-import { AspectRatio } from '@radix-ui/react-aspect-ratio'
-import { formatDate } from '@/lib/utils/time'
-import { IExtendedSession } from '@/lib/types'
+import { TableCell } from '@/components/ui/table';
+import { Loader2 } from 'lucide-react';
+import Image from 'next/image';
+import DefaultThumbnail from '@/lib/svg/DefaultThumbnail';
+import { AspectRatio } from '@radix-ui/react-aspect-ratio';
+import { formatDate } from '@/lib/utils/time';
+import { IExtendedSession } from '@/lib/types';
 
 const ProcessingSkeleton = ({ item }: { item: IExtendedSession }) => {
   return (
@@ -30,9 +30,7 @@ const ProcessingSkeleton = ({ item }: { item: IExtendedSession }) => {
             </AspectRatio>
           </div>
 
-          <span className="line-clamp-3 text-gray-400">
-            {item.name}
-          </span>
+          <span className="line-clamp-3 text-gray-400">{item.name}</span>
         </div>
       </TableCell>
       <TableCell className="cursor-not-allowed bg-muted opacity-50">
@@ -43,10 +41,7 @@ const ProcessingSkeleton = ({ item }: { item: IExtendedSession }) => {
       </TableCell>
       {item.createdAt && (
         <TableCell className="cursor-not-allowed truncate bg-muted opacity-50">
-          {formatDate(
-            new Date(item.createdAt as string),
-            'ddd. MMM. D, YYYY'
-          )}
+          {formatDate(new Date(item.createdAt as string), 'ddd. MMM. D, YYYY')}
         </TableCell>
       )}
       <TableCell className="relative cursor-not-allowed bg-muted opacity-50">
@@ -54,7 +49,7 @@ const ProcessingSkeleton = ({ item }: { item: IExtendedSession }) => {
       </TableCell>
       <TableCell className="cursor-not-allowed bg-muted opacity-50"></TableCell>
     </>
-  )
-}
+  );
+};
 
-export default ProcessingSkeleton
+export default ProcessingSkeleton;
diff --git a/packages/app/app/studio/[organization]/library/components/misc/VideoCardWithMenu.tsx b/packages/app/app/studio/[organization]/library/components/misc/VideoCardWithMenu.tsx
index 8d096f726..013cbb7cf 100644
--- a/packages/app/app/studio/[organization]/library/components/misc/VideoCardWithMenu.tsx
+++ b/packages/app/app/studio/[organization]/library/components/misc/VideoCardWithMenu.tsx
@@ -1,23 +1,19 @@
-'use client'
+'use client';
 
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import {
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { IExtendedSession } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import { EllipsisVertical } from 'lucide-react'
-import Link from 'next/link'
-import React, { ReactNode } from 'react'
-import { useEffect, useState } from 'react'
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { IExtendedSession } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import { EllipsisVertical } from 'lucide-react';
+import Link from 'next/link';
+import React, { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
+} from '@/components/ui/popover';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
 
 const VideoCardWithMenu = ({
   session,
@@ -25,45 +21,41 @@ const VideoCardWithMenu = ({
   DropdownMenuItems,
   link,
 }: {
-  session: IExtendedSession
-  showDate?: boolean
-  DropdownMenuItems?: ReactNode
-  link: string
+  session: IExtendedSession;
+  showDate?: boolean;
+  DropdownMenuItems?: ReactNode;
+  link: string;
 }) => {
-  const [thumbnail, setThumbnail] = useState<string | undefined>(
-    undefined
-  )
+  const [thumbnail, setThumbnail] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     const getThumbnail = async (session: IExtendedSession) => {
       try {
-        const generatedThumbnail =
-          await generateThumbnailAction(session)
-        setThumbnail(generatedThumbnail)
+        const generatedThumbnail = await generateThumbnailAction(session);
+        setThumbnail(generatedThumbnail);
       } catch (error) {
-        console.error('Failed to generate thumbnail:', error)
+        console.error('Failed to generate thumbnail:', error);
       }
-    }
+    };
 
     if (session) {
-      getThumbnail(session)
+      getThumbnail(session);
     }
-  }, [])
+  }, []);
 
   return (
     <div className="flex min-h-full w-full flex-col rounded-xl uppercase">
       <Link className="h-full w-full" href={link}>
-        <Thumbnail
-          imageUrl={session.coverImage}
-          fallBack={thumbnail}
-        />
+        <Thumbnail imageUrl={session.coverImage} fallBack={thumbnail} />
       </Link>
       <div className="flex items-start justify-between">
         <CardHeader
-          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}>
+          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}
+        >
           <Link target="_blank" rel="noopener" href={link}>
             <CardTitle
-              className={`line-clamp-2 overflow-hidden text-sm capitalize hover:underline`}>
+              className={`line-clamp-2 overflow-hidden text-sm capitalize hover:underline`}
+            >
               {session.name}
             </CardTitle>
           </Link>
@@ -91,7 +83,7 @@ const VideoCardWithMenu = ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default VideoCardWithMenu
+export default VideoCardWithMenu;
diff --git a/packages/app/app/studio/[organization]/library/components/upload/Dropzone.tsx b/packages/app/app/studio/[organization]/library/components/upload/Dropzone.tsx
index c64a059ec..135045fd4 100644
--- a/packages/app/app/studio/[organization]/library/components/upload/Dropzone.tsx
+++ b/packages/app/app/studio/[organization]/library/components/upload/Dropzone.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import React, {
   useEffect,
@@ -6,114 +6,116 @@ import React, {
   useCallback,
   forwardRef,
   MutableRefObject,
-} from 'react'
-import { useDropzone } from 'react-dropzone'
-import { FileUp } from 'lucide-react'
-import uploadVideo from '@/lib/uploadVideo'
-import { getUrlAction } from '@/lib/actions/livepeer'
+} from 'react';
+import { useDropzone } from 'react-dropzone';
+import { FileUp } from 'lucide-react';
+import uploadVideo from '@/lib/uploadVideo';
+import { getUrlAction } from '@/lib/actions/livepeer';
 
 interface DropzoneProps {
-  onChange: (assetId: string) => void
-  abortControllerRef: MutableRefObject<AbortController>
+  onChange: (assetId: string) => void;
+  abortControllerRef: MutableRefObject<AbortController>;
 }
 
-const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(
-  (props, ref) => {
-    const { onChange, abortControllerRef } = props
-    const [progress, setProgress] = useState<number>(0)
-    const [isUploading, setIsUploading] = useState(false)
-    const [assetId, setAssetId] = useState<string | null>(null)
+const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>((props, ref) => {
+  const { onChange, abortControllerRef } = props;
+  const [progress, setProgress] = useState<number>(0);
+  const [isUploading, setIsUploading] = useState(false);
+  const [assetId, setAssetId] = useState<string | null>(null);
 
-    const startUpload = async (file: File) => {
-      setIsUploading(true)
-      const uploadUrl = await getUrlAction(file.name)
-      if (uploadUrl) {
-        uploadVideo(
-          file,
-          uploadUrl?.tusEndpoint as string,
-          abortControllerRef,
-          (percentage) => setProgress(percentage),
-          async () => {
-            setAssetId(uploadUrl.assetId as string)
-          }
-        )
-      }
-    }
-
-    const onDrop = useCallback(
-      (acceptedFiles: File[]) => {
-        if (acceptedFiles.length > 0) {
-          startUpload(acceptedFiles[0])
+  const startUpload = async (file: File) => {
+    setIsUploading(true);
+    const uploadUrl = await getUrlAction(file.name);
+    if (uploadUrl) {
+      uploadVideo(
+        file,
+        uploadUrl?.tusEndpoint as string,
+        abortControllerRef,
+        (percentage) => setProgress(percentage),
+        async () => {
+          setAssetId(uploadUrl.assetId as string);
         }
-      },
-      [onChange]
-    )
+      );
+    }
+  };
 
-    useEffect(() => {
-      if (assetId) {
-        onChange(assetId)
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        startUpload(acceptedFiles[0]);
       }
-    }, [isUploading, assetId])
-
-    const { getRootProps, getInputProps } = useDropzone({
-      accept: {
-        'video/*': ['.mp4', '.mov'],
-      },
-      maxSize: 5 * 1024 * 1024 * 1024, // 5 GB in bytes
-      maxFiles: 1,
-      onDrop,
-    })
+    },
+    [onChange]
+  );
 
-    if (isUploading && progress >= 100) {
-      return (
-        <div
-          ref={ref}
-          className="flex aspect-video h-40 w-full cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-100 text-sm transition-colors hover:bg-gray-200">
-          <p className="m-2">
-            Uploading finished! Processing now... Please proceed...
-          </p>
-        </div>
-      )
+  useEffect(() => {
+    if (assetId) {
+      onChange(assetId);
     }
+  }, [isUploading, assetId]);
 
-    if (isUploading && progress < 100) {
-      return (
-        <div
-          ref={ref}
-          className="flex aspect-video h-40 w-full cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-100 p-2 transition-colors hover:bg-gray-200">
-          <div className="relative flex h-full w-full items-center justify-center">
-            <div className="absolute left-0 top-0 h-full w-full rounded-md bg-gray-300 opacity-50"></div>
-            <div
-              className="absolute left-0 top-0 h-full rounded-md bg-purple-400"
-              style={{ width: `${progress}%` }}></div>
-            <div className="z-10 flex flex-col items-center justify-center">
-              <p>{progress}%</p>
-              <p>Uploading. Please wait...</p>
-            </div>
-          </div>
-        </div>
-      )
-    }
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: {
+      'video/*': ['.mp4', '.mov'],
+    },
+    maxSize: 5 * 1024 * 1024 * 1024, // 5 GB in bytes
+    maxFiles: 1,
+    onDrop,
+  });
 
+  if (isUploading && progress >= 100) {
     return (
       <div
         ref={ref}
-        {...getRootProps()}
-        className="flex h-40 w-full cursor-pointer flex-col items-center justify-center space-y-2 rounded-md border-2 border-dashed border-gray-300 bg-white text-sm transition-colors hover:bg-gray-200">
-        <FileUp size={35} />
-        <input {...getInputProps()} />
-        <div className="mx-4">
-          <p>Drag and drop videos to upload... Or just click here!</p>
-          <p>
-            Maximum video file size is 5GB. Best resolution of 1920 x
-            1080. Aspect ratio of 16:9
-          </p>
+        className="flex aspect-video h-40 w-full cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-100 text-sm transition-colors hover:bg-gray-200"
+      >
+        <p className="m-2">
+          Uploading finished! Processing now... Please proceed...
+        </p>
+      </div>
+    );
+  }
+
+  if (isUploading && progress < 100) {
+    return (
+      <div
+        ref={ref}
+        className="flex aspect-video h-40 w-full cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-gray-100 p-2 transition-colors hover:bg-gray-200"
+      >
+        <div className="relative flex h-full w-full items-center justify-center">
+          <div className="absolute left-0 top-0 h-full w-full rounded-md bg-gray-300 opacity-50"></div>
+          <div
+            className="absolute left-0 top-0 h-full rounded-md bg-purple-400"
+            style={{ width: `${progress}%` }}
+          ></div>
+          <div className="z-10 flex flex-col items-center justify-center">
+            <p>{progress}%</p>
+            <p>Uploading. Please wait...</p>
+          </div>
         </div>
       </div>
-    )
+    );
   }
-)
 
-Dropzone.displayName = 'Dropzone'
+  return (
+    <div
+      ref={ref}
+      {...getRootProps()}
+      className="flex h-40 w-full cursor-pointer flex-col items-center justify-center space-y-2 rounded-md border-2 border-dashed border-gray-300 bg-white text-sm transition-colors hover:bg-gray-200"
+    >
+      <FileUp size={35} />
+      <input {...getInputProps()} />
+      <div className="mx-4">
+        <p>Drag and drop videos to upload... Or just click here!</p>
+        <p>
+          Maximum video file size is 5GB. Best resolution of 1920 x 1080. Aspect
+          ratio of 16:9
+        </p>
+      </div>
+    </div>
+  );
+});
+
+Dropzone.displayName = 'Dropzone';
 
-export default Dropzone
+export default Dropzone;
diff --git a/packages/app/app/studio/[organization]/library/components/upload/UploadProgress.tsx b/packages/app/app/studio/[organization]/library/components/upload/UploadProgress.tsx
index e17a05ae0..c1dcfc531 100644
--- a/packages/app/app/studio/[organization]/library/components/upload/UploadProgress.tsx
+++ b/packages/app/app/studio/[organization]/library/components/upload/UploadProgress.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import { Progress } from '@/components/ui/progress'
-import Alert from '@/components/misc/interact/Alert'
-import { Button } from '@/components/ui/button'
-import { type ISession } from 'streameth-new-server/src/interfaces/session.interface'
-import { Card, CardTitle } from '@/components/ui/card'
+import Link from 'next/link';
+import { Progress } from '@/components/ui/progress';
+import Alert from '@/components/misc/interact/Alert';
+import { Button } from '@/components/ui/button';
+import { type ISession } from 'streameth-new-server/src/interfaces/session.interface';
+import { Card, CardTitle } from '@/components/ui/card';
 
 const UploadProgress = ({
   organization,
@@ -11,10 +11,10 @@ const UploadProgress = ({
   progress,
   handleCancel,
 }: {
-  organization: string
-  session: ISession
-  progress: number
-  handleCancel: () => void
+  organization: string;
+  session: ISession;
+  progress: number;
+  handleCancel: () => void;
 }) => {
   return (
     <>
@@ -33,7 +33,8 @@ const UploadProgress = ({
         <Card className="my-2 flex w-full justify-between bg-gray-200 p-2 px-4">
           <Button asChild>
             <Link
-              href={`/studio/${organization}/library/${session!._id?.toString()}/edit`}>
+              href={`/studio/${organization}/library/${session!._id?.toString()}/edit`}
+            >
               Go to the video...
             </Link>
           </Button>
@@ -42,7 +43,7 @@ const UploadProgress = ({
         </Card>
       )}
     </>
-  )
-}
+  );
+};
 
-export default UploadProgress
+export default UploadProgress;
diff --git a/packages/app/app/studio/[organization]/library/components/upload/UploadVideoForm.tsx b/packages/app/app/studio/[organization]/library/components/upload/UploadVideoForm.tsx
index fbe788eb9..9c4b7746a 100644
--- a/packages/app/app/studio/[organization]/library/components/upload/UploadVideoForm.tsx
+++ b/packages/app/app/studio/[organization]/library/components/upload/UploadVideoForm.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import { useState, useRef } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { useState, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button, buttonVariants } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -12,24 +12,24 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { sessionSchema } from '@/lib/schema'
-import { toast } from 'sonner'
-import { createSessionAction } from '@/lib/actions/sessions'
-import { Loader2, Earth, Lock, ChevronDown } from 'lucide-react'
-import Dropzone from './Dropzone'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
-import { DialogClose } from '@/components/ui/dialog'
-import { SessionType } from 'streameth-new-server/src/interfaces/session.interface'
-import { createStateAction } from '@/lib/actions/state'
-import { StateType } from 'streameth-new-server/src/interfaces/state.interface'
-import ImageDropzone from '../../[session]/components/ImageDropzone'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { sessionSchema } from '@/lib/schema';
+import { toast } from 'sonner';
+import { createSessionAction } from '@/lib/actions/sessions';
+import { Loader2, Earth, Lock, ChevronDown } from 'lucide-react';
+import Dropzone from './Dropzone';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
+import { DialogClose } from '@/components/ui/dialog';
+import { SessionType } from 'streameth-new-server/src/interfaces/session.interface';
+import { createStateAction } from '@/lib/actions/state';
+import { StateType } from 'streameth-new-server/src/interfaces/state.interface';
+import ImageDropzone from '../../[session]/components/ImageDropzone';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
+} from '@/components/ui/popover';
 
 const UploadVideoForm = ({
   stageId,
@@ -37,13 +37,13 @@ const UploadVideoForm = ({
   organizationId,
   onFinish,
 }: {
-  stageId?: string
-  eventId?: string
-  organizationId: string
-  onFinish: () => void
+  stageId?: string;
+  eventId?: string;
+  organizationId: string;
+  onFinish: () => void;
 }) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const abortControllerRef = useRef(new AbortController())
+  const [isLoading, setIsLoading] = useState(false);
+  const abortControllerRef = useRef(new AbortController());
 
   const form = useForm<z.infer<typeof sessionSchema>>({
     resolver: zodResolver(sessionSchema),
@@ -53,14 +53,14 @@ const UploadVideoForm = ({
       coverImage: '',
       assetId: '',
     },
-  })
+  });
 
   const handleCancel = () => {
-    abortControllerRef.current.abort()
-  }
+    abortControllerRef.current.abort();
+  };
 
   function onSubmit(values: z.infer<typeof sessionSchema>) {
-    setIsLoading(true)
+    setIsLoading(true);
 
     createSessionAction({
       session: {
@@ -75,7 +75,7 @@ const UploadVideoForm = ({
       },
     })
       .then(async (session) => {
-        onFinish()
+        onFinish();
 
         const state = await createStateAction({
           state: {
@@ -84,22 +84,20 @@ const UploadVideoForm = ({
             sessionSlug: session.slug,
             organizationId: session.organizationId,
           },
-        })
+        });
       })
       .catch((e) => {
-        console.log(e)
-        toast.error('Error creating Session')
+        console.log(e);
+        toast.error('Error creating Session');
       })
       .finally(() => {
-        setIsLoading(false)
-      })
+        setIsLoading(false);
+      });
   }
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
         <FormField
           control={form.control}
           name="name"
@@ -157,14 +155,16 @@ const UploadVideoForm = ({
                       {!field.value ? (
                         <div
                           onClick={() => field.onChange(true)}
-                          className="flex items-center space-x-2">
+                          className="flex items-center space-x-2"
+                        >
                           <Earth size={16} />
                           <p>Make Public</p>
                         </div>
                       ) : (
                         <div
                           onClick={() => field.onChange(false)}
-                          className="flex items-center space-x-2">
+                          className="flex items-center space-x-2"
+                        >
                           <Lock size={16} />
                           <p>Make Private</p>
                         </div>
@@ -200,10 +200,7 @@ const UploadVideoForm = ({
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <Dropzone
-                  {...field}
-                  abortControllerRef={abortControllerRef}
-                />
+                <Dropzone {...field} abortControllerRef={abortControllerRef} />
               </FormControl>
             </FormItem>
           )}
@@ -212,7 +209,8 @@ const UploadVideoForm = ({
           <DialogClose>
             <span
               className={` ${buttonVariants({ variant: 'secondary' })} 'text-black border-2`}
-              onClick={() => handleCancel()}>
+              onClick={() => handleCancel()}
+            >
               Cancel
             </span>
           </DialogClose>
@@ -223,7 +221,8 @@ const UploadVideoForm = ({
               isLoading
             }
             variant={'primary'}
-            type="submit">
+            type="submit"
+          >
             {isLoading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -236,7 +235,7 @@ const UploadVideoForm = ({
         </div>
       </form>
     </Form>
-  )
-}
+  );
+};
 
-export default UploadVideoForm
+export default UploadVideoForm;
diff --git a/packages/app/app/studio/[organization]/library/create/CreateSession.tsx b/packages/app/app/studio/[organization]/library/create/CreateSession.tsx
index 700aaa129..d0dd2588a 100644
--- a/packages/app/app/studio/[organization]/library/create/CreateSession.tsx
+++ b/packages/app/app/studio/[organization]/library/create/CreateSession.tsx
@@ -1,9 +1,9 @@
-'use client'
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { Button } from '@/components/ui/button'
+'use client';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
@@ -11,47 +11,47 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   DialogHeader,
-} from '@/components/ui/dialog'
-import { sessionSchema } from '@/lib/schema'
-import { toast } from 'sonner'
-import { createSessionAction } from '@/lib/actions/sessions'
-import { Loader2 } from 'lucide-react'
-import { useAccount } from 'wagmi'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
-import { SessionType } from 'streameth-new-server/src/interfaces/session.interface'
+} from '@/components/ui/dialog';
+import { sessionSchema } from '@/lib/schema';
+import { toast } from 'sonner';
+import { createSessionAction } from '@/lib/actions/sessions';
+import { Loader2 } from 'lucide-react';
+import { useAccount } from 'wagmi';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
+import { SessionType } from 'streameth-new-server/src/interfaces/session.interface';
 
 export default function CreateSession({
   eventId,
   organizationId,
   stageId,
 }: {
-  eventId: string
-  organizationId: string
-  stageId: string
+  eventId: string;
+  organizationId: string;
+  stageId: string;
 }) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const { address } = useAccount()
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const { address } = useAccount();
   const form = useForm<z.infer<typeof sessionSchema>>({
     resolver: zodResolver(sessionSchema),
     defaultValues: {
       name: '',
       description: '',
     },
-  })
+  });
 
   function onSubmit(values: z.infer<typeof sessionSchema>) {
-    setIsLoading(true)
+    setIsLoading(true);
     if (!address) {
-      toast.error('No wallet address found')
-      return
+      toast.error('No wallet address found');
+      return;
     }
     createSessionAction({
       session: {
@@ -66,15 +66,15 @@ export default function CreateSession({
       },
     })
       .then(() => {
-        setIsOpen(false)
-        toast.success('Session created')
+        setIsOpen(false);
+        toast.success('Session created');
       })
       .catch(() => {
-        toast.error('Error creating Session')
+        toast.error('Error creating Session');
       })
       .finally(() => {
-        setIsLoading(false)
-      })
+        setIsLoading(false);
+      });
   }
 
   return (
@@ -89,10 +89,11 @@ export default function CreateSession({
         <Form {...form}>
           <form
             onError={(errors) => {
-              alert(errors)
+              alert(errors);
             }}
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-8">
+            className="space-y-8"
+          >
             <FormField
               control={form.control}
               name="name"
@@ -119,13 +120,10 @@ export default function CreateSession({
                 </FormItem>
               )}
             />
-            <Button
-              disabled={getFormSubmitStatus(form)}
-              type="submit">
+            <Button disabled={getFormSubmitStatus(form)} type="submit">
               {isLoading ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}
-                  Please wait
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
                 </>
               ) : (
                 'Create'
@@ -135,5 +133,5 @@ export default function CreateSession({
         </Form>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/packages/app/app/studio/[organization]/library/page.tsx b/packages/app/app/studio/[organization]/library/page.tsx
index 1efcd7c76..8f36b8126 100644
--- a/packages/app/app/studio/[organization]/library/page.tsx
+++ b/packages/app/app/studio/[organization]/library/page.tsx
@@ -1,27 +1,27 @@
-'use server'
+'use server';
 
-import { fetchAllSessions } from '@/lib/data'
-import { redirect } from 'next/navigation'
-import LibraryListLayout from './components/LibraryListLayout'
-import UploadVideoDialog from './components/UploadVideoDialog'
-import { Suspense } from 'react'
-import VideoCardSkeleton from '@/components/misc/VideoCard/VideoCardSkeleton'
-import TableSkeleton from '@/components/misc/Table/TableSkeleton'
-import EmptyLibrary from './components/EmptyLibrary'
-import { IExtendedSession, eLayout, eSort } from '@/lib/types'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import NotFound from '@/not-found'
-import { sortArray } from '@/lib/utils/utils'
-import LibraryGridLayout from './components/LibraryGridLayout'
-import Pagination from '@/app/[organization]/videos/components/pagination'
-import SearchBar from '@/components/misc/SearchBar'
-import LibraryFilter from './components/LibraryFilter'
-import { fetchOrganizationStages } from '@/lib/services/stageService'
-import { fetchAllStates } from '@/lib/services/stateService'
+import { fetchAllSessions } from '@/lib/data';
+import { redirect } from 'next/navigation';
+import LibraryListLayout from './components/LibraryListLayout';
+import UploadVideoDialog from './components/UploadVideoDialog';
+import { Suspense } from 'react';
+import VideoCardSkeleton from '@/components/misc/VideoCard/VideoCardSkeleton';
+import TableSkeleton from '@/components/misc/Table/TableSkeleton';
+import EmptyLibrary from './components/EmptyLibrary';
+import { IExtendedSession, eLayout, eSort } from '@/lib/types';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import NotFound from '@/not-found';
+import { sortArray } from '@/lib/utils/utils';
+import LibraryGridLayout from './components/LibraryGridLayout';
+import Pagination from '@/app/[organization]/videos/components/pagination';
+import SearchBar from '@/components/misc/SearchBar';
+import LibraryFilter from './components/LibraryFilter';
+import { fetchOrganizationStages } from '@/lib/services/stageService';
+import { fetchAllStates } from '@/lib/services/stateService';
 import {
   StateStatus,
   StateType,
-} from 'streameth-new-server/src/interfaces/state.interface'
+} from 'streameth-new-server/src/interfaces/state.interface';
 
 const Loading = ({ layout }: { layout: string }) => {
   return (
@@ -41,36 +41,36 @@ const Loading = ({ layout }: { layout: string }) => {
       )}
       {eLayout.list === layout && <TableSkeleton />}
     </div>
-  )
-}
+  );
+};
 
 const Library = async ({
   params,
   searchParams,
 }: {
-  params: { organization: string }
+  params: { organization: string };
   searchParams: {
-    layout: eLayout
-    sort: eSort
-    show?: boolean
-    limit?: number
-    page?: number
-    searchQuery?: string
-    stage?: string
-    type?: string
-    published?: boolean
-  }
+    layout: eLayout;
+    sort: eSort;
+    show?: boolean;
+    limit?: number;
+    page?: number;
+    searchQuery?: string;
+    stage?: string;
+    type?: string;
+    published?: boolean;
+  };
 }) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
   if (!organization) {
-    return NotFound()
+    return NotFound();
   }
   const stages = await fetchOrganizationStages({
     organizationId: organization._id,
-  })
+  });
 
   const statesSet = new Set(
     (
@@ -79,7 +79,7 @@ const Library = async ({
         status: StateStatus.pending,
       })
     ).map((state) => state.sessionId) as unknown as Set<string>
-  )
+  );
 
   let sessions = await fetchAllSessions({
     organizationSlug: params.organization,
@@ -90,33 +90,27 @@ const Library = async ({
     stageId: searchParams.stage,
     published: searchParams.published,
     type: searchParams.type,
-  })
+  });
 
   let filteredSession = sessions.sessions.filter(
-    (session) =>
-      session.videoUrl || statesSet.has(session._id.toString())
-  )
+    (session) => session.videoUrl || statesSet.has(session._id.toString())
+  );
 
   const sortedSessions = sortArray(
     filteredSession,
     searchParams.sort
-  ) as unknown as IExtendedSession[]
+  ) as unknown as IExtendedSession[];
 
   return (
     <div className="flex h-full w-full flex-col bg-white">
       <div className="w-full p-4">
         <h2 className="mb-2 text-lg font-bold">Video library</h2>
         <div className="flex justify-between">
-          <UploadVideoDialog
-            organizationId={organization._id.toString()}
-          />
+          <UploadVideoDialog organizationId={organization._id.toString()} />
 
           <div className="flex items-center">
             <div className="z-50 min-w-[300px] lg:min-w-[400px]">
-              <SearchBar
-                organizationSlug={params.organization}
-                isStudio
-              />
+              <SearchBar organizationSlug={params.organization} isStudio />
             </div>
             <LibraryFilter stages={stages} />
           </div>
@@ -142,15 +136,15 @@ const Library = async ({
       )}
       <Pagination {...sessions.pagination} />
     </div>
-  )
-}
+  );
+};
 
 const LibraryPage = async ({
   params,
   searchParams,
 }: {
-  params: { organization: string }
-  searchParams: { layout: eLayout; sort: eSort; show: boolean }
+  params: { organization: string };
+  searchParams: { layout: eLayout; sort: eSort; show: boolean };
 }) => {
   if (
     !searchParams.layout ||
@@ -160,16 +154,17 @@ const LibraryPage = async ({
   ) {
     redirect(
       `/studio/${params.organization}/library?layout=${eLayout.list}&sort=${eSort.desc_date}&page=1&limit=20`
-    )
+    );
   }
 
   return (
     <Suspense
       key={searchParams.toString()}
-      fallback={<Loading layout={searchParams.layout} />}>
+      fallback={<Loading layout={searchParams.layout} />}
+    >
       <Library params={params} searchParams={searchParams} />
     </Suspense>
-  )
-}
+  );
+};
 
-export default LibraryPage
+export default LibraryPage;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/DeleteMultistream.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/DeleteMultistream.tsx
index 00f14cce8..944b8c743 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/DeleteMultistream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/DeleteMultistream.tsx
@@ -1,6 +1,6 @@
-'use client'
+'use client';
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -9,48 +9,41 @@ import {
   DialogTitle,
   DialogTrigger,
   DialogClose,
-} from '@/components/ui/dialog'
-import { deleteMultistreamAction } from '@/lib/actions/stages'
-import { Loader2, Trash2 } from 'lucide-react'
-import React, { useState } from 'react'
-import { toast } from 'sonner'
+} from '@/components/ui/dialog';
+import { deleteMultistreamAction } from '@/lib/actions/stages';
+import { Loader2, Trash2 } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
 
 const DeleteMultistream = ({
   streamId,
   organizationId,
   targetId,
 }: {
-  streamId?: string
-  organizationId: string
-  targetId?: string
+  streamId?: string;
+  organizationId: string;
+  targetId?: string;
 }) => {
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
 
-  if (!streamId || !targetId) return null
+  if (!streamId || !targetId) return null;
 
   const handleDelete = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
-      await deleteMultistreamAction(
-        streamId,
-        organizationId,
-        targetId
-      )
-      toast.success('Multistream target deleted')
+      await deleteMultistreamAction(streamId, organizationId, targetId);
+      toast.success('Multistream target deleted');
     } catch (error) {
-      toast.error("Couldn't delete multistream target")
+      toast.error("Couldn't delete multistream target");
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button
-          disabled={isLoading}
-          className="flex gap-1"
-          variant="outline">
+        <Button disabled={isLoading} className="flex gap-1" variant="outline">
           {isLoading ? (
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />
           ) : (
@@ -76,13 +69,14 @@ const DeleteMultistream = ({
           <Button
             onClick={handleDelete}
             variant="destructive"
-            loading={isLoading}>
+            loading={isLoading}
+          >
             Delete Multistream
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default DeleteMultistream
+export default DeleteMultistream;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Destinations.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Destinations.tsx
index bd90b7c1d..2c5b24219 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Destinations.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Destinations.tsx
@@ -1,20 +1,20 @@
-import { Card } from '@/components/ui/card'
-import Multistream from './Multistream'
-import PublishLivestream from './PublishLivestream'
-import { IExtendedStage } from '@/lib/types'
-import { CreateMultistreamTarget } from './StreamPlatforms/CreateMultistreamTarget'
-import NotFound from '@/app/not-found'
-import EditLivestream from '../../components/EditLivestream'
+import { Card } from '@/components/ui/card';
+import Multistream from './Multistream';
+import PublishLivestream from './PublishLivestream';
+import { IExtendedStage } from '@/lib/types';
+import { CreateMultistreamTarget } from './StreamPlatforms/CreateMultistreamTarget';
+import NotFound from '@/app/not-found';
+import EditLivestream from '../../components/EditLivestream';
 
 const Destinations = ({
   organization,
   stream,
 }: {
-  organization: string
-  stream: IExtendedStage
+  organization: string;
+  stream: IExtendedStage;
 }) => {
   if (!stream.streamSettings?.streamId) {
-    return NotFound()
+    return NotFound();
   }
 
   return (
@@ -38,7 +38,7 @@ const Destinations = ({
       />
       {/* <PublishLivestream stream={stream} /> */}
     </Card>
-  )
-}
+  );
+};
 
-export default Destinations
+export default Destinations;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/LivestreamEmbedCode.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/LivestreamEmbedCode.tsx
index 1745d9f94..c80b71527 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/LivestreamEmbedCode.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/LivestreamEmbedCode.tsx
@@ -1,6 +1,6 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardTitle } from '@/components/ui/card'
+'use client';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
 import {
   Dialog,
   DialogContent,
@@ -8,29 +8,26 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { IGenerateEmbed } from '@/lib/types'
-import { copyToClipboard, generateEmbedCode } from '@/lib/utils/utils'
-import { Code2, Copy } from 'lucide-react'
-import React, { useEffect, useState } from 'react'
+} from '@/components/ui/dialog';
+import { IGenerateEmbed } from '@/lib/types';
+import { copyToClipboard, generateEmbedCode } from '@/lib/utils/utils';
+import { Code2, Copy } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
 
-const LivestreamEmbedCode = ({
-  streamId,
-  playerName,
-}: IGenerateEmbed) => {
-  const [open, setOpen] = React.useState(false)
-  const [url, setUrl] = useState('')
+const LivestreamEmbedCode = ({ streamId, playerName }: IGenerateEmbed) => {
+  const [open, setOpen] = React.useState(false);
+  const [url, setUrl] = useState('');
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      setUrl(window.location.origin)
+      setUrl(window.location.origin);
     }
-  }, [])
+  }, []);
   const generatedEmbedCode = generateEmbedCode({
     url: url,
     vod: false,
     stageId: streamId,
     playerName: playerName,
-  })
+  });
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -49,7 +46,8 @@ const LivestreamEmbedCode = ({
           <p>HTML</p>
           <div
             onClick={() => copyToClipboard(generatedEmbedCode)}
-            className="flex cursor-pointer gap-2">
+            className="flex cursor-pointer gap-2"
+          >
             <Copy className="h-4 w-4 text-muted-foreground" />
             Copy Code
           </div>
@@ -59,7 +57,7 @@ const LivestreamEmbedCode = ({
         </p>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default LivestreamEmbedCode
+export default LivestreamEmbedCode;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Multistream.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Multistream.tsx
index 7b572d419..bd9603362 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Multistream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Multistream.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Card, CardContent, CardTitle } from '@/components/ui/card'
+import React from 'react';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
 import {
   Table,
   TableBody,
@@ -7,20 +7,20 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table'
-import DeleteMultistream from './DeleteMultistream'
-import { CreateMultistreamTarget } from './StreamPlatforms/CreateMultistreamTarget'
-import { IExtendedStage } from '@/lib/types'
+} from '@/components/ui/table';
+import DeleteMultistream from './DeleteMultistream';
+import { CreateMultistreamTarget } from './StreamPlatforms/CreateMultistreamTarget';
+import { IExtendedStage } from '@/lib/types';
 
 const Multistream = ({
   stream,
   organizationId,
 }: {
-  stream: IExtendedStage
-  organizationId: string
+  stream: IExtendedStage;
+  organizationId: string;
 }) => {
-  if (!stream) return null
-  const streamTargets = stream?.streamSettings?.targets || []
+  if (!stream) return null;
+  const streamTargets = stream?.streamSettings?.targets || [];
 
   return (
     <div className="w-full">
@@ -51,9 +51,7 @@ const Multistream = ({
             <Table>
               <TableHeader className="sticky top-0 z-50">
                 <TableRow>
-                  <TableHead className="min-w-[100px]">
-                    Name
-                  </TableHead>
+                  <TableHead className="min-w-[100px]">Name</TableHead>
                 </TableRow>
               </TableHeader>
 
@@ -81,7 +79,7 @@ const Multistream = ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Multistream
+export default Multistream;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/PublishLivestream.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/PublishLivestream.tsx
index 946f67763..0ce358392 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/PublishLivestream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/PublishLivestream.tsx
@@ -1,38 +1,34 @@
-'use client'
-import React, { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { IExtendedStage } from '@/lib/types'
-import { toast } from 'sonner'
-import { updateStageAction } from '@/lib/actions/stages'
-import { Check } from 'lucide-react'
-import { Card } from '@/components/ui/card'
-import StreamethLogo from '@/public/logo.png'
-import Image from 'next/image'
+'use client';
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { IExtendedStage } from '@/lib/types';
+import { toast } from 'sonner';
+import { updateStageAction } from '@/lib/actions/stages';
+import { Check } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import StreamethLogo from '@/public/logo.png';
+import Image from 'next/image';
 
-const PublishLivestream = ({
-  stream,
-}: {
-  stream: IExtendedStage
-}) => {
-  const [isLoading, setIsLoading] = useState(false)
+const PublishLivestream = ({ stream }: { stream: IExtendedStage }) => {
+  const [isLoading, setIsLoading] = useState(false);
   const handlePublishStream = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     updateStageAction({
       stage: { ...stream, published: !stream.published },
     })
       .then((response) => {
         if (response) {
-          setIsLoading(false)
-          toast.success('Stream updated')
+          setIsLoading(false);
+          toast.success('Stream updated');
         } else {
-          toast.error('Error publishing stream')
+          toast.error('Error publishing stream');
         }
       })
       .catch(() => {
-        toast.error('Error publishing stream')
-        setIsLoading(false)
-      })
-  }
+        toast.error('Error publishing stream');
+        setIsLoading(false);
+      });
+  };
 
   return (
     <div className="flex justify-between space-x-2">
@@ -42,7 +38,8 @@ const PublishLivestream = ({
           loading={isLoading}
           onClick={handlePublishStream}
           disabled={stream?.published || isLoading}
-          variant={'destructive'}>
+          variant={'destructive'}
+        >
           <span>Go live!</span>
         </Button>
       ) : (
@@ -51,12 +48,13 @@ const PublishLivestream = ({
           loading={isLoading}
           onClick={handlePublishStream}
           disabled={!stream?.published || isLoading}
-          variant="destructive-outline">
+          variant="destructive-outline"
+        >
           Unpublish
         </Button>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default PublishLivestream
+export default PublishLivestream;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamConfigWithPlayer.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamConfigWithPlayer.tsx
index 1c29bc94d..857a882e1 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamConfigWithPlayer.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamConfigWithPlayer.tsx
@@ -1,41 +1,39 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import CopyText from '../../../../../../components/misc/CopyText'
-import PlayerWithControls from '@/components/ui/Player'
-import { IExtendedStage } from '@/lib/types'
-import { fetchStage } from '@/lib/services/stageService'
+'use client';
+import React, { useEffect, useState } from 'react';
+import CopyText from '../../../../../../components/misc/CopyText';
+import PlayerWithControls from '@/components/ui/Player';
+import { IExtendedStage } from '@/lib/types';
+import { fetchStage } from '@/lib/services/stageService';
 
 const StreamConfigWithPlayer = ({
   stream,
   streamId,
   organization,
 }: {
-  stream: IExtendedStage
-  streamId: string
-  organization: string
+  stream: IExtendedStage;
+  streamId: string;
+  organization: string;
 }) => {
-  const [isLive, setIsLive] = useState(
-    stream?.streamSettings?.isActive
-  )
+  const [isLive, setIsLive] = useState(stream?.streamSettings?.isActive);
 
   const checkIsLive = async () => {
     try {
-      const res = await fetchStage({ stage: stream._id as string })
-      setIsLive(res?.streamSettings?.isActive)
+      const res = await fetchStage({ stage: stream._id as string });
+      setIsLive(res?.streamSettings?.isActive);
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-  }
+  };
 
   useEffect(() => {
     if (stream?.streamSettings?.isActive) {
-      return
+      return;
     }
 
     const interval = setInterval(() => {
-      checkIsLive()
-    }, 5000)
-  }, [stream?.streamSettings?.isActive])
+      checkIsLive();
+    }, 5000);
+  }, [stream?.streamSettings?.isActive]);
 
   return (
     <>
@@ -45,10 +43,9 @@ const StreamConfigWithPlayer = ({
             Connect your Streaming providers
           </h3>
           <p className="mb-6 text-center text-lg lg:w-3/4">
-            Copy and paste the stream key into your streaming
-            software. Use either the RTMP or SRT ingest, depending on
-            your use-case. The RTMP ingest is more common with OBS
-            users
+            Copy and paste the stream key into your streaming software. Use
+            either the RTMP or SRT ingest, depending on your use-case. The RTMP
+            ingest is more common with OBS users
           </p>
           <div className="flex flex-col gap-3">
             <CopyText
@@ -75,7 +72,7 @@ const StreamConfigWithPlayer = ({
         />
       )}
     </>
-  )
-}
+  );
+};
 
-export default StreamConfigWithPlayer
+export default StreamConfigWithPlayer;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHeader.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHeader.tsx
index e9ed3b771..7c80f9991 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHeader.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHeader.tsx
@@ -1,26 +1,26 @@
-'use client'
+'use client';
 
-import { IExtendedStage } from '@/lib/types'
-import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { ArrowLeft } from 'lucide-react'
+import { IExtendedStage } from '@/lib/types';
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { ArrowLeft } from 'lucide-react';
 
 const StreamHeader = ({
   stream,
   organization,
   isLiveStreamPage,
 }: {
-  stream: IExtendedStage
-  organization: string
-  isLiveStreamPage?: boolean
+  stream: IExtendedStage;
+  organization: string;
+  isLiveStreamPage?: boolean;
 }) => {
-  const [url, setUrl] = useState('')
+  const [url, setUrl] = useState('');
   useEffect(() => {
     // This code will only run on the client side
-    if (typeof window === 'undefined') return
+    if (typeof window === 'undefined') return;
 
-    setUrl(window.location.origin)
-  }, [])
+    setUrl(window.location.origin);
+  }, []);
 
   return (
     <div>
@@ -33,7 +33,7 @@ const StreamHeader = ({
         </Link>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default StreamHeader
+export default StreamHeader;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHealth.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHealth.tsx
index 98029df91..f8efb805b 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHealth.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamHealth.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
 
-import { fetchStage } from '@/lib/services/stageService'
-import { IExtendedStage } from '@/lib/types'
-import { useEffect, useState } from 'react'
+import { fetchStage } from '@/lib/services/stageService';
+import { IExtendedStage } from '@/lib/types';
+import { useEffect, useState } from 'react';
 
 const StreamHealth = ({
   stream,
@@ -10,33 +10,31 @@ const StreamHealth = ({
   organization,
   isLive,
 }: {
-  stream: IExtendedStage
-  streamId: string
-  organization: string
-  isLive?: boolean
+  stream: IExtendedStage;
+  streamId: string;
+  organization: string;
+  isLive?: boolean;
 }) => {
-  const [isHealthy, setIsHealthy] = useState(
-    stream?.streamSettings?.isHealthy
-  )
+  const [isHealthy, setIsHealthy] = useState(stream?.streamSettings?.isHealthy);
 
   const checkIsHealthy = async () => {
     try {
-      const res = await fetchStage({ stage: stream._id as string })
-      setIsHealthy(res?.streamSettings?.isHealthy)
+      const res = await fetchStage({ stage: stream._id as string });
+      setIsHealthy(res?.streamSettings?.isHealthy);
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-  }
+  };
 
   useEffect(() => {
     if (!isLive) {
-      return
+      return;
     }
 
     setInterval(() => {
-      checkIsHealthy()
-    }, 10000)
-  }, [stream?.streamSettings?.isHealthy, isLive])
+      checkIsHealthy();
+    }, 10000);
+  }, [stream?.streamSettings?.isHealthy, isLive]);
 
   return (
     isLive && (
@@ -60,6 +58,6 @@ const StreamHealth = ({
         )}
       </>
     )
-  )
-}
-export default StreamHealth
+  );
+};
+export default StreamHealth;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/CreateMultistreamTarget.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/CreateMultistreamTarget.tsx
index b0e4addbd..5c213f7df 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/CreateMultistreamTarget.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/CreateMultistreamTarget.tsx
@@ -1,27 +1,27 @@
-'use client'
+'use client';
 
-import { Button } from '@/components/ui/button'
-import { useState } from 'react'
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { Plus } from 'lucide-react'
-import StreamPlatformGrid from './StreamPlatforms'
+} from '@/components/ui/dialog';
+import { Plus } from 'lucide-react';
+import StreamPlatformGrid from './StreamPlatforms';
 
 export const CreateMultistreamTarget = ({
   streamId,
   organizationId,
   btnName = 'Add',
 }: {
-  streamId: string
-  organizationId: string
-  btnName?: string
+  streamId: string;
+  organizationId: string;
+  btnName?: string;
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -44,5 +44,5 @@ export const CreateMultistreamTarget = ({
         />
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/StreamPlatforms.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/StreamPlatforms.tsx
index 0b66ff709..d8c36c55f 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/StreamPlatforms.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/StreamPlatforms.tsx
@@ -1,48 +1,49 @@
-import React, { useState } from 'react'
-import { SiX, SiYoutube } from 'react-icons/si'
-import { Radio } from 'lucide-react'
-import CreateCustomStream from './forms/CustomRtmpForm'
-import NotFound from '@/app/not-found'
+import React, { useState } from 'react';
+import { SiX, SiYoutube } from 'react-icons/si';
+import { Radio } from 'lucide-react';
+import CreateCustomStream from './forms/CustomRtmpForm';
+import NotFound from '@/app/not-found';
 
 interface StreamTargetItem {
-  title: string
-  icon: JSX.Element
-  onClick?: () => JSX.Element
+  title: string;
+  icon: JSX.Element;
+  onClick?: () => JSX.Element;
 }
 const Block = ({
   index,
   item,
   handleClick,
 }: {
-  index: number
-  item: StreamTargetItem
-  handleClick: () => void
+  index: number;
+  item: StreamTargetItem;
+  handleClick: () => void;
 }) => {
   return (
     <div
       key={index}
       className="flex flex-col items-center justify-between rounded bg-white py-4 shadow transition-colors hover:cursor-pointer hover:bg-gray-100"
-      onClick={handleClick}>
+      onClick={handleClick}
+    >
       <span className="my-auto">{item.icon}</span>
       <span className="text-black">{item.title}</span>
     </div>
-  )
-}
+  );
+};
 
 const StreamPlatformGrid = ({
   streamId,
   organizationId,
   setIsOpen,
 }: {
-  streamId?: string
-  organizationId?: string
-  setIsOpen: (open: boolean) => void
+  streamId?: string;
+  organizationId?: string;
+  setIsOpen: (open: boolean) => void;
 }) => {
   const [SelectedComponent, setSelectedComponent] =
-    useState<JSX.Element | null>(null)
+    useState<JSX.Element | null>(null);
 
   if (!streamId || !organizationId) {
-    return NotFound()
+    return NotFound();
   }
 
   const StreamTarget: StreamTargetItem[] = [
@@ -65,13 +66,13 @@ const StreamPlatformGrid = ({
         />
       ),
     },
-  ]
+  ];
 
   const handleBlockClick = (item: StreamTargetItem) => {
     if (item.onClick) {
-      setSelectedComponent(item.onClick())
+      setSelectedComponent(item.onClick());
     }
-  }
+  };
 
   return (
     <div>
@@ -90,7 +91,7 @@ const StreamPlatformGrid = ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default StreamPlatformGrid
+export default StreamPlatformGrid;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/forms/CustomRtmpForm.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/forms/CustomRtmpForm.tsx
index 6fdf2ec2d..62e053e7b 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/forms/CustomRtmpForm.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/StreamPlatforms/forms/CustomRtmpForm.tsx
@@ -1,22 +1,22 @@
-'use client'
+'use client';
 
-import { useEffect } from 'react'
-import { toast } from 'sonner'
-import { Button } from '@/components/ui/button'
-import { DialogFooter } from '@/components/ui/dialog'
-import { createMultistreamAction } from '@/lib/actions/stages'
-import { ReloadIcon } from '@radix-ui/react-icons'
-import { useFormState, useFormStatus } from 'react-dom'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { DialogFooter } from '@/components/ui/dialog';
+import { createMultistreamAction } from '@/lib/actions/stages';
+import { ReloadIcon } from '@radix-ui/react-icons';
+import { useFormState, useFormStatus } from 'react-dom';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
 
 const initialState = {
   message: '',
   success: false,
-}
+};
 
 function SubmitButton() {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
 
   if (pending) {
     return (
@@ -24,9 +24,9 @@ function SubmitButton() {
         <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
         Please wait
       </Button>
-    )
+    );
   }
-  return <Button type="submit">Create</Button>
+  return <Button type="submit">Create</Button>;
 }
 
 const CreateCustomStream = ({
@@ -35,39 +35,35 @@ const CreateCustomStream = ({
   btnName = 'Add',
   setIsOpen,
 }: {
-  streamId: string
-  organizationId: string
-  btnName?: string
-  setIsOpen: (open: boolean) => void
+  streamId: string;
+  organizationId: string;
+  btnName?: string;
+  setIsOpen: (open: boolean) => void;
 }) => {
   const [state, formAction] = useFormState(
     createMultistreamAction,
     initialState
-  )
+  );
 
   useEffect(() => {
     if (!state.message) {
-      return
+      return;
     }
 
     if (state.success === false) {
-      toast.error(state.message)
-      return
+      toast.error(state.message);
+      return;
     }
 
-    toast.success(state.message)
-    setIsOpen(false)
-  }, [state])
+    toast.success(state.message);
+    setIsOpen(false);
+  }, [state]);
 
   return (
     <form action={formAction} className="grid gap-4">
       <div className="grid grid-cols-4 items-center gap-4">
         <Input type="hidden" name="streamId" value={streamId} />
-        <Input
-          type="hidden"
-          name="organizationId"
-          value={organizationId}
-        />
+        <Input type="hidden" name="organizationId" value={organizationId} />
         <Label htmlFor="name" className="text-right">
           Name
         </Label>
@@ -108,13 +104,13 @@ const CreateCustomStream = ({
         <div className="flex flex-col">
           <h3 className="font-bold">About</h3>
           <p className="text-muted-foreground">
-            Allows you to add a Custom RTMP or more than 1 channel of
-            the same platform from our list of supported platforms.
+            Allows you to add a Custom RTMP or more than 1 channel of the same
+            platform from our list of supported platforms.
           </p>
         </div>
       </DialogFooter>
     </form>
-  )
-}
+  );
+};
 
-export default CreateCustomStream
+export default CreateCustomStream;
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/page.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/page.tsx
index 796f972f7..1983dc73d 100644
--- a/packages/app/app/studio/[organization]/livestreams/[streamId]/page.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/[streamId]/page.tsx
@@ -1,33 +1,28 @@
-'use server'
+'use server';
 
-import React from 'react'
-import LivestreamEmbedCode from './components/LivestreamEmbedCode'
-import { fetchStage } from '@/lib/services/stageService'
-import { LivestreamPageParams } from '@/lib/types'
-import StreamConfigWithPlayer from './components/StreamConfigWithPlayer'
-import StreamHeader from './components/StreamHeader'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import NotFound from '@/app/not-found'
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/components/ui/tabs'
-import { Card, CardTitle } from '@/components/ui/card'
-import Destinations from './components/Destinations'
-import StreamHealth from './components/StreamHealth'
-import { Button } from '@/components/ui/button'
-import { ArrowRight } from 'lucide-react'
-import Link from 'next/link'
-import ShareLivestream from '../components/ShareLivestream'
+import React from 'react';
+import LivestreamEmbedCode from './components/LivestreamEmbedCode';
+import { fetchStage } from '@/lib/services/stageService';
+import { LivestreamPageParams } from '@/lib/types';
+import StreamConfigWithPlayer from './components/StreamConfigWithPlayer';
+import StreamHeader from './components/StreamHeader';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import NotFound from '@/app/not-found';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardTitle } from '@/components/ui/card';
+import Destinations from './components/Destinations';
+import StreamHealth from './components/StreamHealth';
+import { Button } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import ShareLivestream from '../components/ShareLivestream';
 
 const Livestream = async ({ params }: LivestreamPageParams) => {
-  if (!params.streamId) return null
-  const stream = await fetchStage({ stage: params.streamId })
+  if (!params.streamId) return null;
+  const stream = await fetchStage({ stage: params.streamId });
 
   if (!stream) {
-    return NotFound()
+    return NotFound();
   }
 
   return (
@@ -68,7 +63,8 @@ const Livestream = async ({ params }: LivestreamPageParams) => {
 
             <Link
               href={`/${params.organization}/livestream?stage=${stream._id}`}
-              target="_blank">
+              target="_blank"
+            >
               <Button variant="outline">
                 View Livestream
                 <div>
@@ -78,13 +74,10 @@ const Livestream = async ({ params }: LivestreamPageParams) => {
             </Link>
           </div>
         </div>
-        <Destinations
-          stream={stream}
-          organization={params.organization}
-        />
+        <Destinations stream={stream} organization={params.organization} />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Livestream
+export default Livestream;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx b/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx
index efee740c0..f8a65cc23 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx
@@ -1,7 +1,7 @@
-'use client'
+'use client';
 
-import DatePicker from '@/components/misc/form/datePicker'
-import { Button } from '@/components/ui/button'
+import DatePicker from '@/components/misc/form/datePicker';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
+} from '@/components/ui/dialog';
 import {
   Form,
   FormControl,
@@ -18,40 +18,40 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { createStageAction } from '@/lib/actions/stages'
-import { StageSchema } from '@/lib/schema'
-import { IExtendedOrganization } from '@/lib/types'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { z } from 'zod'
-import CreateLivestreamOptions from './CreateLivestreamOptions'
-import TimePicker from '@/components/misc/form/timePicker'
-import { formatDate } from '@/lib/utils/time'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
-import { LuRadio } from 'react-icons/lu'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { createStageAction } from '@/lib/actions/stages';
+import { StageSchema } from '@/lib/schema';
+import { IExtendedOrganization } from '@/lib/types';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import CreateLivestreamOptions from './CreateLivestreamOptions';
+import TimePicker from '@/components/misc/form/timePicker';
+import { formatDate } from '@/lib/utils/time';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { LuRadio } from 'react-icons/lu';
 
 const CreateLivestreamModal = ({
   organization,
   show,
 }: {
-  show?: boolean
-  organization: IExtendedOrganization
+  show?: boolean;
+  organization: IExtendedOrganization;
 }) => {
-  const [open, setOpen] = useState(show ?? false)
-  const [isMultiDate, setIsMultiDate] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
+  const [open, setOpen] = useState(show ?? false);
+  const [isMultiDate, setIsMultiDate] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [streamType, setStreamType] = useState<
     'instant' | 'schedule' | undefined
-  >()
-  const router = useRouter()
+  >();
+  const router = useRouter();
 
   const form = useForm<z.infer<typeof StageSchema>>({
     resolver: zodResolver(StageSchema),
@@ -64,43 +64,41 @@ const CreateLivestreamModal = ({
       streamEndTime: '',
       isMultipleDate: isMultiDate,
     },
-  })
+  });
 
-  const { watch } = form
-  const streamDate = watch('streamDate')
-  const streamTime = watch('streamTime')
-  const streamEndDate = watch('streamEndDate')
-  const streamEndTime = watch('streamEndTime')
+  const { watch } = form;
+  const streamDate = watch('streamDate');
+  const streamTime = watch('streamTime');
+  const streamEndDate = watch('streamEndDate');
+  const streamEndTime = watch('streamEndTime');
 
   const handleModalClose = () => {
-    setOpen(false)
-    setStreamType(undefined)
-    setIsMultiDate(false)
-    form.reset()
-  }
+    setOpen(false);
+    setStreamType(undefined);
+    setIsMultiDate(false);
+    form.reset();
+  };
 
   const parseDate = (date?: Date, time?: string) => {
     return new Date(
-      `${formatDate(date || new Date(), 'YYYY-MM-DD')}T${
-        time || '00:00'
-      }`
-    )
-  }
+      `${formatDate(date || new Date(), 'YYYY-MM-DD')}T${time || '00:00'}`
+    );
+  };
 
-  const formattedDate = parseDate(streamDate, streamTime)
-  const formattedEndDate = parseDate(streamEndDate, streamEndTime)
+  const formattedDate = parseDate(streamDate, streamTime);
+  const formattedEndDate = parseDate(streamEndDate, streamEndTime);
 
-  const isPast = formattedDate < new Date()
-  const validateEndDate = formattedEndDate < formattedDate
-  const isScheduleFormDisable = !streamDate || !streamTime || isPast
+  const isPast = formattedDate < new Date();
+  const validateEndDate = formattedEndDate < formattedDate;
+  const isScheduleFormDisable = !streamDate || !streamTime || isPast;
 
-  const isSchedule = streamType === 'schedule'
+  const isSchedule = streamType === 'schedule';
 
   function onSubmit(values: z.infer<typeof StageSchema>) {
-    setIsLoading(true)
-    let streamId: string | undefined
+    setIsLoading(true);
+    let streamId: string | undefined;
     // destructure and omit streamTime from the payload
-    const { streamTime, streamEndTime, ...otherValues } = values
+    const { streamTime, streamEndTime, ...otherValues } = values;
     createStageAction({
       stage: {
         ...otherValues,
@@ -110,36 +108,34 @@ const CreateLivestreamModal = ({
       },
     })
       .then((response) => {
-        toast.success(
-          `Stream ${!isSchedule ? 'created' : 'scheduled'}`
-        )
-        streamId = response?._id as string
+        toast.success(`Stream ${!isSchedule ? 'created' : 'scheduled'}`);
+        streamId = response?._id as string;
 
-        router.push(
-          `/studio/${organization?.slug}/livestreams/${streamId}`
-        )
+        router.push(`/studio/${organization?.slug}/livestreams/${streamId}`);
       })
       .catch(() => {
-        toast.error('Error creating stream')
-        setIsLoading(false)
+        toast.error('Error creating stream');
+        setIsLoading(false);
       })
       .finally(() => {
-        setIsLoading(false)
-        handleModalClose()
-      })
+        setIsLoading(false);
+        handleModalClose();
+      });
   }
 
   return (
     <Dialog
       open={open}
       onOpenChange={() => {
-        setOpen(!open)
-        setStreamType(undefined)
-      }}>
+        setOpen(!open);
+        setStreamType(undefined);
+      }}
+    >
       <DialogTrigger asChild>
         <Button
           variant={'outline'}
-          className="flex h-auto w-fit flex-row items-center justify-start space-x-4 rounded-xl border bg-white p-2 pr-4">
+          className="flex h-auto w-fit flex-row items-center justify-start space-x-4 rounded-xl border bg-white p-2 pr-4"
+        >
           <div className="rounded-xl border bg-primary p-4 text-white">
             <LuRadio size={25} />
           </div>
@@ -155,8 +151,8 @@ const CreateLivestreamModal = ({
               {!isSchedule ? 'Create' : 'Schedule'} livestream
             </DialogTitle>
             <DialogDescription>
-              Newly created streams are assigned a special key and
-              RTMP ingest URL to stream into.
+              Newly created streams are assigned a special key and RTMP ingest
+              URL to stream into.
             </DialogDescription>
           </DialogHeader>
           <Form {...form}>
@@ -202,7 +198,8 @@ const CreateLivestreamModal = ({
                   <div className="mt-6">
                     <p
                       className="text-sm"
-                      onClick={() => setIsMultiDate(!isMultiDate)}>
+                      onClick={() => setIsMultiDate(!isMultiDate)}
+                    >
                       Streaming multiple days?
                     </p>
                     <div className="mt-1 flex items-center gap-5">
@@ -216,10 +213,9 @@ const CreateLivestreamModal = ({
                       <div className="flex items-center gap-1">
                         <Checkbox
                           defaultChecked
-                          onCheckedChange={() =>
-                            setIsMultiDate(!isMultiDate)
-                          }
-                          checked={!isMultiDate}></Checkbox>
+                          onCheckedChange={() => setIsMultiDate(!isMultiDate)}
+                          checked={!isMultiDate}
+                        ></Checkbox>
                         <Label>No</Label>
                       </div>
                     </div>
@@ -264,8 +260,8 @@ const CreateLivestreamModal = ({
                   </div>
                   {isPast && (
                     <p className="mt-1 text-[12px] text-destructive">
-                      Couldn&apos;t schedule. The date and time
-                      selected are too far in the past.
+                      Couldn&apos;t schedule. The date and time selected are too
+                      far in the past.
                     </p>
                   )}
                   {isMultiDate && (
@@ -276,9 +272,7 @@ const CreateLivestreamModal = ({
                           name="streamEndDate"
                           render={({ field }) => (
                             <FormItem className="w-full">
-                              <FormLabel required>
-                                Stream End Date
-                              </FormLabel>
+                              <FormLabel required>Stream End Date</FormLabel>
                               <FormControl>
                                 <DatePicker
                                   value={field.value as Date}
@@ -294,9 +288,7 @@ const CreateLivestreamModal = ({
                           name="streamEndTime"
                           render={({ field }) => (
                             <FormItem className="w-full">
-                              <FormLabel required>
-                                Stream End Time
-                              </FormLabel>
+                              <FormLabel required>Stream End Time</FormLabel>
                               <FormControl>
                                 <TimePicker
                                   value={field.value}
@@ -310,8 +302,8 @@ const CreateLivestreamModal = ({
                       </div>
                       {validateEndDate && (
                         <p className="mt-1 text-[12px] text-destructive">
-                          Couldn&apos;t schedule. End date and time
-                          selected are too far in the past.
+                          Couldn&apos;t schedule. End date and time selected are
+                          too far in the past.
                         </p>
                       )}
                     </>
@@ -330,7 +322,8 @@ const CreateLivestreamModal = ({
                     isLoading ||
                     (isSchedule && isScheduleFormDisable)
                   }
-                  type="submit">
+                  type="submit"
+                >
                   {!isSchedule ? 'Create' : 'Schedule'} livestream
                 </Button>
               </DialogFooter>
@@ -339,7 +332,7 @@ const CreateLivestreamModal = ({
         </DialogContent>
       )}
     </Dialog>
-  )
-}
+  );
+};
 
-export default CreateLivestreamModal
+export default CreateLivestreamModal;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamOptions.tsx b/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamOptions.tsx
index f239624da..ead7009e4 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamOptions.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamOptions.tsx
@@ -1,34 +1,33 @@
-'use client'
+'use client';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
-import { Calendar, Radio } from 'lucide-react'
-import React from 'react'
+} from '@/components/ui/dialog';
+import { Calendar, Radio } from 'lucide-react';
+import React from 'react';
 
 const CreateLivestreamOptions = ({
   setStreamType,
 }: {
   setStreamType: React.Dispatch<
     React.SetStateAction<'instant' | 'schedule' | undefined>
-  >
+  >;
 }) => {
   return (
     <DialogContent className="bg-white sm:max-w-[425px]">
       <DialogHeader>
         <DialogTitle>Create livestream</DialogTitle>
-        <DialogDescription>
-          When do you want to go live?
-        </DialogDescription>
+        <DialogDescription>When do you want to go live?</DialogDescription>
       </DialogHeader>
 
       <div className="flex flex-col space-y-3">
         <div
           className="cursor-pointer rounded-md border p-3 hover:bg-secondary"
-          onClick={() => setStreamType('instant')}>
+          onClick={() => setStreamType('instant')}
+        >
           <div className="flex items-center space-x-3">
             <div className="rounded-full bg-muted p-2">
               <Radio />
@@ -43,7 +42,8 @@ const CreateLivestreamOptions = ({
         </div>
         <div
           className="cursor-pointer items-center rounded-md border p-3 hover:bg-secondary"
-          onClick={() => setStreamType('schedule')}>
+          onClick={() => setStreamType('schedule')}
+        >
           <div className="flex items-center space-x-3">
             <div className="rounded-full bg-muted p-2">
               <Calendar />
@@ -59,7 +59,7 @@ const CreateLivestreamOptions = ({
         </div>
       </div>
     </DialogContent>
-  )
-}
+  );
+};
 
-export default CreateLivestreamOptions
+export default CreateLivestreamOptions;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/DeleteLivestream.tsx b/packages/app/app/studio/[organization]/livestreams/components/DeleteLivestream.tsx
index 0765ff380..d43ed4664 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/DeleteLivestream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/DeleteLivestream.tsx
@@ -1,49 +1,48 @@
-'use client'
-import { Button } from '@/components/ui/button'
+'use client';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogClose,
   DialogContent,
   DialogFooter,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { deleteStageAction } from '@/lib/actions/stages'
-import { IExtendedStage } from '@/lib/types'
-import { Trash2 } from 'lucide-react'
-import React, { useState } from 'react'
-import { toast } from 'sonner'
+} from '@/components/ui/dialog';
+import { deleteStageAction } from '@/lib/actions/stages';
+import { IExtendedStage } from '@/lib/types';
+import { Trash2 } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
 
 const DeleteLivestream = ({ stream }: { stream: IExtendedStage }) => {
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [open, setOpen] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [open, setOpen] = useState(false);
   const handleDeleteStage = async () => {
-    setIsDeleting(true)
+    setIsDeleting(true);
     await deleteStageAction({
       stageId: stream._id as string,
       organizationId: stream.organizationId as string,
     })
       .then((response) => {
         if (response) {
-          toast.success('Livestream deleted')
-          setOpen(false)
+          toast.success('Livestream deleted');
+          setOpen(false);
         } else {
-          toast.error('Error deleting livestream')
+          toast.error('Error deleting livestream');
         }
       })
       .catch(() => {
-        toast.error('Error deleting livestream')
+        toast.error('Error deleting livestream');
       })
       .finally(() => {
-        setIsDeleting(false)
-      })
-  }
+        setIsDeleting(false);
+      });
+  };
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger>
           <Button className="justify-start" variant={'ghost'}>
-            <Trash2 className="h-5 w-5 pr-1 text-destructive" />{' '}
-            Delete
+            <Trash2 className="h-5 w-5 pr-1 text-destructive" /> Delete
           </Button>
         </DialogTrigger>
         <DialogContent className="flex flex-col items-center justify-center gap-5">
@@ -61,14 +60,15 @@ const DeleteLivestream = ({ stream }: { stream: IExtendedStage }) => {
             <Button
               onClick={handleDeleteStage}
               loading={isDeleting}
-              variant="destructive">
+              variant="destructive"
+            >
               Delete
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
-}
+  );
+};
 
-export default DeleteLivestream
+export default DeleteLivestream;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx b/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx
index 25fbf1f6e..d2b4a31b5 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import DatePicker from '@/components/misc/form/datePicker'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import TimePicker from '@/components/misc/form/timePicker'
-import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
+import DatePicker from '@/components/misc/form/datePicker';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import TimePicker from '@/components/misc/form/timePicker';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -12,7 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
+} from '@/components/ui/dialog';
 import {
   Form,
   FormControl,
@@ -20,20 +20,20 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { updateStageAction } from '@/lib/actions/stages'
-import { StageSchema } from '@/lib/schema'
-import { IExtendedStage } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import { getFormSubmitStatus, getTimeString } from '@/lib/utils/utils'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { FilePenLine } from 'lucide-react'
-import React, { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { z } from 'zod'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { updateStageAction } from '@/lib/actions/stages';
+import { StageSchema } from '@/lib/schema';
+import { IExtendedStage } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import { getFormSubmitStatus, getTimeString } from '@/lib/utils/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FilePenLine } from 'lucide-react';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
 
 const EditLivestream = ({
   stage,
@@ -41,22 +41,14 @@ const EditLivestream = ({
   btnText = 'Edit',
   variant = 'ghost',
 }: {
-  stage: IExtendedStage
-  organizationSlug: string
-  btnText?: string
-  variant?:
-    | 'outline'
-    | 'ghost'
-    | 'primary'
-    | 'default'
-    | 'link'
-    | 'secondary'
+  stage: IExtendedStage;
+  organizationSlug: string;
+  btnText?: string;
+  variant?: 'outline' | 'ghost' | 'primary' | 'default' | 'link' | 'secondary';
 }) => {
-  const [open, setOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isMultiDate, setIsMultiDate] = useState(
-    stage?.isMultipleDate
-  )
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isMultiDate, setIsMultiDate] = useState(stage?.isMultipleDate);
   const form = useForm<z.infer<typeof StageSchema>>({
     resolver: zodResolver(StageSchema),
     defaultValues: {
@@ -65,23 +57,22 @@ const EditLivestream = ({
       streamDate: new Date(stage?.streamDate as string) || new Date(),
       thumbnail: stage?.thumbnail,
       streamTime: getTimeString(stage.streamDate) || '00:00',
-      streamEndDate:
-        new Date(stage?.streamEndDate as string) || new Date(),
+      streamEndDate: new Date(stage?.streamEndDate as string) || new Date(),
       streamEndTime: getTimeString(stage.streamEndDate) || '00:00',
       isMultipleDate: stage?.isMultipleDate || false,
     },
-  })
+  });
 
   const handleModalClose = () => {
-    setOpen(false)
-  }
+    setOpen(false);
+  };
 
   const dateInput = formatDate(
     new Date(`${form.getValues('streamDate')}`),
     'YYYY-MM-DD'
-  )
-  const timeInput = form.getValues('streamTime')
-  const formattedDate = new Date(`${dateInput}T${timeInput}`)
+  );
+  const timeInput = form.getValues('streamTime');
+  const formattedDate = new Date(`${dateInput}T${timeInput}`);
   const formattedEndDate = new Date(
     new Date(
       `${formatDate(
@@ -89,13 +80,13 @@ const EditLivestream = ({
         'YYYY-MM-DD'
       )}T${form.getValues('streamEndTime')}`
     )
-  )
-  const isPast = formattedDate < new Date()
-  const validateEndDate = formattedEndDate < formattedDate
+  );
+  const isPast = formattedDate < new Date();
+  const validateEndDate = formattedEndDate < formattedDate;
 
   function onSubmit(values: z.infer<typeof StageSchema>) {
-    setIsLoading(true)
-    const { streamTime, streamEndTime, ...otherValues } = values
+    setIsLoading(true);
+    const { streamTime, streamEndTime, ...otherValues } = values;
 
     updateStageAction({
       stage: {
@@ -107,15 +98,15 @@ const EditLivestream = ({
       },
     })
       .then(() => {
-        toast.success(`Stream updated`)
+        toast.success(`Stream updated`);
       })
       .catch(() => {
-        toast.error('Error updating stream')
+        toast.error('Error updating stream');
       })
       .finally(() => {
-        setIsLoading(false)
-        handleModalClose()
-      })
+        setIsLoading(false);
+        handleModalClose();
+      });
   }
   return (
     <Dialog open={open} onOpenChange={() => setOpen(!open)}>
@@ -173,7 +164,8 @@ const EditLivestream = ({
               {' '}
               <p
                 className="text-sm"
-                onClick={() => setIsMultiDate(!isMultiDate)}>
+                onClick={() => setIsMultiDate(!isMultiDate)}
+              >
                 Streaming multiple days?
               </p>{' '}
               <div className="mt-1 flex items-center gap-5">
@@ -186,10 +178,9 @@ const EditLivestream = ({
                 </div>
                 <div className="flex items-center gap-1">
                   <Checkbox
-                    onCheckedChange={() =>
-                      setIsMultiDate(!isMultiDate)
-                    }
-                    checked={!isMultiDate}></Checkbox>
+                    onCheckedChange={() => setIsMultiDate(!isMultiDate)}
+                    checked={!isMultiDate}
+                  ></Checkbox>
                   <Label>No</Label>
                 </div>
               </div>
@@ -231,8 +222,8 @@ const EditLivestream = ({
             </div>
             {isPast && (
               <p className="mt-1 text-[12px] text-destructive">
-                Couldn&apos;t schedule. The date and time selected are
-                too far in the past.
+                Couldn&apos;t schedule. The date and time selected are too far
+                in the past.
               </p>
             )}
 
@@ -244,9 +235,7 @@ const EditLivestream = ({
                     name="streamEndDate"
                     render={({ field }) => (
                       <FormItem className="w-full">
-                        <FormLabel required>
-                          Stream End Date
-                        </FormLabel>
+                        <FormLabel required>Stream End Date</FormLabel>
                         <FormControl>
                           <DatePicker
                             value={field.value as Date}
@@ -263,9 +252,7 @@ const EditLivestream = ({
                     name="streamEndTime"
                     render={({ field }) => (
                       <FormItem className="w-full">
-                        <FormLabel required>
-                          Stream End Time
-                        </FormLabel>
+                        <FormLabel required>Stream End Time</FormLabel>
                         <FormControl>
                           <TimePicker
                             value={field.value}
@@ -279,8 +266,8 @@ const EditLivestream = ({
                 </div>
                 {validateEndDate && (
                   <p className="mt-1 text-[12px] text-destructive">
-                    Couldn&apos;t schedule. End date and time selected
-                    are too far in the past.
+                    Couldn&apos;t schedule. End date and time selected are too
+                    far in the past.
                   </p>
                 )}
               </>
@@ -290,7 +277,8 @@ const EditLivestream = ({
               <Button
                 type="button"
                 onClick={handleModalClose}
-                variant="outline">
+                variant="outline"
+              >
                 Cancel
               </Button>
 
@@ -298,7 +286,8 @@ const EditLivestream = ({
                 loading={isLoading}
                 variant="outlinePrimary"
                 disabled={getFormSubmitStatus(form) || isLoading}
-                type="submit">
+                type="submit"
+              >
                 Update livestream
               </Button>
             </DialogFooter>
@@ -306,7 +295,7 @@ const EditLivestream = ({
         </Form>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default EditLivestream
+export default EditLivestream;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/LivestreamActions.tsx b/packages/app/app/studio/[organization]/livestreams/components/LivestreamActions.tsx
index ca9c950ac..7fb8d5c7e 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/LivestreamActions.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/LivestreamActions.tsx
@@ -1,31 +1,25 @@
-'use client'
-import { IExtendedStage } from '@/lib/types'
-import React from 'react'
-import ShareLivestream from './ShareLivestream'
-import DeleteLivestream from './DeleteLivestream'
-import EditLivestream from './EditLivestream'
+'use client';
+import { IExtendedStage } from '@/lib/types';
+import React from 'react';
+import ShareLivestream from './ShareLivestream';
+import DeleteLivestream from './DeleteLivestream';
+import EditLivestream from './EditLivestream';
 
 const LivestreamActions = ({
   stream,
   organizationSlug,
 }: {
-  stream: IExtendedStage
-  organizationSlug: string
+  stream: IExtendedStage;
+  organizationSlug: string;
 }) => {
   return (
     <div className="space-y-2">
-      <EditLivestream
-        organizationSlug={organizationSlug}
-        stage={stream}
-      />
+      <EditLivestream organizationSlug={organizationSlug} stage={stream} />
 
-      <ShareLivestream
-        organization={organizationSlug}
-        streamId={stream._id}
-      />
+      <ShareLivestream organization={organizationSlug} streamId={stream._id} />
       <DeleteLivestream stream={stream} />
     </div>
-  )
-}
+  );
+};
 
-export default LivestreamActions
+export default LivestreamActions;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/LivestreamTable.tsx b/packages/app/app/studio/[organization]/livestreams/components/LivestreamTable.tsx
index c72e973f4..cd81d1d6f 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/LivestreamTable.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/LivestreamTable.tsx
@@ -5,33 +5,33 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table'
-import { IExtendedOrganization, IExtendedStage } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import Link from 'next/link'
-import React from 'react'
-import ToggleLivestreamVisibility from './ToggleLivestreamVisibility'
-import TableSort from '@/components/misc/TableSort'
-import { EllipsisVertical } from 'lucide-react'
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import DefaultThumbnail from '@/lib/svg/DefaultThumbnail'
+} from '@/components/ui/table';
+import { IExtendedOrganization, IExtendedStage } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import Link from 'next/link';
+import React from 'react';
+import ToggleLivestreamVisibility from './ToggleLivestreamVisibility';
+import TableSort from '@/components/misc/TableSort';
+import { EllipsisVertical } from 'lucide-react';
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import DefaultThumbnail from '@/lib/svg/DefaultThumbnail';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
-import LivestreamActions from './LivestreamActions'
-import { Button } from '@/components/ui/button'
-import { ScissorsLineDashed } from 'lucide-react'
-import { CardDescription, CardTitle } from '@/components/ui/card'
-import EmptyFolder from '@/lib/svg/EmptyFolder'
+} from '@/components/ui/popover';
+import LivestreamActions from './LivestreamActions';
+import { Button } from '@/components/ui/button';
+import { ScissorsLineDashed } from 'lucide-react';
+import { CardDescription, CardTitle } from '@/components/ui/card';
+import EmptyFolder from '@/lib/svg/EmptyFolder';
 
 const LivestreamTable = ({
   streams,
   organizationSlug,
 }: {
-  streams: IExtendedStage[]
-  organizationSlug: string
+  streams: IExtendedStage[];
+  organizationSlug: string;
 }) => {
   if (streams.length === 0) {
     return (
@@ -44,7 +44,7 @@ const LivestreamTable = ({
           Create your first livestream to get started!
         </CardDescription>
       </div>
-    )
+    );
   }
   return (
     <div className="mb-10 h-[95%] w-full rounded-xl border bg-white p-1">
@@ -81,7 +81,8 @@ const LivestreamTable = ({
 
                   <Link
                     key={stream._id}
-                    href={`/studio/${organizationSlug}/livestreams/${stream?._id}`}>
+                    href={`/studio/${organizationSlug}/livestreams/${stream?._id}`}
+                  >
                     <p className="line-clamp-3 hover:underline">
                       {stream?.name}
                     </p>
@@ -121,14 +122,17 @@ const LivestreamTable = ({
               <TableCell className="my-2 flex items-center space-x-2">
                 <Link
                   key={stream._id}
-                  href={`/studio/${organizationSlug}/livestreams/${stream?._id}`}>
+                  href={`/studio/${organizationSlug}/livestreams/${stream?._id}`}
+                >
                   <Button variant="outlinePrimary">Manage</Button>
                 </Link>
                 <Link
-                  href={`/studio/${organizationSlug}/clips?stage=${stream._id}`}>
+                  href={`/studio/${organizationSlug}/clips?stage=${stream._id}`}
+                >
                   <Button
                     variant="primary"
-                    className="flex w-full items-center gap-1">
+                    className="flex w-full items-center gap-1"
+                  >
                     <ScissorsLineDashed className="h-4 w-4" />
                     Clip
                   </Button>
@@ -150,7 +154,7 @@ const LivestreamTable = ({
         </TableBody>
       </Table>
     </div>
-  )
-}
+  );
+};
 
-export default LivestreamTable
+export default LivestreamTable;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/ShareLivestream.tsx b/packages/app/app/studio/[organization]/livestreams/components/ShareLivestream.tsx
index 2660f1366..087b1ff54 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/ShareLivestream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/ShareLivestream.tsx
@@ -1,23 +1,23 @@
-'use client'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import React, { useEffect, useState } from 'react'
+'use client';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import React, { useEffect, useState } from 'react';
 
 const ShareLivestream = ({
   streamId,
   variant = 'ghost',
   organization,
 }: {
-  organization: string
-  variant?: 'outline' | 'ghost' | 'primary' | 'default'
-  streamId?: string
+  organization: string;
+  variant?: 'outline' | 'ghost' | 'primary' | 'default';
+  streamId?: string;
 }) => {
-  const [url, setUrl] = useState('')
+  const [url, setUrl] = useState('');
   useEffect(() => {
     // This code will only run on the client side
-    if (typeof window === 'undefined') return
+    if (typeof window === 'undefined') return;
 
-    setUrl(window.location.origin)
-  }, [])
+    setUrl(window.location.origin);
+  }, []);
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <ShareButton
@@ -27,7 +27,7 @@ const ShareLivestream = ({
         shareFor="livestream"
       />
     </div>
-  )
-}
+  );
+};
 
-export default ShareLivestream
+export default ShareLivestream;
diff --git a/packages/app/app/studio/[organization]/livestreams/components/ToggleLivestreamVisibility.tsx b/packages/app/app/studio/[organization]/livestreams/components/ToggleLivestreamVisibility.tsx
index 9d6ffd35a..a8e6a6f5e 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/ToggleLivestreamVisibility.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/ToggleLivestreamVisibility.tsx
@@ -1,40 +1,36 @@
-'use client'
+'use client';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { updateStageAction } from '@/lib/actions/stages'
-import { IExtendedStage } from '@/lib/types'
-import { ChevronDown, Earth, Loader2, Lock } from 'lucide-react'
-import React, { useState } from 'react'
-import { toast } from 'sonner'
+} from '@/components/ui/dropdown-menu';
+import { updateStageAction } from '@/lib/actions/stages';
+import { IExtendedStage } from '@/lib/types';
+import { ChevronDown, Earth, Loader2, Lock } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
 
-const ToggleLivestreamVisibility = ({
-  item,
-}: {
-  item: IExtendedStage
-}) => {
-  const [isLoading, setIsLoading] = useState(false)
+const ToggleLivestreamVisibility = ({ item }: { item: IExtendedStage }) => {
+  const [isLoading, setIsLoading] = useState(false);
   const handleToggleVisibility = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     updateStageAction({
       stage: { ...item, published: !item.published },
     })
       .then((response) => {
         if (response) {
-          setIsLoading(false)
-          toast.success('Stream updated')
+          setIsLoading(false);
+          toast.success('Stream updated');
         } else {
-          toast.error('Error updating stream')
+          toast.error('Error updating stream');
         }
       })
       .catch(() => {
-        toast.error('Error updating stream')
-        setIsLoading(false)
-      })
-  }
+        toast.error('Error updating stream');
+        setIsLoading(false);
+      });
+  };
   return (
     <div className="flex items-center justify-start space-x-2">
       {isLoading ? (
@@ -59,7 +55,8 @@ const ToggleLivestreamVisibility = ({
             className={`cursor-pointer space-x-2 ${
               isLoading ? 'pointer-events-none' : ''
             }`}
-            onClick={handleToggleVisibility}>
+            onClick={handleToggleVisibility}
+          >
             {!item.published ? (
               <>
                 <Earth size={16} />
@@ -75,7 +72,7 @@ const ToggleLivestreamVisibility = ({
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
-  )
-}
+  );
+};
 
-export default ToggleLivestreamVisibility
+export default ToggleLivestreamVisibility;
diff --git a/packages/app/app/studio/[organization]/livestreams/page.tsx b/packages/app/app/studio/[organization]/livestreams/page.tsx
index f1b729a22..766160e53 100644
--- a/packages/app/app/studio/[organization]/livestreams/page.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/page.tsx
@@ -1,4 +1,4 @@
-'use server'
+'use server';
 
 import {
   Card,
@@ -6,24 +6,24 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
-import React, { Suspense } from 'react'
-import CreateLivestreamModal from './components/CreateLivestreamModal'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { IExtendedStage, LivestreamPageParams } from '@/lib/types'
-import { fetchOrganizationStages } from '@/lib/services/stageService'
-import LivestreamTable from './components/LivestreamTable'
-import { sortArray } from '@/lib/utils/utils'
-import EmptyFolder from '@/lib/svg/EmptyFolder'
-import TableSkeleton from '@/components/misc/Table/TableSkeleton'
+} from '@/components/ui/card';
+import React, { Suspense } from 'react';
+import CreateLivestreamModal from './components/CreateLivestreamModal';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { IExtendedStage, LivestreamPageParams } from '@/lib/types';
+import { fetchOrganizationStages } from '@/lib/services/stageService';
+import LivestreamTable from './components/LivestreamTable';
+import { sortArray } from '@/lib/utils/utils';
+import EmptyFolder from '@/lib/svg/EmptyFolder';
+import TableSkeleton from '@/components/misc/Table/TableSkeleton';
 
 export const Loading = () => {
   return (
     <div className="flex h-full flex-col bg-white">
       <TableSkeleton />
     </div>
-  )
-}
+  );
+};
 
 export const Livestreams = async ({
   params,
@@ -31,16 +31,16 @@ export const Livestreams = async ({
 }: LivestreamPageParams) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
-  if (!organization) return null
+  if (!organization) return null;
 
   const stages = sortArray(
     await fetchOrganizationStages({
       organizationId: organization._id,
     }),
     searchParams.sort
-  )
+  );
 
   return (
     <div className="flex h-full flex-col rounded-xl border bg-white">
@@ -48,7 +48,8 @@ export const Livestreams = async ({
         style={{
           backgroundImage: `url(/backgrounds/livestreamBg.png)`,
         }}
-        className="rounded-none border-none bg-cover bg-no-repeat p-4 shadow-none">
+        className="rounded-none border-none bg-cover bg-no-repeat p-4 shadow-none"
+      >
         <CardHeader>
           <CardTitle>Livestreams</CardTitle>
           <CardDescription className="max-w-[500px]">
@@ -85,18 +86,15 @@ export const Livestreams = async ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-const LivestreamsPage = ({
-  params,
-  searchParams,
-}: LivestreamPageParams) => {
+const LivestreamsPage = ({ params, searchParams }: LivestreamPageParams) => {
   return (
     <Suspense key={searchParams.toString()} fallback={<Loading />}>
       <Livestreams params={params} searchParams={searchParams} />
     </Suspense>
-  )
-}
+  );
+};
 
-export default LivestreamsPage
+export default LivestreamsPage;
diff --git a/packages/app/app/studio/[organization]/nfts/[nftId]/components/ContractDetails.tsx b/packages/app/app/studio/[organization]/nfts/[nftId]/components/ContractDetails.tsx
index a7f5a720a..702972888 100644
--- a/packages/app/app/studio/[organization]/nfts/[nftId]/components/ContractDetails.tsx
+++ b/packages/app/app/studio/[organization]/nfts/[nftId]/components/ContractDetails.tsx
@@ -1,23 +1,19 @@
-'use client'
-import React from 'react'
-import { VideoNFTAbi, contractChainID } from '@/lib/contract'
-import { useAccount, useChainId, useReadContracts } from 'wagmi'
-import { type BaseError } from 'wagmi'
-import TitleTextItem from '@/components/ui/TitleTextItem'
-import CopyText from '@/components/misc/CopyText'
+'use client';
+import React from 'react';
+import { VideoNFTAbi, contractChainID } from '@/lib/contract';
+import { useAccount, useChainId, useReadContracts } from 'wagmi';
+import { type BaseError } from 'wagmi';
+import TitleTextItem from '@/components/ui/TitleTextItem';
+import CopyText from '@/components/misc/CopyText';
 
-const ContractDetails = ({
-  contractAddress,
-}: {
-  contractAddress?: string
-}) => {
-  const account = useAccount()
-  const chain = useChainId()
+const ContractDetails = ({ contractAddress }: { contractAddress?: string }) => {
+  const account = useAccount();
+  const chain = useChainId();
   const videoNFTContract = {
     address: contractAddress as `0x${string}`,
     abi: VideoNFTAbi,
     chainId: contractChainID,
-  } as const
+  } as const;
 
   const result = useReadContracts({
     contracts: [
@@ -34,27 +30,20 @@ const ContractDetails = ({
         functionName: 'baseTokenUri',
       },
     ],
-  })
+  });
 
-  const mintFee = result?.data?.[0].result
-  const totalSupply = result?.data?.[1].result
-  const baseTokenUri = result?.data?.[2].result as string
+  const mintFee = result?.data?.[0].result;
+  const totalSupply = result?.data?.[1].result;
+  const baseTokenUri = result?.data?.[2].result as string;
 
   return (
     <div className="space-y-1">
-      <TitleTextItem
-        title="Total Supply:"
-        text={Number(totalSupply)}
-      />
+      <TitleTextItem title="Total Supply:" text={Number(totalSupply)} />
       <TitleTextItem title="Mint Fee:" text={Number(mintFee)} />
 
-      <CopyText
-        width="400px"
-        label="baseTokenUri:"
-        text={baseTokenUri}
-      />
+      <CopyText width="400px" label="baseTokenUri:" text={baseTokenUri} />
     </div>
-  )
-}
+  );
+};
 
-export default ContractDetails
+export default ContractDetails;
diff --git a/packages/app/app/studio/[organization]/nfts/[nftId]/page.tsx b/packages/app/app/studio/[organization]/nfts/[nftId]/page.tsx
index bb1a0a458..d8473fd06 100644
--- a/packages/app/app/studio/[organization]/nfts/[nftId]/page.tsx
+++ b/packages/app/app/studio/[organization]/nfts/[nftId]/page.tsx
@@ -1,20 +1,20 @@
-import { fetchNFTCollection } from '@/lib/services/nftCollectionService'
-import { nftPageParams } from '@/lib/types'
-import { LuArrowLeft } from 'react-icons/lu'
-import Link from 'next/link'
-import { notFound } from 'next/navigation'
-import React from 'react'
-import ContractDetails from './components/ContractDetails'
-import CopyText from '@/components/misc/CopyText'
-import TitleTextItem from '@/components/ui/TitleTextItem'
+import { fetchNFTCollection } from '@/lib/services/nftCollectionService';
+import { nftPageParams } from '@/lib/types';
+import { LuArrowLeft } from 'react-icons/lu';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import React from 'react';
+import ContractDetails from './components/ContractDetails';
+import CopyText from '@/components/misc/CopyText';
+import TitleTextItem from '@/components/ui/TitleTextItem';
 
 const page = async ({ params }: nftPageParams) => {
-  if (!params.nftId) return notFound()
+  if (!params.nftId) return notFound();
 
   const collection = await fetchNFTCollection({
     collectionId: params.nftId,
-  })
-  if (!collection) return notFound()
+  });
+  if (!collection) return notFound();
 
   return (
     <div className="mx-6 h-full p-2">
@@ -35,17 +35,12 @@ const page = async ({ params }: nftPageParams) => {
         />
 
         <TitleTextItem title="Type:" text={collection.type} />
-        <TitleTextItem
-          title="Total Items:"
-          text={collection.videos?.length}
-        />
+        <TitleTextItem title="Total Items:" text={collection.videos?.length} />
 
-        <ContractDetails
-          contractAddress={collection.contractAddress}
-        />
+        <ContractDetails contractAddress={collection.contractAddress} />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default page
+export default page;
diff --git a/packages/app/app/studio/[organization]/nfts/components/CreateNFTCollectionModal.tsx b/packages/app/app/studio/[organization]/nfts/components/CreateNFTCollectionModal.tsx
index d4a3bc52b..a5c95fd97 100644
--- a/packages/app/app/studio/[organization]/nfts/components/CreateNFTCollectionModal.tsx
+++ b/packages/app/app/studio/[organization]/nfts/components/CreateNFTCollectionModal.tsx
@@ -1,19 +1,19 @@
-'use client'
-import { Button } from '@/components/ui/button'
+'use client';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { CheckCircle2 } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import React from 'react'
+} from '@/components/ui/dialog';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { CheckCircle2 } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
 
 const CreateNFTCollectionModal = ({ type }: { type: string }) => {
-  const { handleTermChange } = useSearchParams()
+  const { handleTermChange } = useSearchParams();
 
   return (
     <Dialog>
@@ -27,12 +27,11 @@ const CreateNFTCollectionModal = ({ type }: { type: string }) => {
 
         <div className="flex items-center gap-5">
           <div
-            onClick={() =>
-              handleTermChange([{ key: 'type', value: 'single' }])
-            }
+            onClick={() => handleTermChange([{ key: 'type', value: 'single' }])}
             className={`relative flex cursor-pointer flex-col rounded-xl border border-grey p-3 hover:bg-secondary ${
               type == 'single' ? 'bg-secondary' : 'bg-none'
-            }`}>
+            }`}
+          >
             {type == 'single' && (
               <div className="absolute end-0 px-2">
                 <CheckCircle2 className="h-10 w-10 fill-success text-white" />
@@ -49,8 +48,8 @@ const CreateNFTCollectionModal = ({ type }: { type: string }) => {
             </div>
             <p className="font-medium">Single NFT</p>
             <p className="text-sm text-muted-foreground">
-              Select single drop if you want to deploy one particular
-              media into an NFT
+              Select single drop if you want to deploy one particular media into
+              an NFT
             </p>
           </div>
 
@@ -60,7 +59,8 @@ const CreateNFTCollectionModal = ({ type }: { type: string }) => {
             }
             className={`relative flex cursor-pointer flex-col rounded-xl border border-grey p-3 hover:bg-secondary ${
               type == 'multiple' ? 'bg-secondary' : 'bg-none'
-            }`}>
+            }`}
+          >
             {type == 'multiple' && (
               <div className="absolute end-0 px-2">
                 <CheckCircle2 className="h-10 w-10 fill-success text-white" />
@@ -77,8 +77,8 @@ const CreateNFTCollectionModal = ({ type }: { type: string }) => {
             </div>
             <p className="font-medium">NFT Collection</p>
             <p className="text-sm text-muted-foreground">
-              Select drop collection if you want to deploy multiple
-              media into an NFT collection
+              Select drop collection if you want to deploy multiple media into
+              an NFT collection
             </p>
           </div>
         </div>
@@ -88,14 +88,15 @@ const CreateNFTCollectionModal = ({ type }: { type: string }) => {
             <Button
               disabled={!type}
               className="w-full"
-              variant="outlinePrimary">
+              variant="outlinePrimary"
+            >
               Create NFT
             </Button>
           </Link>
         </div>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default CreateNFTCollectionModal
+export default CreateNFTCollectionModal;
diff --git a/packages/app/app/studio/[organization]/nfts/components/MintNftSort.tsx b/packages/app/app/studio/[organization]/nfts/components/MintNftSort.tsx
index 24883640a..8cce75f9b 100644
--- a/packages/app/app/studio/[organization]/nfts/components/MintNftSort.tsx
+++ b/packages/app/app/studio/[organization]/nfts/components/MintNftSort.tsx
@@ -1,22 +1,22 @@
-'use client'
+'use client';
 
-import Combobox from '@/components/ui/combo-box'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { eSort } from '@/lib/types'
+import Combobox from '@/components/ui/combo-box';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { eSort } from '@/lib/types';
 
-import React from 'react'
+import React from 'react';
 
 const sortOptions = [
   { value: 'desc_alpha', label: 'name' },
   { value: 'desc_date', label: 'recent' },
-]
+];
 
 const MintNftSort = () => {
-  const { searchParams, handleTermChange } = useSearchParams()
-  const currentSort = searchParams.get('sort') as eSort
+  const { searchParams, handleTermChange } = useSearchParams();
+  const currentSort = searchParams.get('sort') as eSort;
   const selectedSort = sortOptions?.find(
     (s) => s?.value === currentSort
-  )?.label
+  )?.label;
   return (
     <div className="flex items-center gap-2 font-medium">
       <p className="w-full">Sort By</p>
@@ -26,11 +26,11 @@ const MintNftSort = () => {
         variant="ghost"
         value={selectedSort || 'name'}
         setValue={(value) => {
-          handleTermChange([{ key: 'sort', value: value }])
+          handleTermChange([{ key: 'sort', value: value }]);
         }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default MintNftSort
+export default MintNftSort;
diff --git a/packages/app/app/studio/[organization]/nfts/components/NFTCollectionCard.tsx b/packages/app/app/studio/[organization]/nfts/components/NFTCollectionCard.tsx
index 8976bc268..49276430a 100644
--- a/packages/app/app/studio/[organization]/nfts/components/NFTCollectionCard.tsx
+++ b/packages/app/app/studio/[organization]/nfts/components/NFTCollectionCard.tsx
@@ -1,41 +1,37 @@
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { IExtendedNftCollections } from '@/lib/types'
-import { EllipsisVertical } from 'lucide-react'
-import React from 'react'
-import ShareVideoNFT from '../create/components/ShareVideoNFT'
-import Link from 'next/link'
+} from '@/components/ui/dropdown-menu';
+import { IExtendedNftCollections } from '@/lib/types';
+import { EllipsisVertical } from 'lucide-react';
+import React from 'react';
+import ShareVideoNFT from '../create/components/ShareVideoNFT';
+import Link from 'next/link';
 
 const NFTCollectionCard = ({
   nft,
   organization,
 }: {
-  nft: IExtendedNftCollections
-  organization: string
+  nft: IExtendedNftCollections;
+  organization: string;
 }) => {
   return (
     <Link
       href={`/studio/${organization}/nfts/${nft._id}`}
-      className="cursor-pointer rounded-xl border border-grey bg-secondary p-2">
+      className="cursor-pointer rounded-xl border border-grey bg-secondary p-2"
+    >
       <Thumbnail imageUrl={nft.thumbnail} />
 
       <div className="flex items-start justify-between">
-        <div
-          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}>
+        <div className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}>
           <p className={`line-clamp-1 font-medium`}>{nft.name}</p>
 
           <p className="text-sm text-muted-foreground">
             {nft?.videos?.length} item
-            {nft?.videos?.length
-              ? nft?.videos?.length < 1
-                ? ''
-                : 's'
-              : ''}
+            {nft?.videos?.length ? (nft?.videos?.length < 1 ? '' : 's') : ''}
           </p>
         </div>
 
@@ -54,7 +50,7 @@ const NFTCollectionCard = ({
         </DropdownMenu>
       </div>
     </Link>
-  )
-}
+  );
+};
 
-export default NFTCollectionCard
+export default NFTCollectionCard;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/AddMedia.tsx b/packages/app/app/studio/[organization]/nfts/create/components/AddMedia.tsx
index e1297baf1..5dfadcb8a 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/AddMedia.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/AddMedia.tsx
@@ -1,20 +1,20 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { CardTitle } from '@/components/ui/card'
+'use client';
+import { Button } from '@/components/ui/button';
+import { CardTitle } from '@/components/ui/card';
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { IExtendedSession, INFTSessions } from '@/lib/types'
-import { PlusCircle } from 'lucide-react'
-import React, { useState } from 'react'
-import AddMediaTabItem from './AddMediaTabItem'
-import SelectedMediaItem from './SelectedMediaItem'
-import { ICreateNFT } from './CreateNFTForm'
+} from '@/components/ui/dialog';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { IExtendedSession, INFTSessions } from '@/lib/types';
+import { PlusCircle } from 'lucide-react';
+import React, { useState } from 'react';
+import AddMediaTabItem from './AddMediaTabItem';
+import SelectedMediaItem from './SelectedMediaItem';
+import { ICreateNFT } from './CreateNFTForm';
 
 const AddMedia = ({
   videos,
@@ -23,30 +23,28 @@ const AddMedia = ({
   formState,
   type,
 }: {
-  stages: INFTSessions[]
-  formState: ICreateNFT
-  setFormState: React.Dispatch<React.SetStateAction<ICreateNFT>>
-  videos: INFTSessions[]
-  type: string
+  stages: INFTSessions[];
+  formState: ICreateNFT;
+  setFormState: React.Dispatch<React.SetStateAction<ICreateNFT>>;
+  videos: INFTSessions[];
+  type: string;
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
-  const filteredVideos = videos?.filter((v) => v.type !== 'clip')
-  const clips = videos?.filter((v) => v.type === 'clip')
+  const filteredVideos = videos?.filter((v) => v.type !== 'clip');
+  const clips = videos?.filter((v) => v.type === 'clip');
   const handleRemoveSelected = (itemToRemove: IExtendedSession) => {
     setFormState((prevState) => ({
       ...prevState,
       selectedVideo: prevState.selectedVideo.filter(
         (video) => video !== itemToRemove
       ),
-    }))
-  }
+    }));
+  };
 
   return (
     <div>
-      <CardTitle className="mb-4 text-2xl font-semibold">
-        Add Media
-      </CardTitle>
+      <CardTitle className="mb-4 text-2xl font-semibold">Add Media</CardTitle>
 
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogTrigger className="w-full">
@@ -62,9 +60,7 @@ const AddMedia = ({
           <div className="">
             <Tabs defaultValue={'videos'}>
               <TabsList className="w-full !justify-start gap-5 border-y border-grey">
-                <TabsTrigger value="livestreams">
-                  Livestreams
-                </TabsTrigger>
+                <TabsTrigger value="livestreams">Livestreams</TabsTrigger>
                 <TabsTrigger value="videos">Videos</TabsTrigger>
                 <TabsTrigger value="clips">Clips</TabsTrigger>
               </TabsList>
@@ -94,16 +90,15 @@ const AddMedia = ({
           <DialogFooter>
             <Button
               onClick={() => {
-                setFormState({ ...formState, selectedVideo: [] })
-                setIsOpen(false)
+                setFormState({ ...formState, selectedVideo: [] });
+                setIsOpen(false);
               }}
               className="border-none shadow-none"
-              variant="destructive-outline">
+              variant="destructive-outline"
+            >
               Cancel
             </Button>
-            <Button
-              onClick={() => setIsOpen(false)}
-              variant="outlinePrimary">
+            <Button onClick={() => setIsOpen(false)} variant="outlinePrimary">
               Continue
             </Button>
           </DialogFooter>
@@ -120,7 +115,7 @@ const AddMedia = ({
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default AddMedia
+export default AddMedia;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/AddMediaTabItem.tsx b/packages/app/app/studio/[organization]/nfts/create/components/AddMediaTabItem.tsx
index 7ae253779..be39d8845 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/AddMediaTabItem.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/AddMediaTabItem.tsx
@@ -1,10 +1,10 @@
-import { Checkbox } from '@/components/ui/checkbox'
-import { TabsContent } from '@/components/ui/tabs'
-import { INFTSessions } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import Image from 'next/image'
-import React from 'react'
-import { ICreateNFT } from './CreateNFTForm'
+import { Checkbox } from '@/components/ui/checkbox';
+import { TabsContent } from '@/components/ui/tabs';
+import { INFTSessions } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import Image from 'next/image';
+import React from 'react';
+import { ICreateNFT } from './CreateNFTForm';
 
 const AddMediaTabItem = ({
   tabValue,
@@ -13,30 +13,24 @@ const AddMediaTabItem = ({
   setFormState,
   type,
 }: {
-  setFormState: React.Dispatch<React.SetStateAction<ICreateNFT>>
-  formState: ICreateNFT
-  tabValue: string
-  videos: INFTSessions[]
-  type: string
+  setFormState: React.Dispatch<React.SetStateAction<ICreateNFT>>;
+  formState: ICreateNFT;
+  tabValue: string;
+  videos: INFTSessions[];
+  type: string;
 }) => {
   const parsedVideos = videos.map((video) => ({
     ...video,
     videoType: tabValue,
-  }))
+  }));
 
   return (
-    <TabsContent
-      className="max-h-[450px] overflow-auto"
-      value={tabValue}>
+    <TabsContent className="max-h-[450px] overflow-auto" value={tabValue}>
       {parsedVideos.length === 0 && (
-        <div className="mt-12 text-muted-foreground">
-          No {tabValue} found.
-        </div>
+        <div className="mt-12 text-muted-foreground">No {tabValue} found.</div>
       )}
       {parsedVideos.map((video) => (
-        <div
-          className="mb-4 mt-8 flex items-center gap-3"
-          key={video._id}>
+        <div className="mb-4 mt-8 flex items-center gap-3" key={video._id}>
           <div>
             <Checkbox
               checked={formState?.selectedVideo?.some(
@@ -51,7 +45,7 @@ const AddMediaTabItem = ({
                     )
                       ? []
                       : [video],
-                  }))
+                  }));
                 } else {
                   setFormState((prevState) => ({
                     ...prevState,
@@ -62,7 +56,7 @@ const AddMediaTabItem = ({
                           (v) => v._id !== video._id
                         )
                       : [...prevState.selectedVideo, video],
-                  }))
+                  }));
                 }
               }}
             />
@@ -88,16 +82,13 @@ const AddMediaTabItem = ({
             </p>
             <p className="text-sm">
               {' '}
-              {formatDate(
-                new Date(video.createdAt as string),
-                'MMM. D, YYYY'
-              )}
+              {formatDate(new Date(video.createdAt as string), 'MMM. D, YYYY')}
             </p>
           </div>
         </div>
       ))}
     </TabsContent>
-  )
-}
+  );
+};
 
-export default AddMediaTabItem
+export default AddMediaTabItem;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/CollectionDetails.tsx b/packages/app/app/studio/[organization]/nfts/create/components/CollectionDetails.tsx
index 272be478c..ff4e6423b 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/CollectionDetails.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/CollectionDetails.tsx
@@ -1,9 +1,9 @@
-'use client'
-import DatePicker from '@/components/misc/form/datePicker'
-import ImageUpload from '@/components/misc/form/imageUpload'
-import TimePicker from '@/components/misc/form/timePicker'
-import { CardTitle } from '@/components/ui/card'
-import Combobox from '@/components/ui/combo-box'
+'use client';
+import DatePicker from '@/components/misc/form/datePicker';
+import ImageUpload from '@/components/misc/form/imageUpload';
+import TimePicker from '@/components/misc/form/timePicker';
+import { CardTitle } from '@/components/ui/card';
+import Combobox from '@/components/ui/combo-box';
 import {
   Form,
   FormControl,
@@ -11,32 +11,32 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 
-import React from 'react'
-import { UseFormReturn } from 'react-hook-form'
-import { NftCollectionType } from 'streameth-new-server/src/interfaces/nft.collection.interface'
+import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { NftCollectionType } from 'streameth-new-server/src/interfaces/nft.collection.interface';
 
 const CollectionDetails = ({
   form,
   type,
 }: {
-  type: NftCollectionType
+  type: NftCollectionType;
   form: UseFormReturn<{
-    description: string
-    name: string
-    symbol: string
-    mintFee: string
-    thumbnail: string
+    description: string;
+    name: string;
+    symbol: string;
+    mintFee: string;
+    thumbnail: string;
     // startDate: Date
     // startTime: string
     // endDate: Date
     // endTime: string
-    limitedSupply: string
-    maxSupply: string
-  }>
+    limitedSupply: string;
+    maxSupply: string;
+  }>;
 }) => {
   return (
     <div>
@@ -75,9 +75,8 @@ const CollectionDetails = ({
                 Drag or click to upload your logo image here.{' '}
               </p>
               <p className="text-[12px] text-muted-foreground">
-                You may change this after deploying your contract.
-                Recommended size: 500 x 500. File types: JPG, PNG, SVG
-                or GIF
+                You may change this after deploying your contract. Recommended
+                size: 500 x 500. File types: JPG, PNG, SVG or GIF
               </p>
             </div>
           </div>
@@ -90,10 +89,7 @@ const CollectionDetails = ({
                   Name
                 </FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="NFT Collection Name"
-                    {...field}
-                  />
+                  <Input placeholder="NFT Collection Name" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -268,7 +264,7 @@ const CollectionDetails = ({
         </form>
       </Form>
     </div>
-  )
-}
+  );
+};
 
-export default CollectionDetails
+export default CollectionDetails;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTForm.tsx b/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTForm.tsx
index 5fcbf2dc4..c7bc2987d 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTForm.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTForm.tsx
@@ -1,22 +1,22 @@
-'use client'
-import CollectionDetails from './CollectionDetails'
-import { Button } from '@/components/ui/button'
-import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { CheckCircle2 } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { nftSchema } from '@/lib/schema'
-import AddMedia from './AddMedia'
-import { INFTSessions } from '@/lib/types'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
+'use client';
+import CollectionDetails from './CollectionDetails';
+import { Button } from '@/components/ui/button';
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { CheckCircle2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { nftSchema } from '@/lib/schema';
+import AddMedia from './AddMedia';
+import { INFTSessions } from '@/lib/types';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
 import {
   createNFTCollectionAction,
   generateNFTCollectionMetadataAction,
-} from '@/lib/actions/nftCollection'
-import PublishingNFTModal from './PublishingNFTModal'
-import { toast } from 'sonner'
+} from '@/lib/actions/nftCollection';
+import PublishingNFTModal from './PublishingNFTModal';
+import { toast } from 'sonner';
 import {
   type BaseError,
   useWaitForTransactionReceipt,
@@ -25,27 +25,23 @@ import {
   useTransactionReceipt,
   useChainId,
   useSwitchChain,
-} from 'wagmi'
+} from 'wagmi';
 
 import {
   VideoFactoryAbi,
   VideoFactoryAddress,
   contractChainID,
-} from '@/lib/contract'
-import { ethers } from 'ethers'
+} from '@/lib/contract';
+import { ethers } from 'ethers';
 import {
   INftCollection,
   NftCollectionType,
-} from 'streameth-new-server/src/interfaces/nft.collection.interface'
-import { ConnectWalletButton } from '@/components/misc/ConnectWalletButton'
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from '@/components/ui/dialog'
+} from 'streameth-new-server/src/interfaces/nft.collection.interface';
+import { ConnectWalletButton } from '@/components/misc/ConnectWalletButton';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 
 export interface ICreateNFT {
-  selectedVideo: INFTSessions[]
+  selectedVideo: INFTSessions[];
 }
 
 const CreateNFTForm = ({
@@ -55,28 +51,23 @@ const CreateNFTForm = ({
   stages,
   type,
 }: {
-  stages: INFTSessions[]
-  organizationId: string
-  organizationSlug: string
-  videos: INFTSessions[]
-  type: NftCollectionType
+  stages: INFTSessions[];
+  organizationId: string;
+  organizationSlug: string;
+  videos: INFTSessions[];
+  type: NftCollectionType;
 }) => {
-  const account = useAccount()
-  const chain = useChainId()
-  const { switchChain, switchChainAsync } = useSwitchChain()
+  const account = useAccount();
+  const chain = useChainId();
+  const { switchChain, switchChainAsync } = useSwitchChain();
 
-  const [step, setStep] = useState(1)
-  const [isPublishingCollection, setIsPublishingCollection] =
-    useState(false)
-  const [isGeneratingMetadata, setIsGeneratingMetadata] =
-    useState(false)
-  const [isPublished, setIsPublished] = useState(false)
-  const [publishError, setPublishError] = useState('')
-  const [isTransactionApproved, setIsTransactionApproved] =
-    useState(false)
-  const [collectionId, setCollectionId] = useState<
-    string | undefined
-  >('')
+  const [step, setStep] = useState(1);
+  const [isPublishingCollection, setIsPublishingCollection] = useState(false);
+  const [isGeneratingMetadata, setIsGeneratingMetadata] = useState(false);
+  const [isPublished, setIsPublished] = useState(false);
+  const [publishError, setPublishError] = useState('');
+  const [isTransactionApproved, setIsTransactionApproved] = useState(false);
+  const [collectionId, setCollectionId] = useState<string | undefined>('');
   const form = useForm<z.infer<typeof nftSchema>>({
     resolver: zodResolver(nftSchema),
     defaultValues: {
@@ -88,32 +79,28 @@ const CreateNFTForm = ({
       maxSupply: '10000',
       limitedSupply: 'false',
     },
-  })
+  });
   const [formState, setFormState] = useState<ICreateNFT>({
     selectedVideo: [],
-  })
-  const [formResponseData, setFormResponseData] =
-    useState<INftCollection>()
+  });
+  const [formResponseData, setFormResponseData] = useState<INftCollection>();
 
-  const { data: hash, writeContract, error } = useWriteContract()
+  const { data: hash, writeContract, error } = useWriteContract();
 
   const { isSuccess } = useWaitForTransactionReceipt({
     confirmations: 1,
     hash,
-  })
+  });
 
   useEffect(() => {
-    if (chain !== contractChainID)
-      switchChain({ chainId: contractChainID })
+    if (chain !== contractChainID) switchChain({ chainId: contractChainID });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chain])
+  }, [chain]);
 
   const parseMintFee = ethers.parseUnits(
-    form.getValues('mintFee')
-      ? (form.getValues('mintFee') as string)
-      : '0',
+    form.getValues('mintFee') ? (form.getValues('mintFee') as string) : '0',
     'ether'
-  )
+  );
   // Update collection with address
   const createCollection = async (address: string) => {
     await createNFTCollectionAction({
@@ -125,39 +112,39 @@ const CreateNFTForm = ({
     })
       .then((response) => {
         if (response) {
-          setIsPublished(true)
-          form.reset()
-          setFormState({ selectedVideo: [] })
-          setStep(1)
-          setCollectionId(response?._id?.toString())
-          toast.success('NFT Collection successfully created')
+          setIsPublished(true);
+          form.reset();
+          setFormState({ selectedVideo: [] });
+          setStep(1);
+          setCollectionId(response?._id?.toString());
+          toast.success('NFT Collection successfully created');
         } else {
-          setIsPublished(false)
-          setPublishError('Error creating NFT Collection')
-          toast.error('Error creating NFT Collection')
+          setIsPublished(false);
+          setPublishError('Error creating NFT Collection');
+          toast.error('Error creating NFT Collection');
         }
       })
       .catch(() => {
-        toast.error('Error creating NFT Collection')
-        setPublishError('Error creating collection')
-      })
-  }
+        toast.error('Error creating NFT Collection');
+        setPublishError('Error creating collection');
+      });
+  };
   const result = useTransactionReceipt({
     hash,
-  })
+  });
 
   useEffect(() => {
     if (result?.data?.logs[0]?.address) {
-      createCollection(result?.data?.logs[0]?.address)
+      createCollection(result?.data?.logs[0]?.address);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [result?.data?.logs])
+  }, [result?.data?.logs]);
 
   useEffect(() => {
     if (hash) {
-      setIsTransactionApproved(true)
+      setIsTransactionApproved(true);
     }
-  }, [hash])
+  }, [hash]);
 
   const createCollectionContract = (ipfsPath?: string) => {
     writeContract({
@@ -174,8 +161,8 @@ const CreateNFTForm = ({
         0,
         0,
       ],
-    })
-  }
+    });
+  };
 
   const handleWriteContract = async () => {
     const formData: INftCollection = {
@@ -185,60 +172,58 @@ const CreateNFTForm = ({
       type: type,
       organizationId: organizationId,
       videos: formState.selectedVideo.map((video) => ({
-        type:
-          video.videoType === 'livestreams' ? 'livestream' : 'video',
+        type: video.videoType === 'livestreams' ? 'livestream' : 'video',
         stageId: video.videoType === 'livestreams' ? video._id : '',
         sessionId: video.videoType !== 'livestreams' ? video._id : '',
       })),
-    }
+    };
 
     try {
-      const collectionMetadata =
-        await generateNFTCollectionMetadataAction({
-          nftCollection: formData,
-        })
-      setIsGeneratingMetadata(false)
+      const collectionMetadata = await generateNFTCollectionMetadataAction({
+        nftCollection: formData,
+      });
+      setIsGeneratingMetadata(false);
 
       setFormResponseData({
         ...formData,
         ipfsPath: collectionMetadata.ipfsPath,
         videos: collectionMetadata.videos,
-      })
-      createCollectionContract(collectionMetadata.ipfsPath)
+      });
+      createCollectionContract(collectionMetadata.ipfsPath);
     } catch (error) {
-      setIsPublishingCollection(false)
-      setPublishError('Error while publishing')
-      toast.error('Error creating NFT Collection')
+      setIsPublishingCollection(false);
+      setPublishError('Error while publishing');
+      toast.error('Error creating NFT Collection');
     }
-  }
+  };
 
   const createNFTCollection = async () => {
-    setIsPublished(false)
-    setPublishError('')
-    setIsPublishingCollection(true)
-    setIsGeneratingMetadata(true)
+    setIsPublished(false);
+    setPublishError('');
+    setIsPublishingCollection(true);
+    setIsGeneratingMetadata(true);
     if (!account.address || chain !== 84532) {
       switchChainAsync(
         { chainId: contractChainID },
         {
           onSuccess: () => {
-            handleWriteContract()
+            handleWriteContract();
           },
           onError: () => {
-            setIsPublishingCollection(false)
-            setPublishError('Error switching chain')
+            setIsPublishingCollection(false);
+            setPublishError('Error switching chain');
           },
         }
-      )
+      );
     } else {
-      handleWriteContract()
+      handleWriteContract();
     }
-  }
+  };
 
   const handleNextButton = () => {
-    if (step === 1) setStep(2)
-    if (step === 2) createNFTCollection()
-  }
+    if (step === 1) setStep(2);
+    if (step === 2) createNFTCollection();
+  };
 
   return (
     <Dialog>
@@ -255,7 +240,8 @@ const CreateNFTForm = ({
                 step == 1
                   ? 'bg-grey font-medium text-black'
                   : 'text-muted-foreground'
-              }`}>
+              }`}
+            >
               {step == 2 && (
                 <CheckCircle2 className="h-7 w-7 fill-success text-white" />
               )}{' '}
@@ -266,7 +252,8 @@ const CreateNFTForm = ({
                 step == 2
                   ? 'bg-grey font-medium text-black'
                   : 'text-muted-foreground'
-              }`}>
+              }`}
+            >
               {formState.selectedVideo.length > 0 && (
                 <CheckCircle2 className="h-7 w-7 fill-success text-white" />
               )}{' '}
@@ -275,9 +262,7 @@ const CreateNFTForm = ({
           </div>
           <div className="flex w-full flex-col justify-between bg-white p-4 lg:p-8">
             <div>
-              {step == 1 && (
-                <CollectionDetails type={type} form={form} />
-              )}
+              {step == 1 && <CollectionDetails type={type} form={form} />}
               {step == 2 && (
                 <AddMedia
                   setFormState={setFormState}
@@ -293,19 +278,19 @@ const CreateNFTForm = ({
               <Link href={`/studio/${organizationSlug}/nfts`}>
                 <Button
                   className="border-none shadow-none"
-                  variant="destructive-outline">
+                  variant="destructive-outline"
+                >
                   Cancel
                 </Button>
               </Link>
               <Button
                 disabled={step == 1}
                 onClick={() => setStep(1)}
-                variant="outline">
+                variant="outline"
+              >
                 Go Back
               </Button>
-              {step === 2 &&
-              !account.address &&
-              !account.isConnected ? (
+              {step === 2 && !account.address && !account.isConnected ? (
                 <ConnectWalletButton />
               ) : (
                 <Button
@@ -316,7 +301,8 @@ const CreateNFTForm = ({
                     (step == 2 && formState.selectedVideo.length < 1)
                   }
                   onClick={handleNextButton}
-                  variant="outlinePrimary">
+                  variant="outlinePrimary"
+                >
                   {step == 1
                     ? 'Continue'
                     : type == 'multiple'
@@ -342,7 +328,7 @@ const CreateNFTForm = ({
         </div>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default CreateNFTForm
+export default CreateNFTForm;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTModal.tsx b/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTModal.tsx
index c8e52299c..7617611c8 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTModal.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/CreateNFTModal.tsx
@@ -1,29 +1,29 @@
-import React from 'react'
-import CreateNFTForm from './CreateNFTForm'
-import { fetchAllSessions } from '@/lib/data'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { INFTSessions } from '@/lib/types'
-import { fetchOrganizationStages } from '@/lib/services/stageService'
-import { NftCollectionType } from 'streameth-new-server/src/interfaces/nft.collection.interface'
+import React from 'react';
+import CreateNFTForm from './CreateNFTForm';
+import { fetchAllSessions } from '@/lib/data';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { INFTSessions } from '@/lib/types';
+import { fetchOrganizationStages } from '@/lib/services/stageService';
+import { NftCollectionType } from 'streameth-new-server/src/interfaces/nft.collection.interface';
 
 const CreateNFTModal = async ({
   organization,
   type,
 }: {
-  organization: string
-  type: string
+  organization: string;
+  type: string;
 }) => {
   const organizationId = (
     await fetchOrganization({ organizationSlug: organization })
-  )?._id
+  )?._id;
   const videos = (
     await fetchAllSessions({
       organizationSlug: organization,
       onlyVideos: true,
     })
-  ).sessions
-  if (!organizationId || !type) return null
-  const stages = await fetchOrganizationStages({ organizationId })
+  ).sessions;
+  if (!organizationId || !type) return null;
+  const stages = await fetchOrganizationStages({ organizationId });
 
   return (
     <CreateNFTForm
@@ -33,7 +33,7 @@ const CreateNFTModal = async ({
       organizationSlug={organization}
       type={type as NftCollectionType}
     />
-  )
-}
+  );
+};
 
-export default CreateNFTModal
+export default CreateNFTModal;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/PublishingNFTModal.tsx b/packages/app/app/studio/[organization]/nfts/create/components/PublishingNFTModal.tsx
index 1794f91b5..2f7a26827 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/PublishingNFTModal.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/PublishingNFTModal.tsx
@@ -1,17 +1,13 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Ban, CheckCircle2, Loader2 } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import React from 'react'
-import { type BaseError } from 'wagmi'
-import TransactionHash from './TransactionHash'
-import ShareCollection from './ShareCollection'
+'use client';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Ban, CheckCircle2, Loader2 } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+import { type BaseError } from 'wagmi';
+import TransactionHash from './TransactionHash';
+import ShareCollection from './ShareCollection';
 
 const PublishingNFTModal = ({
   open,
@@ -25,17 +21,17 @@ const PublishingNFTModal = ({
   isGeneratingMetadata,
   collectionId,
 }: {
-  open: boolean
-  onClose: React.Dispatch<React.SetStateAction<boolean>>
-  isPublished: boolean
-  isSuccess: boolean
-  organization: string
-  hash?: string
-  isTransactionApproved: boolean
-  error: BaseError | null
-  publishError?: string
-  isGeneratingMetadata?: boolean
-  collectionId?: string
+  open: boolean;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+  isPublished: boolean;
+  isSuccess: boolean;
+  organization: string;
+  hash?: string;
+  isTransactionApproved: boolean;
+  error: BaseError | null;
+  publishError?: string;
+  isGeneratingMetadata?: boolean;
+  collectionId?: string;
 }) => {
   return (
     <Dialog open={open} onOpenChange={onClose}>
@@ -58,9 +54,7 @@ const PublishingNFTModal = ({
                   )}
                 </div>
                 <div>
-                  <p className="font-medium">
-                    Generating collection metadata
-                  </p>
+                  <p className="font-medium">Generating collection metadata</p>
                 </div>
               </div>
               <div className="flex items-center gap-2">
@@ -76,8 +70,8 @@ const PublishingNFTModal = ({
                     Go to your wallet to approve the transaction
                   </p>
                   <p className="text-sm text-muted-foreground">
-                    You&apos;ll be asked to pay gas fees and sign in
-                    order to deploy your contract on the blockchain.
+                    You&apos;ll be asked to pay gas fees and sign in order to
+                    deploy your contract on the blockchain.
                   </p>
                 </div>
               </div>
@@ -87,12 +81,9 @@ const PublishingNFTModal = ({
                 </div>
 
                 <div>
-                  <p className="font-medium">
-                    Publishing your NFT Collection
-                  </p>
+                  <p className="font-medium">Publishing your NFT Collection</p>
                   <p className="text-sm text-muted-foreground">
-                    It may take some time for the transaction to be
-                    processed.
+                    It may take some time for the transaction to be processed.
                   </p>
                   {hash && <TransactionHash hash={hash} />}
                 </div>
@@ -120,9 +111,7 @@ const PublishingNFTModal = ({
               <ShareCollection collectionId={collectionId} />
 
               <Link href={`/studio/${organization}/nfts`}>
-                <Button
-                  onClick={() => onClose(false)}
-                  variant={'primary'}>
+                <Button onClick={() => onClose(false)} variant={'primary'}>
                   Done
                 </Button>
               </Link>
@@ -131,8 +120,7 @@ const PublishingNFTModal = ({
         )}
         {error && (
           <div className="text-center text-destructive">
-            Error:{' '}
-            {(error as BaseError).shortMessage || error.message}
+            Error: {(error as BaseError).shortMessage || error.message}
           </div>
         )}
 
@@ -144,7 +132,7 @@ const PublishingNFTModal = ({
         )}
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default PublishingNFTModal
+export default PublishingNFTModal;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/SelectedMediaItem.tsx b/packages/app/app/studio/[organization]/nfts/create/components/SelectedMediaItem.tsx
index a1f523add..93b08576e 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/SelectedMediaItem.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/SelectedMediaItem.tsx
@@ -1,42 +1,39 @@
-'use client'
-import { useEffect, useState } from 'react'
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import {
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { IExtendedSession } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import { XCircle } from 'lucide-react'
-import React from 'react'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
+'use client';
+import { useEffect, useState } from 'react';
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { IExtendedSession } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import { XCircle } from 'lucide-react';
+import React from 'react';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
 
 const SelectedMediaItem = ({
   video,
   handleRemoveSelected,
 }: {
-  handleRemoveSelected: (video: IExtendedSession) => void
-  video: IExtendedSession
+  handleRemoveSelected: (video: IExtendedSession) => void;
+  video: IExtendedSession;
 }) => {
   const [generatedThumbnail, setGeneratedThumbnail] = useState<
     string | undefined
-  >('')
+  >('');
   const getThumbnail = async () => {
-    const thumbnail = await generateThumbnailAction(video)
+    const thumbnail = await generateThumbnailAction(video);
 
-    if (thumbnail) setGeneratedThumbnail(thumbnail)
-    return
-  }
+    if (thumbnail) setGeneratedThumbnail(thumbnail);
+    return;
+  };
   useEffect(() => {
-    if (video) getThumbnail()
+    if (video) getThumbnail();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [video])
+  }, [video]);
   return (
     <div className="relative mt-4">
       <div
         className="absolute end-0 z-50 cursor-pointer p-2"
-        onClick={() => handleRemoveSelected(video)}>
+        onClick={() => handleRemoveSelected(video)}
+      >
         <XCircle className="h-7 w-7 fill-muted-foreground text-white" />
       </div>
 
@@ -49,9 +46,11 @@ const SelectedMediaItem = ({
       </div>
       <div className="flex items-start justify-between">
         <CardHeader
-          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}>
+          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}
+        >
           <CardTitle
-            className={`line-clamp-1 overflow-hidden text-sm capitalize`}>
+            className={`line-clamp-1 overflow-hidden text-sm capitalize`}
+          >
             {video.name}
           </CardTitle>
 
@@ -66,7 +65,7 @@ const SelectedMediaItem = ({
         </CardHeader>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SelectedMediaItem
+export default SelectedMediaItem;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/ShareCollection.tsx b/packages/app/app/studio/[organization]/nfts/create/components/ShareCollection.tsx
index 1222996b6..6224755e7 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/ShareCollection.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/ShareCollection.tsx
@@ -1,19 +1,15 @@
-'use client'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import React, { useEffect, useState } from 'react'
+'use client';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import React, { useEffect, useState } from 'react';
 
-const ShareCollection = ({
-  collectionId,
-}: {
-  collectionId?: string
-}) => {
-  const [url, setUrl] = useState('')
+const ShareCollection = ({ collectionId }: { collectionId?: string }) => {
+  const [url, setUrl] = useState('');
   useEffect(() => {
     // This code will only run on the client side
-    if (typeof window === 'undefined') return
+    if (typeof window === 'undefined') return;
 
-    setUrl(window.location.origin)
-  }, [])
+    setUrl(window.location.origin);
+  }, []);
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <ShareButton
@@ -21,7 +17,7 @@ const ShareCollection = ({
         shareFor="nft collection"
       />
     </div>
-  )
-}
+  );
+};
 
-export default ShareCollection
+export default ShareCollection;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/ShareVideoNFT.tsx b/packages/app/app/studio/[organization]/nfts/create/components/ShareVideoNFT.tsx
index 88e6d74b4..161c69af6 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/ShareVideoNFT.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/ShareVideoNFT.tsx
@@ -1,21 +1,21 @@
-'use client'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import React, { useEffect, useState } from 'react'
+'use client';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import React, { useEffect, useState } from 'react';
 
 const ShareVideoNFT = ({
   collectionId,
   organization,
 }: {
-  organization: string
-  collectionId: string
+  organization: string;
+  collectionId: string;
 }) => {
-  const [url, setUrl] = useState('')
+  const [url, setUrl] = useState('');
   useEffect(() => {
     // This code will only run on the client side
-    if (typeof window === 'undefined') return
+    if (typeof window === 'undefined') return;
 
-    setUrl(window.location.origin)
-  }, [])
+    setUrl(window.location.origin);
+  }, []);
   return (
     <div onClick={(e) => e.stopPropagation()}>
       <ShareButton
@@ -23,7 +23,7 @@ const ShareVideoNFT = ({
         shareFor="video collection"
       />
     </div>
-  )
-}
+  );
+};
 
-export default ShareVideoNFT
+export default ShareVideoNFT;
diff --git a/packages/app/app/studio/[organization]/nfts/create/components/TransactionHash.tsx b/packages/app/app/studio/[organization]/nfts/create/components/TransactionHash.tsx
index 39ae90cb1..391a868e6 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/TransactionHash.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/TransactionHash.tsx
@@ -1,6 +1,6 @@
-import { ExternalLinkIcon } from 'lucide-react'
-import Link from 'next/link'
-import React from 'react'
+import { ExternalLinkIcon } from 'lucide-react';
+import Link from 'next/link';
+import React from 'react';
 
 const TransactionHash = ({ hash }: { hash: string }) => {
   return (
@@ -8,10 +8,11 @@ const TransactionHash = ({ hash }: { hash: string }) => {
       target="_blank"
       rel="noopener"
       className="mt-1 flex items-center gap-1 text-sm text-blue"
-      href={`https://basescan.org/tx/${hash}`}>
+      href={`https://basescan.org/tx/${hash}`}
+    >
       View on Base Scan <ExternalLinkIcon className="h-4 w-4" />
     </Link>
-  )
-}
+  );
+};
 
-export default TransactionHash
+export default TransactionHash;
diff --git a/packages/app/app/studio/[organization]/nfts/create/page.tsx b/packages/app/app/studio/[organization]/nfts/create/page.tsx
index 136e4323a..cf7b9cc46 100644
--- a/packages/app/app/studio/[organization]/nfts/create/page.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/page.tsx
@@ -1,30 +1,30 @@
-import React from 'react'
-import CreateNFTForm from './components/CreateNFTForm'
-import { fetchAllSessions } from '@/lib/data'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import { INFTSessions } from '@/lib/types'
-import { fetchOrganizationStages } from '@/lib/services/stageService'
-import { NftCollectionType } from 'streameth-new-server/src/interfaces/nft.collection.interface'
+import React from 'react';
+import CreateNFTForm from './components/CreateNFTForm';
+import { fetchAllSessions } from '@/lib/data';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { INFTSessions } from '@/lib/types';
+import { fetchOrganizationStages } from '@/lib/services/stageService';
+import { NftCollectionType } from 'streameth-new-server/src/interfaces/nft.collection.interface';
 
 const CreateNFT = async ({
   params,
   searchParams,
 }: {
-  params: { organization: string }
-  searchParams: { type: string }
+  params: { organization: string };
+  searchParams: { type: string };
 }) => {
-  const { type } = searchParams
+  const { type } = searchParams;
   const organizationId = (
     await fetchOrganization({ organizationSlug: params.organization })
-  )?._id
+  )?._id;
   const videos = (
     await fetchAllSessions({
       organizationSlug: params.organization,
       onlyVideos: true,
     })
-  ).sessions
-  if (!organizationId || !type) return null
-  const stages = await fetchOrganizationStages({ organizationId })
+  ).sessions;
+  if (!organizationId || !type) return null;
+  const stages = await fetchOrganizationStages({ organizationId });
 
   return (
     <div className="mx-auto h-full max-w-5xl overflow-auto">
@@ -36,7 +36,7 @@ const CreateNFT = async ({
         type={type as NftCollectionType}
       />
     </div>
-  )
-}
+  );
+};
 
-export default CreateNFT
+export default CreateNFT;
diff --git a/packages/app/app/studio/[organization]/nfts/page.tsx b/packages/app/app/studio/[organization]/nfts/page.tsx
index 0c741505c..2d72da167 100644
--- a/packages/app/app/studio/[organization]/nfts/page.tsx
+++ b/packages/app/app/studio/[organization]/nfts/page.tsx
@@ -4,36 +4,36 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
+} from '@/components/ui/card';
 
-import Image from 'next/image'
-import React from 'react'
-import CreateNFTCollectionModal from './components/CreateNFTCollectionModal'
-import { fetchOrganizationNFTCollections } from '@/lib/services/nftCollectionService'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import NFTCollectionCard from './components/NFTCollectionCard'
-import MintNftSort from './components/MintNftSort'
-import { sortArray } from '@/lib/utils/utils'
-import { IExtendedNftCollections } from '@/lib/types'
+import Image from 'next/image';
+import React from 'react';
+import CreateNFTCollectionModal from './components/CreateNFTCollectionModal';
+import { fetchOrganizationNFTCollections } from '@/lib/services/nftCollectionService';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import NFTCollectionCard from './components/NFTCollectionCard';
+import MintNftSort from './components/MintNftSort';
+import { sortArray } from '@/lib/utils/utils';
+import { IExtendedNftCollections } from '@/lib/types';
 
 const NFT = async ({
   params,
   searchParams,
 }: {
-  params: { organization: string }
-  searchParams: { type: string; sort: string }
+  params: { organization: string };
+  searchParams: { type: string; sort: string };
 }) => {
-  const { type } = searchParams
+  const { type } = searchParams;
   const organizationId = (
     await fetchOrganization({ organizationSlug: params.organization })
-  )?._id
-  if (!organizationId) return null
+  )?._id;
+  if (!organizationId) return null;
   const nftCollections = sortArray(
     await fetchOrganizationNFTCollections({
       organizationId,
     }),
     searchParams.sort || 'desc_alpha'
-  )
+  );
 
   return (
     <div className="flex h-full flex-col bg-white">
@@ -42,7 +42,8 @@ const NFT = async ({
           backgroundImage: `url(/backgrounds/nftBg.svg)`,
           backgroundPositionX: 'center',
         }}
-        className="rounded-none border-none bg-black bg-cover bg-no-repeat p-4 text-white shadow-none">
+        className="rounded-none border-none bg-black bg-cover bg-no-repeat p-4 text-white shadow-none"
+      >
         <CardHeader>
           <CardTitle>Create Epic NFT Collection</CardTitle>
           <CardDescription className="max-w-[400px] text-white">
@@ -92,7 +93,7 @@ const NFT = async ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default NFT
+export default NFT;
diff --git a/packages/app/app/studio/[organization]/page.tsx b/packages/app/app/studio/[organization]/page.tsx
index 4aac231c7..833f3189d 100644
--- a/packages/app/app/studio/[organization]/page.tsx
+++ b/packages/app/app/studio/[organization]/page.tsx
@@ -1,37 +1,33 @@
-'use server'
+'use server';
 
-import { Loading } from './livestreams/page'
-import {
-  IExtendedStage,
-  LivestreamPageParams,
-  eSort,
-} from '@/lib/types'
-import CreateLivestreamModal from './livestreams/components/CreateLivestreamModal'
-import { Suspense } from 'react'
-import { fetchOrganization } from '@/lib/services/organizationService'
-import LivestreamTable from './livestreams/components/LivestreamTable'
-import { notFound } from 'next/navigation'
-import { sortArray } from '@/lib/utils/utils'
-import { fetchOrganizationStages } from '@/lib/services/stageService'
-import UploadVideoDialog from './library/components/UploadVideoDialog'
+import { Loading } from './livestreams/page';
+import { IExtendedStage, LivestreamPageParams, eSort } from '@/lib/types';
+import CreateLivestreamModal from './livestreams/components/CreateLivestreamModal';
+import { Suspense } from 'react';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import LivestreamTable from './livestreams/components/LivestreamTable';
+import { notFound } from 'next/navigation';
+import { sortArray } from '@/lib/utils/utils';
+import { fetchOrganizationStages } from '@/lib/services/stageService';
+import UploadVideoDialog from './library/components/UploadVideoDialog';
 const OrganizationPage = async ({
   params,
   searchParams,
 }: LivestreamPageParams) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
-  if (!organization) return notFound()
+  if (!organization) return notFound();
 
   const stages = await fetchOrganizationStages({
     organizationId: organization._id,
-  })
+  });
 
   const sortedStages = sortArray(
     stages,
     searchParams.sort
-  ) as unknown as IExtendedStage[]
+  ) as unknown as IExtendedStage[];
 
   return (
     <div className="flex h-full w-full flex-col p-4">
@@ -42,16 +38,12 @@ const OrganizationPage = async ({
             show={searchParams?.show}
             organization={organization}
           />
-          <UploadVideoDialog
-            organizationId={organization._id.toString()}
-          />
+          <UploadVideoDialog organizationId={organization._id.toString()} />
         </div>
       </div>
       <div className="flex h-[80%] flex-col">
         <p className="py-4 text-lg font-bold">Livestreams</p>
-        <Suspense
-          key={searchParams.toString()}
-          fallback={<Loading />}>
+        <Suspense key={searchParams.toString()} fallback={<Loading />}>
           <LivestreamTable
             organizationSlug={params?.organization}
             streams={sortedStages}
@@ -59,7 +51,7 @@ const OrganizationPage = async ({
         </Suspense>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default OrganizationPage
+export default OrganizationPage;
diff --git a/packages/app/app/studio/[organization]/settings/components/NavigationItem.tsx b/packages/app/app/studio/[organization]/settings/components/NavigationItem.tsx
index aa99a78a8..e782d5c91 100644
--- a/packages/app/app/studio/[organization]/settings/components/NavigationItem.tsx
+++ b/packages/app/app/studio/[organization]/settings/components/NavigationItem.tsx
@@ -1,18 +1,12 @@
-'use client'
-import useSearchParams from '@/lib/hooks/useSearchParams'
+'use client';
+import useSearchParams from '@/lib/hooks/useSearchParams';
 
-const NavigationItem = ({
-  lable,
-  path,
-}: {
-  lable: string
-  path: string
-}) => {
-  const { searchParams, handleTermChange } = useSearchParams()
+const NavigationItem = ({ lable, path }: { lable: string; path: string }) => {
+  const { searchParams, handleTermChange } = useSearchParams();
 
   const active =
     searchParams.get('settingsActiveTab') === path ||
-    (!searchParams.get('settingsActiveTab') && path === 'basicInfo')
+    (!searchParams.get('settingsActiveTab') && path === 'basicInfo');
   return (
     <div
       className={`flex cursor-pointer flex-row items-center space-x-2 p-2 ${
@@ -25,12 +19,13 @@ const NavigationItem = ({
             value: path,
           },
         ])
-      }>
+      }
+    >
       <button className={!active ? 'text-muted-foreground' : ''}>
         {lable}
       </button>
     </div>
-  )
-}
+  );
+};
 
-export default NavigationItem
+export default NavigationItem;
diff --git a/packages/app/app/studio/[organization]/settings/page.tsx b/packages/app/app/studio/[organization]/settings/page.tsx
index 9d58ebeb1..6239abaa6 100644
--- a/packages/app/app/studio/[organization]/settings/page.tsx
+++ b/packages/app/app/studio/[organization]/settings/page.tsx
@@ -1,28 +1,28 @@
-import React from 'react'
-import CreateOrganizationForm from '../../(home)/components/CreateOrganizationForm'
-import { studioPageParams } from '@/lib/types'
-import { fetchOrganization } from '@/lib/services/organizationService'
+import React from 'react';
+import CreateOrganizationForm from '../../(home)/components/CreateOrganizationForm';
+import { studioPageParams } from '@/lib/types';
+import { fetchOrganization } from '@/lib/services/organizationService';
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
+} from '@/components/ui/card';
 
 const Settings = async ({
   params,
 }: {
-  params: studioPageParams['params']
+  params: studioPageParams['params'];
   searchParams: {
-    settingsActiveTab?: string
-  }
+    settingsActiveTab?: string;
+  };
 }) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
-  if (!organization) return null
+  if (!organization) return null;
 
   return (
     <div className="mx-auto my-12 flex w-full max-w-4xl">
@@ -30,8 +30,7 @@ const Settings = async ({
         <CardHeader>
           <CardTitle>Edit yout channel</CardTitle>
           <CardDescription>
-            Header logo and description will appear on your channel
-            page
+            Header logo and description will appear on your channel page
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -42,7 +41,7 @@ const Settings = async ({
         </CardContent>
       </Card>
     </div>
-  )
-}
+  );
+};
 
-export default Settings
+export default Settings;
diff --git a/packages/app/app/studio/[organization]/team/components/AddTeamMembers.tsx b/packages/app/app/studio/[organization]/team/components/AddTeamMembers.tsx
index 9278e0c03..125a2788a 100644
--- a/packages/app/app/studio/[organization]/team/components/AddTeamMembers.tsx
+++ b/packages/app/app/studio/[organization]/team/components/AddTeamMembers.tsx
@@ -1,13 +1,13 @@
-'use client'
-import React, { useState } from 'react'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { addOrganizationMemberAction } from '@/lib/actions/organizations'
-import { toast } from 'sonner'
-import { addOrganizationMemberSchema } from '@/lib/schema'
-import { zodResolver } from '@hookform/resolvers/zod'
-import * as z from 'zod'
-import { useForm } from 'react-hook-form'
+'use client';
+import React, { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { addOrganizationMemberAction } from '@/lib/actions/organizations';
+import { toast } from 'sonner';
+import { addOrganizationMemberSchema } from '@/lib/schema';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { useForm } from 'react-hook-form';
 import {
   Form,
   FormControl,
@@ -15,50 +15,45 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form'
+} from '@/components/ui/form';
 
-const AddTeamMembers = ({
-  organizationId,
-}: {
-  organizationId: string
-}) => {
-  const [isAddingMember, setIsAddingMember] = useState(false)
+const AddTeamMembers = ({ organizationId }: { organizationId: string }) => {
+  const [isAddingMember, setIsAddingMember] = useState(false);
 
   const form = useForm<z.infer<typeof addOrganizationMemberSchema>>({
     resolver: zodResolver(addOrganizationMemberSchema),
     defaultValues: {
       memberAddress: '',
     },
-  })
-  function onSubmit(
-    values: z.infer<typeof addOrganizationMemberSchema>
-  ) {
-    setIsAddingMember(true)
+  });
+  function onSubmit(values: z.infer<typeof addOrganizationMemberSchema>) {
+    setIsAddingMember(true);
     addOrganizationMemberAction({
       memberAddress: values.memberAddress,
       organizationId,
     })
       .then((response) => {
         if (response) {
-          toast.success('Member Added to Organization')
-          form.reset()
+          toast.success('Member Added to Organization');
+          form.reset();
         } else {
-          toast.error('Error adding team member')
+          toast.error('Error adding team member');
         }
       })
       .catch(() => {
-        toast.error('Error adding team member')
+        toast.error('Error adding team member');
       })
       .finally(() => {
-        setIsAddingMember(false)
-      })
+        setIsAddingMember(false);
+      });
   }
   return (
     <Form {...form}>
       <form
         onError={(errors) => {}}
         onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-4">
+        className="space-y-4"
+      >
         <div className="flex gap-3">
           {/* <FormField
             control={form.control}
@@ -90,13 +85,14 @@ const AddTeamMembers = ({
           <Button
             disabled={isAddingMember}
             variant="outlinePrimary"
-            type="submit">
+            type="submit"
+          >
             Invite
           </Button>
         </div>
       </form>
     </Form>
-  )
-}
+  );
+};
 
-export default AddTeamMembers
+export default AddTeamMembers;
diff --git a/packages/app/app/studio/[organization]/team/components/DeleteTeamMember.tsx b/packages/app/app/studio/[organization]/team/components/DeleteTeamMember.tsx
index b68b14ae0..775050cc8 100644
--- a/packages/app/app/studio/[organization]/team/components/DeleteTeamMember.tsx
+++ b/packages/app/app/studio/[organization]/team/components/DeleteTeamMember.tsx
@@ -1,48 +1,48 @@
-'use client'
-import React, { useState } from 'react'
-import { Trash2 } from 'lucide-react'
-import { toast } from 'sonner'
+'use client';
+import React, { useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 import {
   Dialog,
   DialogClose,
   DialogContent,
   DialogFooter,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import { deleteTeamMemberAction } from '@/lib/actions/organizations'
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { deleteTeamMemberAction } from '@/lib/actions/organizations';
 
 const DeleteTeamMember = ({
   memberWalletAddress,
   organizationId,
 }: {
-  memberWalletAddress: string
-  organizationId: string
+  memberWalletAddress: string;
+  organizationId: string;
 }) => {
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [open, setOpen] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const handleDeleteMember = async () => {
-    setIsDeleting(true)
+    setIsDeleting(true);
     await deleteTeamMemberAction({
       memberWalletAddress,
       organizationId,
     })
       .then((response) => {
         if (response) {
-          toast.success('Member deleted')
-          setOpen(false)
+          toast.success('Member deleted');
+          setOpen(false);
         } else {
-          toast.error('Error deleting member')
+          toast.error('Error deleting member');
         }
       })
       .catch(() => {
-        toast.error('Error deleting member')
+        toast.error('Error deleting member');
       })
       .finally(() => {
-        setIsDeleting(false)
-      })
-  }
+        setIsDeleting(false);
+      });
+  };
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>
@@ -54,9 +54,7 @@ const DeleteTeamMember = ({
         <div className="rounded-full bg-destructive p-3">
           <Trash2 className="h-5 w-5 text-white" />
         </div>
-        <p className="text-xl">
-          Are you sure you want to delete this member?
-        </p>
+        <p className="text-xl">Are you sure you want to delete this member?</p>
         <DialogFooter className="flex items-center gap-4">
           <DialogClose>
             <Button variant="ghost">Cancel</Button>
@@ -65,13 +63,14 @@ const DeleteTeamMember = ({
           <Button
             onClick={handleDeleteMember}
             loading={isDeleting}
-            variant="destructive">
+            variant="destructive"
+          >
             Delete
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-export default DeleteTeamMember
+export default DeleteTeamMember;
diff --git a/packages/app/app/studio/[organization]/team/page.tsx b/packages/app/app/studio/[organization]/team/page.tsx
index 401a0291f..1189025c0 100644
--- a/packages/app/app/studio/[organization]/team/page.tsx
+++ b/packages/app/app/studio/[organization]/team/page.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import { studioPageParams } from '@/lib/types'
-import { fetchOrganization } from '@/lib/services/organizationService'
+import React from 'react';
+import { studioPageParams } from '@/lib/types';
+import { fetchOrganization } from '@/lib/services/organizationService';
 import {
   Card,
   CardTitle,
   CardDescription,
   CardHeader,
   CardContent,
-} from '@/components/ui/card'
-import { fetchOrganizationMembers } from '@/lib/services/organizationService'
-import AddTeamMembers from './components/AddTeamMembers'
-import DeleteTeamMember from './components/DeleteTeamMember'
-import { truncateAddr } from '@/lib/utils/utils'
-import { Button } from '@/components/ui/button'
+} from '@/components/ui/card';
+import { fetchOrganizationMembers } from '@/lib/services/organizationService';
+import AddTeamMembers from './components/AddTeamMembers';
+import DeleteTeamMember from './components/DeleteTeamMember';
+import { truncateAddr } from '@/lib/utils/utils';
+import { Button } from '@/components/ui/button';
 import {
   Table,
   TableHead,
@@ -20,26 +20,26 @@ import {
   TableRow,
   TableBody,
   TableCell,
-} from '@/components/ui/table'
+} from '@/components/ui/table';
 
 const Settings = async ({
   params,
   searchParams,
 }: {
-  params: studioPageParams['params']
+  params: studioPageParams['params'];
   searchParams: {
-    settingsActiveTab?: string
-  }
+    settingsActiveTab?: string;
+  };
 }) => {
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
-  })
+  });
 
-  if (!organization) return null
+  if (!organization) return null;
 
   const members = await fetchOrganizationMembers({
     organizationId: organization._id,
-  })
+  });
 
   return (
     <div className="mx-auto my-12 flex h-[90%] w-full max-w-4xl">
@@ -79,7 +79,7 @@ const Settings = async ({
         </CardContent>
       </Card>
     </div>
-  )
-}
+  );
+};
 
-export default Settings
+export default Settings;
diff --git a/packages/app/components/Layout/EmbedLayout.tsx b/packages/app/components/Layout/EmbedLayout.tsx
index c5ef57556..432153439 100644
--- a/packages/app/components/Layout/EmbedLayout.tsx
+++ b/packages/app/components/Layout/EmbedLayout.tsx
@@ -1,15 +1,15 @@
-'use client'
-import { useContext, useEffect } from 'react'
-import { TopNavbarContext } from '../../lib/context/TopNavbarContext'
+'use client';
+import { useContext, useEffect } from 'react';
+import { TopNavbarContext } from '../../lib/context/TopNavbarContext';
 
 const EmbedLayout = ({ children }: { children: React.ReactNode }) => {
-  const { setShowNav } = useContext(TopNavbarContext)
+  const { setShowNav } = useContext(TopNavbarContext);
 
   useEffect(() => {
-    setShowNav(false)
-  }, [setShowNav])
+    setShowNav(false);
+  }, [setShowNav]);
 
-  return children
-}
+  return children;
+};
 
-export default EmbedLayout
+export default EmbedLayout;
diff --git a/packages/app/components/Layout/Footer.tsx b/packages/app/components/Layout/Footer.tsx
index 2b487e742..b6416a91c 100644
--- a/packages/app/components/Layout/Footer.tsx
+++ b/packages/app/components/Layout/Footer.tsx
@@ -1,6 +1,6 @@
-import StreamethLogoGray from '@/lib/svg/StreamethLogoGray'
-import Image from 'next/image'
-import Link from 'next/link'
+import StreamethLogoGray from '@/lib/svg/StreamethLogoGray';
+import Image from 'next/image';
+import Link from 'next/link';
 
 const items = {
   // about: {
@@ -11,10 +11,10 @@ const items = {
   //   item: 'Contact',
   //   href: 'https://info.streameth.org/#team',
   // },
-  // docs: {
-  //   item: 'Docs',
-  //   href: 'https://streameth.notion.site/a473a629420b4942904c851155a18c9b?v=4a29b97e7fd94bbbb38269cb808d3ac4',
-  // },
+  data_request: {
+    item: 'Data Request',
+    href: '/data-request',
+  },
   privacy: {
     item: 'Privacy',
     href: '/privacy',
@@ -23,10 +23,10 @@ const items = {
     item: 'Terms',
     href: '/terms',
   },
-}
+};
 
 const Footer = ({ active }: { active?: string }) => {
-  const year = new Date().getFullYear()
+  const year = new Date().getFullYear();
 
   return (
     <footer className="z-[99999999] mb-3 mt-5 flex flex-col items-center justify-center space-y-2 md:mb-5">
@@ -48,13 +48,14 @@ const Footer = ({ active }: { active?: string }) => {
             href={href}
             className={`mx-1 text-sm ${
               active === key ? 'font-bold' : 'font-light'
-            } text-gray-500 underline hover:no-underline`}>
+            } text-gray-500 underline hover:no-underline`}
+          >
             {item}
           </Link>
         ))}
       </div>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/packages/app/components/Layout/HomePageNavbar.tsx b/packages/app/components/Layout/HomePageNavbar.tsx
index be83b4cbf..92ffb72bd 100644
--- a/packages/app/components/Layout/HomePageNavbar.tsx
+++ b/packages/app/components/Layout/HomePageNavbar.tsx
@@ -1,22 +1,22 @@
-'use client'
+'use client';
 
-import React, { useState, Suspense, useLayoutEffect } from 'react'
-import Image from 'next/image'
-import SearchBar from '@/components/misc/SearchBar'
-import Link from 'next/link'
-import { NavigationMenu } from '@/components/ui/navigation-menu'
-import { Menu, X } from 'lucide-react'
-import Navbar from './Navbar'
-import { SignInUserButton } from '../misc/SignInUserButton'
-import { Search } from 'lucide-react'
-import { Page } from '@/lib/types'
-import SwitchOrganization from '@/app/studio/[organization]/components/SwitchOrganization'
-import { IExtendedOrganization } from '@/lib/types'
-import { cn } from '@/lib/utils/utils'
-import { Button } from '@/components/ui/button'
-import { ConnectWalletButton } from '../misc/ConnectWalletButton'
-import { usePathname } from 'next/navigation'
-import { useAccount } from 'wagmi'
+import React, { useState, Suspense, useLayoutEffect } from 'react';
+import Image from 'next/image';
+import SearchBar from '@/components/misc/SearchBar';
+import Link from 'next/link';
+import { NavigationMenu } from '@/components/ui/navigation-menu';
+import { Menu, X } from 'lucide-react';
+import Navbar from './Navbar';
+import { SignInUserButton } from '../misc/SignInUserButton';
+import { Search } from 'lucide-react';
+import { Page } from '@/lib/types';
+import SwitchOrganization from '@/app/studio/[organization]/components/SwitchOrganization';
+import { IExtendedOrganization } from '@/lib/types';
+import { cn } from '@/lib/utils/utils';
+import { Button } from '@/components/ui/button';
+import { ConnectWalletButton } from '../misc/ConnectWalletButton';
+import { usePathname } from 'next/navigation';
+import { useAccount } from 'wagmi';
 
 const HomePageNavbar = ({
   logo,
@@ -26,15 +26,15 @@ const HomePageNavbar = ({
   organizations,
   currentOrganization,
 }: {
-  logo?: string
-  pages: Page[]
-  showLogo?: boolean
-  showSearchBar?: boolean
-  organizations?: IExtendedOrganization[]
-  currentOrganization?: string
+  logo?: string;
+  pages: Page[];
+  showLogo?: boolean;
+  showSearchBar?: boolean;
+  organizations?: IExtendedOrganization[];
+  currentOrganization?: string;
 }) => {
   if (logo === '') {
-    logo = undefined
+    logo = undefined;
   }
 
   return (
@@ -55,8 +55,8 @@ const HomePageNavbar = ({
         currentOrganization={currentOrganization || ''}
       />
     </Suspense>
-  )
-}
+  );
+};
 
 const MobileNavBar = ({
   logo,
@@ -65,24 +65,24 @@ const MobileNavBar = ({
   organizations,
   currentOrganization,
 }: {
-  logo?: string
-  pages: Page[]
-  showSearchBar: boolean
-  organizations?: IExtendedOrganization[]
-  currentOrganization: string
+  logo?: string;
+  pages: Page[];
+  showSearchBar: boolean;
+  organizations?: IExtendedOrganization[];
+  currentOrganization: string;
 }) => {
-  const [menuVisible, setMenuVisible] = useState(false)
-  const [searchVisible, setSearchVisible] = useState(false)
-  const toggleSearch = () => setSearchVisible(!searchVisible)
-  const toggleMenu = () => setMenuVisible(!menuVisible)
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [searchVisible, setSearchVisible] = useState(false);
+  const toggleSearch = () => setSearchVisible(!searchVisible);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
 
   useLayoutEffect(() => {
     if (menuVisible || searchVisible) {
-      document.body.style.overflow = 'hidden'
+      document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow = 'auto'
+      document.body.style.overflow = 'auto';
     }
-  }, [menuVisible, searchVisible])
+  }, [menuVisible, searchVisible]);
 
   return (
     <NavigationMenu className="sticky top-0 z-50 flex flex-row items-center bg-white lg:hidden">
@@ -92,10 +92,7 @@ const MobileNavBar = ({
 
       {searchVisible && showSearchBar && (
         <div className="absolute bottom-[-56px] w-full bg-secondary">
-          <SearchBar
-            organizationSlug={currentOrganization}
-            isMobile={true}
-          />
+          <SearchBar organizationSlug={currentOrganization} isMobile={true} />
         </div>
       )}
       <div
@@ -103,7 +100,8 @@ const MobileNavBar = ({
           'relative flex h-full w-full flex-row items-center px-4 py-2',
           menuVisible && 'bg-background',
           searchVisible && showSearchBar && 'bg-background'
-        )}>
+        )}
+      >
         {organizations && (
           <div className="m-1 mr-2">
             <SwitchOrganization
@@ -149,8 +147,8 @@ const MobileNavBar = ({
         )}
       </div>
     </NavigationMenu>
-  )
-}
+  );
+};
 
 const PCNavBar = ({
   logo,
@@ -160,16 +158,16 @@ const PCNavBar = ({
   organizations,
   currentOrganization,
 }: {
-  logo?: string
-  pages: Page[]
-  showLogo: boolean
-  showSearchBar: boolean
-  organizations?: IExtendedOrganization[]
-  currentOrganization: string
+  logo?: string;
+  pages: Page[];
+  showLogo: boolean;
+  showSearchBar: boolean;
+  organizations?: IExtendedOrganization[];
+  currentOrganization: string;
 }) => {
-  const { isConnected } = useAccount()
-  const pathname = usePathname()
-  const isStudio = pathname.includes('studio')
+  const { isConnected } = useAccount();
+  const pathname = usePathname();
+  const isStudio = pathname.includes('studio');
   return (
     <NavigationMenu className="sticky top-0 z-[30] hidden w-full flex-row items-center justify-between bg-white p-2 px-4 shadow-sm md:hidden lg:flex">
       <div className="flex flex-1 items-center justify-start">
@@ -216,7 +214,7 @@ const PCNavBar = ({
         {isStudio && <SignInUserButton />}
       </div>
     </NavigationMenu>
-  )
-}
+  );
+};
 
-export default HomePageNavbar
+export default HomePageNavbar;
diff --git a/packages/app/components/Layout/Navbar.tsx b/packages/app/components/Layout/Navbar.tsx
index d46a9eb28..9d3a7186f 100644
--- a/packages/app/components/Layout/Navbar.tsx
+++ b/packages/app/components/Layout/Navbar.tsx
@@ -1,15 +1,15 @@
-'use client'
-import Link from 'next/link'
+'use client';
+import Link from 'next/link';
 import {
   NavigationMenuItem,
   NavigationMenuLink,
   navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu'
-import { NavBarProps } from '@/lib/types'
-import { SignInUserButton } from '../misc/SignInUserButton'
-import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog'
-import { ConnectWalletButton } from '../misc/ConnectWalletButton'
-import { usePathname } from 'next/navigation'
+} from '@/components/ui/navigation-menu';
+import { NavBarProps } from '@/lib/types';
+import { SignInUserButton } from '../misc/SignInUserButton';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog';
+import { ConnectWalletButton } from '../misc/ConnectWalletButton';
+import { usePathname } from 'next/navigation';
 
 export default function Navbar({
   setIsNavVisible,
@@ -17,29 +17,29 @@ export default function Navbar({
   pages,
   organization,
 }: {
-  isMobile?: boolean
-  setIsNavVisible?: React.Dispatch<React.SetStateAction<boolean>>
-  pages: NavBarProps['pages']
-  organization?: string
+  isMobile?: boolean;
+  setIsNavVisible?: React.Dispatch<React.SetStateAction<boolean>>;
+  pages: NavBarProps['pages'];
+  organization?: string;
 }) {
-  const pathname = usePathname()
-  const isStudio = pathname.includes('studio')
+  const pathname = usePathname();
+  const isStudio = pathname.includes('studio');
   if (pages.length === 0) {
-    return null
+    return null;
   }
 
   return (
     <div className="absolute right-0 top-[56px] z-50 flex w-screen items-center text-center lg:relative lg:top-[unset] lg:h-full lg:w-[unset] lg:items-center">
       <ul
         onClick={() => isMobile && setIsNavVisible?.(false)}
-        className="flex w-full flex-col lg:flex-row lg:space-x-2 lg:px-2">
+        className="flex w-full flex-col lg:flex-row lg:space-x-2 lg:px-2"
+      >
         {pages.map((item) => (
           <NavigationMenuItem key={item.name}>
             <Link href={item.href} legacyBehavior passHref>
               <NavigationMenuLink
-                className={
-                  navigationMenuTriggerStyle() + ' ' + item.bgColor
-                }>
+                className={navigationMenuTriggerStyle() + ' ' + item.bgColor}
+              >
                 {item.name}
                 {/* <div className="ml-2 text-black">{item.icon}</div> */}
               </NavigationMenuLink>
@@ -50,7 +50,8 @@ export default function Navbar({
           <Dialog>
             <DialogTrigger>
               <NavigationMenuItem
-                className={`${navigationMenuTriggerStyle()} bg-muted`}>
+                className={`${navigationMenuTriggerStyle()} bg-muted`}
+              >
                 Schedule
               </NavigationMenuItem>
             </DialogTrigger>
@@ -59,16 +60,15 @@ export default function Navbar({
                 src="https://ethprague.com/schedule"
                 width="100%"
                 height="100%"
-                name="myiFrame"></iframe>
+                name="myiFrame"
+              ></iframe>
             </DialogContent>
           </Dialog>
         )}
         <NavigationMenuItem key={'connect'} className="lg:hidden">
-          {isStudio && (
-            <SignInUserButton className="w-full rounded-none" />
-          )}
+          {isStudio && <SignInUserButton className="w-full rounded-none" />}
         </NavigationMenuItem>
       </ul>
     </div>
-  )
+  );
 }
diff --git a/packages/app/components/Layout/NavbarTop.tsx b/packages/app/components/Layout/NavbarTop.tsx
index 8d7ce837e..8c41d8f7c 100644
--- a/packages/app/components/Layout/NavbarTop.tsx
+++ b/packages/app/components/Layout/NavbarTop.tsx
@@ -1,25 +1,26 @@
-'use client'
-import Link from 'next/link'
-import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import { Menu, X } from 'lucide-react'
-import Navbar from './Navbar'
+'use client';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { Menu, X } from 'lucide-react';
+import Navbar from './Navbar';
 
-import { useMediaQuery } from '@/lib/hooks/useMediaQuery'
-import { NavigationMenu } from '@/components/ui/navigation-menu'
-import { NavBarProps } from '@/lib/types'
-import { SignInUserButton } from '../misc/SignInUserButton'
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { NavigationMenu } from '@/components/ui/navigation-menu';
+import { NavBarProps } from '@/lib/types';
+import { SignInUserButton } from '../misc/SignInUserButton';
 
 const NavBarButton = ({
   isNavVisible,
   setIsNavVisible,
 }: {
-  isNavVisible: boolean
-  setIsNavVisible: React.Dispatch<React.SetStateAction<boolean>>
+  isNavVisible: boolean;
+  setIsNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }) => (
   <button
     onClick={() => setIsNavVisible(!isNavVisible)}
-    className="z-50 lg:hidden">
+    className="z-50 lg:hidden"
+  >
     {!isNavVisible ? (
       <Menu
         size={40}
@@ -34,7 +35,7 @@ const NavBarButton = ({
       />
     )}
   </button>
-)
+);
 
 export default function NavbarTop({
   pages,
@@ -42,15 +43,15 @@ export default function NavbarTop({
   homePath,
   showNav,
 }: NavBarProps) {
-  const isMobile = useMediaQuery('(max-width: 768px)')
-  const [menuVisible, setMenuVisible] = useState(false)
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const [menuVisible, setMenuVisible] = useState(false);
 
   useEffect(() => {
-    setMenuVisible(!isMobile)
-  }, [isMobile])
+    setMenuVisible(!isMobile);
+  }, [isMobile]);
 
   if (!showNav) {
-    return null
+    return null;
   }
   return (
     <NavigationMenu className="sticky top-0 bg-event">
@@ -93,5 +94,5 @@ export default function NavbarTop({
         </div>
       </div>
     </NavigationMenu>
-  )
+  );
 }
diff --git a/packages/app/components/Sidebar/Sidebar.tsx b/packages/app/components/Sidebar/Sidebar.tsx
index ba8fa2f83..9eb606131 100644
--- a/packages/app/components/Sidebar/Sidebar.tsx
+++ b/packages/app/components/Sidebar/Sidebar.tsx
@@ -1,24 +1,24 @@
-'use client'
-import { ChevronLast, ChevronFirst, BookOpenText } from 'lucide-react'
-import { usePathname, useRouter } from 'next/navigation'
-import { useContext, createContext, useState, ReactNode } from 'react'
-import Logo from '@/public/logo.png'
-import LogoDark from '@/public/logo_dark.png'
-import Image from 'next/image'
-import Link from 'next/link'
+'use client';
+import { ChevronLast, ChevronFirst, BookOpenText } from 'lucide-react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useContext, createContext, useState, ReactNode } from 'react';
+import Logo from '@/public/logo.png';
+import LogoDark from '@/public/logo_dark.png';
+import Image from 'next/image';
+import Link from 'next/link';
 
-const SidebarContext = createContext<
-  { expanded: boolean } | undefined
->(undefined)
+const SidebarContext = createContext<{ expanded: boolean } | undefined>(
+  undefined
+);
 
 export const SidebarUI = ({
   children,
   initalExpanded,
 }: {
-  children: ReactNode
-  initalExpanded?: boolean
+  children: ReactNode;
+  initalExpanded?: boolean;
 }) => {
-  const [expanded, setExpanded] = useState(initalExpanded ?? false)
+  const [expanded, setExpanded] = useState(initalExpanded ?? false);
 
   return (
     <aside className="flex h-screen flex-col border-r bg-white">
@@ -26,15 +26,11 @@ export const SidebarUI = ({
         <div
           className={`flex items-center overflow-hidden transition-all ${
             expanded ? 'w-40' : 'w-10'
-          }`}>
+          }`}
+        >
           <div className="transition-all">
             {expanded ? (
-              <Image
-                src={LogoDark}
-                width={140}
-                height={40}
-                alt="log"
-              />
+              <Image src={LogoDark} width={140} height={40} alt="log" />
             ) : (
               <Image src={Logo} width={40} height={40} alt="log" />
             )}
@@ -47,7 +43,8 @@ export const SidebarUI = ({
       </SidebarContext.Provider>
       <button
         onClick={() => setExpanded((curr) => !curr)}
-        className="mx-auto mb-4 p-1.5 text-black">
+        className="mx-auto mb-4 p-1.5 text-black"
+      >
         {expanded ? (
           <span className="flex w-full flex-row">
             <ChevronFirst />
@@ -58,51 +55,54 @@ export const SidebarUI = ({
         )}
       </button>
     </aside>
-  )
-}
+  );
+};
 
 export const SidebarItem = ({
   icon,
   text,
   url,
 }: {
-  icon: ReactNode
-  text: string
-  url: string
+  icon: ReactNode;
+  text: string;
+  url: string;
 }) => {
-  const router = useRouter()
-  const pathname = usePathname()
-  const active = pathname === url
+  const router = useRouter();
+  const pathname = usePathname();
+  const active = pathname === url;
   const { expanded } = useContext(SidebarContext) ?? {
     expanded: true,
-  }
+  };
 
-  const isExternal = url.startsWith('http') || url.startsWith('https')
+  const isExternal = url.startsWith('http') || url.startsWith('https');
 
   const handleClick = () => {
     if (isExternal) {
-      window.open(url, '_blank', 'noopener,noreferrer')
+      window.open(url, '_blank', 'noopener,noreferrer');
     } else {
-      router.push(url)
+      router.push(url);
     }
-  }
+  };
 
   return (
     <li
       onClick={handleClick}
-      className={`group relative flex cursor-pointer items-center rounded-md py-2 font-medium transition-colors hover:rounded-xl hover:border hover:border-primary ${active && !isExternal ? 'rounded-xl border border-primary' : 'border border-white'} ${expanded ? 'px-2' : 'justify-center'} `}>
+      className={`group relative flex cursor-pointer items-center rounded-md py-2 font-medium transition-colors hover:rounded-xl hover:border hover:border-primary ${active && !isExternal ? 'rounded-xl border border-primary' : 'border border-white'} ${expanded ? 'px-2' : 'justify-center'} `}
+    >
       {icon}
       <span
-        className={`overflow-hidden text-sm transition-all ${expanded ? 'ml-3' : 'hidden'}`}>
+        className={`overflow-hidden text-sm transition-all ${expanded ? 'ml-3' : 'hidden'}`}
+      >
         {text}
       </span>
 
       {!expanded && (
         <div
-          className={`invisible absolute left-full z-[9999] ml-4 -translate-x-3 rounded-md bg-primary px-2 py-1 text-sm text-white opacity-20 transition-all group-hover:visible group-hover:translate-x-0 group-hover:opacity-100`}>
+          className={`invisible absolute left-full z-[9999] ml-4 -translate-x-3 rounded-md bg-primary px-2 py-1 text-sm text-white opacity-20 transition-all group-hover:visible group-hover:translate-x-0 group-hover:opacity-100`}
+        >
           {text}
         </div>
       )}
     </li>
-  )
-}
+  );
+};
diff --git a/packages/app/components/Sidebar/SidebarMenu.tsx b/packages/app/components/Sidebar/SidebarMenu.tsx
index 94bda65b5..05ff7da3f 100644
--- a/packages/app/components/Sidebar/SidebarMenu.tsx
+++ b/packages/app/components/Sidebar/SidebarMenu.tsx
@@ -1,5 +1,5 @@
-'use client'
-import { SidebarUI, SidebarItem } from './Sidebar'
+'use client';
+import { SidebarUI, SidebarItem } from './Sidebar';
 
 import {
   LuUsers,
@@ -9,13 +9,9 @@ import {
   LuShare2,
   LuLock,
   LuBookOpen,
-} from 'react-icons/lu'
+} from 'react-icons/lu';
 
-const SidebarMenu = ({
-  organizationSlug,
-}: {
-  organizationSlug: string
-}) => {
+const SidebarMenu = ({ organizationSlug }: { organizationSlug: string }) => {
   const navigationItems = [
     {
       text: 'Home',
@@ -52,7 +48,7 @@ const SidebarMenu = ({
       url: 'https://streameth.notion.site/StreamETH-Docs-f31d759cea824b0ea8f959a4608b0b42',
       icon: <LuBookOpen size={25} />,
     },
-  ]
+  ];
 
   return (
     <div className="relative w-[1/4]">
@@ -67,7 +63,7 @@ const SidebarMenu = ({
         ))}
       </SidebarUI>
     </div>
-  )
-}
+  );
+};
 
-export default SidebarMenu
+export default SidebarMenu;
diff --git a/packages/app/components/authorization/AuthorizationMessage.tsx b/packages/app/components/authorization/AuthorizationMessage.tsx
index c57c342f3..64fb6d3d3 100644
--- a/packages/app/components/authorization/AuthorizationMessage.tsx
+++ b/packages/app/components/authorization/AuthorizationMessage.tsx
@@ -1,34 +1,34 @@
-'use client'
-import React, { useEffect } from 'react'
-import { SignInUserButton } from '../misc/SignInUserButton'
+'use client';
+import React, { useEffect } from 'react';
+import { SignInUserButton } from '../misc/SignInUserButton';
 import {
   Card,
   CardHeader,
   CardDescription,
   CardTitle,
   CardContent,
-} from '@/components/ui/card'
+} from '@/components/ui/card';
 
-import LoginBackground from '@/public/login-background.png'
-import Image from 'next/image'
+import LoginBackground from '@/public/login-background.png';
+import Image from 'next/image';
 
-import { usePrivy } from '@privy-io/react-auth'
-import { toast } from 'sonner'
+import { usePrivy } from '@privy-io/react-auth';
+import { toast } from 'sonner';
 
-import Link from 'next/link'
-import SignInWithSocials from './SignInWithSocials'
+import Link from 'next/link';
+import SignInWithSocials from './SignInWithSocials';
 
 const AuthorizationMessage = () => {
-  const { ready, authenticated, login } = usePrivy()
+  const { ready, authenticated, login } = usePrivy();
 
   useEffect(() => {
     if (ready && !authenticated) {
-      login()
+      login();
     }
     if (authenticated) {
-      toast.message('Redirecting to Studio...')
+      toast.message('Redirecting to Studio...');
     }
-  }, [ready, authenticated])
+  }, [ready, authenticated]);
 
   return (
     <div className="flex h-screen w-screen flex-row">
@@ -76,7 +76,7 @@ const AuthorizationMessage = () => {
       </div>
       <div></div>
     </div>
-  )
-}
+  );
+};
 
-export default AuthorizationMessage
+export default AuthorizationMessage;
diff --git a/packages/app/components/authorization/CheckAuthorization.tsx b/packages/app/components/authorization/CheckAuthorization.tsx
index 1989e1c0c..f7eaf49f5 100644
--- a/packages/app/components/authorization/CheckAuthorization.tsx
+++ b/packages/app/components/authorization/CheckAuthorization.tsx
@@ -1,10 +1,10 @@
-import { apiUrl } from '@/lib/utils/utils'
-import { cookies } from 'next/headers'
+import { apiUrl } from '@/lib/utils/utils';
+import { cookies } from 'next/headers';
 
 const CheckAuthorization = async () => {
-  const privyToken = cookies().get('privy-token')
-  const userSession = cookies().get('user-session')
-  const userAddress = cookies().get('user-address')
+  const privyToken = cookies().get('privy-token');
+  const userSession = cookies().get('user-session');
+  const userAddress = cookies().get('user-address');
   const res = await fetch(`${apiUrl()}/auth/verify-token`, {
     method: 'POST',
     body: JSON.stringify({
@@ -12,16 +12,16 @@ const CheckAuthorization = async () => {
     }),
     credentials: 'include',
     headers: { 'Content-Type': 'application/json' },
-  })
-  const resData = await res.json()
+  });
+  const resData = await res.json();
 
   const isAuthorized =
     !!userAddress?.value &&
     !!privyToken?.value &&
     !!userSession?.value &&
-    resData.data
+    resData.data;
 
-  return isAuthorized
-}
+  return isAuthorized;
+};
 
-export default CheckAuthorization
+export default CheckAuthorization;
diff --git a/packages/app/components/authorization/SignInWithSocials.tsx b/packages/app/components/authorization/SignInWithSocials.tsx
index 7dfc81676..5178391a7 100644
--- a/packages/app/components/authorization/SignInWithSocials.tsx
+++ b/packages/app/components/authorization/SignInWithSocials.tsx
@@ -1,28 +1,29 @@
-'use client'
-import { Button } from '../ui/button'
-import farcasterLogo from '@/public/farcaster-transparent-white.png'
-import lensLogo from '@/public/lens-green.png'
-import twitterLogo from '@/public/twitter-white.png'
-import Image from 'next/image'
-import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog'
-import { useLoginWithEmail, usePrivy } from '@privy-io/react-auth'
-import { useState } from 'react'
-import { Input } from '../ui/input'
+'use client';
+import { Button } from '../ui/button';
+import farcasterLogo from '@/public/farcaster-transparent-white.png';
+import lensLogo from '@/public/lens-green.png';
+import twitterLogo from '@/public/twitter-white.png';
+import Image from 'next/image';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog';
+import { useLoginWithEmail, usePrivy } from '@privy-io/react-auth';
+import { useState } from 'react';
+import { Input } from '../ui/input';
 const SignInWithSocials = () => {
   // Local State
-  const [email, setEmail] = useState('')
-  const [code, setCode] = useState('')
+  const [email, setEmail] = useState('');
+  const [code, setCode] = useState('');
 
   // Privy
-  const { ready, authenticated } = usePrivy()
-  const { sendCode, loginWithCode } = useLoginWithEmail()
+  const { ready, authenticated } = usePrivy();
+  const { sendCode, loginWithCode } = useLoginWithEmail();
   return (
     <div className="flex w-full flex-col space-y-4">
       <Dialog>
         <DialogTrigger>
           <Button
             disabled
-            className="w-full rounded-xl border bg-white text-black">
+            className="w-full rounded-xl border bg-white text-black"
+          >
             Continue with Google
           </Button>
         </DialogTrigger>
@@ -35,9 +36,7 @@ const SignInWithSocials = () => {
                 onChange={(e) => setEmail(e.currentTarget.value)}
               />
               {/* Once an email has been entered, send the OTP to it on click */}
-              <Button onClick={() => sendCode({ email })}>
-                Send Code
-              </Button>
+              <Button onClick={() => sendCode({ email })}>Send Code</Button>
             </div>
             <div className="flex gap-2">
               {/* Prompt your user to enter the OTP */}
@@ -46,16 +45,15 @@ const SignInWithSocials = () => {
                 onChange={(e) => setCode(e.currentTarget.value)}
               />
               {/* Once an OTP has been entered, submit it to Privy on click */}
-              <Button onClick={() => loginWithCode({ code })}>
-                Log in
-              </Button>
+              <Button onClick={() => loginWithCode({ code })}>Log in</Button>
             </div>
           </div>
         </DialogContent>
       </Dialog>
       <Button
         disabled
-        className="flex w-full flex-row rounded-xl border bg-[#8A63D2] text-white">
+        className="flex w-full flex-row rounded-xl border bg-[#8A63D2] text-white"
+      >
         <Image
           src={farcasterLogo}
           alt="farcaster logo "
@@ -66,13 +64,9 @@ const SignInWithSocials = () => {
       </Button>
       <Button
         disabled
-        className="flex w-full flex-row rounded-xl border bg-black text-white">
-        <Image
-          src={twitterLogo}
-          alt="twitter logo "
-          width={20}
-          height={20}
-        />
+        className="flex w-full flex-row rounded-xl border bg-black text-white"
+      >
+        <Image src={twitterLogo} alt="twitter logo " width={20} height={20} />
         <p className="mx-2">Continue with Twitter</p>
       </Button>
       {/* <Button className="flex flex-row w-full bg-black text-white rounded-xl border">
@@ -85,7 +79,7 @@ const SignInWithSocials = () => {
         <p className="mx-2">Continue with Lens</p>
       </Button> */}
     </div>
-  )
-}
+  );
+};
 
-export default SignInWithSocials
+export default SignInWithSocials;
diff --git a/packages/app/components/misc/ConnectWalletButton.tsx b/packages/app/components/misc/ConnectWalletButton.tsx
index 7f2c82238..39ac8aef6 100644
--- a/packages/app/components/misc/ConnectWalletButton.tsx
+++ b/packages/app/components/misc/ConnectWalletButton.tsx
@@ -1,9 +1,9 @@
-'use client'
-import { ConnectKitButton } from 'connectkit'
-import { Button } from '@/components/ui/button'
+'use client';
+import { ConnectKitButton } from 'connectkit';
+import { Button } from '@/components/ui/button';
 interface ConnectWalletButtonProps {
-  className?: string
-  btnText?: string
+  className?: string;
+  btnText?: string;
 }
 
 export const ConnectWalletButton = ({
@@ -14,16 +14,13 @@ export const ConnectWalletButton = ({
     <ConnectKitButton.Custom>
       {({ isConnected, show, truncatedAddress, ensName }) => {
         return (
-          <Button
-            variant={'primary'}
-            onClick={show}
-            className={className}>
+          <Button variant={'primary'} onClick={show} className={className}>
             <span className="px-2 md:px-0">
               {isConnected ? ensName ?? truncatedAddress : btnText}
             </span>
           </Button>
-        )
+        );
       }}
     </ConnectKitButton.Custom>
-  )
-}
+  );
+};
diff --git a/packages/app/components/misc/CopyString.tsx b/packages/app/components/misc/CopyString.tsx
index bfdbcddfb..20c405142 100644
--- a/packages/app/components/misc/CopyString.tsx
+++ b/packages/app/components/misc/CopyString.tsx
@@ -1,28 +1,23 @@
-'use client'
+'use client';
 
-import { toast } from 'sonner'
-import { Copy } from 'lucide-react'
+import { toast } from 'sonner';
+import { Copy } from 'lucide-react';
 
-const CopyItem = ({
-  item,
-  itemName,
-}: {
-  item: string
-  itemName: string
-}) => {
+const CopyItem = ({ item, itemName }: { item: string; itemName: string }) => {
   const handleCopy = () => {
-    navigator.clipboard.writeText(item)
-    toast.success(`Copied ${itemName} to your clipboard`)
-  }
+    navigator.clipboard.writeText(item);
+    toast.success(`Copied ${itemName} to your clipboard`);
+  };
 
   return (
     <div
       className="group flex cursor-pointer items-center hover:bg-gray-200"
-      onClick={handleCopy}>
+      onClick={handleCopy}
+    >
       <span className="m-2 truncate">{item}</span>
       <Copy className="mr-2 p-1 opacity-0 group-hover:opacity-100" />
     </div>
-  )
-}
+  );
+};
 
-export default CopyItem
+export default CopyItem;
diff --git a/packages/app/components/misc/CopyText.tsx b/packages/app/components/misc/CopyText.tsx
index 207d4b220..bd28c6beb 100644
--- a/packages/app/components/misc/CopyText.tsx
+++ b/packages/app/components/misc/CopyText.tsx
@@ -1,19 +1,20 @@
-'use client'
-import { copyToClipboard } from '@/lib/utils/utils'
-import { Copy } from 'lucide-react'
+'use client';
+import { copyToClipboard } from '@/lib/utils/utils';
+import { Copy } from 'lucide-react';
 
 const CopyText = ({
   label,
   text = '',
   width = '450px',
 }: {
-  label: string
-  text?: string
-  width?: string
+  label: string;
+  text?: string;
+  width?: string;
 }) => (
   <div
     style={{ width: width }}
-    className="flex items-center justify-between overflow-hidden rounded-lg bg-muted pr-2">
+    className="flex items-center justify-between overflow-hidden rounded-lg bg-muted pr-2"
+  >
     <div className="flex items-center gap-1 text-muted-foreground">
       <div className="border-red border-r p-2 text-sm">
         <p>{label}</p>
@@ -25,5 +26,5 @@ const CopyText = ({
       className="h-5 w-5 cursor-pointer text-primary"
     />
   </div>
-)
-export default CopyText
+);
+export default CopyText;
diff --git a/packages/app/components/misc/MarkdownDisplay.tsx b/packages/app/components/misc/MarkdownDisplay.tsx
index 298215454..58eb79532 100644
--- a/packages/app/components/misc/MarkdownDisplay.tsx
+++ b/packages/app/components/misc/MarkdownDisplay.tsx
@@ -1,5 +1,5 @@
-'use client'
-import MDEditor from '@uiw/react-md-editor'
+'use client';
+import MDEditor from '@uiw/react-md-editor';
 
 const MarkdownDisplay = ({ content }: { content: string }) => {
   return (
@@ -11,7 +11,7 @@ const MarkdownDisplay = ({ content }: { content: string }) => {
         background: 'transparent',
       }}
     />
-  )
-}
+  );
+};
 
-export default MarkdownDisplay
+export default MarkdownDisplay;
diff --git a/packages/app/components/misc/PopoverActions.tsx b/packages/app/components/misc/PopoverActions.tsx
index 12f0fbbe7..9ff2f853e 100644
--- a/packages/app/components/misc/PopoverActions.tsx
+++ b/packages/app/components/misc/PopoverActions.tsx
@@ -1,45 +1,35 @@
-'use client'
+'use client';
 
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
-import {
-  Share2,
-  EllipsisVerticalIcon,
-  Layers,
-  Flag,
-} from 'lucide-react'
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
-import { IExtendedSession } from '@/lib/types'
-import { Dialog, DialogTrigger } from '@/components/ui/dialog'
-import { ShareModalContent } from '@/components/misc/interact/ShareButton'
+} from '@/components/ui/popover';
+import { Share2, EllipsisVerticalIcon, Layers, Flag } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { IExtendedSession } from '@/lib/types';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import { ShareModalContent } from '@/components/misc/interact/ShareButton';
 
 const PopoverActions = ({
   session,
   organizationSlug,
 }: {
-  session: IExtendedSession
-  organizationSlug?: string
+  session: IExtendedSession;
+  organizationSlug?: string;
 }) => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <EllipsisVerticalIcon
-          className="cursor-pointer text-black"
-          size={30}
-        />
+        <EllipsisVerticalIcon className="cursor-pointer text-black" size={30} />
       </PopoverTrigger>
       <PopoverContent className="mr-auto w-60">
         <div className="grid gap-4">
           <div className="grid gap-2">
             <Dialog>
               <DialogTrigger>
-                <Button
-                  variant={'outline'}
-                  className="w-full space-x-2">
+                <Button variant={'outline'} className="w-full space-x-2">
                   <Share2 />
                   <p className="">Share</p>
                 </Button>
@@ -47,13 +37,12 @@ const PopoverActions = ({
               <ShareModalContent />
             </Dialog>
             {session?.nftCollections?.[0] && (
-              <Button
-                className="w-full space-x-2"
-                variant={'outline'}>
+              <Button className="w-full space-x-2" variant={'outline'}>
                 <Layers />
                 <Link
                   href={`/${organizationSlug}/collection?collectionId=${session?.nftCollections[0]}`}
-                  className="">
+                  className=""
+                >
                   View Collection
                 </Link>
               </Button>
@@ -64,7 +53,8 @@ const PopoverActions = ({
             </Button>
             <Button
               className="w-full space-x-2 text-red-500"
-              variant={'outline'}>
+              variant={'outline'}
+            >
               <Flag />
               <p className="">Report</p>
             </Button>
@@ -72,7 +62,7 @@ const PopoverActions = ({
         </div>
       </PopoverContent>
     </Popover>
-  )
-}
+  );
+};
 
-export default PopoverActions
+export default PopoverActions;
diff --git a/packages/app/components/misc/SearchBar/index.tsx b/packages/app/components/misc/SearchBar/index.tsx
index 43a9f2138..933d091b5 100644
--- a/packages/app/components/misc/SearchBar/index.tsx
+++ b/packages/app/components/misc/SearchBar/index.tsx
@@ -1,24 +1,24 @@
-'use client'
+'use client';
 
-import React, { useState, useEffect, useRef } from 'react'
-import { Input } from '@/components/ui/input'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import useDebounce from '@/lib/hooks/useDebounce'
-import { apiUrl, archivePath } from '@/lib/utils/utils'
-import useClickOutside from '@/lib/hooks/useClickOutside'
-import { useRouter } from 'next/navigation'
-import { IExtendedSession } from '@/lib/types'
-import { LoaderCircle } from 'lucide-react'
+import React, { useState, useEffect, useRef } from 'react';
+import { Input } from '@/components/ui/input';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import useDebounce from '@/lib/hooks/useDebounce';
+import { apiUrl, archivePath } from '@/lib/utils/utils';
+import useClickOutside from '@/lib/hooks/useClickOutside';
+import { useRouter } from 'next/navigation';
+import { IExtendedSession } from '@/lib/types';
+import { LoaderCircle } from 'lucide-react';
 
 interface IEventSearchResult {
-  id: string
-  name: string
-  slug: string
+  id: string;
+  name: string;
+  slug: string;
 }
 
 interface ISessionSearchResult {
-  id: string
-  name: string
+  id: string;
+  name: string;
 }
 
 export default function SearchBar({
@@ -27,78 +27,72 @@ export default function SearchBar({
   isMobile = false,
   isStudio = false,
 }: {
-  organizationSlug: string
-  searchVisible?: boolean
-  isMobile?: boolean
-  isStudio?: boolean
+  organizationSlug: string;
+  searchVisible?: boolean;
+  isMobile?: boolean;
+  isStudio?: boolean;
 }): JSX.Element {
   const { searchParams, handleTermChange: handleStudioTermChange } =
-    useSearchParams()
-  const [isLoading, setIsLoading] = useState<boolean>(false)
+    useSearchParams();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [searchQuery, setSearchQuery] = useState<string>(
     searchParams.get('searchQuery') || ''
-  )
-  const [isOpened, setIsOpened] = useState<boolean>(false)
-  const [searchResults, setSearchResults] = useState<
-    IExtendedSession[]
-  >([])
-  const [eventResults, setEventResults] = useState<
-    IEventSearchResult[]
-  >([])
-  const debouncedSearchQuery = useDebounce(searchQuery, 500)
+  );
+  const [isOpened, setIsOpened] = useState<boolean>(false);
+  const [searchResults, setSearchResults] = useState<IExtendedSession[]>([]);
+  const [eventResults, setEventResults] = useState<IEventSearchResult[]>([]);
+  const debouncedSearchQuery = useDebounce(searchQuery, 500);
 
-  const dropdownRef = useRef<HTMLDivElement>(null) // ref for the dropdown
-  const inputRef = useRef<HTMLInputElement>(null) // ref for the input field
-  const router = useRouter()
+  const dropdownRef = useRef<HTMLDivElement>(null); // ref for the dropdown
+  const inputRef = useRef<HTMLInputElement>(null); // ref for the input field
+  const router = useRouter();
 
   useEffect(() => {
     if (debouncedSearchQuery) {
-      setIsLoading(true)
+      setIsLoading(true);
       fetch(
         `${apiUrl()}/sessions/${organizationSlug}/search?search=${debouncedSearchQuery}&onlyVideos=true`
       )
         .then((res) => res.json())
         .then((data) => {
-          const items = data.data
-            .map((obj: any) => obj.item)
-            .slice(0, 10)
+          const items = data.data.map((obj: any) => obj.item).slice(0, 10);
 
-          setSearchResults(items)
-          setIsLoading(false)
-        })
+          setSearchResults(items);
+          setIsLoading(false);
+        });
     }
-  }, [debouncedSearchQuery])
+  }, [debouncedSearchQuery]);
 
   useEffect(() => {
     if (searchVisible && isMobile && inputRef.current) {
-      inputRef.current.focus()
+      inputRef.current.focus();
     }
-  }, [searchVisible])
+  }, [searchVisible]);
 
-  useClickOutside(dropdownRef, () => setIsOpened(false))
+  useClickOutside(dropdownRef, () => setIsOpened(false));
 
   const handleTermChange = (session: IExtendedSession) => {
     router.push(
       isStudio
         ? `/studio/${organizationSlug}/library/${session._id.toString()}`
         : `/${organizationSlug}/watch?session=${session._id.toString()}`
-    )
-    return
-  }
+    );
+    return;
+  };
 
   const handleEventChange = (term: string) => {
     window.location.href = archivePath({
       organizationSlug: organizationSlug,
       event: term,
-    })
-  }
+    });
+  };
 
   return (
     <div className="relative flex w-full max-w-[500px] flex-col items-center justify-center p-2">
       <Input
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
-            setIsOpened(false)
+            setIsOpened(false);
             isStudio
               ? handleStudioTermChange([
                   {
@@ -115,7 +109,7 @@ export default function SearchBar({
                     organizationSlug: organizationSlug,
                     searchQuery: searchQuery,
                   })
-                )
+                );
           }
         }}
         ref={inputRef}
@@ -124,13 +118,14 @@ export default function SearchBar({
         placeholder="Search..."
         value={searchQuery}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          setSearchQuery(e.target.value)
+          setSearchQuery(e.target.value);
         }}
       />
       {isOpened && debouncedSearchQuery && (
         <div
           ref={dropdownRef}
-          className="absolute top-[55px] w-full max-w-[500px] bg-secondary p-2">
+          className="absolute top-[55px] w-full max-w-[500px] bg-secondary p-2"
+        >
           {isLoading ? (
             <span>Loading...</span>
           ) : (
@@ -141,11 +136,12 @@ export default function SearchBar({
                   {searchResults.map((result) => (
                     <div
                       onClick={() => {
-                        handleTermChange(result)
-                        setIsOpened(false)
+                        handleTermChange(result);
+                        setIsOpened(false);
                       }}
                       className="cursor-pointer p-1 hover:bg-gray-100"
-                      key={result._id.toString()}>
+                      key={result._id.toString()}
+                    >
                       {result.name}
                     </div>
                   ))}
@@ -172,5 +168,5 @@ export default function SearchBar({
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/packages/app/components/misc/SignInUserButton.tsx b/packages/app/components/misc/SignInUserButton.tsx
index 10005930d..15d24e736 100644
--- a/packages/app/components/misc/SignInUserButton.tsx
+++ b/packages/app/components/misc/SignInUserButton.tsx
@@ -1,26 +1,26 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth'
-import { deleteSession, storeSession } from '@/lib/actions/auth'
-import { apiUrl } from '@/lib/utils/utils'
-import { Loader2 } from 'lucide-react'
-import { useState } from 'react'
+'use client';
+import { Button } from '@/components/ui/button';
+import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth';
+import { deleteSession, storeSession } from '@/lib/actions/auth';
+import { apiUrl } from '@/lib/utils/utils';
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
 
 interface SignInUserButtonProps {
-  className?: string
-  btnText?: string
+  className?: string;
+  btnText?: string;
 }
 
 export const SignInUserButton = ({
   btnText = 'Sign in',
   className,
 }: SignInUserButtonProps) => {
-  const { ready, authenticated } = usePrivy()
-  const [isLoading, setIsLoading] = useState(false)
+  const { ready, authenticated } = usePrivy();
+  const [isLoading, setIsLoading] = useState(false);
 
   const getSession = async () => {
-    const privyToken = localStorage.getItem('privy:token')
-    const token = privyToken ? JSON.parse(privyToken) : null
+    const privyToken = localStorage.getItem('privy:token');
+    const token = privyToken ? JSON.parse(privyToken) : null;
     const res = await fetch(`${apiUrl()}/auth/login`, {
       method: 'POST',
       body: JSON.stringify({
@@ -28,46 +28,47 @@ export const SignInUserButton = ({
       }),
       credentials: 'include',
       headers: { 'Content-Type': 'application/json' },
-    })
-    const resData = await res.json()
+    });
+    const resData = await res.json();
     storeSession({
       token: resData?.data?.token,
       address: resData?.data?.user?.walletAddress,
-    })
-  }
+    });
+  };
 
   const { login } = useLogin({
     onComplete: () => {
-      getSession()
-      setIsLoading(false)
+      getSession();
+      setIsLoading(false);
     },
     onError: (error) => {
-      deleteSession()
-      setIsLoading(false)
+      deleteSession();
+      setIsLoading(false);
     },
-  })
+  });
 
   const { logout } = useLogout({
     onSuccess: () => {
-      deleteSession()
-      setIsLoading(false)
+      deleteSession();
+      setIsLoading(false);
     },
-  })
+  });
 
   const handleClick = () => {
-    setIsLoading(true)
+    setIsLoading(true);
     if (authenticated) {
-      logout()
+      logout();
     } else {
-      login()
+      login();
     }
-  }
+  };
 
   return (
     <Button
       onClick={handleClick}
       className={className}
-      disabled={!ready || isLoading}>
+      disabled={!ready || isLoading}
+    >
       {!ready || isLoading ? (
         <Loader2 className="h-4 w-4 animate-spin" />
       ) : authenticated ? (
@@ -76,5 +77,5 @@ export const SignInUserButton = ({
         btnText
       )}
     </Button>
-  )
-}
+  );
+};
diff --git a/packages/app/components/misc/Support/SupportForm.tsx b/packages/app/components/misc/Support/SupportForm.tsx
index e677e0413..4a96c9ac4 100644
--- a/packages/app/components/misc/Support/SupportForm.tsx
+++ b/packages/app/components/misc/Support/SupportForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import {
   Form,
   FormControl,
@@ -6,14 +6,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '../../ui/form'
-import { Textarea } from '../../ui/textarea'
-import { Button } from '../../ui/button'
-import { Loader2 } from 'lucide-react'
-import { UseFormReturn } from 'react-hook-form'
-import { Input } from '@/components/ui/input'
-import { getFormSubmitStatus } from '@/lib/utils/utils'
-import ImageUpload from '../form/imageUpload'
+} from '../../ui/form';
+import { Textarea } from '../../ui/textarea';
+import { Button } from '../../ui/button';
+import { Loader2 } from 'lucide-react';
+import { UseFormReturn } from 'react-hook-form';
+import { Input } from '@/components/ui/input';
+import { getFormSubmitStatus } from '@/lib/utils/utils';
+import ImageUpload from '../form/imageUpload';
 
 const SupportForm = ({
   form,
@@ -22,24 +22,25 @@ const SupportForm = ({
   handleClose,
 }: {
   form: UseFormReturn<{
-    message: string
-    telegram?: string
-    email?: string
-    image?: string
-  }>
-  isLoading: boolean
-  onSubmit: (values: { message: string }) => void
-  handleClose: () => void
+    message: string;
+    telegram?: string;
+    email?: string;
+    image?: string;
+  }>;
+  isLoading: boolean;
+  onSubmit: (values: { message: string }) => void;
+  handleClose: () => void;
 }) => {
   return (
     <div>
       <Form {...form}>
         <form
           onError={(errors) => {
-            alert(errors)
+            alert(errors);
           }}
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-4">
+          className="space-y-4"
+        >
           <FormField
             control={form.control}
             name="email"
@@ -112,17 +113,18 @@ const SupportForm = ({
               className="w-full"
               onClick={handleClose}
               type="button"
-              variant={'outline'}>
+              variant={'outline'}
+            >
               Cancel
             </Button>
             <Button
               className="w-full"
               type="submit"
-              disabled={getFormSubmitStatus(form)}>
+              disabled={getFormSubmitStatus(form)}
+            >
               {isLoading ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />{' '}
-                  Please wait
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
                 </>
               ) : (
                 'Send'
@@ -132,7 +134,7 @@ const SupportForm = ({
         </form>
       </Form>{' '}
     </div>
-  )
-}
+  );
+};
 
-export default SupportForm
+export default SupportForm;
diff --git a/packages/app/components/misc/Support/index.tsx b/packages/app/components/misc/Support/index.tsx
index cd2c6a2f5..497a5fe28 100644
--- a/packages/app/components/misc/Support/index.tsx
+++ b/packages/app/components/misc/Support/index.tsx
@@ -1,29 +1,29 @@
-'use client'
-import React, { useState } from 'react'
-import { MessageCircleQuestion, X } from 'lucide-react'
-import { createSupportTicketAction } from '@/lib/actions/support'
-import { supportSchema } from '@/lib/schema'
-import * as z from 'zod'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { toast } from 'sonner'
-import { useSIWE } from 'connectkit'
-import SupportForm from './SupportForm'
-import { Button } from '../../ui/button'
-import { SignInUserButton } from '../SignInUserButton'
+'use client';
+import React, { useState } from 'react';
+import { MessageCircleQuestion, X } from 'lucide-react';
+import { createSupportTicketAction } from '@/lib/actions/support';
+import { supportSchema } from '@/lib/schema';
+import * as z from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { useSIWE } from 'connectkit';
+import SupportForm from './SupportForm';
+import { Button } from '../../ui/button';
+import { SignInUserButton } from '../SignInUserButton';
 import {
   Credenza,
   CredenzaContent,
   CredenzaTitle,
   CredenzaTrigger,
-} from '@/components/ui/crezenda'
-import { usePrivy } from '@privy-io/react-auth'
+} from '@/components/ui/crezenda';
+import { usePrivy } from '@privy-io/react-auth';
 
 const Support = () => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [messageSent, setMessageSent] = useState(false)
-  const { authenticated } = usePrivy()
-  const [open, setOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
+  const [messageSent, setMessageSent] = useState(false);
+  const { authenticated } = usePrivy();
+  const [open, setOpen] = useState(false);
   const form = useForm<z.infer<typeof supportSchema>>({
     resolver: zodResolver(supportSchema),
     defaultValues: {
@@ -32,58 +32,58 @@ const Support = () => {
       email: '',
       image: '',
     },
-  })
+  });
 
   function onSubmit(values: z.infer<typeof supportSchema>) {
-    setIsLoading(true)
+    setIsLoading(true);
     if (!authenticated) {
-      toast.error('No wallet address found')
-      return
+      toast.error('No wallet address found');
+      return;
     }
     createSupportTicketAction({
       ...values,
     })
       .then(() => {
-        setMessageSent(true)
-        toast.success('ticket created')
-        form.reset()
+        setMessageSent(true);
+        toast.success('ticket created');
+        form.reset();
       })
       .catch(() => {
-        toast.error('Error creating ticket')
+        toast.error('Error creating ticket');
       })
       .finally(() => {
-        setIsLoading(false)
-      })
+        setIsLoading(false);
+      });
   }
 
   const handleClose = () => {
-    setMessageSent(false)
-    setOpen(false)
-  }
+    setMessageSent(false);
+    setOpen(false);
+  };
   return (
     <Credenza open={open} onOpenChange={setOpen}>
       <CredenzaContent className="!z-[999999] max-h-[700px] p-6 md:overflow-auto">
         <CredenzaTitle>Contact Support</CredenzaTitle>
         <div>
-          {messageSent && (
-            <p className="pb-2 font-bold">Message sent 🎉!!</p>
-          )}
+          {messageSent && <p className="pb-2 font-bold">Message sent 🎉!!</p>}
           <p className="pb-2">
             Feel free to become a part of our{' '}
             <a
               className="font-semibold text-primary"
               href="https://t.me/+p7TgdE06G-4zZDU0"
               target="_blank"
-              rel="noopener noopener">
+              rel="noopener noopener"
+            >
               Telegram support
             </a>{' '}
-            channel to stay informed about ticket updates, or
-            alternatively, you can raise an issue on{' '}
+            channel to stay informed about ticket updates, or alternatively, you
+            can raise an issue on{' '}
             <a
               className="font-semibold text-primary"
               href="https://github.com/streamethorg/streameth-platform/issues"
               target="_blank"
-              rel="noopener noopener">
+              rel="noopener noopener"
+            >
               GitHub.
             </a>
           </p>
@@ -120,7 +120,7 @@ const Support = () => {
         </div>
       </CredenzaTrigger>
     </Credenza>
-  )
-}
+  );
+};
 
-export default Support
+export default Support;
diff --git a/packages/app/components/misc/Table/TableSkeleton.tsx b/packages/app/components/misc/Table/TableSkeleton.tsx
index 9c7df8693..73e3a9a57 100644
--- a/packages/app/components/misc/Table/TableSkeleton.tsx
+++ b/packages/app/components/misc/Table/TableSkeleton.tsx
@@ -5,7 +5,7 @@ import {
   TableRow,
   TableBody,
   TableCell,
-} from '@/components/ui/table'
+} from '@/components/ui/table';
 
 const TableSkeleton = () => {
   return (
@@ -51,7 +51,7 @@ const TableSkeleton = () => {
         ))}
       </TableBody>
     </Table>
-  )
-}
+  );
+};
 
-export default TableSkeleton
+export default TableSkeleton;
diff --git a/packages/app/components/misc/TableSort.tsx b/packages/app/components/misc/TableSort.tsx
index 73e08373c..913a2520c 100644
--- a/packages/app/components/misc/TableSort.tsx
+++ b/packages/app/components/misc/TableSort.tsx
@@ -1,47 +1,35 @@
-'use client'
-import useSearchParams from '@/lib/hooks/useSearchParams'
-import { eSort } from '@/lib/types'
-import { ChevronsUpDown } from 'lucide-react'
+'use client';
+import useSearchParams from '@/lib/hooks/useSearchParams';
+import { eSort } from '@/lib/types';
+import { ChevronsUpDown } from 'lucide-react';
 
-import React from 'react'
+import React from 'react';
 
-const TableSort = ({
-  title,
-  sortBy,
-}: {
-  title: string
-  sortBy: string
-}) => {
-  const { searchParams, handleTermChange } = useSearchParams()
-  const currentSort = searchParams.get('sort') as eSort
+const TableSort = ({ title, sortBy }: { title: string; sortBy: string }) => {
+  const { searchParams, handleTermChange } = useSearchParams();
+  const currentSort = searchParams.get('sort') as eSort;
 
   const handleSortClick = () => {
-    let newSort
+    let newSort;
     if (sortBy === 'date') {
       newSort =
-        currentSort === eSort.asc_date
-          ? eSort.desc_date
-          : eSort.asc_date
+        currentSort === eSort.asc_date ? eSort.desc_date : eSort.asc_date;
     } else if (sortBy === 'name') {
       newSort =
-        currentSort === eSort.asc_alpha
-          ? eSort.desc_alpha
-          : eSort.asc_alpha
+        currentSort === eSort.asc_alpha ? eSort.desc_alpha : eSort.asc_alpha;
     }
 
-    handleTermChange([{ key: 'sort', value: newSort as string }])
-  }
+    handleTermChange([{ key: 'sort', value: newSort as string }]);
+  };
   return (
     <div
       className="flex items-center justify-start space-x-2"
-      onClick={handleSortClick}>
+      onClick={handleSortClick}
+    >
       <p>{title}</p>
-      <ChevronsUpDown
-        size={15}
-        className="rounded-md hover:bg-gray-200"
-      />
+      <ChevronsUpDown size={15} className="rounded-md hover:bg-gray-200" />
     </div>
-  )
-}
+  );
+};
 
-export default TableSort
+export default TableSort;
diff --git a/packages/app/components/misc/UserDropdown.tsx b/packages/app/components/misc/UserDropdown.tsx
index a2554689e..4b71ed1f6 100644
--- a/packages/app/components/misc/UserDropdown.tsx
+++ b/packages/app/components/misc/UserDropdown.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -6,20 +6,20 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import SwitchOrganization from '@/app/studio/[organization]/components/SwitchOrganization'
-import { ConnectWalletButton } from './ConnectWalletButton'
-import { SignInUserButton } from './SignInUserButton'
-import { Button } from '../ui/button'
-import { IExtendedOrganization } from '@/lib/types'
-import { Label } from '@radix-ui/react-dropdown-menu'
+} from '@/components/ui/dropdown-menu';
+import SwitchOrganization from '@/app/studio/[organization]/components/SwitchOrganization';
+import { ConnectWalletButton } from './ConnectWalletButton';
+import { SignInUserButton } from './SignInUserButton';
+import { Button } from '../ui/button';
+import { IExtendedOrganization } from '@/lib/types';
+import { Label } from '@radix-ui/react-dropdown-menu';
 
 const UserDropdown = ({
   organization,
   organizations,
 }: {
-  organization?: string
-  organizations?: IExtendedOrganization[]
+  organization?: string;
+  organizations?: IExtendedOrganization[];
 }) => {
   return (
     <DropdownMenu>
@@ -41,7 +41,7 @@ const UserDropdown = ({
         </div>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
-}
+  );
+};
 
-export default UserDropdown
+export default UserDropdown;
diff --git a/packages/app/components/misc/VideoCard/LivestreamCard.tsx b/packages/app/components/misc/VideoCard/LivestreamCard.tsx
index e8efb783c..3121670f9 100644
--- a/packages/app/components/misc/VideoCard/LivestreamCard.tsx
+++ b/packages/app/components/misc/VideoCard/LivestreamCard.tsx
@@ -1,18 +1,14 @@
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import {
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { formatDate } from '@/lib/utils/time'
-import Link from 'next/link'
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatDate } from '@/lib/utils/time';
+import Link from 'next/link';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { EllipsisVertical } from 'lucide-react'
-import { IExtendedStage } from '@/lib/types'
+} from '@/components/ui/dropdown-menu';
+import { EllipsisVertical } from 'lucide-react';
+import { IExtendedStage } from '@/lib/types';
 
 const LivestreamCard = ({
   name,
@@ -23,13 +19,13 @@ const LivestreamCard = ({
   DropdownMenuItems,
   livestream,
 }: {
-  name: string
-  thumbnail: string
-  date: string
-  showDate?: boolean
-  link: string
-  DropdownMenuItems?: React.ReactNode
-  livestream: IExtendedStage
+  name: string;
+  thumbnail: string;
+  date: string;
+  showDate?: boolean;
+  link: string;
+  DropdownMenuItems?: React.ReactNode;
+  livestream: IExtendedStage;
 }) => {
   return (
     <div className="flex min-h-full w-full flex-row space-y-2 rounded-xl uppercase md:flex-col">
@@ -56,10 +52,7 @@ const LivestreamCard = ({
                       new Date(livestream.streamEndDate),
                       'ddd. MMM. D, YYYY, h:mm a'
                     )}`
-                  : formatDate(
-                      new Date(date),
-                      'ddd. MMM. D, YYYY, h:mm a'
-                    )}
+                  : formatDate(new Date(date), 'ddd. MMM. D, YYYY, h:mm a')}
               </CardDescription>
             </div>
           )}
@@ -69,14 +62,12 @@ const LivestreamCard = ({
             <DropdownMenuTrigger className="z-10">
               <EllipsisVertical className="mt-2" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              {DropdownMenuItems}
-            </DropdownMenuContent>
+            <DropdownMenuContent>{DropdownMenuItems}</DropdownMenuContent>
           </DropdownMenu>
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default LivestreamCard
+export default LivestreamCard;
diff --git a/packages/app/components/misc/VideoCard/VideoCardProcessing.tsx b/packages/app/components/misc/VideoCard/VideoCardProcessing.tsx
index a5dde1c01..fda2b54de 100644
--- a/packages/app/components/misc/VideoCard/VideoCardProcessing.tsx
+++ b/packages/app/components/misc/VideoCard/VideoCardProcessing.tsx
@@ -1,29 +1,27 @@
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import {
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { IExtendedSession } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import { EllipsisVertical, Loader2 } from 'lucide-react'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { IExtendedSession } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import { EllipsisVertical, Loader2 } from 'lucide-react';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
 
 const VideoCardProcessing = async ({
   session,
 }: {
-  session: IExtendedSession
+  session: IExtendedSession;
 }) => {
-  const thumbnail = (await generateThumbnailAction(session)) || ''
+  const thumbnail = (await generateThumbnailAction(session)) || '';
 
   return (
     <div className="min-h-full w-full animate-pulse rounded-xl uppercase">
       <Thumbnail imageUrl={session.coverImage} fallBack={thumbnail} />
       <div className="flex items-start justify-between">
         <CardHeader
-          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}>
+          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}
+        >
           <CardTitle
-            className={`line-clamp-2 overflow-hidden text-sm capitalize`}>
+            className={`line-clamp-2 overflow-hidden text-sm capitalize`}
+          >
             <div className="flex items-center justify-start space-x-2">
               <Loader2 className="animate-spin" />
               <span>Processing...</span>
@@ -43,7 +41,7 @@ const VideoCardProcessing = async ({
         <EllipsisVertical className="mt-2" />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default VideoCardProcessing
+export default VideoCardProcessing;
diff --git a/packages/app/components/misc/VideoCard/VideoCardSkeleton.tsx b/packages/app/components/misc/VideoCard/VideoCardSkeleton.tsx
index 508b4bda8..b67572f70 100644
--- a/packages/app/components/misc/VideoCard/VideoCardSkeleton.tsx
+++ b/packages/app/components/misc/VideoCard/VideoCardSkeleton.tsx
@@ -1,6 +1,6 @@
-'use client'
+'use client';
 
-import { EllipsisVertical } from 'lucide-react'
+import { EllipsisVertical } from 'lucide-react';
 
 const VideoCardSkeleton = () => {
   return (
@@ -15,8 +15,8 @@ const VideoCardSkeleton = () => {
         <EllipsisVertical className="mt-2" />
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const VideoCardSkeletonMobile = () => {
   return (
@@ -27,7 +27,7 @@ export const VideoCardSkeletonMobile = () => {
         <div className="h-3 w-1/2 rounded bg-gray-300"></div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default VideoCardSkeleton
+export default VideoCardSkeleton;
diff --git a/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx b/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
index a9e199196..bde85f379 100644
--- a/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
+++ b/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
@@ -1,23 +1,19 @@
-'use client'
+'use client';
 
-import Thumbnail from '@/components/misc/VideoCard/thumbnail'
-import {
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
+import Thumbnail from '@/components/misc/VideoCard/thumbnail';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
-import { IExtendedSession } from '@/lib/types'
-import { formatDate } from '@/lib/utils/time'
-import { EllipsisVertical } from 'lucide-react'
-import Link from 'next/link'
-import React, { ReactNode } from 'react'
-import { useEffect, useState } from 'react'
+} from '@/components/ui/dropdown-menu';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
+import { IExtendedSession } from '@/lib/types';
+import { formatDate } from '@/lib/utils/time';
+import { EllipsisVertical } from 'lucide-react';
+import Link from 'next/link';
+import React, { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
 
 const VideoCardWithMenu = ({
   session,
@@ -25,45 +21,41 @@ const VideoCardWithMenu = ({
   DropdownMenuItems,
   link,
 }: {
-  session: IExtendedSession
-  showDate?: boolean
-  DropdownMenuItems?: ReactNode
-  link: string
+  session: IExtendedSession;
+  showDate?: boolean;
+  DropdownMenuItems?: ReactNode;
+  link: string;
 }) => {
-  const [thumbnail, setThumbnail] = useState<string | undefined>(
-    undefined
-  )
+  const [thumbnail, setThumbnail] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     const getThumbnail = async (session: IExtendedSession) => {
       try {
-        const generatedThumbnail =
-          await generateThumbnailAction(session)
-        setThumbnail(generatedThumbnail)
+        const generatedThumbnail = await generateThumbnailAction(session);
+        setThumbnail(generatedThumbnail);
       } catch (error) {
-        console.error('Failed to generate thumbnail:', error)
+        console.error('Failed to generate thumbnail:', error);
       }
-    }
+    };
 
     if (session) {
-      getThumbnail(session)
+      getThumbnail(session);
     }
-  }, [session])
+  }, [session]);
 
   return (
     <div className="flex min-h-full w-full flex-col rounded-xl uppercase">
       <Link className="h-full w-full" href={link}>
-        <Thumbnail
-          imageUrl={session.coverImage}
-          fallBack={thumbnail}
-        />
+        <Thumbnail imageUrl={session.coverImage} fallBack={thumbnail} />
       </Link>
       <div className="flex items-start justify-between">
         <CardHeader
-          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}>
+          className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none`}
+        >
           <Link href={link}>
             <CardTitle
-              className={`line-clamp-2 overflow-hidden text-sm capitalize hover:underline`}>
+              className={`line-clamp-2 overflow-hidden text-sm capitalize hover:underline`}
+            >
               {session.name}
             </CardTitle>
           </Link>
@@ -84,14 +76,12 @@ const VideoCardWithMenu = ({
             <DropdownMenuTrigger className="z-10">
               <EllipsisVertical className="mt-2" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              {DropdownMenuItems}
-            </DropdownMenuContent>
+            <DropdownMenuContent>{DropdownMenuItems}</DropdownMenuContent>
           </DropdownMenu>
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default VideoCardWithMenu
+export default VideoCardWithMenu;
diff --git a/packages/app/components/misc/VideoCard/index.tsx b/packages/app/components/misc/VideoCard/index.tsx
index f24fe1a53..9ab533675 100644
--- a/packages/app/components/misc/VideoCard/index.tsx
+++ b/packages/app/components/misc/VideoCard/index.tsx
@@ -1,41 +1,34 @@
-'use client'
-import { useEffect, useState } from 'react'
-import {
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import Thumbnail from './thumbnail'
-import Image from 'next/image'
-import { IExtendedSession, IExtendedEvent } from '@/lib/types'
-import { generateThumbnailAction } from '@/lib/actions/sessions'
+'use client';
+import { useEffect, useState } from 'react';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import Thumbnail from './thumbnail';
+import Image from 'next/image';
+import { IExtendedSession, IExtendedEvent } from '@/lib/types';
+import { generateThumbnailAction } from '@/lib/actions/sessions';
 
 const VideoCard = ({
   session,
   invertedColors,
   event,
 }: {
-  session: IExtendedSession
-  invertedColors?: boolean
-  event?: IExtendedEvent
+  session: IExtendedSession;
+  invertedColors?: boolean;
+  event?: IExtendedEvent;
 }) => {
-  const headerClass = invertedColors ? ' ' : ''
-  const descriptionClass = invertedColors ? '' : ''
-  const [imageUrl, setImageUrl] = useState<string | undefined>(
-    undefined
-  )
+  const headerClass = invertedColors ? ' ' : '';
+  const descriptionClass = invertedColors ? '' : '';
+  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    generateThumbnailAction(session).then(
-      (url) => url && setImageUrl(url)
-    )
-  }, [])
+    generateThumbnailAction(session).then((url) => url && setImageUrl(url));
+  }, []);
 
   return (
     <div className="min-h-full w-full rounded-xl uppercase">
       <Thumbnail imageUrl={session.coverImage} fallBack={imageUrl} />
       <CardHeader
-        className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none ${headerClass}`}>
+        className={`mt-1 rounded p-1 shadow-none lg:p-2 lg:shadow-none ${headerClass}`}
+      >
         <CardTitle className={`truncate text-sm ${descriptionClass}`}>
           {session.name}
         </CardTitle>
@@ -49,15 +42,14 @@ const VideoCard = ({
               height={24}
               width={24}
             />
-            <CardDescription
-              className={`truncate text-xs ${descriptionClass}`}>
+            <CardDescription className={`truncate text-xs ${descriptionClass}`}>
               {event?.name}
             </CardDescription>
           </div>
         )}
       </CardHeader>
     </div>
-  )
-}
+  );
+};
 
-export default VideoCard
+export default VideoCard;
diff --git a/packages/app/components/misc/VideoCard/thumbnail.tsx b/packages/app/components/misc/VideoCard/thumbnail.tsx
index 7a95a2769..2d2dd5e45 100644
--- a/packages/app/components/misc/VideoCard/thumbnail.tsx
+++ b/packages/app/components/misc/VideoCard/thumbnail.tsx
@@ -1,28 +1,26 @@
-'use client'
-import Image from 'next/image'
-import { useEffect, useState } from 'react'
-import DefaultThumbnail from '@/lib/svg/DefaultThumbnail'
-import { AspectRatio } from '@/components/ui/aspect-ratio'
+'use client';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import DefaultThumbnail from '@/lib/svg/DefaultThumbnail';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
 
 type ThumbnailProps = {
-  imageUrl?: string
-  fallBack?: string
-}
+  imageUrl?: string;
+  fallBack?: string;
+};
 
-export default function Thumbnail({
-  imageUrl,
-  fallBack,
-}: ThumbnailProps) {
-  const srcUrl = imageUrl || fallBack
+export default function Thumbnail({ imageUrl, fallBack }: ThumbnailProps) {
+  const srcUrl = imageUrl || fallBack;
 
   if (!srcUrl) {
     return (
       <AspectRatio
         ratio={16 / 9}
-        className="flex w-full items-center justify-center">
+        className="flex w-full items-center justify-center"
+      >
         <DefaultThumbnail />
       </AspectRatio>
-    )
+    );
   }
 
   return (
@@ -48,5 +46,5 @@ export default function Thumbnail({
         }}
       />
     </div>
-  )
+  );
 }
diff --git a/packages/app/components/misc/VideoDownloadClient.tsx b/packages/app/components/misc/VideoDownloadClient.tsx
index 7948a8ce1..017a1df22 100644
--- a/packages/app/components/misc/VideoDownloadClient.tsx
+++ b/packages/app/components/misc/VideoDownloadClient.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import { Button } from '@/components/ui/button'
-import { LuDownload } from 'react-icons/lu'
-import { toast } from 'sonner'
-import { apiUrl, cn } from '@/lib/utils/utils'
-import { useState } from 'react'
+import { Button } from '@/components/ui/button';
+import { LuDownload } from 'react-icons/lu';
+import { toast } from 'sonner';
+import { apiUrl, cn } from '@/lib/utils/utils';
+import { useState } from 'react';
 
 const VideoDownloadClient = ({
   videoName,
@@ -13,8 +13,8 @@ const VideoDownloadClient = ({
   className,
   collapsable = false,
 }: {
-  videoName: string
-  assetId?: string
+  videoName: string;
+  assetId?: string;
   variant?:
     | 'primary'
     | 'default'
@@ -24,64 +24,63 @@ const VideoDownloadClient = ({
     | 'secondary'
     | 'ghost'
     | 'green'
-    | 'link'
-  className?: string
-  collapsable?: boolean
+    | 'link';
+  className?: string;
+  collapsable?: boolean;
 }) => {
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
   if (!assetId) {
-    return null
+    return null;
   }
   const fetchDownloadUrl = async (assetId: string) => {
-    const response = await fetch(
-      `${apiUrl()}/streams/asset/${assetId}`
-    )
+    const response = await fetch(`${apiUrl()}/streams/asset/${assetId}`);
 
     if (!response.ok) {
-      throw new Error('Failed to fetch asset details')
+      throw new Error('Failed to fetch asset details');
     }
 
-    return (await response.json()).data
-  }
+    return (await response.json()).data;
+  };
 
   const handleDownload = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      const object = await fetchDownloadUrl(assetId)
+      const object = await fetchDownloadUrl(assetId);
 
-      console.log(object.downloadUrl)
+      console.log(object.downloadUrl);
 
-      const link = document.createElement('a')
-      link.href = object.downloadUrl
-      link.setAttribute('download', videoName)
+      const link = document.createElement('a');
+      link.href = object.downloadUrl;
+      link.setAttribute('download', videoName);
 
-      document.body.appendChild(link)
+      document.body.appendChild(link);
 
-      link.click()
+      link.click();
 
-      document.body.removeChild(link)
+      document.body.removeChild(link);
 
-      toast.success('Download started')
-      setLoading(false)
+      toast.success('Download started');
+      setLoading(false);
     } catch (err) {
-      console.log(err)
-      setLoading(false)
-      toast.error('Failed to download video')
+      console.log(err);
+      setLoading(false);
+      toast.error('Failed to download video');
     }
-  }
+  };
 
   return (
     <Button
       disabled={loading}
       onClick={handleDownload}
       variant={variant}
-      className={className}>
+      className={className}
+    >
       <LuDownload className="h-5 w-5" />
       <p className={cn(collapsable && 'flex')}>
         {loading ? 'Downloading...' : 'Download'}
       </p>
     </Button>
-  )
-}
+  );
+};
 
-export default VideoDownloadClient
+export default VideoDownloadClient;
diff --git a/packages/app/components/misc/Videos.tsx b/packages/app/components/misc/Videos.tsx
index 9816bcd3f..04ded3cf8 100644
--- a/packages/app/components/misc/Videos.tsx
+++ b/packages/app/components/misc/Videos.tsx
@@ -1,42 +1,38 @@
-import { IExtendedSession } from '@/lib/types'
-import VideoCardWithMenu from './VideoCard/VideoCardWithMenu'
-import { Suspense } from 'react'
-import {
-  Card,
-  CardHeader,
-  CardDescription,
-} from '@/components/ui/card'
+import { IExtendedSession } from '@/lib/types';
+import VideoCardWithMenu from './VideoCard/VideoCardWithMenu';
+import { Suspense } from 'react';
+import { Card, CardHeader, CardDescription } from '@/components/ui/card';
 export default async function VideoGrid({
   videos,
   OrganizationSlug,
   maxVideos,
   scroll,
 }: {
-  videos: IExtendedSession[]
-  OrganizationSlug?: string
-  maxVideos?: number
-  scroll?: boolean
+  videos: IExtendedSession[];
+  OrganizationSlug?: string;
+  maxVideos?: number;
+  scroll?: boolean;
 }) {
-  if (!videos) return null
+  if (!videos) return null;
 
   return (
     <div className="max-w-screen border-none bg-transparent lg:w-full">
       <div
         className={`${
           scroll ? 'flex flex-row' : 'grid grid-cols-2'
-        } gap-8 gap-x-4 md:grid-cols-3 lg:grid lg:grid-cols-3`}>
+        } gap-8 gap-x-4 md:grid-cols-3 lg:grid lg:grid-cols-3`}
+      >
         {videos.map((video, index) =>
           ({ maxVideos }) && maxVideos && index > maxVideos ? null : (
             <div
               key={video._id}
               className={`${
                 scroll && 'w-[300px]'
-              } h-full flex-initial border-none lg:w-full`}>
+              } h-full flex-initial border-none lg:w-full`}
+            >
               <Suspense
                 fallback={
-                  <Card
-                    key={index}
-                    className="border-none shadow-none">
+                  <Card key={index} className="border-none shadow-none">
                     <div className="min-h-full rounded-xl uppercase">
                       <div className="aspect-video w-full animate-pulse bg-secondary"></div>
                       <CardHeader className="mt-1 rounded bg-white bg-opacity-10 px-2 lg:p-0 lg:py-2">
@@ -47,7 +43,8 @@ export default async function VideoGrid({
                       </CardHeader>
                     </div>
                   </Card>
-                }>
+                }
+              >
                 <VideoCardWithMenu
                   session={video}
                   link={`/${OrganizationSlug}/watch?session=${video._id.toString()}`}
@@ -58,5 +55,5 @@ export default async function VideoGrid({
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/packages/app/components/misc/form/colorPicker.tsx b/packages/app/components/misc/form/colorPicker.tsx
index 1a002eded..ddea4dc97 100644
--- a/packages/app/components/misc/form/colorPicker.tsx
+++ b/packages/app/components/misc/form/colorPicker.tsx
@@ -1,21 +1,21 @@
-'use client'
-import { SketchPicker } from 'react-color'
-import { Input } from '@/components/ui/input'
-import { useState } from 'react'
+'use client';
+import { SketchPicker } from 'react-color';
+import { Input } from '@/components/ui/input';
+import { useState } from 'react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
+} from '@/components/ui/popover';
 
 const ColorPicker = ({
   color,
   onChange,
 }: {
-  color: string | undefined
-  onChange: (color: string) => void
+  color: string | undefined;
+  onChange: (color: string) => void;
 }) => {
-  const [isOpen, setIsOpen] = useState(true)
+  const [isOpen, setIsOpen] = useState(true);
   return (
     <Popover>
       <PopoverTrigger>
@@ -34,13 +34,13 @@ const ColorPicker = ({
           <SketchPicker
             color={color}
             onChange={(color) => {
-              onChange(color.hex)
+              onChange(color.hex);
             }}
           />
         </PopoverContent>
       )}
     </Popover>
-  )
-}
+  );
+};
 
-export default ColorPicker
+export default ColorPicker;
diff --git a/packages/app/components/misc/form/dataConfigElement.tsx b/packages/app/components/misc/form/dataConfigElement.tsx
index 656689507..9bc70545d 100644
--- a/packages/app/components/misc/form/dataConfigElement.tsx
+++ b/packages/app/components/misc/form/dataConfigElement.tsx
@@ -1,22 +1,22 @@
-'use client'
-import { useState, useEffect } from 'react'
+'use client';
+import { useState, useEffect } from 'react';
 import {
   Select,
   SelectItem,
   SelectTrigger,
   SelectContent,
-} from '@/components/ui/select'
+} from '@/components/ui/select';
 import {
   IDataImporter,
   GSheetConfig,
   PretalxConfig,
-} from 'streameth-new-server/src/interfaces/event.interface'
-import { createGoogleSheetAction } from '@/lib/actions/events'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
+} from 'streameth-new-server/src/interfaces/event.interface';
+import { createGoogleSheetAction } from '@/lib/actions/events';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
 interface Provider {
-  name: string
-  value: 'gsheet' | 'pretalx'
+  name: string;
+  value: 'gsheet' | 'pretalx';
 }
 
 const providers: Provider[] = [
@@ -28,75 +28,70 @@ const providers: Provider[] = [
     name: 'pretalx',
     value: 'pretalx',
   },
-]
+];
 
 const DataConfigElement = ({
   value,
   onChange,
 }: {
-  value?: IDataImporter[]
-  onChange: (value: IDataImporter[]) => void
+  value?: IDataImporter[];
+  onChange: (value: IDataImporter[]) => void;
 }) => {
-  const initialValue = value?.[0]
-  const initialProvider = initialValue
-    ? initialValue.type
-    : providers[0].value
-  const [isLoading, setIsLoading] = useState(false)
+  const initialValue = value?.[0];
+  const initialProvider = initialValue ? initialValue.type : providers[0].value;
+  const [isLoading, setIsLoading] = useState(false);
   const [selectedProvider, setSelectedProvider] = useState<
     'gsheet' | 'pretalx'
-  >(initialProvider)
-  const [config, setConfig] = useState(
-    initialValue ? initialValue.config : {}
-  )
+  >(initialProvider);
+  const [config, setConfig] = useState(initialValue ? initialValue.config : {});
 
   useEffect(() => {
-    let newDataImporter: IDataImporter
+    let newDataImporter: IDataImporter;
     if (selectedProvider === 'gsheet') {
       newDataImporter = {
         type: 'gsheet',
         config: config as GSheetConfig,
-      }
+      };
     } else {
       newDataImporter = {
         type: 'pretalx',
         config: config as PretalxConfig,
-      }
+      };
     }
-    onChange([newDataImporter])
-  }, [selectedProvider, config, onChange])
+    onChange([newDataImporter]);
+  }, [selectedProvider, config, onChange]);
 
-  const handleConfigChange = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleConfigChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const updatedConfig = {
       ...config,
       [e.target.name]: e.target.value,
-    }
-    setConfig(updatedConfig)
-  }
+    };
+    setConfig(updatedConfig);
+  };
 
   const handleCreateSheet = async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     const sheetId = await createGoogleSheetAction({
       eventName: 'test',
-    })
+    });
     setConfig({
       ...config,
       sheetId,
-    })
-    setIsLoading(false)
-  }
+    });
+    setIsLoading(false);
+  };
 
   const handleProviderChange = (value: string) => {
-    const newProvider = value as 'gsheet' | 'pretalx'
-    setSelectedProvider(newProvider)
-  }
+    const newProvider = value as 'gsheet' | 'pretalx';
+    setSelectedProvider(newProvider);
+  };
 
   return (
     <div className="flex flex-col space-y-4">
       <Select
         defaultValue={initialProvider}
-        onValueChange={handleProviderChange}>
+        onValueChange={handleProviderChange}
+      >
         <SelectTrigger>
           <span>
             {selectedProvider
@@ -128,10 +123,9 @@ const DataConfigElement = ({
             variant={'secondary'}
             className="rounded-l-none border-b border-l-0 border-r border-t"
             loading={isLoading}
-            disabled={
-              config.sheetId !== undefined && config.sheetId !== ''
-            }
-            onClick={handleCreateSheet}>
+            disabled={config.sheetId !== undefined && config.sheetId !== ''}
+            onClick={handleCreateSheet}
+          >
             Create new
           </Button>
         </div>
@@ -154,7 +148,7 @@ const DataConfigElement = ({
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default DataConfigElement
+export default DataConfigElement;
diff --git a/packages/app/components/misc/form/datePicker.tsx b/packages/app/components/misc/form/datePicker.tsx
index 3a8adade8..d9a83a243 100644
--- a/packages/app/components/misc/form/datePicker.tsx
+++ b/packages/app/components/misc/form/datePicker.tsx
@@ -1,24 +1,24 @@
-'use client'
-import { useState } from 'react'
-import { CalendarSearch } from 'lucide-react'
-import { Calendar } from '@/components/ui/calendar'
+'use client';
+import { useState } from 'react';
+import { CalendarSearch } from 'lucide-react';
+import { Calendar } from '@/components/ui/calendar';
 import {
   Popover,
   PopoverTrigger,
   PopoverContent,
-} from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
-import { format } from 'date-fns'
-import cn from 'classnames'
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { format } from 'date-fns';
+import cn from 'classnames';
 
 export default function DatePicker({
   value,
   onChange,
 }: {
-  value: Date
-  onChange: (value: Date) => void
+  value: Date;
+  onChange: (value: Date) => void;
 }) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <Popover open={isOpen}>
       <PopoverTrigger asChild>
@@ -28,21 +28,20 @@ export default function DatePicker({
           className={cn(
             'w-[240px] pl-3 text-left font-normal',
             !value && 'text-muted-foreground'
-          )}>
+          )}
+        >
           {value ? format(value, 'PPP') : <span>Pick a date</span>}
           <CalendarSearch size={17} className="ml-auto opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent
-        className="z-[99999999999999] w-auto p-0"
-        align="start">
+      <PopoverContent className="z-[99999999999999] w-auto p-0" align="start">
         <Calendar
           mode="single"
           selected={new Date(value)}
           fromDate={new Date()}
           onSelect={(date) => {
-            onChange(date ?? new Date())
-            setIsOpen(false)
+            onChange(date ?? new Date());
+            setIsOpen(false);
           }}
           disabled={(date) =>
             date == new Date() || date < new Date('1900-01-01')
@@ -51,5 +50,5 @@ export default function DatePicker({
         />
       </PopoverContent>
     </Popover>
-  )
+  );
 }
diff --git a/packages/app/components/misc/form/imageUpload.tsx b/packages/app/components/misc/form/imageUpload.tsx
index d5e49a723..e279705d7 100644
--- a/packages/app/components/misc/form/imageUpload.tsx
+++ b/packages/app/components/misc/form/imageUpload.tsx
@@ -1,71 +1,82 @@
-'use client'
+'use client';
 
-import { Input } from '@/components/ui/input'
-import { ChangeEvent, useState } from 'react'
-import Image from 'next/image'
-import { X } from 'lucide-react'
-import { getImageUrl } from '@/lib/utils/utils'
-import { toast } from 'sonner'
-import { Label } from '@radix-ui/react-label'
-import { Image as ImageLogo } from 'lucide-react'
+import { Input } from '@/components/ui/input';
+import { ChangeEvent, useState } from 'react';
+import Image from 'next/image';
+import { X } from 'lucide-react';
+import { getImageUrl } from '@/lib/utils/utils';
+import { toast } from 'sonner';
+import { Label } from '@radix-ui/react-label';
+import { Image as ImageLogo } from 'lucide-react';
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 function getImageData(event: ChangeEvent<HTMLInputElement>) {
-  // FileList is immutable, so we need to create a new one
-  const dataTransfer = new DataTransfer()
-
-  // Add newly uploaded images
+  const dataTransfer = new DataTransfer();
   Array.from(event.target.files!).forEach((image) =>
     dataTransfer.items.add(image)
-  )
+  );
+  const files = dataTransfer.files;
+  const displayUrl = URL.createObjectURL(event.target.files![0]);
+  return { files, displayUrl };
+}
 
-  const files = dataTransfer.files
-  const displayUrl = URL.createObjectURL(event.target.files![0])
-  return { files, displayUrl }
+interface ConfirmImageDeletionProps {
+  onChange: (files: string | null) => void;
+  setPreview: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const ConfirmImageDeletion = ({
+const ConfirmImageDeletion: React.FC<ConfirmImageDeletionProps> = ({
   onChange,
   setPreview,
-}: {
-  onChange: (files: string | null) => void
-  setPreview: React.Dispatch<React.SetStateAction<string>>
 }) => {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>
         <X
           size={24}
-          className="absolute right-0 z-[9999999999994] ml-auto cursor-pointer rounded-full border border-muted-foreground bg-white text-muted-foreground"
+          className="absolute right-2 top-2 z-10 cursor-pointer rounded-full border border-muted-foreground bg-white text-muted-foreground"
         />
       </DialogTrigger>
       <DialogContent className="flex flex-col items-center justify-center gap-5">
-        <p className="text-xl">
-          Are you sure you want to remove this image?
-        </p>
+        <p className="text-xl">Are you sure you want to remove this image?</p>
         <DialogFooter className="flex items-center gap-4">
           <Button onClick={() => setOpen(false)} variant="ghost">
             Cancel
           </Button>
           <Button
             onClick={() => {
-              onChange('')
-              setPreview('')
+              onChange('');
+              setPreview('');
+              setOpen(false);
             }}
-            variant="destructive">
+            variant="destructive"
+          >
             Delete
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
+};
+
+interface ImageUploadProps {
+  id?: string;
+  maxSize?: number;
+  placeholder?: string;
+  aspectRatio: number;
+  onChange: (value: string) => void;
+  value: string | undefined;
+  path: string;
+  className?: string;
+  requireExactSize?: { width: number; height: number };
+  isProfileImage?: boolean;
 }
 
 export default function ImageUpload({
@@ -77,121 +88,163 @@ export default function ImageUpload({
   path,
   className,
   maxSize = 5000000,
-  ...rest
-}: {
-  id?: string
-  maxSize?: number
-  placeholder?: string
-  aspectRatio: number
-  onChange: (files: string | null) => void
-  value: string | null | undefined
-  path: string
-  className?: string
-}) {
-  const [preview, setPreview] = useState(
+  requireExactSize,
+  isProfileImage = false,
+}: ImageUploadProps) {
+  const [preview, setPreview] = useState<string>(
     value ? getImageUrl('/' + path + '/' + value) : ''
-  )
-  const [isUploading, setIsUploading] = useState(false)
+  );
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const validateImage = (file: File): Promise<boolean> => {
+    return new Promise((resolve) => {
+      const img = document.createElement('img');
+      img.onload = () => {
+        if (requireExactSize) {
+          if (
+            img.width !== requireExactSize.width ||
+            img.height !== requireExactSize.height
+          ) {
+            setError(
+              `Image must be exactly ${requireExactSize.width}x${requireExactSize.height} pixels`
+            );
+            resolve(false);
+          } else {
+            setError(null);
+            resolve(true);
+          }
+        } else {
+          setError(null);
+          resolve(true);
+        }
+      };
+      img.src = URL.createObjectURL(file);
+    });
+  };
 
-  const onSubmit = async (file: File) => {
-    if (!file) return
-    setIsUploading(true)
+  const onSubmit = async (file: File): Promise<string> => {
+    if (!file) return '';
+    setIsUploading(true);
     try {
-      const data = new FormData()
+      const isValidSize = await validateImage(file);
+      if (!isValidSize) {
+        throw new Error(error || 'Invalid image size');
+      }
 
       if (file.size > maxSize) {
-        throw new Error('File size is too big')
+        throw new Error('File size is too big');
       }
 
+      const data = new FormData();
       data.set(
         'file',
         new File([file], file.name.replace(/[^a-zA-Z0-9.]/g, '_'), {
           type: file.type,
         })
-      )
-      data.set('path', path)
+      );
+      data.set('path', path);
       const res = await fetch('/api/upload', {
         method: 'POST',
         body: data,
-      })
+      });
       if (!res.ok) {
-        throw new Error(await res.text())
+        throw new Error(await res.text());
       }
-      onChange(
-        getImageUrl(
-          '/' + path + '/' + file.name.replace(/[^a-zA-Z0-9.]/g, '_')
-        )
-      )
-      return 'Image uploaded successfully'
+      const uploadedPath = getImageUrl(
+        '/' + path + '/' + file.name.replace(/[^a-zA-Z0-9.]/g, '_')
+      );
+      setPreview(uploadedPath);
+      return uploadedPath;
     } catch (e: any) {
-      console.error(e)
-      setPreview('')
-
-      throw e
+      console.error(e);
+      setPreview('');
+      throw e;
     } finally {
-      setIsUploading(false)
+      setIsUploading(false);
     }
-  }
+  };
+
+  const containerClasses = isProfileImage
+    ? 'relative z-40 mx-4 mt-[-50px] flex h-24 w-24 rounded-full bg-white p-1'
+    : `${className} relative w-full h-40`;
+
+  const imageClasses = isProfileImage
+    ? 'm-auto h-full w-full rounded-full bg-neutrals-300 text-white object-cover'
+    : 'w-full h-full object-cover';
+
+  const placeholderClasses = isProfileImage
+    ? 'flex cursor-pointer flex-col items-center justify-center w-full h-full rounded-full border border-dotted bg-secondary'
+    : 'flex cursor-pointer flex-col items-center justify-center w-full h-full border border-dotted bg-secondary';
 
   return (
-    <>
+    <div className={containerClasses}>
       {isUploading ? (
-        <div className={`${className} relative flex w-full flex-col`}>
+        <div className="flex h-full w-full items-center justify-center">
           Uploading image...
         </div>
       ) : preview ? (
-        <div className={`${className} relative flex w-full flex-col`}>
+        <div className="relative h-full w-full">
           <ConfirmImageDeletion
-            onChange={onChange}
+            onChange={() => {
+              onChange('');
+              setPreview('');
+            }}
             setPreview={setPreview}
           />
-          <div
-            className={`relative flex h-full w-full flex-col items-center justify-center`}>
-            <Image
-              src={preview ?? value}
-              className={`${className} z-10`}
-              alt="preview"
-              fill
-            />
-          </div>
+          <Image src={preview} alt="preview" fill className={imageClasses} />
         </div>
       ) : (
-        <>
-          <Label
-            htmlFor={id}
-            className={`${className} flex cursor-pointer flex-col items-center justify-center border border-dotted bg-secondary`}>
-            <div className="rounded-full bg-neutral-400 p-2 text-white">
-              <ImageLogo />
-            </div>
+        <Label htmlFor={id} className={placeholderClasses}>
+          <div className="rounded-full bg-neutral-400 p-2 text-white">
+            <ImageLogo />
+          </div>
+          {!isProfileImage && (
             <p className="w-full p-1 text-center text-[12px] lg:w-2/3">
               {placeholder}
             </p>
-          </Label>
-          <Input
-            id={id}
-            type="file"
-            accept=".png,.jpg, .jpeg"
-            placeholder="Upload image"
-            className="hidden"
-            onChange={(event) => {
-              const { files, displayUrl } = getImageData(event)
+          )}
+        </Label>
+      )}
+      <Input
+        id={id}
+        type="file"
+        accept=".png,.jpg,.jpeg"
+        placeholder="Upload image"
+        className="hidden"
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          if (event.target.files && event.target.files.length > 0) {
+            const { files, displayUrl } = getImageData(event);
 
-              setPreview(displayUrl)
-              toast.promise(onSubmit(files[0]), {
+            setPreview(displayUrl);
+            toast.promise(
+              onSubmit(files[0]).then((uploadedPath) => {
+                onChange(uploadedPath);
+                return 'Image uploaded successfully';
+              }),
+              {
                 loading: 'Uploading image',
                 success: (message) => {
-                  toast.success(message)
-                  return 'Image uploaded successfully'
+                  return message;
                 },
-                error: (error) => {
-                  toast.error(error.message)
-                  return error.message || 'Unknown error'
+                error: (error: Error) => {
+                  setPreview('');
+                  onChange(''); // Set to empty string on error
+                  return error.message || 'Unknown error';
                 },
-              })
-            }}
-          />
-        </>
+              }
+            );
+          } else {
+            setPreview('');
+            onChange(''); // Set to empty string when no file is selected
+          }
+        }}
+      />
+      {error && (
+        <p className="absolute bottom-[-2rem] left-0 right-0 mt-2 text-center text-sm text-red-500">
+          {error}
+        </p>
       )}
-    </>
-  )
+    </div>
+  );
 }
diff --git a/packages/app/components/misc/form/timePicker.tsx b/packages/app/components/misc/form/timePicker.tsx
index ee9f356aa..ca289b14a 100644
--- a/packages/app/components/misc/form/timePicker.tsx
+++ b/packages/app/components/misc/form/timePicker.tsx
@@ -4,21 +4,22 @@ import {
   SelectContent,
   SelectItem,
   SelectValue,
-} from '@/components/ui/select'
+} from '@/components/ui/select';
 
 const TimePicker = ({
   value,
   onChange,
 }: {
-  value: string | undefined
-  onChange: (value: string) => void
+  value: string | undefined;
+  onChange: (value: string) => void;
 }) => {
   return (
     <Select
       onValueChange={(value) => {
-        onChange(value)
+        onChange(value);
       }}
-      defaultValue={value}>
+      defaultValue={value}
+    >
       <SelectTrigger>
         {value ? (
           value
@@ -34,20 +35,20 @@ const TimePicker = ({
         ))}
       </SelectContent>
     </Select>
-  )
-}
+  );
+};
 
-export default TimePicker
+export default TimePicker;
 
 function generateTimeOptions(interval: number) {
-  const times = []
+  const times = [];
   for (let hour = 0; hour < 24; hour++) {
     for (let minute = 0; minute < 60; minute += interval) {
       const timeString = `${hour.toString().padStart(2, '0')}:${minute
         .toString()
-        .padStart(2, '0')}`
-      times.push(timeString)
+        .padStart(2, '0')}`;
+      times.push(timeString);
     }
   }
-  return times
+  return times;
 }
diff --git a/packages/app/components/misc/interact/Alert.tsx b/packages/app/components/misc/interact/Alert.tsx
index 85bf84e6e..74d1ed40d 100644
--- a/packages/app/components/misc/interact/Alert.tsx
+++ b/packages/app/components/misc/interact/Alert.tsx
@@ -8,8 +8,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
 
 const Alert = ({
   triggerText,
@@ -18,11 +18,11 @@ const Alert = ({
   cancelClick,
   continueClick,
 }: {
-  triggerText: string
-  dialogTitle: string
-  dialogDescription: string
-  cancelClick?: () => void
-  continueClick?: () => void
+  triggerText: string;
+  dialogTitle: string;
+  dialogDescription: string;
+  cancelClick?: () => void;
+  continueClick?: () => void;
 }) => {
   return (
     <AlertDialog>
@@ -32,24 +32,24 @@ const Alert = ({
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{dialogTitle}</AlertDialogTitle>
-          <AlertDialogDescription>
-            {dialogDescription}
-          </AlertDialogDescription>
+          <AlertDialogDescription>{dialogDescription}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel
             onClick={cancelClick ? cancelClick : undefined}
-            className="bg-red-300">
+            className="bg-red-300"
+          >
             Cancel
           </AlertDialogCancel>
           <AlertDialogAction
-            onClick={continueClick ? continueClick : undefined}>
+            onClick={continueClick ? continueClick : undefined}
+          >
             Continue
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  )
-}
+  );
+};
 
-export default Alert
+export default Alert;
diff --git a/packages/app/components/misc/interact/CookieBanner.tsx b/packages/app/components/misc/interact/CookieBanner.tsx
index 821cb0ae2..f50e00855 100644
--- a/packages/app/components/misc/interact/CookieBanner.tsx
+++ b/packages/app/components/misc/interact/CookieBanner.tsx
@@ -1,63 +1,58 @@
-'use client'
+'use client';
 
-import React, { useState, useEffect } from 'react'
-import {
-  Alert,
-  AlertTitle,
-  AlertDescription,
-} from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
+import React, { useState, useEffect } from 'react';
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
 import {
   setCookie as setNextCookie,
   hasCookie,
-} from '@/lib/actions/cookieConsent'
+} from '@/lib/actions/cookieConsent';
 
 const CookieBanner = () => {
-  const [cookie, setCookie] = useState<boolean>(true)
-  const [shouldFadeOut, setShouldFadeOut] = useState(false)
-  const [isFadingIn, setIsFadingIn] = useState(true)
+  const [cookie, setCookie] = useState<boolean>(true);
+  const [shouldFadeOut, setShouldFadeOut] = useState(false);
+  const [isFadingIn, setIsFadingIn] = useState(true);
 
   useEffect(() => {
     const checkCookieConsent = async () => {
-      const cookieValue = await hasCookie('cookie_consent')
-      setCookie(cookieValue)
-    }
+      const cookieValue = await hasCookie('cookie_consent');
+      setCookie(cookieValue);
+    };
 
-    checkCookieConsent()
+    checkCookieConsent();
 
     const fadeTimer = setTimeout(() => {
-      setIsFadingIn(false)
-    }, 800)
+      setIsFadingIn(false);
+    }, 800);
 
-    return () => clearTimeout(fadeTimer)
-  }, [])
+    return () => clearTimeout(fadeTimer);
+  }, []);
 
-  const handleClick = async (
-    e: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    e.preventDefault()
-    await setNextCookie('cookie_consent', 'true')
-    setShouldFadeOut(true)
+  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    await setNextCookie('cookie_consent', 'true');
+    setShouldFadeOut(true);
 
     setTimeout(() => {
-      setCookie(true)
-    }, 800)
-  }
+      setCookie(true);
+    }, 800);
+  };
 
-  if (cookie) return null
+  if (cookie) return null;
 
-  return null
+  return null;
   return (
     <Alert
       className={`duration-800 w-full transition-opacity lg:w-[35%] ${
         isFadingIn ? 'opacity-0' : 'opacity-100'
-      } ${shouldFadeOut ? 'opacity-0' : ''}`}>
+      } ${shouldFadeOut ? 'opacity-0' : ''}`}
+    >
       <AlertTitle>We Use Cookies 🍪</AlertTitle>
       <AlertDescription>
-        Your privacy is paramount to us. As a &quot;Privacy by
-        Default&quot; platform, we only save essential cookies to
-        enhance your experience without compromising your data.
+        Your privacy is paramount to us. As a &quot;Privacy by Default&quot;
+        platform, we only save essential cookies to enhance your experience
+        without compromising your data.
       </AlertDescription>
       <div className="mt-3">
         <Button onClick={handleClick} className="mr-1">
@@ -68,7 +63,7 @@ const CookieBanner = () => {
         </Link>
       </div>
     </Alert>
-  )
-}
+  );
+};
 
-export default CookieBanner
+export default CookieBanner;
diff --git a/packages/app/components/misc/interact/EmbedButton.tsx b/packages/app/components/misc/interact/EmbedButton.tsx
index 1e95eb652..6d9ea676a 100644
--- a/packages/app/components/misc/interact/EmbedButton.tsx
+++ b/packages/app/components/misc/interact/EmbedButton.tsx
@@ -1,6 +1,6 @@
-'use client'
-import { useEffect, useState } from 'react'
-import { Code, Copy } from 'lucide-react'
+'use client';
+import { useEffect, useState } from 'react';
+import { Code, Copy } from 'lucide-react';
 
 import {
   Credenza,
@@ -10,37 +10,30 @@ import {
   CredenzaHeader,
   CredenzaTitle,
   CredenzaTrigger,
-} from '@/components/ui/crezenda'
-import { copyToClipboard, generateEmbedCode } from '@/lib/utils/utils'
-import { Button } from '@/components/ui/button'
+} from '@/components/ui/crezenda';
+import { copyToClipboard, generateEmbedCode } from '@/lib/utils/utils';
+import { Button } from '@/components/ui/button';
 
 export const EmbedModalContent: React.FC<{
-  playbackId?: string
-  streamId?: string
-  playerName: string
-  sessionId?: string
-  stageId?: string
-  vod?: boolean
-}> = ({
-  playbackId,
-  streamId,
-  playerName,
-  vod,
-  sessionId,
-  stageId,
-}) => {
-  const [copied, setCopied] = useState(false)
-  const copiedClass = copied ? 'opacity-100' : 'opacity-0'
-  const [url, setUrl] = useState('')
+  playbackId?: string;
+  streamId?: string;
+  playerName: string;
+  sessionId?: string;
+  stageId?: string;
+  vod?: boolean;
+}> = ({ playbackId, streamId, playerName, vod, sessionId, stageId }) => {
+  const [copied, setCopied] = useState(false);
+  const copiedClass = copied ? 'opacity-100' : 'opacity-0';
+  const [url, setUrl] = useState('');
 
   useEffect(() => {
     if (copied) {
-      setTimeout(() => setCopied(false), 2000)
+      setTimeout(() => setCopied(false), 2000);
     }
     if (typeof window !== 'undefined') {
-      setUrl(window.location.origin)
+      setUrl(window.location.origin);
     }
-  }, [copied])
+  }, [copied]);
 
   const generatedEmbedCode = generateEmbedCode({
     url,
@@ -50,15 +43,15 @@ export const EmbedModalContent: React.FC<{
     vod,
     streamId,
     playerName,
-  })
+  });
 
   return (
     <CredenzaContent className="max-w-[450px]">
       <CredenzaHeader>
         <CredenzaTitle>Embed video</CredenzaTitle>
         <CredenzaDescription className="mb-4">
-          Easily embed this stream into your website by adding the
-          iframe code below
+          Easily embed this stream into your website by adding the iframe code
+          below
         </CredenzaDescription>
       </CredenzaHeader>
       <CredenzaBody className="flex flex-col gap-3">
@@ -66,7 +59,8 @@ export const EmbedModalContent: React.FC<{
           <p>HTML</p>
           <div
             onClick={() => copyToClipboard(generatedEmbedCode)}
-            className="flex cursor-pointer gap-2">
+            className="flex cursor-pointer gap-2"
+          >
             <Copy className="h-4 w-4 text-muted-foreground" />
             Copy Code
           </div>
@@ -76,8 +70,8 @@ export const EmbedModalContent: React.FC<{
         </p>
       </CredenzaBody>
     </CredenzaContent>
-  )
-}
+  );
+};
 
 function EmbedButton({
   playbackId,
@@ -88,13 +82,13 @@ function EmbedButton({
   sessionId,
   stageId,
 }: {
-  playbackId?: string
-  streamId?: string
-  playerName: string
-  vod?: boolean
-  className?: string
-  sessionId?: string
-  stageId?: string
+  playbackId?: string;
+  streamId?: string;
+  playerName: string;
+  vod?: boolean;
+  className?: string;
+  sessionId?: string;
+  stageId?: string;
 }) {
   return (
     <Credenza>
@@ -113,7 +107,7 @@ function EmbedButton({
         stageId={stageId}
       />
     </Credenza>
-  )
+  );
 }
 
-export default EmbedButton
+export default EmbedButton;
diff --git a/packages/app/components/misc/interact/InfoHoverCard.tsx b/packages/app/components/misc/interact/InfoHoverCard.tsx
index 45df44d41..2011038a5 100644
--- a/packages/app/components/misc/interact/InfoHoverCard.tsx
+++ b/packages/app/components/misc/interact/InfoHoverCard.tsx
@@ -2,13 +2,13 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/components/ui/hover-card'
-import { Info, LucideProps } from 'lucide-react'
-import { ForwardRefExoticComponent } from 'react'
+} from '@/components/ui/hover-card';
+import { Info, LucideProps } from 'lucide-react';
+import { ForwardRefExoticComponent } from 'react';
 
 type IconType = ForwardRefExoticComponent<LucideProps> & {
-  displayName?: string
-}
+  displayName?: string;
+};
 
 const InfoHoverCard = ({
   title,
@@ -19,13 +19,13 @@ const InfoHoverCard = ({
   iconColor,
   iconClassName,
 }: {
-  title: string
-  description: string
-  size?: number
-  stroke?: number
-  Icon?: IconType
-  iconColor?: string
-  iconClassName?: string
+  title: string;
+  description: string;
+  size?: number;
+  stroke?: number;
+  Icon?: IconType;
+  iconColor?: string;
+  iconClassName?: string;
 }) => {
   return (
     <HoverCard>
@@ -46,7 +46,7 @@ const InfoHoverCard = ({
         </div>
       </HoverCardContent>
     </HoverCard>
-  )
-}
+  );
+};
 
-export default InfoHoverCard
+export default InfoHoverCard;
diff --git a/packages/app/components/misc/interact/ShareButton.tsx b/packages/app/components/misc/interact/ShareButton.tsx
index 73b02ef7f..2722fb74f 100644
--- a/packages/app/components/misc/interact/ShareButton.tsx
+++ b/packages/app/components/misc/interact/ShareButton.tsx
@@ -1,21 +1,21 @@
-'use client'
+'use client';
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react';
 import {
   FacebookShareButton,
   RedditShareButton,
   TelegramShareButton,
   TwitterShareButton,
   WhatsappShareButton,
-} from 'react-share'
-import { Share2 } from 'lucide-react'
+} from 'react-share';
+import { Share2 } from 'lucide-react';
 import {
   FacebookIcon,
   RedditIcon,
   TelegramIcon,
   WhatsappIcon,
   XIcon,
-} from 'react-share'
+} from 'react-share';
 
 import {
   Credenza,
@@ -26,24 +26,24 @@ import {
   CredenzaHeader,
   CredenzaTitle,
   CredenzaTrigger,
-} from '@/components/ui/crezenda'
-import { buttonVariants } from '@/components/ui/button'
-import CopyText from '@/components/misc/CopyText'
+} from '@/components/ui/crezenda';
+import { buttonVariants } from '@/components/ui/button';
+import CopyText from '@/components/misc/CopyText';
 
 export const ShareModalContent = ({
   url,
   shareFor = 'event',
 }: {
-  url?: string
-  shareFor?: string
+  url?: string;
+  shareFor?: string;
 }) => {
-  const text = `Check out this ${shareFor} on @streameth!`
-  const [currentUrl, setCurrentUrl] = useState(url ?? '')
+  const text = `Check out this ${shareFor} on @streameth!`;
+  const [currentUrl, setCurrentUrl] = useState(url ?? '');
   useEffect(() => {
     // This code will only run on the client side
-    if (typeof window === 'undefined') return
-    !url && setCurrentUrl(window.location.href)
-  }, [url])
+    if (typeof window === 'undefined') return;
+    !url && setCurrentUrl(window.location.href);
+  }, [url]);
 
   return (
     <CredenzaContent className="max-w-[525px]">
@@ -52,8 +52,8 @@ export const ShareModalContent = ({
           Share this {shareFor}
         </CredenzaTitle>
         <CredenzaDescription>
-          Share this {shareFor} with your friends and followers, tag
-          @streameth and earn rewards!
+          Share this {shareFor} with your friends and followers, tag @streameth
+          and earn rewards!
         </CredenzaDescription>
       </CredenzaHeader>
       <CredenzaBody>
@@ -82,8 +82,8 @@ export const ShareModalContent = ({
         <></>
       </CredenzaFooter>
     </CredenzaContent>
-  )
-}
+  );
+};
 
 const ShareButton = ({
   url,
@@ -92,16 +92,16 @@ const ShareButton = ({
   shareFor,
   title = 'Share',
 }: {
-  url?: string
-  className?: string
-  variant?: 'outline' | 'ghost' | 'primary' | 'default'
-  shareFor?: string
-  title?: string
+  url?: string;
+  className?: string;
+  variant?: 'outline' | 'ghost' | 'primary' | 'default';
+  shareFor?: string;
+  title?: string;
 }) => {
   const buttonClassNames = buttonVariants({
     variant,
     className,
-  })
+  });
 
   return (
     <Credenza>
@@ -113,7 +113,7 @@ const ShareButton = ({
       </CredenzaTrigger>
       <ShareModalContent url={url} shareFor={shareFor} />
     </Credenza>
-  )
-}
+  );
+};
 
-export default ShareButton
+export default ShareButton;
diff --git a/packages/app/components/plugins/Chat/index.tsx b/packages/app/components/plugins/Chat/index.tsx
index 39050af07..fcafd9d90 100644
--- a/packages/app/components/plugins/Chat/index.tsx
+++ b/packages/app/components/plugins/Chat/index.tsx
@@ -1,98 +1,93 @@
-'use client'
-import {
-  LiveKitRoom,
-  ReceivedChatMessage,
-} from '@livekit/components-react'
-import { cn, formatIdentify } from '@/lib/utils/utils'
-import { useChat } from '@livekit/components-react'
+'use client';
+import { LiveKitRoom, ReceivedChatMessage } from '@livekit/components-react';
+import { cn, formatIdentify } from '@/lib/utils/utils';
+import { useChat } from '@livekit/components-react';
 import {
   useCallback,
   useMemo,
   useState,
   type KeyboardEvent,
   useEffect,
-} from 'react'
-import { Button } from '@/components/ui/button'
-import { Textarea } from '@/components/ui/textarea'
-import { jwtDecode, type JwtPayload } from 'jwt-decode'
-import { createViewerToken } from '@/lib/actions/livekit'
-import { Card } from '@/components/ui/card'
-import Logo from '@/public/logo_dark.png'
-import Livepeer from '@/public/livepeer-logo.png'
-import Image from 'next/image'
-import { Skeleton } from '@/components/ui/skeleton'
-import { useAccount, useEnsName } from 'wagmi'
-import { SignInUserButton } from '@/components/misc/SignInUserButton'
-import { IExtendedChat } from '@/lib/types'
-import { createChatAction } from '@/lib/actions/chat'
-import { useSIWE } from 'connectkit'
+} from 'react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { jwtDecode, type JwtPayload } from 'jwt-decode';
+import { createViewerToken } from '@/lib/actions/livekit';
+import { Card } from '@/components/ui/card';
+import Logo from '@/public/logo_dark.png';
+import Livepeer from '@/public/livepeer-logo.png';
+import Image from 'next/image';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useAccount, useEnsName } from 'wagmi';
+import { SignInUserButton } from '@/components/misc/SignInUserButton';
+import { IExtendedChat } from '@/lib/types';
+import { createChatAction } from '@/lib/actions/chat';
+import { useSIWE } from 'connectkit';
 interface Props {
-  participantName: string
-  stageId: string
-  prevChatMessages: IExtendedChat[]
+  participantName: string;
+  stageId: string;
+  prevChatMessages: IExtendedChat[];
 }
 
 const ChatBar = ({
   stageId,
   prevChatMessages,
 }: {
-  stageId: string
-  prevChatMessages: IExtendedChat[]
+  stageId: string;
+  prevChatMessages: IExtendedChat[];
 }) => {
-  const serverUrl = 'wss://streameth-fjjg03ki.livekit.cloud'
-  const [viewerToken, setViewerToken] = useState('')
-  const [viewerName, setViewerName] = useState('')
+  const serverUrl = 'wss://streameth-fjjg03ki.livekit.cloud';
+  const [viewerToken, setViewerToken] = useState('');
+  const [viewerName, setViewerName] = useState('');
 
-  const account = useAccount()
+  const account = useAccount();
   const { data, isLoading: loadingEns } = useEnsName({
     address: account?.address,
     chainId: 1,
-  })
+  });
 
-  const fakeName = data ? data : account.address
-  const slug = stageId
+  const fakeName = data ? data : account.address;
+  const slug = stageId;
 
   useEffect(() => {
     if (!account || loadingEns || !fakeName || !stageId) {
-      return
+      return;
     }
     const getOrCreateViewerToken = async () => {
-      const SESSION_VIEWER_TOKEN_KEY = `${slug}-viewer-token`
-      const sessionToken = sessionStorage.getItem(
-        SESSION_VIEWER_TOKEN_KEY
-      )
+      const SESSION_VIEWER_TOKEN_KEY = `${slug}-viewer-token`;
+      const sessionToken = sessionStorage.getItem(SESSION_VIEWER_TOKEN_KEY);
 
       if (sessionToken) {
-        const payload: JwtPayload = jwtDecode(sessionToken)
+        const payload: JwtPayload = jwtDecode(sessionToken);
 
         if (payload.exp) {
-          const expiry = new Date(payload.exp * 1000)
+          const expiry = new Date(payload.exp * 1000);
           if (expiry < new Date()) {
-            sessionStorage.removeItem(SESSION_VIEWER_TOKEN_KEY)
-            const token = await createViewerToken(slug, fakeName)
-            setViewerToken(token)
-            const jti = jwtDecode(token)?.jti
-            jti && setViewerName(jti)
-            sessionStorage.setItem(SESSION_VIEWER_TOKEN_KEY, token)
-            return
+            sessionStorage.removeItem(SESSION_VIEWER_TOKEN_KEY);
+            const token = await createViewerToken(slug, fakeName);
+            setViewerToken(token);
+            const jti = jwtDecode(token)?.jti;
+            jti && setViewerName(jti);
+            sessionStorage.setItem(SESSION_VIEWER_TOKEN_KEY, token);
+            return;
           }
         }
 
         if (payload.jti) {
-          setViewerName(payload.jti)
+          setViewerName(payload.jti);
         }
 
-        setViewerToken(sessionToken)
+        setViewerToken(sessionToken);
       } else {
-        const token = await createViewerToken(slug, fakeName)
-        setViewerToken(token)
-        const jti = jwtDecode(token)?.jti
-        jti && setViewerName(jti)
-        sessionStorage.setItem(SESSION_VIEWER_TOKEN_KEY, token)
+        const token = await createViewerToken(slug, fakeName);
+        setViewerToken(token);
+        const jti = jwtDecode(token)?.jti;
+        jti && setViewerName(jti);
+        sessionStorage.setItem(SESSION_VIEWER_TOKEN_KEY, token);
       }
-    }
-    void getOrCreateViewerToken()
-  }, [fakeName, slug, data, account, loadingEns])
+    };
+    void getOrCreateViewerToken();
+  }, [fakeName, slug, data, account, loadingEns]);
 
   if (!viewerToken || !viewerName) {
     return (
@@ -107,14 +102,15 @@ const ChatBar = ({
           </div>
         </Card>
       </div>
-    )
+    );
   }
 
   return (
     <LiveKitRoom
       token={viewerToken}
       serverUrl={serverUrl}
-      className="flex flex-1 flex-col">
+      className="flex flex-1 flex-col"
+    >
       <div className="flex h-full min-h-[400px] flex-1">
         <Card className="sticky h-full w-full border-l bg-opacity-30 md:block">
           <div className="absolute bottom-0 right-0 top-0 flex h-full w-full flex-col gap-2 p-2">
@@ -129,34 +125,34 @@ const ChatBar = ({
         </Card>
       </div>
     </LiveKitRoom>
-  )
-}
+  );
+};
 
-export default ChatBar
+export default ChatBar;
 
 function Chat({ participantName, stageId, prevChatMessages }: Props) {
-  const { chatMessages: messages, send } = useChat()
+  const { chatMessages: messages, send } = useChat();
   const [chatMessages, setChatMessages] = useState<
     Array<IExtendedChat | ReceivedChatMessage>
-  >([])
+  >([]);
   const reverseMessages = useMemo(
     () => chatMessages.sort((a, b) => b.timestamp - a.timestamp),
     [chatMessages]
-  )
+  );
 
   useEffect(() => {
     // Merge prevChatMessages and reverseMessages
     const mergedMessages = [...prevChatMessages, ...messages] as (
       | IExtendedChat
       | ReceivedChatMessage
-    )[]
-    setChatMessages(mergedMessages)
+    )[];
+    setChatMessages(mergedMessages);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messages])
-  const { isSignedIn } = useSIWE()
-  const account = useAccount()
+  }, [messages]);
+  const { isSignedIn } = useSIWE();
+  const account = useAccount();
 
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState('');
 
   const sendMessage = useCallback(async () => {
     await createChatAction({
@@ -168,30 +164,30 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
         },
         timestamp: new Date().getTime(),
       },
-    })
-  }, [stageId, message, participantName])
+    });
+  }, [stageId, message, participantName]);
 
   const onEnter = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault()
+        e.preventDefault();
         if (message.trim().length > 0 && send) {
-          send(message).catch((err) => console.error(err))
-          setMessage('')
-          sendMessage()
+          send(message).catch((err) => console.error(err));
+          setMessage('');
+          sendMessage();
         }
       }
     },
     [message, sendMessage, send]
-  )
+  );
 
   const onSend = useCallback(() => {
     if (message.trim().length > 0 && send) {
-      send(message).catch((err) => console.error(err))
-      setMessage('')
-      sendMessage()
+      send(message).catch((err) => console.error(err));
+      setMessage('');
+      sendMessage();
     }
-  }, [message, sendMessage, send])
+  }, [message, sendMessage, send]);
 
   return (
     <>
@@ -199,12 +195,7 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
         <Card className="absolute left-0 right-0 top-0 m-1 flex flex-row items-center justify-center space-x-2 p-2">
           <Image width={150} height={50} src={Logo} alt="Logo" />
           <span>❤️</span>
-          <Image
-            width={100}
-            height={30}
-            src={Livepeer}
-            alt="Livepeer"
-          />
+          <Image width={100} height={30} src={Livepeer} alt="Livepeer" />
         </Card>
         {reverseMessages.map((message) => (
           <div
@@ -214,7 +205,8 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
               participantName === message.from?.identity
                 ? 'justify-end'
                 : 'justify-start'
-            )}>
+            )}
+          >
             <Card className="flex flex-col p-2">
               <div className="flex items-center gap-2">
                 <div
@@ -223,18 +215,16 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
                     participantName === message.from?.identity
                       ? 'text-black'
                       : 'text-gray-500'
-                  )}>
+                  )}
+                >
                   {formatIdentify(message.from?.identity)}
-                  {participantName === message.from?.identity &&
-                    ' (you)'}
+                  {participantName === message.from?.identity && ' (you)'}
                 </div>
                 <div className="text-xs text-gray-500">
                   {new Date(message.timestamp).toLocaleTimeString()}
                 </div>
               </div>
-              <div className="text-sm text-white">
-                {message.message}
-              </div>
+              <div className="text-sm text-white">{message.message}</div>
             </Card>
           </div>
         ))}
@@ -245,14 +235,12 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
             value={message}
             className="border-box h-1 min-h-[50px] w-full dark:bg-zinc-900"
             onChange={(e) => {
-              setMessage(e.target.value)
+              setMessage(e.target.value);
             }}
             onKeyDown={onEnter}
             placeholder="Type a message..."
           />
-          <Button
-            disabled={message.trim().length === 0}
-            onClick={onSend}>
+          <Button disabled={message.trim().length === 0} onClick={onSend}>
             <div className="flex items-center gap-2">
               <p>send</p>
             </div>
@@ -264,5 +252,5 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
         </div>
       )}
     </>
-  )
+  );
 }
diff --git a/packages/app/components/plugins/NFT/index.tsx b/packages/app/components/plugins/NFT/index.tsx
index bd556afa0..258bb07a4 100644
--- a/packages/app/components/plugins/NFT/index.tsx
+++ b/packages/app/components/plugins/NFT/index.tsx
@@ -1,20 +1,19 @@
-import Image from 'next/image'
+import Image from 'next/image';
 // import MintButton from '@/components/misc/MintButton'
-import nft from '@/public/Base-house.jpg'
-import Link from 'next/link'
-import { Button } from '@/components/ui/button'
+import nft from '@/public/Base-house.jpg';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
 const NFTMintComponent = () => {
   return (
     <div className="flex flex-col justify-center">
       <div className="w-full p-2">
         <p className=" ">
-          By minting the Base Miami Broadcast NFT, you can experience
-          Base House and tune in to the programming LIVE from any NFT
-          marketplace.
+          By minting the Base Miami Broadcast NFT, you can experience Base House
+          and tune in to the programming LIVE from any NFT marketplace.
           <br />
           <br />
-          With the Base Miami Broadcast NFT, you will also be eligible
-          for commemorative drops after the event.
+          With the Base Miami Broadcast NFT, you will also be eligible for
+          commemorative drops after the event.
         </p>
       </div>
       <div className="flex w-full flex-col items-center justify-center rounded-lg p-2 shadow">
@@ -25,14 +24,15 @@ const NFTMintComponent = () => {
             <Link
               href="https://opensea.io/assets/base/0x3afa8ecae2503f6a892d40b9a0d905ece7a7219b/1"
               target="blank"
-              rel="noreferrer">
+              rel="noreferrer"
+            >
               Watch on Opensea
             </Link>
           </Button>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default NFTMintComponent
+export default NFTMintComponent;
diff --git a/packages/app/components/plugins/SignUp/index.tsx b/packages/app/components/plugins/SignUp/index.tsx
index 401be0342..752648600 100644
--- a/packages/app/components/plugins/SignUp/index.tsx
+++ b/packages/app/components/plugins/SignUp/index.tsx
@@ -1,7 +1,7 @@
-'use client'
-import { signUp } from '@/lib/actions/events'
-import { useEffect, useState } from 'react'
-import { CredenzaTrigger, Credenza } from '@/components/ui/crezenda'
+'use client';
+import { signUp } from '@/lib/actions/events';
+import { useEffect, useState } from 'react';
+import { CredenzaTrigger, Credenza } from '@/components/ui/crezenda';
 import {
   CredenzaContent,
   CredenzaDescription,
@@ -9,23 +9,23 @@ import {
   CredenzaHeader,
   CredenzaFooter,
   CredenzaBody,
-} from '@/components/ui/crezenda'
+} from '@/components/ui/crezenda';
 //@ts-ignore
-import { useFormStatus, useFormState } from 'react-dom'
-import { IExtendedEvent } from '@/lib/types'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { toast } from 'sonner'
-import { ReloadIcon } from '@radix-ui/react-icons'
-import InfoHoverCard from '@/components/misc/interact/InfoHoverCard'
+import { useFormStatus, useFormState } from 'react-dom';
+import { IExtendedEvent } from '@/lib/types';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { ReloadIcon } from '@radix-ui/react-icons';
+import InfoHoverCard from '@/components/misc/interact/InfoHoverCard';
 
 const initialState = {
   message: '',
   success: false,
-}
+};
 
 function SubmitButton() {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
 
   if (pending) {
     return (
@@ -33,30 +33,30 @@ function SubmitButton() {
         <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
         Please wait
       </Button>
-    )
+    );
   }
   return (
     <Button className="self-end" type="submit">
       Sign Up
     </Button>
-  )
+  );
 }
 
 const SignUpModal = ({
   event,
   setOpen,
 }: {
-  event: IExtendedEvent
-  setOpen: any
+  event: IExtendedEvent;
+  setOpen: any;
 }) => {
-  const [state, formAction] = useFormState(signUp, initialState)
+  const [state, formAction] = useFormState(signUp, initialState);
 
   useEffect(() => {
     if (state?.success) {
-      toast.success(state.message)
-      setOpen(false)
+      toast.success(state.message);
+      setOpen(false);
     }
-  }, [state?.success, setOpen, toast])
+  }, [state?.success, setOpen, toast]);
   return (
     <CredenzaContent>
       <CredenzaHeader>
@@ -79,7 +79,8 @@ const SignUpModal = ({
       <CredenzaBody className="flex flex-col items-center justify-center">
         <form
           action={formAction}
-          className="flex w-full flex-col items-center justify-center gap-3">
+          className="flex w-full flex-col items-center justify-center gap-3"
+        >
           <Input
             className="w-full"
             id="email"
@@ -88,12 +89,7 @@ const SignUpModal = ({
             type="email"
             placeholder="Email"
           />
-          <Input
-            id="eventId"
-            name="eventId"
-            type="hidden"
-            value={event._id}
-          />
+          <Input id="eventId" name="eventId" type="hidden" value={event._id} />
           <SubmitButton />
         </form>
       </CredenzaBody>
@@ -101,11 +97,11 @@ const SignUpModal = ({
         <p>{state?.message}</p>
       </CredenzaFooter>
     </CredenzaContent>
-  )
-}
+  );
+};
 
 const SignUp = ({ event }: { event: IExtendedEvent }) => {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
   return (
     <Credenza open={open} onOpenChange={setOpen}>
       <SignUpModal event={event} setOpen={setOpen} />
@@ -113,7 +109,7 @@ const SignUp = ({ event }: { event: IExtendedEvent }) => {
         <Button variant={'outline'}>Set a reminder</Button>
       </CredenzaTrigger>
     </Credenza>
-  )
-}
+  );
+};
 
-export default SignUp
+export default SignUp;
diff --git a/packages/app/components/sessions/CollectVideButton.tsx b/packages/app/components/sessions/CollectVideButton.tsx
index 072775f1c..7ff5a5f40 100644
--- a/packages/app/components/sessions/CollectVideButton.tsx
+++ b/packages/app/components/sessions/CollectVideButton.tsx
@@ -1,10 +1,7 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import { Button } from '../ui/button'
-import {
-  IExtendedNftCollections,
-  IExtendedSession,
-} from '@/lib/types'
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Button } from '../ui/button';
+import { IExtendedNftCollections, IExtendedSession } from '@/lib/types';
 import {
   useAccount,
   useChainId,
@@ -12,15 +9,15 @@ import {
   useSwitchChain,
   useWaitForTransactionReceipt,
   useWriteContract,
-} from 'wagmi'
-import { VideoNFTAbi, contractChainID } from '@/lib/contract'
-import { toast } from 'sonner'
-import { calMintPrice, getVideoIndex } from '@/lib/utils/utils'
-import { Dialog, DialogContent, DialogTitle } from '../ui/dialog'
-import { CheckCircle2, Loader2 } from 'lucide-react'
-import { type BaseError } from 'wagmi'
-import TransactionHash from '@/app/studio/[organization]/nfts/create/components/TransactionHash'
-import { ConnectWalletButton } from '../misc/ConnectWalletButton'
+} from 'wagmi';
+import { VideoNFTAbi, contractChainID } from '@/lib/contract';
+import { toast } from 'sonner';
+import { calMintPrice, getVideoIndex } from '@/lib/utils/utils';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { CheckCircle2, Loader2 } from 'lucide-react';
+import { type BaseError } from 'wagmi';
+import TransactionHash from '@/app/studio/[organization]/nfts/create/components/TransactionHash';
+import { ConnectWalletButton } from '../misc/ConnectWalletButton';
 
 const CollectVideButton = ({
   video,
@@ -28,24 +25,23 @@ const CollectVideButton = ({
   variant = 'primary',
   all = false,
 }: {
-  video?: IExtendedSession
-  nftCollection: IExtendedNftCollections | null
-  variant?: 'primary' | 'outline'
-  all?: boolean
+  video?: IExtendedSession;
+  nftCollection: IExtendedNftCollections | null;
+  variant?: 'primary' | 'outline';
+  all?: boolean;
 }) => {
-  const account = useAccount()
-  const chain = useChainId()
-  const [isOpen, setIsOpen] = useState(false)
-  const [mintError, setMintError] = useState('')
+  const account = useAccount();
+  const chain = useChainId();
+  const [isOpen, setIsOpen] = useState(false);
+  const [mintError, setMintError] = useState('');
 
   const videoNFTContract = {
     address: nftCollection?.contractAddress as `0x${string}`,
     abi: VideoNFTAbi,
     chainId: contractChainID,
-  } as const
+  } as const;
 
-  const { switchChainAsync, isPending: IsSwitchingChain } =
-    useSwitchChain()
+  const { switchChainAsync, isPending: IsSwitchingChain } = useSwitchChain();
 
   const result = useReadContracts({
     contracts: [
@@ -66,9 +62,9 @@ const CollectVideButton = ({
         ],
       },
     ],
-  })
+  });
 
-  const hasMintedSession = result.data?.[2].result
+  const hasMintedSession = result.data?.[2].result;
 
   const {
     data: hash,
@@ -76,26 +72,24 @@ const CollectVideButton = ({
     error,
     isError,
     isPending: isMintingNftPending,
-  } = useWriteContract()
+  } = useWriteContract();
 
   const { isSuccess } = useWaitForTransactionReceipt({
     hash,
-  })
+  });
 
   useEffect(() => {
     if (isSuccess) {
-      setIsOpen(false)
-      toast.success(
-        'NFT of the video successfully minted to your wallet'
-      )
+      setIsOpen(false);
+      toast.success('NFT of the video successfully minted to your wallet');
     }
     if (isError) {
-      toast.error('NFT of the video failed to mint. Please try again')
+      toast.error('NFT of the video failed to mint. Please try again');
     }
-  }, [isSuccess, isError, error])
+  }, [isSuccess, isError, error]);
 
   const handleWriteContract = () => {
-    setMintError('')
+    setMintError('');
     if (result?.data?.[0].status === 'success' && nftCollection) {
       writeContract({
         abi: VideoNFTAbi,
@@ -109,31 +103,31 @@ const CollectVideButton = ({
             nftCollection
           ) as string
         ),
-      })
+      });
     } else {
-      setMintError('An error occurred, try again later')
+      setMintError('An error occurred, try again later');
     }
-  }
+  };
 
   const mintCollection = () => {
-    setMintError('')
-    setIsOpen(true)
+    setMintError('');
+    setIsOpen(true);
     if (chain !== contractChainID) {
       switchChainAsync(
         { chainId: contractChainID },
         {
           onSuccess: () => {
-            handleWriteContract()
+            handleWriteContract();
           },
           onError: () => {
-            setMintError('Error switching chain')
+            setMintError('Error switching chain');
           },
         }
-      )
+      );
     } else {
-      handleWriteContract()
+      handleWriteContract();
     }
-  }
+  };
 
   return hasMintedSession ? (
     <Button disabled variant={'outline'}>
@@ -148,7 +142,8 @@ const CollectVideButton = ({
           loading={isMintingNftPending || IsSwitchingChain}
           onClick={mintCollection}
           variant={variant}
-          className="w-full md:w-36">
+          className="w-full md:w-36"
+        >
           {all ? 'Collect All Videos' : 'Collect Video'}
         </Button>
       )}
@@ -165,9 +160,7 @@ const CollectVideButton = ({
 
           {mintError || error ? (
             <div className="text-center text-destructive">
-              {mintError ||
-                (error as BaseError).shortMessage ||
-                error?.message}
+              {mintError || (error as BaseError).shortMessage || error?.message}
             </div>
           ) : hash ? (
             <TransactionHash hash={hash} />
@@ -185,8 +178,8 @@ const CollectVideButton = ({
                   Go to your wallet to approve the transaction
                 </p>
                 <p className="text-sm text-muted-foreground">
-                  You&apos;ll be asked to pay gas fees plus mint fee
-                  to collect video on the blockchain.
+                  You&apos;ll be asked to pay gas fees plus mint fee to collect
+                  video on the blockchain.
                 </p>
               </div>
             </div>
@@ -194,7 +187,7 @@ const CollectVideButton = ({
         </DialogContent>
       </Dialog>
     </div>
-  )
-}
+  );
+};
 
-export default CollectVideButton
+export default CollectVideButton;
diff --git a/packages/app/components/sessions/DropdownMenuWithActionButtons.tsx b/packages/app/components/sessions/DropdownMenuWithActionButtons.tsx
index 46bd17e64..800b541a2 100644
--- a/packages/app/components/sessions/DropdownMenuWithActionButtons.tsx
+++ b/packages/app/components/sessions/DropdownMenuWithActionButtons.tsx
@@ -1,25 +1,25 @@
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuTrigger,
   DropdownMenuItem,
-} from '@/components/ui/dropdown-menu'
-import VideoDownload from '@/app/[organization]/components/VideoDownload'
-import ShareButton from '@/components/misc/interact/ShareButton'
-import EmbedButton from '@/components/misc/interact/EmbedButton'
-import { MoreHorizontal } from 'lucide-react'
+} from '@/components/ui/dropdown-menu';
+import VideoDownload from '@/app/[organization]/components/VideoDownload';
+import ShareButton from '@/components/misc/interact/ShareButton';
+import EmbedButton from '@/components/misc/interact/EmbedButton';
+import { MoreHorizontal } from 'lucide-react';
 export function DropdownMenuWithActionButtons({
   streamId,
   playbackId,
   playerName,
   assetId,
 }: {
-  streamId?: string
-  playbackId?: string
-  playerName: string
-  assetId?: string
+  streamId?: string;
+  playbackId?: string;
+  playerName: string;
+  assetId?: string;
 }) {
   return (
     <DropdownMenu>
@@ -52,7 +52,7 @@ export function DropdownMenuWithActionButtons({
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }
 
-export default DropdownMenuWithActionButtons
+export default DropdownMenuWithActionButtons;
diff --git a/packages/app/components/sessions/InfoBoxDescription.tsx b/packages/app/components/sessions/InfoBoxDescription.tsx
index 401853cfa..b6972b06c 100644
--- a/packages/app/components/sessions/InfoBoxDescription.tsx
+++ b/packages/app/components/sessions/InfoBoxDescription.tsx
@@ -1,47 +1,48 @@
-'use client'
+'use client';
 
-import { useState, useEffect, useRef } from 'react'
-import MarkdownDisplay from '../misc/MarkdownDisplay'
-import { IExtendedSpeaker } from '@/lib/types'
-import SpeakerIcon from '../speakers/speakerIcon'
+import { useState, useEffect, useRef } from 'react';
+import MarkdownDisplay from '../misc/MarkdownDisplay';
+import { IExtendedSpeaker } from '@/lib/types';
+import SpeakerIcon from '../speakers/speakerIcon';
 
 const InfoBoxDescription = ({
   description,
   speakers,
 }: {
-  description?: string
-  speakers?: IExtendedSpeaker[]
+  description?: string;
+  speakers?: IExtendedSpeaker[];
 }) => {
-  const [isOpened, setIsOpened] = useState(false)
-  const [isExpandable, setIsExpandable] = useState(false)
-  const [maxHeight, setMaxHeight] = useState('0px')
-  const descriptionRef = useRef<HTMLDivElement>(null)
+  const [isOpened, setIsOpened] = useState(false);
+  const [isExpandable, setIsExpandable] = useState(false);
+  const [maxHeight, setMaxHeight] = useState('0px');
+  const descriptionRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleResize = () => {
       if (descriptionRef.current) {
-        const descriptionHeight = descriptionRef.current.scrollHeight
-        setIsExpandable(descriptionHeight > 100) // Adjust height threshold as needed
-        setMaxHeight(isOpened ? `${descriptionHeight}px` : '50px')
+        const descriptionHeight = descriptionRef.current.scrollHeight;
+        setIsExpandable(descriptionHeight > 100); // Adjust height threshold as needed
+        setMaxHeight(isOpened ? `${descriptionHeight}px` : '50px');
       }
-    }
+    };
 
-    handleResize()
-    window.addEventListener('resize', handleResize)
+    handleResize();
+    window.addEventListener('resize', handleResize);
 
     return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [isOpened])
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isOpened]);
 
-  if (!description) return null
+  if (!description) return null;
 
   return (
     <div className="relative py-4">
       <div
         ref={descriptionRef}
         className="transition-max-height overflow-hidden duration-300 ease-in-out"
-        style={{ maxHeight: maxHeight }}>
+        style={{ maxHeight: maxHeight }}
+      >
         {description && (
           <div className="space-y-2">
             <MarkdownDisplay content={description} />
@@ -61,21 +62,20 @@ const InfoBoxDescription = ({
       {isExpandable && (
         <button
           onClick={() => {
-            setIsOpened(!isOpened)
+            setIsOpened(!isOpened);
             if (descriptionRef.current) {
               setMaxHeight(
-                !isOpened
-                  ? `${descriptionRef.current.scrollHeight}px`
-                  : '100px'
-              )
+                !isOpened ? `${descriptionRef.current.scrollHeight}px` : '100px'
+              );
             }
           }}
-          className="absolute bottom-0 right-0 ml-auto mr-5 pb-2 font-bold text-primary">
+          className="absolute bottom-0 right-0 ml-auto mr-5 pb-2 font-bold text-primary"
+        >
           {isOpened ? 'less' : 'more'}
         </button>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default InfoBoxDescription
+export default InfoBoxDescription;
diff --git a/packages/app/components/sessions/LiveIndicator.tsx b/packages/app/components/sessions/LiveIndicator.tsx
index 4784fad82..3c06b0b36 100644
--- a/packages/app/components/sessions/LiveIndicator.tsx
+++ b/packages/app/components/sessions/LiveIndicator.tsx
@@ -1,5 +1,3 @@
 export default function LiveIndicator() {
-  return (
-    <div className="rounded bg-red-500 px-2 py-1 text-xs">Live</div>
-  )
+  return <div className="rounded bg-red-500 px-2 py-1 text-xs">Live</div>;
 }
diff --git a/packages/app/components/sessions/SessionInfoBox.tsx b/packages/app/components/sessions/SessionInfoBox.tsx
index 7062ce6a4..0d878b2cb 100644
--- a/packages/app/components/sessions/SessionInfoBox.tsx
+++ b/packages/app/components/sessions/SessionInfoBox.tsx
@@ -1,27 +1,23 @@
-'use server'
+'use server';
 
-import { CardTitle } from '@/components/ui/card'
-import InfoBoxDescription from './InfoBoxDescription'
+import { CardTitle } from '@/components/ui/card';
+import InfoBoxDescription from './InfoBoxDescription';
 import {
   IExtendedNftCollections,
   IExtendedSession,
   IExtendedStage,
-} from '@/lib/types'
-import ShareButton from '../misc/interact/ShareButton'
-import CollectVideButton from './CollectVideButton'
-import { fetchNFTCollection } from '@/lib/services/nftCollectionService'
-import { formatDate } from '@/lib/utils/time'
-import ViewCounts from '@/app/[organization]/components/ViewCounts'
-import CalendarReminder from '@/app/[organization]/livestream/components/CalendarReminder'
-import { IExtendedSpeaker } from '@/lib/types'
-import VideoDownload from '@/app/[organization]/components/VideoDownload'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '../ui/popover'
-import { EllipsisVertical } from 'lucide-react'
-import VideoDownloadClient from '../misc/VideoDownloadClient'
+} from '@/lib/types';
+import ShareButton from '../misc/interact/ShareButton';
+import CollectVideButton from './CollectVideButton';
+import { fetchNFTCollection } from '@/lib/services/nftCollectionService';
+import { formatDate } from '@/lib/utils/time';
+import ViewCounts from '@/app/[organization]/components/ViewCounts';
+import CalendarReminder from '@/app/[organization]/livestream/components/CalendarReminder';
+import { IExtendedSpeaker } from '@/lib/types';
+import VideoDownload from '@/app/[organization]/components/VideoDownload';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { EllipsisVertical } from 'lucide-react';
+import VideoDownloadClient from '../misc/VideoDownloadClient';
 
 const DesktopButtons = ({
   name,
@@ -31,20 +27,17 @@ const DesktopButtons = ({
   nftCollection,
   vod,
 }: {
-  name: string
-  description: string
-  date: string
-  video?: IExtendedSession
-  nftCollection: IExtendedNftCollections | null
-  vod: boolean
+  name: string;
+  description: string;
+  date: string;
+  video?: IExtendedSession;
+  nftCollection: IExtendedNftCollections | null;
+  vod: boolean;
 }) => {
   return (
     <>
       {video?.nftCollections?.[0] && (
-        <CollectVideButton
-          video={video}
-          nftCollection={nftCollection}
-        />
+        <CollectVideButton video={video} nftCollection={nftCollection} />
       )}
       <div className="flex flex-row space-x-2">
         <ShareButton shareFor="video" />
@@ -65,8 +58,8 @@ const DesktopButtons = ({
         />
       )}
     </>
-  )
-}
+  );
+};
 
 const MobileButtons = ({
   name,
@@ -76,29 +69,23 @@ const MobileButtons = ({
   nftCollection,
   vod,
 }: {
-  name: string
-  description: string
-  date: string
-  video?: IExtendedSession
-  nftCollection: IExtendedNftCollections | null
-  vod: boolean
+  name: string;
+  description: string;
+  date: string;
+  video?: IExtendedSession;
+  nftCollection: IExtendedNftCollections | null;
+  vod: boolean;
 }) => {
   return (
     <>
       {video?.nftCollections?.[0] ? (
         <>
           <div className="w-full">
-            <CollectVideButton
-              video={video}
-              nftCollection={nftCollection}
-            />
+            <CollectVideButton video={video} nftCollection={nftCollection} />
           </div>
           <Popover>
             <PopoverTrigger asChild>
-              <EllipsisVertical
-                size={30}
-                className="cursor-pointer"
-              />
+              <EllipsisVertical size={30} className="cursor-pointer" />
             </PopoverTrigger>
             <PopoverContent className="flex w-full flex-col space-y-2">
               {/* Hydration Error */}
@@ -126,8 +113,8 @@ const MobileButtons = ({
         <ShareButton variant={'primary'} shareFor="video" />
       )}
     </>
-  )
-}
+  );
+};
 
 const SessionInfoBox = async ({
   name,
@@ -141,34 +128,32 @@ const SessionInfoBox = async ({
   viewCount = false,
   video,
 }: {
-  name: string
-  description: string
-  date: string
-  speakers?: IExtendedSpeaker[]
-  playbackId?: string
-  inverted?: boolean
-  vod?: boolean
-  organizationSlug?: string
-  viewCount?: boolean
-  video?: IExtendedStage
+  name: string;
+  description: string;
+  date: string;
+  speakers?: IExtendedSpeaker[];
+  playbackId?: string;
+  inverted?: boolean;
+  vod?: boolean;
+  organizationSlug?: string;
+  viewCount?: boolean;
+  video?: IExtendedStage;
 }) => {
   const nftCollection = await fetchNFTCollection({
     collectionId: video?.nftCollections?.[0],
-  })
+  });
 
   return (
     <div
       className={`flex flex-col py-4 md:flex-row md:space-x-2 ${
         inverted ? 'rounded-lg text-card-foreground text-white' : ''
-      }`}>
+      }`}
+    >
       <div className="flex w-full flex-col justify-start">
         <CardTitle className="flex flex-row items-start justify-between text-xl lg:text-2xl">
           <span>{name}</span>
         </CardTitle>
-        <InfoBoxDescription
-          speakers={speakers}
-          description={description}
-        />
+        <InfoBoxDescription speakers={speakers} description={description} />
         <div className="flex items-center space-x-2 text-sm">
           <span>
             {video?.isMultipleDate && video?.streamEndDate
@@ -179,10 +164,7 @@ const SessionInfoBox = async ({
                   new Date(video?.streamEndDate),
                   'ddd. MMM. D, YYYY, h:mm a'
                 )}`
-              : formatDate(
-                  new Date(date),
-                  'ddd. MMM. D, YYYY, h:mm a'
-                )}
+              : formatDate(new Date(date), 'ddd. MMM. D, YYYY, h:mm a')}
           </span>
           {playbackId && (
             <>
@@ -215,7 +197,7 @@ const SessionInfoBox = async ({
         </div>
       </>
     </div>
-  )
-}
+  );
+};
 
-export default SessionInfoBox
+export default SessionInfoBox;
diff --git a/packages/app/components/sessions/SessionList.tsx b/packages/app/components/sessions/SessionList.tsx
index d653e36ec..4a6c51934 100644
--- a/packages/app/components/sessions/SessionList.tsx
+++ b/packages/app/components/sessions/SessionList.tsx
@@ -1,25 +1,23 @@
-'use client'
-import React, { useEffect } from 'react'
-import Scroll, { Element } from 'react-scroll'
-import ScheduleCard from '@/app/[organization]/[event]/schedule/components/ScheduleCard'
-import { IExtendedEvent, IExtendedSession } from '@/lib/types'
+'use client';
+import React, { useEffect } from 'react';
+import Scroll, { Element } from 'react-scroll';
+import ScheduleCard from '@/app/[organization]/[event]/schedule/components/ScheduleCard';
+import { IExtendedEvent, IExtendedSession } from '@/lib/types';
 interface Props {
-  event: IExtendedEvent
-  sessions: IExtendedSession[]
-  currentSession?: IExtendedSession
-  date?: string
+  event: IExtendedEvent;
+  sessions: IExtendedSession[];
+  currentSession?: IExtendedSession;
+  date?: string;
 }
 
-const scroll = Scroll.scroller
+const scroll = Scroll.scroller;
 
 function NoSessionComponent() {
   return (
     <div className="m-4 flex h-60 flex-col items-center justify-center p-4">
-      <p className="text-gray-600">
-        No sessions scheduled for this stage!
-      </p>
+      <p className="text-gray-600">No sessions scheduled for this stage!</p>
     </div>
-  )
+  );
 }
 
 export default function SessionList({
@@ -33,29 +31,29 @@ export default function SessionList({
       (session) =>
         new Date(session.start).toLocaleDateString() ==
         new Date().toLocaleDateString()
-    )
-  }
+    );
+  };
 
   const sortedSessions =
     getCurrDaySessions().length && !date
       ? getCurrDaySessions().sort((a, b) => {
           if (a.start < b.start) {
-            return -1
+            return -1;
           } else if (a.start > b.start) {
-            return 1
+            return 1;
           } else {
-            return 0
+            return 0;
           }
         })
       : sessions.slice().sort((a, b) => {
           if (a.start < b.start) {
-            return -1
+            return -1;
           } else if (a.start > b.start) {
-            return 1
+            return 1;
           } else {
-            return 0
+            return 0;
           }
-        })
+        });
 
   useEffect(() => {
     if (currentSession) {
@@ -64,18 +62,18 @@ export default function SessionList({
         smooth: true,
         offset: 0,
         containerId: 'sessionList',
-      })
+      });
     }
-  }, [currentSession])
+  }, [currentSession]);
 
   if (sessions === undefined || sessions.length === 0) {
-    return <NoSessionComponent />
+    return <NoSessionComponent />;
   }
 
   return (
     <div id="sessionList" className="grid grid-cols-3 gap-4">
       {sortedSessions.map((i, index) => {
-        if (i.name === 'Blank') return null
+        if (i.name === 'Blank') return null;
         return (
           <ScheduleCard
             key={index}
@@ -84,8 +82,8 @@ export default function SessionList({
             showTime
             speakers
           />
-        )
+        );
       })}
     </div>
-  )
+  );
 }
diff --git a/packages/app/components/speakers/speakerIcon.tsx b/packages/app/components/speakers/speakerIcon.tsx
index 329ad2b19..4bb5a6ccf 100644
--- a/packages/app/components/speakers/speakerIcon.tsx
+++ b/packages/app/components/speakers/speakerIcon.tsx
@@ -1,40 +1,32 @@
-'use client'
-import makeBlockie from 'ethereum-blockies-base64'
-import { Badge } from '@/components/ui/badge'
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@/components/ui/avatar'
-import SpeakerModal from '@/app/[organization]/[event]/speakers/components/SpeakerModal'
-import { Credenza, CredenzaTrigger } from '../ui/crezenda'
-import { IExtendedSpeaker } from '@/lib/types'
+'use client';
+import makeBlockie from 'ethereum-blockies-base64';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import SpeakerModal from '@/app/[organization]/[event]/speakers/components/SpeakerModal';
+import { Credenza, CredenzaTrigger } from '../ui/crezenda';
+import { IExtendedSpeaker } from '@/lib/types';
 function CreateBlockie(username: string) {
-  return makeBlockie(username)
+  return makeBlockie(username);
 }
 
 export default function SpeakerIcon({
   speaker,
   onlyImage = false,
 }: {
-  speaker: IExtendedSpeaker
-  onlyImage?: boolean
+  speaker: IExtendedSpeaker;
+  onlyImage?: boolean;
 }) {
   if (onlyImage) {
     return (
       <Avatar className="my-2">
         <AvatarImage
-          src={
-            speaker.photo
-              ? speaker.photo
-              : CreateBlockie(speaker.name)
-          }
+          src={speaker.photo ? speaker.photo : CreateBlockie(speaker.name)}
         />
         <AvatarFallback>
           {speaker.name.slice(0, 1).toUpperCase()}
         </AvatarFallback>
       </Avatar>
-    )
+    );
   }
   return (
     <Credenza>
@@ -51,5 +43,5 @@ export default function SpeakerIcon({
         </Badge>
       </CredenzaTrigger>
     </Credenza>
-  )
+  );
 }
diff --git a/packages/app/components/ui/Player.tsx b/packages/app/components/ui/Player.tsx
index af69bb73b..b2d7952cc 100644
--- a/packages/app/components/ui/Player.tsx
+++ b/packages/app/components/ui/Player.tsx
@@ -1,5 +1,5 @@
-'use client'
-import { cn } from '@/lib/utils/utils'
+'use client';
+import { cn } from '@/lib/utils/utils';
 import {
   EnterFullscreenIcon,
   ExitFullscreenIcon,
@@ -10,29 +10,29 @@ import {
   PlayIcon,
   SettingsIcon,
   UnmuteIcon,
-} from '@livepeer/react/assets'
-import * as Player from '@livepeer/react/player'
-import * as Popover from '@radix-ui/react-popover'
-import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
-import React from 'react'
-import { useRef, useEffect } from 'react'
+} from '@livepeer/react/assets';
+import * as Player from '@livepeer/react/player';
+import * as Popover from '@radix-ui/react-popover';
+import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
+import React from 'react';
+import { useRef, useEffect } from 'react';
 // @ts-ignore
-import mux from 'mux-embed'
-import Image from 'next/image'
-import { Src } from '@livepeer/react'
-import LogoDark from '@/public/logo_dark.png'
-import Link from 'next/link'
+import mux from 'mux-embed';
+import Image from 'next/image';
+import { Src } from '@livepeer/react';
+import LogoDark from '@/public/logo_dark.png';
+import Link from 'next/link';
 
 export function PlayerWithControls(props: {
-  src: Src[] | null
-  name?: string
-  thumbnail?: string
+  src: Src[] | null;
+  name?: string;
+  thumbnail?: string;
 }) {
-  const videoRef = useRef(null)
+  const videoRef = useRef(null);
 
   useEffect(() => {
     if (videoRef.current) {
-      const initTime = mux.utils.now()
+      const initTime = mux.utils.now();
 
       mux.monitor(videoRef.current, {
         debug: false,
@@ -42,9 +42,9 @@ export function PlayerWithControls(props: {
           player_init_time: initTime,
           // Add other metadata fields here
         },
-      })
+      });
     }
-  }, [videoRef])
+  }, [videoRef]);
 
   if (!props.src || !props.src?.[0].src) {
     return (
@@ -52,7 +52,7 @@ export function PlayerWithControls(props: {
         title="Invalid source"
         description="We could not fetch valid playback information for the playback ID you provided. Please check and try again."
       />
-    )
+    );
   }
 
   return (
@@ -101,7 +101,8 @@ export function PlayerWithControls(props: {
 
         <Player.ErrorIndicator
           matcher="all"
-          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0">
+          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0"
+        >
           <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
             <LoadingIcon className="h-8 w-8 animate-spin" />
           </div>
@@ -110,15 +111,15 @@ export function PlayerWithControls(props: {
 
         <Player.ErrorIndicator
           matcher="offline"
-          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg animate-in fade-in-0 duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0">
+          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg animate-in fade-in-0 duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0"
+        >
           <div className="flex flex-col gap-5">
             <div className="flex flex-col gap-1">
               <div className="text-lg font-bold sm:text-2xl">
                 Stream is offline
               </div>
               <div className="text-xs text-gray-100 sm:text-sm">
-                Playback will start automatically once the stream has
-                started
+                Playback will start automatically once the stream has started
               </div>
             </div>
             <LoadingIcon className="mx-auto h-6 w-6 animate-spin md:h-8 md:w-8" />
@@ -127,15 +128,15 @@ export function PlayerWithControls(props: {
 
         <Player.ErrorIndicator
           matcher="access-control"
-          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0">
+          className="absolute inset-0 flex select-none flex-col items-center justify-center gap-4 bg-black/40 text-center backdrop-blur-lg duration-1000 data-[visible=true]:animate-in data-[visible=false]:animate-out data-[visible=false]:fade-out-0 data-[visible=true]:fade-in-0"
+        >
           <div className="flex flex-col gap-5">
             <div className="flex flex-col gap-1">
               <div className="text-lg font-bold sm:text-2xl">
                 Stream is private
               </div>
               <div className="text-xs text-gray-100 sm:text-sm">
-                It looks like you do not have permission to view this
-                content
+                It looks like you do not have permission to view this content
               </div>
             </div>
             <LoadingIcon className="mx-auto h-6 w-6 animate-spin md:h-8 md:w-8" />
@@ -156,13 +157,12 @@ export function PlayerWithControls(props: {
 
               <Player.LiveIndicator className="flex items-center gap-2">
                 <div className="h-1.5 w-1.5 rounded-full bg-red-600 text-white" />
-                <span className="select-none text-sm text-white">
-                  LIVE
-                </span>
+                <span className="select-none text-sm text-white">LIVE</span>
               </Player.LiveIndicator>
               <Player.LiveIndicator
                 matcher={false}
-                className="flex items-center gap-2">
+                className="flex items-center gap-2"
+              >
                 <Player.Time className="select-none text-sm tabular-nums text-white" />
               </Player.LiveIndicator>
 
@@ -186,7 +186,8 @@ export function PlayerWithControls(props: {
               <Link
                 href={'https://streameth.org'}
                 rel="noopener noreferrer"
-                target="_blank">
+                target="_blank"
+              >
                 <div className="hidden flex-row items-center justify-center space-x-2 rounded-xl border bg-white p-1 shadow md:flex">
                   <Image
                     src={LogoDark}
@@ -236,17 +237,17 @@ export function PlayerWithControls(props: {
         </Player.Controls>
       </Player.Container>
     </Player.Root>
-  )
+  );
 }
 
-export default PlayerWithControls
+export default PlayerWithControls;
 
 export const PlayerLoading = ({
   title,
   description,
 }: {
-  title?: React.ReactNode
-  description?: React.ReactNode
+  title?: React.ReactNode;
+  description?: React.ReactNode;
 }) => (
   <div className="relative flex aspect-video w-full flex-col-reverse gap-3 overflow-hidden rounded-sm bg-white/10 px-3 py-2">
     <div className="flex justify-between">
@@ -264,16 +265,14 @@ export const PlayerLoading = ({
 
     {title && (
       <div className="absolute inset-10 flex flex-col items-center justify-center gap-1 text-center">
-        <span className="text-lg font-medium text-white">
-          {title}
-        </span>
+        <span className="text-lg font-medium text-white">{title}</span>
         {description && (
           <span className="text-sm text-white/80">{description}</span>
         )}
       </div>
     )}
   </div>
-)
+);
 
 // function Clip({ className }: { className?: string }) {
 //   const [isPending, startTransition] = useTransition()
@@ -334,9 +333,10 @@ export const Settings = React.forwardRef(function Search(
           className={className}
           aria-label="Playback settings"
           onClick={(e) => {
-            console.log(e)
-            e.stopPropagation()
-          }}>
+            console.log(e);
+            e.stopPropagation();
+          }}
+        >
           <SettingsIcon />
         </button>
       </Popover.Trigger>
@@ -346,23 +346,25 @@ export const Settings = React.forwardRef(function Search(
           side="top"
           alignOffset={-70}
           align="end"
-          onClick={(e) => e.stopPropagation()}>
+          onClick={(e) => e.stopPropagation()}
+        >
           <div className="flex flex-col gap-2">
-            <p className="mb-1 text-sm font-medium text-white/90">
-              Settings
-            </p>
+            <p className="mb-1 text-sm font-medium text-white/90">Settings</p>
             <Player.LiveIndicator
               matcher={false}
-              className="flex flex-col gap-2">
+              className="flex flex-col gap-2"
+            >
               <label
                 className="text-xs font-medium text-white/90"
-                htmlFor="speedSelect">
+                htmlFor="speedSelect"
+              >
                 Playback speed
               </label>
               <Player.RateSelect name="speedSelect">
                 <Player.SelectTrigger
                   className="inline-flex h-7 items-center justify-between gap-1 rounded-sm px-1 text-xs leading-none outline-none outline-1 outline-white/50"
-                  aria-label="Playback speed">
+                  aria-label="Playback speed"
+                >
                   <Player.SelectValue placeholder="Select a speed..." />
                   <Player.SelectIcon>
                     <ChevronDownIcon className="h-4 w-4" />
@@ -372,24 +374,12 @@ export const Settings = React.forwardRef(function Search(
                   <Player.SelectContent className="overflow-hidden rounded-sm border border-white/50 bg-white">
                     <Player.SelectViewport className="p-1">
                       <Player.SelectGroup>
-                        <RateSelectItem value={0.5}>
-                          0.5x
-                        </RateSelectItem>
-                        <RateSelectItem value={0.75}>
-                          0.75x
-                        </RateSelectItem>
-                        <RateSelectItem value={1}>
-                          1x (normal)
-                        </RateSelectItem>
-                        <RateSelectItem value={1.25}>
-                          1.25x
-                        </RateSelectItem>
-                        <RateSelectItem value={1.5}>
-                          1.5x
-                        </RateSelectItem>
-                        <RateSelectItem value={1.75}>
-                          1.75x
-                        </RateSelectItem>
+                        <RateSelectItem value={0.5}>0.5x</RateSelectItem>
+                        <RateSelectItem value={0.75}>0.75x</RateSelectItem>
+                        <RateSelectItem value={1}>1x (normal)</RateSelectItem>
+                        <RateSelectItem value={1.25}>1.25x</RateSelectItem>
+                        <RateSelectItem value={1.5}>1.5x</RateSelectItem>
+                        <RateSelectItem value={1.75}>1.75x</RateSelectItem>
                         <RateSelectItem value={2}>2x</RateSelectItem>
                       </Player.SelectGroup>
                     </Player.SelectViewport>
@@ -400,15 +390,18 @@ export const Settings = React.forwardRef(function Search(
             <div className="flex flex-col gap-2">
               <label
                 className="text-xs font-medium text-white/90"
-                htmlFor="qualitySelect">
+                htmlFor="qualitySelect"
+              >
                 Quality
               </label>
               <Player.VideoQualitySelect
                 name="qualitySelect"
-                defaultValue="1.0">
+                defaultValue="1.0"
+              >
                 <Player.SelectTrigger
                   className="inline-flex h-7 items-center justify-between gap-1 rounded-sm px-1 text-xs leading-none outline-none outline-1 outline-white/50"
-                  aria-label="Playback quality">
+                  aria-label="Playback quality"
+                >
                   <Player.SelectValue placeholder="Select a quality..." />
                   <Player.SelectIcon>
                     <ChevronDownIcon className="h-4 w-4" />
@@ -442,23 +435,21 @@ export const Settings = React.forwardRef(function Search(
           </div>
           <Popover.Close
             className="absolute right-2.5 top-2.5 inline-flex h-5 w-5 items-center justify-center rounded-full outline-none"
-            aria-label="Close">
+            aria-label="Close"
+          >
             <XIcon />
           </Popover.Close>
           <Popover.Arrow className="fill-white/50" />
         </Popover.Content>
       </Popover.Portal>
     </Popover.Root>
-  )
-})
+  );
+});
 
 export const RateSelectItem = React.forwardRef<
   HTMLDivElement,
   Player.RateSelectItemProps
->(function RateSelectItem(
-  { children, className, ...props },
-  forwardedRef
-) {
+>(function RateSelectItem({ children, className, ...props }, forwardedRef) {
   return (
     <Player.RateSelectItem
       className={cn(
@@ -466,14 +457,15 @@ export const RateSelectItem = React.forwardRef<
         className
       )}
       {...props}
-      ref={forwardedRef}>
+      ref={forwardedRef}
+    >
       <Player.SelectItemText>{children}</Player.SelectItemText>
       <Player.SelectItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
         <CheckIcon className="h-4 w-4" />
       </Player.SelectItemIndicator>
     </Player.RateSelectItem>
-  )
-})
+  );
+});
 
 export const VideoQualitySelectItem = React.forwardRef<
   HTMLDivElement,
@@ -489,11 +481,12 @@ export const VideoQualitySelectItem = React.forwardRef<
         className
       )}
       {...props}
-      ref={forwardedRef}>
+      ref={forwardedRef}
+    >
       <Player.SelectItemText>{children}</Player.SelectItemText>
       <Player.SelectItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
         <CheckIcon className="h-4 w-4" />
       </Player.SelectItemIndicator>
     </Player.VideoQualitySelectItem>
-  )
-})
+  );
+});
diff --git a/packages/app/components/ui/TitleTextItem.tsx b/packages/app/components/ui/TitleTextItem.tsx
index b4122f53f..d5aa442c7 100644
--- a/packages/app/components/ui/TitleTextItem.tsx
+++ b/packages/app/components/ui/TitleTextItem.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
+import React from 'react';
 
 const TitleTextItem = ({
   title,
   text,
 }: {
-  title: string
-  text?: string | number
+  title: string;
+  text?: string | number;
 }) => {
   return (
     <div className="flex items-center gap-2">
       <p className="font-semibold">{title}</p>
       <p>{text}</p>
     </div>
-  )
-}
+  );
+};
 
-export default TitleTextItem
+export default TitleTextItem;
diff --git a/packages/app/components/ui/accordion.tsx b/packages/app/components/ui/accordion.tsx
index 6a8094575..c3242a1d2 100644
--- a/packages/app/components/ui/accordion.tsx
+++ b/packages/app/components/ui/accordion.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDown } from 'lucide-react'
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -14,14 +14,11 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn(
-      'border-b border-border text-foreground',
-      className
-    )}
+    className={cn('border-b border-border text-foreground', className)}
     {...props}
   />
-))
-AccordionItem.displayName = 'AccordionItem'
+));
+AccordionItem.displayName = 'AccordionItem';
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -34,13 +31,14 @@ const AccordionTrigger = React.forwardRef<
         'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
         className
       )}
-      {...props}>
+      {...props}
+    >
       {children}
       <ChevronDown className="h-4 w-4 shrink-0 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>,
@@ -49,16 +47,12 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}>
+    {...props}
+  >
     <div className={cn('pb-4 pt-0', className)}>{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/app/components/ui/alert-dialog.tsx b/packages/app/components/ui/alert-dialog.tsx
index 881c79578..1f098e8d7 100644
--- a/packages/app/components/ui/alert-dialog.tsx
+++ b/packages/app/components/ui/alert-dialog.tsx
@@ -1,16 +1,16 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from '@/lib/utils/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils/utils';
+import { buttonVariants } from '@/components/ui/button';
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -24,9 +24,8 @@ const AlertDialogOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName =
-  AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -43,9 +42,8 @@ const AlertDialogContent = React.forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName =
-  AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -58,8 +56,8 @@ const AlertDialogHeader = ({
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 const AlertDialogFooter = ({
   className,
@@ -72,8 +70,8 @@ const AlertDialogFooter = ({
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -84,23 +82,21 @@ const AlertDialogTitle = React.forwardRef<
     className={cn('text-lg font-semibold', className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<
-    typeof AlertDialogPrimitive.Description
-  >
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -111,9 +107,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName =
-  AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -128,9 +123,8 @@ const AlertDialogCancel = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName =
-  AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -144,4 +138,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/packages/app/components/ui/alert.tsx b/packages/app/components/ui/alert.tsx
index 9c3567051..9a02626f2 100644
--- a/packages/app/components/ui/alert.tsx
+++ b/packages/app/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-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/utils'
+import { cn } from '@/lib/utils/utils';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
@@ -17,12 +17,11 @@ const alertVariants = cva(
       variant: 'default',
     },
   }
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof alertVariants>
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
   <div
     ref={ref}
@@ -30,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = 'Alert'
+));
+Alert.displayName = 'Alert';
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -39,14 +38,11 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn(
-      'mb-1 font-medium leading-none tracking-tight',
-      className
-    )}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
     {...props}
   />
-))
-AlertTitle.displayName = 'AlertTitle'
+));
+AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -57,7 +53,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/app/components/ui/aspect-ratio.tsx b/packages/app/components/ui/aspect-ratio.tsx
index 794c6f4cd..aaabffbc4 100644
--- a/packages/app/components/ui/aspect-ratio.tsx
+++ b/packages/app/components/ui/aspect-ratio.tsx
@@ -1,7 +1,7 @@
-'use client'
+'use client';
 
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 
-const AspectRatio = AspectRatioPrimitive.Root
+const AspectRatio = AspectRatioPrimitive.Root;
 
-export { AspectRatio }
+export { AspectRatio };
diff --git a/packages/app/components/ui/avatar.tsx b/packages/app/components/ui/avatar.tsx
index 9b049962e..5e24f4c5b 100644
--- a/packages/app/components/ui/avatar.tsx
+++ b/packages/app/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -17,8 +17,8 @@ const Avatar = React.forwardRef<
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
     className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -44,7 +44,7 @@ const AvatarFallback = React.forwardRef<
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/packages/app/components/ui/badge.tsx b/packages/app/components/ui/badge.tsx
index 59d6f3313..d9ddea770 100644
--- a/packages/app/components/ui/badge.tsx
+++ b/packages/app/components/ui/badge.tsx
@@ -1,7 +1,7 @@
-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/utils'
+import { cn } from '@/lib/utils/utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-xl px-3 py-1.5  transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -20,7 +20,7 @@ const badgeVariants = cva(
       variant: 'default',
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -28,11 +28,8 @@ export interface BadgeProps
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/packages/app/components/ui/button.tsx b/packages/app/components/ui/button.tsx
index 68a56da8b..d8af63282 100644
--- a/packages/app/components/ui/button.tsx
+++ b/packages/app/components/ui/button.tsx
@@ -1,9 +1,9 @@
-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 '@/lib/utils/utils'
-import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils/utils';
+import { Loader2 } from 'lucide-react';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -12,8 +12,7 @@ const buttonVariants = cva(
       variant: {
         primary:
           'bg-gradient-to-b text-white from-[#3D22BA] to-[#6426EF] border-primary hover:from-[#3D22BA]/80 hover:to-[#6426EF]/80',
-        default:
-          'bg-primary text-primary-foreground hover:bg-opacity-80',
+        default: 'bg-primary text-primary-foreground hover:bg-opacity-80',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         'destructive-outline':
@@ -41,13 +40,13 @@ const buttonVariants = cva(
       size: 'default',
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-  loading?: boolean
+  asChild?: boolean;
+  loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -64,19 +63,20 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
-    const Comp = asChild ? Slot : 'button'
+    const Comp = asChild ? Slot : 'button';
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         disabled={disabled || loading}
-        {...props}>
+        {...props}
+      >
         {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
         {children}
       </Comp>
-    )
+    );
   }
-)
-Button.displayName = 'Button'
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/packages/app/components/ui/calendar.tsx b/packages/app/components/ui/calendar.tsx
index 93e3fcee8..9558bea27 100644
--- a/packages/app/components/ui/calendar.tsx
+++ b/packages/app/components/ui/calendar.tsx
@@ -1,13 +1,13 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DayPicker } from 'react-day-picker'
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
 
-import { cn } from '@/lib/utils/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils/utils';
+import { buttonVariants } from '@/components/ui/button';
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
@@ -20,8 +20,7 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
-        months:
-          'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
         month: 'space-y-4',
         caption: 'flex justify-center pt-1 relative items-center',
         caption_label: 'text-sm font-medium',
@@ -55,17 +54,13 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => (
-          <ChevronLeft className="h-4 w-4" />
-        ),
-        IconRight: ({ ...props }) => (
-          <ChevronRight className="h-4 w-4" />
-        ),
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = 'Calendar'
+Calendar.displayName = 'Calendar';
 
-export { Calendar }
+export { Calendar };
diff --git a/packages/app/components/ui/card.tsx b/packages/app/components/ui/card.tsx
index ecca78049..4d78a3a35 100644
--- a/packages/app/components/ui/card.tsx
+++ b/packages/app/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -14,8 +14,8 @@ const Card = React.forwardRef<
     )}
     {...props}
   />
-))
-Card.displayName = 'Card'
+));
+Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn('flex flex-col space-y-1.5 p-3 lg:p-6', className)}
     {...props}
   />
-))
-CardHeader.displayName = 'CardHeader'
+));
+CardHeader.displayName = 'CardHeader';
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const CardTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-CardTitle.displayName = 'CardTitle'
+));
+CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,20 +53,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-3 pt-0 lg:p-6', className)}
-    {...props}
-  />
-))
-CardContent.displayName = 'CardContent'
+  <div ref={ref} className={cn('p-3 pt-0 lg:p-6', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -77,8 +73,8 @@ const CardFooter = React.forwardRef<
     className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
-))
-CardFooter.displayName = 'CardFooter'
+));
+CardFooter.displayName = 'CardFooter';
 
 export {
   Card,
@@ -87,4 +83,4 @@ export {
   CardTitle,
   CardDescription,
   CardContent,
-}
+};
diff --git a/packages/app/components/ui/checkbox.tsx b/packages/app/components/ui/checkbox.tsx
index 2e7481740..4b46c8f3e 100644
--- a/packages/app/components/ui/checkbox.tsx
+++ b/packages/app/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -16,13 +16,15 @@ const Checkbox = React.forwardRef<
       'peer h-4 w-4 shrink-0 rounded-lg border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}>
+      className={cn('flex items-center justify-center text-current')}
+    >
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/packages/app/components/ui/combo-box.tsx b/packages/app/components/ui/combo-box.tsx
index c6b458c33..028be3c58 100644
--- a/packages/app/components/ui/combo-box.tsx
+++ b/packages/app/components/ui/combo-box.tsx
@@ -1,26 +1,26 @@
-import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils/utils';
+import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from '@/components/ui/command'
+} from '@/components/ui/command';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
-import Image from 'next/image'
+} from '@/components/ui/popover';
+import Image from 'next/image';
 
 interface Item {
-  label: string
-  value: string
-  logo?: string
+  label: string;
+  value: string;
+  logo?: string;
 }
 
 const renderLogo = (logo?: string) => (
@@ -31,7 +31,7 @@ const renderLogo = (logo?: string) => (
     width={20}
     height={20}
   />
-)
+);
 
 export default function Combobox({
   placeholder = 'Select item',
@@ -41,17 +41,17 @@ export default function Combobox({
   logo,
   variant = 'outline',
 }: {
-  placeholder?: string
-  items?: Item[]
-  value: string
-  valueKey?: string
-  labelKey?: string
-  logo?: boolean
-  variant?: 'outline' | 'primary' | 'ghost'
-  setValue: (value: string) => void
+  placeholder?: string;
+  items?: Item[];
+  value: string;
+  valueKey?: string;
+  labelKey?: string;
+  logo?: boolean;
+  variant?: 'outline' | 'primary' | 'ghost';
+  setValue: (value: string) => void;
 }) {
-  const [open, setOpen] = React.useState(false)
-  const orgLogo = items.find((item) => item.label === value)?.logo
+  const [open, setOpen] = React.useState(false);
+  const orgLogo = items.find((item) => item.label === value)?.logo;
 
   return (
     <Popover modal={true} open={open} onOpenChange={setOpen}>
@@ -60,7 +60,8 @@ export default function Combobox({
           variant={'outline'}
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between">
+          className="w-full justify-between"
+        >
           {logo && renderLogo(orgLogo)}
           {value ? value : placeholder}
 
@@ -78,13 +79,13 @@ export default function Combobox({
                 value={item.label}
                 onSelect={(currentValue) => {
                   setValue(
-                    currentValue.toLowerCase() ===
-                      item.label.toLowerCase()
+                    currentValue.toLowerCase() === item.label.toLowerCase()
                       ? item.value
                       : value
-                  )
-                  setOpen(false)
-                }}>
+                  );
+                  setOpen(false);
+                }}
+              >
                 <Check
                   className={cn(
                     'mr-2 h-4 w-4',
@@ -98,5 +99,5 @@ export default function Combobox({
         </Command>
       </PopoverContent>
     </Popover>
-  )
+  );
 }
diff --git a/packages/app/components/ui/command.tsx b/packages/app/components/ui/command.tsx
index 21efac471..c6889e177 100644
--- a/packages/app/components/ui/command.tsx
+++ b/packages/app/components/ui/command.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
-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 '@/lib/utils/utils'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { cn } from '@/lib/utils/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -20,15 +20,12 @@ const Command = React.forwardRef<
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
 
-const CommandDialog = ({
-  children,
-  ...props
-}: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
@@ -37,16 +34,14 @@ const CommandDialog = ({
         </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 px-3"
-    cmdk-input-wrapper="">
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
@@ -57,9 +52,9 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -67,15 +62,12 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn(
-      'max-h-[300px] overflow-y-auto overflow-x-hidden',
-      className
-    )}
+    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>,
@@ -86,9 +78,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>,
@@ -102,9 +94,9 @@ const CommandGroup = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -115,8 +107,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>,
@@ -130,9 +122,9 @@ const CommandItem = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -146,9 +138,9 @@ const CommandShortcut = ({
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = 'CommandShortcut'
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
 
 export {
   Command,
@@ -160,4 +152,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/packages/app/components/ui/context-menu.tsx b/packages/app/components/ui/context-menu.tsx
index afce09cde..d08aec3b7 100644
--- a/packages/app/components/ui/context-menu.tsx
+++ b/packages/app/components/ui/context-menu.tsx
@@ -1,29 +1,27 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
-const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenu = ContextMenuPrimitive.Root;
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.SubTrigger
-  > & {
-    inset?: boolean
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
@@ -33,19 +31,17 @@ const ContextMenuSubTrigger = React.forwardRef<
       inset && 'pl-8',
       className
     )}
-    {...props}>
+    {...props}
+  >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName =
-  ContextMenuPrimitive.SubTrigger.displayName
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.SubContent
-  >
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.SubContent
     ref={ref}
@@ -55,9 +51,8 @@ const ContextMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuSubContent.displayName =
-  ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -73,14 +68,13 @@ const ContextMenuContent = React.forwardRef<
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName =
-  ContextMenuPrimitive.Content.displayName
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
@@ -92,14 +86,12 @@ const ContextMenuItem = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.CheckboxItem
-  >
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
@@ -108,7 +100,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
       className
     )}
     checked={checked}
-    {...props}>
+    {...props}
+  >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
@@ -116,15 +109,13 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-))
+));
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+  ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.RadioItem
-  >
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
   <ContextMenuPrimitive.RadioItem
     ref={ref}
@@ -132,7 +123,8 @@ const ContextMenuRadioItem = React.forwardRef<
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
@@ -140,16 +132,13 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName =
-  ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.Label
-  > & {
-    inset?: boolean
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
@@ -161,23 +150,20 @@ const ContextMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.Separator
-  >
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
     className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
-))
-ContextMenuSeparator.displayName =
-  ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
   className,
@@ -191,9 +177,9 @@ const ContextMenuShortcut = ({
       )}
       {...props}
     />
-  )
-}
-ContextMenuShortcut.displayName = 'ContextMenuShortcut'
+  );
+};
+ContextMenuShortcut.displayName = 'ContextMenuShortcut';
 
 export {
   ContextMenu,
@@ -211,4 +197,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};
diff --git a/packages/app/components/ui/crezenda.tsx b/packages/app/components/ui/crezenda.tsx
index a6ea62ec4..06de897cd 100644
--- a/packages/app/components/ui/crezenda.tsx
+++ b/packages/app/components/ui/crezenda.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
+import * as React from 'react';
+import { useMediaQuery } from '../../lib/hooks/useMediaQuery';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 import {
   Dialog,
   DialogClose,
@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
+} from '@/components/ui/dialog';
 import {
   Drawer,
   DrawerClose,
@@ -23,177 +23,139 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/components/ui/drawer'
+} from '@/components/ui/drawer';
 
 interface BaseProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 interface RootCredenzaProps extends BaseProps {
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 interface CredenzaProps extends BaseProps {
-  className?: string
-  asChild?: true
+  className?: string;
+  asChild?: true;
 }
 
-const desktop = '(min-width: 768px)'
+const desktop = '(min-width: 768px)';
 
 const Credenza = ({ children, ...props }: RootCredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const Credenza = isDesktop ? Dialog : Drawer
+  const isDesktop = useMediaQuery(desktop);
+  const Credenza = isDesktop ? Dialog : Drawer;
 
-  return <Credenza {...props}>{children}</Credenza>
-}
+  return <Credenza {...props}>{children}</Credenza>;
+};
 
-const CredenzaTrigger = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaTrigger = isDesktop ? DialogTrigger : DrawerTrigger
+const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaTrigger = isDesktop ? DialogTrigger : DrawerTrigger;
 
   return (
     <CredenzaTrigger className={className} {...props}>
       {children}
     </CredenzaTrigger>
-  )
-}
+  );
+};
 
-const CredenzaClose = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaClose = isDesktop ? DialogClose : DrawerClose
+const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
 
   return (
     <CredenzaClose className={className} {...props}>
       {children}
     </CredenzaClose>
-  )
-}
+  );
+};
 
-const CredenzaContent = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaContent = isDesktop ? DialogContent : DrawerContent
+const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaContent = isDesktop ? DialogContent : DrawerContent;
 
   return (
     <CredenzaContent className={className} {...props}>
       {children}
     </CredenzaContent>
-  )
-}
+  );
+};
 
 const CredenzaDescription = ({
   className,
   children,
   ...props
 }: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaDescription = isDesktop
-    ? DialogDescription
-    : DrawerDescription
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaDescription = isDesktop ? DialogDescription : DrawerDescription;
 
   return (
     <CredenzaDescription className={className} {...props}>
       {children}
     </CredenzaDescription>
-  )
-}
+  );
+};
 
-const CredenzaHeader = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaHeader = isDesktop ? DialogHeader : DrawerHeader
+const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaHeader = isDesktop ? DialogHeader : DrawerHeader;
 
   return (
     <CredenzaHeader className={className} {...props}>
       {children}
     </CredenzaHeader>
-  )
-}
+  );
+};
 
-const CredenzaTitle = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaTitle = isDesktop ? DialogTitle : DrawerTitle
+const CredenzaTitle = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaTitle = isDesktop ? DialogTitle : DrawerTitle;
 
   return (
     <CredenzaTitle className={className} {...props}>
       {children}
     </CredenzaTitle>
-  )
-}
+  );
+};
 
-const CredenzaBody = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
+const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
 
-  const DialogBody = ({
-    className,
-    children,
-    ...props
-  }: CredenzaProps) => {
+  const DialogBody = ({ className, children, ...props }: CredenzaProps) => {
     return (
       <div className={className} {...props}>
         {children}
       </div>
-    )
-  }
-
-  const DrawerBody = ({
-    className,
-    children,
-    ...props
-  }: CredenzaProps) => {
+    );
+  };
+
+  const DrawerBody = ({ className, children, ...props }: CredenzaProps) => {
     return (
       <div className={cn('px-4', className)} {...props}>
         {children}
       </div>
-    )
-  }
+    );
+  };
 
-  const CredenzaBody = isDesktop ? DialogBody : DrawerBody
+  const CredenzaBody = isDesktop ? DialogBody : DrawerBody;
 
   return (
     <CredenzaBody className={className} {...props}>
       {children}
     </CredenzaBody>
-  )
-}
+  );
+};
 
-const CredenzaFooter = ({
-  className,
-  children,
-  ...props
-}: CredenzaProps) => {
-  const isDesktop = useMediaQuery(desktop)
-  const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter
+const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
+  const isDesktop = useMediaQuery(desktop);
+  const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter;
 
   return (
     <CredenzaFooter className={className} {...props}>
       {children}
     </CredenzaFooter>
-  )
-}
+  );
+};
 
 export {
   Credenza,
@@ -205,4 +167,4 @@ export {
   CredenzaTitle,
   CredenzaBody,
   CredenzaFooter,
-}
+};
diff --git a/packages/app/components/ui/dialog.tsx b/packages/app/components/ui/dialog.tsx
index 3290ea62f..72ea7e98d 100644
--- a/packages/app/components/ui/dialog.tsx
+++ b/packages/app/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-'use client'
+'use client';
 
-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 '@/lib/utils/utils'
+import { cn } from '@/lib/utils/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>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -41,7 +41,8 @@ const DialogContent = React.forwardRef<
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
-      {...props}>
+      {...props}
+    >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
@@ -49,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -63,8 +64,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-)
-DialogHeader.displayName = 'DialogHeader'
+);
+DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({
   className,
@@ -77,8 +78,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-)
-DialogFooter.displayName = 'DialogFooter'
+);
+DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -92,8 +93,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -104,9 +105,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,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/packages/app/components/ui/drawer.tsx b/packages/app/components/ui/drawer.tsx
index 83965df0e..6c05145c0 100644
--- a/packages/app/components/ui/drawer.tsx
+++ b/packages/app/components/ui/drawer.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -13,14 +13,14 @@ const Drawer = ({
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-)
-Drawer.displayName = 'Drawer'
+);
+Drawer.displayName = 'Drawer';
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,8 +31,8 @@ const DrawerOverlay = React.forwardRef<
     className={cn('fixed inset-0 z-50 bg-black/80', className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -46,27 +46,25 @@ const DrawerContent = React.forwardRef<
         'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-white',
         className
       )}
-      {...props}>
+      {...props}
+    >
       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
-DrawerContent.displayName = 'DrawerContent'
+));
+DrawerContent.displayName = 'DrawerContent';
 
 const DrawerHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'grid gap-1.5 p-4 text-center sm:text-left',
-      className
-    )}
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
     {...props}
   />
-)
-DrawerHeader.displayName = 'DrawerHeader'
+);
+DrawerHeader.displayName = 'DrawerHeader';
 
 const DrawerFooter = ({
   className,
@@ -76,8 +74,8 @@ const DrawerFooter = ({
     className={cn('mt-auto flex flex-col gap-2 p-4', className)}
     {...props}
   />
-)
-DrawerFooter.displayName = 'DrawerFooter'
+);
+DrawerFooter.displayName = 'DrawerFooter';
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -91,8 +89,8 @@ const DrawerTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -103,9 +101,8 @@ const DrawerDescription = React.forwardRef<
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-DrawerDescription.displayName =
-  DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
@@ -118,4 +115,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/packages/app/components/ui/dropdown-menu.tsx b/packages/app/components/ui/dropdown-menu.tsx
index f2bae5b7c..3ba3642ff 100644
--- a/packages/app/components/ui/dropdown-menu.tsx
+++ b/packages/app/components/ui/dropdown-menu.tsx
@@ -1,29 +1,27 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.SubTrigger
-  > & {
-    inset?: boolean
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -33,19 +31,18 @@ const DropdownMenuSubTrigger = React.forwardRef<
       inset && 'pl-8',
       className
     )}
-    {...props}>
+    {...props}
+  >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.SubContent
-  >
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
@@ -55,9 +52,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -74,16 +71,13 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName =
-  DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.Item
-  > & {
-    inset?: boolean
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -95,14 +89,12 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.CheckboxItem
-  >
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
@@ -111,7 +103,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       className
     )}
     checked={checked}
-    {...props}>
+    {...props}
+  >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
@@ -119,15 +112,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.RadioItem
-  >
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
@@ -135,7 +126,8 @@ const DropdownMenuRadioItem = React.forwardRef<
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
@@ -143,16 +135,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName =
-  DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.Label
-  > & {
-    inset?: boolean
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -164,24 +153,20 @@ const DropdownMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName =
-  DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.Separator
-  >
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName =
-  DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -189,15 +174,12 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        'ml-auto text-xs tracking-widest opacity-60',
-        className
-      )}
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
@@ -215,4 +197,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/packages/app/components/ui/form.tsx b/packages/app/components/ui/form.tsx
index 071018a5b..8419d32a9 100644
--- a/packages/app/components/ui/form.tsx
+++ b/packages/app/components/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,23 +8,23 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from 'react-hook-form'
+} from 'react-hook-form';
 
-import { cn } from '@/lib/utils/utils'
-import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils/utils';
+import { Label } from '@/components/ui/label';
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -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,22 +59,22 @@ 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
-)
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
@@ -84,17 +84,17 @@ const FormItem = React.forwardRef<
         {...props}
       />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = 'FormItem'
+  );
+});
+FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-    required?: boolean
+    required?: boolean;
   }
 >(({ className, required, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -104,16 +104,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()
+    useFormField();
 
   return (
     <Slot
@@ -127,15 +127,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
@@ -144,35 +144,33 @@ const FormDescription = React.forwardRef<
       className={cn('text-sm text-muted-foreground', 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 (
     <p
       ref={ref}
       id={formMessageId}
-      className={cn(
-        'text-sm font-medium text-destructive',
-        className
-      )}
-      {...props}>
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = 'FormMessage'
+  );
+});
+FormMessage.displayName = 'FormMessage';
 
 export {
   useFormField,
@@ -183,4 +181,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/packages/app/components/ui/hover-card.tsx b/packages/app/components/ui/hover-card.tsx
index 93dab56af..4e40dd757 100644
--- a/packages/app/components/ui/hover-card.tsx
+++ b/packages/app/components/ui/hover-card.tsx
@@ -1,34 +1,29 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(
-  (
-    { className, align = 'center', sideOffset = 4, ...props },
-    ref
-  ) => (
-    <HoverCardPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/packages/app/components/ui/input.tsx b/packages/app/components/ui/input.tsx
index f095afa9d..c3108e437 100644
--- a/packages/app/components/ui/input.tsx
+++ b/packages/app/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -17,9 +17,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = 'Input'
+);
+Input.displayName = 'Input';
 
-export { Input }
+export { Input };
diff --git a/packages/app/components/ui/label.tsx b/packages/app/components/ui/label.tsx
index de81f8dc4..301661c9b 100644
--- a/packages/app/components/ui/label.tsx
+++ b/packages/app/components/ui/label.tsx
@@ -1,18 +1,18 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 type LabelProps = {
-  required?: boolean
-}
+  required?: boolean;
+};
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-)
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -28,7 +28,7 @@ const Label = React.forwardRef<
     />
     {required && <span className="text-red-500"> *</span>}
   </div>
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/packages/app/components/ui/navigation-menu.tsx b/packages/app/components/ui/navigation-menu.tsx
index fee552958..e19f90581 100644
--- a/packages/app/components/ui/navigation-menu.tsx
+++ b/packages/app/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -15,12 +15,13 @@ const NavigationMenu = React.forwardRef<
       'relative flex w-full items-center justify-center',
       className
     )}
-    {...props}>
+    {...props}
+  >
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -34,41 +35,36 @@ const NavigationMenuList = React.forwardRef<
     )}
     {...props}
   />
-))
-NavigationMenuList.displayName =
-  NavigationMenuPrimitive.List.displayName
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
   'group inline-flex h-10 w-full bg-background  lg:w-max lg:items-center lg:justify-center border-b border-1 border-accent lg:rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-background hover:text-accent-foreground focus:border focus:border-background focus:bg-background focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-background/50 data-[state=open]:bg-background/50'
-)
+);
 
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<
-    typeof NavigationMenuPrimitive.Trigger
-  >
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Trigger
     ref={ref}
     className={cn(navigationMenuTriggerStyle(), 'group', className)}
-    {...props}>
+    {...props}
+  >
     {children}{' '}
     <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName =
-  NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<
-    typeof NavigationMenuPrimitive.Content
-  >
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Content
     ref={ref}
@@ -78,17 +74,14 @@ const NavigationMenuContent = React.forwardRef<
     )}
     {...props}
   />
-))
-NavigationMenuContent.displayName =
-  NavigationMenuPrimitive.Content.displayName
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<
-    typeof NavigationMenuPrimitive.Viewport
-  >
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
@@ -100,15 +93,13 @@ const NavigationMenuViewport = React.forwardRef<
       {...props}
     />
   </div>
-))
+));
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+  NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<
-    typeof NavigationMenuPrimitive.Indicator
-  >
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Indicator
     ref={ref}
@@ -116,12 +107,13 @@ const NavigationMenuIndicator = React.forwardRef<
       'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-))
+));
 NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+  NavigationMenuPrimitive.Indicator.displayName;
 
 export {
   navigationMenuTriggerStyle,
@@ -133,4 +125,4 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
-}
+};
diff --git a/packages/app/components/ui/popover.tsx b/packages/app/components/ui/popover.tsx
index 56f3868d9..76ea7e575 100644
--- a/packages/app/components/ui/popover.tsx
+++ b/packages/app/components/ui/popover.tsx
@@ -1,36 +1,31 @@
-'use client'
+'use client';
 
-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 '@/lib/utils/utils'
+import { cn } from '@/lib/utils/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>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(
-  (
-    { className, align = 'center', sideOffset = 4, ...props },
-    ref
-  ) => (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        ref={ref}
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'z-50 mr-2 w-72 rounded-xl border bg-popover p-2 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
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-)
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 mr-2 w-72 rounded-xl border bg-popover p-2 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
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/packages/app/components/ui/progress.tsx b/packages/app/components/ui/progress.tsx
index 62fc4d521..635a12fb0 100644
--- a/packages/app/components/ui/progress.tsx
+++ b/packages/app/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -15,13 +15,14 @@ const Progress = React.forwardRef<
       'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <ProgressPrimitive.Indicator
       className="h-full w-full flex-1 bg-primary transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };
diff --git a/packages/app/components/ui/resizable.tsx b/packages/app/components/ui/resizable.tsx
index db05685e9..6ede1d29e 100644
--- a/packages/app/components/ui/resizable.tsx
+++ b/packages/app/components/ui/resizable.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import { GripVertical } from 'lucide-react'
-import * as ResizablePrimitive from 'react-resizable-panels'
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const ResizablePanelGroup = ({
   className,
@@ -16,31 +16,30 @@ const ResizablePanelGroup = ({
     )}
     {...props}
   />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<
-  typeof ResizablePrimitive.PanelResizeHandle
-> & {
-  withHandle?: boolean
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
       'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className
     )}
-    {...props}>
+    {...props}
+  >
     {withHandle && (
       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
-)
+);
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/packages/app/components/ui/select.tsx b/packages/app/components/ui/select.tsx
index fe8d680b2..0bd19e9a2 100644
--- a/packages/app/components/ui/select.tsx
+++ b/packages/app/components/ui/select.tsx
@@ -1,16 +1,16 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/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>,
@@ -22,20 +22,19 @@ const SelectTrigger = React.forwardRef<
       'flex h-10 w-full items-center justify-between rounded-xl border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
-    {...props}>
+    {...props}
+  >
     {children}
     <SelectPrimitive.Icon asChild>
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<
-    typeof SelectPrimitive.ScrollUpButton
-  >
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
@@ -43,18 +42,16 @@ const SelectScrollUpButton = React.forwardRef<
       'flex cursor-default items-center justify-center py-1',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName =
-  SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<
-    typeof SelectPrimitive.ScrollDownButton
-  >
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
@@ -62,12 +59,13 @@ const SelectScrollDownButton = React.forwardRef<
       'flex cursor-default items-center justify-center py-1',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -83,21 +81,23 @@ const SelectContent = React.forwardRef<
         className
       )}
       position={position}
-      {...props}>
+      {...props}
+    >
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
           'p-1',
           position === 'popper' &&
             'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}>
+        )}
+      >
         {children}
       </SelectPrimitive.Viewport>
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -105,14 +105,11 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn(
-      'py-1.5 pl-8 pr-2 text-sm font-semibold',
-      className
-    )}
+    className={cn('py-1.5 pl-8 pr-2 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>,
@@ -124,7 +121,8 @@ const SelectItem = React.forwardRef<
       'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
-    {...props}>
+    {...props}
+  >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
@@ -133,8 +131,8 @@ const SelectItem = React.forwardRef<
 
     <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>,
@@ -145,8 +143,8 @@ const SelectSeparator = React.forwardRef<
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -159,4 +157,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/packages/app/components/ui/separator.tsx b/packages/app/components/ui/separator.tsx
index 2c1d319ce..f4bd5eb55 100644
--- a/packages/app/components/ui/separator.tsx
+++ b/packages/app/components/ui/separator.tsx
@@ -1,21 +1,16 @@
-'use client'
+'use client';
 
-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/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
   (
-    {
-      className,
-      orientation = 'horizontal',
-      decorative = true,
-      ...props
-    },
+    { className, orientation = 'horizontal', decorative = true, ...props },
     ref
   ) => (
     <SeparatorPrimitive.Root
@@ -24,15 +19,13 @@ const Separator = React.forwardRef<
       orientation={orientation}
       className={cn(
         'shrink-0 bg-border',
-        orientation === 'horizontal'
-          ? 'h-[1px] w-full'
-          : 'h-full w-[1px]',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className
       )}
       {...props}
     />
   )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/packages/app/components/ui/skeleton.tsx b/packages/app/components/ui/skeleton.tsx
index f96d2c82b..a37213049 100644
--- a/packages/app/components/ui/skeleton.tsx
+++ b/packages/app/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 function Skeleton({
   className,
@@ -9,7 +9,7 @@ function Skeleton({
       className={cn('animate-pulse rounded-md bg-muted', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/packages/app/components/ui/sonner.tsx b/packages/app/components/ui/sonner.tsx
index 595cff5c8..b38ad1e0d 100644
--- a/packages/app/components/ui/sonner.tsx
+++ b/packages/app/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-'use client'
+'use client';
 
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner } from 'sonner'
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
+  const { theme = 'system' } = useTheme();
 
   return (
     <Sonner
@@ -25,7 +25,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/packages/app/components/ui/switch.tsx b/packages/app/components/ui/switch.tsx
index 02674ac4f..d29433c6d 100644
--- a/packages/app/components/ui/switch.tsx
+++ b/packages/app/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -15,14 +15,15 @@ const Switch = React.forwardRef<
       className
     )}
     {...props}
-    ref={ref}>
+    ref={ref}
+  >
     <SwitchPrimitives.Thumb
       className={cn(
         'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/packages/app/components/ui/table.tsx b/packages/app/components/ui/table.tsx
index 8805a643d..b02b3ac40 100644
--- a/packages/app/components/ui/table.tsx
+++ b/packages/app/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -13,20 +13,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'
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -37,8 +33,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,
@@ -52,8 +48,8 @@ const TableFooter = React.forwardRef<
     )}
     {...props}
   />
-))
-TableFooter.displayName = 'TableFooter'
+));
+TableFooter.displayName = 'TableFooter';
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -67,8 +63,8 @@ const TableRow = React.forwardRef<
     )}
     {...props}
   />
-))
-TableRow.displayName = 'TableRow'
+));
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -82,8 +78,8 @@ const TableHead = React.forwardRef<
     )}
     {...props}
   />
-))
-TableHead.displayName = 'TableHead'
+));
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -91,14 +87,11 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
-      'p-4 align-middle [&:has([role=checkbox])]:pr-0',
-      className
-    )}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
     {...props}
   />
-))
-TableCell.displayName = 'TableCell'
+));
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -109,8 +102,8 @@ const TableCaption = React.forwardRef<
     className={cn('mt-4 text-sm text-muted-foreground', className)}
     {...props}
   />
-))
-TableCaption.displayName = 'TableCaption'
+));
+TableCaption.displayName = 'TableCaption';
 
 export {
   Table,
@@ -121,4 +114,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/packages/app/components/ui/tabs.tsx b/packages/app/components/ui/tabs.tsx
index dae8cf8e3..cb04c151f 100644
--- a/packages/app/components/ui/tabs.tsx
+++ b/packages/app/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -19,8 +19,8 @@ const TabsList = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -34,8 +34,8 @@ const TabsTrigger = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -49,7 +49,7 @@ const TabsContent = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/packages/app/components/ui/text-placeholder.tsx b/packages/app/components/ui/text-placeholder.tsx
index 8c23bddbe..1dacbe06b 100644
--- a/packages/app/components/ui/text-placeholder.tsx
+++ b/packages/app/components/ui/text-placeholder.tsx
@@ -1,23 +1,22 @@
-'use client'
-import { toast } from 'sonner'
-import { Copy } from 'lucide-react'
+'use client';
+import { toast } from 'sonner';
+import { Copy } from 'lucide-react';
 
 export default function TextPlaceholder({ text }: { text: string }) {
   const handleCopy = (item: string) => {
-    navigator.clipboard.writeText(item)
-    toast.success('Copied to your clipboard')
-  }
+    navigator.clipboard.writeText(item);
+    toast.success('Copied to your clipboard');
+  };
 
   return (
     <div
       className="group flex w-full items-center rounded-xl border hover:bg-gray-200"
-      onClick={() => handleCopy(text)}>
-      <span className="m-2 flex-1 cursor-pointer truncate rounded">
-        {text}
-      </span>
+      onClick={() => handleCopy(text)}
+    >
+      <span className="m-2 flex-1 cursor-pointer truncate rounded">{text}</span>
       <Copy className="mr-2 p-1 opacity-0 group-hover:opacity-100">
         Copy to clipboard
       </Copy>
     </div>
-  )
+  );
 }
diff --git a/packages/app/components/ui/textarea.tsx b/packages/app/components/ui/textarea.tsx
index 130890ee9..a79e1a6c2 100644
--- a/packages/app/components/ui/textarea.tsx
+++ b/packages/app/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils/utils'
+import { cn } from '@/lib/utils/utils';
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -16,9 +16,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Textarea.displayName = 'Textarea'
+);
+Textarea.displayName = 'Textarea';
 
-export { Textarea }
+export { Textarea };
diff --git a/packages/app/components/ui/tooltip.tsx b/packages/app/components/ui/tooltip.tsx
index 6f87480e4..99e07f712 100644
--- a/packages/app/components/ui/tooltip.tsx
+++ b/packages/app/components/ui/tooltip.tsx
@@ -1,15 +1,15 @@
-'use client'
+'use client';
 
-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 '@/lib/utils/utils'
+import { cn } from '@/lib/utils/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>,
@@ -24,7 +24,7 @@ const TooltipContent = React.forwardRef<
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/app/lib/actions/auth.ts b/packages/app/lib/actions/auth.ts
index 9d3d4e049..3f6f3c040 100644
--- a/packages/app/lib/actions/auth.ts
+++ b/packages/app/lib/actions/auth.ts
@@ -1,19 +1,19 @@
-'use server'
+'use server';
 
-import { cookies } from 'next/headers'
+import { cookies } from 'next/headers';
 
 export async function storeSession({
   token,
   address,
 }: {
-  token: string
-  address: string
+  token: string;
+  address: string;
 }) {
-  cookies().set('user-session', token)
-  cookies().set('user-address', address)
+  cookies().set('user-session', token);
+  cookies().set('user-address', address);
 }
 
 export async function deleteSession() {
-  cookies().delete('user-session')
-  cookies().delete('user-address')
+  cookies().delete('user-session');
+  cookies().delete('user-address');
 }
diff --git a/packages/app/lib/actions/chat.ts b/packages/app/lib/actions/chat.ts
index 47bd40574..3a0a8d496 100644
--- a/packages/app/lib/actions/chat.ts
+++ b/packages/app/lib/actions/chat.ts
@@ -1,23 +1,23 @@
-'use server'
-import { cookies } from 'next/headers'
-import { revalidatePath } from 'next/cache'
-import { IChat } from 'streameth-new-server/src/interfaces/chat.interface'
-import { createChat } from '../services/chatService'
+'use server';
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+import { IChat } from 'streameth-new-server/src/interfaces/chat.interface';
+import { createChat } from '../services/chatService';
 
 export const createChatAction = async ({ chat }: { chat: IChat }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await createChat({
     chat,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating stage')
+    throw new Error('Error creating stage');
   }
   //   revalidatePath('/')
-  return response
-}
+  return response;
+};
diff --git a/packages/app/lib/actions/cookieConsent.ts b/packages/app/lib/actions/cookieConsent.ts
index 355709636..6cb55300b 100644
--- a/packages/app/lib/actions/cookieConsent.ts
+++ b/packages/app/lib/actions/cookieConsent.ts
@@ -1,16 +1,16 @@
-'use server'
+'use server';
 
-import { cookies } from 'next/headers'
+import { cookies } from 'next/headers';
 
-const EXPIRE_DATE_YEAR = 12 * 31 * 24 * 60 * 60 * 1000 // 1 year
+const EXPIRE_DATE_YEAR = 12 * 31 * 24 * 60 * 60 * 1000; // 1 year
 
 export const hasCookie = async (name: string) => {
-  return cookies().has(name)
-}
+  return cookies().has(name);
+};
 
 export const getCookie = async (name: string) => {
-  return cookies().get(name)
-}
+  return cookies().get(name);
+};
 
 /**
  *
@@ -26,5 +26,5 @@ export const setCookie = async (
   cookies().set(cookieName, cookieValue, {
     secure: true,
     expires: Date.now() + expires,
-  })
-}
+  });
+};
diff --git a/packages/app/lib/actions/events.ts b/packages/app/lib/actions/events.ts
index b924d8e47..13f16f561 100644
--- a/packages/app/lib/actions/events.ts
+++ b/packages/app/lib/actions/events.ts
@@ -1,173 +1,165 @@
-'use server'
+'use server';
 import {
   createEvent,
   updateEvent,
   deleteEvent,
   fetchEvent,
   syncEventImport,
-} from '@/lib/services/eventService'
-import { cookies } from 'next/headers'
-import { IExtendedEvent } from '../types'
-import { IEvent } from 'streameth-new-server/src/interfaces/event.interface'
-import { revalidatePath } from 'next/cache'
-import GoogleSheetService from '@/lib/services/googleSheetService'
-import GoogleDriveService from '@/lib/services/googleDriveService'
-export const createEventAction = async ({
-  event,
-}: {
-  event: IEvent
-}) => {
-  const authToken = cookies().get('user-session')?.value
+} from '@/lib/services/eventService';
+import { cookies } from 'next/headers';
+import { IExtendedEvent } from '../types';
+import { IEvent } from 'streameth-new-server/src/interfaces/event.interface';
+import { revalidatePath } from 'next/cache';
+import GoogleSheetService from '@/lib/services/googleSheetService';
+import GoogleDriveService from '@/lib/services/googleDriveService';
+export const createEventAction = async ({ event }: { event: IEvent }) => {
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
   const response = await createEvent({
     event: { ...event, unlisted: true },
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating event')
+    throw new Error('Error creating event');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const updateEventAction = async ({
   event,
 }: {
-  event: IExtendedEvent
+  event: IExtendedEvent;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   // TODO
   // @ts-ignore
-  delete event.createdAt
+  delete event.createdAt;
   // @ts-ignore
-  delete event.updatedAt
+  delete event.updatedAt;
   // @ts-ignore
-  delete event.__v
+  delete event.__v;
 
   const response = await updateEvent({
     event: { ...event },
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error updating event')
+    throw new Error('Error updating event');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const deleteEventAction = async ({
   eventId,
   organizationId,
 }: {
-  eventId: string
-  organizationId: string
+  eventId: string;
+  organizationId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
 
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await deleteEvent({
     eventId,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error deleting event')
+    throw new Error('Error deleting event');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const signUp = async (
   prevState: {
-    message: string
-    success: boolean
+    message: string;
+    success: boolean;
   },
   formData: FormData
 ) => {
-  const email = formData.get('email') as string
-  const eventId = formData.get('eventId') as string
+  const email = formData.get('email') as string;
+  const eventId = formData.get('eventId') as string;
 
-  const event = await fetchEvent({ eventId })
-  if (!event) return { message: 'Failed to sign up', success: false }
+  const event = await fetchEvent({ eventId });
+  if (!event) return { message: 'Failed to sign up', success: false };
   if (
     !event.dataImporter ||
     event.dataImporter.length === 0 ||
     event.dataImporter[0].type !== 'gsheet' ||
     !event.dataImporter[0].config.sheetId
   )
-    return { message: 'Failed to sign up', success: false }
+    return { message: 'Failed to sign up', success: false };
 
   try {
     const googleSheetService = new GoogleSheetService(
       event.dataImporter[0].config.sheetId
-    )
+    );
 
     await googleSheetService.appendData('Email Sign-Ups', [
       [new Date().toString(), email],
-    ])
+    ]);
 
-    return { message: 'Signed up successfully', success: true }
+    return { message: 'Signed up successfully', success: true };
   } catch (error) {
-    console.error('Error appending data to Google Sheets:', error)
-    return { message: 'Failed to sign up', success: false }
+    console.error('Error appending data to Google Sheets:', error);
+    return { message: 'Failed to sign up', success: false };
   }
-}
+};
 
 export const syncEventImportAction = async ({
   eventId,
   organizationId,
 }: {
-  eventId: string
-  organizationId: string
+  eventId: string;
+  organizationId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await syncEventImport({
     eventId,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error syncing event')
+    throw new Error('Error syncing event');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const createGoogleSheetAction = async ({
   eventName,
 }: {
-  eventName: string
+  eventName: string;
 }) => {
-  const templateSheetId =
-    '1VaukqmViY09M_xuXT3GkaY6sAet5KeKZmjMuhT_C-kc'
-  const authToken = cookies().get('user-session')?.value
+  const templateSheetId = '1VaukqmViY09M_xuXT3GkaY6sAet5KeKZmjMuhT_C-kc';
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
-  const googleDriveService = new GoogleDriveService()
-  const sheetId = await googleDriveService.copyFile(
-    templateSheetId,
-    eventName
-  )
+  const googleDriveService = new GoogleDriveService();
+  const sheetId = await googleDriveService.copyFile(templateSheetId, eventName);
 
   if (!sheetId) {
-    throw new Error('Error creating Google Sheet')
+    throw new Error('Error creating Google Sheet');
   }
 
-  return sheetId
-}
+  return sheetId;
+};
diff --git a/packages/app/lib/actions/fileUpload.ts b/packages/app/lib/actions/fileUpload.ts
index c67911385..dc45f3d91 100644
--- a/packages/app/lib/actions/fileUpload.ts
+++ b/packages/app/lib/actions/fileUpload.ts
@@ -1,24 +1,24 @@
-'use server'
-import S3Service from '@/lib/services/spacesService'
+'use server';
+import S3Service from '@/lib/services/spacesService';
 
 export async function upload(data: FormData) {
-  'use server'
+  'use server';
 
-  const file: File | null = data.get('file') as unknown as File
+  const file: File | null = data.get('file') as unknown as File;
   if (!file) {
-    throw new Error('No file uploaded')
+    throw new Error('No file uploaded');
   }
 
-  const bytes = await file.arrayBuffer()
-  const buffer = Buffer.from(bytes)
+  const bytes = await file.arrayBuffer();
+  const buffer = Buffer.from(bytes);
 
-  const s3 = new S3Service()
+  const s3 = new S3Service();
   const result = await s3.uploadFile(
     'bucketname',
     file.name,
     buffer,
     file.type
-  )
+  );
 
-  return { success: true }
+  return { success: true };
 }
diff --git a/packages/app/lib/actions/livekit.ts b/packages/app/lib/actions/livekit.ts
index 28618d5b6..9af3a0a80 100644
--- a/packages/app/lib/actions/livekit.ts
+++ b/packages/app/lib/actions/livekit.ts
@@ -1,6 +1,6 @@
-'use server'
+'use server';
 
-import { AccessToken } from 'livekit-server-sdk'
+import { AccessToken } from 'livekit-server-sdk';
 
 export async function createStreamerToken(slug: string) {
   const token = new AccessToken(
@@ -9,36 +9,33 @@ export async function createStreamerToken(slug: string) {
     {
       identity: 'identity',
     }
-  )
+  );
 
   token.addGrant({
     room: slug,
     roomJoin: true,
     canPublish: true,
     canPublishData: true,
-  })
+  });
 
-  return await Promise.resolve(token.toJwt())
+  return await Promise.resolve(token.toJwt());
 }
 
-export async function createViewerToken(
-  roomName: string,
-  identity: string
-) {
+export async function createViewerToken(roomName: string, identity: string) {
   const token = new AccessToken(
     process.env.LIVEKIT_API_KEY,
     process.env.LIVEKIT_API_SECRET,
     {
       identity: identity,
     }
-  )
+  );
 
   token.addGrant({
     room: roomName,
     roomJoin: true,
     canPublish: false,
     canPublishData: true,
-  })
+  });
 
-  return await Promise.resolve(token.toJwt())
+  return await Promise.resolve(token.toJwt());
 }
diff --git a/packages/app/lib/actions/livepeer.ts b/packages/app/lib/actions/livepeer.ts
index c28b5764d..1e4701759 100644
--- a/packages/app/lib/actions/livepeer.ts
+++ b/packages/app/lib/actions/livepeer.ts
@@ -1,40 +1,40 @@
-'use server'
+'use server';
 
-import { fetchAsset } from '../services/sessionService'
-import { createAssetAction } from './sessions'
+import { fetchAsset } from '../services/sessionService';
+import { createAssetAction } from './sessions';
 
 export const getVideoPhaseAction = async (assetId: string) => {
   try {
-    const asset = await fetchAsset({ assetId })
+    const asset = await fetchAsset({ assetId });
     if (!asset) {
-      return null
+      return null;
     }
 
-    return asset.status?.phase.toString()
+    return asset.status?.phase.toString();
   } catch (e) {
-    console.error('Error fetching asset: ', assetId)
-    return null
+    console.error('Error fetching asset: ', assetId);
+    return null;
   }
-}
+};
 
 export const getVideoUrlAction = async (assetId: string) => {
   try {
-    const asset = await fetchAsset({ assetId })
+    const asset = await fetchAsset({ assetId });
     if (asset?.playbackUrl) {
-      return asset.playbackUrl
+      return asset.playbackUrl;
     }
 
-    return null
+    return null;
   } catch (e) {
-    console.error('Error fetching asset: ', assetId)
-    return null
+    console.error('Error fetching asset: ', assetId);
+    return null;
   }
-}
+};
 
 interface UrlActionParams {
-  assetId?: string
-  tusEndpoint?: string
-  url?: string
+  assetId?: string;
+  tusEndpoint?: string;
+  url?: string;
 }
 
 export const getUrlAction = async (
@@ -43,20 +43,20 @@ export const getUrlAction = async (
   try {
     const asset = await createAssetAction({
       fileName,
-    })
+    });
 
     if (!asset) {
-      return null
+      return null;
     }
     const params: UrlActionParams = {
       tusEndpoint: asset.tusEndpoint,
       url: asset.url,
       assetId: asset.assetId,
-    }
+    };
 
-    return params
+    return params;
   } catch (error) {
-    console.error('Error fetching a Livepeer url:', error)
-    return null
+    console.error('Error fetching a Livepeer url:', error);
+    return null;
   }
-}
+};
diff --git a/packages/app/lib/actions/nftCollection.ts b/packages/app/lib/actions/nftCollection.ts
index 227bcca2f..c87a45867 100644
--- a/packages/app/lib/actions/nftCollection.ts
+++ b/packages/app/lib/actions/nftCollection.ts
@@ -1,77 +1,77 @@
-'use server'
-import { cookies } from 'next/headers'
-import { revalidatePath } from 'next/cache'
+'use server';
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
 import {
   createNFTCollection,
   generateNFTCollectionMetadata,
   updateNFTCollection,
-} from '../services/nftCollectionService'
-import { IExtendedNftCollections } from '../types'
-import { INftCollection } from 'streameth-new-server/src/interfaces/nft.collection.interface'
+} from '../services/nftCollectionService';
+import { IExtendedNftCollections } from '../types';
+import { INftCollection } from 'streameth-new-server/src/interfaces/nft.collection.interface';
 
 export const createNFTCollectionAction = async ({
   nftCollection,
 }: {
-  nftCollection: INftCollection
+  nftCollection: INftCollection;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await createNFTCollection({
     nftCollection: nftCollection,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating NFt Collection')
+    throw new Error('Error creating NFt Collection');
   }
-  revalidatePath('/studio')
+  revalidatePath('/studio');
 
-  return response
-}
+  return response;
+};
 
 export const updateNFTCollectionAction = async ({
   collection,
 }: {
-  collection: IExtendedNftCollections
+  collection: IExtendedNftCollections;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await updateNFTCollection({
     collection: { ...collection },
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error updating collection')
+    throw new Error('Error updating collection');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const generateNFTCollectionMetadataAction = async ({
   nftCollection,
 }: {
-  nftCollection: INftCollection
+  nftCollection: INftCollection;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await generateNFTCollectionMetadata({
     nftCollection: nftCollection,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating NFt Collection')
+    throw new Error('Error creating NFt Collection');
   }
-  revalidatePath('/studio')
+  revalidatePath('/studio');
 
-  return response
-}
+  return response;
+};
diff --git a/packages/app/lib/actions/organizations.ts b/packages/app/lib/actions/organizations.ts
index 93b783ad0..560f8c7cb 100644
--- a/packages/app/lib/actions/organizations.ts
+++ b/packages/app/lib/actions/organizations.ts
@@ -1,26 +1,26 @@
-'use server'
+'use server';
 import {
   addOrganizationMember,
   createOrganization,
   deleteDestination,
   deleteTeamMember,
   updateOrganization,
-} from '@/lib/services/organizationService'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-import { IOrganization } from 'streameth-new-server/src/interfaces/organization.interface'
-import { redirect } from 'next/navigation'
-import { IExtendedOrganization } from '../types'
+} from '@/lib/services/organizationService';
+import { revalidatePath } from 'next/cache';
+import { cookies } from 'next/headers';
+import { IOrganization } from 'streameth-new-server/src/interfaces/organization.interface';
+import { redirect } from 'next/navigation';
+import { IExtendedOrganization } from '../types';
 
 export const createOrganizationAction = async ({
   organization,
 }: {
-  organization: IOrganization
+  organization: IOrganization;
 }) => {
-  const authToken = cookies().get('user-session')?.value
-  const walletAddress = cookies().get('user-address')?.value
+  const authToken = cookies().get('user-session')?.value;
+  const walletAddress = cookies().get('user-address')?.value;
   if (!authToken || !walletAddress) {
-    throw new Error('No user session or wallet address found')
+    throw new Error('No user session or wallet address found');
   }
   const response = await createOrganization({
     organization: {
@@ -28,24 +28,24 @@ export const createOrganizationAction = async ({
       walletAddress: walletAddress,
     },
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating organization')
+    throw new Error('Error creating organization');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const updateOrganizationAction = async ({
   organization,
 }: {
-  organization: IExtendedOrganization
+  organization: IExtendedOrganization;
 }) => {
-  const authToken = cookies().get('user-session')?.value
-  const walletAddress = cookies().get('user-address')?.value
+  const authToken = cookies().get('user-session')?.value;
+  const walletAddress = cookies().get('user-address')?.value;
   if (!authToken || !walletAddress) {
-    throw new Error('No user session or wallet address found')
+    throw new Error('No user session or wallet address found');
   }
   const response = await updateOrganization({
     organization: {
@@ -53,84 +53,84 @@ export const updateOrganizationAction = async ({
       walletAddress: walletAddress,
     },
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error updating organization')
+    throw new Error('Error updating organization');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const addOrganizationMemberAction = async ({
   memberAddress,
   organizationId,
 }: {
-  organizationId: string
-  memberAddress: string
+  organizationId: string;
+  memberAddress: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session or wallet address found')
+    throw new Error('No user session or wallet address found');
   }
 
   const response = await addOrganizationMember({
     organizationId,
     memberAddress,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error adding organization member')
+    throw new Error('Error adding organization member');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const deleteTeamMemberAction = async ({
   memberWalletAddress,
   organizationId,
 }: {
-  memberWalletAddress: string
-  organizationId: string
+  memberWalletAddress: string;
+  organizationId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await deleteTeamMember({
     memberWalletAddress,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error deleting team member action')
+    throw new Error('Error deleting team member action');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const deleteDestinationAction = async ({
   destinationId,
   organizationId,
 }: {
-  destinationId: string
-  organizationId: string
+  destinationId: string;
+  organizationId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await deleteDestination({
     destinationId,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error deleting team member action')
+    throw new Error('Error deleting team member action');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
diff --git a/packages/app/lib/actions/sessions.ts b/packages/app/lib/actions/sessions.ts
index be4a596ce..d84b2176e 100644
--- a/packages/app/lib/actions/sessions.ts
+++ b/packages/app/lib/actions/sessions.ts
@@ -1,7 +1,7 @@
-'use server'
-import { Livepeer } from 'livepeer'
-import { cookies } from 'next/headers'
-import { IExtendedSession } from '../types'
+'use server';
+import { Livepeer } from 'livepeer';
+import { cookies } from 'next/headers';
+import { IExtendedSession } from '../types';
 import {
   updateSession,
   createSession,
@@ -10,55 +10,50 @@ import {
   createAsset,
   generateThumbnail,
   uploadSessionToYouTube,
-} from '../services/sessionService'
+} from '../services/sessionService';
 import {
   ISession,
   SessionType,
-} from 'streameth-new-server/src/interfaces/session.interface'
-import { revalidatePath } from 'next/cache'
+} from 'streameth-new-server/src/interfaces/session.interface';
+import { revalidatePath } from 'next/cache';
 
 const livepeer = new Livepeer({
   apiKey: process.env.LIVEPEER_API_KEY,
-})
-
-export const updateAssetAction = async (
-  session: IExtendedSession
-) => {
-  const asset = await livepeer.asset.update(
-    session.assetId as string,
-    {
-      storage: {
-        ipfs: true,
-      },
-    }
-  )
+});
+
+export const updateAssetAction = async (session: IExtendedSession) => {
+  const asset = await livepeer.asset.update(session.assetId as string, {
+    storage: {
+      ipfs: true,
+    },
+  });
   await updateSessionAction({
     session: {
       ...session,
       ipfsURI: asset.asset?.storage?.ipfs?.nftMetadata?.cid,
     },
-  })
-}
+  });
+};
 
 export const createSessionAction = async ({
   session,
 }: {
-  session: ISession
+  session: ISession;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await createSession({
     session,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error creating session')
+    throw new Error('Error creating session');
   }
-  return response
-}
+  return response;
+};
 
 export const createClipAction = async ({
   playbackId,
@@ -67,15 +62,15 @@ export const createClipAction = async ({
   end,
   recordingId,
 }: {
-  playbackId: string
-  sessionId: string
-  start: number
-  end: number
-  recordingId: string
+  playbackId: string;
+  sessionId: string;
+  start: number;
+  end: number;
+  recordingId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await createClip({
@@ -85,108 +80,102 @@ export const createClipAction = async ({
     start,
     authToken,
     recordingId,
-  })
+  });
   if (!response) {
-    throw new Error('Error creating session')
+    throw new Error('Error creating session');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const updateSessionAction = async ({
   session,
 }: {
-  session: IExtendedSession | ISession
+  session: IExtendedSession | ISession;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await updateSession({
     session: session as IExtendedSession,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error updating session')
+    throw new Error('Error updating session');
   }
-  revalidatePath(`/studio/${session.organizationId}`)
-  return response
-}
+  revalidatePath(`/studio/${session.organizationId}`);
+  return response;
+};
 
 export const deleteSessionAction = async ({
   organizationId,
   sessionId,
 }: {
-  organizationId: string
-  sessionId: string
+  organizationId: string;
+  sessionId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await deleteSession({
     sessionId,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error updating session')
+    throw new Error('Error updating session');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
-export const createAssetAction = async ({
-  fileName,
-}: {
-  fileName: string
-}) => {
-  const authToken = cookies().get('user-session')?.value
+export const createAssetAction = async ({ fileName }: { fileName: string }) => {
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   try {
-    const asset = await createAsset({ fileName, authToken })
+    const asset = await createAsset({ fileName, authToken });
     if (!asset) {
-      return null
+      return null;
     }
 
-    return asset
+    return asset;
   } catch (e) {
-    console.error('Error creating asset')
-    return null
+    console.error('Error creating asset');
+    return null;
   }
-}
+};
 
-export const generateThumbnailAction = async (
-  session: IExtendedSession
-) => {
+export const generateThumbnailAction = async (session: IExtendedSession) => {
   try {
-    const res = await generateThumbnail({ session })
+    const res = await generateThumbnail({ session });
 
-    return res
+    return res;
   } catch (e) {
-    console.error('Error generating thumbnail acton')
-    return null
+    console.error('Error generating thumbnail acton');
+    return null;
   }
-}
+};
 export const uploadSessionToYouTubeAction = async ({
   sessionId,
   organizationId,
   socialId,
   type,
 }: {
-  sessionId: string
-  organizationId: string
-  socialId: string
-  type: string
+  sessionId: string;
+  organizationId: string;
+  socialId: string;
+  type: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   try {
@@ -196,12 +185,12 @@ export const uploadSessionToYouTubeAction = async ({
       socialId,
       type,
       authToken,
-    })
-    revalidatePath('/studio')
+    });
+    revalidatePath('/studio');
 
-    return res
+    return res;
   } catch (e) {
-    console.error('Error generating thumbnail acton')
-    return null
+    console.error('Error generating thumbnail acton');
+    return null;
   }
-}
+};
diff --git a/packages/app/lib/actions/stages.ts b/packages/app/lib/actions/stages.ts
index c71e59c12..37d765f27 100644
--- a/packages/app/lib/actions/stages.ts
+++ b/packages/app/lib/actions/stages.ts
@@ -1,79 +1,79 @@
-'use server'
-import { Livepeer } from 'livepeer'
+'use server';
+import { Livepeer } from 'livepeer';
 import {
   createMultistream,
   createStage,
   deleteMultistream,
   deleteStage,
   updateStage,
-} from '../services/stageService'
-import { cookies } from 'next/headers'
-import { revalidatePath } from 'next/cache'
-import { IExtendedStage } from '../types'
+} from '../services/stageService';
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+import { IExtendedStage } from '../types';
 
 export const createStageAction = async ({
   stage,
 }: {
-  stage: IExtendedStage
+  stage: IExtendedStage;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await createStage({
     stage: stage,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating stage')
+    throw new Error('Error creating stage');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const deleteStageAction = async ({
   stageId,
   organizationId,
 }: {
-  stageId: string
-  organizationId: string
+  stageId: string;
+  organizationId: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await deleteStage({
     stageId,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error deleting stage')
+    throw new Error('Error deleting stage');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
 
 export const createMultistreamAction = async (
   prevState: {
-    message: string
-    success: boolean
+    message: string;
+    success: boolean;
   },
   formData: FormData
 ) => {
-  'use server'
-  const streamId = formData.get('streamId') as string
-  const name = formData.get('name') as string
-  const url = formData.get('url') as string
-  const streamKey = formData.get('streamKey') as string
-  const organizationId = formData.get('organizationId') as string
+  'use server';
+  const streamId = formData.get('streamId') as string;
+  const name = formData.get('name') as string;
+  const url = formData.get('url') as string;
+  const streamKey = formData.get('streamKey') as string;
+  const organizationId = formData.get('organizationId') as string;
 
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
   try {
     const response = await createMultistream({
@@ -83,58 +83,58 @@ export const createMultistreamAction = async (
       targetStreamKey: streamKey,
       authToken,
       organizationId,
-    })
-    revalidatePath('/studio')
+    });
+    revalidatePath('/studio');
     if (!response) {
-      throw new Error('Error creating multistream')
+      throw new Error('Error creating multistream');
     }
-    return { message: response.message, success: true }
+    return { message: response.message, success: true };
   } catch (error) {
-    console.error(error)
-    return { message: 'Error creating multistream', success: false }
+    console.error(error);
+    return { message: 'Error creating multistream', success: false };
   }
-}
+};
 
 export const deleteMultistreamAction = async (
   streamId: string,
   organizationId: string,
   targetId: string
 ) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
   const response = await deleteMultistream({
     streamId,
     targetId,
     organizationId,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error deleting stage')
+    throw new Error('Error deleting stage');
   }
-  revalidatePath('/studio')
+  revalidatePath('/studio');
 
-  return response
-}
+  return response;
+};
 
 export const updateStageAction = async ({
   stage,
 }: {
-  stage: IExtendedStage
+  stage: IExtendedStage;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await updateStage({
     stage: { ...stage },
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error updating stage')
+    throw new Error('Error updating stage');
   }
-  revalidatePath('/studio')
-  return response
-}
+  revalidatePath('/studio');
+  return response;
+};
diff --git a/packages/app/lib/actions/state.ts b/packages/app/lib/actions/state.ts
index 87bc8fa4e..122f9aad9 100644
--- a/packages/app/lib/actions/state.ts
+++ b/packages/app/lib/actions/state.ts
@@ -1,25 +1,21 @@
-'use server'
+'use server';
 
-import { IState } from 'streameth-new-server/src/interfaces/state.interface'
-import { cookies } from 'next/headers'
-import { createState } from '../services/stateService'
+import { IState } from 'streameth-new-server/src/interfaces/state.interface';
+import { cookies } from 'next/headers';
+import { createState } from '../services/stateService';
 
-export const createStateAction = async ({
-  state,
-}: {
-  state: IState
-}) => {
-  const authToken = cookies().get('user-session')?.value
+export const createStateAction = async ({ state }: { state: IState }) => {
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
-  console.log('Creating state:', state)
+  console.log('Creating state:', state);
   const response = await createState({
     state,
     authToken,
-  })
+  });
   if (!response) {
-    throw new Error('Error creating state')
+    throw new Error('Error creating state');
   }
-  return response
-}
+  return response;
+};
diff --git a/packages/app/lib/actions/support.ts b/packages/app/lib/actions/support.ts
index 61d5f109e..020658c52 100644
--- a/packages/app/lib/actions/support.ts
+++ b/packages/app/lib/actions/support.ts
@@ -1,25 +1,25 @@
-'use server'
-import { cookies } from 'next/headers'
-import { createSupportTicket } from '../services/supportService'
+'use server';
+import { cookies } from 'next/headers';
+import { createSupportTicket } from '../services/supportService';
 
 export const createSupportTicketAction = async ({
   message,
 }: {
-  message: string
+  message: string;
 }) => {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
 
   const response = await createSupportTicket({
     message,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error creating support ticket')
+    throw new Error('Error creating support ticket');
   }
 
-  return response
-}
+  return response;
+};
diff --git a/packages/app/lib/actions/users.ts b/packages/app/lib/actions/users.ts
index 67c6dc928..9e773c9ad 100644
--- a/packages/app/lib/actions/users.ts
+++ b/packages/app/lib/actions/users.ts
@@ -1,25 +1,21 @@
-'use server'
+'use server';
 
-import { cookies } from 'next/headers'
-import { fetchUserData } from '../services/userService'
+import { cookies } from 'next/headers';
+import { fetchUserData } from '../services/userService';
 
-export const fetchUserAction = async ({
-  userId,
-}: {
-  userId?: string
-}) => {
-  const authToken = cookies().get('user-session')?.value
-  const userAddress = cookies().get('user-address')?.value
+export const fetchUserAction = async ({ userId }: { userId?: string }) => {
+  const authToken = cookies().get('user-session')?.value;
+  const userAddress = cookies().get('user-address')?.value;
   if (!authToken) {
-    throw new Error('No user session found')
+    throw new Error('No user session found');
   }
   const response = await fetchUserData({
     userId: userId ?? userAddress,
     authToken,
-  })
+  });
 
   if (!response) {
-    throw new Error('Error fetching user data')
+    throw new Error('Error fetching user data');
   }
-  return response
-}
+  return response;
+};
diff --git a/packages/app/lib/context/GeneralContext.tsx b/packages/app/lib/context/GeneralContext.tsx
index 2258e275c..504e7cc4d 100644
--- a/packages/app/lib/context/GeneralContext.tsx
+++ b/packages/app/lib/context/GeneralContext.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
 
-import { SpeedInsights } from '@vercel/speed-insights/next'
-import { Analytics } from '@vercel/analytics/react'
-import SiweContext from './SiweContext'
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Analytics } from '@vercel/analytics/react';
+import SiweContext from './SiweContext';
 
 const GeneralContext = ({ children }: { children: any }) => {
   return (
@@ -12,7 +12,7 @@ const GeneralContext = ({ children }: { children: any }) => {
 
       {children}
     </SiweContext>
-  )
-}
+  );
+};
 
-export default GeneralContext
+export default GeneralContext;
diff --git a/packages/app/lib/context/LoadingContext.tsx b/packages/app/lib/context/LoadingContext.tsx
index 1658aec42..6adef8e60 100644
--- a/packages/app/lib/context/LoadingContext.tsx
+++ b/packages/app/lib/context/LoadingContext.tsx
@@ -1,28 +1,28 @@
-'use client'
-import { useState, createContext } from 'react'
-import Image from 'next/image'
+'use client';
+import { useState, createContext } from 'react';
+import Image from 'next/image';
 export const LoadingContext = createContext<{
-  isLoading: boolean
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }>({
   isLoading: true,
   setIsLoading: () => {},
-})
+});
 
 export const LoadingContextProvider = ({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) => {
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(true);
 
   return (
     <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
       <LoadingModal isLoading={false} />
       {children}
     </LoadingContext.Provider>
-  )
-}
+  );
+};
 
 const LoadingModal = ({ isLoading }: { isLoading: boolean }) => {
   if (isLoading) {
@@ -38,6 +38,6 @@ const LoadingModal = ({ isLoading }: { isLoading: boolean }) => {
         />
         <p className="animate-pulse text-xl font-bold">Loading...</p>
       </div>
-    )
+    );
   }
-}
+};
diff --git a/packages/app/lib/context/MobileContext.tsx b/packages/app/lib/context/MobileContext.tsx
index 21afe1d00..08221a209 100644
--- a/packages/app/lib/context/MobileContext.tsx
+++ b/packages/app/lib/context/MobileContext.tsx
@@ -1,31 +1,22 @@
-'use client'
-import {
-  useState,
-  useLayoutEffect,
-  useContext,
-  createContext,
-} from 'react'
-import { useMediaQuery } from '@/lib/hooks/useMediaQuery'
-import { LoadingContext } from './LoadingContext'
+'use client';
+import { useState, useLayoutEffect, useContext, createContext } from 'react';
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+import { LoadingContext } from './LoadingContext';
 const MobileContext = createContext<{
-  isMobile: boolean
+  isMobile: boolean;
 }>({
   isMobile: true,
-})
+});
 
-const MobileContextProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const desktop = '(min-width: 768px)'
-  const [isMobile, setIsMobile] = useState(!useMediaQuery(desktop))
+const MobileContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const desktop = '(min-width: 768px)';
+  const [isMobile, setIsMobile] = useState(!useMediaQuery(desktop));
 
   return (
     <MobileContext.Provider value={{ isMobile }}>
       {children}
     </MobileContext.Provider>
-  )
-}
+  );
+};
 
-export { MobileContext, MobileContextProvider }
+export { MobileContext, MobileContextProvider };
diff --git a/packages/app/lib/context/ProviderContext.tsx b/packages/app/lib/context/ProviderContext.tsx
index f48c04f33..ae40d8f49 100644
--- a/packages/app/lib/context/ProviderContext.tsx
+++ b/packages/app/lib/context/ProviderContext.tsx
@@ -1,12 +1,8 @@
-'use client'
-import React from 'react'
-import { PrivyProvider } from '@privy-io/react-auth'
+'use client';
+import React from 'react';
+import { PrivyProvider } from '@privy-io/react-auth';
 
-const ProviderContext = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
+const ProviderContext = ({ children }: { children: React.ReactNode }) => {
   return (
     <PrivyProvider
       appId={process.env.NEXT_PUBLIC_PRIVY_ID!}
@@ -18,21 +14,16 @@ const ProviderContext = ({
           logo: 'https://streameth.org/logo.png',
           landingHeader: 'Connect to StreamETH',
         },
-        loginMethods: [
-          'email',
-          'wallet',
-          'google',
-          'github',
-          'farcaster',
-        ],
+        loginMethods: ['email', 'wallet', 'google', 'github', 'farcaster'],
         // Create embedded wallets for users who don't have a wallet
         embeddedWallets: {
           createOnLogin: 'users-without-wallets',
         },
-      }}>
+      }}
+    >
       {children}
     </PrivyProvider>
-  )
-}
+  );
+};
 
-export default ProviderContext
+export default ProviderContext;
diff --git a/packages/app/lib/context/SiweContext.tsx b/packages/app/lib/context/SiweContext.tsx
index 7ca45251c..00789784e 100644
--- a/packages/app/lib/context/SiweContext.tsx
+++ b/packages/app/lib/context/SiweContext.tsx
@@ -1,15 +1,12 @@
-'use client'
+'use client';
 
-import { PropsWithChildren } from 'react'
-import { http, createConfig, WagmiProvider } from 'wagmi'
-import { mainnet, base, baseSepolia } from 'wagmi/chains'
-import { ConnectKitProvider, getDefaultConfig } from 'connectkit'
+import { PropsWithChildren } from 'react';
+import { http, createConfig, WagmiProvider } from 'wagmi';
+import { mainnet, base, baseSepolia } from 'wagmi/chains';
+import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
 
-import {
-  QueryClient,
-  QueryClientProvider,
-} from '@tanstack/react-query'
-import ProviderContext from './ProviderContext'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import ProviderContext from './ProviderContext';
 
 const config = createConfig(
   getDefaultConfig({
@@ -19,14 +16,11 @@ const config = createConfig(
       // RPC URL for each chain
       [mainnet.id]: http(),
       [base.id]: http(),
-      [baseSepolia.id]: http(
-        process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL || ''
-      ),
+      [baseSepolia.id]: http(process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL || ''),
     },
     ssr: true,
     // Required API Keys
-    walletConnectProjectId:
-      process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
+    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
 
     // Required App Info
     appName: 'StreamETH',
@@ -35,9 +29,9 @@ const config = createConfig(
     appUrl: 'https://streameth.org/', // your app's url
     appIcon: 'https://streameth.org/logo.png', // your app's icon, no bigger than 1024x1024px (max. 1MB)
   })
-)
+);
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
 const SiweContext = (props: PropsWithChildren) => {
   return (
@@ -48,7 +42,7 @@ const SiweContext = (props: PropsWithChildren) => {
         </QueryClientProvider>
       </WagmiProvider>
     </ProviderContext>
-  )
-}
+  );
+};
 
-export default SiweContext
+export default SiweContext;
diff --git a/packages/app/lib/context/TopNavbarContext.tsx b/packages/app/lib/context/TopNavbarContext.tsx
index 5a8ef963c..746c0ad3f 100644
--- a/packages/app/lib/context/TopNavbarContext.tsx
+++ b/packages/app/lib/context/TopNavbarContext.tsx
@@ -1,27 +1,25 @@
-'use client'
-import { createContext, useState } from 'react'
+'use client';
+import { createContext, useState } from 'react';
 
 export interface Page {
-  name: string
-  href: string
-  icon: JSX.Element
+  name: string;
+  href: string;
+  icon: JSX.Element;
 }
 
 export const TopNavbarContext = createContext<{
-  logo: string
-  setLogo: React.Dispatch<React.SetStateAction<string>>
-  pages: Page[]
-  setPages: React.Dispatch<React.SetStateAction<Page[]>>
-  homePath?: string
-  setHomePath: React.Dispatch<React.SetStateAction<string>>
-  stages: Page[] | undefined
-  setStages: React.Dispatch<React.SetStateAction<Page[] | undefined>>
-  showNav: boolean
-  setShowNav: React.Dispatch<React.SetStateAction<boolean>>
-  components: React.ReactNode[]
-  setComponents: React.Dispatch<
-    React.SetStateAction<React.ReactNode[]>
-  >
+  logo: string;
+  setLogo: React.Dispatch<React.SetStateAction<string>>;
+  pages: Page[];
+  setPages: React.Dispatch<React.SetStateAction<Page[]>>;
+  homePath?: string;
+  setHomePath: React.Dispatch<React.SetStateAction<string>>;
+  stages: Page[] | undefined;
+  setStages: React.Dispatch<React.SetStateAction<Page[] | undefined>>;
+  showNav: boolean;
+  setShowNav: React.Dispatch<React.SetStateAction<boolean>>;
+  components: React.ReactNode[];
+  setComponents: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;
 }>({
   logo: '',
   setLogo: () => {},
@@ -35,19 +33,19 @@ export const TopNavbarContext = createContext<{
   setShowNav: () => {},
   components: [],
   setComponents: () => {},
-})
+});
 
 export const TopNavbarContextProvider = ({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) => {
-  const [logo, setLogo] = useState('')
-  const [homePath, setHomePath] = useState('')
-  const [pages, setPages] = useState<Page[]>([])
-  const [stages, setStages] = useState<Page[] | undefined>([])
-  const [showNav, setShowNav] = useState(true)
-  const [components, setComponents] = useState<React.ReactNode[]>([])
+  const [logo, setLogo] = useState('');
+  const [homePath, setHomePath] = useState('');
+  const [pages, setPages] = useState<Page[]>([]);
+  const [stages, setStages] = useState<Page[] | undefined>([]);
+  const [showNav, setShowNav] = useState(true);
+  const [components, setComponents] = useState<React.ReactNode[]>([]);
   return (
     <TopNavbarContext.Provider
       value={{
@@ -63,8 +61,9 @@ export const TopNavbarContextProvider = ({
         setShowNav,
         components,
         setComponents,
-      }}>
+      }}
+    >
       {children}
     </TopNavbarContext.Provider>
-  )
-}
+  );
+};
diff --git a/packages/app/lib/contract/index.ts b/packages/app/lib/contract/index.ts
index 9deb78ba2..dd5301114 100644
--- a/packages/app/lib/contract/index.ts
+++ b/packages/app/lib/contract/index.ts
@@ -1,7 +1,6 @@
-export const VideoFactoryAddress =
-  '0x9F519A0e442f5e8FB1492638b0f3aA621182A9DA'
+export const VideoFactoryAddress = '0x9F519A0e442f5e8FB1492638b0f3aA621182A9DA';
 
-export const contractChainID = 8453
+export const contractChainID = 8453;
 
 export const VideoFactoryAbi = [
   {
@@ -282,7 +281,7 @@ export const VideoFactoryAbi = [
     stateMutability: 'view',
     type: 'function',
   },
-]
+];
 
 export const VideoNFTAbi = [
   {
@@ -1182,4 +1181,4 @@ export const VideoNFTAbi = [
     stateMutability: 'nonpayable',
     type: 'function',
   },
-]
+];
diff --git a/packages/app/lib/data.ts b/packages/app/lib/data.ts
index bcdc0089a..fb8943b5b 100644
--- a/packages/app/lib/data.ts
+++ b/packages/app/lib/data.ts
@@ -1,38 +1,34 @@
-import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface'
+import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface';
 
-import { NavBarProps, IPagination, IExtendedSession } from './types'
-import FuzzySearch from 'fuzzy-search'
-import { apiUrl } from '@/lib/utils/utils'
+import { NavBarProps, IPagination, IExtendedSession } from './types';
+import FuzzySearch from 'fuzzy-search';
+import { apiUrl } from '@/lib/utils/utils';
 
-import { fetchEvent } from '@/lib/services/eventService'
-import { fetchEventStages } from '@/lib/services/stageService'
+import { fetchEvent } from '@/lib/services/eventService';
+import { fetchEventStages } from '@/lib/services/stageService';
 
 interface ApiParams {
-  event?: string
-  organization?: string
-  stageId?: string
-  page?: number
-  size?: number
-  onlyVideos?: boolean
-  published?: boolean
-  speakerIds?: string[] // Assuming speakerIds is an array of strings
-  date?: Date
-  type?: string
+  event?: string;
+  organization?: string;
+  stageId?: string;
+  page?: number;
+  size?: number;
+  onlyVideos?: boolean;
+  published?: boolean;
+  speakerIds?: string[]; // Assuming speakerIds is an array of strings
+  date?: Date;
+  type?: string;
 }
 
 function constructApiUrl(baseUrl: string, params: ApiParams): string {
   const queryParams = Object.entries(params)
     .filter(([_, value]) => value !== undefined && value !== null)
     .map(([key, value]) => {
-      const formattedValue = Array.isArray(value)
-        ? value.join(',')
-        : value
-      return `${encodeURIComponent(key)}=${encodeURIComponent(
-        formattedValue
-      )}`
+      const formattedValue = Array.isArray(value) ? value.join(',') : value;
+      return `${encodeURIComponent(key)}=${encodeURIComponent(formattedValue)}`;
     })
-    .join('&')
-  return `${baseUrl}?${queryParams}`
+    .join('&');
+  return `${baseUrl}?${queryParams}`;
 }
 
 export async function fetchAllSessions({
@@ -47,19 +43,19 @@ export async function fetchAllSessions({
   searchQuery = '',
   type,
 }: {
-  event?: string
-  organizationSlug?: string
-  stageId?: string
-  speakerIds?: string[]
-  onlyVideos?: boolean
-  published?: boolean
-  page?: number
-  limit?: number
-  searchQuery?: string
-  type?: string
+  event?: string;
+  organizationSlug?: string;
+  stageId?: string;
+  speakerIds?: string[];
+  onlyVideos?: boolean;
+  published?: boolean;
+  page?: number;
+  limit?: number;
+  searchQuery?: string;
+  type?: string;
 }): Promise<{
-  sessions: IExtendedSession[]
-  pagination: IPagination
+  sessions: IExtendedSession[];
+  pagination: IPagination;
 }> {
   const params: ApiParams = {
     event,
@@ -71,18 +67,18 @@ export async function fetchAllSessions({
     published,
     speakerIds,
     type,
-  }
+  };
 
   const response = await fetch(
     constructApiUrl(`${apiUrl()}/sessions`, params),
     {
       cache: 'no-store',
     }
-  )
-  const a = await response.json()
-  const allSessions = a.data
+  );
+  const a = await response.json();
+  const allSessions = a.data;
   if (searchQuery) {
-    const normalizedQuery = searchQuery.toLowerCase()
+    const normalizedQuery = searchQuery.toLowerCase();
     const fuzzySearch = new FuzzySearch(
       allSessions?.sessions,
       ['name', 'description', 'speakers.name'],
@@ -90,24 +86,21 @@ export async function fetchAllSessions({
         caseSensitive: false,
         sort: true,
       }
-    )
+    );
 
-    allSessions.sessions = fuzzySearch.search(normalizedQuery)
+    allSessions.sessions = fuzzySearch.search(normalizedQuery);
   }
 
   // Calculate total items and total pages
   const totalItems = searchQuery
     ? allSessions.sessions.length
-    : allSessions.totalDocuments
-  const totalPages = limit ? Math.ceil(totalItems / limit) : 1
+    : allSessions.totalDocuments;
+  const totalPages = limit ? Math.ceil(totalItems / limit) : 1;
 
   // Implement manual pagination for fuzzy search
-  const startIndex = (page - 1) * limit!
-  const endIndex = startIndex + limit!
-  const paginatedSessions = allSessions.sessions.slice(
-    startIndex,
-    endIndex
-  )
+  const startIndex = (page - 1) * limit!;
+  const endIndex = startIndex + limit!;
+  const paginatedSessions = allSessions.sessions.slice(startIndex, endIndex);
 
   // Return paginated data and pagination metadata
   return {
@@ -120,24 +113,22 @@ export async function fetchAllSessions({
           totalItems,
           limit,
         },
-  }
+  };
 }
 
 export async function fetchEventSpeakers({
   event,
 }: {
-  event?: string
+  event?: string;
 }): Promise<ISpeakerModel[]> {
   try {
-    const response = await fetch(
-      `${apiUrl()}/speakers/event/${event}`
-    )
-    const data = (await response.json()).data
+    const response = await fetch(`${apiUrl()}/speakers/event/${event}`);
+    const data = (await response.json()).data;
 
-    return data.map((speaker: ISpeakerModel) => speaker)
+    return data.map((speaker: ISpeakerModel) => speaker);
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching event speakers'
+    console.log(e);
+    throw 'Error fetching event speakers';
   }
 }
 
@@ -145,40 +136,36 @@ export async function fetchNavBarRoutes({
   event,
   organization,
 }: {
-  event: string
-  organization: string
+  event: string;
+  organization: string;
 }): Promise<NavBarProps> {
-  const [eventData, sessionData, speakerData, stageData] =
-    await Promise.all([
-      fetchEvent({ eventSlug: event }),
-      fetchAllSessions({ event }),
-      fetchEventSpeakers({ event }),
-      fetchEventStages({ eventId: event }),
-    ])
-
-  const pages = []
-
-  if (
-    sessionData.sessions.length > 0 &&
-    !eventData?.plugins?.hideSchedule
-  )
+  const [eventData, sessionData, speakerData, stageData] = await Promise.all([
+    fetchEvent({ eventSlug: event }),
+    fetchAllSessions({ event }),
+    fetchEventSpeakers({ event }),
+    fetchEventStages({ eventId: event }),
+  ]);
+
+  const pages = [];
+
+  if (sessionData.sessions.length > 0 && !eventData?.plugins?.hideSchedule)
     pages.push({
       href: `/${organization}/${event}#schedule`,
       name: 'Schedule',
-    })
+    });
 
   if (speakerData.length > 0)
     pages.push({
       href: `/${organization}/${event}#speakers`,
       name: 'Speakers',
-    })
+    });
 
   for (const stage of stageData) {
     if (stage.streamSettings?.streamId) {
       pages.push({
         href: `/${organization}/${event}/stage/${stage._id}`,
         name: stage.name,
-      })
+      });
     }
   }
 
@@ -187,5 +174,5 @@ export async function fetchNavBarRoutes({
     logo: eventData?.logo ?? '',
     homePath: `/${organization}/${event}`,
     showNav: true,
-  }
+  };
 }
diff --git a/packages/app/lib/hooks/useClickOutside.ts b/packages/app/lib/hooks/useClickOutside.ts
index 3097c6d72..e9c6466f1 100644
--- a/packages/app/lib/hooks/useClickOutside.ts
+++ b/packages/app/lib/hooks/useClickOutside.ts
@@ -1,6 +1,6 @@
-import { useEffect, RefObject } from 'react'
+import { useEffect, RefObject } from 'react';
 
-type EventCallback = () => void
+type EventCallback = () => void;
 
 export default function useClickOutside(
   ref: RefObject<HTMLElement>,
@@ -13,12 +13,12 @@ export default function useClickOutside(
         !ref.current.contains(event.target as Node) &&
         callBack
       ) {
-        callBack()
+        callBack();
       }
     }
-    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [ref, callBack])
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, callBack]);
 }
diff --git a/packages/app/lib/hooks/useDebounce.ts b/packages/app/lib/hooks/useDebounce.ts
index b4b1dd9be..8f8d2bffa 100644
--- a/packages/app/lib/hooks/useDebounce.ts
+++ b/packages/app/lib/hooks/useDebounce.ts
@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
 export default function useDebounce(value: string, delay: number) {
-  const [debouncedValue, setDebouncedValue] = useState(value)
+  const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(() => {
     const handler = setTimeout(() => {
-      setDebouncedValue(value)
-    }, delay)
+      setDebouncedValue(value);
+    }, delay);
 
     return () => {
-      clearTimeout(handler)
-    }
-  }, [value, delay])
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
 
-  return debouncedValue
+  return debouncedValue;
 }
diff --git a/packages/app/lib/hooks/useLocalStorage.tsx b/packages/app/lib/hooks/useLocalStorage.tsx
index fb30c4a2b..2d3fa2755 100644
--- a/packages/app/lib/hooks/useLocalStorage.tsx
+++ b/packages/app/lib/hooks/useLocalStorage.tsx
@@ -1,5 +1,5 @@
-import { useState, useContext, useEffect } from 'react'
-import { LoadingContext } from '../context/LoadingContext'
+import { useState, useContext, useEffect } from 'react';
+import { LoadingContext } from '../context/LoadingContext';
 
 function useLocalStorage<T>(key: string, initialValue: T) {
   // State to store our value
@@ -7,33 +7,33 @@ function useLocalStorage<T>(key: string, initialValue: T) {
     if (typeof window !== 'undefined') {
       try {
         // Get from local storage by key
-        const item = window.localStorage.getItem(key)
+        const item = window.localStorage.getItem(key);
         // Parse stored json or if none return initialValue
-        return item ? JSON.parse(item) : initialValue
+        return item ? JSON.parse(item) : initialValue;
       } catch (error) {
         // If error also return initialValue
-        console.error(error)
-        return initialValue
+        console.error(error);
+        return initialValue;
       }
     }
-  })
+  });
 
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to localStorage.
   const setValue = (value: T | ((val: T) => T)) => {
     try {
       const valueToStore =
-        value instanceof Function ? value(storedValue) : value
+        value instanceof Function ? value(storedValue) : value;
       // Save state
-      setStoredValue(valueToStore)
+      setStoredValue(valueToStore);
       // Save to local storage
-      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
-  return [storedValue, setValue] as const
+  return [storedValue, setValue] as const;
 }
 
-export default useLocalStorage
+export default useLocalStorage;
diff --git a/packages/app/lib/hooks/useMediaQuery.ts b/packages/app/lib/hooks/useMediaQuery.ts
index 1f02308ba..9b7e7ca28 100644
--- a/packages/app/lib/hooks/useMediaQuery.ts
+++ b/packages/app/lib/hooks/useMediaQuery.ts
@@ -1,19 +1,19 @@
-import * as React from 'react'
+import * as React from 'react';
 
 export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false)
+  const [value, setValue] = React.useState(false);
 
   React.useEffect(() => {
     function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches)
+      setValue(event.matches);
     }
 
-    const result = matchMedia(query)
-    result.addEventListener('change', onChange)
-    setValue(result.matches)
+    const result = matchMedia(query);
+    result.addEventListener('change', onChange);
+    setValue(result.matches);
 
-    return () => result.removeEventListener('change', onChange)
-  }, [query])
+    return () => result.removeEventListener('change', onChange);
+  }, [query]);
 
-  return value
+  return value;
 }
diff --git a/packages/app/lib/hooks/useSearchParams.ts b/packages/app/lib/hooks/useSearchParams.ts
index 230632634..e63c929fe 100644
--- a/packages/app/lib/hooks/useSearchParams.ts
+++ b/packages/app/lib/hooks/useSearchParams.ts
@@ -2,32 +2,32 @@ import {
   useSearchParams as useNextSearchParams,
   usePathname,
   useRouter,
-} from 'next/navigation'
+} from 'next/navigation';
 
 interface ITerm {
-  key: string
-  value: string | undefined
+  key: string;
+  value: string | undefined;
 }
 const useSearchParams = () => {
-  const pathname = usePathname()
-  const { replace } = useRouter()
-  const searchParams = useNextSearchParams()
+  const pathname = usePathname();
+  const { replace } = useRouter();
+  const searchParams = useNextSearchParams();
 
   function handleTermChange(terms: ITerm[]) {
-    const params = new URLSearchParams(searchParams)
+    const params = new URLSearchParams(searchParams);
     for (const term of terms) {
       if (term.value) {
-        params.set(term.key, term.value)
+        params.set(term.key, term.value);
       } else {
-        params.delete(term.key)
+        params.delete(term.key);
       }
-      replace(`${pathname}?${params.toString()}`)
+      replace(`${pathname}?${params.toString()}`);
     }
   }
   return {
     searchParams,
     handleTermChange,
-  }
-}
+  };
+};
 
-export default useSearchParams
+export default useSearchParams;
diff --git a/packages/app/lib/hooks/useUserData.ts b/packages/app/lib/hooks/useUserData.ts
index 9c686e09f..6e20f7c24 100644
--- a/packages/app/lib/hooks/useUserData.ts
+++ b/packages/app/lib/hooks/useUserData.ts
@@ -1,28 +1,28 @@
-import { useSIWE } from 'connectkit'
-import { useEffect, useState } from 'react'
-import { useAccount } from 'wagmi'
-import { fetchUserAction } from '../actions/users'
-import { IExtendedUser } from '../types'
+import { useSIWE } from 'connectkit';
+import { useEffect, useState } from 'react';
+import { useAccount } from 'wagmi';
+import { fetchUserAction } from '../actions/users';
+import { IExtendedUser } from '../types';
 
 const useUserData = () => {
-  const { isSignedIn } = useSIWE()
-  const { address } = useAccount()
-  const [userData, setUserData] = useState<IExtendedUser>()
+  const { isSignedIn } = useSIWE();
+  const { address } = useAccount();
+  const [userData, setUserData] = useState<IExtendedUser>();
   useEffect(() => {
     const getUserData = async () => {
       try {
         const userData = await fetchUserAction({
           userId: address as string,
-        })
-        setUserData(userData)
+        });
+        setUserData(userData);
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
-    }
-    if (isSignedIn && address) getUserData()
-  }, [isSignedIn, address])
+    };
+    if (isSignedIn && address) getUserData();
+  }, [isSignedIn, address]);
 
-  return { userData }
-}
+  return { userData };
+};
 
-export default useUserData
+export default useUserData;
diff --git a/packages/app/lib/schema.ts b/packages/app/lib/schema.ts
index 68acf5d70..d28590d20 100644
--- a/packages/app/lib/schema.ts
+++ b/packages/app/lib/schema.ts
@@ -1,16 +1,16 @@
-import * as z from 'zod'
+import * as z from 'zod';
 
 const GSheetConfigSchema = z.object({
   sheetId: z.string().optional(),
   apiKey: z.string().optional(),
   driveId: z.string().optional(),
   driveApiKey: z.string().optional(),
-})
+});
 
 const PretalxConfigSchema = z.object({
   url: z.string(),
   apiToken: z.string(),
-})
+});
 
 const IDataImporterSchema = z.union([
   z.object({ type: z.literal('gsheet'), config: GSheetConfigSchema }),
@@ -18,7 +18,7 @@ const IDataImporterSchema = z.union([
     type: z.literal('pretalx'),
     config: PretalxConfigSchema,
   }),
-])
+]);
 
 export const formSchema = z.object({
   name: z.string().min(2, {
@@ -40,13 +40,13 @@ export const formSchema = z.object({
   unlisted: z.boolean().optional(),
   enableVideoDownloader: z.boolean().optional(),
   dataImporter: z.array(IDataImporterSchema).optional(),
-})
+});
 
 const IPluginsSchema = z.object({
   disableChat: z.boolean(),
   hideSchedule: z.boolean().optional(),
   hideSpeaker: z.boolean().optional(),
-})
+});
 
 const IEventNFTSchema = z.object({
   address: z.string().optional(),
@@ -58,7 +58,7 @@ const IEventNFTSchema = z.object({
   mintFee: z.string().optional(),
   startTime: z.string().optional(),
   endTime: z.string().optional(),
-})
+});
 
 export const eventSchema = z.object({
   ...formSchema.shape,
@@ -67,15 +67,15 @@ export const eventSchema = z.object({
   unlisted: z.boolean().optional(),
   archiveMode: z.boolean().optional(),
   eventNFT: IEventNFTSchema.optional(),
-})
+});
 
 const IStreamSettingsSchema = z.object({
   streamId: z.string().optional(),
-})
+});
 
 const IPluginSchema = z.object({
   name: z.string(),
-})
+});
 
 export const StageSchema = z.object({
   name: z
@@ -93,7 +93,7 @@ export const StageSchema = z.object({
   streamEndDate: z.date().optional(),
   streamEndTime: z.string().optional(),
   isMultipleDate: z.boolean().optional(),
-})
+});
 
 // Sessions
 
@@ -107,24 +107,22 @@ const speakerSchema = z.object({
   website: z.string().optional(),
   photo: z.string().optional(),
   company: z.string().optional(),
-})
+});
 
 export const sessionSchema = z.object({
   name: z.string().min(1, { message: 'Name is required' }).max(100, {
-    message:
-      'Name is too long. The maximum length is 100 characters.',
+    message: 'Name is too long. The maximum length is 100 characters.',
   }),
   description: z
     .string()
     .min(1, { message: 'Description is required' })
     .max(600, {
-      message:
-        'Description is too long. The maximum length is 600 characters.',
+      message: 'Description is too long. The maximum length is 600 characters.',
     }),
   coverImage: z.string().optional(),
   assetId: z.string().min(1, { message: 'Please upload a video.' }),
   published: z.boolean().default(false),
-})
+});
 
 const blacklistedPatterns = [
   /\./,
@@ -157,7 +155,7 @@ const blacklistedPatterns = [
   /<script>/i, // '<script>' case-insensitive
   /<img>/i, // '<img>' case-insensitive
   /<a>/i, // '<a>' case-insensitive
-]
+];
 
 export const organizationSchema = z.object({
   name: z
@@ -165,8 +163,7 @@ export const organizationSchema = z.object({
     .min(1, 'Name is required')
     .max(25, { message: 'Name is too long' })
     .refine(
-      (value) =>
-        !blacklistedPatterns.some((pattern) => pattern.test(value)),
+      (value) => !blacklistedPatterns.some((pattern) => pattern.test(value)),
       {
         message: `The string contains an invalid character(s).`,
       }
@@ -180,14 +177,14 @@ export const organizationSchema = z.object({
     .optional(),
   email: z.string().email().min(1, 'Email is required'),
   // url: z.string().optional(),
-})
+});
 
 export const supportSchema = z.object({
   message: z.string().min(1, 'Message is required'),
   telegram: z.string().optional(),
   email: z.string().optional(),
   image: z.string().optional(),
-})
+});
 
 export const nftSchema = z.object({
   name: z.string().min(1, 'Message is required'),
@@ -200,15 +197,15 @@ export const nftSchema = z.object({
   mintFee: z.string(),
   maxSupply: z.string(),
   limitedSupply: z.string(),
-})
+});
 
 const isWalletAddress = (address: string) =>
-  /^0x[a-fA-F0-9]{40}$/.test(address)
+  /^0x[a-fA-F0-9]{40}$/.test(address);
 
-const emailSchema = z.string().email()
+const emailSchema = z.string().email();
 const walletAddressSchema = z.string().refine(isWalletAddress, {
   message: 'Invalid address',
-})
+});
 export const addOrganizationMemberSchema = z.object({
   memberAddress: z.union([emailSchema, walletAddressSchema]),
-})
+});
diff --git a/packages/app/lib/services/chatService.ts b/packages/app/lib/services/chatService.ts
index d94d41437..ebd7b4139 100644
--- a/packages/app/lib/services/chatService.ts
+++ b/packages/app/lib/services/chatService.ts
@@ -1,28 +1,28 @@
-import { IChat } from 'streameth-new-server/src/interfaces/chat.interface'
-import { IExtendedChat } from '../types'
-import { apiUrl } from '../utils/utils'
+import { IChat } from 'streameth-new-server/src/interfaces/chat.interface';
+import { IExtendedChat } from '../types';
+import { apiUrl } from '../utils/utils';
 
 export async function fetchChat({
   stageId,
 }: {
-  stageId?: string
+  stageId?: string;
 }): Promise<IExtendedChat[]> {
   try {
     if (!stageId) {
-      return []
+      return [];
     }
 
     const data = await fetch(`${apiUrl()}/chats/${stageId}`, {
       cache: 'no-store',
-    })
+    });
 
     if (!data.ok) {
-      return []
+      return [];
     }
-    return (await data.json()).data
+    return (await data.json()).data;
   } catch (e) {
-    console.log('error in fetchChat', e)
-    throw e
+    console.log('error in fetchChat', e);
+    throw e;
   }
 }
 
@@ -30,10 +30,10 @@ export const createChat = async ({
   chat,
   authToken,
 }: {
-  chat: IChat
-  authToken: string
+  chat: IChat;
+  authToken: string;
 }): Promise<IExtendedChat> => {
-  console.log('createChat', chat)
+  console.log('createChat', chat);
   try {
     const response = await fetch(`${apiUrl()}/chats`, {
       method: 'POST',
@@ -42,13 +42,13 @@ export const createChat = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify(chat),
-    })
+    });
     if (!response.ok) {
-      throw 'Error creating chat'
+      throw 'Error creating chat';
     }
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in createChat', e)
-    throw e
+    console.log('error in createChat', e);
+    throw e;
   }
-}
+};
diff --git a/packages/app/lib/services/eventService.tsx b/packages/app/lib/services/eventService.tsx
index ae9a0f3ba..2a646bf9c 100644
--- a/packages/app/lib/services/eventService.tsx
+++ b/packages/app/lib/services/eventService.tsx
@@ -1,11 +1,11 @@
-import { IStage } from 'streameth-new-server/src/interfaces/stage.interface'
-import { apiUrl } from '@/lib/utils/utils'
+import { IStage } from 'streameth-new-server/src/interfaces/stage.interface';
+import { apiUrl } from '@/lib/utils/utils';
 import {
   IEvent,
   IEventModel,
-} from 'streameth-new-server/src/interfaces/event.interface'
-import { fetchOrganization } from './organizationService'
-import { IExtendedEvent } from '../types'
+} from 'streameth-new-server/src/interfaces/event.interface';
+import { fetchOrganization } from './organizationService';
+import { IExtendedEvent } from '../types';
 
 export async function fetchEvents({
   organizationId,
@@ -13,32 +13,32 @@ export async function fetchEvents({
   date,
   unlisted = false,
 }: {
-  organizationId?: string
-  organizationSlug?: string
-  date?: Date
-  unlisted?: boolean
+  organizationId?: string;
+  organizationSlug?: string;
+  date?: Date;
+  unlisted?: boolean;
 }): Promise<IExtendedEvent[]> {
   try {
-    let data: IExtendedEvent[] = []
+    let data: IExtendedEvent[] = [];
 
     if (organizationId || organizationSlug) {
       const organization = await fetchOrganization({
         organizationId,
         organizationSlug,
-      })
+      });
       if (!organization) {
-        return []
+        return [];
       }
       const response = await fetch(
         `${apiUrl()}/events?organizationId=${organization._id}`,
         { cache: 'no-store' }
-      )
-      data = (await response.json()).data ?? []
+      );
+      data = (await response.json()).data ?? [];
     } else {
       const response = await fetch(`${apiUrl()}/events`, {
         cache: 'no-store',
-      })
-      data = (await response.json()).data ?? []
+      });
+      data = (await response.json()).data ?? [];
     }
 
     if (date) {
@@ -46,13 +46,13 @@ export async function fetchEvents({
         (event) =>
           new Date(event.start).getTime() <= date.getTime() &&
           new Date(event.end).getTime() >= date.getTime()
-      )
+      );
     }
 
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching events' + e
+    console.log(e);
+    throw 'Error fetching events' + e;
   }
 }
 
@@ -60,29 +60,26 @@ export async function fetchEvent({
   eventId,
   eventSlug,
 }: {
-  eventId?: string
-  eventSlug?: string
-  organization?: string
+  eventId?: string;
+  eventSlug?: string;
+  organization?: string;
 }): Promise<IExtendedEvent | null> {
   try {
     if (!eventId && !eventSlug) {
-      return null
+      return null;
     }
 
-    const data = await fetch(
-      `${apiUrl()}/events/${eventId ?? eventSlug}`,
-      {
-        cache: 'no-store',
-      }
-    )
+    const data = await fetch(`${apiUrl()}/events/${eventId ?? eventSlug}`, {
+      cache: 'no-store',
+    });
 
     if (!data.ok) {
-      return null
+      return null;
     }
-    return (await data.json()).data
+    return (await data.json()).data;
   } catch (e) {
-    console.log('error in fetchEvent', e)
-    throw e
+    console.log('error in fetchEvent', e);
+    throw e;
   }
 }
 
@@ -90,8 +87,8 @@ export const createEvent = async ({
   event,
   authToken,
 }: {
-  event: IEvent
-  authToken: string
+  event: IEvent;
+  authToken: string;
 }): Promise<IEventModel> => {
   try {
     const response = await fetch(`${apiUrl()}/events`, {
@@ -101,26 +98,26 @@ export const createEvent = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify(event),
-    })
+    });
     if (!response.ok) {
-      console.log('error in createEvent', await response.json())
-      throw 'Error creating event'
+      console.log('error in createEvent', await response.json());
+      throw 'Error creating event';
     }
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in createEvent', e)
-    throw e
+    console.log('error in createEvent', e);
+    throw e;
   }
-}
+};
 
 export const updateEvent = async ({
   event,
   authToken,
 }: {
-  event: IExtendedEvent
-  authToken: string
+  event: IExtendedEvent;
+  authToken: string;
 }): Promise<IEventModel> => {
-  const modifiedObject = (({ _id, ...rest }) => rest)(event)
+  const modifiedObject = (({ _id, ...rest }) => rest)(event);
   const response = await fetch(`${apiUrl()}/events/${event._id}`, {
     method: 'PUT',
     headers: {
@@ -128,21 +125,21 @@ export const updateEvent = async ({
       Authorization: `Bearer ${authToken}`,
     },
     body: JSON.stringify(modifiedObject),
-  })
+  });
   if (!response.ok) {
-    throw 'Error updating event'
+    throw 'Error updating event';
   }
-  return (await response.json()).data
-}
+  return (await response.json()).data;
+};
 
 export const deleteEvent = async ({
   eventId,
   organizationId,
   authToken,
 }: {
-  eventId: string
-  organizationId: string
-  authToken: string
+  eventId: string;
+  organizationId: string;
+  authToken: string;
 }): Promise<IEventModel> => {
   try {
     const response = await fetch(`${apiUrl()}/events/${eventId}`, {
@@ -152,41 +149,38 @@ export const deleteEvent = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify({ organizationId }),
-    })
+    });
     if (!response.ok) {
-      throw 'Error deleting event'
+      throw 'Error deleting event';
     }
 
-    return await response.json()
+    return await response.json();
   } catch (e) {
-    console.log('error in deleteEvent', e)
-    throw e
+    console.log('error in deleteEvent', e);
+    throw e;
   }
-}
+};
 
 export const syncEventImport = async ({
   eventId,
   organizationId,
   authToken,
 }: {
-  eventId: string
-  organizationId: string
-  authToken: string
+  eventId: string;
+  organizationId: string;
+  authToken: string;
 }): Promise<IEventModel> => {
-  const response = await fetch(
-    `${apiUrl()}/events/import/${eventId}`,
-    {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${authToken}`,
-      },
-      body: JSON.stringify({ organizationId }),
-    }
-  )
+  const response = await fetch(`${apiUrl()}/events/import/${eventId}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify({ organizationId }),
+  });
   if (!response.ok) {
-    console.log('error in syncEventImport', await response.json())
-    throw 'Error syncing event'
+    console.log('error in syncEventImport', await response.json());
+    throw 'Error syncing event';
   }
-  return await response.json()
-}
+  return await response.json();
+};
diff --git a/packages/app/lib/services/googleDriveService.ts b/packages/app/lib/services/googleDriveService.ts
index f81b6bded..7128ecfa2 100644
--- a/packages/app/lib/services/googleDriveService.ts
+++ b/packages/app/lib/services/googleDriveService.ts
@@ -1,7 +1,7 @@
-import { google } from 'googleapis'
+import { google } from 'googleapis';
 
 class GoogleDriveService {
-  connection: any
+  connection: any;
 
   constructor() {
     const serviceAccount = {
@@ -9,27 +9,27 @@ class GoogleDriveService {
       private_key:
         process.env.SERVICE_ACCOUNT_PRIVATE_KEY &&
         process.env.SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/g, '\n'),
-    }
+    };
 
     const jwtClient = new google.auth.JWT(
       serviceAccount.client_email,
       undefined,
       serviceAccount.private_key,
       ['https://www.googleapis.com/auth/drive']
-    )
+    );
 
     this.connection = google.drive({
       version: 'v3',
       auth: jwtClient,
-    })
+    });
   }
 
   async listFiles(): Promise<any[]> {
     const response = await this.connection.files.list({
       pageSize: 10,
       fields: 'files(id, name)',
-    })
-    return response.data.files || []
+    });
+    return response.data.files || [];
   }
 
   async copyFile(fileId: string, name: string): Promise<string> {
@@ -39,9 +39,9 @@ class GoogleDriveService {
       requestBody: {
         name,
       },
-    })
-    return response.data.id
+    });
+    return response.data.id;
   }
 }
 
-export default GoogleDriveService
+export default GoogleDriveService;
diff --git a/packages/app/lib/services/googleSheetService.ts b/packages/app/lib/services/googleSheetService.ts
index d3fd82a7f..e4d01839f 100644
--- a/packages/app/lib/services/googleSheetService.ts
+++ b/packages/app/lib/services/googleSheetService.ts
@@ -1,46 +1,40 @@
-import { google } from 'googleapis'
+import { google } from 'googleapis';
 class GoogleSheetService {
-  sheetId: string
-  connection: any
+  sheetId: string;
+  connection: any;
 
   constructor(sheetId: string) {
-    this.sheetId = sheetId
+    this.sheetId = sheetId;
 
     const serviceAccount = {
       client_email: process.env.SERVICE_ACCOUNT_EMAIL,
       private_key:
         process.env.SERVICE_ACCOUNT_PRIVATE_KEY &&
         process.env.SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/g, '\n'),
-    }
+    };
 
     const jwtClient = new google.auth.JWT(
       serviceAccount.client_email,
       undefined,
       serviceAccount.private_key,
       ['https://www.googleapis.com/auth/spreadsheets']
-    )
+    );
 
     this.connection = google.sheets({
       version: 'v4',
       auth: jwtClient,
-    })
+    });
   }
 
-  async getDataForRange(
-    sheetName: string,
-    range: string
-  ): Promise<any[]> {
+  async getDataForRange(sheetName: string, range: string): Promise<any[]> {
     const response = await this.connection.spreadsheets.values.get({
       spreadsheetId: this.sheetId,
       range: `${sheetName}!${range}`,
-    })
-    return response.data.values || []
+    });
+    return response.data.values || [];
   }
 
-  async appendData(
-    sheetName: string,
-    values: any[][]
-  ): Promise<void> {
+  async appendData(sheetName: string, values: any[][]): Promise<void> {
     try {
       await this.connection.spreadsheets.values.append({
         spreadsheetId: this.sheetId,
@@ -50,12 +44,12 @@ class GoogleSheetService {
         resource: {
           values: values,
         },
-      })
+      });
     } catch (error) {
-      console.error('Error appending data to Google Sheets:', error)
-      throw error
+      console.error('Error appending data to Google Sheets:', error);
+      throw error;
     }
   }
 }
 
-export default GoogleSheetService
+export default GoogleSheetService;
diff --git a/packages/app/lib/services/nftCollectionService.ts b/packages/app/lib/services/nftCollectionService.ts
index fe8a5fa01..4db281555 100644
--- a/packages/app/lib/services/nftCollectionService.ts
+++ b/packages/app/lib/services/nftCollectionService.ts
@@ -1,13 +1,13 @@
-import { apiUrl } from '@/lib/utils/utils'
-import { INftCollection } from 'streameth-new-server/src/interfaces/nft.collection.interface'
-import { IExtendedNftCollections } from '../types'
+import { apiUrl } from '@/lib/utils/utils';
+import { INftCollection } from 'streameth-new-server/src/interfaces/nft.collection.interface';
+import { IExtendedNftCollections } from '../types';
 
 export async function createNFTCollection({
   nftCollection,
   authToken,
 }: {
-  nftCollection: INftCollection
-  authToken: string
+  nftCollection: INftCollection;
+  authToken: string;
 }): Promise<INftCollection> {
   const response = await fetch(`${apiUrl()}/collections`, {
     method: 'POST',
@@ -16,52 +16,48 @@ export async function createNFTCollection({
       Authorization: `Bearer ${authToken}`,
     },
     body: JSON.stringify(nftCollection),
-  })
+  });
 
   if (!response.ok) {
-    throw 'Error creating collection'
+    throw 'Error creating collection';
   }
-  return (await response.json()).data
+  return (await response.json()).data;
 }
 
 export const updateNFTCollection = async ({
   collection,
   authToken,
 }: {
-  collection: IExtendedNftCollections
-  authToken: string
-  collectionId?: string
+  collection: IExtendedNftCollections;
+  authToken: string;
+  collectionId?: string;
 }): Promise<IExtendedNftCollections> => {
-  const { _id, videos, createdAt, updatedAt, __v, ...rest } =
-    collection
+  const { _id, videos, createdAt, updatedAt, __v, ...rest } = collection;
   try {
-    const response = await fetch(
-      `${apiUrl()}/collections/${collection._id}`,
-      {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${authToken}`,
-        },
-        body: JSON.stringify(rest),
-      }
-    )
+    const response = await fetch(`${apiUrl()}/collections/${collection._id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify(rest),
+    });
 
     if (!response.ok) {
-      throw 'Error updating collection'
+      throw 'Error updating collection';
     }
 
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (error) {
-    console.error('Error updating collection:', error)
-    throw error
+    console.error('Error updating collection:', error);
+    throw error;
   }
-}
+};
 
 export async function fetchOrganizationNFTCollections({
   organizationId,
 }: {
-  organizationId?: string
+  organizationId?: string;
 }): Promise<IExtendedNftCollections[]> {
   try {
     const response = await fetch(
@@ -69,35 +65,32 @@ export async function fetchOrganizationNFTCollections({
       {
         cache: 'no-store',
       }
-    )
+    );
 
-    const data = (await response.json()).data
-    return data.map((nftCollection: any) => nftCollection)
+    const data = (await response.json()).data;
+    return data.map((nftCollection: any) => nftCollection);
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching collections'
+    console.log(e);
+    throw 'Error fetching collections';
   }
 }
 
 export async function fetchNFTCollection({
   collectionId,
 }: {
-  collectionId?: string
+  collectionId?: string;
 }): Promise<IExtendedNftCollections | null> {
   try {
-    const response = await fetch(
-      `${apiUrl()}/collections/${collectionId}`,
-      {
-        cache: 'no-store',
-      }
-    )
+    const response = await fetch(`${apiUrl()}/collections/${collectionId}`, {
+      cache: 'no-store',
+    });
     if (!response.ok) {
-      return null
+      return null;
     }
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error fetching collection', e)
-    throw e
+    console.log('error fetching collection', e);
+    throw e;
   }
 }
 
@@ -105,23 +98,20 @@ export async function generateNFTCollectionMetadata({
   nftCollection,
   authToken,
 }: {
-  nftCollection: INftCollection
-  authToken: string
+  nftCollection: INftCollection;
+  authToken: string;
 }): Promise<INftCollection> {
-  const response = await fetch(
-    `${apiUrl()}/collections/metadata/generate`,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${authToken}`,
-      },
-      body: JSON.stringify(nftCollection),
-    }
-  )
+  const response = await fetch(`${apiUrl()}/collections/metadata/generate`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify(nftCollection),
+  });
 
   if (!response.ok) {
-    throw 'Error generating collection metadata'
+    throw 'Error generating collection metadata';
   }
-  return (await response.json()).data
+  return (await response.json()).data;
 }
diff --git a/packages/app/lib/services/organizationService.tsx b/packages/app/lib/services/organizationService.tsx
index 596efd672..c8559cbd7 100644
--- a/packages/app/lib/services/organizationService.tsx
+++ b/packages/app/lib/services/organizationService.tsx
@@ -1,18 +1,18 @@
-import { apiUrl } from '@/lib/utils/utils'
-import { IOrganization } from 'streameth-new-server/src/interfaces/organization.interface'
-import { IExtendedOrganization, IExtendedUser } from '../types'
-import { cookies } from 'next/headers'
+import { apiUrl } from '@/lib/utils/utils';
+import { IOrganization } from 'streameth-new-server/src/interfaces/organization.interface';
+import { IExtendedOrganization, IExtendedUser } from '../types';
+import { cookies } from 'next/headers';
 
 export async function fetchOrganization({
   organizationSlug,
   organizationId,
 }: {
-  organizationSlug?: string
-  organizationId?: string
+  organizationSlug?: string;
+  organizationId?: string;
 }): Promise<IExtendedOrganization | null> {
   try {
     if (!organizationSlug && !organizationId) {
-      return null
+      return null;
     }
     const response = await fetch(
       `${apiUrl()}/organizations/${
@@ -21,27 +21,25 @@ export async function fetchOrganization({
       {
         cache: 'no-store',
       }
-    )
-    const data = (await response.json()).data
+    );
+    const data = (await response.json()).data;
 
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    return null
+    console.log(e);
+    return null;
   }
 }
 
-export async function fetchOrganizations(): Promise<
-  IExtendedOrganization[]
-> {
+export async function fetchOrganizations(): Promise<IExtendedOrganization[]> {
   try {
     const response = await fetch(`${apiUrl()}/organizations`, {
       cache: 'no-store',
-    })
-    return (await response.json()).data ?? []
+    });
+    return (await response.json()).data ?? [];
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching organizations'
+    console.log(e);
+    throw 'Error fetching organizations';
   }
 }
 
@@ -49,11 +47,11 @@ export async function createOrganization({
   organization,
   authToken,
 }: {
-  organization: IOrganization
-  authToken: string
+  organization: IOrganization;
+  authToken: string;
 }): Promise<IOrganization> {
   if (!authToken) {
-    throw 'No auth token'
+    throw 'No auth token';
   }
 
   try {
@@ -64,16 +62,16 @@ export async function createOrganization({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify(organization),
-    })
+    });
 
     if (response.ok) {
-      return (await response.json()).data
+      return (await response.json()).data;
     } else {
-      throw await response.json()
+      throw await response.json();
     }
   } catch (e) {
-    console.error('Unexpected error:', e)
-    throw e
+    console.error('Unexpected error:', e);
+    throw e;
   }
 }
 
@@ -81,13 +79,13 @@ export async function updateOrganization({
   organization,
   authToken,
 }: {
-  organization: IExtendedOrganization
-  authToken: string
+  organization: IExtendedOrganization;
+  authToken: string;
 }): Promise<IOrganization> {
   if (!authToken) {
-    throw 'No auth token'
+    throw 'No auth token';
   }
-  const modifiedObject = (({ _id, ...rest }) => rest)(organization)
+  const modifiedObject = (({ _id, ...rest }) => rest)(organization);
 
   try {
     const response = await fetch(
@@ -100,16 +98,16 @@ export async function updateOrganization({
         },
         body: JSON.stringify(modifiedObject),
       }
-    )
+    );
 
     if (response.ok) {
-      return (await response.json()).data
+      return (await response.json()).data;
     } else {
-      throw await response.json()
+      throw await response.json();
     }
   } catch (e) {
-    console.error('Unexpected error:', e)
-    throw e
+    console.error('Unexpected error:', e);
+    throw e;
   }
 }
 
@@ -118,12 +116,12 @@ export async function addOrganizationMember({
   memberAddress,
   authToken,
 }: {
-  organizationId: string
-  memberAddress: string
-  authToken: string
+  organizationId: string;
+  memberAddress: string;
+  authToken: string;
 }): Promise<IOrganization> {
   if (!authToken) {
-    throw 'No auth token'
+    throw 'No auth token';
   }
 
   try {
@@ -137,27 +135,27 @@ export async function addOrganizationMember({
         },
         body: JSON.stringify({ address: memberAddress }),
       }
-    )
+    );
 
     if (response.ok) {
-      return (await response.json()).message
+      return (await response.json()).message;
     } else {
-      throw await response.json()
+      throw await response.json();
     }
   } catch (e) {
-    console.error('Unexpected error:', e)
-    throw e
+    console.error('Unexpected error:', e);
+    throw e;
   }
 }
 
 export async function fetchOrganizationMembers({
   organizationId,
 }: {
-  organizationId: string
+  organizationId: string;
 }): Promise<IExtendedUser[]> {
-  const authToken = cookies().get('user-session')?.value
+  const authToken = cookies().get('user-session')?.value;
   if (!authToken) {
-    throw 'No auth token'
+    throw 'No auth token';
   }
 
   try {
@@ -170,12 +168,12 @@ export async function fetchOrganizationMembers({
         },
         cache: 'no-store',
       }
-    )
+    );
 
-    return (await response.json()).data ?? []
+    return (await response.json()).data ?? [];
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching organizations members'
+    console.log(e);
+    throw 'Error fetching organizations members';
   }
 }
 
@@ -184,9 +182,9 @@ export async function deleteTeamMember({
   authToken,
   organizationId,
 }: {
-  memberWalletAddress: string
-  authToken: string
-  organizationId?: string
+  memberWalletAddress: string;
+  authToken: string;
+  organizationId?: string;
 }): Promise<IExtendedUser> {
   try {
     const response = await fetch(
@@ -199,31 +197,31 @@ export async function deleteTeamMember({
         },
         body: JSON.stringify({ walletAddress: memberWalletAddress }),
       }
-    )
+    );
 
     if (!response.ok) {
-      throw 'Error deleting team member'
+      throw 'Error deleting team member';
     }
-    return await response.json()
+    return await response.json();
   } catch (e) {
-    console.log('error in delete team member', e)
-    throw e
+    console.log('error in delete team member', e);
+    throw e;
   }
 }
 
 export async function fetchOrganizationSocials({
   organizationId,
 }: {
-  organizationSlug?: string
-  organizationId?: string
+  organizationSlug?: string;
+  organizationId?: string;
 }): Promise<IExtendedOrganization | null> {
   try {
     if (!organizationId) {
-      return null
+      return null;
     }
-    const authToken = cookies().get('user-session')?.value
+    const authToken = cookies().get('user-session')?.value;
     if (!authToken) {
-      throw 'No auth token'
+      throw 'No auth token';
     }
 
     const response = await fetch(
@@ -235,13 +233,13 @@ export async function fetchOrganizationSocials({
         },
         cache: 'no-store',
       }
-    )
-    const data = (await response.json()).data
+    );
+    const data = (await response.json()).data;
 
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    return null
+    console.log(e);
+    return null;
   }
 }
 
@@ -250,9 +248,9 @@ export async function deleteDestination({
   authToken,
   organizationId,
 }: {
-  destinationId: string
-  authToken: string
-  organizationId?: string
+  destinationId: string;
+  authToken: string;
+  organizationId?: string;
 }): Promise<IExtendedOrganization> {
   try {
     const response = await fetch(
@@ -265,14 +263,14 @@ export async function deleteDestination({
         },
         body: JSON.stringify({ destinationId }),
       }
-    )
+    );
 
     if (!response.ok) {
-      throw 'Error deleting destination'
+      throw 'Error deleting destination';
     }
-    return await response.json()
+    return await response.json();
   } catch (e) {
-    console.log('error in delete destination', e)
-    throw e
+    console.log('error in delete destination', e);
+    throw e;
   }
 }
diff --git a/packages/app/lib/services/sessionService.ts b/packages/app/lib/services/sessionService.ts
index 2fcea4fa3..e7d0845da 100644
--- a/packages/app/lib/services/sessionService.ts
+++ b/packages/app/lib/services/sessionService.ts
@@ -1,17 +1,17 @@
-import { ISessionModel } from 'streameth-new-server/src/interfaces/session.interface'
-import { IExtendedSession } from '../types'
-import { apiUrl } from '@/lib/utils/utils'
-import { Livepeer } from 'livepeer'
-import { ISession } from 'streameth-new-server/src/interfaces/session.interface'
-import { revalidatePath } from 'next/cache'
-import { Asset } from 'livepeer/models/components'
+import { ISessionModel } from 'streameth-new-server/src/interfaces/session.interface';
+import { IExtendedSession } from '../types';
+import { apiUrl } from '@/lib/utils/utils';
+import { Livepeer } from 'livepeer';
+import { ISession } from 'streameth-new-server/src/interfaces/session.interface';
+import { revalidatePath } from 'next/cache';
+import { Asset } from 'livepeer/models/components';
 
 export const createSession = async ({
   session,
   authToken,
 }: {
-  session: ISession
-  authToken: string
+  session: ISession;
+  authToken: string;
 }): Promise<ISession> => {
   try {
     const response = await fetch(`${apiUrl()}/sessions`, {
@@ -21,53 +21,51 @@ export const createSession = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify(session),
-    })
+    });
     if (!response.ok) {
-      console.log('error in createSession', await response.json())
-      throw 'Error updating session'
+      console.log('error in createSession', await response.json());
+      throw 'Error updating session';
     }
-    revalidatePath('/studio')
-    return (await response.json()).data
+    revalidatePath('/studio');
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in updateSession', e)
-    throw e
+    console.log('error in updateSession', e);
+    throw e;
   }
-}
+};
 export const fetchSession = async ({
   session,
 }: {
-  session: string
+  session: string;
 }): Promise<IExtendedSession | null> => {
   try {
     const LivepeerClient = new Livepeer({
       apiKey: process.env.LIVEPEER_API_KEY,
-    })
+    });
     const response = await fetch(`${apiUrl()}/sessions/${session}`, {
       cache: 'no-store',
-    })
+    });
     if (!response.ok) {
-      return null
+      return null;
     }
-    const data: IExtendedSession = (await response.json()).data
+    const data: IExtendedSession = (await response.json()).data;
     if (data.assetId) {
-      const livepeerData = await LivepeerClient.asset.get(
-        data.assetId
-      )
-      data.videoUrl = livepeerData.asset?.playbackUrl
+      const livepeerData = await LivepeerClient.asset.get(data.assetId);
+      data.videoUrl = livepeerData.asset?.playbackUrl;
     }
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching event session'
+    console.log(e);
+    throw 'Error fetching event session';
   }
-}
+};
 
 export const updateSession = async ({
   session,
   authToken,
 }: {
-  session: IExtendedSession
-  authToken: string
+  session: IExtendedSession;
+  authToken: string;
 }): Promise<ISessionModel> => {
   const modifiedSession = (({
     _id,
@@ -77,63 +75,57 @@ export const updateSession = async ({
     updatedAt,
     __v,
     ...rest
-  }) => rest)(session)
+  }) => rest)(session);
 
   try {
-    const response = await fetch(
-      `${apiUrl()}/sessions/${session._id}`,
-      {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${authToken}`,
-        },
-        body: JSON.stringify(modifiedSession),
-      }
-    )
+    const response = await fetch(`${apiUrl()}/sessions/${session._id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify(modifiedSession),
+    });
     if (!response.ok) {
-      console.log('error in updateSession', await response.json())
-      throw 'Error updating session'
+      console.log('error in updateSession', await response.json());
+      throw 'Error updating session';
     }
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in updateSession', e)
-    throw e
+    console.log('error in updateSession', e);
+    throw e;
   }
-}
+};
 
 export const deleteSession = async ({
   sessionId,
   organizationId,
   authToken,
 }: {
-  sessionId: string
-  organizationId: string
-  authToken: string
+  sessionId: string;
+  organizationId: string;
+  authToken: string;
 }) => {
   try {
-    const response = await fetch(
-      `${apiUrl()}/sessions/${sessionId}`,
-      {
-        method: 'DELETE',
-        body: JSON.stringify({ organizationId }),
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${authToken}`,
-        },
-      }
-    )
+    const response = await fetch(`${apiUrl()}/sessions/${sessionId}`, {
+      method: 'DELETE',
+      body: JSON.stringify({ organizationId }),
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+      },
+    });
 
     if (!response.ok) {
-      console.log('error in deleteSession', await response.json())
-      throw 'Error deleting session'
+      console.log('error in deleteSession', await response.json());
+      throw 'Error deleting session';
     }
-    return await response.json()
+    return await response.json();
   } catch (e) {
-    console.log('error in deleteSession', e)
-    throw e
+    console.log('error in deleteSession', e);
+    throw e;
   }
-}
+};
 
 export const createClip = async ({
   start,
@@ -143,12 +135,12 @@ export const createClip = async ({
   authToken,
   sessionId,
 }: {
-  sessionId: string
-  authToken: string
-  playbackId: string
-  recordingId: string
-  start: number
-  end: number
+  sessionId: string;
+  authToken: string;
+  playbackId: string;
+  recordingId: string;
+  start: number;
+  end: number;
 }): Promise<ISession> => {
   try {
     const response = await fetch(`${apiUrl()}/streams/clip`, {
@@ -164,7 +156,7 @@ export const createClip = async ({
         start,
         recordingId,
       }),
-    })
+    });
 
     if (!response.ok) {
       console.log({
@@ -173,74 +165,68 @@ export const createClip = async ({
         sessionId,
         start,
         recordingId,
-      })
-      console.log('error in createClip', await response.json())
-      throw 'Error updating session'
+      });
+      console.log('error in createClip', await response.json());
+      throw 'Error updating session';
     }
-    revalidatePath('/studio')
-    return (await response.json()).data
+    revalidatePath('/studio');
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in updateSession', e)
-    throw e
+    console.log('error in updateSession', e);
+    throw e;
   }
-}
+};
 
 export const fetchSessionMetrics = async ({
   playbackId,
 }: {
-  playbackId: string
+  playbackId: string;
 }): Promise<{ viewCount: number; playTimeMins: number }> => {
   try {
-    const response = await fetch(
-      `${apiUrl()}/streams/metric/${playbackId}`,
-      {
-        cache: 'no-store',
-      }
-    )
-    console.log('response', response)
+    const response = await fetch(`${apiUrl()}/streams/metric/${playbackId}`, {
+      cache: 'no-store',
+    });
+    console.log('response', response);
     if (!response.ok) {
       return {
         viewCount: 0,
         playTimeMins: 0,
-      }
+      };
     }
 
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching event session'
+    console.log(e);
+    throw 'Error fetching event session';
   }
-}
+};
 
 export const fetchAsset = async ({
   assetId,
 }: {
-  assetId: string
+  assetId: string;
 }): Promise<Asset | null> => {
   try {
-    const response = await fetch(
-      `${apiUrl()}/streams/asset/${assetId}`,
-      {
-        cache: 'no-store',
-      }
-    )
+    const response = await fetch(`${apiUrl()}/streams/asset/${assetId}`, {
+      cache: 'no-store',
+    });
     if (!response.ok) {
-      return null
+      return null;
     }
 
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching event session'
+    console.log(e);
+    throw 'Error fetching event session';
   }
-}
+};
 
 export const createAsset = async ({
   fileName,
   authToken,
 }: {
-  fileName: string
-  authToken: string
+  fileName: string;
+  authToken: string;
 }): Promise<any> => {
   try {
     const response = await fetch(`${apiUrl()}/streams/asset`, {
@@ -250,49 +236,46 @@ export const createAsset = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify({ fileName }),
-    })
+    });
 
     if (!response.ok) {
-      throw 'Error updating session'
+      throw 'Error updating session';
     }
-    revalidatePath('/studio')
-    return (await response.json()).data
+    revalidatePath('/studio');
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in updateSession', e)
-    throw e
+    console.log('error in updateSession', e);
+    throw e;
   }
-}
+};
 
 export const generateThumbnail = async ({
   session,
 }: {
-  session: IExtendedSession
+  session: IExtendedSession;
 }): Promise<any> => {
   try {
-    const response = await fetch(
-      `${apiUrl()}/streams/thumbnail/generate`,
-      {
-        method: 'POST',
-        cache: 'no-cache',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          playbackId: session.playbackId,
-          assetId: session.assetId,
-        }),
-      }
-    )
+    const response = await fetch(`${apiUrl()}/streams/thumbnail/generate`, {
+      method: 'POST',
+      cache: 'no-cache',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        playbackId: session.playbackId,
+        assetId: session.assetId,
+      }),
+    });
     if (!response.ok) {
-      throw 'Error updating session'
+      throw 'Error updating session';
     }
-    revalidatePath('/studio')
-    return (await response.json()).data
+    revalidatePath('/studio');
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in updateSession', e)
-    throw e
+    console.log('error in updateSession', e);
+    throw e;
   }
-}
+};
 export const uploadSessionToYouTube = async ({
   sessionId,
   type,
@@ -300,11 +283,11 @@ export const uploadSessionToYouTube = async ({
   socialId,
   authToken,
 }: {
-  sessionId: string
-  type: string
-  organizationId: string
-  authToken: string
-  socialId: string
+  sessionId: string;
+  type: string;
+  organizationId: string;
+  authToken: string;
+  socialId: string;
 }): Promise<any> => {
   try {
     const response = await fetch(`${apiUrl()}/sessions/upload`, {
@@ -320,15 +303,15 @@ export const uploadSessionToYouTube = async ({
         organizationId,
         socialId,
       }),
-    })
+    });
 
     if (!response.ok) {
-      return await response.json()
+      return await response.json();
     }
 
-    return (await response.json()).status
+    return (await response.json()).status;
   } catch (e) {
-    console.log('error in upload session to social', e)
-    throw e
+    console.log('error in upload session to social', e);
+    throw e;
   }
-}
+};
diff --git a/packages/app/lib/services/spacesService.ts b/packages/app/lib/services/spacesService.ts
index 7084b66f2..01faf6d43 100644
--- a/packages/app/lib/services/spacesService.ts
+++ b/packages/app/lib/services/spacesService.ts
@@ -5,11 +5,11 @@ import {
   PutObjectCommandInput,
   ListBucketsCommand,
   ListObjectsCommand,
-} from '@aws-sdk/client-s3'
-import { Readable } from 'stream'
+} from '@aws-sdk/client-s3';
+import { Readable } from 'stream';
 
 class S3Service {
-  private s3Client: S3
+  private s3Client: S3;
 
   constructor() {
     this.s3Client = new S3({
@@ -19,7 +19,7 @@ class S3Service {
         accessKeyId: process.env.SPACES_KEY ?? '',
         secretAccessKey: process.env.SPACES_SECRET ?? '',
       },
-    })
+    });
   }
 
   async uploadFile(
@@ -34,57 +34,54 @@ class S3Service {
       Body: file,
       ContentType: contentType,
       ACL: 'public-read',
-    }
+    };
 
-    const command = new PutObjectCommand(params)
-    await this.s3Client.send(command)
-    console.log('Uploaded file...')
+    const command = new PutObjectCommand(params);
+    await this.s3Client.send(command);
+    console.log('Uploaded file...');
   }
 
   async listBuckets() {
-    const command = new ListBucketsCommand({})
-    const { Buckets } = await this.s3Client.send(command)
+    const command = new ListBucketsCommand({});
+    const { Buckets } = await this.s3Client.send(command);
 
-    return Buckets
+    return Buckets;
   }
 
   async getBucket(bucketName: string, path?: string) {
     const params = {
       Bucket: bucketName,
-    }
+    };
 
-    const command = new ListObjectsCommand(params)
-    const data = await this.s3Client.send(command)
+    const command = new ListObjectsCommand(params);
+    const data = await this.s3Client.send(command);
 
     if (path && data.Contents) {
       const objectsWithPath = data.Contents.filter((object) =>
         object.Key!.includes(path)
-      )
-      return objectsWithPath
+      );
+      return objectsWithPath;
     }
 
-    return data
+    return data;
   }
 
-  async getObject(
-    bucketName: string,
-    key: string
-  ): Promise<string | null> {
+  async getObject(bucketName: string, key: string): Promise<string | null> {
     const params = {
       Bucket: bucketName,
       Key: key,
-    }
+    };
 
-    const getObjectCommand = new GetObjectCommand(params)
+    const getObjectCommand = new GetObjectCommand(params);
     try {
-      const response = await this.s3Client.send(getObjectCommand)
+      const response = await this.s3Client.send(getObjectCommand);
 
-      return response.Body!.transformToString()
+      return response.Body!.transformToString();
     } catch (err) {
-      console.log('Could not find object')
-      return null
+      console.log('Could not find object');
+      return null;
     }
   }
 }
 
-export default S3Service
+export default S3Service;
diff --git a/packages/app/lib/services/stageService.tsx b/packages/app/lib/services/stageService.tsx
index 71e926701..77b1d5729 100644
--- a/packages/app/lib/services/stageService.tsx
+++ b/packages/app/lib/services/stageService.tsx
@@ -1,33 +1,33 @@
-import { IStage } from 'streameth-new-server/src/interfaces/stage.interface'
-import { apiUrl } from '@/lib/utils/utils'
-import { IExtendedStage } from '../types'
-import { fetchEvents } from './eventService'
-import { Session, Stream } from 'livepeer/dist/models/components'
+import { IStage } from 'streameth-new-server/src/interfaces/stage.interface';
+import { apiUrl } from '@/lib/utils/utils';
+import { IExtendedStage } from '../types';
+import { fetchEvents } from './eventService';
+import { Session, Stream } from 'livepeer/dist/models/components';
 
 export async function fetchStage({
   stage,
 }: {
-  stage: string
+  stage: string;
 }): Promise<IExtendedStage | null> {
   try {
     const response = await fetch(`${apiUrl()}/stages/${stage}`, {
       cache: 'no-cache',
-    })
-    const data = (await response.json()).data
+    });
+    const data = (await response.json()).data;
     if (!data) {
-      return null
+      return null;
     }
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching stage'
+    console.log(e);
+    throw 'Error fetching stage';
   }
 }
 
 export async function fetchStages({
   organizationId,
 }: {
-  organizationId: string
+  organizationId: string;
 }): Promise<IExtendedStage[]> {
   try {
     const stages = await fetch(
@@ -35,12 +35,12 @@ export async function fetchStages({
       {
         cache: 'no-cache',
       }
-    )
-    const data = (await stages.json()).data
-    return data.map((stage: IStage) => stage)
+    );
+    const data = (await stages.json()).data;
+    return data.map((stage: IStage) => stage);
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching stages'
+    console.log(e);
+    throw 'Error fetching stages';
   }
 }
 
@@ -49,9 +49,9 @@ export async function deleteStage({
   organizationId,
   authToken,
 }: {
-  stageId: string
-  organizationId: string
-  authToken: string
+  stageId: string;
+  organizationId: string;
+  authToken: string;
 }): Promise<IExtendedStage> {
   try {
     const response = await fetch(`${apiUrl()}/stages/${stageId}`, {
@@ -61,14 +61,14 @@ export async function deleteStage({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify({ organizationId }),
-    })
+    });
     if (!response.ok) {
-      throw 'Error deleting stage'
+      throw 'Error deleting stage';
     }
-    return await response.json()
+    return await response.json();
   } catch (e) {
-    console.log('error in deleteStage', e)
-    throw e
+    console.log('error in deleteStage', e);
+    throw e;
   }
 }
 
@@ -76,8 +76,8 @@ export async function createStage({
   stage,
   authToken,
 }: {
-  stage: IExtendedStage
-  authToken: string
+  stage: IExtendedStage;
+  authToken: string;
 }): Promise<IStage> {
   const response = await fetch(`${apiUrl()}/stages`, {
     method: 'POST',
@@ -86,39 +86,36 @@ export async function createStage({
       Authorization: `Bearer ${authToken}`,
     },
     body: JSON.stringify(stage),
-  })
+  });
 
   if (!response.ok) {
-    throw 'Error creating stage'
+    throw 'Error creating stage';
   }
-  return (await response.json()).data
+  return (await response.json()).data;
 }
 
 export async function fetchEventStages({
   eventId,
 }: {
-  eventId?: string
+  eventId?: string;
 }): Promise<IExtendedStage[]> {
   try {
-    const response = await fetch(
-      `${apiUrl()}/stages/event/${eventId}`,
-      {
-        cache: 'no-store',
-      }
-    )
+    const response = await fetch(`${apiUrl()}/stages/event/${eventId}`, {
+      cache: 'no-store',
+    });
 
-    const data = (await response.json()).data
-    return data.map((stage: IStage) => stage)
+    const data = (await response.json()).data;
+    return data.map((stage: IStage) => stage);
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching stages'
+    console.log(e);
+    throw 'Error fetching stages';
   }
 }
 
 export async function fetchOrganizationStages({
   organizationId,
 }: {
-  organizationId?: string
+  organizationId?: string;
 }): Promise<IExtendedStage[]> {
   try {
     const response = await fetch(
@@ -126,13 +123,13 @@ export async function fetchOrganizationStages({
       {
         cache: 'no-store',
       }
-    )
+    );
 
-    const data = (await response.json()).data
-    return data.map((stage: IStage) => stage)
+    const data = (await response.json()).data;
+    return data.map((stage: IStage) => stage);
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching stages'
+    console.log(e);
+    throw 'Error fetching stages';
   }
 }
 
@@ -140,10 +137,10 @@ export const updateStage = async ({
   stage,
   authToken,
 }: {
-  stage: IExtendedStage
-  authToken: string
+  stage: IExtendedStage;
+  authToken: string;
 }): Promise<IExtendedStage> => {
-  const { _id, createdAt, updatedAt, __v, ...rest } = stage
+  const { _id, createdAt, updatedAt, __v, ...rest } = stage;
   try {
     const response = await fetch(`${apiUrl()}/stages/${_id}`, {
       method: 'PUT',
@@ -152,17 +149,17 @@ export const updateStage = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify(rest),
-    })
+    });
 
     if (!response.ok) {
-      throw new Error('Error updating stage')
+      throw new Error('Error updating stage');
     }
-    return (await response.json()).data
+    return (await response.json()).data;
   } catch (error) {
-    console.error('Error updating stage:', error)
-    throw error
+    console.error('Error updating stage:', error);
+    throw error;
   }
-}
+};
 
 export async function createMultistream({
   name,
@@ -172,12 +169,12 @@ export async function createMultistream({
   authToken,
   organizationId,
 }: {
-  name: string
-  streamId: string
-  targetStreamKey: string
-  targetURL: string
-  authToken: string
-  organizationId?: string
+  name: string;
+  streamId: string;
+  targetStreamKey: string;
+  targetURL: string;
+  authToken: string;
+  organizationId?: string;
 }): Promise<{ message: string; status: string }> {
   const response = await fetch(`${apiUrl()}/streams/multistream`, {
     method: 'POST',
@@ -192,13 +189,13 @@ export async function createMultistream({
       targetStreamKey,
       organizationId,
     }),
-  })
+  });
 
   if (!response.ok) {
-    throw 'Error creating multistream'
+    throw 'Error creating multistream';
   }
 
-  return await response.json()
+  return await response.json();
 }
 
 export async function deleteMultistream({
@@ -207,10 +204,10 @@ export async function deleteMultistream({
   authToken,
   organizationId,
 }: {
-  streamId: string
-  targetId: string
-  authToken: string
-  organizationId?: string
+  streamId: string;
+  targetId: string;
+  authToken: string;
+  organizationId?: string;
 }): Promise<IExtendedStage> {
   try {
     const response = await fetch(`${apiUrl()}/streams/multistream`, {
@@ -220,37 +217,34 @@ export async function deleteMultistream({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify({ streamId, targetId, organizationId }),
-    })
+    });
     if (!response.ok) {
-      throw 'Error deleting multistream'
+      throw 'Error deleting multistream';
     }
-    return await response.json()
+    return await response.json();
   } catch (e) {
-    console.log('error in deleteMultistream', e)
-    throw e
+    console.log('error in deleteMultistream', e);
+    throw e;
   }
 }
 
 export async function fetchStageRecordings({
   streamId,
 }: {
-  streamId: string
+  streamId: string;
 }): Promise<{ parentStream: Stream; recordings: Session[] } | null> {
   try {
-    const response = await fetch(
-      `${apiUrl()}/streams/recording/${streamId}`,
-      {
-        cache: 'no-cache',
-      }
-    )
-    const data = (await response.json()).data
+    const response = await fetch(`${apiUrl()}/streams/recording/${streamId}`, {
+      cache: 'no-cache',
+    });
+    const data = (await response.json()).data;
 
     if (!data) {
-      return null
+      return null;
     }
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching stage'
+    console.log(e);
+    throw 'Error fetching stage';
   }
 }
diff --git a/packages/app/lib/services/stateService.ts b/packages/app/lib/services/stateService.ts
index 82af81e6b..00857d4f4 100644
--- a/packages/app/lib/services/stateService.ts
+++ b/packages/app/lib/services/stateService.ts
@@ -2,17 +2,17 @@ import {
   IState,
   StateStatus,
   StateType,
-} from 'streameth-new-server/src/interfaces/state.interface'
-import { IExtendedState } from '../types'
-import { apiUrl } from '@/lib/utils/utils'
-import { revalidatePath } from 'next/cache'
+} from 'streameth-new-server/src/interfaces/state.interface';
+import { IExtendedState } from '../types';
+import { apiUrl } from '@/lib/utils/utils';
+import { revalidatePath } from 'next/cache';
 
 export const createState = async ({
   state,
   authToken,
 }: {
-  state: IState
-  authToken: string
+  state: IState;
+  authToken: string;
 }): Promise<IState> => {
   try {
     const response = await fetch(`${apiUrl()}/states`, {
@@ -22,18 +22,18 @@ export const createState = async ({
         Authorization: `Bearer ${authToken}`,
       },
       body: JSON.stringify(state),
-    })
+    });
     if (!response.ok) {
-      console.log('error in createState', await response.json())
-      throw 'Error updating state'
+      console.log('error in createState', await response.json());
+      throw 'Error updating state';
     }
-    revalidatePath('/studio')
-    return (await response.json()).data
+    revalidatePath('/studio');
+    return (await response.json()).data;
   } catch (e) {
-    console.log('error in createState', e)
-    throw e
+    console.log('error in createState', e);
+    throw e;
   }
-}
+};
 
 export const fetchAllStates = async ({
   sessionId,
@@ -42,34 +42,34 @@ export const fetchAllStates = async ({
   type,
   status,
 }: {
-  sessionId?: string
-  eventId?: string
-  eventSlug?: string
-  type?: StateType
-  status?: StateStatus
+  sessionId?: string;
+  eventId?: string;
+  eventSlug?: string;
+  type?: StateType;
+  status?: StateStatus;
 }): Promise<IExtendedState[]> => {
   try {
-    const paramsObj: Record<string, string> = {}
-    if (sessionId !== undefined) paramsObj.sessionId = sessionId
-    if (eventId !== undefined) paramsObj.eventId = eventId
-    if (eventSlug !== undefined) paramsObj.eventSlug = eventSlug
-    if (type !== undefined) paramsObj.type = type
-    if (status !== undefined) paramsObj.status = status
+    const paramsObj: Record<string, string> = {};
+    if (sessionId !== undefined) paramsObj.sessionId = sessionId;
+    if (eventId !== undefined) paramsObj.eventId = eventId;
+    if (eventSlug !== undefined) paramsObj.eventSlug = eventSlug;
+    if (type !== undefined) paramsObj.type = type;
+    if (status !== undefined) paramsObj.status = status;
 
-    const params = new URLSearchParams(paramsObj).toString()
+    const params = new URLSearchParams(paramsObj).toString();
 
     const response = await fetch(`${apiUrl()}/states?${params}`, {
       cache: 'no-store',
-    })
+    });
     if (!response.ok) {
-      console.log(response.status)
-      return []
+      console.log(response.status);
+      return [];
     }
-    const data: IExtendedState[] = (await response.json()).data
+    const data: IExtendedState[] = (await response.json()).data;
 
-    return data
+    return data;
   } catch (e) {
-    console.log(e)
-    throw 'Error fetching states'
+    console.log(e);
+    throw 'Error fetching states';
   }
-}
+};
diff --git a/packages/app/lib/services/supportService.tsx b/packages/app/lib/services/supportService.tsx
index 736573f5c..6c8ef1a23 100644
--- a/packages/app/lib/services/supportService.tsx
+++ b/packages/app/lib/services/supportService.tsx
@@ -1,12 +1,12 @@
-import { apiUrl } from '../utils/utils'
-import { ISupport } from 'streameth-new-server/src/interfaces/support.interface'
+import { apiUrl } from '../utils/utils';
+import { ISupport } from 'streameth-new-server/src/interfaces/support.interface';
 
 export async function createSupportTicket({
   message,
   authToken,
 }: {
-  message: string
-  authToken: string
+  message: string;
+  authToken: string;
 }): Promise<ISupport> {
   const response = await fetch(`${apiUrl()}/tickets`, {
     method: 'POST',
@@ -15,9 +15,9 @@ export async function createSupportTicket({
       Authorization: `Bearer ${authToken}`,
     },
     body: JSON.stringify({ message }),
-  })
+  });
   if (!response.ok) {
-    throw 'Error creating ticket'
+    throw 'Error creating ticket';
   }
-  return (await response.json()).data
+  return (await response.json()).data;
 }
diff --git a/packages/app/lib/services/userService.ts b/packages/app/lib/services/userService.ts
index 6ab0930cf..ec8f5c55f 100644
--- a/packages/app/lib/services/userService.ts
+++ b/packages/app/lib/services/userService.ts
@@ -1,12 +1,12 @@
-import { apiUrl } from '../utils/utils'
-import { IExtendedUser } from '../types'
+import { apiUrl } from '../utils/utils';
+import { IExtendedUser } from '../types';
 
 export async function fetchUserData({
   userId,
   authToken,
 }: {
-  userId?: string
-  authToken?: string
+  userId?: string;
+  authToken?: string;
 }): Promise<IExtendedUser | null> {
   try {
     const data = await fetch(`${apiUrl()}/users/${userId}`, {
@@ -16,14 +16,14 @@ export async function fetchUserData({
         'Content-Type': 'application/json',
         Authorization: `Bearer ${authToken}`,
       },
-    })
+    });
 
     if (!data.ok) {
-      return null
+      return null;
     }
-    return (await data.json()).data
+    return (await data.json()).data;
   } catch (e) {
-    console.log('error in fetchUser', e)
-    throw e
+    console.log('error in fetchUser', e);
+    throw e;
   }
 }
diff --git a/packages/app/lib/svg/DefaultThumbnail.tsx b/packages/app/lib/svg/DefaultThumbnail.tsx
index 4d10761c3..e3d0a97cb 100644
--- a/packages/app/lib/svg/DefaultThumbnail.tsx
+++ b/packages/app/lib/svg/DefaultThumbnail.tsx
@@ -1,15 +1,14 @@
-import React from 'react'
+import React from 'react';
 
-const DefaultThumbnail: React.FC<
-  React.SVGProps<SVGSVGElement>
-> = () => {
+const DefaultThumbnail: React.FC<React.SVGProps<SVGSVGElement>> = () => {
   return (
     <svg
       width="100%"
       height="100%"
       viewBox="0 0 265 143"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <rect width="265" height="142.31" rx="8" fill="#CBD5E1" />
       <path
         d="M148.625 102.25H95.5C93.8424 102.25 92.2527 101.592 91.0806 100.419C89.9085 99.2473 89.25 97.6576 89.25 96V46C89.25 44.3424 89.9085 42.7527 91.0806 41.5806C92.2527 40.4085 93.8424 39.75 95.5 39.75H148.625C150.283 39.75 151.872 40.4085 153.044 41.5806C154.217 42.7527 154.875 44.3424 154.875 46V58.6875L171.812 46.5937C172.279 46.2617 172.828 46.0641 173.399 46.0226C173.97 45.9811 174.541 46.0973 175.051 46.3585C175.56 46.6197 175.988 47.0159 176.288 47.5038C176.587 47.9916 176.747 48.5525 176.75 49.125V92.875C176.747 93.4475 176.587 94.0084 176.288 94.4962C175.988 94.9841 175.56 95.3803 175.051 95.6415C174.541 95.9027 173.97 96.0189 173.399 95.9774C172.828 95.9359 172.279 95.7383 171.812 95.4062L154.875 83.3125V96C154.875 97.6576 154.217 99.2473 153.044 100.419C151.872 101.592 150.283 102.25 148.625 102.25Z"
@@ -17,7 +16,7 @@ const DefaultThumbnail: React.FC<
         fillOpacity="0.2"
       />
     </svg>
-  )
-}
+  );
+};
 
-export default DefaultThumbnail
+export default DefaultThumbnail;
diff --git a/packages/app/lib/svg/EmptyFolder.tsx b/packages/app/lib/svg/EmptyFolder.tsx
index 5eac90ee1..7a4dc8b05 100644
--- a/packages/app/lib/svg/EmptyFolder.tsx
+++ b/packages/app/lib/svg/EmptyFolder.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const EmptyFolder: React.FC<React.SVGProps<SVGSVGElement>> = ({
   width = '200',
@@ -10,7 +10,8 @@ const EmptyFolder: React.FC<React.SVGProps<SVGSVGElement>> = ({
       height={height}
       viewBox="0 0 200 122"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g clipPath="url(#clip0_911_8802)">
         <path
           d="M138.019 7.24605C138.557 5.77642 139.526 4.50403 140.801 3.59647C142.076 2.6889 143.596 2.18873 145.16 2.16182H193.988C194.835 2.12456 195.68 2.2745 196.463 2.60099C197.245 2.92748 197.946 3.42247 198.516 4.05073C199.085 4.67899 199.509 5.42506 199.757 6.23582C200.005 7.04658 200.072 7.90208 199.951 8.74141L187.335 114.644C187.066 116.447 186.165 118.096 184.792 119.296C183.419 120.495 181.664 121.168 179.84 121.193H24.8111C23.9698 121.223 23.1319 121.07 22.3562 120.743C21.5804 120.416 20.8856 119.923 20.3204 119.299C19.7552 118.675 19.3333 117.935 19.0842 117.131C18.8351 116.327 18.7649 115.478 18.8785 114.644L29.4681 25.6665C29.7348 23.8631 30.6349 22.2136 32.0072 21.0135C33.3795 19.8135 35.1343 19.1413 36.9571 19.1174H121.326C124.981 19.0542 128.532 17.8865 131.512 15.7677C134.491 13.6489 136.76 10.6782 138.019 7.24605Z"
@@ -86,7 +87,7 @@ const EmptyFolder: React.FC<React.SVGProps<SVGSVGElement>> = ({
         </clipPath>
       </defs>
     </svg>
-  )
-}
+  );
+};
 
-export default EmptyFolder
+export default EmptyFolder;
diff --git a/packages/app/lib/svg/StreamethLogo.tsx b/packages/app/lib/svg/StreamethLogo.tsx
index ef5139b39..f1a4b26be 100644
--- a/packages/app/lib/svg/StreamethLogo.tsx
+++ b/packages/app/lib/svg/StreamethLogo.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const StreamethLogo: React.FC<React.SVGProps<SVGSVGElement>> = () => {
   return (
@@ -6,7 +6,8 @@ const StreamethLogo: React.FC<React.SVGProps<SVGSVGElement>> = () => {
       width="41"
       height="36"
       viewBox="0 0 41 36"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -32,7 +33,8 @@ const StreamethLogo: React.FC<React.SVGProps<SVGSVGElement>> = () => {
           y1="17.4768"
           x2="8.51433"
           y2="-15.393"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#6426EF" />
           <stop offset="1" stopColor="#FF9976" />
         </linearGradient>
@@ -42,7 +44,8 @@ const StreamethLogo: React.FC<React.SVGProps<SVGSVGElement>> = () => {
           y1="55.1411"
           x2="-30.7261"
           y2="-82.6672"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#6426EF" />
           <stop offset="1" stopColor="#FF9976" />
         </linearGradient>
@@ -52,13 +55,14 @@ const StreamethLogo: React.FC<React.SVGProps<SVGSVGElement>> = () => {
           y1="-184.371"
           x2="36.6422"
           y2="18.2123"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#6426EF" />
           <stop offset="1" stopColor="#FF9976" />
         </linearGradient>
       </defs>
     </svg>
-  )
-}
+  );
+};
 
-export default StreamethLogo
+export default StreamethLogo;
diff --git a/packages/app/lib/svg/StreamethLogoGray.tsx b/packages/app/lib/svg/StreamethLogoGray.tsx
index 7fb7ddc37..c7feb02ff 100644
--- a/packages/app/lib/svg/StreamethLogoGray.tsx
+++ b/packages/app/lib/svg/StreamethLogoGray.tsx
@@ -10,7 +10,8 @@ const StreamethLogoGray: React.FC<React.SVGProps<SVGSVGElement>> = ({
       className={className}
       viewBox="0 0 176 33"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -34,7 +35,7 @@ const StreamethLogoGray: React.FC<React.SVGProps<SVGSVGElement>> = ({
         fill="#64748B"
       />
     </svg>
-  )
-}
+  );
+};
 
-export default StreamethLogoGray
+export default StreamethLogoGray;
diff --git a/packages/app/lib/svg/StreamethLogoWhite.tsx b/packages/app/lib/svg/StreamethLogoWhite.tsx
index f4d6dc733..1779bd234 100644
--- a/packages/app/lib/svg/StreamethLogoWhite.tsx
+++ b/packages/app/lib/svg/StreamethLogoWhite.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const StreamethLogoWhite: React.FC<React.SVGProps<SVGSVGElement>> = ({
   width = '100%',
@@ -12,7 +12,8 @@ const StreamethLogoWhite: React.FC<React.SVGProps<SVGSVGElement>> = ({
       height={height}
       viewBox="0 0 400 400"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -32,7 +33,7 @@ const StreamethLogoWhite: React.FC<React.SVGProps<SVGSVGElement>> = ({
         fill="#F1F5F9"
       />
     </svg>
-  )
-}
+  );
+};
 
-export default StreamethLogoWhite
+export default StreamethLogoWhite;
diff --git a/packages/app/lib/svg/StreamethStudio.tsx b/packages/app/lib/svg/StreamethStudio.tsx
index 3b551aea5..66db6032d 100644
--- a/packages/app/lib/svg/StreamethStudio.tsx
+++ b/packages/app/lib/svg/StreamethStudio.tsx
@@ -1,15 +1,14 @@
-import React from 'react'
+import React from 'react';
 
-const StreamethStudio: React.FC<
-  React.SVGProps<SVGSVGElement>
-> = () => {
+const StreamethStudio: React.FC<React.SVGProps<SVGSVGElement>> = () => {
   return (
     <svg
       width="183"
       height="40"
       viewBox="0 0 183 40"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -43,7 +42,8 @@ const StreamethStudio: React.FC<
           y1="19.4926"
           x2="8.48588"
           y2="-13.2674"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#6426EF" />
           <stop offset="1" stopColor="#FF9976" />
         </linearGradient>
@@ -53,7 +53,8 @@ const StreamethStudio: React.FC<
           y1="57.031"
           x2="-30.6234"
           y2="-80.3168"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#6426EF" />
           <stop offset="1" stopColor="#FF9976" />
         </linearGradient>
@@ -63,13 +64,14 @@ const StreamethStudio: React.FC<
           y1="-181.681"
           x2="36.5197"
           y2="20.2257"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#6426EF" />
           <stop offset="1" stopColor="#FF9976" />
         </linearGradient>
       </defs>
     </svg>
-  )
-}
+  );
+};
 
-export default StreamethStudio
+export default StreamethStudio;
diff --git a/packages/app/lib/svg/UploadComplete.tsx b/packages/app/lib/svg/UploadComplete.tsx
index b7b294e5f..5420a72a7 100644
--- a/packages/app/lib/svg/UploadComplete.tsx
+++ b/packages/app/lib/svg/UploadComplete.tsx
@@ -1,15 +1,14 @@
-import React from 'react'
+import React from 'react';
 
-const UploadComplete: React.FC<
-  React.SVGProps<SVGSVGElement>
-> = () => {
+const UploadComplete: React.FC<React.SVGProps<SVGSVGElement>> = () => {
   return (
     <svg
       width="120"
       height="120"
       viewBox="0 0 120 120"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g filter="url(#filter0_i_542_7480)">
         <rect
           width="120"
@@ -39,14 +38,7 @@ const UploadComplete: React.FC<
           stroke-linecap="round"
           stroke-linejoin="round"
         />
-        <rect
-          x="88"
-          y="88"
-          width="32"
-          height="32"
-          rx="16"
-          fill="#3FB570"
-        />
+        <rect x="88" y="88" width="32" height="32" rx="16" fill="#3FB570" />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -62,7 +54,8 @@ const UploadComplete: React.FC<
           width="128"
           height="126"
           filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB">
+          colorInterpolationFilters="sRGB"
+        >
           <feFlood flood-opacity="0" result="BackgroundImageFix" />
           <feBlend
             mode="normal"
@@ -78,12 +71,7 @@ const UploadComplete: React.FC<
           />
           <feOffset dx="8" dy="6" />
           <feGaussianBlur stdDeviation="5" />
-          <feComposite
-            in2="hardAlpha"
-            operator="arithmetic"
-            k2="-1"
-            k3="1"
-          />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
           <feColorMatrix
             type="matrix"
             values="0 0 0 0 0.531026 0 0 0 0 0.43333 0 0 0 0 0.983318 0 0 0 1 0"
@@ -100,13 +88,14 @@ const UploadComplete: React.FC<
           y1="120.41"
           x2="51.7058"
           y2="-22.6718"
-          gradientUnits="userSpaceOnUse">
+          gradientUnits="userSpaceOnUse"
+        >
           <stop stopColor="#3D22BA" />
           <stop offset="1" stopColor="#6426EF" />
         </linearGradient>
       </defs>
     </svg>
-  )
-}
+  );
+};
 
-export default UploadComplete
+export default UploadComplete;
diff --git a/packages/app/lib/svg/YoutubeIcon.tsx b/packages/app/lib/svg/YoutubeIcon.tsx
index 2d25ffd58..579b556a3 100644
--- a/packages/app/lib/svg/YoutubeIcon.tsx
+++ b/packages/app/lib/svg/YoutubeIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const YoutubeIcon = ({ className = '' }) => {
   return (
@@ -6,11 +6,12 @@ const YoutubeIcon = ({ className = '' }) => {
       className={className}
       role="img"
       viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <title>YouTube</title>
       <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
     </svg>
-  )
-}
+  );
+};
 
-export default YoutubeIcon
+export default YoutubeIcon;
diff --git a/packages/app/lib/types.ts b/packages/app/lib/types.ts
index de3a9e3c6..50715b7c4 100644
--- a/packages/app/lib/types.ts
+++ b/packages/app/lib/types.ts
@@ -1,15 +1,15 @@
 import {
   IOrganization,
   ISocials,
-} from 'streameth-new-server/src/interfaces/organization.interface'
-import { IEvent } from 'streameth-new-server/src/interfaces/event.interface'
-import { ISession } from 'streameth-new-server/src/interfaces/session.interface'
-import { IStage } from 'streameth-new-server/src/interfaces/stage.interface'
-import { ISpeaker } from 'streameth-new-server/src/interfaces/speaker.interface'
-import { IState } from 'streameth-new-server/src/interfaces/state.interface'
-import { IUser } from 'streameth-new-server/src/interfaces/user.interface'
-import { IChat } from 'streameth-new-server/src/interfaces/chat.interface'
-import { INftCollection } from 'streameth-new-server/src/interfaces/nft.collection.interface'
+} from 'streameth-new-server/src/interfaces/organization.interface';
+import { IEvent } from 'streameth-new-server/src/interfaces/event.interface';
+import { ISession } from 'streameth-new-server/src/interfaces/session.interface';
+import { IStage } from 'streameth-new-server/src/interfaces/stage.interface';
+import { ISpeaker } from 'streameth-new-server/src/interfaces/speaker.interface';
+import { IState } from 'streameth-new-server/src/interfaces/state.interface';
+import { IUser } from 'streameth-new-server/src/interfaces/user.interface';
+import { IChat } from 'streameth-new-server/src/interfaces/chat.interface';
+import { INftCollection } from 'streameth-new-server/src/interfaces/nft.collection.interface';
 
 export enum eSort {
   asc_alpha = 'asc_alpha',
@@ -24,213 +24,210 @@ export enum eLayout {
 }
 
 export interface Page {
-  name: string
-  href: string
-  bgColor?: string
-  icon?: React.JSX.Element
+  name: string;
+  href: string;
+  bgColor?: string;
+  icon?: React.JSX.Element;
 }
 export interface NavBarProps {
-  pages: Page[]
-  logo: string
-  homePath: string
-  showNav: boolean
+  pages: Page[];
+  logo: string;
+  homePath: string;
+  showNav: boolean;
 }
 
 export interface EventPageProps {
   params: {
-    event: string
-    organization: string
-    stage?: string
-  }
+    event: string;
+    organization: string;
+    stage?: string;
+  };
   searchParams: {
-    stage?: string
-    date?: string
-    page?: number
-  }
+    stage?: string;
+    date?: string;
+    page?: number;
+  };
 }
 export interface SearchPageProps {
   searchParams: {
-    organization?: IOrganization['slug']
-    event?: string
-    searchQuery?: string
-    page?: string
-  }
+    organization?: IOrganization['slug'];
+    event?: string;
+    searchQuery?: string;
+    page?: string;
+  };
 }
 
 export interface OrganizationPageProps {
   params: {
-    organization: string
-  }
+    organization: string;
+  };
   searchParams: {
-    id: string
-    streamId: string
-    session: string
-    event?: string
-    searchQuery?: string
-    page?: string
-    collectionId?: string
-    stage?: string
-  }
+    id: string;
+    streamId: string;
+    session: string;
+    event?: string;
+    searchQuery?: string;
+    page?: string;
+    collectionId?: string;
+    stage?: string;
+  };
 }
 
 export interface WatchPageProps {
   searchParams: {
-    event: string
-    session: string
-    assetId: string
-  }
+    event: string;
+    session: string;
+    assetId: string;
+  };
 }
 
 export interface IPagination {
-  currentPage?: number
-  totalPages: number
-  totalItems: number
-  limit: number
+  currentPage?: number;
+  totalPages: number;
+  totalItems: number;
+  limit: number;
 }
 export interface studioPageParams {
   params: {
-    organization: string
-    session: string
-    eventId?: string
-  }
+    organization: string;
+    session: string;
+    eventId?: string;
+  };
   searchParams: {
-    eventId?: string
-    settings: string
-    stage: string
-    stageSetting: string
-    streamId: string
-    collapsed?: boolean
-    hasChannel?: string
-  }
+    eventId?: string;
+    settings: string;
+    stage: string;
+    stageSetting: string;
+    streamId: string;
+    collapsed?: boolean;
+    hasChannel?: string;
+  };
 }
 
 export interface nftPageParams {
   params: {
-    organization: string
-    nftId?: string
-  }
+    organization: string;
+    nftId?: string;
+  };
 }
 
 export interface ClipsPageParams {
   params: {
-    organization: string
-    session: string
-    eventId: string
-  }
+    organization: string;
+    session: string;
+    eventId: string;
+  };
   searchParams: {
-    stage: string
-    selectedSession: string
-    selectedRecording: string
-    replaceAsset: string
-    previewId: string
-  }
+    stage: string;
+    selectedSession: string;
+    selectedRecording: string;
+    replaceAsset: string;
+    previewId: string;
+  };
 }
 
 export interface IGoogleAuth {
   web: {
-    client_id: string
-    project_id: string
-    auth_uri: string
-    token_uri: string
-    auth_provider_x509_cert_url: string
-    client_secret: string
-    redirect_uris: string[]
-    javascript_origins: string[]
-  }
+    client_id: string;
+    project_id: string;
+    auth_uri: string;
+    token_uri: string;
+    auth_provider_x509_cert_url: string;
+    client_secret: string;
+    redirect_uris: string[];
+    javascript_origins: string[];
+  };
 }
 
 export interface IExtendedEvent extends IEvent {
-  _id: string
+  _id: string;
 }
 
 interface IExtendedSocials extends ISocials {
-  _id: string
+  _id: string;
 }
 export interface IExtendedOrganization
   extends Omit<IOrganization, '_id' | 'socials'> {
-  _id: string
-  socials?: IExtendedSocials[]
+  _id: string;
+  socials?: IExtendedSocials[];
 }
 export interface IExtendedSession
   extends Omit<ISession, '_id' | 'nftCollections'> {
-  _id: string
-  nftCollections?: string[]
-  createdAt?: string
-  updatedAt?: string
-  __v?: string
-}
-export interface IExtendedStage
-  extends Omit<IStage, '_id' | 'nftCollections'> {
-  _id?: string
-  nftCollections?: string[]
-  createdAt?: string
-  updatedAt?: string
-  __v?: string
-}
-export interface IExtendedSpeaker
-  extends Omit<ISpeaker, 'organizationId'> {}
+  _id: string;
+  nftCollections?: string[];
+  createdAt?: string;
+  updatedAt?: string;
+  __v?: string;
+}
+export interface IExtendedStage extends Omit<IStage, '_id' | 'nftCollections'> {
+  _id?: string;
+  nftCollections?: string[];
+  createdAt?: string;
+  updatedAt?: string;
+  __v?: string;
+}
+export interface IExtendedSpeaker extends Omit<ISpeaker, 'organizationId'> {}
 export interface IExtendedUser extends Omit<IUser, 'organizations'> {
-  _id: string
-  organizations: IExtendedOrganization[]
+  _id: string;
+  organizations: IExtendedOrganization[];
 }
 export interface IExtendedChat extends Omit<IChat, '_id'> {
-  _id: string
+  _id: string;
 }
 
 export interface IExtendedState extends Omit<IState, '_id'> {
-  _id: string
+  _id: string;
 }
 
-export interface IExtendedNftCollections
-  extends Omit<INftCollection, '_id'> {
-  _id: string
-  createdAt?: string
-  updatedAt?: string
-  __v?: string
+export interface IExtendedNftCollections extends Omit<INftCollection, '_id'> {
+  _id: string;
+  createdAt?: string;
+  updatedAt?: string;
+  __v?: string;
 }
 
 export interface EmbedPageParams {
   searchParams: {
-    vod: string
-    playbackId?: string
-    stage?: string
-    session?: string
-  }
+    vod: string;
+    playbackId?: string;
+    stage?: string;
+    session?: string;
+  };
 }
 
 export interface LivestreamPageParams {
   params: {
-    organization: string
-    streamId: string
-  }
-  searchParams: { layout: eLayout; sort: eSort; show: boolean }
+    organization: string;
+    streamId: string;
+  };
+  searchParams: { layout: eLayout; sort: eSort; show: boolean };
 }
 
 export interface IGenerateEmbed {
-  playbackId?: string
-  vod?: boolean
-  streamId?: string
-  playerName: string
-  sessionId?: string
-  stageId?: string
+  playbackId?: string;
+  vod?: boolean;
+  streamId?: string;
+  playerName: string;
+  sessionId?: string;
+  stageId?: string;
 }
 
 export interface IGenerateEmbedCode extends IGenerateEmbed {
-  url: string
+  url: string;
 }
 
 export interface ChannelPageParams {
   params: {
-    organization: string
-  }
+    organization: string;
+  };
   searchParams: {
-    tab?: string
-    search: string
-    id: string
-    streamId: string
-  }
+    tab?: string;
+    search: string;
+    id: string;
+    streamId: string;
+  };
 }
 
 export interface INFTSessions extends IExtendedSession {
-  videoType: string
+  videoType: string;
 }
diff --git a/packages/app/lib/uploadVideo.ts b/packages/app/lib/uploadVideo.ts
index 0d5389bd0..a2084b69f 100644
--- a/packages/app/lib/uploadVideo.ts
+++ b/packages/app/lib/uploadVideo.ts
@@ -1,5 +1,5 @@
-import { type MutableRefObject } from 'react'
-import { Upload } from 'tus-js-client'
+import { type MutableRefObject } from 'react';
+import { Upload } from 'tus-js-client';
 
 const uploadVideo = (
   video: File,
@@ -19,27 +19,25 @@ const uploadVideo = (
       filetype: video.type,
     },
     onError: (error) => {
-      console.log('An error occurred:', error)
+      console.log('An error occurred:', error);
     },
     onProgress: (bytesUploaded, bytesTotal) => {
-      const percentage = Math.round(
-        (bytesUploaded / bytesTotal) * 100
-      )
-      onProgress(percentage)
+      const percentage = Math.round((bytesUploaded / bytesTotal) * 100);
+      onProgress(percentage);
     },
     onSuccess: () => {
-      console.log('Upload successful!')
-      onSuccess()
+      console.log('Upload successful!');
+      onSuccess();
     },
-  })
+  });
 
-  abortControllerRef.current = new AbortController()
+  abortControllerRef.current = new AbortController();
   abortControllerRef.current.signal.addEventListener('abort', () => {
-    console.log('Aborting upload')
-    upload.abort()
-  })
+    console.log('Aborting upload');
+    upload.abort();
+  });
 
-  upload.start()
-}
+  upload.start();
+};
 
-export default uploadVideo
+export default uploadVideo;
diff --git a/packages/app/lib/utils/generateGoogleCalendar.ts b/packages/app/lib/utils/generateGoogleCalendar.ts
index 53831171b..5c8acf45d 100644
--- a/packages/app/lib/utils/generateGoogleCalendar.ts
+++ b/packages/app/lib/utils/generateGoogleCalendar.ts
@@ -1,6 +1,6 @@
-import { formatDate } from './time'
+import { formatDate } from './time';
 
-const BASE_URL = 'https://calendar.google.com/calendar/render'
+const BASE_URL = 'https://calendar.google.com/calendar/render';
 
 const generateGoogleCalendar = ({
   eventName,
@@ -8,15 +8,15 @@ const generateGoogleCalendar = ({
   start,
   end,
 }: {
-  eventName: string
-  description: string
-  start: Date
-  end: Date
+  eventName: string;
+  description: string;
+  start: Date;
+  end: Date;
 }) => {
-  const startDate = formatDate(start, 'YYYYMMDDTHHmm00Z')
-  const endDate = formatDate(end, 'YYYYMMDDTHHmm00Z')
+  const startDate = formatDate(start, 'YYYYMMDDTHHmm00Z');
+  const endDate = formatDate(end, 'YYYYMMDDTHHmm00Z');
 
-  return `${BASE_URL}?action=TEMPLATE&text=${eventName}&dates=${startDate}/${endDate}&details=${description}`
-}
+  return `${BASE_URL}?action=TEMPLATE&text=${eventName}&dates=${startDate}/${endDate}&details=${description}`;
+};
 
-export default generateGoogleCalendar
+export default generateGoogleCalendar;
diff --git a/packages/app/lib/utils/googleAuth.ts b/packages/app/lib/utils/googleAuth.ts
index 2d518bd2d..11c6a96d6 100644
--- a/packages/app/lib/utils/googleAuth.ts
+++ b/packages/app/lib/utils/googleAuth.ts
@@ -1,26 +1,24 @@
-import { google } from 'googleapis'
+import { google } from 'googleapis';
 
 export const getYoutubeClient = (accessToken: string) => {
-  const oauth2Client = new google.auth.OAuth2()
+  const oauth2Client = new google.auth.OAuth2();
   oauth2Client.setCredentials({
     access_token: accessToken,
-  })
+  });
 
   return google.youtube({
     version: 'v3',
     auth: oauth2Client,
-  })
-}
+  });
+};
 
-export const generateGoogleAccessToken = async (
-  code: string
-): Promise<any> => {
-  const OAUTH_SECRET = process.env.OAUTH_SECRET || ''
-  const oAuthSecret: any = JSON.parse(OAUTH_SECRET)
-  const clientId = oAuthSecret.web.client_id
-  const clientSecret = oAuthSecret.web.client_secret
-  const tokenUri = oAuthSecret.web.token_uri
-  const redirectUri = oAuthSecret.web.redirect_uri
+export const generateGoogleAccessToken = async (code: string): Promise<any> => {
+  const OAUTH_SECRET = process.env.OAUTH_SECRET || '';
+  const oAuthSecret: any = JSON.parse(OAUTH_SECRET);
+  const clientId = oAuthSecret.web.client_id;
+  const clientSecret = oAuthSecret.web.client_secret;
+  const tokenUri = oAuthSecret.web.token_uri;
+  const redirectUri = oAuthSecret.web.redirect_uri;
   try {
     const response = await fetch(tokenUri, {
       method: 'POST',
@@ -31,48 +29,48 @@ export const generateGoogleAccessToken = async (
         redirect_uri: redirectUri,
         grant_type: 'authorization_code',
       }),
-    })
-    const data = await response.json()
+    });
+    const data = await response.json();
 
-    const oauth2Client = new google.auth.OAuth2()
+    const oauth2Client = new google.auth.OAuth2();
     oauth2Client.setCredentials({
       access_token: data.access_token,
-    })
-    const youtube = getYoutubeClient(data.access_token)
+    });
+    const youtube = getYoutubeClient(data.access_token);
 
     // Use YouTube Data API to get channel details
     const channelResponse = await youtube.channels.list({
       part: ['snippet'],
       mine: true,
-    })
+    });
 
-    const channel = channelResponse.data.items?.[0]
+    const channel = channelResponse.data.items?.[0];
     const user = {
       channelId: channel?.id,
       name: channel?.snippet?.title,
       thumbnail: channel?.snippet?.thumbnails?.default?.url,
-    }
+    };
 
-    return { ...data, ...user }
+    return { ...data, ...user };
   } catch (error) {
-    console.error('error in generateGoogleAccessToken', error)
+    console.error('error in generateGoogleAccessToken', error);
   }
-}
+};
 
 export const isStreamingEnabled = async (accessToken: string) => {
-  const youtube = getYoutubeClient(accessToken)
+  const youtube = getYoutubeClient(accessToken);
 
   try {
     const response = await youtube.liveBroadcasts.list({
       part: ['id'],
       mine: true,
-    })
+    });
 
     return response?.data?.items?.length
       ? response?.data?.items?.length > 0
-      : false
+      : false;
   } catch (error) {
-    console.error('Error checking live broadcasts:', error)
-    return false
+    console.error('Error checking live broadcasts:', error);
+    return false;
   }
-}
+};
diff --git a/packages/app/lib/utils/metadata.ts b/packages/app/lib/utils/metadata.ts
index 01d8ab370..39fb262dd 100644
--- a/packages/app/lib/utils/metadata.ts
+++ b/packages/app/lib/utils/metadata.ts
@@ -1,23 +1,21 @@
-import { Metadata } from 'next'
+import { Metadata } from 'next';
 import {
   IExtendedEvent,
   IExtendedOrganization,
   IExtendedSession,
   IExtendedStage,
-} from '../types'
+} from '../types';
 
-const BASE_IMAGE = 'https://streameth.org/streameth_banner.png'
+const BASE_IMAGE = 'https://streameth.org/streameth_banner.png';
 
 export const generalMetadata: Metadata = {
   title: 'StreamETH',
-  description:
-    'The complete solution to host your hybrid or virtual event.',
+  description: 'The complete solution to host your hybrid or virtual event.',
   metadataBase: new URL('https://streameth.org'),
   openGraph: {
     title: 'StreamETH',
     siteName: 'StreamETH',
-    description:
-      'The complete solution to host your hybrid or virtual event.',
+    description: 'The complete solution to host your hybrid or virtual event.',
     images: {
       url: BASE_IMAGE,
       alt: 'StreamETH Logo',
@@ -26,8 +24,7 @@ export const generalMetadata: Metadata = {
   twitter: {
     card: 'summary_large_image',
     title: 'StreamETH',
-    description:
-      'The complete solution to host your hybrid or virtual event.',
+    description: 'The complete solution to host your hybrid or virtual event.',
     images: {
       url: BASE_IMAGE,
       alt: 'StreamETH Logo',
@@ -39,16 +36,14 @@ export const generalMetadata: Metadata = {
       'en-US': '/en-US',
     },
   },
-}
+};
 
 export const organizationMetadata = ({
   organization,
 }: {
-  organization: IExtendedOrganization
+  organization: IExtendedOrganization;
 }): Metadata => {
-  const imageUrl = organization.banner
-    ? organization.banner
-    : BASE_IMAGE
+  const imageUrl = organization.banner ? organization.banner : BASE_IMAGE;
 
   return {
     title: `${organization.name} | StreamETH`,
@@ -78,15 +73,15 @@ export const organizationMetadata = ({
         'en-US': '/en-US',
       },
     },
-  }
-}
+  };
+};
 
 export const archiveMetadata = ({
   event,
 }: {
-  event: IExtendedEvent
+  event: IExtendedEvent;
 }): Metadata => {
-  const imageUrl = event.eventCover ? event.eventCover : BASE_IMAGE
+  const imageUrl = event.eventCover ? event.eventCover : BASE_IMAGE;
 
   return {
     title: `${event.name} | StreamETH`,
@@ -116,17 +111,17 @@ export const archiveMetadata = ({
         'en-US': '/en-US',
       },
     },
-  }
-}
+  };
+};
 
 export const watchMetadata = ({
   organization,
   session,
   thumbnail,
 }: {
-  organization?: IExtendedOrganization
-  session: IExtendedSession
-  thumbnail: string
+  organization?: IExtendedOrganization;
+  session: IExtendedSession;
+  thumbnail: string;
 }): Metadata => {
   return {
     title: `${session.name} | ${organization?.name}`,
@@ -156,17 +151,17 @@ export const watchMetadata = ({
         'en-US': '/en-US',
       },
     },
-  }
-}
+  };
+};
 
 export const stageMetadata = ({
   event,
   stage,
 }: {
-  event: IExtendedEvent
-  stage: IExtendedStage
+  event: IExtendedEvent;
+  stage: IExtendedStage;
 }): Metadata => {
-  const imageUrl = event.eventCover ? event.eventCover : BASE_IMAGE
+  const imageUrl = event.eventCover ? event.eventCover : BASE_IMAGE;
 
   return {
     title: `${stage.name} | StreamETH`,
@@ -196,15 +191,15 @@ export const stageMetadata = ({
         'en-US': '/en-US',
       },
     },
-  }
-}
+  };
+};
 
 export const eventMetadata = ({
   event,
 }: {
-  event: IExtendedEvent
+  event: IExtendedEvent;
 }): Metadata => {
-  const imageUrl = event.eventCover ? event.eventCover : BASE_IMAGE
+  const imageUrl = event.eventCover ? event.eventCover : BASE_IMAGE;
 
   return {
     title: `${event.name} | StreamETH`,
@@ -234,19 +229,17 @@ export const eventMetadata = ({
         'en-US': '/en-US',
       },
     },
-  }
-}
+  };
+};
 
 export const livestreamMetadata = ({
   livestream,
   organization,
 }: {
-  livestream: IExtendedStage
-  organization: IExtendedOrganization
+  livestream: IExtendedStage;
+  organization: IExtendedOrganization;
 }): Metadata => {
-  const imageUrl = livestream.thumbnail
-    ? livestream.thumbnail
-    : BASE_IMAGE
+  const imageUrl = livestream.thumbnail ? livestream.thumbnail : BASE_IMAGE;
 
   return {
     title: `${livestream.name} | ${organization.name}`,
@@ -276,5 +269,5 @@ export const livestreamMetadata = ({
         'en-US': '/en-US',
       },
     },
-  }
-}
+  };
+};
diff --git a/packages/app/lib/utils/time.tsx b/packages/app/lib/utils/time.tsx
index ee43fa97a..b75c5baea 100644
--- a/packages/app/lib/utils/time.tsx
+++ b/packages/app/lib/utils/time.tsx
@@ -1,110 +1,101 @@
-import moment from 'moment-timezone'
-import { IExtendedSession } from '../types'
+import moment from 'moment-timezone';
+import { IExtendedSession } from '../types';
 
 export function generateTimezones() {
-  const timezones = moment.tz.names()
+  const timezones = moment.tz.names();
   return timezones.map((timezone) => {
-    const gmtOffset = moment.tz(timezone).utcOffset()
+    const gmtOffset = moment.tz(timezone).utcOffset();
     const gmtOffsetString =
-      gmtOffset === 0
-        ? 'GMT'
-        : `GMT${moment.tz(timezone).format('Z')}`
+      gmtOffset === 0 ? 'GMT' : `GMT${moment.tz(timezone).format('Z')}`;
 
     return {
       label: timezone,
       value: timezone,
       abbr: gmtOffsetString,
-    }
-  })
+    };
+  });
 }
 
-export const getTime = (date: Date): number => moment(date).valueOf()
+export const getTime = (date: Date): number => moment(date).valueOf();
 
-export const formatDate = (
-  date: Date,
-  format = 'YYYY-MM-DD'
-): string => moment(date).format(format)
+export const formatDate = (date: Date, format = 'YYYY-MM-DD'): string =>
+  moment(date).format(format);
 
 export const getEventDays = (start: Date, end: Date): number[] => {
-  const startDate = moment(start)
-  const endDate = moment(end)
-  const days = endDate.diff(startDate, 'days') + 1
-  const dates: number[] = []
+  const startDate = moment(start);
+  const endDate = moment(end);
+  const days = endDate.diff(startDate, 'days') + 1;
+  const dates: number[] = [];
 
   for (let i = 0; i < days; i++) {
-    dates.push(startDate.clone().add(i, 'days').valueOf())
+    dates.push(startDate.clone().add(i, 'days').valueOf());
   }
 
-  return dates
-}
+  return dates;
+};
 
-export const isSameDay = (
-  timestamp1: number,
-  timestamp2: number
-): boolean => {
-  return moment(timestamp1).isSame(moment(timestamp2), 'day')
-}
+export const isSameDay = (timestamp1: number, timestamp2: number): boolean => {
+  return moment(timestamp1).isSame(moment(timestamp2), 'day');
+};
 
 export const isSameDate = (date1: Date, date2: Date): boolean => {
-  return moment(date1).isSame(date2, 'day')
-}
+  return moment(date1).isSame(date2, 'day');
+};
 
 export const secondsSinceMidnight = (date: Date): number => {
-  const momentDate = moment(date)
+  const momentDate = moment(date);
   return (
-    momentDate.seconds() +
-    60 * momentDate.minutes() +
-    3600 * momentDate.hours()
-  )
-}
+    momentDate.seconds() + 60 * momentDate.minutes() + 3600 * momentDate.hours()
+  );
+};
 
 export const secondsToHHMM = (seconds: number): string => {
-  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  return moment().startOf('day').seconds(seconds).format('hh:mm A')
-}
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  return moment().startOf('day').seconds(seconds).format('hh:mm A');
+};
 
 export const getEventPeriod = (eventTime: string): string => {
-  const [hours, minutes] = eventTime.split(':').map(Number)
-  return moment().hours(hours).minutes(minutes).format('h:mm A')
-}
+  const [hours, minutes] = eventTime.split(':').map(Number);
+  return moment().hours(hours).minutes(minutes).format('h:mm A');
+};
 
 export const getEventTimezoneText = (utcValue: string): string => {
   const timezone = generateTimezones().find(
     (tz) => tz.value.toLowerCase() === utcValue.toLowerCase()
-  )
+  );
 
-  return timezone ? timezone.abbr : utcValue
-}
+  return timezone ? timezone.abbr : utcValue;
+};
 
 export const isCurrentDateInUTC = (): number => {
-  return moment().utc().startOf('day').valueOf()
-}
+  return moment().utc().startOf('day').valueOf();
+};
 
 export const getDateInUTC = (date: Date): number => {
-  return moment(date).utc().startOf('day').valueOf()
-}
+  return moment(date).utc().startOf('day').valueOf();
+};
 
 export const getSessionDays = (sessions: IExtendedSession[]) => {
   // Create a Set to store unique dates
-  const uniqueDates = new Set()
+  const uniqueDates = new Set();
 
   // Iterate through sessions to extract and filter dates
   sessions.forEach((session) => {
-    const sessionDate = new Date(session.start).toDateString()
-    uniqueDates.add(sessionDate)
-  })
+    const sessionDate = new Date(session.start).toDateString();
+    uniqueDates.add(sessionDate);
+  });
 
   // Convert Set to array and convert each date to timestamp
-  const uniqueDatesArray = Array.from(uniqueDates)
+  const uniqueDatesArray = Array.from(uniqueDates);
   const uniqueTimestampsArray = uniqueDatesArray.map((dateString) =>
     new Date(dateString as string).getTime()
-  )
+  );
 
-  return uniqueTimestampsArray
-}
+  return uniqueTimestampsArray;
+};
 
 export const getDateWithTime = (date: Date, time: string) => {
-  const dateInput = formatDate(new Date(date), 'YYYY-MM-DD')
-  return new Date(`${dateInput}T${time}`)
-}
+  const dateInput = formatDate(new Date(date), 'YYYY-MM-DD');
+  return new Date(`${dateInput}T${time}`);
+};
diff --git a/packages/app/lib/utils/twitterAuth.ts b/packages/app/lib/utils/twitterAuth.ts
index 7a2465410..7e6b74897 100644
--- a/packages/app/lib/utils/twitterAuth.ts
+++ b/packages/app/lib/utils/twitterAuth.ts
@@ -1,11 +1,10 @@
-import OAuth from 'oauth-1.0a'
-import crypto from 'crypto'
+import OAuth from 'oauth-1.0a';
+import crypto from 'crypto';
 
-const TWITTER_CONSUMER_KEY = process.env.TWITTER_CONSUMER_KEY!
-const TWITTER_CONSUMER_SECRET = process.env.TWITTER_CONSUMER_SECRET!
-const TWITTER_ACCESS_TOKEN = process.env.TWITTER_ACCESS_TOKEN!
-const TWITTER_ACCESS_TOKEN_SECRET =
-  process.env.TWITTER_ACCESS_TOKEN_SECRET!
+const TWITTER_CONSUMER_KEY = process.env.TWITTER_CONSUMER_KEY!;
+const TWITTER_CONSUMER_SECRET = process.env.TWITTER_CONSUMER_SECRET!;
+const TWITTER_ACCESS_TOKEN = process.env.TWITTER_ACCESS_TOKEN!;
+const TWITTER_ACCESS_TOKEN_SECRET = process.env.TWITTER_ACCESS_TOKEN_SECRET!;
 
 export const createOAuth = () => {
   return new OAuth({
@@ -18,28 +17,28 @@ export const createOAuth = () => {
       return crypto
         .createHmac('sha1', key)
         .update(base_string)
-        .digest('base64')
+        .digest('base64');
     },
-  })
-}
+  });
+};
 
 export const getUserProfileImage = async (username: string) => {
-  const url = `https://api.twitter.com/1.1/users/show.json?screen_name=${username}`
-  const method = 'GET'
+  const url = `https://api.twitter.com/1.1/users/show.json?screen_name=${username}`;
+  const method = 'GET';
 
-  const oauth = createOAuth()
+  const oauth = createOAuth();
 
   const token = {
     key: TWITTER_ACCESS_TOKEN,
     secret: TWITTER_ACCESS_TOKEN_SECRET,
-  }
+  };
 
   const requestData = {
     url,
     method,
-  }
+  };
 
-  const headers = oauth.toHeader(oauth.authorize(requestData, token))
+  const headers = oauth.toHeader(oauth.authorize(requestData, token));
 
   try {
     const response = await fetch(url, {
@@ -48,18 +47,18 @@ export const getUserProfileImage = async (username: string) => {
         ...headers,
         'content-type': 'application/json',
       },
-    })
+    });
 
     if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`)
+      throw new Error(`HTTP error! Status: ${response.status}`);
     }
 
-    const userData = await response.json()
-    console.log('userData', userData)
-    const profileImageUrl = userData.profile_image_url_https
+    const userData = await response.json();
+    console.log('userData', userData);
+    const profileImageUrl = userData.profile_image_url_https;
 
-    return profileImageUrl
+    return profileImageUrl;
   } catch (error) {
-    console.error('Error fetching user profile image:', error)
+    console.error('Error fetching user profile image:', error);
   }
-}
+};
diff --git a/packages/app/lib/utils/utils.ts b/packages/app/lib/utils/utils.ts
index 572bfaa9b..8e1625e4d 100644
--- a/packages/app/lib/utils/utils.ts
+++ b/packages/app/lib/utils/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import {
   IExtendedEvent,
   IExtendedNftCollections,
@@ -9,15 +9,15 @@ import {
   IGenerateEmbed,
   IGenerateEmbedCode,
   eSort,
-} from '@/lib/types'
-import { IOrganizationModel } from 'streameth-new-server/src/interfaces/organization.interface'
-import { IEventModel } from 'streameth-new-server/src/interfaces/event.interface'
-import { UseFormProps, UseFormReturn } from 'react-hook-form'
-import { getDateInUTC } from './time'
-import { toast } from 'sonner'
+} from '@/lib/types';
+import { IOrganizationModel } from 'streameth-new-server/src/interfaces/organization.interface';
+import { IEventModel } from 'streameth-new-server/src/interfaces/event.interface';
+import { UseFormProps, UseFormReturn } from 'react-hook-form';
+import { getDateInUTC } from './time';
+import { toast } from 'sonner';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export const selectOptionFocusHandle = (
@@ -26,20 +26,20 @@ export const selectOptionFocusHandle = (
   triggerClickCallback: () => void
 ): void => {
   if (event.key !== 'Tab') {
-    event.preventDefault()
-    optionClickCallback()
-    triggerClickCallback()
+    event.preventDefault();
+    optionClickCallback();
+    triggerClickCallback();
   }
-}
+};
 
 export const a11yEnterKeyPress = (
   event: React.KeyboardEvent,
   callback: () => void
 ) => {
   if (event.key === 'Enter') {
-    callback()
+    callback();
   }
-}
+};
 
 export const handleKeyPress = (
   event: React.KeyboardEvent,
@@ -47,18 +47,18 @@ export const handleKeyPress = (
   callback: () => void
 ): void => {
   if (Array.isArray(targetKey) && targetKey.includes(event.key)) {
-    callback()
-    return
+    callback();
+    return;
   }
   if (event.key === targetKey) {
-    callback()
+    callback();
   }
-}
+};
 
 export const listenPressOnElement = (
   event: React.KeyboardEvent<HTMLDivElement>,
   callback: () => void
-) => event.which !== 9 && callback()
+) => event.which !== 9 && callback();
 
 export const truncateAddr = (
   address: string,
@@ -66,57 +66,56 @@ export const truncateAddr = (
   endLength = 4
 ) => {
   if (!address) {
-    return ''
+    return '';
   }
-  const truncatedStart = address.substring(0, startLength)
-  const truncatedEnd = address.substring(address.length - endLength)
-  return `${truncatedStart}...${truncatedEnd}`
-}
+  const truncatedStart = address.substring(0, startLength);
+  const truncatedEnd = address.substring(address.length - endLength);
+  return `${truncatedStart}...${truncatedEnd}`;
+};
 
 export const hasData = ({ event }: { event: IExtendedEvent }) => {
-  return event.dataImporter !== undefined
-}
+  return event.dataImporter !== undefined;
+};
 
 export const getImageUrl = (image: string) => {
-  const spaceStorage =
-    process.env.NEXT_PUBLIC_SPACE_STORAGE_URL || null
+  const spaceStorage = process.env.NEXT_PUBLIC_SPACE_STORAGE_URL || null;
   if (!spaceStorage) {
-    throw new Error('No SPACE STORAGE URL key found')
+    throw new Error('No SPACE STORAGE URL key found');
   }
 
-  return spaceStorage + image
-}
+  return spaceStorage + image;
+};
 
 export const loadEnv = () => {
-  const key = process.env.LIVEPEER_API_KEY || null
+  const key = process.env.LIVEPEER_API_KEY || null;
   if (!key) {
-    throw new Error('No API key found')
+    throw new Error('No API key found');
   }
-  return key
-}
+  return key;
+};
 
 export const apiUrl = () => {
-  const api = process.env.NEXT_PUBLIC_API_URL || null
+  const api = process.env.NEXT_PUBLIC_API_URL || null;
   if (!api) {
-    throw new Error('No API URL key found')
+    throw new Error('No API URL key found');
   }
-  return api
-}
+  return api;
+};
 
 export const archivePath = ({
   organizationSlug,
   event,
   searchQuery,
 }: {
-  organizationSlug: IOrganizationModel['slug']
-  event?: IEventModel['slug']
-  searchQuery?: string
+  organizationSlug: IOrganizationModel['slug'];
+  event?: IEventModel['slug'];
+  searchQuery?: string;
 }) => {
-  const params = new URLSearchParams()
-  let newSearchQueryPath
+  const params = new URLSearchParams();
+  let newSearchQueryPath;
 
   if (event) {
-    params.append('event', event)
+    params.append('event', event);
   }
 
   if (searchQuery) {
@@ -141,11 +140,11 @@ export const archivePath = ({
     //   params.append('searchQuery', searchQuery)
     // }
 
-    params.append('searchQuery', searchQuery)
+    params.append('searchQuery', searchQuery);
   }
 
-  return `/${organizationSlug}/videos?${params.toString()}`
-}
+  return `/${organizationSlug}/videos?${params.toString()}`;
+};
 
 export const hasOrganization = (
   userOrganizations?: IExtendedOrganization[],
@@ -153,82 +152,74 @@ export const hasOrganization = (
 ) => {
   const hasOrganization = userOrganizations?.some(
     (organization) => organization.slug === searchParams
-  )
-  return hasOrganization
-}
+  );
+  return hasOrganization;
+};
 
 export const validateEnv = (envVar: string) => {
-  const value = process.env[envVar] || null
+  const value = process.env[envVar] || null;
   if (!value) {
-    throw new Error(`No ${envVar} found`)
+    throw new Error(`No ${envVar} found`);
   }
-  return value
-}
+  return value;
+};
 
 export const getFormSubmitStatus = (form: UseFormReturn<any>) => {
   const isSubmitDisabled =
     form.formState.isSubmitting ||
-    Object.keys(form.formState.dirtyFields).length === 0
+    Object.keys(form.formState.dirtyFields).length === 0;
 
-  return isSubmitDisabled
-}
+  return isSubmitDisabled;
+};
 
 export const isEthereumAddress = (address: string) => {
-  const ethereumAddressRegex = /^(0x)?[0-9a-fA-F]{40}$/
-  return ethereumAddressRegex.test(address)
-}
+  const ethereumAddressRegex = /^(0x)?[0-9a-fA-F]{40}$/;
+  return ethereumAddressRegex.test(address);
+};
 
 export const formatIdentify = (identity = '') => {
   const parsedIdentity = isEthereumAddress(identity)
     ? truncateAddr(identity)
-    : identity
-  return parsedIdentity
-}
-export const buildPlaybackUrl = (
-  playbackId: string,
-  vod?: boolean
-): string => {
+    : identity;
+  return parsedIdentity;
+};
+export const buildPlaybackUrl = (playbackId: string, vod?: boolean): string => {
   if (vod) {
-    return `https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/${playbackId}/index.m3u8`
+    return `https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/${playbackId}/index.m3u8`;
   }
-  return `https://livepeercdn.studio/hls/${playbackId}/index.m3u8`
-}
+  return `https://livepeercdn.studio/hls/${playbackId}/index.m3u8`;
+};
 
 export const isArchivedEvent = (endDate: string | Date) => {
-  return getDateInUTC(new Date()) > getDateInUTC(new Date(endDate))
-}
+  return getDateInUTC(new Date()) > getDateInUTC(new Date(endDate));
+};
 
 export const sortByStartDateAsc = (
   a: IExtendedEvent | IExtendedSession,
   b: IExtendedEvent
 ) => {
-  const dateA = getDateInUTC(new Date(a.start))
-  const dateB = getDateInUTC(new Date(b.start))
+  const dateA = getDateInUTC(new Date(a.start));
+  const dateB = getDateInUTC(new Date(b.start));
 
   if (dateA < dateB) {
-    return -1
+    return -1;
   } else if (dateA > dateB) {
-    return 1
+    return 1;
   } else {
-    return 0
+    return 0;
   }
-}
+};
 
-export const renderEventDay = (
-  start: string | Date,
-  end: string | Date
-) => {
-  if (start === end) return new Date(start).toDateString()
+export const renderEventDay = (start: string | Date, end: string | Date) => {
+  if (start === end) return new Date(start).toDateString();
 
-  return `${new Date(start).toDateString()} - ${new Date(
-    end
-  ).toDateString()}`
-}
+  return `${new Date(start).toDateString()} - ${new Date(end).toDateString()}`;
+};
 
 export const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text)
-  toast('Copied to clipboard')
-}
+  navigator.clipboard.writeText(text);
+  toast('Copied to clipboard');
+};
 
 export const generateParams = ({
   playbackId,
@@ -238,16 +229,16 @@ export const generateParams = ({
   sessionId,
   stageId,
 }: IGenerateEmbed) => {
-  const params = new URLSearchParams()
-  playbackId && params.append('playbackId', playbackId ?? '')
-  sessionId && params.append('session', sessionId ?? '')
-  stageId && params.append('stage', stageId ?? '')
-  params.append('vod', vod ? 'true' : 'false')
-  params.append('streamId', streamId ?? '')
-  params.append('playerName', playerName ?? '')
-
-  return params.toString()
-}
+  const params = new URLSearchParams();
+  playbackId && params.append('playbackId', playbackId ?? '');
+  sessionId && params.append('session', sessionId ?? '');
+  stageId && params.append('stage', stageId ?? '');
+  params.append('vod', vod ? 'true' : 'false');
+  params.append('streamId', streamId ?? '');
+  params.append('playerName', playerName ?? '');
+
+  return params.toString();
+};
 
 export const generateEmbedCode = ({
   url,
@@ -265,62 +256,57 @@ export const generateEmbedCode = ({
     playerName,
     sessionId,
     stageId,
-  })}" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>`
-}
+  })}" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>`;
+};
 
 export const sortArray = (
-  stages:
-    | IExtendedStage[]
-    | IExtendedSession[]
-    | IExtendedNftCollections[],
+  stages: IExtendedStage[] | IExtendedSession[] | IExtendedNftCollections[],
   sortBy: string
 ) => {
   return stages.sort((a, b) => {
     if (sortBy) {
       switch (sortBy) {
         case eSort.asc_alpha:
-          return a.name.localeCompare(b.name)
+          return a.name.localeCompare(b.name);
         case eSort.desc_alpha:
-          return b.name.localeCompare(a.name)
+          return b.name.localeCompare(a.name);
         case eSort.asc_date:
           return (
-            new Date(a.updatedAt!).getTime() -
-            new Date(b.updatedAt!).getTime()
-          )
+            new Date(a.updatedAt!).getTime() - new Date(b.updatedAt!).getTime()
+          );
         case eSort.desc_date:
           return (
-            new Date(b.updatedAt!).getTime() -
-            new Date(a.updatedAt!).getTime()
-          )
+            new Date(b.updatedAt!).getTime() - new Date(a.updatedAt!).getTime()
+          );
         default:
-          return 0
+          return 0;
       }
     } else {
-      return 0
+      return 0;
     }
-  })
-}
+  });
+};
 
 export const getVideoIndex = (
   all: boolean,
   nftCollection: IExtendedNftCollections,
   video?: IExtendedSession
 ) => {
-  let videoIndex = []
+  let videoIndex = [];
 
   // if (all) {
   //   videoIndex = nftCollection?.videos?.map((vid) => vid?.index) || []
   // } else {
   const index = nftCollection?.videos?.find(
     (vid) => vid.sessionId == video?._id || vid.stageId === video?._id
-  )?.index
+  )?.index;
   if (index !== undefined) {
-    videoIndex.push(index)
+    videoIndex.push(index);
   }
   // }
 
-  return videoIndex
-}
+  return videoIndex;
+};
 
 export const calMintPrice = (
   data: { result: BigInt }[],
@@ -328,18 +314,17 @@ export const calMintPrice = (
   nftCollection: IExtendedNftCollections
 ) => {
   if (data) {
-    const mintFee = Number(data[0].result)
-    const baseFee = Number(data[1].result)
+    const mintFee = Number(data[0].result);
+    const baseFee = Number(data[1].result);
     if (all) {
-      const mintPrice =
-        (mintFee + baseFee) * nftCollection?.videos?.length!
-      return mintPrice.toString()
+      const mintPrice = (mintFee + baseFee) * nftCollection?.videos?.length!;
+      return mintPrice.toString();
     } else {
-      return (mintFee + baseFee).toString()
+      return (mintFee + baseFee).toString();
     }
   }
-  return null
-}
+  return null;
+};
 
 export const getTimeString = (date: Date | string | undefined) => {
   if (date)
@@ -347,5 +332,5 @@ export const getTimeString = (date: Date | string | undefined) => {
       hour: '2-digit',
       minute: '2-digit',
       hour12: false,
-    })
-}
+    });
+};
diff --git a/packages/app/public/legal/privacy.md b/packages/app/public/legal/privacy.md
index 05a73ef04..0dc81d258 100644
--- a/packages/app/public/legal/privacy.md
+++ b/packages/app/public/legal/privacy.md
@@ -1,57 +1,217 @@
 # StreamETH International B.V. Privacy Policy
 
-StreamETH International B.V. is responsible for processing personal data as outlined in this privacy statement.
+_Last updated July 25, 2024_
+
+This privacy notice for StreamETH International B.V. ('we', 'us', or 'our'), describes how and why we might collect, store, use, and/or share ('process') your information when you use our services ('Services'), such as when you visit our website at streameth.org, or any website of ours that links to this privacy policy 
+
+Questions or concerns? Reading this privacy notice will help you understand your privacy rights and choices. If you do not agree with our policies and practices, please do not use our Services. If you still have any questions or concerns, please contact us at support@streameth.org.
+
+
+## TL;DR 
 
 StreamETH International B.V. is steadfast in its commitment to safeguarding privacy, embodying the principles of _"Privacy by Design"_ and _"Privacy by Default"_ of article 25 of the GDPR (AVG) at the core of our operations.
 
-## Personal Data We Process
+What personal information do we process? When you visit, use, or navigate our Services, we may process personal information depending on how you interact with us and the Services, the choices you make, and the products and features you use. Learn more about personal information you disclose to us.
+
+Do we process any sensitive personal information? We do not process sensitive personal information.
+
+Do we collect any information from third parties? We do not collect any information from third parties.
+
+How do we process your information? We process your information to provide our Services. We may also process your information for other purposes with your consent. We process your information only when we have a valid legal reason to do so. Learn more about how we process your information.
+
+In what situations and with which parties do we share personal information? We may share information in specific situations and with specific third parties. Learn more about when and with whom we share your personal information.
+
+How do we keep your information safe? We have organisational and technical processes and procedures in place to protect your personal information. However, no electronic transmission over the internet or information storage technology can be guaranteed to be 100% secure, so we cannot promise or guarantee that hackers, cybercriminals, or other unauthorised third parties will not be able to defeat our security and improperly collect, access, steal, or modify your information. Learn more about how we keep your information safe.
+
+What are your rights? Depending on where you are located geographically, the applicable privacy law may mean you have certain rights regarding your personal information. Learn more about your privacy rights.
+
+How do you exercise your rights? The easiest way to exercise your rights is by visiting streameth.org/data-request, or by contacting us. We will consider and act upon any request in accordance with applicable data protection laws.
+
+Want to learn more about what we do with any information we collect? Review the privacy notice in full.
+
+## TABLE OF CONTENTS
+
+1. WHAT INFORMATION DO WE COLLECT?
+2. HOW DO WE PROCESS YOUR INFORMATION?
+3. WHAT LEGAL BASES DO WE RELY ON TO PROCESS YOUR PERSONAL INFORMATION?
+4. WHEN AND WITH WHOM DO WE SHARE YOUR PERSONAL INFORMATION?
+5. DO WE USE COOKIES AND OTHER TRACKING TECHNOLOGIES?
+6. DO WE OFFER ARTIFICIAL INTELLIGENCE-BASED PRODUCTS?
+7. HOW DO WE HANDLE YOUR SOCIAL LOGINS?
+8. HOW LONG DO WE KEEP YOUR INFORMATION?
+9. HOW DO WE KEEP YOUR INFORMATION SAFE?
+10. DO WE COLLECT INFORMATION FROM MINORS?
+11. WHAT ARE YOUR PRIVACY RIGHTS?
+12. DO WE MAKE UPDATES TO THIS NOTICE?
+13. HOW CAN YOU CONTACT US ABOUT THIS NOTICE?
+14. HOW CAN YOU REVIEW, UPDATE, OR DELETE THE DATA WE COLLECT FROM YOU?
+
+
+## 1. WHAT INFORMATION DO WE COLLECT?
+
+**In Short**: We collect personal information that you provide to us.
+
+We collect personal information that you voluntarily provide to us when you register on the Services, express an interest in obtaining information about us or our products and Services, when you participate in activities on the Services, or otherwise when you contact us.
+
+Personal Information Provided by You. The personal information that we collect depends on the context of your interactions with us and the Services, the choices you make, and the products and features you use. The personal information we collect may include the following:
 
-StreamETH International B.V. processes your personal data because you use our services and/or because you have provided it to us.
+- email addresses
+- your erc20 wallet address
+- internetbrowser and device type
+- your "last seen" activity
 
-Below is an overview of the personal data we process:
+Sensitive Information. We do not process sensitive information.
 
-- Your ERC20 Wallet Address
-- Your "Last Seen" Activity
-- Internetbrowser and device type
+Payment Data. We may collect data necessary to process your payment if you choose to make purchases, such as your payment instrument number, and the security code associated with your payment instrument. All payment data is handled and stored by Stripe. You may find their privacy notice link(s) here: https://stripe.com/privacy.
 
-All your personal data is encrypted or anonymous.
+Social Media Login Data. We may provide you with the option to register with us using your existing social media account details, like your Facebook, X, or other social media account. If you choose to register in this way, we will collect certain profile information about you from the social media provider, as described in the section called 'HOW DO WE HANDLE YOUR SOCIAL LOGINS?' below.
 
-## Personal Data Processing
+### Information automatically collected
 
-StreamETH International B.V. does not process personal data. We also do not use social media plugins.
+**In Short**: Some information — such as your browser and device characteristics — is collected automatically when you visit our Services.
 
-## Special and/or Sensitive Personal Data We Process
+We automatically collect certain information when you visit, use, or navigate the Services. This information does not reveal your specific identity (like your name or contact information) but may include device and usage information, such as browser and device characteristics, operating system, referring URLs, country, information about how and when you use our Services, and other technical information. This information is primarily needed to maintain the security and operation of our Services, and for our internal analytics and reporting purposes.
 
-StreamETH International B.V. does not process any special and/or sensitive personal data.
+The information we collect includes:
 
-Our website and/or service does not intend to collect data about website visitors under 16 years of age unless they have permission from parents or guardians. However, we cannot check if a visitor is over 16. We, therefore, advise parents to be involved in their children's online activities to prevent data about children from being collected without parental consent. If you believe that we have collected personal information about a minor without consent, please contact us, and we will delete this information.
+- Log and Usage Data. Log and usage data is service-related, diagnostic, usage, and performance information our servers automatically collect when you access or use our Services and which we record in log files. Depending on how you interact with us, this log data may include your device information, browser type, device event information (such as system activity, error reports (sometimes called 'crash dumps'), and hardware settings).
 
-## Purpose and Legal Basis for Processing Personal Data
+- Device Data. We collect device data such as information about your computer, phone, tablet, or other device you use to access the Services. Depending on the device used, this device data may include information such as your device and application identification numbers, browser type, hardware model and operating system.
 
-StreamETH International B.V. processes your personal data for the following purposes:
+### Google API
+
+Our use of information received from Google APIs will adhere to Google API Services User Data Policy, including the [Limited Use](https://developers.google.com/terms/api-services-user-data-policy) requirements.
+
+
+## 2. HOW DO WE PROCESS YOUR INFORMATION?
+
+We process your personal data for the following purposes:
 
 - To offer you the option to create an account
 - To offer you the option to automatically delete your account after a year of inactivity
 - To gather insights from anonymous analytics, such as tracking the internet browser and device type, to improve our services and user experience. This information is collected in a way that does not allow for individual user identification.
 
-## Retention Period for Personal Data
+## 3. WHAT LEGAL BASES DO WE RELY ON TO PROCESS YOUR INFORMATION?
+
+**In Short**: We only process your personal information when we believe it is necessary and we have a valid legal reason (i.e. legal basis) to do so under applicable law, like with your consent, to comply with laws, to provide you with services to enter into or fulfil our contractual obligations, to protect your rights, or to fulfil our legitimate business interests.
+
+If you are located in the EU or UK, this section applies to you.
+
+The General Data Protection Regulation (GDPR) and UK GDPR require us to explain the valid legal bases we rely on in order to process your personal information. As such, we may rely on the following legal bases to process your personal information:
+
+- Consent. We may process your information if you have given us permission (i.e. consent) to use your personal information for a specific purpose. You can withdraw your consent at any time. Learn more about withdrawing your consent.
+
+- Performance of a Contract. We may process your personal information when we believe it is necessary to fulfil our contractual obligations to you, including providing our Services or at your request prior to entering into a contract with you.
+
+- Legal Obligations. We may process your information where we believe it is necessary for compliance with our legal obligations, such as to cooperate with a law enforcement body or regulatory agency, exercise or defend our legal rights, or disclose your information as evidence in litigation in which we are involved.
+
+- Vital Interests. We may process your information where we believe it is necessary to protect your vital interests or the vital interests of a third party, such as situations involving potential threats to the safety of any person.
+
+If you are located in Canada, this section applies to you.
+
+We may process your information if you have given us specific permission (i.e. express consent) to use your personal information for a specific purpose, or in situations where your permission can be inferred (i.e. implied consent). You can withdraw your consent at any time.
+
+In some exceptional cases, we may be legally permitted under applicable law to process your information without your consent.
+
+## 4. WHEN AND WITH WHOM DO WE SHARE YOUR PERSONAL INFORMATION?
+
+**In Short**: We may share information in specific situations described in this section and/or with the following third parties.
+
+We will need to share your personal information with the following platform(s):
+- [privy.io](https://www.privy.io/privacy-policy)
+
+## 5. DO WE USE COOKIES AND OTHER TRACKING TECHNOLOGIES?
+
+We use only technical and functional cookies. And analytical cookies that do not infringe on your privacy. A cookie is a small text file that is stored on your computer, tablet, or smartphone during your first visit to this website. The cookies we use are necessary for the technical operation of the website and your ease of use. They ensure that the website works properly and remember your preferred settings, for instance. This also enables us to optimise our website. You can opt out of cookies by setting your internet browser so that it does not store cookies anymore. In addition, you can also delete all information previously saved via the settings of your browser.
+
+## 6. DO WE OFFER ARTIFICIAL INTELLIGENCE-BASED PRODUCTS?
+
+**In Short**: We offer products, features, or tools powered by artificial intelligence, machine learning, or similar technologies.
+
+As part of our Services, we offer products, features, or tools powered by artificial intelligence, machine learning, or similar technologies (collectively, 'AI Products'). These tools are designed to enhance your experience and provide you with innovative solutions. The terms in this privacy notice govern your use of the AI Products within our Services.
+
+Use of AI Technologies
+
+We provide the AI Products through third-party service providers ('AI Service Providers'), including OpenAI. As outlined in this privacy notice, your input, output, and personal information will be shared with and processed by these AI Service Providers to enable your use of our AI Products for purposes outlined in 'WHAT LEGAL BASES DO WE RELY ON TO PROCESS YOUR PERSONAL INFORMATION?' You must not use the AI Products in any way that violates the terms or policies of any AI Service Provider.
+
+### Our AI Products
+
+Our AI Products are designed for the following functions:
+
+- AI automation
+
+
+### How We Process Your Data Using AI
+
+All personal information processed using our AI Products is handled in line with our privacy notice and our agreement with third parties. This ensures high security and safeguards your personal information throughout the process, giving you peace of mind about your data's safety.
+
+## 7. HOW DO WE HANDLE YOUR SOCIAL LOGINS?
+
+**In Short**: If you choose to register or log in to our Services using a social media account, we may have access to certain information about you.
+
+Our Services offer you the ability to register and log in using your third-party social media account details (like your Facebook or X logins). Where you choose to do this, we will receive certain profile information about you from your social media provider. The profile information we receive may vary depending on the social media provider concerned, but will often include your name, email address, friends list, and profile picture, as well as other information you choose to make public on such a social media platform.
+
+We will use the information we receive only for the purposes that are described in this privacy notice or that are otherwise made clear to you on the relevant Services. Please note that we do not control, and are not responsible for, other uses of your personal information by your third-party social media provider. We recommend that you review their privacy notice to understand how they collect, use, and share your personal information, and how you can set your privacy preferences on their sites and apps.
+
+## 8. HOW LONG DO WE KEEP YOUR INFORMATION?
+
+**In Short**: We keep your information for as long as necessary to fulfil the purposes outlined in this privacy notice unless otherwise required by law.
+
+We will only keep your personal information for as long as it is necessary for the purposes set out in this privacy notice, unless a longer retention period is required or permitted by law (such as tax, accounting, or other legal requirements). No purpose in this notice will require us keeping your personal information for longer than twelve (12) months past the start of the idle period of the user's account.
+
+When we have no ongoing legitimate business need to process your personal information, we will either delete, or, if this is not possible (for example, because your personal information has been stored in backup archives), then we will securely store your personal information and isolate it from any further processing until deletion is possible.
+
+## 9. HOW DO WE KEEP YOUR INFORMATION SAFE?
+
+**In Short**: We aim to protect your personal information through a system of organisational and technical security measures.
+
+We have implemented appropriate and reasonable technical and organisational security measures designed to protect the security of any personal information we process. However, despite our safeguards and efforts to secure your information, no electronic transmission over the Internet or information storage technology can be guaranteed to be 100% secure, so we cannot promise or guarantee that hackers, cybercriminals, or other unauthorised third parties will not be able to defeat our security and improperly collect, access, steal, or modify your information. Although we will do our best to protect your personal information, transmission of personal information to and from our Services is at your own risk. You should only access the Services within a secure environment.
+
+## 10. DO WE COLLECT INFORMATION FROM MINORS?
+
+**In Short**: We do not knowingly collect data from or market to children under 18 years of age.
+
+We do not knowingly collect, solicit data from, or market to children under 18 years of age, nor do we knowingly sell such personal information. By using the Services, you represent that you are at least 18 or that you are the parent or guardian of such a minor and consent to such minor dependent’s use of the Services. If we learn that personal information from users less than 18 years of age has been collected, we will deactivate the account and take reasonable measures to promptly delete such data from our records. If you become aware of any data we may have collected from children under age 18, please contact us at support@streameth.org.
+
+## 11. WHAT ARE YOUR PRIVACY RIGHTS?
+
+**In Short**: Depending on your state of residence in the US or in some regions, such as the European Economic Area (EEA), United Kingdom (UK), Switzerland, and Canada, you have rights that allow you greater access to and control over your personal information. You may review, change, or terminate your account at any time, depending on your country, province, or state of residence.
+
+In some regions (like the EEA, UK, Switzerland, and Canada), you have certain rights under applicable data protection laws. These may include the right (i) to request access and obtain a copy of your personal information, (ii) to request rectification or erasure; (iii) to restrict the processing of your personal information; (iv) if applicable, to data portability; and (v) not to be subject to automated decision-making. In certain circumstances, you may also have the right to object to the processing of your personal information. You can make such a request by contacting us by using the contact details provided in the section 'HOW CAN YOU CONTACT US ABOUT THIS NOTICE?' below.
+
+We will consider and act upon any request in accordance with applicable data protection laws.
+ 
+If you are located in the EEA or UK and you believe we are unlawfully processing your personal information, you also have the right to complain to your Member State data protection authority or UK data protection authority.
+
+If you are located in Switzerland, you may contact the Federal Data Protection and Information Commissioner.
+
+Withdrawing your consent: If we are relying on your consent to process your personal information, which may be express and/or implied consent depending on the applicable law, you have the right to withdraw your consent at any time. You can withdraw your consent at any time by contacting us by using the contact details provided in the section 'HOW CAN YOU CONTACT US ABOUT THIS NOTICE?' below.
+
+However, please note that this will not affect the lawfulness of the processing before its withdrawal nor, when applicable law allows, will it affect the processing of your personal information conducted in reliance on lawful processing grounds other than consent.
+
+### Account Information
+
+If you would at any time like to review or change the information in your account or terminate your account, you can contact us using the contact information provided.
+
+Upon your request to terminate your account, we will deactivate or delete your account and information from our active databases. However, we may retain some information in our files to prevent fraud, troubleshoot problems, assist with any investigations, enforce our legal terms and/or comply with applicable legal requirements.
 
-StreamETH International B.V. retains your personal data only for as long as is strictly necessary to fulfil the purposes for which it is collected. StreamETH International B.V. will automatically delete all of your user data after 1 year of inactivity.
+If you have questions or comments about your privacy rights, you may email us at support@streameth.org.
 
-## Sharing of Personal Data with Third Parties
+## 12. DO WE MAKE UPDATES TO THIS NOTICE?
 
-StreamETH International B.V. does not share personal data with third parties, except to comply with a legal obligation.
+**In Short**: Yes, we will update this notice as necessary to stay compliant with relevant laws.
 
-## Cookies or Similar Techniques We Use
+We may update this privacy notice from time to time. The updated version will be indicated by an updated 'Revised' date at the top of this privacy notice. If we make material changes to this privacy notice, we may notify you either by prominently posting a notice of such changes or by directly sending you a notification. We encourage you to review this privacy notice frequently to be informed of how we are protecting your information.
 
-StreamETH International B.V. uses only technical and functional cookies. And analytical cookies that do not infringe on your privacy. A cookie is a small text file that is stored on your computer, tablet, or smartphone during your first visit to this website. The cookies we use are necessary for the technical operation of the website and your ease of use. They ensure that the website works properly and remember your preferred settings, for instance. This also enables us to optimise our website. You can opt out of cookies by setting your internet browser so that it does not store cookies anymore. In addition, you can also delete all information previously saved via the settings of your browser.
+## 13. HOW CAN YOU CONTACT US ABOUT THIS NOTICE?
 
-## Viewing, Modifying, or Deleting Data
+If you have questions or comments about this notice, you may email us at support@streameth.org.
 
-You have the right to view, correct, or delete your personal data. You can do this yourself through the personal settings of your account. In addition, you have the right to withdraw your consent to data processing or to object to the processing of your personal data by our company, and you have the right to data portability. This means you can request us to send the personal data we have about you in a computer file to you or another organisation mentioned by you.
+## 14. HOW CAN YOU REVIEW, UPDATE, OR DELETE THE DATA WE COLLECT FROM YOU?
+You have the right to view, correct, or delete your personal data. You have the right to withdraw your consent to data processing or to object to the processing of your personal data by us, and you have the right to data portability. This means you can request us to send the personal data we have about you in a computer file to you or another organisation mentioned by you.
 
 StreamETH International B.V. would also like to point out that you have the option to file a complaint with the national supervisory authority, the Dutch Data Protection Authority. You can do so via the following link: https://autoriteitpersoonsgegevens.nl/nl/contact-met-de-autoriteit-persoonsgegevens/tip-ons
 
-## How We Secure Personal Data
+---
 
-StreamETH International B.V. takes the protection of your data seriously and takes appropriate measures to prevent misuse, loss, unauthorised access, unwanted disclosure, and unauthorised modification.
+**StreamETH International B.V.**