diff --git a/package.json b/package.json
index 4991144..0145141 100755
--- a/package.json
+++ b/package.json
@@ -19,9 +19,9 @@
   "dependencies": {
     "angular": "^1.6.4",
     "angular-cookies": "^1.6.4",
-    "avatar-initials": "^4.1.0",
     "angular-filter": "^0.5.17",
     "angular-route": "^1.6.4",
+    "avatar-initials": "^4.1.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.2",
diff --git a/src/assets/scripts/nwFooter/nwFooter.html b/src/assets/scripts/nwFooter/nwFooter.html
index a3b662d..2c0467c 100644
--- a/src/assets/scripts/nwFooter/nwFooter.html
+++ b/src/assets/scripts/nwFooter/nwFooter.html
@@ -1,9 +1,8 @@
 <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
 
-            <div class="d-inline-block mr-3">
-                    <p><small class="text-muted powered">Powered by:</small></p>
-            </div>
-            <div class="d-inline-block mr-4">
+          
+            <div class="d-inline-block">
+                    <div class="footer-title">Powered by:</div>
                 <div class="rounded-social-buttons mb-2">
                         <a href="http://nomit.com.au" >
                             <img src="http://nomit.com.au/app/themes/nomit/dist/images/logo.png" class="mr-2 mb-1" height="40px">
@@ -11,16 +10,32 @@
                     <a class="social-button facebook" href="https://www.facebook.com/nomitnetwork" target="_blank"><i class="fa fa-facebook-f"></i></a>
                     <a class="social-button twitter" href="https://twitter.com/nomitnetwork" target="_blank"><i class="fa fa-twitter"></i></a>
                     <a class="social-button linkedin" href="https://www.linkedin.com/company/nomit/about/" target="_blank"><i class="fa fa-linkedin"></i></a>
-                    </div>
+                    </div>  
+            </div>
+            
+            <div class="divider  d-inline-block"></div>
+
+            <div class="d-inline-block">
+                    <div class="footer-title">Partners:</div>
+                    <a href="https://consmelbourne.esteri.it/consolato_melbourne/en" >
+                        <img src="assets/static/images/consmelbourne-logo.png" class="mr-3 mb-1" height="40px">
+                    </a>
+                    <a href="http://www.italcham.com.au" >
+                        <img src="assets/static/images/ICCI-logo.png" class="mr-3 mb-1" height="40px">
+                    </a>    
             </div>
+
+            <div class="divider d-inline-block"></div>
+
             <div class="d-inline-block">
-                <form class="form-inline">
-                    <div class="form-group mr-1">
-                        <label for="email" class="sr-only">Email</label>
-                            <input type="email" class="form-control form-control-sm" placeholder="Email" required>
-                    </div>
-                        <button type="submit" class="btn btn-secondary btn-sm">Subscribe</button>
-                </form>
+                    <div class="footer-title">Proudly Sponsored by:</div>
+                    <a href="https://www.inas.it/" >
+                        <img src="assets/static/images/inas-logo.png" class="mr-3 mb-1" height="40px">
+                    </a>
+                    <a href="https://www.patronato.acli.it/" >
+                        <img src="assets/static/images/patronato-logo.jpg" class="mr-3 mb-1" height="40px">
+                    </a>
+
             </div>
         <p><small class="text-muted">&#169; 2019 NOMIT. All rights reserved.</small></p>
     
diff --git a/src/assets/scripts/nwSidebar/nwSidebar.html b/src/assets/scripts/nwSidebar/nwSidebar.html
index 085e7fa..62129ac 100644
--- a/src/assets/scripts/nwSidebar/nwSidebar.html
+++ b/src/assets/scripts/nwSidebar/nwSidebar.html
@@ -11,7 +11,7 @@
                 <div class="logo">
 
                   <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    x="0px" y="0px" viewBox="0 0 105.6869278 99.4877319" style="enable-background:new 0 0 105.6869278 99.4877319;"
+                    x="0px" y="0px" viewBox="0 0 105.6869278 99.4877319" 
                     xml:space="preserve">
                     <style type="text/css">
                       .logost0 {
@@ -209,7 +209,7 @@
     </div>
 
     <!-- ### $Sidebar Menu ### -->
-    <ul class="sidebar-menu scrollable pos-r">
+    <ul class="sidebar-menu scrollable pos-r bg-img">
       <!-- Dashboard - show to all users -->
       <li class="nav-item mT-30 active">
         <a class="sidebar-link" href="/">
@@ -259,7 +259,7 @@
       <li class="nav-item">
         <a class='sidebar-link' href="#!referees">
           <span class="icon-holder">
-            <i class="c-white-500 fa fa-anchor text-white"></i>
+            <i class="c-white-500 fa fa-balance-scale text-white"></i>
           </span>
           <span class="title text-white font-weight-bold">Referees</span>
         </a>
@@ -283,11 +283,7 @@
         </a>
       </li>
 
-      <div class="mx-auto" style="width: 40px;">
-        <br>
-        <input type="checkbox" class="switch">
-
-      </div>
+    
 
     </ul>
 
diff --git a/src/assets/static/images/consmelbourne-logo.png b/src/assets/static/images/consmelbourne-logo.png
new file mode 100644
index 0000000..8bf58d8
Binary files /dev/null and b/src/assets/static/images/consmelbourne-logo.png differ
diff --git a/src/assets/static/images/icci-logo.png b/src/assets/static/images/icci-logo.png
new file mode 100644
index 0000000..4d91df2
Binary files /dev/null and b/src/assets/static/images/icci-logo.png differ
diff --git a/src/assets/static/images/inas-logo.png b/src/assets/static/images/inas-logo.png
new file mode 100644
index 0000000..94ddffb
Binary files /dev/null and b/src/assets/static/images/inas-logo.png differ
diff --git a/src/assets/static/images/login-bkg-01.jpg b/src/assets/static/images/login-bkg-01.jpg
new file mode 100644
index 0000000..6c54b03
Binary files /dev/null and b/src/assets/static/images/login-bkg-01.jpg differ
diff --git a/src/assets/static/images/login-bkg-02.jpg b/src/assets/static/images/login-bkg-02.jpg
new file mode 100644
index 0000000..c9cbbbe
Binary files /dev/null and b/src/assets/static/images/login-bkg-02.jpg differ
diff --git a/src/assets/static/images/patronato-logo.jpg b/src/assets/static/images/patronato-logo.jpg
new file mode 100644
index 0000000..83de10a
Binary files /dev/null and b/src/assets/static/images/patronato-logo.jpg differ
diff --git a/src/assets/static/images/sidebar-bkg.jpg b/src/assets/static/images/sidebar-bkg.jpg
new file mode 100644
index 0000000..1101345
Binary files /dev/null and b/src/assets/static/images/sidebar-bkg.jpg differ
diff --git a/src/assets/styles/nomit.scss b/src/assets/styles/nomit.scss
index 7a807a6..51dc66f 100644
--- a/src/assets/styles/nomit.scss
+++ b/src/assets/styles/nomit.scss
@@ -6,6 +6,12 @@
 }
 
 
+.bg-img{
+  background-image: url('/assets/static/images/sidebar-bkg.jpg');
+  background-size: cover;
+  background-repeat:   no-repeat;
+}
+
 .item-box{
     box-shadow: 0 0 15px rgba(192, 192, 192, 0.521); 
 }
@@ -22,10 +28,11 @@
 // ***** FONT SETTINGS ***** //
 .form-title{
     font-weight: bolder; 
-    color: #000000;
+    color: #454545;
 }
 .text-size-11{
     font-size:11px;
+    color: #888888;
 }
 
 .text-size-20{
@@ -242,6 +249,42 @@ h1{
       clip: rect(1px, 1px, 1px, 1px);
   }
 
+// *****  PAGINATION ******//
+.pagination {
+  display: inline-block;
+
+  margin-top: 30px;
+}
+
+.pagination a {
+  background-color: #FFFFFF;
+  color: #454545;
+  font-size: 10px;
+  float: left;
+  padding: 6px 12px;
+  text-decoration: none;
+  border: 1px solid #ddd;
+}
+
+.pagination a.active {
+  background-color: #8B00B1;
+  color: white;
+  border: 1px solid #8B00B1;
+}
+
+.pagination a:hover:not(.active) {background-color: #ddd;}
+
+.pagination a:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.pagination a:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+
 // ***** PAGES ***** //
 
 //index
@@ -264,7 +307,7 @@ h1{
 
 //profile
 .card-body-profile {
-  background-color: #e6eaf08f;
+  background-color: #F4F4F4;
 }
 
 .user-update-img {
@@ -279,6 +322,7 @@ h1{
   vertical-align: middle;
   margin-top: 30px;
   margin-left: 150px;
+  color: #777777;
 }
 
 .profile-forms {
@@ -330,39 +374,89 @@ textarea {
 }
 
 .card-body-users {
-  border-top: 0.03125em solid #DDDDDD;
+  border-top: 0.03125em solid #BBBBBB;
   margin: 0;
 }
 
 .users-icons {
-  margin-left: 160px;
-  padding: 8px;
+  margin-left: 175px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  padding: 10px;
   padding-left: 0;
 }
 
 .users-icons i {
-  font-size: 17px;
+  font-size: 19px;
   margin-right: 20px;
-  color: #DDDDDD;
+  color: #BBBBBB;
 }
 
-.users-col {
-  vertical-align: middle;
-  margin-top: 30px;
+
+#user-action-fill {
+  background-color: #8B00B1;
+  color: #FFFFFF;
+  padding: 6px 20px;
+  font-weight: bolder;
+  font-size: 9px;
+  border-radius: 0;
+  display: inline-block;
+  border:solid 1px #8B00B1;
+  margin-top: 1px;
+  text-transform: uppercase;
 }
 
-.users-action-btn {
-  padding-left: 2;
-  margin-top: 10px;
+
+#user-action-border {
+  background-color: transparent;
+  color: #8B00B1;
+  border:solid 1px #8B00B1;
+  padding: 6px 20px;
+  font-weight: bolder;
+  font-size: 9px;
+  border-radius: 0;
+  display: inline-block;
+  text-transform: uppercase;
 }
 
-.users-action-btn i {
-  font-size: 17px;
-  margin-right: 5px;
-  color: #DDDDDD;
+#user-action-border:hover{
+  background-color: #EE38A4;
+  color: #FFFFFF;
+  border: solid 1px #EE38A4;
+}
+
+#user-action-fill:hover{
+  background-color: transparent;
+  color: #EE38A4;
+  border:solid 1px #EE38A4;
+}
+
+
+.user-card-img {
+  width: 90px;
+  float: left;
+  margin-left: 35px;
+  margin-top: 30px;
+  margin-bottom: 20px;
+  border: 3px solid  #8B00B1;
 }
 
+.user-card-col {
+  vertical-align: middle;
+  margin-top: 30px;
+  margin-bottom: 20px;
+  margin-left: 160px;
+  color: #777777;
+}
 
+.user-card-title{
+    margin-bottom: 3px;  
+    font-size:15px;
+    font-weight: bold;
+    text-transform: uppercase;
+    
+    
+}
 //login
 .modal-dialog {
   max-width: 800px;
@@ -529,6 +623,20 @@ f
     }
 
 /* FOOTER */
+.footer-title{
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  margin-bottom: 30px;
+  margin-top:20px;
+}
+
+.divider {
+  border-left:1px solid #BBBBBB;
+  height: 60px;
+  margin: 0px 30px;
+}
+
 .rounded-social-buttons {
   text-align: center;
 }
diff --git a/src/assets/styles/spec/settings/baseColors.scss b/src/assets/styles/spec/settings/baseColors.scss
index a42fd4f..0f2947c 100755
--- a/src/assets/styles/spec/settings/baseColors.scss
+++ b/src/assets/styles/spec/settings/baseColors.scss
@@ -88,7 +88,7 @@ $inverse-warning      : lighten($default-warning, 45%);
 $border-color         : #e6ecf5;
 $collapsed-size       : 70px;
 $header-height        : 80px;
-$offscreen-size       : 280px;
+$offscreen-size       : 240px;
 $side-nav-dark        : #313644;
 $side-nav-dark-border : rgba(120, 130, 140, 0.3);
 $side-nav-dark-font   : #99abb4;
diff --git a/src/companies.html b/src/companies.html
index 69b21e2..abac358 100644
--- a/src/companies.html
+++ b/src/companies.html
@@ -102,77 +102,149 @@
 
 
         <!-- ### $App Screen Content ### -->
-        <main class='main-content bgc-grey-300'>
+        <main class='main-content'>
           <div id='mainContent row'>
-            <div class="content-title mT-60">
-              <div class="ml-1 mb-3">
-                Companies
-              </div> 
-            </div>  
+              <div class="row content-title mT-60">
+                  <h1 class="col-8 ml-1 mb-4">Companies</h1>            
+                </div>
 
             <div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
               <div class="masonry-sizer col-md-6"></div>
 
-
-                <div class="masonry-item  w-50"> <!-- #first company ========= -->
-                      <div class="card item-box" >
-                        <div class="companies-data-title">
-                            <img class="companies-update-img"  src="assets/static/images/nomit-logo.png" alt="">
-                            <div class="testo"><h5 class=" form-title">David James</h5>
-                                <div class=" text-size-11">Victoria</div> 
-                                <div class=" text-size-11">Mobile: 0414987654</div>  
-                            </div>
-                        </div>
-                        <div class="card-body p-0">
-                            <div class="card-body-companies row">
-                                <div class="companies-icons">
-                                    <a href="" ><i class="ti-instagram "></i></a>
-                                    <a href="" ><i class="ti-twitter "></i></a>
-                                    <a href="" ><i class="ti-facebook   "></i></a>
-                                    <a href="" ><i class="ti-email"></i></a>
-                                </div>
+                <div class="masonry-item  w-50"> <!-- #first user ========= -->
+                  <div class="card item-box" >
+                    <div class="user-data-title container">
+                            <img class="user-card-img  rounded-circle"  src="https://www.monmouth.edu/university-advancement/wp-content/uploads/sites/237/2018/08/person-placeholder.jpg" alt="">
+                            <div class="user-card-col">
+                                <div class="user-card-title">Brunetti</div>
+                                <div class=" text-size-11">Victoria</div>
+                                <div class=" text-size-11">enquiry@brunetti.com.au</div> 
+                                <a href="#" id="user-action-fill">view company profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="Company will be unable to log in to WISP">ban company</a>
+                            </div>  
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="card-body-users row">
+                          <div class="col-4"></div>
+                            <div class="users-icons col-8">
+                                <a href="" ><i class="fa fa-envelope-o"></i></a>
+                                <a href="" ><i class="fa fa-linkedin"></i></a>
+                                <a href="" ><i class="fa fa-facebook"></i></a>
+                                <a href="" ><i class="fa fa-instagram"></i></a>
+                                <a href="" ><i class="fa fa-github"></i></a>
                             </div>
                         </div>
-                      </div>
-                </div>
+                    </div>
+                  </div>
+            </div>
 
-                <div class="masonry-item  w-50"> <!-- #second company ========= -->
-                    <div class="card item-box" >
-                      <div class="companies-data-title">
-                          <img class="companies-update-img"  src="assets/static/images/nomit-logo.png" alt="">
-                          <div class="testo"><h5 class=" form-title">David James</h5>
-                              <div class=" text-size-11">Victoria</div> 
-                              <div class=" text-size-11">Mobile: 0414987654</div>  
-                          </div>
-                      </div>
-                      <div class="card-body p-0">
-                          <div class="card-body-companies row">
-                              <div class="companies-icons">
-                                  <a href="" ><i class="ti-instagram "></i></a>
-                                  <a href="" ><i class="ti-twitter "></i></a>
-                                  <a href="" ><i class="ti-facebook   "></i></a>
-                                  <a href="" ><i class="ti-email"></i></a>
-                              </div>
-                          </div>
-                      </div>
+            <div class="masonry-item  w-50"> <!-- #second user ========= -->
+              <div class="card item-box" >
+                <div class="user-data-title container">
+                        <img class="user-card-img  rounded-circle"  src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png" alt="">
+                        <div class="user-card-col">
+                            <div class="user-card-title">Casella</div>
+                            <div class=" text-size-11">New South Wales</div>
+                                <div class=" text-size-11">enquiry@casella.com.au</div> 
+                            <a href="#" id="user-action-fill">view company profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="Company will be unable to log in to WISP">ban company</a>
+                        </div>  
+                </div>
+                <div class="card-body p-0">
+                    <div class="card-body-users row">
+                      <div class="col-4"></div>
+                        <div class="users-icons col-8">
+                            <a href="" ><i class="fa fa-envelope-o"></i></a>
+                            <a href="" ><i class="fa fa-linkedin"></i></a>
+                            <a href="" ><i class="fa fa-facebook"></i></a>
+                            <a href="" ><i class="fa fa-instagram"></i></a>
+                            <a href="" ><i class="fa fa-github"></i></a>
+                        </div>
                     </div>
+                </div>
               </div>
+        </div>
 
-  
-
-
+        
 
+    <div class="masonry-item  w-50"> <!-- #third user ========= -->
+      <div class="card item-box" >
+        <div class="user-data-title container">
+                <img class="user-card-img  rounded-circle"  src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png" alt="">
+                <div class="user-card-col">
+                    <div class="user-card-title">Europcar</div>
+                    <div class=" text-size-11">Victoria</div>
+                    <div class=" text-size-11">enquiry@europcar.com.au</div> 
+                    <a href="#" id="user-action-fill">view company profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="Company will be unable to log in to WISP">ban company</a>
+                </div>  
+        </div>
+        <div class="card-body p-0">
+            <div class="card-body-users row">
+              <div class="col-4"></div>
+                <div class="users-icons col-8">
+                    <a href="" ><i class="fa fa-envelope-o"></i></a>
+                    <a href="" ><i class="fa fa-linkedin"></i></a>
+                    <a href="" ><i class="fa fa-facebook"></i></a>
+                    <a href="" ><i class="fa fa-instagram"></i></a>
+                    <a href="" ><i class="fa fa-github"></i></a>
+                </div>
+            </div>
+        </div>
+      </div>
+</div>
+
+<div class="masonry-item  w-50"> <!-- #fourth user ========= -->
+  <div class="card item-box" >
+    <div class="user-data-title container">
+            <img class="user-card-img  rounded-circle"  src="https://www.monmouth.edu/university-advancement/wp-content/uploads/sites/237/2018/08/person-placeholder.jpg" alt="">
+            <div class="user-card-col">
+                <div class="user-card-title">Lavazza</div>
+                <div class=" text-size-11">Victoria</div>
+                <div class=" text-size-11">enquiry@lavazza.com.au</div> 
+                <a href="#" id="user-action-fill">view company profile</a>
+                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="Company will be unable to log in to WISP">ban company</a>
+            </div>  
+    </div>
+    <div class="card-body p-0">
+        <div class="card-body-users row">
+          <div class="col-4"></div>
+            <div class="users-icons col-8">
+                <a href="" ><i class="fa fa-envelope-o"></i></a>
+                <a href="" ><i class="fa fa-linkedin"></i></a>
+                <a href="" ><i class="fa fa-facebook"></i></a>
+                <a href="" ><i class="fa fa-instagram"></i></a>
+                <a href="" ><i class="fa fa-github"></i></a>
             </div>
+        </div>
+    </div>
+  </div>
+</div>
+
+
+
+</div>
+
+<!-- PAGINATION-->
+<div class="pagination">
+    <a href="#">&laquo;</a>
+    <a href="#">1</a>
+    <a class="active" href="#">2</a>
+    <a href="#">3</a>
+    <a href="#">4</a>
+    <a href="#">5</a>
+    <a href="#">6</a>
+    <a href="#">&raquo;</a>
+  </div>
                 
               
-          </div><!--content container-->
-        
-      </main>
-
-      <!-- ### $App Screen Footer ### -->
-      </div><!-- page-container -->
-      </div>  <!-- App Content -->
-</body>
-
+            </div><!--content container-->
+          
+        </main>
+
+        <!-- ### $App Screen Footer ### -->
+        </div><!-- page-container -->
+        </div>  <!-- App Content -->
+  </body>
+  
 </html>
-
diff --git a/src/referees.html b/src/referees.html
index 760487f..8818544 100644
--- a/src/referees.html
+++ b/src/referees.html
@@ -102,67 +102,55 @@
 
 
         <!-- ### $App Screen Content ### -->
-        <main class='main-content bgc-grey-300'>
+        <main class='main-content'>
           <div id='mainContent row'>
-            <div class="content-title mT-60">
-              <div class="ml-1 mb-3">
-                Referees
-              </div> 
-            </div>  
+              <div class="row content-title mT-60">
+                  <h1 class="col-8 ml-1 mb-4">Referees</h1>            
+                </div>
 
             <div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
               <div class="masonry-sizer col-md-6"></div>
 
-
-                <div class="masonry-item  w-50"> <!-- #first referee ========= -->
-                      <div class="card item-box" >
-                        <div class="referee-data-title">
-                            <img class="referee-update-img"  src="assets/static/images/nomit-logo.png" alt="">
-                            <div class="testo"><h5 class=" form-title">David James</h5>
-                                <div class=" text-size-11">Victoria</div> 
-                                <div class=" text-size-11">Mobile: 0414987654</div>  
-                            </div>
-                        </div>
-                        <div class="card-body p-0">
-                            <div class="card-body-referee row">
-                                <div class="referee-icons">
-                                    <a href="" ><i class="ti-instagram "></i></a>
-                                    <a href="" ><i class="ti-twitter "></i></a>
-                                    <a href="" ><i class="ti-facebook   "></i></a>
-                                    <a href="" ><i class="ti-email"></i></a>
-                                </div>
+                <div class="masonry-item  w-50"> <!-- #first user ========= -->
+                  <div class="card item-box" >
+                    <div class="user-data-title container">
+                            <img class="user-card-img  rounded-circle"  src="https://www.monmouth.edu/university-advancement/wp-content/uploads/sites/237/2018/08/person-placeholder.jpg" alt="">
+                            <div class="user-card-col">
+                                <div class="user-card-title">Job Watch</div>
+                                <div class=" text-size-11">Victoria</div>
+                                <div class=" text-size-11">enquiry@jobwatch.com.au</div> 
+                                <a href="#" id="user-action-fill">view referee profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="Referee will be unable to log in to WISP">ban referee</a>
+                            </div>  
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="card-body-users row">
+                          <div class="col-4"></div>
+                            <div class="users-icons col-8">
+                                <a href="" ><i class="fa fa-envelope-o"></i></a>
+                                <a href="" ><i class="fa fa-linkedin"></i></a>
+                                <a href="" ><i class="fa fa-facebook"></i></a>
+                                <a href="" ><i class="fa fa-instagram"></i></a>
+                                <a href="" ><i class="fa fa-github"></i></a>
                             </div>
                         </div>
-                      </div>
-                </div>
-
-                <div class="masonry-item  w-50"> <!-- #second company ========= -->
-                    <div class="card item-box" >
-                      <div class="referee-data-title">
-                          <img class="referee-update-img"  src="assets/static/images/nomit-logo.png" alt="">
-                          <div class="testo"><h5 class=" form-title">David James</h5>
-                              <div class=" text-size-11">Victoria</div> 
-                              <div class=" text-size-11">Mobile: 0414987654</div>  
-                          </div>
-                      </div>
-                      <div class="card-body p-0">
-                          <div class="card-body-referee row">
-                              <div class="referee-icons">
-                                  <a href="" ><i class="ti-instagram "></i></a>
-                                  <a href="" ><i class="ti-twitter "></i></a>
-                                  <a href="" ><i class="ti-facebook   "></i></a>
-                                  <a href="" ><i class="ti-email"></i></a>
-                              </div>
-                          </div>
-                      </div>
                     </div>
-              </div>
-
-  
-
-
-
+                  </div>
+            </div>
+            
             </div>
+
+<!-- PAGINATION-->
+<div class="pagination">
+    <a href="#">&laquo;</a>
+    <a href="#">1</a>
+    <a class="active" href="#">2</a>
+    <a href="#">3</a>
+    <a href="#">4</a>
+    <a href="#">5</a>
+    <a href="#">6</a>
+    <a href="#">&raquo;</a>
+  </div>
                 
               
             </div><!--content container-->
diff --git a/src/reports.html b/src/reports.html
index ab4f9dc..37f327d 100644
--- a/src/reports.html
+++ b/src/reports.html
@@ -91,7 +91,7 @@
       ${require('html-loader!./_topbar.html')}
 
       <!-- ### $App Screen Content ### -->
-      <main class='main-content bgc-grey-300'>
+      <main class='main-content'>
         <div id='mainContent row'>
           <div class="row content-title mT-60">
             <h1 class="col-8 ml-1 mb-3">
diff --git a/src/users.html b/src/users.html
index e194fb5..0512618 100644
--- a/src/users.html
+++ b/src/users.html
@@ -102,7 +102,7 @@
 
 
         <!-- ### $App Screen Content ### -->
-        <main class='main-content bgc-grey-300'>
+        <main class='main-content'>
           <div id='mainContent row'>
               <div class="row content-title mT-60">
                   <h1 class="col-8 ml-1 mb-4">Users</h1>            
@@ -114,26 +114,19 @@
                 <div class="masonry-item  w-50"> <!-- #first user ========= -->
                   <div class="card item-box" >
                     <div class="user-data-title container">
-                      <div class="row">
-                        <div class="col-8">
-                            <img class="user-update-img  rounded-circle"  src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png" alt="">
-                            <div class="testo"><h5 class=" form-title">David James</h5>
+                            <img class="user-card-img  rounded-circle"  src="https://www.monmouth.edu/university-advancement/wp-content/uploads/sites/237/2018/08/person-placeholder.jpg" alt="">
+                            <div class="user-card-col">
+                                <div class="user-card-title">David James</div>
                                 <div class=" text-size-11">Victoria</div> 
-                                <div class=" text-size-11">Mobile: 0414987654</div>  
-                            </div>
-                        </div>  
-                        <div class="col-4 users-action-btn" style="text-align: right">
-                            <div class="d-inline-block">
-                                <a href="" ><i class="fa fa-eye" data-toggle="tooltip" data-placement="bottom" title="View user details"></i></a>
-                                <a href="" ><i class="fa fa-ban" data-toggle="tooltip" data-placement="bottom" title="Ban user (user will not be able to login)"></i></a>
-                              </div>
-                        </div>
-                      </div>  
-                      
+                                <div class=" text-size-11">Mobile: 0414987654</div>
+                                <a href="#" id="user-action-fill">view user  profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="User will be unable to log in to WISP">ban user</a>
+                            </div>  
                     </div>
                     <div class="card-body p-0">
                         <div class="card-body-users row">
-                            <div class="users-icons">
+                          <div class="col-4"></div>
+                            <div class="users-icons col-8">
                                 <a href="" ><i class="fa fa-envelope-o"></i></a>
                                 <a href="" ><i class="fa fa-linkedin"></i></a>
                                 <a href="" ><i class="fa fa-facebook"></i></a>
@@ -145,35 +138,103 @@
                   </div>
             </div>
 
-                <div class="masonry-item  w-50"> <!-- #second user ========= -->
-                    <div class="card item-box" >
-                      <div class="user-data-title">
-                          <img class="user-update-img"  src="assets/static/images/nomit-logo.png" alt="">
-                          <div class="testo"><h5 class=" form-title">David James</h5>
-                              <div class=" text-size-11">Victoria</div> 
-                              <div class=" text-size-11">Mobile: 0414987654</div>  
-                          </div>
-                      </div>
-                      <div class="card-body p-0">
-                          <div class="card-body-users row">
-                              <div class="users-icons">
-                                  <a href="" ><i class="ti-instagram "></i></a>
-                                  <a href="" ><i class="ti-twitter "></i></a>
-                                  <a href="" ><i class="ti-facebook   "></i></a>
-                                  <a href="" ><i class="ti-email"></i></a>
-                              </div>
-                          </div>
-                      </div>
+            <div class="masonry-item  w-50"> <!-- #second user ========= -->
+              <div class="card item-box" >
+                <div class="user-data-title container">
+                        <img class="user-card-img  rounded-circle"  src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png" alt="">
+                        <div class="user-card-col">
+                            <div class="user-card-title">Christina Jenna</div>
+                            <div class=" text-size-11">Victoria</div> 
+                            <div class=" text-size-11">Mobile: 0414987654</div>
+                            <a href="#" id="user-action-fill">view user profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="User will be unable to log in to WISP">ban user</a>
+                        </div>  
+                </div>
+                <div class="card-body p-0">
+                    <div class="card-body-users row">
+                      <div class="col-4"></div>
+                        <div class="users-icons col-8">
+                            <a href="" ><i class="fa fa-envelope-o"></i></a>
+                            <a href="" ><i class="fa fa-linkedin"></i></a>
+                            <a href="" ><i class="fa fa-facebook"></i></a>
+                            <a href="" ><i class="fa fa-instagram"></i></a>
+                            <a href="" ><i class="fa fa-github"></i></a>
+                        </div>
                     </div>
+                </div>
               </div>
-
-  
-
-
-
+        </div>
+
+        
+
+    <div class="masonry-item  w-50"> <!-- #third user ========= -->
+      <div class="card item-box" >
+        <div class="user-data-title container">
+                <img class="user-card-img  rounded-circle"  src="https://content.invisioncic.com/Mseclife/monthly_2017_08/C.png.2537be5c760ba5232ee4716f77d13c51.png" alt="">
+                <div class="user-card-col">
+                    <div class="user-card-title">Christina Jenna</div>
+                    <div class=" text-size-11">Victoria</div> 
+                    <div class=" text-size-11">Mobile: 0414987654</div>
+                    <a href="#" id="user-action-fill">view user profile</a>
+                                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="User will be unable to log in to WISP">ban user</a>
+                </div>  
+        </div>
+        <div class="card-body p-0">
+            <div class="card-body-users row">
+              <div class="col-4"></div>
+                <div class="users-icons col-8">
+                    <a href="" ><i class="fa fa-envelope-o"></i></a>
+                    <a href="" ><i class="fa fa-linkedin"></i></a>
+                    <a href="" ><i class="fa fa-facebook"></i></a>
+                    <a href="" ><i class="fa fa-instagram"></i></a>
+                    <a href="" ><i class="fa fa-github"></i></a>
+                </div>
+            </div>
+        </div>
+      </div>
+</div>
+
+<div class="masonry-item  w-50"> <!-- #fourth user ========= -->
+  <div class="card item-box" >
+    <div class="user-data-title container">
+            <img class="user-card-img  rounded-circle"  src="https://www.monmouth.edu/university-advancement/wp-content/uploads/sites/237/2018/08/person-placeholder.jpg" alt="">
+            <div class="user-card-col">
+                <div class="user-card-title">David James</div>
+                <div class=" text-size-11">Victoria</div> 
+                <div class=" text-size-11">Mobile: 0414987654</div>
+                <a href="#" id="user-action-fill">view user profile</a>
+                <a href="#" id="user-action-border" data-toggle="tooltip" data-placement="bottom" title="User will be unable to log in to WISP">ban user</a>
+            </div>  
+    </div>
+    <div class="card-body p-0">
+        <div class="card-body-users row">
+          <div class="col-4"></div>
+            <div class="users-icons col-8">
+                <a href="" ><i class="fa fa-envelope-o"></i></a>
+                <a href="" ><i class="fa fa-linkedin"></i></a>
+                <a href="" ><i class="fa fa-facebook"></i></a>
+                <a href="" ><i class="fa fa-instagram"></i></a>
+                <a href="" ><i class="fa fa-github"></i></a>
             </div>
-                
-              
+        </div>
+    </div>
+  </div>
+</div>
+</div>
+ 
+       <!-- PAGINATION-->
+       <div class="pagination">
+          <a href="#">&laquo;</a>
+          <a href="#">1</a>
+          <a class="active" href="#">2</a>
+          <a href="#">3</a>
+          <a href="#">4</a>
+          <a href="#">5</a>
+          <a href="#">6</a>
+          <a href="#">&raquo;</a>
+        </div>
+
+        
             </div><!--content container-->
           
         </main>