diff --git a/17th Website/src/components/ProfilePage/profileHeader.vue b/17th Website/src/components/ProfilePage/profileHeader.vue
index 57cc1bd..7e365fe 100644
--- a/17th Website/src/components/ProfilePage/profileHeader.vue	
+++ b/17th Website/src/components/ProfilePage/profileHeader.vue	
@@ -31,6 +31,7 @@ export default {
     flex-direction: column-reverse;
     margin-top: 50px;
     max-width: 400px;
+    min-width: 260px;
     padding-right: 120px;
     border-right: solid;
     border-color: var(--background-secondary);
diff --git a/17th Website/src/components/ProfilePage/profileSubNav.vue b/17th Website/src/components/ProfilePage/profileSubNav.vue
index 0061dd5..90da27b 100644
--- a/17th Website/src/components/ProfilePage/profileSubNav.vue	
+++ b/17th Website/src/components/ProfilePage/profileSubNav.vue	
@@ -6,6 +6,7 @@ import { RouterLink } from 'vue-router'
     name: 'subnav',
     props: {
         link: String,
+        content: String,
         active: Boolean
     }
  }
@@ -13,6 +14,6 @@ import { RouterLink } from 'vue-router'
 
 <template>
     <RouterLink :to="link">
-        <p>{{ content }}</p>
+        <p :class="{active: active}">{{ content }}</p>
     </RouterLink>
 </template>
\ No newline at end of file
diff --git a/17th Website/src/components/dropdown/Dropdown.vue b/17th Website/src/components/dropdown/Dropdown.vue
index 644ad0c..1750c76 100644
--- a/17th Website/src/components/dropdown/Dropdown.vue	
+++ b/17th Website/src/components/dropdown/Dropdown.vue	
@@ -9,7 +9,7 @@ export default {
             sharedState: this.sharedState
         }
     },
-    data () {
+    data() {
         return {
             sharedState: {
                 active: false
@@ -20,22 +20,27 @@ export default {
         toggle() {
             this.sharedState.active = !this.sharedState.active
         }
+    },
+    components: {
+        Icon
     }
 }
 </script>
 
 <template>
-    <div @click="toggle">
+    <div id="button" @click="toggle">
         <slot name="toggler">
-            <button>toggle <a href="#">hello</a></button>
-            <Icon icon="carbon:caret-down"/>
+            <button>
+                toggle
+                <Icon icon="carbon:caret-down" />
+            </button>
+
         </slot>
-        <slot/>
+        <slot />
     </div>
 </template>
 
-<style>
-
+<style scoped>
 button {
     background-color: var(--background-secondary);
     border: none;
@@ -44,5 +49,4 @@ button {
     padding: 10px;
     color: var(--white);
 }
-
 </style>
\ No newline at end of file
diff --git a/17th Website/src/components/dropdown/DropdownContent.vue b/17th Website/src/components/dropdown/DropdownContent.vue
index b34ef28..ed30be3 100644
--- a/17th Website/src/components/dropdown/DropdownContent.vue	
+++ b/17th Website/src/components/dropdown/DropdownContent.vue	
@@ -16,4 +16,15 @@ export default {
     <div v-if="active">
         <slot />
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+div {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    background-color: var(--background-secondary);
+    border-radius: 0px 0px 10px 10px;
+    padding: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/17th Website/src/components/dropdown/DropdownItem.vue b/17th Website/src/components/dropdown/DropdownItem.vue
index ac0746a..014d300 100644
--- a/17th Website/src/components/dropdown/DropdownItem.vue	
+++ b/17th Website/src/components/dropdown/DropdownItem.vue	
@@ -1,5 +1,20 @@
+<script>
+export default {
+    name: 'dropdownItem'
+}
+</script>
+
 <template>
     <div>
-        test
+        <slot></slot>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+div {
+    background-color: aliceblue;
+}
+h1 {
+    color: black !important;
+}
+</style>
\ No newline at end of file
diff --git a/17th Website/src/components/navigation/Navbar.vue b/17th Website/src/components/navigation/Navbar.vue
index e681ff3..5a6ffab 100644
--- a/17th Website/src/components/navigation/Navbar.vue	
+++ b/17th Website/src/components/navigation/Navbar.vue	
@@ -33,7 +33,7 @@ export default {
     </div>
 </template>
 
-<style>
+<style scoped>
 /* 
 COLOR PALLETE
 BLACK #1C1C21
diff --git a/17th Website/src/components/navigation/navitem.vue b/17th Website/src/components/navigation/navitem.vue
index da9f1c8..ae88817 100644
--- a/17th Website/src/components/navigation/navitem.vue	
+++ b/17th Website/src/components/navigation/navitem.vue	
@@ -41,7 +41,7 @@ export default {
 </template>
 
 
-<style>
+<style scoped>
 .button {
     color: var(--white);
     font-size: 30px;
diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index b0652b5..2427681 100644
--- a/17th Website/src/views/users.vue	
+++ b/17th Website/src/views/users.vue	
@@ -56,10 +56,14 @@ export default {
                 
                 <dropdown>
                     <DropdownContent>
-                        <DropDownItem>Test1</DropDownItem>
+                        <DropdownItem>Item 1</DropdownItem>
+                        <DropdownItem>Item 2</DropdownItem>
+                        <DropdownItem>Item 3</DropdownItem>
                     </DropdownContent>
                 </dropdown>
 
+                <Icon icon="carbon:caret-down" />
+
                 <!-- This button needs to get finished -->
                 <button @click="resetFilters()">Clear Filters</button>
             </div>