diff --git a/website/client/src/assets/css/sprites/spritesmith-main.css b/website/client/src/assets/css/sprites/spritesmith-main.css
index 4edc504143..9fe581b598 100644
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
@@ -153,6 +153,11 @@
   width: 60px;
   height: 64px;
 }
+.achievement-duneBuddy2x {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-duneBuddy2x.png');
+  width: 68px;
+  height: 68px;
+}
 .achievement-dustDevil2x {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-dustDevil2x.png');
   width: 48px;
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 0aa6493f54..726f927ef1 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -454,7 +454,7 @@
               >
                 <div
                   :id="achievKey + '-achievement'"
-                  class="box achievement-container"
+                  class="box achievement-container d-flex justify-content-center align-items-middle"
                   :class="{'achievement-unearned': !achievement.earned}"
                 >
                   <b-popover
@@ -472,7 +472,7 @@
                   </b-popover>
                   <div
                     v-if="achievement.earned"
-                    class="achievement"
+                    class="achievement m-auto"
                     :class="achievement.icon + '2x'"
                   >
                     <div
@@ -484,7 +484,7 @@
                   </div>
                   <div
                     v-if="!achievement.earned"
-                    class="achievement achievement-unearned achievement-unearned2x"
+                    class="achievement achievement-unearned achievement-unearned2x m-auto"
                   ></div>
                 </div>
               </div>
@@ -922,7 +922,6 @@
       background: $white;
       margin: 0 auto;
       margin-bottom: 16px;
-      padding-top: 20px;
     }
 
     hr {
diff --git a/website/client/src/components/userMenu/profileAchievs.vue b/website/client/src/components/userMenu/profileAchievs.vue
index 06283bee38..999e785654 100644
--- a/website/client/src/components/userMenu/profileAchievs.vue
+++ b/website/client/src/components/userMenu/profileAchievs.vue
@@ -20,7 +20,7 @@
           >
             <div
               :id="achievKey + '-achievement'"
-              class="box achievement-container"
+              class="box achievement-container d-flex justify-content-center align-items-middle"
               :class="{'achievement-unearned': !achievement.earned}"
             >
               <b-popover
@@ -38,7 +38,7 @@
               </b-popover>
               <div
                 v-if="achievement.earned"
-                class="achievement"
+                class="achievement m-auto"
                 :class="achievement.icon + '2x'"
               >
                 <div
@@ -142,7 +142,6 @@
       background: $white;
       margin: 0 auto;
       margin-bottom: 16px;
-      padding-top: 20px;
     }
 
     hr {