diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index 0952f022..84b46aeb 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -88,7 +88,6 @@ const LoginPage = () => {
             <label className="form-label" htmlFor="password">
               Password
             </label>
-      
           </div>
           <div className="input-group input-group-merge">
             <input
@@ -101,16 +100,22 @@ const LoginPage = () => {
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
               aria-describedby="password"
             />
-            <span
-              className="input-group-text cursor-pointer"
+            <button
+              type="button"
+              className="btn border-top border-end border-bottom"
               onClick={() => setHidepass(!hidepass)}
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 0,
+              }}
             >
               {hidepass ? (
-                <i className="bx bx-hide"></i>
+                <i className="bx bx-hide" />
               ) : (
-                <i className="bx bx-show"></i>
+                <i className="bx bx-show" />
               )}
-            </span>
+            </button>
           </div>
           {errors.password && (
             <div
@@ -130,16 +135,14 @@ const LoginPage = () => {
               name="rememberMe"
               {...register("rememberMe")}
             />
-            <label className="form-check-label ms-2" >
-              Remember Me
-            </label>
+            <label className="form-check-label ms-2">Remember Me</label>
           </div>
           <Link
-              aria-label="Go to Forgot Password Page"
-              to="/auth/forgot-password"
-            >
-              <span>Forgot Password?</span>
-            </Link>
+            aria-label="Go to Forgot Password Page"
+            to="/auth/forgot-password"
+          >
+            <span>Forgot Password?</span>
+          </Link>
         </div>
         <div className="mb-3">
           <button
diff --git a/src/pages/authentication/ResetPasswordPage.jsx b/src/pages/authentication/ResetPasswordPage.jsx
index de1984b9..1f4afd80 100644
--- a/src/pages/authentication/ResetPasswordPage.jsx
+++ b/src/pages/authentication/ResetPasswordPage.jsx
@@ -118,16 +118,23 @@ const ResetPasswordPage = () => {
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
               aria-describedby="password"
             />
-            <span
-              className="input-group-text lcursor-pointer"
+            <button
+              type="button"
+              className="btn btn-outline-secondy border-top border-end border-bottom "
               onClick={() => setHidepass(!hidepass)}
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 0,
+                
+              }}
             >
               {hidepass ? (
-                <i className="bx bx-hide"></i>
+                <i className="bx bx-hide" />
               ) : (
-                <i className="bx bx-show"></i>
+                <i className="bx bx-show" />
               )}
-            </span>
+            </button>
           </div>
           {errors.password && (
             <div
@@ -154,16 +161,23 @@ const ResetPasswordPage = () => {
               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
               aria-describedby="password"
             />
-            <span
-              className="input-group-text cursor-pointer"
+             <button
+              type="button"
+              className="btn border-top border-end border-bottom "
               onClick={() => setHidepass1(!hidepass1)}
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderLeft: 0,
+                
+              }}
             >
               {hidepass1 ? (
-                <i className="bx bx-hide"></i>
+                <i className="bx bx-hide" />
               ) : (
-                <i className="bx bx-show"></i>
+                <i className="bx bx-show" />
               )}
-            </span>
+            </button>
           </div>
           {errors.confirmPassword && (
             <div