diff --git a/Frontend/public/media/featured/server.png b/Frontend/public/media/featured/server.png
new file mode 100644
index 0000000..e2dbb75
Binary files /dev/null and b/Frontend/public/media/featured/server.png differ
diff --git a/Frontend/src/app/(pages)/page.tsx b/Frontend/src/app/(pages)/page.tsx
index 1c9600a..c5022b9 100644
--- a/Frontend/src/app/(pages)/page.tsx
+++ b/Frontend/src/app/(pages)/page.tsx
@@ -1,3 +1,4 @@
+import FeaturedContent from "@/components/landing/featured-content";
 import Hero from "@/components/landing/hero";
 
 /**
@@ -8,6 +9,7 @@ import Hero from "@/components/landing/hero";
 const LandingPage = (): JSX.Element => (
 	<main>
 		<Hero />
+		<FeaturedContent />
 	</main>
 );
 export default LandingPage;
diff --git a/Frontend/src/app/components/landing/featured-content.tsx b/Frontend/src/app/components/landing/featured-content.tsx
new file mode 100644
index 0000000..74a73ca
--- /dev/null
+++ b/Frontend/src/app/components/landing/featured-content.tsx
@@ -0,0 +1,62 @@
+import { minecrafter } from "@/font/fonts";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+const FeaturedContent = (): JSX.Element => (
+	<div className="-translate-y-40 flex justify-center items-center">
+		<div className="grid grid-cols-2 gap-5">
+			<FeaturedItem
+				name="Player Lookup"
+				description="Id dolore elit mollit adipisicing adipisicing."
+				image="/media/test.avif"
+				href="/player"
+			/>
+			<FeaturedItem
+				name="Player Lookup"
+				description="Id dolore elit mollit adipisicing adipisicing."
+				image="/media/test.avif"
+				href="/player"
+			/>
+			<FeaturedItem
+				name="Player Lookup"
+				description="Id dolore elit mollit adipisicing adipisicing."
+				image="/media/test.avif"
+				href="/player"
+			/>
+			<FeaturedItem
+				name="Player Lookup"
+				description="Id dolore elit mollit adipisicing adipisicing."
+				image="/media/test.avif"
+				href="/player"
+			/>
+		</div>
+	</div>
+);
+
+const FeaturedItem = ({
+	name,
+	description,
+	image,
+	href,
+}: {
+	name: string;
+	description: string;
+	image: string;
+	href: string;
+}): JSX.Element => (
+	<Link
+		className={
+			"w-[19rem] h-80 flex flex-col justify-center items-center bg-[url('/media/featured/server.png')] bg-cover rounded-3xl text-center backdrop-blur-md hover:scale-[.99] transition-all transform-gpu"
+		}
+		href={href}
+	>
+		<h1
+			className={cn("text-3xl font-semibold text-white", minecrafter.className)}
+		>
+			{name}
+		</h1>
+		<h2 className="text-md max-w-[15rem]">{description}</h2>
+	</Link>
+);
+
+export default FeaturedContent;
diff --git a/Frontend/src/app/components/landing/hero.tsx b/Frontend/src/app/components/landing/hero.tsx
index 53cb0b6..d184037 100644
--- a/Frontend/src/app/components/landing/hero.tsx
+++ b/Frontend/src/app/components/landing/hero.tsx
@@ -3,7 +3,7 @@ import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 
 const Hero = (): JSX.Element => (
-	<div className="flex flex-col gap-4 justify-center items-center h-screen">
+	<div className="h-[85vh] flex flex-col gap-4 justify-center items-center pointer-events-none">
 		{/* Title */}
 		<h1
 			className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx
index 751d274..6a9be54 100644
--- a/Frontend/src/app/components/navbar.tsx
+++ b/Frontend/src/app/components/navbar.tsx
@@ -14,7 +14,7 @@ import Link from "next/link";
 const Navbar = (): JSX.Element => (
 	<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background">
 		{/* Left */}
-		<div className="flex gap-7 xs:gap-16 items-center">
+		<div className="flex gap-7 lg:gap-12 items-center transition-all transform-gpu">
 			{/* App Branding */}
 			<Link
 				className={cn(