diff --git a/src/components/misc/dropdown-item.vue b/src/components/misc/dropdown-item.vue
new file mode 100644
index 000000000..861b08936
--- /dev/null
+++ b/src/components/misc/dropdown-item.vue
@@ -0,0 +1,28 @@
+<template>
+	<router-link
+		:to="to"
+		class="dropdown-item">
+		<span class="icon" v-if="icon !== ''">
+			<icon :icon="icon"/>
+		</span>
+		<span>
+			<slot></slot>
+		</span>
+	</router-link>
+</template>
+
+<script>
+export default {
+	name: 'dropdown-item',
+	props: {
+		to: {
+			required: true,
+		},
+		icon: {
+			type: String,
+			required: false,
+			default: '',
+		}
+	},
+}
+</script>
diff --git a/src/components/misc/dropdown.vue b/src/components/misc/dropdown.vue
new file mode 100644
index 000000000..6c55274ff
--- /dev/null
+++ b/src/components/misc/dropdown.vue
@@ -0,0 +1,48 @@
+<template>
+	<div class="dropdown is-right is-active" ref="dropdown">
+		<div class="dropdown-trigger">
+			<icon :icon="triggerIcon" @click="open = !open" class="icon"/>
+		</div>
+		<transition name="fade">
+			<div class="dropdown-menu" v-if="open">
+				<div class="dropdown-content">
+					<slot></slot>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+
+export default {
+	name: 'dropdown',
+	data() {
+		return {
+			open: false,
+		}
+	},
+	mounted() {
+		document.addEventListener('click', this.hide)
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hide)
+	},
+	props: {
+		triggerIcon: {
+			type: String,
+			default: 'ellipsis-h',
+		},
+	},
+	methods: {
+		hide(e) {
+			if (this.open) {
+				closeWhenClickedOutside(e, this.$refs.dropdown, () => {
+					this.open = false
+				})
+			}
+		},
+	},
+}
+</script>
diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index 4516b91a6..3645bd6ea 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -1,80 +1,58 @@
 <template>
-	<div class="dropdown is-right is-active" ref="dropdown">
-		<div class="dropdown-trigger">
-			<icon icon="ellipsis-h" @click="open = !open" class="icon"/>
-		</div>
-		<transition name="fade">
-			<div class="dropdown-menu" v-if="open">
-				<div class="dropdown-content">
-					<template v-if="namespace.isArchived">
-						<router-link
-							:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
-							class="dropdown-item">
-							Un-Archive this namespace
-						</router-link>
-					</template>
-					<template v-else>
-						<router-link
-							:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
-							class="dropdown-item">
-							Edit this namespace
-						</router-link>
-						<router-link
-							:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
-							class="dropdown-item">
-							Share this namespace
-						</router-link>
-						<router-link
-							:to="{ name: 'list.create', params: { id: namespace.id } }"
-							class="dropdown-item">
-							Create a new list
-						</router-link>
-						<router-link
-							:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
-							class="dropdown-item">
-							Archive this namespace
-						</router-link>
-						<router-link
-							:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
-							class="dropdown-item">
-							Delete this namespace
-						</router-link>
-					</template>
-				</div>
-			</div>
-		</transition>
-	</div>
+	<dropdown>
+		<template v-if="namespace.isArchived">
+			<dropdown-item
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
+				icon="archive"
+			>
+				Un-Archive this namespace
+			</dropdown-item>
+		</template>
+		<template v-else>
+			<dropdown-item
+				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
+			>
+				Edit this namespace
+			</dropdown-item>
+			<dropdown-item
+				:to="{ name: 'namespace.settings.share', params: { id: namespace.id } }"
+			>
+				Share this namespace
+			</dropdown-item>
+			<dropdown-item
+				:to="{ name: 'list.create', params: { id: namespace.id } }"
+			>
+				Create a new list
+			</dropdown-item>
+			<dropdown-item
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
+				icon="archive"
+			>
+				Archive this namespace
+			</dropdown-item>
+			<dropdown-item
+				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
+			>
+				Delete this namespace
+			</dropdown-item>
+		</template>
+	</dropdown>
 </template>
 
 <script>
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import Dropdown from '@/components/misc/dropdown'
+import DropdownItem from '@/components/misc/dropdown-item'
 
 export default {
 	name: 'namespace-settings-dropdown',
-	data() {
-		return {
-			open: false,
-		}
-	},
-	mounted() {
-		document.addEventListener('click', this.hide)
-	},
-	beforeDestroy() {
-		document.removeEventListener('click', this.hide)
+	components: {
+		DropdownItem,
+		Dropdown,
 	},
 	props: {
 		namespace: {
 			required: true,
 		},
 	},
-	methods: {
-		hide(e) {
-			if (this.open) {
-				closeWhenClickedOutside(e, this.$refs.dropdown, () => {
-					this.open = false
-				})
-			}
-		},
-	},
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 5fea95744..ba0f9662c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -58,6 +58,7 @@ import {
 	faCoffee,
 	faCocktail,
 	faEllipsisH,
+	faArchive,
 } from '@fortawesome/free-solid-svg-icons'
 import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle, faSun} from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
@@ -146,6 +147,7 @@ library.add(faChessKnight)
 library.add(faCoffee)
 library.add(faCocktail)
 library.add(faEllipsisH)
+library.add(faArchive)
 
 Vue.component('icon', FontAwesomeIcon)
 
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 98f358c2a..6b49666db 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -72,11 +72,20 @@ button.table {
   margin-bottom: 0 !important;
 }
 
-.dropdown-item.is-disabled {
-  cursor: not-allowed;
+.dropdown-item {
+  display: flex;
+  align-items: center;
 
-  &:hover {
-    background-color: transparent;
+  .icon {
+    padding-right: .5rem;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 }