diff --git a/public/css/main.css b/public/css/main.css
index 435fcd38af209871ac8ed6cb56b89f3aee043467..39b3e0932e5355e5e767e64185625a46886567e0 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -181,12 +181,19 @@ a:hover {
   background-color: #f1f1f1;
   color: black;
   margin-left:42%;
+  cursor: pointer;
+  border-radius: .2rem;
   
 }
 
 .next {
-  background-color: #04AA6D;
+  background-color: #2196f3 !important;
   color: white;
+  cursor: pointer;
+  border-radius: .2rem;
+}
+.next:hover{
+  background-color: #007bff !important;
 }
 
 .round {
diff --git a/public/index.html b/public/index.html
index 8c5abed0c23f409e0c3c236deb4a4b5ceb3a155b..fa6cfffcf07508bb9db93a0b62ae2dcd38d96704 100644
--- a/public/index.html
+++ b/public/index.html
@@ -265,8 +265,8 @@
       </div>
       
     </div>
-    <div class="container" style="margin-top:1em;"><a href="#" class="previous">&laquo; Previous</a>
-    <a href="#" class="next">Next &raquo;</a></div>
+    <div class="container" style="margin-top:1em;"><a onclick="pagecountback()" class="previous">&laquo; Previous</a>
+    <a onclick="pagecount()" class="next">Next &raquo;</a></div>
     
     <hr>
     <div class="container">
@@ -424,6 +424,7 @@
   <link rel="stylesheet" href="./css/search.css">
   <link rel="stylesheet" href="./css/language.css">
   <script src="js/search.js"></script>
+  <script src="js/paper_nextpage.js"></script>
 
 </body>
 
diff --git a/public/js/paper_nextpage.js b/public/js/paper_nextpage.js
new file mode 100644
index 0000000000000000000000000000000000000000..a26010b030968830b124ae68c7855c7be3c1eff0
--- /dev/null
+++ b/public/js/paper_nextpage.js
@@ -0,0 +1,47 @@
+var pagenumb = 0
+function pagecount(){
+pagenumb = pagenumb + max_paper_list
+nextpage()
+}
+
+
+function pagecountback(){
+pagenumb = pagenumb - (max_paper_list)
+if (pagenumb <= 0){
+    pagenumb = -1
+}
+nextpage()   
+}
+
+
+var nextpage = function() {
+    // $.getJSON("./content/content.json", function (result) {
+    //     stuff = result;
+    //     var new_row = document.getElementById("row_main")
+    //     new_row.innerHTML = "";
+    //     var arrayLength = stuff.length;
+    //     for (var i = 0; i < arrayLength; i++) {
+    //         addcontent(stuff[i]);
+    //         //Do something
+    //     }
+    // });
+
+
+    // get paper from the Sabo result
+    stuff_paper = jsonContent;
+    var new_row = document.getElementById("cont_paper")
+    new_row.innerHTML = "";
+    var arrayLength = stuff_paper.length;
+    for (var i = 0; i < arrayLength; i++) {
+        if (i > pagenumb && i <= (pagenumb + max_paper_list) && i<= arrayLength){
+            // if (Math.abs(arrayLength - i) <= (max_paper_list)) {
+            console.log("close to " + i)
+            addpaper(stuff_paper[i]);
+        // }   
+    }
+
+        //Do something
+    }
+
+    json_to_bib(stuff_paper)
+}
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 0196e9f9eefa803b810a1147ffb6fcbf8d31bb73..6a150bdc0baa0a9bbddbecbdcd68b6347a61fa03 100644
--- a/readme.md
+++ b/readme.md
@@ -17,7 +17,7 @@ Website for Geoinformatic Research Group (Prof. Coors)
 ### Tasks for Patrick:
 - [ ] In the current "add_paper.js", all BIBTEX buttons share the same ID and not work yet. I will hide this feature for now and add it back when the BIBTEX is read made. (for later)
 - [ ] Currently, I have set in the public/js/config.js the max number of the paper lists. We have to implement the "show more"/ "Pagination" feature. (Patrick) 
-- [ ] Make sure the Search feature works. (Patrick)
+- [x] Make sure the Search feature works. (Patrick)
 - [ ] Currently, the "public\js\language.js" only translate some part of the webpage.(later..)
 
 ### Tasks for Joe: