diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index cc79255..41f351e 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -5,7 +5,7 @@ import { Icon } from "@iconify/react";
 
 export default function Header() {
 	return (
-		<div className="fixed w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
+		<div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
 			<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400">
 				TomodachiShare
 			</Link>
@@ -14,26 +14,17 @@ export default function Header() {
 
 			<ul className="flex gap-3 items-center">
 				<li>
-					<Link
-						href={"/random"}
-						className="flex justify-center items-center p-1.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400"
-					>
+					<Link href={"/random"} className="button !p-1.5">
 						<Icon icon="mdi:dice-3" fontSize={28} />
 					</Link>
 				</li>
 				<li>
-					<Link
-						href={"/submit"}
-						className="flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400"
-					>
+					<Link href={"/submit"} className="button">
 						Submit
 					</Link>
 				</li>
 				<li>
-					<Link
-						href={"/login"}
-						className="flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400"
-					>
+					<Link href={"/login"} className="button">
 						Login
 					</Link>
 				</li>
diff --git a/src/app/globals.css b/src/app/globals.css
index 9cbd15d..111c5bf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,3 +11,7 @@ body {
 	background-position: 0 0, 10px 10px;
 	background-size: 20px 20px;
 }
+
+.button {
+	@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 011ff20..7cbef6f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
 }>) {
 	return (
 		<html lang="en">
-			<body className={`${lexend.className} antialiased flex flex-col items-center`}>
+			<body className={`${lexend.className} antialiased flex flex-col items-center py-32`}>
 				<Header />
 				{children}
 			</body>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..6c6bd67
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+export default function NotFound() {
+	return (
+		<div className="flex flex-col items-center">
+			<h2 className="text-7xl font-black">404</h2>
+			<p className="text-xl">Page not found</p>
+			<Link href="/" className="button mt-8">
+				Return Home
+			</Link>
+		</div>
+	);
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c5deecf..dc83540 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 export default function Page() {
 	return (
-		<div className="max-w-5xl grid grid-cols-3 gap-4 py-32">
+		<div className="max-w-5xl grid grid-cols-3 gap-4">
 			{[...Array(3)].map(() => (
 				<div className="bg-zinc-50 rounded-3xl border-2 border-amber-300 shadow-lg p-3 transition hover:scale-105">
 					<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />
