diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.html b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.html
index 4bd2b7b..db1717b 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.html
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.html
@@ -31,7 +31,7 @@
       <div class="navbar-collapse justify-content-end me-5">
         <a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
         <button class="btn">
-          <mat-icon class="scale-pulse">add_to_photos</mat-icon>
+          <mat-icon class="scale-pulse" (click)="creationService.openDialog()">add_to_photos</mat-icon>
         </button>
         <button class="btn" (click)="refreshService.executeAll()">
           <mat-icon class="turn-360">sync</mat-icon>
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.ts
index f72beba..a5f4a7a 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.ts
@@ -9,6 +9,7 @@ import { CommonModule } from '@angular/common';
 import { ColorModeBttnComponent } from '../components/common/color-mode-bttn/color-mode-bttn.component';
 import { MatIconModule } from '@angular/material/icon';
 import { RefreshService } from '../services/refresh.service';
+import { CreationService } from '../services/creation.service';
 
 @Component({
   standalone: true,
@@ -23,7 +24,7 @@ export class NavMenuComponent {
   }
   isExpanded = false;
 
-  constructor(public dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService) {
+  constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService : CreationService) {
     this.authService.isAuthenticated().then().catch()
   }
 
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/creation.service.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/creation.service.ts
index fc02147..408d7eb 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/creation.service.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/creation.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { GroupDirImportComponent } from '../components/group-dir-import/group-dir-import.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 
 @Injectable({
@@ -8,13 +7,17 @@ import { ComponentType } from '@angular/cdk/portal';
 })
 export class CreationService {
 
-  private component: ComponentType<T> = null
+  public component: ComponentType<unknown> | undefined
+  public width: string = "50vw";
 
-  constructor(private dialog: MatDialog) { }
-
-  importGroup() {
-    const dialogRef = this.dialog.open(GroupDirImportComponent, {
-      width: "50vw"
-    });
+  constructor(private readonly dialog: MatDialog) {
   }
-}
+
+  openDialog(): MatDialogRef<unknown, any> | undefined {
+    return this.component
+      ? this.dialog.open(this.component, {
+        width: this.width
+      })
+      : undefined;
+  }
+}
\ No newline at end of file