diff --git a/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointsPage.cshtml b/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointsPage.cshtml
index 942e144..6f5fa15 100644
--- a/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointsPage.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointsPage.cshtml
@@ -27,16 +27,6 @@
                 <th class="text-center">Action</th>
             </tr>
         </thead>
-        <tfoot class="table-light">
-            <tr>
-                <th>ID</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckPointDTO.IsEnabled), typeof(CheckPointDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckPointDTO.ShortName), typeof(CheckPointDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckPointDTO.Code), typeof(CheckPointDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckPointDTO.RoleName), typeof(CheckPointDTO))</th>
-                <th>Action</th>
-            </tr>
-        </tfoot>
     </table>
 </div>
 
diff --git a/src/WorkFlowCheck.Web/Pages/BaseStock/Equipments/EquipmentsPage.cshtml b/src/WorkFlowCheck.Web/Pages/BaseStock/Equipments/EquipmentsPage.cshtml
index 59a0b48..ae4b303 100644
--- a/src/WorkFlowCheck.Web/Pages/BaseStock/Equipments/EquipmentsPage.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/BaseStock/Equipments/EquipmentsPage.cshtml
@@ -22,14 +22,6 @@
                 <th class="text-center">Action</th>
             </tr>
         </thead>
-        <tfoot class="table-light">
-            <tr>
-                <th>ID</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(EquipmentDTO.ShortName), typeof(EquipmentDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(EquipmentDTO.EquipmentNumber), typeof(EquipmentDTO))</th>
-                <th>Action</th>
-            </tr>
-        </tfoot>
     </table>
 </div>
 
diff --git a/src/WorkFlowCheck.Web/Pages/BaseStock/Locations/LocationsPage.cshtml b/src/WorkFlowCheck.Web/Pages/BaseStock/Locations/LocationsPage.cshtml
index f84f60a..8602327 100644
--- a/src/WorkFlowCheck.Web/Pages/BaseStock/Locations/LocationsPage.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/BaseStock/Locations/LocationsPage.cshtml
@@ -21,13 +21,6 @@
                 <th class="text-center">Action</th>
             </tr>
         </thead>
-        <tfoot class="table-light">
-            <tr>
-                <th>ID</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(LocationDTO.FullName), typeof(LocationDTO))</th>
-                <th>Action</th>
-            </tr>
-        </tfoot>
     </table>
 </div>
 
diff --git a/src/WorkFlowCheck.Web/Pages/CheckList/CheckListHeader/CheckListHeaderPage.cshtml b/src/WorkFlowCheck.Web/Pages/CheckList/CheckListHeader/CheckListHeaderPage.cshtml
index 43b77d8..b863f1a 100644
--- a/src/WorkFlowCheck.Web/Pages/CheckList/CheckListHeader/CheckListHeaderPage.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/CheckList/CheckListHeader/CheckListHeaderPage.cshtml
@@ -37,20 +37,6 @@
                 <th class="text-center">Action</th>
             </tr>
         </thead>
-        <tfoot class="table-light">
-            <tr>
-                <th>ID</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.CheckStatus), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.IsEditable), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.DocumentNumber), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.DateExecution), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.ShortName), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.Description), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.UserId), typeof(CheckListHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListHeaderDTO.AcceptUserId), typeof(CheckListHeaderDTO))</th>
-                <th class="text-center">Action</th>
-            </tr>
-        </tfoot>
     </table>
 </div>
 
diff --git a/src/WorkFlowCheck.Web/Pages/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderPage.cshtml b/src/WorkFlowCheck.Web/Pages/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderPage.cshtml
index 54674b4..36131c0 100644
--- a/src/WorkFlowCheck.Web/Pages/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderPage.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderPage.cshtml
@@ -23,14 +23,6 @@
                 <th class="text-center">Action</th>
             </tr>
         </thead>
