diff --git a/public/img/sprites/achievements.png b/public/img/sprites/achievements.png
new file mode 100644
index 0000000000..e703785cde
Binary files /dev/null and b/public/img/sprites/achievements.png differ
diff --git a/styles/app/achievements.styl b/styles/app/achievements.styl
new file mode 100644
index 0000000000..31c9d40b2a
--- /dev/null
+++ b/styles/app/achievements.styl
@@ -0,0 +1,25 @@
+.achievement
+    background: url('/img/sprites/achievements.png') no-repeat
+    width: 24px
+    height: 26px
+
+.achievement-sword {background-position:0px 0px}
+.achievement-tree {background-position:-24px 0px}
+.achievement-rat {background-position:-48px 0px}
+.achievement-comment {background-position:-72px 0px}
+.achievement-armor {background-position:-96px 0px}
+.achievement-cave {background-position:-120px 0px}
+.achievement-sun {background-position:-144px 0px}
+.achievement-boot {background-position:-168px 0px}
+.achievement-coffin {background-position:-192px 0px}
+.achievement-alien {background-position:-216px 0px}
+.achievement-ninja {background-position:-240px 0px}
+.achievement-cactus {background-position:-264px 0px}
+.achievement-bow {background-position:-288px 0px}
+.achievement-heart {background-position:-312px 0px}
+.achievement-shield {background-position:-336px 0px}
+.achievement-thermometer {background-position:-360px 0px}
+.achievement-helm {background-position:-384px 0px}
+.achievement-firefox {background-position:0px -26px}
+.achievement-cake {background-position:-24px -26px}
+.achievement-karaoke {background-position:-48px -26px}
diff --git a/styles/app/index.styl b/styles/app/index.styl
index 04242ccb68..6f9ca51558 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -21,7 +21,7 @@
 @import "./responsive.styl";
 @import "./header.styl";
 @import "./scrollbars.styl";
-
+@import "./achievements.styl";
 @import "./game-pane.styl";
 
 // fix exploding to very wide for some reason
diff --git a/views/app/avatar.html b/views/app/avatar.html
index 3a48297cae..06967dfc04 100644
--- a/views/app/avatar.html
+++ b/views/app/avatar.html
@@ -164,9 +164,27 @@
     </div>
 
 <achievements:>
+    <!--<div class='achievement achievement-sword'></div>-->
+    <!--<div class='achievement achievement-tree'></div>-->
+    <!--<div class='achievement achievement-rat'></div>-->
+    <!--<div class='achievement achievement-comment'></div>-->
+    <!--<div class='achievement achievement-armor'></div>-->
+    <!--<div class='achievement achievement-cave'></div>-->
+    <!--<div class='achievement achievement-sun'></div>-->
+    <!--<div class='achievement achievement-boot'></div>-->
+    <!--<div class='achievement achievement-coffin'></div>-->
+    <!--<div class='achievement achievement-alien'></div>-->
+    <!--<div class='achievement achievement-ninja'></div>-->
+    <!--<div class='achievement achievement-cactus'></div>-->
+    <!--<div class='achievement achievement-bow'></div>-->
+    <!--<div class='achievement achievement-heart'></div>-->
+    <!--<div class='achievement achievement-shield'></div>-->
+    <!--<div class='achievement achievement-thermometer'></div>-->
+    <!--<div class='achievement achievement-helm'></div>-->
+    <!--<div class='achievement achievement-firefox'></div>-->
+    <!--<div class='achievement achievement-karaoke'></div>-->
     {#if @profile.achievements.originalUser}
-        <!--TODO replce this in the future with HTML from BrowserQuest's index.html, which properly handles the achievements sprite-sheets (see BQ's achievements.css, main.css) -->
-        <img src='/img/original_user.png' /> Original User!
+        <div class='achievement achievement-cake'></div>  Original User!
     {/}
 
 <inventory:>