diff --git a/.env.example b/.env.example
deleted file mode 100644
index e153873..0000000
--- a/.env.example
+++ /dev/null
@@ -1,2 +0,0 @@
-CALENDAR_API_KEY=YOUR_API_KEY
-EVENT_CALENDAR_ID=YOUR_EVENT_CALENDAR_ID
\ No newline at end of file
diff --git a/src/components/core/Footer.astro b/src/components/core/Footer.astro
index 316a03d..db12d2b 100644
--- a/src/components/core/Footer.astro
+++ b/src/components/core/Footer.astro
@@ -5,22 +5,22 @@ import whiteLogoHorizontal from "../../images/logos/white_logo_horizontal.svg";
 import { IoHeart } from "react-icons/io5";
 ---
 
-<div class="w-full py-[2%] flex justify-center">
+<div class="w-full md:py-[2%] py-[3vw] flex justify-center">
     <div
-        class="w-[95%] bg-black/40 py-[1%] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between"
+        class="w-[95%] bg-black/40 md:py-[1%] py-[2vw] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between"
     >
         <Link href="/" className="hover:opacity-70 duration-300">
             <Image
-                class="w-[15vw]"
+                class="md:w-[15vw] w-[35vw]"
                 src={whiteLogoHorizontal}
                 alt="IEEE UCSD Logo"
             />
         </Link>
         <div class="flex items-center">
-            <p class="text-white text-[1.2vw]">
+            <p class="text-white md:text-[1.2vw] text-[2.7vw]">
                 made by IEEE UCSD webmasters with
             </p>
-            <IoHeart className=" text-ieee-blue-100 ml-[1vw] text-[1.5vw]" />
+            <IoHeart className=" text-ieee-blue-100 ml-[1vw] md:text-[1.5vw] text-[4vw]" />
         </div>
     </div>
 </div>
diff --git a/src/components/core/Question.astro b/src/components/core/Question.astro
index 2f8d67b..ba998be 100644
--- a/src/components/core/Question.astro
+++ b/src/components/core/Question.astro
@@ -1,11 +1,11 @@
 ---
 const {question, answer} = Astro.props;
 ---
-<div class = "text-white w-full flex flex-col mb-[2vh]">
-    <p data-inview class = "in-view:animate-fade-right text-ieee-yellow text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
+<div class = "text-white w-full flex flex-col mb-[2vh] animate-ease-in-out">
+    <p data-inview class = "in-view:animate-fade-right text-ieee-yellow text-[2.5vw] md:text-[1.4vw] mb-[2vh] font-semibold pl-[1vw]">
     {question}
     </p>
-    <p data-inview class = "w-[60%] mb-[2vh] pl-[1vw] in-view:animate-fade-left">
+    <p data-inview class = "md:w-[70%] w-[80%] mb-[2vh] pl-[1vw] text-[2vw] md:text-[1.2vw] in-view:animate-fade-left animate-ease-in-out">
         {answer}
     </p>    
     <dev>
diff --git a/src/components/core/Questions.astro b/src/components/core/Questions.astro
index 8b67fc2..b10f878 100644
--- a/src/components/core/Questions.astro
+++ b/src/components/core/Questions.astro
@@ -4,8 +4,8 @@ import { LiaDotCircle } from "react-icons/lia";
 const {faq} = Astro.props;
 
 ---
-<div class = "text-white w-full h-[90vh] ml-[15vw] mb-[20%] mt-[10%]">
-    <div class = "text-[2.5vw] flex items-center my-[7vh]">
+<div class = "text-white md:ml-[15vw] ml-[10vw] mb-[20%] mt-[10%]">
+    <div class = "text-[4.5vw] md:text-[2.5vw] flex items-center my-[7vh]">
         <LiaDotCircle className = "mr-[1vw]" />
         <p>
             Frequently Asked Questions
diff --git a/src/components/core/Social.astro b/src/components/core/Social.astro
index 9d962f9..df98eef 100644
--- a/src/components/core/Social.astro
+++ b/src/components/core/Social.astro
@@ -1,71 +1,71 @@
 ---
 import { LiaDotCircle } from "react-icons/lia";
 import { Image } from "astro:assets";
