diff --git a/css/style.css b/css/style.css
index e69de29..b708e5f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,213 @@
+/**
+ * GLOBAL
+ * TEXT SELECT
+ * CLEARFIX
+ * FONT FACES
+ * ELEMENTS
+ * USEFUL CLASSES
+ * HEADER
+ * NAVIGATION
+ * FOOTER
+ * GENERAL
+ * MEDIA QUERIES
+ */
+
+
+/**
+ * GLOBAL
+ * -----------------------------------------------------------------------------
+ */
+ * {
+     -moz-box-sizing: border-box;
+     -webkit-box-sizing: border-box;
+     box-sizing: border-box;
+ }
+ html {
+     font-size: 16px;
+     overflow-x: hidden;
+ }
+ body {
+     background: #fff;
+     color: #131313;
+     font-family: 'Helvetica Neue', Helvetica, sans-serif;
+     font-size: 100%;
+     font-weight: 300;
+     line-height: 1.3;
+     overflow-x: hidden;
+     position: relative;
+     /**/
+     -webkit-font-smoothing: antialiased;
+ }
+ /**
+  * TEXT SELECT
+  * -----------------------------------------------------------------------------
+  */
+ ::-moz-selection {
+     background: red;
+     color: #fff;
+     text-shadow: none;
+ }
+ ::selection {
+     background: red;
+     color: #fff;
+     text-shadow: none;
+ }
+ ::-moz-selection {
+     background: red;
+     color: #fff;
+     text-shadow: none;
+ }
+ /**
+  * CLEARFIX
+  * -----------------------------------------------------------------------------
+  */
+ .clearfix:after {
+     clear: both;
+     content: " ";
+     display: block;
+     font-size: 0;
+     height: 0;
+     visibility: hidden;
+ }
+ .clearfix {
+     display: inline-block;
+ }
+ * html .clearfix {
+     height: 1%;
+ }
+ .clearfix {
+     display: block;
+ }
+ /**
+  * FONT FACES
+  * -----------------------------------------------------------------------------
+  */
+ /**
+  * ELEMENTS
+  * -----------------------------------------------------------------------------
+  */
+ p {
+ 	margin: 0 0 15px;
+ }
+ ul {
+ 	list-style: disc outside;
+ 	margin: 0 0 15px;
+ 	padding: 0 0 0 15px;
+ }
+ ol {
+ 	list-style: outside decimal;
+ 	margin: 0 0 15px 20px;
+ 	padding: 0;
+ }
+ img {
+ 	height: auto;
+ 	max-width: 100%;
+ }
+ em {
+ 	font-style: italic;
+ }
+ strong {
+ 	font-weight: bold;
+ }
+ a:link {
+ 	color: red;
+ 	font-weight: 600;
+ 	text-decoration: underline;
+ }
+ a:visited {
+ 	color: red;
+ 	font-weight: 300;
+ }
+ a:hover,a:active,a:focus {
+ 	text-decoration: none;
+ }
+ ::-webkit-input-placeholder {
+ opacity:1;
+ }
+ :-moz-placeholder {
+ opacity:1;
+ }
+ ::-moz-placeholder {
+ opacity:1;
+ }
+ :-ms-input-placeholder {
+ opacity:1;
+ }
+ td {
+     vertical-align: top;
+ }
+ /**
+  * USEFUL CLASSES
+  * -----------------------------------------------------------------------------
+  */
+
+ /*
+ STRUCTURE
+ */
+ .centred {
+     margin: 0 auto;
+     max-width: 1200px;
+     padding: 0 15px;
+ }
+ .table {
+     display: table;
+     table-layout: fixed;
+     width: 100%;
+ }
+.table-row {
+    display: table-row;
+}
+ .table-cell {
+     display: table-cell;
+     vertical-align: top;
+ }
+.vmid {
+    vertical-align: middle;
+}
+ .relative {
+     position: relative;
+ }
+ /*
+ TEXT
+ */
+ .font-light {
+     font-weight: 300;
+ }
+ .font-normal {
+     font-weight: normal;
+ }
+ .font-medium {
+     font-weight: 600;
+ }
+ .font-heavy {
+     font-weight: 900;
+ }
+ .font-bold {
+     font-weight: bold;
+ }
+ .text-center {
+     text-align: center;
+ }
+ .text-right {
+     text-align: right;
+ }
+/**
+ * HEADER
+ * -----------------------------------------------------------------------------
+ */
+/**
+ * NAVIGATION
+ * -----------------------------------------------------------------------------
+ */
+/**
+* FOOTER
+* -----------------------------------------------------------------------------
+*/
+/**
+* GENERAL
+* -----------------------------------------------------------------------------
+*/
+/**
+ * MEDIA QUERIES
+ * -----------------------------------------------------------------------------
+ */
diff --git a/js/app/controllers/soundboard.js b/js/app/controllers/soundboard.js
index f109341..717609d 100644
--- a/js/app/controllers/soundboard.js
+++ b/js/app/controllers/soundboard.js
@@ -1,14 +1,17 @@
 define(
     'controllers/soundboard',
     [
-        'marionette'
+        'marionette',
+        'views/soundboard'
     ],
-    function (Marionette) {
+    function (Marionette, SoundboardView) {
         "use strict";
 
         var SoundboardController = Marionette.Controller.extend({
             index: function() {
+                var currentView = App.getRegion('app').currentView;
 
+                currentView.showChildView('main', new SoundboardView());
             }
         });
 
diff --git a/js/app/templates/main.hbs b/js/app/templates/main.hbs
index 2686648..326ea9c 100644
--- a/js/app/templates/main.hbs
+++ b/js/app/templates/main.hbs
@@ -1,3 +1,11 @@
-<main>
+<header class="site-header" role="banner">
+
+</header>
+
+<main class="site-main" role="main">
     
 </main>
+
+<footer class="site-footer" role="contentinfo">
+
+</footer>
diff --git a/js/app/templates/search.hbs b/js/app/templates/search.hbs
new file mode 100644
index 0000000..7947fb2
--- /dev/null
+++ b/js/app/templates/search.hbs
@@ -0,0 +1,4 @@
+<form action="index.html" method="post">
+    <input type="text" name="s" value="">
+    <input type="submit" name="submit" value="Rechercher">
+</form>
diff --git a/js/app/templates/soundboard.hbs b/js/app/templates/soundboard.hbs
new file mode 100644
index 0000000..cad3726
--- /dev/null
+++ b/js/app/templates/soundboard.hbs
@@ -0,0 +1,7 @@
+<div id="search">
+    
+</div>
+
+<div id="list">
+
+</div>
diff --git a/js/app/templates/sounds.hbs b/js/app/templates/sounds.hbs
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/js/app/templates/sounds.hbs
@@ -0,0 +1 @@
+
diff --git a/js/app/views/search.js b/js/app/views/search.js
new file mode 100644
index 0000000..da96a32
--- /dev/null
+++ b/js/app/views/search.js
@@ -0,0 +1,15 @@
+define(
+    'views/search',
+    [
+        'marionette',
+        'hbs!templates/search'
+    ],
+    function (Marionette, SoundSearchTemplate) {
+        "use strict";
+
+        var SoundSearchView = Marionette.LayoutView.extend({
+            template: SoundSearchTemplate
+        });
+
+        return SoundSearchView;
+});
diff --git a/js/app/views/soundboard.js b/js/app/views/soundboard.js
new file mode 100644
index 0000000..b11b0ef
--- /dev/null
+++ b/js/app/views/soundboard.js
@@ -0,0 +1,27 @@
+define(
+    'views/soundboard',
+    [
+        'marionette',
+        'views/search',
+        'views/sounds',
+        'hbs!templates/soundboard'
+    ],
+    function (Marionette, SoundSearchView, SoundListView, SoundboardTemplate) {
+        "use strict";
+
+        var SoundboardView = Marionette.LayoutView.extend({
+            template: SoundboardTemplate,
+            regions: {
+                'search': '#search',
+                'list': '#list'
+            },
+            onShow: function() {
+
+                this.showChildView('search', new SoundSearchView());
+                this.showChildView('list', new SoundListView());
+
+            }
+        });
+
+        return SoundboardView;
+});
diff --git a/js/app/views/sounds.js b/js/app/views/sounds.js
new file mode 100644
index 0000000..f924a0b
--- /dev/null
+++ b/js/app/views/sounds.js
@@ -0,0 +1,15 @@
+define(
+    'views/sounds',
+    [
+        'marionette',
+        'hbs!templates/sounds'
+    ],
+    function (Marionette, SoundListTemplate) {
+        "use strict";
+
+        var SoundListView = Marionette.LayoutView.extend({
+            template: SoundListTemplate
+        });
+
+        return SoundListView;
+});
diff --git a/sounds.json b/sounds.json
new file mode 100644
index 0000000..4def658
--- /dev/null
+++ b/sounds.json
@@ -0,0 +1,12 @@
+[
+    {
+        "title": "C'est pas faux",
+        "character": "Perceval",
+        "file": "cest_pas_faux.mp3"
+    },
+    {
+        "title": "Cuillère",
+        "character": "Le Roi Burgonde",
+        "file": "cuillere.mp3"
+    }
+]
diff --git a/sounds/empty b/sounds/empty
new file mode 100644
index 0000000..e69de29