diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 249559342..0ccca964f 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -18,7 +18,7 @@ jobs:
           node-version: 18.x
       - name: Get yarn cache
         id: yarn-cache
-        run: echo "DIR=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
       - uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache.outputs.dir }}
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 1a8c40dec..1088456ff 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -3,7 +3,7 @@ name: Publish Package
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
 jobs:
   publish:
@@ -21,8 +21,6 @@ jobs:
 
       - name: Install deps
         run: npm run build
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
 
       - name: Publish package
         run: npm publish
diff --git a/README.md b/README.md
index 970926040..31d914596 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,3 @@
 # omorphia
 
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
+Omorphia is modrinth's style and component library. See [omorphia.modrinth.com](https://omorphia.modrinth.com) for more information.
diff --git a/docs/.postcssrc.cjs b/docs/.postcssrc.cjs
index 186d3c3a3..37c3f9ddf 100644
--- a/docs/.postcssrc.cjs
+++ b/docs/.postcssrc.cjs
@@ -6,7 +6,7 @@ module.exports = {
       transform(prefix, _selector) {
         const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
         return selector + prefix + pseudo
-      }
-    }
-  }
+      },
+    },
+  },
 }
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 05eff9bb7..e029bfea8 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -4,9 +4,7 @@ import svgLoader from 'vite-svg-loader'
 export default {
   title: 'Omorphia',
   description: 'A components library used for Modrinth.',
-  head: [
-    ['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
-  ],
+  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
   themeConfig: {
     sidebar: [
       {
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
index 454648481..3c8274fea 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -51,7 +51,7 @@ a.uncolored {
   color: inherit;
 }
 
-input[type="text"] {
+input[type='text'] {
   border-radius: var(--radius-md);
   box-sizing: border-box;
   border: 2px solid transparent;
@@ -137,7 +137,7 @@ svg {
 
 .button-animation {
   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;
+    outline 0.2s ease-in-out;
 
   &:active:not(&:disabled) {
     transform: scale(0.95);
diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue
index 11341139d..51b9b794d 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -26,9 +26,7 @@ const props = defineProps({
   },
 })
 
-const accentedButton = computed(
-  () => ['danger', 'primary'].includes(props.color)
-)
+const accentedButton = computed(() => ['danger', 'primary'].includes(props.color))
 </script>
 
 <template>
diff --git a/lib/components/base/Card.vue b/lib/components/base/Card.vue
index a2e853b8c..a21ab31ac 100644
--- a/lib/components/base/Card.vue
+++ b/lib/components/base/Card.vue
@@ -28,9 +28,7 @@ function toggleCollapsed() {
 </script>
 
 <template>
-  <div
-    class="card"
-  >
+  <div class="card">
     <div v-if="!!$slots.header || collapsible" class="header">
       <slot name="header"></slot>
       <div v-if="collapsible" class="btn-group">
diff --git a/lib/components/base/EnvironmentIndicator.vue b/lib/components/base/EnvironmentIndicator.vue
index ccfb19b51..beacb9f66 100644
--- a/lib/components/base/EnvironmentIndicator.vue
+++ b/lib/components/base/EnvironmentIndicator.vue
@@ -4,19 +4,14 @@
     A {{ type }}
   </span>
   <span
-    v-else-if="
-      !['resourcepack', 'shader'].includes(type) &&
-      !(type === 'plugin' && search)
-    "
+    v-else-if="!['resourcepack', 'shader'].includes(type) && !(type === 'plugin' && search)"
     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'"
-    >
+    <template v-else-if="clientSide === 'required' && serverSide === 'required'">
       <GlobeIcon aria-hidden="true" />
       Client and server
     </template>
@@ -38,9 +33,7 @@
       <ServerIcon aria-hidden="true" />
       Server
     </template>
-    <template
-      v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'"
-    >
+    <template v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'">
       <GlobeIcon aria-hidden="true" />
       Unsupported
     </template>
@@ -51,10 +44,10 @@
   </span>
 </template>
 <script setup>
-import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon} from "@/components";
+import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@/components'
 </script>
 <script>
-import {defineComponent} from "vue";
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   props: {
@@ -86,9 +79,9 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false,
-    }
+    },
   },
-});
+})
 </script>
 <style lang="scss" scoped>
 .environment {
diff --git a/lib/components/base/ProjectCard.vue b/lib/components/base/ProjectCard.vue
index 715a3a7d3..0ec77d442 100644
--- a/lib/components/base/ProjectCard.vue
+++ b/lib/components/base/ProjectCard.vue
@@ -1,14 +1,6 @@
 <template>
-  <article
-    class="project-card base-card"
-    :aria-label="name"
-    role="listitem"
-  >
-    <router-link
-      class="icon"
-      tabindex="-1"
-      :to="`/${projectTypeUrl}/${id}`"
-    >
+  <article class="project-card base-card" :aria-label="name" role="listitem">
+    <router-link class="icon" tabindex="-1" :to="`/${projectTypeUrl}/${id}`">
       <Avatar :src="iconUrl" :alt="name" size="md" no-shadow loading="lazy" />
     </router-link>
     <router-link
@@ -28,24 +20,14 @@
       </router-link>
       <p v-if="author" class="author">
         by
-        <router-link class="title-link" :to="'/user/' + author"
-          >{{ author }}
-        </router-link>
+        <router-link class="title-link" :to="'/user/' + author">{{ author }} </router-link>
       </p>
-      <Badge
-        v-if="status && status !== 'approved'"
-        :type="status"
-        class="status"
-      />
+      <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
     </div>
     <p class="description">
       {{ description }}
     </p>
-    <Categories
-      :categories="categories"
-      :type="type"
-      class="tags"
-    >
+    <Categories :categories="categories" :type="type" class="tags">
       <EnvironmentIndicator
         :type-only="moderation"
         :client-side="clientSide"
@@ -59,53 +41,48 @@
         <DownloadIcon aria-hidden="true" />
         <p>
           <strong>{{ formatNumber(downloads) }}</strong
-          ><span class="stat-label">
-            download<span v-if="downloads !== '1'">s</span></span
-          >
+          ><span class="stat-label"> download<span v-if="downloads !== '1'">s</span></span>
         </p>
       </div>
       <div v-if="follows" class="stat">
         <HeartIcon aria-hidden="true" />
         <p>
           <strong>{{ formatNumber(follows) }}</strong
-          ><span class="stat-label">
-            follower<span v-if="follows !== '1'">s</span></span
-          >
+          ><span class="stat-label"> follower<span v-if="follows !== '1'">s</span></span>
         </p>
       </div>
       <div class="buttons">
         <slot />
       </div>
-      <div
-        v-if="showUpdatedDate"
-        v-tooltip="updatedDate"
-        class="stat date"
-      >
+      <div v-if="showUpdatedDate" v-tooltip="updatedDate" class="stat date">
         <EditIcon aria-hidden="true" />
-        <span class="date-label">Updated </span
-        > {{ sinceUpdated }}
+        <span class="date-label">Updated </span> {{ sinceUpdated }}
       </div>
-      <div
-        v-else
-        v-tooltip="createdDate"
-        class="stat date"
-      >
+      <div v-else v-tooltip="createdDate" class="stat date">
         <CalendarIcon aria-hidden="true" />
-        <span class="date-label">Published </span
-        >{{ sinceCreation }}
+        <span class="date-label">Published </span>{{ sinceCreation }}
       </div>
     </div>
   </article>
 </template>
 <script setup>
-import { Badge, HeartIcon, DownloadIcon, EditIcon, CalendarIcon, Avatar, Categories, EnvironmentIndicator } from '@/components'
+import {
+  Badge,
+  HeartIcon,
+  DownloadIcon,
+  EditIcon,
+  CalendarIcon,
+  Avatar,
+  Categories,
+  EnvironmentIndicator,
+} from '@/components'
 import { formatNumber } from '@/components/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 dayjs.extend(relativeTime)
 </script>
 <script>
-import {defineComponent} from "vue";
+import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
     id: {
@@ -218,7 +195,7 @@ export default defineComponent({
       type: Number,
       required: false,
       default: null,
-    }
+    },
   },
   computed: {
     toColor() {
@@ -241,12 +218,12 @@ export default defineComponent({
     },
     sinceUpdated() {
       return dayjs(this.updatedAt).fromNow()
-    }
+    },
   },
   methods: {
-    formatNumber
+    formatNumber,
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>
@@ -326,7 +303,8 @@ export default defineComponent({
     margin-top: -3rem;
     z-index: 1;
 
-    img, svg {
+    img,
+    svg {
       border-radius: var(--radius-lg);
       border: 4px solid var(--color-raised-bg);
       border-bottom: none;
diff --git a/lib/components/base/Slider.vue b/lib/components/base/Slider.vue
index 034b7fd45..0c9538018 100644
--- a/lib/components/base/Slider.vue
+++ b/lib/components/base/Slider.vue
@@ -3,27 +3,27 @@
     <div class="slider-component">
       <div class="slide-container">
         <input
-            ref="input"
-            v-model="currentValue"
-            type="range"
-            :min="min"
-            :max="max"
-            :step="step"
-            class="slider"
-            :style="{
-              '--current-value': currentValue,
-              '--min-value': min,
-              '--max-value': max
-            }"
-            @input="onInput($refs.input.value)"
-        >
+          ref="input"
+          v-model="currentValue"
+          type="range"
+          :min="min"
+          :max="max"
+          :step="step"
+          class="slider"
+          :style="{
+            '--current-value': currentValue,
+            '--min-value': min,
+            '--max-value': max,
+          }"
+          @input="onInput($refs.input.value)"
+        />
         <div class="slider-range">
           <span>
-              {{ min }}
-            </span>
+            {{ min }}
+          </span>
           <span>
-              {{ max }}
-            </span>
+            {{ max }}
+          </span>
         </div>
       </div>
     </div>
@@ -39,28 +39,28 @@
 
 <script>
 export default {
-  name: "Slider",
+  name: 'Slider',
   props: {
     value: {
       type: Number,
-      default: 0
+      default: 0,
     },
     min: {
       type: Number,
-      default: 0
+      default: 0,
     },
     max: {
       type: Number,
-      default: 100
+      default: 100,
     },
     step: {
       type: Number,
-      default: 10
+      default: 10,
     },
     forceStep: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   emits: ['input'],
   data() {
@@ -68,16 +68,16 @@ export default {
       sliderWidth: 0,
       objectPosition: 0,
       startOffset: 0,
-      currentValue: Math.max(this.min, this.value).toString()
-    };
+      currentValue: Math.max(this.min, this.value).toString(),
+    }
   },
   computed: {
     inputValueValid: {
       get() {
-        return this.$refs.value.value;
+        return this.$refs.value.value
       },
       set(newValue) {
-        const parsedValue = parseInt(newValue);
+        const parsedValue = parseInt(newValue)
         if (parsedValue < this.min) {
           this.currentValue = this.min.toString()
         } else if (parsedValue > this.max) {
@@ -85,18 +85,20 @@ export default {
         } else if (!parsedValue) {
           this.currentValue = this.min.toString()
         } else {
-          this.currentValue = (parsedValue - (this.forceStep ? parsedValue % this.step : 0)).toString()
+          this.currentValue = (
+            parsedValue - (this.forceStep ? parsedValue % this.step : 0)
+          ).toString()
         }
-        this.$refs.value.value = this.currentValue;
-        this.$emit('input', parseInt(this.currentValue));
-      }
-    }
+        this.$refs.value.value = this.currentValue
+        this.$emit('input', parseInt(this.currentValue))
+      },
+    },
   },
   methods: {
     onInput(value) {
-      this.inputValueValid = parseInt(value);
+      this.inputValueValid = parseInt(value)
     },
-  }
+  },
 }
 </script>
 
@@ -119,13 +121,15 @@ export default {
   -webkit-appearance: none;
   appearance: none;
   border-radius: var(--radius-sm);
-  height: .25rem;
-  background:  linear-gradient(
-      to right,
-      var(--color-brand),
-      var(--color-brand) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
-      var(--color-base) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
-      var(--color-base) 100%
+  height: 0.25rem;
+  background: linear-gradient(
+    to right,
+    var(--color-brand),
+    var(--color-brand)
+      calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+    var(--color-base)
+      calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+    var(--color-base) 100%
   );
   background-size: 100% 100%;
   outline: none;
@@ -135,38 +139,38 @@ export default {
 .slider-component .slide-container .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: .75rem;
-  height: .75rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider::-moz-range-thumb {
-  width: .75rem;
-  height: .75rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider:hover::-webkit-slider-thumb {
   width: 1rem;
   height: 1rem;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider:hover::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-input {
   width: 6rem;
-  margin-left: .75rem;
+  margin-left: 0.75rem;
 }
 
 .slider-range {
diff --git a/lib/components/brand/AnimatedLogo.vue b/lib/components/brand/AnimatedLogo.vue
index 30284a1a5..64546272f 100644
--- a/lib/components/brand/AnimatedLogo.vue
+++ b/lib/components/brand/AnimatedLogo.vue
@@ -7,12 +7,7 @@
       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;
-      "
+      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)">
@@ -25,19 +20,14 @@
         </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;
-      "
-  >
+      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)">
@@ -58,12 +48,7 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xml:space="preserve"
       xmlns:serif="http://www.serif.com/"
-      style="
-        fill-rule: evenodd;
-        clip-rule: evenodd;
-        stroke-linejoin: round;
-        stroke-miterlimit: 2;
-      "
+      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)">
@@ -89,7 +74,7 @@
 
 <script>
 export default {
-  name: "AnimatedLogo"
+  name: 'AnimatedLogo',
 }
 </script>
 
diff --git a/lib/components/brand/TextLogo.vue b/lib/components/brand/TextLogo.vue
index 8d99b1dd6..2fe587a9e 100644
--- a/lib/components/brand/TextLogo.vue
+++ b/lib/components/brand/TextLogo.vue
@@ -32,13 +32,13 @@
 
 <script>
 export default {
-  name: "TextLogo",
+  name: 'TextLogo',
   props: {
     animate: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 }
 </script>
 
diff --git a/lib/components/utils.js b/lib/components/utils.js
index 9f733103b..03112ddf3 100644
--- a/lib/components/utils.js
+++ b/lib/components/utils.js
@@ -118,9 +118,7 @@ export const formatVersions = (versionArray, store) => {
 
   for (let i = 0; i < versionArray.length; i++) {
     const index = allVersions.findIndex((x) => x.version === versionArray[i])
-    const releaseIndex = allReleases.findIndex(
-      (x) => x.version === versionArray[i]
-    )
+    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
 
     if (i === 0) {
       intervals.push([[versionArray[i], index, releaseIndex]])
@@ -145,11 +143,7 @@ export const formatVersions = (versionArray, store) => {
   for (let i = 0; i < intervals.length; i++) {
     const interval = intervals[i]
 
-    if (
-      interval.length === 2 &&
-      interval[0][2] !== -1 &&
-      interval[1][2] === -1
-    ) {
+    if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
       let lastSnapshot = null
       for (let j = interval[1][1]; j > interval[0][1]; j--) {
         if (allVersions[j].version_type === 'release') {
@@ -158,17 +152,12 @@ export const formatVersions = (versionArray, store) => {
             [
               allVersions[j].version,
               j,
-              allReleases.findIndex(
-                (x) => x.version === allVersions[j].version
-              ),
+              allReleases.findIndex((x) => x.version === allVersions[j].version),
             ],
           ])
 
           if (lastSnapshot !== null && lastSnapshot !== j + 1) {
-            newIntervals.push([
-              [allVersions[lastSnapshot].version, lastSnapshot, -1],
-              interval[1],
-            ])
+            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
           } else {
             newIntervals.push([interval[1]])
           }