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/pages/Home.jsx b/eduaid_web/src/pages/Home.jsx
index ec3a412..ad16474 100644
--- a/eduaid_web/src/pages/Home.jsx
+++ b/eduaid_web/src/pages/Home.jsx
@@ -49,7 +49,7 @@ const Home = () => {
   }, []);
 
   return (
-    <div className="popup w-screen h-screen bg-[#02000F] flex justify-center items-center">
+    <div className="popup w-full h-full bg-[#02000F] flex justify-center items-center overflow-hidden">
       <div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient">
         <div>
           <img src={logo} alt="logo" className="w-24 my-6 mx-6 block" />
@@ -90,18 +90,18 @@ const Home = () => {
               </div>
             </div>
           </div>
-          <div className="flex justify-center gap-6">
-            <div className="mt-8 rounded-2xl">
+          <div className="flex flex-wrap justify-center gap-4 sm:gap-6 mt-8">
+            <div className="w-full sm:w-auto mt-4 sm:mt-8 rounded-2xl">
               <a href="question-type">
-                <button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
+                <button className="items-center text-base sm:text-lg flex justify-center gap-4 text-white px-4 sm:px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
                   Let’s get Started{" "}
                   <img src={arrow} width={28} height={24} alt="" />
                 </button>
               </a>
             </div>
-            <div className="mt-8 rounded-2xl">
+            <div className="w-full sm:w-auto mt-4 sm:mt-8 rounded-2xl">
               <a href="history">
-                <button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
+                <button className="items-center text-base sm:text-lg flex justify-center gap-4 text-white px-4 sm:px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
                   Your previous Work!
                   <img src={arrow} width={28} height={24} alt="" />
                 </button>