-import evan from "../../images/evan.png";
-import { FaDiscord, FaFacebook } from "react-icons/fa";
+import jellyfish from "../../images/jellyfish.png";
+import { FaDiscord } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
+import { MdEmail } from "react-icons/md";
 import Link from "next/link";
 ---
 
-<div class="text-white flex flex-col items-center h-[65vh] justify-between">
-    <div class="flex items-center text-[2.5vw]">
+<div class="text-white flex flex-col items-center md:h-[35vw] h-[60vw] justify-between">
+    <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
         <p>Social Media</p>
     </div>
 
-    <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
-        Lorem ipsum is placeholder text commonly used in the graphic, print, and
-        publishing industries f
+    <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%]">
+        Stay connected with us on Discord, Facebook, and Instagram! We regularly post information on upcoming events and competitions.
     </p>
 
     <div
-        class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90"
+        class="md:w-[85%] w-full rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative md:h-[15vw] h-[30vw] flex items-center text-white/90"
     >
-        <div data-inview class="w-2/5 flex justify-evenly ml-[5%] in-view:animate-flip-up animate-duration-1000">
-            <Link
-                href="https://discord.gg/XxfjqZSjca"
-                target="_blank"
-                className="flex flex-col items-center"
-            >
-                <div
-                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
-                >
-                    <FaDiscord />
-                </div>
-                <p class="text-[1.3vw] font-semibold">Discord</p>
-            </Link>
-
-            <Link
-                href="https://www.facebook.com/ieeeucsd"
-                target="_blank"
-                className="flex flex-col items-center"
-            >
-                <div
-                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
-                >
-                    <FaFacebook />
-                </div>
-                <p class="text-[1.3vw] font-semibold">Facebook</p>
-            </Link>
-
+        <div data-inview class="md:w-2/5 w-1/2 flex justify-evenly ml-[5%] animate-ease-in-out in-view:animate-flip-up animate-duration-1000">
             <Link
                 href="https://www.instagram.com/ieee.ucsd"
                 target="_blank"
                 className="flex flex-col items-center"
             >
                 <div
-                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
+                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                 >
                     <RiInstagramFill />
                 </div>
-                <p class="text-[1.3vw] font-semibold">Instagram</p>
+                <p class="text-[2vw] md:text-[1.3vw] font-semibold">Instagram</p>
+            </Link>
+            
+            <Link
+                href="https://discord.gg/XxfjqZSjca"
+                target="_blank"
+                className="flex flex-col items-center"
+            >
+                <div
+                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
+                >
+                    <FaDiscord />
+                </div>
+                <p class="text-[2vw] md:text-[1.3vw] font-semibold">Discord</p>
+            </Link>
+
+            <Link
+                href="mailto:ieee@ucsd.edu"
+                target="_blank"
+                className="flex flex-col items-center"
+            >
+                <div
+                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
+                >
+                    <MdEmail />
+                </div>
+                <p class="text-[2vw] md:text-[1.3vw] font-semibold">Email</p>
             </Link>
         </div>
         <Image
             data-inview
-            src={evan}
+            src={jellyfish}
             alt="cat placeholder"
-            class="absolute -bottom-[10vh] w-[25vw] right-0 in-view:animate-wiggle"
+            class="absolute bottom-0 md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
         />
     </div>
 </div>
diff --git a/src/components/join/BuildingLocation.astro b/src/components/join/BuildingLocation.astro
index 1d69b1e..2b500eb 100644
--- a/src/components/join/BuildingLocation.astro
+++ b/src/components/join/BuildingLocation.astro
@@ -4,12 +4,12 @@
 
 <div
     data-inview
-    class="flex flex-col items-center w-[40vw] my-[10%] in-view:animate-fade-down"
+    class="flex flex-col items-center md:w-[40vw] w-[100vw] h-[100vw] md:h-[40vw] my-[10%] in-view:animate-fade-down"
 >
-    <p class="text-ieee-yellow text-[1.2vw]">Each officer has their own OAH</p>
-    <p class="text-white text-[2.5vw] my-[2%]">Check out our calendar!</p>
+    <p class="text-ieee-yellow md:text-[1.2vw] text-[2.5vw]">Each officer has their own OAH</p>
+    <p class="text-white md:text-[2.5vw] text-[4.5vw] my-[2%]">Check out our calendar!</p>
     <iframe
