diff --git a/src/components/AnimatedLink.js b/src/components/AnimatedLink.js
new file mode 100644
index 00000000..199fb66d
--- /dev/null
+++ b/src/components/AnimatedLink.js
@@ -0,0 +1,48 @@
+
+import Link from "./Link";
+import Box from "@mui/material/Box";
+
+export const AnimatedLink = ({
+    color = "white",
+    hoverColor = "white",
+    children,
+    ...rest
+  }) => (
+    <Box
+      component={Link}
+      sx={{
+        position: "relative",
+        color: color,
+        "&:hover, &:focus": {
+          color: hoverColor,
+          textDecoration: "none",
+          "&::before": {
+            backgroundColor: hoverColor,
+            transform: "scaleX(1)",
+            transformOrigin: "left center"
+          }
+        },
+        "&::before": {
+          content: "\"\"",
+          position: "absolute",
+          left: 0,
+          bottom: {
+            xs: -0.5,
+            md: -2
+          },
+          height: "0.5px",
+          width: "100%",
+          backgroundColor: color,
+          transform: "scaleX(0)",
+          transformOrigin: "right center",
+          transition: "transform .45s cubic-bezier(0.86, 0, 0.07, 1)"
+        }
+      }}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+  
+  export default AnimatedLink;
+  
\ No newline at end of file
diff --git a/src/components/LogoutButton.js b/src/components/LogoutButton.js
index 15b44cf2..f4e31211 100644
--- a/src/components/LogoutButton.js
+++ b/src/components/LogoutButton.js
@@ -1,6 +1,8 @@
 import React from "react";
 import { navigate } from "gatsby";
 import { triggerLogoutEvent } from "@utils/eventTriggers";
+import IconButton from "@mui/material/IconButton";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 export default class
   LogoutButton extends React.Component {
@@ -15,15 +17,29 @@ export default class
   }
 
   render() {
-    let { isLoggedUser, styles } = this.props;
+    let { isLoggedUser, styles, ...rest } = this.props;
 
     if (isLoggedUser) {
       return (
-        <div className={styles.buttons}>
-          <button className={`link ${styles.userIcon}`} title="Logout" onClick={() => this.onClickLogout()}>
-            <i className="fa fa-sign-out icon is-medium" style={{ fontSize: "1.5rem" }} />
-          </button>
-        </div>
+        <IconButton
+          aria-label="logout"
+          onClick={this.onClickLogout}
+          styles={styles}
+          {...rest}
+        >
+          <LogoutIcon 
+            sx={{
+              color: "white",
+              fontSize: {
+                xs: 18,
+                lg: 19
+              },
+              padding: {
+                xs: 0
+              }
+            }}
+          />
+        </IconButton>
       );
     } else {
       return null;
diff --git a/src/components/Navbar/template.js b/src/components/Navbar/template.js
index ccb3b2c2..c76350c4 100644
--- a/src/components/Navbar/template.js
+++ b/src/components/Navbar/template.js
@@ -1,109 +1,336 @@
 import React, { useState } from "react";
-
+import Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar"
+import Container from "@mui/material/Container";
+import Toolbar from "@mui/material/Toolbar";
+import Drawer, { drawerClasses } from "@mui/material/Drawer";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import SvgIcon from "@mui/material/SvgIcon";
+import Avatar from "@mui/material/Avatar";
 import Link from "../Link";
-import ProfilePopupComponent from "../ProfilePopupComponent";
+import AnimatedLink from "../AnimatedLink";
+import ProfilePopupComponent from "@openeventkit/event-site/src/components/ProfilePopupComponent";
 import LogoutButton from "../LogoutButton";
 
 import styles from "../../styles/navbar.module.scss";
 
-const NavbarTemplate = ({
-  data,
-  summit,
-  isLoggedUser,
-  idpLoading,
-  idpProfile,
-  updateProfile,
-  updateProfilePicture,
-  defaultPath,
-  logo
-}) => {
-  const [active, setActive] = useState(false);
-  const [showProfile, setShowProfile] = useState(false);
-
-  const toggleHamburger = () => {
-    // toggle the active boolean in the state
-    setActive(!active);
-  };
-
-  const handleTogglePopup = () => {
-    if (showProfile) {
-      document.body.classList.remove("is-clipped");
-    } else {
-      document.body.classList.add("is-clipped");
-    }
-    setShowProfile(!showProfile);
-  };
-
-  const navBarActiveClass = active ? styles.isActive : "";
+import { useLocation } from "@reach/router";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
-  return (
-    <React.Fragment>
-      <nav
-        className={`${styles.navbar}`}
-        role="navigation"
-        aria-label="main navigation"
+const MenuIcon = () =>
+    <SvgIcon viewBox="0 0 22 18">
+      <svg width="22" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1H21" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+        <path d="M1 9H21" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+        <path d="M1 17H21" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+      </svg>
+    </SvgIcon>
+  ;
+  
+  const CloseIcon = () =>
+    <SvgIcon viewBox="0 0 18 18">
+      <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17 1L1 17" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+        <path d="M1 1L17 17" stroke="white" strokeWidth="1.33333" strokeLinecap="square" strokeLinejoin="round"/>
+      </svg>
+    </SvgIcon>
+  ;
+  
+  const NavbarTemplate = ({
+    data: pages,
+    summit,
+    isLoggedUser,
+    idpLoading,
+    idpProfile,
+    updateProfile,
+    updateProfilePicture,
+    defaultPath,
+    logo
+  }) => {
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [anchorElProfile, setAnchorElProfile] = React.useState(null);
+    const handleOpenProfile = (event) => {
+      setAnchorElProfile(event.currentTarget);
+    };
+    const handleCloseProfile = () => {
+      setAnchorElProfile(null);
+    };
+    const toggleMenu = (open) => (event) => {
+      setMenuOpen(open);
+    };
+    // needed to identify schedule page, to change sticky breakpoint for fnevent stock breakpoints handling 
+    const location = useLocation();
+    const isSchedulePage = location.pathname.startsWith("/a/schedule") || location.pathname.startsWith("/a/my-schedule");
+    const matchesStockEventSiteDesktopBreakpoint = useMediaQuery("(min-width: 991px)");
+    const navbarPosition = matchesStockEventSiteDesktopBreakpoint ? "relative" : "sticky";
+    return (
+      <>
+      <AppBar
+        sx={{
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          position: isSchedulePage ?
+            navbarPosition
+            :
+            {
+              xs: "sticky",
+              md: "relative"
+            }
+        }}
       >
-        <div className={styles.navbarBrand}>
-          <Link
-            to={isLoggedUser ? defaultPath : "/"}
-            className={styles.navbarItem}
-          >
-            {logo && <img src={logo} alt={summit.name} />}
-          </Link>
-
-          <button
-            className={`link ${styles.navbarBurger} ${styles.burger} ${navBarActiveClass}`}
-            aria-label="menu"
-            aria-expanded="false"
-            data-target="navbar"
-            onClick={() => toggleHamburger()}
-          >
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-          </button>
-        </div>
-
-        <div
-          id="navbar"
-          className={`${styles.navbarMenu} ${navBarActiveClass}`}
+        <Container
+          sx={{
+            px: {
+              xs: 2,
+              md: 3,
+              lg: 4
+            }
+          }}
+          maxWidth="xl"
         >
-          <div className={styles.navbarStart} />
-          <div className={styles.navbarEnd}>
-            {data.map((item, index) => (
-              <div className={styles.navbarItem} key={index}>
-                <Link to={item.link} className={styles.link}>
-                  <span>{item.title}</span>
-                </Link>
-              </div>
-            ))}
-            {isLoggedUser && (
-              <div className={styles.navbarItem}>
-                <button className="link" onClick={() => handleTogglePopup()}>
+          <Toolbar
+            disableGutters
+            sx={{
+              minHeight: {
+                xs: 46,
+                md: 64,
+                lg: 84,
+                xl: 100
+              }
+            }}
+          >
+            {logo &&   
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: {
+                  xs: "flex"
+                },
+              }}
+            >
+              <Link
+                to={isLoggedUser ? defaultPath : "/"}
+              >
+                <Box
+                  sx={{
+                    img: {
+                      height: {
+                        xs: 16,
+                        lg: 20
+                      },
+                      width: {
+                        xs: 71.89,
+                        lg: 89.87
+                      }
+                    }
+                  }}
+                >
                   <img
-                    alt="profile pic"
-                    className={styles.profilePic}
-                    src={idpProfile?.picture}
+                    src={logo}
+                    alt={summit.name}
                   />
-                </button>
-                {showProfile && (
-                  <ProfilePopupComponent
-                    userProfile={idpProfile}
-                    showProfile={showProfile}
-                    idpLoading={idpLoading}
-                    changePicture={updateProfilePicture}
-                    changeProfile={updateProfile}
-                    closePopup={() => handleTogglePopup()}
+                </Box>
+              </Link>
+            </Box>
+            }
+            <Box
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "flex",
+                  md: "none"
+                }
+              }}
+            >
+              <IconButton
+                aria-label="navigation menu"
+                aria-controls="menu-navbar"
+                aria-haspopup="true"
+                onClick={toggleMenu(!menuOpen)}
+                sx={{
+                  p: 0,
+                  borderRadius: 0,
+                  ".MuiTouchRipple-ripple .MuiTouchRipple-child": {
+                    borderRadius: 0,
+                  }
+                }}
+              >
+                { menuOpen ?
+                <CloseIcon />
+                :
+                <MenuIcon />
+                }
+              </IconButton>
+            </Box>
+            <Stack
+              direction="row"
+              spacing={{
+                md: 4
+              }}
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "none",
+                  md: "flex"
+                }
+              }}
+            >
+              {pages.map((page) => (
+                <AnimatedLink
+                  key={page.title}
+                  to={page.link}
+                >
+                  <Typography
+                    variant="caption2"
+                  >
+                    {page.title}
+                  </Typography>
+                </AnimatedLink>
+              ))}
+            </Stack>
+            {isLoggedUser && idpProfile &&
+            <Box
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "none",
+                  md: "flex"
+                },
+                ml: 4
+              }}
+            >
+              <Tooltip
+                title="Edit Profile"
+              >
+                <IconButton
+                  onClick={handleOpenProfile}
+                  sx={{
+                    p: 0
+                  }}
+                >
+                  <Avatar
+                    alt={idpProfile?.name}
+                    src={idpProfile?.picture}
                   />
-                )}
-              </div>
-            )}
-            <LogoutButton styles={styles} isLoggedUser={isLoggedUser} />
-          </div>
-        </div>
-      </nav>
-    </React.Fragment>
-  );
-};
-
-export default NavbarTemplate;
+                </IconButton>
+              </Tooltip>
+            </Box>
+            }
+            {isLoggedUser &&
+            <Box
+              sx={{
+                flexGrow: 0,
+                display: {
+                  xs: "none",
+                  md: "flex"
+                },
+                ml: 1
+              }}
+            >
+              <LogoutButton
+                isLoggedUser={isLoggedUser}
+                styles={styles}
+              />
+            </Box>
+            }
+          </Toolbar>
+        </Container>
+      </AppBar>
+      <Drawer
+        anchor="top"
+        open={menuOpen}
+        onClick={toggleMenu(false)}
+        ModalProps={{
+          // Better open performance on mobile.
+          keepMounted: true
+        }}
+        sx={{
+          display: {
+            xs: "flex",
+            md: "none"
+          },
+          flexShrink: 0,
+          [`& .${drawerClasses.paper}`]: {
+            width: "100%",
+            height: "100%",
+            boxSizing: "border-box",
+            backgroundColor: "black"
+          }
+        }}
+      >
+        <Toolbar
+          style={{
+            minHeight: 46
+          }}
+        />
+        <Stack
+          direction="column"
+          spacing={4}
+          sx={{
+            py: 6,
+            pl: 2
+          }}
+        >
+          {pages.map((page) => (
+          <AnimatedLink
+            key={page.title}
+            to={page.link}
+            style={{
+              width: "fit-content"
+            }}
+          >
+            <Typography
+              variant="caption1"
+            >
+              {page.title}
+            </Typography>
+          </AnimatedLink>
+          ))}
+          {isLoggedUser && idpProfile &&
+          <Box>
+            <IconButton
+              onClick={handleOpenProfile}
+              sx={{
+                p: 0
+              }}
+            >
+              <Avatar
+                alt={idpProfile?.name}
+                src={idpProfile?.picture}
+              />
+            </IconButton>
+          </Box>
+          }
+          {isLoggedUser &&
+          <Box>
+            <LogoutButton
+              sx={{
+                p: 0
+              }}
+              isLoggedUser={isLoggedUser}
+              styles={styles}
+            />
+          </Box>
+          }
+        </Stack>
+      </Drawer>
+      {isLoggedUser && idpProfile &&
+      <ProfilePopupComponent
+        userProfile={idpProfile}
+        showProfile={Boolean(anchorElProfile)}
+        idpLoading={idpLoading}
+        changePicture={updateProfilePicture}
+        changeProfile={updateProfile}
+        closePopup={handleCloseProfile}
+        style={{
+          zIndex: 10000
+        }}
+      />
+      }
+      </>
+    );
+  }
+  export default NavbarTemplate;
+  
\ No newline at end of file