diff --git a/internal/webserver/server_test.go b/internal/webserver/server_test.go
index 9551ac7..ec573b3 100644
--- a/internal/webserver/server_test.go
+++ b/internal/webserver/server_test.go
@@ -95,7 +95,7 @@ func TestUserFeedWithEntityInBio(t *testing.T) {
 
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	bio_entities := cascadia.QueryAll(root, selector(".user-bio .entity"))
+	bio_entities := cascadia.QueryAll(root, selector(".user-header__bio .entity"))
 	require.Len(bio_entities, 1)
 	assert.Equal(bio_entities[0].FirstChild.Data, "@SheathUnderwear")
 }
@@ -192,7 +192,7 @@ func TestUserFollowers(t *testing.T) {
 
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-container > .user")), 2)
+	assert.Len(cascadia.QueryAll(root, selector(".users-list > .user")), 2)
 }
 
 func TestUserFollowees(t *testing.T) {
@@ -204,7 +204,7 @@ func TestUserFollowees(t *testing.T) {
 
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-container > .user")), 1)
+	assert.Len(cascadia.QueryAll(root, selector(".users-list > .user")), 1)
 }
 
 // Timeline page
@@ -363,7 +363,7 @@ func TestSearchUsers(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	user_elements := cascadia.QueryAll(root, selector(".users-list-container .user"))
+	user_elements := cascadia.QueryAll(root, selector(".users-list .user"))
 	assert.Len(user_elements, 2)
 	assert.Contains(cascadia.Query(root, selector("#search-bar")).Attr, html.Attribute{Key: "value", Val: "no"})
 }
@@ -456,7 +456,7 @@ func TestTweetsWithContent(t *testing.T) {
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
 	assert.Len(cascadia.QueryAll(root, selector(".poll")), 1)
-	assert.Len(cascadia.QueryAll(root, selector(".poll-choice")), 4)
+	assert.Len(cascadia.QueryAll(root, selector(".poll__choice")), 4)
 
 	// Video
 	resp = do_request(httptest.NewRequest("GET", "/tweet/1453461248142495744", nil))
@@ -478,7 +478,7 @@ func TestTweetsWithContent(t *testing.T) {
 	root, err = html.Parse(resp.Body)
 	require.NoError(err)
 	assert.Len(cascadia.QueryAll(root, selector(".space")), 1)
-	assert.Len(cascadia.QueryAll(root, selector("ul.space-participants-list li")), 9)
+	assert.Len(cascadia.QueryAll(root, selector("ul.space__participants-list li")), 9)
 }
 
 func TestTweetWithEntities(t *testing.T) {
@@ -621,7 +621,7 @@ func TestListsIndex(t *testing.T) {
 	require.NoError(err)
 
 	// Check that there's at least 2 Lists
-	assert.True(t, len(cascadia.QueryAll(root, selector(".users-list-preview"))) >= 2)
+	assert.True(t, len(cascadia.QueryAll(root, selector(".list-preview"))) >= 2)
 }
 
 func TestListDetail(t *testing.T) {
@@ -633,7 +633,7 @@ func TestListDetail(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-container .author-info")), 5)
+	assert.Len(cascadia.QueryAll(root, selector(".users-list .author-info")), 5)
 
 	// Feed
 	resp1 := do_request(httptest.NewRequest("GET", "/lists/2", nil))
@@ -662,7 +662,7 @@ func TestListAddAndDeleteUser(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-container .author-info")), 2)
+	assert.Len(cascadia.QueryAll(root, selector(".users-list .author-info")), 2)
 
 	// Add a user
 	resp_add := do_request(httptest.NewRequest("GET", "/lists/2/add_user?user_handle=cernovich", nil))
@@ -674,7 +674,7 @@ func TestListAddAndDeleteUser(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err = html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-container .author-info")), 3)
+	assert.Len(cascadia.QueryAll(root, selector(".users-list .author-info")), 3)
 
 	// Delete a user
 	resp_remove := do_request(httptest.NewRequest("GET", "/lists/2/remove_user?user_handle=cernovich", nil))
@@ -686,7 +686,7 @@ func TestListAddAndDeleteUser(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err = html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-container .author-info")), 2)
+	assert.Len(cascadia.QueryAll(root, selector(".users-list .author-info")), 2)
 }
 
 func TestCreateNewList(t *testing.T) {
@@ -698,7 +698,7 @@ func TestCreateNewList(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	num_lists := len(cascadia.QueryAll(root, selector(".users-list-preview")))
+	num_lists := len(cascadia.QueryAll(root, selector(".list-preview")))
 
 	// Create a new list
 	resp_add := do_request(httptest.NewRequest("POST", "/lists", strings.NewReader(`{"name": "My New List"}`)))
@@ -710,7 +710,7 @@ func TestCreateNewList(t *testing.T) {
 	require.Equal(resp.StatusCode, 200)
 	root, err = html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".users-list-preview")), num_lists+1)
+	assert.Len(cascadia.QueryAll(root, selector(".list-preview")), num_lists+1)
 }
 
 // Messages
@@ -732,8 +732,8 @@ func TestMessagesIndexPage(t *testing.T) {
 	resp := recorder.Result()
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".chat-list .chat")), 2)
-	assert.Len(cascadia.QueryAll(root, selector(".chat-view .dm-message-and-reacts-container")), 0) // No messages until you click on one
+	assert.Len(cascadia.QueryAll(root, selector(".chat-list .chat-list-entry")), 2)
+	assert.Len(cascadia.QueryAll(root, selector(".chat-view .dm-message")), 0) // No messages until you click on one
 }
 
 // Open a chat room
@@ -752,8 +752,8 @@ func TestMessagesRoom(t *testing.T) {
 	resp := recorder.Result()
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".chat-list .chat")), 2) // Chat list still renders
-	assert.Len(cascadia.QueryAll(root, selector("#chat-view .dm-message-and-reacts-container")), 5)
+	assert.Len(cascadia.QueryAll(root, selector(".chat-list .chat-list-entry")), 2) // Chat list still renders
+	assert.Len(cascadia.QueryAll(root, selector("#chat-view .dm-message")), 5)
 
 	// Should have the poller at the bottom
 	node := cascadia.Query(root, selector("#new-messages-poller"))
@@ -782,7 +782,7 @@ func TestMessagesRoomPollForUpdates(t *testing.T) {
 	resp := recorder.Result()
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".dm-message-and-reacts-container")), 3)
+	assert.Len(cascadia.QueryAll(root, selector(".dm-message")), 3)
 
 	// Should have the poller at the bottom
 	node := cascadia.Query(root, selector("#new-messages-poller"))
@@ -811,7 +811,7 @@ func TestMessagesRoomPollForUpdatesEmptyResult(t *testing.T) {
 	resp := recorder.Result()
 	root, err := html.Parse(resp.Body)
 	require.NoError(err)
-	assert.Len(cascadia.QueryAll(root, selector(".dm-message-and-reacts-container")), 0)
+	assert.Len(cascadia.QueryAll(root, selector(".dm-message")), 0)
 
 	// Should have the poller at the bottom, with the same value as previously
 	node := cascadia.Query(root, selector("#new-messages-poller"))
diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index 7206e36..5350953 100644
--- a/internal/webserver/static/styles.css
+++ b/internal/webserver/static/styles.css
@@ -1,19 +1,19 @@
 :root {
-    --color-twitter-text-gray: #536171;
-    --color-twitter-blue: #1b95e0;  /* hsl(203, 78%, 49%) */
-    --color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
-    --color-twitter-blue-extra-light: hsl(204, 95%, 85%);
-    --color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
-    --color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
-    --color-outline-gray: #dcdcdc;
-    --color-twitter-text-gray: #536471;
+	--color-twitter-text-gray: #536171;
+	--color-twitter-blue: #1b95e0;  /* hsl(203, 78%, 49%) */
+	--color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
+	--color-twitter-blue-extra-light: hsl(204, 95%, 85%);
+	--color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
+	--color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
+	--color-outline-gray: #dcdcdc;
+	--color-twitter-text-gray: #536471;
 
-    --color-twitter-danger-red: #f4212e; /* hsl(356, 91%, 54%) */
-    --color-twitter-danger-red2: #de1b28;        /* hsl(356, 78%, 49%) */
-    --color-twitter-danger-red2-light: #f67e86;  /* hsl(356, 87%, 73%) */
-    --color-twitter-danger-red2-hover: #f2a6aa;  /* hsl(357, 75%, 80%);*/
-    --color-space-purple: #a49bfd;
-    --color-space-purple-outline: #6452fc;
+	--color-twitter-danger-red: #f4212e; /* hsl(356, 91%, 54%) */
+	--color-twitter-danger-red2: #de1b28;		/* hsl(356, 78%, 49%) */
+	--color-twitter-danger-red2-light: #f67e86;  /* hsl(356, 87%, 73%) */
+	--color-twitter-danger-red2-hover: #f2a6aa;  /* hsl(357, 75%, 80%);*/
+	--color-space-purple: #a49bfd;
+	--color-space-purple-outline: #6452fc;
 /*
 const QColor COLOR_OUTLINE_GRAY = QColor(220, 220, 220);
 const QColor COLOR_TWITTER_BLUE = QColor(27, 149, 224);
@@ -24,7 +24,7 @@ const QColor COLOR_TWITTER_TEXT_GRAY = QColor(83, 100, 113);
 
 const QColor COLOR_BACKGROUND_GREEN = QColor(40, 205, 50);
 
-const QColor COLOR_RED          = QColor(255, 0, 0);
+const QColor COLOR_RED		  = QColor(255, 0, 0);
 
 const QColor COLOR_SPACE_PURPLE = QColor(164, 155, 253);
 const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
@@ -43,48 +43,56 @@ const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
  ***************************************************************************************************/
 
 html {
-    /*
-     * Force scrollbar, even when it fits on 1 page.  Prevents viewport from resizing -> flickering
-     * and stuff moving between page loads
-     */
-    overflow-y: scroll;
+	/*
+	 * Force scrollbar, even when it fits on 1 page.  Prevents viewport from resizing -> flickering
+	 * and stuff moving between page loads
+	 */
+	overflow-y: scroll;
 }
 body {
-    margin: 0 30%;
-    min-height: 100vh;
+	/* So that toasts can be positioned relative to `body` (rather than `html`).
+	 * This is useful because it wil then use the `body`'s width (i.e., accounting for the big fat margins).
+	 */
+	position: relative;
 
-    border-color: var(--color-twitter-off-white-dark);
-    border-right-style: solid;
-    border-left-style: solid;
-    border-width: 1px;
+	margin: 0 30%;
+	min-height: 100vh;
 
-    font-family: "Titillium Web";
+	border-color: var(--color-twitter-off-white-dark);
+	border-right-style: solid;
+	border-left-style: solid;
+	border-width: 1px;
+
+	font-family: "Titillium Web";
 }
 input, select {
-    font-family: inherit;
-    font-size: 1em;
-    padding: 0.2em 0.6em;
-    box-sizing: border-box;
-    border-radius: 0.5em;
+	font-family: inherit;
+	font-size: 1em;
+	padding: 0.2em 0.6em;
+	box-sizing: border-box;
+	border-radius: 0.5em;
 }
 input[type="submit"] {
-    background-color: var(--color-twitter-blue-light);
-    width: 10em;
-    padding: 1em;
-    border-radius: 1em;
-    font-size: 1em;
-    cursor: pointer;
+	background-color: var(--color-twitter-blue-light);
+	width: 10em;
+	border-radius: 1em;
+	font-size: 1em;
+	cursor: pointer;
 }
 a {
-    text-decoration: none;
-    color: inherit;
+	text-decoration: none;
+	color: inherit;
+	cursor: pointer;
+}
+ul {
+	list-style: none;
 }
 h1 {
-    margin: 0.5em 0;
-    text-align: center;
+	margin: 0.5em 0;
+	text-align: center;
 }
 h3 {
-    margin: 0.5em 0;
+	margin: 0.5em 0;
 }
 
 
@@ -99,37 +107,92 @@ h3 {
  ***************************************************************************************************/
 
 .row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 .row--spread {
-    justify-content: space-between;
+	justify-content: space-between;
 }
 
 /* A list of items separated by interpuncts */
 .inline-dotted-list {
-    list-style: none;
-    margin: 0;
-}
-.inline-dotted-list > * {
-    display: inline;
-}
-.inline-dotted-list > *:after {
-    content: " ⋅";
-}
-.inline-dotted-list > *:last-child:after {
-    content: "";
+	margin: 0;
+
+	& > * {
+		display: inline;
+	}
+	& > *:after {
+		content: " ⋅";
+	}
+	& > *:last-child:after {
+		content: "";
+	}
 }
 
 .rounded-gray-outline {
-    outline-color: lightgray;
-    outline-style: solid;
-    outline-width: 1px;
-    overflow: hidden;
-    border-radius: 1.5em;
+	outline-color: lightgray;
+	outline-style: solid;
+	outline-width: 1px;
+	overflow: hidden;
+	border-radius: 1.5em;
 }
 
+.circle-outline {
+	display: flex;
+	border-radius: 50%;
+	outline: 1px solid #777;
+	margin: 0 0.4em;
+	font-size: 0.8em;
+	padding: 0.2em;
+	box-sizing: border-box;
+}
+
+.button {
+	display: flex; /* Prevent <a class="button"><img></a> from having extra space at the bottom, looking weird*/
+	padding: 0.5em;
+	margin: 0.2em;
+	border-radius: 100em; /* any large amount, just don't use % because then it makes an ellipse */
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--color-twitter-blue-light);
+	}
+	&:active {
+		transform: translate(0.1em, 0.1em);
+		background-color: var(--color-twitter-blue);
+	}
+
+	&.button--danger {
+		background-color: var(--color-twitter-danger-red2);
+
+		&:hover {
+			background-color: var(--color-twitter-danger-red2-light);
+		}
+		&:active {
+			background-color: var(--color-twitter-danger-red2);
+		}
+	}
+}
+
+.labelled-icon {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	& label {
+		padding: 0 0.3em;
+		white-space: nowrap;
+		cursor: unset; /* <label> sets cursor to "default" by default */
+	}
+}
+
+.svg-icon {
+	width: 1.5em;
+	height: auto;
+}
+
+
 /***************************************************************************************************
  *
  * Layout styles
@@ -140,894 +203,1124 @@ h3 {
  ***************************************************************************************************/
 
 header {
-    /* Sticky to top of page */
-    position: fixed;
-    z-index: 1;
+	/* Sticky to top of page */
+	position: fixed;
+	z-index: 1;
 
-    /* Match layout width of `body` */
-    left: 30%;
-    right: 30%;
+	/* Match layout width of `body` */
+	left: 30%;
+	right: 30%;
 
-    height: 4em;
-    padding: 0.5em 1em;
-    border: 1px solid var(--color-outline-gray);
-    box-sizing: border-box;
+	height: 4em;
+	padding: 0.5em 1em;
+	border: 1px solid var(--color-outline-gray);
+	box-sizing: border-box;
 
-    background-color: white;
+	background-color: white;
 }
 
 main {
-    /* Space taken up by the header search bar */
-    padding-top: 4em;
+	/* Space taken up by the header search bar */
+	padding-top: 4em;
 }
 
 #nav-sidebar {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    transform: translate(-100%, 0);
-    font-size: 1.4em;
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	transform: translate(-100%, 0);
+	font-size: 1.4em;
+}
+
+/**
+ * Layout for the Messages page
+ */
+.messages-page {
+	display: flex;
+	flex-direction: row;
+
+	/** Setup to allow the two panes to scroll independently **/
+	height: 100vh;
+	padding-top: 4em;
+	margin-top: -4em;
+	box-sizing: border-box;
+
+	.chat-list {
+		flex-basis: 0;
+		flex-grow: 4;
+		display: flex;
+		flex-direction: column;
+		overflow-y: scroll;
+	}
+	#chat-view {
+		flex-basis: 0;
+		flex-grow: 7;
+		border-left: 1px solid var(--color-outline-gray);
+		padding: 0.5em;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+
+		.chat-messages {
+			flex-grow: 1;
+			overflow-y: auto;
+		}
+	}
+}
+
+/**
+ * Layout for the Login page
+ */
+.login-page {
+	width: 60%;
+	margin: 5% auto;
+
+	& hr {
+		margin: 3em 2em;
+	}
 }
 
 
