diff --git a/themes/src/main/resources/theme/base/account/messages/messages_en.properties b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
index 907aeac359..3374227277 100755
--- a/themes/src/main/resources/theme/base/account/messages/messages_en.properties
+++ b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
@@ -264,3 +264,22 @@ socialLogin=Socail Login
 userDefined=User Defined
 removeAccess=Remove Access
 removeAccessMessage=You will need to grant access again, if you want to use this app account.
+
+#Authenticator
+authenticatorStatusMessage=Two-factor authentication is currently
+authenticatorFinishSetUpTitle=Your Two-Factor Authentication
+authenticatorFinishSetUpMessage=Each time you sign in to your Keycloak account, you will be asked to provide a two-factor authentication code.
+authenticatorSubTitle=Set Up Two-Factor Authentication
+authenticatorSubMessage=To enhance the security of your account, enable at least one of the available two-factor authentication methods.
+authenticatorMobileTitle=Mobile Authenticator
+authenticatorMobileMessage=Use mobile Authenticator to get Verification codes as the two-factor authentication.
+authenticatorMobileFinishSetUpMessage=The authenticator has been bound to your phone.
+authenticatorActionSetup=Set up
+authenticatorSMSTitle=SMS Code
+authenticatorSMSMessage=Keycloak will send the Verification code to your phone as the two-factor authentication.
+authenticatorSMSFinishSetUpMessage=Text messages are sent to
+authenticatorDefaultStatus=Default
+authenticatorChangePhone=Change Phone Number
+authenticatorBackupCodesTitle=Backup Codes
+authenticatorBackupCodesMessage=Get your 8-digit backup codes
+authenticatorBackupCodesFinishSetUpMessage=12 backup codes was generated at this time. Each one can be used once.
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html
index f490c06d00..1bec59cd6c 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/authenticator-page.component.html
@@ -1,46 +1,114 @@
 <div class="page-header">
-    <h1>Authenticator</h1>
+    <h1>{{'authenticatorTitle' | translate}}</h1>
 </div>
 
-<div class="col-sm-9 content-area">
+<div class="col-sm-12 card-pf">
+  <div class="card-pf-body p-b">
+    <span class="label label-default m-r">OFF</span>
+    <!-- <span class="label label-primary m-r">ON</span> -->
+    {{'authenticatorStatusMessage' | translate}} off
+  </div>
+</div>
 
-    <ol>
-        <li>
-            <p>Install <a href="https://fedorahosted.org/freeotp/" target="_blank">FreeOTP</a> or Google Authenticator on your device. Both applications are available in <a href="https://play.google.com">Google Play</a> and Apple App Store.</p>
-        </li>
-        <li>
-            <p>Open the application and scan the barcode or enter the key.</p>
-            <p><img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACiElEQVR42u2ZTa6jMBCEG7FgyRF8k+RilkDiYuEmHIGlF4ieqm7+3sxodqP2IiwQ+Eskx+4qlx3Rf16bfPmX/1++ikijYyovGbSb0dp9JKMRr1XwQXVesxTpVUuj09LpmpOBKngW9HoUeeO18Kazbkmamvg6LBhVEcUtyUtyZRz9L69eF3n1Y+L8V8Rt/nH7eH1ipJs/6yOQizdgkB+33/QVyA+nwaja+Mqw/M2f4jj6jwlv1eoTv6RVOFG7sByq4KqL7uSzTtrxl+BjqNn9Gt9Yjg7Dv/G0e33CHyn3e3yDORp8/imiwk/iScSWmyr4lmx96fZ+dH+EieM789n/YO59bc1/3B9Zp0net//E8izef1hjMn+0mu2u+gjn8GprxVN50x8//fTQfzAn+vRMDVCNCIoA84/rqo9gvrYL5lo8H9J6fP4f/hPMj/WvHFWZbc3+4e+xPLvXCEfV/YdKv/wnnLdsHZNaPrQkhuiwFKmEA8F1JpUjHyrXZ3E7r4LDa6CfZK22P7EiMBFVwuVwHexPjpU63/4dzkczRM/XZkcmHZ0r4e7akqzXDLFqcpf3vb6Ecgqa/Yeqt+SvpqlqONY6zj93xdf8D/rMZ7Ec14e7TguJth3YoXQ7bqiBr9ywgxemfjxtrARcl39HcztaQHSgicuRrwfuCbQS7hs6UxKPPjj/limGOriVpnrgZ4gQyl26+ZFfI7ldzF+CTYCwKn18X30d/MxfQBNRy+iQU/fjfDWS8/zIzgfPXae1PfQTzO18MHv+x61VPxO566MGPqilVtM3pb081ucaOHq9n/mLi8xz/Q7mx/mlh8Tm1Pytn2hu+uH5KqO12PkClFQarYN//7/68mr5LwnkYjOKw3BlAAAAAElFTkSuQmCC" alt="Figure: Barcode"></p>
-            <p><span class="code">MVFU 4UKB IYZU 2RBZ NJSW 2MTK NQZT QVBZ</span></p>
-        </li>
-        <li>
-            <p>Enter the one-time code provided by the application and click Save to finish the setup.</p>
-        </li>
-    </ol>
-
-    <hr>
-
-    <form action="http://localhost:8180/auth/realms/master/account/totp" class="form-horizontal" method="post">
-        <input id="stateChecker" name="stateChecker" value="7L6A5K0Mghuc4cm2DBF78rIMI5140AnKc01_q3Pj-4o" type="hidden">
-        <div class="form-group">
-            <div class="col-sm-2 col-md-2">
-                <label for="totp" class="control-label">One-time code</label>
-            </div>
-
-            <div class="col-sm-10 col-md-10">
-                <input class="form-control" id="totp" name="totp" autocomplete="off" autofocus="" type="text">
-                <input id="totpSecret" name="totpSecret" value="eKNQAF3MD9jem2jl38T9" type="hidden">
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
-                <div class="">
-                    <button type="submit" class="btn btn-primary btn-lg" name="submitAction" value="Save">Save</button>
-                    <button type="submit" class="btn btn-default btn-lg" name="submitAction" value="Cancel">Cancel</button>
+<div class="col-sm-12 card-pf">
+  <div class="card-pf-body row">
+    <div class="col-sm-4 col-md-4">
+      <div class="card-pf-subtitle">
+          {{'authenticatorFinishSetUpTitle' | translate}}
+      </div>
+      <div class="introMessage">
+          <p>{{'authenticatorFinishSetUpMessage' | translate}}</p>
+      </div>
+    </div>
+    <div class="col-sm-8 col-md-8">
+      <div class="list-pf list-pf-stacked list-authenticator">
+        <div class="list-authenticator-item">
+          <div class="list-pf-container">
+            <div class="list-pf-content list-pf-content-flex ">
+              <div class="list-pf-left">
+                <span class="fa fa-google list-pf-icon"></span>
+              </div>
+              <div class="list-pf-content-wrapper">
+                <div class="list-pf-main-content">
+                  <div class="list-pf-title text-overflow-pf">
+                    {{'authenticatorMobileTitle' | translate}}
+                    <span class="label label-default authenticator-label">{{'authenticatorDefaultStatus' | translate}}</span>
+                  </div>
+                  <div class="list-pf-description">
+                    {{'authenticatorMobileFinishSetUpMessage' | translate}}
+                  </div>
+                  <div class="top-margin-m authenticator-entry">
+                    <a href="javascript:void(0)">{{'authenticatorChangePhone' | translate}}</a>
+                  </div>
                 </div>
