diff --git a/src/app/controllers/useScroll.js b/src/app/controllers/useScroll.js
index a325cc84..3546e426 100644
--- a/src/app/controllers/useScroll.js
+++ b/src/app/controllers/useScroll.js
@@ -20,7 +20,6 @@ function useScroll() {
 				behavior: "smooth",
 			});
 		}
-
 		setScrollableElements(document.getElementsByClassName("wait"));
 		window.addEventListener("scroll", pageScroll);
 		pageScroll();
diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/faq/down_carat.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/faq/down_carat.svg
new file mode 100644
index 00000000..988e8d9d
--- /dev/null
+++ b/src/app/pages/Designathons/Designathon24/assets/graphics/faq/down_carat.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="m0 0h100v100h-100z"/><path d="m16 34 34 34 34-34" stroke="#F84E72" stroke-width="24"/></g></svg>
\ No newline at end of file
diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss
index deabbb8a..cbca777e 100644
--- a/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss
@@ -1,32 +1,112 @@
 .container {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: 40px;
+	position: relative;
+	background-color: var(--des24-cream);
+	color: var(--des24-black);
 
-	@media screen and (min-width: 900px) {
-		grid-template-columns: 240px 1fr;
+	padding: 5rem 2rem;
+
+	@media screen and (min-width: 768px) {
+		padding: 6rem 5rem;
 	}
 
-	@media screen and (min-width: 1000px) {
-		grid-template-columns: 300px 1fr;
+	.heading {
+		color: var(--des24-hot-pink);
+		font-size: 3rem;
+		font-weight: 700;
+		margin-bottom: 2rem;
+
+		@media screen and (min-width: 640px) {
+			font-size: 5rem;
+			margin-bottom: 4rem;
+		}
+
+		@media screen and (min-width: 1280px) {
+			font-size: 6rem;
+		}
 	}
 
-	& .question {
+	.qa_container {
 		display: grid;
-		cursor: pointer;
-		grid-template-columns: auto 1fr;
-		margin: 8px;
-		padding: 24px;
-		border-radius: 12px;
-		background-color: white;
-		transition: background-color 250ms;
-
-		&.opened {
-			border: 2px solid var(--silver);
+		grid-template-columns: 1fr;
+		gap: 1.5rem;
+
+		@media screen and (min-width: 768px) {
+			gap: 3rem;
 		}
 
-		&:hover {
-			background-color: var(--silver);
+		.qa_item {
+			display: flex;
+			flex-direction: column;
+			cursor: pointer;
+			border-radius: 12px;
+
+			.question {
+				display: flex;
+
+				font-size: 1.5rem;
+				cursor: pointer;
+
+				@media screen and (min-width: 768px) {
+					font-size: 2rem;
+				}
+			}
+
+			.down_carat {
+				width: fit-content;
+				height: 1rem;
+
+				margin: auto 0;
+				margin-right: 1rem;
+
+				cursor: "pointer";
+
+				@media screen and (min-width: 768px) {
+					height: 2rem;
+				}
+			}
 		}
 	}
 }
+
+.answer_tag {
+	margin: 1.25rem 0 0;
+	padding: 1rem;
+	cursor: pointer;
+
+	background-color: #ffe5e5;
+
+	animation: fadeIn 0.5s ease-in;
+
+	font-size: 1rem;
+	line-height: 1.5rem;
+
+	border-left: 2.5rem solid var(--des24-peach);
+	border-radius: 0.25rem;
+	box-shadow: 0px 4px 6px 2px #00000030;
+
+	p {
+		line-height: 1.5rem;
+
+		@media screen and (min-width: 768px) {
+			line-height: 2.5rem;
+		}
+	}
+
+	@media screen and (min-width: 768px) {
+		padding: 2rem;
+
+		font-size: 1.25rem;
+		line-height: 2.5rem;
+
+		border-left: 5rem solid var(--des24-peach);
+	}
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx
index 97355707..5d161a42 100644
--- a/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx
+++ b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx
@@ -1,15 +1,15 @@
-import { Text } from "app/components";
-import { Section, Icon } from "app/Symbols";
-import clsx from "clsx";
-import { useCallback, useState } from "react";
 import cn from "./FAQ.module.scss";
 
+import { useCallback, useState } from "react";
+
+import down_carat from "../../assets/graphics/faq/down_carat.svg";
+
 const FAQ = () => {
 	return (
-		<Section id="s-faq">
-			<Text size="XL">FAQ</Text>
+		<div id="s-faq">
 			<div className={cn.container}>
-				<div className="spaceChildren">
+				<h2 className={cn.heading}>FAQ</h2>
+				{/* <div className="spaceChildren">
 					<Text style={{ lineHeight: "1.4em" }}>
 						Join the live conversation on the{" "}
 						<a
@@ -22,8 +22,9 @@ const FAQ = () => {
 						</a>{" "}
 						for more help!
 					</Text>
-				</div>
-				<div style={{ marginTop: "-16px" }} className="spaceChildrenSmall">
+				</div> */}
+
+				<div className={cn.qa_container}>
 					{[
 						{
 							q: "Why should I join?",
@@ -32,9 +33,10 @@ const FAQ = () => {
 						{
 							q: "Who can attend?",
 							a: (
-								<Text className="color gray">
-									Any undergraduate student within the United States (with an
-									associated institutional email) is able to{" "}
+								<p>
+									Any undergraduate student within the United
+									States (with an associated institutional
+									email) is able to{" "}
 									<a
 										target="_blank"
 										rel="noopener noreferrer"
@@ -45,15 +47,15 @@ const FAQ = () => {
 									>
 										sign up
 									</a>{" "}
-									and attend. If you do not qualify, you will not be allowed to
-									participate in the event.
-								</Text>
+									and attend. If you do not qualify, you will
+									not be allowed to participate in the event.
+								</p>
 							),
 						},
 						{
 							q: "How do I sign up?",
 							a: (
-								<Text className="color gray">
+								<p>
 									Apply through our{" "}
 									<a
 										target="_blank"
@@ -65,7 +67,7 @@ const FAQ = () => {
 									>
 										Participant Sign-up Form.
 									</a>
-								</Text>
+								</p>
 							),
 						},
 						{
@@ -79,7 +81,7 @@ const FAQ = () => {
 						{
 							q: "When is the registration deadline?",
 							a: (
-								<Text className="color gray">
+								<p>
 									Our{" "}
 									<a
 										target="_blank"
@@ -91,19 +93,22 @@ const FAQ = () => {
 									>
 										participant sign-up form
 									</a>{" "}
-									has been extended until February 19th at 11:59pm (PST)
-								</Text>
+									has been extended until February 19th at
+									11:59pm (PST)
+								</p>
 							),
 						},
 						{
 							q: "How do I prepare?",
 							a: (
-								<Text className="color gray">
-									During the event, we will be hosting workshops for anyone new
-									to design thinking or the design process. We highly encourage
-									getting the hang of Figma, Sketch, Adobe XD, or the
-									prototyping tool of your choice. You are also free to look
-									through our Design at UCI{" "}
+								<p>
+									During the event, we will be hosting
+									workshops for anyone new to design thinking
+									or the design process. We highly encourage
+									getting the hang of Figma, Sketch, Adobe XD,
+									or the prototyping tool of your choice. You
+									are also free to look through our Design at
+									UCI{" "}
 									<a
 										href="https://designatuci.com/resources"
 										target="_blank"
@@ -114,8 +119,9 @@ const FAQ = () => {
 									>
 										Resources
 									</a>{" "}
-									page for extra information. Want to go the extra mile? Show
-									your excitement by turning on your camera and adding our{" "}
+									page for extra information. Want to go the
+									extra mile? Show your excitement by turning
+									on your camera and adding our{" "}
 									<a
 										href="https://drive.google.com/drive/folders/1fe5vj6NJAvQFFcxWp9OFQCkc6qI7Avcn?usp=sharing"
 										target="_blank"
@@ -126,17 +132,18 @@ const FAQ = () => {
 									>
 										You Belong Here Zoom backgrounds.
 									</a>
-								</Text>
+								</p>
 							),
 						},
 						{
 							q: "How do teams work?",
 							a: (
-								<Text className="color gray">
-									You have the option to (1) go solo, or (2) form a team of up
-									to 4 people total. You may list your team members in the
-									sign-up form, but it’s okay if plans change! Take advantage of
-									our #find-a-team{" "}
+								<p>
+									You have the option to (1) go solo, or (2)
+									form a team of up to 4 people total. You may
+									list your team members in the sign-up form,
+									but it’s okay if plans change! Take
+									advantage of our #find-a-team{" "}
 									<a
 										style={{ textDecoration: "underline" }}
 										href="https://discord.gg/jumJqhBy4Y"
@@ -145,19 +152,20 @@ const FAQ = () => {
 									>
 										Discord channel
 									</a>{" "}
-									to meet potential team members. We will consider your final
-									team members to be the ones indicated when submitting your
-									project.
-								</Text>
+									to meet potential team members. We will
+									consider your final team members to be the
+									ones indicated when submitting your project.
+								</p>
 							),
 						},
 						{
 							q: "What if I don’t have a team?",
 							a: (
-								<Text className="color gray">
-									Our #find-a-team Discord channel is the perfect place for
-									anyone looking for a team at our Designathon. If you haven’t
-									already, join our You Belong Here{" "}
+								<p>
+									Our #find-a-team Discord channel is the
+									perfect place for anyone looking for a team
+									at our Designathon. If you haven’t already,
+									join our You Belong Here{" "}
 									<a
 										style={{ textDecoration: "underline" }}
 										href="https://discord.gg/jumJqhBy4Y"
@@ -167,14 +175,15 @@ const FAQ = () => {
 										Discord channel
 									</a>{" "}
 									. Solo participants are also allowed.
-								</Text>
+								</p>
 							),
 						},
 						{
 							q: "Where do I submit my project?",
 							a: (
-								<Text className="color gray">
-									You will submit your final, working prototype to the{" "}
+								<p>
+									You will submit your final, working
+									prototype to the{" "}
 									<a
 										target="_blank"
 										rel="noopener noreferrer"
@@ -185,43 +194,32 @@ const FAQ = () => {
 									>
 										Submission Form
 									</a>{" "}
-									(opens during event). Only one person on your team should
-									submit a form, which will be on behalf of all contributors.
-								</Text>
+									(opens during event). Only one person on
+									your team should submit a form, which will
+									be on behalf of all contributors.
+								</p>
 							),
 						},
 					].map((item) => {
 						return (
 							<Toggle
-								closed={
-									<div>
-										<h3>{item.q}</h3>
-									</div>
-								}
-								opened={
-									<div>
-										<h3>{item.q}</h3>
-										<Text
-											className="color gray"
-											style={{
-												padding: "20px 0 0 34px",
-											}}
-										>
-											{item.a}
-										</Text>
-									</div>
-								}
+								question={item.q}
+								answer={item.a}
 								key={item.q}
 							/>
 						);
 					})}
 				</div>
 			</div>
-		</Section>
+		</div>
 	);
 };
 
-const Toggle = ({ opened, closed }) => {
+const AnswerTag = ({ answer }) => {
+	return <div className={cn.answer_tag}>{answer}</div>;
+};
+
+const Toggle = ({ question, answer }) => {
 	const [open, setOpen] = useState(false);
 
 	const toggleExpand = useCallback(() => {
@@ -229,20 +227,20 @@ const Toggle = ({ opened, closed }) => {
 	}, []);
 
 	return (
-		<div
-			className={clsx(cn.question, open && cn.opened)}
-			onClick={toggleExpand}
-		>
-			<Icon
-				src="d22-arrow.svg"
-				w="18"
-				h="18"
-				style={{
-					marginRight: "16px",
-					transform: open ? "rotate(180deg)" : "rotate(0deg)",
-				}}
-			/>
-			{open ? opened : closed}
+		<div className={cn.qa_item} onClick={toggleExpand}>
+			<div className={cn.question}>
+				<img
+					src={down_carat}
+					alt="down carat icon for accordion menu item"
+					style={{
+						transform: open ? "rotate(180deg)" : "rotate(0deg)",
+					}}
+					className={cn.down_carat}
+				/>
+				{question}
+			</div>
+
+			{open ? <AnswerTag answer={answer} /> : null}
 		</div>
 	);
 };