diff --git a/assets/images/sidebar/admin.svg b/assets/images/sidebar/admin.svg
index afeab20b..dfdc6cb4 100644
--- a/assets/images/sidebar/admin.svg
+++ b/assets/images/sidebar/admin.svg
@@ -1,10 +1,3 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-    stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="12" cy="12" r="10"></circle>
-    <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
-    <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
-    <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
-    <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
-    <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
-    <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+</svg>
diff --git a/assets/images/utils/check-circle.svg b/assets/images/utils/check-circle.svg
new file mode 100644
index 00000000..f6e6b175
--- /dev/null
+++ b/assets/images/utils/check-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
+  <path d="m9 12 2 2 4-4"></path>
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/clear.svg b/assets/images/utils/clear.svg
new file mode 100644
index 00000000..144ce243
--- /dev/null
+++ b/assets/images/utils/clear.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="15" y1="9" x2="9" y2="15"></line>
+  <line x1="9" y1="9" x2="15" y2="15"></line>
+</svg>
\ No newline at end of file
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 2eb24011..b9890ce0 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -454,6 +454,15 @@
   border-top-right-radius: var(--size-rounded-card) !important;
 }
 
+.known-error .multiselect__tags {
+  border-color: var(--color-badge-red-bg) !important;
+  background-color: var(--color-warning-bg) !important;
+
+  &::placeholder {
+    color: var(--color-warning-text);
+  }
+}
+
 .multiselect {
   color: var(--color-text) !important;
 
@@ -554,6 +563,7 @@ label {
 
   @media screen and (min-width: 1024px) {
     flex-direction: row;
+    align-items: center;
   }
 
   span {
@@ -814,6 +824,26 @@ label {
   }
 }
 
+.vue-notification {
+  background: #44A4FC;
+  border-left: 5px solid #44A4FC;
+
+  &.success {
+    background: #68CD86;
+    border-left-color: #68CD86;
+  }
+
+  &.warn {
+    background: #ffb648;
+    border-left-color: #ffb648;
+  }
+
+  &.error {
+    background: #E54D42;
+    border-left-color: #E54D42;
+  }
+}
+
 .vue-notification-group {
   right: 25px !important;
 
@@ -839,3 +869,17 @@ label {
   height: 1px;
   margin: var(--spacing-card-bg) 0;
 }
+
+input.known-error,
+textarea.known-error {
+  border-color: var(--color-badge-red-bg) !important;
+  background-color: var(--color-warning-bg) !important;
+
+  &::placeholder {
+    color: var(--color-warning-text);
+  }
+}
+
+.known-errors {
+  color: var(--color-badge-red-bg);
+}
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index ab8beb6f..28293c4f 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -247,7 +247,7 @@ h2 {
 
 h3 {
   margin-top: 0.5rem;
-  margin-bottom: 0;
+  margin-bottom: 0.25rem;
   color: var(--color-text-dark);
 }
 
@@ -258,6 +258,7 @@ button {
 
 input {
   border-radius: 2rem;
+  box-sizing: border-box;
 }
 
 pre {
diff --git a/components/ui/FileInput.vue b/components/ui/FileInput.vue
deleted file mode 100644
index b864221a..00000000
--- a/components/ui/FileInput.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <label class="button" @drop.prevent="addFile" @dragover.prevent>
-    <span>
-      {{ text }}
-    </span>
-    <input
-      type="file"
-      :multiple="multiple"
-      :accept="accept"
-      @change="onChange"
-    />
-  </label>
-</template>
-
-<script>
-export default {
-  name: 'FileInput',
-  props: {
-    prompt: {
-      type: String,
-      default: 'Select file',
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    accept: {
-      type: String,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      text: this.prompt,
-      files: [],
-    }
-  },
-  methods: {
-    onChange(files, shouldNotReset) {
-      if (!shouldNotReset) this.files = files.target.files
-
-      const length = this.files.length
-      if (length === 0) {
-        this.text = this.prompt
-      } else if (length === 1) {
-        this.text = '1 file selected'
-      } else if (length > 1) {
-        this.text = length + ' files selected'
-      }
-      this.$emit('change', this.files)
-    },
-    addFile(e) {
-      const droppedFiles = e.dataTransfer.files
-
-      if (!this.multiple) this.files = []
-
-      if (!droppedFiles) return
-      ;[...droppedFiles].forEach((f) => {
-        this.files.push(f)
-      })
-
-      if (!this.multiple && this.files.length > 0) this.files = [this.files[0]]
-
-      if (this.files.length > 0) this.onChange(null, true)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: var(--spacing-card-sm) var(--spacing-card-md);
-}
-
-span {
-  border: 2px dashed var(--color-divider-dark);
-  border-radius: var(--size-rounded-control);
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-}
-
-input {
-  display: none;
-}
-</style>
diff --git a/components/ui/SmartFileInput.vue b/components/ui/SmartFileInput.vue
index 6bf0f21d..7a180501 100644
--- a/components/ui/SmartFileInput.vue
+++ b/components/ui/SmartFileInput.vue
@@ -2,7 +2,7 @@
   <div class="columns">
     <label class="button" @drop.prevent="addFile" @dragover.prevent>
       <span>
-        <UploadIcon />
+        <UploadIcon v-if="showIcon" />
         {{ prompt }}
       </span>
       <input
@@ -36,6 +36,14 @@ export default {
       type: String,
       default: null,
     },
+    maxSize: {
+      type: Number,
+      default: null,
+    },
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -46,7 +54,26 @@ export default {
     onChange(files, shouldNotReset) {
       if (!shouldNotReset) this.files = files.target.files
 
-      this.$emit('change', this.files)
+      this.files = [...this.files].filter((file) => {
+        if (this.maxSize === null) {
+          return true
+        } else if (file.size > this.maxSize) {
+          console.log('File size: ' + file.size + ', max size: ' + this.maxSize)
+          alert(
+            'File ' +
+              file.name +
+              ' is too big! Must be less than ' +
+              this.$formatBytes(this.maxSize)
+          )
+          return false
+        } else {
+          return true
+        }
+      })
+
+      if (this.files.length > 0) {
+        this.$emit('change', this.files)
+      }
     },
     addFile(e) {
       const droppedFiles = e.dataTransfer.files
@@ -74,7 +101,6 @@ label {
   justify-content: center;
   text-align: center;
   padding: var(--spacing-card-sm) var(--spacing-card-md);
-  margin-bottom: var(--spacing-card-sm);
 }
 
 span {
@@ -95,4 +121,17 @@ span {
 input {
   display: none;
 }
+
+.known-error label {
+  border-color: var(--color-badge-red-bg) !important;
+  background-color: var(--color-warning-bg) !important;
+
+  span {
+    border-color: var(--color-badge-red-bg);
+  }
+
+  &::placeholder {
+    color: var(--color-warning-text);
+  }
+}
 </style>
diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue
index 9d3770e6..c116765b 100644
--- a/components/ui/VersionFilterControl.vue
+++ b/components/ui/VersionFilterControl.vue
@@ -6,9 +6,8 @@
     <Multiselect
       v-if="getValidLoaders().length > 1"
       v-model="selectedLoader"
-      :options="
-        getValidLoaders().map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-      "
+      :options="getValidLoaders()"
+      :custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
       :multiple="false"
       :searchable="false"
       :show-no-results="false"
@@ -60,7 +59,7 @@
         updateVersionFilters()
       "
     >
-      <CrossIcon />
+      <ClearIcon />
       Clear filters
     </button>
   </div>
@@ -69,14 +68,14 @@
 <script>
 import Multiselect from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox'
-import CrossIcon from '~/assets/images/utils/x.svg?inline'
+import ClearIcon from '~/assets/images/utils/clear.svg?inline'
 
 export default {
   name: 'VersionFilterControl',
   components: {
     Multiselect,
     Checkbox,
-    CrossIcon,
+    ClearIcon,
   },
   props: {
     versions: {
@@ -123,9 +122,10 @@ export default {
         (projectVersion) =>
           (this.selectedGameVersions.length === 0 ||
             this.selectedGameVersions.some((gameVersion) =>
-              projectVersion.game_versions.includes(gameVersion.toLowerCase())
+              projectVersion.game_versions.includes(gameVersion)
             )) &&
-          projectVersion.loaders.includes(this.selectedLoader.toLowerCase())
+          (this.selectedLoader === null ||
+            projectVersion.loaders.includes(this.selectedLoader))
       )
       this.$emit('updateVersions', temp)
     },
diff --git a/layouts/default.vue b/layouts/default.vue
index 6c34d167..47a16d5a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -56,6 +56,21 @@
                   {{ $user.notifications.length }}
                 </div>
               </nuxt-link>
+              <nuxt-link
+                v-if="
+                  $auth.user &&
+                  ($auth.user.role === 'moderator' ||
+                    $auth.user.role === 'admin')
+                "
+                to="/moderation"
+                class="control-button"
+                title="Moderation"
+              >
+                <ModerationIcon aria-hidden="true" />
+                <div v-if="moderationNotifications > 0" class="bubble">
+                  {{ moderationNotifications }}
+                </div>
+              </nuxt-link>
               <div v-if="$auth.user" ref="mobileMenu" class="dropdown">
                 <button class="control" value="Profile Dropdown">
                   <img
@@ -230,6 +245,7 @@
         position="bottom right"
         :max="5"
         :ignore-duplicates="true"
+        :duration="10000"
       />
       <Nuxt id="main" />
     </main>
@@ -237,16 +253,23 @@
       <div class="logo-info" role="region" aria-label="Modrinth information">
         <ModrinthLogo aria-hidden="true" class="text-logo" />
         <p>
-          Modrinth is open source software. You may view the source code at
+          Modrinth is
           <a
             target="_blank"
-            href="https://github.com/modrinth/knossos"
+            href="https://github.com/modrinth"
             class="text-link"
           >
-            our GitHub page</a
+            open source</a
+          >.
+        </p>
+        <p>
+          {{ owner }}/{{ slug }} {{ branch }}@<a
+            target="_blank"
+            :href="'https://github.com/' + owner + '/' + slug + '/tree/' + hash"
+            class="text-link"
+            >{{ hash.substring(0, 7) }}</a
           >
         </p>
-        <p>{{ owner }}/{{ slug }} {{ branch }}@{{ hash.substring(0, 7) }}</p>
         <p>© Rinth, Inc.</p>
       </div>
       <div class="links links-1" role="region" aria-label="Legal">
@@ -343,6 +366,7 @@ export default {
       hash: process.env.hash || 'unknown',
       isMobileMenuOpen: false,
       registeredSkipLink: null,
+      moderationNotifications: 0,
     }
   },
   async fetch() {
@@ -351,6 +375,19 @@ export default {
       this.$store.dispatch('tag/fetchAllTags'),
       this.$store.dispatch('cosmetics/fetchCosmetics', this.$cookies),
     ])
+    if (
+      (this.$auth.user && this.$auth.user.role === 'moderator') ||
+      this.$auth.user.role === 'admin'
+    ) {
+      const [projects, reports] = (
+        await Promise.all([
+          this.$axios.get(`moderation/projects`, this.$auth.headers),
+          this.$axios.get(`report`, this.$auth.headers),
+        ])
+      ).map((it) => it.data)
+
+      this.moderationNotifications = projects.length + reports.length
+    }
   },
   computed: {
     authUrl() {
@@ -416,6 +453,16 @@ export default {
     removeFocus() {
       document.activeElement.blur() // This doesn't work, sadly. Help
     },
+    async getModerationCount() {
+      const [projects, reports] = (
+        await Promise.all([
+          this.$axios.get(`moderation/projects`, this.$auth.headers),
+          this.$axios.get(`report`, this.$auth.headers),
+        ])
+      ).map((it) => it.data)
+
+      return projects.length + reports.length
+    },
   },
 }
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 616cc404..9fcbf7fc 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -271,7 +271,7 @@ export default {
     breaks: false,
   },
   loading: {
-    color: 'green',
+    color: '#1bd96a',
     height: '2px',
   },
   env: {
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index 99361d43..953f45fd 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -139,8 +139,11 @@
       </div>
       <div
         v-if="
-          currentMember &&
-          (project.status === 'processing' ||
+          (currentMember ||
+            ($auth.user &&
+              ($auth.user.role === 'moderator' ||
+                $auth.user.role === 'admin'))) &&
+          (project.status !== 'approved' ||
             (project.moderator_message &&
               (project.moderator_message.message ||
                 project.moderator_message.body)))
@@ -193,22 +196,44 @@
         </div>
         <div class="buttons">
           <button
-            v-if="
-              project.status !== 'processing' && project.status !== 'approved'
-            "
-            class="iconified-button"
+            v-if="project.status === 'rejected'"
+            class="iconified-button brand-button-colors"
             @click="submitForReview"
           >
-            Resubmit for approval
+            <CheckIcon />
+            Resubmit for review
+          </button>
+          <button
+            v-if="project.status === 'draft'"
+            class="iconified-button brand-button-colors"
+            @click="submitForReview"
+          >
+            <CheckIcon />
+            Submit for review
           </button>
           <button
             v-if="project.status === 'approved'"
             class="iconified-button"
             @click="clearMessage"
           >
+            <ClearIcon />
             Clear message
           </button>
         </div>
+        <div v-if="showKnownErrors" class="known-errors">
+          <ul>
+            <li v-if="project.body === ''">
+              Your project must have a body to submit for review.
+            </li>
+            <li v-if="project.versions.length < 1">
+              Your project must have at least one version to submit for review.
+            </li>
+          </ul>
+        </div>
+        <p v-if="project.status === 'rejected'">
+          Do not resubmit for review until you've addressed the moderator
+          message!
+        </p>
       </div>
       <div class="extra-info card">
         <template
@@ -344,6 +369,12 @@
             class="featured-version"
           >
             <a
+              v-tooltip="
+                findPrimary(version).filename +
+                ' (' +
+                $formatBytes(findPrimary(version).size) +
+                ')'
+              "
               :href="findPrimary(version).url"
               class="download"
               :title="`Download ${version.name}`"
@@ -365,7 +396,11 @@
               >
                 {{
                   version.loaders
-                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .map((x) =>
+                      x.toLowerCase() === 'modloader'
+                        ? 'ModLoader'
+                        : x.charAt(0).toUpperCase() + x.slice(1)
+                    )
                     .join(', ')
                 }}
                 {{ $formatVersion(version.game_versions) }}
@@ -485,7 +520,7 @@
               <span>Changelog</span>
             </nuxt-link>
             <nuxt-link
-              v-if="project.versions.length > 0"
+              v-if="project.versions.length > 0 || currentMember"
               :to="`/${project.project_type}/${
                 project.slug ? project.slug : project.id
               }/versions`"
@@ -531,6 +566,8 @@
 
 <script>
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
+import CheckIcon from '~/assets/images/utils/check.svg?inline'
+import ClearIcon from '~/assets/images/utils/clear.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import UpdateIcon from '~/assets/images/utils/updated.svg?inline'
 import CodeIcon from '~/assets/images/sidebar/mod.svg?inline'
@@ -556,6 +593,8 @@ export default {
     IssuesIcon,
     DownloadIcon,
     CalendarIcon,
+    CheckIcon,
+    ClearIcon,
     UpdateIcon,
     CodeIcon,
     ReportIcon,
@@ -645,6 +684,11 @@ export default {
       })
     }
   },
+  data() {
+    return {
+      showKnownErrors: false,
+    }
+  },
   head() {
     return {
       title: `${this.project.title} - ${
@@ -737,28 +781,32 @@ export default {
       this.$nuxt.$loading.finish()
     },
     async submitForReview() {
-      this.$nuxt.$loading.start()
+      if (this.project.body === '' || this.project.versions.length < 1) {
+        this.showKnownErrors = true
+      } else {
+        this.$nuxt.$loading.start()
 
-      try {
-        await this.$axios.patch(
-          `project/${this.project.id}`,
-          {
-            status: 'processing',
-          },
-          this.$auth.headers
-        )
+        try {
+          await this.$axios.patch(
+            `project/${this.project.id}`,
+            {
+              status: 'processing',
+            },
+            this.$auth.headers
+          )
 
-        this.project.status = 'processing'
-      } catch (err) {
-        this.$notify({
-          group: 'main',
-          title: 'An error occurred',
-          text: err.response.data.description,
-          type: 'error',
-        })
+          this.project.status = 'processing'
+        } catch (err) {
+          this.$notify({
+            group: 'main',
+            title: 'An error occurred',
+            text: err.response.data.description,
+            type: 'error',
+          })
+        }
+
+        this.$nuxt.$loading.finish()
       }
-
-      this.$nuxt.$loading.finish()
     },
   },
 }
diff --git a/pages/_type/_id/edit.vue b/pages/_type/_id/edit.vue
index c1d19c28..f296af22 100644
--- a/pages/_type/_id/edit.vue
+++ b/pages/_type/_id/edit.vue
@@ -1,46 +1,77 @@
 <template>
   <div class="page-contents">
-    <header class="card columns">
-      <h3 class="column-grow-1">Edit project</h3>
-      <nuxt-link
-        :to="`/${project.project_type}/${
-          project.slug ? project.slug : project.id
-        }/settings`"
-        class="iconified-button column"
-      >
-        Back
-      </nuxt-link>
-      <button
-        v-if="
-          project.status === 'rejected' ||
-          project.status === 'draft' ||
-          project.status === 'unlisted'
-        "
-        title="Submit for approval"
-        class="iconified-button column"
-        :disabled="!$nuxt.$loading"
-        @click="saveProjectReview"
-      >
-        Submit for approval
-      </button>
-      <button
-        title="Save"
-        class="iconified-button brand-button-colors column"
-        :disabled="!$nuxt.$loading"
-        @click="saveProject"
-      >
-        <CheckIcon />
-        Save
-      </button>
+    <header class="card">
+      <div class="columns">
+        <h3 class="column-grow-1">Edit project</h3>
+        <nuxt-link
+          :to="`/${project.project_type}/${
+            project.slug ? project.slug : project.id
+          }/settings`"
+          class="iconified-button column"
+        >
+          <CrossIcon />
+          Cancel
+        </nuxt-link>
+        <button
+          v-if="
+            project.status === 'rejected' ||
+            project.status === 'draft' ||
+            project.status === 'unlisted'
+          "
+          title="Submit for review"
+          class="iconified-button column"
+          :disabled="!$nuxt.$loading"
+          @click="saveProjectReview"
+        >
+          <CheckIcon />
+          Submit for review
+        </button>
+        <button
+          title="Save"
+          class="iconified-button brand-button-colors column"
+          :disabled="!$nuxt.$loading"
+          @click="saveProjectNotForReview"
+        >
+          <SaveIcon />
+          Save changes
+        </button>
+      </div>
+      <div v-if="showKnownErrors" class="known-errors">
+        <ul>
+          <li v-if="newProject.title === ''">Your project must have a name.</li>
+          <li v-if="newProject.description === ''">
+            Your project must have a summary.
+          </li>
+          <li v-if="newProject.slug === ''">
+            Your project must have a vanity URL.
+          </li>
+          <li v-if="!savingAsDraft && newProject.body === ''">
+            Your project must have a body to submit for review.
+          </li>
+          <li v-if="!savingAsDraft && project.versions.length < 1">
+            Your project must have at least one version to submit for review.
+          </li>
+          <li
+            v-if="
+              license === null || license_url === null || license_url === ''
+            "
+          >
+            Your project must have a license.
+          </li>
+        </ul>
+      </div>
     </header>
     <section class="card essentials">
-      <h3>Name<span class="required">*</span></h3>
       <label>
         <span>
-          Be creative! Generic project names will be harder to search for.
+          <h3>Name<span class="required">*</span></h3>
+          <span>
+            Be creative! Generic project names will be harder to search for.
+          </span>
         </span>
         <input
           v-model="newProject.title"
+          :class="{ 'known-error': newProject.title === '' && showKnownErrors }"
           type="text"
           placeholder="Enter the name"
           :disabled="
@@ -48,14 +79,19 @@
           "
         />
       </label>
-      <h3>Summary<span class="required">*</span></h3>
       <label>
         <span>
-          Give a short description of your project that will appear on search
-          pages.
+          <h3>Summary<span class="required">*</span></h3>
+          <span>
+            Give a short description of your project that will appear on search
+            pages.
+          </span>
         </span>
         <input
           v-model="newProject.description"
+          :class="{
+            'known-error': newProject.description === '' && showKnownErrors,
+          }"
           type="text"
           placeholder="Enter the summary"
           :disabled="
@@ -63,11 +99,13 @@
           "
         />
       </label>
-      <h3>Categories</h3>
       <label>
-        <span class="no-padding">
-          Select up to 3 categories that will help others <br />
-          find your project.
+        <span>
+          <h3>Categories</h3>
+          <span class="no-padding">
+            Select up to 3 categories that will help others <br />
+            find your project.
+          </span>
         </span>
         <Multiselect
           id="categories"
@@ -77,6 +115,9 @@
               .filter((x) => x.project_type === project.project_type)
               .map((it) => it.name)
           "
+          :custom-label="
+            (value) => value.charAt(0).toUpperCase() + value.slice(1)
+          "
           :loading="$tag.categories.length === 0"
           :multiple="true"
           :searchable="false"
@@ -93,23 +134,28 @@
           "
         />
       </label>
-      <h3>Vanity URL (slug)<span class="required">*</span></h3>
-      <label>
+      <label class="vertical-input">
         <span>
-          Set this to something that will looks nice in your project's URL.
+          <h3>Vanity URL (slug)<span class="required">*</span></h3>
+          <span class="slug-description"
+            >https://modrinth.com/{{ newProject.project_type.toLowerCase() }}/{{
+              newProject.slug ? newProject.slug : 'your-slug'
+            }}
+          </span>
         </span>
         <input
           id="name"
           v-model="newProject.slug"
+          :class="{ 'known-error': newProject.slug === '' && showKnownErrors }"
           type="text"
-          placeholder="Enter the vanity URL slug"
+          placeholder="Enter the vanity URL"
           :disabled="
             (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
           "
         />
       </label>
     </section>
-    <section class="card project-icon rows">
+    <section class="card project-icon">
       <h3>Icon</h3>
       <img
         :src="
@@ -121,7 +167,9 @@
         "
         alt="preview-image"
       />
-      <file-input
+      <SmartFileInput
+        :max-size="262144"
+        :show-icon="false"
         accept="image/png,image/jpeg,image/gif,image/webp"
         class="choose-image"
         prompt="Choose image or drag it here"
@@ -142,15 +190,22 @@
       </button>
     </section>
     <section class="card game-sides">
-      <h3>Supported environments</h3>
       <div class="columns">
-        <span> Let others know what environments your project supports. </span>
+        <div>
+          <h3>Supported environments</h3>
+          <span>
+            Let others know what environments your project supports.
+          </span>
+        </div>
         <div class="labeled-control">
           <h3>Client<span class="required">*</span></h3>
           <Multiselect
             v-model="clientSideType"
             placeholder="Select one"
             :options="sideTypes"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
             :searchable="false"
             :close-on-select="true"
             :show-labels="false"
@@ -166,6 +221,9 @@
             v-model="serverSideType"
             placeholder="Select one"
             :options="sideTypes"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
             :searchable="false"
             :close-on-select="true"
             :show-labels="false"
@@ -183,19 +241,20 @@
           for="body"
           title="You can type an extended description of your project here."
         >
-          Description
+          Body<span class="required">*</span>
         </label>
       </h3>
       <span>
         You can type an extended description of your mod here. This editor
-        supports Markdown. Its syntax can be found
+        supports
         <a
+          class="text-link"
           href="https://guides.github.com/features/mastering-markdown/"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-link"
-          >here</a
-        >.
+          >Markdown</a
+        >. HTML can also be used inside your description, not including styles,
+        scripts, and iframes (though YouTube iframes are allowed).
       </span>
       <ThisOrThat
         v-model="bodyViewMode"
@@ -207,6 +266,9 @@
           <textarea
             id="body"
             v-model="newProject.body"
+            :class="{
+              'known-error': newProject.body === '' && showKnownErrors,
+            }"
             :disabled="(currentMember.permissions & EDIT_BODY) !== EDIT_BODY"
           />
         </div>
@@ -297,10 +359,11 @@
         <div class="input-group">
           <Multiselect
             v-model="license"
-            placeholder="Select one"
+            placeholder="Choose license..."
             track-by="short"
             label="short"
             :options="$tag.licenses"
+            :custom-label="(value) => value.short.toUpperCase()"
             :searchable="true"
             :close-on-select="true"
             :show-labels="false"
@@ -365,7 +428,7 @@
           "
         >
           <TrashIcon />
-          Remove Link
+          Remove link
         </button>
         <hr
           v-if="
@@ -381,21 +444,25 @@
 <script>
 import Multiselect from 'vue-multiselect'
 
-import TrashIcon from '~/assets/images/utils/trash.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
 import CheckIcon from '~/assets/images/utils/check.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
+import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 
-import FileInput from '~/components/ui/FileInput'
 import ThisOrThat from '~/components/ui/ThisOrThat'
+import SmartFileInput from '~/components/ui/SmartFileInput'
 
 export default {
   components: {
-    FileInput,
+    SmartFileInput,
     ThisOrThat,
     Multiselect,
-    TrashIcon,
+    CrossIcon,
     CheckIcon,
     PlusIcon,
+    SaveIcon,
+    TrashIcon,
   },
   beforeRouteLeave(to, from, next) {
     if (
@@ -444,6 +511,9 @@ export default {
 
       isEditing: true,
       bodyViewMode: 'source',
+
+      showKnownErrors: false,
+      savingAsDraft: false,
     }
   },
   fetch() {
@@ -514,9 +584,38 @@ export default {
     this.DELETE_PROJECT = 1 << 7
   },
   methods: {
+    checkFields() {
+      const reviewConditions =
+        this.newProject.body !== '' && this.newProject.versions.length > 0
+      if (
+        this.newProject.name !== '' &&
+        this.newProject.description !== '' &&
+        this.newProject.slug !== '' &&
+        this.license.short !== null &&
+        this.license_url !== null &&
+        this.license_url !== ''
+      ) {
+        if (this.savingAsDraft) {
+          return true
+        } else if (reviewConditions) {
+          return true
+        }
+      }
+      this.showKnownErrors = true
+      return false
+    },
     async saveProjectReview() {
-      this.isProcessing = true
-      await this.saveProject()
+      this.savingAsDraft = false
+      if (this.checkFields()) {
+        this.isProcessing = true
+        await this.saveProject()
+      }
+    },
+    async saveProjectNotForReview() {
+      this.savingAsDraft = true
+      if (this.checkFields()) {
+        await this.saveProject()
+      }
     },
     async saveProject() {
       this.$nuxt.$loading.start()
@@ -709,6 +808,15 @@ header {
 
 section.essentials {
   grid-area: essentials;
+  label {
+    margin-bottom: 0.5rem;
+  }
+
+  @media screen and (min-width: 1024px) {
+    input {
+      margin-left: 1.5rem;
+    }
+  }
 }
 
 section.project-icon {
@@ -716,12 +824,11 @@ section.project-icon {
 
   img {
     max-width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: 0.25rem;
     border-radius: var(--size-rounded-lg);
   }
 
   .iconified-button {
-    width: 9rem;
     margin-top: 0.5rem;
   }
 }
@@ -732,12 +839,11 @@ section.game-sides {
   .columns {
     flex-wrap: wrap;
 
-    span {
+    div {
       flex: 2;
     }
 
     .labeled-control {
-      flex: 2;
       margin-left: var(--spacing-card-lg);
 
       h3 {
@@ -818,4 +924,15 @@ section.donations {
 .required {
   color: var(--color-badge-red-bg);
 }
+
+.vertical-input {
+  flex-direction: column;
+  justify-content: left;
+  align-items: unset;
+  gap: 0.5rem;
+
+  input {
+    margin-left: 0 !important;
+  }
+}
 </style>
diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue
index ef396790..7342cf4e 100644
--- a/pages/_type/_id/gallery.vue
+++ b/pages/_type/_id/gallery.vue
@@ -65,20 +65,18 @@
         </div>
       </div>
     </div>
-    <div v-if="currentMember" class="card buttons">
+    <div v-if="currentMember" class="card buttons header-buttons">
       <button
-        class="iconified-button"
-        @click="
-          newGalleryItems.push({
-            title: '',
-            description: '',
-            featured: false,
-            url: '',
-          })
+        v-if="
+          newGalleryItems.length > 0 ||
+          editGalleryIndexes.length > 0 ||
+          deleteGalleryUrls.length > 0
         "
+        class="action iconified-button"
+        @click="resetGallery"
       >
-        <UploadIcon />
-        Upload
+        <CrossIcon />
+        Cancel
       </button>
       <button
         v-if="
@@ -90,19 +88,21 @@
         @click="saveGallery"
       >
         <CheckIcon />
-        Save
+        Save changes
       </button>
       <button
-        v-if="
-          newGalleryItems.length > 0 ||
-          editGalleryIndexes.length > 0 ||
-          deleteGalleryUrls.length > 0
+        class="iconified-button"
+        @click="
+          newGalleryItems.push({
+            title: '',
+            description: '',
+            featured: false,
+            url: '',
+          })
         "
-        class="action iconified-button"
-        @click="resetGallery"
       >
-        <TrashIcon />
-        Discard Changes
+        <PlusIcon />
+        Add an image
       </button>
     </div>
     <div class="items">
@@ -177,7 +177,7 @@
               "
             >
               <TrashIcon />
-              Delete
+              Remove
             </button>
           </div>
         </div>
@@ -214,6 +214,7 @@
         </div>
         <div class="gallery-bottom">
           <SmartFileInput
+            :max-size="5242880"
             accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
             prompt="Choose image or drag it here"
             @change="(files) => showPreviewImage(files, index)"
@@ -225,7 +226,7 @@
                 @click="newGalleryItems.splice(index, 1)"
               >
                 <TrashIcon />
-                Delete
+                Remove
               </button>
             </div>
           </div>
@@ -236,7 +237,7 @@
 </template>
 
 <script>
-import UploadIcon from '~/assets/images/utils/upload.svg?inline'
+import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import CrossIcon from '~/assets/images/utils/x.svg?inline'
@@ -254,7 +255,7 @@ import Checkbox from '~/components/ui/Checkbox'
 export default {
   components: {
     CalendarIcon,
-    UploadIcon,
+    PlusIcon,
     Checkbox,
     EditIcon,
     TrashIcon,
@@ -615,7 +616,7 @@ export default {
     }
 
     input {
-      width: calc(100% - 2rem - 4px);
+      width: 100%;
       margin: 0 0 0.25rem;
     }
 
@@ -663,6 +664,15 @@ export default {
     .gallery-buttons {
       display: flex;
     }
+
+    .columns {
+      margin-bottom: 0.5rem;
+    }
   }
 }
+
+.header-buttons {
+  display: flex;
+  justify-content: right;
+}
 </style>
diff --git a/pages/_type/_id/settings.vue b/pages/_type/_id/settings.vue
index 8ae90df0..3411b83e 100644
--- a/pages/_type/_id/settings.vue
+++ b/pages/_type/_id/settings.vue
@@ -12,31 +12,46 @@
     <div class="card">
       <h3>General</h3>
     </div>
-    <section class="card">
-      <h3>Edit project</h3>
-      <label>
-        <span> This leads you to a page where you can edit your project. </span>
-        <nuxt-link class="iconified-button" to="edit">Edit</nuxt-link>
-      </label>
-      <h3>Create version</h3>
+    <section class="card main-settings">
       <label>
         <span>
-          This leads to a page where you can create a version for your project.
+          <h3>Edit project</h3>
+          <span>
+            This leads you to a page where you can edit your project.
+          </span>
         </span>
-        <nuxt-link
-          class="iconified-button"
-          to="version/create"
-          :disabled="
-            (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
-          "
-          >Create version</nuxt-link
-        >
+        <div>
+          <nuxt-link class="iconified-button" to="edit"
+            ><EditIcon />Edit</nuxt-link
+          >
+        </div>
       </label>
-      <h3>Delete project</h3>
       <label>
         <span>
-          Removes your project from Modrinth's servers and search. Clicking on
-          this will delete your project, so be extra careful!
+          <h3>Create a version</h3>
+          <span>
+            This leads to a page where you can create a version for your
+            project.
+          </span>
+        </span>
+        <div>
+          <nuxt-link
+            class="iconified-button"
+            to="version/create"
+            :disabled="
+              (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
+            "
+            ><PlusIcon />Create a version</nuxt-link
+          >
+        </div>
+      </label>
+      <label>
+        <span>
+          <h3>Delete project</h3>
+          <span>
+            Removes your project from Modrinth's servers and search. Clicking on
+            this will delete your project, so be extra careful!
+          </span>
         </span>
         <div
           class="iconified-button"
@@ -45,7 +60,7 @@
           "
           @click="showPopup"
         >
-          Delete project
+          <TrashIcon />Delete project
         </div>
       </label>
     </section>
@@ -81,14 +96,17 @@
         <div class="info">
           <img :src="member.avatar_url" :alt="member.name" />
           <div class="text">
-            <h4>{{ member.name }}</h4>
-            <h3>{{ member.role }}</h3>
+            <nuxt-link :to="'/user/' + member.user.username" class="name">
+              <p class="title-link">{{ member.name }}</p>
+            </nuxt-link>
+            <p>{{ member.role }}</p>
           </div>
         </div>
         <div class="side-buttons">
           <Badge v-if="member.accepted" type="accepted" color="green" />
           <Badge v-else type="pending" color="yellow" />
           <button
+            v-if="member.role !== 'Owner'"
             class="dropdown-icon"
             @click="
               openTeamMembers.indexOf(member.user.id) === -1
@@ -109,22 +127,21 @@
             <input
               v-model="allTeamMembers[index].role"
               type="text"
+              :class="{ 'known-error': member.role === 'Owner' }"
               :disabled="
-                member.role === 'Owner' ||
                 (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
               "
             />
           </label>
+          <ul v-if="member.role === 'Owner'" class="known-errors">
+            <li>A project can only have one 'Owner'.</li>
+          </ul>
         </div>
         <h3>Permissions</h3>
         <div class="permissions">
           <Checkbox
-            :value="
-              (member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
             "
@@ -132,12 +149,8 @@
             @input="allTeamMembers[index].permissions ^= UPLOAD_VERSION"
           />
           <Checkbox
-            :value="
-              (member.permissions & DELETE_VERSION) === DELETE_VERSION ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & DELETE_VERSION) === DELETE_VERSION"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & DELETE_VERSION) !== DELETE_VERSION
             "
@@ -145,12 +158,8 @@
             @input="allTeamMembers[index].permissions ^= DELETE_VERSION"
           />
           <Checkbox
-            :value="
-              (member.permissions & EDIT_DETAILS) === EDIT_DETAILS ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
             "
@@ -158,12 +167,8 @@
             @input="allTeamMembers[index].permissions ^= EDIT_DETAILS"
           />
           <Checkbox
-            :value="
-              (member.permissions & EDIT_BODY) === EDIT_BODY ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & EDIT_BODY) === EDIT_BODY"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & EDIT_BODY) !== EDIT_BODY
             "
@@ -171,12 +176,8 @@
             @input="allTeamMembers[index].permissions ^= EDIT_BODY"
           />
           <Checkbox
-            :value="
-              (member.permissions & MANAGE_INVITES) === MANAGE_INVITES ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & MANAGE_INVITES) === MANAGE_INVITES"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & MANAGE_INVITES) !== MANAGE_INVITES
             "
@@ -184,12 +185,8 @@
             @input="allTeamMembers[index].permissions ^= MANAGE_INVITES"
           />
           <Checkbox
-            :value="
-              (member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & REMOVE_MEMBER) !== REMOVE_MEMBER
             "
@@ -197,24 +194,16 @@
             @input="allTeamMembers[index].permissions ^= REMOVE_MEMBER"
           />
           <Checkbox
-            :value="
-              (member.permissions & EDIT_MEMBER) === EDIT_MEMBER ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
             "
             label="Edit member"
             @input="allTeamMembers[index].permissions ^= EDIT_MEMBER"
           />
           <Checkbox
-            :value="
-              (member.permissions & DELETE_PROJECT) === DELETE_PROJECT ||
-              member.role === 'Owner'
-            "
+            :value="(member.permissions & DELETE_PROJECT) === DELETE_PROJECT"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
               (currentMember.permissions & DELETE_PROJECT) !== DELETE_PROJECT
             "
@@ -226,7 +215,6 @@
           <button
             class="iconified-button"
             :disabled="
-              member.role === 'Owner' ||
               (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
             "
             @click="removeTeamMember(index)"
@@ -249,7 +237,8 @@
           <button
             class="iconified-button brand-button-colors"
             :disabled="
-              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              member.role === 'Owner'
             "
             @click="updateTeamMember(index)"
           >
@@ -270,6 +259,7 @@ import Badge from '~/components/ui/Badge'
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import CheckIcon from '~/assets/images/utils/check.svg?inline'
+import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
 import UserIcon from '~/assets/images/utils/user.svg?inline'
 
@@ -281,6 +271,7 @@ export default {
     Badge,
     PlusIcon,
     CheckIcon,
+    EditIcon,
     TrashIcon,
     UserIcon,
   },
@@ -480,17 +471,12 @@ export default {
       }
       .text {
         margin: auto 0 auto 0.5rem;
-        h4 {
-          font-weight: normal;
-          margin: 0;
+        font-size: var(--font-size-sm);
+        .name {
+          font-weight: bold;
         }
-        h3 {
-          text-transform: uppercase;
-          margin-top: 0.1rem;
-          margin-bottom: 0;
-          font-size: var(--font-size-sm);
-          font-weight: var(--font-weight-extrabold);
-          letter-spacing: 0.02rem;
+        p {
+          margin: 0.2rem 0;
         }
       }
     }
@@ -571,28 +557,19 @@ section {
       padding-right: var(--spacing-card-lg);
     }
 
+    div {
+      flex: none;
+    }
+
     input {
       flex: 3;
       height: fit-content;
     }
-
-    div,
-    a {
-      display: block;
-      text-align: center;
-      height: fit-content;
-      flex: 1;
-      @media screen and (max-width: 1024px) {
-        margin: 0.5rem 0 1rem 0;
-      }
-    }
-    div:hover {
-      cursor: pointer;
-    }
   }
 }
 
 .team-invite {
+  gap: 0.5rem;
   @media screen and (max-width: 1024px) {
     flex-direction: column;
     h3 {
@@ -638,4 +615,8 @@ section {
     }
   }
 }
+
+.main-settings span {
+  margin-bottom: 1rem;
+}
 </style>
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index 8d2dca8f..b18d45ba 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -42,49 +42,52 @@
           Auto-featured
         </div>
       </div>
-      <div v-if="mode === 'edit'" class="buttons">
-        <button
-          class="action iconified-button brand-button-colors"
-          @click="saveEditedVersion"
-        >
-          <CheckIcon aria-hidden="true" />
-          Save
-        </button>
+      <div v-if="mode === 'edit'" class="header-buttons buttons">
         <nuxt-link
           v-if="$auth.user"
           :to="`/${project.project_type}/${
             project.slug ? project.slug : project.id
           }/version/${encodeURIComponent(version.version_number)}`"
-          class="action iconified-button"
+          class="iconified-button"
         >
-          <TrashIcon aria-hidden="true" />
-          Discard changes
+          <CrossIcon aria-hidden="true" />
+          Cancel
         </nuxt-link>
-      </div>
-      <div v-else-if="mode === 'create'" class="buttons">
         <button
-          class="action iconified-button brand-button-colors"
-          @click="createVersion"
+          class="iconified-button brand-button-colors"
+          @click="saveEditedVersion"
         >
-          <CheckIcon aria-hidden="true" />
+          <SaveIcon aria-hidden="true" />
           Save
         </button>
+      </div>
+      <div v-else-if="mode === 'create'" class="header-buttons buttons">
         <nuxt-link
           v-if="$auth.user"
           :to="`/${project.project_type}/${
             project.slug ? project.slug : project.id
           }/versions`"
-          class="action iconified-button"
+          class="iconified-button"
         >
-          <TrashIcon aria-hidden="true" />
-          Discard version
+          <CrossIcon aria-hidden="true" />
+          Cancel
         </nuxt-link>
+        <button
+          class="iconified-button brand-button-colors"
+          @click="createVersion"
+        >
+          <CheckIcon aria-hidden="true" />
+          Create
+        </button>
       </div>
       <div v-else class="buttons">
         <a
           v-if="primaryFile"
+          v-tooltip="
+            primaryFile.filename + ' (' + $formatBytes(primaryFile.size) + ')'
+          "
           :href="primaryFile.url"
-          class="action iconified-button brand-button-colors"
+          class="bold-button iconified-button brand-button-colors"
           :title="`Download ${primaryFile.filename}`"
         >
           <DownloadIcon aria-hidden="true" />
@@ -124,6 +127,7 @@
       >
         <input
           v-model="version.name"
+          class="full-width-input"
           type="text"
           placeholder="Enter the version name..."
         />
@@ -179,6 +183,9 @@
               class="input"
               placeholder="Select one"
               :options="['release', 'beta', 'alpha']"
+              :custom-label="
+                (value) => value.charAt(0).toUpperCase() + value.slice(1)
+              "
               :searchable="false"
               :close-on-select="true"
               :show-labels="false"
@@ -217,6 +224,12 @@
                   )
                   .map((it) => it.name)
               "
+              :custom-label="
+                (value) =>
+                  value === 'modloader'
+                    ? 'Risugami\'s ModLoader'
+                    : value.charAt(0).toUpperCase() + value.slice(1)
+              "
               :loading="$tag.loaders.length === 0"
               :multiple="true"
               :searchable="false"
@@ -231,7 +244,11 @@
             <p v-else class="value">
               {{
                 version.loaders
-                  .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                  .map((x) =>
+                    x.toLowerCase() === 'modloader'
+                      ? "Risugami's ModLoader"
+                      : x.charAt(0).toUpperCase() + x.slice(1)
+                  )
                   .join(', ')
               }}
             </p>
@@ -381,7 +398,7 @@
                   class="iconified-button"
                   @click="version.dependencies.splice(index, 1)"
                 >
-                  <TrashIcon /> Delete
+                  <TrashIcon /> Remove
                 </button>
               </div>
             </div>
@@ -401,13 +418,19 @@
               v-model="newDependencyId"
               type="text"
               oninput="this.value = this.value.replace(' ', '')"
-              :placeholder="`Enter the ${dependencyAddMode} ID...`"
+              :placeholder="`Enter the ${dependencyAddMode} ID${
+                dependencyAddMode === 'project' ? '/slug' : ''
+              }`"
+              @keyup.enter="addDependency"
             />
             <Multiselect
               v-model="newDependencyType"
               class="input"
               placeholder="Select one"
               :options="['required', 'optional', 'incompatible']"
+              :custom-label="
+                (value) => value.charAt(0).toUpperCase() + value.slice(1)
+              "
               :searchable="false"
               :close-on-select="true"
               :show-labels="false"
@@ -415,7 +438,7 @@
             />
             <button class="iconified-button" @click="addDependency">
               <PlusIcon />
-              Add dependency
+              Add
             </button>
           </div>
         </div>
@@ -456,7 +479,9 @@
           :key="file.hashes.sha1"
           class="file"
         >
-          <p class="filename">{{ file.filename }}</p>
+          <p class="filename">
+            {{ file.filename }}
+          </p>
           <div
             v-if="primaryFile.hashes.sha1 === file.hashes.sha1"
             class="featured"
@@ -473,6 +498,7 @@
             <DownloadIcon aria-hidden="true" />
             Download
           </a>
+          <p v-if="mode === 'version'">({{ $formatBytes(file.size) }})</p>
           <button
             v-if="mode === 'edit'"
             class="action iconified-button"
@@ -482,7 +508,7 @@
             "
           >
             <TrashIcon aria-hidden="true" />
-            Delete
+            Remove
           </button>
           <button
             v-if="
@@ -507,7 +533,7 @@
               @click="newFiles.splice(index, 1)"
             >
               <TrashIcon aria-hidden="true" />
-              Delete
+              Remove
             </button>
           </div>
         </div>
@@ -517,6 +543,7 @@
           class="choose-files"
           accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
           prompt="Choose files or drag them here"
+          :max-size="524288000"
           @change="(x) => x.forEach((y) => newFiles.push(y))"
         />
       </section>
@@ -531,7 +558,9 @@ import StatelessFileInput from '~/components/ui/StatelessFileInput'
 
 import InfoIcon from '~/assets/images/utils/info.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
 import EditIcon from '~/assets/images/utils/edit.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
@@ -556,7 +585,9 @@ export default {
     StarIcon,
     CheckIcon,
     Multiselect,
+    SaveIcon,
     PlusIcon,
+    CrossIcon,
     StatelessFileInput,
     InfoIcon,
   },
@@ -951,22 +982,22 @@ section {
   }
 }
 
+.header-buttons {
+  justify-content: right;
+}
+
 .buttons {
   display: flex;
   flex-wrap: wrap;
   row-gap: 0.5rem;
 
-  .brand-button-colors {
+  .bold-button {
     font-weight: bold;
   }
 
   @media screen and (min-width: 1024px) {
     margin-left: auto;
   }
-
-  .action:not(:first-child) {
-    margin: 0 0 0 0.5rem;
-  }
 }
 
 .version-data-inputs {
@@ -1005,8 +1036,7 @@ section {
 
       input {
         margin: 0;
-        height: 1.25rem;
-        width: calc(100% - 2.25rem);
+        width: 100%;
       }
     }
   }
@@ -1129,4 +1159,9 @@ section {
   min-height: 10rem;
   display: block;
 }
+
+.full-width-input {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
 </style>
diff --git a/pages/_type/_id/versions.vue b/pages/_type/_id/versions.vue
index 699e1faa..2b9caaee 100644
--- a/pages/_type/_id/versions.vue
+++ b/pages/_type/_id/versions.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="content">
-    <div class="card" v-if="currentMember">
-      <nuxt-link to="version/create" class="iconified-button new-version">
-        <UploadIcon />
-        Upload
+    <div v-if="currentMember" class="card header-buttons">
+      <nuxt-link
+        to="version/create"
+        class="brand-button-colors iconified-button"
+      >
+        <PlusIcon />
+        Create a version
       </nuxt-link>
     </div>
     <VersionFilterControl
@@ -11,7 +14,7 @@
       :versions="versions"
       @updateVersions="updateVersions"
     />
-    <div class="card">
+    <div v-if="versions.length > 0" class="card">
       <table>
         <thead>
           <tr>
@@ -25,6 +28,12 @@
           <tr v-for="version in filteredVersions" :key="version.id">
             <td>
               <a
+                v-tooltip="
+                  $parent.findPrimary(version).filename +
+                  ' (' +
+                  $formatBytes($parent.findPrimary(version).size) +
+                  ')'
+                "
                 :href="$parent.findPrimary(version).url"
                 class="download-button"
                 :class="version.version_type"
@@ -69,7 +78,11 @@
                   <p>
                     {{
                       version.loaders
-                        .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                        .map((x) =>
+                          x.toLowerCase() === 'modloader'
+                            ? 'ModLoader'
+                            : x.charAt(0).toUpperCase() + x.slice(1)
+                        )
                         .join(', ') +
                       ' ' +
                       $formatVersion(version.game_versions)
@@ -93,7 +106,11 @@
               <p>
                 {{
                   version.loaders
-                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .map((x) =>
+                      x.toLowerCase() === 'modloader'
+                        ? 'ModLoader'
+                        : x.charAt(0).toUpperCase() + x.slice(1)
+                    )
                     .join(', ')
                 }}
               </p>
@@ -118,14 +135,14 @@
   </div>
 </template>
 <script>
-import UploadIcon from '~/assets/images/utils/upload.svg?inline'
+import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import VersionBadge from '~/components/ui/Badge'
 import VersionFilterControl from '~/components/ui/VersionFilterControl'
 
 export default {
   components: {
-    UploadIcon,
+    PlusIcon,
     DownloadIcon,
     VersionBadge,
     VersionFilterControl,
@@ -165,10 +182,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.new-version {
-  max-width: 5.25rem;
-}
-
 table {
   border-collapse: separate;
   border-spacing: 0 0.75rem;
@@ -249,4 +262,9 @@ table {
     display: none;
   }
 }
+
+.header-buttons {
+  display: flex;
+  justify-content: right;
+}
 </style>
diff --git a/pages/create/project.vue b/pages/create/project.vue
index c56f58a6..ceb8c7c2 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -1,30 +1,61 @@
 <template>
   <div class="page-container">
     <div class="page-contents">
-      <header class="card columns">
-        <h3 class="column-grow-1">Create a project</h3>
-        <button
-          title="Save draft"
-          class="iconified-button column"
-          :disabled="!$nuxt.$loading"
-          @click="createDraft"
-        >
-          Save draft
-        </button>
-        <button
-          title="Submit for review"
-          class="iconified-button brand-button-colors column"
-          :disabled="!$nuxt.$loading"
-          @click="createProject"
-        >
-          <CheckIcon />
-          Submit for review
-        </button>
+      <header class="card">
+        <div class="columns">
+          <h3 class="column-grow-1">Create a project</h3>
+          <button
+            title="Save draft"
+            class="iconified-button column"
+            :disabled="!$nuxt.$loading"
+            @click="createDraft"
+          >
+            <SaveIcon />
+            Save as a draft
+          </button>
+          <button
+            title="Submit for review"
+            class="iconified-button brand-button-colors column"
+            :disabled="!$nuxt.$loading"
+            @click="createProjectForReview"
+          >
+            <CheckIcon />
+            Submit for review
+          </button>
+        </div>
+        <div v-if="showKnownErrors" class="known-errors">
+          <ul>
+            <li v-if="name === ''">Your project must have a name.</li>
+            <li v-if="description === ''">Your project must have a summary.</li>
+            <li v-if="slug === ''">Your project must have a vanity URL.</li>
+            <li v-if="!savingAsDraft && body === ''">
+              Your project must have a body.
+            </li>
+            <li v-if="!savingAsDraft && versions.length < 1">
+              Your project must have at least one version.
+            </li>
+            <li
+              v-if="
+                license === null || license_url === null || license_url === ''
+              "
+            >
+              Your project must have a license.
+            </li>
+            <li v-if="currentVersionIndex !== -1">
+              You must finish editing your versions
+            </li>
+            <li v-if="currentGalleryIndex !== -1">
+              You must finish editing your gallery images
+            </li>
+          </ul>
+        </div>
       </header>
       <section class="card essentials">
-        <h3>Project type<span class="required">*</span></h3>
         <label>
-          <span class="no-padding">The project type of your project.</span>
+          <span>
+            <h3>Type<span class="required">*</span></h3>
+            <span class="no-padding">The type of project of your project.</span>
+          </span>
           <Multiselect
             v-model="projectType"
             placeholder="Select one"
@@ -35,30 +66,42 @@
             :allow-empty="false"
           />
         </label>
-        <h3>Name<span class="required">*</span></h3>
         <label>
           <span>
-            Be creative! Generic project names will be harder to search for.
+            <h3>Name<span class="required">*</span></h3>
+            <span>
+              Be creative! Generic project names will be harder to search for.
+            </span>
           </span>
-          <input v-model="name" type="text" placeholder="Enter the name" />
+          <input
+            v-model="name"
+            :class="{ 'known-error': name === '' && showKnownErrors }"
+            type="text"
+            placeholder="Enter the name"
+          />
         </label>
-        <h3>Summary<span class="required">*</span></h3>
         <label>
           <span>
-            Give a short description of your project that will appear on search
-            pages.
+            <h3>Summary<span class="required">*</span></h3>
+            <span>
+              Give a short description of your project that will appear on
+              search pages.
+            </span>
           </span>
           <input
             v-model="description"
+            :class="{ 'known-error': description === '' && showKnownErrors }"
             type="text"
             placeholder="Enter the summary"
           />
         </label>
-        <h3>Categories</h3>
         <label>
-          <span class="no-padding">
-            Select up to 3 categories that will help others <br />
-            find your project.
+          <span>
+            <h3>Categories</h3>
+            <span class="no-padding">
+              Select up to 3 categories that will help others <br />
+              find your project.
+            </span>
           </span>
           <multiselect
             id="categories"
@@ -68,6 +111,9 @@
                 .filter((x) => x.project_type === projectType.toLowerCase())
                 .map((it) => it.name)
             "
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
             :loading="$tag.categories.length === 0"
             :multiple="true"
             :searchable="false"
@@ -81,16 +127,21 @@
             placeholder="Choose categories"
           />
         </label>
-        <h3>Vanity URL (slug)<span class="required">*</span></h3>
         <label>
           <span>
-            Set this to something that will looks nice in your project's URL.
+            <h3>Vanity URL (slug)<span class="required">*</span></h3>
+            <span class="slug-description"
+              >https://modrinth.com/{{ projectType.toLowerCase() }}/{{
+                slug ? slug : 'your-slug'
+              }}
+            </span>
           </span>
           <input
             id="name"
             v-model="slug"
+            :class="{ 'known-error': slug === '' && showKnownErrors }"
             type="text"
-            placeholder="Enter the vanity URL slug"
+            placeholder="Enter the vanity URL"
           />
         </label>
       </section>
@@ -104,7 +155,9 @@
           "
           alt="preview-image"
         />
-        <file-input
+        <SmartFileInput
+          :show-icon="false"
+          :max-size="262144"
           accept="image/png,image/jpeg,image/gif,image/webp"
           class="choose-image"
           prompt="Choose image or drag it here"
@@ -122,11 +175,13 @@
         </button>
       </section>
       <section class="card game-sides">
-        <h3>Supported environments</h3>
         <div class="columns">
-          <span>
-            Let others know what environments your project supports.
-          </span>
+          <div class="column">
+            <h3>Supported environments</h3>
+            <span>
+              Let others know what environments your project supports.
+            </span>
+          </div>
           <div class="labeled-control">
             <h3>Client<span class="required">*</span></h3>
             <Multiselect
@@ -159,20 +214,20 @@
             for="body"
             title="You can type an extended description of your project here."
           >
-            Body
+            Body<span class="required">*</span>
           </label>
         </h3>
         <span>
           You can type an extended description of your mod here. This editor
-          supports Markdown. Its syntax can be found
+          supports
           <a
             class="text-link"
             href="https://guides.github.com/features/mastering-markdown/"
             target="_blank"
             rel="noopener noreferrer"
-            >here</a
-          >. HTML can also be used inside your description, excluding scripts
-          and iframes.
+            >Markdown</a
+          >. HTML can also be used inside your description, not including
+          styles, scripts, and iframes (though YouTube iframes are allowed).
         </span>
         <ThisOrThat
           v-model="bodyViewMode"
@@ -181,7 +236,11 @@
         />
         <div class="edit-wrapper">
           <div v-if="bodyViewMode === 'source'" class="textarea-wrapper">
-            <textarea id="body" v-model="body" />
+            <textarea
+              id="body"
+              v-model="body"
+              :class="{ 'known-error': body === '' && showKnownErrors }"
+            />
           </div>
           <div
             v-if="bodyViewMode === 'preview'"
@@ -193,7 +252,7 @@
       </section>
       <section class="card versions">
         <div class="title">
-          <h3>Create versions</h3>
+          <h3>Versions<span class="required">*</span></h3>
           <button
             title="Add a version"
             class="iconified-button"
@@ -204,144 +263,142 @@
             Add a version
           </button>
         </div>
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Version</th>
-              <th>Mod loader</th>
-              <th>Minecraft version</th>
-              <th>Channel</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(version, index) in versions.filter((it) =>
-                currentVersionIndex !== -1
-                  ? it !== versions[currentVersionIndex]
-                  : true
-              )"
-              :key="version.id"
-            >
-              <td>{{ version.version_title }}</td>
-              <td>{{ version.version_number }}</td>
-              <td>
-                {{
-                  version.loaders
-                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-                    .join(', ')
-                }}
-              </td>
-              <td>
-                {{
-                  version.game_versions
-                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-                    .join(', ')
-                }}
-              </td>
-              <td>
-                <VersionBadge
-                  v-if="version.release_channel === 'release'"
-                  type="release"
-                  color="green"
-                />
-                <VersionBadge
-                  v-else-if="version.release_channel === 'beta'"
-                  type="beta"
-                  color="yellow"
-                />
-                <VersionBadge
-                  v-else-if="version.release_channel === 'alpha'"
-                  type="alpha"
-                  color="red"
-                />
-              </td>
-              <td>
-                <button
-                  class="iconified-button"
-                  title="Remove version"
-                  @click="versions.splice(index, 1)"
-                >
-                  Remove
-                </button>
-                <button
-                  class="iconified-button"
-                  title="Edit version"
-                  @click="currentVersionIndex = index"
-                >
-                  Edit
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
         <div v-if="versions.length === 0" class="no-versions-warning">
-          At least 1 version is required.
+          At least 1 version is required to submit for review.
         </div>
-        <hr v-if="currentVersionIndex !== -1" />
-        <div v-if="currentVersionIndex !== -1" class="new-version">
-          <div class="controls">
-            <button
-              class="brand-button-colors iconified-button"
-              title="Save version"
-              @click="currentVersionIndex = -1"
-            >
-              Save version
-            </button>
-            <button
-              class="iconified-button"
-              title="Discard version"
-              @click="deleteVersion"
-            >
-              Discard
-            </button>
+        <div
+          v-if="currentVersionIndex !== -1"
+          class="new-version outlined-area"
+        >
+          <div class="header">
+            <h3 v-if="currentVersionNew" class="title">Add a version</h3>
+            <h3 v-else class="title">Edit version</h3>
+            <div class="controls">
+              <button
+                v-if="currentVersionNew"
+                class="iconified-button"
+                title="Cancel adding version"
+                @click="deleteVersion()"
+              >
+                <CrossIcon />
+                Cancel
+              </button>
+              <button
+                v-else
+                class="iconified-button"
+                title="Remove version"
+                @click="deleteVersion()"
+              >
+                <TrashIcon />
+                Remove
+              </button>
+              <button
+                v-if="currentVersionNew"
+                class="brand-button-colors iconified-button"
+                title="Save version"
+                @click="saveVersion()"
+              >
+                <CheckIcon />
+                Add
+              </button>
+              <button
+                v-else
+                class="brand-button-colors iconified-button"
+                title="Save version"
+                @click="saveVersion()"
+              >
+                <SaveIcon />
+                Save
+              </button>
+            </div>
+          </div>
+          <div v-if="showKnownVersionErrors" class="known-errors">
+            <ul>
+              <li v-if="versions[currentVersionIndex].version_number === ''">
+                Your version must have a unique version number.
+              </li>
+              <li v-if="versions[currentVersionIndex].loaders.length < 1">
+                Your version must have the supported mod loaders selected.
+              </li>
+              <li v-if="versions[currentVersionIndex].game_versions.length < 1">
+                Your version must have the supported Minecraft versions
+                selected.
+              </li>
+              <li v-if="versions[currentVersionIndex].files.length < 1">
+                Your version must have a file uploaded.
+              </li>
+            </ul>
           </div>
           <div class="main">
-            <h3>Name</h3>
             <label>
               <span>
-                This is what users will see first. If not specified, this will
-                default to the version number.
+                <h3>Title</h3>
+                <span>
+                  An optional nicely formatted name for this version.
+                </span>
               </span>
               <input
                 v-model="versions[currentVersionIndex].version_title"
                 type="text"
-                placeholder="Enter the name"
+                placeholder="Enter the title of this version"
               />
             </label>
-            <h3>Number<span class="required">*</span></h3>
             <label>
               <span>
-                This is how your version will appear in project lists and URLs.
+                <h3>Version number<span class="required">*</span></h3>
+                <span>
+                  A unique identifier for versions of your project, used for
+                  display and in URLs.
+                </span>
               </span>
               <input
                 v-model="versions[currentVersionIndex].version_number"
+                :class="{
+                  'known-error':
+                    versions[currentVersionIndex].version_number === '' &&
+                    showKnownVersionErrors,
+                }"
                 type="text"
-                placeholder="Enter the number"
+                placeholder="Enter the version number"
               />
             </label>
-            <h3>Channel<span class="required">*</span></h3>
             <label>
               <span>
-                It is important to notify everyone whether the version is stable
-                or if it's still in development.
+                <h3>Release channel<span class="required">*</span></h3>
+                <span>
+                  Used to indicate to users the stability of this release.
+                </span>
               </span>
               <multiselect
                 v-model="versions[currentVersionIndex].release_channel"
+                :class="{
+                  'known-error':
+                    versions[currentVersionIndex].release_channel === null &&
+                    showKnownVersionErrors,
+                }"
                 placeholder="Select one"
                 :options="['release', 'beta', 'alpha']"
+                :custom-label="
+                  (value) => value.charAt(0).toUpperCase() + value.slice(1)
+                "
                 :searchable="false"
                 :close-on-select="true"
                 :show-labels="false"
                 :allow-empty="false"
               />
             </label>
-            <h3>Mod loaders<span class="required">*</span></h3>
             <label>
-              <span> Mark all mod loaders this version works with. </span>
+              <span>
+                <h3>Mod loaders<span class="required">*</span></h3>
+                <span> Select all mod loaders this version supports. </span>
+              </span>
               <multiselect
                 v-model="versions[currentVersionIndex].loaders"
+                :class="{
+                  'known-error':
+                    versions[currentVersionIndex].loaders.length < 1 &&
+                    showKnownVersionErrors,
+                }"
                 :options="
                   $tag.loaders
                     .filter((x) =>
@@ -351,6 +408,12 @@
                     )
                     .map((it) => it.name)
                 "
+                :custom-label="
+                  (value) =>
+                    value === 'modloader'
+                      ? 'Risugami\'s ModLoader'
+                      : value.charAt(0).toUpperCase() + value.slice(1)
+                "
                 :loading="$tag.loaders.length === 0"
                 :multiple="true"
                 :searchable="false"
@@ -363,13 +426,20 @@
                 placeholder="Choose mod loaders..."
               />
             </label>
-            <h3>Minecraft versions<span class="required">*</span></h3>
             <label>
               <span>
-                Mark all Minecraft version this project's version supports.
+                <h3>Minecraft versions<span class="required">*</span></h3>
+                <span>
+                  Select all versions of Minecraft this version supports.
+                </span>
               </span>
               <multiselect
                 v-model="versions[currentVersionIndex].game_versions"
+                :class="{
+                  'known-error':
+                    versions[currentVersionIndex].game_versions.length < 1 &&
+                    showKnownVersionErrors,
+                }"
                 :options="$tag.gameVersions.map((it) => it.version)"
                 :loading="$tag.gameVersions.length === 0"
                 :multiple="true"
@@ -396,13 +466,19 @@
                 <input
                   v-model="newDependencyId"
                   type="text"
-                  :placeholder="`Enter the ${dependencyAddMode} ID...`"
+                  :placeholder="`Enter the ${dependencyAddMode} ID${
+                    dependencyAddMode === 'project' ? '/slug' : ''
+                  }`"
+                  @keyup.enter="addDependency"
                 />
                 <Multiselect
                   v-model="newDependencyType"
                   class="input"
                   placeholder="Select one"
                   :options="['required', 'optional', 'incompatible']"
+                  :custom-label="
+                    (value) => value.charAt(0).toUpperCase() + value.slice(1)
+                  "
                   :searchable="false"
                   :close-on-select="true"
                   :show-labels="false"
@@ -454,7 +530,8 @@
                         )
                       "
                     >
-                      <TrashIcon /> Delete
+                      <TrashIcon />
+                      Remove
                     </button>
                   </div>
                 </div>
@@ -463,11 +540,17 @@
           </div>
           <div class="files">
             <h3>Files<span class="required">*</span></h3>
-            <SmartFileInput
+            <StatelessFileInput
+              :class="{
+                'known-error':
+                  versions[currentVersionIndex].files.length < 1 &&
+                  showKnownVersionErrors,
+              }"
               class="file-input"
               multiple
               accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
               prompt="Choose files or drag them here"
+              :max-size="524288000"
               @change="
                 (x) =>
                   x.forEach((y) => versions[currentVersionIndex].files.push(y))
@@ -485,7 +568,7 @@
                   @click="versions[currentVersionIndex].files.splice(index, 1)"
                 >
                   <TrashIcon aria-hidden="true" />
-                  Delete
+                  Remove
                 </button>
               </div>
             </div>
@@ -493,8 +576,15 @@
           <div class="changelog">
             <h3>Changes</h3>
             <span>
-              Tell everyone what's new. It supports the same Markdown formatting
-              as the description.
+              Let everyone know what's changed since the last version. This
+              editor supports
+              <a
+                class="text-link"
+                href="https://guides.github.com/features/mastering-markdown/"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Markdown</a
+              >.
             </span>
             <ThisOrThat
               v-model="changelogViewMode"
@@ -526,29 +616,167 @@
             </div>
           </div>
         </div>
+        <table>
+          <thead>
+            <tr
+              v-if="
+                (versions.length > 0 && currentVersionIndex === -1) ||
+                versions.length > 1
+              "
+            >
+              <th>Name</th>
+              <th>Version</th>
+              <th>Mod loaders</th>
+              <th>Minecraft versions</th>
+              <th>Release channel</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(version, index) in versions.filter((it) =>
+                currentVersionIndex !== -1
+                  ? it !== versions[currentVersionIndex]
+                  : true
+              )"
+              :key="version.id"
+            >
+              <td>{{ version.version_title }}</td>
+              <td>{{ version.version_number }}</td>
+              <td>
+                {{
+                  version.loaders
+                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .join(', ')
+                }}
+              </td>
+              <td>
+                {{
+                  version.game_versions
+                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .join(', ')
+                }}
+              </td>
+              <td>
+                <VersionBadge
+                  v-if="version.release_channel === 'release'"
+                  type="release"
+                  color="green"
+                />
+                <VersionBadge
+                  v-else-if="version.release_channel === 'beta'"
+                  type="beta"
+                  color="yellow"
+                />
+                <VersionBadge
+                  v-else-if="version.release_channel === 'alpha'"
+                  type="alpha"
+                  color="red"
+                />
+              </td>
+              <td>
+                <button
+                  class="iconified-button"
+                  title="Remove version"
+                  @click="versions.splice(index, 1)"
+                >
+                  <TrashIcon />
+                  Remove
+                </button>
+                <button
+                  class="iconified-button"
+                  title="Edit version"
+                  @click="editVersion(index)"
+                >
+                  <EditIcon />
+                  Edit
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </section>
       <section class="card gallery">
         <div class="title">
           <div class="text">
-            <h3>Gallery</h3>
+            <h3>Gallery images</h3>
             <i>— this section is optional</i>
           </div>
           <button
             title="Add an image"
             class="iconified-button"
-            :disabled="false"
-            @click="gallery.push({})"
+            :disabled="currentGalleryIndex !== -1"
+            @click="createGalleryImage()"
           >
             <PlusIcon />
             Add an image
           </button>
         </div>
-        <div v-for="(item, index) in gallery" :key="index" class="gallery-item">
+        <div
+          v-if="currentGalleryIndex !== -1"
+          class="new-gallery-item outlined-area"
+        >
+          <div class="header">
+            <h3 class="title">Add an image</h3>
+            <div class="controls">
+              <button
+                v-if="currentGalleryNew"
+                class="iconified-button"
+                title="Cancel adding image"
+                @click="deleteGalleryImage()"
+              >
+                <CrossIcon />
+                Cancel
+              </button>
+              <button
+                v-else
+                class="iconified-button"
+                title="Remove image"
+                @click="deleteGalleryImage()"
+              >
+                <TrashIcon />
+                Remove
+              </button>
+              <button
+                v-if="currentGalleryNew"
+                class="brand-button-colors iconified-button"
+                title="Add image"
+                @click="saveGalleryImage()"
+              >
+                <CheckIcon />
+                Add
+              </button>
+              <button
+                v-else
+                class="brand-button-colors iconified-button"
+                title="Save image"
+                @click="saveGalleryImage()"
+              >
+                <SaveIcon />
+                Save changes
+              </button>
+            </div>
+          </div>
+          <div v-if="showKnownGalleryErrors" class="known-errors">
+            <ul>
+              <li v-if="gallery[currentGalleryIndex].title === ''">
+                Your image must have a title.
+              </li>
+              <li v-if="gallery[currentGalleryIndex].preview === null">
+                Your image must have a file uploaded.
+              </li>
+            </ul>
+          </div>
           <div class="info">
             <label title="The title of the gallery item">
               <span>Title</span>
               <input
-                v-model="item.title"
+                v-model="gallery[currentGalleryIndex].title"
+                :class="{
+                  'known-error':
+                    gallery[currentGalleryIndex].title === '' &&
+                    showKnownGalleryErrors,
+                }"
                 type="text"
                 placeholder="Enter a title"
               />
@@ -558,7 +786,7 @@
             >
               <span>Description (optional)</span>
               <input
-                v-model="item.description"
+                v-model="gallery[currentGalleryIndex].description"
                 type="text"
                 placeholder="Enter a description"
               />
@@ -567,38 +795,84 @@
           <div class="image">
             <img
               :src="
-                item.preview
-                  ? item.preview
+                gallery[currentGalleryIndex].preview
+                  ? gallery[currentGalleryIndex].preview
                   : 'https://cdn.modrinth.com/placeholder-banner.svg'
               "
               alt="preview-image"
             />
             <div class="bottom">
               <SmartFileInput
+                :max-size="5242880"
                 accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
                 prompt="Upload"
-                @change="(files) => showGalleryPreviewImage(files, index)"
-              />
-              <button
-                class="iconified-button"
-                @click="
-                  item.icon = null
-                  item.preview = null
-                  $forceUpdate()
+                :class="{
+                  'known-error':
+                    !gallery[currentGalleryIndex].preview &&
+                    showKnownGalleryErrors,
+                }"
+                @change="
+                  (files) => showGalleryPreviewImage(files, currentGalleryIndex)
                 "
-              >
-                <TrashIcon />
-                Reset
-              </button>
+              />
+              <div>
+                <button
+                  class="iconified-button"
+                  @click="
+                    gallery[currentGalleryIndex].icon = null
+                    gallery[currentGalleryIndex].preview = null
+                    $forceUpdate()
+                  "
+                >
+                  <TrashIcon />
+                  Reset
+                </button>
+              </div>
             </div>
           </div>
-          <div class="buttons">
-            <button class="iconified-button" @click="gallery.splice(index, 1)">
-              <TrashIcon />
-              Remove
-            </button>
-
-            <hr v-if="gallery.length > 0 && index !== gallery.length - 1" />
+        </div>
+        <div class="gallery-items">
+          <div
+            v-for="(item, index) in gallery.filter((it) =>
+              currentGalleryIndex === -1 || it !== gallery[currentGalleryIndex]
+                ? it !== gallery[currentGalleryIndex]
+                : true
+            )"
+            :key="index"
+            class="gallery-item"
+          >
+            <div class="info">
+              <h3>{{ item.title }}</h3>
+              <h4 v-if="item.description">{{ item.description }}</h4>
+            </div>
+            <div class="image">
+              <img
+                :src="
+                  item.preview
+                    ? item.preview
+                    : 'https://cdn.modrinth.com/placeholder-banner.svg'
+                "
+                alt="preview-image"
+              />
+            </div>
+            <div class="controls">
+              <button
+                class="iconified-button"
+                title="Edit gallery image"
+                @click="editGalleryImage(index)"
+              >
+                <EditIcon />
+                Edit
+              </button>
+              <button
+                class="iconified-button"
+                title="Remove gallery image"
+                @click="gallery.splice(index, 1)"
+              >
+                <TrashIcon />
+                Remove
+              </button>
+            </div>
           </div>
         </div>
       </section>
@@ -654,39 +928,53 @@
             <h3>License<span class="required">*</span></h3>
           </div>
         </div>
-        <label>
-          <span>
-            It is very important to choose a proper license for your mod. You
-            may choose one from our list or provide a URL to a custom license.
-            <br />
-            Confused? See our
-            <a
-              class="text-link"
-              href="https://blog.modrinth.com/licensing-guide/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              licensing guide</a
-            >
-            for more information.
-          </span>
+        <div class="row">
+          <label for="license">
+            <span>
+              It is very important to choose a proper license for your mod. You
+              may choose one from our list or provide a URL to a custom license.
+              <br />
+              Confused? See our
+              <a
+                class="text-link"
+                href="https://blog.modrinth.com/licensing-guide/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                licensing guide</a
+              >
+              for more information.
+            </span>
+          </label>
           <div class="input-group">
             <Multiselect
+              id="license"
               v-model="license"
+              :class="{ 'known-error': license === null && showKnownErrors }"
+              :custom-label="(value) => value.short.toUpperCase()"
               placeholder="Choose license..."
               :loading="$tag.licenses.length === 0"
               :options="$tag.licenses"
               track-by="short"
-              label="short"
               :multiple="false"
               :searchable="true"
               :close-on-select="true"
               :show-labels="false"
               :allow-empty="false"
             />
-            <input v-model="license_url" type="url" placeholder="License URL" />
+            <input
+              v-model="license_url"
+              aria-label="License URL"
+              type="url"
+              placeholder="License URL"
+              :class="{
+                'known-error':
+                  (license_url === null || license_url === '') &&
+                  showKnownErrors,
+              }"
+            />
           </div>
-        </label>
+        </div>
       </section>
       <section class="card donations">
         <div class="title">
@@ -707,44 +995,54 @@
             Add a link
           </button>
         </div>
-        <div v-for="(item, index) in donationPlatforms" :key="index">
-          <label title="The donation link.">
-            <span>Donation Link</span>
+        <div
+          v-for="(item, index) in donationPlatforms"
+          :key="index"
+          class="outlined-area"
+        >
+          <div class="header">
+            <h3 class="title">Link</h3>
+            <div class="controls">
+              <button
+                class="iconified-button"
+                @click="
+                  donationPlatforms.splice(index, 1)
+                  donationLinks.splice(index, 1)
+                "
+              >
+                <TrashIcon />
+                Remove link
+              </button>
+            </div>
+          </div>
+          <label>
+            <span class="no-padding"
+              >Donation link<span class="required">*</span></span
+            >
             <input
               v-model="donationLinks[index]"
               type="url"
               placeholder="Enter a valid URL"
             />
           </label>
-          <label title="The donation platform of the link.">
-            <span>Donation Platform</span>
+          <label>
+            <span class="no-padding"
+              >Donation platform<span class="required">*</span></span
+            >
             <Multiselect
+              id="donationPlatform"
               v-model="donationPlatforms[index]"
-              placeholder="Select one"
+              placeholder="Choose a platform..."
+              :loading="$tag.donationPlatforms.length === 0"
+              :options="$tag.donationPlatforms"
               track-by="short"
               label="name"
-              :options="$tag.donationPlatforms"
-              :searchable="false"
+              :multiple="false"
               :close-on-select="true"
               :show-labels="false"
+              :allow-empty="false"
             />
           </label>
-          <button
-            class="iconified-button"
-            @click="
-              donationPlatforms.splice(index, 1)
-              donationLinks.splice(index, 1)
-            "
-          >
-            <TrashIcon />
-            Remove Link
-          </button>
-          <hr
-            v-if="
-              donationPlatforms.length > 0 &&
-              index !== donationPlatforms.length - 1
-            "
-          />
         </div>
       </section>
     </div>
@@ -753,23 +1051,29 @@
 
 <script>
 import Multiselect from 'vue-multiselect'
-import FileInput from '~/components/ui/FileInput'
 import SmartFileInput from '~/components/ui/SmartFileInput'
+import StatelessFileInput from '~/components/ui/StatelessFileInput'
 import ThisOrThat from '~/components/ui/ThisOrThat'
 import VersionBadge from '~/components/ui/Badge'
 
 import CheckIcon from '~/assets/images/utils/check.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
+import EditIcon from '~/assets/images/utils/edit.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
 
 export default {
   components: {
-    FileInput,
     SmartFileInput,
+    StatelessFileInput,
     Multiselect,
     CheckIcon,
     PlusIcon,
+    SaveIcon,
     TrashIcon,
+    CrossIcon,
+    EditIcon,
     ThisOrThat,
     VersionBadge,
   },
@@ -788,6 +1092,9 @@ export default {
       compiledBody: '',
       releaseChannels: ['beta', 'alpha', 'release'],
       currentVersionIndex: -1,
+      currentVersionNew: true,
+      currentGalleryIndex: -1,
+      currentGalleryNew: true,
       name: '',
       slug: '',
       draft: false,
@@ -819,9 +1126,14 @@ export default {
       bodyViewMode: 'source',
       changelogViewMode: 'source',
 
-      newDependencyType: 'required',
       dependencyAddMode: 'project',
+      newDependencyType: 'required',
       newDependencyId: '',
+
+      showKnownErrors: false,
+      showKnownVersionErrors: false,
+      showKnownGalleryErrors: false,
+      savingAsDraft: false,
     }
   },
   watch: {
@@ -845,15 +1157,46 @@ export default {
       e.preventDefault()
       e.returnValue = ''
     }
+
     window.addEventListener('beforeunload', preventLeave)
     this.$once('hook:beforeDestroy', () => {
       window.removeEventListener('beforeunload', preventLeave)
     })
   },
   methods: {
+    checkFields() {
+      const reviewConditions = this.body !== '' && this.versions.length > 0
+      if (
+        this.name !== '' &&
+        this.description !== '' &&
+        this.slug !== '' &&
+        this.license !== null &&
+        this.license_url !== null &&
+        this.license_url !== ''
+      ) {
+        if (this.savingAsDraft) {
+          return true
+        } else if (reviewConditions) {
+          return true
+        }
+      }
+      this.showKnownErrors = true
+      this.showKnownVersionErrors = true
+      this.showKnownGalleryErrors = true
+      return false
+    },
     async createDraft() {
-      this.draft = true
-      await this.createProject()
+      this.savingAsDraft = true
+      if (this.checkFields()) {
+        this.draft = true
+        await this.createProject()
+      }
+    },
+    async createProjectForReview() {
+      this.savingAsDraft = false
+      if (this.checkFields()) {
+        await this.createProject()
+      }
     },
     async createProject() {
       this.$nuxt.$loading.start()
@@ -957,7 +1300,9 @@ export default {
 
         await this.$router.replace(`/user/${this.$auth.user.username}`)
       } catch (err) {
-        let description = err.response.data.description
+        let description = !err.response.data
+          ? 'Data is null?'
+          : err.response.data.description
 
         if (description.includes('JSON')) {
           description = 'Please fill in missing required fields.'
@@ -1020,11 +1365,64 @@ export default {
       })
 
       this.currentVersionIndex = this.versions.length - 1
+      this.currentVersionNew = true
+    },
+
+    saveVersion() {
+      const version = this.versions[this.currentVersionIndex]
+      if (
+        version.version_number !== '' &&
+        version.releaseChannels !== null &&
+        version.loaders.length > 0 &&
+        version.game_versions.length > 0 &&
+        version.files.length > 0
+      ) {
+        this.currentVersionIndex = -1
+      } else {
+        this.showKnownVersionErrors = true
+      }
+    },
+
+    editVersion(index) {
+      this.currentVersionIndex = index
+      this.currentVersionNew = false
     },
 
     deleteVersion() {
       this.versions.splice(this.currentVersionIndex, 1)
       this.currentVersionIndex = -1
+      this.showKnownVersionErrors = false
+    },
+
+    createGalleryImage() {
+      this.gallery.push({
+        title: '',
+        description: '',
+        preview: null,
+      })
+      this.currentGalleryIndex = this.gallery.length - 1
+      this.currentGalleryNew = true
+    },
+
+    saveGalleryImage() {
+      const image = this.gallery[this.currentGalleryIndex]
+      if (image.title !== '' && image.preview !== null) {
+        this.currentGalleryIndex = -1
+        this.showKnownGalleryErrors = false
+      } else {
+        this.showKnownGalleryErrors = true
+      }
+    },
+
+    editGalleryImage(index) {
+      this.currentGalleryIndex = index
+      this.currentGalleryNew = false
+    },
+
+    deleteGalleryImage() {
+      this.gallery.splice(this.currentGalleryIndex, 1)
+      this.currentGalleryIndex = -1
+      this.showKnownGalleryErrors = false
     },
 
     async addDependency() {
@@ -1138,8 +1536,16 @@ section.project-icon {
 
   img {
     max-width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: 0.25rem;
     border-radius: var(--size-rounded-lg);
+
+    @media screen and (min-width: 420px) {
+      max-width: 20rem;
+    }
+
+    @media screen and (min-width: 1024px) {
+      max-width: 100%;
+    }
   }
 
   .iconified-button {
@@ -1153,13 +1559,13 @@ section.game-sides {
   .columns {
     flex-wrap: wrap;
 
-    span {
+    div {
       flex: 2;
     }
 
     .labeled-control {
-      flex: 2;
       margin-left: var(--spacing-card-lg);
+      margin-bottom: 0.5rem;
 
       h3 {
         margin-bottom: var(--spacing-card-sm);
@@ -1186,6 +1592,30 @@ section.description {
   }
 }
 
+.outlined-area {
+  margin: var(--spacing-card-md) 0;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--size-rounded-card);
+  padding: 1rem;
+
+  .header {
+    display: flex;
+    align-items: center;
+    padding-bottom: 1rem;
+    grid-area: header;
+
+    .title {
+      flex-grow: 1;
+    }
+  }
+}
+
+.controls {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
 section.versions {
   grid-area: versions;
 
@@ -1201,14 +1631,6 @@ section.versions {
       text-align: left;
     }
 
-    tr:not(:last-child),
-    tr:first-child {
-      th,
-      td {
-        border-bottom: 1px solid var(--color-divider);
-      }
-    }
-
     th,
     td {
       &:first-child {
@@ -1255,10 +1677,8 @@ section.versions {
 
     th {
       color: var(--color-heading);
-      font-size: 0.8rem;
       letter-spacing: 0.02rem;
       padding: 0.75rem 1rem;
-      text-transform: uppercase;
     }
 
     td {
@@ -1276,7 +1696,7 @@ section.versions {
     background-color: var(--color-divider);
     border: none;
     color: var(--color-divider);
-    height: 2px;
+    height: 1px;
     margin: 0.5rem 0;
   }
 
@@ -1289,7 +1709,8 @@ section.versions {
   .new-version {
     display: grid;
     grid-template:
-      'controls controls' auto
+      'header header' auto
+      'known-errors known-errors' auto
       'main main' auto
       'dependencies dependencies' auto
       'files files'
@@ -1299,20 +1720,14 @@ section.versions {
 
     @media screen and (min-width: 1024px) {
       grid-template:
-        'controls controls' auto
+        'header header' auto
+        'known-errors known-errors' auto
         'main dependencies' auto
         'main files' 1fr
         'changelog changelog'
         / 5fr 4fr;
     }
 
-    .controls {
-      grid-area: controls;
-      display: flex;
-      flex-direction: row-reverse;
-      gap: 0.5rem;
-    }
-
     .main {
       grid-area: main;
     }
@@ -1332,7 +1747,7 @@ section.versions {
         .edit-info {
           display: flex;
           flex-wrap: wrap;
-          row-gap: 0.25rem;
+          gap: 0.5rem;
 
           .multiselect {
             max-width: 10rem;
@@ -1342,10 +1757,15 @@ section.versions {
             min-height: 2.5rem;
           }
 
+          input {
+            flex-grow: 1;
+            max-width: fit-content;
+          }
+
           input,
           .multiselect,
           .iconified-button {
-            margin: 0 0.5rem 0 0;
+            margin: 0;
           }
         }
       }
@@ -1405,6 +1825,7 @@ section.versions {
           * {
             margin-left: 0.25rem;
           }
+
           .filename {
             margin: 0;
             font-weight: bold;
@@ -1437,20 +1858,45 @@ section.versions {
 section.gallery {
   grid-area: gallery;
 
-  .gallery-item {
+  .gallery-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-card-lg);
+
+    .gallery-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+
+      h2 {
+        margin: 0;
+      }
+      h4 {
+        margin: 0;
+      }
+      width: calc((100% - 2 * var(--spacing-card-lg)) / 3);
+
+      img {
+        width: 100%;
+        border-radius: var(--size-rounded-card);
+      }
+    }
+  }
+
+  .new-gallery-item {
     margin-top: 1rem;
     display: grid;
     grid-template:
+      'header' auto
+      'known-errors' auto
       'info' auto
-      'image' auto
-      'buttons' auto
-      / 1fr;
+      'image' auto;
 
     @media screen and (min-width: 1024px) {
       grid-template:
-        'info image' auto
-        'buttons buttons'
-        / 2fr 1fr;
+        'header header' auto
+        'known-errors known-errors' auto
+        'info image' auto;
     }
 
     column-gap: var(--spacing-card-md);
@@ -1485,11 +1931,8 @@ section.gallery {
 
       .bottom {
         display: flex;
-
-        input,
-        button {
-          margin-right: 0.5rem;
-        }
+        gap: 0.5rem;
+        align-items: center;
       }
     }
 
@@ -1506,6 +1949,10 @@ section.gallery {
 section.extra-links {
   grid-area: extra-links;
 
+  .title {
+    margin-top: 0.5rem;
+  }
+
   label {
     align-items: center;
     margin-top: var(--spacing-card-sm);
@@ -1519,22 +1966,23 @@ section.extra-links {
 section.license {
   grid-area: license;
 
+  .title {
+    margin-top: 0.5rem;
+  }
+
   label {
     margin-top: var(--spacing-card-sm);
   }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 section.donations {
   grid-area: donations;
-
-  label {
-    align-items: center;
-    margin-top: var(--spacing-card-sm);
-
-    span {
-      flex: 1;
-    }
-  }
 }
 
 .footer {
@@ -1552,4 +2000,28 @@ section.donations {
 .required {
   color: var(--color-badge-red-bg);
 }
+
+.essentials,
+.new-version,
+.donations {
+  label {
+    margin-bottom: 1rem;
+  }
+  span {
+    margin-bottom: 0.5rem;
+  }
+
+  @media screen and (min-width: 1024px) {
+    label {
+      margin-bottom: 0.5rem;
+    }
+    input {
+      margin-left: 1.5rem;
+    }
+  }
+}
+
+.slug-description {
+  overflow-wrap: break-word;
+}
 </style>
diff --git a/pages/create/report.vue b/pages/create/report.vue
index 137ea20d..22cf90bb 100644
--- a/pages/create/report.vue
+++ b/pages/create/report.vue
@@ -9,29 +9,36 @@
           :disabled="!$nuxt.$loading"
           @click="createReport"
         >
-          <PlusIcon />
-          Create
+          <CheckIcon />
+          Submit
         </button>
       </header>
       <section class="card info">
-        <h3>Item ID</h3>
         <label>
           <span>
-            The ID of the item you are reporting. For example, the item ID of a
-            project would be its project ID, found on the right side of that
-            project's page under "Project ID".
+            <h3>Item ID</h3>
+            <span>
+              The ID of the item you are reporting. For example, the item ID of
+              a project would be its project ID, found on the right side of that
+              project's page under "Project ID".
+            </span>
           </span>
           <input v-model="itemId" type="text" placeholder="Enter the item ID" />
         </label>
-        <h3>Item type</h3>
         <label>
-          <span class="no-padding"
-            >The type of the item that is being reported.</span
-          >
+          <span>
+            <h3>Item type</h3>
+            <span class="no-padding"
+              >The type of the item that is being reported.</span
+            >
+          </span>
           <multiselect
             id="item-type"
             v-model="itemType"
             :options="['project', 'version', 'user']"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
             :multiple="false"
             :searchable="false"
             :show-no-results="false"
@@ -39,16 +46,21 @@
             placeholder="Choose item type"
           />
         </label>
-        <h3>Report type</h3>
         <label>
-          <span class="no-padding">
-            The type of report. This is the category that this report falls
-            under.
+          <span>
+            <h3>Report type</h3>
+            <span class="no-padding">
+              The type of report. This is the category that this report falls
+              under.
+            </span>
           </span>
           <multiselect
             id="report-type"
             v-model="reportType"
             :options="reportTypes"
+            :custom-label="
+              (value) => value.charAt(0).toUpperCase() + value.slice(1)
+            "
             :multiple="false"
             :searchable="false"
             :show-no-results="false"
@@ -68,13 +80,13 @@
         </h3>
         <span>
           You can type the of the long form of your description here. This
-          editor supports markdown. You can find the syntax
+          editor supports
           <a
             href="https://guides.github.com/features/mastering-markdown/"
             target="_blank"
             rel="noopener noreferrer"
             class="text-link"
-            >here</a
+            >Markdown</a
           >.
         </span>
         <ThisOrThat
@@ -102,13 +114,13 @@
 import Multiselect from 'vue-multiselect'
 import ThisOrThat from '~/components/ui/ThisOrThat'
 
-import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import CheckIcon from '~/assets/images/utils/check.svg?inline'
 
 export default {
   components: {
     Multiselect,
     ThisOrThat,
-    PlusIcon,
+    CheckIcon,
   },
   async asyncData(data) {
     const reportTypes = (await data.$axios.get(`tag/report_type`)).data
@@ -261,4 +273,12 @@ section.description {
 .card {
   margin-bottom: 0;
 }
+
+.card span {
+  margin-bottom: 1rem;
+}
+
+label {
+  align-items: center;
+}
 </style>
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 896419a8..07346f2d 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import ClearIcon from '~/assets/images/utils/trash.svg?inline'
+import ClearIcon from '~/assets/images/utils/clear.svg?inline'
 import UpdateIcon from '~/assets/images/utils/updated.svg?inline'
 import UsersIcon from '~/assets/images/utils/users.svg?inline'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
diff --git a/pages/search.vue b/pages/search.vue
index 225bcceb..ee734d37 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -6,7 +6,7 @@
     }"
   >
     <aside class="normal-page__sidebar" aria-label="Filters">
-      <section class="card" role="presentation">
+      <section class="card filters-card" role="presentation">
         <button
           class="iconified-button sidebar-menu-close-button"
           @click="sidebarMenuOpen = !sidebarMenuOpen"
@@ -30,7 +30,7 @@
             class="iconified-button"
             @click="clearFilters"
           >
-            <ExitIcon aria-hidden="true" />
+            <ClearIcon aria-hidden="true" />
             Clear filters
           </button>
           <section aria-label="Category filters">
@@ -291,7 +291,7 @@ import ClientSide from '~/assets/images/categories/client.svg?inline'
 import ServerSide from '~/assets/images/categories/server.svg?inline'
 
 import SearchIcon from '~/assets/images/utils/search.svg?inline'
-import ExitIcon from '~/assets/images/utils/exit.svg?inline'
+import ClearIcon from '~/assets/images/utils/clear.svg?inline'
 import EyeIcon from '~/assets/images/utils/eye.svg?inline'
 import EyeOffIcon from '~/assets/images/utils/eye-off.svg?inline'
 
@@ -309,7 +309,7 @@ export default {
     ClientSide,
     ServerSide,
     SearchIcon,
-    ExitIcon,
+    ClearIcon,
     EyeIcon,
     EyeOffIcon,
     LogoAnimated,
@@ -649,6 +649,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.filters-card {
+  padding: var(--spacing-card-lg);
+}
+
 .sidebar-menu {
   display: none;
   margin-top: 1rem;
diff --git a/pages/settings.vue b/pages/settings.vue
index 07f48a3d..bdc316fd 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -17,61 +17,16 @@
           <nuxt-link class="tab" to="/settings/privacy">
             <span>Privacy</span>
           </nuxt-link>
-          <button
-            v-if="actionButton"
-            class="iconified-button brand-button-colors right"
-            @click="actionButtonCallback"
-          >
-            <CheckIcon />
-            {{ actionButton }}
-          </button>
         </div>
-        <NuxtChild
-          :action-button.sync="actionButton"
-          :action-button-callback.sync="actionButtonCallback"
-        />
+        <NuxtChild />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg?inline'
-
 export default {
   name: 'Settings',
-  components: {
-    CheckIcon,
-  },
-  data() {
-    return {
-      actionButton: '',
-    }
-  },
-  watch: {
-    '$route.path': {
-      handler() {
-        this.actionButton = ''
-        this.actionButtonCallback = () => {}
-      },
-    },
-  },
-  methods: {
-    actionButtonCallback() {},
-    changeTheme() {
-      const shift = event.shiftKey
-      switch (this.$colorMode.preference) {
-        case 'dark':
-          this.$colorMode.preference = shift ? 'light' : 'oled'
-          break
-        case 'oled':
-          this.$colorMode.preference = shift ? 'dark' : 'light'
-          break
-        default:
-          this.$colorMode.preference = shift ? 'oled' : 'dark'
-      }
-    },
-  },
 }
 </script>
 
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index ab8762ee..87a8187c 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,180 +1,144 @@
 <template>
   <div class="edit-page">
-    <div class="left-side">
-      <div class="profile-picture card">
-        <h3>Profile picture</h3>
-        <div class="uploader">
-          <img
-            :src="previewImage ? previewImage : $auth.user.avatar_url"
-            @click="developerMode++"
-          />
-          <file-input
-            accept="image/png,image/jpeg,image/gif,image/webp"
-            class="choose-image"
-            prompt="Choose image or drag it here"
-            @change="showPreviewImage"
-          />
+    <section class="card account-settings">
+      <div class="header">
+        <h2 class="title">Account settings</h2>
+        <div class="controls">
+          <button
+            class="brand-button-colors iconified-button"
+            title="Save account settings changes"
+            @click="saveChanges()"
+          >
+            <SaveIcon />
+            Save changes
+          </button>
         </div>
-        <button
-          class="iconified-button"
-          @click="
-            icon = null
-            previewImage = null
-          "
-        >
-          <TrashIcon />
-          Reset
-        </button>
       </div>
-      <div class="recap card">
-        <section>
-          <h2>Profile Recap</h2>
-          <div>
-            <Badge
-              v-if="$auth.user.role === 'admin'"
-              type="Admin"
-              color="red"
+      <div class="left-side">
+        <h3>Profile picture</h3>
+        <div class="profile-picture">
+          <img :src="previewImage ? previewImage : $auth.user.avatar_url" />
+          <div class="uploader">
+            <SmartFileInput
+              :show-icon="false"
+              :max-size="2097152"
+              accept="image/png,image/jpeg,image/gif,image/webp"
+              class="choose-image"
+              prompt="Choose image or drag it here"
+              @change="showPreviewImage"
             />
-            <Badge
-              v-else-if="$auth.user.role === 'moderator'"
-              type="Moderator"
-              color="yellow"
-            />
-            <Badge v-else type="Developer" color="green" />
-            <div class="stat">
-              <SunriseIcon />
-              <span>Joined {{ $dayjs($auth.user.created).fromNow() }}</span>
-            </div>
+            <button
+              class="iconified-button"
+              @click="
+                icon = null
+                previewImage = null
+              "
+            >
+              <TrashIcon />
+              Reset
+            </button>
           </div>
-        </section>
-        <section>
-          <div class="stat">
-            <DownloadIcon />
-            <span>
-              <strong>{{ sumDownloads() }}</strong> downloads
-            </span>
-          </div>
-          <div class="stat">
-            <HeartIcon />
-            <span>
-              <strong>{{ sumFollows() }}</strong> followers of projects
-            </span>
-          </div>
-        </section>
+        </div>
       </div>
-    </div>
-    <div class="right-side">
-      <section class="card">
-        <h3>Username</h3>
+      <div class="right-side">
         <label>
           <span>
-            The username used on Modrinth to identify yourself. This must be
-            unique.
+            <h3>Username</h3>
+            <span>This must be unique.</span>
           </span>
+
           <input
             v-model="username"
             type="text"
             placeholder="Enter your username"
           />
         </label>
-        <h3>Email</h3>
         <label>
           <span>
-            The email for your account. This is private information which is not
-            exposed in any API routes or on your profile. It is also optional.
+            <h3>Email (optional)</h3>
+            <span>This is kept private.</span>
           </span>
           <input v-model="email" type="email" placeholder="Enter your email" />
         </label>
-        <h3>Bio</h3>
         <label>
           <span>
-            A description of yourself which other users can see on your profile.
+            <h3>Bio</h3>
+            <span>Describe yourself to other users!</span>
           </span>
           <input v-model="bio" type="text" placeholder="Enter your bio" />
         </label>
-        <h3>Theme</h3>
-        <label>
+      </div>
+    </section>
+    <section class="card">
+      <div class="header">
+        <h2 class="title">Display settings</h2>
+      </div>
+      <label>
+        <span>
+          <h3>Theme</h3>
+          <span>Change the global site theme.</span>
+        </span>
+        <Multiselect
+          v-model="$colorMode.preference"
+          :options="['system', 'light', 'dark', 'oled']"
+          :custom-label="
+            (value) =>
+              value === 'oled'
+                ? 'OLED'
+                : value.charAt(0).toUpperCase() + value.slice(1)
+          "
+          :searchable="false"
+          :close-on-select="true"
+          :show-labels="false"
+          :allow-empty="false"
+        />
+      </label>
+      <label>
+        <span>
+          <h3>Search sidebar on the right</h3>
           <span>
-            Change the global site theme. It can also be changed between light
-            and dark in the navigation bar.
+            Enabling this will put the search page's filters sidebar on the
+            right side.
           </span>
-          <Multiselect
-            v-model="$colorMode.preference"
-            :options="['system', 'light', 'dark', 'oled']"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-          />
-        </label>
-        <h3>Search sidebar on right side</h3>
-        <label>
+        </span>
+        <input
+          v-model="searchLayout"
+          class="switch stylized-toggle"
+          type="checkbox"
+          @change="changeLayout"
+        />
+      </label>
+      <label>
+        <span>
+          <h3>Project sidebar on the right</h3>
+
           <span>
-            Sets the sidebar direction for search pages. Enabling this will put
-            the search bar on the right side.
+            Enabling this will put the project pages' info sidebars on the right
+            side.
           </span>
-          <input
-            v-model="searchLayout"
-            class="switch stylized-toggle"
-            type="checkbox"
-            @change="changeLayout"
-          />
-        </label>
-        <h3>Project sidebar on right side</h3>
-        <label>
-          <span>
-            Sets the sidebar direction for project pages. Enabling this will
-            make projects look closer to the legacy layout, with project
-            information on the right side.
-          </span>
-          <input
-            v-model="projectLayout"
-            class="switch stylized-toggle"
-            type="checkbox"
-            @change="changeLayout"
-          />
-        </label>
-        <section v-if="developerMode > 6">
-          <h3>Developer options</h3>
-          <label>
-            <span>
-              Set the API endpoint. This value is not stored, and is intended
-              for temporary usage.</span
-            >
-            <Multiselect
-              v-model="apiEndpoint"
-              :options="['production', 'staging']"
-              :searchable="false"
-              :close-on-select="true"
-              :show-labels="false"
-              :allow-empty="false"
-              @input="changeApiEndpoint()"
-            />
-          </label>
-        </section>
-      </section>
-    </div>
+        </span>
+        <input
+          v-model="projectLayout"
+          class="switch stylized-toggle"
+          type="checkbox"
+          @change="changeLayout"
+        />
+      </label>
+    </section>
   </div>
 </template>
 
 <script>
 import Multiselect from 'vue-multiselect'
-import FileInput from '~/components/ui/FileInput'
-import Badge from '~/components/ui/Badge'
-
-import HeartIcon from '~/assets/images/utils/heart.svg?inline'
+import SmartFileInput from '~/components/ui/SmartFileInput'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
-import SunriseIcon from '~/assets/images/utils/sunrise.svg?inline'
-import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
 
 export default {
   components: {
     TrashIcon,
-    SunriseIcon,
-    DownloadIcon,
-    HeartIcon,
-    Badge,
-    FileInput,
+    SaveIcon,
+    SmartFileInput,
     Multiselect,
   },
   asyncData(ctx) {
@@ -190,24 +154,15 @@ export default {
       previewImage: null,
       searchLayout: false,
       projectLayout: false,
-      apiEndpoint: this.getApiEndpoint(),
-      developerMode: 0,
     }
   },
   fetch() {
     this.searchLayout = this.$store.state.cosmetics.searchLayout
     this.projectLayout = this.$store.state.cosmetics.projectLayout
-
-    this.$emit('update:action-button', 'Save')
-    this.$emit('update:action-button-callback', this.saveChanges)
   },
   head: {
     title: 'Settings - Modrinth',
   },
-  created() {
-    this.$emit('update:action-button', 'Save')
-    this.$emit('update:action-button-callback', this.saveChanges)
-  },
   methods: {
     changeTheme() {
       const shift = event.shiftKey
@@ -222,17 +177,6 @@ export default {
           this.$colorMode.preference = shift ? 'oled' : 'dark'
       }
     },
-    changeApiEndpoint() {
-      const subdomain =
-        this.apiEndpoint === 'production' ? 'api' : 'staging-api'
-      this.$axios.defaults.baseURL =
-        'https://' + subdomain + '.modrinth.com/v2/'
-    },
-    getApiEndpoint() {
-      return this.$axios.defaults.baseURL === 'https://api.modrinth.com/v2/'
-        ? 'production'
-        : 'staging'
-    },
     showPreviewImage(files) {
       const reader = new FileReader()
       this.icon = files[0]
@@ -311,76 +255,72 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.edit-page {
-  display: flex;
-  flex-direction: column;
+.account-settings {
+  display: grid;
+  grid-template: 'header header' auto 'left-side left-side' auto 'right-side right-side' auto;
 
   @media screen and (min-width: 1024px) {
-    flex-direction: row;
-
-    .left-side {
-      margin-right: var(--spacing-card-bg);
-    }
+    grid-template:
+      'header header' auto
+      'left-side right-side' auto;
   }
-}
 
-.left-side {
-  min-width: 20rem;
+  .left-side {
+    grid-area: left-side;
+    min-width: 20rem;
 
-  .profile-picture {
-    h3 {
-      font-size: var(--font-size-lg);
-    }
-
-    .uploader {
-      margin: 1rem 0;
-      text-align: center;
+    .profile-picture {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+      align-items: center;
 
       img {
         box-shadow: var(--shadow-card);
-
         border-radius: var(--size-rounded-md);
-        width: 8rem;
+        width: 10rem;
+        height: 10rem;
+        object-fit: contain;
         margin-bottom: 0.5rem;
       }
-    }
-  }
 
-  .recap {
-    section {
-      h2 {
-        font-size: var(--font-size-lg);
-        margin: 0 0 0.5rem 0;
-      }
-
-      .version-badge {
-        text-transform: none;
-        margin-bottom: 0.25rem;
-
-        &::first-letter {
-          text-transform: uppercase;
+      .uploader {
+        text-align: center;
+        .iconified-button {
+          margin-top: 0.5rem;
         }
       }
     }
   }
+  .right-side {
+    grid-area: right-side;
+    margin-left: var(--spacing-card-lg);
+  }
 }
 
-.stat {
+.card span {
+  margin-bottom: 1rem;
+}
+
+label {
+  align-items: center;
+}
+
+.header {
   display: flex;
   align-items: center;
-  margin: 0.5rem 0;
+  padding-bottom: 1rem;
+  grid-area: header;
 
-  svg {
-    width: auto;
-    height: 1.25rem;
-
-    margin-right: 0.25rem;
+  .title {
+    flex-grow: 1;
+    margin: 0;
   }
 
-  span {
-    strong {
-      font-weight: bolder;
-    }
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
   }
 }
 </style>
diff --git a/pages/settings/privacy.vue b/pages/settings/privacy.vue
index 557a9901..717a525a 100644
--- a/pages/settings/privacy.vue
+++ b/pages/settings/privacy.vue
@@ -1,5 +1,26 @@
 <template>
   <div class="rows card">
+    <div class="header">
+      <h2 class="title">Privacy settings</h2>
+      <div class="controls">
+        <button class="iconified-button" @click="toggleAll(false)">
+          <DenyIcon />
+          Deny all
+        </button>
+        <button class="iconified-button" @click="toggleAll(true)">
+          <AllowIcon />
+          Allow all
+        </button>
+        <button
+          class="brand-button-colors iconified-button"
+          title="Confirm privacy settings"
+          @click="confirm()"
+        >
+          <SaveIcon />
+          Save changes
+        </button>
+      </div>
+    </div>
     <div class="privacy-settings-container">
       <div>
         Modrinth relies on different providers and in-house tools to allow us to
@@ -30,23 +51,23 @@
         </div>
       </div>
     </div>
-    <div class="actions">
-      <button class="iconified-button" @click="toggleAll(false)">
-        Select none
-      </button>
-      <button class="iconified-button" @click="toggleAll(true)">
-        Select all
-      </button>
-    </div>
   </div>
 </template>
 
 <script>
 import toggles from '@/privacy-toggles'
+import DenyIcon from '~/assets/images/utils/clear.svg?inline'
+import AllowIcon from '~/assets/images/utils/check-circle.svg?inline'
+import SaveIcon from '~/assets/images/utils/save.svg?inline'
 
 export default {
   auth: false,
   name: 'Privacy',
+  components: {
+    DenyIcon,
+    AllowIcon,
+    SaveIcon,
+  },
   data: () => {
     const settings = toggles.settings
     return {
@@ -54,9 +75,6 @@ export default {
     }
   },
   fetch() {
-    this.$emit('update:action-button', 'Confirm')
-    this.$emit('update:action-button-callback', this.confirm)
-
     this.$store.dispatch('consent/loadFromCookies', this.$cookies)
     if (this.$store.state.consent.is_consent_given) {
       Object.keys(toggles.settings).forEach((key) => {
@@ -76,10 +94,6 @@ export default {
   head: {
     title: 'Privacy Settings - Modrinth',
   },
-  created() {
-    this.$emit('update:action-button', 'Confirm')
-    this.$emit('update:action-button-callback', this.confirm)
-  },
   options: {
     auth: false,
   },
@@ -91,6 +105,7 @@ export default {
       }
 
       this.$forceUpdate()
+      this.confirm()
     },
     confirm() {
       this.$store.commit('consent/set_consent', true)
@@ -173,4 +188,22 @@ export default {
     }
   }
 }
+
+.header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 1rem;
+  grid-area: header;
+
+  .title {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+}
 </style>
diff --git a/pages/settings/security.vue b/pages/settings/security.vue
index 28ee7edb..d08b667f 100644
--- a/pages/settings/security.vue
+++ b/pages/settings/security.vue
@@ -12,12 +12,17 @@
     />
 
     <section class="card">
-      <h3>Authorization token</h3>
+      <div class="header">
+        <h2 class="title">Security settings</h2>
+      </div>
       <label>
         <span>
-          Your authorization token can be used with the Modrinth API, the
-          Minotaur Gradle plugin, and other applications that interact with
-          Modrinth's API. Be sure to keep this secret!
+          <h3>Authorization token</h3>
+          <span>
+            Your authorization token can be used with the Modrinth API, the
+            Minotaur Gradle plugin, and other applications that interact with
+            Modrinth's API. Be sure to keep this secret!
+          </span>
         </span>
         <input
           type="button"
@@ -26,12 +31,14 @@
           @click="copyToken"
         />
       </label>
-      <h3>Revoke your token</h3>
       <label>
-        <span
-          >This will log you out of Modrinth, and you will have to log in again
-          to access Modrinth with a new token.</span
-        >
+        <span>
+          <h3>Revoke your token</h3>
+          <span
+            >This will log you out of Modrinth, and you will have to log in
+            again to access Modrinth with a new token.</span
+          >
+        </span>
         <input
           type="button"
           class="iconified-button"
@@ -39,14 +46,16 @@
           @click="$router.replace('/settings/revoke-token')"
         />
       </label>
-      <h3>Delete your account</h3>
       <label>
-        <span
-          >Clicking on this WILL delete your account. Do not click on this
-          unless you want your account deleted. If you delete your account, all
-          attached data, including projects, will be removed from our servers.
-          This cannot be reversed, so be careful!</span
-        >
+        <span>
+          <h3>Delete your account</h3>
+          <span
+            >Clicking on this WILL delete your account. Do not click on this
+            unless you want your account deleted. If you delete your account,
+            all attached data, including projects, will be removed from our
+            servers. This cannot be reversed, so be careful!</span
+          >
+        </span>
         <input
           value="Delete account"
           type="button"
@@ -96,3 +105,26 @@ export default {
   },
 }
 </script>
+<style lang="scss" scoped>
+.card span {
+  margin-bottom: 1rem;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 1rem;
+  grid-area: header;
+
+  .title {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+}
+</style>
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index 8aef2547..219ebfb7 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -20,6 +20,14 @@
         <hr class="card-divider" />
         <h3 class="sidebar__item">About me</h3>
         <span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
+        <a
+          :href="githubUrl"
+          target="_blank"
+          class="sidebar__item report-button iconified-button"
+        >
+          <GitHubIcon aria-hidden="true" />
+          View GitHub profile
+        </a>
         <div class="sidebar__item stats-block">
           <div class="stats-block__item secondary-stat">
             <SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
@@ -125,6 +133,7 @@ import ThisOrThat from '~/components/ui/ThisOrThat'
 import Badge from '~/components/ui/Badge'
 import Advertisement from '~/components/ads/Advertisement'
 
+import GitHubIcon from '~/assets/images/utils/github.svg?inline'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import SunriseIcon from '~/assets/images/utils/sunrise.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
@@ -139,6 +148,7 @@ export default {
     ProjectCard,
     SunriseIcon,
     DownloadIcon,
+    GitHubIcon,
     ReportIcon,
     Badge,
     SettingsIcon,
@@ -160,10 +170,17 @@ export default {
         ])
       ).map((it) => it.data)
 
+      const githubUrl = (
+        await (
+          await fetch(`https://api.github.com/user/` + user.github_id)
+        ).json()
+      ).html_url
+
       return {
         selectedProjectType: 'all',
         user,
         projects,
+        githubUrl,
       }
     } catch {
       data.error({
diff --git a/plugins/shorthands.js b/plugins/shorthands.js
index af43ac3d..3e96a113 100644
--- a/plugins/shorthands.js
+++ b/plugins/shorthands.js
@@ -98,4 +98,15 @@ export default ({ store }, inject) => {
 
     return output.join(', ')
   })
+  inject('formatBytes', (bytes, decimals = 2) => {
+    if (bytes === 0) return '0 Bytes'
+
+    const k = 1024
+    const dm = decimals < 0 ? 0 : decimals
+    const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+  })
 }