diff --git a/apps/dashboard/src/components/navbar.tsx b/apps/dashboard/src/components/navbar.tsx
index 065bc4da..a1f9b094 100644
--- a/apps/dashboard/src/components/navbar.tsx
+++ b/apps/dashboard/src/components/navbar.tsx
@@ -1,5 +1,12 @@
 import { shortenAddress } from "@bandada/utils"
-import { Button, Container, Heading, HStack, Image } from "@chakra-ui/react"
+import {
+    Button,
+    Container,
+    Heading,
+    HStack,
+    Image,
+    useMediaQuery
+} from "@chakra-ui/react"
 import { useAccountModal, useConnectModal } from "@rainbow-me/rainbowkit"
 import { useCallback, useContext } from "react"
 import { useAccount } from "wagmi"
@@ -25,10 +32,13 @@ export default function NavBar(): JSX.Element {
         [address, admin]
     )
 
+    const [isWideScreen] = useMediaQuery("(min-width: 426px)")
+
     return (
         <Container maxWidth="container.xl">
             <HStack
                 pt="80px"
+                wrap="wrap"
                 pb="40px"
                 align="center"
                 justify="space-between"
@@ -73,9 +83,9 @@ export default function NavBar(): JSX.Element {
                     >
                         {!isLoggedInAdmin()
                             ? "Unconnected account"
-                            : `Connected as ${shortenAddress(
-                                  address as string
-                              )}`}
+                            : `${
+                                  isWideScreen ? "Connected as" : ""
+                              } ${shortenAddress(address as string)}`}
                     </Button>
                 </HStack>
             </HStack>