diff --git a/.vscode/settings.json b/.vscode/settings.json
index c89a52fa7..00362a598 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,13 @@
 {
-    "prettier.endOfLine": "lf",
-    "editor.formatOnSave": true
-  }
\ No newline at end of file
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 3281954d4..43c66888f 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -51,292 +51,304 @@
         <Button transparent icon-only :action="hideStagingBanner"><XIcon /></Button>
       </div>
     </div>
-    <header class="site-header" role="presentation">
-      <section class="navbar columns" role="navigation">
-        <section class="logo column" role="presentation">
-          <NuxtLink class="button-base" to="/" aria-label="Modrinth home page">
-            <BrandTextLogo aria-hidden="true" class="text-logo" />
-          </NuxtLink>
-        </section>
-        <section class="nav-group columns" role="presentation">
-          <section class="nav" aria-label="Page links">
-            <NavRow class="navigation" :links="navRoutes" />
-          </section>
-          <section class="column-grow user-outer" aria-label="Account links">
-            <section class="user-controls">
-              <nuxt-link
-                v-if="auth.user"
-                to="/dashboard/notifications"
-                class="control-button button-transparent"
-                :title="formatMessage(commonMessages.notificationsLabel)"
-              >
-                <NotificationIcon aria-hidden="true" />
-              </nuxt-link>
-              <button
-                class="control-button button-transparent"
-                :title="formatMessage(messages.changeTheme)"
-                @click="changeTheme"
-              >
-                <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
-                <SunIcon v-else aria-hidden="true" />
-              </button>
-              <div
-                v-if="auth.user"
-                class="dropdown"
-                :class="{ closed: !isDropdownOpen }"
-                tabindex="0"
-                @mouseover="isDropdownOpen = true"
-                @focus="isDropdownOpen = true"
-                @mouseleave="isDropdownOpen = false"
-              >
-                <button class="control" value="Profile Dropdown">
-                  <Avatar
-                    :src="auth.user.avatar_url"
-                    class="user-icon"
-                    :alt="formatMessage(messages.yourAvatarAlt)"
-                    aria-hidden="true"
-                    circle
-                  />
-                  <DropdownIcon class="caret" />
-                </button>
-                <div class="content card">
-                  <NuxtLink class="item button-transparent" :to="`/user/${auth.user.username}`">
-                    <div class="title profile-link">
-                      <div class="username">@{{ auth.user.username }}</div>
-                      <div class="prompt">{{ formatMessage(commonMessages.visitYourProfile) }}</div>
-                    </div>
-                  </NuxtLink>
-                  <hr class="divider" />
-                  <button class="item button-transparent" @click="$refs.modal_creation.show()">
-                    <PlusIcon class="icon" />
-                    <span class="title">
-                      {{ formatMessage(commonMessages.createAProjectButton) }}
-                    </span>
-                  </button>
-                  <hr class="divider" />
-                  <NuxtLink class="item button-transparent" to="/dashboard/collections">
-                    <LibraryIcon class="icon" />
-                    <span class="title">{{ formatMessage(commonMessages.collectionsLabel) }}</span>
-                  </NuxtLink>
-                  <NuxtLink class="item button-transparent" to="/dashboard/notifications">
-                    <NotificationIcon class="icon" />
-                    <span class="title">{{
-                      formatMessage(commonMessages.notificationsLabel)
-                    }}</span>
-                  </NuxtLink>
-                  <NuxtLink class="item button-transparent" to="/dashboard">
-                    <ChartIcon class="icon" />
-                    <span class="title">{{ formatMessage(commonMessages.dashboardLabel) }}</span>
-                  </NuxtLink>
-                  <NuxtLink class="item button-transparent" to="/settings">
-                    <SettingsIcon class="icon" />
-                    <span class="title">{{ formatMessage(commonMessages.settingsLabel) }}</span>
-                  </NuxtLink>
-                  <NuxtLink
-                    v-if="tags.staffRoles.includes(auth.user.role)"
-                    class="item button-transparent"
-                    to="/moderation"
-                  >
-                    <ModerationIcon class="icon" />
-                    <span class="title">{{ formatMessage(commonMessages.moderationLabel) }}</span>
-                  </NuxtLink>
-                  <NuxtLink v-if="flags.developerMode" class="item button-transparent" to="/flags">
-                    <ReportIcon class="icon" />
-                    <span class="title">Feature flags</span>
-                  </NuxtLink>
-                  <NuxtLink
-                    v-if="!cosmetics.hideModrinthAppPromos"
-                    class="item button-transparent primary-color"
-                    to="/app"
-                  >
-                    <DownloadIcon class="icon" />
-                    <span class="title">
-                      {{ formatMessage(messages.getModrinthApp) }}
-                    </span>
-                  </NuxtLink>
-                  <hr class="divider" />
-                  <button class="item button-transparent" @click="logoutUser()">
-                    <LogOutIcon class="icon" />
-                    <span class="dropdown-item__text">
-                      {{ formatMessage(commonMessages.signOutButton) }}
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <section v-else class="auth-prompt">
-                <nuxt-link class="iconified-button raised-button" to="/auth/sign-in">
-                  <LogInIcon /> {{ formatMessage(commonMessages.signInButton) }}
-                </nuxt-link>
-                <nuxt-link
-                  v-if="$route.path !== '/app' && !cosmetics.hideModrinthAppPromos"
-                  class="btn btn-outline btn-primary app-btn"
-                  to="/app"
-                >
-                  <DownloadIcon /> {{ formatMessage(messages.getModrinthApp) }}
-                </nuxt-link>
-              </section>
-            </section>
-          </section>
-        </section>
-      </section>
-      <section class="mobile-navigation">
-        <div
-          class="nav-menu nav-menu-browse"
-          :class="{ expanded: isBrowseMenuOpen }"
-          @focusin="isBrowseMenuOpen = true"
-          @focusout="isBrowseMenuOpen = false"
-        >
-          <div class="links cascade-links">
-            <NuxtLink
-              v-for="navRoute in navRoutes"
-              :key="navRoute.href"
-              :to="navRoute.href"
-              class="iconified-button"
-            >
-              {{ navRoute.label }}
-            </NuxtLink>
-          </div>
-        </div>
-        <div
-          class="nav-menu nav-menu-mobile"
-          :class="{ expanded: isMobileMenuOpen }"
-          @focusin="isMobileMenuOpen = true"
-          @focusout="isMobileMenuOpen = false"
-        >
-          <div class="account-container">
-            <NuxtLink
+    <header
+      class="experimental-styles-within desktop-only mx-auto my-4 grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-3 sm:grid-cols-[auto_1fr_auto]"
+    >
+      <div>
+        <NuxtLink to="/" aria-label="Modrinth home page">
+          <BrandTextLogo aria-hidden="true" class="h-7 w-auto text-contrast" />
+        </NuxtLink>
+      </div>
+      <div
+        class="col-span-2 row-start-2 flex flex-wrap justify-center gap-1 sm:col-span-1 sm:row-start-auto"
+      >
+        <ButtonStyled type="transparent">
+          <OverflowMenu
+            v-if="auth.user"
+            class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+            :options="[
+              {
+                id: 'mods',
+                link: '/mods',
+              },
+              {
+                id: 'resourcepacks',
+                link: '/resourcepacks',
+              },
+              {
+                id: 'datapacks',
+                link: '/datapacks',
+              },
+              {
+                id: 'plugins',
+                link: '/plugins',
+              },
+              {
+                id: 'shaders',
+                link: '/shaders',
+              },
+              {
+                id: 'modpacks',
+                link: '/modpacks',
+              },
+            ]"
+          >
+            <CompassIcon /> Browse <DropdownIcon class="h-5 w-5 text-secondary" />
+            <template #mods> <BoxIcon /> Mods </template>
+            <template #resourcepacks> <PaintBrushIcon /> Resource Packs </template>
+            <template #datapacks> <BracesIcon /> Data Packs </template>
+            <template #plugins> <ServerIcon /> Plugins </template>
+            <template #shaders> <GlassesIcon /> Shaders </template>
+            <template #modpacks> <PackageOpenIcon /> Modpacks </template>
+          </OverflowMenu>
+        </ButtonStyled>
+        <div class="contents lg:hidden">
+          <ButtonStyled type="transparent">
+            <OverflowMenu
               v-if="auth.user"
