diff --git a/prisma/migrations/20240830204152_/migration.sql b/prisma/migrations/20240830204152_/migration.sql
new file mode 100644
index 000000000..8293c1666
--- /dev/null
+++ b/prisma/migrations/20240830204152_/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "VideoMetadata" ADD COLUMN     "original_mp4_url" TEXT,
+ADD COLUMN     "transcoded" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 2ee969079..e614cf77e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -122,6 +122,8 @@ model VideoMetadata {
   migrated_video_1080p_mp4_1 String?
   migrated_video_360p_mp4_1  String?
   migrated_video_720p_mp4_1  String?
+  original_mp4_url           String?
+  transcoded                 Boolean         @default(false)
 
   @@unique([contentId])
 }
diff --git a/src/app/api/github/callback/route.ts b/src/app/api/github/callback/route.ts
index e75c1dc1b..f2f9563fd 100644
--- a/src/app/api/github/callback/route.ts
+++ b/src/app/api/github/callback/route.ts
@@ -1,71 +1,82 @@
-import prisma from "@/db";
-import { authOptions } from "@/lib/auth";
-import { getServerSession } from "next-auth";
-import { NextRequest, NextResponse } from "next/server";
+import prisma from '@/db';
+import { authOptions } from '@/lib/auth';
+import { getServerSession } from 'next-auth';
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function GET(req: NextRequest) {
-    const code = req.nextUrl.searchParams.get('code');
+  const code = req.nextUrl.searchParams.get('code');
 
-    const session = await getServerSession(authOptions);
+  const session = await getServerSession(authOptions);
 
-    if (!session?.user?.id || !code) {
-        return NextResponse.redirect(new URL('/payout-methods?error=invalid_session', req.url));
-    }
-
-    try {
-        // Exchange code for access token
-        const tokenResponse = await fetch('https://github.com/login/oauth/access_token', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-            },
-            body: JSON.stringify({
-                client_id: process.env.GITHUB_ID,
-                client_secret: process.env.GITHUB_SECRET,
-                code,
-            }),
-        });
+  if (!session?.user?.id || !code) {
+    return NextResponse.redirect(
+      new URL('/payout-methods?error=invalid_session', req.url),
+    );
+  }
 
-        const tokenData = await tokenResponse.json();
-        console.log('Token data:', tokenData);
+  try {
+    // Exchange code for access token
+    const tokenResponse = await fetch(
+      'https://github.com/login/oauth/access_token',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          client_id: process.env.GITHUB_ID,
+          client_secret: process.env.GITHUB_SECRET,
+          code,
+        }),
+      },
+    );
 
-        if (tokenData.error) {
-            throw new Error(tokenData.error_description);
-        }
+    const tokenData = await tokenResponse.json();
+    console.log('Token data:', tokenData);
 
-        // Get user info from GitHub
-        const userResponse = await fetch('https://api.github.com/user', {
-            headers: {
-                Authorization: `token ${tokenData.access_token}`,
-            },
-        });
+    if (tokenData.error) {
+      throw new Error(tokenData.error_description);
+    }
 
-        const userData = await userResponse.json();
-        console.log('User data:', userData);
+    // Get user info from GitHub
+    const userResponse = await fetch('https://api.github.com/user', {
+      headers: {
+        Authorization: `token ${tokenData.access_token}`,
+      },
+    });
 
-        const existingLink = await prisma.gitHubLink.findUnique({
-            where: { userId: session.user.id },
-        });
+    const userData = await userResponse.json();
+    console.log('User data:', userData);
 
-        if (!existingLink) {
-            await prisma.gitHubLink.create({
-                data: {
-                    userId: session.user.id,
-                    githubId: userData.id.toString(),
-                    username: userData.login,
-                    access_token: tokenData.access_token,
-                    avatarUrl: userData.avatar_url,
-                    profileUrl: userData.html_url,
-                },
-            });
-        } else {
-            return NextResponse.redirect(new URL('/payout-methods?github_linked=true', req.url));
-        }
+    const existingLink = await prisma.gitHubLink.findUnique({
+      where: { userId: session.user.id },
+    });
 
