diff --git a/Dockerfile.dev b/Dockerfile.dev
index 6f18b9414..ae1351395 100644
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -2,14 +2,15 @@ FROM node:20-alpine
 
 WORKDIR /usr/src/app
 
-COPY package.json package-lock.json ./
+COPY package.json pnpm-lock.yaml ./
 COPY prisma ./prisma
 
-RUN  npm install
+RUN npm i pnpm -g
+
+RUN pnpm install
 
 COPY . .
 
 EXPOSE 3000
 
-CMD ["npm", "run", "dev:docker"]
-
+CMD ["pnpm", "dev:docker"]
\ No newline at end of file
diff --git a/Dockerfile.prod b/Dockerfile.prod
index 92e81176f..3f3e5efc5 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -1,14 +1,31 @@
-FROM node:20-alpine
-ARG DATABASE_URL
+FROM node:20-alpine AS build
 
 WORKDIR /usr/src/app
+ARG DATABASE_URL 
 
 COPY . .
 
-RUN npm install
-RUN DATABASE_URL=$DATABASE_URL npx prisma generate
-RUN DATABASE_URL=$DATABASE_URL npm run build
+RUN npm install -g pnpm && \
+  pnpm install && \
+  pnpm add sharp && \
+  pnpm run build && \
+  DATABASE_URL=$DATABASE_URL pnpm dlx prisma generate 
 
-EXPOSE 3000
 
-CMD ["npm", "run", "start"]
+
+FROM node:20-alpine AS run
+
+RUN mkdir /.npm && chown -R 1001:1001 /.npm
+
+USER 1001:1001
+WORKDIR /usr/src/app
+
+COPY --from=build --chown=1001:1001 usr/src/app/.next/standalone ./
+COPY --from=build --chown=1001:1001 usr/src/app/.next/static ./.next/static
+COPY --from=build --chown=1001:1001 usr/src/app/public ./public
+
+ENV NODE_ENV production
+ENV PORT 3000 
+ENV HOSTNAME "0.0.0.0"
+
+CMD [ "node", "server.js" ]
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 8c487ef75..61c2ba945 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,10 @@
-version: '3.5'
 services:
   app:
-    build: .
+    build:
+      context: .
+      dockerfile: Dockerfile.prod
+      args:
+        - DATABASE_URL=postgresql://postgres:postgres@db:5432/cms?schema=public
     container_name: cms-docker
     environment:
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/cms?schema=public
@@ -10,7 +13,7 @@ services:
       - '3000:3000'
       - '5555:5555'
     volumes:
-      - .:/usr/src/app
+      # - .:/usr/src/app
       - /usr/src/app/.next
       - /usr/src/app/node_modules
     depends_on:
@@ -18,7 +21,7 @@ services:
         condition: service_healthy
 
   db:
-    image: postgres:9.6
+    image: postgres:alpine
     container_name: db
     restart: always
     environment:
@@ -36,4 +39,4 @@ services:
       retries: 5
 
 volumes:
-  postgres-data: 
\ No newline at end of file
+  postgres-data:
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 82b78e87b..f0c5ba607 100644
--- a/next.config.js
+++ b/next.config.js
@@ -31,6 +31,7 @@ const nextConfig = {
     }
     return config;
   },
+  output: 'standalone',
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
index f26aa8e56..21d1a0a46 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@tabler/icons-react": "^3.14.0",
     "@types/bcrypt": "^5.0.2",
     "@types/jsonwebtoken": "^9.0.5",
+    "@uiw/react-markdown-preview": "^5.1.3",
     "@uiw/react-md-editor": "^4.0.4",
     "axios": "^1.6.2",
     "bcrypt": "^5.1.1",
@@ -71,6 +72,7 @@
     "ioredis": "^5.4.1",
     "jose": "^5.2.2",
     "jsonwebtoken": "^9.0.2",
+    "katex": "^0.16.11",
     "lucide-react": "^0.321.0",
     "moment": "^2.30.1",
     "next": "14.0.2",
@@ -80,6 +82,7 @@
     "node-fetch": "^3.3.2",
     "notion-client": "^6.16.0",
     "pdf-lib": "^1.17.1",
+    "prismjs": "^1.29.0",
     "qs": "^6.13.0",
     "react": "^18",
     "react-big-calendar": "^1.13.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24f477ce4..0a2bb066e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,7 +24,7 @@ importers:
         specifier: ^9.4.0
         version: 9.7.0(react@18.3.1)
       '@prisma/client':
-        specifier: ^5.6.0
+        specifier: ^5.18.0
         version: 5.18.0(prisma@5.18.0)
       '@radix-ui/react-accordion':
         specifier: ^1.1.2
@@ -47,6 +47,9 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.2.0
+        version: 1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -54,7 +57,7 @@ importers:
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
-        specifier: ^1.0.2
+        specifier: ^1.1.0
         version: 1.1.0(@types/react@18.3.3)(react@18.3.1)
       '@radix-ui/react-switch':
         specifier: ^1.1.0
@@ -62,12 +65,18 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tabler/icons-react':
+        specifier: ^3.14.0
+        version: 3.19.0(react@18.3.1)
       '@types/bcrypt':
         specifier: ^5.0.2
         version: 5.0.2
       '@types/jsonwebtoken':
         specifier: ^9.0.5
         version: 9.0.6
+      '@uiw/react-markdown-preview':
+        specifier: ^5.1.3
+        version: 5.1.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@uiw/react-md-editor':
         specifier: ^4.0.4
         version: 4.0.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -113,6 +122,9 @@ importers:
       jsonwebtoken:
         specifier: ^9.0.2
         version: 9.0.2
+      katex:
+        specifier: ^0.16.11
+        version: 0.16.11
       lucide-react:
         specifier: ^0.321.0
         version: 0.321.0(react@18.3.1)
@@ -140,6 +152,9 @@ importers:
       pdf-lib:
         specifier: ^1.17.1
         version: 1.17.1
+      prismjs:
+        specifier: ^1.29.0
+        version: 1.29.0
       qs:
         specifier: ^6.13.0
         version: 6.13.0
@@ -289,7 +304,7 @@ importers:
         specifier: ^0.6.1
         version: 0.6.6(prettier@3.3.3)
       prisma:
-        specifier: ^5.17.0
+        specifier: ^5.18.0
         version: 5.18.0
       tailwindcss:
         specifier: ^3.3.0
@@ -1675,6 +1690,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dialog@1.1.1':
     resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==}
     peerDependencies:
@@ -1845,6 +1869,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.1':
+    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.0.0':
     resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
@@ -1858,6 +1895,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-radio-group@1.2.1':
+    resolution: {integrity: sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.0':
     resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
     peerDependencies:
@@ -2331,6 +2381,14 @@ packages:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
+  '@tabler/icons-react@3.19.0':
+    resolution: {integrity: sha512-AqEWGI0tQWgqo6ZjMO5yJ9sYT8oXLuAM/up0hN9iENS6IdtNZryKrkNSiMgpwweNTpl8wFFG/dAZ959S91A/uQ==}
+    peerDependencies:
+      react: '>= 16'
+
+  '@tabler/icons@3.19.0':
+    resolution: {integrity: sha512-A4WEWqpdbTfnpFEtwXqwAe9qf9sp1yRPvzppqAuwcoF0q5YInqB+JkJtSFToCyBpPVeLxJUxxkapLvt2qQgnag==}
+
   '@testing-library/dom@10.1.0':
     resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==}
     engines: {node: '>=18'}
