diff --git a/web/css/person-project.css b/web/css/person-project.css
index 262065f56175de19506b1a8540f5a978d841d143..71c9e1fdbfbce080b452360360a336789c96131c 100644
--- a/web/css/person-project.css
+++ b/web/css/person-project.css
@@ -154,13 +154,16 @@ section.resume-section {
 }
 
 .back a{
-    position:absolute;
-    left:310px;
-    top:20px;
     font-size:25px;
     font-weight: 500;
 }
 
+.back{
+    position:absolute;
+    left:30px;
+    top:0;
+}
+
 h3{
     font-size:35px;
     font-weight:600;
@@ -307,4 +310,9 @@ h5{
 .person-content{
     position:relative;
     top:56px;
+}
+
+.container-fluid{
+    position:relative;
+    top:50px;
 }
\ No newline at end of file
diff --git a/web/css/person-topbar.css b/web/css/person-topbar.css
index 243ddae73bf7e1dce47382bece716cc48dfa154d..5ba616ad2dbe844e18c3a810c7c11f133968a4be 100644
--- a/web/css/person-topbar.css
+++ b/web/css/person-topbar.css
@@ -65,4 +65,7 @@
 }
 .nav-right .dropdown-menu li i{
     font-size:18px;
+}
+.nav-right .dropdown-menu a:hover{
+    background-color: #f2f6f8;
 }
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 7ec787465204b3cf7387af3d6c75efcfd8deffd9..c6ea3607f57511b1197e92d2cbd5638998594b7a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -39,70 +39,70 @@
     </div>
 </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;">-->
-                    <!--<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 >-->
-                        <!--<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>-->
-                        <!--</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>-->
-
-    <!--</nav>-->
-<!--</div>-->
-
-<div class="main-wrapper oh">
+<div class="topbar">
+    <nav class="top-navbar">
+        <div class="navbar-header">
+            <span>Easy Eportfolio</span>
+        </div>
 
-    <header class="nav-type-1 dark-nav">
+        <div class="nav-right">
+            <div class="collapse navbar-collapse nav-list">
+                <ul 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 >
+                        <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>
+                        </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>
 
-        <nav class="navbar navbar-fixed-top">
-            <div class="navigation">
-                <div class="container relative">
+    </nav>
+</div>
 
-                    <div class="row">
+<div class="main-wrapper oh">
 
-                        <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>
+    <!--<header class="nav-type-1 dark-nav">-->
+
+        <!--<nav class="navbar navbar-fixed-top">-->
+            <!--<div class="navigation">-->
+                <!--<div class="container relative">-->
+
+                    <!--<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> &lt;!&ndash; end navbar-header &ndash;&gt;-->
+
+
+                        <!--&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>
-            </div>
-        </nav>
-    </header>
+                    <!--</div>-->
+                <!--</div>-->
+            <!--</div>-->
+        <!--</nav>-->
+    <!--</header>-->
 
     <section class="header-wrap hero-section bg-light">
         <div class="container">
diff --git a/web/js/Project/load_project_according_tag.js b/web/js/Project/load_project_according_tag.js
index df60ae866197acbce73ace2e32238b3de5f4cd67..4f5798e8039a48190a2ab0a51e47089175e5e051 100644
--- a/web/js/Project/load_project_according_tag.js
+++ b/web/js/Project/load_project_according_tag.js
@@ -41,9 +41,10 @@ function getInfo(){
         dataType: 'json',
         success: function(data){
             loadPageTitle(tag);
-            for(x in data){
-                loadProjectList(data[x]);
-            }
+            // for(x in data){
+            //     loadProjectList(data[x]);
+            // }
+            loadSubPage(data, 3);
             clickevent();
         },
         error : function(msg) {
diff --git a/web/js/ToolBar/pagebar.js b/web/js/ToolBar/pagebar.js
index 46c17ad19d4948f329987d3c27bf7052b21f0c18..fe5f1107e7b669bc4b1d8479db591f795b4f8ee6 100644
--- a/web/js/ToolBar/pagebar.js
+++ b/web/js/ToolBar/pagebar.js
@@ -5,7 +5,7 @@
  *             2: 加载当前用户发送的request列表
  */
 loadSubPage = function(data, type){
-    var pageSize = 1;
+    var pageSize = 3;
     var pageNum = Math.ceil(data.length/pageSize);
     var dataStr = JSON.stringify(data);
 
@@ -106,6 +106,21 @@ function loadParticularPage(dataStr, p, pageSize, pageNum, type) {
                     '                                </div>\n' +
                     '                            </li>');
         }
+    } else if (type ==3){
+        $('#projectByTag').html("");
+        for(var x=start; x<start+pageSize; x++){
+            var project = data[x];
+            $('#projectByTag').append('<li><span class="proj-title"><a href="#keywords='+project.projectid+'">'+ project.projectname +'</a></span>\n' +
+                '<a href="/webpage/project-related/editor.html?keywords='+ project.projectid +'">' +
+                '   <input class="edit" type="button" value="EDIT"/>' +
+                '</a>\n' +
+                '<input id="'+ project.projectid +'" class="delete-list" type="button" value="DELETE"/>\n' +
+                '<h5>Project Period: '+project.str_starttime + ' - ' + project.str_endtime +'</h5>\n' +
+                '<p>'+ project.projectdescription +'</p>\n' +
+                '</li>');
+        }
+
+
     }
 
 }
\ No newline at end of file
diff --git a/web/other-person-project.html b/web/other-person-project.html
index 4f3f38a6aff6e6b53883640f82243efcf5643554..4f82414ccbe88bb41e7cb59201e1cc54290ea0c8 100644
--- a/web/other-person-project.html
+++ b/web/other-person-project.html
@@ -9,7 +9,8 @@
     <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
     <link href="css/person-project.css" rel="stylesheet">
     <script src="js/jquery.min.js"> </script>
-    <script src="js/bootstrap.min.js"> </script>
+    <!--<script src="js/bootstrap.min.js"> </script>-->
+    <script src="js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="css/ckin.css">
     <link rel="stylesheet" href="css/person-topbar.css">
 
diff --git a/web/other-person.html b/web/other-person.html
index b13149c1bf63cb37e665d239058a79932a838188..d9a81f958fa4a39e79702f136186f77a5993d5c6 100644
--- a/web/other-person.html
+++ b/web/other-person.html
@@ -10,8 +10,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
     <link href="css/person-style.css" rel="stylesheet">
     <link href="css/person-topbar.css" rel="stylesheet">
-    <script src="js/jquery.min.js"> </script>
-    <script src="js/bootstrap.min.js"> </script>
+    <!--<script src="js/bootstrap.min.js"> </script>-->
     <script src="js/scripts2.js"></script>
     <script src="js/scripts.js"></script>
 </head>
@@ -74,7 +73,7 @@
     </div>
 </nav>
 
-<div class="container-fluid p-0">
+<div class="person-content">
 
     <!--====================================================
                         ABOUT
diff --git a/web/person-project.html b/web/person-project.html
index a0dc9249d5ac772d8a81568f1cabdb39185ead0d..da9cf4de1c0094571d9e485b5bfad2a39719c6cf 100644
--- a/web/person-project.html
+++ b/web/person-project.html
@@ -9,7 +9,8 @@
     <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
     <link href="css/person-project.css" rel="stylesheet">
     <script src="js/jquery.min.js"> </script>
-    <script src="js/bootstrap.min.js"> </script>
+    <!--<script src="js/bootstrap.min.js"> </script>-->
+    <script src="js/bootstrap.bundle.min.js"></script>
     <link rel="stylesheet" href="css/ckin.css">
     <link rel="stylesheet" href="css/person-topbar.css">
 
diff --git a/web/webpage/project-related/project-list-tag.html b/web/webpage/project-related/project-list-tag.html
index bc27e894b16d05c5abe92f60b95ac184ac004ac7..c62f6c8439de1b7f5876a4027d66be200c258d74 100644
--- a/web/webpage/project-related/project-list-tag.html
+++ b/web/webpage/project-related/project-list-tag.html
@@ -22,6 +22,7 @@
     <!--<script src="../../js/jquery.metisMenu.js"></script>-->
     <script src="/js/Project/load_project_according_tag.js"></script>
     <script src="/js/jquery-confirm.js"></script>
+    <script src="/js/ToolBar/pagebar.js"></script>
     <!--<script src="/js/Admin/load-project-show.js"></script>-->
 
 
@@ -51,6 +52,11 @@
                                 <ul id="projectByTag" class="search-listing">
                                     <!--dynamic load project list-->
                                 </ul>
+                                <nav aria-label="Page navigation example" class="m-t-40">
+                                    <ul class="pagination" id="page-bar">
+                                        <!--page bar-->
+                                    </ul>
+                                </nav>
                                 <nav aria-label="Page navigation example" class="m-t-40">
                                     <ul class="pagination">
                                         <li class="page-item disabled">