diff --git a/src/Mutations/session.tsx b/src/Mutations/session.tsx
new file mode 100644
index 000000000..ffa49ff8d
--- /dev/null
+++ b/src/Mutations/session.tsx
@@ -0,0 +1,57 @@
+import { gql } from '@apollo/client';
+
+// Query to get a single session by ID
+export const GET_SESSION = gql`
+  query GetSession($ID: ID!) {
+    getSession(id: $ID) {
+      id
+      Sessionname
+      description
+      platform
+      duration
+      organizer
+    }
+  }
+`;
+
+// Query to get a list of all sessions
+export const GET_SESSIONS = gql`
+  query GetSessions {
+    getAllSessions {
+      id
+      Sessionname
+      description
+      platform
+      duration
+      organizer
+    }
+  }
+`;
+
+// Mutation to create a new session
+export const CREATE_SESSION = gql`
+  mutation CreateSession($sessionInput: SessionInput) {
+    createSession(sessionInput: $sessionInput) {
+      id
+      Sessionname
+      description
+      platform
+      duration
+      organizer
+    }
+  }
+`;
+
+// Mutation to delete a session by ID
+export const DELETE_SESSION = gql`
+  mutation DeleteSession($ID: ID!) {
+    deleteSession(ID: $ID)
+  }
+`;
+
+// Mutation to edit/update a session by ID
+export const EDIT_SESSION = gql`
+  mutation EditSession($ID: ID!, $editSessionInput: EditSessionInput) {
+    editSession(ID: $ID, editSessionInput: $editSessionInput)
+  }
+`;
\ No newline at end of file
diff --git a/src/containers/DashRoutes.tsx b/src/containers/DashRoutes.tsx
index 8685a0d61..96866e03f 100644
--- a/src/containers/DashRoutes.tsx
+++ b/src/containers/DashRoutes.tsx
@@ -76,6 +76,8 @@ const ManagersCards = React.lazy(() => import('../components/ManagerCard'));
 const CoordinatorCards = React.lazy(
   () => import('../components/CoordinatorCard'),
 );
