diff --git a/_config.yml b/_config.yml
index 6174470603..4f9665d703 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,5 +1,5 @@
-url: https://y7kim.github.io
-baseurl: /agency-jekyll-theme/
+url: http://localhost:4000
+baseurl: 
 
 # Site settings
 title: Awesome Title
@@ -50,7 +50,7 @@ social:
     url:
   - title: stack-overflow
     url: http://stackoverflow.com/questions/tagged/jekyll
-  - title: bitbucket 
+  - title: bitbucket
     url: http://bitbucket.org/jekyll
   - title: github
     url: http://github.com/jekyll
@@ -62,4 +62,4 @@ address:
 
 # Build settings
 markdown: kramdown
-permalink: pretty
\ No newline at end of file
+permalink: pretty
diff --git a/_includes/footer.html b/_includes/footer.html
index bebbfbbaeb..1d0dfdfd45 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -22,4 +22,4 @@
                 </div>
             </div>
         </div>
-    </footer>
\ No newline at end of file
+    </footer>
diff --git a/_includes/header.html b/_includes/header.html
index acb75fc5bf..aab293c69b 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -18,21 +18,14 @@
                     <li class="hidden">
                         <a href="#page-top"></a>
                     </li>
+                    {% assign sorted_pages = (site.pages | sort: 'order') %}
+                    {% for sec in sorted_pages %}
+                    {% if sec.section and sec.title %}
                     <li>
-                        <a class="page-scroll" href="#services">Services</a>
-                    </li>
-                    <li>
-                        <a class="page-scroll" href="#portfolio">Portfolio</a>
-                    </li>
-                    <li>
-                        <a class="page-scroll" href="#about">About</a>
-                    </li>
-                    <li>
-                        <a class="page-scroll" href="#team">Team</a>
-                    </li>
-                    <li>
-                        <a class="page-scroll" href="#contact">Contact</a>
+                        <a class="page-scroll" href="#{{ sec.section }}">{{ sec.title }}</a>
                     </li>
+                    {% endif %}
+                    {% endfor %}
                 </ul>
             </div>
             <!-- /.navbar-collapse -->
@@ -55,4 +48,3 @@
           {% if page.title %}<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>{% endif %}
         {% endfor %}
  -->
-
diff --git a/_includes/js.html b/_includes/js.html
index d5713d9832..c6c391cc09 100644
--- a/_includes/js.html
+++ b/_includes/js.html
@@ -15,3 +15,77 @@
 
     <!-- Custom Theme JavaScript -->
     <script src="{{ "/js/agency.js" | prepend: site.baseurl }}"></script>
+
+    <script type="text/javascript">
+
+    // How to force async functions to execute sequentially
+    // by using deferred pipe chaining.
+
+    // The master deferred.
+    var dfd = $.Deferred(),  // Master deferred
+        dfdNext = dfd; // Next deferred in the chain
+        x = 0, // Loop index
+        values = [],
+
+        // Simulates $.ajax, but with predictable behaviour.
+        // You only need to understand that higher 'value' param
+        // will finish earlier.
+        simulateAjax = function (value) {
+            var dfdAjax = $.Deferred();
+
+            setTimeout(
+                function () {
+                    dfdAjax.resolve(value);
+                },
+                1000 - (value * 100)
+            );
+
+            return dfdAjax.promise();
+        },
+
+        // This would be a user function that makes an ajax request.
+        // In normal code you'd be using $.ajax instead of simulateAjax.
+        requestAjax = function (value) {
+            return simulateAjax(value);
+        };
+
+    // Start the pipe chain.  You should be able to do
+    // this anywhere in the program, even
+    // at the end,and it should still give the same results.
+    dfd.resolve();
+
+    {% assign sorted_pages = (site.pages | sort: 'order') %}
+    {% for sec in sorted_pages %}
+      //# Do something.
+      {% if sec.url and sec.title %}
+        dfdNext = dfdNext.pipe(function () {
+            return jQuery.get("{{ sec.url }}", function(data) {
+                    // Process the response here.
+                    $('#sections').append(data);
+                });
+
+        });
+        {% comment %}
+        function get_page_{{ forloop.index }}(){
+          jQuery.ajax({url:"{{ sec.url }}",success: function(data) {
+              //console.log(data);
+              // window.alert("{{ sec.section }}")
+              $('#sections').append(data);
+              {% if forloop.last == false %}
+              get_page_{{ forloop.index | plus: 1 }}();
+              {% endif %}
+          },async: true});
+        }
+        if (get_pages) {
+          get_pages = false;
+          get_page_{{ forloop.index }}();
+        }
+      {% endcomment %}
+      {% endif %}
+    {% endfor %}
+    jQuery.ajax({url:"{{ "modals" | prepend: site.baseurl }}",success: function(data) {
+        //console.log(data);
+        // window.alert("{{ sec.section }}")
+        $('#sections').append(data);
+    },async: true});
+    </script>
diff --git a/_layouts/default.html b/_layouts/default.html
index 0b2a6fca27..8d094709c0 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -7,15 +7,13 @@
     <body id="page-top" class="index">
 
     {% include header.html %}
