diff --git a/frontend/src/pages/admin/AttendanceCode.jsx b/frontend/src/pages/admin/AttendanceCode.jsx
index 6e18188..79e0002 100644
--- a/frontend/src/pages/admin/AttendanceCode.jsx
+++ b/frontend/src/pages/admin/AttendanceCode.jsx
@@ -1,17 +1,60 @@
+import { useState } from "react";
+import api from "../../api/api";
 import Header from "../../components/Header";
 import style from "./AttendanceCode.module.css";
+
 const AttendanceCode = () => {
+  const [code, setCode] = useState("");
+
+  // 출석코드 생성
+  const generateCode = async () => {
+    try {
+      const res = await api.post("/attendance/start");
+      const newCode = res.data.data.code;
+      setCode(newCode);
+    } catch (error) {
+      alert(
+        "출석코드 생성 실패: " + (error.response?.data?.message || "서버 오류")
+      );
+    }
+  };
+
+  // 출석코드 만료
+  const expireCode = async () => {
+    try {
+      const res = await api.put("/attendance/expire-latest");
+      alert(res.data.message || "출석코드가 만료되었습니다");
+      setCode("");
+    } catch (error) {
+      alert(
+        "출석코드 만료 실패: " + (error.response?.data?.message || "서버 오류")
+      );
+    }
+  };
+
   return (
-    <div className={style.attendancecode_wraper}>
+    <div className={style.attendancecode_wrapper}>
       <Header />
       <div className={style.num_container}>
-        <div className={style.num_wrapper}></div>
-        <div className={style.num_wrapper}></div>
-        <div className={style.num_wrapper}></div>
-        <div className={style.num_wrapper}></div>
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className={style.num_wrapper}>
+            {code[i] || ""}
+          </div>
+        ))}
+      </div>
+      <div className={style.button_container}>
+        <button onClick={generateCode} className={style.button}>
+          생성
+        </button>
+
+        {code && (
+          <button onClick={expireCode} className={style.button}>
+            종료
+          </button>
+        )}
       </div>
-      <button className={style.createbutton}>생성</button>
     </div>
   );
 };
+
 export default AttendanceCode;
diff --git a/frontend/src/pages/admin/AttendanceCode.module.css b/frontend/src/pages/admin/AttendanceCode.module.css
index e92a220..09977f1 100644
--- a/frontend/src/pages/admin/AttendanceCode.module.css
+++ b/frontend/src/pages/admin/AttendanceCode.module.css
@@ -3,6 +3,11 @@
   height: 101px;
   background-color: #575757;
   border-radius: 21px;
+  font-size: 50px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border: 1px solid #a6a6a6;
 }
 .num_container {
@@ -11,18 +16,24 @@
   flex-direction: row;
   gap: 8px;
 }
-.attendancecode_wraper {
+.attendancecode_wrapper {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
-.createbutton {
+.button {
   width: 60px;
   height: 42px;
   background-color: #575757;
   border-radius: 21px;
-  margin-top: 60px;
   border: 1px solid #a6a6a6;
   color: white;
 }
+.button_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 60px;
+}
diff --git a/frontend/src/pages/generation/Deposit.jsx b/frontend/src/pages/generation/Deposit.jsx
index 8b9c17b..bf231b8 100644
--- a/frontend/src/pages/generation/Deposit.jsx
+++ b/frontend/src/pages/generation/Deposit.jsx
@@ -1,6 +1,5 @@
 import Header from "../../components/Header";
 import styles from "./Deposit.module.css";
-import axios from "axios";
 import { useEffect, useState } from "react";
 import api from "../../api/api";