diff --git a/package-lock.json b/package-lock.json
index d52b94f1..875aa320 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@babel/plugin-transform-private-methods": "^7.25.4",
         "@eslint/config-array": "^0.18.0",
         "@eslint/object-schema": "^2.1.4",
+        "@fortawesome/free-solid-svg-icons": "^6.7.1",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@headlessui/react": "^2.1.8",
         "@heroicons/react": "^2.1.5",
         "@hookform/error-message": "^2.0.1",
@@ -19,6 +21,7 @@
         "@testing-library/react": "^16.0.1",
         "@testing-library/user-event": "^14.5.2",
         "amqplib": "^0.10.4",
+        "aos": "^2.3.4",
         "bootstrap": "^5.3.3",
         "cookie": "^0.7.1",
         "glob": "^11.0.0",
@@ -2458,6 +2461,49 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz",
+      "integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.1.tgz",
+      "integrity": "sha512-8dBIHbfsKlCk2jHQ9PoRBg2Z+4TwyE3vZICSnoDlnsHA6SiMlTwfmW6yX0lHsRmWJugkeb92sA0hZdkXJhuz+g==",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz",
+      "integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.8.tgz",
@@ -5060,6 +5106,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -6013,6 +6069,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA=="
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -12566,6 +12627,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
diff --git a/package.json b/package.json
index eb76f6b3..1392aee2 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
     "@babel/plugin-transform-private-methods": "^7.25.4",
     "@eslint/config-array": "^0.18.0",
     "@eslint/object-schema": "^2.1.4",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.1.8",
     "@heroicons/react": "^2.1.5",
     "@hookform/error-message": "^2.0.1",
@@ -14,6 +16,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "amqplib": "^0.10.4",
+    "aos": "^2.3.4",
     "bootstrap": "^5.3.3",
     "cookie": "^0.7.1",
     "glob": "^11.0.0",
