diff --git a/public/icons/check-mint.svg b/public/icons/check-mint.svg
new file mode 100644
index 00000000..1d7bd34f
--- /dev/null
+++ b/public/icons/check-mint.svg
@@ -0,0 +1,5 @@
+<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon_&#236;&#178;&#180;&#237;&#129;&#172;">
+<path id="Vector 59" d="M8.5 18L17.8061 27.5L32.5 12.5" stroke="#3ED7BE" stroke-width="2.5"/>
+</g>
+</svg>
diff --git a/src/interactions/index.jsx b/src/interactions/index.jsx
index ce5f6954..f8dbd2b4 100644
--- a/src/interactions/index.jsx
+++ b/src/interactions/index.jsx
@@ -1,10 +1,59 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize";
 
 export default function InteractionPage() {
   const SECTION_IDX = 1;
   const sectionRef = useRef(null);
+  const [currentInteraction, setCurrentInteraction] = useState(0);
   useSectionInitialize(SECTION_IDX, sectionRef);
 
-  return <div ref={sectionRef} className="bg-black h-[2017px]"></div>;
+  const isJoinedList = [1, 0, 0, 1, -1];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="bg-black h-[2017px] flex flex-col items-center"
+    >
+      <span className="mt-60 py-5 text-body-l text-neutral-200 font-bold items-center border-b-[3px] border-b-neutral-400">
+        EVENT 1
+      </span>
+
+      <span className="pt-9 text-head-m text-white font-bold">
+        The 새로워진 IONIQ 5, 인터랙션으로 만나다
+      </span>
+
+      <span className="pt-4 text-title-s text-neutral-300 whitespace-pre-wrap text-center">
+        {`The new IONIQ 5의 새로운 기능을 날마다 체험하고 이벤트에 응모하세요!\n추첨을 통해 IONIQ과 함께하는 제주 여행 패키지를 드립니다`}
+      </span>
+
+      <div className="pt-12 flex gap-[60px]">
+        {isJoinedList.map((isJoined, index) => (
+          <div
+            key={index}
+            onClick={() => setCurrentInteraction(index)}
+            className="flex flex-col items-center select-none"
+          >
+            <img
+              src="icons/check-mint.svg"
+              alt="체크"
+              className={`${isJoined > 0 ? "" : "invisible"}`}
+            />
+
+            <span
+              className={`text-body-l  font-bold ${currentInteraction === index ? "text-neutral-100" : "text-neutral-500"}`}
+            >
+              Day{index + 1}
+            </span>
+
+            <span
+              className={`text-body-m font-bold ${isJoined > 0 ? "text-green-400" : "text-neutral-700"}`}
+            >
+              {isJoined > 0 ? "참여 완료" : !isJoined ? "미참여" : ""}
+            </span>
+          </div>
+        ))}
+      </div>
+
+    </section>
+  );
 }