diff --git a/components/Layout.vue b/components/Layout.vue
index 552bf89..979267f 100644
--- a/components/Layout.vue
+++ b/components/Layout.vue
@@ -31,8 +31,8 @@ onUnmounted(() => {
 				</h1>
 				<GitHubLink />
 			</header>
-			<main class="flex w-full flex-col items-center gap-12 *:max-md:px-6 md:gap-16">
-				<div class="relative flex w-full flex-col items-center gap-6">
+			<main class="flex w-full flex-col items-center gap-12 md:gap-16">
+				<div class="relative flex w-full flex-col items-center gap-6 max-md:px-6">
 					<h2
 						class="max-w-96 text-center font-serif text-5xl font-semibold md:max-w-2xl md:text-6xl"
 					>
@@ -64,7 +64,7 @@ onUnmounted(() => {
 					</div>
 				</div>
 				<Navigation />
-				<div class="w-full max-md:overflow-auto">
+				<div class="w-full">
 					<slot />
 				</div>
 			</main>
diff --git a/components/Navigation.vue b/components/Navigation.vue
index 8368567..920e9de 100644
--- a/components/Navigation.vue
+++ b/components/Navigation.vue
@@ -7,7 +7,7 @@ const isHome = computed(() => route.path === '/');
 
 <template>
 	<nav
-		class="relative flex rounded-full border-8 border-solid border-slate-100 bg-slate-200 *:z-10 *:flex *:w-32 *:items-center *:justify-center *:gap-1 *:p-3 *:text-center *:transition-all"
+		class="relative flex rounded-full border-8 border-solid border-slate-100 bg-slate-200 *:z-10 *:flex *:w-32 *:items-center *:justify-center *:gap-1 *:p-2 *:text-center *:transition-all"
 	>
 		<NuxtLink to="/" :style="{ color: isHome ? 'white' : '' }">
 			<ListBulletIcon class="h-4" />
diff --git a/pages/index.vue b/pages/index.vue
index fb84070..261fa2f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -74,7 +74,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<section class="flex w-full flex-col">
+	<section class="flex w-full flex-col *:max-md:px-6">
 		<div
 			class="grid w-full grid-cols-[1fr_1fr] gap-2 py-8 [grid-template-areas:'a_a''b_b''c_d'] md:flex"
 		>
@@ -102,91 +102,102 @@ onUnmounted(() => {
 			</Button>
 		</div>
 
-		<div class="table w-[64rem] table-fixed">
-			<div
-				:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"
-			>
-				<div class="relative table-row bg-slate-50 text-slate-500 *:table-cell *:px-4 *:py-6">
-					<div class="w-[8%]">Rank</div>
-					<div class="w-[30%]">Name</div>
-					<div class="w-[12%]">Stars</div>
-					<div class="w-[30%]">Description</div>
-					<div class="w-[12%]">Language</div>
-					<div class="w-[8%]">Age</div>
+		<div class="max-md:overflow-auto">
+			<div class="table w-[64rem] table-fixed">
+				<div
+					:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"
+				>
+					<div class="relative table-row bg-slate-50 text-slate-500 *:table-cell *:px-4 *:py-6">
+						<div class="w-[8%]">Rank</div>
+						<div class="w-[30%]">Name</div>
+						<div class="w-[12%]">Stars</div>
+						<div class="w-[30%]">Description</div>
+						<div class="w-[12%]">Language</div>
+						<div class="w-[8%]">Age</div>
+					</div>
 				</div>
-			</div>
-			<div
-				v-if="repositories?.length"
-				class="relative table-row-group"
-				@mouseleave="hoverEffect.opacity = 0"
-			>
-				<div ref="topOfTableRef" class="w-[1200%]" />
 				<div
-					class="absolute h-10 w-full bg-white transition-all"
-					:style="{
-						height: `${hoverEffect.height}px`,
-						top: `${hoverEffect.top}px`,
-						opacity: hoverEffect.opacity,
-					}"
-				/>
-				<NuxtLink
-					v-for="repo in repositories"
-					:key="repo.name"
-					:to="repo.url"
-					target="_blank"
-					class="relative table-row cursor-alias *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:content-[''] [&:not(:first-of-type):after]:bg-slate-300"
-					@mouseenter="onHoverEffectMouseEnter"
+					v-if="repositories?.length"
+					class="relative table-row-group"
+					@mouseleave="hoverEffect.opacity = 0"
 				>
-					<div>
-						<div
-							class="relative w-8 text-center after:absolute after:inset-1/2 after:h-8 after:w-8 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-solid after:border-slate-300 after:content-['']"
-						>
-							{{ repo.rank }}
+					<div ref="topOfTableRef" class="w-[1200%]" />
+					<div
+						class="absolute h-10 w-full bg-white transition-all"
+						:style="{
+							height: `${hoverEffect.height}px`,
+							top: `${hoverEffect.top}px`,
+							opacity: hoverEffect.opacity,
+						}"
+					/>
+					<NuxtLink
+						v-for="repo in repositories"
+						:key="repo.name"
+						:to="repo.url"
+						target="_blank"
+						class="relative table-row cursor-alias *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:content-[''] [&:not(:first-of-type):after]:bg-slate-300"
+						@mouseenter="onHoverEffectMouseEnter"
+					>
+						<div>
+							<div
+								class="relative w-8 text-center after:absolute after:inset-1/2 after:h-8 after:w-8 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-solid after:border-slate-300 after:content-['']"
+							>
+								{{ repo.rank }}
+							</div>
 						</div>
-					</div>
-					<div>
-						<div class="flex items-center gap-2">
-							<img :src="repo.image" :alt="`GitHub ${repo.ownerName} avatar`" class="h-6 rounded" />
-							<h3>
-								<span v-if="settings.showOwners" class="text-slate-500">{{ repo.ownerName }}/</span>
-								<span>{{ repo.name }}</span>
-							</h3>
+						<div>
+							<div class="flex items-center gap-2">
+								<img
+									:src="repo.image"
+									:alt="`GitHub ${repo.ownerName} avatar`"
+									class="h-6 rounded"
+								/>
+								<h3>
+									<span v-if="settings.showOwners" class="text-slate-500">
+										{{ repo.ownerName }}/
+									</span>
+									<span>{{ repo.name }}</span>
+								</h3>
+							</div>
 						</div>
-					</div>
-					<div>
-						<div class="flex items-center gap-1">
-							<StarIcon class="h-4" />
-							<span>{{ repo.stargazerCount.toLocaleString() }}</span>
+						<div>
+							<div class="flex items-center gap-1">
+								<StarIcon class="h-4" />
+								<span>{{ repo.stargazerCount.toLocaleString() }}</span>
+							</div>
 						</div>
-					</div>
-					<div class="text-slate-500">
-						<p v-if="settings.showFullDescription">{{ repo.description }}</p>
-						<p v-else class="overflow-hidden text-ellipsis whitespace-nowrap">
-							{{ repo.description }}
-						</p>
-					</div>
-					<div>
-						<div v-if="repo.language" class="flex items-center gap-1">
-							<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: repo.language.color }" />
-							{{ repo.language?.name }}
+						<div class="text-slate-500">
+							<p v-if="settings.showFullDescription">{{ repo.description }}</p>
+							<p v-else class="overflow-hidden text-ellipsis whitespace-nowrap">
+								{{ repo.description }}
+							</p>
 						</div>
-						<span v-else>-</span>
-					</div>
-					<div>{{ formatDuration(repo.age) }}</div>
-				</NuxtLink>
+						<div>
+							<div v-if="repo.language" class="flex items-center gap-1">
+								<div
+									class="h-2 w-2 rounded-full"
+									:style="{ backgroundColor: repo.language.color }"
+								/>
+								{{ repo.language?.name }}
+							</div>
+							<span v-else>-</span>
+						</div>
+						<div>{{ formatDuration(repo.age) }}</div>
+					</NuxtLink>
+				</div>
+				<div v-else class="text-nowrap px-4 pt-8 text-slate-500">No results for this search.</div>
+				<Teleport to="body">
+					<Transition>
+						<button
+							v-if="hasScrolled"
+							class="fixed bottom-4 right-4 z-50 rounded-full bg-slate-50 p-4"
+							@click="onClickScrollUp"
+						>
+							<ArrowUpIcon class="h-4" />
+						</button>
+					</Transition>
+				</Teleport>
 			</div>
-			<div v-else class="text-nowrap px-4 pt-8 text-slate-500">No results for this search.</div>
-			<Teleport to="body">
-				<Transition>
-					<button
-						v-if="hasScrolled"
-						class="fixed bottom-4 right-4 z-50 rounded-full bg-slate-50 p-4"
-						@click="onClickScrollUp"
-					>
-						<ArrowUpIcon class="h-4" />
-					</button>
-				</Transition>
-			</Teleport>
 		</div>
 	</section>
 </template>