-    {% include services.html %}
-    {% include portfolio_grid.html %}
-    {% include about.html %}
-    {% include team.html %}
-    {% include clients.html %}
-    {% include contact.html %}
+    <div id="sections">
+    </div>
     {% include footer.html %}
+    {% comment %}
     {% include modals.html %}
+    {% endcomment %}
     {% include js.html %}
 
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/_layouts/modal.html b/_layouts/modal.html
new file mode 100644
index 0000000000..5eb62eb59a
--- /dev/null
+++ b/_layouts/modal.html
@@ -0,0 +1,38 @@
+ <!-- Portfolio Modal -->
+    <div class="portfolio-modal modal fade" id="portfolioModal{{ page.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-content">
+            <div class="close-modal" data-dismiss="modal">
+                <div class="lr">
+                    <div class="rl">
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 col-lg-offset-2">
+                        <div class="modal-body">
+                            <h2>{{ page.title }}</h2>
+                            <hr class="star-primary">
+                            <img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
+                            <p>{{ page.description }}</p>
+                            <ul class="list-inline item-details">
+                                <li>Client:
+                                    <strong><a href="http://startbootstrap.com">{{ page.client }}</a>
+                                    </strong>
+                                </li>
+                                <li>Date:
+                                    <strong><a href="http://startbootstrap.com">{{ page.project-date }}</a>
+                                    </strong>
+                                </li>
+                                <li>Service:
+                                    <strong><a href="http://startbootstrap.com">{{ page.category }}</a>
+                                    </strong>
+                                </li>
+                            </ul>
+                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
diff --git a/_layouts/section.html b/_layouts/section.html
new file mode 100644
index 0000000000..d081d634da
--- /dev/null
+++ b/_layouts/section.html
@@ -0,0 +1,7 @@
+<section id="{{ page.section }}" class="bg-light-gray">
+    <div class="container">
+        <div class="row">
+      {{ content }}
+        </div>
+    </div>
+</section>
diff --git a/js/background.js b/js/background.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/_includes/modals.html b/modals.html
similarity index 92%
rename from _includes/modals.html
rename to modals.html
index 74274ed8b0..38242bbe80 100644
--- a/_includes/modals.html
+++ b/modals.html
@@ -1,3 +1,6 @@
+---
+title: Portfolio
+---
  <!-- Portfolio Modals -->
  {% for post in site.posts %}
     <div class="portfolio-modal modal fade" id="portfolioModal{{ post.modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
@@ -14,7 +17,7 @@
                         <div class="modal-body">
                             <h2>{{ post.title }}</h2>
                             <hr class="star-primary">
-                            <img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
+                            <img src="/img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
                             <p>{{ post.description }}</p>
                             <ul class="list-inline item-details">
                                 <li>Client:
diff --git a/_includes/about.html b/page/about.html
similarity index 98%
rename from _includes/about.html
rename to page/about.html
index f6ca89e7c4..498bd6d952 100644
--- a/_includes/about.html
+++ b/page/about.html
@@ -1,6 +1,11 @@
+---
+layout: section
+title: About
+section: about
+order: 998
+---
 <!-- About Section -->
