diff --git a/src/components/ClassCard.js b/src/components/ClassCard.js
index 5dd9744..a8961d1 100644
--- a/src/components/ClassCard.js
+++ b/src/components/ClassCard.js
@@ -9,56 +9,124 @@ import {
   AvatarGroup,
 } from '@mui/material';
 
-function ClassCard({ abbreviation, title, color, teachers }) {
-  return (
-    <Card sx={{ width: 420 }}>
-      <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
-        <Container
-          sx={{
-            backgroundColor: color,
-            width: '140px',
-            height: '145px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'white',
-          }}
-        >
-          <h1>{abbreviation}</h1>
-        </Container>
-        <CardContent sx={{ width: '280px' }}>
-          <Typography gutterBottom variant="h5" component="div">
-            {title}
-          </Typography>
-          <Stack alignItems="center" direction="row" spacing={1}>
-            <AvatarGroup total={teachers.length}>
-              {teachers.map(t => (
-                <Avatar
-                  key={t.name}
-                  alt={t.name}
-                  src={t.avatar}
-                  sx={{ width: 30, height: 30 }}
-                />
-              ))}
-            </AvatarGroup>
-            <Typography
+function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
+  switch (layoutType) {
+    case 'desktop':
+      return (
+        <Card sx={{ width: 390, height: 145 }}>
+          <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
+            <Container
               sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
+                backgroundColor: color,
+                width: '30%',
+                height: '145px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'white',
               }}
-              variant="body2"
-              color="text.secondary"
             >
-              {teachers.map(t => t.name).join(',')}
-            </Typography>
-          </Stack>
-        </CardContent>
-      </CardActionArea>
-    </Card>
-  );
+              <h1>{abbreviation}</h1>
+            </Container>
+            <CardContent sx={{ width: '70%' }}>
+              <Typography
+                sx={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                }}
+                gutterBottom
+                variant="h5"
+                component="div"
+              >
+                {title}
+              </Typography>
+              <Stack alignItems="center" direction="row" spacing={1}>
+                <AvatarGroup total={teachers.length}>
+                  {teachers.map(t => (
+                    <Avatar
+                      key={t.name}
+                      alt={t.name}
+                      src={t.avatar}
+                      sx={{ width: 30, height: 30 }}
+                    />
+                  ))}
+                </AvatarGroup>
+                <Typography
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                  variant="body2"
+                  color="text.secondary"
+                >
+                  {teachers.map(t => t.name).join(',')}
+                </Typography>
+              </Stack>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      );
+
+    case 'mobile':
+      return (
+        <Card sx={{ width: '100%' }}>
+          <CardActionArea sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Container
+              sx={{
+                backgroundColor: color,
+                width: '100%',
+                height: '145px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'white',
+              }}
+            >
+              <h1>{abbreviation}</h1>
+            </Container>
+            <CardContent sx={{ width: '100%' }}>
+              <Typography gutterBottom variant="h5" component="div">
+                {title}
+              </Typography>
+              <Stack alignItems="center" direction="row" spacing={1}>
+                <AvatarGroup total={teachers.length}>
+                  {teachers.map(t => (
+                    <Avatar
+                      key={t.name}
+                      alt={t.name}
+                      src={t.avatar}
+                      sx={{ width: 30, height: 30 }}
+                    />
+                  ))}
+                </AvatarGroup>
+                <Typography
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                  }}
+                  variant="body2"
+                  color="text.secondary"
+                >
+                  {teachers.map(t => t.name).join(',')}
+                </Typography>
+              </Stack>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      );
+
+    default:
+      return null;
+  }
 }
 
 export default ClassCard;
