diff --git a/apps/dafa-web/src/app/app-routing.module.ts b/apps/dafa-web/src/app/app-routing.module.ts
index 61dc66e..8b8bd94 100644
--- a/apps/dafa-web/src/app/app-routing.module.ts
+++ b/apps/dafa-web/src/app/app-routing.module.ts
@@ -1,59 +1,81 @@
 import { NgModule } from '@angular/core';
 import { ExtraOptions, RouterModule, Routes } from '@angular/router';
+import { environment } from '@dafa-environment';
 
 const routes: Routes = [
   {
     path: '',
     data: { title: '' },
-    loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule),
+    loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule)
   },
   {
     path: 'administration',
     data: { title: 'Administration' },
-    loadChildren: () => import('./pages/administration/administration.module').then(m => m.AdministrationModule),
+    loadChildren: () => import('./pages/administration/administration.module').then(m => m.AdministrationModule)
   },
   {
     path: 'mina-deltagare',
     data: { title: 'Mina deltagare' },
-    loadChildren: () => import('./pages/participants/participants.module').then(m => m.ParticipantsModule),
+    loadChildren: () => import('./pages/participants/participants.module').then(m => m.ParticipantsModule)
   },
   {
     path: 'avrop',
     data: { title: 'Avrop' },
-    loadChildren: () => import('./pages/call-off/call-off.module').then(m => m.CallOffModule),
+    loadChildren: () => import('./pages/call-off/call-off.module').then(m => m.CallOffModule)
   },
   {
     path: 'meddelanden',
     data: { title: 'Meddelanden' },
-    loadChildren: () => import('./pages/messages/messages.module').then(m => m.MessagesModule),
+    loadChildren: () => import('./pages/messages/messages.module').then(m => m.MessagesModule)
   },
   {
     path: 'statistik',
     data: { title: 'Statistik' },
-    loadChildren: () => import('./pages/statistics/statistics.module').then(m => m.StatisticsModule),
+    loadChildren: () => import('./pages/statistics/statistics.module').then(m => m.StatisticsModule)
   },
   {
     path: 'installningar',
     data: { title: 'Inställningar' },
-    loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsModule),
+    loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsModule)
   },
   {
     path: 'releases',
     data: { title: 'Releases' },
-    loadChildren: () => import('./pages/releases/releases.module').then(m => m.ReleasesModule),
+    loadChildren: () => import('./pages/releases/releases.module').then(m => m.ReleasesModule)
   },
   {
-    path: '**',
-    data: { title: 'Sidan hittas inte' },
-    loadChildren: () => import('./pages/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule),
+    path: 'ciam-landing',
+    data: { title: 'Ciam landing page' },
+    loadChildren: () => import('./pages/ciam-landing/ciam-landing.module').then(m => m.CiamLandingModule)
   },
+  {
+    path: 'logout',
+    data: { title: 'Ciam landing page' },
+    loadChildren: () => import('./pages/logout/logout.module').then(m => m.LogoutModule)
+  }
 ];
+
+if (!environment.production) {
+  routes.push({
+    path: 'mock-login',
+    data: { title: 'Mock login' },
+    loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule)
+  });
+}
+
+routes.push({
+  path: '**',
+  data: { title: 'Sidan hittas inte' },
+  loadChildren: () => import('./pages/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule)
+});
+
 const options: ExtraOptions = {
-  useHash: false,
+  useHash: false
 };
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, options)],
-  exports: [RouterModule],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}
diff --git a/apps/dafa-web/src/app/app.component.html b/apps/dafa-web/src/app/app.component.html
index 0eb7c8e..c26b887 100644
--- a/apps/dafa-web/src/app/app.component.html
+++ b/apps/dafa-web/src/app/app.component.html
@@ -1,19 +1,2 @@
-<div class="dafa">
-  <dafa-skip-to-content mainContentId="dafa-main-content"></dafa-skip-to-content>
 
-  <header class="dafa__header">
-    <dafa-navigation [currentUser]="currentUser$ | async"></dafa-navigation>
-  </header>
-
-  <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
-  <main id="dafa-main-content" class="dafa__content">
-    <digi-ng-navigation-breadcrumbs
-      class="dafa__breadcrumbs"
-      [afItems]="breadcrumbsItems"
-    ></digi-ng-navigation-breadcrumbs>
     <router-outlet></router-outlet>
