diff --git a/bfrontend/src/API/Gateway/GatewayConnection.js b/bfrontend/src/API/Gateway/GatewayConnection.js
index 1fc225c..a1dbb99 100644
--- a/bfrontend/src/API/Gateway/GatewayConnection.js
+++ b/bfrontend/src/API/Gateway/GatewayConnection.js
@@ -3,7 +3,6 @@ import logger from "../../Util/Logger";
 const { log: logGateway } = logger([ "Gateway" ]);
 const { log: logRtc } = logger([ "Gateway", "RTC" ]);
 
-
 const opcodes = {
     0: { name: "HELLO", data: "JSON" },
     1: { name: "YOO", data: "JSON" },
diff --git a/bfrontend/src/Styles/Components/Button.scss b/bfrontend/src/Styles/Components/Button.scss
index 39a374b..cf5f5a3 100644
--- a/bfrontend/src/Styles/Components/Button.scss
+++ b/bfrontend/src/Styles/Components/Button.scss
@@ -14,11 +14,10 @@
     &-channel {
         @extend .button;
 
+        background: var(--channel-button-background);
         border-radius: var(--channel-button-border-radius);
         width: 200px;
         min-height: 40px;
-        margin: 4px;
-        padding: 2px;
         color: var(--darker-text-color);
     }
 
diff --git a/bfrontend/src/Styles/Components/Card.scss b/bfrontend/src/Styles/Components/Card.scss
index 61766d9..217d3b5 100644
--- a/bfrontend/src/Styles/Components/Card.scss
+++ b/bfrontend/src/Styles/Components/Card.scss
@@ -5,8 +5,6 @@
     border-radius: var(--default-border-radius);
 }
 
-// hh
-
 .card {
     @include card;
 }
@@ -14,10 +12,9 @@
 .bar-card {
     @include card;
 
-    background-color: var(--channel-top-bar-color);
     height: 32px;
-    padding: 8px;
-    border-bottom: var(--bar-card-border-bottom);
+    padding: 12px;
+    box-shadow: var(--bar-card-box-shadow);
     display: flex;
     align-items: center;
     justify-content: left;
diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss
index 2578242..c4b32aa 100644
--- a/bfrontend/src/Styles/Components/Containers.scss
+++ b/bfrontend/src/Styles/Components/Containers.scss
@@ -12,13 +12,12 @@
     @include fancy-scrollbar-firefox;
     @include card;
 
-    background-color: var(--channel-list-background-color);
+    background-color: var(--sidebar-background-color);
 
     display: flex;
     flex-direction: column;
     overflow: auto;
     overflow-x: hidden;
-    min-width: 235px;
 }
 
 .channel-list {
@@ -42,6 +41,7 @@
 .channel-message-panel {
     display: flex;
     flex-direction: column;
+    padding: 15px;
     background-color: var(--channel-view-container-color);
 }
 
diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss
index bc54201..472b62d 100644
--- a/bfrontend/src/Styles/Components/Message.scss
+++ b/bfrontend/src/Styles/Components/Message.scss
@@ -3,8 +3,7 @@
 
     display: flex;
     flex-direction: row;
-    margin: 3px;
-    margin-left: 1rem;
+    margin: 2px;
     padding: 1px;
     border-radius: var(--channel-message-border-radius);
     background-color: var(--channel-message-color);
diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss
index efe384a..6988b41 100644
--- a/bfrontend/src/Styles/root.scss
+++ b/bfrontend/src/Styles/root.scss
@@ -1,9 +1,9 @@
 :root {
-    --background-color: hsl(0, 0%, 1%);
+    --background-color: hsl(230, 12%, 15%);
     --default-text-color: hsl(0, 0%, 79%);
     --darker-text-color: hsl(0, 0%, 53%);
-    --card-accent-color: hsl(0, 0%, 10%);
-    --card-accent-color-dark: hsl(0, 0%, 5%);
+    --card-accent-color: hsl(230, 12%, 18%);
+    --card-accent-color-dark: hsl(230, 12%, 12%);
 
     --default-scrollbar-color: var(--background-color);
 
@@ -12,38 +12,34 @@
 
     --default-user-background: linear-gradient(
         to bottom right,
-        hsl(275, 55%, 40%),
-        hsl(325, 55%, 40%),
-        hsl(350, 55%, 40%)
+        hsl(275, 35%, 40%),
+        hsl(325, 35%, 40%),
+        hsl(350, 35%, 40%)
     );
     --default-channel-background: linear-gradient(
         to top right,
-        hsl(150, 55%, 40%),
-        hsl(200, 55%, 40%),
-        hsl(225, 55%, 40%)
+        hsl(150, 35%, 40%),
+        hsl(200, 35%, 40%),
+        hsl(225, 35%, 40%)
     );
 
     --channel-top-bar-color-accent: var(--background-color);
     --channel-top-bar-color: var(--background-color);
-    --bar-card-border-bottom: solid 1px #1d1d1d;
+    --bar-card-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
     --message-box-color: var(--card-accent-color);
-    --channel-top-bar-border-color: var(--accent-color-dark);
 
-    --channel-list-background-color: var(--background-color);
+    --sidebar-background-color: hsl(230, 12%, 12%);
+
     --channel-message-list-background-color: var(--accent-color-dark);
     --channel-message-color: var(--accent-color-dark);
     --channel-view-container-color: var(--accent-color-dark);
 
     --button-color: var(--background-color);
-    --button-hover-color: var(--focus-accent-color-deep);
-    --button-selected-color: var(--focus-accent-color);
-
-    --default-transition-duration: 50ms;
+    --channel-button-background: none;
 
     --default-border-radius: 0px;
     --default-button-border-radius: 0px;
     --channel-message-border-radius: 0px;
-    --bar-cards-border-radius: 0px;
     --channel-button-border-radius: 10px;
     --message-box-border-radius: 10px;
 }
\ No newline at end of file