diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 1f5082b136..e16ead5cdd 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -189,13 +189,26 @@ const [allLoaders, allGameVersions] = await Promise.all([
   get_game_versions().catch(handleError).then(ref),
 ])
 
+async function loadVersionsInBatches(versionIds) {
+  const batchSize = 200
+  const batches = []
+
+  for (let i = 0; i < versionIds.length; i += batchSize) {
+    const batch = versionIds.slice(i, i + batchSize)
+    batches.push(get_version_many(batch, 'must_revalidate').catch(handleError))
+  }
+
+  const batchResults = await Promise.all(batches)
+  return batchResults.flat()
+}
+
 async function fetchProjectData() {
   const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)
 
   data.value = project
   ;[versions.value, members.value, categories.value, instance.value, instanceProjects.value] =
     await Promise.all([
-      get_version_many(project.versions, 'must_revalidate').catch(handleError),
+      loadVersionsInBatches(project.versions).catch(handleError),
       get_team(project.team).catch(handleError),
       get_categories().catch(handleError),
       route.query.i ? getInstance(route.query.i).catch(handleError) : Promise.resolve(),
diff --git a/apps/frontend/src/components/ui/CommandMenu.vue b/apps/frontend/src/components/ui/CommandMenu.vue
new file mode 100644
index 0000000000..825e5a140c
--- /dev/null
+++ b/apps/frontend/src/components/ui/CommandMenu.vue
@@ -0,0 +1,456 @@
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="command-menu-overlay" @click="close">
+      <div class="command-menu" @click.stop>
+        <div class="command-menu-header">
+          <SearchIcon class="search-icon" aria-hidden="true" />
+          <input
+            ref="searchInput"
+            v-model="query"
+            class="command-menu-input"
+            type="text"
+            :placeholder="formatMessage(messages.searchPlaceholder)"
+            @keydown.esc="close"
+            @keydown.enter="handleEnter"
+            @keydown.arrow-up.prevent="selectPrevious"
+            @keydown.arrow-down.prevent="selectNext"
+          />
+          <div class="shortcuts" :class="{ mac: isMac }">
+            <kbd v-if="isMac">⌘</kbd><kbd v-else>Ctrl</kbd><kbd>K</kbd>
+          </div>
+        </div>
+
+        <div class="command-menu-content">
+          <div v-if="query" class="command-menu-section">
+            <div class="command-menu-section-header">
+              <SearchIcon class="section-icon" aria-hidden="true" />
+              {{ formatMessage(messages.searchResults) }}
+            </div>
+            <div
+              v-if="results.length"
+              ref="resultsContainer"
+              class="command-menu-results"
+              role="listbox"
+            >
+              <button
+                v-for="(result, index) in results"
+                :key="result.id"
+                class="command-menu-item"
+                :class="{ active: selectedIndex === index }"
+                role="option"
+                @click="selectResult(result)"
+                @mouseenter="selectedIndex = index"
+              >
+                <img
+                  :src="result.icon_url"
+                  :alt="result.title"
+                  class="project-icon"
+                  loading="lazy"
+                />
+                <div class="project-info">
+                  <span class="project-title">{{ result.title }}</span>
+                  <span class="project-description">{{ result.description }}</span>
+                </div>
+                <kbd class="result-shortcut">{{ index + 1 }}</kbd>
+              </button>
+            </div>
+            <div v-else class="command-menu-empty">
+              <SearchIcon class="empty-icon" aria-hidden="true" />
+              {{ formatMessage(messages.noResults) }}
+            </div>
+          </div>
+          <div v-else class="command-menu-section">
+            <div class="command-menu-empty command-menu-start">
+              <CompassIcon class="empty-icon" aria-hidden="true" />
+              {{ formatMessage(messages.startTyping) }}
+              <div class="hints">
+                <span>{{ formatMessage(messages.searchHint) }}</span>
+                <span>{{ formatMessage(messages.navigationHint) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import { SearchIcon, CompassIcon } from "@modrinth/assets";
+import { useRouter } from "vue-router";
+import { useVIntl } from "#imports";
+import { useBaseFetch } from "~/composables/fetch.js";
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    id: "command-menu.search.placeholder",
+    defaultMessage: "Search projects, mods, users...",
+  },
+  searchResults: {
+    id: "command-menu.search.results",
+    defaultMessage: "Search Results",
+  },
+  quickActions: {
+    id: "command-menu.quick-actions",
+    defaultMessage: "Quick Actions",
+  },
+  noResults: {
+    id: "command-menu.search.no-results",
+    defaultMessage: "No matching results found",
+  },
+  startTyping: {
+    id: "command-menu.search.start-typing",
+    defaultMessage: "Start typing to search across Modrinth...",
+  },
+  searchHint: {
+    id: "command-menu.search.hint",
+    defaultMessage: "Search for projects, mods, plugins, and more",
+  },
+  navigationHint: {
+    id: "command-menu.search.navigation-hint",
+    defaultMessage: "Use ↑↓ to navigate, enter to select",
+  },
+});
+
+const { formatMessage } = useVIntl();
+const router = useRouter();
+
+const show = ref(false);
+const query = ref("");
+const results = ref([]);
+const selectedIndex = ref(0);
+const searchInput = ref(null);
+const resultsContainer = ref(null);
+
+const isMac = ref(false);
+onMounted(() => {
+  isMac.value = navigator?.platform?.toLowerCase().includes("mac") ?? false;
+});
+
+const searchProjects = async (searchQuery) => {
+  if (!searchQuery) {
+    results.value = [];
+    return;
+  }
+
+  try {
+    const response = await useBaseFetch(`search?query=${encodeURIComponent(searchQuery)}&limit=10`);
+    results.value = response.hits;
+  } catch (error) {
+    console.error("Search error:", error);
+    results.value = [];
+  }
+};
+
+watch(query, (newQuery) => {
+  selectedIndex.value = 0;
+  searchProjects(newQuery);
+});
+
+const selectResult = (result) => {
+  router.push(`/project/${result.slug}`);
+  close();
+};
+
+const handleEnter = () => {
+  if (results.value[selectedIndex.value]) {
+    selectResult(results.value[selectedIndex.value]);
+  }
+};
+
+const selectNext = () => {
+  selectedIndex.value = (selectedIndex.value + 1) % results.value.length;
+  scrollSelectedIntoView();
+};
+
+const selectPrevious = () => {
+  selectedIndex.value = (selectedIndex.value - 1 + results.value.length) % results.value.length;
+  scrollSelectedIntoView();
+};
+
+const scrollSelectedIntoView = () => {
+  if (resultsContainer.value) {
+    const activeItem = resultsContainer.value.children[selectedIndex.value];
+    if (activeItem) {
+      activeItem.scrollIntoView({ block: "nearest" });
+    }
+  }
+};
+
+const props = defineProps({
+  onStateChange: {
+    type: Function,
+    default: async () => {},
+  },
+});
+
+const open = async () => {
+  show.value = true;
+  await props.onStateChange(true);
+  nextTick(() => {
+    searchInput.value?.focus();
+  });
+};
+
+const close = async () => {
+  show.value = false;
+  await props.onStateChange(false);
+  query.value = "";
+  results.value = [];
+  selectedIndex.value = 0;
+};
+
+const handleKeydown = (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+    e.preventDefault();
+    if (show.value) {
+      close();
+    } else {
+      open();
+    }
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleKeydown);
+});
+
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+.command-menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(12px);
+  z-index: 100;
+  display: grid;
+  place-items: start center;
+  padding-top: 8vh;
+}
+
+.command-menu {
+  width: min(640px, 90vw);
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: 12px;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 8px 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  animation: slideDown 0.15s ease-out;
+
+  @media (max-width: 640px) {
+    width: 94vw;
+    margin: 0 12px;
+  }
+}
+
+.command-menu-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-bg);
+
+  .search-icon {
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-secondary);
+    transition: color 0.15s ease;
+  }
+
+  &:focus-within .search-icon {
+    color: var(--color-brand);
+  }
+}
+
+.command-menu-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  padding: 0 8px;
+  color: var(--color-text);
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+}
+
+.shortcuts {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--color-button-bg);
+  border-radius: 6px;
+  margin-left: 4px;
+
+  kbd {
+    padding: 1px 4px;
+    font-size: 11px;
+    font-family: inherit;
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: none;
+  }
+
+  &.mac kbd:first-child {
+    font-size: 13px;
+  }
+}
+
+.command-menu-section {
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    .section-icon {
+      width: 14px;
+      height: 14px;
+      opacity: 0.7;
+    }
+  }
+}
+
+.command-menu-content {
+  max-height: min(400px, 60vh);
+  overflow-y: auto;
+}
+
+.command-menu-results {
+  padding: 4px;
+}
+
+.command-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text);
+  text-align: left;
+  transition: all 0.15s ease;
+
+  &:hover,
+  &.active {
+    background: var(--color-button-bg);
+
+    .project-title {
+      color: var(--color-brand);
+    }
+  }
+
+  .project-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    object-fit: cover;
+  }
+
+  .project-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .project-title {
+    font-weight: 600;
+    font-size: 14px;
+    transition: color 0.15s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .project-description {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .result-shortcut {
+    padding: 2px 6px;
+    font-size: 11px;
+    color: var(--color-text-secondary);
+    background: var(--color-button-bg);
+    border-radius: 4px;
+  }
+}
+
+.command-menu-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 32px 16px;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  text-align: center;
+
+  .empty-icon {
+    width: 24px;
+    height: 24px;
+    opacity: 0.5;
+  }
+}
+
+.command-menu-start {
+  .hints {
+    margin-top: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+    opacity: 0.7;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index 4a71f2ee3f..86acfb83d9 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -25,9 +25,11 @@
       </nuxt-link>
       <p v-if="author" class="author">
         by
-        <nuxt-link class="title-link" :to="'/user/' + author">
-          {{ author }}
-        </nuxt-link>
+        <UserHoverCard :user-id="typeof author === 'object' ? author.id : author">
+          <nuxt-link :to="`/user/${typeof author === 'object' ? author.username : author}`">
+            {{ typeof author === "object" ? author.username : author }}
+          </nuxt-link>
+        </UserHoverCard>
       </p>
       <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
     </div>
@@ -95,6 +97,7 @@ import Categories from "~/components/ui/search/Categories.vue";
 import Badge from "~/components/ui/Badge.vue";
 import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
 import Avatar from "~/components/ui/Avatar.vue";
+import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
 
 export default {
   components: {
@@ -106,6 +109,7 @@ export default {
     UpdatedIcon,
     DownloadIcon,
     HeartIcon,
+    UserHoverCard,
   },
   props: {
     id: {
@@ -121,7 +125,7 @@ export default {
       default: "Project Name",
     },
     author: {
-      type: String,
+      type: [String, Object],
       default: null,
     },
     description: {
@@ -522,4 +526,20 @@ export default {
     }
   }
 }
+
+.author {
+  font-size: 0.9em;
+  color: var(--color-text-secondary);
+  font-weight: normal;
+
+  a {
+    color: var(--color-link);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-link-hover);
+      text-decoration: underline;
+    }
+  }
+}
 </style>
diff --git a/apps/frontend/src/components/ui/report/ReportView.vue b/apps/frontend/src/components/ui/report/ReportView.vue
index ce3c2eb660..401d769334 100644
--- a/apps/frontend/src/components/ui/report/ReportView.vue
+++ b/apps/frontend/src/components/ui/report/ReportView.vue
@@ -7,7 +7,13 @@
         :link-stack="breadcrumbsStack"
       />
       <h2>Report details</h2>
-      <ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth" />
+      <ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth">
+        <template #reporter>
+          <UserHoverCard :user-id="report.reporter">
+            <span>{{ report.reporterUser.username }}</span>
+          </UserHoverCard>
+        </template>
+      </ReportInfo>
     </section>
     <section class="universal-card">
       <h2>Messages</h2>
@@ -24,6 +30,7 @@
 import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
 import ReportInfo from "~/components/ui/report/ReportInfo.vue";
+import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
 import { addReportMessage } from "~/helpers/threads.js";
 
 const props = defineProps({
diff --git a/apps/frontend/src/components/ui/user/UserHoverCard.vue b/apps/frontend/src/components/ui/user/UserHoverCard.vue
new file mode 100644
index 0000000000..406fa057f1
--- /dev/null
+++ b/apps/frontend/src/components/ui/user/UserHoverCard.vue
@@ -0,0 +1,351 @@
+<template>
+  <span
+    ref="triggerEl"
+    class="user-hover-card-trigger"
+    @mouseenter="startHover"
+    @mouseleave="handleLeave"
+  >
+    <slot />
+  </span>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="shown && userData?.username"
+        ref="cardEl"
+        class="hover-content"
+        :style="cardStyle"
+        @mouseenter="keepCard"
+        @mouseleave="handleLeave"
+      >
+        <div class="user-info">
+          <div class="user-header">
+            <nuxt-link :to="`/user/${userData.username}`" class="user-link">
+              <img
+                :src="userData.avatar_url"
+                :alt="`${userData.username}'s avatar`"
+                class="user-avatar"
+              />
+              <div>
+                <h3>{{ userData.username }}</h3>
+                <div class="user-joined">
+                  Joined {{ new Date(userData.created).toLocaleDateString() }}
+                </div>
+              </div>
+            </nuxt-link>
+          </div>
+          <div v-if="userData.bio" class="user-bio">
+            {{ userData.bio }}
+          </div>
+          <div class="user-stats">
+            <div>
+              <span class="stat-value">{{ userData.projects_count }}</span> projects
+            </div>
+          </div>
+          <div v-if="projects?.length" class="user-projects">
+            <div v-for="project in projects" :key="project.id" class="project-preview">
+              <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
+              <div class="project-info">
+                <nuxt-link
+                  :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`"
+                  class="project-title"
+                >
+                  {{ project.title }}
+                </nuxt-link>
+                <div class="project-stats">
+                  <span>{{ $formatNumber(project.downloads) }} downloads</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
+
+const props = defineProps({
+  userId: { type: String, required: true },
+});
+
+const shown = ref(false);
+const userData = ref(null);
+const projects = ref([]);
+const triggerEl = ref(null);
+const cardEl = ref(null);
+const cardStyle = ref({});
+
+let hoverTimeout = null;
+let isHovering = false;
+let isHoveringCard = false;
+let hideTimeout = null;
+
+const HIDE_DELAY = 500;
+
+function updatePosition() {
+  if (!triggerEl.value || !shown.value) return;
+
+  const rect = triggerEl.value.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300;
+
+  const style = {
+    position: "fixed",
+    left: `${rect.left}px`,
+    ...(showAbove
+      ? { bottom: `${viewportHeight - rect.top + 8}px` }
+      : { top: `${rect.bottom + 8}px` }),
+    minWidth: "300px",
+    maxWidth: "400px",
+    maxHeight: "300px",
+  };
+
+  Object.assign(cardStyle.value, style);
+}
+
+// hide the hover card on scroll cuz we dont want it stuck on a users screen!
+function handleScroll() {
+  hideCard();
+}
+
+function startHideCard() {
+  hideTimeout = setTimeout(() => {
+    if (!isHoveringCard && !isHovering) {
+      hideCard();
+    }
+  }, HIDE_DELAY);
+}
+
+function keepCard() {
+  isHoveringCard = true;
+  if (hideTimeout) {
+    clearTimeout(hideTimeout);
+  }
+}
+
+function handleLeave() {
+  isHoveringCard = false;
+  isHovering = false;
+  startHideCard();
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll, { passive: true });
+  window.addEventListener("resize", handleScroll, { passive: true });
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+  window.removeEventListener("resize", handleScroll);
+  clearTimeout(hoverTimeout);
+  if (hideTimeout) {
+    clearTimeout(hideTimeout);
+  }
+});
+
+async function startHover() {
+  if (hoverTimeout) return;
+
+  isHovering = true;
+  hoverTimeout = setTimeout(async () => {
+    if (!isHovering) return;
+
+    if (!userData.value) {
+      try {
+        const userResp = await useBaseFetch(`user/${props.userId}`);
+        const projectsResp = await useBaseFetch(`user/${props.userId}/projects`);
+
+        userData.value = userResp || null;
+        projects.value = (projectsResp || []).slice(0, 3);
+
+        if (userData.value) {
+          userData.value.projects_count = projectsResp?.length || 0;
+        }
+      } catch (err) {
+        console.error("Failed to load user data:", err);
+        return;
+      }
+    }
+
+    if (isHovering) {
+      shown.value = true;
+      nextTick(() => {
+        updatePosition();
+      });
+    }
+  }, 150);
+}
+
+function hideCard() {
+  shown.value = false;
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-hover-card-trigger {
+  position: relative;
+  color: inherit;
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--color-link);
+    }
+  }
+}
+
+.hover-content {
+  z-index: 9999;
+  position: fixed;
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--size-rounded-lg);
+  box-shadow: var(--shadow-floating);
+  overflow-y: auto;
+  pointer-events: auto;
+  width: 320px;
+}
+
+.user-info {
+  padding: var(--spacing-card-md);
+}
+
+.user-header {
+  .user-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-card-sm);
+    color: inherit;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+
+      h3 {
+        color: var(--color-link);
+      }
+    }
+
+    h3 {
+      margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      line-height: 1.2;
+      transition: color 0.2s ease;
+    }
+  }
+}
+
+.user-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+}
+
+.user-joined {
+  margin-top: 2px;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.user-bio {
+  margin-top: var(--spacing-card-sm);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  color: var(--color-text);
+}
+
+.user-stats {
+  margin-top: var(--spacing-card-sm);
+  padding-top: var(--spacing-card-sm);
+  border-top: 1px solid var(--color-divider);
+  display: flex;
+  gap: var(--spacing-card-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+
+  .stat-value {
+    font-weight: 600;
+    color: var(--color-text);
+  }
+}
+
+.user-projects {
+  margin-top: var(--spacing-card-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-card-xs);
+}
+
+.project-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-card-sm);
+  padding: var(--spacing-card-xs);
+  border-radius: var(--size-rounded-md);
+  background: var(--color-button-bg);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--color-button-bg-hover);
+    transform: translateY(-1px);
+
+    .project-title {
+      color: var(--color-link);
+    }
+  }
+}
+
+.project-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--size-rounded-sm);
+  box-shadow: var(--shadow-sm);
+}
+
+.project-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-title {
+  display: block;
+  font-weight: 500;
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.2s ease;
+}
+
+.project-stats {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index f8f7253607..bd10351661 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -578,6 +578,7 @@
       <ModalCreation v-if="auth.user" ref="modal_creation" />
       <CollectionCreateModal ref="modal_collection_creation" />
       <OrganizationCreateModal ref="modal_organization_creation" />
+      <CommandMenu ref="commandMenu" />
       <slot id="main" />
     </main>
     <footer
@@ -718,6 +719,7 @@ import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
 import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
 import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
+import CommandMenu from "~/components/ui/CommandMenu.vue";
 
 const { formatMessage } = useVIntl();
 
@@ -1016,6 +1018,8 @@ const disableRandomProjectsForRoute = computed(
     route.name.includes("admin"),
 );
 
+const commandMenu = ref(null);
+
 async function onKeyDown(event) {
   if (disableRandomProjects.value || disableRandomProjectsForRoute.value) {
     return;
diff --git a/apps/frontend/src/pages/[type]/[id]/changelog.vue b/apps/frontend/src/pages/[type]/[id]/changelog.vue
index e6130fd9dc..ef029baf3b 100644
--- a/apps/frontend/src/pages/[type]/[id]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[id]/changelog.vue
@@ -37,9 +37,11 @@
               </h2>
               <span v-if="version.author">
                 by
-                <nuxt-link class="text-link" :to="'/user/' + version.author.user.username">{{
-                  version.author.user.username
-                }}</nuxt-link>
+                <UserHoverCard :user-id="version.author.user.id">
+                  <nuxt-link class="text-link" :to="'/user/' + version.author.user.username">
+                    {{ version.author.user.username }}
+                  </nuxt-link>
+                </UserHoverCard>
               </span>
               <span>
                 on
@@ -75,8 +77,9 @@
 <script setup>
 import { Pagination } from "@modrinth/ui";
 import { DownloadIcon } from "@modrinth/assets";
-
 import VersionFilterControl from "@modrinth/ui/src/components/version/VersionFilterControl.vue";
+import UserHoverCard from "~/components/ui/user/UserHoverCard.vue";
+
 import { renderHighlightedString } from "~/helpers/highlight.js";
 
 const props = defineProps({
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index b836571915..ce14853b37 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -771,7 +771,7 @@
         </ul>
 
         <div
-          class="flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0"
+          class="mb-4 flex w-full flex-col items-start justify-between gap-4 rounded-2xl bg-bg p-8 text-left lg:flex-row lg:gap-0"
         >
           <div class="flex flex-col gap-4">
             <h1 class="m-0">Build your own</h1>
diff --git a/packages/ui/src/components/modal/ExternalLinkModal.vue b/packages/ui/src/components/modal/ExternalLinkModal.vue
new file mode 100644
index 0000000000..08fa677d94
--- /dev/null
+++ b/packages/ui/src/components/modal/ExternalLinkModal.vue
@@ -0,0 +1,123 @@
+<template>
+  <NewModal ref="modal" danger>
+    <template #title>
+      <span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
+        <ExternalIcon />
+        {{ formatMessage(messages.title) }}
+      </span>
+    </template>
+
+    <div class="flex flex-col gap-4 w-[450px]">
+      <Admonition type="warning" header="Please be careful">
+        {{ formatMessage(messages.warning) }}
+      </Admonition>
+
+      <div
+        class="flex items-center gap-2 p-3 rounded-lg bg-bg text-contrast font-mono text-sm break-all"
+      >
+        <GlobeIcon class="flex-shrink-0 size-4" />
+        {{ targetUrl }}
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <ButtonStyled>
+          <button @click="cancel">
+            <XIcon />
+            {{ formatMessage(messages.cancel) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled color="brand">
+          <button @click="proceed">
+            <ExternalIcon />
+            {{ formatMessage(messages.proceed) }}
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import NewModal from './NewModal.vue'
+import Admonition from '../base/Admonition.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import { ExternalIcon, XIcon, GlobeIcon } from '@modrinth/assets'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  title: {
+    id: 'modal.external_link.title',
+    defaultMessage: 'Leaving Modrinth',
+  },
+  warning: {
+    id: 'modal.external_link.warning',
+    defaultMessage:
+      'You are about to visit an external website. Please verify the link is from a trusted source before proceeding.',
+  },
+  proceed: {
+    id: 'modal.external_link.proceed',
+    defaultMessage: 'Continue to site',
+  },
+  cancel: {
+    id: 'modal.external_link.cancel',
+    defaultMessage: 'Cancel',
+  },
+})
+
+const modal = ref(null)
+const targetUrl = ref('')
+
+const show = (url) => {
+  targetUrl.value = url
+  modal.value?.show()
+  return new Promise((resolve) => {
+    proceedCallback = resolve
+  })
+}
+
+let proceedCallback = null
+
+const cancel = () => {
+  modal.value?.hide()
+  if (proceedCallback) {
+    proceedCallback(false)
+    proceedCallback = null
+  }
+}
+
+const proceed = () => {
+  modal.value?.hide()
+  if (proceedCallback) {
+    proceedCallback(true)
+    proceedCallback = null
+  }
+}
+
+defineExpose({ show })
+</script>
+
+<style lang="scss" scoped>
+.external-link-warning {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-card-md);
+  padding: var(--spacing-card-lg);
+
+  .link-display {
+    padding: var(--spacing-card-sm);
+    background: var(--color-button-bg);
+    border-radius: var(--size-rounded-sm);
+    word-break: break-all;
+    font-family: monospace;
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-card-sm);
+  }
+}
+</style>
diff --git a/packages/ui/src/components/project/ProjectPageDescription.vue b/packages/ui/src/components/project/ProjectPageDescription.vue
index 42b3bc00d4..fc095626af 100644
--- a/packages/ui/src/components/project/ProjectPageDescription.vue
+++ b/packages/ui/src/components/project/ProjectPageDescription.vue
@@ -1,8 +1,43 @@
 <template>
-  <div class="markdown-body" v-html="renderHighlightedString(description ?? '')" />
+  <div
+    class="markdown-body"
+    @click="handleLinkClick"
+    v-html="renderHighlightedString(description ?? '')"
+  />
+  <ExternalLinkModal ref="externalLinkModal" />
 </template>
+
 <script setup lang="ts">
 import { renderHighlightedString } from '@modrinth/utils'
+import { ref } from 'vue'
+import ExternalLinkModal from '../modal/ExternalLinkModal.vue'
+
+const externalLinkModal = ref<InstanceType<typeof ExternalLinkModal> | null>(null)
+
+const handleLinkClick = async (e: MouseEvent) => {
+  const link = (e.target as HTMLElement)?.closest('a')
+  if (!link) return
+
+  const href = link.getAttribute('href')
+  if (!href) return
+
+  try {
+    const url = new URL(href)
+    if (!url.hostname.includes('modrinth.com') && url.host !== window.location.host) {
+      e.preventDefault()
+      const proceed = await externalLinkModal.value?.show(href)
+      if (proceed) {
+        window.open(href, '_blank', 'noopener,noreferrer')
+      }
+    }
+  } catch {
+    // not sure how this'd happen. but if it does, just ignore it
+    // and let the default behavior happen
+    // e.g. if the link is a mailto link or something
+    // this is a bit of a hack, but it works
+    return
+  }
+}
 
 withDefaults(
   defineProps<{
diff --git a/packages/ui/src/components/project/ProjectSidebarCreators.vue b/packages/ui/src/components/project/ProjectSidebarCreators.vue
index 9f158facb4..28eabcac53 100644
--- a/packages/ui/src/components/project/ProjectSidebarCreators.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCreators.vue
@@ -10,9 +10,11 @@
         >
           <Avatar :src="organization.icon_url" :alt="organization.name" size="32px" />
           <div class="flex flex-col flex-nowrap justify-center">
-            <span class="group-hover:underline">
-              {{ organization.name }}
-            </span>
+            <UserHoverCard :user-id="organization.id">
+              <span class="group-hover:underline">
+                {{ organization.name }}
+              </span>
+            </UserHoverCard>
             <span class="text-secondary text-sm font-medium flex items-center gap-1"
               ><OrganizationIcon /> Organization</span
             >
@@ -29,15 +31,17 @@
       >
         <Avatar :src="member.user.avatar_url" :alt="member.user.username" size="32px" circle />
         <div class="flex flex-col">
-          <span class="flex flex-row flex-nowrap items-center gap-1 group-hover:underline">
-            {{ member.user.username }}
-            <CrownIcon
-              v-if="member.is_owner"
-              v-tooltip="formatMessage(messages.owner)"
-              class="text-brand-orange"
-            />
-            <ExternalIcon v-if="linkTarget === '_blank'" />
-          </span>
+          <UserHoverCard :user-id="member.user.id">
+            <span class="flex flex-row flex-nowrap items-center gap-1 group-hover:underline">
+              {{ member.user.username }}
+              <CrownIcon
+                v-if="member.is_owner"
+                v-tooltip="formatMessage(messages.owner)"
+                class="text-brand-orange"
+              />
+              <ExternalIcon v-if="linkTarget === '_blank'" />
+            </span>
+          </UserHoverCard>
           <span class="text-secondary text-sm font-medium">{{ member.role }}</span>
         </div>
       </AutoLink>
@@ -49,6 +53,7 @@ import { CrownIcon, ExternalIcon, OrganizationIcon } from '@modrinth/assets'
 import { useVIntl, defineMessages } from '@vintl/vintl'
 import Avatar from '../base/Avatar.vue'
 import AutoLink from '../base/AutoLink.vue'
+import UserHoverCard from '../user/UserHoverCard.vue'
 import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/user/UserHoverCard.vue b/packages/ui/src/components/user/UserHoverCard.vue
new file mode 100644
index 0000000000..69f06b6a5c
--- /dev/null
+++ b/packages/ui/src/components/user/UserHoverCard.vue
@@ -0,0 +1,351 @@
+<template>
+  <span
+    ref="triggerEl"
+    class="user-hover-card-trigger"
+    @mouseenter="startHover"
+    @mouseleave="handleLeave"
+  >
+    <slot />
+  </span>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="shown && userData?.username"
+        ref="cardEl"
+        class="hover-content"
+        :style="cardStyle"
+        @mouseenter="keepCard"
+        @mouseleave="handleLeave"
+      >
+        <div class="user-info">
+          <div class="user-header">
+            <nuxt-link :to="`/user/${userData.username}`" class="user-link">
+              <img
+                :src="userData.avatar_url"
+                :alt="`${userData.username}'s avatar`"
+                class="user-avatar"
+              />
+              <div>
+                <h3>{{ userData.username }}</h3>
+                <div class="user-joined">
+                  Joined {{ new Date(userData.created).toLocaleDateString() }}
+                </div>
+              </div>
+            </nuxt-link>
+          </div>
+          <div v-if="userData.bio" class="user-bio">
+            {{ userData.bio }}
+          </div>
+          <div class="user-stats">
+            <div>
+              <span class="stat-value">{{ userData.projects_count }}</span> projects
+            </div>
+          </div>
+          <div v-if="projects?.length" class="user-projects">
+            <div v-for="project in projects" :key="project.id" class="project-preview">
+              <img :src="project.icon_url" :alt="`${project.title} icon`" class="project-icon" />
+              <div class="project-info">
+                <nuxt-link
+                  :to="`/${$getProjectTypeForUrl(project.project_type || project.type, project.categories)}/${project.slug || project.id}`"
+                  class="project-title"
+                >
+                  {{ project.title }}
+                </nuxt-link>
+                <div class="project-stats">
+                  <span>{{ $formatNumber(project.downloads) }} downloads</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps({
+  userId: { type: String, required: true },
+})
+
+const shown = ref(false)
+const userData = ref(null)
+const projects = ref([])
+const triggerEl = ref(null)
+const cardEl = ref(null)
+const cardStyle = ref({})
+
+let hoverTimeout = null
+let isHovering = false
+let isHoveringCard = false
+let hideTimeout = null
+
+const HIDE_DELAY = 500
+
+function updatePosition() {
+  if (!triggerEl.value || !shown.value) return
+
+  const rect = triggerEl.value.getBoundingClientRect()
+  const viewportHeight = window.innerHeight
+  const showAbove = rect.bottom > viewportHeight - 300 && rect.top > 300
+
+  const style = {
+    position: 'fixed',
+    left: `${rect.left}px`,
+    ...(showAbove
+      ? { bottom: `${viewportHeight - rect.top + 8}px` }
+      : { top: `${rect.bottom + 8}px` }),
+    minWidth: '300px',
+    maxWidth: '400px',
+    maxHeight: '300px',
+  }
+
+  Object.assign(cardStyle.value, style)
+}
+
+// hide the hover card on scroll cuz we dont want it stuck on a users screen!
+function handleScroll() {
+  hideCard()
+}
+
+function startHideCard() {
+  hideTimeout = setTimeout(() => {
+    if (!isHoveringCard && !isHovering) {
+      hideCard()
+    }
+  }, HIDE_DELAY)
+}
+
+function keepCard() {
+  isHoveringCard = true
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+  }
+}
+
+function handleLeave() {
+  isHoveringCard = false
+  isHovering = false
+  startHideCard()
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleScroll, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleScroll)
+  clearTimeout(hoverTimeout)
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+  }
+})
+
+async function startHover() {
+  if (hoverTimeout) return
+
+  isHovering = true
+  hoverTimeout = setTimeout(async () => {
+    if (!isHovering) return
+
+    if (!userData.value) {
+      try {
+        const userResp = await useBaseFetch(`user/${props.userId}`)
+        const projectsResp = await useBaseFetch(`user/${props.userId}/projects`)
+
+        userData.value = userResp || null
+        projects.value = (projectsResp || []).slice(0, 3)
+
+        if (userData.value) {
+          userData.value.projects_count = projectsResp?.length || 0
+        }
+      } catch (err) {
+        console.error('Failed to load user data:', err)
+        return
+      }
+    }
+
+    if (isHovering) {
+      shown.value = true
+      nextTick(() => {
+        updatePosition()
+      })
+    }
+  }, 150)
+}
+
+function hideCard() {
+  shown.value = false
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout)
+    hoverTimeout = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-hover-card-trigger {
+  position: relative;
+  color: inherit;
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--color-link);
+    }
+  }
+}
+
+.hover-content {
+  z-index: 9999;
+  position: fixed;
+  background: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--size-rounded-lg);
+  box-shadow: var(--shadow-floating);
+  overflow-y: auto;
+  pointer-events: auto;
+  width: 320px;
+}
+
+.user-info {
+  padding: var(--spacing-card-md);
+}
+
+.user-header {
+  .user-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-card-sm);
+    color: inherit;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+
+      h3 {
+        color: var(--color-link);
+      }
+    }
+
+    h3 {
+      margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: 600;
+      line-height: 1.2;
+      transition: color 0.2s ease;
+    }
+  }
+}
+
+.user-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+}
+
+.user-joined {
+  margin-top: 2px;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.user-bio {
+  margin-top: var(--spacing-card-sm);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  color: var(--color-text);
+}
+
+.user-stats {
+  margin-top: var(--spacing-card-sm);
+  padding-top: var(--spacing-card-sm);
+  border-top: 1px solid var(--color-divider);
+  display: flex;
+  gap: var(--spacing-card-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+
+  .stat-value {
+    font-weight: 600;
+    color: var(--color-text);
+  }
+}
+
+.user-projects {
+  margin-top: var(--spacing-card-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-card-xs);
+}
+
+.project-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-card-sm);
+  padding: var(--spacing-card-xs);
+  border-radius: var(--size-rounded-md);
+  background: var(--color-button-bg);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--color-button-bg-hover);
+    transform: translateY(-1px);
+
+    .project-title {
+      color: var(--color-link);
+    }
+  }
+}
+
+.project-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--size-rounded-sm);
+  box-shadow: var(--shadow-sm);
+}
+
+.project-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-title {
+  display: block;
+  font-weight: 500;
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.2s ease;
+}
+
+.project-stats {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>