diff --git a/assets/dist/base.css b/assets/dist/base.css
index 6ead6f9..8bdc551 100644
--- a/assets/dist/base.css
+++ b/assets/dist/base.css
@@ -1,8 +1,7 @@
-
 :root {
 	--br: 0.4rem;
 	--br-inner: 0.2rem;
-	--fa-fw: 1.28571429em;
+	--fa-fw: 1.25;
 }
 
 /*
@@ -16,122 +15,42 @@
 
 	This program is distributed in the hope that it will be useful,
 	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 	GNU Affero General Public License for more details.
 
 	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
-
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
-/*
-Document
-========
-*/
-
-/**
-Use a better box model (opinionated).
-*/
-
 *,
 ::before,
 ::after {
 	box-sizing: border-box;
 }
 
-/**
-Use a more readable tab size (opinionated).
-*/
-
 html {
-	-o-tab-size: 4;
-	   tab-size: 4;
+	-o-tab-size: 2;
+	tab-size: 2;
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
 }
 
-/**
-1. Correct the line height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-*/
-
-html {
-	line-height: 1.15; /* 1 */
-	-webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/*
-Sections
-========
-*/
-
-/**
-Remove the margin in all browsers.
-*/
-
-body {
-	margin: 0;
-}
-
-/**
-Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-*/
-
-body {
-	font-family:
-		system-ui,
-		-apple-system, /* Firefox supports this but not yet `system-ui` */
-		'Segoe UI',
-		Roboto,
-		Helvetica,
-		Arial,
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji';
-}
-
-/*
-Grouping content
-================
-*/
-
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-
 hr {
-	height: 0; /* 1 */
-	color: inherit; /* 2 */
+	height: 0;
+	color: inherit;
 }
 
-/*
-Text-level semantics
-====================
-*/
-
-/**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
 abbr[title] {
 	-webkit-text-decoration: underline dotted;
-	        text-decoration: underline dotted;
+	text-decoration: underline dotted;
 }
 
-/**
-Add the correct font weight in Edge and Safari.
-*/
-
 b,
 strong {
 	font-weight: bolder;
 }
 
-/**
-1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-2. Correct the odd 'em' font sizing in all browsers.
-*/
-
 code,
 kbd,
 samp,
@@ -142,22 +61,14 @@ pre {
 		Consolas,
 		'Liberation Mono',
 		Menlo,
-		monospace; /* 1 */
-	font-size: 1em; /* 2 */
+		monospace;
+	font-size: 1em;
 }
 
-/**
-Add the correct font size in all browsers.
-*/
-
 small {
 	font-size: 80%;
 }
 
-/**
-Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-*/
-
 sub,
 sup {
 	font-size: 75%;
@@ -174,49 +85,24 @@ sup {
 	top: -0.5em;
 }
 
-/*
-Tabular data
-============
-*/
-
-/**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-
 table {
-	text-indent: 0; /* 1 */
-	border-color: inherit; /* 2 */
+	text-indent: 0;
+	border-color: inherit;
 }
 
-/*
-Forms
-=====
-*/
-
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-
 button,
 input,
 optgroup,
 select,
 textarea {
-	font-family: inherit; /* 1 */
-	font-size: 100%; /* 1 */
-	line-height: 1.15; /* 1 */
-	margin: 0; /* 2 */
+	font-family: inherit;
+	font-size: 100%;
+	line-height: 1.15;
+	margin: 0;
 }
 
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-1. Remove the inheritance of text transform in Firefox.
-*/
-
 button,
-select { /* 1 */
+select {
 	text-transform: none;
 }
 
@@ -231,143 +117,94 @@ button,
 	-webkit-appearance: button;
 }
 
-/**
-Remove the inner border and padding in Firefox.
-*/
-
 ::-moz-focus-inner {
 	border-style: none;
 	padding: 0;
 }
 
-/**
-Restore the focus styles unset by the previous rule.
-*/
-
 :-moz-focusring {
 	outline: 1px dotted ButtonText;
 }
 
-/**
-Remove the additional ':invalid' styles in Firefox.
-See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
-*/
-
 :-moz-ui-invalid {
 	box-shadow: none;
 }
 
-/**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
-
 legend {
 	padding: 0;
 }
 
-/**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
 progress {
 	vertical-align: baseline;
 }
 
-/**
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
 	height: auto;
 }
 
-/**
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
 [type='search'] {
-	-webkit-appearance: textfield; /* 1 */
-	outline-offset: -2px; /* 2 */
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
 }
 