-  </main>
-
-  <dafa-footer class="dafa__footer"></dafa-footer>
-</div>
-<dafa-toast-list></dafa-toast-list>
diff --git a/apps/dafa-web/src/app/app.component.scss b/apps/dafa-web/src/app/app.component.scss
index af305b3..e69de29 100644
--- a/apps/dafa-web/src/app/app.component.scss
+++ b/apps/dafa-web/src/app/app.component.scss
@@ -1,47 +0,0 @@
-@import 'variables/navigation';
-@import 'variables/breakpoints';
-@import 'variables/gutters';
-
-.dafa {
-  display: grid;
-  height: 100vh;
-  grid-template-columns: 15rem 1fr;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    'header header'
-    'sidebar content'
-    'footer footer';
-
-  // @media (min-width: $digi--layout--breakpoint--m) {
-  //   grid-template-rows: $dafa__navigation-height-large 1fr auto;
-  // }
-
-  &__header {
-    grid-area: header;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-
-  &__sidebar {
-    grid-area: sidebar;
-    background-color: var(--digi--ui--color--background--secondary);
-    border-right: 1px solid var(--digi--ui--color--background--off);
-  }
-
-  &__content {
-    grid-area: content;
-    padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl;
-  }
-
-  &__breadcrumbs {
-    display: block;
-    margin-bottom: var(--digi--layout--gutter);
-  }
-
-  &__footer {
-    grid-area: footer;
-    background-color: var(--digi--ui--color--primary);
-    min-height: 10rem;
-  }
-}
diff --git a/apps/dafa-web/src/app/app.component.ts b/apps/dafa-web/src/app/app.component.ts
index 33fabaf..2f19f01 100644
--- a/apps/dafa-web/src/app/app.component.ts
+++ b/apps/dafa-web/src/app/app.component.ts
@@ -1,12 +1,4 @@
-import { NavigationBreadcrumbsItem } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { User } from '@dafa-models/user.model';
-import { UserService } from '@dafa-services/api/user.service';
-import { mapPathsToBreadcrumbs } from '@dafa-utils/map-paths-to-breadcrumbs.util';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { UnsubscribeDirective } from './directives/unsubscribe.directive';
 
 @Component({
   selector: 'dafa-root',
@@ -14,30 +6,6 @@ import { UnsubscribeDirective } from './directives/unsubscribe.directive';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent extends UnsubscribeDirective {
-  private startBreadcrumb: NavigationBreadcrumbsItem = {
-    text: 'Start',
-    routerLink: '/',
-  };
-  private _breadcrumbsItems$ = new BehaviorSubject<NavigationBreadcrumbsItem[]>([this.startBreadcrumb]);
-  public currentUser$: Observable<User> = this.userService.currentUser$;
+export class AppComponent {
 
-  get breadcrumbsItems(): NavigationBreadcrumbsItem[] {
-    return this._breadcrumbsItems$.getValue();
-  }
-
-  constructor(private router: Router, private userService: UserService) {
-    super();
-    super.unsubscribeOnDestroy(
-      this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
-        const urlTree = this.router.parseUrl(this.router.url);
-        urlTree.queryParams = {};
-        const paths = urlTree
-          .toString()
-          .split('/')
-          .filter(path => !!path);
-        this._breadcrumbsItems$.next(mapPathsToBreadcrumbs(paths, this.startBreadcrumb));
-      })
-    );
-  }
 }
diff --git a/apps/dafa-web/src/app/app.module.ts b/apps/dafa-web/src/app/app.module.ts
index 4babeea..4aeaf35 100644
--- a/apps/dafa-web/src/app/app.module.ts
+++ b/apps/dafa-web/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { DigiNgNavigationBreadcrumbsModule } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { ErrorHandler, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
@@ -12,6 +12,7 @@ import { NavigationModule } from './components/navigation/navigation.module';
 import { SidebarModule } from './components/sidebar/sidebar.module';
 import { SkipToContentModule } from './components/skip-to-content/skip-to-content.module';
 import { ToastListModule } from './components/toast-list/toast-list.module';
+import { AuthInterceptor } from '@dafa-services/api/auth.interceptor';
 
 @NgModule({
   declarations: [AppComponent],
@@ -33,6 +34,7 @@ import { ToastListModule } from './components/toast-list/toast-list.module';
       provide: ErrorHandler,
       useClass: CustomErrorHandler,
     },
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
   ],
   bootstrap: [AppComponent],
 })
diff --git a/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.html b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.html
new file mode 100644
index 0000000..8052006
--- /dev/null
+++ b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.html
@@ -0,0 +1,21 @@
+<div class="dafa">
+  <dafa-skip-to-content mainContentId="dafa-main-content"></dafa-skip-to-content>
+
+  <header class="dafa__header">
+    <dafa-navigation *ngIf="isLoggedIn" [currentUser]="currentUser$ | async"></dafa-navigation>
+  </header>
+
+  <dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
+  <main id="dafa-main-content" class="dafa__content">
+    <digi-ng-navigation-breadcrumbs
+      class="dafa__breadcrumbs"
+      [afItems]="breadcrumbsItems"
+    ></digi-ng-navigation-breadcrumbs>
+
+      <ng-content></ng-content>
+
+  </main>
+
+  <dafa-footer class="dafa__footer"></dafa-footer>
+</div>
+<dafa-toast-list></dafa-toast-list>
diff --git a/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.scss b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.scss
new file mode 100644
index 0000000..af305b3
--- /dev/null
+++ b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.scss
@@ -0,0 +1,47 @@
+@import 'variables/navigation';
+@import 'variables/breakpoints';
+@import 'variables/gutters';
+
+.dafa {
+  display: grid;
+  height: 100vh;
+  grid-template-columns: 15rem 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    'header header'
+    'sidebar content'
+    'footer footer';
+
+  // @media (min-width: $digi--layout--breakpoint--m) {
+  //   grid-template-rows: $dafa__navigation-height-large 1fr auto;
+  // }
+
+  &__header {
+    grid-area: header;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  &__sidebar {
+    grid-area: sidebar;
+    background-color: var(--digi--ui--color--background--secondary);
+    border-right: 1px solid var(--digi--ui--color--background--off);
+  }
+
+  &__content {
+    grid-area: content;
+    padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl;
+  }
+
+  &__breadcrumbs {
+    display: block;
+    margin-bottom: var(--digi--layout--gutter);
+  }
+
+  &__footer {
+    grid-area: footer;
+    background-color: var(--digi--ui--color--primary);
+    min-height: 10rem;
+  }
+}
diff --git a/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.spec.ts b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.spec.ts
new file mode 100644
index 0000000..46bed5e
--- /dev/null
+++ b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoggedInShellComponent } from './logged-in-shell.component';
+
+describe('LoggedInShellComponent', () => {
+  let component: LoggedInShellComponent;
+  let fixture: ComponentFixture<LoggedInShellComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoggedInShellComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoggedInShellComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.ts b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.ts
new file mode 100644
index 0000000..973544c
--- /dev/null
+++ b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { NavigationBreadcrumbsItem } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { User } from '@dafa-models/user.model';
+import { NavigationEnd, Router } from '@angular/router';
+import { UserService } from '@dafa-services/api/user.service';
+import { filter } from 'rxjs/operators';
+import { mapPathsToBreadcrumbs } from '@dafa-utils/map-paths-to-breadcrumbs.util';
+import { UnsubscribeDirective } from '@dafa-directives/unsubscribe.directive';
+import { AuthenticationService } from '@dafa-services/api/authentication.service';
+import { environment } from '@dafa-environment';
+
+@Component({
+  selector: 'dafa-logged-in-shell',
+  templateUrl: './logged-in-shell.component.html',
+  styleUrls: ['./logged-in-shell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoggedInShellComponent extends UnsubscribeDirective {
+  private startBreadcrumb: NavigationBreadcrumbsItem = {
+    text: 'Start',
+    routerLink: '/',
+  };
+  private _breadcrumbsItems$ = new BehaviorSubject<NavigationBreadcrumbsItem[]>([this.startBreadcrumb]);
+  public currentUser$: Observable<User> = this.userService.currentUser$;
+
+  get breadcrumbsItems(): NavigationBreadcrumbsItem[] {
+    return this._breadcrumbsItems$.getValue();
+  }
+
+  get isLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
+  constructor(private router: Router, private authService: AuthenticationService, private userService: UserService) {
+    super();
+
+    if(this.authService.isLoggedOut()) {
+      this.router.navigateByUrl(environment.loginUrl);
+    }
+
+
+    super.unsubscribeOnDestroy(
+      this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+        const urlTree = this.router.parseUrl(this.router.url);
+        urlTree.queryParams = {};
+        const paths = urlTree
+          .toString()
+          .split('/')
+          .filter(path => !!path);
+        this._breadcrumbsItems$.next(mapPathsToBreadcrumbs(paths, this.startBreadcrumb));
+      })
+    );
+  }
+
+}
diff --git a/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.module.ts b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.module.ts
new file mode 100644
index 0000000..f24fc0a
--- /dev/null
+++ b/apps/dafa-web/src/app/components/logged-in-shell/logged-in-shell.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoggedInShellComponent } from './logged-in-shell.component';
+import { SkipToContentModule } from '../skip-to-content/skip-to-content.module';
+import { NavigationModule } from '../navigation/navigation.module';
+import { SidebarModule } from '../sidebar/sidebar.module';
+import { DigiNgNavigationBreadcrumbsModule } from '@af/digi-ng/_navigation/navigation-breadcrumbs';
+import { FooterModule } from '../footer/footer.module';
+import { ToastListModule } from '../toast-list/toast-list.module';
+
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SkipToContentModule,
+    NavigationModule,
+    SidebarModule,
+    DigiNgNavigationBreadcrumbsModule,
+    FooterModule,
+    ToastListModule
+  ],
+  declarations: [
+    LoggedInShellComponent
+  ],
+  exports: [
+    LoggedInShellComponent
+  ],
+})
+export class LoggedInShellModule { }
diff --git a/apps/dafa-web/src/app/data/models/authentication.model.ts b/apps/dafa-web/src/app/data/models/authentication.model.ts
new file mode 100644
index 0000000..8187b51
--- /dev/null
+++ b/apps/dafa-web/src/app/data/models/authentication.model.ts
@@ -0,0 +1,29 @@
+
+
+export interface AuthenticationResult {
+  idToken: string;
+  expiresIn: number;
+}
+
+export interface AuthenticationApiResponse {
+  data: AuthenticationApiResponseData;
+}
+
+export interface AuthenticationApiResponseData {
+  id: string;
+  access_token: string;
+  scope: string;
+  id_token: string;
+  token_type: string;
+  expires_in: number;
+}
+
+export function mapAuthApiResponseToAuthenticationResult(data: AuthenticationApiResponseData): AuthenticationResult {
+  const {
+    id_token,
+    expires_in } = data;
+  return {
+    idToken: id_token,
+    expiresIn: expires_in
+  };
+}
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
index 4ea2bbf..31e11dc 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html
@@ -1,3 +1,5 @@
+<dafa-logged-in-shell>
+
 <section class="employee-card">
   <digi-typography *ngIf="detailedEmployeeData$ | async as detailedEmployeeData; else loadingRef">
     <h1>{{ detailedEmployeeData.fullName }}</h1>
