From a52a5042a1b8a432240eb485ed5828938ade8d55 Mon Sep 17 00:00:00 2001
From: aimedivin <aimedifi003@gmail.com>
Date: Wed, 16 Oct 2024 06:52:15 +0200
Subject: [PATCH] fix: move client-side attendance logic to server

---
 src/Mutations/Attendance.tsx                  |  416 +-
 src/components/AttendanceSymbols.tsx          |    8 +-
 src/components/EditAttendenceButton.tsx       |   29 +-
 src/components/ModalAttendance.tsx            |   76 +-
 src/components/Sidebar.tsx                    |   25 +-
 src/containers/admin-dashBoard/Sessions.tsx   |    1 -
 src/pages/Attendance.tsx                      |    2 +-
 src/pages/Organization/Orglogin.tsx           |    1 -
 src/pages/TraineeAttendanceTracker.tsx        |  801 ++--
 src/queries/attendance.queries.tsx            |  100 +-
 src/queries/team.queries.tsx                  |   52 +
 src/utils/getDateForDays.ts                   |   44 -
 .../components/EditAttendenceButton.test.tsx  |    8 +-
 tests/components/ModalAttendance.test.tsx     |  206 +-
 .../AdminTraineeDashboard.test.tsx.snap       |   11 +-
 .../__snapshots__/DashHeader.test.tsx.snap    |    2 +-
 .../EditAttendenceButton.test.tsx.snap        |    2 +-
 .../__snapshots__/Header.test.tsx.snap        |  126 +-
 .../__snapshots__/SideNavLink.test.tsx.snap   |    2 +-
 .../__snapshots__/MainRoutes.test.tsx.snap    |   76 +-
 .../__snapshots__/Cohorts.test.tsx.snap       |  154 +-
 .../__snapshots__/App.test.tsx.snap           |   55 +-
 .../__snapshots__/Siderbar.test.tsx.snap      |   55 +-
 tests/pages/TraineeAttendanceTracker.test.tsx |  410 +-
 tests/pages/__snapshots__/About.test.tsx.snap |   29 +-
 .../AdminTraineeDashboard.test.tsx.snap       |   11 +-
 .../__snapshots__/Admindash.test.tsx.snap     |  154 +-
 .../__snapshots__/GradingSystem.test.tsx.snap |  186 +-
 tests/pages/__snapshots__/Home.test.tsx.snap  |   55 +-
 .../pages/__snapshots__/Profile.test.tsx.snap | 3346 +++++++++++++++--
 .../TraineeAttendanceTracker.test.tsx.snap    |  118 +-
 .../TraineeRatingDashboard.test.tsx.snap      |  170 +-
 .../UpdateTraineeRating.test.tsx.snap         |  186 +-
 .../__snapshots__/userRegister.test.tsx.snap  |    2 +-
 tests/utils/getDateForDays.test.tsx           |   24 -
 35 files changed, 5077 insertions(+), 1866 deletions(-)
 delete mode 100644 src/utils/getDateForDays.ts
 delete mode 100644 tests/utils/getDateForDays.test.tsx

diff --git a/src/Mutations/Attendance.tsx b/src/Mutations/Attendance.tsx
index e081cedf4..58aeeb0c7 100644
--- a/src/Mutations/Attendance.tsx
+++ b/src/Mutations/Attendance.tsx
@@ -1,44 +1,216 @@
 import { gql } from '@apollo/client';
 
