diff --git a/data-table.js b/data-table.js
index 0ebbebf..5af755d 100644
--- a/data-table.js
+++ b/data-table.js
@@ -243,13 +243,22 @@ class DataTable extends IgniteElement {
                 }
             }),
             currentPage: 0,
+            headClass: "table-dark",
+            bodyClass: null,
             pendingSearch: null,
             showPageSize: true,
+            pageSizeClass: "form-select w-auto text-dark",
+            pageSizeSpanClass: "input-group-text bg-white text-dark",
             showSearchBox: true,
+            searchBoxClass: "form-control bg-white",
+            searchBoxSpanClass: "input-group-text bg-white text-dark",
             showRowCount: true,
+            rowCountClass: "bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0 text-dark",
             showPages: true,
             showPageJumpTo: true,
-            refreshButton: true,
+            pageJumpToClass: "form-select border-0 w-auto text-dark",
+            showRefreshButton: true,
+            refreshButtonClass: "btn btn-secondary text-dark",
             refresh: null,
             pendingFilter: null,
             loading: false
@@ -258,22 +267,22 @@ class DataTable extends IgniteElement {
 
     render() {
         return this.template.child(
-            new div().show([this.showPageSize, this.showSearchBox, this.showRowCount], (pageSize, searchBox, rowCount) => pageSize || searchBox || rowCount).class("row g-3 mb-3").child(
+            new div().show([this.showPageSize, this.showSearchBox, this.showRowCount, this.showRefreshButton], (pageSize, searchBox, rowCount, refreshButton) => pageSize || searchBox || rowCount || refreshButton).class("row g-3 mb-3").child(
                 new div().class("col-12 col-sm-8 col-lg-8 d-flex flex-row justify-content-start gap-3 flex-nowrap").child(
                     //Page size selector
                     new div().show(this.showPageSize).class("input-group d-flex flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child(
-                        new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-list-ul"></i>`),
+                        new span().class(this.pageSizeSpanClass).child(`<i class="fa-solid fa-list-ul"></i>`),
 
-                        new select().class("form-select border-0 w-auto").child(
+                        new select().class(this.pageSizeClass).child(
                             new list(this.pageSizeOptions, size => new option().child(size))
                         ).value(this.pageSize, true)
                     ),
 
                     //Row count
-                    new span().show(this.showRowCount).class("bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0").innerHTML(this.filtered, filtered => filtered.length == 0 ? "No rows" : `${filtered.length} ${(filtered.length < 2 ? "row" : "rows")}`),
+                    new span().show(this.showRowCount).class(this.rowCountClass).innerHTML(this.filtered, filtered => filtered.length == 0 ? "No rows" : `${filtered.length} ${(filtered.length < 2 ? "row" : "rows")}`),
 
                     //Refresh button
-                    new button().class("btn btn-secondary").child(new i().class("fa-solid fa-arrows-rotate")).onClick(async () => {
+                    new button().show(this.showRefreshButton).class(this.refreshButtonClass).child(new i().class("fa-solid fa-arrows-rotate")).onClick(async () => {
                         if (this.refresh instanceof Function) {
                             this.loading = true;
 
@@ -292,9 +301,9 @@ class DataTable extends IgniteElement {
                 //Search box
                 new div().show(this.showSearchBox).class("col-12 col-sm-4 col-lg-4 d-flex flex-row justify-content-end gap-3 flex-wrap").child(
                     new div().class("input-group flex-nowrap w-auto flex-grow-1").child(
-                        new span().class("input-group-text border-0 bg-white").child(`<i class="fa-solid fa-magnifying-glass"></i>`),
+                        new span().class(this.searchBoxSpanClass).child(`<i class="fa-solid fa-magnifying-glass"></i>`),
 
-                        new input().class("form-control")
+                        new input().class(this.searchBoxClass)
                             .value(this.filterSearch, true)
                             .onEnter(() => this.filter())
                             .onChange(() => this.filter())
@@ -311,7 +320,7 @@ class DataTable extends IgniteElement {
             new div().class("mb-3").child(
                 new table().class("table table-light align-middle mb-0 table-borderless").child(
                     //Table columns
-                    new thead().class("table-dark").child(
+                    new thead().class(this.headClass).child(
                         new tr().child(
                             new list(this.columns, column => {
                                 return new th().class("text-nowrap").class(column.sortable, sortable => sortable ? "cursor-pointer" : null).attribute("scope", "col").child(
@@ -336,7 +345,7 @@ class DataTable extends IgniteElement {
                     ),
 
                     //Table rows
-                    new tbody().hide(this.loading).child(
+                    new tbody().class(this.bodyClass).hide(this.loading).child(
                         new pagination(this.filtered, this.pageSize, this.currentPage, row => new tr().child(new list(row.columns, column => new td().child(column))))
                     )
                 ),
@@ -393,7 +402,7 @@ class DataTable extends IgniteElement {
                 //Page jump to select
                 new div().show(this.showPageJumpTo).class("col-12 col-sm-3 col-lg-4 d-flex flex-row justify-content-end").child(
                     new div().class("input-group flex-nowrap w-auto flex-grow-1 flex-sm-grow-0").child(
-                        new select().class("form-select border-0 w-auto").child(
+                        new select().class(this.pageJumpToClass).child(
                             new population(
                                 this.pageCount,
                                 index => new option().attribute("selected", this.currentPage, currentPage => currentPage == index ? "selected" : null).value(index).innerText(`Page ${index + 1}`)
diff --git a/yes-no-dialog.js b/yes-no-dialog.js
index 02c71a9..16d4be6 100644
--- a/yes-no-dialog.js
+++ b/yes-no-dialog.js
@@ -1,6 +1,6 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
-import { IgniteTemplate, div, h2, h6, button } from "../ignite-html/ignite-template.js";
+import { IgniteTemplate, div, h2, h5, button } from "../ignite-html/ignite-template.js";
 
 class YesNoDialog extends IgniteElement {
     constructor() {
@@ -31,7 +31,7 @@ class YesNoDialog extends IgniteElement {
                             //Title
                             new h2().class("text-primary text-center mb-3").child(this.title),
 
-                            new h6().show(this.description, description => description != null && description != undefined).class("text-center mb-4").child(this.description),
+                            new h5().show(this.description, description => description != null && description != undefined).class("text-center mb-4").child(this.description),
 
                             //Yes and No button
                             new div().class("d-flex flex-row gap-3 w-100").child(