diff --git "a/public/\352\260\225\354\235\230\354\236\220\353\243\214\355\225\250.png" "b/public/\352\260\225\354\235\230\354\236\220\353\243\214\355\225\250.png"
new file mode 100644
index 0000000..11ba89e
Binary files /dev/null and "b/public/\352\260\225\354\235\230\354\236\220\353\243\214\355\225\250.png" differ
diff --git a/src/components/DetailButton.tsx b/src/components/DetailButton.tsx
index abc4f56..b885fcf 100644
--- a/src/components/DetailButton.tsx
+++ b/src/components/DetailButton.tsx
@@ -1,5 +1,45 @@
-const DetailButton = () => {
-  return <div>Hedaer</div>;
+import 강의자료함 from '/강의자료함.png';
+
+interface DetailButtonProps {
+  type: string;
+}
+
+const DetailButton = ({ type }: DetailButtonProps) => {
+  let title = '';
+  let description = '';
+
+  switch (type) {
+    case 'materials':
+      title = '강의 자료함';
+      description = '강의 자료를 확인하세요';
+      break;
+    case 'homework':
+      title = '주차별 숙제';
+      description = '이번주 숙제를 확인하세요';
+      break;
+    case 'stats':
+      title = '성적 통계';
+      description = '성적을 확인하세요';
+      break;
+    case 'counseling':
+      title = '상담 일지';
+      description = '상담 기록을 확인하세요';
+      break;
+    case 'payment':
+      title = '입금';
+      description = '다음 입금일은 2025.01.12입니다.';
+      break;
+  }
+
+  return (
+    <div className="bg-slate-200 p-4 rounded-[20px] flex-col items-start flex gap-6">
+      {type !== 'payment' && <img src={강의자료함} className="h-[80px] w-[80px]"></img>}
+      <div className="m-0">
+        <h3 className="text-[18px] font-bold">{title}</h3>
+        <p className="text-[13px]">{description}</p>
+      </div>
+    </div>
+  );
 };
 
 export default DetailButton;
diff --git a/src/pages/RoomDetail.tsx b/src/pages/RoomDetail.tsx
index 9a828e0..7e71abb 100644
--- a/src/pages/RoomDetail.tsx
+++ b/src/pages/RoomDetail.tsx
@@ -1,8 +1,15 @@
 import DetailButton from '../components/DetailButton';
 const RoomDetail = () => {
   return (
-    <div>
-      <DetailButton />
+    <div className="flex-col flex gap-5">
+      <h2>100일 째 함께 공부중</h2>
+      <div className="grid grid-cols-2 gap-4">
+        <DetailButton type="materials" />
+        <DetailButton type="homework" />
+        <DetailButton type="stats" />
+        <DetailButton type="counseling" />
+      </div>
+      <DetailButton type="payment" />
     </div>
   );
 };