diff --git a/assets/profile.css b/assets/profile.css
index 2dd3e6c..c02cc75 100644
--- a/assets/profile.css
+++ b/assets/profile.css
@@ -1,8 +1,8 @@
 .language {
   float: left;
-  width: 6rem;
-  height: 6rem;
-  padding-top: 2rem;
+  width: 5rem;
+  height: 5rem;
+  padding-top: 1.5rem;
   text-align: center;        
   margin: 0.1rem;
   border-radius: 50%;              
@@ -13,6 +13,11 @@
   border: solid 2px; 
 }
 
+.language span{
+  display: block;
+}
+
+
 .language span {
   font-weight: bold;
   font-size: 1.1em;
@@ -41,4 +46,55 @@ h3 {
 
 img {
   float: left;  
-}
\ No newline at end of file
+}
+
+.machines {
+  clear: both;
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+.machine {
+  float: none;
+}
+
+.progress {
+  height: 20px;
+  margin-bottom: 20px;
+  /* background-color: #f5f5f5; */
+  border-radius: 4px;
+  border: solid 1px; 
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+}
+
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  /* color: #fff; */
+  text-align: center;
+  background-color: #337ab7;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+  -webkit-transition: width .6s ease;
+  -o-transition: width .6s ease;
+  transition: width .6s ease;
+}
+
+.progress-bar-success {
+  background-color: #ddca7e;;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
diff --git a/assets/profile.html b/assets/profile.html
index d67b30b..8ae0d2f 100644
--- a/assets/profile.html
+++ b/assets/profile.html
@@ -1,6 +1,40 @@
-<link rel="stylesheet" href="file:///${style}">
-<h3> ${user}'s Profile Level ${level} (${xp} XP)
-    <% if( newxp > 0 ) { %>
-     <sup>(<%= newxp %>)</sup>
+<link rel="stylesheet" href="file:///${profile.style}">
+<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
+  <% if( profile.new_xp > 0 ) { %>
+    <sup>(
+      <%= profile.new_xp %>)</sup>
     <% } %>
-  </h3>
+</h3>
+<div style="display: block;">
+  <% for( let l in languages) { %>
+    <div class="language">
+      <%= languages[l].name %>
+        <span>
+          <%= languages[l].xp %>
+        </span>
+    </div>
+    <% } %>
+</div>
+<p/>
+<div class="machines">
+  <% for( let m in machines) { %>
+    <div class="machine">
+      <strong>
+        <%= machines[m].name %>
+      </strong>
+      <span>
+        <%= machines[m].xp %>
+      </span>
+
+      <div class="progress">
+        <div class="progress-bar progress-bar-success" style="width:50%">
+          <span class="sr-only">Level progress ${machines[m].progress}%.</span>
+        </div>
+        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 7%;">
+          <span class="sr-only">Recent level progress 7%.</span>
+        </div>
+      </div>
+
+    </div>
+    <% } %>
+</div>
\ No newline at end of file
diff --git a/src/profileHtmlProvider.ts b/src/profileHtmlProvider.ts
index 94faccd..dba7151 100644
--- a/src/profileHtmlProvider.ts
+++ b/src/profileHtmlProvider.ts
@@ -47,45 +47,42 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
       return Math.round(haveXp * 100.0 / needXp);
     }
 
-    function getLanguages(languages: any): string {
+    function getSortedArray(profile: any, obj: string): any[] {
 
-      let ret = '';
-      for (let lang in languages) {
-        ret += `<div class="language">${lang}<span style="display:block;">${languages[lang]["xps"]}</span></div>`;
+      let langs = [];
+      let languages_object = profile[obj] 
+      for( let lang in languages_object) {
+        langs.push(
+          {
+            name: lang,
+            xp: languages_object[lang].xps,
+            new_xp: languages_object[lang].new_xps,
+            progress: getLevelProgress(languages_object[lang].xps)
+          }
+        );
       }
-
-      return ret;
+      langs = langs.sort( (a,b) => {return b.xp - a.xp;});
+      
+      return langs;
     }
 
-    function getHeader(context: ExtensionContext, profile: any): string {
-
-      let userName = profile["user"];
-      let totalXp = profile["total_xp"];
-      let newXp = profile["new_xp"];
-      let currentLevel = getLevel(totalXp);
-
-      return `<h3> ${userName}'s Profile Level ${currentLevel} (${totalXp} XP) ${newXp > 0 ? '<sup>(+' + newXp + ')</sup>' : ''}</h3>`;
-    }
-
-
     return this.api.getProfile().then(profile => {
 
-      // let htmlTemplate = fs.readFileSync(this.context.asAbsolutePath("assets/profile.html"));
+      let htmlTemplate = fs.readFileSync(this.context.asAbsolutePath("assets/profile.html"));
+
+      profile["style"] = this.context.asAbsolutePath("assets/profile.css");
+      profile["level"] = getLevel(profile["total_xp"]);
+
+
+      let langs = getSortedArray(profile, "languages");
+      
+      let machines = getSortedArray(profile, "machines");
 
-      // let html = template(htmlTemplate);
-      // let result = html({ style: this.context.asAbsolutePath("assets/style.css"), user: 'Architect' });
-      // let userName = profile["user"];
-      // let totalXp = profile["total_xp"];
-      // let newXp = profile["new_xp"];
-      // let currentLevel = getLevel(totalXp);      
 
       
-      return `
-      <link rel="stylesheet" href="file:///${this.context.asAbsolutePath("assets/style.css")}">
-      <img width="64px" height="64px" src="file:///${this.context.asAbsolutePath("assets/r2.svg")}">
-      ${getHeader(this.context, profile)}
-      ${getLanguages(profile["languages"])}      
-      `;
+      let html = template(htmlTemplate);
+          
+      return html({profile: profile, languages: langs, machines: machines});
 
     });
   }