diff --git a/src/components/Layouts/ProtectedLayout/index.tsx b/src/components/Layouts/ProtectedLayout/index.tsx
index 808af8d..bef7029 100644
--- a/src/components/Layouts/ProtectedLayout/index.tsx
+++ b/src/components/Layouts/ProtectedLayout/index.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack } from '@chakra-ui/react';
+import { Box, Flex, HStack, useBreakpointValue } from '@chakra-ui/react';
 import { Outlet, Navigate, useNavigate } from 'react-router-dom';
 import { useContext, useEffect } from 'react';
 import 'react-toastify/dist/ReactToastify.css';
@@ -13,14 +13,15 @@ export const ProtectedLayout = () => {
     if (!user) navigate('/login');
   }, [user, navigate]);
 
+  const flexDir = useBreakpointValue({ base: 'column', md: 'row' }) as 'column' | 'row';
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   return (
-    <HStack w="100%">
-      <Box w="240px">
-        <Navbar />
-      </Box>
-      <Box maxH="100vh" w="100%" overflow="scroll">
+    <Flex w="100%" flexDir={flexDir}>
+      <Navbar />
+      <Box maxH="100vh" w="100%" overflow="scroll" mt={isMobile ? '100px' : '0'}>
         <Outlet />
       </Box>
-    </HStack>
+    </Flex>
   );
 };
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 768181c..7692e21 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,43 +1,33 @@
-import React, { useContext } from "react";
-import { Image, Stack, Text, VStack } from "@chakra-ui/react";
-import { useTranslation } from "react-i18next";
-import { MenuItems } from "./common";
-import { MenuItem } from "./MenuItem";
-import { CoachLogo } from "@/assets/images/logos";
-import { UserContext } from "@/contexts/UserContext";
-import UserCard from "../UserCard";
+import React, { useContext, useState } from 'react';
+import { Box, HStack, Image, Stack, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { MenuItems } from './common';
+import { MenuItem } from './MenuItem';
+import { CoachLogo } from '@/assets/images/logos';
+import { UserContext } from '@/contexts/UserContext';
+import UserCard from '../UserCard';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { useNavigate } from 'react-router-dom';
 
 const Navbar: React.FC = () => {
   const { logout, user } = useContext(UserContext);
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
 
-  return (
-    <VStack
-      minH={"100vh"}
-      w="240px !important"
-      display={"flex"}
-      alignItems="center"
-      borderRight="1px solid #DCE0E5"
-    >
-      <Image src={CoachLogo} alt={"Logo do coach"} m="24px 12px" mb="16px" />
-
-      <UserCard
-        logout={logout}
-        name={user?.name || ""}
-        email={user?.email || ""}
-      />
+  const isMobile = useBreakpointValue({ base: true, md: false });
+  const navbarWidth = useBreakpointValue({ base: 'full', md: '240px' });
 
-      <VStack w={"100%"} alignItems={"flex-start"} mt="16px !important">
+  const menu = (
+    <>
+      <Box mx={2}>
+        <UserCard logout={logout} name={user?.name || ''} email={user?.email || ''} />
+      </Box>
+      <VStack w={'100%'} alignItems={'flex-start'} mt="16px !important">
         {MenuItems.map((item, index) =>
           item.subItems ? (
-            <Stack key={index} w={"100%"}>
-              <Text
-                m="16px"
-                mb="8px"
-                fontSize="12px"
-                color="#9AA2AC"
-                fontWeight={700}
-              >
+            <Stack key={index} w={'100%'}>
+              <Text m="16px" mb="8px" fontSize="12px" color="#9AA2AC" fontWeight={700}>
                 {t(`Navbar.${item.label}`)}
               </Text>
               {item.subItems.map((subItem, sIndex) => (
@@ -46,6 +36,10 @@ const Navbar: React.FC = () => {
                   icon={subItem.icon}
                   label={t(`Navbar.${subItem.label}`)}
                   route={subItem.route}
+                  onClick={() => {
+                    setOpen(false);
+                    navigate(subItem.route);
+                  }}
                 />
               ))}
             </Stack>
@@ -55,10 +49,48 @@ const Navbar: React.FC = () => {
               icon={item.icon}
               label={t(`Navbar.${item.label}`)}
               route={item.route}
+              onClick={() => {
+                setOpen(false);
+                navigate(item.route);
+              }}
             />
-          )
+          ),
         )}
       </VStack>
+    </>
+  );
+
+  return (
+    <VStack
+      minH={isMobile ? 'none' : '100vh'}
+      w={navbarWidth}
+      alignItems="center"
+      borderRight={{ md: '1px solid #DCE0E5' }}
+    >
+      {isMobile ? (
+        <VStack
+          h={open ? '100vh' : '80px'}
+          overflow="hidden"
+          position="fixed"
+          bg="#fff"
+          top={0}
+          right={0}
+          left={0}
+          zIndex={9999}
+        >
+          <HStack w="full" justifyContent="space-between">
+            <HamburgerIcon w={8} h={8} mx="24px" onClick={() => setOpen(!open)} cursor="pointer" />
+            <Image mx="auto" src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
+            <Box w="72px" />
+          </HStack>
+          {menu}
+        </VStack>
+      ) : (
+        <>
+          <Image src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
+          {menu}
+        </>
+      )}
     </VStack>
   );
 };
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 65e5e21..b45dcd3 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Button, Center, HStack, Select, Spinner, Text, VStack } from '@chakra-ui/react';
+import { Box, Button, Center, Flex, HStack, Select, Spinner, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { IDashboard, ISchool, ITeachingPractices } from '@/types';
 import DashboardService from '@/services/dashboard';
 import Loader from '@/components/Base/Loader';
@@ -23,6 +23,7 @@ const DashboardPage: React.FC = () => {
   const [schoolName, setSchoolName] = useState<string>();
   const [schoolList, setSchoolList] = useState<ISchool[]>([]);
   const [selected, setSelected] = useState<ITeachingPractices>();
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   useEffect(() => {
     if (!loading) {
@@ -58,8 +59,8 @@ const DashboardPage: React.FC = () => {
 
   return (
     <VStack mx="auto" minH="100vh" maxW="1200px" position="relative" overflow="scroll" alignItems="flex-start" p="56px">
-      <HStack>
-        <VStack alignItems="start" mb="12px" minW={250}>
+      <Flex flexDir={isMobile ? 'column' : 'row'} w="full">
+        <VStack alignItems="start" mb="12px" mr="12px" minW={250}>
           <Text fontWeight="600">Select region</Text>
           {user?.role === ROLES.admin ? (
             <Select placeholder="..." onChange={(e) => handleRegion(e.target.value)} value={region}>
@@ -74,7 +75,7 @@ const DashboardPage: React.FC = () => {
           )}
         </VStack>
 
-        <VStack alignItems="start" mb="12px" minW={250}>
+        <VStack alignItems="start" mb="12px" mr="12px" minW={250}>
           <Text fontWeight="600">Select district</Text>
           {user?.role === ROLES.admin || user?.role === ROLES['region-analyst'] ? (
             <SelectDistrict
@@ -88,7 +89,7 @@ const DashboardPage: React.FC = () => {
           )}
         </VStack>
 
-        <VStack alignItems="start" mb="12px" minW={250}>
+        <VStack alignItems="start" mb="12px" mr="12px" minW={250}>
           <Text fontWeight="600">Select school</Text>
           {loading ? (
             <Spinner />
@@ -103,7 +104,7 @@ const DashboardPage: React.FC = () => {
             </Select>
           )}
         </VStack>
-      </HStack>
+      </Flex>
 
       {loading || !dashboard || !selected ? (
         <Center w={'100%'} mt="80px">
@@ -111,7 +112,7 @@ const DashboardPage: React.FC = () => {
         </Center>
       ) : (
         <>
-          <HStack w="100%" gap="16px" mb="56px" alignItems="stretch">
+          <Flex flexDir={isMobile ? 'column' : 'row'} w="full" gap="16px" mb="56px" alignItems="stretch">
             <VStack flex={3} gap="16px" alignItems="stretch">
               <Text color="#111417" fontSize="24px" fontWeight={600}>
                 Engagement
@@ -164,36 +165,38 @@ const DashboardPage: React.FC = () => {
                 values={dashboard.teachingPractices.map((item) => item.data.teachers)}
               />
             </VStack>
-          </HStack>
+          </Flex>
 
           <Text mb="8px" color="#111417" fontWeight={500} fontSize={'16px'}>
             Select Teaching Practices to show
           </Text>
 
-          <HStack mb="56px">
-            {dashboard.teachingPractices.map((item) => (
-              <Button
-                py="8px"
-                px="12px"
-                key={item.name}
-                fontWeight={400}
-                fontSize={'16px'}
-                borderRadius="full"
-                border="1px solid #DCE0E5"
-                onClick={() => setSelected(item)}
-                bg={selected.name === item.name ? '#C2E0FF' : '#ffffff'}
-                color={selected.name === item.name ? '#264673' : '#111417'}
-              >
-                {item.name}
-              </Button>
-            ))}
-          </HStack>
+          <Box maxW="full" overflow="scroll">
+            <HStack mb="56px" w="1200px">
+              {dashboard.teachingPractices.map((item) => (
+                <Button
+                  py="8px"
+                  px="12px"
+                  key={item.name}
+                  fontWeight={400}
+                  fontSize={'16px'}
+                  borderRadius="full"
+                  border="1px solid #DCE0E5"
+                  onClick={() => setSelected(item)}
+                  bg={selected.name === item.name ? '#C2E0FF' : '#ffffff'}
+                  color={selected.name === item.name ? '#264673' : '#111417'}
+                >
+                  {item.name}
+                </Button>
+              ))}
+            </HStack>
+          </Box>
 
           <Text color="#111417" fontSize="24px" fontWeight={600}>
             {selected.name}
           </Text>
 
-          <HStack w="100%" mt="24px" alignItems="stretch">
+          <Flex flexDir={isMobile ? 'column' : 'row'} w="full" mt="24px" alignItems="stretch">
             <BarGraph
               labels={['Needs work', 'Keep working', 'Needs attention', 'Almost there', 'Doing great']}
               values={[
@@ -205,7 +208,7 @@ const DashboardPage: React.FC = () => {
               ]}
             />
 
-            <VStack flex={3} alignItems="stretch">
+            <VStack mt={isMobile ? 4 : 0} flex={3} alignItems="stretch">
               <HStack alignItems="stretch">
                 <CardValue
                   label={'Teachers showing improvement or mastery'}
@@ -236,7 +239,7 @@ const DashboardPage: React.FC = () => {
                 />
               </VStack>
             </VStack>
-          </HStack>
+          </Flex>
         </>
       )}
     </VStack>