diff --git a/app/(landing)/sections/FAQ/Accordian.tsx b/app/(landing)/sections/FAQ/Accordian.tsx
new file mode 100644
index 0000000..bf109a3
--- /dev/null
+++ b/app/(landing)/sections/FAQ/Accordian.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+
+type propType = {
+  question: string;
+  answer: string;
+};
+
+export default function Accordion(props: propType) {
+  const [accordionOpen, setAccordionOpen] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setAccordionOpen(!accordionOpen)}
+        className="flex w-full justify-between items-center pt-5"
+      >
+        <span className="text-3xl text-orange-100 text-left font-bold">{props.question}</span>
+        <svg
+          className="ml-8 shrink-0 fill-orange-100"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            y="7"
+            width="16"
+            height="2"
+            rx="1"
+            className={`origin-center transform transition duration-200 ease-out ${
+              accordionOpen && '!rotate-180'
+            }`}
+          />
+          <rect
+            y="7"
+            width="16"
+            height="2"
+            rx="1"
+            className={`origin-center rotate-90 transform transition duration-200 ease-out ${
+              accordionOpen && '!rotate-180'
+            }`}
+          />
+        </svg>
+      </button>
+      <div
+        className={`pb-3 grid overflow-hidden text-sm text-orange-100 transition-all duration-300 ease-in-out ${
+          accordionOpen
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        }`}
+      >
+        <div className="overflow-hidden text-left text-lg">{props.answer}</div>
+      </div>
+      <hr />
+    </div>
+  );
+}
diff --git a/app/(landing)/sections/FAQ/Accordion.tsx b/app/(landing)/sections/FAQ/Accordion.tsx
new file mode 100644
index 0000000..bf109a3
--- /dev/null
+++ b/app/(landing)/sections/FAQ/Accordion.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+
+type propType = {
+  question: string;
+  answer: string;
+};
+
+export default function Accordion(props: propType) {
+  const [accordionOpen, setAccordionOpen] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setAccordionOpen(!accordionOpen)}
+        className="flex w-full justify-between items-center pt-5"
+      >
+        <span className="text-3xl text-orange-100 text-left font-bold">{props.question}</span>
+        <svg
+          className="ml-8 shrink-0 fill-orange-100"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            y="7"
+            width="16"
+            height="2"
+            rx="1"
+            className={`origin-center transform transition duration-200 ease-out ${
+              accordionOpen && '!rotate-180'
+            }`}
+          />
+          <rect
+            y="7"
+            width="16"
+            height="2"
+            rx="1"
+            className={`origin-center rotate-90 transform transition duration-200 ease-out ${
+              accordionOpen && '!rotate-180'
+            }`}
+          />
+        </svg>
+      </button>
+      <div
+        className={`pb-3 grid overflow-hidden text-sm text-orange-100 transition-all duration-300 ease-in-out ${
+          accordionOpen
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        }`}
+      >
+        <div className="overflow-hidden text-left text-lg">{props.answer}</div>
+      </div>
+      <hr />
+    </div>
+  );
+}
diff --git a/app/(landing)/sections/FAQ/FAQ.tsx b/app/(landing)/sections/FAQ/FAQ.tsx
index f402ba0..f1a9bdd 100644
--- a/app/(landing)/sections/FAQ/FAQ.tsx
+++ b/app/(landing)/sections/FAQ/FAQ.tsx
@@ -1,87 +1,18 @@
 'use client';
-
 import React from 'react';
-import { Disclosure } from '@headlessui/react';
-import { GoChevronDown } from 'react-icons/go';
 import { hackRUFAQ } from '@/app/lib/constants';
-
-/**
- * TODO: make it so that only one question can be open at a time.
- */
-
-function Question(props: { question: string; answer: string }) {
-  const { question, answer } = props;
-  return (
-    <Disclosure>
-      {({ open }) => (
-        <div className="hover:bg-f23-mediumGreen flex flex-col rounded-t-lg border-b-2 border-b-white">
-          <Disclosure.Button
-            className="text-md text-textSubtitle flex
-            w-full justify-between p-4 text-left
-            focus:outline-none focus-visible:ring
-            focus-visible:ring-opacity-75"
-          >
-            <span>{question}</span>
-            <GoChevronDown
-              className={`${
-                open ? 'rotate-180 transform' : ''
-              } text-text h-5 w-5`}
-            />
-          </Disclosure.Button>
-          <Disclosure.Panel className="w-full px-4 pb-2 pt-4 text-sm text-white">
-            {answer}
-          </Disclosure.Panel>
-        </div>
-      )}
-    </Disclosure>
-  );
-}
+import Accordian from './Accordion';
 
 function QuestionContainer() {
-  const {
-    whatIsHackRUAnswer,
-    whatIsApplicationAnswer,
-    winAnythingAnswer,
-    maskMandateAnswer,
-    moreQuestionsAnswer,
-    whoCanComeAnswer,
-    newAnswer,
-    costAnswer,
-    workWithOthersAnswer,
-  } = hackRUFAQ;
-
   return (
-    <div className="ml-22 z-40 pt-16">
-      <div className="transparent-black-background max-w-3xl rounded-2xl p-10 sm:grid sm:grid-cols-2">
-        <div>
-          <Question question="What is HackRU?" answer={whatIsHackRUAnswer} />
-          <Question
-            question="What is the application process like?"
-            answer={whatIsApplicationAnswer}
-          />
-          <Question question="Can I win anything?" answer={winAnythingAnswer} />
-          <Question
-            question="Will there be a mask mandate?"
-            answer={maskMandateAnswer}
-          />
-          <Question
-            question="I have more questions!"
-            answer={moreQuestionsAnswer}
-          />
-        </div>
-        <div>
-          <Question question="Who can come?" answer={whoCanComeAnswer} />
-          <Question question="I'm new. What should I do? " answer={newAnswer} />
-          <Question
-            question="How much does it cost to attend?"
-            answer={costAnswer}
-          />
-          <Question
-            question="Can I work with others?"
-            answer={workWithOthersAnswer}
-          />
-        </div>
-      </div>
+    <div className="w-full">
+      {Object.keys(hackRUFAQ).map((question: string, i: number) => (
+        <Accordian
+          key={i}
+          question={question}
+          answer={Object.values(hackRUFAQ)[i]}
+        />
+      ))}
     </div>
   );
 }
