diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index f4a0038b..da9e7ada 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -78,14 +78,13 @@ Together's progress and milestones are split into separate, distinct issues. You
 
 > 💡 Issues tagged with `Good 100Devs First Try` are beginner-level issues that are great for fellow 100Devs.
 
-
 Currently we have the way to discover issues using Issue Tab.
+
 ### Issues Tab
 
 ![Screenshot of Issues tab on GitHub with example issues representing various stages of a project](assets/contributing-issues-tab.jpg)
 The [Issues tab](https://github.com/Together-100Devs/Together/issues) contains all of the issues that are currently in progress, planned to be worked on, or need further review.
 
-
 ## Editing code and submitting a pull request
 
 Use the following process to make changes after an issue has been assigned to you.
@@ -128,8 +127,8 @@ Now that you have a personal fork of the project on GitHub, you will be able to
 
 Now that you have the copy, you will need access to the feature branch related to your issue to create a local working branch to write your code.
 
-1. Set upstream to track the remote repository containing the original repo. (Not just your fork.)  
-                     
+1. Set upstream to track the remote repository containing the original repo. (Not just your fork.)
+
 2. Use this command to fetch the list of remote branches.  
    `git fetch upstream`
 
diff --git a/client/src/features/calendarHeader/CalendarHeader.jsx b/client/src/features/calendarHeader/CalendarHeader.jsx
index ee88dc14..b859e224 100644
--- a/client/src/features/calendarHeader/CalendarHeader.jsx
+++ b/client/src/features/calendarHeader/CalendarHeader.jsx
@@ -30,8 +30,8 @@ function CalendarHeader({ date }) {
   };
 
   return (
-    <header className="flex items-center max-[440px]:px-2 px-5 py-3 bg-white lg:justify-between w-full justify-center lg:flex-nowrap flex-wrap  max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4 overflow-hidden">
-      <section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
+    <header className="flex items-center max-[440px]:px-2 px-5 py-3 bg-white lg:justify-between w-full justify-center lg:flex-nowrap flex-wrap max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4 overflow-hidden">
+      <section className="hidden md:flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
         <HeaderButton
           Icon={BsCalendarPlusFill}
           tooltipText="Add Event"
@@ -49,7 +49,7 @@ function CalendarHeader({ date }) {
           onClick={() => navigate("/")}
         />
       </section>
-      <section className="flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-0 justify-between mb-4 lg:mb-0">
+      <section className="hidden md:flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-none justify-between mb-4 lg:mb-0">
         <img src={Logo} className="max-w-none max-[380px]:w-9" alt="Logo" />
         <MonthAndYear
           month={date?.month}
@@ -63,7 +63,7 @@ function CalendarHeader({ date }) {
           onClick={() => date.getCurrentMonth()}
         />
       </section>
-      <section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
+      <section className="hidden md:flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
         <HeaderButton
           Icon={IoChatbubblesOutline}
           tooltipText="Feedback"
diff --git a/client/src/features/home/HamburgerNav.jsx b/client/src/features/home/HamburgerNav.jsx
index 053c0b70..5fdb49e1 100644
--- a/client/src/features/home/HamburgerNav.jsx
+++ b/client/src/features/home/HamburgerNav.jsx
@@ -1,24 +1,47 @@
 import { useState } from "react";
 import { FaBars, FaTimes } from "react-icons/fa";
 import { useAuthContext } from "../../contexts/AuthContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useFormModalContext } from "../../contexts/FormModalContext";
 
-function HamburgerNav({ logo, logotext }) {
+function HamburgerNav({ logo, logotext, links }) {
   const navigate = useNavigate();
+  const location = useLocation();
   const { isAuthenticated, logout } = useAuthContext();
+  const formModal = useFormModalContext();
 
-  let Links = [
-    { name: "HOME", link: "/", type: "button" },
-    { name: "CALENDAR", link: "calendar", type: "button" },
-  ];
+  const getDefaultLinks = () => {
+    const defaultLinks = [{ name: "HOME", link: "/", type: "button" }];
+    if (location.pathname.includes("calendar")) {
+      defaultLinks.push({
+        name: "ADD EVENT",
+        action: formModal.handleOpen,
+        type: "function",
+      });
+    } else {
+      defaultLinks.push({
+        name: "CALENDAR",
+        link: "/calendar",
+        type: "button",
+      });
+    }
 
-  if (!isAuthenticated()) {
-    Links.push({ name: "LOG IN", link: "api/auth/discord", type: "a" });
-  } else {
-    Links.push({ name: "LOG OUT", onClick: logout, type: "button" });
-  }
+    if (!isAuthenticated()) {
+      defaultLinks.push({
+        name: "LOG IN",
+        link: "api/auth/discord",
+        type: "a",
+      });
+    } else {
+      defaultLinks.push({ name: "LOG OUT", action: logout, type: "function" });
+    }
 
-  let [open, setOpen] = useState(false);
+    return defaultLinks;
+  };
+
+  const menuItems = links || getDefaultLinks();
+
+  const [open, setOpen] = useState(false);
 
   return (
     <nav className="shadow-md w-full fixed top-0 left-0 md:hidden">
@@ -38,7 +61,7 @@ function HamburgerNav({ logo, logotext }) {
             open ? "top-20" : "top-[-480px]"
           }`}
         >
-          {Links.map((Link) => {
+          {menuItems.map((Link) => {
             return (
               <li key={Link.name} className="text-xl my-7">
                 {Link.type === "button" && (
@@ -57,6 +80,9 @@ function HamburgerNav({ logo, logotext }) {
                     {Link.name}
                   </a>
                 )}
+                {Link.type === "function" && (
+                  <button onClick={Link.action}>{Link.name}</button>
+                )}
               </li>
             );
           })}
diff --git a/client/src/pages/CalendarPage.jsx b/client/src/pages/CalendarPage.jsx
index 9c70ce75..901385a7 100644
--- a/client/src/pages/CalendarPage.jsx
+++ b/client/src/pages/CalendarPage.jsx
@@ -1,6 +1,7 @@
 import useDate from "../hooks/useDate";
 import Calendar from "../features/calendar/Calendar";
 import CalendarHeader from "../features/calendarHeader";
+import HamburgerNav from "../features/home/HamburgerNav";
 import FormProvider from "../contexts/FormContext";
 import Modal from "../features/modal/Modal";
 import UserForm from "../features/form/UserForm";
@@ -10,6 +11,7 @@ import EventModal from "../features/modal/EventModal";
 import { useModalContext } from "../contexts/ModalContext";
 import RejectionModal from "../features/modal/RejectionModal";
 import { useRef } from "react";
+import Logo from "../assets/images/togetherLogo.svg";
 
 function CalendarPage() {
   const auth = useAuthContext();
@@ -34,9 +36,10 @@ function CalendarPage() {
 
   return (
     <FormProvider>
+      <HamburgerNav logo={Logo} logotext="./logotext.png" />
       <main
         onWheel={handleWheelScroll}
-        className="flex flex-col gap-3 p-3 shadow-xs min-h-screen max-w-[1920px] mx-auto"
+        className="flex flex-col gap-3 p-3 shadow-xs min-h-screen max-w-[1920px] mx-auto relative z-[-1] md:z-[100] pt-24 md:pt-3"
       >
         <CalendarHeader date={date} />
         <Calendar date={date} />