diff --git a/frontend/public/img/boom-filled-green.png b/frontend/public/img/boom-filled-green.png
new file mode 100644
index 0000000..6416093
Binary files /dev/null and b/frontend/public/img/boom-filled-green.png differ
diff --git a/frontend/public/img/boom-filled-red.png b/frontend/public/img/boom-filled-red.png
new file mode 100644
index 0000000..ef5bb3b
Binary files /dev/null and b/frontend/public/img/boom-filled-red.png differ
diff --git a/frontend/public/img/tabler--boom.png b/frontend/public/img/tabler--boom.png
new file mode 100644
index 0000000..23126cf
Binary files /dev/null and b/frontend/public/img/tabler--boom.png differ
diff --git a/frontend/src/assets/img/tabler--boom.svg b/frontend/public/img/tabler--boom.svg
similarity index 100%
rename from frontend/src/assets/img/tabler--boom.svg
rename to frontend/public/img/tabler--boom.svg
diff --git a/frontend/src/Attendance.jsx b/frontend/src/Attendance.jsx
index 5581dfd..7593b8c 100644
--- a/frontend/src/Attendance.jsx
+++ b/frontend/src/Attendance.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Header from "./components/Header";
 import InputBlock from "./components/InputBlock";
+import AttendanceWeekInfo from "./components/AttendanceWeekInfo";
 import styles from "./Attendance.module.css";
 
 const Attendance = () => {
@@ -36,7 +37,24 @@ const Attendance = () => {
           Submit
         </button>
       )}
-      <div className={styles.attend_img_container}></div>
+      <div className={styles.attend_img_container}>
+        <div className={styles.boom_icon}>
+          <img src="img/tabler--boom.png" />
+        </div>
+        <div className={styles.boom_icon}>
+          <img src="img/tabler--boom.png" />
+        </div>
+        <div className={styles.boom_icon}>
+          <img src="img/tabler--boom.png" />
+        </div>
+      </div>
+      <div className={styles.attend_week_container}>
+        <AttendanceWeekInfo week={1} />
+        <AttendanceWeekInfo week={2} />
+        <AttendanceWeekInfo week={3} />
+        <AttendanceWeekInfo week={4} />
+        <AttendanceWeekInfo week={5} />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/Attendance.module.css b/frontend/src/Attendance.module.css
index cebb0b5..ea7f9d4 100644
--- a/frontend/src/Attendance.module.css
+++ b/frontend/src/Attendance.module.css
@@ -15,3 +15,18 @@
   right: 63px;
   padding: 7px;
 }
+.attend_img_container {
+  display: flex;
+  gap: 22px;
+  width: 100%;
+  padding-block: 40px;
+  justify-content: center;
+}
+.boom_icon {
+  width: 70px;
+  height: 65px;
+}
+.boom_icon > img {
+  width: 100%;
+  height: 100%;
+}
diff --git a/frontend/src/components/AttendanceWeekInfo.jsx b/frontend/src/components/AttendanceWeekInfo.jsx
new file mode 100644
index 0000000..4f80431
--- /dev/null
+++ b/frontend/src/components/AttendanceWeekInfo.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import "./componentsCss/AttendanceWeekInfo.css";
+
+const AttendanceWeekInfo = ({ week }) => {
+  return (
+    <div className="eachWeekInfo">
+      <p className="weekInfo">{week}주차</p>
+    </div>
+  );
+};
+
+export default AttendanceWeekInfo;
diff --git a/frontend/src/components/componentsCss/AttendanceWeekInfo.css b/frontend/src/components/componentsCss/AttendanceWeekInfo.css
new file mode 100644
index 0000000..23216da
--- /dev/null
+++ b/frontend/src/components/componentsCss/AttendanceWeekInfo.css
@@ -0,0 +1,16 @@
+.eachWeekInfo {
+  width: 270px;
+  padding: 14px;
+  border-radius: 20px;
+  background-color: #6e6e6e;
+  border: 1px solid #d9d9d9;
+  margin-block: 20px;
+  display: flex;
+  align-items: center;
+}
+.weekInfo {
+  font-weight: 600;
+  font-size: 15px;
+  color: #ffffff;
+  font-family: "Inter", sans-serif;
+}