diff --git a/package.json b/package.json
index d583e33..4991144 100755
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "angular": "^1.6.4",
     "angular-cookies": "^1.6.4",
     "avatar-initials": "^4.1.0",
+    "angular-filter": "^0.5.17",
+    "angular-route": "^1.6.4",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.2",
@@ -55,7 +57,7 @@
     "load-google-maps-api": "^1.0.0",
     "lodash": "^4.17.4",
     "masonry-layout": "^4.2.0",
-    "moment": "^2.19.1",
+    "moment": "^2.24.0",
     "ng-tags-input": "^3.2.0",
     "node-sass": "^4.5.3",
     "perfect-scrollbar": "^1.1.0",
diff --git a/src/_topbar.html b/src/_topbar.html
index 9aaebe9..8a18751 100644
--- a/src/_topbar.html
+++ b/src/_topbar.html
@@ -8,21 +8,27 @@
             <i class="ti-menu"></i>
           </a>
         </li>
-        <li class="search-box visible-nomit visible-referee" ng-show="user.role=='nomit' || user.role == ‘referee’">
+        <li class="search-box visible-nomit visible-referee" ng-show="user.role=='nomit' || user.role == 'referee'">
           <a class="search-toggle no-pdd-right" href="javascript:void(0);">
             <i class="search-icon ti-search pdd-right-10"></i>
             <i class="search-icon-close ti-close pdd-right-10"></i>
           </a>
         </li>
-        <li class="search-input visible-referee visible-nomit" ng-show="user.role=='nomit' || user.role == ‘referee’">
+        <li class="search-input visible-referee visible-nomit" ng-show="user.role=='nomit' || user.role == 'referee'">
           <input class="form-control" type="text" placeholder="Search users, companies, or anything..">
         </li>
-        <li class="visible-nomit" ng-show="user.role=='nomit'">
+        <li class="visible-nomit ml-2" ng-show="user.role=='nomit'">
           <button type="button" class="btn btn-gradient ">
             <i class="fa fa-plus pdd-right-5 text-white"></i>
-            Add new user
+            ADD NEW USER
           </button>
-        </li>
+				</li>
+				<li class="visible-referee visible-nomit visible-company ml-2" ng-show="user.role=='nomit' || user.role == 'referee' || user.role == 'company'">
+						<button type="button" onclick="window.location.href = 'new-ad.html'" class="btn btn-gradient" >
+							<i class="fa fa-plus pdd-right-5 text-white"></i>
+								CREATE NEW AD
+						</button>
+				</li>
       </ul>
       <ul class="nav-right">
         <!-- #RIGHT ============================ -->
@@ -34,7 +40,7 @@
             <div class="peer">
               <span class="fsz-sm c-grey-900  visible-nomit" ng-show="user.role=='nomit'">Nomit Admin</span>
               <span class="fsz-sm c-grey-900  visible-referee" ng-show="user.role=='referee'">Referee Admin</span>
-              <span class="fsz-sm c-grey-900  visible-user visible-company" ng-show="user.role=='user' || user.role == ‘company’">Username</span>
+              <span class="fsz-sm c-grey-900  visible-user visible-company" ng-show="user.role=='user' || user.role == 'company'">Username</span>
             </div>
             <div class="peer mR-10 visible-nomit" ng-show="user.role=='nomit'">
               <img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/nomit-logo.png" alt="">
diff --git a/src/ads.html b/src/ads.html
index b9e0e50..7baedba 100644
--- a/src/ads.html
+++ b/src/ads.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html ng-app="NomitWisp">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -192,7 +192,7 @@
           </main>
 
         <!-- ### $App Screen Footer ### -->
-        ${require('html-loader!./_footer.html')}
+        <nw-footer></nw-footer>
         </div><!-- page-container -->
         </div>  <!-- App Content -->
   </body>
diff --git a/src/ads_1.html b/src/ads_1.html
index 93e79ba..7d3e5fd 100644
--- a/src/ads_1.html
+++ b/src/ads_1.html
@@ -180,7 +180,6 @@
         </main>
 
         <!-- ### $App Screen Footer ### -->
-        ${require('html-loader!./_footer.html')}
         </div><!-- page-container -->
         </div>  <!-- App Content -->
   </body>
diff --git a/src/assets/scripts/ads-details/ads-details.controller.js b/src/assets/scripts/ads-details/ads-details.controller.js
new file mode 100644
index 0000000..33fb76e
--- /dev/null
+++ b/src/assets/scripts/ads-details/ads-details.controller.js
@@ -0,0 +1,17 @@
+import moment from 'moment';
+
+const AdsDetailsController = ($scope, AdsDetailsService, $routeParams, UserService) => {
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
+        AdsDetailsService.fetchAdDetails($routeParams)
+            .then((result) => {
+                $scope.ad = result;
+                window.msnry.layout();
+            })
+            .catch((error) => { console.log(error); });
+        $scope.daysAgo = (timestamp) => { return moment(timestamp).fromNow(); }
+    });
+    UserService.loadUser();
+}
+
+export default AdsDetailsController;
\ No newline at end of file
diff --git a/src/assets/scripts/ads-details/ads-details.html b/src/assets/scripts/ads-details/ads-details.html
new file mode 100644
index 0000000..9fddd12
--- /dev/null
+++ b/src/assets/scripts/ads-details/ads-details.html
@@ -0,0 +1,65 @@
+<main class='main-content bgc-grey-300'>
+  <div id='mainContent row'>
+
+    <div class="content-title mT-60">
+      <div class="ml-1 mb-3">
+
+      </div>
+    </div>
+
+    <div class=" gap-30 masonry pos-r ">
+      <!-- #content container ===== -->
+      <div class="masonry-sizer col-md-6 "></div>
+
+      <!-- ### Job Details Card ### -->
+      <div class="masonry-item  w-50">
+        <div class="card">
+          <div class="row">
+            <div class="col-3 mt-4 ">
+              <img class="img-fluid ml-4 mb-4 companies-update-img" src="assets/static/images/nomit-logo.png" alt="company"
+                class="avatar">
+            </div>
+            <div class="col-9 card-body">
+              <h2 class="card-title mt-4 mr-4">{{ ad.title }}</h2>
+              <h6 class="card-title mr-4">{{ ad.companyname }}</h6>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-body">
+            {{ ad.description }}
+          </div>
+        </div>
+      </div>
+
+      <!-- ### Other Info Card ### -->
+      <div class="masonry-item  w-50">
+        <div class="card">
+          <div class="card-body">
+            <h5 class="card-title mt-4 ml-4 mr-4">Location:</h5>
+            <p class="card-text ml-4 mr-4">{{ad.location}}</p>
+            <h5 class="card-title mt-4 ml-4 mr-4">Application close:</h5>
+            <p class="card-text ml-4 mr-4">14th March 2019 (Friday)</p>
+
+            <h5 class="card-title mt-4 ml-4 mr-4">Skills:</h5>
+            <div ng-repeat="skill in ad.skills">
+              <span class="ml-4 mb-4 btn btn-skills">{{ skill }}</span>
+            </div>
+            <p class="card-text  ml-4 my-4"></p><small class="text-muted">{{ daysAgo(ad.timestamp) }}</small></p>
+          </div>
+        </div>
+      </div>
+
+      <!-- ### Buttons ### -->
+      <div class="masonry-item  w-50 m-auto btn-centered-container ">
+        <button type="button" href="#" class="col-5 mr-1 btn btn-gradient btn-centered">Apply Now</button>
+        <button type="button" href="#" class="col-5 ml-1 btn btn-border  btn-centered">Save</button>
+
+      </div>
+    </div>
+
+
+  </div>
+  <!--content row-->
+
+</main>
\ No newline at end of file
diff --git a/src/assets/scripts/ads-details/ads-details.service.js b/src/assets/scripts/ads-details/ads-details.service.js
new file mode 100644
index 0000000..9c367ff
--- /dev/null
+++ b/src/assets/scripts/ads-details/ads-details.service.js
@@ -0,0 +1,12 @@
+const AdsDetailsService = ($http) => {
+    let serv = {};
+
+    serv.fetchAdDetails = (route) =>{
+        return $http.get('https://nomitwisp-restapi.herokuapp.com/api/ads/'+route.id)
+            .then( (result) => { return result.data; })
+            .catch( (error) => { return error; })
+    }
+    return serv;
+}
+
+export default AdsDetailsService;
\ No newline at end of file
diff --git a/src/assets/scripts/ads-details/index.js b/src/assets/scripts/ads-details/index.js
new file mode 100644
index 0000000..1ffb8bc
--- /dev/null
+++ b/src/assets/scripts/ads-details/index.js
@@ -0,0 +1,13 @@
+import angular from 'angular';
+import ngRoute from 'angular-route';
+import ngCookie from 'angular-cookies';
+import AdsDetailsController from './ads-details.controller';
+import AdsDetailsService from './ads-details.service'
+
+angular.module('nwAdsDetails', [ngRoute, ngCookie])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .factory(AdsDetailsService.name, AdsDetailsService)
+    .controller(AdsDetailsController.name, AdsDetailsController);
+    
\ No newline at end of file
diff --git a/src/assets/scripts/ads/ads.controller.js b/src/assets/scripts/ads/ads.controller.js
new file mode 100644
index 0000000..7acf3bf
--- /dev/null
+++ b/src/assets/scripts/ads/ads.controller.js
@@ -0,0 +1,12 @@
+/** @ngInject */
+const AdsController = ($scope, AdsService, UserService) => {
+  $scope.$on('loadUserSuccess', function (event, user) {
+    $scope.user = user;
+    AdsService.fetchAdsService()
+      .then( (result) => { $scope.ads = result; })
+      .catch( (error) => { console.log(error); })
+  });
+  UserService.loadUser();
+}
+
+export default AdsController;
diff --git a/src/assets/scripts/ads/ads.html b/src/assets/scripts/ads/ads.html
new file mode 100644
index 0000000..e2a9d16
--- /dev/null
+++ b/src/assets/scripts/ads/ads.html
@@ -0,0 +1,39 @@
+<main class='main-content bgc-grey-300'>
+    <div id='mainContent row'>
+      <div class="row content-title mT-60">
+        <h1 class="col-8 ml-1 mb-4">All Published Ads</h1>            
+      </div>
+      <div class=" gap-20 masonry pos-r"> <!-- #content container ===== -->
+        <div class="masonry-sizer col-md-6"></div>
+
+        <div class="masonry-item  w-100"> <!-- #First line ========= -->
+          <div class="row gap-30">
+
+            <!-- ============== Job Ad ============== -->
+            <div class='col-md-4' ng-repeat="ad in ads">
+                <div class="card item-box">
+                    <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+                    <div class="card-body">
+                      <div class="card-title d-flex  mx-2" style="justify-content:space-between; margin-bottom:0px; text-align: left;">
+                        <h4> {{ ad.title }} </h4>
+                        <div>
+                            <a class='' href="" > <span class="icon-holder"><i class="fa fa-heart-o font-weight-bold mt-2" style="color:#EE38A4; font-size: 22px;"></i></span></a>
+                        </div>
+                      </div>
+                      <p class="card-text mx-2"><small class="text-muted">{{ ad.description }}</small></p>
+                      <div class="star-rating-display ml-2 mb-2" data-rating="2"><span class="is-vishidden">TBD</span></div> 
+                      <p class="card-text mx-2 mb-2"> {{ ad.companyintro }} </p>
+                    </div>
+                    <a href="/#!/ads/{{ad._id}}">
+                      <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                        VIEW MORE <i class=" fa fa-chevron-right ml-1" style="color:#fff; font-size: 11px; font-weight: bolder;"></i> 
+                      </div>
+                    </a>
+                  </div>
+            </div>
+          </div>
+        </div>
+        
+      </div><!--content container -->
+    </div><!--maincontent row -->
+    </main>
\ No newline at end of file
diff --git a/src/assets/scripts/ads/ads.service.js b/src/assets/scripts/ads/ads.service.js
new file mode 100644
index 0000000..910ef8e
--- /dev/null
+++ b/src/assets/scripts/ads/ads.service.js
@@ -0,0 +1,13 @@
+/** @ngInject */
+const AdsService = ($http) => {
+    let serv = {};
+    
+    serv.fetchAdsService = () =>{
+        return $http.get('https://nomitwisp-restapi.herokuapp.com/api/ads', { withCredentials: true })
+        .then( (result) => { return result.data; })
+        .catch( (error) => { return error; });
+    }
+    return serv;
+}
+
+export default AdsService;
\ No newline at end of file
diff --git a/src/assets/scripts/ads/index.js b/src/assets/scripts/ads/index.js
new file mode 100644
index 0000000..b3b64a0
--- /dev/null
+++ b/src/assets/scripts/ads/index.js
@@ -0,0 +1,12 @@
+import * as angular from 'angular';
+import ngCookies from 'angular-cookies';
+import AdsController from './ads.controller';
+import AdsService from './ads.service';
+
+angular.module('nwAds', [ngCookies])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .controller(AdsController.name, AdsController)
+    .factory(AdsService.name, AdsService);
+    
\ No newline at end of file
diff --git a/src/assets/scripts/app/index.js b/src/assets/scripts/app/index.js
new file mode 100644
index 0000000..797426b
--- /dev/null
+++ b/src/assets/scripts/app/index.js
@@ -0,0 +1,63 @@
+import angular from 'angular';
+import ngRoute from 'angular-route';
+import UserService from './shared.service';
+
+angular.module('NomitWisp', 
+    [
+        'NomitWisp-Login',
+        'NomitWisp-Topbar', 
+        'NomitWisp-Sidebar',
+        'NomitWisp-Footer',
+        'nwDashboard',
+        'nwLogout',
+        'nwAds',
+        'nwAdsDetails',
+        'nwProfile',
+        'nwSignup',
+        ngRoute
+        
+    ])
+    .factory(UserService.name, UserService)
+    .config(function ($routeProvider, $httpProvider) { 
+        $httpProvider.defaults.withCredentials = true;
+        $routeProvider 
+        .when('/', { 
+            controller: 'DashboardController', 
+            templateUrl: 'assets/scripts/dashboard/dashboard.html' 
+        })
+        .when('/ads', { 
+            controller: 'AdsController', 
+            templateUrl: 'assets/scripts/ads/ads.html' 
+        })
+        .when('/ads/:id',{
+            controller: 'AdsDetailsController',
+            templateUrl: 'assets/scripts/ads-details/ads-details.html'
+        })
+        .when('/profile', { 
+            controller: 'ProfileController', 
+            templateUrl: 'assets/scripts/profile/profile.html' 
+        })
+        .when('/signup', { 
+            controller: 'SignupController', 
+            templateUrl: 'assets/scripts/signup/signup.html' 
+        })
+        // .when('/users', { 
+        //     controller: 'UsersController', 
+        //     templateUrl: '' 
+        // })
+        // .when('/companies', { 
+        //     controller: 'CompaniesController', 
+        //     templateUrl: '' 
+        // })
+        // .when('/referees', { 
+        //     controller: 'RefereesController', 
+        //     templateUrl: '' 
+        // })
+        // .when('/reports', { 
+        //     controller: 'ReportsController', 
+        //     templateUrl: '' 
+        // })
+        .otherwise({ 
+            redirectTo: '/' 
+        }); 
+    });
\ No newline at end of file
diff --git a/src/assets/scripts/app/shared.service.js b/src/assets/scripts/app/shared.service.js
new file mode 100644
index 0000000..4dc5016
--- /dev/null
+++ b/src/assets/scripts/app/shared.service.js
@@ -0,0 +1,28 @@
+import * as $ from 'jquery';
+
+function parseJwt(token) {
+    var base64Url = token.split('.')[1];
+    var base64 = base64Url.replace('-', '+').replace('_', '/');
+    return JSON.parse(window.atob(base64));
+};
+
+const UserService = ($cookies, $rootScope, $location) => {
+
+	let serv = {};
+
+    //load user has been called (is called on page load in menu controller and after login on modal controller)
+    serv.loadUser =  () => {
+        if(typeof $cookies.get('access_token') !== 'undefined' ){
+			$rootScope.$broadcast('loadUserSuccess', parseJwt( $cookies.get('access_token') ));
+			$('#modalLoginForm').modal('hide');
+		} else {
+			if($location.path() === '/signup') { $('#modalLoginForm').modal('hide'); }
+			else { $('#modalLoginForm').modal({backdrop: 'static', keyboard: false}); }
+		}
+	}
+	
+	return serv;
+
+};
+
+export default UserService;
\ No newline at end of file
diff --git a/src/assets/scripts/dashboard/dashboard.controller.js b/src/assets/scripts/dashboard/dashboard.controller.js
new file mode 100644
index 0000000..a9e483c
--- /dev/null
+++ b/src/assets/scripts/dashboard/dashboard.controller.js
@@ -0,0 +1,12 @@
+/** @ngInject */
+const DashboardController = ($scope, UserService) => {
+    $scope.$on('loadUserSuccess', function(event, user) {
+        $scope.user = user;
+        
+        // tutte le funzioni del controller
+        
+    }); 
+    UserService.loadUser();
+}
+
+export default DashboardController;
\ No newline at end of file
diff --git a/src/assets/scripts/dashboard/dashboard.html b/src/assets/scripts/dashboard/dashboard.html
new file mode 100644
index 0000000..7072d84
--- /dev/null
+++ b/src/assets/scripts/dashboard/dashboard.html
@@ -0,0 +1,342 @@
+<main class='main-content bgc-grey-300'>
+  <div id='mainContent row'>
+    <div class="row content-title mT-60">
+      <div class="col-8 ml-1 mb-3">
+        Welcome {{ user.fullname }}
+      </div>
+    </div>
+    <div class=" gap-20 masonry pos-r">
+      <!-- #content container ===== -->
+      <div class="masonry-sizer col-md-6"></div>
+      <!-- #NOMIT & REFEREE ===== -->
+      <div class="masonry-item  w-100  visible-nomit visible-referee">
+        <!-- #First line ========= -->
+
+        <div class="row gap-20">
+
+          <div class='col-md-4 '>
+            <!-- #Total Ads Views ==================== -->
+            <div class="layers bd bgc-white p-20 item-box">
+              <div class="layer w-100 mB-10">
+                <h6 class="lh-1">Total Applications</h6>
+              </div>
+              <div class="layer w-100">
+                <div class="peers ai-sb fxw-nw">
+                  <div class="peer peer-greed">
+                    <span id="sparklinedash"></span>
+                  </div>
+                  <div class="peer">
+                    <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">24K</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <div class='col-md-4 '>
+            <!-- #Successful Matches ==================== -->
+            <div class="layers bd bgc-white p-20 item-box">
+              <div class="layer w-100 mB-10">
+                <h6 class="lh-1">Successful Matches</h6>
+              </div>
+              <div class="layer w-100">
+                <div class="peers ai-sb fxw-nw">
+                  <div class="peer peer-greed">
+                    <span id="sparklinedash2"></span>
+                  </div>
+                  <div class="peer">
+                    <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">127</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <div class='col-md-4 '>
+            <!-- #New Ads ==================== -->
+            <div class="layers bd bgc-white p-20 item-box">
+              <div class="layer w-100 mB-10">
+                <h6 class="lh-1">New Ads (last month)</h6>
+              </div>
+              <div class="layer w-100">
+                <div class="peers ai-sb fxw-nw">
+                  <div class="peer peer-greed">
+                    <span id="sparklinedash3"></span>
+                  </div>
+                  <div class="peer">
+                    <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">79</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="masonry-item col-12 visible-nomit visible-referee">
+        <!-- #New Registered Users ==================== -->
+        <div class="bd bgc-white item-box">
+          <div class="layers">
+            <div class="layer w-100 pX-20 pT-20">
+              <h6 class="lh-1">New Registered Users</h6>
+            </div>
+            <div class="layer w-100 p-20">
+              <canvas id="line-chart" height="220" ng-show="{{user.role}} == 'admin'"></canvas>
+            </div>
+            <div class="layer bdT p-20 w-100">
+              <div class="peers ai-c jc-c gapX-20">
+                <div class="peer">
+                  <span class="fsz-def fw-600 mR-10 c-purple-800">COMPANIES </span>
+                </div>
+                <div class="peer fw-600">
+                  <span class="fsz-def fw-600 mR-10 c-cyan-400">USERS </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="masonry-item w-100 visible-nomit visible-referee">
+        <!-- #Successful Mathches & #Nationality ==================== -->
+        <div class="row gap-20">
+          <div class="col-3 ">
+            <!-- #Successful Mathches %==================== -->
+            <div class="bd bgc-white p-20 peer peer-greed succ-match-perc item-box">
+              <div class="layers">
+                <div class="layer w-100 mB-10">
+                  <h6 class="lh-1">Successful Mathches %</h6>
+                </div>
+                <!-- Pie Charts -->
+                <div class="peers pT-50 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">Matched</h6>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-9 ">
+            <!-- #Nationality ==================== -->
+            <div class="bd bgc-white item-box nationality-item">
+              <div class="peers fxw-nw@lg+ ai-s">
+                <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
+                  <div class="layers">
+                    <div class="layer w-100 mB-10">
+                      <h6 class="lh-1">Nationality</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <div id="world-map-marker"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
+                  <div class="layers">
+                    <div class="layer w-100">
+                      <!-- Progress Bars -->
+                      <div class="layers">
+                        <div class="layer w-100">
+                          <h5 class="mB-5">100k</h5>
+                          <small class="fw-600 c-grey-700">Visitors From USA</small>
+                          <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-deep-purple-500 nationality-item-progress-bar" role="progressbar"
+                              aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">50%
+                                Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">1M</h5>
+                          <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                          <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0"
+                              aria-valuemax="100" style="width:80%;"> <span class="sr-only">80%
+                                Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">450k</h5>
+                          <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                          <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50"
+                              aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40%
+                                Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">1B</h5>
+                          <small class="fw-600 c-grey-700">Visitors From India</small>
+                          <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50"
+                              aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90%
+                                Complete</span></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- #COMPANY / REFEREE / NOMIT ===== -->
+      <div class="masonry-item content-title w-100 visible-company visible-nomit visible-referee">
+        <div class="col-8 ml-1 mb-3">
+          Your Ads
+        </div>
+      </div>
+      <div class="masonry-item col-12 visible-company visible-nomit visible-referee">
+        <!-- #suggested ads ==================== -->
+        <div class="row gap-30">
+
+          <!-- # ad n 1 ==================== -->
+          <div class='col-md-4'>
+            <div class="card item-box">
+              <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+              <div class="card-body">
+                <h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
+                  <div>Adv title </div>
+                </h5>
+                <h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                  card's content.</p>
+              </div>
+              <a href="ads_1.html">
+                <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                  VIEW MORE <i class=" ti-angle-right" style="color:#fff;  font-weight: bolder;"></i>
+                </div>
+              </a>
+            </div>
+          </div>
+
+          <!-- # ad n 2 ==================== -->
+          <div class='col-md-4'>
+            <div class="card item-box">
+              <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+              <div class="card-body">
+                <h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
+                  <div>Adv title </div>
+                </h5>
+                <h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                  card's content.</p>
+              </div>
+              <a href="ads_1.html">
+                <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                  VIEW MORE <i class=" ti-angle-right" style="color:#fff;  font-weight: bolder;"></i>
+                </div>
+              </a>
+            </div>
+          </div>
+          <!-- # ad n 3 ==================== -->
+          <div class='col-md-4'>
+            <div class="card item-box">
+              <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+              <div class="card-body">
+                <h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
+                  <div>Adv title </div>
+                </h5>
+                <h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                  card's content.</p>
+              </div>
+              <a href="ads_1.html">
+                <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                  VIEW MORE <i class=" ti-angle-right" style="color:#fff;  font-weight: bolder;"></i>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="masonry-item  w-100">
+        <button type="button" class="btn btn-gradient "><i class="fa fa-plus pdd-right-5"></i>CREATE NEW AD</button>
+      </div>
+
+
+      <!-- #USERS ===== -->
+      <div class="masonry-item col-12 visible-user">
+        <!-- #suggested ads ==================== -->
+        <div class="row gap-30">
+
+          <!-- # ad n 1 ==================== -->
+          <div class='col-md-4'>
+            <div class="card item-box">
+              <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+              <div class="card-body">
+                <h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
+                  <div>Adv title </div>
+                  <div>
+                    <a class='' href=""> <span class="icon-holder" style="color:#EE38A4"><i class="fa fa-heart"></i></span></a>
+                  </div>
+                </h5>
+                <h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                  card's content.</p>
+              </div>
+              <a href="ads_1.html">
+                <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                  VIEW MORE <i class=" ti-angle-right" style="color:#fff;  font-weight: bolder;"></i>
+                </div>
+              </a>
+            </div>
+          </div>
+
+          <!-- # ad n 2 ==================== -->
+          <div class='col-md-4'>
+            <div class="card item-box">
+              <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+              <div class="card-body">
+                <h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
+                  <div>Adv title </div>
+                  <div>
+                    <a class='' href=""> <span class="icon-holder" style="color:#EE38A4"><i class="fa fa-heart"></i></span></a>
+                  </div>
+                </h5>
+                <h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                  card's content.</p>
+              </div>
+              <a href="ads_1.html">
+                <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                  VIEW MORE <i class=" ti-angle-right" style="color:#fff;  font-weight: bolder;"></i>
+                </div>
+              </a>
+            </div>
+          </div>
+          <!-- # ad n 3 ==================== -->
+          <div class='col-md-4'>
+            <div class="card item-box">
+              <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
+              <div class="card-body">
+                <h5 class="card-title d-flex" style="justify-content:space-between; margin-bottom:1px; font-weight: bolder; text-align: left;">
+                  <div>Adv title </div>
+                  <div>
+                    <a class='' href=""> <span class="icon-holder" style="color:#EE38A4"><i class="fa fa-heart"></i></span></a>
+                  </div>
+                </h5>
+                <h5 class="card-title" style="font-size:11px; margin-top: 1px;">Adv title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                  card's content.</p>
+              </div>
+              <a href="ads_1.html">
+                <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
+                  VIEW MORE <i class=" ti-angle-right" style="color:#fff;  font-weight: bolder;"></i>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/assets/scripts/dashboard/index.js b/src/assets/scripts/dashboard/index.js
new file mode 100644
index 0000000..a23183e
--- /dev/null
+++ b/src/assets/scripts/dashboard/index.js
@@ -0,0 +1,6 @@
+import * as angular from 'angular';
+import DashboardController from './dashboard.controller';
+
+
+angular.module('nwDashboard', [])
+    .controller(DashboardController.name, DashboardController);
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index 1d1ca0b..edb9c39 100755
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@@ -1,5 +1,6 @@
 import '../styles/index.scss';
 
