diff --git a/components/Dropdown.vue b/components/Dropdown.vue
new file mode 100644
index 0000000..ff03799
--- /dev/null
+++ b/components/Dropdown.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="dropdown">
+    <div v-for="option of props.options" class="dropdown-option">
+      <button class="button" :data-value="option.value" @click.prevent="option.callback">{{ option.name }}</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DropdownOption } from '~/types/interfaces';
+
+const props = defineProps<{ options: DropdownOption[] }>();
+
+</script>
+
+<style scoped>
+
+.dropdown {
+  position: absolute;
+  z-index: 100;
+  left: 4dvw;
+  bottom: 2dvh;
+  background-color: var(--background-color);
+  width: 10dvw;
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-option {
+  border: .09rem solid brown;
+}
+
+.button {
+  padding-top: .5dvh;
+  padding-bottom: .5dvh;
+  color: var(--main-text-color);
+  background-color: transparent;
+  width: 100%;
+  border: none;
+}
+
+.button:hover {
+  background-color: rgb(70, 70, 70);
+}
+
+</style>
\ No newline at end of file
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 1aba1bc..fe58dd2 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -81,3 +81,9 @@ export interface ScrollPosition {
 	offsetTop: number,
 	offsetLeft: number
 }
+
+export interface DropdownOption {
+	name: string,
+	value: string | number,
+	callback: () => void
+}