diff --git a/stylesheets/Main.scss b/stylesheets/Main.scss
index 4eaa97acc30..6b492cf170f 100644
--- a/stylesheets/Main.scss
+++ b/stylesheets/Main.scss
@@ -12,18 +12,22 @@
 @use "commons/BattleRoyale/PanelTable";
 @use "commons/Bracket";
 @use "commons/Brackets";
+@use "commons/BreadCrumbs";
 @use "commons/Carousel";
 @use "commons/Colours";
 @use "commons/Crosstable";
-@use "commons/Dialog";
 @use "commons/DivTable";
 @use "commons/Dropdown";
 @use "commons/FilterButtons";
 @use "commons/Fountain";
 @use "commons/Grid";
 @use "commons/GroupTableLeague";
+@use "commons/Headings";
 @use "commons/Icons";
+@use "commons/Images";
 @use "commons/Infobox";
+@use "commons/Jquery";
+@use "commons/Dialog";
 @use "commons/Label";
 @use "commons/Mainpage";
 @use "commons/Matchseries";
diff --git a/stylesheets/commons/BreadCrumbs.scss b/stylesheets/commons/BreadCrumbs.scss
new file mode 100644
index 00000000000..6a81a1f2143
--- /dev/null
+++ b/stylesheets/commons/BreadCrumbs.scss
@@ -0,0 +1,23 @@
+/* hide subpages (breadcrumbs) in mainspace and templatespace */
+body.ns-0,
+body.ns-10 {
+	.content-sub .subpages {
+		display: none;
+	}
+}
+
+ol.breadcrumb {
+	margin-left: -0.75rem;
+
+	.theme--light & {
+		background-color: var( --clr-surface-5 );
+	}
+
+	.theme--dark & {
+		background-color: var( --clr-secondary-16 );
+	}
+
+	.breadcrumb-item + .breadcrumb-item::before {
+		color: var( --clr-on-background );
+	}
+}
diff --git a/stylesheets/commons/Headings.scss b/stylesheets/commons/Headings.scss
new file mode 100644
index 00000000000..d0d613e720e
--- /dev/null
+++ b/stylesheets/commons/Headings.scss
@@ -0,0 +1,109 @@
+.mw-heading.mw-heading1,
+.mw-heading.mw-heading2,
+.mw-heading.mw-heading3,
+.mw-heading.mw-heading4,
+.mw-heading.mw-heading5,
+.mw-heading.mw-heading6 {
+	background: none repeat scroll 0 0 rgba( 0, 0, 0, 0 );
+	border-bottom: 0.0625rem solid;
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	padding-bottom: 0;
+
+	.theme--light & {
+		border-bottom-color: var( --clr-secondary-90 );
+	}
+
+	.theme--dark & {
+		border-bottom-color: var( --clr-secondary-16 );
+	}
+}
+
+.mw-heading.mw-heading1 h1,
+.mw-heading.mw-heading2 h2,
+.mw-heading.mw-heading3 h3,
+.mw-heading.mw-heading4 h4,
+.mw-heading.mw-heading5 h5,
+.mw-heading.mw-heading6 h6,
+.mw-heading.mw-heading1 .h1,
+.mw-heading.mw-heading2 .h2,
+.mw-heading.mw-heading3 .h3,
+.mw-heading.mw-heading4 .h4,
+.mw-heading.mw-heading5 .h5,
+.mw-heading.mw-heading6 .h6,
+h1#firstHeading,
+#mw-pages h2,
+#mw-subcategories h2,
+.mw-category-group h3 {
+	font-weight: 500;
+
+	.theme--light & {
+		color: var( --clr-wiki-theme-40 );
+	}
+
+	.theme--dark & {
+		color: var( --clr-wiki-theme-90 );
+	}
+}
+
+.mw-heading.mw-heading1 h1,
+h1#firstHeading {
+	font-size: 1.875rem;
+	line-height: 1.1;
+}
+
+.mw-heading.mw-heading2 h2 {
+	font-size: 1.625rem;
+	line-height: 1.1;
+}
+
+.mw-heading.mw-heading3,
+.mw-heading.mw-heading4,
+.mw-heading.mw-heading5,
+.mw-heading.mw-heading6 {
+	border-bottom: medium none;
+}
+
+.mw-heading.mw-heading3 h3 {
+	font-size: 1.5rem;
+}
+
+.mw-heading.mw-heading4 h4 {
+	font-size: 1.25rem;
+}
+
+.mw-heading.mw-heading5 h5 {
+	font-size: 1.125rem;
+}
+
+.mw-heading.mw-heading6 h6 {
+	font-size: 1rem;
+}
+
+h1#firstHeading,
+#mw-pages h2,
+#mw-subcategories h2,
+.mw-heading.mw-heading1,
+.mw-heading.mw-heading2 {
+	border-bottom: 0.125rem solid;
+
+	.theme--light & {
+		border-color: var( --clr-secondary-90 );
+	}
+
+	.theme--dark & {
+		border-color: var( --clr-secondary-16 );
+	}
+}
+
+.mw-heading.mw-heading1 h1 .mw-editsection {
+	padding-top: 1.125rem;
+}
+
+.mw-heading.mw-heading2 h2 .mw-editsection {
+	padding-top: 0.9375rem;
+}
+
+.mw-heading.mw-heading3 h3 .mw-editsection {
+	padding-top: 0.8125rem;
+}
diff --git a/stylesheets/commons/Images.scss b/stylesheets/commons/Images.scss
new file mode 100644
index 00000000000..db63d596aa1
--- /dev/null
+++ b/stylesheets/commons/Images.scss
@@ -0,0 +1,62 @@
+/* restrict maximum image size in content */
+.img-responsive img,
+#file img {
+	max-width: 100%;
+	height: auto;
+}
+
+.filehistory a img,
+#file img:hover {
+	.theme--light & {
+		background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v16h8V8H0z' opacity='0.7' fill='%23cccccc'/%3E%3C/svg%3E" ) repeat;
+	}
+
+	.theme--dark & {
+		background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v16h8V8H0z' opacity='0.7' fill='%23424242'/%3E%3C/svg%3E" ) repeat;
+	}
+}
+
+/* thumbnails */
+.thumbcaption {
+	border: 0 solid var( --clr-on-surface );
+	line-height: 1.4;
+	padding: 0.1875rem;
+	font-size: 94%;
+	background-color: var( --clr-surface );
+	margin-top: 0.3125rem;
+}
+
+div.thumbinner {
+	background-color: var( --clr-surface );
+	border-top: 0.125rem solid var( --clr-wiki-primary );
+	border-bottom: 0.125rem solid var( --clr-wiki-primary );
+	border-right: 0;
+	border-left: 0;
+	padding: 0.625rem 0;
+	margin: 0;
+}
+
+@media ( max-width: 575.98px ) {
+	div.tright,
+	div.floatright,
+	table.floatright {
+		float: none;
+	}
+
+	.thumb {
+		margin: 0;
+	}
+
+	.thumb img {
+		width: 100%;
+		height: auto;
+	}
+}
+
+.thumbimage {
+	border: 0;
+}
+
+.tright .thumbinner {
+	min-width: 6.25rem;
+}
diff --git a/stylesheets/commons/Jquery.scss b/stylesheets/commons/Jquery.scss
new file mode 100644
index 00000000000..b448100a455
--- /dev/null
+++ b/stylesheets/commons/Jquery.scss
@@ -0,0 +1,127 @@
+div.ui-widget {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	font-size: 0.9375rem;
+}
+
+.theme--dark div.ui-widget-header span.ui-icon {
+	filter: invert( 100% ) sepia( 100% ) saturate( 0% ) hue-rotate( 47deg ) brightness( 103% );
+}
+
+div.ui-widget-header {
+	background: transparent;
+	border: 0;
+	color: var( --clr-on-surface );
+
+	.ui-state-hover,
+	.ui-widget-content .ui-state-hover,
+	.ui-widget-header .ui-state-hover,
+	.ui-state-focus,
+	.ui-widget-content .ui-state-focus,
+	.ui-widget-header .ui-state-focus {
+		background: transparent;
+
+		.theme--light & {
+			border-color: var( --clr-secondary-44 );
+		}
+
+		.theme--dark & {
+			border-color: var( --clr-secondary-70 );
+		}
+	}
+}
+
+div.ui-widget-content {
+	background-color: var( --clr-surface-3 );
+	color: var( --clr-on-surface );
+	background-image: none;
+
+	.theme--light & {
+		border-color: var( --clr-on-surface-light-primary-8 );
+	}
+
+	.theme--dark & {
+		border-color: var( --clr-on-surface-dark-primary-8 );
+	}
+
+	div.ui-dialog-buttonpane {
+		.theme--light & {
+			border-color: var( --clr-on-surface-light-primary-8 ) !important;
+		}
+
+		.theme--dark & {
+			border-color: var( --clr-on-surface-dark-primary-8 ) !important;
+		}
+	}
+
+	input {
+		background-color: var( --clr-surface );
+		color: var( --clr-on-surface );
+		border-radius: 0.25rem;
+		min-height: 2rem;
+
+		.theme--light & {
+			border: 0.0625rem solid var( --clr-secondary-44 );
+		}
+
+		.theme--dark & {
+			border: 0.0625rem solid var( --clr-secondary-70 );
+		}
+	}
+
+	select {
+		background-color: var( --clr-surface );
+		color: var( --clr-on-surface );
+		border-radius: 0.25rem;
+		min-height: 2rem;
+	}
+
+	button.ui-button {
+		border-radius: 6.25rem;
+		font-size: 0.875rem;
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+		border-width: 0.0625rem;
+		background: transparent;
+		color: var( --clr-primary );
+		min-height: 2.5rem;
+
+		.theme--light & {
+			border-color: var( --clr-secondary-44 );
+		}
+
+		.theme--dark & {
+			border-color: var( --clr-secondary-70 );
+		}
+
+		&:hover {
+			color: var( --clr-primary );
+
+			.theme--light & {
+				background-color: var( --clr-on-surface-light-primary-8 );
+			}
+
+			.theme--dark & {
+				background-color: var( --clr-on-surface-dark-primary-8 );
+			}
+		}
+	}
+}
+
+.client-js .sortable:not( .jquery-tablesorter ) > * > tr:first-child > th:not( .unsortable ),
+.jquery-tablesorter th.headerSort {
+	.theme--dark & {
+		background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDIxIDkiPg0KCTxwYXRoIGQ9Im0xNC41IDUtNCA0LTQtNHptMC0xLTQtNC00IDR6IiBmaWxsPSIjZmZmZmZmIi8+DQo8L3N2Zz4= );
+	}
+}
+
+.jquery-tablesorter th.headerSortUp {
+	.theme--dark & {
+		background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjEiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDIxIDQiPg0KCTxwYXRoIGQ9Im02LjUgNCA0LTQgNCA0eiIgZmlsbD0iI2ZmZmZmZiIvPg0KPC9zdmc+ );
+	}
+}
+
+.jquery-tablesorter th.headerSortDown {
+	.theme--dark & {
+		background-image: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjEiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDIxIDQiPg0KCTxwYXRoIGQ9Im0xNC41IDAtNCA0LTQtNHoiIGZpbGw9IiNmZmZmZmYiLz4NCjwvc3ZnPg== );
+	}
+}
diff --git a/stylesheets/commons/Miscellaneous.scss b/stylesheets/commons/Miscellaneous.scss
index 3916c85b756..f46abd0d225 100644
--- a/stylesheets/commons/Miscellaneous.scss
+++ b/stylesheets/commons/Miscellaneous.scss
@@ -22,10 +22,29 @@ Template(s): Documentation
 Author(s): FO-nTTaX
 *******************************************************************************/
 .documentation {
+	border: 0.0625rem solid;
 	clear: both;
-	border: 1px solid #aaaaaa;
-	background-color: #ecfcf4;
-	padding: 5px;
+	padding: 0.3125rem;
+
+	.theme--light & {
+		background-color: var( --clr-atlantis-90 );
+		border-color: var( --clr-atlantis-10 );
+	}
+
+	.theme--dark & {
+		background-color: var( --clr-atlantis-80 );
+		border-color: var( --clr-atlantis-20 );
+	}
+
+	h2 {
+		.theme--light & {
+			border-color: var( --clr-atlantis-10 );
+		}
+
+		.theme--dark & {
+			border-color: var( --clr-atlantis-20 );
+		}
+	}
 }
 
 /*******************************************************************************
@@ -194,11 +213,12 @@ Author(s): FO-nTTaX, Elysienna
 	animation-duration: 0.4s;
 	animation-fill-mode: forwards;
 	transform: scale( 0 );
+	border-radius: 0.5rem;
 
 	&--tooltip {
 		background-color: #ffffff;
 		position: absolute;
-		color: #676767;
+		color: var( --clr-secondary-39 );
 		border-radius: 0.25rem;
 		font-size: 0.75rem;
 		font-family: "Open Sans", sans-serif;
@@ -229,7 +249,7 @@ Author(s): FO-nTTaX, Elysienna
 			height: 0;
 			border-top: 4px solid transparent;
 			border-bottom: 4px solid transparent;
-			border-right: 5px solid #ffffff;
+			border-right: 5px solid var( --clr-primary-100 );
 		}
 	}
 
@@ -2859,3 +2879,22 @@ Slightly transparent imagelabel on POIDraft
 		background-color: rgba( 0, 25, 51, 0.75 );
 	}
 }
+
+// resources/styles/components/_catlinks.scss
+.catlinks {
+	background-color: transparent;
+
+	.theme--light & {
+		border: 0.0625rem solid var( --clr-on-surface-light-primary-8 );
+	}
+
+	.theme--dark & {
+		border: 0.0625rem solid var( --clr-on-surface-dark-primary-8 );
+	}
+}
+
+// resources/styles/components/_fieldbox.scss
+body .fieldBox {
+	background: var( --clr-surface-2 );
+	color: var( --clr-on-surface );
+}
diff --git a/stylesheets/commons/Navbox.scss b/stylesheets/commons/Navbox.scss
index f93c51f3a5b..29b7ab3b2d8 100644
--- a/stylesheets/commons/Navbox.scss
+++ b/stylesheets/commons/Navbox.scss
@@ -129,3 +129,47 @@ tr + tr > .navbox-list {
 		display: none;
 	}
 }
+
+.navbox {
+	.theme--light & {
+		background-color: var( --clr-surface-4 );
+	}
+
+	.theme--dark & {
+		background-color: var( --clr-secondary-16 );
+	}
+
+	&-title {
+		.theme--light & {
+			background-color: var( --clr-wiki-primary-container );
+		}
+
+		.theme--dark & {
+			background-color: var( --clr-wiki-theme-20 );
+		}
+	}
+
+	&-group {
+		.theme--light & {
+			background-color: var( --clr-wiki-primary-container );
+		}
+
+		.theme--dark & {
+			background-color: var( --clr-wiki-theme-20 );
+		}
+	}
+
+	&-list {
+		.theme--light & {
+			border-top-color: var( --clr-on-surface-light-primary-8 );
+			border-left-color: var( --clr-on-surface-light-primary-8 );
+			background-color: var( --clr-surface-4 );
+		}
+
+		.theme--dark & {
+			border-top-color: var( --clr-secondary-25 );
+			border-left-color: var( --clr-secondary-25 );
+			background-color: var( --clr-secondary-16 );
+		}
+	}
+}
diff --git a/stylesheets/commons/Tables.scss b/stylesheets/commons/Tables.scss
index f672d32e630..b9ddabb4eeb 100644
--- a/stylesheets/commons/Tables.scss
+++ b/stylesheets/commons/Tables.scss
@@ -8,16 +8,62 @@ Author(s): FO-nTTaX, salle
 	overflow-x: auto;
 }
 
+.table-full-width {
+	width: 100%;
+}
+
 .wikitable {
 	margin-bottom: 1rem;
-	background-color: var( --table-background-color, var( --clr-surface-5, #ffffff ) ) !important;
-	border: 0.0625rem solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+	color: var( --clr-on-surface );
+
+	.theme--light & {
+		border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+		background-color: var( --clr-surface-1 );
+	}
+
+	.theme--dark & {
+		border: 0.0625rem solid var( --clr-secondary-25 ) !important;
+		background-color: var( --clr-secondary-7 );
+	}
+
+	@media ( hover: hover ) {
+		a:visited:hover {
+			.theme--light & {
+				color: var( --clr-primary-30 );
+			}
+
+			.theme--dark & {
+				color: var( --clr-primary-80 );
+			}
+		}
+	}
+
+	a:visited {
+		.theme--light & {
+			color: var( --clr-primary-30 );
+		}
+
+		.theme--dark & {
+			color: var( --clr-primary-80 );
+		}
+	}
 }
 
 .wikitable > tr > th,
 .wikitable > * > tr > th {
-	background-color: #eaecf0;
 	text-align: center;
+
+	@media screen {
+		color: unset;
+	}
+
+	.theme--light & {
+		background-color: var( --clr-surface-2 );
+	}
+
+	.theme--dark & {
+		background-color: var( --clr-secondary-16 );
+	}
 }
 
 .wikitable > tr > th,
@@ -26,27 +72,53 @@ Author(s): FO-nTTaX, salle
 .wikitable > tr > td,
 .wikitable > thead > tr > td,
 .wikitable > tbody > tr > td {
-	padding: 5px;
+	padding: 0.3125rem;
 	vertical-align: middle;
-	border: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+
+	.theme--light & {
+		border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+	}
+
+	.theme--dark & {
+		border: 0.0625rem solid var( --clr-secondary-25 ) !important;
+	}
 }
 
 .wikitable > thead > tr > th {
 	vertical-align: middle;
-	border-bottom: 2px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+
+	.theme--light & {
+		border-bottom: 0.125rem solid var( --clr-on-surface-light-primary-8 ) !important;
+	}
+
+	.theme--dark & {
+		border-bottom: 0.125rem solid var( --clr-secondary-25 ) !important;
+	}
 }
 
 .wikitable > thead > tr > th,
 .wikitable > thead > tr > td {
-	border-bottom-width: 2px !important;
+	border-bottom-width: 0.125rem !important;
 }
 
 .wikitable > tbody + tbody {
-	border-top: 2px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+	.theme--light & {
+		border-top: 0.125rem solid var( --clr-on-surface-light-primary-8 ) !important;
+	}
+
+	.theme--dark & {
+		border-top: 0.125rem solid var( --clr-secondary-25 ) !important;
+	}
 }
 
 .wikitable > tfoot > tr > th {
-	border-color: var( --table-border-color, #bbbbbb );
+	.theme--light & {
+		border-color: var( --clr-on-surface-light-primary-8 );
+	}
+
+	.theme--dark & {
+		border-color: var( --clr-secondary-25 );
+	}
 }
 
 table.wikitable-striped {
@@ -102,8 +174,15 @@ table.wikitable-striped {
 .wikitable.wikitable-bordered > tr > td:not( :first-child ),
 .wikitable.wikitable-bordered > tr > th:not( :last-child ),
 .wikitable.wikitable-bordered > tr > td:not( :last-child ) {
-	border-left: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
-	border-right: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+	.theme--light & {
+		border-left: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+		border-right: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+	}
+
+	.theme--dark & {
+		border-left: 0.0625rem solid var( --clr-secondary-25 ) !important;
+		border-right: 0.0625rem solid var( --clr-secondary-25 ) !important;
+	}
 }
 
 .panel-box table.wikitable-striped,
@@ -135,8 +214,15 @@ table.wikitable-striped {
 }
 
 table.wikitable.wikitable-striped.infobox_matches_content {
-	border-top: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
-	border-bottom: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+	.theme--light & {
+		border-top: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+		border-bottom: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+	}
+
+	.theme--dark & {
+		border-top: 0.0625rem solid var( --clr-secondary-25 ) !important;
+		border-bottom: 0.0625rem solid var( --clr-secondary-25 ) !important;
+	}
 }
 
 .panel-box .wikitable.wikitable-striped > tbody > tr:nth-of-type( 2n + 1 ),
@@ -154,32 +240,62 @@ table.crosstable {
 .matchpage {
 	table.headtohead tr {
 		& > td {
-			border-top: 1px dotted var( --table-border-color, var( --clr-border, #bbbbbb ) );
+			.theme--light & {
+				border-top: 0.0625rem dotted var( --clr-on-surface-light-primary-8 );
+			}
+
+			.theme--dark & {
+				border-top: 0.0625rem dotted var( --clr-secondary-25 );
+			}
 		}
 
 		&.firstmap > td {
-			border-top: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) );
+			.theme--light & {
+				border-top: 0.0625rem solid var( --clr-on-surface-light-primary-8 );
+			}
+
+			.theme--dark & {
+				border-top: 0.0625rem solid var( --clr-secondary-25 );
+			}
 		}
 	}
 
 	table.stats,
 	table.maps {
 		tr > td {
-			border-top: 1px dotted var( --table-border-color, var( --clr-border, #bbbbbb ) );
+			.theme--light & {
+				border-top: 0.0625rem dotted var( --clr-on-surface-light-primary-8 );
+			}
+
+			.theme--dark & {
+				border-top: 0.0625rem dotted var( --clr-secondary-25 );
+			}
 		}
 
 		tr:nth-child( 2 ) > td {
-			border-top: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) );
+			.theme--light & {
+				border-top: 0.0625rem solid var( --clr-on-surface-light-primary-8 );
+			}
+
+			.theme--dark & {
+				border-top: 0.0625rem solid var( --clr-secondary-25 );
+			}
 		}
 	}
 
 	table.streams tr > td:last-of-type {
-		border-right: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important;
+		.theme--light & {
+			border-right: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+		}
+
+		.theme--dark & {
+			border-right: 0.0625rem solid var( --clr-secondary-25 ) !important;
+		}
 	}
 }
 
 div.table-responsive + div.table-responsive > table.matchlist {
-	margin-top: -1px !important;
+	margin-top: -0.0625rem !important;
 }
 
 /* Background colors */
