diff --git a/fittrackee_client/src/components/Common/PasswordInput.vue b/fittrackee_client/src/components/Common/PasswordInput.vue
index 8e39c336..75a13877 100644
--- a/fittrackee_client/src/components/Common/PasswordInput.vue
+++ b/fittrackee_client/src/components/Common/PasswordInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="password-input">
     <input
-      id="password"
+      :id="id"
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
@@ -35,6 +35,7 @@
   interface Props {
     checkStrength?: boolean
     disabled?: boolean
+    id?: string
     password?: string
     placeholder?: string
     required?: boolean
@@ -43,10 +44,11 @@
   const props = withDefaults(defineProps<Props>(), {
     checkStrength: false,
     disabled: false,
+    id: 'password',
     password: '',
     required: false,
   })
-  const { checkStrength, disabled, password, placeholder, required } =
+  const { checkStrength, disabled, id, password, placeholder, required } =
     toRefs(props)
 
   const showPassword: Ref<boolean> = ref(false)
diff --git a/fittrackee_client/src/components/Common/PasswordStength.vue b/fittrackee_client/src/components/Common/PasswordStength.vue
index 5aa35810..a13d01cd 100644
--- a/fittrackee_client/src/components/Common/PasswordStength.vue
+++ b/fittrackee_client/src/components/Common/PasswordStength.vue
@@ -136,10 +136,14 @@
 
     .password-slider::-webkit-slider-thumb,
     .password-slider::-moz-range-thumb {
-      -webkit-appearance: none;
-      appearance: none;
       opacity: 0;
     }
+    .password-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+    }
+    .password-slider::-moz-range-thumb {
+      appearance: none;
+    }
 
     .password-strength-details {
       margin-bottom: $default-margin * 0.5;