diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.css b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.css
deleted file mode 100644
index c536696f4f..0000000000
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.diagram-error {
-  border-radius: 5px;
-  border: solid lightgray;
-  width: 100%;
-  height: 200px;
-  text-align: center;
-  padding: 15px 0;
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
index 71ea3c25ff..394dc33db3 100644
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
+++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
@@ -31,14 +31,16 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
   @if (this.diagramMetadata?.diagrams?.length === 0) {
     Your model doesn't seem to contain diagrams.
   } @else if (filteredDiagrams === undefined) {
-    <div class="flex flex-wrap">
+    <span>Loading diagrams...</span>
+    <div class="flex flex-wrap gap-2">
       @for (_ of loaderArray; track $index) {
         <ngx-skeleton-loader
-          class="m-2 grow basis-[calc(30%-20px)]"
+          class="h-[338px] grow"
           [theme]="{
-            'border-radius': '5px',
-            height: '332px',
-            'min-width': '208px',
+            'border-radius': '10px',
+            height: '100%',
+            margin: '0px',
+            padding: '0px',
             border: '1px solid white',
           }"
         ></ngx-skeleton-loader>
@@ -59,12 +61,12 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
           @if (diagram.success) {
             @if (!diagrams[diagram.uuid] || diagrams[diagram.uuid].loading) {
               <ngx-skeleton-loader
-                class="mb-2 w-full"
+                class="mb-2 h-[200px] w-full"
                 [theme]="{
                   'border-radius': '5px',
                   margin: 0,
                   padding: 0,
-                  height: '200px',
+                  height: '100%',
                   width: '100%',
                   border: '1px solid white',
                 }"
@@ -79,7 +81,9 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
               </button>
             }
           } @else {
-            <div class="diagram-error">
+            <div
+              class="mb-2 flex h-[200px] flex-col items-center justify-center rounded border border-gray-400 py-[15px] text-center"
+            >
               <mat-icon class="scale-[2] text-red-900">error</mat-icon> <br />
               Diagram export has failed. <br />
               Please contact your diagram cache administrator.
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 c1cbe65c76..610c69c381 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
@@ -46,7 +46,6 @@ import { ModelDiagramCodeBlockComponent } from './model-diagram-code-block/model
 @Component({
   selector: 'app-model-diagram-dialog',
   templateUrl: './model-diagram-dialog.component.html',
-  styleUrls: ['./model-diagram-dialog.component.css'],
   standalone: true,
   imports: [
     ModelDiagramCodeBlockComponent,