diff --git a/assets/controllers/elements/datatables/datatables_controller.js b/assets/controllers/elements/datatables/datatables_controller.js
index cef7779c..5a50623d 100644
--- a/assets/controllers/elements/datatables/datatables_controller.js
+++ b/assets/controllers/elements/datatables/datatables_controller.js
@@ -24,7 +24,10 @@ import 'datatables.net-bs5/css/dataTables.bootstrap5.css'
 import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.css'
 import 'datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.css'
 import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css';
-import 'datatables.net-select-bs5/css/select.bootstrap5.css';
+
+//Use our own styles for the select extension which fit the bootstrap theme better
+//import 'datatables.net-select-bs5/css/select.bootstrap5.css';
+import '../../../css/components/datatables_select_bs5.css';
 
 //JS
 import 'datatables.net-bs5';
diff --git a/assets/css/app/tables.css b/assets/css/app/tables.css
index dd633f65..63f7860d 100644
--- a/assets/css/app/tables.css
+++ b/assets/css/app/tables.css
@@ -113,55 +113,4 @@ Classes for Datatables export
 #export-messageTop,
 .export-helper{
     display: none;
-}
-
-/******************************************************
- * Styling for the select all checkbox in the parts table
- * Should match the styling of the select checkbox
- ******************************************************/
-table.dataTable > thead > tr > th.select-checkbox {
-    position: relative;
-}
-table.dataTable > thead > tr > th.select-checkbox:before,
-table.dataTable > thead > tr > th.select-checkbox:after {
-    display: block;
-    position: absolute;
-    top: 0.9em;
-    left: 50%;
-    width: 1em !important;
-    height: 1em !important;
-    box-sizing: border-box;
-}
-table.dataTable > thead > tr > th.select-checkbox:before {
-    content: " ";
-    margin-top: -5px;
-    margin-left: -6px;
-    border: 2px solid var(--bs-tertiary-color);
-    border-radius: 3px;
-}
-
-table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:before {
-    border: 2px solid var(--bs-tertiary-color) !important;
-    font-weight: bold;
-}
-
-table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > td.select-checkbox:after, table.dataTable > tbody > tr > th.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:after {
-    width: 1em !important;
-    height: 1em !important;
-}
-
-table.dataTable > thead > tr.selected > th.select-checkbox:after {
-    content: "✓";
-    font-size: 20px;
-    font-weight: bold;
-    margin-top: -20px;
-    margin-left: -6px;
-    text-align: center;
-    /*text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; */
-}
-table.dataTable.compact > thead > tr > th.select-checkbox:before {
-    margin-top: -12px;
-}
-table.dataTable.compact > thead > tr.selected > th.select-checkbox:after {
-    margin-top: -16px;
-}
+}
\ No newline at end of file
diff --git a/assets/css/components/datatables_select_bs5.css b/assets/css/components/datatables_select_bs5.css
new file mode 100644
index 00000000..7c717bf4
--- /dev/null
+++ b/assets/css/components/datatables_select_bs5.css
@@ -0,0 +1,69 @@
+/******************************************************************************************
+* This styles the checkboxes of the select extension exactly like the ones in bootstrap 5
+******************************************************************************************/
+
+table.dataTable > tbody > tr > .selected {
+    background-color: var(--bs-primary-bg-subtle) !important;
+    color: white;
+}
+table.dataTable > tbody > tr > .dt-select {
+    text-align: center;
+    vertical-align: middle;
+}
+table.dataTable > thead > tr > .dt-select {
+    text-align: center;
+}
+table.dataTable input.dt-select-checkbox {
+    --bs-form-check-bg: var(--bs-body-bg);
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.25em;
+    vertical-align: top;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(--bs-form-check-bg);
+    background-image: var(--bs-form-check-bg-image);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+    print-color-adjust: exact;
+    border-radius: 0.25em;
+}
+
+table.dataTable input.dt-select-checkbox:checked {
+    background-color: rgb(var(--bs-secondary-rgb));
+    border-color: rgb(var(--bs-secondary-rgb));
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+
+table.dataTable input.dt-select-checkbox:indeterminate {
+    background-color: rgb(var(--bs-secondary-rgb));
+    border-color: rgb(var(--bs-secondary-rgb));
+    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+}
+
+
+
+
+div.dt-container span.select-info,
+div.dt-container span.select-item {
+    margin-left: 0.5em;
+}
+
+
+@media screen and (max-width: 640px) {
+    div.dt-container span.select-info,
+    div.dt-container span.select-item {
+        margin-left: 0;
+        display: block;
+    }
+}
+table.dataTable.table-sm tbody td.select-checkbox::before {
+    margin-top: -9px;
+}
+