diff --git a/package-lock.json b/package-lock.json
index 2b781bb..701f05e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,6 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.23.1",
-        "react-tsparticles": "^2.12.2",
         "semantic-ui-css": "^2.5.0",
         "semantic-ui-react": "^2.1.5",
         "tsparticles": "^3.5.0"
@@ -4984,33 +4983,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-tsparticles": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/react-tsparticles/-/react-tsparticles-2.12.2.tgz",
-      "integrity": "sha512-/nrEbyL8UROXKIMXe+f+LZN2ckvkwV2Qa+GGe/H26oEIc+wq/ybSG9REDwQiSt2OaDQGu0MwmA4BKmkL6wAWcA==",
-      "deprecated": "@tsparticles/react is the new version, please use that",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "hasInstallScript": true,
-      "dependencies": {
-        "tsparticles-engine": "^2.12.0"
-      },
-      "peerDependencies": {
-        "react": ">=16"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5815,27 +5787,6 @@
         "@tsparticles/updater-wobble": "^3.5.0"
       }
     },
-    "node_modules/tsparticles-engine": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz",
-      "integrity": "sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ==",
-      "deprecated": "starting from tsparticles v3 the packages are now moved to @tsparticles/package-name instead of tsparticles-package-name",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/tsparticles"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "hasInstallScript": true
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index eb562f5..cdd3652 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
-    "react-tsparticles": "^2.12.2",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
     "tsparticles": "^3.5.0"
diff --git a/src/components/AnimatedBackGround.jsx b/src/components/AnimatedBackGround.jsx
index ba5ae03..7a09d8a 100644
--- a/src/components/AnimatedBackGround.jsx
+++ b/src/components/AnimatedBackGround.jsx
@@ -1,6 +1,18 @@
 export default function AnimatedBackGround() {
+  //Make sure this component has the lowest z-index, overwise it would block all others
   return (
-    <ul className="circles">
+    <ul className="circles z-0">
+      {/*Each <li> is an animated square*/}
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
       <li></li>
       <li></li>
       <li></li>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index cfb5da8..2be45a9 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,29 +1,30 @@
 import Statistics from "./Stats/Statistics";
 import SocialMediaLinks from "./SocialMediaLinks";
 import EventsPhotoCarousel from "./EventsPhotoCarousel";
+import AnimatedBackGround from "./AnimatedBackGround";
 
 function Hero() {
   return (
-    <section className="hero">
-      <div className="hero-container">
-        <div className="md:w-1/2 flex flex-col items-center justify-between">
-          <h1 className="text-4xl md:text-6xl font-bold leading-tight px-6">
-            The Software Developers Association
-          </h1>
-          <p className="mt-4 text-xl px-6">
-            The premiere software development club for Arizona State University
-            students.
-          </p>
-          <Statistics />
-          <SocialMediaLinks />
+    <>
+      <section className="hero">
+        <AnimatedBackGround />
+        <div className="hero-container z-10">
+          <div className="md:w-1/2 flex flex-col items-center justify-between">
+            <h1 className="text-4xl md:text-6xl font-bold leading-tight px-6">
+              The Software Developers Association
+            </h1>
+            <p className="mt-4 text-xl px-6">
+              The premiere software development club for Arizona State
+              University students.
+            </p>
+            <Statistics />
+            <SocialMediaLinks />
+          </div>
+          <EventsPhotoCarousel />
         </div>
-        <EventsPhotoCarousel />
-      </div>
-    </section>
+      </section>
+    </>
   );
 }
 
 export default Hero;
-
-
-
diff --git a/src/components/SocialMediaLinks.jsx b/src/components/SocialMediaLinks.jsx
index f83ef82..325290f 100644
--- a/src/components/SocialMediaLinks.jsx
+++ b/src/components/SocialMediaLinks.jsx
@@ -2,16 +2,24 @@ import { FaLinkedin } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
 import { FaFacebookSquare } from "react-icons/fa";
 import { FaGithub } from "react-icons/fa";
-import { FaSquareXTwitter } from "react-icons/fa6";
 import { CgWebsite } from "react-icons/cg";
+import { FaDiscord } from "react-icons/fa6";
+import { IoLogoFreebsdDevil } from "react-icons/io";
 
 const socialMediaLinks = [
-  { href: "https://www.linkedin.com", icon: <FaLinkedin /> },
-  { href: "https://www.instagram.com", icon: <RiInstagramFill /> },
-  { href: "https://www.facebook.com", icon: <FaFacebookSquare /> },
-  { href: "https://www.github.com", icon: <FaGithub /> },
-  { href: "https://www.twitter.com", icon: <FaSquareXTwitter /> },
-  { href: "https://www.yourwebsite.com", icon: <CgWebsite /> },
+  { href: "https://thesoda.io/", icon: <CgWebsite /> },
+  { href: "https://www.linkedin.com/company/thesoda/", icon: <FaLinkedin /> },
+  { href: "https://www.instagram.com/soda.asu/", icon: <RiInstagramFill /> },
+  {
+    href: "https://discord.gg/the-software-developers-association-762811961238618122",
+    icon: <FaDiscord />,
+  },
+  { href: "https://www.facebook.com/SoDAASU/", icon: <FaFacebookSquare /> },
+  { href: "https://github.com/asusoda", icon: <FaGithub /> },
+  {
+    href: "https://asu.campuslabs.com/engage/organization/soda",
+    icon: <IoLogoFreebsdDevil />,
+  },
 ];
 
 export default function SocialMediaLinks() {
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 2b70ed8..3f2bd2d 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,16 +2,15 @@ import InfoCards from "../components/Info/InfoCards";
 import MemberCards from "../components/Team/TeamCards";
 import Hero from "../components/Hero";
 import SponsorsMarquee from "../components/Sponsors/SponsorsMarquee";
-import AnimatedBackGround from "../components/AnimatedBackGround";
 
 function Home() {
   return (
     <section className="home area">
       <Hero />
-      <AnimatedBackGround />
       <SponsorsMarquee />
       <MemberCards />
       <InfoCards />
+      {/* <AnimatedBackGround /> */}
     </section>
   );
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index aacaa04..b3f4ad1 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -179,7 +179,7 @@ body {
 /* --------- STATS --------- */
 .statistics {
   @apply bg-soda-white max-md:w-screen text-soda-black flex  
-  flex-row gap-5 py-6 max-lg:px-10 px-8 my-3 justify-center flex-wrap sm:rounded-full;
+  flex-row gap-5 py-6 max-lg:px-10 px-8 my-3 justify-center flex-wrap sm:rounded-full z-10;
 }
 
 .stat-container {
@@ -236,7 +236,7 @@ footer {
 
 /* --------- SOCIAL MEDIA LINKS --------- */
 .social-media-links {
-  @apply flex gap-4 text-3xl bg-soda-white rounded-full p-4 text-soda-black justify-center max-w-80;
+  @apply flex gap-4 text-3xl bg-soda-white rounded-full py-4 px-16 text-soda-black justify-center max-w-80 z-10;
 }
 
 /* --------- BUTTON --------- */
diff --git a/vite.config.js b/vite.config.js
index 79c5ca9..52a48ff 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,9 @@ import tailwindcss from "tailwindcss";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  optimizeDeps: {
+    exclude: ['js-big-decimal']
+  },
   plugins: [react()],
   css: {
     postcss: {