diff --git a/README.md b/README.md
index 29bd52c..c5a09e4 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Development version of the IEEE UC San Diego student branch website.
 
+## Figma Design
+-   [IEEE UCSD Website Design](https://www.figma.com/design/AihoR936yUmYrMoCZJ0LF7/UCSD-IEEE?node-id=0-1&t=ajK9lKroQFJbokFS-1)
 ## Getting Started
 
 Prerequisites:
diff --git a/public/evan.png b/public/evan.png
new file mode 100644
index 0000000..4d7657d
Binary files /dev/null and b/public/evan.png differ
diff --git a/public/event.png b/public/event.png
new file mode 100644
index 0000000..78f2bf9
Binary files /dev/null and b/public/event.png differ
diff --git a/src/components/core/Footer.astro b/src/components/core/Footer.astro
new file mode 100644
index 0000000..934c7a7
--- /dev/null
+++ b/src/components/core/Footer.astro
@@ -0,0 +1,23 @@
+---
+import { Image } from "astro:assets";
+import Link from "next/link";
+import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg";
+import { IoHeart } from "react-icons/io5";
+---
+<div class="w-full py-[2%] flex justify-center">
+    <div class="w-[95%] bg-black/40 py-[1%] px-[1.5%] rounded-[2vw] border-[0.1vw] flex justify-between">
+        <Link href="/" className="hover:opacity-70 duration-300">
+            <Image
+            class="w-[15vw]"
+            src={whiteLogoHorizontal}
+            alt="IEEE UCSD Logo"
+            />
+        </Link>
+        <div class="flex items-center">
+            <p class="text-white text-[1.2vw]">
+                made by IEEE UCSD webmasters with
+            </p>
+            <IoHeart className=" text-ieee-blue-100 ml-[1vw] text-[1.5vw]" />
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index 84f1a3c..98a17cf 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -5,7 +5,7 @@ import pages from "../../data/pages.json";
 ---
 
 <div class="md:w-full w-fit fixed z-10">
-    <div class="flex justify-between items-center bg-black/40 my-[1%] mx-[2.5%] py-[0.8%] px-[1.5%] md:rounded-full md:border-[0.1vw]">
+    <div class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]">
         <a
         href="/"
         class="hover:opacity-60 duration-300 hidden md:flex"
@@ -18,7 +18,7 @@ import pages from "../../data/pages.json";
         </a>
 
         <!-- Desktop Navigation -->
-        <div class="hidden md:flex md:w-3/5 md:justify-between">
+        <div class="hidden md:flex md:w-[55%] md:justify-between">
             {
                 pages.map((page) => (
                     <a
diff --git a/src/components/core/Social.astro b/src/components/core/Social.astro
new file mode 100644
index 0000000..af55729
--- /dev/null
+++ b/src/components/core/Social.astro
@@ -0,0 +1,49 @@
+---
+import { LiaDotCircle } from "react-icons/lia";
+import { Image } from "astro:assets";
+import evan from "../../../public/evan.png"
+import { FaDiscord, FaFacebook} from "react-icons/fa";
+import { RiInstagramFill } from "react-icons/ri";
+import Link from "next/link";
+---
+
+
+<div class="text-white flex flex-row md:flex-col items-center h-[65vh] justify-between">
+    <div class="flex items-center 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>
+    
+    <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">
+        <div class="w-2/5 flex justify-evenly ml-[5%]">
+            <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>
+
+            <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">
+                    <RiInstagramFill />
+                </div>
+                <p class="text-[1.3vw] font-semibold">Instagram</p>
+            </Link>
+        </div>
+        <Image src={evan} alt="cat placeholder" class="absolute -bottom-[10vh] w-[25vw] right-0"/>
+    </div>
+    
+</div>
\ No newline at end of file
diff --git a/src/components/join/JoinTitle.astro b/src/components/join/JoinTitle.astro
new file mode 100644
index 0000000..31a218f
--- /dev/null
+++ b/src/components/join/JoinTitle.astro
@@ -0,0 +1,24 @@
+---
+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 class="flex items-center text-[3vw] pl-[5%] pt-[5%]">
+            <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
+            <p>
+                Join Us
+            </p>
+        </div>
+        <p class="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 class="flex justify-end">
+            <Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="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>
+        
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/components/main_page/Landing.astro b/src/components/main_page/Landing.astro
index b9cf640..45c8f08 100644
--- a/src/components/main_page/Landing.astro
+++ b/src/components/main_page/Landing.astro
@@ -3,7 +3,8 @@ import { Image } from "astro:assets";
 import Link from "next/link";
 import { landing } from "../../data/landing";
 import landingimg from "../../../public/landing.png"
-import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
+import { FaDiscord, FaFacebook} from "react-icons/fa";
+import { RiInstagramFill } from "react-icons/ri";
 ---
 
 <div class="w-full flex justify-between pt-[14vh]">
@@ -12,7 +13,7 @@ import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
         <p class="font-bold text-[2.8vw] text-white mb-[10%]">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>
 
-        <div class="flex justify-end w-full mt-[13vh]">
+        <div class="flex justify-end w-full mt-[8vh]">
             <div class="text-white text-[2.5vw] w-1/2 flex justify-between">
                 <Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
                     <FaDiscord />
@@ -22,7 +23,7 @@ import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
                     <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">
-                    <FaInstagram />
+                    <RiInstagramFill />
                 </Link>
             </div>
         </div>
diff --git a/src/data/pages.json b/src/data/pages.json
index 31e41cf..3e7ea64 100644
--- a/src/data/pages.json
+++ b/src/data/pages.json
@@ -1,8 +1,4 @@
 [
-    {
-        "name": "About",
-        "path": "/about"
-    },
     {
         "name": "Join",
         "path": "/join"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 889fbdf..0cbbcd4 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import Navbar from "../components/core/Navbar.astro";
+import Footer from "../components/core/Footer.astro";
 ---
 
 <!doctype html>
@@ -12,11 +13,12 @@ import Navbar from "../components/core/Navbar.astro";
         <title>Astro Basics</title>
     </head>
 
-    <body class="bg-ieee-black relative flex flex-col items-center">
+    <body class="bg-ieee-black relative flex flex-col items-center min-h-screen justify-between">
         <Navbar />
         <main class="w-[95%]">
             <slot />
         </main>
+        <Footer />
     </body>
 
     <style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c460ddf..9283938 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,9 +2,11 @@
 import Layout from "../layouts/Layout.astro";
 import Landing from "../components/main_page/Landing.astro";
 import Divider from "../components/main_page/divider.astro";
+import Social from "../components/core/Social.astro";
 ---
 
 <Layout>
     <Landing />
     <Divider />
+    <Social />
 </Layout>
diff --git a/src/pages/join.astro b/src/pages/join.astro
new file mode 100644
index 0000000..ecee7de
--- /dev/null
+++ b/src/pages/join.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Social from "../components/core/Social.astro";
+import JoinTitle from "../components/join/JoinTitle.astro";
+---
+
+<Layout>
+    <JoinTitle/>
+    <Social/>
+</Layout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index f0c9cd9..91b76e7 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -11,6 +11,7 @@ export default {
           yellow: "#F3C135",
           black: "#0A0E1A",
           "blue-100": "#88BFEC",
+          "blue-300": "#233363",
         },
         
         // Project Page Card colors