Index: src/Clients/Angular/finki-chattery/.vscode/launch.json
===================================================================
--- src/Clients/Angular/finki-chattery/.vscode/launch.json	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
+++ src/Clients/Angular/finki-chattery/.vscode/launch.json	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
Index: src/Clients/Angular/finki-chattery/angular.json
===================================================================
--- src/Clients/Angular/finki-chattery/angular.json	(revision 31c006c6d8b79b79af08703ba96b5f456e432e7f)
+++ src/Clients/Angular/finki-chattery/angular.json	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -98,6 +98,12 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
             "scripts": []
           }
@@ -106,6 +112,12 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
@@ -125,4 +137,7 @@
     }
   },
-  "defaultProject": "finki-chattery"
+  "defaultProject": "finki-chattery",
+  "cli": {
+    "analytics": false
+  }
 }
Index: src/Clients/Angular/finki-chattery/src/app/app-routing.module.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/app-routing.module.ts	(revision 31c006c6d8b79b79af08703ba96b5f456e432e7f)
+++ src/Clients/Angular/finki-chattery/src/app/app-routing.module.ts	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -1,3 +1,4 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthorizedGuard } from './core/guards/authorized.guard';
@@ -16,5 +17,8 @@
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+    CommonModule,
+    RouterModule.forRoot(routes)
+  ],
   exports: [RouterModule]
 })
Index: src/Clients/Angular/finki-chattery/src/app/app.component.html
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/app.component.html	(revision 31c006c6d8b79b79af08703ba96b5f456e432e7f)
+++ src/Clients/Angular/finki-chattery/src/app/app.component.html	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -1,3 +1,17 @@
-<main>
+
+  <mat-sidenav-container>
+    <mat-sidenav #sidenav role="navigation">
+      <!--this is a place for us to add side-nav code-->
+    </mat-sidenav>
+    <mat-sidenav-content>
+      <!--in here all the content must reside. We will add a navigation header as well-->
+      <app-header></app-header>
+      <main>
+        <router-outlet></router-outlet>
+      </main>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+
+
   <mat-progress-bar class="global-loader" [class.hidden]="!(loader.isLoading | async)" mode="indeterminate"></mat-progress-bar>
   <router-outlet></router-outlet>
Index: src/Clients/Angular/finki-chattery/src/app/app.module.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/app.module.ts	(revision 31c006c6d8b79b79af08703ba96b5f456e432e7f)
+++ src/Clients/Angular/finki-chattery/src/app/app.module.ts	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -11,7 +11,8 @@
 import { translateConfiguration, TranslateFromJsonService } from './shared-app/services';
 import { SharedMaterialModule } from './shared-material/shared-material.module';
+import { HeaderComponent } from './navigation/header/header.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, HeaderComponent],
   imports: [
     BrowserModule,
Index: src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.html
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.html	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
+++ src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.html	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -0,0 +1,20 @@
+<mat-toolbar color="">
+    <div fxHide.gt-xs>
+        <!--<button mat-icon-button>
+            <mat-icon>menu</mat-icon>
+        </button>-->
+    </div>
+    <div>
+        <a routerLink="**">Logo</a>
+    </div>
+    <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
+        <ul fxLayout fxLayoutGap="15px" class="navigation-items">
+            <li>
+                <a routerLink="/owner">Add Question</a>
+            </li>
+            <li>
+                <a routerLink="/account">My profile</a>
+            </li>
+        </ul>
+    </div>
+  </mat-toolbar>
Index: src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.scss
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.scss	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
+++ src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.scss	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -0,0 +1,23 @@
+a {
+    text-decoration: none;
+    color: grey;
+    padding: 7px;
+}
+a:hover, a:active{
+    background: lightgray;
+    padding: 7px;
+    border-radius: 3px;
+}
+.navigation-items{
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+mat-toolbar{
+    border-radius: 2px;
+}
+@media(max-width: 959px){
+    mat-toolbar{
+        border-radius: 0px;
+    }
+}
Index: src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.ts
===================================================================
--- src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.ts	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
+++ src/Clients/Angular/finki-chattery/src/app/navigation/header/header.component.ts	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
Index: src/Clients/Angular/finki-chattery/src/styles.scss
===================================================================
--- src/Clients/Angular/finki-chattery/src/styles.scss	(revision 31c006c6d8b79b79af08703ba96b5f456e432e7f)
+++ src/Clients/Angular/finki-chattery/src/styles.scss	(revision 9e954985ec2d7311fd08f6fff1b3126dbfe0e9eb)
@@ -1,8 +1,9 @@
 html,
 body {
+  margin: 0;
   height: 100%;
 }
+/*
 body {
-  margin: 0;
   font-family: Roboto, sans-serif;
 }
@@ -285,2 +286,3 @@
   z-index: 1100 !important;
 }
+*/
