diff --git a/_layouts/default.html b/_layouts/default.html
index 613b929ded4..9a5588d4050 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,6 +16,8 @@ forum_url: http://forum.springframework.io
   <link rel="stylesheet" type="text/css" href="css/typography.css.css" />
   <link rel="stylesheet" type="text/css" href="css/icons.css.css" />
   <link rel="stylesheet" type="text/css" href="css/projects.css.css" />
+  <link rel="stylesheet" type="text/css" href="css/buttons.css.css" />
+  <link rel="stylesheet" type="text/css" href="css/guide.css.css" />
 
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
@@ -24,6 +26,7 @@ forum_url: http://forum.springframework.io
   <script type="text/javascript" src="js/backbone.js"></script>
   <script type="text/javascript" src="js/projectDocumentationWidget.js"></script>
   <script type="text/javascript" src="js/application.js"></script>
+  <script type="text/javascript" src="js/guide.js"></script>
   <script type="text/javascript">
     var apiBaseUrl = "{{ page.main_site_url }}";
     var projectId = "{{ site.projectId }}";
diff --git a/css/buttons.css.css b/css/buttons.css.css
new file mode 100644
index 00000000000..449ccf15f8c
--- /dev/null
+++ b/css/buttons.css.css
@@ -0,0 +1,40 @@
+.btn.btn-black {
+  background-color: #34302d;
+  background-image: none;
+  border-radius: 0;
+  color: #f1f1f1;
+  font-size: 14px;
+  line-height: 14px;
+  font-family: "Montserrat", sans-serif;
+  border: 2px solid #6db33f;
+  padding: 21px 60px;
+  text-shadow: none;
+  transition: border 0.15s;
+  -webkit-transition: border 0.15s;
+  -moz-transition: border 0.15s;
+  -o-transition: border 0.15s;
+  -ms-transition: border 0.15s;
+}
+.btn.btn-black.sub-text {
+  padding: 12px 0;
+}
+.btn.btn-black.sub-text p {
+  margin-top: 6px;
+  color: #eeeeee;
+  font-size: 14px;
+  line-height: 14px;
+  font-family: "Montserrat", sans-serif;
+  text-transform: none;
+}
+.btn.btn-black:hover {
+  border-color: #34302d;
+  box-shadow: none;
+  text-decoration: none;
+}
+.btn.btn-black:active {
+  box-shadow: inset 0 3px 6px #0b0a0a;
+  border-color: #34302d;
+}
+.btn.uppercase {
+  text-transform: uppercase;
+}
diff --git a/css/guide.css.css b/css/guide.css.css
new file mode 100644
index 00000000000..5d1c11f45df
--- /dev/null
+++ b/css/guide.css.css
@@ -0,0 +1,212 @@
+.guides-section--container {
+  border: 1px solid #34302d;
+  padding: 40px;
+  min-height: 200px;
+  margin-top: 50px;
+}
+.guides-section--container:first-child {
+  margin-top: 0;
+}
+.guides-section--container .section-title--container {
+  background-color: #34302d;
+  color: #eeeeee;
+  padding: 40px 0;
+  margin: -40px 40px 40px -40px;
+  float: left;
+  width: 324px;
+  text-align: center;
+}
+.guides-section--container .section-title--container .section-title--icon {
+  height: 100px;
+  width: 72px;
+  display: inline-block;
+  background-image: url("../img/iconsprite.png");
+}
+.guides-section--container .section-title--container .section-title--icon.gs-guides--icon {
+  background-position: -1px -737px;
+}
+.guides-section--container .section-title--container .section-title--title {
+  text-transform: uppercase;
+  font-family: "Montserrat", sans-serif;
+  font-size: 18px;
+  line-height: 18px;
+  padding: 30px 20px 25px;
+}
+.guides-section--container .section-title--container .section-title--intro {
+  padding: 0 40px;
+  font-size: 14px;
+  line-height: 21px;
+}
+.guides-section--container .guides--wrapper {
+  margin-right: -40px;
+}
+.guides-section--container .guide--container {
+  display: inline-block;
+  width: 284px;
+  margin: 0 40px 20px 0;
+  vertical-align: top;
+}
+.guides-section--container .guide--container .guide--title {
+  font-size: 16px;
+  color: #5fa134;
+  line-height: 22px;
+}
+.guides-section--container .guide--container .guide--subtitle {
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 5px;
+}
+
+.content--container h1 {
+  margin-bottom: 30px;
+}
+.content--container a {
+  color: #5fa134;
+}
+.content--container p, .content--container pre {
+  margin-bottom: 18px;
+  border-radius: 0;
+}
+.content--container h2 {
+  font-family: "Montserrat", sans-serif;
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 700;
+  margin: 30px 0 15px;
+}
+.content--container h3, .content--container h4 {
+  font-family: "Montserrat", sans-serif;
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 700;
+  margin: 30px 0 15px;
+}
+.content--container p code {
+  color: #305CB5;
+  font-size: 14px;
+  padding: 2px 6px;
+}
+.content--container ul {
+  margin-bottom: 30px;
+}
+.content--container ul li {
+  padding: 5px 0;
+}
+.content--container ul li code {
+  color: #305CB5;
+  font-size: 14px;
+  padding: 2px 6px;
+}
+.content--container blockquote {
+  padding: 0 0 0 10px;
+  border-left: 5px solid #DDD;
+}
+.content--container pre {
+  word-break: normal;
+  word-wrap: normal;
+  white-space: pre;
+  overflow-x: scroll;
+  width: 96.9%%;
+}
+.content--container .highlight .copy-button {
+  position: absolute;
+  margin-left: 634px;
+}
+
+.content-right-pane--container h2 {
+  margin: 15px 6.2%;
+}
+.content-right-pane--container p {
+  font-size: 14px;
+  line-height: 21px;
+  margin: 15px 6.2%;
+}
+.content-right-pane--container h3 {
+  border-top: 1px solid #ddd;
+  padding: 6px 6.2%;
+  font-family: "Montserrat", sans-serif;
+  margin: 0;
+}
+.content-right-pane--container ul {
+  margin: 0;
+}
+.content-right-pane--container ul li {
+  line-height: 21px;
+}
+.content-right-pane--container ul li:last-child {
+  padding-bottom: 28px;
+}
+.content-right-pane--container ul li:first-child {
+  padding-bottom: 12px;
+}
+.content-right-pane--container .btn-group {
+  margin: 0 6.2%;
+  display: block;
+}
+.content-right-pane--container .btn-group .btn {
+  font-family: "Varela Round", sans-serif;
+  padding: 18px 6.4%;
+  font-size: 16px;
+  line-height: 16px;
+  border: 1px solid #ddd;
+  box-shadow: none;
+}
+.content-right-pane--container .btn-group .btn.active {
+  background: #fff;
+  box-shadow: none;
+}
+.content-right-pane--container .btn-group .btn:active {
+  box-shadow: inset 0 1px 3px #c8c8c8;
+}
+.content-right-pane--container .clone-url {
+  border: 1px solid #ccc;
+  background-color: white;
+  cursor: pointer;
+  margin: 15px 6.2%;
+}
+.content-right-pane--container .clone-url input {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 14px 0 14px 14px;
+}
+.content-right-pane--container .clone-url input:focus {
+  outline: none;
+}
+.content-right-pane--container .clone-url button {
+  padding: 24px;
+  margin: 0;
+  float: right;
+  background-position: 7px -62px;
+}
+.content-right-pane--container .github_download {
+  display: block;
+  text-align: center;
+  margin: 15px 6.2%;
+}
+
+.copy-button {
+  background-color: #cccccc;
+  margin: 1px 1px 10px 0;
+  padding: 20px;
+  background-image: url("../img/iconsprite.png");
+  background-repeat: no-repeat;
+  background-position: 2px -66px;
+  width: 20px;
+  height: 22px;
+  border: none;
+  background-color: #34302d;
+}
+.copy-button.snippet {
+  float: right;
+}
+
+a.ci-status {
+  float: right;
+  margin-top: -27px;
+}
+
+.gs-guide-import {
+  display: none;
+}
diff --git a/css/icons.css.css b/css/icons.css.css
index 102d12b21d7..cb0024db17b 100644
--- a/css/icons.css.css
+++ b/css/icons.css.css
@@ -1,5 +1,5 @@
 .icon {
-  background-image: url("/img/iconsprite.png");
+  background-image: url("../img/iconsprite.png");
   background-repeat: no-repeat;
   display: inline-block !important;
 }
