diff --git a/src/components/AuthPages/AuthLayout2.jsx b/src/components/AuthPages/AuthLayout2.jsx
index 641902e..1e7fcb7 100644
--- a/src/components/AuthPages/AuthLayout2.jsx
+++ b/src/components/AuthPages/AuthLayout2.jsx
@@ -12,17 +12,17 @@ export default function LoginLayout({ slogan, children }) {
   const {countryMode} = useContext(DarkModeContext);
 
   return (
-    <div className={`layout-wrapper login`}>
-      <div className={`w-full h-screen overflow-y-auto grid grid-cols-1 lg:grid-cols-2 bg-cover bg-center`} 
-        style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}}
-      >
+    <div className={`h-screen overflow-y-auto bg-cover bg-center`}
+    style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}}
+    >
+      <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
         {/* <div 
             className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
         </div> */}
         <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
-          <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
+          <div className="py-10 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}
             </div>
@@ -56,7 +56,7 @@ export default function LoginLayout({ slogan, children }) {
                 </div>
               </div>
               <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
-                <span className="">&copy; {new Date().getFullYear()} -</span>
+                <span className="dark:text-white">&copy; {new Date().getFullYear()} -</span>
                 <Link to="/" className="text-[#009ef7] ml-1">
                   WrenchBoard
                 </Link>{" "}
diff --git a/src/components/AuthPages/ForgotPassword/index2.jsx b/src/components/AuthPages/ForgotPassword/index2.jsx
index ae7e77f..76f0ac6 100644
--- a/src/components/AuthPages/ForgotPassword/index2.jsx
+++ b/src/components/AuthPages/ForgotPassword/index2.jsx
@@ -99,7 +99,7 @@ export default function ForgotPassword() {
             </Link>
           </div>
           <div className="flex place-content-center">
-            <div className="w-11/12 sm:max-w-[400px]">
+            <div className="w-10/12">
             {msgSuccess == null ?
               <>
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
diff --git a/src/components/AuthPages/Login/index2.jsx b/src/components/AuthPages/Login/index2.jsx
index 9763c86..0e920f5 100644
--- a/src/components/AuthPages/Login/index2.jsx
+++ b/src/components/AuthPages/Login/index2.jsx
@@ -264,7 +264,7 @@ export default function Login() {
           </div>
           {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
           <div className="flex place-content-center">
-            <div className="w-11/12 sm:max-w-[530px]">
+            <div className="w-10/12">
               {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
               {sessionExpired != "true" && (
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
diff --git a/src/components/AuthPages/SignUp/index2.jsx b/src/components/AuthPages/SignUp/index2.jsx
index 2ee3637..e0f57f1 100644
--- a/src/components/AuthPages/SignUp/index2.jsx
+++ b/src/components/AuthPages/SignUp/index2.jsx
@@ -158,7 +158,7 @@ export default function SignUp() {
             </Link>
           </div>
           <div className="flex place-content-center">
-            <div className="w-11/12 sm:max-w-[530px]">
+            <div className="w-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Create Account
diff --git a/src/components/AuthPages/UpdatePassword/index2.jsx b/src/components/AuthPages/UpdatePassword/index2.jsx
index 49567dc..bbced1e 100644
--- a/src/components/AuthPages/UpdatePassword/index2.jsx
+++ b/src/components/AuthPages/UpdatePassword/index2.jsx
@@ -19,7 +19,7 @@ export default function UpdatePassword() {
       <AuthLayout slogan="Welcome to  myFit">
         {updated === false ? (
           <div className="flex place-content-center">
-            <div className="w-11/12 sm:max-w-[600px]">
+            <div className="w-10/12">
               <div className="title-area relative flex flex-col justify-center items-center mb-7">
                 <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
                   Update Password
diff --git a/src/components/AuthPages/VerifyLink/index2.jsx b/src/components/AuthPages/VerifyLink/index2.jsx
index c305b04..bda6a11 100644
--- a/src/components/AuthPages/VerifyLink/index2.jsx
+++ b/src/components/AuthPages/VerifyLink/index2.jsx
@@ -132,7 +132,7 @@ export default function VerifyLink() {
               </Link>
             </div>
             <div className="flex place-content-center">
-              <div className="w-11/12 sm:max-w-[500px]">
+              <div className="w-10/12">
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                   <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                     {linkSuccess
diff --git a/src/components/AuthPages/VerifyPassword/index2.jsx b/src/components/AuthPages/VerifyPassword/index2.jsx
index 47b220a..0d3c89b 100644
--- a/src/components/AuthPages/VerifyPassword/index2.jsx
+++ b/src/components/AuthPages/VerifyPassword/index2.jsx
@@ -152,7 +152,7 @@ const VerifyPassword = () => {
             {requestStatus.loading ? (
               <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
             ) : !requestStatus.loading && requestStatus.status ? (
-              <div className="w-11/12 sm:max-w-[500px]">
+              <div className="w-10/12">
                 {linkSuccess == null ? (
                   <>
                     <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
diff --git a/src/components/AuthPages/VerifyYou/index2.jsx b/src/components/AuthPages/VerifyYou/index2.jsx
index 09d0635..5c28f52 100644
--- a/src/components/AuthPages/VerifyYou/index2.jsx
+++ b/src/components/AuthPages/VerifyYou/index2.jsx
@@ -18,7 +18,7 @@ export default function VerifyYou() {
             </Link>
           </div>
           <div className="flex place-content-center">
-            <div className="w-11/12 sm:max-w-[500px]">
+            <div className="w-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Let's verify your email now