diff --git a/frontend/src/assets/forms_emojis/IDF1.png b/frontend/src/assets/forms_emojis/IDF1.png
new file mode 100644
index 0000000..20ac7b2
Binary files /dev/null and b/frontend/src/assets/forms_emojis/IDF1.png differ
diff --git a/frontend/src/assets/forms_emojis/IDF2.png b/frontend/src/assets/forms_emojis/IDF2.png
new file mode 100644
index 0000000..9635b01
Binary files /dev/null and b/frontend/src/assets/forms_emojis/IDF2.png differ
diff --git a/frontend/src/assets/forms_emojis/IDF3.png b/frontend/src/assets/forms_emojis/IDF3.png
new file mode 100644
index 0000000..b2bf0c1
Binary files /dev/null and b/frontend/src/assets/forms_emojis/IDF3.png differ
diff --git a/frontend/src/assets/forms_emojis/career1.png b/frontend/src/assets/forms_emojis/career1.png
new file mode 100644
index 0000000..edd19d4
Binary files /dev/null and b/frontend/src/assets/forms_emojis/career1.png differ
diff --git a/frontend/src/assets/forms_emojis/career2.png b/frontend/src/assets/forms_emojis/career2.png
new file mode 100644
index 0000000..60a0b7b
Binary files /dev/null and b/frontend/src/assets/forms_emojis/career2.png differ
diff --git a/frontend/src/assets/forms_emojis/career3.png b/frontend/src/assets/forms_emojis/career3.png
new file mode 100644
index 0000000..c251728
Binary files /dev/null and b/frontend/src/assets/forms_emojis/career3.png differ
diff --git a/frontend/src/assets/forms_emojis/insurance1.png b/frontend/src/assets/forms_emojis/insurance1.png
new file mode 100644
index 0000000..7f97aac
Binary files /dev/null and b/frontend/src/assets/forms_emojis/insurance1.png differ
diff --git a/frontend/src/assets/forms_emojis/insurance2.png b/frontend/src/assets/forms_emojis/insurance2.png
new file mode 100644
index 0000000..8571653
Binary files /dev/null and b/frontend/src/assets/forms_emojis/insurance2.png differ
diff --git a/frontend/src/assets/forms_emojis/insurance3.png b/frontend/src/assets/forms_emojis/insurance3.png
new file mode 100644
index 0000000..9ac1f94
Binary files /dev/null and b/frontend/src/assets/forms_emojis/insurance3.png differ
diff --git a/frontend/src/assets/forms_emojis/personal1.png b/frontend/src/assets/forms_emojis/personal1.png
new file mode 100644
index 0000000..acefc53
Binary files /dev/null and b/frontend/src/assets/forms_emojis/personal1.png differ
diff --git a/frontend/src/assets/forms_emojis/personal2.png b/frontend/src/assets/forms_emojis/personal2.png
new file mode 100644
index 0000000..1ee0769
Binary files /dev/null and b/frontend/src/assets/forms_emojis/personal2.png differ
diff --git a/frontend/src/assets/forms_emojis/personal3.png b/frontend/src/assets/forms_emojis/personal3.png
new file mode 100644
index 0000000..1dfb0a0
Binary files /dev/null and b/frontend/src/assets/forms_emojis/personal3.png differ
diff --git a/frontend/src/components/Forms.tsx b/frontend/src/components/Forms.tsx
index acf64ff..16d9ea4 100644
--- a/frontend/src/components/Forms.tsx
+++ b/frontend/src/components/Forms.tsx
@@ -1,17 +1,108 @@
 import bgImage from "../assets/Pop_up.png";
