diff --git a/resources/assets/src/components/mixins/setAsAvatar.js b/resources/assets/src/components/mixins/setAsAvatar.js
new file mode 100644
index 00000000..1b13ae05
--- /dev/null
+++ b/resources/assets/src/components/mixins/setAsAvatar.js
@@ -0,0 +1,33 @@
+import toastr from 'toastr'
+import { swal } from '../../js/notify'
+
+export default {
+  methods: {
+    async setAsAvatar() {
+      const { dismiss } = await swal({
+        title: this.$t('user.setAvatar'),
+        text: this.$t('user.setAvatarNotice'),
+        type: 'question',
+        showCancelButton: true,
+      })
+      if (dismiss) {
+        return
+      }
+
+      const { errno, msg } = await this.$http.post(
+        '/user/profile/avatar',
+        { tid: this.tid }
+      )
+      if (errno === 0) {
+        toastr.success(msg)
+
+        $('[alt="User Image"]').each(function it() {
+          // eslint-disable-next-line no-invalid-this
+          $(this).prop('src', `${$(this).attr('src')}?${new Date().getTime()}`)
+        })
+      } else {
+        toastr.warning(msg)
+      }
+    },
+  },
+}
diff --git a/resources/assets/src/components/skinlib/Show.vue b/resources/assets/src/components/skinlib/Show.vue
index c73a2d0c..f6ce5a42 100644
--- a/resources/assets/src/components/skinlib/Show.vue
+++ b/resources/assets/src/components/skinlib/Show.vue
@@ -19,23 +19,26 @@
               v-if="liked"
               v-t="'skinlib.apply'"
               :href="`${baseUrl}/user/closet?tid=${tid}`"
-              class="btn btn-success pull-right"
-              style="margin-left: 12px"
+              class="btn btn-success pull-right pulled-right-btn"
             />
             <a
               v-if="liked"
               v-t="'skinlib.removeFromCloset'"
-              style="margin-left: 12px"
-              class="btn btn-primary pull-right"
+              class="btn btn-primary pull-right pulled-right-btn"
               @click="removeFromCloset"
             />
             <a
               v-else
               v-t="'skinlib.addToCloset'"
-              style="margin-left: 12px"
-              class="btn btn-primary pull-right"
+              class="btn btn-primary pull-right pulled-right-btn"
               @click="addToCloset"
             />
+            <button
+              v-if="type !== 'cape'"
+              v-t="'user.setAsAvatar'"
+              class="btn btn-default pull-right pulled-right-btn"
+              @click="setAsAvatar"
+            />
             <a
               v-if="canBeDownloaded"
               v-t="'skinlib.show.download'"
@@ -138,12 +141,14 @@
 <script>
 import toastr from 'toastr'
 import { swal } from '../../js/notify'
+import setAsAvatar from '../mixins/setAsAvatar'
 
 export default {
   name: 'Show',
   components: {
     Previewer: () => import('../common/Previewer'),
   },
+  mixins: [setAsAvatar],
   props: {
     baseUrl: {
       type: String,
@@ -346,4 +351,8 @@ export default {
 .table > tbody > tr > td {
     border-top: 0;
 }
+
+.pulled-right-btn {
+    margin-left: 12px;
+}
 </style>
diff --git a/resources/assets/src/components/user/ClosetItem.vue b/resources/assets/src/components/user/ClosetItem.vue
index acb9c4ce..1c863c0c 100644
--- a/resources/assets/src/components/user/ClosetItem.vue
+++ b/resources/assets/src/components/user/ClosetItem.vue
@@ -35,9 +35,11 @@
 <script>
 import toastr from 'toastr'
 import { swal } from '../../js/notify'
+import setAsAvatar from '../mixins/setAsAvatar'
 
 export default {
   name: 'ClosetItem',
+  mixins: [setAsAvatar],
   props: {
     tid: {
       type: Number,
@@ -111,33 +113,6 @@ export default {
         toastr.warning(msg)
       }
     },
-    async setAsAvatar() {
-      const { dismiss } = await swal({
-        title: this.$t('user.setAvatar'),
-        text: this.$t('user.setAvatarNotice'),
-        type: 'question',
-        showCancelButton: true,
-      })
-      if (dismiss) {
-        return
-      }
-
-      const { errno, msg } = await this.$http.post(
-        '/user/profile/avatar',
-        { tid: this.tid }
-      )
-      if (errno === 0) {
-        toastr.success(msg)
-
-        // Refresh avatars
-        $('[alt="User Image"]').each(function it() {
-          // eslint-disable-next-line no-invalid-this
-          $(this).prop('src', `${$(this).attr('src')}?${new Date().getTime()}`)
-        })
-      } else {
-        toastr.warning(msg)
-      }
-    },
   },
 }
 </script>
diff --git a/resources/assets/tests/components/skinlib/Show.test.js b/resources/assets/tests/components/skinlib/Show.test.js
index b699e099..087dd5a7 100644
--- a/resources/assets/tests/components/skinlib/Show.test.js
+++ b/resources/assets/tests/components/skinlib/Show.test.js
@@ -130,6 +130,27 @@ test('link to downloading texture', async () => {
   expect(wrapper.contains('a[title="123"]')).toBeFalse()
   expect(wrapper.contains('span[title="123"]')).toBeTrue()
 })
+test('set as avatar', () => {
+  Object.assign(window.blessing.extra, { currentUid: 1, inCloset: true })
+  Vue.prototype.$http.get.mockResolvedValueOnce({ type: 'steve' })
+    .mockResolvedValueOnce({ type: 'cape' })
+  const wrapper = mount(Show, {
+    mocks: {
+      $route: ['/skinlib/show/1', '1'],
+    },
+    stubs: { previewer },
+  })
+  wrapper.find('button.btn-default').trigger('click')
+  expect(swal).toBeCalled()
+
+  const noSetAsAvatar = mount(Show, {
+    mocks: {
+      $route: ['/skinlib/show/1', '1'],
+    },
+    stubs: { previewer },
+  })
+  expect(noSetAsAvatar.find('button.btn-default').isEmpty()).toBeTrue()
+})
 test('add to closet', async () => {
   Object.assign(window.blessing.extra, { currentUid: 1, inCloset: false })
   Vue.prototype.$http.get.mockResolvedValue({ name: 'wow', likes: 2 })