diff --git a/_includes/documentation.html b/_includes/documentation.html
new file mode 100644
index 00000000000..68145cbee35
--- /dev/null
+++ b/_includes/documentation.html
@@ -0,0 +1 @@
+<div class="js-documentation-widget"></div>
\ No newline at end of file
diff --git a/_includes/quickstart.html b/_includes/quickstart.html
new file mode 100644
index 00000000000..c62b9c9f8e7
--- /dev/null
+++ b/_includes/quickstart.html
@@ -0,0 +1,9 @@
+<h3>Quick Start (TBD)</h3>
+<div class="js-quickstart-selector"></div>
+<div>
+    Maven/Gradle
+</div>
+<p>
+    Hypatia globular star cluster, corpus callosum laws of physics globular star cluster? Rings of Uranus corpus callosum? Trillion prime number colonies kindling the energy hidden in matter, a still more glorious dawn awaits the carbon in our apple pies citizens of distant epochs Apollonius of Perga star stuff harvesting star light prime number encyclopaedia galactica the sky calls to us circumnavigated paroxysm of global death preserve and cherish that pale blue dot shores of the cosmic ocean radio telescope a billion trillion at the edge of forever. Tingling of the spine. Take root and flourish star stuff harvesting star light?
+</p>
+<div class="js-quickstart-maven-widget"></div>
diff --git a/_includes/widget_template.html b/_includes/widget_template.html
index 0268e1ae450..97742fc03ed 100644
--- a/_includes/widget_template.html
+++ b/_includes/widget_template.html
@@ -23,3 +23,22 @@
         </tbody>
     </table>
 </script>
+
+<script type="text/html" id="project-quickstart-selector-template">
+    <select class='selector'>
+        <% _.each(releases, function(release, index) { %>
+            <option value="<%= index %>"><%= release.fullName %> (<%= release.statusIconClass() %>)</option>
+        <% }); %>
+    </select>
+</script>
+
+<script type="text/html" id="project-quickstart-maven-widget-template">
+    <pre>
+&lt;dependency&gt;
+    &lt;groupId&gt;<%= groupId %>&lt;/groupId&gt;
+    &lt;artifactId&gt;<%= artifactId %>&lt;/artifactId&gt;
+    &lt;version&gt;<%= fullName %>&lt;/version&gt;
+&lt;/dependency&gt;
+    </pre>
+
+</script>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 89152990048..36450cc4bfc 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -27,6 +27,7 @@ api_base_url: http://localhost:8080
   <script type="text/javascript" src="js/application.js"></script>
   <script type="text/javascript">
     var apiBaseUrl = "{{ page.api_base_url }}";
+    var projectId = "{{ site.projectId }}";
   </script>
   <meta name="google-site-verification" content="7qGntFPD9lWAVCtUu5U77v4l68PsTHf6xpzgjQv2j2M" />
 </head>
diff --git a/js/projectDocumentationWidget.js b/js/projectDocumentationWidget.js
index 21ea9a76bb1..ac6a7f28e7c 100644
--- a/js/projectDocumentationWidget.js
+++ b/js/projectDocumentationWidget.js
@@ -1,16 +1,32 @@
 window.Spring = window.Spring || {};
 
 Spring.ProjectDocumentationWidget = function() {
-  var projectId = $('[data-documentation-widget]').data('documentation-widget');
+  var quickStartEl = $('.js-quickstart-selector');
+  var documentationEl = $('.js-documentation-widget');
+
   var projectUrl = apiBaseUrl + "/projects/" + projectId;
   var promise = Spring.loadProject(projectUrl);
 
   promise.then(function(project) {
-    new Spring.ProjectDocumentationWidgetView({
-      el: '[data-documentation-widget]',
+    new Spring.WidgetView({
+      el: documentationEl,
       model: project,
       template: $("#project-documentation-widget-template").text()
     }).render();
+
+    var mavenWidget = new Spring.WidgetView({
+      el: $('.js-quickstart-maven-widget'),
+      model: project.releases[0],
+      template: $("#project-quickstart-maven-widget-template").text()
+    }).render();
+
+    new Spring.QuickStartSelectorView({
+      el: quickStartEl,
+      model: project,
+      template: $("#project-quickstart-selector-template").text(),
+      mavenWidget: mavenWidget
+    }).render();
+
   });
 };
 
@@ -23,7 +39,11 @@ Spring.loadProject = function(url) {
   });
 }
 
-Spring.Release = {
+Spring.Release = function(data) {
+  _.extend(this, data);
+}
+
+Spring.Release.prototype = {
   statusIconClass: function() {
     if (this.preRelease) {
       return "icon-projects-pre";
@@ -37,14 +57,15 @@ Spring.Release = {
 
 Spring.Project = function(data) {
   _.extend(this, data);
+  var self = this;
   this.releases = _.map(this.projectReleases, function(r) {
-    return _.extend(r, Spring.Release);
+    return new Spring.Release(r);
   });
 
   return this;
 };
 
-Spring.ProjectDocumentationWidgetView = Backbone.View.extend({
+Spring.WidgetView = Backbone.View.extend({
   initialize: function() {
     this.template = _.template(this.options.template);
     _.bindAll(this, "render");
@@ -57,4 +78,29 @@ Spring.ProjectDocumentationWidgetView = Backbone.View.extend({
     return this;
   }
 
+});
+
+Spring.QuickStartSelectorView = Backbone.View.extend({
+  events: {
+    "change .selector": "updateMaven"
+  },
+
+  initialize: function() {
+    this.template = _.template(this.options.template);
+    this.mavenWidget = this.options.mavenWidget;
+    _.bindAll(this, "render", "updateMaven");
+  },
+
+  render: function() {
+    this.$el.html(
+      this.template(this.model)
+    );
+    return this;
+  },
+
+  updateMaven: function() {
+    this.mavenWidget.model = this.model.releases[this.$('.selector :selected').val()];
+    this.mavenWidget.render();
+  }
+
 });
\ No newline at end of file
diff --git a/js/test/spec/ProjectSpec.js b/js/test/spec/ProjectSpec.js
index cbf657ce570..a2465b1ed7c 100644
--- a/js/test/spec/ProjectSpec.js
+++ b/js/test/spec/ProjectSpec.js
@@ -5,6 +5,7 @@ describe("Project", function () {
 
     beforeEach(function () {
       project = new Spring.Project({
+        id: "spring-data-jpa",
         name: "Spring Data JPA",
         projectReleases: [
           {fullName: "1.4.0.RC1", refDocUrl: "http://localhost/1.4.0/ref", apiDocUrl: "http://localhost/1.4.0/api", preRelease: true, current: false, supported: false},