-/*******************************************************************************
+/***************************************************************************************************
  *
  * Module styles
  * -------------
  *
  * Normal page elements.  Should only use classes; no IDs or tag names.
  *
- *******************************************************************************/
+ ***************************************************************************************************/
 
+
+/******************************************************
+ * General modules
+ ******************************************************/
+
+/**
+ * Toast notification popup that gets sent on HTTP 500
+ */
 .server-error-msg {
-    position: fixed;
-    margin: 6em 0;
-    left: 0;
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-.server-error-msg .error-msg-container {
-    width: 30%;
-    background-color: #fee;
-    border: 1px solid red;
-    border-radius: 1em;
-    padding: 1em;
-    color: red;
-    text-align: center;
+	background-color: #fee;
+	border: 1px solid red;
+	border-radius: 1em;
+	padding: 1em;
+	color: red;
+	text-align: center;
+	top: 10em;
+	width: 90%;
 }
 
-.tweet {
-    padding: 0 1.5em;
-    position: relative;
-    z-index: 0;  /* Dunno why, but without it, hovering a tweet with a Poll hides the poll fill bars */
-    overflow: hidden; /* Otherwise HTMX spinner sticks over the rounded edges in a quoted tweet */
-}
-:not(#focused-tweet) > .tweet:hover:not(:has(.tweet:hover)) {
-    background-color: var(--color-twitter-off-white);
-}
-:not(#focused-tweet) > .tweet {
-    cursor: pointer;
-}
-.htmx-spinner-container {
-    display: none;
-    z-index: 2;  /* On top of the search bar, which is z-index of 1 */
-}
-.htmx-request > .htmx-spinner-container {
-    display: revert;
-    font-size: 3em;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+/**
+ * HTMX spinner module
+ */
+.htmx-spinner {
+	/* Hidden by default, unless `.htmx-request` is active on parent component */
+	display: none;
+
+	/* Cover the parent element completely */
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;  /* On top of the search bar, which is z-index of 1 */
+
+	font-size: 3em;
+
+	/* When `.htmx-request` is applied to the parent element, show the spinner */
+	.htmx-request > & {
+		display: revert;
+	}
+
+	.htmx-spinner__fullscreen-forcer {
+		/*
+		 * This can optionally be stuck inside a `.htmx-spinner` to make its contents sticky to
+		 * full-screen size.  Child elements will be positioned according to this rather than to the
+		 * `.htmx-spinner` element.
+		 */
+		position: fixed;
+		top: 0;
+		height: 100vh;
+		left: 30%;
+		right: 30%;
+	}
+	.htmx-spinner__background {
+		opacity: 0.3;
+		background-color: #7cc5f6;
+		width: 100%;
+		height: 100%;
+	}
+	.htmx-spinner__icon {
+		/* Put the icon in the middle of the HTMX overlay */
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+
+		/* https://codepen.io/sosuke/pen/Pjoqqp */
+		filter: invert(54%) sepia(17%) saturate(4210%) hue-rotate(176deg) brightness(89%) contrast(98%);
+	}
 }
 
-.htmx-spinner-container .htmx-spinner-background {
-    opacity: 0.3;
-    background-color: #7cc5f6;
-    width: 100%;
-    height: 100%;
-}
-.htmx-spinner-container .htmx-spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
+/**
+ * Image carousel module
+ */
+.image-carousel {
+	border-radius: 2em;
+	border: 0.3em solid var(--color-twitter-blue);
+	box-shadow: 0 0 1em var(--color-twitter-blue);
+	outline: none;
+	overflow: visible;
+	padding: 1.4em;
 
-    /* https://codepen.io/sosuke/pen/Pjoqqp */
-    filter: invert(54%) sepia(17%) saturate(4210%) hue-rotate(176deg) brightness(89%) contrast(98%);
+	&::backdrop {
+		background: hsla(204, 87%, 73%, 0.3); /* based on --color-twitter-blue-light */
+	}
+	.image-carousel__close-button {
+		position: absolute;
+		right: -1.3em;
+		top: -1.5em;
+
+		width: 1em;
+		line-height: 1em;
+		font-size: 2em;
+		justify-content: center;
+		border: 0.1em solid black;
+	}
+	.image-carousel__close-button:not(:hover):not(:active) {
+		background-color: var(--color-twitter-blue-extra-light);
+	}
+	.image-carousel__active-image {
+		max-height: 85vh;
+		max-width: 90vw;
+	}
 }
 
-dialog#image_carousel {
-    border-radius: 2em;
-    border: 0.3em solid var(--color-twitter-blue);
-    box-shadow: 0 0 1em var(--color-twitter-blue);
-    outline: none;
-    overflow: visible;
-    padding: 1.4em;
-}
-dialog#image_carousel a.close-button {
-    position: absolute;
-    right: -1.3em;
-    top: -1.5em;
+/**
+ * Tabs module
+ */
+.tabs {
+	margin-top: 2px;
+	border-top: 1px solid var(--color-outline-gray);
+	border-bottom: 1px solid var(--color-outline-gray);
 
-    width: 1em;
-    line-height: 1em;
-    font-size: 2em;
-    justify-content: center;
-    border: 0.1em solid black;
-}
-dialog#image_carousel a.close-button:not(:hover):not(:active) {
-    background-color: var(--color-twitter-blue-extra-light);
-}
-dialog::backdrop {
-    background: hsla(204, 87%, 73%, 0.3); /* based on --color-twitter-blue-light */
+	.tabs__tab {
+		flex-grow: 1;
+		text-align: center;
+		font-size: 1.1em;
+		font-weight: bold;
+		color: var(--color-twitter-text-gray);
+		padding: 0.8em;
+
+		&:hover {
+			color: var(--color-twitter-blue);
+		}
+	}
+
+	.tabs__tab--active {
+		color: var(--color-twitter-blue);
+		border-bottom: 0.2em solid var(--color-twitter-blue);
+	}
 }
 
