diff --git a/src/app/addmembers/add.html b/src/app/addmembers/add.html
index cf7091a..dca2213 100644
--- a/src/app/addmembers/add.html
+++ b/src/app/addmembers/add.html
@@ -10,7 +10,7 @@ <h2>Import Users</h2>
 <div class="wrapper wrapper-content animated fadeInRight">
   <div class="row" ng-controller="addmembers.AddMemberController">
       <div class="col-lg-12">
-          <div class="ibox float-e-margins">
+          <div class="ibox float-e-margins import-form">
               <div class="ibox-title">
                   <div class="row">
                       <form role="form">
diff --git a/src/app/admintool/admintool.html b/src/app/admintool/admintool.html
index 8d1c6c0..ae9bfe2 100644
--- a/src/app/admintool/admintool.html
+++ b/src/app/admintool/admintool.html
@@ -84,10 +84,10 @@ <h2>Admins / Copilots / Reviewers</h2>
                     <div class="text-center" ng-show="formSearch.isLoading">
                         <img src="assets/images/loading.gif"/>
                     </div>
-                    <div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && !users.length">
+                    <div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && !users.length" class="table-responsive">
                         <p> No users found. </p>
                     </div>
-                    <div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && users.length">
+                    <div ng-show="!formSearch.isLoading && formSearch.role && formSearch.usersFound && users.length" class="table-responsive">
                         <table class="footable table table-stripped toggle-arrow-tiny"
                                data-sort="true"
                                data-page-size="50">
@@ -135,6 +135,7 @@ <h2>Admins / Copilots / Reviewers</h2>
                             </tfoot>
                         </table>
                     </div>
+                    <!-- table-responsive -->
                 </div>
             </div>
         </div>
diff --git a/src/app/billing_account_resources/billingaccountresources.list.html b/src/app/billing_account_resources/billingaccountresources.list.html
index f3cffbe..85d9619 100644
--- a/src/app/billing_account_resources/billingaccountresources.list.html
+++ b/src/app/billing_account_resources/billingaccountresources.list.html
@@ -18,7 +18,7 @@
                     <div class="text-center" ng-show="formSearch.isLoading">
                         <img src="assets/images/loading.gif" />
                     </div>
-                    <div ng-show="!formSearch.isLoading">
+                    <div ng-show="!formSearch.isLoading" class="table-responsive">
                         <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="50">
                             <thead>
                                 <tr>
@@ -46,6 +46,7 @@
                             </tfoot>
                         </table>
                     </div>
+                    <!-- table-responsive -->
                 </div>
             </div>
         </div>
diff --git a/src/app/billing_accounts/billingaccounts.list.html b/src/app/billing_accounts/billingaccounts.list.html
index 1411f45..3e4c97d 100644
--- a/src/app/billing_accounts/billingaccounts.list.html
+++ b/src/app/billing_accounts/billingaccounts.list.html
@@ -64,7 +64,7 @@
                     <div class="text-center" ng-show="formSearch.isLoading">
                         <img src="assets/images/loading.gif" />
                     </div>
-                    <div ng-show="!formSearch.isLoading">
+                    <div ng-show="!formSearch.isLoading" class="table-responsive">
                         <table class="footable table table-stripped toggle-arrow-tiny">
                             <thead>
                             <tr>
@@ -131,6 +131,7 @@
                             </tfoot>
                         </table>
                     </div>
+                    <!-- table-responsive -->
                 </div>
             </div>
         </div>
diff --git a/src/app/clients/clients.list.html b/src/app/clients/clients.list.html
index f668f79..d918bb9 100644
--- a/src/app/clients/clients.list.html
+++ b/src/app/clients/clients.list.html
@@ -59,7 +59,7 @@
                     <div class="text-center" ng-show="formSearch.isLoading">
                         <img src="assets/images/loading.gif" />
                     </div>
-                    <div ng-show="!formSearch.isLoading">
+                    <div ng-show="!formSearch.isLoading" class="table-responsive">
                         <table class="footable table table-stripped toggle-arrow-tiny">
                             <thead>
                                 <tr>
@@ -116,6 +116,7 @@
                             </tfoot>
                         </table>
                     </div>
+                    <!-- table-responsive -->
                 </div>
             </div>
         </div>
