diff --git a/README.md b/README.md
index e77b98d..68d5414 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,8 @@ Let's play with grabbing some data from an API and displaying it on a website. W
 4. Change the `username` variable in the `codewars-badge.js` file to your own Codewars username. Save the file and refresh the page to see your own badge.
 
 5. [Look at this API directly](https://www.codewars.com/api/v1/users/CodeYourFuture) in your browser. It's just a URL - you can look at it. (Install a [JSON viewer extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) for your browser if you don't have one already. This will make it easier to read the data.)
-
-6. Now try adding some more data to the badge component. There's lots of other possible data we could display in the badge. Read the [Codewars API docs](https://dev.codewars.com/#get-user) to help you.
+ Now try adding some more data to the badge component. There's lots of other possible data we could display in the badge. Read the [Codewars API docs](https://dev.codewars.com/#get-user) to help you.
+6.
 
 7. Now try creating a _new_ web component that displays some data from a Codewars API. There are several documented Codewars APIs you can play with. Use the `codewars-badge.js` file as a template for how to define a web component. You can use the `index.html` file to test your new component.
 
diff --git a/codewars-badge.js b/codewars-badge.js
index 7c26060..36b842e 100644
--- a/codewars-badge.js
+++ b/codewars-badge.js
@@ -6,8 +6,8 @@ class CodeWarsBadge extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
-    this.userName = "CodeYourFuture";
-    this.userData = [];
+    this.userName = "zelihapala";
+    this.userData = {};
   }
 
   connectedCallback() {
@@ -22,29 +22,36 @@ class CodeWarsBadge extends HTMLElement {
 
   // fetch the data from the Codewars API
   async fetchActivity() {
-    const response = await fetch(
-      `https://www.codewars.com/api/v1/users/${this.userName}`
-    );
+    const response = await fetch(`https://www.codewars.com/api/v1/users/${this.userName}`);
     const data = await response.json();
     this.userData = data; // set the userData property with the fetched data
   }
 
   render() {
     this.shadowRoot.innerHTML = `
-    <style>
+      <style>
         :host {
-           --rank: ${this.userData.ranks.overall.color};
-           font: 600 100%/1 system-ui, sans-serif;
+          --rank: ${this.userData.ranks.overall.color};
+          font: 600 100%/1 system-ui, sans-serif;
         }
         data { 
-            color: var(--rank);
-            border: 3px solid; 
-            padding: .25em .5em;
+          color: var(--rank);
+          border: 3px solid; 
+          padding: .25em .5em;
         }      
       </style>
+      <div>
+        <p>Username: ${this.userData.username}</p>
+        <p>Name: ${this.userData.name}</p>
+        <p>Honor: ${this.userData.honor}</p>
+        <p>Clan: ${this.userData.clan}</p>
+        <p>Leaderboard Position: ${this.userData.leaderboardPosition}</p>
+        <p>Total Authored Challenges: ${this.userData.codeChallenges.totalAuthored}</p>
+        <p>Total Completed Challenges: ${this.userData.codeChallenges.totalCompleted}</p>
         <data value="${this.userData.ranks.overall.score}">
-        ${this.userData.ranks.overall.name}
-        </data>`;
+          ${this.userData.ranks.overall.name}
+        </data>
+      </div>`;
   }
 }