diff --git a/src/lib/components/typography/Blockquote.svelte b/src/lib/components/typography/Blockquote.svelte
index 60fd4a57..56b634a9 100644
--- a/src/lib/components/typography/Blockquote.svelte
+++ b/src/lib/components/typography/Blockquote.svelte
@@ -1,3 +1,3 @@
-<blockquote class="mt-6 border-l-2 pl-6 italic text-[#393946] dark:text-[#FFFFFF]">
+<blockquote class="border-l-2 pl-6 italic text-[#393946] dark:text-[#FFFFFF]">
 	<slot />
 </blockquote>
diff --git a/src/lib/components/typography/H2.svelte b/src/lib/components/typography/H2.svelte
index 19d87e0e..08d74227 100644
--- a/src/lib/components/typography/H2.svelte
+++ b/src/lib/components/typography/H2.svelte
@@ -1,5 +1,5 @@
 <h2
-	class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors text-[#8599A8] dark:text-[#8599A8] first:mt-0"
+	class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors text-[#8599A8] dark:text-[#8599A8]"
 >
 	<slot />
 </h2>
diff --git a/src/lib/components/typography/P.svelte b/src/lib/components/typography/P.svelte
index bb22fbab..0f3763b1 100644
--- a/src/lib/components/typography/P.svelte
+++ b/src/lib/components/typography/P.svelte
@@ -1,3 +1,3 @@
-<p class="leading-7 [&:not(:first-child)]:mt-6 text-[#FFFFFF] dark:text-[#1C1C22]">
+<p class="leading-7 text-[#FFFFFF] dark:text-[#1C1C22]">
 	<slot />
 </p>
diff --git a/src/lib/components/typography/Text.svelte b/src/lib/components/typography/Text.svelte
index 5f3dea93..8cb876b8 100644
--- a/src/lib/components/typography/Text.svelte
+++ b/src/lib/components/typography/Text.svelte
@@ -24,8 +24,12 @@
 	};
 
 	export let type: keyof typeof textMapping;
+
+	export let margin: boolean = false;
 </script>
 
-<svelte:component this={textMapping[type]}>
-	<slot />
-</svelte:component>
+<div class:mt-6={margin}>
+	<svelte:component this={textMapping[type]}>
+		<slot />
+	</svelte:component>
+</div>
diff --git a/src/lib/components/ui/progress/index.ts b/src/lib/components/ui/progress/index.ts
new file mode 100644
index 00000000..97f57fcd
--- /dev/null
+++ b/src/lib/components/ui/progress/index.ts
@@ -0,0 +1,7 @@
+import Root from './progress.svelte';
+
+export {
+	Root,
+	//
+	Root as Progress
+};
diff --git a/src/lib/components/ui/progress/progress.svelte b/src/lib/components/ui/progress/progress.svelte
new file mode 100644
index 00000000..e3555c90
--- /dev/null
+++ b/src/lib/components/ui/progress/progress.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Progress as ProgressPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = ProgressPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let max: $$Props['max'] = 100;
+	export let value: $$Props['value'] = undefined;
+	export { className as class };
+</script>
+
+<ProgressPrimitive.Root
+	class={cn('relative h-4 w-full overflow-hidden rounded-full bg-primary/20', className)}
+	{...$$restProps}
+>
+	<div
+		class="h-full w-full flex-1 bg-primary transition-all"
+		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+	/>
+</ProgressPrimitive.Root>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4b2f3fa0..7faa03f1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,20 +1 @@
-<script lang="ts">
-	import * as Card from '$lib/components/ui/card';
-	import { Button } from '$lib/components/ui/button';
-</script>
-
-<div class="col-span-2 row-span-2">
-	<Card.Root class="size-full text-white flex flex-col">
-		<Card.Header>
-			<!--TODO: Replace this with i18n key-->
-			<Card.Title>Changelog:</Card.Title>
-		</Card.Header>
-		<Card.Content class="flex-1">
-			<p class="whitespace-pre-line">Changelog TXT</p>
-		</Card.Content>
-		<Card.Footer class="flex-1 items-end justify-end">
-			<Button variant="default" class="rounded-xl border-2 border-gray-600">More</Button>
-			<Button variant="link" class="rounded-xl border-2 border-gray-600 ml-5">Hide</Button>
-		</Card.Footer>
-	</Card.Root>
-</div>
+<a href="homepage">Homepage</a>
diff --git a/src/routes/homepage/+page.svelte b/src/routes/homepage/+page.svelte
new file mode 100644
index 00000000..67dde2b9
--- /dev/null
+++ b/src/routes/homepage/+page.svelte
@@ -0,0 +1,268 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import Text from '$lib/components/typography/Text.svelte';
+	import { Progress } from '$lib/components/ui/progress';
+
+	let changeLog = `Version 4.3:
+
+New Characters
+- 5-Star Character "Helm of the Radiant Rose" Navia (Geo)
+  - Vision: Geo
+  - Weapon: Claymore
+  - Elemental Skill: Ceremonial Crystalshot
+  - Elemental Burst: As the Sunlit Sky's Singing Salute
+
+- 4-Star Character "Executor of Justice" Chevreuse (Pyro)
+  - Vision: Pyro
+  - Weapon: Polearm
+  - Elemental Skill: Short-Range Rapid Interdiction Fire
+  - Elemental Burst: Ring of Bursting Grenades
+
+`;
+
+	type Achievement = {
+		id: number;
+		name: string;
+		desc: string;
+		reward: number;
+		hidden: boolean;
+		order: number;
+	};
+
+	// type AchievementCategory = {
+	// 	idN: number;
+	// 	id: string;
+	// 	name: string;
+	// 	order: number;
+	// 	achievements: Achievement[];
+	// };
+
+	const mockAchievement: Achievement = {
+		id: 0,
+		name: 'Test Achievement',
+		desc: 'lorem ipsum',
+		reward: 1,
+		hidden: false,
+		order: 0
+	};
+
+	// const mockAchievementCategory: AchievementCategory = {
+	// 	idN: 0,
+	// 	id: 'testCategory',
+	// 	name: 'Test Category',
+	// 	order: 0,
+	// 	achievements: [mockAchievement]
+	// };
+
+	let achievementsDone = 998;
+	let achievementsTotal = 1143;
+
+	let characterPity = [76, 8];
+	let weaponPity = [23, 2];
+	let standartPity = [53, 5];
+</script>
+
+<div class="h-[calc(100dvh-1rem)]">
+	<section class="flex flex-row justify-between px-5 items-center mb-5">
+		<h1 class="text-4xl font-semibold">Home</h1>
+		<Button class="rounded-xl border-2 border-gray-600">Edit</Button>
+	</section>
+	<div
+		class="h-fit [column-count:auto] [column-width:max(20em,_min(26vw,_70vw))] gap-2 [&>div:not(:first-child)]:mt-2 [&>div:not(:first-child)]:break-inside-avoid"
+	>
+		<!-- Welcome card -->
+		<Card.Root class="break-inside-avoid text-white flex flex-col">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Welcome to Dval.in!</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content class="flex-1">
+				<Text type="p">
+					Your best Genshin Impact companion! Dval.in helps you plan what to farm with an ascension
+					calculator, and it also tracks your progress with a todo list and a wish counter.
+				</Text>
+			</Card.Content>
+			<Card.Footer class="flex-1 items-end justify-end">
+				<Button class="rounded-xl border-2 border-gray-600">Hide</Button>
+			</Card.Footer>
+		</Card.Root>
+		<!-- Changelog card -->
+		<Card.Root class="text-white flex flex-col">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Changelog:</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content class="flex-1 whitespace-pre-line">
+				<Text type="p">{changeLog}</Text>
+			</Card.Content>
+			<Card.Footer class="flex-1 items-end justify-end">
+				<Button class="rounded-xl border-2 border-gray-600">More</Button>
+			</Card.Footer>
+		</Card.Root>
+		<!-- Reminder card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Reminder</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<Text type="p">
+					Daily teapot currency/friendship, dailies/encounters, [enemies], welkin 2day local
+					specialties, iron, electro crystals 3day crystal chunks, teapot farm, fish weekly
+					parametric crystalfly [weekly bosses] reputation
+				</Text>
+			</Card.Content>
+		</Card.Root>
+		<!-- Events card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Current Events</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<Text type="p"></Text>
+			</Card.Content>
+		</Card.Root>
+		<!-- To-do card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">To-do List</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<Text type="p">
+					Farmable today: thing thing thing thing summary: some more even more thing
+				</Text>
+			</Card.Content>
+		</Card.Root>
+		<!-- Farmable today card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Domain Rotation</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<Text type="p">talent materials, weapon materials + corresponding chars/weaps</Text>
+			</Card.Content>
+		</Card.Root>
+		<!-- Achievements card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Achievements</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div class="flex flex-row justify-between">
+					<Text type="p">Latest achievement:</Text>
+					<Text type="p">{mockAchievement.name}</Text>
+				</div>
+				<div class="flex flex-row justify-between mt-4">
+					<Text type="p">Overall progress:</Text>
+					<Text type="p">{achievementsDone}/{achievementsTotal}</Text>
+				</div>
+				<Progress value={(achievementsDone / achievementsTotal) * 100} class="mt-1.5"></Progress>
+			</Card.Content>
+			<Card.Footer class="flex justify-end">
+				<Button class="rounded-xl border-2 border-gray-600">Achievements</Button>
+			</Card.Footer>
+		</Card.Root>
+		<!-- Pity card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Pity</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div class="flex flex-row justify-between items-center">
+					<Text type="p">Character Banner</Text>
+					<div class="flex flex-row">
+						<Text type="p">
+							<div
+								class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03] mr-5"
+							>
+								{characterPity[0]}
+							</div>
+						</Text>
+						<Text type="p">
+							<div
+								class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03]"
+							>
+								{characterPity[1]}
+							</div>
+						</Text>
+					</div>
+				</div>
+				<div class="flex flex-row justify-between items-center mt-4">
+					<Text type="p">Weapon Banner</Text>
+					<div class="flex flex-row">
+						<Text type="p">
+							<div
+								class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03] mr-5"
+							>
+								{weaponPity[0]}
+							</div>
+						</Text>
+						<Text type="p">
+							<div
+								class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03]"
+							>
+								{weaponPity[1]}
+							</div>
+						</Text>
+					</div>
+				</div>
+				<div class="flex flex-row justify-between items-center mt-4">
+					<Text type="p">Standart Banner</Text>
+					<div class="flex flex-row">
+						<Text type="p">
+							<div
+								class="text-amber-500 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03] mr-5"
+							>
+								{standartPity[0]}
+							</div>
+						</Text>
+						<Text type="p">
+							<div
+								class="text-violet-400 w-14 h-14 flex justify-center items-center rounded-md bg-gray-300/[.03]"
+							>
+								{standartPity[1]}
+							</div>
+						</Text>
+					</div>
+				</div>
+			</Card.Content>
+			<Card.Footer class="flex justify-end">
+				<Button class="rounded-xl border-2 border-gray-600">Wish Counter</Button>
+			</Card.Footer>
+		</Card.Root>
+		<!-- Display card -->
+		<Card.Root class="text-white">
+			<Card.Header>
+				<!--TODO: Replace this with i18n key-->
+				<Card.Title>
+					<Text type="h4">Display</Text>
+				</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<Text type="p">char or weapon icon name info</Text>
+			</Card.Content>
+		</Card.Root>
+	</div>
+</div>