diff --git a/src/main/resources/static/js/header.js b/src/main/resources/static/js/header.js
new file mode 100644
index 0000000..0b05bdf
--- /dev/null
+++ b/src/main/resources/static/js/header.js
@@ -0,0 +1,9 @@
+$(function () {
+    $("#free_link").on("click", function() {
+        $.get("/free-account");
+    });
+
+    $("#login_link").on("click", function() {
+        $.get("/login-account");
+    });
+});
diff --git a/src/main/resources/static/js/start.js b/src/main/resources/static/js/start.js
index 4cd1e20..999ef76 100644
--- a/src/main/resources/static/js/start.js
+++ b/src/main/resources/static/js/start.js
@@ -159,14 +159,6 @@ $(function () {
     };
     */
 
-    $("#free_link").on("click", function() {
-        $.get("/free-account");
-    });
-
-    $("#login_link").on("click", function() {
-        $.get("/login-account");
-    });
-
     var generatePackageName = function() {
         var groupId = $("#groupId").val();
         var artifactId = $("#artifactId").val();
diff --git a/src/main/resources/templates/header.mustache b/src/main/resources/templates/header.mustache
new file mode 100644
index 0000000..84c9d0e
--- /dev/null
+++ b/src/main/resources/templates/header.mustache
@@ -0,0 +1,36 @@
+<nav class="navbar header-nav" role="navigation" aria-label="main navigation">
+    <div class="small-container container">
+        <div class="navbar-brand">
+            <a href="https://azure.microsoft.com/en-us/" class="navbar-item azure-logo">
+                Microsoft Azure
+            </a>
+        </div>
+        <div class="navbar-menu is-active">
+            <div class="navbar-start">
+                <h1 class="navbar-item nav-title" >
+                    Azure Spring Cloud Playground
+                </h1>
+            </div>
+            <div class="navbar-end" id="free_link">
+                <a href="https://azure.microsoft.com/en-us/free/" title="Free account" target="_blank" >Free account</a>
+            </div>
+            <div class="navbar-end" id="login_link">
+                <a>Login</a>
+            </div>
+            <div class="navbar-end" id="user_dropdown">
+                <div class="navbar-item has-dropdown is-hoverable">
+                    <a class="truncate" id="logged_user">
+                    </a>
+                    <div class="navbar-dropdown" id="logout_link">
+                        <a class="navbar-item">
+                            Logout
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="navbar-end" id="about_link">
+                <a title="{{build.information}}">About</a>
+            </div>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.mustache b/src/main/resources/templates/home.mustache
index 43c95a2..7f81c4c 100644
--- a/src/main/resources/templates/home.mustache
+++ b/src/main/resources/templates/home.mustache
@@ -19,135 +19,16 @@
     </script>
 </head>
 <body>
-<nav class="navbar header-nav" role="navigation" aria-label="main navigation">
-    <div class="small-container container">
-        <div class="navbar-brand">
-            <a href="https://azure.microsoft.com/en-us/" class="navbar-item azure-logo">
-                Microsoft Azure
-            </a>
-        </div>
-        <div class="navbar-menu is-active">
-            <div class="navbar-start">
-                <h1 class="navbar-item nav-title" >
-                    Azure Spring Cloud Playground
-                </h1>
-            </div>
-            <div class="navbar-end" id="free_link">
-                <a href="https://azure.microsoft.com/en-us/free/" title="Free account" target="_blank" >Free account</a>
-            </div>
-            <div class="navbar-end" id="login_link">
-                <a>Login</a>
-            </div>
-            <div class="navbar-end" id="user_dropdown">
-                <div class="navbar-item has-dropdown is-hoverable">
-                    <a class="truncate" id="logged_user">
-                    </a>
-                    <div class="navbar-dropdown" id="logout_link">
-                        <a class="navbar-item">
-                            Logout
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <div class="navbar-end" id="about_link">
-                <a title="{{build.information}}">About</a>
-            </div>
-        </div>
-    </div>
-</nav>
-<div id="get-started">
-    <div class="tabs small-container container">
-        <ul>
-            <li id="generate-tab" class="is-active"><a>Generate Project</a></li>
-            <li id="build-run-tab"><a>Build & Run</a></li>
-        </ul>
-    </div>
-    <div id="generate-animation"  class="small-container container">
-        <video class="start-video" width="800px" height="430px" autoplay muted loop controls>
-            <source src="{{#linkTo}}/img/generate-project.mp4{{/linkTo}}" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
-    </div>
-    <div id="build-run-animation" class="hidden small-container container">
-        <video class="start-video" width="800px" height="430px" autoplay muted loop controls>
-            <source src="{{#linkTo}}/img/run.mp4{{/linkTo}}" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
-    </div>
-</div>
-<form id="form" action="/microservice.zip" method="get" role="form">
-    <div class="small-container container">
-        <p class="help is-danger app-error"></p>
-        <input id="baseDir" name="baseDir" type="hidden" value="{{artifactId.content}}">
+    {{> header}}
+    {{> homebody}}
 
-        <div class="row metadata-row">
-            <h4 class="title is-5">Generate your Spring Cloud application</h4>
-            <div class="columns">
-                <div class="column">
-                    <label for="groupId" class="label">{{groupId.title}}</label>
-                    <input tabindex="4" id="groupId" class="input" type="text" value="{{groupId.content}}"
-                           name="groupId">
-                </div>
-                <div class="column">
-                    <label for="artifactId" class="label">{{artifactId.title}}</label>
-                    <input tabindex="5" id="artifactId" class="input" type="text"
-                           value="{{artifactId.content}}"
-                           name="artifactId">
-                </div>
-                <div class="column hidden">
-                    <label for="name" class="label">{{name.title}}</label>
-                    <input tabindex="6" id="name" class="input" type="text" value="{{name.content}}"
-                           name="name">
-                </div>
-                <div class="column hidden">
-                    <label for="description" class="label">{{description.title}}</label>
-                    <input tabindex="7" id="description" class="input" type="text"
-                           value="{{description.content}}" name="description">
-                </div>
-                <div class="column hidden">
-                    <label for="packageName" class="label">{{packageName.title}}</label>
-                    <input tabindex="8" id="packageName" class="input" type="text"
-                           value="{{packageName.content}}"
-                           name="packageName">
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div id="services" class="columns">
-                {{#services.content}}
-                <div class="column is-half medium-top-margin">
-                    <h3 class="title is-6">Select {{name}}</h3>
-                    {{#content}}
-                    <div class="small-top-margin">
-                        <label class="checkbox module-checkbox">
-                            <input tabindex="13" type="checkbox" name="services" value="{{id}}">
-                            {{name}}
-                            <input class="hidden port-input" type="number" tabindex="14" name="{{portName}}" value="{{defaultPort}}">
-                            <p class="help-block">{{#description}}{{.}}{{/description}}</p>
-                        </label>
-                    </div>
-                    {{/content}}
-                </div>
-               {{/services.content}}
-            </div>
-        </div>
-        <div class="large-vertical-margin">
-            <p class="has-text-centered">
-                <button onclick="gtag('event', 'click', { event_category: 'Project Generation', event_action: 'click'});"
-                        tabindex="12" id="generate-project" type="submit" class="button" role="button">
-                    Generate Project
-                </button>
-            </p>
-            Want to <a id="config-port" class="is-7">configure your services ?</a>
-        </div>
-    </div>
-</form>
 <script src="{{#linkTo}}/js/jquery-3.1.1.min.js{{/linkTo}}"></script>
 <script src="{{#linkTo}}/js/typeahead.bundle.min.js{{/linkTo}}"></script>
 <script src="{{#linkTo}}/js/mousetrap.min.js{{/linkTo}}"></script>
 <script src="{{#linkTo}}/js/adal.min.js{{/linkTo}}"></script>
 <script src="{{#linkTo}}/js/all.js{{/linkTo}}"></script>
 <script src="{{#linkTo}}/js/start.js{{/linkTo}}"></script>
+<script src="{{#linkTo}}/js/header.js{{/linkTo}}"></script>
 <script src="{{#linkTo}}/js/auth.js{{/linkTo}}"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/homebody.mustache b/src/main/resources/templates/homebody.mustache
new file mode 100644
index 0000000..4f06801
--- /dev/null
+++ b/src/main/resources/templates/homebody.mustache
@@ -0,0 +1,87 @@
+<div id="get-started">
+    <div class="tabs small-container container">
+        <ul>
+            <li id="generate-tab" class="is-active"><a>Generate Project</a></li>
+            <li id="build-run-tab"><a>Build & Run</a></li>
+        </ul>
+    </div>
+    <div id="generate-animation"  class="small-container container">
+        <video class="start-video" width="800px" height="430px" autoplay muted loop controls>
+            <source src="{{#linkTo}}/img/generate-project.mp4{{/linkTo}}" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+    <div id="build-run-animation" class="hidden small-container container">
+        <video class="start-video" width="800px" height="430px" autoplay muted loop controls>
+            <source src="{{#linkTo}}/img/run.mp4{{/linkTo}}" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+</div>
+<form id="form" action="/microservice.zip" method="get" role="form">
+    <div class="small-container container">
+        <p class="help is-danger app-error"></p>
+        <input id="baseDir" name="baseDir" type="hidden" value="{{artifactId.content}}">
+
+        <div class="row metadata-row">
+            <h4 class="title is-5">Generate your Spring Cloud application</h4>
+            <div class="columns">
+                <div class="column">
+                    <label for="groupId" class="label">{{groupId.title}}</label>
+                    <input tabindex="4" id="groupId" class="input" type="text" value="{{groupId.content}}"
+                           name="groupId">
+                </div>
+                <div class="column">
+                    <label for="artifactId" class="label">{{artifactId.title}}</label>
+                    <input tabindex="5" id="artifactId" class="input" type="text"
+                           value="{{artifactId.content}}"
+                           name="artifactId">
+                </div>
+                <div class="column hidden">
+                    <label for="name" class="label">{{name.title}}</label>
+                    <input tabindex="6" id="name" class="input" type="text" value="{{name.content}}"
+                           name="name">
+                </div>
+                <div class="column hidden">
+                    <label for="description" class="label">{{description.title}}</label>
+                    <input tabindex="7" id="description" class="input" type="text"
+                           value="{{description.content}}" name="description">
+                </div>
+                <div class="column hidden">
+                    <label for="packageName" class="label">{{packageName.title}}</label>
+                    <input tabindex="8" id="packageName" class="input" type="text"
+                           value="{{packageName.content}}"
+                           name="packageName">
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div id="services" class="columns">
+                {{#services.content}}
+                    <div class="column is-half medium-top-margin">
+                        <h3 class="title is-6">Select {{name}}</h3>
+                        {{#content}}
+                            <div class="small-top-margin">
+                                <label class="checkbox module-checkbox">
+                                    <input tabindex="13" type="checkbox" name="services" value="{{id}}">
+                                    {{name}}
+                                    <input class="hidden port-input" type="number" tabindex="14" name="{{portName}}" value="{{defaultPort}}">
+                                    <p class="help-block">{{#description}}{{.}}{{/description}}</p>
+                                </label>
+                            </div>
+                        {{/content}}
+                    </div>
+                {{/services.content}}
+            </div>
+        </div>
+        <div class="large-vertical-margin">
+            <p class="has-text-centered">
+                <button onclick="gtag('event', 'click', { event_category: 'Project Generation', event_action: 'click'});"
+                        tabindex="12" id="generate-project" type="submit" class="button" role="button">
+                    Generate Project
+                </button>
+            </p>
+            Want to <a id="config-port" class="is-7">configure your services ?</a>
+        </div>
+    </div>
+</form>
\ No newline at end of file
