diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4cc5ea2..80e90d7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,3 @@
-// TODO: Add 404 page
-
 import type { Metadata } from 'next'
 
 import Footer from '@/components/footer'
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..37ed782
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,30 @@
+import { buttonVariants } from '@/components/ui/button'
+import Content from '@/components/ui/content'
+import Heading from '@/components/ui/heading'
+import { LINK } from '@/types/enums/Link'
+import { cn } from '@/utils'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="relative h-full bg-ghost pt-header dark:bg-dark">
+      <Image
+        alt="Background"
+        className="-z-5 object-cover object-center"
+        fill
+        sizes="100vw"
+        src="/hero-bg.svg"
+      />
+      <Content className="relative flex h-full flex-col items-center justify-center gap-3 text-center md:gap-5">
+        <Heading>Page Not Found</Heading>
+        <p className="text-lg md:text-xl">
+          The page you were looking for does not exists.
+        </p>
+        <Link className={cn(buttonVariants())} href={LINK.index}>
+          Return Home
+        </Link>
+      </Content>
+    </div>
+  )
+}
diff --git a/src/components/sections/hero/hero.tsx b/src/components/sections/hero/hero.tsx
index 8ba18bc..dbfdd93 100644
--- a/src/components/sections/hero/hero.tsx
+++ b/src/components/sections/hero/hero.tsx
@@ -27,7 +27,7 @@ const Hero: FC<HeroProps> = ({ className, ...props }) => {
         src="/hero-bg.svg"
       />
       <Content
-        className="z-5 relative flex flex-col items-center justify-center text-center"
+        className="relative flex flex-col items-center justify-center text-center"
         size="tight"
       >
         <article>