diff --git a/apps/frontend/src/components/brand/LogoAnimated.vue b/apps/frontend/src/components/brand/LogoAnimated.vue
deleted file mode 100644
index a49454f2c..000000000
--- a/apps/frontend/src/components/brand/LogoAnimated.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <svg
-      class="rotate outer"
-      width="100%"
-      height="100%"
-      viewBox="0 0 590 591"
-      xmlns="http://www.w3.org/2000/svg"
-      xml:space="preserve"
-      style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
-    >
-      <g transform="matrix(1,0,0,1,652.392,-0.400578)">
-        <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
-          <g transform="matrix(0.24,0,0,0.24,0,0)">
-            <path
-              d="M134.44,316.535C145.027,441.531 249.98,539.829 377.711,539.829C474.219,539.829 557.724,483.712 597.342,402.371L645.949,419.197C599.165,520.543 496.595,590.954 377.711,590.954C221.751,590.954 93.869,469.779 83.161,316.535L134.44,316.535ZM83.946,265.645C99.012,116.762 224.88,0.401 377.711,0.401C540.678,0.401 672.987,132.71 672.987,295.677C672.987,321.817 669.583,347.168 663.194,371.313L614.709,354.529C619.381,335.689 621.862,315.971 621.862,295.677C621.862,160.926 512.461,51.526 377.711,51.526C253.133,51.526 150.223,145.03 135.392,265.645L83.946,265.645Z"
-              style="fill: var(--color-brand)"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-    <svg
-      class="rotate inner"
-      width="100%"
-      height="100%"
-      viewBox="0 0 590 591"
-      xmlns="http://www.w3.org/2000/svg"
-      xml:space="preserve"
-      style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
-    >
-      <g transform="matrix(1,0,0,1,652.392,-0.400578)">
-        <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
-          <g transform="matrix(0.24,0,0,0.24,0,0)">
-            <path
-              d="M376.933,153.568C298.44,153.644 234.735,217.396 234.735,295.909C234.735,374.47 298.516,438.251 377.077,438.251C381.06,438.251 385.005,438.087 388.914,437.764L403.128,487.517C394.611,488.667 385.912,489.261 377.077,489.261C270.363,489.261 183.725,402.623 183.725,295.909C183.725,189.195 270.363,102.557 377.077,102.557C379.723,102.557 382.357,102.611 384.983,102.717L376.933,153.568ZM435.127,111.438C513.515,136.114 570.428,209.418 570.428,295.909C570.428,375.976 521.655,444.742 452.22,474.093L438.063,424.541C486.142,401.687 519.418,352.653 519.418,295.909C519.418,234.923 480.981,182.843 427.029,162.593L435.127,111.438Z"
-              style="fill: var(--color-brand)"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-    <svg
-      width="100%"
-      height="100%"
-      viewBox="0 0 590 591"
-      xmlns="http://www.w3.org/2000/svg"
-      xml:space="preserve"
-      style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
-    >
-      <g transform="matrix(1,0,0,1,652.392,-0.400578)">
-        <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
-          <g transform="matrix(0.24,0,0,0.24,0,0)">
-            <path
-              d="M300.366,311.86L283.216,266.381L336.966,211.169L404.9,196.531L424.57,220.74L393.254,252.46L365.941,261.052L346.425,281.11L355.987,307.719L375.387,328.306L402.745,321.031L422.216,299.648L464.729,286.185L477.395,314.677L433.529,368.46L360.02,391.735L327.058,355.031L138.217,468.344C129.245,456.811 118.829,440.485 112.15,424.792L300.366,311.86Z"
-              style="fill: var(--color-brand)"
-            />
-          </g>
-        </g>
-        <g transform="matrix(4.16667,0,0,4.16667,-735.553,0)">
-          <g transform="matrix(0.24,0,0,0.24,0,0)">
-            <path
-              d="M655.189,194.555L505.695,234.873C513.927,256.795 516.638,269.674 518.915,283.863L668.152,243.609C665.764,227.675 661.5,211.444 655.189,194.555Z"
-              style="fill: var(--color-brand)"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 5rem;
-  margin-top: 1rem;
-
-  svg {
-    width: 5rem;
-    height: 5rem;
-    position: absolute;
-    &.rotate {
-      animation: rotate 4s infinite linear;
-      &.inner {
-        animation: rotate 6s infinite linear reverse;
-      }
-    }
-    @keyframes rotate {
-      0% {
-        transform: rotate(0);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/Avatar.vue b/apps/frontend/src/components/ui/Avatar.vue
deleted file mode 100644
index 6216aa5d8..000000000
--- a/apps/frontend/src/components/ui/Avatar.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <OmorphiaAvatar
-    :src="src"
-    :alt="alt"
-    :size="size"
-    :circle="circle"
-    :no-shadow="noShadow"
-    :loading="loading"
-    :raised="raised"
-  />
-</template>
-
-<script setup>
-import { Avatar as OmorphiaAvatar } from "@modrinth/ui";
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: null,
-  },
-  alt: {
-    type: String,
-    default: "",
-  },
-  size: {
-    type: String,
-    default: "2rem",
-  },
-  circle: {
-    type: Boolean,
-    default: false,
-  },
-  noShadow: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: String,
-    default: "eager",
-  },
-  raised: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
diff --git a/apps/frontend/src/components/ui/Badge.vue b/apps/frontend/src/components/ui/Badge.vue
deleted file mode 100644
index 376d3f9d6..000000000
--- a/apps/frontend/src/components/ui/Badge.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <span
-    :class="
-      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
-    "
-  >
-    <template v-if="color"> <span class="circle" /> {{ $capitalizeString(type) }}</template>
-
-    <!-- User roles -->
-    <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
-    <template v-else-if="type === 'moderator'"> <ModeratorIcon /> Moderator</template>
-    <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
-    <template v-else-if="type === 'plus'"><PlusIcon /> Modrinth Plus</template>
-
-    <!-- Project statuses -->
-    <template v-else-if="type === 'approved'"><GlobeIcon /> Public</template>
-    <template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
-    <template v-else-if="type === 'unlisted' || type === 'withheld'"
-      ><LinkIcon /> Unlisted</template
-    >
-    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
-    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
-    <template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
-    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
-    <template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
-    <template v-else-if="type === 'processing'"> <ProcessingIcon /> Under review</template>
-
-    <!-- Team members -->
-    <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
-    <template v-else-if="type === 'pending'"> <ProcessingIcon /> Pending </template>
-
-    <!-- Transaction statuses -->
-    <template v-else-if="type === 'success'"><CheckIcon /> Success</template>
-
-    <!-- Report status -->
-    <template v-else-if="type === 'closed'"> <CloseIcon /> Closed</template>
-
-    <!-- Other -->
-    <template v-else> <span class="circle" /> {{ $capitalizeString(type) }} </template>
-  </span>
-</template>
-
-<script setup>
-import { GlobeIcon, LinkIcon } from "@modrinth/assets";
-
-import ModrinthIcon from "~/assets/images/logo.svg?component";
-import PlusIcon from "~/assets/images/utils/plus.svg?component";
-import ModeratorIcon from "~/assets/images/sidebar/admin.svg?component";
-import CreatorIcon from "~/assets/images/utils/box.svg?component";
-import DraftIcon from "~/assets/images/utils/file-text.svg?component";
-import CrossIcon from "~/assets/images/utils/x.svg?component";
-import ArchiveIcon from "~/assets/images/utils/archive.svg?component";
-import ProcessingIcon from "~/assets/images/utils/updated.svg?component";
-import CheckIcon from "~/assets/images/utils/check.svg?component";
-import LockIcon from "~/assets/images/utils/lock.svg?component";
-import CalendarIcon from "~/assets/images/utils/calendar.svg?component";
-import CloseIcon from "~/assets/images/utils/check-circle.svg?component";
-
-defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: "",
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.badge {
-  .circle {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 0.25rem;
-    background-color: var(--badge-color);
-  }
-
-  svg {
-    vertical-align: -15%;
-    width: 1em;
-    height: 1em;
-  }
-
-  &.type--closed,
-  &.type--withheld,
-  &.type--rejected,
-  &.red {
-    --badge-color: var(--color-red);
-  }
-
-  &.type--pending,
-  &.type--moderator,
-  &.type--processing,
-  &.type--scheduled,
-  &.orange {
-    --badge-color: var(--color-orange);
-  }
-
-  &.type--accepted,
-  &.type--admin,
-  &.type--success,
-  &.type--approved-general,
-  &.green {
-    --badge-color: var(--color-green);
-  }
-
-  &.type--creator,
-  &.blue {
-    --badge-color: var(--color-blue);
-  }
-
-  &.type--unlisted,
-  &.type--plus,
-  &.purple {
-    --badge-color: var(--color-purple);
-  }
-
-  &.type--private,
-  &.type--approved,
-  &.gray {
-    --badge-color: var(--color-secondary);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/Checkbox.vue b/apps/frontend/src/components/ui/Checkbox.vue
deleted file mode 100644
index fc9390f9f..000000000
--- a/apps/frontend/src/components/ui/Checkbox.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <div
-    class="checkbox-outer button-within"
-    :class="{ disabled, checked: modelValue }"
-    role="presentation"
-    @click="toggle"
-  >
-    <button
-      class="checkbox"
-      role="checkbox"
-      :disabled="disabled"
-      :class="{ checked: modelValue, collapsing: collapsingToggleStyle }"
-      :aria-label="description ?? label"
-      :aria-checked="modelValue"
-    >
-      <CheckIcon v-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
-      <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
-    </button>
-    <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
-    <p v-if="label" aria-hidden="true">
-      {{ label }}
-    </p>
-    <slot v-else />
-  </div>
-</template>
-
-<script>
-import CheckIcon from "~/assets/images/utils/check.svg?component";
-import DropdownIcon from "~/assets/images/utils/dropdown.svg?component";
-
-export default {
-  components: {
-    CheckIcon,
-    DropdownIcon,
-  },
-  props: {
-    label: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    description: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    modelValue: Boolean,
-    clickEvent: {
-      type: Function,
-      required: false,
-      default: () => {},
-    },
-    collapsingToggleStyle: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  emits: ["update:modelValue"],
-  methods: {
-    toggle() {
-      if (!this.disabled) {
-        this.$emit("update:modelValue", !this.modelValue);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.checkbox-outer {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  p {
-    user-select: none;
-    padding: 0.2rem 0;
-    margin: 0;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.checked {
-    outline: 2px solid transparent;
-    outline-offset: 4px;
-    border-radius: 0.25rem;
-  }
-}
-
-.checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  min-width: 1rem;
-  min-height: 1rem;
-
-  padding: 0;
-  margin: 0 0.5rem 0 0;
-
-  color: var(--color-button-text);
-  background-color: var(--color-button-bg);
-  border-radius: var(--size-rounded-control);
-  box-shadow:
-    var(--shadow-inset-sm),
-    0 0 0 0 transparent;
-
-  &.checked {
-    background-color: var(--color-brand);
-  }
-
-  svg {
-    color: var(--color-brand-inverted);
-    stroke-width: 0.2rem;
-    height: 0.8rem;
-    width: 0.8rem;
-    flex-shrink: 0;
-  }
-
-  &.collapsing {
-    background-color: transparent !important;
-    box-shadow: none;
-
-    svg {
-      color: inherit;
-      height: 1rem;
-      width: 1rem;
-      transition: transform 0.25s ease-in-out;
-    }
-
-    &.checked {
-      svg {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  &:disabled {
-    box-shadow: none;
-    cursor: not-allowed;
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/Chips.vue b/apps/frontend/src/components/ui/Chips.vue
deleted file mode 100644
index 7d5f1da11..000000000
--- a/apps/frontend/src/components/ui/Chips.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="chips">
-    <button
-      v-for="item in items"
-      :key="item"
-      class="iconified-button"
-      :class="{ selected: selected === item, capitalize: capitalize }"
-      @click="toggleItem(item)"
-    >
-      <CheckIcon v-if="selected === item" />
-      <span>{{ formatLabel(item) }}</span>
-    </button>
-  </div>
-</template>
-
-<script>
-import CheckIcon from "~/assets/images/utils/check.svg?component";
-
-export default {
-  components: {
-    CheckIcon,
-  },
-  props: {
-    modelValue: {
-      required: true,
-      type: String,
-    },
-    items: {
-      required: true,
-      type: Array,
-    },
-    neverEmpty: {
-      default: true,
-      type: Boolean,
-    },
-    formatLabel: {
-      default: (x) => x,
-      type: Function,
-    },
-    capitalize: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    selected: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-  },
-  created() {
-    if (this.items.length > 0 && this.neverEmpty) {
-      this.selected = this.items[0];
-    }
-  },
-  methods: {
-    toggleItem(item) {
-      if (this.selected === item && !this.neverEmpty) {
-        this.selected = null;
-      } else {
-        this.selected = item;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.chips {
-  display: flex;
-  grid-gap: 0.5rem;
-  flex-wrap: wrap;
-
-  .iconified-button {
-    &.capitalize {
-      text-transform: capitalize;
-    }
-
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-
-    &:focus-visible {
-      outline: 0.25rem solid #ea80ff;
-      border-radius: 0.25rem;
-    }
-  }
-
-  .selected {
-    color: var(--color-button-text-active);
-    background-color: var(--color-brand-highlight);
-    box-shadow:
-      inset 0 0 0 transparent,
-      0 0 0 2px var(--color-brand);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/ConditionalNuxtLink.vue b/apps/frontend/src/components/ui/ConditionalNuxtLink.vue
deleted file mode 100644
index 8a9ac6b52..000000000
--- a/apps/frontend/src/components/ui/ConditionalNuxtLink.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <nuxt-link v-if="isLink" :to="to">
-    <slot />
-  </nuxt-link>
-  <span v-else>
-    <slot />
-  </span>
-</template>
-
-<script setup>
-defineProps({
-  to: {
-    type: String,
-    required: true,
-  },
-  isLink: {
-    type: Boolean,
-    required: true,
-  },
-});
-</script>
diff --git a/apps/frontend/src/components/ui/CopyCode.vue b/apps/frontend/src/components/ui/CopyCode.vue
deleted file mode 100644
index e42fe01ee..000000000
--- a/apps/frontend/src/components/ui/CopyCode.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
-    <span>{{ text }}</span>
-    <CheckIcon v-if="copied" />
-    <ClipboardCopyIcon v-else />
-  </button>
-</template>
-
-<script>
-import CheckIcon from "~/assets/images/utils/check.svg?component";
-import ClipboardCopyIcon from "~/assets/images/utils/clipboard-copy.svg?component";
-
-export default {
-  components: {
-    CheckIcon,
-    ClipboardCopyIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      copied: false,
-    };
-  },
-  methods: {
-    async copyText() {
-      await navigator.clipboard.writeText(this.text);
-      this.copied = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.code {
-  color: var(--color-text);
-  display: inline-flex;
-  grid-gap: 0.5rem;
-  font-family: var(--mono-font);
-  font-size: var(--font-size-sm);
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--color-code-bg);
-  width: min-content;
-  border-radius: 10px;
-  user-select: text;
-  transition:
-    opacity 0.5s ease-in-out,
-    filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  span {
-    max-width: 10rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  svg {
-    width: 1em;
-    height: 1em;
-  }
-
-  &:hover {
-    filter: brightness(0.85);
-  }
-
-  &:active {
-    transform: scale(0.95);
-    filter: brightness(0.8);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/DoubleIcon.vue b/apps/frontend/src/components/ui/DoubleIcon.vue
deleted file mode 100644
index 7855a9b3e..000000000
--- a/apps/frontend/src/components/ui/DoubleIcon.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="double-icon">
-    <slot name="primary" />
-    <div class="secondary">
-      <slot name="secondary" />
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.double-icon {
-  position: relative;
-  height: fit-content;
-  line-height: 0;
-
-  .secondary {
-    position: absolute;
-    bottom: -4px;
-    right: -4px;
-    background-color: var(--color-bg);
-    padding: var(--spacing-card-xs);
-    border-radius: 50%;
-    aspect-ratio: 1 / 1;
-    width: fit-content;
-    height: fit-content;
-    line-height: 0;
-
-    svg {
-      width: 1rem;
-      height: 1rem;
-    }
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/DropArea.vue b/apps/frontend/src/components/ui/DropArea.vue
deleted file mode 100644
index 515364b7f..000000000
--- a/apps/frontend/src/components/ui/DropArea.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div
-    ref="drop_area"
-    class="drop-area"
-    @drop.stop.prevent="
-      (event) => {
-        $refs.drop_area.style.visibility = 'hidden';
-
-        if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
-          $emit('change', event.dataTransfer.files);
-        }
-      }
-    "
-    @dragenter.prevent="allowDrag"
-    @dragover.prevent="allowDrag"
-    @dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
-  />
-</template>
-
-<script>
-export default {
-  props: {
-    accept: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["change"],
-  data() {
-    return {
-      fileAllowed: false,
-    };
-  },
-  mounted() {
-    document.addEventListener("dragenter", this.allowDrag);
-  },
-  methods: {
-    allowDrag(event) {
-      const file = event.dataTransfer?.items[0];
-
-      if (
-        file &&
-        this.accept
-          .split(",")
-          .reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === "*", false)
-      ) {
-        this.fileAllowed = true;
-        event.dataTransfer.dropEffect = "copy";
-        event.preventDefault();
-
-        if (this.$refs.drop_area) {
-          this.$refs.drop_area.style.visibility = "visible";
-        }
-      } else {
-        this.fileAllowed = false;
-
-        if (this.$refs.drop_area) {
-          this.$refs.drop_area.style.visibility = "hidden";
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.drop-area {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  visibility: hidden;
-  background-color: hsla(0, 0%, 0%, 0.5);
-  transition:
-    visibility 0.2s ease-in-out,
-    background-color 0.1s ease-in-out;
-  display: flex;
-
-  &::before {
-    --indent: 4rem;
-
-    content: " ";
-    position: relative;
-    top: var(--indent);
-    left: var(--indent);
-    width: calc(100% - (2 * var(--indent)));
-    height: calc(100% - (2 * var(--indent)));
-    border-radius: 1rem;
-    border: 0.25rem dashed var(--color-button-bg);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/EnvironmentIndicator.vue b/apps/frontend/src/components/ui/EnvironmentIndicator.vue
deleted file mode 100644
index 4ea289744..000000000
--- a/apps/frontend/src/components/ui/EnvironmentIndicator.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <span v-if="typeOnly" class="environment">
-    <InfoIcon aria-hidden="true" />
-    A {{ type }}
-  </span>
-  <span
-    v-else-if="
-      !['resourcepack', 'shader'].includes(type) &&
-      !(type === 'plugin' && search) &&
-      !categories.some((x) => tags.loaderData.dataPackLoaders.includes(x))
-    "
-    class="environment"
-  >
-    <template v-if="clientSide === 'optional' && serverSide === 'optional'">
-      <GlobeIcon aria-hidden="true" />
-      Client or server
-    </template>
-    <template v-else-if="clientSide === 'required' && serverSide === 'required'">
-      <GlobeIcon aria-hidden="true" />
-      Client and server
-    </template>
-    <template
-      v-else-if="
-        (clientSide === 'optional' || clientSide === 'required') &&
-        (serverSide === 'optional' || serverSide === 'unsupported')
-      "
-    >
-      <ClientIcon aria-hidden="true" />
-      Client
-    </template>
-    <template
-      v-else-if="
-        (serverSide === 'optional' || serverSide === 'required') &&
-        (clientSide === 'optional' || clientSide === 'unsupported')
-      "
-    >
-      <ServerIcon aria-hidden="true" />
-      Server
-    </template>
-    <template v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'">
-      <GlobeIcon aria-hidden="true" />
-      Unsupported
-    </template>
-    <template v-else-if="alwaysShow">
-      <InfoIcon aria-hidden="true" />
-      A {{ type }}
-    </template>
-  </span>
-</template>
-<script setup>
-import InfoIcon from "~/assets/images/utils/info.svg?component";
-import ClientIcon from "~/assets/images/utils/client.svg?component";
-import GlobeIcon from "~/assets/images/utils/globe.svg?component";
-import ServerIcon from "~/assets/images/utils/server.svg?component";
-
-defineProps({
-  type: {
-    type: String,
-    default: "mod",
-  },
-  serverSide: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  clientSide: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  typeOnly: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  alwaysShow: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  search: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  categories: {
-    type: Array,
-    required: false,
-    default() {
-      return [];
-    },
-  },
-});
-
-const tags = useTags();
-</script>
-<style lang="scss" scoped>
-.environment {
-  display: flex;
-  color: var(--color-text) !important;
-  font-weight: bold;
-  svg {
-    margin-right: 0.2rem;
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/FileInput.vue b/apps/frontend/src/components/ui/FileInput.vue
deleted file mode 100644
index ec1558ec3..000000000
--- a/apps/frontend/src/components/ui/FileInput.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <label
-    :class="{ 'long-style': longStyle }"
-    :disabled="disabled"
-    @drop.prevent="handleDrop"
-    @dragover.prevent
-  >
-    <slot />
-    {{ prompt }}
-    <input
-      type="file"
-      :multiple="multiple"
-      :accept="accept"
-      :disabled="disabled"
-      @change="handleChange"
-    />
-  </label>
-</template>
-
-<script>
-import { fileIsValid } from "~/helpers/fileUtils.js";
-
-export default {
-  components: {},
-  props: {
-    prompt: {
-      type: String,
-      default: "Select file",
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    accept: {
-      type: String,
-      default: null,
-    },
-    /**
-     * The max file size in bytes
-     */
-    maxSize: {
-      type: Number,
-      default: null,
-    },
-    showIcon: {
-      type: Boolean,
-      default: true,
-    },
-    shouldAlwaysReset: {
-      type: Boolean,
-      default: false,
-    },
-    longStyle: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["change"],
-  data() {
-    return {
-      files: [],
-    };
-  },
-  methods: {
-    addFiles(files, shouldNotReset) {
-      if (!shouldNotReset || this.shouldAlwaysReset) {
-        this.files = files;
-      }
-
-      const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true };
-      this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions));
-
-      if (this.files.length > 0) {
-        this.$emit("change", this.files);
-      }
-    },
-    handleDrop(e) {
-      this.addFiles(e.dataTransfer.files);
-    },
-    handleChange(e) {
-      this.addFiles(e.target.files);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-label {
-  flex-direction: unset;
-  max-height: unset;
-
-  svg {
-    height: 1rem;
-  }
-
-  input {
-    display: none;
-  }
-
-  &.long-style {
-    display: flex;
-    padding: 1.5rem 2rem;
-    justify-content: center;
-    align-items: center;
-    grid-gap: 0.5rem;
-    background-color: var(--color-button-bg);
-    border-radius: var(--size-rounded-sm);
-    border: dashed 0.3rem var(--color-text);
-    cursor: pointer;
-    color: var(--color-text-dark);
-  }
-}
-</style>
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 1d2132953..bbb458f94 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -326,10 +326,10 @@ import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
 import { getUserLink } from "~/helpers/users.js";
 import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
 import { markAsRead } from "~/helpers/notifications.js";
-import DoubleIcon from "~/components/ui/DoubleIcon.vue";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
+import { DoubleIcon } from "@modrinth/ui";
+import { Avatar } from "@modrinth/ui";
+import { Badge } from "@modrinth/ui";
+import { CopyCode } from "@modrinth/ui";
 import Categories from "~/components/ui/search/Categories.vue";
 
 const app = useNuxtApp();
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index 5365e65bc..19925b8b2 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -91,14 +91,14 @@
 
 <script>
 import Categories from "~/components/ui/search/Categories.vue";
-import Badge from "~/components/ui/Badge.vue";
-import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
+import { Badge } from "@modrinth/ui";
+import { EnvironmentIndicator } from "@modrinth/ui";
 
 import CalendarIcon from "~/assets/images/utils/calendar.svg?component";
 import EditIcon from "~/assets/images/utils/updated.svg?component";
 import DownloadIcon from "~/assets/images/utils/download.svg?component";
 import HeartIcon from "~/assets/images/utils/heart.svg?component";
-import Avatar from "~/components/ui/Avatar.vue";
+import { Avatar } from "@modrinth/ui";
 
 export default {
   components: {
diff --git a/apps/frontend/src/components/ui/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index b9ec7079f..b5313d259 100644
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/apps/frontend/src/components/ui/report/ReportInfo.vue
@@ -89,13 +89,13 @@
 
 <script setup>
 import { renderHighlightedString } from "~/helpers/highlight.js";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
+import { Avatar } from "@modrinth/ui";
+import { Badge } from "@modrinth/ui";
 import ReportIcon from "~/assets/images/utils/report.svg?component";
 import UnknownIcon from "~/assets/images/utils/unknown.svg?component";
 import VersionIcon from "~/assets/images/utils/version.svg?component";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
+import { CopyCode } from "@modrinth/ui";
 
 defineProps({
   report: {
diff --git a/apps/frontend/src/components/ui/report/ReportsList.vue b/apps/frontend/src/components/ui/report/ReportsList.vue
index 5633a1786..d4a512d64 100644
--- a/apps/frontend/src/components/ui/report/ReportsList.vue
+++ b/apps/frontend/src/components/ui/report/ReportsList.vue
@@ -17,7 +17,7 @@
   <p v-if="reports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
-import Chips from "~/components/ui/Chips.vue";
+import { Chips } from "@modrinth/ui";
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
 import { addReportMessage } from "~/helpers/threads.js";
 
diff --git a/apps/frontend/src/components/ui/search/SearchFilter.vue b/apps/frontend/src/components/ui/search/SearchFilter.vue
index caa5fb029..f4881ddb7 100644
--- a/apps/frontend/src/components/ui/search/SearchFilter.vue
+++ b/apps/frontend/src/components/ui/search/SearchFilter.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Checkbox from "~/components/ui/Checkbox.vue";
+import { Checkbox } from "@modrinth/ui";
 
 export default {
   components: {
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index 450b9ac67..d09f58f8b 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -199,7 +199,7 @@
 import { OverflowMenu, MarkdownEditor } from "@modrinth/ui";
 import { DropdownIcon } from "@modrinth/assets";
 import { useImageUpload } from "~/composables/image-upload.ts";
-import CopyCode from "~/components/ui/CopyCode.vue";
+import { CopyCode } from "@modrinth/ui";
 import ReplyIcon from "~/assets/images/utils/reply.svg?component";
 import SendIcon from "~/assets/images/utils/send.svg?component";
 import CloseIcon from "~/assets/images/utils/check-circle.svg?component";
@@ -211,7 +211,7 @@ import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
 import { isStaff } from "~/helpers/users.js";
 import { isApproved, isRejected } from "~/helpers/projects.js";
 import Modal from "~/components/ui/Modal.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
+import { Checkbox } from "@modrinth/ui";
 
 const props = defineProps({
   thread: {
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index 93fae43a5..9abf48e7a 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -109,8 +109,8 @@ import {
 } from "@modrinth/assets";
 import { OverflowMenu, ConditionalNuxtLink } from "@modrinth/ui";
 import { renderString } from "@modrinth/utils";
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
+import { Avatar } from "@modrinth/ui";
+import { Badge } from "@modrinth/ui";
 import { isStaff } from "~/helpers/users.js";
 
 const props = defineProps({
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index ab805c82c..95d8756ef 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -711,10 +711,10 @@ import {
   OverflowMenu,
   PopoutMenu,
   ScrollablePanel,
+  Badge,
 } from "@modrinth/ui";
 import { formatCategory, isRejected, isStaff, isUnderReview } from "@modrinth/utils";
 import dayjs from "dayjs";
-import Badge from "~/components/ui/Badge.vue";
 import NavTabs from "~/components/ui/NavTabs.vue";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index f180af038..2d0cc9c93 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -295,9 +295,7 @@ import {
   ImageIcon,
   TransferIcon,
 } from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
-import FileInput from "~/components/ui/FileInput.vue";
-import DropArea from "~/components/ui/DropArea.vue";
+import { ConfirmModal, FileInput, DropArea } from "@modrinth/ui";
 import Modal from "~/components/ui/Modal.vue";
 
 import { isPermission } from "~/utils/permissions.ts";
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/description.vue b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
index 7b82eb4e2..aeb720517 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/description.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
@@ -34,8 +34,7 @@
 </template>
 
 <script>
-import { MarkdownEditor } from "@modrinth/ui";
-import Chips from "~/components/ui/Chips.vue";
+import { MarkdownEditor, Chips } from "@modrinth/ui";
 import SaveIcon from "~/assets/images/utils/save.svg?component";
 import { renderHighlightedString } from "~/helpers/highlight.js";
 import { useImageUpload } from "~/composables/image-upload.ts";
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 6772eaece..1773f3593 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -244,10 +244,9 @@
 <script setup>
 import { Multiselect } from "vue-multiselect";
 
+import { Avatar } from "@modrinth/ui";
 import { formatProjectStatus } from "@modrinth/utils";
-import Avatar from "~/components/ui/Avatar.vue";
 import ModalConfirm from "~/components/ui/ModalConfirm.vue";
-import FileInput from "~/components/ui/FileInput.vue";
 
 import UploadIcon from "~/assets/images/utils/upload.svg?component";
 import SaveIcon from "~/assets/images/utils/save.svg?component";
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/license.vue b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
index aa5e86a48..c2598840b 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
@@ -101,7 +101,7 @@
 
 <script>
 import Multiselect from "vue-multiselect";
-import Checkbox from "~/components/ui/Checkbox";
+import { Checkbox } from "@modrinth/ui";
 import SaveIcon from "~/assets/images/utils/save.svg?component";
 
 export default defineNuxtComponent({
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index e42144b48..a5bc23907 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -113,7 +113,7 @@
 </template>
 
 <script>
-import Checkbox from "~/components/ui/Checkbox.vue";
+import { Checkbox } from "@modrinth/ui";
 import StarIcon from "~/assets/images/utils/star.svg?component";
 import SaveIcon from "~/assets/images/utils/save.svg?component";
 
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 76e71e7c2..c7a2548fd 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -630,7 +630,14 @@
   </div>
 </template>
 <script>
-import { ButtonStyled, ConfirmModal, MarkdownEditor } from "@modrinth/ui";
+import {
+  ButtonStyled,
+  ConfirmModal,
+  MarkdownEditor,
+  Chips,
+  FileInput,
+  Checkbox,
+} from "@modrinth/ui";
 import { Multiselect } from "vue-multiselect";
 import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
 import { inferVersionInfo } from "~/helpers/infer.js";
@@ -639,14 +646,8 @@ import { renderHighlightedString } from "~/helpers/highlight.js";
 import { reportVersion } from "~/utils/report-helpers.ts";
 import { useImageUpload } from "~/composables/image-upload.ts";
 
-import Avatar from "~/components/ui/Avatar.vue";
-import Badge from "~/components/ui/Badge.vue";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
-import Chips from "~/components/ui/Chips.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
-import FileInput from "~/components/ui/FileInput.vue";
 
 import FileIcon from "~/assets/images/utils/file.svg?component";
 import TrashIcon from "~/assets/images/utils/trash.svg?component";
@@ -667,6 +668,7 @@ import Modal from "~/components/ui/Modal.vue";
 import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
 
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+
 export default defineNuxtComponent({
   components: {
     MarkdownEditor,
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index f155869a8..b610472fb 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -276,6 +276,7 @@ import {
   Pagination,
   VersionChannelIndicator,
   FileInput,
+  DropArea,
 } from "@modrinth/ui";
 import {
   StarIcon,
@@ -293,12 +294,8 @@ import {
 } from "@modrinth/assets";
 import { formatBytes, formatCategory } from "@modrinth/utils";
 import { formatVersionsForDisplay } from "~/helpers/projects.js";
-import VersionFilterControl from "~/components/ui/VersionFilterControl.vue";
-import DropArea from "~/components/ui/DropArea.vue";
 import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-
-const formatCompactNumber = useCompactNumber();
+import VersionFilterControl from "~/components/ui/VersionFilterControl.vue";
 
 const props = defineProps({
   project: {
@@ -324,6 +321,7 @@ const props = defineProps({
 const auth = await useAuth();
 const tags = useTags();
 const formatRelativeTime = useRelativeTime();
+const formatCompactNumber = useCompactNumber();
 
 const emits = defineEmits(["onDownload"]);
 
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 4e2b3c89c..041ede8d2 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -8,13 +8,10 @@ import {
   DownloadIcon,
   LinkIcon,
 } from "@modrinth/assets";
-import Avatar from "~/components/ui/Avatar.vue";
-import LogoAnimated from "~/components/brand/LogoAnimated.vue";
-import Badge from "~/components/ui/Badge.vue";
+import { Avatar, AnimatedLogo, Badge, Checkbox } from "@modrinth/ui";
 import PrismIcon from "~/assets/images/external/prism.svg?component";
 import ATLauncher from "~/assets/images/external/atlauncher.svg?component";
 import CurseForge from "~/assets/images/external/curseforge.svg?component";
-import Checkbox from "~/components/ui/Checkbox.vue";
 
 import { homePageProjects } from "~/generated/state.json";
 
@@ -456,7 +453,7 @@ useSeoMeta({
               <div class="cell">
                 <div>
                   <div class="icon-logo modrinth">
-                    <LogoAnimated class="icon" />
+                    <AnimatedLogo class="icon" />
                   </div>
                 </div>
               </div>
@@ -493,7 +490,7 @@ useSeoMeta({
         </div>
         <div class="feature gradient-border website">
           <div class="icon-logo">
-            <LogoAnimated class="icon" />
+            <AnimatedLogo class="icon" />
           </div>
           <div class="ellipsis" />
           <div class="projects-showcase">
@@ -534,7 +531,7 @@ useSeoMeta({
           </div>
           <div class="inner-ring ring">
             <div class="icon-logo">
-              <LogoAnimated class="icon" />
+              <AnimatedLogo class="icon" />
             </div>
             <div class="launcher-badge top-left">
               <img src="~/assets/images/external/gdlauncher.png" alt="GDLauncher" />
@@ -1980,9 +1977,6 @@ useSeoMeta({
   width: 5rem;
   height: 5rem;
   padding: 0.75rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   border: 1px solid var(--landing-border-color);
   border-radius: var(--radius-lg);
 
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index 583bb703e..7527b71e2 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -108,9 +108,9 @@
   </div>
 </template>
 <script setup>
+import { Avatar } from "@modrinth/ui";
 import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
 import HistoryIcon from "~/assets/images/utils/history.svg?component";
-import Avatar from "~/components/ui/Avatar.vue";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
 import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.js";
 
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 2c4f839d2..8d6a75973 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 <script setup>
-import { Button } from "@modrinth/ui";
+import { Button, Chips } from "@modrinth/ui";
 import { HistoryIcon } from "@modrinth/assets";
 import {
   fetchExtraNotificationData,
@@ -58,7 +58,6 @@ import {
   markAsRead,
 } from "~/helpers/notifications.js";
 import NotificationItem from "~/components/ui/NotificationItem.vue";
-import Chips from "~/components/ui/Chips.vue";
 import CheckCheckIcon from "~/assets/images/utils/check-check.svg?component";
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import Pagination from "~/components/ui/Pagination.vue";
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index ebd06c9ce..7aa0368b1 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -302,12 +302,9 @@
 <script>
 import { Multiselect } from "vue-multiselect";
 
-import Badge from "~/components/ui/Badge.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
+import { Badge, Checkbox, Avatar, CopyCode } from "@modrinth/ui";
 import Modal from "~/components/ui/Modal.vue";
-import Avatar from "~/components/ui/Avatar.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
-import CopyCode from "~/components/ui/CopyCode.vue";
 
 import SettingsIcon from "~/assets/images/utils/settings.svg?component";
 import TrashIcon from "~/assets/images/utils/trash.svg?component";
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index ebbcc5de3..6a032553f 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -523,7 +523,6 @@ import CalendarIcon from "~/assets/images/utils/calendar.svg?component";
 import ModrinthIcon from "~/assets/images/logo.svg?component";
 import PrismLauncherLogo from "~/assets/images/external/prism.svg?component";
 import ATLauncherLogo from "~/assets/images/external/atlauncher.svg?component";
-import Avatar from "~/components/ui/Avatar.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 
 import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";
diff --git a/apps/frontend/src/pages/moderation/review.vue b/apps/frontend/src/pages/moderation/review.vue
index 5b5cd36c5..e48ba0961 100644
--- a/apps/frontend/src/pages/moderation/review.vue
+++ b/apps/frontend/src/pages/moderation/review.vue
@@ -101,15 +101,13 @@
   </section>
 </template>
 <script setup>
-import Chips from "~/components/ui/Chips.vue";
-import Avatar from "~/components/ui/Avatar.vue";
+import { Chips, Avatar, Badge } from "@modrinth/ui";
 import UnknownIcon from "~/assets/images/utils/unknown.svg?component";
 import EyeIcon from "~/assets/images/utils/eye.svg?component";
 import SortAscIcon from "~/assets/images/utils/sort-asc.svg?component";
 import SortDescIcon from "~/assets/images/utils/sort-desc.svg?component";
 import WarningIcon from "~/assets/images/utils/issues.svg?component";
 import ModerationIcon from "~/assets/images/sidebar/admin.svg?component";
-import Badge from "~/components/ui/Badge.vue";
 import { formatProjectType } from "~/plugins/shorthands.js";
 
 useHead({
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 8b22844f6..f5c6a5faf 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -205,7 +205,7 @@
           </button>
         </div>
       </div>
-      <LogoAnimated v-if="searchLoading && !noLoad" />
+      <AnimatedLogo v-if="searchLoading && !noLoad" />
       <div v-else-if="results && results.hits && results.hits.length === 0" class="no-results">
         <p>No results found for your query!</p>
       </div>
@@ -256,10 +256,9 @@
 </template>
 <script setup>
 import { Multiselect } from "vue-multiselect";
-import { Pagination, ScrollablePanel, Checkbox } from "@modrinth/ui";
+import { Pagination, ScrollablePanel, Checkbox, AnimatedLogo } from "@modrinth/ui";
 import { BanIcon, DropdownIcon, CheckIcon, FilterXIcon } from "@modrinth/assets";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
-import LogoAnimated from "~/components/brand/LogoAnimated.vue";
 
 import ClientIcon from "~/assets/images/categories/client.svg?component";
 import ServerIcon from "~/assets/images/categories/server.svg?component";
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index fece6d797..8023cac13 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -203,7 +203,7 @@
 </template>
 <script setup>
 import { PlusIcon, XIcon, TrashIcon, EditIcon, SaveIcon } from "@modrinth/assets";
-import { Checkbox, ConfirmModal } from "@modrinth/ui";
+import { Checkbox, ConfirmModal, CopyCode } from "@modrinth/ui";
 
 import { commonSettingsMessages } from "~/utils/common-messages.ts";
 import {
@@ -214,7 +214,6 @@ import {
   getScopeValue,
 } from "~/composables/auth/scopes.ts";
 
-import CopyCode from "~/components/ui/CopyCode.vue";
 import Modal from "~/components/ui/Modal.vue";
 
 const { formatMessage } = useVIntl();
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 8973b9881..017d04717 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -302,7 +302,7 @@ import {
   ClipboardCopyIcon,
   MoreVerticalIcon,
 } from "@modrinth/assets";
-import { OverflowMenu, ButtonStyled } from "@modrinth/ui";
+import { OverflowMenu, ButtonStyled, Avatar } from "@modrinth/ui";
 import NavTabs from "~/components/ui/NavTabs.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import { reportUser } from "~/utils/report-helpers.ts";
@@ -319,7 +319,6 @@ import EditIcon from "~/assets/images/utils/edit.svg?component";
 import HeartIcon from "~/assets/images/utils/heart.svg?component";
 import WorldIcon from "~/assets/images/utils/world.svg?component";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
-import Avatar from "~/components/ui/Avatar.vue";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
 
diff --git a/packages/ui/src/components/base/Badge.vue b/packages/ui/src/components/base/Badge.vue
index 18fe5e9c8..a1b828334 100644
--- a/packages/ui/src/components/base/Badge.vue
+++ b/packages/ui/src/components/base/Badge.vue
@@ -1,5 +1,9 @@
 <template>
-  <span :class="'version-badge ' + color + ' type--' + type">
+  <span
+    :class="
+      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
+    "
+  >
     <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
 
     <!-- User roles -->
@@ -15,16 +19,13 @@
 
     <!-- Project statuses -->
     <template v-else-if="type === 'approved'">
-      <ListIcon aria-hidden="true" /> {{ formatMessage(messages.listedLabel) }}
+      <GlobeIcon aria-hidden="true" /> {{ formatMessage(messages.publicLabel) }}
     </template>
     <template v-else-if="type === 'approved-general'">
       <CheckIcon aria-hidden="true" /> {{ formatMessage(messages.approvedLabel) }}
     </template>
-    <template v-else-if="type === 'unlisted'">
-      <EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
-    </template>
-    <template v-else-if="type === 'withheld'">
-      <EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.withheldLabel) }}
+    <template v-else-if="type === 'unlisted' || type === 'withheld'">
+      <LinkIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
     </template>
     <template v-else-if="type === 'private'">
       <LockIcon aria-hidden="true" /> {{ formatMessage(messages.privateLabel) }}
@@ -79,8 +80,6 @@ import {
   ModrinthIcon,
   ScaleIcon,
   BoxIcon,
-  ListIcon,
-  EyeOffIcon,
   FileTextIcon,
   XIcon,
   ArchiveIcon,
@@ -88,6 +87,8 @@ import {
   CheckIcon,
   LockIcon,
   CalendarIcon,
+  GlobeIcon,
+  LinkIcon,
 } from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
 import { useVIntl, defineMessages } from '@vintl/vintl'
@@ -121,9 +122,9 @@ const messages = defineMessages({
     id: 'omorphia.component.badge.label.failed',
     defaultMessage: 'Failed',
   },
-  listedLabel: {
-    id: 'omorphia.component.badge.label.listed',
-    defaultMessage: 'Listed',
+  publicLabel: {
+    id: 'omorphia.component.badge.label.public',
+    defaultMessage: 'Public',
   },
   moderatorLabel: {
     id: 'omorphia.component.badge.label.moderator',
@@ -242,8 +243,9 @@ defineProps({
   }
 
   &.type--private,
+  &.type--approved,
   &.gray {
-    --badge-color: var(--color-gray);
+    --badge-color: var(--color-secondary);
   }
 
   &::first-letter {
diff --git a/packages/ui/src/components/base/Checkbox.vue b/packages/ui/src/components/base/Checkbox.vue
index 6eaf37f18..b8769b400 100644
--- a/packages/ui/src/components/base/Checkbox.vue
+++ b/packages/ui/src/components/base/Checkbox.vue
@@ -32,9 +32,9 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
-    label: string
+    label?: string
     disabled?: boolean
-    description: string
+    description?: string
     modelValue: boolean
     clickEvent?: () => void
     collapsingToggleStyle?: boolean