diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 56011ad8e..ee27ff5bb 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -30,6 +30,8 @@ export default {
           { text: 'Modal', link: '/components/modal' },
           { text: 'Dropdown Select', link: '/components/dropdown-select' },
           { text: 'Dropdown Button', link: '/components/dropdown-button' },
+          { text: 'Popout Menu', link: '/components/popout-menu' },
+          { text: 'Overflow Menu', link: '/components/overflow-menu' },
           { text: 'Project Card', link: '/components/project-card' },
           { text: 'Environment Indicator', link: '/components/environment-indicator' },
           { text: 'Categories', link: '/components/categories' },
diff --git a/docs/components/button.md b/docs/components/button.md
index 5fdd55810..3ceb5fee7 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -1,35 +1,109 @@
-# Button
+# Buttons
+
+## Standard
 
 <DemoContainer>
-<Button>Standard</Button>
-<Button color="primary">Primary</Button>
-<Button color="secondary">Secondary</Button>
-<Button color="highlight">Highlight</Button>
-<Button color="raised">Raised</Button>
-<Button color="danger">Danger</Button>
-<Button><CheckIcon /> With Icon</Button>
-<Button iconOnly><XIcon /></Button>
-<Button large>Large button</Button>
-<Button color="primary" large>Discover mods</Button>
-<Button color="danger" large outline>Be warned</Button>
-<Button large outline>Sign up</Button>
-<Button><HeartIcon /> Follow project</Button>
-<Button outline color="danger"><TrashIcon /> Delete project</Button>
+<Button><BookmarkIcon /> Save</Button>
+<Button color="primary"><UploadIcon /> Upload</Button>
+<Button color="secondary"><PlusIcon /> Create new instance</Button>
+<Button color="highlight"><ScaleIcon /> Submit for review</Button>
+<Button color="danger"><TrashIcon /> Delete</Button>
 </DemoContainer>
 
 ```vue
-<Button>Standard</Button>
-<Button color="primary">Primary</Button>
-<Button color="secondary">Secondary</Button>
-<Button color="highlight">Highlight</Button>
-<Button color="raised">Raised</Button>
-<Button color="danger">Danger</Button>
-<Button><CheckIcon /> With Icon</Button>
-<Button iconOnly><XIcon /></Button>
-<Button large>Large button</Button>
-<Button color="primary" large>Discover mods</Button>
-<Button color="danger" large outline>Be warned</Button>
-<Button large outline>Sign up</Button>
-<Button><HeartIcon /> Follow project</Button>
-<Button outline color="danger"><TrashIcon /> Delete project</Button>
+<Button><BookmarkIcon /> Save</Button>
+<Button color="primary"><UploadIcon /> Upload</Button>
+<Button color="secondary"><PlusIcon /> Create new instance</Button>
+<Button color="highlight"><ScaleIcon /> Submit for review</Button>
+<Button color="danger"><TrashIcon /> Delete</Button>
+```
+
+## Large
+
+<DemoContainer>
+<Button color="primary" large><DownloadIcon /> Download</Button>
+<Button color="blue" large><ServerIcon /> Host a Server</Button>
+<Button color="purple" large><HeartIcon /> Donate</Button>
+</DemoContainer>
+
+```vue
+<Button color="primary" large><DownloadIcon /> Download</Button>
+<Button color="blue" large><ServerIcon /> Host a Server</Button>
+<Button color="purple" large><HeartIcon /> Donate</Button>
+```
+
+## Outline
+
+<DemoContainer>
+<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
+<Button color="red" outline><ReportIcon /> Report project</Button>
+</DemoContainer>
+
+```vue
+<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
+<Button color="red" outline><ReportIcon /> Report project</Button>
+```
+
+## Transparent
+
+<DemoContainer>
+<Button transparent><IssuesIcon /> Report issues</Button>
+<Button transparent><CodeIcon /> View sources</Button>
+<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
+</DemoContainer>
+
+```vue
+<Button transparent><IssuesIcon /> Report issues</Button>
+<Button transparent><CodeIcon /> View sources</Button>
+<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
+```
+
+## Hover-filled
+
+<DemoContainer>
+<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
+```
+
+## Hover-filled-only
+
+<DemoContainer>
+<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
+```
+
+## Icon-only
+
+<DemoContainer>
+<Button icon-only><HeartIcon /></Button>
+<Button icon-only><XIcon /></Button>
+<Button icon-only><MoreHorizontalIcon /></Button>
+<Button icon-only transparent><SunIcon /></Button>
+<Button icon-only transparent><DropdownIcon /></Button>
+</DemoContainer>
+
+```vue
+<Button icon-only><HeartIcon /></Button>
+<Button icon-only><XIcon /></Button>
+<Button icon-only><MoreHorizontalIcon /></Button>
+<Button icon-only transparent><SunIcon /></Button>
+<Button icon-only transparent><DropdownIcon /></Button>
 ```
diff --git a/docs/components/overflow-menu.md b/docs/components/overflow-menu.md
new file mode 100644
index 000000000..bd80ad59c
--- /dev/null
+++ b/docs/components/overflow-menu.md
@@ -0,0 +1,94 @@
+# Overflow Menu
+<DemoContainer>
+  <OverflowMenu :options="[
+  {
+    'id': 'play',
+    'color': 'primary',
+    'action': () => {},
+    'hoverFilledOnly': true
+  },
+  { divider: true },
+  {
+    'id': 'duplicate',
+    'action': () => {}
+  },
+  {
+    'id': 'report',
+    'action': () => {}
+  },
+  {
+    'id': 'remain',
+    'action': () => {},
+    'remainOnClick': true,
+  },
+  { divider: true },
+  {
+    'id': 'delete',
+    'color': 'danger',
+    'action': () => {},
+    'hoverFilled': true,
+  }
+]" class="btn">
+    More options...
+    <template #play>
+      <PlayIcon /> Play
+    </template>
+    <template #duplicate>
+      <CopyIcon /> Duplicate
+    </template>
+    <template #report>
+      <ReportIcon /> Report
+    </template>
+    <template #remain>
+      <ClearIcon /> I shall remain
+    </template>
+    <template #delete>
+      <TrashIcon /> Delete
+    </template>
+  </OverflowMenu>
+</DemoContainer>
+
+```vue
+<OverflowMenu
+  class="btn"
+  :options="[
+    {
+      'id': 'play',
+      'color': 'primary',
+      'action': () => {},
+      'hoverFilledOnly': true
+    },
+    { divider: true },
+    {
+      'id': 'duplicate',
+      'action': () => {}
+    },
+    {
+      'id': 'report',
+      'action': () => {}
+    },
+    {
+      'id': 'remain',
+      'action': () => {},
+      'remainOnClick': true,
+    },
+    { divider: true },
+    {
+      'id': 'delete',
+      'color': 'danger',
+      'action': () => {},
+      'hoverFilled': true,
+    }
+]">
+  More options...
+  <template #like>
+    <HeartIcon /> Like
+  </template>
+  <template #report>
+    <ReportIcon /> Report
+  </template>
+  <template #delete>
+    <TrashIcon /> Delete
+  </template>
+</OverflowMenu>
+```
diff --git a/docs/components/popout-menu.md b/docs/components/popout-menu.md
new file mode 100644
index 000000000..31d11de08
--- /dev/null
+++ b/docs/components/popout-menu.md
@@ -0,0 +1,76 @@
+# Popout Menu
+<DemoContainer>
+  <PopoutMenu class="btn" position="bottom" direction="left">
+    Bottom going left
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="bottom" direction="right">
+    Bottom going right
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="top" direction="left">
+    Top going left
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="top" direction="right">
+    Top going right
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="left" direction="up">
+    Left going up
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="left" direction="down">
+    Left going down
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="right" direction="up">
+    Right going up
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+  <PopoutMenu class="btn" position="right" direction="down">
+    Right going down
+    <template #menu>
+      Menu contents!
+      Menu contents!
+      Menu contents!
+    </template>
+  </PopoutMenu>
+</DemoContainer>
+
+```vue
+<PopoutMenu class="btn" position="bottom" direction="right">
+  Bottom going right
+  <template #menu>
+    Menu contents!
+  </template>
+</PopoutMenu>
+```
diff --git a/lib/assets/icons/bookmark.svg b/lib/assets/icons/bookmark.svg
new file mode 100644
index 000000000..fbe559bc5
--- /dev/null
+++ b/lib/assets/icons/bookmark.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-bookmark"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
\ No newline at end of file
diff --git a/lib/assets/icons/copy.svg b/lib/assets/icons/copy.svg
new file mode 100644
index 000000000..f3b629c6b
--- /dev/null
+++ b/lib/assets/icons/copy.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-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
\ No newline at end of file
diff --git a/lib/assets/icons/more-horizontal.svg b/lib/assets/icons/more-horizontal.svg
new file mode 100644
index 000000000..65d9a0563
--- /dev/null
+++ b/lib/assets/icons/more-horizontal.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-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
\ No newline at end of file
diff --git a/lib/assets/icons/more-vertical.svg b/lib/assets/icons/more-vertical.svg
new file mode 100644
index 000000000..98f4a4dfe
--- /dev/null
+++ b/lib/assets/icons/more-vertical.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-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
\ No newline at end of file
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 588ed6939..3eaa4089b 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -266,10 +266,13 @@ a,
   &:focus-visible:not(&:disabled),
   &:hover:not(&:disabled) {
     cursor: pointer;
-    filter: brightness(0.85);
+
+    &:not(.btn-outline.btn-hover-filled, .btn-transparent) {
+      filter: brightness(0.85);
+    }
   }
 
