diff --git a/src/display/shared/header/components/HeaderLogoBlock.js b/src/display/shared/header/components/HeaderLogoBlock.js
index 44f3e578..48b06a50 100644
--- a/src/display/shared/header/components/HeaderLogoBlock.js
+++ b/src/display/shared/header/components/HeaderLogoBlock.js
@@ -26,9 +26,6 @@ const HeaderLogoBlock = (props) => {
 			>
 				☰
 			</NavbarToggler>
-			<Link href="/" className="d-none d-sm-inline-block navbar-brand" to="/">
-				RPTHREADTRACKER
-			</Link>
 			<NavbarToggler
 				className="d-md-down-none"
 				data-spec="header-logo-block-sidebar-toggler"
@@ -36,6 +33,9 @@ const HeaderLogoBlock = (props) => {
 			>
 				&#9776;
 			</NavbarToggler>
+			<Link href="/" className="d-none d-sm-inline-block navbar-brand" to="/">
+				RPTHREADTRACKER
+			</Link>
 		</div>
 	);
 };
diff --git a/src/display/shared/header/components/__tests__/__snapshots__/HeaderLogoBlock.spec.js.snap b/src/display/shared/header/components/__tests__/__snapshots__/HeaderLogoBlock.spec.js.snap
index fcef0c7f..faa1ef38 100644
--- a/src/display/shared/header/components/__tests__/__snapshots__/HeaderLogoBlock.spec.js.snap
+++ b/src/display/shared/header/components/__tests__/__snapshots__/HeaderLogoBlock.spec.js.snap
@@ -17,14 +17,6 @@ exports[`rendering snapshots should render valid snapshot 1`] = `
   >
     ☰
   </NavbarToggler>
-  <Link
-    className="d-none d-sm-inline-block navbar-brand"
-    href="/"
-    replace={false}
-    to="/"
-  >
-    RPTHREADTRACKER
-  </Link>
   <NavbarToggler
     className="d-md-down-none"
     data-spec="header-logo-block-sidebar-toggler"
@@ -34,5 +26,13 @@ exports[`rendering snapshots should render valid snapshot 1`] = `
   >
     ☰
   </NavbarToggler>
+  <Link
+    className="d-none d-sm-inline-block navbar-brand"
+    href="/"
+    replace={false}
+    to="/"
+  >
+    RPTHREADTRACKER
+  </Link>
 </div>
 `;
diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js
index 86e1f4fb..89c53c7e 100644
--- a/src/display/shared/sidebar/_styles.js
+++ b/src/display/shared/sidebar/_styles.js
@@ -2,22 +2,40 @@ import styled from 'styled-components';
 import colors from '../../../infrastructure/constants/colors';
 
 export default styled.div`
-	color: ${colors.GRAY_400};
-	background: ${colors.WHITE};
-	border-right: 1px solid ${colors.GRAY_200};
+	color: ${colors.GRAY_100};
+	background: ${colors.GRAY_900};
+	border-right: 1px solid ${colors.GRAY_400};
+  .light-theme & {
+	  color: ${colors.GRAY_400};
+	  background: ${colors.WHITE};
+    border-right: 1px solid ${colors.GRAY_200};
+  }
 	.nav {
 		.nav-title {
-			color: ${colors.GRAY_600}
+			color: ${colors.GRAY_100};
+      .light-theme & {
+        color: ${colors.GRAY_600}
+      }
 		}
 		.nav-item {
 			.nav-link {
-				color: ${colors.GRAY_600}
+				color: ${colors.GRAY_100};
+        .light-theme & {
+          color: ${colors.GRAY_600}
+        }
 				i {
-					color: ${colors.GRAY_600}
+					color: ${colors.GRAY_100}; 
+          .light-theme & {
+            color: ${colors.GRAY_600}
+          }
 				}
 				&.active {
-					background: ${colors.GRAY_050};
-					color: ${colors.GRAY_600};
+					background: ${colors.GRAY_600};
+					color: ${colors.GRAY_050};
+          .light-theme & {
+            background: ${colors.GRAY_050};
+            color: ${colors.GRAY_600};
+          }
 					i {
 						color: ${colors.LIGHT_BLUE};
 					}