diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 8d920ad05..951355cc8 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -48,6 +48,7 @@ export default {
           { text: 'Share Modal', link: '/components/share-modal' },
           { text: 'Analytics', link: '/components/analytics' },
           { text: 'Search dropdown', link: '/components/search-dropdown' },
+          { text: 'Hover cards', link: '/components/hover-cards' },
         ],
       },
     ],
diff --git a/docs/components/hover-cards.md b/docs/components/hover-cards.md
new file mode 100644
index 000000000..44d8bae3d
--- /dev/null
+++ b/docs/components/hover-cards.md
@@ -0,0 +1,204 @@
+# Hover Cards
+
+<DemoContainer>
+<UserTooltip
+  username="CodexAdrian"
+  icon-url="https://avatars.githubusercontent.com/u/83074853?v=4"
+  role="admin"
+  bio="Lead Mod Developer for Terrarium, Member of Team AOF, and a member of the Modrinth Team."
+  downloads="512000"
+  followers="1200"
+>
+  <Button>
+    <UserIcon/>
+    User
+  </Button>
+    <template #button>
+        <Button>
+            <HeartIcon/>
+            Follow
+        </Button>
+    </template>
+</UserTooltip>
+<OrganizationTooltip
+    name="Terrarium"
+    icon-url="https://cdn.modrinth.com/user/6ZoP9xY8/845ab3625ed09a90b58b4ec6089c92d8e459ca09.png"
+    description="Creating cool new minecraft mods for you to enjoy!"
+    downloads="11322323"
+    projects="12"
+    :members="[
+        {
+            name: 'CodexAdrian',
+            icon_url: 'https://avatars.githubusercontent.com/u/83074853?v=4',
+        },
+{
+            name: 'Kekie6',
+            icon_url: 'https://avatars.githubusercontent.com/u/79649631?v=4',
+        },
+{
+            name: 'ThatGravyBoat',
+            icon_url: 'https://avatars.githubusercontent.com/u/26934102?v=4',
+        },
+{
+            name: 'Facudo46',
+            icon_url: 'https://cdn.modrinth.com/user/cA1RRKvv/8498cd7695a07b60e4a3013910a8f4f1470e02e0.png',
+        },
+{
+            name: 'AlexNijjar',
+            icon_url: 'https://avatars.githubusercontent.com/u/61668546?v=4',
+        },
+{
+            name: 'fizziy',
+            icon_url: 'https://cdn.modrinth.com/user/lM3xW2Bx/b60074b7cf3140d49f47eeee9e22f54d905b49df.png',
+        },
+{
+            name: 'MsRandom',
+            icon_url: 'https://avatars2.githubusercontent.com/u/36382780?v=4',
+        },
+{
+            name: 'grimbodev',
+            icon_url: 'https://cdn.modrinth.com/user/HZZEeRnt/c9b5d2dd411f152e18399c2982709d25e4dd3e7c.png',
+        },
+    ]"
+>
+  <Button>
+    <OrganizationIcon/>
+    Organization
+  </Button>
+    <template #button>
+        <Button>
+            <HeartIcon/>
+            Follow
+        </Button>
+    </template>
+</OrganizationTooltip>
+<ProjectTooltip
+  name="Spirit"
+  author="CodexAdrian"
+  icon-url="https://cdn.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
+  description="A mod exploring soul magic in blocks, tools, weapons and more!"
+  downloads="512000"
+  followers="1200"
+>
+  <Button>
+    <ListIcon/>
+    Project
+  </Button>
+    <template #button>
+        <Button>
+            <HeartIcon/>
+            Follow
+        </Button>
+    </template>
+</ProjectTooltip>
+<CollectionTooltip
+    name="Project Odyssey"
+    icon-url="https://i.imgur.com/CibR8vJ.png"
+    description="A suite of useful, open source packmaker utility mods for Minecraft Forge and Fabric"
+    :projects="[
+        {
+            title: 'Heracles',
+            icon_url: 'https://cdn.modrinth.com/data/lo90fZoB/81b2b095d5570e29f29604c6c5c69eaf9f4033bc.png',
+        },
+        {
+            title: 'Cadmus',
+            icon_url: 'https://cdn.modrinth.com/data/fEWKxVzh/5d5fcff12c939097701a1c57d8c437845fc3c0f9.png',
+        },
+        {
+            title: 'Prometheus',
+            icon_url: 'https://cdn.modrinth.com/data/iYcNKH7W/45a9bd1bf6b09c0f0576a1d78d1291eceedbdb76.png',
+        },
+        {
+            title: 'Argonauts',
+            icon_url: 'https://cdn.modrinth.com/data/bb2EpKpx/a1bd657608a465ee17d88307b936eb41bcdad502.png',
+        }
+    ]"
+>
+  <Button>
+    <DashboardIcon/>
+    Collection
+  </Button>
+    <template #button>
+        <Button>
+            <HeartIcon/>
+            Follow
+        </Button>
+    </template>
+</CollectionTooltip>
+</DemoContainer>
+
+```vue
+<UserTooltip
+  username="username"
+  icon-url="user's icon url"
+  role="user's role (admin/moderator/developer)"
+  bio="user's bio"
+  downloads="number"
+  followers="number"
+  position="bottom/top/left/right (default: bottom)"
+  direction="left/right/up/down (default: left)"
+>
+  <component/>
+  <template #button>
+    <button/>
+  </template>
+</UserTooltip>
+
+<OrganizationTooltip
+    name="organization name"
+    icon-url="organization's icon url"
+    description="organization's description"
+    downloads="number"
+    projects="number"
+    :members="[
+        {
+            username: 'members username',
+            icon_url: 'members icon url',
+        },
+        ...
+    ]"
+    position="bottom/top/left/right (default: bottom)"
+    direction="left/right/up/down (default: left)"
+>
+  <component/>
+  <template #button>
+    <button/>
+  </template>
+</OrganizationTooltip>
+
+<ProjectTooltip
+  name="project name"
+  author="author's username"
+  icon-url="project's icon url"
+  description="project's description"
+  downloads="number"
+  followers="number"
+  position="bottom/top/left/right (default: bottom)"
+  direction="left/right/up/down (default: left)"
+>
+  <component/>
+  <template #button>
+    <button/>
+  </template>
+</ProjectTooltip>
+
+<CollectionTooltip
+    name="collection name"
+    icon-url="collection's icon url"
+    description="collection's description"
+    :projects="[
+        {
+            title: 'projects name',
+            icon_url: 'projects icon url',
+        },
+        ...
+    ]"
+    position="bottom/top/left/right (default: bottom)"
+    direction="left/right/up/down (default: left)"
+>
+  <component/>
+  <template #button>
+    <button/>
+  </template>
+</CollectionTooltip>
+```
diff --git a/lib/assets/icons/organization.svg b/lib/assets/icons/organization.svg
new file mode 100644
index 000000000..1af4ab0a3
--- /dev/null
+++ b/lib/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>
\ No newline at end of file
diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue
index 824c55a32..12526e3aa 100644
--- a/lib/components/base/Badge.vue
+++ b/lib/components/base/Badge.vue
@@ -32,6 +32,7 @@
     <template v-else-if="type === 'closed'"> <XIcon /> Closed</template>
 
     <!-- Other -->