-        return NextResponse.redirect(new URL('/payout-methods?github_linked=true', req.url));
-    } catch (error) {
-        console.error('Error linking GitHub:', error);
-        return NextResponse.redirect(new URL('/payout-methods?error=github_link_failed', req.url));
+    if (!existingLink) {
+      await prisma.gitHubLink.create({
+        data: {
+          userId: session.user.id,
+          githubId: userData.id.toString(),
+          username: userData.login,
+          access_token: tokenData.access_token,
+          avatarUrl: userData.avatar_url,
+          profileUrl: userData.html_url,
+        },
+      });
+    } else {
+      return NextResponse.redirect(
+        new URL('/payout-methods?github_linked=true', req.url),
+      );
     }
-}
\ No newline at end of file
+
+    return NextResponse.redirect(
+      new URL('/payout-methods?github_linked=true', req.url),
+    );
+  } catch (error) {
+    console.error('Error linking GitHub:', error);
+    return NextResponse.redirect(
+      new URL('/payout-methods?error=github_link_failed', req.url),
+    );
+  }
+}
diff --git a/src/app/api/github/details/route.ts b/src/app/api/github/details/route.ts
index 80b89e1e3..5e94ca569 100644
--- a/src/app/api/github/details/route.ts
+++ b/src/app/api/github/details/route.ts
@@ -1,48 +1,68 @@
-import prisma from "@/db";
-import { authOptions } from "@/lib/auth";
-import { getServerSession } from "next-auth";
-import { NextResponse } from "next/server";
+import prisma from '@/db';
+import { authOptions } from '@/lib/auth';
+import { getServerSession } from 'next-auth';
+import { NextResponse } from 'next/server';
 
 export async function GET() {
-    const session = await getServerSession(authOptions);
-
-    if (!session) {
-        return NextResponse.json({ message: 'Unauthorised', success: 'false' }, { status: 401 });
-    }
-
-    const githubData = await prisma.gitHubLink.findMany({
-        where: {
-            userId: session?.user?.id
-        },
-        select: {
-            avatarUrl: true,
-            username: true,
-            profileUrl: true,
-        }
-    });
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    return NextResponse.json(
+      { message: 'Unauthorised', success: 'false' },
+      { status: 401 },
+    );
+  }
 
-    if (!githubData) {
-        return NextResponse.json({ message: "Couldn't find any Linked github", success: 'false' });
-    }
+  const githubData = await prisma.gitHubLink.findMany({
+    where: {
+      userId: session?.user?.id,
+    },
+    select: {
+      avatarUrl: true,
+      username: true,
+      profileUrl: true,
+    },
+  });
 
-    return NextResponse.json({ message: "found data successsfully", data: githubData, success: 'true' });
+  if (!githubData) {
+    return NextResponse.json({
+      message: "Couldn't find any Linked github",
+      success: 'false',
+    });
+  }
+
+  return NextResponse.json({
+    message: 'found data successsfully',
+    data: githubData,
+    success: 'true',
+  });
 }
 
 export async function DELETE() {
-    const session = await getServerSession(authOptions);
-
-    if (!session) {
-        return NextResponse.json({ message: 'Unauthorised', success: 'false' }, { status: 401 });
-    }
-
-    try {
-        await prisma.gitHubLink.delete({
-            where: {
-                userId: session?.user?.id
-            },
-        });
-        return NextResponse.json({ message: "Github unlinked succeessfully", success: 'true' });
-    } catch (error) {
-        return NextResponse.json({ message: "Something went wrong", error: error, success: 'false' });
-    }
-}
\ No newline at end of file
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    return NextResponse.json(
+      { message: 'Unauthorised', success: 'false' },
+      { status: 401 },
+    );
+  }
+
+  try {
+    await prisma.gitHubLink.delete({
+      where: {
+        userId: session?.user?.id,
+      },
+    });
+    return NextResponse.json({
+      message: 'Github unlinked succeessfully',
+      success: 'true',
+    });
+  } catch (error) {
+    return NextResponse.json({
+      message: 'Something went wrong',
+      error,
+      success: 'false',
+    });
+  }
+}
diff --git a/src/app/api/github/link/route.ts b/src/app/api/github/link/route.ts
index e634dd2f9..34702a81b 100644
--- a/src/app/api/github/link/route.ts
+++ b/src/app/api/github/link/route.ts
@@ -1,11 +1,11 @@
-import { NextResponse } from "next/server";
+import { NextResponse } from 'next/server';
 
 export async function GET() {
-    const clientId = process.env.GITHUB_ID;
-    const redirectUri = `${process.env.NEXTAUTH_URL}/api/github/callback`;
-    const scope = 'read:user user:email';
+  const clientId = process.env.GITHUB_ID;
+  const redirectUri = `${process.env.NEXTAUTH_URL}/api/github/callback`;
+  const scope = 'read:user user:email';
 
-    const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}`;
+  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}`;
 
