From 4321d944447bc5576c76632968ad5c6de83561c4 Mon Sep 17 00:00:00 2001
From: JacquelineTuyisenge
 <109481899+JacquelineTuyisenge@users.noreply.github.com>
Date: Thu, 24 Oct 2024 18:43:08 +0200
Subject: [PATCH] fix(#404): add skeleton loader on login activities table
 (#600)

---
 src/Skeletons/loginActivities.skeleton.tsx    |   52 +
 src/components/LoginActivitiesTable.tsx       |  149 +-
 .../AdminTraineeDashboard.test.tsx.snap       |   11 +-
 .../__snapshots__/DashHeader.test.tsx.snap    |    2 +-
 .../__snapshots__/Header.test.tsx.snap        |  126 +-
 tests/components/loginActivities.test.tsx     |    9 +-
 .../__snapshots__/Cohorts.test.tsx.snap       |  154 +-
 .../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 +++++++++++++++--
 .../TraineeRatingDashboard.test.tsx.snap      |  170 +-
 .../UpdateTraineeRating.test.tsx.snap         |  186 +-
 .../__snapshots__/userRegister.test.tsx.snap  |    2 +-
 15 files changed, 3622 insertions(+), 991 deletions(-)
 create mode 100644 src/Skeletons/loginActivities.skeleton.tsx

diff --git a/src/Skeletons/loginActivities.skeleton.tsx b/src/Skeletons/loginActivities.skeleton.tsx
new file mode 100644
index 000000000..581a9b5aa
--- /dev/null
+++ b/src/Skeletons/loginActivities.skeleton.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export default function LoginActivitiesSkeleton() {
+  // Define an array with unique keys
+  const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
+
+  return (
+    <div
+      className="w-full p-4 overflow-auto"
+      data-testid="login-activities-skeleton"
+    >
+      <table className="w-full table-fixed border border-gray-700 min-w-[600px]">
+        <thead className="bg-[#27167439] text-white">
+          <tr>
+            <th className="p-4 border text-center w-1/6">Date</th>
+            <th className="p-4 border text-center w-1/6">Country Name</th>
+            <th className="p-4 border text-center w-1/6">City</th>
+            <th className="p-4 border text-center w-1/6">State</th>
+            <th className="p-4 border text-center w-1/6">IPV4</th>
+            <th className="p-4 border text-center w-1/6">Attempt</th>
+          </tr>
+        </thead>
+        <tbody>
+          {skeletonRows.map((row) => (
+            <tr key={row.id}>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+              <td className="py-2 px-4 border">
+                <Skeleton height={35} width="100%" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/src/components/LoginActivitiesTable.tsx b/src/components/LoginActivitiesTable.tsx
index 705545596..e8b571a05 100644
--- a/src/components/LoginActivitiesTable.tsx
+++ b/src/components/LoginActivitiesTable.tsx
@@ -6,6 +6,7 @@
 import React, { useState, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_LOGIN_ACTIVITIES } from '../queries/manageStudent.queries';
+import LoginActivitiesSkeleton from '../Skeletons/loginActivities.skeleton';
 
 interface LoginActivitiesData {
   loginActivities: LoginActivity[];
@@ -99,78 +100,88 @@ const LoginActivitiesTable: React.FC = () => {
   const displayActivities = loginActivities.slice(startIndex, endIndex);
   console.log('displayActivities', displayActivities);
 
-  if (loading && page === 1) {
-    return <div>Loading login activities...</div>;
-  }
-
-  /* istanbul ignore next */
-  if (error) {
-    return <div>Error retrieving login activities.</div>;
-  }
-
-  /* istanbul ignore next */
-  if (displayActivities.length === 0) {
-    return <div>No login activities yet.</div>;
-  }
-
   /* istanbul ignore next */
   return (
     <div className="flex flex-col items-center mt-4 font-serif">
-      <table className="w-full border border-gray-300">
-        <thead className="bg-[#163274a3] text-white">
-          <tr>
-            <th className="py-2 px-4 border">Date</th>
-            <th className="py-2 px-4 border">Country Name</th>
-            <th className="py-2 px-4 border">City</th>
-            <th className="py-2 px-4 border">State</th>
-            <th className="py-2 px-4 border">IPv4</th>
-            <th className="py-2 px-4 border">Attempt</th>
-          </tr>
-        </thead>
-        <tbody>
-          {displayActivities.map((activity, index) => (
-            <tr
-              key={`${activity.date || index}-${activity.IPv4 || index}`}
-              className="transition-colors duration-200"
-            >
-              <td className="py-2 px-4 border">
-                {new Date(Number(activity.date)).toLocaleString()}
-              </td>
-              <td className="py-2 px-4 border">
-                {activity.country_name || 'N/A'}
-              </td>
-              <td className="py-2 px-4 border">{activity.city || 'N/A'}</td>
-              <td className="py-2 px-4 border">{activity.state || 'N/A'}</td>
-              <td className="py-2 px-4 border">{activity.IPv4 || 'N/A'}</td>
-              <td className="py-2 px-4 border">
-                {activity.failed > 0 ? 'Failed' : 'Success'}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <div className="flex justify-center mb-20 mt-4">
-        <span className="mr-2 text-gray-600">
-          Page {page} of {totalPages}
-        </span>
-        {page > 1 && (
-          <button
-            className="px-4 py-2 mr-2 font-bold text-white bg-gray-500 rounded"
-            onClick={handleGoBack}
-          >
-            Previous
-          </button>
-        )}
-        {page < totalPages && (
-          <button
-            className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
-            onClick={handleLoadMore}
-          >
-            Next
-          </button>
-        )}
-      </div>
+      <h1 className="text-3xl font-bold font-lexend pb-3">Login Activities</h1>
+
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {loading && page === 1 ? (
+        <div className="my-2 items-center">
+          <LoginActivitiesSkeleton />
+        </div>
+      ) : /* eslint-disable-next-line no-nested-ternary */
+      error ? (
+        <div>Error retrieving login activities.</div>
+      ) : displayActivities.length === 0 ? (
+        <div>No login activities yet.</div>
+      ) : (
+        <>
+          <div className="w-full overflow-x-auto">
+            <table className="w-full border border-gray-300 min-w-[800px]">
+              <thead className="bg-[#163274a3] text-white">
+                <tr>
+                  <th className="py-2 px-4 border">Date</th>
+                  <th className="py-2 px-4 border">Country Name</th>
+                  <th className="py-2 px-4 border">City</th>
+                  <th className="py-2 px-4 border">State</th>
+                  <th className="py-2 px-4 border">IPv4</th>
+                  <th className="py-2 px-4 border">Attempt</th>
+                </tr>
+              </thead>
+              <tbody>
+                {displayActivities.map((activity, index) => (
+                  <tr
+                    key={`${activity.date || index}-${activity.IPv4 || index}`}
+                    className="transition-colors duration-200"
+                  >
+                    <td className="py-2 px-4 border">
+                      {new Date(Number(activity.date)).toLocaleString()}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.country_name || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.city || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.state || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.IPv4 || 'N/A'}
+                    </td>
+                    <td className="py-2 px-4 border">
+                      {activity.failed > 0 ? 'Failed' : 'Success'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="flex justify-center mb-20 mt-4">
+            <span className="mr-2 text-gray-600">
+              Page {page} of {totalPages}
+            </span>
+            {page > 1 && (
+              <button
+                className="px-4 py-2 mr-2 font-bold text-white bg-gray-500 rounded"
+                onClick={handleGoBack}
+              >
+                Previous
+              </button>
+            )}
+            {page < totalPages && (
+              <button
+                className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+                onClick={handleLoadMore}
+              >
+                Next
+              </button>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };
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__/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/loginActivities.test.tsx b/tests/components/loginActivities.test.tsx
index 31075aab6..89501eaca 100644
--- a/tests/components/loginActivities.test.tsx
+++ b/tests/components/loginActivities.test.tsx
@@ -5,6 +5,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import React from 'react';
 import { GET_LOGIN_ACTIVITIES } from '../../src/queries/manageStudent.queries';
 import LoginActivitiesTable from '../../src/components/LoginActivitiesTable';
+import LoginActivitiesSkeleton from '../../src/Skeletons/loginActivities.skeleton';
 
 const mockLoginActivities = [
   {
@@ -38,15 +39,13 @@ const mocks = [
 ];
 
 describe('LoginActivities', () => {
-  it('renders login activities table', async () => {
+  it('renders login activities skeleton table', async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <LoginActivitiesTable />
       </MockedProvider>,
     );
-    expect(
-      screen.getByText(/Loading login activities.../i),
-    ).toBeInTheDocument();
+    expect(screen.getByTestId('login-activities-skeleton')).toBeInTheDocument();
   });
   it('displays loading state while fetching login activities', () => {
     render(
@@ -55,7 +54,7 @@ describe('LoginActivities', () => {
       </MockedProvider>,
     );
 
-    expect(screen.getByText('Loading login activities...')).toBeTruthy();
+    expect(screen.getByTestId('login-activities-skeleton')).toBeTruthy();
   });
 
   it('displays error state if login activities retrieval fails', async () => {
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/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__/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]}