diff --git a/src/components/MainMenu.js b/src/components/MainMenu.js
index b15a15c..65bd601 100644
--- a/src/components/MainMenu.js
+++ b/src/components/MainMenu.js
@@ -46,7 +46,7 @@ function MainMenu({ options, layoutType }) {
 
     case 'mobile':
       return (
-        <Box sx={{ width: '100%', position: 'fixed', bottom: 0 }}>
+        <Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
           <BottomNavigation
             onChange={(_, newValue) => {
               const newOption = options.find(option => option.id === newValue);
diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js
index ab0d672..f98f9f8 100644
--- a/src/screens/Home/index.js
+++ b/src/screens/Home/index.js
@@ -3,8 +3,10 @@ import { Grid, Skeleton, Stack } from '@mui/material';
 import { useUser } from '../../context/user';
 
 import ClassCard from '../../components/ClassCard';
+import useLayoutType from '../../hooks/useLayoutType';
 
 function Home() {
+  const layoutType = useLayoutType();
   const { fetchClassrooms } = useUser();
   const [classrooms, setClassrooms] = useState(null);
 
@@ -16,69 +18,166 @@ function Home() {
     getClassrooms();
   }, [fetchClassrooms]);
 
-  return (
-    <Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
-      <Grid sx={{}} item xs={8}>
-        <h1>Turmas</h1>
-        <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
-          {classrooms === null ? (
-            Array(6)
-              .fill()
-              .map((_, index) => (
-                <Skeleton
-                  key={index}
-                  variant="rectangular"
-                  width={420}
-                  height={145}
+  switch (layoutType) {
+    case 'desktop':
+      return (
+        <Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
+          <Grid sx={{}} item xs={8}>
+            <h1>Turmas</h1>
+            <Stack
+              alignItems="center"
+              flexWrap="wrap"
+              direction="row"
+              gap="30px"
+            >
+              {classrooms === null ? (
+                Array(6)
+                  .fill()
+                  .map((_, index) => (
+                    <Skeleton
+                      key={index}
+                      variant="rectangular"
+                      width={390}
+                      height={145}
+                    />
+                  ))
+              ) : classrooms.length !== 0 ? (
+                classrooms.map(classroom => (
+                  <ClassCard
+                    key={classroom.name}
+                    abbreviation={classroom.abbreviation}
+                    title={classroom.name}
+                    color={classroom.color}
+                    teachers={classroom.teachers}
+                    layoutType={layoutType}
+                  />
+                ))
+              ) : (
+                <h1>Nenhuma sala de aula encontrada!</h1>
+              )}
+            </Stack>
+          </Grid>
+          <Grid sx={{ borderLeft: '4px solid #CFCFCF' }} item xs={4}>
+            <h1>Atividades</h1>
+            <h2>Atribuídas</h2>
+            <Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
+              {classrooms === null ? (
+                Array(6)
+                  .fill()
+                  .map((_, index) => (
+                    <Skeleton
+                      key={index}
+                      variant="rectangular"
+                      width={390}
+                      height={145}
+                    />
+                  ))
+              ) : classrooms.length !== 0 ? (
+                classrooms.map(classroom => (
+                  <ClassCard
+                    key={classroom.name}
+                    abbreviation={classroom.abbreviation}
+                    title={classroom.name}
+                    color={classroom.color}
+                    teachers={classroom.teachers}
+                    layoutType={layoutType}
+                  />
+                ))
+              ) : (
+                <h1>Nenhuma sala de aula encontrada!</h1>
+              )}
+            </Stack>
+          </Grid>
+        </Grid>
+      );
+
+    case 'mobile':
+      return (
+        <Stack
+          sx={{
+            height: 'inherit',
+            width: '100%',
+            padding: '10px 20px ',
+            margin: 0,
+          }}
+        >
+          <h1>Turmas</h1>
+          <Stack
+            alignItems="center"
+            justifyContent="center"
+            flexWrap="wrap"
+            direction="row"
+            gap="30px"
+          >
+            {classrooms === null ? (
+              Array(6)
+                .fill()
+                .map((_, index) => (
+                  <Skeleton
+                    key={index}
+                    variant="rectangular"
+                    width="100%"
+                    height={245}
+                  />
+                ))
+            ) : classrooms.length !== 0 ? (
+              classrooms.map(classroom => (
+                <ClassCard
+                  key={classroom.name}
+                  abbreviation={classroom.abbreviation}
+                  title={classroom.name}
+                  color={classroom.color}
+                  teachers={classroom.teachers}
+                  layoutType={layoutType}
                 />
               ))
-          ) : classrooms.length !== 0 ? (
-            classrooms.map(classroom => (
-              <ClassCard
-                key={classroom.name}
-                abbreviation={classroom.abbreviation}
-                title={classroom.name}
-                color={classroom.color}
-                teachers={classroom.teachers}
-              />
-            ))
-          ) : (
-            <h1>Nenhuma sala de aula encontrada!</h1>
-          )}
-        </Stack>
-      </Grid>
-      <Grid sx={{ borderLeft: '4px solid #CFCFCF' }} item xs={4}>
-        <h1>Atividades</h1>
-        <h2>Atribuídas</h2>
-        <Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
-          {classrooms === null ? (
-            Array(6)
-              .fill()
-              .map((_, index) => (
-                <Skeleton
-                  key={index}
-                  variant="rectangular"
-                  width={420}
-                  height={145}
+            ) : (
+              <h1>Nenhuma sala de aula encontrada!</h1>
+            )}
+          </Stack>
+          <h1>Atividades</h1>
+          <h2>Atribuídas</h2>
+          <Stack
+            sx={{
+              paddingBottom: '100px',
+            }}
+            alignItems="center"
+            justifyContent="center"
+            flexWrap="wrap"
+            direction="row"
+            gap="30px"
+          >
+            {classrooms === null ? (
+              Array(6)
+                .fill()
+                .map((_, index) => (
+                  <Skeleton
+                    key={index}
+                    variant="rectangular"
+                    width="100%"
+                    height={245}
+                  />
+                ))
+            ) : classrooms.length !== 0 ? (
+              classrooms.map(classroom => (
+                <ClassCard
+                  key={classroom.name}
+                  abbreviation={classroom.abbreviation}
+                  title={classroom.name}
+                  color={classroom.color}
+                  teachers={classroom.teachers}
+                  layoutType={layoutType}
                 />
               ))
-          ) : classrooms.length !== 0 ? (
-            classrooms.map(classroom => (
-              <ClassCard
-                key={classroom.name}
-                abbreviation={classroom.abbreviation}
-                title={classroom.name}
-                color={classroom.color}
-                teachers={classroom.teachers}
-              />
-            ))
-          ) : (
-            <h1>Nenhuma sala de aula encontrada!</h1>
-          )}
+            ) : (
+              <h1>Nenhuma sala de aula encontrada!</h1>
+            )}
+          </Stack>
         </Stack>
-      </Grid>
-    </Grid>
-  );
+      );
+    default:
+      return null;
+  }
 }
 
 export default Home;