diff --git a/src/renderer/scr.discord.js b/src/renderer/scr.discord.js
index 9f5f763..6bb1f55 100644
--- a/src/renderer/scr.discord.js
+++ b/src/renderer/scr.discord.js
@@ -5,9 +5,26 @@ var DISCORD = (function(){
   
   return {
     setup: function(){
-      templateChannelServer = new TEMPLATE("<div data-channel='{id}'><strong class='name'>{name}</strong> <span class='msgcount'>({msgcount})</span><br><span class='server'>{server.name} ({server.type})</span></div>");
-      templateChannelPrivate = new TEMPLATE("<div data-channel='{id}'><strong class='name'>{name}</strong> <span class='msgcount'>({msgcount})</span><br><span class='server'>({server.type})</span></div>");
-      templateMessage = new TEMPLATE("<div><h2><strong class='username'>{user.name}</strong><span class='time'>{timestamp}</span></h2><div class='message'>{contents}</div></div>");
+      templateChannelServer = new TEMPLATE([
+        "<div data-channel='{id}'>",
+        "<div class='info'><strong class='name'>#{name}</strong><span class='msgcount'>{msgcount}</span></div>",
+        "<span class='server'>{server.name} ({server.type})</span>",
+        "</div>"
+      ].join(""));
+      
+      templateChannelPrivate = new TEMPLATE([
+        "<div data-channel='{id}'>",
+        "<div class='info'><strong class='name'>{name}</strong><span class='msgcount'>{msgcount}</span></div>",
+        "<span class='server'>({server.type})</span>",
+        "</div>"
+      ].join(""));
+      
+      templateMessage = new TEMPLATE([
+        "<div>",
+        "<h2><strong class='username'>{user.name}</strong><span class='time'>{timestamp}</span></h2>",
+        "<div class='message'>{contents}</div>",
+        "</div>"
+      ].join(""));
     },
     
     getChannelHTML: function(channel){
@@ -16,6 +33,7 @@ var DISCORD = (function(){
           switch(value){
             case "SERVER": return "server";
             case "GROUP": return "group";
+            case "DM": return "user";
           }
         }
       });
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 00ae52d..30e3d16 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -13,9 +13,9 @@ body {
 }
 
 #menu {
-  width: 16vw;
-  min-width: 225px;
-  max-width: 350px;
+  width: 15vw;
+  min-width: 215px;
+  max-width: 300px;
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -41,20 +41,35 @@ body {
 #channels > div {
   cursor: pointer;
   color: #eee;
-  padding: 8px;
-  text-align: center;
+  padding: 10px 12px;
+  font-size: 15px;
 }
 
 #channels > div:hover, #channels > div.active {
   background-color: #282B30;
 }
 
-#channels br {
-  margin-bottom: 3px;
+#channels .info {
+  display: flex;
+  height: 16px;
+  margin-bottom: 4px;
 }
 
-#channels .server {
-  font-size: 14px;
+#channels .name {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#channels .msgcount {
+  flex-shrink: 1;
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  margin-left: 4px;
+  margin-top: 1px;
+  padding: 2px 5px;
+  font-size: 11px;
 }
 
 #messages {