diff --git a/webapp/components/ChangePassword.spec.js b/webapp/components/Password/Change.spec.js
similarity index 100%
rename from webapp/components/ChangePassword.spec.js
rename to webapp/components/Password/Change.spec.js
diff --git a/webapp/components/ChangePassword.vue b/webapp/components/Password/Change.vue
similarity index 67%
rename from webapp/components/ChangePassword.vue
rename to webapp/components/Password/Change.vue
index dc8cc09da..692243305 100644
--- a/webapp/components/ChangePassword.vue
+++ b/webapp/components/Password/Change.vue
@@ -1,35 +1,18 @@
 <template>
-  <ds-form
-    v-model="formData"
-    :schema="formSchema"
-    @submit="handleSubmit"
-  >
+  <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
     <template>
-      <ds-input
-        id="oldPassword"
-        model="oldPassword"
-        type="password"
-        label="Your old password"
-      />
-      <ds-input
-        id="newPassword"
-        model="newPassword"
-        type="password"
-        label="Your new password"
-      />
+      <ds-input id="oldPassword" model="oldPassword" type="password" label="Your old password"/>
+      <ds-input id="newPassword" model="newPassword" type="password" label="Your new password"/>
       <ds-input
         id="confirmPassword"
         model="confirmPassword"
         type="password"
         label="Confirm new password"
       />
+      {{ formData }}
+      <password-strength :password="newPassword" @change="e => passwordSecure = e.isSecure"/>
       <ds-space margin-top="base">
-        <ds-button
-          :loading="loading"
-          primary
-        >
-          {{ $t('settings.security.change-password.button') }}
-        </ds-button>
+        <ds-button :loading="loading" primary>{{ $t('settings.security.change-password.button') }}</ds-button>
       </ds-space>
     </template>
   </ds-form>
@@ -37,9 +20,13 @@
 
 <script>
 import gql from 'graphql-tag'
