diff --git a/eduaid_web/package-lock.json b/eduaid_web/package-lock.json
index 265257c..4da2e59 100644
--- a/eduaid_web/package-lock.json
+++ b/eduaid_web/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "dotenv": "^16.4.7",
         "pdf-lib": "^1.17.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -7136,11 +7137,15 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
       }
     },
     "node_modules/dotenv-expand": {
@@ -15121,6 +15126,15 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-switch": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
diff --git a/eduaid_web/src/assets/wifipedia_logo.png b/eduaid_web/src/assets/wifipedia_logo.png
new file mode 100644
index 0000000..38a99f8
Binary files /dev/null and b/eduaid_web/src/assets/wifipedia_logo.png differ
diff --git a/eduaid_web/src/pages/Text_Input.jsx b/eduaid_web/src/pages/Text_Input.jsx
index 4a60753..db6c38c 100644
--- a/eduaid_web/src/pages/Text_Input.jsx
+++ b/eduaid_web/src/pages/Text_Input.jsx
@@ -5,6 +5,7 @@ import stars from "../assets/stars.png";
 import cloud from "../assets/cloud.png";
 import { FaClipboard } from "react-icons/fa";
 import Switch from "react-switch";
+import wifipediaLogo from "../assets/wifipedia_logo.png"; // Import Wikipedia logo
 
 const Text_Input = () => {
   const [text, setText] = useState("");
@@ -12,12 +13,11 @@ const Text_Input = () => {
   const [numQuestions, setNumQuestions] = useState(10);
   const [loading, setLoading] = useState(false);
   const fileInputRef = useRef(null);
-  const [fileContent, setFileContent] = useState("");
   const [docUrl, setDocUrl] = useState("");
-  const [isToggleOn, setIsToggleOn] = useState(0);
+  const [isToggleOn, setIsToggleOn] = useState(false); // Toggle state as boolean
 
   const toggleSwitch = () => {
-    setIsToggleOn((isToggleOn + 1) % 2);
+    setIsToggleOn(!isToggleOn); // Toggle the state
   };
 
   const handleFileUpload = async (event) => {
@@ -173,9 +173,11 @@ const Text_Input = () => {
           loading ? "pointer-events-none" : ""
         }`}
       >
-        <a href="/">
-          <div className="flex items-end gap-[2px]">
+        <div className="flex items-end gap-[2px]">
+          <a href="/">
             <img src={logo} alt="logo" className="w-24 my-6 ml-6 block" />
+          </a>
+          <a href="/">
             <div className="text-4xl mb-5 font-extrabold">
               <span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
                 Edu
@@ -184,11 +186,11 @@ const Text_Input = () => {
                 Aid
               </span>
             </div>
-          </div>
-        </a>
-        <div className="text-right mt-[-8px] mx-1">
+          </a>
+        </div>
+        <div className="text-center mt-[-8px] mx-1">
           <div className="text-white text-xl font-bold">Enter the Content</div>
-          <div className="text-white text-right justify-end flex gap-2 text-xl font-bold">
+          <div className="text-white text-center justify-center flex gap-2 text-xl font-bold">
             to Generate{" "}
             <span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
               Questionaries
@@ -285,11 +287,19 @@ const Text_Input = () => {
             <div className="text-white text-xl font-bold">Use Wikipedia: </div>
             <Switch
               onChange={toggleSwitch}
-              checked={isToggleOn === 1}
+              checked={isToggleOn}
               onColor="#008080"
               offColor="#3e5063"
-              checkedIcon={false}
-              uncheckedIcon={false}
+              checkedIcon={
+                <div className="flex justify-center items-center h-full">
+                  <img src={wifipediaLogo} alt="Wikipedia" className="h-5 w-5 opacity-100" />
+                </div>
+              }
+              uncheckedIcon={
+                <div className="flex justify-center items-center h-full">
+                  <img src={wifipediaLogo} alt="Wikipedia" className="h-5 w-5 opacity-40" />
+                </div>
+              }
             />
           </div>
         </div>
@@ -299,18 +309,16 @@ const Text_Input = () => {
               Back
             </button>
           </a>
-          {/* <a href="output"> */}
           <button
             onClick={handleSaveToLocalStorage}
             className="bg-black items-center text-xl text-white px-4 py-2 border-gradient flex"
           >
             Next
           </button>
-          {/* </a> */}
         </div>
       </div>
     </div>
   );
 };
 
-export default Text_Input;
+export default Text_Input;
\ No newline at end of file