diff --git a/api/db.json b/api/db.json
index 9f86b05..afbd778 100644
--- a/api/db.json
+++ b/api/db.json
@@ -3,700 +3,700 @@
         {
         "id": 1,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the output of the expression 3 + 2 * 5 in C++?",
         "answer": "13"
         },
         {
         "id": 2,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the default access specifier for class members in C++?",
         "answer": "private"
         },
         {
         "id": 3,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the name of the process that automatically converts a primitive type to its corresponding wrapper class object in C++?",
         "answer": "Boxing"
         },
         {
         "id": 4,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "Which C++ feature allows the creation of a function or an operator with more than one form?",
         "answer": "Polymorphism"
         },
         {
         "id": 5,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the main purpose of a constructor in C++?",
         "answer": "To initialize an object"
         },
         {
         "id": 6,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What does STL stand for in C++?",
         "answer": "Standard Template Library"
         },
         {
         "id": 7,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "Which operator is used to access the members of a structure through a pointer in C++?",
         "answer": "->"
         },
         {
         "id": 8,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the keyword used to define a constant in C++?",
         "answer": "const"
         },
         {
         "id": 9,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the primary purpose of the 'new' operator in C++?",
         "answer": "To allocate memory dynamically"
         },
         {
         "id": 10,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What does RTTI stand for in C++?",
         "answer": "Run-Time Type Information"
         },
         {
         "id": 11,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is a pure virtual function in C++?",
         "answer": "A function with no definition that must be overridden in derived classes"
         },
         {
         "id": 12,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the name of the feature that allows the same function name to be used for different types in C++?",
         "answer": "Function Overloading"
         },
         {
         "id": 13,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is a 'namespace' in C++?",
         "answer": "A declarative region that provides a scope to the identifiers inside it"
         },
         {
         "id": 14,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "Which C++ keyword is used to prevent a variable from being modified?",
         "answer": "const"
         },
         {
         "id": 15,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the function of the 'friend' keyword in C++?",
         "answer": "To allow a function or another class access to the private and protected members of a class"
         },
         {
         "id": 16,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is 'inheritance' in C++?",
         "answer": "The process by which one class acquires the properties and functionalities of another class"
         },
         {
         "id": 17,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "Which operator is used for scope resolution in C++?",
         "answer": "::"
         },
         {
         "id": 18,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is a 'destructor' in C++?",
         "answer": "A special member function that is executed when an object of its class is destroyed"
         },
         {
         "id": 19,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the primary use of the 'this' pointer in C++?",
         "answer": "To refer to the calling object itself"
         },
         {
         "id": 20,
         "category": "cpp",
-        "type": "none",
+        "type": "form",
         "text": "What is the return type of the main function in C++?",
         "answer": "int"
         },
         {
         "id": 21,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'phishing' mean in cybersecurity?",
         "answer": "A technique used to trick users into providing sensitive information by pretending to be a trustworthy entity"
         },
         {
         "id": 22,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is the purpose of a firewall in network security?",
         "answer": "To monitor and control incoming and outgoing network traffic based on predetermined security rules"
         },
         {
         "id": 23,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'DDoS' stand for?",
         "answer": "Distributed Denial of Service"
         },
         {
         "id": 24,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is a 'zero-day' exploit?",
         "answer": "A cyber attack that occurs on the same day a vulnerability is discovered and before a fix is implemented"
         },
         {
         "id": 25,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'encryption' in the context of cybersecurity?",
         "answer": "The process of converting information or data into a code to prevent unauthorized access"
         },
         {
         "id": 26,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'VPN' stand for in cybersecurity?",
         "answer": "Virtual Private Network"
         },
         {
         "id": 27,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is a 'trojan horse' in cybersecurity?",
         "answer": "A type of malware that disguises itself as legitimate software"
         },
         {
         "id": 28,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is the primary goal of social engineering attacks?",
         "answer": "To manipulate individuals into divulging confidential information"
         },
         {
         "id": 29,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'ransomware'?",
         "answer": "A type of malware that encrypts a user's data and demands payment to restore access"
         },
         {
         "id": 30,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'SQL injection' exploit?",
         "answer": "Vulnerabilities in an application's software by inserting malicious SQL code"
         },
         {
         "id": 31,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'two-factor authentication'?",
         "answer": "A security process that requires two different forms of identification to access an account"
         },
         {
         "id": 32,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'malware'?",
         "answer": "Software designed to disrupt, damage, or gain unauthorized access to computer systems"
         },
         {
         "id": 33,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'TLS' stand for in cybersecurity?",
         "answer": "Transport Layer Security"
         },
         {
         "id": 34,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'brute force attack' in cybersecurity?",
         "answer": "A method to find passwords or encryption keys by trying every possible combination"
         },
         {
         "id": 35,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is the primary function of an Intrusion Detection System (IDS)?",
         "answer": "To monitor network traffic for suspicious activity and potential threats"
         },
         {
         "id": 36,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'spoofing' in cybersecurity?",
         "answer": "The act of disguising a communication from an unknown source as being from a known, trusted source"
         },
         {
         "id": 37,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'rootkit'?",
         "answer": "A type of malicious software designed to hide the existence of certain processes or programs from normal methods of detection"
         },
         {
         "id": 38,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'CVE' stand for in cybersecurity?",
         "answer": "Common Vulnerabilities and Exposures"
         },
         {
         "id": 39,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'pharming' in cybersecurity?",
         "answer": "A cyber attack intended to redirect a website's traffic to another, fake site"
         },
         {
         "id": 40,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'APT' stand for in cybersecurity?",
         "answer": "Advanced Persistent Threat"
         },
         {
         "id": 41,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'cross-site scripting' (XSS)?",
         "answer": "A vulnerability that allows attackers to inject malicious scripts into webpages viewed by users"
         },
         {
         "id": 42,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'BYOD' stand for in cybersecurity?",
         "answer": "Bring Your Own Device"
         },
         {
         "id": 43,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'penetration testing'?",
         "answer": "A method of evaluating the security of a computer system by simulating an attack"
         },
         {
         "id": 44,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'CIA' stand for in cybersecurity?",
         "answer": "Confidentiality, Integrity, and Availability"
         },
         {
         "id": 45,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'smishing'?",
         "answer": "A type of phishing attack that uses SMS messages to lure victims"
         },
         {
         "id": 46,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is a 'honeypot' in cybersecurity?",
         "answer": "A security system set up to attract and detect hackers"
         },
         {
         "id": 47,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is the purpose of 'endpoint protection'?",
         "answer": "To secure endpoints or entry points of end-user devices such as desktops, laptops, and mobile devices"
         },
         {
         "id": 48,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What does 'SIEM' stand for in cybersecurity?",
         "answer": "Security Information and Event Management"
         },
         {
         "id": 49,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is a 'man-in-the-middle' attack?",
         "answer": "A cyber attack where the attacker secretly intercepts and relays messages between two parties"
         },
         {
         "id": 50,
         "category": "cybersec",
-        "type": "none",
+        "type": "form",
         "text": "What is 'data exfiltration'?",
         "answer": "The unauthorized transfer of data from a computer"
         },
         {
         "id": 51,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the longest river in the world?",
         "answer": "The Nile River"
         },
         {
         "id": 52,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Australia?",
         "answer": "Canberra"
         },
         {
         "id": 53,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which desert is the largest in the world?",
         "answer": "The Sahara Desert"
         },
         {
         "id": 54,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the smallest country in the world by land area?",
         "answer": "Vatican City"
         },
         {
         "id": 55,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What mountain range forms the natural border between France and Spain?",
         "answer": "The Pyrenees"
         },
         {
         "id": 56,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country has the most natural lakes?",
         "answer": "Canada"
         },
         {
         "id": 57,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the highest mountain in Africa?",
         "answer": "Mount Kilimanjaro"
         },
         {
         "id": 58,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital of Japan?",
         "answer": "Tokyo"
         },
         {
         "id": 59,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What river runs through the Grand Canyon?",
         "answer": "The Colorado River"
         },
         {
         "id": 60,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country is known as the Land of the Rising Sun?",
         "answer": "Japan"
         },
         {
         "id": 61,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the largest island in the world?",
         "answer": "Greenland"
         },
         {
         "id": 62,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which European country shares borders with the most neighbors?",
         "answer": "Germany"
         },
         {
         "id": 63,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the deepest ocean trench in the world?",
         "answer": "The Mariana Trench"
         },
         {
         "id": 64,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which U.S. state is the largest by area?",
         "answer": "Alaska"
         },
         {
         "id": 65,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Canada?",
         "answer": "Ottawa"
         },
         {
         "id": 66,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which river is the longest in Europe?",
         "answer": "The Volga River"
         },
         {
         "id": 67,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which continent has the most countries?",
         "answer": "Africa"
         },
         {
         "id": 68,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital of Brazil?",
         "answer": "Brasília"
         },
         {
         "id": 69,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the official language of Egypt?",
         "answer": "Arabic"
         },
         {
         "id": 70,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which ocean is the largest by surface area?",
         "answer": "The Pacific Ocean"
         },
         {
         "id": 71,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the name of the sea bordered by Europe to the north and Africa to the south?",
         "answer": "The Mediterranean Sea"
         },
         {
         "id": 72,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country has the most islands?",
         "answer": "Sweden"
         },
         {
         "id": 73,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the largest country in South America?",
         "answer": "Brazil"
         },
         {
         "id": 74,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the longest mountain range in the world?",
         "answer": "The Andes"
         },
         {
         "id": 75,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Russia?",
         "answer": "Moscow"
         },
         {
         "id": 76,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the largest desert in Asia?",
         "answer": "The Gobi Desert"
         },
         {
         "id": 77,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital of Kenya?",
         "answer": "Nairobi"
         },
         {
         "id": 78,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country is the smallest in Europe by land area?",
         "answer": "Vatican City"
         },
         {
         "id": 79,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which river forms part of the border between Mexico and the United States?",
         "answer": "The Rio Grande"
         },
         {
         "id": 80,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of South Korea?",
         "answer": "Seoul"
         },
         {
         "id": 81,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the largest country in Africa by land area?",
         "answer": "Algeria"
         },
         {
         "id": 82,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country is known as the Land of the Maple Leaf?",
         "answer": "Canada"
         },
         {
         "id": 83,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which river is the longest in Asia?",
         "answer": "The Yangtze River"
         },
         {
         "id": 84,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of India?",
         "answer": "New Delhi"
         },
         {
         "id": 85,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which ocean lies on the east coast of the United States?",
         "answer": "The Atlantic Ocean"
         },
         {
         "id": 86,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Italy?",
         "answer": "Rome"
         },
         {
         "id": 87,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which river is the main river that flows through Paris?",
         "answer": "The Seine"
         },
         {
         "id": 88,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the smallest ocean in the world?",
         "answer": "The Arctic Ocean"
         },
         {
         "id": 89,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Mexico?",
         "answer": "Mexico City"
         },
         {
         "id": 90,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country is known for its unique wildlife and has the Great Barrier Reef?",
         "answer": "Australia"
         },
         {
         "id": 91,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital of Argentina?",
         "answer": "Buenos Aires"
         },
         {
         "id": 92,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country has the largest population in the world?",
         "answer": "China"
         },
         {
         "id": 93,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of the United Kingdom?",
         "answer": "London"
         },
         {
         "id": 94,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which continent is known as the birthplace of humanity?",
         "answer": "Africa"
         },
         {
         "id": 95,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Thailand?",
         "answer": "Bangkok"
         },
         {
         "id": 96,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital of Egypt?",
         "answer": "Cairo"
         },
         {
         "id": 97,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country is home to the Amazon Rainforest?",
         "answer": "Brazil"
         },
         {
         "id": 98,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the capital city of Spain?",
         "answer": "Madrid"
         },
         {
         "id": 99,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "What is the currency of Japan?",
         "answer": "Yen"
         },
         {
         "id": 100,
         "category": "geography",
-        "type": "none",
+        "type": "form",
         "text": "Which country is known as the Land of Fire and Ice?",
         "answer": "Iceland"
         }
