diff --git a/eduaid_web/src/index.css b/eduaid_web/src/index.css
index 31dc491c..f6c41f12 100644
--- a/eduaid_web/src/index.css
+++ b/eduaid_web/src/index.css
@@ -22,4 +22,14 @@ code {
   border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
   border-image-slice: 1;
   border-radius: 2rem;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield !important;
 }
\ No newline at end of file
diff --git a/eduaid_web/src/pages/Text_Input.jsx b/eduaid_web/src/pages/Text_Input.jsx
index e341d331..8ff4cf65 100644
--- a/eduaid_web/src/pages/Text_Input.jsx
+++ b/eduaid_web/src/pages/Text_Input.jsx
@@ -66,7 +66,10 @@ const Text_Input = () => {
       // Proceed with existing functionality for local storage
       localStorage.setItem("textContent", text);
       localStorage.setItem("difficulty", difficulty);
-      localStorage.setItem("numQuestions", numQuestions);
+      localStorage.setItem(
+        "numQuestions",
+        parseInt(numQuestions, 10) >= 1 ? parseInt(numQuestions, 10) : 1
+      );
 
       await sendToBackend(
         text,
@@ -104,7 +107,7 @@ const Text_Input = () => {
     try {
       const requestData = {
         input_text: data,
-        max_questions: numQuestions,
+        max_questions: parseInt(numQuestions, 10) >= 1 ? parseInt(numQuestions, 10) : 1,
         use_mediawiki: isToggleOn,
       };
 
@@ -210,7 +213,30 @@ const Text_Input = () => {
           <div className="flex gap-2 items-center">
             <div className="text-white text-lg sm:text-xl font-bold">No. of Questions:</div>
             <button onClick={decrementQuestions} className="rounded-lg border-2 border-[#6e8a9f] text-white text-xl px-3">-</button>
-            <span className="text-white text-2xl">{numQuestions}</span>
+            <input
+              type="number"
+              value={numQuestions}
+              min={1}
+              onChange={(e) => {
+                const value = e.target.value;
+
+                if (value === "") {
+                  setNumQuestions("");
+                  return;
+                }
+
+                const parsed = Number(value);
+                if (!isNaN(parsed) && parsed >= 1) {
+                  setNumQuestions(parsed);
+                }
+              }}
+              onBlur={() => {
+                if (!numQuestions || numQuestions < 1) {
+                  setNumQuestions(1);
+                }
+              }}
+              className="w-16 text-center bg-transparent border-2 border-[#6e8a9f] text-white text-lg rounded-lg outline-none"
+            />
             <button onClick={incrementQuestions} className="rounded-lg border-2 border-[#6e8a9f] text-white text-xl px-3">+</button>
           </div>