@@ -102,3 +104,4 @@
     <span class="dafa__a11y-sr-only">Info saknas</span>
   </dd>
 </ng-template>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
index ae246e2..ffbf5fd 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.module.ts
@@ -5,6 +5,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { EmployeeCardComponent } from './employee-card.component';
+import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +16,7 @@ import { EmployeeCardComponent } from './employee-card.component';
     DigiNgSkeletonBaseModule,
     DigiNgLayoutExpansionPanelModule,
     LocalDatePipeModule,
+    LoggedInShellModule
   ],
 })
 export class EmployeeCardModule {}
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html
index 78bfa3c..92fa89d 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.html
@@ -1,4 +1,5 @@
-<section class="employee-form">
+<dafa-logged-in-shell>
+  <section class="employee-form">
   <digi-typography>
     <h1>Skapa nytt konto</h1>
     <p>
@@ -117,3 +118,4 @@
     </div>
   </form>
 </section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.module.ts b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.module.ts
index 14bbc12..02e4dc8 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.module.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.module.ts
@@ -10,6 +10,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { EmployeeFormComponent } from './employee-form.component';
+import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -25,6 +26,7 @@ import { EmployeeFormComponent } from './employee-form.component';
     DigiNgFormSelectModule,
     DigiNgPopoverModule,
     DigiNgFormCheckboxModule,
-  ],
+    LoggedInShellModule
+  ]
 })
 export class EmployeeFormModule {}
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employees/employees.component.html b/apps/dafa-web/src/app/pages/administration/pages/employees/employees.component.html
index cb560d9..7320fd8 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employees/employees.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/employees/employees.component.html
@@ -1,38 +1,40 @@
-<section class="employees">
-  <digi-typography>
-    <h1>Personal</h1>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
-      rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum
-      leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
-    </p>
+<dafa-logged-in-shell>
+  <section class="employees">
+    <digi-typography>
+      <h1>Personal</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
+        rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum
+        leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
+      </p>
 
-    <div class="employees__cta-wrapper">
-      <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
-    </div>
+      <div class="employees__cta-wrapper">
+        <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
+      </div>
 
