diff --git a/apps/connect/src/components/atoms/NavBar.tsx b/apps/connect/src/components/atoms/NavBar.tsx
index d0b422c1c..159244852 100644
--- a/apps/connect/src/components/atoms/NavBar.tsx
+++ b/apps/connect/src/components/atoms/NavBar.tsx
@@ -6,6 +6,9 @@ import Toolbar from "@mui/material/Toolbar";
 import styled from "@mui/material/styles/styled";
 import Box from "@mui/material/Box";
 import portal from "../../assets/imgs/logo-white.svg";
+import MenuIcon from '@mui/icons-material/Menu';
+import { useState } from "react";
+import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
   background: "transparent",
@@ -28,6 +31,12 @@ const Link = styled(MuiLink)(({ theme }) => ({
   textUnderlineOffset: "6px",
   [theme.breakpoints.down("sm")]: {
     marginLeft: theme.spacing(2.5),
+    fontSize: "0.9rem",
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingRight: 16,
+    width: "100%",
+    lineHeight: "45px",
   },
   [theme.breakpoints.down("xs")]: {
     marginLeft: theme.spacing(1),
@@ -64,7 +73,19 @@ const Spacer = styled("div")(() => ({
   width: "100vw",
 }));
 
+const womrholescanButton = <Box>
+  <Link
+    href="https://wormholescan.io"
+    target="_blank"
+    color="inherit"
+  >
+    Wormholescan
+  </Link>
+  <Chip label="NEW" size="small" />
+</Box>;
+
 export default function NavBar() {
+  const [openMenu, setOpenMenu] = useState(false);
   return (
     <AppBar position="static" color="inherit">
       <Toolbar>
@@ -72,7 +93,7 @@ export default function NavBar() {
           <Logo src={portal} alt="Portal" />
         </MuiLink>
         <Spacer />
-        <Hidden implementation="css" xsDown>
+        <Hidden implementation="css" smDown>
           <div style={{ display: "flex", alignItems: "center" }}>
             {
               navBar.map(({ label, active, href }, idx) =>
@@ -86,19 +107,29 @@ export default function NavBar() {
                 </Link>
               )
             }
-            <Box>
-              <Link
-                href="https://wormholescan.io"
-                target="_blank"
-                color="inherit"
-              >
-                Wormholescan
-              </Link>
-              <Chip label="NEW" size="small" />
-            </Box>
+            {womrholescanButton}
           </div>
         </Hidden>
+        <Hidden implementation="css" smUp>
+          <MenuIcon onClick={() => { setOpenMenu(!openMenu) }} />
+        </Hidden>
       </Toolbar>
+      {openMenu && <Hidden implementation="css" smUp>
+      <List>
+          {
+            navBar.map(({ label, href }, idx) =>
+              <ListItem key={`${label}_${idx}`}>
+                <ListItemButton component="a" href={href}>
+                  <ListItemText primary={label} />
+                </ListItemButton>
+              </ListItem>
+            )
+          }
+          <ListItem>
+            {womrholescanButton}
+          </ListItem>
+      </List>
+      </Hidden>}
     </AppBar>
   );
 }