diff --git a/src/components/Chat/ChatChannelList.styl b/src/components/Chat/ChatChannelList.styl
index 2b85c142ef..ac8910b759 100644
--- a/src/components/Chat/ChatChannelList.styl
+++ b/src/components/Chat/ChatChannelList.styl
@@ -30,7 +30,7 @@
             themed color colored-background-fg
         }
         &.unjoined {
-            themed color shade2
+            themed color shade1
         }
         &.unread {
             themed color primary
@@ -110,5 +110,11 @@
     .joinable {
         border-top: 0px solid transparent;
         themed border-top-color shade3
+        
+        input[type="search"] {
+            width: 100%;
+            margin: 1rem 0;
+            themed background bg
+        }
     }
 }
diff --git a/src/components/Chat/ChatList.styl b/src/components/Chat/ChatList.styl
index 27774e875d..c9cb3a8a17 100644
--- a/src/components/Chat/ChatList.styl
+++ b/src/components/Chat/ChatList.styl
@@ -15,7 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 channel-utils-height=8.4rem;
-channel-width=12rem;
+channel-width=20%;
+channel-max-width=25rem;
+channel-min-width=12rem;
 
 .ChatList {
     display: flex;
@@ -23,12 +25,16 @@ channel-width=12rem;
     height: "calc(100vh - %s - %s)" % (navbar-height channel-utils-height);
     overflow-y: auto;
     width: channel-width;
+    max-width: channel-max-width;
+    min-width: channel-min-width;
 
     .channel-container {
         flex-basis: channel-width;
         flex-shrink: 1;
         flex-grow: 1;
         width: channel-width;
+        max-width: channel-max-width;
+        min-width: channel-min-width;
 
         border-right: 1px solid transparent;
         themed border-right-color shade3
diff --git a/src/components/Chat/ChatLog.styl b/src/components/Chat/ChatLog.styl
index 07d60b6ae4..546f88b892 100644
--- a/src/components/Chat/ChatLog.styl
+++ b/src/components/Chat/ChatLog.styl
@@ -24,6 +24,8 @@
         border-bottom: 1px solid transparent;
         themed border-bottom-color shade3
         overflow: auto; 
+        box-sizing: border-box;
+        padding: 1rem;
 
         .GameList {
             text-align: left;
@@ -45,6 +47,8 @@
         flex-basis: 100%;
         flex-grow: 1;
         flex-shrink: 1;
+        box-sizing: border-box;
+        padding: 0 1rem;
         overflow-y: scroll;
         border-bottom: 1px solid transparent;
         themed border-bottom-color shade3
@@ -58,6 +62,7 @@
         @extend .monospace
         font-size: 0.8rem;
         font-style: normal !important;
+        margin-right: .5rem;
     }
 
     .third-person {
@@ -118,6 +123,7 @@
         .date {
             font-size: 8pt;
             font-family: 'Source Code Pro', monospace;
+            text-align: left;
             color: #666;
         }
     }
diff --git a/src/components/Player/Player.styl b/src/components/Player/Player.styl
index ce1218f1e9..4508e3c259 100644
--- a/src/components/Player/Player.styl
+++ b/src/components/Player/Player.styl
@@ -157,6 +157,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        margin-left: .25rem;
     }
 
     .Player-rank {
diff --git a/src/ogs.styl b/src/ogs.styl
index 9f75b6d288..ece24bdd5b 100644
--- a/src/ogs.styl
+++ b/src/ogs.styl
@@ -133,7 +133,7 @@ light.fg                                = #202020
 light.fg-increased-contrast             = #000000
 light.mix-base                          = #999
 light.background-color                  = light.bg
-light.card-background-color             = lighten(light.bg, 20%)
+light.card-background-color             = darken(light.bg, 3%)
 light.text-color                        = light.fg
 light.text-color-active                 = darken(light.text-color, 50%)
 light.spectator-text-color              = #0A06A8
diff --git a/src/views/ChatView/ChatView.styl b/src/views/ChatView/ChatView.styl
index b265a63864..396824c232 100644
--- a/src/views/ChatView/ChatView.styl
+++ b/src/views/ChatView/ChatView.styl
@@ -17,7 +17,9 @@
 
 
 channel-utils-height=8.4rem;
-channel-width=12rem;
+channel-width=20%;
+channel-max-width=25rem;
+channel-min-width=12rem;
 
 .ChatView {
     position: fixed;
@@ -37,6 +39,8 @@ channel-width=12rem;
         flex-shrink: 0;
         flex-grow: 0;
         width: channel-width;
+        max-width: channel-max-width;
+        min-width: channel-min-width;
         //overflow-y: scroll;
 
         display: flex;
@@ -46,16 +50,20 @@ channel-width=12rem;
         flex-grow: 0;
         flex-shrink: 0;
         overflow-x: hidden;
+
+        box-sizing: border-box;
+        padding: 1rem;
+        themed background card-background-color;
     }
 
     .ChatChannelList {
-        border-right: 1px solid transparent;
-        themed border-right-color shade3
+        /* border-right: 1px solid transparent; */
+        /* themed border-right-color shade3 */
     }
 
     .ChatUsersList {
-        border-left: 1px solid transparent;
-        themed border-left-color shade3
+        /* border-left: 1px solid transparent; */
+        /* themed border-left-color shade3 */
     }
 
     .ChatLog {