diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue
index fbab51c06..72fffba4f 100644
--- a/components/ui/Avatar.vue
+++ b/components/ui/Avatar.vue
@@ -34,55 +34,49 @@
   </svg>
 </template>
 
-<script>
-export default {
-  props: {
-    src: {
-      type: String,
-      default: null,
-    },
-    alt: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: 'sm',
-      validator(value) {
-        return ['xxs', 'xs', 'sm', 'md', 'lg'].includes(value)
-      },
-    },
-    circle: {
-      type: Boolean,
-      default: false,
-    },
-    noShadow: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: String,
-      default: 'eager',
-    },
-    raised: {
-      type: Boolean,
-      default: false,
+<script setup>
+const pixelated = ref(false)
+
+defineProps({
+  src: {
+    type: String,
+    default: null,
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'sm',
+    validator(value) {
+      return ['xxs', 'xs', 'sm', 'md', 'lg'].includes(value)
     },
   },
-  data() {
-    return {
-      pixelated: false,
-    }
+  circle: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    updatePixelated() {
-      if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) {
-        this.pixelated = true
-      } else {
-        this.pixelated = false
-      }
-    },
+  noShadow: {
+    type: Boolean,
+    default: false,
   },
+  loading: {
+    type: String,
+    default: 'eager',
+  },
+  raised: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+function updatePixelated() {
+  if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) {
+    this.pixelated = true
+  } else {
+    this.pixelated = false
+  }
 }
 </script>
 
diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue
index e7f227d69..81c4fe219 100644
--- a/components/ui/Badge.vue
+++ b/components/ui/Badge.vue
@@ -34,7 +34,7 @@
   </span>
 </template>
 
-<script>
+<script setup>
 import ModrinthIcon from '~/assets/images/logo.svg'
 import ModeratorIcon from '~/assets/images/sidebar/admin.svg'
 import CreatorIcon from '~/assets/images/utils/box.svg'
@@ -49,33 +49,16 @@ import LockIcon from '~/assets/images/utils/lock.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import CloseIcon from '~/assets/images/utils/check-circle.svg'
 
-export default {
-  components: {
-    ModrinthIcon,
-    ListIcon,
-    DraftIcon,
-    EyeOffIcon,
-    ModeratorIcon,
-    CreatorIcon,
-    CrossIcon,
-    ArchiveIcon,
-    ProcessingIcon,
-    CheckIcon,
-    LockIcon,
-    CalendarIcon,
-    CloseIcon,
+defineProps({
+  type: {
+    type: String,
+    required: true,
   },
-  props: {
-    type: {
-      type: String,
-      required: true,
-    },
-    color: {
-      type: String,
-      default: '',
-    },
+  color: {
+    type: String,
+    default: '',
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>