-/**
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
 ::-webkit-search-decoration {
 	-webkit-appearance: none;
 }
 
-/**
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to 'inherit' in Safari.
-*/
-
 ::-webkit-file-upload-button {
-	-webkit-appearance: button; /* 1 */
-	font: inherit; /* 2 */
+	-webkit-appearance: button;
+	font: inherit;
 }
 
-/*
-Interactive
-===========
-*/
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
 summary {
 	display: list-item;
 }
 
-html, body {
-	padding: 0;
-	margin: 0;
+html,
+body {
 	background: var(--bg);
 	color: var(--fg);
-	font-family: "Noto Sans", sans-serif;
+	font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
 }
 
 body {
+	padding: 1rem;
+	margin: 0 auto;
+
+	min-height: 100vh;
+	max-width: 60rem;
+	gap: 1rem;
+
 	line-height: 1.5em;
-	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+  justify-content: space-evenly;
 }
 
 .hidden {
 	display: none;
 }
 
-.page {
-	display: grid;
-	min-height: 100vh;
-
-	grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
-	grid-template-columns: 1fr min(92%, 50rem) 1fr;
-	grid-template-rows: auto 1fr auto;
-
-	gap: 1rem;
-  padding: 1rem 0;
-}
-
 h1 {
 	margin: 0;
 	line-height: 2.4rem;
 }
 
 a {
-	color: var(--link-fg);
-}
-
-header, footer {
-	grid-column: 1 / span 3;
-}
-
-.content {
-	grid-column: 2;
-	align-self: start;
+  transition: all 0.25s ease-out;
+  color: var(--link-fg);
 }
 
 header {
@@ -411,11 +248,11 @@ header a h1 {
 		color: var(--fg-accent);
 	}
 
-main p:first-child {
+main :first-child {
 		margin-top: 0;
 	}
 
-main p:last-child {
+main :last-child {
 		margin-bottom: 0;
 	}
 
@@ -498,7 +335,7 @@ section.apps .applist .entry .logo {
 				align-self: center;
 				width: 100%;
 				-o-object-fit: contain;
-				   object-fit: contain;
+				object-fit: contain;
 				flex: 1 1 auto;
 			}
 
@@ -612,21 +449,62 @@ hr {
 }
 
 footer {
-	align-self: end;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
+	padding: 3rem 1rem;
+	gap: 2rem;
+}
+footer *
+{	display: flex }
+footer .round
+{ border-radius: 999px }
+footer .bg-icon
+{ background-image : url( '/button-gradient.svg' )
+                   , url('/icon.png') !important
+}
+footer img
+{ max-width : 100vw
+; overflow : hidden
+}
+footer .buttons
+{ gap : 1rem
+; padding : 1rem
+; background : white
+; flex-wrap : nowrap
 }
 
-footer div {
-		text-align: center;
-		padding: 1rem;
-		flex-grow: 1;
-	}
+footer .buttons img
+{ height : 2rem }
+
+footer .buttons > *
+{ height : 2rem
+; min-width : 2rem
+}
+
+footer .buttons > a:any-link
+{ background :
+    var( --b, #ccc )
+    url( '/button-gradient.svg' )
+    50% 50% no-repeat
+; background-size : cover
+; box-shadow
+    : inset 0 0 0 0.125rem #fff0
+    , 0 0 0 0.125rem #0000
+}
+
+footer .buttons > a:any-link:is( :hover, :focus, :active )
+{ box-shadow
+    : inset 0 0 0 0.125rem #fff
+    , 0 0 0 0.125rem var( --b, #ccc )
+}
+
+footer .buttons .group
+{ padding : 0 }
+
+footer .buttons.round > *
+{ border-radius : 999px }
 
-footer a {
-		font-weight: bold;
-	}
 
 @media screen and (max-width: 600px) {
 	header {
@@ -652,7 +530,7 @@ footer a {
 	height: 1.45em;
 	margin: -0.2em 0.02em 0;
 	-o-object-fit: contain;
-	   object-fit: contain;
+	object-fit: contain;
 	vertical-align: middle;
 }
 
@@ -682,7 +560,7 @@ label {
 @media (prefers-reduced-motion) {
 	.fa-spin {
 		-webkit-animation: none;
-		        animation: none;
+		animation: none;
 	}
 }
 
@@ -778,15 +656,15 @@ label {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-
 }
 
 .about h2 {
-		margin: 0.5rem 0;
+		margin: 2rem 0 0 0;
 	}
 
-.about ul {
-		margin-bottom: 0;
+.about ul,
+.about p {
+		margin: 0;
 	}
 
 .account-card {
@@ -818,7 +696,7 @@ label {
 		width: 5rem;
 		height: 5rem;
 		-o-object-fit: cover;
-		   object-fit: cover;
+		object-fit: cover;
 		grid-row: 1 / span 2;
 	}
 
diff --git a/template/about.tmpl b/template/about.tmpl
index e66ad6b..855da15 100644
--- a/template/about.tmpl
+++ b/template/about.tmpl
@@ -16,93 +16,86 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */ -}}
-
 {{ template "header.tmpl" .}}
-<main>
-	<section class="about">
-		<h1>instance</h1>
-		<div>
-			{{.instance.Description |noescape}}
-		</div>
+<main class="about">
+	<h1>instance</h1>
+	<div>
+		{{.instance.Description |noescape}}
+	</div>
 
-		<div>
-			<h2>social profiles</h2>
+	<h2>social profiles</h2>
+	<ul>
+		<li><a rel="me" href="{{.instance.ContactAccount.URL}}">microblog</a></li>
+		<li><a rel="me" href="https://photon.lemmy.world/profile/user">lemmy</a></li>
+		<li><a rel="me" href="https://figma.com/@dym_sh">figma</a></li>
+		<li><a rel="me" href="https://codepen.io/dym-sh">codepen</a></li>
+		<li><a rel="me" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
+		<li><a rel="me" href="mailto:re@dym.sh">email</a></li>
+	</ul>
 
-			<div class="account-card">
-				<img class="avatar" src="{{.instance.ContactAccount.Avatar}}" alt="" />
-				<h3>
-					{{if .instance.ContactAccount.DisplayName}}{{emojify .instance.ContactAccount.Emojis (escape .instance.ContactAccount.DisplayName)}}{{else}}{{.instance.ContactAccount.Username}}{{end}}
-				</h3>
-				<span><a href="{{.instance.ContactAccount.URL}}">@{{.instance.ContactAccount.Username}}</a></span>
-			</div>
+	<h2>fediverse server software</h2>
+	<ul>
+		<li><a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
+		<li>official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a></li>
+		<li>my <a href="https://source.garden/styles/gts-web/" target="_blank">custom templates</a></li>
+	</ul>
 
-			<ul>
-				<li><a href="https://figma.com/@dym_sh">figma</a></li>
-				<li><a href="https://codepen.io/dym-sh">codepen</a></li>
-				<li><a href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
-				<li><a href="mailto:re@dym.sh">email</a></li>
-			</ul>
-		</div>
+	<h2>features</h2>
+	<ul>
+		<li>
+			Registration is
+			{{if .instance.Registrations}}
+			enabled{{if .instance.ApprovalRequired}}, but requires admin approval{{end}}.
+			{{else}}
+			disabled.
+			{{end}}
+		</li>
+		{{if .instance.Configuration.Accounts.AllowCustomCSS}}
+		<li>
+			Users are allowed to set <a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css/"
+				target="_blank" rel="noopener noreferrer">Custom CSS</a> for their profiles.
+		</li>
+		{{end}}
+		<li>
+			Toots can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and
+			{{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments.
+		</li>
+		<li>
+			Polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with
+			{{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each.
+		</li>
+	</ul>
 
-		<div>
-			<h2>fediverse server software</h2>
-			<ul>
-				<li><a href="https://gotosocial.org" target="_blank">GoToSocial</a></li>
-				<li>official <a href="https://github.com/superseriousbusiness/gotosocial" target="_blank">source code</a></li>
-				<li>my <a href="https://source.garden/styles/gts-web/" target="_blank">custom templates</a></li>
-			</ul>
-		</div>
+	<h2>moderated servers</h2>
+	<p>
+		ActivityPub instances exchange (federate) data with other servers, including accounts and toots.
+		This can be prevented for specific domains by suspending them. None of their content is stored,
+		and interaction with their users is blocked both ways.</br>
+		{{if .blocklistExposed}}
+		<a href="/about/suspended">View the list of suspended domains</a>
+		{{else}}
+		This instance does not publically share this list.
+		{{end}}
+	</p>
 
-		<div>
-			<h2>features</h2>
-			<ul>
-				<li>
-					Registration is
-					{{if .instance.Registrations}}
-					enabled{{if .instance.ApprovalRequired}}, but requires admin approval{{end}}.
-					{{else}}
-					disabled.
-					{{end}}
-				</li>
-				{{if .instance.Configuration.Accounts.AllowCustomCSS}}
-				<li>
-					Users are allowed to set <a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css/"
-						target="_blank" rel="noopener noreferrer">Custom CSS</a> for their profiles.
-				</li>
-				{{end}}
-				<li>
-					Toots can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and
-					{{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments.
-				</li>
-				<li>
-					Polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with
-					{{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each.
-				</li>
-			</ul>
-		</div>
-		<div>
-			<h2>moderated servers</h2>
-			<p>
-				ActivityPub instances exchange (federate) data with other servers, including accounts and toots.
-				This can be prevented for specific domains by suspending them. None of their content is stored,
-				and interaction with their users is blocked both ways.</br>
-				{{if .blocklistExposed}}
-				<a href="/about/suspended">View the list of suspended domains</a>
-				{{else}}
-				This instance does not publically share this list.
-				{{end}}
-			</p>
-		</div>
+	<h2>stats</h2>
+	<ul>
+		<li>Users: <span class="count">{{.instance.Stats.user_count}}</span></li>
+		<li>Posts: <span class="count">{{.instance.Stats.status_count}}</span></li>
+		<li>Federates with: <span class="count">{{.instance.Stats.domain_count}}</span> instances</li>
+	</ul>
 
-		<div>
-			<h2>stats</h2>
-				<ul>
-					<li>Users: <span class="count">{{.instance.Stats.user_count}}</span></li>
-					<li>Posts: <span class="count">{{.instance.Stats.status_count}}</span></li>
-					<li>Federates with: <span class="count">{{.instance.Stats.domain_count}}</span> instances</li>
-				</ul>
-		</div>
-
-	</section>
 </main>
-{{ template "footer.tmpl" .}}
\ No newline at end of file
+
+<footer>
+  <div class="buttons round">
+    <a href="/"
+      class="bg-icon"
+      title="/"
+      ><span class="hidden">/</span>
+    </a>
+  </div>
+</footer>
+
+</body>
+</html>
diff --git a/template/footer.tmpl b/template/footer.tmpl
index cf955cd..f9aa719 100644
--- a/template/footer.tmpl
+++ b/template/footer.tmpl
@@ -17,12 +17,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */ -}}
 
-		<!-- footer.tmpl -->
-		</div>
-		<footer>
-			<a href="/about" class="nounderline">About this Instance</a>
-		</footer>
-	</div>
+	<footer>
+	  <div class="buttons round">
+	    <a href="/about/"
+	      class="bg-icon"
+	      title="about"
+	      ><span class="hidden">about</span>
+	    </a>
+	  </div>
+	</footer>
+
 	{{ if .javascript }}
 	{{ range .javascript }}
 		<script src="{{.}}"></script>
diff --git a/template/header.tmpl b/template/header.tmpl
index 00b4b28..759127b 100644
--- a/template/header.tmpl
+++ b/template/header.tmpl
@@ -15,21 +15,8 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/ -}}
-{{- /*
-		NESTED TEMPLATE DECLARATIONS
-		If some if/else macro is used multiple times, declare it once here instead.
-		When invoking these nested templates, remember to pass in the values passed
-		to the executing template, ie., use '{{ template "example" . }}' not
-		'{{ template "example" }}', otherwise you'll end up with empty variables.
-*/ -}}
-{{ define "thumbnailType" }}{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}{{ end }}
-{{ define "instanceTitle" }}{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{ .instance.Title }} - GoToSocial{{ end }}{{ end }}
-
-{{- /*
-		BOILERPLATE GOES HERE
-*/ -}}
-<!DOCTYPE html>
+*/ -}}{{ define "thumbnailType" }}{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}{{ end }}{{ define "instanceTitle" }}{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{ .instance.Title }} - GoToSocial{{ end }}{{ end
+}}<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -78,5 +65,3 @@
 </head>
 
 <body>
-	<div class="page">
-		<div class="content">
\ No newline at end of file
diff --git a/template/thread.tmpl b/template/thread.tmpl
index f2b6101..3a94df9 100644
--- a/template/thread.tmpl
+++ b/template/thread.tmpl
@@ -35,4 +35,4 @@
 		{{end}}
 	</section>
 </main>
-{{ template "footer.tmpl" .}}
\ No newline at end of file
+{{ template "footer.tmpl" .}}