diff --git a/client/images/eye-close.png b/client/images/eye-close.png
new file mode 100644
index 0000000000..62dc80a99b
Binary files /dev/null and b/client/images/eye-close.png differ
diff --git a/client/images/eye-open.png b/client/images/eye-open.png
new file mode 100644
index 0000000000..c5b58c00a0
Binary files /dev/null and b/client/images/eye-open.png differ
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index d990299322..eda6fb4217 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import Button from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
+import eyeClose from '../../../images/eye-close.png';
+import eyeOpen from '../../../images/eye-open.png';
 
 function LoginForm() {
   const { t } = useTranslation();
@@ -14,6 +16,12 @@ function LoginForm() {
     return dispatch(validateAndLoginUser(formProps));
   }
 
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleShow = () => {
+    setShowPassword((prev) => !prev);
+  };
+
   return (
     <Form
       fields={['email', 'password']}
@@ -48,14 +56,22 @@ function LoginForm() {
                 <label htmlFor="password" className="form__label">
                   {t('LoginForm.Password')}
                 </label>
-                <input
-                  className="form__input"
-                  aria-label={t('LoginForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="current-password"
-                  {...field.input}
-                />
+                <div className="password_form">
+                  <input
+                    className="form__input"
+                    aria-label={t('LoginForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="current-password"
+                    {...field.input}
+                  />
+                  <button className="eye_button" onClick={handleShow}>
+                    <img
+                      src={showPassword ? eyeClose : eyeOpen}
+                      alt="eye-logo"
+                    />
+                  </button>
+                </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error">{field.meta.error}</span>
                 )}
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index b80f53f107..7b13d9219b 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
@@ -6,6 +7,8 @@ import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
+import eyeClose from '../../../images/eye-close.png';
+import eyeOpen from '../../../images/eye-open.png';
 
 function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0)
@@ -38,6 +41,10 @@ function SignupForm() {
   function onSubmit(formProps) {
     return dispatch(validateAndSignUpUser(formProps));
   }
+  const [showPassword, setShowPassword] = useState(false);
+  const handleShow = () => {
+    setShowPassword((prev) => !prev);
+  };
 
   return (
     <Form
@@ -93,22 +100,43 @@ function SignupForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('SignupForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div style={{ position: 'relative' }}>
+                <p className="form__field">
+                  <label htmlFor="password" className="form__label">
+                    {t('SignupForm.Password')}
+                  </label>
+                  <div className="password_form">
+                    <input
+                      className="form__input"
+                      aria-label={t('SignupForm.PasswordARIA')}
+                      type={showPassword ? 'text' : 'password'}
+                      id="password"
+                      autoComplete="new-password"
+                      {...field.input}
+                    />
+                    <button
+                      type="button"
+                      className="eye_button"
+                      onClick={handleShow}
+                      style={{
+                        fontSize: '25px',
+                        position: 'absolute',
+                        top: '38%',
+                        right: '2px',
+                        paddingTop: '4.5px'
+                      }}
+                    >
+                      <img
+                        src={showPassword ? eyeClose : eyeOpen}
+                        alt="eye-logo"
+                      />
+                    </button>
+                  </div>
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+              </div>
             )}
           </Field>
           <Field name="confirmPassword">
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index d5eca026d8..a49200586d 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -92,6 +92,27 @@
   margin-right: auto;
 }
 
+.password_form {
+  position: relative; 
+}
+
+.eye_button {
+  position: absolute; 
+  top: 50%; 
+  right: 10px; 
+  transform: translateY(-50%); 
+  background: none;
+  border: none; 
+  padding: 0; 
+  cursor: pointer; 
+}
+
+.eye_button img {
+  width: 24px; 
+  height: auto; 
+}
+
+
 // .form [type="submit"] {
 //   @extend %button;
 //   padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem;