diff --git a/src/components/Header.vue b/src/components/Header.vue
index d54c179..16f70fc 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,17 +1,25 @@
 <template>
   <div class="mx-auto px-8 w-full">
-      <div class="flex justify-between items-center py-2 relative">
+      <div class="flex justify-between items-center py-2">
         <figure>
             <DspLogo />
         </figure>
-        <figure v-show="showMember">
-            <IconMember class="w-8 h-8" />
-        </figure>
+        <div class="flex justify-between items-center" v-show="showMember">
+          <button class="btn btn-sm bg-neutral mr-2" @click.prevent="logOut">
+            log out
+          </button>
+          <figure>
+            <router-link :to="'/member-area'">
+              <IconMember class="w-8 h-8" />
+            </router-link>
+          </figure>
+        </div>
     </div>
   </div>
 </template>
 
 <script>
+import loginStore from '@/stores/login.js';
 import DspLogo from '@/components/icons/DspLogo.vue';
 import IconMember from '@/components/icons/IconMember.vue';
 
@@ -21,12 +29,20 @@ export default {
       showMember: false,
     }
   },
+  setup() {
+    const store = loginStore();
+    const { logOut } = store;
+
+    return {
+      logOut,
+    }
+  },
   components: {
     DspLogo,
     IconMember
   },
   mounted() {
-    this.$route.name === 'Login' ? this.showMember : !this.showMember;
+    this.$route.name === 'Login' ? this.showMember = false : this.showMember = true;
   }
 }