Add dark mode override for non-native DevExpress themes

Implements a dark mode override system for DevExpress Blazor themes lacking native dark support. Adds a JS function to toggle a dx-dark class on <html>, updates ThemeState to detect native dark themes, and applies targeted CSS variable overrides for consistent dark styling. Disables prerendering to ensure JS interop, and improves theme switching logic and documentation.
Remove unused menu state and toggle logic from NavMenu
2026-05-05 16:41:15 +02:00 · 2026-04-30 15:41:05 +02:00 · 2026-04-30 15:37:04 +02:00 · 2026-04-23 15:59:50 +02:00 · 2026-04-23 15:44:26 +02:00 · 2026-04-23 13:55:05 +02:00
140 changed files with 4988 additions and 1043 deletions
--- a/DbFirst.API/Controllers/CatalogsController.cs
+++ b/DbFirst.API/Controllers/CatalogsController.cs
@@ -1,6 +1,7 @@
-using DbFirst.Application.Catalogs;
+
 using DbFirst.Application.Catalogs.Commands;
 using DbFirst.Application.Catalogs.Queries;
+using DbFirst.Contracts.Catalogs;
 using MediatR;
 using Microsoft.AspNetCore.Mvc;

@@ -36,7 +37,7 @@ public class CatalogsController : ControllerBase
    }

    [HttpPost]
-    public async Task<ActionResult<CatalogReadDto>> Create(CatalogWriteDto dto, CancellationToken cancellationToken)
+    public async Task<ActionResult<CatalogReadDto>> Create([FromBody]CatalogWriteDto dto, CancellationToken cancellationToken)
    {
        var created = await _mediator.Send(new CreateCatalogCommand(dto), cancellationToken);
        if (created == null)
@@ -47,18 +48,8 @@ public class CatalogsController : ControllerBase
    }

    [HttpPut("{id:int}")]
-    public async Task<ActionResult<CatalogReadDto>> Update(int id, CatalogWriteDto dto, CancellationToken cancellationToken)
+    public async Task<ActionResult<CatalogReadDto>> Update(int id, [FromBody] CatalogWriteDto dto, CancellationToken cancellationToken)
    {
-        var current = await _mediator.Send(new GetCatalogByIdQuery(id), cancellationToken);
-        if (current == null)
-        {
-            return NotFound();
-        }
-        if (!string.Equals(current.CatTitle, dto.CatTitle, StringComparison.Ordinal))
-        {
-            return BadRequest("CatTitle cannot be changed.");
-        }
-
        var updated = await _mediator.Send(new UpdateCatalogCommand(id, dto), cancellationToken);
        if (updated == null)
        {
--- a/DbFirst.API/Controllers/DefaultDashboardController.cs
+++ b/DbFirst.API/Controllers/DefaultDashboardController.cs
@@ -0,0 +1,14 @@
+using DevExpress.DashboardAspNetCore;
+using DevExpress.DashboardWeb;
+using Microsoft.AspNetCore.DataProtection;
+
+namespace BlazorDashboardApp.Server
+{
+    public class DefaultDashboardController : DashboardController
+    {
+        public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
+            : base(configurator, dataProtectionProvider)
+        {
+        }
+    }
+}
--- a/DbFirst.API/Controllers/LayoutsController.cs
+++ b/DbFirst.API/Controllers/LayoutsController.cs
@@ -0,0 +1,87 @@
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.Layouts;
+using DbFirst.Domain.Entities;
+using Microsoft.AspNetCore.Mvc;
+using System.Text;
+
+namespace DbFirst.API.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+public class LayoutsController : ControllerBase
+{
+    private readonly ILayoutRepository _repository;
+
+    public LayoutsController(ILayoutRepository repository)
+    {
+        _repository = repository;
+    }
+
+    [HttpGet]
+    public async Task<ActionResult<LayoutDto>> Get([FromQuery] string layoutType, [FromQuery] string layoutKey, [FromQuery] string userName, CancellationToken cancellationToken)
+    {
+        if (string.IsNullOrWhiteSpace(layoutType) || string.IsNullOrWhiteSpace(layoutKey) || string.IsNullOrWhiteSpace(userName))
+        {
+            return BadRequest("layoutType, layoutKey und userName sind erforderlich.");
+        }
+
+        var entity = await _repository.GetAsync(layoutType, layoutKey, userName, cancellationToken);
+        if (entity == null)
+        {
+            return NotFound();
+        }
+
+        return Ok(Map(entity));
+    }
+
+    [HttpPost]
+    public async Task<ActionResult<LayoutDto>> Upsert(LayoutDto dto, CancellationToken cancellationToken)
+    {
+        if (string.IsNullOrWhiteSpace(dto.LayoutType) || string.IsNullOrWhiteSpace(dto.LayoutKey) || string.IsNullOrWhiteSpace(dto.UserName))
+        {
+            return BadRequest("LayoutType, LayoutKey und UserName sind erforderlich.");
+        }
+
+        var data = string.IsNullOrWhiteSpace(dto.LayoutData)
+            ? Array.Empty<byte>()
+            : Encoding.UTF8.GetBytes(dto.LayoutData);
+
+        try
+        {
+            var entity = await _repository.UpsertAsync(dto.LayoutType, dto.LayoutKey, dto.UserName, data, cancellationToken);
+            return Ok(Map(entity));
+        }
+        catch (Exception ex)
+        {
+            var detail = ex.InnerException?.Message ?? ex.Message;
+            return Problem(detail: detail, statusCode: StatusCodes.Status500InternalServerError);
+        }
+    }
+
+    [HttpDelete]
+    public async Task<IActionResult> Delete([FromQuery] string layoutType, [FromQuery] string layoutKey, [FromQuery] string userName, CancellationToken cancellationToken)
+    {
+        if (string.IsNullOrWhiteSpace(layoutType) || string.IsNullOrWhiteSpace(layoutKey) || string.IsNullOrWhiteSpace(userName))
+        {
+            return BadRequest("layoutType, layoutKey und userName sind erforderlich.");
+        }
+
+        var deleted = await _repository.DeleteAsync(layoutType, layoutKey, userName, cancellationToken);
+        return deleted ? NoContent() : NotFound();
+    }
+
+    private static LayoutDto Map(SmfLayout entity)
+    {
+        var layoutData = entity.LayoutData.Length == 0
+            ? string.Empty
+            : Encoding.UTF8.GetString(entity.LayoutData);
+
+        return new LayoutDto
+        {
+            LayoutType = entity.LayoutType,
+            LayoutKey = entity.LayoutKey,
+            UserName = entity.UserName,
+            LayoutData = layoutData
+        };
+    }
+}
--- a/DbFirst.API/Controllers/MassDataController.cs
+++ b/DbFirst.API/Controllers/MassDataController.cs
@@ -0,0 +1,58 @@
+using DbFirst.Application.MassData.Commands;
+using DbFirst.Application.MassData.Queries;
+using DbFirst.Contracts.MassData;
+using MediatR;
+using Microsoft.AspNetCore.Mvc;
+
+namespace DbFirst.API.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+public class MassDataController : ControllerBase
+{
+    private readonly IMediator _mediator;
+
+    public MassDataController(IMediator mediator)
+    {
+        _mediator = mediator;
+    }
+
+    [HttpGet("count")]
+    public async Task<ActionResult<int>> GetCount(CancellationToken cancellationToken)
+    {
+        var count = await _mediator.Send(new GetMassDataCountQuery(), cancellationToken);
+        return Ok(count);
+    }
+
+    [HttpGet]
+    public async Task<ActionResult<IEnumerable<MassDataReadDto>>> GetAll([FromQuery] int? skip, [FromQuery] int? take, CancellationToken cancellationToken)
+    {
+        int? resolvedTake = take;
+        if (resolvedTake is <= 0)
+        {
+            resolvedTake = null;
+        }
+
+        var result = await _mediator.Send(new GetAllMassDataQuery(skip, resolvedTake), cancellationToken);
+        return Ok(result);
+    }
+
+    [HttpGet("{customerName}")]
+    public async Task<ActionResult<MassDataReadDto>> GetByCustomerName(string customerName, CancellationToken cancellationToken)
+    {
+        var result = await _mediator.Send(new GetMassDataByCustomerNameQuery(customerName), cancellationToken);
+        if (result == null)
+        {
+            return NotFound();
+        }
+
+        return Ok(result);
+    }
+
+    [HttpPost("upsert")]
+    public async Task<ActionResult<MassDataReadDto>> Upsert([FromBody]MassDataWriteDto dto, CancellationToken cancellationToken)
+    {
+        var result = await _mediator.Send(new UpsertMassDataByCustomerNameCommand(dto), cancellationToken);
+        return Ok(result);
+    }
+}
--- a/DbFirst.API/Dashboards/DashboardChangeNotifier.cs
+++ b/DbFirst.API/Dashboards/DashboardChangeNotifier.cs
@@ -0,0 +1,28 @@
+using DbFirst.API.Hubs;
+using Microsoft.AspNetCore.SignalR;
+
+namespace DbFirst.API.Dashboards;
+
+public class DashboardChangeNotifier : IDashboardChangeNotifier
+{
+    private readonly IHubContext<DashboardsHub> _hubContext;
+    private readonly ILogger<DashboardChangeNotifier> _logger;
+
+    public DashboardChangeNotifier(IHubContext<DashboardsHub> hubContext, ILogger<DashboardChangeNotifier> logger)
+    {
+        _hubContext = hubContext;
+        _logger = logger;
+    }
+
+    public async Task NotifyChangedAsync()
+    {
+        try
+        {
+            await _hubContext.Clients.All.SendAsync("DashboardsChanged");
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Failed to notify dashboard clients.");
+        }
+    }
+}
--- a/DbFirst.API/Dashboards/DashboardConfiguratorFactory.cs
+++ b/DbFirst.API/Dashboards/DashboardConfiguratorFactory.cs
@@ -0,0 +1,115 @@
+using DbFirst.Domain.Entities;
+using DevExpress.DashboardCommon;
+using DevExpress.DashboardWeb;
+using DevExpress.DataAccess.Json;
+using System.Xml.Linq;
+
+namespace DbFirst.API.Dashboards;
+
+public static class DashboardConfiguratorFactory
+{
+    public static DashboardConfigurator Create(
+        IServiceProvider serviceProvider,
+        IConfiguration configuration,
+        IWebHostEnvironment environment)
+    {
+        // Den gesamten Inhalt des Lambdas hierher verschieben
+        // serviceProvider, configuration, environment statt builder.* verwenden
+
+        var dashboardsPath = Path.Combine(environment.ContentRootPath, "Data", "Dashboards");
+        Directory.CreateDirectory(dashboardsPath);
+
+        var defaultDashboardPath = Path.Combine(dashboardsPath, "DefaultDashboard.xml");
+        if (!File.Exists(defaultDashboardPath))
+        {
+            var defaultDashboard = new Dashboard();
+            defaultDashboard.Title.Text = "Default Dashboard";
+            defaultDashboard.SaveToXml(defaultDashboardPath);
+        }
+
+        var dashboardBaseUrl = configuration["Dashboard:BaseUrl"]
+            ?? configuration["ApiBaseUrl"]
+            ?? configuration["ASPNETCORE_URLS"]?.Split(';', StringSplitOptions.RemoveEmptyEntries).FirstOrDefault()
+            ?? "https://localhost:7204";
+
+        dashboardBaseUrl = dashboardBaseUrl.TrimEnd('/');
+
+        var catalogsGridDashboardPath = Path.Combine(dashboardsPath, "CatalogsGrid.xml");
+        if (!File.Exists(catalogsGridDashboardPath))
+        {
+            var dashboard = new Dashboard();
+            dashboard.Title.Text = "Catalogs (Dashboard Grid)";
+
+            var catalogDataSource = new DashboardJsonDataSource("Catalogs (API)")
+            {
+                ComponentName = "catalogsDataSource",
+                JsonSource = new UriJsonSource(new Uri($"{dashboardBaseUrl}/api/catalogs"))
+            };
+
+            dashboard.DataSources.Add(catalogDataSource);
+
+            var grid = new GridDashboardItem
+            {
+                DataSource = catalogDataSource,
+                Name = "Catalogs"
+            };
+
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.Guid))) { Name = "Id" });
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.CatTitle))) { Name = "Titel" });
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.CatString))) { Name = "String" });
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.AddedWho))) { Name = "Angelegt von" });
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.AddedWhen))) { Name = "Angelegt am" });
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.ChangedWho))) { Name = "Geändert von" });
+            grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.ChangedWhen))) { Name = "Geändert am" });
+
+            dashboard.Items.Add(grid);
+
+            var layoutGroup = new DashboardLayoutGroup { Orientation = DashboardLayoutGroupOrientation.Vertical };
+            layoutGroup.ChildNodes.Add(new DashboardLayoutItem(grid));
+            dashboard.LayoutRoot = layoutGroup;
+
+            dashboard.SaveToXml(catalogsGridDashboardPath);
+        }
+
+        DashboardConfigurator configurator = new DashboardConfigurator();
+
+        var connectionString = configuration.GetConnectionString("DefaultConnection") ?? string.Empty;
+        var notifier = serviceProvider.GetRequiredService<IDashboardChangeNotifier>();
+        var dashboardStorage = new SqlDashboardStorage(connectionString, "TBDD_SMF_CONFIG", notifier: notifier);
+        configurator.SetDashboardStorage(dashboardStorage);
+
+        DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
+        DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
+        jsonDataSourceUrl.JsonSource = new UriJsonSource(
+                new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
+        jsonDataSourceUrl.RootElement = "Customers";
+        dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
+
+        var catalogsJsonDataSource = new DashboardJsonDataSource("Catalogs (API)")
+        {
+            ComponentName = "catalogsDataSource",
+            JsonSource = new UriJsonSource(new Uri($"{dashboardBaseUrl}/api/catalogs"))
+        };
+        dataSourceStorage.RegisterDataSource(catalogsJsonDataSource.ComponentName, catalogsJsonDataSource.SaveToXml());
+        dataSourceStorage.RegisterDataSource(catalogsJsonDataSource.Name, catalogsJsonDataSource.SaveToXml());
+
+        configurator.SetDataSourceStorage(dataSourceStorage);
+
+        EnsureDashboardInStorage(dashboardStorage, "DefaultDashboard", defaultDashboardPath);
+        EnsureDashboardInStorage(dashboardStorage, "CatalogsGrid", catalogsGridDashboardPath);
+
+        return configurator;
+    }
+
+    private static void EnsureDashboardInStorage(IEditableDashboardStorage storage, string id, string filePath)
+    {
+        var exists = storage.GetAvailableDashboardsInfo().Any(info => string.Equals(info.ID, id, StringComparison.OrdinalIgnoreCase));
+        if (exists || !File.Exists(filePath))
+        {
+            return;
+        }
+
+        var doc = XDocument.Load(filePath);
+        storage.AddDashboard(doc, id);
+    }
+}
--- a/DbFirst.API/Dashboards/IDashboardChangeNotifier.cs
+++ b/DbFirst.API/Dashboards/IDashboardChangeNotifier.cs
@@ -0,0 +1,6 @@
+namespace DbFirst.API.Dashboards;
+
+public interface IDashboardChangeNotifier
+{
+    Task NotifyChangedAsync();
+}
--- a/DbFirst.API/Dashboards/SqlDashboardStorage.cs
+++ b/DbFirst.API/Dashboards/SqlDashboardStorage.cs
@@ -0,0 +1,138 @@
+using DevExpress.DashboardWeb;
+using Microsoft.Data.SqlClient;
+using System.Data;
+using System.Text;
+using System.Xml.Linq;
+
+namespace DbFirst.API.Dashboards;
+
+public sealed class SqlDashboardStorage : IEditableDashboardStorage
+{
+    private readonly string _connectionString;
+    private readonly string _tableName;
+    private readonly Func<string?>? _userProvider;
+    private readonly IDashboardChangeNotifier? _notifier;
+
+    public SqlDashboardStorage(string connectionString, string tableName = "TBDD_SMF_CONFIG", Func<string?>? userProvider = null, IDashboardChangeNotifier? notifier = null)
+    {
+        _connectionString = connectionString;
+        _tableName = tableName;
+        _userProvider = userProvider;
+        _notifier = notifier;
+    }
+
+    public IEnumerable<DashboardInfo> GetAvailableDashboardsInfo()
+    {
+        var dashboards = new List<DashboardInfo>();
+
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"SELECT DashboardId, DashboardName FROM dbo.[{_tableName}] WHERE ACTIVE = 1 ORDER BY DashboardName", connection);
+
+        connection.Open();
+        using var reader = command.ExecuteReader();
+        while (reader.Read())
+        {
+            var id = reader.GetString(0);
+            var name = reader.GetString(1);
+            dashboards.Add(new DashboardInfo { ID = id, Name = name });
+        }
+
+        return dashboards;
+    }
+
+    public XDocument LoadDashboard(string dashboardId)
+    {
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"SELECT DashboardData FROM dbo.[{_tableName}] WHERE DashboardId = @Id AND ACTIVE = 1", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = dashboardId });
+
+        connection.Open();
+        var data = command.ExecuteScalar() as byte[];
+        if (data == null)
+        {
+            throw new ArgumentException($"Dashboard '{dashboardId}' not found.");
+        }
+
+        var xml = Encoding.UTF8.GetString(data);
+        var doc = XDocument.Parse(xml);
+        NormalizeCatalogDateDimensions(doc);
+        return doc;
+    }
+
+    private static void NormalizeCatalogDateDimensions(XDocument doc)
+    {
+        var dateMembers = new HashSet<string>(StringComparer.OrdinalIgnoreCase)
+        {
+            "AddedWhen",
+            "ChangedWhen"
+        };
+
+        foreach (var dimension in doc.Descendants("Dimension"))
+        {
+            var member = dimension.Attribute("DataMember")?.Value;
+            if (member == null || !dateMembers.Contains(member))
+            {
+                continue;
+            }
+
+            var interval = dimension.Attribute("DateTimeGroupInterval")?.Value;
+            if (string.IsNullOrWhiteSpace(interval) || string.Equals(interval, "Year", StringComparison.OrdinalIgnoreCase))
+            {
+                dimension.SetAttributeValue("DateTimeGroupInterval", "DayMonthYear");
+            }
+        }
+    }
+
+    public string AddDashboard(XDocument dashboard, string dashboardName)
+    {
+        var id = string.IsNullOrWhiteSpace(dashboardName)
+            ? Guid.NewGuid().ToString("N")
+            : dashboardName;
+        var payload = Encoding.UTF8.GetBytes(dashboard.ToString(SaveOptions.DisableFormatting));
+        var userName = _userProvider?.Invoke();
+
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"INSERT INTO dbo.[{_tableName}] (ACTIVE, DashboardId, DashboardName, DashboardData, ADDED_WHO, ADDED_WHEN) VALUES (1, @Id, @Name, @Data, COALESCE(@User, SUSER_SNAME()), SYSUTCDATETIME())", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = id });
+        command.Parameters.Add(new SqlParameter("@Name", SqlDbType.NVarChar, 256) { Value = string.IsNullOrWhiteSpace(dashboardName) ? id : dashboardName });
+        command.Parameters.Add(new SqlParameter("@Data", SqlDbType.VarBinary, -1) { Value = payload });
+        command.Parameters.Add(new SqlParameter("@User", SqlDbType.NVarChar, 50) { Value = (object?)userName ?? DBNull.Value });
+
+        connection.Open();
+        command.ExecuteNonQuery();
+        _ = _notifier?.NotifyChangedAsync();
+        return id;
+    }
+
+    public void SaveDashboard(string dashboardId, XDocument dashboard)
+    {
+        var payload = Encoding.UTF8.GetBytes(dashboard.ToString(SaveOptions.DisableFormatting));
+        var userName = _userProvider?.Invoke();
+
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"UPDATE dbo.[{_tableName}] SET DashboardData = @Data, CHANGED_WHO = COALESCE(@User, SUSER_SNAME()), CHANGED_WHEN = SYSUTCDATETIME() WHERE DashboardId = @Id", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = dashboardId });
+        command.Parameters.Add(new SqlParameter("@Data", SqlDbType.VarBinary, -1) { Value = payload });
+        command.Parameters.Add(new SqlParameter("@User", SqlDbType.NVarChar, 50) { Value = (object?)userName ?? DBNull.Value });
+
+        connection.Open();
+        var rows = command.ExecuteNonQuery();
+        if (rows == 0)
+        {
+            throw new ArgumentException($"Dashboard '{dashboardId}' not found.");
+        }
+
+        _ = _notifier?.NotifyChangedAsync();
+    }
+
+    public void DeleteDashboard(string dashboardId)
+    {
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"DELETE FROM dbo.[{_tableName}] WHERE DashboardId = @Id", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = dashboardId });
+
+        connection.Open();
+        command.ExecuteNonQuery();
+        _ = _notifier?.NotifyChangedAsync();
+    }
+}
--- a/DbFirst.API/Data/Dashboards/CatalogsGrid.xml
+++ b/DbFirst.API/Data/Dashboards/CatalogsGrid.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Dashboard CurrencyCulture="de-DE" RequestParameters="false">
+  <Title Text="Catalogs (Dashboard Grid)" />
+  <DataSources>
+    <JsonDataSource Name="Catalogs (API)" ComponentName="catalogsDataSource">
+      <Source SourceType="DevExpress.DataAccess.Json.UriJsonSource" Uri="https://localhost:7204/api/catalogs" />
+    </JsonDataSource>
+  </DataSources>
+  <Items>
+    <Grid ComponentName="gridDashboardItem1" Name="Catalogs" DataSource="catalogsDataSource">
+      <DataItems>
+        <Dimension DataMember="Guid" DefaultId="DataItem0" />
+        <Dimension DataMember="CatTitle" DefaultId="DataItem1" />
+        <Dimension DataMember="CatString" DefaultId="DataItem2" />
+        <Dimension DataMember="AddedWho" DefaultId="DataItem3" />
+        <Dimension DataMember="AddedWhen" DefaultId="DataItem4" />
+        <Dimension DataMember="ChangedWho" DefaultId="DataItem5" />
+        <Dimension DataMember="ChangedWhen" DefaultId="DataItem6" />
+      </DataItems>
+      <GridColumns>
+        <GridDimensionColumn Name="Id">
+          <Dimension DefaultId="DataItem0" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Titel">
+          <Dimension DefaultId="DataItem1" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="String">
+          <Dimension DefaultId="DataItem2" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Angelegt von">
+          <Dimension DefaultId="DataItem3" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Angelegt am">
+          <Dimension DefaultId="DataItem4" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Geändert von">
+          <Dimension DefaultId="DataItem5" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Geändert am">
+          <Dimension DefaultId="DataItem6" />
+        </GridDimensionColumn>
+      </GridColumns>
+      <GridOptions />
+      <ColumnFilterOptions />
+    </Grid>
+  </Items>
+  <LayoutTree>
+    <LayoutGroup Orientation="Vertical">
+      <LayoutItem DashboardItem="gridDashboardItem1" />
+    </LayoutGroup>
+  </LayoutTree>
+</Dashboard>
--- a/DbFirst.API/Data/Dashboards/DashboardStorage.sql
+++ b/DbFirst.API/Data/Dashboards/DashboardStorage.sql
@@ -0,0 +1,17 @@
+CREATE TABLE dbo.TBDD_SMF_CONFIG (
+    [GUID] [bigint] IDENTITY(1,1) NOT NULL,
+    [ACTIVE] [bit] NOT NULL,
+    DashboardId NVARCHAR(128) NOT NULL,
+    DashboardName NVARCHAR(256) NOT NULL,
+    DashboardData VARBINARY(MAX) NOT NULL,
+    --- INSERT YOUR COLUMNS HERE ---
+    [ADDED_WHO] [nvarchar](50) NOT NULL,
+    [ADDED_WHEN] [datetime] NOT NULL,
+    [CHANGED_WHO] [nvarchar](50) NULL,
+    [CHANGED_WHEN] [datetime] NULL,
+ CONSTRAINT [PK_TBDD_SMF_CONFIG_DashboardStorage] PRIMARY KEY CLUSTERED 
+(
+    [GUID] ASC
+)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = ON, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, FILLFACTOR = 80) ON [PRIMARY]
+) ON [PRIMARY]
+GO
--- a/DbFirst.API/Data/Dashboards/DefaultDashboard.xml
+++ b/DbFirst.API/Data/Dashboards/DefaultDashboard.xml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Dashboard CurrencyCulture="de-DE" RequestParameters="false">
+  <Title Text="Default Dashboard" />
+  <DataSources>
+    <JsonDataSource Name="JSON Data Source (URL)" RootElement="Customers" ComponentName="jsonDataSource1">
+      <Source SourceType="DevExpress.DataAccess.Json.UriJsonSource" Uri="https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json" />
+    </JsonDataSource>
+    <JsonDataSource Name="Catalogs (API)" ComponentName="catalogsDataSource">
+      <Source SourceType="DevExpress.DataAccess.Json.UriJsonSource" Uri="https://localhost:7204/api/catalogs" />
+    </JsonDataSource>
+  </DataSources>
+  <Items>
+    <Grid ComponentName="gridDashboardItem2" Name="Grid 2" DataSource="catalogsDataSource">
+      <DataItems>
+        <Measure DataMember="guid" DefaultId="DataItem0" />
+        <Dimension DataMember="catTitle" DefaultId="DataItem1" />
+        <Dimension DataMember="catString" DefaultId="DataItem2" />
+        <Dimension DataMember="addedWhen" DefaultId="DataItem3" />
+        <Dimension DataMember="addedWho" DefaultId="DataItem4" />
+        <Dimension DataMember="changedWhen" DefaultId="DataItem5" />
+        <Dimension DataMember="changedWho" DefaultId="DataItem6" />
+      </DataItems>
+      <GridColumns>
+        <GridMeasureColumn>
+          <Measure DefaultId="DataItem0" />
+        </GridMeasureColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem1" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem2" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem3" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem4" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem5" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem6" />
+        </GridDimensionColumn>
+      </GridColumns>
+      <GridOptions />
+      <ColumnFilterOptions />
+    </Grid>
+  </Items>
+  <LayoutTree>
+    <LayoutGroup>
+      <LayoutItem DashboardItem="gridDashboardItem2" />
+    </LayoutGroup>
+  </LayoutTree>
+</Dashboard>
--- a/DbFirst.API/DbFirst.API.csproj
+++ b/DbFirst.API/DbFirst.API.csproj
@@ -7,8 +7,8 @@
  </PropertyGroup>

  <ItemGroup>
