diff --git a/apps/mina-sidor-fa/src/app/components/toast-list/toast-list.component.scss b/apps/mina-sidor-fa/src/app/components/toast-list/toast-list.component.scss
index 6a05f5e..b2c65c5 100644
--- a/apps/mina-sidor-fa/src/app/components/toast-list/toast-list.component.scss
+++ b/apps/mina-sidor-fa/src/app/components/toast-list/toast-list.component.scss
@@ -1,9 +1,10 @@
 @import 'mixins/list';
+@import 'variables/z-index';
 
 .toast-list {
   position: fixed;
   pointer-events: none;
-  z-index: 9999;
+  z-index: $msfa__z-index-toast;
   margin: var(--digi--layout--gutter);
   top: 0;
   right: 0;
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss
index bd77db6..5226785 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss
@@ -2,6 +2,8 @@
 @import 'variables/gutters';
 
 .employee-form {
+  position: relative;
+
   &__header {
     display: flex;
     justify-content: space-between;
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
index 3cfc5de..7eff9f3 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
@@ -1,5 +1,5 @@
 <div class="employees-list">
-  <msfa-loader *ngIf="employeesLoading" [fullScreen]="true"></msfa-loader>
+  <msfa-loader *ngIf="employeesLoading" type="absolute"></msfa-loader>
   <digi-table af-variation="secondary">
     <table>
       <thead>
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss
index 1495d86..cc16cab 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss
@@ -1,4 +1,5 @@
 @import 'variables/gutters';
+@import 'variables/z-index';
 
 .avrop {
   &__header {
@@ -16,6 +17,10 @@
     margin-bottom: $digi--layout--gutter--xl;
   }
 
+  &__progress-bar {
+    z-index: $msfa__z-index-default;
+  }
+
   &__select-handledare {
     max-width: var(--digi--typography--text--max-width);
     margin-bottom: $digi--layout--gutter--xl;
diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.component.html b/apps/mina-sidor-fa/src/app/pages/start/start.component.html
index 5ac8587..6faa074 100644
--- a/apps/mina-sidor-fa/src/app/pages/start/start.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/start/start.component.html
@@ -3,18 +3,18 @@
     <section class="start">
       <header class="start__header">
         <div class="start__image-wrapper">
-          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
           <digi-media-image
             af-src="/assets/images/start_1280w.jpg"
             af-srcset="
               assets/images/start_600w.jpg  800w,
               assets/images/start_800w.jpg  1050w,
               assets/images/start_1000w.jpg 1200w
-            "
+              "
             af-alt="En kvinna som tittar i kameran"
             af-width="1000"
             af-height="465"
           ></digi-media-image>
+          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
         </div>
         <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
           <p>
@@ -36,5 +36,5 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <msfa-loader [fullScreen]="true"></msfa-loader>
+  <msfa-loader type="full-screen"></msfa-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.component.scss b/apps/mina-sidor-fa/src/app/pages/start/start.component.scss
index 615973e..3dacda6 100644
--- a/apps/mina-sidor-fa/src/app/pages/start/start.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/start/start.component.scss
@@ -15,6 +15,5 @@
     background-color: var(--digi--ui--color--complementary-alt);
     color: var(--digi--typography--color--text--light);
     padding: $digi--layout--gutter--s $digi--layout--gutter--l;
-    z-index: 1;
   }
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
index 37a0e7f..4239dc0 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/sidebar/sidebar.component.scss
@@ -1,14 +1,15 @@
+@import 'mixins/list';
 @import 'variables/colors';
 @import 'variables/gutters';
 @import 'variables/navigation';
-@import 'mixins/list';
+@import 'variables/z-index';
 
 .sidebar {
   display: flex;
   flex-direction: column;
   position: sticky;
   top: $msfa__navigation-height;
-  z-index: 1;
+  z-index: $msfa__z-index-sidebar;
 
   &__list {
     @include msfa__reset-list;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.scss
index 90b6913..5393c28 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/components/skip-to-content/skip-to-content.component.scss
@@ -1,4 +1,5 @@
 @import 'variables/colors';
+@import 'variables/z-index';
 
 .skip-to-content {
   position: absolute;
@@ -8,7 +9,7 @@
   width: 0;
   height: 0;
   overflow: hidden;
-  z-index: 1000;
+  z-index: $msfa__z-index-skip-to-content;
   text-align: center;
   padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
   display: block;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
index 2851d8d..b2bf10b 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
@@ -19,4 +19,4 @@
   <msfa-footer class="msfa__footer"></msfa-footer>
 </div>
 
-<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" [fullScreen]="true"></msfa-loader>
+<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" type="full-screen"></msfa-loader>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss
index e92068e..c6df3c9 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.scss
@@ -1,6 +1,7 @@
-@import 'variables/navigation';
 @import 'variables/breakpoints';
 @import 'variables/gutters';
+@import 'variables/navigation';
+@import 'variables/z-index';
 
 .msfa {
   position: relative;
@@ -17,7 +18,7 @@
     grid-area: header;
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: $msfa__z-index-header;
   }
 
   &__sidebar {
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
index 9fc28a8..85cdb76 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
@@ -1,4 +1,5 @@
 @import 'mixins/backdrop';
+@import 'variables/z-index';
 
 @keyframes spinning {
   to {
@@ -11,8 +12,12 @@
   align-items: center;
   justify-content: center;
 
+  &--absolute {
+    @include msfa__backdrop($msfa__z-index-backdrop, false);
+  }
+
   &--full-screen {
-    @include msfa__backdrop(1000);
+    @include msfa__backdrop($msfa__z-index-backdrop);
   }
 
   &__spinner {
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
index c2c0195..0a4b831 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { LoaderType } from '@msfa-enums/loader-type.enum';
 
 @Component({
   selector: 'msfa-loader',
@@ -8,11 +9,11 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class LoaderComponent {
   private readonly _defaultClass = 'loader';
-  @Input() fullScreen = false;
+  @Input() type: LoaderType;
 
   get classes(): string {
-    if (this.fullScreen) {
-      return `${this._defaultClass} ${this._defaultClass}--full-screen`;
+    if (this.type) {
+      return `${this._defaultClass} ${this._defaultClass}--${this.type as string}`;
     }
     return this._defaultClass;
   }
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss
index 1691c97..2b650b7 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss
@@ -30,7 +30,6 @@
 
   &__clear-btn {
     position: absolute;
-    z-index: 20;
     right: 0;
     top: 0;
     display: block;
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
index 8692a87..708eb7f 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
+++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.scss
@@ -1,11 +1,11 @@
-@import 'variables/colors';
 @import 'mixins/list';
+@import 'variables/colors';
 @import 'variables/gutters';
+@import 'variables/z-index';
 
 .tree-nodes-selector {
   &__panel-wrapper {
     position: relative;
-    z-index: 1;
   }
 
   &__toggle-panel-btn {
@@ -21,7 +21,6 @@
     font-size: var(--digi--typography--font-size--m);
     color: var(--digi--ui--color--background--overlay--opaque);
     background-color: var(--digi--ui--color--background);
-    z-index: 1;
 
     &:focus {
       border-color: var(--digi--ui--color--focus--light);
@@ -60,7 +59,7 @@
 
   &__panel {
     position: absolute;
-    z-index: 10;
+    z-index: $msfa__z-index-selector-panel;
     top: 100%;
     left: 0;
     margin-top: $digi--layout--gutter--xs;
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts
new file mode 100644
index 0000000..bcc91e2
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts
@@ -0,0 +1,4 @@
+export enum LoaderType {
+  FULL_SCREEN = 'fullscreen',
+  ABSOLUTE = 'absolute',
+}
diff --git a/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss b/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
index e0e37e9..c96f9c0 100644
--- a/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
+++ b/apps/mina-sidor-fa/src/styles/mixins/_backdrop.scss
@@ -1,9 +1,16 @@
-@mixin msfa__backdrop($zIndex: 0) {
-  position: absolute;
+@import 'variables/z-index';
+
+@mixin msfa__backdrop($zIndex: $msfa__z-index-default, $fullScreen: true) {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: $zIndex;
   background-color: rgba(255, 255, 255, 0.4);
+
+  @if $fullScreen {
+    position: fixed;
+  } @else {
+    position: absolute;
+  }
 }
diff --git a/apps/mina-sidor-fa/src/styles/styles.scss b/apps/mina-sidor-fa/src/styles/styles.scss
index 9577e44..b6d15fd 100644
--- a/apps/mina-sidor-fa/src/styles/styles.scss
+++ b/apps/mina-sidor-fa/src/styles/styles.scss
@@ -3,6 +3,7 @@
 @import 'mixins/backdrop';
 @import 'mixins/icon';
 @import 'mixins/link';
+@import 'variables/z-index';
 
 * {
   font-family: var(--digi--typography--font-family);
@@ -65,7 +66,11 @@ dl {
   }
 
   &__backdrop {
-    @include msfa__backdrop;
+    @include msfa__backdrop($msfa__z-index-default, false);
+
+    &--full-screen {
+      @include msfa__backdrop($msfa__z-index-backdrop);
+    }
   }
 
   &__digi-icon {
diff --git a/apps/mina-sidor-fa/src/styles/variables/_z-index.scss b/apps/mina-sidor-fa/src/styles/variables/_z-index.scss
new file mode 100644
index 0000000..a159692
--- /dev/null
+++ b/apps/mina-sidor-fa/src/styles/variables/_z-index.scss
@@ -0,0 +1,8 @@
+$msfa__z-index-default: 0;
+$msfa__z-index-header: 1;
+$msfa__z-index-sidebar: 1;
+$msfa__z-index-footer: 0;
+$msfa__z-index-selector-panel: 1;
+$msfa__z-index-backdrop: 1000;
+$msfa__z-index-skip-to-content: 2;
+$msfa__z-index-toast: 9999;