diff --git a/src/lib/components/ui/project/project.svelte b/src/lib/components/ui/project/project.svelte
index 1fe44e6..972e15e 100644
--- a/src/lib/components/ui/project/project.svelte
+++ b/src/lib/components/ui/project/project.svelte
@@ -17,9 +17,9 @@
 	export let donationUrl: string | undefined = undefined
 </script>
 
-<div class="flex flex-row mb-4">
+<div class="flex flex-col items-center md:items-start md:flex-row mb-4">
 	<div class={cn(
-		"mr-4 bg-accent rounded-lg h-56 w-56",
+		"mb-4 md:mr-4 md:mb-0 bg-accent rounded-lg h-56 w-56",
 		padImage ? "p-4" : "",
 	)}>
 		{#if image !== undefined}
@@ -72,5 +72,7 @@
 		<div class="prose dark:prose-invert mt-2">
 			<slot></slot>
 		</div>
+
+		<hr class="mt-4 mb-2 md:hidden" />
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f61ad24..ebabc59 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -243,6 +243,8 @@ ${Prism.highlight(mavenCode, Prism.languages.xml, "xml")}
 			Please note that we are not responsible for the projects linked to below, and you use them at your own risk.
 		</p>
 
+		<hr class="mt-4 mb-5 md:hidden" />
+
 		<Project
 			name="LilyBot"
 			image="/projects/lilybot.png"