From 8c1153ee7e6a28e9e6bbaa27bf718dbf8b359fc2 Mon Sep 17 00:00:00 2001
From: Zafeeruddin <mohammed.xafeer@gmail.com>
Date: Mon, 16 Sep 2024 09:15:20 +0300
Subject: [PATCH] Fixed linting errors

---
 src/app/admin/add-course/page.tsx             | 124 +++++++++++-------
 src/app/admin/comment/ApproveComment.tsx      |  37 +++---
 src/app/admin/comment/page.tsx                |   8 +-
 .../content/[courseId]/[...moduleId]/page.tsx |   2 +-
 src/app/admin/content/[courseId]/page.tsx     |   4 +-
 src/app/admin/discord/page.tsx                |  65 ++++-----
 src/app/admin/layout.tsx                      |  12 +-
 src/app/admin/page.tsx                        |  50 ++++---
 src/app/admin/user/LogoutUser.tsx             |  36 ++---
 src/app/admin/user/page.tsx                   |   6 +-
 src/app/admin/userflags/page.tsx              |  60 ++++-----
 src/components/Navbar.tsx                     |   2 +-
 src/components/admin/AddContent.tsx           | 120 +++++++++--------
 .../admin/ContentRendererClient.tsx           |  30 ++++-
 src/components/admin/UpdateVideoClient.tsx    |  61 +++++----
 src/components/ui/radio-group.tsx             |  16 +--
 16 files changed, 366 insertions(+), 267 deletions(-)

diff --git a/src/app/admin/add-course/page.tsx b/src/app/admin/add-course/page.tsx
index dace4c5a8..d4b6d5609 100644
--- a/src/app/admin/add-course/page.tsx
+++ b/src/app/admin/add-course/page.tsx
@@ -1,12 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Form,
   FormControl,
@@ -29,7 +24,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { Cuboid, PackagePlus } from 'lucide-react';
 import { FaDiscord } from 'react-icons/fa';
 