-              :to="`/user/${auth.user.username}`"
-              class="iconified-button account-button"
+              class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+              :options="[
+                {
+                  id: 'servers',
+                  link: 'https://bisecthosting.com/modrinth',
+                  shown: false,
+                },
+                {
+                  id: 'app',
+                  link: '/app',
+                },
+                {
+                  id: 'plus',
+                  color: 'purple',
+                  link: '/plus',
+                },
+              ]"
             >
-              <Avatar
-                :src="auth.user.avatar_url"
-                class="user-icon"
-                :alt="formatMessage(messages.yourAvatarAlt)"
-                aria-hidden="true"
-                circle
-              />
-              <div class="account-text">
-                <div>@{{ auth.user.username }}</div>
-                <div>{{ formatMessage(commonMessages.visitYourProfile) }}</div>
-              </div>
-            </NuxtLink>
-            <nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
-              <LogInIcon /> {{ formatMessage(commonMessages.signInButton) }}
-            </nuxt-link>
-          </div>
-          <div class="links">
-            <template v-if="auth.user">
-              <button class="iconified-button danger-button" @click="logoutUser()">
-                <LogOutIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.signOutButton) }}
-              </button>
-              <button class="iconified-button" @click="$refs.modal_creation.show()">
-                <PlusIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.createAProjectButton) }}
-              </button>
-              <NuxtLink class="iconified-button" to="/dashboard/collections">
-                <LibraryIcon class="icon" />
-                {{ formatMessage(commonMessages.collectionsLabel) }}
-              </NuxtLink>
-              <NuxtLink
-                v-if="auth.user.role === 'moderator' || auth.user.role === 'admin'"
-                class="iconified-button"
-                to="/moderation"
-              >
-                <ModerationIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.moderationLabel) }}
-              </NuxtLink>
-              <NuxtLink v-if="flags.developerMode" class="iconified-button" to="/flags">
-                <ReportIcon aria-hidden="true" />
-                Feature flags
-              </NuxtLink>
-            </template>
-            <NuxtLink class="iconified-button" to="/settings">
-              <SettingsIcon aria-hidden="true" />
-              {{ formatMessage(commonMessages.settingsLabel) }}
-            </NuxtLink>
-            <button class="iconified-button" @click="changeTheme">
-              <MoonIcon v-if="$theme.active === 'light'" class="icon" />
-              <SunIcon v-else class="icon" />
-              <span class="dropdown-item__text">
-                {{ formatMessage(messages.changeTheme) }}
-              </span>
-            </button>
-          </div>
+              <HamburgerIcon /> More <DropdownIcon class="h-5 w-5 text-secondary" />
+              <template #servers> <ServerIcon /> Host a server </template>
+              <template #app> <DownloadIcon /> Get Modrinth App </template>
+              <template #plus> <ArrowBigUpDashIcon /> Upgrade to Modrinth+ </template>
+            </OverflowMenu>
+          </ButtonStyled>
+        </div>
+        <div class="hidden lg:contents">
+          <ButtonStyled v-if="false" type="transparent">
+            <a href="https://bisecthosting.com/modrinth"> <ServerIcon /> Host a server </a>
+          </ButtonStyled>
+          <ButtonStyled type="transparent">
+            <NuxtLink to="/app"> <DownloadIcon /> Get Modrinth App </NuxtLink>
+          </ButtonStyled>
+          <ButtonStyled type="transparent" color="purple">
+            <NuxtLink to="/plus"> <ArrowBigUpDashIcon /> Upgrade to Modrinth+ </NuxtLink>
+          </ButtonStyled>
         </div>
-        <div class="mobile-navbar" :class="{ expanded: isBrowseMenuOpen || isMobileMenuOpen }">
+      </div>
+      <div class="flex items-center gap-2">
+        <ButtonStyled type="transparent">
+          <OverflowMenu
+            v-if="auth.user"
+            class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+            position="bottom"
+            direction="left"
+            :options="[
+              {
+                id: 'new-project',
+                action: (event) => $refs.modal_creation.show(event),
+              },
+              {
+                id: 'new-collection',
+                action: (event) => $refs.modal_collection_creation.show(event),
+              },
+              { divider: true },
+              {
+                id: 'new-organization',
+                action: (event) => $refs.modal_organization_creation.show(event),
+              },
+            ]"
+          >
+            <PlusIcon /> <DropdownIcon class="h-5 w-5 text-secondary" />
+            <template #new-project> <BoxIcon /> New project </template>
+            <!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
+            <template #new-collection> <CollectionIcon /> New collection </template>
+            <template #new-organization> <OrganizationIcon /> New organization </template>
+          </OverflowMenu>
+        </ButtonStyled>
+        <OverflowMenu
+          v-if="auth.user"
+          class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+          :options="userMenuOptions"
+        >
+          <Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
+          <DropdownIcon class="h-5 w-5 text-secondary" />
+          <template #profile> <UserIcon aria-hidden="true" /> Profile </template>
+          <template #notifications> <BellIcon aria-hidden="true" /> Notifications </template>
+          <template #saved> <BookmarkIcon aria-hidden="true" /> Saved projects </template>
+          <template #settings> <SettingsIcon aria-hidden="true" /> Settings </template>
+          <template #projects> <BoxIcon aria-hidden="true" /> Projects </template>
+          <template #organizations>
+            <OrganizationIcon aria-hidden="true" /> Organizations
+          </template>
+          <template #revenue> <CurrencyIcon aria-hidden="true" /> Revenue </template>
+          <template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
+          <template #sign-out> <LogOutIcon aria-hidden="true" /> Sign out </template>
+        </OverflowMenu>
+      </div>
+    </header>
+    <header class="mobile-navigation mobile-only">
+      <div
+        class="nav-menu nav-menu-browse"
+        :class="{ expanded: isBrowseMenuOpen }"
+        @focusin="isBrowseMenuOpen = true"
+        @focusout="isBrowseMenuOpen = false"
+      >
+        <div class="links cascade-links">
           <NuxtLink
