diff --git a/client/css/style.css b/client/css/style.css
index 556dda79..83281765 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -249,7 +249,9 @@ kbd {
 #nick button::before,
 #image-viewer .previous-image-btn::before,
 #image-viewer .next-image-btn::before,
-#sidebar .collapse-network::before {
+#sidebar .not-secure-icon::before,
+#sidebar .not-connected-icon::before,
+#sidebar .collapse-network-icon::before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
 	-webkit-font-smoothing: antialiased;
@@ -276,14 +278,13 @@ kbd {
 .context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
 
 .context-menu-network::before,
-#sidebar .chan.lobby::before,
 #chat .lobby .title::before { content: "\f0a0"; /* http://fontawesome.io/icon/hdd-o/ */ }
 
-#sidebar .not-secure .chan.lobby::before {
+#sidebar .not-secure-icon::before {
 	content: "\f09c"; /* https://fontawesome.com/v4.7.0/icon/unlock/ */
 }
 
-#sidebar .not-connected .chan.lobby::before {
+#sidebar .not-connected-icon::before {
 	content: "\f127"; /* https://fontawesome.com/v4.7.0/icon/chain-broken/ TODO v5: unlink */
 }
 
@@ -555,6 +556,7 @@ kbd {
 
 #sidebar .network,
 #sidebar .network-placeholder {
+	position: relative;
 	margin-bottom: 30px;
 	touch-action: pan-y;
 }
@@ -567,8 +569,8 @@ kbd {
 
 #sidebar .chan,
 #sidebar .chan-placeholder {
-	display: block;
-	padding: 8px 16px 8px 32px;
+	display: flex;
+	padding: 8px 14px;
 	transition: color 0.2s;
 	width: 100%;
 }
@@ -577,18 +579,40 @@ kbd {
 	color: #84ce88;
 	font-size: 15px;
 	font-weight: bold;
+	padding-left: 0;
 }
 
-#sidebar .chan.lobby:hover,
+#sidebar .lobby-wrap {
+	display: flex;
+	flex-grow: 1;
+}
+
+#sidebar .chan.lobby .lobby-wrap:hover,
 #sidebar .chan.lobby.active {
 	color: #c0f8c3;
 }
 
+#sidebar .not-connected-tooltip,
+#sidebar .not-secure-tooltip {
+	display: none;
+	margin: 0 8px;
+}
+
+#sidebar .not-connected .not-connected-tooltip,
+#sidebar .not-secure .not-secure-tooltip {
+	display: inline-block;
+}
+
+#sidebar .not-connected .not-secure-tooltip {
+	/* Do not display insecure icon if disconnected */
+	display: none;
+}
+
 #sidebar .not-secure .chan.lobby {
 	color: #f39c12;
 }
 
-#sidebar .not-secure .chan.lobby:hover,
+#sidebar .not-secure .chan.lobby .lobby-wrap:hover,
 #sidebar .not-secure .chan.lobby.active {
 	color: #f8c572;
 }
@@ -597,29 +621,24 @@ kbd {
 	color: #e74c3c;
 }
 
-#sidebar .not-connected .chan.lobby:hover,
+#sidebar .not-connected .chan.lobby .lobby-wrap:hover,
 #sidebar .not-connected .chan.lobby.active {
 	color: #f1978e;
 }
 
 #sidebar .chan::before,
 #chat .title::before {
+	width: 14px;
 	margin-right: 12px;
 }
 
 #sidebar .chan::before {
-	float: left;
 	line-height: 18px;
 }
 
-#chat .title::before {
-	margin-top: 17px;
-}
-
 #sidebar .chan .name {
 	position: relative;
-	z-index: 0;
-	display: block;
+	flex-grow: 1;
 	overflow: hidden;
 	white-space: nowrap;
 	margin-right: 5px;
@@ -636,11 +655,10 @@ kbd {
 }
 
 #sidebar .badge,
-#sidebar .add-channel,
-#sidebar .close {
-	float: right;
-	margin-left: 5px;
-	margin-right: -5px;
+#sidebar .add-channel-tooltip,
+#sidebar .close-tooltip {
+	flex-shrink: 0;
+	line-height: 1;
 }
 
 #sidebar .badge {
@@ -648,8 +666,7 @@ kbd {
 	border-radius: 3px;
 	color: #afb6c0;
 	font-size: 10px;
-	margin-top: 1px;
-	padding: 3px 6px;
+	padding: 4px 6px;
 	transition: background-color 0.2s, color 0.2s;
 }
 
@@ -662,11 +679,6 @@ kbd {
 	color: #49505a;
 }
 
-#sidebar .close-tooltip {
-	float: right;
-}
-
-#sidebar .leave,
 #sidebar .close {
 	width: 18px;
 	height: 18px;
@@ -674,7 +686,6 @@ kbd {
 	transition: opacity 0.2s, background-color 0.2s;
 }
 
-#sidebar .leave::before,
 #sidebar .close::before {
 	font-size: 20px;
 	font-weight: normal;
@@ -712,25 +723,31 @@ kbd {
 	transform: rotate(45deg) translateZ(0);
 }
 
-#sidebar .network .collapse-network {
-	border-radius: 3px;
-	width: 32px;
-	height: 34px;
-	float: left;
-	opacity: 0.4;
-	transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
-}
-
-button.collapse-network:first-child:nth-last-child(3) {
+#sidebar .network .lobby:nth-last-child(2) .collapse-network {
 	/* Hide collapse button if there are no channels/queries */
-	display: none;
+	width: 0;
+	overflow: hidden;
 }
 
