diff --git a/web/admin.html b/web/admin.html
index 000916a56207c239a5a0e33a3670ce1158f56ecb..bde126812c68b21a2b56038b78bd0ca8ae64496f 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -23,7 +23,7 @@
     <script src="js/custom.js"></script>
     <script src="js/jquery.metisMenu.js"></script>
     <script src="js/jquery-confirm.js"></script>
-
+    <script src="js/login_registerScripts.js"></script>
 
     <!--editor js-->
 
@@ -48,7 +48,7 @@
                         <ul class="dropdown-menu">
                             <li><a class="nav-link" href="person.html">View Profile</a ></li>
                             <li><a class="nav-link" href="admin.html">My Admin</a ></li>
-                            <li><a class="nav-link" href="#" style="border-top: 1px solid #b1b8bb"><i class="fa fa-power-off"></i> Log Out</a ></li>
+                            <li><a class="nav-link" href="#" onclick="adminLogout()" style="border-top: 1px solid #b1b8bb"><i class="fa fa-power-off"></i> Log Out</a ></li>
                         </ul>
                     </li>
                     <li class="nav-item active"><a class="nav-link" href="index.html"><i class="fa fa-home"></i></a ></li>
diff --git a/web/css/person-topbar.css b/web/css/person-topbar.css
index 5ba616ad2dbe844e18c3a810c7c11f133968a4be..7308211121779c51eee079e2413c653a207bea07 100644
--- a/web/css/person-topbar.css
+++ b/web/css/person-topbar.css
@@ -43,7 +43,7 @@
 /*}*/
 .nav-link i{
     margin:5px;
-    font-size:25px;
+    font-size:32px;
 }
 .topbar ul .dropdown-menu li i{
     font-size:18px;
diff --git a/web/css/topbar.css b/web/css/topbar.css
index f7122c3615b824df9341d8ea7b413f7e7bb01c11..8b329c8a4b184dc3b4f9bcce05af87b768025eba 100644
--- a/web/css/topbar.css
+++ b/web/css/topbar.css
@@ -42,7 +42,7 @@
 }
 .nav-link i{
     margin:5px;
-    font-size:25px;
+    font-size:32px;
 }
 .topbar ul .dropdown-menu li i{
     font-size:18px;
diff --git a/web/index.html b/web/index.html
index 89874af9cfa3220dd23d0628f3f86644f088545c..f689db436e6fed04777f9431242a57a2508b0306 100644
--- a/web/index.html
+++ b/web/index.html
@@ -25,8 +25,9 @@
     <link rel="stylesheet" href="css/form-elements.css">
     <link rel="stylesheet" href="css/style2.css">
     <link rel="stylesheet" href="css/topbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
 
-
+    <script type="text/javascript" src="js/login_registerScripts.js"></script>
 </head>
 
 <body class="relative">
@@ -39,15 +40,15 @@
     </div>
 </div>
 
-<!--<div class="topbar">-->
-<!--    <nav class="top-navbar">-->
-<!--        <div class="navbar-header">-->
-<!--            <span>Easy Eportfolio</span>-->
-<!--        </div>-->
+<div class="topbar">
+    <nav class="top-navbar">
+        <div class="navbar-header">
+            <span>Easy Eportfolio</span>
+        </div>
 
-<!--        <div class="nav-right">-->
-<!--            <div class="collapse navbar-collapse nav-list">-->
-<!--                <ul class="navbar-nav ml-auto" style="list-style:none;">-->
+        <div class="nav-right">
+            <div class="collapse navbar-collapse nav-list">
+                <ul id="userIcon" class="navbar-nav ml-auto" style="list-style:none;">
 <!--                    <li class="nav-item dropdown">-->
 <!--                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"-->
 <!--                           aria-expanded="false" href=""><i class="fa fa-user"></i></a >-->
@@ -58,51 +59,51 @@
 <!--                        </ul>-->
 <!--                    </li>-->
 <!--                    <li class="nav-item active"><a class="nav-link" href="index.html"><i class="fa fa-home"></i></a ></li>-->
-<!--                </ul>-->
-<!--            </div>-->
-<!--        </div>-->
+                </ul>
+            </div>
+        </div>
 
-<!--    </nav>-->
-<!--</div>-->
+    </nav>
+</div>
 
 <div class="main-wrapper oh">
 
-    <header class="nav-type-1 dark-nav">
+<!--    <header class="nav-type-1 dark-nav">-->
 
-        <nav class="navbar navbar-fixed-top">
-            <div class="navigation">
-                <div class="container relative">
+<!--        <nav class="navbar navbar-fixed-top">-->
+<!--            <div class="navigation">-->
+<!--                <div class="container relative">-->
 
-                    <div class="row">
+<!--                    <div class="row">-->
 
-                        <div class="navbar-header">
-                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
-                                <span class="sr-only">Toggle navigation</span>
-                                <span class="icon-bar"></span>
-                                <span class="icon-bar"></span>
-                                <span class="icon-bar"></span>
-                            </button>
-                        </div> <!-- end navbar-header -->
-
-
-                        <!-- side menu -->
-                        <div class="side-menu right mobile-left-align">
-                            <div class="nav-inner menu-socials social-icons">
-                                <div class="right">
-                                    <button id="loginbtn" class="launch-modal" data-modal-id="modal-login" onclick="clearTips()"><i class="fa fa-user fa-2x"></i></button>
-<!--                                    <a href="#" id="toHomepage" onclick="openHomepage()" style="color: #2b669a">HomePageeeeeeeee</a>-->
-                                    <button id="toHomepage" onclick="openHomepage()" ><img id="myPhoto" src="" style="height: 30px;width: 30px"></img></button>
-                                    <a href="#" id="logout" onclick="logout()" style="color: #2b669a">Logout</a>
-                                </div>
-                            </div>
+<!--                        <div class="navbar-header">-->
+<!--                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">-->
+<!--                                <span class="sr-only">Toggle navigation</span>-->
+<!--                                <span class="icon-bar"></span>-->
+<!--                                <span class="icon-bar"></span>-->
+<!--                                <span class="icon-bar"></span>-->
+<!--                            </button>-->
+<!--                        </div> &lt;!&ndash; end navbar-header &ndash;&gt;-->
 
-                        </div>
 
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </header>
+<!--                        &lt;!&ndash; side menu &ndash;&gt;-->
+<!--                        <div class="side-menu right mobile-left-align">-->
+<!--                            <div class="nav-inner menu-socials social-icons">-->
+<!--                                <div class="right">-->
+<!--                                    <button id="loginbtn" class="launch-modal" data-modal-id="modal-login" onclick="clearTips()"><i class="fa fa-user fa-2x"></i></button>-->
+<!--&lt;!&ndash;                                    <a href="#" id="toHomepage" onclick="openHomepage()" style="color: #2b669a">HomePageeeeeeeee</a>&ndash;&gt;-->
+<!--                                    <button id="toHomepage" onclick="openHomepage()" ><img id="myPhoto" src="" style="height: 30px;width: 30px"></img></button>-->
+<!--                                    <a href="#" id="logout" onclick="logout()" style="color: #2b669a">Logout</a>-->
+<!--                                </div>-->
+<!--                            </div>-->
+
+<!--                        </div>-->
+
+<!--                    </div>-->
+<!--                </div>-->
+<!--            </div>-->
+<!--        </nav>-->
+<!--    </header>-->
 
     <section class="header-wrap hero-section bg-light">
         <div class="container">
@@ -317,15 +318,11 @@
 <!--<script type="text/javascript" src="js/twitterFetcher_min.js"></script>-->
 <script type="text/javascript" src="js/scripts.js"></script>
 <script type="text/javascript" src="js/ToolBar/searchbar.js"></script>
-
+<script src="js/jquery-confirm.js"></script>
 <!-- Instafeed -->
 <script type="text/javascript">
-
-    $(window).load(function() {
-        //这里判断登录状态还需要进一步处理
-        checkLoginState();
-
-
+    $(document).ready(function() {
+        loadIndexLoginState();
 
     });
 </script>
@@ -334,7 +331,6 @@
 
 <script src="js/jquery.backstretch.min.js"></script>
 <script type="text/javascript" src="js/scripts2.js"></script>
-<script type="text/javascript" src="js/login_registerScripts.js"></script>
 <script src="js/Index/load_recommend_user.js"></script>
 
 
diff --git a/web/js/login_registerScripts.js b/web/js/login_registerScripts.js
index f14f957ecda6f7cb9fc232440fe3cf53b0f7f891..ca387053ddc74e9359115d56df23d7da65616879 100644
--- a/web/js/login_registerScripts.js
+++ b/web/js/login_registerScripts.js
@@ -1,3 +1,8 @@
+function openLogin(){
+    clearTips();
+    $("#modal-login").modal();
+}
+
 function login(){
     var email=$("#email").val();
     var password=$("#password").val();
@@ -119,51 +124,154 @@ function register(){
     });
 }
 
-function checkLoginState(){
+function loadLoginState(){
+    var strcookie = document.cookie;
+    if(strcookie==null || strcookie.length==0){
+        //alert("aab");
+        $("#userIcon").append('<a class="nav-link dropdown-toggle" data-toggle="" onclick="confirmToLogin()" role="button" aria-haspopup="true"\n' +
+            '                   aria-expanded="false" href="#"><i class="fa fa-user"></i></a >');
+    } else{
+        $("#userIcon").append('<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"\n' +
+            '                   aria-expanded="false" href=""><i class="fa fa-user"></i></a >\n' +
+            '                <ul class="dropdown-menu">\n' +
+            '                    <li><a class="nav-link" href="person.html">View Profile</a ></li>\n' +
+            '                    <li><a class="nav-link" href="admin.html">My Admin</a ></li>\n' +
+            '                    <li><a class="nav-link" href="#" onclick="logout()"><i class="fa fa-power-off"></i> Log Out</a ></li>\n' +
+            '                </ul>');
+    }
+}
+
+function loadIndexLoginState(){
     var strcookie = document.cookie;
     if(strcookie==null || strcookie.length==0){
-        //alert("no login");
-        $("#loginbtn").show();
-        $("#logout").hide();
-        //$("#toHomepage").hide();
-        document.getElementById("toHomepage").style.display="none";
+        $("#userIcon").append('<li class="nav-item dropdown">\n' +
+            '                        <a class="nav-link dropdown-toggle" data-modal-id="modal-login" onclick="openLogin()" href="#"><i class="fa fa-user"></i></a >\n' +
+            '                    </li>\n' +
+            '                    <li class="nav-item active"><a class="nav-link" href="index.html"><i class="fa fa-home"></i></a ></li>');
     } else{
-        var userPhotoStr = strcookie.split(";")[1];
-        var userPhoto = userPhotoStr.split("=")[1];
-        if(userPhoto=="null")   userPhoto="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3439779931,834673929&fm=26&gp=0.jpg";
-        $("#loginbtn").hide();
-        $("#logout").show();
-        //$("#toHomepage").show();
-        document.getElementById("myPhoto").src = userPhoto;
-        document.getElementById("toHomepage").style.display="inline";
+        $("#userIcon").append('<li class="nav-item dropdown">\n' +
+            '                        <a class="nav-link dropdown-toggle" data-toggle="" role="button" aria-haspopup="true"\n' +
+            '                           aria-expanded="false" href="#"><i class="fa fa-user"></i></a >\n' +
+            '                        <ul class="dropdown-menu">\n' +
+            '                            <li><a class="nav-link" href="person.html">View Profile</a ></li>\n' +
+            '                            <li><a class="nav-link" href="admin.html">My Admin</a ></li>\n' +
+            '                            <li><a class="nav-link" href="#" onclick="adminLogout()" style="border-top: 1px solid #b1b8bb"><i class="fa fa-power-off"></i> Log Out</a ></li>\n' +
+            '                        </ul>\n' +
+            '                    </li>\n' +
+            '                    <li class="nav-item active"><a class="nav-link" href="index.html"><i class="fa fa-home"></i></a ></li>');
     }
 }
 
+function confirmToLogin(){
+    $.confirm({
+        title: 'You need login to see further pages',
+        content: 'Are You Sure Going Back And Login?\n',
+        icon: 'fa fa-warning',
+        theme: 'white',
+        buttons: {
+            ok: {
+                text: "ok",
+                btnClass: 'btn-primary',
+                keys: ['enter'],
+                action: function() {
+                    window.location.href="index.html";
+                }
+            },
+            cancel: function(){
+                console.log('the user clicked cancel');
+            }
+        }
+    });
+}
+
+// function checkLoginState(){
+//     var strcookie = document.cookie;
+//     if(strcookie==null || strcookie.length==0){
+//         //alert("no login");
+//         $("#loginbtn").show();
+//         $("#logout").hide();
+//         //$("#toHomepage").hide();
+//         document.getElementById("toHomepage").style.display="none";
+//     } else{
+//         var userPhotoStr = strcookie.split(";")[1];
+//         var userPhoto = userPhotoStr.split("=")[1];
+//         if(userPhoto=="null")   userPhoto="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3439779931,834673929&fm=26&gp=0.jpg";
+//         $("#loginbtn").hide();
+//         $("#logout").show();
+//         //$("#toHomepage").show();
+//         document.getElementById("myPhoto").src = userPhoto;
+//         document.getElementById("toHomepage").style.display="inline";
+//     }
+// }
+
 function openHomepage(){
     window.location.href="person.html";
 }
 
 function logout(){
-    if(confirm("Sure to logout?")){
-        $.ajax({
-            type: 'post',
-            url: 'LoginServlet',
-            data: {
-                "type": "logout"
-            },
-            dataType: 'text',
-            success: function(data){
-                if(data == "logout"){
-                    //window.location.href="register.jsp";
-                    window.location.href="index.html";
-                } else{
-                    alert("no user now");
+    $.confirm({
+        title: 'Sure to logout?',
+        content: '',
+        icon: 'fa fa-warning',
+        theme: 'white',
+        buttons: {
+            ok: {
+                text: "ok",
+                btnClass: 'btn-primary',
+                keys: ['enter'],
+                action: function() {
+                    adminLogout();
                 }
             },
-            error : function(msg) {
-                alert("logout failed");
-                console.log(msg)
+            cancel: function(){
+                console.log('the user clicked cancel');
             }
-        });
-    }
+        }
+    });
+
+    // if(confirm("Sure to logout?")){
+    //     $.ajax({
+    //         type: 'post',
+    //         url: 'LoginServlet',
+    //         data: {
+    //             "type": "logout"
+    //         },
+    //         dataType: 'text',
+    //         success: function(data){
+    //             if(data == "logout"){
+    //                 //window.location.href="register.jsp";
+    //                 window.location.href="index.html";
+    //             } else{
+    //                 alert("no user now");
+    //             }
+    //         },
+    //         error : function(msg) {
+    //             alert("logout failed");
+    //             console.log(msg)
+    //         }
+    //     });
+    // }
+}
+
+//Logout without confirm
+function adminLogout(){
+    $.ajax({
+        type: 'post',
+        url: 'LoginServlet',
+        data: {
+            "type": "logout"
+        },
+        dataType: 'text',
+        success: function(data){
+            if(data == "logout"){
+                window.location.href="index.html";
+            } else{
+                alert("no user now");
+            }
+        },
+        error : function(msg) {
+            alert("logout failed");
+            console.log(msg)
+        }
+    });
 }
\ No newline at end of file
diff --git a/web/other-person-project.html b/web/other-person-project.html
index 4f82414ccbe88bb41e7cb59201e1cc54290ea0c8..e38e4b45171a2c663d2903e41e5eca66252fe151 100644
--- a/web/other-person-project.html
+++ b/web/other-person-project.html
@@ -13,7 +13,7 @@
     <script src="js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="css/ckin.css">
     <link rel="stylesheet" href="css/person-topbar.css">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
 
 </head>
 
@@ -32,7 +32,7 @@
                 <ul class="dropdown-menu">
                     <li><a class="nav-link" href="person.html">View Profile</a ></li>
                     <li><a class="nav-link" href="admin.html">My Admin</a ></li>
-                    <li><a class="nav-link" href="#"><i class="fa fa-power-off"></i> Log Out</a ></li>
+                    <li><a class="nav-link" href="#" onclick="logout()"><i class="fa fa-power-off"></i> Log Out</a ></li>
                 </ul>
             </div>
             <div class="home-icon">
@@ -199,6 +199,8 @@
 <script src="js/video-boot.js"></script>
 <script src="js/ckin.js"></script>
 <script src="js/ProjectPage/load_project_to_otherpeople_projectpage.js"></script>
+<script src="js/jquery-confirm.js"></script>
+<script src="js/login_registerScripts.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/web/other-person.html b/web/other-person.html
index d9a81f958fa4a39e79702f136186f77a5993d5c6..e2389a17f1d8228b3b1d330fab96e8e191d93337 100644
--- a/web/other-person.html
+++ b/web/other-person.html
@@ -24,14 +24,14 @@
         </div>
 
         <div class="nav-right">
-            <div class="user-icon">
-                <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                   aria-expanded="false" href=""><i class="fa fa-user"></i></a >
-                <ul class="dropdown-menu">
-                    <li><a class="nav-link" href="person.html">View Profile</a ></li>
-                    <li><a class="nav-link" href="admin.html">My Admin</a ></li>
-                    <li><a class="nav-link" href="#"><i class="fa fa-power-off"></i> Log Out</a ></li>
-                </ul>
+            <div class="user-icon" id="userIcon">
+<!--                <a class="nav-link dropdown-toggle" data-toggle="" role="button" aria-haspopup="true"-->
+<!--                   aria-expanded="false" href=""><i class="fa fa-user"></i></a >-->
+<!--                <ul class="dropdown-menu">-->
+<!--                    <li><a class="nav-link" href="person.html">View Profile</a ></li>-->
+<!--                    <li><a class="nav-link" href="admin.html">My Admin</a ></li>-->
+<!--                    <li><a class="nav-link" href="#"><i class="fa fa-power-off"></i> Log Out</a ></li>-->
+<!--                </ul>-->
             </div>
             <div class="home-icon">
                 <a class="nav-link" href="index.html"><i class="fa fa-home"></i></a >
@@ -313,13 +313,15 @@
 <script src="js/Award/awards.js"></script>
 <script src="js/Project/project_display.js"></script>
 <script src="js/Privacy/request.js"></script>
-
+<script src="js/login_registerScripts.js"></script>
 
 
 <script>
     $(document).ready(function(){
         getOthersAwards();
         getOthersProjectList();  //get projects information
+        loadLoginState();
+
 
         $(".filter-b").click(function(){
             var value = $(this).attr('data-filter');
diff --git a/web/person-project.html b/web/person-project.html
index da9cf4de1c0094571d9e485b5bfad2a39719c6cf..5877865cc12b9711d869be6e25038159eecea88b 100644
--- a/web/person-project.html
+++ b/web/person-project.html
@@ -13,6 +13,7 @@
     <script src="js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="css/ckin.css">
     <link rel="stylesheet" href="css/person-topbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
 
 
 </head>
@@ -32,7 +33,7 @@
                 <ul class="dropdown-menu">
                     <li><a class="nav-link" href="person.html">View Profile</a ></li>
                     <li><a class="nav-link" href="admin.html">My Admin</a ></li>
-                    <li><a class="nav-link" href="#"><i class="fa fa-power-off"></i> Log Out</a ></li>
+                    <li><a class="nav-link" href="#" onclick="logout()"><i class="fa fa-power-off"></i> Log Out</a ></li>
                 </ul>
             </div>
             <div class="home-icon">
@@ -226,6 +227,8 @@
 <script src="js/video-boot.js"></script>
 <script src="js/ckin.js"></script>
 <script src="js/ProjectPage/load_project_to_projectpage.js"></script>
+<script src="js/jquery-confirm.js"></script>
+<script src="js/login_registerScripts.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/web/person.html b/web/person.html
index 0f915a493d715fbf0f07ec1047be954e854a32e3..c055bf0064ac553e06affe852b6c7974e14de90f 100644
--- a/web/person.html
+++ b/web/person.html
@@ -9,6 +9,8 @@
     <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
     <link href="css/person-style.css" rel="stylesheet">
     <link href="css/person-topbar.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
+
 </head>
 
 <body id="page-top">
@@ -26,7 +28,7 @@
                 <ul class="dropdown-menu">
                     <li><a class="nav-link" href="person.html">View Profile</a ></li>
                     <li><a class="nav-link" href="admin.html">My Admin</a ></li>
-                    <li><a class="nav-link" href="#"><i class="fa fa-power-off"></i> Log Out</a ></li>
+                    <li><a class="nav-link" href="#" onclick="logout()"><i class="fa fa-power-off"></i> Log Out</a ></li>
                 </ul>
             </div>
             <div class="home-icon">
@@ -315,6 +317,8 @@
 <script src="js/Experience/load_edu_to_person.js"></script>
 <script src="js/Award/awards.js"></script>
 <script src="js/Project/project_display.js"></script>
+<script src="js/jquery-confirm.js"></script>
+<script src="js/login_registerScripts.js"></script>
 
 
 <script>