diff --git a/src/components/Docs/AdminDocs.tsx b/src/components/Docs/AdminDocs.tsx
index 4dfaeee9..4e59e42f 100644
--- a/src/components/Docs/AdminDocs.tsx
+++ b/src/components/Docs/AdminDocs.tsx
@@ -27,7 +27,7 @@ function AdminDocs() {
   const [documentations, setDocumentations] = useState<any[]>([]);
   const [title, setTitle] = useState<string>('');
   const [description, setDescription] = useState<string>('');
-  const [role, setRole] = useState<string>('');
+  const [role, setRole] = useState<string>('Trainee');
   const [buttonLoading, setButtonLoading] = useState<boolean>(false);
   const [isSubDocument, setIsSubDocument] = useState<boolean>(false);
   const [selectedDocId, setSelectedDocId] = useState<string>('');
@@ -45,7 +45,7 @@ function AdminDocs() {
     setSelectedContent(null);
   };
 
-  const [getDocumentations] = useLazyQuery(GET_DOCUMENTATION, {
+  const [getDocumentations, { loading }] = useLazyQuery(GET_DOCUMENTATION, {
     fetchPolicy: 'network-only',
 
     onCompleted: (data) => {
@@ -238,293 +238,321 @@ function AdminDocs() {
 
   const contents = [permission];
 
-  const page1 = (
+  const Skeleton = (
     <>
-      <div className="pb-5 ml-20 md:ml-64">
-        <Button
-          variant="primary"
-          size="lg"
-          onClick={() => {
-            setIsSubDocument(false);
-            setDocumentModel(!documentModel);
-          }}
-        >
-          {t('Add Document')}
-        </Button>
+      <div className="flex items-center w-[200px] h-7 animate-pulse duration-75 bg-gray-400/90 mb-5 rounded-[6px]" />
+      <div className="relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] mb-10">
+        <input
+          aria-label="Filter table data"
+          placeholder="Filter"
+          className="px-5 py-2 mt-4 font-sans text-xs border rounded outline-none border-primary dark:bg-neutral-600 dark:text-white w-52 md:w-96"
+        />
+
+        <div className="w-full h-14 flex items-center p-3 px-4 bg-gray-300 dark:bg-gray-500/50 my-5 rounded-[6px]">
+          <div className="flex items-center w-[200px] h-7 animate-pulse duration-75 bg-gray-400/70 dark:bg-gray-400/40 rounded-[6px]" />
+        </div>
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="flex w-full justify-between">
+            <div className="flex items-center w-[300px] mb-4 h-7 animate-pulse duration-75 bg-gray-400 dark:bg-gray-400/40 rounded-[6px]" />
+            <div className="flex gap-5">
+              <div className="w-[40px] h-7 animate-pulse duration-75 bg-gray-400/70 dark:bg-gray-400/40 rounded-[6px]" />
+              <div className="w-[40px] h-7 animate-pulse duration-75 bg-gray-400/70 dark:bg-gray-400/40 rounded-[6px]" />
+            </div>
+          </div>
+        ))}
       </div>
+    </>
+  );
 
-      {/* {documentations.map((documentation) => ( */}
-      <div className="flex flex-col items-start ">
-        <div className="mt-5 text-xl md:text-3xl  shadow-lg px-5 py-8 rounded-md w-[100%] mx-auto lg:w-[100%] lg:mx-auto mb-10">
-          <DataTable
-            data={documentations.map((documentation: any) => ({
-              Document: (
-                <>
-                  <div className="flex justify-between">
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-                      onClick={() => togglePage(`${documentation.id}`)}
-                    >
-                      {/* <div> */}
-                      {t(`${documentation.title}`)}
-                    </Button>
-                    <div className="flex">
-                      <Icon
-                        icon="el:file-edit-alt"
-                        className="mt-4 mr-2"
-                        width="25"
-                        height="25"
-                        cursor="pointer"
-                        color="#148fb6"
-                        /* istanbul ignore next */
-                        onClick={() => {
-                          setIsUpdate(true);
-                          setDocumentModel(!documentModel);
-                          setTitle(documentation.title);
-                          setDescription(documentation.description);
-                          setSelectedDocId(documentation.id);
-                          setRole(documentation.for);
-                        }}
-                      />
-
-                      <Icon
-                        icon="mdi:close-circle-outline"
-                        width="30"
-                        height="30"
-                        cursor="pointer"
-                        color="#148fb6"
-                        className="mt-4"
-                        /* istanbul ignore next */
-                        onClick={() => {
-                          handleDeleteDocumentation(documentation.id);
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  <div
-                    className="flex flex-col items-start hidden "
-                    id={documentation.id}
-                  >
-                    <div className="w-full px-10 mb-4 ">
-                      <div className="flex flex-col mt-5 ml-0">
-                        <span className="p-2 text-primary">
-                          {documentation.for}
-                        </span>
-                        <span>{documentation.description}</span>
-                        <Button
-                          variant="primary"
-                          size="sm"
-                          style="mb-5 w-44 mt-5"
+  const page1 = (
+    <>
+      <Button
+        variant="primary"
+        size="lg"
+        onClick={() => {
+          setIsSubDocument(false);
+          setDocumentModel(!documentModel);
+        }}
+      >
+        {t('Add Document')}
+      </Button>
+
+      <div className="flex flex-col">
+        {!loading && documentations.length > 0 && (
+          <div className="mt-3 shadow-lg rounded-md ">
+            <DataTable
+              data={documentations.map((documentation: any) => ({
+                Document: (
+                  <React.Fragment key={documentation.id}>
+                    <div className="flex justify-between -mb-2">
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+                        onClick={() => togglePage(`${documentation.id}`)}
+                      >
+                        {/* <div> */}
+                        {t(`${documentation.title}`)}
+                      </Button>
+                      <div className="flex items-center">
+                        <Icon
+                          icon="el:file-edit-alt"
+                          className="mt-4 mr-2"
+                          width="25"
+                          height="25"
+                          cursor="pointer"
+                          color="#148fb6"
+                          /* istanbul ignore next */
                           onClick={() => {
-                            setIsSubDocument(true);
+                            setIsUpdate(true);
                             setDocumentModel(!documentModel);
+                            setTitle(documentation.title);
+                            setDescription(documentation.description);
+                            setSelectedDocId(documentation.id);
+                            setRole(documentation.for);
+                          }}
+                        />
+
+                        <Icon
+                          icon="mdi:close-circle-outline"
+                          width="30"
+                          height="30"
+                          cursor="pointer"
+                          color="#148fb6"
+                          className="mt-4"
+                          /* istanbul ignore next */
+                          onClick={() => {
+                            handleDeleteDocumentation(documentation.id);
                           }}
-                        >
-                          {t(`Add SubDocument`)}
-                        </Button>
+                        />
                       </div>
                     </div>
 
-                    {documentation.subDocuments.map(
-                      (subDocument: { title: any; description: any }) => (
-                        <div className="flex items-start px-10">
+                    <div
+                      className="flex-col items-start hidden -ml-3"
+                      id={documentation.id}
+                    >
+                      <span className="text-primary">{documentation.for}</span>
+                      <div className="w-full px-5">
+                        <div className="flex flex-col mt-4 ml-0">
+                          <span>{documentation.description}</span>
                           <Button
                             variant="primary"
                             size="sm"
-                            style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+                            style="mb-5 w-44 mt-5 -ml-0"
                             onClick={() => {
-                              setSelectedContent({
-                                title: subDocument.title,
-                                description: subDocument.description,
-                              });
+                              setIsSubDocument(true);
+                              setDocumentModel((prev) => !prev);
                             }}
                           >
-                            {t(`${subDocument.title}`)}
+                            {t(`Add SubDocument`)}
                           </Button>
-                          <Icon
-                            icon="mdi:close-circle-outline"
-                            width="30"
-                            height="30"
-                            cursor="pointer"
-                            color="#148fb6"
-                            className="mt-4"
-                            /* istanbul ignore next */
-                            onClick={() => {
-                              handleDeleteSubDocumentation(
-                                documentation.id,
-                                subDocument.title,
-                                subDocument.description,
-                              );
-                            }}
-                          />
                         </div>
-                      ),
-                    )}
-                  </div>
-                </>
-              ),
-              Action: <></>,
-            }))}
-            columns={columns}
-            title={t('')}
-          />
-        </div>
+                      </div>
+
+                      {documentation.subDocuments.map(
+                        (subDocument: { title: any; description: any }) => (
+                          <div
+                            key={`${title}${description}`}
+                            className="flex items-center px-10 -mt-2"
+                          >
+                            <Button
+                              variant="primary"
+                              size="sm"
+                              style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+                              onClick={() => {
+                                setSelectedContent({
+                                  title: subDocument.title,
+                                  description: subDocument.description,
+                                });
+                              }}
+                            >
+                              {t(`${subDocument.title}`)}
+                            </Button>
+                            <Icon
+                              icon="mdi:close-circle-outline"
+                              width="23"
+                              height="23"
+                              cursor="pointer"
+                              color="#148fb6"
+                              className="flex items-center"
+                              /* istanbul ignore next */
+                              onClick={() => {
+                                handleDeleteSubDocumentation(
+                                  documentation.id,
+                                  subDocument.title,
+                                  subDocument.description,
+                                );
+                              }}
+                            />
+                          </div>
+                        ),
+                      )}
+                    </div>
+                  </React.Fragment>
+                ),
+                Action: <></>,
+              }))}
+              columns={columns}
+              title={t('')}
+            />
+          </div>
+        )}
+        {!loading && documentations.length === 0 && (
+          <p className="text-lg text-center">
+            There are no documentations by now.
+          </p>
+        )}
         <div className="flex " />
       </div>
-      {/*     
-    ))
-      
-    } */}
     </>
   );
 
   return (
     <>
-      <div
-        className={`font-serif h-screen w-screen z-20 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center  px-4 ${
-          documentModel === true ? 'block' : 'hidden'
-        }`}
-      >
-        <div className="w-full p-4 pb-8 bg-white rounded-lg dark:bg-dark-bg sm:w-3/4 xl:w-4/12">
-          <div className="flex flex-wrap items-center justify-center w-full card-title ">
-            <h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
-              {isUpdate ? t('Update Document') : t('Add Document')}
-            </h3>
-            <hr className="w-full my-3 border-b bg-primary" />
-          </div>
-          <div className="card-body">
-            <form className="px-8 py-3 ">
-              <div className="flex flex-wrap items-center justify-center w-full card-title ">
-                <h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
-                  {isUpdate
-                    ? t(
-                        'Enter the title and description of the document you want to update',
-                      )
-                    : t(
-                        'Enter the title and description of the document you want to add',
-                      )}
-                </h3>
-              </div>
-              <div className="my-3 text-white input h-9 ">
-                <div className="flex items-center w-full h-full text-white rounded-md grouped-input">
-                  <input
-                    onChange={(e) => {
-                      setTitle(e.target.value);
-                    }}
-                    value={title}
-                    type="text"
-                    name="title"
-                    className="w-full px-5 py-2 font-sans text-xs text-black border rounded outline-none dark:bg-dark-tertiary border-primary"
-                    placeholder={t('title')}
-                  />
+      <div className="relative">
+        <div
+          className={`fixed inset-0 z-20 flex items-center justify-center bg-black bg-opacity-80 font-serif w-full backdrop-blur-sm  px-4 ${
+            documentModel === true ? 'block' : 'hidden'
+          }`}
+        >
+          <div className="w-full xm:w-[600px] p-4 pb-8 bg-white rounded-lg dark:bg-dark-bg">
+            <div className="flex flex-wrap items-center justify-center w-full card-title ">
+              <h3 className="w-11/12 text-sm text-center dark:text-white ">
+                {isUpdate ? t('Update Document') : t('Add Document')}
+              </h3>
+              <hr className="w-full my-3 border-b bg-primary" />
+            </div>
+            <div className="card-body">
+              <form className="px-8 py-3 ">
+                <div className="flex flex-wrap items-center justify-center w-full card-title ">
+                  <h3 className="text-sm font-bold text-center dark:text-white ">
+                    {isUpdate
+                      ? t(
+                          'Enter the title and description of the document you want to update',
+                        )
+                      : t(
+                          'Enter the title and description of the document you want to add',
+                        )}
+                  </h3>
                 </div>
-              </div>
-              <br />
-              <div className="my-3 text-white input h-9 ">
-                <div className="flex items-center w-full h-full text-white rounded-md grouped-input">
-                  <textarea
-                    onChange={(e) => {
-                      setDescription(e.target.value);
-                    }}
-                    value={description}
-                    className="w-full px-5 py-5 font-sans text-xs text-black border rounded outline-none dark:bg-dark-tertiary border-primary"
-                  />
+                <div className="my-3 text-white input h-9 ">
+                  <div className="flex items-center w-full h-full text-white rounded-md grouped-input">
+                    <input
+                      onChange={(e) => {
+                        setTitle(e.target.value);
+                      }}
+                      value={title}
+                      type="text"
+                      name="title"
+                      className="w-full px-3 py-2 font-sans text-sm text-black dark:text-white border rounded outline-none dark:bg-dark-tertiary border-primary placeholder:dark:text-gray-400"
+                      placeholder={t('Title')}
+                    />
+                  </div>
                 </div>
-              </div>
-              <br />
-              <div className="my-3 text-white input h-9 ">
-                <div className="flex items-center w-full h-full text-white rounded-md grouped-input">
-                  <select
-                    name=""
-                    id=""
-                    className={
-                      isSubDocument
-                        ? 'hidden'
-                        : `w-full px-5 py-2 font-sans text-xs text-black border rounded outline-none dark:bg-dark-tertiary border-primary`
-                    }
-                    onChange={(e) => {
-                      setRole(e.currentTarget.value);
-                    }}
-                  >
-                    {isUpdate ? (
-                      <option value={role} selected>
-                        {role}
-                      </option>
-                    ) : (
-                      <option value="" disabled selected>
+                <br />
+                <div className="my-[14px] text-white input h-9 ">
+                  <div className="flex items-center w-full h-full text-white rounded-md grouped-input">
+                    <textarea
+                      onChange={(e) => {
+                        setDescription(e.target.value);
+                      }}
+                      value={description}
+                      className="w-full min-h-[110px] p-3 font-sans text-sm text-black dark:text-white border rounded outline-none dark:bg-dark-tertiary border-primary placeholder:dark:text-gray-400"
+                      placeholder={t('Description')}
+                    />
+                  </div>
+                </div>
+                <br />
+                <div className="my-3 text-white input h-9 ">
+                  <div className="flex items-center w-full h-full text-white rounded-md grouped-input">
+                    <select
+                      className={
+                        isSubDocument
+                          ? 'hidden'
+                          : `w-full px-5 py-2 font-sans text-xs text-black dark:text-white border rounded outline-none dark:bg-dark-tertiary border-primary`
+                      }
+                      onChange={(e) => {
+                        setRole(e.currentTarget.value);
+                      }}
+                      value={role}
+                    >
+                      <option value="" disabled>
                         Select Role
                       </option>
-                    )}
-                    <option value="trainee">trainee</option>
-                    <option value="other users">other users</option>
-                  </select>
+                      <option value="Trainee">Trainee</option>
+                      <option value="Coordinator">Coordinator</option>
+                      <option value="TTL">TTL</option>
+                      <option value="Not Trainees">Not Trainees</option>
+                      <option value="All Users">All Users</option>
+                    </select>
+                  </div>
                 </div>
-              </div>
-              <br />
-
-              <div className="flex justify-between w-full">
-                <Button
-                  data-testid="removeModel2"
-                  variant="info"
-                  size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
-                  onClick={() => {
-                    setTitle('');
-                    setDescription('');
-                    setIsUpdate(false);
-                    setDocumentModel(!documentModel);
-                  }}
-                >
-                  {t('Cancel')}
-                </Button>
-                <Button
-                  variant="primary"
-                  size="sm"
-                  data-testid="removeMemberFromCohort"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
-                  onClick={() => {
-                    isUpdate
-                      ? handleUpdateDocumentation(selectedDocId)
-                      : handleAddDocumentation(title, description, role);
-                  }}
-                  loading={buttonLoading}
-                >
-                  {isUpdate ? t('Update') : t('Proceed')}
-                </Button>
-              </div>
-            </form>
+                <br />
+
+                <div className="flex justify-between w-full">
+                  <Button
+                    data-testid="removeModel2"
+                    variant="info"
+                    size="sm"
+                    style="w-[30%] md:w-1/4 text-sm font-sans"
+                    onClick={() => {
+                      setTitle('');
+                      setDescription('');
+                      setIsUpdate(false);
+                      setDocumentModel(!documentModel);
+                    }}
+                  >
+                    {t('Cancel')}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    data-testid="removeMemberFromCohort"
+                    style="w-[30%] md:w-1/4 text-sm font-sans"
+                    onClick={() => {
+                      isUpdate
+                        ? handleUpdateDocumentation(selectedDocId)
+                        : handleAddDocumentation(title, description, role);
+                    }}
+                    loading={buttonLoading}
+                  >
+                    {isUpdate ? t('Update') : t('Proceed')}
+                  </Button>
+                </div>
+              </form>
+            </div>
           </div>
         </div>
       </div>
 
-      <div className="flex flex-col pl-10 overflow-auto grow bg-light-bg dark:bg-dark-frame-bg pt-28 text-light-text dark:text-dark-text-fill">
-        <div className="h-4 ">{page1}</div>
-
-        {selectedContent && (
-          <Modal onClose={closeModal}>
-            {selectedContent && (
-              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-                <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
-                  <button
-                    className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
-                    onClick={closeModal}
-                  >
-                    close
-                  </button>
+      <div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill">
+        <div className="">{!loading ? page1 : Skeleton}</div>
+      </div>
 
-                  <h2 className="mb-4 text-2xl font-bold">
-                    {selectedContent.title}
-                  </h2>
-                  <p>{selectedContent.description}</p>
-                </div>
+      {selectedContent && (
+        <Modal onClose={closeModal}>
+          {selectedContent && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+              <div className="relative overflow-auto min-h-[300px] max-h-[500px] lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all custom-scrollbar">
+                <button
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
+                  onClick={closeModal}
+                >
+                  close
+                </button>
+
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
+                  {selectedContent.title}
+                </h2>
+                <p className="text-[14px] sm:text-[15px]">
+                  {selectedContent.description}
+                </p>
               </div>
-            )}
-          </Modal>
-        )}
-      </div>
+            </div>
+          )}
+        </Modal>
+      )}
     </>
   );
 }
diff --git a/src/components/Docs/CoordinatorDocs.tsx b/src/components/Docs/CoordinatorDocs.tsx
index 0c2334ac..204dd3c7 100644
--- a/src/components/Docs/CoordinatorDocs.tsx
+++ b/src/components/Docs/CoordinatorDocs.tsx
@@ -2,25 +2,42 @@
 /* eslint-disable react/jsx-curly-brace-presence */
 /* eslint-disable react/button-has-type */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useLazyQuery } from '@apollo/client';
 import DataTable from '../DataTable';
 import Modal from './DocModel';
 import Button from '../Buttons';
 import useDocumentTitle from '../../hook/useDocumentTitle';
+import { GET_DOCUMENTATION } from '../../queries/manageStudent.queries';
 
 function CoordinatorDocs() {
-  useDocumentTitle('How to Rate Trainees');
+  useDocumentTitle('Coordinator Docs');
   const { t } = useTranslation();
-  const [selectedContent, setSelectedContent] = useState<string | null>(null);
-
-  const [page, setPage] = useState<string | null>('');
-
+  const [documentations, setDocumentations] = useState<any[]>([]);
+  const [selectedContent, setSelectedContent] = useState<any | null>(null);
+  const [openedDoc, setOpenedDoc] = useState<string | null>(null);
   const columns = [{ Header: t('Contents'), accessor: 'Contents' }];
 
-  const handleRowClick = (content: string) => {
-    setSelectedContent(content);
-  };
+  const [getDocumentations, { loading }] = useLazyQuery(GET_DOCUMENTATION, {
+    fetchPolicy: 'network-only',
+
+    onCompleted: (data) => {
+      setDocumentations(
+        data.getDocumentations.filter(
+          (documentation: any) =>
+            documentation.for.toLowerCase() === 'coordinator' ||
+            documentation.for.toLowerCase() === 'not trainees' ||
+            documentation.for.toLowerCase() === 'all users',
+        ),
+      );
+    },
+    onError: (error) => {},
+  });
+
+  useEffect(() => {
+    getDocumentations();
+  }, []);
 
   const closeModal = () => {
     setSelectedContent(null);
@@ -136,10 +153,11 @@ function CoordinatorDocs() {
   );
 
   const togglePage = (pageNumber: string) => {
-    if (page === pageNumber) {
-      setPage(null);
+    if (openedDoc === pageNumber) {
+      setOpenedDoc(null);
     } else {
-      setPage(pageNumber);
+      setOpenedDoc(null);
+      setOpenedDoc(pageNumber);
     }
   };
 
@@ -151,28 +169,97 @@ function CoordinatorDocs() {
 
   const tableData2 = contents2.map((content) => ({ Contents: content }));
 
+  const retrivedCoordinatorDocs = (
+    <>
+      {!loading &&
+        documentations.length > 0 &&
+        documentations.map((documentation, index: number) => (
+          <React.Fragment key={documentation.id}>
+            <div key={documentation.id} className="flex gap-2 items-center">
+              <p>{index + 3}.</p>
+              <Button
+                variant="primary"
+                size="sm"
+                style="bg-light-bg dark:bg-transparent hover:dark:bg-gray-500 text-light-text dark:text-dark-text-fill"
+                onClick={() => togglePage(`${documentation.id}`)}
+              >
+                {documentation.title}
+              </Button>
+            </div>
+
+            {openedDoc === documentation.id && (
+              <div>
+                <div className="w-full pr-2 md:w-2/3 mb-10 ml-0 md:ml-48 max-h-[430px] overflow-auto custom-scrollbar">
+                  <div>{documentation.description}</div>
+                </div>
+
+                {!loading && documentation.subDocuments.length > 0 && (
+                  <div>
+                    <DataTable
+                      data={documentation.subDocuments.map(
+                        (subDocument: any) => ({
+                          Contents: (
+                            <Button
+                              key={`${subDocument.title}${subDocument.description}`}
+                              variant="primary"
+                              size="sm"
+                              style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+                              onClick={() => {
+                                setSelectedContent({
+                                  title: subDocument.title,
+                                  description: subDocument.description,
+                                });
+                              }}
+                            >
+                              {t(`${subDocument.title}`)}
+                            </Button>
+                          ),
+                        }),
+                      )}
+                      columns={columns}
+                      title={t('')}
+                    />
+                  </div>
+                )}
+
+                {loading && (
+                  <p className="text-lg text-center">Loading More Docs ...</p>
+                )}
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+    </>
+  );
+
   const page1 = (
     <>
-      <div className="flex items-start">
+      <div className="flex gap-2 items-center">
+        <p>1.</p>
         <Button
           variant="primary"
           size="sm"
-          style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+          style="bg-light-bg dark:bg-transparent hover:dark:bg-gray-500 text-light-text dark:text-dark-text-fill"
           onClick={() => togglePage('p1')}
         >
           {t('How to Rate Trainees')}
         </Button>
       </div>
 
-      {page === 'p1' && (
+      {openedDoc === 'p1' && (
         <div>
-          <div className="w-2/3 px-10 mb-10 ml-0 lg:ml-48">
-            <div className="mt-5 ml-10">
-              {t('Doc introduction Coordinator')}
+          <div className="w-full pr-2 md:w-2/3 mb-10 ml-0 md:ml-48 max-h-[420px] overflow-auto custom-scrollbar">
+            <div>
+              This page provides comprehensive documentation on how to
+              effectively rate trainees within the system. As a coordinator,
+              your ability to provide accurate and insightful ratings plays a
+              crucial role in tracking and evaluating the progress of trainees.
+              This guide will walk you through the steps involved in rating
+              trainees and ensure that you make the most of DevPulse's features
             </div>
           </div>
 
-          <div className="mt-5 text-xl md:text-3xl bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-[100%] mx-auto lg:w-[100%] lg:mx-auto mb-10">
+          <div>
             <DataTable data={tableData1} columns={columns} title={t('')} />
           </div>
         </div>
@@ -182,21 +269,22 @@ function CoordinatorDocs() {
 
   const page2 = (
     <>
-      <div className="flex items-start">
+      <div className="flex gap-2 items-center">
+        <p>2.</p>
         <Button
           variant="primary"
           size="sm"
-          style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+          style="bg-light-bg dark:bg-transparent hover:dark:bg-gray-500 text-light-text dark:text-dark-text-fill"
           onClick={() => togglePage('p2')}
         >
           {t('How to create calendar')}
         </Button>
       </div>
 
-      {page === 'p2' && (
+      {openedDoc === 'p2' && (
         <div>
-          <div className="w-2/3 px-10 mb-10 ml-0 lg:ml-48">
-            <div className="mt-5 ml-10">
+          <div className="w-full pr-2 md:w-4/5 mb-10 ml-0 md:ml-48 max-h-[430px] overflow-auto custom-scrollbar">
+            <div>
               Creating a calendar event is an essential feature that empowers
               coordinators to efficiently schedule and organize crucial dates
               and appointments. In our system, coordinators can easily create
@@ -207,7 +295,7 @@ function CoordinatorDocs() {
             </div>
           </div>
 
-          <div className="mt-5 text-xl md:text-3xl bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-[100%] mx-auto lg:w-[100%] lg:mx-auto mb-10">
+          <div>
             <DataTable data={tableData2} columns={columns} title={t('')} />
           </div>
         </div>
@@ -216,28 +304,30 @@ function CoordinatorDocs() {
   );
 
   return (
-    <div className="flex flex-col pl-10 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill font-serif">
+    <div className="flex flex-col px-5 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill font-serif">
       {page1}
 
       {page2}
 
+      {retrivedCoordinatorDocs}
+
       {selectedContent && (
         <Modal onClose={closeModal}>
           {selectedContent === 'Accessing Trainee Ratings' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
+            <div className="fixed inset-0 z-20 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all">
                 <button
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
                   onClick={closeModal}
                 >
                   close
                 </button>
 
-                <h2 className="mb-4 text-2xl font-bold">
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
                   Details of how trainee ratings can be accessed.
                 </h2>
 
-                <p>
+                <p className="text-[14px] sm:text-[15px]">
                   As a coordinator, accessing trainee ratings is a
                   straightforward process. To begin, click on the "Rating" link
                   in the sidebar. This will direct you to a page where you can
@@ -255,20 +345,20 @@ function CoordinatorDocs() {
           )}
 
           {selectedContent === 'Understanding the Rating Scale' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto min-h-[300px] max-h-[500px] lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all custom-scrollbar">
                 <button
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
                   onClick={closeModal}
                 >
                   close
                 </button>
 
-                <h2 className="mb-4 text-2xl font-bold">
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
                   Understanding the Rating Scale
                 </h2>
 
-                <p>
+                <p className="text-[14px] sm:text-[15px]">
                   The rating scale is used to assess trainees based on various
                   criteria. There are three main categories: quality, quantity,
                   and professional skills. Each rating falls into one of three
@@ -299,20 +389,20 @@ function CoordinatorDocs() {
           )}
 
           {selectedContent === 'Submitting Ratings' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all">
                 <button
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
                   onClick={closeModal}
                 >
                   close
                 </button>
 
-                <h2 className="mb-4 text-2xl font-bold">
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
                   Creating and Submitting Ratings
                 </h2>
 
-                <p>
+                <p className="text-[14px] sm:text-[15px]">
                   To create and submit ratings for a trainee, click on the "Add
                   New Rating" button on the trainee ratings page. This will open
                   a model where you can choose the trainee and the relevant
@@ -333,19 +423,19 @@ function CoordinatorDocs() {
           )}
 
           {selectedContent === 'Accessing the Calendar' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all">
                 <button
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
                   onClick={closeModal}
                 >
                   close
                 </button>
-                <h2 className="mb-4 text-2xl font-bold">
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
                   How you can access the Calendar
                 </h2>
 
-                <p>
+                <p className="text-[14px] sm:text-[15px]">
                   {' '}
                   To access the calendar in our system, coordinators can
                   conveniently locate and click on the dedicated calendar link
@@ -371,18 +461,18 @@ function CoordinatorDocs() {
           )}
 
           {selectedContent === 'Creating new event' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto min-h-[300px] max-h-[500px] lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all custom-scrollbar">
                 <button
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
                   onClick={closeModal}
                 >
                   close
                 </button>
-                <h2 className="mb-4 text-2xl font-bold">
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
                   How to Create a New Calendar Event
                 </h2>
-                <p>
+                <p className="text-[14px] sm:text-[15px]">
                   To create a calendar event in our system, coordinators can
                   follow a simple process using the "Add Event" button available
                   on the calendar page. When the coordinator clicks on the "Add
@@ -414,6 +504,30 @@ function CoordinatorDocs() {
               </div>
             </div>
           )}
+
+          {selectedContent.title && selectedContent.description && (
+            <Modal onClose={closeModal}>
+              {selectedContent && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+                  <div className="relative overflow-auto min-h-[300px] max-h-[500px] lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all custom-scrollbar">
+                    <button
+                      className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
+                      onClick={closeModal}
+                    >
+                      close
+                    </button>
+
+                    <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
+                      {selectedContent.title}
+                    </h2>
+                    <p className="text-[14px] sm:text-[15px]">
+                      {selectedContent.description}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </Modal>
+          )}
         </Modal>
       )}
     </div>
diff --git a/src/components/Docs/DocsMain.tsx b/src/components/Docs/DocsMain.tsx
index ea9e8fcd..ced395cf 100644
--- a/src/components/Docs/DocsMain.tsx
+++ b/src/components/Docs/DocsMain.tsx
@@ -5,11 +5,11 @@ import Footer from '../Footer';
 // eslint-disable-next-line react/function-component-definition
 const DocsMain: FC<{ content: any }> = ({ content }) => (
   <>
-    <section className="dark:bg-dark-bg flex justify-start items-start w-full font-serif">
-      <div className="w-[23%] box-border">
+    <section className="relative dark:bg-dark-bg flex justify-start items-stretch w-full font-serif">
+      <div className="hidden lg:flex stick min-h-[72vh] max-h-[540px] px-5 py-2 w-full max-w-[235px] box-border flex-grow border-r-[1px] border-primary custom-scrollbar">
         <SideBarDocs />
       </div>
-      <div className="box-border w-[70%]  border-l-[1px] border-primary min-h-[92vh]">
+      <div className="stick lg:overflow-y-auto lg:min-h-[72vh] lg:max-h-[540px] box-border  w-full flex-grow lg:custom-scrollbar">
         {content}
       </div>
     </section>
diff --git a/src/components/Docs/MobileDropdown.tsx b/src/components/Docs/MobileDropdown.tsx
new file mode 100644
index 00000000..7a1764c9
--- /dev/null
+++ b/src/components/Docs/MobileDropdown.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+function MobileDropdown() {
+  return (
+    <section className="py-1 pt-2 font-serif max-h-[300px] pr-3 overflow-auto custom-scrollbar">
+      <ul className="py-2 flex flex-col gap-4 text-[16px]">
+        <NavLink
+          className={(navData) => {
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
+            return '';
+          }}
+          to="/docs/getting-started"
+        >
+          Getting started (new users)
+        </NavLink>
+
+        <NavLink
+          className={(navData) => {
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
+            return '';
+          }}
+          to="/docs/org-signin"
+        >
+          <li>How To SignIn An Organization</li>
+        </NavLink>
+        <NavLink
+          className={(navData) => {
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
+            return '';
+          }}
+          to="/docs/org-signup"
+        >
+          <li>How To SignUp A New Organization</li>
+        </NavLink>
+      </ul>
+    </section>
+  );
+}
+
+export default MobileDropdown;
diff --git a/src/components/Docs/RoleDocs.tsx b/src/components/Docs/RoleDocs.tsx
new file mode 100644
index 00000000..e4e072ca
--- /dev/null
+++ b/src/components/Docs/RoleDocs.tsx
@@ -0,0 +1,240 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable react/button-has-type */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyQuery } from '@apollo/client';
+import DataTable from '../DataTable';
+import Modal from './DocModel';
+import Button from '../Buttons';
+import useDocumentTitle from '../../hook/useDocumentTitle';
+import { GET_DOCUMENTATION } from '../../queries/manageStudent.queries';
+import { UserContext } from '../../hook/useAuth';
+
+interface RoleDocsProps {
+  userRole: String;
+}
+
+function RoleDocs({ userRole }: RoleDocsProps) {
+  useDocumentTitle('Role Documentation');
+  const { user } = useContext(UserContext);
+  const { t } = useTranslation();
+  const [selectedContent, setSelectedContent] = useState<any | null>(null);
+  const [documentations, setDocumentations] = useState<any[]>([]);
+  const [selectedDocId, setSelectedDocId] = useState<string>('');
+
+  const columns = [{ Header: t('Contents'), accessor: 'Contents' }];
+
+  const closeModal = () => {
+    setSelectedContent(null);
+  };
+
+  const [getDocumentations, { loading }] = useLazyQuery(GET_DOCUMENTATION, {
+    fetchPolicy: 'network-only',
+
+    onCompleted: (data) => {
+      setDocumentations(
+        data.getDocumentations.filter((documentation: any) => {
+          if (userRole.toLowerCase() === 'trainee') {
+            return (
+              documentation.for.toLowerCase() === userRole ||
+              documentation.for.toLowerCase() === 'all users'
+            );
+          }
+          return (
+            documentation.for.toLowerCase() === userRole ||
+            documentation.for.toLowerCase() === 'not trainees' ||
+            documentation.for.toLowerCase() === 'all users'
+          );
+        }),
+      );
+    },
+    onError: (error) => {},
+  });
+
+  useEffect(() => {
+    getDocumentations();
+  }, []);
+
+  const request = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() => setSelectedContent('Requesting feedback on ratings')}
+    >
+      {t('Requesting feedback on ratings')}
+    </Button>
+  );
+
+  const provide = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() =>
+        setSelectedContent('Providing Feedback to the Coordinator')
+      }
+    >
+      {t('Providing Feedback to the Coordinator')}
+    </Button>
+  );
+
+  const understanding = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() => setSelectedContent('Understanding the Rating System')}
+    >
+      {t('Understanding the Rating System')}
+    </Button>
+  );
+
+  const improving = (
+    <Button
+      variant="primary"
+      size="sm"
+      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+      onClick={() => setSelectedContent('Improving Your Ratings')}
+    >
+      {t('Improving Your Ratings')}
+    </Button>
+  );
+
+  const contents1 = [request, provide];
+  const tableData1 = contents1.map((content) => ({ Contents: content }));
+
+  const contents2 = [understanding, improving];
+  const tableData2 = contents2.map((content) => ({ Contents: content }));
+
+  const togglePage = (pageNumber: string) => {
+    setSelectedDocId(pageNumber);
+    // get all ids from documentation
+    documentations.map((documentation) => {
+      // set class to hidden
+      document.getElementById(`${documentation.id}`)?.classList.add('hidden');
+
+      // if id matches the page number, remove hidden class
+      if (documentation.id === pageNumber) {
+        if (selectedDocId === pageNumber) {
+          document
+            .getElementById(`${documentation.id}`)
+            ?.classList.add('hidden');
+          setSelectedDocId('');
+        } else {
+          document
+            .getElementById(`${documentation.id}`)
+            ?.classList.remove('hidden');
+        }
+      }
+      return null;
+    });
+  };
+
+  const Skeleton = (
+    <>
+      <div className="flex flex-col px-5 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill font-serif">
+        {[0, 1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="mt-4 flex gap-3">
+            <div className="w-[32px] h-7 animate-pulse duration-75 bg-gray-400/70 dark:bg-gray-400/40 rounded-[6px]" />
+            <div className="flex items-center w-[280px] mb-4 h-7 animate-pulse duration-75 bg-gray-400 dark:bg-gray-400/40 rounded-[6px]" />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+
+  const page1 = (
+    <>
+      {!loading &&
+        documentations.length > 0 &&
+        documentations.map((documentation, index: number) => (
+          <React.Fragment key={documentation.id}>
+            <div className="flex gap-2 items-center">
+              <p>{index + 1}.</p>
+              <Button
+                variant="primary"
+                size="sm"
+                style="bg-light-bg dark:bg-transparent hover:dark:bg-gray-500 text-light-text dark:text-dark-text-fill"
+                onClick={() => togglePage(documentation.id)}
+              >
+                {documentation.title}
+              </Button>
+            </div>
+
+            <div id={documentation.id} className="hidden">
+              <div className="w-full pr-2 md:w-2/3 mb-10 ml-0 md:ml-48 max-h-[430px] overflow-auto custom-scrollbar">
+                <div>{documentation.description}</div>
+              </div>
+
+              {documentation.subDocuments.length > 0 && (
+                <DataTable
+                  data={documentation.subDocuments.map((subDocument: any) => ({
+                    Contents: (
+                      <Button
+                        key={subDocument.title}
+                        variant="primary"
+                        size="sm"
+                        style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
+                        onClick={() => {
+                          setSelectedContent({
+                            title: subDocument.title,
+                            description: subDocument.description,
+                          });
+                        }}
+                      >
+                        {t(`${subDocument.title}`)}
+                      </Button>
+                    ),
+                  }))}
+                  columns={columns}
+                  title={t('')}
+                />
+              )}
+            </div>
+          </React.Fragment>
+        ))}
+
+      {loading && <p className="text-lg text-center">Loading Docs ...</p>}
+
+      {!loading && documentations.length === 0 && (
+        <p className="text-lg text-center">
+          There are no documentations by now.
+        </p>
+      )}
+    </>
+  );
+
+  return (
+    <div className="flex flex-col px-5 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill font-serif">
+      <div className="">{!loading ? page1 : Skeleton}</div>
+
+      {selectedContent && (
+        <Modal onClose={closeModal}>
+          {selectedContent && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+              <div className="relative overflow-auto min-h-[300px] max-h-[500px] lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 pt-3 text-left align-middle shadow-xl transition-all custom-scrollbar">
+                <button
+                  className="sticky text-black top-2 ml-[90%] px-2 py-[2px] rounded-[4px] dark:bg-gray-600 bg-gray-200 hover:bg-gray-400 dark:text-white"
+                  onClick={closeModal}
+                >
+                  close
+                </button>
+
+                <h2 className="mb-4 mt-[2px] text-[16px] sm:text-[20px] font-bold">
+                  {selectedContent.title}
+                </h2>
+                <p className="text-[14px] sm:text-[15px]">
+                  {selectedContent.description}
+                </p>
+              </div>
+            </div>
+          )}
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default RoleDocs;
diff --git a/src/components/Docs/SideBarDocs.tsx b/src/components/Docs/SideBarDocs.tsx
index c5e0c08f..ac430038 100644
--- a/src/components/Docs/SideBarDocs.tsx
+++ b/src/components/Docs/SideBarDocs.tsx
@@ -3,11 +3,11 @@ import { NavLink } from 'react-router-dom';
 
 function SideBarDocs() {
   return (
-    <section className="py-8 px-5 font-serif">
-      <ul className="p-2 flex flex-col gap-4">
+    <section className="py-5 font-serif">
+      <ul className="py-2 flex flex-col gap-4 text-[16px]">
         <NavLink
           className={(navData) => {
-            if (navData.isActive) return 'text-primary';
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
             return '';
           }}
           to="/docs/getting-started"
@@ -17,7 +17,7 @@ function SideBarDocs() {
 
         <NavLink
           className={(navData) => {
-            if (navData.isActive) return 'text-primary';
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
             return '';
           }}
           to="/docs/org-signin"
@@ -26,7 +26,7 @@ function SideBarDocs() {
         </NavLink>
         <NavLink
           className={(navData) => {
-            if (navData.isActive) return 'text-primary';
+            if (navData.isActive) return 'text-[#4f30be] dark:text-[#a791f5]';
             return '';
           }}
           to="/docs/org-signup"
diff --git a/src/components/Docs/SigninOrgDocs.tsx b/src/components/Docs/SigninOrgDocs.tsx
index 4743c3d1..8805a954 100644
--- a/src/components/Docs/SigninOrgDocs.tsx
+++ b/src/components/Docs/SigninOrgDocs.tsx
@@ -10,11 +10,11 @@ function SigninOrgDocs() {
         content={
           <div className="flex items-start box-border font-serif">
             <div className="w-full">
-              <div className=" w-full sm:px-10 mb-10 text-gray-600  dark:text-slate-300 text-lg ml-0 pt-4">
-                <h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
+              <div className=" w-full sm:px-10 text-slate-700 dark:text-slate-200 ml-0 pt-4">
+                <h2 className="mb-4 mt-4 text-2xl font-[800] text-primary">
                   How to Login to an Organisation.
                 </h2>
-                <div className="mt-5 w-[100%] sm:w-full mb-4">
+                <div className="mt-5 w-[100%] sm:w-full">
                   To sign in to our website, users need to choose an
                   organization they belong to. This selection is essential for
                   access control, data security, and providing a personalized
@@ -27,7 +27,7 @@ function SigninOrgDocs() {
                   security, and tailors the user experience to the needs of
                   individual organizations.
                 </div>
-                <h2 className="mb-4 text-3xl font-bold text-black dark:text-white">
+                <h2 className="mb-4 text-xl font-bold text-black dark:text-white">
                   Steps on how to:
                 </h2>
                 <p className="text-gray-800 mb-4 dark:text-slate-300">
diff --git a/src/components/Docs/SignupOrgDocs.tsx b/src/components/Docs/SignupOrgDocs.tsx
index 955d5fed..f2293e57 100644
--- a/src/components/Docs/SignupOrgDocs.tsx
+++ b/src/components/Docs/SignupOrgDocs.tsx
@@ -10,8 +10,8 @@ function SignupOrgDocs() {
         content={
           <div className="flex items-start font-serif">
             <div className="w-full">
-              <div className=" w-full sm:px-10 mb-10 ml-0 text-lg text-gray-600 dark:text-slate-300 sm:w-full pt-4">
-                <h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
+              <div className=" w-full sm:px-10 ml-0 text-slate-700 dark:text-slate-200 sm:w-full pt-4">
+                <h2 className="mt-4 text-2xl font-[800] text-primary">
                   How to Register an Organisation.
                 </h2>
                 <div className="mt-5 w-[100%] sm:w-full mb-4">
@@ -28,7 +28,7 @@ function SignupOrgDocs() {
                   manage their organization's profile, and utilize our
                   platform's services effectively.
                 </div>
-                <h2 className="mb-4 text-3xl font-bold text-black dark:text-white">
+                <h2 className="mb-4 text-xl font-bold text-black dark:text-white">
                   Steps on how to:
                 </h2>
                 <ol className="list-decimal ml-6">
diff --git a/src/components/Docs/TraineeDocs.tsx b/src/components/Docs/TraineeDocs.tsx
deleted file mode 100644
index 7214b41a..00000000
--- a/src/components/Docs/TraineeDocs.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-/* eslint-disable react/no-unescaped-entities */
-/* eslint-disable react/button-has-type */
-
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLazyQuery } from '@apollo/client';
-import DataTable from '../DataTable';
-import Modal from './DocModel';
-import Button from '../Buttons';
-import useDocumentTitle from '../../hook/useDocumentTitle';
-import { GET_DOCUMENTATION } from '../../queries/manageStudent.queries';
-import { UserContext } from '../../hook/useAuth';
-
-function TraineeDocs() {
-  useDocumentTitle('Trainee Documentation');
-  const { user } = useContext(UserContext);
-  const { t } = useTranslation();
-  const [selectedContent, setSelectedContent] = useState<any | null>(null);
-  const [page, setPage] = useState<string | null>('');
-  const [documentations, setDocumentations] = useState<any[]>([]);
-  const [selectedDocId, setSelectedDocId] = useState<string>('');
-
-  const columns = [{ Header: t('Contents'), accessor: 'Contents' }];
-
-  const handleRowClick = (content: string) => {
-    setSelectedContent(content);
-  };
-
-  const closeModal = () => {
-    setSelectedContent(null);
-  };
-
-  const [getDocumentations] = useLazyQuery(GET_DOCUMENTATION, {
-    fetchPolicy: 'network-only',
-
-    onCompleted: (data) => {
-      setDocumentations(
-        user.role === 'trainee'
-          ? data.getDocumentations.filter(
-              (documentation: any) => documentation.for === 'trainee',
-            )
-          : data.getDocumentations.filter(
-              (documentation: any) => documentation.for !== 'trainee',
-            ),
-      );
-    },
-    onError: (error) => {},
-  });
-
-  useEffect(() => {
-    getDocumentations();
-  }, []);
-
-  const request = (
-    <Button
-      variant="primary"
-      size="sm"
-      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-      onClick={() => setSelectedContent('Requesting feedback on ratings')}
-    >
-      {t('Requesting feedback on ratings')}
-    </Button>
-  );
-
-  const provide = (
-    <Button
-      variant="primary"
-      size="sm"
-      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-      onClick={() =>
-        setSelectedContent('Providing Feedback to the Coordinator')
-      }
-    >
-      {t('Providing Feedback to the Coordinator')}
-    </Button>
-  );
-
-  const understanding = (
-    <Button
-      variant="primary"
-      size="sm"
-      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-      onClick={() => setSelectedContent('Understanding the Rating System')}
-    >
-      {t('Understanding the Rating System')}
-    </Button>
-  );
-
-  const improving = (
-    <Button
-      variant="primary"
-      size="sm"
-      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-      onClick={() => setSelectedContent('Improving Your Ratings')}
-    >
-      {t('Improving Your Ratings')}
-    </Button>
-  );
-
-  const contents1 = [request, provide];
-  const tableData1 = contents1.map((content) => ({ Contents: content }));
-
-  const contents2 = [understanding, improving];
-  const tableData2 = contents2.map((content) => ({ Contents: content }));
-
-  const togglePage = (pageNumber: string) => {
-    setSelectedDocId(pageNumber);
-    // get all ids from documentation
-    documentations.map((documentation) => {
-      // set class to hidden
-      document.getElementById(`${documentation.id}`)?.classList.add('hidden');
-
-      // if id matches the page number, remove hidden class
-      if (documentation.id === pageNumber) {
-        if (selectedDocId === pageNumber) {
-          document
-            .getElementById(`${documentation.id}`)
-            ?.classList.add('hidden');
-          setSelectedDocId('');
-        } else {
-          document
-            .getElementById(`${documentation.id}`)
-            ?.classList.remove('hidden');
-        }
-      }
-      return null;
-    });
-  };
-
-  const page1 = (
-    <>
-      {documentations.map((documentation) => (
-        <>
-          <div className="flex items-start">
-            <Button
-              variant="primary"
-              size="sm"
-              style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-              onClick={() => togglePage(`${documentation.id}`)}
-            >
-              {documentation.title}
-            </Button>
-          </div>
-
-          <div id={documentation.id} className="hidden">
-            <div className="w-2/3 px-10 mb-10 ml-0 lg:ml-48">
-              <div className="pb-8 mt-10 ml-10 text-xl md:text-3xl">
-                {documentation.title}
-              </div>
-              <div className="ml-10">
-                {documentation.description}
-                {/* The first component of this page aims to provide a step-by-step guide on how to request feedback on ratings from a coordinator on the DevPulse platform.
-              It includes instructions on how to access the chatbox, initiate a conversation with the coordinator, and ask for specific feedback on quality, quantity, and professional skills. */}
-              </div>
-            </div>
-
-            <div className="mt-5 text-xl md:text-3xl bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-[100%] mx-auto lg:w-[100%] lg:mx-auto mb-10">
-              <DataTable
-                data={documentation.subDocuments.map((subDocument: any) => ({
-                  Contents: (
-                    <Button
-                      variant="primary"
-                      size="sm"
-                      style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-                      onClick={() => {
-                        setSelectedContent({
-                          title: subDocument.title,
-                          description: subDocument.description,
-                        });
-                      }}
-                    >
-                      {t(`${subDocument.title}`)}
-                    </Button>
-                  ),
-                }))}
-                columns={columns}
-                title={t('')}
-              />
-            </div>
-          </div>
-        </>
-      ))}
-    </>
-  );
-
-  const page2 = (
-    <>
-      <div className="flex items-start">
-        <Button
-          variant="primary"
-          size="sm"
-          style="bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text-fill -ml-5"
-          onClick={() => togglePage('p2')}
-        >
-          {t('How to make sense of performance data')}
-        </Button>
-      </div>
-      {page === 'p2' && (
-        <div>
-          <div className="w-2/3 px-10 mb-10 ml-0 lg:ml-48">
-            <div className="pb-8 mt-10 ml-10 text-xl md:text-3xl">
-              {t('How to make sense of performance data ')}
-            </div>
-            <div className="ml-10">
-              The first component of this page provides an overview of the
-              rating system used by the coordinator on the DevPulse platform. It
-              includes information on what the quality, quantity, and
-              professional skills ratings mean, how they are calculated, and
-              what factors are taken into consideration. It also explains how
-              the ratings affect the trainee's progress and performance on the
-              platform and how to interpret the ratings.
-            </div>
-          </div>
-
-          <div className="mt-5 text-xl md:text-3xl bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-[100%] mx-auto lg:w-[100%] lg:mx-auto mb-10">
-            <DataTable data={tableData2} columns={columns} title={t('')} />
-          </div>
-        </div>
-      )}
-    </>
-  );
-
-  return (
-    <div className="font-serif flex flex-col pl-10 grow bg-light-bg dark:bg-dark-frame-bg text-light-text dark:text-dark-text-fill">
-      {page1}
-
-      {selectedContent && (
-        <Modal onClose={closeModal}>
-          {selectedContent && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
-                <button
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
-                  onClick={closeModal}
-                >
-                  close
-                </button>
-
-                <h2 className="mb-4 text-2xl font-bold">
-                  {selectedContent.title}
-                </h2>
-                <p>{selectedContent.description}</p>
-              </div>
-            </div>
-          )}
-        </Modal>
-      )}
-
-      {selectedContent && (
-        <Modal onClose={closeModal}>
-          {selectedContent === 'Requesting feedback on ratings' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
-                <button
-                  type="button"
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
-                  onClick={closeModal}
-                >
-                  close
-                </button>
-
-                <h2 className="mb-4 text-2xl font-bold">
-                  Requesting feedback on ratings{' '}
-                </h2>
-                <p className="text-lg">
-                  To request feedback on performance ratings in the program,
-                  navigate to the "Performance" page on your dashboard. Click
-                  the "Details" button corresponding to a specific rating in the
-                  table. <br /> <br />A model will appear, displaying the
-                  metrics, grades, and remarks. Click the "Reply" button to open
-                  a chatbox and request feedback from your coordinator. Engage
-                  in a clear and concise conversation to seek clarification and
-                  guidance on areas that need improvement.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {selectedContent === 'Providing Feedback to the Coordinator' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
-                <button
-                  type="button"
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
-                  onClick={closeModal}
-                >
-                  close
-                </button>
-
-                <h2 className="mb-4 text-2xl font-bold">
-                  Providing Feedback to the Coordinator
-                </h2>
-
-                <p className="text-lg">
-                  To provide feedback to your coordinator on performance
-                  ratings, access the "Performance" page on your dashboard.
-                  Review the ratings and remarks provided. Use the chatbox or
-                  designated communication channel to express your thoughts and
-                  observations. <br /> <br />
-                  Focus on constructive suggestions, specific examples, and
-                  concerns, ensuring a respectful and professional tone. Submit
-                  your feedback through the provided channel, contributing to
-                  program improvement and fostering effective communication.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {selectedContent === 'Understanding the Rating System' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
-                <button
-                  type="button"
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
-                  onClick={closeModal}
-                >
-                  close
-                </button>
-                <h2 className="mb-4 text-2xl font-bold">
-                  Understanding the Rating System
-                </h2>
-                As a trainee in the program, it is essential to comprehend and
-                make sense of the performance data that you receive. The
-                performance ratings provided to you encompass three crucial
-                aspects: quality, quantity, and professional skills. Each rating
-                falls into one of three categories: 0, 1, or 2, signifying
-                different levels of achievement. <br />
-                A rating of 0 indicates that you have not met the expectations
-                in a particular area. It serves as constructive feedback
-                highlighting areas where improvement is needed. Take this rating
-                as an opportunity to reflect on your performance, identify areas
-                for growth, and actively work towards enhancing your skills in
-                those specific areas.
-                <br /> <br />
-                A rating of 1 signifies that you are making efforts and
-                progressing towards meeting the expectations. It acknowledges
-                your commitment and dedication to improving your performance.
-                This rating encourages you to continue working diligently and
-                strive for further growth in the respective areas.
-                <br />
-                On the other hand, a rating of 2 indicates that you are
-                performing well and meeting or even exceeding the expectations.
-                This rating acknowledges your exceptional performance and serves
-                as positive reinforcement for your accomplishments. Celebrate
-                this achievement and continue to maintain your high standards of
-                quality, quantity, and professional skills.
-                <br /> <br />
-                To make the most of the performance data, it is crucial to
-                review and understand the specific feedback provided along with
-                the ratings. Identify the areas where you need improvement and
-                seek guidance from coordinator to enhance your skills further.
-                Use the ratings as a guide to set goals, track progress, and
-                continuously develop your abilities throughout the program.
-                Remember, these ratings are designed to support your growth and
-                development, enabling you to reach your full potential as a
-                skilled professional.
-                <br />
-              </div>
-            </div>
-          )}
-
-          {selectedContent === 'Improving Your Ratings' && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-              <div className="overflow-auto lg:mx-60 xl:mx-96 w-[800px] md:w-[600px] transform rounded-2xl bg-white dark:bg-dark-bg p-6 text-left align-middle shadow-xl transition-all">
-                <button
-                  type="button"
-                  className="absolute text-gray-500 top-2 right-2 hover:text-gray-800"
-                  onClick={closeModal}
-                >
-                  close
-                </button>
-
-                <h2 className="mb-4 text-2xl font-bold">
-                  Improving Your Ratings
-                </h2>
-                <p className="text-lg">
-                  If you receive ratings that indicate areas for improvement, it
-                  is crucial to take proactive steps towards enhancing your
-                  performance. One effective strategy is to reach out to your
-                  coordinator for feedback and guidance. The coordinator plays a
-                  pivotal role in providing support and mentorship throughout
-                  the program. Their expertise and experience can provide
-                  valuable insights and practical advice on how to enhance your
-                  skills. Actively listen to their feedback, ask questions, and
-                  express your willingness to put in the effort required for
-                  improvement. <br /> <br />
-                  Once you have received feedback from your coordinator, it is
-                  important to set clear goals to work towards. Based on their
-                  recommendations, identify specific areas for improvement and
-                  establish measurable objectives. These goals should be
-                  realistic and achievable within a given timeframe. Break down
-                  the larger objectives into smaller, manageable tasks that you
-                  can tackle one step at a time. <br />
-                  By setting clear goals, you can focus your efforts and track
-                  your progress effectively. Regularly review your goals and
-                  adjust them as needed based on your progress and any
-                  additional feedback received. Stay committed, maintain a
-                  growth mindset, and take consistent action towards achieving
-                  your goals, knowing that your coordinator is there to support
-                  and guide you throughout your improvement journey.
-                </p>
-              </div>
-            </div>
-          )}
-        </Modal>
-      )}
-    </div>
-  );
-}
-
-export default TraineeDocs;
diff --git a/src/components/Docs/users.tsx b/src/components/Docs/users.tsx
index f17a7c4c..3188de08 100644
--- a/src/components/Docs/users.tsx
+++ b/src/components/Docs/users.tsx
@@ -8,16 +8,16 @@ function UsersDocs() {
         content={
           <div className="box-border flex items-start font-serif">
             <div className="w-full">
-              <div className="w-full pt-4 mb-10 ml-0 text-lg text-gray-600 sm:px-10 dark:text-slate-300">
-                <h2 className="mb-4 mt-4 text-4xl font-[800] text-primary">
+              <div className="w-full pt-4 ml-0 text-slate-700 sm:px-10 dark:text-slate-200">
+                <h2 className="mt-4 text-xl md:text-2xl font-[800] text-primary">
                   Getting started
                 </h2>
-                <div className="mt-5 w-[100%] sm:w-full mb-4">
+                <div className="mt-5 w-[100%] sm:w-full">
                   Devpulse is a semi-open platform i.e. using it, requires a
                   certain level of approval from the owners/managers. If you
                   browse the homepage, you might wonder why there is no signup
                   button, this is because to sign up you need an invitation.
-                  <h3 className="m-2 mb-4 text-2xl font-bold">
+                  <h3 className="m-2 mb-4 text-xl font-bold">
                     Terminology to be familiar with:
                   </h3>
                   <ul className="ml-12 list-disc ">
@@ -45,7 +45,7 @@ function UsersDocs() {
                       belongs to a program
                     </li>
                   </ul>
-                  <h3 className="m-2 mb-4 text-2xl font-bold">
+                  <h3 className="m-2 mb-4 text-xl font-bold">
                     Signing up as a user
                   </h3>
                   <p>
@@ -56,7 +56,7 @@ function UsersDocs() {
                     . The invitation email will contain the details of how to
                     sign up
                   </p>
-                  <h3 className="m-2 mb-4 text-2xl font-bold">
+                  <h3 className="m-2 mb-4 text-xl font-bold">
                     Signing in as a user
                   </h3>
                   <p>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 07d9dd9e..466d2c6c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, NavLink, useLocation } from 'react-router-dom';
 import { MenuIcon, XIcon } from '@heroicons/react/outline';
@@ -7,6 +7,7 @@ import Button from './Buttons';
 import WithClickOutside from './WithClickOutside';
 import LogoIcon from './logoIcon';
 import ToggleThemeButton from './TogglethemeIcon';
+import MobileDropdown from './Docs/MobileDropdown';
 
 const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
   const orgToken: any = localStorage.getItem('orgToken');
@@ -17,12 +18,13 @@ const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
   const { user, logout } = useContext(UserContext);
   const location = useLocation();
   const pathname = location.pathname.split('/')[1];
+  const [mobileDocsOpen, setMobileDocsOpen] = useState<boolean>(false);
 
   const goTo = orgToken ? '/users/login' : '/login/org';
 
   return (
     <div
-      className={`w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header ${props?.className} font-serif`}
+      className={`w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header ${props?.className} font-serif`}
       style={props?.style}
     >
       <div className="px-3 flex justify-between items-center w-full h-full">
@@ -128,7 +130,7 @@ const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
         className={
           !open
             ? 'hidden'
-            : 'absolute bg-white dark:bg-dark-bg w-1/8 justify-end px-8 m-1 right-0 lg:hidden'
+            : 'absolute bg-white dark:bg-dark-bg w-[320px] justify-end px-4 m-1 right-0 lg:hidden'
         }
       >
         <li className="w-full p-2 mt-2 dark:text-dark-text-fill text-primary">
@@ -147,9 +149,20 @@ const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
             {t('Product')}
           </Link>
         </li>
-        <li className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary">
-          <Link to="/docs/getting-started">{t('Docs')}</Link>
-        </li>
+        <div className="flex flex-col p-2 dark:text-dark-text-fill">
+          <div
+            onClick={() => setMobileDocsOpen((prev) => !prev)}
+            className="inline-flex gap-2 items-center"
+          >
+            <p>{t('Docs')}</p>
+            <span>{mobileDocsOpen ? '▲' : '▼'}</span>
+          </div>
+          {mobileDocsOpen && (
+            <div className="ml-4">
+              <MobileDropdown />
+            </div>
+          )}
+        </div>
 
         <li className="p-2 w-full dark:text-dark-text-fill mt-6 mb-2 bg-primary text-white rounded-md px-[35%]">
           <Link to={user?.auth ? '/dashboard' : goTo} className="w-full">
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c76e9a28..692b34ea 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -7,6 +7,7 @@ import Button from './Buttons';
 import WithClickOutside from './WithClickOutside';
 import ToggleThemeButton from './TogglethemeIcon';
 import LogoIcon from './logoIcon';
+import MobileDropdown from './Docs/MobileDropdown';
 
 const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
   const orgToken: any = localStorage.getItem('orgToken');
@@ -17,6 +18,7 @@ const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
   const pathname = location.pathname.split('/')[1];
   const handleClick = () => setOpen(!open);
   const { user, logout } = useContext(UserContext);
+  const [mobileDocsOpen, setMobileDocsOpen] = useState<boolean>(false);
 
   const goTo = orgToken ? '/users/login' : '/login/org';
   // scroll behaviour to header
@@ -150,7 +152,7 @@ const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
         className={
           !open
             ? 'hidden'
-            : 'absolute bg-indigo-200 dark:bg-dark-bg w-1/8 justify-end px-8 m-1 right-0 lg:hidden'
+            : 'absolute bg-white dark:bg-dark-bg w-[320px] justify-end px-4 m-1 right-0 lg:hidden'
         }
       >
         <li className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary">
@@ -163,6 +165,25 @@ const Header = forwardRef(({ open, setOpen, ...props }: any, ref: any) => {
         ) : (
           ' '
         )}
+        <li className="w-full p-2 dark:text-dark-text-fill">
+          <Link to="/product" className="w-full">
+            {t('Product')}
+          </Link>
+        </li>
+        <div className="flex flex-col p-2 dark:text-dark-text-fill">
+          <div
+            onClick={() => setMobileDocsOpen((prev) => !prev)}
+            className="inline-flex gap-2 items-center"
+          >
+            <p>{t('Docs')}</p>
+            <span>{mobileDocsOpen ? '▲' : '▼'}</span>
+          </div>
+          {mobileDocsOpen && (
+            <div className="ml-4">
+              <MobileDropdown />
+            </div>
+          )}
+        </div>
         <li className="p-2 w-56 text-center dark:text-dark-text-fill mt-6 mb-2 bg-primary text-white rounded-md">
           <Link to={user?.auth ? '/dashboard' : goTo} className="w-full">
             {' '}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index bf798b1c..d601c1f9 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -125,7 +125,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
             <SideNavLink onClick={toggle} to="/manage" name="Roles & Access">
               <KeyIcon className="w-5" />
             </SideNavLink>
-            <SideNavLink onClick={toggle} name="Docs" to="/adminDocs">
+            <SideNavLink onClick={toggle} name="Docs" to="/docs/admin">
               <FolderIcon className="w-5 " />
             </SideNavLink>
           </CheckRole>
@@ -161,6 +161,12 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
               <UserGroupIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
+
+          <CheckRole roles={['ttl']}>
+            <SideNavLink onClick={toggle} to="/docs/ttl" name="Docs">
+              <FolderIcon className="w-5" />
+            </SideNavLink>
+          </CheckRole>
           {/* FOR TRAINEES */}
           <CheckRole roles={['trainee']}>
             <SideNavLink onClick={toggle} name="Attendance" to="/attendance">
@@ -170,7 +176,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
               <TrendingUpIcon className="w-5" />
             </SideNavLink>
 
-            <SideNavLink onClick={toggle} name="Docs" to="/traineeDocs">
+            <SideNavLink onClick={toggle} name="Docs" to="/docs/trainee">
               <FolderIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
diff --git a/src/containers/DashRoutes.tsx b/src/containers/DashRoutes.tsx
index 16333601..7c2ff58e 100644
--- a/src/containers/DashRoutes.tsx
+++ b/src/containers/DashRoutes.tsx
@@ -66,7 +66,7 @@ const AdminDocs = React.lazy(() => import('../components/Docs/AdminDocs'));
 const CoordinatorDocs = React.lazy(
   () => import('../components/Docs/CoordinatorDocs'),
 );
-const TraineeDocs = React.lazy(() => import('../components/Docs/TraineeDocs'));
+const RoleDocs = React.lazy(() => import('../components/Docs/RoleDocs'));
 const OthersDocs = React.lazy(() => import('../components/Docs/OthersDocs'));
 const HelpPage = React.lazy(() => import('../pages/HelpPage'));
 const Tickets = React.lazy(() => import('../pages/Tickets'));
@@ -91,77 +91,86 @@ function DashRoutes() {
         <Sidebar toggle={toggleNav} style="" />
       </MenuProvider>
       <main className=" px-4 md:px-8 py-4 md:py-8 w-[100%] bg-light-bg overflow-hidden  dark:bg-dark-frame-bg">
-        <Suspense >
-        <Routes>
-          <Route path="/dashboard" element={<Dashboard />} />
-          <Route path="/trainees" element={<AdminTraineeDashboard />} />
-          <Route
-            path="/invitation"
-            element={
-              <>
-                <CheckRole roles={['admin']}>
-                  <Invitation />
-                </CheckRole>
-              </>
-            }
-          />
-          <Route path="/trainees/:userId" element={<ViewTraineeRatings />} />
-          <Route
-            path="/ratings"
-            element={
-              <>
-                <CheckRole roles={['admin']}>
-                  <AdminRatings />
-                </CheckRole>
-                <CheckRole roles={['-admin']}>
-                  <TraineeRatingDashboard />
-                </CheckRole>
-              </>
-            }
-          />
-          <Route path="/updated-ratings" element={<UpdatedRatingDashboard />} />
-          <Route path="/settings" element={<Settings />} />
-          <Route path="/performance" element={<TraineePerfomance />} />
-          {/* <Route path="/attendance" element={<TraineeAttendance />} /> */}
-          <Route path="/attendance" element={<Attendance />} />
-          <Route path="/attendance-details" element={<AttendanceDetails />} />
-          <Route path="/teams" element={<AdminTeams />} />
-          <Route path="/cohorts" element={<AdminCohorts />} />
-          <Route path="/phases" element={<AdminPhases />} />
-          <Route path="/programs" element={<AdminPrograms />} />
-          <Route path="/sessions" element={<AdminSission />} />
-          <Route path="/manage" element={<AdminManageRoles />} />
-          <Route path="/grading" element={<GradingSystem />} />
-          <Route path="/performance-details" element={<PerformanceDetails />} />
-          <Route path="/profile" element={<Profile />} />
-          <Route path="/profile/edit" element={<EditProfile />} />
-          {/* <Route path="*" element={<Error />} /> */}
-          <Route path="/super-admin" element={<SupAdDashboard />} />
-          <Route path="/calendar" element={<Calendar />} />
-          <Route path="/organizations" element={<Organizations />} />
-          <Route path="/coordinators" element={<CoordinatorsPage />} />
-          <Route path="/docs/admin" element={<AdminDocs />} />
-          <Route path="/ttls" element={<TtlsPage />} />
-          <Route path="/coordinatorDocs" element={<CoordinatorDocs />} />
-          <Route path="/docs/trainee" element={<TraineeDocs />} />
-          <Route path="/docs" element={<OthersDocs />} />
-          <Route path="/support" element={<HelpPage />} />
-          <Route path="/tickets" element={<Tickets />}>
-            <Route index element={<AllTickets />} />
-          </Route>
+        <Suspense>
+          <Routes>
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/trainees" element={<AdminTraineeDashboard />} />
+            <Route
+              path="/invitation"
+              element={
+                <>
+                  <CheckRole roles={['admin']}>
+                    <Invitation />
+                  </CheckRole>
+                </>
+              }
+            />
+            <Route path="/trainees/:userId" element={<ViewTraineeRatings />} />
+            <Route
+              path="/ratings"
+              element={
+                <>
+                  <CheckRole roles={['admin']}>
+                    <AdminRatings />
+                  </CheckRole>
+                  <CheckRole roles={['-admin']}>
+                    <TraineeRatingDashboard />
+                  </CheckRole>
+                </>
+              }
+            />
+            <Route
+              path="/updated-ratings"
+              element={<UpdatedRatingDashboard />}
+            />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/performance" element={<TraineePerfomance />} />
+            {/* <Route path="/attendance" element={<TraineeAttendance />} /> */}
+            <Route path="/attendance" element={<Attendance />} />
+            <Route path="/attendance-details" element={<AttendanceDetails />} />
+            <Route path="/teams" element={<AdminTeams />} />
+            <Route path="/cohorts" element={<AdminCohorts />} />
+            <Route path="/phases" element={<AdminPhases />} />
+            <Route path="/programs" element={<AdminPrograms />} />
+            <Route path="/sessions" element={<AdminSission />} />
+            <Route path="/manage" element={<AdminManageRoles />} />
+            <Route path="/grading" element={<GradingSystem />} />
+            <Route
+              path="/performance-details"
+              element={<PerformanceDetails />}
+            />
+            <Route path="/profile" element={<Profile />} />
+            <Route path="/profile/edit" element={<EditProfile />} />
+            {/* <Route path="*" element={<Error />} /> */}
+            <Route path="/super-admin" element={<SupAdDashboard />} />
+            <Route path="/calendar" element={<Calendar />} />
+            <Route path="/organizations" element={<Organizations />} />
+            <Route path="/coordinators" element={<CoordinatorsPage />} />
+            <Route path="/docs/admin" element={<AdminDocs />} />
+            <Route path="/ttls" element={<TtlsPage />} />
+            <Route path="/coordinatorDocs" element={<CoordinatorDocs />} />
+            <Route
+              path="/docs/trainee"
+              element={<RoleDocs userRole="trainee" />}
+            />
+            <Route path="/docs/ttl" element={<RoleDocs userRole="ttl" />} />
+            <Route path="/support" element={<HelpPage />} />
+            <Route path="/tickets" element={<Tickets />}>
+              <Route index element={<AllTickets />} />
+            </Route>
 
-          <Route path="/loginActivities" element={<LoginActivitiesTable />} />
+            <Route path="/loginActivities" element={<LoginActivitiesTable />} />
 
-          <Route path="/team/:teamname" element={<TeamDetails />} />
+            <Route path="/team/:teamname" element={<TeamDetails />} />
 
-          <Route path="/team-cards" element={<ManagersCards />} />
-          <Route path="/teams/cards" element={<CoordinatorCards />} />
-          <Route path="/ttl-trainees" element={<TtlTraineeDashboard />} />
-        </Routes>
+            <Route path="/team-cards" element={<ManagersCards />} />
+            <Route path="/teams/cards" element={<CoordinatorCards />} />
+            <Route path="/ttl-trainees" element={<TtlTraineeDashboard />} />
+          </Routes>
         </Suspense>
       </main>
     </PrivateRoute>
   );
 }
 
-export default DashRoutes;
\ No newline at end of file
+export default DashRoutes;