diff --git a/frontend/app/aboutus/page.tsx b/frontend/app/aboutus/page.tsx
index 2883dff..0551af5 100644
--- a/frontend/app/aboutus/page.tsx
+++ b/frontend/app/aboutus/page.tsx
@@ -1,5 +1,5 @@
 import Navbar from '@/components/Navbar';
-import AboutSection from '@/components/AboutSection';
+import AboutSection from '@/app/home/AboutSection';
 import ExecutiveSection from '@/components/ExecutiveSection';
 import Footer from '@/components/Footer';
 
diff --git a/frontend/app/home/MainSection.tsx b/frontend/app/home/MainSection.tsx
index 19dee92..3a0b340 100644
--- a/frontend/app/home/MainSection.tsx
+++ b/frontend/app/home/MainSection.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 export default function MainSection() {
   const [active, setActive] = useState(0);
 
-  const photos = ["/photi1.png", "/photi2.png", "/photi3.png"];
+  const photos = ["/home-shuffle/1.JPG", "/home-shuffle/2.jpg", "/home-shuffle/3.jpeg"];
 
   return (
     <section
@@ -17,9 +17,15 @@ export default function MainSection() {
           md:flex-row
           items-center
           justify-center
-          md:justify-between
-          px-24
-          gap-3
+          px-6
+          sm:px-10
+          md:px-16
+          lg:px-24
+          pt-28
+          sm:pt-24
+          pb-16
+          gap-10
+          md:gap-24
           overflow-hidden
           bg-linear-to-br
           from-[#9B93E8]
@@ -37,24 +43,24 @@ export default function MainSection() {
 
       />
       {/* CONTENT */}
-      <div className="relative z-10 max-w-xl text-center md:text-left order-2 md:order-1">
+      <div className="relative z-30 max-w-xl text-center md:text-left order-2 md:order-1">
         <h1 className="text-[90px] md:text-9xl font-bold text-[#3A1B6B] drop-shadow-lg">
           WiCSM
         </h1>
 
-        <h2 className="text-4xl mt-2 text-[#3A1B6B]">UTSC</h2>
+        <h2 className="text-4xl mt-2 text-[#3A1B6B]">Women in Computer Science, Statistics & Mathematics</h2>
 
-        <p className="mt-6 text-[0.8rem] md:text-lg text-[#2D1B4E]">
-          Motto, saying Motto, saying Motto, saying Motto, saying
+        <p className="mt-6 text-base md:text-lg text-[#2D1B4E]">
+          University of Toronto Scarborough
         </p>
       </div>
 
       {/* PHOTO STACK */}
       <div
         onClick={() => setActive((prev) => (prev + 1) % photos.length)}
-        className="relative cursor-pointer group order-1 md:order-2 md:mr-15"
+        className="relative cursor-pointer group order-1 md:order-2"
       >
-        <div className="relative w-[320px] h-[320px]">
+        <div className="relative w-[260px] h-[260px] sm:w-[300px] sm:h-[300px] md:w-[320px] md:h-[320px] max-w-full max-h-full">
           {/* GLOW */}
           <div
             className="absolute inset-0 pointer-events-none"
diff --git a/frontend/app/home/NextEventSection.tsx b/frontend/app/home/NextEventSection.tsx
index 7968b33..0732ac0 100644
--- a/frontend/app/home/NextEventSection.tsx
+++ b/frontend/app/home/NextEventSection.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import SectionHeader from "@/components/SectionHeader";
 
 export default function NextEventSection() {
@@ -9,43 +10,44 @@ export default function NextEventSection() {
         bg-white
       "
     >
-      <div className="relative max-w-7xl mx-auto px-24">
+      <div className="relative max-w-7xl mx-auto px-6 sm:px-10 md:px-16 lg:px-24">
         {/* TITLE */}
         <div className="mb-24 text-center">
-          <SectionHeader>JOIN OUR NEXT EVENT</SectionHeader>
+          <SectionHeader>DATA BITES</SectionHeader>
         </div>
 
         {/* CONTENT */}
         <div className="grid grid-cols-1 md:grid-cols-2 items-center gap-12 md:gap-24">
-          <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed">
-            Short description or hook regarding joining our next event.Learn, 
-            connect, and grow with the WiCSM community.
-          </p>
+          <div className="space-y-4 text-center md:text-left">
+            <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed mx-auto md:mx-0">
+              Data Bites is WiCSM's flagship networking event, designed to connect students with industry professionals in a setting that feels approachable, honest, and genuinely useful.
+            </p>
+            <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed mx-auto md:mx-0">
+              Each year, we bring together students from across programs and universities with professionals working in roles like software engineering, data science, consulting, project management, academia, and more. The goal is simple: to make career exploration less intimidating and more human.
+            </p>
+            <p className="text-lg text-[#2D1B4E] max-w-md leading-relaxed mx-auto md:mx-0">
+              With ~100 attendees annually, Data Bites creates space for students to ask questions, build connections, and gain clarity on what comes next, whether that's their first internship or a long-term career direction.
+            </p>
+          </div>
 
           {/* RIGHT CARD */}
           <div
             className="
+              relative
               w-[280px] h-[280px]
               md:w-[420px] md:h-[420px]
               rounded-3xl
-              bg-white
+              overflow-hidden
               shadow-[0_0_40px_rgba(155,147,232,0.45)]
-              flex items-center justify-center
               mx-auto md:mx-0
             "
           >
-            {/* Placeholder — swap later */}
-            <div className="text-gray-400"> Event Image</div>
-
-            {/*
             <Image
-              src="/event-poster.png"
-              alt="Next Event"
-              width={380}
-              height={380}
-              className="rounded-2xl"
+              src="/data-bites.jpg"
+              alt="Data Bites"
+              fill
+              className="object-cover"
             />
-            */}
           </div>
         </div>
       </div>
diff --git a/frontend/app/home/OurValuesSection.tsx b/frontend/app/home/OurValuesSection.tsx
index a64e9d8..5173549 100644
--- a/frontend/app/home/OurValuesSection.tsx
+++ b/frontend/app/home/OurValuesSection.tsx
@@ -1,6 +1,6 @@
 import SectionHeader from "@/components/SectionHeader";
 import ValueCard from "@/components/ValueCard";
-import { Lightbulb, Rocket, Users } from "lucide-react";
+import { Lightbulb, Heart, Users } from "lucide-react";
 
 export default function OurValuesSection() {
   return (
@@ -31,8 +31,8 @@ export default function OurValuesSection() {
           icon={
             <Users className="h-14 w-14 md:h-16 md:w-16" aria-hidden="true" />
           }
-          title="Subtitle"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          title="Inclusivity"
+          description="We are committed to creating a welcoming and supportive space for women and underrepresented groups in computer science, statistics, and mathematics."
         />
         <ValueCard
           icon={
@@ -41,15 +41,15 @@ export default function OurValuesSection() {
               aria-hidden="true"
             />
           }
-          title="Subtitle"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          title="Growth"
+          description="We empower our members to develop their technical, academic, and professional skills through workshops, mentorship, and hands-on experiences."
         />
         <ValueCard
           icon={
-            <Rocket className="h-14 w-14 md:h-16 md:w-16" aria-hidden="true" />
+            <Heart className="h-14 w-14 md:h-16 md:w-16" aria-hidden="true" />
           }
-          title="Subtitle"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+          title="Community"
+          description="We foster meaningful connections by bringing students together through shared experiences, collaboration, and support."
         />
       </div>
 
diff --git a/frontend/app/home/SupportMissionSection.tsx b/frontend/app/home/SupportMissionSection.tsx
index 1e98b72..0daefd0 100644
--- a/frontend/app/home/SupportMissionSection.tsx
+++ b/frontend/app/home/SupportMissionSection.tsx
@@ -1,28 +1,40 @@
+import Image from "next/image";
+import Link from "next/link";
 import SectionHeader from "@/components/SectionHeader";
 
 export default function SupportMissionSection() {
   return (
-    <section className="relative py-32 px-24 bg-[#ece7fa]">
-      <div className="flex-col md:flex-row flex items-center justify-between gap-24">
+    <section className="relative py-32 px-6 sm:px-10 md:px-16 lg:px-24 bg-[#ece7fa]">
+      <div className="flex-col md:flex-row flex items-center justify-center gap-20 md:gap-40">
         {/* LEFT: Image / placeholder */}
         <div
-          className="w-[250px] h-[250px] md:w-[360px] md:h-[360px] rounded-3xl 
-                        bg-white shadow-[0_0_40px_rgba(155,147,232,0.6)] shrink-0"
-        />
+          className="relative w-[250px] h-[250px] md:w-[360px] md:h-[360px] rounded-3xl overflow-hidden 
+                        shadow-[0_0_40px_rgba(155,147,232,0.6)] shrink-0"
+        >
+          <Image
+            src="/sponsor.jpg"
+            alt="WiCSM Sponsor"
+            fill
+            className="object-cover"
+          />
+        </div>
 
         {/* RIGHT: Text + CTA */}
-        <div className="max-w-xl">
-          <SectionHeader className="align-middle">
-            SUPPORT OUR MISSION
-          </SectionHeader>
+        <div className="max-w-xl text-center md:text-left">
+          <SectionHeader>SUPPORT OUR MISSION</SectionHeader>
 
-          <p className="mt-4 text-[0.8rem] md:text-lg text-[#2D1B4E]">
-            1–2 liner catch/hook, then say join us etc blah blah.
+          <p className="mt-4 text-lg text-[#2D1B4E]">
+            Support WiCSM in creating spaces where students can explore careers, build connections, and grow with confidence.
+          </p>
+          <p className="mt-4 text-lg text-[#2D1B4E]">
+            Partner with us to engage with emerging talent and make a meaningful impact.
           </p>
 
-          <button
+          <Link
+            href="/contact"
             className="
               mt-8
+              inline-block
               px-10
               py-3
               rounded-full
@@ -35,7 +47,7 @@ export default function SupportMissionSection() {
             "
           >
             Contact us
-          </button>
+          </Link>
         </div>
       </div>
 
diff --git a/frontend/app/home/WhoSection.tsx b/frontend/app/home/WhoSection.tsx
index 6ae43cf..dbc87e8 100644
--- a/frontend/app/home/WhoSection.tsx
+++ b/frontend/app/home/WhoSection.tsx
@@ -34,6 +34,9 @@ export default function WhoWeAreSection() {
     <section className="py-32 bg-white overflow-hidden">
       <div className="text-center mb-16">
         <SectionHeader>WHO WE ARE</SectionHeader>
+        <p className="mx-auto mt-6 max-w-5xl px-6 text-lg md:text-xl leading-relaxed text-[#2D1B4E]">
+          WiCSM (Women in Computer Science, Statistics & Mathematics) is a student-led community at the University of Toronto Scarborough dedicated to empowering women and underrepresented groups in STEM. We create opportunities for learning, mentorship, and connection through events, workshops, and collaborations.
+        </p>
       </div>
 
       {/* VIEWPORT */}
diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
index 41a2f85..63e9eaa 100644
--- a/frontend/components/Footer.tsx
+++ b/frontend/components/Footer.tsx
@@ -1,7 +1,31 @@
 import Image from "next/image";
 import Link from "next/link";
+import { FaDiscord, FaFacebook, FaInstagram, FaLinkedinIn } from "react-icons/fa";
 
 export default function Footer() {
+  const socials = [
+    {
+      name: "Instagram",
+      href: "https://www.instagram.com/wicsm.utsc/",
+      Icon: FaInstagram,
+    },
+    {
+      name: "Facebook",
+      href: "https://www.facebook.com/WiCSM.UTSC/",
+      Icon: FaFacebook,
+    },
+    {
+      name: "Discord",
+      href: "https://discord.com/invite/QgfWQqh6Fa",
+      Icon: FaDiscord,
+    },
+    {
+      name: "LinkedIn",
+      href: "https://www.linkedin.com/company/wicsm-utsc/",
+      Icon: FaLinkedinIn,
+    },
+  ];
+
   return (
     <footer className="w-full bg-[linear-gradient(to_bottom,_#F9F6FF33_0%,_#9BCEEE_45%,_#A9A7EB_100%)] px-6 sm:px-12 md:px-20 py-16">
 
@@ -21,15 +45,15 @@ export default function Footer() {
               WiCSM
             </p>
             <p className="text-[#54528F] text-sm">
-              Women in Computer Science, Statistics and Mathematics UTSC
+              Women in Computer Science, Statistics & Mathematics @ UTSC
             </p>
           </div>
         </div>
 
         {/* Quick Links */}
-        <div className="grid grid-cols-2 gap-x-8 gap-y-4 text-lg font-semibold text-white">
+        <div className="grid grid-cols-2 gap-x-8 gap-y-4 text-lg font-semibold text-white self-center md:self-auto">
           <Link href="/" className="hover:underline">Home</Link>
-          <Link href="/about" className="hover:underline">About</Link>
+          <Link href="/aboutus" className="hover:underline">About</Link>
           <Link href="/events" className="hover:underline">Events</Link>
           <Link href="/contact" className="hover:underline">Contact</Link>
         </div>
@@ -47,12 +71,17 @@ export default function Footer() {
         </p>
 
         <div className="flex gap-4">
-          {[1, 2, 3, 4].map((_, i) => (
+          {socials.map(({ name, href, Icon }) => (
             <a
-              key={i}
-              href="#"
-              className="w-10 h-10 bg-white rounded-full hover:bg-gray-200 transition"
-            />
+              key={name}
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={name}
+              className="w-10 h-10 bg-white rounded-full hover:bg-gray-200 transition flex items-center justify-center text-[#54528F]"
+            >
+              <Icon className="text-lg" />
+            </a>
           ))}
         </div>
 
diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx
index bc05ee2..767c1b9 100644
--- a/frontend/components/Navbar.tsx
+++ b/frontend/components/Navbar.tsx
@@ -6,7 +6,7 @@ import { useState } from "react";
 
 const navItems = [
   { href: "/", label: "HOME" },
-  { href: "/about", label: "ABOUT" },
+  { href: "/aboutus", label: "ABOUT" },
   { href: "/events", label: "EVENTS" },
   { href: "/contact", label: "CONTACT" },
 ];
@@ -15,7 +15,7 @@ export default function Navbar() {
   const [open, setOpen] = useState(false);
 
   return (
-    <nav className="relative border-3 border-[#54528F] rounded-3xl flex items-center justify-between py-2 px-7 max-w-5xl mx-auto bg-white">
+    <nav className="relative border-3 border-[#54528F] rounded-3xl flex items-center justify-between py-2 px-5 sm:px-7 w-[calc(100%-2rem)] mx-4 sm:w-[calc(100%-3rem)] sm:mx-6 md:w-full md:max-w-5xl md:mx-auto bg-white">
       
       {/* Logo */}
       <Image
@@ -25,7 +25,7 @@ export default function Navbar() {
         height={40}
       />
 
-      <div className="hidden md:flex gap-20 font-semibold text-[#54528F] text-xl">
+      <div className="hidden md:flex flex-1 justify-center gap-20 font-semibold text-[#54528F] text-xl">
         {navItems.map((item) => (
           <Link key={item.href} href={item.href} onClick={() => setOpen(false)}>
             {item.label}
@@ -33,10 +33,6 @@ export default function Navbar() {
         ))}
       </div>
 
-      <button className="hidden md:block px-10 py-2 bg-[#F7F3FB] rounded-2xl font-semibold text-[#54528F] text-xl">
-        login
-      </button>
-
       {/* Hamburger */}
       <button
         onClick={() => setOpen(!open)}
@@ -53,9 +49,6 @@ export default function Navbar() {
               {item.label}
             </Link>
           ))}
-          <button className="px-10 py-2 bg-[#F7F3FB] rounded-2xl">
-            login
-          </button>
         </div>
       )}
     </nav>
diff --git a/frontend/public/data-bites.jpg b/frontend/public/data-bites.jpg
new file mode 100644
index 0000000..50775c8
Binary files /dev/null and b/frontend/public/data-bites.jpg differ
diff --git a/frontend/public/home-shuffle/1.JPG b/frontend/public/home-shuffle/1.JPG
new file mode 100644
index 0000000..7c15a6b
Binary files /dev/null and b/frontend/public/home-shuffle/1.JPG differ
diff --git a/frontend/public/home-shuffle/2.jpg b/frontend/public/home-shuffle/2.jpg
new file mode 100644
index 0000000..df94856
Binary files /dev/null and b/frontend/public/home-shuffle/2.jpg differ
diff --git a/frontend/public/home-shuffle/3.jpeg b/frontend/public/home-shuffle/3.jpeg
new file mode 100644
index 0000000..9add4e8
Binary files /dev/null and b/frontend/public/home-shuffle/3.jpeg differ
diff --git a/frontend/public/sponsor.jpg b/frontend/public/sponsor.jpg
new file mode 100644
index 0000000..61d7bbf
Binary files /dev/null and b/frontend/public/sponsor.jpg differ
diff --git a/frontend/public/who/1.JPG b/frontend/public/who/1.JPG
new file mode 100644
index 0000000..e8a50b0
Binary files /dev/null and b/frontend/public/who/1.JPG differ
diff --git a/frontend/public/who/2.jpg b/frontend/public/who/2.jpg
new file mode 100644
index 0000000..cfdedda
Binary files /dev/null and b/frontend/public/who/2.jpg differ
diff --git a/frontend/public/who/3.jpg b/frontend/public/who/3.jpg
new file mode 100644
index 0000000..31c1d20
Binary files /dev/null and b/frontend/public/who/3.jpg differ
diff --git a/frontend/public/who/4.JPG b/frontend/public/who/4.JPG
new file mode 100644
index 0000000..9977b7b
Binary files /dev/null and b/frontend/public/who/4.JPG differ
diff --git a/frontend/public/who/5.jpg b/frontend/public/who/5.jpg
new file mode 100644
index 0000000..94bfdd5
Binary files /dev/null and b/frontend/public/who/5.jpg differ