-        <tfoot class="table-light">
-            <tr>
-                <th>ID</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateHeaderDTO.ShortName), typeof(CheckListTemplateHeaderDTO))</th>
-                <th>@DisplayNameHelper.GetDisplayName(nameof(CheckListTemplateHeaderDTO.Description), typeof(CheckListTemplateHeaderDTO))</th>
-                <th class="text-center">Action</th>
-            </tr>
-        </tfoot>
     </table>
 </div>
 
diff --git a/src/WorkFlowCheck.Web/wwwroot/css/wfc-datatables.css b/src/WorkFlowCheck.Web/wwwroot/css/wfc-datatables.css
index f7cca53..6cdf12e 100644
--- a/src/WorkFlowCheck.Web/wwwroot/css/wfc-datatables.css
+++ b/src/WorkFlowCheck.Web/wwwroot/css/wfc-datatables.css
@@ -1,2 +1,158 @@
-body {
-}
+/* Workflow Check – DataTables arculat */
+
+/* Körbefutó keret és finoman lekerekített táblázatsarkok. */
+table.dataTable {
+    border: 1px solid var(--wfc-border, #d7e2ee) !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    border-radius: .6rem;
+    overflow: hidden;
+}
+
+table.dataTable > thead > tr:first-child > th:first-child,
+table.dataTable > thead > tr:first-child > td:first-child {
+    border-top-left-radius: .52rem;
+}
+
+table.dataTable > thead > tr:first-child > th:last-child,
+table.dataTable > thead > tr:first-child > td:last-child {
+    border-top-right-radius: .52rem;
+}
+
+table.dataTable > tbody > tr:last-child > td:first-child,
+table.dataTable > tbody > tr:last-child > th:first-child,
+table.dataTable > tfoot > tr:last-child > td:first-child,
+table.dataTable > tfoot > tr:last-child > th:first-child {
+    border-bottom-left-radius: .52rem;
+}
+
+table.dataTable > tbody > tr:last-child > td:last-child,
+table.dataTable > tbody > tr:last-child > th:last-child,
+table.dataTable > tfoot > tr:last-child > td:last-child,
+table.dataTable > tfoot > tr:last-child > th:last-child {
+    border-bottom-right-radius: .52rem;
+}
+
+table.dataTable > tbody > tr:last-child > td,
+table.dataTable > tbody > tr:last-child > th,
+table.dataTable > tfoot > tr:last-child > td,
+table.dataTable > tfoot > tr:last-child > th {
+    border-bottom: 0 !important;
+}
+
+/* Fejléc: minden DataTables táblán egységes sötétkék háttér. */
+table.dataTable > thead,
+table.dataTable > thead.table-primary {
+    --bs-table-color: var(--wfc-white, #fff);
+    --bs-table-bg: var(--wfc-navy-700, #123c69);
+    --bs-table-border-color: rgb(255 255 255 / 20%);
+    color: var(--wfc-white, #fff);
+    background: var(--wfc-navy-700, #123c69);
+}
+
+table.dataTable > thead > tr > th,
+table.dataTable > thead > tr > td,
+table.dataTable > thead.table-primary > tr > th,
+table.dataTable > thead.table-primary > tr > td {
+    border-color: rgb(255 255 255 / 20%) !important;
+    color: var(--wfc-white, #fff) !important;
+    background-color: var(--wfc-navy-700, #123c69) !important;
+    background-image: none !important;
+    font-weight: 700;
+    vertical-align: middle;
+}
+
+table.dataTable > thead > tr > th:first-child,
+table.dataTable > thead > tr > td:first-child {
+    border-left-color: var(--wfc-navy-700, #123c69) !important;
+}
+
+table.dataTable > thead > tr > th:last-child,
+table.dataTable > thead > tr > td:last-child {
+    border-right-color: var(--wfc-navy-700, #123c69) !important;
+}
+
+/* DataTables 2 rendezési nyilak: fehérek és jól láthatók. */
+table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
+table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
+table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before,
+table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
+table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
+table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
+    color: var(--wfc-white, #fff) !important;
+}
+
+table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
+table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
+table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before,
+table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after {
+    opacity: .45 !important;
+}
+
+table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
+table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
+table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before,
+table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
+    opacity: 1 !important;
+}
+
+/* Finomabb hover-visszajelzés a rendezhető fejlécen. */
+table.dataTable > thead > tr > th.dt-orderable-asc:hover,
+table.dataTable > thead > tr > th.dt-orderable-desc:hover,
+table.dataTable > thead > tr > td.dt-orderable-asc:hover,
+table.dataTable > thead > tr > td.dt-orderable-desc:hover {
+    background-color: var(--wfc-navy-800, #0e2c4f) !important;
+}
+
+/* A táblázat lábléce marad világos, de illeszkedik az arculathoz. */
+table.dataTable > tfoot > tr > th,
+table.dataTable > tfoot > tr > td {
+    border-color: var(--wfc-border, #d7e2ee);
+    color: var(--wfc-navy-900, #0b1f3a);
+    background: #eef6fc;
+    font-weight: 650;
+}
+
+/* DataTables lapozó – Workflow Check sötétkék arculat. */
+div.dt-container .dt-paging .pagination {
+    gap: .18rem;
+}
+
+div.dt-container .dt-paging .page-link,
+div.dt-container .dt-paging button.dt-paging-button {
+    min-width: 38px;
+    border: 1px solid var(--wfc-border, #d7e2ee) !important;
+    border-radius: .45rem !important;
+    color: var(--wfc-navy-700, #123c69) !important;
+    background: var(--wfc-white, #fff) !important;
+    box-shadow: none !important;
+}
+
+div.dt-container .dt-paging .page-link:hover,
+div.dt-container .dt-paging .page-link:focus,
+div.dt-container .dt-paging button.dt-paging-button:hover,
+div.dt-container .dt-paging button.dt-paging-button:focus {
+    border-color: var(--wfc-blue-500, #38bdf8) !important;
+    color: var(--wfc-navy-900, #0b1f3a) !important;
+    background: var(--wfc-blue-200, #bae6fd) !important;
+}
+
+div.dt-container .dt-paging .page-item.active .page-link,
+div.dt-container .dt-paging button.dt-paging-button.current,
+div.dt-container .dt-paging button.dt-paging-button.current:hover {
+    border-color: var(--wfc-navy-700, #123c69) !important;
+    color: var(--wfc-white, #fff) !important;
+    background: var(--wfc-navy-700, #123c69) !important;
+    box-shadow: 0 4px 10px rgb(18 60 105 / 18%) !important;
+}
+
+div.dt-container .dt-paging .page-item.disabled .page-link,
+div.dt-container .dt-paging button.dt-paging-button.disabled,
+div.dt-container .dt-paging button.dt-paging-button:disabled {
+    border-color: #e2e8f0 !important;
+    color: #94a3b8 !important;
+    background: #f8fafc !important;
+    opacity: 1;
+}
diff --git a/src/WorkFlowCheck.Web/wwwroot/css/wfc.css b/src/WorkFlowCheck.Web/wwwroot/css/wfc.css
index 84f7df1..34b8341 100644
--- a/src/WorkFlowCheck.Web/wwwroot/css/wfc.css
+++ b/src/WorkFlowCheck.Web/wwwroot/css/wfc.css
@@ -1,6 +1,6 @@
-@import url("wfc-datatables.css");
-@import url("wfc-form.css");
-@import url("wfc-buttons.css");
+@import url("wfc-datatables.css");
+@import url("wfc-forms.css");
+@import url("wfc-buttons.css");
 
 .sidebar-brand {
     display: flex;
diff --git a/src/WorkFlowCheck.Web/wwwroot/css/workflow-check.css b/src/WorkFlowCheck.Web/wwwroot/css/workflow-check.css
index 29e8719..030776c 100644
--- a/src/WorkFlowCheck.Web/wwwroot/css/workflow-check.css
+++ b/src/WorkFlowCheck.Web/wwwroot/css/workflow-check.css
@@ -1,3 +1,5 @@
+@import url("wfc.css");
+
 :root {
     --wfc-navy-950: #071629;
     --wfc-navy-900: #0b1f3a;