diff --git a/angular.json b/angular.json
index 8dc5ee3..c62f002 100644
--- a/angular.json
+++ b/angular.json
@@ -25,10 +25,11 @@
             "styles": [
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
+              "src/styles.css",
               "./node_modules/primeicons/primeicons.css",
               "./node_modules/primeng/resources/themes/nova-light/theme.css",
               "./node_modules/primeng/resources/primeng.min.css",
-              "src/styles.css"
+              "./node_modules/font-awesome/css/font-awesome.css"
             ],
             "scripts": []
           },
@@ -86,7 +87,11 @@
             "styles": [
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/primeicons/primeicons.css",
+              "./node_modules/primeng/resources/themes/nova-light/theme.css",
+              "./node_modules/primeng/resources/primeng.min.css",
+              "./node_modules/font-awesome/css/font-awesome.css"
             ],
             "scripts": [],
             "assets": [
diff --git a/package-lock.json b/package-lock.json
index 248dae2..96a2f08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1319,6 +1319,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-font-awesome": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz",
+      "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -4498,6 +4503,11 @@
         }
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
diff --git a/package.json b/package.json
index d736cf8..d7be56f 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,10 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "angular-font-awesome": "^3.1.2",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "ngx-bootstrap": "^3.2.0",
     "popper": "^1.0.1",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b00e7e1..9be8f1d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,60 +1,20 @@
-<!--<nav class="navbar navbar-dark bg-dark mb-5">
-        <a 
-      class="navbar-brand" href="/">Angular & Bootstrap</a>
-        <div 
-      class="navbar-expand mr-auto">
-          <div 
-      class="navbar-nav">
-            <a 
-      class="nav-item nav-link active" href="#">Home</a>
-            <a 
-      class="nav-item nav-link" href="#">About</a>
-            <a 
-      class="nav-item nav-link" href="#">Contact</a>
-          </div>
-        </div>
-        <div 
-      class="navbar-expand ml-auto navbar-nav">
-          <div 
-      class="navbar-nav">
-            <a 
-      class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
-              <i 
-      class="fa fa-github"></i>
-            </a>
-            <a 
-      class="nav-item nav-link" href="https://twitter.com/beeman_nl" target="_blank">
-              <i 
-      class="fa fa-twitter"></i>
-            </a>
-            <a 
-      class="nav-item nav-link" href="https://medium.com/@beeman" target="_blank">
-              <i 
-      class="fa fa-medium"></i>
-            </a>
-          </div>
-        </div>
-      </nav>
-    -->
-
-    <p-toolbar id="Mytoolbar">
+<p-toolbar id="Mytoolbar">
+    
+    <div class="ui-toolbar-group-left">
+        <button pButton type="button" label="New" icon="pi pi-plus"></button>
+        <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
+            
+        <i class="pi pi-bars"></i>
         
-            <div class="ui-toolbar-group-left">
-                <button pButton type="button" label="New" icon="pi pi-plus"></button>
-                <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
-                    
-                <i class="pi pi-bars"></i>
-                
-                <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
-            </div>
-            
-            <div class="ui-toolbar-group-right">
-                <button pButton type="button" icon="pi pi-search"></button>
-                <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
-                <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
-            </div>
-      
-            
-        </p-toolbar>
-        <router-outlet></router-outlet>
+        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
+    </div>
+    
+    <div class="ui-toolbar-group-right">
+        <button pButton type="button" icon="fa fa fa-sign-in" label="Log in" iconPos="right" (click)="LogIn()"></button>
+        <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
+        <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
+    </div>
 
+    
+</p-toolbar>
+<router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e754577..fbc1981 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,7 +11,7 @@ export class AppComponent implements OnInit{
 
   items : MenuItem[];
 
-  //constructor(){}
+  constructor(){}
   ngOnInit(){
     this.items = [
       {label: 'Update', icon: 'pi pi-refresh'},
@@ -21,4 +21,10 @@ export class AppComponent implements OnInit{
 
 
   }
+
+  public LogIn() 
+  {
+    console.log('helloooo');
+    // change route -> /login
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2bbd751..d0be489 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,7 +11,6 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { BorderCardDirective } from './directives/border-card.directive';
-
 import { ToolbarModule } from 'primeng/toolbar';
 import { ButtonModule } from 'primeng/button';
 import { SplitButtonModule } from 'primeng/splitbutton';
diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts
index 2fec697..b008480 100644
--- a/src/app/home-page/home-page.component.ts
+++ b/src/app/home-page/home-page.component.ts
@@ -3,8 +3,6 @@ import { Router } from '@angular/router'
 
 
 
-
-
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',