+const AdminSission = React.lazy(() => import('./admin-dashBoard/Sessions'));
+
 
 
 function DashRoutes() {
@@ -122,7 +124,7 @@ function DashRoutes() {
             <Route path="/cohorts" element={<AdminCohorts />} />
             <Route path="/phases" element={<AdminPhases />} />
             <Route path="/programs" element={<AdminPrograms />} />
-            <Route path="/sessions" element={<AdminSession />} />
+            <Route path="/sessions" element={<AdminSission />} />
             <Route path="/manage" element={<AdminManageRoles />} />
             <Route path="/grading" element={<GradingSystem />} />
             <Route
diff --git a/src/containers/admin-dashBoard/Sessions.tsx b/src/containers/admin-dashBoard/Sessions.tsx
index a3170759b..7a10b2577 100644
--- a/src/containers/admin-dashBoard/Sessions.tsx
+++ b/src/containers/admin-dashBoard/Sessions.tsx
@@ -1,52 +1,204 @@
-/* eslint-disable */
 import { Icon } from '@iconify/react';
-import React, { useState } from 'react';
+import React, { useState, useEffect, ChangeEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
+import { gql, useQuery, useMutation } from '@apollo/client';
 import DataTable from '../../components/DataTable';
-import Sidebar from '../../components/Sidebar';
-import SessionData from '../../dummyData/session.json';
 import useDocumentTitle from '../../hook/useDocumentTitle';
-import Button from './../../components/Buttons';
+import Button from '../../components/Buttons';
+import {
+  GET_SESSIONS,
+  CREATE_SESSION,
+  DELETE_SESSION,
+  EDIT_SESSION,
+} from '../../Mutations/session';
 
-const AdminSission = () => {
+interface Session {
+  id: string;
+  Sessionname: string;
+  description: string;
+  platform: string;
+  duration: string;
+  organizer: string;
+  row: any;
+  editedSession?: Partial<Session>;
+}
+
+function AdminSission() {
   useDocumentTitle('Sessions');
   const { t } = useTranslation();
-
+  const [getSessionModel, setSessionModel] = useState<Session[]>([]);
+  const [addSessionModel, setAddSessionModel] = useState(false);
   const [deleteSessionModel, setDeleteSessionModel] = useState(false);
   const [updateTraineeModel, setUpdateTraineeModel] = useState(false);
-  const [addSessionModel, setAddSessionModel] = useState(false);
+  const [sessionToDelete, setSessionToDelete] = useState('');
+  const [sessionToEdit, setSessionToEdit] = useState<Session | null>(null);
 
-  const removeModel = () => {
-    let newState = !addSessionModel;
-    setAddSessionModel(newState);
+  const { loading, error, data } = useQuery(GET_SESSIONS);
+  useEffect(() => {
+    if (data) {
+      const allSessions = data.getAllSessions.map((session: any) => ({
+        id: session.id,
+        Sessionname: session.Sessionname,
+        description: session.description,
+        platform: session.platform,
+        duration: session.duration,
+        organizer: session.organizer,
+      }));
+
+      setSessionModel(allSessions);
+    }
+  }, [data]);
+
+  const [sessionInput, setSessionInput] = useState({
+    Sessionname: '',
+    description: '',
+    platform: '',
+    duration: '',
+    organizer: '',
+  });
+
+  const [createSession] = useMutation(CREATE_SESSION, {
+    onCompleted: (data) => {
+      setAddSessionModel(false);
+      setSessionInput({
+        Sessionname: '',
+        description: '',
+        platform: '',
+        duration: '',
+        organizer: '',
+      });
+    },
+    onError: (error) => { },
+  });
+
+  const toggleAddSessionModel = () => {
+    setAddSessionModel(!addSessionModel);
   };
-  const removeDeleteModel = () => {
-    let newState = !deleteSessionModel;
-    setDeleteSessionModel(newState);
+
+  // eslint-disable-next-line no-undef
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setSessionInput({ ...sessionInput, [name]: value });
   };
 
+  const handleSaveSession = () => {
+    createSession({
+      variables: {
+        sessionInput,
+      },
+    });
+  };
+
+  const [deleteSession] = useMutation(DELETE_SESSION);
+  const handleDeleteSession = (sessionId: string) => {
+    setSessionToDelete(sessionId);
+    setDeleteSessionModel(true);
+  };
+
+  const handleConfirmDelete = () => {
+    deleteSession({
+      variables: {
+        ID: sessionToDelete,
+      },
+    })
+      .then(() => {
+        setDeleteSessionModel(false);
+        setSessionToDelete('');
+      })
+      .catch((error) => { });
+  };
+
+
+
+  const handleEditSession = (sessionId: string) => {
+    const sessionToEdit = getSessionModel.find((s) => s.id === sessionId);
+    if (sessionToEdit) {
+      setSessionToEdit(sessionToEdit);
+      setSessionModel((prevSessions) =>
+        prevSessions.map((s) =>
+          s.id === sessionId ? { ...s, editedSession: { ...s } } : s
+        ));
+      setUpdateTraineeModel(true);
+    }
+  };
+
+
+  const [editSession] = useMutation(EDIT_SESSION);
+
+const handleUpdateSession = () => {
+  if (sessionToEdit) {
+    const { id, ...updatedSession } = sessionToEdit;
+    editSession({
+      variables: {
+        ID: sessionToEdit.id,  
+        editSessionInput: updatedSession,
+      },
+    })
+      .then(() => {
+        setUpdateTraineeModel(false);
+        setSessionToEdit(null);
+      })
+      .catch((error) => {});
+  }
+};
+
 
-  const data = SessionData;
   const columns = [
-    { Header: 'Session', accessor: 'session' },
-    { Header: 'Description', accessor: 'desc' },
-    { Header: 'Platform', accessor: 'place' },
-    { Header: 'Duration', accessor: 'duration' },
-    { Header: 'Organizer', accessor: 'organizer' },
+    { Header: t('Sessionname'), accessor: 'Sessionname' },
+    { Header: t('description'), accessor: 'description' },
+    { Header: t('platform'), accessor: 'platform' },
+    { Header: t('duration'), accessor: 'duration' },
+    { Header: t('organizer'), accessor: 'organizer' },
+
     {
       Header: 'Action',
       accessor: '',
-      Cell: () => <Icon icon="entypo:dots-three-vertical" color="#9e85f5" />,
+      // eslint-disable-next-line react/no-unstable-nested-components
+      Cell: ({ row }: any) => (
+        <div className={`items-center${row.length > 0 ? ' flex' : ' flex'}`}>
+          <Icon
+            icon="el:file-edit-alt"
+            className="mr-2"
+            width="25"
+            height="25"
+            cursor="pointer"
+            color="#9e85f5"
+            onClick={() => handleEditSession(row.original.id)}
+          />
+          <Icon
+            icon="mdi:trash-can"
+            width="30"
+            height="30"
+            cursor="pointer"
+            color="#9e85f5"
+            onClick={() => handleDeleteSession(row.original.id)}
+          />
+        </div>
+      ),
     },
   ];
 
+  const removeModel = () => {
+    const newState = !addSessionModel;
+    setAddSessionModel(newState);
+  };
+
+  const removeDeleteModel = () => {
+    const newState = !deleteSessionModel;
+    setDeleteSessionModel(newState);
+  };
+
+  const removeUpdateModel = () => {
+    const newState = !updateTraineeModel;
+    setUpdateTraineeModel(newState);
+  };
+
   return (
     <>
       {/* =========================== Start:: add Session Model =============================== */}
       <div
-        className={`h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center px-4 ${
-          addSessionModel === true ? 'block' : 'hidden'
-        }`}
+        className={`h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center px-4 ${addSessionModel === true ? 'block' : 'hidden'
+          }`}
       >
         <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2  xl:w-4/12 rounded-lg p-4 pb-8">
           <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
@@ -61,9 +213,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="Sessionname"
                     className="border border-primary rounded outline-none px-5 font-sans dark:bg-dark-frame-bg dark:text-white text-xs py-2 w-full"
                     placeholder={t('SessionName')}
+                    onChange={handleInputChange}
+                    value={sessionInput.Sessionname}
                   />
                 </div>
               </div>
@@ -71,9 +225,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="description"
                     className=" border border-primary py-2 rounded outline-none px-5 dark:bg-dark-frame-bg dark:text-white font-sans text-xs w-full"
-                    placeholder={t('Description')}
+                    placeholder={t('description')}
+                    onChange={handleInputChange}
+                    value={sessionInput.description}
                   />
                 </div>
               </div>
@@ -81,9 +237,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="platform"
                     className="border border-primary py-2 rounded dark:bg-dark-frame-bg dark:text-white outline-none px-5 font-sans text-xs w-full"
-                    placeholder={t('Platform')}
+                    placeholder={t('platform')}
+                    onChange={handleInputChange}
+                    value={sessionInput.platform}
                   />
                 </div>
               </div>
@@ -92,9 +250,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="time"
-                    name="name"
+                    name="duration"
                     className="border border-primary py-2 dark:bg-dark-frame-bg dark:text-white rounded outline-none px-5 font-sans text-xs w-full"
-                    placeholder={t('Duration')}
+                    placeholder={t('duration')}
+                    onChange={handleInputChange}
+                    value={sessionInput.duration}
                   />
                 </div>
               </div>
@@ -103,9 +263,11 @@ const AdminSission = () => {
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
                   <input
                     type="text"
-                    name="name"
+                    name="organizer"
                     className=" border border-primary py-2 dark:bg-dark-frame-bg dark:text-white rounded outline-none px-5 font-sans text-xs w-full"
-                    placeholder={t('Organizer')}
+                    placeholder={t('organizer')}
+                    onChange={handleInputChange}
+                    value={sessionInput.organizer}
                   />
                 </div>
               </div>
@@ -114,19 +276,17 @@ const AdminSission = () => {
                   variant="info"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
-                  data-testid="remove"
-                  onClick={() => removeModel()}
+                  onClick={toggleAddSessionModel}
                 >
-                  {' '}
-                  {t('Cancel')}{' '}
+                  {t('Cancel')}
                 </Button>
                 <Button
                   variant="primary"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
+                  onClick={handleSaveSession}
                 >
-                  {' '}
-                  {t('Save')}{' '}
+                  {t('Save')}
                 </Button>
               </div>
             </form>
@@ -137,9 +297,8 @@ const AdminSission = () => {
 
       {/* =========================== Start::  delete Session Model =============================== */}
       <div
-        className={`min-h-full w-screen z-30 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4 ${
-          deleteSessionModel === true ? 'block' : 'hidden'
-        }`}
+        className={`min-h-full w-screen z-30 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4 ${deleteSessionModel === true ? 'block' : 'hidden'
+          }`}
       >
         <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2  xl:w-4/12 rounded-lg p-4 pb-8">
           <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
@@ -160,16 +319,15 @@ const AdminSission = () => {
                   variant="info"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
-                  data-testid="delete"
-                  onClick={() => removeDeleteModel()}
+                  onClick={removeDeleteModel}
                 >
-                  {' '}
-                  {t('Cancel')}{' '}
+                  {t('Cancel')}
                 </Button>
                 <Button
-                  variant="danger"
+                  variant="primary"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
+                  onClick={handleConfirmDelete}
                 >
                   {' '}
                   {t('Delete')}{' '}
@@ -182,95 +340,98 @@ const AdminSission = () => {
       {/* =========================== End::  delete Session Model =============================== */}
 
       {/* =========================== Start::  update Session Model =============================== */}
-      <div
-        className={`min-h-full w-screen z-30 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4 ${
-          updateTraineeModel === true ? 'block' : 'hidden'
-        }`}
-      >
-        <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2  xl:w-4/12 rounded-lg p-4 pb-8">
-          <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
-            <h3 className="font-bold text-sm text-gray-700 dark:text-white text-center w-11/12">
-              {t('UpdateSession')}
-            </h3>
-            <hr className=" bg-primary border-b my-3 w-full" />
-          </div>
-          <div className="card-body">
-            <form className=" py-3 px-8">
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="text"
-                    name="name"
-                    defaultValue={t('demo')}
-                    className="border border-primary rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs py-2 w-full"
-                  />
-                </div>
-              </div>
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="text"
-                    name="desc"
-                    defaultValue={t('Jointime')}
-                    className=" border border-primary py-2 rounded dark:bg-dark-frame-bg dark:text-white outline-none px-5 font-sans text-xs w-full"
-                  />
+      {updateTraineeModel && sessionToEdit && (
+        <div className="min-h-full w-screen z-30 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4">
+          <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2 xl:w-4/12 rounded-lg p-4 pb-8">
+            <div className="card-title w-full flex flex-wrap justify-center items-center">
+              <h3 className="font-bold text-sm text-gray-700 dark:text-white text-center w-11/12">
+                {t('UpdateSession')}
+              </h3>
+              <hr className="bg-primary border-b my-3 w-full" />
+            </div>
+            <div className="card-body">
+              <form className="py-3 px-8">
+                <div className="input my-3 h-9">
+                  <div className="grouped-input flex items-center h-full w-full rounded-md">
+                    <input
+                      type="text"
+                      name="Sessionname"
+                      placeholder={sessionToEdit.Sessionname}
+                      onChange={(e) => handleInputChange(e)}
+                      className="border border-primary rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs py-2 w-full"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="text"
-                    defaultValue={t('Zoom')}
-                    name="place"
-                    className="border border-primary py-2 rounded dark:bg-dark-frame-bg dark:text-white outline-none px-5 font-sans text-xs w-full"
-                  />
+                <div className="input my-3 h-9">
+                  <div className="grouped-input flex items-center h-full w-full rounded-md">
+                    <input
+                      type="text"
+                      name="description"
+                      placeholder={sessionToEdit.description}
+                      onChange={(e) => handleInputChange(e)}
+                      className="border border-primary py-2 rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs w-full"
+                    />
+                  </div>
                 </div>
-              </div>
+                <div className="input my-3 h-9">
+                  <div className="grouped-input flex items-center h-full w-full rounded-md">
+                    <input
+                      type="text"
+                      name="platform"
+                      placeholder={sessionToEdit.platform}
+                      onChange={(e) => handleInputChange(e)}
 
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="text"
-                    name="duration"
-                    defaultValue={t('11am-12am')}
-                    className="border border-primary py-2 rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs w-full"
-                  />
+                      className="border border-primary py-2 rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs w-full"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className="input my-3 h-9 ">
-                <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <input
-                    type="text"
-                    name="organizer"
-                    defaultValue={'John deo'}
-                    className="border border-primary py-2 rounded outline-none px-5 dark:bg-dark-frame-bg dark:text-white font-sans text-xs w-full"
-                  />
+                <div className="input my-3 h-9">
+                  <div className="grouped-input flex items-center h-full w-full rounded-md">
+                    <input
+                      type="time"
+                      name="duration"
+                      placeholder={sessionToEdit.duration}
+                      onChange={(e) => handleInputChange(e)}
+
+                      className="border border-primary py-2 rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs w-full"
+                    />
+                  </div>
                 </div>
-              </div>
+                <div className="input my-3 h-9">
+                  <div className="grouped-input flex items-center h-full w-full rounded-md">
+                    <input
+                      type="text"
+                      name="organizer"
+                      placeholder={sessionToEdit.organizer}
+                      onChange={(e) => handleInputChange(e)}
 
-              <div className="w-full flex justify-between">
-                <Button
-                  variant="info"
-                  size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
-                  onClick={() => removeModel()}
-                >
-                  {' '}
-                  {t('Cancel')}{' '}
-                </Button>
-                <Button
-                  variant="primary"
-                  size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
-                >
-                  {' '}
-                  {t('Save')}{' '}
-                </Button>
-              </div>
-            </form>
+                      className="border border-primary py-2 rounded outline-none dark:bg-dark-frame-bg dark:text-white px-5 font-sans text-xs w-full"
+                    />
+                  </div>
+                </div>
+                <div className="w-full flex justify-between">
+                  <Button
+                    variant="info"
+                    size="sm"
+                    style="w-[30%] md:w-1/4 text-sm font-sans"
+                    onClick={removeUpdateModel}
+                  >
+                    {t('Cancel')}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    style="w-[30%] md:w-1/4 text-sm font-sans"
+                    onClick={handleUpdateSession}
+                  >
+                    {t('Save')}
+                  </Button>
+                </div>
+              </form>
+            </div>
           </div>
         </div>
-      </div>
+      )}
       {/* =========================== End::  update Session Model =============================== */}
       <div className="flex flex-col h-screen">
         <div className="flex flex-row">
@@ -291,12 +452,16 @@ const AdminSission = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="">
-                  <DataTable
-                    data={data}
-                    columns={columns}
-                    title="Developers list"
-                  />
+                <div>
+                  {loading ? (
+                    <div>Loading...</div>
+                  ) : (
+                    <DataTable
+                      data={getSessionModel}
+                      columns={columns}
+                      title={t('Sessions List')}
+                    />
+                  )}
                 </div>
               </div>
             </div>
@@ -305,6 +470,5 @@ const AdminSission = () => {
       </div>
     </>
   );
-};
-
-export default AdminSission;
+}
+export default AdminSission;
\ No newline at end of file