diff --git a/apps/mina-sidor-fa/src/app/app.component.html b/apps/mina-sidor-fa/src/app/app.component.html
index fdd5936..f76fd5d 100644
--- a/apps/mina-sidor-fa/src/app/app.component.html
+++ b/apps/mina-sidor-fa/src/app/app.component.html
@@ -1,19 +1,10 @@
 <router-outlet></router-outlet>
-
 <msfa-toast-list></msfa-toast-list>
 
-<digi-ng-dialog
-  [afActive]="userIsIdle$ | async"
-  (afOnPrimaryClick)="setUserAsActive()"
-  (afOnSecondaryClick)="logout()"
-  (afOnInactive)="setUserAsActive()"
-  afHeading="Du verkar inaktiv"
-  afHeadingLevel="h2"
-  afPrimaryButtonText="Fortsätt sessionen"
-  afSecondaryButtonText="Logga ut"
->
+<ng-template #idleDialogTemplate>
+  <h2>Du verkar vara inaktiv</h2>
   <p>Din session är på väg att löpa ut på grund av inaktivitet. Vill du fortsätta eller logga ut?</p>
   <p *ngIf="timeLeftBeforeLogout$ | async as timeLeftBeforeLogout">
     Du blir automatiskt utloggad om <time>{{timeLeftBeforeLogout}}</time>
   </p>
-</digi-ng-dialog>
+</ng-template>
diff --git a/apps/mina-sidor-fa/src/app/app.component.ts b/apps/mina-sidor-fa/src/app/app.component.ts
index 6362df5..6ac7cbc 100644
--- a/apps/mina-sidor-fa/src/app/app.component.ts
+++ b/apps/mina-sidor-fa/src/app/app.component.ts
@@ -1,5 +1,13 @@
 import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostListener, Inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+  Inject,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { APPLICATION_CLOSED_TIME_STAMP } from '@msfa-constants/local-storage-keys';
@@ -8,6 +16,10 @@ import { AuthenticationService } from '@msfa-services/api/authentication.service
 import { IdleService } from '@msfa-services/idle.service';
 import { Observable } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
