diff --git a/beesdoo_website_shift/static/src/css/design.css b/beesdoo_website_shift/static/src/css/design.css
deleted file mode 100644
index acfb05a..0000000
--- a/beesdoo_website_shift/static/src/css/design.css
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-    color: grey;
-}
diff --git a/beesdoo_website_shift/views/shift_website_templates.xml b/beesdoo_website_shift/views/shift_website_templates.xml
index 1bbd66a..e7dba77 100644
--- a/beesdoo_website_shift/views/shift_website_templates.xml
+++ b/beesdoo_website_shift/views/shift_website_templates.xml
@@ -16,15 +16,6 @@
     </record>
   </data>
 
-  <!-- Add the css stylesheet -->
-  <template id="assets_frontend" name="beesdoo_website_shift_website_assets"
-    inherit_id="website.assets_frontend">
-    <xpath expr="." position="inside">
-      <link rel="stylesheet" type="text/css"
-        href="/beesdoo_website_shift/static/src/css/design.css"/>
-    </xpath>
-  </template>
-
   <!-- Available Tasks Templates for Regular Workers -->
   <template 
     id="task_template" 
diff --git a/beesdoo_website_theme/__init__.py b/beesdoo_website_theme/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/beesdoo_website_theme/__openerp__.py b/beesdoo_website_theme/__openerp__.py
new file mode 100644
index 0000000..6a9b593
--- /dev/null
+++ b/beesdoo_website_theme/__openerp__.py
@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+{
+    'name': 'BEES coop Website Theme',
+
+    'summary': """
+        Apply BEES coop design rules.
+    """,
+    'description': """
+    """,
+
+    'author': 'Rémy Taymans',
+    'website': "https://github.com/beescoop/Obeesdoo",
+
+    'license': "AGPL-3",
+    'category': 'Themes',
+    'version': '9.0.0.1',
+
+    'depends': ['website'],
+
+    'data': [
+        'views/assets.xml',
+    ]
+}
diff --git a/beesdoo_website_theme/static/src/font/BebasNeue-Bold.ttf b/beesdoo_website_theme/static/src/font/BebasNeue-Bold.ttf
new file mode 100644
index 0000000..6fff605
Binary files /dev/null and b/beesdoo_website_theme/static/src/font/BebasNeue-Bold.ttf differ
diff --git a/beesdoo_website_theme/static/src/font/Roboto-Bold.ttf b/beesdoo_website_theme/static/src/font/Roboto-Bold.ttf
new file mode 100644
index 0000000..91ec212
Binary files /dev/null and b/beesdoo_website_theme/static/src/font/Roboto-Bold.ttf differ
diff --git a/beesdoo_website_theme/static/src/font/Roboto-BoldItalic.ttf b/beesdoo_website_theme/static/src/font/Roboto-BoldItalic.ttf
new file mode 100644
index 0000000..4013bf8
Binary files /dev/null and b/beesdoo_website_theme/static/src/font/Roboto-BoldItalic.ttf differ
diff --git a/beesdoo_website_theme/static/src/font/Roboto-Italic.ttf b/beesdoo_website_theme/static/src/font/Roboto-Italic.ttf
new file mode 100644
index 0000000..9f49ffd
Binary files /dev/null and b/beesdoo_website_theme/static/src/font/Roboto-Italic.ttf differ
diff --git a/beesdoo_website_theme/static/src/font/Roboto-Regular.ttf b/beesdoo_website_theme/static/src/font/Roboto-Regular.ttf
new file mode 100644
index 0000000..7d9a6c4
Binary files /dev/null and b/beesdoo_website_theme/static/src/font/Roboto-Regular.ttf differ
diff --git a/beesdoo_website_theme/static/src/less/beesdoo_website_design.less b/beesdoo_website_theme/static/src/less/beesdoo_website_design.less
new file mode 100644
index 0000000..7cceaaf
--- /dev/null
+++ b/beesdoo_website_theme/static/src/less/beesdoo_website_design.less
@@ -0,0 +1,170 @@
+/* Define fonts */
+@font-face
+{
+    font-family: Roboto;
+    src: url(/beesdoo_website_theme/static/src/font/Roboto-Regular.ttf);
+}
+
+@font-face
+{
+    font-family: Roboto;
+    src: url(/beesdoo_website_theme/static/src/font/Roboto-Bold.ttf);
+    font-weight: bold;
+}
+
+@font-face
+{
+    font-family: Roboto;
+    src: url(/beesdoo_website_theme/static/src/font/Roboto-Italic.ttf);
+    font-style: italic;
+}
+
+@font-face
+{
+    font-family: Roboto;
+    src: url(/beesdoo_website_theme/static/src/font/Roboto-BoldItalic.ttf);
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face
+{
+    font-family: BebasNeue;
+    src: url(/beesdoo_website_theme/static/src/font/BebasNeue-Bold.ttf);
+}
+
+
+/* Defines variables */
+@colors: #FCC300, #BD0926, #12235A, #D0B565, #E7511E, #4B67AA, #5CBEC3, #1A171B;
+//@nbcolors: length(@colors); /* For less >= 1.6 */
+@nbcolors: 8; /* For less <=1.4 */
+
+
+/* Main */
+body
+{
+    font-family: Roboto, sans;
+}
+
+
+/* Header menu */
+header
+{
+    .navbar-default
+    {
+        font-family: BebasNeue, sans;
+        // Enlarge the menu
+        padding-top: 20px;
+        padding-bottom: 20px;
+
+        .navbar-nav
+        {
+            font-size: 1.5em;
+
+            // Function to underline non active links
+            #menu()
+            {
+                padding-bottom: 10px;
+                border-bottom-width: 4px;
+                border-bottom-style: solid;
+            }
+
+            // Function to underline the active links
+            #menu-active()
+            {
+                padding-bottom: 6px;
+                border-bottom-width: 8px;
+                border-bottom-style: solid;
+            }
+
+            // Underline the link
+            a,
+            {
+                span:not(.caret)
+                {
+                    #menu
+                }
+
+                &:hover,
+                &:focus
+                {
+                    span:not(.caret)
+                    {
+                        #menu-active
+                    }
+                }
+            }
+
+            > .open > a,
+            > .open > a:hover,
+            > .open > a:focus
+            {
+                background-color: transparent;
+            }
+
+            .active
+            {
+                a,
+                a:hover,
+                a:focus
+                {
+                    background-color: transparent;
+                    span:not(.caret)
+                    {
+                        #menu-active
+                    }
+                }
+            }
+
+            // Last element is the name of the logged user.
+            // This should not be in the same font as other links
+            > li:last-child
+            {
+                font-family: Roboto;
+                font-size: 0.8em;
+            }
+
+            // Put different colors on each link of the menu
+            .menu-color-loop(@i) when (@i > 0)
+            {
+                .menu-color-loop((@i - 1));
+
+                > li:nth-child(@{nbcolors}n+@{i})
+                {
+                    a
+                    {
+                        span:not(.caret)
+                        {
+                            border-bottom-color: extract(@colors, @i);
+                        }
+                    }
+                }
+            }
+
+            .menu-color-loop(@nbcolors);
+        }
+    }
+}
+
+
+/* Titles */
+// Underline the title with colored bar
+h1
+{
+    color: black;
+    font-family: BebasNeue, sans;
+    text-align: center;
+    position: relative;
+    margin-bottom: 1em;
+}
+
+h1:after
+{
+    content: "";
+    background-color: extract(@colors, 1);
+    height: 6px;
+    width: 100px;
+    display: block;
+    margin: 0 auto;
+    margin-top: 0.5em;
+}
diff --git a/beesdoo_website_theme/views/assets.xml b/beesdoo_website_theme/views/assets.xml
new file mode 100644
index 0000000..4b8102a
--- /dev/null
+++ b/beesdoo_website_theme/views/assets.xml
@@ -0,0 +1,10 @@
+<openerp>
+  <!-- We add the css stylesheet -->
+  <template id="assets_frontend" name="beesdoo_website_theme_website_assets"
+    inherit_id="website.assets_frontend">
+    <xpath expr="." position="inside">
+      <link rel="stylesheet"
+        href="/beesdoo_website_theme/static/src/less/beesdoo_website_design.less"/>
+    </xpath>
+  </template>
+</openerp>