diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000000000000000000000000000000000000..1348ba4a63e4663a3cc8a73323e413e4254eb192
--- /dev/null
+++ b/.vscode/launch.json
@@ -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": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/angular.json b/angular.json
index 1dba31818ae19008def2865780038c79d62bd068..5a1e390ed72ad23c3f1dcbb166e346b4c09b4fc2 100644
--- a/angular.json
+++ b/angular.json
@@ -30,6 +30,7 @@
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/swagger-editor-dist/swagger-editor.css",
+              "node_modules/@nebular/theme/styles/prebuilt/default.css",
               "src/styles.scss"
             ],
             "scripts": [
diff --git a/package-lock.json b/package-lock.json
index b3b3941b2855d9a186af963a52689ef768f50f4c..12679cd616dc75ca0b2449f1bfcfd5437b37b7b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -409,9 +409,9 @@
       }
     },
     "@angular/animations": {
-      "version": "9.1.11",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.11.tgz",
-      "integrity": "sha512-VKAExUnEJfo1PDQKagpx2pn+QMZCsPLRiADzTdl4U0VPylK3ALbn4ZNY9UbdwyE2plitz++LkH7sEGGfh+PNrQ=="
+      "version": "9.1.12",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz",
+      "integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
     },
     "@angular/cdk": {
       "version": "9.2.4",
@@ -2841,6 +2841,25 @@
         }
       }
     },
+    "@nebular/auth": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-6.2.1.tgz",
+      "integrity": "sha512-s2xiyT5zUxVxz3UULZCjbHpaouPjAfUhPJKjQ5kl92YLIyj1PqFC5+ONiJh27i92rb90iuO0OatvrH//jSoZUA=="
+    },
+    "@nebular/eva-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-5.1.0.tgz",
+      "integrity": "sha512-vyX39xTLpckw44m6vQvdrP0Fz2h2y9PSMTEJj+QXfnaiFrpkaOdyKdzXWmmX4uZugC1qJmuGLQjk5KckQW9UBQ==",
+      "dev": true
+    },
+    "@nebular/theme": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-5.1.0.tgz",
+      "integrity": "sha512-tKhXeEv6d8HUdA0GrXNQxaHNme8KtassYSfH5NIpGHBRNt95t03S3YeQnz/YK5RPfipm+hxYh24PkbdEkOe4hA==",
+      "requires": {
+        "intersection-observer": "0.7.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "9.1.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.9.tgz",
@@ -6152,6 +6171,12 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "eva-icons": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/eva-icons/-/eva-icons-1.1.3.tgz",
+      "integrity": "sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag==",
+      "dev": true
+    },
     "eventemitter3": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
@@ -7616,6 +7641,11 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "intersection-observer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz",
+      "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
diff --git a/package.json b/package.json
index c1ca1f9f52ad5647bfb7de7ad28a7f71a2605df9..f5ab63c0659ac2829a9356b9e3f9400b22a27aad 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.11",
-    "@angular/cdk": "~9.2.4",
+    "@angular/animations": "^9.1.12",
+    "@angular/cdk": "^9.2.4",
     "@angular/common": "~9.1.11",
     "@angular/compiler": "~9.1.11",
     "@angular/core": "~9.1.11",
@@ -21,6 +21,8 @@
     "@angular/platform-browser": "~9.1.11",
     "@angular/platform-browser-dynamic": "~9.1.11",
     "@angular/router": "~9.1.11",
+    "@nebular/auth": "^6.2.1",
+    "@nebular/theme": "^5.1.0",
     "file-saver": "^2.0.2",
     "ngx-filesaver": "^9.0.0",
     "rxjs": "~6.5.5",
@@ -35,10 +37,13 @@
     "@angular/cli": "^9.1.9",
     "@angular/compiler-cli": "~9.1.11",
     "@angular/language-service": "~9.1.11",
