diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
index 609507321176a8fe4cbfc70fc82cf23a42ef3509..cebeca34cfe7a11e6d53dfcf950ef7d5a8ec003d 100644
--- a/src/components/dropdown.vue
+++ b/src/components/dropdown.vue
@@ -12,11 +12,11 @@
       </button>
     </div>
     <Transition name="fade">
-      <ul v-if="isVisible" class="item-parent">
-        <li class="item" style="margin-right:7.5em">
+      <ul v-if="isVisible" class="item-parent" :style="topMargin">
+        <li class="item" style="margin-right:var(--right-margin)">
           <slot name="item-1"></slot>
         </li>
-        <li class="item">
+        <li class="item" style="margin-right:var(--left-margin)">
           <slot name="item-2"></slot>
         </li>
       </ul>
@@ -29,9 +29,13 @@ import { mixin as VueClickAway } from "vue3-click-away";
 
 export default{
   mixins: [VueClickAway],
+  props:['type'],
   data(){
     return{
-        isVisible: false
+        isVisible: false,
+        top: 0,
+        right: 0,
+        left: 0,
     }
   }, 
   methods: {
@@ -40,10 +44,31 @@ export default{
     },
     hideDropdown(){
       this.isVisible = false
+    },
+    defineCSS(){
+      if (this.type === "dropdownUser"){
+        console.log(this.left);
+        this.top = 2.08;
+        this.right = 7.5;
+      }
+      else if (this.type === "addUser"){
+        this.top = 10.25;
+        this.right = 3;
+        this.left = -4.5;
+      }
+    }
+  },
+  computed: {
+    topMargin(){
+      this.defineCSS();
+      return{
+        '--top-margin': (this.top) + "rem",
+        '--right-margin': (this.right) + "em",
+        '--left-margin': (this.left) + "em"
+      }
     }
   }
 }
-
 </script>
 
 
@@ -65,7 +90,7 @@ export default{
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: baseline;
-    top: 2.08rem;
+    top: var(--top-margin);
   }
   .item {
     position: absolute;
diff --git a/src/components/header.vue b/src/components/header.vue
index ec9e8291ffb97e1480acde68e3e5cd27ec1d0675..15dc364c4f0fd79efc4a686ecd8ca37d3afecfe5 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -31,7 +31,7 @@
           >
             <h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
             
-            <Dropdown>
+            <Dropdown type="dropdownUser">
               <template v-slot:start-button-item>
                 <i
                   class="icon ion-ios-person-outline text-red"