diff --git a/index.js b/index.js
index a1ef5070a7ce5160aa182b75c64d77bf99312ecc..2da89b2dbc1d62110d01a700885abe63414fd2f9 100644
--- a/index.js
+++ b/index.js
@@ -4,7 +4,25 @@ import data from "./helper/data.js";
 const button = document.getElementsByClassName("main-button")[0];
 
 button.addEventListener("click", () => {
-  console.log(data);
+
+  const existingDiv = document.getElementsByClassName("user-data")[0];
+
+  if (existingDiv) {
+    existingDiv.remove();
+  }
+
+  else {
+    const userDate = document.createElement("div");
+    userDate.className = "user-data";
+
+    userDate.innerHTML = `
+  <h1>${data[0].name}</h1>
+  <p>${data[0].username}</p>
+  <p>${data[0].email}</p>
+`;
+
+    document.body.appendChild(userDate);
+  }
 });
 
 
diff --git a/style.css b/style.css
index 36418791f6be10b741ae095549394223413df577..c64aac48ee060d392f357e3dd7d672ed3b48b607 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,17 @@ body {
   margin: 0;
   background: deepskyblue;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
+
+.user-data {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  justify-content: center;
+  margin-top: 20px;
+  color: navy;
+}
\ No newline at end of file