-    <PackageReference Include="AutoMapper" Version="12.0.1" />
-    <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="12.0.1" />
+    <PackageReference Include="AutoMapper" Version="16.1.1" />
+    <PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="25.2.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.22" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.22" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.22">
@@ -16,7 +16,6 @@
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.6.2" />
-    <PackageReference Include="MediatR.Extensions.Microsoft.DependencyInjection" Version="11.1.0" />
  </ItemGroup>

  <ItemGroup>
--- a/DbFirst.API/Hubs/DashboardsHub.cs
+++ b/DbFirst.API/Hubs/DashboardsHub.cs
@@ -0,0 +1,7 @@
+using Microsoft.AspNetCore.SignalR;
+
+namespace DbFirst.API.Hubs;
+
+public class DashboardsHub : Hub
+{
+}
--- a/DbFirst.API/Middleware/ExceptionHandlingMiddleware.cs
+++ b/DbFirst.API/Middleware/ExceptionHandlingMiddleware.cs
@@ -1,5 +1,4 @@
-using System.Net;
-using System.Text.Json;
+using Microsoft.AspNetCore.Mvc;

 namespace DbFirst.API.Middleware;

@@ -20,33 +19,35 @@ public class ExceptionHandlingMiddleware
        {
            await _next(context);
        }
+        catch (InvalidOperationException ex)
+        {
+            _logger.LogWarning(ex, "Domain validation error");
+            await WriteProblemAsync(context, StatusCodes.Status400BadRequest, "Eingabe ungültig", ex.Message);
+        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Unhandled exception");
-            await WriteProblemDetailsAsync(context, ex);
+            await WriteProblemAsync(context, StatusCodes.Status500InternalServerError, "Serverfehler", ex.Message);
        }
    }

-    private static async Task WriteProblemDetailsAsync(HttpContext context, Exception ex)
+    private static async Task WriteProblemAsync(HttpContext context, int status, string title, string detail)
    {
-        if (context.Response.HasStarted)
-        {
-            throw ex;
-        }
+        if (context.Response.HasStarted) return;

        context.Response.Clear();
-        context.Response.StatusCode = (int)HttpStatusCode.InternalServerError;
-        context.Response.ContentType = "application/json";
+        context.Response.StatusCode = status;
+        context.Response.ContentType = "application/problem+json";

-        var problem = new
+        var problem = new ProblemDetails
        {
-            type = "https://tools.ietf.org/html/rfc9110#section-15.6.1",
-            title = "Serverfehler",
-            status = context.Response.StatusCode,
-            detail = ex.Message,
-            traceId = context.TraceIdentifier
+            Type = $"https://tools.ietf.org/html/rfc9110#section-{(status == 400 ? "15.5.1" : "15.6.1")}",
+            Title = title,
+            Status = status,
+            Detail = detail,
+            Extensions = { ["traceId"] = context.TraceIdentifier }
        };

-        await context.Response.WriteAsync(JsonSerializer.Serialize(problem));
+        await context.Response.WriteAsJsonAsync(problem);
    }
 }
--- a/DbFirst.API/Program.cs
+++ b/DbFirst.API/Program.cs
@@ -1,10 +1,11 @@
-using DbFirst.Application;
-using DbFirst.Application.Catalogs;
-using DbFirst.Domain.Repositories;
-using DbFirst.Infrastructure;
-using DbFirst.Infrastructure.Repositories;
-using MediatR;
+using DbFirst.API.Dashboards;
+using DbFirst.API.Hubs;
 using DbFirst.API.Middleware;
+using DbFirst.Application;
+using DbFirst.Infrastructure;
+using DevExpress.AspNetCore;
+using DevExpress.DashboardAspNetCore;
+using DevExpress.DashboardWeb;

 var builder = WebApplication.CreateBuilder(args);