-.quoted-tweet {
-    margin: 1em 0;
+/**
+ * Clickable entities
+ */
+.entity {
+	color: var(--color-twitter-blue);
 }
 
-.profile-banner-image {
-    width: 100%;
-}
-
-.author-info {
-    display: flex;
-    align-items: center;
-}
-.author-info a {
-    line-height: 0;
-}
-
-.author-info, .tweet .text {
-    cursor: default;
-}
-
-.circle-outline {
-    display: flex;
-    border-radius: 50%;
-    outline: 1px solid #777;
-    margin: 0 0.4em;
-    font-size: 0.8em;
-    padding: 0.2em;
-    box-sizing: border-box;
-}
-
-.name-and-handle {
-    padding: 0 0.6em !important; /* !important to make the ".quick-link .span" rule in the login button not overrule it */
-}
-
-.display-name {
-    font-weight: bold;
-    white-space: nowrap;
-}
-.handle {
-    color: var(--color-twitter-text-gray);
-}
-
-.tweet-header-container {
-    display: flex;
-    align-items: center;
-}
-.reply-mentions-container {
-    display: flex;
-    align-items: center;
-    cursor: default;
-    flex-grow: 1;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-.reply-mentions {
-    padding: 0 0.5em;
-}
-
-.replying-to-label {
-    color: var(--color-twitter-text-gray);
-}
-a.entity {
-    color: var(--color-twitter-blue);
-}
-
-.tweet .text, .dm-message-text-container .text {
-    display: block;
-    margin-bottom: 0.4em;
-    margin-top: 0;
-    overflow-wrap: anywhere;
-}
-.dm-message-text-container .text:last-child {
-    margin-bottom: 0;
-}
-#focused-tweet .text {
-    font-size: 1.4em;
-}
-#focused-tweet .quoted-tweet .text {
-    font-size: unset;
-}
-.tweet-content video {
-    max-width: 100%;
-    max-height: 40em;
-}
-.embedded-link {
-    padding: 1.3em;
-    margin-top: 1em;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-twitter-off-white);
-}
-img.embedded-link-preview {
-    border-radius: 1em;
-    max-width: 100%;
-    height: auto; /* preserve aspect ratio */
-}
-.embedded-link-description {
-    color: var(--color-twitter-text-gray);
-    font-size: 0.8em;
-    margin: 0;
-}
-.embedded-link-domain-container {
-    margin-top: 0.2em
-}
-.embedded-link-domain {
-    margin-left: 0.3em;
-}
-.thread-parent-tweet:first-child, #focused-tweet:first-child {
-    padding-top: 1em;
-}
-.thread-parent-tweet .vertical-reply-line-container,
-.reply-chain .vertical-reply-line-container {
-    width: 3em;
-    margin-right: 0.5em;
-}
-.thread-parent-tweet .vertical-reply-line:not(.quoted-tweet .vertical-reply-line),
-.reply-chain > :not(:last-child) .vertical-reply-line:not(.quoted-tweet .vertical-reply-line) {
-    width: 2px;
-    background-color: var(--color-twitter-off-white-dark);
-    flex-grow: 1;
-    margin: auto;
+/**
+ * Text module.  For both Tweets and DM messages
+ */
+.text {
+	display: block;
+	margin-bottom: 0.4em;
+	margin-top: 0;
+	overflow-wrap: anywhere;
+	cursor: text;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }
 
+/**
+ * Profile image module
+ */
 .profile-image {
-    border-radius: 50%;
-    width: 3em;
-    height: 3em;
-    display: inline;
-    border: 0.1em solid var(--color-outline-gray);
+	line-height: 0;
+
+	.profile-image__image {
+		border-radius: 50%;
+		width: 3em;
+		height: 3em;
+		display: inline;
+		border: 0.1em solid var(--color-outline-gray);
+	}
 }
 
-.user-header {
-    border-bottom: 1px solid var(--color-outline-gray);
-}
-.user-header .author-info {
-    font-size: 1.3em;
-    padding: 1em;
-}
-.user-header .profile-image {
-    width: 8em;
-    height: 8em;
-}
-.tabs-container {
-    outline: 1px solid var(--color-outline-gray);
-}
-.tabs-container a.tab {
-    flex-grow: 1;
-    text-align: center;
-    font-size: 1.1em;
-    font-weight: bold;
-    color: var(--color-twitter-text-gray);
-    padding: 0.8em;
-}
-.tabs-container a.tab.active-tab {
-    color: var(--color-twitter-blue);
-    border-bottom: 0.2em solid var(--color-twitter-blue);
-}
-.tabs-container a.tab:hover {
-    color: var(--color-twitter-blue);
+/**
+ * Author info module
+ */
+.author-info {
+	display: flex;
+	align-items: center;
+	cursor: default;
+
+	.author-info__name-and-handle {
+		padding: 0 0.6em !important; /* !important to make the ".button .span" rule in the login button not overrule it */
+	}
+	.author-info__display-name {
+		font-weight: bold;
+		white-space: nowrap;
+	}
+	.author-info__handle {
+		color: var(--color-twitter-text-gray);
+	}
 }
 
-.pinned-tweet__pin-container {
-    margin: 0.5em 0em -1em 3em;
-    z-index: 1;
-    position: relative; /* z-index is ignored if `position` is "static" */
-    gap: 0.2em;
-}
-img.svg-icon.pinned-tweet__pin-icon {
-    filter: invert(43%) saturate(30%);
-    width: 1em;
-    height: auto;
+/**
+ * List (i.e.,, of users) module
+ */
+.users-list {
+	display: flex;
+	flex-direction: column;
+	border-color: var(--color-twitter-off-white-dark);
+	border-top-style: double;
+	border-width: 4px;
+
+	.author-info .profile-image__image {
+		width: 4em;
+		height: 4em;
+	}
+	.user {
+		border-color: var(--color-twitter-off-white-dark);
+		border-bottom-style: solid;
+		border-width: 1px;
+		padding: 1em;
+	}
+	.user p.bio {
+		margin: 0 5.3em;
+		font-size: 0.9em;
+		color: var(--color-twitter-text-gray);
+	}
 }
 
-.vertical-reply-line-container {
-    flex-grow: 0;
-    flex-shrink: 0;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    width: 1em; /* will be overridden by, e.g., parent-thread properties */
-}
-.vertical-container-1 {
-    flex-grow: 1;
-    flex-shrink: 1;
+/******************************************************
+ * Tweets
+ ******************************************************/
+
+/**
+ * Tweet module
+ */
+.tweet {
+	padding: 0 1.5em;
+	position: relative;
+	z-index: 0;  /* Dunno why, but without it, hovering a tweet with a Poll hides the poll fill bars */
+	overflow: hidden; /* Otherwise HTMX spinner sticks over the rounded edges in a quoted tweet */
+
+	/**
+	 * Set padding and borders around the tweet based on what type of tweet it is, and where it occurs
+	 */
+	.timeline &, .tweet__quoted-tweet &, .dm-message & {
+		/* Timeline tweets and quoted tweets, but not tweets in a thread */
+		/* TODO: what about DM tweet-previews? */
+		padding-top: 0.6em;
+		padding-bottom: 0.6em;
+	}
+	.timeline > &, .pinned-tweet & {
+		/* not for nested (i.e., quoted) tweets */
+		border-bottom: 1px solid var(--color-twitter-off-white-dark);
+	}
+
+	/**
+	 * Mouse-over effects
+	 */
+	:not(.focused-tweet) > &:hover:not(:has(&:hover)) {
+		/* Add mouse-over background effect */
+		background-color: var(--color-twitter-off-white);
+	}
+	:not(.focused-tweet) > & {
+		/* Clickable tweets should make the cursor indicate an on-click action ("pointer" cursor) */
+		cursor: pointer;
+	}
+
+	.tweet__header-container {
+		display: flex;
+		align-items: center;
+	}
+
+	.tweet__vertical-container {
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+
+	/**
+	 * Tweet content
+	 */
+	.tweet__embedded-image {
+		max-width: 95%;
+		max-height: 30em;
+		width: auto;
+		height: auto;
+	}
+	& video {
+		max-height: 25em;
+		max-width: 100%;
+	}
+	.tombstone {
+		outline: 1px solid var(--color-outline-gray);
+		background-color: var(--color-twitter-off-white);
+		padding: 0.5em 1em;
+		border-radius: 0.5em;
+		color: var(--color-twitter-text-gray);
+	}
+	.tweet__quoted-tweet {
+		margin: 1em 0;
+	}
 }
 
-.posted-at-container {
-    flex-grow: 1;
-    min-width: 5em;
-}
-p.posted-at {
-    float: right;
-    color: var(--color-twitter-text-gray);
-    font-size: 0.875em;
-    white-space: nowrap;
+/**
+ * Retweet info module
+ */
+.retweet-info {
+	margin-left: 3.5em;
+	display: flex;
+	align-items: center;
+	opacity: 0.8;
+	cursor: default;
+
+	.retweet-info__retweeted-by-label {
+		margin: 0 0.2em 0 0.5em;
+	}
+	.svg-icon {
+		width: 1.2em; /* override default from .svg-icon of 1.5em */
+		opacity: 0.6; /* Probably not the right way to change the color from black to gray */
+	}
 }
 
-.interactions-bar {
-    display: flex;
-    flex-direction: row;
-    margin: 0.5em 0;
-}
-.interaction-stat {
-    flex-grow: 1;
-    display: flex;
-}
-.interaction-stat span {
-    line-height: 1.5em;
-    padding: 0 0.5em;
-}
-.interactions-bar .dummy {
-    flex-grow: 5;
+/**
+ * Reply-mentions module
+ */
+.reply-mentions {
+	display: flex;
+	align-items: center;
+	cursor: default;
+	flex-grow: 1;
+	justify-content: center;
+	flex-wrap: wrap;
+
+	.reply-mentions__list {
+		padding: 0 0.5em;
+	}
+	.reply-mentions__dm-message__replying-to-label {
+		color: var(--color-twitter-text-gray);
+	}
 }
 
-#focused-tweet {
-    border-bottom: 1px solid var(--color-twitter-off-white-dark);
-    padding-bottom: 0.5em;
-}
-
-
-.reply-chain {
-    margin-top: 1em;
-}
-.reply-chain > :last-child {
-    padding-bottom: 1em;
-    border-bottom: 1px solid var(--color-twitter-off-white-dark);
-}
-ul.quick-links {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    align-items: flex-start;
-    padding: 0 2em;
-}
-.quick-link {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.5em;
-    margin: 0.2em;
-    border-radius: 100em; /* any large amount, just don't use % because then it makes an ellipse */
-    cursor: pointer;
-}
-.quick-link:hover {
-    background-color: var(--color-twitter-blue-light);
-}
-.quick-link:active {
-    transform: translate(0.1em, 0.1em);
-    background-color: var(--color-twitter-blue);
-}
-/* TODO: "quick-link" is really more of a button */
-.quick-link.danger {
-    background-color: var(--color-twitter-danger-red2);
-}
-.quick-link.danger:hover {
-    background-color: var(--color-twitter-danger-red2-light);
-}
-.quick-link.danger:active {
-    background-color: var(--color-twitter-danger-red2);
-}
-
-.quick-link span {
-    padding: 0 0.3em;
-    white-space: nowrap;
-}
-
-.followers-count, .following-count {
-    font-weight: bold;
-}
-.followers-label, .following-label {
-    color: var(--color-twitter-text-gray);
-}
-.bio-info-with-icon {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.3em;
-}
-.user-header-info-container {
-    padding: 2em;
-    border-bottom: 1px solid var(--color-outline-gray);
-}
-.timeline .tweet, .quoted-tweet .tweet {
-    padding-top: 0.8em;
-    padding-bottom: 0.8em;
-}
-.timeline > .tweet, .timeline > .pinned-tweet {
-    /* not for nested (i.e., quoted) tweets */
-    border-bottom: 1px solid var(--color-twitter-off-white-dark);
-}
-
-.timeline .timeline-bottom-container {
-    text-align: center;
-    font-size: 1.2em;
-    padding: 1em 0;
-}
-.timeline .timeline-bottom-container .eof-indicator {
-    color: var(--color-twitter-text-gray);
-}
-.timeline .timeline-bottom-container .show-more {
-    padding: 0em 0.8em;
-    display: inline-block;
-    border: 2px solid var(--color-twitter-blue);
-    color: var(--color-twitter-text-gray);
-    font-size: 0.9em;
-}
-.timeline .timeline-bottom-container .show-more:not(:hover):not(:active) {
-    background-color: var(--color-twitter-blue-extra-light);
-}
-
-.back-button {
-    flex-grow: 0;
-    border-radius: 50%;
-    border: 2px solid black;
-    width: 2em;
-    position: relative;
-    height: 2em;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-
-img.svg-icon {
-    width: 1.5em;
-    height: auto;
-}
-
-svg {
-    width: 1.5em;
-}
-.back-button img {
-    color: rgb(239, 243, 244);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-.search-form {
-    margin-left: 1em;
-    flex-grow: 1;
-    display: flex;
-}
-#search-bar {
-    flex-grow: 1;
-}
-
-.login {
-    width: 60%;
-    margin: 20% auto;
-}
-.login-form input {
-    width: 100%;
-    border-radius: 0.5em;
-
-    padding: 0.5em 0.6em;
-}
-.login-form .error {
-    color: #C0392B;
-    font-weight: bold;
-}
-
-.login-form .error + input {
-    border-color: #C0392B;
-    border-width: 2px;
-}
-
-.field-container {
-    padding: 0.5em 0;
-}
-.submit-container {
-    text-align: right;
-}
-
-.change-session-form select {
-    display: block;
-    width: 100%;
-}
-#logged-in-user-info {
-    font-size: 0.8em;
-    margin-top: 1em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.quick-link .author-info {
-    pointer-events: none;
-}
-.retweet-info-container {
-    margin-left: 3.5em;
-    display: flex;
-    align-items: center;
-    opacity: 0.8;
-}
-.retweet-info-container .svg-icon {
-    width: 1.2em; /* override default from .svg-icon of 1.5em */
-    opacity: 0.6;
-    margin-right: 0.3em;
-}
-.retweeted-by-label {
-    margin: 0 0.2em;
-}
-
-.user-bio {
-    margin: 1.5em 0;
-}
-
-.followers-followees-container {
-    margin-top: 1em;
-    gap: 4em;
-}
-.followers-followees-container .spacer {
-    flex-grow: 1;
-}
-.user-feed-buttons-container, .tweet-buttons-container {
-    display: flex;
-    flex-direction: row;
-}
-.tweet-buttons-container .quick-link {
-    margin: 0;
-    font-size: 0.8em;
+/**
+ * Embedded link module
+ */
+.embedded-link {
+	padding: 1.3em;
+	margin-top: 1em;
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-twitter-off-white);
+
+	.embedded-link__preview-image {
+		border-radius: 1em;
+		max-width: 100%;
+		height: auto; /* preserve aspect ratio */
+	}
+	.embedded-link__description {
+		color: var(--color-twitter-text-gray);
+		font-size: 0.8em;
+		margin: 0;
+	}
+	.embedded-link__domain {
+		margin-top: 0.2em;
+	}
+	.embedded-link__domain__contents {
+		margin-left: 0.3em;
+	}
 }
 
+/**
+ * Poll module
+ */
 .poll {
-    padding: 1em;
-}
-.poll-choice {
-    position: relative;
-    margin: 0.3em 0;
-}
-.poll-fill-bar {
-    position: absolute;
-    height: 100%;
-    z-index: -1;
-    background-color: var(--color-twitter-off-white-dark);
-}
-.poll-fill-bar.poll-winner {
-    background-color: var(--color-twitter-blue-light);
-}
-.poll-info-container {
-    width: 100%;
-    line-height: 2em;
-    margin: 0 0.5em;
-}
-.poll-choice-label {
-    width: 50%;
-}
-.poll-choice-votes {
-    width: 50%;
-}
-.poll-metadata {
-    color: var(--color-twitter-text-gray);
-    margin: 0;
-    font-size: 0.9em;
+	padding: 1em;
+
+	.poll__choice {
+		position: relative;
+		margin: 0.3em 0;
+	}
+	.poll__choice-info {
+		width: 100%;
+		line-height: 2em;
+		margin: 0 0.5em;
+	}
+	.poll__choice-label {
+		width: 50%;
+	}
+	.poll__choice-votes {
+		width: 50%;
+	}
+	.poll__choice-fill-bar {
+		position: absolute;
+		height: 100%;
+		z-index: -1;
+		background-color: var(--color-twitter-off-white-dark);
+
+		&.poll__choice-fill-bar--winner {
+			background-color: var(--color-twitter-blue-light);
+		}
+	}
+	.poll__metadata {
+		color: var(--color-twitter-text-gray);
+		margin: 0;
+		font-size: 0.9em;
+	}
 }
 
+/**
+ * Space module
+ */
 .space {
-    outline: 1px solid var(--color-space-purple-outline);
-    background-color: var(--color-space-purple);
-    border-radius: 1.5em;
-    padding: 1.5em;
-}
-.space-title {
-    padding-top: 0.5em;
-}
-.space .host-label {
-    color: var(--color-space-purple-outline);
-}
-.space-date {
-    color: var(--color-space-purple-outline);
-    font-size: 0.8em;
-}
-.space-info-list {
-    padding: 0;
-}
-.space .layout-spacer {
-    flex-grow: 1;
-}
-ul.space-participants-list {
-    list-style: none;
-    padding: 0;
-}
-ul.space-participants-list li {
-    padding: 0.5em 0;
-    display: inline-block;
-    width: 24%;
-}
-.space-participants-list .author-info {
-    font-size: 0.9em;
-    line-height: 1.2em;
-}
-.space-participants-list .author-info .profile-image {
-    font-size: 0.8em;
+	outline: 1px solid var(--color-space-purple-outline);
+	background-color: var(--color-space-purple);
+	border-radius: 1.5em;
+	padding: 1.5em;
+
+	.space__title {
+		padding-top: 0.5em;
+	}
+	.space__host__label {
+		color: var(--color-space-purple-outline);
+	}
+	.space__date {
+		color: var(--color-space-purple-outline);
+		font-size: 0.8em;
+	}
+	.space__info__list {
+		padding: 0;
+	}
+	.space__layout-spacer {
+		flex-grow: 1;
+	}
+
+	.space__participants-list {
+		padding: 0;
+
+		/* List items */
+		& > * {
+			padding: 0.5em 0;
+			display: inline-block;
+			width: 24%;
+			font-size: 0.9em;
+			line-height: 1.2em;
+		}
+	}
 }
 
-.tombstone {
-    outline: 1px solid var(--color-outline-gray);
-    background-color: var(--color-twitter-off-white);
-    padding: 0.5em 1em;
-    border-radius: 0.5em;
-    color: var(--color-twitter-text-gray);
-}
-.tweet-image {
-    max-width: 95%;
-    max-height: 30em;
-    width: auto;
-    height: auto;
-}
-.tweet video {
-    max-height: 25em;
-}
-.like-icon {
-    cursor: pointer;
-}
-.like-icon.liked, .like-icon:hover {
-    filter: invert(20%) sepia(97%) saturate(4383%) hue-rotate(321deg) brightness(101%) contrast(95%);
+/**
+ * Posted-at module
+ */
+.posted-at {
+	flex-grow: 1;
+	min-width: 5em;
+	width: fit-content;
+
+	.posted-at__text {
+		float: right;
+		color: var(--color-twitter-text-gray);
+		font-size: 0.875em;
+		white-space: nowrap;
+	}
 }
 
-.users-list-previews {
-    border-color: var(--color-twitter-off-white-dark);
-    border-top-style: double;
-    border-width: 4px;
+/**
+ * Interactions bar module
+ */
+.interactions {
+	display: flex;
+	flex-direction: row;
+	margin: 0.5em 0;
+
+	.interactions__stat {
+		flex-grow: 1;
+		display: flex;
+
+		& span {
+			line-height: 1.5em;
+			padding: 0 0.5em;
+		}
+	}
+
+	/* Empty <div> used to make the spacing more good */
+	.interactions__dummy {
+		flex-grow: 5;
+	}
+
+	.interactions__like-icon {
+		cursor: pointer;
+		&.liked, &:hover {
+			filter: invert(20%) sepia(97%) saturate(4383%) hue-rotate(321deg) brightness(101%) contrast(95%);
+		}
+	}
+
+	/* Make the buttons slightly smaller */
+	.button {
+		margin: 0;
+		font-size: 0.8em;
+	}
 }
 
-.users-list-preview {
-    padding: 0.5em 1em;
-    border-color: var(--color-twitter-off-white-dark);
-    border-bottom-style: solid;
-    border-width: 1px;
-}
-.users-list-preview .list-info-container{
-    display: flex;
-    align-items: center;
-    font-size: 1.5em;
-    cursor: pointer;
-}
-.users-list-preview .list-info-container span.num-users {
-    margin-left: 1em;
-    color: var(--color-twitter-text-gray);
-}
-.users-list-preview .list-info-container .first-N-profile-images {
-    display: flex;
-    align-items: flex-end;
-    margin-left: 1.5em;
-}
-.users-list-preview .list-info-container .first-N-profile-images a {
-    margin-right: -1.2em;
-    line-height: 0; /* TODO: This is duplicated from `.author-info a` and possibly others */
+/******************************************************
+ * Conversation thread / tweet detail
+ ******************************************************/
+
+.tweet-detail {
+	& :first-child > .tweet {
+		/* The tweet at the top of a thread should have some top-padding */
+		padding-top: 1em;
+	}
 }
 
-.users-list-preview .list-info-container .first-N-profile-images .ellipsis {
-    margin-left: 1.5em;
+/**
+ * Focused tweets
+ */
+.focused-tweet {
+	& > .tweet {
+		border-bottom: 1px solid var(--color-twitter-off-white-dark);
+		padding-bottom: 0.5em;
+	}
+
+	/* Make font bigger in focused tweets, unless it's in a quoted tweet */
+	.text {
+		font-size: 1.4em;
+	}
+	.tweet__quoted-tweet .text {
+		font-size: unset;
+	}
 }
 
-.users-list-container {
-    display: flex;
-    flex-direction: column;
-    border-color: var(--color-twitter-off-white-dark);
-    border-top-style: double;
-    border-width: 4px;
+.reply-chain > :last-child > .tweet {
+	/* Last tweet in a reply chain should have bottom-padding */
+	padding-bottom: 1em;
+	border-bottom: 1px solid var(--color-twitter-off-white-dark);
 }
-.users-list-container .author-info .profile-image {
-    width: 4em;
-    height: 4em;
+
+/**
+ * Threaded conversation string (visual thread indicator) module
+ */
+.string-box {
+	width: 3em;
+	margin-right: 0.5em;
+	flex-grow: 0;
+	flex-shrink: 0;
+
+	/* Make the .string take up 100% of vertical space */
+	flex-direction: column;
+	align-self: stretch;
+
+	/* Only show it in parent threads and reply chains */
+	display: none;
+	.thread-parent-tweet &, .reply-chain & {
+		/* Not if it's in a quoted tweet */
+		&:not(.tweet__quoted-tweet &) {
+			display: flex; /* Show it */
+		}
+	}
+
+	.string {
+		width: 2px;
+		flex-grow: 1;
+		margin: auto;
+		background-color: var(--color-twitter-off-white-dark);
+
+		/* All parent tweets, and all but the last reply */
+		display: none;
+		.thread-parent-tweet &, .reply-chain > :not(:last-child) & {
+			display: revert;
+		}
+	}
 }
-.users-list-container .user {
-    border-color: var(--color-twitter-off-white-dark);
-    border-bottom-style: solid;
-    border-width: 1px;
-    padding: 1em;
+
+
+/******************************************************
+ * Timeline
+ ******************************************************/
+
+/**
+ * Timeline module
+ */
+.timeline {
+	.timeline__bottom {
+		text-align: center;
+		font-size: 1.2em;
+		padding: 1em 0;
+	}
+	.timeline__eof-label {
+		color: var(--color-twitter-text-gray);
+	}
+	.timeline__show-more-button {
+		padding: 0em 0.8em;
+		display: inline-block;
+		border: 2px solid var(--color-twitter-blue);
+		color: var(--color-twitter-text-gray);
+		font-size: 0.9em;
+
+		&:not(:hover):not(:active) {
+			/* TODO: maybe this should be a reusable button style */
+			background-color: var(--color-twitter-blue-extra-light);
+		}
+	}
 }
-.users-list-container .user p.bio {
-    margin: 0 5.3em;
-    font-size: 0.9em;
-    color: var(--color-twitter-text-gray);
+
+/******************************************************
+ * Navigation and base page
+ ******************************************************/
+
+/**
+ * Nav-sidebar module
+ */
+.nav-sidebar {
+	.nav-sidebar__buttons {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		padding: 0 2em;
+	}
+
+	#logged-in-user-info {
+		font-size: 0.8em;
+		margin-top: 1em;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.button .author-info {
+		pointer-events: none;
+	}
+}
+
+/**
+ * Search bar module
+ */
+.search-bar {
+	.search-bar__back-button {
+		flex-grow: 0;
+		border-radius: 50%;
+		border: 2px solid black;
+		width: 2em;
+		position: relative;
+		height: 2em;
+		box-sizing: border-box;
+		cursor: pointer;
+
+		& img {
+			color: rgb(239, 243, 244);
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+	.search-bar__form {
+		margin-left: 1em;
+		flex-grow: 1;
+		display: flex;
+	}
+	.search-bar__input {
+		flex-grow: 1;
+	}
+}
+
+/******************************************************
+ * User feeds
+ ******************************************************/
+
+/**
+ * User-feed header module
+ */
+.user-header {
+	border-bottom: 1px solid var(--color-outline-gray);
+
+	.user-header__profile-banner-image {
+		width: 100%;
+	}
+
+	.user-header__info-container {
+		padding: 2em;
+	}
+
+	.user-header__bio {
+		margin: 1.5em 0;
+	}
+
+	/* Special settings for profile images in user headers */
+	.author-info {
+		font-size: 1.3em;
+		padding: 1em;
+	}
+	.profile-image__image {
+		width: 8em;
+		height: 8em;
+	}
+}
+
+/**
+ * Followers + followees module
+ */
+.followers-followees {
+	margin-top: 1em;
+	gap: 4em;
+
+	.followers-followees__count {
+		font-weight: bold;
+	}
+	& label {
+		color: var(--color-twitter-text-gray);
+		cursor: unset;
+	}
+	.spacer {
+		flex-grow: 1;
+	}
+}
+
+/**
+ * Pinned tweet mini-module
+ */
+.pinned-tweet__pin-container {
+	margin: 0.5em 0em -1em 3em;
+	z-index: 1; /* Otherwise it disappears behind the tweet background color on mouse-over */
+	position: relative; /* z-index is ignored if `position` is "static" */
+
+	.pinned-tweet__pin-icon {
+		filter: invert(43%) saturate(30%);
+		width: 1em;
+		height: auto;
+	}
+}
+
+/******************************************************
+ * Search page
+ ******************************************************/
+
+/**
+ * Search page sort-order module
+ */
+.sort-order {
+	padding: 1em 1em 1em 3em;
+	border-bottom: 1px solid var(--color-outline-gray);
+	.sort-order__label {
+		font-weight: bold;
+	}
+	.sort-order__dropdown {
+		text-transform: capitalize;
+		margin: 0 1em;
+	}
+}
+
+/******************************************************
+ * Login page
+ ******************************************************/
+
+/**
+ * Login form module
+ */
+.login-form {
+	.login-form__field-container {
+		padding: 0.5em 0;
+	}
+	.login-form__submit-container {
+		text-align: right;
+	}
+	.login-form__error-label {
+		color: #C0392B;
+		font-weight: bold;
+
+		& + input {
+			border-color: #C0392B;
+			border-width: 2px;
+		}
+	}
+	.login-form__input {
+		width: 100%;
+		border-radius: 0.5em;
+		padding: 0.5em 0.6em;
+		flex-grow:;
+	}
+	& input[type="submit"] {
+		padding: 1em;
+	}
+}
+.choose-session {
+	margin-top: 2em;
+
+	.choose-session__form-contents {
+		padding-top: 1em;
+		gap: 3em;
+
+	}
+	.choose-session__dropdown {
+		flex-grow: 1;
+	}
+}
+
+/******************************************************
+ * Lists pages
+ ******************************************************/
+
+.list-of-lists {
+	border-color: var(--color-twitter-off-white-dark);
+	border-top-style: double;
+	border-width: 4px;
+}
+
+/**
+ * List preview module
+ */
+.list-preview {
+	padding: 0.5em 1em;
+	border-color: var(--color-twitter-off-white-dark);
+	border-bottom-style: solid;
+	border-width: 1px;
+
+	.list-preview__info-container{
+		display: flex;
+		align-items: center;
+		font-size: 1.5em;
+		cursor: pointer;
+	}
+	.list-preview__num-users {
+		margin-left: 1em;
+		color: var(--color-twitter-text-gray);
+	}
+	.list-preview__first-N-profile-images {
+		display: flex;
+		align-items: flex-end;
+		margin-left: 1.5em;
+
+		.profile-image {
+			/* Make profile images in the list preview stack up on each other */
+			margin-right: -1.2em;
+		}
+		.ellipsis {
+			/* Counteract the above; the ellipsis should be spaced normally */
+			margin-left: 1.5em;
+		}
+	}
 }
 
 .add-users-container {
-    padding: 1em;
-    text-align: center;
+	padding: 1em;
+	text-align: center;
 }
 
-.sort-order-container {
-    padding: 1em 1em 1em 3em;
-    margin-bottom: -0.5em;
-    border-bottom: 1px solid var(--color-outline-gray);
-}
-.sort-order-container select {
-    text-transform: capitalize;
-    margin: 0 1em;
-}
-.sort-order-container .sort-order-label {
-    font-weight: bold;
+/******************************************************
+ * DMs / Messages
+ ******************************************************/
+
+/**
+ * Chat list entry module
+ */
+.chat-list-entry {
+	border-bottom: 1px solid var(--color-outline-gray);
+	padding: 1em 1em 0 1em;
+	box-sizing: border-box;
+	cursor: pointer;
+
+	&.chat-list-entry--active-chat {
+		color: var(--color-twitter-blue);
+		border-left: 0.2em solid var(--color-twitter-blue);
+		background-color: var(--color-twitter-off-white);
+
+		.profile-image__image {
+			box-shadow: 0 0 1em 0em var(--color-twitter-blue);
+		}
+	}
+	.chat-list-entry__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.chat-list-entry__groupchat-profile-image {
+		display: flex;
+	}
+	.chat-list-entry__groupchat-profile-image .display-name {
+		padding: 0.6em;
+		font-style: italic;
+		font-weight: bold; /* TODO: redundancy check `.author-info__display-name` */
+		white-space: nowrap;
+		cursor: default; /* TODO: redundancy check `.author-info` */
+	}
+	.chat-list-entry__message-preview {
+		font-size: 0.9em;
+		color: var(--color-twitter-text-gray);
+		padding: 0 1em;
+		border-left: 1px solid var(--color-outline-gray);
+	}
+
+	.posted-at__text {
+		margin: 0;
+	}
 }
 
-.chats-container {
-    display: flex;
-    flex-direction: row;
+/**
+ * DM message module
+ */
+.dm-message {
+	display: flex;
+	flex-direction: column;
+	margin: 1em 0;
+	/**
+	 * Compact mode:
+	 * 		margin: 0.5em 0;
+	 */
 
-    /** Setup to allow the two panes to scroll independently **/
-    height: 100vh;
-    padding-top: 4em;
-    margin-top: -4em;
-    box-sizing: border-box;
+	.dm-message__row {
+		align-items: stretch;
+
+		.our-message & {
+			flex-direction: row-reverse;
+		}
+	}
+	.dm-message__sender-profile-img {
+		display: flex;
+		align-items: flex-end;
+	}
+	.dm-message__sender-profile-img a {
+		line-height: 0; /* TODO: This is redundant with ".author-info a" rule above */
+	}
+	.dm-message__contents {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		max-width: 80%;
+		margin: 0 0.5em;
+
+		.our-message & {
+			align-items: flex-end;
+		}
+	}
+	.dm-message__replying-to {
+		background-color: #f0f0f0f0;
+		border-radius: 1em 1em 1em 0em;
+		padding: 0.5em 1.2em 2em 1.2em;
+		margin: 0 0 -2em 0.2em;
+		font-size: 0.9em;
+
+		.our-message & {
+			border-radius: 1em 1em 0em 1em;
+			margin: 0 0.2em -2em;
+		}
+	}
+	.dm-message__replying-to-label {
+		font-size: 0.8em;
+		color: var(--color-twitter-text-gray);
+
+		& img.svg-icon {
+			width: 1em;
+		}
+	}
+	.dm-message__tweet-preview {
+		border-radius: 1em;
+		overflow: hidden; /* TODO: redundancy check-- why is this necessary?  check .rounded-gray-outline */
+		border: 1px solid var(--color-outline-gray);
+		max-width: 100%;
+	}
+	.dm-message__embedded-image, .dm-message__embedded-video {
+		max-width: 100%;
+		height: auto; /* preserve aspect ratio */
+	}
+	.dm-message__text-content {
+		display: inline-block;
+		padding: 1em;
+		background-color: #ddd;
+		border-radius: 1em;
+		margin: 0;
+
+		/**
+		 * Compact mode:
+		 *
+		    display: inline-block;
+		    padding: 0.5em 1em;
+		    background-color: #ddd;
+		    border-radius: 1em;
+		    margin: auto;
+		    min-height: 2em;
+		    display: flex;
+		    flex-direction: column;
+		    justify-content: space-around;
+		 */
+		.our-message & {
+			background-color: var(--color-twitter-blue-light);
+		}
+	}
+
+	.sent-at {
+		flex-grow: 1;
+		min-width: 5em;
+		width: fit-content;
+
+		.sent-at__text {
+			float: right;
+			color: var(--color-twitter-text-gray);
+			font-size: 0.875em;
+			white-space: nowrap;
+		}
+	}
+	.sent-at__text {
+		margin: 0 4.5em;
+	}
+	.dm-message__reactions {
+		display: flex;
+		padding: 0 4em;
+		cursor: default;
+
+		.our-message & {
+			flex-direction: row-reverse;
+		}
+	}
+
+	&.our-message {
+		align-items: flex-end;
+	}
 }
-.chats-container .chat-list {
-    flex-basis: 0;
-    flex-grow: 4;
-    display: flex;
-    flex-direction: column;
-    overflow-y: scroll;
-}
-.chats-container .chat-list .chat {
-    border-bottom: 1px solid var(--color-outline-gray);
-    padding: 1em 1em 0 1em;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-.chats-container .chat-list .chat.active-chat {
-    color: var(--color-twitter-blue);
-    border-left: 0.2em solid var(--color-twitter-blue);
-    background-color: var(--color-twitter-off-white);
-}
-.chats-container .chat-list .chat.active-chat .profile-image{
-    box-shadow: 0 0 1em 0em var(--color-twitter-blue);
-}
-.chats-container .chat-list .chat .chat-preview-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.chats-container .chat-list .chat .chat-preview-header .posted-at {
-    margin: 0;
-}
-.chats-container .chat-list .chat .groupchat-profile-image-container {
-    display: flex;
-}
-.chats-container .chat-list .chat .groupchat-profile-image-container .display-name {
-    padding: 0.6em;
-    font-style: italic;
-}
-.chats-container .chat-list .chat .chat-preview {
-    font-size: 0.9em;
-    color: var(--color-twitter-text-gray);
-    padding: 0 1em;
-    border-left: 1px solid var(--color-outline-gray);
-}
-.chats-container #chat-view {
-    flex-basis: 0;
-    flex-grow: 7;
-    border-left: 1px solid var(--color-outline-gray);
-    padding: 0.5em;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-}
-.chats-container #chat-view .chat-messages {
-    flex-grow: 1;
-    overflow-y: auto;
-}
-.chats-container #chat-view .our-message {
-    align-items: flex-end;
-}
-.dm-message-and-reacts-container {
-    display: flex;
-    flex-direction: column;
-    margin: 1em 0;
-}
-.dm-message-text-container {
-    display: inline-block;
-    padding: 1em;
-    background-color: #ddd;
-    border-radius: 1em;
-    margin: 0;
-}
-.our-message .dm-message-text-container {
-    background-color: var(--color-twitter-blue-light);
-}
-.sender-profile-image-container {
-    display: flex;
-    align-items: flex-end;
-}
-.sender-profile-image-container a {
-    line-height: 0; /* TODO: This is redundant with ".author-info a" rule above */
-}
-.dm-message-container {
-    display: flex;
-    align-items: stretch;
-    gap: 0.5em;
-}
-.our-message .dm-message-container {
-    flex-direction: row-reverse;
-}
-.dm-message-reactions {
-    display: flex;
-    padding: 0 4em;
-    cursor: default;
-}
-.our-message .dm-message-reactions {
-    flex-direction: row-reverse;
-}
-.dm-message-and-reacts-container p.posted-at {
-    margin: 0 4.5em;
-}
-.dm-message-content-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 80%;
-}
-.our-message .dm-message-content-container {
-    align-items: flex-end;
-}
-.dm-message-content-container .tweet-preview {
-    border-radius: 1em;
-    border: 1px solid var(--color-outline-gray);
-    max-width: 100%;
-}
-.dm-message-content-container .replying-to-container {
-    background-color: #f0f0f0f0;
-    border-radius: 1em 1em 1em 0em;
-    padding: 0.5em 1.2em 2em 1.2em;
-    margin: 0 0 -2em 0.2em;
-    font-size: 0.9em;
-}
-.our-message .dm-message-content-container .replying-to-container {
-    border-radius: 1em 1em 0em 1em;
-    margin: 0 0.2em -2em;
-}
-.dm-message-content-container .replying-to-label {
-    font-size: 0.8em;
-    display: flex;
-    gap: 0.2em;
-}
-.dm-message-content-container .replying-to-label img.svg-icon {
-    width: 1em;
-}
-.dm-embedded-image {
-    max-width: 100%;
-    height: auto; /* preserve aspect ratio */
-}
-.dm-composer-container {
-    padding-top: 0.5em;
-    border-top: 1px solid var(--color-outline-gray);
-/*    position: absolute;
-    bottom: 1em;
-    right: 0.5em;
-    left: 0.5em;*/
-}
-.dm-composer-container form {
-    display: flex;
-}
-#composer {
-    flex-grow: 1;
-    border: 1px solid #ccc;
-    font-family: inherit;
-    font-size: inherit;
-    padding: 1px 6px;
-    max-height: 10em;
-    overflow-y: auto; /* scrollbar only if needed */
+
+/**
+ * Messages page DM composer module
+ */
+.dm-composer {
+	padding-top: 0.5em;
+	border-top: 1px solid var(--color-outline-gray);
+
+	& form {
+		display: flex;
+	    gap: 1em;
+	    padding: 0.5em 1em;
+	    align-items: center;
+	}
+	[role="textbox"] {
+		flex-grow: 1;
+		border: 1px solid #ccc;
+		font-family: inherit;
+		font-size: inherit;
+		padding: 1px 6px;
+		max-height: 10em;
+		min-height: 3em;
+		overflow-y: auto; /* scrollbar only if needed */
+	    border: 2px solid var(--color-outline-gray);
+	    border-radius: 0.5em;
+	}
+	& input[type="submit"] {
+		flex-shrink: 0;
+		flex-grow: 0;
+		height: 3em;
+		width: 6em;
+	}
 }
diff --git a/internal/webserver/tpl/http_500.tpl b/internal/webserver/tpl/http_500.tpl
index acfb5e3..ff9dd4a 100644
--- a/internal/webserver/tpl/http_500.tpl
+++ b/internal/webserver/tpl/http_500.tpl
@@ -1,8 +1,6 @@
 {{define "error-toast"}}
-  <div class="server-error-msg">
-    <div class="error-msg-container">
-      <span>{{.ErrorMsg}}</span>
-      <button class="suicide" onclick="htmx.remove('.server-error-msg')">X</button>
-    </div>
-  </div>
+  <dialog class="server-error-msg" open>
+    <span>{{.ErrorMsg}}</span>
+    <button class="suicide" onclick="htmx.remove('.server-error-msg')">X</button>
+  </dialog>
 {{end}}
diff --git a/internal/webserver/tpl/includes/author_info.tpl b/internal/webserver/tpl/includes/author_info.tpl
index b3c22a8..1c794e7 100644
--- a/internal/webserver/tpl/includes/author_info.tpl
+++ b/internal/webserver/tpl/includes/author_info.tpl
@@ -1,25 +1,16 @@
 {{define "author-info"}}
 <div class="author-info" hx-boost="true">
-  <a class="unstyled-link" href="/{{.Handle}}">
-    <img
-      class="profile-image"
-      {{if .IsContentDownloaded}}
-        src="/content/{{.GetProfileImageLocalPath}}"
-      {{else}}
-        src="{{.ProfileImageUrl}}"
-      {{end}}
-    />
-  </a>
-  <span class="name-and-handle">
-    <div class="display-name row">
+  {{template "circle-profile-img" .}}
+  <span class="author-info__name-and-handle">
+    <div class="author-info__display-name row">
       {{.DisplayName}}
       {{if .IsPrivate}}
         <div class="circle-outline">
-          <img class="svg-icon" src="/static/icons/lock.svg" width="24" height="24" />
+          <img class="svg-icon" src="/static/icons/lock.svg" width="24" height="24">
         </div>
       {{end}}
     </div>
-    <div class="handle">@{{.Handle}}</div>
+    <div class="author-info__handle">@{{.Handle}}</div>
   </span>
 </div>
 {{end}}
diff --git a/internal/webserver/tpl/includes/base.tpl b/internal/webserver/tpl/includes/base.tpl
index 90410d4..9ba3fac 100644
--- a/internal/webserver/tpl/includes/base.tpl
+++ b/internal/webserver/tpl/includes/base.tpl
@@ -24,11 +24,11 @@
     </head>
     <body>
       <header class="row search-bar">
-        <a onclick="window.history.back()" class="back-button quick-link">
+        <a onclick="window.history.back()" class="button search-bar__back-button">
           <img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/>
         </a>
-        <form class="search-form" hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
-          <input id="search-bar"
+        <form class="search-bar__form" hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
+          <input id="search-bar" class="search-bar__input"
             name="q"
             placeholder="Search" type="text"
             {{with (search_text)}} value="{{.}}" {{end}}
@@ -39,9 +39,9 @@
       <main>
         {{template "main" .}}
       </main>
-      <dialog id="image_carousel">
-        <a class="quick-link close-button" onclick="image_carousel.close()">X</a>
-        <img src="">
+      <dialog id="image_carousel" class="image-carousel">
+        <a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a>
+        <img class="image-carousel__active-image" src="">
       </dialog>
     </body>
   </html>
diff --git a/internal/webserver/tpl/includes/circle_profile_img.tpl b/internal/webserver/tpl/includes/circle_profile_img.tpl
new file mode 100644
index 0000000..5becc6d
--- /dev/null
+++ b/internal/webserver/tpl/includes/circle_profile_img.tpl
@@ -0,0 +1,29 @@
+{{define "circle-profile-img"}}
+  <a class="profile-image" href="/{{.Handle}}">
+    {{/* TODO: add `width` and `height` attrs to the <img>*/}}
+    <img class="profile-image__image"
+      {{if .IsContentDownloaded}}
+        src="/content/{{.GetProfileImageLocalPath}}"
+      {{else}}
+        src="{{.ProfileImageUrl}}"
+      {{end}}
+    >
+  </a>
+{{end}}
+
+<!-- TODO: How to use this in a User Feed without a ton of prop-drilling? -->
+{{define "circle-profile-img-no-link"}}
+  <a class="profile-image"
+  	hx-trigger="click consume"
+    onclick="image_carousel.querySelector('img').src = this.querySelector('img').src; image_carousel.showModal();"
+  >
+    {{/* TODO: add `width` and `height` attrs to the <img>*/}}
+    <img class="profile-image__image"
+      {{if .IsContentDownloaded}}
+        src="/content/{{.GetProfileImageLocalPath}}"
+      {{else}}
+        src="{{.ProfileImageUrl}}"
+      {{end}}
+    >
+  </a>
+{{end}}
diff --git a/internal/webserver/tpl/includes/likes_count.tpl b/internal/webserver/tpl/includes/likes_count.tpl
index c7ef160..e2fa621 100644
--- a/internal/webserver/tpl/includes/likes_count.tpl
+++ b/internal/webserver/tpl/includes/likes_count.tpl
@@ -1,16 +1,16 @@
 {{define "likes-count"}}
-  <div class="interaction-stat" hx-trigger="click consume">
+  <div class="interactions__stat" hx-trigger="click consume">
     {{if .IsLikedByCurrentUser}}
-      <img class="svg-icon like-icon liked" src="/static/icons/like_filled.svg" width="24" height="24"
+      <img class="svg-icon interactions__like-icon liked" src="/static/icons/like_filled.svg" width="24" height="24"
         hx-get="/tweet/{{.ID}}/unlike"
-        hx-target="closest .interaction-stat"
+        hx-target="closest .interactions__stat"
         hx-push-url="false"
         hx-swap="outerHTML focus-scroll:false"
       />
     {{else}}
-      <img class="svg-icon like-icon" src="/static/icons/like.svg" width="24" height="24"
+      <img class="svg-icon interactions__like-icon" src="/static/icons/like.svg" width="24" height="24"
         hx-get="/tweet/{{.ID}}/like"
-        hx-target="closest .interaction-stat"
+        hx-target="closest .interactions__stat"
         hx-push-url="false"
         hx-swap="outerHTML focus-scroll:false"
       />
diff --git a/internal/webserver/tpl/includes/nav_sidebar.tpl b/internal/webserver/tpl/includes/nav_sidebar.tpl
index 3854203..ef2d238 100644
--- a/internal/webserver/tpl/includes/nav_sidebar.tpl
+++ b/internal/webserver/tpl/includes/nav_sidebar.tpl
@@ -1,74 +1,74 @@
 {{define "nav-sidebar"}}
-  <nav id="nav-sidebar">
+  <nav id="nav-sidebar" class="nav-sidebar">
     <div id="logged-in-user-info">
-      <div class="quick-link" hx-get="/login" hx-trigger="click" hx-target="body" hx-push-url="true">
+      <div class="button row" hx-get="/login" hx-trigger="click" hx-target="body" hx-push-url="true">
         {{template "author-info" active_user}}
         <img class="svg-icon" src="/static/icons/dotdotdot.svg" width="24" height="24" />
       </div>
     </div>
-    <ul class="quick-links">
-      <a class="unstyled-link" href="/timeline">
-        <li class="quick-link">
+    <ul class="nav-sidebar__buttons">
+      <a href="/timeline">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/home.svg" width="24" height="24" />
-          <span>Home</span>
+          <label class="nav-sidebar__button-label">Home</label>
         </li>
       </a>
-      <a class="unstyled-link" onclick="document.querySelector('#search-bar').focus()">
-        <li class="quick-link">
+      <a onclick="document.querySelector('#search-bar').focus()">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/explore.svg" width="24" height="24" />
-          <span>Explore</span>
+          <label class="nav-sidebar__button-label">Explore</label>
         </li>
       </a>
-      <a class="unstyled-link" href="#">
-        <li class="quick-link">
+      <a href="#">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/notifications.svg" width="24" height="24" />
-          <span>Notifications</span>
+          <label class="nav-sidebar__button-label">Notifications</label>
         </li>
       </a>
       {{if (not (eq (active_user).Handle "[nobody]"))}}
-        <a class="unstyled-link" href="/messages">
-          <li class="quick-link">
+        <a href="/messages">
+          <li class="button labelled-icon">
             <img class="svg-icon" src="/static/icons/messages.svg" width="24" height="24" />
-            <span>Messages</span>
+            <label class="nav-sidebar__button-label">Messages</label>
           </li>
         </a>
       {{end}}
-      <a class="unstyled-link" href="/lists">
-        <li class="quick-link">
+      <a href="/lists">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/lists.svg" width="24" height="24" />
-          <span>Lists</span>
+          <label class="nav-sidebar__button-label">Lists</label>
         </li>
       </a>
-      <a class="unstyled-link" href="#">
-        <li class="quick-link">
+      <a href="#">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/bookmarks.svg" width="24" height="24" />
-          <span>Bookmarks</span>
+          <label class="nav-sidebar__button-label">Bookmarks</label>
         </li>
       </a>
-      <a class="unstyled-link" href="#">
-      <li class="quick-link">
+      <a href="#">
+      <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/communities.svg" width="24" height="24" />
-        <span>Communities</span>
+        <label class="nav-sidebar__button-label">Communities</label>
       </li>
       </a>
-      <a class="unstyled-link" href="#">
-        <li class="quick-link">
+      <a href="#">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/verified.svg" width="24" height="24" />
-          <span>Verified</span>
+          <label class="nav-sidebar__button-label">Verified</label>
         </li>
       </a>
       {{if (not (eq (active_user).Handle "[nobody]"))}}
-        <a class="unstyled-link" href="/{{(active_user).Handle}}">
-          <li class="quick-link">
+        <a href="/{{(active_user).Handle}}">
+          <li class="button labelled-icon">
             <img class="svg-icon" src="/static/icons/profile.svg" width="24" height="24" />
-            <span>Profile</span>
+            <label class="nav-sidebar__button-label">Profile</label>
           </li>
         </a>
       {{end}}
-      <a class="unstyled-link" href="#">
-        <li class="quick-link">
+      <a href="#">
+        <li class="button labelled-icon">
           <img class="svg-icon" src="/static/icons/more.svg" width="24" height="24"/>
-          <span>More</span>
+          <label class="nav-sidebar__button-label">More</label>
         </li>
       </a>
     </ul>
diff --git a/internal/webserver/tpl/includes/user_header.tpl b/internal/webserver/tpl/includes/user_header.tpl
index 323bbef..aa9b1ac 100644
--- a/internal/webserver/tpl/includes/user_header.tpl
+++ b/internal/webserver/tpl/includes/user_header.tpl
@@ -1,64 +1,68 @@
 {{define "user-header"}}
   <div class="user-header">
     {{if .BannerImageLocalPath}}
-      {{if .IsContentDownloaded}}
-        <img class="profile-banner-image" src="/content/profile_images/{{.BannerImageLocalPath}}" />
-      {{else}}
-        <img class="profile-banner-image" src="{{.BannerImageUrl}}" />
-      {{end}}
+      <img class="user-header__profile-banner-image"
+        {{if .IsContentDownloaded}}
+          src="/content/profile_images/{{.BannerImageLocalPath}}"
+        {{else}}
+          src="{{.BannerImageUrl}}"
+        {{end}}
+      >
     {{end}}
 
-    <div class="user-header-info-container">
+    <div class="user-header__info-container">
       <div class="row">
         {{template "author-info" .}}
         {{template "following-button" .}}
       </div>
-      <div class="user-bio">
+      <div class="user-header__bio">
         {{template "text-with-entities" .Bio}}
       </div>
       {{if .Location}}
-        <div class="user-location bio-info-with-icon">
+        <div class="user-header__location labelled-icon">
           <img class="svg-icon" src="/static/icons/location.svg" width="24" height="24" />
-          <span>{{.Location}}</span>
+          <label>{{.Location}}</label>
         </div>
       {{end}}
       {{if .Website}}
-        <div class="user-website bio-info-with-icon">
+        <div class="user-header__website labelled-icon">
           <img class="svg-icon" src="/static/icons/website.svg" width="24" height="24" />
-          <a class="unstyled-link" target="_blank" href="{{.Website}}">{{.Website}}</a>
+          <label><a target="_blank" href="{{.Website}}">{{.Website}}</a></label>
         </div>
       {{end}}
-      <div class="user-join-date bio-info-with-icon">
+      <div class="user-header__join-date labelled-icon">
         <img class="svg-icon" src="/static/icons/calendar.svg" width="24" height="24" />
-        <span>{{.JoinDate.Time.Format "Jan 2, 2006"}}</span>
+        <label>{{.JoinDate.Time.Format "Jan 2, 2006"}}</label>
       </div>
 
-      <div class="followers-followees-container row">
-        <a href="/{{.Handle}}/followers" class="followers-container unstyled-link">
-          <span class="followers-count">{{.FollowersCount}}</span>
-          <span class="followers-label">followers</span>
+      <div class="followers-followees row">
+        <a href="/{{.Handle}}/followers" class="followers-followees__followers">
+          <span class="followers-followees__count">{{.FollowersCount}}</span>
+          <label>followers</label>
         </a>
-        <a href="/{{.Handle}}/followees" class="followers-container unstyled-link">
-          <span class="following-label">is following</span>
-          <span class="following-count">{{.FollowingCount}}</span>
+        <a href="/{{.Handle}}/followees" class="followers-followees__followees">
+          <label>is following</label>
+          <span class="followers-followees__count">{{.FollowingCount}}</span>
         </a>
 
         <div class="spacer"></div>
 
-        <div class="user-feed-buttons-container">
-          <a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com">
+        <div class="row">
+          <a class="button" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com">
             <img class="svg-icon" src="/static/icons/external-link.svg" width="24" height="24" />
           </a>
-          <a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" hx-indicator=".user-header" title="Refresh">
+          <a class="button" hx-get="?scrape" hx-target="body" hx-indicator=".user-header" title="Refresh">
             <img class="svg-icon" src="/static/icons/refresh.svg" width="24" height="24" />
           </a>
         </div>
       </div>
     </div>
 
-    <div class="htmx-spinner-container">
-      <div class="htmx-spinner-background"></div>
-      <img class="svg-icon htmx-spinner" src="/static/icons/spinner.svg" />
+    <div class="htmx-spinner">
+      <div class="htmx-spinner__fullscreen-forcer">
+        <div class="htmx-spinner__background"></div>
+        <img class="svg-icon htmx-spinner__icon" src="/static/icons/spinner.svg" />
+      </div>
     </div>
   </div>
 {{end}}
diff --git a/internal/webserver/tpl/list.tpl b/internal/webserver/tpl/list.tpl
index 9940459..4176952 100644
--- a/internal/webserver/tpl/list.tpl
+++ b/internal/webserver/tpl/list.tpl
@@ -4,12 +4,12 @@
   <div class="list-feed-header">
     <h1>{{.List.Name}}</h1>
 
-    <div class="row tabs-container">
-      <a class="tab unstyled-link {{if (eq .ActiveTab "feed")}}active-tab{{end}}" href="/lists/{{.List.ID}}">
-        <span class="tab-inner">Feed</span>
+    <div class="tabs row">
+      <a class="tabs__tab {{if (eq .ActiveTab "feed")}}tabs__tab--active{{end}}" href="/lists/{{.List.ID}}">
+        <span class="tabs__tab-label">Feed</span>
       </a>
-      <a class="tab unstyled-link {{if (eq .ActiveTab "users")}}active-tab{{end}}" href="/lists/{{.List.ID}}/users">
-        <span class="tab-inner">Users</span>
+      <a class="tabs__tab {{if (eq .ActiveTab "users")}}tabs__tab--active{{end}}" href="/lists/{{.List.ID}}/users">
+        <span class="tabs__tab-label">Users</span>
       </a>
     </div>
   </div>
diff --git a/internal/webserver/tpl/list_feed.tpl b/internal/webserver/tpl/list_feed.tpl
deleted file mode 100644
index 5ade44c..0000000
--- a/internal/webserver/tpl/list_feed.tpl
+++ /dev/null
@@ -1,27 +0,0 @@
-{{define "title"}}{{.List.Name}}{{end}}
-
-{{define "main"}}
-  {{$user := (user .UserID)}}
-  <div class="user-feed-header">
-    {{template "user-header" $user}}
-
-    <div class="row tabs-container">
-      <a class="tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">
-        <span class="tab-inner">Tweets and replies</span>
-      </a>
-      <a class="tab unstyled-link {{if (eq .FeedType "without_replies")}}active-tab{{end}}" href="/{{$user.Handle}}/without_replies">
-        <span class="tab-inner">Tweets</span>
-      </a>
-      <a class="tab unstyled-link {{if (eq .FeedType "media")}}active-tab{{end}}" href="/{{$user.Handle}}/media">
-        <span class="tab-inner">Media</span>
-      </a>
-      <a class="tab unstyled-link {{if (eq .FeedType "likes")}}active-tab{{end}}" href="/{{$user.Handle}}/likes">
-        <span class="tab-inner">Likes</span>
-      </a>
-    </div>
-  </div>
-
-  <div class="timeline user-feed-timeline">
-    {{template "timeline" .Feed}}
-  </div>
-{{end}}
diff --git a/internal/webserver/tpl/list_of_lists.tpl b/internal/webserver/tpl/list_of_lists.tpl
index a0cd21c..16c24a5 100644
--- a/internal/webserver/tpl/list_of_lists.tpl
+++ b/internal/webserver/tpl/list_of_lists.tpl
@@ -14,27 +14,18 @@
     <button onclick="document.querySelector('#newListDialog').close()">Cancel</button>
   </dialog>
 
-  <div class="users-list-previews">
+  <div class="list-of-lists">
     {{range .}}
       {{$max_display_users := 10}}
-      <div class="users-list-preview row row--spread">
-        <div class="list-info-container" hx-get="/lists/{{.ID}}" hx-trigger="click" hx-target="body" hx-push-url="true">
+      <div class="list-preview row row--spread">
+        <div class="list-preview__info-container" hx-get="/lists/{{.ID}}" hx-trigger="click" hx-target="body" hx-push-url="true">
           <span class="list-name">{{.Name}}</span>
-          <span class="num-users">({{(len .Users)}})</span>
-          <div class="first-N-profile-images" hx-trigger="click consume">
+          <span class="list-preview__num-users">({{(len .Users)}})</span>
+          <div class="list-preview__first-N-profile-images" hx-trigger="click consume">
             {{range $i, $user := .Users}}
               {{/* Only render the first 10-ish users */}}
               {{if (lt $i $max_display_users)}}
-                <a class="unstyled-link" href="/{{$user.Handle}}">
-                  <img
-                    class="profile-image"
-                    {{if $user.IsContentDownloaded}}
-                      src="/content/{{$user.GetProfileImageLocalPath}}"
-                    {{else}}
-                      src="{{$user.ProfileImageUrl}}"
-                    {{end}}
-                  />
-                </a>
+                {{template "circle-profile-img" $user}}
               {{end}}
             {{end}}
             {{if (gt (len .Users) $max_display_users)}}
@@ -42,7 +33,7 @@
             {{end}}
           </div>
         </div>
-        <a class="unstyled-link quick-link danger"
+        <a class="button button--danger"
           hx-delete="/lists/{{.ID}}" hx-target="body"
           onclick="return confirm('Delete this list?  Are you sure?')"
         >Delete</a>
diff --git a/internal/webserver/tpl/login.tpl b/internal/webserver/tpl/login.tpl
index a280438..ec20928 100644
--- a/internal/webserver/tpl/login.tpl
+++ b/internal/webserver/tpl/login.tpl
@@ -1,44 +1,49 @@
 {{define "title"}}Login{{end}}
 
 {{define "main"}}
-<div class="login">
-  <form hx-post="/change-session" hx-target="#nav-sidebar" hx-swap="outerHTML" hx-ext="json-enc">
-    <label for="select-account">Choose account:</label>
-    <select name="account" id="select-account">
-      {{range .ExistingSessions}}
-        <option value="{{.}}">@{{.}}</option>
-      {{end}}
-      <option value="no account">[no account (don't log in)]</option>
-    </select>
-    <div class="field-container submit-container">
-      <input type='submit' value='Use account'>
+<div class="login-page">
+  <h1>Login</h1>
+
+  <form class="choose-session" hx-post="/change-session" hx-target="#nav-sidebar" hx-swap="outerHTML" hx-ext="json-enc">
+    <h3>Open existing session</h3>
+    <div class="row row--spread choose-session__form-contents">
+      <select name="account" class="choose-session__dropdown">
+        {{range .ExistingSessions}}
+          <option value="{{.}}">@{{.}}</option>
+        {{end}}
+        <option value="no account">[no account (don't log in)]</option>
+      </select>
+      <div class="login-form__field-container login-form__submit-container">
+        <input type='submit' value='Go'>
+      </div>
     </div>
   </form>
 
-  <p>Or log in</p>
+  <hr>
 
   <form class="login-form" hx-post="/login" hx-target="body" hx-ext="json-enc">
-    <div class="field-container">
+    <h3>Log in (new session)</h3>
+    <div class="login-form__field-container">
       <label>Username</label>
       {{with .FormErrors.username}}
-        <label class='error'>({{.}})</label>
+        <label class='login-form__error-label'>({{.}})</label>
       {{end}}
-      <input name='username' value='{{.Username}}'>
+      <input name='username' value='{{.Username}}' class="login-form__input">
     </div>
-    <div class="field-container">
+    <div class="login-form__field-container">
       <label>Password:</label>
       {{with .FormErrors.password}}
-        <label class='error'>({{.}})</label>
+        <label class='login-form__error-label'>({{.}})</label>
       {{end}}
-      <input type='password' name='password'>
+      <input type='password' name='password' class="login-form__input">
     </div>
-    <div class="field-container submit-container">
+    <div class="login-form__field-container login-form__submit-container">
       <input type='submit' value='Login'>
     </div>
 
-    <div class="htmx-spinner-container">
-      <div class="htmx-spinner-background"></div>
-      <img class="svg-icon htmx-spinner" src="/static/icons/spinner.svg" />
+    <div class="htmx-spinner">
+      <div class="htmx-spinner__background"></div>
+      <img class="svg-icon htmx-spinner__icon" src="/static/icons/spinner.svg" />
     </div>
   </form>
 </div>
diff --git a/internal/webserver/tpl/messages.tpl b/internal/webserver/tpl/messages.tpl
index a36221d..b271b46 100644
--- a/internal/webserver/tpl/messages.tpl
+++ b/internal/webserver/tpl/messages.tpl
@@ -1,7 +1,7 @@
 {{define "title"}}Messages{{end}}
 
 {{define "main"}}
-  <div class="chats-container">
+  <div class="messages-page">
     {{template "chat-list" .}}
     {{template "chat-view" .}}
   </div>
diff --git a/internal/webserver/tpl/offline_timeline.tpl b/internal/webserver/tpl/offline_timeline.tpl
index b27b4ad..ab17650 100644
--- a/internal/webserver/tpl/offline_timeline.tpl
+++ b/internal/webserver/tpl/offline_timeline.tpl
@@ -2,12 +2,12 @@
 
 {{define "main"}}
   <div class="timeline-header">
-    <div class="row tabs-container">
-      <a class="tab unstyled-link {{if (eq .ActiveTab "User feed")}}active-tab{{end}}" href="/timeline">
-        <span class="tab-inner">User feed</span>
+    <div class="tabs row">
+      <a class="tabs__tab {{if (eq .ActiveTab "User feed")}}tabs__tab--active{{end}}" href="/timeline">
+        <span class="tabs__tab-label">User feed</span>
       </a>
-      <a class="tab unstyled-link {{if (eq .ActiveTab "Offline")}}active-tab{{end}}" href="/timeline/offline">
-        <span class="tab-inner">Offline timeline</span>
+      <a class="tabs__tab {{if (eq .ActiveTab "Offline")}}tabs__tab--active{{end}}" href="/timeline/offline">
+        <span class="tabs__tab-label">Offline timeline</span>
       </a>
     </div>
   </div>
diff --git a/internal/webserver/tpl/search.tpl b/internal/webserver/tpl/search.tpl
index 1b77fd7..6819104 100644
--- a/internal/webserver/tpl/search.tpl
+++ b/internal/webserver/tpl/search.tpl
@@ -5,35 +5,35 @@
     <div class="row row--spread">
       <div class="dummy"></div> {{/* Extra div to take up a slot in the `row` */}}
       <h1>Search results: {{.SearchText}}</h1>
-      <div class="user-feed-buttons-container">
-        <a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/search?q={{.SearchText}}&src=typed_query&f=top" title="Open on twitter.com">
+      <div class="row">
+        <a class="button" target="_blank" href="https://twitter.com/search?q={{.SearchText}}&src=typed_query&f=top" title="Open on twitter.com">
           <img class="svg-icon" src="/static/icons/external-link.svg" width="24" height="24" />
         </a>
-        <a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" hx-indicator=".search-header" title="Refresh">
+        <a class="button" hx-get="?scrape" hx-target="body" hx-indicator=".search-header" title="Refresh">
           <img class="svg-icon" src="/static/icons/refresh.svg" width="24" height="24" />
         </a>
       </div>
     </div>
 
-    <div class="row tabs-container">
-      <a class="tab unstyled-link {{if (not .IsUsersSearch)}}active-tab{{end}}" href="?type=tweets">
-        <span class="tab-inner">Tweets</span>
+    <div class="tabs row">
+      <a class="tabs__tab {{if (not .IsUsersSearch)}}tabs__tab--active{{end}}" href="?type=tweets">
+        <span class="tabs__tab-label">Tweets</span>
       </a>
-      <a class="tab unstyled-link {{if .IsUsersSearch}}active-tab{{end}}" href="?type=users">
-        <span class="tab-inner">Users</span>
+      <a class="tabs__tab {{if .IsUsersSearch}}tabs__tab--active{{end}}" href="?type=users">
+        <span class="tabs__tab-label">Users</span>
       </a>
     </div>
-    <div class="htmx-spinner-container">
-      <div class="htmx-spinner-background"></div>
-      <img class="svg-icon htmx-spinner" src="/static/icons/spinner.svg" />
+    <div class="htmx-spinner">
+      <div class="htmx-spinner__background"></div>
+      <img class="svg-icon htmx-spinner__icon" src="/static/icons/spinner.svg" />
     </div>
   </div>
   {{if .IsUsersSearch}}
     {{template "list" (dict "UserIDs" .UserIDs)}}
   {{else}}
-    <div class="sort-order-container">
-      <span class="sort-order-label">order:</span>
-      <select name="sort-order" hx-get="#" hx-target="body" hx-push-url="true">
+    <div class="sort-order">
+      <label class="sort-order__label">order:</label>
+      <select class="sort-order__dropdown" name="sort-order" hx-get="#" hx-target="body" hx-push-url="true">
         {{range .SortOrderOptions}}
           <option
             value="{{.}}"
diff --git a/internal/webserver/tpl/tweet_detail.tpl b/internal/webserver/tpl/tweet_detail.tpl
index 353d38b..832c410 100644
--- a/internal/webserver/tpl/tweet_detail.tpl
+++ b/internal/webserver/tpl/tweet_detail.tpl
@@ -2,32 +2,35 @@
 
 
 {{define "main"}}
-  {{range .ParentIDs}}
-    <div class="thread-parent-tweet">
-      {{template "tweet" (dict "TweetID" . "RetweetID" 0 "QuoteNestingLevel" 0)}}
+  <div class="tweet-detail">
+    {{range .ParentIDs}}
+      <div class="thread-parent-tweet">
+        {{template "tweet" (dict "TweetID" . "RetweetID" 0 "QuoteNestingLevel" 0)}}
+      </div>
+    {{end}}
+
+    <div id="focused-tweet" class="focused-tweet">
+      {{template "tweet" (dict "TweetID" .MainTweetID "RetweetID" 0 "QuoteNestingLevel" 0)}}
     </div>
-  {{end}}
-  <div id="focused-tweet">
-    {{template "tweet" (dict "TweetID" .MainTweetID "RetweetID" 0 "QuoteNestingLevel" 0)}}
+
+    {{if (len .ThreadIDs)}}
+      <div class="reply-chain">
+        {{range .ThreadIDs}}
+          <div class="reply-tweet">
+            {{template "tweet" (dict "TweetID" . "RetweetID" 0 "QuoteNestingLevel" 0)}}
+          </div>
+        {{end}}
+      </div>
+    {{end}}
+
+    {{range .ReplyChains}}
+      <div class="reply-chain">
+        {{range .}}
+          <div class="reply-tweet">
+            {{template "tweet" (dict "TweetID" . "RetweetID" 0 "QuoteNestingLevel" 0)}}
+          </div>
+        {{end}}
+      </div>
+    {{end}}
   </div>
-
-  {{if (len .ThreadIDs)}}
-    <div class="reply-chain">
-      {{range .ThreadIDs}}
-        <div class="reply-tweet">
-          {{template "tweet" (dict "TweetID" . "RetweetID" 0 "QuoteNestingLevel" 0)}}
-        </div>
-      {{end}}
-    </div>
-  {{end}}
-
-  {{range .ReplyChains}}
-    <div class="reply-chain">
-      {{range .}}
-        <div class="reply-tweet">
-          {{template "tweet" (dict "TweetID" . "RetweetID" 0 "QuoteNestingLevel" 0)}}
-        </div>
-      {{end}}
-    </div>
-  {{end}}
 {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/chat_list.tpl b/internal/webserver/tpl/tweet_page_includes/chat_list.tpl
index 6c17fd0..856702e 100644
--- a/internal/webserver/tpl/tweet_page_includes/chat_list.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/chat_list.tpl
@@ -7,7 +7,7 @@
     {{/* Scroll the active chat into view, if there is one */}}
     {{if $.ActiveRoomID}}
       <script>
-        document.querySelector(".chat.active-chat").scrollIntoViewIfNeeded(true)
+        document.querySelector(".chat-list-entry.chat-list-entry--active-chat").scrollIntoViewIfNeeded(true)
       </script>
     {{end}}
   </div>
diff --git a/internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl b/internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl
index 3772e37..06374d6 100644
--- a/internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl
@@ -1,7 +1,12 @@
 {{define "chat-list-entry"}}
   {{$room := $.room}}
-  <div class="chat {{if .is_active}}active-chat{{end}}" hx-get="/messages/{{$room.ID}}" hx-push-url="true" hx-swap="outerHTML" hx-target="body">
-    <div class="chat-preview-header">
+  <div class="chat-list-entry {{if .is_active}}chat-list-entry--active-chat{{end}}"
+    hx-get="/messages/{{$room.ID}}"
+    hx-push-url="true"
+    hx-swap="outerHTML"
+    hx-target="body"
+  >
+    <div class="chat-list-entry__header">
       {{if (eq $room.Type "ONE_TO_ONE")}}
         {{range $room.Participants}}
           {{if (ne .UserID (active_user).ID)}}
@@ -12,19 +17,21 @@
           {{end}}
         {{end}}
       {{else}}
-        <div class="groupchat-profile-image-container">
-          <img class="profile-image" src="{{$room.AvatarImageRemoteURL}}" width="48" height="48" />
-          <div class="display-name row">{{$room.Name}}</div>
+        <div class="chat-list-entry__groupchat-profile-image">
+          {{template "circle-profile-img-no-link" (dict "IsContentDownloaded" false "ProfileImageUrl" $room.AvatarImageRemoteURL)}}
+          <div class="click-eater" hx-trigger="click consume" hx-target="body">
+            <div class="display-name row">{{$room.Name}}</div>
+          </div>
         </div>
       {{end}}
-      <div class="chat-preview-timestamp .posted-at-container">
-        <p class="posted-at">
+      <div class="posted-at">
+        <p class="posted-at__text">
           {{$room.LastMessagedAt.Time.Format "Jan 2, 2006"}}
           <br/>
           {{$room.LastMessagedAt.Time.Format "3:04 pm"}}
         </p>
       </div>
     </div>
-    <p class="chat-preview">{{(index $.messages $room.LastMessageID).Text}}</p>
+    <p class="chat-list-entry__message-preview">{{(index $.messages $room.LastMessageID).Text}}</p>
   </div>
 {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/chat_view.tpl b/internal/webserver/tpl/tweet_page_includes/chat_view.tpl
index 36f0154..133fd60 100644
--- a/internal/webserver/tpl/tweet_page_includes/chat_view.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/chat_view.tpl
@@ -1,25 +1,19 @@
-{{define "messages-with-poller"}}
+{{define "messages"}}
   {{range .MessageIDs}}
     {{$message := (index $.DMTrove.Messages .)}}
     {{$user := (user $message.SenderID)}}
     {{$is_us := (eq $message.SenderID (active_user).ID)}}
-    <div class="dm-message-and-reacts-container {{if $is_us}} our-message {{end}}">
-      <div class="dm-message-container">
-        <div class="sender-profile-image-container">
-          <a class="unstyled-link" href="/{{$user.Handle}}">
-            {{if $user.IsContentDownloaded}}
-              <img class="profile-image" src="/content/{{$user.GetProfileImageLocalPath}}" />
-            {{else}}
-              <img class="profile-image" src="{{$user.ProfileImageUrl}}" />
-            {{end}}
-          </a>
+    <div class="dm-message {{if $is_us}} our-message {{end}}">
+      <div class="dm-message__row row">
+        <div class="dm-message__sender-profile-img">
+          {{template "circle-profile-img" $user}}
         </div>
-        <div class="dm-message-content-container">
+        <div class="dm-message__contents">
           {{if (ne $message.InReplyToID 0)}}
-            <div class="replying-to-container">
-              <div class="replying-to-label row">
+            <div class="dm-message__replying-to">
+              <div class="dm-message__replying-to-label labelled-icon">
                 <img class="svg-icon" src="/static/icons/replying_to.svg" width="24" height="24" />
-                <span>Replying to</span>
+                <label>Replying to</label>
               </div>
               <div class="replying-to-message">
                 {{(index $.DMTrove.Messages $message.InReplyToID).Text}}
@@ -27,7 +21,7 @@
             </div>
           {{end}}
           {{if (ne $message.EmbeddedTweetID 0)}}
-            <div class="tweet-preview">
+            <div class="dm-message__tweet-preview">
               {{template "tweet" (dict
                 "TweetID" $message.EmbeddedTweetID
                 "RetweetID" 0
@@ -36,7 +30,7 @@
             </div>
           {{end}}
           {{range $message.Images}}
-            <img class="dm-embedded-image"
+            <img class="dm-message__embedded-image"
               {{if .IsDownloaded}}
                 src="/content/images/{{.LocalFilename}}"
               {{else}}
@@ -47,7 +41,7 @@
             >
           {{end}}
           {{range $message.Videos}}
-            <video controls width="{{.Width}}" height="{{.Height}}"
+            <video class="dm-message__embedded-video" controls width="{{.Width}}" height="{{.Height}}"
               {{if .IsDownloaded}}
                 poster="/content/video_thumbnails/{{.ThumbnailLocalPath}}"
               {{else}}
@@ -62,47 +56,32 @@
             </video>
           {{end}}
           {{range $message.Urls}}
-            <a
-              class="embedded-link rounded-gray-outline unstyled-link"
-              target="_blank"
-              href="{{.Text}}"
-              style="max-width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}"
-            >
-              <img
-                {{if .IsContentDownloaded}}
-                  src="/content/link_preview_images/{{.ThumbnailLocalPath}}"
-                {{else}}
-                  src="{{.ThumbnailRemoteUrl}}"
-                {{end}}
-                class="embedded-link-preview"
-                width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}"
-              />
-              <h3 class="embedded-link-title">{{.Title}}</h3>
-              <p class="embedded-link-description">{{.Description}}</p>
-              <span class="row embedded-link-domain-container">
-                <img class="svg-icon" src="/static/icons/link3.svg" width="24" height="24" />
-                <span class="embedded-link-domain">{{(.GetDomain)}}</span>
-              </span>
-            </a>
+            {{template "embedded-link" .}}
           {{end}}
           {{if $message.Text}}
-            <div class="dm-message-text-container">
+            <div class="dm-message__text-content">
               {{template "text-with-entities" $message.Text}}
             </div>
           {{end}}
         </div>
       </div>
-      <div class="dm-message-reactions">
+      <div class="dm-message__reactions">
         {{range $message.Reactions}}
           {{$sender := (user .SenderID)}}
           <span title="{{$sender.DisplayName}} (@{{$sender.Handle}})">{{.Emoji}}</span>
         {{end}}
       </div>
-      <p class="posted-at">
-        {{$message.SentAt.Time.Format "Jan 2, 2006 @ 3:04 pm"}}
-      </p>
+      <div class="sent-at">
+        <p class="sent-at__text">
+          {{$message.SentAt.Time.Format "Jan 2, 2006 @ 3:04 pm"}}
+        </p>
+      </div>
     </div>
   {{end}}
+{{end}}
+
+{{define "messages-with-poller"}}
+  {{template "messages" .}}
 
   <div id="new-messages-poller"
     hx-swap="outerHTML {{if $.ScrollBottom}}scroll:.chat-messages:bottom{{end}}"
@@ -119,17 +98,21 @@
       {{end}}
     </div>
     {{if $.ActiveRoomID}}
-      <div class="dm-composer-container">
-        <form hx-post="/messages/{{$.ActiveRoomID}}/send" hx-target="#new-messages-poller" hx-swap="outerHTML scroll:.chat-messages:bottom" hx-ext="json-enc">
+      <div class="dm-composer">
+        <form
+          hx-post="/messages/{{$.ActiveRoomID}}/send"
+          hx-target="#new-messages-poller"
+          hx-swap="outerHTML scroll:.chat-messages:bottom"
+          hx-ext="json-enc"
+        >
           {{template "dm-composer"}}
-          <input id="real-input" type="hidden" name="text" value="" />
+          <input id="realInput" type="hidden" name="text" value="" />
           <input type="submit" />
         </form>
       </div>
       <script>
         // Make pasting text work for HTML as well as plain text
-        var editor = document.querySelector("#composer");
-        editor.addEventListener("paste", function(e) {
+        composer.addEventListener("paste", function(e) {
           // cancel paste
           e.preventDefault();
           // get text representation of clipboard
@@ -180,10 +163,7 @@
 {{end}}
 
 {{define "dm-composer"}}
-  <span
-    id="composer"
-    role="textbox"
-    contenteditable
+  <span id="composer" role="textbox" contenteditable oninput="realInput.value = this.innerText"
     {{if .}}
       {{/*
         This is a separate template so it can be OOB-swapped to clear the contents of the composer
@@ -196,7 +176,5 @@
       */}}
       hx-swap-oob="true"
     {{end}}
-    oninput="var text = this.innerText; document.querySelector('#real-input').value = text"
-    >
-  </span>
+  ></span>
 {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/embedded_link.tpl b/internal/webserver/tpl/tweet_page_includes/embedded_link.tpl
new file mode 100644
index 0000000..bde47ad
--- /dev/null
+++ b/internal/webserver/tpl/tweet_page_includes/embedded_link.tpl
@@ -0,0 +1,24 @@
+{{define "embedded-link"}}
+  <a
+    class="embedded-link rounded-gray-outline"
+    target="_blank"
+    href="{{.Text}}"
+    style="max-width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}"
+  >
+    <img
+      {{if .IsContentDownloaded}}
+        src="/content/link_preview_images/{{.ThumbnailLocalPath}}"
+      {{else}}
+        src="{{.ThumbnailRemoteUrl}}"
+      {{end}}
+      class="embedded-link__preview-image"
+      width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}"
+    />
+    <h3 class="embedded-link__title">{{.Title}}</h3>
+    <p class="embedded-link__description">{{.Description}}</p>
+    <span class="row embedded-link__domain">
+      <img class="svg-icon" src="/static/icons/link3.svg" width="24" height="24" />
+      <span class="embedded-link__domain__contents">{{(.GetDomain)}}</span>
+    </span>
+  </a>
+{{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/list.tpl b/internal/webserver/tpl/tweet_page_includes/list.tpl
index e837c86..d69a133 100644
--- a/internal/webserver/tpl/tweet_page_includes/list.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/list.tpl
@@ -1,12 +1,16 @@
 {{define "list"}}
-  <div class="users-list-container">
+  <div class="users-list">
     {{range .UserIDs}}
       {{$user := (user .)}}
       <div class="user">
         <div class="row row--spread">
           {{template "author-info" $user}}
           {{if $.button_text}}
-            <a class="unstyled-link quick-link danger" href="{{$.button_url}}?user_handle={{$user.Handle}}"onclick="return confirm('{{$.button_text}} this user?  Are you sure?')">
+            <a
+              href="{{$.button_url}}?user_handle={{$user.Handle}}"
+              class="button button--danger"
+              onclick="return confirm('{{$.button_text}} this user?  Are you sure?')"
+            >
               {{$.button_text}}
             </a>
           {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/poll.tpl b/internal/webserver/tpl/tweet_page_includes/poll.tpl
index 7dbc24a..178dea4 100644
--- a/internal/webserver/tpl/tweet_page_includes/poll.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/poll.tpl
@@ -1,9 +1,9 @@
 {{define "poll-choice"}}
-  <div class="row poll-choice">
-    <div class="poll-fill-bar {{if (.poll.IsWinner .votes)}}poll-winner{{end}}" style="width: {{printf "%.1f" (.poll.VotePercentage .votes)}}%"></div>
-    <div class="poll-info-container row">
-      <span class="poll-choice-label">{{.label}}</span>
-      <span class="poll-choice-votes">{{.votes}} ({{printf "%.1f" (.poll.VotePercentage .votes)}}%)</span>
+  <div class="row poll__choice">
+    <div class="poll__choice-fill-bar {{if (.poll.IsWinner .votes)}}poll__choice-fill-bar--winner{{end}}" style="width: {{printf "%.1f" (.poll.VotePercentage .votes)}}%"></div>
+    <div class="poll__choice-info row">
+      <span class="poll__choice-label">{{.label}}</span>
+      <span class="poll__choice-votes">{{.votes}} ({{printf "%.1f" (.poll.VotePercentage .votes)}}%)</span>
     </div>
   </div>
 
@@ -21,8 +21,8 @@
       {{template "poll-choice" (dict "label" .Choice4 "votes" .Choice4_Votes "poll" .)}}
     {{end}}
 
-    <p class="poll-metadata">
-      <span class="poll-state">
+    <p class="poll__metadata">
+      <span class="poll__metadata__state">
         {{if .IsOpen}}
           Poll open, voting ends at {{.FormatEndsAt}}
         {{else}}
diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
index ee9a22f..eb046e1 100644
--- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
@@ -13,30 +13,36 @@
   {{if (not (eq .RetweetID 0))}}
     {{$retweet := (retweet .RetweetID)}}
     {{$retweet_user := (user $retweet.RetweetedByID)}}
-    <div class="retweet-info-container" hx-trigger="click consume">
+    <div class="retweet-info" hx-trigger="click consume">
       <img class="svg-icon" src="/static/icons/retweet.svg" width="24" height="24" />
-      <span class="retweeted-by-label">Retweeted by</span>
-      <a class="retweeted-by-user" hx-get="/{{$retweet_user.Handle}}" hx-target="body" hx-swap="outerHTML" hx-push-url="true">
+      <span class="retweet-info__retweeted-by-label">Retweeted by</span>
+      <a
+        class="retweet-info__retweeted-by-user"
+        hx-get="/{{$retweet_user.Handle}}"
+        hx-target="body"
+        hx-swap="outerHTML"
+        hx-push-url="true"
+      >
         {{$retweet_user.DisplayName}}
       </a>
     </div>
   {{end}}
-  <div class="tweet-header-container">
+  <div class="tweet__header-container">
     <div class="author-info-container" hx-trigger="click consume">
       {{template "author-info" $author}}
     </div>
     {{if $main_tweet.ReplyMentions}}
-      <div class="reply-mentions-container" hx-trigger="click consume">
-        <span class="replying-to-label">Replying&nbsp;to</span>
-        <ul class="reply-mentions inline-dotted-list">
+      <div class="reply-mentions" hx-trigger="click consume">
+        <span class="reply-mentions__dm-message__replying-to-label">Replying&nbsp;to</span>
+        <ul class="reply-mentions__list inline-dotted-list">
           {{range $main_tweet.ReplyMentions}}
             <li><a class="entity" href="/{{.}}">@{{.}}</a></li>
           {{end}}
         </ul>
       </div>
     {{end}}
-    <div class="posted-at-container">
-      <p class="posted-at">
+    <div class="posted-at">
+      <p class="posted-at__text">
         {{$main_tweet.PostedAt.Time.Format "Jan 2, 2006"}}
         <br/>
         {{$main_tweet.PostedAt.Time.Format "3:04 pm"}}
@@ -44,11 +50,11 @@
     </div>
   </div>
   <div class="row">
-    <span class="vertical-reply-line-container">
-      <div class="vertical-reply-line">
+    <span class="string-box">
+      <div class="string">
       </div>
     </span>
-    <span class="vertical-container-1">
+    <span class="tweet__vertical-container">
       <div class="tweet-content">
         {{if (ne $main_tweet.TombstoneType "")}}
           <div class="tombstone">
@@ -57,7 +63,7 @@
         {{end}}
         {{template "text-with-entities" $main_tweet.Text}}
         {{range $main_tweet.Images}}
-          <img class="tweet-image"
+          <img class="tweet__embedded-image"
             {{if .IsDownloaded}}
               src="/content/images/{{.LocalFilename}}"
             {{else}}
@@ -69,7 +75,7 @@
             {{end}}
             hx-trigger="click consume"
             onclick="image_carousel.querySelector('img').src = this.src; image_carousel.showModal();"
-          />
+          >
         {{end}}
         {{range $main_tweet.Videos}}
           <video controls hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}"
@@ -88,28 +94,7 @@
         {{end}}
         {{range $main_tweet.Urls}}
           <div class="click-eater" hx-trigger="click consume">
-            <a
-              class="embedded-link rounded-gray-outline unstyled-link"
-              target="_blank"
-              href="{{.Text}}"
-              style="max-width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}"
-            >
-              <img
-                {{if .IsContentDownloaded}}
-                  src="/content/link_preview_images/{{.ThumbnailLocalPath}}"
-                {{else}}
-                  src="{{.ThumbnailRemoteUrl}}"
-                {{end}}
-                class="embedded-link-preview"
-                width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}"
-              />
-              <h3 class="embedded-link-title">{{.Title}}</h3>
-              <p class="embedded-link-description">{{.Description}}</p>
-              <span class="row embedded-link-domain-container">
-                <img class="svg-icon" src="/static/icons/link3.svg" width="24" height="24" />
-                <span class="embedded-link-domain">{{(.GetDomain)}}</span>
-              </span>
-            </a>
+            {{template "embedded-link" .}}
           </div>
         {{end}}
         {{range $main_tweet.Polls}}
@@ -117,8 +102,12 @@
         {{end}}
 
         {{if (and $main_tweet.QuotedTweetID (lt .QuoteNestingLevel 1))}}
-          <div class="quoted-tweet rounded-gray-outline" hx-trigger="click consume">
-            {{template "tweet" (dict "TweetID" $main_tweet.QuotedTweetID "RetweetID" 0 "QuoteNestingLevel" (add .QuoteNestingLevel 1))}}
+          <div class="tweet__quoted-tweet rounded-gray-outline" hx-trigger="click consume">
+            {{template "tweet" (dict
+                "TweetID" $main_tweet.QuotedTweetID
+                "RetweetID" 0
+                "QuoteNestingLevel" (add .QuoteNestingLevel 1)
+            ) }}
           </div>
         {{end}}
         {{if $main_tweet.SpaceID}}
@@ -126,35 +115,46 @@
         {{end}}
       </div>
 
-      <div class="interactions-bar row">
-        <div class="interaction-stat">
+      <div class="interactions row">
+        <div class="interactions__stat">
           <img class="svg-icon" src="/static/icons/quote.svg" width="24" height="24" />
           <span>{{$main_tweet.NumQuoteTweets}}</span>
         </div>
-        <div class="interaction-stat">
+        <div class="interactions__stat">
           <img class="svg-icon" src="/static/icons/reply.svg" width="24" height="24" />
           <span>{{$main_tweet.NumReplies}}</span>
         </div>
-        <div class="interaction-stat">
+        <div class="interactions__stat">
           <img class="svg-icon" src="/static/icons/retweet.svg" width="24" height="24" />
           <span>{{$main_tweet.NumRetweets}}</span>
         </div>
         {{template "likes-count" $main_tweet}}
-        <div class="dummy"></div>
-        <div class="tweet-buttons-container" hx-trigger="click consume">
-          <a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{$author.Handle}}/status/{{$main_tweet.ID}}" title="Open on twitter.com">
+        <div class="interactions__dummy"></div>
+        <div class="row" hx-trigger="click consume">
+          <a
+            class="button"
+            target="_blank"
+            href="https://twitter.com/{{$author.Handle}}/status/{{$main_tweet.ID}}"
+            title="Open on twitter.com"
+          >
             <img class="svg-icon" src="/static/icons/external-link.svg" width="24" height="24" />
           </a>
-          <a class="unstyled-link quick-link" hx-get="/tweet/{{$main_tweet.ID}}?scrape" hx-target="body" title="Refresh">
+          <a
+            class="button"
+            hx-get="/tweet/{{$main_tweet.ID}}?scrape"
+            hx-target="body"
+            hx-indicator="closest .tweet"
+            title="Refresh"
+          >
             <img class="svg-icon" src="/static/icons/refresh.svg" width="24" height="24" />
           </a>
         </div>
       </div>
     </span>
   </div>
-  <div class="htmx-spinner-container">
-    <div class="htmx-spinner-background"></div>
-    <img class="svg-icon htmx-spinner" src="/static/icons/spinner.svg" />
+  <div class="htmx-spinner">
+    <div class="htmx-spinner__background"></div>
+    <img class="svg-icon htmx-spinner__icon" src="/static/icons/spinner.svg" />
   </div>
 </div>
 {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/space.tpl b/internal/webserver/tpl/tweet_page_includes/space.tpl
index f36e19a..55a56d3 100644
--- a/internal/webserver/tpl/tweet_page_includes/space.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/space.tpl
@@ -1,18 +1,18 @@
 {{define "space"}}
   <div class="space">
-    <div class="space-host row">
+    <div class="space__host row">
       {{template "author-info" (user .CreatedById)}}
-      <span class="host-label">(Host)</span>
-      <div class="layout-spacer"></div>
-      <div class="space-date">
+      <span class="space__host__label">(Host)</span>
+      <div class="space__layout-spacer"></div>
+      <div class="space__date">
         {{.StartedAt.Format "Jan 2, 2006"}}<br>{{.StartedAt.Format "3:04pm"}}
       </div>
     </div>
-    <h3 class="space-title">{{.Title}}</h3>
-    <div class="space-info row">
+    <h3 class="space__title">{{.Title}}</h3>
+    <div class="space__info row">
       <span class="space-state">
         {{if (eq .State "Ended")}}
-          <ul class="space-info-list inline-dotted-list">
+          <ul class="space__info__list inline-dotted-list">
             <li>{{.State}}</li>
             <li>{{(len .ParticipantIds)}} participants</li>
             <li>{{.LiveListenersCount}} tuned in</li>
@@ -23,7 +23,7 @@
         {{end}}
       </span>
     </div>
-    <ul class="space-participants-list">
+    <ul class="space__participants-list">
       {{range .ParticipantIds}}
         {{if (ne . $.CreatedById)}}
           <li>{{template "author-info" (user .)}}</li>
diff --git a/internal/webserver/tpl/tweet_page_includes/timeline.tpl b/internal/webserver/tpl/tweet_page_includes/timeline.tpl
index 30e6d11..a7ade32 100644
--- a/internal/webserver/tpl/tweet_page_includes/timeline.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/timeline.tpl
@@ -3,5 +3,15 @@
     {{template "tweet" .}}
   {{end}}
 
-  {{template "timeline-bottom" .CursorBottom}}
+  <div class="timeline__bottom">
+    {{if .CursorBottom.CursorPosition.IsEnd}}
+      <label class="timeline__eof-label">End of feed</label>
+    {{else}}
+      <a class="timeline__show-more-button button"
+        hx-get="?{{(cursor_to_query_params .CursorBottom)}}"
+        hx-target=".timeline__bottom"
+        hx-swap="outerHTML"
+      >Show more</a>
+    {{end}}
+  </div>
 {{end}}
diff --git a/internal/webserver/tpl/tweet_page_includes/timeline_bottom.tpl b/internal/webserver/tpl/tweet_page_includes/timeline_bottom.tpl
deleted file mode 100644
index 37cc6e0..0000000
--- a/internal/webserver/tpl/tweet_page_includes/timeline_bottom.tpl
+++ /dev/null
@@ -1,13 +0,0 @@
-{{define "timeline-bottom"}}
-  <div class="timeline-bottom-container">
-    {{if .CursorPosition.IsEnd}}
-      <div class="eof-indicator">End of feed</div>
-    {{else}}
-      <a class="show-more quick-link unstyled-link"
-        hx-get="?{{(cursor_to_query_params .)}}"
-        hx-target=".timeline-bottom-container"
-        hx-swap="outerHTML"
-      >Show more</a>
-    {{end}}
-  </div>
-{{end}}
diff --git a/internal/webserver/tpl/user_feed.tpl b/internal/webserver/tpl/user_feed.tpl
index e73e6f6..25fa694 100644
--- a/internal/webserver/tpl/user_feed.tpl
+++ b/internal/webserver/tpl/user_feed.tpl
@@ -5,18 +5,18 @@
   <div class="user-feed-header">
     {{template "user-header" $user}}
 
-    <div class="row tabs-container">
-      <a class="tab unstyled-link {{if (eq .FeedType "")}}active-tab{{end}}" href="/{{$user.Handle}}">
-        <span class="tab-inner">Tweets and replies</span>
+    <div class="tabs row">
+      <a class="tabs__tab {{if (eq .FeedType "")}}tabs__tab--active{{end}}" href="/{{$user.Handle}}">
+        <span class="tabs__tab-label">Tweets and replies</span>
       </a>
-      <a class="tab unstyled-link {{if (eq .FeedType "without_replies")}}active-tab{{end}}" href="/{{$user.Handle}}/without_replies">
-        <span class="tab-inner">Tweets</span>
+      <a class="tabs__tab {{if (eq .FeedType "without_replies")}}tabs__tab--active{{end}}" href="/{{$user.Handle}}/without_replies">
+        <span class="tabs__tab-label">Tweets</span>
       </a>
-      <a class="tab unstyled-link {{if (eq .FeedType "media")}}active-tab{{end}}" href="/{{$user.Handle}}/media">
-        <span class="tab-inner">Media</span>
+      <a class="tabs__tab {{if (eq .FeedType "media")}}tabs__tab--active{{end}}" href="/{{$user.Handle}}/media">
+        <span class="tabs__tab-label">Media</span>
       </a>
-      <a class="tab unstyled-link {{if (eq .FeedType "likes")}}active-tab{{end}}" href="/{{$user.Handle}}/likes">
-        <span class="tab-inner">Likes</span>
+      <a class="tabs__tab {{if (eq .FeedType "likes")}}tabs__tab--active{{end}}" href="/{{$user.Handle}}/likes">
+        <span class="tabs__tab-label">Likes</span>
       </a>
     </div>
   </div>
@@ -24,9 +24,9 @@
   <div class="timeline user-feed-timeline">
     {{if .PinnedTweet.ID}}
       <div class="pinned-tweet">
-        <div class="row pinned-tweet__pin-container">
+        <div class="pinned-tweet__pin-container labelled-icon">
           <img class="svg-icon pinned-tweet__pin-icon" src="/static/icons/pin.svg" width="24" height="24" />
-          <span>Pinned</span>
+          <label>Pinned</label>
         </div>
         {{template "tweet" (dict "TweetID" .PinnedTweet.ID "RetweetID" 0 "QuoteNestingLevel" 0)}}
       </div>