diff --git a/frontend/src/components/pages/teacher/ClassroomsPage.tsx b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
index 610be39c0..e219054d4 100644
--- a/frontend/src/components/pages/teacher/ClassroomsPage.tsx
+++ b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
@@ -5,8 +5,7 @@ import { useQuery } from "@apollo/client";
 import {
   Box,
   Center,
-  Grid,
-  GridItem,
+  Flex,
   Tab,
   TabList,
   TabPanel,
@@ -124,7 +123,7 @@ const ClassroomsPage = (): React.ReactElement => {
                 </TabList>
                 <TabPanels>
                   <TabPanel padding="0">
-                    <Grid gap={4} templateColumns="repeat(4, 1fr)">
+                    <Flex alignItems="left" flexWrap="wrap">
                       {paginatedData?.map(
                         ({
                           id,
@@ -135,7 +134,7 @@ const ClassroomsPage = (): React.ReactElement => {
                           startDate,
                           studentCount,
                         }) => (
-                          <GridItem key={id} flex="1" paddingTop="4">
+                          <Flex key={id} paddingRight="4" paddingTop="4">
                             <ClassroomCard
                               key={id}
                               activeAssessments={activeAssessments}
@@ -146,10 +145,10 @@ const ClassroomsPage = (): React.ReactElement => {
                               startDate={startDate}
                               studentCount={studentCount}
                             />
-                          </GridItem>
+                          </Flex>
                         ),
                       )}
-                    </Grid>
+                    </Flex>
                     <VStack
                       alignItems="center"
                       paddingBottom="6"