From bd1f02996ff967fa47af1a08ab3cd820103fb078 Mon Sep 17 00:00:00 2001
From: Aman Kumar Bairagi <118182376+amanbairagi30@users.noreply.github.com>
Date: Fri, 13 Sep 2024 02:44:12 +0530
Subject: [PATCH] Revamp Admin UI & Discord Notifcation (#1181)

* revamped admin ui and added discord notifications

* updated the video client component

* some lint fix

* minor change in .env.example

* Update src/app/api/admin/content/route.ts

---------

Co-authored-by: Sargam <sargampoudel100@gmail.com>
---
 .env.example                                  |   1 +
 package.json                                  |   3 +-
 src/app/admin/add-course/page.tsx             | 348 ++++++++++++++
 src/app/admin/comment/ApproveComment.tsx      | 104 +++--
 src/app/admin/comment/page.tsx                |   7 +-
 .../content/[courseId]/[...moduleId]/page.tsx |   6 +-
 src/app/admin/content/[courseId]/page.tsx     |  10 +-
 src/app/admin/discord/page.tsx                | 224 +++++----
 src/app/admin/layout.tsx                      |   4 +-
 src/app/admin/page.tsx                        | 431 ++++++------------
 src/app/admin/user/LogoutUser.tsx             |  98 ++--
 src/app/admin/user/page.tsx                   |   7 +-
 src/app/admin/userflags/page.tsx              | 267 ++++++-----
 src/app/api/admin/content/route.ts            |  85 +++-
 src/app/globals.css                           |  12 +
 src/components/Navbar.tsx                     |   2 +-
 src/components/admin/AddContent.tsx           | 181 ++++++--
 src/components/admin/UpdateVideoClient.tsx    | 302 +++++++-----
 src/components/ui/radio-group.tsx             |  44 ++
 19 files changed, 1407 insertions(+), 729 deletions(-)
 create mode 100644 src/app/admin/add-course/page.tsx
 create mode 100644 src/components/ui/radio-group.tsx

diff --git a/.env.example b/.env.example
index 5bc2afbce..53179cb37 100644
--- a/.env.example
+++ b/.env.example
@@ -21,6 +21,7 @@ NEXT_PUBLIC_DISABLE_FEATURES = "featurea,featureb,featurec"
 REDIS_URL=
 GITHUB_ID=
 GITHUB_SECRET=
+NEXT_PUBLIC_DISCORD_WEBHOOK_URL =
 
 
 COHORT3_DISCORD_ACCESS_KEY = 
diff --git a/package.json b/package.json
index b1454d812..f26aa8e56 100644
--- a/package.json
+++ b/package.json
@@ -47,10 +47,11 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.14.0",
     "@types/bcrypt": "^5.0.2",
diff --git a/src/app/admin/add-course/page.tsx b/src/app/admin/add-course/page.tsx
new file mode 100644
index 000000000..dace4c5a8
--- /dev/null
+++ b/src/app/admin/add-course/page.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import axios from 'axios';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Cuboid, PackagePlus } from 'lucide-react';
+import { FaDiscord } from 'react-icons/fa';
+
+const courseSchema = z.object({
+  title: z.string().min(5, {
+    message: 'Title must be at least 5 characters long.',
+  }),
+  imageUrl: z.string().url({
+    message: 'Invalid URL format for imageUrl.',
+  }),
+  description: z.string().min(8, {
+    message: 'Description must be at least of 8 characters long.',
+  }),
+  slug: z.string(),
+  id: z.string(),
+  adminSecret: z.string(),
+  appxCourseId: z.string(),
+  discordRoleId: z.string(),
+});
+
+export default function Courses() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [adminPassword, setAdminPassword] = useState('');
+
+  const form = useForm<z.infer<typeof courseSchema>>({
+    resolver: zodResolver(courseSchema),
+    defaultValues: {
+      title: '',
+      imageUrl: '',
+      description: '',
+      slug: '',
+      id: '',
+      adminSecret: '',
+      appxCourseId: '',
+      discordRoleId: '',
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof courseSchema>) => {
+    setIsLoading(true);
+    try {
+      await axios.post('/api/admin/course', data);
+      toast('course succesfully created');
+      router.push('/');
+    } catch (error: any) {
+      console.log(error);
+      toast(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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'>
+        <Cuboid size={18} />
+        <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>
+        <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
+            </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'>
+                  <CardHeader>
+                    {/* <CardTitle>Create a new course</CardTitle> */}
+                    <CardTitle>Fill in the course details below</CardTitle>
+                  </CardHeader>
+                  <CardContent className="grid gap-4 p-4 pt-0">
+                    <Form {...form}>
+                      <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="grid gap-4 lg:grid-cols-2"
+                      >
+                        <FormField
+                          control={form.control}
+                          name="title"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>Title</FormLabel>
+                              <FormControl>
+                                <Input className='h-12 px-3' placeholder="Enter the Course name" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="imageUrl"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>Image url</FormLabel>
+                              <FormControl>
+                                <Input className='h-12 px-3' placeholder="Enter the url of Image" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="description"
+                          render={({ field }: { field: any }) => (
+                            <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"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="slug"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>Slug</FormLabel>
+                              <FormControl>
+                                <Input className='h-12 px-3' placeholder="Enter the Course slug" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="id"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>Id</FormLabel>
+                              <FormControl>
+                                <Input className='h-12 px-3' placeholder="Enter the Course ID" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="adminSecret"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>Admin Secret</FormLabel>
+                              <FormControl>
+                                <Input className='h-12 px-3' placeholder="Enter the Admin Secret" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="appxCourseId"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>app x course id</FormLabel>
+                              <FormControl>
+                                <Input
+                                  className='h-12 px-3' placeholder="Enter the appx course ID"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="discordRoleId"
+                          render={({ field }: { field: any }) => (
+                            <FormItem>
+                              <FormLabel>Discord Role Id</FormLabel>
+                              <FormControl>
+                                <Input
+                                  placeholder="Enter the Discord Role Id"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <div className="lg:col-span-2">
+                          {isLoading ? (
+                            <Button>Loading...</Button>
+                          ) : (
+                            <Button className='w-[20%]' type="submit">Create</Button>
+                          )}
+                        </div>
+                      </form>
+                    </Form>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </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
+            </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'>
+                  <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">
+                      <CardHeader>
+                        <CardTitle>Allow user another account in cohort 3</CardTitle>
+                      </CardHeader>
+                      <CardContent className="grid gap-4 p-4 pt-0">
+                        <Input
+                          type="text"
+                          placeholder="Email"
+                          onChange={(e) => {
+                            setEmail(e.target.value);
+                          }}
+                        ></Input>
+                        <Input
+                          type="text"
+                          placeholder="Admin Password"
+                          onChange={(e) => {
+                            setAdminPassword(e.target.value);
+                          }}
+                        ></Input>
+                        <Button
+                          onClick={async () => {
+                            try {
+                              const res = await axios.post('/api/admin/discordReset', {
+                                email,
+                                adminPassword,
+                              });
+                              toast(JSON.stringify(res.data.data));
+                            } catch (error) {
+                              //@ts-ignore
+                              toast.error(error.response.data.message);
+                            }
+                          }}
+                        >
+                          Reset
+                        </Button>
+                      </CardContent>
+                    </Card>
+                    <Card className="mx-auto border-2 bg-background w-full max-w-3xl overflow-y-auto">
+                      <CardHeader>
+                        <CardTitle>Get users discord username in cohort 3</CardTitle>
+                      </CardHeader>
+                      <CardContent className="grid gap-4 p-4 pt-0">
+                        <Input
+                          type="text"
+                          placeholder="Email"
+                          onChange={(e) => {
+                            setEmail(e.target.value);
+                          }}
+                        ></Input>
+                        <Input
+                          type="text"
+                          placeholder="Admin Password"
+                          onChange={(e) => {
+                            setAdminPassword(e.target.value);
+                          }}
+                        ></Input>
+                        <Button
+                          onClick={async () => {
+                            try {
+                              const res = await axios.post(
+                                '/api/admin/discordReset/get',
+                                {
+                                  email,
+                                  adminPassword,
+                                },
+                              );
+                              alert(JSON.stringify(res.data));
+                            } catch (error: any) {
+                              toast.error(error.response.data.message);
+                            }
+                          }}
+                        >
+                          Get
+                        </Button>
+                      </CardContent>
+                    </Card>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+      </Accordion>
+
+    </div>
+  );
+}
diff --git a/src/app/admin/comment/ApproveComment.tsx b/src/app/admin/comment/ApproveComment.tsx
index cf587bb44..23f7c40a0 100644
--- a/src/app/admin/comment/ApproveComment.tsx
+++ b/src/app/admin/comment/ApproveComment.tsx
@@ -7,6 +7,13 @@ import { useAction } from '@/hooks/useAction';
 import { Label } from '@radix-ui/react-dropdown-menu';
 import React from 'react';
 import { toast } from 'sonner';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { ShieldCheck } from 'lucide-react';
 
 const ApproveComment = () => {
   const formRef = React.useRef<HTMLFormElement>(null);
@@ -33,46 +40,65 @@ const ApproveComment = () => {
     });
   };
   return (
-    <form onSubmit={handleApprove} ref={formRef}>
-      <div className="grid w-full max-w-sm grid-rows-5 rounded-lg border border-gray-200 shadow-sm dark:border-gray-800">
-        <div className="row-span-3 grid items-center gap-2 p-6">
-          <div className="text-3xl font-bold">Approve Intro comment</div>
-          <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>
+    <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' >
+              <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">
+                  <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 '>
+
+                  <div className="flex items-center">
+                    <Label className="sr-only">Comment ID</Label>
+                    <Input
+                      className="w-full h-14 px-2"
+                      id="commentId"
+                      name="commentId"
+                      placeholder="Content ID; Comment ID"
+                      style={{
+                        minWidth: '0',
+                      }}
+                    />
+                    <FormErrors id="commentId" errors={fieldErrors} />
+                  </div>
+                  <div className="flex items-center">
+                    <Label className="sr-only">Admin password</Label>
+                    <Input
+                      className="w-full h-14 px-2"
+                      id="adminPassword"
+                      name="adminPassword"
+                      placeholder="Admin password"
+                      style={{
+                        minWidth: '0',
+                      }}
+                    />
+                    <FormErrors id="adminPassword" errors={fieldErrors} />
+                  </div>
+
+                  <div className="">
+                    <Button className="w-full lg:w-[20%]">Approve</Button>
+                  </div>
+
+                </aside>
+
+              </div>
+            </form>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
 
-        <div className="row-span-2 flex items-center p-6">
-          <Label className="sr-only">Comment ID</Label>
-          <Input
-            className="w-full"
-            id="commentId"
-            name="commentId"
-            placeholder="Content ID; Comment ID"
-            style={{
-              minWidth: '0',
-            }}
-          />
-          <FormErrors id="commentId" errors={fieldErrors} />
-        </div>
-        <div className="row-span-2 flex items-center p-6">
-          <Label className="sr-only">Admin password</Label>
-          <Input
-            className="w-full"
-            id="adminPassword"
-            name="adminPassword"
-            placeholder="Admin password"
-            style={{
-              minWidth: '0',
-            }}
-          />
-          <FormErrors id="adminPassword" errors={fieldErrors} />
-        </div>
-        <div className="row-span-2 flex items-center justify-center p-6">
-          <Button className="w-full">Approve</Button>
-        </div>
-      </div>
-    </form>
   );
 };
 
diff --git a/src/app/admin/comment/page.tsx b/src/app/admin/comment/page.tsx
index 7df9b32cc..bdb8a6528 100644
--- a/src/app/admin/comment/page.tsx
+++ b/src/app/admin/comment/page.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import ApproveComment from './ApproveComment';
+import { MessageSquare } from 'lucide-react';
 
 const CommentAdminPage = () => {
   return (
-    <div className="flex h-[100dvh] items-center justify-center">
+    <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>
+      </section>
       <ApproveComment />
     </div>
   );
diff --git a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
index d3d12ccb5..1f3a8ee4f 100644
--- a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
+++ b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
@@ -41,13 +41,15 @@ export default async function UpdateCourseContent({
   }
 
   return (
-    <main className="wrapper flex max-w-screen-xl flex-col justify-between gap-8">
-      <div className="flex w-full flex-col justify-between gap-2">
+    <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">
         <h1 className="text-3xl font-bold md:text-4xl">Content</h1>
         <p className="text-xl capitalize">{course?.title}</p>
       </div>
 
       <AddContent
+        rest={rest}
+        courseTitle={course?.title}
         courseId={parseInt(courseId, 10)}
         parentContentId={parseFloat(rest[rest.length - 1])}
       />
diff --git a/src/app/admin/content/[courseId]/page.tsx b/src/app/admin/content/[courseId]/page.tsx
index 36137a130..4490c1d02 100644
--- a/src/app/admin/content/[courseId]/page.tsx
+++ b/src/app/admin/content/[courseId]/page.tsx
@@ -37,15 +37,17 @@ export default async function UpdateCourseContent({
   }
 
   return (
-    <main className="wrapper flex max-w-screen-xl flex-col justify-between gap-8">
-      <div className="flex w-full flex-col justify-between gap-2">
-        <h1 className="text-3xl font-bold md:text-4xl">Content</h1>
-        <p className="text-xl capitalize">{course?.title}</p>
+    <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">
+        <h1 className="text-2xl font-bold md:text-4xl">Content</h1>
+        <p className="text-lg  capitalize">{course?.title}</p>
       </div>
 
       <AddContent
+        rest={rest}
         courseId={parseInt(courseId, 10)}
         parentContentId={parseFloat(rest[rest.length - 1])}
+        courseTitle={course.title}
       />
       <AdminCourseContent
         rest={rest}
diff --git a/src/app/admin/discord/page.tsx b/src/app/admin/discord/page.tsx
index 197843a64..71e296817 100644
--- a/src/app/admin/discord/page.tsx
+++ b/src/app/admin/discord/page.tsx
@@ -3,103 +3,149 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { InfoIcon, RefreshCcw } from 'lucide-react';
+import { FaDiscord } from 'react-icons/fa';
 
 export default function DiscordPage() {
   const [email, setEmail] = useState('');
   const [adminSecret, setAdminSecret] = useState('' as any);
   const [userData, setUserData] = useState({} as any);
   return (
-    <div className="flex flex-col justify-around px-10 py-5 md:flex-row">
-      <div className="flex flex-col justify-self-center rounded-lg border p-5">
-        <h1 className="text-xl sm:text-2xl md:text-4xl">
-          Refresh discord permissions
-        </h1>
-        <br />
-        <Input
-          placeholder="email"
-          className="text-black"
-          type=" text"
-          onChange={(e) => {
-            setEmail(e.target.value);
-          }}
-        />
-        <br />
-        <Input
-          className="text-black"
-          type="text"
-          placeholder="adminSecret"
-          onChange={(e) => setAdminSecret(e.target.value)}
-        />
-        <br />
-        <Button
-          className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-          onClick={async () => {
-            const response = await fetch('/api/admin/discord/refresh', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                email,
-                adminSecret,
-              }),
-            });
-            const json = await response.json();
-            if (response.status !== 200) {
-              toast.warning(`Something went wrong ${json.msg}`);
-            }
-          }}
-        >
-          Allow user to re-initiate discord
-        </Button>
-        <br />
-        <h1 className="text-center capitalize">
-          please delete old user from discord first
-        </h1>
-      </div>
+    <div className="flex flex-col w-full max-w-7xl mx-auto justify-around px-4 py-5 gap-6">
 
-      <br />
-      <div className="flex flex-col gap-2 rounded-lg border p-5">
-        <h1 className="text-xl sm:text-2xl md:text-4xl">Get information</h1>
-        <Input
-          placeholder="email"
-          className="text-black"
-          type=" text"
-          onChange={(e) => {
-            setEmail(e.target.value);
-          }}
-        />
-        <Input
-          className="text-black"
-          type="text"
-          placeholder="adminSecret"
-          onChange={(e) => setAdminSecret(e.target.value)}
-        />
-        <Button
-          className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-          onClick={async () => {
-            const response = await fetch('/api/admin/discord/', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                email,
-                adminSecret,
-              }),
-            });
-            const json = await response.json();
-            if (response.status !== 200) {
-              toast.warning(`Something went wrong ${json.msg}`);
-            }
-            setUserData(json.data);
-          }}
-        >
-          Get information
-        </Button>
+      <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>
+      </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' >
+              <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="text-md font-medium leading-none text-gray-500 dark:text-gray-400">
+                  User entered discord with wrong email ? Here you can refresh email
+                </div>
+                <h1 className="text-yellow-500 capitalize">
+                  (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 '>
+
+                <Input
+                  placeholder="Email"
+                  className="h-14"
+                  type=" text"
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                  }}
+                />
+                <Input
+                  className="h-14"
+                  type="text"
+                  placeholder="adminSecret"
+                  onChange={(e) => setAdminSecret(e.target.value)}
+                />
+                <Button
+                  className="rounded  px-4 py-2 font-bold text-white lg:w-fit w-full"
+                  onClick={async () => {
+                    const response = await fetch('/api/admin/discord/refresh', {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
+                      body: JSON.stringify({
+                        email,
+                        adminSecret,
+                      }),
+                    });
+                    const json = await response.json();
+                    if (response.status !== 200) {
+                      toast.warning(`Something went wrong ${json.msg}`);
+                    }
+                  }}
+                >
+                  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' >
+              <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="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
+                </div>
+              </div>
+
+              <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
+
+                <Input
+                  placeholder="Email"
+                  className=" h-14 px-2"
+                  type=" text"
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                  }}
+                />
+                <Input
+                  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"
+                  onClick={async () => {
+                    const response = await fetch('/api/admin/discord/', {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
+                      body: JSON.stringify({
+                        email,
+                        adminSecret,
+                      }),
+                    });
+                    const json = await response.json();
+                    if (response.status !== 200) {
+                      toast.warning(`Something went wrong ${json.msg}`);
+                    }
+                    setUserData(json.data);
+                  }}
+                >
+                  Get information
+                </Button>
+
+                <h1 className="text-xl">{userData?.username}</h1>
+              </aside>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
 
-        <h1 className="text-xl">{userData?.username}</h1>
-      </div>
     </div>
   );
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 2d4a38907..87e6eefc2 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -14,12 +14,12 @@ export default async function AdminLayout({
   }
 
   if (process.env.LOCAL_CMS_PROVIDER) {
-    return <>{children}</>;
+    return <div className="my-[6rem] max-h-full h-[calc(100vh-36px-4rem)]">{children}</div>;
   }
 
   if (!process.env.ADMINS?.split(',').includes(session.user.email!)) {
     return notFound();
   }
 
-  return <div className="flex min-h-screen">{children}</div>;
+  return <div className="flex mt-[6rem] max-h-full h-[calc(100vh-36px-4rem)]">{children}</div>;
 }
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 0c824e6c5..ad7da0e30 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,302 +1,151 @@
 'use client';
+import { AnimatePresence, motion } from 'framer-motion';
+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';
 
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import axios from 'axios';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
+export default function AdminPage() {
+  const session = useSession();
+  const user = session?.data?.user;
 
-const courseSchema = z.object({
-  title: z.string().min(5, {
-    message: 'Title must be at least 5 characters long.',
-  }),
-  imageUrl: z.string().url({
-    message: 'Invalid URL format for imageUrl.',
-  }),
-  description: z.string().min(8, {
-    message: 'Description must be at least of 8 characters long.',
-  }),
-  slug: z.string(),
-  id: z.string(),
-  adminSecret: z.string(),
-  appxCourseId: z.string(),
-  discordRoleId: z.string(),
-});
+  const currentHour = new Date().getHours();
+  let greeting = 'Good Morning';
+  if (currentHour >= 12 && currentHour < 18) {
+    greeting = 'Good Afternoon';
+  } else if (currentHour >= 18 || currentHour < 5) {
+    greeting = 'Good Evening';
+  }
 
-export default function Courses() {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const router = useRouter();
-  const [email, setEmail] = useState('');
-  const [adminPassword, setAdminPassword] = useState('');
+  const DiscordIcon: React.FC<{ className?: string }> = ({ className }) => (
+    <svg
+      viewBox="0 -28.5 256 256"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      preserveAspectRatio="xMidYMid"
+      className={className}
+    >
+      <g>
+        <path
+          d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+          fill="currentColor"
+          fillRule="nonzero"
+        />
+      </g>
+    </svg>
+  );
+
+  type CardData = {
+    href: string;
+    icon: LucideIcon | typeof DiscordIcon;
+    title: string;
+    description: string;
+    exploreText: string;
+  }
 
-  const form = useForm<z.infer<typeof courseSchema>>({
-    resolver: zodResolver(courseSchema),
-    defaultValues: {
-      title: '',
-      imageUrl: '',
-      description: '',
-      slug: '',
-      id: '',
-      adminSecret: '',
-      appxCourseId: '',
-      discordRoleId: '',
+  const cardsData: CardData[] = [
+    {
+      href: '/admin/add-course',
+      icon: PackagePlus,
+      title: 'Add Course',
+      description: 'Proceed to add new course',
+      exploreText: 'Explore more!',
+    },
+    {
+      href: '/admin/content',
+      icon: FileText,
+      title: 'View Content',
+      description: 'Browse and manage existing content',
+      exploreText: 'Discover more!',
+    },
+    {
+      href: '/admin/discord',
+      icon: DiscordIcon,
+      title: 'Discord Configuration',
+      description: 'Set up and manage Discord integration',
+      exploreText: 'Configure now!',
+    },
+    {
+      href: '/admin/comment',
+      icon: MessageCircle,
+      title: 'Comments Management',
+      description: 'Moderate and manage user comments',
+      exploreText: 'Manage comments!',
+    },
+    {
+      href: '/admin/user',
+      icon: Users,
+      title: 'User Management',
+      description: 'Manage user accounts and permissions',
+      exploreText: 'Manage users!',
     },
-  });
+    {
+      href: '/admin/userflags',
+      icon: Flag,
+      title: 'User Flags',
+      description: 'Review and handle user flags and reports',
+      exploreText: 'Check flags!',
+    },
+  ];
+
+  const AdminCard: React.FC<CardData> = ({ href, icon: Icon, title, description, exploreText }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
 
-  const onSubmit = async (data: z.infer<typeof courseSchema>) => {
-    setIsLoading(true);
-    try {
-      await axios.post('/api/admin/course', data);
-      toast('course succesfully created');
-      router.push('/');
-    } catch (error: any) {
-      console.log(error);
-      toast(error.message);
-    } finally {
-      setIsLoading(false);
-    }
+      <motion.div
+        initial={{ y: 50, opacity: 0, filter: 'blur(10px)' }}
+        animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
+        transition={{ duration: 0.5, ease: 'linear' }}
+      >
+        <Link
+          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'
+        >
+          <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>
+          <div className='flex flex-col items-center justify-center mt-4 w-full gap-1'>
+            <h1 className='text-xl font-semibold'>{title}</h1>
+
+            {isHovered && (
+              <AnimatePresence>
+                <motion.p
+                  initial={{ opacity: 0, y: 20 }}
+                  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'
+                >
+                  {description}
+                </motion.p>
+              </AnimatePresence>
+            )}
+          </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'>
+            {exploreText}
+          </div>
+        </Link>
+      </motion.div>
+    );
   };
 
   return (
-    <div className="wrapper my-16 flex flex-col gap-4">
-      <Card>
-        <CardHeader>
-          <CardTitle>Create a new course</CardTitle>
-          <CardDescription>Fill in the course details below</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4 p-4 pt-0">
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(onSubmit)}
-              className="grid gap-4 lg:grid-cols-2"
-            >
-              <FormField
-                control={form.control}
-                name="title"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Title</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Enter the Course name" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="imageUrl"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Image url</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Enter the url of Image" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Description</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Enter the Description of course"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="slug"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Slug</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Enter the Course slug" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="id"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Id</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Enter the Course ID" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="adminSecret"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Admin Secret</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Enter the Admin Secret" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="appxCourseId"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>app x course id</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Enter the appx course ID"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="discordRoleId"
-                render={({ field }: { field: any }) => (
-                  <FormItem>
-                    <FormLabel>Discord Role Id</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Enter the Discord Role Id"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <div className="lg:col-span-2">
-                {isLoading ? (
-                  <Button>Loading...</Button>
-                ) : (
-                  <Button type="submit">Create</Button>
-                )}
-              </div>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Discord</CardTitle>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-5 lg:flex-row">
-          <Card className="mx-auto w-full max-w-3xl overflow-y-auto">
-            <CardHeader>
-              <CardTitle>Allow user another account in cohort 3</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-4 p-4 pt-0">
-              <Input
-                type="text"
-                placeholder="Email"
-                onChange={(e) => {
-                  setEmail(e.target.value);
-                }}
-              ></Input>
-              <Input
-                type="text"
-                placeholder="Admin Password"
-                onChange={(e) => {
-                  setAdminPassword(e.target.value);
-                }}
-              ></Input>
-              <Button
-                onClick={async () => {
-                  try {
-                    const res = await axios.post('/api/admin/discordReset', {
-                      email,
-                      adminPassword,
-                    });
-                    toast(JSON.stringify(res.data.data));
-                  } catch (error) {
-                    //@ts-ignore
-                    toast.error(error.response.data.message);
-                  }
-                }}
-              >
-                Reset
-              </Button>
-            </CardContent>
-          </Card>
-          <Card className="mx-auto w-full max-w-3xl overflow-y-auto">
-            <CardHeader>
-              <CardTitle>Get users discord username in cohort 3</CardTitle>
-            </CardHeader>
-            <CardContent className="grid gap-4 p-4 pt-0">
-              <Input
-                type="text"
-                placeholder="Email"
-                onChange={(e) => {
-                  setEmail(e.target.value);
-                }}
-              ></Input>
-              <Input
-                type="text"
-                placeholder="Admin Password"
-                onChange={(e) => {
-                  setAdminPassword(e.target.value);
-                }}
-              ></Input>
-              <Button
-                onClick={async () => {
-                  try {
-                    const res = await axios.post(
-                      '/api/admin/discordReset/get',
-                      {
-                        email,
-                        adminPassword,
-                      },
-                    );
-                    alert(JSON.stringify(res.data));
-                  } catch (error: any) {
-                    toast.error(error.response.data.message);
-                  }
-                }}
-              >
-                Get
-              </Button>
-            </CardContent>
-          </Card>
-        </CardContent>
-      </Card>
-    </div>
+    <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>
+      </section>
+
+      <section className='my-4 w-full grid gap-4 grid-cols-1 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 94568dc1f..a9f8f66eb 100644
--- a/src/app/admin/user/LogoutUser.tsx
+++ b/src/app/admin/user/LogoutUser.tsx
@@ -5,6 +5,13 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@radix-ui/react-dropdown-menu';
 import React from 'react';
 import { toast } from 'sonner';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { LogOut } from 'lucide-react';
 
 const LogoutUserComp = () => {
   const formRef = React.useRef<HTMLFormElement>(null);
@@ -19,44 +26,59 @@ const LogoutUserComp = () => {
     toast.info(res.message || res.error);
   };
   return (
-    <form onSubmit={handlLogout} ref={formRef}>
-      <div className="grid w-full max-w-sm grid-rows-5 rounded-lg border border-gray-200 shadow-sm dark:border-gray-800">
-        <div className="row-span-3 grid items-center gap-2 p-6">
-          <div className="text-3xl font-bold">Logout the user</div>
-          <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>
-
-        <div className="row-span-2 flex items-center p-6">
-          <Label className="sr-only">EMAIL</Label>
-          <Input
-            className="w-full"
-            id="email"
-            name="email"
-            placeholder="example@gmail.com"
-            style={{
-              minWidth: '0',
-            }}
-          />
-        </div>
-        <div className="row-span-2 flex items-center p-6">
-          <Label className="sr-only">Admin password</Label>
-          <Input
-            className="w-full"
-            id="adminPassword"
-            name="adminPassword"
-            placeholder="Admin password"
-            style={{
-              minWidth: '0',
-            }}
-          />
-        </div>
-        <div className="row-span-2 flex items-center justify-center p-6">
-          <Button className="w-full">Logout</Button>
-        </div>
-      </div>
-    </form>
+
+    <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' >
+              <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">
+                  <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'>
+                  <div className="">
+                    <Label className="sr-only">EMAIL</Label>
+                    <Input
+                      className="w-full h-14 px-2"
+                      id="email"
+                      name="email"
+                      placeholder="example@gmail.com"
+                      style={{
+                        minWidth: '0',
+                      }}
+                    />
+                  </div>
+                  <div className="">
+                    <Label className="sr-only">Admin password</Label>
+                    <Input
+                      className="w-full h-14 px-2"
+                      id="adminPassword"
+                      name="adminPassword"
+                      placeholder="Admin password"
+                      style={{
+                        minWidth: '0',
+                      }}
+                    />
+                  </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 a015aa2d5..370ea914b 100644
--- a/src/app/admin/user/page.tsx
+++ b/src/app/admin/user/page.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import LogoutUserComp from './LogoutUser';
+import { UserIcon } from 'lucide-react';
 
 const UserAdminPage = () => {
   return (
-    <div className="flex h-[100dvh] items-center justify-center">
+    <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'>
+        <UserIcon size={18} />
+        <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 4b9393115..dc24e2a61 100644
--- a/src/app/admin/userflags/page.tsx
+++ b/src/app/admin/userflags/page.tsx
@@ -5,6 +5,13 @@ import { Textarea } from '@/components/ui/textarea';
 import { isValidJsonString } from '@/utiles/is-valid-json';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Cuboid, Flag, ToggleRight } from 'lucide-react';
 
 export default function DiscordPage() {
   const [email, setEmail] = useState('');
@@ -12,122 +19,160 @@ export default function DiscordPage() {
   const [adminSecret, setAdminSecret] = useState('');
   const [contentId, setContentId] = useState('');
   return (
-    <div className="flex flex-col justify-between gap-2 p-2 sm:p-10 lg:flex-row">
-      <form className="flex w-full flex-col items-center gap-5 rounded-xl border p-5">
-        <h1 className="text-xl sm:text-2xl md:text-4xl">Toggle DRM</h1>
-        <Input
-          placeholder="email"
-          className="text-black dark:text-white"
-          type=" text"
-          onChange={(e) => {
-            setEmail(e.target.value);
-          }}
-        />
-        <Input
-          placeholder="admin secret"
-          className="text-black dark:text-white"
-          type=" text"
-          onChange={(e) => {
-            setAdminSecret(e.target.value);
-          }}
-        />
+    <div className="flex flex-col w-full max-w-7xl gap-2 px-4 mx-auto">
 
-        <Button
-          className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-          onClick={async () => {
-            await fetch('/api/admin/drm', {
-              body: JSON.stringify({
-                adminSecret,
-                email,
-                disableDrm: false,
-              }),
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            });
-          }}
-        >
-          Enable DRM
-        </Button>
-        <Button
-          className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-          onClick={async () => {
-            await fetch('/api/admin/drm', {
-              body: JSON.stringify({
-                adminSecret,
-                email,
-                disableDrm: true,
-              }),
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            });
-          }}
-        >
-          Disable DRM
-        </Button>
-      </form>
+      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+        <Flag size={18} />
+        <h2 className='text-md font-bold'>User Flags</h2>
+      </section>
 
-      <br />
-      <div className="flex flex-col items-center gap-5 rounded-lg border px-2">
-        <br />
-        <h2 className="text-center text-xl sm:text-2xl md:text-4xl">
-          Add video metadata
-        </h2>
+      <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' >
+              <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>
+              </aside>
 
-        <Textarea
-          // style={{ width: 800 }}
-          rows={10}
-          placeholder="segments json"
-          className="w-[80vw] text-black dark:text-white lg:w-[800px]"
-          onChange={(e) => {
-            setSegmentsJson(e.target.value);
-          }}
-        />
-        <Input
-          placeholder="admin secret"
-          className="text-black"
-          type=" text"
-          onChange={(e) => {
-            setAdminSecret(e.target.value);
-          }}
-        />
-        <Input
-          placeholder="content id"
-          className="text-black"
-          type=" text"
-          onChange={(e) => {
-            setContentId(e.target.value);
-          }}
-        />
+              <aside className='col-span-1 lg:col-span-4'>
+                <form className="flex w-full flex-col gap-5 rounded-xl">
+                  <Input
+                    placeholder="email"
+                    className="h-14 px-4 text-lg dark:text-white"
+                    type=" text"
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                    }}
+                  />
+                  <Input
+                    placeholder="admin secret"
+                    className="h-14 px-4 text-lg dark:text-white"
+                    type=" text"
+                    onChange={(e) => {
+                      setAdminSecret(e.target.value);
+                    }}
+                  />
 
-        <h1>JSON is validated in the form.</h1>
-        <Button
-          className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-          onClick={async () => {
-            if (!isValidJsonString(segmentsJson)) {
-              return toast.warning('Not a valid JSON');
-            }
+                  <Button
+                    className="w-full rounded  px-4 py-2 font-bold text-white"
+                    onClick={async () => {
+                      await fetch('/api/admin/drm', {
+                        body: JSON.stringify({
+                          adminSecret,
+                          email,
+                          disableDrm: false,
+                        }),
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json',
+                        },
+                      });
+                    }}
+                  >
+                    Enable DRM
+                  </Button>
+                  <Button
+                    className="w-full rounded  px-4 py-2 font-bold text-white "
+                    onClick={async () => {
+                      await fetch('/api/admin/drm', {
+                        body: JSON.stringify({
+                          adminSecret,
+                          email,
+                          disableDrm: true,
+                        }),
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json',
+                        },
+                      });
+                    }}
+                  >
+                    Disable DRM
+                  </Button>
+                </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' >
+              <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>
+              </aside>
+
+              <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 "
+                    onChange={(e) => {
+                      setSegmentsJson(e.target.value);
+                    }}
+                  />
+                  <Input
+                    placeholder="Admin Secret"
+                    className="h-14 text-lg "
+                    type=" text"
+                    onChange={(e) => {
+                      setAdminSecret(e.target.value);
+                    }}
+                  />
+                  <Input
+                    placeholder="Content Id"
+                    className="h-14 text-lg "
+                    type=" text"
+                    onChange={(e) => {
+                      setContentId(e.target.value);
+                    }}
+                  />
+
+                  <h1>JSON is validated in the form.</h1>
+                  <Button
+                    className="rounded px-4 py-2 font-bold text-white w-full lg:w-[20%]"
+                    onClick={async () => {
+                      if (!isValidJsonString(segmentsJson)) {
+                        return toast.warning('Not a valid JSON');
+                      }
+
+                      await fetch('/api/admin/segments', {
+                        body: JSON.stringify({
+                          adminSecret,
+                          contentId,
+                          segmentsJson,
+                        }),
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json',
+                        },
+                      });
+                    }}
+                  >
+                    Add segments
+                  </Button>
+                  <br />
+                </div>
+              </aside>
+            </section>
+
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
 
-            await fetch('/api/admin/segments', {
-              body: JSON.stringify({
-                adminSecret,
-                contentId,
-                segmentsJson,
-              }),
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            });
-          }}
-        >
-          Add segments
-        </Button>
-        <br />
-      </div>
     </div>
   );
 }
diff --git a/src/app/api/admin/content/route.ts b/src/app/api/admin/content/route.ts
index 7f7c6a1f3..348c4818c 100644
--- a/src/app/api/admin/content/route.ts
+++ b/src/app/api/admin/content/route.ts
@@ -1,6 +1,40 @@
 import db from '@/db';
+import axios from 'axios';
 import { NextRequest, NextResponse } from 'next/server';
 
+interface DiscordData {
+  type: string;
+  thumbnail: string;
+  title: string;
+  courseTitle: string;
+  courseId: number;
+  currFolderId: number;
+  mediaId: number;
+}
+
+const sendUpdateToDiscord = async (data: DiscordData) => {
+  const body = {
+    content: 'Hello everyone',
+    tts: false,
+    color: 'white',
+    embeds: [
+      {
+        title: `New ${data?.type === 'notion' ? 'NOTE' : data?.type?.toUpperCase()}`,
+        description: `${data?.title} has been added in the ${data?.courseTitle} , [Click here to visit this ${data?.type === 'notion' ? 'note' : data?.type}](https://app.100xdevs.com/courses/${data?.courseId}/${data?.currFolderId}/${data?.mediaId})`,
+      },
+    ],
+  };
+
+  try {
+    await axios.post(
+      process.env.NEXT_PUBLIC_DISCORD_WEBHOOK_URL as string,
+      body,
+    );
+  } catch (error) {
+    console.error('Failed to send update to Discord:', error);
+  }
+};
+
 export const POST = async (req: NextRequest) => {
   const {
     type,
@@ -10,6 +44,9 @@ export const POST = async (req: NextRequest) => {
     parentContentId,
     metadata,
     adminPassword,
+    courseTitle,
+    rest,
+    discordChecked,
   }: {
     type: 'video' | 'folder' | 'notion';
     thumbnail: string;
@@ -18,8 +55,24 @@ export const POST = async (req: NextRequest) => {
     parentContentId: number;
     metadata: any;
     adminPassword: string;
+    courseTitle: string;
+    rest: string[];
+    discordChecked: boolean;
   } = await req.json();
 
+  console.log({
+    type,
+    thumbnail,
+    title,
+    courseId,
+    parentContentId,
+    metadata,
+    adminPassword,
+    courseTitle,
+    rest,
+    discordChecked,
+  });
+
   if (adminPassword !== process.env.ADMIN_SECRET) {
     return NextResponse.json({}, { status: 403 });
   }
@@ -103,5 +156,35 @@ export const POST = async (req: NextRequest) => {
       });
     }
   }
-  return NextResponse.json({}, { status: 200 });
+  if (discordChecked && (type === 'notion' || type === 'video')) {
+    if (!process.env.NEXT_PUBLIC_DISCORD_WEBHOOK_URL) {
+      return NextResponse.json(
+        { message: 'Environment variable for discord webhook is not set' },
+        { status: 500 },
+      );
+    }
+    const data: DiscordData = {
+      type,
+      thumbnail:
+        'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png',
+      title,
+      courseTitle,
+      courseId,
+      currFolderId: parseInt(rest[0], 10),
+      mediaId: content.id,
+    };
+
+    console.log(data);
+    await sendUpdateToDiscord(data);
+  }
+
+  return NextResponse.json(
+    {
+      message:
+        discordChecked && (type === 'notion' || type === 'video')
+          ? 'Content Added and Discord notification has been sent'
+          : 'Content has been added',
+    },
+    { status: 200 },
+  );
 };
diff --git a/src/app/globals.css b/src/app/globals.css
index dc6b4c2cd..6ad3b0ae0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -229,6 +229,18 @@
   }
 }
 
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+      display: none;
+  }
+ /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+}
+}
+
 .markdown-editor-default-font {
   font-family: inherit !important;
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f43abb48b..b922c33bb 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] w-full border-b border-primary/10 bg-background"
+        className="fixed z-[999] top-0 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 c847b0fcd..8cef2d307 100644
--- a/src/components/admin/AddContent.tsx
+++ b/src/components/admin/AddContent.tsx
@@ -3,23 +3,154 @@ 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 { FaDiscord } from 'react-icons/fa';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
 export const AddContent = ({
+  rest,
   courseId,
   parentContentId,
+  courseTitle,
 }: {
+  rest: any;
   courseId: number;
   parentContentId?: number;
+  courseTitle: string;
 }) => {
   const [type, setType] = useState('folder');
   const [imageUri, setImageUri] = useState('');
   const [title, setTitle] = useState('');
   const [metadata, setMetadata] = useState({});
+  const [discordChecked, setDiscordChecked] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleDiscordClick = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleModalChoice = (choice: boolean) => {
+    setDiscordChecked(choice);
+    setIsModalOpen(false);
+  };
   const [adminPassword, setAdminPassword] = useState('');
+  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]'
+      }`;
+  };
+
+  const handleContentSubmit = async () => {
+    setLoading(true);
+    console.log(courseTitle);
+    const response = await fetch('/api/admin/content', {
+      body: JSON.stringify({
+        type,
+        thumbnail: imageUri,
+        title,
+        courseId,
+        parentContentId,
+        metadata,
+        adminPassword,
+        courseTitle,
+        rest,
+        discordChecked,
+      }),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    setLoading(false);
+    console.log(response);
+    const responseData = await response.json();
+    console.log(responseData);
+
+    if (response.status === 200) {
+      // handle success if needed
+      toast.success(responseData.message);
+    } else {
+      // handle error if needed
+      toast.error(responseData.message || 'Something went wrong');
+    }
+  };
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2">
+    <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>Select the Content Mode</div>
+
+        <RadioGroup
+          className='flex flex-warp overflow-auto no-scrollbar max-w-full items-start gap-4'
+          value={type}
+          onValueChange={(value) => {
+            setType(value);
+            setMetadata({});
+          }}
+        >
+          <Label htmlFor="video" className={getLabelClassName("video")}>
+            <RadioGroupItem value="video" id="video" />
+            <span>Video</span>
+          </Label>
+          <Label htmlFor="folder" className={getLabelClassName("folder")}>
+            <RadioGroupItem value="folder" id="folder" />
+            <span>Folder</span>
+          </Label>
+          <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>
+
+          {(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>
+            )
+          }
+
+        </div>
+      </aside>
+
+      {/* <div className="flex gap-2">
         <Button size={'lg'} onClick={() => setType('video')}>
           Video
         </Button>
@@ -29,49 +160,36 @@ export const AddContent = ({
         <Button size={'lg'} onClick={() => setType('notion')}>
           Notion
         </Button>
-      </div>
-      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
+      </div> */}
+      <div className="grid col-span-1 lg:col-span-4 gap-4 grid-cols-1">
         <Input
           type="text"
           placeholder="Title"
           onChange={(e) => setTitle(e.target.value)}
+          className='h-14'
         />
         <Input
           type="text"
           placeholder="Image url"
           onChange={(e) => setImageUri(e.target.value)}
+          className='h-14'
         />
         <Input
           type="text"
           placeholder="Admin password"
           onChange={(e) => setAdminPassword(e.target.value)}
+          className='h-14'
         />
+        {type === 'video' && <AddVideosMetadata onChange={setMetadata} />}
+        {type === 'notion' && <AddNotionMetadata onChange={setMetadata} />}
+        <Button
+          onClick={handleContentSubmit}
+          disabled={loading}
+          className="w-fit"
+        >
+          {loading ? 'Submitting' : 'Submit'}
+        </Button>
       </div>
-      {type === 'video' && <AddVideosMetadata onChange={setMetadata} />}
-      {type === 'notion' && <AddNotionMetadata onChange={setMetadata} />}
-      <Button
-        onClick={async () => {
-          await fetch('/api/admin/content', {
-            body: JSON.stringify({
-              type,
-              description: '',
-              thumbnail: imageUri,
-              title,
-              courseId,
-              parentContentId,
-              metadata,
-              adminPassword,
-            }),
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          });
-        }}
-        className="w-fit"
-      >
-        Submit
-      </Button>
     </div>
   );
 };
@@ -114,13 +232,14 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
     onChange({ video_1080p, video_720p, video_360p });
   }, [video_1080p, video_720p, video_360p]);
   return (
-    <div className="grid grid-cols-1 gap-2 py-2 sm:grid-cols-2 md:grid-cols-3">
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
       <Input
         type="text"
         placeholder="1080p"
         onChange={async (e) => {
           await setVideo_1080p(e.target.value);
         }}
+        className='h-14'
       />
       <Input
         type="text"
@@ -128,6 +247,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_720p(e.target.value);
         }}
+        className='h-14'
       />
       <Input
         type="text"
@@ -135,6 +255,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_360p(e.target.value);
         }}
+        className='h-14'
       />
     </div>
   );
diff --git a/src/components/admin/UpdateVideoClient.tsx b/src/components/admin/UpdateVideoClient.tsx
index 7d9939be2..83eba6e25 100644
--- a/src/components/admin/UpdateVideoClient.tsx
+++ b/src/components/admin/UpdateVideoClient.tsx
@@ -1,6 +1,16 @@
 'use client';
 import { useState } from 'react';
 import axios from 'axios';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { FileText, Video } from 'lucide-react';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { Label } from '../ui/label';
 
 export const UpdateVideoClient = ({
   content,
@@ -26,123 +36,179 @@ export const UpdateVideoClient = ({
   const [vttLink, setVttLink] = useState('');
 
   return (
-    <>
-      m3u8 links
-      <input
-        value={link1080}
-        type="text"
-        onChange={(e) => {
-          setLink1080(e.target.value);
-          setLink720(e.target.value.replace('1080', '720'));
-          setLink360(e.target.value.replace('1080', '360'));
-        }}
-        placeholder={'m3u8 1080p'}
-      />
-      <input
-        value={link720}
-        type="text"
-        onChange={(e) => {
-          setLink720(e.target.value);
-        }}
-        placeholder={'m3u8 720p'}
-      />
-      <input
-        value={link360}
-        type="text"
-        onChange={(e) => {
-          setLink360(e.target.value);
-        }}
-        placeholder={'m3u8 360p'}
-      />
-      <br />
-      Mp4 links
-      <input
-        value={link1080_mp4}
-        type="text"
-        onChange={(e) => {
-          setLink1080_mp4(e.target.value);
-          setLink720_mp4(e.target.value.replace('1080', '720'));
-          setLink360_mp4(e.target.value.replace('1080', '360'));
-        }}
-        placeholder={'m3u8 1080p'}
-      />
-      <input
-        value={link720_mp4}
-        type="text"
-        onChange={(e) => {
-          setLink720_mp4(e.target.value);
-        }}
-        placeholder={'m3u8 720p'}
-      />
-      <input
-        value={link360_mp4}
-        type="text"
-        onChange={(e) => {
-          setLink360_mp4(e.target.value);
-        }}
-        placeholder={'m3u8 360p'}
-      />
-      <button
-        className="my-4 rounded bg-blue-500 p-2 font-bold text-white hover:bg-blue-700"
-        onClick={async () => {
-          await axios.post('/api/admin/updatecontent', {
-            contentId: content.id,
-            updates: {
-              video_360p: link360,
-              video_720p: link720,
-              video_1080p: link1080,
-              video_360p_mp4: link360_mp4,
-              video_720p_mp4: link720_mp4,
-              video_1080p_mp4: link1080_mp4,
-            },
-          });
-        }}
-      >
-        Update
-      </button>
-      <input
-        value={pdfLink}
-        type="text"
-        onChange={(e) => {
-          setPdfLink(e.target.value);
-        }}
-        placeholder={'pdf link'}
-      />
-      <button
-        className="my-4 rounded bg-blue-500 p-2 font-bold text-white hover:bg-blue-700"
-        onClick={async () => {
-          await axios.post('/api/admin/contentmetadata', {
-            contentId: content.id,
-            updates: {
-              slides: pdfLink,
-            },
-          });
-        }}
-      >
-        Update slide link
-      </button>
-      <br />
-      <input
-        value={vttLink}
-        type="text"
-        onChange={(e) => {
-          setVttLink(e.target.value);
-        }}
-        placeholder={'vtt link'}
-      />
-      <button
-        className="my-4 rounded bg-blue-500 p-2 font-bold text-white hover:bg-blue-700"
-        onClick={async () => {
-          await axios.post('/api/admin/contentmetadata', {
-            contentId: content.id,
-            updates: {
-              subtitles: vttLink,
-            },
-          });
-        }}
-      >
-        Update vtt link
-      </button>
-    </>
+    <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' >
+              <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>
+              </aside>
+
+              <aside className='col-span-1 flex flex-col gap-4 lg:col-span-4'>
+                <Label>M3U8 Links</Label>
+                <Input
+                  value={link1080}
+                  type="text"
+                  onChange={(e) => {
+                    setLink1080(e.target.value);
+                    setLink720(e.target.value.replace('1080', '720'));
+                    setLink360(e.target.value.replace('1080', '360'));
+                  }}
+                  placeholder={'m3u8 1080p'}
+                />
+                <Input
+                  value={link720}
+                  type="text"
+                  onChange={(e) => {
+                    setLink720(e.target.value);
+                  }}
+                  placeholder={'m3u8 720p'}
+                />
+                <Input
+                  value={link360}
+                  type="text"
+                  onChange={(e) => {
+                    setLink360(e.target.value);
+                  }}
+                  placeholder={'m3u8 360p'}
+                />
+
+                <Label className='mt-4'>MP4 Links</Label>
+
+                <Input
+                  value={link1080_mp4}
+                  type="text"
+                  onChange={(e) => {
+                    setLink1080_mp4(e.target.value);
+                    setLink720_mp4(e.target.value.replace('1080', '720'));
+                    setLink360_mp4(e.target.value.replace('1080', '360'));
+                  }}
+                  placeholder={'m3u8 1080p'}
+                />
+                <Input
+                  value={link720_mp4}
+                  type="text"
+                  onChange={(e) => {
+                    setLink720_mp4(e.target.value);
+                  }}
+                  placeholder={'m3u8 720p'}
+                />
+                <Input
+                  value={link360_mp4}
+                  type="text"
+                  onChange={(e) => {
+                    setLink360_mp4(e.target.value);
+                  }}
+                  placeholder={'m3u8 360p'}
+                />
+                <Button
+                  className="my-4 rounded  p-2 font-bold text-white w-full lg:w-[20%]"
+                  onClick={async () => {
+                    await axios.post('/api/admin/updatecontent', {
+                      contentId: content.id,
+                      updates: {
+                        video_360p: link360,
+                        video_720p: link720,
+                        video_1080p: link1080,
+                        video_360p_mp4: link360_mp4,
+                        video_720p_mp4: link720_mp4,
+                        video_1080p_mp4: link1080_mp4,
+                      },
+                    });
+                  }}
+                >
+                  Update
+                </Button>
+              </aside>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="slides">
+          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
+            <div className='flex gap-4 flex-col' >
+              <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>
+              </aside>
+
+              <aside className='col-span-1 flex flex-col gap-4 lg:col-span-4'>
+                <Input
+                  value={pdfLink}
+                  type="text"
+                  onChange={(e) => {
+                    setPdfLink(e.target.value);
+                  }}
+                  placeholder={'pdf link'}
+                />
+                <Button
+                  className="my-4 rounded p-2 font-bold text-white w-full lg:w-[20%]"
+                  onClick={async () => {
+                    await axios.post('/api/admin/contentmetadata', {
+                      contentId: content.id,
+                      updates: {
+                        slides: pdfLink,
+                      },
+                    });
+                  }}
+                >
+                  Update Slide Link
+                </Button>
+              </aside>
+            </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' >
+              <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>
+              </aside>
+
+              <aside className='col-span-1 lg:col-span-4'>
+                <Input
+                  value={vttLink}
+                  type="text"
+                  onChange={(e) => {
+                    setVttLink(e.target.value);
+                  }}
+                  placeholder={'vtt link'}
+                />
+                <Button
+                  className="my-4 rounded  p-2 font-bold text-white w-full lg:w-[20%]"
+                  onClick={async () => {
+                    await axios.post('/api/admin/contentmetadata', {
+                      contentId: content.id,
+                      updates: {
+                        subtitles: vttLink,
+                      },
+                    });
+                  }}
+                >
+                  Update vtt link
+                </Button>
+              </aside>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+    </div>
   );
 };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 000000000..cb8a4e28c
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <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
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-blue-500 text-blue-500" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };