diff --git a/archigator/src/app/main/main.component.html b/archigator/src/app/main/main.component.html
index a3bc678..8fb9c3c 100644
--- a/archigator/src/app/main/main.component.html
+++ b/archigator/src/app/main/main.component.html
@@ -1,8 +1,13 @@
 <!--<app-header></app-header>-->
 
-<div class="checkout-wrapper" *ngIf="hasMetadata; else noMetadata">
+<div class="checkout-wrapper">
 
-    <div class="checkout-main">
+    <div *ngIf="loading" class="loading-spinner">
+        <!-- Placeholder for your spinner; you can replace it with your spinner design -->
+        <p>Loading...</p>
+    </div>
+
+    <div class="checkout-main" *ngIf="!loading && hasMetadata; else noMetadata">
 
         <div class="checkout-container">
 
@@ -35,7 +40,7 @@
 </div>
 
 <ng-template #noMetadata>
-    <div class="center-message">
+    <div *ngIf="error" class="center-message">
         Could not load metadata
     </div>
 </ng-template>
diff --git a/archigator/src/app/main/main.component.ts b/archigator/src/app/main/main.component.ts
index 8345c0c..947db96 100644
--- a/archigator/src/app/main/main.component.ts
+++ b/archigator/src/app/main/main.component.ts
@@ -20,6 +20,8 @@ import {Metadata} from "../shared/response";
 export class MainComponent implements OnInit{
 
     hasMetadata: boolean = false;
+    loading: boolean = true;
+    error: boolean = false;
 
     constructor(private oauthService: OAuthService,
                 private parameterService: ParametersService,
@@ -67,14 +69,19 @@ export class MainComponent implements OnInit{
     loadMetadata() {
         this.apiService.getMetadata().subscribe(
             (metadata: Metadata) => {
+                this.loading = false;
                 if (metadata) {
                     // Handle the logic here if metadata is not null or undefined
                     this.hasMetadata = true;
+                } else {
+                    this.error = true;
                 }
             },
             (error) => {
                 console.error('Failed to load metadata:', error);
-                this.hasMetadata = false;
+                // this.hasMetadata = false;
+                this.loading = false;
+                this.error = true;
             }
         );
     }