diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
index 544762621a..9e265dc87a 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/applications-page/applications-page.component.html
@@ -3,246 +3,253 @@
 </div>
 
 <!--The new application HTML code-->
-<div class="card-pf card-pf-utilization">
+<div class="card-pf card-pf-application">
   <div class="card-pf-body">
     <div class="row toolbar-pf">
       <div class="col-sm-12">
-        <form class="toolbar-pf-actions">
-          <div class="form-group toolbar-pf-filter">
-            <label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
-            <div class="input-group">
-              <div class="input-group-btn">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
+        <div id="toolbar-application-mobile">
+          <h2>
+            <span class="fa fa-angle-right"></span>
+            <a href="javascript:void(0)">Filter</a>
+          </h2>
+        </div>
+        <div id="toolbar-application">
+          <form class="toolbar-pf-actions">
+            <div class="form-group toolbar-pf-filter">
+              <label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
+              <div class="input-group">
+                <div class="input-group-btn">
+                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
+                  <ul class="dropdown-menu">
+                    <li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
+                    <li><a href="#">{{'applicaitonType' | translate}}</a></li>
+                  </ul>
+                </div><!-- /btn-group -->
+                <input type="text" class="form-control" id="filter" placeholder="{{'filterByName' | translate}}">
+              </div><!-- /input-group -->
+            </div>
+            <div class="form-group">
+              <div class="dropdown btn-group">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
                 <ul class="dropdown-menu">
-                  <li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
-                  <li><a href="#">{{'applicaitonType' | translate}}</a></li>
+                  <li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
+                  <li><a href="#">{{'internalApps' | translate}}</a></li>
+                  <li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
                 </ul>
-              </div><!-- /btn-group -->
-              <input type="text" class="form-control" id="filter" placeholder="{{'filterByName' | translate}}">
-            </div><!-- /input-group -->
-          </div>
-          <div class="form-group">
-            <div class="dropdown btn-group">
-              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
-              <ul class="dropdown-menu">
-                <li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
-                <li><a href="#">{{'internalApps' | translate}}</a></li>
-                <li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
-              </ul>
+              </div>
+            </div>
+            <div class="form-group">
+              <input id="app-check" type="checkbox" checked> <label for="app-check"> {{'applicationInUse' | translate}}</label>
+            </div>
+          </form>
+          <div class="row toolbar-pf-results">
+            <div class="col-sm-12">
+              <h5>40 {{'appResults' | translate}}</h5>
+              <p>{{'activeFilters' | translate}}</p>
+              <ul class="list-inline">
+                <li>
+                  <span class="label label-info">
+                    {{'applicaitonName' | translate}}: nameofthething
+                    <a href="#"><span class="pficon pficon-close"></span></a>
+                  </span>
+                </li>
+                <li>
+                  <span class="label label-info">
+                    {{'applicaitonName' | translate}}: nameofthething
+                    <a href="#"><span class="pficon pficon-close"></span></a>
+                  </span>
+                </li>
+                <li>
+                  <span class="label label-info">
+                    {{'applicaitonName' | translate}}: nameofthething
+                    <a href="#"><span class="pficon pficon-close"></span></a>
+                  </span>
+                </li>
+              </ul>
+              <p><a href="#">{{'clearAllFilter' | translate}}</a></p>
             </div>
-          </div>
-          <div class="form-group">
-            <input id="app-check" type="checkbox" checked> <label for="app-check"> {{'applicationInUse' | translate}}</label>
-          </div>
-        </form>
-        <div class="row toolbar-pf-results">
-          <div class="col-sm-12">
-            <h5>40 {{'appResults' | translate}}</h5>
-            <p>{{'activeFilters' | translate}}</p>
-            <ul class="list-inline">
-              <li>
-                <span class="label label-info">
-                  {{'applicaitonName' | translate}}: nameofthething
-                  <a href="#"><span class="pficon pficon-close"></span></a>
-                </span>
-              </li>
-              <li>
-                <span class="label label-info">
-                  {{'applicaitonName' | translate}}: nameofthething
-                  <a href="#"><span class="pficon pficon-close"></span></a>
-                </span>
-              </li>
-              <li>
-                <span class="label label-info">
-                  {{'applicaitonName' | translate}}: nameofthething
-                  <a href="#"><span class="pficon pficon-close"></span></a>
-                </span>
-              </li>
-            </ul>
-            <p><a href="#">{{'clearAllFilter' | translate}}</a></p>
           </div>
         </div>
       </div>
     </div>
 
 
-  <div class="list-group list-view-pf list-view-pf-view">
-    <div class="list-group-item">
-      <div class="list-group-item-header">
-        <div class="list-view-pf-expand">
-          <span class="fa fa-angle-right"></span>
-        </div>
-        <div class="list-view-pf-main-info">
-          <div class="list-view-pf-left">
-            <span class="fa fa-desktop list-view-pf-icon-sm"></span>
+    <div class="list-group list-view-pf list-view-pf-view">
+      <div class="list-group-item">
+        <div class="list-group-item-header">
+          <div class="list-view-pf-expand">
+            <span class="fa fa-angle-right"></span>
           </div>
