diff --git a/functions/index.js b/functions/index.js
index 53a93b5..c82e7fb 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -211,6 +211,50 @@ exports.getLinksPage = onCall(
   },
 );
 
+// Application Database ID
+const APPLICATION_DATABASE_ID = "270dc74ea0ae803e8904e40ebe203011";
+
+// Helper function to create page properties
+function createPageProperties(pageData) {
+  const properties = {
+    Name: {
+      title: [{
+        text: { content: pageData.name }
+      }]
+    },
+    Email: {
+      email: pageData.email
+    },
+    Status: {
+      select: { name: "Pending" }
+    },
+    "Submission Date": {
+      date: { start: new Date().toISOString() }
+    }
+  };
+
+  // Add optional fields if provided
+  if (pageData.role) {
+    properties.Role = {
+      select: { name: pageData.role }
+    };
+  }
+
+  if (pageData.motivation && pageData.motivation.trim()) {
+    properties["Why are you applying?"] = {
+      rich_text: [{
+        text: { content: pageData.motivation }
+      }]
+    };
+  }
+
+  return properties;
+}
+
+
+
+
+
 // exports.setRiserData = onCall(async (req) => {
 //   console.log(req.data.name);
 //   const result = {
diff --git a/functions/test.js b/functions/test.js
new file mode 100644
index 0000000..8f529ab
--- /dev/null
+++ b/functions/test.js
@@ -0,0 +1,10 @@
+// Simple test file for the application API functions
+const { createNewPage, getPageByID, deletePage } = require('./index');
+
+// Test data
+const testApplicationData = {
+  name: "John Doe",
+  email: "john.doe@example.com",
+  role: "Education",
+  motivation: "I want to help organize amazing hackathons and contribute to the tech community."
+};
diff --git a/public/img/applyBanner.jpg b/public/img/applyBanner.jpg
new file mode 100644
index 0000000..8770d7b
Binary files /dev/null and b/public/img/applyBanner.jpg differ
diff --git a/src/index.css b/src/index.css
index 0a33149..36e9e1d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,3 +16,11 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
+body {
+  padding-right: 0 !important;
+}
+
+header {
+  padding-right: 0 !important;
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index 1db19a4..9dfd6b6 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -94,13 +94,34 @@ const Layout = () => {
   const sponsorPills: NavbarPillProps[] = [];
 
   const blogPills: NavbarPillProps[] = [];
+  
+  const joinusPills: NavbarPillProps[] = [
+    {
+      title: "Membership",
+      desc: "Become a member!",
+      Icon: FaFlag,
+      image: "/img/temp-bg.jpg",
+      link: "https://umsu.unimelb.edu.au/buddy-up/clubs/clubs-listing/join/hackmelbourne/",
+    },
+    {
+      title: "Officer Applications",
+      desc: "Apply for an officer role!",
+      Icon: FaUser,
+      image: "/img/temp-bg.jpg",
+      link: "/apply",
+    },
+  ];
 
+  // TODO: Parse empty string as "do not route" to support nav options that should ONLY offer pills.
   const nav = {
     clubname: "HackMelbourne",
     logo: "/img/HM_White_Transparent.png",
     pages: ["About", "Blog", "Calendar", "Sponsors", "Links"],
     links: ["/about/meettheteam", "/blogs", "/upcoming/calendar", "/sponsors", "upcoming/links"],
     pills: [aboutPills, linkPills, calendarPills, sponsorPills, blogPills],
+    // pages: ["About", "Blog", "Calendar", "Sponsors", "Links", "Join Us"],
+    // links: ["/about/meettheteam", "/blogs", "/upcoming/calendar", "/sponsors", "upcoming/links", "/apply"],
+    // pills: [aboutPills, linkPills, calendarPills, sponsorPills, blogPills, joinusPills],
   };
 
   const footer = {
diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
index 504a30c..5eedf3e 100644
--- a/src/layouts/Navbar.tsx
+++ b/src/layouts/Navbar.tsx
@@ -139,7 +139,7 @@ const Navbar = ({ clubname, logo, pages, links, pills }: Nav) => {
           <div className="max-w-[800px] grow rounded-md bg-black/20 backdrop-blur-md border flex justify-between items-center px-5 py-3">
             <Link to="/" className="flex items-center justify-start gap-2 font-bold" onClick={handleLinkClick}>
               <img src={logo} className="h-8 w-8"></img>
-              {clubname}
+              {/* {clubname} */}
             </Link>
             <button className="md:hidden" onClick={toggleMenu}>
               {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
diff --git a/src/main.tsx b/src/main.tsx
index 6ae00b7..92b6bbf 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -15,6 +15,7 @@ import Sponsors from "./routes/Sponsors";
 import HallOfFame from "./routes/HallOfFame";
 import Privacy from "./routes/Privacy";
 import Terms from "./routes/Terms";
+import Apply from "./routes/Apply";
 
 // Event Pages
 import OWeek from "./routes/eventPages/OWeek";
@@ -60,6 +61,7 @@ const router = createBrowserRouter(
       <Route path="upcoming/calendar" element={<Calendar />} />
       <Route path="upcoming/links" element={<Links />}></Route>
       <Route path="links" element={<Links />}></Route>
+      <Route path="apply" element={<Apply />}></Route>
       <Route path="sponsors" element={<Sponsors />} />
       <Route path="past" element={<Navigate to="./halloffame" replace />} />
       <Route path="past/halloffame" element={<HallOfFame />} />
diff --git a/src/routes/Apply.css b/src/routes/Apply.css
new file mode 100644
index 0000000..0185f6b
--- /dev/null
+++ b/src/routes/Apply.css
@@ -0,0 +1,66 @@
+.apply-banner {
+  position: relative;
+  width: 100%;
+  min-height: 600px;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 60px;
+}
+
+.apply-banner-bg {
+  position: absolute;
+  filter: brightness(25%) blur(4px);
+  inset: 0;
+  background-image: url('/img/applyBanner.jpg');
+  background-size: cover;
+  background-position: center;
+  mask-image: linear-gradient(transparent 5%, black 50%, transparent 95%);
+  z-index: 0;
+  pointer-events: none;
+}
+
+.apply-banner-content {
+  padding: 5% 0;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  z-index: 1;
+  margin: auto;
+  width: 100vw;
+  flex-wrap: wrap;
+  gap: 30px 90px;
+  justify-content: center
+}
+
+.apply-banner-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 min(5%, 60px) 0 0;
+  justify-content: center;
+}
+
+.apply-banner-col {
+  width: 100%;
+  max-width: 480px;
+  padding-right: 30px;
+}
+
+.apply-banner-card {
+  margin-bottom: min(10%, 60px);
+  min-height: 150px;
+}
+
+.apply-banner-title {
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .apply-banner-card {
+    min-height: 0px;
+  }
+
+  .apply-banner-title {
+    font-size: 3rem !important;
+  }
+}
\ No newline at end of file
diff --git a/src/routes/Apply.tsx b/src/routes/Apply.tsx
new file mode 100644
index 0000000..350f60f
--- /dev/null
+++ b/src/routes/Apply.tsx
@@ -0,0 +1,371 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Typography,
+  TextField,
+  Checkbox,
+  FormControlLabel,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  List,
+  ListItem,
+  ListItemText,
+  Box,
+  Link,
+  createTheme,
+  SelectChangeEvent,
+  ThemeProvider,
+  FormLabel,
+  Stack,  
+} from '@mui/material';
+import { grey, blue } from '@mui/material/colors';
+import TitleHero from "../features/TitleHero/TitleHero";
+
+import WebsiteQuestions from "./applicationQuestions/website";
+import SponsorshipsQuestions from "./applicationQuestions/sponsorships";
+
+import './Apply.css'
+import applyBanner from '/img/applyBanner.jpg';
+
+const theme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: blue,
+  },
+  typography: {
+    fontFamily: "'Poppins', sans-serif",
+    h1: {
+      fontWeight: "800",
+    },
+    h2: {
+      fontWeight: "600",
+    },
+    h3: {
+      fontWeight: "500",
+    },
+    h4: {
+      fontWeight: "400",
+    },
+    body1: {
+      fontFamily: "'Poppins', sans-serif",
+      margin: "0",
+    },
+  },
+  components: {
+    MuiTextField: {
+      defaultProps: {
+        margin: 'dense', // sets default margin
+        fullWidth: true, // optional
+      },
+    },
+    MuiSelect: {
+      defaultProps: {
+        margin: 'dense', // sets default margin
+        fullWidth: true, // optional
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          '&:focus': {
+            color: 'primary.main', // or 'primary.main' for blue on focus
+          },
+        },
+      },
+    },
+  }
+});
+
+const mdxComponents = {
+  h1: (props: any) => <Typography variant="h1" {...props} />,
+  h2: (props: any) => <Typography variant="h2" {...props} />,
+  h3: (props: any) => <Typography variant="h3" {...props} />,
+  h4: (props: any) => <Typography variant="h4" {...props} />,
+  h5: (props: any) => <Typography variant="h5" {...props} />,
+  h6: (props: any) => <Typography variant="h6" {...props} />,
+  p: (props: any) => <Typography variant="body1" {...props} />,
+  a: (props: any) => <Link {...props} />,
+  ul: (props: any) => <List {...props} />,
+  ol: (props: any) => <List component="ol" {...props} />,
+  li: (props: any) => (
+    <ListItem>
+      <ListItemText primary={props.children} />
+    </ListItem>
+  ),
+};
+
+interface FormData {
+  common: {
+    name: string,
+    email: string,
+    major: string,
+    availability: string,
+    confirm: boolean,
+    gradYear: string
+    role: string
+  },
+  website: {
+    experience: string,
+    ideas: string,
+    goodweb: string
+  },
+  sponsorships: {
+    collab: string,
+    attract: string,
+    engagement: string
+  }
+}
+
+function WebsiteOfficerForm() {
+  const [formData, setFormData] = useState<FormData>({
+    common: {
+      name: '',
+      email: '',
+      // Unsure how to implement atm
+      gradYear: '',
+      
+      // Possibly move to dropdown?
+      major: '',
+  
+      // Want to make this slider
+      availability: '',
+      confirm: false,
+      role: ''
+    },
+    website: {
+      experience: '',
+      ideas: '',
+      goodweb: '',
+    },
+    sponsorships: {
+      collab: '',
+      attract: '',
+      engagement: ''
+    }
+  });
+
+  const pageInfo = {
+    title: "Apply",
+    description: `Apply for HackMelbourne's officer intake for Semester 2, 2025!`,
+  };
+
+  const toolsOptions = ['HTML/CSS', 'JavaScript', 'WordPress', 'Git/GitHub', 'Figma/Canva'];
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>
+  ) => {
+    const [section, key] = e.target.name.split('.') as [keyof FormData, string];
+
+    // Handler specific to checkboxes
+    if ('type' in e.target && e.target.type === 'checkbox') {
+      const target = e.target as HTMLInputElement;
+  
+      // if (target.name === 'tools') {
+      //   setFormData((prev) => ({
+      //     ...prev,
+      //     tools: target.checked
+      //       ? [...prev.tools, target.value]
+      //       : prev.tools.filter((tool) => tool !== target.value),
+      //   }));
+      // } else if (target.name === 'confirm') {
+      // if (target.name === 'confirm') {
+      //   setFormData((prev) => ({
+      //     ...prev,
+      //     confirm: target.checked,
+      //   }));
+      // }
+    } else {
+      // For selects and other inputs without type or non-checkbox types:
+      const target = e.target as EventTarget & { name: string; value: string };
+      setFormData((prev) => ({
+        ...prev,
+        [section]: {
+          ...prev[section],
+          [key]: target.value,
+        }
+      }));
+    }
+    console.log(formData)
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!formData.common.confirm) {
+      alert("Please confirm your information before submitting.");
+      return;
+    }
+    console.log("Form submitted:", formData);
+    alert("Application submitted!");
+    // Reset form or send to backend here
+  };
+
+  return (
+    <>
+      <TitleHero pageTitle={pageInfo.title} pageDescription={pageInfo.description}></TitleHero>
+      <ThemeProvider theme={theme}>
+        <div className="apply-banner">
+          <div className="apply-banner-bg"></div>
+          <div className="apply-banner-content">
+            <Typography className="apply-banner-title" variant="h2">
+              Join<br/>HackMelbourne
+            </Typography>
+            <div className="apply-banner-grid">
+              <div className="apply-banner-col">
+                <div className="apply-banner-card">
+                  <Typography variant="h4">
+                    Inclusive Community
+                  </Typography>
+                  <Typography variant="body1">
+                    Our mission is to make tech and hackathons accessible to everyone, regardless of background, experience level, or university.
+                  </Typography>
+                </div>
+                <div className="apply-banner-card">
+                  <Typography variant="h4">
+                    Learning-Focused
+                  </Typography>
+                  <Typography variant="body1">
+                    We help design and run educational workshops, panels, and resources that teach everything from software engineering fundamentals to advanced web, mobile, and AI development.
+                  </Typography>
+                </div>
+              </div>
+              <div className="apply-banner-col">
+                <div className="apply-banner-card">
+                  <Typography variant="h4">
+                    Culture of Collaboration
+                  </Typography>
+                  <Typography variant="body1">
+                    HackMelbourne is dedicated to creating a space where students can connect, share ideas, and grow together. It doesn't matter if you're a first-time coders or seasoned hackers!
+                  </Typography>
+                </div>
+                <div className="apply-banner-card">
+                  <Typography variant="h4">
+                    Represent and Compete
+                  </Typography>
+                  <Typography variant="body1">
+                    Passionate about hackathons yourself? Officers also have opportunities to compete in national and international hackathons representing HackMelbourne!
+                  </Typography>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* <img className="apply-banner" src={applyBanner}/> */}
+        <Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
+          <Stack spacing={3}>
+            <FormControl fullWidth>
+              <FormLabel required>
+                Full Name
+              </FormLabel>
+              <TextField
+                placeholder="Elliot Guo"
+                name="common.name"
+                value={formData.common.name}
+                onChange={handleChange}
+              />
+            </FormControl>
+
+            <FormControl fullWidth>
+              <FormLabel required>
+                Student email
+              </FormLabel>
+              <TextField
+                placeholder="elliotguo@student.unimelb.edu.au"
+                name="common.email"
+                value={formData.common.email}
+                onChange={handleChange}
+              />
+            </FormControl>
+
+            <Box
+              sx={{
+                display: 'flex',
+                gap: 2, // space between fields (theme.spacing(2) = 16px)
+                mb: 3,  // bottom margin after the row
+              }}
+            >
+              <FormControl fullWidth>
+                <FormLabel required>
+                  Graduation Year
+                </FormLabel>
+                <TextField
+                  placeholder="2027"
+                  name="common.gradYear"
+                  value={formData.common.gradYear}
+                  onChange={handleChange}
+                />
+              </FormControl>
+
+              <FormControl fullWidth>
+                <FormLabel required>
+                  Major
+                </FormLabel>
+                <TextField
+                  placeholder="BSci"
+                  name="common.major"
+                  value={formData.common.major}
+                  onChange={handleChange}
+                />
+              </FormControl>
+            </Box>
+
+            {/* Have to add manual margin because select acts funny */}
+            <FormControl fullWidth sx={{ mt: 2 }}>
+              <FormLabel required sx={{ 
+                mb: 1,
+                '&.Mui-focused': {
+                  color: 'text.secondary',
+                },
+              }}>
+                Which role are you applying for? 
+              </FormLabel>
+              <Select
+                displayEmpty
+                name="common.role"
+                value={formData.common.role}
+                onChange={handleChange}
+                sx={() => ({
+                  color:
+                    formData.common.role ? 'text.primary' : 'text.secondary'
+                })}
+              >
+                <MenuItem value="">
+                  <em>Select a role</em>
+                </MenuItem>
+                <MenuItem value="Website Officer">Website Officer</MenuItem>
+                <MenuItem value="Sponsorships Officer">Sponsorships Officer</MenuItem>
+              </Select>
+            </FormControl>
+            {
+              (() => {
+                switch (formData.common.role) {
+                  case "Website Officer":
+                    return (
+                      <WebsiteQuestions
+                        formData={formData.website}
+                        handleChange={handleChange}
+                        toolsOptions={toolsOptions}
+                      />
+                    );
+                  case "Sponsorships Officer":
+                    return (
+                      <SponsorshipsQuestions
+                        formData={formData.sponsorships}
+                        handleChange={handleChange}
+                        toolsOptions={toolsOptions}
+                      />
+                    );
+                  default:
+                    return null;
+                }
+              })()
+            }
+          </Stack>
+        </Box>
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default WebsiteOfficerForm;
diff --git a/src/routes/applicationQuestions/sponsorships.tsx b/src/routes/applicationQuestions/sponsorships.tsx
new file mode 100644
index 0000000..8fda90d
--- /dev/null
+++ b/src/routes/applicationQuestions/sponsorships.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  TextField,
+  Typography,
+  FormControlLabel,
+  Checkbox,
+  FormLabel,
+  FormControl
+} from '@mui/material';
+
+interface props {
+  formData: {
+    collab: string,
+    attract: string,
+    engagement: string
+  };
+  handleChange: (e: React.ChangeEvent<any>) => void;
+  toolsOptions: string[];
+}
+
+const WebsiteQuestions: React.FC<props> = ({ formData, handleChange }) => (
+  <>
+    <FormControl fullWidth>
+      <FormLabel>
+        Describe how you approach cross-team collaboration.
+      </FormLabel>
+      <TextField
+        name="sponsorships.collab"
+        value={formData.collab}
+        onChange={handleChange}
+        multiline
+        rows={5}
+      />
+    </FormControl>
+
+    <FormControl fullWidth>
+      <FormLabel>
+      How would you attract students who have never participated in hackathons or tech events before?
+      </FormLabel>
+      <TextField
+        name="sponsorships.attract"
+        value={formData.attract}
+        onChange={handleChange}
+        multiline
+        rows={5}
+      />
+    </FormControl>
+
+    <FormControl fullWidth>
+      <FormLabel>
+        Have you ever managed a social media account or created content that significantly increased engagement?
+      </FormLabel>
+      <TextField
+        name="sponsorships.engagement"
+        value={formData.engagement}
+        onChange={handleChange}
+        multiline
+        rows={3}
+      />
+    </FormControl>
+  </>
+);
+
+export default WebsiteQuestions;
diff --git a/src/routes/applicationQuestions/website.tsx b/src/routes/applicationQuestions/website.tsx
new file mode 100644
index 0000000..d0f0946
--- /dev/null
+++ b/src/routes/applicationQuestions/website.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  TextField,
+  Typography,
+  FormControlLabel,
+  Checkbox,
+  FormLabel,
+  FormControl
+} from '@mui/material';
+
+interface websiteProps {
+  formData: {
+    experience: string,
+    ideas: string,
+    goodweb: string
+  };
+  handleChange: (e: React.ChangeEvent<any>) => void;
+  toolsOptions: string[];
+}
+
+const WebsiteQuestions: React.FC<websiteProps> = ({ formData, handleChange }) => (
+  <>
+    <FormControl fullWidth>
+      <FormLabel>
+        Describe any prior experience you have creating or designing websites.
+      </FormLabel>
+      <TextField
+        name="website.experience"
+        value={formData.experience}
+        onChange={handleChange}
+        multiline
+        rows={5}
+      />
+    </FormControl>
+
+    <FormControl fullWidth>
+      <FormLabel>
+        What do you think makes a good website?
+      </FormLabel>
+      <TextField
+        name="website.goodweb"
+        value={formData.goodweb}
+        onChange={handleChange}
+        multiline
+        rows={5}
+      />
+    </FormControl>
+
+    <FormControl fullWidth>
+      <FormLabel>
+        Tell us about any ideas you have for the website!
+      </FormLabel>
+      <TextField
+        name="website.ideas"
+        value={formData.ideas}
+        onChange={handleChange}
+      />
+    </FormControl>
+  </>
+);
+
+export default WebsiteQuestions;