-    <h2>Personallista</h2>
+      <h2>Personallista</h2>
 
-    <form class="employees__search-wrapper" (ngSubmit)="handleSearchSubmit()">
-      <digi-form-input-search
-        af-label="Sök personal"
-        af-label-description="Sök på namn"
-        (afOnInput)="handleSearchInput($event)"
-      ></digi-form-input-search>
-    </form>
+      <form class="employees__search-wrapper" (ngSubmit)="handleSearchSubmit()">
+        <digi-form-input-search
+          af-label="Sök personal"
+          af-label-description="Sök på namn"
+          (afOnInput)="handleSearchInput($event)"
+        ></digi-form-input-search>
+      </form>
 
-    <dafa-employees-list
-      *ngIf="employeesData$ | async as employeesData; else loadingRef"
-      [employees]="employeesData.data"
-      [meta]="employeesData.meta"
-      [sort]="sort$ | async"
-      [order]="order$ | async"
-      (sorted)="handleEmployeesSort($event)"
-      (paginated)="setNewPage($event)"
-    ></dafa-employees-list>
-  </digi-typography>
+      <dafa-employees-list
+        *ngIf="employeesData$ | async as employeesData; else loadingRef"
+        [employees]="employeesData.data"
+        [meta]="employeesData.meta"
+        [sort]="sort$ | async"
+        [order]="order$ | async"
+        (sorted)="handleEmployeesSort($event)"
+        (paginated)="setNewPage($event)"
+      ></dafa-employees-list>
+    </digi-typography>
 
-  <ng-template #loadingRef>
-    <digi-ng-skeleton-base [afCount]="3" afText="Laddar personal"></digi-ng-skeleton-base>
-  </ng-template>
-</section>
+    <ng-template #loadingRef>
+      <digi-ng-skeleton-base [afCount]="3" afText="Laddar personal"></digi-ng-skeleton-base>
+    </ng-template>
+  </section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/administration/pages/employees/employees.module.ts b/apps/dafa-web/src/app/pages/administration/pages/employees/employees.module.ts
index 3a8f871..a8f0b64 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/employees/employees.module.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/employees/employees.module.ts
@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { EmployeesListModule } from './components/employees-list/employees-list.module';
 import { EmployeesComponent } from './employees.component';
+import { LoggedInShellModule } from '../../../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,6 +20,7 @@ import { EmployeesComponent } from './employees.component';
     EmployeesListModule,
     DigiNgLinkButtonModule,
     FormsModule,
-  ],
+    LoggedInShellModule
+  ]
 })
 export class EmployeesModule {}
diff --git a/apps/dafa-web/src/app/pages/call-off/call-off.component.html b/apps/dafa-web/src/app/pages/call-off/call-off.component.html
index b438022..f1b7f89 100644
--- a/apps/dafa-web/src/app/pages/call-off/call-off.component.html
+++ b/apps/dafa-web/src/app/pages/call-off/call-off.component.html
@@ -1 +1 @@
-<section class="call-off">Avrop funkar!</section>
+<dafa-logged-in-shell><section class="call-off">Avrop funkar!</section></dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/call-off/call-off.module.ts b/apps/dafa-web/src/app/pages/call-off/call-off.module.ts
index 0948d2d..91e5913 100644
--- a/apps/dafa-web/src/app/pages/call-off/call-off.module.ts
+++ b/apps/dafa-web/src/app/pages/call-off/call-off.module.ts
@@ -2,9 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CallOffComponent } from './call-off.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   declarations: [CallOffComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: CallOffComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: CallOffComponent }]), LoggedInShellModule]
 })
 export class CallOffModule {}
