diff --git a/package-lock.json b/package-lock.json
index b76af6c..0d62def 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,11 @@
         "@chakra-ui/react": "^3.2.3",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "chart.js": "^4.4.7",
         "framer-motion": "^11.18.0",
         "next-themes": "^0.4.4",
         "react": "^18.3.1",
+        "react-chartjs-2": "^5.3.0",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.54.2",
         "react-icons": "^5.4.0",
@@ -2660,6 +2662,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5220,6 +5228,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
+      "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -8048,6 +8068,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/package.json b/package.json
index dbaf301..ca92e73 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
     "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "chart.js": "^4.4.7",
     "framer-motion": "^11.18.0",
     "next-themes": "^0.4.4",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
diff --git a/src/Pages/Dashboard/Dashboard.tsx b/src/Pages/Dashboard/Dashboard.tsx
index d063737..5a0e63e 100644
--- a/src/Pages/Dashboard/Dashboard.tsx
+++ b/src/Pages/Dashboard/Dashboard.tsx
@@ -1,8 +1,105 @@
+import {
+  Box,
+  createListCollection,
+  Heading,
+  HStack,
+  Stack,
+  Status,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import BarChart from "../../components/Charts/BarChart";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from "../../components/ui/select";
+import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
 
 const Dashboard = () => {
-  return (
-    <div>Dashboard</div>
-  )
-}
+  const frameworks = createListCollection({
+    items: [
+      { label: "React.js", value: "react" },
+      { label: "Vue.js", value: "vue" },
+      { label: "Angular", value: "angular" },
+      { label: "Svelte", value: "svelte" },
+    ],
+  });
 
-export default Dashboard
\ No newline at end of file
+  return (
+    <MainFrame>
+      <Box display={"flex"} p={"20px"} gap={5}>
+        <Box w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
+          <Heading fontSize={"sm"} p={2}>
+            Total Users
+          </Heading>
+          <Tabs.Root
+            size={"sm"}
+            w={"80%"}
+            m={"auto"}
+            variant="enclosed"
+            fitted
+            defaultValue={"tab-1"}
+            mb={6}
+          >
+            <Tabs.List>
+              <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
+          <Box>
+            <SemiDoughnutChart />
+          </Box>
+
+          <Box w={'80%'} m={'auto'} display={'flex'} justifyContent={'space-between'} mt={8}>
+            <Status.Root colorPalette="blue">
+              <Status.Indicator />
+              Recruiter <Text fontWeight={500}>2554</Text>
+            </Status.Root>
+            <Status.Root colorPalette="blue">
+              <Status.Indicator />
+              Customer <Text fontWeight={500}>1224</Text>
+            </Status.Root>
+          </Box>
+        </Box>
+        <Box
+          p={"20px"}
+          w={"50%"}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+        >
+          <HStack alignItems={"center"} mb={4}>
+            <Text fontSize={"sm"}>Item approvals in</Text>
+            <SelectRoot collection={frameworks} size="xs" width="200px">
+              <SelectTrigger>
+                <SelectValueText p={2} placeholder="Select movie" />
+              </SelectTrigger>
+              <SelectContent p={2}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem item={movie} key={movie.value}>
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>
+          </HStack>
+          <BarChart />
+        </Box>
+        <Box
+          w={"20%"}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+        ></Box>
+      </Box>
+      <Box p={"20px"} display={"flex"} gap={5}>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default Dashboard;
diff --git a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
new file mode 100644
index 0000000..8fa5979
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
@@ -0,0 +1,128 @@
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+
+function AddRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> Add
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+            Add User Accounts
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack pt={3} pb={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                First Name
+              </Field.Label>
+              <Input
+                name="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                Last Name
+              </Field.Label>
+              <Input
+                name="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Gender
+              </Field.Label>
+              <Input
+                name="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                DOB
+              </Field.Label>
+              <Input
+                name="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                OTP Verified
+              </Field.Label>
+              <Input
+                name="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Language
+              </Field.Label>
+              <Input
+                name="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={5}>
+          <DialogActionTrigger asChild>
+            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
+              Save
+            </Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default AddRegisterUsers;
diff --git a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
new file mode 100644
index 0000000..4604103
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
@@ -0,0 +1,125 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { BiEdit } from "react-icons/bi";
+import { Button } from "../../../components/ui/button";
+
+function EditRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+            Edit user Accounts
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack pt={3} pb={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                First Name
+              </Field.Label>
+              <Input
+                name="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                Last Name
+              </Field.Label>
+              <Input
+                name="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Gender
+              </Field.Label>
+              <Input
+                name="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                DOB
+              </Field.Label>
+              <Input
+                name="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                OTP Verified
+              </Field.Label>
+              <Input
+                name="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Language
+              </Field.Label>
+              <Input
+                name="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={5}>
+          <DialogActionTrigger asChild>
+            <Button rounded={'md'} w={"100%"} size={'sm'} bg={'#02A0A0'}>Save</Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditRegisterUsers;
diff --git a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
index 67e01e0..4bf7247 100644
--- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
@@ -1,18 +1,18 @@
 import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import AlertDailog from "../../../components/AlertDailog";
-import { FcCancel } from "react-icons/fc";
 import { NavLink } from "react-router-dom";
-import { MdOutlineRemoveRedEye } from "react-icons/md";
 import { RiDeleteBin5Line } from "react-icons/ri";
 import DataTable from "../../../components/DataTable";
-import { HiCheck } from "react-icons/hi2";
-import { HiX } from "react-icons/hi";
 import { Switch } from "../../../components/ui/switch";
-import { Button } from "../../../components/ui/button";
 import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import { BiEdit } from "react-icons/bi";
+import ViewRegisterUsers from "./ViewRegisterUsers";
+import EditRegisterUsers from "./EditRegisterUsers";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+import AddRegisterUsers from "./AddRegisterUsers";
 
 const tableHeadRow = [
   "Sr. No",
@@ -42,24 +42,14 @@ const registerUser: any[] = [
     ),
     "Action": (
       <HStack justifyContent="center">  
-        <NavLink to="/manage-user/active-user/view-active-user">
-          <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          />
-        </NavLink>
-
-        <NavLink to="/manage-user/active-user/view-active-user">
-          <BiEdit
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          />
-        </NavLink>
-
+        <ViewRegisterUsers />
+        <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
           AltertTiggerIcon={RiDeleteBin5Line}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
-          alertCaption="are you sure you want to delete ?"
+          alertCaption="Are You Sure You Want To Delete This User ?"
           onConfirm={() => {
             console.log("User deleted:", i + 1);
           }}
@@ -105,6 +95,7 @@ const RegisterUsers = () => {
                 ps={8}
               />
             </InputGroup>
+            <AddRegisterUsers />
           </HStack>
         </HStack>
         <DataTable
diff --git a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
new file mode 100644
index 0000000..95717cd
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -0,0 +1,126 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+
+function ViewRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <MdOutlineRemoveRedEye
+          color="#000"
+          style={{ cursor: "pointer", fontSize: "16px" }}
+        />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+            View Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack pt={3} pb={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                First Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
+                Last Name
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Gender
+              </Field.Label>
+              <Input
+                value="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                DOB
+              </Field.Label>
+              <Input
+                value="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                OTP Verified
+              </Field.Label>
+              <Input
+                value="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
+                Language
+              </Field.Label>
+              <Input
+                value="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ViewRegisterUsers;
diff --git a/src/Routes/Nav.ts b/src/Routes/Nav.ts
index 83956b9..e0c0a56 100644
--- a/src/Routes/Nav.ts
+++ b/src/Routes/Nav.ts
@@ -17,7 +17,7 @@ export const nav = [
         },
         {
           title: "Manage Users",
-          path: "/register-users",
+          path: "",
           Icon: BiUserPin,
           type:'multiple',
           children: [
@@ -65,7 +65,7 @@ export const nav = [
         },
         {
           title: "Manage CMS",
-          path: "/faq",
+          path: "",
           Icon: AiOutlineFileText,
           type:'multiple',
           children: [
@@ -104,7 +104,7 @@ export const nav = [
         },
         {
           title: "Master Module",
-          path: "/agency-master",
+          path: "",
           Icon: BsBoxes,
           type:'multiple',
           children: [
diff --git a/src/assets/deleteIcon.png b/src/assets/deleteIcon.png
new file mode 100644
index 0000000..b3b827d
Binary files /dev/null and b/src/assets/deleteIcon.png differ
diff --git a/src/components/AlertDailog.tsx b/src/components/AlertDailog.tsx
index efee69c..0202dd6 100644
--- a/src/components/AlertDailog.tsx
+++ b/src/components/AlertDailog.tsx
@@ -9,6 +9,7 @@ import {
   DialogRoot,
   DialogTrigger,
 } from "./ui/dialog";
+import DeleteICN from '../assets/deleteIcon.png'
 
 interface DeleteConfirmationDialogProps {
   onConfirm?: () => void;
@@ -65,7 +66,8 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
           p={8}
           gap={2}
         >
-          {alertIcon && alertIcon}
+          {/* {alertIcon && alertIcon} */}
+          <Image  w={'40px'} src={DeleteICN} />
           <Text
             mt={3}
             fontWeight={600}
@@ -84,7 +86,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
             {" "}
             {alertCaption}
           </Text>
-          <HStack mt={2} w={"100%"}>
+          <HStack mt={4} w={"100%"}>
             <DialogActionTrigger asChild>
               <Button
                 width="50%"
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
new file mode 100644
index 0000000..011bb8b
--- /dev/null
+++ b/src/components/Charts/BarChart.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { BiBorderRadius } from "react-icons/bi";
+
+// ✅ Register the required components
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const BarChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Jan", "Jan", "Jan", "Jan", "Jan","Jan", "Jan", "Jan"],
+    datasets: [
+      {
+        label: "Sales ($)",
+        data: [1, 2, 3, 5, 4,6,5,8],
+        backgroundColor: "#6976EB", // Light blue color
+        borderColor: "#6976EB",
+        borderWidth: 1,
+        borderRadius:4
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: { display: false },
+      title: { display: false, text: "Monthly Sales Data" },
+    },
+  };
+
+  return (
+    <div>
+      <Bar data={data} options={options} />
+    </div>
+  );
+};
+
+export default BarChart;
diff --git a/src/components/Charts/SemiDoughnutChart.tsx b/src/components/Charts/SemiDoughnutChart.tsx
new file mode 100644
index 0000000..d643595
--- /dev/null
+++ b/src/components/Charts/SemiDoughnutChart.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Doughnut } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { FaUser } from "react-icons/fa";
+
+// ✅ Register required components
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const SemiDoughnutChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Recruiter", "Customer"],
+    datasets: [
+      {
+        data: [2554, 2800], // Values
+        backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue
+        borderWidth: 0, // No border
+        cutout: "90%", // Makes it a doughnut shape
+        circumference: 270, // Semi-circle
+        rotation: 225, // Starts from the top
+        
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false }, // Hide legend
+      tooltip: { enabled: true },
+    },
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Doughnut data={data} options={options} />
+      <div
+        style={{
+          position: "absolute",
+          top: "55%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          fontSize: "20px",
+          fontWeight: "bold",
+          color: "#3D5AFE",
+          backgroundColor:'#ECEAF8',
+          padding:'15px',
+          borderRadius:'50%'
+        }}
+      >
+        <FaUser />
+      </div>
+    </div>
+  );
+};
+
+export default SemiDoughnutChart;