-#sidebar .network.collapsed .collapse-network {
+#sidebar .network .collapse-network {
+	width: 40px;
+	opacity: 0.4;
+	padding-left: 11px;
+	transition: opacity 0.2s;
+}
+
+#sidebar .network .collapse-network-icon {
+	display: block;
+	width: 20px;
+	height: 20px;
+	transition: transform 0.2s;
+}
+
+#sidebar .network.collapsed .collapse-network-icon {
 	transform: rotate(-90deg);
 }
 
-#sidebar .network .collapse-network::before {
+#sidebar .network .collapse-network-icon::before {
 	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
 	color: #fff;
 }
@@ -744,16 +761,10 @@ button.collapse-network:first-child:nth-last-child(3) {
 	display: unset;
 }
 
-#sidebar .chan.active .leave:hover,
 #sidebar .chan.active .close:hover {
 	opacity: 1;
 }
 
-#sidebar .tse-scrollbar {
-	top: 2px;
-	right: 3px;
-}
-
 #footer {
 	background: rgba(0, 0, 0, 0.06);
 	bottom: 0;
@@ -1055,6 +1066,7 @@ button.collapse-network:first-child:nth-last-child(3) {
   */
 #sidebar .join-form {
 	display: none;
+	padding: 0 18px 8px;
 }
 
 #sidebar .join-form .input {
@@ -1063,19 +1075,14 @@ button.collapse-network:first-child:nth-last-child(3) {
 	margin-right: auto;
 	margin-top: 5px;
 	margin-bottom: 5px;
-	width: 80%;
 }
 
 #sidebar .join-form .btn {
 	display: block;
-	width: 80%;
+	width: 100%;
 	margin: auto;
 }
 
-#sidebar .add-channel-tooltip {
-	float: right;
-}
-
 #chat .show-more {
 	display: none;
 	padding: 10px;
diff --git a/client/js/render.js b/client/js/render.js
index 95dc8c2a..894daf26 100644
--- a/client/js/render.js
+++ b/client/js/render.js
@@ -25,7 +25,6 @@ const historyObserver = window.IntersectionObserver ?
 module.exports = {
 	appendMessage,
 	buildChannelMessages,
-	collapseNetwork,
 	renderChannel,
 	renderChannelUsers,
 	renderNetworks,
@@ -306,10 +305,10 @@ function loadMoreHistory(entries) {
 	});
 }
 
-sidebar.on("click", ".collapse-network", (event) => collapseNetwork($(event.target)));
+sidebar.on("click", ".collapse-network", (e) => {
+	const collapseButton = $(e.target);
 
-function collapseNetwork(collapseButton) {
-	$("#sidebar").find(`.network[data-id='${collapseButton.attr("data-id")}']`).toggleClass("collapsed");
+	collapseButton.closest(".network").toggleClass("collapsed");
 
 	if (collapseButton.attr("aria-expanded") === "true") {
 		collapseButton.attr("aria-expanded", false);
@@ -318,4 +317,6 @@ function collapseNetwork(collapseButton) {
 		collapseButton.attr("aria-expanded", true);
 		collapseButton.attr("aria-label", "Collapse");
 	}
-}
+
+	return false;
+});
diff --git a/client/views/chan.tpl b/client/views/chan.tpl
index 81a514b2..2ad47c12 100644
--- a/client/views/chan.tpl
+++ b/client/views/chan.tpl
@@ -9,17 +9,30 @@
 	aria-selected="false"
 >
 	{{#equal type "lobby"}}
+		<button class="collapse-network" aria-label="Collapse" aria-controls="network-{{id}}" aria-expanded="true">
+			<span class="collapse-network-icon"></span>
+		</button>
+		<div class="lobby-wrap">
+			<span class="name" title="{{name}}">{{name}}</span>
+			<span class="not-secure-tooltip tooltipped tooltipped-w" aria-label="Insecure connection">
+				<span class="not-secure-icon"></span>
+			</span>
+			<span class="not-connected-tooltip tooltipped tooltipped-w" aria-label="Disconnected">
+				<span class="not-connected-icon"></span>
+			</span>
+			<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
+		</div>
 		<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel">
 			<button class="add-channel" aria-label="Join a channel…" data-id="{{id}}"></button>
 		</span>
 	{{/equal}}
-	<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 	{{#notEqual type "lobby"}}
+		<span class="name" title="{{name}}">{{name}}</span>
+		<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 		<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
 			<button class="close" aria-label="Leave"></button>
 		</span>
 	{{/notEqual}}
-	<span class="name" title="{{name}}">{{name}}</span>
 </div>
 {{#equal type "lobby"}}
 	{{> join_channel}}
diff --git a/client/views/network.tpl b/client/views/network.tpl
index f3230a24..1f14835f 100644
--- a/client/views/network.tpl
+++ b/client/views/network.tpl
@@ -7,9 +7,6 @@
 	data-options="{{tojson serverOptions}}"
 	role="region"
 >
-	<button class="collapse-network" aria-label="Collapse" data-id="{{id}}"
-		aria-controls="network-{{id}}" aria-expanded="true">
-	</button>
 	{{> chan}}
 </section>
 {{/each}}