diff --git a/frontend/src/components/ClassCard/ClassCard.jsx b/frontend/src/components/ClassCard/ClassCard.jsx
new file mode 100644
index 0000000..5aa5ac5
--- /dev/null
+++ b/frontend/src/components/ClassCard/ClassCard.jsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+import styles from './ClassCard.module.css';
+
+export default function ClassCard({ path, children }) {
+  return (
+    <Link
+      to={path}
+      className={styles.card}
+    >
+      <div className={styles.thumbnail} />
+      <div>{children}</div>
+    </Link>
+  );
+}
diff --git a/frontend/src/components/ClassCard/ClassCard.module.css b/frontend/src/components/ClassCard/ClassCard.module.css
new file mode 100644
index 0000000..491867d
--- /dev/null
+++ b/frontend/src/components/ClassCard/ClassCard.module.css
@@ -0,0 +1,19 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 295px;
+  height: 295px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+}
diff --git a/frontend/src/components/ClassCard/index.js b/frontend/src/components/ClassCard/index.js
new file mode 100644
index 0000000..6208da0
--- /dev/null
+++ b/frontend/src/components/ClassCard/index.js
@@ -0,0 +1 @@
+export { default as ClassCard } from './ClassCard';
diff --git a/frontend/src/components/ClassGrid/ClassGrid.jsx b/frontend/src/components/ClassGrid/ClassGrid.jsx
new file mode 100644
index 0000000..710f201
--- /dev/null
+++ b/frontend/src/components/ClassGrid/ClassGrid.jsx
@@ -0,0 +1,10 @@
+import styles from './ClassGrid.module.css';
+
+export default function ClassGrid({ title, children }) {
+  return (
+    <section>
+      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.grid}>{children}</div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/ClassGrid/ClassGrid.module.css b/frontend/src/components/ClassGrid/ClassGrid.module.css
new file mode 100644
index 0000000..7701b2b
--- /dev/null
+++ b/frontend/src/components/ClassGrid/ClassGrid.module.css
@@ -0,0 +1,14 @@
+.title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 700;
+  color: var(--text-color);
+  margin: 0 0 40px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(295px, auto));
+  gap: 20px;
+  justify-content: start;
+}
diff --git a/frontend/src/components/ClassGrid/index.js b/frontend/src/components/ClassGrid/index.js
new file mode 100644
index 0000000..0cb557e
--- /dev/null
+++ b/frontend/src/components/ClassGrid/index.js
@@ -0,0 +1 @@
+export { default as ClassGrid } from './ClassGrid';