diff --git a/components/DesktopNav.tsx b/components/DesktopNav.tsx
index 12b2b589c..2ef2e580d 100644
--- a/components/DesktopNav.tsx
+++ b/components/DesktopNav.tsx
@@ -2,7 +2,6 @@ import { useTranslation } from "next-i18next"
 import React from "react"
 import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
 import { Container, Dropdown, Nav, NavDropdown } from "./bootstrap"
-import { useProfile } from "./db"
 
 import {
   Avatar,
@@ -25,9 +24,6 @@ export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const { authenticated } = useAuth()
   const { t } = useTranslation(["common", "auth"])
 
-  const result = useProfile()
-  let isOrg = result?.profile?.role === "organization"
-
   return (
     <Container fluid className={`bg-secondary d-flex py-2 sticky-top`}>
       <NavbarLinkLogo />
@@ -81,7 +77,7 @@ export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
         <div className={`align-self-center justify-content-end`}>
           <Dropdown>
             <Dropdown.Toggle className={`btn-secondary`}>
-              <Avatar isOrg={isOrg} />
+              <Avatar />
             </Dropdown.Toggle>
             <Dropdown.Menu>
               <NavDropdown.Item>
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 06b4ea341..96fc32cf7 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -1,8 +1,9 @@
 import { useTranslation } from "next-i18next"
-import React, { FC, useState } from "react"
+import React, { useState } from "react"
+import Image from "react-bootstrap/Image"
+import styled from "styled-components"
 import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
-import { Container, Nav, Navbar, NavDropdown } from "./bootstrap"
-import { useProfile } from "./db"
+import { Col, Nav, Navbar, NavDropdown } from "./bootstrap"
 import {
   Avatar,
   NavbarLinkBills,
@@ -20,122 +21,132 @@ import {
   NavbarLinkWhyUse
 } from "./NavbarComponents"
 
-const NavBarBoxContainer: FC<
-  React.PropsWithChildren<{ className?: string }>
-> = ({ children, className }) => {
-  return (
-    <div
-      className={`d-flex flex-row align-items-start justify-content-between w-100`}
-    >
-      {children}
-    </div>
-  )
-}
+export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
+  const BlackCollapse = styled(() => {
+    return (
+      <Navbar.Collapse id="basic-navbar-nav" className="bg-black mt-2 ps-4">
+        {/* while MAPLE is trying to do away with inline styling,   *
+         *  both styled-components and bootstrap classes have been  *
+         *  ignoring height properties for some reason              */}
+        <div style={{ height: "100vh" }}>
+          {whichMenu == "site" ? <SiteLinks /> : <ProfileLinks />}
+        </div>
+      </Navbar.Collapse>
+    )
+  })`
+    .bg-black {
+      background-color: black;
+    }
+  `
 
-const NavBarBox: FC<React.PropsWithChildren<{ className?: string }>> = ({
-  children,
-  className
-}) => {
-  return (
-    <div
-      className={`col d-flex justify-content-start align-items-center ${className}`}
-    >
-      {children}
-    </div>
-  )
-}
+  const ProfileLinks = () => {
+    return (
+      <Nav className="my-4 d-flex align-items-start">
+        <NavbarLinkViewProfile />
+        <NavbarLinkEditProfile
+          handleClick={() => {
+            closeNav()
+          }}
+        />
+        <NavbarLinkSignOut
+          handleClick={() => {
+            closeNav()
+            void signOutAndRedirectToHome()
+          }}
+        />
+      </Nav>
+    )
+  }
+
+  const SiteLinks = () => {
+    return (
+      <Nav className="my-4">
+        <NavbarLinkBills handleClick={closeNav} />
+        <NavbarLinkTestimony handleClick={closeNav} />
+        <NavDropdown className={"navLink-primary"} title={t("about")}>
+          <NavbarLinkGoals handleClick={closeNav} />
+          <NavbarLinkTeam handleClick={closeNav} />
+          <NavbarLinkSupport handleClick={closeNav} />
+          <NavbarLinkFAQ handleClick={closeNav} />
+        </NavDropdown>
+
+        <NavDropdown className={"navLink-primary"} title={t("learn")}>
+          <NavbarLinkEffective handleClick={closeNav} />
+          <NavbarLinkProcess handleClick={closeNav} />
+          <NavbarLinkWhyUse handleClick={closeNav} />
+        </NavDropdown>
+      </Nav>
+    )
+  }
 
-export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const { authenticated } = useAuth()
   const [isExpanded, setIsExpanded] = useState(false)
+  const [whichMenu, setWhichMenu] = useState("site")
   const { t } = useTranslation(["common", "auth"])
 
-  const toggleNav = () => setIsExpanded(!isExpanded)
-  const closeNav = () => setIsExpanded(false)
+  const toggleSite = () => {
+    if (isExpanded && whichMenu == "profile") {
+      setWhichMenu("site")
+    } else {
+      setWhichMenu("site")
+      setIsExpanded(!isExpanded)
+    }
+  }
+
+  const toggleAvatar = () => {
+    if (isExpanded && whichMenu == "site") {
+      setWhichMenu("profile")
+    } else {
+      setWhichMenu("profile")
+      setIsExpanded(!isExpanded)
+    }
+  }
 
-  const result = useProfile()
-  let isOrg = result?.profile?.role === "organization"
+  const closeNav = () => setIsExpanded(false)
 
   return (
     <Navbar
       bg="secondary"
-      variant="dark"
-      sticky="top"
-      expand={false}
-      expanded={isExpanded}
+      className={`w-100 ${isExpanded ? "pb-0" : ""}`}
       data-bs-theme="dark"
+      expand="lg"
+      expanded={isExpanded}
     >
-      <Container fluid>
-        <NavBarBoxContainer>
-          <NavBarBox>
-            <Navbar expand={false} expanded={isExpanded}>
-              <Navbar.Brand>
-                <Navbar.Toggle aria-controls="topnav" onClick={toggleNav} />
-              </Navbar.Brand>
-              <Navbar.Collapse id="topnav">
-                <Nav className="me-auto">
-                  <NavbarLinkBills handleClick={closeNav} />
-                  <NavbarLinkTestimony handleClick={closeNav} />
-
-                  <NavDropdown className={"navLink-primary"} title={t("about")}>
-                    <NavbarLinkGoals handleClick={closeNav} />
-                    <NavbarLinkTeam handleClick={closeNav} />
-                    <NavbarLinkSupport handleClick={closeNav} />
-                    <NavbarLinkFAQ handleClick={closeNav} />
-                  </NavDropdown>
-
-                  <NavDropdown className={"navLink-primary"} title={t("learn")}>
-                    <NavbarLinkEffective handleClick={closeNav} />
-                    <NavbarLinkProcess handleClick={closeNav} />
-                    <NavbarLinkWhyUse handleClick={closeNav} />
-                  </NavDropdown>
-                </Nav>
-              </Navbar.Collapse>
-            </Navbar>
-          </NavBarBox>
-
-          <NavbarLinkLogo />
-
-          <NavBarBox className={`justify-content-end`}>
-            <Navbar
-              expand={false}
-              expanded={isExpanded}
-              variant="dark"
-              bg="secondary"
-              collapseOnSelect={true}
-              className="d-flex justify-content-end"
-            >
-              {authenticated ? (
-                <>
-                  <Navbar.Brand onClick={toggleNav}>
-                    <Nav.Link className="p-0 text-white">
-                      <Avatar isOrg={isOrg} />
-                    </Nav.Link>
-                  </Navbar.Brand>
-                  <Navbar.Collapse id="profile-nav">
-                    <Nav className="me-4 d-flex align-items-end">
-                      <NavbarLinkViewProfile />
-                      <NavbarLinkEditProfile
-                        handleClick={() => {
-                          closeNav()
-                        }}
-                      />
-                      <NavbarLinkSignOut
-                        handleClick={() => {
-                          closeNav()
-                          void signOutAndRedirectToHome()
-                        }}
-                      />
-                    </Nav>
-                  </Navbar.Collapse>
-                </>
+      <Col className="ms-3 ps-2">
+        <Navbar.Brand onClick={toggleSite}>
+          {isExpanded && whichMenu == "site" ? (
+            <Image
+              src="/Union.svg"
+              alt="x"
+              width="35"
+              height="35"
+              className="ms-2"
+            />
+          ) : (
+            <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          )}
+        </Navbar.Brand>
+      </Col>
+      <Col className="d-flex justify-content-center">
+        <NavbarLinkLogo handleClick={closeNav} />
+      </Col>
+      <Col className="d-flex justify-content-end me-3 pe-2">
+        {authenticated ? (
+          <Navbar.Brand onClick={toggleAvatar}>
+            <Nav.Link className="p-0 text-white">
+              {isExpanded && whichMenu == "profile" ? (
+                <Image src="/Union.svg" alt="x" width="35" height="35" />
               ) : (
-                <SignInWithButton />
+                <Avatar />
               )}
-            </Navbar>
-          </NavBarBox>
-        </NavBarBoxContainer>
-      </Container>
+            </Nav.Link>
+          </Navbar.Brand>
+        ) : (
+          <SignInWithButton />
+        )}
+      </Col>
+
+      <BlackCollapse />
     </Navbar>
   )
 }
diff --git a/components/NavbarComponents.tsx b/components/NavbarComponents.tsx
index 8740033b3..12485b4e1 100644
--- a/components/NavbarComponents.tsx
+++ b/components/NavbarComponents.tsx
@@ -3,9 +3,13 @@ import Image from "react-bootstrap/Image"
 import { useMediaQuery } from "usehooks-ts"
 import { useAuth } from "./auth"
 import { Nav, NavDropdown } from "./bootstrap"
+import { useProfile } from "./db"
 import { NavLink } from "./Navlink"
 
-export const Avatar = ({ isOrg }: { isOrg: boolean }) => {
+export const Avatar = () => {
+  const result = useProfile()
+  let isOrg = result?.profile?.role === "organization"
+
   return (
     <>
       {isOrg ? (
@@ -134,9 +138,10 @@ export const NavbarLinkGoals: React.FC<
 
 export const NavbarLinkLogo: React.FC<
   React.PropsWithChildren<{
+    handleClick?: any
     other?: any
   }>
-> = ({ other }) => {
+> = ({ handleClick, other }) => {
   const isMobile = useMediaQuery("(max-width: 768px)")
   const { t } = useTranslation(["common", "auth"])
   return (
@@ -144,6 +149,7 @@ export const NavbarLinkLogo: React.FC<
       className={
         isMobile ? "" : "align-items-center justify-content-start me-3"
       }
+      onClick={handleClick}
     >
       <NavLink className={isMobile ? "" : "py-0 px-2"} href="/" {...other}>
         <Image
diff --git a/public/Union.svg b/public/Union.svg
new file mode 100644
index 000000000..f9378875a
--- /dev/null
+++ b/public/Union.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.938727 0.44068C1.07806 0.300991 1.24359 0.190162 1.42583 0.114542C1.60806 0.0389231 1.80343 0 2.00073 0C2.19803 0 2.39339 0.0389231 2.57563 0.114542C2.75786 0.190162 2.92339 0.300991 3.06273 0.44068L11.0007 8.38168L18.9387 0.44068C19.0782 0.301217 19.2438 0.190588 19.426 0.11511C19.6082 0.0396331 19.8035 0.000785351 20.0007 0.000785351C20.198 0.000785351 20.3933 0.0396331 20.5755 0.11511C20.7577 0.190588 20.9233 0.301217 21.0627 0.44068C21.2022 0.580144 21.3128 0.745712 21.3883 0.92793C21.4638 1.11015 21.5026 1.30545 21.5026 1.50268C21.5026 1.69991 21.4638 1.89521 21.3883 2.07743C21.3128 2.25965 21.2022 2.42522 21.0627 2.56468L13.1217 10.5027L21.0627 18.4407C21.2022 18.5801 21.3128 18.7457 21.3883 18.9279C21.4638 19.1101 21.5026 19.3054 21.5026 19.5027C21.5026 19.6999 21.4638 19.8952 21.3883 20.0774C21.3128 20.2596 21.2022 20.4252 21.0627 20.5647C20.9233 20.7041 20.7577 20.8148 20.5755 20.8902C20.3933 20.9657 20.198 21.0046 20.0007 21.0046C19.8035 21.0046 19.6082 20.9657 19.426 20.8902C19.2438 20.8148 19.0782 20.7041 18.9387 20.5647L11.0007 12.6237L3.06273 20.5647C2.92326 20.7041 2.7577 20.8148 2.57548 20.8902C2.39326 20.9657 2.19796 21.0046 2.00073 21.0046C1.8035 21.0046 1.60819 20.9657 1.42598 20.8902C1.24376 20.8148 1.07819 20.7041 0.938727 20.5647C0.799264 20.4252 0.688635 20.2596 0.613157 20.0774C0.53768 19.8952 0.498832 19.6999 0.498832 19.5027C0.498832 19.3054 0.53768 19.1101 0.613157 18.9279C0.688635 18.7457 0.799264 18.5801 0.938727 18.4407L8.87973 10.5027L0.938727 2.56468C0.799038 2.42534 0.688209 2.25982 0.612589 2.07758C0.53697 1.89535 0.498047 1.69998 0.498047 1.50268C0.498047 1.30538 0.53697 1.11002 0.612589 0.92778C0.688209 0.745544 0.799038 0.580018 0.938727 0.44068Z" fill="white"/>
+</svg>