diff --git a/src/app/groupmembers/groupmembers.list.html b/src/app/groupmembers/groupmembers.list.html
index 1faa98a..644ec85 100644
--- a/src/app/groupmembers/groupmembers.list.html
+++ b/src/app/groupmembers/groupmembers.list.html
@@ -102,52 +102,55 @@ <h2>{{memberType === 'user' ? 'Users' : 'Groups'}}</h2>
                         <div class="text-center" ng-show="isLoading[memberType]">
                             <img src="assets/images/loading.gif" />
                         </div>
-                        <table class="footable table table-stripped toggle-arrow-tiny table-type-{{memberType}}" ng-show="memberships[memberType].length && !isLoading[memberType]">
-                            <thead>
-                                <tr>
-                                    <th data-sort-ignore="true"><input type="checkbox" ng-model="isAllSelected[memberType]" ng-change="toggleAll(memberType); checkSelected();" /></th>
-                                    <th data-type="numeric">{{memberType === 'user' ? 'User Id' : 'Group Id'}}</th>
-                                    <th>{{memberType === 'user' ? 'Handle' : 'Name'}}</th>
-                                    <th>Created by</th>
-                                    <th>Created at</th>
-                                    <th>Modified by</th>
-                                    <th>Modified at</th>
-                                    <th data-sort-ignore="true">&nbsp;</th>
-                                </tr>
-                            </thead>
+                        <div class="table-responsive">
+                            <table class="footable table table-stripped toggle-arrow-tiny table-type-{{memberType}}" ng-show="memberships[memberType].length && !isLoading[memberType]">
+                                <thead>
+                                    <tr>
+                                        <th data-sort-ignore="true"><input type="checkbox" ng-model="isAllSelected[memberType]" ng-change="toggleAll(memberType); checkSelected();" /></th>
+                                        <th data-type="numeric">{{memberType === 'user' ? 'User Id' : 'Group Id'}}</th>
+                                        <th>{{memberType === 'user' ? 'Handle' : 'Name'}}</th>
+                                        <th>Created by</th>
+                                        <th>Created at</th>
+                                        <th>Modified by</th>
+                                        <th>Modified at</th>
+                                        <th data-sort-ignore="true">&nbsp;</th>
+                                    </tr>
+                                </thead>
 
-                            <tbody>
-                                <tr class="animate-repeat" ng-repeat="membership in memberships[memberType]">
-                                    <td><input type="checkbox" ng-model="membership.isSelected" ng-change="checkSelected();" /></td>
-                                    <td>{{membership.memberId}}</td>
-                                    <td>
-                                        <span ng-show="memberType === 'user'">
-                                            <span ng-if="users[membership.memberId]">{{users[membership.memberId]}}</span>
-                                            <span class="text-info" ng-if="membership.memberId && !users[membership.memberId]">loading...</span>
-                                        </span>
-                                        <span ng-show="memberType === 'group'">
-                                            <span ng-if="groups[membership.memberId]">{{groups[membership.memberId]}}</span>
-                                            <span class="text-info" ng-if="membership.memberId && !groups[membership.memberId]">loading...</span>
-                                        </span>
-                                    </td>
-                                    <td>
-                                        <span ng-if="users[membership.createdBy]">{{users[membership.createdBy]}}</span>
-                                        <span class="text-info" ng-if="membership.createdBy && !users[membership.createdBy]">loading...</span>
-                                    </td>
-                                    <td>{{membership.createdAt | date : 'yyyy-MM-dd  HH:mm' : 'EDT'}} {{membership.createdAt ? 'EDT' : ''}}</td>
-                                    <td>
-                                        <span ng-if="users[membership.modifiedBy]">{{users[membership.modifiedBy]}}</span>
-                                        <span class="text-info" ng-if="membership.modifiedBy && !users[membership.modifiedBy]">loading...</span>
-                                    </td>
-                                    <td>{{membership.modifiedAt | date : 'yyyy-MM-dd  HH:mm' : 'EDT'}} {{membership.modifiedAt ? 'EDT' : ''}}</td>
-                                    <td>
-                                        <button data-ng-click='removeMember(membership)' class="btn btn-sm btn-danger" ng-disabled="membership.isRemoving">
-                                            <strong>Remove</strong>
-                                        </button>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                <tbody>
+                                    <tr class="animate-repeat" ng-repeat="membership in memberships[memberType]">
+                                        <td><input type="checkbox" ng-model="membership.isSelected" ng-change="checkSelected();" /></td>
+                                        <td>{{membership.memberId}}</td>
+                                        <td>
+                                            <span ng-show="memberType === 'user'">
+                                                <span ng-if="users[membership.memberId]">{{users[membership.memberId]}}</span>
+                                                <span class="text-info" ng-if="membership.memberId && !users[membership.memberId]">loading...</span>
+                                            </span>
+                                            <span ng-show="memberType === 'group'">
+                                                <span ng-if="groups[membership.memberId]">{{groups[membership.memberId]}}</span>
+                                                <span class="text-info" ng-if="membership.memberId && !groups[membership.memberId]">loading...</span>
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <span ng-if="users[membership.createdBy]">{{users[membership.createdBy]}}</span>
+                                            <span class="text-info" ng-if="membership.createdBy && !users[membership.createdBy]">loading...</span>
+                                        </td>
+                                        <td>{{membership.createdAt | date : 'yyyy-MM-dd  HH:mm' : 'EDT'}} {{membership.createdAt ? 'EDT' : ''}}</td>
+                                        <td>
+                                            <span ng-if="users[membership.modifiedBy]">{{users[membership.modifiedBy]}}</span>
+                                            <span class="text-info" ng-if="membership.modifiedBy && !users[membership.modifiedBy]">loading...</span>
+                                        </td>
+                                        <td>{{membership.modifiedAt | date : 'yyyy-MM-dd  HH:mm' : 'EDT'}} {{membership.modifiedAt ? 'EDT' : ''}}</td>
+                                        <td>
+                                            <button data-ng-click='removeMember(membership)' class="btn btn-sm btn-danger" ng-disabled="membership.isRemoving">
+                                                <strong>Remove</strong>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <!-- table-responsive -->
                         <div ng-show="!memberships[memberType].length" style="margin-bottom: 20px;">No members</div><br/>
                     </div>
 
