diff --git a/css/converse.css b/css/converse.css
index 2c810f263..735b1d3b1 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -4789,6 +4789,8 @@ body.reset {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
+  #conversejs a:hover {
+    text-decoration: none; }
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }
diff --git a/css/inverse.css b/css/inverse.css
index 7a65463cc..203b43574 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -4789,6 +4789,8 @@ body.reset {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
+  #conversejs a:hover {
+    text-decoration: none; }
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }
diff --git a/mockup/user-panel.html b/mockup/user-panel.html
index aef563acf..01dd4b2d5 100644
--- a/mockup/user-panel.html
+++ b/mockup/user-panel.html
@@ -22,19 +22,19 @@
         <div class="rooms-list">
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
-                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                <a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
                 <a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room">&nbsp;</a>
                 <a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a>
             </div>
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
-                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                <a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
             </div>
             <div class="available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
-                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                <a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
             </div>
         </div>
diff --git a/sass/_core.scss b/sass/_core.scss
index 58adf0bbf..322cf8664 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -48,6 +48,10 @@ body.reset {
         background-color: $highlight-color;
     }
 
+    a:hover {
+        text-decoration: none;
+    }
+
      canvas {
         background: $text-color;
         border-radius: $chatbox-border-radius;
diff --git a/src/converse-bookmarks.js b/src/converse-bookmarks.js
index f68ebccfa..b8eba2243 100644
--- a/src/converse-bookmarks.js
+++ b/src/converse-bookmarks.js
@@ -433,7 +433,7 @@
 
             _converse.BookmarksView = Backbone.OrderedListView.extend({
                 tagName: 'div',
-                className: 'bookmarks-list rooms-list-container',
+                className: 'bookmarks-list list-container rooms-list-container',
                 events: {
                     'click .add-bookmark': 'addBookmark',
                     'click .bookmarks-toggle': 'toggleBookmarksList',
@@ -479,9 +479,9 @@
                     const controlboxview = _converse.chatboxviews.get('controlbox');
                     if (!_.isUndefined(controlboxview) &&
                             !_converse.root.contains(this.el)) {
-                        const container = controlboxview.el.querySelector('#chatrooms');
-                        if (!_.isNull(container)) {
-                            container.insertBefore(this.el, container.firstChild);
+                        const el = controlboxview.el.querySelector('.bookmarks-list');
+                        if (!_.isNull(el)) {
+                            el.parentNode.replaceChild(this.el, el);
                         }
                     }
                 },
diff --git a/src/templates/bookmark.html b/src/templates/bookmark.html
index 54ebd3b1a..2e2082434 100644
--- a/src/templates/bookmark.html
+++ b/src/templates/bookmark.html
@@ -1,8 +1,8 @@
-<dd class="available-chatroom {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
-    <a class="open-room" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
-    <a class="right remove-bookmark icon-pushpin {[ if (o.bookmarked) { ]} button-on {[ } ]}"
+<div class="available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
+    <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
+    <a class="remove-bookmark fa fa-bookmark-o align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
        data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
        title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
-    <a class="right room-info icon-room-info" data-room-jid="{{{o.jid}}}"
+    <a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"
        title="{{{o.info_title}}}" href="#">&nbsp;</a>
-</dd>
+</div>
diff --git a/src/templates/room_item.html b/src/templates/room_item.html
index d6e3ffe7b..bd2923035 100644
--- a/src/templates/room_item.html
+++ b/src/templates/room_item.html
@@ -1,4 +1,4 @@
-<dd class="available-chatroom">
+<div class="available-chatroom d-flex flex-row">
 <a class="open-room available-room"
    data-room-jid="{{{o.jid}}}"
    title="{{{o.open_title}}}"
@@ -6,4 +6,4 @@
 <a class="right room-info icon-room-info"
    data-room-jid="{{{o.jid}}}"
    title="{{{o.info_title}}}" href="#">&nbsp;</a>
-</dd>
+</div>
diff --git a/src/templates/room_panel.html b/src/templates/room_panel.html
index 208a12c05..5aba21219 100644
--- a/src/templates/room_panel.html
+++ b/src/templates/room_panel.html
@@ -4,7 +4,6 @@
     <span class="w-100">Chatrooms</span>
     <a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>
 </div>
-<div class="list-container open-rooms-list rooms-list-container">
-    <div id="available-chatrooms" class="rooms-list"></div>
-</div>
+<div class="list-container open-rooms-list rooms-list-container"></div>
+<div class="list-container bookmarks-list rooms-list-container"></div>
 <!-- </div> -->
diff --git a/src/templates/rooms_list.html b/src/templates/rooms_list.html
index 330132629..c331234ad 100644
--- a/src/templates/rooms_list.html
+++ b/src/templates/rooms_list.html
@@ -1,2 +1,2 @@
 <a href="#" class="rooms-toggle open-rooms-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_rooms}}}">{{{o.label_rooms}}}</a>
-<dl class="rooms-list open-rooms-list"></dl>
+<div class="rooms-list open-rooms-list"></div>
diff --git a/src/templates/rooms_list_item.html b/src/templates/rooms_list_item.html
index 04e7d0f9a..430a40032 100644
--- a/src/templates/rooms_list_item.html
+++ b/src/templates/rooms_list_item.html
@@ -1,21 +1,22 @@
-<dd class="available-chatroom {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
+<div class="available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator">{{{ o.num_unread }}}</span>
 {[ } ]}
-<a class="open-room"
+<a class="open-room available-room w-100"
     data-room-jid="{{{o.jid}}}"
     title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
+
 <a class="right close-room icon-leave"
    data-room-jid="{{{o.jid}}}"
    data-room-name="{{{o.name}}}"
    title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>
 
 {[ if (o.allow_bookmarks) { ]}
-<a class="right icon-pushpin {[ if (o.bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
+<a class="fa fa-bookmark-o align-self-center {[ if (o.bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
    data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
    title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
    href="#">&nbsp;</a>
 {[ } ]}
-<a class="right room-info icon-room-info" data-room-jid="{{{o.jid}}}"
+<a class="room-info fa fa-info-circle align-self-center" data-room-jid="{{{o.jid}}}"
    title="{{{o.info_title}}}" href="#">&nbsp;</a>
-</dd>
+</div>