-          <div class="list-view-pf-body">
-            <div class="list-view-pf-description">
-              <div class="list-group-item-heading">
-                Admin CLI
+          <div class="list-view-pf-main-info">
+            <div class="list-view-pf-left">
+              <span class="fa fa-desktop 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">
+                  Admin CLI
+                </div>
+                <div class="list-group-item-text">
+                  <ul class="app-info">
+                    <li>Internal</li>
+                    <li><span class="current-color">In-use</span></li>
+                    <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
+                  </ul>
+                </div>
               </div>
-              <div class="list-group-item-text">
-                <ul class="app-info">
-                  <li>Internal</li>
-                  <li><span class="current-color">In-use</span></li>
-                  <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
+            </div>
+        </div>
+        <!--The collapse application HTNL code-->
+        <div class="list-group-item-container container-fluid hidden">
+          <div class="close">
+            <span class="pficon pficon-close"></span>
+          </div>
+            <div class="row form-horizontal">
+              <label class="col-md-2 control-label non-display" for="textInput">Client</label>
+              <div class="col-md-6 non-display">
+                Google
+              </div>
+            </div>
+            <div class="row form-horizontal">
+              <label class="col-md-2 control-label non-display" for="textInput2">Description</label>
+              <div class="col-md-6">
+                Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
+              </div>
+            </div>
+            <div class="row form-horizontal">
+              <label class="col-md-2 control-label" for="textInput3">URL</label>
+              <div class="col-md-6">
+                <a href="#">www.google.com</a>
+              </div>
+            </div>
+            <div class="row form-horizontal">
+              <label class="col-md-2 control-label" for="textInput4">Has access to</label>
+              <div class="col-md-6">
+                Account
+                <ul>
+                  <li>View profile</li>
+                  <li>Manage account links</li>
+                  <li>Manage account</li>
                 </ul>
               </div>
             </div>
-          </div>
-      </div>
-      <!--The collapse application HTNL code-->
-      <div class="list-group-item-container container-fluid hidden">
-        <div class="close">
-          <span class="pficon pficon-close"></span>
+            <div class="row form-horizontal">
+              <label class="col-md-2 control-label">Access granted on</label>
+              <div class="col-md-6">
+                2018-1-7 17：33：52
+              </div>
+            </div>
+            <div class="divide-line"></div>
+            <div class="row form-horizontal">
+              <label class="col-md-2 control-label">
+                 <!-- Button trigger modal -->
+                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Remove Access</button>
+                <!-- End Button trigger modal -->
+              </label>
+              <div class="col-md-10 remove-notice">
+                <i class="fa fa-info-circle"></i>
+                <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
+              </div>
+            </div>
+
         </div>
-        <form class="form-horizontal app-form">
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput">Client</label>
-            <div class="col-md-6">
-              Google
-            </div>
-          </div>
-          <div class="divide-line"></div>
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput2">Description</label>
-            <div class="col-md-6">
-              Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput3">URL</label>
-            <div class="col-md-6">
-              <a href="#">www.google.com</a>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput4">Has access to</label>
-            <div class="col-md-6">
-              Account
-              <ul>
-                <li>View profile</li>
-                <li>Manage account links</li>
-                <li>Manage account</li>
-              </ul>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-md-2 control-label">Access granted on</label>
-            <div class="col-md-6">
-              2018-1-7 17：33：52
-            </div>
-          </div>
-          <div class="divide-line"></div>
-          <div class="form-group">
-            <label class="col-md-2 control-label">
-               <!-- Button trigger modal -->
-              <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
-              <!-- End Button trigger modal -->
-            </label>
-            <div class="col-md-10 remove-notice">
-              <i class="fa fa-info-circle"></i>
-              <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
-            </div>
-          </div>
-        </form>
+        <!--The end of the collapse application HTNL code-->
       </div>
-      <!--The end of the collapse application HTNL code-->
     </div>
-  </div>
-  <div class="list-group list-view-pf list-view-pf-view">
-    <div class="list-group-item">
-      <div class="list-group-item-header">
-        <div class="list-view-pf-expand">
-          <span class="fa fa-angle-right"></span>
-        </div>
-        <div class="list-view-pf-main-info">
-          <div class="list-view-pf-left">
-            <span class="fa fa-desktop list-view-pf-icon-sm"></span>
+    <div class="list-group list-view-pf list-view-pf-view">
+      <div class="list-group-item">
+        <div class="list-group-item-header">
+          <div class="list-view-pf-expand">
+            <span class="fa fa-angle-right"></span>
           </div>
-          <div class="list-view-pf-body">
-            <div class="list-view-pf-description">
-              <div class="list-group-item-heading">
-                Admin CLI
+          <div class="list-view-pf-main-info">
+            <div class="list-view-pf-left">
+              <span class="fa fa-desktop 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">
+                  Admin CLI
+                </div>
+                <div class="list-group-item-text">
+                  <ul class="app-info">
+                    <li>Internal</li>
+                    <li><span class="current-color">In-use</span></li>
+                    <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
+                  </ul>
+                </div>
               </div>