diff --git a/src/app/groups/groups.list.html b/src/app/groups/groups.list.html
index 544320e..a800759 100644
--- a/src/app/groups/groups.list.html
+++ b/src/app/groups/groups.list.html
@@ -6,7 +6,7 @@
                     <div class="text-center" ng-show="isLoading">
                         <img src="assets/images/loading.gif" />
                     </div>
-                    <div ng-show="!isLoading">
+                    <div ng-show="!isLoading" class="table-responsive">
                         <table class="footable table table-stripped toggle-arrow-tiny" ng-show="groups.length" data-page-size="50">
                             <thead>
                                 <tr>
@@ -53,6 +53,7 @@
                         </table>
                         <div ng-show="!groups.length">No records found</div>
                     </div>
+                    <!-- table-responsive -->
                 </div>
             </div>
         </div>
diff --git a/src/app/less/base.less b/src/app/less/base.less
old mode 100755
new mode 100644
index 83c4d0c..05913c1
--- a/src/app/less/base.less
+++ b/src/app/less/base.less
@@ -8,8 +8,11 @@ body {
 }
 
 html,body {
-  height: 100%;
+  min-height: 100%;
+}
 
+.app-wrapper {
+  height: inherit;
 }
 
 body.full-height-layout #wrapper,
@@ -18,7 +21,7 @@ body.full-height-layout #page-wrapper {
 }
 
 #page-wrapper {
