diff --git a/css/glowingbear.css b/css/glowingbear.css
index 68b134f..34c63d2 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -113,6 +113,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
     left: 145px; /* sidebar */
     overflow: hidden;
 }
+
 #topbar .actions {
     margin-left: 5px;
     padding-left: 5px;
@@ -504,20 +505,20 @@ h2 span, h2 small {
     }
 }
 /* bold hash before channels */
-li.buffer.channel a span:last-of-type:before {
+li.buffer.channel a span:last-of-type:before, #topbar .title .channel:before {
     color: #888;
     font-weight: bold;
 }
 
-li.buffer.channel_hash a span:last-of-type:before {
+li.buffer.channel_hash a span:last-of-type:before, #topbar .title .channel_hash:before {
     content: '#';
 }
 
-li.buffer.channel_plus a span:last-of-type:before {
+li.buffer.channel_plus a span:last-of-type:before, #topbar .title .channel_plus:before {
     content: '+';
 }
 
-li.buffer.channel_ampersand a span:last-of-type:before {
+li.buffer.channel_ampersand a span:last-of-type:before, #topbar .title .channel_ampersand:before {
     content: '&';
 }
 
@@ -632,6 +633,8 @@ img.emojione {
 
     #topbar .title {
         left: 40px;
+        right: 60px;
+        text-align: center;
     }
 
     #topbar .brand img {
diff --git a/index.html b/index.html
index e91401f..9ae97ad 100644
--- a/index.html
+++ b/index.html
@@ -222,9 +222,12 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </a>
           <button ng-if="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
         </div>
+
         <div class="title" title="{{activeBuffer().rtitle}}">
-          <span ng-repeat="part in activeBuffer().title" ng-class="::part.classes" ng-bind-html="::(part.text | linky:'_blank' | DOMfilter:'irclinky')"></span>
+          <span class="visible-lg" ng-repeat="part in activeBuffer().title" ng-class="::part.classes" ng-bind-html="::(part.text | linky:'_blank' | DOMfilter:'irclinky')"></span>
+          <span class="hidden-lg" ng-click="showModal('topicModal')" ng-class="{'active': activeBuffer().active, 'indent': activeBuffer().indent, 'channel': activeBuffer().type === 'channel', 'channel_hash': activeBuffer().prefix === '#', 'channel_plus': activeBuffer().prefix === '+', 'channel_ampersand': activeBuffer().prefix === '&', 'private': activeBuffer().type === 'private'}">{{ activeBuffer().trimmedName || activeBuffer().fullName }}</span>
         </div>
+
         <div class="actions pull-right vertical-line-left">
           <a class="settings-toggle" ng-click="showModal('settingsModal')" title="Options menu">
             <i class="glyphicon glyphicon-cog"></i>
@@ -465,5 +468,20 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
     </div><!-- /.modal -->
+    <div id="topicModal" class="gb-modal" data-state="hidden">
+      <div class="backdrop" ng-click="closeModal($event)"></div>
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" ng-click="closeModal($event)" aria-hidden="true">&times;</button>
+            <h4 class="modal-title">Channel topic</h4>
+            <p ng-repeat="part in activeBuffer().title" ng-class="::part.classes" ng-bind-html="::(part.text | linky:'_blank' | DOMfilter:'irclinky')"></p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-primary" ng-click="closeModal($event)">Close</button>
+          </div>
+        </div><!-- /.modal-content -->
+      </div><!-- /.modal-dialog -->
+    </div><!-- /.modal -->
   </body>
 </html>