diff --git a/client/src/Services/rightServices.js b/client/src/Services/rightServices.js
new file mode 100644
index 0000000..2593405
--- /dev/null
+++ b/client/src/Services/rightServices.js
@@ -0,0 +1,37 @@
+import thaliaAPI from "../API/thaliaAPI";
+
+export const createRight = async (rightDetails) => {
+    try {
+        const response = await thaliaAPI.post("/admin/rights", rightDetails, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+export const updateRight = async (rightDetails, rightId) => {
+    try {
+        const response = await thaliaAPI.put(`/admin/rights/${rightId}`, rightDetails, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+export const getRight = async () => {
+    try {
+        const response = await thaliaAPI.get('/admin/rights', {}, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+export const getDelete = async (rightId) => {
+    try {
+        const response = await thaliaAPI.delete(`/admin/rights/${rightId}`, {}, { withCredentials: true });
+        return response.data;
+    } catch (error) {
+        return error;
+    }
+}
+
+
+
diff --git a/client/src/components/AddBody/AddBody.jsx b/client/src/components/AddBody/AddBody.jsx
new file mode 100644
index 0000000..2a382e9
--- /dev/null
+++ b/client/src/components/AddBody/AddBody.jsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Modal } from "flowbite-react";
+
+function AddBody({ openModal, setOpenModal }) {
+  const [formData, setFormData] = useState({
+    body_name: "",
+    body_desc: "",
+  });
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+  return (
+    <>
+      <Modal show={openModal} onClose={() => setOpenModal(false)}>
+        <Modal.Header className="bg-gray-800">
+          <h1 className="text-white font-bold">Add New Topic</h1>
+        </Modal.Header>
+        <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
+          <div className="w-full">
+            <label htmlFor="">
+              <h1 className="text-white py-2">Name of the Topic</h1>
+              <input
+                type="text"
+                className="w-full rounded-md bg-gray-700 text-text"
+                value={formData.body_name}
+                onChange={handleChange}
+                name="body_name"
+              />
+            </label>
+          </div>
+          <div className="w-full mt-3">
+            <label htmlFor="">
+              <h1 className="text-text py-2">Provide the Topic Description</h1>
+              <textarea
+                name="body_desc"
+                value={formData.body_desc}
+                onChange={handleChange}
+                id=""
+                rows={8}
+                className="w-full rounded-md bg-gray-700 text-white"
+              ></textarea>
+            </label>
+          </div>
+          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+            Add Topic
+          </button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default AddBody;
diff --git a/client/src/components/AddRight/AddRight.jsx b/client/src/components/AddRight/AddRight.jsx
index 2b15f95..e9e8d38 100644
--- a/client/src/components/AddRight/AddRight.jsx
+++ b/client/src/components/AddRight/AddRight.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Modal } from "flowbite-react";
+import { createRight } from "../../Services/rightServices";
 
 // eslint-disable-next-line react/prop-types
 function AddRight({ setOpenModal, openModal }) {
@@ -14,6 +15,20 @@ function AddRight({ setOpenModal, openModal }) {
       [name]: value,
     });
   };
+
+  const handleCreate = async () => {
+    if (!formData.right_name || !formData.right_desc) {
+      console.log("Data fields Missing");
+      return;
+    }
+    try {
+      const response = await createRight(formData);
+      console.log("response in the page", response);
+    } catch (error) {
+      console.log("Error occurred", error);
+    }
+  };
+
   return (
     <>
       <Modal show={openModal} onClose={() => setOpenModal(false)}>
@@ -59,7 +74,10 @@ function AddRight({ setOpenModal, openModal }) {
               />
             </div> */}
           </div>
-          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+          <button
+            className="text-primary border-2 px-2 py-2 rounded-md float-end"
+            onClick={handleCreate}
+          >
             Add Right
           </button>
         </Modal.Body>
diff --git a/client/src/components/CheckReport/CheckReport.jsx b/client/src/components/CheckReport/CheckReport.jsx
index 0a54e96..215891d 100644
--- a/client/src/components/CheckReport/CheckReport.jsx
+++ b/client/src/components/CheckReport/CheckReport.jsx
@@ -1,7 +1,12 @@
 import { Modal } from "flowbite-react";
+import { useState } from "react";
 
 // eslint-disable-next-line react/prop-types
 function CheckReport({ openModal, setOpenModal, reportObject }) {
+  const [show, setShow] = useState(false);
+  const handleView = () => {
+    setShow((state) => !state);
+  };
   return (
     <>
       <Modal
@@ -10,38 +15,54 @@ function CheckReport({ openModal, setOpenModal, reportObject }) {
         reportObject={reportObject}
       >
         <Modal.Header className="bg-gray-800">
-          <h1 className="text-white font-bold">Reports</h1>
+          <h1 className="text-white font-bold">User Reports</h1>
         </Modal.Header>
         <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
-
-
           <div className="w-full">
-            <label htmlFor="">
-              <h1 className="text-white py-2">Report Type</h1>
-              <input
-                type="text"
-                disabled
-                className="w-full rounded-md bg-gray-700 text-text"
-                value={""}
-              />
-            </label>
-          </div>
-          <div className="w-full mt-3">
-            <label htmlFor="">
-              <h1 className="text-text py-2">Report Description</h1>
-              <textarea
-                name="right_desc"
-                disabled
-                value={""}
-                rows={8}
-                className="w-full rounded-md bg-gray-700 text-white"
-              ></textarea>
-            </label>
+            <div id="accordion-collapse" data-accordion="collapse">
+              <h2 id="accordion-collapse-heading-1">
+                <button
+                  type="button"
+                  className="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 gap-3"
+                  data-accordion-target="#accordion-collapse-body-1"
+                  aria-expanded="true"
+                  aria-controls="accordion-collapse-body-1"
+                  onClick={handleView}
+                >
+                  <span>Personal Harrasment</span>
+                  <svg
+                    data-accordion-icon
+                    className="w-3 h-3 rotate-180 shrink-0"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 10 6"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M9 5 5 1 1 5"
+                    />
+                  </svg>
+                </button>
+              </h2>
+              <div
+                id="accordion-collapse-body-1"
+                className={show ? "block" : "hidden"}
+                aria-labelledby="accordion-collapse-heading-1"
+              >
+                <div className="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+                  <p className="mb-2 text-gray-500 dark:text-gray-400">
+                    Flowbite is an open-source library of interactive components
+                    built on top of Tailwind CSS including buttons, dropdowns,
+                    modals, navbars, and more.
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
-
-
-
-          
         </Modal.Body>
       </Modal>
     </>
diff --git a/client/src/components/EditBody/EditBody.jsx b/client/src/components/EditBody/EditBody.jsx
new file mode 100644
index 0000000..37a2115
--- /dev/null
+++ b/client/src/components/EditBody/EditBody.jsx
@@ -0,0 +1,63 @@
+import { useState, useEffect } from "react";
+import { Modal } from "flowbite-react";
+
+function EditBody({ bodyDetails, openModal, setOpenModal }) {
+  const [formData, setFormData] = useState({
+    body_name: "",
+    body_desc: "",
+  });
+  useEffect(() => {
+    if (bodyDetails) {
+      // eslint-disable-next-line react/prop-types
+      formData.body_name = bodyDetails?.name;
+      // eslint-disable-next-line react/prop-types
+      formData.body_desc = bodyDetails?.description;
+    }
+  }, [formData, bodyDetails]);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+  return (
+    <>
+      <Modal show={openModal} onClose={() => setOpenModal(false)}>
+        <Modal.Header className="bg-gray-800">
+          <h1 className="text-white font-bold">Edit Topic</h1>
+        </Modal.Header>
+        <Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
+          <div className="w-full">
+            <label htmlFor="">
+              <h1 className="text-white py-2">Name of the Topic</h1>
+              <input
+                type="text"
+                className="w-full rounded-md bg-gray-700 text-text"
+                value={formData?.body_name}
+                onChange={handleChange}
+                name="right_name"
+              />
+            </label>
+          </div>
+          <div className="w-full mt-3">
+            <label htmlFor="">
+              <h1 className="text-text py-2">Topic Description</h1>
+              <textarea
+                name="right_desc"
+                value={formData?.body_desc}
+                onChange={handleChange}
+                rows={8}
+                className="w-full rounded-md bg-gray-700 text-white"
+              ></textarea>
+            </label>
+          </div>
+          <button className="text-primary border-2 px-2 py-2 rounded-md float-end">
+            Update
+          </button>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+export default EditBody;
diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx
index ac034d7..52652c7 100644
--- a/client/src/components/Sidebar/Sidebar.jsx
+++ b/client/src/components/Sidebar/Sidebar.jsx
@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import { MdDashboard } from "react-icons/md";
 import { FaUsers } from "react-icons/fa";
 import { TbFileReport } from "react-icons/tb";
+import { IoBody } from "react-icons/io5";
 function Sidebar() {
   return (
     <>
@@ -28,6 +29,12 @@ function Sidebar() {
               Rights Management
             </Link>
           </button>
+          <button className="flex items-center px-4 py-2 rounded-md w-full mt-8">
+            <IoBody className="text-primary" />
+            <Link className="ml-4 font-bold text-gray-500" to={"/admin/body"}>
+              My Body
+            </Link>
+          </button>
         </div>
       </div>
     </>
diff --git a/client/src/pages/AdminPages/Login/Login.jsx b/client/src/pages/AdminPages/Login/Login.jsx
deleted file mode 100644
index 7f30ce4..0000000
--- a/client/src/pages/AdminPages/Login/Login.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-function Login() {
-  return (
-    <>
-      <div className="min-w-full min-h-screen bg-background">
-        <div className="w-full h-screen flex justify-center py-16">
-          <div className="w-1/4 h-96 bg-gray-800 rounded-md">
-            <form action="" onSubmit={""}>
-              <div className="py-4">
-                <h1 className="text-center py-5 text-primary text-2xl font-bold">
-                  Login
-                </h1>
-              </div>
-              <div className="px-4">
-                <label htmlFor="">
-                  <h1 className="text-text">Enter your email</h1>
-                  <input type="text" className="w-full rounded-md mt-2" />
-                </label>
-                <div className="mt-2">
-                  <label htmlFor="">
-                    <h1 className="text-text">Password</h1>
-                    <input type="text" className="w-full rounded-md mt-2" />
-                  </label>
-                </div>
-              </div>
-              <div className="flex justify-center px-2 py-10">
-                <button className="bg-primary text-black px-4 py-1 rounded">
-                  Login
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default Login;
diff --git a/client/src/pages/AdminPages/MyBody/MyBody.jsx b/client/src/pages/AdminPages/MyBody/MyBody.jsx
new file mode 100644
index 0000000..02a0d85
--- /dev/null
+++ b/client/src/pages/AdminPages/MyBody/MyBody.jsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import EditRight from "../../../components/EditRight/EditRight";
+import AddBody from "../../../components/AddBody/AddBody";
+
+function MyBody() {
+  const [openModal, setOpenModal] = useState(false);
+  // eslint-disable-next-line no-unused-vars
+  const [rightDetails, setRightDetails] = useState();
+  const handleModal = () => {
+    setOpenModal(true);
+  };
+  return (
+    <>
+      <EditRight
+        setOpenModal={setOpenModal}
+        openModal={openModal}
+        rightDetails={rightDetails}
+      />
+      <AddBody setOpenModal={setOpenModal} openModal={openModal} />
+      <div className=" h-screen bg-background">
+        <div className="col-span-9">
+          {/* Text Components  */}
+          <div className="text-text flex justify-between">
+            <div>
+              <h1 className="text-2xl py-12">Body Topics</h1>
+            </div>
+            <div className="px-8">
+              <button
+                className="text-xl py-12 text-pretty text-primary underline"
+                onClick={handleModal}
+              >
+                Create
+              </button>
+            </div>
+          </div>
+          {/* Table Component  */}
+          <div>
+            <table className="w-full text-sm text-left rtl:text-right rounded">
+              <thead className="text-xs bg-secondary rounded">
+                <tr>
+                  <th scope="col" className="px-6 py-3 text-primary">
+                    No
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-primary">
+                    Name
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-primary">
+                    Created At
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-primary text-center"
+                  >
+                    Edit or Delete
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="text-text">
+                <tr className="border-b border-gray-500">
+                  <th scope="row" className="px-6 py-4 font-medium">
+                    1
+                  </th>
+                  <td className="px-6 py-4">Dealing with Period Cramps</td>
+                  <td className="px-6 py-4">18-03-2003</td>
+                  <td className="px-6 py-4 flex justify-center">
+                    <button
+                      className="border py-1 px-6 rounded hover:bg-green-500"
+                      onClick={handleModal}
+                    >
+                      Edit
+                    </button>
+                    <button className="border py-1 px-6 rounded ml-2 hover:bg-red-700">
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default MyBody;
diff --git a/client/src/pages/AdminPages/Rights/Rights.tsx b/client/src/pages/AdminPages/Rights/Rights.tsx
index 37dadaf..78f812f 100644
--- a/client/src/pages/AdminPages/Rights/Rights.tsx
+++ b/client/src/pages/AdminPages/Rights/Rights.tsx
@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import AddRight from "../../../components/AddRight/AddRight";
 import EditRight from "../../../components/EditRight/EditRight";
+import { getRight } from "../../../Services/rightServices";
+import { getDelete } from "../../../Services/rightServices";
 
 function Rights() {
   const [openModal, setOpenModal] = useState(false);
@@ -8,6 +10,15 @@ function Rights() {
   const handleModal = () => {
     setOpenModal(true);
   };
+  useEffect(() => {
+    const getRights = async () => {
+      const response = await getRight();
+      console.log("This is the response", response);
+    };
+  }, []);
+  const handleDelete = async (rightId: string) => {
+    const response = await getDelete(rightId);
+  };
   return (
     <>
       <EditRight
@@ -68,7 +79,10 @@ function Rights() {
                     >
                       Edit
                     </button>
-                    <button className="border py-1 px-6 rounded ml-2 hover:bg-red-700">
+                    <button
+                      className="border py-1 px-6 rounded ml-2 hover:bg-red-700"
+                      onClick={() => handleDelete("rightId")}
+                    >
                       Delete
                     </button>
                   </td>
diff --git a/client/src/routes/AdminRoute.jsx b/client/src/routes/AdminRoute.jsx
index 19afd58..0be1189 100644
--- a/client/src/routes/AdminRoute.jsx
+++ b/client/src/routes/AdminRoute.jsx
@@ -3,19 +3,14 @@ import { Route, Routes } from "react-router";
 import Loader from "../components/Loader/Loader1/Loader";
 
 const Home = lazy(() => import("../pages/AdminPages/Home/Home"));
-const Login = lazy(() => import("../pages/AdminPages/Login/Login"));
 const Managment = lazy(() => import("../pages/AdminPages/Managment/Managment"));
 const Rights = lazy(() => import("../pages/AdminPages/Rights/Rights"));
 const Sidebar = lazy(() => import("../components/Sidebar/Sidebar"));
+const MyBody = lazy(() => import("../pages/AdminPages/MyBody/MyBody"));
 
 export default function AdminRoute() {
   return (
     <>
-      <Suspense fallback={<Loader />}>
-        <Routes>
-          <Route path={"/login"} element={<Login />} />
-        </Routes>
-      </Suspense>
       <div className="grid grid-cols-12 h-screen bg-background">
         <div className="col-span-3 text-text">
           <Sidebar />
@@ -26,6 +21,7 @@ export default function AdminRoute() {
               <Route path={"/"} element={<Home />} />
               <Route path={"/managment"} element={<Managment />} />
               <Route path={"/rights"} element={<Rights />} />
+              <Route path={"/body"} element={<MyBody />} />
             </Routes>
           </Suspense>
         </div>