@@ -231,3 +347,45 @@ div.table-responsive + div.table-responsive > table.matchlist {
 .theme--dark .wikitable .wikitable--dire-bg {
 	background-color: var( --clr-california-20 );
 }
+
+// Code from lakesideview
+
+/** Bootstrap overwrite **/
+.table-bordered {
+	th,
+	td {
+		.theme--light & {
+			border: 0.0625rem solid var( --clr-on-surface-light-primary-8 ) !important;
+		}
+
+		.theme--dark & {
+			border: 0.0625rem solid var( --clr-secondary-25 ) !important;
+		}
+	}
+}
+
+.table {
+	width: auto;
+	color: var( --clr-on-background );
+
+	.theme--light & {
+		border: 0.0625rem solid var( --clr-on-surface-light-primary-8 );
+	}
+
+	.theme--dark & {
+		border: 0.0625rem solid var( --clr-secondary-25 );
+	}
+
+	th {
+		text-align: center;
+	}
+
+	th,
+	td {
+		vertical-align: middle;
+	}
+}
+
+caption {
+	caption-side: top;
+}
diff --git a/stylesheets/commons/Tabs.scss b/stylesheets/commons/Tabs.scss
index fbc71ed55df..aa3e0123058 100644
--- a/stylesheets/commons/Tabs.scss
+++ b/stylesheets/commons/Tabs.scss
@@ -92,6 +92,7 @@ html.client-nojs .tabs-content > div:not( .active ) {
 		border: unset !important;
 		margin: 0 !important;
 		list-style: none;
+		gap: 0;
 
 		&::-webkit-scrollbar {
 			display: none;
@@ -118,6 +119,7 @@ html.client-nojs .tabs-content > div:not( .active ) {
 				background-color: transparent !important;
 				border-radius: $tabs-border-radius $tabs-border-radius 0 0;
 				height: 100%;
+				position: relative;
 
 				// Icons within tabs
 				i,
@@ -347,24 +349,72 @@ html.client-nojs .tabs-content > div:not( .active ) {
 
 	.nav-tabs {
 		margin-bottom: 0;
+		border-bottom: 0.125rem solid;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.125rem;
+
+		.theme--light & {
+			border-bottom-color: var( --clr-secondary-90 );
+		}
+
+		.theme--dark & {
+			border-bottom-color: var( --clr-secondary-16 );
+		}
+
+		@at-root .mw-content-ltr &,
+		.mw-content-rtl .mw-content-ltr & {
+			margin: 0.25rem 0;
+		}
 
 		li {
 			float: left;
-			border: 2px solid;
-			border-bottom: 0 !important;
 			cursor: pointer;
+			margin: 0.125rem 0 0 0;
+			border: 0.125rem solid;
+			border-bottom: 0 !important;
+			height: 2.125rem;
+
+			.theme--light & {
+				background-color: var( --clr-primary-96 );
+				border-color: var( --clr-secondary-90 );
+			}
+
+			.theme--dark & {
+				background-color: var( --clr-secondary-9 );
+				border-color: var( --clr-secondary-16 );
+			}
 
 			&:not( .active ) {
 				cursor: pointer;
 			}
 
+			.tabs-portal & {
+				height: 2.875rem;
+			}
+
+			&:last-of-type {
+				margin-right: 0;
+			}
+
 			a {
 				display: block;
 				padding: 0.3125rem 0.625rem;
-				line-height: 1.42857143;
 				border: 1px solid transparent;
 				outline: 0;
 				position: relative;
+				height: 2rem;
+
+				&:focus-visible {
+					text-decoration: underline;
+				}
+
+				@media ( hover: hover ) {
+					&:hover,
+					&:visited:hover {
+						text-decoration: none;
+					}
+				}
 			}
 
 			// Specific alignment for team templates in static tabs
@@ -386,7 +436,19 @@ html.client-nojs .tabs-content > div:not( .active ) {
 			}
 
 			&.active {
-				background-color: var( --clr-background );
+				margin-bottom: -0.125rem;
+				height: 2.25rem;
+				font-weight: bold;
+
+				.theme--light & {
+					background-color: var( --clr-secondary-100 );
+					color: var( --clr-secondary-8 );
+				}
+
+				.theme--dark & {
+					background-color: var( --clr-secondary-7 );
+					color: var( --clr-secondary-100 );
+				}
 
 				.selflink {
 					background-color: unset !important;
@@ -394,6 +456,7 @@ html.client-nojs .tabs-content > div:not( .active ) {
 
 				a {
 					background-color: unset !important;
+					color: currentcolor;
 				}
 			}
 		}