diff --git a/resources/components/navigation.less b/resources/components/navigation.less
index 55f946c3..b8e1d63a 100644
--- a/resources/components/navigation.less
+++ b/resources/components/navigation.less
@@ -279,19 +279,20 @@
 #mw-sidebar-sitename {
 	position: fixed;
 	visibility: visible;
-	top: @sidebar-sitename-height + @header-height + @margin-side;
+	top: @header-height;
 	left: @margin-side;
 	font-size: 11px;
 	letter-spacing: 4px;
-	transform: translateY( 0 ) rotate( -90deg );
-	transform-origin: top left;
+	transform: translateY( 100% ) translateX( -100% ) rotate( -90deg );
+	transform-origin: top right;
 	transition: @transition-transform, @transition-opacity;
+	-webkit-font-smoothing: subpixel-antialiased;
 }
 
 // Nav up stuff
 .nav-up {
 	~ #mw-sidebar-sitename {
-		transform: translateY( -54px ) rotate( -90deg );
+		transform: translateY( -@header-height + @margin-side ) translateX( -100% ) rotate( -90deg );
 	}
 
 	#mw-header-menu-drawer-container {
@@ -354,7 +355,7 @@
 	}
 
 	.nav-up ~ #mw-sidebar-sitename {
-		transform: translateY( -54px ) rotate( 90deg );
+		transform: translateY( @header-height - @margin-side ) rotate( 90deg );
 	}
 
 	#mw-header-menu-drawer {
diff --git a/skin.json b/skin.json
index 0e6c790a..323d596b 100644
--- a/skin.json
+++ b/skin.json
@@ -1,7 +1,7 @@
 {
 	"name": "Citizen",
 	"namemsg": "skinname-citizen",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"author": "alistair3149",
 	"url": "https://github.com/StarCitizenTools/mediawiki-skins-Citizen",
 	"descriptionmsg": "citizen-desc",
diff --git a/skinStyles/ext.echo.ui.less b/skinStyles/ext.echo.ui.less
index 4e412280..adc2db31 100644
--- a/skinStyles/ext.echo.ui.less
+++ b/skinStyles/ext.echo.ui.less
@@ -43,3 +43,285 @@
 		}
 	}
 }