-            to="/"
-            class="tab button-animation"
-            :title="formatMessage(navMenuMessages.home)"
+            v-for="navRoute in navRoutes"
+            :key="navRoute.href"
+            :to="navRoute.href"
+            class="iconified-button"
           >
-            <HomeIcon />
+            {{ navRoute.label }}
           </NuxtLink>
-          <button
-            class="tab button-animation"
-            :class="{ 'router-link-exact-active': isBrowseMenuOpen }"
-            :title="formatMessage(navMenuMessages.search)"
-            @click="toggleBrowseMenu()"
+        </div>
+      </div>
+      <div
+        class="nav-menu nav-menu-mobile"
+        :class="{ expanded: isMobileMenuOpen }"
+        @focusin="isMobileMenuOpen = true"
+        @focusout="isMobileMenuOpen = false"
+      >
+        <div class="account-container">
+          <NuxtLink
+            v-if="auth.user"
+            :to="`/user/${auth.user.username}`"
+            class="iconified-button account-button"
           >
-            <template v-if="auth.user">
-              <SearchIcon />
-            </template>
-            <template v-else>
-              <SearchIcon class="smaller" />
-              {{ formatMessage(navMenuMessages.search) }}
-            </template>
-          </button>
+            <Avatar
+              :src="auth.user.avatar_url"
+              class="user-icon"
+              :alt="formatMessage(messages.yourAvatarAlt)"
+              aria-hidden="true"
+              circle
+            />
+            <div class="account-text">
+              <div>@{{ auth.user.username }}</div>
+              <div>{{ formatMessage(commonMessages.visitYourProfile) }}</div>
+            </div>
+          </NuxtLink>
+          <nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
+            <LogInIcon /> {{ formatMessage(commonMessages.signInButton) }}
+          </nuxt-link>
+        </div>
+        <div class="links">
           <template v-if="auth.user">
-            <NuxtLink
-              to="/dashboard/notifications"
-              class="tab button-animation"
-              :class="{
-                'no-active': isMobileMenuOpen || isBrowseMenuOpen,
-              }"
-              :title="formatMessage(commonMessages.notificationsLabel)"
-              @click="
-                () => {
-                  isMobileMenuOpen = false;
-                  isBrowseMenuOpen = false;
-                }
-              "
-            >
-              <NotificationIcon />
+            <button class="iconified-button danger-button" @click="logoutUser()">
+              <LogOutIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.signOutButton) }}
+            </button>
+            <button class="iconified-button" @click="$refs.modal_creation.show()">
+              <PlusIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.createAProjectButton) }}
+            </button>
+            <NuxtLink class="iconified-button" to="/dashboard/collections">
+              <LibraryIcon class="icon" />
+              {{ formatMessage(commonMessages.collectionsLabel) }}
             </NuxtLink>
             <NuxtLink
-              to="/dashboard"
-              class="tab button-animation"
-              :title="formatMessage(commonMessages.dashboardLabel)"
+              v-if="auth.user.role === 'moderator' || auth.user.role === 'admin'"
+              class="iconified-button"
+              to="/moderation"
             >
-              <ChartIcon />
+              <ModerationIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.moderationLabel) }}
+            </NuxtLink>
+            <NuxtLink v-if="flags.developerMode" class="iconified-button" to="/flags">
+              <ReportIcon aria-hidden="true" />
+              Feature flags
             </NuxtLink>
           </template>
-          <button
-            class="tab button-animation"
-            :title="formatMessage(messages.toggleMenu)"
-            @click="toggleMobileMenu()"
-          >
-            <template v-if="!auth.user">
-              <HamburgerIcon v-if="!isMobileMenuOpen" />
-              <CrossIcon v-else />
-            </template>
-            <template v-else>
-              <Avatar
-                :src="auth.user.avatar_url"
-                class="user-icon"
-                :class="{ expanded: isMobileMenuOpen }"
-                :alt="formatMessage(messages.yourAvatarAlt)"
-                aria-hidden="true"
-                circle
-              />
-            </template>
+          <NuxtLink class="iconified-button" to="/settings">
+            <SettingsIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.settingsLabel) }}
+          </NuxtLink>
+          <button class="iconified-button" @click="changeTheme">
+            <MoonIcon v-if="$theme.active === 'light'" class="icon" />
+            <SunIcon v-else class="icon" />
+            <span class="dropdown-item__text">
+              {{ formatMessage(messages.changeTheme) }}
+            </span>
           </button>
         </div>
-      </section>
+      </div>
+      <div class="mobile-navbar" :class="{ expanded: isBrowseMenuOpen || isMobileMenuOpen }">
+        <NuxtLink to="/" class="tab button-animation" :title="formatMessage(navMenuMessages.home)">
+          <HomeIcon />
+        </NuxtLink>
+        <button
+          class="tab button-animation"
+          :class="{ 'router-link-exact-active': isBrowseMenuOpen }"
+          :title="formatMessage(navMenuMessages.search)"
+          @click="toggleBrowseMenu()"
+        >
+          <template v-if="auth.user">
+            <SearchIcon />
+          </template>
+          <template v-else>
+            <SearchIcon class="smaller" />
+            {{ formatMessage(navMenuMessages.search) }}
+          </template>
+        </button>
+        <template v-if="auth.user">
+          <NuxtLink
+            to="/dashboard/notifications"
+            class="tab button-animation"
+            :class="{
+              'no-active': isMobileMenuOpen || isBrowseMenuOpen,
+            }"
+            :title="formatMessage(commonMessages.notificationsLabel)"
+            @click="
+              () => {
+                isMobileMenuOpen = false;
+                isBrowseMenuOpen = false;
+              }
+            "
+          >
+            <NotificationIcon />
+          </NuxtLink>
+          <NuxtLink
+            to="/dashboard"
+            class="tab button-animation"
+            :title="formatMessage(commonMessages.dashboardLabel)"
+          >
+            <ChartIcon />
+          </NuxtLink>
+        </template>
+        <button
+          class="tab button-animation"
+          :title="formatMessage(messages.toggleMenu)"
+          @click="toggleMobileMenu()"
+        >
+          <template v-if="!auth.user">
+            <HamburgerIcon v-if="!isMobileMenuOpen" />
+            <CrossIcon v-else />
+          </template>
+          <template v-else>
+            <Avatar
+              :src="auth.user.avatar_url"
+              class="user-icon"
+              :class="{ expanded: isMobileMenuOpen }"
+              :alt="formatMessage(messages.yourAvatarAlt)"
+              aria-hidden="true"
+              circle
+            />
+          </template>
+        </button>
+      </div>
     </header>
     <main>
       <ModalCreation v-if="auth.user" ref="modal_creation" />
