diff --git a/frontend/src/app/projects/models/create-model/create-model.component.css b/frontend/src/app/projects/models/create-model/create-model.component.css
deleted file mode 100644
index 8535c6938a..0000000000
--- a/frontend/src/app/projects/models/create-model/create-model.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
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 1716d12e92..cfdc9a9c3e 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
@@ -28,7 +28,6 @@ import { ManageT4CModelComponent } from '../model-source/t4c/manage-t4c-model/ma
 @Component({
   selector: 'app-create-model',
   templateUrl: './create-model.component.html',
-  styleUrls: ['./create-model.component.css'],
   standalone: true,
   imports: [
     MatStepper,
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.css b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.css
deleted file mode 100644
index 082fa78f5a..0000000000
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.mat-card {
-  padding: 0 !important;
-}
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 a082da6d5c..8c6f036f3f 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,221 +3,222 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div>
-  <div class="mb-2 mt-1.5 flex items-center">
-    <h2 class="text-xl font-medium">Models</h2>
-    @if (projectUserService.verifyRole("manager")) {
-      <a
+<div class="mb-2 mt-1.5 flex h-9 items-center">
+  <h2 class="text-xl font-medium">Models</h2>
+  @if (projectUserService.verifyRole("manager")) {
+    <a
+      mat-stroked-button
+      class="!ml-4"
+      [routerLink]="
+        project?.is_archived
+          ? null
+          : [
+              '/project',
+              (projectService.project$ | async)?.slug,
+              'models',
+              'create',
+            ]
+      "
+      [matTooltip]="
+        project?.is_archived
+          ? 'You cannot add a model to an archived project'
+          : 'Add a new model'
+      "
+      [disabled]="project?.is_archived"
+      ><div class="flex items-center">
+        <mat-icon id="add-icon">add</mat-icon>
+      </div>
+    </a>
+    @if (models !== undefined && models.length > 1) {
+      <button
         mat-stroked-button
+        matTooltip="Reorder models"
         class="!ml-4"
-        [routerLink]="
-          project?.is_archived
-            ? null
-            : [
-                '/project',
-                (projectService.project$ | async)?.slug,
-                'models',
-                'create',
-              ]
-        "
-        [matTooltip]="
-          project?.is_archived
-            ? 'You cannot add a model to an archived project'
-            : 'Add a new model'
-        "
-        [disabled]="project?.is_archived"
-        ><div class="flex items-center">
-          <mat-icon id="add-icon">add</mat-icon>
+        (click)="openReorderModelsDialog(models)"
+      >
+        <div class="flex items-center">
+          <mat-icon>list</mat-icon>
         </div>
-      </a>
-      @if (models !== undefined && models.length > 1) {
-        <button
-          mat-stroked-button
-          matTooltip="Reorder models"
-          class="!ml-4"
-          (click)="openReorderModelsDialog(models)"
-        >
-          <div class="flex items-center">
-            <mat-icon>list</mat-icon>
-          </div>
-        </button>
-      }
+      </button>
     }
-  </div>
-  <div class="flex flex-wrap gap-2">
-    @if ((modelService.models$ | async) === undefined) {
-      @for (card of [0, 1, 2]; track $index) {
-        <ngx-skeleton-loader
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '280px',
-            width: '500px',
-            margin: '0px',
-            padding: '0px',
-            border: '1px solid white',
-          }"
-        ></ngx-skeleton-loader>
-      }
+  }
+</div>
+<div class="flex max-w-full flex-wrap gap-2">
+  @if ((modelService.models$ | async) === undefined) {
+    @for (card of [0, 1, 2]; track $index) {
+      <ngx-skeleton-loader
+        appearance="circle"
+        class="max-w-full"
+        [theme]="{
+          'border-radius': '5px',
+          height: '280px',
+          width: '500px',
+          margin: '0px',
+          padding: '0px',
+          border: '1px solid white',
+          'max-width': '100%',
+        }"
+      ></ngx-skeleton-loader>
     }
-    @for (model of modelService.models$ | async; track model.id) {
+  }
+  @for (model of modelService.models$ | async; track model.id) {
+    <div
+      class="collab-card flex min-h-[200px] w-full select-none flex-col !p-0 sm:w-[500px]"
+    >
       <div
-        class="collab-card flex min-h-[200px] w-full select-none flex-col !p-0 sm:w-[500px]"
+        class="flex justify-between rounded-t bg-primary p-2.5 align-middle text-white"
       >
-        <div
-          class="flex justify-between rounded-t bg-primary p-2.5 align-middle text-white"
-        >
-          <div class="ml-2.5">
-            <div class="select-text text-xl" style="word-break: break-word">
-              {{ model.name }}
-            </div>
-            <span class="select-text text-base">
-              {{ model.tool.name }}
-              @if (model.version) {
-                {{ model.version.name }}
-              } @else {
-                (Version not specified)
-              }
-            </span>
+        <div class="ml-2.5">
+          <div class="select-text text-xl" style="word-break: break-word">
+            {{ model.name }}
           </div>
+          <span class="select-text text-base">
+            {{ model.tool.name }}
+            @if (model.version) {
+              {{ model.version.name }}
+            } @else {
+              (Version not specified)
+            }
+          </span>
+        </div>
 
-          <div class="flex items-center align-middle">
-            <div
-              class="collab-card mx-[4px] flex h-[50px] items-center !bg-green-800 !p-0 text-white"
-            >
-              <div class="mx-[8px] text-center">
-                <div class="text-xs">Nature</div>
-                <span class="text-sm">
-                  @if (model.nature) {
-                    {{ model.nature.name }}
-                  } @else {
-                    Not specified
-                  }
-                </span>
-              </div>
+        <div class="flex items-center align-middle">
+          <div
+            class="collab-card mx-[4px] flex h-[50px] items-center !bg-green-800 !p-0 text-white"
+          >
+            <div class="mx-[8px] text-center">
+              <div class="text-xs">Nature</div>
+              <span class="text-sm">
+                @if (model.nature) {
+                  {{ model.nature.name }}
+                } @else {
+                  Not specified
+                }
+              </span>
             </div>
-            <div
-              class="collab-card mx-[4px] flex h-[50px] items-center !bg-red-800 !p-0 text-white"
-            >
-              <div class="mx-[8px] text-center">
-                <div class="text-nowrap text-xs">Working mode</div>
-                <div class="text-sm">
-                  {{ getPrimaryWorkingMode(model) }}
-                </div>
+          </div>
+          <div
+            class="collab-card mx-[4px] flex h-[50px] items-center !bg-red-800 !p-0 text-white"
+          >
+            <div class="mx-[8px] text-center">
+              <div class="text-nowrap text-xs">Working mode</div>
+              <div class="text-sm">
+                {{ getPrimaryWorkingMode(model) }}
               </div>
             </div>
           </div>
         </div>
-        <div class="flex grow flex-col justify-between">
-          <div class="m-2.5 select-text">
-            {{ model.description || "This model has no description." }}
-          </div>
-          <div class="flex justify-center">
-            @if (model.tool.name === "Capella") {
-              <app-model-complexity-badge
-                class="w-[95%]"
-                [modelSlug]="model.slug"
-              ></app-model-complexity-badge>
-            }
-          </div>
-          <div class="m-2.5">
-            @if (userService.user?.role === "administrator") {
-              <a
-                mat-mini-fab
-                color="primary"
-                matTooltip="Model restrictions"
-                class="!m-1.5"
-                [routerLink]="['model', model.slug, 'restrictions']"
-              >
-                <mat-icon>key</mat-icon>
-              </a>
-            }
-            @if (projectUserService.verifyRole("manager")) {
-              <a
-                mat-mini-fab
-                color="primary"
-                matTooltip="Configure model"
-                class="!m-1.5"
-                [routerLink]="['model', model.slug, 'metadata']"
-              >
-                <mat-icon>settings</mat-icon>
-              </a>
-              <button
-                mat-mini-fab
-                color="primary"
-                matTooltip="Move model to different project"
-                class="!m-1.5"
-                (click)="openMoveToProjectDialog(model)"
-              >
-                <mat-icon>drive_file_move</mat-icon>
-              </button>
+      </div>
+      <div class="flex grow flex-col justify-between">
+        <div class="m-2.5 select-text">
+          {{ model.description || "This model has no description." }}
+        </div>
+        <div class="flex justify-center">
+          @if (model.tool.name === "Capella") {
+            <app-model-complexity-badge
+              class="w-[95%]"
+              [modelSlug]="model.slug"
+            ></app-model-complexity-badge>
+          }
+        </div>
+        <div class="m-2.5">
+          @if (userService.user?.role === "administrator") {
+            <a
+              mat-mini-fab
+              color="primary"
+              matTooltip="Model restrictions"
+              class="!m-1.5"
+              [routerLink]="['model', model.slug, 'restrictions']"
+            >
+              <mat-icon>key</mat-icon>
+            </a>
+          }
+          @if (projectUserService.verifyRole("manager")) {
+            <a
+              mat-mini-fab
+              color="primary"
+              matTooltip="Configure model"
+              class="!m-1.5"
+              [routerLink]="['model', model.slug, 'metadata']"
+            >
+              <mat-icon>settings</mat-icon>
+            </a>
+            <button
+              mat-mini-fab
+              color="primary"
+              matTooltip="Move model to different project"
+              class="!m-1.5"
+              (click)="openMoveToProjectDialog(model)"
+            >
+              <mat-icon>drive_file_move</mat-icon>
+            </button>
+            <a
+              mat-mini-fab
+              color="primary"
+              matTooltip="Configure model sources"
+              class="!m-1.5"
+              [routerLink]="['model', model.slug, 'modelsources']"
+            >
+              <mat-icon>link</mat-icon>
+            </a>
+            @if (!project?.is_archived && project?.type !== "training") {
               <a
                 mat-mini-fab
                 color="primary"
-                matTooltip="Configure model sources"
+                matTooltip="Start synchronization"
                 class="!m-1.5"
-                [routerLink]="['model', model.slug, 'modelsources']"
+                (click)="openPipelineDialog(model)"
               >
-                <mat-icon>link</mat-icon>
+                <mat-icon>sync</mat-icon>
               </a>
-              @if (!project?.is_archived && project?.type !== "training") {
-                <a
-                  mat-mini-fab
-                  color="primary"
-                  matTooltip="Start synchronization"
-                  class="!m-1.5"
-                  (click)="openPipelineDialog(model)"
-                >
-                  <mat-icon>sync</mat-icon>
-                </a>
-              }
             }
+          }
 
-            @if (model.git_models) {
-              <a
+          @if (model.git_models) {
+            <a
+              mat-mini-fab
+              color="primary"
+              matTooltip="Open Git repository"
+              class="!m-1.5"
+              target="_blank"
+              rel="noopener"
+              [disabled]="!getPrimaryGitModelURL(model)"
+              [href]="getPrimaryGitModelURL(model)"
+            >
+              <mat-icon>open_in_new</mat-icon>
+            </a>
+            @if (model.tool.name === "Capella") {
+              <button
                 mat-mini-fab
                 color="primary"
-                matTooltip="Open git repository"
+                matTooltip="Show diagrams of model"
                 class="!m-1.5"
-                target="_blank"
                 [disabled]="!getPrimaryGitModelURL(model)"
-                [href]="getPrimaryGitModelURL(model)"
+                (click)="openDiagramsDialog(model)"
               >
-                <mat-icon>open_in_new</mat-icon>
-              </a>
-              @if (model.tool.name === "Capella") {
-                <button
-                  mat-mini-fab
-                  color="primary"
-                  matTooltip="Show diagrams of model"
-                  class="!m-1.5"
-                  [disabled]="!getPrimaryGitModelURL(model)"
-                  (click)="openDiagramsDialog(model)"
-                >
-                  <mat-icon>image_search</mat-icon>
-                </button>
-              }
+                <mat-icon>image_search</mat-icon>
+              </button>
             }
+          }
 
-            @if (
-              !project?.is_archived &&
-              project?.type !== "training" &&
-              model.t4c_models &&
-              projectUserService.verifyPermission("write")
-            ) {
-              <a
-                mat-mini-fab
-                color="primary"
-                matTooltip="Request persistent session"
-                class="!m-1.5"
-                routerLink="/sessions"
-              >
-                <mat-icon>screen_share</mat-icon>
-              </a>
-            }
-          </div>
+          @if (
+            !project?.is_archived &&
+            project?.type !== "training" &&
+            model.t4c_models &&
+            projectUserService.verifyPermission("write")
+          ) {
+            <a
+              mat-mini-fab
+              color="primary"
+              matTooltip="Request persistent session"
+              class="!m-1.5"
+              routerLink="/sessions"
+            >
+              <mat-icon>screen_share</mat-icon>
+            </a>
+          }
         </div>
       </div>
-    }
-  </div>
+    </div>
+  }
 </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 29e6881024..152afede00 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
@@ -36,7 +36,6 @@ import { ModelComplexityBadgeComponent } from './model-complexity-badge/model-co
 @Component({
   selector: 'app-model-overview',
   templateUrl: './model-overview.component.html',
-  styleUrls: ['./model-overview.component.css'],
   standalone: true,
   imports: [
     MatAnchor,
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 9ff2654a66..471937ffbe 100644
--- a/frontend/src/app/projects/project-detail/project-details.component.html
+++ b/frontend/src/app/projects/project-detail/project-details.component.html
@@ -4,11 +4,12 @@
  -->
 
 <div class="flex flex-wrap justify-between gap-2">
-  <div class="grow basis-1">
+  <div class="flex max-w-full grow basis-1 flex-col gap-2">
     <div class="flex flex-wrap items-stretch gap-2">
       <app-project-metadata class="flex-1"></app-project-metadata>
       <app-create-readonly-session class="flex"></app-create-readonly-session>
     </div>
+
     <app-model-overview></app-model-overview>
   </div>
   @if (projectUserService.verifyRole("manager")) {
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 e2c74ac5a6..e32cfd994f 100644
--- a/frontend/src/app/projects/project-detail/project-details.component.ts
+++ b/frontend/src/app/projects/project-detail/project-details.component.ts
@@ -4,7 +4,7 @@
  */
 import { Component } from '@angular/core';
 import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
-import { CreateReadonlySessionComponent } from '../../sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component';
+import { CreateReadonlySessionComponent } from '../../sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component';
 import { ProjectWrapperService } from '../service/project.service';
 import { ModelOverviewComponent } from './model-overview/model-overview.component';
 import { ProjectMetadataComponent } from './project-metadata/project-metadata.component';
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.css b/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.css
deleted file mode 100644
index 5c672c4484..0000000000
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.skeleton-loader {
-  gap: 10px;
-}
-
-.skeleton-loader-element {
-  flex-basis: calc(50% - 5px);
-}
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.component.html
index 8d80805df7..b02760b71a 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.component.html
@@ -24,12 +24,11 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
             formControlName="toolId"
             (selectionChange)="toolSelectionChange($event.value)"
           >
-            <mat-option
-              *ngFor="let tool of toolsWithWorkspaceEnabled | async"
-              [value]="tool.id"
-            >
-              {{ tool.name }}
-            </mat-option>
+            @for (tool of toolsWithWorkspaceEnabled | async; track tool.id) {
+              <mat-option [value]="tool.id">
+                {{ tool.name }}
+              </mat-option>
+            }
           </mat-select>
           <mat-error> Please select a valid tool. </mat-error>
         </mat-form-field>
@@ -37,14 +36,17 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
         <mat-form-field appearance="fill" class="w-full">
           <mat-label>Version</mat-label>
           <mat-select formControlName="versionId">
-            <mat-option
-              *ngFor="let version of this.versions"
-              [value]="version.id"
-            >
-              {{ version.name }}
-              <span *ngIf="version.config.is_recommended"> (recommended)</span>
-              <span *ngIf="version.config.is_deprecated"> (deprecated)</span>
-            </mat-option>
+            @for (version of this.versions; track version.id) {
+              <mat-option [value]="version.id">
+                {{ version.name }}
+                @if (version.config.is_recommended) {
+                  <span> (recommended)</span>
+                }
+                @if (version.config.is_deprecated) {
+                  <span> (deprecated)</span>
+                }
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -84,8 +86,14 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
           type="submit"
           [disabled]="requestInProgress"
         >
-          Request a session with a persistent workspace
-          <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
+          <span class="hidden items-center gap-1 sm:flex">
+            Request a session with a persistent workspace
+            <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
+          </span>
+          <span class="flex items-center gap-1 sm:hidden">
+            Request session
+            <mat-icon inline>keyboard_arrow_right</mat-icon>
+          </span>
         </button>
       </div>
     </form>
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.stories.ts b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.stories.ts
index 954b990205..daa94b7360 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.stories.ts
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.stories.ts
@@ -22,7 +22,7 @@ const meta: Meta<CreatePersistentSessionComponent> = {
   decorators: [
     componentWrapperDecorator(
       (story) =>
-        `<div class="w-[360px] sm:w-[450px]">
+        `<div class="w-full sm:w-[450px]">
           ${story}
         </div>`,
     ),
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.component.html
similarity index 100%
rename from frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.html
rename to frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.component.html
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.ts b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.component.ts
similarity index 100%
rename from frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.ts
rename to frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.component.ts
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.stories.ts b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.stories.ts
similarity index 100%
rename from frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.stories.ts
rename to frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.stories.ts
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component.html
similarity index 71%
rename from frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html
rename to frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component.html
index 1b3b967394..a4a4f3e4ba 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component.html
@@ -15,21 +15,26 @@ <h2 class="mb-2 text-xl font-medium">Read-Only Sessions</h2>
         [formGroup]="toolSelectionForm"
         (ngSubmit)="requestReadonlySession()"
       >
-        <div class="skeleton-loader flex gap-2" *ngIf="tools === undefined">
-          <div class="flex-1" *ngFor="let menu of [0, 1]">
-            <ngx-skeleton-loader
-              appearance="circle"
-              [theme]="{
-                'border-radius': '5px',
-                height: '52px',
-                padding: '0',
-                margin: '0 0 18px 0',
-                width: '100%',
-                border: '1px solid white',
-              }"
-            ></ngx-skeleton-loader>
+        @if (tools === undefined) {
+          <div class="flex gap-2">
+            @for (menu of [0, 1]; track menu) {
+              <div class="flex-1">
+                <ngx-skeleton-loader
+                  appearance="circle"
+                  [theme]="{
+                    'border-radius': '5px',
+                    height: '52px',
+                    padding: '0',
+                    margin: '0 0 18px 0',
+                    width: '100%',
+                    border: '1px solid white',
+                  }"
+                ></ngx-skeleton-loader>
+              </div>
+            }
           </div>
-        </div>
+        }
+
         <div [hidden]="tools === undefined">
           <fieldset class="flex flex-wrap gap-2">
             <mat-form-field appearance="fill">
@@ -50,12 +55,11 @@ <h2 class="mb-2 text-xl font-medium">Read-Only Sessions</h2>
             <mat-form-field appearance="fill">
               <mat-label>Version</mat-label>
               <mat-select formControlName="version">
-                <mat-option
-                  *ngFor="let version of this.relevantToolVersions"
-                  [value]="version"
-                >
-                  {{ version.name }}
-                </mat-option>
+                @for (version of this.relevantToolVersions; track version.id) {
+                  <mat-option [value]="version">
+                    {{ version.name }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </fieldset>
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.ts b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component.ts
similarity index 93%
rename from frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.ts
rename to frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component.ts
index a9b9b6e51d..dc621264f6 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.ts
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.component.ts
@@ -19,22 +19,21 @@ import { MatSelect } from '@angular/material/select';
 import { RouterLink } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { combineLatest, filter, Observable, tap } from 'rxjs';
+import { combineLatest, filter, Observable } from 'rxjs';
 import { Tool, ToolModel, ToolVersion } from 'src/app/openapi';
 import { ModelWrapperService } from 'src/app/projects/models/service/model.service';
 import { ProjectWrapperService } from 'src/app/projects/service/project.service';
 import { UserSessionService } from 'src/app/sessions/service/user-session.service';
+import { CreateReadonlySessionDialogComponent } from 'src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog/create-readonly-session-dialog.component';
 import {
   ToolWrapperService,
   ToolVersionWithTool,
 } from 'src/app/settings/core/tools-settings/tool.service';
-import { CreateReadonlySessionDialogComponent } from '../../create-sessions/create-readonly-session/create-readonly-session-dialog.component';
 
 @UntilDestroy()
 @Component({
   selector: 'app-create-readonly-session',
   templateUrl: './create-readonly-session.component.html',
-  styleUrls: ['./create-readonly-session.component.css'],
   standalone: true,
   imports: [
     FormsModule,
@@ -56,7 +55,6 @@ export class CreateReadonlySessionComponent implements OnInit {
   models?: ModelWithCompatibility[];
 
   relevantToolVersions?: ToolVersion[];
-  allToolVersions?: ToolVersionWithTool[];
 
   public toolSelectionForm = this.fb.group({
     tool: this.fb.control<Tool | null>(null, Validators.required),
@@ -91,11 +89,7 @@ export class CreateReadonlySessionComponent implements OnInit {
     return combineLatest([
       this.modelService.models$.pipe(untilDestroyed(this), filter(Boolean)),
       this.toolWrapperService.getVersionsForTools(),
-    ]).pipe(
-      tap(([_, versions]) => {
-        this.allToolVersions = versions;
-      }),
-    );
+    ]);
   }
 
   resolveVersionCompatibility(
@@ -113,7 +107,7 @@ export class CreateReadonlySessionComponent implements OnInit {
         this.findVersionByID(model.version.id, allVersions)!,
       ];
 
-      for (const version of allVersions!) {
+      for (const version of allVersions) {
         if (version.config.compatible_versions.includes(model.version.id)) {
           extendedModel.compatibleVersions.push(version);
         }
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.stories.ts b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.stories.ts
new file mode 100644
index 0000000000..07fca679d4
--- /dev/null
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session.stories.ts
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { mockModel } from 'src/storybook/model';
+import { mockCapellaToolVersion } from 'src/storybook/tool';
+import { CreateReadonlySessionComponent } from './create-readonly-session.component';
+
+const meta: Meta<CreateReadonlySessionComponent> = {
+  title: 'Session Components/Create Readonly Session',
+  component: CreateReadonlySessionComponent,
+};
+
+export default meta;
+type Story = StoryObj<CreateReadonlySessionComponent>;
+
+export const Loading: Story = {
+  args: {},
+};
+
+export const Loaded: Story = {
+  args: {
+    relevantToolVersions: [mockCapellaToolVersion],
+    models: [{ ...mockModel, compatibleVersions: [] }],
+  },
+};
diff --git a/frontend/src/app/users/user-settings/user-settings.component.html b/frontend/src/app/users/user-settings/user-settings.component.html
index 520cdb10a2..10e82e5a56 100644
--- a/frontend/src/app/users/user-settings/user-settings.component.html
+++ b/frontend/src/app/users/user-settings/user-settings.component.html
@@ -23,7 +23,7 @@ <h2 class="text-xl font-medium">Manage Users</h2>
       <mat-icon matSuffix>search</mat-icon>
     </mat-form-field>
 
-    <div [class]="'max-h-[50vh] overflow-y-scroll'">
+    <div class="max-h-[50vh] overflow-y-scroll">
       @for (role of userRoles; track role) {
         <div class="mt-2.5 pl-1 text-lg font-bold text-gray-400">
           {{ getUsersByRole(userWrapperService.users$ | async, role)?.length }}