+    <template v-else-if="type === 'organization'"> <OrganizationIcon /> Organization</template>
     <template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
   </span>
 </template>
@@ -50,6 +51,7 @@ import {
   CheckIcon,
   LockIcon,
   CalendarIcon,
+  OrganizationIcon,
   capitalizeString,
 } from '@'
 
diff --git a/lib/components/base/CollectionTooltip.vue b/lib/components/base/CollectionTooltip.vue
new file mode 100644
index 000000000..e813e41cb
--- /dev/null
+++ b/lib/components/base/CollectionTooltip.vue
@@ -0,0 +1,156 @@
+<script setup>
+import { Hoverable, Avatar, Card } from '@'
+const props = defineProps({
+  iconUrl: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  projects: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+</script>
+
+<template>
+  <Hoverable :position="position" :direction="direction">
+    <slot />
+    <template #popup>
+      <Card class="user-tooltip">
+        <div class="user-tooltip-header">
+          <RouterLink :to="`collection/${id}`" class="button-base">
+            <Avatar :src="iconUrl" />
+          </RouterLink>
+          <div class="user-tooltip-header-text">
+            <RouterLink
+              class="user-tooltip-header-text-username button-base"
+              :to="`collection/${id}`"
+            >
+              {{ name }}
+            </RouterLink>
+            <div class="projects">
+              <div class="icons">
+                <Avatar
+                  v-for="project in [...props.projects].splice(0, 5)"
+                  :key="project.title"
+                  v-tooltip="project.title"
+                  :src="project.icon_url"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="markdown-body user-tooltip-bio">
+          <p>
+            {{ description }}
+          </p>
+        </div>
+        <slot name="button" />
+      </Card>
+    </template>
+  </Hoverable>
+</template>
+
+<style scoped lang="scss">
+.user-tooltip {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  width: 20rem;
+  gap: var(--gap-md);
+
+  :deep(.avatar) {
+    min-width: var(--size);
+    min-height: var(--size);
+  }
+
+  .user-tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-md);
+
+    .avatar {
+      border: 1px solid var(--color-button-bg);
+    }
+
+    :deep(.avatar) {
+      --size: 3.5rem !important;
+    }
+  }
+
+  .user-tooltip-header-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--gap-xs);
+    width: 100%;
+
+    .user-tooltip-header-text-username {
+      font-weight: bolder;
+      font-size: var(--font-size-md);
+      color: var(--color-contrast);
+    }
+  }
+
+  .user-tooltip-stats {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-sm);
+
+    .user-tooltip-stats-item {
+      display: flex;
+      align-items: center;
+      gap: var(--gap-xs);
+
+      .user-tooltip-stats-item-value {
+        font-weight: 600;
+        color: var(--color-contrast);
+      }
+    }
+  }
+}
+
+.projects {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+
+  .icons {
+    display: flex;
+    flex-direction: row;
+
+    :deep(.avatar) {
+      --size: 1.75rem !important;
+    }
+
+    .avatar:not(:first-child) {
+      margin-left: -0.5rem;
+    }
+  }
+}
+</style>
diff --git a/lib/components/base/Hoverable.vue b/lib/components/base/Hoverable.vue
new file mode 100644
index 000000000..bac62b0c3
--- /dev/null
+++ b/lib/components/base/Hoverable.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+defineOptions({
+  inheritAttrs: false,
+})
+
+const showPopup = ref(false)
+</script>
+
+<template>
+  <div
+    class="popup-container"
+    tabindex="-1"
+    @mouseover="showPopup = true"
+    @mouseleave="showPopup = false"
+  >
+    <slot></slot>
+    <transition name="fade-scale">
+      <div v-show="showPopup" class="popup-menu" :class="`position-${position}-${direction}`">
+        <slot name="popup" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.popup-container {
+  position: relative;
+
+  .popup-menu {
+    position: absolute;
+    box-shadow: var(--shadow-floating);
+    z-index: 10;
+
+    &.position-bottom-left {
+      padding-top: var(--gap-sm);
+      top: 100%;
+      right: 0;
+    }
+
+    &.position-bottom-right {
+      padding-top: var(--gap-sm);
+      top: 100%;
+      left: 0;
+    }
+
+    &.position-top-left {
+      padding-bottom: var(--gap-sm);
+      bottom: 100%;
+      right: 0;
+    }
+
+    &.position-top-right {
+      padding-bottom: var(--gap-sm);
+      bottom: 100%;
+      left: 0;
+    }
+
+    &.position-left-up {
+      padding-right: var(--gap-sm);
+      bottom: 0;
+      right: 100%;
+    }
+
+    &.position-left-down {
+      padding-right: var(--gap-sm);
+      top: 0;
+      right: 100%;
+    }
+
+    &.position-right-up {
+      padding-left: var(--gap-sm);
+      bottom: 0;
+      left: 100%;
+    }
+
+    &.position-right-down {
+      padding-left: var(--gap-sm);
+      top: 0;
+      left: 100%;
+    }
+  }
+}
+
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: bottom 0.125s ease-in-out, top 0.125s ease-in-out, left 0.125s ease-in-out,
+    right 0.125s ease-in-out, opacity 0.125s ease-in-out, scale 0.125s ease-in-out;
+
+  scale: 1;
+  pointer-events: auto;
+}
+
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+  opacity: 0;
+  scale: 0.75; // starting scale
+}
+
+.fade-scale-enter-to,
+.fade-scale-leave-from {
+  transition-delay: 0.5s;
+  opacity: 1;
+  scale: 1; // ending scale
+}
+</style>
diff --git a/lib/components/base/OrganizationTooltip.vue b/lib/components/base/OrganizationTooltip.vue
new file mode 100644
index 000000000..8155333d6
--- /dev/null
+++ b/lib/components/base/OrganizationTooltip.vue
@@ -0,0 +1,189 @@
+<script setup>
+import { Hoverable, Avatar, Card, Badge } from '@'
+import { formatNumber } from '@/helpers'
+const props = defineProps({
+  iconUrl: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  role: {
+    type: String,
+    default: '',
+  },
+  members: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  projects: {
+    type: Number,
+    default: 0,
+  },
+  downloads: {
+    type: Number,
+    default: 0,
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+</script>
+
+<template>
+  <Hoverable :position="position" :direction="direction">
+    <slot />
+    <template #popup>
+      <Card class="user-tooltip">
+        <div class="user-tooltip-header">
+          <RouterLink :to="`organization/${name}`" class="button-base">
+            <Avatar :src="iconUrl" />
+          </RouterLink>
+          <div class="user-tooltip-header-text">
+            <RouterLink
+              class="user-tooltip-header-text-username button-base"
+              :to="`organization/${name}`"
+            >
+              {{ name }}
+            </RouterLink>
+            <Badge type="organization" />
+          </div>
+        </div>
+        <div class="markdown-body user-tooltip-bio">
+          <p>
+            {{ description }}
+          </p>
+        </div>
+        <div class="members">
+          <div class="icons">
+            <RouterLink
+              v-for="member in [...props.members].splice(0, 5)"
+              :key="member.username"
+              :to="`/user/${member.username}`"
+              class="button-base avatar"
+            >
+              <Avatar v-tooltip="member.username" :src="member.icon_url" circle />
+            </RouterLink>
+            <div v-if="members.length > 5" class="avatar overflow">+{{ members.length - 5 }}</div>
+          </div>
+        </div>
+        <div class="user-tooltip-stats">
+          <div class="user-tooltip-stats-item">
+            <div class="user-tooltip-stats-item-value">{{ formatNumber(projects) }}</div>
+            <div class="user-tooltip-stats-item-label">Projects</div>
+          </div>
+          <div class="user-tooltip-stats-item">
+            <div class="user-tooltip-stats-item-value">{{ formatNumber(downloads) }}</div>
+            <div class="user-tooltip-stats-item-label">Downloads</div>
+          </div>
+        </div>
+        <slot name="button" />
+      </Card>
+    </template>
+  </Hoverable>
+</template>
+
+<style scoped lang="scss">
+.user-tooltip {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  width: 20rem;
+  gap: var(--gap-md);
+
+  :deep(.avatar) {
+    min-width: var(--size);
+    min-height: var(--size);
+  }
+
+  .user-tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-md);
+
+    .avatar {
+      border: 1px solid var(--color-button-bg);
+    }
+
+    :deep(.avatar) {
+      --size: 3.5rem !important;
+    }
+  }
+
+  .user-tooltip-header-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .user-tooltip-header-text-username {
+      width: fit-content;
+      font-weight: bolder;
+      font-size: var(--font-size-md);
+      color: var(--color-contrast);
+    }
+  }
+
+  .user-tooltip-stats {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-sm);
+
+    .user-tooltip-stats-item {
+      display: flex;
+      align-items: center;
+      gap: var(--gap-xs);
+
+      .user-tooltip-stats-item-value {
+        font-weight: 600;
+        color: var(--color-contrast);
+      }
+    }
+  }
+}
+
+.members {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+
+  .icons {
+    display: flex;
+    flex-direction: row;
+
+    .overflow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--color-button-bg);
+      font-weight: 600;
+      border-radius: 50%;
+      width: 2rem;
+      height: 2rem;
+    }
+
+    :deep(.avatar) {
+      --size: 2rem !important;
+    }
+
+    .avatar:not(:first-child) {
+      margin-left: -0.5rem;
+    }
+  }
+}
+</style>
diff --git a/lib/components/base/ProjectTooltip.vue b/lib/components/base/ProjectTooltip.vue
new file mode 100644
index 000000000..05213ba77
--- /dev/null
+++ b/lib/components/base/ProjectTooltip.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { Hoverable, Avatar, Card } from '@'
+import { formatNumber } from '@/helpers'
+
+defineProps({
+  iconUrl: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  author: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  downloads: {
+    type: Number,
+    default: 0,
+  },
+  followers: {
+    type: Number,
+    default: 0,
+  },
+  projectUrl: {
+    type: String,
+    default: '',
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+</script>
+
+<template>
+  <Hoverable :position="position" :direction="direction">
+    <slot />
+    <template #popup>
+      <Card class="user-tooltip">
+        <div class="user-tooltip-header">
+          <RouterLink :to="projectUrl" class="button-base">
+            <Avatar :src="iconUrl" />
+          </RouterLink>
+          <div class="user-tooltip-header-text">
+            <RouterLink class="user-tooltip-header-text-username button-base" :to="projectUrl">
+              {{ name }}
+            </RouterLink>
+            <div v-if="author" class="user-tooltip-header-text-author">
+              by
+              <RouterLink :to="`/user/${author}`" class="button-base">
+                {{ author }}
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+        <div class="markdown-body user-tooltip-bio">
+          <p>
+            {{ description }}
+          </p>
+        </div>
+        <div class="user-tooltip-stats">
+          <div class="user-tooltip-stats-item">
+            <div class="user-tooltip-stats-item-value">{{ formatNumber(downloads) }}</div>
+            <div class="user-tooltip-stats-item-label">Downloads</div>
+          </div>
+          <div class="user-tooltip-stats-item">
+            <div class="user-tooltip-stats-item-value">{{ formatNumber(followers) }}</div>
+            <div class="user-tooltip-stats-item-label">Followers</div>
+          </div>
+        </div>
+        <slot name="button" />
+      </Card>
+    </template>
+  </Hoverable>
+</template>
+
+<style scoped lang="scss">
+.user-tooltip {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  width: 20rem;
+  gap: var(--gap-md);
+
+  :deep(.avatar) {
+    min-width: var(--size);
+    min-height: var(--size);
+  }
+
+  .user-tooltip-header {
+    display: flex;
+    gap: var(--gap-md);
+
+    .avatar {
+      border: 1px solid var(--color-button-bg);
+    }
+
+    :deep(.avatar) {
+      --size: 3.5rem !important;
+    }
+
+    .user-tooltip-header-text-author {
+      .button-base {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .user-tooltip-header-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .user-tooltip-header-text-username {
+      width: fit-content;
+      font-weight: bolder;
+      font-size: var(--font-size-md);
+      color: var(--color-contrast);
+    }
+  }
+
+  .user-tooltip-stats {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-sm);
+
+    .user-tooltip-stats-item {
+      display: flex;
+      align-items: center;
+      gap: var(--gap-xs);
+
+      .user-tooltip-stats-item-value {
+        font-weight: 600;
+        color: var(--color-contrast);
+      }
+    }
+  }
+}
+</style>
diff --git a/lib/components/base/UserTooltip.vue b/lib/components/base/UserTooltip.vue
new file mode 100644
index 000000000..979130fef
--- /dev/null
+++ b/lib/components/base/UserTooltip.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { Hoverable, Avatar, Card, Badge } from '@'
+import { formatNumber } from '@/helpers'
+
+defineProps({
+  iconUrl: {
+    type: String,
+    default: '',
+  },
+  username: {
+    type: String,
+    default: '',
+  },
+  bio: {
+    type: String,
+    default: '',
+  },
+  role: {
+    type: String,
+    default: '',
+  },
+  downloads: {
+    type: Number,
+    default: 0,
+  },
+  followers: {
+    type: Number,
+    default: 0,
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+</script>
+
+<template>
+  <Hoverable :position="position" :direction="direction">
+    <slot />
+    <template #popup>
+      <Card class="user-tooltip">
+        <div class="user-tooltip-header">
+          <RouterLink :to="`user/${username}`" class="button-base">
+            <Avatar :src="iconUrl" circle />
+          </RouterLink>
+          <div class="user-tooltip-header-text">
+            <RouterLink
+              class="user-tooltip-header-text-username button-base"
+              :to="`user/${username}`"
+            >
+              {{ username }}
+            </RouterLink>
+            <Badge :type="role" />
+          </div>
+        </div>
+        <div class="markdown-body user-tooltip-bio">
+          <p>
+            {{ bio }}
+          </p>
+        </div>
+        <div class="user-tooltip-stats">
+          <div class="user-tooltip-stats-item">
+            <div class="user-tooltip-stats-item-value">{{ formatNumber(downloads) }}</div>
+            <div class="user-tooltip-stats-item-label">Downloads</div>
+          </div>
+          <div class="user-tooltip-stats-item">
+            <div class="user-tooltip-stats-item-value">{{ formatNumber(followers) }}</div>
+            <div class="user-tooltip-stats-item-label">Followers</div>
+          </div>
+        </div>
+        <slot name="button" />
+      </Card>
+    </template>
+  </Hoverable>
+</template>
+
+<style scoped lang="scss">
+.user-tooltip {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  width: 20rem;
+  gap: var(--gap-md);
+
+  :deep(.avatar) {
+    min-width: var(--size);
+    min-height: var(--size);
+  }
+
+  .user-tooltip-header {
+    display: flex;
+    gap: var(--gap-md);
+
+    .avatar {
+      border: 1px solid var(--color-button-bg);
+    }
+
+    :deep(.avatar) {
+      --size: 3.5rem !important;
+    }
+  }
+
+  .user-tooltip-header-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+
+    .user-tooltip-header-text-username {
+      width: fit-content;
+      font-weight: bolder;
+      font-size: var(--font-size-md);
+      color: var(--color-contrast);
+    }
+  }
+
+  .user-tooltip-stats {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-sm);
+
+    .user-tooltip-stats-item {
+      display: flex;
+      align-items: center;
+      gap: var(--gap-xs);
+
+      .user-tooltip-stats-item-value {
+        font-weight: 600;
+        color: var(--color-contrast);
+      }
+    }
+  }
+}
+</style>
diff --git a/lib/components/index.js b/lib/components/index.js
index a9d6a77cd..9e11ff2d6 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -21,6 +21,11 @@ export { default as ProjectCard } from './base/ProjectCard.vue'
 export { default as Promotion } from './base/Promotion.vue'
 export { default as Slider } from './base/Slider.vue'
 export { default as Toggle } from './base/Toggle.vue'
+export { default as Hoverable } from './base/Hoverable.vue'
+export { default as UserTooltip } from './base/UserTooltip.vue'
+export { default as OrganizationTooltip } from './base/OrganizationTooltip.vue'
+export { default as ProjectTooltip } from './base/ProjectTooltip.vue'
+export { default as CollectionTooltip } from './base/CollectionTooltip.vue'
 
 // Branding
 export { default as ModrinthIcon } from '@/assets/branding/logo.svg?component'
@@ -182,3 +187,4 @@ export { default as VersionIcon } from '@/assets/icons/version.svg?component'
 export { default as WikiIcon } from '@/assets/icons/wiki.svg?component'
 export { default as XIcon } from '@/assets/icons/x.svg?component'
 export { default as XCircleIcon } from '@/assets/icons/x-circle.svg?component'
+export { default as OrganizationIcon } from '@/assets/icons/organization.svg?component'
diff --git a/package.json b/package.json
index 6d4b84bd0..7b2c3f06e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "files": [
     "dist"
   ],