+
+@media ( prefers-color-scheme: dark ) {
+	/**
+  mw.echo.ui.CrossWikiUnreadFilterWidget.less
+   */
+	.mw-echo-ui-crossWikiNotificationItemWidget,
+	.mw-echo-ui-bundleNotificationItemWidget {
+		&-separator {
+			border-bottom: 1px solid @dark-bg-20;
+		}
+
+		&-group {
+			background-color: @dark-bg-10;
+		}
+
+		.mw-echo-ui-subGroupListWidget-header {
+			&-row-title {
+				color: @dark-text-80;
+			}
+		}
+	}
+
+	/**
+  mw.echo.ui.CrossWikiNotificationItemWidget.less
+   */
+	.mw-echo-ui-crossWikiUnreadFilterWidget {
+		border: 1px solid @dark-bg-30 !important;
+
+		&-subtitle {
+			color: @dark-text-70;
+		}
+	}
+
+	/**
+	mw.echo.ui.CrossWikiNotificationItemWidget.less
+	 */
+	.mw-echo-ui-datedSubGroupListWidget {
+		.mw-body-content &-title {
+			&-secondary {
+				color: @dark-text-70;
+			}
+		}
+
+		/**
+	mw.echo.ui.FooterNoticeWidget.less
+	 */
+		.mw-echo-ui-footerNoticeWidget {
+			border-bottom: 1px solid @dark-bg-30;
+		}
+	}
+
+	/**
+  mw.echo.ui.MenuItemWidget.less
+   */
+	.mw-echo-ui-menuItemWidget {
+		> .oo-ui-labelElement-label {
+			color: @dark-text-90;
+		}
+
+		&-dynamic-action {
+			&:hover {
+				background-color: @dark-bg-0;
+			}
+
+			.mw-echo-ui-menuItemWidget-description {
+				color: @dark-text-80;
+			}
+		}
+
+		.mw-echo-ui-actionMenuPopupWidget-menu:hover {
+			background-color: @dark-bg-20;
+		}
+	}
+
+	/**
+	mw.echo.ui.NotificationBadgeWidget.less
+	 */
+	.mw-echo-ui-notificationBadgeButtonPopupWidget {
+		&-popup {
+			> .oo-ui-popupWidget-popup {
+				> .oo-ui-popupWidget-head {
+					border-color: @dark-bg-30;
+				}
+
+				> .oo-ui-popupWidget-footer {
+					border-color: @dark-bg-30 !important;
+
+					.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
+						.oo-ui-buttonElement {
+							&:last-child {
+								border-color: @dark-bg-30 !important;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	mw.echo.ui.NotificationItemWidget.less
+	 */
+	.mw-echo-ui-notificationItemWidget {
+		background-color: @dark-bg-20;
+		border-color: @dark-bg-30;
+
+		&:hover {
+			background-color: @dark-bg-30;
+		}
+
+		&:last-child {
+			border-color: @dark-bg-30;
+		}
+
+		&-unread {
+			background-color: @dark-bg-0;
+
+			&:hover {
+				background-color: @dark-bg-10;
+			}
+		}
+
+		&-notify {
+			&-description {
+				color: @dark-text-80;
+			}
+		}
+
+		&-content {
+			&-message {
+				&-header {
+					color: @dark-text-100;
+				}
+
+				&-body {
+					color: @dark-text-70;
+				}
+			}
+
+			&-actions {
+				&-timestamp {
+					color: @dark-text-100;
+				}
+			}
+		}
+
+		&-bundled {
+			.mw-echo-ui-notificationItemWidget-content {
+				.mw-echo-ui-notificationItemWidget {
+					&-content-message {
+						&-header {
+							em {
+								color: @dark-text-70;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	@-webkit-keyframes unseen-fadeout-to-unread {
+		from {
+			background-color: @dark-bg-30;
+		}
+
+		to {
+			background-color: @dark-bg-0;
+		}
+	}
+
+	@keyframes unseen-fadeout-to-unread {
+		from {
+			background-color: @dark-bg-30;
+		}
+
+		to {
+			background-color: @dark-bg-0;
+		}
+	}
+
+	@-webkit-keyframes unseen-fadeout-to-read {
+		from {
+			background-color: @dark-bg-30;
+		}
+
+		to {
+			background-color: @dark-bg-20;
+		}
+	}
+
+	@keyframes unseen-fadeout-to-read {
+		from {
+			background-color: @dark-bg-30;
+		}
+
+		to {
+			background-color: @dark-bg-20;
+		}
+	}
+
+	/**
+	mw.echo.ui.NotificationsInboxWidget.less
+	 */
+	.mw-echo-ui-notificationsInboxWidget {
+		&-toolbarWrapper {
+			background: @dark-bg-0 !important;
+		}
+	}
+
+	/**
+	mw.echo.ui.NotificationsListWidget.less
+	 */
+	.mw-echo-ui-notificationsListWidget {
+		> a,
+		&:hover > a {
+			color: @dark-text-80;
+		}
+
+		&:not( :hover ) a,
+		#p-personal &:not( :hover ) a.new {
+			color: @dark-text-80;
+		}
+	}
+
+	/**
+	mw.echo.ui.PageNotificationsOptionWidget.less
+	 */
+	.mw-echo-ui-pageNotificationsOptionWidget {
+		&.oo-ui-optionWidget {
+			&-selected {
+				background-color: @dark-bg-30 !important;
+			}
+
+			&-highlighted {
+				background-color: @dark-bg-10 !important;
+				color: @dark-text-100 !important;
+			}
+		}
+
+		&-label-count {
+			background-color: @dark-bg-20;
+			color: @dark-text-80;
+		}
+	}
+
+	/**
+	mw.echo.ui.PlaceholderItemWidget.less
+	 */
+	.mw-echo-ui-placeholderItemWidget {
+		background-color: @dark-bg-20;
+	}
+
+	/**
+	mw.echo.ui.ToggleReadCircleButtonWidget.less
+	 */
+	.mw-echo-ui-toggleReadCircleButtonWidget {
+		&-circle {
+			&-unread {
+				background-color: @dark-bg-20;
+				border-color: @dark-bg-60;
+			}
+		}
+
+		&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
+			&-unread {
+				background-color: @dark-bg-30;
+			}
+		}
+	}
+
+	/**
+	Icons
+	 */
+	.mw-echo-ui-notificationsInboxWidget,
+	.mw-echo-ui-overlay {
+		.oo-ui-indicatorElement-indicator,
+		.oo-ui-iconElement-icon {
+			filter: invert( 1 ) hue-rotate( 180deg );
+		}
+	}
+}
diff --git a/skinStyles/ext.visualEditor.core.less b/skinStyles/ext.visualEditor.core.less
index b691ba95..c2f1d2be 100644
--- a/skinStyles/ext.visualEditor.core.less
+++ b/skinStyles/ext.visualEditor.core.less
@@ -11,7 +11,7 @@
 	}
 
 	#mw-sidebar-sitename {
-		top: @sidebar-sitename-height + @header-height * 2 + @margin-side;
+		top: @header-height + @margin-side + 42px;
 	}
 
 	#page-tools {
diff --git a/skinStyles/mediawiki.htmlform.ooui.styles.less b/skinStyles/mediawiki.htmlform.ooui.styles.less
index dc462ae5..cf246546 100644
--- a/skinStyles/mediawiki.htmlform.ooui.styles.less
+++ b/skinStyles/mediawiki.htmlform.ooui.styles.less
@@ -16,5 +16,13 @@
 				background-color: @dark-bg-20;
 			}
 		}
+
+		.oo-ui-fieldLayout-header {
+			.oo-ui-buttonElement-button {
+				.oo-ui-iconElement-icon {
+					filter: invert( 1 ) hue-rotate( 180deg );
+				}
+			}
+		}
 	}
 }
diff --git a/skinStyles/oojs-ui-core.less b/skinStyles/oojs-ui-core.less
index 42b22287..aa6337ca 100644
--- a/skinStyles/oojs-ui-core.less
+++ b/skinStyles/oojs-ui-core.less
@@ -65,6 +65,7 @@
 
 @media ( prefers-color-scheme: dark ) {
 	.oo-ui-pendingElement-pending {
+    /* Find a better way to replace the progress bar */
 		background-color: @dark-bg-20 !important;
 		background-image: -webkit-linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent ) !important;
 		background-image: -moz-linear-gradient( 135deg, @dark-bg-0 25%, transparent 25%, transparent 50%, @dark-bg-0 50%, @dark-bg-0 75%, transparent 75%, transparent ) !important;
@@ -108,12 +109,12 @@
 	.oo-ui-buttonElement-framed {
 		&.oo-ui-widget-enabled {
 			> .oo-ui-buttonElement-button {
-				background-color: @dark-bg-10;
+				background-color: @dark-bg-50;
 				color: @dark-text-90;
 				border-color: @dark-bg-50;
 
 				&:hover {
-					background-color: @dark-bg-0;
+					background-color: @dark-bg-40;
 					color: @dark-text-80;
 					border-color: @dark-bg-50;
 				}
@@ -129,7 +130,7 @@
 			&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
 				background-color: @dark-bg-30;
 				color: @dark-text-90;
-				border-color: @dark-bg-60;
+				border-color: @dark-bg-60 !important;
 			}
 		}
 
@@ -176,7 +177,7 @@
 	}
 
 	.oo-ui-popupWidget-popup {
-		background-color: @dark-bg-0;
+		background-color: @dark-bg-50;
 		border-color: @dark-bg-50;
 	}
 
@@ -190,7 +191,7 @@
 			}
 
 			&:after {
-				border-bottom-color: @dark-bg-0;
+				border-bottom-color: @dark-bg-50;
 			}
 		}
 	}