diff --git a/components/Hero/Hero.js b/components/Hero/Hero.js
new file mode 100644
index 0000000..8363a8c
--- /dev/null
+++ b/components/Hero/Hero.js
@@ -0,0 +1,68 @@
+import Image from 'next/image';
+import n2ds from '/public/assets/images/n2ds.png';
+
+import Title from '../Title/Title';
+import Caption from '../Caption/Caption';
+import Button from '../Button/Button';
+
+import styles from './Hero.module.css';
+
+import { DiscordLogo, GithubLogo, Heart } from 'phosphor-react';
+
+export default function Hero() {
+	return (
+		<div className={styles.hero}>
+			<div className={styles.info}>
+				<h3 className={styles.subtitle}>Game servers</h3>
+				<Title element={'h1'}>Recreated.</Title>
+				<Caption>Pretendo is a free and open source replacement for Nintendos servers for both the 3DS and Wii U, allowing online connectivity for all, even after the original servers are discontinued</Caption>
+				<div className={styles.buttons}>
+					<a href='#showcase'>
+						<Button isPrimary={true}>Read more</Button>
+					</a>
+					<a href='https://discord.gg/pretendo' aria-label='A link to our Discord server'>
+						<Button isIcon={true}><DiscordLogo size={32} weight="fill" /></Button>
+					</a>
+					<a href='https://github.com/pretendonetwork' aria-label='A link to our GitHub organization'>
+						<Button isIcon={true}><GithubLogo size={32} weight="fill" /></Button>
+					</a>
+					<a href='/account/upgrade' aria-label='A link to our account upgrade page'>
+						<Button isIcon={true}><Heart size={32} weight="fill" /></Button>
+					</a>
+
+				</div>
+			</div>
+			<div className={styles.images}>
+				<div className={styles.lightCircle}>
+					<svg alt="" xmlns="http://www.w3.org/2000/svg" width="839.371" height="893.406" viewBox="0 0 839.371 893.406">
+						<g id="deco" transform="translate(-1064.958 -142.958)">
+							<g id="Ellipse_12" data-name="Ellipse 12" transform="translate(1314 265)" fill="none" stroke="#9d6ff3" strokeWidth="26">
+								<circle cx="56" cy="56" r="56" stroke="none"></circle>
+								<circle cx="56" cy="56" r="69" fill="none"></circle>
+							</g>
+							<g id="Ellipse_22" data-name="Ellipse 22" transform="translate(1361 771)" fill="none" stroke="#59c9a5" strokeWidth="26">
+								<circle cx="77" cy="77" r="77" stroke="none"></circle>
+								<circle cx="77" cy="77" r="90" fill="none"></circle>
+							</g>
+							<g id="Ellipse_13" data-name="Ellipse 13" transform="translate(1801.405 273.601) rotate(1)" fill="none" stroke="#9d6ff3" strokeWidth="26">
+								<circle cx="23" cy="23" r="23" stroke="none"></circle>
+								<circle cx="23" cy="23" r="36" fill="none"></circle>
+							</g>
+							<g id="Ellipse_23" data-name="Ellipse 23" transform="matrix(0.839, -0.545, 0.545, 0.839, 1651.184, 609.237)" fill="none" stroke="#25224f" strokeWidth="26">
+								<circle cx="78.5" cy="78.5" r="78.5" stroke="none"></circle>
+								<circle cx="78.5" cy="78.5" r="91.5" fill="none"></circle>
+							</g>
+							<circle className={styles.animateDot} id="Ellipse_15" data-name="Ellipse 15" cx="23" cy="23" r="23" transform="translate(1586.473 353) rotate(-45)" fill="#9d6ff3"></circle>
+							<ellipse className={styles.animateDot} id="Ellipse_21" data-name="Ellipse 21" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1588.958 188.514) rotate(-45)" fill="#9d6ff3"></ellipse>
+							<ellipse id="Ellipse_25" data-name="Ellipse 25" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1143.958 1021.514) rotate(-45)" fill="#9d6ff3"></ellipse>
+							<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1064.958 158.514) rotate(-45)" fill="#9d6ff3"></ellipse>
+							<circle className={styles.animateDot} id="Ellipse_16" data-name="Ellipse 16" cx="23" cy="23" r="23" transform="translate(1169.473 524) rotate(-45)" fill="#59c9a5"></circle>
+						</g>
+					</svg>
+
+					<Image className={styles.n2ds} src={n2ds} alt="" />
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/components/Hero/Hero.module.css b/components/Hero/Hero.module.css
new file mode 100644
index 0000000..852633f
--- /dev/null
+++ b/components/Hero/Hero.module.css
@@ -0,0 +1,89 @@
+.hero {
+	display: grid;
+	grid-template-columns: 3fr 2fr;
+	align-items: center;
+}
+
+.subtitle {
+	font-weight: 300;
+	font-size: 2rem;
+	margin: 0;
+	margin-bottom: -0.75rem;
+	color: var(--text-shade-3);
+}
+
+.buttons {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: max-content;
+	gap: 1rem;
+	margin-top: 2.5rem;
+}
+
+
+.images .lightCircle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--accent-shade-3);
+	border-radius: 50%;
+	width: 512px;
+	height: 512px;
+}
+
+.images .lightCircle::before {
+	content: '';
+	position: absolute;
+	background: var(--bg-shade-0);
+	width: 2048px;
+	height: 2048px;
+	bottom: 0;
+	left: 0;
+	border-radius: 50%;
+	z-index: -1;
+}
+
+.images .lightCircle .n2ds {
+	transform: translateX(-7.5%);
+}
+
+.images svg {
+	position: absolute;
+	top: -128px;
+}
+
+.animateDot {
+	animation: dotAnimation 10s infinite;
+}
+@keyframes dotAnimation {
+	0% {
+		cx: 0;
+		cy: 0;
+	}
+	50% {
+		cx: 10px;
+		cy: 10px;
+	}
+	100% {
+		cx: 0;
+		cy: 0;
+	}
+}
+
+
+@media screen and (max-width: 1500px) {
+	.images {
+		transform: scale(0.75);
+	}
+}
+
+@media screen and (max-width: 1024px) {
+	.hero {
+		grid-template-columns: 1fr;
+	}
+
+	.images {
+		display: none;
+	}
+}
diff --git a/pages/index.js b/pages/index.js
index 107ba79..2ad59c0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,6 +5,7 @@ import Title from '../components/Title/Title';
 import Section from '../components/Section/Section';
 import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection';
 import Faq from '../components/Faq/Faq';