diff --git a/src/images/Logo_transparentbg.png b/src/images/Logo_transparentbg.png
new file mode 100644
index 00000000..6dd951e5
Binary files /dev/null and b/src/images/Logo_transparentbg.png differ
diff --git a/src/shared/components/Navigation/MainNavigation.tsx b/src/shared/components/Navigation/MainNavigation.tsx
index 62131eea..4edc0062 100644
--- a/src/shared/components/Navigation/MainNavigation.tsx
+++ b/src/shared/components/Navigation/MainNavigation.tsx
@@ -5,74 +5,78 @@ import { Link, NavLink, useLocation } from "react-router-dom";
 import { useAuth } from "../../../context/AuthContext.tsx";
 
 export default function MainNavigation() {
-
   const { auth } = useAuth();
-
   const location = useLocation().pathname;
+
   const routes = auth.isAuthenticated
     ? [
-      { name: "Jobs", href: "/jobs", current: true },
-      { name: "Create", href: "/create", current: false },
-      { name: "Staff", href: "/staff", current: false },
-      { name: "Profile", href: "/profile", current: false },
-      { name: "Sign Out", href: "/signout", current: false },
-    ]
+        { name: "Jobs", href: "/jobs", current: location === "/jobs" },
+        { name: "Create", href: "/create", current: location === "/create" },
+        { name: "Staff", href: "/staff", current: location === "/staff" },
+        { name: "Profile", href: "/profile", current: location === "/profile" },
+        { name: "Sign Out", href: "/signout", current: false },
+      ]
     : [{ name: "Sign In", href: "/signin", current: false }];
 
   return (
-    <Disclosure as="nav" className="bg-slate-100">
+    <Disclosure as="nav" className="bg-white shadow-md sticky top-0 z-50">
       {({ open }) => (
         <>
-          <div className="mainnav sm:px-6 lg:px-8">
-            <div className="mainnav-header">
-              <div className="mainnav-desc sm:hidden">
-                {/* Mobile menu button*/}
-                <Disclosure.Button className="btn-disclosure hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                  <span className="absolute -inset-0.5" />
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-center h-16">
+              {/* Logo */}
+              <div className="flex-shrink-0">
+                <Link to="/" className="text-2xl font-bold text-blue-600 hover:text-blue-800 transition-all duration-200">
+                  LabConnect
+                </Link>
+              </div>
+
+              {/* Desktop Navigation */}
+              <div className="hidden sm:flex sm:items-center">
+                <div className="flex space-x-8">
+                  {routes.map((item) => (
+                    <NavLink
+                      key={item.name}
+                      to={item.href}
+                      className={({ isActive }) =>
+                        location === item.href
+                          ? "text-blue-600 font-semibold border-b-2 border-blue-600"
+                          : "text-gray-600 hover:text-blue-600 transition-all duration-200"
+                      }
+                    >
+                      {item.name}
+                    </NavLink>
+                  ))}
+                </div>
+              </div>
+
+              {/* Mobile Menu Button */}
+              <div className="flex sm:hidden">
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-all duration-200">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
-                    <XMarkIcon className="blck66" aria-hidden="true" />
+                    <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
                   ) : (
-                    <Bars3Icon className="blck66" aria-hidden="true" />
+                    <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                   )}
                 </Disclosure.Button>
               </div>
-              <div className="mainnav-desc2 sm:items-stretch sm:justify-start">
-                <div className="mainnav-title-link">
-                  <Link to="/" className="blue-link hover:text-blue-900 focus:text-blue-900">
-                    LabConnect
-                  </Link>
-                </div>
-                <div className="hidden sm:ml-6 sm:block">
-                  <div className="flex space-x-4 ">
-                    {routes.map((item) => (
-                      <NavLink
-                        key={item.name}
-                        to={item.href}
-                        className={`${location === item.href
-                          ? "text-black"
-                          : "text-gray-600"
-                          } hover:text-gray-800  hover:bg-gray-200  mainnav-link`}
-                        aria-current={item.current}
-                      >
-                        {item.name}
-                      </NavLink>
-                    ))}
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
 
+          {/* Mobile Navigation */}
           <Disclosure.Panel className="sm:hidden">
-            <div className="space-y-1 px-2 pb-3 pt-2">
+            <div className="space-y-1 px-4 pt-2 pb-3">
               {routes.map((item) => (
                 <Disclosure.Button
                   key={item.name}
-                  as="a"
-                  href={item.href}
-                  className="btn-disclosure2 hover:bg-gray-200"
-                  aria-current={item.current ? "page" : undefined}
+                  as={Link}
+                  to={item.href}
+                  className={`${
+                    location === item.href
+                      ? "block text-blue-600 font-semibold py-2 border-l-4 border-blue-600 pl-4 transition-all duration-200"
+                      : "block text-gray-600 hover:text-blue-600 py-2 pl-4 transition-all duration-200"
+                  }`}
                 >
                   {item.name}
                 </Disclosure.Button>
diff --git a/src/shared/pages/Home.tsx b/src/shared/pages/Home.tsx
index 3535883a..14c349a1 100644
--- a/src/shared/pages/Home.tsx
+++ b/src/shared/pages/Home.tsx
@@ -1,55 +1,105 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
-import logo from "../../images/LabConnect_Logo2.webp";
+import logo from "../../images/Logo_transparentbg.png";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUserGraduate, faChalkboardTeacher } from "@fortawesome/free-solid-svg-icons";
 import SEO from "../components/SEO.tsx";
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+const Home = ({ signOut, signIn }) => {
+  useEffect(() => {
+    // Initialize AOS
+    AOS.init();
+  }, []);
 
-const Home = () => {
   return (
-    <section>
+    <section className="relative min-h-screen bg-white flex flex-col justify-between overflow-hidden">
+      {/* SEO */}
       <SEO title="Labconnect" description="Labconnect home page" />
-      <section className="home-general">
-        <br />
-        <br />
-        <br />
-        <div className="img-center">
-          <img src={logo} alt="LabConnect" height="289" />
-        </div>
 
-        <br />
-        <br />
-        <br />
-        <br />
+      {/* Header Section */}
+      <div className="relative container mx-auto text-center py-16 z-10">
+        {/* Logo */}
+        <div className="flex justify-center mb-8">
+          <img src={logo} alt="LabConnect Logo" className="w-48 md:w-64" />
+        </div>
 
-        <h1 className="text-xl">Welcome to LabConnect!</h1>
-        <br />
-        <p className="text-base">
-          If you are a student, go to the{" "}
-          <Link to="/jobs" className="blue-link hover:text-blue-900 focus:text-blue-900">
-            <b>Jobs</b>
-          </Link>{" "}
-          tab to view currently available research opportunities.
-          <br />
-          If you are a professor or staff member,{" "}
-          <Link to="/signin" className="blue-link text-blue-600 hover:text-blue-900 focus:text-blue-900">
-            <b>Sign In</b>
-          </Link>{" "}
-          and then go to{" "}
-          <Link to="/createPost" className="blue-link text-blue-600 hover:text-blue-900 focus:text-blue-900">
-            <b>Create</b>
-          </Link>{" "}
-          to start posting <br />
-          opportunities or{" "}
-          <Link to="/profile" className="blue-link text-blue-600 hover:text-blue-900 focus:text-blue-900">
-            <b>Profile</b>
-          </Link>{" "}
-          to view and edit your current posts.
+        {/* Headline */}
+        <h1 className="text-6xl font-extrabold text-gray-800 mb-4 drop-shadow-lg">
+          Welcome to LabConnect!
+        </h1>
+        <p className="text-xl text-gray-600 mb-12 drop-shadow-md">
+          Your gateway to lab and research opportunities on campus.
         </p>
-        <br />
-        <br />
-        <br />
-      </section>
-    </section>
-  );
-};
 
-export default Home;
+        {/* Call to Action Button */}
+        <Link
+          to="/jobs"
+          className="btn btn-lg bg-gradient-to-r from-blue-500 to-indigo-500 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all"
+        >
+          Explore Opportunities
+        </Link>
+      </div>
+
+      {/* Info Section */}
+      <div className="relative bg-white py-16 shadow-inner z-10">
+        <div className="container mx-auto text-center">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 px-6">
+            {/* Students Card */}
+            <div
+              className="p-8 bg-gray-50 rounded-lg shadow-lg transition-all hover:rotate-3 hover:bg-gradient-to-r from-blue-50 to-indigo-50"
+              data-aos="fade-up"
+              data-aos-duration="800"
+            >
+              <FontAwesomeIcon icon={faUserGraduate} className="text-6xl text-blue-600 mb-4" />
+              <h2 className="text-3xl font-semibold text-blue-600 mb-2">
+                For Students
+              </h2>
+              <p className="text-lg text-gray-700 mb-4">
+                Browse available research opportunities and connect with professors to kickstart your lab experience.
+                </p>
+                <Link
+                  to="/students"
+                  className="btn btn-md bg-blue-500 text-white py-2 px-4 rounded-full shadow-md hover:bg-blue-600 transition-all"
+                >
+                  Learn More
+                </Link>
+              </div>
+  
+              {/* Professors & Staff Card */}
+              <div
+                className="p-8 bg-gray-50 rounded-lg shadow-lg transition-all hover:rotate-3 hover:bg-gradient-to-r from-indigo-50 to-purple-50"
+                data-aos="fade-up"
+                data-aos-duration="800"
+                data-aos-delay="200"
+              >
+                <FontAwesomeIcon icon={faChalkboardTeacher} className="text-6xl text-indigo-600 mb-4" />
+                <h2 className="text-3xl font-semibold text-indigo-600 mb-2">
+                  For Professors & Staff
+                </h2>
+                <p className="text-lg text-gray-700 mb-4">
+                  Post research openings and find talented students eager to contribute to your projects.
+                </p>
+                <Link
+                  to="/professors"
+                  className="btn btn-md bg-indigo-500 text-white py-2 px-4 rounded-full shadow-md hover:bg-indigo-600 transition-all"
+                >
+                  Learn More
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+  
+  
+        {/* Background Elements */}
+        <div className="absolute inset-0 bg-gradient-to-b from-indigo-200 to-blue-300 opacity-30 z-0"></div>
+        <div className="absolute top-0 left-0 w-72 h-72 bg-indigo-400 rounded-full opacity-20 blur-3xl -z-10"></div>
+        <div className="absolute bottom-0 right-0 w-72 h-72 bg-blue-400 rounded-full opacity-20 blur-3xl -z-10"></div>
+      </section>
+    );
+  };
+  
+  export default Home;
+  
\ No newline at end of file