+      <CollectionCreateModal ref="modal_collection_creation" />
+      <OrganizationCreateModal ref="modal_organization_creation" />
       <slot id="main" />
     </main>
     <footer>
@@ -435,35 +447,48 @@
 </template>
 <script setup>
 import {
+  ArrowBigUpDashIcon,
+  BookmarkIcon,
+  ServerIcon,
   LogInIcon,
   DownloadIcon,
   LibraryIcon,
   XIcon,
   IssuesIcon,
   ReportIcon,
+  CompassIcon,
+  HamburgerIcon,
+  SearchIcon,
+  BellIcon,
+  SettingsIcon,
+  ScaleIcon,
+  HomeIcon,
+  MoonIcon,
+  SunIcon,
+  PlusIcon,
+  DropdownIcon,
+  LogOutIcon,
+  ChartIcon,
+  BoxIcon,
+  CollectionIcon,
+  OrganizationIcon,
+  UserIcon,
+  CurrencyIcon,
+  BracesIcon,
+  GlassesIcon,
+  PaintBrushIcon,
+  PackageOpenIcon,
 } from "@modrinth/assets";
-import { Button } from "@modrinth/ui";
-import HamburgerIcon from "~/assets/images/utils/hamburger.svg?component";
-import CrossIcon from "~/assets/images/utils/x.svg?component";
-import SearchIcon from "~/assets/images/utils/search.svg?component";
-
-import NotificationIcon from "~/assets/images/sidebar/notifications.svg?component";
-import SettingsIcon from "~/assets/images/sidebar/settings.svg?component";
-import ModerationIcon from "~/assets/images/sidebar/admin.svg?component";
-import HomeIcon from "~/assets/images/sidebar/home.svg?component";
-
-import MoonIcon from "~/assets/images/utils/moon.svg?component";
-import SunIcon from "~/assets/images/utils/sun.svg?component";
-import PlusIcon from "~/assets/images/utils/plus.svg?component";
-import DropdownIcon from "~/assets/images/utils/dropdown.svg?component";
-import LogOutIcon from "~/assets/images/utils/log-out.svg?component";
-import ChartIcon from "~/assets/images/utils/chart.svg?component";
-
-import NavRow from "~/components/ui/NavRow.vue";
+import { Button, ButtonStyled, OverflowMenu, Avatar } from "@modrinth/ui";
+
 import ModalCreation from "~/components/ui/ModalCreation.vue";
-import Avatar from "~/components/ui/Avatar.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import { commonMessages } from "~/utils/common-messages.ts";
+import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
+import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
+import CrossIcon from "assets/images/utils/x.svg";
+import NotificationIcon from "assets/images/sidebar/notifications.svg";
+import ModerationIcon from "assets/images/sidebar/admin.svg";
 
 const { formatMessage } = useVIntl();
 
@@ -525,7 +550,7 @@ const stagingBannerMessages = defineMessages({
   description: {
     id: "layout.banner.staging.description",
     defaultMessage:
-      "The staging environment is running on a copy of the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance.",
+      "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance.",
   },
 });
 
@@ -685,6 +710,63 @@ const navRoutes = computed(() => [
   },
 ]);
 