-              <div class="list-group-item-text">
-                <ul class="app-info">
-                  <li>Internal</li>
-                  <li><span class="current-color">In-use</span></li>
-                  <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
+            </div>
+          </div>
+        </div>
+        <!--The collapse application HTNL code-->
+        <div class="list-group-item-container container-fluid hidden">
+          <div class="close">
+            <span class="pficon pficon-close"></span>
+          </div>
+          <form class="form-horizontal app-form">
+            <div class="form-group">
+              <label class="col-md-2 control-label" for="textInput">Client</label>
+              <div class="col-md-6">
+                Google
+              </div>
+            </div>
+            <div class="divide-line"></div>
+            <div class="form-group">
+              <label class="col-md-2 control-label" for="textInput2">Description</label>
+              <div class="col-md-6">
+                Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-md-2 control-label" for="textInput3">URL</label>
+              <div class="col-md-6">
+                <a href="#">www.google.com</a>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-md-2 control-label" for="textInput4">Has access to</label>
+              <div class="col-md-6">
+                Account
+                <ul>
+                  <li>View profile</li>
+                  <li>Manage account links</li>
+                  <li>Manage account</li>
                 </ul>
               </div>
             </div>
-          </div>
-      </div>
-      <!--The collapse application HTNL code-->
-      <div class="list-group-item-container container-fluid hidden">
-        <div class="close">
-          <span class="pficon pficon-close"></span>
+            <div class="form-group">
+              <label class="col-md-2 control-label">Access granted on</label>
+              <div class="col-md-6">
+                2018-1-7 17：33：52
+              </div>
+            </div>
+            <div class="divide-line"></div>
+            <div class="form-group">
+              <label class="col-md-2 control-label">
+                 <!-- Button trigger modal -->
+                <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
+                <!-- End Button trigger modal -->
+              </label>
+              <div class="col-md-10 remove-notice">
+                <i class="fa fa-info-circle"></i>
+                <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
+              </div>
+            </div>
+          </form>
         </div>
-        <form class="form-horizontal app-form">
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput">Client</label>
-            <div class="col-md-6">
-              Google
-            </div>
-          </div>
-          <div class="divide-line"></div>
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput2">Description</label>
-            <div class="col-md-6">
-              Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput3">URL</label>
-            <div class="col-md-6">
-              <a href="#">www.google.com</a>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-md-2 control-label" for="textInput4">Has access to</label>
-            <div class="col-md-6">
-              Account
-              <ul>
-                <li>View profile</li>
-                <li>Manage account links</li>
-                <li>Manage account</li>
-              </ul>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="col-md-2 control-label">Access granted on</label>
-            <div class="col-md-6">
-              2018-1-7 17：33：52
-            </div>
-          </div>
-          <div class="divide-line"></div>
-          <div class="form-group">
-            <label class="col-md-2 control-label">
-               <!-- Button trigger modal -->
-              <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
-              <!-- End Button trigger modal -->
-            </label>
-            <div class="col-md-10 remove-notice">
-              <i class="fa fa-info-circle"></i>
-              <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
-            </div>
-          </div>
-        </form>
+        <!--The end of the collapse application HTNL code-->
       </div>
-      <!--The end of the collapse application HTNL code-->
     </div>
   </div>
 </div>
 <!--End of the new application HTML code-->
 
-
-
-
-</div>
 <script>
     $(document).ready(function () {
+      $("#toolbar-application-mobile").click(function(){
+        $("#toolbar-application").toggle();
+      })
       // click the list-view heading then expand a row
       $(".list-group-item-header").click(function(event){
         if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
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 6ad0fad2b6..525187ae1c 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
@@ -93,7 +93,7 @@ p.description {
   .col-xs-12,
   .col-xs-2,
   .col-xs-10,
-  .col-sm-12
+  .col-sm-12,
   .col-sm-4,
   .col-md-4,
   .col-md-8,
@@ -281,3 +281,49 @@ p.description {
     padding-right: 25px;
   }
 }
+
+
+/* Application Style */
+.card-pf-application {
+  padding: 0;
+}
+.card-pf-application .card-pf-body {
+  padding-bottom: 0;
+}
+.card-pf-application .toolbar-pf {
+  margin: 0;
+  border-bottom: 0;
+}
+#toolbar-application-mobile {
+  display: none;
+}
+.card-pf-application .close {
+  position: absolute;
+  right: 10px;
+}
+
+@media (max-width: 767px) {
+  .card-pf-application h2 {
+    margin-top: -10px;
+  }
+  .card-pf-application h2 a {
+    text-decoration: none;
+  }
+  .card-pf-application .list-group-item-container {
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-left: -20px;
+  }
+  .card-pf-application .form-horizontal {
+    margin-bottom: 10px;
+  }
+  #toolbar-application-mobile {
+    display: block;
+  }
+  #toolbar-application {
+    display: none;
+  }
+  .non-display {
+    display: none;
+  }
+}