+import { UiDialog } from '@ui/dialog/ui-dialog.service';
+import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
+import { UiDialogConfig } from '@ui/dialog/ui-dialog.model';
+import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
 
 @Component({
   selector: 'msfa-root',
@@ -15,9 +27,17 @@ import { filter, map, switchMap } from 'rxjs/operators';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  userIsIdle$: Observable<boolean> = this.idleService.isIdle$;
+export class AppComponent extends UnsubscribeDirective implements OnInit {
+  @ViewChild('idleDialogTemplate') idleDialogTemplate: TemplateRef<UiDialogRef>;
   timeLeftBeforeLogout$: Observable<string> = this.idleService.timeLeftBeforeLogout$;
+  private _dialogRef: UiDialogRef;
+  private _userIsIdle$: Observable<boolean> = this.idleService.isIdle$;
+  private _idleDialogConfig: UiDialogConfig = {
+    primaryButtonText: 'Fortsätt sessionen',
+    primaryAction: () => this.setUserAsActive(),
+    secondaryButtonText: 'Logga ut',
+    secondaryAction: () => this.logout(),
+  };
 
   // Saving latest activity timestamp when application is closed
   // to avoid users be automatically logged in if user hasn't used the application for a while.
@@ -32,8 +52,10 @@ export class AppComponent {
     private activatedRoute: ActivatedRoute,
     private titleService: Title,
     private idleService: IdleService,
-    private authenticationService: AuthenticationService
+    private authenticationService: AuthenticationService,
+    private uiDialog: UiDialog
   ) {
+    super();
     this.document.body.dataset.version = environment.version;
 
     this.router.events
@@ -55,6 +77,19 @@ export class AppComponent {
   setUserAsActive(): void {
     this.idleService.setActive();
   }
+
+  ngOnInit(): void {
+    super.unsubscribeOnDestroy(
+      this._userIsIdle$.subscribe(isIdle => {
+        if (isIdle) {
+          this._dialogRef = this.uiDialog.open(this.idleDialogTemplate, this._idleDialogConfig);
+          this._dialogRef.afterClosed$.subscribe(() => this.setUserAsActive());
+        } else if (this._dialogRef) {
+          this._dialogRef.close();
+        }
+      })
+    );
+  }
 }
 
 function traverseUntilNoChildRoute(route: ActivatedRoute): ActivatedRoute {
diff --git a/apps/mina-sidor-fa/src/app/app.module.ts b/apps/mina-sidor-fa/src/app/app.module.ts
index 2721c92..2681052 100644
--- a/apps/mina-sidor-fa/src/app/app.module.ts
+++ b/apps/mina-sidor-fa/src/app/app.module.ts
@@ -1,6 +1,5 @@
-import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { registerLocaleData } from '@angular/common';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import localeSe from '@angular/common/locales/sv';
 import { ErrorHandler, LOCALE_ID, NgModule, Provider } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -12,6 +11,7 @@ import { AppComponent } from './app.component';
 import { ToastListModule } from './components/toast-list/toast-list.module';
 import { LoggingModule } from './logging.module';
 import { AvropModule } from './pages/avrop/avrop.module';
+import { UiDialogModule } from '@ui/dialog/ui-dialog.module';
 
 registerLocaleData(localeSe);
 const providers: Provider[] = [
@@ -30,7 +30,7 @@ const providers: Provider[] = [
     AppRoutingModule,
     ToastListModule,
     AvropModule,
-    DigiNgDialogModule,
+    UiDialogModule,
   ],
   providers,
   bootstrap: [AppComponent],
diff --git a/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts b/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts
index 9c36a37..f66ac64 100644
--- a/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
-import { environment } from '@msfa-environment';
 import { BehaviorSubject, fromEvent, merge, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AuthenticationService } from './api/authentication.service';
+import { environment } from '@msfa-environment';
 
 @Injectable({
   providedIn: 'root',
diff --git a/libs/styles/src/styles.scss b/libs/styles/src/styles.scss
index 9533fcf..1b019d6 100644
--- a/libs/styles/src/styles.scss
+++ b/libs/styles/src/styles.scss
@@ -51,21 +51,6 @@ dl {
   display: inline-flex;
 }
 
-// Fix issue with too long modal-content. This makes it scrollable.
-.digi-ng-dialog-base__content {
-  max-height: 90vh;
-  overflow-x: auto;
-}
-
-.digi-ng-dialog {
-  position: fixed;
-  z-index: $msfa__z-index-backdrop;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
 // Removing margins from digi fieldset component.
 .digi-form-fieldset {
   margin: 0;
diff --git a/libs/ui/src/dialog/ui-dialog.model.ts b/libs/ui/src/dialog/ui-dialog.model.ts
index f8033d3..8a12311 100644
--- a/libs/ui/src/dialog/ui-dialog.model.ts
+++ b/libs/ui/src/dialog/ui-dialog.model.ts
@@ -3,7 +3,7 @@ import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
 export const UI_DIALOG_DATA = 'UI_DIALOG_DATA';
 
 export interface UiDialogConfig<DialogInputData = unknown> {
-  data: DialogInputData;
+  data?: DialogInputData;
 
   /**
    * primaryButtonText defaults to 'Stäng'
diff --git a/libs/ui/src/dialog/ui-dialog.service.ts b/libs/ui/src/dialog/ui-dialog.service.ts
index 2d6a200..402d297 100644
--- a/libs/ui/src/dialog/ui-dialog.service.ts
+++ b/libs/ui/src/dialog/ui-dialog.service.ts
@@ -21,7 +21,7 @@ export class UiDialog {
 
   open<DialogContent = unknown, T = unknown>(
     content: string | TemplateRef<unknown> | Type<unknown>,
-    config: UiDialogConfig<T>
+    config: UiDialogConfig<T> = {}
   ): UiDialogRef<DialogContent> {
     const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
     const configs = new OverlayConfig({