diff --git a/DbFirst.BlazorWasm/Ablauf.cs b/DbFirst.BlazorWasm/Ablauf.cs
new file mode 100644
index 0000000..8cc8590
--- /dev/null
+++ b/DbFirst.BlazorWasm/Ablauf.cs
@@ -0,0 +1,60 @@
+/*
+Ablauf und die Rolle jeder Datei in der Blazor WebAssembly-Anwendung:
+
+1.index.html
+•	Reihenfolge: Wird als erstes geladen, wenn die Anwendung im Browser geöffnet wird.
+•	Purpose:
+•	Lädt die Blazor WebAssembly-Umgebung (blazor.webassembly.js).
+•	Definiert den Platzhalter <div id="app">, in dem die Blazor-Komponenten gerendert werden.
+•	Bindet Stylesheets und Skripte ein, die für das Styling und die Funktionalität der Anwendung benötigt werden.
+
+2. Program.cs
+•	Reihenfolge: Wird nach index.html ausgeführt, sobald die Blazor-Umgebung initialisiert ist.
+•	Purpose:
+•	Initialisiert die Blazor WebAssembly-Anwendung.
+•	Registriert Root-Komponenten (App) und Abhängigkeiten (z. B. HttpClient, CatalogApiClient).
+•	Konfiguriert die Basis-URL für API-Aufrufe.
+
+3. App.razor
+•	Reihenfolge: Wird als nächstes geladen, nachdem die Anwendung initialisiert wurde.
+•	Purpose:
+•	Definiert die Routing-Logik der Anwendung.
+•	Entscheidet, welche Komponente basierend auf der URL gerendert wird.
+•	Stellt sicher, dass ein Standardlayout (MainLayout) verwendet wird.
+
+4.MainLayout.razor
+•	Reihenfolge: Wird geladen, wenn eine Seite gerendert wird, da es das Standardlayout ist.
+•	Purpose:
+•	Definiert das Hauptlayout der Anwendung.
+•	Enthält die Navigationsleiste (NavMenu) und den Platzhalter für den Seiteninhalt (@Body).
+
+5. NavMenu.razor
+•	Reihenfolge: Wird als Teil des Layouts (MainLayout) geladen.
+•	Purpose:
+•	Stellt die Navigationsleiste bereit.
+•	Enthält Links zu verschiedenen Seiten der Anwendung (z. B. Home, Catalogs).
+•	Ermöglicht das Ein- und Ausklappen des Menüs.
+
+6. Catalogs.razor
+•	Reihenfolge: Wird geladen, wenn der Benutzer die URL /catalogs aufruft.
+•	Purpose:
+•	Stellt die Benutzeroberfläche für die Verwaltung von Katalogen bereit.
+•	Nutzt CatalogApiClient, um Daten von der API zu laden, zu erstellen, zu aktualisieren oder zu löschen.
+•	Verwendet DevExpress-Komponenten für ein modernes UI.
+
+7. CatalogApiClient.cs
+•	Reihenfolge: Wird verwendet, wenn Catalogs.razor API-Aufrufe ausführt.
+•	Purpose:
+•	Kapselt die Kommunikation mit der API.
+•	Bietet Methoden für CRUD-Operationen (Create, Read, Update, Delete) auf Katalog-Daten.
+•	Behandelt Fehler und gibt benutzerfreundliche Fehlermeldungen zurück.
+
+Zusammenfassung des Ablaufs:
+1.index.html: Lädt die Blazor-Umgebung und startet die Anwendung.
+2.	Program.cs: Initialisiert die Anwendung und registriert Abhängigkeiten.
+3.	App.razor: Definiert die Routing-Logik und lädt das Standardlayout.
+4.	MainLayout.razor: Stellt das Hauptlayout bereit.
+5.	NavMenu.razor: Lädt die Navigationsleiste.
+6.	Seiten wie Catalogs.razor: Werden basierend auf der URL gerendert.
+7.	CatalogApiClient.cs: Führt API-Aufrufe aus, wenn die Seite Daten benötigt.
+*/
\ No newline at end of file
diff --git a/DbFirst.BlazorWasm/App.razor b/DbFirst.BlazorWasm/App.razor
index 6fd3ed1..6f372a0 100644
--- a/DbFirst.BlazorWasm/App.razor
+++ b/DbFirst.BlazorWasm/App.razor
@@ -1,4 +1,11 @@
-<Router AppAssembly="@typeof(App).Assembly">
+@* 
+•	Ist der logische Einstiegspunkt der Blazor-Anwendung.
+•	Sie definiert die Routing-Logik und das Standardlayout der Anwendung.
+•	Der Router-Komponent in App.razor entscheidet, welche Blazor-Komponente basierend auf der URL geladen wird.
+    kurz: Steuert die Navigation und das Rendering der Blazor-Komponenten.
+    *@
+
+<Router AppAssembly="@typeof(App).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
diff --git a/DbFirst.BlazorWasm/Layout/MainLayout.razor b/DbFirst.BlazorWasm/Layout/MainLayout.razor
index 76eb725..06fd81b 100644
--- a/DbFirst.BlazorWasm/Layout/MainLayout.razor
+++ b/DbFirst.BlazorWasm/Layout/MainLayout.razor
@@ -1,7 +1,10 @@
-@inherits LayoutComponentBase
+@* Definiert das Hauptlayout der Anwendung.
+   Enthält die Navigationsleiste und den Hauptinhalt. *@
+
+@inherits LayoutComponentBase
 <div class="page">
     <div class="sidebar">