@@ -49,7 +49,7 @@
   height: 137px;
   background-position: -805px -161px;
 }
-.icon.project--logo.logo-spring-andriod {
+.icon.project--logo.logo-spring-android {
   width: 104px;
   height: 126px;
   background-position: -805px -325px;
@@ -69,3 +69,21 @@
 .icon.icon-projects:hover {
   background-position: -641px -521px;
 }
+.icon.icon-forum {
+  width: 32px;
+  height: 32px;
+  background-position: -409px -450px;
+}
+.icon.icon-forum:hover {
+  background-position: -449px -450px;
+}
+.icon.icon-current-version {
+  height: 13px;
+  width: 42px;
+  background-position: -284px -520px;
+}
+.icon.icon-pre-release {
+  height: 13px;
+  width: 23px;
+  background-position: -344px -520px;
+}
diff --git a/css/main.css.css b/css/main.css.css
index 907e7f6c10e..4018f83c95c 100644
--- a/css/main.css.css
+++ b/css/main.css.css
@@ -40,7 +40,7 @@ body {
 
 .code-snippet {
   border-radius: 2px;
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: #F9F9F9;
   padding: 12px 18px;
   margin: 15px 0;
@@ -150,7 +150,7 @@ body {
   margin-top: -90px;
   background-color: white;
   width: 100%;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid #ddd;
   transition: margin 0.25s;
   -webkit-transition: margin 0.25s;
   -moz-transition: margin 0.25s;
@@ -205,7 +205,7 @@ body {
 }
 
 .right-pane-widget--container {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   box-shadow: 0 -4px 0 #34302d;
   margin: 4px 0 40px 0;
 }
@@ -234,6 +234,9 @@ body {
   font-weight: bold;
   color: #34302d;
 }
+.right-pane-widget--container.no-top-border {
+  box-shadow: none;
+}
 
 .header--content {
   background-color: #dedede;
@@ -417,7 +420,7 @@ input.floating-input:focus {
 
 .gh-project-url--container {
   background-color: #FFF;
-  border: 1px solid #cccccc;
+  border: 1px solid #CCC;
   height: 20px;
   padding: 4px 6px;
   border-radius: 4px;
@@ -708,12 +711,68 @@ input.floating-input:focus {
 }
 .item--dropdown.no-item--header .tool-download-link .file-size {
   color: #6c635d;
-  font-size: 12px;
+  font-size: 10px;
+  line-height: 23px;
   float: right;
 }
 
+.item-slider-widget {
+  display: inline-block;
+  margin-left: 9px;
+}
+.item-slider-widget .item--slider {
+  height: 32px;
+  position: absolute;
+  width: 62px;
+  border-radius: 2px;
+  margin-top: -4px;
+  z-index: 800;
+  background: #68605a;
+  background: -moz-linear-gradient(top, #68605a 0%, #34302d 100%, #020202 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #68605a), color-stop(100%, #34302d), color-stop(100%, #020202));
+  background: -webkit-linear-gradient(top, #68605a 0%, #34302d 100%, #020202 100%);
+  background: -o-linear-gradient(top, #68605a 0%, #34302d 100%, #020202 100%);
+  background: -ms-linear-gradient(top, #68605a 0%, #34302d 100%, #020202 100%);
+  background: linear-gradient(to bottom, #68605a 0%, #34302d 100%, #020202 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68605a', endColorstr='#020202',GradientType=0 );
+  cursor: pointer;
+  transition: all 0.25s;
+  -webkit-transition: all 0.25s;
+  -moz-webkit-transition: all 0.25s;
+  -ms--webkit-transition: all 0.25s;
+  -o-webkit-transition: all 0.25s;
+}
+.item-slider-widget .item-slider--container {
+  background-color: white;
+  border: 1px solid #999;
+  padding: 0 3px;
+}
+.item-slider-widget .item-slider--container .item {
+  display: inline-block;
+  color: #c3c3c3;
+  font-family: "Montserrat", sans-serif;
+  font-size: 12px;
+  line-height: 12px;
+  text-transform: uppercase;
+  padding: 7px 6px 5px;
+  cursor: pointer;
+  transition: color 0.25s;
+  -webkit-transition: color 0.25s;
+  -moz-webkit-transition: color 0.25s;
+  -ms--webkit-transition: color 0.25s;
+  -o-webkit-transition: color 0.25s;
+}
+.item-slider-widget .item-slider--container .item:hover {
+  color: black;
+}
+.item-slider-widget .item-slider--container .item.js-active {
+  z-index: 801;
+  position: relative;
+  color: #f1f1f1;
+}
+
 .content-container--wrapper {
-  border: 1px solid #34302d;
+  border: 1px solid #34302D;
   margin-top: -1px;
 }
 .content-container--wrapper:first-child {
@@ -754,6 +813,7 @@ input.floating-input:focus {
 
 .billboard-body--wrapper {
   margin-top: 326px;
+  padding: 100px 0;
 }
 
 .search-facets > ul {
diff --git a/css/projects.css.css b/css/projects.css.css
index a961b692d8a..af7ff8ed412 100644
--- a/css/projects.css.css
+++ b/css/projects.css.css
@@ -95,8 +95,16 @@
   -ms-transform: rotate(-45deg);
 }
 
+.project-header--wrapper .billboard--container {
+  margin-top: 60px;
+}
 .project-header--wrapper .content--title {
+  position: relative;
   margin-bottom: 30px;
+  margin-top: 0;
+}
+.project-header--wrapper .content--title a {
+  color: #f1f1f1;
 }
 .project-header--wrapper .project--title {
   font-family: "Montserrat", sans-serif;
@@ -110,13 +118,28 @@
   margin-top: -2px;
 }
 .project-header--wrapper .project--links--container .project-link {
-  font-size: 34px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.project-header--wrapper .project--links--container .project-link [class^=icon-] {
+  font-size: 37px;
+  width: 34px;
+  height: 34px;
   color: #d4d4d4;
 }
+.project-header--wrapper .project--links--container .project-link:last-child {
+  margin-right: 0;
+}
 .project-header--wrapper .project--links--container .project-link:hover {
   text-decoration: none;
+}
+.project-header--wrapper .project--links--container .project-link:hover [class^=icon-] {
   color: #6db33f;
 }
+.project-header--wrapper .project--links--container .project-link div.icon {
+  margin-top: 3px;
+}
 .project-header--wrapper .project--description {
   color: #f1f1f1;
   font-size: 16px;
@@ -125,6 +148,178 @@
 .project-header--wrapper .project--description a {
   color: #5fa134;
 }
+.project-header--wrapper .project-quickstart-btn {
+  margin-top: 40px;
+}
 .project-header--wrapper .spring-data--bg {
   background-color: #666;
 }
+
+.project-body--container .project-body--section {
+  margin-bottom: 30px;
+  padding-right: 20px;
+}
+.project-body--container .project-body--section p {
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 20px;
+}
+.project-body--container .project-body--section li {
+  padding: 5px 0;
+}
+.project-body--container .project-body--section .underlined-title {
+  border-bottom: 1px solid white;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+.project-body--container .project-body--section h3 {
+  font-family: "Montserrat", sans-serif;
+  font-weight: bold;
+}
+.project-body--container .project-body--section pre {
+  border-radius: 0;
+}
+
+.quickstart--container {
+  border: 1px solid #34302d;
+}
+.quickstart--container .quickstart--title {
+  font-family: "Montserrat", sans-serif;
+  color: #f1f1f1;
+  background-color: #34302d;
+  font-size: 16px;
+  line-height: 16px;
+  padding: 17px 0;
+  width: 211px;
+  text-align: center;
+  display: inline-block;
+}
+.quickstart--container .quickstart--dropdown {
+  display: inline-block;
+  width: 34.6%;
+  margin-left: 16px;
+}
+.quickstart--container .quickstart--dropdown .item-dropdown--title {
+  padding: 9px 0 7px 20px;
+  border: 1px solid #34302d;
+}
+.quickstart--container .quickstart--dropdown .item-dropdown--title .icon {
+  margin: -3px 0 0 6px;
+  vertical-align: middle;
+}
+.quickstart--container .quickstart--dropdown .item-dropdown--icon {
+  padding: 9px;
+  background-color: #34302d;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown {
+  width: 100%%;
+  padding: 0;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown .project-version {
+  color: #f1f1f1;
+  padding: 8px 20px;
+  border-top: 1px solid #4a4440;
+  cursor: pointer;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown .project-version .icon {
+  margin: -3px 0 0 6px;
+  vertical-align: middle;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown .project-version.active {
+  background-color: black;
+  border-color: transparent;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown .project-version.active:hover {
+  background-color: black;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown .project-version:first-child {
+  border: none;
+}
+.quickstart--container .quickstart--dropdown .project-version--dropdown .project-version:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.quickstart--container .quickstart--dropdown.js-open .item-dropdown--title {
+  border: 1px solid #6db33f;
+}
+.quickstart--container .quickstart--dropdown:hover .item-dropdown--icon {
+  color: white;
+}
+.quickstart--container .quickstart--body {
+  padding: 20px;
+}
+
+.project-documentation--container {
+  border-color: #34302d;
+}
+.project-documentation--container .item-dropdown--title {
+  background-color: transparent;
+  border-bottom: 1px solid #34302d;
+  padding: 20px;
+  font-family: "Montserrat", sans-serif;
+  font-size: 14px;
+  line-height: 14px;
+}
+.project-documentation--container .item--dropdown {
+  display: block;
+  position: relative;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+.project-documentation--container .item--dropdown .item--body-title {
+  padding-top: 15px;
+  color: #34302d;
+  margin: 0 20px;
+  border-color: #d7d5d3;
+}
+.project-documentation--container .item--dropdown .item--body--version {
+  margin: 0 20px;
+  border-color: #d7d5d3;
+}
+.project-documentation--container .item--dropdown .item--body--version p {
+  color: #34302d;
+  display: inline-block;
+}
+.project-documentation--container .item--dropdown .item--body--version .icon {
+  vertical-align: top;
+  margin: 2px 0 0 6px;
+}
+.project-documentation--container .item--dropdown .item--body--version .icon.icon-pre-release {
+  background-color: #34302d;
+  border-radius: 2px;
+}
+.project-documentation--container .item--dropdown .item--body--version:last-child {
+  margin-bottom: 20px;
+}
+
+.project-sub-link--wrapper {
+  padding: 20px 20px 18px;
+}
+.project-sub-link--wrapper .project-sub-link {
+  background-color: #cbcaca;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  margin-right: 2.9%;
+}
+.project-sub-link--wrapper .project-sub-link:last-child {
+  margin-right: 0;
+}
+
+.project-additional-resource--wrapper {
+  padding: 20px;
+}
+.project-additional-resource--wrapper h3 {
+  margin: 5px 0;
+}
+.project-additional-resource--wrapper ul {
+  margin: 0 0 25px 0;
+}
+.project-additional-resource--wrapper ul li {
+  border: none;
+  padding: 5px 0;
+}
+.project-additional-resource--wrapper ul:last-child {
+  margin-bottom: 0;
+}
diff --git a/img/iconsprite.png b/img/iconsprite.png
index 47852871adb..65b8ff8ec69 100644
Binary files a/img/iconsprite.png and b/img/iconsprite.png differ
diff --git a/index-common.html b/index-common.html
index e1badbc9ee8..2f09af8d545 100644
--- a/index-common.html
+++ b/index-common.html
@@ -15,21 +15,177 @@ title: Your Project Name Here
             <a href="#" class="project-link">
               <i class="icon-github"></i>
             </a>
-            <a href="#">
+            <a href="#" class="project-link">
               <div class="icon icon-forum"></div>
             </a>
           </div>
           <div class="project--title">{{ page.title }}</div>
-
+          
           <div class="project--description">
-            YOUR CONTENT HERE
+            **PROJECT DESCRIPTION** Corpus callosum, <a href="#">the carbon</a> in our apple pies a mote of dust suspended in a sunbeam. Muse about! Venture galaxies a billion trillion extraordinary claims require extraordinary evidence, consciousness a mote of dust suspended in a sunbeam Apollonius of <a href="#">Perga Euclid</a> inconspicuous motes of rock and gas made in the interiors of collapsing stars.
           </div>
-          <div class="btn btn-black uppercase">Quick Start</div>
+          <div class="btn btn-black uppercase project-quickstart-btn">Quick Start</div>
         </div>
       </div>
-
+      
     </div>
   </div>
   <div class="billboard-bg spring-data--bg"></div>
 </div> 
-<div class="billboard-body--wrapper"></div>
+<div class="billboard-body--wrapper project-body--container">
+  <div class="row-fluid">
+    <div class="span8">
+      <div class="project-body--section">
+        <p>
+          **INTRODUCTORY PARAGRAPHS** Birth, a very small stage in a vast cosmic arena extraordinary claims require extraordinary evidence! Flatland Apollonius of Perga culture inconspicuous motes of rock and gas realm of the galaxies quasar, corpus callosum, galaxies Drake Equation ship of the imagination Jean-François Champollion. Galaxies Hypatia! Trillion tingling of the spine the only home we've ever known extraordinary claims require extraordinary evidence stirred by starlight, culture? Flatland Tunguska event finite but unbounded corpus callosum!
+        </p>
+        <p>
+          Radio telescope Orion's sword science, brain is the seed of intelligence. Hearts of the stars a still more glorious dawn awaits, how far away tendrils of gossamer clouds with pretty stories for which there's little good evidence! 
+        </p>
+        <p>
+          Intelligent beings are creatures of the cosmos at the edge of forever of brilliant syntheses network of wormholes tingling of the spine not a sunrise but a galaxyrise prime number Vangelis gathered by gravity Orion's sword network of wormholes rogue tingling of the spine?
+        </p>
+      </div>
+      <div class="project-body--section">
+        <h2>Features</h2>
+        <ul>
+          <li>Implementation of CRUD methods for JPA Entities</li>
+          <li>Dynamic query generation from query method names</li>
+          <li>Transparent triggering of JPA NamedQueries by query methods</li>
+          <li>Implementation domain base classes providing basic properties</li>
+          <li>Support for transparent auditing (created, last changed)</li>
+          <li>Possibility to integrate custom repository code</li>
+          <li>Easy Spring integration with custom namespace</li>
+        </ul>
+      </div>
+      <div class="project-body--section">
+        <div class="row-fluid quickstart--container">
+          <div class="quickstart--header js-item-dropdown-widget--wrapper">
+            <div class="quickstart--title">
+              Quick Start (TBD)
+            </div>
+            <div class="item-dropdown-widget js-item-dropdown--wrapper quickstart--dropdown">
+              <div class="item-dropdown--link js-item--open-dropdown">
+                <div class="item-dropdown--icon icon-reorder pull-right"></div>
+                <div class="item-dropdown--title">
+                  1.3.4.RELEASE
+                  <div class="icon icon-current-version"></div>
+                </div>
+              </div>
+              <div class="item--dropdown no-item--header project-version--dropdown">
+                <div class="project-version">
+                  1.4.0.RC1
+                  <div class="icon icon-pre-release"></div>
+                </div>
+                <div class="project-version active">
+                  1.3.4.RELEASE
+                  <div class="icon icon-current-version"></div>
+                </div> 
+                <div class="project-version">1.2.1.RELEASE</div> 
+              </div>
+            </div>
+            <div class="item-slider-widget js-item-slider--wrapper">
+              <div class="item-slider--container">
+                <div class="item--slider js-item--slider"></div>
+                <div class="item js-active js-item">
+                  Maven
+                </div>
+                <div class="item js-item">
+                  Gradle
+                </div>
+                <div class="item js-item">
+                  Zip
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="quickstart--body">
+            <p>**PROS**Billions upon billions are creatures of the cosmos a mote of dust suspended in a sunbeam. Gathered by gravity. Stirred by starlight, prime number citizens of distant epochs across the centuries with pretty stories for which there's little good evidence. Emerged into consciousness tingling of the spine. Kindling the energy hidden in matter rogue corpus callosum.</p>
+            <div class="highlight"><button class="copy-button snippet" id="copy-button-" 2="" data-clipboard-target="code-block-2"></button><pre id="code-block-2"><span>
+  <span class="nt">&lt;dependency&gt;</span>
+    <span class="nt">&lt;groupId&gt;</span>org.springframework.boot<span class="nt">&lt;/groupId&gt;</span>
+    <span class="nt">&lt;artifactId&gt;</span>spring-boot-starter-parent<span class="nt">&lt;/artifactId&gt;</span>
+    <span class="nt">&lt;version&gt;</span>0.5.0.BUILD-SNAPSHOT<span class="nt">&lt;/version&gt;</span>
+  <span class="nt">&lt;/dependency&gt;</span>
+        </pre></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="span4">
+      <div class="right-pane-widget--container no-top-border project-documentation--container">
+        <div class="item-dropdown-widget">
+          <div class="item-dropdown--title">Spring Data JPA Documentation</div>
+          <div class="item--dropdown">
+            <div class="item--body">
+              <div class="item--body-title">
+                <div class="item--left-column">Release</div>
+                <div class="item--right-column">Documentation</div>
+              </div>
+              <div class="item--body--version">
+                <div class="item--left-column">
+                  <p>1.4.0.RC1</p>
+                  <div class="icon icon-pre-release"></div>
+                </div>
+                <div class="item--right-column">
+                  <a href="#" class="docs-link reference-link">Reference</a>
+                  <a href="#" class="docs-link api-link">API</a>
+                </div>
+              </div>
+              <div class="item--body--version">
+                <div class="item--left-column">
+                  <p>1.3.4</p>
+                  <div class="icon icon-current-version"></div>
+                </div>
+                <div class="item--right-column">
+                  <a href="#" class="docs-link reference-link">Reference</a>
+                  <a href="#" class="docs-link api-link">API</a>
+                </div>
+              </div>
+              <div class="item--body--version">
+                <div class="item--left-column">
+                  <p>1.2.1</p>
+                </div>
+                <div class="item--right-column">
+                  <a href="#" class="docs-link reference-link">Reference</a>
+                  <a href="#" class="docs-link api-link">API</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-pane-widget--container no-top-border">
+        <div class="project-sub-link--wrapper">
+          <div class="project-sub-link"></div>
+          <div class="project-sub-link"></div>
+          <div class="project-sub-link"></div>
+          <div class="project-sub-link"></div>
+          <div class="project-sub-link"></div>
+          <div class="project-sub-link"></div>
+          <div class="project-sub-link"></div>
+        </div>
+      </div>
+      <div class="right-pane-widget--container no-top-border project-additional-resource--wrapper">
+        <h3>Spring Data JPA Sample Projects</h3>
+        <ul>
+          <li><a href="#">Project Name 1</a></li>
+          <li><a href="#">Project Name 2</a></li>
+          <li><a href="#">Project Name nth</a></li>
+        </ul>
+        <h3>Getting Started Guides</h3>
+        <ul>
+          <li><a href="#">Getting Started Guide 1</a></li>
+          <li><a href="#">Getting Started Guide 2</a></li>
+          <li><a href="#">Getting Started Guide nth</a></li>
+        </ul>
+        <h3>Tutorials</h3>
+        <ul>
+          <li><a href="#">Tutorial 1</a></li>
+          <li><a href="#">Tutorial 2</a></li>
+          <li><a href="#">Tutorial nth</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/js/application.js b/js/application.js
index 6c6cc61c02f..359117a4687 100644
--- a/js/application.js
+++ b/js/application.js
@@ -1,12 +1,12 @@
-$(function () {
+$(function(){
 
-  $.fn.springPopover = function () {
-    this.each(function (i, e) {
-      var $e = $(e);
-      var contents = $e.html();
+  $.fn.springPopover = function(){
+    this.each(function(i,e){
+        var $e = $(e);
+        var contents = $e.html();
 
-      $e.html("<span class='btn'>" + $e.data('title') + "</span>").
-        popover({content: contents, trigger: 'click', html: true});
+        $e.html("<span class='btn'>"+$e.data('title')+"</span>").
+           popover({content: contents, trigger: 'click', html: true});
     });
 
     return this;
@@ -26,26 +26,26 @@ $(function () {
     $(this).parents(".js-item-dropdown-widget--wrapper").siblings().find(".js-item-dropdown--wrapper").removeClass("js-open");
 
     $("#scrim").addClass("js-show").css("height", scrimHeight).css("top", headerHeight);
-    $("#scrim").click(function () {
+    $("#scrim").click(function() {
       $(".js-item-dropdown--wrapper").removeClass("js-open");
       $(this).removeClass("js-show");
     });
   });
 
   //OPENS SEARCH DROPDOWN
-  $(".js-search-input-open").click(function () {
+  $(".js-search-input-open").click(function() {
     $(".nav-search").addClass("js-highlight");
     var inputContainer = $(".js-search-dropdown");
     var input = $(".js-search-input");
     inputContainer.addClass("js-show");
 
     //FOCUSES SEARCH INPUT ON OPEN
-    setTimeout(function () {
+    setTimeout(function() {
       input.focus();
     }, 100);
 
     //CLOSES SEARCH DROPDOWN
-    $(".body--container, .js-search-input-close").click(function () {
+    $(".body--container, .js-search-input-close").click(function() {
       inputContainer.removeClass("js-show");
       $(".nav-search").removeClass("js-highlight");
       $("#scrim").removeClass("js-show");
@@ -53,15 +53,15 @@ $(function () {
   });
 
 
-  //AUTO OPENS SEARCH DROPDOWN ON SEARCH VIEW AND
+  //AUTO OPENS SEARCH DROPDOWN ON SEARCH VIEW AND 
   if (window.location.pathname == "/search") {
     $(".nav-search").addClass("js-highlight");
     $(".js-search-dropdown").addClass("js-show no-animation");
 
     //PREPOPULATES INPUT WITH SEARCH QUERY AND
-    var searchQuery = decodeURIComponent(window.location.search.replace(/\+/g, " "));
+    var searchQuery = decodeURIComponent(window.location.search.replace(/\+/g," "));
     var seachStart = searchQuery.search("q=");
-    var searchString = searchQuery.substr(seachStart + 2);
+    var searchString = searchQuery.substr(seachStart+2);
 
     $(".js-search-input").val(searchString);
 
@@ -69,49 +69,72 @@ $(function () {
     $(".js-search-results--title").html(searchString);
 
     //CLOSES SEARCH DROPDOWN
-    $(".js-search-input-close").click(function () {
+    $(".js-search-input-close").click(function() {
       $(".js-search-dropdown").removeClass("js-show no-animation");
       $(".nav-search").removeClass("js-highlight");
     });
-  }
-  ;
+  };
 
-  $.fn.showPreferredLink = function () {
-    this.find("li").hide();
-    this.find("li." + detectOs() + detectArch()).show();
-    return this;
+  $.fn.showPreferredLink = function() {
+      this.find("li").hide();
+      this.find("li." + detectOs() + detectArch()).show();
+      return this;
   };
   $('.download-links').showPreferredLink();
 
-  new Spring.ProjectDocumentationWidget();
+
+  var moveItemSlider = function () {
+    var activeItem = $(".js-item-slider--wrapper .js-item.js-active");
+    var activeItemPosition = activeItem.position();
+    var activeItemOffset = activeItemPosition.left;
+    var activeItemWidth = activeItem.outerWidth();
+    
+    var slider = $(".js-item--slider");
+    var sliderPosition = slider.position();
+    var sliderOffset = sliderPosition.left;
+    var sliderTarget = activeItemOffset - sliderOffset;
+
+    slider.width(activeItemWidth);
+    slider.css("margin-left", sliderTarget);
+  }
+
+  moveItemSlider();
+
+  $(".js-item").click(function () {
+    $(this).addClass("js-active");
+    $(this).siblings().removeClass("js-active");
+    moveItemSlider();
+  });
 });
 
 
-var detectOs = function () {
-  if (navigator.appVersion.indexOf("Win") != -1) return "Windows";
-  if (navigator.appVersion.indexOf("Mac") != -1) return "Mac";
-  if (navigator.appVersion.indexOf("Linux") != -1) return "Linux";
-  return "Unknown";
+
+
+var detectOs = function() {
+    if (navigator.appVersion.indexOf("Win")!=-1) return "Windows";
+    if (navigator.appVersion.indexOf("Mac")!=-1) return "Mac";
+    if (navigator.appVersion.indexOf("Linux")!=-1) return "Linux";
+    return "Unknown";
 }
 
-var detectArch = function () {
-  if (navigator.platform.indexOf("Win64") !== -1) {
-    return "64"
-  }
+var detectArch = function() {
+    if (navigator.platform.indexOf("Win64") !== -1) {
+        return "64"
+    }
 
-  if (navigator.platform.indexOf("Linux x86_64") !== -1) {
-    return "64";
-  }
+    if (navigator.platform.indexOf("Linux x86_64") !== -1) {
+        return "64";
+    }
 
-  if (/Mac OS X 10.[0-5]/.test(navigator.userAgent)) {
-    return "32"
-  }
+    if (/Mac OS X 10.[0-5]/.test(navigator.userAgent)) {
+        return "32"
+    }
 
-  if (navigator.userAgent.indexOf("Mac OS X") !== -1) {
-    return "64"
-  }
+    if (navigator.userAgent.indexOf("Mac OS X") !== -1) {
+        return "64"
+    }
 
-  return "32";
+    return "32";
 }
 
 
diff --git a/js/guide.js b/js/guide.js
new file mode 100644
index 00000000000..6b2cafb580a
--- /dev/null
+++ b/js/guide.js
@@ -0,0 +1,42 @@
+ZeroClipboard.setDefaults( { moviePath: '/js/ZeroClipboard.swf' } );
+
+$(document).ready(function() {
+    if (ZeroClipboard.detectFlashSupport()) {
+        createCodeCopyButtons();
+        createCopyButton($('button.copy-button.github'));
+    }
+
+    $('.github-actions button').click(function() {
+        $('.github-actions button').removeClass('active');
+        $(this).addClass('active');
+
+        $('.clone-url').hide();
+        $('.clone-url.' + $(this).data('protocol')).show();
+    });
+
+    if (typeof(sts_import) === 'function') {
+        $(".gs-guide-import").show().click(function (e) {
+            var linkElement = e.target;
+            var url = linkElement.href;
+            sts_import("guide", url);
+            e.preventDefault();
+        });
+    }
+
+});
+
+function createCodeCopyButtons() {
+    $('article .highlight pre').each(function(index) {
+            var codeBlockId = "code-block-"+ index;
+            $(this).attr('id', codeBlockId);
+            var button = $('<button class="copy-button snippet" id="copy-button-"' + index + ' data-clipboard-target="' + codeBlockId + '"></button>');
+            $(this).before(button);
+            createCopyButton(button);
+        }
+    );
+}
+
+function createCopyButton($el){
+    var zero = new ZeroClipboard($el);
+    $(zero.htmlBridge).tooltip({title: "copy to clipboard", placement: 'bottom'});
+}
\ No newline at end of file