diff --git a/components/About/index.tsx b/components/About/index.tsx
index a04a53c..04e0353 100644
--- a/components/About/index.tsx
+++ b/components/About/index.tsx
@@ -5,7 +5,7 @@ const About = () => {
     <section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
       <div className="text-center my-10">
         <p className="text-[#3977F8] font-game text-xl">01</p>
-        <h1 className="font-bold text-6xl">ABOUT</h1>
+        <h2 className="font-bold text-6xl">ABOUT</h2>
       </div>
       <div className="flex justify-center items-center">
         <div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
@@ -14,7 +14,7 @@ const About = () => {
             <div className="flex items-center justify-center">
               <Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
             </div>
-            <h1 className="mt-10 text-3xl font-extrabold">CSESoc</h1>
+            <h2 className="mt-10 text-3xl font-extrabold">CSESoc</h2>
             <p className="text-[#727B8C] font-medium">unsw-computer-science-soc</p>
             <button className="bg-[#444F6F] w-full my-5 py-2 rounded">Follow</button>
             <p>
@@ -40,7 +40,7 @@ const About = () => {
           </div>
           {/* RIGHT SIDE */}
           <div className="col-span-4 lg:mt-0 mt-10">
-            <div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-32 h-full">
+            <div className="rounded border border-[#595F6D] p-5 2xl:h-80 xl:h-64 lg:h-48 sm:h-36 h-full">
               <p className="text-xs">
                 csesoc/README<span className="text-[#7A8192]">.md</span>
               </p>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 46111f3..1c7ff2d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,38 +1,51 @@
+import Image from 'next/image';
 import Link from 'next/link';
+import { socialLinks } from '../public/data/data';
 
 const Footer = () => {
   return (
     <section>
-      <div className="sm:flex justify-between">
-        <div className="flex items-center">
-          <img src="assets/csesoc_logo_white.svg" alt="CSESoc Logo" />
-          <Link href="/flag/ollie_is_hiding.png" target="_blank" className="sm:hidden block">
-            <img
-              src="/flag/ollie_is_hiding.png"
-              alt="Ollie"
-              draggable="false"
-              width={60}
-              height={60}
-              className="ml-10"
-            />
-          </Link>
-          <img
-            src="/flag/ollie_is_hiding.png"
-            alt="Ollie"
-            draggable="false"
-            width={60}
-            height={60}
-            className="ml-10 sm:block hidden"
-          />
+      <div className="sm:flex justify-between pb-10">
+        <div className="flex flex-col gap-10">
+          <div className="flex items-center">
+            <Link href="/" className="flex">
+              <Image src="assets/csesoc_logo_white.svg" width={231} height={53} alt="CSESoc Logo" />
+              <Image
+                src="/flag/ollie_is_hiding.png"
+                alt="Ollie"
+                draggable="false"
+                width={60}
+                height={60}
+                className="ml-10"
+              />
+            </Link>
+          </div>
+          <div className="grid grid-cols-8 gap-4">
+            {socialLinks.map((item, index) => {
+              return (
+                <a key={index} className="" href={item.href}>
+                  <Image
+                    className="h-4 fill-white min-w-full hover:scale-125 transition-all"
+                    src={item.src}
+                    alt={item.alt}
+                    height={0}
+                    width={0}
+                  />
+                </a>
+              );
+            })}
+          </div>
         </div>
         <div className="flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light">
           <p className="mb-6">B03 CSE Building K17, UNSW csesoc@csesoc.org.au</p>
           <p>© 2021 — CSESoc UNSW</p>
         </div>
       </div>
-      <img
+      <Image
         src="assets/sponsors_backdrop.svg"
         alt="Sponsors backdrop"
+        height={0}
+        width={0}
         className="absolute bottom-0 left-0 w-screen -z-10"
       />
     </section>
diff --git a/components/Hamburger.tsx b/components/Hamburger.tsx
new file mode 100644
index 0000000..bbeb2c5
--- /dev/null
+++ b/components/Hamburger.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { AnimatePresence, motion, useCycle } from 'framer-motion';
+import Link from 'next/link';
+
+export default function Hamburger() {
+  const [isOpen, toggleOpen] = useCycle(false, true);
+
+  return (
+    <button
+      onClick={() => {
+        toggleOpen();
+      }}
+    >
+      <svg
+        className="w-10 h-10"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 6h16M4 12h16m-7 6h7"
+        />
+      </svg>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className="absolute top-16 right-0 bg-[#3977F9] p-4 shadow-lg w-40 rounded-2xl"
+          >
+            <ul>
+              <li className="py-2 text-lg">
+                <Link href={'./about'}>About Us</Link>
+              </li>
+              <li className="py-2 text-lg">
+                <Link href={'./events'}>Events</Link>
+              </li>
+              <li className="py-2 text-lg">
+                <Link href={'./resources'}>Resources</Link>
+              </li>
+              <li className="py-2 text-lg">
+                <Link href={'./sponsors'}>Sponsors</Link>
+              </li>
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </button>
+  );
+}
diff --git a/components/Landing/index.tsx b/components/Landing/index.tsx
index 111ee8f..b5002be 100644
--- a/components/Landing/index.tsx
+++ b/components/Landing/index.tsx
@@ -13,7 +13,7 @@ const Landing = () => {
         <div>
           <div className="font-semibold">
             <p>{'<h1>'}</p>
-            <h1 className="font-black 2xl:text-8xl lg:text-6xl text-4xl">Hello World!</h1>
+            <h2 className="font-black 2xl:text-8xl lg:text-6xl text-4xl">Hello World!</h2>
             <p>{'</h1>'}</p>
           </div>
           <div className="font-semibold mt-10">
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 9e395bb..4dfade2 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import Hamburger from './Hamburger';
 
 const Navbar = () => {
   const [path, setPath] = useState<string>('');
@@ -24,11 +25,11 @@ const Navbar = () => {
       </Link>
       <div>
         <div className="md:flex xl:gap-36 lg:gap-20 md:gap-10 text-right font-bold hidden">
-          <Link href="about us">
+          <Link href="about">
             <p className="text-[0.6rem] text-[#C4C5C8]">01</p>
             <div>{'//'} about us</div>
           </Link>
-          <Link href="events">
+          <Link href="#events">
             <p className="text-[0.6rem] text-[#C4C5C8]">02</p>
             <div>{'//'} events</div>
           </Link>
@@ -41,6 +42,9 @@ const Navbar = () => {
             <div>{'//'} sponsors</div>
           </Link>
         </div>
+        <div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
+          <Hamburger />
+        </div>
       </div>
     </nav>
   );
diff --git a/components/ResourcesAndContacts/index.tsx b/components/ResourcesAndContacts/index.tsx
index 3acb046..459abbe 100644
--- a/components/ResourcesAndContacts/index.tsx
+++ b/components/ResourcesAndContacts/index.tsx
@@ -15,7 +15,7 @@ const ResourcesAndContacts = () => {
 
           <div className="text-center my-10">
             <p className="text-[#3977F8] font-game text-xl">03</p>
-            <h1 className="font-bold text-6xl">RESOURCES & CONTACTS</h1>
+            <h2 className="font-bold text-6xl">RESOURCES & CONTACTS</h2>
           </div>
 
           <div className="py-8 bg-no-repeat bg-center">
@@ -122,7 +122,13 @@ const ResourcesAndContacts = () => {
         <div className="md:mt-10 mt-5">
           <div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
             <a href="https://bit.ly/CSESocDiscord" target="_blank" className={socialsBoxStyling}>
-              <Image src="assets/discord_logo.svg" alt="" width={25} height={25} className="mr-1" />
+              <Image
+                src="assets/discord_logo.svg"
+                alt="discord logo"
+                width={25}
+                height={25}
+                className="mr-1"
+              />
               <p className="text-xl font-bold m-2">DISCORD</p>
             </a>
             <a
@@ -130,7 +136,13 @@ const ResourcesAndContacts = () => {
               target="_blank"
               className={socialsBoxStyling}
             >
-              <Image src="assets/fb_logo.svg" alt="" width={25} height={25} className="mr-1" />
+              <Image
+                src="assets/fb_logo.svg"
+                alt="facebook logo"
+                width={25}
+                height={25}
+                className="mr-1"
+              />
               <p className="text-xl font-bold m-2">FACEBOOK</p>
             </a>
             <a
@@ -138,7 +150,13 @@ const ResourcesAndContacts = () => {
               target="_blank"
               className={socialsBoxStyling}
             >
-              <Image src="assets/group_icon.svg" alt="" width={25} height={25} className="mr-1" />
+              <Image
+                src="assets/group_icon.svg"
+                alt="facebook group"
+                width={25}
+                height={25}
+                className="mr-1"
+              />
               <p className="text-xl font-bold m-2">FACEBOOK GROUP</p>
             </a>
           </div>
diff --git a/components/Sponsors/index.tsx b/components/Sponsors/index.tsx
index 46190e4..18d6b99 100644
--- a/components/Sponsors/index.tsx
+++ b/components/Sponsors/index.tsx
@@ -8,7 +8,10 @@ const Sponsors = () => {
     'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36';
 
   return (
-    <section className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20">
+    <section
+      className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20"
+      id="sponsors"
+    >
       <div className="text-center">
         <p className="text-[#3977F8] font-game text-xl">04</p>
         <h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>
diff --git a/components/Sponsors/sponsorlinks.tsx b/components/Sponsors/sponsorlinks.tsx
index e09ac7e..6c9c297 100644
--- a/components/Sponsors/sponsorlinks.tsx
+++ b/components/Sponsors/sponsorlinks.tsx
@@ -2,8 +2,7 @@ import { diamondLinks, goldLinks, silverLinks } from '../../public/data/data';
 //import '/styles/sponsorLinks.module.css';
 const logostyle = 'h-14';
 const logodiv = 'block gap-y-8 h-14';
-const background =
-  'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)';
+const background = 'rgba(57, 119, 248, 0.6)';
 // const outer = 'rounded-[4rem] w-[90rem] flex flex-col pl-14 py-14 gap-16';
 
 function SponsorLinks() {
@@ -11,8 +10,8 @@ function SponsorLinks() {
     <div className="flex justify-center items-center my-20">
       <div className="w-100 flex flex-col gap-16">
         <div
-          style={{ backgroundImage: `${background}` }}
-          className="flex rounded-[1rem] pl-14 py-14 gap-16 items-center"
+          style={{ backgroundColor: `${background}` }}
+          className="flex flex-wrap rounded-[1rem] pl-14 py-14 gap-16 items-center"
         >
           <h2 className="text-4xl font-black">Diamond Sponsors</h2>
           {diamondLinks.map((item, index) => {
@@ -24,23 +23,21 @@ function SponsorLinks() {
           })}
         </div>
         <div
-          style={{ backgroundImage: `${background}` }}
-          className="flex rounded-[1rem] px-14 py-14"
+          style={{ backgroundColor: `${background}` }}
+          className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
         >
-          <h2 className="text-4xl font-black pr-16">Gold Sponsors</h2>
-          <div className="grid grid-cols-5 gap-16 items-center">
-            {goldLinks.map((item, index) => {
-              return (
-                <a key={index} className="" href={item.href}>
-                  <img className="h-6" src={item.svg} alt={item.alt} />
-                </a>
-              );
-            })}
-          </div>
+          <h2 className="text-4xl font-black">Gold Sponsors</h2>
+          {goldLinks.map((item, index) => {
+            return (
+              <a key={index} className="" href={item.href}>
+                <img className="h-6" src={item.svg} alt={item.alt} />
+              </a>
+            );
+          })}
         </div>
         <div
-          style={{ backgroundImage: `${background}` }}
-          className="grid grid-cols-5 rounded-[1rem] pl-14 py-14 gap-16 items-center"
+          style={{ backgroundColor: `${background}` }}
+          className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
         >
           <h2 className="text-4xl font-black">Silver Sponsors</h2>
           {silverLinks.map((item, index) => {
diff --git a/components/Sponsors/subpage.tsx b/components/Sponsors/subpage.tsx
deleted file mode 100644
index 6af78b6..0000000
--- a/components/Sponsors/subpage.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-//import '/styles/sponsors.module.css';
-import SponsorLinks from './sponsorlinks';
-
-const SponsorsPage = () => {
-  return (
-    <section className="">
-      <SponsorLinks />
-    </section>
-  );
-};
-
-export default SponsorsPage;
diff --git a/package-lock.json b/package-lock.json
index d5cafbf..3405fa5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@types/react-dom": "18.2.7",
         "autoprefixer": "10.4.15",
         "eslint-config-next": "13.4.19",
+        "framer-motion": "^11.1.2",
         "next": "13.4.19",
         "postcss": "8.4.29",
         "react": "18.2.0",
@@ -2133,6 +2134,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.2.tgz",
+      "integrity": "sha512-flRo14ImBGRbOFz9KsXQ9ty3wWW2zFk0Gp4VbvZ5bG+1gZg/1CNWj9ZHtsCmZSPkBgZNOVkVf6aEtW5YxOITfw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5999,6 +6024,14 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
       "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg=="
     },
+    "framer-motion": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.2.tgz",
+      "integrity": "sha512-flRo14ImBGRbOFz9KsXQ9ty3wWW2zFk0Gp4VbvZ5bG+1gZg/1CNWj9ZHtsCmZSPkBgZNOVkVf6aEtW5YxOITfw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index b99482d..11cb6f8 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
     "eslint-config-next": "13.4.19",
+    "framer-motion": "^11.1.2",
     "next": "13.4.19",
     "postcss": "8.4.29",
     "react": "18.2.0",
diff --git a/pages/about.tsx b/pages/about.tsx
new file mode 100644
index 0000000..a3ac9e6
--- /dev/null
+++ b/pages/about.tsx
@@ -0,0 +1,13 @@
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import About from '@/components/About';
+
+export default function AboutPage() {
+  return (
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+      <Navbar />
+      <About />
+      <Footer />
+    </section>
+  );
+}
diff --git a/pages/events.tsx b/pages/events.tsx
new file mode 100644
index 0000000..b7889f6
--- /dev/null
+++ b/pages/events.tsx
@@ -0,0 +1,12 @@
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+export default function EventsPage() {
+  return (
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+      <Navbar />
+      <div>Events</div>
+      <Footer />
+    </section>
+  );
+}
diff --git a/pages/resources.tsx b/pages/resources.tsx
new file mode 100644
index 0000000..b634ac2
--- /dev/null
+++ b/pages/resources.tsx
@@ -0,0 +1,13 @@
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import ResourcesAndContacts from '@/components/ResourcesAndContacts';
+
+export default function ResourcesPage() {
+  return (
+    <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
+      <Navbar />
+      <ResourcesAndContacts />
+      <Footer />
+    </section>
+  );
+}
diff --git a/pages/sponsors.tsx b/pages/sponsors.tsx
index d2e2d1a..94de148 100644
--- a/pages/sponsors.tsx
+++ b/pages/sponsors.tsx
@@ -1,12 +1,12 @@
-import SponsorsPage from '@/components/Sponsors/subpage';
+import SponsorLinks from '@/components/Sponsors/sponsorlinks';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 
-export default function Home() {
+export default function SponsorsPage() {
   return (
     <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
       <Navbar />
-      <SponsorsPage />
+      <SponsorLinks />
       <Footer />
     </section>
   );
diff --git a/public/data/data.ts b/public/data/data.ts
index ced261f..df77c79 100644
--- a/public/data/data.ts
+++ b/public/data/data.ts
@@ -4,6 +4,12 @@ export type sponsorInfo = {
   alt: string;
 };
 
+export type socialInfo = {
+  href: string;
+  src: string;
+  alt: string;
+};
+
 export const diamondLinks: sponsorInfo[] = [
   {
     href: 'https://www.janestreet.com/',
@@ -102,3 +108,41 @@ export const silverLinks: sponsorInfo[] = [
     alt: 'Canva logo'
   }
 ];
+
+export const socialLinks: socialInfo[] = [
+  {
+    href: 'https://bit.ly/CSESocDiscord',
+    src: 'assets/discord_logo.svg',
+    alt: 'Discord'
+  },
+  {
+    href: 'https://www.facebook.com/csesoc/',
+    src: 'assets/fb_logo.svg',
+    alt: 'Facebook'
+  },
+  {
+    href: 'https://twitter.com/csesoc?lang=en',
+    src: 'assets/x_twitter_icon.svg',
+    alt: 'X/Twitter'
+  },
+  {
+    href: 'https://www.youtube.com/@CSESocUNSW',
+    src: 'assets/youtube_logo.svg',
+    alt: 'Youtube'
+  },
+  {
+    href: 'https://www.instagram.com/csesoc_unsw/?hl=en',
+    src: 'assets/instagram_logo.svg',
+    alt: 'Instagram'
+  },
+  {
+    href: 'https://www.tiktok.com/@csesoc?lang=en',
+    src: 'assets/tiktok_logo.svg',
+    alt: 'TikTok'
+  },
+  {
+    href: 'https://www.linkedin.com/company/csesoc?originalSubdomain=au',
+    src: 'assets/linkedin_logo.svg',
+    alt: 'LinkedIn'
+  }
+];