diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.module.scss b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.module.scss
deleted file mode 100644
index e095926e..00000000
--- a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.container {
-	background: radial-gradient(50% 50% at 50% 50%, #2c1909 58.33%, #422810 100%),
-		#aa5315;
-}
-
-.title {
-	text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
-}
-
-@media (min-width: 640px) {
-	.container {
-		background-image: linear-gradient(
-			180deg,
-			#432810 0.32%,
-			#2b1809 52.42%,
-			#442911 100%
-		);
-	}
-}
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.tsx b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.tsx
index caade3eb..30cc3a02 100644
--- a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.tsx
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQ.tsx
@@ -1,8 +1,22 @@
+import Image from "next/image";
+
 import { getQuestions } from "./getQuestions";
-import FAQAccordion from "./FAQAccordion";
+import FAQAccordionMobile from "./FAQAccordionMobile";
+import FAQAccordionDesktop from "./FAQAccordionDesktop";
 
 import { PortableText } from "@portabletext/react";
-import styles from "./FAQ.module.scss";
+import sprite from "./assets/sprite.png";
+import organizerTitle from "./assets/organizer-title.png";
+
+export interface FAQAccordion {
+	faq: FAQ[];
+}
+
+export interface FAQ {
+	_key: string;
+	question: JSX.Element;
+	answer: JSX.Element;
+}
 
 const FAQ = async () => {
 	const questions = await getQuestions();
@@ -13,16 +27,39 @@ const FAQ = async () => {
 	}));
 
 	return (
-		<section
-			className={`${styles.container} rounded-[500rem/20rem] py-24 flex justify-center bg-no-repeat bg-cover bg-center bg-top`}
-		>
-			<div className="relative flex flex-col w-4/5 pb-7">
-				<h2
-					className={`${styles.title} my-6 font-display sm:text-[3rem] text-[#fffce2] text-4xl text-center`}
-				>
-					FAQ
+		<section className="flex justify-center bg-no-repeat bg-cover bg-top mt-20 lg:mt-40">
+			<div className="relative flex flex-col w-4/5 pb-7 justify-center">
+				<h2 className="my-6 font-display text-white text-4xl sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl text-center">
+					Frequently Asked Questions
 				</h2>
-				<FAQAccordion faq={faq} />
+				<div className="mt-8 lg:mt-0 lg:flex lg:gap-6 lg:items-center lg:justify-center">
+					<div className="lg:flex lg:gap-3 lg:gap-[40px] lg:items-center">
+						<div className="flex justify-center items-center h-fit">
+							<Image
+								src={sprite}
+								alt="Wise anteater"
+								className={`
+									h-fit mt-[-30px] w-[250px] duration-300
+									sm:w-[300px] sm:min-w-[300px]
+									md:w-[400px] md:min-w-[400px]
+									lg:w-[240px] lg:min-w-[240px]
+									xl:w-[300px] xl:min-w-[300px]
+								`}
+							/>
+							<Image
+								src={organizerTitle}
+								alt="Wise anteater title"
+								className={`
+									hidden absolute lg:block h-fit duration-300
+									w-40 md:w-48 lg:w-60 xl:w-72
+									sm:top-[270px] md:top-[290px] lg:top-[330px] xl:top-[380px]
+								`}
+							/>
+						</div>
+						<FAQAccordionDesktop faq={faq} />
+						<FAQAccordionMobile faq={faq} />
+					</div>
+				</div>
 			</div>
 		</section>
 	);
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordion.tsx b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordion.tsx
deleted file mode 100644
index 814e1490..00000000
--- a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordion.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Root, Item, Trigger, Content } from "@/lib/components/Accordion";
-
-interface FAQAccordion {
-	faq: {
-		_key: string;
-		question: JSX.Element;
-		answer: JSX.Element;
-	}[];
-}
-
-const FAQAccordion: React.FC<FAQAccordion> = ({ faq }) => {
-	return (
-		<Root className="font-body" type="single" collapsible>
-			{faq.map(({ _key, question, answer }) => (
-				<Item key={_key} value={_key}>
-					<Trigger className="sm:!text-[1.5rem]">{question}</Trigger>
-					<Content>{answer}</Content>
-				</Item>
-			))}
-		</Root>
-	);
-};
-
-export default FAQAccordion;
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionDesktop.tsx b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionDesktop.tsx
new file mode 100644
index 00000000..a221b090
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionDesktop.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+
+import ListItemButton from "./components/ListItemButton";
+import TriangleIcon from "./components/TriangleIcon";
+import { FAQAccordion, FAQ } from "./FAQ";
+
+import SpeechDesktop from "./assets/speech-desktop.svg";
+
+const FAQAccordionDesktop: React.FC<FAQAccordion> = ({ faq }) => {
+	const faqGroup1 = faq.slice(0, 8);
+	const faqGroup2 = faq.slice(8);
+
+	const [page1Selected, setPage1Selected] = useState<boolean>(true);
+
+	const [focusedQuestion, setFocusedQuestion] = useState<null | FAQ>(null);
+
+	return (
+		<div className="flex flex-1 justify-center lg:h-auto mt-16 lg:mt-8 mb-[-250px] lg:mb-0">
+			{/* Desktop View */}
+			<Image
+				src={SpeechDesktop}
+				alt="Dialogue box background"
+				className="hidden lg:block h-fit lg:max-w-[630px] lg:h-[310px] xl:max-w-[775px] xl:h-[350px]"
+			/>
+			<div className="hidden lg:block absolute lg:w-[555px] xl:w-[685px] lg:text-[.85rem] xl:text-[1rem] mt-3">
+				{/* Page 1 focused */}
+				<div
+					className={`absolute w-full ${
+						page1Selected && !focusedQuestion
+							? "z-50"
+							: "hidden pointer-events-none"
+					}`}
+				>
+					{faqGroup1.map((F) => (
+						<ListItemButton
+							key={F._key}
+							onClick={() => setFocusedQuestion(F)}
+							text={F.question}
+							inverted={false}
+							className="mb-0 py-[2px]"
+						/>
+					))}
+					<div className="flex justify-end w-full ms-3">
+						<button
+							type="button"
+							onClick={() => {
+								setPage1Selected(false);
+							}}
+							className={`flex items-center opacity-100 hover:bg-white hover:text-black p-[1px] px-[3px] duration-200 group`}
+						>
+							Page 1/2
+							<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
+							<TriangleIcon
+								className={`ms-2 absolute hidden group-hover:block duration-200 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+								dark
+							/>
+							<TriangleIcon
+								className={`ms-2 absolute group-hover:hidden duration-200 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+							/>
+						</button>
+					</div>
+				</div>
+
+				{/* Page 2 focused */}
+				<div
+					className={`absolute ${
+						!page1Selected && !focusedQuestion
+							? "z-50"
+							: "hidden pointer-events-none"
+					}`}
+				>
+					{faqGroup2.map((F) => (
+						<ListItemButton
+							key={F._key}
+							onClick={() => setFocusedQuestion(F)}
+							text={F.question}
+							inverted={false}
+							className="mb-0 py-[2px]"
+						/>
+					))}
+					<div className="flex justify-end ms-3 w-full">
+						<button
+							type="button"
+							onClick={() => {
+								setPage1Selected(true);
+							}}
+							className={`absolute flex items-center mt-4 group hover:bg-white hover:text-black p-[1px] px-[3px] xl:mt-4 duration-200 `}
+						>
+							<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
+							<TriangleIcon
+								className={`ms-2 absolute hidden group-hover:block duration-200 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+								dark
+							/>
+							<TriangleIcon
+								className={`ms-2 absolute group-hover:hidden duration-200 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+							/>
+							Page 2/2
+						</button>
+					</div>
+				</div>
+
+				{/* Question is focused. */}
+				<div
+					className={`${
+						focusedQuestion ? "z-50" : "hidden pointer-events-none"
+					} absolute lg:h-[250px] xl:h-[285px]`}
+				>
+					<div>
+						<ListItemButton
+							onClick={() => setFocusedQuestion(null)}
+							className="mb-2 py-[2px]"
+							text={focusedQuestion?.question}
+							rotate="rotate-90"
+							inverted
+						/>
+
+						<p className="ms-2">{focusedQuestion?.answer}</p>
+					</div>
+
+					<div className="absolute bottom-0">
+						<ListItemButton
+							onClick={() => setFocusedQuestion(null)}
+							className="py-[2px] min-w-[175px] xl:min-w-[200px]"
+							text="Ask another question"
+							rotate="rotate-180"
+							inverted={false}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default FAQAccordionDesktop;
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionMobile.tsx b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionMobile.tsx
new file mode 100644
index 00000000..ee149a98
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/FAQAccordionMobile.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+
+import ListItemButton from "./components/ListItemButton";
+import { FAQAccordion, FAQ } from "./FAQ";
+
+import SpeechMobile from "./assets/speech-mobile.svg";
+
+const FAQAccordionMobile: React.FC<FAQAccordion> = ({ faq }) => {
+	const [focusedQuestion, setFocusedQuestion] = useState<null | FAQ>(null);
+
+	return (
+		<div className="flex flex-1 justify-center lg:h-auto mt-60 lg:mt-8 mb-[-250px] lg:mb-0 sm:text-lg md:text-xl">
+			{/* Changes size of parent component */}
+			<div
+				className={`z-0 ${
+					focusedQuestion ? "h-[520px]" : "h-[965px] sm:h-[940px] md:h-[1030px]"
+				} duration-200 transition-transform lg:hidden`}
+			/>
+			<div className="relative flex justify-center lg:hidden">
+				<Image
+					src={SpeechMobile}
+					alt="Dialogue box background"
+					className={`${
+						focusedQuestion
+							? "mt-[-160px] sm:mt-[-120px] sm:max-h-[620px]"
+							: "mt-[-275px] md:mt-[-300px]"
+					} min-w-[450px] sm:min-w-[600px] md:min-w-[750px] object-fill`}
+					layout="responsive"
+				/>
+
+				{/* No question is focused. */}
+				<div
+					className={`${
+						focusedQuestion ? "hidden pointer-events-none" : "z-50"
+					} duration-200 w-[325px] sm:w-[450px] md:w-[560px] absolute mx-4 mt-2 h-fit`}
+				>
+					<div>
+						{faq.map((F) => (
+							<ListItemButton
+								key={F._key}
+								onClick={() => setFocusedQuestion(F)}
+								text={F.question}
+								className="md:p-2"
+								inverted={false}
+							/>
+						))}
+					</div>
+				</div>
+
+				{/* Question is focused. */}
+				<div
+					className={`${
+						focusedQuestion ? "z-50" : "hidden pointer-events-none"
+					} duration-200 absolute w-[325px] sm:w-[450px] md:w-[570px] h-[350px] sm:h-[325px] mt-2 sm:mt-8`}
+				>
+					<ListItemButton
+						onClick={() => setFocusedQuestion(null)}
+						className="mb-3"
+						text={focusedQuestion?.question}
+						rotate="rotate-90"
+						inverted
+					/>
+
+					<p>{focusedQuestion?.answer}</p>
+
+					<div className="-bottom-2 absolute">
+						<ListItemButton
+							onClick={() => setFocusedQuestion(null)}
+							text="Ask another question"
+							rotate="rotate-180"
+							inverted={false}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default FAQAccordionMobile;
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/assets/organizer-title.png b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/organizer-title.png
new file mode 100644
index 00000000..8aba8be7
Binary files /dev/null and b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/organizer-title.png differ
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-desktop.svg b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-desktop.svg
new file mode 100644
index 00000000..4bab9bb8
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-desktop.svg
@@ -0,0 +1,4 @@
+<svg width="1329" height="527" viewBox="0 0 1329 527" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<path d="M66.7417 414V23.5H1326.5V488.5H108.408H107.926L107.478 488.679L23.0864 522.497L66.5595 414.937L66.7417 414.486V414Z" fill="white" stroke="white" stroke-width="5"/>
+<path d="M48.1718 393V2.5H1307.93V467.5H89.838H89.3557L88.9081 467.679L4.51654 501.497L47.9897 393.937L48.1718 393.486V393Z" fill="#0C071B" stroke="white" stroke-width="5"/>
+</svg>
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-mobile.svg b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-mobile.svg
new file mode 100644
index 00000000..423cea1c
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/speech-mobile.svg
@@ -0,0 +1,10 @@
+<svg id="svg2" viewBox="0 0 500 670" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+  <desc>Source: openclipart.org/detail/209545</desc>
+  <defs>
+    <radialGradient id="radialGradient50" gradientUnits="userSpaceOnUse" cy="13.127" cx="23.404" gradientTransform="matrix(9.477364, 10.273408, 9.367074, -10.407683, -215.77565, 326.421863)" r="14.286">
+      <stop id="stop52" style="stop-color: #ff0008" offset="0"></stop>
+      <stop id="stop54" style="stop-color: #800005" offset="1"></stop>
+    </radialGradient>
+  </defs>
+  <path d="M 261.585 142.94 L 456.424 142.94 L 456.424 537.561 L 57.578 537.561 L 45.101 537.561 L 45.101 474.35 L 45.101 142.94 L 236.459 142.94 L 237.456 142.94 L 238.064 142.108 L 248.77 127.503 L 260.006 142.146 L 260.617 142.94 L 261.585 142.94 Z" fill="#0C071B" stroke="white" stroke-width="3" style=""></path>
+</svg>
\ No newline at end of file
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/assets/sprite.png b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/sprite.png
new file mode 100644
index 00000000..1926412a
Binary files /dev/null and b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/sprite.png differ
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/assets/triangle-dark.svg b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/triangle-dark.svg
new file mode 100644
index 00000000..9aed67df
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/triangle-dark.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.8485 9.5L0.728523 18.5933L0.728523 0.406734L18.8485 9.5Z" fill="black"/>
+</svg>
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/assets/triangle.svg b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/triangle.svg
new file mode 100644
index 00000000..96c26771
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/assets/triangle.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7L0 13.0622L0 0.937822L12 7Z" fill="white"/>
+</svg>
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/components/ListItemButton.tsx b/apps/site/src/app/(main)/(home)/sections/FAQ/components/ListItemButton.tsx
new file mode 100644
index 00000000..9ce04a3c
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/components/ListItemButton.tsx
@@ -0,0 +1,43 @@
+import TriangleIcon from "./TriangleIcon";
+
+export default function ListItemButton({
+	onClick,
+	text,
+	className,
+	rotate,
+	inverted,
+}: {
+	onClick: () => void;
+	text: string | React.ReactNode;
+	className?: string;
+	rotate?: string;
+	inverted: boolean;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={`flex gap-3 duration-200 p-[5px] lg:p-[4px] xl:p-[4px] group ${
+				inverted ? "bg-white" : "hover:bg-white"
+			} ${className}`}
+		>
+			<TriangleIcon
+				className={`sm:w-4 sm:h-4 md:w-5 md:h-5 xl:w-5 xl:h-5 mt-2 sm:mt-1 lg:mt-0 xl:mt-1 visible group-hover:hidden ${rotate}`}
+				dark={inverted}
+			/>
+			<TriangleIcon
+				className={`sm:w-4 sm:h-4 md:w-5 md:h-5 xl:w-5 xl:h-5 mt-2 sm:mt-1 lg:mt-0 xl:mt-1 hidden group-hover:block ${rotate}`}
+				dark
+			/>
+			<p
+				className={`w-fit font-light text-left mb-0 ${
+					inverted
+						? "text-[var(--color-black)]"
+						: "text-white group-hover:text-[var(--color-black)]"
+				}`}
+			>
+				{text}
+			</p>
+		</button>
+	);
+}
diff --git a/apps/site/src/app/(main)/(home)/sections/FAQ/components/TriangleIcon.tsx b/apps/site/src/app/(main)/(home)/sections/FAQ/components/TriangleIcon.tsx
new file mode 100644
index 00000000..b27d86fe
--- /dev/null
+++ b/apps/site/src/app/(main)/(home)/sections/FAQ/components/TriangleIcon.tsx
@@ -0,0 +1,23 @@
+export default function TriangleIcon({
+	className,
+	dark = false,
+}: {
+	className?: string;
+	dark?: boolean;
+}) {
+	return (
+		<svg
+			width="12"
+			height="14"
+			viewBox="0 0 12 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={className}
+		>
+			<path
+				d="M12 7L0 13.0622L0 0.937822L12 7Z"
+				fill={dark ? "black" : "white"}
+			/>
+		</svg>
+	);
+}