diff --git a/frontend/src/components/ClassInfo/ClassInfo.jsx b/frontend/src/components/ClassInfo/ClassInfo.jsx
new file mode 100644
index 0000000..2882889
--- /dev/null
+++ b/frontend/src/components/ClassInfo/ClassInfo.jsx
@@ -0,0 +1,22 @@
+import styles from './ClassInfo.module.css';
+
+export default function ClassInfo({ classTerm, classTime }) {
+  return (
+    <div className={styles.classInfo}>
+      <div className={styles.title}>수업정보</div>
+      <div className={styles.info}>
+        <div className={styles.textGroup}>
+          <div className={styles.subtitle}>수업 기간</div>
+          <div className={styles.content}>{classTerm}</div>
+        </div>
+        <div className={styles.textGroup}>
+          <div className={styles.subtitle}>수업시간</div>
+          <div className={styles.content}>{classTime}</div>
+        </div>
+      </div>
+      <button className={styles.button}>
+        <div className={styles.buttonText}>수강신청</div>
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ClassInfo/ClassInfo.module.css b/frontend/src/components/ClassInfo/ClassInfo.module.css
new file mode 100644
index 0000000..9170dfe
--- /dev/null
+++ b/frontend/src/components/ClassInfo/ClassInfo.module.css
@@ -0,0 +1,58 @@
+.classInfo {
+  width: 100%;
+  padding: 20px;
+  border-radius: 20px;
+  background-color: var(--background);
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.textGroup {
+  width: 100%;
+  height: 100%;
+}
+
+.subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin-bottom: 2px;
+}
+
+.content {
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.4;
+  color: var(--text-color-secondary);
+}
+
+.button {
+  border: 0;
+  border-radius: 8px;
+  background-color: var(--greyOpacity900);
+  text-align: center;
+  padding: 12px;
+}
+
+.buttonText {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--whiteOpacity900);
+}
diff --git a/frontend/src/components/ClassInfo/index.js b/frontend/src/components/ClassInfo/index.js
new file mode 100644
index 0000000..9b2b162
--- /dev/null
+++ b/frontend/src/components/ClassInfo/index.js
@@ -0,0 +1 @@
+export { default as ClassInfo } from './ClassInfo';
\ No newline at end of file