-    <section id="about">
-        <div class="container">
+
             <div class="row">
                 <div class="col-lg-12 text-center">
                     <h2 class="section-heading">About</h2>
@@ -76,5 +81,3 @@ <h4>Be Part
                     </ul>
                 </div>
             </div>
-        </div>
-    </section>
\ No newline at end of file
diff --git a/_includes/clients.html b/page/clients.html
similarity index 95%
rename from _includes/clients.html
rename to page/clients.html
index c8277f50e5..8ac065c1d9 100644
--- a/_includes/clients.html
+++ b/page/clients.html
@@ -1,3 +1,7 @@
+---
+title: Clients
+order: 998
+---
 <!-- Clients Aside -->
     <aside class="clients">
         <div class="container">
@@ -24,4 +28,4 @@
                 </div>
             </div>
         </div>
-    </aside>
\ No newline at end of file
+    </aside>
diff --git a/_includes/contact.html b/page/contact.html
similarity index 96%
rename from _includes/contact.html
rename to page/contact.html
index 447c9e876c..daec322b1a 100644
--- a/_includes/contact.html
+++ b/page/contact.html
@@ -1,5 +1,10 @@
-<section id="contact">
-        <div class="container">
+---
+layout: section
+title: Contact
+section: contact
+order: 999
+---
+
             <div class="row">
                 <div class="col-lg-12 text-center">
                     <h2 class="section-heading">Contact Us</h2>
@@ -39,5 +44,3 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
                     </form>
                 </div>
             </div>
-        </div>
-    </section>
diff --git a/_includes/portfolio_grid.html b/page/portfolio_grid.html
similarity index 91%
rename from _includes/portfolio_grid.html
rename to page/portfolio_grid.html
index b8a72200d1..f260e42c6c 100644
--- a/_includes/portfolio_grid.html
+++ b/page/portfolio_grid.html
@@ -1,6 +1,11 @@
+---
+layout: section
+title: Portfolio
+section: portfolio
+order: 200
+---
 <!-- Portfolio Grid Section -->
-    <section id="portfolio" class="bg-light-gray">
-        <div class="container">
+
             <div class="row">
                 <div class="col-lg-12 text-center">
                     <h2 class="section-heading">Portfolio</h2>
@@ -25,5 +30,3 @@ <h4>{{ post.title }}</h4>
                 </div>
             {% endfor %}
             </div>
-        </div>
-    </section>
diff --git a/_includes/services.html b/page/services.html
similarity index 95%
rename from _includes/services.html
rename to page/services.html
index a82e9588c2..5c889050bc 100644
--- a/_includes/services.html
+++ b/page/services.html
@@ -1,6 +1,11 @@
+---
+layout: section
+title: Services
+section: services
+order: 100
+---
 <!-- Services Section -->
-    <section id="services">
-        <div class="container">
+
             <div class="row">
                 <div class="col-lg-12 text-center">
                     <h2 class="section-heading">Services</h2>
@@ -33,5 +38,3 @@ <h4 class="service-heading">Web Security</h4>
                     <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
                 </div>
             </div>
-        </div>
-    </section>
\ No newline at end of file
diff --git a/_includes/team.html b/page/team.html
similarity index 93%
rename from _includes/team.html
rename to page/team.html
index 23807e05dc..602f3525a9 100644
--- a/_includes/team.html
+++ b/page/team.html
@@ -1,6 +1,10 @@
+---
+layout: section
+title: Team
+section: team
+order: 900
+---
 <!-- Team Section -->
-    <section id="team" class="bg-light-gray">
-        <div class="container">
             <div class="row">
                 <div class="col-lg-12 text-center">
                     <h2 class="section-heading">Our Amazing Team</h2>
@@ -33,5 +37,3 @@ <h4>{{ member.name }}</h4>
                     <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
                 </div>
             </div>
-        </div>
-    </section>
\ No newline at end of file