-        class="object-cover aspect-[1000/400] w-[90%] rounded-[1.5vw]"
+        class="w-[90%] rounded-[1.5vw]"
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3350.627565860723!2d-117.23806952372503!3d32.881572078634505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dc06c3689b4f99%3A0xdf55f97f07f34d4f!2sIrwin%20%26%20Joan%20Jacobs%20School%20of%20Engineering!5e0!3m2!1sen!2sus!4v1736755644414!5m2!1sen!2sus"
         width="600"
         height="450"
diff --git a/src/components/join/Findus.astro b/src/components/join/Findus.astro
index 0b151c9..3bc773d 100644
--- a/src/components/join/Findus.astro
+++ b/src/components/join/Findus.astro
@@ -3,8 +3,7 @@ import OAH from "./OAH.astro";
 import BuildingLocation from "./BuildingLocation.astro";
 ---
 
-<div class="w-full flex justify-evenly px-[10%]">
+<div class="w-full flex flex-col md:flex-row items-center md:justify-evenly px-[10%]">
     <OAH />
-
     <BuildingLocation />
 </div>
diff --git a/src/components/join/Involvement.astro b/src/components/join/Involvement.astro
index 8eefd57..ab75b23 100644
--- a/src/components/join/Involvement.astro
+++ b/src/components/join/Involvement.astro
@@ -6,16 +6,16 @@ import { IoMdCalendar } from "react-icons/io";
 import { RiRobot2Fill } from "react-icons/ri";
 const {image, text, link, delay} = Astro.props;
 ---