+              </div>
+              <div class="list-pf-actions">
+                <div class="dropdown pull-right dropdown-kebab-pf">
+                  <button id="dropdownKebabRight" class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="fa fa-ellipsis-v"></span>
+                  </button>
+                  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+                    <li><a href="javascript:void(0)">{{'doRemove' | translate}}</a></li>
+                  </ul>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
-    </form>
-
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="col-sm-12 card-pf">
+  <div class="card-pf-body row">
+    <div class="col-sm-4 col-md-4">
+      <div class="card-pf-subtitle">
+          {{'authenticatorSubTitle' | translate}}
+      </div>
+      <div class="introMessage">
+          <p>{{'authenticatorSubMessage' | translate}}</p>
+      </div>
+    </div>
+    <div class="col-sm-8 col-md-8">
+      <div class="list-pf list-pf-stacked list-authenticator">
+        <div class="list-authenticator-item">
+          <div class="list-pf-container">
+            <div class="list-pf-content list-pf-content-flex">
+              <div class="list-pf-left">
+                <span class="fa fa-mobile list-pf-icon"></span>
+              </div>
+              <div class="list-pf-content-wrapper">
+                <div class="list-pf-main-content">
+                  <div class="list-pf-title text-overflow-pf">{{'authenticatorSMSTitle' | translate}}</div>
+                  <div class="list-pf-description">{{'authenticatorSMSMessage' | translate}}</div>
+                </div>
+              </div>
+              <div class="list-pf-actions">
+                <a class="btn btn-link" href="javascript:void(0)">{{'authenticatorActionSetup' | translate}}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="list-authenticator-item">
+          <div class="list-pf-container">
+            <div class="list-pf-content list-pf-content-flex ">
+              <div class="list-pf-left">
+                <span class="fa fa-lock list-pf-icon list-pf-icon-large"></span>
+              </div>
+              <div class="list-pf-content-wrapper">
+                <div class="list-pf-main-content">
+                  <div class="list-pf-title text-overflow-pf">{{'authenticatorBackupCodesTitle' | translate}}</div>
+                  <div class="list-pf-description">{{'authenticatorBackupCodesMessage' | translate}}</div>
+                </div>
+              </div>
+              <div class="list-pf-actions">
+                <a class="btn btn-link" href="javascript:void(0)">{{'authenticatorActionSetup' | translate}}</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
index 39ba300789..ddf912c206 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
@@ -357,3 +357,41 @@ p.description {
     display: none;
   }
 }
+
+
+/* authenticator style */
+.list-pf {
+    border-bottom: 0;
+}
+.list-authenticator {
+    margin: 0 0 30px 0;
+}
+.list-authenticator-item {
+    border-color: #ededed;
+    border-left-color: #fff;
+    border-right-color: #fff;
+    border-style: solid;
+    border-width: 1px;
+    border-top: none;
+}
+.list-authenticator .list-pf-icon {
+  font-size: 1.8em;
+  height: 20px;
+  line-height: 30px;
+  width: 10px;
+  align-items: normal;
+}
+.list-authenticator .list-pf-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+.top-margin-m {
+    margin-top: 16px;
+}
+.authenticator-entry {
+    font-size: 14px;
+}
+.authenticator-label {
+    font-size: 75%;
+    margin-left: 4px;
+}