diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1a483476f4..1479f96156 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
         "@angular/platform-browser": "~15.1.2",
         "@angular/platform-browser-dynamic": "~15.1.2",
         "@angular/router": "~15.1.2",
+        "@ngneat/until-destroy": "^9.2.3",
         "@types/semver": "^7.3.13",
         "buffer": "^6.0.3",
         "file-saver": "^2.0.5",
@@ -3775,6 +3776,18 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ngneat/until-destroy": {
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/@ngneat/until-destroy/-/until-destroy-9.2.3.tgz",
+      "integrity": "sha512-ryX0vqDOdmYo53f7v5Ivbj1jcqOEX+vM1iiV9NYepWDha4VJp9lWrDFK9tRt2evAMzF/9u67JLzs4Xjcoh+Taw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=13",
+        "rxjs": "^6.4.0 || ^7.0.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "15.1.3",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.1.3.tgz",
@@ -5168,6 +5181,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -5903,6 +5917,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -6080,6 +6095,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -6087,7 +6103,8 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
     },
     "node_modules/color-support": {
       "version": "1.1.3",
@@ -7307,6 +7324,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -8831,6 +8849,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -10138,7 +10157,8 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
     },
     "node_modules/json-parse-helpfulerror": {
       "version": "1.0.3",
@@ -11398,6 +11418,7 @@
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -16959,6 +16980,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -17203,7 +17225,8 @@
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
     },
     "node_modules/through": {
       "version": "2.3.8",
diff --git a/frontend/package.json b/frontend/package.json
index ba251f0ac8..bb179ceddb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~15.1.2",
     "@angular/platform-browser-dynamic": "~15.1.2",
     "@angular/router": "~15.1.2",
+    "@ngneat/until-destroy": "^9.2.3",
     "@types/semver": "^7.3.13",
     "buffer": "^6.0.3",
     "file-saver": "^2.0.5",
diff --git a/frontend/src/app/projects/create-project/create-project.component.html b/frontend/src/app/projects/create-project/create-project.component.html
index 750dbfb29a..4b472ad4fe 100644
--- a/frontend/src/app/projects/create-project/create-project.component.html
+++ b/frontend/src/app/projects/create-project/create-project.component.html
@@ -66,11 +66,9 @@
     </mat-step>
 
     <mat-step label="Add team members">
-      <div *ngIf="projectService.project" class="flex-center">
+      <div *ngIf="projectService.project | async" class="flex-center">
         <div>
-          <app-project-user-settings
-            [project]="projectService.project"
-          ></app-project-user-settings>
+          <app-project-user-settings></app-project-user-settings>
           <mat-card class="mat-card-default">
             <div class="flex-space-between">
               <button
@@ -100,7 +98,10 @@
           <div class="flex-center">
             <a
               mat-flat-button
-              [routerLink]="['/project', projectService.project?.slug]"
+              [routerLink]="[
+                '/project',
+                (projectService.project | async)?.slug
+              ]"
               [color]="getColorByModelCreationStep()"
               data-testId="a-skipModelAndFinishProjectCreation"
             >
diff --git a/frontend/src/app/projects/create-project/create-project.component.spec.ts b/frontend/src/app/projects/create-project/create-project.component.spec.ts
index 4dff634159..cb227826cf 100644
--- a/frontend/src/app/projects/create-project/create-project.component.spec.ts
+++ b/frontend/src/app/projects/create-project/create-project.component.spec.ts
@@ -6,14 +6,20 @@
 import { SpyLocation } from '@angular/common/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  ReactiveFormsModule,