-  &:active:not(&:disabled) {
+  &:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
     filter: brightness(0.8);
   }
 
@@ -321,44 +324,121 @@ a,
 .btn {
   @extend .button-base;
 
-  --text-color: var(--color-contrast);
-  --background-color: var(--color-button-bg);
-  --shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
+  --_text-color: var(--color-base);
+  --_background-color: var(--color-button-bg);
+  --_accent-color: var(--color-base);
+  --_shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 
-  &.btn-outline {
-    --background-color: var(--color-contrast);
-    --text-color: var(--color-raised-bg);
+  &.btn-outline,
+  &.btn-transparent {
     box-sizing: border-box;
 
     background-color: transparent;
-    border: 2px solid var(--background-color);
-    color: var(--background-color);
-
-    padding-block: calc(var(--gap-sm) - 2px);
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+      color 0.2s ease-in-out;
+    box-shadow: none;
   }
 
-  &.btn-raised {
-    --shadow: var(--shadow-inset-sm), var(--shadow-raised);
-    --background-color: var(--color-raised-bg);
+  &.btn-transparent {
+    --_accent-color: var(--color-base);
+    color: var(--_accent-color);
+
+    &.btn-hover-filled-only {
+      color: var(--color-base);
+    }
+
+    &:focus-visible:not(&:disabled),
+    &:hover:not(&:disabled) {
+      background-color: var(--color-button-bg);
+
+      &.btn-hover-filled,
+      &.btn-hover-filled-only {
+        color: var(--_text-color);
+        background-color: var(--_background-color);
+      }
+    }
+  }
+
+  &.btn-outline {
+    --_accent-color: var(--color-contrast);
+    border: 2px solid var(--_accent-color);
+    padding-block: calc(var(--gap-sm) - 2px);
+    color: var(--_background-color);
+
+    &.btn-hover-filled-only {
+      color: var(--color-contrast);
+      border-color: var(--color-contrast);
+    }
+
+    &:focus-visible:not(&:disabled),
+    &:hover:not(&:disabled) {
+      &.btn-hover-filled,
+      &.btn-hover-filled-only {
+        border-color: var(--_accent-color);
+        color: var(--_text-color);
+        background-color: var(--_background-color);
+      }
+    }
   }
 
   &.btn-danger {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-red);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-red);
+    --_accent-color: var(--color-red);
   }
 
   &.btn-primary {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-brand);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-brand);