@@ -2655,8 +2713,8 @@ packages:
   '@uiw/copy-to-clipboard@1.0.17':
     resolution: {integrity: sha512-O2GUHV90Iw2VrSLVLK0OmNIMdZ5fgEg4NhvtwINsX+eZ/Wf6DWD0TdsK9xwV7dNRnK/UI2mQtl0a2/kRgm1m1A==}
 
-  '@uiw/react-markdown-preview@5.1.2':
-    resolution: {integrity: sha512-IheBzajVKZ3NUhYAfrnnereJmKVNQ6vRZDjQhKEQy7IMarJXrUKC1eG8OzTgy1J/3m67MBTs6d52kkSB699efA==}
+  '@uiw/react-markdown-preview@5.1.3':
+    resolution: {integrity: sha512-jV02wO4XHWFk54kz7sLqOkdPgJLttSfKLyen47XgjcyGgQXU2I4WJBygmdpV2AT9m/MiQ8qrN1Y+E5Syv9ZDpw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -4610,6 +4668,10 @@ packages:
     resolution: {integrity: sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==}
     hasBin: true
 
+  katex@0.16.11:
+    resolution: {integrity: sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -8725,6 +8787,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-context@1.1.1(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -8923,6 +8991,16 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-presence@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
@@ -8932,6 +9010,24 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-radio-group@1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -9580,6 +9676,13 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tabler/icons-react@3.19.0(react@18.3.1)':
+    dependencies:
+      '@tabler/icons': 3.19.0
+      react: 18.3.1
+
+  '@tabler/icons@3.19.0': {}
+
   '@testing-library/dom@10.1.0':
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -9974,7 +10077,7 @@ snapshots:
 
   '@uiw/copy-to-clipboard@1.0.17': {}
 
-  '@uiw/react-markdown-preview@5.1.2(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@uiw/react-markdown-preview@5.1.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.0
       '@uiw/copy-to-clipboard': 1.0.17
@@ -9998,7 +10101,7 @@ snapshots:
   '@uiw/react-md-editor@4.0.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.0
-      '@uiw/react-markdown-preview': 5.1.2(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@uiw/react-markdown-preview': 5.1.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       rehype: 13.0.1
@@ -12280,6 +12383,10 @@ snapshots:
     dependencies:
       commander: 8.3.0
 
+  katex@0.16.11:
+    dependencies:
+      commander: 8.3.0
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
diff --git a/src/app/admin/add-course/page.tsx b/src/app/admin/add-course/page.tsx
index dace4c5a8..d4b6d5609 100644
--- a/src/app/admin/add-course/page.tsx
+++ b/src/app/admin/add-course/page.tsx
@@ -1,12 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Form,
   FormControl,
@@ -29,7 +24,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { Cuboid, PackagePlus } from 'lucide-react';
 import { FaDiscord } from 'react-icons/fa';
 
@@ -86,24 +81,32 @@ export default function Courses() {
 
   return (
     <div className="wrapper my-16 flex flex-col gap-4">
-
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <Cuboid size={18} />
-        <h2 className='text-md font-bold'>View Content</h2>
+        <h2 className="text-md font-bold">View Content</h2>
       </section>
 
-      <Accordion defaultValue='add-new-course' className='border-2 p-4 rounded-2xl' type="single" collapsible>
+      <Accordion
+        defaultValue="add-new-course"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
         <AccordionItem value="add-new-course">
-          <AccordionTrigger className='p-6 text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
-              <PackagePlus size={40} />New course
+          <AccordionTrigger className="p-6 text-2xl font-bold">
+            <div className="flex flex-col gap-4">
+              <PackagePlus size={40} />
+              New course
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='w-full grid grid-cols-1 lg:grid-cols-7'>
-              <div className='text-sm font-semibold text-gray-400 col-span-1 lg:col-span-2 p-6'>Create new course for 100xdevs community and let user explore new courses</div>
-              <div className='col-span-1 lg:col-span-5 p-4'>
-                <Card className='bg-background border-2'>
+            <div className="grid w-full grid-cols-1 lg:grid-cols-7">
+              <div className="col-span-1 p-6 text-sm font-semibold text-gray-400 lg:col-span-2">
+                Create new course for 100xdevs community and let user explore
+                new courses
+              </div>
+              <div className="col-span-1 p-4 lg:col-span-5">
+                <Card className="border-2 bg-background">
                   <CardHeader>
                     {/* <CardTitle>Create a new course</CardTitle> */}
                     <CardTitle>Fill in the course details below</CardTitle>
@@ -121,7 +124,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Title</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Course name" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Course name"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -134,7 +141,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Image url</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the url of Image" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the url of Image"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -144,11 +155,12 @@ export default function Courses() {
                           control={form.control}
                           name="description"
                           render={({ field }: { field: any }) => (
-                            <FormItem className='col-span-1 lg:col-span-2'>
+                            <FormItem className="col-span-1 lg:col-span-2">
                               <FormLabel>Description</FormLabel>
                               <FormControl>
                                 <Textarea
-                                  className='h-12 px-3' placeholder="Enter the Description of course"
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Description of course"
                                   {...field}
                                 />
                               </FormControl>
@@ -163,7 +175,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Slug</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Course slug" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Course slug"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -176,7 +192,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Id</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Course ID" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Course ID"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -189,7 +209,11 @@ export default function Courses() {
                             <FormItem>
                               <FormLabel>Admin Secret</FormLabel>
                               <FormControl>
-                                <Input className='h-12 px-3' placeholder="Enter the Admin Secret" {...field} />
+                                <Input
+                                  className="h-12 px-3"
+                                  placeholder="Enter the Admin Secret"
+                                  {...field}
+                                />
                               </FormControl>
                               <FormMessage />
                             </FormItem>
@@ -203,7 +227,8 @@ export default function Courses() {
                               <FormLabel>app x course id</FormLabel>
                               <FormControl>
                                 <Input
-                                  className='h-12 px-3' placeholder="Enter the appx course ID"
+                                  className="h-12 px-3"
+                                  placeholder="Enter the appx course ID"
                                   {...field}
                                 />
                               </FormControl>
@@ -231,7 +256,9 @@ export default function Courses() {
                           {isLoading ? (
                             <Button>Loading...</Button>
                           ) : (
-                            <Button className='w-[20%]' type="submit">Create</Button>
+                            <Button className="w-[20%]" type="submit">
+                              Create
+                            </Button>
                           )}
                         </div>
                       </form>
@@ -243,24 +270,28 @@ export default function Courses() {
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem className='border-none' value="discord-config">
-          <AccordionTrigger className='p-6 text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
-              <FaDiscord className='text-5xl' /> Discord Config
+        <AccordionItem className="border-none" value="discord-config">
+          <AccordionTrigger className="p-6 text-2xl font-bold">
+            <div className="flex flex-col gap-4">
+              <FaDiscord className="text-5xl" /> Discord Config
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='w-full grid grid-cols-1 lg:grid-cols-7'>
-              <div className='text-sm font-semibold text-gray-400col-span-1 lg:col-span-2 p-6'>Mangae discord configuration for the users</div>
-              <div className='col-span-1 lg:col-span-5 p-4'>
-                <Card className='bg-background'>
+            <div className="grid w-full grid-cols-1 lg:grid-cols-7">
+              <div className="text-gray-400col-span-1 p-6 text-sm font-semibold lg:col-span-2">
+                Mangae discord configuration for the users
+              </div>
+              <div className="col-span-1 p-4 lg:col-span-5">
+                <Card className="bg-background">
                   <CardHeader>
                     <CardTitle>Discord</CardTitle>
                   </CardHeader>
                   <CardContent className="flex flex-col gap-5 lg:flex-row">
-                    <Card className="mx-auto border-2 bg-background w-full max-w-3xl overflow-y-auto">
+                    <Card className="mx-auto w-full max-w-3xl overflow-y-auto border-2 bg-background">
                       <CardHeader>
-                        <CardTitle>Allow user another account in cohort 3</CardTitle>
+                        <CardTitle>
+                          Allow user another account in cohort 3
+                        </CardTitle>
                       </CardHeader>
                       <CardContent className="grid gap-4 p-4 pt-0">
                         <Input
@@ -280,10 +311,13 @@ export default function Courses() {
                         <Button
                           onClick={async () => {
                             try {
-                              const res = await axios.post('/api/admin/discordReset', {
-                                email,
-                                adminPassword,
-                              });
+                              const res = await axios.post(
+                                '/api/admin/discordReset',
+                                {
+                                  email,
+                                  adminPassword,
+                                },
+                              );
                               toast(JSON.stringify(res.data.data));
                             } catch (error) {
                               //@ts-ignore
@@ -295,9 +329,11 @@ export default function Courses() {
                         </Button>
                       </CardContent>
                     </Card>
-                    <Card className="mx-auto border-2 bg-background w-full max-w-3xl overflow-y-auto">
+                    <Card className="mx-auto w-full max-w-3xl overflow-y-auto border-2 bg-background">
                       <CardHeader>
-                        <CardTitle>Get users discord username in cohort 3</CardTitle>
+                        <CardTitle>
+                          Get users discord username in cohort 3
+                        </CardTitle>
                       </CardHeader>
                       <CardContent className="grid gap-4 p-4 pt-0">
                         <Input
@@ -340,9 +376,7 @@ export default function Courses() {
             </div>
           </AccordionContent>
         </AccordionItem>
-
       </Accordion>
-
     </div>
   );
 }
diff --git a/src/app/admin/comment/ApproveComment.tsx b/src/app/admin/comment/ApproveComment.tsx
index 23f7c40a0..4a36bb9ec 100644
--- a/src/app/admin/comment/ApproveComment.tsx
+++ b/src/app/admin/comment/ApproveComment.tsx
@@ -12,7 +12,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { ShieldCheck } from 'lucide-react';
 
 const ApproveComment = () => {
@@ -40,29 +40,37 @@ const ApproveComment = () => {
     });
   };
   return (
-    <div className='w-full h-full'>
-      <Accordion defaultValue='approve-comment' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem className='border-none' value="approve-comment">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+    <div className="h-full w-full">
+      <Accordion
+        defaultValue="approve-comment"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="border-none" value="approve-comment">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <ShieldCheck size={40} /> Approve Comment
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <form className='w-full h-full' onSubmit={handleApprove} ref={formRef}>
-              <div className="grid w-full grid-cols-1 lg:grid-cols-7 p-2 gap-2 rounded-lg border-gray-200 shadow-sm dark:border-gray-800">
-                <div className="col-span-1 lg:col-span-3 flex flex-col gap-2  p-4">
+            <form
+              className="h-full w-full"
+              onSubmit={handleApprove}
+              ref={formRef}
+            >
+              <div className="grid w-full grid-cols-1 gap-2 rounded-lg border-gray-200 p-2 shadow-sm dark:border-gray-800 lg:grid-cols-7">
+                <div className="col-span-1 flex flex-col gap-2 p-4 lg:col-span-3">
                   <div className="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">
                     Enter the information below to approve the comment
                   </div>
                 </div>
 
-                <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
-
+                <aside className="col-span-1 flex flex-col gap-6 p-4 lg:col-span-4">
                   <div className="flex items-center">
                     <Label className="sr-only">Comment ID</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="commentId"
                       name="commentId"
                       placeholder="Content ID; Comment ID"
@@ -75,7 +83,7 @@ const ApproveComment = () => {
                   <div className="flex items-center">
                     <Label className="sr-only">Admin password</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="adminPassword"
                       name="adminPassword"
                       placeholder="Admin password"
@@ -89,16 +97,13 @@ const ApproveComment = () => {
                   <div className="">
                     <Button className="w-full lg:w-[20%]">Approve</Button>
                   </div>
-
                 </aside>
-
               </div>
             </form>
           </AccordionContent>
         </AccordionItem>
       </Accordion>
     </div>
-
   );
 };
 
diff --git a/src/app/admin/comment/page.tsx b/src/app/admin/comment/page.tsx
index bdb8a6528..6c9940940 100644
--- a/src/app/admin/comment/page.tsx
+++ b/src/app/admin/comment/page.tsx
@@ -4,10 +4,10 @@ import { MessageSquare } from 'lucide-react';
 
 const CommentAdminPage = () => {
   return (
-    <div className="flex h-[100dvh] gap-4 flex-col px-4 max-w-7xl mx-auto justify-center">
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
-        <MessageSquare size={18}/>
-        <h2 className='text-md font-bold'>Comments Mangement</h2>
+    <div className="mx-auto flex h-[100dvh] max-w-7xl flex-col justify-center gap-4 px-4">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
+        <MessageSquare size={18} />
+        <h2 className="text-md font-bold">Comments Mangement</h2>
       </section>
       <ApproveComment />
     </div>
diff --git a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
index 1f3a8ee4f..f86be0afd 100644
--- a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
+++ b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
@@ -42,7 +42,7 @@ export default async function UpdateCourseContent({
 
   return (
     <main className="wrapper flex max-w-screen-xl flex-col gap-28">
-      <div className="flex w-full flex-col rounded-lg bg-primary/5 p-4 border-2 justify-between gap-2">
+      <div className="flex w-full flex-col justify-between gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <h1 className="text-3xl font-bold md:text-4xl">Content</h1>
         <p className="text-xl capitalize">{course?.title}</p>
       </div>
diff --git a/src/app/admin/content/[courseId]/page.tsx b/src/app/admin/content/[courseId]/page.tsx
index 4490c1d02..a3ce253bc 100644
--- a/src/app/admin/content/[courseId]/page.tsx
+++ b/src/app/admin/content/[courseId]/page.tsx
@@ -38,9 +38,9 @@ export default async function UpdateCourseContent({
 
   return (
     <main className="wrapper flex max-w-screen-xl flex-col gap-28">
-      <div className="flex w-full rounded-lg bg-primary/5 border-2 p-4 flex-col justify-between gap-2">
+      <div className="flex w-full flex-col justify-between gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <h1 className="text-2xl font-bold md:text-4xl">Content</h1>
-        <p className="text-lg  capitalize">{course?.title}</p>
+        <p className="text-lg capitalize">{course?.title}</p>
       </div>
 
       <AddContent
diff --git a/src/app/admin/discord/page.tsx b/src/app/admin/discord/page.tsx
index 71e296817..bd7b2452e 100644
--- a/src/app/admin/discord/page.tsx
+++ b/src/app/admin/discord/page.tsx
@@ -8,7 +8,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { InfoIcon, RefreshCcw } from 'lucide-react';
 import { FaDiscord } from 'react-icons/fa';
 
@@ -17,33 +17,37 @@ export default function DiscordPage() {
   const [adminSecret, setAdminSecret] = useState('' as any);
   const [userData, setUserData] = useState({} as any);
   return (
-    <div className="flex flex-col w-full max-w-7xl mx-auto justify-around px-4 py-5 gap-6">
-
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
-        <FaDiscord className='text-3xl' />
-        <h2 className='text-md font-bold'>Discord Configuration</h2>
+    <div className="mx-auto flex w-full max-w-7xl flex-col justify-around gap-6 px-4 py-5">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
+        <FaDiscord className="text-3xl" />
+        <h2 className="text-md font-bold">Discord Configuration</h2>
       </section>
-      
-      <Accordion defaultValue='refresh-permission' className='border-2  w-full rounded-2xl' type="single" collapsible>
-        <AccordionItem className='p-4' value="refresh-permission">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 items-start flex-col' >
+
+      <Accordion
+        defaultValue="refresh-permission"
+        className="w-full rounded-2xl border-2"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="p-4" value="refresh-permission">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col items-start gap-4">
               <RefreshCcw size={40} /> Refresh Discord Permission
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className="grid w-full grid-cols-1 lg:grid-cols-7 p-2 gap-2 rounded-lg border-gray-200 shadow-sm dark:border-gray-800">
-              <div className="col-span-1 lg:col-span-3 flex flex-col gap-2 p-4">
+            <div className="grid w-full grid-cols-1 gap-2 rounded-lg border-gray-200 p-2 shadow-sm dark:border-gray-800 lg:grid-cols-7">
+              <div className="col-span-1 flex flex-col gap-2 p-4 lg:col-span-3">
                 <div className="text-md font-medium leading-none text-gray-500 dark:text-gray-400">
-                  User entered discord with wrong email ? Here you can refresh email
+                  User entered discord with wrong email ? Here you can refresh
+                  email
                 </div>
-                <h1 className="text-yellow-500 capitalize">
+                <h1 className="capitalize text-yellow-500">
                   (please delete old user from discord first)
                 </h1>
               </div>
 
-              <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
-
+              <aside className="col-span-1 flex flex-col gap-6 p-4 lg:col-span-4">
                 <Input
                   placeholder="Email"
                   className="h-14"
@@ -59,7 +63,7 @@ export default function DiscordPage() {
                   onChange={(e) => setAdminSecret(e.target.value)}
                 />
                 <Button
-                  className="rounded  px-4 py-2 font-bold text-white lg:w-fit w-full"
+                  className="w-full rounded px-4 py-2 font-bold text-white lg:w-fit"
                   onClick={async () => {
                     const response = await fetch('/api/admin/discord/refresh', {
                       method: 'POST',
@@ -79,45 +83,43 @@ export default function DiscordPage() {
                 >
                   Allow user to re-initiate discord
                 </Button>
-
               </aside>
             </div>
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem className='border-none p-4' value="get-user-info">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+        <AccordionItem className="border-none p-4" value="get-user-info">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <InfoIcon size={40} /> Get User Information
             </div>
           </AccordionTrigger>
           <AccordionContent>
-
-            <div className="grid w-full grid-cols-1 lg:grid-cols-7 p-2 gap-2 rounded-lg border-gray-200 shadow-sm dark:border-gray-800">
-              <div className="col-span-1 lg:col-span-3 flex flex-col gap-2 p-4">
+            <div className="grid w-full grid-cols-1 gap-2 rounded-lg border-gray-200 p-2 shadow-sm dark:border-gray-800 lg:grid-cols-7">
+              <div className="col-span-1 flex flex-col gap-2 p-4 lg:col-span-3">
                 <div className="text-md font-medium leading-none text-gray-500 dark:text-gray-400">
-                  Enter the user email and get user's information just by one click
+                  Enter the user email and get user's information just by one
+                  click
                 </div>
               </div>
 
-              <aside className='col-span-1 flex flex-col gap-6 p-4 lg:col-span-4 '>
-
+              <aside className="col-span-1 flex flex-col gap-6 p-4 lg:col-span-4">
                 <Input
                   placeholder="Email"
-                  className=" h-14 px-2"
+                  className="h-14 px-2"
                   type=" text"
                   onChange={(e) => {
                     setEmail(e.target.value);
                   }}
                 />
                 <Input
-                  className=" h-14 px-2"
+                  className="h-14 px-2"
                   type="text"
                   placeholder="Admin secret"
                   onChange={(e) => setAdminSecret(e.target.value)}
                 />
                 <Button
-                  className="rounded  px-4 py-2 font-bold text-white  lg:w-[20%] w-full"
+                  className="w-full rounded px-4 py-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     const response = await fetch('/api/admin/discord/', {
                       method: 'POST',
@@ -145,7 +147,6 @@ export default function DiscordPage() {
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-
     </div>
   );
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 87e6eefc2..616028c5f 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -14,12 +14,20 @@ export default async function AdminLayout({
   }
 
   if (process.env.LOCAL_CMS_PROVIDER) {
-    return <div className="my-[6rem] max-h-full h-[calc(100vh-36px-4rem)]">{children}</div>;
+    return (
+      <div className="my-[6rem] h-[calc(100vh-36px-4rem)] max-h-full">
+        {children}
+      </div>
+    );
   }
 
   if (!process.env.ADMINS?.split(',').includes(session.user.email!)) {
     return notFound();
   }
 
-  return <div className="flex mt-[6rem] max-h-full h-[calc(100vh-36px-4rem)]">{children}</div>;
+  return (
+    <div className="mt-[6rem] flex h-[calc(100vh-36px-4rem)] max-h-full">
+      {children}
+    </div>
+  );
 }
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index ad7da0e30..dd0ba761d 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,6 +1,13 @@
 'use client';
 import { AnimatePresence, motion } from 'framer-motion';
-import { FileText, Flag, LucideIcon, MessageCircle, PackagePlus, Users } from 'lucide-react';
+import {
+  FileText,
+  Flag,
+  LucideIcon,
+  MessageCircle,
+  PackagePlus,
+  Users,
+} from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import React, { useState } from 'react';
@@ -42,7 +49,7 @@ export default function AdminPage() {
     title: string;
     description: string;
     exploreText: string;
-  }
+  };
 
   const cardsData: CardData[] = [
     {
@@ -89,11 +96,16 @@ export default function AdminPage() {
     },
   ];
 
-  const AdminCard: React.FC<CardData> = ({ href, icon: Icon, title, description, exploreText }) => {
+  const AdminCard: React.FC<CardData> = ({
+    href,
+    icon: Icon,
+    title,
+    description,
+    exploreText,
+  }) => {
     const [isHovered, setIsHovered] = useState(false);
 
     return (
-
       <motion.div
         initial={{ y: 50, opacity: 0, filter: 'blur(10px)' }}
         animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
@@ -103,13 +115,13 @@ export default function AdminPage() {
           href={href}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
-          className='h-[15rem] overflow-hidden relative group cursor-pointer hover:border-blue-500 transition-all duration-200 ease-linear flex flex-col items-center justify-center p-4 rounded-lg border-2 w-full'
+          className="group relative flex h-[15rem] w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg border-2 p-4 transition-all duration-200 ease-linear hover:border-blue-500"
         >
-          <div className='border bg-blue-400 bg-opacity-5 rounded-md w-[4rem] h-[3rem] p-2 flex items-center justify-center'>
-            <Icon className='w-6 h-6' />
+          <div className="flex h-[3rem] w-[4rem] items-center justify-center rounded-md border bg-blue-400 bg-opacity-5 p-2">
+            <Icon className="h-6 w-6" />
           </div>
-          <div className='flex flex-col items-center justify-center mt-4 w-full gap-1'>
-            <h1 className='text-xl font-semibold'>{title}</h1>
+          <div className="mt-4 flex w-full flex-col items-center justify-center gap-1">
+            <h1 className="text-xl font-semibold">{title}</h1>
 
             {isHovered && (
               <AnimatePresence>
@@ -118,7 +130,7 @@ export default function AdminPage() {
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: 20 }}
                   transition={{ duration: 0.3 }}
-                  className='text-sm text-gray-400 transition-all duration-200 ease-linear'
+                  className="text-sm text-gray-400 transition-all duration-200 ease-linear"
                 >
                   {description}
                 </motion.p>
@@ -126,7 +138,7 @@ export default function AdminPage() {
             )}
           </div>
 
-          <div className='w-[80%] transition-all duration-500 ease-linear group-hover:bottom-0 text-center text-xs border-2 py-1 absolute -bottom-[60px] border-b-0 px-4 rounded-tr-lg rounded-tl-lg'>
+          <div className="absolute -bottom-[60px] w-[80%] rounded-tl-lg rounded-tr-lg border-2 border-b-0 px-4 py-1 text-center text-xs transition-all duration-500 ease-linear group-hover:bottom-0">
             {exploreText}
           </div>
         </Link>
@@ -135,17 +147,21 @@ export default function AdminPage() {
   };
 
   return (
-    <main className='max-w-[1280px] flex flex-col gap-6 items-center p-4 min-h-full max-h-fit w-full mx-auto'>
-      <section className='w-full flex flex-col gap-2 text-center text-3xl'>
-        <h1>{greeting}, {user?.name}</h1>
-        <h4 className='text-sm text-gray-500'>Welcome! Explore more from below</h4>
+    <main className="mx-auto flex max-h-fit min-h-full w-full max-w-[1280px] flex-col items-center gap-6 p-4">
+      <section className="flex w-full flex-col gap-2 text-center text-3xl">
+        <h1>
+          {greeting}, {user?.name}
+        </h1>
+        <h4 className="text-sm text-gray-500">
+          Welcome! Explore more from below
+        </h4>
       </section>
 
-      <section className='my-4 w-full grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'>
+      <section className="my-4 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {cardsData.map((card, index) => (
           <AdminCard key={index} {...card} />
         ))}
       </section>
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/user/LogoutUser.tsx b/src/app/admin/user/LogoutUser.tsx
index a9f8f66eb..fe131472c 100644
--- a/src/app/admin/user/LogoutUser.tsx
+++ b/src/app/admin/user/LogoutUser.tsx
@@ -10,7 +10,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { LogOut } from 'lucide-react';
 
 const LogoutUserComp = () => {
@@ -26,29 +26,37 @@ const LogoutUserComp = () => {
     toast.info(res.message || res.error);
   };
   return (
-
-    <div className='w-full h-full'>
-      <Accordion defaultValue='approve-comment' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem className='border-none' value="approve-comment">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+    <div className="h-full w-full">
+      <Accordion
+        defaultValue="approve-comment"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="border-none" value="approve-comment">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <LogOut size={40} /> Logout User
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <form className='w-full h-full' onSubmit={handlLogout} ref={formRef}>
-              <div className="grid w-full grid-cols-1 md:grid-cols-7 rounded-lg  shadow-sm dark:border-gray-800">
-                <div className="col-span-1 lg:col-span-3 grid gap-2 p-6">
+            <form
+              className="h-full w-full"
+              onSubmit={handlLogout}
+              ref={formRef}
+            >
+              <div className="grid w-full grid-cols-1 rounded-lg shadow-sm dark:border-gray-800 md:grid-cols-7">
+                <div className="col-span-1 grid gap-2 p-6 lg:col-span-3">
                   <div className="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">
                     Enter the information below to logout the user
                   </div>
                 </div>
 
-                <aside className='col-span-1 flex flex-col gap-6 lg:col-span-4 w-full'>
+                <aside className="col-span-1 flex w-full flex-col gap-6 lg:col-span-4">
                   <div className="">
                     <Label className="sr-only">EMAIL</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="email"
                       name="email"
                       placeholder="example@gmail.com"
@@ -60,7 +68,7 @@ const LogoutUserComp = () => {
                   <div className="">
                     <Label className="sr-only">Admin password</Label>
                     <Input
-                      className="w-full h-14 px-2"
+                      className="h-14 w-full px-2"
                       id="adminPassword"
                       name="adminPassword"
                       placeholder="Admin password"
@@ -71,14 +79,12 @@ const LogoutUserComp = () => {
                   </div>
                   <Button className="w-full lg:w-[20%]">Logout</Button>
                 </aside>
-
               </div>
             </form>
           </AccordionContent>
         </AccordionItem>
       </Accordion>
     </div>
-
   );
 };
 
diff --git a/src/app/admin/user/page.tsx b/src/app/admin/user/page.tsx
index 370ea914b..19332ab92 100644
--- a/src/app/admin/user/page.tsx
+++ b/src/app/admin/user/page.tsx
@@ -4,10 +4,10 @@ import { UserIcon } from 'lucide-react';
 
 const UserAdminPage = () => {
   return (
-    <div className="flex flex-col gap-4 mx-auto px-4 max-w-7xl h-[100dvh]">
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+    <div className="mx-auto flex h-[100dvh] max-w-7xl flex-col gap-4 px-4">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <UserIcon size={18} />
-        <h2 className='text-md font-bold'>User Mangement</h2>
+        <h2 className="text-md font-bold">User Mangement</h2>
       </section>
       <LogoutUserComp />
     </div>
diff --git a/src/app/admin/userflags/page.tsx b/src/app/admin/userflags/page.tsx
index dc24e2a61..5e2a82efc 100644
--- a/src/app/admin/userflags/page.tsx
+++ b/src/app/admin/userflags/page.tsx
@@ -10,7 +10,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { Cuboid, Flag, ToggleRight } from 'lucide-react';
 
 export default function DiscordPage() {
@@ -19,27 +19,31 @@ export default function DiscordPage() {
   const [adminSecret, setAdminSecret] = useState('');
   const [contentId, setContentId] = useState('');
   return (
-    <div className="flex flex-col w-full max-w-7xl gap-2 px-4 mx-auto">
-
-      <section className='flex gap-2 border-2 p-4 bg-primary/5 rounded-lg my-4 items-center'>
+    <div className="mx-auto flex w-full max-w-7xl flex-col gap-2 px-4">
+      <section className="my-4 flex items-center gap-2 rounded-lg border-2 bg-primary/5 p-4">
         <Flag size={18} />
-        <h2 className='text-md font-bold'>User Flags</h2>
+        <h2 className="text-md font-bold">User Flags</h2>
       </section>
 
-      <Accordion defaultValue='toggle-drm' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem className='p-6' value="toggle-drm">
-          <AccordionTrigger className='text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+      <Accordion
+        defaultValue="toggle-drm"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem className="p-6" value="toggle-drm">
+          <AccordionTrigger className="text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <ToggleRight size={40} /> Toggle DRM
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <section className='grid grid-cols-1 py-4 lg:grid-cols-7 w-full'>
-              <aside className='col-span-2 lg:col-span-3'>
-                <h1 className='text-lg'>Toggle DRM</h1>
+            <section className="grid w-full grid-cols-1 py-4 lg:grid-cols-7">
+              <aside className="col-span-2 lg:col-span-3">
+                <h1 className="text-lg">Toggle DRM</h1>
               </aside>
 
-              <aside className='col-span-1 lg:col-span-4'>
+              <aside className="col-span-1 lg:col-span-4">
                 <form className="flex w-full flex-col gap-5 rounded-xl">
                   <Input
                     placeholder="email"
@@ -59,7 +63,7 @@ export default function DiscordPage() {
                   />
 
                   <Button
-                    className="w-full rounded  px-4 py-2 font-bold text-white"
+                    className="w-full rounded px-4 py-2 font-bold text-white"
                     onClick={async () => {
                       await fetch('/api/admin/drm', {
                         body: JSON.stringify({
@@ -77,7 +81,7 @@ export default function DiscordPage() {
                     Enable DRM
                   </Button>
                   <Button
-                    className="w-full rounded  px-4 py-2 font-bold text-white "
+                    className="w-full rounded px-4 py-2 font-bold text-white"
                     onClick={async () => {
                       await fetch('/api/admin/drm', {
                         body: JSON.stringify({
@@ -97,36 +101,34 @@ export default function DiscordPage() {
                 </form>
               </aside>
             </section>
-
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem className='border-none p-6' value="add-metadata">
-          <AccordionTrigger className='text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+        <AccordionItem className="border-none p-6" value="add-metadata">
+          <AccordionTrigger className="text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <Cuboid size={40} /> Add metadata
             </div>
           </AccordionTrigger>
           <AccordionContent>
-
-            <section className='grid grid-cols-1 py-4 lg:grid-cols-7 w-full'>
-              <aside className='col-span-2 lg:col-span-3'>
-                <h1 className='text-lg'>Add metadata</h1>
+            <section className="grid w-full grid-cols-1 py-4 lg:grid-cols-7">
+              <aside className="col-span-2 lg:col-span-3">
+                <h1 className="text-lg">Add metadata</h1>
               </aside>
 
-              <aside className='col-span-1 lg:col-span-4'>
+              <aside className="col-span-1 lg:col-span-4">
                 <div className="flex flex-col gap-5 rounded-lg">
                   <Textarea
                     // style={{ width: 800 }}
                     rows={10}
                     placeholder="Segments (JSON)"
-                    className=" text-lg "
+                    className="text-lg"
                     onChange={(e) => {
                       setSegmentsJson(e.target.value);
                     }}
                   />
                   <Input
                     placeholder="Admin Secret"
-                    className="h-14 text-lg "
+                    className="h-14 text-lg"
                     type=" text"
                     onChange={(e) => {
                       setAdminSecret(e.target.value);
@@ -134,7 +136,7 @@ export default function DiscordPage() {
                   />
                   <Input
                     placeholder="Content Id"
-                    className="h-14 text-lg "
+                    className="h-14 text-lg"
                     type=" text"
                     onChange={(e) => {
                       setContentId(e.target.value);
@@ -143,7 +145,7 @@ export default function DiscordPage() {
 
                   <h1>JSON is validated in the form.</h1>
                   <Button
-                    className="rounded px-4 py-2 font-bold text-white w-full lg:w-[20%]"
+                    className="w-full rounded px-4 py-2 font-bold text-white lg:w-[20%]"
                     onClick={async () => {
                       if (!isValidJsonString(segmentsJson)) {
                         return toast.warning('Not a valid JSON');
@@ -168,11 +170,9 @@ export default function DiscordPage() {
                 </div>
               </aside>
             </section>
-
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-
     </div>
   );
 }
diff --git a/src/app/api/admin/contentmetadata/route.ts b/src/app/api/admin/contentmetadata/route.ts
index eb22a3947..504944918 100644
--- a/src/app/api/admin/contentmetadata/route.ts
+++ b/src/app/api/admin/contentmetadata/route.ts
@@ -12,7 +12,7 @@ export const POST = async (req: NextRequest) => {
       contentId: number;
       adminPassword: string;
     } = await req.json();
-  
+
     if (adminPassword !== process.env.ADMIN_SECRET) {
       return NextResponse.json({}, { status: 403 });
     }
@@ -22,7 +22,7 @@ export const POST = async (req: NextRequest) => {
       },
       data: updates,
     });
-  
+
     return NextResponse.json({}, { status: 200 });
   } catch (err) {
     return NextResponse.json({}, { status: 500 });
diff --git a/src/app/api/admin/updatecontent/route.ts b/src/app/api/admin/updatecontent/route.ts
index 070d10187..216f35e6b 100644
--- a/src/app/api/admin/updatecontent/route.ts
+++ b/src/app/api/admin/updatecontent/route.ts
@@ -35,7 +35,7 @@ export const POST = async (req: NextRequest) => {
         video_1080p_3: updates.video_1080p,
         video_1080p_4: updates.video_1080p,
         /// mp4s
-  
+
         video_1080p_mp4_1: updates.video_1080p_mp4,
         video_1080p_mp4_2: updates.video_1080p_mp4,
         video_1080p_mp4_3: updates.video_1080p_mp4,
@@ -50,7 +50,7 @@ export const POST = async (req: NextRequest) => {
         video_360p_mp4_4: updates.video_360p_mp4,
       },
     });
-  
+
     return NextResponse.json({}, { status: 200 });
   } catch (err) {
     return NextResponse.json({}, { status: 500 });
diff --git a/src/app/payout-methods/page.tsx b/src/app/payout-methods/page.tsx
index ba5843891..1efafd4da 100644
--- a/src/app/payout-methods/page.tsx
+++ b/src/app/payout-methods/page.tsx
@@ -31,7 +31,7 @@ export default function Page() {
 
   return (
     <div className="h-max pb-4 transition-colors duration-500 md:p-8">
-      <div className="mb-6 flex flex-col items-start justify-center px-4 md:pt-20 pt-24 sm:px-8">
+      <div className="mb-6 flex flex-col items-start justify-center px-4 pt-24 sm:px-8 md:pt-20">
         <div className="my-2 mb-6 text-3xl text-black transition-colors duration-500 dark:text-white">
           <h1 className="mt-16 font-semibold text-black dark:text-white sm:mt-12">
             Payout Methods
diff --git a/src/components/NewPostDialog.tsx b/src/components/NewPostDialog.tsx
index 020d9a6f5..9e2e21ecb 100644
--- a/src/components/NewPostDialog.tsx
+++ b/src/components/NewPostDialog.tsx
@@ -56,7 +56,7 @@ export const NewPostDialog = () => {
       formRef?.current?.reset();
       setValue('');
       router.push(`/question/${data.slug}`);
-      setTags([]); 
+      setTags([]);
       handleOnCloseClick();
     },
     onError: (error) => {
@@ -88,19 +88,15 @@ export const NewPostDialog = () => {
       event.preventDefault();
       const formData = new FormData(formRef.current as HTMLFormElement);
       const tag = formData.get('tags')?.toString().trim().replace(/,+$/, '');
-  
+
       if (tag) {
-        setTags((prevTags) => [
-          ...prevTags,
-          tag
-        ]);
+        setTags((prevTags) => [...prevTags, tag]);
       }
       if (tagInputRef.current) {
         tagInputRef.current.value = '';
       }
     }
   };
-  
 
   const removeTag = (tag: string) => {
     setTags(tags.filter((t) => t !== tag));
@@ -206,4 +202,4 @@ export const NewPostDialog = () => {
       </AnimatePresence>
     </Modal>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c3e70dd37..3593fe824 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -183,7 +183,10 @@ export function Sidebar({
 
   return (
     <>
-      <Button onClick={() => setSidebarOpen((s) => !s)} className="w-fit gap-2 xl:absolute">
+      <Button
+        onClick={() => setSidebarOpen((s) => !s)}
+        className="w-fit gap-2 xl:absolute"
+      >
         {sidebarOpen ? <X className="size-5" /> : <Menu className="size-5" />}
         <span>{sidebarOpen ? 'Hide Contents' : 'Show Contents'}</span>
       </Button>
diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx
index 301932d03..5d0c5e827 100644
--- a/src/components/Signin.tsx
+++ b/src/components/Signin.tsx
@@ -48,7 +48,7 @@ const Signin = () => {
       ...prevState,
       emailReq: false,
     }));
-    
+
     // Check if the input is a phone number
     const phoneNumberRegex = /^[0-9]{10}$/;
     if (phoneNumberRegex.test(value)) {
@@ -62,9 +62,12 @@ const Signin = () => {
     }
 
     const [, currentDomain] = value.split('@');
-    
+
     // Clear suggestions if domain doesn't match
-    if (!currentDomain || !emailDomains.some((domain) => domain.startsWith(currentDomain))) {
+    if (
+      !currentDomain ||
+      !emailDomains.some((domain) => domain.startsWith(currentDomain))
+    ) {
       setSuggestedDomains([]); // Hide suggestions for mismatched domains
       return;
     }
diff --git a/src/components/admin/AddContent.tsx b/src/components/admin/AddContent.tsx
index 8cef2d307..1cdd99174 100644
--- a/src/components/admin/AddContent.tsx
+++ b/src/components/admin/AddContent.tsx
@@ -3,11 +3,18 @@ import { useEffect, useState } from 'react';
 import { AddNotionMetadata } from './AddNotionMetadata';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { FaDiscord } from 'react-icons/fa';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 export const AddContent = ({
   rest,
@@ -39,10 +46,9 @@ export const AddContent = ({
   const [loading, setLoading] = useState<boolean>(false);
 
   const getLabelClassName = (value: string) => {
-    return `flex gap-6 p-6 rounded-lg items-center space-x-2 ${type === value
-      ? 'border-[3px] border-blue-500'
-      : 'border-[3px]'
-      }`;
+    return `flex gap-6 p-6 rounded-lg items-center space-x-2 ${
+      type === value ? 'border-[3px] border-blue-500' : 'border-[3px]'
+    }`;
   };
 
   const handleContentSubmit = async () => {
@@ -81,72 +87,72 @@ export const AddContent = ({
   };
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-7 rounded-xl border-2 p-6 gap-4">
-      <aside className='flex flex-col gap-8 col-span-1 lg:col-span-3'>
+    <div className="grid grid-cols-1 gap-4 rounded-xl border-2 p-6 lg:grid-cols-7">
+      <aside className="col-span-1 flex flex-col gap-8 lg:col-span-3">
         <div>Select the Content Mode</div>
 
         <RadioGroup
-          className='flex flex-warp overflow-auto no-scrollbar max-w-full items-start gap-4'
+          className="flex-warp no-scrollbar flex max-w-full items-start gap-4 overflow-auto"
           value={type}
           onValueChange={(value) => {
             setType(value);
             setMetadata({});
           }}
         >
-          <Label htmlFor="video" className={getLabelClassName("video")}>
+          <Label htmlFor="video" className={getLabelClassName('video')}>
             <RadioGroupItem value="video" id="video" />
             <span>Video</span>
           </Label>
-          <Label htmlFor="folder" className={getLabelClassName("folder")}>
+          <Label htmlFor="folder" className={getLabelClassName('folder')}>
             <RadioGroupItem value="folder" id="folder" />
             <span>Folder</span>
           </Label>
-          <Label htmlFor="notion" className={getLabelClassName("notion")}>
+          <Label htmlFor="notion" className={getLabelClassName('notion')}>
             <RadioGroupItem value="notion" id="notion" />
             <span>Notion</span>
           </Label>
         </RadioGroup>
 
-        <div className='border-t-2 my-2 py-6 w-full md:w-[90%] flex flex-col gap-4'>
-          <div className='flex gap-1 flex-col'>
-            <h3 className='text-xl font-bold'>Apps Integrations</h3>
-            <h6 className='text-md text-gray-500'>Click app to start sending notification to that platform</h6>
+        <div className="my-2 flex w-full flex-col gap-4 border-t-2 py-6 md:w-[90%]">
+          <div className="flex flex-col gap-1">
+            <h3 className="text-xl font-bold">Apps Integrations</h3>
+            <h6 className="text-md text-gray-500">
+              Click app to start sending notification to that platform
+            </h6>
           </div>
 
-          {(type === 'video' || type === 'notion') ?
-            (
-              <>
-                <div onClick={handleDiscordClick} className={`p-2 cursor-pointer border-[3px] ${discordChecked ? 'border-blue-500' : ''} bg-blue-400 bg-opacity-5 rounded-lg w-fit`}>
-                  <FaDiscord className='text-5xl' />
-                </div>
-
-                <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-                  <DialogContent>
-                    <DialogHeader>
-                      <DialogTitle>Send Notification to Discord?</DialogTitle>
-                      <DialogDescription>
-                        Do you want to send the notification to Discord?
-                      </DialogDescription>
-                    </DialogHeader>
-                    <DialogFooter>
-                      <Button variant="outline" onClick={() => handleModalChoice(false)}>
-                        No
-                      </Button>
-                      <Button onClick={() => handleModalChoice(true)}>
-                        Yes
-                      </Button>
-                    </DialogFooter>
-                  </DialogContent>
-                </Dialog>
-              </>
-
-            )
-            :
-            (
-              <div>No Apps automations available for this option</div>
-            )
-          }
+          {type === 'video' || type === 'notion' ? (
+            <>
+              <div
+                onClick={handleDiscordClick}
+                className={`cursor-pointer border-[3px] p-2 ${discordChecked ? 'border-blue-500' : ''} w-fit rounded-lg bg-blue-400 bg-opacity-5`}
+              >
+                <FaDiscord className="text-5xl" />
+              </div>
 
+              <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Send Notification to Discord?</DialogTitle>
+                    <DialogDescription>
+                      Do you want to send the notification to Discord?
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <Button
+                      variant="outline"
+                      onClick={() => handleModalChoice(false)}
+                    >
+                      No
+                    </Button>
+                    <Button onClick={() => handleModalChoice(true)}>Yes</Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </>
+          ) : (
+            <div>No Apps automations available for this option</div>
+          )}
         </div>
       </aside>
 
@@ -161,24 +167,24 @@ export const AddContent = ({
           Notion
         </Button>
       </div> */}
-      <div className="grid col-span-1 lg:col-span-4 gap-4 grid-cols-1">
+      <div className="col-span-1 grid grid-cols-1 gap-4 lg:col-span-4">
         <Input
           type="text"
           placeholder="Title"
           onChange={(e) => setTitle(e.target.value)}
-          className='h-14'
+          className="h-14"
         />
         <Input
           type="text"
           placeholder="Image url"
           onChange={(e) => setImageUri(e.target.value)}
-          className='h-14'
+          className="h-14"
         />
         <Input
           type="text"
           placeholder="Admin password"
           onChange={(e) => setAdminPassword(e.target.value)}
-          className='h-14'
+          className="h-14"
         />
         {type === 'video' && <AddVideosMetadata onChange={setMetadata} />}
         {type === 'notion' && <AddNotionMetadata onChange={setMetadata} />}
@@ -239,7 +245,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_1080p(e.target.value);
         }}
-        className='h-14'
+        className="h-14"
       />
       <Input
         type="text"
@@ -247,7 +253,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_720p(e.target.value);
         }}
-        className='h-14'
+        className="h-14"
       />
       <Input
         type="text"
@@ -255,7 +261,7 @@ function AddVideoMetadata({ onChange }: { onChange: (metadata: any) => void }) {
         onChange={async (e) => {
           await setVideo_360p(e.target.value);
         }}
-        className='h-14'
+        className="h-14"
       />
     </div>
   );
diff --git a/src/components/admin/UpdateVideoClient.tsx b/src/components/admin/UpdateVideoClient.tsx
index 72dab147a..92aed3dd3 100644
--- a/src/components/admin/UpdateVideoClient.tsx
+++ b/src/components/admin/UpdateVideoClient.tsx
@@ -6,7 +6,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from '@/components/ui/accordion';
 import { FileText, Video } from 'lucide-react';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
@@ -37,22 +37,26 @@ export const UpdateVideoClient = ({
 
   const [adminPassword, setAdminPassword] = useState('');
   return (
-    <div className='max-w-7xl mx-auto px-4'>
-
-      <Accordion defaultValue='m3u8-mp4' className='border-2 p-4 rounded-2xl' type="single" collapsible>
-        <AccordionItem value="m3u8-mp4" >
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+    <div className="mx-auto max-w-7xl px-4">
+      <Accordion
+        defaultValue="m3u8-mp4"
+        className="rounded-2xl border-2 p-4"
+        type="single"
+        collapsible
+      >
+        <AccordionItem value="m3u8-mp4">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <Video size={40} /> M3U8 and MP4 Links
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='grid grid-cols-1 p-6 lg:grid-cols-7 w-full gap-4'>
-              <aside className='col-span-1 lg:col-span-3'>
-                <p className='text-lg'>Add Links</p>
+            <div className="grid w-full grid-cols-1 gap-4 p-6 lg:grid-cols-7">
+              <aside className="col-span-1 lg:col-span-3">
+                <p className="text-lg">Add Links</p>
               </aside>
 
-              <aside className='col-span-1 flex flex-col gap-4 lg:col-span-4'>
+              <aside className="col-span-1 flex flex-col gap-4 lg:col-span-4">
                 <Label>M3U8 Links</Label>
                 <Input
                   value={link1080}
@@ -81,7 +85,7 @@ export const UpdateVideoClient = ({
                   placeholder={'m3u8 360p'}
                 />
 
-                <Label className='mt-4'>MP4 Links</Label>
+                <Label className="mt-4">MP4 Links</Label>
 
                 <Input
                   value={link1080_mp4}
@@ -140,18 +144,18 @@ export const UpdateVideoClient = ({
         </AccordionItem>
 
         <AccordionItem value="slides">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <FileText size={40} /> Slides Links
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='grid grid-cols-1  p-6 lg:grid-cols-7 w-full gap-4'>
-              <aside className='col-span-1 lg:col-span-3'>
-                <p className='text-lg'>Add Links</p>
+            <div className="grid w-full grid-cols-1 gap-4 p-6 lg:grid-cols-7">
+              <aside className="col-span-1 lg:col-span-3">
+                <p className="text-lg">Add Links</p>
               </aside>
 
-              <aside className='col-span-1 flex flex-col gap-4 lg:col-span-4'>
+              <aside className="col-span-1 flex flex-col gap-4 lg:col-span-4">
                 <Input
                   value={pdfLink}
                   type="text"
@@ -166,7 +170,7 @@ export const UpdateVideoClient = ({
                   onChange={(e) => setAdminPassword(e.target.value)}
                 />
                 <Button
-                  className="my-4 rounded p-2 font-bold text-white w-full lg:w-[20%]"
+                  className="my-4 w-full rounded p-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     await axios.post('/api/admin/contentmetadata', {
                       adminPassword,
@@ -183,19 +187,19 @@ export const UpdateVideoClient = ({
             </div>
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem className='border-none' value="vtt">
-          <AccordionTrigger className='p-6 text-lg lg:text-2xl font-bold'>
-            <div className='flex gap-4 flex-col' >
+        <AccordionItem className="border-none" value="vtt">
+          <AccordionTrigger className="p-6 text-lg font-bold lg:text-2xl">
+            <div className="flex flex-col gap-4">
               <FileText size={40} /> VTT Link
             </div>
           </AccordionTrigger>
           <AccordionContent>
-            <div className='grid grid-cols-1 p-6 lg:grid-cols-7 w-full gap-4'>
-              <aside className='col-span-1 lg:col-span-3'>
-                <p className='text-lg'>Add Links</p>
+            <div className="grid w-full grid-cols-1 gap-4 p-6 lg:grid-cols-7">
+              <aside className="col-span-1 lg:col-span-3">
+                <p className="text-lg">Add Links</p>
               </aside>
 
-              <aside className='col-span-1 lg:col-span-4'>
+              <aside className="col-span-1 lg:col-span-4">
                 <Input
                   value={vttLink}
                   type="text"
@@ -211,7 +215,7 @@ export const UpdateVideoClient = ({
                   className="my-3"
                 />
                 <Button
-                  className="my-4 rounded  p-2 font-bold text-white w-full lg:w-[20%]"
+                  className="my-4 w-full rounded p-2 font-bold text-white lg:w-[20%]"
                   onClick={async () => {
                     await axios.post('/api/admin/contentmetadata', {
                       adminPassword,
@@ -229,7 +233,6 @@ export const UpdateVideoClient = ({
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-
     </div>
   );
 };
diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
index 3b35f0ec0..62e0901d7 100644
--- a/src/components/posts/PostCard.tsx
+++ b/src/components/posts/PostCard.tsx
@@ -62,7 +62,7 @@ const PostCard: React.FC<IProps> = ({
 
   const router = useRouter();
 
-  const [isPending, startTransition] = useTransition(); 
+  const [isPending, startTransition] = useTransition();
 
   const { execute, fieldErrors } = useAction(createAnswer, {
     onSuccess: () => {
diff --git a/src/components/posts/form/form-input.tsx b/src/components/posts/form/form-input.tsx
index 577bd81a9..bfa3ec8d1 100644
--- a/src/components/posts/form/form-input.tsx
+++ b/src/components/posts/form/form-input.tsx
@@ -77,4 +77,4 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
   },
 );
 
-FormPostInput.displayName = 'FormPostInput';
\ No newline at end of file
+FormPostInput.displayName = 'FormPostInput';
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index cb8a4e28c..f92eb156a 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -12,7 +12,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn('grid gap-2', className)}
       {...props}
       ref={ref}
     />
@@ -28,8 +28,8 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     >