+const userMenuOptions = computed(() => {
+  let options = [
+    {
+      id: "profile",
+      link: `/user/${auth.value.user.username}`,
+    },
+    {
+      id: "notifications",
+      link: "/dashboard/notifications",
+    },
+    {
+      id: "saved",
+      link: "/dashboard/collections",
+    },
+    {
+      id: "settings",
+      link: "/settings",
+    },
+  ];
+  // TODO: Only show if user has projects
+  options = [
+    ...options,
+    {
+      divider: true,
+    },
+    {
+      id: "projects",
+      link: "/dashboard/projects",
+    },
+    {
+      id: "organizations",
+      link: "/dashboard/organizations",
+    },
+    {
+      id: "revenue",
+      link: "/dashboard/revenue",
+    },
+    {
+      id: "analytics",
+      link: "/dashboard/analytics",
+    },
+  ];
+  options = [
+    ...options,
+    {
+      divider: true,
+    },
+    {
+      id: "sign-out",
+      color: "danger",
+      action: () => logoutUser(),
+      hoverFilled: true,
+    },
+  ];
+  return options;
+});
+
 onMounted(() => {
   if (window && import.meta.client) {
     window.history.scrollRestoration = "auto";
@@ -795,507 +877,6 @@ function hideStagingBanner() {
     margin-bottom: calc(var(--size-mobile-navbar-height) + 2rem);
   }
 
-  .site-header {
-    max-width: 100vw;
-
-    @media screen and (min-width: 1024px) {
-      margin-top: var(--spacing-card-md);
-      margin-bottom: var(--spacing-card-md);
-    }
-
-    @media screen and (min-width: 1280px) {
-      border-radius: var(--size-rounded-sm);
-      max-width: 1280px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .navbar {
-      padding: 0 0.75rem;
-      max-width: 1280px;
-      margin-left: auto;
-      margin-right: auto;
-
-      section.logo {
-        display: flex;
-        justify-content: space-between;
-        color: var(--color-text-dark);
-        z-index: 5;
-
-        a {
-          align-items: center;
-          display: flex;
-
-          &:not(:focus-visible) {
-            outline: none;
-
-            &.router-link-exact-active {
-              outline: 2px solid transparent;
-              border-radius: 0.25rem;
-            }
-          }
-        }
-
-        .small-logo {
-          display: block;
-        }
-
-        svg {
-          height: 1.75rem;
-          width: auto;
-        }
-
-        button {
-          background: none;
-          border: none;
-          margin: 0 0 0 0.5rem;
-          padding: 0;
-
-          svg {
-            height: 1.5rem;
-            width: 1.5rem;
-          }
-        }
-      }
-
-      section.nav-group {
-        display: flex;
-        flex-grow: 5;
-        z-index: 5;
-
-        section.nav {
-          flex-grow: 5;
-
-          .navigation {
-            display: flex;
-            width: fit-content;
-            position: relative;
-            top: 50%;
-            transform: translateY(-50%);
-            margin-left: 2rem;
-            grid-gap: 1.5rem;
-
-            a {
-              margin-left: 0;
-              margin-right: auto;
-            }
-
-            a.tab {
-              padding: 0;
-              margin-right: 1rem;
-              display: flex;
-              align-items: flex-start;
-
-              &--alpha::after {
-                content: "Alpha";
-                background-color: var(--color-warning-bg);
-                color: var(--color-warning-text);
-                border-radius: 1rem;
-                padding: 0.25rem 0.5rem;
-                margin-left: 0.4rem;
-                font-size: 0.7rem;
-              }
-            }
-          }
-        }
-
-        .user-outer {
-          z-index: 5;
-        }
-
-        section.user-controls {
-          align-items: center;
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          position: relative;
-          top: 50%;
-          transform: translateY(-50%);
-          min-width: 6rem;
-          gap: 0.25rem;
-
-          .control-button {
-            position: relative;
-            display: flex;
-            padding: 0.5rem;
-            color: var(--color-text);
-            border-radius: 2rem;
-            transition: filter 0.1s ease-in-out;
-            border: 2px solid transparent;
-            box-sizing: border-box;
-
-            svg {
-              height: 1.25rem;
-              width: 1.25rem;
-            }
-
-            &.bubble {
-              &::after {
-                background-color: var(--color-brand);
-                border-radius: var(--size-rounded-max);
-                content: "";
-                height: 0.5rem;
-                position: absolute;
-                right: 0.25rem;
-                top: 0.5rem;
-                width: 0.5rem;
-              }
-            }
-
-            //&.router-link-exact-active {
-            //  color: var(--color-button-text-active);
-            //  background-color: var(--color-button-bg);
-            //}
-          }
-
-          .hide-desktop {
-            display: none;
-          }
-
-          .dropdown {
-            position: relative;
-            margin-left: 0.5rem;
-
-            .control {
-              align-items: center;
-              background: none;
-              display: flex;
-              justify-content: center;
-              padding: 0;
-              outline: none;
-
-              .user-icon {
-                min-height: unset;
-                min-width: unset;
-                height: 2rem !important;
-                width: 2rem !important;
-                outline: 2px solid var(--color-raised-bg);
-                transition: outline-color 0.1s ease-in-out;
-              }
-
-              .caret {
-                color: var(--color-button-text);
-                margin-left: 0.25rem;
-                width: 1rem;
-              }
-            }
-
-            .content {
-              border: 1px solid var(--color-divider-dark);
-              list-style: none;
-              margin: 0.5rem 0 0 0;
-              max-width: 25rem;
-              min-width: 12rem;
-              opacity: 0;
-              padding: 1rem;
-              position: absolute;
-              right: -1rem;
-              transform: scaleY(0.9);
-              transform-origin: top;
-              transition:
-                all 0.1s ease-in-out 0.05s,
-                color 0s ease-in-out 0s,
-                background-color 0s ease-in-out 0s,
-                border-color 0s ease-in-out 0s;
-              visibility: hidden;
-              width: max-content;
-              z-index: 1;
-              box-shadow: var(--shadow-floating);
-
-              .divider {
-                background-color: var(--color-divider-dark);
-                border: none;
-                color: var(--color-divider-dark);
-                height: 1px;
-                margin: 0.5rem 0;
-              }
-
-              .item {
-                align-items: center;
-                border-radius: 0.5rem;
-                box-sizing: border-box;
-                color: inherit;
-                display: flex;
-                padding: 0.5rem 0.75rem;
-                width: 100%;
-                outline: none;
-
-                .icon {
-                  margin-right: 0.5rem;
-                  height: 20px;
-                  width: 20px;
-                }
-
-                &.router-link-exact-active {
-                  color: var(--color-button-text-active);
-                  background-color: var(--color-button-bg);
-                  outline: 2px solid transparent;
-
-                  &.primary-color {
-                    color: var(--color-button-text-active);
-                    background-color: var(--color-brand-highlight);
-                  }
-                }
-
-                &.primary-color {
-                  color: var(--color-brand);
-                }
-              }
-
-              .profile-link {
-                .prompt {
-                  margin-top: 0.25rem;
-                  color: var(--color-text-secondary);
-                }
-              }
-            }
-
-            @media screen and (max-width: 1300px) {
-              .content {
-                margin-right: 1rem;
-              }
-            }
-          }
-
-          .dropdown:hover .user-icon {
-            outline-color: var(--color-brand);
-          }
-
-          .dropdown:hover:not(.closed) .content,
-          .dropdown:focus:not(.closed) .content,
-          .dropdown:focus-within:not(.closed) .content {
-            opacity: 1;
-            transform: scaleY(1);
-            visibility: visible;
-          }
-        }
-
-        section.auth-prompt {
-          display: flex;
-          align-items: center;
-          height: 100%;
-          margin: 0;
-          gap: 0.5rem;
-
-          .log-in-button {
-            margin: 0 auto;
-          }
-        }
-      }
-
-      @media screen and (max-width: 1095px) {
-        display: none;
-      }
-    }
-
-    .mobile-navigation {
-      display: none;
-
-      .nav-menu {
-        width: 100%;
-        position: fixed;
-        bottom: calc(var(--size-mobile-navbar-height) - var(--size-rounded-card));
-        padding-bottom: var(--size-rounded-card);
-        left: 0;
-        background-color: var(--color-raised-bg);
-        z-index: 6;
-        transform: translateY(100%);
-        transition: transform 0.4s cubic-bezier(0.54, 0.84, 0.42, 1);
-        border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0);
-
-        .links,
-        .account-container {
-          display: grid;
-          grid-template-columns: repeat(1, 1fr);
-          grid-gap: 1rem;
-          justify-content: center;
-          padding: 1rem;
-
-          .iconified-button {
-            width: 100%;
-            max-width: 500px;
-            padding: 0.75rem;
-            justify-content: center;
-            font-weight: 600;
-            font-size: 1rem;
-            margin: 0 auto;
-          }
-        }
-
-        .cascade-links {
-          @media screen and (min-width: 354px) {
-            grid-template-columns: repeat(2, 1fr);
-          }
-          @media screen and (min-width: 674px) {
-            grid-template-columns: repeat(3, 1fr);
-          }
-        }
-
-        &-browse {
-          &.expanded {
-            transform: translateY(0);
-            box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
-          }
-        }
-
-        &-mobile {
-          .account-container {
-            padding-bottom: 0;
-
-            .account-button {
-              padding: var(--spacing-card-md);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              gap: 0.5rem;
-
-              .user-icon {
-                width: 2.25rem;
-                height: 2.25rem;
-              }
-
-              .account-text {
-                flex-grow: 0;
-              }
-            }
-          }
-
-          &.expanded {
-            transform: translateY(0);
-            box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
-          }
-        }
-      }
-
-      .mobile-navbar {
-        display: flex;
-        height: calc(var(--size-mobile-navbar-height) + env(safe-area-inset-bottom));
-        border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
-        padding-bottom: env(safe-area-inset-bottom);
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        background-color: var(--color-raised-bg);
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
-        z-index: 7;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-        transition: border-radius 0.3s ease-out;
-        border-top: 2px solid rgba(0, 0, 0, 0);
-        box-sizing: border-box;
-
-        &.expanded {
-          box-shadow: none;
-          border-radius: 0;
-        }
-
-        .tab {
-          position: relative;
-          background: none;
-          display: flex;
-          flex-basis: 0;
-          justify-content: center;
-          align-items: center;
-          flex-direction: row;
-          gap: 0.25rem;
-          font-weight: bold;
-          padding: 0;
-          transition: color ease-in-out 0.15s;
-          color: var(--color-text-inactive);
-          text-align: center;
-
-          &.browse {
-            svg {
-              transform: rotate(180deg);
-              transition: transform ease-in-out 0.3s;
-
-              &.closed {
-                transform: rotate(0deg);
-              }
-            }
-          }
-
-          &.bubble {
-            &::after {
-              background-color: var(--color-brand);
-              border-radius: var(--size-rounded-max);
-              content: "";
-              height: 0.5rem;
-              position: absolute;
-              left: 1.5rem;
-              top: 0;
-              width: 0.5rem;
-            }
-          }
-
-          svg {
-            height: 1.75rem;
-            width: 1.75rem;
-
-            &.smaller {
-              width: 1.25rem;
-              height: 1.25rem;
-            }
-          }
-
-          .user-icon {
-            width: 2rem;
-            height: 2rem;
-            transition: border ease-in-out 0.15s;
-            border: 0 solid var(--color-brand);
-            box-sizing: border-box;
-
-            &.expanded {
-              border: 2px solid var(--color-brand);
-            }
-          }
-
-          &:hover,
-          &:focus {
-            color: var(--color-text);
-          }
-
-          &:first-child {
-            margin-left: 2rem;
-          }
-
-          &:last-child {
-            margin-right: 2rem;
-          }
-
-          &.router-link-exact-active:not(&.no-active) {
-            svg {
-              color: var(--color-brand);
-            }
-
-            color: var(--color-brand);
-          }
-        }
-      }
-
-      @media screen and (max-width: 1095px) {
-        display: flex;
-      }
-    }
-
-    div {
-      flex-grow: 1;
-      justify-content: end;
-      align-items: center;
-      row-gap: 1rem;
-    }
-
-    &.active {
-      display: flex;
-
-      @media screen and (min-width: 1095px) {
-        display: none;
-      }
-    }
-  }
-
   main {
     grid-area: main;
   }
@@ -1483,5 +1064,209 @@ function hideStagingBanner() {
     display: none;
   }
 }
+
+.mobile-navigation {
+  display: none;
+
+  .nav-menu {
+    width: 100%;
+    position: fixed;
+    bottom: calc(var(--size-mobile-navbar-height) - var(--size-rounded-card));
+    padding-bottom: var(--size-rounded-card);
+    left: 0;
+    background-color: var(--color-raised-bg);
+    z-index: 6;
+    transform: translateY(100%);
+    transition: transform 0.4s cubic-bezier(0.54, 0.84, 0.42, 1);
+    border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
+    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0);
+
+    .links,
+    .account-container {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      grid-gap: 1rem;
+      justify-content: center;
+      padding: 1rem;
+
+      .iconified-button {
+        width: 100%;
+        max-width: 500px;
+        padding: 0.75rem;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 1rem;
+        margin: 0 auto;
+      }
+    }
+
+    .cascade-links {
+      @media screen and (min-width: 354px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      @media screen and (min-width: 674px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    &-browse {
+      &.expanded {
+        transform: translateY(0);
+        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &-mobile {
+      .account-container {
+        padding-bottom: 0;
+
+        .account-button {
+          padding: var(--spacing-card-md);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+
+          .user-icon {
+            width: 2.25rem;
+            height: 2.25rem;
+          }
+
+          .account-text {
+            flex-grow: 0;
+          }
+        }
+      }
+
+      &.expanded {
+        transform: translateY(0);
+        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+
+  .mobile-navbar {
+    display: flex;
+    height: calc(var(--size-mobile-navbar-height) + env(safe-area-inset-bottom));
+    border-radius: var(--size-rounded-card) var(--size-rounded-card) 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background-color: var(--color-raised-bg);
+    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+    z-index: 7;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    transition: border-radius 0.3s ease-out;
+    border-top: 2px solid rgba(0, 0, 0, 0);
+    box-sizing: border-box;
+
+    &.expanded {
+      box-shadow: none;
+      border-radius: 0;
+    }
+
+    .tab {
+      position: relative;
+      background: none;
+      display: flex;
+      flex-basis: 0;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      gap: 0.25rem;
+      font-weight: bold;
+      padding: 0;
+      transition: color ease-in-out 0.15s;
+      color: var(--color-text-inactive);
+      text-align: center;
+
+      &.browse {
+        svg {
+          transform: rotate(180deg);
+          transition: transform ease-in-out 0.3s;
+
+          &.closed {
+            transform: rotate(0deg);
+          }
+        }
+      }
+
+      &.bubble {
+        &::after {
+          background-color: var(--color-brand);
+          border-radius: var(--size-rounded-max);
+          content: "";
+          height: 0.5rem;
+          position: absolute;
+          left: 1.5rem;
+          top: 0;
+          width: 0.5rem;
+        }
+      }
+
+      svg {
+        height: 1.75rem;
+        width: 1.75rem;
+
+        &.smaller {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
+
+      .user-icon {
+        width: 2rem;
+        height: 2rem;
+        transition: border ease-in-out 0.15s;
+        border: 0 solid var(--color-brand);
+        box-sizing: border-box;
+
+        &.expanded {
+          border: 2px solid var(--color-brand);
+        }
+      }
+
+      &:hover,
+      &:focus {
+        color: var(--color-text);
+      }
+
+      &:first-child {
+        margin-left: 2rem;
+      }
+
+      &:last-child {
+        margin-right: 2rem;
+      }
+
+      &.router-link-exact-active:not(&.no-active) {
+        svg {
+          color: var(--color-brand);
+        }
+
+        color: var(--color-brand);
+      }
+    }
+  }
+}
+
+@media (any-hover: none) and (max-width: 600px) {
+  .desktop-only {
+    display: none;
+  }
+}
+
+@media (any-hover: none) and (max-width: 600px) {
+  .mobile-navigation {
+    display: flex;
+  }
+
+  main {
+    padding-top: 0.75rem;
+  }
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 403ea711a..d0de35dfd 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -404,7 +404,7 @@
     >
       <div class="normal-page__header relative my-4">
         <div
-          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 lg:grid-cols-[1fr_auto]"
+          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 xl:grid-cols-[1fr_auto]"
         >
           <div class="flex gap-4">
             <Avatar :src="project.icon_url" :alt="project.title" size="96px" />
@@ -424,7 +424,7 @@
               </p>
               <div class="mt-auto flex flex-wrap gap-4">
                 <div
-                  class="flex items-center gap-2 border-0 border-r border-solid border-button-bg pr-4"
+                  class="flex items-center gap-3 border-0 border-r border-solid border-button-bg pr-4"
                 >
                   <DownloadIcon class="h-6 w-6 text-secondary" />
                   <span class="font-semibold">
@@ -432,14 +432,14 @@
                   </span>
                 </div>
                 <div
-                  class="flex items-center gap-2 border-0 border-solid border-button-bg pr-4 md:border-r"
+                  class="flex items-center gap-3 border-0 border-solid border-button-bg pr-4 md:border-r"
                 >
                   <HeartIcon class="h-6 w-6 text-secondary" />
                   <span class="font-semibold">
                     {{ $formatNumber(project.followers) }}
                   </span>
                 </div>
-                <div class="hidden items-center gap-2 md:flex">
+                <div class="hidden items-center gap-3 md:flex">
                   <TagsIcon class="h-6 w-6 text-secondary" />
                   <div class="flex flex-wrap gap-2">
                     <div
@@ -524,7 +524,10 @@
                     <div v-else class="menu-text">
                       <p class="popout-text">No collections found.</p>
                     </div>
-                    <button class="btn collection-button" @click="$refs.modal_collection.show()">
+                    <button
+                      class="btn collection-button"
+                      @click="(event) => $refs.modal_collection.show(event)"
+                    >
                       <PlusIcon />
                       Create new collection
                     </button>
@@ -662,7 +665,6 @@ import {
   CopyrightIcon,
   DownloadIcon,
   ExternalIcon,
-  BoxIcon,
   EyeIcon,
   GameIcon,
   HeartIcon,
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index c9ebceb29..0c0bcb752 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -72,10 +72,10 @@
                   <VersionChannelIndicator :channel="version.version_type" />
                 </div>
               </div>
-              <div class="pointer-events-none relative z-[1] flex flex-col justify-center">
-                <div class="font-bold text-contrast group-hover:underline">
-                  {{ version.version_number }}
-                </div>
+              <div
+                class="pointer-events-none relative z-[1] flex flex-col justify-center group-hover:underline"
+              >
+                <div class="font-bold text-contrast">{{ version.version_number }}</div>
                 <div class="text-xs font-medium">{{ version.name }}</div>
               </div>
             </div>
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 6cf264d15..d3e34d67e 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -11,7 +11,7 @@
           <XIcon />
         </Button>
       </div>
-      <Button color="primary" @click="$refs.modal_creation.show()">
+      <Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
         <PlusIcon /> {{ formatMessage(messages.createNewButton) }}
       </Button>
     </div>
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index 865c39773..71a0705fc 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -76,8 +76,8 @@ if (error.value) {
   });
 }
 
-const openCreateOrgModal = () => {
-  createOrgModal.value?.show();
+const openCreateOrgModal = (event) => {
+  createOrgModal.value?.show(event);
 };
 </script>
 
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index e84b612b8..9d29f3443 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -5,7 +5,7 @@
     <div class="new-page sidebar">
       <div class="normal-page__header pt-4">
         <div
-          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 lg:grid-cols-[1fr_auto]"
+          class="grid grid-cols-1 gap-x-8 gap-y-6 border-0 border-b border-solid border-button-bg pb-6 xl:grid-cols-[1fr_auto]"
         >
           <div class="flex gap-4">
             <Avatar :src="user.avatar_url" :alt="user.username" size="96px" circle />
@@ -178,7 +178,10 @@
           <span v-if="auth.user && auth.user.id === user.id" class="preserve-lines text">
             <IntlFormatted :message-id="messages.profileNoCollectionsAuthLabel">
               <template #create-link="{ children }">
-                <a class="link" @click.prevent="$refs.modal_collection_creation.show()">
+                <a
+                  class="link"
+                  @click.prevent="(event) => $refs.modal_collection_creation.show(event)"
+                >
                   <component :is="() => children" />
                 </a>
               </template>
diff --git a/packages/assets/icons/arrow-big-up-dash.svg b/packages/assets/icons/arrow-big-up-dash.svg
new file mode 100644
index 000000000..eaaac64b6
--- /dev/null
+++ b/packages/assets/icons/arrow-big-up-dash.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-arrow-big-up-dash"><path d="M9 19h6"/><path d="M9 15v-3H5l7-7 7 7h-4v3H9z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/box-import.svg b/packages/assets/icons/box-import.svg
new file mode 100644
index 000000000..e314287d5
--- /dev/null
+++ b/packages/assets/icons/box-import.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13v6M21 10V8c0-.7-.4-1.4-1-1.7l-7-4c-.6-.4-1.4-.4-2 0l-7 4c-.6.3-1 1-1 1.7v8c0 .7.4 1.4 1 1.7l7 4c.6.4 1.4.4 2 0l2-1.1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3.3 7 8.7 5 8.7-5M12 22V12M22 16l-3 3-3-3"/></svg>
diff --git a/packages/assets/icons/braces.svg b/packages/assets/icons/braces.svg
new file mode 100644
index 000000000..5531dcd25
--- /dev/null
+++ b/packages/assets/icons/braces.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-braces"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/collection.svg b/packages/assets/icons/collection.svg
new file mode 100644
index 000000000..1071da56a
--- /dev/null
+++ b/packages/assets/icons/collection.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-square-library"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7v10"/><path d="M11 7v10"/><path d="m15 7 2 10"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/glasses.svg b/packages/assets/icons/glasses.svg
new file mode 100644
index 000000000..c2f910ec5
--- /dev/null
+++ b/packages/assets/icons/glasses.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-glasses"><circle cx="6" cy="15" r="4"/><circle cx="18" cy="15" r="4"/><path d="M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/><path d="M2.5 13 5 7c.7-1.3 1.4-2 3-2"/><path d="M21.5 13 19 7c-.7-1.3-1.5-2-3-2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/organization.svg b/packages/assets/icons/organization.svg
new file mode 100644
index 000000000..d624b2079
--- /dev/null
+++ b/packages/assets/icons/organization.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-building-2"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
diff --git a/packages/assets/icons/package-open.svg b/packages/assets/icons/package-open.svg
new file mode 100644
index 000000000..d99971de9
--- /dev/null
+++ b/packages/assets/icons/package-open.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-package-open"><path d="M12 22v-9"/><path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/><path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/><path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"/></svg>
\ No newline at end of file
diff --git a/packages/assets/icons/window.svg b/packages/assets/icons/window.svg
new file mode 100644
index 000000000..2bba08249
--- /dev/null
+++ b/packages/assets/icons/window.svg
@@ -0,0 +1 @@
+<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" class="lucide lucide-app-window"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 83b9af591..7ee256628 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -29,6 +29,7 @@ import _YouTubeIcon from './icons/youtube.svg?component'
 // Icons
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
+import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
 import _AsteriskIcon from './icons/asterisk.svg?component'
 import _BellIcon from './icons/bell.svg?component'
 import _BellRingIcon from './icons/bell-ring.svg?component'
@@ -36,6 +37,8 @@ import _BookIcon from './icons/book.svg?component'
 import _BookTextIcon from './icons/book-text.svg?component'
 import _BookmarkIcon from './icons/bookmark.svg?component'
 import _BoxIcon from './icons/box.svg?component'
+import _BoxImportIcon from './icons/box-import.svg?component'
+import _BracesIcon from './icons/braces.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
@@ -49,6 +52,7 @@ import _ClientIcon from './icons/client.svg?component'
 import _ClipboardCopyIcon from './icons/clipboard-copy.svg?component'
 import _CodeIcon from './icons/code.svg?component'
 import _CoinsIcon from './icons/coins.svg?component'
+import _CollectionIcon from './icons/collection.svg?component'
 import _CompassIcon from './icons/compass.svg?component'
 import _ContractIcon from './icons/contract.svg?component'
 import _CopyIcon from './icons/copy.svg?component'
@@ -72,6 +76,7 @@ import _FolderSearchIcon from './icons/folder-search.svg?component'
 import _GapIcon from './icons/gap.svg?component'
 import _GameIcon from './icons/game.svg?component'
 import _GitHubIcon from './icons/github.svg?component'
+import _GlassesIcon from './icons/glasses.svg?component'
 import _GlobeIcon from './icons/globe.svg?component'
 import _GridIcon from './icons/grid.svg?component'
 import _HamburgerIcon from './icons/hamburger.svg?component'
@@ -103,6 +108,8 @@ import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
 import _MoreVerticalIcon from './icons/more-vertical.svg?component'
 import _NewspaperIcon from './icons/newspaper.svg?component'
 import _OmorphiaIcon from './icons/omorphia.svg?component'
+import _OrganizationIcon from './icons/organization.svg?component'
+import _PackageOpenIcon from './icons/package-open.svg?component'
 import _PaintBrushIcon from './icons/paintbrush.svg?component'
 import _PlayIcon from './icons/play.svg?component'
 import _PlusIcon from './icons/plus.svg?component'
@@ -146,6 +153,7 @@ import _UserXIcon from './icons/user-x.svg?component'
 import _UsersIcon from './icons/users.svg?component'
 import _VersionIcon from './icons/version.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
+import _WindowIcon from './icons/window.svg?component'
 import _WrenchIcon from './icons/wrench.svg?component'
 import _XIcon from './icons/x.svg?component'
 import _XCircleIcon from './icons/x-circle.svg?component'
@@ -190,6 +198,7 @@ export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
+export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
 export const AsteriskIcon = _AsteriskIcon
 export const BellIcon = _BellIcon
 export const BellRingIcon = _BellRingIcon
@@ -197,6 +206,8 @@ export const BookIcon = _BookIcon
 export const BookTextIcon = _BookTextIcon
 export const BookmarkIcon = _BookmarkIcon
 export const BoxIcon = _BoxIcon
+export const BoxImportIcon = _BoxImportIcon
+export const BracesIcon = _BracesIcon
 export const CalendarIcon = _CalendarIcon
 export const ChartIcon = _ChartIcon
 export const CheckIcon = _CheckIcon
@@ -209,6 +220,7 @@ export const ClientIcon = _ClientIcon
 export const ClipboardCopyIcon = _ClipboardCopyIcon
 export const CodeIcon = _CodeIcon
 export const CoinsIcon = _CoinsIcon
+export const CollectionIcon = _CollectionIcon
 export const CompassIcon = _CompassIcon
 export const ContractIcon = _ContractIcon
 export const CopyIcon = _CopyIcon
@@ -233,6 +245,7 @@ export const FolderSearchIcon = _FolderSearchIcon
 export const GapIcon = _GapIcon
 export const GameIcon = _GameIcon
 export const GitHubIcon = _GitHubIcon
+export const GlassesIcon = _GlassesIcon
 export const GlobeIcon = _GlobeIcon
 export const GridIcon = _GridIcon
 export const HamburgerIcon = _HamburgerIcon
@@ -264,6 +277,8 @@ export const MoreHorizontalIcon = _MoreHorizontalIcon
 export const MoreVerticalIcon = _MoreVerticalIcon
 export const NewspaperIcon = _NewspaperIcon
 export const OmorphiaIcon = _OmorphiaIcon
+export const OrganizationIcon = _OrganizationIcon
+export const PackageOpenIcon = _PackageOpenIcon
 export const PaintBrushIcon = _PaintBrushIcon
 export const PlayIcon = _PlayIcon
 export const PlusIcon = _PlusIcon
@@ -306,6 +321,7 @@ export const UserXIcon = _UserXIcon
 export const UsersIcon = _UsersIcon
 export const VersionIcon = _VersionIcon
 export const WikiIcon = _WikiIcon
+export const WindowIcon = _WindowIcon
 export const WrenchIcon = _WrenchIcon
 export const XIcon = _XIcon
 export const XCircleIcon = _XCircleIcon
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 0562112d8..6421525a6 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -206,5 +206,30 @@ const colorVariables = computed(() => {
   min-height: var(--_icon-size, 1rem);
 }
 
+.joined-buttons {
+  display: flex;
+  gap: 1px;
+
+  > .btn-wrapper:not(:first-child) {
+    :slotted(:is(button, a, .button-like):first-child),
+    :slotted(*) > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  > :not(:last-child) {
+    :slotted(:is(button, a, .button-like):first-child),
+    :slotted(*) > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
+    :slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
 /* guys, I know this is nuts, I know */
 </style>
diff --git a/packages/ui/src/components/base/DropdownSelect.vue b/packages/ui/src/components/base/DropdownSelect.vue
index 0be782f83..00ad04349 100644
--- a/packages/ui/src/components/base/DropdownSelect.vue
+++ b/packages/ui/src/components/base/DropdownSelect.vue
@@ -191,7 +191,7 @@ const isChildOfDropdown = (element) => {
 <style lang="scss" scoped>
 .animated-dropdown {
   width: 20rem;
-  min-height: 40px;
+  height: 40px;
   position: relative;
   display: inline-block;
 
@@ -267,6 +267,10 @@ const isChildOfDropdown = (element) => {
       cursor: pointer;
       user-select: none;
 
+      > label {
+        cursor: pointer;
+      }
+
       &:hover {
         filter: brightness(0.85);
         transition: filter 0.2s ease-in-out;
diff --git a/packages/ui/src/components/base/OverflowMenu.vue b/packages/ui/src/components/base/OverflowMenu.vue
index 76d6b0818..a00ab2b3a 100644
--- a/packages/ui/src/components/base/OverflowMenu.vue
+++ b/packages/ui/src/components/base/OverflowMenu.vue
@@ -23,8 +23,8 @@
           transparent
           :action="
             option.action
-              ? () => {
-                  option.action()
+              ? (event) => {
+                  option.action(event)
                   if (!option.remainOnClick) {
                     close()
                   }