diff --git a/01-color-flipper/setup/app.js b/01-color-flipper/setup/app.js
index 901729f46..e769cc7a7 100644
--- a/01-color-flipper/setup/app.js
+++ b/01-color-flipper/setup/app.js
@@ -1 +1,16 @@
 const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
+const btn = document.getElementById("btn");
+const color = document.querySelector(".color");
+
+btn.addEventListener("click", function () {
+    // get random number between 0 - 3
+  const randomNumber = getRandomNumber();
+  // console.log(randomNumber);
+
+  document.body.style.backgroundColor = colors[randomNumber];
+  color.textContent = colors[randomNumber];
+});
+
+function getRandomNumber() {
+  return Math.floor(Math.random() * colors.length);
+}
diff --git a/01-color-flipper/setup/index.html b/01-color-flipper/setup/index.html
index 2aff83646..a7727edc3 100644
--- a/01-color-flipper/setup/index.html
+++ b/01-color-flipper/setup/index.html
@@ -9,8 +9,22 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>color flipper</h1>
+    <nav>
+      <div class="nav-center">
+        <h4>color flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">simple</a></li>
+          <li><a href="hex.html">hex</a></li>
+        </ul>
+      </div>
+    </nav>
+    <main>
+      <div class="container">
+        <h2>background color : <span class="color">#f1f5f8</span></h2>
+        <button class="btn btn-hero" id="btn">click me</button>
+      </div>
+    </main>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
