diff --git a/.gitignore b/.gitignore
index b8265a6ce..d7e11e5e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 .yarn/install-state.gz
+bun.lockb
 
 # docker volume
 /postgres-data/
diff --git a/package.json b/package.json
index 21d1a0a46..8fe183237 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@prisma/client": "^5.18.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
@@ -62,6 +62,7 @@
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "1.0.0",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "discord-oauth2": "^2.11.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a2bb066e..3eba56b84 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,7 +67,7 @@ importers:
         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)
+        version: 3.17.0(react@18.3.1)
       '@types/bcrypt':
         specifier: ^5.0.2
         version: 5.0.2
diff --git a/src/app/(main)/(pages)/home/page.tsx b/src/app/(main)/(pages)/home/page.tsx
index d095f57b9..e624d043f 100644
--- a/src/app/(main)/(pages)/home/page.tsx
+++ b/src/app/(main)/(pages)/home/page.tsx
@@ -1,7 +1,7 @@
 import { Greeting } from '@/components/Greeting';
 import { MyCourses } from '@/components/MyCourses';
 import { Redirect } from '@/components/Redirect';
-import SearchBar from '@/components/search/SearchBar';
+import { SearchBar } from '@/components/search/SearchBar';
 import { getServerSession } from 'next-auth';
 
 export default async function MyCoursesPage() {
@@ -17,7 +17,9 @@ export default async function MyCoursesPage() {
         <h1 className="text-wrap text-3xl font-extrabold capitalize tracking-tighter md:text-4xl">
           <Greeting /> {session.user.name}
         </h1>
-        <SearchBar />
+        <div>
+          <SearchBar />
+        </div>
       </div>
 
       <div className="flex h-full flex-col gap-4 rounded-2xl py-4">
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..7dcd5df07 100644
--- a/src/components/NewPostDialog.tsx
+++ b/src/components/NewPostDialog.tsx
@@ -23,7 +23,7 @@ export const NewPostDialog = () => {
   const { theme } = useTheme();
   const formRef = useRef<ElementRef<'form'>>(null);
   const searchParam = useSearchParams();
-  const paramsObject = searchParamsToObject(searchParam);
+  const paramsObject = searchParamsToObject(searchParam as any); // build fix (eslint)
   const path = usePathname();
   const router = useRouter();
   const tagInputRef = useRef<HTMLInputElement | null>(null);
@@ -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/Pagination.tsx b/src/components/Pagination.tsx
index 0bd02d159..79a4dd3e1 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -14,7 +14,7 @@ interface IPagination {
 const Pagination: React.FC<IPagination> = ({ dataLength = 1 }) => {
   const searchParams = useSearchParams();
   const path = usePathname();
-  const paramsObj = searchParamsToObject(searchParams);
+  const paramsObj = searchParamsToObject(searchParams as any); // build fix (eslint)
   const paginationQ = paginationData(paramsObj);
   return (
     <div className="flex items-center justify-center space-x-4">
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/comment/Comments.tsx b/src/components/comment/Comments.tsx
index 8e1261380..fcb14a13a 100644
--- a/src/components/comment/Comments.tsx
+++ b/src/components/comment/Comments.tsx
@@ -144,7 +144,7 @@ const Comments = async ({
                   <span>
                     {searchParams.type === CommentType.INTRO
                       ? CommentType.INTRO
-                      : 'All comments' || 'All comments'}
+                      : 'All comments'}
                   </span>
                   <ChevronDownIcon className="h-4 w-4" />
                 </Button>
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/search.tsx b/src/components/search.tsx
index 8cef4ef4d..3e708a9dc 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -12,7 +12,7 @@ const Search = () => {
   const searchParams = useSearchParams();
   const [search, setSearch] = useState('');
   const path = usePathname();
-  const paramsObj = searchParamsToObject(searchParams);
+  const paramsObj = searchParamsToObject(searchParams as any); // build fix (eslint)
 
   const handleSearch = () => {
     router.push(getUpdatedUrl(path, paramsObj, { search }));
diff --git a/src/components/search/MobileScreenSearch.tsx b/src/components/search/MobileScreenSearch.tsx
deleted file mode 100644
index 6b623f297..000000000
--- a/src/components/search/MobileScreenSearch.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client';
-import { SearchIcon, XIcon } from 'lucide-react';
-import { useState } from 'react';
-import SearchBar from './SearchBar';
-
-const MobileScreenSearch = () => {
-  const [showSearchBar, setShowSearchBar] = useState(false);
-
-  const toggleSearchBar = () => {
-    setShowSearchBar((prev) => !prev);
-  };
-  return (
-    <div className="md:hidden">
-      {showSearchBar ? (
-        <div className="absolute left-0 top-0 z-[100] flex h-16 w-full items-center gap-3 border-b bg-white px-3 dark:bg-[#020817]">
-          <SearchBar onCardClick={toggleSearchBar} />
-          <XIcon onClick={toggleSearchBar} />
-        </div>
-      ) : (
-        <SearchIcon onClick={toggleSearchBar} size={20} className="mx-2" />
-      )}
-    </div>
-  );
-};
-
-export default MobileScreenSearch;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 5cf5ad881..1fbc5590c 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -1,31 +1,26 @@
 'use client';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@/components/ui/input';
-import { SearchIcon, X } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { TSearchedVideos } from '@/app/api/search/route';
 import { useRouter } from 'next/navigation';
-import useClickOutside from '@/hooks/useClickOutside';
 import VideoSearchCard from './VideoSearchCard';
 import VideoSearchInfo from './VideoSearchInfo';
 import { toast } from 'sonner';
 import VideoSearchLoading from './VideoSearchLoading';
+import {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+} from '../ui/command';
 
-const SearchBar = ({ onCardClick }: { onCardClick?: () => void }) => {
+export function SearchBar() {
   const [searchTerm, setSearchTerm] = useState('');
-  const [searchedVideos, setSearchedVideos] = useState<
-    TSearchedVideos[] | null
-  >(null);
-  const [isInputFocused, setIsInputFocused] = useState<boolean>(false);
+  const [searchedVideos, setSearchedVideos] = useState<TSearchedVideos[]>([]);
   const [loading, setLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const router = useRouter();
 
-  const ref = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  useClickOutside(ref, () => {
-    setIsInputFocused(false);
-  });
-
   const fetchData = useCallback(async (searchTerm: string) => {
     setLoading(true);
     try {
@@ -48,31 +43,57 @@ const SearchBar = ({ onCardClick }: { onCardClick?: () => void }) => {
 
       return () => clearTimeout(timeoutId);
     }
-    setSearchedVideos(null);
+    setSearchedVideos([]);
   }, [searchTerm, fetchData]);
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(event.target.value);
-  };
-
-  const clearSearchTerm = () => {
-    setSearchTerm('');
-  };
-
-  const handleCardClick = (videoUrl: string) => {
-    if (onCardClick !== undefined) {
-      onCardClick();
-    }
-    clearSearchTerm();
-    router.push(videoUrl);
-  };
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      // Check for Ctrl+K on Windows/Linux or Cmd+K on macOS
+      if (
+        (event.ctrlKey && event.key === 'k') ||
+        (event.metaKey && event.key === 'k')
+      ) {
+        event.preventDefault();
+        setDialogOpen((prev) => !prev);
+      }
+      // For control of search result
+      switch (event.code) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelectedIndex(
+            (prevIndex) => (prevIndex + 1) % searchedVideos.length,
+          );
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelectedIndex(
+            (prevIndex) =>
+              (prevIndex - 1 + searchedVideos.length) % searchedVideos.length,
+          );
+          break;
+        case 'Enter':
+          if (selectedIndex !== -1) {
+            event.preventDefault();
+            const {
+              id: videoId,
+              parentId,
+              parent,
+            } = searchedVideos[selectedIndex];
 
-  const handleClearInput = () => {
-    clearSearchTerm();
-    if (searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  };
+            if (parentId && parent?.courses.length) {
+              const courseId = parent.courses[0].courseId;
+              const videoUrl = `/courses/${courseId}/${parentId}/${videoId}`;
+              router.push(videoUrl);
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [searchedVideos, selectedIndex]);
 
   const renderSearchResults = () => {
     if (searchTerm.length < 3) {
@@ -84,45 +105,42 @@ const SearchBar = ({ onCardClick }: { onCardClick?: () => void }) => {
     } else if (!searchedVideos || searchedVideos.length === 0) {
       return <VideoSearchInfo text="No videos found" />;
     }
-    return searchedVideos.map((video) => (
-      <VideoSearchCard
-        key={video.id}
-        video={video}
-        onCardClick={handleCardClick}
-      />
+    return searchedVideos.map((video, index) => (
+      <div
+        className={` ${index === selectedIndex && 'bg-blue-600/10 text-blue-600'}`}
+      >
+        <VideoSearchCard key={video.id} video={video} />
+      </div>
     ));
   };
 
   return (
-    <div
-      className="relative flex h-10 w-full items-center lg:w-[32vw]"
-      ref={ref}
-    >
-      {/* Search Input Bar */}
-      <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-primary/80" />
-      <Input
-        placeholder="Search for videos..."
-        className="focus:ring-none rounded-lg border-none bg-primary/5 px-10 text-base focus:outline-none"
-        value={searchTerm}
-        onChange={handleInputChange}
-        onFocus={() => setIsInputFocused(true)}
-        ref={searchInputRef}
-      />
-      {searchTerm.length > 0 && (
-        <X
-          className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 transform cursor-pointer"
-          onClick={handleClearInput}
-        />
-      )}
-
-      {/* Search Results */}
-      {isInputFocused && searchTerm.length > 0 && (
-        <div className="absolute top-12 z-30 max-h-[40vh] w-full overflow-y-auto rounded-lg border-2 bg-background p-2 shadow-lg">
-          {renderSearchResults()}
+    <>
+      <Command onClick={() => setDialogOpen(true)}>
+        <div className="flex items-center justify-between border-2">
+          <CommandInput
+            placeholder="Search video..."
+            value={searchTerm}
+            onValueChange={(search) => setSearchTerm(search)}
+          />
+          <kbd className="m-1 flex items-center space-x-2 rounded-sm bg-white/15 p-1.5 text-center leading-3">
+            <span className="text-md">⌘</span>{' '}
+            <span className="text-sm">K</span>
+          </kbd>
         </div>
-      )}
-    </div>
+        <CommandList></CommandList>
+      </Command>
+      <CommandDialog
+        open={dialogOpen}
+        onOpenChange={() => setDialogOpen((prev) => !prev)}
+      >
+        <CommandInput
+          placeholder="Search video..."
+          value={searchTerm}
+          onValueChange={(search) => setSearchTerm(search)}
+        />
+        <CommandList>{renderSearchResults()}</CommandList>
+      </CommandDialog>
+    </>
   );
-};
-
-export default SearchBar;
+}
diff --git a/src/components/search/VideoSearchCard.tsx b/src/components/search/VideoSearchCard.tsx
index 9f4e16aa7..888d71a90 100644
--- a/src/components/search/VideoSearchCard.tsx
+++ b/src/components/search/VideoSearchCard.tsx
@@ -1,29 +1,23 @@
 import { TSearchedVideos } from '@/app/api/search/route';
 import { Play } from 'lucide-react';
+import Link from 'next/link';
 import React from 'react';
 
-const VideoSearchCard = ({
-  video,
-  onCardClick,
-}: {
-  video: TSearchedVideos;
-  onCardClick: (videoUrl: string) => void;
-}) => {
+const VideoSearchCard = ({ video }: { video: TSearchedVideos }) => {
   const { id: videoId, parentId, parent } = video;
-
-  if (parentId && parent) {
+  if (parentId && parent?.courses.length) {
     const courseId = parent.courses[0].courseId;
     const videoUrl = `/courses/${courseId}/${parentId}/${videoId}`;
     return (
-      <div
+      <Link
+        href={videoUrl}
         className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 hover:bg-blue-600/10 hover:text-blue-600"
-        onClick={() => onCardClick(videoUrl)}
       >
         <Play className="size-4" />
         <span className="w-4/5 truncate font-medium capitalize">
           {video.title}
         </span>
-      </div>
+      </Link>
     );
   }
 };
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 000000000..7c45a86da
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
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}
     >