diff --git a/apps/app-frontend/src/assets/modrinth_servers.svg b/apps/app-frontend/src/assets/modrinth_servers.svg
new file mode 100644
index 000000000..e4d949e8c
--- /dev/null
+++ b/apps/app-frontend/src/assets/modrinth_servers.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" version="1.1" viewBox="0 0 1793 199">
+  <g>
+    <g id="Layer_1">
+      <g id="green" fill="var(--color-brand)">
+        <path d="M1184.1,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
+        <path d="M1291.1,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
+        <path d="M1357.2,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
+        <path d="M1460,165.3l-40.8-95.1h23.2l35.1,83.9h-11.4l36.3-83.9h21.4l-40.8,95.1h-23Z"/>
+        <path d="M1579.6,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
+        <path d="M1645.7,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
+        <path d="M1749.9,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
+        <g>
+          <path d="M9.8,143l63.4-38.1-5.8-15.3,18.1-18.6,22.9-4.9,6.6,8.2-10.6,10.7-9.2,2.9-6.6,6.8,3.2,9,6.5,6.9,9.2-2.5,6.6-7.2,14.3-4.5,4.3,9.6-14.8,18.1-24.8,7.8-11.1-12.4-63.6,38.2c-3-3.9-6.5-9.4-8.8-14.7ZM192.8,65.4l-50.4,13.6c2.8,7.4,3.7,11.7,4.5,16.5l50.3-13.6c-.8-5.4-2.2-10.8-4.4-16.5Z" fill-rule="evenodd"/>
+          <path d="M17.3,106.5c3.6,42.1,38.9,75.2,82,75.2s60.7-18.9,74-46.3l16.4,5.7c-15.8,34.1-50.3,57.9-90.4,57.9S3.6,158.2,0,106.5h17.3ZM.3,89.4C5.3,39.2,47.8,0,99.3,0s99.5,44.6,99.5,99.5-1.1,17.4-3.3,25.5l-16.3-5.7c1.6-6.5,2.4-13.1,2.4-19.8,0-45.4-36.9-82.3-82.3-82.3S22.6,48.7,17.6,89.4H.3Z" fill-rule="evenodd"/>
+          <path d="M99,51.6c-26.4,0-47.9,21.5-47.9,48s21.5,48,48,48,2.7,0,4-.2l4.8,16.8c-2.9.4-5.8.6-8.8.6-36,0-65.2-29.2-65.2-65.2S63.1,34.4,99,34.4s1.8,0,2.7,0l-2.7,17.1ZM118.6,37.4c26.4,8.3,45.6,33,45.6,62.2s-16.4,50.2-39.8,60l-4.8-16.7c16.2-7.7,27.4-24.2,27.4-43.3s-13-38.1-31.1-44.9l2.7-17.2Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <g id="black" fill="currentColor">
+        <path d="M354.8,69.2c12,0,21.7,3.4,28.6,10.4,7,7.2,10.6,17.5,10.6,31.5v54.8h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,5-6.8,12.2-6.8,21.3v48.5h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,4.8-6.8,12-6.8,21.3v48.5h-22.4v-95.6h21.3v12.2c3.6-4.3,8.1-7.5,13.4-9.8,5.4-2.3,11.3-3.4,17.9-3.4s13.6,1.3,19.2,3.9c5.5,2.9,9.8,6.8,13.1,12,3.9-5,8.9-8.9,15.2-11.8,6.3-2.7,13.1-4.1,20.6-4.1ZM466,167.2c-9.7,0-18.4-2.1-26.1-6.3-7.6-4-13.8-10.1-18.1-17.5-4.5-7.3-6.6-15.7-6.6-25.2s2.1-17.9,6.6-25.2c4.3-7.4,10.6-13.4,18.1-17.4,7.7-4.1,16.5-6.3,26.1-6.3s18.6,2.1,26.3,6.3c7.7,4.1,13.8,10,18.3,17.4,4.3,7.3,6.4,15.7,6.4,25.2s-2.1,17.9-6.4,25.2c-4.5,7.5-10.6,13.4-18.3,17.5-7.7,4.1-16.5,6.3-26.3,6.3h0ZM466,148c8.2,0,15-2.7,20.4-8.2,5.4-5.5,8.1-12.7,8.1-21.7s-2.7-16.1-8.1-21.7c-5.4-5.5-12.2-8.2-20.4-8.2s-15,2.7-20.2,8.2c-5.4,5.5-8.1,12.7-8.1,21.7s2.7,16.1,8.1,21.7c5.2,5.5,12,8.2,20.2,8.2ZM631.5,33.1v132.8h-21.5v-12.3c-3.7,4.4-8.3,7.9-13.6,10.2-5.5,2.3-11.5,3.4-18.1,3.4s-17.4-2-24.7-6.1c-7.3-4.1-13.2-9.8-17.4-17.4-4.1-7.3-6.3-15.9-6.3-25.6s2.1-18.3,6.3-25.6c4.1-7.3,10-13.1,17.4-17.2,7.3-4.1,15.6-6.1,24.7-6.1s12.2,1.1,17.4,3.2c5.2,2.1,9.8,5.4,13.4,9.7v-49h22.4ZM581.1,148c5.4,0,10.2-1.3,14.5-3.8,4.3-2.3,7.7-5.9,10.2-10.4,2.5-4.5,3.8-9.8,3.8-15.7s-1.3-11.3-3.8-15.7c-2.5-4.5-5.9-8.1-10.2-10.6-4.3-2.3-9.1-3.6-14.5-3.6s-10.2,1.3-14.5,3.6c-4.3,2.5-7.7,6.1-10.2,10.6-2.5,4.5-3.8,9.8-3.8,15.7s1.3,11.3,3.8,15.7c2.5,4.5,5.9,8.1,10.2,10.4,4.3,2.5,9.1,3.8,14.5,3.8ZM681.6,84.3c6.4-10,17.7-15,34-15v21.3c-1.7-.3-3.4-.5-5.2-.5-8.8,0-15.6,2.5-20.4,7.5-4.8,5.2-7.3,12.5-7.3,22v46.4h-22.4v-95.6h21.3v14h0ZM734.1,70.3h22.4v95.6h-22.4v-95.6ZM745.4,54.6c-4.1,0-7.5-1.3-10.2-3.9-2.7-2.4-4.2-5.9-4.1-9.5,0-3.8,1.4-7,4.1-9.7,2.7-2.5,6.1-3.8,10.2-3.8s7.5,1.3,10.2,3.6c2.7,2.5,4.1,5.5,4.1,9.3s-1.3,7.2-3.9,9.8c-2.7,2.7-6.3,4.1-10.4,4.1ZM839.5,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4v-95.6h21.3v12.3c3.8-4.5,8.4-7.7,14-10,5.5-2.3,12-3.4,19-3.4ZM964.8,160.7c-2.8,2.2-6,3.9-9.5,4.8-3.9,1.1-7.9,1.6-12,1.6-10.6,0-18.6-2.7-24.3-8.2-5.7-5.5-8.6-13.4-8.6-24v-46h-15.7v-17.9h15.7v-21.8h22.4v21.8h25.6v17.9h-25.6v45.5c0,4.7,1.1,8.2,3.4,10.6,2.3,2.5,5.5,3.8,9.8,3.8s9.1-1.3,12.5-3.9l6.3,15.9ZM1036.9,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4V33.1h22.4v48.3c3.8-3.9,8.2-7,13.8-9.1,5.4-2,11.5-3,18.1-3Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/apps/app-frontend/src/components/ui/NavButton.vue b/apps/app-frontend/src/components/ui/NavButton.vue
index a6c7e367e..2b540513e 100644
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -47,8 +47,6 @@ withDefaults(defineProps<{
   position: absolute;
   background-color: var(--_tooltip-bg);
   color: var(--_tooltip-color);
-  //background-color: black;
-  //color: var(--dark-color-contrast);
   text-wrap: nowrap;
   padding: 0.5rem 0.5rem;
   border-radius: var(--radius-sm);
diff --git a/apps/app-frontend/src/main.js b/apps/app-frontend/src/main.js
index 2262d1a5c..7685b67a7 100644
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -37,7 +37,17 @@ Sentry.init({
 
 app.use(router)
 app.use(pinia)
-app.use(FloatingVue)
+app.use(FloatingVue, {
+  themes: {
+    'ribbit-popout': {
+      '$extend': 'dropdown',
+      placement: 'bottom-end',
+      instantMove: true,
+      distance: 8,
+      triggers: ['click'],
+    }
+  }
+})
 app.use(VIntlPlugin)
 
 app.mount('#app')
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index b57eb8dbb..a69b9712e 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -103,6 +103,9 @@
             :versions="modrinthVersions"
             :installed="instance.install_stage !== 'installed'"
           ></component>
+          <template #fallback>
+            <LoadingIndicator />
+          </template>
         </Suspense>
       </template>
     </RouterView>
@@ -134,7 +137,7 @@ import {
   Avatar,
   ContentPageHeader,
   ButtonStyled,
-  OverflowMenu
+  OverflowMenu, LoadingIndicator
 } from '@modrinth/ui'
 import {
   UserPlusIcon,
diff --git a/apps/app-frontend/src/pages/instance/Mods.vue b/apps/app-frontend/src/pages/instance/Mods.vue
index 0e46735f8..e7666796b 100644
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -113,7 +113,13 @@
   >
     <template #actions="{ item }">
       <ButtonStyled v-if="!isPackLocked" type="transparent" circular>
-        <button @click="removeMod(item)">
+        <button v-tooltip="item.disabled ? `Enable` : `Disable`" @click="toggleDisableMod(item.data)">
+          <CheckCircleIcon v-if="item.disabled" />
+          <SlashIcon v-else />
+        </button>
+      </ButtonStyled>
+      <ButtonStyled v-if="!isPackLocked" type="transparent" circular>
+        <button v-tooltip="'Delete'" @click="removeMod(item)">
           <TrashIcon />
         </button>
       </ButtonStyled>
@@ -121,18 +127,24 @@
         <OverflowMenu
           :options="[
             {
-              id: 'copy-link',
-              shown: item.project,
-              action: () => toggleDisableMod(item.data),
+              id: 'show-file',
+              action: () => {},
             },
             {
-              id: 'toggle',
-              shown: !isPackLocked,
+              divider: true,
+            },
+            {
+              id: 'copy-link',
+              shown: item.project,
               action: () => toggleDisableMod(item.data),
             },
           ]"
+          direction="left"
         >
           <MoreVerticalIcon />
+          <template #show-file>
+            <ClipboardCopyIcon /> Show file
+          </template>
           <template #copy-link>
             <ClipboardCopyIcon /> Copy link
           </template>
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index 1576e0905..1b638f117 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -816,17 +816,19 @@ a,
 
 .v-popper--theme-tooltip {
   .v-popper__inner {
-    background: var(--color-tooltip-bg) !important;
-    color: var(--color-tooltip-text) !important;
-    padding: 5px 10px 4px !important;
+    background: var(--color-tooltip-bg);
+    color: var(--color-tooltip-text);
+    padding: 0.5rem 0.5rem !important;
     border-radius: var(--radius-sm) !important;
-    box-shadow: var(--shadow-floating) !important;
-    font-size: 0.9rem !important;
+    filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
+    font-size: 0.9rem;
+    font-weight: bold;
+    line-height: 1;
   }
 
   .v-popper__arrow-outer,
   .v-popper__arrow-inner {
-    border-color: var(--color-tooltip-bg) !important;
+    border-color: var(--color-tooltip-bg);
   }
 }
 
@@ -1182,3 +1184,58 @@ select {
   border-top-left-radius: var(--radius-md) !important;
   border-top-right-radius: var(--radius-md) !important;
 }
+
+.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
+  .v-popper__inner {
+    border: 1px solid var(--color-button-bg);
+    padding: var(--gap-sm);
+    width: fit-content;
+    border-radius: var(--radius-md);
+    background-color: var(--color-raised-bg);
+    box-shadow: var(--shadow-floating);
+  }
+
+  .v-popper__arrow-outer {
+    border-color: var(--color-button-bg);
+  }
+
+  .v-popper__arrow-inner {
+    border-color: var(--color-raised-bg);
+  }
+}
+
+.v-popper__popper[data-popper-placement="bottom-end"] .v-popper__wrapper {
+  transform-origin: top right;
+}
+
+.v-popper__popper[data-popper-placement="top-end"] .v-popper__wrapper {
+  transform-origin: bottom right;
+}
+
+.v-popper__popper[data-popper-placement="bottom-start"] .v-popper__wrapper {
+  transform-origin: top left;
+}
+
+.v-popper__popper[data-popper-placement="top-start"] .v-popper__wrapper {
+  transform-origin: bottom left;
+}
+
+.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
+  transform: scale(.9);
+  opacity: 1;
+}
+
+.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+  transform: none;
+  transition: transform 0.125s;
+}
+
+.v-popper__popper.v-popper__popper--hide-from .v-popper__wrapper {
+  transform: none;
+  transition: transform 0.0625s;
+}
+
+.v-popper__popper.v-popper__popper--hide-to .v-popper__wrapper {
+  //transform: scale(.9);
+}
+
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index 4019281c9..0d6808a10 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -71,8 +71,8 @@ html {
   --radius-xl: 1.25rem;
   --radius-max: 999999999px;
 
-  --color-tooltip-text: var(--color-base);
-  --color-tooltip-bg: var(--color-button-bg);
+  --color-tooltip-text: var(--dark-color-contrast);
+  --color-tooltip-bg: #000;
 
   --color-ad: rgba(125, 75, 162, 0.2);
   --color-ad-raised: rgba(190, 140, 243, 0.5);
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7a510967b..1fd2619e1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -35,6 +35,7 @@
     "qrcode.vue": "^3.4.1",
     "vue-multiselect": "3.0.0",
     "vue-select": "4.0.0-beta.6",
+    "vue-virtual-scroller": "v2.0.0-beta.8",
     "vue3-apexcharts": "^1.4.4",
     "xss": "^1.0.14"
   }
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 7a8b39ea7..5a22c2ff7 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -162,6 +162,7 @@ const colorVariables = computed(() => {
 }
 
 /* Searches up to 4 children deep for valid button */
+.btn-wrapper :deep(:is(button, a, .button-like):first-child),
 .btn-wrapper :slotted(:is(button, a, .button-like):first-child),
 .btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child,
 .btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
@@ -194,6 +195,7 @@ const colorVariables = computed(() => {
   }
 }
 
+.btn-wrapper.outline :deep(:is(button, a, .button-like):first-child),
 .btn-wrapper.outline :slotted(:is(button, a, .button-like):first-child),
 .btn-wrapper.outline :slotted(*) > :is(button, a, .button-like):first-child,
 .btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
@@ -206,6 +208,7 @@ const colorVariables = computed(() => {
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
+.btn-wrapper :deep(:is(button, a, .button-like):first-child) > svg:first-child,
 .btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg:first-child,
 .btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg:first-child,
 .btn-wrapper
@@ -228,6 +231,7 @@ const colorVariables = computed(() => {
   gap: 1px;
 
   > .btn-wrapper:not(:first-child) {
+    :deep(:is(button, a, .button-like):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,
@@ -238,6 +242,7 @@ const colorVariables = computed(() => {
   }
 
   > :not(:last-child) {
+    :deep(:is(button, a, .button-like):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,
diff --git a/packages/ui/src/components/base/LoadingIndicator.vue b/packages/ui/src/components/base/LoadingIndicator.vue
new file mode 100644
index 000000000..55e2fdb58
--- /dev/null
+++ b/packages/ui/src/components/base/LoadingIndicator.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="w-full flex items-center justify-center flex-col gap-2">
+    <div class="title">Loading</div>
+    <div class="placeholder"></div>
+    <div class="placeholder"></div>
+    <div class="placeholder"></div>
+  </div>
+</template>
+
+<script setup></script>
+<style scoped>
+.title {
+  position: absolute;
+  z-index: 1;
+  font-weight: bold;
+  color: var(--color-contrast);
+
+  &::after {
+    content: '';
+    animation: dots 2s infinite;
+  }
+}
+
+@keyframes dots {
+  25% {
+    content: '';
+  }
+  50% {
+    content: '.';
+  }
+  75% {
+    content: '..';
+  }
+  0%,
+  100% {
+    content: '...';
+  }
+}
+
+.placeholder {
+  border-radius: var(--radius-lg);
+  width: 100%;
+  height: 4rem;
+  opacity: 0.25;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--color-raised-bg);
+  animation: pop 4s ease-in-out infinite;
+  border: 1px solid transparent;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: linear-gradient(
+      -45deg,
+      transparent 30%,
+      rgba(196, 217, 237, 0.075) 50%,
+      transparent 70%
+    );
+    animation: shimmer 4s ease-in-out infinite;
+  }
+
+  &:nth-child(2)::before {
+    animation-delay: 0s;
+  }
+
+  &:nth-child(3)::before {
+    animation-delay: 0.3s;
+  }
+
+  &:nth-child(4)::before {
+    animation-delay: 0.6s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: 0s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  &:nth-child(4) {
+    animation-delay: 0.6s;
+  }
+}
+
+@keyframes pop {
+  from {
+    opacity: 0.25;
+    border-color: transparent;
+  }
+  50% {
+    opacity: 0.5;
+    border-color: var(--color-button-bg);
+  }
+  to {
+    opacity: 0.25;
+    border-color: transparent;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    transform: translateX(-80%);
+  }
+  50%,
+  to {
+    transform: translateX(80%);
+  }
+}
+</style>
diff --git a/packages/ui/src/components/base/OverflowMenu.vue b/packages/ui/src/components/base/OverflowMenu.vue
index 298cc7d8f..6e8b537e9 100644
--- a/packages/ui/src/components/base/OverflowMenu.vue
+++ b/packages/ui/src/components/base/OverflowMenu.vue
@@ -3,8 +3,6 @@
     ref="dropdown"
     v-bind="$attrs"
     :disabled="disabled"
-    :position="position"
-    :direction="direction"
   >
     <slot></slot>
     <template #menu>
@@ -21,6 +19,7 @@
           :hover-filled="option.hoverFilled"
           :hover-filled-only="option.hoverFilledOnly"
           transparent
+          :v-close-popper="!option.remainOnClick"
           :action="
             option.action
               ? (event) => {
@@ -88,14 +87,10 @@ const props = withDefaults(
   defineProps<{
     options: Option[]
     disabled?: boolean
-    position?: string
-    direction?: string
   }>(),
   {
     options: () => [],
     disabled: false,
-    position: 'auto',
-    direction: 'auto',
   },
 )
 
diff --git a/packages/ui/src/components/base/PopoutMenu.vue b/packages/ui/src/components/base/PopoutMenu.vue
index dc4fc69c7..098c769df 100644
--- a/packages/ui/src/components/base/PopoutMenu.vue
+++ b/packages/ui/src/components/base/PopoutMenu.vue
@@ -1,276 +1,58 @@
 <template>
-  <div ref="dropdown" class="popup-container" tabindex="-1" :aria-expanded="dropdownVisible">
-    <button
-      v-bind="$attrs"
-      ref="dropdownButton"
-      :class="{ 'popout-open': dropdownVisible }"
-      :tabindex="tabInto ? -1 : 0"
-      @click="toggleDropdown"
-    >
+  <Dropdown theme="ribbit-popout" no-auto-focus @hide="focusTrigger" @apply-show="focusMenuChild">
+    <button ref="trigger">
       <slot></slot>
     </button>
-    <div
-      ref="dropdownMenu"
-      class="popup-menu"
-      :class="`position-${computedPosition}-${computedDirection} ${dropdownVisible ? 'visible' : ''}`"
-      :inert="!tabInto && !dropdownVisible"
-    >
-      <slot name="menu"> </slot>
-    </div>
-  </div>
+    <template #popper="{ hide }">
+      <button class="dummy-button" @focusin="hideAndFocusTrigger(hide)"></button>
+      <div ref="menu" class="contents">
+        <slot name="menu"> </slot>
+      </div>
+      <button class="dummy-button" @focusin="hideAndFocusTrigger(hide)"></button>
+    </template>
+  </Dropdown>
 </template>
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { Dropdown } from 'floating-vue'
+import { ref } from 'vue'
 
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  position: {
-    type: String,
-    default: 'auto',
-  },
-  direction: {
-    type: String,
-    default: 'auto',
-  },
-  tabInto: {
-    type: Boolean,
-    default: false,
-  },
-})
-defineOptions({
-  inheritAttrs: false,
-})
-
-const emit = defineEmits(['open', 'close'])
-
-const dropdownVisible = ref(false)
-const dropdown = ref(null)
-const dropdownButton = ref(null)
-const dropdownMenu = ref(null)
-const computedPosition = ref('bottom')
-const computedDirection = ref('left')
-
-function updateDirection() {
-  if (props.direction === 'auto') {
-    if (dropdownButton.value) {
-      const x = dropdownButton.value.getBoundingClientRect().left
-      computedDirection.value = x < window.innerWidth / 2 ? 'right' : 'left'
-    } else {
-      computedDirection.value = 'left'
-    }
-  } else {
-    computedDirection.value = props.direction
-  }
-  if (props.position === 'auto') {
-    if (dropdownMenu.value) {
-      computedPosition.value = 'bottom' // set to bottom before calulating to see if it fits below
-      const bottom = dropdownMenu.value.getBoundingClientRect().bottom
-
-      if (bottom > window.innerHeight) {
-        // if it doesn't fit below, set to top
-        computedPosition.value = 'top'
-      }
-    } else {
-      computedPosition.value = 'bottom'
-    }
-  } else {
-    computedPosition.value = props.position
-  }
-}
+const trigger = ref()
+const menu = ref()
 
-const toggleDropdown = () => {
-  if (!props.disabled) {
-    dropdownVisible.value = !dropdownVisible.value
-    if (dropdownVisible.value) {
-      emit('open')
-    } else {
-      dropdownButton.value.focus()
-      emit('close')
+function focusMenuChild() {
+  setTimeout(() => {
+    if (menu.value && menu.value.children && menu.value.children.length > 0) {
+      menu.value.children[0].focus()
     }
-  }
+  }, 50)
 }
 
-const hide = () => {
-  dropdownVisible.value = false
-  dropdownButton.value.focus()
-  emit('close')
+function hideAndFocusTrigger(hide) {
+  hide()
+  focusTrigger()
 }
 
-const show = () => {
-  dropdownVisible.value = true
-  emit('open')
-}
-
-defineExpose({
-  show,
-  hide,
-})
-
-const handleClickOutside = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    dropdown.value.$el !== event.target &&
-    !elements.includes(dropdown.value.$el) &&
-    !dropdown.value.contains(event.target)
-  ) {
-    dropdownVisible.value = false
-    emit('close')
-  }
+function focusTrigger() {
+  console.log(trigger.value)
+  trigger.value.focus()
 }
 
-onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
-  window.addEventListener('resize', updateDirection)
-  window.addEventListener('scroll', updateDirection)
-  window.addEventListener('keydown', handleKeyDown)
-  updateDirection()
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
-  window.removeEventListener('resize', updateDirection)
-  window.removeEventListener('scroll', updateDirection)
-  window.removeEventListener('keydown', handleKeyDown)
+defineOptions({
+  inheritAttrs: false,
 })
-
-function handleKeyDown(event) {
-  if (event.key === 'Escape') {
-    hide()
-  }
-}
 </script>
-
-<style lang="scss" scoped>
-.popup-container {
-  position: relative;
-
-  .popup-menu {
-    --_animation-offset: -1rem;
-    position: absolute;
-    scale: 0.75;
-    border: 1px solid var(--color-button-bg);
-    padding: var(--gap-sm);
-    width: fit-content;
-    border-radius: var(--radius-md);
-    background-color: var(--color-raised-bg);
-    box-shadow: var(--shadow-floating);
-    z-index: 10;
-    opacity: 0;
-    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;
-
-    @media (prefers-reduced-motion) {
-      transition: none !important;
-    }
-
-    &.position-bottom-left {
-      top: calc(100% + var(--gap-sm) - 1rem);
-      right: -1rem;
-    }
-
-    &.position-bottom-right {
-      top: calc(100% + var(--gap-sm) - 1rem);
-      left: -1rem;
-    }
-
-    &.position-top-left {
-      bottom: calc(100% + var(--gap-sm) - 1rem);
-      right: -1rem;
-    }
-
-    &.position-top-right {
-      bottom: calc(100% + var(--gap-sm) - 1rem);
-      left: -1rem;
-    }
-
-    &.position-left-up {
-      bottom: -1rem;
-      right: calc(100% + var(--gap-sm) - 1rem);
-    }
-
-    &.position-left-down {
-      top: -1rem;
-      right: calc(100% + var(--gap-sm) - 1rem);
-    }
-
-    &.position-right-up {
-      bottom: -1rem;
-      left: calc(100% + var(--gap-sm) - 1rem);
-    }
-
-    &.position-right-down {
-      top: -1rem;
-      left: calc(100% + var(--gap-sm) - 1rem);
-    }
-
-    &:not(.visible):not(:focus-within) {
-      pointer-events: none;
-
-      *,
-      ::before,
-      ::after {
-        pointer-events: none;
-      }
-    }
-
-    &.visible,
-    &:focus-within {
-      opacity: 1;
-      scale: 1;
-
-      &.position-bottom-left {
-        top: calc(100% + var(--gap-sm));
-        right: 0;
-      }
-
-      &.position-bottom-right {
-        top: calc(100% + var(--gap-sm));
-        left: 0;
-      }
-
-      &.position-top-left {
-        bottom: calc(100% + var(--gap-sm));
-        right: 0;
-      }
-
-      &.position-top-right {
-        bottom: calc(100% + var(--gap-sm));
-        left: 0;
-      }
-
-      &.position-left-up {
-        bottom: 0rem;
-        right: calc(100% + var(--gap-sm));
-      }
-
-      &.position-left-down {
-        top: 0rem;
-        right: calc(100% + var(--gap-sm));
-      }
-
-      &.position-right-up {
-        bottom: 0rem;
-        left: calc(100% + var(--gap-sm));
-      }
-
-      &.position-right-down {
-        top: 0rem;
-        left: calc(100% + var(--gap-sm));
-      }
-    }
-
-    .btn {
-      white-space: nowrap;
-    }
-  }
+<style scoped>
+.dummy-button {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  outline: none;
 }
 </style>
diff --git a/packages/ui/src/components/content/ContentListItem.vue b/packages/ui/src/components/content/ContentListItem.vue
index 30cb4e446..0b18d7c5f 100644
--- a/packages/ui/src/components/content/ContentListItem.vue
+++ b/packages/ui/src/components/content/ContentListItem.vue
@@ -44,7 +44,7 @@ const emit = defineEmits(['update:selected'])
 </script>
 <template>
   <div
-    class="grid grid-cols-[min-content,4fr,2fr,3fr,min-content] gap-2 items-center rounded-xl bg-bg-raised p-2"
+    class="grid grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center p-2 h-[64px] border-solid border-0 border-b-[1px] border-b-button-bg relative"
   >
     <Checkbox
       v-model="selected"
@@ -52,29 +52,30 @@ const emit = defineEmits(['update:selected'])
       class="select-checkbox"
       @update:model-value="emit('update:selected', $event)"
     />
-    <AutoLink :to="item.project?.link ?? ''" v-bind="item.project?.linkProps ?? {}">
       <div
         class="flex items-center gap-2 text-contrast font-medium"
         :class="{ 'opacity-50': item.disabled }"
       >
-        <Avatar :src="item.icon ?? ''" :class="{ grayscale: item.disabled }" />
+        <AutoLink :to="item.project?.link ?? ''" tabindex="-1" v-bind="item.project?.linkProps ?? {}">
+          <Avatar :src="item.icon ?? ''" :class="{ grayscale: item.disabled }" size="48px" />
+        </AutoLink>
         <div class="flex flex-col">
-          <span :class="item.disabled ? `line-clamp-1 line-through` : `line-clamp-2`">
-            {{ item.title ?? item.filename }}
-          </span>
-          <span v-if="item.disabled" class="flex gap-1 items-center text-sm leading-tight">
-            <SlashIcon /> Disabled
-          </span>
+          <AutoLink :to="item.project?.link ?? ''" v-bind="item.project?.linkProps ?? {}">
+            <div class="text-contrast line-clamp-1" :class="{ 'line-through': item.disabled }">
+                {{ item.title ?? item.filename }}
+            </div>
+          </AutoLink>
+          <AutoLink :to="item.creator?.link ?? ''" v-bind="item.creator?.linkProps ?? {}">
+            <div class="line-clamp-1 break-all" :class="{ 'opacity-50': item.disabled }">
+              <slot v-if="item.creator" :item="item">
+                <span class="text-secondary">
+                 by {{ item.creator.name }}
+                </span>
+              </slot>
+            </div>
+          </AutoLink>
         </div>
       </div>
-    </AutoLink>
-    <AutoLink :to="item.creator?.link ?? ''" v-bind="item.creator?.linkProps ?? {}">
-      <div class="line-clamp-1 break-all text-primary" :class="{ 'opacity-50': item.disabled }">
-        <slot v-if="item.creator" :item="item">
-          {{ item.creator.name }}
-        </slot>
-      </div>
-    </AutoLink>
     <div class="flex flex-col max-w-60" :class="{ 'opacity-50': item.disabled }">
       <div v-if="item.version" class="line-clamp-1 break-all">
         <slot :creator="item.creator">
@@ -83,7 +84,7 @@ const emit = defineEmits(['update:selected'])
       </div>
       <div class="text-secondary text-xs line-clamp-1 break-all">{{ item.filename }}</div>
     </div>
-    <div class="flex gap-1">
+    <div class="flex justify-end gap-1">
       <slot name="actions" :item="item" />
     </div>
   </div>
diff --git a/packages/ui/src/components/content/ContentListPanel.vue b/packages/ui/src/components/content/ContentListPanel.vue
index 0efb4badb..f58cc17f2 100644
--- a/packages/ui/src/components/content/ContentListPanel.vue
+++ b/packages/ui/src/components/content/ContentListPanel.vue
@@ -6,6 +6,8 @@ import { type ContentItem } from './ContentListItem.vue'
 import {
   DropdownIcon,
 } from '@modrinth/assets'
+// @ts-ignore
+import { RecycleScroller } from 'vue-virtual-scroller'
 
 defineProps<{
   items: ContentItem<T>[]
@@ -27,26 +29,36 @@ function setSelected(filename: string, value: boolean) {
 </script>
 
 <template>
-  <div class="flex flex-col grid-cols-[min-content,auto,auto,auto,auto] gap-2">
+  <div class="flex flex-col grid-cols-[min-content,auto,auto,auto,auto]">
     <div
-      class="grid grid-cols-[min-content,4fr,2fr,3fr,auto] gap-2 items-center px-2 pb-2 text-contrast font-bold"
+      class="grid grid-cols-[min-content,4fr,3fr,2fr] gap-3 items-center px-2 pt-1 pb-4 text-contrast font-bold"
     >
       <Checkbox :model-value="false" class="select-checkbox" />
-      <div class="flex items-center gap-1">
-        <div class="w-[36px]"></div>
+      <div class="flex items-center gap-2">
+<!--        <div class="w-[48px]"></div>-->
         Name <DropdownIcon />
       </div>
-      <div class="flex items-center gap-1">Owner <DropdownIcon v-if="false" /></div>
       <div class="flex items-center gap-1 max-w-60">Updated <DropdownIcon v-if="false" /></div>
-      <div class="flex w-[36px]"></div>
+      <div class="flex"></div>
+    </div>
+    <div class="bg-bg-raised rounded-xl">
+      <RecycleScroller
+        :items="items.slice().sort((a, b) => a.filename.localeCompare(b.filename))"
+        :item-size="64"
+        disable-transform
+        key-field="filename"
+        style="height: 100%"
+        v-slot="{ item }"
+      >
+        <ContentListItem
+          :item="item"
+          class="mb-2"
+        >
+          <template #actions="{ item }">
+            <slot name="actions" :item="item" />
+          </template>
+        </ContentListItem>
+      </RecycleScroller>
     </div>
-    <ContentListItem
-      v-for="item in items.slice().sort((a, b) => a.filename.localeCompare(b.filename))"
-      :item="item"
-    >
-      <template #actions="{ item }">
-        <slot name="actions" :item="item" />
-      </template>
-    </ContentListItem>
   </div>
 </template>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 9e7f1f317..b27dd9b43 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -14,6 +14,7 @@ export { default as DropArea } from './base/DropArea.vue'
 export { default as DropdownSelect } from './base/DropdownSelect.vue'
 export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
 export { default as FileInput } from './base/FileInput.vue'
+export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
 export { default as Notifications } from './base/Notifications.vue'