diff --git a/_config.yml b/_config.yml
index 319b318..91c2567 100644
--- a/_config.yml
+++ b/_config.yml
@@ -13,5 +13,9 @@ github_username:  jekyll
 # Layout settings
 header_type: fixed
 post_type: highlight
+
 # Build settings
 markdown: kramdown
+
+# Pagination
+paginate: 3
diff --git a/index.html b/index.html
index e5c8ad2..0937708 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,17 @@
 layout: default
 ---
 
-<div class="mdl-grid">
-  {% for post in site.posts %}
-  <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
+{% if paginator.page %}
+   {% assign offset = paginator.page | minus:1 | times:paginator.per_page %}
+   {% assign currentPage = paginator.page %}
+ {% else %}
+  {% assign offset = 0 %}
+  {% assign currentPage = 1 %}
+{% endif %}
+
+<div class="mdl-grid" id="js-post-container" data-page="{{ currentPage }}" data-total-pages="{{ paginator.total_pages }}">
+  {% for post in site.posts limit:site.paginate offset:offset %}
+  <article class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
     <div class="mdl-card__title">
       <h2 class="mdl-card__title-text">{{ post.title }}</h2>
     </div>
@@ -24,6 +32,14 @@ layout: default
         <i class="material-icons">share</i>
       </button>
     </div>
-  </div>
+  </article>
   {% endfor %}
+
+ {% assign postCount = site.posts | size %}
+ {% assign postsCovered = site.paginate | plus:offset %}
+ {% if postsCovered < postCount %}
+   <button id="js-load-more">Load more posts</button>
+ {% endif %}
+ <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+ <script rel="javascript" src="{{ "/js/site.js" | prepend: site.baseurl }}"></script>
 </div>
diff --git a/js/site.js b/js/site.js
new file mode 100644
index 0000000..878ff5a
--- /dev/null
+++ b/js/site.js
@@ -0,0 +1,66 @@
+//$(".loadMore").click(loadMorePosts);
+var _this = document.getElementById("js-load-more");
+_this.onclick = loadMorePosts;
+
+var HttpClient = function() {
+    this.get = function(Url, Callback) {
+        var HttpRequest = new XMLHttpRequest();
+        HttpRequest.onreadystatechange = function() {
+            if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
+                Callback(HttpRequest.responseText);
+        }
+
+        HttpRequest.open( "GET", Url, true );
+        HttpRequest.send( null );
+    }
+}
+
+Element.prototype.remove = function() {
+    this.parentElement.removeChild(this);
+}
+
+NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
+    for(var i = this.length - 1; i >= 0; i--) {
+        if(this[i] && this[i].parentElement) {
+            this[i].parentElement.removeChild(this[i]);
+        }
+    }
+}
+
+function loadMorePosts() {
+ //var _this = document.getElementById("js-load-more");
+ var blogContainer = document.getElementById("js-post-container"); //$("#js-post-container");
+ var nextPage = parseInt(blogContainer.dataset.page) + 1; //parseInt($blogContainer.attr("data-page")) + 1;
+ var totalPages = parseInt(blogContainer.dataset.totalPages); //parseInt($blogContainer.attr("data-totalPages"));
+
+ _this.className += " loading";
+
+ Client = new HttpClient();
+ Client.get('/page' + nextPage, function(data) {
+    parser = new DOMParser();
+    var htmlData = parser.parseFromString(data, "text/html");;
+    var articles = htmlData.getElementsByTagName("article");
+    console.log(articles);
+    blogContainer.innerHTML += data;
+
+    if (blogContainer.dataset.totalPages == nextPage) {
+      document.getElementById("js-load-more").remove();
+    }
+    _this.className = "";
+
+ });
+ // $.get("/page" + nextPage, function (data) {
+ //   var htmlData = $.parseHTML(data);
+ //   console.log(htmlData);
+ //   var $articles = $(htmlData).find("article");
+
+ //   blogContainer.attr("data-page", nextPage).append($articles);
+
+ //   if (blogContainer.attr("data-totalPages") == nextPage) {
+ //     $(".loadMore").remove();
+ //   }
+
+ //   $(_this).removeClass("loading");
+ // });
+}
+//---- native js----