Mostly finished the button for the custom dropdown component. Just need to update the text displayed to reflect the current selection.

17th Website/src/components/dropdown/Dropdown.vue

@@ -1,6 +1,7 @@
 <script>
 import { provide } from 'vue';
 import { Icon } from '@iconify/vue'
+import clickOutSide from '@mahdikhashan/vue3-click-outside'
 
 export default {
     name: 'Dropdown',
@@ -29,12 +30,15 @@ export default {
     },
     props: {
         title: String
+    },
+    directives: {
+        clickOutSide,
     }
 }
 </script>
 
 <template>
-    <div id="button" @click="toggle" v-click-away="away">
+    <div id="button" @click="toggle" v-click-out-side="away">
         <slot name="toggler">
             <button>
                 <p>{{ title }}</p>

17th Website/src/components/dropdown/DropdownItem.vue

@@ -11,10 +11,14 @@ export default {
 </template>
 
 <style scoped>
-div {
-    background-color: aliceblue;
+* {
+    color: var(--white);
+    padding: 5px;
 }
-h1 {
-    color: black !important;
+
+div:hover {
+    background-color: var(--accent-primary);
+    transition: color 0.5s;
 }
+
 </style>