diff --git a/src/elements/common/button/rvt-button.styles.ts b/src/elements/common/button/rvt-button.styles.ts
index 22a80c1b..f0bec80b 100644
--- a/src/elements/common/button/rvt-button.styles.ts
+++ b/src/elements/common/button/rvt-button.styles.ts
@@ -1,18 +1,16 @@
 import { createTV } from 'tailwind-variants';
 
 const tv = createTV({
-	twMerge: false
+	// twMerge: false
 });
 
 export const button = tv({
 	base: [
 		'inline-flex',
-		'gap-2',
 		'm',
 		'items-center',
 		'align-middle',
 		'will-change-transform',
-		'font-bold',
 		'min-w-30',
 		'transition-all',
 		'duration-100',
@@ -23,12 +21,18 @@ export const button = tv({
 	variants: {
 		variant: {
 			primary: [
-				'relative text-cream-100 fill-cream-100 border-cream-100 border transition-all',
+				'relative font-bold gap-2 text-cream-100 fill-cream-100 border-cream-100 border transition-all',
 				"before:content-[''] before:absolute before:inset-0 before:-z-10 before:bg-light-grain before:bg-[size:32px] before:bg-blend-multiply before:transition-all before:opacity-0",
 				"after:content-[''] after:absolute after:inset-0 after:-z-10 after:bg-dark-grain after:bg-[size:32px] after:transition-all after:opacity-100"
 			],
-			secondary: 'text-white fill-white bg-charcole-900 border-cream-100 border transition-all',
-			danger: 'border-red-500 text-red-500 fill-red-500 border transition-all'
+			link: ['text-cream-100 gap-2 font-bold px-0 mx-2'],
+			secondary: [
+				'text-white gap-2 fill-white bg-charcole-900 border-cream-100 border',
+				'transition-all text-lg font-bold'
+			],
+			danger: 'border-red-500 gap-2 font-bold text-red-500 fill-red-500 border transition-all',
+			// very specific types
+			nav: ['text-cream-100 px-3.5 py-1.5 gap-2.5 font-normal font-display']
 		},
 		size: {
 			sm: 'px-2 py-1 text-xs',
@@ -52,6 +56,33 @@ export const button = tv({
 				'aria-busy:border-neutral-300 aria-busy:hover:bg-transparent aria-busy:translate-y-0 aria-busy:hover:text-white'
 			]
 		},
+		{
+			variant: 'link',
+			class: [
+				// hover
+				'hover:text-white',
+				// disabled
+				'disabled:text-cream-100/60 disabled:hover:text-cream-100/60',
+				// loading
+				'aria-busy:text-white'
+			]
+		},
+		{
+			variant: 'link',
+			size: 'sm',
+			class: ['px-0 mx-2']
+		},
+		{
+			variant: 'nav',
+			size: 'md',
+			class: [
+				'px-3.5 py-1.5 text-lg',
+				// hover
+				'hover:text-white hover:bg-white/5',
+				// selected
+				'aria-current:border-white/10 aria-current:text-white aria-current:bg-white/5'
+			]
+		},
 		{
 			variant: 'danger',
 			class: [
@@ -87,13 +118,23 @@ export const button = tv({
 
 export const icon = tv({
 	variants: {
-		size: { sm: 'h-2.5 w-2.5', md: 'h-5 w-5"', lg: 'h-6 w-6' },
+		size: { sm: 'h-2.5 w-2.5', md: 'h-5 w-5', lg: 'h-6 w-6' },
 		variant: {
 			primary: '',
 			secondary: '',
-			danger: ''
+			link: '',
+			danger: '',
+			// custom variants
+			nav: 'text-cream-100 group-hover:text-white transition-all'
 		}
-	}
+	},
+	compoundVariants: [
+		{
+			variant: 'nav',
+			size: 'md',
+			class: 'h-4 w-4'
+		}
+	]
 });
 
 export type ButtonVariants = (typeof button)['variants'];
diff --git a/src/elements/common/button/rvt-button.ts b/src/elements/common/button/rvt-button.ts
index 00279487..b38f29e7 100644
--- a/src/elements/common/button/rvt-button.ts
+++ b/src/elements/common/button/rvt-button.ts
@@ -49,19 +49,12 @@ export default class RvtButton extends LitElement {
 				${when(
 					this.loading,
 					() => html`<e-svg class="animate-spin ${classes}" src="regular/spinner-third"></e-svg>`,
-					() =>
-						when(
-							this.icon,
-							() => html`<e-svg preserve class="${classes}" .src=${this.icon}></e-svg>`
-						)
+					() => when(this.icon, () => html`<e-svg class="${classes}" .src=${this.icon}></e-svg>`)
 				)}
 			</slot>
 			<slot></slot>
 			<slot name="suffix">
-				${when(
-					this.iconRight,
-					() => html`<e-svg preserve class="${classes}" .src=${this.iconRight}></e-svg>`
-				)}
+				${when(this.iconRight, () => html`<e-svg class="${classes}" .src=${this.iconRight}></e-svg>`)}
 			</slot>
 		`;
 	}
diff --git a/src/elements/common/rvt-breadcrumbs.ts b/src/elements/common/rvt-breadcrumbs.ts
index ef561947..dc241749 100644
--- a/src/elements/common/rvt-breadcrumbs.ts
+++ b/src/elements/common/rvt-breadcrumbs.ts
@@ -136,6 +136,7 @@ export default class RvtBreadcrumbs extends LitElement {
 					href: routes.devGameOverview.build({ gameId: this.game.data?.game.gameId })
 				}),
 				html`<rvt-namespace-dropdown
+					class="ms-3.5"
 					.game=${this.game.data?.game}
 					.currentNamespace=${currentNamespace}
 				></rvt-namespace-dropdown>`
@@ -170,31 +171,31 @@ export default class RvtBreadcrumbs extends LitElement {
 			></lazy-img>
 		`,
 		a: (opts: { content: TemplateResult; href?: string }) => html`
-			<a
-				href=${ifDefined(opts.href)}
-				class=${clsx(
-					opts.href ? 'hover:bg-slate-200/5 hover:text-white' : '',
-					'text-slate-200 group-last:hover:bg-transparent group-last:hover:text-slate-200 flex font-display text-md items-center rounded-md gap-3 pl-3.5 pr-3.5 py-1.5 transition'
-				)}
-			>
-				${opts.content}
-			</a>
-		`
+			<rvt-button variant="nav" href=${ifDefined(opts.href)}>${opts.content}</rvt-button>
+		`,
+		home: () =>
+			html`<a href=${routes.home.build({})}
+				><e-svg src="solid/home" class="block h-4 w-4 flex-shrink-0 text-cream-100"></e-svg
+			></a>`
 	};
 
 	renderChevron(): TemplateResult {
-		return html`
-			<e-svg src="regular/chevron-right" class="h-5 w-5 flex-shrink-0 text-gray-200"></e-svg>
-		`;
+		return html` <e-svg src="solid/chevron-right" class="h-3 w-3 flex-shrink-0 text-cream-100"></e-svg> `;
 	}
 
 	render() {
 		let crumbs = this.generateCrumbs();
-		return html` <ol role="list" class="flex items-center">
+		if (crumbs.length < 1) {
+			return html``;
+		}
+		return html` <ol role="list" class="flex items-center h-12">
+			<li class="group me-3.5">
+				<div class="flex items-center">${this.fragment.home()}</div>
+			</li>
 			${map(
 				crumbs,
 				(crumb, index) =>
-					html`<li class="group">
+					html`<li class="group flex-shrink-0">
 						<div class="flex items-center">
 							${when(index <= crumbs.length - 1, () => this.renderChevron())} ${crumb}
 						</div>
diff --git a/src/elements/common/rvt-nav.ts b/src/elements/common/rvt-nav.ts
index 886aee76..c957ae7f 100644
--- a/src/elements/common/rvt-nav.ts
+++ b/src/elements/common/rvt-nav.ts
@@ -24,27 +24,36 @@ export default class RvtNav extends LitElement {
 	render() {
 		return html`
 			<nav
-				class="gap-10 px-6 lg:z-30 pointer-events-auto flex flex-col transition md:divide-white/15 backdrop-blur bg-charcole-950 border-b border-white/10"
+				class="sm:px-6 relative z-30 w-full pointer-events-auto flex flex-col transition md:divide-white/15 backdrop-blur bg-charcole-950 border-b border-white/10"
 			>
-				<div class="h-14 flex items-center justify-between">
-					<div class="flex flex-row align-middle my-auto max-sm:mx-auto">
+				<div
+					class="px-6 sm:px-0 h-14 flex items-center justify-between max-w-contentwidth mx-auto w-full"
+				>
+					<div class="flex flex-row align-middle my-auto gap-4 order-2 sm:order-none">
 						<!-- Logo -->
 						<a aria-label="Home" class="my-auto" href=${routes.home.build({})}>
-							<div class="h-6">
+							<div class="h-6 hidden sm:block">
 								<e-svg
-									src="logo/cream"
+									src="logo/text-cream"
 									non-icon
-									class="mb-[2px] h-full w-auto"
+									class="block h-full w-auto"
 									preserve
 								></e-svg>
 							</div>
-						</a>
-
-						<!-- Breadcrumb -->
-						<div class="hidden my-auto sm:ml-6 sm:block">
-							<div class="flex my-auto" aria-label="Breadcrumb">
-								<rvt-breadcrumbs .breadcrumbs=${this.breadcrumbs}></rvt-breadcrumbs>
+							<div class="h-6 sm:hidden">
+								<e-svg src="logo/cream" non-icon class="block h-full w-auto" preserve></e-svg>
 							</div>
+						</a>
+						<div class="hidden sm:flex flex-row align-middle gap-1">
+							<rvt-button icon="solid/hammer" variant="nav" href="https://rivet.gg/learn"
+								>Learn</rvt-button
+							>
+							<rvt-button icon="solid/books" variant="nav" href="https://rivet.gg/docs"
+								>Docs</rvt-button
+							>
+							<rvt-button icon="solid/circle-info" variant="nav" href="https://rivet.gg/support"
+								>Support</rvt-button
+							>
 						</div>
 					</div>
 
@@ -52,49 +61,73 @@ export default class RvtNav extends LitElement {
 						global.status == GlobalStatus.Connected,
 						() => html`
 							<!-- Avatar -->
-							<div class="sm:hidden absolute left-2">
+							<div class="sm:hidden order-1">
 								<identity-avatar
 									class="my-auto block w-7 h-7"
 									shadow
 									.identity=${global.currentIdentity}
 								></identity-avatar>
 							</div>
-							<div
-								class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 space-x-4 max-sm:invisible my-auto"
-							>
-								<identity-name
-									class="my-auto text-sm"
-									.identity=${global.currentIdentity}
-									no-link
-								></identity-name>
-								<identity-avatar
-									class="block w-6 h-6 m-2"
-									.identity=${global.currentIdentity}
-								></identity-avatar>
+							<div class="sm:flex items-center pr-2 gap-4 hidden my-auto">
+								<a href="https://rivet.gg/discord">
+									<e-svg
+										src="brands/discord"
+										class="block w-5 h-5 transition-opacity text-white opacity-75 hover:opacity-100"
+									></e-svg>
+								</a>
+								<a href="https://github.com/rivet-gg">
+									<e-svg
+										src="brands/github"
+										class="block w-5 h-5 transition-opacity text-white opacity-75 hover:opacity-100"
+									></e-svg>
+								</a>
+								<div class="flex ml-3">
+									<identity-name
+										class="my-auto text-sm"
+										.identity=${global.currentIdentity}
+										no-link
+									></identity-name>
+									<identity-avatar
+										class="block w-6 h-6 ml-2"
+										.identity=${global.currentIdentity}
+									></identity-avatar>
+								</div>
 
-								<icon-button
-									src="solid/gear"
-									small
-									color="#ececec80"
-									href=${routes.settings.build({})}
-								></icon-button>
+								<a href=${routes.settings.build({})}>
+									<e-svg
+										src="solid/gear"
+										class="block w-4 h-4 text-cream-100 hover:text-white"
+									></e-svg>
+								</a>
 							</div>
 
 							<!-- Settings -->
-							<div
-								class="sm:hidden absolute right-2 flex place-content-center my-auto opacity-75 transition hover:opacity-100"
-							>
-								<icon-button
-									src="regular/gear"
-									class="my-auto"
-									small
-									color="#ececec80"
-									href=${routes.settings.build({})}
-								></icon-button>
+							<div class="sm:hidden flex place-content-center my-auto order-3">
+								<a href=${routes.settings.build({})}>
+									<e-svg
+										src="solid/gear"
+										class="block w-4 h-4 text-cream-100 hover:text-white"
+									></e-svg>
+								</a>
 							</div>
 						`
 					)}
 				</div>
+				<!-- Breadcrumb -->
+				${when(
+					this.breadcrumbs,
+					() =>
+						html` <div
+							class="block max-w-contentwidth mx-auto w-full overflow-x-auto overflow-y-hidden"
+						>
+							<div class="flex my-auto sm:px-0" aria-label="Breadcrumbs">
+								<rvt-breadcrumbs
+									class="px-6 sm:px-0"
+									.breadcrumbs=${this.breadcrumbs}
+								></rvt-breadcrumbs>
+							</div>
+						</div>`
+				)}
 			</nav>
 		`;
 	}
diff --git a/src/elements/layouts/sidebar-layout.ts b/src/elements/layouts/sidebar-layout.ts
index 5b645a30..6def8af3 100644
--- a/src/elements/layouts/sidebar-layout.ts
+++ b/src/elements/layouts/sidebar-layout.ts
@@ -11,16 +11,16 @@ export default class Layout extends LitElement {
 
 	render() {
 		return html`
-			<div class="grid lg:grid-cols-sidebar-layout min-h-full">
+			<div class="grid lg:grid-cols-sidebar-layout min-h-full gap-5">
 				<!-- Sidebar -->
-				<div class="flex flex-col border-white/10 border-r">
-					<div class="min-h-full overflow-y-auto px-6 py-5 w-full h-full">
+				<div class="flex flex-col border-white/10 lg:border-r">
+					<div class="min-h-full lg:overflow-y-auto w-full h-full mt-8">
 						<slot name="sidebar"></slot>
 					</div>
 				</div>
 
 				<!-- Main -->
-				<main class="w-full">
+				<main class="w-full mt-8">
 					<slot name="body"></slot>
 				</main>
 			</div>
@@ -46,7 +46,7 @@ export class Body extends LitElement {
 	static styles = cssify();
 
 	render() {
-		return html` <div class="px-4 sm:px-6 lg:px-8 py-2 sm:py-3 lg:py-4"><slot></slot></div> `;
+		return html` <div><slot></slot></div> `;
 	}
 }
 
diff --git a/src/elements/pages/analytics/rvt-game-analytics.ts b/src/elements/pages/analytics/rvt-game-analytics.ts
index 950d04a2..370c60b4 100644
--- a/src/elements/pages/analytics/rvt-game-analytics.ts
+++ b/src/elements/pages/analytics/rvt-game-analytics.ts
@@ -145,7 +145,7 @@ export class RvtGameAnalytics extends LitElement {
 
 		return html`
 			<div class="flex flex-col">
-				<div class="flex flex-row justify-between">
+				<div class="flex flex-col gap-2 sm:gap-0 sm:flex-row justify-between">
 					<div>
 						<rvt-button
 							@click=${this.handleDateRangeClick.bind(this, '24h')}
diff --git a/src/elements/pages/dev/game/game-banner.ts b/src/elements/pages/dev/game/game-banner.ts
index 5046ac3d..f85a6028 100644
--- a/src/elements/pages/dev/game/game-banner.ts
+++ b/src/elements/pages/dev/game/game-banner.ts
@@ -16,7 +16,7 @@ export default class DevGameBanner extends LitElement {
 	renderGameIcon(game: cloud.GameFull): TemplateResult {
 		return html`
 			<lazy-img
-				class="mx-auto w-28 h-28 z-10"
+				class="mx-auto w-28 h-28 relative"
 				bg-size=${game ? (game.logoUrl ? 'contain' : 'cover') : 'cover'}
 				src=${game.logoUrl ?? assets.asset('/games/blank/logo.png')}
 			></lazy-img>
@@ -36,7 +36,7 @@ export default class DevGameBanner extends LitElement {
 						? html`
 								${this.game.bannerUrl
 									? html` <lazy-img
-											class="absolute left-0 top-0 w-full h-full opacity-40"
+											class="absolute left-0 top-0 w-full h-full opacity-40 -z-1"
 											src=${this.game.bannerUrl}
 											bg-size="cover"
 									  ></lazy-img>`
@@ -52,7 +52,7 @@ export default class DevGameBanner extends LitElement {
 									Settings
 								</rvt-button>
 								${this.renderGameIcon(this.game)}
-								<h1 class="text-2xl mt-8 z-10">${this.game.displayName}</h1>
+								<h1 class="text-2xl mt-8 relative">${this.game.displayName}</h1>
 						  `
 						: html``}
 				</div>
diff --git a/src/elements/pages/dev/game/pages/game-overview.ts b/src/elements/pages/dev/game/pages/game-overview.ts
index f8945442..eba36211 100644
--- a/src/elements/pages/dev/game/pages/game-overview.ts
+++ b/src/elements/pages/dev/game/pages/game-overview.ts
@@ -255,7 +255,7 @@ export default class DevGameOverview extends LitElement {
 	renderNamespaceList(game: Rivet.cloud.GameFull): TemplateResult {
 		if (!game.namespaces) return html`<h1>No namespaces found</h1>`;
 		return html`
-			<div class="ml-auto w-1/2">
+			<div class="w-full">
 				<h3 class="text-xl">Namespaces</h3>
 				<div class="flex flex-col space-y-2 pt-4">
 					<button
@@ -289,7 +289,7 @@ export default class DevGameOverview extends LitElement {
 
 	renderAnalytics(game: Rivet.cloud.GameFull): TemplateResult {
 		return html`
-			<div class="w-1/2 ">
+			<div>
 				<h1 class="text-xl pb-4">Analytics</h1>
 				<rvt-game-analytics .game=${game}></rvt-game-analytics>
 			</div>
@@ -298,9 +298,22 @@ export default class DevGameOverview extends LitElement {
 
 	render() {
 		return html`
-			<div class="mx-auto max-w-contentwidth px-3 md:px-5 lg:px-0 pb-8">
+			<div>
 				<game-banner .game=${this.game}></game-banner>
-				<div class="flex flex-row w-full space-x-8 max-md:px-4 ">
+
+				${when(
+					this.game?.versions?.length == 1,
+					() =>
+						html`<a
+							class="flex mb-5 p-4 items-center justify-center bg-cream-100 text-charcole-900"
+							href="https://rivet.gg/learn"
+						>
+							Get started with examples or templates
+							<e-svg class="ms-2" src="regular/arrow-right"></e-svg>
+						</a>`
+				)}
+
+				<div class="w-full gap-8 flex flex-col md:grid grid-cols-2">
 					${when(this.game, () => this.renderAnalytics(this.game))}
 					${when(this.game, () => this.renderNamespaceList(this.game))}
 				</div>
diff --git a/src/elements/pages/dev/group/group.ts b/src/elements/pages/dev/group/group.ts
index 55882bc5..3967ad2b 100644
--- a/src/elements/pages/dev/group/group.ts
+++ b/src/elements/pages/dev/group/group.ts
@@ -282,13 +282,13 @@ export default class GroupPage extends LitElement {
 
 	renderDesktop(profileNotFound: boolean, isOwner: boolean) {
 		return html`
-			<div class="mx-auto max-w-contentwidth px-3 md:px-5 lg:px-0 pb-8">
+			<div>
 				<group-banner .group=${this.profile}></group-banner>
-				<div class="flex flex-row w-full space-x-8 max-md:px-4 ">
+				<div class="flex flex-row w-full">
 					${when(
 						this.games && this.profile.isCurrentIdentityMember,
 						() =>
-							html`<div class="games-list grid grid-cols-4 gap-4 w-full">
+							html`<div class="games-list grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
 								<div
 									id="create-game"
 									class=${clsx(
diff --git a/src/elements/pages/dev/namespace/rvt-namespace-settings.scss b/src/elements/pages/dev/namespace/rvt-namespace-settings.scss
index 6d301ed1..db36d3bf 100644
--- a/src/elements/pages/dev/namespace/rvt-namespace-settings.scss
+++ b/src/elements/pages/dev/namespace/rvt-namespace-settings.scss
@@ -146,7 +146,6 @@ $input-length-short: 75px;
 		flex-direction: row;
 		align-items: flex-start;
 		width: 100%;
-		max-width: 650px;
 		box-sizing: border-box;
 		background: $raised-bg;
 		padding: 17px 17px 13px 17px;
diff --git a/src/elements/root/rvt-root.ts b/src/elements/root/rvt-root.ts
index f1d8f3df..52fcbe25 100644
--- a/src/elements/root/rvt-root.ts
+++ b/src/elements/root/rvt-root.ts
@@ -12,7 +12,7 @@ import RegisterPanel from '../overlay/register-panel';
 import config from '../../config';
 import { HookFetch } from '../../utils/fetch-hook';
 import { DeferredStageEvent, Stage } from '../pages/link-game';
-import StylizedButton from '../common/stylized-button';
+import RvtButton from '../common/button/rvt-button';
 import { Alignment, Orientation } from '../common/overlay-positioning';
 import { DropDownSelectEvent, DropDownSelection } from '../dev/drop-down-list';
 import { Breadcrumb } from '../common/rvt-breadcrumbs';
@@ -360,7 +360,7 @@ export default class RvtRoot extends LitElement {
 					if (e.target === e.currentTarget) this.closeCaptcha();
 				});
 
-				let cancel = new StylizedButton();
+				let cancel = new RvtButton();
 				cancel.addEventListener('click', this.closeCaptcha.bind(this));
 				cancel.append(document.createTextNode('Cancel'));
 				element.append(cancel);
@@ -452,7 +452,7 @@ export default class RvtRoot extends LitElement {
 
 					content = html`
 						<!-- Page Body -->
-						<div id="content-holder" class="min-h-screen flex pt-14 box-border">
+						<div id="content-holder" class="min-h-screen flex pt-24 box-border">
 							<rvt-router
 								@change="${this.onRouteChange.bind(this)}"
 								@title-change="${this.onTitleChange.bind(this)}"
diff --git a/src/elements/root/rvt-router.ts b/src/elements/root/rvt-router.ts
index 5ac79fa7..133ebf18 100644
--- a/src/elements/root/rvt-router.ts
+++ b/src/elements/root/rvt-router.ts
@@ -570,6 +570,8 @@ export default class RvtRouter extends LitElement {
 			first: pageList.length == 1
 		});
 
-		return html`<div class="${classes} h-full">${newestPage.renderResult.template}</div> `;
+		return html`<div class="${classes} h-full px-6">
+			<div class="max-w-contentwidth h-full mx-auto">${newestPage.renderResult.template}</div>
+		</div> `;
 	}
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9f987bc0..befd50d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,7 +41,7 @@ module.exports = {
 				98: '.98'
 			},
 			maxWidth: {
-				contentwidth: '1100px'
+				contentwidth: '80rem'
 			},
 			translate: {
 				'.05': '.05rem'
@@ -51,7 +51,7 @@ module.exports = {
 				overlay: '6'
 			},
 			gridTemplateColumns: {
-				'sidebar-layout': '18rem calc(100vw - 18rem)'
+				'sidebar-layout': '15rem calc(100% - 15rem)'
 			},
 			aria: {
 				busy: 'busy'