diff --git a/powerauth-webflow/package-lock.json b/powerauth-webflow/package-lock.json
index 02f4f8dfb..494b0ab00 100644
--- a/powerauth-webflow/package-lock.json
+++ b/powerauth-webflow/package-lock.json
@@ -16,6 +16,7 @@
         "lodash": "^4.17.21",
         "react": "^16.14.0",
         "react-bootstrap": "^0.33.1",
+        "react-bootstrap-icons": "^1.10.3",
         "react-device-detect": "^2.2.3",
         "react-dom": "^16.14.0",
         "react-flags-select": "^2.2.3",
@@ -4013,6 +4014,17 @@
         "react-dom": ">=16.3.0"
       }
     },
+    "node_modules/react-bootstrap-icons": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.10.3.tgz",
+      "integrity": "sha512-j4hSby6gT9/enhl3ybB1tfr1slZNAYXDVntcRrmVjxB3//2WwqrzpESVqKhyayYVaWpEtnwf9wgUQ03cuziwrw==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/react-bootstrap/node_modules/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
@@ -7940,6 +7952,14 @@
         }
       }
     },
+    "react-bootstrap-icons": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.10.3.tgz",
+      "integrity": "sha512-j4hSby6gT9/enhl3ybB1tfr1slZNAYXDVntcRrmVjxB3//2WwqrzpESVqKhyayYVaWpEtnwf9wgUQ03cuziwrw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-device-detect": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
diff --git a/powerauth-webflow/package.json b/powerauth-webflow/package.json
index 0f2e28b80..28188bc83 100644
--- a/powerauth-webflow/package.json
+++ b/powerauth-webflow/package.json
@@ -26,6 +26,7 @@
     "lodash": "^4.17.21",
     "react": "^16.14.0",
     "react-bootstrap": "^0.33.1",
+    "react-bootstrap-icons": "^1.10.3",
     "react-device-detect": "^2.2.3",
     "react-dom": "^16.14.0",
     "react-flags-select": "^2.2.3",
diff --git a/powerauth-webflow/src/main/js/components/smsComponent.js b/powerauth-webflow/src/main/js/components/smsComponent.js
index c4894cbd5..fbf0d0e59 100644
--- a/powerauth-webflow/src/main/js/components/smsComponent.js
+++ b/powerauth-webflow/src/main/js/components/smsComponent.js
@@ -15,7 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import {Button, FormControl, FormGroup} from "react-bootstrap";
+import {Button, FormControl, FormGroup, InputGroup } from "react-bootstrap";
+import { Eye, EyeSlashFill } from "react-bootstrap-icons";
 import {FormattedMessage} from "react-intl";
 import React from "react";
 import {authenticate, initializeICAClientSign} from "../actions/smsAuthActions";
@@ -36,6 +37,7 @@ export default class SmsComponent extends React.Component {
         super();
         this.handleAuthCodeChange = this.handleAuthCodeChange.bind(this);
         this.handlePasswordChange = this.handlePasswordChange.bind(this);
+        this.handleToggle = this.handleToggle.bind(this);
         this.handleCertificateChoice = this.handleCertificateChoice.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.updateButtonState = this.updateButtonState.bind(this);
@@ -48,7 +50,7 @@ export default class SmsComponent extends React.Component {
         this.onCertificatesLoaded = this.onCertificatesLoaded.bind(this);
         this.onSignerSucceeded = this.onSignerSucceeded.bind(this);
         this.onSignerFailed = this.onSignerFailed.bind(this);
-        this.state = {authCode: '', password: '', confirmDisabled: true, signerReady: false, signerInitFailed: false, signerError: null, certificates: null, chosenCertificate: null, signedMessage: null};
+        this.state = {authCode: '', password: '', confirmDisabled: true, signerReady: false, signerInitFailed: false, signerError: null, certificates: null, chosenCertificate: null, signedMessage: null, pwdType:'password'};
     }
 
     componentDidMount() {
@@ -68,6 +70,14 @@ export default class SmsComponent extends React.Component {
         this.setState({password: event.target.value}, this.updateButtonState);
     }
 
+    handleToggle(event) {
+        if (this.state.pwdType=='password'){
+            this.setState ({pwdType: 'text'});
+        } else {
+            this.setState ({pwdType: 'password'});
+        }
+    }
+
     handleCertificateChoice(certificate) {
         this.setState({chosenCertificate: certificate});
     }
@@ -320,10 +330,15 @@ export default class SmsComponent extends React.Component {
                                 <FormGroup>
                                     <div className="attribute row">
                                         <div className="col-xs-12">
-                                            <FormControl id="password" autoComplete="new-password" type="password"
-                                                         value={this.state.password} onChange={this.handlePasswordChange}
-                                                         placeholder={formatMessage({id: 'loginSca.password.placeholder',defaultMessage: ' '})}
-                                                         maxLength={passwordMaxLength}/>
+                                            <InputGroup >
+                                                <FormControl id="password" autoComplete="new-password" type={this.state.pwdType}
+                                                             value={this.state.password} onChange={this.handlePasswordChange}
+                                                             placeholder={formatMessage({id: 'loginSca.password.placeholder',defaultMessage: ' '})}
+                                                             maxLength={passwordMaxLength}/>
+                                                <InputGroup.Addon onClick={this.handleToggle} class={(this.state.pwdType=='password') ? 'input-group-addon password-icon-holder password-icon-holder-close' : 'input-group-addon password-icon-holder password-icon-holder-open'} >
+                                                    {(this.state.pwdType=='password') ?  <EyeSlashFill class="password-icon-close" size="2em"/>  : <Eye class="password-icon-open" size="2em" />  }
+                                                </InputGroup.Addon>
+                                             </InputGroup>
                                         </div>
                                     </div>
                                 </FormGroup>