diff --git a/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx b/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx
new file mode 100644
index 00000000..0de9a8a2
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx
@@ -0,0 +1,110 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { CalendarIcon, Plus } from "lucide-react";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { toast } from "@/components/ui/use-toast"
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import Image from "next/image";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { saveKnowledgeBaseCategory } from "@/service/master/knowledge-base";
+
+const FormSchema = z.object({
+  name: z.string().min(2, {
+    message: "Name must be at least 2 characters.",
+  }),
+})
+
+const CreateCategory = ({ onSuccess } : { onSuccess?: () => void } ) => {
+  const t = useTranslations("TodoApp")
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: "",
+    },
+  })
+
+  async function save(data: any) {
+    const reqData = {
+        name: data.name
+    }
+    const response = await saveKnowledgeBaseCategory(reqData);
+    if (response?.error) {
+        return false;
+    }
+    toast({
+      title: "Task created successfully.",
+    });
+    if (onSuccess) {
+      onSuccess();
+    }
+  }
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    save(data);
+    setIsDialogOpen(false);
+  }
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button fullWidth size="lg" className="dark:bg-background dark:text-foreground">
+          <Plus className="w-6 h-6 me-1.5" />
+          Add Category
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="mb-4">
+          <DialogTitle>Add Category</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-default-700">Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Enter Title" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex justify-end">
+              <Button type="submit">Submit</Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CreateCategory;
\ No newline at end of file
diff --git a/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx b/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx
index 55edf433..fca7d79a 100644
--- a/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx
+++ b/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx
@@ -11,8 +11,9 @@ import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import {getKnowledgeBaseCategoryList, getKnowledgeBaseList} from "@/service/master/knowledge-base";
 import React from "react";
-import {Plus} from "lucide-react";
+import {Plus, Trash2} from "lucide-react";
 import {Button} from "@/components/ui/button";
+import CreateCategory from "./create-category";
 
 const KnowledgeBase = () => {
   const [categories, setCategories] = React.useState<any>([]);
@@ -47,25 +48,26 @@ const KnowledgeBase = () => {
             <Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
               <CardContent className=" p-6">
                 <TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
-                  <Button
-                      fullWidth
-                      size="lg"
-                      className="dark:bg-background dark:ring-background dark:text-foreground"
-                  >
-                    <Plus className="w-6 h-6 me-1.5"/>
-                    Add Category
-                  </Button>
+                  <CreateCategory onSuccess={fetchCategoryList} />
                   {categories?.map((category: any, index: number) => (
-                      <TabsTrigger
+                      <div>
+                        <TabsTrigger
                           key={index}
                           value={`category-${index}`}
                           onClick={() => {
                             fetchQuestions(category?.id);
                           }}
                           className="data-[state=active]:bg-secondary  data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
-                      >
-                        {category?.name}
-                      </TabsTrigger>
+                        >
+                          {category?.name}
+                          <div
+                              className="absolute right-2 top-2 hidden group-hover:inline-flex"
+                              // onClick={() => deleteCategory(category?.id)}
+                          >
+                            <Trash2 className="w-3.5 h-3.5  me-1" />
+                          </div>
+                        </TabsTrigger>
+                      </div>
                   ))}
                 </TabsList>
               </CardContent>
diff --git a/components/loader.tsx b/components/loader.tsx
index 5abf7705..aeb81237 100644
--- a/components/loader.tsx
+++ b/components/loader.tsx
@@ -4,15 +4,23 @@ import React from "react";
 import { Loader2 } from "lucide-react";
 import DashCodeLogo from "./dascode-logo";
 import { useMounted } from "@/hooks/use-mounted";
+import Image from "next/image";
 const Loader = () => {
     const mounted = useMounted()
     return (
         mounted ? null : <div className=" h-screen flex items-center justify-center flex-col space-y-2">
             <div className="flex gap-2 items-center ">
-                <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" />
-                <h1 className="text-xl font-semibold text-default-900 ">
+                {/* <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" /> */}
+                <Image
+                    src="/assets/mediahub-logo-min.png"
+                    alt=""
+                    width={80}
+                    height={80}
+                    className="mb-4 w-full h-full"
+                />
+                {/* <h1 className="text-xl font-semibold text-default-900 ">
                     DashCode
-                </h1>
+                </h1> */}
             </div>
             <span className=" inline-flex gap-1  items-center">
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
diff --git a/public/assets/mediahub-logo-min.png b/public/assets/mediahub-logo-min.png
new file mode 100644
index 00000000..01007c53
Binary files /dev/null and b/public/assets/mediahub-logo-min.png differ
diff --git a/service/master/knowledge-base.ts b/service/master/knowledge-base.ts
index 5f9b5ec8..2d842711 100644
--- a/service/master/knowledge-base.ts
+++ b/service/master/knowledge-base.ts
@@ -1,5 +1,6 @@
 import {
   httpGetInterceptor,
+  httpPostInterceptor,
 } from "../http-config/http-interceptor-service";
 
 export async function getKnowledgeBaseCategoryList() {
@@ -11,3 +12,8 @@ export async function getKnowledgeBaseList(id: number) {
   const url = `knowledge-base?categoryId=${id}`;
   return httpGetInterceptor(url);
 }
+
+export async function saveKnowledgeBaseCategory(data: any) {
+  const url = 'knowledge-base/category';
+  return httpPostInterceptor(url, data);
+}
\ No newline at end of file