diff --git a/src/templates/src/landing.html b/src/templates/src/landing.html
index 676002bf..ed451f1f 100644
--- a/src/templates/src/landing.html
+++ b/src/templates/src/landing.html
@@ -86,34 +86,38 @@
 		<!-- Sidebar -->
 		<div class="w5 flex flex-column g2 flex-shrink-0">
 			{{ if .User }}
-				<div class="bg--card link--normal">
-					<div class="pa2 flex justify-between items-center">
+				<div class="sidebar-card bg--card link--normal">
+					<div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer">
 						<span class="f7">Your projects</span>
-						<span class="svgicon-lite">{{ svg "chevron-down" }}</span>
+						<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
 					</div>
-					<div class="ph2 flex flex-column g2">
-						{{ range .UserProjects }}
-							{{ template "list-project" . }}
-						{{ else }}
-							<div class="f7 pv3 tc c--dim">You have not created any projects.</div>
-						{{ end }}
+					<div class="sidebar-card-content">
+						<div class="ph2 flex flex-column g2">
+							{{ range .UserProjects }}
+								{{ template "list-project" . }}
+							{{ else }}
+								<div class="f7 pv3 tc c--dim">You have not created any projects.</div>
+							{{ end }}
+						</div>
+						<a class="bt mt2 pa2 flex justify-between" href="{{ .NewProjectUrl }}">
+							<div>Create new project</div>
+							<div class="svgicon-lite flex items-center">{{ svg "add" }}</div>
+						</a>
 					</div>
-					<a class="bt mt2 pa2 flex justify-between" href="{{ .NewProjectUrl }}">
-						<div>Create new project</div>
-						<div class="svgicon-lite flex items-center">{{ svg "add" }}</div>
-					</a>
 				</div>
-				<div class="bg--card link--normal">
-					<div class="pa2 flex justify-between items-center">
+				<div class="sidebar-card bg--card link--normal">
+					<div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer">
 						<span class="f7">Following</span>
-						<span class="svgicon f8">{{ svg "chevron-down" }}</span>
+						<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
 					</div>
-					<div class="ph2 pb2 flex flex-column g2">
-						{{ range .Following }}
-							{{ template "list-follow" . }}
-						{{ else }}
-							<div class="f7 pv3 tc c--dim">You are not following anything.</div>
-						{{ end }}
+					<div class="sidebar-card-content">
+						<div class="ph2 pb2 flex flex-column g2">
+							{{ range .Following }}
+								{{ template "list-follow" . }}
+							{{ else }}
+								<div class="f7 pv3 tc c--dim">You are not following anything.</div>
+							{{ end }}
+						</div>
 					</div>
 				</div>
 			{{ end }}
@@ -134,6 +138,19 @@
 	</div>
 </div>
 
+<script>
+	function collapse(e) {
+		const card = e.target.closest(".sidebar-card");
+		const content = card.querySelector(".sidebar-card-content");
+		const chevron = card.querySelector(".sidebar-chevron");
+
+		const hide = !content.hidden;
+
+		content.hidden = hide;
+		chevron.classList.toggle("rot-180", !hide);
+	}
+</script>
+
 {{ end }}
 
 {{ define "list-project" }}