+    "@nebular/eva-icons": "^5.1.0",
+    "@schematics/angular": "^9.1.9",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^8.10.64",
     "codelyzer": "^5.0.0",
+    "eva-icons": "^1.1.3",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
diff --git a/src/app/account/account.component.html b/src/app/account/account.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4cbb4ffbd7eba48ce9b1885d9603428f1c9f14b4
--- /dev/null
+++ b/src/app/account/account.component.html
@@ -0,0 +1,28 @@
+<div class="card">
+    <h4 class="card-header">Login</h4>
+    <div class="card-body">
+        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
+                <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
+                    <div *ngIf="f.username.errors.required">Username is required</div>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
+                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+                    <div *ngIf="f.password.errors.required">Password is required</div>
+                </div>
+            </div>
+            <div class="form-group">
+                <button [disabled]="loading" class="btn btn-primary">
+                    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+                    Login
+                </button>
+                <a routerLink="../register" class="btn btn-link">Register</a>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/account/account.component.scss b/src/app/account/account.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/account/account.component.spec.ts b/src/app/account/account.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..140216daab376b5dfd9c0c20ae9745f16c84c849
--- /dev/null
+++ b/src/app/account/account.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account/account.component.ts b/src/app/account/account.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40c9da940d4061537ccdb2a7c167b590b0d34a60
--- /dev/null
+++ b/src/app/account/account.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/account/account.module.ts b/src/app/account/account.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..17df9669427641e8ac53d9b7c1b44954e2c86c0a
--- /dev/null
+++ b/src/app/account/account.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AccountLoginComponent } from './login/account.login.component';
+import { NbAlertModule,NbCardModule, NbCheckboxModule,NbButtonModule, NbInputModule } from '@nebular/theme';
+import { AccountAdminComponent } from './admin/account.admin.component';
+
+  
+
+@NgModule({
+  declarations: [AccountLoginComponent, AccountAdminComponent],
+  imports: [
+    CommonModule,
+    NbAlertModule,
+    NbCheckboxModule,
+    FormsModule,
+    NbButtonModule,
+    NbInputModule,
+    ReactiveFormsModule,
+    NbCardModule
+      ],
+})
+export class AccountModule {
+  
+ }
diff --git a/src/app/account/admin/account.admin.component.html b/src/app/account/admin/account.admin.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..64a870deb969b46a904fde0f5143a29619e9c384
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.html
@@ -0,0 +1,11 @@
+<div style="text-align:center">
+    <h1>
+      Welcome Super Admin!
+    </h1>
+    <p>
+      <button (click)="logout()">
+        Logout
+      </button>
+    </p>
+    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  </div>
\ No newline at end of file
diff --git a/src/app/account/admin/account.admin.component.scss b/src/app/account/admin/account.admin.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ad28dead2c8d91641380ee7600216b63a66a4b83
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.scss
@@ -0,0 +1,6 @@
+button{
+    background: rgb(1, 29, 51);
+    border-color: transparent;
+    color: #fff;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/account/admin/account.admin.component.spec.ts b/src/app/account/admin/account.admin.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..70787e000eb853d82fd01377a7d2fea98b6990d0
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Account.AdminComponent } from './account.admin.component';
+
+describe('Account.AdminComponent', () => {
+  let component: Account.AdminComponent;
+  let fixture: ComponentFixture<Account.AdminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Account.AdminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Account.AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account/admin/account.admin.component.ts b/src/app/account/admin/account.admin.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..073f0fc1283aec3b7bdc29f6ad726090e52c225a
--- /dev/null
+++ b/src/app/account/admin/account.admin.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+@Component({
+  selector: 'app-account.admin',
+  templateUrl: './account.admin.component.html',
+  styleUrls: ['./account.admin.component.scss']
+})
+export class AccountAdminComponent implements OnInit {
+
+  constructor(private authService: AuthService, private router: Router) { }
+
+  ngOnInit(): void {
+  }
+  
+  logout(){
+    this.authService.logout();
+    this.router.navigateByUrl('/auth/login');
+  }
+
+}
diff --git a/src/app/account/login/account.login.component.html b/src/app/account/login/account.login.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6833b93532a9cd4f0a139ff825dcecdd9094071b
--- /dev/null
+++ b/src/app/account/login/account.login.component.html
@@ -0,0 +1,35 @@
+<h1 style="text-align:center">AAI EOSC-Pillar</h1>
+<nb-card status="info" style="width: 50%;height: auto; margin: auto;" >
+  <nb-card-header style="text-align: center;">Welcome to the API register</nb-card-header>
+  <nb-card-body class="example-items-col">
+
+<div class="login" style="text-align: center;">
+  <h2 class="login-header">Log in</h2>
+  <form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">
+
+    <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
+      <label class="label" for="email">Email:</label>
+    <input style="margin: auto;" type="email" nbInput shape="semi-round" placeholder="Email" formControlName="email">
+    </p>
+
+    <div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
+      <div *ngIf="formControls.email.errors.required">Email is required</div>
+    </div>
+
+    <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
+      <label class="label" for="passord">Password:</label>
+      <input type="password" nbInput shape="semi-round" placeholder="Password" formControlName="password">
+    </p>
+
+    <div *ngIf="isSubmitted && formControls.password.errors" class="help-block">
+      <div *ngIf="formControls.password.errors.required">Password is required</div>
+    </div>
+
+    <p>
+      <input type="submit" nbButton shape="rectangle" status="info" value="Log in" style="width: auto;height: auto;">
+    </p>
+  </form>
+</div>
+</nb-card-body>
+
+</nb-card>
diff --git a/src/app/account/login/account.login.component.scss b/src/app/account/login/account.login.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..90851c06c7d1c70be026b4960065e53fc6cbe7c0
--- /dev/null
+++ b/src/app/account/login/account.login.component.scss
@@ -0,0 +1,16 @@
+@import  url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+body {
+    background: #456;
+    font-family: 'Open Sans', sans-serif;
+}
+
+
+.has-error input[type="email"],
+.has-error input[type="password"] {
+    border-color: rgb(216, 12, 12);
+    color: rgb(230, 14, 14);
+}
+
+label {
+width: auto;
+}
\ No newline at end of file
diff --git a/src/app/account/login/account.login.component.ts b/src/app/account/login/account.login.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..61fb1015cc5c21cef3805d8d95f7fd84ee1edc88
--- /dev/null
+++ b/src/app/account/login/account.login.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+
+@Component({
+  selector: 'app-account-login',
+  templateUrl: './account.login.component.html',
+  styleUrls: ['./account.login.component.scss']
+})
+export class AccountLoginComponent implements OnInit {
+  loginForm: FormGroup;
+  isSubmitted  =  false;
+
+  constructor(private authService: AuthService, private router: Router, private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.loginForm  =  this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required]
+  });
+  }
+
+  get formControls() { return this.loginForm.controls; }
+
+  login(){
+    console.log(this.loginForm.value);
+    this.isSubmitted = true;
+    if(this.loginForm.invalid){
+      return;
+    }
+    this.authService.login(this.loginForm.value);
+    this.router.navigateByUrl('/admin');
+  }
+  
+
+  
+
+}
diff --git a/src/app/account/login/acount.login.component.spec.ts b/src/app/account/login/acount.login.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8847824b10891ed6af55aaa5cc0a05890e0965b4
--- /dev/null
+++ b/src/app/account/login/acount.login.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountLoginComponent } from './account.login.component';
+
+describe('LoginComponent', () => {
+  let component: AccountLoginComponent;
+  let fixture: ComponentFixture<AccountLoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountLoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account/services/auth.guard.spec.ts b/src/app/account/services/auth.guard.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68889d22d920e3b78febae9e5d323c717887961e
--- /dev/null
+++ b/src/app/account/services/auth.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});
diff --git a/src/app/account/services/auth.guard.ts b/src/app/account/services/auth.guard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32ffbb581074652ba3304b2f50ab433e6d94b76a
--- /dev/null
+++ b/src/app/account/services/auth.guard.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService){}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      return this.authService.isLoggedIn();
+  }
+  
+}
diff --git a/src/app/account/services/auth.service.spec.ts b/src/app/account/services/auth.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1251cacf9dda3b3bd9dc5222583fafa110ffe8f
--- /dev/null
+++ b/src/app/account/services/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/account/services/auth.service.ts b/src/app/account/services/auth.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1da74691955fe6be61d815672ab4b691ec9a103c
--- /dev/null
+++ b/src/app/account/services/auth.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { User } from 'src/app/user/model/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  constructor() { }
+
+  public login(userInfo: User){
+    localStorage.setItem('ACCESS_TOKEN', "access_token");
+  }
+
+  public isLoggedIn(){
+    return localStorage.getItem('ACCESS_TOKEN') !== null;
+
+  }
+
+  public logout(){
+    localStorage.removeItem('ACCESS_TOKEN');
+  }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e5e37ddbfbe002b0f9740e454e1497cbeb1db44d..9cdbae04857936b55dbf1968202b1f301328c8d7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -12,8 +12,9 @@ import { SettingsmartapiComponent } from './settingsmartapi/settingsmartapi.comp
 import { RepositoryinfoComponent } from './repositoryinfo/repositoryinfo.component';
 import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component';
 import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component'
