diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index 2abd37ee..db070129 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -30,9 +30,7 @@
   width: 45px;
 }
 
-.app-brand-logo-login {
-  width: 100px;
-}
+
 
 .app-brand-logo-border {
   border: 1px solid #d5d5d5;
@@ -164,3 +162,24 @@
 thead tr {
   border-top: 1px solid white;
 }
+
+.app-brand-logo-login {
+  max-width: 50px; /* default for mobile */
+  height: auto;    /* keep aspect ratio */
+}
+
+
+/* Tablet and up (≥768px) */
+@media (min-width: 768px) {
+  .app-brand-logo-login {
+    max-width: 60px;
+  }
+}
+
+/* Desktop and up (≥1200px) */
+@media (min-width: 1200px) {
+  .app-brand-logo-login {
+    max-width: 80px;
+  }
+}
+
diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index 85124986..c95b2642 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -32541,3 +32541,6 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
     var(--bs-dark-contrast)
   );
 }
+.bg-gray-60{
+ background-color:var(--bs-gray-60)
+}
\ No newline at end of file
diff --git a/src/pages/authentication/AuthWrapper.jsx b/src/pages/authentication/AuthWrapper.jsx
index 5c8f0eb9..3b1ed4ca 100644
--- a/src/pages/authentication/AuthWrapper.jsx
+++ b/src/pages/authentication/AuthWrapper.jsx
@@ -14,7 +14,7 @@ export const AuthWrapper = ({ children }) => {
                   to="/"
                   className="app-brand-link gap-2"
                 >
-                  <span className="app-brand-logo rounded-circle " style={{ marginBottom: "625px",marginLeft:"-39px" }}>
+                  <span className="app-brand-logo rounded-circle " >
                     <img
                       src="/img/brand/marco.png"
                       alt="marco-logo"
diff --git a/src/pages/authentication/ForgotPasswordPage.jsx b/src/pages/authentication/ForgotPasswordPage.jsx
index efdf94e4..8a6fc608 100644
--- a/src/pages/authentication/ForgotPasswordPage.jsx
+++ b/src/pages/authentication/ForgotPasswordPage.jsx
@@ -48,7 +48,7 @@ const ForgotPasswordPage = () => {
     }
   }
   return (
-      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
+      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
       <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
         <h4 className="mb-2">Forgot Password? 🔒</h4>
         <p className="mb-4">
diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index 30080e37..835895ae 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -75,7 +75,7 @@ const LoginPage = () => {
   }, [IsLoginWithOTP]);
 
   return (
-    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 ">
+    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
       <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
         <h4 className="mb-2">Welcome to PMS!</h4>
         <p className="mb-4">
@@ -93,7 +93,7 @@ const LoginPage = () => {
             <input
               type="text"
               id="username"
-              className={`form-control ${errors.username ? "is-invalid" : ""}`}
+              className={`form-control  ${errors.username ? "is-invalid" : ""}`}
               placeholder="Enter your email"
               {...register("username")}
               autoFocus
@@ -119,7 +119,7 @@ const LoginPage = () => {
                   <input
                     type={hidepass ? "password" : "text"}
                     id="password"
-                    className={`form-control ${
+                    className={`form-control form-control-sm ${
                       errors.password ? "is-invalid" : ""
                     }`}
                     placeholder="••••••••"
diff --git a/src/pages/authentication/LoginWithOtp.jsx b/src/pages/authentication/LoginWithOtp.jsx
index 2157b4e1..3b8118d3 100644
--- a/src/pages/authentication/LoginWithOtp.jsx
+++ b/src/pages/authentication/LoginWithOtp.jsx
@@ -123,8 +123,9 @@ const LoginWithOtp = () => {
 
 
   return (
-    <AuthWrapper>
-      <div className="otp-verification-wrapper">
+    // <AuthWrapper>
+   <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
+  <div className="block p-4 p-sm-5 bg-gray-60">
         <h4>Verify Your OTP</h4>
         <p className="mb-4">Please enter the 4-digit code sent to your email.</p>
 
@@ -209,8 +210,9 @@ const LoginWithOtp = () => {
 
           )}
         </form>
+        </div>
       </div>
-    </AuthWrapper>
+    // </AuthWrapper>
   );
 };
 
diff --git a/src/pages/authentication/MainForgetPage.jsx b/src/pages/authentication/MainForgetPage.jsx
index 1aabc1e6..b5c26528 100644
--- a/src/pages/authentication/MainForgetPage.jsx
+++ b/src/pages/authentication/MainForgetPage.jsx
@@ -7,9 +7,9 @@ const MainForgetPage = () => {
         <>
 
             <div class="authentication-inner row m-0">
-                <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-3">
-                    <div class="w-100 d-flex justify-content-center">
-                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="img-fluid scaleX-n1-rtl" alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
+                <div class="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
+                    <div class="w-75 h-75 d-flex justify-content-center">
+                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="object-fit-sm-contain " alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
                     </div>
                 </div>
                 <ForgotPasswordPage />
diff --git a/src/pages/authentication/MainLoginWithOTPPage.jsx b/src/pages/authentication/MainLoginWithOTPPage.jsx
new file mode 100644
index 00000000..ea6afa82
--- /dev/null
+++ b/src/pages/authentication/MainLoginWithOTPPage.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import LoginWithOtp from './LoginWithOtp'
+
+const MainLoginWithOTPPage = () => {
+  return (
+    <>
+      <div className="authentication-inner row m-0">
+        <div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
+          <div className="w-100 d-flex justify-content-center">
+            <img
+              src="../../../public/img/illustrations/worker_03.png"
+              className="img-fluid"
+              alt="Login image"
+              width="70%"
+              data-app-dark-img="illustrations/boy-with-rocket-dark.png"
+              data-app-light-img="illustrations/boy-with-rocket-light.png"
+            />
+          </div>
+        </div>
+        <LoginWithOtp />
+      </div>
+    </>
+  )
+}
+
+export default MainLoginWithOTPPage
\ No newline at end of file
diff --git a/src/pages/authentication/MainRegisterPage.jsx b/src/pages/authentication/MainRegisterPage.jsx
index 3a2ef031..bf7c42a4 100644
--- a/src/pages/authentication/MainRegisterPage.jsx
+++ b/src/pages/authentication/MainRegisterPage.jsx
@@ -5,10 +5,10 @@ const MainRegisterPage = () => {
     return (
         <>
 
-            <div class="authentication-inner row m-0">
-                <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-0">
-                    <div class="w-100 d-flex justify-content-center">
-                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="img-fluid scaleX-n1-rtl" alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
+           <div class="authentication-inner row m-0">
+                <div class="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
+                    <div class="w-75 h-75 d-flex justify-content-center">
+                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="object-fit-sm-contain " alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
                     </div>
                 </div>
                 <RegisterPage />
diff --git a/src/pages/authentication/MainResetPasswordPage.jsx b/src/pages/authentication/MainResetPasswordPage.jsx
new file mode 100644
index 00000000..41f9e03a
--- /dev/null
+++ b/src/pages/authentication/MainResetPasswordPage.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import ResetPasswordPage from './ResetPassword'
+
+const MainResetPasswordPage = () => {
+  return (
+      <>
+      <div className="authentication-inner row m-0">
+        <div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
+          <div className="w-100 d-flex justify-content-center">
+            <img
+              src="../../../public/img/illustrations/worker_03.png"
+              className="img-fluid"
+              alt="Login image"
+              width="70%"
+              data-app-dark-img="illustrations/boy-with-rocket-dark.png"
+              data-app-light-img="illustrations/boy-with-rocket-light.png"
+            />
+          </div>
+        </div>
+        <ResetPasswordPage />
+      </div>
+    </>
+  )
+}
+
+export default MainResetPasswordPage
\ No newline at end of file
diff --git a/src/pages/authentication/RegisterPage.jsx b/src/pages/authentication/RegisterPage.jsx
index c3d1000f..6458248c 100644
--- a/src/pages/authentication/RegisterPage.jsx
+++ b/src/pages/authentication/RegisterPage.jsx
@@ -72,24 +72,25 @@ const RegisterPage = () => {
   return (
     <>
 
-      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
+      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
         <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
 
-          <h4 className="mb-2">Adventure starts here 🚀</h4>
-          <p className="mb-3">Make your app management easy and fun!</p>
+          <h4 className="mb-2">Adventure starts here</h4>
+          <p className="mb-2">Make your app management easy and fun!</p>
 
           <form
             id="formAuthentication"
             className="mb-2"
             onSubmit={handleSubmit(onSubmit)}
           >
-            <div className="mb-2 text-start">
+          <div className="row">
+              <div className="mb-2 col-12 col-sm-6 text-start">
               <label htmlFor="organizatioinName" className="form-label">
                 Organization Name
               </label>
               <input
                 type="text"
-                className="form-control"
+                className="form-control form-control-sm"
                 id="organizatioinName"
                 {...register("organizatioinName")}
                 name="organizatioinName"
@@ -105,13 +106,13 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-2 text-start">
+            <div className="mb-2 col-12 col-sm-6 text-start">
               <label htmlFor="email" className="form-label">
                 Email
               </label>
               <input
                 type="text"
-                className="form-control"
+                className="form-control form-control-sm"
                 id="email"
                 name="email"
                 placeholder="Enter your email"
@@ -126,21 +127,21 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-2 form-password-toggle text-start">
+          </div>
+           <div className="row">
+             <div className="mb-2 col-12 col-sm-6 form-password-toggle text-start">
               <label className="form-label" htmlFor="contactperson">
                 Contact Person
               </label>
-              <div className="input-group">
                 <input
                   type="text"
                   id="contactperson"
                   {...register("contactPerson")}
-                  className="form-control"
+                  className="form-control form-control-sm"
                   name="contactPerson"
                   placeholder="Contact Person"
                   aria-describedby="contactperson"
                 />
-              </div>
               {errors.contactPerson && (
                 <div
                   className="danger-text text-start"
@@ -150,21 +151,19 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-2 form-password-toggle text-start">
+            <div className="mb-2 col-12 col-sm-6 form-password-toggle text-start">
               <label className="form-label" htmlFor="contactnumber">
                 Contact Number
               </label>
-              <div className="input-group">
                 <input
                   type="text"
                   id="contactnumber"
                   {...register("contactNumber")}
-                  className="form-control"
+                  className="form-control form-control-sm "
                   name="contactNumber"
                   placeholder="Contact Number"
                   aria-describedby="contactnumber"
                 />
-              </div>
               {errors.contactNumber && (
                 <div
                   className="danger-text text-start"
@@ -174,6 +173,7 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
+           </div>
             <div className="mb-2 form-password-toggle text-start">
               <label className="form-label" htmlFor="contactnumber">
                 About Organization
@@ -181,8 +181,8 @@ const RegisterPage = () => {
               <div className="input-group">
                 <textarea
                   id="about"
-                  className="form-control"
-                  placeholder="about"
+                  className="form-control form-control"
+                  placeholder="About..."
                   aria-label="about"
                   aria-describedby="about"
                   {...register("about")}
@@ -201,9 +201,8 @@ const RegisterPage = () => {
               <label className="form-label" htmlFor="oragnizationSize">
                 Organization Size
               </label>
-              <div className="input-group">
                 <select
-                  className="form-select"
+                  className="form-select form-select-sm"
                   id="oragnizationSize"
                   name="oragnizationSize"
                   {...register("oragnizationSize")}
@@ -216,7 +215,6 @@ const RegisterPage = () => {
                   <option value="100-200">100-200</option>
                   <option value="more than 200">more than 200</option>
                 </select>
-              </div>
               {errors.oragnizationSize && (
                 <div
                   className="danger-text text-start"
@@ -230,9 +228,8 @@ const RegisterPage = () => {
               <label className="form-label" htmlFor="industryId">
                 Industry
               </label>
-              <div className="input-group">
                 <select
-                  className="form-select"
+                  className="form-select form-select-sm"
                   id="industryId"
                   name="industryId"
                   {...register("industryId")}
@@ -249,7 +246,6 @@ const RegisterPage = () => {
                     <option disabled>Loading industries...</option>
                   )}
                 </select>
-              </div>
               {errors.industryId && (
                 <div
                   className="danger-text text-start"
diff --git a/src/pages/authentication/ResetPasswordPage.jsx b/src/pages/authentication/ResetPassword.jsx
similarity index 96%
rename from src/pages/authentication/ResetPasswordPage.jsx
rename to src/pages/authentication/ResetPassword.jsx
index 21b03df0..45cc47af 100644
--- a/src/pages/authentication/ResetPasswordPage.jsx
+++ b/src/pages/authentication/ResetPassword.jsx
@@ -33,7 +33,7 @@ const resetPasswordSchema = z
     path: ["confirmPassword"],
   });
 
-const ResetPasswordPage = () => {
+const ResetPassword = () => {
   const [searchParams] = useSearchParams();
   const [loading, setLoading] = useState(false);
   const [hidepass, setHidepass] = useState(true);
@@ -67,7 +67,6 @@ const ResetPasswordPage = () => {
       navigate("/auth/login", { replace: true });
       // setLoading(false);
     } catch (error) {
-      debugger;
       setLoading(false);
       if (error?.response?.status === 400) {
         showToast("Please check valid Credentials", "error");
@@ -94,7 +93,8 @@ const ResetPasswordPage = () => {
     );
   }
   return (
-    <AuthWrapper>
+     <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
+       <div className="block p-4 p-sm-5 bg-gray-60">
       <h4 className="mb-2">Reset Password? 🔒</h4>
       <p className="mb-4">Enter your email and new password to update.</p>
       <form
@@ -238,8 +238,9 @@ const ResetPasswordPage = () => {
           Back to login
         </Link>
       </div>
-    </AuthWrapper>
+      </div>
+   </div>
   );
 };
 
-export default ResetPasswordPage;
+export default ResetPassword;
diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx
index 181e957f..62b6ea30 100644
--- a/src/router/AppRoutes.jsx
+++ b/src/router/AppRoutes.jsx
@@ -9,7 +9,6 @@ import HomeLayout from "../layouts/HomeLayout";
 import LoginPage from "../pages/authentication/LoginPage";
 import RegisterPage from "../pages/authentication/RegisterPage";
 import ForgotPasswordPage from "../pages/authentication/ForgotPasswordPage";
-import ResetPasswordPage from "../pages/authentication/ResetPasswordPage";
 import ChangePasswordPage from "../pages/authentication/ChangePassword";
 
 // Home & Protected Pages
@@ -46,10 +45,10 @@ const router = createBrowserRouter(
       element: <AuthLayout />,
       children: [
         { path: "/auth/login", element: <MainLogin /> },
-        { path: "/auth/login-otp", element: <LoginWithOtp /> },
+        { path: "/auth/login-otp", element: <MainLoginWithOTPPage /> },
         { path: "/auth/reqest/demo", element: <MainRegisterPage /> },
         { path: "/auth/forgot-password", element: <MainForgetPage /> },
-        { path: "/reset-password", element: <ResetPasswordPage /> },
+        { path: "/reset-password", element: <MainResetPasswordPage /> },
         { path: "/legal-info", element: <LegalInfoCard /> },
         { path: "/auth/changepassword", element: <ChangePasswordPage /> },
       ],