-    return NextResponse.redirect(githubAuthUrl);
-}
\ No newline at end of file
+  return NextResponse.redirect(githubAuthUrl);
+}
diff --git a/src/app/payout-methods/page.tsx b/src/app/payout-methods/page.tsx
index b4bfb05c8..c1ce928e2 100644
--- a/src/app/payout-methods/page.tsx
+++ b/src/app/payout-methods/page.tsx
@@ -2,15 +2,21 @@
 import { useEffect, useState } from 'react';
 import NewPayoutDialog from '@/components/NewPayoutDialog';
 import { GitHubLinkButton } from '@/components/GitHubLinkButton';
-import SOL from "../../../public/platform/sol.svg"
-import UPI from "../../../public/platform/upi.svg"
+import SOL from '../../../public/platform/sol.svg';
+import UPI from '../../../public/platform/upi.svg';
 import { PayoutMethodCard } from '@/components/PaymentMethodCard';
 import { usePayoutMethods } from '@/hooks/usePayoutMethod';
 
 export default function Page() {
   const [isDialogBoxOpen, setIsDialogBoxOpen] = useState<boolean>(false);
   const [btnClicked, setBtnClicked] = useState<string>('');
-  const { upiAddresses, solanaAddresses, handleUpiDelete, handleSolanaDelete, fetchPayoutMethods } = usePayoutMethods();
+  const {
+    upiAddresses,
+    solanaAddresses,
+    handleUpiDelete,
+    handleSolanaDelete,
+    fetchPayoutMethods,
+  } = usePayoutMethods();
 
   const openDialog = (method: string) => {
     setIsDialogBoxOpen(true);
@@ -19,18 +25,20 @@ export default function Page() {
 
   useEffect(() => {
     fetchPayoutMethods();
-  }, [isDialogBoxOpen])
+  }, [isDialogBoxOpen]);
 
   const closeDialog = () => setIsDialogBoxOpen(false);
 
   return (
     <div className="h-max pb-4 transition-colors duration-500 md:p-8">
       <div className="mb-6 flex flex-col items-start justify-center px-4 pt-3 sm:px-8">
-        <div className="text-3xl text-black my-2 mb-6 transition-colors duration-500 dark:text-white">
-          <h1 className="text-black dark:text-white font-semibold">Payout Methods</h1>
+        <div className="my-2 mb-6 text-3xl text-black transition-colors duration-500 dark:text-white">
+          <h1 className="font-semibold text-black dark:text-white">
+            Payout Methods
+          </h1>
         </div>
 
-        <div className='grid grid-cols-1 sm:grid-cols-2 w-full md:grid-cols-3 gap-4'>
+        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
           <PayoutMethodCard
             title="UPI Address"
             description="Add your UPI ID"
@@ -57,14 +65,12 @@ export default function Page() {
           title={btnClicked}
         />
 
-        <div className='w-full my-8'>
-          <h2 className='text-3xl my-4 font-semibold'>Apps</h2>
-          <div className='grid grid-cols-1 sm:grid-cols-2 w-full  md:grid-cols-3 gap-4'>
+        <div className="my-8 w-full">
+          <h2 className="my-4 text-3xl font-semibold">Apps</h2>
+          <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
             <GitHubLinkButton />
           </div>
-
         </div>
-
       </div>
     </div>
   );
diff --git a/src/components/GitHubLinkButton.tsx b/src/components/GitHubLinkButton.tsx
index 79ae33253..7d31de35f 100644
--- a/src/components/GitHubLinkButton.tsx
+++ b/src/components/GitHubLinkButton.tsx
@@ -2,15 +2,14 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import Image from 'next/image';
-import GITHUB from "../../public/platform/github.svg";
+import GITHUB from '../../public/platform/github.svg';
 import Link from 'next/link';
 import { GitHubLink } from '@prisma/client';
 
-
 export const GitHubLinkButton = () => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [githubData, setGithubData] = useState<GitHubLink | null>(null);
@@ -19,43 +18,39 @@ export const GitHubLinkButton = () => {
 
   useEffect(() => {
     if (searchParams.get('github_linked') === 'true') {
-      router.push('/payout-methods')
-      toast.success('Github account linked successfully')
+      router.push('/payout-methods');
+      toast.success('Github account linked successfully');
     } else if (searchParams.get('error') === 'github_link_failed') {
-      toast.error("Couldn't link with your github , Try again after sometime")
+      toast.error("Couldn't link with your github , Try again after sometime");
     }
   }, [searchParams]);
 
   const getGithubData = async () => {
     const response = await fetch('/api/github/details');
-    const resp = await response.json()
+    const resp = await response.json();
     setGithubData(resp.data[0]);
-  }
-
+  };
 
   const handleUnlinkAccount = async () => {
     setIsProcessing(true);
     const response = await fetch('/api/github/details', {
-      method: 'DELETE'
+      method: 'DELETE',
     });
     setIsProcessing(false);
-    const resp = await response.json()
+    const resp = await response.json();
     console.log(resp);
     if (resp.success) {
       toast.success(resp.message);
-      getGithubData()
-    }
-    else {
+      getGithubData();
+    } else {
       toast.error(resp.message);
     }
-  }
-
-
+  };
 
   useEffect(() => {
-    // fetch the saved github linked data 
-    getGithubData()
-  }, [searchParams])
+    // fetch the saved github linked data
+    getGithubData();
+  }, [searchParams]);
 
   const handleLinkGitHub = async () => {
     setIsProcessing(true);
@@ -64,67 +59,92 @@ export const GitHubLinkButton = () => {
 
   return (
     <>
-      <div className="p-6 cursor-pointer border-2 relative rounded-lg group overflow-hidden flex flex-col justify-between h-[18rem]">
+      <div className="group relative flex h-[18rem] cursor-pointer flex-col justify-between overflow-hidden rounded-lg border-2 p-6">
         <div>
           <div>
             <h3 className="text-lg font-semibold">Github</h3>
-            <p className="text-sm text-muted-foreground">Link your Github account</p>
+            <p className="text-sm text-muted-foreground">
+              Link your Github account
+            </p>
           </div>
         </div>
 
-        <div className='flex items-center gap-2 my-6'>
+        <div className="my-6 flex items-center gap-2">
           {githubData ? (
-            <div className='flex items-center gap-2'>
+            <div className="flex items-center gap-2">
               {/* {githubData?.avatarUrl} */}
-              <Button onClick={handleUnlinkAccount} color='white' variant={'destructive'} className='w-[5rem] font-semi-bold h-[2rem] text-white'>
+              <Button
+                onClick={handleUnlinkAccount}
+                color="white"
+                variant={'destructive'}
+                className="font-semi-bold h-[2rem] w-[5rem] text-white"
+              >
                 {isProcessing ? 'Unlinking...' : 'Unlink'}
               </Button>
               <Dialog>
                 <DialogTrigger asChild>
-                  <Button color='white' variant={'outline'} className='w-fit font-semi-bold h-[2rem] text-white'>
-                    <div className="w-full flex items-center gap-2 h-full">
+                  <Button
+                    color="white"
+                    variant={'outline'}
+                    className="font-semi-bold h-[2rem] w-fit text-white"
+                  >
+                    <div className="flex h-full w-full items-center gap-2">
                       <Image
                         src={githubData?.avatarUrl || ''}
                         alt="Landscape"
                         width={400}
                         height={400}
-                        className="w-[1rem] h-[1rem] rounded-full object-cover"
+                        className="h-[1rem] w-[1rem] rounded-full object-cover"
                       />
-                      <p className='dark:text-white text-black'>View more</p>
+                      <p className="text-black dark:text-white">View more</p>
                     </div>
                   </Button>
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-[425px]">
                   <div className="flex flex-col items-center gap-6 py-8">
                     <Avatar className="h-20 w-20">
-                      <AvatarImage src={githubData?.avatarUrl || ''} alt="@shadcn" />
+                      <AvatarImage
+                        src={githubData?.avatarUrl || ''}
+                        alt="@shadcn"
+                      />
                       <AvatarFallback>CN</AvatarFallback>
                     </Avatar>
                     <div className="grid gap-1 text-center">
-                      <h3 className="text-2xl font-bold">@{githubData?.username}</h3>
-                      <Link href={githubData?.profileUrl || ''} target='_blank' className="text-muted-foreground hover:underline cursor-pointer">{githubData?.profileUrl}</Link>
+                      <h3 className="text-2xl font-bold">
+                        @{githubData?.username}
+                      </h3>
+                      <Link
+                        href={githubData?.profileUrl || ''}
+                        target="_blank"
+                        className="cursor-pointer text-muted-foreground hover:underline"
+                      >
+                        {githubData?.profileUrl}
+                      </Link>
                       {/* <p className="text-sm text-muted-foreground">@oliviadavis</p> */}
                     </div>
                   </div>
-
                 </DialogContent>
               </Dialog>
-
             </div>
           ) : (
-            <Button onClick={handleLinkGitHub} disabled={isProcessing} color='white' className='w-[5rem] font-semi-bold h-[2rem] text-white'>
+            <Button
+              onClick={handleLinkGitHub}
+              disabled={isProcessing}
+              color="white"
+              className="font-semi-bold h-[2rem] w-[5rem] text-white"
+            >
               {isProcessing ? 'Linking...' : 'Link'}
             </Button>
           )}
         </div>
 
-        <div className="w-full h-full">
+        <div className="h-full w-full">
           <Image
             src={GITHUB}
             alt="Landscape"
             width={400}
             height={400}
-            className="absolute dark:invert w-[10rem] h-[10rem] bottom-[-50px] opacity-40 group-hover:opacity-100 right-0 group-hover:bottom-[-20px] transition-all duration-300 ease-in-out object-cover"
+            className="absolute bottom-[-50px] right-0 h-[10rem] w-[10rem] object-cover opacity-40 transition-all duration-300 ease-in-out group-hover:bottom-[-20px] group-hover:opacity-100 dark:invert"
           />
         </div>
       </div>
diff --git a/src/components/NewPayoutDialog.tsx b/src/components/NewPayoutDialog.tsx
index 2cde1edde..8509446f5 100644
--- a/src/components/NewPayoutDialog.tsx
+++ b/src/components/NewPayoutDialog.tsx
@@ -15,7 +15,6 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@/components/ui/dialog';
 
 interface DialogProps {
@@ -105,22 +104,20 @@ export default function NewPayoutDialog({
               <Input
                 placeholder={`Enter your ${title} address`}
                 {...register(fieldName)}
-                className='p-4'
+                className="p-4"
               />
               {errors[fieldName] && (
-              <p className="text-sm text-red-500">
-                {errors[fieldName]?.message}
-              </p>
-            )}
+                <p className="text-sm text-red-500">
+                  {errors[fieldName]?.message}
+                </p>
+              )}
               <Button type="submit" disabled={isLoading}>
                 {isLoading ? <Loader /> : 'Add'}
               </Button>
             </div>
-            
           </form>
         </DialogContent>
       </Dialog>
     </>
-
   );
 }
diff --git a/src/components/PaymentMethodCard.tsx b/src/components/PaymentMethodCard.tsx
index 01f30a438..50bc00d90 100644
--- a/src/components/PaymentMethodCard.tsx
+++ b/src/components/PaymentMethodCard.tsx
@@ -1,66 +1,79 @@
 import React from 'react';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { ViewAllDialog } from './ViewAllDialog';
 
 interface PayoutMethodCardProps {
-    title: string;
-    description: string;
-    imageSrc: string;
-    addresses: | Array<{
+  title: string;
+  description: string;
+  imageSrc: string;
+  addresses:
+    | Array<{
         id: number;
         value: string;
         userId: string;
-    }>
+      }>
     | undefined;
-    onAdd: (method: string) => void;
-    id: string;
-    onDelete: (id: number) => void;
+  onAdd: (method: string) => void;
+  id: string;
+  onDelete: (id: number) => void;
 }
 
 export const PayoutMethodCard: React.FC<PayoutMethodCardProps> = ({
-    title,
-    description,
-    imageSrc,
-    addresses,
-    onAdd,
-    id,
-    onDelete
+  title,
+  description,
+  imageSrc,
+  addresses,
+  onAdd,
+  id,
+  onDelete,
 }) => {
-    return (
-        <div className="p-6 border-2 cursor-pointer relative rounded-lg group overflow-hidden flex flex-col justify-between h-[18rem]">
-            <div>
-                <h3 className="text-lg font-semibold">{title}</h3>
-                <p className="text-sm text-muted-foreground">{description}</p>
-            </div>
+  return (
+    <div className="group relative flex h-[18rem] cursor-pointer flex-col justify-between overflow-hidden rounded-lg border-2 p-6">
+      <div>
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
 
-            <div className='flex items-center gap-2 my-6'>
-                <Button onClick={(e: any) => onAdd(e.target.id)} color='white' id={id} className='w-[5rem] font-semi-bold h-[2rem] text-white'>
-                    Add
-                </Button>
+      <div className="my-6 flex items-center gap-2">
+        <Button
+          onClick={(e: any) => onAdd(e.target.id)}
+          color="white"
+          id={id}
+          className="font-semi-bold h-[2rem] w-[5rem] text-white"
+        >
+          Add
+        </Button>
 
-                {addresses?.length !== 0 && (
-                    <Dialog>
-                        <DialogTrigger asChild>
-                            <Button variant={'outline'} className='w-[5rem] font-semi-bold h-[2rem] dark:text-white'>
-                                View All
-                            </Button>
-                        </DialogTrigger>
-                        <ViewAllDialog title={`Your ${title}`} addresses={addresses} onDelete={onDelete} />
-                    </Dialog>
-                )}
-            </div>
+        {addresses?.length !== 0 && (
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button
+                variant={'outline'}
+                className="font-semi-bold h-[2rem] w-[5rem] dark:text-white"
+              >
+                View All
+              </Button>
+            </DialogTrigger>
+            <ViewAllDialog
+              title={`Your ${title}`}
+              addresses={addresses}
+              onDelete={onDelete}
+            />
+          </Dialog>
+        )}
+      </div>
 
-            <div className="w-full h-full">
-                <Image
-                    src={imageSrc}
-                    alt={title}
-                    width={400}
-                    height={400}
-                    className="absolute w-[10rem] h-[10rem] bottom-[-50px] opacity-40 group-hover:opacity-100 right-[8px] group-hover:bottom-[-20px] transition-all duration-300 ease-in-out object-contain"
-                />
-            </div>
-        </div>
-    );
-};
\ No newline at end of file
+      <div className="h-full w-full">
+        <Image
+          src={imageSrc}
+          alt={title}
+          width={400}
+          height={400}
+          className="absolute bottom-[-50px] right-[8px] h-[10rem] w-[10rem] object-contain opacity-40 transition-all duration-300 ease-in-out group-hover:bottom-[-20px] group-hover:opacity-100"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 2fc6b68fa..b5accb49b 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -155,7 +155,7 @@ export function Sidebar({
     <>
       {sidebarOpen && (
         <div className="no-scrollbar absolute z-20 m-4 h-full w-[300px] min-w-[300px] cursor-pointer self-start overflow-y-scroll scroll-smooth rounded-lg border bg-gray-50 dark:bg-[#020817] sm:sticky sm:top-[64px] sm:h-sidebar">
-          <div className="flex items-center justify-between border-b p-4 sticky top-0 bg-background">
+          <div className="sticky top-0 flex items-center justify-between border-b bg-background p-4">
             <h4 className="text-lg dark:text-[#F8FAFC]">Course Content</h4>
             <div
               onClick={() => {
diff --git a/src/components/ViewAllDialog.tsx b/src/components/ViewAllDialog.tsx
index 2c1463fb0..52f7f8ed9 100644
--- a/src/components/ViewAllDialog.tsx
+++ b/src/components/ViewAllDialog.tsx
@@ -1,28 +1,35 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { DialogContent, DialogHeader } from "@/components/ui/dialog";
+import { DialogContent, DialogHeader } from '@/components/ui/dialog';
 import { TrashIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
 interface ViewAllDialogProps {
   title: string;
-  addresses: | Array<{
-    id: number;
-    value: string;
-    userId: string;
-  }>
-  | undefined;
+  addresses:
+    | Array<{
+        id: number;
+        value: string;
+        userId: string;
+      }>
+    | undefined;
   onDelete: (id: number) => void;
 }
 
-export const ViewAllDialog: React.FC<ViewAllDialogProps> = ({ title, addresses, onDelete }) => {
+export const ViewAllDialog: React.FC<ViewAllDialogProps> = ({
+  title,
+  addresses,
+  onDelete,
+}) => {
   return (
-    <DialogContent className="sm:max-w-[625px] pb-4">
+    <DialogContent className="pb-4 sm:max-w-[625px]">
       <DialogHeader>
         <div className="flex flex-col gap-6 py-2">
           <div className="grid gap-1 text-left">
             <h3 className="text-2xl font-bold">{title}</h3>
-            <span className="text-sm text-gray-400">Click on address to copy</span>
+            <span className="text-sm text-gray-400">
+              Click on address to copy
+            </span>
           </div>
         </div>
       </DialogHeader>
@@ -30,13 +37,22 @@ export const ViewAllDialog: React.FC<ViewAllDialogProps> = ({ title, addresses,
         {addresses?.length !== 0 ? (
           addresses?.map((address, index) => (
             <div key={index} className="flex items-center justify-between">
-              <div className='cursor-pointer' onClick={() => {
-                navigator.clipboard.writeText(address.value);
-                toast.success('Copied to clipboard')
-              }}>
-                <p className="text-sm md:text-base">{address.value.slice(0, 20)}...</p>
+              <div
+                className="cursor-pointer"
+                onClick={() => {
+                  navigator.clipboard.writeText(address.value);
+                  toast.success('Copied to clipboard');
+                }}
+              >
+                <p className="text-sm md:text-base">
+                  {address.value.slice(0, 20)}...
+                </p>
               </div>
-              <Button onClick={() => onDelete(address.id)} variant="outline" size="icon">
+              <Button
+                onClick={() => onDelete(address.id)}
+                variant="outline"
+                size="icon"
+              >
                 <TrashIcon className="h-4 w-4" />
                 <span className="sr-only">Delete Address</span>
               </Button>
@@ -50,4 +66,4 @@ export const ViewAllDialog: React.FC<ViewAllDialogProps> = ({ title, addresses,
       </div>
     </DialogContent>
   );
-};
\ No newline at end of file
+};
diff --git a/src/hooks/usePayoutMethod.ts b/src/hooks/usePayoutMethod.ts
index fde3aefcc..73421d26a 100644
--- a/src/hooks/usePayoutMethod.ts
+++ b/src/hooks/usePayoutMethod.ts
@@ -1,55 +1,57 @@
-"use client";
+'use client';
 import { useState, useEffect } from 'react';
 import { useAction } from '@/hooks/useAction';
 import { toast } from 'sonner';
 import {
-    deleteSolanaAddress,
-    deleteUpiId,
-    getPayoutMethods,
+  deleteSolanaAddress,
+  deleteUpiId,
+  getPayoutMethods,
 } from '@/actions/payoutMethods';
 import { SolanaAddress, UpiId } from '@prisma/client';
 
 export const usePayoutMethods = () => {
-    const [upiAddresses, setUpiAddresses] = useState<UpiId[] | undefined>([]);
-    const [solanaAddresses, setSolanaAddresses] = useState<SolanaAddress[] | undefined>([]);
+  const [upiAddresses, setUpiAddresses] = useState<UpiId[] | undefined>([]);
+  const [solanaAddresses, setSolanaAddresses] = useState<
+    SolanaAddress[] | undefined
+  >([]);
 
-    const fetchPayoutMethods = async () => {
-        const result = await getPayoutMethods();
-        if (result) {
-            setUpiAddresses(result.upiIds);
-            setSolanaAddresses(result.solanaAddresses);
-        }
-    };
+  const fetchPayoutMethods = async () => {
+    const result = await getPayoutMethods();
+    if (result) {
+      setUpiAddresses(result.upiIds);
+      setSolanaAddresses(result.solanaAddresses);
+    }
+  };
 
-    const { execute: executeDeleteUPI } = useAction(deleteUpiId, {
-        onSuccess: () => {
-            toast.success('UPI Address deleted successfully');
-            fetchPayoutMethods();
-        },
-        onError: () => {
-            toast.error('Failed to delete UPI id');
-        },
-    });
+  const { execute: executeDeleteUPI } = useAction(deleteUpiId, {
+    onSuccess: () => {
+      toast.success('UPI Address deleted successfully');
+      fetchPayoutMethods();
+    },
+    onError: () => {
+      toast.error('Failed to delete UPI id');
+    },
+  });
 
-    const { execute: executeDeleteSolana } = useAction(deleteSolanaAddress, {
-        onSuccess: () => {
-            toast.success('Solana Address deleted successfully');
-            fetchPayoutMethods();
-        },
-        onError: () => {
-            toast.error('Failed to delete Solana address');
-        },
-    });
+  const { execute: executeDeleteSolana } = useAction(deleteSolanaAddress, {
+    onSuccess: () => {
+      toast.success('Solana Address deleted successfully');
+      fetchPayoutMethods();
+    },
+    onError: () => {
+      toast.error('Failed to delete Solana address');
+    },
+  });
 
-    useEffect(() => {
-        fetchPayoutMethods();
-    }, []);
+  useEffect(() => {
+    fetchPayoutMethods();
+  }, []);
 
-    return {
-        upiAddresses,
-        solanaAddresses,
-        fetchPayoutMethods,
-        handleUpiDelete: (id: number) => executeDeleteUPI({ id }),
-        handleSolanaDelete: (id: number) => executeDeleteSolana({ id }),
-    };
-};
\ No newline at end of file
+  return {
+    upiAddresses,
+    solanaAddresses,
+    fetchPayoutMethods,
+    handleUpiDelete: (id: number) => executeDeleteUPI({ id }),
+    handleSolanaDelete: (id: number) => executeDeleteSolana({ id }),
+  };
+};
diff --git a/tsconfig.json b/tsconfig.json
index cec286f06..1f308869a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,14 +16,14 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@public/*": ["./public/*"],
-    },
+      "@public/*": ["./public/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }