diff --git a/css/glowingbear.css b/css/glowingbear.css
index ba2000d..c0b126d 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -176,6 +176,11 @@ input[type=text], input[type=password], .badge {
     border-radius: 0;
     margin-right: -15px;
 }
+
+#sidebar ul.indented li.indent span.buffername {
+    padding-left: 10px;
+}
+
 #nicklist {
     position: fixed;
     width: 100px;
diff --git a/index.html b/index.html
index 66d218c..81699cb 100644
--- a/index.html
+++ b/index.html
@@ -257,17 +257,17 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
             </div>
       </div>
       <div id="sidebar" class="vertical-line collapse in">
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
           <li class="bufferfilter">
             <form role="form">
               <input class="form-control monospace" type="text" id="bufferFilter" ng-model="search" ng-keydown="handleSearchBoxKey($event)" placeholder="Search">
             </form>
           </li>
-          <li class="buffer" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:{fullName:search} | filter:hasUnread | orderBy:predicate">
+          <li class="buffer" ng-class="{'active': content.active, 'indent': content.indent }" ng-repeat="(key, content) in buffers | toArray | filter:{fullName:search} | filter:hasUnread | orderBy:predicate">
             <a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
               <span class="badge pull-right" ng-hide="content.notification" ng-if="content.unread" ng-bind="content.unread"></span>
               <span class="badge pull-right danger" ng-show="content.notification" ng-bind="content.notification"></span>
-              {{ content.indentedName(predicate) }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
+              <span class="buffername">{{ content.shortName }}</span><span ng-hide="content.shortName">{{ content.fullName }}</span>
             </a>
           </li>
         </ul>
diff --git a/js/models.js b/js/models.js
index bfada31..766f10c 100644
--- a/js/models.js
+++ b/js/models.js
@@ -27,15 +27,7 @@ models.service('models', ['$rootScope', '$filter', function($rootScope, $filter)
         var unread = 0;
         var lastSeen = -1;
         var serverSortKey = fullName.replace(/^irc.server.(\w+)/, "irc.$1");
-
-        var indentedName = function(predicate) {
-            if( predicate == "serverSortKey" && fullName.match(/^irc./) && !fullName.match(/^irc.server./) ) {
-                // indent channel
-                return "    " + shortName; // four protected spaces
-            } else {
-                return shortName;
-            }
-        };
+        var indent = (fullName.match(/^irc./) && !fullName.match(/^irc.server./));
 
         // Buffer opened message does not include notify level
         if( message.notify !== undefined ) {
@@ -173,7 +165,7 @@ models.service('models', ['$rootScope', '$filter', function($rootScope, $filter)
             updateNick: updateNick,
             flatNicklist: flatNicklist,
             serverSortKey: serverSortKey,
-            indentedName: indentedName,
+            indent: indent,
             history: history,
             addToHistory: addToHistory,
             getHistoryUp: getHistoryUp,