@@ -90,11 +21,9 @@ export default function FAQ() {
   return (
     <div
       id="FAQ"
-      className="relative flex h-fit
-min-h-[600px] w-full flex-col 
-items-center justify-start overflow-visible"
+      className="relative flex w-full flex-col items-center justify-start overflow-visible"
     >
-      <div className="relative flex h-full w-full max-w-7xl flex-col items-center pb-[24rem]">
+      <div className="relative flex w-full px-[10vw] xl:px-[15vw] flex-col items-center pb-[10rem]">
         <QuestionContainer />
       </div>
     </div>
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 0b83574..e581712 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -1,32 +1,31 @@
 export const hackRUFAQ = {
-  whatIsHackRUAnswer: `HackRU is a 24-hour hackathon at Rutgers University. We welcome hundreds of students to join us in building
+  'What is HackRU?': `HackRU is a 24-hour hackathon at Rutgers University. We welcome hundreds of students to join us in building
   awesome software and hardware projects. Industry experts and mentors come from all over the country to create
   an environment that fosters an atmosphere of learning through teck talks and one-on-one guidance.
   We encourage beginner and advanced hackers alike to challenge themselves and expand their skills.`,
 
-  whatIsApplicationAnswer: `HackRU will be back in person this Fall 2023! We will be accepting anywhere between 300-500 hackers based on
+  'What is the application process like?': `HackRU will be back in person this Fall 2023! We will be accepting anywhere between 300-500 hackers based on
   when you register for the event. After you register, you'll get a notification 1-2 weeks before the hackathon whether we have accepted you or
   not to the hackathon. You will then have to let us know if you plan on coming or not and then you're all set!`,
 
-  winAnythingAnswer:
+  'Can I win anything?':
     "Yes! We'll release more information about prizes as the event draws near.",
 
-  maskMandateAnswer:
+  'Will there be a mask mandate?':
     'No, HackRU will not have a mask mandate but it is encouraged throughout the duration of the event.',
 
-  moreQuestionsAnswer:
-    "Reach out to us at info@hackru.org! We'll be happy to answer.",
-
-  whoCanComeAnswer: `HackRU welcomes undergraduate and graduate students of all majors, backgrounds, and skill level to come create. Additionally, high
+  'Who can come?': `HackRU welcomes undergraduate and graduate students of all majors, backgrounds, and skill level to come create. Additionally, high
   school students who will be 18 by HackRU are allowed to register. Unfortunately, if you are under 18, you will not be able to attend.`,
 
-  newAnswer: `That's great! We'd love to have you at HackRU. Throughout the weekend, there will be workshops to get your feet wet,
+  "I'm new. What should I do?": `That's great! We'd love to have you at HackRU. Throughout the weekend, there will be workshops to get your feet wet,
   project ideas for you to try out, and mentors to guide you through the process.`,
 
-  costAnswer:
+  'How much does it cost to attend?':
     'Like the best things in life, HackRU is completely free to attend!',
 
-  workWithOthersAnswer: `Hackers can(and are encouraged to) work in teams of up to 4 humans max. The knowledge you gain from teammates is
+  'Can I work with others?': `Hackers can(and are encouraged to) work in teams of up to 4 humans max. The knowledge you gain from teammates is
   invaluable, along with the opportunity to build lifetime friendships - you might leave with a new best friend! We will be having a team-building exercise
   after opening ceremonies for people who are looking for teammates.`,
+  'I have more questions!':
+    "Reach out to us at info@hackru.org! We'll be happy to answer.",
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 890f136..c65feb5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,6 +7,14 @@ const config: Config = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    screens: {
+      xx: '0px',
+      xs: '320px',
+      sm: '576px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
     extend: {
       gridTemplateColumns: {
         '13': 'repeat(13, minmax(0, 1fr))',
@@ -14,10 +22,10 @@ const config: Config = {
       colors: {
         blue: {
           100: '#203437',
-          200: '#1B1F23'
         },
         orange: {
-          100: '#FFB464'
+          100: '#FFB464',
+          200: '#1B1F23'
         }
       },
     },