diff --git a/.gitignore b/.gitignore
index 3d875ce763b51f0256d876563772a986c194fc49..a0844333d4ed7be228c14ba00fbbb2cd62ef2c87 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,7 @@ dist/css/*
 !dist/css/.gitkeep
 dist/html/*
 !dist/html/.gitkeep
+
+
+# Files
+index.html
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000000000000000000000000000000000000..828da283660b0ebf15284286f76c48a2228be1ba
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "dist/lib/ldp-display"]
+	path = dist/lib/ldp-display
+	url = git@git.happy-dev.fr:happy-dev/ldp-display.git
diff --git a/Gruntfile.js b/Gruntfile.js
index 8ca4f25dc6d3087368f13a8e8d102b70aba8779e..431f3f802a8dbe5571e1f38ec67d23bfc4993a91 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -24,7 +24,7 @@ module.exports = function(grunt) {
       },
       dist: {
         src: ['src/html/header.html', 'src/html/*.html', '!src/html/footer.html', 'src/html/footer.html'],
-        dest: 'dist/html/index.html'
+        dest: 'index.html'
       }
     },
 
@@ -37,6 +37,8 @@ module.exports = function(grunt) {
     //},
 
     watch: {
+      files: ['src/**/*'],
+      tasks: ['concat', 'sass'],
     }
   });
 
diff --git a/README.md b/README.md
index fba774edca188d5018848db2fc4ef697811c5260..a773d9f334bfbf80aa8ac8f86bdfd72cda7d4c08 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
 **Requires**
  - Grunt CLI
+ - Install submodules
diff --git a/dist/html/.gitkeep b/dist/html/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/dist/lib/ldp-display b/dist/lib/ldp-display
new file mode 160000
index 0000000000000000000000000000000000000000..12191b9bce13e7d68eb5415de7871543cfa123f4
--- /dev/null
+++ b/dist/lib/ldp-display
@@ -0,0 +1 @@
+Subproject commit 12191b9bce13e7d68eb5415de7871543cfa123f4
diff --git a/dist/lib/webcomponents-loader.js b/dist/lib/webcomponents-loader.js
new file mode 100644
index 0000000000000000000000000000000000000000..ff0c6fd2c8cff08d730b72dd15297ebe1173c609
--- /dev/null
+++ b/dist/lib/webcomponents-loader.js
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+(function() {
+  'use strict';
+  // global for (1) existence means `WebComponentsReady` will file,
+  // (2) WebComponents.ready == true means event has fired.
+  window.WebComponents = window.WebComponents || {};
+  var name = 'webcomponents-loader.js';
+  // Feature detect which polyfill needs to be imported.
+  var polyfills = [];
+  if (!('import' in document.createElement('link'))) {
+    polyfills.push('hi');
+  }
+  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
+    (window.ShadyDOM && window.ShadyDOM.force)) {
+    polyfills.push('sd');
+  }
+  if (!window.customElements || window.customElements.forcePolyfill) {
+    polyfills.push('ce');
+  }
+  // NOTE: any browser that does not have template or ES6 features
+  // must load the full suite (called `lite` for legacy reasons) of polyfills.
+  if (!('content' in document.createElement('template')) || !window.Promise || !Array.from ||
+    // Edge has broken fragment cloning which means you cannot clone template.content
+    !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment)) {
+    polyfills = ['lite'];
+  }
+
+  if (polyfills.length) {
+    var script = document.querySelector('script[src*="' + name +'"]');
+    var newScript = document.createElement('script');
+    // Load it from the right place.
+    var replacement = 'webcomponents-' + polyfills.join('-') + '.js';
+    var url = script.src.replace(name, replacement);
+    newScript.src = url;
+    // NOTE: this is required to ensure the polyfills are loaded before
+    // *native* html imports load on older Chrome versions. This *is* CSP
+    // compliant since CSP rules must have allowed this script to run.
+    // In all other cases, this can be async.
+    if (document.readyState === 'loading' && ('import' in document.createElement('link'))) {
+      document.write(newScript.outerHTML);
+    } else {
+      document.head.appendChild(newScript);
+    }
+  } else {
+    // Ensure `WebComponentsReady` is fired also when there are no polyfills loaded.
+    // however, we have to wait for the document to be in 'interactive' state,
+    // otherwise a rAF may fire before scripts in <body>
+
+    var fire = function() {
+      requestAnimationFrame(function() {
+        window.WebComponents.ready = true;
+        document.dispatchEvent(new CustomEvent('WebComponentsReady', {bubbles: true}));
+      });
+    };
+
+    if (document.readyState !== 'loading') {
+      fire();
+    } else {
+      document.addEventListener('readystatechange', function wait() {
+        fire();
+        document.removeEventListener('readystatechange', wait);
+      });
+    }
+  }
+})();
diff --git a/package-lock.json b/package-lock.json
index 63f8e15631e013fb9c3a479e0f6c55ecf1423546..d00ac7624a4e8f908ec0d4bd71e3d2ca41b20f24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -193,6 +193,11 @@
         "hoek": "2.16.3"
       }
     },
+    "bootstrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
+      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 5e90b843730bb02f3d163880a0239a89121f2a03..69de5402b4f0de4d03c62775cc9f1dc6628cc65c 100644
--- a/package.json
+++ b/package.json
@@ -11,5 +11,8 @@
     "grunt-contrib-uglify": "~0.5.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-sass": "^2.1.0"
+  },
+  "dependencies": {
+    "bootstrap": "^4.0.0"
   }
 }
diff --git a/src/html/header.html b/src/html/header.html
index 9c53bb33f89a7f75de208792e733351e425a8214..c98523b6e40cb8314dfba6e56afe9774f1c24115 100644
--- a/src/html/header.html
+++ b/src/html/header.html
@@ -8,19 +8,19 @@
     <title>Happy Dev App</title>
 
     <!-- Font -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">-->
+    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
 
     <!-- Stylesheets -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="../css/hd-app.css" />
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="dist/css/hd-app.css" />
 
     <!-- Javascript -->
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
+    <script type="text/javascript" src="dist/lib/webcomponents-loader.js"></script>
 
-    <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-display.html" />
-    <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-router.html" />
-    <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-calendar.html" />
+    <link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
+    <link rel="import" href="dist/lib/ldp-display/ldp-router.html" />
+    <link rel="import" href="dist/lib/ldp-display/ldp-calendar.html" />
   </head>
 
   <body>
diff --git a/src/html/index.html b/src/html/index.html
index 31d0ea574df0afaa93aaed7ed5c505d4645bf39c..39176c97edb058fa31ecc18cacf88222eb24fa8e 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -12,7 +12,6 @@
         <ldp-route name="drive">Drive</ldp-route>
         <!-- <ldp-route name="home">Home</ldp-route> -->
       </ldp-router>
-      <div id="menu-placeholder" ><img src="https://dummyimage.com/220x300/666666/cccccc&text=Placeholder/20" alt="placeholder"></div>
     </div>
 
     <main id="ldp-root" class="col-md-10">