diff --git a/index.html b/index.html
index d08ce62..206c0c9 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 
 
 
-
+        <div id='main'>
         <!-- Navigation-->
         <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
             <div class="container">
@@ -32,9 +32,10 @@
                 <div class="collapse navbar-collapse" id="navbarResponsive">
                     <ul class="navbar-nav ml-auto">
                         <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="https://github.com/snsd0805/NCNU_Course">Github</a></li>
-                        <li class="nav-item mx-0 mx-lg-1">
-                            <div class="fb-login-button" data-width="" data-size="small" data-button-type="login_with" data-layout="rounded" data-auto-logout-link="true" data-use-continue-as="true"></div>
-                        </li>
+                        
+                        <li v-if="token==''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#">Facebook登入</a></li>
+                        <li v-if="token!=''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#" v-on:click="logout()">登出Facebook—{{user}}</a></li>
+
                     </ul>
                 </div>
             </div>
@@ -52,7 +53,8 @@
                     <div class="divider-custom-line"></div>
                 </div>
                 <div class="divider-custom">
-                    <div class=><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
+                    <div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
+                    <div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(必須登入Facebook帳號)</button></div>
                 </div>
                 <div class="row">
                     <div class="col-lg-3">
@@ -112,6 +114,7 @@
                 </div>
             </div>
         </div>
+        </div>
 
         
         <!-- Copyright Section-->
diff --git a/js/index.vue b/js/index.vue
index a9f3dda..bf0d402 100644
--- a/js/index.vue
+++ b/js/index.vue
@@ -1,11 +1,12 @@
 var vm = new Vue({
-    el: "#table",
+    el: "#main",
     data: {
         'courses': [],
         'selectCourses': [],
         'departments': [],
         'selectDepartment': '',
         'foundName': "",
+        "user": "",
         'token': ""
     },
     created() {
@@ -47,6 +48,17 @@ var vm = new Vue({
             })
     },
     methods: {
+        'login': function(){
+            FB.login(function(){
+                vm.getCourseTable()
+            })
+        },
+        'logout': function(){
+            FB.logout(function(response) {
+                vm.user = ""
+                vm.token = ""
+            });
+        },
         'getCourseTable': function(){
             FB.getLoginStatus(function(response) {
                 vm.statusChangeCallback(response);
@@ -55,6 +67,9 @@ var vm = new Vue({
         'statusChangeCallback': function(response){
             if(response.status == "connected"){
                 this.token = response.authResponse.accessToken
+
+                FB.api('/me', function(response){vm.user = response.name})
+
                 fetch('https://api.snsd0805.com/courseTable?token='+this.token)
                     .then(function(response){
                         return response.json()
@@ -94,9 +109,7 @@ var vm = new Vue({
                     })
 
             }else{
-                FB.login(function(response){
-                    vm.getCourseTable()
-                })
+                this.login()
             }
         },
         'getTime': function(timeString){