diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index a26bc1f..258ce55 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -89,16 +89,13 @@
 	.header-content {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: $unit-3x;
 		pointer-events: auto;
 		width: 100%;
-		max-width: 900px;
-		margin: 0 auto;
 
 		@include breakpoint('phone') {
 			gap: $unit-2x;
-			max-width: none;
-			justify-content: center;
 		}
 	}
 
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index 508e566..6152cd9 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-	export let noHorizontalPadding = false
+	interface Props {
+		noHorizontalPadding?: boolean
+		class?: string
+	}
+
+	let { noHorizontalPadding = false, class: className = '' }: Props = $props()
 </script>
 
-<section class="page" class:no-horizontal-padding={noHorizontalPadding}>
+<section class="page {className}" class:no-horizontal-padding={noHorizontalPadding}>
 	<header>
 		<slot name="header" />
 	</header>
diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte
index 54736ff..cb0872d 100644
--- a/src/lib/components/ProjectList.svelte
+++ b/src/lib/components/ProjectList.svelte
@@ -56,6 +56,11 @@
 		justify-content: center;
 		width: 100%;
 
+		@include breakpoint('phone') {
+			box-sizing: border-box;
+			padding: 0 $unit-2x;
+		}
+
 		ul {
 			display: flex;
 			flex-direction: column;
diff --git a/src/lib/components/UniverseFeed.svelte b/src/lib/components/UniverseFeed.svelte
index ffcc5f5..4aae7c3 100644
--- a/src/lib/components/UniverseFeed.svelte
+++ b/src/lib/components/UniverseFeed.svelte
@@ -29,7 +29,8 @@
 	.universe-feed {
 		display: flex;
 		flex-direction: column;
-		gap: $unit-3x;
+		gap: $unit-2x;
+		padding: 0 $unit-2x;
 	}
 
 	.empty-container {
diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte
index a6d7ce1..55f9aaf 100644
--- a/src/lib/components/admin/Button.svelte
+++ b/src/lib/components/admin/Button.svelte
@@ -170,7 +170,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: $unit;
-		font-weight: 500;
+		font-weight: 400;
 		border: none;
 		cursor: pointer;
 		transition: all 0.15s ease;
@@ -211,7 +211,7 @@
 	}
 
 	.btn-medium {
-		padding: $unit $unit-2x;
+		padding: ($unit * 1.5) $unit-2x;
 		font-size: 14px;
 		border-radius: 24px;
 		min-height: 36px;
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 7f77695..7ca11a5 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -12,47 +12,48 @@
 	$: ({ albums, games, error } = data)
 </script>
 
-<Page>
-	<svelte:fragment slot="header">
-		<h2>A little about me</h2>
-	</svelte:fragment>
+<section class="about-container">
+	<Page>
+		<svelte:fragment slot="header">
+			<h2>A little about me</h2>
+		</svelte:fragment>
 
-	<section class="bio">
-		<p>
-			Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in San
-			Francisco.
-		</p>
-		<p>
-			Right now, I'm spending my free time building a hobby journaling app called <a
-				href="https://maitsu.co"
-				target="_blank">Maitsu</a
-			>. I've spent time at several companies over the last 11 years, but you might know me from
-			<a href="https://www.pinterest.com/" target="_blank">Pinterest</a>, where I was the first
-			design hire.
-		</p>
-		<p>
-			I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from <a
-				href="http://design.cmu.edu/"
-				target="_blank">Carnegie Mellon University</a
-			> in 2011 with a Bachelors of Arts in Communication Design.
-		</p>
-	</section>
-</Page>
-<Page>
-	<svelte:fragment slot="header">
-		<h2>Notable mentions</h2>
-	</svelte:fragment>
+		<section class="bio">
+			<p>
+				Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in
+				San Francisco.
+			</p>
+			<p>
+				Right now, I'm spending my free time building a hobby journaling app called <a
+					href="https://maitsu.co"
+					target="_blank">Maitsu</a
+				>. I've spent time at several companies over the last 11 years, but you might know me from
+				<a href="https://www.pinterest.com/" target="_blank">Pinterest</a>, where I was the first
+				design hire.
+			</p>
+			<p>
+				I was born and raised in New York City and spend a lot of time in Tokyo. I graduated from <a
+					href="http://design.cmu.edu/"
+					target="_blank">Carnegie Mellon University</a
+				> in 2011 with a Bachelors of Arts in Communication Design.
+			</p>
+		</section>
+	</Page>
+	<Page>
+		<svelte:fragment slot="header">
+			<h2>Notable mentions</h2>
+		</svelte:fragment>
 
-	<MentionList />
-</Page>
-<Page noHorizontalPadding={true}>
-	<svelte:fragment slot="header">
-		<h2>Now playing</h2>
-	</svelte:fragment>
+		<MentionList />
+	</Page>
+	<Page noHorizontalPadding={true}>
+		<svelte:fragment slot="header">
+			<h2>Now playing</h2>
+		</svelte:fragment>
 
-	<RecentAlbums {albums} />
+		<RecentAlbums {albums} />
 
-	<!-- <section class="latest-games">
+		<!-- <section class="latest-games">
 		{#if games && games.length > 0}
 			<ul>
 				{#each games.slice(0, 3) as game}
@@ -63,9 +64,27 @@
 			<p>Loading games...</p>
 		{/if}
 	</section> -->
-</Page>
+	</Page>
+</section>
 
 <style lang="scss">
+	.about-container {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		justify-content: center;
+		max-width: 700px;
+		margin: 0 auto;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x;
+		}
+
+		:global(.page) {
+			margin: 0;
+		}
+	}
+
 	a,
 	em {
 		color: $red-60;
diff --git a/src/routes/labs/+page.svelte b/src/routes/labs/+page.svelte
index ad79b89..c80be63 100644
--- a/src/routes/labs/+page.svelte
+++ b/src/routes/labs/+page.svelte
@@ -39,7 +39,8 @@
 		padding: 0 $unit-2x;
 
 		@include breakpoint('phone') {
-			padding: $unit-3x $unit;
+			padding: 0 $unit-2x;
+			box-sizing: border-box;
 		}
 	}
 
diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte
index 7f4f44e..b66029e 100644
--- a/src/routes/labs/[slug]/+page.svelte
+++ b/src/routes/labs/[slug]/+page.svelte
@@ -11,74 +11,84 @@
 	const error = $derived(data.error as string | undefined)
 </script>
 
-{#if error}
-	<Page>
-		<div slot="header" class="error-header">
-			<h1>Error</h1>
-		</div>
-		<div class="error-content">
-			<p>{error}</p>
-			<a href="/labs" class="back-link">← Back to labs</a>
-		</div>
-	</Page>
-{:else if !project}
-	<Page>
-		<div class="loading">Loading project...</div>
-	</Page>
-{:else if project.status === 'list-only'}
-	<Page>
-		<div slot="header" class="error-header">
-			<h1>Project Not Available</h1>
-		</div>
-		<div class="error-content">
-			<p>This project is not yet available for viewing. Please check back later.</p>
-			<a href="/labs" class="back-link">← Back to labs</a>
-		</div>
-	</Page>
-{:else if project.status === 'password-protected'}
-	<Page>
-		<ProjectPasswordProtection
-			projectSlug={project.slug}
-			correctPassword={project.password || ''}
-			projectType="labs"
-		>
-			{#snippet children()}
-				<div slot="header" class="project-header">
-					{#if project.logoUrl}
-						<div
-							class="project-logo"
-							style="background-color: {project.backgroundColor || '#f5f5f5'}"
-						>
-							<img src={project.logoUrl} alt="{project.title} logo" />
-						</div>
-					{/if}
-					<h1 class="project-title">{project.title}</h1>
-					{#if project.subtitle}
-						<p class="project-subtitle">{project.subtitle}</p>
-					{/if}
-				</div>
-				<ProjectContent {project} />
-			{/snippet}
-		</ProjectPasswordProtection>
-	</Page>
-{:else}
-	<Page>
-		<div slot="header" class="project-header">
-			{#if project.logoUrl}
-				<div class="project-logo" style="background-color: {project.backgroundColor || '#f5f5f5'}">
-					<img src={project.logoUrl} alt="{project.title} logo" />
-				</div>
-			{/if}
-			<h1 class="project-title">{project.title}</h1>
-			{#if project.subtitle}
-				<p class="project-subtitle">{project.subtitle}</p>
-			{/if}
-		</div>
-		<ProjectContent {project} />
-	</Page>
-{/if}
+<div class="project-page-container">
+	{#if error}
+		<Page>
+			<div slot="header" class="error-header">
+				<h1>Error</h1>
+			</div>
+			<div class="error-content">
+				<p>{error}</p>
+				<a href="/labs" class="back-link">← Back to labs</a>
+			</div>
+		</Page>
+	{:else if !project}
+		<Page>
+			<div class="loading">Loading project...</div>
+		</Page>
+	{:else if project.status === 'list-only'}
+		<Page>
+			<div slot="header" class="error-header">
+				<h1>Project Not Available</h1>
+			</div>
+			<div class="error-content">
+				<p>This project is not yet available for viewing. Please check back later.</p>
+				<a href="/labs" class="back-link">← Back to labs</a>
+			</div>
+		</Page>
+	{:else if project.status === 'password-protected'}
+		<Page>
+			<ProjectPasswordProtection
+				projectSlug={project.slug}
+				correctPassword={project.password || ''}
+				projectType="labs"
+			>
+				{#snippet children()}
+					<div slot="header" class="project-header">
+						{#if project.logoUrl}
+							<div
+								class="project-logo"
+								style="background-color: {project.backgroundColor || '#f5f5f5'}"
+							>
+								<img src={project.logoUrl} alt="{project.title} logo" />
+							</div>
+						{/if}
+						<h1 class="project-title">{project.title}</h1>
+						{#if project.subtitle}
+							<p class="project-subtitle">{project.subtitle}</p>
+						{/if}
+					</div>
+					<ProjectContent {project} />
+				{/snippet}
+			</ProjectPasswordProtection>
+		</Page>
+	{:else}
+		<Page class="project-page">
+			<div slot="header" class="project-header">
+				{#if project.logoUrl}
+					<div
+						class="project-logo"
+						style="background-color: {project.backgroundColor || '#f5f5f5'}"
+					>
+						<img src={project.logoUrl} alt="{project.title} logo" />
+					</div>
+				{/if}
+				<h1 class="project-title">{project.title}</h1>
+				{#if project.subtitle}
+					<p class="project-subtitle">{project.subtitle}</p>
+				{/if}
+			</div>
+			<ProjectContent {project} />
+		</Page>
+	{/if}
+</div>
 
 <style lang="scss">
+	.project-page-container {
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	/* Error and Loading States */
 	.error-header h1 {
 		color: $red-60;
@@ -116,6 +126,7 @@
 	.project-header {
 		text-align: center;
 		width: 100%;
+		padding: $unit-2x 0;
 	}
 
 	.project-logo {
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index 0e2916f..6779a51 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -8,7 +8,7 @@
 	const error = $derived(data.error)
 </script>
 
-<div class="photos-page">
+<div class="photos-container">
 	{#if error}
 		<div class="error-container">
 			<div class="error-message">
@@ -29,14 +29,15 @@
 </div>
 
 <style lang="scss">
-	.photos-page {
+	.photos-container {
 		width: 100%;
-		max-width: 900px;
+		max-width: 700px;
 		margin: 0 auto;
 		padding: 0 $unit-3x;
 
 		@include breakpoint('phone') {
-			padding: $unit-3x $unit-2x;
+			padding: 0 $unit-2x;
+			box-sizing: border-box;
 		}
 	}
 
diff --git a/src/routes/universe/+page.svelte b/src/routes/universe/+page.svelte
index 4485ce6..08aaae2 100644
--- a/src/routes/universe/+page.svelte
+++ b/src/routes/universe/+page.svelte
@@ -24,17 +24,7 @@
 	.universe-container {
 		max-width: 784px;
 		margin: 0 auto;
-		padding: 0 $unit-5x;
-
-		@include breakpoint('phone') {
-			margin-top: $unit-3x;
-			margin-bottom: $unit-3x;
-			padding: 0 $unit-3x;
-		}
-
-		@include breakpoint('small-phone') {
-			padding: 0 $unit-2x;
-		}
+		padding: 0;
 	}
 
 	.error-message {
diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte
index 83f613f..9f17d40 100644
--- a/src/routes/universe/[slug]/+page.svelte
+++ b/src/routes/universe/[slug]/+page.svelte
@@ -39,26 +39,33 @@
 	{/if}
 </svelte:head>
 
-{#if error || !post}
-	<Page>
-		<div class="error-container">
-			<div class="error-content">
-				<h1>Post Not Found</h1>
-				<p>{error || "The post you're looking for doesn't exist."}</p>
-				<button onclick={() => goto('/universe')} class="back-button">
-					<ArrowLeft class="back-arrow" />
-					Back to Universe
-				</button>
+<div class="universe-page-container">
+	{#if error || !post}
+		<Page>
+			<div class="error-container">
+				<div class="error-content">
+					<h1>Post Not Found</h1>
+					<p>{error || "The post you're looking for doesn't exist."}</p>
+					<button onclick={() => goto('/universe')} class="back-button">
+						<ArrowLeft class="back-arrow" />
+						Back to Universe
+					</button>
+				</div>
 			</div>
-		</div>
-	</Page>
-{:else}
-	<Page>
-		<DynamicPostContent {post} />
-	</Page>
-{/if}
+		</Page>
+	{:else}
+		<Page>
+			<DynamicPostContent {post} />
+		</Page>
+	{/if}
+</div>
 
 <style lang="scss">
+	.universe-page-container {
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	.error-container {
 		display: flex;
 		justify-content: center;
diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
index cf5549b..700596c 100644
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@@ -157,9 +157,10 @@
 		width: 100%;
 		max-width: 700px;
 		margin: 0 auto;
+		box-sizing: border-box;
 
 		@include breakpoint('phone') {
-			margin-top: $unit-3x;
+			padding: 0 $unit-2x;
 		}
 
 		:global(.page) {