+    --_accent-color: var(--color-brand);
   }
 
   &.btn-secondary {
-    --background-color: var(--color-brand-highlight);
+    --_text-color: var(--color-contrast);
+    --_background-color: var(--color-brand-highlight);
+    --_accent-color: var(--color-brand-highlight);
   }
 
   &.btn-highlight {
-    --text-color: var(--color-accent-contrast);
-    --background-color: var(--color-orange);
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-orange);
+    --_accent-color: var(--color-orange);
+  }
+
+  &.btn-red {
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-red);
+    --_accent-color: var(--color-red);
+  }
+
+  &.btn-orange {
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-orange);
+    --_accent-color: var(--color-orange);
+  }
+
+  &.btn-green {
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-green);
+    --_accent-color: var(--color-green);
+  }
+
+  &.btn-blue {
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-blue);
+    --_accent-color: var(--color-blue);
+  }
+
+  &.btn-purple {
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-purple);
+    --_accent-color: var(--color-purple);
+  }
+
+  &.btn-gray {
+    --_text-color: var(--color-accent-contrast);
+    --_background-color: var(--color-gray);
+    --_accent-color: var(--color-gray);
   }
 
   &.btn-large {
@@ -368,25 +448,26 @@ a,
 
   box-sizing: border-box;
 
-  color: var(--text-color);
-  background-color: var(--background-color);
-  box-shadow: var(--shadow);
+  color: var(--_text-color);
+  background-color: var(--_background-color);
+  box-shadow: var(--_shadow);
   border-radius: var(--radius-md);
 
-  padding-inline: var(--gap-lg);
-  padding-block: var(--gap-sm);
+  padding: var(--gap-sm) var(--gap-lg);
 
   display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
   width: fit-content;
   height: fit-content;
   text-decoration: none;
+  gap: 0.5rem;
+  line-height: 1.25rem;
 
   svg {
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: 0.5rem;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
   :deep(.external-icon) {
@@ -398,17 +479,7 @@ a,
   }
 
   &.icon-only {
-    padding: 0;
-    height: 2.25rem;
-    width: 2.25rem;
-
-    svg {
-      min-width: 1.25rem;
-      max-width: 1.25rem;
-      min-height: 1.25rem;
-      max-height: 1.25rem;
-      margin: auto;
-    }
+    padding: var(--gap-sm);
   }
 
   &.transparent {
diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss
index 14c023cdd..5e9a1343f 100644
--- a/lib/assets/styles/variables.scss
+++ b/lib/assets/styles/variables.scss
@@ -25,6 +25,7 @@ html {
   --color-button-bg: hsl(220, 13%, 91%);
 
   --color-base: hsl(221, 39%, 11%);
+  --color-secondary: #6b7280;
   --color-contrast: #1a202c;
   --color-accent-contrast: #ffffff;
 
@@ -67,6 +68,7 @@ html {
   --color-button-bg: hsl(222, 13%, 30%);
 
   --color-base: var(--dark-color-base);
+  --color-secondary: #96a2b0;
   --color-contrast: var(--dark-color-contrast);
   --color-accent-contrast: #000000;
 
diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue
index 8bddc3018..4d9a4480d 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -32,9 +32,23 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  transparent: {
+    type: Boolean,
+    default: false,
+  },
+  hoverFilled: {
+    type: Boolean,
+    default: false,
+  },
+  hoverFilledOnly: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const accentedButton = computed(() => ['danger', 'primary'].includes(props.color))
+const accentedButton = computed(() =>
+  ['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color)
+)
 </script>
 
 <template>
@@ -42,14 +56,22 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
     v-if="link"
     class="btn"
     :class="{
-      'icon-only': props.iconOnly,
-      'btn-large': props.large,
-      'btn-raised': color === 'raised',
+      'icon-only': iconOnly,
+      'btn-large': large,
       'btn-danger': color === 'danger',
       'btn-primary': color === 'primary',
       'btn-secondary': color === 'secondary',
       'btn-highlight': color === 'highlight',
-      'btn-outline': props.outline,
+      'btn-red': color === 'red',
+      'btn-orange': color === 'orange',
+      'btn-green': color === 'green',
+      'btn-blue': color === 'blue',
+      'btn-purple': color === 'purple',
+      'btn-gray': color === 'gray',
+      'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
+      'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"
     :to="link"
@@ -63,14 +85,22 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
     v-else
     class="btn"
     :class="{
-      'icon-only': props.iconOnly,
-      'btn-large': props.large,
-      'btn-raised': color === 'raised',
+      'icon-only': iconOnly,
+      'btn-large': large,
       'btn-danger': color === 'danger',
       'btn-primary': color === 'primary',
       'btn-secondary': color === 'secondary',
       'btn-highlight': color === 'highlight',
-      'btn-outline': props.outline,
+      'btn-red': color === 'red',
+      'btn-orange': color === 'orange',
+      'btn-green': color === 'green',
+      'btn-blue': color === 'blue',
+      'btn-purple': color === 'purple',
+      'btn-gray': color === 'gray',
+      'btn-transparent': transparent,
+      'btn-hover-filled': hoverFilled,
+      'btn-hover-filled-only': hoverFilledOnly,
+      'btn-outline': outline,
       'color-accent-contrast': accentedButton,
     }"
     @click="action"
diff --git a/lib/components/base/OverflowMenu.vue b/lib/components/base/OverflowMenu.vue
new file mode 100644
index 000000000..328c88564
--- /dev/null
+++ b/lib/components/base/OverflowMenu.vue
@@ -0,0 +1,85 @@
+<template>
+  <PopoutMenu
+    ref="dropdown"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :position="position"
+    :direction="direction"
+  >
+    <slot></slot>
+    <template #menu>
+      <template v-for="(option, index) in options">
+        <div v-if="option.divider" :key="`divider-${index}`" class="card-divider"></div>
+        <Button
+          v-else
+          :key="`option-${option.id}`"
+          :color="option.color ? option.color : 'default'"
+          :hover-filled="option.hoverFilled"
+          :hover-filled-only="option.hoverFilledOnly"
+          transparent
+          :action="
+            () => {
+              option.action()
+              if (!option.remainOnClick) {
+                close()
+              }
+            }
+          "
+        >
+          <template v-if="!$slots[option.id]">{{ option.id }}</template>
+          <slot :name="option.id"></slot>
+        </Button>
+      </template>
+    </template>
+  </PopoutMenu>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import PopoutMenu from '@/components/base/PopoutMenu.vue'
+import Button from '@/components/base/Button.vue'
+
+defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dropdown = ref(null)
+
+const close = () => {
+  console.log('closing!')
+  dropdown.value.hide()
+}
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  white-space: nowrap;
+  width: 100%;
+  box-shadow: none;
+  --text-color: var(--color-base);
+  --background-color: transparent;
+  justify-content: flex-start;
+
+  &:not(:last-child) {
+    margin-bottom: var(--gap-xs);
+  }
+}
+</style>
diff --git a/lib/components/base/PopoutMenu.vue b/lib/components/base/PopoutMenu.vue
new file mode 100644
index 000000000..54cf0b2c1
--- /dev/null
+++ b/lib/components/base/PopoutMenu.vue
@@ -0,0 +1,195 @@
+<template>
+  <div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible">
+    <button v-bind="$attrs" ref="dropdownButton" @click="toggleDropdown">
+      <slot></slot>
+    </button>
+    <div
+      class="popup-menu"
+      :class="`position-${position}-${direction} ${dropdownVisible ? 'visible' : ''}`"
+    >
+      <slot name="menu"> </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+  },
+  direction: {
+    type: String,
+    default: 'left',
+  },
+})
+defineOptions({
+  inheritAttrs: false,
+})
+
+const dropdownVisible = ref(false)
+const dropdown = ref(null)
+const dropdownButton = ref(null)
+
+const toggleDropdown = () => {
+  if (!props.disabled) {
+    dropdownVisible.value = !dropdownVisible.value
+    if (!dropdownVisible.value) {
+      dropdownButton.value.focus()
+    }
+  }
+}
+
+const hide = () => {
+  dropdownVisible.value = false
+  dropdownButton.value.focus()
+}
+
+const show = () => {
+  dropdownVisible.value = true
+}
+
+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
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
+</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;
+    pointer-events: none;
+    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;
+
+    &.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);
+    }
+
+    &.visible,
+    &:focus-within {
+      opacity: 1;
+      pointer-events: unset;
+      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>
diff --git a/lib/components/base/Slider.vue b/lib/components/base/Slider.vue
index 53182d440..033a20b48 100644
--- a/lib/components/base/Slider.vue
+++ b/lib/components/base/Slider.vue
@@ -4,10 +4,10 @@
       <div class="slide-container">
         <div class="snap-points">
           <div
+            v-for="snapPoint in props.snapPoints"
+            :key="snapPoint"
             class="snap-point"
             :class="{ green: snapPoint <= currentValue }"
-            v-for="snapPoint in props.snapPoints"
-            v-bind:key="snapPoint"
             :style="{ left: ((snapPoint - props.min) / (props.max - props.min)) * 100 + '%' }"
           ></div>
         </div>
diff --git a/lib/components/index.js b/lib/components/index.js
index 67f1a74c1..44969fe98 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -36,12 +36,16 @@ export { default as NavItem } from './nav/NavItem.vue'
 export { default as NavRow } from './nav/NavRow.vue'
 export { default as NavStack } from './nav/NavStack.vue'
 
+export { default as PopoutMenu } from './base/PopoutMenu.vue'
+export { default as OverflowMenu } from './base/OverflowMenu.vue'
+
 export { default as AlignLeftIcon } from '@/assets/icons/align-left.svg'
 export { default as ArchiveIcon } from '@/assets/icons/archive.svg'
 export { default as AsteriskIcon } from '@/assets/icons/asterisk.svg'
 export { default as BellIcon } from '@/assets/icons/bell.svg'
 export { default as BellRingIcon } from '@/assets/icons/bell-ring.svg'
 export { default as BookIcon } from '@/assets/icons/book.svg'
+export { default as BookmarkIcon } from '@/assets/icons/bookmark.svg'
 export { default as BoxIcon } from '@/assets/icons/box.svg'
 export { default as CalendarIcon } from '@/assets/icons/calendar.svg'
 export { default as ChartIcon } from '@/assets/icons/chart.svg'
@@ -55,6 +59,7 @@ export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg'
 export { default as CodeIcon } from '@/assets/icons/code.svg'
 export { default as CoinsIcon } from '@/assets/icons/coins.svg'
 export { default as ContractIcon } from '@/assets/icons/contract.svg'
+export { default as CopyIcon } from '@/assets/icons/copy.svg'
 export { default as CopyrightIcon } from '@/assets/icons/copyright.svg'
 export { default as CurrencyIcon } from '@/assets/icons/currency.svg'
 export { default as DashboardIcon } from '@/assets/icons/dashboard.svg'
@@ -94,6 +99,8 @@ export { default as LockIcon } from '@/assets/icons/lock.svg'
 export { default as LogInIcon } from '@/assets/icons/log-in.svg'
 export { default as LogOutIcon } from '@/assets/icons/log-out.svg'
 export { default as MoonIcon } from '@/assets/icons/moon.svg'
+export { default as MoreHorizontalIcon } from '@/assets/icons/more-horizontal.svg'
+export { default as MoreVerticalIcon } from '@/assets/icons/more-vertical.svg'
 export { default as OmorphiaIcon } from '@/assets/icons/omorphia.svg'
 export { default as PaintBrushIcon } from '@/assets/icons/paintbrush.svg'
 export { default as PlayIcon } from '@/assets/icons/play.svg'
diff --git a/package.json b/package.json
index dbbdc50ca..49c1a4714 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.41",
+  "version": "0.5.0",
   "files": [
     "dist",
     "lib"