+import type { RoundData } from "../engine/types";
+import career3 from "../assets/forms_emojis/career3.png";
+import personal3 from "../assets/forms_emojis/personal3.png";
+import insurance3 from "../assets/forms_emojis/insurance3.png";
+import idf3 from "../assets/forms_emojis/idf1.png";
+import career2 from "../assets/forms_emojis/career2.png";
+import personal2 from "../assets/forms_emojis/personal2.png";
+import insurance2 from "../assets/forms_emojis/insurance2.png";
+import idf2 from "../assets/forms_emojis/idf2.png";
+import career1 from "../assets/forms_emojis/career1.png";
+import personal1 from "../assets/forms_emojis/personal1.png";
+import insurance1 from "../assets/forms_emojis/insurance1.png";
+import idf1 from "../assets/forms_emojis/idf3.png";
+import { useState } from "react";
 
 function Forms() {
+  const [career, setCareer] = useState(0);
+  const [personal, setPersonal] = useState(0);
+  const [indexFunds, setIndexFunds] = useState(0);
+  const [insurance, setInsurance] = useState(0);
+
+  const getImageForAmount = (amount: number, img1: string, img2: string, img3: string) => {
+    if (img1 == career1) {
+      if (amount <= 250) {
+        return career3;
+      }
+      if (amount <= 500) {
+        return career2;
+      }
+      if (amount > 250) {
+        return career1;
+      }
+    }
+    if (img2 == personal1) {
+      if (amount <= 10) {
+        return personal3;
+      }
+      if (amount <= 40) {
+        return personal2;
+      }
+      return personal1;
+    }
+    if (img3 == idf1) {
+      if (amount <= 150) {
+        return idf3;
+      }
+      if (amount <= 250) {
+        return idf2;
+      }
+      return idf1;
+    }
+    if (img1 == insurance1) {
+      if (amount <= 150) {
+        return insurance3;
+      }
+      if (amount <= 250) {
+        return insurance2;
+      }
+      return insurance1;
+    }
+  };
   return (
     <div className="flex justify-center items-center h-screen">
       <div className="w-260 h-170 bg-contain bg-center bg-no-repeat flex justify-center items-center rounded-2xl" style={{ backgroundImage: `url(${bgImage})` }}>
-        <div className="font-upheaval flex flex-col justify-center items-center w-[50%] h-[80%] border-r-4 border-e-amber-800">
-          <div>Index Funds</div>
-          <div>Career Growth</div>
-          <div>Personal</div>
-          <div>Insurance</div>
+        <div className="font-upheaval text-2xl flex flex-col justify-center items-center w-[50%] h-[80%] border-r-4 border-e-amber-800 gap-12">
+          <div className="flex flex-row  w-[90%]">
+            <div>
+              <div className="ml-0.5">Career Growth</div>
+              <input type="number" className="bg-white border-2 rounded-2xl w-52 px-4 py-1" value={career} onChange={(e) => setCareer(Number(e.target.value))} />
+            </div>
+            <img src={getImageForAmount(career, career1, career2, career3)} alt="Career" className="ml-auto w-16 h-16 object-contain mt-2" /> <div className="ml-auto">Masters</div>
+          </div>
+
+          <div className="flex flex-row w-[90%]">
+            <div>
+              <div className="ml-0.5">Personal</div>
+              <input type="number" className="bg-white border-2 rounded-2xl w-52 px-4 py-1" value={personal} onChange={(e) => setPersonal(Number(e.target.value))} />
+            </div>
+            <img src={getImageForAmount(personal, personal1, personal2, personal3)} alt="Personal" className="ml-auto w-16 h-16 object-contain mt-2" /> <div className="ml-auto">Hobbies</div>
+          </div>
+
+          <div className="flex flex-row w-[90%]">
+            <div>
+              <div className="ml-0.5">Index Funds</div>
+              <input type="number" className="bg-white border-2 rounded-2xl w-52 px-4 py-1" value={indexFunds} onChange={(e) => setIndexFunds(Number(e.target.value))} />
+            </div>
+            <img src={getImageForAmount(indexFunds, idf1, idf2, idf3)} alt="Index Funds" className="ml-auto w-16 h-16 object-contain mt-2" /> <div className="ml-auto">VOO VTI</div>
+          </div>
+
+          <div className="flex flex-row w-[90%]">
+            <div>
+              <div className="ml-0.5">Insurance</div>
+              <input type="number" className="bg-white border-2 rounded-2xl w-52 px-4 py-1" value={insurance} onChange={(e) => setInsurance(Number(e.target.value))} />
+            </div>
+            <img src={getImageForAmount(insurance, insurance1, insurance2, insurance3)} alt="Insurance" className="ml-auto w-16 h-16 object-contain mt-2" /> <div className="ml-auto">Health</div>
+          </div>
+          <div>
+            <button className="mt-2 bg-amber-700 hover:bg-amber-600 text-white py-2 px-6 rounded border-b-4 border-amber-900 active:translate-y-1 transition-all">Done</button>
+          </div>
         </div>
-        <div className="flex flex-col justify-center items-center w-[50%] h-[80%]">
-          <div>gemini api feedback</div>
+
+        <div className=" font-upheaval flex flex-col items-center w-[50%] h-[80%]">
+          <div className="text-2xl">AI guidance coach</div>
+          <div className="bg-amber-800 w-[80%]">c </div>
         </div>
       </div>
     </div>