diff --git a/src/components/ClassCard.js b/src/components/ClassCard.js
deleted file mode 100644
index ad6e534..0000000
--- a/src/components/ClassCard.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  Card,
-  CardContent,
-  Typography,
-  CardActionArea,
-  Container,
-  Avatar,
-  Stack,
-  AvatarGroup,
-  Tooltip,
-} from '@mui/material';
-
-function ClassCard({
-  abbreviation,
-  title,
-  color,
-  teachers,
-  layoutType,
-  onClick,
-}) {
-  if (layoutType === 'desktop') {
-    return (
-      <Card sx={{ width: 390, height: 135 }}>
-        <CardActionArea
-          onClick={() => onClick()}
-          sx={{ display: 'flex', flexDirection: 'row' }}
-        >
-          <Container
-            sx={{
-              backgroundColor: color,
-              width: '35%',
-              height: '145px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              color: 'white',
-            }}
-          >
-            <h1>{abbreviation}</h1>
-          </Container>
-          <CardContent sx={{ width: '70%' }}>
-            <Typography
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                display: '-webkit-box',
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: 'vertical',
-                fontSize: '17px',
-              }}
-              gutterBottom
-              variant="h6"
-              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>
-              <Tooltip title={teachers.map(t => t.name).join(', ')}>
-                <Typography
-                  sx={{
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    display: '-webkit-box',
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
-                  }}
-                  variant="body3"
-                  color="text.secondary"
-                >
-                  {teachers.map(t => t.name).join(', ')}
-                </Typography>
-              </Tooltip>
-            </Stack>
-          </CardContent>
-        </CardActionArea>
-      </Card>
-    );
-  } else if (layoutType === 'mobile') {
-    return (
-      <Card sx={{ width: '100%' }}>
-        <CardActionArea
-          onClick={() => onClick()}
-          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="h6" 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>
-    );
-  }
-}
-
-export default ClassCard;
diff --git a/src/components/ClassCard/index.js b/src/components/ClassCard/index.js
new file mode 100644
index 0000000..79bf495
--- /dev/null
+++ b/src/components/ClassCard/index.js
@@ -0,0 +1,107 @@
+import {
+  Card,
+  CardContent,
+  Typography,
+  CardActionArea,
+  Container,
+  Avatar,
+  Stack,
+  AvatarGroup,
+  Tooltip,
+} from '@mui/material';
+
+import styles from './styles';
+
+function ClassCard({
+  abbreviation,
+  title,
+  color,
+  teachers,
+  layoutType,
+  onClick,
+}) {
+  const {
+    cardContainer,
+    cardActionArea,
+    abbreviationContainer,
+    cardContent,
+    titleContainer,
+    avatar,
+    tooltip,
+  } = styles[layoutType];
+  if (layoutType === 'desktop') {
+    return (
+      <Card sx={cardContainer}>
+        <CardActionArea onClick={() => onClick()} sx={cardActionArea}>
+          <Container sx={abbreviationContainer(color)}>
+            <h1>{abbreviation}</h1>
+          </Container>
+          <CardContent sx={cardContent}>
+            <Typography
+              sx={titleContainer}
+              gutterBottom
+              variant="h6"
+              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={avatar}
+                  />
+                ))}
+              </AvatarGroup>
+              <Tooltip title={teachers.map(t => t.name).join(', ')}>
+                <Typography sx={tooltip} variant="body3" color="text.secondary">
+                  {teachers.map(t => t.name).join(', ')}
+                </Typography>
+              </Tooltip>
+            </Stack>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    );
+  } else if (layoutType === 'mobile') {
+    return (
+      <Card sx={cardContainer}>
+        <CardActionArea onClick={() => onClick()} sx={cardActionArea}>
+          <Container sx={abbreviationContainer(color)}>
+            <h1>{abbreviation}</h1>
+          </Container>
+          <CardContent sx={cardContent}>
+            <Typography
+              sx={titleContainer}
+              gutterBottom
+              variant="h6"
+              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={avatar}
+                  />
+                ))}
+              </AvatarGroup>
+              <Typography sx={tooltip} variant="body2" color="text.secondary">
+                {teachers.map(t => t.name).join(', ')}
+              </Typography>
+            </Stack>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    );
+  }
+}
+
+export default ClassCard;
diff --git a/src/components/ClassCard/styles.js b/src/components/ClassCard/styles.js
new file mode 100644
index 0000000..5c13e1f
--- /dev/null
+++ b/src/components/ClassCard/styles.js
@@ -0,0 +1,116 @@
+// ========== Desktop ==========
+const desktopCardContainer = {
+  width: 390,
+  height: 135,
+};
+const desktopCardActionArea = {
+  display: 'flex',
+  flexDirection: 'row',
+};
+
+const desktopAbbreviationContainer = color => ({
+  backgroundColor: color,
+  width: '35%',
+  height: '145px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'white',
+});
+
+const desktopCardContent = {
+  width: '70%',
+};
+
+const desktopTitleContainer = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  fontSize: '17px',
+};
+
+const desktopAvatar = {
+  width: 30,
+  height: 30,
+};
+
+const desktopTooltip = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const desktop = {
+  cardContainer: desktopCardContainer,
+  cardActionArea: desktopCardActionArea,
+  abbreviationContainer: desktopAbbreviationContainer,
+  cardContent: desktopCardContent,
+  titleContainer: desktopTitleContainer,
+  avatar: desktopAvatar,
+  tooltip: desktopTooltip,
+};
+
+// ========== Mobile ==========
+const mobileCardContainer = {
+  width: '100%',
+};
+
+const mobileCardActionArea = {
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+const mobileAbbreviationContainer = color => ({
+  backgroundColor: color,
+  width: '100%',
+  height: '145px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'white',
+});
+
+const mobileCardContent = {
+  width: '100%',
+};
+
+const mobileAvatar = {
+  width: 30,
+  height: 30,
+};
+
+const mobileTooltip = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const mobile = {
+  cardContainer: mobileCardContainer,
+  cardActionArea: mobileCardActionArea,
+  abbreviationContainer: mobileAbbreviationContainer,
+  cardContent: mobileCardContent,
+  titleContainer: null,
+  avatar: mobileAvatar,
+  tooltip: mobileTooltip,
+};
+
+// ========== Unset ==========
+const unset = {
+  cardContainer: null,
+  cardActionArea: null,
+  abbreviationContainer: null,
+  cardContent: null,
+  titleContainer: null,
+  avatar: null,
+  tooltip: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;