Update the default theme

This uses better color contrast and component spacing to improve
legibility. The updated HTML also has better compatibility with browsers
with limited/no CSS support.

29 files changed, 634 insertions, 679 deletions

diff --git a/renderer/renderer.go b/renderer/renderer.go
index c93a611..a88bb9e 100644
--- a/renderer/renderer.go
+++ b/renderer/renderer.go
@@ -43,7 +43,7 @@ type TemplateData struct {
 }
 
 func emojiHTML(e mastodon.Emoji, height string) string {
-	return `<img class="emoji" src="` + e.URL + `" alt=":` + e.ShortCode + `:" title=":` + e.ShortCode + `:" height="` + height + `"/>`
+	return `<img class="emoji" src="` + e.URL + `" alt=":` + e.ShortCode + `:" title=":` + e.ShortCode + `:" height="` + height + `">`
 }
 
 func emojiFilter(content string, emojis []mastodon.Emoji) string {
diff --git a/static/fluoride.js b/static/fluoride.js
index d5c5b5d..73d4939 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -74,8 +74,10 @@ function handleLikeForm(id, f) {
 			for (var i = 0; i < counts.length; i++) {
 				if (count > 0) {
 					counts[i].innerHTML = "(" + count + ")";
+					counts[i].classList.remove("hidden");
 				} else {
 					counts[i].innerHTML = "";
+					counts[i].classList.add("hidden");
 				}
 			}
 		}, function(err) {
@@ -113,8 +115,10 @@ function handleRetweetForm(id, f) {
 			for (var i = 0; i < counts.length; i++) {
 				if (count > 0) {
 					counts[i].innerHTML = "(" + count + ")";
+					counts[i].classList.remove("hidden");
 				} else {
 					counts[i].innerHTML = "";
+					counts[i].classList.add("hidden");
 				}
 			}
 		}, function(err) {
@@ -151,8 +155,7 @@ function handleReplyToLink(a) {
 			var ract = event.target.getBoundingClientRect();
 			copy.style["max-width"] = (window.innerWidth - ract.left - 32) + "px";
 			if (ract.top > window.innerHeight / 2) {
-				copy.style.bottom = (window.innerHeight - 
-					window.scrollY - ract.top) + "px";
+				copy.style.bottom = ract.height + 'px';
 			}
 			event.target.parentElement.appendChild(copy);
 		}
@@ -320,7 +323,7 @@ document.addEventListener("DOMContentLoaded", function() {
 		}
 	}
 
-	var links = document.querySelectorAll(".user-profile-decription a, .user-fields a");
+	var links = document.querySelectorAll(".user-profile-description a, .user-fields a");
 	for (var j = 0; j < links.length; j++) {
 		links[j].target = "_blank";
 	}
diff --git a/static/style.css b/static/style.css
index 28683e7..9cc203d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,23 +1,58 @@
-frame, body {
-	background-color: #d2d2d2;
+body,
+button,
+input,
+select,
+textarea {
+	font-family: sans-serif;
 }
 
-.status-container-container {
-	margin: 0 -4px 12px -4px;
-	padding: 4px;
+input::file-selector-button {
+	font-family: sans-serif;
+}
+
+input[type=text],
+textarea {
+	font-size: inherit;
+}
+
+h1 {
+	font-weight: normal;
+	font-size: x-large;
+}
+
+frame,
+body,
+.more-content {
+	background-color: #fcfcfc;
+}
+
+.status-container-container,
+.notification-container {
+	background-color: #f0f0f0;
+	background-color: #eaeaea99;
+	margin: 8px 0;
+	padding: 12px 4px;
 	border-left: 4px solid transparent;
 }
 
-.status-container-container:target {
-	border-color: #777777;
+@media only screen and (max-width: 768px) {
+	.status-container-container,
+	.notification-container {
+		margin: 8px -4px;
+	}
 }
 
 .status-container-container.highlight {
-	background-color: #eeeeee;
+	background-color: #d3d3d3;
+	background-color: #cfcfcf99;
+}
+
+.status-container-container:target {
+	border-left: 4px solid #777777;
 }
 
 .status-container {
-	display: flex;
+	position: relative;
 }
 
 .status-content {
@@ -47,19 +82,19 @@ frame, body {
 }
 
 .status-media-container {
-	margin: 5px 0 -5px 0;
+	margin: 4px 0;
 	overflow: auto;
 }
 
-.status-media-container>a {
-	margin-bottom: 5px;
+.status-image-container,
+.status-video-container {
 	display: inline-block;
+	position: relative;
+	margin: 2px 4px 2px 0;
 }
 
 .status-profile-img-container {
-	margin-right: 8px;
-	display: inline-block;
-	vertical-align: top;
+	position: absolute;
 }
 
 .status-profile-img {
@@ -71,27 +106,20 @@ frame, body {
 	max-width: 48px;
 	vertical-align: top;
 	object-fit: contain;
-	margin-top: 2px;
 }
 
-.status {
-	display: inline-block;
-	vertical-align: top;
-	flex: 1;
-	min-width: 0;
-}
-
-.status-dname {
-	font-weight: 800;
+.user-list-profile-img .img-link,
+.status-profile-img-container .img-link {
+	width: 48px;
+	overflow: hidden;
 }
 
-.status-uname {
-	font-style: italic;
-	font-size: 10pt;
+.retweet-info .img-link {
+	margin-right: 4px;
 }
 
-.status-action-container {
-	margin-top: 4px;
+.status {
+	margin-left: 56px;
 }
 
 .status-action {
@@ -103,46 +131,14 @@ frame, body {
 	margin-right: 4px;
 }
 
-.status-action form {
-	display: inline-block;
-}
-
-.status-action a {
-	display: inline-block;
-}
-
-.status-action * {
-	vertical-align: middle;
-}
-
-.status-action a.status-time {
-	width: auto;
-}
-
-.page-title {
-	font-size: 18pt;
-	margin: 8px 0;
-}
-
-.post-form {
-	margin: 4px 0;
-}
-
-.post-form>div {
-	margin-bottom: 4px;
-}
-
-.signin-form {
-	margin: 8px 0;
-}
-
-.signin-form input {
-	margin: 4px 0;
-}
-
 .retweet-info {
 	margin: 0 0 4px 24px;
 	overflow-wrap: break-word;
+	font-size: smaller;
+}
+
+.retweet-info>* {
+	vertical-align: middle;
 }
 
 .retweet-info .status-profile-img {
@@ -155,113 +151,71 @@ frame, body {
 	vertical-align: middle;
 }
 
-.retweet-info .status-dname {
-	margin-left: 4px;
-}
-
 textarea {
 	padding: 4px;
-	font-size: 11pt;
-	font-family: initial;
 	box-sizing: border-box;
+	width: 644px;
+	max-width: 100%;
 }
 
 .post-content {
 	width: 100%;
 }
 
-#css, #bio {
-	max-width: 100%;
+.monospace {
+	font-family: monospace;
 }
 
 .pagination {
-	margin: 4px 4px 12px 4px;
+	margin: 12px 4px;
 }
 
 .pagination a {
 	margin: 0 8px;
-	font-size: 13pt;
-}
-
-.notification-container {
-	margin: 0 -4px 12px -4px;
-	padding: 4px;
-	border-left: 4px solid transparent;
+	font-size: large;
 }
 
 .notification-container.unread {
 	border-color: #777777;
 }
 
-.notification-container .status-container {
+.notification-container .status-content,
+.notification-container .status-reply-container,
+.notification-container .status-media-container {
 	opacity: 0.6;
 }
 
-.notification-container.mention .status-container {
-	opacity: unset;
-}
-
-.notification-info-text span {
-	vertical-align: middle;
+.notification-container.mention .status-content,
+.notification-container.mention .status-reply-container,
+.notification-container.mention .status-media-container {
+	opacity: 1;
 }
 
-.notification-follow-container {
-	overflow: auto;
-	display: flex;
-	align-items: center;
-}
-
-.notification-follow {
-	overflow: auto;
-}
-
-.notification-time {
-	margin-left: 8px;
-}
-
-.status-reply-to-link {
-	font-size: 10pt
+.status-reply-to-link,
+.status-reply-link,
+.status-reply-text {
+	font-size: smaller;
 }
 
 .status-reply-container {
 	overflow-wrap: break-word;
-}
-
-.status-reply-container .fa {
-	font-size: 10pt;
-	vertical-align: sub;
-	margin-right: -2px;
-}
-
-.status-reply-text {
-	font-size: 10pt;
-}
-
-.status-reply-link {
-	font-size: 10pt;
+	position: relative;
 }
 
 .status-reply-info-divider {
 	margin: 0 4px;
 }
 
-.post-content-container {
-	padding-right: 8px;
-}
-
-.error-text {
-	margin: 8px 0;
-}
-
-.post-attachment-div {
-	margin: 2px 0;
-}
-
 .user-profile-img-container {
 	display: inline-block;
 	margin: 0 4px 4px 0;
 }
 
+.user-profile-img-container .img-link {
+	width: 96px;
+	overflow: hidden;
+}
+
 .user-profile-details-container {
 	display: inline-block;
 	vertical-align: top;
@@ -276,20 +230,19 @@ textarea {
 	width: 96px;
 	vertical-align: top;
 	object-fit: contain;
-	margin-top: 2px;
 }
 
-.user-profile-decription,
+.user-profile-description,
 .user-fields {
 	overflow-wrap: break-word;
 	margin: 8px 0;
 }
 
-.user-profile-decription p {
+.user-profile-description p {
 	margin: 0;
 }
 
-.user-profile-decription img {
+.user-profile-description img {
 	height: auto;
 	width: auto;
 	max-height: 240px;
@@ -301,49 +254,42 @@ textarea {
 	display: inline;
 }
 
-.p-0 {
-	padding: 0;
-}
-
 .btn-link {
-	border: none;
 	outline: none;
-	background: none;
 	cursor: pointer;
 	padding: 0;
-	font-family: inherit;
 	font-size: inherit;
+	background: none !important;
+	border: none !important;
 }
 
-a, .btn-link {
-	color: #464acc;
+a,
+.btn-link {
+	color: #1449af;
 	text-decoration: none;
 }
 
 a:hover,
 .btn-link:hover {
-	color: #8387bf;
+	color: #4489bf;
 }
 
-.status-visibility {
-	margin-left: 4px;
-	display: inline-block;
-	color: #222222;
-	font-size: 8pt;
+.btn-link:disabled {
+	color: #5a5a77;
+	cursor: unset;
+}
+
+*:focus-visible {
+	outline: 1px solid #000000;
 }
 
 .remote-link {
 	margin-left: 4px;
-	font-size: 8pt;
+	font-size: smaller;
 }
 
 .img-link {
 	display: inline-block;
-	position: relative;
-}
-
-.status-profile-img-container .img-link {
-	width: 48px;
 }
 
 .status-nsfw-overlay {
@@ -355,16 +301,7 @@ a:hover,
 	right: 0;
 }
 
-.img-link:hover .status-nsfw-overlay {
-	display: none;
-}
-
-.status-video-container {
-	display: inline-block;
-	position: relative;
-	margin-bottom: 5px;
-}
-
+.status-image-container:hover .status-nsfw-overlay,
 .status-video-container:hover .status-nsfw-overlay {
 	display: none;
 }
@@ -372,8 +309,11 @@ a:hover,
 .emoji-item-container {
 	width: 220px;
 	display: inline-block;
-	margin: 4px 0;
+	margin: 4px 4px 0 0;
 	overflow: hidden;
+	padding: 4px;
+	background-color: #f0f0f0;
+	background-color: #eaeaea99;
 }
 
 .emoji-item {
@@ -394,47 +334,58 @@ img.emoji {
 }
 
 .status-dname img.emoji {
-	height: 24px;
-	min-height: 24px;
-	min-width: 24px;
+	height: 20px;
+	min-height: 20px;
+	min-width: 20px;
+}
+
+.retweet-info>.status-dname img.emoji {
+	height: 16px;
+	min-height: 16px;
+	min-width: 16px;
 }
 
 .emoji-shortcode {
 	margin-left: 4px;
 }
 
-.post-form-emoji-link {
-	margin-left: 4px;
+.nav-container {
+	position: relative;
+	margin-bottom: 4px;
+}
+
+.nav-profile-img-container {
+	position: absolute;
 }
 
-.user-info-img {
+.nav-profile-img {
 	height: 64px;
 	width: 64px;
 	vertical-align: middle;
 	object-fit: contain;
-	margin-top: 2px;
 }
 
-.user-info-img-container {
-	float: left;
-	margin-right: 8px;
+.nav-link-container {
+	margin-left: 72px;
 }
 
-.user-info-details-container {
-	overflow: auto;
+nav ul {
+	list-style: none;
+	margin: 4px 0;
+	padding: 0;
 }
 
-.user-info-details-name,
-.user-info-details-nav {
-	margin-bottom: 4px;
+nav li {
+	display: inline;
 }
 
 .nav-link {
 	margin-right: 2px;
 }
 
-.profile-edit-link {
-	font-size: 8pt;
+.nav-profile-link {
+	margin-right: 2px;
+	font-size: smaller;
 }
 
 .user-list-item {
@@ -445,65 +396,51 @@ img.emoji {
 	align-items: center;
 }
 
-.user-list-profile-img {
-	float: left;
-	margin: 0 8px 0 0;
+td .user-list-item {
+	padding: 0;
 }
 
-.user-list-name {
-	overflow: auto;
+.user-list-profile-img {
+	margin: 0 8px 0 0;
 }
 
 .user-list-action {
 	margin: 0 12px;
 }
 
-#settings-form {
-	margin: 8px 0;
-}
-
-.settings-form-field {
-	margin: 4px 0;
+.form-field {
+	margin-bottom: 8px;
 }
 
-#settings-form button[type=submit] {
-	margin-top: 8px;
+.form-field-s {
+	margin-bottom: 4px;
 }
 
-#reply-popup {
-	position: absolute;
-	background-color: #d2d2d2;
-	border: 1px solid #aaaaaa;
-	padding: 4px 8px;
-	z-index: 3;
-	margin: 0;
+.emoji-link {
+	margin-left: 4px;
 }
 
+#reply-popup,
 #reply-to-popup {
+	background-color: #f0f0f0;
+	border: 1px solid #bababa;
 	position: absolute;
-	background-color: #d2d2d2;
-	border: 1px solid #aaaaaa;
 	padding: 4px 8px;
 	z-index: 3;
 	margin: 0;
 }
 
-.search-form {
-	margin: 12px 0;
-}
-
 .more-container {
 	position: relative;
 	display: inline-block;
 }
 
 .more-content {
-	display: none;
 	position: absolute;
-	background-color: #d2d2d2;
+	display: none;
 	padding: 2px 4px;
-	border: 1px solid #aaaaaa;
 	z-index: 1;
+	border: 1px solid #bababa;
 }
 
 .more-container:hover .more-content {
@@ -511,74 +448,28 @@ img.emoji {
 }
 
 .more-link {
-	font-size: 8pt;
+	font-size: smaller;
 	display: block;
 	margin: 2px;
 }
 
-.poll-form {
-	margin-top: 5px;
+.status-poll {
+	margin: 4px 0;
 	overflow: auto;
 	overflow-wrap: break-word;
 }
 
-.poll-form button[type=submit] {
-	margin-top: 6px;
-}
-
-.poll-info {
-	margin-top: 6px;
-}
-
-.page-title-container {
-	margin: 8px 0;
-}
-
-.page-refresh {
-	margin-right: 8px;
-}
-
-.notification-text {
-	vertical-align: middle;
-}
-
-.notification-read {
-	display: inline-block;
-}
-
-.no-data-found {
-	margin: 12px 0;
-}
-
-.signout {
-	display: inline;
-}
-
-.signin-desc {
-	margin: 8px 0 16px 0;
-}
-
-.keyboard-shortcuts {
-	margin-top: 12px;
-}
-
-.keyboard-shortcuts td {
-	padding: 2px 4px;
+.page-link {
+	font-size: large;
 }
 
 kbd {
-	border-radius: 3px;
-	padding: 1px 4px;
-	border: 1px solid #444444;
-	background-color: #eeeeee;
-	font-size: 10pt;
-}
-
-.filters {
-	margin: 10px 0;
+	padding: 2px 4px;
+	background-color: #f0f0f0;
+	border: 1px solid #bababa;
 }
 
-.filters td {
+td {
 	padding: 2px 4px;
 }
 
@@ -588,73 +479,111 @@ kbd {
 	position: fixed;
 }
 
-.quote {
-	color: #789922;
+blockquote {
+        margin: 4px 20px;
+        border-left: 2px solid #3e7300;
+        padding-left: 12px;
 }
 
-.profile-form {
-	margin: 0 4px;
+blockquote,
+.quote {
+	color: #3e7300;
 }
 
-.profile-form-field {
-	margin: 8px 0;
+.profile-img-container {
+	margin: 4px 0;
 }
 
 .profile-avatar {
 	height: 96px;
 	width: 96px;
 	object-fit: contain;
+	vertical-align: middle;
 }
 
 .profile-banner {
 	height: 120px;
+	vertical-align: middle;
 }
 
-.block-label,
-.profile-delete,
-.profile-field,
-.profile-field input {
+.block-label {
 	margin: 0 0 4px 0;
 }
 
-.profile-form input[type=text] {
+.input-w {
 	width: 320px;
 	max-width: 100%;
 	box-sizing: border-box;
 }
 
-#bio {
-	width: 644px;
+.follow-request-actions {
+	margin-top: 4px;
 }
 
-.dark {
-	background-color: #222222;
-	background-image: none;
-	color: #eaeaea;
+.hidden {
+	display: none;
 }
 
-.dark a {
-	color: #81a2be;
+input[type=text],
+textarea {
+	border: 2px solid #bababa;
 }
 
-.dark .post-content {
-	background-color: #333333;
-	border: 1px solid #444444;
-	color: #eaeaea;
+input[type=submit],
+button,
+select,
+input::file-selector-button {
+	background-color: #eaeaea;
+	border: 2px solid #bababa;
 }
 
-.dark #reply-popup,
-.dark #reply-to-popup {
-	background-color: #222222;
-	border-color: #444444;
+input[type=text]:hover,
+textarea:hover {
+	border: 2px solid #8b8b8b;
+}
+
+input[type=submit]:hover,
+button:hover,
+select:hover,
+input::file-selector-button:hover {
+	background-color: #dfdfdf;
+	border: 2px solid #8b8b8b;
+}
+
+input[type=submit]:active,
+button:active,
+select:active,
+input::file-selector-button:active {
+	background-color: #cacaca;
+}
+
+.dark,
+.dark body,
+.dark .more-content {
+	background-color: #0f0f0f;
+	color: #dcdcdc;
+}
+
+.dark .status-container-container,
+.dark .notification-container,
+.dark .emoji-item-container {
+	background-color: #181818;
+	background-color: #1f1f1f99;
 }
 
 .dark .status-container-container.highlight {
-	background-color: #333333;
+	background-color: #222222;
+	background-color: #2f2f2f99;
+}
+
+.dark #reply-popup,
+.dark #reply-to-popup {
+	background-color: #181818;
 }
 
+.dark a,
 .dark .btn-link {
-	color: #81a2be;
+	color: #6090a3;
 }
 
 .dark a:hover,
@@ -662,17 +591,62 @@ kbd {
 	color: #497091;
 }
 
-.dark .status-visibility {
-	color: #eaeaea;
+.dark *:focus-visible {
+	outline: 1px solid #dcdcdc;
 }
 
+.dark #reply-popup,
+.dark #reply-to-popup,
 .dark .more-content {
-	background-color: #222222;
-	border-color: #444444;
+	border-color: #333333;
 }
 
 .dark kbd {
-	background-color: #333333;
-	border-color: #444444;
-	color: #eaeaea;
+	background-color: #181818;
+	border: 2px solid #333333;
+}
+
+.dark blockquote,
+.dark .quote {
+	color: #779c3b;
+}
+
+.dark input[type=text],
+.dark textarea {
+	color: #dcdcdc;
+	background-color: #0c0c0c;
+	border: 2px solid #333333;
+}
+
+.dark .post-content {
+	background-color: #111111;
+}
+
+.dark input[type=submit],
+.dark button,
+.dark select,
+.dark input::file-selector-button {
+	background-color: #242424;
+	border: 2px solid #333333;
+}
+
+.dark input[type=text]:hover,
+.dark textarea:hover {
+	border: 2px solid #555555;
+}
+
+.dark input[type=submit]:hover,
+.dark button:hover,
+.dark select:hover,
+.dark input::file-selector-button:hover {
+	background-color: #2f2f2f;
+	border: 2px solid #555555;
+}
+
+
+.dark input[type=submit]:active,
+.dark button:active,
+.dark select:active,
+.dark input::file-selector-button:active {
+	background-color: #3f3f3f;
 }
diff --git a/templates/about.tmpl b/templates/about.tmpl
index 0e4d001..c6129f9 100644
--- a/templates/about.tmpl
+++ b/templates/about.tmpl
@@ -1,7 +1,7 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
 
-<div class="page-title"> About </div>
+<h1>About</h1>
 <div>
 	<p>
 		A web client for <a href="https://pleroma.social" target="_blank">Mastadon Network</a>.
@@ -14,7 +14,7 @@
 	</P>
 </div>
 
-<div class="page-title"> Keyboard shortcuts </div>
+<h1>Keyboard shortcuts</h1>
 <div>
 	<table class="keyboard-shortcuts">
 		<tr>
@@ -42,11 +42,11 @@
 			<td> <kbd>5</kbd> </td>
 		</tr>
 		<tr>
-			<td> Search </td>
+			<td> Lists </td>
 			<td> <kbd>6</kbd> </td>
 		</tr>
 		<tr>
-			<td> Lists </td>
+			<td> Search </td>
 			<td> <kbd>7</kbd> </td>
 		</tr>
 		<tr>
diff --git a/templates/emoji.tmpl b/templates/emoji.tmpl
index 4b07e81..86ab285 100644
--- a/templates/emoji.tmpl
+++ b/templates/emoji.tmpl
@@ -1,12 +1,12 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Emojis </div>
+<h1>Emojis</h1>
 
 <div class="emoji-list-container">
 	{{range .Emojis}}
 	<div class="emoji-item-container">
 		<div class="emoji-item">
-			<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" loading="lazy" />
+			<img class="emoji" src="{{.URL}}" alt="{{.ShortCode}}" height="32" loading="lazy">
 			<span title=":{{.ShortCode}}:" class="emoji-shortcode">:{{.ShortCode}}:</span>
 		</div>
 	</div>
diff --git a/templates/error.tmpl b/templates/error.tmpl
index c8da1e6..4763fcf 100644
--- a/templates/error.tmpl
+++ b/templates/error.tmpl
@@ -1,8 +1,8 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Error </div>
+<h1>Error</h1>
 
-<div class="error-text"> {{.Err}} </div>
+<p>{{.Err}}</p>
 <div>
 	<a href="/timeline/home">home</a>
 	{{if .Retry}}
diff --git a/templates/filters.tmpl b/templates/filters.tmpl
index ef7c024..8bdae41 100644
--- a/templates/filters.tmpl
+++ b/templates/filters.tmpl
@@ -1,9 +1,9 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Filters </div>
+<h1>Filters</h1>
 
 {{if .Filters}}
-<table class="filters">
+<table>
 	{{range .Filters}}
 	<tr>
 		<td> {{.Phrase}}{{if not .WholeWord}}*{{end}} </td>
@@ -11,29 +11,23 @@
 			<form action="/unfilter/{{.ID}}" method="POST">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<button type="submit"> Delete </button>
+				<button type="submit">Delete</button>
 			</form>
 		</td>
 	</tr>
 	{{end}}
 </table>
 {{else}}
-	<div class="filters"> No filters added </div>
+	<p> No filters added </p>
 {{end}}
 
-<div class="page-title"> Add filter </div>
+<h1>Add filter</h1>
 <form action="/filter" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<span class="settings-form-field">
-		<label for="phrase"> Phrase </label>
-		<input id="phrase" name="phrase" required>
-	</span>
-	<span class="settings-form-field">
-		<input id="whole-word" name="whole_word" type="checkbox" value="true" checked>
-		<label for="whole-word"> Whole word </label>
-	</span>
-	<button type="submit"> Add </button>
+	<label>Phrase <input type="text" name="phrase" required></label>
+	<label><input name="whole_word" type="checkbox" value="true" checked> Whole word</label>
+	<button type="submit">Add</button>
 </form>
 
 {{template "footer.tmpl"}}
diff --git a/templates/header.tmpl b/templates/header.tmpl
index 7ebf65e..713aa96 100644
--- a/templates/header.tmpl
+++ b/templates/header.tmpl
@@ -17,6 +17,9 @@
 	{{if .RefreshInterval}}
 	<meta http-equiv="refresh" content="{{.RefreshInterval}}">
 	{{end}}
+	{{if $.Ctx.DarkMode}}
+	<meta name="color-scheme" content="dark">
+	{{end}}
 	<title> {{if gt .Count 0}}({{.Count}}){{end}} {{.Title}} </title>
 	<link rel="stylesheet" href="/static/style.css">
 	{{if .CustomCSS}}
diff --git a/templates/likedby.tmpl b/templates/likedby.tmpl
index 222254c..6f62647 100644
--- a/templates/likedby.tmpl
+++ b/templates/likedby.tmpl
@@ -1,6 +1,6 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Liked By </div>
+<h1>Liked By</h1>
 
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
diff --git a/templates/list.tmpl b/templates/list.tmpl
index dcc6ee8..ad2e538 100644
--- a/templates/list.tmpl
+++ b/templates/list.tmpl
@@ -1,21 +1,23 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> List {{.List.Title}} </div>
+<h1>List {{.List.Title}}</h1>
 
 <form action="/list/{{.List.ID}}/rename" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<input id="title" name="title" value="{{.List.Title}}">
-	<button type="submit"> Rename </button>
+	<div class="form-field">
+		<input type="text" id="title" name="title" value="{{.List.Title}}">
+		<button type="submit"> Rename </button>
+	<div>
 </form>
 
-<div class="page-title"> Users </div>
+<h1>Users</h1>
 {{if .Accounts}}
 <table>
 {{range .Accounts}}
 	<tr>
-		<td class="p-0"> {{template "userlistitem.tmpl" (WithContext . $.Ctx)}} </td>
-		<td class="p-0"> 
+		<td>{{template "userlistitem.tmpl" (WithContext . $.Ctx)}}</td>
+		<td>
 			<form class="user-list-action" action="/list/{{$.Data.List.ID}}/removeuser?uid={{.ID}}" method="POST">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
@@ -26,16 +28,16 @@
 {{end}}
 </table>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
-<div class="page-title"> Add user </div>
-<form class="search-form" action="/list/{{.List.ID}}" method="GET">
-	<span class="post-form-field">
+<h1>Add user</h1>
+<form action="/list/{{.List.ID}}" method="GET">
+	<div class="form-field">
 		<label for="query"> Query </label>
-		<input id="query" name="q" value="{{.Q}}">
-	</span>
-	<button type="submit"> Search </button>
+		<input type="text" id="query" name="q" value="{{.Q}}">
+		<button type="submit"> Search </button>
+	</div>
 </form>
 
 {{if .Q}}
@@ -55,7 +57,7 @@
 {{end}}
 </table>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 {{end}}
 
diff --git a/templates/lists.tmpl b/templates/lists.tmpl
index 27979cb..98cdb78 100644
--- a/templates/lists.tmpl
+++ b/templates/lists.tmpl
@@ -1,33 +1,37 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Lists </div>
+<h1>Lists</h1>
 
-{{range .Lists}}
-<div>
-	<a href="/timeline/list?list={{.ID}}"> {{.Title}} timeline </a> 
-	-
-	<form class="d-inline" action="/list/{{.ID}}" method="GET">
-		<button type="submit" class="btn-link"> edit </button>
-	</form>
-	-
-	<form class="d-inline" action="/list/{{.ID}}/remove" method="POST">
-		<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-		<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-		<button type="submit" class="btn-link"> delete </button>
-	</form>
-</div>
+{{if .Lists}}
+<table>
+	{{range .Lists}}
+	<tr>
+		<td><a href="/timeline/list?list={{.ID}}">{{.Title}} timeline</a></td>
+		<td>
+			<form action="/list/{{.ID}}" method="GET">
+				<button type="submit">Edit</button>
+			</form>
+		</td>
+		<td>
+			<form action="/list/{{.ID}}/remove" method="POST">
+				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+				<button type="submit">Delete</button>
+			</form>
+		</td>
+	</tr>
+	{{end}}
+</table>
 {{else}}
-<div class="no-data-found">No data found</div>
+	<p>No lists added</p>
 {{end}}
 
-<div class="page-title"> Add list </div>
+<h1>Add list</h1>
 <form action="/list" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<span class="settings-form-field">
-		<label for="title"> Title </label>
-		<input id="title" name="title" required>
-	</span>
+	<label for="title">Title</label>
+	<input type="text" id="title" name="title" required>
 	<button type="submit"> Add </button>
 </form>
 
diff --git a/templates/mute.tmpl b/templates/mute.tmpl
index ee66b91..0defc80 100644
--- a/templates/mute.tmpl
+++ b/templates/mute.tmpl
@@ -1,15 +1,15 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Mute {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}} @{{.User.Acct}} </div>
+<h1>Mute {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}} @{{.User.Acct}}</h1>
 
 <form action="/mute/{{.User.ID}}" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<div class="settings-form-field">
+	<div class="form-field-s">
 		<input id="notifications" name="notifications" type="checkbox" value="true" checked>
 		<label for="notifications"> Mute notifications </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field-s">
 		<label for="duration"> Auto unmute </label>
 		<select id="duration" name="duration">
 			<option value="0" selected>Disabled</option>
diff --git a/templates/nav.tmpl b/templates/nav.tmpl
index bdb72be..c01f64e 100644
--- a/templates/nav.tmpl
+++ b/templates/nav.tmpl
@@ -1,39 +1,35 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="user-info">
-	<div class="user-info-img-container">
+<div class="nav-container">
+	<div class="nav-profile-img-container">
 		<a class="img-link" href="/timeline/home" title="Home (1)">
-			<img class="user-info-img" src="{{.User.Avatar}}" alt="profile-avatar" height="64" />
+			<img class="nav-profile-img" src="{{.User.Avatar}}" alt="avatar" height="64">
 		</a>
 	</div>
-	<div class="user-info-details-container">
-		<div class="user-info-details-name">
-			<bdi class="status-dname">{{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}}</bdi>
-			<a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)">
-				<span class="status-uname">@{{.User.Acct}}</span>
-			</a>
-			<a class="profile-edit-link" href="/profile" title="edit profile" target="_top">
-				edit
-			</a>
-		</div>
-		<div class="user-info-details-nav">
-			<a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a>
-			<a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a>
-			<a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a>
-			<a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a>
-			<a class="nav-link" href="/timeline/remote" accesskey="5" title="Remote timeline (5)">remote</a>
-			<a class="nav-link" href="/search" accesskey="6" title="Search (6)">search</a>
-		</div>
-		<div>
-			<a class="nav-link" href="/lists" accesskey="7" title="Lists (7)">lists</a>
-			<a class="nav-link" href="/settings" target="_top" accesskey="8" title="Settings (8)">settings</a>
-			<form class="signout" action="/signout" method="post" target="_top">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="signout" class="btn-link nav-link" title="Signout">
-			</form>
-			<a class="nav-link" href="/about" accesskey="9" title="About (9)">about</a>
-		</div>
+	<div class="nav-link-container">
+		<bdi class="status-dname">{{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}}</bdi>
+		<a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)"><span class="status-uname">@{{.User.Acct}}</span></a>
+		<a class="nav-profile-link" href="/profile" title="edit profile" target="_top">edit</a>
+		<form class="d-inline" action="/signout" method="post" target="_top">
+			<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+			<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+			<input type="submit" value="signout" class="btn-link nav-profile-link" title="Signout">
+		</form>
+		<nav>
+			<ul>
+				<li><a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a></li>
+				<li><a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a></li>
+				<li><a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a></li>
+				<li><a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a></li>
+				<li><a class="nav-link" href="/timeline/remote" accesskey="5" title="Remote timeline (5)">remote</a></li>
+			</ul>
+			<ul>
+				<li><a class="nav-link" href="/lists" accesskey="6" title="Lists (6)">lists</a></li>
+				<li><a class="nav-link" href="/search" accesskey="7" title="Search (7)">search</a></li>
+				<li><a class="nav-link" href="/settings" target="_top" accesskey="8" title="Settings (8)">settings</a></li>
+				<li><a class="nav-link" href="/about" accesskey="9" title="About (9)">about</a></li>
+			</ul>
+		</nav>
 	</div>
 </div>
 
diff --git a/templates/notification.tmpl b/templates/notification.tmpl
index f1336d3..395987e 100644
--- a/templates/notification.tmpl
+++ b/templates/notification.tmpl
@@ -1,73 +1,66 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title-container">
-	<span class="page-title">
-		Notifications
-		{{if and (not $.Ctx.AntiDopamineMode) (gt .UnreadCount 0)}}
+
+<form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
+	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+	<h1>Notifications
+		{{- if and (not $.Ctx.AntiDopamineMode) (gt .UnreadCount 0)}}
 			({{.UnreadCount }})
 		{{end}}
-	</span>
-	<a class="page-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
-	{{if .ReadID}}
-	<form class="notification-read" action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self">
-		<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-		<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-		<input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)">
-	</form>
-	{{end}}
-</div>
+		<a class="page-link" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a>
+		{{if .ReadID}}
+		<input type="submit" value="read" class="btn-link page-link" accesskey="C" title="Clear unread notifications (C)">
+		{{end}}
+	</h1>
+</form>
 
 {{range .Notifications}}
-<div class="notification-container {{.Type}} {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
+<article class="notification-container {{.Type}} {{if .Pleroma}}{{if not .Pleroma.IsSeen}}unread{{end}}{{end}}">
 	{{if eq .Type "follow"}}
-	<div class="notification-follow-container">
-		<div class="status-profile-img-container">
+	<div class="user-list-item">
+		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.Account.ID}}">
-				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="profile-avatar" height="48" />
+				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 			</a>
 		</div>
-		<div class="notification-follow">
-			<div class="notification-info-text">
-				<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
-				<span class="notification-text"> followed you - 
-					<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
-				</span>
-			</div>
-			<div>
-				<a href="/user/{{.Account.ID}}"> <span class="status-uname">@{{.Account.Acct}}</span> </a>
-			</div>
+		<div class="user-list-name">
+			<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+			followed you - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+			<br>
+			<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		</div>
+		<br class="hidden">
 	</div>
 
 	{{else if eq .Type "follow_request"}}
-	<div class="notification-follow-container">
-		<div class="status-profile-img-container">
+	<div class="user-list-item">
+		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.Account.ID}}">
-				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="profile-avatar" height="48" />
+				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 			</a>
 		</div>
-		<div class="notification-follow">
-			<div class="notification-info-text">
-				<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
-				<span class="notification-text"> wants to follow you - 
-					<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
-				</span>
-			</div>
-			<div>
-				<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
+		<div class="user-list-name">
+			<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+			wants to follow you - 
+			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
+			<br>
+			<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
+			<div class="follow-request-actions">
+				<form class="d-inline" action="/accept/{{.Account.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="accept" class="btn-link">
+				</form>
+				-
+				<form class="d-inline" action="/reject/{{.Account.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="reject" class="btn-link">
+				</form>
 			</div>
-			<form class="d-inline" action="/accept/{{.Account.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="accept" class="btn-link">
-			</form>
-			-
-			<form class="d-inline" action="/reject/{{.Account.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="reject" class="btn-link">
-			</form>
 		</div>
+		<br class="hidden">
 	</div>
 
 	{{else if eq .Type "mention"}}
@@ -76,11 +69,10 @@
 	{{else if eq .Type "reblog"}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
-		</a>
-		<a href="/user/{{.Account.ID}}">
-			<span class="status-uname">@{{.Account.Acct}}</span>
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+		<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		<span class="notification-text"> retweeted your post - 
 			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
@@ -90,11 +82,10 @@
 	{{else if eq .Type "favourite"}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
-		</a>
-		<a href="/user/{{.Account.ID}}">
-			<span class="status-uname">@{{.Account.Acct}}</span>
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+		<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		<span class="notification-text"> liked your post - 
 			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
@@ -104,25 +95,24 @@
 	{{else}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
-		</a>
-		<a href="/user/{{.Account.ID}}">
-			<span class="status-uname">@{{.Account.Acct}}</span>
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
+		<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 		<span class="notification-text"> {{.Type}} - 
 			<time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
 		</span>
 	</div>
 	{{if .Status}}{{template "status" (WithContext .Status $.Ctx)}}{{end}}
 	{{end}}
-</div>
+</article>
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}" target="_self">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/postform.tmpl b/templates/postform.tmpl
index 0af50fb..5ee1a51 100644
--- a/templates/postform.tmpl
+++ b/templates/postform.tmpl
@@ -3,49 +3,41 @@
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 	{{if .ReplyContext}}
-	<input type="hidden" name="reply_to_id" value="{{.ReplyContext.InReplyToID}}" />
-	<input type="hidden" name="quickreply" value="{{.ReplyContext.QuickReply}}" />
-	<label for="post-content" class="post-form-title"> Reply to @{{.ReplyContext.InReplyToName}} </label>
+	<input type="hidden" name="reply_to_id" value="{{.ReplyContext.InReplyToID}}">
+	<input type="hidden" name="quickreply" value="{{.ReplyContext.QuickReply}}">
+	<label for="post-content">Reply to @{{.ReplyContext.InReplyToName}}</label>
 	{{else}}
-	<label for="post-content" class="post-form-title"> New post </label>
+	<label for="post-content">New post</label>
 	{{end}}
-	<a class="post-form-emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L">
-		emoji list
-	</a>
-	<div class="post-form-content-container">
+	<a class="emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L">emoji list</a>
+	<div class="form-field-s">
 		<textarea id="post-content" name="content" class="post-content" cols="34" rows="5" accesskey="E" title="Edit post (E)">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>
 	</div>
-	<div>
+	<div class="form-field-s">
 		{{if .Formats}}
-		<span class="post-form-field">
 			{{$defFormat := .DefaultFormat}}
 			<select id="post-format" name="format" accesskey="F" title="Format (F)">
 				{{range .Formats}} 
 					<option value="{{.Type}}" {{if eq $defFormat .Type}}selected{{end}}>{{.Name}}</option> 
 				{{end}}
 			</select>
-		</span>
 		{{end}}
-		<span class="post-form-field">
-			<select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
-				<option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
-				<option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
-				<option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>
-				<option value="direct" {{if eq .DefaultVisibility "direct"}}selected{{end}}>Direct</option>
-			</select>
-		</span>
-		<span class="post-form-field">
-			<input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="true" accesskey="N" title="NSFW (N)">
-			<label for="nsfw-checkbox"> NSFW </label>
-		</span>
+		<select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)">
+			<option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option>
+			<option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option>
+			<option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option>
+			<option value="direct" {{if eq .DefaultVisibility "direct"}}selected{{end}}>Direct</option>
+		</select>
+		<input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="true" accesskey="N" title="NSFW (N)">
+		<label for="nsfw-checkbox"> NSFW </label>
+	</div>
+	<div class="form-field-s">
+		<input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
 	</div>
-	<div>
-		<span class="post-form-field">
-			<input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)">
-		</span>
+	<div class="form-field-s">
+		<button type="submit" accesskey="P" title="Post (P)"> Post </button>
+		<button type="reset" title="Reset"> Reset </button>
 	</div>
-	<button type="submit" accesskey="P" title="Post (P)"> Post </button>
-	<button type="reset" title="Reset"> Reset </button>
 </form>
 {{end}}
 
diff --git a/templates/profile.tmpl b/templates/profile.tmpl
index 4bf1937..0b2573c 100644
--- a/templates/profile.tmpl
+++ b/templates/profile.tmpl
@@ -1,55 +1,61 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Edit Profile </div>
+<h1>Edit Profile</h1>
 
-<form class="profile-form" action="/profile" method="POST" enctype="multipart/form-data">
+<form action="/profile" method="POST" enctype="multipart/form-data">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-	<div class="profile-form-field">
+	<div class="form-field">
 		<div class="block-label">
 			<label for="avatar">Avatar</label> -
 			<input class="btn-link" type="submit" formaction="/profile/delavatar" formmethod="POST" value="delete">
 		</div>
-		<div>
-			<a href="{{.User.Avatar}}" target="_blank">
+		<div class="profile-img-container">
+			<a class="img-link" href="{{.User.Avatar}}" target="_blank">
 				<img class="profile-avatar" src="{{.User.Avatar}}" alt="profile-avatar" height="96">
 			</a>
 		</div>
 		<div><input id="avatar" name="avatar" type="file"></div>
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label">
 			<label for="banner">Banner</label> -
 			<input class="btn-link" type="submit" formaction="/profile/delbanner" formmethod="POST" value="delete">
 		</div>
-		<div>
-			<a href="{{.User.Header}}" target="_blank">
+		<div class="profile-img-container">
+			<a class="img-link" href="{{.User.Header}}" target="_blank">
 				<img class="profile-banner" src="{{.User.Header}}" alt="profile-banner" height="120">
 			</a>
 		</div>
 		<input id="banner" name="banner" type="file">
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label"><label for="name">Name</label></div>
-		<div><input id="name" name="name" type="text" value="{{.User.DisplayName}}"></div>
+		<div><input id="name" name="name" type="text" class="input-w" value="{{.User.DisplayName}}"></div>
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label"><label for="bio">Bio</label></div>
 		<textarea id="bio" name="bio" cols="80" rows="8">{{.User.Source.Note}}</textarea>
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<div class="block-label"><label>Metadata</label></div>
 		{{range $i, $f := .User.Source.Fields}}
-		<div class="profile-field">
-			<input id="field-name-{{$i}}" name="field-name-{{$i}}" type="text" value="{{$f.Name}}" placeholder="name">
-			<input id="field-value-{{$i}}" name="field-value-{{$i}}" type="text" value="{{$f.Value}}" placeholder="value">
+		<div class="form-field">
+			<input id="field-name-{{$i}}" name="field-name-{{$i}}" type="text" class="input-w" value="{{$f.Name}}" placeholder="name">
+			<input id="field-value-{{$i}}" name="field-value-{{$i}}" type="text" class="input-w" value="{{$f.Value}}" placeholder="value">
 		</div>
 		{{end}}
 	</div>
-	<div class="profile-form-field">
+	<br class="hidden">
+	<div class="form-field">
 		<input id="locked" name="locked" type="checkbox" value="true" {{if .User.Locked}}checked{{end}}>
 		<label for="locked">Require manual approval of follow requests</label>
 	</div>
+	<br class="hidden">
 	<button type="submit"> Save </button>
 	<button type="reset"> Reset </button>
 </form>
diff --git a/templates/quickreply.tmpl b/templates/quickreply.tmpl
index 97ff20a..245cd21 100644
--- a/templates/quickreply.tmpl
+++ b/templates/quickreply.tmpl
@@ -1,6 +1,6 @@
 {{with $s := .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Quick Reply </div>
+<h1>Quick Reply</h1>
 
 {{if .Ancestor}}
 {{template "status.tmpl" (WithContext .Ancestor $.Ctx)}}
diff --git a/templates/requestlist.tmpl b/templates/requestlist.tmpl
index f0b2dee..1826404 100644
--- a/templates/requestlist.tmpl
+++ b/templates/requestlist.tmpl
@@ -4,33 +4,33 @@
 	<div class="user-list-item">
 		<div class="user-list-profile-img">
 			<a class="img-link" href="/user/{{.ID}}">
-				<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="avatar" height="48" />
+				<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="@{{.Acct}}" height="48">
 			</a>
 		</div>
 		<div class="user-list-name">
-			<div>
-				<div class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</div>
-				<a class="img-link" href="/user/{{.ID}}">
-					<div class="status-uname">{{.Acct}}</div>
-				</a>
+			<bdi class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</bdi>
+			<br>
+			<a class="img-link" href="/user/{{.ID}}"> <div class="status-uname">{{.Acct}}</div> </a>
+			<div class="follow-request-actions">
+				<form class="d-inline" action="/accept/{{.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="accept" class="btn-link">
+				</form>
+				-
+				<form class="d-inline" action="/reject/{{.ID}}" method="post" target="_self">
+					<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
+					<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
+					<input type="submit" value="reject" class="btn-link">
+				</form>
 			</div>
-			<form class="d-inline" action="/accept/{{.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="accept" class="btn-link">
-			</form>
-			-
-			<form class="d-inline" action="/reject/{{.ID}}" method="post" target="_self">
-				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
-				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
-				<input type="submit" value="reject" class="btn-link">
-			</form>
 		</div>
 	</div>
+	<br class="hidden">
 	{{else}}
-	<div class="no-data-found">No data found</div>
+	<p>No data found</p>
 	{{end}}
 </div>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
diff --git a/templates/retweetedby.tmpl b/templates/retweetedby.tmpl
index 9492ee6..f8548c6 100644
--- a/templates/retweetedby.tmpl
+++ b/templates/retweetedby.tmpl
@@ -1,6 +1,6 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Retweeted By </div>
+<h1>Retweeted By</h1>
 
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
diff --git a/templates/search.tmpl b/templates/search.tmpl
index 0473d4a..076858e 100644
--- a/templates/search.tmpl
+++ b/templates/search.tmpl
@@ -1,27 +1,28 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Search </div>
+<h1>Search</h1>
 
-<form class="search-form" action="/search" method="GET">
-	<span class="post-form-field">
-		<label for="query"> Query </label>
-		<input id="query" name="q" value="{{.Q}}">
-	</span>
-	<span class="post-form-field">
-		<label for="type"> Type </label>
-		<select id="type" name="type">
-			<option value="statuses" {{if eq .Type "statuses"}}selected{{end}}>Statuses</option>
-			<option value="accounts" {{if eq .Type "accounts"}}selected{{end}}>Accounts</option>
-		</select>
-	</span>
-	<button type="submit"> Search </button>
+<form action="/search" method="GET">
+	<p>
+		<label>
+			Query <input type="text" name="q" value="{{.Q}}">
+		</label>
+		<label>
+			Type
+			<select  name="type">
+				<option value="statuses" {{if eq .Type "statuses"}}selected{{end}}>Statuses</option>
+				<option value="accounts" {{if eq .Type "accounts"}}selected{{end}}>Accounts</option>
+			</select>
+		</label>
+		<button type="submit"> Search </button>
+	</p>
 </form>
 
 {{if eq .Type "statuses"}}
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-{{if .Q}}<div class="no-data-found">No data found</div>{{end}}
+{{if .Q}}<p>No data found</p>{{end}}
 {{end}}
 {{end}}
 
@@ -29,11 +30,11 @@
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/settings.tmpl b/templates/settings.tmpl
index ebb0458..1f0f8a2 100644
--- a/templates/settings.tmpl
+++ b/templates/settings.tmpl
@@ -1,12 +1,12 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Settings </div>
+<h1>Settings</h1>
 
-<form id="settings-form" action="/settings" method="POST">
+<form action="/settings" method="POST">
 	<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 	<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 	{{if .PostFormats}}
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="post-format"> Default format </label>
 		{{$defFormat := .Settings.DefaultFormat}}
 		<select id="post-format" name="format">
@@ -16,7 +16,7 @@
 		</select>
 	</div>
 	{{end}}
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="visibility"> Default scope </label>
 		<select id="visibility" name="visibility">
 			<option value="public" {{if eq .Settings.DefaultVisibility "public"}}selected{{end}}>Public</option>
@@ -25,7 +25,7 @@
 			<option value="direct" {{if eq .Settings.DefaultVisibility "direct"}}selected{{end}}>Direct</option>
 		</select>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="notification-interval"> Refresh Notifications </label>
 		<select id="notification-interval" name="notification_interval">
 			<option value="0" {{if eq .Settings.NotificationInterval 0}}selected{{end}}>Disabled</option>
@@ -36,45 +36,45 @@
 			<option value="600" {{if eq .Settings.NotificationInterval 600}}selected{{end}}>After 10m</option>
 		</select>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="copy-scope" name="copy_scope" type="checkbox" value="true" {{if .Settings.CopyScope}}checked{{end}}>
 		<label for="copy-scope"> Copy scope when replying </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="thread-tab" name="thread_in_new_tab" type="checkbox" value="true" {{if .Settings.ThreadInNewTab}}checked{{end}}>
 		<label for="thread-tab"> Open threads in new tab from timeline </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="hide-attachments" name="hide_attachments" type="checkbox" value="true" {{if .Settings.HideAttachments}}checked{{end}}>
 		<label for="hide-attachments"> Hide attachments </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="mask-nsfw" name="mask_nsfw" type="checkbox" value="true" {{if .Settings.MaskNSFW}}checked{{end}}>
 		<label for="mask-nsfw"> Mask NSFW attachments </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="fluoride-mode" name="fluoride_mode" type="checkbox" value="true" {{if .Settings.FluorideMode}}checked{{end}}>
 		<label for="fluoride-mode"> Enable <abbr title="Enable JavaScript based functionality, e.g., like/retweet without page reload and reply preview on thread page">fluoride mode</abbr> </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="anti-dopamine-mode" name="anti_dopamine_mode" type="checkbox"
 		value="true" {{if .Settings.AntiDopamineMode}}checked{{end}}>
 		<label for="anti-dopamine-mode"> Enable <abbr title="Remove like/retweet/unread notification count and disable like/retweet/follow notifications">anti-dopamine mode</abbr> </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="hide-unsupported-notifs" name="hide_unsupported_notifs" type="checkbox"
 		value="true" {{if .Settings.HideUnsupportedNotifs}}checked{{end}}>
 		<label for="hide-unsupported-notifs"> Hide unsupported notifications </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<input id="dark-mode" name="dark_mode" type="checkbox" value="true" {{if .Settings.DarkMode}}checked{{end}}>
 		<label for="dark-mode"> Use dark theme </label>
 	</div>
-	<div class="settings-form-field">
+	<div class="form-field">
 		<label for="css"> Custom CSS: </label>
 	</div>
-	<div>
-		<textarea id="css" name="css" cols="80" rows="8">{{.Settings.CSS}}</textarea>
+	<div class="form-field">
+		<textarea id="css" class="monospace" name="css" cols="80" rows="8">{{.Settings.CSS}}</textarea>
 	</div>
 	<button type="submit"> Save </button>
 </form>
diff --git a/templates/signin.tmpl b/templates/signin.tmpl
index c7699f7..b12e0aa 100644
--- a/templates/signin.tmpl
+++ b/templates/signin.tmpl
@@ -1,18 +1,17 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Bloat </div>
-<div class="signin-desc">
-	A web client for <a href="https://pleroma.social" target="_blank">Mastadon Network</a>.
-</div>
 
-<form class="signin-form" action="/signin" method="post">
-	Enter the domain name of your instance to continue
-	<br/>
-	<input type="text" name="instance" placeholder="example.com" required>
-	<br/>
-	<button type="submit"> Signin </button>
+<h1>Bloat</h1>
+<p>A web client for <a href="https://pleroma.social" target="_blank">Mastadon Network</a>.</p>
+<form action="/signin" method="post">
+	<div class="form-field-s">
+		<label for="instance">Enter the domain name of your instance to continue</label>
+	</div>
+	<div class="form-field-s">
+		<input id="instance" type="text" class="input-w" name="instance" placeholder="example.com" required>
+	</div>
+	<div class="form-field-s"><button type="submit">Signin</button></div>
 </form>
-
 <p>
 	See
 	<a href="https://git.freesoftwareextremist.com/bloat" target="_blank">git.freesoftwareextremist.com/bloat</a>
diff --git a/templates/status.tmpl b/templates/status.tmpl
index 0b09dfb..503b6f1 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -1,15 +1,15 @@
 {{with .Data}}
-<div id="status-{{.ID}}" class="status-container-container">
+<article id="status-{{.ID}}" class="status-container-container">
 	{{if .Reblog}}
 	<div class="retweet-info">
 		<a class="img-link" href="/user/{{.Account.ID}}">
-			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="24" />
+			<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="24">
 		</a>
 		<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
 		<a href="/user/{{.Account.ID}}"> 
 			<span class="status-uname">@{{.Account.Acct}}</span> 
 		</a>
-		retweeted
+		<span>retweeted</span>
 	</div>
 	{{template "status" (WithContext .Reblog $.Ctx)}}
 	{{else}}
@@ -18,26 +18,20 @@
 	<div class="status-container status-{{.ID}}" data-id="{{.ID}}">
 		<div class="status-profile-img-container">
 			<a class="img-link" href="/user/{{.Account.ID}}">
-				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="avatar" height="48" />
+				<img class="status-profile-img" src="{{.Account.Avatar}}" title="@{{.Account.Acct}}" alt="@{{.Account.Acct}}" height="48">
 			</a>
 		</div>
 		<div class="status"> 
 			<div class="status-name">
 				<bdi class="status-dname">{{EmojiFilter (HTML .Account.DisplayName) .Account.Emojis | Raw}}</bdi>
-				<a href="/user/{{.Account.ID}}">
-					<span class="status-uname">@{{.Account.Acct}}</span>
-				</a>
+				<a href="/user/{{.Account.ID}}"><span class="status-uname">@{{.Account.Acct}}</span></a>
 				<div class="more-container">
 					<div class="remote-link">
 						{{if .IDNumbers}}#{{index .IDNumbers .ID}}{{end}} {{.Visibility}}
 					</div>
 					<div class="more-content">
-						<a class="more-link" href="{{.URL}}" target="_blank">
-							source
-						</a>
-						<a class="more-link" href="/quickreply/{{.ID}}#status-{{.ID}}">
-							quickreply
-						</a>
+						<a class="more-link" href="{{.URL}}" target="_blank">source</a>
+						<a class="more-link" href="/quickreply/{{.ID}}#status-{{.ID}}">quickreply</a>
 						{{if .Muted}}
 						<form action="/unmuteconv/{{.ID}}" method="post" target="_self">
 							<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
@@ -76,6 +70,7 @@
 					</div>
 				</div>
 			</div>
+			{{if (or .InReplyToID .ShowReplies)}}
 			<div class="status-reply-container">
 				{{if .InReplyToID}}
 				<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> 
@@ -90,9 +85,10 @@
 				{{end}}
 				{{end}}
 			</div>
+			{{end}}
 			{{if (or .Content .SpoilerText)}}
 			<div class="status-content">
-				{{- if .SpoilerText}}{{EmojiFilter (HTML .SpoilerText) .Emojis | Raw}}<br/>{{end -}}
+				{{- if .SpoilerText}}{{EmojiFilter (HTML .SpoilerText) .Emojis | Raw}}<br>{{end -}}
 				{{- StatusContentFilter .Content .Emojis .Mentions | Raw -}}
 			</div>
 			{{end}}
@@ -100,42 +96,36 @@
 			<div class="status-media-container">
 				{{range .MediaAttachments}}
 
-				{{if eq .Type "image"}}
+				{{- if eq .Type "image" -}}
 				{{if $.Ctx.HideAttachments}}
-				<a href="{{.URL}}" target="_blank">
-					[image{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
-				{{else}}
-				<a class="img-link" href="{{.URL}}" target="_blank" title="{{.Description}}">
-					<img class="status-image" src="{{.PreviewURL}}" alt="status-image" height="240" />
+				<a href="{{.URL}}" target="_blank">[image{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
+				{{- else -}}
+				<a class="img-link status-image-container" href="{{.URL}}" target="_blank" title="{{.Description}}">
+					<img class="status-image" src="{{.PreviewURL}}" alt="{{.Description}}" height="240">
 					{{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
 					<div class="status-nsfw-overlay"></div>
 					{{end}}
 				</a>
-				{{end}}
+				{{- end -}}
 
 				{{else if eq .Type "audio"}}
 				{{if $.Ctx.HideAttachments}}
-				<a href="{{.URL}}" target="_blank">
-					[audio{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
+				<a href="{{.URL}}" target="_blank">[audio{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
 				{{else}}
 				<audio class="status-audio" controls title="{{.Description}}">
 					<source src="{{.URL}}">
-					<a href="{{.URL}}" target="_blank"> [audio] </a>
+					<a href="{{.URL}}" target="_blank">[audio]</a>
 				</audio>
 				{{end}}
 
 				{{else if eq .Type "video"}}
 				{{if $.Ctx.HideAttachments}}
-				<a href="{{.URL}}" target="_blank">
-					[video{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
+				<a href="{{.URL}}" target="_blank">[video{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
 				{{else}}
 				<div class="status-video-container" title="{{.Description}}">
 					<video class="status-video" controls height="240">
 						<source src="{{.URL}}">
-						<a href="{{.URL}}" target="_blank"> [video] </a>
+						<a href="{{.URL}}" target="_blank">[video]</a>
 					</video>
 					{{if (and $.Ctx.MaskNSFW $s.Sensitive)}}
 					<div class="status-nsfw-overlay"></div>
@@ -144,20 +134,18 @@
 				{{end}}
 
 				{{else}}
-				<a href="{{.URL}}" target="_blank"> 
-					[attachment{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]
-				</a>
-				{{end}}
+				<a href="{{.URL}}" target="_blank">[attachment{{if $s.Sensitive}}/nsfw{{end}}{{if .Description}}: {{.Description}}{{end}}]</a>
 				{{end}}
+				{{- end -}}
 			</div>
 			{{end}}
 			{{if .Poll}}
-			<form class="poll-form" action="/vote/{{.Poll.ID}}" method="POST" target="_self">
+			<form class="status-poll" action="/vote/{{.Poll.ID}}" method="POST" target="_self">
 				<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
 				<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 				<input type="hidden" name="status_id" value="{{$s.ID}}">
 				{{range $i, $o := .Poll.Options}}
-				<div class="poll-option">
+				<div class="form-field-s">
 					{{if (or $s.Poll.Expired $s.Poll.Voted)}}
 					<div> {{EmojiFilter (HTML $o.Title) $s.Emojis | Raw}} - {{$o.VotesCount}} votes </div>
 					{{else}}
@@ -170,9 +158,11 @@
 				</div>
 				{{end}}
 				{{if not (or .Poll.Expired .Poll.Voted)}}
+				<div class="form-field-s">
 				<button type="submit"> Vote </button>
+				</div>
 				{{end}}
-				<div class="poll-info">
+				<div>
 					<span>{{.Poll.VotesCount}} votes</span>
 					{{if .Poll.Expired}}
 					<span> - poll expired </span>
@@ -189,10 +179,9 @@
 			{{end}}
 			<div class="status-action-container"> 
 				<div class="status-action">
-					<a href="/thread/{{.ID}}?reply=true#status-{{.ID}}"> 
-						reply
-					</a>
-					<a class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
+					<a href="/thread/{{.ID}}?reply=true#status-{{.ID}}">reply</a>
+					<a class="status-reply-count {{if or $.Ctx.AntiDopamineMode (not .RepliesCount)}}hidden{{end}}" 
+						href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}} title="replies">
 						{{if and (not $.Ctx.AntiDopamineMode) .RepliesCount}}
 							({{DisplayInteractionCount .RepliesCount}})
 						{{end}}
@@ -206,7 +195,8 @@
 						<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
 						<input type="submit" value="{{$rt}}" class="btn-link" 
 							{{if or (eq .Visibility "private") (eq .Visibility "direct")}}title="this status cannot be retweeted" disabled{{end}}>
-						<a class="status-retweet-count" href="/retweetedby/{{.ID}}" title="click to see the the list"> 
+						<a class="status-retweet-count {{if or $.Ctx.AntiDopamineMode (not .ReblogsCount)}}hidden{{end}}" 
+							href="/retweetedby/{{.ID}}" title="click to see the the list"> 
 							{{if and (not $.Ctx.AntiDopamineMode) .ReblogsCount}}
 								({{DisplayInteractionCount .ReblogsCount}})
 							{{end}}
@@ -220,7 +210,8 @@
 						<input type="hidden" name="referrer" value="{{$.Ctx.Referrer}}">
 						<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
 						<input type="submit" value="{{$like}}" class="btn-link">
-						<a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list"> 
+						<a class="status-like-count {{if or $.Ctx.AntiDopamineMode (not .FavouritesCount)}}hidden{{end}}" 
+							href="/likedby/{{.ID}}" title="click to see the the list"> 
 							{{if and (not $.Ctx.AntiDopamineMode) .FavouritesCount}}
 								({{DisplayInteractionCount .FavouritesCount}})
 							{{end}}
@@ -238,8 +229,9 @@
 			</div>
 		</div>
 	</div>
+	<br class="hidden">
 	{{end}}
 	{{end}}
 	{{end}}
-</div>
+</article>
 {{end}}
diff --git a/templates/thread.tmpl b/templates/thread.tmpl
index d6a1c7d..2426434 100644
--- a/templates/thread.tmpl
+++ b/templates/thread.tmpl
@@ -1,8 +1,7 @@
 {{with $s := .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title-container">
-	<span class="page-title"> Thread </span>
-	<a class="page-refresh" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a>
+<div>
+	<h1>Thread <a class="page-link" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a></h1>
 </div>
 
 {{range .Statuses}}
diff --git a/templates/timeline.tmpl b/templates/timeline.tmpl
index 38659dc..5b02c5f 100644
--- a/templates/timeline.tmpl
+++ b/templates/timeline.tmpl
@@ -1,15 +1,14 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title-container">
-	<span class="page-title"> {{.Title}}  </span>
-	<a class="page-refresh" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a>
+<div>
+	<h1>{{.Title}} <a class="page-link" href="{{$.Ctx.Referrer}}" accesskey="T" title="Refresh (T)">refresh</a></h1>
 </div>
 
 {{if eq .Type "remote"}}
-<form class="search-form" action="/timeline/remote" method="GET">
-	<span class="post-form-field">
+<form action="/timeline/remote" method="GET">
+	<span>
 		<label for="instance"> Instance </label>
-		<input id="instance" name="instance" value="{{.Instance}}">
+		<input type="text" id="instance" name="instance" value="{{.Instance}}">
 	</span>
 	<button type="submit"> Submit </button>
 </form>
@@ -19,14 +18,14 @@
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .PrevLink}}
 		<a href="{{.PrevLink}}">[prev]</a>
 	{{end}}
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/user.tmpl b/templates/user.tmpl
index 3b1a5cd..1ae75f9 100644
--- a/templates/user.tmpl
+++ b/templates/user.tmpl
@@ -1,11 +1,11 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> User </div>
+<h1>User</h1>
 
 <div class="user-info-container">
 	<div class="user-profile-img-container">
 		<a class="img-link" href="{{.User.Avatar}}" target="_blank">
-			<img class="user-profile-img" src="{{.User.Avatar}}" alt="profile-avatar" height="96" />
+			<img class="user-profile-img" src="{{.User.Avatar}}" alt="@{{.User.Acct}}" height="96">
 		</a>
 	</div>
 	<div class="user-profile-details-container">
@@ -78,7 +78,7 @@
 				<input type="submit" value="unmute" class="btn-link">
 			</form>
 			{{else}}
-			<a href="/mute/{{.User.ID}}"> mute </a>
+			<a href="/mute/{{.User.ID}}">mute</a>
 			{{end}}
 			{{if .User.Pleroma.Relationship.Following}} 
 			-
@@ -99,26 +99,26 @@
 		</div>
 		{{end}}
 		<div>
-			<a href="/user/{{.User.ID}}"> statuses ({{.User.StatusesCount}}) </a> - 
-			<a href="/user/{{.User.ID}}/following"> following ({{.User.FollowingCount}}) </a> - 
-			<a href="/user/{{.User.ID}}/followers"> followers ({{.User.FollowersCount}}) </a> - 
-			<a href="/user/{{.User.ID}}/media"> media </a>
+			<a href="/user/{{.User.ID}}">statuses ({{.User.StatusesCount}})</a> -
+			<a href="/user/{{.User.ID}}/following">following ({{.User.FollowingCount}})</a> -
+			<a href="/user/{{.User.ID}}/followers">followers ({{.User.FollowersCount}})</a> -
+			<a href="/user/{{.User.ID}}/media">media</a>
 		</div>
 		{{if .IsCurrent}}
 		<div>
-			<a href="/user/{{.User.ID}}/bookmarks"> bookmarks </a>
-			- <a href="/user/{{.User.ID}}/likes"> likes </a>
-			- <a href="/user/{{.User.ID}}/mutes"> mutes </a>
-			- <a href="/user/{{.User.ID}}/blocks"> blocks </a>
-			{{if .User.Locked}}- <a href="/user/{{.User.ID}}/requests"> requests </a>{{end}}
+			<a href="/user/{{.User.ID}}/bookmarks">bookmarks</a>
+			- <a href="/user/{{.User.ID}}/likes">likes</a>
+			- <a href="/user/{{.User.ID}}/mutes">mutes</a>
+			- <a href="/user/{{.User.ID}}/blocks">blocks</a>
+			{{if .User.Locked}}- <a href="/user/{{.User.ID}}/requests">requests</a>{{end}}
 		</div>
 		{{end}}
 		<div>
-			<a href="/usersearch/{{.User.ID}}"> search statuses </a>
-			{{if .IsCurrent}} - <a href="/filters"> filters </a> {{end}}
+			<a href="/usersearch/{{.User.ID}}">search statuses</a>
+			{{if .IsCurrent}} - <a href="/filters">filters</a> {{end}}
 		</div>
 	</div>
-	<div class="user-profile-decription">
+	<div class="user-profile-description">
 	{{- EmojiFilter .User.Note .User.Emojis | Raw -}}
 	</div>
 	{{if .User.Fields}}
@@ -131,63 +131,63 @@
 </div>
 
 {{if eq .Type ""}}
-<div class="page-title"> Statuses </div>
+<h1>Statuses</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "following"}}
-<div class="page-title"> Following </div>
+<h1>Following</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "followers"}}
-<div class="page-title"> Followers </div>
+<h1>Followers</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "media"}}
-<div class="page-title"> Statuses with media </div>
+<h1>Statuses with media</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "bookmarks"}}
-<div class="page-title"> Bookmarks </div>
+<h1>Bookmarks</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "likes"}}
-<div class="page-title"> Likes </div>
+<h1>Likes</h1>
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
 
 {{else if eq .Type "mutes"}}
-<div class="page-title"> Mutes </div>
+<h1>Mutes</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "blocks"}}
-<div class="page-title"> Blocks </div>
+<h1>Blocks</h1>
 {{template "userlist.tmpl" (WithContext .Users $.Ctx)}}
 
 {{else if eq .Type "requests"}}
-<div class="page-title"> Follow requests </div>
+<h1>Follow requests</h1>
 {{template "requestlist.tmpl" (WithContext .Users $.Ctx)}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}
diff --git a/templates/userlist.tmpl b/templates/userlist.tmpl
index f206397..83ed088 100644
--- a/templates/userlist.tmpl
+++ b/templates/userlist.tmpl
@@ -3,9 +3,9 @@
 	{{range .}}
 		{{template "userlistitem.tmpl" (WithContext . $.Ctx)}}
 	{{else}}
-	<div class="no-data-found">No data found</div>
+	<p>No data found</p>
 	{{end}}
 </div>
 {{else}}
-<div class="no-data-found">No data found</div>
+<p>No data found</p>
 {{end}}
diff --git a/templates/userlistitem.tmpl b/templates/userlistitem.tmpl
index ed53b2e..dd50aa8 100644
--- a/templates/userlistitem.tmpl
+++ b/templates/userlistitem.tmpl
@@ -2,14 +2,14 @@
 <div class="user-list-item">
 	<div class="user-list-profile-img">
 		<a class="img-link" href="/user/{{.ID}}">
-			<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="avatar" height="48" />
+			<img class="status-profile-img" src="{{.Avatar}}" title="@{{.Acct}}" alt="@{{.Acct}}" height="48">
 		</a>
 	</div>
 	<div class="user-list-name">
-		<div class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</div>
-		<a class="img-link" href="/user/{{.ID}}">
-			<div class="status-uname">@{{.Acct}}</div>
-		</a>
+		<bdi class="status-dname">{{EmojiFilter (HTML .DisplayName) .Emojis | Raw}}</bdi>
+		<br>
+		<a class="img-link" href="/user/{{.ID}}"><span class="status-uname">@{{.Acct}}</span></a>
 	</div>
+	<br class="hidden">
 </div>
 {{end}}
diff --git a/templates/usersearch.tmpl b/templates/usersearch.tmpl
index 78fa7b8..5011b99 100644
--- a/templates/usersearch.tmpl
+++ b/templates/usersearch.tmpl
@@ -1,26 +1,27 @@
 {{with .Data}}
 {{template "header.tmpl" (WithContext .CommonData $.Ctx)}}
-<div class="page-title"> Search {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}}'s statuses </div>
+<h1>Search {{EmojiFilter (HTML .User.DisplayName) .User.Emojis | Raw}} @{{.User.Acct}}'s statuses</h1>
 
-<form class="search-form" action="/usersearch/{{.User.ID}}" method="GET">
-	<span class="post-form-field">
-		<label for="query"> Query </label>
-		<input id="query" name="q" value="{{.Q}}">
-	</span>
-	<button type="submit"> Search </button>
+<form action="/usersearch/{{.User.ID}}" method="GET">
+	<p>
+		<label> 
+			Query <input type="text" name="q" value="{{.Q}}">
+		</label>
+		<button type="submit"> Search </button>
+	</p>
 </form>
 
 {{range .Statuses}}
 {{template "status.tmpl" (WithContext . $.Ctx)}}
 {{else}}
-{{if .Q}}<div class="no-data-found">No data found</div>{{end}}
+{{if .Q}}<p>No data found</p>{{end}}
 {{end}}
 
-<div class="pagination">
+<nav class="pagination">
 	{{if .NextLink}}
 		<a href="{{.NextLink}}">[next]</a>
 	{{end}}
-</div>
+</nav>
 
 {{template "footer.tmpl"}}
 {{end}}