diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index bbc63e93a..57429baa3 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -31,11 +31,7 @@
             ref="password"
             :type="showPassword ? 'text' : 'password'"
           />
-          <span class="click-wrapper" @click="toggleShowPassword">
-            <span class="icon-wrapper" :data-test="iconName">
-              <base-icon class="toggle-icon" :name="iconName" />
-            </span>
-          </span>
+          <show-password @show-password="toggleShowPassword" :iconName="iconName" />
         </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
@@ -60,11 +56,13 @@ import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
+import ShowPassword from '../ShowPassword/ShowPassword.vue'
 
 export default {
   components: {
     LocaleSwitch,
     Logo,
+    ShowPassword,
   },
   data() {
     return {
@@ -100,9 +98,8 @@ export default {
         }
       }
     },
-    toggleShowPassword(event) {
+    toggleShowPassword() {
       this.showPassword = !this.showPassword
-      event.preventDefault()
       this.$nextTick(() => {
         this.$refs.password.$el.children[1].children[1].focus()
         this.$emit('focus')
@@ -116,7 +113,7 @@ export default {
 .login-form {
   width: 80vw;
   max-width: 620px;
-  margin: auto;
+  /* margin: auto; */
 
   .base-button {
     display: block;
@@ -144,28 +141,6 @@ export default {
   outline: none;
   transition: all $duration-short $ease-out;
 
-  .icon-wrapper {
-    margin-right: 2px;
-  }
-
-  .click-wrapper {
-    padding: 8px;
-    align-content: center;
-    color: $text-color-disabled;
-    cursor: pointer;
-  }
-
-  .click-wrapper:hover {
-    &:focus-within {
-      background-color: $background-color-base;
-      border: $input-border-size solid $border-color-active;
-
-      .toggle-icon {
-        color: $text-color-base;
-      }
-    }
-  }
-
   &:focus-within {
     background-color: $background-color-base;
     border: $input-border-size solid $border-color-active;
diff --git a/webapp/components/Registration/RegistrationSlideCreate.vue b/webapp/components/Registration/RegistrationSlideCreate.vue
index 7ac235994..cab0e1cce 100644
--- a/webapp/components/Registration/RegistrationSlideCreate.vue
+++ b/webapp/components/Registration/RegistrationSlideCreate.vue
@@ -40,24 +40,43 @@
           :label="$t('settings.data.labelName')"
           :placeholder="$t('settings.data.namePlaceholder')"
         />
-        <ds-input
-          id="password"
-          model="password"
-          type="password"
-          autocomplete="off"
-          :label="$t('settings.security.change-password.label-new-password')"
-        />
-        <ds-input
-          id="passwordConfirmation"
-          model="passwordConfirmation"
-          type="password"
-          autocomplete="off"
-          :label="$t('settings.security.change-password.label-new-password-confirm')"
-        />
+        <label for="password">
+          {{ $t('settings.security.change-password.label-new-password') }}
+        </label>
+        <div class="password-wrapper">
+          <ds-input
+            id="password"
+            model="password"
+            :type="showPassword ? 'text' : 'password'"
+            autocomplete="off"
+            class="password-field"
+            ref="password"
+          />
+          <show-password
+            @show-password="toggleShowPassword('password')"
+            :iconName="iconNamePassword"
+          />
+        </div>
+        <label for="passwordConfirmation">
+          {{ $t('settings.security.change-password.label-new-password-confirm') }}
+        </label>
+        <div class="password-wrapper">
+          <ds-input
+            id="passwordConfirmation"
+            model="passwordConfirmation"
+            :type="showPasswordConfirm ? 'text' : 'password'"
+            autocomplete="off"
+            class="password-field"
+            ref="confirmPassword"
+          />
+          <show-password
+            @show-password="toggleShowPassword('confirmPassword')"
+            :iconName="iconNamePasswordConfirm"
+          />
+        </div>
         <password-strength class="password-strength" :password="formData.password" />
 
         <email-display-and-verify :email="sliderData.collectedInputData.email" />
-
         <ds-text>
           <input
             id="checkbox0"
@@ -106,6 +125,7 @@ import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
 import { SignupVerificationMutation } from '~/graphql/Registration.js'
+import ShowPassword from '../ShowPassword/ShowPassword.vue'
 
 export default {
   name: 'RegistrationSlideCreate',
@@ -113,6 +133,7 @@ export default {
     PasswordStrength,
     EmailDisplayAndVerify,
     SweetalertIcon,
+    ShowPassword,
   },
   props: {
     sliderData: { type: Object, required: true },
@@ -140,6 +161,8 @@ export default {
       // have checkmarks available.
       termsAndConditionsConfirmed: false,
       recieveCommunicationAsEmailsEtcConfirmed: false,
+      showPassword: false,
+      showPasswordConfirm: false,
     }
   },
   mounted: function () {
@@ -180,6 +203,12 @@ export default {
         this.recieveCommunicationAsEmailsEtcConfirmed
       )
     },
+    iconNamePassword() {
+      return this.showPassword ? 'eye-slash' : 'eye'
+    },
+    iconNamePasswordConfirm() {
+      return this.showPasswordConfirm ? 'eye-slash' : 'eye'
+    },
   },
   watch: {
     termsAndConditionsConfirmed() {
@@ -251,6 +280,21 @@ export default {
       this.submit()
       return true
     },
+    toggleShowPassword(e) {
+      if (e === 'password') {
+        this.showPassword = !this.showPassword
+        this.$nextTick(() => {
+          this.$refs.password.$el.children[1].children[0].focus()
+          this.$emit('focus')
+        })
+      } else {
+        this.showPasswordConfirm = !this.showPasswordConfirm
+        this.$nextTick(() => {
+          this.$refs.confirmPassword.$el.children[1].children[0].focus()
+          this.$emit('focus')
+        })
+      }
+    },
   },
 }
 </script>
@@ -259,4 +303,44 @@ export default {
 .password-strength {
   margin-bottom: 14px;
 }
+
+.password-wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: $input-padding-vertical $space-x-small;
+  padding-left: 0;
+  padding-right: 0;
+  height: $input-height;
+  margin-bottom: 10px;
+  margin-bottom: 16px;
+
+  color: $text-color-base;
+  background: $background-color-disabled;
+
+  border: $input-border-size solid $border-color-softer;
+  border-left: none;
+  border-radius: $border-radius-base;
+  outline: none;
+  transition: all $duration-short $ease-out;
+
+  &:focus-within {
+    background-color: $background-color-base;
+    border: $input-border-size solid $border-color-active;
+
+    .toggle-icon {
+      color: $text-color-base;
+    }
+  }
+
+  .password-field {
+    position: relative;
+    padding-top: 16px;
+    border: none;
+    border-style: none;
+    appearance: none;
+    margin-left: 0;
+    width: 100%;
+  }
+}
 </style>
diff --git a/webapp/components/ShowPassword/ShowPassword.spec.js b/webapp/components/ShowPassword/ShowPassword.spec.js
new file mode 100644
index 000000000..6eb44f6b2
--- /dev/null
+++ b/webapp/components/ShowPassword/ShowPassword.spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+
+import ShowPassword from './ShowPassword.vue'
+
+describe('ShowPassword', () => {
+  describe('State of show password icon', () => {
+    const wrapper = mount(ShowPassword, {
+      propsData: {
+        iconName: 'eye',
+      },
+    })
+
+    it('Shows eye icon by default', () => {
+      expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye')
+    })
+
+    describe('After click', () => {
+      it('Password wrapper emits show-password event', async () => {
+        wrapper.find('.click-wrapper').trigger('click')
+        await Vue.nextTick()
+        expect(wrapper.emitted()).toBeTruthy()
+      })
+
+      it('Shows the slash-eye icon after click', async () => {
+        wrapper.find('.click-wrapper').trigger('click')
+        wrapper.setProps({ iconName: 'eye-slash' })
+        await Vue.nextTick()
+        expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye-slash')
+      })
+    })
+  })
+})
diff --git a/webapp/components/ShowPassword/ShowPassword.vue b/webapp/components/ShowPassword/ShowPassword.vue
new file mode 100644
index 000000000..c31e01b25
--- /dev/null
+++ b/webapp/components/ShowPassword/ShowPassword.vue
@@ -0,0 +1,44 @@
+<template>
+  <span class="click-wrapper" @click="togglePassword">
+    <span class="icon-wrapper" :data-test="iconName">
+      <base-icon class="toggle-icon" :name="iconName" />
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: ['iconName'],
+  emits: ['toggle-password'],
+  methods: {
+    togglePassword(event) {
+      event.preventDefault()
+      this.$emit('show-password')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.icon-wrapper {
+  margin-right: 2px;
+}
+
+.click-wrapper {
+  padding: 8px;
+  align-content: center;
+  color: $text-color-disabled;
+  cursor: pointer;
+}
+
+.click-wrapper:hover {
+  &:focus-within {
+    background-color: $background-color-base;
+    border: $input-border-size solid $border-color-active;
+
+    .toggle-icon {
+      color: $text-color-base;
+    }
+  }
+}
+</style>