-        <NavMenu />
+        <NavMenu /> <!-- Einbindung der Navigationsleiste -->
     </div>
 
     <main>
@@ -10,7 +13,7 @@
         </div>
 
         <article class="content px-4">
-            @Body
+            @Body <!-- Platzhalter für den Seiteninhalt -->
         </article>
     </main>
 </div>
diff --git a/DbFirst.BlazorWasm/Layout/NavMenu.razor b/DbFirst.BlazorWasm/Layout/NavMenu.razor
index 20585e9..c170642 100644
--- a/DbFirst.BlazorWasm/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWasm/Layout/NavMenu.razor
@@ -1,4 +1,6 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@* Definiert die Navigationsleiste, die Links zu verschiedenen Seiten der Anwendung enthält. *@
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">DbFirst.BlazorWasm</a>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
@@ -25,8 +27,10 @@
 @code {
     private bool collapseNavMenu = true;
 
+    // CSS-Klasse für die Navigation, die den Zustand (eingeklappt/ausgeklappt) steuert.
     private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
 
+    // Methode zum Umschalten des Navigationsmenüs.
     private void ToggleNavMenu()
     {
         collapseNavMenu = !collapseNavMenu;
diff --git a/DbFirst.BlazorWasm/Pages/Catalogs.razor b/DbFirst.BlazorWasm/Pages/Catalogs.razor
index 72e174a..45ce037 100644
--- a/DbFirst.BlazorWasm/Pages/Catalogs.razor
+++ b/DbFirst.BlazorWasm/Pages/Catalogs.razor
@@ -1,3 +1,6 @@
+@* Stellt die Catalog-Verwaltung bereit.
+   Nutzt CatalogApiClient für API-Interaktionen und DevExpress-Komponenten für die Benutzeroberfläche. *@
+
 @page "/catalogs"
 @inject CatalogApiClient Api
 
@@ -111,6 +114,9 @@ else
 
     private async Task LoadCatalogs()
     {
+        // Lädt die Liste der Kataloge aus der API.
+        // Setzt Ladezustand und behandelt Fehler.
+
         isLoading = true;
         errorMessage = null;
         try
@@ -155,6 +161,9 @@ else
 
     private async Task HandleSubmit()
     {
+        // Behandelt das Absenden des Formulars.
+        // Führt entweder eine Aktualisierung oder das Anlegen eines neuen Eintrags durch.
+
         errorMessage = null;
         infoMessage = null;
 
@@ -201,6 +210,9 @@ else
 
     private async Task DeleteCatalog(int id)
     {
+        // Löscht einen Katalogeintrag basierend auf der ID.
+        // Aktualisiert die Liste nach erfolgreichem Löschen.
+
         errorMessage = null;
         infoMessage = null;
 
diff --git a/DbFirst.BlazorWasm/Pages/Home.razor b/DbFirst.BlazorWasm/Pages/Home.razor
index 9001e0b..4636686 100644
--- a/DbFirst.BlazorWasm/Pages/Home.razor
+++ b/DbFirst.BlazorWasm/Pages/Home.razor
@@ -2,6 +2,6 @@
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
+<h1>Db First approach</h1>
 
-Welcome to your new app.
+This is a Blazor WebAssembly application demonstrating the Database First approach using DevExpress components.
diff --git a/DbFirst.BlazorWasm/Program.cs b/DbFirst.BlazorWasm/Program.cs
index 73e3696..31f94e6 100644
--- a/DbFirst.BlazorWasm/Program.cs
+++ b/DbFirst.BlazorWasm/Program.cs
@@ -1,3 +1,7 @@
+/* Initialisiert die Blazor WebAssembly-Anwendung.
+   Registriert Root-Komponenten 
+   Konfiguriert Abhängigkeiten */
+
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using DbFirst.BlazorWasm;
diff --git a/DbFirst.BlazorWasm/Services/CatalogApiClient.cs b/DbFirst.BlazorWasm/Services/CatalogApiClient.cs
index d9d797d..e43131c 100644
--- a/DbFirst.BlazorWasm/Services/CatalogApiClient.cs
+++ b/DbFirst.BlazorWasm/Services/CatalogApiClient.cs
@@ -1,3 +1,6 @@
+/* Kapselt die Kommunikation mit der API für den Catalog-Endpunkt.
+   Bietet Methoden für CRUD-Operationen auf Catalog-Daten */
+
 using System.Net;
 using System.Net.Http.Json;
 using System.Text.Json;
@@ -65,6 +68,9 @@ public class CatalogApiClient
 
     private static async Task<string> ReadErrorAsync(HttpResponseMessage response)
     {
+        // Liest und analysiert Fehlerdetails aus der API-Antwort.
+        // Gibt eine benutzerfreundliche Fehlermeldung zurück.
+
         string? problemTitle = null;
         string? problemDetail = null;
 
@@ -116,6 +122,9 @@ public class CatalogApiClient
 
     private static string FormatSuffix(string? title, string? detail, string? reason)
     {
+        // Formatiert zusätzliche Informationen für Fehlermeldungen.
+        // Kombiniert Titel, Details und Grund in einer lesbaren Form.
+
         var parts = new List<string>();
         if (!string.IsNullOrWhiteSpace(title)) parts.Add(title);
         if (!string.IsNullOrWhiteSpace(detail)) parts.Add(detail);
diff --git a/DbFirst.BlazorWasm/wwwroot/index.html b/DbFirst.BlazorWasm/wwwroot/index.html
index 0e994e1..f146c9f 100644
--- a/DbFirst.BlazorWasm/wwwroot/index.html
+++ b/DbFirst.BlazorWasm/wwwroot/index.html
@@ -1,34 +1,51 @@
-<!DOCTYPE html>
-<html lang="en">
+<!--
+•	Ist der technische Einstiegspunkt der Blazor WebAssembly-Anwendung.
+•	Sie lädt die notwendigen Ressourcen (z. B. das Blazor-Skript blazor.webassembly.js)
+    und definiert den Platzhalter <div id="app">, in dem die Blazor-Komponenten gerendert werden.
+•	Ohne diese Datei könnte die Blazor-Anwendung nicht starten, da sie die Verbindung
+    zwischen der statischen HTML-Welt und der Blazor-Welt herstellt.
+    kurz: Startet die Anwendung und lädt die Blazor-Umgebung.
+    -->
 
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DbFirst.BlazorWasm</title>
-    <base href="/" />
-    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
-    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    <link href="DbFirst.BlazorWasm.styles.css" rel="stylesheet" />
-</head>
+    <!DOCTYPE html>
+    <html lang="en">
 
-<body>
-    <div id="app">
-        <svg class="loading-progress">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
-        </svg>
-        <div class="loading-progress-text"></div>
-    </div>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>DbFirst.BlazorWasm</title>
+        <base href="/" />
 
-    <div id="blazor-error-ui">
-        An unhandled error has occurred.
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
-    <script src="_framework/blazor.webassembly.js"></script>
-</body>
+        <!-- Stylesheets für DevExpress und Bootstrap -->
+        <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
+        <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
+        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
+        <link rel="stylesheet" href="css/app.css" />
+
+        <!-- Favicon und App-spezifische Styles -->
+        <link rel="icon" type="image/png" href="favicon.png" />
+        <link href="DbFirst.BlazorWasm.styles.css" rel="stylesheet" />
+    </head>
+
+    <body>
+        <!-- Einstiegspunkt der Blazor-Anwendung -->
+        <div id="app">
+            <svg class="loading-progress">
+                <circle r="40%" cx="50%" cy="50%" />
+                <circle r="40%" cx="50%" cy="50%" />
+            </svg>
+            <div class="loading-progress-text"></div>
+        </div>
+
+        <!-- Fehler-UI für unvorhergesehene Fehler -->
+        <div id="blazor-error-ui">
+            An unhandled error has occurred.
+            <a href="" class="reload">Reload</a>
+            <a class="dismiss">🗙</a>
+        </div>
+
+        <!-- Blazor WebAssembly-Skript -->
+        <script src="_framework/blazor.webassembly.js"></script>
+    </body>
 
 </html>