diff --git a/next/app/feedback/page.tsx b/next/app/feedback/page.tsx
index 642c415..19cdabf 100644
--- a/next/app/feedback/page.tsx
+++ b/next/app/feedback/page.tsx
@@ -1,22 +1,21 @@
-import FeedbackForm from "@/components/feedback/FeedbackForm";
+import ActiveSection from "@/components/feedback/ActiveSection";
 import Header from "@/components/header/header";
 import { feedbackPageSchema } from "@/schemas/single/FeedbackPage";
 import fetchStrapi from "@/util/strapi";
-import { IoChevronDown } from "react-icons/io5";
 
 export default async function Feedback() {
   const data = await fetchStrapi("faq-page", feedbackPageSchema);
   const QAs = data.QuestionAnswer;
 
   return (
-    <div className="relative flex flex-col bg-gradient-1 min-h-screen h-full overflow-y-hidden isolate">
+    <div className="flex flex-col bg-gradient-1 min-h-screen h-full overflow-y-hidden isolate">
       {/* @ts-ignore */}
       <Header />
       <svg
         viewBox="0 0 1440 1027"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        className="absolute bottom-0 -z-10 w-full h-96"
+        className="fixed bottom-0 -z-10 w-full h-96"
         preserveAspectRatio="xMidYMin slice"
       >
         <path
@@ -58,35 +57,7 @@ export default async function Feedback() {
           </linearGradient>
         </defs>
       </svg>
-      <div className="flex py-24 w-full max-w-5xl mx-auto gap-12">
-        <div className="flex flex-col items-end whitespace-nowrap">
-          <p className="font-bold text-7xl mb-2">FAQ</p>
-          <p className="uppercase text-4xl font-bold">& Contact</p>
-        </div>
-        <div className="w-full">
-          <h2 className="text-3xl font-bold mb-10">
-            Frequently Asked Questions
-          </h2>
-          <div className="flex flex-col gap-6">
-            {QAs.map((QA) => {
-              return (
-                <details
-                  key={QA.Question}
-                  className=" bg-white rounded-md text-b-dark-blue w-full"
-                >
-                  <div className="p-4">{QA.Answer}</div>
-                  <summary className="list-none cursor-pointer flex justify-between items-center border-b border-b-dark-blue p-4">
-                    <h2>{QA.Question}</h2>
-                    <IoChevronDown className="w-6 h-6 summary-arrow transition-transform" />
-                  </summary>
-                </details>
-              );
-            })}
-          </div>
-          <h2 className="text-3xl font-bold mb-8 mt-16">Contact Form</h2>
-          <FeedbackForm />
-        </div>
-      </div>
+      <ActiveSection data={data} />
     </div>
   );
 }
diff --git a/next/assets/feedback/selectionArrow.png b/next/assets/feedback/selectionArrow.png
new file mode 100644
index 0000000..4f919bf
Binary files /dev/null and b/next/assets/feedback/selectionArrow.png differ
diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx
index 2a66e20..e7929c5 100644
--- a/next/components/feedback/ActiveSection.tsx
+++ b/next/components/feedback/ActiveSection.tsx
@@ -1,6 +1,9 @@
 "use client";
+import selectionArrow from "@/assets/feedback/selectionArrow.png";
+import Image from "next/image";
 import { useState } from "react";
-import { IoChevronDown } from "react-icons/io5";
+import FAQ from "./FAQ";
+import FeedbackForm from "./FeedbackForm";
 
 export default function ActiveSection({
   data,
@@ -13,33 +16,52 @@ export default function ActiveSection({
   };
 }) {
   const QAs = data.QuestionAnswer;
+  const [styleClick, setStyleClick] = useState<boolean>();
   const [activeSection, setActiveSection] = useState<"FAQ" | "Contact">("FAQ");
 
+  function handleClick() {
+    setStyleClick(true);
+
+    setTimeout(() => {
+      if (activeSection == "Contact") {
+        setActiveSection("FAQ");
+      } else {
+        setActiveSection("Contact");
+      }
+      setStyleClick(false);
+    }, 300);
+  }
+
   return (
-    <div className="flex py-24 w-full max-w-5xl mx-auto gap-12">
-      <div className="flex flex-col items-end">
-        <button className="font-bold text-7xl mb-2">FAQ</button>
-        <button className="uppercase text-4xl font-bold">Contact</button>
-      </div>
-      <div className="w-full">
-        <h1 className="text-3xl font-bold mb-10">Frequently Asked Questions</h1>
-        <div className="flex flex-col gap-6">
-          {QAs.map((QA) => {
-            return (
-              <details
-                key={QA.Question}
-                className=" bg-white rounded-md text-b-dark-blue w-full"
-              >
-                <div className="p-4">{QA.Answer}</div>
-                <summary className="list-none cursor-pointer flex justify-between items-center border-b border-b-dark-blue p-4">
-                  <h2>{QA.Question}</h2>
-                  <IoChevronDown className="w-6 h-6 summary-arrow transition-transform" />
-                </summary>
-              </details>
-            );
-          })}
+    <div
+      className={`flex py-24 w-full max-w-5xl mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
+    >
+      <div className="flex flex-col">
+        <div className="flex flex-col items-end w-80 ml-5">
+          <button
+            className={`text-wrap uppercase font-bold text-7xl mb-2`}
+            disabled={true}
+          >
+            {activeSection == "FAQ" ? "FAQ" : "Contact"}
+          </button>
+          <div className="flex items-center">
+            <Image
+              src={selectionArrow}
+              alt="Selection arrow"
+              className="inline-block"
+            />
+            <button
+              className="text-b-dark-blue ml-2 uppercase text-4xl font-bold"
+              onClick={() => handleClick()}
+            >
+              {activeSection == "FAQ" ? "Contact" : "FAQ"}
+            </button>
+          </div>
         </div>
       </div>
+      <div className="flex-1 mr-5">
+        {activeSection == "FAQ" ? <FAQ QAs={QAs} /> : <FeedbackForm />}
+      </div>
     </div>
   );
 }
diff --git a/next/components/feedback/FAQ.tsx b/next/components/feedback/FAQ.tsx
new file mode 100644
index 0000000..92586d2
--- /dev/null
+++ b/next/components/feedback/FAQ.tsx
@@ -0,0 +1,30 @@
+import { IoChevronDown } from "react-icons/io5";
+
+export default function FAQ({
+  QAs,
+}: {
+  QAs: { Question: string; Answer: string }[];
+}) {
+  return (
+    <div className="w-full">
+      <h1 className="text-3xl font-bold mb-10">Frequently Asked Questions</h1>
+      <div className="flex flex-col gap-6">
+        {QAs.map((QA) => {
+          return (
+            <details
+              key={QA.Question}
+              className=" bg-white rounded-md text-b-dark-blue w-full"
+            >
+              <div className="p-4">{QA.Answer}</div>
+              <summary className="list-none cursor-pointer flex justify-between items-center border-b border-b-dark-blue p-4">
+                <h2>{QA.Question}</h2>
+                <IoChevronDown className="w-6 h-6 summary-arrow transition-transform" />
+              </summary>
+            </details>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+}
diff --git a/next/components/feedback/FeedbackForm.tsx b/next/components/feedback/FeedbackForm.tsx
index 7aec3fd..5c3bace 100644
--- a/next/components/feedback/FeedbackForm.tsx
+++ b/next/components/feedback/FeedbackForm.tsx
@@ -1,6 +1,6 @@
 export default function FeedbackForm() {
   async function handleSubmit(data: FormData) {
-    "use server";
+    "use client";
     const name = data.get("name");
     const email = data.get("email");
     const message = data.get("message");
@@ -13,36 +13,38 @@ export default function FeedbackForm() {
   }
 
   return (
-    <form action={handleSubmit} className="flex flex-col">
-      <label className="mb-2">Name</label>
-      <input
-        name="name"
-        type="text"
-        required
-        placeholder="Enter your full name"
-        className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
-      />
-      <label className="mb-2">Email</label>
-      <input
-        name="email"
-        type="email"
-        required
-        placeholder="Enter your email"
-        className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
-      />
-      <label className="mb-2">Message</label>
-      <textarea
-        name="message"
-        required
-        placeholder="Enter your feedback"
-        className="mb-8 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
-      ></textarea>
+    <>
+      <form action={handleSubmit} className="flex flex-col">
+        <label className="mb-2">Name</label>
+        <input
+          name="name"
+          type="text"
+          required
+          placeholder="Enter your full name"
+          className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
+        />
+        <label className="mb-2">Email</label>
+        <input
+          name="email"
+          type="email"
+          required
+          placeholder="Enter your email"
+          className="mb-4 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
+        />
+        <label className="mb-2">Message</label>
+        <textarea
+          name="message"
+          required
+          placeholder="Enter your feedback"
+          className="mb-8 bg-white px-4 py-2 rounded-md shadow-md text-b-dark-blue"
+        ></textarea>
+      </form>
 
       <input
-        className="mx-auto px-12 py-3 bg-b-blue border-b-dark-blue border text-b-dark-blue rounded-md shadow-md cursor-pointer"
+        className="font-bold first:mx-auto px-12 py-3 bg-b-blue text-b-dark-blue rounded-full shadow-md cursor-pointer"
         type="submit"
-        value="Submit"
+        value="SUBMIT"
       />
-    </form>
+    </>
   );
 }
diff --git a/next/tailwind.config.js b/next/tailwind.config.js
index 337ef8b..fee0c53 100644
--- a/next/tailwind.config.js
+++ b/next/tailwind.config.js
@@ -19,6 +19,16 @@ module.exports = {
         "b-orange": "#FAAB36",
         "b-light-orange": "#FABD6E",
       },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 },
+        },
+        fadeOut: {
+          "0%": { opacity: 1 },
+          "100%": { opacity: 0 },
+        },
+      },
     },
   },
   plugins: [],