+import PasswordStrength from './Strength'
 
 export default {
   name: 'ChangePassword',
+  components: {
+    PasswordStrength
+  },
   data() {
     return {
       formData: {
@@ -56,6 +43,11 @@ export default {
       disabled: true
     }
   },
+  watch: {
+    newPassword() {
+      return 'abcabc1234567!' // this.formData.newPassword
+    }
+  },
   methods: {
     async handleSubmit(data) {
       this.loading = true
diff --git a/webapp/components/Password/Strength.vue b/webapp/components/Password/Strength.vue
new file mode 100644
index 000000000..ad1e141fa
--- /dev/null
+++ b/webapp/components/Password/Strength.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="field">
+    <div class="password-strength-meter">
+      <div class="password-strength-meter-inner" :class="strengthClass"></div>
+    </div>
+    {{ pass }}
+    {{ password }}
+    <p class="help">
+      <span v-if="this.pass" :class="{ insecure: (passwordStrength < 3) }">
+        {{ $t('auth.register.passwordSecurity') }}:
+        <strong>{{ $t(`auth.register.passwordStrength${passwordStrength}`) }}</strong>
+      </span>
+      <span v-else>&nbsp;</span>
+    </p>
+  </div>
+</template>
+
+<script>
+import zxcvbn from 'zxcvbn'
+import { isEmpty } from 'lodash'
+
+export default {
+  props: {
+    password: {
+      type: String,
+      required: true
+    }
+  },
+  name: 'password-meter',
+  data() {
+    return {
+      lastScore: 0,
+      pass: this.password || null
+    }
+  },
+  watch: {
+    password(pass) {
+      // update password when prop is changing
+      this.pass = pass || null
+    }
+  },
+  computed: {
+    /**
+     * passwordStrength is the score calculated by zxcvbn
+     * @return {Number} Password Strength Score
+     */
+    passwordStrength() {
+      /*const score = !isEmpty(this.pass) ? zxcvbn(this.pass).score : 0
+      if (score !== this.lastScore) {
+        this.lastScore = score
+        this.$emit('change', {
+          score,
+          isSecure: Boolean(score >= 3)
+        })
+      }
+      return score*/
+      return 0
+    },
+    strengthClass() {
+      return `strength-${this.passwordStrength}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// TODO export those definitions for reuse?
+// @import 'assets/styles/_variables';
+$grey-lighter: hsl(0, 0%, 86%);
+$red: hsl(12, 51%, 55%);
+$orange: hsl(14, 100%, 53%);
+$yellow: hsl(48, 100%, 67%);
+$green: #4aa41e;
+// @import 'assets/styles/_variables';
+
+.password-strength-meter {
+  position: relative;
+  height: 3px;
+  background: $grey-lighter;
+  margin: 10px auto 6px;
+  border-radius: 3px;
+
+  &:before,
+  &:after {
+    content: '';
+    height: inherit;
+    background: transparent;
+    display: block;
+    border-color: #fff;
+    border-style: solid;
+    border-width: 0 6px 0 6px;
+    box-sizing: border-box;
+    position: absolute;
+    width: calc(20% + 6px);
+    z-index: 10;
+  }
+
+  &:before {
+    left: calc(20% - 6px);
+  }
+  &:after {
+    right: calc(20% - 6px);
+  }
+}
+
+.help {
+  .insecure {
+    strong {
+      color: $red;
+    }
+  }
+}
+
+.password-strength-meter-inner {
+  background: transparent;
+  height: inherit;
+  position: absolute;
+  width: 0;
+  border-radius: inherit;
+  transition: width 0.5s ease-in-out, background 0.25s;
+}
+
+.password-strength-meter-inner {
+  &.strength-0 {
+    background: darken($orange, 40%);
+    width: 20%;
+  }
+  &.strength-1 {
+    background: darken(mix($orange, $yellow, 50%), 30%);
+    width: 40%;
+  }
+  &.strength-2 {
+    background: darken($yellow, 20%);
+    width: 60%;
+  }
+  &.strength-3 {
+    background: darken($green, 10%);
+    width: 80%;
+  }
+  &.strength-4 {
+    background: $green;
+    width: 100%;
+  }
+}
+</style>
diff --git a/webapp/package.json b/webapp/package.json
index 76d7c3e76..385ae37a4 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -56,7 +56,8 @@
     "vue-count-to": "~1.0.13",
     "vue-izitoast": "1.1.2",
     "vue-sweetalert-icons": "~3.2.0",
-    "vuex-i18n": "~1.11.0"
+    "vuex-i18n": "~1.11.0",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@babel/core": "~7.4.3",
diff --git a/webapp/pages/settings/security.vue b/webapp/pages/settings/security.vue
index 376f104e5..a95e14cec 100644
--- a/webapp/pages/settings/security.vue
+++ b/webapp/pages/settings/security.vue
@@ -1,12 +1,12 @@
 <template>
   <ds-card :header="$t('settings.security.name')">
-    <change-password />
+    <change-password/>
   </ds-card>
 </template>
 
 <script>
 import HcEmpty from '~/components/Empty.vue'
-import ChangePassword from '~/components/ChangePassword.vue'
+import ChangePassword from '~/components/Password/Change'
 
 export default {
   components: {
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index e70646e9d..6ce40972b 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -6121,15 +6121,6 @@ jest-message-util@^24.7.1:
   version "24.7.1"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.7.1.tgz#f1dc3a6c195647096a99d0f1dadbc447ae547018"
   integrity sha512-dk0gqVtyqezCHbcbk60CdIf+8UHgD+lmRHifeH3JRcnAqh4nEyPytSc9/L1+cQyxC+ceaeP696N4ATe7L+omcg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/test-result" "^24.7.1"
-    "@jest/types" "^24.7.0"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^2.0.1"
-    micromatch "^3.1.10"
-    slash "^2.0.0"
-    stack-utils "^1.0.1"
 
 jest-mock@^24.7.0:
   version "24.7.0"
@@ -11381,3 +11372,8 @@ zen-observable@^0.8.0:
   version "0.8.13"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.13.tgz#a9f1b9dbdfd2d60a08761ceac6a861427d44ae2e"
   integrity sha512-fa+6aDUVvavYsefZw0zaZ/v3ckEtMgCFi30sn91SEZea4y/6jQp05E3omjkX91zV6RVdn15fqnFZ6RKjRGbp2g==
+
+zxcvbn@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
+  integrity sha1-KOwXzwl0PtyrBW3dixsGJizHPDA=