diff --git a/apps/ssb.json b/apps/ssb.json
index fb3da05d..c4846f48 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&jAAzd36Nmpw0sRA1Dx9wLiIwGX+q//+S/Han+RLlEOw=.sha256"
+	"previous": "&Qae0CxJGEH7OspuapuXX/GurmV+VBtQiMhHRmCBKCwU=.sha256"
 }
diff --git a/apps/ssb/tf-tab-connections.js b/apps/ssb/tf-tab-connections.js
index 8769ae67..43f257dc 100644
--- a/apps/ssb/tf-tab-connections.js
+++ b/apps/ssb/tf-tab-connections.js
@@ -206,6 +206,23 @@ class TfTabConnectionsElement extends LitElement {
 			});
 	}
 
+	toggle_accordian(id) {
+		let element = this.renderRoot.getElementById(id);
+		element.classList.toggle('w3-hide');
+	}
+
+	valid_connections() {
+		return this.connections.filter((x) => x.tunnel === undefined);
+	}
+
+	valid_broadcasts() {
+		return this.broadcasts
+			.filter((x) => x.address)
+			.filter(
+				(x) => this.connections.map((c) => c.id).indexOf(x.pubkey) == -1
+			);
+	}
+
 	render() {
 		let self = this;
 		return html`
@@ -220,27 +237,21 @@ class TfTabConnectionsElement extends LitElement {
 				>
 					Connect
 				</button>
-				<h2>Broadcasts</h2>
-				<ul class="w3-ul w3-border">
-					${this.broadcasts
-						.filter((x) => x.address)
-						.filter(
-							(x) => self.connections.map((c) => c.id).indexOf(x.pubkey) == -1
-						)
-						.map((x) => self.render_broadcast(x))}
-				</ul>
-				<h2>Connections</h2>
-				<ul class="w3-ul w3-border">
-					${this.connections
-						.filter((x) => x.tunnel === undefined)
+				<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('connections')}>Connections (${this.valid_connections().length})</h2>
+				<ul class="w3-ul w3-border" id="connections">
+					${this.valid_connections()
 						.map(
 							(x) => html`
 								<li class="w3-bar">${this.render_connection(x)}</li>
 							`
 						)}
 				</ul>
-				<h2>Stored Connections</h2>
-				<ul class="w3-ul w3-border">
+				<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('broadcasts')}>Broadcasts (${this.valid_broadcasts().length})</h2>
+				<ul class="w3-ul w3-border w3-hide" id="broadcasts">
+					${this.valid_broadcasts().map((x) => self.render_broadcast(x))}
+				</ul>
+				<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('stored_connections')}>Stored Connections (${this.stored_connections.length})</h2>
+				<ul class="w3-ul w3-border w3-hide" id="stored_connections">
 					${this.stored_connections.map(
 						(x) => html`
 							<li>
@@ -267,8 +278,8 @@ class TfTabConnectionsElement extends LitElement {
 						`
 					)}
 				</ul>
-				<h2>Local Accounts</h2>
-				<div class="w3-container">
+				<h2 class="w3-button w3-block w3-theme-d1" @click=${() => self.toggle_accordian('local_accounts')}>Local Accounts (${this.identities.length})</h2>
+				<div class="w3-container w3-hide" id="local_accounts">
 					${this.identities.map(
 						(x) =>
 							html`<div