diff --git a/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.html b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.html
new file mode 100644
index 0000000..e34d547
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.html
@@ -0,0 +1,7 @@
+<digi-typography>
+  <section class="releases">
+    <h1>Ciam landing</h1>
+
+<p>Redirecting to /......</p>
+  </section>
+</digi-typography>
diff --git a/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.scss b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.spec.ts b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.spec.ts
new file mode 100644
index 0000000..c96abde
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CiamLandingComponent } from './ciam-landing.component';
+
+describe('ReleasesComponent', () => {
+  let component: CiamLandingComponent;
+  let fixture: ComponentFixture<CiamLandingComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+        declarations: [CiamLandingComponent],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CiamLandingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.ts b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.ts
new file mode 100644
index 0000000..58f6242
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.component.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { first, map, switchMap } from 'rxjs/operators';
+import { AuthenticationService } from '@dafa-services/api/authentication.service';
+
+@Component({
+  selector: 'dafa-ciam-landing',
+  templateUrl: './ciam-landing.component.html',
+  styleUrls: ['./ciam-landing.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CiamLandingComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private authenticationService: AuthenticationService
+              ) {
+
+  }
+
+  ngOnInit() {
+    this.route.queryParams.pipe(
+      first(),
+      map(({code}) => {
+        if (!code) {
+          throw new Error('Expected CIAM to return \'code\' in queryparams.');
+        }
+        return code as string;
+      }),
+      switchMap(code => {
+        return this.authenticationService.login$(code)
+      }))
+      .subscribe(() => {
+        this.router.navigateByUrl('/')
+      })
+    ;
+  }
+}
diff --git a/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.module.ts b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.module.ts
new file mode 100644
index 0000000..41d617c
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/ciam-landing/ciam-landing.module.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CiamLandingComponent } from './ciam-landing.component';
+import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [CiamLandingComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: CiamLandingComponent }]),
+    DigiNgButtonModule
+  ]
+})
+export class CiamLandingModule {}
diff --git a/apps/dafa-web/src/app/pages/logout/logout.component.html b/apps/dafa-web/src/app/pages/logout/logout.component.html
new file mode 100644
index 0000000..ad20afd
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/logout/logout.component.html
@@ -0,0 +1,8 @@
+<digi-typography>
+  <section class="logout">
+    <h1>Du har nu loggats ut</h1>
+    <p>
+      <a [routerLink]="loginUrl">Logga in</a>
+    </p>
+  </section>
+</digi-typography>
diff --git a/apps/dafa-web/src/app/pages/logout/logout.component.scss b/apps/dafa-web/src/app/pages/logout/logout.component.scss
new file mode 100644
index 0000000..d1f202d
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/logout/logout.component.scss
@@ -0,0 +1,3 @@
+.logout  {
+  margin: 3rem;
+}
diff --git a/apps/dafa-web/src/app/pages/logout/logout.component.spec.ts b/apps/dafa-web/src/app/pages/logout/logout.component.spec.ts
new file mode 100644
index 0000000..0cbe5dc
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/logout/logout.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { LogoutComponent } from './logout.component';
+
+describe('ReleasesComponent', () => {
+  let component: LogoutComponent;
+  let fixture: ComponentFixture<LogoutComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+        declarations: [LogoutComponent],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/dafa-web/src/app/pages/logout/logout.component.ts b/apps/dafa-web/src/app/pages/logout/logout.component.ts
new file mode 100644
index 0000000..9a0aa0f
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/logout/logout.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { environment } from '@dafa-environment';
+import { AuthenticationService } from '@dafa-services/api/authentication.service';
+
+@Component({
+  selector: 'dafa-logout',
+  templateUrl: './logout.component.html',
+  styleUrls: ['./logout.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LogoutComponent implements OnInit {
+  loginUrl = environment.loginUrl;
+
+  constructor(
+              private authenticationService: AuthenticationService
+  ) {
+
+  }
+
+  ngOnInit(): void {
+    this.authenticationService.logout();
+  }
+}
diff --git a/apps/dafa-web/src/app/pages/logout/logout.module.ts b/apps/dafa-web/src/app/pages/logout/logout.module.ts
new file mode 100644
index 0000000..63648f9
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/logout/logout.module.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LogoutComponent } from './logout.component';
+import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [LogoutComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: LogoutComponent }]),
+    DigiNgButtonModule
+  ]
+})
+export class LogoutModule {}
diff --git a/apps/dafa-web/src/app/pages/messages/messages.component.html b/apps/dafa-web/src/app/pages/messages/messages.component.html
index 3b4f79e..2309584 100644
--- a/apps/dafa-web/src/app/pages/messages/messages.component.html
+++ b/apps/dafa-web/src/app/pages/messages/messages.component.html
@@ -1 +1,4 @@
+
+<dafa-logged-in-shell>
 <section class="messages">Meddelanden funkar!</section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/messages/messages.module.ts b/apps/dafa-web/src/app/pages/messages/messages.module.ts
index c54dc89..e8e9c2c 100644
--- a/apps/dafa-web/src/app/pages/messages/messages.module.ts
+++ b/apps/dafa-web/src/app/pages/messages/messages.module.ts
@@ -2,9 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { MessagesComponent } from './messages.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   declarations: [MessagesComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: MessagesComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: MessagesComponent }]), LoggedInShellModule]
 })
 export class MessagesModule {}
diff --git a/apps/dafa-web/src/app/pages/mock-login/mock-login.component.html b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.html
new file mode 100644
index 0000000..d7b6a2e
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.html
@@ -0,0 +1,9 @@
+<digi-typography>
+  <section class="login__wrapper">
+    <h1>Mock login</h1>
+    <p>Simulera att man loggar in och blir redirectad till /ciam-landing med en Authorization-code som sedan används för att hämta authentication-token:</p>
+    <digi-ng-button [routerLink]="'/ciam-landing'" [queryParams]="{code: 'auth_code_from_CIAM_with_all_permissions'}">
+      Logga in med fullständiga rättigheter
+    </digi-ng-button>
+  </section>
+</digi-typography>
diff --git a/apps/dafa-web/src/app/pages/mock-login/mock-login.component.scss b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.scss
new file mode 100644
index 0000000..e820ff6
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.scss
@@ -0,0 +1,3 @@
+.login__wrapper {
+  margin: 5rem;
+}
diff --git a/apps/dafa-web/src/app/pages/mock-login/mock-login.component.spec.ts b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.spec.ts
new file mode 100644
index 0000000..bab4209
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MockLoginComponent } from './mock-login.component';
+
+describe('ReleasesComponent', () => {
+  let component: MockLoginComponent;
+  let fixture: ComponentFixture<MockLoginComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+        declarations: [MockLoginComponent],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MockLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/dafa-web/src/app/pages/mock-login/mock-login.component.ts b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.ts
new file mode 100644
index 0000000..9c69f68
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/mock-login/mock-login.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'dafa-mock-login',
+  templateUrl: './mock-login.component.html',
+  styleUrls: ['./mock-login.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MockLoginComponent {}
diff --git a/apps/dafa-web/src/app/pages/mock-login/mock-login.module.ts b/apps/dafa-web/src/app/pages/mock-login/mock-login.module.ts
new file mode 100644
index 0000000..60895df
--- /dev/null
+++ b/apps/dafa-web/src/app/pages/mock-login/mock-login.module.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MockLoginComponent } from './mock-login.component';
+import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [MockLoginComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: MockLoginComponent }]),
+    DigiNgButtonModule
+  ]
+})
+export class MockLoginModule {}
diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
index d86cccc..ef8fed3 100644
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
@@ -1,3 +1,4 @@
+<dafa-logged-in-shell>
 <digi-typography>
   <section class="page-not-found">
     <h1>Oj då! Vi kan inte hitta sidan.</h1>
@@ -8,3 +9,4 @@
     </a>
   </section>
 </digi-typography>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
index 29c6630..0535a2b 100644
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { PageNotFoundComponent } from './page-not-found.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [PageNotFoundComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: PageNotFoundComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]), LoggedInShellModule]
 })
 export class PageNotFoundModule {}
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.html b/apps/dafa-web/src/app/pages/participants/participants.component.html
index 974383d..90ca0de 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.html
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.html
@@ -1,3 +1,4 @@
+<dafa-logged-in-shell>
 <section class="participants">
   <digi-typography>
     <h1>Mina deltagare</h1>