-import { PublishapiComponent } from './publishapi/publishapi.component'
+import { PublishApiComponent } from './publishapi/publishapi.component'
 import { SearchComponent } from './search/search.component';
+import { AccountLoginComponent } from './account/login/account.login.component';
 
 
 const routes: Routes = [
@@ -29,11 +30,15 @@ const routes: Routes = [
                         {path: 'settingsmartharvester', component : SettingsmartapiComponent},
                         {path: 'swaggerapi', component : SwaggereditorComponent},
                         {path: 'elasticsearch', component : ElasticsearchComponent},
-                        {path: 'publishapi', component : PublishapiComponent},
+                        {path: 'publishapi', component : PublishApiComponent},
                         {path: 'simplesearch', component : SearchComponent},
-                        {path: 'advancedsearch', component : SearchComponent}
-                      ];
-
+                        {path: 'advancedsearch', component : SearchComponent},
+                        {path: 'auth/login',component: AccountLoginComponent},
+                            //{ path: 'register',component: NbRegisterComponent},
+                            //{ path: 'logout', component: NbLogoutComponent},
+                            //{ path: 'request-password', component: NbRequestPasswordComponent},
+                            //{ path: 'reset-password', component: NbRequestPasswordComponent}
+                        ]
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4a59e3f98b8cca4916da2bdfd7ccd6e67799dda9..c97df7a10ccc5dcf09b60c81c5c7c06882aa4964 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,177 +1,28 @@
 
