diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..786005dfd5122733ec4f2558c49752e947c51104
--- /dev/null
+++ b/src/components/dropdown.vue
@@ -0,0 +1,50 @@
+<script>
+  export default {
+    name: 'Dropdown',
+    props: ['title', 'items'],
+    data(){
+      return {
+        isOpen: false
+      }
+    }
+  }
+
+</script>
+
+<template>
+  <div class="menu-item" @click="isOpen = !isOpen">
+    <a href="#">{{ title }}</a>
+    <transition name="fade" appear>
+      <div class="sub-" v-if="isOpen">
+        <div v-for="(item, i) in items" :key="i" class="menu-item">
+          test sub menu
+          <!-- <option value="Marketing">Marketing</option> -->
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style>
+.menu-item .sub-menu {
+  position: absolute;
+  background-color: #222;
+  top: calc(100% + 18px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  border-radius: 0px 0px 16px 16px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all .5s ease-out;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+</style>
+
+
diff --git a/src/components/header.vue b/src/components/header.vue
index 559d0e8448fd201f8fd19e3e3734f1171ca0eefb..462760c8097553ff1a2d8c9bdc66ff40baa77c11 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -29,6 +29,21 @@
           <div
             class="d-flex flex-row-reverse justify-content-start align-items-center illustration"
           >
+            <!-- <div class="btn-group">
+              <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Test
+                <i
+                class="icon ion-ios-person-outline text-red"
+                style="font-size: 65px"
+                ></i>
+              </button>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                <button class="dropdown-item" type="button">Action</button>
+                <button class="dropdown-item" type="button">Another action</button>
+                <button class="dropdown-item" type="button">Something else here</button>
+              </div>
+            </div> -->
+            <Dropdown title="title"/>
             <button @click="showModal()" class="profile-btn">
               <i
                 class="icon ion-ios-person-outline text-red"
@@ -61,12 +76,14 @@
 
 <script>
 import Modal from "../components/modal";
+import Dropdown from "../components/dropdown";
 import { HTTP } from '../http-common'
 
 export default {
   name: "Header",
   components: {
-    Modal
+    Modal,
+    Dropdown,
   },
   data() {
     return {