diff --git a/Frontend/src/app/components/github-star-button.tsx b/Frontend/src/app/components/github-star-button.tsx
new file mode 100644
index 0000000..5c0a944
--- /dev/null
+++ b/Frontend/src/app/components/github-star-button.tsx
@@ -0,0 +1,58 @@
+import MinecraftButton from "@/components/minecraft-button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { StarIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { Suspense } from "react";
+
+const GitHubStarButton = async (): Promise<JSX.Element> => {
+	return (
+		<Link
+			href="https://github.com/Rainnny7/RESTfulMC"
+			rel="noopener noreferrer"
+			target="_blank"
+		>
+			<MinecraftButton className="flex gap-1.5 items-center group/star">
+				{/* Star Count */}
+				<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
+					<GitHubStarCount />
+				</Suspense>
+
+				<StarIcon
+					className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
+					width={22}
+					height={22}
+				/>
+				<span>Star on GitHub</span>
+			</MinecraftButton>
+		</Link>
+	);
+};
+
+/**
+ * The github star count component.
+ *
+ * @returns the star count jsx
+ */
+const GitHubStarCount = async (): Promise<JSX.Element> => {
+	const stars: number = await getStarCount(); // Get the repo star count
+	return (
+		<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
+	);
+};
+
+/**
+ * Get the amount of stars
+ * the repository has.
+ *
+ * @returns the star count
+ */
+const getStarCount = async (): Promise<number> => {
+	const response: Response = await fetch(
+		"https://api.github.com/repos/Rainnny7/RESTfulMC",
+		{ next: { revalidate: 300 } } // Revalidate every 5 minutes
+	);
+	const json: any = await response.json(); // Get the JSON response
+	return json.stargazers_count; // Return the stars
+};
+
+export default GitHubStarButton;
diff --git a/Frontend/src/app/components/github-star-count.tsx b/Frontend/src/app/components/github-star-count.tsx
deleted file mode 100644
index e0d2c32..0000000
--- a/Frontend/src/app/components/github-star-count.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * The github star count component.
- *
- * @returns the star count jsx
- */
-const GitHubStarCount = async (): Promise<JSX.Element> => {
-	const stars: number = await getStarCount(); // Get the repo star count
-	return (
-		<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
-	);
-};
-
-/**
- * Get the amount of stars
- * the repository has.
- *
- * @returns the star count
- */
-const getStarCount = async (): Promise<number> => {
-	const response: Response = await fetch(
-		"https://api.github.com/repos/Rainnny7/RESTfulMC",
-		{ next: { revalidate: 300 } } // Revalidate every 5 minutes
-	);
-	const json: any = await response.json(); // Get the JSON response
-	return json.stargazers_count; // Return the stars
-};
-
-export default GitHubStarCount;
diff --git a/Frontend/src/app/components/landing/hero.tsx b/Frontend/src/app/components/landing/hero.tsx
index 9b7f9be..7e0cf68 100644
--- a/Frontend/src/app/components/landing/hero.tsx
+++ b/Frontend/src/app/components/landing/hero.tsx
@@ -1,3 +1,4 @@
+import GitHubStarButton from "@/components/github-star-button";
 import MinecraftButton from "@/components/minecraft-button";
 import config from "@/config";
 import { minecrafter } from "@/font/fonts";
@@ -27,10 +28,15 @@ const Hero = (): JSX.Element => (
 		</div>
 
 		{/* Links */}
-		<div className="flex gap-10">
+		<div className="flex gap-5 xs:gap-10">
 			<Link href="/docs">
 				<MinecraftButton className="w-44 h-12">Get Started</MinecraftButton>
 			</Link>
+
+			{/* Star on Github <3 */}
+			<div className="md:hidden">
+				<GitHubStarButton />
+			</div>
 		</div>
 	</div>
 );
diff --git a/Frontend/src/app/components/minecraft-button.tsx b/Frontend/src/app/components/minecraft-button.tsx
index 56b662b..c12251f 100644
--- a/Frontend/src/app/components/minecraft-button.tsx
+++ b/Frontend/src/app/components/minecraft-button.tsx
@@ -31,7 +31,7 @@ const MinecraftButton = ({
 		className={cn(
 			"before:absolute before:-inset-x-5 before:rotate-90 before:w-9 before:h-1 before:bg-minecraft-green-1", // Left Green Bar
 			"after:absolute after:right-[-1.24rem] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar
-			"relative h-11 px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling
+			"relative h-full px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling
 			className
 		)}
 		variant="ghost"
diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx
index d41cd85..4428fdf 100644
--- a/Frontend/src/app/components/navbar.tsx
+++ b/Frontend/src/app/components/navbar.tsx
@@ -1,16 +1,12 @@
 "use client";
 
-import GitHubStarCount from "@/components/github-star-count";
-import MinecraftButton from "@/components/minecraft-button";
-import { Skeleton } from "@/components/ui/skeleton";
+import GitHubStarButton from "@/components/github-star-button";
 import config from "@/config";
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
-import { StarIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Suspense } from "react";
 
 /**
  * The navbar for the site.
@@ -68,25 +64,7 @@ const Navbar = (): JSX.Element => {
 			{/* Social Buttons - Right */}
 			<div className="hidden md:flex">
 				{/* Star on Github <3 */}
-				<Link
-					href="https://github.com/Rainnny7/RESTfulMC"
-					rel="noopener noreferrer"
-					target="_blank"
-				>
-					<MinecraftButton className="flex gap-1.5 items-center group/star">
-						{/* Star Count */}
-						<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
-							<GitHubStarCount />
-						</Suspense>
-
-						<StarIcon
-							className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
-							width={22}
-							height={22}
-						/>
-						<span>Star on GitHub</span>
-					</MinecraftButton>
-				</Link>
+				<GitHubStarButton />
 			</div>
 		</nav>
 	);