@@ -40,3 +41,4 @@
     <digi-ng-skeleton-base [afCount]="3" afText="Laddar deltagare"></digi-ng-skeleton-base>
   </ng-template>
 </section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/participants/participants.module.ts b/apps/dafa-web/src/app/pages/participants/participants.module.ts
index 7f81f72..b6d6c7c 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.module.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.module.ts
@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ParticipantsListModule } from './components/participants-list/participants-list.module';
 import { ParticipantsComponent } from './participants.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +16,7 @@ import { ParticipantsComponent } from './participants.component';
     FormsModule,
     DigiNgSkeletonBaseModule,
     ParticipantsListModule,
-  ],
+    LoggedInShellModule
+  ]
 })
 export class ParticipantsModule {}
diff --git a/apps/dafa-web/src/app/pages/releases/releases.component.html b/apps/dafa-web/src/app/pages/releases/releases.component.html
index 08511b9..620d774 100644
--- a/apps/dafa-web/src/app/pages/releases/releases.component.html
+++ b/apps/dafa-web/src/app/pages/releases/releases.component.html
@@ -1,3 +1,4 @@
+<dafa-logged-in-shell>
 <digi-typography>
   <section class="releases">
     <h1>Releaser</h1>
@@ -8,3 +9,4 @@
     <markdown src="assets/CHANGELOG.md"></markdown>
   </section>
 </digi-typography>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/releases/releases.module.ts b/apps/dafa-web/src/app/pages/releases/releases.module.ts
index ad03e9d..b69c07a 100644
--- a/apps/dafa-web/src/app/pages/releases/releases.module.ts
+++ b/apps/dafa-web/src/app/pages/releases/releases.module.ts
@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { MarkdownModule } from 'ngx-markdown';
 import { ReleasesComponent } from './releases.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -11,6 +12,7 @@ import { ReleasesComponent } from './releases.component';
     CommonModule,
     MarkdownModule.forChild(),
     RouterModule.forChild([{ path: '', component: ReleasesComponent }]),
-  ],
+    LoggedInShellModule
+  ]
 })
 export class ReleasesModule {}
diff --git a/apps/dafa-web/src/app/pages/settings/settings.component.html b/apps/dafa-web/src/app/pages/settings/settings.component.html
index 2859354..b086b26 100644
--- a/apps/dafa-web/src/app/pages/settings/settings.component.html
+++ b/apps/dafa-web/src/app/pages/settings/settings.component.html
@@ -1 +1,3 @@
+<dafa-logged-in-shell>
 <section class="settings">Inställningar funkar!</section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/settings/settings.module.ts b/apps/dafa-web/src/app/pages/settings/settings.module.ts
index 2399f2d..7f9eacc 100644
--- a/apps/dafa-web/src/app/pages/settings/settings.module.ts
+++ b/apps/dafa-web/src/app/pages/settings/settings.module.ts
@@ -2,9 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SettingsComponent } from './settings.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   declarations: [SettingsComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: SettingsComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: SettingsComponent }]), LoggedInShellModule]
 })
 export class SettingsModule {}
diff --git a/apps/dafa-web/src/app/pages/start/start.component.html b/apps/dafa-web/src/app/pages/start/start.component.html
index 40b0705..3442db5 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.html
+++ b/apps/dafa-web/src/app/pages/start/start.component.html
@@ -1,3 +1,4 @@
+<dafa-logged-in-shell>
 <section class="start">
   <digi-typography>
     <h1>Välkommen till Mina Sidor FA</h1>
@@ -32,3 +33,4 @@
     </div>
   </div>
 </section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/start/start.module.ts b/apps/dafa-web/src/app/pages/start/start.module.ts
index 7e029d1..a21182f 100644
--- a/apps/dafa-web/src/app/pages/start/start.module.ts
+++ b/apps/dafa-web/src/app/pages/start/start.module.ts
@@ -5,6 +5,7 @@ import { StartComponent } from './start.component';
 import { DigiNgCardModule } from '@af/digi-ng/_card/card';
 import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
 import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +16,7 @@ import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
     DigiNgCardModule,
     DigiNgNotificationAlertModule,
     DigiNgLinkInternalModule,
-  ],
+    LoggedInShellModule
+  ]
 })
 export class StartModule {}
diff --git a/apps/dafa-web/src/app/pages/statistics/statistics.component.html b/apps/dafa-web/src/app/pages/statistics/statistics.component.html
index 361d237..265451c 100644
--- a/apps/dafa-web/src/app/pages/statistics/statistics.component.html
+++ b/apps/dafa-web/src/app/pages/statistics/statistics.component.html
@@ -1 +1,3 @@
-<section class="statistics">Statistik funkar!</section>
+<dafa-logged-in-shell>
+  <section class="statistics">Statistik funkar!</section>
+</dafa-logged-in-shell>
diff --git a/apps/dafa-web/src/app/pages/statistics/statistics.module.ts b/apps/dafa-web/src/app/pages/statistics/statistics.module.ts
index 78a2992..32a1998 100644
--- a/apps/dafa-web/src/app/pages/statistics/statistics.module.ts
+++ b/apps/dafa-web/src/app/pages/statistics/statistics.module.ts
@@ -2,9 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StatisticsComponent } from './statistics.component';
+import { LoggedInShellModule } from '../../components/logged-in-shell/logged-in-shell.module';
 
 @NgModule({
   declarations: [StatisticsComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StatisticsComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StatisticsComponent }]), LoggedInShellModule]
 })
 export class StatisticsModule {}