+export const PAUSE_AND_RESUME_ATTENDANCE = gql`
+  mutation PauseAndResumeTeamAttendance($team: String!, $orgToken: String) {
+    pauseAndResumeTeamAttendance(team: $team, orgToken: $orgToken) {
+      team {
+        id
+        name
+        isJobActive
+      },
+      sanitizedAttendance {
+        today
+        yesterday
+        attendanceWeeks {
+          phase {
+            id
+            name
+          }
+          weeks
+        }
+        attendance {
+          week
+          phase {
+            id
+            name
+          }
+          dates {
+            mon {
+              date
+              isValid
+            }
+            tue {
+              date
+              isValid
+            }
+            wed {
+              date
+              isValid
+            }
+            thu {
+              date
+              isValid
+            }
+            fri {
+              date
+              isValid
+            }
+          }
+          days {
+            mon {
+              trainee {
+                id
+                email
+                profile {
+                  id
+                  name
+                }
+              }
+              score
+            }
+            tue {
+              trainee {
+                id
+                email
+                profile {
+                  name
+                }
+              }
+              score
+            }
+            wed {
+              trainee {
+                id
+                email
+                profile {
+                  name
+                }
+              }
+              score
+            }
+            thu {
+              trainee {
+                id
+                email
+                profile {
+                  name
+                }
+              }
+              score
+            }
+            fri {
+              trainee {
+                id
+                email
+                profile {
+                  name
+                }
+              }
+              score
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
 export const RECORD_ATTENDANCE = gql`
   mutation RecordAttendance(
+    $today: Boolean!
+    $yesterday: Boolean!
     $week: Int!
     $team: String!
-    $date: String!
     $trainees: [TraineeInput!]!
     $orgToken: String!
   ) {
     recordAttendance(
+      today: $today
+      yesterday: $yesterday
       week: $week
       team: $team
-      date: $date
       trainees: $trainees
       orgToken: $orgToken
     ) {
-      team {
-        id
-        name
-        cohort {
+      today
+      yesterday
+      attendanceWeeks {
+        phase {
           id
           name
-          phase {
-            name
-            id
-          }
         }
+        weeks
       }
-      trainees {
-        trainee {
-          profile {
-            name
-          }
-          email
+      attendance {
+        week
+        phase {
           id
+          name
+        }
+        dates {
+          mon {
+            date
+            isValid
+          }
+          tue {
+            date
+            isValid
+          }
+          wed {
+            date
+            isValid
+          }
+          thu {
+            date
+            isValid
+          }
+          fri {
+            date
+            isValid
+          }
         }
-        status {
-          day
-          date
-          score
+        days {
+          mon {
+            trainee {
+              id
+              email
+              profile {
+                id
+                name
+              }
+            }
+            score
+          }
+          tue {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          wed {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          thu {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          fri {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
         }
       }
     }
@@ -48,6 +220,7 @@ export const RECORD_ATTENDANCE = gql`
 export const UPDATE_ATTENDANCE = gql`
   mutation UpdateAttendance(
     $week: Int!
+    $day: String!
     $team: String!
     $phase: String!
     $trainees: [TraineeInput!]!
@@ -55,38 +228,99 @@ export const UPDATE_ATTENDANCE = gql`
   ) {
     updateAttendance(
       week: $week
+      day: $day
       team: $team
       phase: $phase
       trainees: $trainees
       orgToken: $orgToken
     ) {
-      id
-      week
-      phase {
-        id
-        name
-      }
-      cohort {
-        id
-        name
+      today
+      yesterday
+      attendanceWeeks {
+        phase {
+          id
+          name
+        }
+        weeks
       }
-      teams {
-        team {
+      attendance {
+        week
+        phase {
           id
           name
         }
-        trainees {
-          trainee {
-            id
-            email
-            profile {
+        dates {
+          mon {
+            date
+            isValid
+          }
+          tue {
+            date
+            isValid
+          }
+          wed {
+            date
+            isValid
+          }
+          thu {
+            date
+            isValid
+          }
+          fri {
+            date
+            isValid
+          }
+        }
+        days {
+          mon {
+            trainee {
               id
-              name
+              email
+              profile {
+                id
+                name
+              }
             }
+            score
           }
-          status {
-            day
-            date
+          tue {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          wed {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          thu {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          fri {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
             score
           }
         }
@@ -96,35 +330,95 @@ export const UPDATE_ATTENDANCE = gql`
 `;
 
 export const DELETE_ATTENDANCE = gql`
-  mutation DeleteAttendance($week: String!, $team: String!, $day: String!) {
+  mutation DeleteAttendance($week: Int!, $team: String!, $day: String!) {
     deleteAttendance(week: $week, team: $team, day: $day) {
-      id
-      week
-      phase {
-        id
-        name
-      }
-      cohort {
-        id
-        name
+      today
+      yesterday
+      attendanceWeeks {
+        phase {
+          id
+          name
+        }
+        weeks
       }
-      teams {
-        team {
+      attendance {
+        week
+        phase {
           id
           name
         }
-        trainees {
-          trainee {
-            id
-            email
-            profile {
+        dates {
+          mon {
+            date
+            isValid
+          }
+          tue {
+            date
+            isValid
+          }
+          wed {
+            date
+            isValid
+          }
+          thu {
+            date
+            isValid
+          }
+          fri {
+            date
+            isValid
+          }
+        }
+        days {
+          mon {
+            trainee {
               id
-              name
+              email
+              profile {
+                id
+                name
+              }
             }
+            score
           }
-          status {
-            day
-            date
+          tue {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          wed {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          thu {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          fri {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
             score
           }
         }
diff --git a/src/components/AttendanceSymbols.tsx b/src/components/AttendanceSymbols.tsx
index 4b5b026db..7cfb28222 100644
--- a/src/components/AttendanceSymbols.tsx
+++ b/src/components/AttendanceSymbols.tsx
@@ -17,7 +17,7 @@ function AttendanceSymbols({ status }: Props) {
   const property: Property = {
     color: 'bg-[#0E8E0B]',
     // icon: <i className="fa-solid fa-check font-semibold" />,
-    icon: <FaCheck className="text-[.8rem]" />,
+    icon: <FaCheck className="mt-[.1rem] md:mt-0 text-[.75rem] md:text-[.8rem]" />,
   };
 
   if (score === '1') {
@@ -26,11 +26,13 @@ function AttendanceSymbols({ status }: Props) {
   }
   if (score === '0') {
     property.color = 'bg-[#C30909]';
-    property.icon = <FaXmark className="text-base" />;
+    property.icon = (
+      <FaXmark className="-ml-[.1rem] md:ml-0 text-[.93rem] md:text-base" />
+    );
   }
   return (
     <div
-      className={`${property.color} flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-white`}
+      className={`${property.color} flex items-center justify-center w-[1.3rem] h-[1.3rem] md:w-[1.5rem] md:h-[1.5rem] rounded-full text-white`}
     >
       {property.icon}
     </div>
diff --git a/src/components/EditAttendenceButton.tsx b/src/components/EditAttendenceButton.tsx
index aa3810f0d..c6f839b8c 100644
--- a/src/components/EditAttendenceButton.tsx
+++ b/src/components/EditAttendenceButton.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
+import { number } from 'zod';
 import AttendanceSymbols from './AttendanceSymbols';
 import { TraineeAttendanceDataInterface } from '../pages/TraineeAttendanceTracker';
 
 interface EditAttendanceProps {
   setTraineeAttendanceData: React.Dispatch<React.SetStateAction<any[]>>;
   setUpdated: React.Dispatch<React.SetStateAction<boolean>>;
-  week: string;
+  week: number;
   day: string;
   phase: string;
   traineeId: string;
@@ -25,21 +26,22 @@ function EditAttendanceButton({
     setOpenEdit(false);
   }, [week, phase, day]);
 
-  const handleUpdateAttendance = (score: string) => {
+  const handleUpdateAttendance = (score: number) => {
+    
     setTraineeAttendanceData((prev) =>
       prev.map((attendanceData) => {
-        if (attendanceData.week === week && attendanceData.phase === phase) {
+        if (attendanceData.week === week && attendanceData.phase.id === phase) {
           const updatedDay = attendanceData.days[
             day as keyof typeof attendanceData.days
           ].map((traineeData: TraineeAttendanceDataInterface) => {
             if (
               traineeData.trainee.id === traineeId &&
-              traineeData.status.toString() !== score.toString()
+              traineeData.score !== score
             ) {
               setUpdated(true);
               return {
                 trainee: traineeData.trainee,
-                status: score,
+                score,
               };
             }
             return traineeData;
@@ -61,7 +63,7 @@ function EditAttendanceButton({
       {!openEdit && (
         <span
           onClick={() => setOpenEdit(true)}
-          className="px-2 py-[2px] border dark:border-white border-black rounded-md text-[.85rem]"
+          className="px-3 py-[3px] border dark:border-white border-black rounded-md font-medium text-[.85rem]"
           data-testid="edit-button"
         >
           Edit
@@ -69,22 +71,13 @@ function EditAttendanceButton({
       )}
       {openEdit && (
         <div className="flex items-center gap-1 xmd:gap-2">
-          <div
-            onClick={() => handleUpdateAttendance('2')}
-            data-testid="score-2"
-          >
+          <div onClick={() => handleUpdateAttendance(2)} data-testid="score-2">
             <AttendanceSymbols status={2} />
           </div>
-          <div
-            onClick={() => handleUpdateAttendance('1')}
-            data-testid="score-1"
-          >
+          <div onClick={() => handleUpdateAttendance(1)} data-testid="score-1">
             <AttendanceSymbols status={1} />
           </div>
-          <div
-            onClick={() => handleUpdateAttendance('0')}
-            data-testid="score-0"
-          >
+          <div onClick={() => handleUpdateAttendance(0)} data-testid="score-0">
             <AttendanceSymbols status={0} />
           </div>
         </div>
diff --git a/src/components/ModalAttendance.tsx b/src/components/ModalAttendance.tsx
index 25b02f957..25be121c0 100644
--- a/src/components/ModalAttendance.tsx
+++ b/src/components/ModalAttendance.tsx
@@ -4,15 +4,18 @@ import { useMutation } from '@apollo/client';
 import { format } from 'date-fns';
 import { RECORD_ATTENDANCE } from '../Mutations/Attendance';
 import AttendanceSymbols from './AttendanceSymbols';
+import { AttendanceDataInterface } from '../pages/TraineeAttendanceTracker';
 
 interface ModalProps {
   isVisible: boolean;
   onClose: () => void;
-  setAttendanceData: React.Dispatch<React.SetStateAction<any[]>>;
+  setAttendanceData: React.Dispatch<
+    React.SetStateAction<AttendanceDataInterface | undefined>
+  >;
   trainees: any;
   week: number;
   date: string;
-  day: string;
+  dayType: 'today' | 'yesterday' | 'others';
   team: string;
   teamName: string;
 }
@@ -20,17 +23,11 @@ interface attendanceProps {
   name: string;
   score: number;
   id: string;
-  day: string;
-}
-
-interface StatusInput {
-  day: string;
-  score: string;
 }
 
 export interface recordTraineeProps {
   trainee: string;
-  status: StatusInput;
+  score: number;
 }
 
 function ModalAttendance({
@@ -39,7 +36,7 @@ function ModalAttendance({
   trainees,
   week,
   date,
-  day,
+  dayType,
   setAttendanceData,
   team,
   teamName,
@@ -60,52 +57,18 @@ function ModalAttendance({
     { data: recordAttendanceData, loading: loadingRecordAttendance, error },
   ] = useMutation(RECORD_ATTENDANCE, {
     variables: {
+      today: dayType === 'today',
+      yesterday: dayType === 'yesterday',
       week,
       team,
-      date,
       trainees: recordTrainees,
       orgToken: localStorage.getItem('orgToken'),
     },
     fetchPolicy: 'no-cache',
     onCompleted: (data) => {
-      if (data) {
-        toast.success('Attendance recorded successfully.');
-      }
+      toast.success('Attendance recorded successfully.');
 
-      setAttendanceData((prev) => {
-        let isSet = false;
-        const result = prev.map((attendance) => {
-          if (
-            attendance.week.toString() === week.toString() &&
-            attendance.cohort.id === data.recordAttendance.team.cohort.id &&
-            attendance.phase.id === data.recordAttendance.team.cohort.phase.id
-          ) {
-            isSet = true;
-            return {
-              ...attendance,
-              teams: [data.recordAttendance],
-            };
-          }
-          return attendance;
-        });
-
-        if (!isSet && team === data.recordAttendance.team.id) {
-          result.push({
-            week: week.toString(),
-            id: Math.random().toString(),
-            cohort: {
-              id: data.recordAttendance.team.cohort.id,
-              name: data.recordAttendance.team.cohort.name,
-            },
-            phase: {
-              id: data.recordAttendance.team.cohort.phase.id,
-              name: data.recordAttendance.team.cohort.phase.name,
-            },
-            teams: [data.recordAttendance],
-          });
-        }
-        return result;
-      });
+      setAttendanceData(data.recordAttendance);
       setTraineesAttendance([]);
       setRecordTrainees([]);
       onClose();
@@ -141,12 +104,7 @@ function ModalAttendance({
 
   if (!isVisible) return null;
 
-  const handleGiveAttendance = (
-    name: string,
-    score: number,
-    id: string,
-    day: string,
-  ) => {
+  const handleGiveAttendance = (name: string, score: number, id: string) => {
     let updatedAttendance;
     const updateAttendance = traineesAttendance.find(
       (attendance) => attendance.id === id,
@@ -159,7 +117,7 @@ function ModalAttendance({
         return attendance;
       });
     } else {
-      updatedAttendance = [...traineesAttendance, { name, score, id, day }];
+      updatedAttendance = [...traineesAttendance, { name, score, id }];
     }
 
     setTraineesAttendance(updatedAttendance);
@@ -175,10 +133,7 @@ function ModalAttendance({
 
     const updatedRecords = traineesAttendance.map((attendance) => ({
       trainee: attendance.id,
-      status: {
-        day: attendance.day,
-        score: attendance.score.toString(),
-      },
+      score: attendance.score,
     }));
 
     setRecordTrainees(updatedRecords);
@@ -288,7 +243,6 @@ function ModalAttendance({
                                       trainee.profile.name,
                                       2,
                                       trainee.id,
-                                      day,
                                     );
                                   }}
                                   className="cursor-pointer hover:brightness-75"
@@ -303,7 +257,6 @@ function ModalAttendance({
                                       trainee.profile.name,
                                       1,
                                       trainee.id,
-                                      day,
                                     );
                                   }}
                                   className="cursor-pointer hover:brightness-75"
@@ -318,7 +271,6 @@ function ModalAttendance({
                                       trainee.profile.name,
                                       0,
                                       trainee.id,
-                                      day,
                                     );
                                   }}
                                   className="cursor-pointer hover:brightness-75"
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d601c1f97..b4eda3ca8 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -140,27 +140,32 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
             <SideNavLink onClick={toggle} to="/sessions" name="Sessions">
               <BookOpenIcon className="w-5" />
             </SideNavLink>
-            <SideNavLink onClick={toggle} name="Attendance" to="/attendance">
-              <ClipboardCheckIcon className="w-5 " />
-            </SideNavLink>
 
             <SideNavLink onClick={toggle} name="Docs" to="/coordinatorDocs">
               <FolderIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
 
-          {/* manger role */}
-          <CheckRole roles={['manager']}>
-            <SideNavLink onClick={toggle} name="Teams" to="/team-cards">
-              <UserGroupIcon className="w-5" />
-            </SideNavLink>
-          </CheckRole>
           {/* TTL role */}
           <CheckRole roles={['ttl']}>
             <SideNavLink onClick={toggle} to="/ttl-trainees" name="Trainees">
               <UserGroupIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
+          
+          {/* FOR COORDINATORS AND A TTL */}
+          <CheckRole roles={['coordinator', 'ttl']}>
+            <SideNavLink onClick={toggle} name="Attendance" to="/attendance">
+              <ClipboardCheckIcon className="w-5 " />
+            </SideNavLink>
+          </CheckRole>
+
+          {/* manger role */}
+          <CheckRole roles={['manager']}>
+            <SideNavLink onClick={toggle} name="Teams" to="/team-cards">
+              <UserGroupIcon className="w-5" />
+            </SideNavLink>
+          </CheckRole>
 
           <CheckRole roles={['ttl']}>
             <SideNavLink onClick={toggle} to="/docs/ttl" name="Docs">
@@ -186,7 +191,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
           </SideNavLink>
 
           <SideNavLink onClick={toggle} name="Help" to="/support">
-            <SupportIcon className="w-5 text-red-700 dark:text-red-600 hover:text-red-900" />
+            <SupportIcon className="w-5" />
           </SideNavLink>
           <SideNavLink onClick={logout} to="#link">
             <LogoutIcon className="w-5 text-red-700 dark:text-red-600 hover:text-red-900" />
diff --git a/src/containers/admin-dashBoard/Sessions.tsx b/src/containers/admin-dashBoard/Sessions.tsx
index 356497f15..2d7af0c08 100644
--- a/src/containers/admin-dashBoard/Sessions.tsx
+++ b/src/containers/admin-dashBoard/Sessions.tsx
@@ -158,7 +158,6 @@ function AdminSission() {
           getSessionRefetch();
         })
         .catch((error) => {});
-      // console.log("------",id)
     }
   };
 
diff --git a/src/pages/Attendance.tsx b/src/pages/Attendance.tsx
index 0125a4433..11e762727 100644
--- a/src/pages/Attendance.tsx
+++ b/src/pages/Attendance.tsx
@@ -10,7 +10,7 @@ const TraineeAttendance = React.lazy(
 function Attendance() {
   return (
     <>
-      <CheckRole roles={['coordinator']}>
+      <CheckRole roles={['coordinator', 'ttl']}>
         <TraineeAttendanceTracker />
       </CheckRole>
       <CheckRole roles={['trainee']}>
diff --git a/src/pages/Organization/Orglogin.tsx b/src/pages/Organization/Orglogin.tsx
index 37762f472..7a20c6c14 100644
--- a/src/pages/Organization/Orglogin.tsx
+++ b/src/pages/Organization/Orglogin.tsx
@@ -88,7 +88,6 @@ function Orglogin() {
     }
   };
   const names = name.replace(/ /gi, '').toLowerCase();
-  // console.log(names)
   const completeOrgUrl = `${names}`;
 
   return (
diff --git a/src/pages/TraineeAttendanceTracker.tsx b/src/pages/TraineeAttendanceTracker.tsx
index 5e4805420..194ef9451 100644
--- a/src/pages/TraineeAttendanceTracker.tsx
+++ b/src/pages/TraineeAttendanceTracker.tsx
@@ -1,57 +1,66 @@
 /* eslint-disable no-underscore-dangle */
-import React, { useEffect, useRef, useState } from 'react';
-import { useQuery, useLazyQuery, useMutation } from '@apollo/client';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { useLazyQuery, useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 import 'react-datepicker/dist/react-datepicker.css';
 import { toast } from 'react-toastify';
 import { RiDeleteBin6Line } from 'react-icons/ri';
 import { LuClipboardEdit } from 'react-icons/lu';
-import { MdCalendarMonth, MdOutlineCalendarMonth } from 'react-icons/md';
-import { isSameWeek } from 'date-fns';
+import { MdOutlineCalendarMonth } from 'react-icons/md';
 import { PulseLoader } from 'react-spinners';
-import { DELETE_ATTENDANCE, UPDATE_ATTENDANCE } from '../Mutations/Attendance';
+import { FaRegCirclePause, FaRegCirclePlay } from 'react-icons/fa6';
+import {
+  DELETE_ATTENDANCE,
+  PAUSE_AND_RESUME_ATTENDANCE,
+  UPDATE_ATTENDANCE,
+} from '../Mutations/Attendance';
 import { GET_TEAM_ATTENDANCE } from '../queries/attendance.queries';
 import 'react-circular-progressbar/dist/styles.css';
-import { GET_ALL_TEAMS } from '../queries/team.queries';
-import { GET_TEAMS_CARDS } from '../components/CoordinatorCard';
+import { GET_ALL_TEAMS, GET_TTL_TEAMS } from '../queries/team.queries';
 import AttendanceSymbols from '../components/AttendanceSymbols';
-import { getDateForDays, Weekdays } from '../utils/getDateForDays';
-import Modal, { recordTraineeProps } from '../components/ModalAttendance';
+import Modal from '../components/ModalAttendance';
 import EditAttendanceButton from '../components/EditAttendenceButton';
+import { UserContext } from '../hook/useAuth';
 
 /* istanbul ignore next */
+interface UserInterface {
+  id: string;
+  email: string;
+  role: string;
+  status: {
+    date: string;
+    reason: string;
+    status: string;
+  };
+  profile: {
+    firstName?: string;
+    lastName?: string;
+    city?: string;
+    country?: string;
+    phoneNumber?: string;
+    biography?: string;
+    avatar?: string;
+    id?: string;
+    name?: string;
+  };
+}
 interface TeamData {
   id: string;
+  active: boolean;
+  isJobActive: boolean;
   name: string;
+  phase?: {
+    id: string;
+    name: string;
+  };
   cohort: {
     name: string;
     phase: {
-      id: 'string';
-      name: 'string';
+      id: string;
+      name: string;
     };
   };
-  members: [
-    {
-      id: string;
-      email: string;
-      status: {
-        date: string;
-        reason: string;
-        status: string;
-      };
-      profile: {
-        firstName: string;
-        lastName: string;
-        city: string;
-        country: string;
-        phoneNumber: string;
-        biography: string;
-        avatar: string;
-        id: string;
-        name: string;
-      };
-    },
-  ];
+  members: UserInterface[];
 }
 
 export interface TraineeAttendanceDataInterface {
@@ -62,12 +71,28 @@ export interface TraineeAttendanceDataInterface {
       name: string;
     };
   };
-  status: string;
+  score: number;
+}
+interface DayInterface {
+  date: string;
+  isValid: boolean;
+}
+export interface WeekdaysInterface {
+  mon: DayInterface;
+  tue: DayInterface;
+  wed: DayInterface;
+  thu: DayInterface;
+  fri: DayInterface;
+}
+
+interface PhaseInterface {
+  id: string;
+  name: string;
 }
 export interface TraineeAttendanceDayInterface {
-  week: string;
-  phase: string;
-  dates: Weekdays;
+  week: number;
+  phase: PhaseInterface;
+  dates: WeekdaysInterface;
   days: {
     mon: TraineeAttendanceDataInterface[];
     tue: TraineeAttendanceDataInterface[];
@@ -77,213 +102,72 @@ export interface TraineeAttendanceDayInterface {
   };
 }
 
-interface PhaseInterface {
-  id: string;
-  name: string;
+interface ValidDatesInterface {
+  today: string;
+  yesterday: string;
+}
+
+export interface AttendanceDataInterface extends ValidDatesInterface {
+  attendanceWeeks: Array<PhaseInterface & { weeks: Array<number> }>;
+  attendance: Array<TraineeAttendanceDayInterface>;
 }
 
 function TraineeAttendanceTracker() {
   const { t } = useTranslation();
+  const { user } = useContext(UserContext);
   const [getTeamAttendance, { loading: teamAttendanceLoading }] =
     useLazyQuery(GET_TEAM_ATTENDANCE);
-  const [selectedWeek, setSelectedWeek] = useState<string>();
-  const [weeks, setWeeks] = useState<string[]>([]);
+  const [selectedWeek, setSelectedWeek] = useState<number>();
+  const [weeks, setWeeks] = useState<number[]>([]);
   const [selectedTeam, setSelectedTeam] = useState<string>('');
-  const [isValidAttendanceDay, SetIsValidAttendanceDay] =
+  const [isValidAttendanceDay, setIsValidAttendanceDay] =
     useState<boolean>(false);
   const [selectedDay, setSelectedDay] = useState<
     'mon' | 'tue' | 'wed' | 'thu' | 'fri'
   >('mon');
   const [selectedDayDate, setSelectedDayDate] = useState<string>('');
-  const [currentTime, setCurrentTime] = useState<number>();
   const [selectedDayHasData, setSelectedDayHasData] = useState<boolean>(false);
   const [selectedPhase, setSelectedPhase] = useState<
     PhaseInterface | undefined
   >();
   const [phases, setPhases] = useState<PhaseInterface[]>([]);
   const [teamsData, setTeamsData] = useState<TeamData[]>();
-  const [getAllTeams, { loading: teamLoading }] = useLazyQuery(GET_ALL_TEAMS);
+  const [getAllTeams, { loading: teamsLoading }] = useLazyQuery(GET_ALL_TEAMS);
+  const [getTTLTeams, { loading: teamLoading }] = useLazyQuery(GET_TTL_TEAMS);
   const [initialTraineeAttendanceData, setInitialTraineeAttendanceData] =
     useState<TraineeAttendanceDayInterface[]>([]);
   const [traineeAttendanceData, setTraineeAttendanceData] = useState<
     TraineeAttendanceDayInterface[]
   >([]);
-  const [attendanceData, setAttendanceData] = useState<any[]>([]);
+  const [attendanceData, setAttendanceData] =
+    useState<AttendanceDataInterface>();
   const [orgToken, setOrgToken] = useState<string | null>('');
   const [resetDayAndWeek, setResetDayAndWeek] = useState<boolean>(true);
   const [selectedTeamId, setSelectedTeamId] = useState('');
   const [selectedTeamData, setSelectedTeamData] = useState<TeamData>();
+  const [selectedTeamTrainees, setSelectedTeamTrainees] =
+    useState<UserInterface[]>();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isUpdatedMode, setIsUpdatedMode] = useState<boolean>(false);
+  const [pauseResumeAttendance, setPauseResumeAttendance] =
+    useState<boolean>(false);
   const [deleteAttendance, { loading: loadingDeleteAttendance }] =
     useMutation(DELETE_ATTENDANCE);
   const [updated, setUpdate] = useState<boolean>(false);
-  const [updateTrainees, setUpdateTrainees] = useState<recordTraineeProps[]>(
-    [],
+  const [dayType, setDayType] = useState<'today' | 'yesterday' | 'others'>(
+    'others',
   );
+  const [validDate, setValidDate] = useState<ValidDatesInterface>({
+    today: '',
+    yesterday: '',
+  });
   const editColumnRef = useRef<HTMLTableCellElement | null>(null);
 
-  const formatAttendanceData = (data: any) => {
-    const tempPhases: PhaseInterface[] = [];
-
-    const updatedTraineeData: TraineeAttendanceDayInterface[] = [];
-
-    data.forEach((attendance: any, index: any) => {
-      let hasData = false;
-      !selectedWeek && index === 0 && setSelectedWeek(attendance.week);
-
-      if (resetDayAndWeek && selectedWeek! < attendance.week) {
-        setSelectedWeek(attendance.week);
-      }
-
-      if (!tempPhases.find((p) => p.id === attendance.phase.id))
-        tempPhases.push({
-          id: attendance.phase.id,
-          name: attendance.phase.name,
-        });
-
-      const result: TraineeAttendanceDayInterface = {
-        week: attendance.week,
-        dates: {
-          mon: '',
-          tue: '',
-          wed: '',
-          thu: '',
-          fri: '',
-        },
-        phase: attendance.phase.id,
-        days: {
-          mon: [],
-          tue: [],
-          wed: [],
-          thu: [],
-          fri: [],
-        },
-      };
-
-      let date = '';
-
-      attendance.teams[0].trainees.forEach((traineeData: any) => {
-        if (traineeData.status.length) {
-          hasData = true;
-          traineeData.status.forEach((traineeStatus: any) => {
-            if (traineeStatus.day === selectedDay) {
-              setSelectedDayHasData(true);
-            }
-            if (traineeStatus.date && !date) {
-              date = traineeStatus.date;
-            }
-
-            result.days[
-              traineeStatus.day as 'mon' | 'tue' | 'wed' | 'thu' | 'fri'
-            ].push({
-              trainee: traineeData.trainee,
-              status: traineeStatus.score as string,
-            });
-          });
-          resetDayAndWeek &&
-            setSelectedDay(
-              traineeData.status[traineeData.status.length - 1].day,
-            );
-        }
-        if (!traineeData.status.length && !hasData) {
-          setSelectedDayHasData(false);
-          date = currentTime ? currentTime.toString() : Date.now().toString();
-        }
-      });
-      if (date) result.dates = getDateForDays(date);
-      updatedTraineeData.push(result);
-    });
-
-    setTraineeAttendanceData(updatedTraineeData);
-    setInitialTraineeAttendanceData(updatedTraineeData);
-
-    teamsData?.forEach((team) => {
-      if (team.id === selectedTeamId) {
-        
-        const names = tempPhases.map((phase) => phase.name);
-        let isDataSet = false;
-        if (!data.length) {
-          isDataSet = true;
-          setWeeks(['1']);
-          setSelectedWeek('1');
-          setSelectedDayDate(
-            getDateForDays(
-              currentTime ? currentTime.toString() : Date.now().toString(),
-            )[selectedDay],
-          );
-          setTraineeAttendanceData([
-            {
-              week: '1',
-              phase: team.cohort.phase.id,
-              dates: getDateForDays(
-                currentTime ? currentTime.toString() : Date.now().toString(),
-              ),
-              days: {
-                mon: [],
-                tue: [],
-                wed: [],
-                thu: [],
-                fri: [],
-              },
-            },
-          ]);
-        }
-
-        if (!names.includes(team.cohort.phase.name)) {
-          tempPhases.push({
-            id: team.cohort.phase.id,
-            name: team.cohort.phase.name,
-          });
-          
-          if (!isDataSet) {
-            setSelectedWeek('1');
-            setTraineeAttendanceData((prevData) => [
-              ...prevData,
-              {
-                week: '1',
-                data: false,
-                phase: team.cohort.phase.id,
-                dates: getDateForDays(
-                  currentTime ? currentTime.toString() : Date.now().toString(),
-                ),
-                days: {
-                  mon: [],
-                  tue: [],
-                  wed: [],
-                  thu: [],
-                  fri: [],
-                },
-              },
-            ]);
-          }
-        }
-      }
-    });
-    setPhases(tempPhases);
-    setResetDayAndWeek(true);
-    selectedTeamData &&
-      !selectedPhase &&
-      setSelectedPhase({
-        id: selectedTeamData?.cohort.phase.id,
-        name: selectedTeamData?.cohort.phase.name,
-      });
-  };
-
   const [updateAttendance, { loading: loadingupdateAttendance }] = useMutation(
     UPDATE_ATTENDANCE,
     {
-      variables: {
-        week: Number(selectedWeek),
-        team: selectedTeamId,
-        phase: selectedPhase?.id,
-        trainees: updateTrainees,
-        orgToken: localStorage.getItem('orgToken'),
-      },
       onCompleted: (data) => {
-        if (data) {
-          toast.success('Attendance updated successfully.');
-        }
+        toast.success('Attendance updated successfully.');
         setUpdate(false);
         setIsUpdatedMode(false);
         setAttendanceData(data.updateAttendance);
@@ -296,69 +180,111 @@ function TraineeAttendanceTracker() {
       },
     },
   );
-  useEffect(() => {
-    if (attendanceData) {
-      formatAttendanceData(attendanceData);
-    }
-  }, [attendanceData, currentTime]);
-  useEffect(() => {
-    if (updateTrainees.length > 0) {
-      updateAttendance();
-    }
-  }, [updateTrainees]);
-
-  useEffect(() => {
-    fetch('http://worldtimeapi.org/api/timezone/Etc/UTC')
-      .then((response) => response.json())
-      .then((data) => {
-        const utcDate = new Date(data.datetime);
-        setCurrentTime(utcDate.getTime());
-      })
-      .catch((error) => {});
-  }, []);
+  const [pauseAndResumeTeamAttendance, { loading: loadingPRTeamAttendance }] =
+    useMutation(PAUSE_AND_RESUME_ATTENDANCE, {
+      onCompleted: (data) => {
+        setPauseResumeAttendance(false);
+        setSelectedWeek(undefined);
+        setAttendanceData(
+          data.pauseAndResumeTeamAttendance.sanitizedAttendance,
+        );
+        const { team } = data.pauseAndResumeTeamAttendance;
 
+        toast.success(
+          `Attendance for team '${team.name}' was successfully ${
+            team.isJobActive ? 'resumed' : 'paused'
+          }. `,
+        );
+        setSelectedTeamData((prevData) => {
+          const result = prevData;
+          if (result) {
+            result.isJobActive = team.isJobActive;
+          }
+          return result;
+        });
+      },
+      onError: (error) => {
+        setPauseResumeAttendance(false);
+        const errorMessage =
+          error.graphQLErrors?.[0]?.message || 'An unexpected error occurred';
+        toast.error(errorMessage);
+      },
+    });
   useEffect(() => {
     setOrgToken(localStorage.getItem('orgToken'));
   }, []);
 
-  const { data, loading } = useQuery(GET_TEAMS_CARDS, {
-    variables: { orgToken },
-  });
-
-  useEffect(() => {
-    if (!loading && data && data.getAllTeams.length > 0) {
-      setSelectedTeam(data.getAllTeams[0].name);
-    }
-  }, [loading, data]);
-
   useEffect(() => {
     const fetchData = async () => {
       const orgToken = localStorage.getItem('orgToken');
+
       if (orgToken) {
-        getAllTeams({
-          fetchPolicy: 'no-cache',
-          variables: { orgToken },
-          onCompleted: (data) => {
-            setTeamsData(data.getAllTeams);
-            setSelectedTeam(data.getAllTeams[0].name);
-            setSelectedTeamData(data.getAllTeams[0]);
-            setSelectedTeamId(data.getAllTeams[0].id);
-          },
-          onError: (error) => {
-            const errorMessage =
-              error.graphQLErrors?.[0]?.message ||
-              'An unexpected error occurred';
-            toast.error(errorMessage);
-          },
-        });
+        if (user.role === 'coordinator') {
+          getAllTeams({
+            fetchPolicy: 'no-cache',
+            variables: { orgToken },
+            onCompleted: (data) => {
+              setTeamsData(data.getAllTeams);
+              setSelectedTeam(data.getAllTeams[0].name);
+              setSelectedTeamData(data.getAllTeams[0]);
+              data.getAllTeams[0].isJobActive &&
+                data.getAllTeams[0].active &&
+                setSelectedPhase(
+                  data.getAllTeams[0].phase || data.getAllTeams[0].cohort.phase,
+                );
+              setSelectedTeamId(data.getAllTeams[0].id);
+            },
+            onError: (error) => {
+              const errorMessage =
+                error.graphQLErrors?.[0]?.message ||
+                'An unexpected error occurred';
+              toast.error(errorMessage);
+            },
+          });
+        }
+        if (user.role === 'ttl') {
+          getTTLTeams({
+            fetchPolicy: 'no-cache',
+            variables: {
+              orgToken,
+            },
+            onCompleted: (data) => {
+              setTeamsData(data.getTTLTeams);
+              setSelectedTeam(data.getTTLTeams[0].name);
+              setSelectedTeamData(data.getTTLTeams[0]);
+              setPhases([
+                data.getTTLTeams[0].phase || data.getTTLTeams[0].cohort.phase,
+              ]);
+              data.getTTLTeams[0].isJobActive &&
+                data.getTTLTeams[0].active &&
+                setSelectedPhase(
+                  data.getTTLTeams[0].phase || data.getTTLTeams[0].cohort.phase,
+                );
+              setSelectedTeamId(data.getTTLTeams[0].id);
+            },
+            onError: (error) => {
+              const errorMessage =
+                error.graphQLErrors?.[0]?.message ||
+                'An unexpected error occurred';
+              toast.error(errorMessage);
+            },
+          });
+        }
       }
     };
-    fetchData();
-  }, [getAllTeams]);
 
+    fetchData();
+  }, [getAllTeams, getTTLTeams]);
   useEffect(() => {
+    if (selectedTeamData) {
+      const trainees = selectedTeamData?.members.filter(
+        (member: UserInterface) => member.role === 'trainee',
+      );
+      setSelectedTeamTrainees(trainees);
+    }
+
     setTraineeAttendanceData([]);
-    setAttendanceData([]);
+    setAttendanceData(undefined);
     teamsData?.forEach((team) => {
       if (team.id === selectedTeamId) {
         setSelectedTeam(team.name);
@@ -372,6 +298,16 @@ function TraineeAttendanceTracker() {
           team: selectedTeamId,
         },
         onCompleted: (data) => {
+          selectedTeamData?.isJobActive &&
+            selectedTeamData.active &&
+            setSelectedPhase({
+              id:
+                selectedTeamData!.phase?.id ||
+                selectedTeamData!.cohort.phase.id,
+              name:
+                selectedTeamData!.phase?.name ||
+                selectedTeamData!.cohort.phase.name,
+            });
           setAttendanceData(data.getTeamAttendance);
         },
         onError: (error) => {
@@ -380,78 +316,94 @@ function TraineeAttendanceTracker() {
       });
   }, [selectedTeamId]);
 
-  // New week for team attendance
+  // Handle retrieved attendance data
   useEffect(() => {
-    const tempTeam = teamsData?.find((team) => team.id === selectedTeamId);
-    let lastDayDate = '';
-    if (tempTeam) {
-      const tempWeeks: string[] = traineeAttendanceData
-        .map((attendanceData) => {
+    if (attendanceData) {
+      setValidDate({
+        today: attendanceData.today,
+        yesterday: attendanceData.yesterday,
+      });
+      setTraineeAttendanceData(attendanceData.attendance);
+      setInitialTraineeAttendanceData(attendanceData.attendance);
+      const teamAttendancePhases: PhaseInterface[] = [];
+      const attendanceWeek = attendanceData.attendanceWeeks.filter(
+        (attendanceWeek: any, index) => {
+          teamAttendancePhases.push(attendanceWeek.phase);
           if (
-            attendanceData.phase === selectedPhase?.id
+            (!selectedTeamData?.isJobActive || !selectedTeamData?.active) &&
+            index === 0
           ) {
-            if (attendanceData.dates.fri)
-              lastDayDate = attendanceData.dates.fri;
-            return attendanceData.week;
+            return true;
           }
-          return '';
-        })
-        .filter((week) => week);
-
-      const isInSameWeek = isSameWeek(
-        new Date(lastDayDate),
-        new Date(currentTime || Date.now()),
-        {
-          weekStartsOn: 1,
+          return (
+            attendanceWeek.phase.id ===
+            (selectedTeamData?.phase?.id || selectedTeamData?.cohort.phase.id)
+          );
         },
       );
+      teamAttendancePhases.length &&
+        (!selectedTeamData?.isJobActive || !selectedTeamData?.active) &&
+        setSelectedPhase({
+          id: teamAttendancePhases[0].id,
+          name: teamAttendancePhases[0].name,
+        });
+      setPhases(teamAttendancePhases);
+      const tempWeeks = attendanceWeek.length
+        ? [...attendanceWeek[0].weeks]
+        : [1];
+      tempWeeks.sort((a, b) => a - b);
+      setWeeks(tempWeeks);
+      !selectedWeek && setSelectedWeek(tempWeeks[tempWeeks.length - 1]);
+    }
+  }, [attendanceData]);
 
-      if (tempWeeks.length && !isInSameWeek) {
-        tempWeeks.push(String(tempWeeks.length + 1));
-        const baseDate = isInSameWeek
-          ? currentTime || Date.now() + 7 * 24 * 60 * 60 * 1000
-          : currentTime || Date.now();
-
-        const dates = getDateForDays(baseDate.toString());
-
-        // setAttendanceData(prevData => [...prevData, {}])
-        setTraineeAttendanceData((prevData) => [
-          ...prevData,
-          {
-            week: String(tempWeeks[tempWeeks.length - 1]),
-            data: false,
-            phase: tempTeam!.cohort.phase.id,
-            dates,
-            days: {
-              mon: [],
-              tue: [],
-              wed: [],
-              thu: [],
-              fri: [],
-            },
-          },
-        ]);
-
-        !selectedWeek && setSelectedWeek(tempWeeks[0]);
-      } 
+  // Handle week on phase change
+  useEffect(() => {
+    if (attendanceData && selectedPhase) {
+      const attendanceWeek = attendanceData.attendanceWeeks.filter(
+        (attendanceWeek: any) => attendanceWeek.phase.id === selectedPhase?.id,
+      );
+      attendanceWeek.length ? setWeeks(attendanceWeek[0].weeks) : setWeeks([1]);
+      const tempWeeks = attendanceWeek.length
+        ? [...attendanceWeek[0].weeks]
+        : [1];
+      tempWeeks.sort((a, b) => a - b);
       setWeeks(tempWeeks);
+      setSelectedWeek(tempWeeks[tempWeeks.length - 1]);
     }
-  }, [selectedPhase, initialTraineeAttendanceData, currentTime]);
+  }, [selectedPhase]);
 
   // Change Date for selected Day
   useEffect(() => {
     const result = traineeAttendanceData.find((attendanceData) => {
       setSelectedDayHasData(!!attendanceData.days[selectedDay].length);
       if (
-        attendanceData.phase === selectedPhase?.id &&
+        attendanceData.phase.id === selectedPhase?.id &&
         attendanceData.week === selectedWeek
       ) {
         return true;
       }
       return null;
     });
+    if (result) {
+      const selectedDate = new Date(result.dates[selectedDay].date)
+        .toISOString()
+        .split('T')[0];
+      const today = new Date(Number(validDate.today))
+        .toISOString()
+        .split('T')[0];
+      const yesterday = new Date(Number(validDate.yesterday))
+        .toISOString()
+        .split('T')[0];
 
-    result && setSelectedDayDate(result.dates[selectedDay]);
+      (selectedDate === today && setDayType('today')) ||
+        (selectedDate === yesterday && setDayType('yesterday')) ||
+        (selectedDate !== today &&
+          selectedDate !== yesterday &&
+          setDayType('others'));
+
+      setSelectedDayDate(result.dates[selectedDay].date);
+    }
   }, [selectedDay, selectedPhase, selectedWeek, traineeAttendanceData]);
 
   const openModal = () => {
@@ -463,9 +415,14 @@ function TraineeAttendanceTracker() {
   };
 
   const submitAttendance = async () => {
+    if (!selectedTeamData?.active) {
+      toast.error('Attendance for inactive team can not be recorded.');
+      return;
+    }
     if (
       isValidAttendanceDay &&
-      selectedTeamData?.cohort.phase.id === selectedPhase?.id
+      (selectedTeamData?.phase?.id || selectedTeamData?.cohort.phase.id) ===
+        selectedPhase?.id
     ) {
       openModal();
       return;
@@ -477,7 +434,7 @@ function TraineeAttendanceTracker() {
     const attendanceToUpdate = traineeAttendanceData.find(
       (attendance) =>
         attendance.week === selectedWeek &&
-        attendance.phase === selectedPhase?.id,
+        attendance.phase.id === selectedPhase?.id,
     );
     if (!attendanceToUpdate) {
       toast.error('This day has no attendance yet');
@@ -486,17 +443,24 @@ function TraineeAttendanceTracker() {
     const traineesAttendance = attendanceToUpdate.days[selectedDay];
     const updatedRecords = traineesAttendance.map((attendance) => ({
       trainee: attendance.trainee.id,
-      status: {
-        day: selectedDay,
-        score: attendance.status.toString(),
-      },
+      score: attendance.score,
     }));
-    setUpdateTrainees(updatedRecords);
+
+    updatedRecords.length &&
+      updateAttendance({
+        variables: {
+          week: selectedWeek,
+          day: selectedDay,
+          team: selectedTeamId,
+          phase: selectedPhase?.id,
+          trainees: updatedRecords,
+          orgToken: localStorage.getItem('orgToken'),
+        },
+      });
   };
 
   const handleDeleteAttendance = () => {
     if (loadingDeleteAttendance) return;
-    const date = new Date().toISOString().split('T')[0];
     if (!selectedDayHasData) {
       toast.warning(
         'You cannot delete attendance for the day without any entries.',
@@ -504,7 +468,10 @@ function TraineeAttendanceTracker() {
       );
       return;
     }
-    if (selectedTeamData?.cohort.phase.id !== selectedPhase?.id) {
+    if (
+      (selectedTeamData?.phase?.id || selectedTeamData?.cohort.phase.id) !==
+      selectedPhase?.id
+    ) {
       toast.warning(
         'Attendance records from previous phase cannot be deleted; they can only be updated.',
         { style: { color: '#000', lineHeight: '.95rem' } },
@@ -532,41 +499,20 @@ function TraineeAttendanceTracker() {
         setResetDayAndWeek(false);
       },
       onError: (error) => {
-        toast.error(error.message);
+        toast.error("Couldn't delete attendance, please try again");
       },
     });
   };
 
-  const handleAttendanceDay = () => {
-    const today = new Date();
-    const input = new Date(selectedDayDate);
-
-    today.setHours(0, 0, 0, 0);
-    input.setHours(0, 0, 0, 0);
-
-    const previousDay = new Date(today);
-    previousDay.setDate(today.getDate() - 1);
-
-    if (input.getTime() === today.getTime()) {
-      return true;
-    }
-
-    if (input.getTime() === previousDay.getTime()) {
-      return true;
-    }
-
-    // Check if today is Monday  and selectedDayDate is last Friday
-    if (today.getDay() === 1 && input.getDay() === 5) {
-      const lastFriday = new Date(today);
-      lastFriday.setDate(today.getDate() - 3);
-
-      return input.getTime() === lastFriday.getTime();
-    }
-
-    return false;
-  };
+  // Check if date for selected day is valid
   useEffect(() => {
-    SetIsValidAttendanceDay(handleAttendanceDay());
+    setIsValidAttendanceDay((prevData) =>
+      Object.values(validDate).some(
+        (date) =>
+          new Date(Number(date)).toISOString().split('T')[0] ===
+          selectedDayDate,
+      ),
+    );
   }, [selectedDayDate]);
 
   useEffect(() => {
@@ -575,18 +521,61 @@ function TraineeAttendanceTracker() {
     }
   }, [isUpdatedMode]);
   return (
-    <div className="bg-tertiary dark:bg-dark-bg p-5 xmd:p-10 rounded-lg font-serif">
+    <div className="bg-tertiary dark:bg-dark-bg p-5 xmd:p-7 md:p-10 rounded-lg font-serif">
       <Modal
         isVisible={isModalOpen}
         onClose={closeModal}
-        trainees={selectedTeamData?.members}
+        trainees={selectedTeamTrainees}
         week={Number(selectedWeek)}
+        dayType={dayType}
         date={selectedDayDate}
-        day={selectedDay}
         team={selectedTeamId}
         teamName={selectedTeam}
         setAttendanceData={setAttendanceData}
       />
+      {pauseResumeAttendance && (
+        <div className="fixed inset-0 bg-gray-900 bg-opacity-75 flex justify-center items-center z-50 p-4">
+          <div className="flex flex-col justify-between bg-tertiary dark:bg-dark-bg h-[13rem] xmd:h-[15rem] w-[27rem] rounded-md p-4">
+            <div className="xmd:pt-1 pb-2 xmd:pb-3 pl-2 border-b-2 border-neutral-600 dark:border-white font-bold text-[.92rem] xmd:text-[.98rem]">
+              <p>
+                {selectedTeamData?.isJobActive
+                  ? 'Pause Attendance'
+                  : 'Resume Attendance'}
+              </p>
+            </div>
+            <p className="text-[.82rem] xmd:text-[.88rem] text-justify mx-2 font-normal">
+              {selectedTeamData?.isJobActive
+                ? "By confirming, automatic attendance week additions for upcoming weeks will be paused. You can still record attendance for the current week. Don't worry you can reactivate this feature at any time!."
+                : "By confirming, automatic attendance week additions for upcoming weeks will be activated again. If you ever wish to pause this feature again, it's easy to do!"}
+            </p>
+            <div className="flex justify-end gap-x-3 text-[.83rem] xmd:text-[.93rem] font-medium mt-1 text-white">
+              <button
+                type="button"
+                onClick={() => setPauseResumeAttendance(false) }
+                className="bg-neutral-600/80 dark:bg-neutral-600 hover:bg-neutral-600/75 h-[1.9rem] xmd:h-[2.15rem] px-3 xmd:px-4 rounded-[4px]"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  !loadingPRTeamAttendance &&
+                    pauseAndResumeTeamAttendance({
+                      variables: {
+                        team: selectedTeamId,
+                        orgToken: localStorage.getItem('orgToken'),
+                      },
+                    });
+                }}
+                disabled={loadingPRTeamAttendance}
+                className="bg-primary hover:bg-primary/75 h-[1.9rem] xmd:h-[2.15rem] px-3 xmd:px-4 rounded-[4px]"
+              >
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
       <div className="">
         <div className="flex flex-col gap-y-5 xmd:gap-y-9 rounded-md w-full mt-1 xmd:mt-0">
           <div className="text-lg xmd:text-xl font-semibold">
@@ -594,7 +583,9 @@ function TraineeAttendanceTracker() {
           </div>
           <div className="flex items-end justify-between">
             <div>
-              <p className="text-[.9rem] xmd:text-[.95rem]">Team</p>
+              <p className="text-[.9rem] xmd:text-[.95rem] font-medium -mb-[2px]">
+                Team
+              </p>
               <div className="flex px-1 h-[1.85rem] xmd:h-8 w-24 xmd:w-32 rounded-[4px] border dark:border-white border-black text-black dark:text-white ">
                 <select
                   data-testid="team-test"
@@ -620,12 +611,17 @@ function TraineeAttendanceTracker() {
                     setSelectedTeamData(teamData);
                   }}
                 >
-                  {teamsData &&
+                  {teamsData?.length &&
                     teamsData.map((teamData) => (
                       <option key={teamData.id} value={teamData.id}>
                         {teamData.name}
                       </option>
                     ))}
+                  {!teamLoading && !teamsData?.length && (
+                    <option value="" disabled>
+                      No teams
+                    </option>
+                  )}
                 </select>
               </div>
             </div>
@@ -636,7 +632,8 @@ function TraineeAttendanceTracker() {
                 isValidAttendanceDay &&
                 !teamAttendanceLoading &&
                 !selectedDayHasData &&
-                selectedTeamData?.cohort.phase.id === selectedPhase?.id
+                (selectedTeamData?.phase?.id ||
+                  selectedTeamData?.cohort.phase.id) === selectedPhase?.id
                   ? 'bg-primary text-white'
                   : 'bg-neutral-400/60 dark:bg-neutral-500 text-black dark:text-white cursor-not-allowed'
               }   text-[.84rem] xmd:text-[.9rem] font-semibold w-[8.9rem] xmd:w-[10rem] h-[1.9rem] xmd:h-[2.3rem] rounded-[4px] tracking-tight`}
@@ -645,15 +642,16 @@ function TraineeAttendanceTracker() {
                 !isValidAttendanceDay ||
                 teamAttendanceLoading ||
                 selectedDayHasData ||
-                selectedTeamData?.cohort.phase.id !== selectedPhase?.id
+                (selectedTeamData?.phase?.id ||
+                  selectedTeamData?.cohort.phase.id) !== selectedPhase?.id
               }
             >
-              {!teamLoading ? t('Submit Attendance') : 'Loading...'}
+              {!teamsLoading ? t('Submit Attendance') : 'Loading...'}
             </button>
           </div>
 
-          <div className="flex justify-between mt-5">
-            <div className="flex">
+          <div className="flex justify-between items-end mt-5">
+            <div className="flex flex-shrink-0 w-32 xm:w-44 xmd:w-[70%] overflow-x-scroll xmd:overflow-x-auto  xmd:custom-scrollbar">
               {phases.map((phase, index) => (
                 <div
                   // eslint-disable-next-line react/no-array-index-key
@@ -661,8 +659,8 @@ function TraineeAttendanceTracker() {
                   className={`${
                     phase.id === selectedPhase?.id
                       ? 'border-black dark:border-white dark:text-white'
-                      : 'dark:border-neutral-500 dark:text-neutral-400 border-neutral-400  text-black'
-                  } h-7 px-3 border-b-2 capitalize cursor-pointer`}
+                      : 'dark:border-neutral-600 dark:text-neutral-500 border-neutral-400 text-neutral-500 '
+                  } h-6 xmd:h-7 px-2 xmd:px-3 border-b-[3px] capitalize cursor-pointer font-medium whitespace-nowrap text-[.85rem] xmd:text-[.95rem]`}
                   onClick={() => {
                     if (isUpdatedMode && selectedPhase !== phase && updated) {
                       toast.warning('First Discard or Update your changes', {
@@ -678,7 +676,7 @@ function TraineeAttendanceTracker() {
                 </div>
               ))}
             </div>
-            <div className="flex items-center pl-2 pr-1 h-[1.85rem] xmd:h-8 w-24 xmd:w-28 rounded-[4px] border dark:border-white border-black text-black dark:text-white text-[.86rem] xmd:text-[.9rem]">
+            <div className="flex items-center pl-2 pr-1 h-[1.85rem] xmd:h-8 w-24 xmd:w-28 rounded-[4px] border dark:border-white border-black text-black dark:text-white text-[.84rem] xmd:text-[.9rem]">
               <span>Week:</span>
               <select
                 data-testid="week-test"
@@ -687,7 +685,7 @@ function TraineeAttendanceTracker() {
                 onChange={(event) => {
                   if (
                     isUpdatedMode &&
-                    selectedWeek !== event.target.value &&
+                    selectedWeek !== Number(event.target.value) &&
                     updated
                   ) {
                     toast.warning('First Discard or Update your changes', {
@@ -696,7 +694,7 @@ function TraineeAttendanceTracker() {
                     return;
                   }
                   setIsUpdatedMode(false);
-                  setSelectedWeek(event.target.value);
+                  setSelectedWeek(Number(event.target.value));
                 }}
               >
                 {weeks.length &&
@@ -709,7 +707,7 @@ function TraineeAttendanceTracker() {
             </div>
           </div>
 
-          <div className="flex justify-between items-center border border-neutral-400/60 dark:border-neutral-600 h-[1.85rem] xmd:h-9 text-[.88rem] xmd:text-base">
+          <div className="flex justify-between items-center border-2 border-neutral-400/60 dark:border-neutral-600 h-[1.85rem] xmd:h-9 text-[.83rem] xmd:text-base">
             {['mon', 'tue', 'wed', 'thu', 'fri'].map((day, index) => (
               <div
                 // eslint-disable-next-line react/no-array-index-key
@@ -718,7 +716,7 @@ function TraineeAttendanceTracker() {
                   selectedDay === day
                     ? 'bg-neutral-400/60 dark:bg-neutral-600'
                     : 'hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15'
-                } flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full`}
+                } flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full`}
                 onClick={() => {
                   if (isUpdatedMode && selectedDay !== day && updated) {
                     toast.warning('First Discard or Update your changes', {
@@ -761,7 +759,7 @@ function TraineeAttendanceTracker() {
                   }}
                   data-testid="update-link"
                 >
-                  <LuClipboardEdit className="text-xl" />
+                  <LuClipboardEdit className="text-lg" />
                 </div>
                 <div
                   onClick={() => {
@@ -776,33 +774,49 @@ function TraineeAttendanceTracker() {
                   }}
                   className="flex gap-x-1 items-center cursor-pointer"
                 >
-                  <RiDeleteBin6Line className="text-xl" />
+                  <RiDeleteBin6Line className="text-lg" />
+                </div>
+                <div
+                  onClick={() => {
+                    setPauseResumeAttendance(true);
+                  }}
+                  className="flex gap-x-[5px] items-center cursor-pointer"
+                >
+                  {selectedTeamData?.isJobActive ? (
+                    <FaRegCirclePause className="text-[1.12rem]" />
+                  ) : (
+                    <FaRegCirclePlay className="text-[1.12rem]" />
+                  )}
                 </div>
               </div>
             </div>
             <div className="overflow-x-scroll xmd:overflow-hidden">
               <table className="w-full overflow-hidden border border-neutral-400 dark:border-neutral-600">
                 <thead>
-                  <tr className="bg-neutral-400/60 dark:bg-neutral-600 h-10 text-[.88rem] xmd:text-base">
+                  <tr className="bg-neutral-400/60 dark:bg-neutral-600 h-8 xmd:h-10 text-[.84rem] xmd:text-base">
                     <th
                       className={`${
                         isUpdatedMode ? 'w-[35%] ' : 'w-[40%]'
-                      } text-left pl-2 xmd:pl-10`}
+                      } text-left pl-2 xmd:pl-10 font-semibold`}
                     >
                       Names
                     </th>
                     <th
                       className={`${
                         isUpdatedMode ? 'w-[35%] ' : 'w-[40%]'
-                      } text-left pl-2 xmd:pl-10`}
+                      } text-left pl-2 xmd:pl-10 font-semibold`}
                     >
                       Email
                     </th>
-                    <th className={`${isUpdatedMode ? 'w-[15%]' : 'w-[20%]'}`}>
+                    <th
+                      className={`${
+                        isUpdatedMode ? 'w-[15%]' : 'w-[20%]'
+                      } font-semibold`}
+                    >
                       Score
                     </th>
                     {isUpdatedMode && (
-                      <th ref={editColumnRef} className="w-[15%]">
+                      <th ref={editColumnRef} className="w-[15%] font-semibold">
                         Action
                       </th>
                     )}
@@ -813,7 +827,7 @@ function TraineeAttendanceTracker() {
                     traineeAttendanceData.length > 0 &&
                     traineeAttendanceData.map((attendanceData) => {
                       if (
-                        attendanceData.phase === selectedPhase?.id &&
+                        attendanceData.phase.id === selectedPhase?.id &&
                         attendanceData.week === selectedWeek &&
                         attendanceData.days[selectedDay].length
                       ) {
@@ -822,7 +836,7 @@ function TraineeAttendanceTracker() {
                             <tr
                               // eslint-disable-next-line react/no-array-index-key
                               key={index}
-                              className="even:bg-neutral-400/20 dark:even:bg-black/20  h-10 font-light"
+                              className="even:bg-neutral-400/20 dark:even:bg-black/20  h-10 even:border-y border-neutral-400/30 dark:border-neutral-600/40"
                             >
                               <td
                                 className="pl-2 xmd:pl-10 whitespace-nowrap"
@@ -863,9 +877,7 @@ function TraineeAttendanceTracker() {
                                 // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                 <td className="text-center">
                                   <div className="flex justify-center">
-                                    <AttendanceSymbols
-                                      status={dayData.status}
-                                    />
+                                    <AttendanceSymbols status={dayData.score} />
                                   </div>
                                 </td>
                               }
@@ -896,13 +908,13 @@ function TraineeAttendanceTracker() {
                       }
                       if (
                         traineeAttendanceData.length > 0 &&
-                        attendanceData.phase === selectedPhase?.id &&
+                        attendanceData.phase.id === selectedPhase?.id &&
                         attendanceData.week === selectedWeek &&
                         !attendanceData.days[selectedDay].length
                       ) {
                         return (
                           <tr key={`no-attendance-${selectedDay}`}>
-                            <td colSpan={3} className="text-center h-20">
+                            <td colSpan={3} className="text-center h-28">
                               There is no attendance for the selected day
                             </td>
                           </tr>
@@ -910,18 +922,18 @@ function TraineeAttendanceTracker() {
                       }
                       return null;
                     })}
-                  {(teamLoading || teamAttendanceLoading) && (
+                  {(teamsLoading || teamAttendanceLoading) && (
                     <tr key="no-attendance-abc">
-                      <td colSpan={3} className="text-center h-20">
+                      <td colSpan={3} className="text-center h-28">
                         Loading Data...
                       </td>
                     </tr>
                   )}
-                  {!teamLoading &&
+                  {!teamsLoading &&
                     !teamAttendanceLoading &&
                     !traineeAttendanceData.length && (
                       <tr key="no-attendance-xyz">
-                        <td colSpan={3} className="text-center h-20">
+                        <td colSpan={3} className="text-center h-28">
                           There is no attendance for the selected day
                         </td>
                       </tr>
@@ -971,10 +983,10 @@ function TraineeAttendanceTracker() {
           </div>
 
           <div className="flex justify-between">
-            <div className="hidden xmd:flex flex-col text-[.9rem] gap-2 capitalize">
+            <div className="hidden xmd:flex flex-col text-[.78rem] md:text-[.84rem] gap-2 capitalize">
               <h2 className="mb-1 font-semibold">ATTENDANCE ACTIONS</h2>
               <div
-                className="flex gap-x-1 items-center ml-4 cursor-pointer"
+                className="flex gap-x-1 items-center ml-4 cursor-pointer hover:text-primary font-medium"
                 onClick={() => {
                   if (!selectedDayHasData) {
                     return toast.warning(
@@ -986,7 +998,7 @@ function TraineeAttendanceTracker() {
                 }}
                 data-testid="update-link-2"
               >
-                <LuClipboardEdit className="text-lg" />
+                <LuClipboardEdit className="text-[1.1rem]" />
                 <span>Update Attendance ({selectedDay})</span>
               </div>
               <div
@@ -1000,18 +1012,39 @@ function TraineeAttendanceTracker() {
                   }
                   handleDeleteAttendance();
                 }}
-                className="flex gap-x-1 items-center ml-4 cursor-pointer"
+                className="flex gap-x-1 items-center ml-4 cursor-pointer hover:text-primary font-medium"
                 data-testid="delete-btn-test"
               >
-                <RiDeleteBin6Line className="text-xl" />
+                <RiDeleteBin6Line className="text-[1.15rem]" />
                 <span>
                   {loadingDeleteAttendance
                     ? 'Deleting Attendance ...'
                     : `Delete Attendance (${selectedDay})`}
                 </span>
               </div>
+              <div
+                onClick={() => {
+                  setPauseResumeAttendance(true);
+                }}
+                className="flex gap-x-[5px] items-center ml-4 cursor-pointer hover:text-primary font-medium leading-3"
+              >
+                {selectedTeamData?.isJobActive ? (
+                  <FaRegCirclePause className="text-[1.125rem]" />
+                ) : (
+                  <FaRegCirclePlay className="text-[1.125rem]" />
+                )}
+                <span>
+                  {loadingPRTeamAttendance
+                    ? 'Please wait ...'
+                    : `${
+                        selectedTeamData?.isJobActive
+                          ? 'Pause Attendance'
+                          : 'Resume Attendance'
+                      }`}
+                </span>
+              </div>
             </div>
-            <div className="flex flex-col gap-2 text-sm tracking-tight">
+            <div className="flex flex-col gap-2 text-[.8rem] xmd:text-[.83rem] md:text-sm tracking-tight ml-2 xmd:ml-0">
               <div className="flex gap-x-1 items-center">
                 <AttendanceSymbols status={2} />
                 <span>[2] Attended and communicated</span>
diff --git a/src/queries/attendance.queries.tsx b/src/queries/attendance.queries.tsx
index db9823b5c..f97390258 100644
--- a/src/queries/attendance.queries.tsx
+++ b/src/queries/attendance.queries.tsx
@@ -3,33 +3,93 @@ import { gql } from '@apollo/client';
 export const GET_TEAM_ATTENDANCE = gql`
   query GetTeamAttendance($team: String!, $orgToken: String) {
     getTeamAttendance(team: $team, orgToken: $orgToken) {
-      id
-      week
-      phase {
-        id
-        name
-      }
-      cohort {
-        id
-        name
+      today
+      yesterday
+      attendanceWeeks {
+        phase {
+          id
+          name
+        }
+        weeks
       }
-      teams {
-        team {
+      attendance {
+        week
+        phase {
           id
           name
         }
-        trainees {
-          trainee {
-            id
-            email
-            profile {
+        dates {
+          mon {
+            date
+            isValid
+          }
+          tue {
+            date
+            isValid
+          }
+          wed {
+            date
+            isValid
+          }
+          thu {
+            date
+            isValid
+          }
+          fri {
+            date
+            isValid
+          }
+        }
+        days {
+          mon {
+            trainee {
               id
-              name
+              email
+              profile {
+                id
+                name
+              }
             }
+            score
           }
-          status {
-            day
-            date
+          tue {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          wed {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          thu {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
+            score
+          }
+          fri {
+            trainee {
+              id
+              email
+              profile {
+                name
+              }
+            }
             score
           }
         }
diff --git a/src/queries/team.queries.tsx b/src/queries/team.queries.tsx
index 1e829686f..12442c3e0 100644
--- a/src/queries/team.queries.tsx
+++ b/src/queries/team.queries.tsx
@@ -15,6 +15,57 @@ export const GET_ALL_TEAMS = gql`
     getAllTeams(orgToken: $orgToken) {
       id
       name
+      isJobActive
+      active
+      phase {
+        id
+        name
+      }
+      cohort {
+        name
+        phase {
+          id
+          name
+        }
+        coordinator {
+          id
+        }
+      }
+      members {
+        id
+        email
+        role
+        status {
+          date
+          reason
+          status
+        }
+        profile {
+          firstName
+          lastName
+          city
+          country
+          phoneNumber
+          biography
+          avatar
+          id
+          name
+        }
+      }
+    }
+  }
+`;
+export const GET_TTL_TEAMS = gql`
+  query Query($orgToken: String) {
+    getTTLTeams(orgToken: $orgToken) {
+      id
+      name
+      isJobActive
+      active
+      phase {
+        id
+        name
+      }
       cohort {
         name
         phase {
@@ -28,6 +79,7 @@ export const GET_ALL_TEAMS = gql`
       members {
         id
         email
+        role
         status {
           date
           reason
diff --git a/src/utils/getDateForDays.ts b/src/utils/getDateForDays.ts
deleted file mode 100644
index cfcab7978..000000000
--- a/src/utils/getDateForDays.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { toast } from "react-toastify";
-
-export interface Weekdays {
-  mon: string;
-  tue: string;
-  wed: string;
-  thu: string;
-  fri: string;
-}
-
-const days: ('mon'| 'tue'| 'wed'| 'thu'| 'fri')[] = ['mon', 'tue', 'wed', 'thu', 'fri'];
-
-export const getDateForDays = (inputDate: string) => {
-  try{
-    const date = new Date(Number(inputDate));
-    let dayOfWeek = date.getDay();
-    if (dayOfWeek === 0) {
-      dayOfWeek = 7
-    }
-    const dateObj: Weekdays = { mon: '', tue: '', wed: '', thu: '', fri: '' };
-    
-    // eslint-disable-next-line no-plusplus
-    for (let i = 1; i <= 5; i++) {
-      const daysToAdd = i - dayOfWeek; 
-      const weekdayDate = new Date(date);
-      weekdayDate.setDate(date.getDate() + daysToAdd);
-      // eslint-disable-next-line prefer-destructuring
-      dateObj[days[i - 1]] = weekdayDate.toISOString().split('T')[0];
-    }
-
-    return dateObj;
-  } catch(error){
-    toast.error('Something went wrong, Try again!')
-    // eslint-disable-next-line consistent-return
-    return {
-          mon: '',
-          tue: '',
-          wed: '',
-          thu: '',
-          fri: '',
-        };
-  }
-
-};
diff --git a/tests/components/EditAttendenceButton.test.tsx b/tests/components/EditAttendenceButton.test.tsx
index 8c4a63888..3373c681b 100644
--- a/tests/components/EditAttendenceButton.test.tsx
+++ b/tests/components/EditAttendenceButton.test.tsx
@@ -44,7 +44,7 @@ describe('attendance update button', () => {
         <MemoryRouter>
           <EditAttendenceButton
             day="mon"
-            week="3"
+            week={3}
             traineeId="trainee-id-1234"
             setUpdated={(value) => value}
             phase="Phase !"
@@ -67,7 +67,7 @@ describe('attendance update button', () => {
       <MemoryRouter>
         <EditAttendenceButton
           day="mon"
-          week="1"
+          week={1}
           traineeId="trainee-id-1234"
           setUpdated={setUpdatedMock}
           phase="Phase I"
@@ -93,7 +93,7 @@ describe('attendance update button', () => {
       <MemoryRouter>
         <EditAttendenceButton
           day="mon"
-          week="1"
+          week={1}
           traineeId="trainee-id-1234"
           setUpdated={setUpdatedMock}
           phase="Phase I"
@@ -119,7 +119,7 @@ describe('attendance update button', () => {
       <MemoryRouter>
         <EditAttendenceButton
           day="mon"
-          week="1"
+          week={1}
           traineeId="trainee-id-1234"
           setUpdated={setUpdatedMock}
           phase="Phase I"
diff --git a/tests/components/ModalAttendance.test.tsx b/tests/components/ModalAttendance.test.tsx
index 63c6daf25..24f5a5352 100644
--- a/tests/components/ModalAttendance.test.tsx
+++ b/tests/components/ModalAttendance.test.tsx
@@ -16,56 +16,56 @@ import { RECORD_ATTENDANCE } from '../../src/Mutations/Attendance';
 const closeModal = jest.fn();
 const setTraineeAttendanceDataMock = jest.fn();
 
-
 const cache = new InMemoryCache();
 
-const sampleTrainees = {
-  getTeamTrainees: [
-    {
-      id: 'trainee-123',
-      email: 'test-trainee-name@gmail.com',
-      profile: {
-        name: 'test-trainee-name',
-      },
-      status: {
-        status: 'active',
-      },
+const sampleTrainees = [
+  {
+    id: 'test-trainee-name',
+    email: 'test-trainee-name@gmail.com',
+    role: 'trainee',
+    status: {
+      date: null,
+      reason: null,
+      status: 'active',
     },
-    {
-      id: 'trainee-456',
-      email: 'test-trainee-name2@gmail.com',
-      profile: {
-        name: 'test-trainee-name2',
-      },
-      status: {
-        status: 'active',
-      },
+    profile: {
+      id: 'trainee-name-profile',
+      name: 'test-trainee-name',
+    },
+  },
+  {
+    id: 'test-trainee-name2',
+    email: 'test-trainee-name2@gmail.com',
+    role: 'ttl',
+    status: {
+      date: null,
+      reason: null,
+      status: 'active',
+    },
+    profile: {
+      id: 'trainee-name2-profile',
+      name: 'test-trainee-name2',
     },
-  ],
-};
+  },
+];
 
 const mocks = [
   {
     request: {
       query: RECORD_ATTENDANCE,
       variables: {
-        week: 3,
+        week: 1,
+        today: true,
+        yesterday: false,
         team: 'Team-I-id-123',
-        date: '11-11-2024',
         trainees: [
           {
-            trainee: 'trainee-123',
-            status: {
-              day: 'mon',
-              score: '0',
-            },
+            trainee: 'test-trainee-name',
+            score: 0,
           },
           {
-            trainee: 'trainee-456',
-            status: {
-              day: 'mon',
-              score: '1',
-            },
+            trainee: 'test-trainee-name2',
+            score: 1,
           },
         ],
         orgToken: 'mocked-org-token',
@@ -74,41 +74,77 @@ const mocks = [
     result: {
       data: {
         recordAttendance: {
-          team: {
-            id: 'Team-I-id-123',
-            name: 'Team I',
-            cohort: {
-              name: 'Cohort 1',
-            },
-          },
-          trainees: [
+          today: '1729533725697',
+          yesterday: '1729274525697',
+          attendanceWeeks: [
             {
-              trainee: {
-                profile: {
-                  name: 'test-trainee-name',
-                },
+              phase: {
+                id: 'test-phase-i',
+                name: 'Phase I',
               },
-              status: [
-                {
-                  day: 'mon',
-                  date: '1727806679051',
-                  score: '0',
-                },
-              ],
+              weeks: [1],
             },
+          ],
+          attendance: [
             {
-              trainee: {
-                profile: {
-                  name: 'test-trainee-name2',
-                },
+              week: 1,
+              phase: {
+                id: 'test-phase-i',
+                name: 'Phase I',
               },
-              status: [
-                {
-                  day: 'mon',
-                  date: '1727806679051',
-                  score: '0',
+              dates: {
+                mon: {
+                  date: '2024-10-21',
+                  isValid: true,
+                },
+                tue: {
+                  date: '2024-10-22',
+                  isValid: false,
+                },
+                wed: {
+                  date: '2024-10-23',
+                  isValid: false,
+                },
+                thu: {
+                  date: '2024-10-24',
+                  isValid: false,
+                },
+                fri: {
+                  date: '2024-10-25',
+                  isValid: false,
                 },
-              ],
+                __typename: 'AttendanceDates',
+              },
+              days: {
+                mon: [
+                  {
+                    trainee: {
+                      id: 'test-trainee-name',
+                      email: 'test-trainee-name@gmail.com',
+                      profile: {
+                        id: 'trainee-name-profile',
+                        name: 'test-trainee-name',
+                      },
+                    },
+                    score: 0,
+                  },
+                  {
+                    trainee: {
+                      id: 'test-trainee-name2',
+                      email: 'test-trainee-name2@gmail.com',
+                      profile: {
+                        id: 'trainee-name2-profile',
+                        name: 'test-trainee-name2',
+                      },
+                    },
+                    score: 1,
+                  },
+                ],
+                tue: [],
+                wed: [],
+                thu: [],
+                fri: [],
+              },
             },
           ],
         },
@@ -124,7 +160,7 @@ const errorMocks = [
       query: RECORD_ATTENDANCE,
     },
     variableMatcher: jest.fn().mockReturnValue(true),
-    error: new Error("An error occurred"),
+    error: new Error('An error occurred'),
     maxUsageCount: 5,
   },
 ];
@@ -143,14 +179,14 @@ describe('Record attendance modal', () => {
       .create(
         <MockedProvider>
           <ModalAttendance
-            day="mon"
+            dayType="today"
             week={3}
             isVisible
             onClose={closeModal}
             team="Team-I-id-123"
             date="11-11-2024"
             teamName="Team I"
-            trainees={sampleTrainees.getTeamTrainees}
+            trainees={sampleTrainees}
             setAttendanceData={() => true}
           />
         </MockedProvider>,
@@ -162,14 +198,14 @@ describe('Record attendance modal', () => {
     render(
       <MockedProvider>
         <ModalAttendance
-          day="mon"
+          dayType="today"
           week={3}
           isVisible
           onClose={closeModal}
           team="Team-I-id-123"
           date="11-11-2024"
           teamName="Team I"
-          trainees={sampleTrainees.getTeamTrainees}
+          trainees={sampleTrainees}
           setAttendanceData={() => true}
         />
       </MockedProvider>,
@@ -184,14 +220,14 @@ describe('Record attendance modal', () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <ModalAttendance
-          day="mon"
-          week={3}
+          dayType="today"
+          week={1}
           isVisible
           onClose={closeModal}
           team="Team-I-id-123"
           date="11-11-2024"
           teamName="Team I"
-          trainees={sampleTrainees.getTeamTrainees}
+          trainees={sampleTrainees}
           setAttendanceData={() => true}
         />
       </MockedProvider>,
@@ -241,14 +277,14 @@ describe('Record attendance modal', () => {
     render(
       <MockedProvider mocks={errorMocks} addTypename={false}>
         <ModalAttendance
-          day="mon"
-          week={3}
+          dayType="today"
+          week={1}
           isVisible
           onClose={closeModal}
           team="Team-I-id-123"
-          date='11-11-2024'
+          date="11-11-2024"
           teamName="Team I"
-          trainees={[sampleTrainees.getTeamTrainees[0]]}
+          trainees={[sampleTrainees[0]]}
           setAttendanceData={() => true}
         />
       </MockedProvider>,
@@ -276,18 +312,18 @@ describe('Record attendance modal', () => {
     expect(await screen.findByText('Loading...')).toBeInTheDocument();
     expect(await screen.findByText('Submit')).toBeInTheDocument();
   });
-  it('Doesn\'t Record attendance modal, when prop isvisible has falsy value', async () => {
+  it("Doesn't Record attendance modal, when prop isvisible has falsy value", async () => {
     render(
       <MockedProvider mocks={errorMocks} addTypename={false}>
         <ModalAttendance
-          day="mon"
-          week={3}
+          dayType="today"
+          week={1}
           isVisible={false}
           onClose={closeModal}
           team="Team-I-id-123"
-          date='11-11-2024'
+          date="11-11-2024"
           teamName="Team I"
-          trainees={ [sampleTrainees.getTeamTrainees[0]]}
+          trainees={[sampleTrainees[0]]}
           setAttendanceData={() => true}
         />
       </MockedProvider>,
@@ -296,18 +332,18 @@ describe('Record attendance modal', () => {
     const submitButton = screen.queryByText('Submit');
     expect(submitButton).toBeNull();
   });
-  it('Render Record attendance modal,attendance can\'t be made, there are no trainees in team', async () => {
+  it("Render Record attendance modal,attendance can't be made, there are no trainees in team", async () => {
     render(
       <MockedProvider mocks={errorMocks} addTypename={false}>
         <ModalAttendance
-          day="mon"
-          week={3}
+          dayType="today"
+          week={1}
           isVisible
           onClose={closeModal}
           team="Team-I-id-123"
           date="11-11-2024"
           teamName="Team I"
-          trainees={[sampleTrainees.getTeamTrainees[0]]}
+          trainees={[sampleTrainees[0]]}
           setAttendanceData={() => true}
         />
       </MockedProvider>,
diff --git a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap
index 36f807f1b..3d11fe910 100644
--- a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap
+++ b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap
@@ -463,7 +463,7 @@ Array [
               name="date"
               readOnly={true}
               type="text"
-              value="2024-10-06"
+              value="2024-10-24"
             />
           </div>
           <div
@@ -955,15 +955,6 @@ Array [
                    +
                    
                 </button>
-                <button
-                  className="btn primary lg m-0 font-serif "
-                  data-testid="inviteModel"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Invite
-                </button>
               </div>
             </div>
             <div
diff --git a/tests/components/__snapshots__/DashHeader.test.tsx.snap b/tests/components/__snapshots__/DashHeader.test.tsx.snap
index 2cec9c921..b64c0be1f 100644
--- a/tests/components/__snapshots__/DashHeader.test.tsx.snap
+++ b/tests/components/__snapshots__/DashHeader.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DashHeader test  Should render DashHeader 1`] = `
 <div
-  className="font-serif w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header"
+  className="font-serif  transform:sc w-full py-4 z-20 bg-indigo-100 dark:bg-dark-bg page-header"
 >
   <div
     className="px-3 flex items-center w-full font-serif"
diff --git a/tests/components/__snapshots__/EditAttendenceButton.test.tsx.snap b/tests/components/__snapshots__/EditAttendenceButton.test.tsx.snap
index 19daf465a..a5a78acdd 100644
--- a/tests/components/__snapshots__/EditAttendenceButton.test.tsx.snap
+++ b/tests/components/__snapshots__/EditAttendenceButton.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`attendance update button Renders attendance update component 1`] = `
   className="inline-block cursor-pointer relative"
 >
   <span
-    className="px-2 py-[2px] border dark:border-white border-black rounded-md text-[.85rem]"
+    className="px-3 py-[3px] border dark:border-white border-black rounded-md font-medium text-[.85rem]"
     data-testid="edit-button"
     onClick={[Function]}
   >
diff --git a/tests/components/__snapshots__/Header.test.tsx.snap b/tests/components/__snapshots__/Header.test.tsx.snap
index da48ccae1..3660ff6e1 100644
--- a/tests/components/__snapshots__/Header.test.tsx.snap
+++ b/tests/components/__snapshots__/Header.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Header Tests Should render the header with home 1`] = `
 <div
-  className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+  className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
 >
   <div
     className="px-3 flex justify-between items-center w-full h-full"
@@ -230,16 +230,21 @@ exports[`Header Tests Should render the header with home 1`] = `
         Product
       </a>
     </li>
-    <li
-      className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+    <div
+      className="flex flex-col p-2 dark:text-dark-text-fill"
     >
-      <a
-        href="/docs/getting-started"
+      <div
+        className="inline-flex gap-2 items-center"
         onClick={[Function]}
       >
-        Docs
-      </a>
-    </li>
+        <p>
+          Docs
+        </p>
+        <span>
+          ▼
+        </span>
+      </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%]"
     >
@@ -272,7 +277,7 @@ exports[`Header Tests Should render the header with home 1`] = `
 
 exports[`Header Tests Should render the header with no active 1`] = `
 <div
-  className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+  className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
 >
   <div
     className="px-3 flex justify-between items-center w-full h-full"
@@ -499,16 +504,21 @@ exports[`Header Tests Should render the header with no active 1`] = `
         Product
       </a>
     </li>
-    <li
-      className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+    <div
+      className="flex flex-col p-2 dark:text-dark-text-fill"
     >
-      <a
-        href="/docs/getting-started"
+      <div
+        className="inline-flex gap-2 items-center"
         onClick={[Function]}
       >
-        Docs
-      </a>
-    </li>
+        <p>
+          Docs
+        </p>
+        <span>
+          ▼
+        </span>
+      </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%]"
     >
@@ -541,7 +551,7 @@ exports[`Header Tests Should render the header with no active 1`] = `
 
 exports[`Header Tests Should render the header with no active 2`] = `
 <div
-  className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+  className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
 >
   <div
     className="px-3 flex justify-between items-center w-full h-full"
@@ -745,16 +755,21 @@ exports[`Header Tests Should render the header with no active 2`] = `
         Product
       </a>
     </li>
-    <li
-      className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+    <div
+      className="flex flex-col p-2 dark:text-dark-text-fill"
     >
-      <a
-        href="/docs/getting-started"
+      <div
+        className="inline-flex gap-2 items-center"
         onClick={[Function]}
       >
-        Docs
-      </a>
-    </li>
+        <p>
+          Docs
+        </p>
+        <span>
+          ▼
+        </span>
+      </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%]"
     >
@@ -781,7 +796,7 @@ exports[`Header Tests Should render the header with no active 2`] = `
 
 exports[`Header Tests Should render the header with no active 3`] = `
 <div
-  className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+  className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
 >
   <div
     className="px-3 flex justify-between items-center w-full h-full"
@@ -1009,16 +1024,21 @@ exports[`Header Tests Should render the header with no active 3`] = `
         Product
       </a>
     </li>
-    <li
-      className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+    <div
+      className="flex flex-col p-2 dark:text-dark-text-fill"
     >
-      <a
-        href="/docs/getting-started"
+      <div
+        className="inline-flex gap-2 items-center"
         onClick={[Function]}
       >
-        Docs
-      </a>
-    </li>
+        <p>
+          Docs
+        </p>
+        <span>
+          ▼
+        </span>
+      </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%]"
     >
@@ -1051,7 +1071,7 @@ exports[`Header Tests Should render the header with no active 3`] = `
 
 exports[`Header Tests Should render the header with pricing active 1`] = `
 <div
-  className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+  className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
 >
   <div
     className="px-3 flex justify-between items-center w-full h-full"
@@ -1279,16 +1299,21 @@ exports[`Header Tests Should render the header with pricing active 1`] = `
         Product
       </a>
     </li>
-    <li
-      className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+    <div
+      className="flex flex-col p-2 dark:text-dark-text-fill"
     >
-      <a
-        href="/docs/getting-started"
+      <div
+        className="inline-flex gap-2 items-center"
         onClick={[Function]}
       >
-        Docs
-      </a>
-    </li>
+        <p>
+          Docs
+        </p>
+        <span>
+          ▼
+        </span>
+      </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%]"
     >
@@ -1321,7 +1346,7 @@ exports[`Header Tests Should render the header with pricing active 1`] = `
 
 exports[`Header Tests Should render the header with product active 1`] = `
 <div
-  className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+  className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
 >
   <div
     className="px-3 flex justify-between items-center w-full h-full"
@@ -1548,16 +1573,21 @@ exports[`Header Tests Should render the header with product active 1`] = `
         Product
       </a>
     </li>
-    <li
-      className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+    <div
+      className="flex flex-col p-2 dark:text-dark-text-fill"
     >
-      <a
-        href="/docs/getting-started"
+      <div
+        className="inline-flex gap-2 items-center"
         onClick={[Function]}
       >
-        Docs
-      </a>
-    </li>
+        <p>
+          Docs
+        </p>
+        <span>
+          ▼
+        </span>
+      </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%]"
     >
diff --git a/tests/components/__snapshots__/SideNavLink.test.tsx.snap b/tests/components/__snapshots__/SideNavLink.test.tsx.snap
index f88f0afb8..79d48d5b0 100644
--- a/tests/components/__snapshots__/SideNavLink.test.tsx.snap
+++ b/tests/components/__snapshots__/SideNavLink.test.tsx.snap
@@ -126,7 +126,7 @@ exports[`DashHeader test  Should render the sidebar with setings as active 1`] =
         >
           <svg
             aria-hidden="true"
-            className="w-5 text-red-700 dark:text-red-600 hover:text-red-900"
+            className="w-5"
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/tests/containers/__snapshots__/MainRoutes.test.tsx.snap b/tests/containers/__snapshots__/MainRoutes.test.tsx.snap
index 6ad52dc3d..6ddb6e68f 100644
--- a/tests/containers/__snapshots__/MainRoutes.test.tsx.snap
+++ b/tests/containers/__snapshots__/MainRoutes.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Main Routes Should render 1`] = `
   className="min-h-screen page-layout"
 >
   <div
-    className="w-screen h-[8vh] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
+    className="w-screen h-[5em] z-10 bg-white dark:bg-dark-bg page-header undefined font-serif"
   >
     <div
       className="px-3 flex justify-between items-center w-full h-full"
@@ -233,16 +233,21 @@ exports[`Main Routes Should render 1`] = `
           Product
         </a>
       </li>
-      <li
-        className="p-2 w-full mt-2 dark:text-dark-text-fill text-primary"
+      <div
+        className="flex flex-col p-2 dark:text-dark-text-fill"
       >
-        <a
-          href="/docs/getting-started"
+        <div
+          className="inline-flex gap-2 items-center"
           onClick={[Function]}
         >
-          Docs
-        </a>
-      </li>
+          <p>
+            Docs
+          </p>
+          <span>
+            ▼
+          </span>
+        </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%]"
       >
@@ -497,6 +502,32 @@ exports[`Main Routes Should render 1`] = `
               About
             </a>
           </li>
+          <li
+            className="w-full p-2 dark:text-dark-text-fill"
+          >
+            <a
+              className="w-full"
+              href="/product"
+              onClick={[Function]}
+            >
+              Product
+            </a>
+          </li>
+          <div
+            className="flex flex-col p-2 dark:text-dark-text-fill"
+          >
+            <div
+              className="inline-flex gap-2 items-center"
+              onClick={[Function]}
+            >
+              <p>
+                Docs
+              </p>
+              <span>
+                ▼
+              </span>
+            </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"
           >
@@ -726,7 +757,6 @@ exports[`Main Routes Should render 1`] = `
             >
                
               Come shape the future together
-               
             </h1>
           </div>
           <div
@@ -761,9 +791,7 @@ exports[`Main Routes Should render 1`] = `
               <p
                 className="text-base  dark:text-slate-300 text-neutral-900"
               >
-                I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+                Content1
               </p>
             </div>
             <div
@@ -795,9 +823,7 @@ exports[`Main Routes Should render 1`] = `
               <p
                 className="text-base  dark:text-slate-300 text-neutral-900"
               >
-                I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+                Content2
               </p>
             </div>
             <div
@@ -829,11 +855,7 @@ exports[`Main Routes Should render 1`] = `
               <p
                 className="text-base  dark:text-slate-300 text-neutral-900"
               >
-                
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+                Content3
               </p>
             </div>
             <span
@@ -917,9 +939,7 @@ exports[`Main Routes Should render 1`] = `
               <p
                 className="text-base dark:text-slate-300  text-neutral-900"
               >
-                I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+                Content1
               </p>
             </div>
             <div
@@ -951,9 +971,7 @@ exports[`Main Routes Should render 1`] = `
               <p
                 className="text-base dark:text-slate-300  text-neutral-900"
               >
-                I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+                Content2
               </p>
             </div>
             <div
@@ -985,11 +1003,7 @@ exports[`Main Routes Should render 1`] = `
               <p
                 className="text-base dark:text-slate-300  text-neutral-900"
               >
-                
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+                Content3
               </p>
             </div>
           </div>
diff --git a/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap b/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap
index 2843aa57f..d496ad235 100644
--- a/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap
+++ b/tests/containers/admin-dashboard/__snapshots__/Cohorts.test.tsx.snap
@@ -1026,14 +1026,14 @@ Array [
                   colSpan={6}
                 >
                   <div
-                    className="flex flex-row items-center justify-between w-full mx-auto"
+                    className="flex flex-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto"
                   >
                     <div
-                      className="flex"
+                      className="flex mb-4 sm:-ml-7 -ml-7 lg:mb-0 mr-auto "
                     >
                       <button
                         aria-label="left-arrow"
-                        className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                        className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                         disabled={true}
                         onClick={[Function]}
                         type="button"
@@ -1058,7 +1058,7 @@ Array [
                        
                       <button
                         aria-label="right-arrow"
-                        className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                        className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                         disabled={true}
                         onClick={[Function]}
                         type="button"
@@ -1083,10 +1083,10 @@ Array [
                        
                     </div>
                     <div
-                      className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center"
+                      className="flex flex-row relative md:ml-80 lg:flex-row   justify-center items-baseline w-full lg:w-1/3 w-1/2 text-xs lg:text-md  mx-2 -mr-5"
                     >
                       <span
-                        className="inline-block mx-2"
+                        className="flex justify-center sm:w-[50%] w-[70%] lg:mb-0"
                       >
                         Page
                          
@@ -1097,75 +1097,85 @@ Array [
                         </strong>
                          
                       </span>
-                      <span
-                        className="inline-block mx-2"
-                      >
-                        | Go to page:
-                         
-                        <input
-                          className="pl-1 border rounded-md outline-none appearance-none  border-primary dark:bg-primary"
-                          defaultValue={1}
-                          onChange={[Function]}
-                          style={
-                            Object {
-                              "border": "solid 0.1rem #9e85f5",
-                              "height": "30px",
-                              "paddingLeft": "1.2rem",
-                              "width": "50px",
-                            }
-                          }
-                          type="number"
-                        />
-                      </span>
-                       
-                      <select
-                        className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
-                        onChange={[Function]}
-                        style={
-                          Object {
-                            "border": "solid 0.1rem #9e85f5",
-                            "height": "30px",
-                          }
-                        }
-                        value={3}
+                      <div
+                        className="flex flex-row sm:justify-center justify-end items-center w-full"
                       >
-                        <option
-                          value={3}
-                        >
-                          Show 
-                          3
-                        </option>
-                        <option
-                          value={5}
-                        >
-                          Show 
-                          5
-                        </option>
-                        <option
-                          value={10}
+                        <div
+                          className="hidden lg:flex items-center mx-2 mb-2 lg:mb-0"
                         >
-                          Show 
-                          10
-                        </option>
-                        <option
-                          value={25}
-                        >
-                          Show 
-                          25
-                        </option>
-                        <option
-                          value={50}
-                        >
-                          Show 
-                          50
-                        </option>
-                        <option
-                          value={100}
+                          <span
+                            className="mr-1"
+                          >
+                            | Go to page: 
+                          </span>
+                          <input
+                            className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
+                            defaultValue={1}
+                            onChange={[Function]}
+                            style={
+                              Object {
+                                "border": "solid 0.1rem #9e85f5",
+                                "height": "30px",
+                                "paddingLeft": "1.2rem",
+                                "width": "50px",
+                              }
+                            }
+                            type="number"
+                          />
+                        </div>
+                        <div
+                          className="flex items-center sm:mx-2 mx-0 mb-2 lg:mb-0 "
                         >
-                          Show 
-                          100
-                        </option>
-                      </select>
+                          <select
+                            className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
+                            onChange={[Function]}
+                            style={
+                              Object {
+                                "border": "solid 0.1rem #9e85f5",
+                                "height": "30px",
+                              }
+                            }
+                            value={3}
+                          >
+                            <option
+                              value={3}
+                            >
+                              Show 
+                              3
+                            </option>
+                            <option
+                              value={5}
+                            >
+                              Show 
+                              5
+                            </option>
+                            <option
+                              value={10}
+                            >
+                              Show 
+                              10
+                            </option>
+                            <option
+                              value={25}
+                            >
+                              Show 
+                              25
+                            </option>
+                            <option
+                              value={50}
+                            >
+                              Show 
+                              50
+                            </option>
+                            <option
+                              value={100}
+                            >
+                              Show 
+                              100
+                            </option>
+                          </select>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </td>
diff --git a/tests/other-tests/__snapshots__/App.test.tsx.snap b/tests/other-tests/__snapshots__/App.test.tsx.snap
index 4a4fcb485..fe12c0aba 100644
--- a/tests/other-tests/__snapshots__/App.test.tsx.snap
+++ b/tests/other-tests/__snapshots__/App.test.tsx.snap
@@ -227,6 +227,32 @@ exports[`App test  Should render app 1`] = `
             About
           </a>
         </li>
+        <li
+          className="w-full p-2 dark:text-dark-text-fill"
+        >
+          <a
+            className="w-full"
+            href="/product"
+            onClick={[Function]}
+          >
+            Product
+          </a>
+        </li>
+        <div
+          className="flex flex-col p-2 dark:text-dark-text-fill"
+        >
+          <div
+            className="inline-flex gap-2 items-center"
+            onClick={[Function]}
+          >
+            <p>
+              Docs
+            </p>
+            <span>
+              ▼
+            </span>
+          </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"
         >
@@ -456,7 +482,6 @@ exports[`App test  Should render app 1`] = `
           >
              
             Come shape the future together
-             
           </h1>
         </div>
         <div
@@ -491,9 +516,7 @@ exports[`App test  Should render app 1`] = `
             <p
               className="text-base  dark:text-slate-300 text-neutral-900"
             >
-              I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+              Content1
             </p>
           </div>
           <div
@@ -525,9 +548,7 @@ exports[`App test  Should render app 1`] = `
             <p
               className="text-base  dark:text-slate-300 text-neutral-900"
             >
-              I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+              Content2
             </p>
           </div>
           <div
@@ -559,11 +580,7 @@ exports[`App test  Should render app 1`] = `
             <p
               className="text-base  dark:text-slate-300 text-neutral-900"
             >
-              
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+              Content3
             </p>
           </div>
           <span
@@ -647,9 +664,7 @@ exports[`App test  Should render app 1`] = `
             <p
               className="text-base dark:text-slate-300  text-neutral-900"
             >
-              I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+              Content1
             </p>
           </div>
           <div
@@ -681,9 +696,7 @@ exports[`App test  Should render app 1`] = `
             <p
               className="text-base dark:text-slate-300  text-neutral-900"
             >
-              I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+              Content2
             </p>
           </div>
           <div
@@ -715,11 +728,7 @@ exports[`App test  Should render app 1`] = `
             <p
               className="text-base dark:text-slate-300  text-neutral-900"
             >
-              
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+              Content3
             </p>
           </div>
         </div>
diff --git a/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap b/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap
index c3b70f179..536d31b54 100644
--- a/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap
+++ b/tests/other-tests/__snapshots__/Siderbar.test.tsx.snap
@@ -224,6 +224,32 @@ exports[`<Home /> Renders Home 1`] = `
           About
         </a>
       </li>
+      <li
+        className="w-full p-2 dark:text-dark-text-fill"
+      >
+        <a
+          className="w-full"
+          href="/product"
+          onClick={[Function]}
+        >
+          Product
+        </a>
+      </li>
+      <div
+        className="flex flex-col p-2 dark:text-dark-text-fill"
+      >
+        <div
+          className="inline-flex gap-2 items-center"
+          onClick={[Function]}
+        >
+          <p>
+            Docs
+          </p>
+          <span>
+            ▼
+          </span>
+        </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"
       >
@@ -453,7 +479,6 @@ exports[`<Home /> Renders Home 1`] = `
         >
            
           Come shape the future together
-           
         </h1>
       </div>
       <div
@@ -488,9 +513,7 @@ exports[`<Home /> Renders Home 1`] = `
           <p
             className="text-base  dark:text-slate-300 text-neutral-900"
           >
-            I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+            Content1
           </p>
         </div>
         <div
@@ -522,9 +545,7 @@ exports[`<Home /> Renders Home 1`] = `
           <p
             className="text-base  dark:text-slate-300 text-neutral-900"
           >
-            I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+            Content2
           </p>
         </div>
         <div
@@ -556,11 +577,7 @@ exports[`<Home /> Renders Home 1`] = `
           <p
             className="text-base  dark:text-slate-300 text-neutral-900"
           >
-            
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+            Content3
           </p>
         </div>
         <span
@@ -644,9 +661,7 @@ exports[`<Home /> Renders Home 1`] = `
           <p
             className="text-base dark:text-slate-300  text-neutral-900"
           >
-            I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+            Content1
           </p>
         </div>
         <div
@@ -678,9 +693,7 @@ exports[`<Home /> Renders Home 1`] = `
           <p
             className="text-base dark:text-slate-300  text-neutral-900"
           >
-            I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+            Content2
           </p>
         </div>
         <div
@@ -712,11 +725,7 @@ exports[`<Home /> Renders Home 1`] = `
           <p
             className="text-base dark:text-slate-300  text-neutral-900"
           >
-            
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+            Content3
           </p>
         </div>
       </div>
diff --git a/tests/pages/TraineeAttendanceTracker.test.tsx b/tests/pages/TraineeAttendanceTracker.test.tsx
index c911cba0b..0b4861e33 100644
--- a/tests/pages/TraineeAttendanceTracker.test.tsx
+++ b/tests/pages/TraineeAttendanceTracker.test.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import renderer, { act } from 'react-test-renderer';
 import { toast } from 'react-toastify';
-import fetchMock from 'jest-fetch-mock';
 import {
   cleanup,
   fireEvent,
@@ -17,8 +16,91 @@ import {
   MockedProvider,
 } from '@apollo/client/testing';
 import TraineeAttendanceTracker from '../../src/pages/TraineeAttendanceTracker';
-import { GET_ALL_TEAMS } from '../../src/queries/team.queries';
+import { GET_ALL_TEAMS, GET_TTL_TEAMS } from '../../src/queries/team.queries';
 import { GET_TEAM_ATTENDANCE } from '../../src/queries/attendance.queries';
+import { PAUSE_AND_RESUME_ATTENDANCE } from '../../src/Mutations/Attendance';
+
+const sampleResult = {
+  today: '1729533725697',
+  yesterday: '1729274525697',
+  attendanceWeeks: [
+    {
+      phase: {
+        id: 'test-phase-i',
+        name: 'Phase I',
+      },
+      weeks: [1],
+    },
+    {
+      phase: {
+        id: 'test-phase-ii',
+        name: 'Phase II',
+      },
+      weeks: [1, 2],
+    },
+  ],
+  attendance: [
+    {
+      week: 1,
+      phase: {
+        id: 'test-phase-i',
+        name: 'Phase I',
+      },
+      dates: {
+        mon: {
+          date: '2024-10-21',
+          isValid: true,
+        },
+        tue: {
+          date: '2024-10-22',
+          isValid: false,
+        },
+        wed: {
+          date: '2024-10-23',
+          isValid: false,
+        },
+        thu: {
+          date: '2024-10-24',
+          isValid: false,
+        },
+        fri: {
+          date: '2024-10-25',
+          isValid: false,
+        },
+      },
+      days: {
+        mon: [
+          {
+            trainee: {
+              id: 'test-trainee-name',
+              email: 'test-trainee-name@gmail.com',
+              profile: {
+                id: 'trainee-name-profile',
+                name: 'test-trainee-name',
+              },
+            },
+            score: 2,
+          },
+          {
+            trainee: {
+              id: 'test-trainee-name2',
+              email: 'test-trainee-name2@gmail.com',
+              profile: {
+                id: 'trainee-name2-profile',
+                name: 'test-trainee-name2',
+              },
+            },
+            score: 1,
+          },
+        ],
+        tue: [],
+        wed: [],
+        thu: [],
+        fri: [],
+      },
+    },
+  ],
+};
 
 const mocks = [
   {
@@ -32,18 +114,76 @@ const mocks = [
       data: {
         getAllTeams: [
           {
-            id: '66eea29cba07ede8a49e8bc6',
+            id: 'Team-I-id-123',
             name: 'Team I',
+            isJobActive: true,
+            active: true,
+            phase: {
+              id: 'test-phase-i',
+              name: 'Phase I',
+            },
             cohort: {
               name: 'cohort 1',
               phase: {
+                id: 'test-phase-i',
                 name: 'Phase I',
-                id: '66eea29cba07ede8a49e8bad',
               },
               coordinator: {
-                id: '66eea29cba07ede8a49e8dcz',
+                id: 'coordinator-id',
               },
             },
+            members: [
+              {
+                id: 'test-trainee-name',
+                email: 'test-trainee-name@gmail.com',
+                role: 'trainee',
+                status: {
+                  date: null,
+                  reason: null,
+                  status: 'active',
+                },
+                profile: {
+                  id: 'trainee-name-profile',
+                  name: 'test-trainee-name',
+                },
+              },
+            ],
+          },
+          {
+            id: 'Team-II-id-123',
+            name: 'Team II',
+            isJobActive: false,
+            active: true,
+            phase: {
+              id: 'test-phase-i',
+              name: 'Phase I',
+            },
+            cohort: {
+              name: 'cohort 1',
+              phase: {
+                id: 'test-phase-i',
+                name: 'Phase I',
+              },
+              coordinator: {
+                id: 'coordinator-id',
+              },
+            },
+            members: [
+              {
+                id: 'test-trainee-name2',
+                email: 'test-trainee-name2@gmail.com',
+                role: 'ttl',
+                status: {
+                  date: null,
+                  reason: null,
+                  status: 'active',
+                },
+                profile: {
+                  id: 'trainee-name2-profile',
+                  name: 'test-trainee-name2',
+                },
+              },
+            ],
           },
           {
             id: '66eea29cba07ede8a49e8bc7',
@@ -58,6 +198,7 @@ const mocks = [
                 id: '66eea29cba07ede8a49e8dcz',
               },
             },
+            members: [],
           },
         ],
       },
@@ -65,92 +206,48 @@ const mocks = [
     maxUsageCount: 10,
   },
   {
-    delay: 500,
     request: {
-      query: GET_TEAM_ATTENDANCE,
+      query: GET_TTL_TEAMS,
       variables: {
         orgToken: 'mocked-org-token',
-        team: '66eea29cba07ede8a49e8bc6',
       },
     },
     result: {
       data: {
-        getTeamAttendance: [
+        getTTLTeams: [
           {
-            id: '66faedaab256018b1efcd57a',
-            week: '1',
+            id: 'Team-I-id-123',
+            name: 'Team I',
+            isJobActive: true,
+            active: true,
             phase: {
+              id: 'test-phase-i',
               name: 'Phase I',
-              id: '66eea29cba07ede8a49e8bad',
             },
             cohort: {
-              id: '66eea29cba07ede8a49e8bbb',
               name: 'cohort 1',
-            },
-            teams: [
-              {
-                team: {
-                  id: '66eea29cba07ede8a49e8bc6',
-                  name: 'Team I',
-                },
-                trainees: [
-                  {
-                    trainee: {
-                      id: '66eea29cba07ede8a49e8b81',
-                      email: 'example@gmail.com',
-                      profile: {
-                        id: '66eea29cba07ede8a49e8b90',
-                        name: 'Example Virgile',
-                      },
-                    },
-                    status: [
-                      {
-                        day: 'mon',
-                        date: '1727654400000',
-                        score: 2,
-                      },
-                    ],
-                  },
-                ],
+              phase: {
+                id: 'test-phase-i',
+                name: 'Phase I',
+              },
+              coordinator: {
+                id: 'coordinator-id',
               },
-            ],
-          },
-          {
-            id: '66fc3cd78788248998569bb7',
-            week: '1',
-            phase: {
-              name: 'Phase II',
-              id: '66eea29cba07ede8a49ewxyz',
-            },
-            cohort: {
-              id: '66eea29cba07ede8a49e8bbb',
-              name: 'cohort 1',
             },
-            teams: [
+            members: [
               {
-                team: {
-                  id: '66eea29cba07ede8a49e8bc6',
-                  name: 'Team I',
+                id: 'test-trainee-name',
+                email: 'test-trainee-name@gmail.com',
+                role: 'trainee',
+                status: {
+                  date: null,
+                  reason: null,
+                  status: 'active',
+                },
+                profile: {
+                  id: 'trainee-name-profile',
+                  name: 'test-trainee-name',
                 },
-                trainees: [
-                  {
-                    trainee: {
-                      id: '66eea29cba07ede8a49e8b81',
-                      email: 'example@gmail.com',
-                      profile: {
-                        id: '66eea29cba07ede8a49e8b90',
-                        name: 'Example Virgile',
-                      },
-                    },
-                    status: [
-                      {
-                        day: 'mon',
-                        date: '1728259200000',
-                        score: 1,
-                      },
-                    ],
-                  },
-                ],
               },
             ],
           },
@@ -159,6 +256,45 @@ const mocks = [
     },
     maxUsageCount: 10,
   },
+  {
+    delay: 500,
+    request: {
+      query: GET_TEAM_ATTENDANCE,
+      variables: {
+        orgToken: 'mocked-org-token',
+        team: 'Team-I-id-123',
+      },
+    },
+    result: {
+      data: {
+        getTeamAttendance: sampleResult,
+      },
+    },
+    maxUsageCount: 10,
+  },
+  {
+    delay: 500,
+    request: {
+      query: PAUSE_AND_RESUME_ATTENDANCE,
+      variables: {
+        orgToken: 'mocked-org-token',
+        team: 'Team-I-id-123',
+      },
+    },
+    result: {
+      data: {
+        pauseAndResumeTeamAttendance: {
+          team: {
+            id: 'Team-I-id-123',
+            name: 'Team-I-id-123',
+            isJobActive: true,
+          },
+          sanitizedAttendance: sampleResult,
+        },
+      },
+    },
+    maxUsageCount: 10,
+  },
 ];
 
 jest.mock('react-toastify', () => ({
@@ -171,12 +307,6 @@ jest.mock('react-toastify', () => ({
 describe('CRUD Of Trainee Attendance', () => {
   beforeEach(() => {
     localStorage.setItem('orgToken', 'mocked-org-token');
-    fetchMock.enableMocks();
-    fetchMock.mockResponseOnce(
-      JSON.stringify({
-        datetime: '2023-10-03T12:34:56Z',
-      }),
-    );
   });
 
   afterEach(async () => {
@@ -186,38 +316,39 @@ describe('CRUD Of Trainee Attendance', () => {
   });
 
   it('Renders the TraineeAttendance Page', () => {
+    jest.spyOn(React, 'useContext').mockImplementation(() => ({
+      user: {
+        role: 'coordinator',
+      },
+    }));
     const elem = renderer
       .create(
-        <MemoryRouter>
-          <MockedProvider mocks={[]} addTypename={false}>
-            <TraineeAttendanceTracker />
-          </MockedProvider>
-        </MemoryRouter>,
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <TraineeAttendanceTracker />
+        </MockedProvider>,
       )
       .toJSON();
     expect(elem).toMatchSnapshot();
   });
   it('Renders the TraineeAttendance Page', async () => {
+    jest.spyOn(React, 'useContext').mockImplementation(() => ({
+      user: {
+        role: 'ttl',
+      },
+    }));
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <TraineeAttendanceTracker />
       </MockedProvider>,
     );
 
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledTimes(1);
-      expect(fetchMock).toHaveBeenCalledWith(
-        'http://worldtimeapi.org/api/timezone/Etc/UTC',
-      );
-    });
-
     expect(await screen.findByText('Loading Data...')).toBeInTheDocument();
 
     const teamElement = await screen.findByTestId('team-test');
     expect(teamElement).toBeInTheDocument();
 
     fireEvent.change(teamElement, {
-      target: { value: '66eea29cba07ede8a49e8bc6' },
+      target: { value: 'Team-I-id-123' },
     });
 
     const weeksElement = await screen.findByTestId('week-test');
@@ -244,7 +375,11 @@ describe('CRUD Of Trainee Attendance', () => {
     });
     fireEvent.click(daysElement[0]);
 
-    expect(await screen.findByText('Example Virgile')).toBeInTheDocument();
+    // Back to Phase I
+    fireEvent.click(phase1Element);
+
+    // Find row with trainee name test-trainee-name
+    expect(await screen.findByText('test-trainee-name')).toBeInTheDocument();
 
     fireEvent.click(updateLink2);
 
@@ -264,15 +399,16 @@ describe('CRUD Of Trainee Attendance', () => {
       { style: { color: '#000', lineHeight: '.95rem' } },
     );
 
-    const editButton = await screen.findByTestId('edit-button');
-    expect(editButton).toBeInTheDocument();
+    const editButton = await screen.findAllByTestId('edit-button');
+    expect(editButton).toHaveLength(2);
 
-    fireEvent.click(editButton);
+    fireEvent.click(editButton[0]);
 
     const zeroScore = await screen.findByTestId('score-0');
+    expect(zeroScore).toBeInTheDocument();
     fireEvent.click(zeroScore);
 
-    fireEvent.click(phase2Element);
+    await fireEvent.click(phase2Element);
 
     expect(toast.warning).toHaveBeenCalledWith(
       'First Discard or Update your changes',
@@ -301,6 +437,11 @@ describe('CRUD Of Trainee Attendance', () => {
   });
   it("Doesn't Delete attendance Test for day without entries", async () => {
     await cleanup();
+    jest.spyOn(React, 'useContext').mockImplementation(() => ({
+      user: {
+        role: 'coordinator',
+      },
+    }));
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <TraineeAttendanceTracker />
@@ -327,7 +468,7 @@ describe('CRUD Of Trainee Attendance', () => {
     const updateLink2 = screen.getByTestId('update-link-2');
     expect(updateLink2).toBeInTheDocument();
 
-    expect(await screen.findByText('Example Virgile')).toBeInTheDocument();
+    expect(await screen.findByText('test-trainee-name')).toBeInTheDocument();
 
     fireEvent.change(weeksElement, { target: { value: '2' } });
     fireEvent.change(weeksElement, { target: { value: '1' } });
@@ -345,4 +486,75 @@ describe('CRUD Of Trainee Attendance', () => {
 
     fireEvent.click(deleteBtn);
   });
+  it('Pause attendance for team with active attendance', async () => {
+    await cleanup();
+    jest.spyOn(React, 'useContext').mockImplementation(() => ({
+      user: {
+        role: 'coordinator',
+      },
+    }));
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <TraineeAttendanceTracker />
+      </MockedProvider>,
+    );
+
+    expect(await screen.findByText('Loading Data...')).toBeInTheDocument();
+
+    const teamElement = await screen.findByTestId('team-test');
+    expect(teamElement).toBeInTheDocument();
+
+    fireEvent.change(teamElement, {
+      target: { value: 'Team-I-id-123' },
+    });
+
+    const pauseAttendanceElement = await screen.findByText('Pause Attendance');
+    expect(pauseAttendanceElement).toBeInTheDocument();
+
+    fireEvent.click(pauseAttendanceElement);
+
+    const cancelBtn = screen.getByText('Cancel');
+    expect(cancelBtn).toBeInTheDocument();
+    fireEvent.click(cancelBtn);
+  });
+  it('Resume attendance for team with inactive attendance', async () => {
+    await cleanup();
+    jest.spyOn(React, 'useContext').mockImplementation(() => ({
+      user: {
+        role: 'coordinator',
+      },
+    }));
+
+    mocks[0].result.data.getAllTeams![0].isJobActive = false;
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <TraineeAttendanceTracker />
+      </MockedProvider>,
+    );
+
+    expect(await screen.findByText('Loading Data...')).toBeInTheDocument();
+
+    const teamElement = await screen.findByTestId('team-test');
+    expect(teamElement).toBeInTheDocument();
+
+    fireEvent.change(teamElement, {
+      target: { value: 'Team-I-id-123' },
+    });
+
+    const phase1Element = await screen.findByText('Phase I');
+    expect(phase1Element).toBeInTheDocument();
+
+    const resumeAttendanceElement = await screen.findByText(
+      'Resume Attendance',
+    );
+    expect(resumeAttendanceElement).toBeInTheDocument();
+
+    fireEvent.click(resumeAttendanceElement);
+
+    const confirmBtn = screen.getByText('Confirm');
+    expect(confirmBtn).toBeInTheDocument();
+    fireEvent.click(confirmBtn);
+  });
 });
diff --git a/tests/pages/__snapshots__/About.test.tsx.snap b/tests/pages/__snapshots__/About.test.tsx.snap
index 539be8335..7df40910f 100644
--- a/tests/pages/__snapshots__/About.test.tsx.snap
+++ b/tests/pages/__snapshots__/About.test.tsx.snap
@@ -170,7 +170,6 @@ exports[`About page renders the about page 1`] = `
       >
          
         Come shape the future together
-         
       </h1>
     </div>
     <div
@@ -205,9 +204,7 @@ exports[`About page renders the about page 1`] = `
         <p
           className="text-base  dark:text-slate-300 text-neutral-900"
         >
-          I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+          Content1
         </p>
       </div>
       <div
@@ -239,9 +236,7 @@ exports[`About page renders the about page 1`] = `
         <p
           className="text-base  dark:text-slate-300 text-neutral-900"
         >
-          I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+          Content2
         </p>
       </div>
       <div
@@ -273,11 +268,7 @@ exports[`About page renders the about page 1`] = `
         <p
           className="text-base  dark:text-slate-300 text-neutral-900"
         >
-          
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+          Content3
         </p>
       </div>
       <span
@@ -361,9 +352,7 @@ exports[`About page renders the about page 1`] = `
         <p
           className="text-base dark:text-slate-300  text-neutral-900"
         >
-          I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+          Content1
         </p>
       </div>
       <div
@@ -395,9 +384,7 @@ exports[`About page renders the about page 1`] = `
         <p
           className="text-base dark:text-slate-300  text-neutral-900"
         >
-          I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+          Content2
         </p>
       </div>
       <div
@@ -429,11 +416,7 @@ exports[`About page renders the about page 1`] = `
         <p
           className="text-base dark:text-slate-300  text-neutral-900"
         >
-          
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+          Content3
         </p>
       </div>
     </div>
diff --git a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap
index cdb28ed1f..e3a616220 100644
--- a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap
+++ b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap
@@ -463,7 +463,7 @@ Array [
               name="date"
               readOnly={true}
               type="text"
-              value="2024-10-06"
+              value="2024-10-24"
             />
           </div>
           <div
@@ -955,15 +955,6 @@ Array [
                    +
                    
                 </button>
-                <button
-                  className="btn primary lg m-0 font-serif "
-                  data-testid="inviteModel"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Invite
-                </button>
               </div>
             </div>
             <div
diff --git a/tests/pages/__snapshots__/Admindash.test.tsx.snap b/tests/pages/__snapshots__/Admindash.test.tsx.snap
index c57c2e737..5c20ffca5 100644
--- a/tests/pages/__snapshots__/Admindash.test.tsx.snap
+++ b/tests/pages/__snapshots__/Admindash.test.tsx.snap
@@ -1708,14 +1708,14 @@ Array [
                   colSpan={6}
                 >
                   <div
-                    className="flex flex-row items-center justify-between w-full mx-auto"
+                    className="flex flex-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto"
                   >
                     <div
-                      className="flex"
+                      className="flex mb-4 sm:-ml-7 -ml-7 lg:mb-0 mr-auto "
                     >
                       <button
                         aria-label="left-arrow"
-                        className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                        className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                         disabled={true}
                         onClick={[Function]}
                         type="button"
@@ -1740,7 +1740,7 @@ Array [
                        
                       <button
                         aria-label="right-arrow"
-                        className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                        className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                         disabled={true}
                         onClick={[Function]}
                         type="button"
@@ -1765,10 +1765,10 @@ Array [
                        
                     </div>
                     <div
-                      className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center"
+                      className="flex flex-row relative md:ml-80 lg:flex-row   justify-center items-baseline w-full lg:w-1/3 w-1/2 text-xs lg:text-md  mx-2 -mr-5"
                     >
                       <span
-                        className="inline-block mx-2"
+                        className="flex justify-center sm:w-[50%] w-[70%] lg:mb-0"
                       >
                         Page
                          
@@ -1779,75 +1779,85 @@ Array [
                         </strong>
                          
                       </span>
-                      <span
-                        className="inline-block mx-2"
-                      >
-                        | Go to page:
-                         
-                        <input
-                          className="pl-1 border rounded-md outline-none appearance-none  border-primary dark:bg-primary"
-                          defaultValue={1}
-                          onChange={[Function]}
-                          style={
-                            Object {
-                              "border": "solid 0.1rem #9e85f5",
-                              "height": "30px",
-                              "paddingLeft": "1.2rem",
-                              "width": "50px",
-                            }
-                          }
-                          type="number"
-                        />
-                      </span>
-                       
-                      <select
-                        className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
-                        onChange={[Function]}
-                        style={
-                          Object {
-                            "border": "solid 0.1rem #9e85f5",
-                            "height": "30px",
-                          }
-                        }
-                        value={3}
+                      <div
+                        className="flex flex-row sm:justify-center justify-end items-center w-full"
                       >
-                        <option
-                          value={3}
-                        >
-                          Show 
-                          3
-                        </option>
-                        <option
-                          value={5}
-                        >
-                          Show 
-                          5
-                        </option>
-                        <option
-                          value={10}
+                        <div
+                          className="hidden lg:flex items-center mx-2 mb-2 lg:mb-0"
                         >
-                          Show 
-                          10
-                        </option>
-                        <option
-                          value={25}
-                        >
-                          Show 
-                          25
-                        </option>
-                        <option
-                          value={50}
-                        >
-                          Show 
-                          50
-                        </option>
-                        <option
-                          value={100}
+                          <span
+                            className="mr-1"
+                          >
+                            | Go to page: 
+                          </span>
+                          <input
+                            className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
+                            defaultValue={1}
+                            onChange={[Function]}
+                            style={
+                              Object {
+                                "border": "solid 0.1rem #9e85f5",
+                                "height": "30px",
+                                "paddingLeft": "1.2rem",
+                                "width": "50px",
+                              }
+                            }
+                            type="number"
+                          />
+                        </div>
+                        <div
+                          className="flex items-center sm:mx-2 mx-0 mb-2 lg:mb-0 "
                         >
-                          Show 
-                          100
-                        </option>
-                      </select>
+                          <select
+                            className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
+                            onChange={[Function]}
+                            style={
+                              Object {
+                                "border": "solid 0.1rem #9e85f5",
+                                "height": "30px",
+                              }
+                            }
+                            value={3}
+                          >
+                            <option
+                              value={3}
+                            >
+                              Show 
+                              3
+                            </option>
+                            <option
+                              value={5}
+                            >
+                              Show 
+                              5
+                            </option>
+                            <option
+                              value={10}
+                            >
+                              Show 
+                              10
+                            </option>
+                            <option
+                              value={25}
+                            >
+                              Show 
+                              25
+                            </option>
+                            <option
+                              value={50}
+                            >
+                              Show 
+                              50
+                            </option>
+                            <option
+                              value={100}
+                            >
+                              Show 
+                              100
+                            </option>
+                          </select>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </td>
diff --git a/tests/pages/__snapshots__/GradingSystem.test.tsx.snap b/tests/pages/__snapshots__/GradingSystem.test.tsx.snap
index ce701c773..6dc4578ab 100644
--- a/tests/pages/__snapshots__/GradingSystem.test.tsx.snap
+++ b/tests/pages/__snapshots__/GradingSystem.test.tsx.snap
@@ -369,7 +369,7 @@ Array [
                 className="max-w-full"
               >
                 <div
-                  className="font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] \\"lg:ml-60 mx-auto\\"} mb-10"
+                  className="relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] \\"lg:ml-60 mx-auto\\"} mb-10"
                 >
                   <div
                     className="flex items-center justify-between pb-6 "
@@ -452,35 +452,15 @@ Array [
                       >
                         <tr>
                           <td
-                            aria-label="Empty cell"
-                            className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300"
+                            className="p-4 text-center h-24"
                             colSpan={3}
                           >
-                             
-                             
-                          </td>
-                        </tr>
-                        <tr>
-                           
-                          <td
-                            className="p-4 text-center"
-                            colSpan={3}
-                          >
-                            <div
-                              className="flex flex-col items-center justify-center space-y-4"
+                            <p
+                              className="text-lg font-medium text-gray-600 dark:text-gray-400 pt-8"
                             >
-                               
-                              <p
-                                className="text-lg font-medium text-gray-600 dark:text-gray-400"
-                              >
-                                 
-                                No records available
-                                 
-                              </p>
-                            </div>
-                             
+                              No records available
+                            </p>
                           </td>
-                           
                         </tr>
                       </tbody>
                     </table>
@@ -504,14 +484,14 @@ Array [
                               colSpan={3}
                             >
                               <div
-                                className="flex flex-row items-center justify-between w-full mx-auto"
+                                className="flex flex-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto"
                               >
                                 <div
-                                  className="flex"
+                                  className="flex mb-4 sm:-ml-7 -ml-7 lg:mb-0 mr-auto "
                                 >
                                   <button
                                     aria-label="left-arrow"
-                                    className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                                    className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                                     disabled={true}
                                     onClick={[Function]}
                                     type="button"
@@ -536,7 +516,7 @@ Array [
                                    
                                   <button
                                     aria-label="right-arrow"
-                                    className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                                    className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                                     disabled={true}
                                     onClick={[Function]}
                                     type="button"
@@ -561,10 +541,10 @@ Array [
                                    
                                 </div>
                                 <div
-                                  className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center"
+                                  className="flex flex-row relative md:ml-80 lg:flex-row   justify-center items-baseline w-full lg:w-1/3 w-1/2 text-xs lg:text-md  mx-2 -mr-5"
                                 >
                                   <span
-                                    className="inline-block mx-2"
+                                    className="flex justify-center sm:w-[50%] w-[70%] lg:mb-0"
                                   >
                                     Page
                                      
@@ -575,75 +555,85 @@ Array [
                                     </strong>
                                      
                                   </span>
-                                  <span
-                                    className="inline-block mx-2"
-                                  >
-                                    | Go to page:
-                                     
-                                    <input
-                                      className="pl-1 border rounded-md outline-none appearance-none  border-primary dark:bg-primary"
-                                      defaultValue={1}
-                                      onChange={[Function]}
-                                      style={
-                                        Object {
-                                          "border": "solid 0.1rem #9e85f5",
-                                          "height": "30px",
-                                          "paddingLeft": "1.2rem",
-                                          "width": "50px",
-                                        }
-                                      }
-                                      type="number"
-                                    />
-                                  </span>
-                                   
-                                  <select
-                                    className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
-                                    onChange={[Function]}
-                                    style={
-                                      Object {
-                                        "border": "solid 0.1rem #9e85f5",
-                                        "height": "30px",
-                                      }
-                                    }
-                                    value={3}
+                                  <div
+                                    className="flex flex-row sm:justify-center justify-end items-center w-full"
                                   >
-                                    <option
-                                      value={3}
-                                    >
-                                      Show 
-                                      3
-                                    </option>
-                                    <option
-                                      value={5}
-                                    >
-                                      Show 
-                                      5
-                                    </option>
-                                    <option
-                                      value={10}
+                                    <div
+                                      className="hidden lg:flex items-center mx-2 mb-2 lg:mb-0"
                                     >
-                                      Show 
-                                      10
-                                    </option>
-                                    <option
-                                      value={25}
-                                    >
-                                      Show 
-                                      25
-                                    </option>
-                                    <option
-                                      value={50}
-                                    >
-                                      Show 
-                                      50
-                                    </option>
-                                    <option
-                                      value={100}
+                                      <span
+                                        className="mr-1"
+                                      >
+                                        | Go to page: 
+                                      </span>
+                                      <input
+                                        className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
+                                        defaultValue={1}
+                                        onChange={[Function]}
+                                        style={
+                                          Object {
+                                            "border": "solid 0.1rem #9e85f5",
+                                            "height": "30px",
+                                            "paddingLeft": "1.2rem",
+                                            "width": "50px",
+                                          }
+                                        }
+                                        type="number"
+                                      />
+                                    </div>
+                                    <div
+                                      className="flex items-center sm:mx-2 mx-0 mb-2 lg:mb-0 "
                                     >
-                                      Show 
-                                      100
-                                    </option>
-                                  </select>
+                                      <select
+                                        className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
+                                        onChange={[Function]}
+                                        style={
+                                          Object {
+                                            "border": "solid 0.1rem #9e85f5",
+                                            "height": "30px",
+                                          }
+                                        }
+                                        value={3}
+                                      >
+                                        <option
+                                          value={3}
+                                        >
+                                          Show 
+                                          3
+                                        </option>
+                                        <option
+                                          value={5}
+                                        >
+                                          Show 
+                                          5
+                                        </option>
+                                        <option
+                                          value={10}
+                                        >
+                                          Show 
+                                          10
+                                        </option>
+                                        <option
+                                          value={25}
+                                        >
+                                          Show 
+                                          25
+                                        </option>
+                                        <option
+                                          value={50}
+                                        >
+                                          Show 
+                                          50
+                                        </option>
+                                        <option
+                                          value={100}
+                                        >
+                                          Show 
+                                          100
+                                        </option>
+                                      </select>
+                                    </div>
+                                  </div>
                                 </div>
                               </div>
                             </td>
diff --git a/tests/pages/__snapshots__/Home.test.tsx.snap b/tests/pages/__snapshots__/Home.test.tsx.snap
index e8e6437c2..cc9b67cac 100644
--- a/tests/pages/__snapshots__/Home.test.tsx.snap
+++ b/tests/pages/__snapshots__/Home.test.tsx.snap
@@ -224,6 +224,32 @@ exports[`Home page renders the landing page 1`] = `
           About
         </a>
       </li>
+      <li
+        className="w-full p-2 dark:text-dark-text-fill"
+      >
+        <a
+          className="w-full"
+          href="/product"
+          onClick={[Function]}
+        >
+          Product
+        </a>
+      </li>
+      <div
+        className="flex flex-col p-2 dark:text-dark-text-fill"
+      >
+        <div
+          className="inline-flex gap-2 items-center"
+          onClick={[Function]}
+        >
+          <p>
+            Docs
+          </p>
+          <span>
+            ▼
+          </span>
+        </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"
       >
@@ -453,7 +479,6 @@ exports[`Home page renders the landing page 1`] = `
         >
            
           Come shape the future together
-           
         </h1>
       </div>
       <div
@@ -488,9 +513,7 @@ exports[`Home page renders the landing page 1`] = `
           <p
             className="text-base  dark:text-slate-300 text-neutral-900"
           >
-            I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+            Content1
           </p>
         </div>
         <div
@@ -522,9 +545,7 @@ exports[`Home page renders the landing page 1`] = `
           <p
             className="text-base  dark:text-slate-300 text-neutral-900"
           >
-            I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+            Content2
           </p>
         </div>
         <div
@@ -556,11 +577,7 @@ exports[`Home page renders the landing page 1`] = `
           <p
             className="text-base  dark:text-slate-300 text-neutral-900"
           >
-            
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+            Content3
           </p>
         </div>
         <span
@@ -644,9 +661,7 @@ exports[`Home page renders the landing page 1`] = `
           <p
             className="text-base dark:text-slate-300  text-neutral-900"
           >
-            I'm extremely impressed with Pulse and their performance management platform.
-        Since using their services, it has been a game-changer for our organization.
-        The platform is intuitive, easy to navigate, and packed with powerful features.
+            Content1
           </p>
         </div>
         <div
@@ -678,9 +693,7 @@ exports[`Home page renders the landing page 1`] = `
           <p
             className="text-base dark:text-slate-300  text-neutral-900"
           >
-            I'm delighted to share my positive experience with Pulse and their exceptional
-        performance management platform. Implementing their services has led to remarkable
-        improvements in our performance tracking and management processes.
+            Content2
           </p>
         </div>
         <div
@@ -712,11 +725,7 @@ exports[`Home page renders the landing page 1`] = `
           <p
             className="text-base dark:text-slate-300  text-neutral-900"
           >
-            
-        We are thrilled with the services provided by Pulse. Their performance management platform
-        has exceeded our expectations in every way. The user-friendly interface and comprehensive
-        features have made tracking and monitoring our performance metrics a breeze.
-        
+            Content3
           </p>
         </div>
       </div>
diff --git a/tests/pages/__snapshots__/Profile.test.tsx.snap b/tests/pages/__snapshots__/Profile.test.tsx.snap
index 50a62de3d..da0515bac 100644
--- a/tests/pages/__snapshots__/Profile.test.tsx.snap
+++ b/tests/pages/__snapshots__/Profile.test.tsx.snap
@@ -165,16 +165,17 @@ Object {
                 >
                   <label
                     class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                    for="first-name"
+                    for="email"
                   >
-                    First Name
+                    Email
                   </label>
                   <input
-                    class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                    id="firstname"
-                    name="firstName"
-                    placeholder="Enter your First Name"
-                    type="text"
+                    class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700 bg-gray-100 cursor-not-allowed dark:bg-black/45"
+                    id="email"
+                    name="email"
+                    placeholder="Your email"
+                    readonly=""
+                    type="email"
                   />
                   <div
                     class="text-[.78rem] md:text-[.83rem]"
@@ -189,15 +190,15 @@ Object {
                 >
                   <label
                     class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                    for="lastname"
+                    for="first-name"
                   >
-                    Last Name
+                    First Name
                   </label>
                   <input
                     class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                    id="lastname"
-                    name="lastName"
-                    placeholder="Enter your Last Name"
+                    id="firstname"
+                    name="firstName"
+                    placeholder="Enter your First Name"
                     type="text"
                   />
                   <div
@@ -213,16 +214,16 @@ Object {
                 >
                   <label
                     class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                    for="telephone"
+                    for="lastname"
                   >
-                    Telephone
+                    Last Name
                   </label>
                   <input
                     class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                    id="telephone"
-                    name="phoneNumber"
-                    placeholder="Your Telephone Number"
-                    type="phone"
+                    id="lastname"
+                    name="lastName"
+                    placeholder="Enter your Last Name"
+                    type="text"
                   />
                   <div
                     class="text-[.78rem] md:text-[.83rem]"
@@ -313,10 +314,10 @@ Object {
                 class="flex flex-col gap-y-3 basis-1/2"
               >
                 <div
-                  class="flex flex-col items-start justify-start mt-auto font-serif"
+                  class="flex flex-col items-start justify-start mt-auto font-serif "
                 >
                   <label
-                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem] "
                     for="Country"
                   >
                     Country
@@ -370,406 +371,2925 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="flex flex-col items-start justify-start h-full md:col-span-2"
+                  class="flex flex-col items-start justify-start"
                 >
                   <label
                     class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                    for="Biography"
+                    for="phoneNumber"
                   >
-                    Biography
-                    <span
-                      class="font-light text-[.7rem] ml-2"
-                    >
-                      *Max(400 chars)
-                    </span>
+                    Phone Number
+                     (Optional)
                   </label>
-                  <textarea
-                    class="w-full custom-scrollbar resize-none h-full px-4 py-3 text-[.8rem] md:text-[.84rem] text-justify border rounded-[3px] dark:bg-black/45 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700"
-                    cols="20"
-                    id=""
-                    maxlength="400"
-                    name="biography"
-                    placeholder="Add your biography here"
-                    rows="5"
-                  />
-                </div>
-              </div>
-            </div>
-            <button
-              class="w-full xmd:w-[7.7rem] h-8 flex flex-row items-center justify-center my-3 text-[.81rem] md:text-sm font-semibold rounded-[3px]  text-white bg-primary  dark:focus:ring-secondary m-0"
-              type="submit"
-            >
-              ~
-              Update Profile
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="h-full mx-auto font-serif bg-light-bg dark:bg-dark-frame-bg"
-    >
-      <div
-        class="font-serif bg-cover bg-no-repeat bg-defaultCover bg-center bg-fixed h-[28vh] md:h-[26vh] flex flex-row text-center  align-center items-center"
-        style="background-image: url(https://images.unsplash.com/photo-1483168527879-c66136b56105?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3016&q=80);"
-      >
-        <div
-          class="relative"
-        >
-          <img
-            alt="profile-avatar"
-            class="relative w-24 h-24 m-4 ml-6 rounded-full md:w-28 md:h-28 md:ml-20 mt-32 md:mt-12 object-cover"
-            src="[object Object]"
-          />
-          <div
-            class="-right-12 md:-right-16 absolute bottom-7 md:bottom-8"
-            role="button"
-          >
-            <label
-              class="flex items-center md:gap-x-1 px-2 py-[3px] md:py-1 cursor-pointer rounded-[3px] bg-primary text-white hover:bg-[#7a5edc] overflow-hidden"
-            >
-              <svg
-                aria-hidden="true"
-                class="w-[14px] md:w-[15px] dark:text-dark-text-fill"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <span
-                class="text-[.73rem] font-semibold md:text-sm dark:text-dark-text-fill"
-              >
-                <span>
-                  Edit
-                </span>
-              </span>
-              <input
-                class="hidden"
-                data-testid="upload-image"
-                type="file"
-              />
-            </label>
-          </div>
-        </div>
-        <div
-          class="flex items-center justify-center w-full h-screen mt-24 ml-auto bg-grey-lighter"
-        >
-          <label
-            class="flex items-center ml-auto mr-4 rounded-md bg-primary text-white hover:bg-[#7a5edc] p-[6px]  cursor-pointer"
-          >
-            <svg
-              aria-hidden="true"
-              class="w-5 dark:text-dark-text-fill"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <input
-              class="hidden"
-              data-testid="upload-cover"
-              type="file"
-            />
-          </label>
-        </div>
-      </div>
-      <div
-        class="flex flex-wrap mt-6 md:mt-5"
-      >
-        <ul
-          class="flex flex-row flex-wrap pt-3 pb-2 mb-0 text-black list-none dark:text-dark-text-fill text-[.8rem] md:text-[.93rem]"
-          role="tablist"
-        >
-          <li
-            class="flex-auto mr-2 -mb-px text-center last:mr-0"
-            role="button"
-          >
-            <span
-              class="block px-3 md:px-5 py-[6px] md:py-3 font-bold leading-normal uppercase border-b-2 md:border-b-4 rounded shadow-sm  border-b-primary  "
-            >
-              Editing Profile
-            </span>
-          </li>
-          <li
-            class="flex-auto mr-2 -mb-px text-center last:mr-0"
-            role="button"
-          >
-            <span
-              class="block px-3 md:px-5 py-[6px] md:py-3 font-bold leading-normal uppercase border-b-2 md:border-b-4 rounded shadow-sm  false  "
-            >
-              Upload Resume
-            </span>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="w-full p-4 my-1 bg-indigo-100 border rounded-lg dark:border-dark-bg dark:bg-dark-bg dark:text-white md:my-4 md:p-7"
-      >
-        <button
-          class="btn default md rounded-[3px] bg-primary text-[.78rem] md:text-[.85rem] text-white focus:outline-none px-2 md:px-3 py-[4px] md:py-[6px] m-0 mb-6 font-serif "
-          type="button"
-        >
-           
-          <a
-            class="flex items-center gap-x-1"
-            href="/profile"
-          >
-            <svg
-              aria-hidden="true"
-              class="w-4 dark:text-dark-text-fill"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span>
-              Back to profile
-            </span>
-          </a>
-        </button>
-        <form
-          class="flex flex-col w-full gap-y-4"
-        >
-          <div
-            class="flex flex-col w-full gap-6 xmd:flex-row lg:gap-10"
-          >
-            <div
-              class="flex flex-col gap-y-3 basis-1/2"
-            >
-              <div
-                class="flex flex-col items-start justify-start font-serif w-full"
-              >
-                <label
-                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                  for="first-name"
-                >
-                  First Name
-                </label>
-                <input
-                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                  id="firstname"
-                  name="firstName"
-                  placeholder="Enter your First Name"
-                  type="text"
-                />
-                <div
-                  class="text-[.78rem] md:text-[.83rem]"
-                >
-                  <small
-                    class="text-red-600"
-                  />
-                </div>
-              </div>
-              <div
-                class="flex flex-col items-start justify-start font-serif w-full"
-              >
-                <label
-                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                  for="lastname"
-                >
-                  Last Name
-                </label>
-                <input
-                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                  id="lastname"
-                  name="lastName"
-                  placeholder="Enter your Last Name"
-                  type="text"
-                />
-                <div
-                  class="text-[.78rem] md:text-[.83rem]"
-                >
-                  <small
-                    class="text-red-600"
-                  />
-                </div>
-              </div>
-              <div
-                class="flex flex-col items-start justify-start font-serif w-full"
-              >
-                <label
-                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                  for="telephone"
-                >
-                  Telephone
-                </label>
-                <input
-                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                  id="telephone"
-                  name="phoneNumber"
-                  placeholder="Your Telephone Number"
-                  type="phone"
-                />
-                <div
-                  class="text-[.78rem] md:text-[.83rem]"
-                >
-                  <small
-                    class="text-red-600"
-                  />
-                </div>
-              </div>
-              <div
-                class="flex flex-col items-start justify-start font-serif w-full"
-              >
-                <label
-                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                  for="github-username"
-                >
-                  Github Username
-                </label>
-                <input
-                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                  id="github-username"
-                  name="githubUsername"
-                  placeholder="Your Github Username"
-                  type="text"
-                />
-                <div
-                  class="text-[.78rem] md:text-[.83rem]"
-                >
-                  <small
-                    class="text-red-600"
-                  />
-                </div>
-              </div>
-              <div
-                class="flex w-full gap-x-4"
-              >
-                <div
-                  class="flex flex-col items-start justify-start font-serif w-full"
-                >
-                  <label
-                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                    for="address"
-                  >
-                    Address
-                  </label>
-                  <input
-                    class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                    id="address"
-                    name="address"
-                    placeholder="Enter your address"
-                    type="text"
-                  />
-                  <div
-                    class="text-[.78rem] md:text-[.83rem]"
-                  >
-                    <small
-                      class="text-red-600"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="flex flex-col items-start justify-start font-serif w-full"
-                >
-                  <label
-                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                    for="city"
-                  >
-                    City
-                  </label>
-                  <input
-                    class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
-                    id="city"
-                    name="city"
-                    placeholder="Enter the City where you live"
-                    type="text"
-                  />
-                  <div
-                    class="text-[.78rem] md:text-[.83rem]"
-                  >
-                    <small
-                      class="text-red-600"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="flex flex-col gap-y-3 basis-1/2"
-            >
-              <div
-                class="flex flex-col items-start justify-start mt-auto font-serif"
-              >
-                <label
-                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
-                  for="Country"
-                >
-                  Country
-                </label>
-                <div
-                  class="w-full"
-                  data-testid="countries"
-                >
                   <div
-                    class="relative font-serif"
+                    class="w-full phone-input-container custom-phone-input dark:bg-black/45 PhoneInput"
                   >
-                    <button
-                      aria-expanded="true"
-                      aria-haspopup="listbox"
-                      aria-labelledby="listbox-label"
-                      class="bg-white  dark:bg-black/45 relative w-full border border-gray-300  rounded-[3px] shadow-sm pl-2 pr-1 py-[5px] text-left cursor-default focus:outline-none focus:ring-1  focus:ring-primary focus:border-primary focus:z-10 text-[.8rem] md:text-[.85]  dark:text-dark-text-fill dark:border-neutral-700  darksm:text-sm"
-                      data-testid="country-selector-button"
-                      type="button"
+                    <div
+                      class="PhoneInputCountry"
                     >
-                      <span
-                        class="truncate flex items-center"
-                        data-testid="country-selector-title"
-                      >
-                        <img
-                          alt="AD"
-                          class="inline mr-2 h-3 md:h-4 rounded-sm"
-                          data-testid="country-selector-flag"
-                          src="https://purecatamphetamine.github.io/country-flag-icons/3x2/AD.svg"
-                        />
-                        Andorra
-                      </span>
-                      <span
-                        class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+                      <select
+                        aria-label="Phone number country"
+                        class="PhoneInputCountrySelect"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="h-5 w-5 text-gray-400 "
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <option
+                          value="AF"
                         >
-                          <path
-                            clip-rule="evenodd"
-                            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </div>
+                          Afghanistan
+                        </option>
+                        <option
+                          value="AX"
+                        >
+                          Åland Islands
+                        </option>
+                        <option
+                          value="AL"
+                        >
+                          Albania
+                        </option>
+                        <option
+                          value="DZ"
+                        >
+                          Algeria
+                        </option>
+                        <option
+                          value="AS"
+                        >
+                          American Samoa
+                        </option>
+                        <option
+                          value="AD"
+                        >
+                          Andorra
+                        </option>
+                        <option
+                          value="AO"
+                        >
+                          Angola
+                        </option>
+                        <option
+                          value="AI"
+                        >
+                          Anguilla
+                        </option>
+                        <option
+                          value="AG"
+                        >
+                          Antigua and Barbuda
+                        </option>
+                        <option
+                          value="AR"
+                        >
+                          Argentina
+                        </option>
+                        <option
+                          value="AM"
+                        >
+                          Armenia
+                        </option>
+                        <option
+                          value="AW"
+                        >
+                          Aruba
+                        </option>
+                        <option
+                          value="AC"
+                        >
+                          Ascension Island
+                        </option>
+                        <option
+                          value="AU"
+                        >
+                          Australia
+                        </option>
+                        <option
+                          value="AT"
+                        >
+                          Austria
+                        </option>
+                        <option
+                          value="AZ"
+                        >
+                          Azerbaijan
+                        </option>
+                        <option
+                          value="BS"
+                        >
+                          Bahamas
+                        </option>
+                        <option
+                          value="BH"
+                        >
+                          Bahrain
+                        </option>
+                        <option
+                          value="BD"
+                        >
+                          Bangladesh
+                        </option>
+                        <option
+                          value="BB"
+                        >
+                          Barbados
+                        </option>
+                        <option
+                          value="BY"
+                        >
+                          Belarus
+                        </option>
+                        <option
+                          value="BE"
+                        >
+                          Belgium
+                        </option>
+                        <option
+                          value="BZ"
+                        >
+                          Belize
+                        </option>
+                        <option
+                          value="BJ"
+                        >
+                          Benin
+                        </option>
+                        <option
+                          value="BM"
+                        >
+                          Bermuda
+                        </option>
+                        <option
+                          value="BT"
+                        >
+                          Bhutan
+                        </option>
+                        <option
+                          value="BO"
+                        >
+                          Bolivia
+                        </option>
+                        <option
+                          value="BQ"
+                        >
+                          Bonaire, Sint Eustatius and Saba
+                        </option>
+                        <option
+                          value="BA"
+                        >
+                          Bosnia and Herzegovina
+                        </option>
+                        <option
+                          value="BW"
+                        >
+                          Botswana
+                        </option>
+                        <option
+                          value="BR"
+                        >
+                          Brazil
+                        </option>
+                        <option
+                          value="IO"
+                        >
+                          British Indian Ocean Territory
+                        </option>
+                        <option
+                          value="BN"
+                        >
+                          Brunei Darussalam
+                        </option>
+                        <option
+                          value="BG"
+                        >
+                          Bulgaria
+                        </option>
+                        <option
+                          value="BF"
+                        >
+                          Burkina Faso
+                        </option>
+                        <option
+                          value="BI"
+                        >
+                          Burundi
+                        </option>
+                        <option
+                          value="KH"
+                        >
+                          Cambodia
+                        </option>
+                        <option
+                          value="CM"
+                        >
+                          Cameroon
+                        </option>
+                        <option
+                          value="CA"
+                        >
+                          Canada
+                        </option>
+                        <option
+                          value="CV"
+                        >
+                          Cape Verde
+                        </option>
+                        <option
+                          value="KY"
+                        >
+                          Cayman Islands
+                        </option>
+                        <option
+                          value="CF"
+                        >
+                          Central African Republic
+                        </option>
+                        <option
+                          value="TD"
+                        >
+                          Chad
+                        </option>
+                        <option
+                          value="CL"
+                        >
+                          Chile
+                        </option>
+                        <option
+                          value="CN"
+                        >
+                          China
+                        </option>
+                        <option
+                          value="CX"
+                        >
+                          Christmas Island
+                        </option>
+                        <option
+                          value="CC"
+                        >
+                          Cocos (Keeling) Islands
+                        </option>
+                        <option
+                          value="CO"
+                        >
+                          Colombia
+                        </option>
+                        <option
+                          value="KM"
+                        >
+                          Comoros
+                        </option>
+                        <option
+                          value="CG"
+                        >
+                          Congo
+                        </option>
+                        <option
+                          value="CD"
+                        >
+                          Congo, Democratic Republic of the
+                        </option>
+                        <option
+                          value="CK"
+                        >
+                          Cook Islands
+                        </option>
+                        <option
+                          value="CR"
+                        >
+                          Costa Rica
+                        </option>
+                        <option
+                          value="CI"
+                        >
+                          Cote d'Ivoire
+                        </option>
+                        <option
+                          value="HR"
+                        >
+                          Croatia
+                        </option>
+                        <option
+                          value="CU"
+                        >
+                          Cuba
+                        </option>
+                        <option
+                          value="CW"
+                        >
+                          Curaçao
+                        </option>
+                        <option
+                          value="CY"
+                        >
+                          Cyprus
+                        </option>
+                        <option
+                          value="CZ"
+                        >
+                          Czech Republic
+                        </option>
+                        <option
+                          value="DK"
+                        >
+                          Denmark
+                        </option>
+                        <option
+                          value="DJ"
+                        >
+                          Djibouti
+                        </option>
+                        <option
+                          value="DM"
+                        >
+                          Dominica
+                        </option>
+                        <option
+                          value="DO"
+                        >
+                          Dominican Republic
+                        </option>
+                        <option
+                          value="EC"
+                        >
+                          Ecuador
+                        </option>
+                        <option
+                          value="EG"
+                        >
+                          Egypt
+                        </option>
+                        <option
+                          value="SV"
+                        >
+                          El Salvador
+                        </option>
+                        <option
+                          value="GQ"
+                        >
+                          Equatorial Guinea
+                        </option>
+                        <option
+                          value="ER"
+                        >
+                          Eritrea
+                        </option>
+                        <option
+                          value="EE"
+                        >
+                          Estonia
+                        </option>
+                        <option
+                          value="ET"
+                        >
+                          Ethiopia
+                        </option>
+                        <option
+                          value="FK"
+                        >
+                          Falkland Islands
+                        </option>
+                        <option
+                          value="FO"
+                        >
+                          Faroe Islands
+                        </option>
+                        <option
+                          value="FM"
+                        >
+                          Federated States of Micronesia
+                        </option>
+                        <option
+                          value="FJ"
+                        >
+                          Fiji
+                        </option>
+                        <option
+                          value="FI"
+                        >
+                          Finland
+                        </option>
+                        <option
+                          value="FR"
+                        >
+                          France
+                        </option>
+                        <option
+                          value="GF"
+                        >
+                          French Guiana
+                        </option>
+                        <option
+                          value="PF"
+                        >
+                          French Polynesia
+                        </option>
+                        <option
+                          value="GA"
+                        >
+                          Gabon
+                        </option>
+                        <option
+                          value="GM"
+                        >
+                          Gambia
+                        </option>
+                        <option
+                          value="GE"
+                        >
+                          Georgia
+                        </option>
+                        <option
+                          value="DE"
+                        >
+                          Germany
+                        </option>
+                        <option
+                          value="GH"
+                        >
+                          Ghana
+                        </option>
+                        <option
+                          value="GI"
+                        >
+                          Gibraltar
+                        </option>
+                        <option
+                          value="GR"
+                        >
+                          Greece
+                        </option>
+                        <option
+                          value="GL"
+                        >
+                          Greenland
+                        </option>
+                        <option
+                          value="GD"
+                        >
+                          Grenada
+                        </option>
+                        <option
+                          value="GP"
+                        >
+                          Guadeloupe
+                        </option>
+                        <option
+                          value="GU"
+                        >
+                          Guam
+                        </option>
+                        <option
+                          value="GT"
+                        >
+                          Guatemala
+                        </option>
+                        <option
+                          value="GG"
+                        >
+                          Guernsey
+                        </option>
+                        <option
+                          value="GN"
+                        >
+                          Guinea
+                        </option>
+                        <option
+                          value="GW"
+                        >
+                          Guinea-Bissau
+                        </option>
+                        <option
+                          value="GY"
+                        >
+                          Guyana
+                        </option>
+                        <option
+                          value="HT"
+                        >
+                          Haiti
+                        </option>
+                        <option
+                          value="VA"
+                        >
+                          Holy See (Vatican City State)
+                        </option>
+                        <option
+                          value="HN"
+                        >
+                          Honduras
+                        </option>
+                        <option
+                          value="HK"
+                        >
+                          Hong Kong
+                        </option>
+                        <option
+                          value="HU"
+                        >
+                          Hungary
+                        </option>
+                        <option
+                          value="IS"
+                        >
+                          Iceland
+                        </option>
+                        <option
+                          value="IN"
+                        >
+                          India
+                        </option>
+                        <option
+                          value="ID"
+                        >
+                          Indonesia
+                        </option>
+                        <option
+                          value="IR"
+                        >
+                          Iran
+                        </option>
+                        <option
+                          value="IQ"
+                        >
+                          Iraq
+                        </option>
+                        <option
+                          value="IE"
+                        >
+                          Ireland
+                        </option>
+                        <option
+                          value="IM"
+                        >
+                          Isle of Man
+                        </option>
+                        <option
+                          value="IL"
+                        >
+                          Israel
+                        </option>
+                        <option
+                          value="IT"
+                        >
+                          Italy
+                        </option>
+                        <option
+                          value="JM"
+                        >
+                          Jamaica
+                        </option>
+                        <option
+                          value="JP"
+                        >
+                          Japan
+                        </option>
+                        <option
+                          value="JE"
+                        >
+                          Jersey
+                        </option>
+                        <option
+                          value="JO"
+                        >
+                          Jordan
+                        </option>
+                        <option
+                          value="KZ"
+                        >
+                          Kazakhstan
+                        </option>
+                        <option
+                          value="KE"
+                        >
+                          Kenya
+                        </option>
+                        <option
+                          value="KI"
+                        >
+                          Kiribati
+                        </option>
+                        <option
+                          value="XK"
+                        >
+                          Kosovo
+                        </option>
+                        <option
+                          value="KW"
+                        >
+                          Kuwait
+                        </option>
+                        <option
+                          value="KG"
+                        >
+                          Kyrgyzstan
+                        </option>
+                        <option
+                          value="LA"
+                        >
+                          Laos
+                        </option>
+                        <option
+                          value="LV"
+                        >
+                          Latvia
+                        </option>
+                        <option
+                          value="LB"
+                        >
+                          Lebanon
+                        </option>
+                        <option
+                          value="LS"
+                        >
+                          Lesotho
+                        </option>
+                        <option
+                          value="LR"
+                        >
+                          Liberia
+                        </option>
+                        <option
+                          value="LY"
+                        >
+                          Libya
+                        </option>
+                        <option
+                          value="LI"
+                        >
+                          Liechtenstein
+                        </option>
+                        <option
+                          value="LT"
+                        >
+                          Lithuania
+                        </option>
+                        <option
+                          value="LU"
+                        >
+                          Luxembourg
+                        </option>
+                        <option
+                          value="MO"
+                        >
+                          Macao
+                        </option>
+                        <option
+                          value="MG"
+                        >
+                          Madagascar
+                        </option>
+                        <option
+                          value="MW"
+                        >
+                          Malawi
+                        </option>
+                        <option
+                          value="MY"
+                        >
+                          Malaysia
+                        </option>
+                        <option
+                          value="MV"
+                        >
+                          Maldives
+                        </option>
+                        <option
+                          value="ML"
+                        >
+                          Mali
+                        </option>
+                        <option
+                          value="MT"
+                        >
+                          Malta
+                        </option>
+                        <option
+                          value="MH"
+                        >
+                          Marshall Islands
+                        </option>
+                        <option
+                          value="MQ"
+                        >
+                          Martinique
+                        </option>
+                        <option
+                          value="MR"
+                        >
+                          Mauritania
+                        </option>
+                        <option
+                          value="MU"
+                        >
+                          Mauritius
+                        </option>
+                        <option
+                          value="YT"
+                        >
+                          Mayotte
+                        </option>
+                        <option
+                          value="MX"
+                        >
+                          Mexico
+                        </option>
+                        <option
+                          value="MD"
+                        >
+                          Moldova
+                        </option>
+                        <option
+                          value="MC"
+                        >
+                          Monaco
+                        </option>
+                        <option
+                          value="MN"
+                        >
+                          Mongolia
+                        </option>
+                        <option
+                          value="ME"
+                        >
+                          Montenegro
+                        </option>
+                        <option
+                          value="MS"
+                        >
+                          Montserrat
+                        </option>
+                        <option
+                          value="MA"
+                        >
+                          Morocco
+                        </option>
+                        <option
+                          value="MZ"
+                        >
+                          Mozambique
+                        </option>
+                        <option
+                          value="MM"
+                        >
+                          Myanmar
+                        </option>
+                        <option
+                          value="NA"
+                        >
+                          Namibia
+                        </option>
+                        <option
+                          value="NR"
+                        >
+                          Nauru
+                        </option>
+                        <option
+                          value="NP"
+                        >
+                          Nepal
+                        </option>
+                        <option
+                          value="NL"
+                        >
+                          Netherlands
+                        </option>
+                        <option
+                          value="NC"
+                        >
+                          New Caledonia
+                        </option>
+                        <option
+                          value="NZ"
+                        >
+                          New Zealand
+                        </option>
+                        <option
+                          value="NI"
+                        >
+                          Nicaragua
+                        </option>
+                        <option
+                          value="NE"
+                        >
+                          Niger
+                        </option>
+                        <option
+                          value="NG"
+                        >
+                          Nigeria
+                        </option>
+                        <option
+                          value="NU"
+                        >
+                          Niue
+                        </option>
+                        <option
+                          value="NF"
+                        >
+                          Norfolk Island
+                        </option>
+                        <option
+                          value="KP"
+                        >
+                          North Korea
+                        </option>
+                        <option
+                          value="MK"
+                        >
+                          North Macedonia
+                        </option>
+                        <option
+                          value="MP"
+                        >
+                          Northern Mariana Islands
+                        </option>
+                        <option
+                          value="NO"
+                        >
+                          Norway
+                        </option>
+                        <option
+                          value="OM"
+                        >
+                          Oman
+                        </option>
+                        <option
+                          value="PK"
+                        >
+                          Pakistan
+                        </option>
+                        <option
+                          value="PW"
+                        >
+                          Palau
+                        </option>
+                        <option
+                          value="PS"
+                        >
+                          Palestine
+                        </option>
+                        <option
+                          value="PA"
+                        >
+                          Panama
+                        </option>
+                        <option
+                          value="PG"
+                        >
+                          Papua New Guinea
+                        </option>
+                        <option
+                          value="PY"
+                        >
+                          Paraguay
+                        </option>
+                        <option
+                          value="PE"
+                        >
+                          Peru
+                        </option>
+                        <option
+                          value="PH"
+                        >
+                          Philippines
+                        </option>
+                        <option
+                          value="PL"
+                        >
+                          Poland
+                        </option>
+                        <option
+                          value="PT"
+                        >
+                          Portugal
+                        </option>
+                        <option
+                          value="PR"
+                        >
+                          Puerto Rico
+                        </option>
+                        <option
+                          value="QA"
+                        >
+                          Qatar
+                        </option>
+                        <option
+                          value="RE"
+                        >
+                          Reunion
+                        </option>
+                        <option
+                          value="RO"
+                        >
+                          Romania
+                        </option>
+                        <option
+                          value="RU"
+                        >
+                          Russia
+                        </option>
+                        <option
+                          value="RW"
+                        >
+                          Rwanda
+                        </option>
+                        <option
+                          value="BL"
+                        >
+                          Saint Barthélemy
+                        </option>
+                        <option
+                          value="SH"
+                        >
+                          Saint Helena
+                        </option>
+                        <option
+                          value="KN"
+                        >
+                          Saint Kitts and Nevis
+                        </option>
+                        <option
+                          value="LC"
+                        >
+                          Saint Lucia
+                        </option>
+                        <option
+                          value="MF"
+                        >
+                          Saint Martin (French Part)
+                        </option>
+                        <option
+                          value="PM"
+                        >
+                          Saint Pierre and Miquelon
+                        </option>
+                        <option
+                          value="VC"
+                        >
+                          Saint Vincent and the Grenadines
+                        </option>
+                        <option
+                          value="WS"
+                        >
+                          Samoa
+                        </option>
+                        <option
+                          value="SM"
+                        >
+                          San Marino
+                        </option>
+                        <option
+                          value="ST"
+                        >
+                          Sao Tome and Principe
+                        </option>
+                        <option
+                          value="SA"
+                        >
+                          Saudi Arabia
+                        </option>
+                        <option
+                          value="SN"
+                        >
+                          Senegal
+                        </option>
+                        <option
+                          value="RS"
+                        >
+                          Serbia
+                        </option>
+                        <option
+                          value="SC"
+                        >
+                          Seychelles
+                        </option>
+                        <option
+                          value="SL"
+                        >
+                          Sierra Leone
+                        </option>
+                        <option
+                          value="SG"
+                        >
+                          Singapore
+                        </option>
+                        <option
+                          value="SX"
+                        >
+                          Sint Maarten
+                        </option>
+                        <option
+                          value="SK"
+                        >
+                          Slovakia
+                        </option>
+                        <option
+                          value="SI"
+                        >
+                          Slovenia
+                        </option>
+                        <option
+                          value="SB"
+                        >
+                          Solomon Islands
+                        </option>
+                        <option
+                          value="SO"
+                        >
+                          Somalia
+                        </option>
+                        <option
+                          value="ZA"
+                        >
+                          South Africa
+                        </option>
+                        <option
+                          value="KR"
+                        >
+                          South Korea
+                        </option>
+                        <option
+                          value="SS"
+                        >
+                          South Sudan
+                        </option>
+                        <option
+                          value="ES"
+                        >
+                          Spain
+                        </option>
+                        <option
+                          value="LK"
+                        >
+                          Sri Lanka
+                        </option>
+                        <option
+                          value="SD"
+                        >
+                          Sudan
+                        </option>
+                        <option
+                          value="SR"
+                        >
+                          Suriname
+                        </option>
+                        <option
+                          value="SJ"
+                        >
+                          Svalbard and Jan Mayen
+                        </option>
+                        <option
+                          value="SZ"
+                        >
+                          Swaziland
+                        </option>
+                        <option
+                          value="SE"
+                        >
+                          Sweden
+                        </option>
+                        <option
+                          value="CH"
+                        >
+                          Switzerland
+                        </option>
+                        <option
+                          value="SY"
+                        >
+                          Syria
+                        </option>
+                        <option
+                          value="TW"
+                        >
+                          Taiwan
+                        </option>
+                        <option
+                          value="TJ"
+                        >
+                          Tajikistan
+                        </option>
+                        <option
+                          value="TZ"
+                        >
+                          Tanzania
+                        </option>
+                        <option
+                          value="TH"
+                        >
+                          Thailand
+                        </option>
+                        <option
+                          value="TL"
+                        >
+                          Timor-Leste
+                        </option>
+                        <option
+                          value="TG"
+                        >
+                          Togo
+                        </option>
+                        <option
+                          value="TK"
+                        >
+                          Tokelau
+                        </option>
+                        <option
+                          value="TO"
+                        >
+                          Tonga
+                        </option>
+                        <option
+                          value="TT"
+                        >
+                          Trinidad and Tobago
+                        </option>
+                        <option
+                          value="TA"
+                        >
+                          Tristan da Cunha
+                        </option>
+                        <option
+                          value="TN"
+                        >
+                          Tunisia
+                        </option>
+                        <option
+                          value="TR"
+                        >
+                          Turkey
+                        </option>
+                        <option
+                          value="TM"
+                        >
+                          Turkmenistan
+                        </option>
+                        <option
+                          value="TC"
+                        >
+                          Turks and Caicos Islands
+                        </option>
+                        <option
+                          value="TV"
+                        >
+                          Tuvalu
+                        </option>
+                        <option
+                          value="UG"
+                        >
+                          Uganda
+                        </option>
+                        <option
+                          value="UA"
+                        >
+                          Ukraine
+                        </option>
+                        <option
+                          value="AE"
+                        >
+                          United Arab Emirates
+                        </option>
+                        <option
+                          value="GB"
+                        >
+                          United Kingdom
+                        </option>
+                        <option
+                          value="US"
+                        >
+                          United States
+                        </option>
+                        <option
+                          value="UY"
+                        >
+                          Uruguay
+                        </option>
+                        <option
+                          value="UZ"
+                        >
+                          Uzbekistan
+                        </option>
+                        <option
+                          value="VU"
+                        >
+                          Vanuatu
+                        </option>
+                        <option
+                          value="VE"
+                        >
+                          Venezuela
+                        </option>
+                        <option
+                          value="VN"
+                        >
+                          Vietnam
+                        </option>
+                        <option
+                          value="VG"
+                        >
+                          Virgin Islands, British
+                        </option>
+                        <option
+                          value="VI"
+                        >
+                          Virgin Islands, U.S.
+                        </option>
+                        <option
+                          value="WF"
+                        >
+                          Wallis and Futuna
+                        </option>
+                        <option
+                          value="EH"
+                        >
+                          Western Sahara
+                        </option>
+                        <option
+                          value="YE"
+                        >
+                          Yemen
+                        </option>
+                        <option
+                          value="ZM"
+                        >
+                          Zambia
+                        </option>
+                        <option
+                          value="ZW"
+                        >
+                          Zimbabwe
+                        </option>
+                      </select>
+                      <div
+                        class="PhoneInputCountrySelectArrow"
+                      />
+                    </div>
+                    <input
+                      autocomplete="tel"
+                      class="PhoneInputInput"
+                      placeholder="Select country code"
+                      type="tel"
+                      value="+1 234 567 890"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="flex flex-col items-start justify-start h-full md:col-span-2"
+                >
+                  <label
+                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                    for="Biography"
+                  >
+                    Biography
+                    <span
+                      class="font-light text-[.7rem] ml-2"
+                    >
+                      *Max(400 chars)
+                    </span>
+                  </label>
+                  <textarea
+                    class="w-full custom-scrollbar resize-none h-full px-4 py-3 text-[.8rem] md:text-[.84rem] text-justify border rounded-[3px] dark:bg-black/45 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700"
+                    cols="20"
+                    id=""
+                    maxlength="400"
+                    name="biography"
+                    placeholder="Add your biography here"
+                    rows="5"
+                  />
+                </div>
+              </div>
+            </div>
+            <button
+              class="w-full xmd:w-[7.7rem] h-8 flex flex-row items-center justify-center my-3 text-[.81rem] md:text-sm font-semibold rounded-[3px]  text-white bg-primary  dark:focus:ring-secondary m-0"
+              type="submit"
+            >
+              ~
+              Update Profile
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="h-full mx-auto font-serif bg-light-bg dark:bg-dark-frame-bg"
+    >
+      <div
+        class="font-serif bg-cover bg-no-repeat bg-defaultCover bg-center bg-fixed h-[28vh] md:h-[26vh] flex flex-row text-center  align-center items-center"
+        style="background-image: url(https://images.unsplash.com/photo-1483168527879-c66136b56105?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3016&q=80);"
+      >
+        <div
+          class="relative"
+        >
+          <img
+            alt="profile-avatar"
+            class="relative w-24 h-24 m-4 ml-6 rounded-full md:w-28 md:h-28 md:ml-20 mt-32 md:mt-12 object-cover"
+            src="[object Object]"
+          />
+          <div
+            class="-right-12 md:-right-16 absolute bottom-7 md:bottom-8"
+            role="button"
+          >
+            <label
+              class="flex items-center md:gap-x-1 px-2 py-[3px] md:py-1 cursor-pointer rounded-[3px] bg-primary text-white hover:bg-[#7a5edc] overflow-hidden"
+            >
+              <svg
+                aria-hidden="true"
+                class="w-[14px] md:w-[15px] dark:text-dark-text-fill"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <span
+                class="text-[.73rem] font-semibold md:text-sm dark:text-dark-text-fill"
+              >
+                <span>
+                  Edit
+                </span>
+              </span>
+              <input
+                class="hidden"
+                data-testid="upload-image"
+                type="file"
+              />
+            </label>
+          </div>
+        </div>
+        <div
+          class="flex items-center justify-center w-full h-screen mt-24 ml-auto bg-grey-lighter"
+        >
+          <label
+            class="flex items-center ml-auto mr-4 rounded-md bg-primary text-white hover:bg-[#7a5edc] p-[6px]  cursor-pointer"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-5 dark:text-dark-text-fill"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <input
+              class="hidden"
+              data-testid="upload-cover"
+              type="file"
+            />
+          </label>
+        </div>
+      </div>
+      <div
+        class="flex flex-wrap mt-6 md:mt-5"
+      >
+        <ul
+          class="flex flex-row flex-wrap pt-3 pb-2 mb-0 text-black list-none dark:text-dark-text-fill text-[.8rem] md:text-[.93rem]"
+          role="tablist"
+        >
+          <li
+            class="flex-auto mr-2 -mb-px text-center last:mr-0"
+            role="button"
+          >
+            <span
+              class="block px-3 md:px-5 py-[6px] md:py-3 font-bold leading-normal uppercase border-b-2 md:border-b-4 rounded shadow-sm  border-b-primary  "
+            >
+              Editing Profile
+            </span>
+          </li>
+          <li
+            class="flex-auto mr-2 -mb-px text-center last:mr-0"
+            role="button"
+          >
+            <span
+              class="block px-3 md:px-5 py-[6px] md:py-3 font-bold leading-normal uppercase border-b-2 md:border-b-4 rounded shadow-sm  false  "
+            >
+              Upload Resume
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="w-full p-4 my-1 bg-indigo-100 border rounded-lg dark:border-dark-bg dark:bg-dark-bg dark:text-white md:my-4 md:p-7"
+      >
+        <button
+          class="btn default md rounded-[3px] bg-primary text-[.78rem] md:text-[.85rem] text-white focus:outline-none px-2 md:px-3 py-[4px] md:py-[6px] m-0 mb-6 font-serif "
+          type="button"
+        >
+           
+          <a
+            class="flex items-center gap-x-1"
+            href="/profile"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-4 dark:text-dark-text-fill"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <span>
+              Back to profile
+            </span>
+          </a>
+        </button>
+        <form
+          class="flex flex-col w-full gap-y-4"
+        >
+          <div
+            class="flex flex-col w-full gap-6 xmd:flex-row lg:gap-10"
+          >
+            <div
+              class="flex flex-col gap-y-3 basis-1/2"
+            >
+              <div
+                class="flex flex-col items-start justify-start font-serif w-full"
+              >
+                <label
+                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                  for="email"
+                >
+                  Email
+                </label>
+                <input
+                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700 bg-gray-100 cursor-not-allowed dark:bg-black/45"
+                  id="email"
+                  name="email"
+                  placeholder="Your email"
+                  readonly=""
+                  type="email"
+                />
+                <div
+                  class="text-[.78rem] md:text-[.83rem]"
+                >
+                  <small
+                    class="text-red-600"
+                  />
+                </div>
+              </div>
+              <div
+                class="flex flex-col items-start justify-start font-serif w-full"
+              >
+                <label
+                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                  for="first-name"
+                >
+                  First Name
+                </label>
+                <input
+                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
+                  id="firstname"
+                  name="firstName"
+                  placeholder="Enter your First Name"
+                  type="text"
+                />
+                <div
+                  class="text-[.78rem] md:text-[.83rem]"
+                >
+                  <small
+                    class="text-red-600"
+                  />
+                </div>
+              </div>
+              <div
+                class="flex flex-col items-start justify-start font-serif w-full"
+              >
+                <label
+                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                  for="lastname"
+                >
+                  Last Name
+                </label>
+                <input
+                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
+                  id="lastname"
+                  name="lastName"
+                  placeholder="Enter your Last Name"
+                  type="text"
+                />
+                <div
+                  class="text-[.78rem] md:text-[.83rem]"
+                >
+                  <small
+                    class="text-red-600"
+                  />
+                </div>
+              </div>
+              <div
+                class="flex flex-col items-start justify-start font-serif w-full"
+              >
+                <label
+                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                  for="github-username"
+                >
+                  Github Username
+                </label>
+                <input
+                  class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
+                  id="github-username"
+                  name="githubUsername"
+                  placeholder="Your Github Username"
+                  type="text"
+                />
+                <div
+                  class="text-[.78rem] md:text-[.83rem]"
+                >
+                  <small
+                    class="text-red-600"
+                  />
+                </div>
+              </div>
+              <div
+                class="flex w-full gap-x-4"
+              >
+                <div
+                  class="flex flex-col items-start justify-start font-serif w-full"
+                >
+                  <label
+                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                    for="address"
+                  >
+                    Address
+                  </label>
+                  <input
+                    class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
+                    id="address"
+                    name="address"
+                    placeholder="Enter your address"
+                    type="text"
+                  />
+                  <div
+                    class="text-[.78rem] md:text-[.83rem]"
+                  >
+                    <small
+                      class="text-red-600"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="flex flex-col items-start justify-start font-serif w-full"
+                >
+                  <label
+                    class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                    for="city"
+                  >
+                    City
+                  </label>
+                  <input
+                    class="text-[.84rem] placeholder:text-[.85rem] rounded-[3px] appearance-none relative block w-full px-3 py-[5px] border border-gray-100 placeholder-gray-700 dark:placeholder-gray-300 text-gray-900 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary focus:z-10 dark:text-dark-text-fill dark:border-neutral-700  dark:bg-black/45"
+                    id="city"
+                    name="city"
+                    placeholder="Enter the City where you live"
+                    type="text"
+                  />
+                  <div
+                    class="text-[.78rem] md:text-[.83rem]"
+                  >
+                    <small
+                      class="text-red-600"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="flex flex-col gap-y-3 basis-1/2"
+            >
+              <div
+                class="flex flex-col items-start justify-start mt-auto font-serif "
+              >
+                <label
+                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem] "
+                  for="Country"
+                >
+                  Country
+                </label>
+                <div
+                  class="w-full"
+                  data-testid="countries"
+                >
+                  <div
+                    class="relative font-serif"
+                  >
+                    <button
+                      aria-expanded="true"
+                      aria-haspopup="listbox"
+                      aria-labelledby="listbox-label"
+                      class="bg-white  dark:bg-black/45 relative w-full border border-gray-300  rounded-[3px] shadow-sm pl-2 pr-1 py-[5px] text-left cursor-default focus:outline-none focus:ring-1  focus:ring-primary focus:border-primary focus:z-10 text-[.8rem] md:text-[.85]  dark:text-dark-text-fill dark:border-neutral-700  darksm:text-sm"
+                      data-testid="country-selector-button"
+                      type="button"
+                    >
+                      <span
+                        class="truncate flex items-center"
+                        data-testid="country-selector-title"
+                      >
+                        <img
+                          alt="AD"
+                          class="inline mr-2 h-3 md:h-4 rounded-sm"
+                          data-testid="country-selector-flag"
+                          src="https://purecatamphetamine.github.io/country-flag-icons/3x2/AD.svg"
+                        />
+                        Andorra
+                      </span>
+                      <span
+                        class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="h-5 w-5 text-gray-400 "
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            clip-rule="evenodd"
+                            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="flex flex-col items-start justify-start"
+              >
+                <label
+                  class="mb-[2px] font-semibold text-[.84rem] md:text-[.87rem]"
+                  for="phoneNumber"
+                >
+                  Phone Number
+                   (Optional)
+                </label>
+                <div
+                  class="w-full phone-input-container custom-phone-input dark:bg-black/45 PhoneInput"
+                >
+                  <div
+                    class="PhoneInputCountry"
+                  >
+                    <select
+                      aria-label="Phone number country"
+                      class="PhoneInputCountrySelect"
+                    >
+                      <option
+                        value="AF"
+                      >
+                        Afghanistan
+                      </option>
+                      <option
+                        value="AX"
+                      >
+                        Åland Islands
+                      </option>
+                      <option
+                        value="AL"
+                      >
+                        Albania
+                      </option>
+                      <option
+                        value="DZ"
+                      >
+                        Algeria
+                      </option>
+                      <option
+                        value="AS"
+                      >
+                        American Samoa
+                      </option>
+                      <option
+                        value="AD"
+                      >
+                        Andorra
+                      </option>
+                      <option
+                        value="AO"
+                      >
+                        Angola
+                      </option>
+                      <option
+                        value="AI"
+                      >
+                        Anguilla
+                      </option>
+                      <option
+                        value="AG"
+                      >
+                        Antigua and Barbuda
+                      </option>
+                      <option
+                        value="AR"
+                      >
+                        Argentina
+                      </option>
+                      <option
+                        value="AM"
+                      >
+                        Armenia
+                      </option>
+                      <option
+                        value="AW"
+                      >
+                        Aruba
+                      </option>
+                      <option
+                        value="AC"
+                      >
+                        Ascension Island
+                      </option>
+                      <option
+                        value="AU"
+                      >
+                        Australia
+                      </option>
+                      <option
+                        value="AT"
+                      >
+                        Austria
+                      </option>
+                      <option
+                        value="AZ"
+                      >
+                        Azerbaijan
+                      </option>
+                      <option
+                        value="BS"
+                      >
+                        Bahamas
+                      </option>
+                      <option
+                        value="BH"
+                      >
+                        Bahrain
+                      </option>
+                      <option
+                        value="BD"
+                      >
+                        Bangladesh
+                      </option>
+                      <option
+                        value="BB"
+                      >
+                        Barbados
+                      </option>
+                      <option
+                        value="BY"
+                      >
+                        Belarus
+                      </option>
+                      <option
+                        value="BE"
+                      >
+                        Belgium
+                      </option>
+                      <option
+                        value="BZ"
+                      >
+                        Belize
+                      </option>
+                      <option
+                        value="BJ"
+                      >
+                        Benin
+                      </option>
+                      <option
+                        value="BM"
+                      >
+                        Bermuda
+                      </option>
+                      <option
+                        value="BT"
+                      >
+                        Bhutan
+                      </option>
+                      <option
+                        value="BO"
+                      >
+                        Bolivia
+                      </option>
+                      <option
+                        value="BQ"
+                      >
+                        Bonaire, Sint Eustatius and Saba
+                      </option>
+                      <option
+                        value="BA"
+                      >
+                        Bosnia and Herzegovina
+                      </option>
+                      <option
+                        value="BW"
+                      >
+                        Botswana
+                      </option>
+                      <option
+                        value="BR"
+                      >
+                        Brazil
+                      </option>
+                      <option
+                        value="IO"
+                      >
+                        British Indian Ocean Territory
+                      </option>
+                      <option
+                        value="BN"
+                      >
+                        Brunei Darussalam
+                      </option>
+                      <option
+                        value="BG"
+                      >
+                        Bulgaria
+                      </option>
+                      <option
+                        value="BF"
+                      >
+                        Burkina Faso
+                      </option>
+                      <option
+                        value="BI"
+                      >
+                        Burundi
+                      </option>
+                      <option
+                        value="KH"
+                      >
+                        Cambodia
+                      </option>
+                      <option
+                        value="CM"
+                      >
+                        Cameroon
+                      </option>
+                      <option
+                        value="CA"
+                      >
+                        Canada
+                      </option>
+                      <option
+                        value="CV"
+                      >
+                        Cape Verde
+                      </option>
+                      <option
+                        value="KY"
+                      >
+                        Cayman Islands
+                      </option>
+                      <option
+                        value="CF"
+                      >
+                        Central African Republic
+                      </option>
+                      <option
+                        value="TD"
+                      >
+                        Chad
+                      </option>
+                      <option
+                        value="CL"
+                      >
+                        Chile
+                      </option>
+                      <option
+                        value="CN"
+                      >
+                        China
+                      </option>
+                      <option
+                        value="CX"
+                      >
+                        Christmas Island
+                      </option>
+                      <option
+                        value="CC"
+                      >
+                        Cocos (Keeling) Islands
+                      </option>
+                      <option
+                        value="CO"
+                      >
+                        Colombia
+                      </option>
+                      <option
+                        value="KM"
+                      >
+                        Comoros
+                      </option>
+                      <option
+                        value="CG"
+                      >
+                        Congo
+                      </option>
+                      <option
+                        value="CD"
+                      >
+                        Congo, Democratic Republic of the
+                      </option>
+                      <option
+                        value="CK"
+                      >
+                        Cook Islands
+                      </option>
+                      <option
+                        value="CR"
+                      >
+                        Costa Rica
+                      </option>
+                      <option
+                        value="CI"
+                      >
+                        Cote d'Ivoire
+                      </option>
+                      <option
+                        value="HR"
+                      >
+                        Croatia
+                      </option>
+                      <option
+                        value="CU"
+                      >
+                        Cuba
+                      </option>
+                      <option
+                        value="CW"
+                      >
+                        Curaçao
+                      </option>
+                      <option
+                        value="CY"
+                      >
+                        Cyprus
+                      </option>
+                      <option
+                        value="CZ"
+                      >
+                        Czech Republic
+                      </option>
+                      <option
+                        value="DK"
+                      >
+                        Denmark
+                      </option>
+                      <option
+                        value="DJ"
+                      >
+                        Djibouti
+                      </option>
+                      <option
+                        value="DM"
+                      >
+                        Dominica
+                      </option>
+                      <option
+                        value="DO"
+                      >
+                        Dominican Republic
+                      </option>
+                      <option
+                        value="EC"
+                      >
+                        Ecuador
+                      </option>
+                      <option
+                        value="EG"
+                      >
+                        Egypt
+                      </option>
+                      <option
+                        value="SV"
+                      >
+                        El Salvador
+                      </option>
+                      <option
+                        value="GQ"
+                      >
+                        Equatorial Guinea
+                      </option>
+                      <option
+                        value="ER"
+                      >
+                        Eritrea
+                      </option>
+                      <option
+                        value="EE"
+                      >
+                        Estonia
+                      </option>
+                      <option
+                        value="ET"
+                      >
+                        Ethiopia
+                      </option>
+                      <option
+                        value="FK"
+                      >
+                        Falkland Islands
+                      </option>
+                      <option
+                        value="FO"
+                      >
+                        Faroe Islands
+                      </option>
+                      <option
+                        value="FM"
+                      >
+                        Federated States of Micronesia
+                      </option>
+                      <option
+                        value="FJ"
+                      >
+                        Fiji
+                      </option>
+                      <option
+                        value="FI"
+                      >
+                        Finland
+                      </option>
+                      <option
+                        value="FR"
+                      >
+                        France
+                      </option>
+                      <option
+                        value="GF"
+                      >
+                        French Guiana
+                      </option>
+                      <option
+                        value="PF"
+                      >
+                        French Polynesia
+                      </option>
+                      <option
+                        value="GA"
+                      >
+                        Gabon
+                      </option>
+                      <option
+                        value="GM"
+                      >
+                        Gambia
+                      </option>
+                      <option
+                        value="GE"
+                      >
+                        Georgia
+                      </option>
+                      <option
+                        value="DE"
+                      >
+                        Germany
+                      </option>
+                      <option
+                        value="GH"
+                      >
+                        Ghana
+                      </option>
+                      <option
+                        value="GI"
+                      >
+                        Gibraltar
+                      </option>
+                      <option
+                        value="GR"
+                      >
+                        Greece
+                      </option>
+                      <option
+                        value="GL"
+                      >
+                        Greenland
+                      </option>
+                      <option
+                        value="GD"
+                      >
+                        Grenada
+                      </option>
+                      <option
+                        value="GP"
+                      >
+                        Guadeloupe
+                      </option>
+                      <option
+                        value="GU"
+                      >
+                        Guam
+                      </option>
+                      <option
+                        value="GT"
+                      >
+                        Guatemala
+                      </option>
+                      <option
+                        value="GG"
+                      >
+                        Guernsey
+                      </option>
+                      <option
+                        value="GN"
+                      >
+                        Guinea
+                      </option>
+                      <option
+                        value="GW"
+                      >
+                        Guinea-Bissau
+                      </option>
+                      <option
+                        value="GY"
+                      >
+                        Guyana
+                      </option>
+                      <option
+                        value="HT"
+                      >
+                        Haiti
+                      </option>
+                      <option
+                        value="VA"
+                      >
+                        Holy See (Vatican City State)
+                      </option>
+                      <option
+                        value="HN"
+                      >
+                        Honduras
+                      </option>
+                      <option
+                        value="HK"
+                      >
+                        Hong Kong
+                      </option>
+                      <option
+                        value="HU"
+                      >
+                        Hungary
+                      </option>
+                      <option
+                        value="IS"
+                      >
+                        Iceland
+                      </option>
+                      <option
+                        value="IN"
+                      >
+                        India
+                      </option>
+                      <option
+                        value="ID"
+                      >
+                        Indonesia
+                      </option>
+                      <option
+                        value="IR"
+                      >
+                        Iran
+                      </option>
+                      <option
+                        value="IQ"
+                      >
+                        Iraq
+                      </option>
+                      <option
+                        value="IE"
+                      >
+                        Ireland
+                      </option>
+                      <option
+                        value="IM"
+                      >
+                        Isle of Man
+                      </option>
+                      <option
+                        value="IL"
+                      >
+                        Israel
+                      </option>
+                      <option
+                        value="IT"
+                      >
+                        Italy
+                      </option>
+                      <option
+                        value="JM"
+                      >
+                        Jamaica
+                      </option>
+                      <option
+                        value="JP"
+                      >
+                        Japan
+                      </option>
+                      <option
+                        value="JE"
+                      >
+                        Jersey
+                      </option>
+                      <option
+                        value="JO"
+                      >
+                        Jordan
+                      </option>
+                      <option
+                        value="KZ"
+                      >
+                        Kazakhstan
+                      </option>
+                      <option
+                        value="KE"
+                      >
+                        Kenya
+                      </option>
+                      <option
+                        value="KI"
+                      >
+                        Kiribati
+                      </option>
+                      <option
+                        value="XK"
+                      >
+                        Kosovo
+                      </option>
+                      <option
+                        value="KW"
+                      >
+                        Kuwait
+                      </option>
+                      <option
+                        value="KG"
+                      >
+                        Kyrgyzstan
+                      </option>
+                      <option
+                        value="LA"
+                      >
+                        Laos
+                      </option>
+                      <option
+                        value="LV"
+                      >
+                        Latvia
+                      </option>
+                      <option
+                        value="LB"
+                      >
+                        Lebanon
+                      </option>
+                      <option
+                        value="LS"
+                      >
+                        Lesotho
+                      </option>
+                      <option
+                        value="LR"
+                      >
+                        Liberia
+                      </option>
+                      <option
+                        value="LY"
+                      >
+                        Libya
+                      </option>
+                      <option
+                        value="LI"
+                      >
+                        Liechtenstein
+                      </option>
+                      <option
+                        value="LT"
+                      >
+                        Lithuania
+                      </option>
+                      <option
+                        value="LU"
+                      >
+                        Luxembourg
+                      </option>
+                      <option
+                        value="MO"
+                      >
+                        Macao
+                      </option>
+                      <option
+                        value="MG"
+                      >
+                        Madagascar
+                      </option>
+                      <option
+                        value="MW"
+                      >
+                        Malawi
+                      </option>
+                      <option
+                        value="MY"
+                      >
+                        Malaysia
+                      </option>
+                      <option
+                        value="MV"
+                      >
+                        Maldives
+                      </option>
+                      <option
+                        value="ML"
+                      >
+                        Mali
+                      </option>
+                      <option
+                        value="MT"
+                      >
+                        Malta
+                      </option>
+                      <option
+                        value="MH"
+                      >
+                        Marshall Islands
+                      </option>
+                      <option
+                        value="MQ"
+                      >
+                        Martinique
+                      </option>
+                      <option
+                        value="MR"
+                      >
+                        Mauritania
+                      </option>
+                      <option
+                        value="MU"
+                      >
+                        Mauritius
+                      </option>
+                      <option
+                        value="YT"
+                      >
+                        Mayotte
+                      </option>
+                      <option
+                        value="MX"
+                      >
+                        Mexico
+                      </option>
+                      <option
+                        value="MD"
+                      >
+                        Moldova
+                      </option>
+                      <option
+                        value="MC"
+                      >
+                        Monaco
+                      </option>
+                      <option
+                        value="MN"
+                      >
+                        Mongolia
+                      </option>
+                      <option
+                        value="ME"
+                      >
+                        Montenegro
+                      </option>
+                      <option
+                        value="MS"
+                      >
+                        Montserrat
+                      </option>
+                      <option
+                        value="MA"
+                      >
+                        Morocco
+                      </option>
+                      <option
+                        value="MZ"
+                      >
+                        Mozambique
+                      </option>
+                      <option
+                        value="MM"
+                      >
+                        Myanmar
+                      </option>
+                      <option
+                        value="NA"
+                      >
+                        Namibia
+                      </option>
+                      <option
+                        value="NR"
+                      >
+                        Nauru
+                      </option>
+                      <option
+                        value="NP"
+                      >
+                        Nepal
+                      </option>
+                      <option
+                        value="NL"
+                      >
+                        Netherlands
+                      </option>
+                      <option
+                        value="NC"
+                      >
+                        New Caledonia
+                      </option>
+                      <option
+                        value="NZ"
+                      >
+                        New Zealand
+                      </option>
+                      <option
+                        value="NI"
+                      >
+                        Nicaragua
+                      </option>
+                      <option
+                        value="NE"
+                      >
+                        Niger
+                      </option>
+                      <option
+                        value="NG"
+                      >
+                        Nigeria
+                      </option>
+                      <option
+                        value="NU"
+                      >
+                        Niue
+                      </option>
+                      <option
+                        value="NF"
+                      >
+                        Norfolk Island
+                      </option>
+                      <option
+                        value="KP"
+                      >
+                        North Korea
+                      </option>
+                      <option
+                        value="MK"
+                      >
+                        North Macedonia
+                      </option>
+                      <option
+                        value="MP"
+                      >
+                        Northern Mariana Islands
+                      </option>
+                      <option
+                        value="NO"
+                      >
+                        Norway
+                      </option>
+                      <option
+                        value="OM"
+                      >
+                        Oman
+                      </option>
+                      <option
+                        value="PK"
+                      >
+                        Pakistan
+                      </option>
+                      <option
+                        value="PW"
+                      >
+                        Palau
+                      </option>
+                      <option
+                        value="PS"
+                      >
+                        Palestine
+                      </option>
+                      <option
+                        value="PA"
+                      >
+                        Panama
+                      </option>
+                      <option
+                        value="PG"
+                      >
+                        Papua New Guinea
+                      </option>
+                      <option
+                        value="PY"
+                      >
+                        Paraguay
+                      </option>
+                      <option
+                        value="PE"
+                      >
+                        Peru
+                      </option>
+                      <option
+                        value="PH"
+                      >
+                        Philippines
+                      </option>
+                      <option
+                        value="PL"
+                      >
+                        Poland
+                      </option>
+                      <option
+                        value="PT"
+                      >
+                        Portugal
+                      </option>
+                      <option
+                        value="PR"
+                      >
+                        Puerto Rico
+                      </option>
+                      <option
+                        value="QA"
+                      >
+                        Qatar
+                      </option>
+                      <option
+                        value="RE"
+                      >
+                        Reunion
+                      </option>
+                      <option
+                        value="RO"
+                      >
+                        Romania
+                      </option>
+                      <option
+                        value="RU"
+                      >
+                        Russia
+                      </option>
+                      <option
+                        value="RW"
+                      >
+                        Rwanda
+                      </option>
+                      <option
+                        value="BL"
+                      >
+                        Saint Barthélemy
+                      </option>
+                      <option
+                        value="SH"
+                      >
+                        Saint Helena
+                      </option>
+                      <option
+                        value="KN"
+                      >
+                        Saint Kitts and Nevis
+                      </option>
+                      <option
+                        value="LC"
+                      >
+                        Saint Lucia
+                      </option>
+                      <option
+                        value="MF"
+                      >
+                        Saint Martin (French Part)
+                      </option>
+                      <option
+                        value="PM"
+                      >
+                        Saint Pierre and Miquelon
+                      </option>
+                      <option
+                        value="VC"
+                      >
+                        Saint Vincent and the Grenadines
+                      </option>
+                      <option
+                        value="WS"
+                      >
+                        Samoa
+                      </option>
+                      <option
+                        value="SM"
+                      >
+                        San Marino
+                      </option>
+                      <option
+                        value="ST"
+                      >
+                        Sao Tome and Principe
+                      </option>
+                      <option
+                        value="SA"
+                      >
+                        Saudi Arabia
+                      </option>
+                      <option
+                        value="SN"
+                      >
+                        Senegal
+                      </option>
+                      <option
+                        value="RS"
+                      >
+                        Serbia
+                      </option>
+                      <option
+                        value="SC"
+                      >
+                        Seychelles
+                      </option>
+                      <option
+                        value="SL"
+                      >
+                        Sierra Leone
+                      </option>
+                      <option
+                        value="SG"
+                      >
+                        Singapore
+                      </option>
+                      <option
+                        value="SX"
+                      >
+                        Sint Maarten
+                      </option>
+                      <option
+                        value="SK"
+                      >
+                        Slovakia
+                      </option>
+                      <option
+                        value="SI"
+                      >
+                        Slovenia
+                      </option>
+                      <option
+                        value="SB"
+                      >
+                        Solomon Islands
+                      </option>
+                      <option
+                        value="SO"
+                      >
+                        Somalia
+                      </option>
+                      <option
+                        value="ZA"
+                      >
+                        South Africa
+                      </option>
+                      <option
+                        value="KR"
+                      >
+                        South Korea
+                      </option>
+                      <option
+                        value="SS"
+                      >
+                        South Sudan
+                      </option>
+                      <option
+                        value="ES"
+                      >
+                        Spain
+                      </option>
+                      <option
+                        value="LK"
+                      >
+                        Sri Lanka
+                      </option>
+                      <option
+                        value="SD"
+                      >
+                        Sudan
+                      </option>
+                      <option
+                        value="SR"
+                      >
+                        Suriname
+                      </option>
+                      <option
+                        value="SJ"
+                      >
+                        Svalbard and Jan Mayen
+                      </option>
+                      <option
+                        value="SZ"
+                      >
+                        Swaziland
+                      </option>
+                      <option
+                        value="SE"
+                      >
+                        Sweden
+                      </option>
+                      <option
+                        value="CH"
+                      >
+                        Switzerland
+                      </option>
+                      <option
+                        value="SY"
+                      >
+                        Syria
+                      </option>
+                      <option
+                        value="TW"
+                      >
+                        Taiwan
+                      </option>
+                      <option
+                        value="TJ"
+                      >
+                        Tajikistan
+                      </option>
+                      <option
+                        value="TZ"
+                      >
+                        Tanzania
+                      </option>
+                      <option
+                        value="TH"
+                      >
+                        Thailand
+                      </option>
+                      <option
+                        value="TL"
+                      >
+                        Timor-Leste
+                      </option>
+                      <option
+                        value="TG"
+                      >
+                        Togo
+                      </option>
+                      <option
+                        value="TK"
+                      >
+                        Tokelau
+                      </option>
+                      <option
+                        value="TO"
+                      >
+                        Tonga
+                      </option>
+                      <option
+                        value="TT"
+                      >
+                        Trinidad and Tobago
+                      </option>
+                      <option
+                        value="TA"
+                      >
+                        Tristan da Cunha
+                      </option>
+                      <option
+                        value="TN"
+                      >
+                        Tunisia
+                      </option>
+                      <option
+                        value="TR"
+                      >
+                        Turkey
+                      </option>
+                      <option
+                        value="TM"
+                      >
+                        Turkmenistan
+                      </option>
+                      <option
+                        value="TC"
+                      >
+                        Turks and Caicos Islands
+                      </option>
+                      <option
+                        value="TV"
+                      >
+                        Tuvalu
+                      </option>
+                      <option
+                        value="UG"
+                      >
+                        Uganda
+                      </option>
+                      <option
+                        value="UA"
+                      >
+                        Ukraine
+                      </option>
+                      <option
+                        value="AE"
+                      >
+                        United Arab Emirates
+                      </option>
+                      <option
+                        value="GB"
+                      >
+                        United Kingdom
+                      </option>
+                      <option
+                        value="US"
+                      >
+                        United States
+                      </option>
+                      <option
+                        value="UY"
+                      >
+                        Uruguay
+                      </option>
+                      <option
+                        value="UZ"
+                      >
+                        Uzbekistan
+                      </option>
+                      <option
+                        value="VU"
+                      >
+                        Vanuatu
+                      </option>
+                      <option
+                        value="VE"
+                      >
+                        Venezuela
+                      </option>
+                      <option
+                        value="VN"
+                      >
+                        Vietnam
+                      </option>
+                      <option
+                        value="VG"
+                      >
+                        Virgin Islands, British
+                      </option>
+                      <option
+                        value="VI"
+                      >
+                        Virgin Islands, U.S.
+                      </option>
+                      <option
+                        value="WF"
+                      >
+                        Wallis and Futuna
+                      </option>
+                      <option
+                        value="EH"
+                      >
+                        Western Sahara
+                      </option>
+                      <option
+                        value="YE"
+                      >
+                        Yemen
+                      </option>
+                      <option
+                        value="ZM"
+                      >
+                        Zambia
+                      </option>
+                      <option
+                        value="ZW"
+                      >
+                        Zimbabwe
+                      </option>
+                    </select>
+                    <div
+                      class="PhoneInputCountrySelectArrow"
+                    />
+                  </div>
+                  <input
+                    autocomplete="tel"
+                    class="PhoneInputInput"
+                    placeholder="Select country code"
+                    type="tel"
+                    value="+1 234 567 890"
+                  />
                 </div>
               </div>
               <div
@@ -1260,6 +3780,7 @@ exports[`Profile Page Renders the others role profile tabs 1`] = `
                   onBlur={[Function]}
                   onChange={[Function]}
                   placeholder="Enter your current password"
+                  readOnly={false}
                   type="passsword"
                 />
                 <div
@@ -1286,6 +3807,7 @@ exports[`Profile Page Renders the others role profile tabs 1`] = `
                   onBlur={[Function]}
                   onChange={[Function]}
                   placeholder="Enter new password"
+                  readOnly={false}
                   type="password"
                 />
                 <div
@@ -1312,6 +3834,7 @@ exports[`Profile Page Renders the others role profile tabs 1`] = `
                   onBlur={[Function]}
                   onChange={[Function]}
                   placeholder="Re-enter the new password"
+                  readOnly={false}
                   type="password"
                 />
                 <div
@@ -1786,6 +4309,7 @@ exports[`Profile Page Renders the superAdmin profile tabs 1`] = `
                   onBlur={[Function]}
                   onChange={[Function]}
                   placeholder="Enter your current password"
+                  readOnly={false}
                   type="passsword"
                 />
                 <div
@@ -1812,6 +4336,7 @@ exports[`Profile Page Renders the superAdmin profile tabs 1`] = `
                   onBlur={[Function]}
                   onChange={[Function]}
                   placeholder="Enter new password"
+                  readOnly={false}
                   type="password"
                 />
                 <div
@@ -1838,6 +4363,7 @@ exports[`Profile Page Renders the superAdmin profile tabs 1`] = `
                   onBlur={[Function]}
                   onChange={[Function]}
                   placeholder="Re-enter the new password"
+                  readOnly={false}
                   type="password"
                 />
                 <div
diff --git a/tests/pages/__snapshots__/TraineeAttendanceTracker.test.tsx.snap b/tests/pages/__snapshots__/TraineeAttendanceTracker.test.tsx.snap
index 318a701ea..2549a60bf 100644
--- a/tests/pages/__snapshots__/TraineeAttendanceTracker.test.tsx.snap
+++ b/tests/pages/__snapshots__/TraineeAttendanceTracker.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
 <div
-  className="bg-tertiary dark:bg-dark-bg p-5 xmd:p-10 rounded-lg font-serif"
+  className="bg-tertiary dark:bg-dark-bg p-5 xmd:p-7 md:p-10 rounded-lg font-serif"
 >
   <div
     className=""
@@ -22,7 +22,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
       >
         <div>
           <p
-            className="text-[.9rem] xmd:text-[.95rem]"
+            className="text-[.9rem] xmd:text-[.95rem] font-medium -mb-[2px]"
           >
             Team
           </p>
@@ -34,7 +34,14 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
               data-testid="team-test"
               onChange={[Function]}
               value=""
-            />
+            >
+              <option
+                disabled={true}
+                value=""
+              >
+                No teams
+              </option>
+            </select>
           </div>
         </div>
         <button
@@ -48,13 +55,13 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
         </button>
       </div>
       <div
-        className="flex justify-between mt-5"
+        className="flex justify-between items-end mt-5"
       >
         <div
-          className="flex"
+          className="flex flex-shrink-0 w-32 xm:w-44 xmd:w-[70%] overflow-x-scroll xmd:overflow-x-auto  xmd:custom-scrollbar"
         />
         <div
-          className="flex items-center pl-2 pr-1 h-[1.85rem] xmd:h-8 w-24 xmd:w-28 rounded-[4px] border dark:border-white border-black text-black dark:text-white text-[.86rem] xmd:text-[.9rem]"
+          className="flex items-center pl-2 pr-1 h-[1.85rem] xmd:h-8 w-24 xmd:w-28 rounded-[4px] border dark:border-white border-black text-black dark:text-white text-[.84rem] xmd:text-[.9rem]"
         >
           <span>
             Week:
@@ -69,10 +76,10 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
         </div>
       </div>
       <div
-        className="flex justify-between items-center border border-neutral-400/60 dark:border-neutral-600 h-[1.85rem] xmd:h-9 text-[.88rem] xmd:text-base"
+        className="flex justify-between items-center border-2 border-neutral-400/60 dark:border-neutral-600 h-[1.85rem] xmd:h-9 text-[.83rem] xmd:text-base"
       >
         <div
-          className="bg-neutral-400/60 dark:bg-neutral-600 flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
+          className="bg-neutral-400/60 dark:bg-neutral-600 flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
           data-testid="days-test"
           onClick={[Function]}
         >
@@ -81,7 +88,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
           </span>
         </div>
         <div
-          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
+          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
           data-testid="days-test"
           onClick={[Function]}
         >
@@ -90,7 +97,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
           </span>
         </div>
         <div
-          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
+          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
           data-testid="days-test"
           onClick={[Function]}
         >
@@ -99,7 +106,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
           </span>
         </div>
         <div
-          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
+          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
           data-testid="days-test"
           onClick={[Function]}
         >
@@ -108,7 +115,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
           </span>
         </div>
         <div
-          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
+          className="hover:bg-neutral-400/20 dark:hover:bg-neutral-400/15 flex justify-center items-center basis-1/5 capitalize border-l-2 border-neutral-400/60 dark:border-neutral-600 cursor-pointer h-full"
           data-testid="days-test"
           onClick={[Function]}
         >
@@ -133,7 +140,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
               onClick={[Function]}
             >
               <svg
-                className="text-xl"
+                className="text-lg"
                 fill="none"
                 height="1em"
                 stroke="currentColor"
@@ -173,7 +180,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
               onClick={[Function]}
             >
               <svg
-                className="text-xl"
+                className="text-lg"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
@@ -192,6 +199,30 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
                 />
               </svg>
             </div>
+            <div
+              className="flex gap-x-[5px] items-center cursor-pointer"
+              onClick={[Function]}
+            >
+              <svg
+                className="text-[1.12rem]"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                strokeWidth="0"
+                style={
+                  Object {
+                    "color": undefined,
+                  }
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"
+                />
+              </svg>
+            </div>
           </div>
         </div>
         <div
@@ -202,20 +233,20 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
           >
             <thead>
               <tr
-                className="bg-neutral-400/60 dark:bg-neutral-600 h-10 text-[.88rem] xmd:text-base"
+                className="bg-neutral-400/60 dark:bg-neutral-600 h-8 xmd:h-10 text-[.84rem] xmd:text-base"
               >
                 <th
-                  className="w-[40%] text-left pl-2 xmd:pl-10"
+                  className="w-[40%] text-left pl-2 xmd:pl-10 font-semibold"
                 >
                   Names
                 </th>
                 <th
-                  className="w-[40%] text-left pl-2 xmd:pl-10"
+                  className="w-[40%] text-left pl-2 xmd:pl-10 font-semibold"
                 >
                   Email
                 </th>
                 <th
-                  className="w-[20%]"
+                  className="w-[20%] font-semibold"
                 >
                   Score
                 </th>
@@ -226,7 +257,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
             >
               <tr>
                 <td
-                  className="text-center h-20"
+                  className="text-center h-28"
                   colSpan={3}
                 >
                   There is no attendance for the selected day
@@ -240,7 +271,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
         className="flex justify-between"
       >
         <div
-          className="hidden xmd:flex flex-col text-[.9rem] gap-2 capitalize"
+          className="hidden xmd:flex flex-col text-[.78rem] md:text-[.84rem] gap-2 capitalize"
         >
           <h2
             className="mb-1 font-semibold"
@@ -248,12 +279,12 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
             ATTENDANCE ACTIONS
           </h2>
           <div
-            className="flex gap-x-1 items-center ml-4 cursor-pointer"
+            className="flex gap-x-1 items-center ml-4 cursor-pointer hover:text-primary font-medium"
             data-testid="update-link-2"
             onClick={[Function]}
           >
             <svg
-              className="text-lg"
+              className="text-[1.1rem]"
               fill="none"
               height="1em"
               stroke="currentColor"
@@ -294,12 +325,12 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
             </span>
           </div>
           <div
-            className="flex gap-x-1 items-center ml-4 cursor-pointer"
+            className="flex gap-x-1 items-center ml-4 cursor-pointer hover:text-primary font-medium"
             data-testid="delete-btn-test"
             onClick={[Function]}
           >
             <svg
-              className="text-xl"
+              className="text-[1.15rem]"
               fill="currentColor"
               height="1em"
               stroke="currentColor"
@@ -321,18 +352,45 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
               Delete Attendance (mon)
             </span>
           </div>
+          <div
+            className="flex gap-x-[5px] items-center ml-4 cursor-pointer hover:text-primary font-medium leading-3"
+            onClick={[Function]}
+          >
+            <svg
+              className="text-[1.125rem]"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              strokeWidth="0"
+              style={
+                Object {
+                  "color": undefined,
+                }
+              }
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"
+              />
+            </svg>
+            <span>
+              Resume Attendance
+            </span>
+          </div>
         </div>
         <div
-          className="flex flex-col gap-2 text-sm tracking-tight"
+          className="flex flex-col gap-2 text-[.8rem] xmd:text-[.83rem] md:text-sm tracking-tight ml-2 xmd:ml-0"
         >
           <div
             className="flex gap-x-1 items-center"
           >
             <div
-              className="bg-[#0E8E0B] flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-white"
+              className="bg-[#0E8E0B] flex items-center justify-center w-[1.3rem] h-[1.3rem] md:w-[1.5rem] md:h-[1.5rem] rounded-full text-white"
             >
               <svg
-                className="text-[.8rem]"
+                className="mt-[.1rem] md:mt-0 text-[.75rem] md:text-[.8rem]"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
@@ -359,7 +417,7 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
             className="flex gap-x-1 items-center "
           >
             <div
-              className="bg-[#FE8903] flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-white"
+              className="bg-[#FE8903] flex items-center justify-center w-[1.3rem] h-[1.3rem] md:w-[1.5rem] md:h-[1.5rem] rounded-full text-white"
             >
               <img
                 alt=""
@@ -374,10 +432,10 @@ exports[`CRUD Of Trainee Attendance Renders the TraineeAttendance Page 1`] = `
             className="flex gap-x-1 items-center"
           >
             <div
-              className="bg-[#C30909] flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-white"
+              className="bg-[#C30909] flex items-center justify-center w-[1.3rem] h-[1.3rem] md:w-[1.5rem] md:h-[1.5rem] rounded-full text-white"
             >
               <svg
-                className="text-base"
+                className="-ml-[.1rem] md:ml-0 text-[.93rem] md:text-base"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
diff --git a/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap b/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap
index d7161d14f..314198bc9 100644
--- a/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap
+++ b/tests/pages/__snapshots__/TraineeRatingDashboard.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                   className="mt-10 "
                 >
                   <div
-                    className="font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] \\"lg:ml-60 mx-auto\\"} mb-10"
+                    className="relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] \\"lg:ml-60 mx-auto\\"} mb-10"
                   >
                     <div
                       className="flex items-center justify-between pb-6 "
@@ -290,12 +290,24 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                         <tbody
                           role="rowgroup"
                         >
+                          <tr>
+                            <td
+                              className="p-4 text-center h-24"
+                              colSpan={9}
+                            >
+                              <p
+                                className="text-lg font-medium text-gray-600 dark:text-gray-400 pt-8"
+                              >
+                                No records available
+                              </p>
+                            </td>
+                          </tr>
                           <tr>
                             <td
                               className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300 "
                               colSpan={9}
                             >
-                              A Loading...
+                              Loading...
                             </td>
                           </tr>
                         </tbody>
@@ -320,14 +332,14 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                                 colSpan={9}
                               >
                                 <div
-                                  className="flex flex-row items-center justify-between w-full mx-auto"
+                                  className="flex flex-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto"
                                 >
                                   <div
-                                    className="flex"
+                                    className="flex mb-4 sm:-ml-7 -ml-7 lg:mb-0 mr-auto "
                                   >
                                     <button
                                       aria-label="left-arrow"
-                                      className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                                      className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                                       disabled={true}
                                       onClick={[Function]}
                                       type="button"
@@ -352,7 +364,7 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                                      
                                     <button
                                       aria-label="right-arrow"
-                                      className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                                      className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                                       disabled={true}
                                       onClick={[Function]}
                                       type="button"
@@ -377,10 +389,10 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                                      
                                   </div>
                                   <div
-                                    className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center"
+                                    className="flex flex-row relative md:ml-80 lg:flex-row   justify-center items-baseline w-full lg:w-1/3 w-1/2 text-xs lg:text-md  mx-2 -mr-5"
                                   >
                                     <span
-                                      className="inline-block mx-2"
+                                      className="flex justify-center sm:w-[50%] w-[70%] lg:mb-0"
                                     >
                                       Page
                                        
@@ -391,75 +403,85 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                                       </strong>
                                        
                                     </span>
-                                    <span
-                                      className="inline-block mx-2"
-                                    >
-                                      | Go to page:
-                                       
-                                      <input
-                                        className="pl-1 border rounded-md outline-none appearance-none  border-primary dark:bg-primary"
-                                        defaultValue={1}
-                                        onChange={[Function]}
-                                        style={
-                                          Object {
-                                            "border": "solid 0.1rem #9e85f5",
-                                            "height": "30px",
-                                            "paddingLeft": "1.2rem",
-                                            "width": "50px",
-                                          }
-                                        }
-                                        type="number"
-                                      />
-                                    </span>
-                                     
-                                    <select
-                                      className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
-                                      onChange={[Function]}
-                                      style={
-                                        Object {
-                                          "border": "solid 0.1rem #9e85f5",
-                                          "height": "30px",
-                                        }
-                                      }
-                                      value={3}
+                                    <div
+                                      className="flex flex-row sm:justify-center justify-end items-center w-full"
                                     >
-                                      <option
-                                        value={3}
-                                      >
-                                        Show 
-                                        3
-                                      </option>
-                                      <option
-                                        value={5}
-                                      >
-                                        Show 
-                                        5
-                                      </option>
-                                      <option
-                                        value={10}
+                                      <div
+                                        className="hidden lg:flex items-center mx-2 mb-2 lg:mb-0"
                                       >
-                                        Show 
-                                        10
-                                      </option>
-                                      <option
-                                        value={25}
-                                      >
-                                        Show 
-                                        25
-                                      </option>
-                                      <option
-                                        value={50}
-                                      >
-                                        Show 
-                                        50
-                                      </option>
-                                      <option
-                                        value={100}
+                                        <span
+                                          className="mr-1"
+                                        >
+                                          | Go to page: 
+                                        </span>
+                                        <input
+                                          className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
+                                          defaultValue={1}
+                                          onChange={[Function]}
+                                          style={
+                                            Object {
+                                              "border": "solid 0.1rem #9e85f5",
+                                              "height": "30px",
+                                              "paddingLeft": "1.2rem",
+                                              "width": "50px",
+                                            }
+                                          }
+                                          type="number"
+                                        />
+                                      </div>
+                                      <div
+                                        className="flex items-center sm:mx-2 mx-0 mb-2 lg:mb-0 "
                                       >
-                                        Show 
-                                        100
-                                      </option>
-                                    </select>
+                                        <select
+                                          className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
+                                          onChange={[Function]}
+                                          style={
+                                            Object {
+                                              "border": "solid 0.1rem #9e85f5",
+                                              "height": "30px",
+                                            }
+                                          }
+                                          value={3}
+                                        >
+                                          <option
+                                            value={3}
+                                          >
+                                            Show 
+                                            3
+                                          </option>
+                                          <option
+                                            value={5}
+                                          >
+                                            Show 
+                                            5
+                                          </option>
+                                          <option
+                                            value={10}
+                                          >
+                                            Show 
+                                            10
+                                          </option>
+                                          <option
+                                            value={25}
+                                          >
+                                            Show 
+                                            25
+                                          </option>
+                                          <option
+                                            value={50}
+                                          >
+                                            Show 
+                                            50
+                                          </option>
+                                          <option
+                                            value={100}
+                                          >
+                                            Show 
+                                            100
+                                          </option>
+                                        </select>
+                                      </div>
+                                    </div>
                                   </div>
                                 </div>
                               </td>
diff --git a/tests/pages/__snapshots__/UpdateTraineeRating.test.tsx.snap b/tests/pages/__snapshots__/UpdateTraineeRating.test.tsx.snap
index a872f3f5b..7c5b008ab 100644
--- a/tests/pages/__snapshots__/UpdateTraineeRating.test.tsx.snap
+++ b/tests/pages/__snapshots__/UpdateTraineeRating.test.tsx.snap
@@ -146,7 +146,7 @@ Array [
               className="min-w-fit"
             >
               <div
-                className="font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] \\"lg:ml-60 mx-auto\\"} mb-10"
+                className="relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] \\"lg:ml-60 mx-auto\\"} mb-10"
               >
                 <div
                   className="flex items-center justify-between pb-6 "
@@ -289,35 +289,15 @@ Array [
                     >
                       <tr>
                         <td
-                          aria-label="Empty cell"
-                          className="px-6 py-4 text-sm text-center text-gray-500 dark:text-gray-300"
+                          className="p-4 text-center h-24"
                           colSpan={7}
                         >
-                           
-                           
-                        </td>
-                      </tr>
-                      <tr>
-                         
-                        <td
-                          className="p-4 text-center"
-                          colSpan={7}
-                        >
-                          <div
-                            className="flex flex-col items-center justify-center space-y-4"
+                          <p
+                            className="text-lg font-medium text-gray-600 dark:text-gray-400 pt-8"
                           >
-                             
-                            <p
-                              className="text-lg font-medium text-gray-600 dark:text-gray-400"
-                            >
-                               
-                              No records available
-                               
-                            </p>
-                          </div>
-                           
+                            No records available
+                          </p>
                         </td>
-                         
                       </tr>
                     </tbody>
                   </table>
@@ -341,14 +321,14 @@ Array [
                             colSpan={7}
                           >
                             <div
-                              className="flex flex-row items-center justify-between w-full mx-auto"
+                              className="flex flex-row sm:space-x-9 md:space-x-72 lg:flex-row items-center justify-between w-full mx-auto"
                             >
                               <div
-                                className="flex"
+                                className="flex mb-4 sm:-ml-7 -ml-7 lg:mb-0 mr-auto "
                               >
                                 <button
                                   aria-label="left-arrow"
-                                  className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                                  className="page mx-2 text-white rounded-circle appearance-none font-bold flex items-center justify-center bg-primary mr-2 h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                                   disabled={true}
                                   onClick={[Function]}
                                   type="button"
@@ -373,7 +353,7 @@ Array [
                                  
                                 <button
                                   aria-label="right-arrow"
-                                  className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[60px] cursor-pointer"
+                                  className="page mx-2 text-white rounded-circle font-bold flex items-center justify-center bg-primary h-[30px] w-[50px] lg:h-[40px] lg:w-[60px] cursor-pointer"
                                   disabled={true}
                                   onClick={[Function]}
                                   type="button"
@@ -398,10 +378,10 @@ Array [
                                  
                               </div>
                               <div
-                                className="lg:flex flex-row justify-center w-1/3 sm:text-[12px] items-center"
+                                className="flex flex-row relative md:ml-80 lg:flex-row   justify-center items-baseline w-full lg:w-1/3 w-1/2 text-xs lg:text-md  mx-2 -mr-5"
                               >
                                 <span
-                                  className="inline-block mx-2"
+                                  className="flex justify-center sm:w-[50%] w-[70%] lg:mb-0"
                                 >
                                   Page
                                    
@@ -412,75 +392,85 @@ Array [
                                   </strong>
                                    
                                 </span>
-                                <span
-                                  className="inline-block mx-2"
-                                >
-                                  | Go to page:
-                                   
-                                  <input
-                                    className="pl-1 border rounded-md outline-none appearance-none  border-primary dark:bg-primary"
-                                    defaultValue={1}
-                                    onChange={[Function]}
-                                    style={
-                                      Object {
-                                        "border": "solid 0.1rem #9e85f5",
-                                        "height": "30px",
-                                        "paddingLeft": "1.2rem",
-                                        "width": "50px",
-                                      }
-                                    }
-                                    type="number"
-                                  />
-                                </span>
-                                 
-                                <select
-                                  className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
-                                  onChange={[Function]}
-                                  style={
-                                    Object {
-                                      "border": "solid 0.1rem #9e85f5",
-                                      "height": "30px",
-                                    }
-                                  }
-                                  value={3}
+                                <div
+                                  className="flex flex-row sm:justify-center justify-end items-center w-full"
                                 >
-                                  <option
-                                    value={3}
-                                  >
-                                    Show 
-                                    3
-                                  </option>
-                                  <option
-                                    value={5}
-                                  >
-                                    Show 
-                                    5
-                                  </option>
-                                  <option
-                                    value={10}
+                                  <div
+                                    className="hidden lg:flex items-center mx-2 mb-2 lg:mb-0"
                                   >
-                                    Show 
-                                    10
-                                  </option>
-                                  <option
-                                    value={25}
-                                  >
-                                    Show 
-                                    25
-                                  </option>
-                                  <option
-                                    value={50}
-                                  >
-                                    Show 
-                                    50
-                                  </option>
-                                  <option
-                                    value={100}
+                                    <span
+                                      className="mr-1"
+                                    >
+                                      | Go to page: 
+                                    </span>
+                                    <input
+                                      className="pl-1 border rounded-md outline-none appearance-none border-primary dark:bg-primary"
+                                      defaultValue={1}
+                                      onChange={[Function]}
+                                      style={
+                                        Object {
+                                          "border": "solid 0.1rem #9e85f5",
+                                          "height": "30px",
+                                          "paddingLeft": "1.2rem",
+                                          "width": "50px",
+                                        }
+                                      }
+                                      type="number"
+                                    />
+                                  </div>
+                                  <div
+                                    className="flex items-center sm:mx-2 mx-0 mb-2 lg:mb-0 "
                                   >
-                                    Show 
-                                    100
-                                  </option>
-                                </select>
+                                    <select
+                                      className="border rounded-md px-1/2 font-raleway border-dark dark:bg-primary focus:outline-none"
+                                      onChange={[Function]}
+                                      style={
+                                        Object {
+                                          "border": "solid 0.1rem #9e85f5",
+                                          "height": "30px",
+                                        }
+                                      }
+                                      value={3}
+                                    >
+                                      <option
+                                        value={3}
+                                      >
+                                        Show 
+                                        3
+                                      </option>
+                                      <option
+                                        value={5}
+                                      >
+                                        Show 
+                                        5
+                                      </option>
+                                      <option
+                                        value={10}
+                                      >
+                                        Show 
+                                        10
+                                      </option>
+                                      <option
+                                        value={25}
+                                      >
+                                        Show 
+                                        25
+                                      </option>
+                                      <option
+                                        value={50}
+                                      >
+                                        Show 
+                                        50
+                                      </option>
+                                      <option
+                                        value={100}
+                                      >
+                                        Show 
+                                        100
+                                      </option>
+                                    </select>
+                                  </div>
+                                </div>
                               </div>
                             </div>
                           </td>
diff --git a/tests/pages/__snapshots__/userRegister.test.tsx.snap b/tests/pages/__snapshots__/userRegister.test.tsx.snap
index 2c060b18c..538f2dfa8 100644
--- a/tests/pages/__snapshots__/userRegister.test.tsx.snap
+++ b/tests/pages/__snapshots__/userRegister.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`TraineeRatingDashboard Tests Renders TraineeRatingDashboard 1`] = `
                 className="text-gray-400 border border-primary py-2 dark:bg-dark-bg rounded outline-none px-5 font-sans text-xs w-full h-[38px] "
                 data-placeholder="Date of birth"
                 id="date-placeholder"
-                max="2024-10-06"
+                max="2024-10-24"
                 name="dateOfBirth"
                 onBlur={[Function]}
                 onChange={[Function]}
diff --git a/tests/utils/getDateForDays.test.tsx b/tests/utils/getDateForDays.test.tsx
deleted file mode 100644
index a31bca4db..000000000
--- a/tests/utils/getDateForDays.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { getDateForDays } from '../../src/utils/getDateForDays';
-
-describe('getDateForDays', () => {
-  it('should return correct weekdays for a valid date input', () => {
-    const result = getDateForDays('1696118400000');
-    expect(result).toEqual({
-      fri: '2023-09-29',
-      mon: '2023-09-25',
-      thu: '2023-09-28',
-      tue: '2023-09-26',
-      wed: '2023-09-27',
-    });
-  });
-  it('should return error  for a invalid date input', () => {
-    const result = getDateForDays('16962048-00000');
-    expect(result).toEqual({
-      mon: '',
-      tue: '',
-      wed: '',
-      thu: '',
-      fri: '',
-    });
-  });
-});