+  ValidationErrors,
+} from '@angular/forms';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatStepperModule } from '@angular/material/stepper';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { BehaviorSubject, Observable, of } from 'rxjs';
+import { BehaviorSubject, map, Observable, of, take } from 'rxjs';
+import slugify from 'slugify';
 import {
   click,
   findComponent,
@@ -22,7 +28,11 @@ import {
 } from 'src/../tests/spec-helper/element.spec-helper';
 
 import { ToastService } from '../../helpers/toast/toast.service';
-import { Project, ProjectService } from '../service/project.service';
+import {
+  PatchProject,
+  Project,
+  ProjectService,
+} from '../service/project.service';
 import { CreateProjectComponent } from './create-project.component';
 
 const mockProjects: Project[] = [
@@ -50,31 +60,49 @@ describe('CreateProjectComponent', () => {
     showSuccess(): void {},
   };
 
-  const fakeProjectService: Pick<
-    ProjectService,
-    '_project' | '_projects' | 'list' | 'createProject' | 'project' | 'projects'
-  > = {
+  const fakeProjectService = {
     _project: new BehaviorSubject<Project | undefined>(undefined),
     _projects: new BehaviorSubject<Project[] | undefined>(undefined),
-    list() {
+
+    get project(): Observable<Project | undefined> {
+      return this._project.asObservable();
+    },
+
+    get projects(): Observable<Project[] | undefined> {
+      return this._projects.asObservable();
+    },
+
+    loadProjects() {
       this._projects.next(mockProjects);
       return of(mockProjects);
     },
-    createProject(project: Project): Observable<Project> {
+    createProject(project: PatchProject): Observable<Project> {
       let projectToCreate: Project = {
-        name: project.name,
-        description: project.description,
-        slug: project.name,
+        name: project.name!,
+        description: project.description!,
+        slug: project.name!,
         users: { leads: 1, contributors: 0, subscribers: 0 },
       };
       this._project.next(projectToCreate);
       return of(projectToCreate);
     },
-    get projects(): Project[] | undefined {
-      return this._projects.value;
+    clearProject(): void {
+      this._project.next(undefined);
     },
-    get project(): Project | undefined {
-      return this._project.value;
+    asyncSlugValidator(): AsyncValidatorFn {
+      return (
+        control: AbstractControl
+      ): Observable<ValidationErrors | null> => {
+        const projectSlug = slugify(control.value, { lower: true });
+        return this.projects.pipe(
+          take(1),
+          map((projects) => {
+            return projects?.find((project) => project.slug === projectSlug)
+              ? { uniqueSlug: { value: projectSlug } }
+              : null;
+          })
+        );
+      };
     },
   };
 
@@ -129,13 +157,10 @@ describe('CreateProjectComponent', () => {
 
     fixture.detectChanges();
 
-    expect(fakeProjectService.createProject).toHaveBeenCalledOnceWith(
-      {
-        name: testProjectName,
-        description: '',
-      },
-      true
-    );
+    expect(fakeProjectService.createProject).toHaveBeenCalledOnceWith({
+      name: testProjectName,
+      description: '',
+    });
     expect(fakeToastService.showSuccess).toHaveBeenCalledTimes(1);
   });
 
@@ -149,13 +174,10 @@ describe('CreateProjectComponent', () => {
 
     fixture.detectChanges();
 
-    expect(fakeProjectService.createProject).toHaveBeenCalledOnceWith(
-      {
-        name: testProjectName,
-        description: testProjectDescription,
-      },
-      true
-    );
+    expect(fakeProjectService.createProject).toHaveBeenCalledOnceWith({
+      name: testProjectName,
+      description: testProjectDescription,
+    });
     expect(fakeToastService.showSuccess).toHaveBeenCalledTimes(1);
   });
 
diff --git a/frontend/src/app/projects/create-project/create-project.component.ts b/frontend/src/app/projects/create-project/create-project.component.ts
index bba0e18846..abcd93ac11 100644
--- a/frontend/src/app/projects/create-project/create-project.component.ts
+++ b/frontend/src/app/projects/create-project/create-project.component.ts
@@ -4,17 +4,8 @@
  */
 
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import {
-  AbstractControl,
-  FormControl,
-  FormGroup,
-  ValidationErrors,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatStepper } from '@angular/material/stepper';
-import { Router } from '@angular/router';
-import slugify from 'slugify';
 import {
   CreateModelComponent,
   CreateModelStep,
@@ -30,41 +21,36 @@ import { ProjectService } from '../service/project.service';
 export class CreateProjectComponent implements OnInit, OnDestroy {
   @ViewChild('model_creator') model_creator!: CreateModelComponent;
 
-  private projectDetails = false;
-
   public modelCreationStep: CreateModelStep = 'create-model';
 
-  form = new FormGroup({
-    name: new FormControl('', [Validators.required, this.slugValidator()]),
-    description: new FormControl(''),
-  });
-
   constructor(
     public projectService: ProjectService,
-    private router: Router,
     private toastService: ToastService
   ) {}
 
+  form = new FormGroup({
+    name: new FormControl('', {
+      validators: Validators.required,
+      asyncValidators: this.projectService.asyncSlugValidator(),
+    }),
+    description: new FormControl(''),
+  });
+
   ngOnInit(): void {
-    this.projectService.list().subscribe();
+    this.projectService.loadProjects();
   }
 
   ngOnDestroy(): void {
-    if (!this.projectDetails) {
-      this.projectService._project.next(undefined);
-    }
+    this.projectService.clearProject();
   }
 
   createProject(stepper: MatStepper): void {
     if (this.form.valid) {
       this.projectService
-        .createProject(
-          {
-            name: this.form.value.name!,
-            description: this.form.value.description!,
-          },
-          true
-        )
+        .createProject({
+          name: this.form.value.name!,
+          description: this.form.value.description!,
+        })
         .subscribe((project) => {
           this.toastService.showSuccess(
             `The project “${project.name}” was successfuly created.`,
@@ -77,25 +63,6 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
     }
   }
 
-  finish(): void {
-    this.projectDetails = true;
-    this.router.navigate(['/project', this.projectService.project!.slug]);
-  }
-
-  slugValidator(): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-      const slug = slugify(control.value, { lower: true });
-      if (
-        this.projectService.projects
-          ?.map((project) => project.slug)
-          .includes(slug)
-      ) {
-        return { uniqueSlug: { value: slug } };
-      }
-      return null;
-    };
-  }
-
   getColorByModelCreationStep(): string {
     switch (this.modelCreationStep) {
       case 'create-model':
diff --git a/frontend/src/app/projects/models/backup-settings/create-backup/create-backup.component.ts b/frontend/src/app/projects/models/backup-settings/create-backup/create-backup.component.ts
index 5af4bcadd2..c0902a1466 100644
--- a/frontend/src/app/projects/models/backup-settings/create-backup/create-backup.component.ts
+++ b/frontend/src/app/projects/models/backup-settings/create-backup/create-backup.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import {
   AbstractControl,
   FormControl,
@@ -11,51 +11,57 @@ import {
   ValidationErrors,
   ValidatorFn,
 } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import {
+  MatDialogRef as MatDialogRef,
+  MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { combineLatest } from 'rxjs';
 import {
   BackupService,
   PostPipeline,
 } from 'src/app/projects/models/backup-settings/service/backup.service';
 import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
-import { ModelService } from 'src/app/projects/models/service/model.service';
 import { GitModelService } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
-import { ProjectService } from 'src/app/projects/service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-create-backup',
   templateUrl: './create-backup.component.html',
   styleUrls: ['./create-backup.component.css'],
 })
-export class CreateBackupComponent {
+export class CreateBackupComponent implements OnInit {
   t4cAndGitModelExists = false;
 
   constructor(
     public gitModelService: GitModelService,
     public t4cModelService: T4CModelService,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { projectSlug: string; modelSlug: string },
     private backupService: BackupService,
-    private dialogRef: MatDialogRef<CreateBackupComponent>,
-    private projectService: ProjectService,
-    private modelService: ModelService
-  ) {
+    private dialogRef: MatDialogRef<CreateBackupComponent>
+  ) {}
+
+  ngOnInit(): void {
     this.t4cModelService
-      .listT4CModels(
-        this.projectService.project!.slug,
-        this.modelService.model!.slug
-      )
+      .listT4CModels(this.data.projectSlug, this.data.modelSlug)
       .subscribe();
-
     this.gitModelService.loadGitModels(
-      this.projectService.project!.slug,
-      this.modelService.model!.slug
+      this.data.projectSlug,
+      this.data.modelSlug
     );
 
     combineLatest([
       this.gitModelService.gitModels,
       this.t4cModelService._t4cModels.asObservable(),
-    ]).subscribe(([gitModels, t4cModels]) => {
-      this.t4cAndGitModelExists = !!(gitModels?.length && t4cModels?.length);
-    });
+    ])
+      .pipe(untilDestroyed(this))
+      .subscribe(
+        ([gitModels, t4cModels]) =>
+          (this.t4cAndGitModelExists = !!(
+            gitModels?.length && t4cModels?.length
+          ))
+      );
   }
 
   createBackupForm = new FormGroup({
@@ -87,9 +93,9 @@ export class CreateBackupComponent {
       };
       this.backupService
         .createBackup(
-          this.projectService.project!.slug,
-          this.modelService.model!.slug,
-          createBackupformValue as unknown as PostPipeline
+          this.data.projectSlug,
+          this.data.modelSlug,
+          createBackupformValue as PostPipeline
         )
         .subscribe(() => {
           this.dialogRef.close(true);
diff --git a/frontend/src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component.ts b/frontend/src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component.ts
index a24219e9b3..8f7af24524 100644
--- a/frontend/src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component.ts
+++ b/frontend/src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component.ts
@@ -11,15 +11,13 @@ import {
   MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
-import {
-  Model,
-  ModelService,
-} from 'src/app/projects/models/service/model.service';
-import { ProjectService } from 'src/app/projects/service/project.service';
 import { SessionService } from 'src/app/sessions/service/session.service';
 import { CreateBackupComponent } from '../create-backup/create-backup.component';
 import { BackupService, Pipeline } from '../service/backup.service';
-import { ViewLogsDialogComponent } from '../view-logs-dialog/view-logs-dialog.component';
+import {
+  ViewLogsDialogComponent,
+  ViewLogsData,
+} from '../view-logs-dialog/view-logs-dialog.component';
 
 @Component({
   selector: 'app-trigger-pipeline',
@@ -36,21 +34,16 @@ export class TriggerPipelineComponent implements OnInit {
   constructor(
     private toastService: ToastService,
     private dialogRef: MatDialogRef<TriggerPipelineComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { model: Model },
+    @Inject(MAT_DIALOG_DATA)
+    public data: { projectSlug: string; modelSlug: string },
     public dialog: MatDialog,
     public backupService: BackupService,
-    public sessionService: SessionService,
-    private modelService: ModelService,
-    private projectService: ProjectService
+    public sessionService: SessionService
   ) {}
 
   ngOnInit(): void {
-    this.modelService._model.next(this.data.model);
     this.backupService
-      .getBackups(
-        this.projectService.project!.slug,
-        this.modelService.model!.slug
-      )
+      .getBackups(this.data.projectSlug, this.data.modelSlug)
       .subscribe();
   }
 
@@ -61,8 +54,8 @@ export class TriggerPipelineComponent implements OnInit {
   runPipeline() {
     this.backupService
       .triggerRun(
-        this.projectService.project!.slug,
-        this.modelService.model!.slug,
+        this.data.projectSlug,
+        this.data.modelSlug,
         this.selectedPipeline!.id,
         this.configurationForm.value.includeHistory!
       )
@@ -71,16 +64,15 @@ export class TriggerPipelineComponent implements OnInit {
           'Pipeline triggered',
           'You can check the current status in the pipeline settings.'
         );
-        this.dialogRef.close();
+        this.closeDialog();
       });
   }
 
   estimateTime(): string {
     if (this.configurationForm.value.includeHistory) {
       return '1-6 hours';
-    } else {
-      return '5-10 minutes';
     }
+    return '5-10 minutes';
   }
 
   closeDialog(): void {
@@ -89,43 +81,39 @@ export class TriggerPipelineComponent implements OnInit {
 
   removeBackup(backup: Pipeline): void {
     this.backupService
-      .removeBackup(
-        this.projectService.project!.slug,
-        this.modelService.model!.slug,
-        backup.id
-      )
+      .removeBackup(this.data.projectSlug, this.data.modelSlug, backup.id)
       .subscribe(() => {
         this.toastService.showSuccess(
           'Backup pipeline deleted',
           `The pipeline with the ID ${backup.id} has been deleted`
         );
-        this.dialogRef.close();
+        this.closeDialog();
       });
   }
 
   viewLogs(backup: Pipeline): void {
     this.dialog.open(ViewLogsDialogComponent, {
       data: {
-        modelSlug: this.modelService.model!.slug,
+        projectSlug: this.data.projectSlug,
+        modelSlug: this.data.modelSlug,
         job_id: backup.lastrun.id,
         backup_id: backup.id,
-        project: this.projectService.project!.slug,
-      },
+      } as ViewLogsData,
     });
   }
 
   createNewBackup(): void {
     const dialogRef = this.dialog.open(CreateBackupComponent, {
-      data: { project: this.projectService.project!.slug },
+      data: {
+        projectSlug: this.data.projectSlug,
+        modelSlug: this.data.modelSlug,
+      },
     });
 
     dialogRef.afterClosed().subscribe((success) => {
       if (success) {
         this.backupService
-          .getBackups(
-            this.projectService.project!.slug,
-            this.modelService.model!.slug
-          )
+          .getBackups(this.data.projectSlug, this.data.modelSlug)
           .subscribe();
       }
     });
diff --git a/frontend/src/app/projects/models/backup-settings/view-logs-dialog/view-logs-dialog.component.ts b/frontend/src/app/projects/models/backup-settings/view-logs-dialog/view-logs-dialog.component.ts
index a3c0d278f6..515fead70e 100644
--- a/frontend/src/app/projects/models/backup-settings/view-logs-dialog/view-logs-dialog.component.ts
+++ b/frontend/src/app/projects/models/backup-settings/view-logs-dialog/view-logs-dialog.component.ts
@@ -3,48 +3,41 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Subscription, timer } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { BackupService } from 'src/app/projects/models/backup-settings/service/backup.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-view-logs-dialog',
   templateUrl: './view-logs-dialog.component.html',
   styleUrls: ['./view-logs-dialog.component.css'],
 })
-export class ViewLogsDialogComponent implements OnInit, OnDestroy {
-  refreshLogsSubscription: Subscription;
-
+export class ViewLogsDialogComponent implements OnInit {
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: ViewLogsData,
     private easeBackupService: BackupService
-  ) {
-    this.refreshLogsSubscription = timer(0, 5000)
-      .pipe(
-        tap(() => {
-          this.refreshLogs();
-        })
-      )
-      .subscribe();
-  }
+  ) {}
 
   loading = true;
   logs = '';
 
   ngOnInit(): void {
-    this.refreshLogs();
-  }
-
-  ngOnDestroy(): void {
-    this.refreshLogsSubscription.unsubscribe();
+    timer(0, 5000)
+      .pipe(
+        tap(() => this.refreshLogs()),
+        untilDestroyed(this)
+      )
+      .subscribe();
   }
 
   refreshLogs(): void {
     this.loading = true;
     this.easeBackupService
-      .getLogs(this.data.project, this.data.backup_id, this.data.modelSlug)
+      .getLogs(this.data.projectSlug, this.data.backup_id, this.data.modelSlug)
       .subscribe({
         next: (res: string) => {
           this.loading = false;
@@ -59,8 +52,8 @@ export class ViewLogsDialogComponent implements OnInit, OnDestroy {
 }
 
 export type ViewLogsData = {
+  projectSlug: string;
   modelSlug: string;
   job_id: string;
   backup_id: number;
-  project: string;
 };
diff --git a/frontend/src/app/projects/models/choose-init/choose-init.component.html b/frontend/src/app/projects/models/choose-init/choose-init.component.html
index 778b953748..52cda6021b 100644
--- a/frontend/src/app/projects/models/choose-init/choose-init.component.html
+++ b/frontend/src/app/projects/models/choose-init/choose-init.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div *ngIf="projectService.project && modelService.model">
+<div *ngIf="(projectService.project | async) && (modelService.model | async)">
   <div class="options-list flex-center">
     <button
       mat-raised-button
diff --git a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
index abac4ad959..ed97993f7f 100644
--- a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
+++ b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
@@ -4,7 +4,7 @@
  -->
 
 <div class="flex-center">
-  <mat-card class="section-card" *ngIf="projectService.project">
+  <mat-card class="section-card" *ngIf="projectService.project | async">
     <form
       id="create-model-base-form"
       [formGroup]="form"
diff --git a/frontend/src/app/projects/models/create-model-base/create-model-base.component.ts b/frontend/src/app/projects/models/create-model-base/create-model-base.component.ts
index c08324c598..408888c448 100644
--- a/frontend/src/app/projects/models/create-model-base/create-model-base.component.ts
+++ b/frontend/src/app/projects/models/create-model-base/create-model-base.component.ts
@@ -12,17 +12,16 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import { Subject, connectable, switchMap, tap } from 'rxjs';
-import slugify from 'slugify';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import {
-  Model,
   ModelService,
   NewModel,
 } from 'src/app/projects/models/service/model.service';
 import { ToolService } from 'src/app/settings/core/tools-settings/tool.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-create-model-base',
   templateUrl: './create-model-base.component.html',
@@ -32,8 +31,13 @@ export class CreateModelBaseComponent implements OnInit {
   @Output() create = new EventEmitter();
   @Input() asStepper?: boolean;
 
+  private projectSlug?: string = undefined;
+
   public form = new FormGroup({
-    name: new FormControl('', [Validators.required, this.slugValidator()]),
+    name: new FormControl('', {
+      validators: Validators.required,
+      asyncValidators: this.modelService.asyncSlugValidator(),
+    }),
     description: new FormControl(''),
     toolID: new FormControl<number | undefined>(undefined, [
       Validators.required,
@@ -48,62 +52,25 @@ export class CreateModelBaseComponent implements OnInit {
     private toastService: ToastService
   ) {}
 
-  slugValidator(): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-      const models = this.modelService.models;
-      const slug = slugify(control.value, { lower: true });
-      if (models && models.find((model) => model.slug == slug)) {
-        return { uniqueSlug: { value: slug } };
-      }
-      return null;
-    };
-  }
-
-  validToolValidator(): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-      const tools = this.toolService.tools;
-      const value = control.value;
-      if (!value || (tools && tools.find((tool) => tool.id == value))) {
-        return null;
-      }
-      return { noValidTool: true };
-    };
-  }
-
   ngOnInit(): void {
     this.toolService.getTools().subscribe();
-    this.modelService._models.subscribe();
-    this.modelService._model.next(undefined);
+    this.modelService.clearModel();
+
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) => (this.projectSlug = project?.slug));
   }
 
   onSubmit(): void {
-    if (this.form.valid && this.projectService.project?.slug) {
-      const modelConnectable = connectable<Model>(
-        this.modelService.createNewModel(this.projectService.project.slug, {
+    if (this.form.valid && this.projectSlug) {
+      this.modelService
+        .createModel(this.projectSlug, {
           name: this.form.value.name,
           description: this.form.value.description,
           tool_id: this.form.value.toolID,
-        } as NewModel),
-        {
-          connector: () => new Subject(),
-          resetOnDisconnect: false,
-        }
-      );
-
-      modelConnectable
-        .pipe(
-          switchMap((_) =>
-            this.modelService.getModels(this.projectService.project!.slug)
-          )
-        )
-        .subscribe((value) => {
-          this.modelService._models.next(value);
-        });
-
-      modelConnectable
-        .pipe(tap((model) => this.modelService._model.next(model)))
+        } as NewModel)
         .subscribe({
-          next: (model: Model | undefined) => {
+          next: (model) => {
             this.toastService.showSuccess(
               'Model created',
               `The model with name ${model!.name} has been created`
@@ -111,8 +78,17 @@ export class CreateModelBaseComponent implements OnInit {
             this.create.emit();
           },
         });
-
-      modelConnectable.connect();
     }
   }
+
+  validToolValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const tools = this.toolService.tools;
+      const value = control.value;
+      if (!value || (tools && tools.find((tool) => tool.id == value))) {
+        return null;
+      }
+      return { noValidTool: true };
+    };
+  }
 }
diff --git a/frontend/src/app/projects/models/create-model/create-model.component.ts b/frontend/src/app/projects/models/create-model/create-model.component.ts
index d84cbf1967..75bc4dc73f 100644
--- a/frontend/src/app/projects/models/create-model/create-model.component.ts
+++ b/frontend/src/app/projects/models/create-model/create-model.component.ts
@@ -8,26 +8,30 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnDestroy,
+  OnInit,
   Output,
   ViewChild,
 } from '@angular/core';
 import { MatStepper } from '@angular/material/stepper';
 import { Router } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ModelService } from 'src/app/projects/models/service/model.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-create-model',
   templateUrl: './create-model.component.html',
   styleUrls: ['./create-model.component.css'],
 })
-export class CreateModelComponent implements OnDestroy {
+export class CreateModelComponent implements OnInit {
   @ViewChild('stepper') stepper!: MatStepper;
   @Input() asStepper?: boolean;
   @Input() redirectAfterCompletion: boolean = true;
   @Output() currentStep = new EventEmitter<CreateModelStep>();
 
+  private projectSlug?: string = undefined;
+
   source?: string;
   chosenModelInitOption?: string;
   detail?: boolean;
@@ -38,10 +42,10 @@ export class CreateModelComponent implements OnDestroy {
     private modelService: ModelService
   ) {}
 
-  ngOnDestroy(): void {
-    if (!this.detail) {
-      this.modelService._model.next(undefined);
-    }
+  ngOnInit(): void {
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) => (this.projectSlug = project?.slug));
   }
 
   onStepChange(event: StepperSelectionEvent) {
@@ -88,8 +92,8 @@ export class CreateModelComponent implements OnDestroy {
     if (options.created) {
       this.currentStep.emit('complete');
       if (this.redirectAfterCompletion) {
-        this.detail = true;
-        this.router.navigate(['/project', this.projectService.project!.slug]);
+        this.modelService.clearModel();
+        this.router.navigate(['/project', this.projectSlug!]);
       }
     } else {
       this.stepper.previous();
diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
index 84899a8ad8..5e49395c0a 100644
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
+++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
@@ -11,8 +11,6 @@ import {
   DiagramMetadata,
   ModelDiagramService,
 } from 'src/app/projects/models/diagrams/service/model-diagram.service';
-import { Model } from 'src/app/projects/models/service/model.service';
-import { ProjectService } from 'src/app/projects/service/project.service';
 
 @Component({
   selector: 'app-model-diagram-dialog',
@@ -20,9 +18,9 @@ import { ProjectService } from 'src/app/projects/service/project.service';
   styleUrls: ['./model-diagram-dialog.component.css'],
 })
 export class ModelDiagramDialogComponent {
-  diagramMetadata?: DiagramCacheMetadata = undefined;
-  selectedDiagram?: DiagramMetadata = undefined;
-  selectedDiagramContent?: string = undefined;
+  diagramMetadata?: DiagramCacheMetadata;
+  selectedDiagram?: DiagramMetadata;
+  selectedDiagramContent?: string;
 
   search = '';
 
@@ -39,15 +37,12 @@ export class ModelDiagramDialogComponent {
 
   constructor(
     private modelDiagramService: ModelDiagramService,
-    private projectService: ProjectService,
     private dialogRef: MatDialogRef<ModelDiagramDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { model: Model }
+    @Inject(MAT_DIALOG_DATA)
+    public data: { modelSlug: string; projectSlug: string }
   ) {
     this.modelDiagramService
-      .getDiagramMetadata(
-        this.projectService.project!.slug,
-        this.data.model.slug
-      )
+      .getDiagramMetadata(this.data.projectSlug, this.data.modelSlug)
       .subscribe({
         next: (diagramMetadata) => {
           this.diagramMetadata = diagramMetadata;
@@ -60,7 +55,7 @@ export class ModelDiagramDialogComponent {
 
   downloadDiagram(uuid: string) {
     this.modelDiagramService
-      .getDiagram(this.projectService.project!.slug, this.data.model.slug, uuid)
+      .getDiagram(this.data.projectSlug, this.data.modelSlug, uuid)
       .subscribe((response: Blob) => {
         saveAs(response, `${uuid}.svg`);
       });
diff --git a/frontend/src/app/projects/models/init-model/init-model.component.html b/frontend/src/app/projects/models/init-model/init-model.component.html
index 2e00917e4d..269334bcf3 100644
--- a/frontend/src/app/projects/models/init-model/init-model.component.html
+++ b/frontend/src/app/projects/models/init-model/init-model.component.html
@@ -4,14 +4,14 @@
  -->
 
 <div class="wrapper flex-center">
-  <mat-card class="section-card" *ngIf="modelService.model">
+  <mat-card class="section-card" *ngIf="modelService.model | async">
     <form id="new-model-form" [formGroup]="form">
       <fieldset>
         <mat-form-field appearance="fill">
           <mat-label>Modelling tool</mat-label>
           <input
             matInput
-            [value]="this.modelService.model.tool.name"
+            [value]="(modelService.model | async)!.tool.name"
             disabled
           />
         </mat-form-field>
diff --git a/frontend/src/app/projects/models/init-model/init-model.component.ts b/frontend/src/app/projects/models/init-model/init-model.component.ts
index 1a08a0c570..d54f8d856d 100644
--- a/frontend/src/app/projects/models/init-model/init-model.component.ts
+++ b/frontend/src/app/projects/models/init-model/init-model.component.ts
@@ -3,16 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { combineLatest, filter, map, Subscription, switchMap, tap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { combineLatest, filter, map, switchMap, tap } from 'rxjs';
 import {
   Model,
   ModelService,
@@ -26,12 +20,13 @@ import {
 import { GitModelService } from '../../project-detail/model-overview/model-detail/git-model.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-init-model',
   templateUrl: './init-model.component.html',
   styleUrls: ['./init-model.component.css'],
 })
-export class InitModelComponent implements OnInit, OnDestroy {
+export class InitModelComponent implements OnInit {
   @Output() create = new EventEmitter<{ created: boolean }>();
   @Input() asStepper?: boolean;
 
@@ -40,7 +35,8 @@ export class InitModelComponent implements OnInit, OnDestroy {
 
   buttonDisabled: boolean = false;
 
-  private modelSubscription?: Subscription;
+  private projectSlug?: string = undefined;
+  private modelSlug?: string = undefined;
 
   constructor(
     public projectService: ProjectService,
@@ -58,10 +54,12 @@ export class InitModelComponent implements OnInit, OnDestroy {
   });
 
   ngOnInit(): void {
-    this.modelSubscription = this.modelService._model
-      .pipe(filter(Boolean))
+    this.modelService.model
       .pipe(
+        untilDestroyed(this),
+        filter(Boolean),
         tap((model) => {
+          this.modelSlug = model.slug;
           if (model.version) {
             this.form.controls.version.patchValue(model.version.id);
           }
@@ -81,26 +79,22 @@ export class InitModelComponent implements OnInit, OnDestroy {
         this.toolVersions = result[0];
         this.toolNatures = result[1];
       });
-  }
 
-  ngOnDestroy(): void {
-    this.modelSubscription?.unsubscribe();
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) => (this.projectSlug = project?.slug));
   }
 
   onSubmit(): void {
-    if (
-      this.form.valid &&
-      this.modelService.model &&
-      this.projectService.project
-    ) {
+    if (this.form.valid && this.modelSlug && this.projectSlug) {
       this.modelService
         .setToolDetailsForModel(
-          this.projectService.project.slug,
-          this.modelService.model.slug,
+          this.projectSlug!,
+          this.modelSlug!,
           this.form.value.version!,
           this.form.value.nature!
         )
-        .subscribe((_) => {
+        .subscribe(() => {
           this.create.emit({ created: true });
           this.buttonDisabled = true;
         });
diff --git a/frontend/src/app/projects/models/model-description/model-description.component.html b/frontend/src/app/projects/models/model-description/model-description.component.html
index c97debdd08..ba624359d6 100644
--- a/frontend/src/app/projects/models/model-description/model-description.component.html
+++ b/frontend/src/app/projects/models/model-description/model-description.component.html
@@ -4,8 +4,8 @@
  -->
 
 <div class="wrapper flex-center">
-  <mat-card *ngIf="modelService.model">
-    <mat-card-title>{{ modelService.model.name }}</mat-card-title>
+  <mat-card *ngIf="modelService.model | async">
+    <mat-card-title>{{ (modelService.model | async)!.name }}</mat-card-title>
     <form (submit)="onSubmit()" [formGroup]="form">
       <fieldset>
         <mat-form-field appearance="fill">
diff --git a/frontend/src/app/projects/models/model-description/model-description.component.ts b/frontend/src/app/projects/models/model-description/model-description.component.ts
index 1194fef94d..bb371c23cc 100644
--- a/frontend/src/app/projects/models/model-description/model-description.component.ts
+++ b/frontend/src/app/projects/models/model-description/model-description.component.ts
@@ -6,6 +6,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { combineLatest, filter, switchMap, tap } from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { ModelService } from 'src/app/projects/models/service/model.service';
@@ -16,6 +17,7 @@ import {
 } from 'src/app/settings/core/tools-settings/tool.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-model-description',
   templateUrl: './model-description.component.html',
@@ -30,6 +32,11 @@ export class ModelDescriptionComponent implements OnInit {
   toolNatures?: ToolNature[];
   toolVersions?: ToolVersion[];
 
+  public canDelete: boolean = false;
+
+  private projectSlug?: string = undefined;
+  private modelSlug?: string = undefined;
+
   constructor(
     public modelService: ModelService,
     public projectService: ProjectService,
@@ -40,10 +47,16 @@ export class ModelDescriptionComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.modelService._model
-      .pipe(filter(Boolean))
+    this.modelService.model
       .pipe(
+        untilDestroyed(this),
+        filter(Boolean),
         tap((model) => {
+          this.modelSlug = model.slug;
+          this.canDelete = !(
+            model.git_models.length || model.t4c_models.length
+          );
+
           this.form.patchValue({
             description: model.description,
             nature: model.nature?.id,
@@ -61,70 +74,51 @@ export class ModelDescriptionComponent implements OnInit {
         this.toolNatures = result[0];
         this.toolVersions = result[1];
       });
+
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) => (this.projectSlug = project?.slug));
   }
 
   onSubmit(): void {
-    if (
-      this.form.value &&
-      this.modelService.model &&
-      this.projectService.project
-    ) {
+    if (this.form.value && this.modelSlug && this.projectSlug) {
       this.modelService
-        .updateModelDescription(
-          this.projectService.project.slug,
-          this.modelService.model.slug,
-          {
-            description: this.form.value.description || '',
-            nature_id: this.form.value.nature || undefined,
-            version_id: this.form.value.version || undefined,
-          }
-        )
-        .pipe(
-          switchMap((_model) =>
-            this.modelService.getModels(this.projectService.project!.slug)
-          )
-        )
-        .subscribe((models) => {
-          this.modelService._models.next(models);
-          this.router.navigate(['../../..'], { relativeTo: this.route });
-        });
+        .updateModelDescription(this.projectSlug!, this.modelSlug!, {
+          description: this.form.value.description || '',
+          nature_id: this.form.value.nature || undefined,
+          version_id: this.form.value.version || undefined,
+        })
+        .subscribe(() =>
+          this.router.navigate(['../../..'], { relativeTo: this.route })
+        );
     }
   }
 
-  get canDelete(): boolean {
-    const model = this.modelService.model!;
-    return !(model.git_models.length || model.t4c_models.length);
-  }
-
   deleteModel(): void {
-    const model = this.modelService.model!;
-
     if (
       !this.canDelete ||
+      !this.modelSlug ||
       !window.confirm(`Do you really want to delete this model?`)
     ) {
       return;
     }
 
-    this.modelService
-      .deleteModel(this.projectService.project?.slug!, model)
-      .subscribe({
-        next: () => {
-          this.toastService.showSuccess(
-            'Model deleted',
-            `${model.name} has been deleted`
-          );
-          this.modelService._models.next(
-            this.modelService.models?.filter((m) => m.id !== model.id)
-          );
-          this.router.navigate(['../../..'], { relativeTo: this.route });
-        },
-        error: () => {
-          this.toastService.showError(
-            'Model deletion failed',
-            `${model.name} has not been deleted`
-          );
-        },
-      });
+    const modelSlug = this.modelSlug;
+
+    this.modelService.deleteModel(this.projectSlug!, modelSlug).subscribe({
+      next: () => {
+        this.toastService.showSuccess(
+          'Model deleted',
+          `${modelSlug} has been deleted`
+        );
+        this.router.navigate(['../../..'], { relativeTo: this.route });
+      },
+      error: () => {
+        this.toastService.showError(
+          'Model deletion failed',
+          `${modelSlug} has not been deleted`
+        );
+      },
+    });
   }
 }
diff --git a/frontend/src/app/projects/models/model-detail/model-detail.component.html b/frontend/src/app/projects/models/model-detail/model-detail.component.html
index a5afc94d67..0f742b1cc7 100644
--- a/frontend/src/app/projects/models/model-detail/model-detail.component.html
+++ b/frontend/src/app/projects/models/model-detail/model-detail.component.html
@@ -3,7 +3,10 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper" *ngIf="projectService.project && modelService.model">
+<div
+  class="wrapper"
+  *ngIf="(projectService.project | async) && (modelService.model | async)"
+>
   <h1 class="title">Git Models</h1>
   <div class="flexbox">
     <a [routerLink]="['git-model', 'create']">
diff --git a/frontend/src/app/projects/models/model-detail/model-detail.component.ts b/frontend/src/app/projects/models/model-detail/model-detail.component.ts
index eb62e6824d..d4bba787d8 100644
--- a/frontend/src/app/projects/models/model-detail/model-detail.component.ts
+++ b/frontend/src/app/projects/models/model-detail/model-detail.component.ts
@@ -4,7 +4,8 @@
  */
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { combineLatest } from 'rxjs';
 import {
   T4CModel,
   T4CModelService,
@@ -16,6 +17,7 @@ import {
 } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-model-detail',
   templateUrl: './model-detail.component.html',
@@ -25,9 +27,6 @@ export class ModelDetailComponent implements OnInit, OnDestroy {
   public gitModels?: GetGitModel[] = undefined;
   public t4cModels?: T4CModel[] = undefined;
 
-  private gitModelsSubscription?: Subscription;
-  private t4cModelsSubscription?: Subscription;
-
   constructor(
     private gitModelService: GitModelService,
     public modelService: ModelService,
@@ -36,27 +35,23 @@ export class ModelDetailComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.gitModelsSubscription = this.gitModelService.gitModels.subscribe(
-      (gitModels) => (this.gitModels = gitModels)
-    );
-
-    this.t4cModelsSubscription = this.t4cModelService
-      .listT4CModels(
-        this.projectService.project!.slug,
-        this.modelService.model!.slug
-      )
-      .subscribe((models) => (this.t4cModels = models));
-
-    this.gitModelService.loadGitModels(
-      this.projectService.project!.slug,
-      this.modelService.model!.slug
-    );
+    this.gitModelService.gitModels
+      .pipe(untilDestroyed(this))
+      .subscribe((gitModels) => (this.gitModels = gitModels));
+
+    combineLatest([this.projectService.project, this.modelService.model])
+      .pipe(untilDestroyed(this))
+      .subscribe(([project, model]) => {
+        this.t4cModelService
+          .listT4CModels(project?.slug!, model?.slug!)
+          .subscribe((models) => (this.t4cModels = models));
+
+        this.gitModelService.loadGitModels(project?.slug!, model?.slug!);
+      });
   }
 
   ngOnDestroy(): void {
-    this.gitModelsSubscription?.unsubscribe();
     this.gitModelService.clear();
-    this.t4cModelsSubscription?.unsubscribe();
     this.t4cModelService.clear();
   }
 }
diff --git a/frontend/src/app/projects/models/model-detail/t4c-model-wrapper/t4c-model-wrapper.component.ts b/frontend/src/app/projects/models/model-detail/t4c-model-wrapper/t4c-model-wrapper.component.ts
index f6dad88247..108204c052 100644
--- a/frontend/src/app/projects/models/model-detail/t4c-model-wrapper/t4c-model-wrapper.component.ts
+++ b/frontend/src/app/projects/models/model-detail/t4c-model-wrapper/t4c-model-wrapper.component.ts
@@ -5,20 +5,20 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { combineLatest, filter, map, Subscription, switchMap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { combineLatest, filter, map, switchMap } from 'rxjs';
 import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
 import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
 import { ModelService } from 'src/app/projects/models/service/model.service';
 import { ProjectService } from 'src/app/projects/service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-t4c-model-wrapper',
   templateUrl: './t4c-model-wrapper.component.html',
   styleUrls: ['./t4c-model-wrapper.component.css'],
 })
 export class T4cModelWrapperComponent implements OnInit, OnDestroy {
-  private subscription?: Subscription;
-
   constructor(
     private route: ActivatedRoute,
     public projectService: ProjectService,
@@ -28,20 +28,15 @@ export class T4cModelWrapperComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.subscription = combineLatest([
-      this.projectService._project.pipe(
-        filter(Boolean),
-        map((project) => project.slug)
-      ),
-      this.modelService._model.pipe(
-        filter(Boolean),
-        map((model) => model.slug)
-      ),
+    combineLatest([
+      this.projectService.project.pipe(filter(Boolean)),
+      this.modelService.model.pipe(filter(Boolean)),
       this.route.params.pipe(map((params) => parseInt(params.t4c_model_id))),
     ])
       .pipe(
-        switchMap((res: [string, string, number]) =>
-          this.t4cModelService.getT4CModel(...res)
+        untilDestroyed(this),
+        switchMap(([project, model, t4cModelId]) =>
+          this.t4cModelService.getT4CModel(project.slug, model.slug, t4cModelId)
         )
       )
       .subscribe((t4cModel) => {
@@ -52,7 +47,6 @@ export class T4cModelWrapperComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.t4cModelService._t4cModel.next(undefined);
-    this.subscription?.unsubscribe();
     this.breadCrumbsService.updatePlaceholder({ t4cModel: undefined });
   }
 }
diff --git a/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.html b/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.html
index 82b7a09587..8da0d037da 100644
--- a/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.html
+++ b/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.html
@@ -4,10 +4,10 @@
  -->
 
 <div class="wrapper flex-center">
-  <mat-card *ngIf="modelService.model">
+  <mat-card *ngIf="modelService.model | async">
     <mat-card-title>Restrictions for models</mat-card-title>
     <form
-      *ngIf="this.modelService.model.tool.integrations.pure_variants"
+      *ngIf="(modelService.model | async)!.tool.integrations.pure_variants"
       [formGroup]="restrictionsForm"
     >
       <ng-template #pureVariants>
@@ -21,7 +21,7 @@
         <ng-template [ngTemplateOutlet]="pureVariants"> </ng-template>
       </mat-checkbox>
     </form>
-    <div *ngIf="!this.modelService.model.tool.integrations.pure_variants">
+    <div *ngIf="!(modelService.model | async)!.tool.integrations.pure_variants">
       This model has no restrictions. Please check the documentation for more
       information.
     </div>
diff --git a/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.ts b/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.ts
index b316e7db21..a016286941 100644
--- a/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.ts
+++ b/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.ts
@@ -5,7 +5,8 @@
 
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { filter, Subscription } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import {
   ModelRestrictions,
@@ -17,6 +18,7 @@ import {
 } from 'src/app/projects/models/service/model.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-model-restrictions',
   templateUrl: './model-restrictions.component.html',
@@ -24,7 +26,9 @@ import { ProjectService } from '../../service/project.service';
 })
 export class ModelRestrictionsComponent implements OnInit {
   loading = false;
-  modelServiceSubscription?: Subscription;
+
+  private model?: Model;
+  private projectSlug?: string;
 
   constructor(
     public projectService: ProjectService,
@@ -42,11 +46,16 @@ export class ModelRestrictionsComponent implements OnInit {
       this.patchRestrictions();
     });
 
-    this.modelServiceSubscription = this.modelService._model
-      .pipe(filter(Boolean))
-      .subscribe((model: Model) => {
+    this.modelService.model
+      .pipe(filter(Boolean), untilDestroyed(this))
+      .subscribe((model) => {
+        this.model = model;
         this.updateRestrictionsForm(model.restrictions);
       });
+
+    this.projectService.project.subscribe(
+      (project) => (this.projectSlug = project?.slug)
+    );
   }
 
   private updateRestrictionsForm(restrictions: ModelRestrictions) {
@@ -64,7 +73,7 @@ export class ModelRestrictionsComponent implements OnInit {
 
   private patchRestrictions() {
     if (
-      JSON.stringify(this.modelService.model?.restrictions) ===
+      JSON.stringify(this.model?.restrictions) ===
       JSON.stringify(this.mapRestrictionsFormToToolModelRestrictionsObject())
     ) {
       return;
@@ -73,14 +82,12 @@ export class ModelRestrictionsComponent implements OnInit {
     this.loading = true;
     this.modelRestrictionService
       .patchModelRestrictions(
-        this.projectService.project!.slug,
-        this.modelService.model!.slug,
+        this.projectSlug!,
+        this.model!.slug,
         this.mapRestrictionsFormToToolModelRestrictionsObject()
       )
-      .subscribe((restrictions: ModelRestrictions) => {
-        const newModel = this.modelService.model;
-        newModel!.restrictions = restrictions;
-        this.modelService._model.next(newModel);
+      .subscribe(() => {
+        this.modelService.loadModelbySlug(this.projectSlug!, this.model?.slug!);
         this.loading = false;
       });
   }
diff --git a/frontend/src/app/projects/models/model-source/choose-source.component.html b/frontend/src/app/projects/models/model-source/choose-source.component.html
index a2c33285e7..90c9f4abeb 100644
--- a/frontend/src/app/projects/models/model-source/choose-source.component.html
+++ b/frontend/src/app/projects/models/model-source/choose-source.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div *ngIf="projectService.project && modelService.model">
+<div *ngIf="(projectService.project | async) && (modelService.model | async)">
   <h2 class="title text-center">Git sources</h2>
   <div class="options-list flex-center">
     <button mat-raised-button (click)="modelSourceSelection.emit('git-add')">
@@ -33,7 +33,7 @@ <h2 class="title text-center">Git sources</h2>
     </button>
   </div>
 
-  <div *ngIf="modelService.model.tool?.integrations?.t4c">
+  <div *ngIf="(modelService.model | async)!.tool?.integrations?.t4c">
     <h2 class="title text-center">Team4Capella sources</h2>
     <div class="options-list flex-center">
       <button
diff --git a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
index 61ddfae8b2..514eaf8ac8 100644
--- a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
+++ b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
@@ -4,14 +4,14 @@
  -->
 
 <div
-  *ngIf="projectService.project && modelService.model"
+  *ngIf="(projectService.project | async) && (modelService.model | async)"
   class="wrapper flex-center"
 >
   <mat-card class="section-card">
     <h2>
       Add a {{ asStepper ? "primary" : "" }} source for the model “{{
-        modelService.model.name
-      }}” of the project “{{ projectService.project.name }}”.
+        (modelService.model | async)!.name
+      }}” of the project “{{ (projectService.project | async)?.name }}”.
     </h2>
     <form [formGroup]="form">
       <fieldset *ngIf="!asStepper && isEditMode">
@@ -28,9 +28,9 @@ <h2>
               [value]="selectedGitInstance"
             >
               <mat-option
-                *ngFor="let gitSetting of availableGitInstances"
-                [value]="gitSetting"
-                >{{ gitSetting.url }}</mat-option
+                *ngFor="let gitInstance of availableGitInstances"
+                [value]="gitInstance"
+                >{{ gitInstance.url }}</mat-option
               >
             </mat-select>
             <mat-error *ngIf="urls.baseUrl.errors?.required">
diff --git a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.ts b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.ts
index 68d550348e..d5e321161b 100644
--- a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.ts
+++ b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.ts
@@ -21,7 +21,8 @@ import {
   AsyncValidatorFn,
 } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { filter, map, Observable, of, Subscription } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter, map, Observable, of } from 'rxjs';
 import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import {
@@ -48,6 +49,7 @@ import {
   GitInstancesService,
 } from 'src/app/settings/modelsources/git-settings/service/git-instances.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-manage-git-model',
   templateUrl: './manage-git-model.component.html',
@@ -57,8 +59,8 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
   @Input() asStepper?: boolean;
   @Output() create = new EventEmitter<boolean>();
 
-  public availableGitInstances: Array<GitInstance> | undefined = undefined;
-  public selectedGitInstance: GitInstance | undefined = undefined;
+  public availableGitInstances?: Array<GitInstance>;
+  public selectedGitInstance?: GitInstance;
 
   private availableRevisions: Revisions | undefined = {
     branches: [],
@@ -85,22 +87,19 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
     primary: new FormControl(),
   });
 
+  private projectSlug?: string = undefined;
+  private modelSlug?: string = undefined;
+
   private gitModelId?: number;
   public gitModel?: GetGitModel;
 
   public isEditMode: boolean = false;
   public editing: boolean = false;
 
-  private gitSettingsSubscription?: Subscription;
-  private modelSubscription?: Subscription;
-  private revisionsSubscription?: Subscription;
-  private gitModelSubscription?: Subscription;
-  private paramSubscription?: Subscription;
-
   constructor(
     public projectService: ProjectService,
     public modelService: ModelService,
-    private gitSettingsService: GitInstancesService,
+    private gitInstancesService: GitInstancesService,
     private gitService: GitService,
     private gitModelService: GitModelService,
     private toastService: ToastService,
@@ -114,22 +113,23 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.revisionsSubscription = this.gitService.revisions.subscribe(
-      (revisions) => {
+    this.gitService.revisions
+      .pipe(untilDestroyed(this))
+      .subscribe((revisions) => {
         this.availableRevisions = revisions;
         this.form.controls.revision.updateValueAndValidity();
-      }
-    );
+      });
 
     this.form.controls.revision.valueChanges.subscribe((value) =>
       this.filteredRevisionsByPrefix(value as string)
     );
 
-    this.gitSettingsSubscription =
-      this.gitSettingsService.gitInstances.subscribe((gitSettings) => {
-        this.availableGitInstances = gitSettings;
+    this.gitInstancesService.gitInstances
+      .pipe(untilDestroyed(this))
+      .subscribe((gitInstances) => {
+        this.availableGitInstances = gitInstances;
 
-        if (gitSettings?.length) {
+        if (gitInstances?.length) {
           this.urls.baseUrl.setValidators([Validators.required]);
           this.urls.inputUrl.setValidators([absoluteOrRelativeValidators()]);
           this.form.controls.urls.setAsyncValidators([
@@ -140,7 +140,8 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
         }
       });
 
-    this.modelSubscription = this.modelService._model.subscribe((model) => {
+    this.modelService.model.pipe(untilDestroyed(this)).subscribe((model) => {
+      this.modelSlug = model?.slug;
       if (model?.tool.name === 'Capella') {
         this.form.controls.entrypoint.addValidators(
           Validators.pattern(/^$|\.aird$/)
@@ -148,46 +149,49 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
       }
     });
 
-    this.paramSubscription = this.route.params
-      .pipe(
-        filter((params) => !!params['git-model']),
-        map((params) => params['git-model'])
-      )
-      .subscribe((gitModelId) => {
-        this.isEditMode = true;
-        this.gitModelId = gitModelId;
-        this.form.disable();
-
-        this.gitModelSubscription = this.gitModelService.gitModel.subscribe(
-          (gitModel) => {
-            this.gitModel = gitModel;
-            this.fillFormWithGitModel(gitModel!);
-            this.breadCrumbsService.updatePlaceholder({ gitModel });
-            this.gitService.loadPrivateRevisions(
-              gitModel!.path,
-              this.projectService.project?.slug!,
-              this.modelService.model?.slug!,
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) => {
+        this.projectSlug = project?.slug;
+
+        this.route.params
+          .pipe(
+            filter((params) => !!params['git-model']),
+            map((params) => params['git-model'])
+          )
+          .subscribe((gitModelId) => {
+            this.isEditMode = true;
+            this.gitModelId = gitModelId;
+            this.form.disable();
+
+            this.gitModelService.gitModel
+              .pipe(untilDestroyed(this))
+              .subscribe((gitModel) => {
+                this.gitModel = gitModel;
+                this.fillFormWithGitModel(gitModel!);
+
+                this.breadCrumbsService.updatePlaceholder({ gitModel });
+
+                this.gitService.loadPrivateRevisions(
+                  gitModel!.path,
+                  this.projectSlug!,
+                  this.modelSlug!,
+                  gitModelId
+                );
+              });
+
+            this.gitModelService.loadGitModelById(
+              this.projectSlug!,
+              this.modelSlug!,
               gitModelId
             );
-          }
-        );
-
-        this.gitModelService.loadGitModelById(
-          this.projectService.project!.slug,
-          this.modelService.model!.slug,
-          gitModelId
-        );
+          });
       });
 
-    this.gitSettingsService.loadGitInstances();
+    this.gitInstancesService.loadGitInstances();
   }
 
   ngOnDestroy(): void {
-    this.gitSettingsSubscription?.unsubscribe();
-    this.modelSubscription?.unsubscribe();
-    this.revisionsSubscription?.unsubscribe();
-    this.gitModelSubscription?.unsubscribe();
-    this.paramSubscription?.unsubscribe();
     this.breadCrumbsService.updatePlaceholder({ gitModel: undefined });
   }
 
@@ -199,8 +203,8 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
       ) {
         this.gitService.loadPrivateRevisions(
           this.resultUrl,
-          this.projectService.project?.slug!,
-          this.modelService.model?.slug!,
+          this.projectSlug!,
+          this.modelSlug!,
           this.gitModelId!
         );
       } else {
@@ -240,11 +244,11 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
     this.urls.inputUrl.updateValueAndValidity();
 
     if (changedInputUrl && hasAbsoluteUrlPrefix(changedInputUrl)) {
-      let longestMatchingGitSetting =
-        this.findLongestUrlMatchingGitSetting(changedInputUrl);
-      if (longestMatchingGitSetting) {
-        this.selectedGitInstance = longestMatchingGitSetting;
-        this.urls.baseUrl.setValue(longestMatchingGitSetting);
+      let longestMatchingGitInstance =
+        this.findLongestUrlMatchingGitInstance(changedInputUrl);
+      if (longestMatchingGitInstance) {
+        this.selectedGitInstance = longestMatchingGitInstance;
+        this.urls.baseUrl.setValue(longestMatchingGitInstance);
       } else if (this.availableGitInstances?.length) {
         this.selectedGitInstance = undefined;
         this.urls.baseUrl.reset();
@@ -257,8 +261,8 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
     if (this.form.valid) {
       this.gitModelService
         .addGitSource(
-          this.projectService.project?.slug!,
-          this.modelService.model?.slug!,
+          this.projectSlug!,
+          this.modelSlug!,
           this.createGitModelFromForm()
         )
         .subscribe(() => {
@@ -278,8 +282,8 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
 
       this.gitModelService
         .updateGitRepository(
-          this.projectService.project?.slug!,
-          this.modelService.model?.slug!,
+          this.projectSlug!,
+          this.modelSlug!,
           this.gitModelId!,
           patchGitModel
         )
@@ -311,11 +315,7 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
     }
 
     this.gitModelService
-      .deleteGitSource(
-        this.projectService.project?.slug!,
-        this.modelService.model?.slug!,
-        this.gitModel!
-      )
+      .deleteGitSource(this.projectSlug!, this.modelSlug!, this.gitModel!)
       .subscribe({
         next: () => {
           this.toastService.showSuccess(
@@ -323,8 +323,7 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
             `${this.gitModel!.path} has been deleted`
           );
           this.router.navigateByUrl(
-            `/project/${this.projectService.project?.slug!}/model/${this
-              .modelService.model?.slug!}`
+            `/project/${this.projectSlug!}/model/${this.modelSlug!}`
           );
         },
         error: () => {
@@ -411,11 +410,7 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
       if (!this.resultUrl) return of({ required: 'Resulting URL is required' });
 
       return this.gitModelService
-        .validatePath(
-          this.projectService.project?.slug!,
-          this.modelService.model?.slug!,
-          this.resultUrl
-        )
+        .validatePath(this.projectSlug!, this.modelSlug!, this.resultUrl)
         .pipe(
           map((prefixExists: boolean) => {
             if (prefixExists) {
@@ -462,21 +457,21 @@ export class ManageGitModelComponent implements OnInit, OnDestroy {
     };
   }
 
-  private findLongestUrlMatchingGitSetting(
+  private findLongestUrlMatchingGitInstance(
     url: string
   ): GitInstance | undefined {
-    let longestMatchingGitSetting = undefined;
+    let longestMatchingGitInstance = undefined;
     let longestUrlLength = 0;
-    this.availableGitInstances?.forEach((gitSetting) => {
+    this.availableGitInstances?.forEach((gitInstance) => {
       if (
-        url.startsWith(gitSetting.url) &&
-        gitSetting.url.length > longestUrlLength
+        url.startsWith(gitInstance.url) &&
+        gitInstance.url.length > longestUrlLength
       ) {
-        longestMatchingGitSetting = gitSetting;
-        longestUrlLength = gitSetting.url.length;
+        longestMatchingGitInstance = gitInstance;
+        longestUrlLength = gitInstance.url.length;
       }
     });
 
-    return longestMatchingGitSetting;
+    return longestMatchingGitInstance;
   }
 }
diff --git a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
index 137d0320fc..1068efce4a 100644
--- a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
+++ b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
@@ -4,7 +4,7 @@
  -->
 
 <div
-  *ngIf="projectService.project && modelService.model"
+  *ngIf="(projectService.project | async) && (modelService.model | async)"
   class="wrapper flex-center"
 >
   <mat-card class="section-card">
diff --git a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.ts b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.ts
index 05576ecb63..7c59c8be9d 100644
--- a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.ts
+++ b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.ts
@@ -13,7 +13,8 @@ import {
 } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable, switchMap, tap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { combineLatest, Observable, switchMap, tap } from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import {
   SubmitT4CModel,
@@ -31,6 +32,7 @@ import {
   T4CRepository,
 } from 'src/app/settings/modelsources/t4c-settings/service/t4c-repos/t4c-repo.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-manage-t4c-model',
   templateUrl: './manage-t4c-model.component.html',
@@ -40,6 +42,9 @@ export class ManageT4CModelComponent implements OnInit, OnDestroy {
   @Input() asStepper?: boolean;
   @Output() create = new EventEmitter<boolean>();
 
+  private projectSlug?: string;
+  private modelSlug?: string;
+
   editing = false;
   loading = false;
 
@@ -85,6 +90,13 @@ export class ManageT4CModelComponent implements OnInit, OnDestroy {
       .subscribe(() => {
         this.loading = false;
       });
+
+    combineLatest([this.projectService.project, this.modelService.model])
+      .pipe(untilDestroyed(this))
+      .subscribe(([project, model]) => {
+        this.projectSlug = project?.slug;
+        this.modelSlug = model?.slug;
+      });
   }
 
   fetchT4CInstances(): Observable<T4CInstance[]> {
@@ -145,8 +157,8 @@ export class ManageT4CModelComponent implements OnInit, OnDestroy {
     if (this.t4cModelService.t4cModel) {
       this.t4cModelService
         .patchT4CModel(
-          this.projectService.project!.slug,
-          this.modelService.model!.slug,
+          this.projectSlug!,
+          this.modelSlug!,
           this.t4cModelService.t4cModel.id,
           this.form.value as SubmitT4CModel
         )
@@ -161,8 +173,8 @@ export class ManageT4CModelComponent implements OnInit, OnDestroy {
     } else {
       this.t4cModelService
         .createT4CModel(
-          this.projectService.project!.slug,
-          this.modelService.model!.slug,
+          this.projectSlug!,
+          this.modelSlug!,
           this.form.value as SubmitT4CModel
         )
         .subscribe((_) => {
@@ -189,11 +201,7 @@ export class ManageT4CModelComponent implements OnInit, OnDestroy {
     }
 
     this.t4cModelService
-      .unlinkT4CModel(
-        this.projectService.project?.slug!,
-        this.modelService.model?.slug!,
-        this.t4cModel!.id
-      )
+      .unlinkT4CModel(this.projectSlug!, this.modelSlug!, this.t4cModel!.id)
       .subscribe({
         next: () => {
           this.toastService.showSuccess(
@@ -201,8 +209,7 @@ export class ManageT4CModelComponent implements OnInit, OnDestroy {
             `${this.t4cModel!.name} has been deleted`
           );
           this.router.navigateByUrl(
-            `/project/${this.projectService.project?.slug!}/model/${this
-              .modelService.model?.slug!}`
+            `/project/${this.projectSlug!}/model/${this.modelSlug!}`
           );
         },
         error: () => {
diff --git a/frontend/src/app/projects/models/model-source/t4c/service/t4c-model.service.ts b/frontend/src/app/projects/models/model-source/t4c/service/t4c-model.service.ts
index 2d60b0c284..d2057c7170 100644
--- a/frontend/src/app/projects/models/model-source/t4c/service/t4c-model.service.ts
+++ b/frontend/src/app/projects/models/model-source/t4c/service/t4c-model.service.ts
@@ -25,8 +25,8 @@ export class T4CModelService {
     return this._t4cModels.value;
   }
 
-  urlFactory(project_slug: string, model_slug: string): string {
-    return `${environment.backend_url}/projects/${project_slug}/models/${model_slug}/modelsources/t4c`;
+  urlFactory(projectSlug: string, modelSlug: string): string {
+    return `${environment.backend_url}/projects/${projectSlug}/models/${modelSlug}/modelsources/t4c`;
   }
 
   listT4CModels(
@@ -39,21 +39,21 @@ export class T4CModelService {
   }
 
   getT4CModel(
-    project_slug: string,
-    model_slug: string,
+    projectSlug: string,
+    modelSlug: string,
     id: number
   ): Observable<T4CModel> {
     return this.http.get<T4CModel>(
-      `${this.urlFactory(project_slug, model_slug)}/${id}`
+      `${this.urlFactory(projectSlug, modelSlug)}/${id}`
     );
   }
 
   createT4CModel(
-    project_slug: string,
-    model_slug: string,
+    projectSlug: string,
+    modelSlug: string,
     body: SubmitT4CModel
   ): Observable<T4CModel> {
-    return this.http.post<T4CModel>(this.urlFactory(project_slug, model_slug), {
+    return this.http.post<T4CModel>(this.urlFactory(projectSlug, modelSlug), {
       t4c_instance_id: body.t4cInstanceId,
       t4c_repository_id: body.t4cRepositoryId,
       name: body.name,
@@ -61,13 +61,13 @@ export class T4CModelService {
   }
 
   patchT4CModel(
-    project_slug: string,
-    model_slug: string,
+    projectSlug: string,
+    modelSlug: string,
     t4c_model_id: number,
     body: SubmitT4CModel
   ): Observable<T4CModel> {
     return this.http.patch<T4CModel>(
-      `${this.urlFactory(project_slug, model_slug)}/${t4c_model_id}`,
+      `${this.urlFactory(projectSlug, modelSlug)}/${t4c_model_id}`,
       {
         t4c_instance_id: body.t4cInstanceId,
         t4c_repository_id: body.t4cRepositoryId,
diff --git a/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.html b/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.html
index 4b90e9452e..9acdec4fa8 100644
--- a/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.html
+++ b/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.html
@@ -3,4 +3,4 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<router-outlet *ngIf="modelService.model"></router-outlet>
+<router-outlet *ngIf="modelService.model | async"></router-outlet>
diff --git a/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.ts b/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.ts
index 9679868854..975f3c2d2c 100644
--- a/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.ts
+++ b/frontend/src/app/projects/models/model-wrapper/model-wrapper.component.ts
@@ -5,21 +5,20 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription, combineLatest, filter, map, switchMap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { combineLatest, map } from 'rxjs';
 import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
 import { T4CModelService } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
 import { ModelService } from 'src/app/projects/models/service/model.service';
 import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-model-wrapper',
   templateUrl: './model-wrapper.component.html',
   styleUrls: ['./model-wrapper.component.css'],
 })
 export class ModelWrapperComponent implements OnInit, OnDestroy {
-  subscription?: Subscription;
-  breadcrumbSubscription?: Subscription;
-
   constructor(
     private route: ActivatedRoute,
     public modelService: ModelService,
@@ -29,31 +28,25 @@ export class ModelWrapperComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.subscription = combineLatest([
+    combineLatest([
       this.route.params.pipe(map((params) => params.model as string)),
-      this.projectService._project.pipe(
-        filter(Boolean),
-        map((project) => project.slug)
-      ),
+      this.projectService.project,
     ])
-      .pipe(switchMap((args) => this.modelService.getModelBySlug(...args)))
-      .subscribe({
-        next: this.modelService._model.next.bind(this.modelService._model),
-        error: (_) => {
-          this.modelService._model.next(undefined);
-        },
-      });
+      .pipe(untilDestroyed(this))
+      .subscribe(([modelSlug, project]) =>
+        this.modelService.loadModelbySlug(modelSlug, project?.slug!)
+      );
 
-    this.breadcrumbSubscription = this.modelService._model.subscribe((model) =>
-      this.breadcrumbService.updatePlaceholder({ model })
-    );
+    this.modelService.model
+      .pipe(untilDestroyed(this))
+      .subscribe((model) =>
+        this.breadcrumbService.updatePlaceholder({ model })
+      );
   }
 
   ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
-    this.breadcrumbSubscription?.unsubscribe();
     this.breadcrumbService.updatePlaceholder({ model: undefined });
-    this.modelService._model.next(undefined);
+    this.modelService.clearModel();
     this.t4cModelService._t4cModels.next(undefined);
   }
 }
diff --git a/frontend/src/app/projects/models/service/model.service.ts b/frontend/src/app/projects/models/service/model.service.ts
index 0db0b8d167..6dc3d7b718 100644
--- a/frontend/src/app/projects/models/service/model.service.ts
+++ b/frontend/src/app/projects/models/service/model.service.ts
@@ -5,7 +5,13 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  ValidationErrors,
+} from '@angular/forms';
+import { BehaviorSubject, map, Observable, take, tap } from 'rxjs';
+import slugify from 'slugify';
 import { ModelRestrictions } from 'src/app/projects/models/model-restrictions/service/model-restrictions.service';
 import { T4CModel } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
 import { GetGitModel } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
@@ -16,98 +22,153 @@ import {
 } from 'src/app/settings/core/tools-settings/tool.service';
 import { environment } from 'src/environments/environment';
 
-export type NewModel = {
-  name: string;
-  description: string;
-  tool_id: number;
-};
-
-export type Model = {
-  id: number;
-  project_slug: string;
-  slug: string;
-  name: string;
-  description: string;
-  tool: Tool;
-  version?: ToolVersion;
-  nature?: ToolNature;
-  t4c_models: T4CModel[];
-  git_models: GetGitModel[];
-  restrictions: ModelRestrictions;
-};
-
-export type PatchModel = {
-  description?: string;
-  nature_id?: number;
-  version_id?: number;
-};
-
 @Injectable({
   providedIn: 'root',
 })
 export class ModelService {
   base_url = environment.backend_url + '/projects/';
 
-  _model = new BehaviorSubject<Model | undefined>(undefined);
-  _models = new BehaviorSubject<Model[] | undefined>(undefined);
-
-  backendURLFactory(projectSlug: string, modelSlug: string) {
-    return `${this.base_url}${projectSlug}/models/${modelSlug}`;
-  }
-
-  get model(): Model | undefined {
-    return this._model.value;
-  }
+  constructor(private http: HttpClient) {}
 
-  get models(): Model[] | undefined {
-    return this._models.value;
-  }
+  private _model = new BehaviorSubject<Model | undefined>(undefined);
+  private _models = new BehaviorSubject<Model[] | undefined>(undefined);
 
-  constructor(private http: HttpClient) {}
+  readonly model = this._model.asObservable();
+  readonly models = this._models.asObservable();
 
-  getModels(project_slug: string): Observable<Model[]> {
-    return this.http.get<Model[]>(`${this.base_url}${project_slug}/models`);
+  backendURLFactory(projectSlug: string, modelSlug: string) {
+    return `${this.base_url}${projectSlug}/models/${modelSlug}`;
   }
 
-  getModelBySlug(slug: string, project_slug: string): Observable<Model> {
-    return this.http.get<Model>(
-      `${this.base_url}${project_slug}/models/${slug}/`
-    );
+  loadModels(projectSlug: string): void {
+    this.http.get<Model[]>(`${this.base_url}${projectSlug}/models`).subscribe({
+      next: (models) => this._models.next(models),
+      error: () => this._models.next(undefined),
+    });
   }
 
-  createNewModel(project_slug: string, model: NewModel): Observable<Model> {
-    return this.http.post<Model>(
-      `${this.base_url}${project_slug}/models`,
-      model
-    );
+  loadModelbySlug(modelSlug: string, projectSlug: string): void {
+    this.http
+      .get<Model>(`${this.base_url}${projectSlug}/models/${modelSlug}/`)
+      .subscribe({
+        next: (model) => this._model.next(model),
+        error: () => this._model.next(undefined),
+      });
   }
 
-  deleteModel(project_slug: string, model: Model): Observable<void> {
-    return this.http.delete<void>(
-      `${this.base_url}${project_slug}/models/${model.slug}`
-    );
+  createModel(projectSlug: string, model: NewModel): Observable<Model> {
+    return this.http
+      .post<Model>(`${this.base_url}${projectSlug}/models`, model)
+      .pipe(
+        tap({
+          next: (model) => {
+            this.loadModels(projectSlug);
+            this._model.next(model);
+          },
+          error: () => this._model.next(undefined),
+        })
+      );
   }
 
   setToolDetailsForModel(
-    project_slug: string,
-    model_slug: string,
+    projectSlug: string,
+    modelSlug: string,
     version_id: number,
     nature_id: number
   ): Observable<Model> {
-    return this.http.patch<Model>(
-      `${this.base_url}${project_slug}/models/${model_slug}/`,
-      { version_id, nature_id }
-    );
+    return this.http
+      .patch<Model>(`${this.base_url}${projectSlug}/models/${modelSlug}/`, {
+        version_id,
+        nature_id,
+      })
+      .pipe(
+        tap({
+          next: (model) => {
+            this.loadModels(projectSlug);
+            this._model.next(model);
+          },
+          error: () => this._model.next(undefined),
+        })
+      );
   }
 
   updateModelDescription(
-    project_slug: string,
-    model_slug: string,
+    projectSlug: string,
+    modelSlug: string,
     patchModel: PatchModel
   ): Observable<Model> {
-    return this.http.patch<Model>(
-      `${this.base_url}${project_slug}/models/${model_slug}/`,
-      patchModel
-    );
+    return this.http
+      .patch<Model>(
+        `${this.base_url}${projectSlug}/models/${modelSlug}/`,
+        patchModel
+      )
+      .pipe(
+        tap({
+          next: (model) => {
+            this.loadModels(projectSlug);
+            this._model.next(model);
+          },
+          error: () => this._model.next(undefined),
+        })
+      );
+  }
+
+  deleteModel(projectSlug: string, modelSlug: string): Observable<void> {
+    return this.http
+      .delete<void>(`${this.base_url}${projectSlug}/models/${modelSlug}`)
+      .pipe(
+        tap(() => {
+          this.loadModels(projectSlug);
+          this._model.next(undefined);
+        })
+      );
+  }
+
+  clearModel(): void {
+    this._model.next(undefined);
+  }
+
+  clearModels(): void {
+    this._models.next(undefined);
+  }
+
+  asyncSlugValidator(): AsyncValidatorFn {
+    return (control: AbstractControl): Observable<ValidationErrors | null> => {
+      const modelSlug = slugify(control.value, { lower: true });
+      return this.models.pipe(
+        take(1),
+        map((models) => {
+          return models?.find((model) => model.slug === modelSlug)
+            ? { uniqueSlug: { value: modelSlug } }
+            : null;
+        })
+      );
+    };
   }
 }
+
+export type NewModel = {
+  name: string;
+  description: string;
+  tool_id: number;
+};
+
+export type Model = {
+  id: number;
+  project_slug: string;
+  slug: string;
+  name: string;
+  description: string;
+  tool: Tool;
+  version?: ToolVersion;
+  nature?: ToolNature;
+  t4c_models: T4CModel[];
+  git_models: GetGitModel[];
+  restrictions: ModelRestrictions;
+};
+
+export type PatchModel = {
+  description?: string;
+  nature_id?: number;
+  version_id?: number;
+};
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html
index 0707c6d5a3..3d59a6f9fa 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html
+++ b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html
@@ -3,20 +3,28 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="models" *ngIf="models">
+<div class="models" *ngIf="modelService.models | async">
   <div class="models-title">
     <h2>
       Models
       <a
         mat-button
-        [routerLink]="['/project', project.slug, 'models', 'create']"
+        [routerLink]="[
+          '/project',
+          (projectService.project | async)!.slug,
+          'models',
+          'create'
+        ]"
         *ngIf="projectUserService.verifyRole('manager')"
       >
         <mat-icon id="add-icon">add</mat-icon>
       </a>
     </h2>
   </div>
-  <mat-card class="overview-card" *ngFor="let model of models">
+  <mat-card
+    class="overview-card"
+    *ngFor="let model of modelService.models | async"
+  >
     <div class="header">
       <div class="header-text">
         <div class="title">{{ model.name }}</div>
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
index 2f9675c540..894339358e 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
+++ b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { first } from 'rxjs';
 import { ModelDiagramDialogComponent } from 'src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component';
 import {
   Model,
@@ -15,30 +17,30 @@ import { UserService } from 'src/app/services/user/user.service';
 import { NewReadonlySessionDialogComponent } from 'src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component';
 import { SessionService } from 'src/app/sessions/service/session.service';
 import { TriggerPipelineComponent } from '../../models/backup-settings/trigger-pipeline/trigger-pipeline.component';
-import { Project, ProjectService } from '../../service/project.service';
+import { ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-model-overview',
   templateUrl: './model-overview.component.html',
   styleUrls: ['./model-overview.component.css'],
 })
 export class ModelOverviewComponent implements OnInit {
-  @Input() project!: Project;
-  models?: Model[];
+  projectSlug?: string;
 
   constructor(
-    public projectService: ProjectService,
     public modelService: ModelService,
-    private dialog: MatDialog,
     public sessionService: SessionService,
     public projectUserService: ProjectUserService,
-    public userService: UserService
+    public userService: UserService,
+    public projectService: ProjectService,
+    private dialog: MatDialog
   ) {}
 
   ngOnInit(): void {
-    this.modelService._models.pipe().subscribe((models) => {
-      this.models = models;
-    });
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) => (this.projectSlug = project?.slug));
   }
 
   getPrimaryWorkingMode(model: Model): string {
@@ -51,8 +53,10 @@ export class ModelOverviewComponent implements OnInit {
   }
 
   openPipelineDialog(model: Model): void {
-    this.dialog.open(TriggerPipelineComponent, {
-      data: { project: this.project, model: model },
+    this.projectService.project.pipe(first()).subscribe((project) => {
+      this.dialog.open(TriggerPipelineComponent, {
+        data: { projectSlug: project!.slug, modelSlug: model.slug },
+      });
     });
   }
 
@@ -60,7 +64,7 @@ export class ModelOverviewComponent implements OnInit {
     this.dialog.open(ModelDiagramDialogComponent, {
       height: '80vh',
       width: '80vw',
-      data: { model: model },
+      data: { modelSlug: model.slug, projectSlug: this.projectSlug },
     });
   }
 
@@ -75,7 +79,7 @@ export class ModelOverviewComponent implements OnInit {
 
   newReadonlySession(model: Model) {
     this.dialog.open(NewReadonlySessionDialogComponent, {
-      data: { project: this.project, model: model },
+      data: { projectSlug: this.projectSlug, model: model },
     });
   }
 }
diff --git a/frontend/src/app/projects/project-detail/project-details.component.html b/frontend/src/app/projects/project-detail/project-details.component.html
index 751aad0337..0b529d7ff0 100644
--- a/frontend/src/app/projects/project-detail/project-details.component.html
+++ b/frontend/src/app/projects/project-detail/project-details.component.html
@@ -3,25 +3,15 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="flexbox">
+<div class="flexbox" *ngIf="projectService.project | async">
   <div class="item">
-    <div
-      *ngIf="projectService.project && projectUserService.verifyRole('manager')"
-    >
-      <app-project-metadata
-        [project]="projectService.project"
-      ></app-project-metadata>
+    <div *ngIf="projectUserService.verifyRole('manager')">
+      <app-project-metadata></app-project-metadata>
       <mat-divider></mat-divider>
     </div>
-    <app-model-overview
-      *ngIf="projectService.project"
-      [project]="projectService.project"
-    ></app-model-overview>
+    <app-model-overview></app-model-overview>
   </div>
   <div class="users" *ngIf="projectUserService.verifyRole('manager')">
-    <app-project-user-settings
-      *ngIf="projectService.project"
-      [project]="projectService.project"
-    ></app-project-user-settings>
+    <app-project-user-settings></app-project-user-settings>
   </div>
 </div>
diff --git a/frontend/src/app/projects/project-detail/project-details.component.ts b/frontend/src/app/projects/project-detail/project-details.component.ts
index 0c5d1b4560..4495faa8e8 100644
--- a/frontend/src/app/projects/project-detail/project-details.component.ts
+++ b/frontend/src/app/projects/project-detail/project-details.component.ts
@@ -4,8 +4,6 @@
  */
 
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
 import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
 import { ProjectService } from '../service/project.service';
 
@@ -15,11 +13,8 @@ import { ProjectService } from '../service/project.service';
   styleUrls: ['./project-details.component.css'],
 })
 export class ProjectDetailsComponent {
-  projectSubscription?: Subscription;
-
   constructor(
     public projectService: ProjectService,
-    public projectUserService: ProjectUserService,
-    public activatedRoute: ActivatedRoute
+    public projectUserService: ProjectUserService
   ) {}
 }
diff --git a/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.html b/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.html
index d5bc0045c8..843c0908ea 100644
--- a/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.html
+++ b/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.html
@@ -17,7 +17,8 @@ <h2 id="title">Metadata</h2>
           <mat-error *ngIf="form.controls.name.errors?.uniqueSlug"
             >A project with a similar name already exists.</mat-error
           >
-          <mat-hint *ngIf="project.slug !== newSlug && form.controls.name.valid"
+          <mat-hint
+            *ngIf="project?.slug !== newSlug && form.controls.name.valid"
             >If you proceed, the project slug will be changed to
             <i>{{ newSlug }}</i> - Please make sure to update all
             references.</mat-hint
@@ -33,7 +34,7 @@ <h2 id="title">Metadata</h2>
             rows="3"
             style="resize: none"
             [placeholder]="
-              'This is the description of the project ' + project!.name
+              'This is the description of the project ' + project?.name
             "
           ></textarea>
         </mat-form-field>
@@ -55,7 +56,7 @@ <h2 id="title">Metadata</h2>
       </span>
       <button
         [disabled]="!form.valid"
-        (click)="updateDescription()"
+        (click)="updateProject()"
         mat-raised-button
         id="submit"
       >
diff --git a/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.ts b/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.ts
index c742b91b1a..7c43d616ae 100644
--- a/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.ts
+++ b/frontend/src/app/projects/project-detail/project-metadata/project-metadata.component.ts
@@ -6,20 +6,15 @@
 import {
   Component,
   EventEmitter,
-  Input,
   OnChanges,
+  OnInit,
   Output,
   SimpleChanges,
 } from '@angular/core';
-import {
-  AbstractControl,
-  FormControl,
-  FormGroup,
-  ValidationErrors,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
 import slugify from 'slugify';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { ModelService } from 'src/app/projects/models/service/model.service';
@@ -29,22 +24,17 @@ import {
   ProjectService,
 } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-project-metadata',
   templateUrl: './project-metadata.component.html',
   styleUrls: ['./project-metadata.component.css'],
 })
-export class ProjectMetadataComponent implements OnChanges {
-  @Input() project!: Project;
+export class ProjectMetadataComponent implements OnInit, OnChanges {
   @Output() changeProject = new EventEmitter<Project>();
 
-  public form = new FormGroup({
-    name: new FormControl<string>('', [
-      Validators.required,
-      this.slugValidator(),
-    ]),
-    description: new FormControl<string>(''),
-  });
+  canDelete: boolean = false;
+  project?: Project;
 
   constructor(
     private toastService: ToastService,
@@ -54,17 +44,36 @@ export class ProjectMetadataComponent implements OnChanges {
     private route: ActivatedRoute
   ) {}
 
+  form = new FormGroup({
+    name: new FormControl<string>('', Validators.required),
+    description: new FormControl<string>(''),
+  });
+
+  ngOnInit(): void {
+    this.projectService.project
+      .pipe(untilDestroyed(this), filter(Boolean))
+      .subscribe((project) => {
+        this.project = project;
+        this.form.controls.name.setAsyncValidators(
+          this.projectService.asyncSlugValidator(project)
+        );
+        this.form.patchValue(project);
+      });
+
+    this.modelService.models
+      .pipe(untilDestroyed(this), filter(Boolean))
+      .subscribe((models) => (this.canDelete = !models.length));
+  }
+
   ngOnChanges(_changes: SimpleChanges): void {
-    this.projectService.list().subscribe();
-    this.form.patchValue(this.project);
+    this.projectService.loadProjectBySlug(this.project?.slug!);
   }
 
-  updateDescription() {
-    if (this.form.valid) {
+  updateProject() {
+    if (this.form.valid && this.project) {
       this.projectService
         .updateProject(this.project.slug, this.form.value as PatchProject)
         .subscribe((project) => {
-          this.projectService._project.next(project);
           this.router.navigateByUrl(`/project/${project.slug}`);
           this.toastService.showSuccess(
             'Project updated',
@@ -76,34 +85,14 @@ export class ProjectMetadataComponent implements OnChanges {
     }
   }
 
-  slugValidator(): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-      const slug = slugify(control.value, { lower: true });
-      if (
-        this.projectService.projects
-          ?.map((project) => project.slug)
-          .filter((slug) => slug !== this.projectService.project?.slug)
-          .includes(slug)
-      ) {
-        return { uniqueSlug: { value: slug } };
-      }
-      return null;
-    };
-  }
-
   get newSlug(): string | null {
     return this.form.value.name ? slugify(this.form.value.name) : null;
   }
 
-  get canDelete(): boolean {
-    return !this.modelService.models?.length;
-  }
-
   deleteProject(): void {
-    const project = this.project;
-
     if (
       !this.canDelete ||
+      !this.project ||
       !window.confirm(
         `Do you really want to delete this project? All assigned users will lose access to it! The project cannot be restored!`
       )
@@ -111,18 +100,20 @@ export class ProjectMetadataComponent implements OnChanges {
       return;
     }
 
-    this.projectService.deleteProject(project.slug).subscribe({
+    const projectSlug: string = this.project.slug;
+
+    this.projectService.deleteProject(projectSlug).subscribe({
       next: () => {
         this.toastService.showSuccess(
           'Project deleted',
-          `${project.name} has been deleted`
+          `${projectSlug} has been deleted`
         );
         this.router.navigate(['../../projects'], { relativeTo: this.route });
       },
       error: () => {
         this.toastService.showError(
           'Project deletion failed',
-          `${project.name} has not been deleted`
+          `${projectSlug} has not been deleted`
         );
       },
     });
diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
index 581badb858..47d785715f 100644
--- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
+++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
@@ -59,7 +59,7 @@ <h2>Manage users</h2>
       (click)="removeUserFromProject(selectedUser.user)"
     >
       <mat-icon>delete</mat-icon> Remove {{ selectedUser.user.name }} from
-      {{ project.name }}
+      {{ project?.name }}
     </button>
     <button
       mat-flat-button
diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts
index b1fcb712b9..3c13b50d39 100644
--- a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts
+++ b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.ts
@@ -5,8 +5,8 @@
 
 import {
   Component,
-  Input,
   OnChanges,
+  OnInit,
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
@@ -20,6 +20,8 @@ import {
   Validators,
 } from '@angular/forms';
 import { MatLegacySelectionList as MatSelectionList } from '@angular/material/legacy-list';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import {
   ProjectUser,
@@ -28,15 +30,16 @@ import {
   SimpleProjectUserRole,
 } from 'src/app/projects/project-detail/project-users/service/project-user.service';
 import { User, UserService } from 'src/app/services/user/user.service';
-import { Project } from '../../service/project.service';
+import { Project, ProjectService } from '../../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-project-user-settings',
   templateUrl: './project-user-settings.component.html',
   styleUrls: ['./project-user-settings.component.css'],
 })
-export class ProjectUserSettingsComponent implements OnChanges {
-  @Input() project!: Project;
+export class ProjectUserSettingsComponent implements OnInit, OnChanges {
+  public project?: Project;
 
   projectUsers: ProjectUser[] = [];
   search = '';
@@ -59,9 +62,24 @@ export class ProjectUserSettingsComponent implements OnChanges {
   constructor(
     public projectUserService: ProjectUserService,
     public userService: UserService,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private projectService: ProjectService
   ) {}
 
+  ngOnInit(): void {
+    this.projectService.project
+      .pipe(filter(Boolean), untilDestroyed(this))
+      .subscribe((project) => {
+        this.project = project;
+
+        this.projectUserService
+          .getProjectUsers(project.slug)
+          .subscribe((projectUsers) => {
+            this.projectUsers = projectUsers;
+          });
+      });
+  }
+
   ngOnChanges(_changes: SimpleChanges): void {
     this.refreshProjectUsers();
   }
@@ -101,7 +119,7 @@ export class ProjectUserSettingsComponent implements OnChanges {
 
   refreshProjectUsers(): void {
     this.projectUserService
-      .getProjectUsers(this.project.slug)
+      .getProjectUsers(this.project?.slug!)
       .subscribe((projectUsers) => {
         this.projectUsers = projectUsers;
       });
@@ -117,7 +135,7 @@ export class ProjectUserSettingsComponent implements OnChanges {
       }
       this.projectUserService
         .addUserToProject(
-          this.project.slug,
+          this.project?.slug!,
           formValue.username as string,
           formValue.role as SimpleProjectUserRole,
           permission as string,
@@ -129,7 +147,7 @@ export class ProjectUserSettingsComponent implements OnChanges {
           this.refreshProjectUsers();
           this.toastService.showSuccess(
             `User added`,
-            `User '${formValue.username}' has been added to project '${this.project.name}'`
+            `User '${formValue.username}' has been added to project '${this.project?.name}'`
           );
         });
     }
@@ -142,12 +160,12 @@ export class ProjectUserSettingsComponent implements OnChanges {
     }
 
     this.projectUserService
-      .deleteUserFromProject(this.project.slug, user.id, reason)
+      .deleteUserFromProject(this.project?.slug!, user.id, reason)
       .subscribe(() => {
         this.refreshProjectUsers();
         this.toastService.showSuccess(
           `User removed`,
-          `User '${user.name}' has been removed from project '${this.project.name}'`
+          `User '${user.name}' has been removed from project '${this.project?.name}'`
         );
       });
   }
@@ -159,12 +177,12 @@ export class ProjectUserSettingsComponent implements OnChanges {
     }
 
     this.projectUserService
-      .changeRoleOfProjectUser(this.project.slug, user.id, 'manager', reason)
+      .changeRoleOfProjectUser(this.project?.slug!, user.id, 'manager', reason)
       .subscribe(() => {
         this.refreshProjectUsers();
         this.toastService.showSuccess(
           `User modified`,
-          `User '${user.name}' can now manage the project '${this.project.name}'`
+          `User '${user.name}' can now manage the project '${this.project?.name}'`
         );
       });
   }
@@ -176,12 +194,12 @@ export class ProjectUserSettingsComponent implements OnChanges {
     }
 
     this.projectUserService
-      .changeRoleOfProjectUser(this.project.slug, user.id, 'user', reason)
+      .changeRoleOfProjectUser(this.project?.slug!, user.id, 'user', reason)
       .subscribe(() => {
         this.refreshProjectUsers();
         this.toastService.showSuccess(
           `User modified`,
-          `User '${user.name}' is no longer project lead in the project '${this.project.name}'`
+          `User '${user.name}' is no longer project lead in the project '${this.project?.name}'`
         );
       });
   }
@@ -194,7 +212,7 @@ export class ProjectUserSettingsComponent implements OnChanges {
 
     this.projectUserService
       .changePermissionOfProjectUser(
-        this.project.slug,
+        this.project?.slug!,
         user.id,
         permission,
         reason
@@ -203,7 +221,7 @@ export class ProjectUserSettingsComponent implements OnChanges {
         this.refreshProjectUsers();
         this.toastService.showSuccess(
           `User modified`,
-          `User '${user.name}' has the permission '${permission}' in the project '${this.project.name}' now`
+          `User '${user.name}' has the permission '${permission}' in the project '${this.project?.name}' now`
         );
       });
   }
diff --git a/frontend/src/app/projects/project-overview/project-overview.component.html b/frontend/src/app/projects/project-overview/project-overview.component.html
index 568e574646..e66c30178d 100644
--- a/frontend/src/app/projects/project-overview/project-overview.component.html
+++ b/frontend/src/app/projects/project-overview/project-overview.component.html
@@ -15,11 +15,11 @@
     </mat-card>
   </a>
   <app-mat-card-overview-skeleton-loader
-    [loading]="loading"
+    [loading]="(projectService.projects | async) === undefined"
   ></app-mat-card-overview-skeleton-loader>
-  <ng-container *ngIf="!loading">
+  <ng-container *ngIf="projectService.projects | async">
     <a
-      *ngFor="let project of projectService.projects"
+      *ngFor="let project of (projectService.projects | async)!"
       [routerLink]="['/project', project.slug]"
     >
       <mat-card matRipple class="mat-card-overview">
diff --git a/frontend/src/app/projects/project-overview/project-overview.component.ts b/frontend/src/app/projects/project-overview/project-overview.component.ts
index 0b2bcaaed1..58537abe41 100644
--- a/frontend/src/app/projects/project-overview/project-overview.component.ts
+++ b/frontend/src/app/projects/project-overview/project-overview.component.ts
@@ -4,7 +4,6 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { tap } from 'rxjs';
 import { ProjectService, UserMetadata } from '../service/project.service';
 
 @Component({
@@ -13,15 +12,10 @@ import { ProjectService, UserMetadata } from '../service/project.service';
   styleUrls: ['./project-overview.component.css'],
 })
 export class ProjectOverviewComponent implements OnInit {
-  loading = true;
-
   constructor(public projectService: ProjectService) {}
 
   ngOnInit() {
-    this.projectService
-      .list()
-      .pipe(tap(() => (this.loading = false)))
-      .subscribe();
+    this.projectService.loadProjects();
   }
 
   sumUsers(user: UserMetadata): number {
diff --git a/frontend/src/app/projects/project-wrapper/project-wrapper.component.ts b/frontend/src/app/projects/project-wrapper/project-wrapper.component.ts
index 615ea1c403..c2c7512259 100644
--- a/frontend/src/app/projects/project-wrapper/project-wrapper.component.ts
+++ b/frontend/src/app/projects/project-wrapper/project-wrapper.component.ts
@@ -5,25 +5,20 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subject, Subscription, connectable, map, switchMap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { map } from 'rxjs';
 import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
-import {
-  Model,
-  ModelService,
-} from 'src/app/projects/models/service/model.service';
+import { ModelService } from 'src/app/projects/models/service/model.service';
 import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
-import { Project, ProjectService } from '../service/project.service';
+import { ProjectService } from '../service/project.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-project-wrapper',
   templateUrl: './project-wrapper.component.html',
   styleUrls: ['./project-wrapper.component.css'],
 })
 export class ProjectWrapperComponent implements OnInit, OnDestroy {
-  projectSubscription?: Subscription;
-  modelsSubscription?: Subscription;
-  projectUserSubscription?: Subscription;
-
   constructor(
     private route: ActivatedRoute,
     public projectService: ProjectService,
@@ -33,60 +28,28 @@ export class ProjectWrapperComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    const paramSubject = connectable<string>(
-      this.route.params.pipe(map((params) => params.project)),
-      {
-        connector: () => new Subject(),
-        resetOnDisconnect: false,
-      }
-    );
-
-    this.projectSubscription = paramSubject
+    this.route.params
       .pipe(
-        switchMap((projectSlug: string) =>
-          this.projectService.getProjectBySlug(projectSlug)
-        )
+        map((params) => params.project),
+        untilDestroyed(this)
       )
-      .subscribe({
-        next: (project: Project) => {
-          this.breadcrumbsService.updatePlaceholder({ project });
-          this.projectService._project.next(project);
-        },
-        error: () => {
-          this.projectService._project.next(undefined);
-        },
+      .subscribe((projectSlug: string) => {
+        this.projectService.loadProjectBySlug(projectSlug);
+        this.modelService.loadModels(projectSlug);
+        this.projectUserService.getOwnProjectUser(projectSlug).subscribe();
       });
 
-    this.modelsSubscription = paramSubject
-      .pipe(
-        switchMap((projectSlug: string) =>
-          this.modelService.getModels(projectSlug)
-        )
-      )
-      .subscribe({
-        next: (models: Model[]) => this.modelService._models.next(models),
-        error: () => {
-          this.modelService._models.next(undefined);
-        },
-      });
-
-    this.projectUserSubscription = paramSubject
-      .pipe(
-        switchMap((projectSlug: string) =>
-          this.projectUserService.getOwnProjectUser(projectSlug)
-        )
-      )
-      .subscribe();
-
-    paramSubject.connect();
+    this.projectService.project
+      .pipe(untilDestroyed(this))
+      .subscribe((project) =>
+        this.breadcrumbsService.updatePlaceholder({ project })
+      );
   }
 
   ngOnDestroy(): void {
-    this.projectSubscription?.unsubscribe();
-    this.modelsSubscription?.unsubscribe();
-    this.projectUserSubscription?.unsubscribe();
-    this.projectService._project.next(undefined);
-    this.modelService._models.next(undefined);
+    this.projectService.clearProject();
+    this.modelService.clearModel();
+    this.modelService.clearModels();
     this.projectUserService.projectUser.next(undefined);
     this.breadcrumbsService.updatePlaceholder({ project: undefined });
   }
diff --git a/frontend/src/app/projects/service/project.service.spec.ts b/frontend/src/app/projects/service/project.service.spec.ts
deleted file mode 100644
index 43dfbf7dda..0000000000
--- a/frontend/src/app/projects/service/project.service.spec.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { HttpParams } from '@angular/common/http';
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-
-import { environment } from 'src/environments/environment';
-import { ProjectService, Project, PatchProject } from './project.service';
-
-const BACKEND_PROJECTS_URL = environment.backend_url + '/projects/';
-
-const testProjectName = 'test-project-name';
-const testProjectSlug = 'test-project-slug';
-const testProjectDescription = 'test-project-description';
-
-const mockProject: Project = {
-  name: testProjectName,
-  slug: testProjectSlug,
-  description: testProjectDescription,
-  users: {
-    leads: 0,
-    contributors: 0,
-    subscribers: 0,
-  },
-};
-
-describe('ProjectService', () => {
-  let projectService: ProjectService;
-  let httpTestingController: HttpTestingController;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [ProjectService],
-      imports: [HttpClientTestingModule],
-    });
-
-    projectService = TestBed.inject(ProjectService);
-    httpTestingController = TestBed.inject(HttpTestingController);
-  });
-
-  afterEach(() => {
-    httpTestingController.verify();
-  });
-
-  it('should return a project by its name', () => {
-    projectService.getProject(testProjectName).subscribe({
-      next: (project) => expect(project).toEqual(mockProject),
-    });
-
-    const req = httpTestingController.expectOne(
-      BACKEND_PROJECTS_URL + testProjectName
-    );
-    expect(req.request.method).toEqual('GET');
-    expect(req.request.params).toEqual(new HttpParams());
-
-    req.flush(mockProject);
-  });
-
-  it('should return a project by its slug', () => {
-    projectService.getProjectBySlug(testProjectSlug).subscribe({
-      next: (project) => expect(project).toEqual(mockProject),
-    });
-
-    const req = httpTestingController.expectOne(
-      BACKEND_PROJECTS_URL + testProjectSlug
-    );
-    expect(req.request.method).toEqual('GET');
-    expect(req.request.body).toBeNull();
-
-    req.flush(mockProject);
-  });
-
-  it('should return all projects', () => {
-    projectService.list().subscribe({
-      next: (projects) => expect(projects).toEqual([mockProject]),
-    });
-
-    const req = httpTestingController.expectOne(BACKEND_PROJECTS_URL);
-    expect(req.request.method).toEqual('GET');
-    expect(req.request.body).toBeNull();
-
-    req.flush([mockProject]);
-  });
-
-  it('should create a project and return it', () => {
-    projectService
-      .createProject({
-        name: testProjectName,
-        description: testProjectDescription,
-      })
-      .subscribe({
-        next: (project) => expect(project).toEqual(mockProject),
-      });
-
-    const req = httpTestingController.expectOne(BACKEND_PROJECTS_URL);
-    expect(req.request.method).toEqual('POST');
-    expect(req.request.body).toEqual({
-      name: testProjectName,
-      description: testProjectDescription,
-    });
-
-    req.flush(mockProject);
-  });
-
-  it('should update the project', () => {
-    const updatedMockProjectDescription = 'update-test-project-description';
-    const updatedMockProjectName = 'update-test-project-name';
-    let updatedMockProject: Project = mockProject;
-
-    let patchMockProject: PatchProject = {
-      name: updatedMockProjectName,
-      description: updatedMockProjectDescription,
-    };
-    updatedMockProject.description = updatedMockProjectDescription;
-    updatedMockProject.name = updatedMockProjectName;
-
-    projectService.updateProject(testProjectSlug, patchMockProject).subscribe({
-      next: (project) =>
-        expect(project as PatchProject).toEqual(updatedMockProject),
-    });
-
-    const req = httpTestingController.expectOne(
-      BACKEND_PROJECTS_URL + testProjectSlug
-    );
-    expect(req.request.method).toEqual('PATCH');
-    expect(req.request.body).toEqual({
-      description: updatedMockProjectDescription,
-      name: updatedMockProjectName,
-    });
-  });
-
-  it('should return the project inserted into the BehaviorSubject', () => {
-    projectService._project.next(mockProject);
-    expect(projectService.project).toEqual(mockProject);
-  });
-
-  it('should return the projects inserted into BehaviorSubject', () => {
-    projectService._projects.next([mockProject]);
-    expect(projectService.projects).toEqual([mockProject]);
-  });
-});
diff --git a/frontend/src/app/projects/service/project.service.ts b/frontend/src/app/projects/service/project.service.ts
index 1aaed08e74..739f789910 100644
--- a/frontend/src/app/projects/service/project.service.ts
+++ b/frontend/src/app/projects/service/project.service.ts
@@ -5,71 +5,103 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, tap } from 'rxjs';
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  ValidationErrors,
+} from '@angular/forms';
+import { BehaviorSubject, map, Observable, take, tap } from 'rxjs';
+import slugify from 'slugify';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ProjectService {
-  base_url = environment.backend_url + '/projects/';
+  BACKEND_URL_PREFIX = environment.backend_url + '/projects';
 
-  _project = new BehaviorSubject<Project | undefined>(undefined);
-  _projects = new BehaviorSubject<Project[] | undefined>(undefined);
+  constructor(private http: HttpClient) {}
 
-  get project() {
-    return this._project.value;
-  }
+  private _project = new BehaviorSubject<Project | undefined>(undefined);
+  private _projects = new BehaviorSubject<Project[] | undefined>(undefined);
 
-  get projects() {
-    return this._projects.value;
-  }
-
-  constructor(private http: HttpClient) {}
+  readonly project = this._project.asObservable();
+  readonly projects = this._projects.asObservable();
 
-  getProjectBySlug(slug: string): Observable<Project> {
-    return this.http.get<Project>(this.base_url + slug);
+  loadProjects(): void {
+    this.http.get<Project[]>(this.BACKEND_URL_PREFIX).subscribe({
+      next: (projects) => this._projects.next(projects),
+      error: () => this._projects.next(undefined),
+    });
   }
 
-  list(): Observable<Project[]> {
-    return this.http
-      .get<Project[]>(this.base_url)
-      .pipe(tap((projects: Project[]) => this._projects.next(projects)));
+  loadProjectBySlug(slug: string): void {
+    this.http.get<Project>(`${this.BACKEND_URL_PREFIX}/${slug}`).subscribe({
+      next: (project) => this._project.next(project),
+      error: () => this._project.next(undefined),
+    });
   }
 
-  getProject(name: string): Observable<Project> {
-    return this.http.get<Project>(this.base_url + name);
+  createProject(project: Required<PatchProject>): Observable<Project> {
+    return this.http.post<Project>(this.BACKEND_URL_PREFIX, project).pipe(
+      tap({
+        next: (project) => {
+          this.loadProjects();
+          this._project.next(project);
+        },
+        error: () => this._project.next(undefined),
+      })
+    );
   }
 
   updateProject(
     project_slug: string,
     project: PatchProject
   ): Observable<Project> {
-    return this.http.patch<Project>(this.base_url + project_slug, project);
-  }
-
-  createProject(
-    project: Required<PatchProject>,
-    update?: boolean
-  ): Observable<Project> {
-    let observable = this.http.post<Project>(this.base_url, project);
-    if (update) {
-      observable = observable.pipe(
+    return this.http
+      .patch<Project>(`${this.BACKEND_URL_PREFIX}/${project_slug}`, project)
+      .pipe(
         tap({
-          next: (value) => {
-            this._project.next(value);
-          },
-          error: (_) => {
-            this._project.next(undefined);
+          next: (project) => {
+            this.loadProjects();
+            this._project.next(project);
           },
+          error: () => this._project.next(undefined),
         })
       );
-    }
-    return observable;
   }
 
   deleteProject(projectSlug: string): Observable<void> {
-    return this.http.delete<void>(this.base_url + projectSlug);
+    return this.http
+      .delete<void>(`${this.BACKEND_URL_PREFIX}/${projectSlug}`)
+      .pipe(
+        tap(() => {
+          this.loadProjects();
+          this._project.next(undefined);
+        })
+      );
+  }
+
+  clearProject(): void {
+    this._project.next(undefined);
+  }
+
+  asyncSlugValidator(ignoreProject?: Project): AsyncValidatorFn {
+    let ignoreSlug = !!ignoreProject ? ignoreProject.slug : -1;
+    return (control: AbstractControl): Observable<ValidationErrors | null> => {
+      const projectSlug = slugify(control.value, { lower: true });
+      return this.projects.pipe(
+        take(1),
+        map((projects) => {
+          return projects?.find(
+            (project) =>
+              project.slug === projectSlug && project.slug !== ignoreSlug
+          )
+            ? { uniqueSlug: { value: projectSlug } }
+            : null;
+        })
+      );
+    };
   }
 }
 
diff --git a/frontend/src/app/sessions/active-sessions/file-browser/file-browser.component.ts b/frontend/src/app/sessions/active-sessions/file-browser/file-browser.component.ts
index 630f8b47b7..e877917c05 100644
--- a/frontend/src/app/sessions/active-sessions/file-browser/file-browser.component.ts
+++ b/frontend/src/app/sessions/active-sessions/file-browser/file-browser.component.ts
@@ -5,7 +5,7 @@
 
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { HttpEvent, HttpEventType } from '@angular/common/http';
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import {
   MAT_DIALOG_DATA,
@@ -13,7 +13,7 @@ import {
   MatDialogRef,
 } from '@angular/material/dialog';
 import { saveAs } from 'file-saver';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import { PathNode, Session } from 'src/app/schemes';
 import { LoadFilesService } from 'src/app/services/load-files/load-files.service';
@@ -24,10 +24,7 @@ import { FileExistsDialogComponent } from './file-exists-dialog/file-exists-dial
   templateUrl: 'file-browser.component.html',
   styleUrls: ['file-browser.component.css'],
 })
-export class FileBrowserComponent implements OnInit, OnDestroy {
-  private subscription: Subscription | undefined;
-  private downloadSubscription: Subscription | undefined;
-
+export class FileBrowserComponent implements OnInit {
   files: Array<[File, string]> = [];
   uploadProgress: number | null = null;
   loadingFiles = false;
@@ -64,10 +61,6 @@ export class FileBrowserComponent implements OnInit, OnDestroy {
       });
   }
 
-  ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
-  }
-
   hasChild = (_: number, node: PathNode) => !!node.children;
 
   addFiles(files: FileList | null, path: string, parentNode: PathNode): void {
@@ -231,51 +224,37 @@ export class FileBrowserComponent implements OnInit, OnDestroy {
     });
     formData.append('id', this.session.id);
 
-    this.subscription = this.loadService
-      .upload(this.session.id, formData)
-      .subscribe({
-        next: (event: HttpEvent<any>) => {
-          if (event.type == HttpEventType.Response) {
-            this.dialogRef.close();
-          } else if (
-            event.type == HttpEventType.UploadProgress &&
-            event.total
-          ) {
-            this.uploadProgress = Math.round(
-              100 * (event.loaded / event.total)
-            );
-          }
-        },
-        error: () => {
-          this.reset();
-        },
-      });
+    this.loadService.upload(this.session.id, formData).subscribe({
+      next: (event: HttpEvent<any>) => {
+        if (event.type == HttpEventType.Response) {
+          this.dialogRef.close();
+        } else if (event.type == HttpEventType.UploadProgress && event.total) {
+          this.uploadProgress = Math.round(100 * (event.loaded / event.total));
+        }
+      },
+      error: () => {
+        this.reset();
+      },
+    });
   }
 
   download(filename: string) {
     this.session.download_in_progress = true;
-    this.downloadSubscription = this.loadService
-      .download(this.session.id, filename)
-      .subscribe({
-        next: (response: Blob) => {
-          saveAs(
-            response,
-            `${filename
-              .replace(/^[\/\\: ]+/, '')
-              .replace(/[\/\\: ]+/g, '_')}.zip`
-          );
-          this.session.download_in_progress = false;
-        },
-        error: () => {
-          this.session.download_in_progress = false;
-        },
-      });
+    this.loadService.download(this.session.id, filename).subscribe({
+      next: (response: Blob) => {
+        saveAs(
+          response,
+          `${filename.replace(/^[\/\\: ]+/, '').replace(/[\/\\: ]+/g, '_')}.zip`
+        );
+        this.session.download_in_progress = false;
+      },
+      error: () => {
+        this.session.download_in_progress = false;
+      },
+    });
   }
 
   reset() {
-    this.subscription?.unsubscribe();
-    this.downloadSubscription?.unsubscribe();
     this.uploadProgress = null;
-    this.subscription = undefined;
   }
 }
diff --git a/frontend/src/app/sessions/create-persistent-session/create-persistent-session.component.ts b/frontend/src/app/sessions/create-persistent-session/create-persistent-session.component.ts
index 3cc174e78d..6bbe741fcb 100644
--- a/frontend/src/app/sessions/create-persistent-session/create-persistent-session.component.ts
+++ b/frontend/src/app/sessions/create-persistent-session/create-persistent-session.component.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Session } from 'src/app/schemes';
 import {
   ToolService,
@@ -14,14 +14,14 @@ import {
 import { SessionService } from '../service/session.service';
 import { UserSessionService } from '../service/user-session.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-create-persistent-session',
   templateUrl: './create-persistent-session.component.html',
   styleUrls: ['./create-persistent-session.component.css'],
 })
-export class CreatePersistentSessionComponent implements OnInit, OnDestroy {
-  persistentSession?: Session = undefined;
-  private persistentSessionsSubscription?: Subscription;
+export class CreatePersistentSessionComponent implements OnInit {
+  persistentSession?: Session;
 
   versions: ToolVersion[] = [];
 
@@ -39,14 +39,9 @@ export class CreatePersistentSessionComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.toolService.getTools().subscribe();
 
-    this.persistentSessionsSubscription =
-      this.userSessionService.persistentSessions.subscribe(
-        (sessions) => (this.persistentSession = sessions?.at(0))
-      );
-  }
-
-  ngOnDestroy(): void {
-    this.persistentSessionsSubscription?.unsubscribe();
+    this.userSessionService.persistentSessions
+      .pipe(untilDestroyed(this))
+      .subscribe((sessions) => (this.persistentSession = sessions?.at(0)));
   }
 
   requestPersistentSession() {
diff --git a/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.html b/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.html
index cb77a1f9b7..ea51444948 100644
--- a/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.html
+++ b/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.html
@@ -12,7 +12,7 @@ <h2>Open Readonly Session</h2>
     <div>
       <div *ngFor="let options of modelOptions">
         <new-readonly-model-options
-          [projectSlug]="data.project.slug"
+          [projectSlug]="data.projectSlug"
           [modelOptions]="options"
         >
         </new-readonly-model-options>
diff --git a/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.ts b/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.ts
index 56867d2c84..0ae1b2de95 100644
--- a/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.ts
+++ b/frontend/src/app/sessions/new-readonly-session-dialog/new-readonly-session-dialog.component.ts
@@ -7,16 +7,18 @@ import { Component, Inject, OnInit } from '@angular/core';
 
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { map } from 'rxjs';
 
 import {
   Model,
   ModelService,
 } from 'src/app/projects/models/service/model.service';
 import { GetGitModel } from 'src/app/projects/project-detail/model-overview/model-detail/git-model.service';
-import { Project } from 'src/app/projects/service/project.service';
 import { ModelOptions } from 'src/app/sessions/new-readonly-session-dialog/new-readonly-model-options/new-readonly-model-options.component';
 import { SessionService } from '../service/session.service';
 
+@UntilDestroy()
 @Component({
   selector: 'new-readonly-session-dialog',
   templateUrl: './new-readonly-session-dialog.component.html',
@@ -25,9 +27,9 @@ import { SessionService } from '../service/session.service';
 export class NewReadonlySessionDialogComponent implements OnInit {
   constructor(
     public sessionService: SessionService,
-    private router: Router,
     public modelService: ModelService,
-    @Inject(MAT_DIALOG_DATA) public data: { project: Project; model: Model }
+    private router: Router,
+    @Inject(MAT_DIALOG_DATA) public data: { projectSlug: string; model: Model }
   ) {}
 
   private _modelOptions: ModelOptions[] = [];
@@ -37,24 +39,34 @@ export class NewReadonlySessionDialogComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.modelService.getModels(this.data.project.slug).subscribe((models) => {
-      models
-        .filter((m) => m.version?.id == this.data.model.version?.id)
-        .forEach((model) => {
-          const primary_git_model = get_primary_git_model(model);
-          if (!primary_git_model) {
+    this.modelService.models
+      .pipe(
+        untilDestroyed(this),
+        map((models) =>
+          models?.filter(
+            (model) => model.version?.id === this.data.model.version?.id
+          )
+        )
+      )
+      .subscribe((models) => {
+        this._modelOptions = [];
+        models?.forEach((model) => {
+          const primaryGitModel = getPrimaryGitModel(model);
+          if (!primaryGitModel) {
             return;
           }
 
           this._modelOptions.push({
             model: model,
-            primary_git_model: primary_git_model,
+            primary_git_model: primaryGitModel,
             include: model.id === this.data.model.id,
-            revision: primary_git_model.revision,
+            revision: primaryGitModel.revision,
             deepClone: false,
           });
         });
-    });
+      });
+
+    this.modelService.loadModels(this.data.projectSlug);
   }
 
   requestSession(): void {
@@ -66,7 +78,7 @@ export class NewReadonlySessionDialogComponent implements OnInit {
 
     this.sessionService
       .createReadonlySession(
-        this.data.project.slug,
+        this.data.projectSlug,
         included.map((m) => {
           return {
             model_slug: m.model.slug,
@@ -82,6 +94,6 @@ export class NewReadonlySessionDialogComponent implements OnInit {
   }
 }
 
-function get_primary_git_model(model: Model): GetGitModel | undefined {
-  return model.git_models.find((gm) => gm.primary);
+function getPrimaryGitModel(model: Model): GetGitModel | undefined {
+  return model.git_models.find((gitModel) => gitModel.primary);
 }
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/user-sessions-wrapper.component.ts b/frontend/src/app/sessions/user-sessions-wrapper/user-sessions-wrapper.component.ts
index 2332919f5b..3a9d52a4af 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/user-sessions-wrapper.component.ts
+++ b/frontend/src/app/sessions/user-sessions-wrapper/user-sessions-wrapper.component.ts
@@ -3,27 +3,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription, tap, timer } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { tap, timer } from 'rxjs';
 import { UserSessionService } from '../service/user-session.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-user-sessions-wrapper',
   templateUrl: './user-sessions-wrapper.component.html',
   styleUrls: ['./user-sessions-wrapper.component.css'],
 })
-export class UserSessionsWrapperComponent implements OnInit, OnDestroy {
+export class UserSessionsWrapperComponent implements OnInit {
   constructor(private userSessionService: UserSessionService) {}
 
-  private refreshSessionsSubscription?: Subscription;
-
   ngOnInit(): void {
-    this.refreshSessionsSubscription = timer(0, 2000)
-      .pipe(tap(() => this.userSessionService.loadSessions()))
+    timer(0, 2000)
+      .pipe(
+        tap(() => this.userSessionService.loadSessions()),
+        untilDestroyed(this)
+      )
       .subscribe();
   }
-
-  ngOnDestroy(): void {
-    this.refreshSessionsSubscription?.unsubscribe();
-  }
 }
diff --git a/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.html b/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.html
index dfa8182f68..f385f20c98 100644
--- a/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.html
+++ b/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.html
@@ -7,7 +7,7 @@
   <div class="title">Edit Instance</div>
   <br />
   <mat-card>
-    <form [formGroup]="gitSettingsForm" id="add-instance-form">
+    <form [formGroup]="gitInstanceForm" id="add-instance-form">
       <mat-form-field class="form-field-default" appearance="fill">
         <mat-label>Git Type</mat-label>
         <mat-select matInput formControlName="type">
@@ -33,7 +33,7 @@
       </mat-form-field>
       <br />
       <mat-form-field
-        *ngIf="gitSettingsForm.controls.type.value !== 'General'"
+        *ngIf="gitInstanceForm.controls.type.value !== 'General'"
         class="form-field-default"
         appearance="fill"
       >
@@ -47,7 +47,7 @@
         [class]="'right-button'"
         mat-flat-button
         color="primary"
-        (click)="editGitSettings()"
+        (click)="editGitInstance()"
       >
         Save changes
       </button>
diff --git a/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.ts b/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.ts
index c05aa3be1d..9ba4e6c565 100644
--- a/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.ts
+++ b/frontend/src/app/settings/modelsources/git-settings/edit-git-settings/edit-git-settings.component.ts
@@ -6,13 +6,15 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { filter, Subscription } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
 import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
 import {
   GitInstance,
   GitInstancesService,
 } from 'src/app/settings/modelsources/git-settings/service/git-instances.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-edit-git-settings',
   templateUrl: './edit-git-settings.component.html',
@@ -21,7 +23,7 @@ import {
 export class EditGitSettingsComponent implements OnInit, OnDestroy {
   id: number = -1;
 
-  gitSettingsForm = new FormGroup({
+  gitInstanceForm = new FormGroup({
     type: new FormControl('', Validators.required),
     name: new FormControl('', Validators.required),
     url: new FormControl('', Validators.required),
@@ -31,39 +33,34 @@ export class EditGitSettingsComponent implements OnInit, OnDestroy {
   constructor(
     private router: Router,
     private route: ActivatedRoute,
-    private gitSettingsService: GitInstancesService,
+    private gitInstancesService: GitInstancesService,
     private breadcrumbsService: BreadcrumbsService
   ) {}
 
-  private gitSettingsSubscription?: Subscription;
-  private paramsSubscription?: Subscription;
-
   ngOnInit(): void {
-    this.gitSettingsSubscription = this.gitSettingsService.gitInstance
-      .pipe(filter(Boolean))
+    this.gitInstancesService.gitInstance
+      .pipe(filter(Boolean), untilDestroyed(this))
       .subscribe((instance: GitInstance) => {
-        this.gitSettingsForm.patchValue(instance);
+        this.gitInstanceForm.patchValue(instance);
         this.breadcrumbsService.updatePlaceholder({ gitInstance: instance });
       });
 
-    this.paramsSubscription = this.route.params.subscribe((params) => {
+    this.route.params.pipe(untilDestroyed(this)).subscribe((params) => {
       this.id = params['id'];
       if (!!this.id) {
-        this.gitSettingsService.loadGitInstanceById(this.id);
+        this.gitInstancesService.loadGitInstanceById(this.id);
       }
     });
   }
 
   ngOnDestroy(): void {
-    this.gitSettingsSubscription?.unsubscribe();
-    this.paramsSubscription?.unsubscribe();
     this.breadcrumbsService.updatePlaceholder({ gitInstance: undefined });
   }
 
-  editGitSettings() {
-    this.gitSettingsService
+  editGitInstance() {
+    this.gitInstancesService
       .editGitInstance({
-        ...this.gitSettingsForm.value,
+        ...this.gitInstanceForm.value,
         id: this.id,
       } as GitInstance)
       .subscribe((_) => this.goBack());
diff --git a/frontend/src/app/settings/modelsources/git-settings/git-settings.component.html b/frontend/src/app/settings/modelsources/git-settings/git-settings.component.html
index 1a046af961..89577a0614 100644
--- a/frontend/src/app/settings/modelsources/git-settings/git-settings.component.html
+++ b/frontend/src/app/settings/modelsources/git-settings/git-settings.component.html
@@ -4,11 +4,11 @@
  -->
 
 <div class="wrapper">
-  <div class="title" *ngIf="availableGitSettings.length">
+  <div class="title" *ngIf="availableGitInstances.length">
     Existing instances
   </div>
-  <div class="instances" *ngIf="availableGitSettings.length">
-    <mat-card *ngFor="let instance of availableGitSettings">
+  <div class="instances" *ngIf="availableGitInstances.length">
+    <mat-card *ngFor="let instance of availableGitInstances">
       <div class="mat-title">
         <div class="instance-head">
           {{ instance.name }}
@@ -21,7 +21,7 @@
           >
             <mat-icon aria-label="Edit the source">settings</mat-icon>
           </a>
-          <button mat-icon-button (click)="deleteGitSettings(instance.id)">
+          <button mat-icon-button (click)="deleteGitInstance(instance.id)">
             <mat-icon aria-label="Delete the source">delete</mat-icon>
           </button>
         </div>
@@ -88,7 +88,7 @@
   <button
     mat-raised-button
     [disabled]="!gitInstancesForm.valid"
-    (click)="createGitSettings()"
+    (click)="createGitInstance()"
   >
     Create Integration
   </button>
diff --git a/frontend/src/app/settings/modelsources/git-settings/git-settings.component.ts b/frontend/src/app/settings/modelsources/git-settings/git-settings.component.ts
index 14b8ccf30c..5664887755 100644
--- a/frontend/src/app/settings/modelsources/git-settings/git-settings.component.ts
+++ b/frontend/src/app/settings/modelsources/git-settings/git-settings.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import {
   AbstractControl,
   FormControl,
@@ -13,7 +13,8 @@ import {
   Validators,
 } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { filter, Subscription } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { filter } from 'rxjs';
 import { absoluteUrlValidator } from 'src/app/helpers/validators/url-validator';
 import { DeleteGitSettingsDialogComponent } from 'src/app/settings/modelsources/git-settings/delete-git-settings-dialog/delete-git-settings-dialog.component';
 import {
@@ -22,13 +23,14 @@ import {
   GitType,
 } from 'src/app/settings/modelsources/git-settings/service/git-instances.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-git-settings',
   templateUrl: './git-settings.component.html',
   styleUrls: ['./git-settings.component.css'],
 })
-export class GitSettingsComponent implements OnInit, OnDestroy {
-  public availableGitSettings: GitInstance[] = [];
+export class GitSettingsComponent implements OnInit {
+  public availableGitInstances: GitInstance[] = [];
 
   gitInstancesForm = new FormGroup({
     type: new FormControl('', Validators.required),
@@ -37,36 +39,30 @@ export class GitSettingsComponent implements OnInit, OnDestroy {
     apiURL: new FormControl('', absoluteUrlValidator()),
   });
 
-  private gitSettingsSubscription?: Subscription;
-
   constructor(
-    private gitSettingsService: GitInstancesService,
     public dialog: MatDialog,
-    public dialogRef: MatDialogRef<DeleteGitSettingsDialogComponent>
+    public dialogRef: MatDialogRef<DeleteGitSettingsDialogComponent>,
+    private gitInstancesService: GitInstancesService
   ) {}
 
   ngOnInit(): void {
-    this.gitSettingsService.gitInstances
-      .pipe(filter(Boolean))
+    this.gitInstancesService.gitInstances
+      .pipe(filter(Boolean), untilDestroyed(this))
       .subscribe((gitInstances) => {
-        this.availableGitSettings = gitInstances;
+        this.availableGitInstances = gitInstances;
       });
 
-    this.gitSettingsService.loadGitInstances();
-  }
-
-  ngOnDestroy(): void {
-    this.gitSettingsSubscription?.unsubscribe();
+    this.gitInstancesService.loadGitInstances();
   }
 
-  createGitSettings(): void {
+  createGitInstance(): void {
     if (this.gitInstancesForm.valid) {
       let url = this.gitInstancesForm.value.url!;
       if (url.endsWith('/')) {
         url = url.slice(0, -1);
       }
 
-      this.gitSettingsService
+      this.gitInstancesService
         .createGitInstance({
           name: this.gitInstancesForm.value.name!,
           url: url,
@@ -77,30 +73,30 @@ export class GitSettingsComponent implements OnInit, OnDestroy {
     }
   }
 
-  deleteGitSettings(id: number): void {
-    const toDeleteGitSetting: GitInstance = this.availableGitSettings.find(
-      (gitSetting) => gitSetting.id == id
+  deleteGitInstance(id: number): void {
+    const toDeleteGitInstance: GitInstance = this.availableGitInstances.find(
+      (gitInstance) => gitInstance.id == id
     )!;
     this.dialog
       .open(DeleteGitSettingsDialogComponent, {
-        data: toDeleteGitSetting,
+        data: toDeleteGitInstance,
       })
       .afterClosed()
       .subscribe((response) => {
         if (response) {
-          this.gitSettingsService.deleteGitInstance(id).subscribe();
+          this.gitInstancesService.deleteGitInstance(id).subscribe();
         }
       });
   }
 
   nameValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
-      const existingGitSetting = this.availableGitSettings.find(
-        (gitSetting) => gitSetting.name == control.value
+      const existingGitInstance = this.availableGitInstances.find(
+        (gitInstance) => gitInstance.name == control.value
       );
 
-      if (existingGitSetting) {
-        return { uniqueName: { value: existingGitSetting.name } };
+      if (existingGitInstance) {
+        return { uniqueName: { value: existingGitInstance.name } };
       }
       return null;
     };
diff --git a/frontend/src/app/settings/modelsources/git-settings/service/git-instances.service.ts b/frontend/src/app/settings/modelsources/git-settings/service/git-instances.service.ts
index 85babe6a3e..a2c3e5df70 100644
--- a/frontend/src/app/settings/modelsources/git-settings/service/git-instances.service.ts
+++ b/frontend/src/app/settings/modelsources/git-settings/service/git-instances.service.ts
@@ -37,7 +37,7 @@ export class GitInstancesService {
           );
         })
       )
-      .subscribe((gitSettings) => this._gitInstances.next(gitSettings));
+      .subscribe((gitInstance) => this._gitInstances.next(gitInstance));
   }
 
   transformGitInstance(
@@ -52,7 +52,7 @@ export class GitInstancesService {
   loadGitInstanceById(id: number): void {
     this.http
       .get<GitInstance>(this.BACKEND_URL_PREFIX + '/' + id)
-      .subscribe((gitSetting) => this._gitInstance.next(gitSetting));
+      .subscribe((gitInstance) => this._gitInstance.next(gitInstance));
   }
 
   createGitInstance(gitInstance: BasicGitInstance): Observable<GitInstance> {
diff --git a/frontend/src/app/settings/modelsources/t4c-settings/edit-t4c-instance/edit-t4c-instance.component.ts b/frontend/src/app/settings/modelsources/t4c-settings/edit-t4c-instance/edit-t4c-instance.component.ts
index 52ffeaf7e4..7eb35115a2 100644
--- a/frontend/src/app/settings/modelsources/t4c-settings/edit-t4c-instance/edit-t4c-instance.component.ts
+++ b/frontend/src/app/settings/modelsources/t4c-settings/edit-t4c-instance/edit-t4c-instance.component.ts
@@ -6,14 +6,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import {
-  BehaviorSubject,
-  filter,
-  map,
-  Subscription,
-  switchMap,
-  tap,
-} from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { BehaviorSubject, filter, map, switchMap, tap } from 'rxjs';
 import { BreadcrumbsService } from 'src/app/general/breadcrumbs/breadcrumbs.service';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
 import {
@@ -28,6 +22,7 @@ import {
   ToolVersion,
 } from 'src/app/settings/core/tools-settings/tool.service';
 
+@UntilDestroy()
 @Component({
   selector: 'app-edit-t4c-instance',
   templateUrl: './edit-t4c-instance.component.html',
@@ -35,7 +30,6 @@ import {
 })
 export class EditT4CInstanceComponent implements OnInit, OnDestroy {
   editing: boolean = false;
-  paramsSubscription?: Subscription;
 
   existing: boolean = false;
 
@@ -89,7 +83,7 @@ export class EditT4CInstanceComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.paramsSubscription = this.route.params
+    this.route.params
       .pipe(
         map((params) => params.instance),
         filter(Boolean),
@@ -97,7 +91,8 @@ export class EditT4CInstanceComponent implements OnInit, OnDestroy {
           this.existing = true;
           this.form.disable();
         }),
-        switchMap((instance) => this.t4cInstanceService.getInstance(instance))
+        switchMap((instance) => this.t4cInstanceService.getInstance(instance)),
+        untilDestroyed(this)
       )
       .subscribe(this._instance);
 
@@ -172,7 +167,6 @@ export class EditT4CInstanceComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.paramsSubscription?.unsubscribe();
     this._instance.next(undefined);
     this.breadcrumbsService.updatePlaceholder({ t4cInstance: undefined });
   }