diff --git a/eduaid_web/package-lock.json b/eduaid_web/package-lock.json
index 265257c..796ea47 100644
--- a/eduaid_web/package-lock.json
+++ b/eduaid_web/package-lock.json
@@ -11,12 +11,13 @@
         "@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",
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.26.0",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "react-switch": "^7.0.0",
         "web-vitals": "^2.1.4"
       },
@@ -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": {
@@ -8782,19 +8787,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -15053,6 +15045,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -15121,6 +15114,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/package.json b/eduaid_web/package.json
index 6cc891b..f4f7694 100644
--- a/eduaid_web/package.json
+++ b/eduaid_web/package.json
@@ -12,7 +12,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.26.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-switch": "^7.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/eduaid_web/src/index.css b/eduaid_web/src/index.css
index 31dc491..8b9faf0 100644
--- a/eduaid_web/src/index.css
+++ b/eduaid_web/src/index.css
@@ -22,4 +22,34 @@ code {
   border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
   border-image-slice: 1;
   border-radius: 2rem;
-}
\ No newline at end of file
+}
+
+/* Define the keyframe animation for sliding in from the right */
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%); /* Start off-screen to the right */
+    opacity: 0; /* Make it invisible at the start */
+  }
+  100% {
+    transform: translateX(0); /* End in its natural position */
+    opacity: 1; /* Fully visible */
+  }
+}
+
+/* Apply the animation to each of the items */
+.animated-slide {
+  animation: slideInFromRight 1s ease-out forwards;
+}
+
+/* Optionally, stagger the animation for each item */
+.animated-slide:nth-child(1) {
+  animation-delay: 0.3s; /* First item */
+}
+
+.animated-slide:nth-child(2) {
+  animation-delay: 0.6s; /* Second item */
+}
+
+.animated-slide:nth-child(3) {
+  animation-delay: 0.9s; /* Third item */
+}
diff --git a/eduaid_web/src/pages/Home.jsx b/eduaid_web/src/pages/Home.jsx
index 6d8c020..1b610ff 100644
--- a/eduaid_web/src/pages/Home.jsx
+++ b/eduaid_web/src/pages/Home.jsx
@@ -69,19 +69,19 @@ const Home = () => {
             </div>
           </div>
           <div className="flex flex-col items-end">
-            <div className="my-6">
+            <div className="my-6 animated-slide">
               <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
                 <img src={starsImg} width={32} height={16} alt="" />
                 <div className="text-white text-xl">Doc/Audio Input</div>
               </div>
             </div>
-            <div className="my-4">
+            <div className="my-4 animated-slide">
               <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
                 <img src={starsImg} width={32} height={16} alt="" />
                 <div className="text-white text-xl">In-depth questions gen</div>
               </div>
             </div>
-            <div className="my-4">
+            <div className="my-4 animated-slide">
               <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
                 <img src={starsImg} width={32} height={16} alt="" />
                 <div className="text-white text-xl">
diff --git a/eduaid_web/src/pages/Text_Input.jsx b/eduaid_web/src/pages/Text_Input.jsx
index 4a60753..cf6f838 100644
--- a/eduaid_web/src/pages/Text_Input.jsx
+++ b/eduaid_web/src/pages/Text_Input.jsx
@@ -175,7 +175,7 @@ const Text_Input = () => {
       >
         <a href="/">
           <div className="flex items-end gap-[2px]">
-            <img src={logo} alt="logo" className="w-24 my-6 ml-6 block" />
+            <img src="aossie_transparent.png" alt="logo" className="w-24 my-6 ml-6 block" />
             <div className="text-4xl mb-5 font-extrabold">
               <span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
                 Edu