diff --git a/src/app/components/GuideCard.tsx b/src/app/components/GuideCard.tsx
index 4eaf0010..2428406e 100644
--- a/src/app/components/GuideCard.tsx
+++ b/src/app/components/GuideCard.tsx
@@ -5,10 +5,11 @@ import { Badge } from './index.js'
 
 interface Props {
 	id: string,
+	minimal?: boolean,
 	activeTags?: string[],
 	toggleTag?: (tag: string) => unknown,
 }
-export function GuideCard({ id, activeTags, toggleTag }: Props) {
+export function GuideCard({ id, minimal, activeTags, toggleTag }: Props) {
 	const { title, versions, tags } = useMemo(() => getGuide(id), [id])
 
 	const onToggleTag = (tag: string) => (e: MouseEvent) => {
@@ -17,7 +18,7 @@ export function GuideCard({ id, activeTags, toggleTag }: Props) {
 		e.stopImmediatePropagation()
 	}
 
-	return <Card title={title} overlay={versions?.join(' • ')} link={`/guides/${id}/`}>
+	return <Card title={title} overlay={!minimal && versions?.join(' • ')} link={`/guides/${id}/`}>
 		<div class="badges-list">
 			{tags?.sort().map(tag => <Badge label={tag} onClick={onToggleTag(tag)} active={activeTags?.includes(tag)} />)}
 		</div>
diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
index 95d806f7..6337bb74 100644
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'preact/hooks'
 import { ChangelogEntry, Footer, GeneratorCard, Giscus, GuideCard, ToolCard, ToolGroup } from '../components/index.js'
 import { useLocale, useTitle } from '../contexts/index.js'
 import { useAsync } from '../hooks/useAsync.js'
+import { useMediaQuery } from '../hooks/useMediaQuery.js'
 import { fetchChangelogs, fetchVersions } from '../services/DataFetcher.js'
 import { Store } from '../Store.js'
 
@@ -15,6 +16,45 @@ export function Home({}: Props) {
 	const { locale } = useLocale()
 	useTitle(locale('title.home'))
 
+	const smallScreen = useMediaQuery('(max-width: 580px)')
+
+	return <main>
+		<div class="container">
+			<div class="card-group">
+				<div class="card-column">
+					<PopularGenerators />
+					{smallScreen && <FavoriteGenerators />}
+					<Changelog />
+					{smallScreen && <Guides />}
+					<Versions />
+					{smallScreen && <Tools />}
+				</div>
+				{!smallScreen && <div class="card-column">
+					<FavoriteGenerators />
+					<Guides />
+					<Tools />
+				</div>}
+			</div>
+			<Giscus />
+			<Footer />
+		</div>
+	</main>
+}
+
+function PopularGenerators() {
+	const { locale } = useLocale()
+	return <ToolGroup title={locale('generators.popular')} link="/generators/">
+		<GeneratorCard minimal id="loot_table" />
+		<GeneratorCard minimal id="advancement" />
+		<GeneratorCard minimal id="predicate" />
+		<ToolCard title={locale('worldgen')} link="/worldgen/" titleIcon="worldgen" />
+		<ToolCard title={locale('generators.all')} link="/generators/" titleIcon="arrow_right" />
+	</ToolGroup>
+}
+
+function FavoriteGenerators() {
+	const { locale } = useLocale()
+
 	const favorites = useMemo(() => {
 		const history: string[] = []
 		for (const id of Store.getGeneratorHistory().reverse()) {
@@ -25,54 +65,61 @@ export function Home({}: Props) {
 		return history.slice(0, MAX_FAVORITES)
 	}, [])
 
+	if (favorites.length < MIN_FAVORITES) return <></>
+
+	return <ToolGroup title={locale('generators.recent')}>
+		{favorites.map(f => <GeneratorCard minimal id={f} />)}
+	</ToolGroup>
+}
+
+function Guides() {
+	const { locale } = useLocale()
+
+	return <ToolGroup title={locale('guides')} link="/guides/" titleIcon="arrow_right">
+		<GuideCard minimal id="adding-custom-structures" />
+		<GuideCard minimal id="noise-router" />
+	</ToolGroup>
+}
+
+function Tools() {
+	const { locale } = useLocale()
+
+	return <ToolGroup title={locale('tools')}>
+		<ToolCard title="Report Inspector" icon="report"
+			link="https://misode.github.io/report/"
+			desc="Analyse your performance reports" />
+		<ToolCard title="Minecraft Sounds" icon="sounds"
+			link="/sounds/"
+			desc="Browse through and mix all the vanilla sounds" />
+		<ToolCard title="Data Pack Upgrader"
+			link="https://misode.github.io/upgrader/"
+			desc="Convert your data packs from 1.16 to 1.19" />
+	</ToolGroup>
+}
+
+function Versions() {
+	const { locale } = useLocale()
+
 	const { value: versions } = useAsync(fetchVersions, [])
 	const release = useMemo(() => versions?.find(v => v.type === 'release'), [versions])
 
+	return <ToolGroup title={locale('versions.minecraft_versions')} link="/versions/" titleIcon="arrow_right">
+		{(versions?.[0] && release) && <>
+			{versions[0].id !== release.id && (
+				<ToolCard title={versions[0].name} link={`/versions/?id=${versions[0].id}`} desc={locale('versions.latest_snapshot')} />
+			)}
+			<ToolCard title={release.name} link={`/versions/?id=${release.id}`} desc={locale('versions.latest_release')} />
+		</>}
+	</ToolGroup>
+}
+
+function Changelog() {
+	const { locale } = useLocale()
+
 	const { value: changes } = useAsync(fetchChangelogs, [])
 	const latestChanges = useMemo(() => changes?.sort((a, b) => b.order - a.order).slice(0, 2), [changes])
 
-	return <main>
-		<div class="container">
-			<div class="card-group">
-				<ToolGroup title={locale('generators.popular')} link="/generators/">
-					<GeneratorCard minimal id="loot_table" />
-					<GeneratorCard minimal id="advancement" />
-					<GeneratorCard minimal id="predicate" />
-					<ToolCard title={locale('worldgen')} link="/worldgen/" titleIcon="worldgen" />
-					<ToolCard title={locale('generators.all')} link="/generators/" titleIcon="arrow_right" />
-				</ToolGroup>
-				{favorites.length >= MIN_FAVORITES && <ToolGroup title={locale('generators.recent')}>
-					{favorites.map(f => <GeneratorCard minimal id={f} />)}
-				</ToolGroup>}
-				<ToolGroup title={locale('guides')} link="/guides/" titleIcon="arrow_right">
-					<GuideCard id="adding-custom-structures" />
-					<GuideCard id="noise-router" />
-				</ToolGroup>
-				<ToolGroup title={locale('tools')}>
-					<ToolCard title="Report Inspector" icon="report"
-						link="https://misode.github.io/report/"
-						desc="Analyse your performance reports" />
-					<ToolCard title="Minecraft Sounds" icon="sounds"
-						link="/sounds/"
-						desc="Browse through and mix all the vanilla sounds" />
-					<ToolCard title="Data Pack Upgrader"
-						link="https://misode.github.io/upgrader/"
-						desc="Convert your data packs from 1.16 to 1.19" />
-				</ToolGroup>
-				<ToolGroup title={locale('versions.minecraft_versions')} link="/versions/" titleIcon="arrow_right">
-					{(versions?.[0] && release) && <>
-						{versions[0].id !== release.id && (
-							<ToolCard title={versions[0].name} link={`/versions/?id=${versions[0].id}`} desc={locale('versions.latest_snapshot')} />
-						)}
-						<ToolCard title={release.name} link={`/versions/?id=${release.id}`} desc={locale('versions.latest_release')} />
-					</>}
-				</ToolGroup>
-				<ToolGroup title={locale('changelog')} link="/changelog/" titleIcon="git_commit">
-					{latestChanges?.map(change => <ChangelogEntry change={change} />)}
-				</ToolGroup>
-			</div>
-			<Giscus />
-			<Footer />
-		</div>
-	</main>
+	return <ToolGroup title={locale('changelog')} link="/changelog/" titleIcon="git_commit">
+		{latestChanges?.map(change => <ChangelogEntry change={change} />)}
+	</ToolGroup>
 }
diff --git a/src/app/pages/Worldgen.tsx b/src/app/pages/Worldgen.tsx
index ea64e3d5..c5c01fb0 100644
--- a/src/app/pages/Worldgen.tsx
+++ b/src/app/pages/Worldgen.tsx
@@ -11,7 +11,7 @@ export function Worldgen({}: Props) {
 	return <main>
 		<div class="container worldgen">
 			<div class="card-group">
-				<ToolGroup title={locale('popular_generators')}>
+				<ToolGroup title={locale('generators.popular')}>
 					<GeneratorCard minimal id="dimension" />
 					<GeneratorCard minimal id="worldgen/biome" />
 					<GeneratorCard minimal id="worldgen/noise_settings" />
diff --git a/src/styles/global.css b/src/styles/global.css
index 6c5cdf5d..cc95acc2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1571,6 +1571,7 @@ hr {
 .badges-list {
 	display: flex;
 	flex-wrap: wrap;
+	gap: 8px 0;
 }
 
 .changelog-version {
@@ -1816,6 +1817,15 @@ hr {
 	align-items: flex-start;
 }
 
+.card-column {
+	display: flex;
+	flex-direction: column;
+}
+
+.card-column > *:not(:last-child) {
+	margin-bottom: 8px;
+}
+
 .card {
 	display: block;
 	text-decoration: none;
@@ -2135,6 +2145,10 @@ hr {
 		grid-template-columns: 1fr;
 	}
 
+	.card-columns {
+		grid-template-columns: 1fr;
+	}
+
 	.title h1 {
 		font-size: 18px;
 	}