-  min-height: auto;
+  height: 100%;
 }
 
 body.boxed-layout {
@@ -171,6 +174,7 @@ video {
 #wrapper {
   width: 100%;
   overflow-x: hidden;
+  height: inherit;
 }
 
 .wrapper {
@@ -183,16 +187,17 @@ video {
 
 #page-wrapper {
   padding: 0 15px;
-  min-height: 568px;
+  min-height: 667px;
   position: relative !important;
 }
 
 @media (min-width: 768px) {
   #page-wrapper {
     position: inherit;
+    min-height: 959px;
     margin: 0 0 0 240px;
-    min-height: 1000px;
   }
+  
 }
 
 .title-action {
diff --git a/src/app/less/buttons.less b/src/app/less/buttons.less
old mode 100755
new mode 100644
index 246b24a..b9dd815
--- a/src/app/less/buttons.less
+++ b/src/app/less/buttons.less
@@ -7,6 +7,29 @@
   margin-bottom: 5px;
 }
 
+@media (max-width: 768px) {
+
+  .float-e-margins .btn {
+    margin: 15px 0 0 14px;
+  }
+
+  .float-e-margins .col-md-2 .btn,
+  .float-e-margins .col-sm-3 .btn {
+    margin-left: 0;
+  }
+
+  .float-e-margins table .btn {
+    margin: 0;
+    width: 100%;
+    display: block;
+
+    &:first-child  {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+
 .btn-w-m {
   min-width: 120px;
 }
diff --git a/src/app/less/media.less b/src/app/less/media.less
old mode 100755
new mode 100644
index 5c27f41..795d265
--- a/src/app/less/media.less
+++ b/src/app/less/media.less
@@ -2,7 +2,11 @@
   #page-wrapper {
     position: inherit;
     margin: 0 0 0 @sidebar-width;
-    min-height: 1200px;
+    height: 100%;
+  }
+  
+  .m-menu {
+    display: none;
   }
 
   .navbar-static-side {
@@ -23,14 +27,57 @@
   #page-wrapper {
     position: inherit;
     margin: 0 0 0 0px;
-    min-height: 1000px;
+  }
+
+  .m-menu {
+    display: block;
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    z-index: 2;
+    &.menu-open {
+      color: #fff;
+    }
+  }
+
+  .table-responsive {
+    overflow-y: auto;
+    border: none;
+    padding-bottom: 49px;
+    margin: 0;
+  }
+
+  // Now at mobile, paignation will be position absolute and display 0 left
+  .table-responsive .pagination {
+    position: absolute;
+    left: 34px;
+    bottom: 42px;
+  }
+
+  .roles-table .pagination {
+    bottom: 22px;
+  }
+
+  .dropdown-menu {
+    right: 0;
+    left: auto;
+    top: 30px;
   }
 
   .body-small .navbar-static-side {
-    display: none;
     z-index: 2001;
     position: absolute;
-    width: 70px;
+    width: 100%;
+    top: 0;
+  }
+
+  .metismenu {
+    display: none;
+  }
+
+  .metismenu.menu-open {
+    background: rgb(47, 64, 80);
+    display: block;
   }
 
   .body-small.mini-navbar .navbar-static-side {
diff --git a/src/app/less/pages.less b/src/app/less/pages.less
old mode 100755
new mode 100644
index 057dc4b..cbec701
--- a/src/app/less/pages.less
+++ b/src/app/less/pages.less
@@ -610,6 +610,10 @@ a.compose-mail {
   margin-bottom: 20px;
 }
 
+.word-wrap {
+  word-break: break-all;
+}
+
 .mail-box-header {
   background-color: #ffffff;
   border: 1px solid @border-color;
@@ -1319,3 +1323,24 @@ body.body-small .vote-icon {
   display: none;
 }
 
+// Mobile new style
+@media (max-width: 768px) {
+
+  .float-e-margins {
+    &.import-form {
+      .row {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .block {
+        word-break: break-all;
+      }
+    }
+  }
+  
+  .float-e-margins table .btn-group {
+    width: 100%;
+  }
+  
+}
diff --git a/src/app/less/rtl.less b/src/app/less/rtl.less
old mode 100755
new mode 100644
index 3aaf4e8..ad63b00
--- a/src/app/less/rtl.less
+++ b/src/app/less/rtl.less
@@ -233,8 +233,7 @@ body.rtls .top-navigation .footer.fixed, body.rtls.top-navigation .footer.fixed
 
   .body-small.rtls #page-wrapper {
     position: inherit;
-    margin: 0 0 0 0px;
-    min-height: 1000px;
+    margin: 0;
   }
 
   .body-small.rtls .navbar-static-side {
diff --git a/src/app/permission_management/permission_management.html b/src/app/permission_management/permission_management.html
index 9bb00bf..0c0dc59 100644
--- a/src/app/permission_management/permission_management.html
+++ b/src/app/permission_management/permission_management.html
@@ -73,7 +73,7 @@ <h2>Roles</h2>
             </div>
           </form>
         </div>
-        <div class="ibox-content" ng-show="ctrl.roles">
+        <div class="ibox-content table-responsive roles-table" ng-show="ctrl.roles">
           <p>Press on a role row to assign/unassign users.</p>
           <table
             class="footable table table-stripped toggle-arrow-tiny"
@@ -186,6 +186,7 @@ <h2>Roles</h2>
             </tfoot>
           </table>
         </div>
+        <!-- table-responsive -->
       </div>
     </div>
   </div>
\ No newline at end of file
diff --git a/src/app/rolemembers/rolemembers.list.html b/src/app/rolemembers/rolemembers.list.html
index 0a67a13..346d80a 100644
--- a/src/app/rolemembers/rolemembers.list.html
+++ b/src/app/rolemembers/rolemembers.list.html
@@ -49,7 +49,7 @@ <h2>
                     <div class="text-center" ng-show="isLoading">
                         <img src="assets/images/loading.gif" />
                     </div>
-                    <div ng-show="!isLoading">
+                    <div ng-show="!isLoading" class="table-responsive">
                         <table class="footable table table-stripped toggle-arrow-tiny" ng-show="members.length" data-page-size="20">
                             <thead>
                                 <tr>
@@ -88,6 +88,7 @@ <h2>
 
                         <button data-ng-click='removeSelected()' class="btn btn-sm btn-danger" ng-disabled="!hasSelected || isProcessing" ng-show="members.length"><strong>Remove Selected</strong></button>
                     </div>
+                    <!-- table-responsive -->
                 </div>
             </div>
         </div>
diff --git a/src/app/roles/roles.list.html b/src/app/roles/roles.list.html
index 85f6c5c..ac0ead3 100644
--- a/src/app/roles/roles.list.html
+++ b/src/app/roles/roles.list.html
@@ -65,7 +65,7 @@
             </div>
           </form>
         </div>
-        <div class="ibox-content" ng-show="ctrl.roles">
+        <div class="ibox-content table-responsive roles-table" ng-show="ctrl.roles">
           <table
             class="footable table table-stripped toggle-arrow-tiny"
             data-page-size="50"
@@ -117,6 +117,7 @@
             </tfoot>
           </table>
         </div>
+        <!-- table-responsive -->
       </div>
     </div>
   </div>
diff --git a/src/app/sso/sso.html b/src/app/sso/sso.html
index 98fcca0..a7ab50c 100644
--- a/src/app/sso/sso.html
+++ b/src/app/sso/sso.html
@@ -10,7 +10,7 @@ <h2>Import SSO Users</h2>
 <div class="wrapper wrapper-content animated fadeInRight">
   <div class="row" ng-controller="sso.AddSSOController">
       <div class="col-lg-12">
-          <div class="ibox float-e-margins">
+          <div class="ibox float-e-margins import-form">
               <div class="ibox-title">
                   <div class="row">
                       <form role="form">
diff --git a/src/app/submissions/submissions.html b/src/app/submissions/submissions.html
index 906c46b..93f9bfd 100644
--- a/src/app/submissions/submissions.html
+++ b/src/app/submissions/submissions.html
@@ -20,7 +20,7 @@ <h2>Submissions</h2>
                                         <input id="search-condition-handle" type="text" class="form-control" ng-model="challengeSearch.challengeId" ng-disabled="challengeSearch.isLoading" ng-trim="true">
                                     </div>
                                     <div class="col-md-4 no-padding-left">
-                                        <button ng-click="findChallenge()" ng-disabled="challengeSearch.isLoading" type="submit" class="btn btn-sm btn-warning pull-left">
+                                        <button ng-click="findChallenge()" ng-disabled="challengeSearch.isLoading" type="submit" class="btn btn-sm btn-warning pull-left btn-find-challenge">
                                             <strong>Find challenge</strong>
                                         </button>
                                     </div>
@@ -38,25 +38,28 @@ <h2>Submissions</h2>
                                                 <dd>{{challengeObj.subTrack}}</dd>
                                                 <dt>(Submittable) Phases</dt>
                                                 <dd>
-                                                    <table class="table">
-                                                        <thead>
-                                                            <tr>
-                                                                <td>Id</td>
-                                                                <td>Type</td>
-                                                                <td>Status</td>
-                                                                <td>Actual / Schedule End Time</td>
-                                                            </tr>
-                                                        </thead>
-                                                        <tbody>
-                                                            <tr ng-repeat="p in challengePhases">
-                                                                <td>{{p.value.id}}</td>
-                                                                <td>{{p.name}}</td>
-                                                                <td>{{p.value.phaseStatus}}</td>
-                                                                <td ng-show="p.value.phaseStatus==='Closed'">{{p.value.actualEndTime|amFromUnix| amTimezone:'America/New_York'| amDateFormat:'MM.DD.YYYY HH:mm z'}} (A)</td>
-                                                                <td ng-hide="p.value.phaseStatus==='Closed'">{{p.value.scheduledEndTime|amFromUnix| amTimezone:'America/New_York'| amDateFormat:'MM.DD.YYYY HH:mm z'}} (S)</td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
+                                                    <div class="table-responsive">
+                                                        <table class="table">
+                                                            <thead>
+                                                                <tr>
+                                                                    <td>Id</td>
+                                                                    <td>Type</td>
+                                                                    <td>Status</td>
+                                                                    <td>Actual / Schedule End Time</td>
+                                                                </tr>
+                                                            </thead>
+                                                            <tbody>
+                                                                <tr ng-repeat="p in challengePhases">
+                                                                    <td>{{p.value.id}}</td>
+                                                                    <td>{{p.name}}</td>
+                                                                    <td>{{p.value.phaseStatus}}</td>
+                                                                    <td ng-show="p.value.phaseStatus==='Closed'">{{p.value.actualEndTime|amFromUnix| amTimezone:'America/New_York'| amDateFormat:'MM.DD.YYYY HH:mm z'}} (A)</td>
+                                                                    <td ng-hide="p.value.phaseStatus==='Closed'">{{p.value.scheduledEndTime|amFromUnix| amTimezone:'America/New_York'| amDateFormat:'MM.DD.YYYY HH:mm z'}} (S)</td>
+                                                                </tr>
+                                                            </tbody>
+                                                        </table>
+                                                    </div>
+                                                    <!-- table-responsive -->
                                                 </dd>
                                             </dl>
                                         </div>
diff --git a/src/app/submissions/submissions.list.html b/src/app/submissions/submissions.list.html
index c123ecc..ba8efe6 100644
--- a/src/app/submissions/submissions.list.html
+++ b/src/app/submissions/submissions.list.html
@@ -58,6 +58,7 @@ <h2>Submissions for Challenge # {{challengeObj.name}}</h2>
                     </tbody>
                 </table>
             </div>
+            <!-- table-responsive -->
         </div>
     </div>
 </div>
diff --git a/src/app/tags/tags.list.html b/src/app/tags/tags.list.html
old mode 100755
new mode 100644
index d40d51d..57c91df
--- a/src/app/tags/tags.list.html
+++ b/src/app/tags/tags.list.html
@@ -45,7 +45,7 @@
                             <div ng-show="!isLoading && tags.length === 0">
                                 <p> No Tags found. </p>
                             </div>
-                            <div ng-hide="isLoading || tags.length === 0">
+                            <div ng-hide="isLoading || tags.length === 0" class="table-responsive">
                                 <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="50" id="tagsTable" data-sort="true">
                                     <thead>
                                     <tr>
@@ -100,6 +100,7 @@
                                     </tfoot>
                                 </table>
                             </div>
+                            <!-- table-responsive -->
                         </div>
                     </div>
                 </div>
diff --git a/src/app/users/groups-edit-dialog.html b/src/app/users/groups-edit-dialog.html
index c7d7200..3e1d57d 100644
--- a/src/app/users/groups-edit-dialog.html
+++ b/src/app/users/groups-edit-dialog.html
@@ -9,7 +9,7 @@ <h4 class="modal-title" id="reg-dialog-label">Groups of {{user.handle}}</h4>
       <div class="text-center" ng-show="isLoading">
           <img src="assets/images/loading.gif" />
       </div>
-      <div ng-show="!isLoading">
+      <div ng-show="!isLoading" class="table-responsive">
           <table class="table table-stripped" ng-show="userGroups.length">
               <thead>
                   <tr>
@@ -34,6 +34,7 @@ <h4 class="modal-title" id="reg-dialog-label">Groups of {{user.handle}}</h4>
           </table>
           <div ng-show="!userGroups.length">No groups<br/><br/></div>
       </div>
+      <!-- table-responsive -->
     </div>
     <div class="row" ng-show="!isLoading">
       <form name="addGroupForm" class="form-horizontal">
diff --git a/src/app/users/roles-edit-dialog.html b/src/app/users/roles-edit-dialog.html
index 718d310..fa43692 100644
--- a/src/app/users/roles-edit-dialog.html
+++ b/src/app/users/roles-edit-dialog.html
@@ -9,7 +9,7 @@ <h4 class="modal-title" id="reg-dialog-label">Roles of {{user.handle}}</h4>
       <div class="text-center" ng-show="isLoading">
           <img src="assets/images/loading.gif" />
       </div>
-      <div ng-show="!isLoading">
+      <div ng-show="!isLoading" class="table-responsive">
           <table class="table table-stripped" ng-show="userRoles.length">
               <thead>
                   <tr>
@@ -34,6 +34,7 @@ <h4 class="modal-title" id="reg-dialog-label">Roles of {{user.handle}}</h4>
           </table>
           <div ng-show="!userRoles.length">No roles<br/><br/></div>
       </div>
+      <!-- table-responsive -->
     </div>
     <div class="row" ng-show="!isLoading">
       <form name="addRoleForm" class="form-horizontal">
diff --git a/src/app/users/status-history-dialog.html b/src/app/users/status-history-dialog.html
index 0c8e4a4..7788825 100644
--- a/src/app/users/status-history-dialog.html
+++ b/src/app/users/status-history-dialog.html
@@ -5,6 +5,7 @@
     <div class="row">
       <div>
         <div class="col-md-12" ng-include src="'components/alert/alert.html'"></div>
+        <div class="table-responsive">
           <table class="table table-hover">
             <thead>
               <tr>
@@ -19,6 +20,8 @@
               </tr>
             </tbody>
           </table>
+        </div>
+        <!-- table-responsive -->
       </div>
     </div>
   </div>
diff --git a/src/app/users/users.html b/src/app/users/users.html
index 093d281..32766e7 100644
--- a/src/app/users/users.html
+++ b/src/app/users/users.html
@@ -54,7 +54,7 @@ <h2>Users</h2>
         <div class="text-center" ng-show="formSearch.isLoading">
           <img src="assets/images/loading.gif"/>
         </div>
-        <div ng-show="!formSearch.isLoading">
+        <div ng-show="!formSearch.isLoading" class="table-responsive">
           <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="50">
               <thead>
               <tr>
@@ -135,6 +135,7 @@ <h2>Users</h2>
               </tfoot>
           </table>
         </div>
+        <!-- table-responsive -->
       </div>
     </div>
   </div>
diff --git a/src/components/alert/alert.html b/src/components/alert/alert.html
index e888b0f..4e564f4 100644
--- a/src/components/alert/alert.html
+++ b/src/components/alert/alert.html
@@ -1,5 +1,5 @@
 <div ng-controller="AlertController">
-  <div class="alert alert-{{alert.style()}} alert-dismissible text-center" role="alert"
+  <div class="alert alert-{{alert.style()}} alert-dismissible text-center word-wrap" role="alert"
         ng-repeat="alert in alerts">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="closeAlert($index)">
       <span aria-hidden="true">&times;</span>
diff --git a/src/components/common/navigation.controller.js b/src/components/common/navigation.controller.js
index 4d89833..47af1e9 100644
--- a/src/components/common/navigation.controller.js
+++ b/src/components/common/navigation.controller.js
@@ -8,5 +8,13 @@ angular.module('supportAdminApp')
     $scope.forceStateProjects = function () {
       $state.go('index.projects');
     };
+    
+    // Add menu toggle function for mobile
+    $scope.menuList = false;
+    $scope.menuOpen = function() {
+      $scope.menuList = !$scope.menuList;
+    }
 
+    // Click menu item go to another page will close the menu as well
+    angular.element(document.querySelectorAll("a[ui-sref]")).bind('click', $scope.menuOpen);
 }]);
diff --git a/src/components/common/navigation.html b/src/components/common/navigation.html
old mode 100755
new mode 100644
index 6cba4e4..e612772
--- a/src/components/common/navigation.html
+++ b/src/components/common/navigation.html
@@ -1,6 +1,7 @@
 <nav class="navbar-default navbar-static-side" role="navigation" ng-controller="NavController">
     <div class="sidebar-collapse">
-        <ul side-navigation class="nav metismenu" id="side-menu">
+            <a href="" ng-click="menuOpen()" class="m-menu" ng-class="{'menu-open':menuList}"><i class="fa fa-reorder"></i></a>
+        <ul side-navigation class="nav metismenu" id="side-menu" ng-class="{'menu-open':menuList}">
             <li class="nav-header">
                 <img src="assets/images/logo.png" />
             </li>
diff --git a/src/index.html b/src/index.html
old mode 100755
new mode 100644
index 5f54b26..bccb8f7
--- a/src/index.html
+++ b/src/index.html
@@ -25,7 +25,7 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
-    <div ui-view></div>
+    <div ui-view class="app-wrapper"></div>
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
     <script>