diff --git a/apps/dafa-web/src/app/services/api/auth.interceptor.ts b/apps/dafa-web/src/app/services/api/auth.interceptor.ts
new file mode 100644
index 0000000..6278f98
--- /dev/null
+++ b/apps/dafa-web/src/app/services/api/auth.interceptor.ts
@@ -0,0 +1,25 @@
+import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { AuthenticationService } from './authentication.service';
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+
+  constructor(private auth: AuthenticationService) {
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const idToken = this.auth.getAuthorizationToken();
+
+    if (idToken) {
+      const cloned = req.clone({
+        headers: req.headers.set('Authorization', 'Bearer ' + idToken)
+      });
+
+      return next.handle(cloned);
+    }
+    else {
+      return next.handle(req);
+    }
+  }
+}
diff --git a/apps/dafa-web/src/app/services/api/authentication.service.ts b/apps/dafa-web/src/app/services/api/authentication.service.ts
new file mode 100644
index 0000000..ed74c48
--- /dev/null
+++ b/apps/dafa-web/src/app/services/api/authentication.service.ts
@@ -0,0 +1,67 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '@dafa-environment';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import {
+  AuthenticationApiResponse,
+  AuthenticationResult,
+  mapAuthApiResponseToAuthenticationResult
+} from '@dafa-models/authentication.model';
+import { add, isBefore } from 'date-fns';
+
+const API_HEADERS = { headers: environment.api.headers };
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationService {
+  private static _authTokenApiUrl(code: string): string {
+    return `${environment.api.url}/get-token?code=${code}`;
+  };
+
+  private static _setSession(authenticationResult: AuthenticationResult): void {
+    const expiresAt = add(new Date(), { seconds: authenticationResult.expiresIn });
+
+    localStorage.setItem('id_token', authenticationResult.idToken);
+    localStorage.setItem('expires_at', JSON.stringify(expiresAt.valueOf()));
+  }
+
+  login$(authorizationCodeFromCiam: string): Observable<AuthenticationResult> {
+    return this.httpClient
+      .get<AuthenticationApiResponse>(AuthenticationService._authTokenApiUrl(authorizationCodeFromCiam), API_HEADERS)
+      .pipe(
+        map(response => mapAuthApiResponseToAuthenticationResult(response.data)),
+        tap(authenticationResult => {
+          AuthenticationService._setSession(authenticationResult);
+        })
+      );
+  }
+
+  isLoggedIn(): boolean {
+    return isBefore(new Date(), this.getExpiration());
+  }
+
+  isLoggedOut(): boolean {
+    return !this.isLoggedIn();
+  }
+
+  getAuthorizationToken(): string {
+    return localStorage.getItem('id_token');
+  }
+
+  getExpiration(): number {
+    const expiration = localStorage.getItem('expires_at');
+    const expiresAt = JSON.parse(expiration);
+    return expiresAt;
+  }
+
+  constructor(private httpClient: HttpClient) {
+  }
+
+  logout(): void {
+    localStorage.removeItem('id_token');
+    localStorage.removeItem('expires_at');
+  }
+
+}
diff --git a/apps/dafa-web/src/environments/environment.dotnet.ts b/apps/dafa-web/src/environments/environment.dotnet.ts
index 9d92cce..47cd923 100644
--- a/apps/dafa-web/src/environments/environment.dotnet.ts
+++ b/apps/dafa-web/src/environments/environment.dotnet.ts
@@ -1,4 +1,5 @@
 export const environment = {
+  loginUrl: 'https://ciam-test.arbetsformedlingen.se:8443/uas/oauth2/authorization?response_type=code&scope=openid&redirect_uri=https://localhost:4200/ciam-landing&client_id=5d08c2e4-763e-42f6-b858-24e4773bb83d',
   production: false,
   api: {
     url: '/api',
diff --git a/apps/dafa-web/src/environments/environment.prod.ts b/apps/dafa-web/src/environments/environment.prod.ts
index 9be669f..ac00319 100644
--- a/apps/dafa-web/src/environments/environment.prod.ts
+++ b/apps/dafa-web/src/environments/environment.prod.ts
@@ -1,4 +1,5 @@
 export const environment = {
+  loginUrl: 'https://ciam.arbetsformedlingen.se/',
   production: true,
   api: {
     url: '/api',
diff --git a/apps/dafa-web/src/environments/environment.ts b/apps/dafa-web/src/environments/environment.ts
index 9d92cce..81f8077 100644
--- a/apps/dafa-web/src/environments/environment.ts
+++ b/apps/dafa-web/src/environments/environment.ts
@@ -1,4 +1,5 @@
 export const environment = {
+  loginUrl: 'mock-login',
   production: false,
   api: {
     url: '/api',
diff --git a/mock-api/dafa-web/scripts/auth-tokens.js b/mock-api/dafa-web/scripts/auth-tokens.js
new file mode 100644
index 0000000..773ecb6
--- /dev/null
+++ b/mock-api/dafa-web/scripts/auth-tokens.js
@@ -0,0 +1,11 @@
+export const authTokens =
+  {
+    'auth_code_from_CIAM_with_all_permissions': {
+      'access_token': 'eyJjdHkiOiJKV1QiLCJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2IiwiemlwIjoiREVGIiwiaXNzIjoiNWQwOGMyZTQtNzYzZS00MmY2LWI4NTgtMjRlNDc3M2JiODNkIn0..nRvvEEjT1ZID5k0x-hf5oA.ZG0e16C7qIAgxKCemu6OppwyKSkCfJ9pnb-9kcTYa0ikntd5IYiF7hLmG5sUK9gmE-BBTeYd2CJ-YgG3HBfqvAmEnlHu1Nr-KjupR6z4fxvxkhrwuDCEPFMYElBsnwiMHyO3jdKQ4E9ET5eIDWwq3cVGIOj3dvrn-T87KS4_sLomOsY1NQvYgQrmjhmSqQXyRFKf53_nwjm6GcMPuz3z5JMv0i7Uy0qGC-OozmpG5O_CQjLRIP26J7N-yYtltWGkzgEbF7sCnTP4Xw6YOUXMGGqEbTYCsZxTfgkDjXUzfwq4M8TyjJ4fAAIJp_BU6tZRXuMdq4jlVFMDL0aubC_lqg.3XiXLQ5TqUryZ0R-562K7g',
+      'scope': 'openid',
+      'id_token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IjhJQWUyXzRjRE5JOEZHdjZSYVlOY2hYdDRJUSJ9.eyJzdWIiOiJjbj0wYzE1YmQxNy05NjM0LTQxZjAtYmJhYy0zNjJmY2NiNmRjMzQsb3U9VXNlcnMsb3U9ZUlETSBVc2Vycyxjbj1VYmlsb2dpbixkYz1jaWFtLXRlc3QsZGM9YXJiZXRzZm9ybWVkbGluZ2VuLGRjPXNlIiwiaXNzIjoiaHR0cHM6Ly9jaWFtLXRlc3QuYXJiZXRzZm9ybWVkbGluZ2VuLnNlOjg0NDMvdWFzIiwiYXVkIjpbIjVkMDhjMmU0LTc2M2UtNDJmNi1iODU4LTI0ZTQ3NzNiYjgzZCJdLCJleHAiOjE2MjMxNDkwMTYsImlhdCI6MTYyMzE0NTQyOSwiYXV0aF90aW1lIjoxNjIzMTQ1NDE2LCJhY3IiOiIyIiwiYW1yIjpbImh0dHBzOi8vY2lhbS10ZXN0LmFyYmV0c2Zvcm1lZGxpbmdlbi5zZTo4NDQzL3Vhcy9zYW1sMi9uYW1lcy9hYy9wYXNzd29yZC4yIl0sImF6cCI6IjVkMDhjMmU0LTc2M2UtNDJmNi1iODU4LTI0ZTQ3NzNiYjgzZCIsInNlc3Npb25faW5kZXgiOiJfYTM5NTM1MjlmYjk1N2Q0MTU4MzM4ZDI3MGJlMDQxNDVkNTNhYjkxOCIsIm1pbm9yaW5mb2F0dHJpYnV0ZSI6IlRob21hcyJ9.M9Y74kj4h1M7ONsfyOAn0cAe5uGwO5JYzmqTMsykmxJeSeWYZDP8u4KA9F6mO9rdpnjH9AAU0oEBtkxe14xMJIBVbtaljQuwuZSQ4mFYaJDiEG-NfEsmt6-WXK6hoNrH32qAWZ_fFNRTljwvqD0wUOH5jxBsRJlhcv9JKt6FQElChjMhuNHAX9M2f7DK17bx-VFhMkbwwmpc12dwEYIE1ejfrzBabhDAqysRCGV_TiWEZmKzPAPO-xYHOFQHeEwQZhsMPF8g96blqHIPDpgDlH20KwvysYqunJmlj8HkjzFXKbMHN-zkb-yJa22ioluhgcfCGIvroFZgo3o1zd0DPA',
+      'token_type': 'Bearer',
+      'expires_in': 3600
+    }
+  };
+
diff --git a/mock-api/dafa-web/scripts/generate-api.js b/mock-api/dafa-web/scripts/generate-api.js
index 99a5a8c..a5906cd 100644
--- a/mock-api/dafa-web/scripts/generate-api.js
+++ b/mock-api/dafa-web/scripts/generate-api.js
@@ -7,6 +7,7 @@ import languages from './languages.js';
 import organizations from './organizations.js';
 import participants from './participants.js';
 import services from './services.js';
+import { authTokens } from './auth-tokens.js';
 
 const generatedEmployees = employees.generate(50);
 
@@ -22,6 +23,7 @@ const apiData = {
   })),
   currentUser: currentUser.generate(),
   authorizations: authorizations.generate(),
+  getTokenFullAccess: authTokens.auth_code_from_CIAM_with_all_permissions
 };
 
 fs.writeFileSync('api.json', JSON.stringify(apiData, null, '\t'));
diff --git a/mock-api/dafa-web/server.js b/mock-api/dafa-web/server.js
index e520d3e..f04cc1d 100644
--- a/mock-api/dafa-web/server.js
+++ b/mock-api/dafa-web/server.js
@@ -19,10 +19,17 @@ server.use(
     '*limit=*': '$1_limit=$2',
     '*sort=*': '$1_sort=$2',
     '*order=*': '$1_order=$2',
+    '/get-token?code=auth_code_from_CIAM_with_all_permissions': '/getTokenFullAccess',
   })
 );
 
 router.render = (req, res) => {
+
+  // all paths except getToken requires Authorization header.
+  if (!req._parsedUrl.pathname.includes('getToken') && !req.headers.authorization) {
+    return res.status(401).jsonp({ error: "No valid access-token" });
+  }
+
   const params = new URLSearchParams(req._parsedUrl.query);
 
   // Add createdAt to the body
diff --git a/package-lock.json b/package-lock.json
index 442cf83..c9c314b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@digi/core": "^9.1.0",
         "@digi/styles": "^6.0.2",
         "@nrwl/angular": "11.5.1",
+        "date-fns": "^2.22.1",
         "ngx-markdown": "^11.1.3",
         "rxjs": "~6.6.3",
         "tslib": "^2.0.0",
@@ -8479,11 +8480,16 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.21.1",
-      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/date-fns/-/date-fns-2.21.1.tgz",
-      "integrity": "sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA==",
+      "version": "2.22.1",
+      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
       }
     },
     "node_modules/dateformat": {
@@ -39666,9 +39672,9 @@
       }
     },
     "date-fns": {
-      "version": "2.21.1",
-      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/date-fns/-/date-fns-2.21.1.tgz",
-      "integrity": "sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA=="
+      "version": "2.22.1",
+      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
     },
     "dateformat": {
       "version": "3.0.3",
diff --git a/package.json b/package.json
index e33f9c5..4fa4a80 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@digi/core": "^9.1.0",
     "@digi/styles": "^6.0.2",
     "@nrwl/angular": "11.5.1",
+    "date-fns": "^2.22.1",
     "ngx-markdown": "^11.1.3",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",