Update styling across app

src/lib/components/AppShell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import PendingForm from '$lib/components/PendingForm.svelte';
 	import type { Snippet } from 'svelte';
 
 	let { user, children }: {
@@ -16,7 +17,7 @@
 
 <header class="site-header">
 	<a class="brand" href="/" aria-label="SHD.build home">
-		<span class="brand-mark">SHD</span><span>SHD<b>.build</b></span>
+		<span class="brand-mark"><i></i><b>SHD</b></span><span class="brand-name">SHD<span>.build</span><small>LOADOUT NETWORK</small></span>
 	</a>
 	<nav aria-label="Main navigation">
 		{#each links as link}
@@ -31,8 +32,8 @@
 	</nav>
 	{#if user}
 		<div class="account">
-			<a href="/account"><small>AGENT</small>{user.username}</a>
-			<form method="POST" action="/sign-in?/logout"><button>SIGN OUT →</button></form>
+			<a href="/account"><small><i></i> AGENT ONLINE</small>{user.username}</a>
+			<PendingForm action="/sign-in?/logout">{#snippet children(pending)}<button aria-busy={pending}>SIGN OUT →</button>{/snippet}</PendingForm>
 		</div>
 	{:else}
 		<a class="sign-in" href="/sign-in">SIGN IN →</a>