diff --git a/src/containers/DashRoutes.tsx b/src/containers/DashRoutes.tsx
index c057430b..423da373 100644
--- a/src/containers/DashRoutes.tsx
+++ b/src/containers/DashRoutes.tsx
@@ -42,6 +42,9 @@ const ViewTraineeRatings = React.lazy(
 const TtlTraineeDashboard = React.lazy(
   () => import('../pages/ttlTraineeDashboard'),
 );
+const LoginWith2fa = React.lazy(
+  () => import('../pages/LoginWith2fa'),
+);
 
 const TraineeRatingDashboard = React.lazy(
   () => import('../pages/TraineeRatingDashboard'),
diff --git a/src/containers/Routes.tsx b/src/containers/Routes.tsx
index c7193430..6d655e50 100644
--- a/src/containers/Routes.tsx
+++ b/src/containers/Routes.tsx
@@ -43,6 +43,7 @@ import RemoveTokenPage from '../utils/RemoveTokenPage';
 import PrivateRoute from '../utils/PrivateRoute';
 import CalendarConfirmation from '../components/CalendarConfirmation';
 import NotFound from '../components/NotFoundPage';
+import TwoFactorPage from '../pages/LoginWith2fa';
 
 function MainRoutes() {
   return (
@@ -123,13 +124,14 @@ function MainRoutes() {
             <Route
               path="/users/login"
               element={
-                <ProtectedRoutes>
+                 <ProtectedRoutes>
                   <Suspense fallback={<Skeleton />}>
                     <Adminlogin />
                   </Suspense>
-                </ProtectedRoutes>
+                 </ProtectedRoutes>
               }
             />
+             <Route path="/users/LoginWith2fa" element={<TwoFactorPage/>}/>
             <Route
               path="/pricing"
               element={
diff --git a/src/pages/LoginWith2fa.tsx b/src/pages/LoginWith2fa.tsx
new file mode 100644
index 00000000..b8dd4702
--- /dev/null
+++ b/src/pages/LoginWith2fa.tsx
@@ -0,0 +1,294 @@
+/* eslint-disable */
+import React, { useState, useEffect, useCallback, useContext } from 'react';
+import { useMutation, gql, useApolloClient } from '@apollo/client';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { UserContext } from '../hook/useAuth';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+
+interface Profile {
+  id: string;
+  firstName: string;
+  lastName: string;
+  name: string | null;
+  address: string | null;
+  city: string | null;
+  country: string | null;
+  phoneNumber: string | null;
+  biography: string | null;
+  avatar: string | null;
+  cover: string | null;
+  __typename: 'Profile';
+}
+
+interface User {
+  id: string;
+  role: string;
+  email: string;
+  profile: Profile;
+  __typename: 'User';
+}
+
+interface LoginResponse {
+  loginWithTwoFactorAuthentication: {
+    token: string;
+    user: User;
+    message: string;
+    __typename: 'LoginResponse';
+  };
+}
+
+export const LOGIN_WITH_2FA = gql`
+  mutation LoginWithTwoFactorAuthentication(
+    $email: String!
+    $otp: String!
+    $TwoWayVerificationToken: String!
+  ) {
+    loginWithTwoFactorAuthentication(
+      email: $email
+      otp: $otp
+      TwoWayVerificationToken: $TwoWayVerificationToken
+    ) {
+      token
+      user {
+        id
+        role
+        email
+        profile {
+          id
+          firstName
+          lastName
+          name
+          address
+          city
+          country
+          phoneNumber
+          biography
+          avatar
+          cover
+        }
+      }
+      message
+    }
+  }
+`;
+
+const TwoFactorPage: React.FC = () => {
+  const [input, setInput] = useState<string[]>(Array(6).fill(''));
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+  const { login } = useContext(UserContext);
+  const client = useApolloClient();
+  const { t } = useTranslation();
+
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { email, TwoWayVerificationToken } = location.state || {};
+  useEffect(() => {
+    // Update document class and localStorage when theme changes
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }, [isDark]);
+
+  useEffect(() => {
+    if (!email || !TwoWayVerificationToken) {
+      navigate('/login');
+    }
+  }, [email, TwoWayVerificationToken, navigate]);
+
+  const [loginWithTwoFactorAuthentication] = useMutation<LoginResponse>(
+    LOGIN_WITH_2FA,
+    {
+      onCompleted: async (data) => {
+        const response = data.loginWithTwoFactorAuthentication;
+        try {
+          localStorage.setItem('authToken', response.token);
+          localStorage.setItem('user', JSON.stringify(response.user));
+          await login(response);
+          await client.resetStore();
+          toast.success(response.message);
+
+          const rolePaths: Record<string, string> = {
+            superAdmin: '/organizations',
+            admin: '/trainees',
+            coordinator: '/trainees',
+            manager: '/dashboard',
+            ttl: '/ttl-trainees',
+            trainee: '/performance',
+          };
+
+          const redirectPath = rolePaths[response.user.role] || '/dashboard';
+          navigate(redirectPath, { replace: true });
+        } catch (error) {
+          toast.error('Login Error');
+        }
+      },
+      onError: (error) => {
+        const errorMessage = error.message || 'Verification Failed';
+        setError(errorMessage);
+        toast.error(errorMessage);
+        setInput(Array(6).fill(''));
+      },
+    },
+  );
+
+  const verifyOtp = async (currentInput = input) => {
+    if (currentInput.some((val) => !val)) {
+      setError('Please Enter All Digits');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      await loginWithTwoFactorAuthentication({
+        variables: {
+          email,
+          otp: currentInput.join(''),
+          TwoWayVerificationToken,
+        },
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInput = useCallback(
+    (index: number, value: string) => {
+      if (!/^\d*$/.test(value)) return;
+
+      const newInput = [...input];
+      newInput[index] = value;
+      setInput(newInput);
+
+      if (value && index < input.length - 1) {
+        const nextInput = document.getElementById(
+          `otp-input-${index + 1}`,
+        ) as HTMLInputElement;
+        nextInput?.focus();
+      }
+
+      if (value && index === input.length - 1) {
+        const allFilled = newInput.every((val) => val !== '');
+        if (allFilled) {
+          verifyOtp(newInput);
+        }
+      }
+    },
+    [input],
+  );
+
+  const handleKeyDown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (e.key === 'Backspace' && !input[index] && index > 0) {
+      const prevInput = document.getElementById(
+        `otp-input-${index - 1}`,
+      ) as HTMLInputElement;
+      prevInput?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text').trim();
+
+    if (!/^\d+$/.test(pastedData)) {
+      setError('Only Numbers Can Be Pasted');
+      return;
+    }
+
+    const digits = pastedData.slice(0, 6).split('');
+    const newInput = [...digits, ...Array(6 - digits.length).fill('')];
+
+    setInput(newInput);
+
+    if (digits.length < 6) {
+      const nextEmptyIndex = digits.length;
+      const nextInput = document.getElementById(
+        `otp-input-${nextEmptyIndex}`,
+      ) as HTMLInputElement;
+      nextInput?.focus();
+    } else {
+      verifyOtp(newInput);
+    }
+  };
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen transition-colors duration-200 bg-gray-100 dark:bg-gray-900">
+      <div className="p-8 transition-colors duration-200 bg-white rounded-lg shadow-md dark:bg-gray-800 w-96">
+        <h2 className="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">
+          {'Verification Required'}
+        </h2>
+
+        <p className="mb-6 text-sm text-center text-gray-600 dark:text-gray-400">
+          {'Enter Verification Code'}
+          <br />
+          <span className="font-medium">{email}</span>
+        </p>
+
+        {error && (
+          <div className="p-3 mb-4 text-sm text-red-500 bg-red-100 rounded dark:bg-red-900/30">
+            {error}
+          </div>
+        )}
+
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            verifyOtp();
+          }}
+        >
+          <div className="flex justify-center mb-6 space-x-2">
+            {input.map((value, index) => (
+              <input
+                data-testid={`otp-input-${index}`}
+                key={index}
+                id={`otp-input-${index}`}
+                type="text"
+                inputMode="numeric"
+                maxLength={1}
+                value={value}
+                onChange={(e) => handleInput(index, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(index, e)}
+                onPaste={index === 0 ? handlePaste : undefined}
+                className="w-12 h-12 text-lg font-semibold text-center text-gray-800 transition-colors bg-white border rounded dark:text-gray-100 dark:border-gray-600 dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                disabled={loading}
+                autoComplete="one-time-code"
+                required
+              />
+            ))}
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading || input.some((val) => !val)}
+            className="w-full py-3 text-white transition-colors bg-primary rounded hover:bg-blue-600 disabled:bg-primary dark:disabled:bg-primary disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <span className="flex items-center justify-center">
+                {'Verifying'}
+              </span>
+            ) : (
+              'VerifyCode'
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default TwoFactorPage;
diff --git a/src/pages/Organization/2faMutation.tsx b/src/pages/Organization/2faMutation.tsx
new file mode 100644
index 00000000..db253ac3
--- /dev/null
+++ b/src/pages/Organization/2faMutation.tsx
@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+export const EnableTwoFactorAuth = gql`
+  mutation EnableTwoFactorAuth($email: String!) {
+    enableTwoFactorAuth(email: $email)
+  }
+`;
+
+
+export const LoginWithTwoFactorAuthentication= gql`
+mutation LoginWithTwoFactorAuthentication($email: String!, $otp: String!, $twoWayVerificationToken: String!) {
+  loginWithTwoFactorAuthentication(email: $email, otp: $otp, TwoWayVerificationToken: $twoWayVerificationToken) {
+    message
+    token
+    user {
+      email
+    }
+  }
+}
+`;
+
+export const DisableTwoFactorAuth = gql`
+  mutation DisableTwoFactorAuth($email: String!) {
+    disableTwoFactorAuth(email: $email)
+  }
+`;
diff --git a/src/pages/Organization/AdminLogin.tsx b/src/pages/Organization/AdminLogin.tsx
index f0c25fbe..a3a37788 100644
--- a/src/pages/Organization/AdminLogin.tsx
+++ b/src/pages/Organization/AdminLogin.tsx
@@ -1,337 +1,348 @@
-/* eslint-disable */
-'use client';
-import { useApolloClient, useMutation } from '@apollo/client';
-import React, { useContext, useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { FaRegEnvelope, FaRegEye } from 'react-icons/fa';
-import { FiEyeOff } from 'react-icons/fi';
-import { MdLockOutline } from 'react-icons/md';
-import {
-  Link,
-  useLocation,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
-import { toast, ToastContent } from 'react-toastify';
-import ButtonLoading from '../../components/ButtonLoading';
-import Button from '../../components/Buttons';
-import { UserContext } from '../../hook/useAuth';
-import useDocumentTitle from '../../hook/useDocumentTitle';
-import LOGIN_MUTATION from './LoginMutation';
-import functionTree from '../../assets/Functionality_Tree.svg';
-import pulseStars from '../../assets/Property 1=Logo_flie (1).svg';
-
-function AdminLogin() {
-  const orgToken: any = localStorage.getItem('orgToken');
-  const orgName: any = localStorage.getItem('orgName');
-  const [loading, setLoading] = useState(false);
-
-  useDocumentTitle('Login');
-  const { t } = useTranslation();
-  const [passwordShown, setPasswordShown] = useState(false);
-  /* istanbul ignore next */
-  const tooglePassword = () => {
-    setPasswordShown(!passwordShown);
-  };
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-  }: any = useForm();
-  const { login } = useContext(UserContext);
-  const navigate = useNavigate();
-  const { state } = useLocation();
-  const [LoginUser] = useMutation(LOGIN_MUTATION);
-  const client = useApolloClient();
-  const [searchParams] = useSearchParams();
-
-  // Function to get the redirect_message from the URL and toast it
-  const showRedirectMessage = () => {
-    const redirectMessage = searchParams.get('redirect_message');
-    if (redirectMessage) {
-      toast.error(redirectMessage);
-    }
-  };
-
-  // Call showRedirectMessage when the component mounts
-  useEffect(() => {
-    showRedirectMessage();
-  }, [searchParams]);
-
-  const onSubmit = async (userInput: any) => {
-    userInput.orgToken = orgToken;
-    try {
-      setLoading(true);
-      const redirect = searchParams.get('redirect');
-      // const activity = await getLocation();
-      await LoginUser({
-        variables: {
-          loginInput: {
-            ...userInput,
-            // activity, //disable geolocation
-          },
-        },
-
-        /* istanbul ignore next */
-        onCompleted: async (data) => {
-          /* istanbul ignore next */
-          toast.success(data.addMemberToCohort);
-          /* istanbul ignore next */
-          login(data.loginUser);
-          /* istanbul ignore next */
-          await client.resetStore();
-          /* istanbul ignore next */
-          toast.success(t(`Welcome`) as ToastContent<unknown>);
-          /* istanbul ignore next */
-
-          const redirectParams=sessionStorage.getItem("redirectParams")||''
-          if (data.loginUser) {
-            redirect
-              ? navigate(`${redirect}`)
-              : data.loginUser.user.role === 'superAdmin'
-              ? navigate(`/dashboard`)
-              : data.loginUser.user.role === 'admin'
-              ? navigate(`/trainees`)
-              : data.loginUser.user.role === 'coordinator'
-              ? navigate(`/trainees`)
-              : data.loginUser.user.role === 'manager'
-              ? navigate(`/dashboard`)
-              : data.loginUser.user.role === 'ttl'
-              ? navigate('/ttl-trainees')
-              : navigate('/performance');
-              sessionStorage.removeItem("redirectParams")
-          } else {
-            navigate('/dashboard');
-          }
-        },
-        onError: (err) => {
-          console.log(err)
-          if (err.networkError)
-            toast.error('There was a problem contacting the server');
-          else if (err.message.toLowerCase() !== 'invalid credential') {
-            const translateError = t(
-              'Please wait to be added to a program or cohort',
-            );
-            toast.error(translateError);
-          } else {
-            /* istanbul ignore next */
-            setError('password', {
-              type: 'custom',
-              message: t('Invalid credentials'),
-            });
-          }
-        },
-      });
-    } catch (error: any) {
-      /* istanbul ignore next */
-      setError('password', {
-        type: 'custom',
-        message: t('Invalid credentials'),
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const getLocation = async () => {
-    const location = await fetch('https://geolocation-db.com/json/')
-      .then(async (res) => {
-        const activityResponse = await res.json();
-
-        const activityResponseActual = {
-          IPv4: activityResponse.IPv4,
-          city: activityResponse.city,
-          country_code: activityResponse.country_code,
-          country_name: activityResponse.country_name,
-          latitude:
-            activityResponse.latitude === 'Not found'
-              ? null
-              : activityResponse.latitude,
-          longitude:
-            activityResponse.longitude === 'Not found'
-              ? null
-              : activityResponse.longitude,
-          postal: activityResponse.postal,
-          state: activityResponse.state,
-        };
-        return activityResponseActual;
-      })
-      .then((data) => data);
-    const date = new Date().toString();
-    return { date, ...location } || null;
-  };
-
-  return (
-    <div className="grow  dark:bg-dark-frame-bg bg-indigo-50 flex flex-row font-serif">
-      <div className="hidden lg:flex w-[50%] h-full  flex-col justify-center items-center mt-10 ">
-        <div className=" flex flex-col justify-center items-center ">
-          <div className="relative flex flex-row justify-center">
-            <img
-              src={pulseStars}
-              alt="pulses"
-              className="absolute inset-0 w-[41rem] h-[12rem] dark:hidden"
-            />
-            <p className="relative w-[70%] text-gray-700 text-[1.9em] p-5 text-center italic font-bold  dark:text-dark-text-fill">
-              {t('Boost your organization')}
-            </p>
-          </div>
-
-          <div className="w-[30vw] h-[42vh]  flex flex-row ">
-            <img
-              src={functionTree}
-              alt="functions"
-              className="w-sm dark:brightness-150"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className=" w-full  lg:w-[50%] lg:p-5 flex flex-row items-end p-5">
-        <div className="max-w-lg w-full mx-auto my-28 bg-indigo-100 dark:bg-dark-bg  p-5 sm:p-5 md:shadow-xl sm:shadow-none md:rounded-xl sm:rounded-none">
-          <div className="">
-            <div className="flex flex-col justify-center items-center">
-              <h2 className="text-2xl font-bold text-primary dark:text-dark-text-fill ">
-                {t('Welcome to')}{' '}
-                {orgName
-                  ? orgName.charAt(0).toUpperCase() +
-                    orgName.slice(1).toLowerCase()
-                  : ''}
-              </h2>
-              <div className="border-[1px] w-10 bg-primary border-primary inline-block mb-2" />
-            </div>
-
-            <div className=" text-sm text-center dark:text-dark-text-fill">
-              <Link
-                to="/login/org"
-                className="mx-1 text-primary"
-                data-testid="switch"
-              >
-                {t('Switch')} {t('your organization')}
-              </Link>
-            </div>
-
-            <div className="flex flex-col items-center">
-              <form
-                action="#none"
-                className="w-full"
-                onSubmit={handleSubmit(onSubmit)}
-                data-testid="loginForm"
-              >
-                {errors.password &&
-                errors.password.message === t('Invalid credentials') ? (
-                  <div className=" bg-red-400 rounded-md w-full text-center p-4 my-4">
-                    <small className="text-white">
-                      {errors.password.message}
-                    </small>
-                  </div>
-                ) : (
-                  ''
-                )}
-                <div className="flex items-center w-full p-2 my-2 mb-2 bg-gray-100 border rounded-md border-gray dark:bg-dark-bg ">
-                  <FaRegEnvelope className="mr-2 text-gray-400" />
-                  <input
-                    data-testid="email"
-                    type="email"
-                    {...register('email', { required: 'Email is required' })}
-                    placeholder={t('Email')}
-                    className="bg-gray-100 outline-none text-sm flex-1 px-2 dark:border-white dark:bg-dark-bg dark:text-white "
-                  />
-                </div>
-                <div className="text-left mb-1 pl-4">
-                  {errors.email && (
-                    <small className="text-red-600">
-                      {errors.email.message}
-                    </small>
-                  )}
-                </div>
-
-                <div className="md:w-full border border-gray rounded-md bg-gray-100 p-2 my-4 flex items-center  mb-2 dark:border-white dark:bg-dark-bg">
-                  <MdLockOutline className="text-gray-400 mr-2 " />
-                  <input
-                    data-testid="password"
-                    type={passwordShown ? 'text' : 'password'}
-                    {...register('password', {
-                      required: 'Password is required',
-                    })}
-                    placeholder={t('Password')}
-                    className="bg-gray-100 outline-none text-sm flex-1 dark:border-white dark:bg-dark-bg dark:text-white"
-                  />
-                  <div className="text-gray-400 cursor-pointer onClick= {()=> handleShowPassword}">
-                    {passwordShown ? (
-                      <FaRegEye onClick={tooglePassword} />
-                    ) : (
-                      <FiEyeOff onClick={tooglePassword} />
-                    )}
-                  </div>
-                </div>
-                <div className="pl-4 mb-1 text-left">
-                  {errors.password &&
-                  errors.password.message !== t('Invalid credentials') ? (
-                    <small className="text-red-600">
-                      {errors.password.message}
-                    </small>
-                  ) : (
-                    ''
-                  )}
-                </div>
-                <div className="flex w-full flex-col sm:flex-row justify-between  items-center rounded mb-5 mt-5">
-                  <div className="w-50%">
-                    <label
-                      htmlFor="checkbox"
-                      className="flex items-center text-xs dark:text-dark-text-fill "
-                    >
-                      <input
-                        type="checkbox"
-                        name="remember"
-                        className="mr-1  dark:text-dark-text-fill dark:border-white dark:bg-dark-frame-bg"
-                      />
-                      {t('Remember me')}
-                    </label>
-                  </div>
-                  <div className="w-[50%] flex flex-row justify-end">
-                    <Link
-                      to="/reset-password"
-                      className="text-xs dark:text-dark-text-fill "
-                    >
-                      {t('Forgot Password?')}
-                    </Link>
-                  </div>
-                </div>
-                <div className="w-full justify-center">
-                  {loading ? (
-                    <ButtonLoading
-                      style={
-                        'rounded-md inline-block w-full sm:px-4 sm:py-2 opacity-50'
-                      }
-                    />
-                  ) : (
-                    <Button
-                      type="submit"
-                      variant="transparentbtn"
-                      size="md"
-                      style=" w-full bg-primary m-0 inline-block rounded-md lg:px-12 lg:py-2 sm:px-4 sm:py-1 md:font-semibold sm:mt-2 sm:font-medium text-white"
-                    >
-                      {t('Sign In')}
-                    </Button>
-                  )}
-                </div>
-              </form>
-            </div>
-
-            <div className="my-4 text-sm text-center dark:text-dark-text-fill">
-              {t('First time here?')}
-              <Link to="/signup/org" className="mx-1 text-primary">
-                {t('Register')}
-              </Link>
-              {t('your organization')}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default AdminLogin;
+/* eslint-disable */
+'use client';
+import { useApolloClient, useMutation } from '@apollo/client';
+import React, { useContext, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FaRegEnvelope, FaRegEye } from 'react-icons/fa';
+import { FiEyeOff } from 'react-icons/fi';
+import { MdLockOutline } from 'react-icons/md';
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom';
+import { toast, ToastContent } from 'react-toastify';
+import ButtonLoading from '../../components/ButtonLoading';
+import Button from '../../components/Buttons';
+import { UserContext } from '../../hook/useAuth';
+import useDocumentTitle from '../../hook/useDocumentTitle';
+import LOGIN_MUTATION from './LoginMutation';
+import functionTree from '../../assets/Functionality_Tree.svg';
+import pulseStars from '../../assets/Property 1=Logo_flie (1).svg';
+
+function AdminLogin() {
+  const orgToken: any = localStorage.getItem('orgToken');
+  const orgName: any = localStorage.getItem('orgName');
+  const [loading, setLoading] = useState(false);
+  const [otpRequired, setOtpRequired] = useState(false);
+  const [TwoWayVerificationToken, setTwoWayVerificationToken] = useState('');
+  const [otp, setOtp] = useState('');
+
+  useDocumentTitle('Login');
+  const { t } = useTranslation();
+  const [passwordShown, setPasswordShown] = useState(false);
+  /* istanbul ignore next */
+  const tooglePassword = () => {
+    setPasswordShown(!passwordShown);
+  };
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+  }: any = useForm();
+  const { login } = useContext(UserContext);
+  const navigate = useNavigate();
+  const [LoginUser] = useMutation(LOGIN_MUTATION);
+  const client = useApolloClient();
+  const [searchParams] = useSearchParams();
+  // Function to get the redirect_message from the URL and toast it
+  const showRedirectMessage = () => {
+    const redirectMessage = searchParams.get('redirect_message');
+    if (redirectMessage) {
+      toast.error(redirectMessage);
+    }
+  };
+
+  // Call showRedirectMessage when the component mounts
+  useEffect(() => {
+    showRedirectMessage();
+  }, [searchParams]);
+
+  const onSubmit = async (userInput: any) => {
+    userInput.orgToken = orgToken;
+    try {
+      setLoading(true);
+      const redirect = searchParams.get('redirect');
+      // const activity = await getLocation();
+      await LoginUser({
+        variables: {
+          loginInput: {
+            ...userInput,
+            // activity, //disable geolocation
+          },
+        },
+
+
+        /* istanbul ignore next */
+        onCompleted: async (data) => {
+          if (data.loginUser.otpRequired) {
+            setOtpRequired(true);
+            setTwoWayVerificationToken(data.loginUser.TwoWayVerificationToken);
+            navigate('/users/LoginWith2fa', {
+              state: {
+                email: userInput.email,
+                TwoWayVerificationToken: data.loginUser.TwoWayVerificationToken,
+              },})
+
+          }else{
+            /* istanbul ignore next */
+          toast.success(data.addMemberToCohort);
+          /* istanbul ignore next */
+          login(data.loginUser);
+          /* istanbul ignore next */
+          await client.resetStore();
+          /* istanbul ignore next */
+          toast.success(t(`Welcome`) as ToastContent<unknown>);
+          /* istanbul ignore next */
+          if (data.loginUser) {
+            redirect
+              ? navigate(`${redirect}`)
+              : data.loginUser.user.role === 'superAdmin'
+              ? navigate(`/dashboard`)
+              : data.loginUser.user.role === 'admin'
+              ? navigate(`/trainees`)
+              : data.loginUser.user.role === 'coordinator'
+              ? navigate(`/trainees`)
+              : data.loginUser.user.role === 'manager'
+              ? navigate(`/dashboard`)
+              : data.loginUser.user.role === 'ttl'
+              ? navigate('/ttl-trainees')
+              : navigate('/performance');
+          } else {
+            navigate('/dashboard');
+          }
+        }},
+        onError: (err) => {
+          /* istanbul ignore next */
+          console.log(err.message);
+
+          if (err.networkError)
+            toast.error('There was a problem contacting the server');
+          else if (err.message.toLowerCase() !== 'invalid credential') {
+            const translateError = t(
+              'Please wait to be added to a program or cohort',
+            );
+            toast.error(translateError);
+          } else {
+            /* istanbul ignore next */
+            setError('password', {
+              type: 'custom',
+              message: t('Invalid credentials'),
+            });
+          }
+        },
+      });
+    } catch (error: any) {
+      /* istanbul ignore next */
+      setError('password', {
+        type: 'custom',
+        message: t('Invalid credentials'),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getLocation = async () => {
+    const location = await fetch('https://geolocation-db.com/json/')
+      .then(async (res) => {
+        const activityResponse = await res.json();
+
+        const activityResponseActual = {
+          IPv4: activityResponse.IPv4,
+          city: activityResponse.city,
+          country_code: activityResponse.country_code,
+          country_name: activityResponse.country_name,
+          latitude:
+            activityResponse.latitude === 'Not found'
+              ? null
+              : activityResponse.latitude,
+          longitude:
+            activityResponse.longitude === 'Not found'
+              ? null
+              : activityResponse.longitude,
+          postal: activityResponse.postal,
+          state: activityResponse.state,
+        };
+        return activityResponseActual;
+      })
+      .then((data) => data);
+    const date = new Date().toString();
+    return { date, ...location } || null;
+  };
+
+  return (
+    <div className="flex flex-row font-serif grow dark:bg-dark-frame-bg bg-indigo-50">
+      <div className="hidden lg:flex w-[50%] h-full  flex-col justify-center items-center mt-10 ">
+        <div className="flex flex-col items-center justify-center ">
+          <div className="relative flex flex-row justify-center">
+            <img
+              src={pulseStars}
+              alt="pulses"
+              className="absolute inset-0 w-[41rem] h-[12rem] dark:hidden"
+            />
+            <p className="relative w-[70%] text-gray-700 text-[1.9em] p-5 text-center italic font-bold  dark:text-dark-text-fill">
+              {t('Boost your organization')}
+            </p>
+          </div>
+
+          <div className="w-[30vw] h-[42vh]  flex flex-row ">
+            <img
+              src={functionTree}
+              alt="functions"
+              className="w-sm dark:brightness-150"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className=" w-full  lg:w-[50%] lg:p-5 flex flex-row items-end p-5">
+        <div className="w-full max-w-lg p-5 mx-auto bg-indigo-100 my-28 dark:bg-dark-bg sm:p-5 md:shadow-xl sm:shadow-none md:rounded-xl sm:rounded-none">
+          <div className="">
+            <div className="flex flex-col items-center justify-center">
+              <h2 className="text-2xl font-bold text-primary dark:text-dark-text-fill ">
+                {t('Welcome to')}{' '}
+                {orgName
+                  ? orgName.charAt(0).toUpperCase() +
+                    orgName.slice(1).toLowerCase()
+                  : ''}
+              </h2>
+              <div className="border-[1px] w-10 bg-primary border-primary inline-block mb-2" />
+            </div>
+
+            <div className="text-sm text-center dark:text-dark-text-fill">
+              <Link
+                to="/login/org"
+                className="mx-1 text-primary"
+                data-testid="switch"
+              >
+                {t('Switch')} {t('your organization')}
+              </Link>
+            </div>
+
+            <div className="flex flex-col items-center">
+              <form
+                action="#none"
+                className="w-full"
+                onSubmit={handleSubmit(onSubmit)}
+                data-testid="loginForm"
+              >
+                {errors.password &&
+                errors.password.message === t('Invalid credentials') ? (
+                  <div className="w-full p-4 my-4 text-center bg-red-400 rounded-md ">
+                    <small className="text-white">
+                      {errors.password.message}
+                    </small>
+                  </div>
+                ) : (
+                  ''
+                )}
+                <div className="flex items-center w-full p-2 my-2 mb-2 bg-gray-100 border rounded-md border-gray dark:bg-dark-bg ">
+                  <FaRegEnvelope className="mr-2 text-gray-400" />
+                  <input
+                    data-testid="email"
+                    type="email"
+                    {...register('email', { required: 'Email is required' })}
+                    placeholder={t('Email')}
+                    className="flex-1 px-2 text-sm bg-gray-100 outline-none dark:border-white dark:bg-dark-bg dark:text-white "
+                  />
+                </div>
+                <div className="pl-4 mb-1 text-left">
+                  {errors.email && (
+                    <small className="text-red-600">
+                      {errors.email.message}
+                    </small>
+                  )}
+                </div>
+
+                <div className="flex items-center p-2 my-4 mb-2 bg-gray-100 border rounded-md md:w-full border-gray dark:border-white dark:bg-dark-bg">
+                  <MdLockOutline className="mr-2 text-gray-400 " />
+                  <input
+                    data-testid="password"
+                    type={passwordShown ? 'text' : 'password'}
+                    {...register('password', {
+                      required: 'Password is required',
+                    })}
+                    placeholder={t('Password')}
+                    className="flex-1 text-sm bg-gray-100 outline-none dark:border-white dark:bg-dark-bg dark:text-white"
+                  />
+                  <div className="text-gray-400 cursor-pointer onClick= {()=> handleShowPassword}">
+                    {passwordShown ? (
+                      <FaRegEye onClick={tooglePassword} />
+                    ) : (
+                      <FiEyeOff onClick={tooglePassword} />
+                    )}
+                  </div>
+                </div>
+                <div className="pl-4 mb-1 text-left">
+                  {errors.password &&
+                  errors.password.message !== t('Invalid credentials') ? (
+                    <small className="text-red-600">
+                      {errors.password.message}
+                    </small>
+                  ) : (
+                    ''
+                  )}
+                </div>
+                <div className="flex flex-col items-center justify-between w-full mt-5 mb-5 rounded sm:flex-row">
+                  <div className="w-50%">
+                    <label
+                      htmlFor="checkbox"
+                      className="flex items-center text-xs dark:text-dark-text-fill "
+                    >
+                      <input
+                        type="checkbox"
+                        name="remember"
+                        className="mr-1 dark:text-dark-text-fill dark:border-white dark:bg-dark-frame-bg"
+                      />
+                      {t('Remember me')}
+                    </label>
+                  </div>
+                  <div className="w-[50%] flex flex-row justify-end">
+                    <Link
+                      to="/reset-password"
+                      className="text-xs dark:text-dark-text-fill "
+                    >
+                      {t('Forgot Password?')}
+                    </Link>
+                  </div>
+                </div>
+                <div className="justify-center w-full">
+                  {loading ? (
+                    <ButtonLoading
+                      style={
+                        'rounded-md inline-block w-full sm:px-4 sm:py-2 opacity-50'
+                      }
+                    />
+                  ) : (
+                    <Button
+                      type="submit"
+                      variant="transparentbtn"
+                      size="md"
+                      style=" w-full bg-primary m-0 inline-block rounded-md lg:px-12 lg:py-2 sm:px-4 sm:py-1 md:font-semibold sm:mt-2 sm:font-medium text-white"
+                    >
+                      {t('Sign In')}
+                    </Button>
+                  )}
+                </div>
+              </form>
+            </div>
+
+            <div className="my-4 text-sm text-center dark:text-dark-text-fill">
+              {t('First time here?')}
+              <Link to="/signup/org" className="mx-1 text-primary">
+                {t('Register')}
+              </Link>
+              {t('your organization')}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminLogin;
diff --git a/src/pages/Organization/LoginMutation.tsx b/src/pages/Organization/LoginMutation.tsx
index 5c7eae76..ef97ad0c 100644
--- a/src/pages/Organization/LoginMutation.tsx
+++ b/src/pages/Organization/LoginMutation.tsx
@@ -4,6 +4,8 @@ const LOGIN_MUTATION = gql`
   mutation Mutation($loginInput: LoginInput) {
     loginUser(loginInput: $loginInput) {
       token
+      otpRequired
+      TwoWayVerificationToken
       user {
         id
         role
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 74af41c7..96508e43 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,15 +1,17 @@
+/* eslint-disable */
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import i18next from 'i18next';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '@headlessui/react';
-import { useMutation, useQuery } from '@apollo/client';
+import { gql, useMutation, useQuery } from '@apollo/client';
 import getLanguage from '../utils/getLanguage';
 import useDocumentTitle from '../hook/useDocumentTitle';
 import {
   updatePushNotifications,
   updateEmailNotifications,
 } from '../Mutations/notificationMutation';
+import { EnableTwoFactorAuth,DisableTwoFactorAuth } from './Organization/2faMutation';
 import {
   updatedEmailNotifications,
   updatedPushNotifications,
@@ -17,6 +19,16 @@ import {
 import { UserContext } from '../hook/useAuth';
 import { ThemeContext } from '../hook/ThemeProvider';
 
+const GetProfile = gql`
+  query GetProfile {
+    getProfile {
+      user {
+        twoFactorAuth
+      }
+    }
+  }
+`;
+
 function Settings() {
   useDocumentTitle('Settings');
   const { t } = useTranslation();
@@ -24,74 +36,82 @@ function Settings() {
   const lan = getLanguage();
   const { colorTheme, setTheme } = useContext(ThemeContext);
   const { user } = useContext(UserContext);
-  const [updateEmailNotificationsMutation] = useMutation(
-    updateEmailNotifications,
-  );
-  const [updatePushNotificationsMutation] = useMutation(
-    updatePushNotifications,
-  );
+  
+  const [isTwoFactorEnabled, setIsTwoFactorEnabled] = useState(false);
+  const [enableTwoFactorAuth] = useMutation(EnableTwoFactorAuth);
+  const [disableTwoFactorAuth] = useMutation(DisableTwoFactorAuth);
+  const [updateEmailNotificationsMutation] = useMutation(updateEmailNotifications);
+  const [updatePushNotificationsMutation] = useMutation(updatePushNotifications);
+
+  const { data: profileData } = useQuery(GetProfile, {
+    onCompleted: data => setIsTwoFactorEnabled(data.getProfile.user.twoFactorAuth),
+  });
   const { data: pushData } = useQuery(updatedPushNotifications, {
     variables: { getUpdatedPushNotificationsId: user?.userId },
+    onCompleted: data => setPushEnabled(data.getUpdatedPushNotifications),
   });
-  const [pushEnabled, setPushEnabled] = useState(
-    pushData?.getUpdatedPushNotifications || false,
-  );
-  const { data } = useQuery(updatedEmailNotifications, {
+  const { data: emailData } = useQuery(updatedEmailNotifications, {
     variables: { getUpdatedEmailNotificationsId: user?.userId },
+    onCompleted: data => setEmailEnabled(data.getUpdatedEmailNotifications),
   });
-  const [emailEnabled, setEmailEnabled] = useState(
-    data?.getUpdatedEmailNotifications || false,
-  );
 
-  const handleThemeChange = (e: { target: { value: any } }) => {
+  const [pushEnabled, setPushEnabled] = useState(false);
+  const [emailEnabled, setEmailEnabled] = useState(false);
+
+  const handleEnableTwoFactor = async () => {
+    try {
+      await enableTwoFactorAuth({ variables: { email: user?.email } });
+      setIsTwoFactorEnabled(true);
+    } catch (error) {
+      console.error("Error enabling two-factor authentication:", error);
+    }
+  };
+
+  const handleDisableTwoFactor = async () => {
+    try {
+      await disableTwoFactorAuth({ variables: { email: user?.email } });
+      setIsTwoFactorEnabled(false);
+    } catch (error) {
+      console.error("Error disabling two-factor authentication:", error);
+    }
+  };
+
+  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const { value } = e.target;
     setTheme(value);
-    localStorage.setItem('color-theme', colorTheme);
+    localStorage.setItem('color-theme', value);
   };
-  const defaultTheme: any = colorTheme;
-  const userLang = window.navigator.language;
 
-  const handleLanChange = (e: { target: { value: any } }) => {
+  const userLang = window.navigator.language;
+  const handleLanChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const { value } = e.target;
-    i18next.changeLanguage(value);
+    i18next.changeLanguage(value).catch((error) => {
+      console.error("Error changing language:", error);
+    });
   };
 
   const handleEmailNotificationChange = async () => {
     try {
-      const { data } = await updateEmailNotificationsMutation({
+      await updateEmailNotificationsMutation({
         variables: { updateEmailNotificationsId: user?.userId },
       });
-      setEmailEnabled((prevEmailEnabled: any) => !prevEmailEnabled);
-      return data;
-    } catch (error: any) {
-      return `Error updating email notifications:${error}`;
+      setEmailEnabled((prevEmailEnabled) => !prevEmailEnabled);
+    } catch (error) {
+      console.error("Error updating email notifications:", error);
     }
   };
 
   const handlePushNotificationChange = async () => {
     try {
-      const { data: pushData } = await updatePushNotificationsMutation({
+      await updatePushNotificationsMutation({
         variables: { updatePushNotificationsId: user?.userId },
       });
-      setPushEnabled((prevPushEnabled: any) => !prevPushEnabled);
-      return pushData;
-    } catch (error: any) {
-      return `Error updating push notifications: ${error}`;
+      setPushEnabled((prevPushEnabled) => !prevPushEnabled);
+    } catch (error) {
+      console.error("Error updating push notifications:", error);
     }
   };
 
-  useEffect(() => {
-    if (data?.getUpdatedEmailNotifications !== undefined) {
-      setEmailEnabled(data.getUpdatedEmailNotifications);
-    }
-  }, [data]);
-
-  useEffect(() => {
-    if (pushData?.getUpdatedPushNotifications !== undefined) {
-      setPushEnabled(pushData.getUpdatedPushNotifications);
-    }
-  }, [pushData]);
-
   useEffect(() => {
     if (lanRef.current) {
       lanRef.current.value = lan;
@@ -132,9 +152,9 @@ function Settings() {
                 </p>
               </div>
               <select
-                value={defaultTheme}
+                value={colorTheme}
                 data-testid="themeChange"
-                onChange={(e) => handleThemeChange(e)}
+                onChange={handleThemeChange}
                 className="ml-auto bg-white border border-gray-400 px-[2vh] h-8 rounded-md text-xs md:text-sm text-gray-600 dark:text-dark-text-fill dark:bg-dark-bg outline-none"
               >
                 <option value="light">{t('Light theme')}</option>
@@ -154,7 +174,7 @@ function Settings() {
                 defaultValue={userLang}
                 data-testid="lanChange"
                 ref={lanRef}
-                onChange={(e) => handleLanChange(e)}
+                onChange={handleLanChange}
                 className="ml-auto bg-white border px-2 h-8 rounded-md text-xs md:text-sm text-gray-600 dark:text-dark-text-fill dark:bg-dark-bg outline-none"
               >
                 <option value="en">English</option>
@@ -217,34 +237,32 @@ function Settings() {
             <li className="flex items-center border-b border-gray-400 pt-2 pb-1">
               <div className="w-[33vw]">
                 <h1 className="font-bold dark:text-dark-text-fill">
-                  {t('Privacy and Security')}
-                </h1>
-                <p className="text-sm text-gray-600 dark:text-dark-text-fill">
-                  {t('Privacy and Security')}
-                </p>
-              </div>
-              <Link
-                className="ml-auto mt-2 text-xs md:text-base text-gray-600 dark:text-dark-text-fill"
-                to="#link"
-              >
-                <h4>{t('Change')}</h4>
-              </Link>
-            </li>
-            <li className="flex items-center pt-2 pb-1">
-              <div className="w-[33vw]">
-                <h1 className="font-bold dark:text-dark-text-fill">
-                  {t('Login Activity')}
+                  {t('Two-factor authentication')}
                 </h1>
                 <p className="text-sm text-gray-600 dark:text-dark-text-fill">
-                  {t('History of your login sessions')}
+                  {t('Get extra security by receiving a code on your email')}
                 </p>
               </div>
-              <Link
-                to="#link"
-                className="ml-auto mt-2 text-xs md:text-base text-gray-600 dark:text-dark-text-fill"
+              <Switch
+                checked={isTwoFactorEnabled}
+                data-testid="2faChange"
+                onChange={
+                  isTwoFactorEnabled
+                    ? handleDisableTwoFactor
+                    : handleEnableTwoFactor
+                }
+                className={`ml-auto border ${
+                  isTwoFactorEnabled ? 'dark:border-primary' : ''
+                } relative inline-flex h-6 w-12 items-center rounded-full`}
               >
-                <h4>{t('View')}</h4>
-              </Link>
+                <span
+                  className={`${
+                    isTwoFactorEnabled
+                      ? 'bg-primary   translate-x-6'
+                      : 'bg-gray-300 translate-x-1'
+                  } inline-block h-4 w-4 transform rounded-full`}
+                />
+              </Switch>
             </li>
           </div>
         </div>
diff --git a/tests/pages/LoginWith2fa.test.tsx b/tests/pages/LoginWith2fa.test.tsx
new file mode 100644
index 00000000..515c4b4d
--- /dev/null
+++ b/tests/pages/LoginWith2fa.test.tsx
@@ -0,0 +1,154 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider } from '@apollo/client/testing';
+import { useNavigate, useLocation } from 'react-router-dom';
+import TwoFactorPage from '../../src/pages/LoginWith2fa';
+import { BrowserRouter } from 'react-router-dom';
+import { LOGIN_WITH_2FA } from '../../src/pages/LoginWith2fa';
+import { UserContext } from '../../src/hook/useAuth';
+import React from 'react';
+
+// Mock the navigate and location hooks
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+  useLocation: () => ({
+    state: {
+      email: "user@example.com",
+      TwoWayVerificationToken: "test-token"
+    }
+  })
+}));
+
+// Mock UserContext
+const mockLogin = jest.fn();
+interface UserContextWrapperProps {
+    children: React.ReactNode;
+  }
+  
+  const UserContextWrapper: React.FC<UserContextWrapperProps> = ({ children }) => (
+    <UserContext.Provider value={{ login: mockLogin }}>
+      {children}
+    </UserContext.Provider>
+  );
+const mocks = [
+  {
+    request: {
+      query: LOGIN_WITH_2FA,
+      variables: {
+        email: "user@example.com",
+        otp: "123456",
+        TwoWayVerificationToken: "test-token",
+      },
+    },
+    result: {
+      data: {
+        loginWithTwoFactorAuthentication: {
+          token: "jwt-token",
+          user: {
+            id: "1",
+            role: "trainee",
+            email: "user@example.com",
+            profile: {
+              id: "1",
+              firstName: "John",
+              lastName: "Doe",
+              name: "John Doe",
+              address: "",
+              city: "",
+              country: "",
+              phoneNumber: "",
+              biography: "",
+              avatar: "",
+              cover: "",
+            },
+          },
+          message: "Login successful",
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: LOGIN_WITH_2FA,
+      variables: {
+        email: "user@example.com",
+        otp: "654321",
+        TwoWayVerificationToken: "test-token",
+      },
+    },
+    result: {
+      errors: [{ message: "Invalid OTP" }],
+    },
+  },
+];
+
+describe('TwoFactorPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('submits OTP and navigates on success', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserContextWrapper>
+          <TwoFactorPage />
+        </UserContextWrapper>
+      </MockedProvider>
+    );
+
+    // Type OTP digits
+    for (let i = 0; i < 6; i++) {
+      const input = screen.getByTestId(`otp-input-${i}`);
+      await userEvent.type(input, String(i + 1));
+    }
+
+    // Get and click submit button
+    const submitButton = screen.getByRole('button', { name: /verify(ing)?/i });
+    
+    // Wait for the button to be enabled after all inputs are filled
+    // await waitFor(() => {
+    //   expect(submitButton).not.toBeDisabled();
+    // });
+
+    await userEvent.click(submitButton);
+
+    // Wait for success message and navigation
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalled();
+      expect(mockNavigate).toHaveBeenCalledWith('/performance', { replace: true });
+    });
+  });
+
+  test('displays an error message on failed OTP submission', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <UserContextWrapper>
+          <TwoFactorPage />
+        </UserContextWrapper>
+      </MockedProvider>
+    );
+
+    // Type incorrect OTP
+    for (let i = 0; i < 6; i++) {
+      const input = screen.getByTestId(`otp-input-${i}`);
+      await userEvent.type(input, String(6 - i));
+    }
+
+    // Get and click submit button
+    const submitButton = screen.getByRole('button', { name: /verify(ing)?/i });
+    
+    // await waitFor(() => {
+    //   expect(submitButton).not.toBeDisabled();
+    // });
+
+    await userEvent.click(submitButton);
+
+    // Check for error message
+    await waitFor(() => {
+      expect(screen.getByText('Invalid OTP')).toBeInTheDocument();
+    });
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});
\ No newline at end of file