-<style>
-  :host {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 14px;
-    color: #333;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  .toolbar {
-    height: 60px;
-    margin: -8px;
-    display: flex;
-    align-items: center;
-    background-color: #badcfd;
-    font-weight: 600;
-  }
-
-  .toolbar img {
-    margin: 0 16px;
-  }
-
-
-  .toolbar #twitter-logo:hover {
-    opacity: 0.8;
-  }
-
-  .content {
-    display: flex;
-    margin: 32px auto;
-    padding: 0 16px;
-    max-width: 960px;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  svg.material-icons {
-    height: 24px;
-    width: auto;
-  }
-
-  svg.material-icons:not(:last-child) {
-    margin-right: 8px;
-  }
-
-
-  a,
-  a:visited,
-  a:hover {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #125699;
-  }
-
-
-
-
-  footer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-  }
-
-  footer a {
-    display: flex;
-    align-items: center;
-  }
-
-
-  /* Responsive Styles */
-  @media screen and (max-width: 767px) {
-
-    .card-container > *:not(.circle-link) ,
-    .terminal {
-      width: 100%;
-    }
-
-    .card:not(.highlight-card) {
-      height: 16px;
-      margin: 8px 0;
-    }
-
-    .card.highlight-card span {
-      margin-left: 72px;
-    }
-
-    svg#rocket-smoke {
-      right: 120px;
-      transform: rotate(-5deg);
-    }
-  }
-
-  @media screen and (max-width: 575px) {
-    svg#rocket-smoke {
-      display: none;
-      visibility: hidden;
-    }
-  }
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
-  <a routerLink="/" routerLinkActive="active">
-    <img
-    width="80"
-    alt="Angular Logo"
-    src="assets/images/logo.png"
-  />
-  </a>
-
-
-
-  <button class="menu-button" mat-button [matMenuTriggerFor]="menu">Register</button>
-  <mat-menu #menu="matMenu">
-
-    <button mat-menu-item routerLink="/login" routerLinkActive="active">Login</button>
-    <mat-divider></mat-divider>
-
-    <button mat-menu-item [matMenuTriggerFor]="subMenuRepo">Describe your repository</button>
-    <mat-menu #subMenuRepo="matMenu">
-      <button mat-menu-item routerLink="/repositoryinfo" routerLinkActive="active">SDT administrative information </button>
-      <button mat-menu-item routerLink="/repository" routerLinkActive="active">Technical information</button>
-    </mat-menu>
-
-    <button mat-menu-item routerLink="/publishapi" routerLinkActive="active">Describe access to datasets</button>
-
-    <mat-divider></mat-divider>
-    <button mat-menu-item [matMenuTriggerFor]="subMenuSetting">Settings</button>
-    <mat-menu #subMenuSetting="matMenu">
-      <button mat-menu-item routerLink="/settingfdp" routerLinkActive="active">FDP setting</button>
-      <button mat-menu-item routerLink="/settingsmartharvester" routerLinkActive="active">SmartHarvester setting</button>
-      <button mat-menu-item routerLink="/elasticsearch" routerLinkActive="active">Elasticsearch setting</button>
-      </mat-menu>
-  </mat-menu>
-
-
-  <button class="menu-button" routerLink="/simplesearch" routerLinkActive="active">Search</button>
-
-  <h3 style="color:#1f77ac; margin-left: auto; margin-right: auto"> <strong>Publish your datasets in the Federated FAIR Data Space</strong></h3>
-
-</div>
-
-
-
-<div class="content" role="main">
-
-  <router-outlet></router-outlet>
-
-
-
-</div>
-
-
-
+<nb-layout>
+
+  <nb-layout-header fixed>
+    <nb-icon (click)="toggleSidebar()" class="sidebar-toggle" icon="menu-2-outline"></nb-icon>
+    <a routerLink="/" routerLinkActive="active">
+      <img width="80"alt="Angular Logo" src="assets/images/logo.png"/>
+    </a>
+    <nb-user style="margin-left:75%; white-space: pre;" name="Paulo Pimenta"
+              title="CINES"
+              [nbContextMenu]="items"
+              nbContextMenuTag="my-context-menu">
+    </nb-user>
+    <button routerLink="/auth/login" nbContextMenuPlacement="right" outline nbButton >Login</button>
+  </nb-layout-header>
+  
+  <nb-sidebar responsive start state="compacted">
+    <!--Menu Items-->
+    <nb-menu [items]="items" autoCollapse="true"></nb-menu>
+  </nb-sidebar>
+
+  <nb-layout-column>
+    <router-outlet></router-outlet>
+  </nb-layout-column>
+ 
+  <nb-layout-footer fixed>Contact us</nb-layout-footer>
+</nb-layout>
+<div class="footer">TEST</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1eb7c89a44031b4593228fbc6c8f732535e8c415 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,135 @@
+:host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    height: 60px;
+    margin: -8px;
+    display: flex;
+    align-items: center;
+    background-color: #badcfd;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+
+  .toolbar #twitter-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 32px auto;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+
+
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+
+  .sidebar-toggle {
+    padding-right: 1.25rem;
+    text-decoration: none;
+    color: var(--text-hint-color);
+    font-size: 3.5rem;
+  }
+
+  .footer{
+    display: block;
+    margin-top: auto; 
+    z-index: 99999!important;
+    overflow: hidden; 
+    width: auto;
+    height: 100px;
+  }
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 84be744e05c36888ffc4efb4f69790d0ea2921b2..54d1792a164fba6c95dee09cf542f0e1645841ec 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,14 +1,99 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NbMenuItem, NbSidebarService } from '@nebular/theme';
 
 
 @Component({
   selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent  {
   title = 'register-front';
+  
+  items: NbMenuItem[] = [
+    {
+      title: 'Home',
+      icon: 'home-outline',
+      link: '',
+      pathMatch:'full'
+    },
+    {
+      title: 'Register',
+      icon: 'file-text-outline',
+      link: '/register',
+      pathMatch:'full'
+    },
+    {
+      title: 'Login',
+      icon: 'person-outline',
+      link: '/login',
+      pathMatch:'full'
+    },
+    {
+      title: 'Search',
+      icon: 'search-outline',
+      link: '/simplesearch',
+      pathMatch:'full'
+    },
+    {
+      title: 'Describe your repository',
+      icon: 'cube-outline',
+
+      children: [
+        {
+          title: 'SDT information',
+          link: '/repositoryinfo',
+          pathMatch:'full',
+          icon: 'flash-outline',
+        },
+        {
+          title: 'Technical information',
+          link: '/repository',
+          pathMatch:'full',
+          icon: 'text-outline',
+        },
+      ],
+    },
+    {
+      title: 'Describe access to datasets',
+      icon: 'clipboard-outline',
+      link: '/publishapi',
+      pathMatch:'full'
+    },
+    {
+      title: 'Settings',
+      icon: 'options-2-outline',
+      children: [
+        {
+          title: 'FDP settings',
+          link: '/settingfdp',
+          pathMatch:'full'
+        },
+        {
+          title: 'SmartHarvester settings',
+          link: '/settingsmartharvester',
+          pathMatch:'full'
+        },
+        {
+          title: 'Elasticsearch settings',
+          link: '/elasticsearch',
+          pathMatch:'full'
+        }
+      ],
+    },
+  ];
+
+  constructor(private readonly sidebarService: NbSidebarService) {
+  }
+
+  toggleSidebar(): boolean {
+    this.sidebarService.toggle(true);
+    return false;
+  }
+
+
 }
 
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b4cdc41834a1f60965623f8c89d7a075915994c7..16b0cb8831f2897ae321e6fa4cf8e985f1cef22c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,9 +32,16 @@ import { FileSaverModule } from 'ngx-filesaver';
 import { SwaggereditorComponent } from './swaggereditor/swaggereditor.component';
 import { AppConfiguration } from './AppConfiguration';
 import { ElasticsearchComponent } from './elasticsearch/elasticsearch.component';
-import { PublishapiComponent } from './publishapi/publishapi.component';
+import { PublishApiComponent } from './publishapi/publishapi.component';
 import { SearchComponent } from './search/search.component'
 import { ParseXmlService } from './services/parse-xml.service';
+import { NbMenuModule, 
+  NbThemeModule,NbStepperModule,
+  NbCardModule, NbSidebarModule, NbLayoutModule, 
+  NbButtonModule, NbIconModule, NbInputModule, NbContextMenuModule, NbUserModule } from '@nebular/theme/';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
+import { AccountComponent } from './account/account.component';
+import { AccountModule } from './account/account.module';
 
 
 
@@ -53,8 +60,9 @@ import { ParseXmlService } from './services/parse-xml.service';
     RepositoryinfoComponent,
     SwaggereditorComponent,
     ElasticsearchComponent,
-    PublishapiComponent,
-    SearchComponent
+    PublishApiComponent,
+    SearchComponent,
+    AccountComponent
     ],
   imports: [
     BrowserModule,
@@ -69,8 +77,20 @@ import { ParseXmlService } from './services/parse-xml.service';
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    FileSaverModule
-
+    FileSaverModule,
+    NbStepperModule,
+    NbCardModule,
+    NbThemeModule.forRoot({ name: 'default' }),
+    NbLayoutModule,
+    NbSidebarModule.forRoot(),
+    NbContextMenuModule,
+    NbButtonModule,
+    NbMenuModule.forRoot(),
+    NbIconModule,
+    NbEvaIconsModule,
+    NbInputModule,
+    NbUserModule,
+    AccountModule 
   ],
   providers: [
     AppConfiguration,
diff --git a/src/app/publishapi/publishapi.component.html b/src/app/publishapi/publishapi.component.html
index ebded102ea3ebdeededf182f1a43247934ef13ab..1393c62cee0b282fd5774926b6c3d0347d347c9d 100644
--- a/src/app/publishapi/publishapi.component.html
+++ b/src/app/publishapi/publishapi.component.html
@@ -1,5 +1,46 @@
-<p>publishapi works!</p>
-<br><br>
-<br><br>
 
-<button class="next-step-button" routerLink="/datasets" routerLinkActive="active" >Next step</button>
+<!--<button class="next-step-button" routerLink="/datasets" routerLinkActive="active" >Next step</button>-->
+
+<!--Nebula example-->
+
+<nb-card>
+    <nb-card-body>
+      <nb-stepper orientation="horizontal" disableStepNavigation>
+        <nb-step [label]="labelOne">
+          <ng-template #labelOne>First step</ng-template>
+          <h4>Map Schema</h4>
+          <p class="lorem">
+            Map your metadata schema with FDP schema          
+          </p>
+          <button class="prev-button" nbButton disabled nbStepperNext>prev</button>
+          <button class="next-button" nbButton nbStepperNext>next</button>
+        </nb-step>
+        <nb-step [label]="labelTwo">
+          <ng-template #labelTwo>Second step</ng-template>
+          <h4>Missing data</h4>
+          <p class="lorem">
+            Add missing informations
+          </p>
+          <button class="prev-button" nbButton nbStepperPrevious>prev</button>
+          <button class="next-button" nbButton nbStepperNext>next</button>
+        </nb-step>
+        <nb-step label="Third step">
+          <h4>Ontology match</h4>
+          <p class="lorem">
+            Align with ontologies
+          </p>
+          <button class="prev-button" nbButton nbStepperPrevious>prev</button>
+          <button class="next-button" nbButton nbStepperNext>next</button>
+        </nb-step>
+        <nb-step [label]="labelFour">
+          <ng-template #labelFour>Fourth step</ng-template>
+          <h4>Done</h4>
+          <p class="lorem">
+            Your API is FAIRFIED :-)
+          </p>
+          <button class="prev-button" nbButton nbStepperPrevious>prev</button>
+          <button class="next-button" nbButton disabled nbStepperNext>next</button>
+        </nb-step>
+      </nb-stepper>
+    </nb-card-body>
+  </nb-card>
\ No newline at end of file
diff --git a/src/app/publishapi/publishapi.component.scss b/src/app/publishapi/publishapi.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..b4051cfb62afc7cfb62edb1afaceae2cd9c4698c 100644
--- a/src/app/publishapi/publishapi.component.scss
+++ b/src/app/publishapi/publishapi.component.scss
@@ -0,0 +1,4 @@
+
+.prev-button {
+    margin-right: 1rem;
+  }
\ No newline at end of file
diff --git a/src/app/publishapi/publishapi.component.ts b/src/app/publishapi/publishapi.component.ts
index 4a088e58cecf15b5c55c37364871ba850173e20e..f3ed412022d7c2f0a6d2da45fe297c661d7aa69f 100644
--- a/src/app/publishapi/publishapi.component.ts
+++ b/src/app/publishapi/publishapi.component.ts
@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { Directive, ViewContainerRef } from '@angular/core';
+
+
+
 
 
 @Component({
@@ -6,11 +11,12 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './publishapi.component.html',
   styleUrls: ['./publishapi.component.scss']
 })
-export class PublishapiComponent implements OnInit {
+export class PublishApiComponent implements OnInit {
 
   constructor() { }
 
   ngOnInit(): void {
+  
   }
 
   goToLink()  {
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index aa5547fc617bc9e9230af4a0cbcfd666d7b1839f..c820110584e6d10e88653f7e5f659cbdf5322d80 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,9 +1,15 @@
+
 <form class="form-inline "[formGroup]="Form">
-    <input class="form-control" type="text" placeholder="Search" aria-label="Search" formControlName="keyword">
-    <button type="submit" (click)="simpleSearch()">Search</button>
+  <nb-card>
+    <nb-card-body class="example-items-col">  
+      <input class="form-control" type="text" nbInput shape="round" placeholder="Search" formControlName="keyword">
+      <p>
+        <button type="submit" (click)="simpleSearch()">Search</button>
+      </p>
+    </nb-card-body>
+  </nb-card>
   </form>
 
-
   <div *ngIf="!isXmlItemsEmpty()" class="w3-container">    
     <table class="w3-table-all w3-card-4">    
       <thead>    
@@ -15,7 +21,7 @@
         <tr *ngFor="let item of xmlItems">     
           <td><a href="{{item.uri.value}}" target="blank">{{item.uri.value}}</a></td>   
           <td>{{item.title.value}}</td>    
-          <td>{{item.description.value.substr(0,250) }}... </td>    
+          <td>{{item.description.value.substr(0,250)}}</td>    
       </tr>    
     </tbody>
     </table>    
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 354ae12c4778c9d1b35533c4cb58db6abd0bcf96..e6c43c6430a1d5f3d1752f6fb02c83dbedb51415 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -54,6 +54,7 @@ FILTER (contains( ?description, "'+ this.Form.value.keyword +'") || contains( ?t
 
       this.parserService.getXmlResult("http://10.6.10.9:8888/blazegraph/sparql",query).subscribe(
         data=>{
+          console.error("Datta :", data)
           if (data){
             data.results.bindings.forEach(element => {
               this.xmlItems.push(element);
diff --git a/src/app/user/model/user.ts b/src/app/user/model/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2e54524468f6ec4bd2b77412e33f62ed2555808
--- /dev/null
+++ b/src/app/user/model/user.ts
@@ -0,0 +1,4 @@
+export interface User {
+    email: string;
+    password: string;
+}
diff --git a/src/styles.scss b/src/styles.scss
index 34d6206b9ca9b6483377092497a66cac860ee3c1..3c4e4a3546289e5046b589caf285a69ceb86db39 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -78,3 +78,13 @@ textarea {
 * {
   font-family: Arial, Helvetica, sans-serif;
 }
+
+@import 'themes.scss';
+
+// framework component styles
+@import '~@nebular/theme/styles/globals';
+
+// install the framework styles
+@include nb-install() {
+  @include nb-theme-global();
+};
\ No newline at end of file
diff --git a/src/themes.scss b/src/themes.scss
new file mode 100644
index 0000000000000000000000000000000000000000..50c7f9a449521a29930ced702a58eb020f65372c
--- /dev/null
+++ b/src/themes.scss
@@ -0,0 +1,4 @@
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/default';
+@import '~@nebular/theme/styles/themes/dark';
+