diff --git a/client/images/hide.png b/client/images/hide.png
new file mode 100644
index 0000000000..62dc80a99b
Binary files /dev/null and b/client/images/hide.png differ
diff --git a/client/images/view.png b/client/images/view.png
new file mode 100644
index 0000000000..c5b58c00a0
Binary files /dev/null and b/client/images/view.png differ
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index d990299322..466e707604 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -1,15 +1,18 @@
-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 viewimg from '../../../images/view.png';
+import hideimg from '../../../images/hide.png';
 
 function LoginForm() {
   const { t } = useTranslation();
-
+  const [showpassword, setShowpassword] = useState(false);
   const dispatch = useDispatch();
+
   function onSubmit(formProps) {
     return dispatch(validateAndLoginUser(formProps));
   }
@@ -48,14 +51,19 @@ 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="form__password-div">
+                  <input
+                    className="form__input"
+                    aria-label={t('LoginForm.PasswordARIA')}
+                    type={showpassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="current-password"
+                    {...field.input}
+                  />
+                  <button onClick={() => setShowpassword(!showpassword)}>
+                    <img src={showpassword ? viewimg : hideimg} alt="" />
+                  </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..64e6f2fe13 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -1,4 +1,4 @@
-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';
@@ -6,6 +6,8 @@ import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
+import viewimg from '../../../images/view.png';
+import hideimg from '../../../images/hide.png';
 
 function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0)
@@ -33,6 +35,7 @@ function validateEmail(email) {
 
 function SignupForm() {
   const { t } = useTranslation();
+  const [showpassword, setShowpassword] = useState(false);
 
   const dispatch = useDispatch();
   function onSubmit(formProps) {
@@ -97,14 +100,19 @@ function SignupForm() {
                 <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}
-                />
+                <div className="form__password-div">
+                  <input
+                    className="form__input"
+                    aria-label={t('SignupForm.PasswordARIA')}
+                    type={showpassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
+                  <button onClick={() => setShowpassword(!showpassword)}>
+                    <img src={showpassword ? viewimg : hideimg} alt="" />
+                  </button>
+                </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error">{field.meta.error}</span>
                 )}
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index d5eca026d8..0fb4bf4f79 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -91,6 +91,28 @@
   margin-left: auto;
   margin-right: auto;
 }
+ 
+.form__password-div {
+	display: flex;
+	align-items: center;
+	max-width: 90vw;
+  width: #{360 / $base-font-size}rem;
+}
+.form__password-div button{
+  display: flex;
+  padding: 0 2px;
+}
+.form__password-div button:focus{
+  box-shadow: none;
+}
+.form__password-div img{
+  width: 30px;
+
+  @media (max-width: 770px) {
+   width: 24px;
+  }
+}
+
 
 // .form [type="submit"] {
 //   @extend %button;