keycloak-aplcache

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 6297113..907aeac 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
@@ -5,7 +5,7 @@ doRemove=Remove
 doAdd=Add
 doSignOut=Sign Out
 doLogIn=Log In
-
+doLink=Link
 
 
 editAccountHtmlTitle=Edit Account
@@ -254,3 +254,13 @@ allApps=All applications
 internalApps=Internal applications
 thirdpartyApps=Third-Party applications
 appResults=Results
+
+# Linked account
+authorizedProvider=Authorized Provider
+authorizedProviderMessage=Authorized Providers linked with your account
+identityProvider=Identity Provider
+identityProviderMessage=To link your account with identity providers you have configured
+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.

diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
index d86e441..c3de5ff 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
@@ -1 +1,124 @@
-<h1>Placeholder for Linked Accounts Page (formerly known as Federated Identity)</h1>
\ No newline at end of file
+<div class="page-header">
+  <h1>{{'linkedAccountsHtmlTitle' | translate}}</h1>
+</div>
+<div class="col-sm-12 card-pf card-linked-account">
+  <div class="card-pf-body row">
+    <div class="col-md-3">
+      <div class="card-pf-subtitle">
+        {{'authorizedProvider' | translate}}
+      </div>
+      <div class="introMessage">
+        <p>{{'authorizedProviderMessage' | translate}}</p>
+      </div>
+    </div>
+    <div class="col-md-9">
+      <div class="list-group list-view-pf list-view-pf-view">
+        <div class="list-group-item">
+          <div class="list-view-pf-actions">
+            <a href="#" data-toggle="modal" data-target="#myModal">{{'doRemove' | translate}}</a>
+          </div>
+          <div class="list-view-pf-main-info">
+            <div class="list-view-pf-left">
+              <span class="fa fa-google list-view-pf-icon-sm"></span>
+            </div>
+            <div class="list-view-pf-body">
+              <div class="list-view-pf-description">
+                <div class="list-group-item-heading">
+                  Google
+                </div>
+                <div class="list-group-item-text">
+                  <span class="label label-primary">{{'socialLogin' | translate}}</span>
+                </div>
+              </div>
+              <div class="list-view-pf-additional-info">
+                <span class="fa fa-user"> </span>  zhutaoredhat
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="col-sm-12 card-pf card-linked-account">
+  <div class="card-pf-body row">
+    <div class="col-md-3">
+      <div class="card-pf-subtitle">
+        {{'identityProvider' | translate}}
+      </div>
+      <div class="introMessage">
+        <p>{{'identityProviderMessage' | translate}}</p>
+      </div>
+    </div>
+    <div class="col-md-9">
+      <div class="list-group list-view-pf list-view-pf-view ">
+        <div class="list-group-item">
+          <div class="list-view-pf-actions">
+            <a href="#">{{'doLink' | translate}}</a>
+          </div>
+          <div class="list-view-pf-main-info">
+            <div class="list-view-pf-left">
+              <span class="fa fa-facebook list-view-pf-icon-sm"></span>
+            </div>
+            <div class="list-view-pf-body">
+              <div class="list-view-pf-description">
+                <div class="list-group-item-heading">
+                  Facebook
+                </div>
+                <div class="list-group-item-text">
+                  <span class="label label-primary">{{'socialLogin' | translate}}</span>
+                </div>
+              </div>
+              <div class="list-view-pf-additional-info">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="list-group-item">
+          <div class="list-view-pf-actions">
+            <a href="#">{{'doLink' | translate}}</a>
+          </div>
+          <div class="list-view-pf-main-info">
+            <div class="list-view-pf-left">
+              <span class="fa fa-github list-view-pf-icon-sm"></span>
+            </div>
+            <div class="list-view-pf-body">
+              <div class="list-view-pf-description">
+                <div class="list-group-item-heading">
+                  Github
+                </div>
+                <div class="list-group-item-text">
+                  <span class="label label-primary">{{'socialLogin' | translate}}</span>
+                </div>
+              </div>
+              <div class="list-view-pf-additional-info">
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="myModalLabel">{{'removeAccess' | translate}}</h4>
+      </div>
+      <div class="modal-body">
+        {{'removeAccessMessage' | translate}}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{'doCancel' | translate}}</button>
+        <button type="button" class="btn btn-primary">{{'doRemove' | translate}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- End Modal -->

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 2fbe8f1..39ba300 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
@@ -307,11 +307,35 @@ p.description {
   position: absolute;
   right: 10px;
 }
+/* Linked  Style */
+.list-view-pf-additional-info .fa-user {
+  margin-right: 5px;
+}
+.card-linked-account .list-view-pf .list-group-item-heading {
+    flex: 1 0 calc(40% - 20px);
+}
+.card-linked-account .list-view-pf-additional-info {
+    width: 10%；
+}
+.card-linked-account .list-view-pf .list-group-item-text {
+    width: calc(45% - 40px);
+}
 
 @media (max-width: 767px) {
   .card-pf-application h2 {
     margin-top: -10px;
   }
+  .card-linked-account .card-pf-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .card-linked-account .list-group-item {
+    padding: 10px 0;
+  }
+  .card-linked-account .list-view-pf-additional-info {
+    width: 100%;
+    margin-top: 20px;
+  }
   .card-pf-application h2 a {
     text-decoration: none;
   }