@@ -86,24 +81,32 @@ export default function Courses() {
 
   return (
     <div className="wrapper my-16 flex flex-col gap-4">
-
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <Cuboid size={18} />
-        <h2 className='text-md font-bold'>View Content</h2>
+        <h2 className="text-md font-bold">View Content</h2>
       </section>
 
-      <Accordion defaultValue='add-new-course' className='border-2 p-4 rounded-2xl' type="single" collapsible>
+      <Accordion
+        defaultValue="add-new-course"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
         <AccordionItem value="add-new-course">
-          <AccordionTrigger className='p-6 text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
-              <PackagePlus size={40} />New course
+          <AccordionTrigger className="p-6 text-2xl font-bold">
+            <div className="flex flex-col gap-4">
+              <PackagePlus size={40} />
+              New course
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='w-full grid grid-cols-1 lg:grid-cols-7'>
-              <div className='text-sm font-semibold text-gray-400 col-span-1 lg:col-span-2 p-6'>Create new course for 100xdevs community and let user explore new courses</div>
-              <div className='col-span-1 lg:col-span-5 p-4'>
-                <Card className='bg-background border-2'>
+            <div className="grid w-full grid-cols-1 lg:grid-cols-7">
+              <div className="col-span-1 p-6 text-sm font-semibold text-gray-400 lg:col-span-2">
+                Create new course for 100xdevs community and let user explore
+                new courses
+              </div>
+              <div className="col-span-1 p-4 lg:col-span-5">
+                <Card className="border-2 bg-background">
                   <CardHeader>
                     {/* <CardTitle>Create a new course</CardTitle> */}
                     <CardTitle>Fill in the course details below</CardTitle>
@@ -121,7 +124,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Title</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Course name" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Course name"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -134,7 +141,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Image url</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the url of Image" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the url of Image"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -144,11 +155,12 @@ export default function Courses() {
                           control={form.control}
                           name="description"
                           render={({ field }: { field: any }) => (
-                            <FormItem className='col-span-1 lg:col-span-2'>
+                            <FormItem className="col-span-1 lg:col-span-2">
                               <FormLabel>Description</FormLabel>
                               <FormControl>
                                 <Textarea
-                                  className='h-12 px-3' placeholder="Enter the Description of course"
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Description of course"
                                   {...field}
                                 />
                               </FormControl>
@@ -163,7 +175,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Slug</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Course slug" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Course slug"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -176,7 +192,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Id</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Course ID" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Course ID"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -189,7 +209,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Admin Secret</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Admin Secret" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Admin Secret"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -203,7 +227,8 @@ export default function Courses() {
                               <FormLabel>app x course id</FormLabel>
                               <FormControl>
                                 <Input
-                                  className='h-12 px-3' placeholder="Enter the appx course ID"
+                                  className="h-12 px-3"
+                                  placeholder="Enter the appx course ID"
                                   {...field}
                                 />
                               </FormControl>
@@ -231,7 +256,9 @@ export default function Courses() {
                           {isLoading ? (
                             <Button>Loading...</Button>
                           ) : (
-                            <Button className='w-[20%]' type="submit">Create</Button>
+                            <Button className="w-[20%]" type="submit">
+                              Create
+                            </Button>
                           )}
                         </div>
                       </form>
@@ -243,24 +270,28 @@ export default function Courses() {
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem className='border-none' value="discord-config">
-          <AccordionTrigger className='p-6 text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
-              <FaDiscord className='text-5xl' /> Discord Config
+        <AccordionItem className="border-none" value="discord-config">
+          <AccordionTrigger className="p-6 text-2xl font-bold">
+            <div className="flex flex-col gap-4">
+              <FaDiscord className="text-5xl" /> Discord Config
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='w-full grid grid-cols-1 lg:grid-cols-7'>
-              <div className='text-sm font-semibold text-gray-400col-span-1 lg:col-span-2 p-6'>Mangae discord configuration for the users</div>
-              <div className='col-span-1 lg:col-span-5 p-4'>
-                <Card className='bg-background'>
+            <div className="grid w-full grid-cols-1 lg:grid-cols-7">
+              <div className="text-gray-400col-span-1 p-6 text-sm font-semibold lg:col-span-2">
+                Mangae discord configuration for the users
+              </div>
+              <div className="col-span-1 p-4 lg:col-span-5">
+                <Card className="bg-background">
                   <CardHeader>
                     <CardTitle>Discord</CardTitle>
                   </CardHeader>
                   <CardContent className="flex flex-col gap-5 lg:flex-row">
-                    <Card className="mx-auto border-2 bg-background w-full max-w-3xl overflow-y-auto">
+                    <Card className="mx-auto w-full max-w-3xl overflow-y-auto border-2 bg-background">
                       <CardHeader>
-                        <CardTitle>Allow user another account in cohort 3</CardTitle>
+                        <CardTitle>
+                          Allow user another account in cohort 3
+                        </CardTitle>
                       </CardHeader>
                       <CardContent className="grid gap-4 p-4 pt-0">
                         <Input
@@ -280,10 +311,13 @@ export default function Courses() {
                         <Button
                           onClick={async () => {
                             try {
-                              const res = await axios.post('/api/admin/discordReset', {
-                                email,
-                                adminPassword,
-                              });
+                              const res = await axios.post(
+                                '/api/admin/discordReset',
+                                {
+                                  email,
+                                  adminPassword,
+                                },
+                              );
                               toast(JSON.stringify(res.data.data));
                             } catch (error) {
                               //@ts-ignore
@@ -295,9 +329,11 @@ export default function Courses() {
                         </Button>
                       </CardContent>
                     </Card>
-                    <Card className="mx-auto border-2 bg-background w-full max-w-3xl overflow-y-auto">
+                    <Card className="mx-auto w-full max-w-3xl overflow-y-auto border-2 bg-background">
                       <CardHeader>
-                        <CardTitle>Get users discord username in cohort 3</CardTitle>
+                        <CardTitle>
+                          Get users discord username in cohort 3
+                        </CardTitle>
                       </CardHeader>
                       <CardContent className="grid gap-4 p-4 pt-0">
                         <Input
@@ -340,9 +376,7 @@ export default function Courses() {
             </div>
           </AccordionContent>
         </AccordionItem>
-
       </Accordion>
-
     </div>
   );
 }
diff --git a/src/app/admin/comment/ApproveComment.tsx b/src/app/admin/comment/ApproveComment.tsx
index 23f7c40a0..4a36bb9ec 100644
--- a/src/app/admin/comment/ApproveComment.tsx
+++ b/src/app/admin/comment/ApproveComment.tsx
@@ -12,7 +12,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { ShieldCheck } from 'lucide-react';
 
 const ApproveComment = () => {
@@ -40,29 +40,37 @@ const ApproveComment = () => {
     });
   };
   return (
-    <div className='w-full h-full'>
-      <Accordion defaultValue='approve-comment' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem className='border-none' value="approve-comment">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+    <div className="h-full w-full">
+      <Accordion
+        defaultValue="approve-comment"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="border-none" value="approve-comment">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <ShieldCheck size={40} /> Approve Comment
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <form className='w-full h-full' onSubmit={handleApprove} ref={formRef}>
-              <div className="grid w-full grid-cols-1 lg:grid-cols-7 p-2 gap-2 rounded-lg border-gray-200 shadow-sm dark:border-gray-800">
-                <div className="col-span-1 lg:col-span-3 flex flex-col gap-2  p-4">
+            <form
+              className="h-full w-full"
+              onSubmit={handleApprove}
+              ref={formRef}
+            >
+              <div className="grid w-full grid-cols-1 gap-2 rounded-lg border-gray-200 p-2 shadow-sm dark:border-gray-800 lg:grid-cols-7">
+                <div className="col-span-1 flex flex-col gap-2 p-4 lg:col-span-3">
                   <div className="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">
                     Enter the information below to approve the comment
                   </div>
                 </div>
 
-                <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
-
+                <aside className="col-span-1 flex flex-col gap-6 p-4 lg:col-span-4">
                   <div className="flex items-center">
                     <Label className="sr-only">Comment ID</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="commentId"
                       name="commentId"
                       placeholder="Content ID; Comment ID"
@@ -75,7 +83,7 @@ const ApproveComment = () => {
                   <div className="flex items-center">
                     <Label className="sr-only">Admin password</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="adminPassword"
                       name="adminPassword"
                       placeholder="Admin password"
@@ -89,16 +97,13 @@ const ApproveComment = () => {
                   <div className="">
                     <Button className="w-full lg:w-[20%]">Approve</Button>
                   </div>
-
                 </aside>
-
               </div>
             </form>
           </AccordionContent>
         </AccordionItem>
       </Accordion>
     </div>
-
   );
 };
 
diff --git a/src/app/admin/comment/page.tsx b/src/app/admin/comment/page.tsx
index bdb8a6528..6c9940940 100644
--- a/src/app/admin/comment/page.tsx
+++ b/src/app/admin/comment/page.tsx
@@ -4,10 +4,10 @@ import { MessageSquare } from 'lucide-react';
 
 const CommentAdminPage = () => {
   return (
-    <div className="flex h-[100dvh] gap-4 flex-col px-4 max-w-7xl mx-auto justify-center">
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
-        <MessageSquare size={18}/>
-        <h2 className='text-md font-bold'>Comments Mangement</h2>
+    <div className="mx-auto flex h-[100dvh] max-w-7xl flex-col justify-center gap-4 px-4">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
+        <MessageSquare size={18} />
+        <h2 className="text-md font-bold">Comments Mangement</h2>
       </section>
       <ApproveComment />
     </div>
diff --git a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
index 1f3a8ee4f..f86be0afd 100644
--- a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
+++ b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
@@ -42,7 +42,7 @@ export default async function UpdateCourseContent({
 
   return (
     <main className="wrapper flex max-w-screen-xl flex-col gap-28">
-      <div className="flex w-full flex-col rounded-lg bg-primary/5 p-4 border-2 justify-between gap-2">
+      <div className="flex w-full flex-col justify-between gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <h1 className="text-3xl font-bold md:text-4xl">Content</h1>
         <p className="text-xl capitalize">{course?.title}</p>
       </div>
diff --git a/src/app/admin/content/[courseId]/page.tsx b/src/app/admin/content/[courseId]/page.tsx
index 4490c1d02..a3ce253bc 100644
--- a/src/app/admin/content/[courseId]/page.tsx
+++ b/src/app/admin/content/[courseId]/page.tsx
@@ -38,9 +38,9 @@ export default async function UpdateCourseContent({
 
   return (
     <main className="wrapper flex max-w-screen-xl flex-col gap-28">
-      <div className="flex w-full rounded-lg bg-primary/5 border-2 p-4 flex-col justify-between gap-2">
+      <div className="flex w-full flex-col justify-between gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <h1 className="text-2xl font-bold md:text-4xl">Content</h1>
-        <p className="text-lg  capitalize">{course?.title}</p>
+        <p className="text-lg capitalize">{course?.title}</p>
       </div>
 
       <AddContent
diff --git a/src/app/admin/discord/page.tsx b/src/app/admin/discord/page.tsx
index 71e296817..bd7b2452e 100644
--- a/src/app/admin/discord/page.tsx
+++ b/src/app/admin/discord/page.tsx
@@ -8,7 +8,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { InfoIcon, RefreshCcw } from 'lucide-react';
 import { FaDiscord } from 'react-icons/fa';
 
@@ -17,33 +17,37 @@ export default function DiscordPage() {
   const [adminSecret, setAdminSecret] = useState('' as any);
   const [userData, setUserData] = useState({} as any);
   return (
-    <div className="flex flex-col w-full max-w-7xl mx-auto justify-around px-4 py-5 gap-6">
-
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
-        <FaDiscord className='text-3xl' />
-        <h2 className='text-md font-bold'>Discord Configuration</h2>
+    <div className="mx-auto flex w-full max-w-7xl flex-col justify-around gap-6 px-4 py-5">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
+        <FaDiscord className="text-3xl" />
+        <h2 className="text-md font-bold">Discord Configuration</h2>
       </section>
-      
-      <Accordion defaultValue='refresh-permission' className='border-2  w-full rounded-2xl' type="single" collapsible>
-        <AccordionItem className='p-4' value="refresh-permission">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 items-start flex-col' >
+
+      <Accordion
+        defaultValue="refresh-permission"
+        className="w-full rounded-2xl border-2"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="p-4" value="refresh-permission">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col items-start gap-4">
               <RefreshCcw size={40} /> Refresh Discord Permission
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className="grid w-full grid-cols-1 lg:grid-cols-7 p-2 gap-2 rounded-lg border-gray-200 shadow-sm dark:border-gray-800">
-              <div className="col-span-1 lg:col-span-3 flex flex-col gap-2 p-4">
+            <div className="grid w-full grid-cols-1 gap-2 rounded-lg border-gray-200 p-2 shadow-sm dark:border-gray-800 lg:grid-cols-7">
+              <div className="col-span-1 flex flex-col gap-2 p-4 lg:col-span-3">
                 <div className="text-md font-medium leading-none text-gray-500 dark:text-gray-400">
-                  User entered discord with wrong email ? Here you can refresh email
+                  User entered discord with wrong email ? Here you can refresh
+                  email
                 </div>
-                <h1 className="text-yellow-500 capitalize">
+                <h1 className="capitalize text-yellow-500">
                   (please delete old user from discord first)
                 </h1>
               </div>
 
-              <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
-
+              <aside className="col-span-1 flex flex-col gap-6 p-4 lg:col-span-4">
                 <Input
                   placeholder="Email"
                   className="h-14"
@@ -59,7 +63,7 @@ export default function DiscordPage() {
                   onChange={(e) => setAdminSecret(e.target.value)}
                 />
                 <Button
-                  className="rounded  px-4 py-2 font-bold text-white lg:w-fit w-full"
+                  className="w-full rounded px-4 py-2 font-bold text-white lg:w-fit"
                   onClick={async () => {
                     const response = await fetch('/api/admin/discord/refresh', {
                       method: 'POST',
@@ -79,45 +83,43 @@ export default function DiscordPage() {
                 >
                   Allow user to re-initiate discord
                 </Button>
-
               </aside>
             </div>
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem className='border-none p-4' value="get-user-info">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+        <AccordionItem className="border-none p-4" value="get-user-info">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <InfoIcon size={40} /> Get User Information
             </div>
           </AccordionTrigger>
           <AccordionContent>
-
-            <div className="grid w-full grid-cols-1 lg:grid-cols-7 p-2 gap-2 rounded-lg border-gray-200 shadow-sm dark:border-gray-800">
-              <div className="col-span-1 lg:col-span-3 flex flex-col gap-2 p-4">
+            <div className="grid w-full grid-cols-1 gap-2 rounded-lg border-gray-200 p-2 shadow-sm dark:border-gray-800 lg:grid-cols-7">
+              <div className="col-span-1 flex flex-col gap-2 p-4 lg:col-span-3">
                 <div className="text-md font-medium leading-none text-gray-500 dark:text-gray-400">
-                  Enter the user email and get user's information just by one click
+                  Enter the user email and get user's information just by one
+                  click
                 </div>
               </div>
 
-              <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
-
+              <aside className="col-span-1 flex flex-col gap-6 p-4 lg:col-span-4">
                 <Input
                   placeholder="Email"
-                  className=" h-14 px-2"
+                  className="h-14 px-2"
                   type=" text"
                   onChange={(e) => {
                     setEmail(e.target.value);
                   }}
                 />
                 <Input
-                  className=" h-14 px-2"
+                  className="h-14 px-2"
                   type="text"
                   placeholder="Admin secret"
                   onChange={(e) => setAdminSecret(e.target.value)}
                 />
                 <Button
-                  className="rounded  px-4 py-2 font-bold text-white  lg:w-[20%] w-full"
+                  className="w-full rounded px-4 py-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     const response = await fetch('/api/admin/discord/', {
                       method: 'POST',
@@ -145,7 +147,6 @@ export default function DiscordPage() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-
     </div>
   );
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 87e6eefc2..616028c5f 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -14,12 +14,20 @@ export default async function AdminLayout({
   }
 
   if (process.env.LOCAL_CMS_PROVIDER) {
-    return <div className="my-[6rem] max-h-full h-[calc(100vh-36px-4rem)]">{children}</div>;
+    return (
+      <div className="my-[6rem] h-[calc(100vh-36px-4rem)] max-h-full">
+        {children}
+      </div>
+    );
   }
 
   if (!process.env.ADMINS?.split(',').includes(session.user.email!)) {
     return notFound();
   }
 
-  return <div className="flex mt-[6rem] max-h-full h-[calc(100vh-36px-4rem)]">{children}</div>;
+  return (
+    <div className="mt-[6rem] flex h-[calc(100vh-36px-4rem)] max-h-full">
+      {children}
+    </div>
+  );
 }
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index ad7da0e30..dd0ba761d 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,6 +1,13 @@
 'use client';
 import { AnimatePresence, motion } from 'framer-motion';
-import { FileText, Flag, LucideIcon, MessageCircle, PackagePlus, Users } from 'lucide-react';
+import {
+  FileText,
+  Flag,
+  LucideIcon,
+  MessageCircle,
+  PackagePlus,
+  Users,
+} from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import React, { useState } from 'react';
@@ -42,7 +49,7 @@ export default function AdminPage() {
     title: string;
     description: string;
     exploreText: string;
-  }
+  };
 
   const cardsData: CardData[] = [
     {
@@ -89,11 +96,16 @@ export default function AdminPage() {
     },
   ];
 
-  const AdminCard: React.FC<CardData> = ({ href, icon: Icon, title, description, exploreText }) => {
+  const AdminCard: React.FC<CardData> = ({
+    href,
+    icon: Icon,
+    title,
+    description,
+    exploreText,
+  }) => {
     const [isHovered, setIsHovered] = useState(false);
 
     return (
-
       <motion.div
         initial={{ y: 50, opacity: 0, filter: 'blur(10px)' }}
         animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
@@ -103,13 +115,13 @@ export default function AdminPage() {
           href={href}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
-          className='h-[15rem] overflow-hidden relative group cursor-pointer hover:border-blue-500 transition-all duration-200 ease-linear flex flex-col items-center justify-center p-4 rounded-lg border-2 w-full'
+          className="group relative flex h-[15rem] w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg border-2 p-4 transition-all duration-200 ease-linear hover:border-blue-500"
         >
-          <div className='border bg-blue-400 bg-opacity-5 rounded-md w-[4rem] h-[3rem] p-2 flex items-center justify-center'>
-            <Icon className='w-6 h-6' />
+          <div className="flex h-[3rem] w-[4rem] items-center justify-center rounded-md border bg-blue-400 bg-opacity-5 p-2">
+            <Icon className="h-6 w-6" />
           </div>
-          <div className='flex flex-col items-center justify-center mt-4 w-full gap-1'>
-            <h1 className='text-xl font-semibold'>{title}</h1>
+          <div className="mt-4 flex w-full flex-col items-center justify-center gap-1">
+            <h1 className="text-xl font-semibold">{title}</h1>
 
             {isHovered && (
               <AnimatePresence>
@@ -118,7 +130,7 @@ export default function AdminPage() {
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: 20 }}
                   transition={{ duration: 0.3 }}
-                  className='text-sm text-gray-400 transition-all duration-200 ease-linear'
+                  className="text-sm text-gray-400 transition-all duration-200 ease-linear"
                 >
                   {description}
                 </motion.p>
@@ -126,7 +138,7 @@ export default function AdminPage() {
             )}
           </div>
 
-          <div className='w-[80%] transition-all duration-500 ease-linear group-hover:bottom-0 text-center text-xs border-2 py-1 absolute -bottom-[60px] border-b-0 px-4 rounded-tr-lg rounded-tl-lg'>
+          <div className="absolute -bottom-[60px] w-[80%] rounded-tl-lg rounded-tr-lg border-2 border-b-0 px-4 py-1 text-center text-xs transition-all duration-500 ease-linear group-hover:bottom-0">
             {exploreText}
           </div>
         </Link>
@@ -135,17 +147,21 @@ export default function AdminPage() {
   };
 
   return (
-    <main className='max-w-[1280px] flex flex-col gap-6 items-center p-4 min-h-full max-h-fit w-full mx-auto'>
-      <section className='w-full flex flex-col gap-2 text-center text-3xl'>
-        <h1>{greeting}, {user?.name}</h1>
-        <h4 className='text-sm text-gray-500'>Welcome! Explore more from below</h4>
+    <main className="mx-auto flex max-h-fit min-h-full w-full max-w-[1280px] flex-col items-center gap-6 p-4">
+      <section className="flex w-full flex-col gap-2 text-center text-3xl">
+        <h1>
+          {greeting}, {user?.name}
+        </h1>
+        <h4 className="text-sm text-gray-500">
+          Welcome! Explore more from below
+        </h4>
       </section>
 
-      <section className='my-4 w-full grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'>
+      <section className="my-4 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {cardsData.map((card, index) => (
           <AdminCard key={index} {...card} />
         ))}
       </section>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/user/LogoutUser.tsx b/src/app/admin/user/LogoutUser.tsx
index a9f8f66eb..fe131472c 100644
--- a/src/app/admin/user/LogoutUser.tsx
+++ b/src/app/admin/user/LogoutUser.tsx
@@ -10,7 +10,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { LogOut } from 'lucide-react';
 
 const LogoutUserComp = () => {
@@ -26,29 +26,37 @@ const LogoutUserComp = () => {
     toast.info(res.message || res.error);
   };
   return (
-
-    <div className='w-full h-full'>
-      <Accordion defaultValue='approve-comment' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem className='border-none' value="approve-comment">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+    <div className="h-full w-full">
+      <Accordion
+        defaultValue="approve-comment"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="border-none" value="approve-comment">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <LogOut size={40} /> Logout User
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <form className='w-full h-full' onSubmit={handlLogout} ref={formRef}>
-              <div className="grid w-full grid-cols-1 md:grid-cols-7 rounded-lg  shadow-sm dark:border-gray-800">
-                <div className="col-span-1 lg:col-span-3 grid gap-2 p-6">
+            <form
+              className="h-full w-full"
+              onSubmit={handlLogout}
+              ref={formRef}
+            >
+              <div className="grid w-full grid-cols-1 rounded-lg shadow-sm dark:border-gray-800 md:grid-cols-7">
+                <div className="col-span-1 grid gap-2 p-6 lg:col-span-3">
                   <div className="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">
                     Enter the information below to logout the user
                   </div>
                 </div>
 
-                <aside className='col-span-1 flex flex-col gap-6 lg:col-span-4 w-full'>
+                <aside className="col-span-1 flex w-full flex-col gap-6 lg:col-span-4">
                   <div className="">
                     <Label className="sr-only">EMAIL</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="email"
                       name="email"
                       placeholder="example@gmail.com"
@@ -60,7 +68,7 @@ const LogoutUserComp = () => {
                   <div className="">
                     <Label className="sr-only">Admin password</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="adminPassword"
                       name="adminPassword"
                       placeholder="Admin password"
@@ -71,14 +79,12 @@ const LogoutUserComp = () => {
                   </div>
                   <Button className="w-full lg:w-[20%]">Logout</Button>
                 </aside>
-
               </div>
             </form>
           </AccordionContent>
         </AccordionItem>
       </Accordion>
     </div>
-
   );
 };
 
diff --git a/src/app/admin/user/page.tsx b/src/app/admin/user/page.tsx
index 370ea914b..19332ab92 100644
--- a/src/app/admin/user/page.tsx
+++ b/src/app/admin/user/page.tsx
@@ -4,10 +4,10 @@ import { UserIcon } from 'lucide-react';
 
 const UserAdminPage = () => {
   return (
-    <div className="flex flex-col gap-4 mx-auto px-4 max-w-7xl h-[100dvh]">
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+    <div className="mx-auto flex h-[100dvh] max-w-7xl flex-col gap-4 px-4">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <UserIcon size={18} />
-        <h2 className='text-md font-bold'>User Mangement</h2>
+        <h2 className="text-md font-bold">User Mangement</h2>
       </section>
       <LogoutUserComp />
     </div>
diff --git a/src/app/admin/userflags/page.tsx b/src/app/admin/userflags/page.tsx
index dc24e2a61..5e2a82efc 100644
--- a/src/app/admin/userflags/page.tsx
+++ b/src/app/admin/userflags/page.tsx
@@ -10,7 +10,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { Cuboid, Flag, ToggleRight } from 'lucide-react';
 
 export default function DiscordPage() {
@@ -19,27 +19,31 @@ export default function DiscordPage() {
   const [adminSecret, setAdminSecret] = useState('');
   const [contentId, setContentId] = useState('');
   return (
-    <div className="flex flex-col w-full max-w-7xl gap-2 px-4 mx-auto">
-
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+    <div className="mx-auto flex w-full max-w-7xl flex-col gap-2 px-4">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <Flag size={18} />
-        <h2 className='text-md font-bold'>User Flags</h2>
+        <h2 className="text-md font-bold">User Flags</h2>
       </section>
 
-      <Accordion defaultValue='toggle-drm' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem className='p-6' value="toggle-drm">
-          <AccordionTrigger className='text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+      <Accordion
+        defaultValue="toggle-drm"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="p-6" value="toggle-drm">
+          <AccordionTrigger className="text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <ToggleRight size={40} /> Toggle DRM
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <section className='grid grid-cols-1 py-4 lg:grid-cols-7 w-full'>
-              <aside className='col-span-2 lg:col-span-3'>
-                <h1 className='text-lg'>Toggle DRM</h1>
+            <section className="grid w-full grid-cols-1 py-4 lg:grid-cols-7">
+              <aside className="col-span-2 lg:col-span-3">
+                <h1 className="text-lg">Toggle DRM</h1>
               </aside>
 
-              <aside className='col-span-1 lg:col-span-4'>
+              <aside className="col-span-1 lg:col-span-4">
                 <form className="flex w-full flex-col gap-5 rounded-xl">
                   <Input
                     placeholder="email"
@@ -59,7 +63,7 @@ export default function DiscordPage() {
                   />
 
                   <Button
-                    className="w-full rounded  px-4 py-2 font-bold text-white"
+                    className="w-full rounded px-4 py-2 font-bold text-white"
                     onClick={async () => {
                       await fetch('/api/admin/drm', {
                         body: JSON.stringify({
@@ -77,7 +81,7 @@ export default function DiscordPage() {
                     Enable DRM
                   </Button>
                   <Button
-                    className="w-full rounded  px-4 py-2 font-bold text-white "
+                    className="w-full rounded px-4 py-2 font-bold text-white"
                     onClick={async () => {
                       await fetch('/api/admin/drm', {
                         body: JSON.stringify({
@@ -97,36 +101,34 @@ export default function DiscordPage() {
                 </form>
               </aside>
             </section>
-
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem className='border-none p-6' value="add-metadata">
-          <AccordionTrigger className='text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+        <AccordionItem className="border-none p-6" value="add-metadata">
+          <AccordionTrigger className="text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <Cuboid size={40} /> Add metadata
             </div>
           </AccordionTrigger>
           <AccordionContent>
-
-            <section className='grid grid-cols-1 py-4 lg:grid-cols-7 w-full'>
-              <aside className='col-span-2 lg:col-span-3'>
-                <h1 className='text-lg'>Add metadata</h1>
+            <section className="grid w-full grid-cols-1 py-4 lg:grid-cols-7">
+              <aside className="col-span-2 lg:col-span-3">
+                <h1 className="text-lg">Add metadata</h1>
               </aside>
 
-              <aside className='col-span-1 lg:col-span-4'>
+              <aside className="col-span-1 lg:col-span-4">
                 <div className="flex flex-col gap-5 rounded-lg">
                   <Textarea
                     // style={{ width: 800 }}
                     rows={10}
                     placeholder="Segments (JSON)"
-                    className=" text-lg "
+                    className="text-lg"
                     onChange={(e) => {
                       setSegmentsJson(e.target.value);
                     }}
                   />
                   <Input
                     placeholder="Admin Secret"
-                    className="h-14 text-lg "
+                    className="h-14 text-lg"
                     type=" text"
                     onChange={(e) => {
                       setAdminSecret(e.target.value);
@@ -134,7 +136,7 @@ export default function DiscordPage() {
                   />
                   <Input
                     placeholder="Content Id"
-                    className="h-14 text-lg "
+                    className="h-14 text-lg"
                     type=" text"
                     onChange={(e) => {
                       setContentId(e.target.value);
@@ -143,7 +145,7 @@ export default function DiscordPage() {
 
                   <h1>JSON is validated in the form.</h1>
                   <Button
-                    className="rounded px-4 py-2 font-bold text-white w-full lg:w-[20%]"
+                    className="w-full rounded px-4 py-2 font-bold text-white lg:w-[20%]"
                     onClick={async () => {
                       if (!isValidJsonString(segmentsJson)) {
                         return toast.warning('Not a valid JSON');
@@ -168,11 +170,9 @@ export default function DiscordPage() {
                 </div>
               </aside>
             </section>
-
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-
     </div>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b922c33bb..c340d1434 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -42,7 +42,7 @@ export const Navbar = () => {
           damping: 10,
           stiffness: 100,
         }}
-        className="fixed z-[999] top-0 w-full border-b border-primary/10 bg-background"
+        className="fixed top-0 z-[999] w-full border-b border-primary/10 bg-background"
       >
         <div className="wrapper flex w-full items-center justify-between p-3">
           <motion.div
diff --git a/src/components/admin/AddContent.tsx b/src/components/admin/AddContent.tsx
index 8cef2d307..1cdd99174 100644
--- a/src/components/admin/AddContent.tsx
+++ b/src/components/admin/AddContent.tsx
@@ -3,11 +3,18 @@ import { useEffect, useState } from 'react';
 import { AddNotionMetadata } from './AddNotionMetadata';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { FaDiscord } from 'react-icons/fa';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 export const AddContent = ({
   rest,
@@ -39,10 +46,9 @@ export const AddContent = ({
   const [loading, setLoading] = useState<boolean>(false);
 
   const getLabelClassName = (value: string) => {
-    return `flex gap-6 p-6 rounded-lg items-center space-x-2 ${type === value
-      ? 'border-[3px] border-blue-500'
-      : 'border-[3px]'
-      }`;
+    return `flex gap-6 p-6 rounded-lg items-center space-x-2 ${
+      type === value ? 'border-[3px] border-blue-500' : 'border-[3px]'
+    }`;
   };
 
   const handleContentSubmit = async () => {
@@ -81,72 +87,72 @@ export const AddContent = ({
   };
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-7 rounded-xl border-2 p-6 gap-4">
-      <aside className='flex flex-col gap-8 col-span-1 lg:col-span-3'>
+    <div className="grid grid-cols-1 gap-4 rounded-xl border-2 p-6 lg:grid-cols-7">
+      <aside className="col-span-1 flex flex-col gap-8 lg:col-span-3">
         <div>Select the Content Mode</div>
 
         <RadioGroup
-          className='flex flex-warp overflow-auto no-scrollbar max-w-full items-start gap-4'
+          className="flex-warp no-scrollbar flex max-w-full items-start gap-4 overflow-auto"
           value={type}
           onValueChange={(value) => {
             setType(value);
             setMetadata({});
           }}
         >
-          <Label htmlFor="video" className={getLabelClassName("video")}>
+          <Label htmlFor="video" className={getLabelClassName('video')}>
             <RadioGroupItem value="video" id="video" />
             <span>Video</span>
           </Label>
-          <Label htmlFor="folder" className={getLabelClassName("folder")}>
+          <Label htmlFor="folder" className={getLabelClassName('folder')}>
             <RadioGroupItem value="folder" id="folder" />
             <span>Folder</span>
           </Label>
-          <Label htmlFor="notion" className={getLabelClassName("notion")}>
+          <Label htmlFor="notion" className={getLabelClassName('notion')}>
             <RadioGroupItem value="notion" id="notion" />
             <span>Notion</span>
           </Label>
         </RadioGroup>
 
-        <div className='border-t-2 my-2 py-6 w-full md:w-[90%] flex flex-col gap-4'>
-          <div className='flex gap-1 flex-col'>
-            <h3 className='text-xl font-bold'>Apps Integrations</h3>
-            <h6 className='text-md text-gray-500'>Click app to start sending notification to that platform</h6>
+        <div className="my-2 flex w-full flex-col gap-4 border-t-2 py-6 md:w-[90%]">
+          <div className="flex flex-col gap-1">
+            <h3 className="text-xl font-bold">Apps Integrations</h3>
+            <h6 className="text-md text-gray-500">
+              Click app to start sending notification to that platform
+            </h6>
           </div>
 
-          {(type === 'video' || type === 'notion') ?
-            (
-              <>
-                <div onClick={handleDiscordClick} className={`p-2 cursor-pointer border-[3px] ${discordChecked ? 'border-blue-500' : ''} bg-blue-400 bg-opacity-5 rounded-lg w-fit`}>
-                  <FaDiscord className='text-5xl' />
-                </div>
-
-                <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                  <DialogContent>
-                    <DialogHeader>
-                      <DialogTitle>Send Notification to Discord?</DialogTitle>
-                      <DialogDescription>
-                        Do you want to send the notification to Discord?
-                      </DialogDescription>
-                    </DialogHeader>
-                    <DialogFooter>
-                      <Button variant="outline" onClick={() => handleModalChoice(false)}>
-                        No
-                      </Button>
-                      <Button onClick={() => handleModalChoice(true)}>
-                        Yes
-                      </Button>
-                    </DialogFooter>
-                  </DialogContent>
-                </Dialog>
-              </>
-
-            )
-            :
-            (
-              <div>No Apps automations available for this option</div>
-            )
-          }
+          {type === 'video' || type === 'notion' ? (
+            <>
+              <div
+                onClick={handleDiscordClick}
+                className={`cursor-pointer border-[3px] p-2 ${discordChecked ? 'border-blue-500' : ''} w-fit rounded-lg bg-blue-400 bg-opacity-5`}
+              >
+                <FaDiscord className="text-5xl" />
+              </div>
 
+              <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Send Notification to Discord?</DialogTitle>
+                    <DialogDescription>
+                      Do you want to send the notification to Discord?
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <Button
+                      variant="outline"
+                      onClick={() => handleModalChoice(false)}
+                    >
+                      No
+                    </Button>
+                    <Button onClick={() => handleModalChoice(true)}>Yes</Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </>
+          ) : (
+            <div>No Apps automations available for this option</div>
+          )}
         </div>
       </aside>
 
@@ -161,24 +167,24 @@ export const AddContent = ({
           Notion
         </Button>
       </div> */}
-      <div className="grid col-span-1 lg:col-span-4 gap-4 grid-cols-1">
+      <div className="col-span-1 grid grid-cols-1 gap-4 lg:col-span-4">
         <Input
           type="text"
           placeholder="Title"
           onChange={(e) => setTitle(e.target.value)}
-          className='h-14'
+          className="h-14"
         />
         <Input
           type="text"
           placeholder="Image url"
           onChange={(e) => setImageUri(e.target.value)}
-          className='h-14'
+          className="h-14"
         />
         <Input
           type="text"
           placeholder="Admin password"
           onChange={(e) => setAdminPassword(e.target.value)}
-          className='h-14'
+          className="h-14"
         />
         {type === 'video' && <AddVideosMetadata onChange={setMetadata} />}
         {type === 'notion' && <AddNotionMetadata onChange={setMetadata} />}
@@ -239,7 +245,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_1080p(e.target.value);
         }}
-        className='h-14'
+        className="h-14"
       />
       <Input
         type="text"
@@ -247,7 +253,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_720p(e.target.value);
         }}
-        className='h-14'
+        className="h-14"
       />
       <Input
         type="text"
@@ -255,7 +261,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_360p(e.target.value);
         }}
-        className='h-14'
+        className="h-14"
       />
     </div>
   );
diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
index 018aecc71..db10aa3fe 100644
--- a/src/components/admin/ContentRendererClient.tsx
+++ b/src/components/admin/ContentRendererClient.tsx
@@ -6,11 +6,13 @@ import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { Button } from '../ui/button';
 import Link from 'next/link';
+import BookmarkButton from '../bookmark/BookmarkButton';
 
 export const ContentRendererClient = ({
   metadata,
   content,
   nextContent,
+  bookmark,
 }: {
   nextContent: {
     id: number;
@@ -26,6 +28,12 @@ export const ContentRendererClient = ({
     description: string;
     markAsCompleted: boolean;
   };
+  bookmark: {
+    id: number;
+    userId: string;
+    contentId: number;
+    createdAt: Date;
+  } | null;
 }) => {
   const [showChapters, setShowChapters] = useState(
     metadata?.segments?.length > 0,
@@ -105,11 +113,23 @@ export const ContentRendererClient = ({
             <h2 className="line-clamp-2 text-wrap text-2xl font-extrabold capitalize tracking-tight text-primary md:text-3xl">
               {content.title}
             </h2>
-            {metadata.slides ? (
-              <Link href={metadata.slides} target="_blank">
-                <Button className="gap-2">Lecture Slides</Button>
-              </Link>
-            ) : null}
+            <div className="flex items-center gap-4">
+              {bookmark !== undefined && content.id && (
+                <BookmarkButton
+                  bookmark={bookmark}
+                  contentId={content.id}
+                  size={36}
+                  align="end"
+                  side="top"
+                />
+              )}
+
+              {metadata.slides ? (
+                <Link href={metadata.slides} target="_blank">
+                  <Button className="gap-2">Lecture Slides</Button>
+                </Link>
+              ) : null}
+            </div>
           </div>
 
           {!showChapters && metadata.segments?.length > 0 && (
diff --git a/src/components/admin/UpdateVideoClient.tsx b/src/components/admin/UpdateVideoClient.tsx
index 83eba6e25..e99975dea 100644
--- a/src/components/admin/UpdateVideoClient.tsx
+++ b/src/components/admin/UpdateVideoClient.tsx
@@ -6,7 +6,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { FileText, Video } from 'lucide-react';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
@@ -36,22 +36,26 @@ export const UpdateVideoClient = ({
   const [vttLink, setVttLink] = useState('');
 
   return (
-    <div className='max-w-7xl mx-auto px-4'>
-
-      <Accordion defaultValue='m3u8-mp4' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem value="m3u8-mp4" >
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+    <div className="mx-auto max-w-7xl px-4">
+      <Accordion
+        defaultValue="m3u8-mp4"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem value="m3u8-mp4">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <Video size={40} /> M3U8 and MP4 Links
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='grid grid-cols-1 p-6 lg:grid-cols-7 w-full gap-4'>
-              <aside className='col-span-1 lg:col-span-3'>
-                <p className='text-lg'>Add Links</p>
+            <div className="grid w-full grid-cols-1 gap-4 p-6 lg:grid-cols-7">
+              <aside className="col-span-1 lg:col-span-3">
+                <p className="text-lg">Add Links</p>
               </aside>
 
-              <aside className='col-span-1 flex flex-col gap-4 lg:col-span-4'>
+              <aside className="col-span-1 flex flex-col gap-4 lg:col-span-4">
                 <Label>M3U8 Links</Label>
                 <Input
                   value={link1080}
@@ -80,7 +84,7 @@ export const UpdateVideoClient = ({
                   placeholder={'m3u8 360p'}
                 />
 
-                <Label className='mt-4'>MP4 Links</Label>
+                <Label className="mt-4">MP4 Links</Label>
 
                 <Input
                   value={link1080_mp4}
@@ -109,7 +113,7 @@ export const UpdateVideoClient = ({
                   placeholder={'m3u8 360p'}
                 />
                 <Button
-                  className="my-4 rounded  p-2 font-bold text-white w-full lg:w-[20%]"
+                  className="my-4 w-full rounded p-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     await axios.post('/api/admin/updatecontent', {
                       contentId: content.id,
@@ -132,18 +136,18 @@ export const UpdateVideoClient = ({
         </AccordionItem>
 
         <AccordionItem value="slides">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <FileText size={40} /> Slides Links
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='grid grid-cols-1  p-6 lg:grid-cols-7 w-full gap-4'>
-              <aside className='col-span-1 lg:col-span-3'>
-                <p className='text-lg'>Add Links</p>
+            <div className="grid w-full grid-cols-1 gap-4 p-6 lg:grid-cols-7">
+              <aside className="col-span-1 lg:col-span-3">
+                <p className="text-lg">Add Links</p>
               </aside>
 
-              <aside className='col-span-1 flex flex-col gap-4 lg:col-span-4'>
+              <aside className="col-span-1 flex flex-col gap-4 lg:col-span-4">
                 <Input
                   value={pdfLink}
                   type="text"
@@ -153,7 +157,7 @@ export const UpdateVideoClient = ({
                   placeholder={'pdf link'}
                 />
                 <Button
-                  className="my-4 rounded p-2 font-bold text-white w-full lg:w-[20%]"
+                  className="my-4 w-full rounded p-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     await axios.post('/api/admin/contentmetadata', {
                       contentId: content.id,
@@ -169,19 +173,19 @@ export const UpdateVideoClient = ({
             </div>
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem className='border-none' value="vtt">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+        <AccordionItem className="border-none" value="vtt">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <FileText size={40} /> VTT Link
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='grid grid-cols-1 p-6 lg:grid-cols-7 w-full gap-4'>
-              <aside className='col-span-1 lg:col-span-3'>
-                <p className='text-lg'>Add Links</p>
+            <div className="grid w-full grid-cols-1 gap-4 p-6 lg:grid-cols-7">
+              <aside className="col-span-1 lg:col-span-3">
+                <p className="text-lg">Add Links</p>
               </aside>
 
-              <aside className='col-span-1 lg:col-span-4'>
+              <aside className="col-span-1 lg:col-span-4">
                 <Input
                   value={vttLink}
                   type="text"
@@ -191,7 +195,7 @@ export const UpdateVideoClient = ({
                   placeholder={'vtt link'}
                 />
                 <Button
-                  className="my-4 rounded  p-2 font-bold text-white w-full lg:w-[20%]"
+                  className="my-4 w-full rounded p-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     await axios.post('/api/admin/contentmetadata', {
                       contentId: content.id,
@@ -208,7 +212,6 @@ export const UpdateVideoClient = ({
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-
     </div>
   );
 };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index cb8a4e28c..f92eb156a 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -12,7 +12,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn('grid gap-2', className)}
       {...props}
       ref={ref}
     />
@@ -28,8 +28,8 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     >