diff --git a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
index 93bb4bb..0400eff 100644
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
@@ -2,54 +2,6 @@
 @inject LayoutApiClient LayoutApi
 @inject IJSRuntime JsRuntime
 
-<style>
-    .action-panel { margin-bottom: 16px; }
-    .grid-section { margin-top: 12px; }
-    .catalog-edit-popup {
-        min-width: 720px;
-    }
-    .band-editor {
-        display: grid;
-        gap: 12px;
-        margin-bottom: 16px;
-    }
-    .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;
-    }
-    .filter-row-cell {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        flex-wrap: wrap;
-    }
-    .filter-operator {
-        width: 52px;
-        min-width: 52px;
-        flex: 0 0 52px;
-    }
-    .filter-value {
-        min-width: 160px;
-        flex: 1 1 160px;
-    }
-    .loading-container {
-        min-height: 160px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
-
 @if (!string.IsNullOrWhiteSpace(errorMessage))
 {
     <div class="alert alert-danger" role="alert">@errorMessage</div>
diff --git a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor.css b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor.css
new file mode 100644
index 0000000..8fe4bee
--- /dev/null
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor.css
@@ -0,0 +1,49 @@
+.action-panel {
+    margin-bottom: 16px;
+}
+.grid-section {
+    margin-top: 12px;
+}
+.catalog-edit-popup {
+    min-width: 720px;
+}
+.band-editor {
+    display: grid;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+.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;
+}
+.filter-row-cell {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+}
+.filter-operator {
+    width: 52px;
+    min-width: 52px;
+    flex: 0 0 52px;
+}
+.filter-value {
+    min-width: 160px;
+    flex: 1 1 160px;
+}
+.loading-container {
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
index c633ec3..d2f281f 100644
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
@@ -2,62 +2,6 @@
 @inject LayoutApiClient LayoutApi
 @inject IJSRuntime JsRuntime
 
-<style>
-    .action-panel { margin-bottom: 16px; }
-    .grid-section { margin-top: 12px; }
-    .pager-container {
-        display: flex;
-        justify-content: center;
-        margin-top: 12px;
-        margin-bottom: 16px;
-    }
-    .page-size-selector {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex-wrap: nowrap;
-    }
-    .page-size-label {
-        white-space: nowrap;
-    }
-    .page-size-combo {
-        width: 13ch;
-        min-width: 13ch;
-        max-width: 13ch;
-    }
-    .page-size-combo input {
-        text-align: left;
-    }
-    .massdata-edit-popup {
-        min-width: 720px;
-    }
-    .band-editor {
-        display: grid;
-        gap: 12px;
-        margin-bottom: 16px;
-    }
-    .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;
-    }
-    .loading-container {
-        min-height: 160px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
-
 @if (!string.IsNullOrWhiteSpace(errorMessage))
 {
     <div class="alert alert-danger" role="alert">@errorMessage</div>
diff --git a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor.css b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor.css
new file mode 100644
index 0000000..38c4618
--- /dev/null
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor.css
@@ -0,0 +1,57 @@
+.action-panel { 
+    margin-bottom: 16px;
+}
+.grid-section {
+    margin-top: 12px;
+}
+.pager-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 12px;
+    margin-bottom: 16px;
+}
+.page-size-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: nowrap;
+}
+.page-size-label {
+    white-space: nowrap;
+}
+.page-size-combo {
+    width: 13ch;
+    min-width: 13ch;
+    max-width: 13ch;
+}
+.page-size-combo input {
+    text-align: left;
+}
+.massdata-edit-popup {
+    min-width: 720px;
+}
+.band-editor {
+    display: grid;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+.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;
+}
+.loading-container {
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file