diff --git a/app/components/form.tsx b/app/components/form.tsx
index 6b9fdc0..5664187 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -1,51 +1,67 @@
 'use client';
+import { Field, Description, Button, Input } from "@headlessui/react";
+import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
 export enum FieldType {
   number = 'number',
-  text = 'text'
+  text = 'text',
+  radio = 'radio',
+  checkbox = 'checkbox'
 }
 
 export type FormFields = {
   type: FieldType,
   name: string,
-  label: string,
-  required: boolean
+  label?: string,
+  required?: boolean,
+  default?: string,
+  autocomplete?: boolean,
+  placeholder?: string
 }
 
-const Form = <T,>({ fields, onSubmit }) => {
+const Form = ({ fields, onSubmit }: { fields: FormFields[], onSubmit: (FormData) => any }) => {
   const [formData, setFormData] = useState({});
   
-    const handleChange = (event) => {
-      const { name, value } = event.target;
-      setFormData( (prevData) => ({
-        ...prevData,
-        [name]: value
-      }));
-    }
+  const formSubmit = (e) => {
+    e.preventDefault();
+
+    setFormData( new FormData( e.target ) );
 
-  const handleSubmit = (event) => {
-    event.preventDefault();
     onSubmit( formData );
   }
 
-  return ( 
-    <form onSubmit={handleSubmit}>
-      {fields.map( (field) => {
-            return (
-              <div key={field.name}>
-                <label>{field.label}</label>
-                <input 
-                  type={field.type}
-                  name={field.name}
-                  value={formData[field.name] || ''}
-                  onChange={handleChange}
-                  required={field.required}
-                />
-              </div>
-      )})}
-      <button type="submit">Submit</button>
-    </form>
+  return (
+  <div>
+    <form className="mt-10 align-center items-center justify-center gap-x-6" onSubmit={formSubmit}>
+        {fields.map( (f) => {
+          return (
+            <Field>
+              {f.label && <Description className="text-sm/6 text-white/50"> {f.label} </Description>}
+              <Input 
+                  name={f.name}
+                  required={f.required ? true : false}
+                  type={f.type}
+                  defaultValue={f.default ? f.default : ''}
+                  autoComplete={f.autocomplete ? "on" : "off"}
+                  placeholder={f.placeholder ? f.placeholder : ''}
+                  className=
+                  'mt-3 block w-full rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25'
+                  />
+            </Field>
+          );
+        })}
+        <Button 
+          className="mt-9 inline-flex items-center gap-2 rounded-md bg-white py-1.5 px-5 text-sm/6 font-semibold text-black shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-200 data-[open]:bg-gray-200 data-[focus]:outline-1 data-[focus]:outline-white"
+          type='submit'
+        >
+          Send
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-4">
+            <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
+          </svg>
+        </Button>
+      </form>
+    </div>
   );
 }
 
diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx
index 5ac3484..807c687 100644
--- a/app/components/question_component.tsx
+++ b/app/components/question_component.tsx
@@ -62,6 +62,18 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
           leaveFrom="opacity-90"
           leaveTo="opacity-0"> */}
         {/* <motion.div animate={{visibility: ((question && state.opened[ question.id ]) ? "visible" : "collapse") }}> */}
+        <Transition
+          show={(question && (state.opened[ question.id ])) ? false : true}
+          enter="transition-opacity duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-90"
+          leave="transition-opacity duration-150"
+          leaveFrom="opacity-90"
+          leaveTo="opacity-0">
+          <Button className="mt-10 leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
+            Show answer
+          </Button>
+        </Transition>
         <motion.div animate={(question && state.opened[ question.id ]) ? {visibility: "visible", opacity: 1} : {visibility: "collapse", opacity: 0}}>
           <div><p className="mt-6 text-lg leading-8 text-gray-200">
             {question.answer}
@@ -100,18 +112,6 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
           </div>
         </div>
         </motion.div>  
-        <Transition
-          show={(question && (state.opened[ question.id ])) ? false : true}
-          enter="transition-opacity duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-90"
-          leave="transition-opacity duration-150"
-          leaveFrom="opacity-90"
-          leaveTo="opacity-0">
-          <Button className="leading-6 text-black back rounded-md bg-white text-sm font-semibold text-gray-900" onClick={handleOpenClick} style = {{padding: '5px'}}>
-            Show answer
-          </Button>
-        </Transition>
       </div>
     </div>
   )
diff --git a/app/learn/[category]/page.tsx b/app/learn/[category]/page.tsx
index a66e7aa..e3bf4f5 100644
--- a/app/learn/[category]/page.tsx
+++ b/app/learn/[category]/page.tsx
@@ -8,6 +8,7 @@ import { SessionState } from '@/app/lib/session';
 import { AnswerType, Question, getQuestions } from '@/app/lib/question';
 import QuestionView from '@/app/components/question_component';
 import ResultScreen from '@/app/components/results';
+import FormQuestion from '@/app/components/form-question';
 
 const shuffle = (array: any[]) => {
   let i = array.length - 1;
@@ -102,6 +103,22 @@ const Page = ({ params }: { params: { category: string }}) => {
         </div>
 
         
+        {(() => {
+          if ( !questions[ 0 ] ) {
+            return <></>;
+          }
+          if ( index >= 10 || !(questions[ index ]) )
+            return <ResultScreen state={state}/>;
+          console.log( "type19", questions[ index ].type );
+          switch ( questions[ index ].type ) {
+            case null:
+            case "none":
+              return <QuestionView question={questions[ index ]} state = {state} setState={setState}/>;
+            default:
+              return <FormQuestion question={questions[ index ]}/>;
+          }
+        })()}
+
         {(()=>{
           if ( !questions[ 0 ] )
             return <></>;