-<div data-inview class={`w-[15vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
+<div data-inview class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
 
     <img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
     <Link 
         href={link}
         target={text==="H.A.R.D. HACK"? "_blank":"_self"} 
-        className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
+        className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
     >
-        <div class="w-full flex justify-end pr-[5%]">
-            <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
+        <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
+            <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]">
                 {
                     text === "PROJECTS"? <RiRobot2Fill/>:
                     text === "EVENTS"? <IoMdCalendar/>:
@@ -24,16 +24,16 @@ const {image, text, link, delay} = Astro.props;
             </div>
         </div>
     
-        <div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[30%] pb-[5%]">
-            <div class="text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
+        <div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]">
+            <div class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
                 <p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
                     {text}
                 </p>
-                <GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow"/>
+                <GoArrowDownRight className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/>
             </div>
     
             {text === "H.A.R.D. HACK" &&
-                <p class="text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
+                <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
                     UC San Diego’s largest
                     hardware focused hackathon
                     hold by IEEE UCSD, HKN, and TNT
diff --git a/src/components/join/Involvements.astro b/src/components/join/Involvements.astro
index cfc95b6..a6c3da2 100644
--- a/src/components/join/Involvements.astro
+++ b/src/components/join/Involvements.astro
@@ -2,8 +2,8 @@
 import Involvement from "./Involvement.astro";
 import involve from "../../data/involve.json";
 ---
-<div class="pl-[10%] pr-[6%] flex items-center mb-[10%]">
-    <div class="flex w-3/5 justify-between">
+<div class="pl-[10%] pr-[6%] flex md:items-center md:mb-[10%] mb-[30vw] mt-[20vw] md:mt-0 flex-col-reverse md:flex-row">
+    <div class="flex md:w-3/5 w-[95%] justify-between">
         {involve.map((item)=>(
             <Involvement
              text = {item.text}
@@ -14,11 +14,11 @@ import involve from "../../data/involve.json";
          ))}
     </div>
 
-    <div class="w-2/5 flex flex-col px-[5%]">
-        <p class="text-ieee-yellow text-[1.2vw] mb-[5%]">
-            Get involve in international IEEE
+    <div class="md:w-2/5 w-4/5 flex flex-col px-[5%] pb-[10vw] md:pb-0">
+        <p class="text-ieee-yellow md:text-[1.2vw] text-[2.5vw] mb-[5%]">
+            Get involve in IEEE @ UCSD
         </p>
-        <p class="text-white text-[2vw] font-bold">
+        <p class="text-white md:text-[2vw] text-[3vw] font-bold">
             How To Keep Up With And Get Engaged With IEEE at UCSD
         </p>
     </div>
diff --git a/src/components/join/JoinTitle.astro b/src/components/join/JoinTitle.astro
index 831f9ec..988e775 100644
--- a/src/components/join/JoinTitle.astro
+++ b/src/components/join/JoinTitle.astro
@@ -3,19 +3,19 @@ import Link from "next/link";
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="pt-[14vh] text-white w-full flex justify-center mb-[20vh]">
-    <div class="w-3/4 h-[40vh] flex justify-between flex-col">
-        <div data-inview class="flex items-center text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right">
+<div class="md:pt-[7vw] pt-[15vw] text-white w-full flex justify-center mb-[10vw]">
+    <div class="w-3/4 md:h-[20vw] h-[40vw] flex justify-between flex-col">
+        <div data-inview class=" animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right">
             <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
             <p>
                 Join Us
             </p>
         </div>
-        <p class="text-[1.25vw]">
+        <p class="text-[2.2vw] md:text-[1.25vw]">
             The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
         </p>
-        <div data-inview class="flex justify-end in-view:animate-fade-up">
-            <Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+        <div data-inview class="animate-ease-in-out flex justify-end in-view:animate-fade-up">
+            <Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="text-[2.5vw] md:text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
                 JOIN
             </Link>
         </div>
diff --git a/src/components/join/OAH.astro b/src/components/join/OAH.astro
index bf86022..c638f24 100644
--- a/src/components/join/OAH.astro
+++ b/src/components/join/OAH.astro
@@ -4,12 +4,12 @@
 
 <div
     data-inview
-    class="flex flex-col items-center w-[40vw] my-[10%] in-view:animate-fade-down"
+    class="flex flex-col items-center md:w-[40vw] w-[100vw] h-[100vw] md:h-[40vw] my-[10%] in-view:animate-fade-down"
 >
-    <p class="text-ieee-yellow text-[1.2vw]">Each officer has their own OAH</p>
-    <p class="text-white text-[2.5vw] my-[2%]">Check out our calendar!</p>
+    <p class="text-ieee-yellow md:text-[1.2vw] text-[2.5vw]">Each officer has their own OAH</p>
+    <p class="text-white md:text-[2.5vw] text-[4.5vw] my-[2%]">Check out our calendar!</p>
     <iframe
-        class="object-cover aspect-[1000/400] w-[90%] rounded-[1.5vw]"
+        class="w-[90%] rounded-[1.5vw]"
         src="https://calendar.google.com/calendar/embed?src=c_62493071bab19c7c60d103460604dc7b3b569ffc1e58a42617978f626dff02ac%40group.calendar.google.com&ctz=America%2FLos_Angeles"
         style="border: 0"
         width="600"
diff --git a/src/components/join/Resource.jsx b/src/components/join/Resource.jsx
index 60b966b..5f53ca0 100644
--- a/src/components/join/Resource.jsx
+++ b/src/components/join/Resource.jsx
@@ -2,19 +2,19 @@ import Link from "next/link";
 
 const Resource = ({icon, title, text, link}) => {
     return (
-        <div class="text-white flex w-[30vw] items-center">
-            <div class = "mr-[1vw] bg-gradient-radial from-ieee-blue-300 via-ieee-black to-ieee-black rounded-full text-[6.5vw] aspect-square w-[12vw] flex justify-center items-center">
+        <div class="text-white flex md:w-[30vw] w-[40vw] items-center">
+            <div class = "mr-[1vw] bg-gradient-radial from-ieee-blue-300 via-ieee-black to-ieee-black rounded-full text-[8vw] md:text-[6.5vw] aspect-square w-[12vw] flex justify-center items-center">
                 {icon}
             </div>
-            <div class="w-[24vw]">
-                <p class = "text-[1.8vw] mb-[2vh] font-extralight">
+            <div class="md:w-[24vw] w-[27vw] ">
+                <p class = "md:text-[1.8vw] text-[2.5vw] mb-[2vh] font-extralight">
                     {title}
                 </p>
-                <p class = "text-[1vw] mb-[1vh] font-light">
+                <p class = "md:text-[1vw] text-[1.8vw] mb-[1vh] font-light">
                     {text}
                 </p>
                 <div class="flex justify-end mt-[5%]">
-                    <Link href={link} target="_blank" className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[11%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+                    <Link href={link} target="_blank" className=" md:text-[1.1vw] text-[2vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[11%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
                         VIEW
                     </Link>
                 </div>
diff --git a/src/components/join/Resources.jsx b/src/components/join/Resources.jsx
index b57f3a9..e0ed9f9 100644
--- a/src/components/join/Resources.jsx
+++ b/src/components/join/Resources.jsx
@@ -1,29 +1,29 @@
 import Resource from "./Resource.jsx"
 import { LiaDotCircle } from "react-icons/lia";
 import { RiSlideshowLine } from "react-icons/ri";
-import { BiMoviePlay } from "react-icons/bi";
+import { IoMdGlobe } from "react-icons/io";
 
 const Resources = () => {
     return (
-        <div class = "text-white w-full flex flex-col items-center h-[55vh] justify-center">
-            <div class = "text-[2.5vw] flex items-center">
+        <div class = "text-white w-full flex flex-col items-center justify-center mb-[20vw] md:mb-[5vw]">
+            <div class = "text-[4.5vw] md:text-[2.5vw] flex items-center">
                 <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
                 <p>
                     Member Resources 
                 </p>
             </div>
-            <div class = " w-[90%] flex justify-evenly mt-[9vh]">
+            <div class = "md:w-[90%] w-full flex justify-evenly mt-[5vw]">
                 <Resource 
                 icon = <RiSlideshowLine/>
                 title = "Workshop Slides" 
-                text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor" 
+                text = "Find our database of workshop slides here." 
                 link = "http://www.google.com"
                 /> 
                 <Resource 
-                icon = <BiMoviePlay/>
-                title = "Workshop Videos" 
-                text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor" 
-                link = "http://www.google.com"
+                icon = <IoMdGlobe/>
+                title = "International IEEE" 
+                text = "Our parent organization provides variety of events including project sponsorship, IEEE DataPort dataset database, and renowned student contests." 
+                link = "https://www.ieee.org/"
                 /> 
             </div>
         </div>
diff --git a/src/components/main_page/About.astro b/src/components/main_page/About.astro
index b4e8088..4562da5 100644
--- a/src/components/main_page/About.astro
+++ b/src/components/main_page/About.astro
@@ -8,51 +8,49 @@ import about3 from "../../images/about3.png";
 import about4 from "../../images/about4.png";
 ---
 
----
-
 <div
-    class="flex border-white/40 border-[0.1vw] rounded-[2vw] h-[85vh] px-[10%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black"
+    class="flex border-white/40 border-[0.1vw] rounded-[2vw] md:h-[43vw] h-[60vw] md:px-[10%] px-[6%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black"
 >
-    <div class="w-1/2 flex justify-center pr-[5%] relative">
+    <div class="w-1/2 flex justify-center pr-[5%] relative h-full">
         <div class="relative w-[35vw]">
-            <Image src={about} alt="About background image" />
+            <Image src={about} alt="About background image" class="md:visible invisible" />
             <Image
                 src={about4}
                 alt="About image"
-                class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]"
+                class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[33vw] md:w-[25vw] rounded-[2vw]"
             />
         </div>
         <Image
             data-inview
             src={about2}
             alt="About image"
-            class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%] in-view:animate-fade-right"
+            class="animate-ease-in-out absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] md:-left-[15%] -left-[8%] in-view:animate-fade-right"
         />
         <Image
             data-inview
             src={about3}
             alt="About image"
-            class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0 in-view:animate-fade-up"
+            class="animate-ease-in-out absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0 in-view:animate-fade-up"
         />
         <div
             data-inview
-            class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%] in-view:animate-fade-left"
+            class="animate-ease-in-out absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%] in-view:animate-fade-left"
         >
         </div>
         <div
             data-inview
-            class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%] in-view:animate-fade-left"
+            class="animate-ease-in-out absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%] in-view:animate-fade-left"
         >
         </div>
     </div>
-    <div class="w-1/2 text-white text-[1.3vw] font-light">
+    <div class="w-1/2 text-white text-[1.8vw] md:text-[1.3vw] font-light">
         <p
-            class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[1.3vw] ml-[8%] mb-[6%] leading-none"
+            class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[2vw] md:text-[1.3vw] ml-[8%] mb-[6%] leading-none"
         >
             we are ...
         </p>
         <div
-            class="text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]"
+            class="text-[5vw] md:text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]"
         >
             <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
             <p>About Us</p>
@@ -71,7 +69,7 @@ import about4 from "../../images/about4.png";
         <div class="flex justify-end mt-[2%]">
             <Link
                 href="/join"
-                className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
+                className=" text-[2vw] md:text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
             >
                 LEARN MORE
             </Link>
diff --git a/src/components/main_page/Activities.astro b/src/components/main_page/Activities.astro
index c49a60d..395a6b9 100644
--- a/src/components/main_page/Activities.astro
+++ b/src/components/main_page/Activities.astro
@@ -4,19 +4,19 @@ import activities from "../../data/activities.json"
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="flex flex-col items-center h-[100vh] justify-between text-white my-[10vw]">
-    <div class="flex items-center text-[2.5vw]">
+<div class="flex flex-col items-center md:h-[50vw] justify-between text-white md:my-[10vw] my-[20vw]">
+    <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
         <p>
             Events & Projects
         </p>
     </div>
 
-    <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
-        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries f
+    <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%] my-[8vw] md:my-0">
+        Your involvement in IEEE @ UCSD can be tailored to your professional goals, interests, and quarterly schedules.
     </p>
 
-    <div class="flex justify-evenly w-[90%]">
+    <div class="md:flex justify-evenly md:w-[90%] grid grid-cols-2 gap-[5vw] md:gap-0">
         {activities.map((activity) => (
             <Activity 
                 title={activity.title} 
diff --git a/src/components/main_page/Activity.astro b/src/components/main_page/Activity.astro
index bc9ce21..89d81ef 100644
--- a/src/components/main_page/Activity.astro
+++ b/src/components/main_page/Activity.astro
@@ -4,20 +4,20 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
 const {  title, text, link, number, delay  } = Astro.props;
 ---
 
-<div data-inview class={`relative text-white flex flex-col items-center w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black h-[63vh] border-[0.1vw] border-white/40 rounded-[2vw] pt-[5%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}>
-    <div class="rounded-full aspect-square w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
-    <p class="text-[1.7vw] font-bold text-center">
+<div data-inview class={`animate-ease-in-out relative text-white flex flex-col items-center w-[30vw] md:w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black md:h-[33vw] h-[40vw] border-[0.1vw] border-white/40 rounded-[2vw] md:pt-[5%] pt-[15%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}>
+    <div class="rounded-full aspect-square w-[7vw] md:w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
+    <p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center">
         {title}
     </p>
-    <p class="text-[1.2vw] w-4/5 mt-[15%] mb-[25%]">
+    <p class={`text-[1.7vw] md:text-[1.2vw] w-4/5 ${title === "Professional Development" ? "md:mt-[2%] mt-[2%]":"md:mt-[15%] mt-[5%]"}`}>
         {text}
     </p>
 
-    <Link href={link} className="flex items-center text-[1.2vw] mb-[3%] absolute bottom-[22%] hover:text-ieee-yellow duration-300">
+    <Link href={link} className="flex items-center text-[2vw] md:text-[1.2vw] mb-[3%] absolute md:bottom-[22%] bottom-[25%] hover:text-ieee-yellow duration-300">
         more details
-        <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/>
+        <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"/>
     </Link>
-    <p class="text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
+    <p class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
         {number}
     </p>
 </div>
\ No newline at end of file
diff --git a/src/components/main_page/Divider.astro b/src/components/main_page/Divider.astro
index 1fe46d0..e7f536d 100644
--- a/src/components/main_page/Divider.astro
+++ b/src/components/main_page/Divider.astro
@@ -1,15 +1,14 @@
-<div class="flex py-[15vh] px-[7vw] items-end w-full">
-    <div class="w-3/5">
-        <p data-inview class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-fade-right">
+<div class="flex py-[25vw] md:py-[8vw] px-[7vw] items-end w-full">
+    <div class="w-2/5">
+        <p data-inview class="animate-ease-in-out text-ieee-yellow text-[7vw] md:text-[4.5vw] font-semibold in-view:animate-fade-right">
             02
         </p>
-        <p data-inview class="text-white text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100">
-            Amet Consectetur
+        <p data-inview class="text-white text-[3.5vw] md:text-[2.5vw] font-light in-view:animate-fade-right animate-delay-100">
+            2nd Largest in the US?
         </p>
 
     </div>
-    <p data-inview class="text-white text-[1.5vw] in-view:animate-fade-left">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    <p data-inview class="animate-ease-in-out text-white text-[2vw] md:text-[1.3vw] in-view:animate-fade-left w-3/5 font-light">
+        The community of engineers at IEEE @ UCSD has consistently been one of the largest in the country. In 2021 and 2022, we won the 2nd Largest Student Branch Award in the US and we strive to win it again in the coming year. 
     </p>
 </div >
diff --git a/src/components/main_page/Landing.astro b/src/components/main_page/Landing.astro
index 8c51293..9d113e9 100644
--- a/src/components/main_page/Landing.astro
+++ b/src/components/main_page/Landing.astro
@@ -1,29 +1,35 @@
 ---
 import { Image } from "astro:assets";
 import Link from "next/link";
-import { landing } from "../../data/landing";
 import landingimg from "../../images/landing.png";
-import { FaDiscord, FaFacebook } from "react-icons/fa";
+import { FaDiscord } from "react-icons/fa";
 import { RiInstagramFill } from "react-icons/ri";
+import { MdEmail } from "react-icons/md";
 ---
 
-<div class="w-full flex justify-between pt-[14vh]">
+<div class="w-full flex justify-between md:pt-[14vh] pt-[12vw]">
     <div
-        class="pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw]"
+        class="md:pt-[5%] pt-[6%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw]"
     >
-        <p data-inview class="text-ieee-yellow font-bold text-[2.2vw] mb-[3%] in-view:animate-flip-down">
+        <p data-inview class="animate-ease-in-out text-ieee-yellow font-bold text-[3.5vw] md:text-[2.2vw] mb-[3%] in-view:animate-flip-down">
             UC San Diego IEEE
         </p>
-        <p data-inview class="font-bold text-[2.8vw] text-white mb-[10%] in-view:animate-fade-right">
+        <p data-inview class="animate-ease-in-out font-bold  text-[3.6vw] md:text-[2.8vw] text-white mb-[6%] in-view:animate-fade-right">
             Join one of the largest IEEE student branch in the US!
         </p>
-        <p class="text-white font-light text-[1.3vw]">
-            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-            commodo consequat
+        <p class="text-white font-light  text-[2vw] md:text-[1.3vw]">
+            IEEE @ UCSD is a pre-professional organization aiming to empower engineers with practical experience through hands-on project opportunities, insightful workshops, and panels with industry professionals. We are a branch organization of the International IEEE organization. 
         </p>
 
-        <div class="flex justify-end w-full mt-[8vh]">
-            <div class="text-white text-[2.5vw] w-1/2 flex justify-between">
+        <div class="flex justify-end w-full mt-[6%]">
+            <div class="text-white  text-[3.5vw] md:text-[2.5vw] w-1/2 flex justify-between">
+                <Link
+                    href="https://www.instagram.com/ieee.ucsd"
+                    target="_blank"
+                    className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
+                >
+                    <RiInstagramFill />
+                </Link>
                 <Link
                     href="https://discord.gg/XxfjqZSjca"
                     target="_blank"
@@ -33,25 +39,18 @@ import { RiInstagramFill } from "react-icons/ri";
                 </Link>
 
                 <Link
-                    href="https://www.facebook.com/ieeeucsd"
+                    href="mailto:ieee@ucsd.edu"
                     target="_blank"
                     className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
                 >
-                    <FaFacebook />
-                </Link>
-                <Link
-                    href="https://www.instagram.com/ieee.ucsd"
-                    target="_blank"
-                    className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
-                >
-                    <RiInstagramFill />
+                    <MdEmail />
                 </Link>
             </div>
         </div>
     </div>
     <div
-        class="w-[46%] h-[80vh] border-white/70 border-[0.1vw] rounded-[3vw] object-contain bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
+        class="md:w-[46%] w-[40%] md:h-[40vw] h-[60vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black"
     >
-        <Image src={landingimg} alt="circuit" class="w-[95%]" />
+        <Image src={landingimg} alt="circuit" class="w-[95%] md:h-[40vw] h-[60vw] object-contain" />
     </div>
 </div>
diff --git a/src/data/activities.json b/src/data/activities.json
index 7ed0388..00b8f16 100644
--- a/src/data/activities.json
+++ b/src/data/activities.json
@@ -1,28 +1,28 @@
 [
     {
         "title": "Quarterly Project",
-        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "text": "QP is a quarter-long project competition. Students collaborate in teams of up to 6 to build a product aligned with a quarterly theme.",
         "link": "/quarterly",
         "number": "01",
         "delay": "100"
     },
     {
         "title": "Annual Project",
-        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "text": "IEEE @ UCSD hosts the university Robocup, Signal Processing, Supercomputing, and Micromouse teams that each compete in annual competitions.",
         "link": "/projects",
         "number": "02",
         "delay": "300"
     },
     {
         "title": "Social",
-        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "text": "Get involved in our diverse student society! We host regular social events ranging from IEEEat meals-out to karaoke sessions.",
         "link": "/events",
         "number": "03",
         "delay": "500"
     },
     {
         "title": "Professional Development",
-        "text": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publi",
+        "text": "IEEE @ UCSD offers a diversity of technical and professional workshops each quarter. Previous examples include soldering, esp32s and an intern panel. ",
         "link": "/events",
         "number": "04",
         "delay": "700"
diff --git a/src/data/faq.json b/src/data/faq.json
index c13cc17..5f2cb16 100644
--- a/src/data/faq.json
+++ b/src/data/faq.json
@@ -1,21 +1,21 @@
 [
     {
-        "question": "What skills will you gain?",
-        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+        "question": "Can I join IEEE @ UCSD if I am not an engineering major?",
+        "answer": "Yes! IEEE @ UCSD is open to students of all majors, colleges, and programs with an interest in engineering. "
     },
 
     {
-        "question": "What skills will you gain?",
-        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+        "question": "How should I get involved if I am... ",
+        "answer": "a transfer? We encourage transfer students to participate as early as possible through our project teams, workshops, and socials! Consider applying to become an officer if you feel up to the task and we will do our best to help you succeed both in IEEE and at UCSD. a beginner at engineering? IEEE @ UCSD’s technical workshops are a strong introduction to the basics of hands-on engineering skills. For a ‘forge by fire’ approach, Quarterly Project teams are open to students of all skill levels and supported by a seasoned mentorship base. Attending these opportunities with questions for the board officers and a readiness to learn will be your greatest weapons!"
     },
 
     {
-        "question": "What skills will you gain?",
-        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+        "question": "Is there a membership fee to join?",
+        "answer": "No, there is no necessary membership fee for IEEE @ UCSD. However, buying an International IEEE membership is vastly beneficial for the mentorship and resource opportunities."
     },
 
     {
-        "question": "What skills will you gain?",
-        "answer": "Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat Ante aptent fringilla cubilia pretium egestas vivamus quisque bibendum erat"
+        "question": "How can I contact board officers?",
+        "answer": "Our board officers are accessible both online and in-person. To reach us online, shoot us an email (which can be found on the Board page of the website) or DM on Discord! To reach us in person, each officer hosts Open Access Hours in our club project space, EBU1-4710; the calendar can be found below."
     }
 ]
diff --git a/src/images/jellyfish.png b/src/images/jellyfish.png
new file mode 100644
index 0000000..71bfd96
Binary files /dev/null and b/src/images/jellyfish.png differ
diff --git a/src/pages/join.astro b/src/pages/join.astro
index e8632bf..6f8ebdd 100644
--- a/src/pages/join.astro
+++ b/src/pages/join.astro
@@ -15,12 +15,12 @@ import faq from "../data/faq.json";
     <Image
         src={join}
         alt="JOIN US"
-        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+        class="absolute left-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw]"
     />
     <Image
         src={join}
         alt="JOIN US"
-        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+        class="absolute right-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw]"
     />
     <JoinTitle />
     <Involvements />