diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss
new file mode 100644
index 0000000..91687b8
--- /dev/null
+++ b/src/components/password/_password.scss
@@ -0,0 +1,93 @@
+/* ===============Password================== */
+.cmp-adaptiveform-password {
+    color: $dark-gray;
+    font-size: $font-md;
+    margin: $field-margin;
+    display: flex;
+    flex-direction: column;
+  }
+  .cmp-adaptiveform-password__label-container{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .cmp-adaptiveform-password__widget {
+    margin-top: $label-top-margin;
+    height: $field-height;
+    border-radius: 0.25rem;
+    border: 1px solid $dark-gray;
+    font-size: $font-md;
+    color: $dark-gray;
+    padding: 0 $field-padding-left;
+    position:relative;
+  }
+  .cmp-adaptiveform-password__longdescription {
+    color: $light-gray;
+    background-color: $very-light-gray;
+    font-size: $font-sm;
+    margin-top: $error-top-margin;
+    margin-bottom: 5px;
+    padding: 10px;
+    p{
+      margin: 0;
+      padding: 0;
+    }
+  }
+  .cmp-adaptiveform-password__shortdescription {
+    font-size: $font-sm;
+    margin-top: $error-top-margin;
+  }
+  .cmp-adaptiveform-password__questionmark{
+    display:inline-block;
+    width:1rem;
+    height:1rem;
+    border-radius: 9px;
+    background: url(./resources/images/question.svg) center center / cover no-repeat,#969696;
+    cursor : pointer;
+    // below properties for backward compatibility
+    position: absolute;
+    right: 20px;
+  }
+  // below properties for backward compatibility
+  .cmp-adaptiveform-password__label-container .cmp-adaptiveform-password__questionmark{
+    position: unset;
+    right: unset;
+  }
+  .cmp-adaptiveform-password__errormessage{
+    color: $error;
+    font-size: $font-sm;
+    margin-top: $error-top-margin;
+  }
+  .cmp-adaptiveform-password[data-cmp-valid=false]{
+    background: $light-error;
+    border: 0 solid $error;
+    border-inline-start-width: 4px;
+    padding-inline-start: 5px;
+  }
+  .cmp-adaptiveform-password[data-cmp-valid=true]{
+    border: 0 solid $success;
+    border-inline-start-width: 4px;
+    padding-inline-start: 5px;
+  }
+  .cmp-adaptiveform-password__input-wrapper{
+    position:relative;
+  }
+  .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__widget{
+    width:100%
+  }
+  .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon{
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    top: 20px;
+    align-content: center;
+    position: absolute;
+    background-image: url(./resources/images/eye-slash-solid.svg);
+    background-repeat: no-repeat;
+    cursor: pointer;
+    right: 20px;
+  }
+
+  .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon.open {
+    background-image: url(./resources/images/eye-solid.svg);
+}
\ No newline at end of file
diff --git a/src/resources/images/eye-slash-solid.svg b/src/resources/images/eye-slash-solid.svg
new file mode 100644
index 0000000..4104803
--- /dev/null
+++ b/src/resources/images/eye-slash-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="10" width="12.5" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
\ No newline at end of file
diff --git a/src/resources/images/eye-solid.svg b/src/resources/images/eye-solid.svg
new file mode 100644
index 0000000..14d634c
--- /dev/null
+++ b/src/resources/images/eye-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M572.5 241.4C518.3 135.6 410.9 64 288 64S57.7 135.6 3.5 241.4a32.4 32.4 0 0 0 0 29.2C57.7 376.4 165.1 448 288 448s230.3-71.6 284.5-177.4a32.4 32.4 0 0 0 0-29.2zM288 400a144 144 0 1 1 144-144 143.9 143.9 0 0 1 -144 144zm0-240a95.3 95.3 0 0 0 -25.3 3.8 47.9 47.9 0 0 1 -66.9 66.9A95.8 95.8 0 1 0 288 160z"/></svg>
\ No newline at end of file
diff --git a/src/theme.scss b/src/theme.scss
index 73a9b5e..f6eaecc 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -33,3 +33,4 @@
 @import 'src/components/recaptcha/_recaptcha.scss';
 @import 'src/components/verticaltabs/_verticaltabs.scss';
 @import 'src/components/checkbox/_checkbox.scss';
+@import 'src/component/password/_password.scss';
\ No newline at end of file