diff --git a/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx b/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx
index 749391dc0..259986355 100644
--- a/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx
+++ b/packages/app/app/studio/(home)/components/CreateOrganizationForm.tsx
@@ -25,6 +25,7 @@ import { Loader2 } from 'lucide-react';
 import ImageUpload from '@/components/misc/form/imageUpload';
 import { useRouter } from 'next/navigation';
 import { IExtendedOrganization } from '@/lib/types';
+import { AspectRatio } from '@radix-ui/react-aspect-ratio';
 
 interface CreateOrganizationFormProps {
   organization?: IExtendedOrganization;
@@ -100,11 +101,15 @@ export default function CreateOrganizationForm({
               <FormItem className="">
                 <FormControl>
                   <ImageUpload
-                    className="h-40 w-full rounded-xl bg-neutrals-300"
-                    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 }}
+                    className="w-full h-40 rounded-xl bg-neutrals-300"
+                    options={{
+                      requireExactSize: { width: 1500, height: 500 },
+                      resize: false,
+                      placeholder:
+                        'Click to upload image here. Image must be exactly 1500x500 pixels. Maximum file size is 2MB.',
+                      aspectRatio: 3 / 1,
+                    }}
+                    path="organizations"
                     {...field}
                   />
                 </FormControl>
@@ -119,10 +124,13 @@ export default function CreateOrganizationForm({
               <FormItem>
                 <FormControl>
                   <ImageUpload
-                    placeholder="Upload logo"
-                    aspectRatio={1}
+                    options={{
+                      placeholder: 'Upload logo',
+                      resize: false,
+                      isProfileImage: true,
+                      aspectRatio: 1,
+                    }}
                     path={`organizations`}
-                    isProfileImage={true}
                     {...field}
                   />
                 </FormControl>
@@ -193,7 +201,7 @@ export default function CreateOrganizationForm({
           <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 w-4 h-4 animate-spin" /> Please wait
               </>
             ) : organization ? (
               'Update'
diff --git a/packages/app/app/studio/[organization]/destinations/connect/page.tsx b/packages/app/app/studio/[organization]/destinations/connect/page.tsx
index 08c61d151..83bb4f1d1 100644
--- a/packages/app/app/studio/[organization]/destinations/connect/page.tsx
+++ b/packages/app/app/studio/[organization]/destinations/connect/page.tsx
@@ -1,8 +1,7 @@
 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 { SiX } from 'react-icons/si';
 import YoutubeConnectButton from './components/YoutubeConnectButton';
 import { fetchOrganization } from '@/lib/services/organizationService';
 
@@ -21,25 +20,25 @@ const ConnectSocials = async ({
     })
   );
   return (
-    <div className="mx-6 h-full p-2">
+    <div className="p-2 mx-6 h-full">
       <Link href={`/studio/${params.organization}/destinations`}>
-        <div className="my-4 flex items-center justify-start space-x-4">
+        <div className="flex justify-start items-center my-4 space-x-4">
           <LuArrowLeft />
           <p>Back to destinations</p>
         </div>
       </Link>
 
-      <div className="flex flex-col overflow-auto rounded-xl border bg-white p-4">
+      <div className="flex overflow-auto flex-col p-4 bg-white rounded-xl border">
         <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.
         </p>
-        <div className="mt-4 flex w-fit flex-col gap-4">
+        <div className="flex flex-col gap-4 mt-4 w-fit">
           <YoutubeConnectButton state={state} />
           {/* <Link href={`/api/twitter/request?state=${state}`}> */}
           <Button disabled className="min-w-[200px] bg-[#121212]">
-            <SiTwitter className="mr-2" />
+            <SiX className="mr-2" />
             X(Twitter) (Coming Soon)
           </Button>
           {/* </Link> */}
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 49f65b929..1067fe781 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
@@ -130,7 +130,7 @@ const EventAccordion = ({
         >
           <AccordionItem value="item-1" className="px-2 text-black">
             <AccordionTrigger>Basics</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <FormField
                 control={form.control}
                 name="name"
@@ -172,9 +172,9 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="time" className="px-2">
             <AccordionTrigger>Time</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <div className="flex flex-col space-y-8">
-                <div className="flex w-full flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-full">
                   <FormField
                     control={form.control}
                     name="start"
@@ -208,7 +208,7 @@ const EventAccordion = ({
                     )}
                   />
                 </div>
-                <div className="flex w-full flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-full">
                   <FormField
                     control={form.control}
                     name="end"
@@ -286,7 +286,7 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="item-2" className="px-2">
             <AccordionTrigger>Appearance</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <div className="flex flex-row space-x-4">
                 <div className="flex w-1/6">
                   <FormField
@@ -297,10 +297,12 @@ const EventAccordion = ({
                         <FormLabel>Event Logo</FormLabel>
                         <FormControl>
                           <ImageUpload
+                            options={{
+                              resize: false,
+                              aspectRatio: 1,
+                            }}
                             path="events"
                             {...field}
-                            onChange={field.onChange}
-                            aspectRatio={1}
                           />
                         </FormControl>
                         <FormMessage />
@@ -317,10 +319,12 @@ const EventAccordion = ({
                         <FormLabel>Event Cover</FormLabel>
                         <FormControl>
                           <ImageUpload
+                            options={{
+                              resize: false,
+                              aspectRatio: 16 / 9,
+                            }}
                             path="events"
                             {...field}
-                            onChange={field.onChange}
-                            aspectRatio={16 / 9}
                           />
                         </FormControl>
                         <FormMessage />
@@ -340,7 +344,10 @@ const EventAccordion = ({
                             path="events"
                             {...field}
                             onChange={field.onChange}
-                            aspectRatio={3 / 1}
+                            options={{
+                              aspectRatio: 3 / 1,
+                              resize: false,
+                            }}
                           />
                         </FormControl>
                         <FormMessage />
@@ -378,7 +385,7 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="item-3" className="px-2">
             <AccordionTrigger>Event CMS</AccordionTrigger>
-            <AccordionContent className="space-y-8 p-2">
+            <AccordionContent className="p-2 space-y-8">
               <span>
                 Import your speaker data and your schedule from one of our
                 supported data providers.
@@ -399,7 +406,7 @@ const EventAccordion = ({
                   </FormItem>
                 )}
               />
-              <div className="flex justify-between gap-5">
+              <div className="flex gap-5 justify-between">
                 <Button disabled={isUpdatingEvent} type="submit">
                   Save
                 </Button>
@@ -416,7 +423,7 @@ const EventAccordion = ({
           </AccordionItem>
           <AccordionItem value="item-4" className="px-2">
             <AccordionTrigger>More</AccordionTrigger>
-            <AccordionContent className="flex flex-col space-y-8 p-2">
+            <AccordionContent className="flex flex-col p-2 space-y-8">
               <DeleteEvent organizationId={organizationId} event={event} />
             </AccordionContent>
           </AccordionItem>
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 49009ddb4..2ca7e5186 100644
--- a/packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx
+++ b/packages/app/app/studio/[organization]/event/create/components/createEventForm.tsx
@@ -88,16 +88,16 @@ export default function CreateEventForm({
 
   return (
     <Form {...form}>
-      <Card className="relative mx-auto w-full max-w-4xl rounded-2xl border bg-white shadow-none">
-        <CardHeader className="flex flex-row items-center justify-between border-b">
+      <Card className="relative mx-auto w-full max-w-4xl bg-white rounded-2xl border shadow-none">
+        <CardHeader className="flex flex-row justify-between items-center border-b">
           <p className="text-3xl">Create an event</p>
-          <div className="flex w-full max-w-[300px] flex-row justify-between">
+          <div className="flex flex-row justify-between w-full max-w-[300px]">
             {[
               { stage: 0, name: 'Details' },
               { stage: 1, name: 'Design' },
               { stage: 2, name: 'Data' },
             ].map((i, index) => (
-              <div className="relative flex w-full flex-col" key={i.stage}>
+              <div className="flex relative flex-col w-full" 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 ${
@@ -113,7 +113,7 @@ export default function CreateEventForm({
                     } absolute top-0 z-40 h-full w-1/2 bg-white`}
                   ></div>
                 )}
-                <hr className="absolute top-[15px] z-[0] w-full bg-black" />
+                <hr className="absolute w-full bg-black top-[15px] z-[0]" />
                 <p
                   className={`z-50 mx-auto ${
                     stage === i.stage ? 'text-black' : 'text-muted'
@@ -128,7 +128,7 @@ export default function CreateEventForm({
         <CardContent className="'p-4">
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div
-              className="space-y-8 p-4"
+              className="p-4 space-y-8"
               style={
                 stage !== 0
                   ? { display: 'none' }
@@ -172,7 +172,7 @@ export default function CreateEventForm({
                   </FormItem>
                 )}
               />
-              <div className="flex w-full flex-row space-x-4">
+              <div className="flex flex-row space-x-4 w-full">
                 <FormField
                   control={form.control}
                   name="location"
@@ -211,7 +211,7 @@ export default function CreateEventForm({
                 />
               </div>
               <div className="flex flex-row space-x-4">
-                <div className="flex w-1/2 flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-1/2">
                   <FormField
                     control={form.control}
                     name="start"
@@ -245,7 +245,7 @@ export default function CreateEventForm({
                     )}
                   />
                 </div>
-                <div className="flex w-1/2 flex-row space-x-1">
+                <div className="flex flex-row space-x-1 w-1/2">
                   <FormField
                     control={form.control}
                     name="end"
@@ -290,9 +290,9 @@ export default function CreateEventForm({
                       display: 'block',
                     }
               }
-              className="space-y-4 p-4"
+              className="p-4 space-y-4"
             >
-              <div className=" ">
+              <div className="">
                 <p className="mb-4 text-lg">Upload event Logo and Banner</p>
                 <FormField
                   control={form.control}
@@ -301,10 +301,13 @@ export default function CreateEventForm({
                     <FormItem className="">
                       <FormControl>
                         <ImageUpload
-                          className="h-52 w-full rounded-xl bg-neutrals-300"
-                          placeholder="Drag or click to upload image here. Maximum image file size is 20MB.
-                    Best resolution of 1584 x 396px. Aspect ratio of 4:1. "
-                          aspectRatio={16 / 9}
+                          options={{
+                            resize: false,
+                            placeholder:
+                              'Drag or click to upload image here. Maximum image file size is 5MB. Best resolution of 1584 x 396px. Aspect ratio of 4:1. ',
+                            aspectRatio: 16 / 9,
+                          }}
+                          className="w-full h-52 rounded-xl bg-neutrals-300"
                           path={`events/${organization?.slug}`}
                           {...field}
                         />
@@ -317,11 +320,14 @@ export default function CreateEventForm({
                   control={form.control}
                   name="logo"
                   render={({ field }) => (
-                    <FormItem className="relative mx-4 mt-[-50px] flex h-24 w-24 rounded-full bg-white p-1">
+                    <FormItem className="flex relative p-1 mx-4 w-24 h-24 bg-white rounded-full mt-[-50px]">
                       <FormControl>
                         <ImageUpload
-                          className="m-auto h-full w-full rounded-full bg-neutrals-300 text-white"
-                          aspectRatio={1}
+                          className="m-auto w-full h-full text-white rounded-full bg-neutrals-300"
+                          options={{
+                            resize: false,
+                            aspectRatio: 1,
+                          }}
                           path={`events/${organization?.slug}`}
                           {...field}
                         />
@@ -331,7 +337,7 @@ export default function CreateEventForm({
                   )}
                 />
               </div>
-              <div className="flex w-full space-x-4">
+              <div className="flex space-x-4 w-full">
                 <FormField
                   control={form.control}
                   name="eventCover"
@@ -343,11 +349,14 @@ export default function CreateEventForm({
                       <FormControl>
                         <ImageUpload
                           className="h-40 rounded-xl"
-                          placeholder="Drag or click to upload image here. Maximum image file size is 20MB.
-                        Best resolution of 1584 x 396px. Aspect ratio of 4:1. "
+                          options={{
+                            resize: false,
+                            aspectRatio: 3 / 1,
+                            placeholder:
+                              'Drag or click to upload image here. Maximum image file size is 2MB. Best resolution of 1584 x 396px. Aspect ratio of 3:1. ',
+                          }}
                           path={`events/${organization?.slug}`}
                           {...field}
-                          aspectRatio={3 / 1}
                         />
                       </FormControl>
                       <FormMessage />
@@ -374,7 +383,7 @@ export default function CreateEventForm({
             </div>
             <div
               id="section3"
-              className="space-y-4 p-4"
+              className="p-4 space-y-4"
               style={
                 stage !== 2
                   ? { display: 'none' }
@@ -409,7 +418,7 @@ export default function CreateEventForm({
                 )}
               />
             </div>
-            <div className="flex flex-row items-end justify-end space-x-2">
+            <div className="flex flex-row justify-end items-end space-x-2">
               {stage !== 0 && (
                 <Button
                   variant={'outline'}
@@ -440,7 +449,7 @@ export default function CreateEventForm({
                 >
                   {isCreatingEvent ? (
                     <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please
+                      <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Please
                       wait
                     </>
                   ) : (
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 359ca6035..f0712d136 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/EditSessionForm.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/EditSessionForm.tsx
@@ -88,7 +88,7 @@ const EditSessionForm = ({
               <FormLabel required>Video title</FormLabel>
               <FormControl>
                 <Input
-                  className="rounded-md border border-gray-300 bg-white"
+                  className="bg-white rounded-md border border-gray-300"
                   placeholder="name"
                   {...field}
                 />
@@ -104,7 +104,7 @@ const EditSessionForm = ({
               <FormLabel required>Description</FormLabel>
               <FormControl>
                 <Textarea
-                  className="rounded-md border border-gray-300 bg-white"
+                  className="bg-white rounded-md border border-gray-300"
                   placeholder="description"
                   {...field}
                 />
@@ -145,8 +145,13 @@ const EditSessionForm = ({
               <FormLabel>Thumbnail</FormLabel>
               <FormControl>
                 <ImageUpload
-                  className="relative aspect-video max-w-[480px] rounded-xl bg-neutrals-300"
-                  aspectRatio={16 / 9}
+                  options={{
+                    resize: true,
+                    placeholder:
+                      'Drag and drop your thumbnail to upload...Or just click here! Maximum image file size is 2MB. Best resolution is 1280 x 720. Aspect ratio of 16:9',
+                    aspectRatio: 16 / 9,
+                  }}
+                  className="relative rounded-xl aspect-video max-w-[480px] bg-neutrals-300"
                   path={`sessions/${organizationSlug}`}
                   {...field}
                 />
@@ -155,7 +160,7 @@ const EditSessionForm = ({
           )}
         />
 
-        <div className="flex items-end justify-end space-x-2">
+        <div className="flex justify-end items-end space-x-2">
           <DeleteAsset
             session={session}
             href={`/studio/${organizationSlug}/library`}
@@ -176,7 +181,7 @@ const EditSessionForm = ({
           >
             {isLoading ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-2 w-4 h-4 animate-spin" />
                 Please wait...
               </>
             ) : (
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 677d38d4c..a2bdbaba7 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/ImageDropzone.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/ImageDropzone.tsx
@@ -6,21 +6,20 @@ import { getImageUrl } from '@/lib/utils/utils';
 import { toast } from 'sonner';
 import { useCallback, useState, forwardRef } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { resizeImage } from '@/lib/utils/resizeImage';
 import { imageUploadAction } from '@/lib/actions/imageUpload';
 
 interface ImageDropzoneProps {
   id?: string;
   placeholder?: string;
-  onChange: (files: string | null) => void;
+  onChange: (file: string | null) => void;
   value: string | null | undefined;
   path: string;
 }
 
 function getImageData(file: File) {
   const dataTransfer = new DataTransfer();
-
   dataTransfer.items.add(file);
-
   const files = dataTransfer.files;
   const displayUrl = URL.createObjectURL(file);
   return { files, displayUrl };
@@ -34,45 +33,47 @@ const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
     );
     const [isUploading, setIsUploading] = useState(false);
 
-    const onSubmit = async (file: File) => {
-      if (!file) return;
-      setIsUploading(true);
-      try {
-        const data = new FormData();
-        data.set('file', file);
-        data.set('directory', path);
-        const imageUrl = await imageUploadAction({ data });
-        if (!imageUrl) {
-          throw new Error('Error uploading image');
+    const onSubmit = useCallback(
+      async (file: File) => {
+        if (!file) return;
+        setIsUploading(true);
+        try {
+          const data = new FormData();
+          data.set('file', file);
+          data.set('directory', path);
+          const imageUrl = await imageUploadAction({ data });
+          if (!imageUrl) {
+            throw new Error('Error uploading image');
+          }
+          onChange(imageUrl);
+          toast.success('Image uploaded successfully');
+        } catch (e) {
+          console.error(e);
+          toast.error('Error uploading image');
         }
-        onChange(imageUrl);
-        toast.success('Image uploaded successfully');
-        setIsUploading(false);
-      } catch (e: any) {
-        // Handle errors here
         setIsUploading(false);
-        toast.error('Error uploading image');
-        console.error(e);
-      }
-    };
+      },
+      [onChange, path]
+    );
 
     const onDrop = useCallback(
-      (acceptedFiles: File[]) => {
+      async (acceptedFiles: File[]) => {
         if (acceptedFiles.length > 0) {
-          const { displayUrl } = getImageData(acceptedFiles[0]);
+          const processedFile = await resizeImage(acceptedFiles[0]);
+          const { displayUrl } = getImageData(processedFile);
 
           setPreview(displayUrl);
-          onSubmit(acceptedFiles[0]);
+          onSubmit(processedFile);
         }
       },
-      [onChange]
+      [onSubmit]
     );
 
     const { getRootProps, getInputProps } = useDropzone({
       accept: {
-        'image/*': ['.png', '.jpg', '.jpeg'],
+        'image/*': ['.png', '.jpg', '.gif'],
       },
-      maxSize: 5 * 1024 * 1024, // 5 MB
+      maxSize: 2 * 1024 * 1024, // 2 MB
       maxFiles: 1,
       onDrop,
     });
@@ -80,33 +81,34 @@ const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
     return (
       <div ref={ref} {...rest}>
         {isUploading ? (
-          <div className="z-10 flex h-40 items-center justify-center border border-dashed border-gray-400 bg-white transition">
+          <div className="flex z-10 justify-center items-center h-40 bg-white border-2 border-gray-300 border-dashed transition">
             <div className="text-sm">Uploading image...</div>
           </div>
         ) : preview ? (
-          <>
+          <div className="relative">
             <X
               size={24}
-              className="z-[9999999999994] ml-auto cursor-pointer rounded-md hover:bg-gray-300"
+              className="absolute top-2 right-2 z-20 rounded-md cursor-pointer hover:bg-gray-300"
               onClick={() => {
                 onChange(null);
                 setPreview('');
               }}
             />
-            <div className="z-10 flex h-40 items-center justify-center border border-dashed border-gray-400 bg-white transition">
+            <div className="flex justify-center w-full h-40 bg-white border-2 border-gray-300 border-dashed">
               <Image
                 src={preview ?? value}
                 alt="preview"
-                quality={50}
-                width={150}
-                height={150}
+                className="object-contain w-[50%]"
+                quality={40}
+                width={1280}
+                height={720}
               />
             </div>
-          </>
+          </div>
         ) : (
           <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="flex z-10 flex-col justify-center items-center space-y-4 h-40 text-sm bg-white rounded-md border-2 border-gray-300 border-dashed transition-colors cursor-pointer hover:bg-gray-200"
           >
             <ImageUp size={35} />
             <input {...getInputProps()} />
@@ -115,7 +117,7 @@ const ImageDropzone = forwardRef<HTMLDivElement, ImageDropzoneProps>(
                 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.
+                Maximum image file size is 2MB. Best resolution is 1280 x 720.
                 Aspect ratio of 16:9
               </p>
             </div>
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 91da69355..4556b982a 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/SessionAccordion.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/SessionAccordion.tsx
@@ -132,10 +132,13 @@ const SessionAccordion = ({
               <FormLabel>Thumbnail</FormLabel>
               <FormControl>
                 <ImageUpload
+                  options={{
+                    resize: true,
+                    aspectRatio: 16 / 9,
+                  }}
                   path={`sessions`}
                   {...field}
                   onChange={field.onChange}
-                  aspectRatio={16 / 9}
                 />
               </FormControl>
             </FormItem>
@@ -204,7 +207,7 @@ const SessionAccordion = ({
           <Button className="w-full" type="submit">
             {isUpdatingSession ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please
+                <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Please
                 Updating session
               </>
             ) : (
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 7c6a686de..b7f2db5df 100644
--- a/packages/app/app/studio/[organization]/library/[session]/components/UploadTwitterButton.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/components/UploadTwitterButton.tsx
@@ -2,7 +2,7 @@
 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 { SiX } from 'react-icons/si';
 import { IExtendedOrganization } from '@/lib/types';
 import { uploadSessionToYouTubeAction } from '@/lib/actions/sessions';
 import { toast } from 'sonner';
@@ -65,13 +65,13 @@ const UploadTwitterButton = ({
     <Dialog open={openModal} onOpenChange={setOpenModal}>
       <DialogTrigger>
         <Button className="min-w-[200px] bg-[#121212]">
-          <SiTwitter className="mr-2" /> Publish to X(Twitter) (Coming Soon)
+          <SiX className="mr-2" /> Publish to X(Twitter) (Coming Soon)
         </Button>
       </DialogTrigger>
-      <DialogContent className="z-[99999999999999999] px-8">
+      <DialogContent className="px-8 z-[99999999999999999]">
         <p className="font-medium">Select Twitter Destination</p>
 
-        <div className="flex flex-wrap items-center gap-5 py-5">
+        <div className="flex flex-wrap gap-5 items-center py-5">
           {organization?.socials
             ?.filter((s) => s.type == 'twitter')
             .map(({ name, thumbnail, _id }) => (
@@ -83,17 +83,17 @@ const UploadTwitterButton = ({
                 }`}
               >
                 <div
-                  className="h-14 w-14 cursor-pointer rounded-full bg-cover bg-center"
+                  className="w-14 h-14 bg-center bg-cover rounded-full cursor-pointer"
                   style={{
                     backgroundImage: `url(${thumbnail})`,
                   }}
                 ></div>
-                <p className="line-clamp-1 text-sm">{name}</p>
+                <p className="text-sm line-clamp-1">{name}</p>
               </div>
             ))}
           <div
             onClick={handleTwitterConnect}
-            className="flex cursor-pointer flex-col items-center"
+            className="flex flex-col items-center cursor-pointer"
           >
             <CiCirclePlus color="#000" size={56} />
             <p className="text-sm">Add New</p>
diff --git a/packages/app/app/studio/[organization]/library/[session]/page.tsx b/packages/app/app/studio/[organization]/library/[session]/page.tsx
index c88c8883f..aac94d597 100644
--- a/packages/app/app/studio/[organization]/library/[session]/page.tsx
+++ b/packages/app/app/studio/[organization]/library/[session]/page.tsx
@@ -11,8 +11,6 @@ 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,
@@ -22,7 +20,6 @@ import {
 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 organization = await fetchOrganization({
@@ -32,24 +29,21 @@ const EditSession = async ({ params, searchParams }: studioPageParams) => {
     session: params.session,
   });
 
-  // Check if session exists and has a playbackId. If not, return a 'not found' response.
   if (!session?.playbackId) return notFound();
 
   const videoUrl = await getVideoUrlAction(session);
-
-  // If we couldn't get a video URL, return a 'not found' response.
   if (!videoUrl) return notFound();
 
   return (
-    <div className="h-full overflow-auto p-4">
+    <div className="overflow-auto p-4 h-full">
       <Link href={`/studio/${params.organization}/library`}>
-        <div className="mb-4 flex items-center justify-start space-x-4">
+        <div className="flex justify-start items-center mb-4 space-x-4">
           <ArrowLeft />
           <p>Back to library</p>
         </div>
       </Link>
-      <div className="flex flex-col gap-4 overflow-auto md:flex-row">
-        <div className="space-y-4 rounded-xl border bg-white p-4 md:w-2/3">
+      <div className="flex overflow-auto flex-col gap-4 md:flex-row">
+        <div className="p-4 space-y-4 bg-white rounded-xl border md:w-2/3">
           <h1 className="text-lg font-bold">Video Details</h1>
           <EditSessionForm
             session={session}
@@ -87,7 +81,7 @@ const EditSession = async ({ params, searchParams }: studioPageParams) => {
             </AccordionItem>
 
             <AccordionItem
-              className="rounded-xl border bg-white px-4"
+              className="px-4 bg-white rounded-xl border"
               value="publishVideo"
               defaultChecked
             >
@@ -116,7 +110,7 @@ const EditSession = async ({ params, searchParams }: studioPageParams) => {
             </AccordionItem>
 
             <AccordionItem
-              className="rounded-xl border bg-white px-4"
+              className="px-4 bg-white rounded-xl border"
               value="videoData"
             >
               <AccordionTrigger>
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 135045fd4..9f7b37a47 100644
--- a/packages/app/app/studio/[organization]/library/components/upload/Dropzone.tsx
+++ b/packages/app/app/studio/[organization]/library/components/upload/Dropzone.tsx
@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   MutableRefObject,
 } from 'react';
-import { useDropzone } from 'react-dropzone';
+import { useDropzone, FileRejection } from 'react-dropzone';
 import { FileUp } from 'lucide-react';
 import uploadVideo from '@/lib/uploadVideo';
 import { getUrlAction } from '@/lib/actions/livepeer';
@@ -22,6 +22,7 @@ const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>((props, ref) => {
   const [progress, setProgress] = useState<number>(0);
   const [isUploading, setIsUploading] = useState(false);
   const [assetId, setAssetId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   const startUpload = async (file: File) => {
     setIsUploading(true);
@@ -40,14 +41,29 @@ const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>((props, ref) => {
   };
 
   const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
+    async (acceptedFiles: File[]) => {
       if (acceptedFiles.length > 0) {
-        startUpload(acceptedFiles[0]);
+        const file = acceptedFiles[0];
+
+        startUpload(file);
       }
     },
     [onChange]
   );
 
+  const onDropRejected = useCallback((fileRejections: FileRejection[]) => {
+    const { code, message } = fileRejections[0].errors[0];
+    if (code === 'file-too-large') {
+      setError(`File is too large. Max size is 5GB.`);
+    } else {
+      setError(message);
+    }
+
+    setTimeout(() => {
+      setError('');
+    }, 8000);
+  }, []);
+
   useEffect(() => {
     if (assetId) {
       onChange(assetId);
@@ -61,13 +77,14 @@ const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>((props, ref) => {
     maxSize: 5 * 1024 * 1024 * 1024, // 5 GB in bytes
     maxFiles: 1,
     onDrop,
+    onDropRejected,
   });
 
   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"
+        className="flex flex-col justify-center items-center w-full h-40 text-sm bg-gray-100 rounded-md border-2 border-gray-300 border-dashed transition-colors cursor-pointer hover:bg-gray-200 aspect-video"
       >
         <p className="m-2">
           Uploading finished! Processing now... Please proceed...
@@ -80,15 +97,15 @@ const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>((props, ref) => {
     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"
+        className="flex flex-col justify-center items-center p-2 w-full h-40 bg-gray-100 rounded-md border-2 border-gray-300 border-dashed transition-colors cursor-pointer hover:bg-gray-200 aspect-video"
       >
-        <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="flex relative justify-center items-center w-full h-full">
+          <div className="absolute top-0 left-0 w-full h-full bg-gray-300 rounded-md opacity-50"></div>
           <div
-            className="absolute left-0 top-0 h-full rounded-md bg-purple-400"
+            className="absolute top-0 left-0 h-full bg-purple-400 rounded-md"
             style={{ width: `${progress}%` }}
           ></div>
-          <div className="z-10 flex flex-col items-center justify-center">
+          <div className="flex z-10 flex-col justify-center items-center">
             <p>{progress}%</p>
             <p>Uploading. Please wait...</p>
           </div>
@@ -101,17 +118,24 @@ const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>((props, ref) => {
     <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"
+      className="flex flex-col justify-center items-center space-y-2 w-full h-40 text-sm bg-white rounded-md border-2 border-gray-300 border-dashed transition-colors cursor-pointer 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>
+
+      {error ? (
+        <div className="mx-4">
+          <p className="text-destructive">{error}</p>
+        </div>
+      ) : (
+        <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>
   );
 });
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 9c4b7746a..0baa43ef6 100644
--- a/packages/app/app/studio/[organization]/library/components/upload/UploadVideoForm.tsx
+++ b/packages/app/app/studio/[organization]/library/components/upload/UploadVideoForm.tsx
@@ -16,10 +16,13 @@ import {
 import { Input } from '@/components/ui/input';
 import { sessionSchema } from '@/lib/schema';
 import { toast } from 'sonner';
-import { createSessionAction } from '@/lib/actions/sessions';
+import {
+  createSessionAction,
+  updateSessionAction,
+} from '@/lib/actions/sessions';
 import { Loader2, Earth, Lock, ChevronDown } from 'lucide-react';
 import Dropzone from './Dropzone';
-import { getFormSubmitStatus } from '@/lib/utils/utils';
+import { getFormSubmitStatus, getImageUrl } 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';
@@ -49,8 +52,8 @@ const UploadVideoForm = ({
     resolver: zodResolver(sessionSchema),
     defaultValues: {
       name: '',
-      description: '',
       coverImage: '',
+      description: '',
       assetId: '',
     },
   });
@@ -65,6 +68,7 @@ const UploadVideoForm = ({
     createSessionAction({
       session: {
         ...values,
+        coverImage: '',
         organizationId,
         speakers: [],
         start: 0,
@@ -75,9 +79,7 @@ const UploadVideoForm = ({
       },
     })
       .then(async (session) => {
-        onFinish();
-
-        const state = await createStateAction({
+        await createStateAction({
           state: {
             sessionId: session._id,
             type: StateType.video,
@@ -85,6 +87,7 @@ const UploadVideoForm = ({
             organizationId: session.organizationId,
           },
         });
+        onFinish();
       })
       .catch((e) => {
         console.log(e);
@@ -103,7 +106,7 @@ const UploadVideoForm = ({
           name="name"
           render={({ field }) => (
             <FormItem>
-              <div className="flex items-center justify-between space-x-2">
+              <div className="flex justify-between items-center space-x-2">
                 <FormLabel required>Video title</FormLabel>
                 <FormMessage />
               </div>
@@ -118,7 +121,7 @@ const UploadVideoForm = ({
           name="description"
           render={({ field }) => (
             <FormItem>
-              <div className="flex items-center justify-between space-x-2">
+              <div className="flex justify-between items-center space-x-2">
                 <FormLabel required>Description</FormLabel>
                 <FormMessage />
               </div>
@@ -135,7 +138,7 @@ const UploadVideoForm = ({
             <FormItem>
               <FormLabel>Visibility</FormLabel>
               <FormControl>
-                <div className="flex items-center justify-start space-x-2">
+                <div className="flex justify-start items-center space-x-2">
                   {field.value ? (
                     <>
                       <Earth size={16} />
@@ -151,7 +154,7 @@ const UploadVideoForm = ({
                     <PopoverTrigger>
                       <ChevronDown size={20} />
                     </PopoverTrigger>
-                    <PopoverContent className="z-[999999999999999] flex w-[150px] cursor-pointer items-center justify-start space-x-2 transition-colors hover:bg-gray-200">
+                    <PopoverContent className="flex justify-start items-center space-x-2 transition-colors cursor-pointer hover:bg-gray-200 z-[999999999999999] w-[150px]">
                       {!field.value ? (
                         <div
                           onClick={() => field.onChange(true)}
@@ -177,7 +180,6 @@ const UploadVideoForm = ({
           )}
         />
         <FormField
-          disabled={!form.getValues('name')}
           control={form.control}
           name="coverImage"
           render={({ field }) => (
@@ -225,7 +227,7 @@ const UploadVideoForm = ({
           >
             {isLoading ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-2 w-4 h-4 animate-spin" />
                 Please wait...
               </>
             ) : (
diff --git a/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx b/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx
index f8a65cc23..dfc0489ab 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/CreateLivestreamModal.tsx
@@ -134,9 +134,9 @@ const CreateLivestreamModal = ({
       <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 flex-row justify-start items-center p-2 pr-4 space-x-4 h-auto bg-white rounded-xl border w-fit"
         >
-          <div className="rounded-xl border bg-primary p-4 text-white">
+          <div className="p-4 text-white rounded-xl border bg-primary">
             <LuRadio size={25} />
           </div>
           <span className="text-sm">Create Livestream</span>
@@ -178,13 +178,17 @@ const CreateLivestreamModal = ({
                 control={form.control}
                 name="thumbnail"
                 render={({ field }) => (
-                  <FormItem className="mt-4 flex aspect-video p-1">
+                  <FormItem className="flex p-1 mt-4 aspect-video">
                     <FormLabel>Thumbnail</FormLabel>
                     <FormControl>
                       <ImageUpload
-                        placeholder="Click to upload image here. Maximum image file size is 20MB. Best resolution of 1920 x 1080. Aspect ratio of 16:9. "
-                        className="m-auto h-full w-full bg-neutrals-300 text-black"
-                        aspectRatio={1}
+                        options={{
+                          placeholder:
+                            'Click to upload image here. Maximum image file size is 20MB. Best resolution of 1920 x 1080. Aspect ratio of 16:9. ',
+                          aspectRatio: 1,
+                          resize: true,
+                        }}
+                        className="m-auto w-full h-full text-black bg-neutrals-300"
                         path={`livestreams/${organization?.slug}`}
                         {...field}
                       />
@@ -202,15 +206,15 @@ const CreateLivestreamModal = ({
                     >
                       Streaming multiple days?
                     </p>
-                    <div className="mt-1 flex items-center gap-5">
-                      <div className="flex items-center gap-1">
+                    <div className="flex gap-5 items-center mt-1">
+                      <div className="flex gap-1 items-center">
                         <Checkbox
                           checked={isMultiDate}
                           onCheckedChange={() => setIsMultiDate(true)}
                         />
                         <Label>Yes</Label>
                       </div>
-                      <div className="flex items-center gap-1">
+                      <div className="flex gap-1 items-center">
                         <Checkbox
                           defaultChecked
                           onCheckedChange={() => setIsMultiDate(!isMultiDate)}
@@ -220,7 +224,7 @@ const CreateLivestreamModal = ({
                       </div>
                     </div>
                   </div>
-                  <div className="mt-4 flex space-x-3">
+                  <div className="flex mt-4 space-x-3">
                     <FormField
                       control={form.control}
                       name="streamDate"
@@ -266,7 +270,7 @@ const CreateLivestreamModal = ({
                   )}
                   {isMultiDate && (
                     <>
-                      <div className="mt-4 flex space-x-3">
+                      <div className="flex mt-4 space-x-3">
                         <FormField
                           control={form.control}
                           name="streamEndDate"
diff --git a/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx b/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx
index d2b4a31b5..d760cd509 100644
--- a/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx
+++ b/packages/app/app/studio/[organization]/livestreams/components/EditLivestream.tsx
@@ -111,7 +111,7 @@ const EditLivestream = ({
   return (
     <Dialog open={open} onOpenChange={() => setOpen(!open)}>
       <DialogTrigger className="w-full" asChild>
-        <Button className="flex w-full space-x-2" variant={variant}>
+        <Button className="flex space-x-2 w-full" variant={variant}>
           <FilePenLine size={15} />
           <span>{btnText}</span>
         </Button>
@@ -144,14 +144,17 @@ const EditLivestream = ({
               control={form.control}
               name="thumbnail"
               render={({ field }) => (
-                <FormItem className="mt-4 flex aspect-video p-1">
+                <FormItem className="flex p-1 mt-4 aspect-video">
                   <FormLabel>Thumbnail</FormLabel>
                   <FormControl>
                     <ImageUpload
-                      placeholder="Click to upload image here. Maximum image file size is 20MB.
-                        Best resolution of 1920 x 1080. Aspect ratio of 16:9. "
-                      className="m-auto h-full w-full bg-neutrals-300 text-black"
-                      aspectRatio={1}
+                      options={{
+                        aspectRatio: 1,
+                        resize: true,
+                        placeholder:
+                          'Click to upload image here. Maximum image file size is 20MB. Best resolution of 1920 x 1080. Aspect ratio of 16:9.',
+                      }}
+                      className="m-auto w-full h-full text-black bg-neutrals-300"
                       path={`stages/${organizationSlug}`}
                       {...field}
                     />
@@ -168,15 +171,15 @@ const EditLivestream = ({
               >
                 Streaming multiple days?
               </p>{' '}
-              <div className="mt-1 flex items-center gap-5">
-                <div className="flex items-center gap-1">
+              <div className="flex gap-5 items-center mt-1">
+                <div className="flex gap-1 items-center">
                   <Checkbox
                     checked={isMultiDate}
                     onCheckedChange={() => setIsMultiDate(true)}
                   />
                   <Label>Yes</Label>
                 </div>
-                <div className="flex items-center gap-1">
+                <div className="flex gap-1 items-center">
                   <Checkbox
                     onCheckedChange={() => setIsMultiDate(!isMultiDate)}
                     checked={!isMultiDate}
@@ -185,7 +188,7 @@ const EditLivestream = ({
                 </div>
               </div>
             </div>
-            <div className="mt-4 flex space-x-3">
+            <div className="flex mt-4 space-x-3">
               <FormField
                 control={form.control}
                 name="streamDate"
@@ -229,7 +232,7 @@ const EditLivestream = ({
 
             {isMultiDate && (
               <>
-                <div className="mt-4 flex space-x-3">
+                <div className="flex mt-4 space-x-3">
                   <FormField
                     control={form.control}
                     name="streamEndDate"
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 ff4e6423b..2ba6afba7 100644
--- a/packages/app/app/studio/[organization]/nfts/create/components/CollectionDetails.tsx
+++ b/packages/app/app/studio/[organization]/nfts/create/components/CollectionDetails.tsx
@@ -48,7 +48,7 @@ const CollectionDetails = ({
           className="space-y-4"
           // onSubmit={form.handleSubmit(onSubmit)}
         >
-          <div className="flex h-full items-center gap-4">
+          <div className="flex gap-4 items-center h-full">
             <FormField
               control={form.control}
               name="thumbnail"
@@ -56,8 +56,11 @@ const CollectionDetails = ({
                 <FormItem className="">
                   <FormControl>
                     <ImageUpload
-                      className="aspect-square h-[100px] rounded-xl bg-neutrals-300"
-                      aspectRatio={1}
+                      options={{
+                        aspectRatio: 1,
+                        resize: false,
+                      }}
+                      className="rounded-xl aspect-square h-[100px] bg-neutrals-300"
                       path={`nftcollections`}
                       {...field}
                     />
@@ -96,7 +99,7 @@ const CollectionDetails = ({
             )}
           />
 
-          <div className="flex w-full flex-col gap-4 lg:flex-row">
+          <div className="flex flex-col gap-4 w-full lg:flex-row">
             <FormField
               control={form.control}
               name="symbol"
@@ -134,7 +137,7 @@ const CollectionDetails = ({
             />
           </div>
           {/*//// Temp hiding this    
-          {/* <div className="flex gap-4 flex-col lg:flex-row w-full">
+          {/* <div className="flex flex-col gap-4 w-full lg:flex-row">
             <FormField
               control={form.control}
               name="startDate"
@@ -168,7 +171,7 @@ const CollectionDetails = ({
               )}
             />
           </div>
-          <div className="flex gap-4 flex-col lg:flex-row w-full">
+          <div className="flex flex-col gap-4 w-full lg:flex-row">
             <FormField
               control={form.control}
               name="endDate"
@@ -202,7 +205,7 @@ const CollectionDetails = ({
               )}
             />
           </div> */}
-          <div className="flex w-full flex-col gap-4 lg:flex-row">
+          <div className="flex flex-col gap-4 w-full lg:flex-row">
             <FormField
               control={form.control}
               name="limitedSupply"
@@ -252,7 +255,7 @@ const CollectionDetails = ({
                 </FormLabel>
                 <FormControl>
                   <Textarea
-                    className="h-[200px] rounded-xl bg-muted"
+                    className="rounded-xl h-[200px] bg-muted"
                     placeholder="Brief description about your NFT collection"
                     {...field}
                   />
diff --git a/packages/app/components/misc/Support/SupportForm.tsx b/packages/app/components/misc/Support/SupportForm.tsx
index 630c991fe..2415e6a17 100644
--- a/packages/app/components/misc/Support/SupportForm.tsx
+++ b/packages/app/components/misc/Support/SupportForm.tsx
@@ -93,12 +93,15 @@ const SupportForm = ({
             control={form.control}
             name="image"
             render={({ field }) => (
-              <FormItem className="mt-4 flex rounded-xl border border-dashed">
+              <FormItem className="flex mt-4 rounded-xl border border-dashed">
                 <FormControl>
                   <ImageUpload
-                    placeholder="Click to upload image here. (Optional) "
-                    className="m-auto min-h-[200px] w-full bg-neutrals-300 py-4 text-black"
-                    aspectRatio={1}
+                    options={{
+                      resize: false,
+                      placeholder: 'Click to upload image here. (Optional) ',
+                      aspectRatio: 1,
+                    }}
+                    className="py-4 m-auto w-full text-black min-h-[200px] bg-neutrals-300"
                     path={`support`}
                     {...field}
                   />
@@ -108,7 +111,7 @@ const SupportForm = ({
             )}
           />
 
-          <div className="flex flex-row justify-between gap-10">
+          <div className="flex flex-row gap-10 justify-between">
             <Button
               className="w-full"
               onClick={handleClose}
@@ -124,7 +127,7 @@ const SupportForm = ({
             >
               {isLoading ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Please wait
+                  <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Please wait
                 </>
               ) : (
                 'Send'
diff --git a/packages/app/components/misc/form/imageUpload.tsx b/packages/app/components/misc/form/imageUpload.tsx
index 922e7b4f6..acdb8997a 100644
--- a/packages/app/components/misc/form/imageUpload.tsx
+++ b/packages/app/components/misc/form/imageUpload.tsx
@@ -1,13 +1,15 @@
 'use client';
 
-import { Input } from '@/components/ui/input';
-import { ChangeEvent, useState } from 'react';
+import React, {
+  useCallback,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import Image from 'next/image';
-import { X } from 'lucide-react';
+import { X, Image as ImageLogo } 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,
@@ -16,15 +18,15 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { useDropzone, FileRejection } from 'react-dropzone';
+import { resizeImage } from '@/lib/utils/resizeImage';
 import { imageUploadAction } from '@/lib/actions/imageUpload';
 
-function getImageData(event: ChangeEvent<HTMLInputElement>) {
+function getImageData(file: File) {
   const dataTransfer = new DataTransfer();
-  Array.from(event.target.files!).forEach((image) =>
-    dataTransfer.items.add(image)
-  );
+  dataTransfer.items.add(file);
   const files = dataTransfer.files;
-  const displayUrl = URL.createObjectURL(event.target.files![0]);
+  const displayUrl = URL.createObjectURL(file);
   return { files, displayUrl };
 }
 
@@ -43,14 +45,14 @@ const ConfirmImageDeletion: React.FC<ConfirmImageDeletionProps> = ({
       <DialogTrigger>
         <X
           size={24}
-          className="absolute right-2 top-2 z-10 cursor-pointer rounded-full border border-muted-foreground bg-white text-muted-foreground"
+          className="absolute top-2 right-2 z-10 bg-white rounded-md border cursor-pointer border-muted-foreground text-muted-foreground"
         />
       </DialogTrigger>
 
-      <DialogContent className="flex flex-col items-center justify-center gap-5 z-[99999999999] ">
+      <DialogContent className="flex flex-col gap-5 justify-center items-center z-[99999999999]">
         <DialogTitle>Delete Image</DialogTitle>
         <p className="text-xl">Are you sure you want to delete this image?</p>
-        <DialogFooter className="flex items-center gap-4">
+        <DialogFooter className="flex gap-4 items-center">
           <Button onClick={() => setOpen(false)} variant="ghost">
             Cancel
           </Button>
@@ -71,178 +73,227 @@ const ConfirmImageDeletion: React.FC<ConfirmImageDeletionProps> = ({
 };
 
 interface ImageUploadProps {
-  id?: string;
-  maxSize?: number;
-  placeholder?: string;
-  aspectRatio: number;
+  options: {
+    maxSize?: number;
+    placeholder?: string;
+    aspectRatio?: number;
+    requireExactSize?: { width: number; height: number };
+    isProfileImage?: boolean;
+    resize?: boolean;
+  };
   onChange: (value: string) => void;
   value: string | undefined;
   path: string;
   className?: string;
-  requireExactSize?: { width: number; height: number };
-  isProfileImage?: boolean;
 }
 
-export default function ImageUpload({
-  id,
-  placeholder,
-  onChange,
-  aspectRatio,
-  value,
-  path,
-  className,
-  maxSize = 5000000,
-  requireExactSize,
-  isProfileImage = false,
-}: ImageUploadProps) {
-  const [preview, setPreview] = useState<string>(
-    value ? getImageUrl('/' + path + '/' + value) : ''
-  );
-  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);
+export interface ImageUploadRef {
+  reset: () => void;
+}
+
+const ImageUpload = forwardRef<ImageUploadRef, ImageUploadProps>(
+  (
+    {
+      onChange,
+      value,
+      path,
+      className,
+      options: {
+        aspectRatio,
+        requireExactSize,
+        placeholder = 'preview',
+        maxSize = 2000000,
+        isProfileImage = false,
+        resize = false,
+      },
+    },
+    ref
+  ) => {
+    const [preview, setPreview] = useState<string>(
+      value ? getImageUrl('/' + path + '/' + value) : ''
+    );
+    const [isUploading, setIsUploading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useImperativeHandle(ref, () => ({
+      reset: () => {
+        setPreview('');
+        onChange('');
+        setError(null);
+      },
+    }));
+
+    const validateImage = useCallback(
+      (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);
+        });
+      },
+      [requireExactSize]
+    );
+
+    const onSubmit = useCallback(
+      async (file: File): Promise<string> => {
+        if (!file) return '';
+
+        try {
+          const isValidSize = await validateImage(file);
+          if (!isValidSize) {
+            throw new Error('Invalid image size');
           }
+
+          const data = new FormData();
+          data.set(
+            'file',
+            new File([file], file.name.replace(/[^a-zA-Z0-9.]/g, '_'), {
+              type: file.type,
+            })
+          );
+          data.set('directory', path);
+          const imageUrl = await imageUploadAction({ data });
+          if (!imageUrl) throw new Error('Error uploading image');
+
+          setPreview(imageUrl);
+          return imageUrl;
+        } catch (e) {
+          console.error(e);
+          setPreview('');
+          throw e;
+        } finally {
+          setIsUploading(false);
+        }
+      },
+      [path, validateImage]
+    );
+
+    const onDropRejected = useCallback(
+      (fileRejections: FileRejection[]) => {
+        const { code, message } = fileRejections[0].errors[0];
+        if (code === 'file-too-large') {
+          setError(`File is too large. Max size is ${maxSize / 1000000}MB.`);
         } else {
-          setError(null);
-          resolve(true);
+          setError(message);
         }
-      };
-      img.src = URL.createObjectURL(file);
-    });
-  };
+      },
+      [maxSize]
+    );
 
-  const onSubmit = async (file: File): Promise<string> => {
-    if (!file) return '';
-    setIsUploading(true);
-    try {
-      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');
-      }
-
-      const data = new FormData();
-      data.set(
-        'file',
-        new File([file], file.name.replace(/[^a-zA-Z0-9.]/g, '_'), {
-          type: file.type,
-        })
-      );
-      data.set('directory', path);
-      const imageUrl = await imageUploadAction({ data });
-      if (!imageUrl) {
-        throw new Error('Error uploading image');
-      }
-      setPreview(imageUrl);
-      return imageUrl;
-    } catch (e: any) {
-      console.error(e);
-      setPreview('');
-      throw e;
-    } finally {
-      setIsUploading(false);
-    }
-  };
+    const onDrop = useCallback(
+      async (acceptedFiles: File[]) => {
+        if (acceptedFiles.length > 0) {
+          const file = resize
+            ? await resizeImage(acceptedFiles[0])
+            : acceptedFiles[0];
+          const { displayUrl } = getImageData(file);
 
-  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`;
+          setPreview(displayUrl);
+          toast.promise(
+            onSubmit(file).then((uploadedPath) => {
+              onChange(uploadedPath);
+              setIsUploading(true);
+              return 'Image uploaded successfully';
+            }),
+            {
+              loading: 'Uploading image',
+              success: (message) => {
+                setIsUploading(false);
+                return message;
+              },
+              error: (error: Error) => {
+                onChange('');
+                setPreview('');
+                setIsUploading(false);
+                return error.message || 'Unknown error';
+              },
+            }
+          );
+        }
+      },
+      [onSubmit, resize, onChange]
+    );
 
-  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 { getRootProps, getInputProps } = useDropzone({
+      accept: {
+        'image/*': ['.png', '.jpg', '.gif'],
+      },
+      maxSize,
+      maxFiles: 1,
+      onDrop,
+      onDropRejected,
+    });
 
-  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';
+    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`;
 
-  return (
-    <div className={containerClasses}>
-      {isUploading ? (
-        <div className="flex h-full w-full items-center justify-center">
-          Uploading image...
-        </div>
-      ) : preview ? (
-        <div className="relative h-full w-full">
-          <ConfirmImageDeletion
-            onChange={() => {
-              onChange('');
-              setPreview('');
-            }}
-            setPreview={setPreview}
-          />
-          <Image src={preview} alt="preview" fill className={imageClasses} />
-        </div>
-      ) : (
-        <Label htmlFor={id} className={placeholderClasses}>
-          <div className="rounded-full bg-neutral-400 p-2 text-white">
-            <ImageLogo />
+    const imageClasses = isProfileImage
+      ? 'm-auto h-full w-full rounded-full bg-neutrals-300 text-white object-cover'
+      : 'w-full h-full object-contain';
+
+    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="flex justify-center items-center w-full h-full">
+            Uploading image...
           </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: ChangeEvent<HTMLInputElement>) => {
-          if (event.target.files && event.target.files.length > 0) {
-            const { files, displayUrl } = getImageData(event);
-
-            setPreview(displayUrl);
-            toast.promise(
-              onSubmit(files[0]).then((uploadedPath) => {
-                onChange(uploadedPath);
-                return 'Image uploaded successfully';
-              }),
-              {
-                loading: 'Uploading image',
-                success: (message) => {
-                  return message;
-                },
-                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>
-  );
-}
+        ) : preview ? (
+          <div className="relative w-full h-full">
+            <ConfirmImageDeletion
+              onChange={() => {
+                onChange('');
+                setPreview('');
+              }}
+              setPreview={setPreview}
+            />
+            <Image src={preview} alt="preview" fill className={imageClasses} />
+          </div>
+        ) : (
+          <div {...getRootProps()} className={placeholderClasses}>
+            <div className="p-2 text-white rounded-full bg-neutral-400">
+              <ImageLogo />
+            </div>
+            {!isProfileImage && (
+              <p className="p-1 w-full text-center lg:w-2/3 text-[12px]">
+                {placeholder}
+              </p>
+            )}
+            <input {...getInputProps()} />
+            {error && (
+              <p className="absolute right-0 left-0 mt-2 text-sm text-center text-red-500 bottom-[-2rem]">
+                {error}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+ImageUpload.displayName = 'ImageUpload';
+
+export default ImageUpload;
diff --git a/packages/app/lib/services/sessionService.ts b/packages/app/lib/services/sessionService.ts
index 91e0175bc..473486c02 100644
--- a/packages/app/lib/services/sessionService.ts
+++ b/packages/app/lib/services/sessionService.ts
@@ -148,6 +148,7 @@ export const createSession = async ({
     throw e;
   }
 };
+
 export const fetchSession = async ({
   session,
 }: {
diff --git a/packages/app/lib/utils/resizeImage.ts b/packages/app/lib/utils/resizeImage.ts
new file mode 100644
index 000000000..e65e938f5
--- /dev/null
+++ b/packages/app/lib/utils/resizeImage.ts
@@ -0,0 +1,81 @@
+/**
+ * Resizes an image file to a specified width and height without stretching.
+ * The image is scaled to fit within the target dimensions, and black bars are added to fill the remaining space.
+ *
+ * @param file - The original image file to be resized.
+ * @param [options] - Configuration options for the resize operation.
+ * @param [options.width=1280] - The target width of the resized image in pixels.
+ * @param [options.height=720] - The target height of the resized image in pixels.
+ * @param [options.contentType='image/jpeg'] - The MIME type of the output image.
+ * @param [options.quality=0.9] - The quality of the output image, between 0 and 1.
+ * @returns {Promise<File>} A promise that resolves with the resized image as a new File object.
+ * @throws If there's an issue loading the image or creating the resized version.
+ */
+export const resizeImage = async (
+  file: File,
+  options = {
+    width: 1280,
+    height: 720,
+    contentType: 'image/jpeg',
+    quality: 0.9,
+  }
+): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = options.width;
+      canvas.height = options.height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'));
+        return;
+      }
+
+      ctx.fillStyle = 'black';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      const scale = Math.min(
+        canvas.width / img.width,
+        canvas.height / img.height
+      );
+
+      const newWidth = Math.round(img.width * scale);
+      const newHeight = Math.round(img.height * scale);
+
+      const x = Math.round((canvas.width - newWidth) / 2);
+      const y = Math.round((canvas.height - newHeight) / 2);
+
+      ctx.drawImage(img, x, y, newWidth, newHeight);
+
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error('Failed to create blob'));
+            return;
+          }
+          const resizedFile = new File([blob], file.name, {
+            type: options.contentType,
+            lastModified: new Date().getTime(),
+          });
+          resolve(resizedFile);
+        },
+        options.contentType,
+        options.quality
+      );
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image'));
+    };
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result as string;
+    };
+    reader.onerror = () => {
+      reject(new Error('Failed to read file'));
+    };
+    reader.readAsDataURL(file);
+  });
+};
diff --git a/packages/app/package.json b/packages/app/package.json
index 0ddebfafd..8f2400563 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -43,8 +43,8 @@
     "@tanstack/react-query": "^5.18.1",
     "@thirdweb-dev/storage": "^2.0.15",
     "@uiw/react-md-editor": "^4.0.3",
-    "@vercel/analytics": "^1.0.2",
-    "@vercel/speed-insights": "^1.0.2",
+    "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.12",
     "@zoralabs/protocol-sdk": "^0.9.3",
     "autoprefixer": "10.4.14",
     "class-validator": "^0.14.0",
@@ -68,13 +68,11 @@
     "livepeer": "^3.0.2",
     "lodash": "^4.17.21",
     "lokijs": "^1.5.12",
-    "lucide-react": "^0.414.0",
+    "lucide-react": "^0.427.0",
     "moment-timezone": "^0.5.43",
-    "momentjs": "^2.0.0",
     "mux-embed": "^5.2.1",
     "next": "^14.2.0",
     "next-themes": "^0.2.1",
-    "oauth-1.0a": "^2.2.6",
     "pino-pretty": "^10.3.1",
     "postcss": "8.4.31",
     "react": "^18.2.0",
@@ -83,7 +81,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.3",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-markdown": "^9.0.0",
     "react-resizable-panels": "^1.0.8",
     "react-scroll": "^1.8.9",
diff --git a/packages/app/tests/utils/setFile.ts b/packages/app/tests/utils/setFile.ts
index 10486f17b..fed3f9789 100644
--- a/packages/app/tests/utils/setFile.ts
+++ b/packages/app/tests/utils/setFile.ts
@@ -10,15 +10,12 @@ export const setFile = async (page: Page) => {
     throw new Error(`Logo file not found at ${logoPath}`);
   }
 
-  const fileChooserPromise = page.waitForEvent('filechooser');
-
-  await page.locator('label').nth(1).click();
-  const fileChooser = await fileChooserPromise;
-  await fileChooser.setFiles(logoPath);
+  const fileInput = page.locator('div.rounded-full input[type="file"]');
+  await fileInput.setInputFiles(logoPath);
 
   await expect(
     page.getByText('Image uploaded successfully').first()
-  ).toBeVisible();
+  ).toBeVisible({ timeout: 20000 });
   console.log('Image upload successful');
   await expect(
     page.getByText('Image uploaded successfully').first()
diff --git a/yarn.lock b/yarn.lock
index 4b5c39470..85abdb7a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6300,14 +6300,14 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vercel/analytics@^1.0.2":
+"@vercel/analytics@^1.3.1":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.3.1.tgz#e2b1deac1b5d14fa2e4fe36186ac5054c6385ae4"
   integrity sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==
   dependencies:
     server-only "^0.0.1"
 
-"@vercel/speed-insights@^1.0.2":
+"@vercel/speed-insights@^1.0.12":
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/@vercel/speed-insights/-/speed-insights-1.0.12.tgz#71c2edffdedae98d34e306d7b0a573e6816898b4"
   integrity sha512-ZGQ+a7bcfWJD2VYEp2R1LHvRAMyyaFBYytZXsfnbOMkeOvzGNVxUL7aVUvisIrTZjXTSsxG45DKX7yiw6nq2Jw==
@@ -14149,10 +14149,10 @@ lru_map@^0.3.3:
   resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
   integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==
 
-lucide-react@^0.414.0:
-  version "0.414.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.414.0.tgz#15245174d3ea111c85eae571b0e903c1026ac1fd"
-  integrity sha512-Krr/MHg9AWoJc52qx8hyJ64X9++JNfS1wjaJviLM1EP/68VNB7Tv0VMldLCB1aUe6Ka9QxURPhQm/eB6cqOM3A==
+lucide-react@^0.427.0:
+  version "0.427.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.427.0.tgz#e06974514bbd591049f9d736b3d3ae99d4ede8c9"
+  integrity sha512-lv9s6c5BDF/ccuA0EgTdskTxIe11qpwBDmzRZHJAKtp8LTewAvDvOM+pTES9IpbBuTqkjiMhOmGpJ/CB+mKjFw==
 
 luxon@^3.2.1:
   version "3.4.4"
@@ -15015,11 +15015,6 @@ moment@^2.29.1, moment@^2.29.4:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
 
-momentjs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/momentjs/-/momentjs-2.0.0.tgz#73df904b4fa418f6e3c605e831cef6ed5518ebd4"
-  integrity sha512-GYMUxLyCwVhECkJR1/LMHEyb9gWYSPRnXi+elGN0m5bet7ngQOxU4QLWUI/eBzgN4N/T194n6yP7lQiE+Udw9A==
-
 mongodb-connection-string-url@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-2.6.0.tgz#57901bf352372abdde812c81be47b75c6b2ec5cf"
@@ -16873,10 +16868,10 @@ react-hook-form@^7.49.3:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.1.tgz#ec2c96437b977f8b89ae2d541a70736c66284852"
   integrity sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==
 
-react-icons@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
-  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
+react-icons@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"