+import Hero from '../components/Hero/Hero';
 
 import Image from 'next/image';
 
@@ -16,6 +17,7 @@ import juxtImage from '../public/assets/images/showcase/juxt.png';
 import networkImage from '../public/assets/images/showcase/network.png';
 import pcmouseImage from '../public/assets/images/showcase/pcmouse.png';
 import wiiuchatImage from '../public/assets/images/showcase/wiiuchat.png';
+import Caption from '../components/Caption/Caption';
 
 const showcaseImages = {
 	juxt: juxtImage,
@@ -38,7 +40,16 @@ export default function Home({ locale }) {
 	const router = useRouter();
 	return (
 		<main>
+			<Section>
+				<Hero />
+			</Section>
 			<div id="showcase">
+				<Section className={styles.showcaseSection}>
+					<Title>What we make.</Title>
+					<Caption>
+						Our project has many components. Here are some of them.
+					</Caption>
+				</Section>
 				{locale.showcase.map((element, i) => {
 					return (
 						<ShowcaseSection
@@ -74,12 +85,12 @@ export default function Home({ locale }) {
 						</Button>
 					</div>
 				</Section>
-				<Section>
-					<Title id="faq">Frequently Asked Questions.</Title>
-					<p className={styles.caption}>{locale.faq.text}</p>
-					<Faq questionObject={locale.faq.QAs} />
-				</Section>
 			</div>
+			<Section>
+				<Title id="faq">{locale.faq.title}</Title>
+				<p className={styles.caption}>{locale.faq.text}</p>
+				<Faq questionObject={locale.faq.QAs} />
+			</Section>
 		</main>
 	);
 }
diff --git a/pages/index.module.css b/pages/index.module.css
index a2798eb..3c28c94 100644
--- a/pages/index.module.css
+++ b/pages/index.module.css
@@ -5,6 +5,22 @@
 	margin: 1.5rem 0;
 }
 
+.showcaseSection {
+	position: relative;
+	padding-bottom: 0;
+}
+
+.showcaseSection::after {
+	content: "";
+	width: 400vw;
+	height: calc(100% + 256px);
+	margin-left: -50vw;
+	background: linear-gradient(0deg, rgba(19, 22, 36, 0) 0%, var(--bg-shade-0) 100%);
+	position: absolute;
+	top: 48px;
+	z-index: -1;
+}
+
 .showcaseTail {
 	display: flex;
 	align-items: center;