+import 'babel-polyfill';
 import './masonry';
 import './charts';
 import './popover';
@@ -16,4 +17,15 @@ import './fullcalendar';
 import './googleMaps';
 import './utils';
 import './user-form';
-import './login';
\ No newline at end of file
+import './logout';
+import './nwLogin';
+import './nwFooter';
+import './nwSidebar';
+import './nwTopbar';
+import './dashboard'
+import './ads';
+import './ads-details';
+import './profile';
+import './signup';
+
+import './app';
\ No newline at end of file
diff --git a/src/assets/scripts/login/controller.js b/src/assets/scripts/login/controller.js
deleted file mode 100644
index 653ab3a..0000000
--- a/src/assets/scripts/login/controller.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import 'babel-polyfill';
-const LoginController = ($scope, LoginService, $cookies) => {
-	$scope.userLogged = false;		
-	
-	if(typeof $cookies.get('access_token') !== 'undefined' ){
-		$scope.userLogged = true;
-		$scope.user = parseJwt( $cookies.get('access_token') );
-    }
-	console.log("BEFORE FUNC ");
-	$scope.userLogin = async () => {
-		
-		let result = await LoginService.loginUserService($scope.user); 
-		if( $scope.user !== "" || $scope.user !== "undefined"){
-            console.log(result);
-			$scope.userLogged = true;		
-			$scope.user = parseJwt( result );
-			$cookies.put('access_token', result);
-			console.log('Redirect me to Dashboard.');
-		} else {
-			console.log("User is empty");
-			
-		}
-	}
-};
-
-function parseJwt(token) {
-    var base64Url = token.split('.')[1];
-    var base64 = base64Url.replace('-', '+').replace('_', '/');
-    return JSON.parse(window.atob(base64));
-};
-
-export default LoginController;
\ No newline at end of file
diff --git a/src/assets/scripts/logout/controller.js b/src/assets/scripts/logout/controller.js
new file mode 100644
index 0000000..28f9960
--- /dev/null
+++ b/src/assets/scripts/logout/controller.js
@@ -0,0 +1,11 @@
+const LogoutController = ($scope, LogoutService, $cookies, UserService) => {
+	$scope.userLogged = false;		
+	
+	$scope.userLogout = async () => {
+		await LogoutService.logoutUserService($scope.user); 
+        $cookies.remove('access_token');
+		UserService.loadUser();
+	}
+};
+
+export default LogoutController;
\ No newline at end of file
diff --git a/src/assets/scripts/logout/index.js b/src/assets/scripts/logout/index.js
new file mode 100644
index 0000000..6fc9ff8
--- /dev/null
+++ b/src/assets/scripts/logout/index.js
@@ -0,0 +1,8 @@
+import angular from 'angular';
+import ngCookies from 'angular-cookies';
+import LogoutController from './controller';
+import LogoutService from './service';
+
+angular.module('nwLogout', [ngCookies])
+    .controller(LogoutController.name, LogoutController)
+    .factory(LogoutService.name, LogoutService);
\ No newline at end of file
diff --git a/src/assets/scripts/logout/service.js b/src/assets/scripts/logout/service.js
new file mode 100644
index 0000000..c2188c7
--- /dev/null
+++ b/src/assets/scripts/logout/service.js
@@ -0,0 +1,22 @@
+const LogoutService = ($http) => {
+    let serv = {};
+
+    serv.logoutUserService = (user) =>{
+        return $http({
+			method: 'POST',
+            url: 'https://nomitwisp-restapi.herokuapp.com/logout',
+            data: user,
+			headers: { 'Content-Type': 'application/json' }
+		})
+        .then( (result) => {
+                console.log(result);
+                return result;              
+        }, (err) => {
+                console.log(err.data);
+                return err.data;
+        });
+    }
+    return serv;
+}
+
+export default LogoutService;
\ No newline at end of file
diff --git a/src/assets/scripts/masonry/index.js b/src/assets/scripts/masonry/index.js
index 1b52abb..2e50a5c 100755
--- a/src/assets/scripts/masonry/index.js
+++ b/src/assets/scripts/masonry/index.js
@@ -4,7 +4,7 @@ import Masonry from 'masonry-layout';
 export default (function () {
   window.addEventListener('load', () => {
     if ($('.masonry').length > 0) {
-      new Masonry('.masonry', {
+      window.msnry = new Masonry('.masonry', {
         itemSelector: '.masonry-item',
         columnWidth: '.masonry-sizer',
         percentPosition: true,
diff --git a/src/assets/scripts/nwFooter/index.js b/src/assets/scripts/nwFooter/index.js
new file mode 100644
index 0000000..ff8cb93
--- /dev/null
+++ b/src/assets/scripts/nwFooter/index.js
@@ -0,0 +1,12 @@
+import angular from 'angular';
+
+angular.module('NomitWisp-Footer', [])
+    .directive('nwFooter', nwFooter);
+    
+/** @ngInject */
+function nwFooter (){
+    return {
+        restrict: 'E',
+        templateUrl: 'assets/scripts/nwFooter/nwFooter.html'
+    }
+}
\ No newline at end of file
diff --git a/src/_footer.html b/src/assets/scripts/nwFooter/nwFooter.html
similarity index 100%
rename from src/_footer.html
rename to src/assets/scripts/nwFooter/nwFooter.html
diff --git a/src/assets/scripts/nwLogin/controller.js b/src/assets/scripts/nwLogin/controller.js
new file mode 100644
index 0000000..ff09677
--- /dev/null
+++ b/src/assets/scripts/nwLogin/controller.js
@@ -0,0 +1,23 @@
+const LoginController = ($scope, $cookies, LoginService, UserService) => {
+
+	// load the user if already logged in, for all controllers
+	UserService.loadUser();
+	
+	$scope.userLogin = async (isValid) => {
+		if(isValid){
+			let result = await LoginService.loginUserService($scope.user); 
+			if( typeof result.token !== "undefined"){
+
+				// save the cookie and reload the user for all controllers
+				$cookies.put('access_token', result.token);
+				UserService.loadUser();
+
+			} else {
+				alert(result);
+			}
+		}
+	}
+
+};
+
+export default LoginController;
\ No newline at end of file
diff --git a/src/assets/scripts/login/index.js b/src/assets/scripts/nwLogin/index.js
similarity index 63%
rename from src/assets/scripts/login/index.js
rename to src/assets/scripts/nwLogin/index.js
index b93d652..e299548 100644
--- a/src/assets/scripts/login/index.js
+++ b/src/assets/scripts/nwLogin/index.js
@@ -4,9 +4,14 @@ import LoginController from './controller';
 import LoginService from './service';
 
 angular.module('NomitWisp-Login', [ngCookies])
-    .config(['$httpProvider', function($httpProvider) {
-        $httpProvider.defaults.withCredentials = true;
-    }])
+    .directive('nwLogin', nwLogin)
     .controller(LoginController.name, LoginController)
     .factory(LoginService.name, LoginService);
-    
+
+/** @ngInject */
+function nwLogin(){
+    return {
+        restrict: 'E',
+        templateUrl: 'assets/scripts/nwLogin/nwLogin.html'
+    };
+}
\ No newline at end of file
diff --git a/src/assets/scripts/nwLogin/nwLogin.html b/src/assets/scripts/nwLogin/nwLogin.html
new file mode 100644
index 0000000..12ff136
--- /dev/null
+++ b/src/assets/scripts/nwLogin/nwLogin.html
@@ -0,0 +1,154 @@
+<div ng-controller="LoginController">
+    <!-- Modal -->
+     <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="modalLoginFormLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-body d-flex">
+              <div class="modal-left" >
+                    <p class="mo-title">Let's start with getting connected.</p>
+                    <div class="subtitle-modal">Sign up and join the WISP. </div>
+                    <a class="btn btn-signup" href="#!signup" role="button">SIGNUP</a>
+              </div>
+              <div class="modal-right ">
+                  <div class="logo-wisp-right"> 
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                        viewBox="0 0 138.8360748 39.8824463" style="enable-background:new 0 0 138.8360748 39.8824463;" xml:space="preserve">
+                   <style type="text/css">
+                       .st0{fill:url(#SVGID_1_);}
+                       .st1{fill:url(#SVGID_2_);}
+                       .st2{fill:url(#SVGID_3_);}
+                       .st3{fill:url(#SVGID_4_);}
+                       .st4{fill:url(#SVGID_5_);}
+                       .st5{fill:url(#SVGID_6_);}
+                       .st6{fill:url(#SVGID_7_);}
+                       .st7{fill:url(#SVGID_8_);}
+                       .st8{fill:url(#SVGID_9_);}
+                       .st9{fill:url(#SVGID_10_);}
+                       .st10{fill:url(#SVGID_11_);}
+                       .st11{fill:#FFFFFF;}
+                       .st12{fill:url(#SVGID_12_);}
+                       .st13{fill:url(#SVGID_13_);}
+                       .st14{fill:url(#SVGID_14_);}
+                       .st15{fill:url(#SVGID_15_);}
+                       .st16{fill:url(#SVGID_16_);}
+                       .st17{fill:url(#SVGID_17_);}
+                       .st18{fill:url(#SVGID_18_);}
+                       .st19{fill:url(#SVGID_19_);}
+                   </style>
+                   <g>
+                       <g>
+                           <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.806386" y1="30.5149899" x2="13.806386" y2="0.0000301">
+                               <stop  offset="0" style="stop-color:#8B00B1"/>
+                               <stop  offset="0" style="stop-color:#EE38A4"/>
+                               <stop  offset="0.0866544" style="stop-color:#C832A9"/>
+                               <stop  offset="0.1996946" style="stop-color:#9D2AAF"/>
+                               <stop  offset="0.3094908" style="stop-color:#7C24B3"/>
+                               <stop  offset="0.4136127" style="stop-color:#6420B6"/>
+                               <stop  offset="0.5097673" style="stop-color:#551EB8"/>
+                               <stop  offset="0.5903056" style="stop-color:#501DB9"/>
+                               <stop  offset="0.6045721" style="stop-color:#501DB9"/>
+                               <stop  offset="0.7748037" style="stop-color:#501DB9"/>
+                               <stop  offset="0.8825542" style="stop-color:#7311B4"/>
+                               <stop  offset="1" style="stop-color:#9506B0"/>
+                               <stop  offset="1" style="stop-color:#9103B0"/>
+                           </linearGradient>
+                           <path class="st0" d="M18.4649811,27.823019l-0.0005131,0.0005131c0.0724716-0.0724716,0.1342678-0.1448421,0.204174-0.2173138
+                               l-3.4111109-3.4110069l-0.558629-0.55863L6.319869,15.2575493l2.234416-2.234416l6.7032461-6.7032471l2.234416,2.234416
+                               l5.6520958,5.6520948l3.0811882-3.0812902l-3.0811882,3.0812902l0,0l4.2584972-4.2586002L27.612772,9.737566l-7.8864098-7.8864594
+                               c-2.468153-2.4681017-6.4696112-2.4681017-8.9376621,0l-8.9376621,8.9376106c-2.4680505,2.468051-2.4680505,6.4695606,0,8.9376621
+                               l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z
+                               "/>
+                           <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3865204" y1="27.2705288" x2="37.6677437" y2="6.9730129">
+                               <stop  offset="0" style="stop-color:#8B00B1"/>
+                               <stop  offset="0" style="stop-color:#EE38A4"/>
+                               <stop  offset="0.5092942" style="stop-color:#9103B0"/>
+                               <stop  offset="1" style="stop-color:#501DB9"/>
+                               <stop  offset="1" style="stop-color:#9506B0"/>
+                           </linearGradient>
+                           <path class="st1" d="M55.4768066,10.7887173l-8.9376602-8.9376106l-4.4687309,4.4687796l6.7032471,6.7032471l2.234314,2.234416
+                               l-6.7031441,6.7032471l-2.234417,2.2344151l-7.7302742-7.7302761l-0.2102318,0.2102318l-4.2584972,4.2586002l7.7301731,7.7301731
+                               v0.0000515c2.4680519,2.4679985,6.4696121,2.4679985,8.937561,0l8.9376602-8.9376125
+                               C57.9449615,17.2582779,57.9449615,13.2567682,55.4768066,10.7887173z"/>
+                           <g>
+                               <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="10.7887001" y1="15.2575035" x2="46.5391464" y2="15.2575035">
+                                   <stop  offset="0" style="stop-color:#8B00B1"/>
+                                   <stop  offset="0" style="stop-color:#EE38A4"/>
+                                   <stop  offset="0.1175187" style="stop-color:#D634A7"/>
+                                   <stop  offset="0.4183493" style="stop-color:#9D2AAF"/>
+                                   <stop  offset="0.6763742" style="stop-color:#7323B4"/>
+                                   <stop  offset="0.8785662" style="stop-color:#591FB8"/>
+                                   <stop  offset="1" style="stop-color:#501DB9"/>
+                               </linearGradient>
+                               <path class="st2" d="M37.6015854,1.8511064l-8.9376621,8.9376106l-4.468729,4.468832l-0.55863,0.558629l-8.3790331,8.3790331
+                                   l-4.4688311,4.468832c2.467948,2.4677925,6.4688931,2.4678955,8.937149,0.0004101l0.0005131-0.0005131l13.4063931-13.4063911
+                                   l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z"
+                                   />
+                               <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.1951942" y1="13.6117887" x2="27.4866123" y2="13.6117887">
+                                   <stop  offset="0" style="stop-color:#8B00B1"/>
+                                   <stop  offset="0" style="stop-color:#EE38A4"/>
+                                   <stop  offset="0.1175187" style="stop-color:#D634A7"/>
+                                   <stop  offset="0.4183493" style="stop-color:#9D2AAF"/>
+                                   <stop  offset="0.6763742" style="stop-color:#7323B4"/>
+                                   <stop  offset="0.8785662" style="stop-color:#591FB8"/>
+                                   <stop  offset="1" style="stop-color:#501DB9"/>
+                               </linearGradient>
+                               <polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282 			"/>
+                           </g>
+                       </g>
+                       <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.3990173" y1="-7.8904157" x2="122.914917" y2="37.6254807">
+                           <stop  offset="0" style="stop-color:#8B00B1"/>
+                           <stop  offset="0" style="stop-color:#EE38A4"/>
+                           <stop  offset="0.0727272" style="stop-color:#D634A7"/>
+                           <stop  offset="0.2166433" style="stop-color:#AD2DAD"/>
+                           <stop  offset="0.3643613" style="stop-color:#8C27B1"/>
+                           <stop  offset="0.5144968" style="stop-color:#7123B5"/>
+                           <stop  offset="0.6680248" style="stop-color:#5F20B7"/>
+                           <stop  offset="0.8269761" style="stop-color:#541EB9"/>
+                           <stop  offset="1" style="stop-color:#501DB9"/>
+                       </linearGradient>
+                       <path class="st4" d="M73.7269974,4.3174438v5.8997192v11.3051758v5.3615112
+                           c-0.4117432,2.0700073-1.6452637,3.1047974-3.7012939,3.1047974c-1.9445801,0-3.1610107-0.9794312-3.6466064-2.94104v-5.3562012
+                           V10.0534058V4.1483765c0.4855957-2.0239868,1.7020264-3.036438,3.6466064-3.036438
+                           C72.0817337,1.1119385,73.3152542,2.180603,73.7269974,4.3174438z M106.2809982,19.8569603
+                           c0-1.8695717-0.9047928-3.7108078-2.7115402-5.5251274c-1.8067474-1.8133755-3.6427689-2.7205353-5.5052414-2.7205353h-6.3165283
+                           c-1.0814056-0.3452024-1.6216354-1.055913-1.6216354-2.1316605c0-1.1130533,0.5383453-1.8237638,1.6159668-2.1311879h3.5096054
+                           c1.9682465-0.5189838,2.9523697-1.7250671,2.9523697-3.6182499c0-2.0782979-1.0483475-3.3216877-3.1412582-3.7301693h-3.8703918
+                           c-1.9077988,0-3.7872696,0.9000763-5.6374664,2.7002289c-1.8511353,1.8001525-2.7767029,3.6574452-2.7767029,5.5699892v2.4192505
+                           c0,1.8752375,0.9038467,3.7230854,2.7105942,5.5416546c1.8067474,1.8195152,3.6427689,2.7285633,5.5061874,2.7285633h6.3165283
+                           c1.0804596,0.3367023,1.6216354,1.0474129,1.6216354,2.1316605c0,1.0474129-0.5392838,1.7387619-1.6150208,2.0754642h-3.3981628
+                           c-2.0060272,0.5605412-3.0090408,1.7765408-3.0090408,3.6461124c0,1.9446564,1.0105743,3.1776562,3.0298233,3.7018356h4.0951614
+                           c1.8690872,0,3.7098312-0.8972435,5.5250778-2.6922016c1.8133621-1.7949581,2.7200394-3.6267509,2.7200394-5.4972649V19.8569603z
+                            M138.8360748,10.5393066v2.6487427c0,2.5925903-1.1069336,4.9976807-3.3208008,7.2142944
+                           c-2.2138672,2.2171631-4.6164551,3.3250122-7.2062988,3.3250122h-2.5329514c-0.7498779,0-1.7822266-0.2800293-3.0959473-0.8410645
+                           v13.7991333c-0.4117432,2.1312256-1.6452637,3.1970215-3.7012939,3.1970215c-1.9447021,0-3.1610107-1.0115356-3.6466064-3.0331421
+                           V3.0893555c0-0.262085,0.1303711-0.6176758,0.3929443-1.0672607C116.5467758,0.6738892,117.6329575,0,118.9787827,0
+                           c0.9718018,0,1.8690186,0.4118042,2.692627,1.2339478C123.354393,0.4118042,124.7372055,0,125.821434,0h2.525383
+                           c2.5803223,0,4.9726562,1.1088257,7.1798096,3.3250122C137.7328033,5.5426025,138.8360748,7.9467773,138.8360748,10.5393066z
+                            M131.4881744,10.4920654c0-0.6478882-0.3929443-1.3340454-1.1787109-2.0579834
+                           c-0.7858887-0.723938-1.4960938-1.0856323-2.1315918-1.0856323h-2.1874924c-0.6364746,0-1.3458252,0.3711548-2.1315918,1.1144409
+                           s-1.1787109,1.4384155-1.1787109,2.0863647v2.6293945c0,0.5713501,0.3835449,1.2481079,1.1503906,2.0286865
+                           c0.7668457,0.7820435,1.4309082,1.1720581,1.9909668,1.1720581h2.525383c0.5610352,0,1.2241211-0.3900146,1.9909668-1.1720581
+                           c0.7658691-0.7805786,1.1503906-1.4573364,1.1503906-2.0286865V10.4920654z"/>
+                   </g>
+                   </svg>
+
+                </div> <!--logo-->
+                <div>
+                  <h4 class=""><strong>Sign In </strong>
+                  <form ng-submit="userLogin(LoginForm.$valid)" name="LoginForm" novalidate>
+                    <input name="email" class="modal-username form-control" ng-model="user.email" type="email" placeholder="Email" required />
+                    <p ng-show="LoginForm.email.$error.required">This field is required.</p>
+                    <p ng-show="LoginForm.email.$error.email">Invalid email.</p>
+                    
+                    <input name="pwd" class="modal-username" type="password" ng-model="user.password" placeholder="Password" ng-minlength=5 required />
+                    <p ng-show="LoginForm.pwd.$error.minlength">Min 5 characters.</p>
+                    <button type="submit" class="btn btn-gradient btn-centered mt-2">SIGN IN</button>
+                  </form>
+                </div>
+              </div>
+              </div>
+            
+          </div>
+        </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/assets/scripts/login/service.js b/src/assets/scripts/nwLogin/service.js
similarity index 56%
rename from src/assets/scripts/login/service.js
rename to src/assets/scripts/nwLogin/service.js
index 5218508..6aef381 100644
--- a/src/assets/scripts/login/service.js
+++ b/src/assets/scripts/nwLogin/service.js
@@ -1,7 +1,7 @@
 const LoginService = ($http) => {
     let serv = {};
 
-    serv.loginUserService = (user) =>{
+    serv.loginUserService = (user) => {
         return $http({
 			method: 'POST',
 			url: 'https://nomitwisp-restapi.herokuapp.com/login',
@@ -9,11 +9,11 @@ const LoginService = ($http) => {
 			headers: { 'Content-Type': 'application/json' }
 		})
         .then( (result) => {
-                console.log(result.data.token);
-                return result.data.token;              
+            console.log(result);
+            return result.data;              
         }, (err) => {
-                console.log(err.data);
-                return err.data;
+            console.log(err);
+            return err.data;
         });
     }
     return serv;
diff --git a/src/assets/scripts/nwSidebar/index.js b/src/assets/scripts/nwSidebar/index.js
new file mode 100644
index 0000000..e094d45
--- /dev/null
+++ b/src/assets/scripts/nwSidebar/index.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+import SidebarController from './sidebar.controller';
+
+angular.module('NomitWisp-Sidebar', [])
+    .controller(SidebarController.name, SidebarController)
+    .directive('nwSidebar', nwSidebar);
+
+/** @ngInject */
+function nwSidebar(){
+    return {
+        restrict: 'E',
+        controller: 'SidebarController',
+        templateUrl: 'assets/scripts/nwSidebar/nwSidebar.html'
+    };
+}
\ No newline at end of file
diff --git a/src/assets/scripts/nwSidebar/nwSidebar.html b/src/assets/scripts/nwSidebar/nwSidebar.html
new file mode 100644
index 0000000..7f6ea22
--- /dev/null
+++ b/src/assets/scripts/nwSidebar/nwSidebar.html
@@ -0,0 +1,293 @@
+<!-- #Left Sidebar ==================== -->
+<div class="sidebar">
+  <div class="sidebar-inner ">
+    <!-- ### $Sidebar Header ### -->
+    <div class="sidebar-logo">
+      <div class="peers ai-c fxw-nw">
+        <div class="peer peer-greed">
+          <a class="sidebar-link td-n" href="index.html">
+            <div class="peers ai-c fxw-nw">
+              <div class="peer">
+                <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;"
+                    xml:space="preserve">
+                    <style type="text/css">
+                      .logost0 {
+                        fill: url(#LOGOSVGID_1_);
+                      }
+
+                      .logost1 {
+                        fill: url(#LOGOSVGID_2_);
+                      }
+
+                      .logost2 {
+                        fill: url(#LOGOSVGID_3_);
+                      }
+
+                      .logost3 {
+                        fill: url(#LOGOSVGID_4_);
+                      }
+
+                      .logost4 {
+                        fill: url(#LOGOSVGID_5_);
+                      }
+
+                      .logost5 {
+                        fill: url(#LOGOSVGID_6_);
+                      }
+
+                      .logost6 {
+                        fill: url(#LOGOSVGID_7_);
+                      }
+
+                      .logost7 {
+                        fill: url(#LOGOSVGID_8_);
+                      }
+
+                      .logost8 {
+                        fill: url(#LOGOSVGID_9_);
+                      }
+
+                      .logost9 {
+                        fill: url(#LOGOSVGID_10_);
+                      }
+
+                      .logost10 {
+                        fill: url(#LOGOSVGID_11_);
+                      }
+
+                      .logost11 {
+                        fill: #FFFFFF;
+                      }
+
+                      .logost12 {
+                        fill: url(#LOGOSVGID_12_);
+                      }
+
+                      .logost13 {
+                        fill: url(#LOGOSVGID_13_);
+                      }
+
+                      .logost14 {
+                        fill: url(#LOGOSVGID_14_);
+                      }
+
+                      .logost15 {
+                        fill: url(#LOGOSVGID_15_);
+                      }
+
+                      .logost16 {
+                        fill: url(#LOGOSVGID_16_);
+                      }
+
+                      .logost17 {
+                        fill: url(#LOGOSVGID_17_);
+                      }
+
+                      .logost18 {
+                        fill: url(#LOGOSVGID_18_);
+                      }
+
+                      .logost19 {
+                        fill: url(#LOGOSVGID_19_);
+                      }
+
+                    </style>
+                    <g>
+                      <g>
+                        <linearGradient id="LOGOSVGID_1_" gradientUnits="userSpaceOnUse" x1="14.6859789" y1="5.9550242"
+                          x2="40.6093216" y2="50.8555679">
+                          <stop offset="0" style="stop-color:#8B00B1" />
+                          <stop offset="0" style="stop-color:#FFFFFF" />
+                          <stop offset="0.3073062" style="stop-color:#FDFDFD" />
+                          <stop offset="0.4651366" style="stop-color:#F5F5F5" />
+                          <stop offset="0.5889232" style="stop-color:#E8E8E8" />
+                          <stop offset="0.6943781" style="stop-color:#D5D5D5" />
+                          <stop offset="0.7869266" style="stop-color:#BDBDBD" />
+                          <stop offset="0.8250626" style="stop-color:#BABABA" />
+                          <stop offset="1" style="stop-color:#B8B8B8" />
+                        </linearGradient>
+                        <path class="logost0" d="M34.0411263,51.2930908l-0.000946,0.000946c0.133606-0.133606,0.2475319-0.267025,0.3764076-0.400631
+                           l-6.2885551-6.2883644l-1.0298615-1.0298615L11.6509991,28.1280079l4.1192579-4.119257l12.3577757-12.3577757l4.1192589,4.1192579
+                           l10.4199219,10.4199238l5.6803284-5.6805153l-5.6803284,5.6805153l0,0l7.8507576-7.8509464l0.3875732-0.3875694
+                           L36.3665504,3.4125531c-4.5501671-4.5500708-11.9270592-4.5500708-16.4770355,0L3.412482,19.889492
+                           c-4.5499759,4.5499763-4.5499759,11.9269619,0,16.4770317l16.4770336,16.4769402
+                           c4.5499763,4.549881,11.9268684,4.549881,16.4770355,0v-0.0000954l-1.937851-1.937851L34.0411263,51.2930908z" />
+                        <path class="logost11" d="M102.2743073,19.889492L85.7972717,3.4125531l-8.238327,8.2384224l12.3577728,12.3577757l4.119072,4.119257
+                           L81.6781998,40.4857826l-4.1192551,4.1192589L63.3077888,30.3538876l-0.3875694,0.3875713l-7.8507576,7.8509445
+                           l14.2509651,14.2509651v0.0000954c4.5499725,4.549881,11.9270554,4.549881,16.4768448,0l16.4770355-16.4769402
+                           C106.8244705,31.8164539,106.8244705,24.4394684,102.2743073,19.889492z" />
+                        <g>
+                          <linearGradient id="LOGOSVGID_2_" gradientUnits="userSpaceOnUse" x1="24.0086803" y1="56.9627228"
+                            x2="81.6780624" y2="-0.7066581">
+                            <stop offset="0" style="stop-color:#8B00B1" />
+                            <stop offset="0" style="stop-color:#FFFFFF" />
+                            <stop offset="0.3235791" style="stop-color:#FDFDFD" />
+                            <stop offset="0.5064212" style="stop-color:#F4F4F4" />
+                            <stop offset="0.6542051" style="stop-color:#E7E7E7" />
+                            <stop offset="0.7824864" style="stop-color:#D3D3D3" />
+                            <stop offset="0.885314" style="stop-color:#BDBDBD" />
+                            <stop offset="0.9058406" style="stop-color:#BABABA" />
+                            <stop offset="1" style="stop-color:#B8B8B8" />
+                          </linearGradient>
+                          <path class="logost1" d="M69.3204269,3.4125531L52.8433952,19.889492l-8.2383308,8.2385159l-1.0298615,1.0298634
+                             L28.1280327,44.6050415l-8.2385178,8.2385178c4.5497875,4.5495033,11.9257336,4.5496902,16.4760895,0.0007553l0.000946-0.000946
+                             l24.7153587-24.7153606l15.4471741-15.4471712l1.0298615-1.0298615l8.238327-8.2384224
+                             C81.2474823-1.1375177,73.8703995-1.1375177,69.3204269,3.4125531z" />
+                          <linearGradient id="LOGOSVGID_3_" gradientUnits="userSpaceOnUse" x1="44.6050186" y1="28.1279621"
+                            x2="50.673008" y2="22.0599709">
+                            <stop offset="0" style="stop-color:#8B00B1" />
+                            <stop offset="0" style="stop-color:#FFFFFF" />
+                            <stop offset="0.3235791" style="stop-color:#FDFDFD" />
+                            <stop offset="0.5064212" style="stop-color:#F4F4F4" />
+                            <stop offset="0.6542051" style="stop-color:#E7E7E7" />
+                            <stop offset="0.7824864" style="stop-color:#D3D3D3" />
+                            <stop offset="0.885314" style="stop-color:#BDBDBD" />
+                            <stop offset="0.9058406" style="stop-color:#BABABA" />
+                            <stop offset="1" style="stop-color:#B8B8B8" />
+                          </linearGradient>
+                          <polygon class="logost2" points="44.6050644,28.1279144 44.6050644,28.1280079 50.6729622,22.0599232 			" />
+                        </g>
+                      </g>
+                      <g>
+                        <path class="logost11" d="M39.1436119,81.5978546c0,1.7324905-0.7470245,3.3397293-2.2410698,4.8207779
+                           c-1.4940453,1.4819946-3.1073112,2.2220459-4.839798,2.2220459h-1.7324848c-0.9543877,0-2.0590687-0.3452988-3.314043-1.0361938
+                           c-0.2764874-0.1534653-0.6785355-0.4737091-1.2055092-0.9597778h-0.1128788
+                           c-0.3766823,0.460701-1.0672665,0.9087296-2.0717525,1.3434296c-1.0044861,0.4356613-1.820631,0.6525421-2.4478016,0.6525421
+                           h-1.6950703c-1.7324848,0-3.3394089-0.741951-4.8207722-2.2274399c-1.4819975-1.4845352-2.2220449-3.0952606-2.2220449-4.831871
+                           v-6.7580872c0.3259506-1.3589706,1.1420956-2.0387726,2.4484348-2.0387726c1.3799009,0,2.2087278,0.7188034,2.4852152,2.1545105
+                           v6.5380325c0,0.428688,0.2454147,0.9074631,0.7349739,1.4366608c0.4895611,0.5288773,0.9474144,0.7933121,1.3741932,0.7933121
+                           h1.6950703c0.3766823,0,0.8218536-0.2571411,1.3367786-0.7720718c0.5149269-0.5142899,0.7723885-0.9604111,0.7723885-1.3370972
+                           v-6.7419128c0.3513165-1.3805313,1.1795101-2.071434,2.4858513-2.071434c1.2549725,0,2.0711174,0.6909027,2.4477997,2.071434
+                           v6.7419128c0,0.3766861,0.2587318,0.8228073,0.7768288,1.3370972c0.5180969,0.5149307,0.9670715,0.7720718,1.3462906,0.7720718
+                           h1.74263c0.3792191,0,0.8275604-0.2571411,1.3456573-0.7720718c0.5174637-0.5142899,0.777462-0.9604111,0.777462-1.3370972
+                           v-6.7419128c0.372879-1.3805313,1.2086792-2.071434,2.5042381-2.071434c1.2448273,0,2.0552673,0.6909027,2.4294128,2.071434
+                           V81.5978546z" />
+                        <path class="logost11" d="M50.1029091,86.4887009c-0.2764854,1.4347534-1.1046791,2.1519775-2.4852142,2.1519775
+                           c-1.305706,0-2.1224823-0.6788559-2.4484329-2.0384598V74.8232803c0.3259506-1.3589706,1.1427269-2.0387726,2.4484329-2.0387726
+                           c1.3805351,0,2.2087288,0.7175369,2.4852142,2.1522903V86.4887009z" />
+                        <path class="logost11" d="M72.098877,87.6992874c0,1.2559204-0.6087799,2.4858475-1.8263397,3.69104
+                           c-1.2188263,1.2051926-2.4547806,1.8076324-3.7097473,1.8076324h-2.7496567
+                           c-1.3558044-0.3519516-2.0343399-1.1798248-2.0343399-2.4855347c0-1.2552872,0.6734619-2.0717468,2.0203896-2.4481125h2.2816505
+                           c0.7222977-0.2260742,1.0843887-0.6902695,1.0843887-1.3935394c0-0.7279968-0.3633652-1.2051926-1.088829-1.4312668h-4.2411613
+                           c-1.2511673,0-2.4839478-0.6103592-3.6970673-1.8320389c-1.2131195-1.2210541-1.8199959-2.4617538-1.8199959-3.7208481v-1.6243668
+                           c0-1.2841415,0.6214638-2.531189,1.8643875-3.7398682c1.2422905-1.2086868,2.5042381-1.8130264,3.7852135-1.8130264h2.5987282
+                           c1.4052658,0.2742691,2.109169,1.1091232,2.109169,2.5045547c0,1.2711487-0.6607819,2.0809479-1.982338,2.4294128h-2.3564873
+                           c-0.7235603,0.2064133-1.085022,0.683609-1.085022,1.430954c0,0.72229,0.3627319,1.1994858,1.088829,1.4312592H66.58181
+                           c1.2505341,0,2.4833145,0.6091003,3.696434,1.8266602c1.2131195,1.2181931,1.8206329,2.4544601,1.8206329,3.7097473V87.6992874z" />
+                        <path class="logost11" d="M93.2653732,81.5642471c0,1.7407303-0.7432175,3.3555832-2.2296524,4.8439178
+                           c-1.4864349,1.4886551-3.0997009,2.2325134-4.8385239,2.2325134h-1.7007828c-0.5035095,0-1.1966324-0.1880264-2.0787277-0.5647125
+                           v9.2651825c-0.2764893,1.4309464-1.1046829,2.1465836-2.4852142,2.1465836c-1.3057022,0-2.1224823-0.6791687-2.4484329-2.0365601
+                           V74.7836456c0-0.175972,0.0875092-0.4147263,0.2638016-0.7165833c0.5517044-0.9052429,1.2809753-1.3577042,2.1846313-1.3577042
+                           c0.6525345,0,1.2549744,0.2764893,1.8079453,0.8285141c1.1300507-0.5520248,2.0584412-0.8285141,2.786438-0.8285141h1.6957016
+                           c1.7324905,0,3.3387756,0.7444916,4.8207779,2.2325134c1.4813614,1.4889679,2.2220383,3.1031876,2.2220383,4.8439178V81.5642471z
+                            M88.3317261,81.5579071v-1.8038254c0-0.4350281-0.2638016-0.8957291-0.7914124-1.3818054
+                           c-0.5276108-0.4860687-1.0044861-0.7289505-1.4312668-0.7289505h-1.4686813c-0.4274139,0-0.903656,0.2492218-1.4312668,0.748291
+                           c-0.5276108,0.4990768-0.7914124,0.9658051-0.7914124,1.4008255v1.7654648c0,0.3836594,0.2574615,0.8380203,0.7723923,1.3621445
+                           c0.5149231,0.5250702,0.9607315,0.786972,1.3367767,0.786972h1.6957016c0.3766861,0,0.8218536-0.2619019,1.3367767-0.786972
+                           C88.0736313,82.3959274,88.3317261,81.9415665,88.3317261,81.5579071z" />
+                      </g>
+                    </g>
+                  </svg>
+
+
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+        <div class="peer">
+          <div class="mobile-toggle sidebar-toggle">
+            <a href="" class="td-n">
+              <i class="ti-arrow-circle-left"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ### $Sidebar Menu ### -->
+    <ul class="sidebar-menu scrollable pos-r">
+      <li class="nav-item mT-30 active">
+        <a class="sidebar-link" href="/">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-bar-chart text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">Dashboard</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class='sidebar-link' href="#!ads">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-briefcase text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">My Ads</span>
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class='sidebar-link' href="#!profile">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-user-circle-o text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">Profile</span>
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class='sidebar-link' href="#!users">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-users text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">Users</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class='sidebar-link' href="#!companies">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-building text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">Companies</span>
+        </a>
+      </li>
+      <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>
+          </span>
+          <span class="title text-white font-weight-bold">Referees</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class='sidebar-link' href="#!reports">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-calendar-check-o text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">Reports</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class='sidebar-link' href="#">
+          <span class="icon-holder">
+            <i class="c-white-500 fa fa-history text-white"></i>
+          </span>
+          <span class="title text-white font-weight-bold">History</span>
+        </a>
+      </li>
+
+      <div class="mx-auto" style="width: 40px;">
+        <br>
+        <input type="checkbox" class="switch">
+
+      </div>
+
+    </ul>
+
+
+
+
+
+  </div>
+</div>
diff --git a/src/assets/scripts/nwSidebar/sidebar.controller.js b/src/assets/scripts/nwSidebar/sidebar.controller.js
new file mode 100644
index 0000000..59429ee
--- /dev/null
+++ b/src/assets/scripts/nwSidebar/sidebar.controller.js
@@ -0,0 +1,10 @@
+/** @ngInject */
+const SidebarController = ($scope, UserService) => {
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
+    });
+
+    UserService.loadUser();
+}
+
+export default SidebarController;
\ No newline at end of file
diff --git a/src/assets/scripts/nwTopbar/index.js b/src/assets/scripts/nwTopbar/index.js
new file mode 100644
index 0000000..0c79693
--- /dev/null
+++ b/src/assets/scripts/nwTopbar/index.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+import TopbarController from './topbar.controller';
+
+angular.module('NomitWisp-Topbar', [])
+    .controller(TopbarController.name, TopbarController)
+    .directive('nwTopbar', nwTopbar);
+
+/** @ngInject */
+function nwTopbar(){
+    return {
+        restrict: 'E',
+        controller: 'TopbarController',
+        templateUrl: 'assets/scripts/nwTopbar/nwTopbar.html'
+    };
+}
\ No newline at end of file
diff --git a/src/assets/scripts/nwTopbar/nwTopbar.html b/src/assets/scripts/nwTopbar/nwTopbar.html
new file mode 100644
index 0000000..f2913a1
--- /dev/null
+++ b/src/assets/scripts/nwTopbar/nwTopbar.html
@@ -0,0 +1,265 @@
+<!-- ### $Topbar ### -->
+<div class="header navbar topbar">
+  <div class="header-container">
+    <!-- #LEFT ============================ -->
+    <ul class="nav-left">
+      <li>
+        <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
+          <i class="ti-menu"></i>
+        </a>
+      </li>
+      <li class="search-box visible-nomit visible-referee" ng-show="'{{user.role}}'=='nomit' || '{{user.role}}' == 'referee'">
+        <a class="search-toggle no-pdd-right" href="javascript:void(0);">
+          <i class="search-icon ti-search pdd-right-10"></i>
+          <i class="search-icon-close ti-close pdd-right-10"></i>
+        </a>
+      </li>
+      <li class="search-input visible-referee visible-nomit" ng-show="'{{user.role}}'=='nomit' || '{{user.role}}' == 'referee'">
+        <input class="form-control" type="text" placeholder="Search users, companies, or anything..">
+      </li>
+      <li class="visible-nomit ml-2" ng-show="'{{user.role}}'=='nomit'">
+        <button type="button" class="btn btn-gradient ">
+          <i class="fa fa-plus pdd-right-5 text-white"></i>
+          ADD NEW USER
+        </button>
+      </li>
+      <li class="visible-referee visible-nomit visible-company ml-2" ng-show="'{{user.role}}'=='nomit' || '{{user.role}}' == 'referee' || '{{user.role}}' == 'company'">
+        <button type="button" class="btn btn-gradient">
+          <i class="fa fa-plus pdd-right-5 text-white"></i>
+          CREATE NEW AD
+        </button>
+      </li>
+    </ul>
+    <ul class="nav-right">
+      <!-- #RIGHT ============================ -->
+
+      <!-- #account ============================ -->
+
+      <li class="dropdown">
+        <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+          <div class="peer">
+            <span class="fsz-sm c-grey-900  visible-nomit" ng-show="'{{user.role}}'=='nomit'">Nomit Admin</span>
+            <span class="fsz-sm c-grey-900  visible-referee" ng-show="'{{user.role}}'=='referee'">Referee Admin</span>
+            <span class="fsz-sm c-grey-900  visible-user visible-company" ng-show="'{{user.role}}'=='user' || '{{user.role}}' == 'company'">Username</span>
+          </div>
+          <div class="peer mR-10 visible-nomit" ng-show="'{{user.role}}'=='nomit'">
+            <img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/nomit-logo.png" alt="">
+          </div>
+          <div class="peer mR-10 visible-referee visible-user visible-company" ng-show="'{{user.role}}'!='nomit'">
+            <img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/user-update.png" alt="">
+          </div>
+
+        </a>
+        <ul class="dropdown-menu fsz-sm">
+          <li>
+            <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+              <i class="ti-user mR-10"></i>
+              <span>Profile</span>
+            </a>
+          </li>
+          <li role="separator" class="divider"></li>
+          <li ng-controller="LogoutController">
+            <a href="#" ng-click="userLogout()" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+              <i class="ti-power-off mR-10"></i>
+              <span>Logout</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <!-- #vertical line ============================ -->
+        <div class="verticalLine"> </div>
+      </li>
+      <li>
+        <!-- #logo wisp ============================ -->
+        <div class="peer logo-top-bar">
+          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px" y="0px" viewBox="0 0 138.8360748 39.8824463" style="enable-background:new 0 0 138.8360748 39.8824463;"
+            xml:space="preserve">
+            <style type="text/css">
+              .st0 {
+                fill: url(#SVGID_1_);
+              }
+
+              .st1 {
+                fill: url(#SVGID_2_);
+              }
+
+              .st2 {
+                fill: url(#SVGID_3_);
+              }
+
+              .st3 {
+                fill: url(#SVGID_4_);
+              }
+
+              .st4 {
+                fill: url(#SVGID_5_);
+              }
+
+              .st5 {
+                fill: url(#SVGID_6_);
+              }
+
+              .st6 {
+                fill: url(#SVGID_7_);
+              }
+
+              .st7 {
+                fill: url(#SVGID_8_);
+              }
+
+              .st8 {
+                fill: url(#SVGID_9_);
+              }
+
+              .st9 {
+                fill: url(#SVGID_10_);
+              }
+
+              .st10 {
+                fill: url(#SVGID_11_);
+              }
+
+              .st11 {
+                fill: #FFFFFF;
+              }
+
+              .st12 {
+                fill: url(#SVGID_12_);
+              }
+
+              .st13 {
+                fill: url(#SVGID_13_);
+              }
+
+              .st14 {
+                fill: url(#SVGID_14_);
+              }
+
+              .st15 {
+                fill: url(#SVGID_15_);
+              }
+
+              .st16 {
+                fill: url(#SVGID_16_);
+              }
+
+              .st17 {
+                fill: url(#SVGID_17_);
+              }
+
+              .st18 {
+                fill: url(#SVGID_18_);
+              }
+
+              .st19 {
+                fill: url(#SVGID_19_);
+              }
+
+            </style>
+            <g>
+              <g>
+                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.806386" y1="30.5149899" x2="13.806386"
+                  y2="0.0000301">
+                  <stop offset="0" style="stop-color:#8B00B1" />
+                  <stop offset="0" style="stop-color:#EE38A4" />
+                  <stop offset="0.0866544" style="stop-color:#C832A9" />
+                  <stop offset="0.1996946" style="stop-color:#9D2AAF" />
+                  <stop offset="0.3094908" style="stop-color:#7C24B3" />
+                  <stop offset="0.4136127" style="stop-color:#6420B6" />
+                  <stop offset="0.5097673" style="stop-color:#551EB8" />
+                  <stop offset="0.5903056" style="stop-color:#501DB9" />
+                  <stop offset="0.6045721" style="stop-color:#501DB9" />
+                  <stop offset="0.7748037" style="stop-color:#501DB9" />
+                  <stop offset="0.8825542" style="stop-color:#7311B4" />
+                  <stop offset="1" style="stop-color:#9506B0" />
+                  <stop offset="1" style="stop-color:#9103B0" />
+                </linearGradient>
+                <path class="st0" d="M18.4649811,27.823019l-0.0005131,0.0005131c0.0724716-0.0724716,0.1342678-0.1448421,0.204174-0.2173138
+			l-3.4111109-3.4110069l-0.558629-0.55863L6.319869,15.2575493l2.234416-2.234416l6.7032461-6.7032471l2.234416,2.234416
+			l5.6520958,5.6520948l3.0811882-3.0812902l-3.0811882,3.0812902l0,0l4.2584972-4.2586002L27.612772,9.737566l-7.8864098-7.8864594
+			c-2.468153-2.4681017-6.4696112-2.4681017-8.9376621,0l-8.9376621,8.9376106c-2.4680505,2.468051-2.4680505,6.4695606,0,8.9376621
+			l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z" />
+                <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3865204" y1="27.2705288" x2="37.6677437"
+                  y2="6.9730129">
+                  <stop offset="0" style="stop-color:#8B00B1" />
+                  <stop offset="0" style="stop-color:#EE38A4" />
+                  <stop offset="0.5092942" style="stop-color:#9103B0" />
+                  <stop offset="1" style="stop-color:#501DB9" />
+                  <stop offset="1" style="stop-color:#9506B0" />
+                </linearGradient>
+                <path class="st1" d="M55.4768066,10.7887173l-8.9376602-8.9376106l-4.4687309,4.4687796l6.7032471,6.7032471l2.234314,2.234416
+			l-6.7031441,6.7032471l-2.234417,2.2344151l-7.7302742-7.7302761l-0.2102318,0.2102318l-4.2584972,4.2586002l7.7301731,7.7301731
+			v0.0000515c2.4680519,2.4679985,6.4696121,2.4679985,8.937561,0l8.9376602-8.9376125
+			C57.9449615,17.2582779,57.9449615,13.2567682,55.4768066,10.7887173z" />
+                <g>
+                  <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="10.7887001" y1="15.2575035" x2="46.5391464"
+                    y2="15.2575035">
+                    <stop offset="0" style="stop-color:#8B00B1" />
+                    <stop offset="0" style="stop-color:#EE38A4" />
+                    <stop offset="0.1175187" style="stop-color:#D634A7" />
+                    <stop offset="0.4183493" style="stop-color:#9D2AAF" />
+                    <stop offset="0.6763742" style="stop-color:#7323B4" />
+                    <stop offset="0.8785662" style="stop-color:#591FB8" />
+                    <stop offset="1" style="stop-color:#501DB9" />
+                  </linearGradient>
+                  <path class="st2" d="M37.6015854,1.8511064l-8.9376621,8.9376106l-4.468729,4.468832l-0.55863,0.558629l-8.3790331,8.3790331
+				l-4.4688311,4.468832c2.467948,2.4677925,6.4688931,2.4678955,8.937149,0.0004101l0.0005131-0.0005131l13.4063931-13.4063911
+				l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z" />
+                  <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.1951942" y1="13.6117887" x2="27.4866123"
+                    y2="13.6117887">
+                    <stop offset="0" style="stop-color:#8B00B1" />
+                    <stop offset="0" style="stop-color:#EE38A4" />
+                    <stop offset="0.1175187" style="stop-color:#D634A7" />
+                    <stop offset="0.4183493" style="stop-color:#9D2AAF" />
+                    <stop offset="0.6763742" style="stop-color:#7323B4" />
+                    <stop offset="0.8785662" style="stop-color:#591FB8" />
+                    <stop offset="1" style="stop-color:#501DB9" />
+                  </linearGradient>
+                  <polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282" />
+                </g>
+              </g>
+              <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.3990173" y1="-7.8904157" x2="122.914917"
+                y2="37.6254807">
+                <stop offset="0" style="stop-color:#8B00B1" />
+                <stop offset="0" style="stop-color:#EE38A4" />
+                <stop offset="0.0727272" style="stop-color:#D634A7" />
+                <stop offset="0.2166433" style="stop-color:#AD2DAD" />
+                <stop offset="0.3643613" style="stop-color:#8C27B1" />
+                <stop offset="0.5144968" style="stop-color:#7123B5" />
+                <stop offset="0.6680248" style="stop-color:#5F20B7" />
+                <stop offset="0.8269761" style="stop-color:#541EB9" />
+                <stop offset="1" style="stop-color:#501DB9" />
+              </linearGradient>
+              <path class="st4" d="M73.7269974,4.3174438v5.8997192v11.3051758v5.3615112
+		c-0.4117432,2.0700073-1.6452637,3.1047974-3.7012939,3.1047974c-1.9445801,0-3.1610107-0.9794312-3.6466064-2.94104v-5.3562012
+		V10.0534058V4.1483765c0.4855957-2.0239868,1.7020264-3.036438,3.6466064-3.036438
+		C72.0817337,1.1119385,73.3152542,2.180603,73.7269974,4.3174438z M106.2809982,19.8569603
+		c0-1.8695717-0.9047928-3.7108078-2.7115402-5.5251274c-1.8067474-1.8133755-3.6427689-2.7205353-5.5052414-2.7205353h-6.3165283
+		c-1.0814056-0.3452024-1.6216354-1.055913-1.6216354-2.1316605c0-1.1130533,0.5383453-1.8237638,1.6159668-2.1311879h3.5096054
+		c1.9682465-0.5189838,2.9523697-1.7250671,2.9523697-3.6182499c0-2.0782979-1.0483475-3.3216877-3.1412582-3.7301693h-3.8703918
+		c-1.9077988,0-3.7872696,0.9000763-5.6374664,2.7002289c-1.8511353,1.8001525-2.7767029,3.6574452-2.7767029,5.5699892v2.4192505
+		c0,1.8752375,0.9038467,3.7230854,2.7105942,5.5416546c1.8067474,1.8195152,3.6427689,2.7285633,5.5061874,2.7285633h6.3165283
+		c1.0804596,0.3367023,1.6216354,1.0474129,1.6216354,2.1316605c0,1.0474129-0.5392838,1.7387619-1.6150208,2.0754642h-3.3981628
+		c-2.0060272,0.5605412-3.0090408,1.7765408-3.0090408,3.6461124c0,1.9446564,1.0105743,3.1776562,3.0298233,3.7018356h4.0951614
+		c1.8690872,0,3.7098312-0.8972435,5.5250778-2.6922016c1.8133621-1.7949581,2.7200394-3.6267509,2.7200394-5.4972649V19.8569603z
+		 M138.8360748,10.5393066v2.6487427c0,2.5925903-1.1069336,4.9976807-3.3208008,7.2142944
+		c-2.2138672,2.2171631-4.6164551,3.3250122-7.2062988,3.3250122h-2.5329514c-0.7498779,0-1.7822266-0.2800293-3.0959473-0.8410645
+		v13.7991333c-0.4117432,2.1312256-1.6452637,3.1970215-3.7012939,3.1970215c-1.9447021,0-3.1610107-1.0115356-3.6466064-3.0331421
+		V3.0893555c0-0.262085,0.1303711-0.6176758,0.3929443-1.0672607C116.5467758,0.6738892,117.6329575,0,118.9787827,0
+		c0.9718018,0,1.8690186,0.4118042,2.692627,1.2339478C123.354393,0.4118042,124.7372055,0,125.821434,0h2.525383
+		c2.5803223,0,4.9726562,1.1088257,7.1798096,3.3250122C137.7328033,5.5426025,138.8360748,7.9467773,138.8360748,10.5393066z
+		 M131.4881744,10.4920654c0-0.6478882-0.3929443-1.3340454-1.1787109-2.0579834
+		c-0.7858887-0.723938-1.4960938-1.0856323-2.1315918-1.0856323h-2.1874924c-0.6364746,0-1.3458252,0.3711548-2.1315918,1.1144409
+		s-1.1787109,1.4384155-1.1787109,2.0863647v2.6293945c0,0.5713501,0.3835449,1.2481079,1.1503906,2.0286865
+		c0.7668457,0.7820435,1.4309082,1.1720581,1.9909668,1.1720581h2.525383c0.5610352,0,1.2241211-0.3900146,1.9909668-1.1720581
+		c0.7658691-0.7805786,1.1503906-1.4573364,1.1503906-2.0286865V10.4920654z" />
+            </g>
+          </svg>
+
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
diff --git a/src/assets/scripts/nwTopbar/topbar.controller.js b/src/assets/scripts/nwTopbar/topbar.controller.js
new file mode 100644
index 0000000..c1a2ff8
--- /dev/null
+++ b/src/assets/scripts/nwTopbar/topbar.controller.js
@@ -0,0 +1,10 @@
+/** @ngInject */
+const TopbarController = ($scope, UserService) => {
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
+    });
+
+    UserService.loadUser();
+}
+
+export default TopbarController;
\ No newline at end of file
diff --git a/src/assets/scripts/profile/index.js b/src/assets/scripts/profile/index.js
new file mode 100644
index 0000000..016bb53
--- /dev/null
+++ b/src/assets/scripts/profile/index.js
@@ -0,0 +1,11 @@
+import angular from 'angular';
+import angularFilter from 'angular-filter';
+import ProfileController from './profile.controller';
+import ProfileService from './profile.service';
+
+angular.module('nwProfile', [angularFilter])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .controller(ProfileController.name, ProfileController)
+    .factory(ProfileService.name, ProfileService);
\ No newline at end of file
diff --git a/src/assets/scripts/profile/profile.controller.js b/src/assets/scripts/profile/profile.controller.js
new file mode 100644
index 0000000..fc4c701
--- /dev/null
+++ b/src/assets/scripts/profile/profile.controller.js
@@ -0,0 +1,17 @@
+import visas from './visa.type';
+/** @ngInject */
+const ProfileController = ($scope, ProfileService, UserService) => {
+    $scope.$on('loadUserSuccess', function (event, user) {
+        $scope.user = user;
+    });
+    UserService.loadUser();
+    
+    ProfileService.fetchProfileService($scope.user.id)
+      .then((result) => { $scope.profile = result; })
+      .catch((error) => { console.log(error); })
+
+    $scope.visas = visas;
+    UserService.loadUser();
+}
+
+export default ProfileController;
diff --git a/src/assets/scripts/profile/profile.html b/src/assets/scripts/profile/profile.html
new file mode 100644
index 0000000..64061ec
--- /dev/null
+++ b/src/assets/scripts/profile/profile.html
@@ -0,0 +1,542 @@
+<main class='main-content bgc-grey-300'>
+  <div id='mainContent row'>
+    <div class="content-title mT-60">
+      <div class="ml-1 mb-3">
+        Profile
+      </div>
+    </div>
+    <div class="ml-1 mb-3 text-black-bold">
+      Sign up with WISP now to get yourself connected.
+    </div>
+    <div class="ml-1 mb-3 text-size-11">
+      Please, tell us more about your information so we could find the perfect oportunities for you.
+    </div>
+
+    <div class=" gap-30 masonry pos-r">
+      <!-- #content container ===== -->
+      <div class="masonry-sizer col-md-6"></div>
+
+
+      <!-- #user profile ========= -->
+      <div class="masonry-item  w-100 visible-user" ng-show="profile.role =='user'">
+
+        <div class="card item-box">
+          <div class="user-data-title">
+            <img class="user-update-img" src="assets/static/images/user-update.png" alt="">
+            <div class="testo">
+              <h5>{{ profile.fullname }}</h5> Bla Bla, this is your bio or whatever!
+            </div>
+          </div>
+          <div class="card-body-profile">
+            <div class="profile-forms">
+              <h5 class="card-title d-flex text-black-bold"> Your Profile</h5>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">First Name</h9>
+                  <input type="text" class="form-control" placeholder="{{ profile.fullname }}" value="Francesca" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Middle Name</h9>
+                  <input type="text" class="form-control" placeholder="{{ profile.fullname }}" value="" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Last Name</h9>
+                  <input type="text" class="form-control" placeholder="{{ profile.fullname }}" value="Sperati" required>
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Email Address</h9>
+                  <input type="text" class="form-control" placeholder="Email" value="{{ profile.email }}" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Phone Number</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="{{ profile.fullname }}" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">State</h9>
+                  <select id="inputState" class="form-control">
+                    <option selected>VIC</option>
+                    <option>SA</option>
+                    <option>WA</option>
+                    <option>NSW</option>
+                    <option>QLD</option>
+                    <option>TAS</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Nationality</h9>
+                  <select id="inputNationality" class="form-control">
+                    <option selected>Italian</option>
+                    <option>...</option>
+                  </select>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Visa Type</h9>
+                  <select id="inputVisa" class="form-control" ng-model="user.role" ng-options="visa.name group by visa.type for visa in visas">
+                    <option value="" selected>Choose visa...</option>
+                  </select>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Language (Select one or more)</h9>
+                  <select id="inputLanguage" class="form-control">
+                    <option selected>English</option>
+                    <option>...</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Expertiece / Fields (Select one or more)</h9>
+                  <input type="text" class="form-control" placeholder="Preofessions" value="" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Expertiece / Fields (Select one or more)</h9>
+                  <select class="form-control">
+                    <option selected>Project Management</option>
+                    <option>...</option>
+                  </select>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Education</h9>
+                  <select class="form-control">
+                    <option selected>Diploma</option>
+                    <option>Degree</option>
+                    <option>...</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-6 profile-form-row">
+                  <button type="button" class="btn btn-gradient ">UPDATE</button>
+                  <button type="button" class="btn btn-cancel ">CANCEL</button>
+                </div>
+                <div class="col-6 profile-form-row">
+
+                  <form action="upload.asp" method="post" enctype="multipart/form-data">
+                    <h9 class="cv">Curriculum </h9>
+                    <input class="cv" type="file" name="file1" multiple>
+                    <input type="submit" class="btn btn-cv" value="Upload">
+                  </form>
+                </div>
+
+              </div>
+
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="masonry-item  w-100 visible-user" ng-show="profile.role =='user'">
+        <div class="card item-box">
+
+          <div class="card-body-profile">
+            <div class="profile-forms">
+              <h5 class="card-title d-flex text-black-bold">Help NOMIT collecting more data: your information
+                won't be visible!!</h5>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Birthdate</h9>
+                  <div class="timepicker-input input-icon form-group">
+                    <div class="input-group">
+                      <div class="input-group-addon bgc-white bd bdwR-0">
+                        <i class="ti-calendar"></i>
+                      </div>
+                      <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Date of Birth"
+                        data-provide="datepicker">
+                    </div>
+                  </div>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Gender</h9>
+                  <select id="inputGender" class="form-control">
+                    <option selected>Male</option>
+                    <option>Female</option>
+                  </select>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">City of Birth</h9>
+                  <input type="text" class="form-control" id="inputCity">
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Arriving in Australia</h9>
+                  <div class="timepicker-input input-icon form-group">
+                    <div class="input-group">
+                      <div class="input-group-addon bgc-white bd bdwR-0">
+                        <i class="ti-calendar"></i>
+                      </div>
+                      <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Date of Arrive"
+                        data-provide="datepicker">
+
+                    </div>
+                  </div>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Reason for leaving</h9>
+                  <textarea id="leaving" name="story" rows="5">Tell us something about your old life...</textarea>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Reason for staying in Australia</h9>
+                  <textarea id="staying" name="story" rows="5">Tell us something about your new life...</textarea>
+                </div>
+              </div>
+
+
+              <button type="button" class="btn btn-gradient ">UPDATE</button>
+              <button type="button" class="btn btn-cancel ">CANCEL</button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- #company profile ========= -->
+      <div class="masonry-item  w-100 visible-company" ng-show="profile.role == 'company'">
+        <div class="card item-box">
+          <div class="user-data-title">
+            <img class="user-update-img" src="assets/static/images/user-update.png" alt="">
+            <div class="testo">
+              <h5>Leonardo</h5> A global high-tech company and one of the key players in Aerospace, Defence and
+              Security
+            </div>
+          </div>
+          <div class="card-body-profile">
+            <div class="profile-forms">
+              <h5 class="card-title d-flex text-black-bold"> Your Profile</h5>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Name</h9>
+                  <input type="text" class="form-control" placeholder="Leonardo" value="" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Business Type</h9>
+                  <input type="text" class="form-control" placeholder="Technological Innovation" value=""
+                    required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">ABN</h9>
+                  <input type="text" class="form-control" placeholder="Last name" value="66 942 977 659" required>
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Email Address</h9>
+                  <input type="text" class="form-control" placeholder="Email" value="ir@leonardocompany" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Phone Number</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="+39 06.324731" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Website</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="https://www.leonardocompany.com"
+                    required>
+                </div>
+              </div>
+
+
+              <div class="row">
+                <div class="form-group col-md-4 profile-form-row">
+                  <h9 class="">Address</h9>
+                  <input type="text" class="form-control" id="inputAddress" placeholder="Piazza Monte Grappa, 4"
+                    required>
+                </div>
+                <div class="form-group col-md-4 profile-form-row">
+                  <h9 class="">City</h9>
+                  <input type="text" class="form-control" id="inputCity0" placeholder="Roma" required>
+                </div>
+                <div class="form-group col-md-2 profile-form-row">
+                  <h9 class="">State</h9>
+                  <input type="text" class="form-control" id="validationCustom04" placeholder="Italia" required>
+                </div>
+                <div class="form-group col-md-2 profile-form-row">
+                  <h9 class="">Zip</h9>
+                  <input type="text" class="form-control" id="inputZip" placeholder="00195" required>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-12 profile-form-row">
+                  <h9 class="">Description</h9>
+                  <textarea id="description" class="company-description" name="story" rows="5">We constantly explore new ideas to turn them into new technologies that improve our world and design the future one. We invest in research and development to provide sustainable and competitive solutions. Wherever defence and security are needed:  land, sea, sky, Space and cyberspace.
+                        </textarea>
+                </div>
+              </div>
+              <div class="row ">
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Twitter</h9>
+                  <input type="text" class="form-control" placeholder="Facebook" value="https://twitter.com/leonardo_it">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Facebook</h9>
+                  <input type="text" class="form-control" placeholder="Facebook" value="https://www.facebook.com/Leonardo-Company-473417172849580/">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Instagram</h9>
+                  <input type="text" class="form-control" placeholder="Instagram" value="https://www.instagram.com/leonardo_company/?hl=it">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Linkedin</h9>
+                  <input type="text" class="form-control" placeholder="Linkedin" value="https://www.linkedin.com/company/drs-defense-solutions-llc/life/">
+                </div>
+              </div>
+
+              <button type="button" class="btn btn-gradient ">UPDATE</button>
+              <button type="button" class="btn btn-cancel ">CANCEL</button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- #nomit profile ========= -->
+      <div class="masonry-item w-100 visible-nomit" ng-show="'{{profile.role}}' =='nomit'">
+        <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>Nomit</h5> The Italian Network of Melbourne
+            </div>
+          </div>
+          <div class="card-body-profile">
+            <div class="profile-forms">
+              <h5 class="card-title d-flex text-black-bold"> Your Profile</h5>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Name</h9>
+                  <input type="text" class="form-control" placeholder="Nomit" value="" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Business Type</h9>
+                  <input type="text" class="form-control" placeholder="Australian non-profit Association" value=""
+                    required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">ABN</h9>
+                  <input type="text" class="form-control" placeholder="Last name" value="92 106 088 918" required>
+                </div>
+              </div>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Email Address</h9>
+                  <input type="text" class="form-control" placeholder="Email" value="info@nomit.com.au" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Phone Number</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="0481 983 702 " required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Website</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="https://www.leonardocompany.com"
+                    required>
+                </div>
+              </div>
+
+
+              <div class="row">
+                <div class="form-group col-md-4 profile-form-row">
+                  <h9 class="">Address</h9>
+                  <input type="text" class="form-control" id="inputAddress2" placeholder="1/509 St Kilda Rd" required>
+                </div>
+                <div class="form-group col-md-4 profile-form-row">
+                  <h9 class="">City</h9>
+                  <input type="text" class="form-control" id="inputCity2" placeholder="Melbourne" required>
+                </div>
+                <div class="form-group col-md-2 profile-form-row">
+                  <h9 class="">State</h9>
+                  <input type="text" class="form-control" id="validationCustom05" placeholder="VIC" required>
+                </div>
+                <div class="form-group col-md-2 profile-form-row">
+                  <h9 class="">Zip</h9>
+                  <input type="text" class="form-control" id="inputZip2" placeholder="3004" required>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-12 profile-form-row">
+                  <h9 class="">Description</h9>
+                  <textarea id="description" class="company-description" name="story" rows="5">Nomit is an Australian non-profit organisation supported, amongst others, by the Italian Consulate in Melbourne and the Victorian Multicultural Commission.</textarea>
+                </div>
+              </div>
+              <div class="row ">
+
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Twitter</h9>
+                  <input type="text" class="form-control" placeholder="Facebook" value="https://twitter.com/nomitnetwork">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Facebook</h9>
+                  <input type="text" class="form-control" placeholder="Facebook" value="https://www.facebook.com/nomitnetwork">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Instagram</h9>
+                  <input type="text" class="form-control" placeholder="Instagram" value="">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Linkedin</h9>
+                  <input type="text" class="form-control" placeholder="Linkedin" value="https://www.linkedin.com/company/nomit/about/">
+                </div>
+              </div>
+              <button type="button" class="btn btn-gradient ">UPDATE</button>
+              <button type="button" class="btn btn-cancel ">CANCEL</button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- #referee profile ========= -->
+      <div class="masonry-item w-100 visible-nomit" ng-show="'{{profile.role}}' =='nomit'">
+        <div class="card item-box">
+          <div class="user-data-title">
+            <img class="user-update-img" src="assets/static/images/user-update.png" alt="">
+            <div class="testo">
+              <h5>Jobwatch</h5> EMPLOYMENT RIGHTS LEGAL CENTRE
+            </div>
+          </div>
+          <div class="card-body-profile">
+            <div class="profile-forms">
+              <h5 class="card-title d-flex text-black-bold"> Your Profile</h5>
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Name</h9>
+                  <input type="text" class="form-control" placeholder="Jobwatch" value="" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Business Type</h9>
+                  <input type="text" class="form-control" placeholder="Employment rights legal centre" value=""
+                    required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">ABN</h9>
+                  <input type="text" class="form-control" placeholder="Last name" value="92 106 088 918" required>
+                </div>
+              </div>
+
+
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Email Address</h9>
+                  <input type="text" class="form-control" placeholder="Email" value="info@test.com.au" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Phone Number</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="9662 1933 " required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Website</h9>
+                  <input type="text" class="form-control" placeholder="Phone" value="http://jobwatch.org.au/"
+                    required>
+                </div>
+              </div>
+
+
+              <div class="row">
+                <div class="form-group col-md-4 profile-form-row">
+                  <h9 class="">Address</h9>
+                  <input type="text" class="form-control" id="inputAddress3" placeholder="1/509 St Kilda Rd" required>
+                </div>
+                <div class="form-group col-md-4 profile-form-row">
+                  <h9 class="">City</h9>
+                  <input type="text" class="form-control" id="inputCity3" placeholder="Melbourne" required>
+                </div>
+                <div class="form-group col-md-2 profile-form-row">
+                  <h9 class="">State</h9>
+                  <input type="text" class="form-control" id="validationCustom06" placeholder="VIC" required>
+                </div>
+                <div class="form-group col-md-2 profile-form-row">
+                  <h9 class="">Zip</h9>
+                  <input type="text" class="form-control" id="inputZip3" placeholder="3004" required>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-12 profile-form-row">
+                  <h9 class="">Description</h9>
+                  <textarea id="description" class="company-description" name="story" rows="5">Nomit is an Australian non-profit organisation supported, amongst others, by the Italian Consulate in Melbourne and the Victorian Multicultural Commission.</textarea>
+                </div>
+              </div>
+              <div class="row ">
+
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Twitter</h9>
+                  <input type="text" class="form-control" placeholder="Facebook" value="https://twitter.com/nomitnetwork">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Facebook</h9>
+                  <input type="text" class="form-control" placeholder="Facebook" value="https://www.facebook.com/nomitnetwork">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Instagram</h9>
+                  <input type="text" class="form-control" placeholder="Instagram" value="">
+                </div>
+                <div class="col-3 profile-form-row">
+                  <h9 class="">Linkedin</h9>
+                  <input type="text" class="form-control" placeholder="Linkedin" value="https://www.linkedin.com/company/nomit/about/">
+                </div>
+              </div>
+              <button type="button" class="btn btn-gradient ">UPDATE</button>
+
+              <button type="button" class="btn btn-cancel ">CANCEL</button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- #change password ========= -->
+      <div class="masonry-item  w-100">
+
+        <div class="card item-box">
+
+          <div class="card-body-profile">
+            <div class="profile-forms">
+              <h5 class="card-title d-flex text-black-bold"> Change Password</h5>
+              <div class="row ">
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Current Password</h9>
+                  <input type="password" class="form-control" placeholder="Password" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">New Password</h9>
+                  <input type="password" class="form-control" placeholder="New Password" required>
+                </div>
+                <div class="col-4 profile-form-row">
+                  <h9 class="">Confirm New urrent Password</h9>
+                  <input type="password" class="form-control" placeholder="New Password" required>
+
+                </div>
+              </div>
+
+              <button type="button" class="btn btn-gradient ">UPDATE</button>
+              <button type="button" class="btn btn-cancel ">CANCEL</button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+    <!--content container-->
+  </div>
+  <!--page container-->
+
+</main>
diff --git a/src/assets/scripts/profile/profile.service.js b/src/assets/scripts/profile/profile.service.js
new file mode 100644
index 0000000..a12057d
--- /dev/null
+++ b/src/assets/scripts/profile/profile.service.js
@@ -0,0 +1,13 @@
+/** @ngInject */
+const ProfileService = ($http) => {
+    let serv = {};
+
+    serv.fetchProfileService = (id) =>{
+        return $http.get('https://nomitwisp-restapi.herokuapp.com/api/user/'+id, { withCredentials: true })
+        .then( (result) => { return result.data; })
+        .catch( (error) => { return error; });
+    }
+    return serv;
+}
+
+export default ProfileService;
\ No newline at end of file
diff --git a/src/assets/scripts/profile/visa.type.js b/src/assets/scripts/profile/visa.type.js
new file mode 100644
index 0000000..d8225ea
--- /dev/null
+++ b/src/assets/scripts/profile/visa.type.js
@@ -0,0 +1,317 @@
+const visas = [
+    {
+        id: 0,
+        type: "Visitor visa",
+        subclass: "601",
+        name: "Electronic Travel Authority (subclass 601)"
+    },
+    {
+        id: 1,
+        type: "Visitor visa",
+        subclass: "651",
+        name: "eVisitor (subclass 651)"
+    },
+    {
+        id: 2,
+        type: "Visitor visa",
+        subclass: "771",
+        name: "Transit visa (subclass 771)"
+    },
+    {
+        id: 3,
+        type: "Visitor visa",
+        subclass: "600",
+        name: "Visitor (subclass 600)"
+    },
+    {
+        id: 4,
+        type: "Visitor visa",
+        subclass: "417-462",
+        name: "Work and Holiday visa (subclass 417 462)"
+    },
+    {
+        id: 5,
+        type: "Studying and training visas",
+        subclass: "500",
+        name: "Student visa (subclass 500)"
+    },
+    {
+        id: 6,
+        type: "Studying and training visas",
+        subclass: "590",
+        name: "Student Guardian visa (subclass 590)"
+    },
+    {
+        id: 7,
+        type: "Studying and training visas",
+        subclass: "407",
+        name: "Training visa (subclass 407)"
+    },
+    {
+        id: 8,
+        type: "Family and partner visas",
+        subclass: "102",
+        name: "Adoption visa (subclass 102)"
+    },
+    {
+        id: 9,
+        type: "Family and partner visas",
+        subclass: "114-838",
+        name: "Aged Dependent Relative visa (subclass 114 838)"
+    },
+    {
+        id: 10,
+        type: "Family and partner visas",
+        subclass: "804",
+        name: "Aged Parent visa (subclass 804)"
+    },
+    {
+        id: 11,
+        type: "Family and partner visas",
+        subclass: "116-836",
+        name: "Carer visa (subclass 116 836)"
+    },
+    {
+        id: 12,
+        type: "Family and partner visas",
+        subclass: "101-802",
+        name: "Child visa (subclass 101 802)"
+    },
+    {
+        id: 12,
+        type: "Family and partner visas",
+        subclass: "864-884",
+        name: "Contributory Aged Parent visa (subclass 864 884)"
+    },
+    {
+        id: 13,
+        type: "Family and partner visas",
+        subclass: "143-173",
+        name: "Contributory Parent visa (subclass 143 173)"
+    },
+    {
+        id: 14,
+        type: "Family and partner visas",
+        subclass: "445",
+        name: "Dependent Child visa (subclass 445)"
+    },
+    {
+        id: 15,
+        type: "Family and partner visas",
+        subclass: "461",
+        name: "New Zealand Citizen Family Relationship (temporary) visa (subclass 461)"
+    },
+    {
+        id: 16,
+        type: "Family and partner visas",
+        subclass: "117-837",
+        name: "Orphan Relative (subclass 117 837)"
+    },
+    {
+        id: 17,
+        type: "Family and partner visas",
+        subclass: "103",
+        name: "Parent visa (subclass 103)"
+    },
+    {
+        id: 18,
+        type: "Family and partner visas",
+        subclass: "100-309",
+        name: "Partner (Provisional and Migrant) visa (subclass 309 100)"
+    },
+    {
+        id: 19,
+        type: "Family and partner visas",
+        subclass: "801-820",
+        name: "Partner visa (subclass 820 801)"
+    },
+    {
+        id: 20,
+        type: "Family and partner visas",
+        subclass: "300",
+        name: "Prospective Marriage visa (subclass 300)"
+    },
+    {
+        id: 21,
+        type: "Family and partner visas",
+        subclass: "115-835",
+        name: "Remaining Relative visa (subclass 115 835)"
+    },
+    {
+        id: 22,
+        type: "Working and skilled visas",
+        subclass: "188-888",
+        name: "Business Innovation and Investment visa (subclass 188 888)"
+    },
+    {
+        id: 23,
+        type: "Working and skilled visas",
+        subclass: "890",
+        name: "Business Owner (subclass 890)"
+    },
+    {
+        id: 24,
+        type: "Working and skilled visas",
+        subclass: "132",
+        name: "Business Talent visa (subclass 132)"
+    },
+    {
+        id: 25,
+        type: "Working and skilled visas",
+        subclass: "124-858",
+        name: "Distinguished Talent visa (subclass 124 858)"
+    },
+    {
+        id: 26,
+        type: "Working and skilled visas",
+        subclass: "186",
+        name: "Employer Nomination Scheme (subclass 186)"
+    },
+    {
+        id: 27,
+        type: "Working and skilled visas",
+        subclass: "891",
+        name: "Investor visa (subclass 891)"
+    },
+    {
+        id: 28,
+        type: "Working and skilled visas",
+        subclass: "187",
+        name: "Regional Sponsor Migration Scheme (subclass 187)"
+    },
+    {
+        id: 29,
+        type: "Working and skilled visas",
+        subclass: "189",
+        name: "Skilled Independent visa (subclass 189)"
+    },
+    {
+        id: 30,
+        type: "Working and skilled visas",
+        subclass: "190",
+        name: "Skilled Nominated visa (subclass 190)"
+    },
+    {
+        id: 30,
+        type: "Working and skilled visas",
+        subclass: "476",
+        name: "Skilled-Recognised Graduate visa (subclass 476)"
+    },
+    {
+        id: 31,
+        type: "Working and skilled visas",
+        subclass: "489-887",
+        name: "Skilled Regional visa (subclass 489 887)"
+    },
+    {
+        id: 32,
+        type: "Working and skilled visas",
+        subclass: "892",
+        name: "State or Territory Sponsored Business Owner visa (subclass 892)"
+    },
+    {
+        id: 33,
+        type: "Working and skilled visas",
+        subclass: "893",
+        name: "State or Territory Sponsored Investor visa (subclass 893)"
+    },
+    {
+        id: 34,
+        type: "Working and skilled visas",
+        subclass: "408",
+        name: "Temporary Activity visa (subclass 408)"
+    },
+    {
+        id: 35,
+        type: "Working and skilled visas",
+        subclass: "485",
+        name: "Temporary Graduate visa (subclass 485)"
+    },
+    {
+        id: 36,
+        type: "Working and skilled visas",
+        subclass: "400-403",
+        name: "Temporary Work visa (subclass 400 403)"
+    },
+    {
+        id: 37,
+        type: "Working and skilled visas",
+        subclass: "482",
+        name: "Temporary Skill Shortage visa (subclass 482)"
+    },
+]
+
+export default visas;
+ /**       
+
+    Refugee and humanitarian visas
+    Global Special Humanitarian (subclass 202) 
+    Protection visa (subclass 866) 
+    Refugee visas (subclass 200, 201, 203 and 204) 
+    Temporary Protection visa (subclass 785) 
+    Safe Haven Enterprise visa (subclass 790) 
+
+    Other visas
+    Bridging visa A – BVA - (subclass 010)
+    Bridging visa B – BVB – (subclass 020)
+    Bridging visa C – BVC – (subclass 030)
+    Bridging visa E – BVE – (subclass 050 and 051)
+    Crew Travel Authority visa (subclass 942)
+    Former Resident visa (subclass 151)
+    Maritime Crew visa (subclass 988)
+    Medical Treatment visa (subclass 602)
+    Resident Return visa (subclass 155 157)
+    Special Category visa (subclass 444)
+    
+    Special Purpose visa 
+    Retirement visa (subclass 410)
+    Investor Retirement visa (subclass 405)
+    Confirmatory (Residence) visa (subclass 808) 
+    
+    Repealed visas
+    Business (Short Stay) visa (subclass 456)
+    Business Skills (Provisional) visa (subclass 160 and 165)
+    Domestic Worker (Temporary) Diplomatic and Consular visa (subclass 426)
+    Domestic Worker (Temporary) Executive visa (subclass 427)
+    Electronic Travel Authority (Business Entrant) visa (subclass 956 and 977)
+    Electronic Travel Authority (Visitor) visa (subclass 976)
+    Employer Nomination Scheme (subclass 121 and 856)
+    Established Business in Australia visa (subclass 845)
+    Exchange visa (subclass 411)
+    Foreign Government Agency (subclass 415)
+    Government Agreement visa (subclass 406)
+    Labour Agreement visa (subclass 120)
+    Labour Agreement visa (subclass 855)
+    Media and Film Staff visa (subclass 423)
+    Medical Practitioner visa (subclass 422)
+    Medical Treatment (Short Stay) visa (subclass 675)
+    Medical Treatment Long Stay visa (subclass 685)
+    Regional Sponsor Migration Scheme (subclass 119 and 857)
+    Religious Worker visa (subclass 428)
+    Skilled Designated Area Sponsored visa (subclass 496)
+    Skilled Independent Regional (Provisional) visa (subclass 495)
+    Skilled Independent visa (subclass 175)
+    Skilled Independent visa (subclass 885)
+    Skilled Regional Sponsored visa (subclass 475)
+    Skilled Regional Sponsored (subclass 487)
+    Skilled Sponsored visa (subclass 176)
+    Special Program visa (subclass 416)
+    Sponsored visa (subclass 886)
+    Sport visa (subclass 421)
+    Superyacht Crew visa (subclass 488)
+    State or Territory Sponsored Regional Established Business in Australia visa (subclass 846)
+    Temporary Work (Entertainment) visa (subclass 420)
+    Temporary Work (Skilled) visa (subclass 457)
+    Tourist visa (subclass 676)
+    Temporary Work (long Stay Activity) visa (subclass 401)
+    Training and Research visa (subclass 402)
+    Visiting Academic visa (subclass 419)
+    Foreign Affairs or Defence sector visa (subclass 576)
+    Higher Education Sector visa (subclass 573)
+    Independent ELICOS Sector visa (subclass 570)
+    Non Award Sector visa (subclass 575)
+    Postgraduate Research Sector visa (subclass 574)
+    School Sector visa (subclass 571)
+    Student Guardian visa (subclass 580)
+    Vocational Education and Training Sector visa (Subclass 572)
+] */
\ No newline at end of file
diff --git a/src/assets/scripts/signup/index.js b/src/assets/scripts/signup/index.js
new file mode 100644
index 0000000..10e3bea
--- /dev/null
+++ b/src/assets/scripts/signup/index.js
@@ -0,0 +1,10 @@
+'use strict';
+
+import * as angular from 'angular';
+import ngCookies from 'angular-cookies';
+import SignupController from './signup.controller';
+import SignupService from './signup.service';
+
+angular.module('nwSignup', [ngCookies])
+    .controller(SignupController.name, SignupController)
+    .factory(SignupService.name, SignupService);
\ No newline at end of file
diff --git a/src/assets/scripts/signup/signup.controller.js b/src/assets/scripts/signup/signup.controller.js
new file mode 100644
index 0000000..652f8d6
--- /dev/null
+++ b/src/assets/scripts/signup/signup.controller.js
@@ -0,0 +1,16 @@
+'use strict';
+
+/** @ngInject */
+const SignupController = ($scope, $cookies, $location, SignupService, UserService) => {
+    $scope.userSignup = async() => {
+    await SignupService.signupUserService($scope.user)
+        .then((result) => {
+            $cookies.put('access_token', result);
+            UserService.loadUser();
+            $location.path('/');
+         })
+        .catch((error) => { console.log(error); })
+    }
+}
+
+export default SignupController;
\ No newline at end of file
diff --git a/src/assets/scripts/signup/signup.html b/src/assets/scripts/signup/signup.html
new file mode 100644
index 0000000..47f90fb
--- /dev/null
+++ b/src/assets/scripts/signup/signup.html
@@ -0,0 +1,41 @@
+<div class="peers ai-s fxw-nw h-100vh">
+  <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("assets/static/images/bg.jpg")'>
+    <div class="pos-a centerXY">
+      <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+        <img class="pos-a centerXY" src="assets/static/images/logo.png" alt="">
+      </div>
+    </div>
+  </div>
+  <div ng-controller="SignupController" class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+    <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
+    <form ng-submit="userSignup()" name="SignupForm">
+      <div class="form-group">
+        <label class="text-normal text-dark">Fullname</label>
+        <input type="text" class="form-control" ng-model="user.fullname" Placeholder='John Doe' required />
+      </div>
+      <div class="form-group">
+        <label class="text-normal text-dark">Role</label>
+        <select ng-model="user.role">
+            <option ng-selected="user.role==''" value="">Choose role...</option>
+            <option value="User">User</option>
+            <option value="Company">Company</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="text-normal text-dark">Email Address</label>
+        <input type="email" class="form-control" ng-model="user.email" Placeholder='name@email.com' required />
+      </div>
+      <div class="form-group">
+        <label class="text-normal text-dark">Password</label>
+        <input type="password" class="form-control" ng-model="user.password" placeholder="Password" required />
+      </div>
+      <div class="form-group">
+        <label class="text-normal text-dark">Confirm Password</label>
+        <input type="password" class="form-control" placeholder="Password" required /> 
+      </div>
+      <div class="form-group">
+        <button type="submit" class="btn btn-primary" ng-disabled="SignupForm.$invalid">Register</button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/src/assets/scripts/signup/signup.service.js b/src/assets/scripts/signup/signup.service.js
new file mode 100644
index 0000000..fe83bae
--- /dev/null
+++ b/src/assets/scripts/signup/signup.service.js
@@ -0,0 +1,26 @@
+'use strict';
+
+/** @ngInject */
+const SignupService = ($http)=> {
+    let serv = {};
+
+    serv.signupUserService = (user) => {
+        return $http({
+            method: 'POST',
+            url: 'https://nomitwisp-restapi.herokuapp.com/signup',
+            data: user,
+            headers: { 'Content-Type': 'application/json' }
+        })
+        .then((result) => {
+                console.log(result.data.token);
+                return result.data.token;              
+        }).catch((err) => {
+                console.log(err.data);
+                return err.data;
+        });
+    }
+    return serv;
+}
+
+export default SignupService;
+
diff --git a/src/assets/static/images/wisp_logo_horizontal.svg b/src/assets/static/images/wisp_logo_horizontal.svg
index 51a801a..04e05b8 100644
--- a/src/assets/static/images/wisp_logo_horizontal.svg
+++ b/src/assets/static/images/wisp_logo_horizontal.svg
@@ -45,8 +45,7 @@
 			l-3.4111109-3.4110069l-0.558629-0.55863L6.319869,15.2575493l2.234416-2.234416l6.7032461-6.7032471l2.234416,2.234416
 			l5.6520958,5.6520948l3.0811882-3.0812902l-3.0811882,3.0812902l0,0l4.2584972-4.2586002L27.612772,9.737566l-7.8864098-7.8864594
 			c-2.468153-2.4681017-6.4696112-2.4681017-8.9376621,0l-8.9376621,8.9376106c-2.4680505,2.468051-2.4680505,6.4695606,0,8.9376621
-			l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z
-			"/>
+			l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z"/>
 		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3865204" y1="27.2705288" x2="37.6677437" y2="6.9730129">
 			<stop  offset="0" style="stop-color:#8B00B1"/>
 			<stop  offset="0" style="stop-color:#EE38A4"/>
@@ -70,8 +69,7 @@
 			</linearGradient>
 			<path class="st2" d="M37.6015854,1.8511064l-8.9376621,8.9376106l-4.468729,4.468832l-0.55863,0.558629l-8.3790331,8.3790331
 				l-4.4688311,4.468832c2.467948,2.4677925,6.4688931,2.4678955,8.937149,0.0004101l0.0005131-0.0005131l13.4063931-13.4063911
-				l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z"
-				/>
+				l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z"/>
 			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.1951942" y1="13.6117887" x2="27.4866123" y2="13.6117887">
 				<stop  offset="0" style="stop-color:#8B00B1"/>
 				<stop  offset="0" style="stop-color:#EE38A4"/>
@@ -81,7 +79,7 @@
 				<stop  offset="0.8785662" style="stop-color:#591FB8"/>
 				<stop  offset="1" style="stop-color:#501DB9"/>
 			</linearGradient>
-			<polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282 			"/>
+			<polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282"/>
 		</g>
 	</g>
 	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.3990173" y1="-7.8904157" x2="122.914917" y2="37.6254807">
diff --git a/src/assets/styles/nomit.scss b/src/assets/styles/nomit.scss
index e29d707..4682d58 100644
--- a/src/assets/styles/nomit.scss
+++ b/src/assets/styles/nomit.scss
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
+
 // ***** GENERIC ***** //
 .sidebar{
     box-shadow: 0 0 15px rgba(0,0,0,0.5);
@@ -138,6 +140,17 @@ h1{
     display: inline;
     justify-content: flex-start;
 }
+.btn-industry{
+  color: #ee38a4;
+  background-color: transparent;
+  border: 1px solid #ee38a4;
+  border-radius: 30px;
+  align-items: center;
+  outline: none;
+  padding: 5px;
+  display: inline;
+  justify-content: flex-start;
+}
 
 // ***** TOGGLE BTN ***** //
   
@@ -285,7 +298,6 @@ textarea {
     width: 100%;
   }
   
-
 .btn-cv {
   box-shadow: 0 8px 7px 0 rgba(192, 192, 192, 0.521), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   color: #fff;
@@ -571,3 +583,20 @@ f
 .rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
   background: #888888;
 }
+//new-ad page
+
+.form-h2{
+  font-family: 'Roboto', sans-serif;
+    color: #454545;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+/* Modal */
+body.modal-open .blurra{
+  -webkit-filter: blur(6px);
+  -moz-filter: blur(6px);
+  -o-filter: blur(6px);
+  -ms-filter: blur(6px);
+  filter: blur(6px);
+}
\ No newline at end of file
diff --git a/src/companies.html b/src/companies.html
index dd6d4fd..69b21e2 100644
--- a/src/companies.html
+++ b/src/companies.html
@@ -170,7 +170,6 @@
       </main>
 
       <!-- ### $App Screen Footer ### -->
-      ${require('html-loader!./_footer.html')}
       </div><!-- page-container -->
       </div>  <!-- App Content -->
 </body>
diff --git a/src/index.html b/src/index.html
index 3474e04..55bb2da 100755
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html ng-app="NomitWisp">
 
 <head>
   <meta charset="utf-8">
@@ -73,215 +73,26 @@
 
   <!-- @App Content -->
   <!-- =================================================== -->
-  <div>
+  <div class="blurra">
 
     <!-- #sidebar ============================ -->
-    ${require('html-loader!./_sidebar.html')}
-
+    <nw-sidebar></nw-sidebar>
     <!-- #Main ============================ -->
     <div class="page-container">
       <!-- #topbar ============================ -->
-      ${require('html-loader!./_topbar.html')}
-
+      <nw-topbar></nw-topbar>
       <!-- ### $App Screen Content ### -->
-      <main class='main-content bgc-grey-300'>
-        <div id='mainContent row'>
-          <div class="row content-title mT-60">
-            <h1 class="col-8 ml-1 mb-3">
-              Dashboard
-            </h1>
-          </div>
-          <div class=" gap-20 masonry pos-r">
-            <!-- #content container ===== -->
-            <div class="masonry-sizer col-md-6"></div>
-            <div class="masonry-item  w-100">
-              <!-- #First line ========= -->
-              <div class="row gap-20">
-                
-                <div class='col-md-4 '><!-- #Total Ads Views ==================== -->
-                  <div class="layers bd bgc-white p-20 item-box">
-                    <div class="layer w-100 mB-10">
-                      <h6 class="lh-1">Total Applications</h6>
-                    </div>
-                    <div class="layer w-100">
-                      <div class="peers ai-sb fxw-nw">
-                        <div class="peer peer-greed">
-                          <span id="sparklinedash"></span>
-                        </div>
-                        <div class="peer">
-                          <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">24K</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                
-                <div class='col-md-4 '><!-- #Successful Matches ==================== -->
-                  <div class="layers bd bgc-white p-20 item-box">
-                    <div class="layer w-100 mB-10">
-                      <h6 class="lh-1">Successful Matches</h6>
-                    </div>
-                    <div class="layer w-100">
-                      <div class="peers ai-sb fxw-nw">
-                        <div class="peer peer-greed">
-                          <span id="sparklinedash2"></span>
-                        </div>
-                        <div class="peer">
-                          <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">127</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                
-                <div class='col-md-4 '><!-- #New Ads ==================== -->
-                  <div class="layers bd bgc-white p-20 item-box">
-                    <div class="layer w-100 mB-10">
-                      <h6 class="lh-1">New Ads (last month)</h6>
-                    </div>
-                    <div class="layer w-100">
-                      <div class="peers ai-sb fxw-nw">
-                        <div class="peer peer-greed">
-                          <span id="sparklinedash3"></span>
-                        </div>
-                        <div class="peer">
-                          <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">79</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="masonry-item col-12"> <!-- #New Registered Users ==================== -->
-              <div class="bd bgc-white item-box">
-                <div class="layers">
-                  <div class="layer w-100 pX-20 pT-20">
-                    <h6 class="lh-1">New Registered Users</h6>
-                  </div>
-                  <div class="layer w-100 p-20">
-                    <canvas id="line-chart" height="220"></canvas>
-                  </div>
-                  <div class="layer bdT p-20 w-100">
-                    <div class="peers ai-c jc-c gapX-20">
-                      <div class="peer">
-                        <span class="fsz-def fw-600 mR-10 c-purple-800">COMPANIES </span>
-                      </div>
-                      <div class="peer fw-600">
-                        <span class="fsz-def fw-600 mR-10 c-cyan-400">USERS </span>
-                      </div>  
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="masonry-item w-100">
-              <div class="row gap-20">
-                <div class="col-3 "><!-- #Successful Mathches %==================== -->
-                  <div class="bd bgc-white p-20 peer peer-greed succ-match-perc item-box">
-                    <div class="layers">
-                      <div class="layer w-100 mB-10">
-                        <h6 class="lh-1">Successful Mathches %</h6>
-                      </div>
-                      <!-- Pie Charts -->
-                      <div class="peers pT-50 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
-                        <div class="peer">
-                          <div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
-                            <span></span>
-                          </div>
-                          <h6 class="fsz-sm">Matched</h6>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-9 "> <!-- #Nationality ==================== -->
-                  <div class="bd bgc-white item-box nationality-item">
-                    <div class="peers fxw-nw@lg+ ai-s">
-                      <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
-                        <div class="layers">
-                          <div class="layer w-100 mB-10">
-                            <h6 class="lh-1">Nationality</h6>
-                          </div>
-                          <div class="layer w-100">
-                            <div id="world-map-marker"></div>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
-                        <div class="layers">
-                          <div class="layer w-100">
-                            <!-- Progress Bars -->
-                            <div class="layers">
-                              <div class="layer w-100">
-                                <h5 class="mB-5">100k</h5>
-                                <small class="fw-600 c-grey-700">Visitors From USA</small>
-                                <span class="pull-right c-grey-600 fsz-sm">50%</span>
-                                <div class="progress mT-10">
-                                  <div class="progress-bar bgc-deep-purple-500 nationality-item-progress-bar" role="progressbar" aria-valuenow="50"
-                                    aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">50%
-                                      Complete</span></div>
-                                </div>
-                              </div>
-                              <div class="layer w-100 mT-15">
-                                <h5 class="mB-5">1M</h5>
-                                <small class="fw-600 c-grey-700">Visitors From Europe</small>
-                                <span class="pull-right c-grey-600 fsz-sm">80%</span>
-                                <div class="progress mT-10">
-                                  <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50"
-                                    aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80%
-                                      Complete</span></div>
-                                </div>
-                              </div>
-                              <div class="layer w-100 mT-15">
-                                <h5 class="mB-5">450k</h5>
-                                <small class="fw-600 c-grey-700">Visitors From Australia</small>
-                                <span class="pull-right c-grey-600 fsz-sm">40%</span>
-                                <div class="progress mT-10">
-                                  <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50"
-                                    aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40%
-                                      Complete</span></div>
-                                </div>
-                              </div>
-                              <div class="layer w-100 mT-15">
-                                <h5 class="mB-5">1B</h5>
-                                <small class="fw-600 c-grey-700">Visitors From India</small>
-                                <span class="pull-right c-grey-600 fsz-sm">90%</span>
-                                <div class="progress mT-10">
-                                  <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50"
-                                    aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90%
-                                      Complete</span></div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
+        <div ng-view></div>
     </div>
 
 
+    <!-- ### $App Screen Footer ### -->
+    <nw-footer></nw-footer>
+  
   </div>
-  </div>
-  </div>
-  </main>
 
+  <!-- ### $App Login Modal ### -->
+  <nw-login></nw-login>
 
-  <!-- ### $App Screen Footer ### -->
-  ${require('html-loader!./_footer.html')}
-  
-  </div>
-  </div>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/src/login.html b/src/login.html
index 929bda7..15618b4 100644
--- a/src/login.html
+++ b/src/login.html
@@ -75,163 +75,6 @@
         Launch demo modal
     </button>
 
-     <!-- Modal -->
-     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-            <div class="modal-dialog" role="document">
-              <div class="modal-content">
-                <div class="modal-body d-flex">
-                  <div class="modal-left" >
-                        <p class="mo-title">Let's start with getting connected.</p>
-                        <div class="subtitle-modal">Sign up and join the WISP. </div>
-                        <button type="button" class="btn btn-signup ">SIGNUP</button>
-                  </div>
-                  <div class="modal-right ">
-                      <div class="logo-wisp-right"> 
-                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                            viewBox="0 0 138.8360748 39.8824463" style="enable-background:new 0 0 138.8360748 39.8824463;" xml:space="preserve">
-                       <style type="text/css">
-                           .st0{fill:url(#SVGID_1_);}
-                           .st1{fill:url(#SVGID_2_);}
-                           .st2{fill:url(#SVGID_3_);}
-                           .st3{fill:url(#SVGID_4_);}
-                           .st4{fill:url(#SVGID_5_);}
-                           .st5{fill:url(#SVGID_6_);}
-                           .st6{fill:url(#SVGID_7_);}
-                           .st7{fill:url(#SVGID_8_);}
-                           .st8{fill:url(#SVGID_9_);}
-                           .st9{fill:url(#SVGID_10_);}
-                           .st10{fill:url(#SVGID_11_);}
-                           .st11{fill:#FFFFFF;}
-                           .st12{fill:url(#SVGID_12_);}
-                           .st13{fill:url(#SVGID_13_);}
-                           .st14{fill:url(#SVGID_14_);}
-                           .st15{fill:url(#SVGID_15_);}
-                           .st16{fill:url(#SVGID_16_);}
-                           .st17{fill:url(#SVGID_17_);}
-                           .st18{fill:url(#SVGID_18_);}
-                           .st19{fill:url(#SVGID_19_);}
-                       </style>
-                       <g>
-                           <g>
-                               <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.806386" y1="30.5149899" x2="13.806386" y2="0.0000301">
-                                   <stop  offset="0" style="stop-color:#8B00B1"/>
-                                   <stop  offset="0" style="stop-color:#EE38A4"/>
-                                   <stop  offset="0.0866544" style="stop-color:#C832A9"/>
-                                   <stop  offset="0.1996946" style="stop-color:#9D2AAF"/>
-                                   <stop  offset="0.3094908" style="stop-color:#7C24B3"/>
-                                   <stop  offset="0.4136127" style="stop-color:#6420B6"/>
-                                   <stop  offset="0.5097673" style="stop-color:#551EB8"/>
-                                   <stop  offset="0.5903056" style="stop-color:#501DB9"/>
-                                   <stop  offset="0.6045721" style="stop-color:#501DB9"/>
-                                   <stop  offset="0.7748037" style="stop-color:#501DB9"/>
-                                   <stop  offset="0.8825542" style="stop-color:#7311B4"/>
-                                   <stop  offset="1" style="stop-color:#9506B0"/>
-                                   <stop  offset="1" style="stop-color:#9103B0"/>
-                               </linearGradient>
-                               <path class="st0" d="M18.4649811,27.823019l-0.0005131,0.0005131c0.0724716-0.0724716,0.1342678-0.1448421,0.204174-0.2173138
-                                   l-3.4111109-3.4110069l-0.558629-0.55863L6.319869,15.2575493l2.234416-2.234416l6.7032461-6.7032471l2.234416,2.234416
-                                   l5.6520958,5.6520948l3.0811882-3.0812902l-3.0811882,3.0812902l0,0l4.2584972-4.2586002L27.612772,9.737566l-7.8864098-7.8864594
-                                   c-2.468153-2.4681017-6.4696112-2.4681017-8.9376621,0l-8.9376621,8.9376106c-2.4680505,2.468051-2.4680505,6.4695606,0,8.9376621
-                                   l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z
-                                   "/>
-                               <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3865204" y1="27.2705288" x2="37.6677437" y2="6.9730129">
-                                   <stop  offset="0" style="stop-color:#8B00B1"/>
-                                   <stop  offset="0" style="stop-color:#EE38A4"/>
-                                   <stop  offset="0.5092942" style="stop-color:#9103B0"/>
-                                   <stop  offset="1" style="stop-color:#501DB9"/>
-                                   <stop  offset="1" style="stop-color:#9506B0"/>
-                               </linearGradient>
-                               <path class="st1" d="M55.4768066,10.7887173l-8.9376602-8.9376106l-4.4687309,4.4687796l6.7032471,6.7032471l2.234314,2.234416
-                                   l-6.7031441,6.7032471l-2.234417,2.2344151l-7.7302742-7.7302761l-0.2102318,0.2102318l-4.2584972,4.2586002l7.7301731,7.7301731
-                                   v0.0000515c2.4680519,2.4679985,6.4696121,2.4679985,8.937561,0l8.9376602-8.9376125
-                                   C57.9449615,17.2582779,57.9449615,13.2567682,55.4768066,10.7887173z"/>
-                               <g>
-                                   <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="10.7887001" y1="15.2575035" x2="46.5391464" y2="15.2575035">
-                                       <stop  offset="0" style="stop-color:#8B00B1"/>
-                                       <stop  offset="0" style="stop-color:#EE38A4"/>
-                                       <stop  offset="0.1175187" style="stop-color:#D634A7"/>
-                                       <stop  offset="0.4183493" style="stop-color:#9D2AAF"/>
-                                       <stop  offset="0.6763742" style="stop-color:#7323B4"/>
-                                       <stop  offset="0.8785662" style="stop-color:#591FB8"/>
-                                       <stop  offset="1" style="stop-color:#501DB9"/>
-                                   </linearGradient>
-                                   <path class="st2" d="M37.6015854,1.8511064l-8.9376621,8.9376106l-4.468729,4.468832l-0.55863,0.558629l-8.3790331,8.3790331
-                                       l-4.4688311,4.468832c2.467948,2.4677925,6.4688931,2.4678955,8.937149,0.0004101l0.0005131-0.0005131l13.4063931-13.4063911
-                                       l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z"
-                                       />
-                                   <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.1951942" y1="13.6117887" x2="27.4866123" y2="13.6117887">
-                                       <stop  offset="0" style="stop-color:#8B00B1"/>
-                                       <stop  offset="0" style="stop-color:#EE38A4"/>
-                                       <stop  offset="0.1175187" style="stop-color:#D634A7"/>
-                                       <stop  offset="0.4183493" style="stop-color:#9D2AAF"/>
-                                       <stop  offset="0.6763742" style="stop-color:#7323B4"/>
-                                       <stop  offset="0.8785662" style="stop-color:#591FB8"/>
-                                       <stop  offset="1" style="stop-color:#501DB9"/>
-                                   </linearGradient>
-                                   <polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282 			"/>
-                               </g>
-                           </g>
-                           <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.3990173" y1="-7.8904157" x2="122.914917" y2="37.6254807">
-                               <stop  offset="0" style="stop-color:#8B00B1"/>
-                               <stop  offset="0" style="stop-color:#EE38A4"/>
-                               <stop  offset="0.0727272" style="stop-color:#D634A7"/>
-                               <stop  offset="0.2166433" style="stop-color:#AD2DAD"/>
-                               <stop  offset="0.3643613" style="stop-color:#8C27B1"/>
-                               <stop  offset="0.5144968" style="stop-color:#7123B5"/>
-                               <stop  offset="0.6680248" style="stop-color:#5F20B7"/>
-                               <stop  offset="0.8269761" style="stop-color:#541EB9"/>
-                               <stop  offset="1" style="stop-color:#501DB9"/>
-                           </linearGradient>
-                           <path class="st4" d="M73.7269974,4.3174438v5.8997192v11.3051758v5.3615112
-                               c-0.4117432,2.0700073-1.6452637,3.1047974-3.7012939,3.1047974c-1.9445801,0-3.1610107-0.9794312-3.6466064-2.94104v-5.3562012
-                               V10.0534058V4.1483765c0.4855957-2.0239868,1.7020264-3.036438,3.6466064-3.036438
-                               C72.0817337,1.1119385,73.3152542,2.180603,73.7269974,4.3174438z M106.2809982,19.8569603
-                               c0-1.8695717-0.9047928-3.7108078-2.7115402-5.5251274c-1.8067474-1.8133755-3.6427689-2.7205353-5.5052414-2.7205353h-6.3165283
-                               c-1.0814056-0.3452024-1.6216354-1.055913-1.6216354-2.1316605c0-1.1130533,0.5383453-1.8237638,1.6159668-2.1311879h3.5096054
-                               c1.9682465-0.5189838,2.9523697-1.7250671,2.9523697-3.6182499c0-2.0782979-1.0483475-3.3216877-3.1412582-3.7301693h-3.8703918
-                               c-1.9077988,0-3.7872696,0.9000763-5.6374664,2.7002289c-1.8511353,1.8001525-2.7767029,3.6574452-2.7767029,5.5699892v2.4192505
-                               c0,1.8752375,0.9038467,3.7230854,2.7105942,5.5416546c1.8067474,1.8195152,3.6427689,2.7285633,5.5061874,2.7285633h6.3165283
-                               c1.0804596,0.3367023,1.6216354,1.0474129,1.6216354,2.1316605c0,1.0474129-0.5392838,1.7387619-1.6150208,2.0754642h-3.3981628
-                               c-2.0060272,0.5605412-3.0090408,1.7765408-3.0090408,3.6461124c0,1.9446564,1.0105743,3.1776562,3.0298233,3.7018356h4.0951614
-                               c1.8690872,0,3.7098312-0.8972435,5.5250778-2.6922016c1.8133621-1.7949581,2.7200394-3.6267509,2.7200394-5.4972649V19.8569603z
-                                M138.8360748,10.5393066v2.6487427c0,2.5925903-1.1069336,4.9976807-3.3208008,7.2142944
-                               c-2.2138672,2.2171631-4.6164551,3.3250122-7.2062988,3.3250122h-2.5329514c-0.7498779,0-1.7822266-0.2800293-3.0959473-0.8410645
-                               v13.7991333c-0.4117432,2.1312256-1.6452637,3.1970215-3.7012939,3.1970215c-1.9447021,0-3.1610107-1.0115356-3.6466064-3.0331421
-                               V3.0893555c0-0.262085,0.1303711-0.6176758,0.3929443-1.0672607C116.5467758,0.6738892,117.6329575,0,118.9787827,0
-                               c0.9718018,0,1.8690186,0.4118042,2.692627,1.2339478C123.354393,0.4118042,124.7372055,0,125.821434,0h2.525383
-                               c2.5803223,0,4.9726562,1.1088257,7.1798096,3.3250122C137.7328033,5.5426025,138.8360748,7.9467773,138.8360748,10.5393066z
-                                M131.4881744,10.4920654c0-0.6478882-0.3929443-1.3340454-1.1787109-2.0579834
-                               c-0.7858887-0.723938-1.4960938-1.0856323-2.1315918-1.0856323h-2.1874924c-0.6364746,0-1.3458252,0.3711548-2.1315918,1.1144409
-                               s-1.1787109,1.4384155-1.1787109,2.0863647v2.6293945c0,0.5713501,0.3835449,1.2481079,1.1503906,2.0286865
-                               c0.7668457,0.7820435,1.4309082,1.1720581,1.9909668,1.1720581h2.525383c0.5610352,0,1.2241211-0.3900146,1.9909668-1.1720581
-                               c0.7658691-0.7805786,1.1503906-1.4573364,1.1503906-2.0286865V10.4920654z"/>
-                       </g>
-                       </svg>
-
-                    </div> <!--logo-->
-                    <div ng-controller="LoginController">
-                      <h4 class=""><strong>Sign In </strong>
-                      <form ng-submit="userLogin()" name="LoginForm">
-                        <input class="modal-username" ng-model="user.email" type="text" placeholder="Email" required>
-                        <input class="modal-username" type="password" ng-model="user.password" placeholder="Password" required>
-                        <button type="submit" class="btn btn-gradient btn-centered mt-2" ng-disabled="LoginForm.$invalid">SIGN IN</button>
-                      </form> 
-                      <div ng-show="userLogged">
-                        <h2>Welcome {{user.fullname}}!</h2>
-                        <p ng-show="user.role == 'user'">This text is only visible to Users</p>
-                        <p ng-show="user.role == 'company'">This text is only visible to Companies</p>
-                        <p ng-show="user.role == 'nomit' || user.role == 'admin'">This text is visible to both Nomit and Admin</p>
-                        <p ng-show="user.role == 'nomit'">This text is only visible to Nomit</p>
-                        <p ng-show="user.role == 'admin'">This text is only visible to Admin</p>
-                      </div>
-                    </div>
-                  </div>
-                  </div>
-                
-              </div>
-            </div>
-        </div>
-
 
     </body>
   
diff --git a/src/new-ad.html b/src/new-ad.html
new file mode 100644
index 0000000..60c5624
--- /dev/null
+++ b/src/new-ad.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>About the Job</title>
+
+    <style>
+      #loader {
+        transition: all 0.3s ease-in-out;
+        opacity: 1;
+        visibility: visible;
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        background: #fff;
+        z-index: 90000;
+      }
+
+      #loader.fadeOut {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .spinner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: calc(50% - 20px);
+        left: calc(50% - 20px);
+        background-color: #333;
+        border-radius: 100%;
+        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+        animation: sk-scaleout 1.0s infinite ease-in-out;
+      }
+
+      @-webkit-keyframes sk-scaleout {
+        0% { -webkit-transform: scale(0) }
+        100% {
+          -webkit-transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+
+      @keyframes sk-scaleout {
+        0% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        } 100% {
+          -webkit-transform: scale(1.0);
+          transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+    </style>
+  </head>
+
+
+  <body class="app">
+    <!-- @TOC -->
+    <!-- =================================================== -->
+    <!--
+      + @Page Loader
+      + @App Content
+          - #Left Sidebar
+              > $Sidebar Header
+              > $Sidebar Menu
+
+          - #Main
+              > $Topbar
+              > $App Screen Content
+    -->
+
+    <!-- @Page Loader -->
+    <!-- =================================================== -->
+    <div id='loader'>
+      <div class="spinner"></div>
+    </div> 
+
+    <script>
+      window.addEventListener('load', () => {
+        const loader = document.getElementById('loader');
+        setTimeout(() => {
+          loader.classList.add('fadeOut');
+        }, 300);
+      });
+    </script>
+
+    <!-- @App Content -->
+    <!-- =================================================== -->
+    <div>
+
+      ${require('html-loader!./_sidebar.html')}
+
+      <div class="page-container">
+
+
+          ${require('html-loader!./_topbar.html')}
+
+
+        <!-- ### $App Screen Content ### -->
+        <main class='main-content bgc-grey-300'>
+          <div id='mainContent row'>
+
+              <div class="row content-title mT-60">
+                <h1 class="col-8 ml-1 mb-4">Create a new Internship Ad</h1>            
+              </div>
+
+              <div class=" gap-30 masonry pos-r"> <!-- #content container ===== -->
+              <div class="masonry-sizer col-md-6 "></div>
+
+                <!-- ### Job Details Card ### -->
+
+              <form>
+                <div class="masonry-item  w-50">
+                    <div class="card item-box">
+                        <div class="row">
+                           <div class="col-2">
+                             <img class="img-fluid ml-4 mb-4 companies-update-img"   src="assets/static/images/nomit-logo.png" alt="company" class="avatar">
+                           </div>
+                           <div class="col-9 card-body">
+                            <textarea id="description" class="form-h2 ard-text" name="story" rows="1" cols="11" required>Job Name</textarea>
+                            <h6 class="card-title mr-4">Name of the Company loggedin</h6>
+                           </div>
+                        </div>
+                     </div>
+                     <div class="card">
+                       <div class="card-body">
+                            <h5 class="card-title mt-4 ml-4 mr-4">About the business:</h5>
+                            <textarea id="description" class=" col-11 company-description ard-text ml-4 mr-10" name="story" rows="5" required>Please, include here a briefh description of your company, helping new users to understand your goals and target</textarea>
+                            <h5 class="card-title mt-4 ml-4 mr-4">About the role:</h5>
+                            <textarea id="description" class=" col-11 company-description ard-text ml-4 mr-10" name="story" rows="5" required>Please, include here a briefh description of the role, summarizeing the essential responsibilities, activities, qualifications and skills for a role.  </textarea>
+                       </div>
+                     </div>
+                </div>
+                        
+                <!-- ### Other Info Card ### -->   
+                <div class="masonry-item  w-50 "> 
+                    <div class="card item-box">
+                        <div class="card-body">
+                          <h5 class="card-title mt-4 ml-4 mr-4">Location:</h5>
+                          <label class="">Address</label>
+                          <input type="text" class="form-control" id="" placeholder="Melbourne, CBD & Inner Suburbs" required>
+                          <div class="form-row">
+                                <div class="mt-2 form-group col-md-6">
+                                  <label for="inputCity">City</label>
+                                  <input type="text" class="form-control" id="inputCity" required>
+                                </div>
+                                <div class="mt-2 form-group col-md-4">
+                                  <label for="inputState">State</label>
+                                  <select id="inputState" class="form-control" required>
+                                    <option selected>Choose...</option>
+                                    <option>...</option>
+                                  </select>
+                                </div>
+                                <div class="mt-2 form-group col-md-2">
+                                  <label for="inputZip">Zip</label>
+                                  <input type="text" class="form-control" id="inputZip" required>
+                                </div>
+                          </div>
+                          <h5 class="card-title mt-4 ml-4 mr-4">Application close:</h5>
+                          <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Application Closing Data" data-provide="datepicker">
+
+                          <h5 class="card-title mt-4 ml-4 mr-4">Main Classification:</h5>
+                          <input type="text" class="form-control" id="" placeholder="Industry" required>
+
+                          <h5 class="card-title mt-4 ml-4 mr-4">Skills:</h5>
+                          <input type="text" class="form-control" id="" placeholder="Preofessions" value="" >
+                          <div class="mt-4">
+                            <div class=" ml-4 mb-4 btn btn-industry mt-4">Graphic Design</div>
+                            <div class="ml-1 mb-4 btn btn-skills">Adobe Creaetive CC</div>
+                            <div class="ml-1 mb-4 btn btn-skills">Illustration</div>
+                          </div>
+                          <p class="card-text  ml-4 my-4"><small class="text-muted">Posted 3 days ago</small></p>
+                        </div>
+                      </div>
+                </div>
+          
+                <!-- ### Buttons ### --> 
+                <div class="masonry-item  w-50 m-auto btn-centered-container "> 
+                    <button type="submit" href="#" class="col-5 mr-1 btn btn-gradient btn-centered mt-6">Create</button>
+                    <button type="button" href="#" class="col-5 ml-1 btn btn-border  btn-centered mt-6">Save</button>
+                </div>
+              </form>
+            </div>
+                
+              
+            </div><!--content row-->
+          
+        </main>
+
+        <!-- ### $App Screen Footer ### -->
+        ${require('html-loader!./_footer.html')}
+        </div><!-- page-container -->
+        </div>  <!-- App Content -->
+  </body>
+  
+</html>
\ No newline at end of file
diff --git a/src/profile.html b/src/profile.html
index b9bc9fc..477098e 100644
--- a/src/profile.html
+++ b/src/profile.html
@@ -640,7 +640,6 @@
       </main>
 
       <!-- ### $App Screen Footer ### -->
-      ${require('html-loader!./_footer.html')}
     </div><!-- page-container -->
   </div> <!-- App Content -->
 </body>
diff --git a/src/referees.html b/src/referees.html
index 5dcae1b..760487f 100644
--- a/src/referees.html
+++ b/src/referees.html
@@ -170,7 +170,6 @@
         </main>
 
         <!-- ### $App Screen Footer ### -->
-        ${require('html-loader!./_footer.html')}
         </div><!-- page-container -->
         </div>  <!-- App Content -->
   </body>
diff --git a/src/reports.html b/src/reports.html
index 7dbfc43..57770eb 100644
--- a/src/reports.html
+++ b/src/reports.html
@@ -70,6 +70,7 @@
       }, 300);
     });
   </script>
+ 
 
   <!-- @App Content -->
   <!-- =================================================== -->
diff --git a/src/users.html b/src/users.html
index a8b77c0..e194fb5 100644
--- a/src/users.html
+++ b/src/users.html
@@ -179,7 +179,6 @@
         </main>
 
         <!-- ### $App Screen Footer ### -->
-        ${require('html-loader!./_footer.html')}
         </div><!-- page-container -->
         </div>  <!-- App Content -->
   </body>
diff --git a/webpack/plugins/htmlPlugin.js b/webpack/plugins/htmlPlugin.js
index 6144047..7ed7a55 100755
--- a/webpack/plugins/htmlPlugin.js
+++ b/webpack/plugins/htmlPlugin.js
@@ -11,6 +11,7 @@ const titles = {
   'charts': 'Charts',
   'ads': 'ads',
   'ads_1':'ads_1',
+  'new-ad':'new-ad',
   'ad-details':'ad-details',
   'reports':'reports',
   'history':'history',