@@ -12,15 +13,16 @@ var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddControllers();
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
+builder.Services.AddProblemDetails();

 // TODO: allow listed origins configured in appsettings.json
 // In any case, dont let them to free to use without cors. if there is no origin specified, block all.
 // In development you can keep it easy.
 builder.Services.AddCors(options =>
-{    
+{
    options.AddDefaultPolicy(policy =>
    {
-        if(builder.Environment.IsDevelopment())
+        if (builder.Environment.IsDevelopment())
        {
            policy.AllowAnyOrigin()
                  .AllowAnyHeader()
@@ -29,9 +31,13 @@ builder.Services.AddCors(options =>
        else
        {
            var origins = builder.Configuration.GetSection("Cors:AllowedOrigins").Get<string[]>() ?? [];
-            policy.WithOrigins(origins)
-                  .AllowAnyHeader()
-                  .AllowAnyMethod();
+            if (origins.Length > 0)
+            {
+                policy.WithOrigins(origins)
+                      .AllowAnyHeader()
+                      .AllowAnyMethod();
+            }
+            // if no origins configured, deny all by leaving policy without allowances
        }
    });
 });
@@ -39,7 +45,11 @@ builder.Services.AddCors(options =>
 builder.Services.AddInfrastructure(builder.Configuration);
 builder.Services.AddApplication();

-builder.Services.AddScoped<ICatalogRepository, CatalogRepository>();
+builder.Services.AddDevExpressControls();
+builder.Services.AddSignalR();
+builder.Services.AddSingleton<IDashboardChangeNotifier, DashboardChangeNotifier>();
+builder.Services.AddScoped<DashboardConfigurator>(sp =>
+    DashboardConfiguratorFactory.Create(sp, builder.Configuration, builder.Environment));

 var app = builder.Build();

@@ -52,10 +62,13 @@ if (app.Environment.IsDevelopment())

 app.UseMiddleware<ExceptionHandlingMiddleware>();

+app.UseDevExpressControls();
 app.UseHttpsRedirection();
 app.UseCors();
 app.UseAuthorization();

+app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
+app.MapHub<DashboardsHub>("/hubs/dashboards");
 app.MapControllers();

-app.Run();
+app.Run();
--- a/DbFirst.API/appsettings.json
+++ b/DbFirst.API/appsettings.json
@@ -1,6 +1,10 @@
 {
  "ConnectionStrings": {
-    "DefaultConnection": "Server=SDD-VMP04-SQL17\\DD_DEVELOP01;Database=DD_ECM;User Id=sa;Password=dd;TrustServerCertificate=True;"
+    "DefaultConnection": "Server=SDD-VMP04-SQL17\\DD_DEVELOP01;Database=DD_ECM;User Id=sa;Password=dd;TrustServerCertificate=True;",
+    "MassDataConnection": "Server=SDD-VMP04-SQL19\\DD_DEVELOP01;Database=DD_ECM;User Id=sa;Password=dd;TrustServerCertificate=True;"
+  },
+  "Dashboard": {
+    "BaseUrl": "https://localhost:7204"
  },
  "Cors": {
    "AllowedOrigins": [
@@ -8,6 +12,18 @@
      "http://localhost:5101"
    ]
  },
+  "TableConfigurations": {
+    "VwmyCatalog": {
+      "ViewName": "VWMY_CATALOG",
+      "GuidColumnName": "GUID",
+      "CatTitleColumnName": "CAT_TITLE",
+      "CatStringColumnName": "CAT_STRING",
+      "AddedWhoColumnName": "ADDED_WHO",
+      "AddedWhenColumnName": "ADDED_WHEN",
+      "ChangedWhoColumnName": "CHANGED_WHO",
+      "ChangedWhenColumnName": "CHANGED_WHEN"
+    }
+  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
--- a/DbFirst.Application/Catalogs/CatalogProfile.cs
+++ b/DbFirst.Application/Catalogs/CatalogProfile.cs
@@ -1,4 +1,5 @@
 using AutoMapper;
+using DbFirst.Contracts.Catalogs;
 using DbFirst.Domain.Entities;

 namespace DbFirst.Application.Catalogs;
--- a/DbFirst.Application/Catalogs/CatalogReadDto.cs
+++ b/DbFirst.Application/Catalogs/CatalogReadDto.cs
@@ -1,12 +0,0 @@
-namespace DbFirst.Application.Catalogs;
-
-public class CatalogReadDto
-{
-    public int Guid { get; set; }
-    public string CatTitle { get; set; } = null!;
-    public string CatString { get; set; } = null!;
-    public string AddedWho { get; set; } = null!;
-    public DateTime AddedWhen { get; set; }
-    public string? ChangedWho { get; set; }
-    public DateTime? ChangedWhen { get; set; }
-}
--- a/DbFirst.Application/Catalogs/CatalogService.cs
+++ b/DbFirst.Application/Catalogs/CatalogService.cs
@@ -1,100 +0,0 @@
-using AutoMapper;
-using DbFirst.Domain.Repositories;
-using DbFirst.Domain.Entities;
-
-namespace DbFirst.Application.Catalogs;
-
-//TODO: create generic service to reduce code duplication
-
-/* Copilot's Response:
-A generic CRUD base service adds little value in your case:
-
-Pros:
-• Less boilerplate for simple entities without special logic.
-• Uniform CRUD signatures.
-
-Cons/Practical here:
-• Domain logic differs per entity(unique title check, setting audit fields, forbidding title changes, stored procs with output GUID).
-• Generic services tend to be diluted by virtual methods/hooks for special cases—ending up with per-entity overrides and little real gain.
-• With stored procedures and output parameters, the pattern doesn’t fit cleanly because operations aren’t symmetric (separate procs for insert/update/delete).
-
-Conclusion: For this solution a generic service would be more overhead than benefit. If you later have multiple very similar entities without special logic,
-you could consider a lightweight generic interface/base; for now, the specialized service implementation is cleaner. */
-
-/* Hakan's Response: 
- * No, it absolutely makes sense to create a generic service using Options pattern. So, you can easily inject your SQL queries or stored procedure names via configuration.
- * see: https://docs.microsoft.com/en-us/dotnet/core/extensions/options
- */
-
-//TODO: implement CQRS pattern with MediatR
-
-/* Hakan's response
- * Here is the main part. We dont even need a service layer if we implement CQRS with MediatR at least for CRUD operations.
- */
-
-public class CatalogService : ICatalogService
-{
-    private readonly ICatalogRepository _repository;
-    private readonly IMapper _mapper;
-
-    public CatalogService(ICatalogRepository repository, IMapper mapper)
-    {
-        _repository = repository;
-        _mapper = mapper;
-    }
-
-    public async Task<List<CatalogReadDto>> GetAllAsync(CancellationToken cancellationToken = default)
-    {
-        var items = await _repository.GetAllAsync(cancellationToken);
-        return _mapper.Map<List<CatalogReadDto>>(items);
-    }
-
-    public async Task<CatalogReadDto?> GetByIdAsync(int id, CancellationToken cancellationToken = default)
-    {
-        var item = await _repository.GetByIdAsync(id, cancellationToken);
-        return item == null ? null : _mapper.Map<CatalogReadDto>(item);
-    }
-
-    public async Task<CatalogReadDto?> CreateAsync(CatalogWriteDto dto, CancellationToken cancellationToken = default)
-    {
-        var existing = await _repository.GetByTitleAsync(dto.CatTitle, cancellationToken);
-        if (existing != null)
-        {
-            return null;
-        }
-
-        var entity = _mapper.Map<VwmyCatalog>(dto);
-        entity.AddedWho = "system";
-        entity.AddedWhen = DateTime.UtcNow;
-        entity.ChangedWho = "system";
-        entity.ChangedWhen = DateTime.UtcNow;
-
-        var created = await _repository.InsertAsync(entity, cancellationToken);
-        return _mapper.Map<CatalogReadDto>(created);
-    }
-
-    public async Task<CatalogReadDto?> UpdateAsync(int id, CatalogWriteDto dto, CancellationToken cancellationToken = default)
-    {
-        var existing = await _repository.GetByIdAsync(id, cancellationToken);
-        if (existing == null)
-        {
-            return null;
-        }
-
-        var entity = _mapper.Map<VwmyCatalog>(dto);
-        entity.Guid = id;
-        entity.CatTitle = existing.CatTitle;
-        entity.AddedWho = existing.AddedWho;
-        entity.AddedWhen = existing.AddedWhen;
-        entity.ChangedWho = "system";
-        entity.ChangedWhen = DateTime.UtcNow;
-
-        var updated = await _repository.UpdateAsync(id, entity, cancellationToken);
-        return updated == null ? null : _mapper.Map<CatalogReadDto>(updated);
-    }
-
-    public async Task<bool> DeleteAsync(int id, CancellationToken cancellationToken = default)
-    {
-        return await _repository.DeleteAsync(id, cancellationToken);
-    }
-}
--- a/DbFirst.Application/Catalogs/CatalogWriteDto.cs
+++ b/DbFirst.Application/Catalogs/CatalogWriteDto.cs
@@ -1,7 +0,0 @@
-namespace DbFirst.Application.Catalogs;
-
-public class CatalogWriteDto
-{
-    public string CatTitle { get; set; } = null!;
-    public string CatString { get; set; } = null!;
-}
--- a/DbFirst.Application/Catalogs/Commands/CreateCatalogCommand.cs
+++ b/DbFirst.Application/Catalogs/Commands/CreateCatalogCommand.cs
@@ -1,4 +1,4 @@
-using DbFirst.Application.Catalogs;
+using DbFirst.Contracts.Catalogs;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Commands;
--- a/DbFirst.Application/Catalogs/Commands/CreateCatalogHandler.cs
+++ b/DbFirst.Application/Catalogs/Commands/CreateCatalogHandler.cs
@@ -1,6 +1,7 @@
 using AutoMapper;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.Catalogs;
 using DbFirst.Domain.Entities;
-using DbFirst.Domain.Repositories;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Commands;
--- a/DbFirst.Application/Catalogs/Commands/DeleteCatalogHandler.cs
+++ b/DbFirst.Application/Catalogs/Commands/DeleteCatalogHandler.cs
@@ -1,4 +1,4 @@
-using DbFirst.Domain.Repositories;
+using DbFirst.Application.Repositories;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Commands;
--- a/DbFirst.Application/Catalogs/Commands/UpdateCatalogCommand.cs
+++ b/DbFirst.Application/Catalogs/Commands/UpdateCatalogCommand.cs
@@ -1,4 +1,4 @@
-using DbFirst.Application.Catalogs;
+using DbFirst.Contracts.Catalogs;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Commands;
--- a/DbFirst.Application/Catalogs/Commands/UpdateCatalogHandler.cs
+++ b/DbFirst.Application/Catalogs/Commands/UpdateCatalogHandler.cs
@@ -1,6 +1,8 @@
 using AutoMapper;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.Catalogs;
+using DbFirst.Domain;
 using DbFirst.Domain.Entities;
-using DbFirst.Domain.Repositories;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Commands;
@@ -24,15 +26,20 @@ public class UpdateCatalogHandler : IRequestHandler<UpdateCatalogCommand, Catalo
            return null;
        }

+        if (request.Dto.UpdateProcedure == CatalogUpdateProcedure.Update &&
+            !string.Equals(existing.CatTitle, request.Dto.CatTitle, StringComparison.OrdinalIgnoreCase))
+        {
+            throw new InvalidOperationException("Titel kann nicht geändert werden.");
+        }
+
        var entity = _mapper.Map<VwmyCatalog>(request.Dto);
        entity.Guid = request.Id;
-        entity.CatTitle = existing.CatTitle;
        entity.AddedWho = existing.AddedWho;
        entity.AddedWhen = existing.AddedWhen;
        entity.ChangedWho = "system";
        entity.ChangedWhen = DateTime.UtcNow;

-        var updated = await _repository.UpdateAsync(request.Id, entity, cancellationToken);
+        var updated = await _repository.UpdateAsync(request.Id, entity, request.Dto.UpdateProcedure, cancellationToken);
        return updated == null ? null : _mapper.Map<CatalogReadDto>(updated);
    }
 }
--- a/DbFirst.Application/Catalogs/ICatalogService.cs
+++ b/DbFirst.Application/Catalogs/ICatalogService.cs
@@ -1,27 +0,0 @@
-namespace DbFirst.Application.Catalogs;
-
-//TODO: create generic service to reduce code duplication
-
-/* Copilot's Response:
-A generic CRUD base service adds little value in your case:
-
-Pros:
-• Less boilerplate for simple entities without special logic.
-• Uniform CRUD signatures.
-
-Cons/Practical here:
-• Domain logic differs per entity(unique title check, setting audit fields, forbidding title changes, stored procs with output GUID).
-• Generic services tend to be diluted by virtual methods/hooks for special cases—ending up with per-entity overrides and little real gain.
-• With stored procedures and output parameters, the pattern doesn’t fit cleanly because operations aren’t symmetric (separate procs for insert/update/delete).
-
-Conclusion: For this solution a generic service would be more overhead than benefit. If you later have multiple very similar entities without special logic,
-you could consider a lightweight generic interface/base; for now, the specialized service implementation is cleaner. */
-
-public interface ICatalogService
-{
-    Task<List<CatalogReadDto>> GetAllAsync(CancellationToken cancellationToken = default);
-    Task<CatalogReadDto?> GetByIdAsync(int id, CancellationToken cancellationToken = default);
-    Task<CatalogReadDto?> CreateAsync(CatalogWriteDto dto, CancellationToken cancellationToken = default);
-    Task<CatalogReadDto?> UpdateAsync(int id, CatalogWriteDto dto, CancellationToken cancellationToken = default);
-    Task<bool> DeleteAsync(int id, CancellationToken cancellationToken = default);
-}
--- a/DbFirst.Application/Catalogs/Queries/GetAllCatalogsHandler.cs
+++ b/DbFirst.Application/Catalogs/Queries/GetAllCatalogsHandler.cs
@@ -1,5 +1,6 @@
 using AutoMapper;
-using DbFirst.Domain.Repositories;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.Catalogs;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Queries;
--- a/DbFirst.Application/Catalogs/Queries/GetAllCatalogsQuery.cs
+++ b/DbFirst.Application/Catalogs/Queries/GetAllCatalogsQuery.cs
@@ -1,4 +1,4 @@
-using DbFirst.Application.Catalogs;
+using DbFirst.Contracts.Catalogs;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Queries;
--- a/DbFirst.Application/Catalogs/Queries/GetCatalogByIdHandler.cs
+++ b/DbFirst.Application/Catalogs/Queries/GetCatalogByIdHandler.cs
@@ -1,5 +1,6 @@
 using AutoMapper;
-using DbFirst.Domain.Repositories;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.Catalogs;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Queries;
--- a/DbFirst.Application/Catalogs/Queries/GetCatalogByIdQuery.cs
+++ b/DbFirst.Application/Catalogs/Queries/GetCatalogByIdQuery.cs
@@ -1,4 +1,4 @@
-using DbFirst.Application.Catalogs;
+using DbFirst.Contracts.Catalogs;
 using MediatR;

 namespace DbFirst.Application.Catalogs.Queries;
--- a/DbFirst.Application/DbFirst.Application.csproj
+++ b/DbFirst.Application/DbFirst.Application.csproj
@@ -7,14 +7,18 @@
  </PropertyGroup>

  <ItemGroup>
-    <PackageReference Include="AutoMapper" Version="12.0.1" />
-    <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="12.0.1" />
-    <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="8.0.2" />
-    <PackageReference Include="MediatR.Extensions.Microsoft.DependencyInjection" Version="11.1.0" />
+    <PackageReference Include="AutoMapper" Version="16.1.1" />
+    <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="10.0.0" />
+	<PackageReference Include="MediatR" Version="14.1.0" />
  </ItemGroup>

  <ItemGroup>
+    <ProjectReference Include="..\DbFirst.Contracts\DbFirst.Contracts.csproj" />
    <ProjectReference Include="..\DbFirst.Domain\DbFirst.Domain.csproj" />
  </ItemGroup>

+  <ItemGroup>
+    <Folder Include="Layouts\" />
+  </ItemGroup>
+
 </Project>
--- a/DbFirst.Application/DependencyInjection.cs
+++ b/DbFirst.Application/DependencyInjection.cs
@@ -1,5 +1,4 @@
 using Microsoft.Extensions.DependencyInjection;
-using MediatR;

 namespace DbFirst.Application;

@@ -7,8 +6,9 @@ public static class DependencyInjection
 {
    public static IServiceCollection AddApplication(this IServiceCollection services)
    {
-        services.AddAutoMapper(typeof(DependencyInjection).Assembly);
-        services.AddMediatR(typeof(DependencyInjection).Assembly);
+        services.AddAutoMapper(cfg => cfg.AddMaps(typeof(DependencyInjection).Assembly));
+        services.AddMediatR(cfg =>
+    cfg.RegisterServicesFromAssembly(typeof(DependencyInjection).Assembly));
        return services;
    }
 }
--- a/DbFirst.Application/MassData/Commands/UpsertMassDataByCustomerNameCommand.cs
+++ b/DbFirst.Application/MassData/Commands/UpsertMassDataByCustomerNameCommand.cs
@@ -0,0 +1,6 @@
+using DbFirst.Contracts.MassData;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Commands;
+
+public record UpsertMassDataByCustomerNameCommand(MassDataWriteDto Dto) : IRequest<MassDataReadDto>;
--- a/DbFirst.Application/MassData/Commands/UpsertMassDataByCustomerNameHandler.cs
+++ b/DbFirst.Application/MassData/Commands/UpsertMassDataByCustomerNameHandler.cs
@@ -0,0 +1,25 @@
+using AutoMapper;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.MassData;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Commands;
+
+public class UpsertMassDataByCustomerNameHandler : IRequestHandler<UpsertMassDataByCustomerNameCommand, MassDataReadDto>
+{
+    private readonly IMassDataRepository _repository;
+    private readonly IMapper _mapper;
+
+    public UpsertMassDataByCustomerNameHandler(IMassDataRepository repository, IMapper mapper)
+    {
+        _repository = repository;
+        _mapper = mapper;
+    }
+
+    public async Task<MassDataReadDto> Handle(UpsertMassDataByCustomerNameCommand request, CancellationToken cancellationToken)
+    {
+        var dto = request.Dto;
+        var updated = await _repository.UpsertByCustomerNameAsync(dto.CustomerName, dto.Amount, dto.StatusFlag, dto.Category, cancellationToken);
+        return _mapper.Map<MassDataReadDto>(updated);
+    }
+}
--- a/DbFirst.Application/MassData/MassDataProfile.cs
+++ b/DbFirst.Application/MassData/MassDataProfile.cs
@@ -0,0 +1,13 @@
+using AutoMapper;
+using DbFirst.Contracts.MassData;
+using DbFirst.Domain.Entities;
+
+namespace DbFirst.Application.MassData;
+
+public class MassDataProfile : Profile
+{
+    public MassDataProfile()
+    {
+        CreateMap<Massdata, MassDataReadDto>();
+    }
+}
--- a/DbFirst.Application/MassData/Queries/GetAllMassDataHandler.cs
+++ b/DbFirst.Application/MassData/Queries/GetAllMassDataHandler.cs
@@ -0,0 +1,24 @@
+using AutoMapper;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.MassData;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Queries;
+
+public class GetAllMassDataHandler : IRequestHandler<GetAllMassDataQuery, List<MassDataReadDto>>
+{
+    private readonly IMassDataRepository _repository;
+    private readonly IMapper _mapper;
+
+    public GetAllMassDataHandler(IMassDataRepository repository, IMapper mapper)
+    {
+        _repository = repository;
+        _mapper = mapper;
+    }
+
+    public async Task<List<MassDataReadDto>> Handle(GetAllMassDataQuery request, CancellationToken cancellationToken)
+    {
+        var items = await _repository.GetAllAsync(request.Skip, request.Take, cancellationToken);
+        return _mapper.Map<List<MassDataReadDto>>(items);
+    }
+}
--- a/DbFirst.Application/MassData/Queries/GetAllMassDataQuery.cs
+++ b/DbFirst.Application/MassData/Queries/GetAllMassDataQuery.cs
@@ -0,0 +1,6 @@
+using DbFirst.Contracts.MassData;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Queries;
+
+public record GetAllMassDataQuery(int? Skip, int? Take) : IRequest<List<MassDataReadDto>>;
--- a/DbFirst.Application/MassData/Queries/GetMassDataByCustomerNameHandler.cs
+++ b/DbFirst.Application/MassData/Queries/GetMassDataByCustomerNameHandler.cs
@@ -0,0 +1,24 @@
+using AutoMapper;
+using DbFirst.Application.Repositories;
+using DbFirst.Contracts.MassData;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Queries;
+
+public class GetMassDataByCustomerNameHandler : IRequestHandler<GetMassDataByCustomerNameQuery, MassDataReadDto?>
+{
+    private readonly IMassDataRepository _repository;
+    private readonly IMapper _mapper;
+
+    public GetMassDataByCustomerNameHandler(IMassDataRepository repository, IMapper mapper)
+    {
+        _repository = repository;
+        _mapper = mapper;
+    }
+
+    public async Task<MassDataReadDto?> Handle(GetMassDataByCustomerNameQuery request, CancellationToken cancellationToken)
+    {
+        var item = await _repository.GetByCustomerNameAsync(request.CustomerName, cancellationToken);
+        return item == null ? null : _mapper.Map<MassDataReadDto>(item);
+    }
+}
--- a/DbFirst.Application/MassData/Queries/GetMassDataByCustomerNameQuery.cs
+++ b/DbFirst.Application/MassData/Queries/GetMassDataByCustomerNameQuery.cs
@@ -0,0 +1,6 @@
+using DbFirst.Contracts.MassData;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Queries;
+
+public record GetMassDataByCustomerNameQuery(string CustomerName) : IRequest<MassDataReadDto?>;
--- a/DbFirst.Application/MassData/Queries/GetMassDataCountHandler.cs
+++ b/DbFirst.Application/MassData/Queries/GetMassDataCountHandler.cs
@@ -0,0 +1,19 @@
+using DbFirst.Application.Repositories;
+using MediatR;
+
+namespace DbFirst.Application.MassData.Queries;
+
+public class GetMassDataCountHandler : IRequestHandler<GetMassDataCountQuery, int>
+{
+    private readonly IMassDataRepository _repository;
+
+    public GetMassDataCountHandler(IMassDataRepository repository)
+    {
+        _repository = repository;
+    }
+
+    public async Task<int> Handle(GetMassDataCountQuery request, CancellationToken cancellationToken)
+    {
+        return await _repository.GetCountAsync(cancellationToken);
+    }
+}
--- a/DbFirst.Application/MassData/Queries/GetMassDataCountQuery.cs
+++ b/DbFirst.Application/MassData/Queries/GetMassDataCountQuery.cs
@@ -0,0 +1,5 @@
+using MediatR;
+
+namespace DbFirst.Application.MassData.Queries;
+
+public record GetMassDataCountQuery : IRequest<int>;
--- a/DbFirst.Application/Repositories/ICatalogRepository.cs
+++ b/DbFirst.Application/Repositories/ICatalogRepository.cs
@@ -0,0 +1,10 @@
+using DbFirst.Domain;
+using DbFirst.Domain.Entities;
+
+namespace DbFirst.Application.Repositories;
+
+public interface ICatalogRepository : IRepository<VwmyCatalog>
+{
+    Task<VwmyCatalog?> GetByTitleAsync(string title, CancellationToken cancellationToken = default);
+    Task<VwmyCatalog?> UpdateAsync(int id, VwmyCatalog catalog, CatalogUpdateProcedure procedure, CancellationToken cancellationToken = default);
+}
--- a/DbFirst.Application/Repositories/ILayoutRepository.cs
+++ b/DbFirst.Application/Repositories/ILayoutRepository.cs
@@ -0,0 +1,10 @@
+using DbFirst.Domain.Entities;
+
+namespace DbFirst.Application.Repositories;
+
+public interface ILayoutRepository
+{
+    Task<SmfLayout?> GetAsync(string layoutType, string layoutKey, string userName, CancellationToken cancellationToken = default);
+    Task<SmfLayout> UpsertAsync(string layoutType, string layoutKey, string userName, byte[] layoutData, CancellationToken cancellationToken = default);
+    Task<bool> DeleteAsync(string layoutType, string layoutKey, string userName, CancellationToken cancellationToken = default);
+}
--- a/DbFirst.Application/Repositories/IMassDataRepository.cs
+++ b/DbFirst.Application/Repositories/IMassDataRepository.cs
@@ -0,0 +1,11 @@
+using DbFirst.Domain.Entities;
+
+namespace DbFirst.Application.Repositories;
+
+public interface IMassDataRepository
+{
+    Task<int> GetCountAsync(CancellationToken cancellationToken = default);
+    Task<List<Massdata>> GetAllAsync(int? skip = null, int? take = null, CancellationToken cancellationToken = default);
+    Task<Massdata?> GetByCustomerNameAsync(string customerName, CancellationToken cancellationToken = default);
+    Task<Massdata> UpsertByCustomerNameAsync(string customerName, decimal amount, bool statusFlag, string category, CancellationToken cancellationToken = default);
+}
--- a/DbFirst.Application/Repositories/IRepository.cs
+++ b/DbFirst.Application/Repositories/IRepository.cs
@@ -0,0 +1,10 @@
+namespace DbFirst.Application.Repositories;
+
+public interface IRepository<T>
+{
+    Task<List<T>> GetAllAsync(CancellationToken cancellationToken = default);
+    Task<T?> GetByIdAsync(int id, CancellationToken cancellationToken = default);
+    Task<T> InsertAsync(T entity, CancellationToken cancellationToken = default);
+    Task<T?> UpdateAsync(int id, T entity, CancellationToken cancellationToken = default);
+    Task<bool> DeleteAsync(int id, CancellationToken cancellationToken = default);
+}
--- a/DbFirst.BlazorWasm/App.razor
+++ b/DbFirst.BlazorWasm/App.razor
@@ -1,12 +0,0 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
--- a/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
+++ b/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
@@ -1,18 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
-
-  <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-  </PropertyGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.22" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.22" PrivateAssets="all" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <Folder Include="wwwroot\sample-data\" />
-  </ItemGroup>
-
-</Project>
--- a/DbFirst.BlazorWasm/Layout/MainLayout.razor
+++ b/DbFirst.BlazorWasm/Layout/MainLayout.razor
@@ -1,16 +0,0 @@
-@inherits LayoutComponentBase
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
--- a/DbFirst.BlazorWasm/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWasm/Layout/NavMenu.razor
@@ -1,34 +0,0 @@
-<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">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</div>
-
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="catalogs">
-                <span class="bi bi-collection-nav-menu" aria-hidden="true"></span> Catalogs
-            </NavLink>
-        </div>
-    </nav>
-</div>
-
-@code {
-    private bool collapseNavMenu = true;
-
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
-    }
-}
--- a/DbFirst.BlazorWasm/Layout/NavMenu.razor.css
+++ b/DbFirst.BlazorWasm/Layout/NavMenu.razor.css
@@ -1,83 +0,0 @@
-.navbar-toggler {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep a {
-        color: #d7d7d7;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .collapse {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-    }
-    
-    .nav-scrollable {
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}
--- a/DbFirst.BlazorWasm/Models/CatalogWriteDto.cs
+++ b/DbFirst.BlazorWasm/Models/CatalogWriteDto.cs
@@ -1,7 +0,0 @@
-namespace DbFirst.BlazorWasm.Models;
-
-public class CatalogWriteDto
-{
-    public string CatTitle { get; set; } = string.Empty;
-    public string CatString { get; set; } = string.Empty;
-}
--- a/DbFirst.BlazorWasm/Pages/Catalogs.razor
+++ b/DbFirst.BlazorWasm/Pages/Catalogs.razor
@@ -1,212 +0,0 @@
-@page "/catalogs"
-@inject CatalogApiClient Api
-
-<PageTitle>Catalogs</PageTitle>
-
-<h1>Catalogs</h1>
-
-@if (!string.IsNullOrWhiteSpace(errorMessage))
-{
-    <div class="alert alert-danger" role="alert">@errorMessage</div>
-}
-else if (!string.IsNullOrWhiteSpace(infoMessage))
-{
-    <div class="alert alert-success" role="alert">@infoMessage</div>
-}
-
-<div class="mb-3">
-    <button class="btn btn-primary" @onclick="StartCreate">Neuen Eintrag anlegen</button>
-</div>
-
-@if (showForm)
-{
-    <EditForm Model="formModel" OnValidSubmit="HandleSubmit">
-        <div class="row g-3">
-            <div class="col-md-6">
-                <label class="form-label">Titel</label>
-                <InputText class="form-control" @bind-Value="formModel.CatTitle" />
-            </div>
-            <div class="col-md-6">
-                <label class="form-label">Kennung</label>
-                <InputText class="form-control" @bind-Value="formModel.CatString" />
-            </div>
-        </div>
-
-        <div class="mt-3 d-flex gap-2">
-            <button type="submit" class="btn btn-success">@((isEditing ? "Speichern" : "Anlegen"))</button>
-            <button type="button" class="btn btn-secondary" @onclick="CancelEdit">Abbrechen</button>
-        </div>
-    </EditForm>
-}
-
-@if (isLoading)
-{
-    <p><em>Lade Daten...</em></p>
-}
-else if (items.Count == 0)
-{
-    <p>Keine Einträge vorhanden.</p>
-}
-else
-{
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th>Id</th>
-                <th>Titel</th>
-                <th>String</th>
-                <th>Angelegt von</th>
-                <th>Angelegt am</th>
-                <th>Geändert von</th>
-                <th>Geändert am</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var item in items)
-            {
-                <tr>
-                    <td>@item.Guid</td>
-                    <td>@item.CatTitle</td>
-                    <td>@item.CatString</td>
-                    <td>@item.AddedWho</td>
-                    <td>@item.AddedWhen.ToString("g")</td>
-                    <td>@item.ChangedWho</td>
-                    <td>@(item.ChangedWhen.HasValue ? item.ChangedWhen.Value.ToString("g") : string.Empty)</td>
-                    <td class="text-end">
-                        <button class="btn btn-sm btn-outline-primary me-2" @onclick="(() => StartEdit(item))">Bearbeiten</button>
-                        <button class="btn btn-sm btn-outline-danger" @onclick="(() => DeleteCatalog(item.Guid))">Löschen</button>
-                    </td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private List<CatalogReadDto> items = new();
-    private CatalogWriteDto formModel = new();
-    private int editingId;
-    private bool isLoading;
-    private bool isEditing;
-    private bool showForm;
-    private string? errorMessage;
-    private string? infoMessage;
-
-    protected override async Task OnInitializedAsync()
-    {
-        await LoadCatalogs();
-    }
-
-    private async Task LoadCatalogs()
-    {
-        isLoading = true;
-        errorMessage = null;
-        try
-        {
-            items = await Api.GetAllAsync();
-        }
-        catch (Exception ex)
-        {
-            errorMessage = $"Kataloge konnten nicht geladen werden: {ex.Message}";
-        }
-        finally
-        {
-            isLoading = false;
-            StateHasChanged();
-        }
-    }
-
-    private void StartCreate()
-    {
-        formModel = new CatalogWriteDto();
-        editingId = 0;
-        isEditing = false;
-        showForm = true;
-        infoMessage = null;
-        errorMessage = null;
-    }
-
-    private void StartEdit(CatalogReadDto item)
-    {
-        formModel = new CatalogWriteDto
-        {
-            CatTitle = item.CatTitle,
-            CatString = item.CatString
-        };
-        editingId = item.Guid;
-        isEditing = true;
-        showForm = true;
-        infoMessage = null;
-        errorMessage = null;
-    }
-
-    private async Task HandleSubmit()
-    {
-        errorMessage = null;
-        infoMessage = null;
-
-        try
-        {
-            if (isEditing)
-            {
-                var updated = await Api.UpdateAsync(editingId, formModel);
-                if (!updated.Success)
-                {
-                    errorMessage = updated.Error ?? "Aktualisierung fehlgeschlagen.";
-                    return;
-                }
-
-                infoMessage = "Katalog aktualisiert.";
-            }
-            else
-            {
-                var created = await Api.CreateAsync(formModel);
-                if (!created.Success || created.Value == null)
-                {
-                    errorMessage = created.Error ?? "Anlegen fehlgeschlagen.";
-                    return;
-                }
-
-                infoMessage = "Katalog angelegt.";
-            }
-
-            showForm = false;
-            await LoadCatalogs();
-        }
-        catch (Exception ex)
-        {
-            errorMessage = $"Fehler beim Speichern: {ex.Message}";
-        }
-    }
-
-    private void CancelEdit()
-    {
-        showForm = false;
-        infoMessage = null;
-        errorMessage = null;
-    }
-
-    private async Task DeleteCatalog(int id)
-    {
-        errorMessage = null;
-        infoMessage = null;
-
-        try
-        {
-            var deleted = await Api.DeleteAsync(id);
-            if (!deleted.Success)
-            {
-                errorMessage = deleted.Error ?? "Löschen fehlgeschlagen.";
-                return;
-            }
-
-            infoMessage = "Katalog gelöscht.";
-            await LoadCatalogs();
-        }
-        catch (Exception ex)
-        {
-            errorMessage = $"Fehler beim Löschen: {ex.Message}";
-        }
-    }
-}
--- a/DbFirst.BlazorWasm/Pages/Home.razor
+++ b/DbFirst.BlazorWasm/Pages/Home.razor
@@ -1,7 +0,0 @@
-@page "/"
-
-<PageTitle>Home</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
--- a/DbFirst.BlazorWasm/Program.cs
+++ b/DbFirst.BlazorWasm/Program.cs
@@ -1,14 +0,0 @@
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using DbFirst.BlazorWasm;
-using DbFirst.BlazorWasm.Services;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });
-builder.Services.AddScoped<CatalogApiClient>();
-
-await builder.Build().RunAsync();
--- a/DbFirst.BlazorWasm/Properties/launchSettings.json
+++ b/DbFirst.BlazorWasm/Properties/launchSettings.json
@@ -1,41 +0,0 @@
-{
-  "$schema": "http://json.schemastore.org/launchsettings.json",
-  "iisSettings": {
-    "windowsAuthentication": false,
-    "anonymousAuthentication": true,
-    "iisExpress": {
-      "applicationUrl": "http://localhost:12804",
-      "sslPort": 44394
-    }
-  },
-  "profiles": {
-    "http": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "http://localhost:5101",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "https": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7276;http://localhost:5101",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "IIS Express": {
-      "commandName": "IISExpress",
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    }
-  }
-}
--- a/DbFirst.BlazorWasm/Services/CatalogApiClient.cs
+++ b/DbFirst.BlazorWasm/Services/CatalogApiClient.cs
@@ -1,139 +0,0 @@
-using System.Net;
-using System.Net.Http.Json;
-using System.Text.Json;
-using DbFirst.BlazorWasm.Models;
-
-namespace DbFirst.BlazorWasm.Services;
-
-public class CatalogApiClient
-{
-    private readonly HttpClient _httpClient;
-    private const string Endpoint = "api/catalogs";
-
-    public CatalogApiClient(HttpClient httpClient)
-    {
-        _httpClient = httpClient;
-    }
-
-    public async Task<List<CatalogReadDto>> GetAllAsync()
-    {
-        var result = await _httpClient.GetFromJsonAsync<List<CatalogReadDto>>(Endpoint);
-        return result ?? new List<CatalogReadDto>();
-    }
-
-    public async Task<CatalogReadDto?> GetByIdAsync(int id)
-    {
-        return await _httpClient.GetFromJsonAsync<CatalogReadDto>($"{Endpoint}/{id}");
-    }
-
-    public async Task<ApiResult<CatalogReadDto?>> CreateAsync(CatalogWriteDto dto)
-    {
-        var response = await _httpClient.PostAsJsonAsync(Endpoint, dto);
-        if (response.IsSuccessStatusCode)
-        {
-            var payload = await response.Content.ReadFromJsonAsync<CatalogReadDto>();
-            return ApiResult<CatalogReadDto?>.Ok(payload);
-        }
-
-        var error = await ReadErrorAsync(response);
-        return ApiResult<CatalogReadDto?>.Fail(error);
-    }
-
-    public async Task<ApiResult<bool>> UpdateAsync(int id, CatalogWriteDto dto)
-    {
-        var response = await _httpClient.PutAsJsonAsync($"{Endpoint}/{id}", dto);
-        if (response.IsSuccessStatusCode)
-        {
-            return ApiResult<bool>.Ok(true);
-        }
-
-        var error = await ReadErrorAsync(response);
-        return ApiResult<bool>.Fail(error);
-    }
-
-    public async Task<ApiResult<bool>> DeleteAsync(int id)
-    {
-        var response = await _httpClient.DeleteAsync($"{Endpoint}/{id}");
-        if (response.IsSuccessStatusCode)
-        {
-            return ApiResult<bool>.Ok(true);
-        }
-
-        var error = await ReadErrorAsync(response);
-        return ApiResult<bool>.Fail(error);
-    }
-
-    private static async Task<string> ReadErrorAsync(HttpResponseMessage response)
-    {
-        string? problemTitle = null;
-        string? problemDetail = null;
-
-        try
-        {
-            var problem = await response.Content.ReadFromJsonAsync<ProblemDetailsDto>();
-            if (problem != null)
-            {
-                problemTitle = problem.Title;
-                problemDetail = problem.Detail ?? problem.Type;
-            }
-        }
-        catch
-        {
-            // ignore parse errors
-        }
-
-        var status = response.StatusCode;
-        var reason = response.ReasonPhrase;
-        var body = await response.Content.ReadAsStringAsync();
-
-        string detail = problemDetail;
-        if (string.IsNullOrWhiteSpace(detail) && !string.IsNullOrWhiteSpace(body))
-        {
-            detail = body;
-        }
-
-        // Friendly overrides
-        if (status == HttpStatusCode.Conflict)
-        {
-            return "Datensatz existiert bereits. Bitte wählen Sie einen anderen Titel.";
-        }
-        if (status == HttpStatusCode.BadRequest && (detail?.Contains("CatTitle cannot be changed", StringComparison.OrdinalIgnoreCase) ?? false))
-        {
-            return "Titel kann nicht geändert werden.";
-        }
-
-        return status switch
-        {
-            HttpStatusCode.BadRequest => $"Eingabe ungültig{FormatSuffix(problemTitle, detail, reason)}",
-            HttpStatusCode.NotFound => $"Nicht gefunden{FormatSuffix(problemTitle, detail, reason)}",
-            HttpStatusCode.Conflict => $"Konflikt{FormatSuffix(problemTitle, detail, reason)}",
-            HttpStatusCode.Unauthorized => $"Nicht autorisiert{FormatSuffix(problemTitle, detail, reason)}",
-            HttpStatusCode.Forbidden => $"Nicht erlaubt{FormatSuffix(problemTitle, detail, reason)}",
-            HttpStatusCode.InternalServerError => $"Serverfehler{FormatSuffix(problemTitle, detail, reason)}",
-            _ => $"Fehler {(int)status} {reason ?? string.Empty}{FormatSuffix(problemTitle, detail, reason)}"
-        };
-    }
-
-    private static string FormatSuffix(string? title, string? detail, string? reason)
-    {
-        var parts = new List<string>();
-        if (!string.IsNullOrWhiteSpace(title)) parts.Add(title);
-        if (!string.IsNullOrWhiteSpace(detail)) parts.Add(detail);
-        if (parts.Count == 0 && !string.IsNullOrWhiteSpace(reason)) parts.Add(reason);
-        if (parts.Count == 0) return string.Empty;
-        return ": " + string.Join(" | ", parts);
-    }
-}
-
-public record ApiResult<T>(bool Success, T? Value, string? Error)
-{
-    public static ApiResult<T> Ok(T? value) => new(true, value, null);
-    public static ApiResult<T> Fail(string? error) => new(false, default, error);
-}
-
-internal sealed class ProblemDetailsDto
-{
-    public string? Type { get; set; }
-    public string? Title { get; set; }
-    public string? Detail { get; set; }
-}
--- a/DbFirst.BlazorWasm/_Imports.razor
+++ b/DbFirst.BlazorWasm/_Imports.razor
@@ -1,12 +0,0 @@
-@using System.Net.Http
-@using System.Net.Http.Json
-@using Microsoft.AspNetCore.Components.Forms
-@using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.AspNetCore.Components.Web
-@using Microsoft.AspNetCore.Components.Web.Virtualization
-@using Microsoft.AspNetCore.Components.WebAssembly.Http
-@using Microsoft.JSInterop
-@using DbFirst.BlazorWasm
-@using DbFirst.BlazorWasm.Layout
-@using DbFirst.BlazorWasm.Models
-@using DbFirst.BlazorWasm.Services
--- a/DbFirst.BlazorWasm/wwwroot/appsettings.json
+++ b/DbFirst.BlazorWasm/wwwroot/appsettings.json
@@ -1,3 +0,0 @@
-{
-  "ApiBaseUrl": "https://localhost:7204/"
-}
--- a/DbFirst.BlazorWasm/wwwroot/css/app.css
+++ b/DbFirst.BlazorWasm/wwwroot/css/app.css
@@ -1,103 +0,0 @@
-html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-h1:focus {
-    outline: none;
-}
-
-a, .btn-link {
-    color: #0071c1;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.content {
-    padding-top: 1.1rem;
-}
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid red;
-}
-
-.validation-message {
-    color: red;
-}
-
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-}
-
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
-
-.loading-progress {
-    position: relative;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    margin: 20vh auto 1rem auto;
-}
-
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-    }
-
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
-
-.loading-progress-text {
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
-}
-
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
-
-code {
-    color: #c02d76;
-}
--- a/DbFirst.BlazorWasm/wwwroot/icon-192.png
+++ b/DbFirst.BlazorWasm/wwwroot/icon-192.png
--- a/DbFirst.BlazorWasm/wwwroot/index.html
+++ b/DbFirst.BlazorWasm/wwwroot/index.html
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<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="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>
-
-<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>
-
-    <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>
-
-</html>
--- a/DbFirst.BlazorWebApp/AppSettings.cs
+++ b/DbFirst.BlazorWebApp/AppSettings.cs
@@ -0,0 +1,6 @@
+namespace DbFirst.BlazorWebApp;
+
+public class AppSettings
+{
+    public string ApiBaseUrl { get; set; } = string.Empty;
+}
--- a/DbFirst.BlazorWebApp/Components/App.razor
+++ b/DbFirst.BlazorWebApp/Components/App.razor
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    @DxResourceManager.RegisterTheme(Themes.Fluent)
+    @DxResourceManager.RegisterScripts()
+
+    <link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
+
+    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="DbFirst.BlazorWebApp.styles.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <script src="js/size-manager.js"></script>
+    <script>
+        window.setDxDarkOverride = function (enabled) {
+            if (enabled)
+                document.documentElement.classList.add('dx-dark');
+            else
+                document.documentElement.classList.remove('dx-dark');
+        };
+    </script>
+    <HeadOutlet />
+</head>
+
+<body>
+    <Routes />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
--- a/DbFirst.BlazorWebApp/Components/BandEditor.razor
+++ b/DbFirst.BlazorWebApp/Components/BandEditor.razor
@@ -0,0 +1,55 @@
+<div class="band-editor">
+    <button class="band-editor-toggle" @onclick="() => IsExpanded = !IsExpanded">
+        <span class="band-editor-toggle-icon @(IsExpanded ? "expanded" : "")">&#9658;</span>
+        <span>Layout</span>
+    </button>
+    @if (IsExpanded)
+    {
+        <div class="band-editor-body">
+            <div class="band-controls">
+                <DxButton Text="Band hinzufügen" Click="OnAddBand" />
+                <DxButton Text="Layout speichern" Click="OnSaveLayout" Enabled="@CanSave" />
+                <DxButton Text="Layout zurücksetzen" Click="OnResetLayout" />
+            </div>
+            @foreach (var band in Bands)
+            {
+                <div class="band-row">
+                    <DxTextBox Text="@band.Caption" TextChanged="@(value => OnBandCaptionChanged.InvokeAsync((band, value)))" />
+                    <DxButton Text="Entfernen" Click="@(() => OnRemoveBand.InvokeAsync(band))" />
+                </div>
+            }
+            <DxFormLayout CssClass="band-columns" ColCount="2">
+                @foreach (var column in Columns)
+                {
+                    <DxFormLayoutItem Caption="@column.Caption">
+                        <DxComboBox Data="@BandOptions"
+                                    TData="BandOption"
+                                    TValue="string"
+                                    TextFieldName="Caption"
+                                    ValueFieldName="Id"
+                                    Value="@GetColumnBand(column.FieldName)"
+                                    ValueChanged="@(value => OnColumnBandChanged.InvokeAsync((column.FieldName, value)))"
+                                    Width="100%" />
+                    </DxFormLayoutItem>
+                }
+            </DxFormLayout>
+        </div>
+    }
+</div>
+
+@code {
+    private bool IsExpanded { get; set; }
+
+    [Parameter, EditorRequired] public List<BandDefinition> Bands { get; set; } = new();
+    [Parameter, EditorRequired] public List<BandOption> BandOptions { get; set; } = new();
+    [Parameter, EditorRequired] public List<ColumnDefinition> Columns { get; set; } = new();
+    [Parameter, EditorRequired] public Func<string, string> GetColumnBand { get; set; } = _ => string.Empty;
+    [Parameter, EditorRequired] public bool CanSave { get; set; }
+
+    [Parameter] public EventCallback OnAddBand { get; set; }
+    [Parameter] public EventCallback OnSaveLayout { get; set; }
+    [Parameter] public EventCallback OnResetLayout { get; set; }
+    [Parameter] public EventCallback<BandDefinition> OnRemoveBand { get; set; }
+    [Parameter] public EventCallback<(BandDefinition Band, string Value)> OnBandCaptionChanged { get; set; }
+    [Parameter] public EventCallback<(string FieldName, string? BandId)> OnColumnBandChanged { get; set; }
+}
--- a/DbFirst.BlazorWebApp/Components/BandGridBase.cs
+++ b/DbFirst.BlazorWebApp/Components/BandGridBase.cs
@@ -0,0 +1,278 @@
+using DbFirst.BlazorWebApp.Models.Grid;
+using DbFirst.BlazorWebApp.Services;
+using DevExpress.Blazor;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace DbFirst.BlazorWebApp.Components;
+
+public abstract class BandGridBase<TItem> : ComponentBase
+{
+    [Inject] protected BandLayoutService BandLayoutService { get; set; } = default!;
+
+    // --- Abstract: jedes Grid definiert diese selbst ---
+    protected abstract string LayoutKey { get; }
+    protected abstract List<ColumnDefinition> ColumnDefinitions { get; }
+
+    // --- Band-Layout Felder ---
+    protected BandLayout bandLayout = new();
+    protected Dictionary<string, string> columnBandAssignments = new();
+    protected List<BandOption> bandOptions = new();
+    protected Dictionary<string, ColumnDefinition> columnLookup = new();
+    protected string? layoutUser;
+    protected bool gridLayoutApplied;
+    protected IGrid? gridRef;
+
+    // --- SizeMode ---
+    protected SizeMode _sizeMode = SizeMode.Medium;
+    protected static readonly List<SizeMode> _sizeModes = Enum.GetValues<SizeMode>().ToList();
+
+    protected string? errorMessage;
+    protected string? infoMessage;
+    protected bool isLoading;
+    protected bool hasLoaded;
+    protected EditContext? editContext;
+    protected ValidationMessageStore? validationMessageStore;
+    protected string popupHeaderText = "Edit";
+    protected int _focusedVisibleIndex;
+
+    private const string LayoutType = "GRID_BANDS";
+
+    // --- Lifecycle ---
+    protected async Task InitializeBandLayoutAsync()
+    {
+        columnLookup = ColumnDefinitions.ToDictionary(c => c.FieldName, StringComparer.OrdinalIgnoreCase);
+        layoutUser = await BandLayoutService.EnsureLayoutUserAsync();
+        bandLayout = await BandLayoutService.LoadBandLayoutAsync(LayoutType, LayoutKey, layoutUser, columnLookup);
+        columnBandAssignments = BandLayoutService.BuildAssignmentsFromLayout(bandLayout);
+        ApplyColumnLayoutFromStorage();
+        _sizeMode = bandLayout.SizeMode;
+        UpdateBandOptions();
+    }
+
+    protected async Task ApplyGridLayoutAfterRenderAsync()
+    {
+        if (!gridLayoutApplied && gridRef != null && bandLayout.GridLayout != null)
+        {
+            gridRef.LoadLayout(bandLayout.GridLayout);
+            gridLayoutApplied = true;
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
+    // --- Layout speichern / zurücksetzen ---
+    protected async Task SaveLayoutAsync()
+    {
+        if (string.IsNullOrWhiteSpace(layoutUser)) return;
+        CaptureColumnLayoutFromGrid();
+        await BandLayoutService.SaveBandLayoutAsync(LayoutType, LayoutKey, layoutUser, bandLayout);
+    }
+
+    protected async Task ResetLayoutAsync()
+    {
+        if (string.IsNullOrWhiteSpace(layoutUser)) return;
+        await BandLayoutService.ResetBandLayoutAsync(LayoutType, LayoutKey, layoutUser);
+        bandLayout = new BandLayout();
+        columnBandAssignments.Clear();
+        UpdateBandOptions();
+        foreach (var column in ColumnDefinitions)
+            column.Width = null;
+        columnLookup = ColumnDefinitions.ToDictionary(c => c.FieldName, StringComparer.OrdinalIgnoreCase);
+        _sizeMode = SizeMode.Medium;
+        gridRef?.LoadLayout(new GridPersistentLayout());
+        gridLayoutApplied = false;
+    }
+
+    private void CaptureColumnLayoutFromGrid()
+    {
+        if (gridRef == null) return;
+        var layout = gridRef.SaveLayout();
+        bandLayout.GridLayout = layout;
+        bandLayout.SizeMode = _sizeMode;
+        var orderedColumns = layout.Columns
+            .Where(c => !string.IsNullOrWhiteSpace(c.FieldName))
+            .OrderBy(c => c.VisibleIndex)
+            .ToList();
+        bandLayout.ColumnOrder = orderedColumns.Select(c => c.FieldName).ToList();
+        bandLayout.ColumnWidths = orderedColumns
+            .Where(c => !string.IsNullOrWhiteSpace(c.Width))
+            .ToDictionary(c => c.FieldName, c => c.Width, StringComparer.OrdinalIgnoreCase);
+    }
+
+    private void ApplyColumnLayoutFromStorage()
+    {
+        foreach (var column in ColumnDefinitions)
+        {
+            if (bandLayout.ColumnWidths.TryGetValue(column.FieldName, out var width) && !string.IsNullOrWhiteSpace(width))
+                column.Width = width;
+        }
+        columnLookup = ColumnDefinitions.ToDictionary(c => c.FieldName, StringComparer.OrdinalIgnoreCase);
+    }
+
+    // --- Band-Methoden ---
+    protected bool CanSaveBandLayout => !string.IsNullOrWhiteSpace(layoutUser);
+
+    protected virtual bool ShowCommandColumn => true;
+
+    protected void AddBand()
+    {
+        bandLayout.Bands.Add(new BandDefinition { Id = Guid.NewGuid().ToString("N"), Caption = "Band" });
+        UpdateBandOptions();
+    }
+
+    protected void RemoveBand(BandDefinition band)
+    {
+        bandLayout.Bands.Remove(band);
+        foreach (var key in columnBandAssignments.Where(p => p.Value == band.Id).Select(p => p.Key).ToList())
+            columnBandAssignments.Remove(key);
+        UpdateBandOptions();
+        SyncBandsFromAssignments();
+    }
+
+    protected void UpdateBandCaption(BandDefinition band, string value)
+    {
+        band.Caption = value;
+        UpdateBandOptions();
+    }
+
+    protected void UpdateColumnBand(string fieldName, string? bandId)
+    {
+        if (string.IsNullOrWhiteSpace(bandId))
+            columnBandAssignments.Remove(fieldName);
+        else
+            columnBandAssignments[fieldName] = bandId;
+        SyncBandsFromAssignments();
+    }
+
+    protected string GetColumnBand(string fieldName)
+        => columnBandAssignments.TryGetValue(fieldName, out var bandId) ? bandId : string.Empty;
+
+    protected void SyncBandsFromAssignments()
+    {
+        foreach (var band in bandLayout.Bands)
+        {
+            band.Columns = ColumnDefinitions
+                .Where(c => columnBandAssignments.TryGetValue(c.FieldName, out var id) && id == band.Id)
+                .Select(c => c.FieldName)
+                .ToList();
+        }
+        _ = InvokeAsync(StateHasChanged);
+    }
+
+    protected void UpdateBandOptions()
+    {
+        bandOptions = [new() { Id = string.Empty, Caption = "Ohne Band" }];
+        bandOptions.AddRange(bandLayout.Bands.Select(b => new BandOption { Id = b.Id, Caption = b.Caption }));
+    }
+
+    // --- SizeMode ---
+    protected string FormatSizeText(SizeMode size) => size switch
+    {
+        SizeMode.Small => "Klein",
+        SizeMode.Medium => "Mittel",
+        SizeMode.Large => "Groß",
+        _ => size.ToString()
+    };
+
+    protected void OnSizeChange(DropDownButtonItemClickEventArgs args)
+    {
+        _sizeMode = Enum.Parse<SizeMode>(args.ItemInfo.Id);
+    }
+
+    // --- RenderColumns / BuildDataColumn ---
+    protected RenderFragment RenderColumns() => builder =>
+    {
+        var seq = 0;
+        if (ShowCommandColumn)
+        {
+            builder.OpenComponent<DxGridCommandColumn>(seq++);
+            builder.AddAttribute(seq++, "Width", "120px");
+            builder.CloseComponent();
+        }
+
+        var grouped = bandLayout.Bands.SelectMany(b => b.Columns).ToHashSet(StringComparer.OrdinalIgnoreCase);
+        foreach (var column in ColumnDefinitions.Where(c => !grouped.Contains(c.FieldName)))
+            BuildDataColumn(builder, ref seq, column);
+
+        foreach (var band in bandLayout.Bands)
+        {
+            if (band.Columns.Count == 0) continue;
+            builder.OpenComponent<DxGridBandColumn>(seq++);
+            builder.AddAttribute(seq++, "Caption", band.Caption);
+            builder.AddAttribute(seq++, "Columns", (RenderFragment)(bandBuilder =>
+            {
+                var bandSeq = 0;
+                foreach (var columnName in band.Columns)
+                {
+                    if (columnLookup.TryGetValue(columnName, out var column))
+                        BuildDataColumn(bandBuilder, ref bandSeq, column);
+                }
+            }));
+            builder.CloseComponent();
+        }
+    };
+
+    protected void BuildDataColumn(RenderTreeBuilder builder, ref int seq, ColumnDefinition column)
+    {
+        builder.OpenComponent<DxGridDataColumn>(seq++);
+        builder.AddAttribute(seq++, "FieldName", column.FieldName);
+        builder.AddAttribute(seq++, "Caption", column.Caption);
+        if (!string.IsNullOrWhiteSpace(column.Width))
+            builder.AddAttribute(seq++, "Width", column.Width);
+        if (!string.IsNullOrWhiteSpace(column.DisplayFormat))
+            builder.AddAttribute(seq++, "DisplayFormat", column.DisplayFormat);
+        if (column.ReadOnly)
+            builder.AddAttribute(seq++, "ReadOnly", true);
+        builder.CloseComponent();
+    }
+
+    protected void SetEditContext(EditContext context)
+    {
+        if (editContext == context) return;
+        if (editContext != null)
+            editContext.OnFieldChanged -= OnEditFieldChanged;
+        editContext = context;
+        validationMessageStore = new ValidationMessageStore(editContext);
+        editContext.OnFieldChanged += OnEditFieldChanged;
+    }
+
+    protected virtual void OnEditFieldChanged(object? sender, FieldChangedEventArgs e)
+    {
+        validationMessageStore?.Clear();
+        editContext?.NotifyValidationStateChanged();
+    }
+
+    protected void SetPopupHeaderText(bool isNew) => popupHeaderText = isNew ? "Neu" : "Edit";
+
+    protected async Task EditFocusedRow()
+        => await gridRef!.StartEditRowAsync(_focusedVisibleIndex);
+
+    protected Task DeleteFocusedRow()
+    {
+        gridRef!.ShowRowDeleteConfirmation(_focusedVisibleIndex);
+        return Task.CompletedTask;
+    }
+
+    protected async Task SaveLayoutWithFeedbackAsync()
+    {
+        try
+        {
+            await SaveLayoutAsync();
+            infoMessage = "Layout gespeichert.";
+            errorMessage = null;
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Layout konnte nicht gespeichert werden: {ex.Message}";
+        }
+    }
+
+    protected async Task ResetLayoutWithFeedbackAsync()
+    {
+        await ResetLayoutAsync();
+        infoMessage = "Layout zurückgesetzt.";
+        errorMessage = null;
+    }
+
+}
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
@@ -0,0 +1,362 @@
+@inherits BandGridBase<CatalogReadDto>
+@inject ICatalogApiClient Api
+
+@if (!string.IsNullOrWhiteSpace(errorMessage))
+{
+    <div class="alert alert-danger" role="alert">@errorMessage</div>
+}
+else if (!string.IsNullOrWhiteSpace(infoMessage))
+{
+    <div class="alert alert-success" role="alert">@infoMessage</div>
+}
+
+@if (!hasLoaded || isLoading)
+{
+    <div class="loading-container">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Lade...</span>
+        </div>
+    </div>
+}
+else if (items.Count == 0)
+{
+    <p>Keine Einträge vorhanden.</p>
+}
+else
+{
+    <BandEditor Bands="@bandLayout.Bands"
+                BandOptions="@bandOptions"
+                Columns="@ColumnDefinitions"
+                GetColumnBand="GetColumnBand"
+                CanSave="@CanSaveBandLayout"
+                OnAddBand="AddBand"
+                OnSaveLayout="SaveLayoutWithFeedbackAsync"
+                OnResetLayout="ResetLayoutWithFeedbackAsync"
+                OnRemoveBand="RemoveBand"
+                OnBandCaptionChanged="@(args => UpdateBandCaption(args.Band, args.Value))"
+                OnColumnBandChanged="@(args => UpdateColumnBand(args.FieldName, args.BandId))" />
+
+    <div class="grid-section">
+        <DxGrid Data="@items"
+                ColumnChooserButtonDisplayMode="GridColumnChooserButtonDisplayMode.Always"
+                TItem="CatalogReadDto"
+                KeyFieldName="@nameof(CatalogReadDto.Guid)"
+                SizeMode="@_sizeMode"
+                ShowGroupPanel="true"
+                ShowGroupedColumns="true"
+                AllowGroup="true"
+                FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
+                AllowColumnResize="true"
+                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+                AllowColumnReorder="true"
+                PageSize="10"
+                CssClass="mb-4 catalog-grid"
+                EditMode="GridEditMode.PopupEditForm"
+                PopupEditFormCssClass="catalog-edit-popup"
+                PopupEditFormHeaderText="@popupHeaderText"
+                CustomizeEditModel="OnCustomizeEditModel"
+                EditModelSaving="OnEditModelSaving"
+                DataItemDeleting="OnDataItemDeleting"
+                FocusedRowEnabled="true"
+                @bind-FocusedRowKey="focusedRowKey"
+                RowClick="@(args => _focusedVisibleIndex = args.VisibleIndex)"
+                @ref="gridRef">
+            <ToolbarTemplate>
+                <DxToolbar>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-plus-lg"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="@(() => gridRef!.StartEditNewRowAsync())" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-pencil"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="EditFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-trash"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="DeleteFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
+                        <Template Context="_">
+                            <DxButton Text="Spalten"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="@(() => gridRef!.ShowColumnChooser())" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
+                        <Template Context="_">
+                            <DxDropDownButton Text="@FormatSizeText(_sizeMode)"
+                                              RenderStyle="ButtonRenderStyle.Secondary"
+                                              RenderStyleMode="ButtonRenderStyleMode.Text"
+                                              ItemClick="OnSizeChange">
+                                <Items>
+                                    @foreach (var size in _sizeModes)
+                                    {
+                                        <DxDropDownButtonItem Text="@FormatSizeText(size)" Id="@size.ToString()" />
+                                    }
+                                </Items>
+                            </DxDropDownButton>
+                        </Template>
+                    </DxToolbarItem>
+                </DxToolbar>
+            </ToolbarTemplate>
+            <Columns>
+                @RenderColumns()
+            </Columns>
+            <EditFormTemplate Context="editFormContext">
+                @{
+                    SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; SetPopupHeaderText(editModel.IsNew);
+                }
+                <DxFormLayout ColCount="2">
+                    <DxFormLayoutItem Caption="Titel">
+                        <DxTextBox @bind-Text="editModel.CatTitle" Width="100%" />
+                    </DxFormLayoutItem>
+                    <DxFormLayoutItem Caption="Kennung">
+                        <DxTextBox @bind-Text="editModel.CatString" Width="100%" />
+                    </DxFormLayoutItem>
+                    @if (!editModel.IsNew)
+                    {
+                        <DxFormLayoutItem Caption="Update-Prozedur">
+                            <DxComboBox Data="@procedureOptions"
+                                        TData="ProcedureOption"
+                                        TValue="int"
+                                        TextFieldName="Text"
+                                        ValueFieldName="Value"
+                                        @bind-Value="editModel.UpdateProcedure"
+                                        Width="100%" />
+                        </DxFormLayoutItem>
+                    }
+                    <DxFormLayoutItem ColSpanMd="12">
+                        <ValidationSummary />
+                    </DxFormLayoutItem>
+                </DxFormLayout>
+            </EditFormTemplate>
+        </DxGrid>
+    </div>
+}
+
+@code {
+    private List<CatalogReadDto> items = new();
+    private int? focusedRowKey;
+
+    protected override string LayoutKey => "CatalogsGrid";
+    protected override bool ShowCommandColumn => false;
+
+    protected override List<ColumnDefinition> ColumnDefinitions { get; } = new()
+{
+    new() { FieldName = nameof(CatalogReadDto.Guid),       Caption = "Id",          Width = "140px", FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(CatalogReadDto.CatTitle),   Caption = "Titel",                        FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(CatalogReadDto.CatString),  Caption = "String",                       FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(CatalogReadDto.AddedWho),   Caption = "Angelegt von", ReadOnly = true, FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(CatalogReadDto.AddedWhen),  Caption = "Angelegt am",  ReadOnly = true, FilterType = ColumnFilterType.Date },
+    new() { FieldName = nameof(CatalogReadDto.ChangedWho), Caption = "Geändert von", ReadOnly = true, FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(CatalogReadDto.ChangedWhen),Caption = "Geändert am",  ReadOnly = true, FilterType = ColumnFilterType.Date }
+};
+
+    private readonly List<ProcedureOption> procedureOptions = new()
+    {
+        new() { Value = 0, Text = "PRTBMY_CATALOG_UPDATE" },
+        new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await InitializeBandLayoutAsync();
+        await LoadCatalogs();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await ApplyGridLayoutAfterRenderAsync();
+    }
+
+    private async Task LoadCatalogs()
+    {
+        isLoading = true;
+        errorMessage = null;
+        try
+        {
+            items = await Api.GetAllAsync();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Kataloge konnten nicht geladen werden: {ex.Message}";
+        }
+        finally
+        {
+            isLoading = false;
+            hasLoaded = true;
+            StateHasChanged();
+        }
+    }
+
+    protected override void OnEditFieldChanged(object? sender, FieldChangedEventArgs e)
+    {
+        if (validationMessageStore == null || editContext == null) return;
+
+        if (e.FieldIdentifier.FieldName == nameof(CatalogEditModel.UpdateProcedure))
+        {
+            validationMessageStore.Clear();
+            editContext.NotifyValidationStateChanged();
+            return;
+        }
+
+        if (e.FieldIdentifier.FieldName == nameof(CatalogEditModel.CatTitle))
+        {
+            validationMessageStore.Clear(new FieldIdentifier(editContext.Model, nameof(CatalogEditModel.CatTitle)));
+            editContext.NotifyValidationStateChanged();
+        }
+    }
+
+    private void OnCustomizeEditModel(GridCustomizeEditModelEventArgs e)
+    {
+        popupHeaderText = e.IsNew ? "Neu" : "Edit";
+        if (e.IsNew)
+        {
+            e.EditModel = new CatalogEditModel { IsNew = true };
+            return;
+        }
+
+        var item = (CatalogReadDto)e.DataItem;
+        e.EditModel = new CatalogEditModel
+        {
+            Guid = item.Guid,
+            CatTitle = item.CatTitle,
+            CatString = item.CatString,
+            UpdateProcedure = 0,
+            OriginalCatTitle = item.CatTitle,
+            IsNew = false
+        };
+    }
+
+    private async Task OnEditModelSaving(GridEditModelSavingEventArgs e)
+    {
+        errorMessage = null;
+        infoMessage = null;
+        validationMessageStore?.Clear();
+        editContext?.NotifyValidationStateChanged();
+
+        var editModel = (CatalogEditModel)e.EditModel;
+        if (!ValidateEditModel(editModel, e.IsNew))
+        {
+            e.Cancel = true;
+            return;
+        }
+
+        var dto = new CatalogWriteDto
+        {
+            CatTitle = editModel.CatTitle,
+            CatString = editModel.CatString,
+            UpdateProcedure = (CatalogUpdateProcedure)editModel.UpdateProcedure
+        };
+
+        try
+        {
+            if (e.IsNew)
+            {
+                var created = await Api.CreateAsync(dto);
+                if (!created.Success || created.Value == null)
+                {
+                    if (!string.IsNullOrWhiteSpace(created.Error))
+                        AddValidationError(editModel, nameof(CatalogEditModel.CatTitle), created.Error);
+                    else
+                        errorMessage = "Anlegen fehlgeschlagen.";
+                    e.Cancel = true;
+                    return;
+                }
+                infoMessage = "Katalog angelegt.";
+                focusedRowKey = created.Value.Guid;
+            }
+            else
+            {
+                var updated = await Api.UpdateAsync(editModel.Guid, dto);
+                if (!updated.Success)
+                {
+                    errorMessage = updated.Error ?? "Aktualisierung fehlgeschlagen.";
+                    e.Cancel = true;
+                    return;
+                }
+                infoMessage = "Katalog aktualisiert.";
+                focusedRowKey = editModel.Guid;
+            }
+
+            await LoadCatalogs();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Fehler beim Speichern: {ex.Message}";
+            e.Cancel = true;
+        }
+    }
+
+    private void AddValidationError(CatalogEditModel editModel, string fieldName, string message)
+    {
+        if (editContext == null || validationMessageStore == null) return;
+        validationMessageStore.Add(new FieldIdentifier(editModel, fieldName), message);
+        editContext.NotifyValidationStateChanged();
+    }
+
+    private bool ValidateEditModel(CatalogEditModel editModel, bool isNew)
+    {
+        if (isNew) return true;
+        if (editModel.UpdateProcedure == 0 &&
+            !string.Equals(editModel.CatTitle, editModel.OriginalCatTitle, StringComparison.OrdinalIgnoreCase))
+        {
+            AddValidationError(editModel, nameof(CatalogEditModel.CatTitle), "Titel kann nicht geändert werden.");
+            return false;
+        }
+        return true;
+    }
+
+    private async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e)
+    {
+        errorMessage = null;
+        infoMessage = null;
+        var item = (CatalogReadDto)e.DataItem;
+        try
+        {
+            var deleted = await Api.DeleteAsync(item.Guid);
+            if (!deleted.Success)
+            {
+                errorMessage = deleted.Error ?? "Löschen fehlgeschlagen.";
+                e.Cancel = true;
+                return;
+            }
+            infoMessage = "Katalog gelöscht.";
+            await LoadCatalogs();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Fehler beim Löschen: {ex.Message}";
+            e.Cancel = true;
+        }
+    }
+
+    private sealed class CatalogEditModel
+    {
+        public int Guid { get; set; }
+        public string CatTitle { get; set; } = string.Empty;
+        public string CatString { get; set; } = string.Empty;
+        public int UpdateProcedure { get; set; }
+        public string OriginalCatTitle { get; set; } = string.Empty;
+        public bool IsNew { get; set; }
+    }
+
+    private sealed class ProcedureOption
+    {
+        public int Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor.css
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor.css
@@ -0,0 +1,3 @@
+.catalog-edit-popup {
+    min-width: 720px;
+}
--- a/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor
+++ b/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor
@@ -0,0 +1,85 @@
+@inherits LayoutComponentBase
+@implements IDisposable
+@inject ThemeState ThemeState
+@inject IJSRuntime JS
+
+<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light") @(ThemeState.IsNativeDarkTheme ? "native-dark" : "")">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <DxComboBox Data="@ThemeState.AvailableThemes"
+                        Value="@ThemeState.CurrentThemeName"
+                        ValueChanged="@((string t) => ThemeState.SetTheme(t))"
+                        style="width: 130px;" />
+            <span style="margin-left: 12px;">
+                <DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")"
+                          Click="ToggleTheme" />
+            </span>
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
+
+@code {
+    private bool _isInteractive;
+
+    protected override void OnInitialized()
+    {
+        ThemeState.OnChange += OnThemeChanged;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _isInteractive = true;
+        }
+        await ApplyDxDarkOverrideAsync();
+    }
+
+    private async void OnThemeChanged()
+    {
+        StateHasChanged();
+        if (_isInteractive)
+        {
+            await ApplyDxDarkOverrideAsync();
+        }
+    }
+
+    private async Task ApplyDxDarkOverrideAsync()
+    {
+        if (!_isInteractive) return;
+        try
+        {
+            bool needsOverride = ThemeState.IsDarkMode && !ThemeState.IsNativeDarkTheme;
+            await JS.InvokeVoidAsync("setDxDarkOverride", needsOverride);
+        }
+        catch (JSException)
+        {
+            // JS-Funktion noch nicht verfügbar – kein Circuit-Crash
+        }
+    }
+
+    private void ToggleTheme()
+    {
+        ThemeState.SetDarkMode(!ThemeState.IsDarkMode);
+    }
+
+    public void Dispose()
+    {
+        ThemeState.OnChange -= OnThemeChanged;
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css
+++ b/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css
@@ -4,12 +4,27 @@
    flex-direction: column;
 }

+.page.app-dark {
+    background-color: #1b1b1b;
+    color: #f1f1f1;
+}
+
 main {
    flex: 1;
 }

+.page.app-dark main {
+    background-color: #1b1b1b;
+}
+
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-color: var(--dx-color-surface-container, #f4f4f4);
+    border-right: 1px solid var(--dx-color-outline-variant, #e0e0e0);
+}
+
+.page.app-dark .sidebar {
+    background-color: var(--dx-color-surface-container, #1e1e1e);
+    border-right-color: var(--dx-color-outline-variant, #333);
 }

 .top-row {
@@ -21,6 +36,11 @@ main {
    align-items: center;
 }

+.page.app-dark .top-row {
+    background-color: #222;
+    border-bottom-color: #3d3d3d;
+}
+
    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
@@ -75,3 +95,22 @@ main {
        padding-right: 1.5rem !important;
    }
 }
+
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }
--- a/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
@@ -0,0 +1,24 @@
+<div class="nav-brand-row">
+    <a class="nav-brand-link" href="">DbFirst</a>
+    <button class="nav-toggle-btn" @onclick="ToggleMenu" title="Navigation menu">&#9776;</button>
+</div>
+
+<div class="nav-scrollable @(menuOpen ? "nav-open" : "")">
+    <DxTreeView CssClass="sidebar-tree">
+        <Nodes>
+            <DxTreeViewNode Text="Home" NavigateUrl="/" IconCssClass="dxi dxi-home" />
+            <DxTreeViewNode Text="Data Management" Expanded="true">
+                <Nodes>
+                    <DxTreeViewNode Text="Catalogs" NavigateUrl="/catalogs" IconCssClass="dxi dxi-folder" />
+                    <DxTreeViewNode Text="Dashboards" NavigateUrl="/dashboards" IconCssClass="dxi dxi-chart-bar" />
+                    <DxTreeViewNode Text="Mass Data" NavigateUrl="/massdata" IconCssClass="dxi dxi-table" />
+                </Nodes>
+            </DxTreeViewNode>
+        </Nodes>
+    </DxTreeView>
+</div>
+
+@code {
+    private bool menuOpen = false;
+    private void ToggleMenu() => menuOpen = !menuOpen;
+}
--- a/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor.css
+++ b/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor.css
@@ -0,0 +1,52 @@
+.nav-brand-row {
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.nav-brand-link {
+    font-size: 1.05rem;
+    font-weight: 600;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.nav-toggle-btn {
+    display: block;
+    background: none;
+    border: none;
+    font-size: 1.4rem;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    line-height: 1;
+}
+
+.nav-scrollable {
+    display: none;
+}
+
+    .nav-scrollable.nav-open {
+        display: block;
+    }
+
+.sidebar-tree {
+    width: 100%;
+}
+
+@media (min-width: 641px) {
+    .nav-toggle-btn {
+        display: none;
+    }
+
+    .nav-scrollable {
+        display: block;
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}
+
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
@@ -0,0 +1,375 @@
+@inherits BandGridBase<MassDataReadDto>
+@inject IMassDataApiClient Api
+
+@if (!string.IsNullOrWhiteSpace(errorMessage))
+{
+    <div class="alert alert-danger" role="alert">@errorMessage</div>
+}
+else if (!string.IsNullOrWhiteSpace(infoMessage))
+{
+    <div class="alert alert-success" role="alert">@infoMessage</div>
+}
+
+@if (!hasLoaded || isLoading)
+{
+    <div class="loading-container">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Lade...</span>
+        </div>
+    </div>
+}
+else if (items.Count == 0)
+{
+    <p>Keine Einträge vorhanden.</p>
+}
+else
+{
+    
+    <BandEditor Bands="@bandLayout.Bands"
+                BandOptions="@bandOptions"
+                Columns="@ColumnDefinitions"
+                GetColumnBand="GetColumnBand"
+                CanSave="@CanSaveBandLayout"
+                OnAddBand="AddBand"
+                OnSaveLayout="SaveLayoutWithFeedbackAsync"
+                OnResetLayout="ResetLayoutWithFeedbackAsync"
+                OnRemoveBand="RemoveBand"
+                OnBandCaptionChanged="@(args => UpdateBandCaption(args.Band, args.Value))"
+                OnColumnBandChanged="@(args => UpdateColumnBand(args.FieldName, args.BandId))" />
+
+    <div class="mb-3 page-size-selector">
+        <span class="page-size-label">Datensätze je Seite:</span>
+        <DxComboBox Data="@pageSizeOptions"
+                    TData="PageSizeOption"
+                    TValue="int?"
+                    TextFieldName="Text"
+                    ValueFieldName="Value"
+                    Value="@pageSize"
+                    ValueChanged="OnPageSizeChanged"
+                    CssClass="page-size-combo" />
+    </div>
+
+    <div class="grid-section">
+        <DxGrid Data="@items"
+                ColumnChooserButtonDisplayMode="GridColumnChooserButtonDisplayMode.Always"
+                TItem="MassDataReadDto"
+                KeyFieldName="@nameof(MassDataReadDto.Id)"
+                SizeMode="@_sizeMode"
+                ShowGroupPanel="true"
+                ShowGroupedColumns="true"
+                AllowGroup="true"
+                FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
+                AllowColumnResize="true"
+                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+                AllowColumnReorder="true"
+                PagerVisible="false"
+                PageSize="@(pageSize ?? 100)"
+                CssClass="mb-3 massdata-grid"
+                EditMode="GridEditMode.PopupEditForm"
+                PopupEditFormHeaderText="@popupHeaderText"
+                CustomizeEditModel="OnCustomizeEditModel"
+                EditModelSaving="OnEditModelSaving"
+                DataItemDeleting="OnDataItemDeleting"
+                FocusedRowEnabled="true"
+                @bind-FocusedRowKey="focusedRowKey"
+                RowClick="@(args => _focusedVisibleIndex = args.VisibleIndex)"
+                @ref="gridRef">
+            <ToolbarTemplate>
+                <DxToolbar>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-plus-lg"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="@(() => gridRef!.StartEditNewRowAsync())" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-pencil"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="EditFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Left">
+                        <Template Context="_">
+                            <DxButton IconCssClass="bi bi-trash"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="DeleteFocusedRow" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
+                        <Template Context="_">
+                            <DxButton Text="Spalten"
+                                      RenderStyle="ButtonRenderStyle.Secondary"
+                                      RenderStyleMode="ButtonRenderStyleMode.Text"
+                                      Click="@(() => gridRef!.ShowColumnChooser())" />
+                        </Template>
+                    </DxToolbarItem>
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
+                        <Template Context="_">
+                            <DxDropDownButton Text="@FormatSizeText(_sizeMode)"
+                                              RenderStyle="ButtonRenderStyle.Secondary"
+                                              RenderStyleMode="ButtonRenderStyleMode.Text"
+                                              ItemClick="OnSizeChange">
+                                <Items>
+                                    @foreach (var size in _sizeModes)
+                                    {
+                                        <DxDropDownButtonItem Text="@FormatSizeText(size)" Id="@size.ToString()" />
+                                    }
+                                </Items>
+                            </DxDropDownButton>
+                        </Template>
+                    </DxToolbarItem>
+                </DxToolbar>
+            </ToolbarTemplate>
+            <Columns>
+                @RenderColumns()
+            </Columns>
+            <EditFormTemplate Context="editFormContext">
+                @{
+                    SetEditContext(editFormContext.EditContext); var editModel = (MassDataEditModel)editFormContext.EditModel; SetPopupHeaderText(editModel.IsNew);
+                }
+                <DxFormLayout ColCount="2">
+                    <DxFormLayoutItem Caption="CustomerName">
+                        <DxTextBox @bind-Text="editModel.CustomerName" Width="100%" />
+                    </DxFormLayoutItem>
+                    <DxFormLayoutItem Caption="Amount">
+                        <DxTextBox @bind-Text="editModel.AmountText" Width="100%" />
+                    </DxFormLayoutItem>
+                    <DxFormLayoutItem Caption="Category">
+                        <DxTextBox @bind-Text="editModel.Category" Width="100%" ReadOnly="@(!editModel.IsNew)" />
+                    </DxFormLayoutItem>
+                    <DxFormLayoutItem Caption="Status">
+                        <DxCheckBox @bind-Checked="editModel.StatusFlag" ReadOnly="@(!editModel.IsNew)" />
+                    </DxFormLayoutItem>
+                    @if (!editModel.IsNew)
+                    {
+                        <DxFormLayoutItem Caption="Prozedur">
+                            <DxComboBox Data="@procedureOptions"
+                                        TData="ProcedureOption"
+                                        TValue="int"
+                                        TextFieldName="Text"
+                                        ValueFieldName="Value"
+                                        @bind-Value="editModel.UpdateProcedure"
+                                        Width="100%" />
+                        </DxFormLayoutItem>
+                    }
+                    <DxFormLayoutItem ColSpanMd="12">
+                        <ValidationSummary />
+                    </DxFormLayoutItem>
+                </DxFormLayout>
+            </EditFormTemplate>
+        </DxGrid>
+
+        @if (pageCount > 1)
+        {
+            <div class="pager-container">
+                <DxPager PageCount="@pageCount" ActivePageIndex="@pageIndex" ActivePageIndexChanged="OnPageChanged" />
+            </div>
+        }
+    </div>
+}
+
+@code {
+    private List<MassDataReadDto> items = new();
+    private int pageIndex;
+    private int pageCount = 1;
+    private int? pageSize = 100;
+    private int? focusedRowKey;
+
+    protected override string LayoutKey => "MassDataGrid";
+    protected override bool ShowCommandColumn => false;
+
+    protected override List<ColumnDefinition> ColumnDefinitions { get; } = new()
+{
+    new() { FieldName = nameof(MassDataReadDto.Id),           Caption = "Id",           Width = "90px", ReadOnly = true, FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(MassDataReadDto.CustomerName), Caption = "CustomerName",                 FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(MassDataReadDto.Amount),       Caption = "Amount",       DisplayFormat = "c2", FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(MassDataReadDto.Category),     Caption = "Category",     ReadOnly = true, FilterType = ColumnFilterType.Text },
+    new() { FieldName = nameof(MassDataReadDto.StatusFlag),   Caption = "Status",       ReadOnly = true, FilterType = ColumnFilterType.Bool },
+    new() { FieldName = nameof(MassDataReadDto.AddedWhen),    Caption = "Added",        ReadOnly = true, FilterType = ColumnFilterType.Date },
+    new() { FieldName = nameof(MassDataReadDto.ChangedWhen),  Caption = "Changed",      ReadOnly = true, FilterType = ColumnFilterType.Date }
+};
+
+    private readonly List<PageSizeOption> pageSizeOptions = new()
+    {
+        new() { Value = 100,    Text = "100" },
+        new() { Value = 1000,   Text = "1.000" },
+        new() { Value = 10000,  Text = "10.000" },
+        new() { Value = 100000, Text = "100.000" },
+        new() { Value = null,   Text = "Alle" }
+    };
+
+    private readonly List<ProcedureOption> procedureOptions = new()
+    {
+        new() { Value = 0, Text = "PRMassdata_UpsertByCustomerName" }
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await InitializeBandLayoutAsync();
+        await LoadPage(0);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await ApplyGridLayoutAfterRenderAsync();
+    }
+
+    private async Task LoadPage(int page)
+    {
+        isLoading = true;
+        errorMessage = null;
+        try
+        {
+            var total = await Api.GetCountAsync();
+            var effectivePageSize = pageSize ?? (total == 0 ? 1 : total);
+            pageCount = Math.Max(1, (int)Math.Ceiling(total / (double)effectivePageSize));
+            pageIndex = Math.Clamp(page, 0, pageCount - 1);
+            var skip = pageSize.HasValue ? pageIndex * pageSize.Value : 0;
+            items = await Api.GetAllAsync(skip, pageSize);
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"MassData konnten nicht geladen werden: {ex.Message}";
+        }
+        finally
+        {
+            isLoading = false;
+            hasLoaded = true;
+            StateHasChanged();
+        }
+    }
+
+    private async Task OnPageChanged(int index) => await LoadPage(index);
+
+    private async Task OnPageSizeChanged(int? size)
+    {
+        pageSize = size;
+        await LoadPage(0);
+    }
+
+    protected override void OnEditFieldChanged(object? sender, FieldChangedEventArgs e)
+    {
+        if (validationMessageStore == null || editContext == null) return;
+        if (e.FieldIdentifier.FieldName == nameof(MassDataEditModel.UpdateProcedure))
+        {
+            validationMessageStore.Clear();
+            editContext.NotifyValidationStateChanged();
+            return;
+        }
+        if (e.FieldIdentifier.FieldName == nameof(MassDataEditModel.CustomerName))
+        {
+            validationMessageStore.Clear(new FieldIdentifier(editContext.Model, nameof(MassDataEditModel.CustomerName)));
+            editContext.NotifyValidationStateChanged();
+        }
+    }
+
+    private void OnCustomizeEditModel(GridCustomizeEditModelEventArgs e)
+    {
+        if (e.IsNew)
+        {
+            e.EditModel = new MassDataEditModel { IsNew = true, UpdateProcedure = procedureOptions[0].Value };
+            SetPopupHeaderText(true);
+            return;
+        }
+        var item = (MassDataReadDto)e.DataItem;
+        e.EditModel = new MassDataEditModel
+        {
+            Id = item.Id,
+            CustomerName = item.CustomerName,
+            AmountText = item.Amount.ToString("0.00"),
+            Category = item.Category,
+            StatusFlag = item.StatusFlag,
+            UpdateProcedure = procedureOptions[0].Value,
+            IsNew = false,
+            OriginalCustomerName = item.CustomerName
+        };
+        SetPopupHeaderText(false);
+    }
+
+    private async Task OnEditModelSaving(GridEditModelSavingEventArgs e)
+    {
+        errorMessage = null;
+        infoMessage = null;
+        validationMessageStore?.Clear();
+        editContext?.NotifyValidationStateChanged();
+        var editModel = (MassDataEditModel)e.EditModel;
+        if (!decimal.TryParse(editModel.AmountText, out var amount))
+        {
+            AddValidationError(editModel, nameof(MassDataEditModel.AmountText), "Amount ist ungültig.");
+            e.Cancel = true;
+            return;
+        }
+        if (editModel.IsNew)
+        {
+            var existing = await Api.GetByCustomerNameAsync(editModel.CustomerName);
+            if (existing != null)
+            {
+                AddValidationError(editModel, nameof(MassDataEditModel.CustomerName), "Kunde existiert bereits.");
+                e.Cancel = true;
+                return;
+            }
+        }
+        var dto = new MassDataWriteDto
+        {
+            CustomerName = editModel.CustomerName,
+            Amount = amount,
+            Category = editModel.Category,
+            StatusFlag = editModel.StatusFlag
+        };
+
+        var result = await Api.UpsertAsync(dto);
+        if (!result.Success)
+        {
+            errorMessage = result.Error ?? "Speichern fehlgeschlagen.";
+            e.Cancel = true;
+            return;
+        }
+        infoMessage = editModel.IsNew ? "MassData angelegt." : "MassData aktualisiert.";
+        focusedRowKey = result.Value?.Id;
+        await LoadPage(pageIndex);
+    }
+
+    private void AddValidationError(MassDataEditModel editModel, string fieldName, string message)
+    {
+        if (editContext == null || validationMessageStore == null) return;
+        validationMessageStore.Add(new FieldIdentifier(editModel, fieldName), message);
+        editContext.NotifyValidationStateChanged();
+    }
+
+    private Task OnDataItemDeleting(GridDataItemDeletingEventArgs e)
+    {
+        errorMessage = null;
+        infoMessage = "Löschen ist aktuell noch nicht verfügbar.";
+        e.Cancel = true;
+        return Task.CompletedTask;
+    }
+
+    private sealed class MassDataEditModel
+    {
+        public int Id { get; set; }
+        public string CustomerName { get; set; } = string.Empty;
+        public string AmountText { get; set; } = string.Empty;
+        public string Category { get; set; } = string.Empty;
+        public bool StatusFlag { get; set; }
+        public int UpdateProcedure { get; set; }
+        public bool IsNew { get; set; }
+        public string OriginalCustomerName { get; set; } = string.Empty;
+    }
+
+    private sealed class ProcedureOption
+    {
+        public int Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
+
+    private sealed class PageSizeOption
+    {
+        public int? Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor.css
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor.css
@@ -0,0 +1,3 @@
+.massdata-edit-popup {
+    min-width: 720px;
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Catalogs.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Catalogs.razor
@@ -0,0 +1,7 @@
+@page "/catalogs"
+
+<PageTitle>Catalogs</PageTitle>
+
+<h1>Catalogs</h1>
+
+<CatalogsGrid />
--- a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
@@ -0,0 +1,123 @@
+@page "/dashboard"
+@page "/dashboards/{DashboardId?}"
+@implements IAsyncDisposable
+@inject IOptions<AppSettings> AppSettingsOptions
+@inject NavigationManager Navigation
+@inject IDashboardApiClient DashboardApi
+
+<PageTitle>Dashboards</PageTitle>
+
+<div class="dashboard-shell">
+    <aside class="dashboard-nav">
+        <div class="dashboard-nav-title">Dashboards</div>
+        @if (dashboards.Count == 0)
+        {
+            <div class="px-3 py-2 text-muted">Keine Dashboards vorhanden.</div>
+        }
+        else
+        {
+            @foreach (var dashboard in dashboards)
+            {
+                <NavLink class="dashboard-nav-link" href="@($"dashboards/{dashboard.Id}?mode={(IsDesigner ? "designer" : "viewer")}")">@dashboard.Name</NavLink>
+            }
+        }
+    </aside>
+    <section class="dashboard-content">
+        <div class="mb-3">
+            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
+                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
+            </DxButton>
+        </div>
+        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="@SelectedDashboardId" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
+        </DxDashboard>
+    </section>
+</div>
+
+@code {
+    [Parameter] public string? DashboardId { get; set; }
+    [SupplyParameterFromQuery] public string? Mode { get; set; }
+
+    private readonly List<DashboardInfoDto> dashboards = new();
+    private HubConnection? _hubConnection;
+
+    private bool IsDesigner => !string.Equals(Mode, "viewer", StringComparison.OrdinalIgnoreCase);
+    private WorkingMode CurrentMode => IsDesigner ? WorkingMode.Designer : WorkingMode.ViewerOnly;
+    private string SelectedDashboardId { get; set; } = string.Empty;
+    private string DashboardKey => $"{SelectedDashboardId}-{(IsDesigner ? "designer" : "viewer")}";
+
+    private string DashboardEndpoint => $"{AppSettingsOptions.Value.ApiBaseUrl.TrimEnd('/')}/api/dashboard";
+    private string HubEndpoint => $"{AppSettingsOptions.Value.ApiBaseUrl.TrimEnd('/')}/hubs/dashboards";
+
+    protected override async Task OnInitializedAsync()
+    {
+        await RefreshDashboards();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender) return;
+
+        _hubConnection = new HubConnectionBuilder()
+            .WithUrl(HubEndpoint)
+            .WithAutomaticReconnect()
+            .Build();
+
+        _hubConnection.On("DashboardsChanged", async () =>
+        {
+            await RefreshDashboards();
+        });
+
+        await _hubConnection.StartAsync();
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        var requestedId = string.IsNullOrWhiteSpace(DashboardId) || string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase)
+            ? null
+            : DashboardId;
+
+        var resolved = !string.IsNullOrWhiteSpace(requestedId)
+            ? dashboards.FirstOrDefault(d => string.Equals(d.Id, requestedId, StringComparison.OrdinalIgnoreCase))
+            : dashboards.FirstOrDefault(d => string.Equals(d.Id, "DefaultDashboard", StringComparison.OrdinalIgnoreCase))
+              ?? dashboards.FirstOrDefault();
+
+        if (resolved == null)
+        {
+            return;
+        }
+
+        SelectedDashboardId = resolved.Id;
+
+        if (!string.Equals(DashboardId, resolved.Id, StringComparison.OrdinalIgnoreCase))
+        {
+            Navigation.NavigateTo($"dashboards/{resolved.Id}?mode={(IsDesigner ? "designer" : "viewer")}", replace: true);
+        }
+    }
+
+    private void ToggleMode()
+    {
+        var targetMode = IsDesigner ? "viewer" : "designer";
+        Navigation.NavigateTo($"dashboards/{SelectedDashboardId}?mode={targetMode}", replace: true);
+    }
+
+    private async Task RefreshDashboards()
+    {
+        var latest = await DashboardApi.GetAllAsync();
+        if (latest.Count == dashboards.Count && latest.All(d => dashboards.Any(x => x.Id == d.Id && x.Name == d.Name)))
+        {
+            return;
+        }
+
+        dashboards.Clear();
+        dashboards.AddRange(latest);
+        await InvokeAsync(StateHasChanged);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_hubConnection != null)
+        {
+            await _hubConnection.DisposeAsync();
+        }
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor.css
+++ b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor.css
@@ -0,0 +1,42 @@
+.dashboard-shell {
+    display: flex;
+    gap: 0;
+    min-height: 800px;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #fff;
+}
+
+.dashboard-nav {
+    width: 220px;
+    border-right: 1px solid #e6e6e6;
+    background: #fafafa;
+}
+
+.dashboard-nav-title {
+    padding: 0.75rem 1rem 0.5rem;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #6c757d;
+    font-weight: 600;
+}
+
+.dashboard-nav-link {
+    display: block;
+    padding: 0.55rem 1rem;
+    color: inherit;
+    text-decoration: none;
+}
+
+    .dashboard-nav-link.active {
+        background: #e9ecef;
+        font-weight: 600;
+    }
+
+.dashboard-content {
+    flex: 1;
+    min-width: 0;
+    padding: 1rem;
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Error.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Error.razor
@@ -0,0 +1,36 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
+
+@code{
+    [CascadingParameter]
+    private HttpContext? HttpContext { get; set; }
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Home.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Home.razor
@@ -0,0 +1,43 @@
+@rendermode InteractiveServer
+
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<h1>Database first</h1>
+
+<DxCarousel Width="100%"
+            Height="calc(100vh - 9rem)"
+            Data="@GetCarouselData()"
+            ImageSrcField="Source"
+            ImageAltField="AlternateText"
+            LoopNavigationEnabled="true"
+            SlideShowEnabled="true"
+            SlideShowDelay="3000"
+            PauseSlideShowOnHover="true"
+            ImageSizeMode="CarouselImageSizeMode.FitProportional">
+</DxCarousel>
+
+@code {
+    List<CarouselData> GetCarouselData()
+    {
+        return new List<CarouselData>
+        {
+            new CarouselData("/images/DbFirstBefehl.png", "DbFirstBefehl"),
+            new CarouselData("/images/CQRS - Katalog-Datenfluss.png", "CQRS - Katalog-Datenfluss"),
+            new CarouselData("/images/CQRS - Catalog Create, Update, Delete.png", "CQRS - Catalog Create, Update, Delete"),
+        };
+    }
+
+    public class CarouselData
+    {
+        public string Source { get; set; } = string.Empty;
+        public string AlternateText { get; set; } = string.Empty;
+
+        public CarouselData(string source, string alt)
+        {
+            Source = source;
+            AlternateText = alt;
+        }
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Massdata.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Massdata.razor
@@ -0,0 +1,7 @@
+@page "/massdata"
+
+<PageTitle>MassData</PageTitle>
+
+<h1>MassData</h1>
+
+<MassDataGrid />
--- a/DbFirst.BlazorWebApp/Components/Routes.razor
+++ b/DbFirst.BlazorWebApp/Components/Routes.razor
@@ -0,0 +1,9 @@
+@rendermode @(new InteractiveServerRenderMode(prerender: false))
+
+
+<Router AppAssembly="typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+    </Found>
+</Router>
--- a/DbFirst.BlazorWebApp/Components/_Imports.razor
+++ b/DbFirst.BlazorWebApp/Components/_Imports.razor
@@ -0,0 +1,28 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using System.Text.Json
+
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Rendering
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.SignalR.Client
+@using Microsoft.JSInterop
+@using Microsoft.Extensions.Options
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+
+@using DbFirst.BlazorWebApp
+@using DbFirst.BlazorWebApp.Components
+@using DbFirst.BlazorWebApp.Models.Grid
+@using DbFirst.BlazorWebApp.Services
+@using DbFirst.Contracts.Catalogs
+@using DbFirst.Contracts.Dashboards
+@using DbFirst.Contracts.MassData
+@using DbFirst.Contracts.Layouts
+@using DbFirst.Domain
+
+@using DevExpress.Blazor
+@using DevExpress.DashboardBlazor
+@using DevExpress.DashboardWeb
+@using DevExpress.Data.Filtering
--- a/DbFirst.BlazorWebApp/DbFirst.BlazorWebApp.csproj
+++ b/DbFirst.BlazorWebApp/DbFirst.BlazorWebApp.csproj
@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="DevExpress.Blazor" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Dashboard" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Themes" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Themes.Fluent" Version="25.2.3" />
+    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="8.0.22" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="wwwroot\images\" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\DbFirst.Contracts\DbFirst.Contracts.csproj" />
+  </ItemGroup>
+
+</Project>
--- a/DbFirst.BlazorWebApp/Models/ApiResult.cs
+++ b/DbFirst.BlazorWebApp/Models/ApiResult.cs
@@ -0,0 +1,7 @@
+namespace DbFirst.BlazorWebApp.Models;
+
+public record ApiResult<T>(bool Success, T? Value, string? Error)
+{
+    public static ApiResult<T> Ok(T? value) => new(true, value, null);
+    public static ApiResult<T> Fail(string? error) => new(false, default, error);
+}
--- a/DbFirst.BlazorWebApp/Models/Grid/BandLayoutModels.cs
+++ b/DbFirst.BlazorWebApp/Models/Grid/BandLayoutModels.cs
@@ -0,0 +1,43 @@
+using DevExpress.Blazor;
+
+namespace DbFirst.BlazorWebApp.Models.Grid
+{
+    public class BandLayout
+    {
+        public List<BandDefinition> Bands { get; set; } = [];
+        public List<string> ColumnOrder { get; set; } = [];
+        public Dictionary<string, string?> ColumnWidths { get; set; } = new(StringComparer.OrdinalIgnoreCase);
+        public GridPersistentLayout? GridLayout { get; set; }
+        public SizeMode SizeMode { get; set; } = SizeMode.Medium;
+    }
+
+    public class BandDefinition
+    {
+        public string Id { get; set; } = string.Empty;
+        public string Caption { get; set; } = string.Empty;
+        public List<string> Columns { get; set; } = [];
+    }
+
+    public class BandOption
+    {
+        public string Id { get; set; } = string.Empty;
+        public string Caption { get; set; } = string.Empty;
+    }
+
+    public class ColumnDefinition
+    {
+        public string FieldName { get; init; } = string.Empty;
+        public string Caption { get; init; } = string.Empty;
+        public string? Width { get; set; }
+        public string? DisplayFormat { get; init; }
+        public bool ReadOnly { get; init; }
+        public ColumnFilterType FilterType { get; init; }
+    }
+
+    public enum ColumnFilterType
+    {
+        Text,
+        Bool,
+        Date
+    }
+}
--- a/DbFirst.BlazorWebApp/Program.cs
+++ b/DbFirst.BlazorWebApp/Program.cs
@@ -0,0 +1,47 @@
+using DbFirst.BlazorWebApp;
+using DbFirst.BlazorWebApp.Components;
+using DbFirst.BlazorWebApp.Services;
+using DevExpress.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+
+builder.Services.AddDevExpressBlazor(options => options.BootstrapVersion = BootstrapVersion.v5);
+builder.Services.AddScoped<ThemeState>();
+builder.Services.AddScoped<BandLayoutService>();
+
+var apiBaseUrl = builder.Configuration["ApiBaseUrl"];
+builder.Services.Configure<AppSettings>(builder.Configuration);
+void ConfigureClient(HttpClient client)
+{
+    if (!string.IsNullOrWhiteSpace(apiBaseUrl))
+        client.BaseAddress = new Uri(apiBaseUrl);
+}
+
+builder.Services.AddHttpClient<ICatalogApiClient, CatalogApiClient>(ConfigureClient);
+builder.Services.AddHttpClient<IDashboardApiClient, DashboardApiClient>(ConfigureClient);
+builder.Services.AddHttpClient<IMassDataApiClient, MassDataApiClient>(ConfigureClient);
+builder.Services.AddHttpClient<ILayoutApiClient, LayoutApiClient>(ConfigureClient);
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+
+app.MapRazorComponents<App>()
+    .AddInteractiveServerRenderMode();
+
+app.Run();
--- a/DbFirst.BlazorWebApp/Properties/launchSettings.json
+++ b/DbFirst.BlazorWebApp/Properties/launchSettings.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+      "windowsAuthentication": false,
+      "anonymousAuthentication": true,
+      "iisExpress": {
+        "applicationUrl": "http://localhost:7440",
+        "sslPort": 44343
+      }
+    },
+    "profiles": {
+      "http": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "http://localhost:5096",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "https": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "https://localhost:7191;http://localhost:5096",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "IIS Express": {
+        "commandName": "IISExpress",
+        "launchBrowser": true,
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      }
+    }
+  }
--- a/DbFirst.BlazorWebApp/Services/ApiClientHelper.cs
+++ b/DbFirst.BlazorWebApp/Services/ApiClientHelper.cs
@@ -0,0 +1,59 @@
+using System.Net;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+internal sealed class ProblemDetailsDto
+{
+    public string? Type { get; set; }
+    public string? Title { get; set; }
+    public string? Detail { get; set; }
+}
+
+internal static class ApiClientHelper
+{
+    public static async Task<string> ReadErrorAsync(HttpResponseMessage response)
+    {
+        string? problemTitle = null;
+        string? problemDetail = null;
+
+        try
+        {
+            var problem = await response.Content.ReadFromJsonAsync<ProblemDetailsDto>();
+            if (problem != null)
+            {
+                problemTitle = problem.Title;
+                problemDetail = problem.Detail ?? problem.Type;
+            }
+        }
+        catch { }
+
+        var status = response.StatusCode;
+        var reason = response.ReasonPhrase;
+        var body = await response.Content.ReadAsStringAsync();
+
+        string? detail = problemDetail;
+        if (string.IsNullOrWhiteSpace(detail) && !string.IsNullOrWhiteSpace(body))
+            detail = body;
+
+        return status switch
+        {
+            HttpStatusCode.BadRequest => $"Eingabe ungültig{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.NotFound => $"Nicht gefunden{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.Conflict => $"Konflikt{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.Unauthorized => $"Nicht autorisiert{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.Forbidden => $"Nicht erlaubt{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.InternalServerError => $"Serverfehler{FormatSuffix(problemTitle, detail, reason)}",
+            _ => $"Fehler {(int)status} {reason ?? string.Empty}{FormatSuffix(problemTitle, detail, reason)}"
+        };
+    }
+
+    private static string FormatSuffix(string? title, string? detail, string? reason)
+    {
+        var parts = new List<string>();
+        if (!string.IsNullOrWhiteSpace(title)) parts.Add(title);
+        if (!string.IsNullOrWhiteSpace(detail)) parts.Add(detail);
+        if (parts.Count == 0 && !string.IsNullOrWhiteSpace(reason)) parts.Add(reason);
+        if (parts.Count == 0) return string.Empty;
+        return ": " + string.Join(" | ", parts);
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/BandLayoutService.cs
+++ b/DbFirst.BlazorWebApp/Services/BandLayoutService.cs
@@ -0,0 +1,109 @@
+using DbFirst.BlazorWebApp.Models.Grid;
+using DbFirst.Contracts.Layouts;
+using Microsoft.JSInterop;
+using System.Text.Json;
+
+namespace DbFirst.BlazorWebApp.Services
+{
+    public class BandLayoutService(ILayoutApiClient layoutApi, IJSRuntime jsRuntime)
+    {
+        private const string LayoutUserStorageKey = "layoutUser";
+        private readonly JsonSerializerOptions _jsonOptions = new(JsonSerializerDefaults.Web);
+        private string? _cachedLayoutUser;
+
+        public async Task<string> EnsureLayoutUserAsync()
+        {
+            if (!string.IsNullOrWhiteSpace(_cachedLayoutUser))
+                return _cachedLayoutUser;
+
+            var layoutUser = await jsRuntime.InvokeAsync<string?>("localStorage.getItem", LayoutUserStorageKey);
+            if (string.IsNullOrWhiteSpace(layoutUser))
+            {
+                layoutUser = Guid.NewGuid().ToString("N");
+                await jsRuntime.InvokeVoidAsync("localStorage.setItem", LayoutUserStorageKey, layoutUser);
+            }
+
+            _cachedLayoutUser = layoutUser;
+            return _cachedLayoutUser;
+        }
+
+        public async Task<BandLayout> LoadBandLayoutAsync(
+            string layoutType,
+            string layoutKey,
+            string layoutUser,
+            Dictionary<string, ColumnDefinition> columnLookup)
+        {
+            if (string.IsNullOrWhiteSpace(layoutUser))
+                return new BandLayout();
+
+            var stored = await layoutApi.GetAsync(layoutType, layoutKey, layoutUser);
+            if (stored != null && !string.IsNullOrWhiteSpace(stored.LayoutData))
+            {
+                var parsed = JsonSerializer.Deserialize<BandLayout>(stored.LayoutData, _jsonOptions);
+                return NormalizeBandLayout(parsed, columnLookup);
+            }
+
+            return new BandLayout();
+        }
+
+        public async Task SaveBandLayoutAsync(
+            string layoutType,
+            string layoutKey,
+            string layoutUser,
+            BandLayout bandLayout)
+        {
+            var layoutData = JsonSerializer.Serialize(bandLayout, _jsonOptions);
+            await layoutApi.UpsertAsync(new LayoutDto
+            {
+                LayoutType = layoutType,
+                LayoutKey = layoutKey,
+                UserName = layoutUser,
+                LayoutData = layoutData
+            });
+        }
+
+        public async Task ResetBandLayoutAsync(
+            string layoutType,
+            string layoutKey,
+            string layoutUser)
+        {
+            await layoutApi.DeleteAsync(layoutType, layoutKey, layoutUser);
+        }
+
+        public Dictionary<string, string> BuildAssignmentsFromLayout(BandLayout layout)
+        {
+            var assignments = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);
+            foreach (var band in layout.Bands)
+            {
+                foreach (var column in band.Columns)
+                {
+                    assignments[column] = band.Id;
+                }
+            }
+            return assignments;
+        }
+
+        public BandLayout NormalizeBandLayout(
+            BandLayout? layout,
+            Dictionary<string, ColumnDefinition> columnLookup)
+        {
+            layout ??= new BandLayout();
+            layout.Bands ??= [];
+            layout.ColumnOrder ??= [];
+            layout.ColumnWidths ??= [];
+
+            foreach (var band in layout.Bands)
+            {
+                if (string.IsNullOrWhiteSpace(band.Id))
+                    band.Id = Guid.NewGuid().ToString("N");
+
+                if (string.IsNullOrWhiteSpace(band.Caption))
+                    band.Caption = "Band";
+
+                band.Columns = band.Columns?.Where(columnLookup.ContainsKey).ToList() ?? new List<string>();
+            }
+
+            return layout;
+        }
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/CatalogApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/CatalogApiClient.cs
@@ -0,0 +1,63 @@
+using DbFirst.BlazorWebApp.Models;
+using DbFirst.Contracts.Catalogs;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class CatalogApiClient : ICatalogApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/catalogs";
+
+    public CatalogApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<CatalogReadDto>> GetAllAsync(CancellationToken ct = default)
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<CatalogReadDto>>(Endpoint, ct);
+        return result ?? [];
+    }
+
+    public async Task<CatalogReadDto?> GetByIdAsync(int id, CancellationToken ct = default)
+    {
+        return await _httpClient.GetFromJsonAsync<CatalogReadDto>($"{Endpoint}/{id}", ct);
+    }
+
+    public async Task<ApiResult<CatalogReadDto?>> CreateAsync(CatalogWriteDto dto, CancellationToken ct = default)
+    {
+        var response = await _httpClient.PostAsJsonAsync(Endpoint, dto, ct);
+        if (response.IsSuccessStatusCode)
+        {
+            var payload = await response.Content.ReadFromJsonAsync<CatalogReadDto>();
+            return ApiResult<CatalogReadDto?>.Ok(payload);
+        }
+
+        var error = await ApiClientHelper.ReadErrorAsync(response);
+        return ApiResult<CatalogReadDto?>.Fail(error);
+    }
+
+    public async Task<ApiResult<bool>> UpdateAsync(int id, CatalogWriteDto dto, CancellationToken ct = default)
+    {
+        var response = await _httpClient.PutAsJsonAsync($"{Endpoint}/{id}", dto, ct);
+        if (response.IsSuccessStatusCode)
+        {
+            return ApiResult<bool>.Ok(true);
+        }
+
+        var error = await ApiClientHelper.ReadErrorAsync(response);
+        return ApiResult<bool>.Fail(error);
+    }
+
+    public async Task<ApiResult<bool>> DeleteAsync(int id, CancellationToken ct = default)
+    {
+        var response = await _httpClient.DeleteAsync($"{Endpoint}/{id}", ct);
+        if (response.IsSuccessStatusCode)
+        {
+            return ApiResult<bool>.Ok(true);
+        }
+
+        var error = await ApiClientHelper.ReadErrorAsync(response);
+        return ApiResult<bool>.Fail(error);
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs
@@ -0,0 +1,20 @@
+using DbFirst.Contracts.Dashboards;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class DashboardApiClient : IDashboardApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/dashboard/dashboards";
+
+    public DashboardApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<DashboardInfoDto>> GetAllAsync(CancellationToken ct = default)
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint, ct);
+        return result ?? [];
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/ICatalogApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/ICatalogApiClient.cs
@@ -0,0 +1,13 @@
+using DbFirst.BlazorWebApp.Models;
+using DbFirst.Contracts.Catalogs;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public interface ICatalogApiClient
+{
+    Task<List<CatalogReadDto>> GetAllAsync(CancellationToken ct = default);
+    Task<CatalogReadDto?> GetByIdAsync(int id, CancellationToken ct = default);
+    Task<ApiResult<CatalogReadDto?>> CreateAsync(CatalogWriteDto dto, CancellationToken ct = default);
+    Task<ApiResult<bool>> UpdateAsync(int id, CatalogWriteDto dto, CancellationToken ct = default);
+    Task<ApiResult<bool>> DeleteAsync(int id, CancellationToken ct = default);
+}
--- a/DbFirst.BlazorWebApp/Services/IDashboardApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/IDashboardApiClient.cs
@@ -0,0 +1,9 @@
+using DbFirst.Contracts.Dashboards;
+
+namespace DbFirst.BlazorWebApp.Services
+{
+    public interface IDashboardApiClient
+    {
+        Task<List<DashboardInfoDto>> GetAllAsync(CancellationToken ct = default);
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/ILayoutApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/ILayoutApiClient.cs
@@ -0,0 +1,11 @@
+using DbFirst.Contracts.Layouts;
+
+namespace DbFirst.BlazorWebApp.Services
+{
+    public interface ILayoutApiClient
+    {
+        Task<LayoutDto?> GetAsync(string layoutType, string layoutKey, string userName, CancellationToken ct = default);
+        Task<LayoutDto> UpsertAsync(LayoutDto dto, CancellationToken ct = default);
+        Task DeleteAsync(string layoutType, string layoutKey, string userName, CancellationToken ct = default);
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/IMassDataApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/IMassDataApiClient.cs
@@ -0,0 +1,13 @@
+using DbFirst.BlazorWebApp.Models;
+using DbFirst.Contracts.MassData;
+
+namespace DbFirst.BlazorWebApp.Services
+{
+    public interface IMassDataApiClient
+    {
+        Task<int> GetCountAsync(CancellationToken ct = default);
+        Task<List<MassDataReadDto>> GetAllAsync(int? skip, int? take, CancellationToken ct = default);
+        Task<ApiResult<MassDataReadDto?>> UpsertAsync(MassDataWriteDto dto, CancellationToken ct = default);
+        Task<MassDataReadDto?> GetByCustomerNameAsync(string customerName, CancellationToken ct = default);
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/LayoutApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/LayoutApiClient.cs
@@ -0,0 +1,52 @@
+using DbFirst.Contracts.Layouts;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class LayoutApiClient : ILayoutApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/layouts";
+
+    public LayoutApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<LayoutDto?> GetAsync(string layoutType, string layoutKey, string userName, CancellationToken ct = default)
+    {
+        var url = $"{Endpoint}?layoutType={Uri.EscapeDataString(layoutType)}&layoutKey={Uri.EscapeDataString(layoutKey)}&userName={Uri.EscapeDataString(userName)}";
+        var response = await _httpClient.GetAsync(url, ct);
+        if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
+        {
+            return null;
+        }
+
+        response.EnsureSuccessStatusCode();
+        return await response.Content.ReadFromJsonAsync<LayoutDto>();
+    }
+
+    public async Task<LayoutDto> UpsertAsync(LayoutDto dto, CancellationToken ct = default)
+    {
+        var response = await _httpClient.PostAsJsonAsync(Endpoint, dto, ct);
+        if (!response.IsSuccessStatusCode)
+        {
+            var detail = await ApiClientHelper.ReadErrorAsync(response);
+            throw new InvalidOperationException(detail);
+        }
+
+        var payload = await response.Content.ReadFromJsonAsync<LayoutDto>();
+        return payload ?? dto;
+    }
+
+    public async Task DeleteAsync(string layoutType, string layoutKey, string userName, CancellationToken ct = default)
+    {
+        var url = $"{Endpoint}?layoutType={Uri.EscapeDataString(layoutType)}&layoutKey={Uri.EscapeDataString(layoutKey)}&userName={Uri.EscapeDataString(userName)}";
+        var response = await _httpClient.DeleteAsync(url, ct);
+        if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
+        {
+            return;
+        }
+
+        response.EnsureSuccessStatusCode();
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/MassDataApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/MassDataApiClient.cs
@@ -0,0 +1,68 @@
+using DbFirst.BlazorWebApp.Models;
+using DbFirst.Contracts.MassData;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class MassDataApiClient : IMassDataApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/massdata";
+
+    public MassDataApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<int> GetCountAsync(CancellationToken ct = default)
+    {
+        var result = await _httpClient.GetFromJsonAsync<int?>("api/massdata/count", ct);
+        return result ?? 0;
+    }
+
+    public async Task<List<MassDataReadDto>> GetAllAsync(int? skip, int? take, CancellationToken ct = default)
+    {
+        var query = new List<string>();
+        if (skip.HasValue)
+        {
+            query.Add($"skip={skip.Value}");
+        }
+        if (take.HasValue)
+        {
+            query.Add($"take={take.Value}");
+        }
+
+        var url = query.Count == 0 ? Endpoint : $"{Endpoint}?{string.Join("&", query)}";
+        var result = await _httpClient.GetFromJsonAsync<List<MassDataReadDto>>(url, ct);
+        return result ?? [];
+    }
+
+    public async Task<ApiResult<MassDataReadDto?>> UpsertAsync(MassDataWriteDto dto, CancellationToken ct = default)
+    {
+        var response = await _httpClient.PostAsJsonAsync($"{Endpoint}/upsert", dto, ct);
+        if (response.IsSuccessStatusCode)
+        {
+            var payload = await response.Content.ReadFromJsonAsync<MassDataReadDto>();
+            return ApiResult<MassDataReadDto?>.Ok(payload);
+        }
+
+        var error = await ApiClientHelper.ReadErrorAsync(response);
+        return ApiResult<MassDataReadDto?>.Fail(error);
+    }
+
+    public async Task<MassDataReadDto?> GetByCustomerNameAsync(string customerName, CancellationToken ct = default)
+    {
+        if (string.IsNullOrWhiteSpace(customerName))
+        {
+            return null;
+        }
+
+        var response = await _httpClient.GetAsync($"{Endpoint}/{Uri.EscapeDataString(customerName)}", ct);
+        if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
+        {
+            return null;
+        }
+
+        response.EnsureSuccessStatusCode();
+        return await response.Content.ReadFromJsonAsync<MassDataReadDto>();
+    }
+}
--- a/DbFirst.BlazorWebApp/Services/ThemeState.cs
+++ b/DbFirst.BlazorWebApp/Services/ThemeState.cs
@@ -0,0 +1,65 @@
+using DevExpress.Blazor;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class ThemeState
+{
+    private readonly IThemeChangeService themeChangeService;
+
+    public ThemeState(IThemeChangeService themeChangeService)
+    {
+        this.themeChangeService = themeChangeService;
+    }
+
+    public bool IsDarkMode { get; private set; }
+    public string CurrentThemeName { get; private set; } = "Fluent";
+
+    /// <summary>
+    /// Themes die eine native DevExpress Dark-Variante besitzen:
+    ///   - Fluent  ? Themes.Fluent.Clone(ThemeMode.Dark), verwendet --DS-* Token-System
+    ///   - BlazingBerry ? Themes.BlazingDark
+    /// Alle anderen Themes (Purple, OfficeWhite, BootstrapExternal) haben keine offizielle
+    /// Dark-Variante; dort übernehmen CSS-Overrides auf --dxbl-grid-* Variablen die Arbeit.
+    /// </summary>
+    public bool IsNativeDarkTheme => IsDarkMode &&
+        (CurrentThemeName == "Fluent" || CurrentThemeName == "BlazingBerry");
+
+    public static readonly List<string> AvailableThemes = ["Fluent", "BlazingBerry", "Purple", "OfficeWhite", "BootstrapExternal"];
+
+    public event Action? OnChange;
+
+    public void SetTheme(string themeName)
+    {
+        if (CurrentThemeName == themeName) return;
+        CurrentThemeName = themeName;
+        ApplyTheme();
+        OnChange?.Invoke();
+    }
+
+    public void SetDarkMode(bool isDarkMode)
+    {
+        if (IsDarkMode == isDarkMode) return;
+        IsDarkMode = isDarkMode;
+        ApplyTheme();
+        OnChange?.Invoke();
+    }
+
+    private void ApplyTheme()
+    {
+        if (CurrentThemeName == "Fluent")
+        {
+            var theme = Themes.Fluent.Clone(properties =>
+            {
+                properties.Mode = IsDarkMode ? ThemeMode.Dark : ThemeMode.Light;
+                properties.ApplyToPageElements = true;
+            });
+            themeChangeService.SetTheme(theme);
+        }
+        else if (CurrentThemeName == "BlazingBerry") themeChangeService.SetTheme(IsDarkMode ? Themes.BlazingDark : Themes.BlazingBerry);
+        else if (CurrentThemeName == "Purple")           themeChangeService.SetTheme(Themes.Purple);
+        else if (CurrentThemeName == "OfficeWhite")      themeChangeService.SetTheme(Themes.OfficeWhite);
+        else if (CurrentThemeName == "BootstrapExternal") themeChangeService.SetTheme(Themes.BootstrapExternal);
+        else
+            themeChangeService.SetTheme(Themes.Fluent);
+    }
+}
--- a/DbFirst.BlazorWebApp/appsettings.Development.json
+++ b/DbFirst.BlazorWebApp/appsettings.Development.json
@@ -0,0 +1,15 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "ApiBaseUrl": "https://localhost:7204/",
+  "BrowserLink": {
+    "Enabled": false
+  },
+  "DetailedErrors": true
+}
+
+
--- a/DbFirst.BlazorWebApp/appsettings.json
+++ b/DbFirst.BlazorWebApp/appsettings.json
@@ -0,0 +1,10 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "ApiBaseUrl": "https://localhost:7204/",
+  "AllowedHosts": "*"
+}
--- a/DbFirst.BlazorWebApp/wwwroot/app.css
+++ b/DbFirst.BlazorWebApp/wwwroot/app.css
@@ -0,0 +1,290 @@
+:root {
+    --global-size: 16px;
+}
+
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: var(--global-size);
+}
+
+/* Theme-Variablen */
+.app-light {
+    --band-editor-bg: #f8f9fa;
+    --band-editor-border: #dee2e6;
+    --band-toggle-hover-bg: #e9ecef;
+    --grid-stripe-bg: rgba(0, 0, 0, 0.03);
+}
+
+.app-dark {
+    background-color: #1b1b1b;
+    color: #f1f1f1;
+    --band-editor-bg: #2d2d2d;
+    --band-editor-border: #444444;
+    --band-toggle-hover-bg: #3a3a3a;
+    --grid-stripe-bg: rgba(255, 255, 255, 0.04);
+}
+
+a, .btn-link {
+    color: #006bb7;
+}
+
+.app-dark a, .app-dark .btn-link {
+    color: #6cb6ff;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #1b6ec2;
+    border-color: #1861ac;
+}
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+.content {
+    padding-top: 1.1rem;
+}
+
+h1:focus {
+    outline: none;
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid #e50000;
+}
+
+.validation-message {
+    color: #e50000;
+}
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODUgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+    .blazor-error-boundary::after {
+        content: "An error has occurred."
+    }
+
+.darker-border-checkbox.form-check-input {
+    border-color: #929292;
+}
+
+/* Grid Band-Editor */
+.band-editor {
+    margin-top: 4px;
+    margin-bottom: 16px;
+    border: 1px solid var(--band-editor-border);
+    border-radius: 4px;
+    background-color: var(--band-editor-bg);
+    overflow: hidden;
+}
+
+.band-editor-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 12px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    color: inherit;
+    text-align: left;
+}
+
+    .band-editor-toggle:hover {
+        background-color: var(--band-toggle-hover-bg);
+    }
+
+.band-editor-toggle-icon {
+    font-size: 0.7rem;
+    transition: transform 0.2s ease;
+    display: inline-block;
+}
+
+    .band-editor-toggle-icon.expanded {
+        transform: rotate(90deg);
+    }
+
+.band-editor-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 0 12px 12px 12px;
+}
+
+.band-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+}
+
+.band-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.band-columns {
+    max-width: 720px;
+    margin-top: 4px;
+}
+
+.grid-section {
+    margin-top: 4px;
+}
+
+/* Grid Zebra-Striping */
+dxbl-grid tbody tr:nth-child(even) td {
+    background-color: var(--grid-stripe-bg) !important;
+}
+
+/* ?? Dark-Mode-Overrides für nicht-native Themes ?????????????????????????????
+   Strategie: CSS-Custom-Properties werden von DevExpress DIREKT auf den
+   Komponenten-Elementen definiert (z. B. --dxbl-popup-bg:#fff auf .dxbl-modal).
+   Eine geerbte Variable aus html.dx-dark würde durch die direkte Zuweisung
+   überschrieben. Deshalb targeten wir exakt dieselben Elemente, aber mit einem
+   zusätzlichen Vorfahren-Selektor (html.dx-dark) für höhere Spezifizität:
+     html.dx-dark .dxbl-modal = (0,2,1)  >  .dxbl-modal = (0,1,0)  ?
+   html.dx-dark wird per JS gesetzt, wenn IsDarkMode && !IsNativeDarkTheme.
+?? */
+
+/* Popup / Modal (CRUD-Dialoge) – Variablen-Quelle: .dxbl-modal */
+html.dx-dark .dxbl-modal {
+    --dxbl-popup-bg: #2d2d2d;
+    --dxbl-popup-color: #e8e8e8;
+    --dxbl-popup-border-color: #555;
+    --dxbl-popup-header-bg: #333;
+    --dxbl-popup-header-color: #e8e8e8;
+    --dxbl-popup-footer-bg: #333;
+    --dxbl-popup-footer-color: #e8e8e8;
+}
+
+/* Flyout (Column Chooser, Filter-Panel) – Variablen-Quelle: .dxbl-flyout */
+html.dx-dark .dxbl-flyout {
+    --dxbl-flyout-bg: #2d2d2d;
+    --dxbl-flyout-color: #e8e8e8;
+    --dxbl-flyout-border-color: #555;
+    --dxbl-flyout-header-bg: #333;
+    --dxbl-flyout-header-color: #e8e8e8;
+    --dxbl-flyout-footer-bg: #333;
+}
+
+/* Dropdown (ComboBox-Klappliste, Band-Dropdowns) – Quelle: .dxbl-dropdown */
+html.dx-dark .dxbl-dropdown,
+html.dx-dark .dxbl-itemlist-dropdown {
+    --dxbl-dropdown-bg: #2d2d2d;
+    --dxbl-dropdown-color: #e8e8e8;
+    --dxbl-dropdown-border-color: #555;
+    --dxbl-dropdown-header-bg: #333;
+    --dxbl-dropdown-footer-bg: #333;
+}
+
+/* Edit-Dropdown (ComboBox-Popup wenn als Modal gerendert) – Quelle: .dxbl-edit-dropdown */
+html.dx-dark .dxbl-edit-dropdown {
+    --dxbl-edit-dropdown-bg: #2d2d2d;
+    --dxbl-edit-dropdown-color: #e8e8e8;
+    --dxbl-edit-dropdown-border-color: #555;
+}
+
+/* ListBox (Einträge in Dropdowns) – Quelle: .dxbl-list-box */
+html.dx-dark .dxbl-list-box,
+html.dx-dark .dxbl-list-box-render-container {
+    --dxbl-list-box-bg: #2d2d2d;
+    --dxbl-list-box-color: #e8e8e8;
+    --dxbl-list-box-border-color: #555;
+    --dxbl-list-box-item-hover-bg: #3a3a3a;
+    --dxbl-list-box-item-hover-color: #e8e8e8;
+}
+
+/* TextEdit / ComboBox – Eingabefeld – Quelle: .dxbl-text-edit */
+html.dx-dark .dxbl-text-edit {
+    --dxbl-text-edit-bg: #2d2d2d;
+    --dxbl-text-edit-color: #e8e8e8;
+    --dxbl-text-edit-border-color: #555;
+    --dxbl-text-edit-btn-bg: #3a3a3a;
+    --dxbl-text-edit-btn-color: #e8e8e8;
+    --dxbl-text-edit-btn-hover-bg: #444;
+    --dxbl-text-edit-btn-hover-color: #e8e8e8;
+}
+
+/* Buttons */
+html.dx-dark .dxbl-btn {
+    --dxbl-btn-color: #e8e8e8;
+    --dxbl-btn-bg: #3a3a3a;
+    --dxbl-btn-border-color: #555;
+    --dxbl-btn-hover-bg: #444;
+    --dxbl-btn-hover-color: #e8e8e8;
+    --dxbl-btn-hover-border-color: #666;
+}
+
+/* FormLayout */
+html.dx-dark .dxbl-fl {
+    --dxbl-fl-caption-color: #bbb;
+    --dxbl-fl-group-bg: #242424;
+    --dxbl-fl-group-color: #e8e8e8;
+}
+
+/* Grid */
+html.dx-dark .dxbl-grid {
+    background-color: #242424;
+    color: #e8e8e8;
+    border-color: #444;
+}
+
+html.dx-dark .dxbl-grid > .dxbl-scroll-viewer,
+html.dx-dark .dxbl-grid > .dxbl-grid-top-panel {
+    background-color: #242424;
+    color: #e8e8e8;
+}
+
+/* MassData-spezifisch */
+.page-size-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: nowrap;
+    margin-bottom: 12px;
+}
+
+.page-size-label {
+    white-space: nowrap;
+}
+
+.page-size-combo {
+    width: 13ch;
+    min-width: 13ch;
+    max-width: 13ch;
+}
+
+    .page-size-combo input {
+        text-align: left;
+    }
+
+.pager-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    margin-bottom: 16px;
+}
+
+/* Lade-Spinner */
+.loading-container {
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.top-row .btn-gap {
+    margin-left: 8px;
+}
--- a/Show More
+++ b/Show More