diff --git a/beesdoo_website_shift/__manifest__.py b/beesdoo_website_shift/__manifest__.py
index e2873e3..08fbdf7 100644
--- a/beesdoo_website_shift/__manifest__.py
+++ b/beesdoo_website_shift/__manifest__.py
@@ -1,11 +1,9 @@
-# -*- coding: utf-8 -*-
-
-# Copyright 2017-2018 Rémy Taymans <remytaymans@gmail.com>
+# Copyright 2017-2020 Coop IT Easy (http://coopiteasy.be)
+#   Rémy Taymans <remy@coopiteasy.be>
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 {
     'name': 'BEES coop Website Shift',
-
     'summary': """
         Show available shifts for regular and irregular workers on the
         website and let workers manage their shifts with an
@@ -13,20 +11,16 @@
     """,
     'description': """
     """,
-
-    'author': 'Rémy Taymans',
-    'license': 'AGPL-3',
-    'version': '9.0.2.3.1',
-    'website': "https://github.com/beescoop/Obeesdoo",
-
-    'category': 'Cooperative management',
-
-    'depends': ['website', 'beesdoo_shift'],
-
-    'data': [
-        'data/res_config_data.xml',
-        'views/shift_website_templates.xml',
-        'views/my_shift_website_templates.xml',
-        'views/res_config_views.xml',
-    ]
+    "author": "Coop IT Easy SCRLfs",
+    "license": "AGPL-3",
+    "version": "12.0.1.0.0",
+    "website": "https://github.com/beescoop/Obeesdoo",
+    "category": "Cooperative management",
+    "depends": ["portal", "website", "beesdoo_shift"],
+    "data": [
+        "data/res_config_data.xml",
+        "views/shift_website_templates.xml",
+        "views/my_shift_website_templates.xml",
+        "views/res_config_views.xml",
+    ],
 }
diff --git a/beesdoo_website_shift/controllers/main.py b/beesdoo_website_shift/controllers/main.py
index aa92173..2af24fb 100644
--- a/beesdoo_website_shift/controllers/main.py
+++ b/beesdoo_website_shift/controllers/main.py
@@ -1,6 +1,5 @@
-# -*- coding: utf8 -*-
-
-# Copyright 2017-2018 Rémy Taymans <remytaymans@gmail.com>
+# Copyright 2017-2020 Coop IT Easy (http://coopiteasy.be)
+#   Rémy Taymans <remy@coopiteasy.be>
 # Copyright 2017-2018 Thibault François
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
@@ -141,23 +140,18 @@ class WebsiteShiftController(http.Controller):
         # Get the shift
         shift = request.env['beesdoo.shift.shift'].sudo().browse(shift_id)
         # Get config
-        irregular_enable_sign_up = literal_eval(request.env['ir.config_parameter'].get_param(
-            'beesdoo_website_shift.irregular_enable_sign_up'))
+        irregular_enable_sign_up = request.website.irregular_enable_sign_up
         # Set start time limit as defined in beesdoo_shift settings
-        setting = int(
-            request.env["ir.config_parameter"].get_param(
-                "beesdoo_shift.attendance_sheet_generation_interval"
-            )
-        )
-        start_time_limit = datetime.now() + timedelta(minutes=setting)
-        shift_start_time = fields.Datetime.from_string(shift.start_time)
+        # TODO: Move this into the attendance_sheet module
+        # setting = request.website.attendance_sheet_generation_interval
+        start_time_limit = datetime.now()  # + timedelta(minutes=setting)
         request.session['success'] = False
 
         if (irregular_enable_sign_up
                 and self.user_can_subscribe()
                 and shift
                 and shift.state == "open"
-                and shift_start_time > start_time_limit
+                and shift.start_time > start_time_limit
                 and not shift.worker_id):
             shift.worker_id = cur_user.partner_id
             request.session['success'] = True
@@ -192,11 +186,7 @@ class WebsiteShiftController(http.Controller):
         task_templates = template.sudo().search([], order="planning_id, day_nb_id, start_time")
 
         # Get config
-        regular_highlight_rule = literal_eval(
-            request.env['ir.config_parameter'].get_param(
-                'beesdoo_website_shift.regular_highlight_rule'
-            )
-        )
+        regular_highlight_rule = request.website.regular_highlight_rule
 
         task_tpls_data = []
         for task_tpl in task_templates:
@@ -220,8 +210,7 @@ class WebsiteShiftController(http.Controller):
         Return template variables for 'beesdoo_website_shift.my_shift_irregular_worker' template
         """
         # Get config
-        irregular_enable_sign_up = literal_eval(request.env['ir.config_parameter'].get_param(
-            'beesdoo_website_shift.irregular_enable_sign_up'))
+        irregular_enable_sign_up = request.website.irregular_enable_sign_up
 
         # Create template context
         template_context = {}
@@ -241,11 +230,11 @@ class WebsiteShiftController(http.Controller):
             del request.session['success']
 
         # Add setting for subscription allowed time
-        subscription_time_limit = int(
-            request.env["ir.config_parameter"].get_param(
-                "beesdoo_shift.attendance_sheet_generation_interval"
-            )
-        )
+        # TODO: move this to the attendance_sheet module
+        # subscription_time_limit = (
+        #     request.website.attendance_sheet_generation_interval
+        # )
+        subscription_time_limit = 0
         template_context['subscription_time_limit'] = subscription_time_limit
 
         return template_context
@@ -310,18 +299,9 @@ class WebsiteShiftController(http.Controller):
         )
 
         # Get config
-        irregular_shift_limit = int(
-            request.env['ir.config_parameter']
-            .get_param('beesdoo_website_shift.irregular_shift_limit')
-        )
-        highlight_rule_pc = int(
-            request.env['ir.config_parameter']
-            .get_param('beesdoo_website_shift.highlight_rule_pc')
-        )
-        hide_rule = int(
-            request.env['ir.config_parameter']
-            .get_param('beesdoo_website_shift.hide_rule')
-        ) / 100.0
+        irregular_shift_limit = request.website.irregular_shift_limit
+        highlight_rule_pc = request.website.highlight_rule_pc
+        hide_rule = request.website.hide_rule / 100.0
 
         # Grouby task_template_id, if no task_template_id is specified
         # then group by start_time, if no start_time specified sort by
@@ -405,8 +385,7 @@ class WebsiteShiftController(http.Controller):
                 )
 
             # Get config
-            regular_next_shift_limit = int(request.env['ir.config_parameter'].get_param(
-                'beesdoo_website_shift.regular_next_shift_limit'))
+            regular_next_shift_limit = request.website.regular_next_shift_limit
             shift_period = int(request.env['ir.config_parameter'].get_param(
                 'beesdoo_website_shift.shift_period'))
 
@@ -426,11 +405,11 @@ class WebsiteShiftController(http.Controller):
                 shift.revert_info = main_shift.revert_info
                 # Set new date
                 shift.start_time = self.add_days(
-                    fields.Datetime.from_string(main_shift.start_time),
+                    main_shift.start_time,
                     days=i * shift_period
                 )
                 shift.end_time = self.add_days(
-                    fields.Datetime.from_string(main_shift.end_time),
+                    main_shift.end_time,
                     days=i * shift_period
                 )
                 # Add the fictive shift to the list of shift
@@ -450,11 +429,9 @@ class WebsiteShiftController(http.Controller):
         # Get config
         past_shift_limit = 0
         if self.is_user_irregular():
-            past_shift_limit = int(request.env['ir.config_parameter'].get_param(
-                'beesdoo_website_shift.irregular_past_shift_limit'))
+            past_shift_limit = request.website.irregular_past_shift_limit
         if self.is_user_regular():
-            past_shift_limit = int(request.env['ir.config_parameter'].get_param(
-                'beesdoo_website_shift.regular_past_shift_limit'))
+            past_shift_limit = request.website.regular_past_shift_limit
         # Get shifts where user was subscribed
         now = datetime.now()
         if past_shift_limit > 0:
diff --git a/beesdoo_website_shift/data/res_config_data.xml b/beesdoo_website_shift/data/res_config_data.xml
index f84681e..2d34b78 100644
--- a/beesdoo_website_shift/data/res_config_data.xml
+++ b/beesdoo_website_shift/data/res_config_data.xml
@@ -5,38 +5,6 @@
 -->
 <odoo>
   <data noupdate="1">
-    <record id="beesdoo_website_shift.irregular_shift_limit" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.irregular_shift_limit</field>
-      <field name="value">0</field>
-    </record>
-    <record id="beesdoo_website_shift.highlight_rule_pc" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.highlight_rule_pc</field>
-      <field name="value">30</field>
-    </record>
-    <record id="beesdoo_website_shift.hide_rule" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.hide_rule</field>
-      <field name="value">20</field>
-    </record>
-    <record id="beesdoo_website_shift.irregular_enable_sign_up" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.irregular_enable_sign_up</field>
-      <field name="value">True</field>
-    </record>
-    <record id="beesdoo_website_shift.irregular_past_shift_limit" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.irregular_past_shift_limit</field>
-      <field name="value">10</field>
-    </record>
-    <record id="beesdoo_website_shift.regular_past_shift_limit" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.regular_past_shift_limit</field>
-      <field name="value">10</field>
-    </record>
-    <record id="beesdoo_website_shift.regular_next_shift_limit" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.regular_next_shift_limit</field>
-      <field name="value">13</field>
-    </record>
-    <record id="beesdoo_website_shift.regular_highlight_rule" model="ir.config_parameter">
-      <field name="key">beesdoo_website_shift.regular_highlight_rule</field>
-      <field name="value">20</field>
-    </record>
     <record id="beesdoo_website_shift.shift_period" model="ir.config_parameter">
       <field name="key">beesdoo_website_shift.shift_period</field>
       <field name="value">28</field>
diff --git a/beesdoo_website_shift/migrations/9.0.2.1.1/post-migrate.py b/beesdoo_website_shift/migrations/9.0.2.1.1/post-migrate.py
deleted file mode 100644
index 6068a9b..0000000
--- a/beesdoo_website_shift/migrations/9.0.2.1.1/post-migrate.py
+++ /dev/null
@@ -1,11 +0,0 @@
-# coding: utf-8
-
-
-def migrate(cr, version):
-    """Create a sequence for beesdoo_website_shift_config_settings."""
-    cr.execute(
-        """
-        CREATE SEQUENCE IF NOT EXISTS
-        beesdoo_website_shift_config_settings_id_seq
-        """
-    )
diff --git a/beesdoo_website_shift/models/__init__.py b/beesdoo_website_shift/models/__init__.py
index ab480f8..2f62010 100644
--- a/beesdoo_website_shift/models/__init__.py
+++ b/beesdoo_website_shift/models/__init__.py
@@ -1 +1,2 @@
+from . import website
 from . import res_config
diff --git a/beesdoo_website_shift/models/res_config.py b/beesdoo_website_shift/models/res_config.py
index f4e408b..dbc8382 100644
--- a/beesdoo_website_shift/models/res_config.py
+++ b/beesdoo_website_shift/models/res_config.py
@@ -1,136 +1,45 @@
-# -*- coding: utf-8 -*-
-
-# Copyright 2017-2018 Rémy Taymans <remytaymans@gmail.com>
+# Copyright 2017-2020 Rémy Taymans <remytaymans@gmail.com>
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 from ast import literal_eval
 from odoo import fields, models, api
 
-PARAMS = [
-    ('irregular_shift_limit', 'beesdoo_website_shift.irregular_shift_limit'),
-    ('highlight_rule_pc', 'beesdoo_website_shift.highlight_rule_pc'),
-    ('hide_rule', 'beesdoo_website_shift.hide_rule'),
-    ('irregular_enable_sign_up',
-     'beesdoo_website_shift.irregular_enable_sign_up'),
-    ('irregular_past_shift_limit',
-     'beesdoo_website_shift.irregular_past_shift_limit'),
-    ('regular_past_shift_limit',
-     'beesdoo_website_shift.regular_past_shift_limit'),
-    ('regular_next_shift_limit',
-     'beesdoo_website_shift.regular_next_shift_limit'),
-    ('regular_highlight_rule',
-     'beesdoo_website_shift.regular_highlight_rule'),
-]
-
 
 class WebsiteShiftConfigSettings(models.TransientModel):
-    _name = 'beesdoo.website.shift.config.settings'
     _inherit = 'res.config.settings'
 
     # Irregular worker settings
     irregular_shift_limit = fields.Integer(
-        help="Maximum shift that will be shown"
+        related='website_id.irregular_shift_limit',
+        readonly=False,
     )
     highlight_rule_pc = fields.Integer(
-        help="Treshold (in %) of available space in a shift that trigger the "
-             "highlight of the shift"
+        related='website_id.highlight_rule_pc',
+        readonly=False,
     )
     hide_rule = fields.Integer(
-        help="Treshold ((available space)/(max space)) in percentage of "
-             "available space under wich the shift is hidden"
+        related='website_id.highlight_rule_pc',
+        readonly=False,
     )
     irregular_enable_sign_up = fields.Boolean(
-        help="Enable shift sign up for irregular worker"
+        related='website_id.irregular_enable_sign_up',
+        readonly=False,
     )
     irregular_past_shift_limit = fields.Integer(
-        help="Maximum past shift that will be shown for irregular worker"
+        related='website_id.irregular_past_shift_limit',
+        readonly=False,
     )
 
     # Regular worker settings
     regular_past_shift_limit = fields.Integer(
-        help="Maximum past shift that will be shown for regular worker"
+        related='website_id.regular_past_shift_limit',
+        readonly=False,
     )
     regular_next_shift_limit = fields.Integer(
-        help="Maximun number of next shift that will be shown"
+        related='website_id.regular_next_shift_limit',
+        readonly=False,
     )
     regular_highlight_rule = fields.Integer(
-        help="Treshold (in %) of available space in a shift that trigger the "
-        "the highlight of a shift template."
+        related='website_id.regular_highlight_rule',
+        readonly=False,
     )
-
-    @api.multi
-    def set_params(self):
-        self.ensure_one()
-
-        for field_name, key_name in PARAMS:
-            value = getattr(self, field_name)
-            self.env['ir.config_parameter'].set_param(key_name, str(value))
-
-    @api.multi
-    def get_default_irregular_shift_limit(self):
-        return {
-            'irregular_shift_limit': int(
-                self.env['ir.config_parameter']
-                .get_param("beesdoo_website_shift.irregular_shift_limit")
-            )
-        }
-
-    @api.multi
-    def get_default_highlight_rule_pc(self):
-        return {
-            'highlight_rule_pc': int(
-                self.env['ir.config_parameter']
-                .get_param("beesdoo_website_shift.highlight_rule_pc")
-            )
-        }
-
-    @api.multi
-    def get_default_hide_rule(self):
-        return {
-            'hide_rule': int(self.env['ir.config_parameter'].get_param(
-                'beesdoo_website_shift.hide_rule'))
-        }
-
-    @api.multi
-    def get_default_irregular_shift_sign_up(self):
-        return {
-            'irregular_enable_sign_up':
-                literal_eval(self.env['ir.config_parameter'].get_param(
-                    'beesdoo_website_shift.irregular_enable_sign_up'))
-        }
-
-    @api.multi
-    def get_default_irregular_past_shift_limit(self):
-        return {
-            'irregular_past_shift_limit': int(
-                self.env['ir.config_parameter']
-                .get_param("beesdoo_website_shift.irregular_past_shift_limit")
-            )
-        }
-
-    @api.multi
-    def get_default_regular_past_shift_limit(self):
-        return {
-            'regular_past_shift_limit': int(
-                self.env['ir.config_parameter']
-                .get_param('beesdoo_website_shift.regular_past_shift_limit')
-            )
-        }
-
-    @api.multi
-    def get_default_regular_next_shift_limit(self):
-        return {
-            'regular_next_shift_limit': int(
-                self.env['ir.config_parameter']
-                .get_param('beesdoo_website_shift.regular_next_shift_limit')
-            )
-        }
-
-    @api.multi
-    def get_default_regular_highlight_rule(self):
-        return {
-            'regular_highlight_rule': int(
-                self.env['ir.config_parameter']
-                .get_param('beesdoo_website_shift.regular_highlight_rule')
-            )
-        }
diff --git a/beesdoo_website_shift/models/website.py b/beesdoo_website_shift/models/website.py
new file mode 100644
index 0000000..7e2f3b6
--- /dev/null
+++ b/beesdoo_website_shift/models/website.py
@@ -0,0 +1,47 @@
+# Copyright 2017-2020 Rémy Taymans <remytaymans@gmail.com>
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo import fields, models
+
+
+class Website(models.Model):
+    _inherit = 'website'
+
+    # Irregular worker settings
+    irregular_shift_limit = fields.Integer(
+        default=0,
+        help="Maximum shift that will be shown"
+    )
+    highlight_rule_pc = fields.Integer(
+        default=30,
+        help="Treshold (in %) of available space in a shift that trigger the "
+             "highlight of the shift"
+    )
+    hide_rule = fields.Integer(
+        default=20,
+        help="Treshold ((available space)/(max space)) in percentage of "
+             "available space under wich the shift is hidden"
+    )
+    irregular_enable_sign_up = fields.Boolean(
+        default=True,
+        help="Enable shift sign up for irregular worker"
+    )
+    irregular_past_shift_limit = fields.Integer(
+        default=10,
+        help="Maximum past shift that will be shown for irregular worker"
+    )
+
+    # Regular worker settings
+    regular_past_shift_limit = fields.Integer(
+        default=10,
+        help="Maximum past shift that will be shown for regular worker"
+    )
+    regular_next_shift_limit = fields.Integer(
+        default=13,
+        help="Maximun number of next shift that will be shown"
+    )
+    regular_highlight_rule = fields.Integer(
+        default=20,
+        help="Treshold (in %) of available space in a shift that trigger the "
+        "the highlight of a shift template."
+    )
diff --git a/beesdoo_website_shift/views/my_shift_website_templates.xml b/beesdoo_website_shift/views/my_shift_website_templates.xml
index 9a6c102..42fc996 100644
--- a/beesdoo_website_shift/views/my_shift_website_templates.xml
+++ b/beesdoo_website_shift/views/my_shift_website_templates.xml
@@ -1,952 +1,705 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
-     Copyright 2017-2018 Rémy Taymans <remytaymans@gmail.com>
+     Copyright 2017-2020 Rémy Taymans <remytaymans@gmail.com>
      License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 -->
 <odoo>
 
-  <!-- Add menu entries -->
-  <template id="my_shift_link" name="Link to frontend portal" inherit_id="portal.frontend_layout">
-    <xpath expr="//a[@id='o_logout']" position="before">
-      <a href="/my/shift" role="menuitem" class="dropdown-item">My Shift</a>
-    </xpath>
-  </template>
-
-  <!-- Reusable templates -->
-  <template
-    id="my_shift_title"
-    name="My Shift Title">
-
-    <div class="oe_structure"/>
-
-    <section class="wrap">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <h1 class="text-center">
-              Your shifts
-            </h1>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
-
-  </template>
-
-  <template
-    id="my_shift_worker_status_title"
-    name="My Shift Worker Status Title">
-
-    <div class="oe_structure"/>
-
-    <section class="wrap">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <h2>
-              Worker status
-              <span t-att-class="'label %s pull-right' % ('label-success' if status.can_shop else 'label-danger',)">
+    <!-- Add menu entries -->
+    <template id="my_shift_link" name="Link to frontend portal" inherit_id="portal.frontend_layout">
+        <xpath expr="//a[@id='o_logout']" position="before">
+            <a href="/my/shift" class="dropdown-item" role="menuitem">My Shift</a>
+        </xpath>
+    </template>
+
+    <!-- Reusable templates -->
+    <template
+        id="my_shift_title"
+        name="My Shift Title">
+
+        <h1>
+            Your shifts
+        </h1>
+    </template>
+
+    <template
+        id="my_shift_worker_status_title"
+        name="My Shift Worker Status Title">
+
+        <h2>
+            Worker status
+            <span t-att-class="'badge %s pull-right' % ('badge-success' if status.can_shop else 'badge-danger',)">
                 <span class="fa fa-shopping-cart"></span>
                 <t t-if="status.can_shop">
-                  <span class="fa fa-check"></span>
+                    <span class="fa fa-check"></span>
                 </t>
                 <t t-if="not status.can_shop">
-                  <span class="fa fa-times"></span>
+                    <span class="fa fa-times"></span>
                 </t>
-              </span>
-            </h2>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
+            </span>
+        </h2>
 
-  </template>
+    </template>
 
-  <template
-    id="my_shift_worker_status_common"
-    name="My Shift Worker Status Common">
+    <template
+        id="my_shift_worker_status_common"
+        name="My Shift Worker Status Common">
 
-    <p>
-      <label>Working Mode:</label>
-      <t t-esc="dict(status.fields_get(allfields=['working_mode'])['working_mode']['selection'])[status.working_mode]"/>
-    </p>
+        <p>
+            <label class="font-weight-bold">Working Mode:</label>
+            <t t-esc="dict(status.fields_get(allfields=['working_mode'])['working_mode']['selection'])[status.working_mode]"/>
+        </p>
 
-    <p t-if="status.super">
-      You are a Super Cooperator
-    </p>
+        <p t-if="status.super">
+            You are a Super Cooperator
+        </p>
 
-    <p>
-      <label>Status:</label>
-      <t t-esc="dict(status.fields_get(allfields=['status'])['status']['selection'])[status.status]"/>
-    </p>
+        <p>
+            <label class="font-weight-bold">Status:</label>
+            <t t-esc="dict(status.fields_get(allfields=['status'])['status']['selection'])[status.status]"/>
+        </p>
 
-    <p t-if="status.holiday_start_time and status.holiday_start_time > status.today or status.status == 'holiday'">
-      <label>Begin of Holiday:</label>
-      <t t-esc="time.strftime('%A %d %B %Y', time.strptime(status.holiday_start_time, '%Y-%m-%d'))"/>
-    </p>
+        <p t-if="status.holiday_start_time and status.holiday_start_time > status.today or status.status == 'holiday'">
+            <label class="font-weight-bold">Begin of Holiday:</label>
+            <t t-esc="status.holiday_start_time"/>
+        </p>
 
-    <p t-if="status.holiday_end_time and status.holiday_end_time > status.today or status.status == 'holiday'">
-      <label>End of Holiday:</label>
-      <t t-esc="time.strftime('%A %d %B %Y', time.strptime(status.holiday_end_time, '%Y-%m-%d'))"/>
-    </p>
+        <p t-if="status.holiday_end_time and status.holiday_end_time > status.today or status.status == 'holiday'">
+            <label class="font-weight-bold">End of Holiday:</label>
+            <t t-esc="status.holiday_end_time"/>
+        </p>
 
-  </template>
+    </template>
 
 
-  <template
-    id="shift_status_label"
-    name="Shift Status Label">
+    <template
+        id="shift_status_label"
+        name="Shift Status Label">
 
-    <span t-if="shift.state == 'draft'"
-      t-attf-class="label label-default {{label_css}}">
-      <t t-esc="shift.state"/>
-    </span>
+        <span t-if="shift.state == 'draft'"
+            t-attf-class="badge badge-default {{label_css}}">
+            <t t-esc="shift.state"/>
+        </span>
 
-    <span t-if="shift.state == 'done'"
-      t-attf-class="label label-success {{label_css}}">
-      <t t-esc="shift.state"/>
-    </span>
+        <span t-if="shift.state == 'done'"
+            t-attf-class="badge badge-success {{label_css}}">
+            <t t-esc="shift.state"/>
+        </span>
 
-    <span t-if="shift.state == 'absent_2'"
-      t-attf-class="label label-warning {{label_css}}">
-      <t t-esc="shift.state"/>
-    </span>
+        <span t-if="shift.state == 'absent_2'"
+            t-attf-class="badge badge-warning {{label_css}}">
+            <t t-esc="shift.state"/>
+        </span>
 
-    <span t-if="shift.state == 'absent_1'"
-      t-attf-class="label label-info {{label_css}}">
-      <t t-esc="shift.state"/>
-    </span>
+        <span t-if="shift.state == 'absent_1'"
+            t-attf-class="badge badge-info {{label_css}}">
+            <t t-esc="shift.state"/>
+        </span>
 
-    <span t-if="shift.state == 'absent_0'"
-      t-attf-class="label label-info {{label_css}}">
-      <t t-esc="shift.state"/>
-    </span>
+        <span t-if="shift.state == 'absent_0'"
+            t-attf-class="badge badge-info {{label_css}}">
+            <t t-esc="shift.state"/>
+        </span>
 
-    <span t-if="shift.state == 'cancel'"
-      t-attf-class="label label-danger {{label_css}}">
-      <t t-esc="shift.state"/>
-    </span>
+        <span t-if="shift.state == 'cancel'"
+            t-attf-class="badge badge-danger {{label_css}}">
+            <t t-esc="shift.state"/>
+        </span>
 
-  </template>
+    </template>
 
 
-  <template
-    id="my_shift_next_shifts"
-    name="My Shift : Next Shifts">
+    <template
+        id="my_shift_next_shifts"
+        name="My Shift : Next Shifts">
 
-    <div class="oe_structure"/>
+        <h2>
+            Your next shifts
+        </h2>
 
-    <section class="wrap">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <h2>
-              Your next shifts
-            </h2>
-          </div>
+        <div class="alert alert-warning">
+            <strong>Warning !</strong> For the moment public holidays are not taken into account. If your shift
+            occures during a public holiday, you do not have to do it.
         </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
-
-    <section class="wrap" t-if="is_regular">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="alert alert-warning">
-              <strong>Warning !</strong> For the moment public holidays are not taken into account. If your shift
-              occures during a public holiday, you do not have to do it.
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
-
-    <div class="visible-xs" t-foreach="subscribed_shifts" t-as="shift">
-      <div class="panel panel-default">
-        <div class="panel-heading clearfix">
-          <div class="panel-title">
-            <t t-esc="time.strftime('%A %d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-            <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/>
-            <t t-call="beesdoo_website_shift.shift_status_label">
-              <t t-set="label_css" t-value="'pull-right'"/>
-            </t>
-          </div>
-        </div>
-        <div class="panel-body">
-          <t t-esc="shift.task_type_id.name"/>
-          <button type="button" class="btn btn-default btn-sm pull-right"
-            t-if="shift.super_coop_id.name"
-            data-toggle="modal"
-            t-att-data-target="'#super_coop-shift-%s' % shift_index">
-            <span class="fa fa-info" aria-hidden="true"></span>
-            Super Cooperator Info
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <table class="hidden-xs table table-striped" t-if="subscribed_shifts">
-      <thead>
-        <tr>
-          <th>Day</th>
-          <th>Date</th>
-          <th>Time</th>
-          <th>Type of Shift</th>
-          <th>Status</th>
-          <th class="text-center">Super Cooperator Info</th>
-        </tr>
-      </thead>
-      <tbody>
+
         <t t-foreach="subscribed_shifts" t-as="shift">
-          <tr t-att-class="'danger text-danger' if shift.state == 'cancel' else ''">
-            <td>
-              <t t-esc="time.strftime('%A', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            </td>
-            <td>
-              <t t-esc="time.strftime('%d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            </td>
-            <td>
-              <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-              <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/>
-            </td>
-            <td>
-              <t t-esc="shift.task_type_id.name"/>
-            </td>
-            <td>
-              <t t-esc="shift.state"/>
-            </td>
-            <td class="text-center">
-              <button type="button" class="btn btn-default btn-sm"
-                t-if="shift.super_coop_id.name"
-                data-toggle="modal"
-                t-att-data-target="'#super_coop-shift-%s' % shift_index">
-                <span class="fa fa-info" aria-hidden="true"></span>
-              </button>
-            </td>
-          </tr>
-        </t>
-      </tbody>
-    </table>
-
-    <!-- Super Cooperator info modal -->
-    <t t-foreach="subscribed_shifts" t-as="shift">
-      <div class="modal fade" t-if="shift.super_coop_id.name" t-att-id="'super_coop-shift-%s' % shift_index" tabindex="-1" role="dialog"
-        t-att-aria-labelledby="'super_coop-shift-%s-label' % shift_index">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">×</span>
-              </button>
-              <h4 class="modal-title" t-att-id="'super_coop-shift-%s-label' % shift_index">
-                <t t-esc="shift.super_coop_id.name"/>
-              </h4>
-            </div>
-            <div class="modal-body">
-              <i class="fa fa-phone" aria-hidden="true"></i> <t t-esc="shift.super_coop_id.phone"/><br/>
-              <i class="fa fa-envelope" aria-hidden="true"></i>
-              <a t-att-href="'mailto:%s' % shift.super_coop_id.email">
-                <t t-esc="shift.super_coop_id.email"/>
-              </a>
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+            <div t-att-class="'card mb-4 %s' % highlight_class">
+                <div t-att-class="'card-header %s clearfix' % highlight_header_class">
+                    <div class="pull-left">
+                        <span t-field="shift.start_time"/> -
+                        <span t-field="shift.end_time" t-options='{"format": "HH:mm"}'/>
+                    </div>
+                    <t t-call="beesdoo_website_shift.shift_status_label">
+                        <t t-set="label_css" t-value="'pull-right'"/>
+                    </t>
+                </div>
+                <div class="card-body clearfix">
+                    <t t-esc="shift.task_type_id.name"/>
+                    <button
+                        type="button"
+                        class="btn btn-default btn-sm pull-right"
+                        t-if="shift.super_coop_id.name"
+                        data-toggle="modal"
+                        t-att-data-target="'#super_coop-shift-%s' % shift_index"
+                        >
+                        <span class="fa fa-info" aria-hidden="true"></span>
+                        Super Cooperator Info
+                    </button>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </t>
-
-    <section class="wrap" t-if="not subscribed_shifts">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="alert alert-warning">
-              <strong>Warning !</strong> You have not yet signed up to a shift.
+        </t>
+
+        <!-- Super Cooperator info modal -->
+        <t t-foreach="subscribed_shifts" t-as="shift">
+            <div class="modal fade" t-if="shift.super_coop_id.name" t-att-id="'super_coop-shift-%s' % shift_index" tabindex="-1" role="dialog"
+                t-att-aria-labelledby="'super_coop-shift-%s-label' % shift_index">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">×</span>
+                            </button>
+                            <h4 class="modal-title" t-att-id="'super_coop-shift-%s-label' % shift_index">
+                                <t t-esc="shift.super_coop_id.name"/>
+                            </h4>
+                        </div>
+                        <div class="modal-body">
+                            <i class="fa fa-phone" aria-hidden="true"></i> <t t-esc="shift.super_coop_id.phone"/><br/>
+                            <i class="fa fa-envelope" aria-hidden="true"></i>
+                            <a t-att-href="'mailto:%s' % shift.super_coop_id.email">
+                                <t t-esc="shift.super_coop_id.email"/>
+                            </a>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </section>
+        </t>
 
-    <div class="oe_structure"/>
+        <div class="alert alert-warning" t-if="not subscribed_shifts">
+            <strong>Warning !</strong> You have not yet signed up to a shift.
+        </div>
 
-  </template>
+    </template>
 
-  <template
-    id="my_shift_past_shifts"
-    name="My Shift : Past Shifts">
+    <template
+        id="my_shift_past_shifts"
+        name="My Shift : Past Shifts">
 
-    <div class="oe_structure"/>
+        <h2>
+            Your past shifts
+        </h2>
 
-    <section class="wrap">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <h2>
-              Your past shifts
-            </h2>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
-
-    <div class="visible-xs" t-foreach="past_shifts" t-as="shift">
-      <div class="panel panel-default">
-        <div class="panel-heading clearfix">
-          <div class="panel-title">
-            <t t-esc="time.strftime('%A %d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-            <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/>
-            <t t-call="beesdoo_website_shift.shift_status_label">
-              <t t-set="label_css" t-value="'pull-right'"/>
-            </t>
-          </div>
-        </div>
-        <div class="panel-body">
-          <t t-esc="shift.task_type_id.name"/>
-        </div>
-      </div>
-    </div>
-
-    <table class="hidden-xs table table-striped" t-if="past_shifts">
-      <thead>
-        <tr>
-          <th>Day</th>
-          <th>Date</th>
-          <th>Time</th>
-          <th>Type of Shift</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
         <t t-foreach="past_shifts" t-as="shift">
-          <tr>
-            <td>
-              <t t-esc="time.strftime('%A', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            </td>
-            <td>
-              <t t-esc="time.strftime('%d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            </td>
-            <td>
-              <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-              <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/>
-            </td>
-            <td>
-              <t t-esc="shift.task_type_id.name"/>
-            </td>
-            <td>
-              <t t-esc="shift.state"/>
-            </td>
-          </tr>
-        </t>
-      </tbody>
-    </table>
-
-    <section class="wrap" t-if="not past_shifts">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <div class="alert alert-info">
-              <strong>Info !</strong> You don't have any past shift.
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
-
-  </template>
-
-  <template
-    id="available_shift_irregular_worker"
-    name="Available Shift for Irregular Worker">
-
-    <div class="oe_structure"/>
-
-    <div class="visible-xs" t-foreach="shift_templates" t-as="shift_count_subscribed">
-      <t t-set="shift" t-value="shift_count_subscribed[0]" />
-      <t t-set="count" t-value="shift_count_subscribed[1]" />
-      <t t-set="is_subscribed" t-value="shift_count_subscribed[2]" />
-      <t t-set="has_enough_workers" t-value="shift_count_subscribed[3]" />
-      <t t-set="highlight_class" t-value="'panel-warning' if not has_enough_workers else 'panel-default'"/>
-      <div t-att-class="'panel %s' % highlight_class">
-        <div class="panel-heading clearfix">
-          <div class="panel-title pull-left">
-            <t t-esc="time.strftime('%A %d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-            <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/>
-          </div>
-          <div class="label label-default pull-right">
-            <t t-esc="count"/> space(s)
-          </div>
-        </div>
-        <div class="panel-body clearfix">
-          <t t-esc="shift.task_type_id.name"/>
-          <t t-if="is_subscribed">
-            <div class="label label-success pull-right">
-              <span class="fa fa-check" aria-hidden="true"></span>
-              Subscribed
-            </div>
-          </t>
-          <t t-if="irregular_enable_sign_up and not is_subscribed">
-            <button type="button" class="btn btn-default btn-sm pull-right" data-toggle="modal"
-              t-att-data-target="'#subscribe-shift-%s' % shift.id">
-              <span class="fa fa-user-plus" aria-hidden="true"></span>
-              Subscribe
-            </button>
-          </t>
-        </div>
-      </div>
-    </div>
-
-    <table class="hidden-xs table table-striped">
-      <thead>
-        <tr>
-          <th>Day</th>
-          <th>Date</th>
-          <th>Time</th>
-          <th>Type of Shift</th>
-          <th class="text-center">Available Spaces</th>
-          <th class="text-center" t-if="irregular_enable_sign_up">Subscribed</th>
-        </tr>
-      </thead>
-      <tbody>
-        <t t-foreach="shift_templates" t-as="shift_count_subscribed">
-          <t t-set="shift" t-value="shift_count_subscribed[0]" />
-          <t t-set="count" t-value="shift_count_subscribed[1]" />
-          <t t-set="is_subscribed" t-value="shift_count_subscribed[2]" />
-          <t t-set="has_enough_workers" t-value="shift_count_subscribed[3]"/>
-          <tr t-attf-class="{{ 'warning' if not has_enough_workers else '' }}">
-            <td>
-              <t t-esc="time.strftime('%A', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            </td>
-            <td>
-              <t t-esc="time.strftime('%d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-            </td>
-            <td>
-              <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-              <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/>
-            </td>
-            <td>
-              <t t-esc="shift.task_type_id.name"/>
-            </td>
-            <td class="text-center">
-              <t t-esc="count"/>
-            </td>
-            <td class="text-center" t-if="irregular_enable_sign_up">
-              <t t-if="is_subscribed">
-                <div class="label label-success">
-                  <span class="fa fa-check" aria-hidden="true"></span>
-                  Subscribed
+            <div t-att-class="'card mb-4 %s' % highlight_class">
+                <div t-att-class="'card-header %s clearfix' % highlight_header_class">
+                    <div class="pull-left">
+                        <span t-field="shift.start_time"/> -
+                        <span t-field="shift.end_time" t-options='{"format": "HH:mm"}'/>
+                    </div>
+                    <t t-call="beesdoo_website_shift.shift_status_label">
+                        <t t-set="label_css" t-value="'pull-right'"/>
+                    </t>
+                </div>
+                <div class="card-body clearfix">
+                    <t t-esc="shift.task_type_id.name"/>
                 </div>
-              </t>
-              <t t-if="not is_subscribed">
-                <button type="button" class="btn btn-default btn-sm" data-toggle="modal"
-                  t-att-data-target="'#subscribe-shift-%s' % shift.id">
-                  <span class="fa fa-user-plus" aria-hidden="true"></span>
-                  Subscribe
-                </button>
-              </t>
-            </td>
-          </tr>
-        </t>
-      </tbody>
-    </table>
-
-    <!-- Subscribe check -->
-    <t t-foreach="shift_templates" t-as="shift_count_subscribed">
-      <t t-set="shift" t-value="shift_count_subscribed[0]" />
-      <t t-set="count" t-value="shift_count_subscribed[1]" />
-      <t t-set="is_subscribed" t-value="shift_count_subscribed[2]" />
-      <div class="modal fade" t-att-id="'subscribe-shift-%s' % shift.id" tabindex="-1" role="dialog"
-        t-att-aria-labelledby="'subscribe-shift-%s-label' % shift.id">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">×</span>
-              </button>
-              <h4 class="modal-title" t-att-id="'subscribe-shift-%s-label' % shift.id">
-                Please confirm subscription
-              </h4>
-            </div>
-            <div class="modal-body">
-              <t t-esc="time.strftime('%A', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-              <t t-esc="time.strftime('%d %B %Y', time.strptime(shift.start_time, '%Y-%m-%d %H:%M:%S'))"/>
-              <span t-field="shift.start_time" t-field-options='{"format": "HH:mm"}'/> -
-              <span t-field="shift.end_time" t-field-options='{"format": "HH:mm"}'/><br/>
-              <t t-esc="shift.task_type_id.name"/><br/>
-              <t t-esc="count"/> available space(s)
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-              <a class="btn btn-primary"
-                t-if="irregular_enable_sign_up"
-                t-att-href="'/shift/%s/subscribe?nexturl=%s' % (shift.id, nexturl)">
-                Subscribe
-              </a>
             </div>
-          </div>
-        </div>
-      </div>
-    </t>
-
-    <div class="oe_structure"/>
+        </t>
 
-  </template>
+        <div class="alert alert-info">
+            <strong>Info !</strong> You don't have any past shift.
+        </div>
 
-  <!-- Help Texts -->
-  <template
-    id="help_text_title"
-    name="Help Text Title">
+    </template>
 
-    <div class="oe_structure"/>
+    <template
+        id="available_shift_irregular_worker"
+        name="Available Shift for Irregular Worker"
+        >
 
-    <section class="wrap">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12">
-            <h2>
-              Help
-            </h2>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="oe_structure"/>
-
-  </template>
-
-  <template
-    id="help_text_common"
-    name="Help Text Common">
-    <div class="oe_structure alert alert-info">
-      <strong>Info!</strong> If you do not agree with your status, please contact the members office by mail (membre@bees-coop.be) or during the open hours of the office (Monday 5PM to 7:30PM, Wednesday 5PM to 7:30 PM and Friday 2:30PM to 5 PM).
-    </div>
-
-    <p class="oe_structure">
-      Explanation of the status:
-    </p>
-
-    <p class="oe_structure">
-      <strong>Up To Date:</strong>
-      That's perfect! You are in order. Thanks a lot. You can come and shop, so can your eaters if you have any.
-    </p>
-  </template>
-
-  <template
-    id="help_text_regular_worker"
-    name="Help Text for Regular Worker">
-    <p class="oe_structure">
-      <strong>Alert:</strong>
-      If you are in alert status, that means you didn't do your last shift. You have
-      until your next scheduled shift to do your compensation shift according to your situation.
-      Your compensation is either simple or double. If you don't how how many compensation shifts you have to do, please contact your supercooperator.
-      To do your compensation shift, no need to subscribe in advance : you come at the beginning of the shift that best suits you.
-      Add your name and the indication "compensation shift" on the attendance list.
-      No panic, you still can come and shop, so can your eaters if you have any.
-    </p>
-    <p class="oe_structure">
-      <strong>Suspended:</strong>
-      If you are suspended, that means you didn't come to a shift and you didn't do you compensation shifts in the delay (4 weeks).
-      You cannot shop (so as your eaters). But no need to panic : a two-weeks delay is activable on demand at the entrance of the supermarket.
-      You will be able to shop during 2 more weeks and to put your situation in order.
-      To do your compensation shift, no need to subscribe in advance : you come at the beginning of the shift that best suits you.
-      Add your name and the indication "compensation shift" on the attendance list.
-    </p>
-    <p class="oe_structure">
-      <strong>Auto-Extension:</strong>
-      You didn't manage to do your compensation shifts in the delay but you benefit from the auto-extension.
-      This is two more weeks to do your compensation shifts. You can shop.
-      If you don't do your compensation shifts, you'll be suspended.
-    </p>
-    <p class="oe_structure">
-      <strong>Unsubscribed:</strong>
-      You did not attend two consecutive shifts. You are now unsubscribed. You cannot shop (nor can your eaters) nor come to work.
-      To subscribe again, please contact membre@bees-coop.be or come to the members office during the opening hours.
-    </p>
-  </template>
-
-  <template
-    id="help_text_irregular_worker"
-    name="Help Text for Irregular Worker">
-    <p class="oe_structure">
-      <strong>Alert:</strong>
-      If you are in alert status, that means you didn't anticipate enough shifts.
-      Your counter is now negative, directly to -2.
-      You have 4 weeks to do 2 shifts to be up to date.
-      For the compensation shifts, subscribe like you do for a normal shift.
-      Be careful, in addition to these 2 shifts, don't forget to do your normal shift in the same delay to prevent to be in the same situation next month.
-    </p>
-    <p class="oe_structure">
-      <strong>Suspended:</strong>
-      You did not anticipate enough shifts and you did not come back to a normal situation in the delay.
-      You cannot shop anymore, nor can your eaters.
-      But no need to panic : a two-weeks delay is activable on demand at the entrance of the supermarket.
-      You will be able to shop during 2 more weeks and to put your situation in order.
-      For the compensation shifts, subscribe like you do for a normal shift.
-    </p>
-    <p class="oe_structure">
-      <strong>Auto-Extension:</strong>
-      You didn't manage to do your compensation shifts in the delay but you benefit from the auto-extension.
-      This is two more weeks to do your compensation shifts. You can shop.
-      If you don't do your compensation shifts, you'll be suspended.
-    </p>
-    <p class="oe_structure">
-      <strong>Unsubscribed:</strong>
-      Your counter is negative and you haven't come to work for more than 8 weeks.
-      You are unsubscribed. You cannot shop nor can your eaters.
-      To subscribe again of if it's a mistake, please contact membre@bees-coop.be or come to the members office during the opening hours.
-    </p>
-  </template>
-
-  <!-- Shift for non-worker -->
-  <template
-    id="my_shift_non_worker"
-    name="My Shift for Non Worker"
-  >
-    <t t-call="website.layout">
-
-      <t t-call="beesdoo_website_shift.my_shift_title"/>
-
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <div class="alert alert-info">
-                You don't have to participate to shift system.
-              </div>
+        <t t-foreach="shift_templates" t-as="shift_count_subscribed">
+            <t t-set="shift" t-value="shift_count_subscribed[0]" />
+            <t t-set="count" t-value="shift_count_subscribed[1]" />
+            <t t-set="is_subscribed" t-value="shift_count_subscribed[2]" />
+            <t t-set="has_enough_workers" t-value="shift_count_subscribed[3]" />
+            <t t-set="highlight_class" t-value="'panel-warning' if not has_enough_workers else 'panel-default'"/>
+            <div t-att-class="'card mb-4 %s' % highlight_class">
+                <div t-att-class="'card-header %s clearfix' % highlight_header_class">
+                    <div class="pull-left">
+                        <span t-field="shift.start_time"/> -
+                        <span t-field="shift.end_time" t-options='{"format": "HH:mm"}'/>
+                    </div>
+                    <div class="badge badge-secondary pull-right"
+                        t-if="count > 0">
+                        <t t-esc="count"/> space(s)
+                    </div>
+                    <div class="badge badge-secondary pull-right"
+                        t-if="count == 0">
+                        full
+                    </div>
+                </div>
+                <div class="card-body clearfix">
+                    <t t-esc="shift.task_type_id.name"/>
+                    <div class="badge badge-success pull-right"
+                        t-if="is_subscribed">
+                        Subscribed
+                    </div>
+                    <button
+                        type="button"
+                        class="btn btn-default btn-sm pull-right"
+                        data-toggle="modal"
+                        t-att-data-target="'#subscribe-shift-%s' % shift.id"
+                        t-if="irregular_enable_sign_up and not is_subscribed"
+                        >
+                        <span class="fa fa-user-plus" aria-hidden="true"></span>
+                        Subscribe
+                    </button>
+                </div>
             </div>
-          </div>
-        </div>
-      </section>
-
-      <div class="oe_structure"/>
 
-    </t>
-  </template>
-
-  <!-- Shift for new worker -->
-  <template
-    id="my_shift_new_worker"
-    name="My Shift for New Worker"
-    >
-    <t t-call="website.layout">
+            <!-- Subscribe check -->
+            <t t-foreach="shift_templates" t-as="shift_count_subscribed">
+                <t t-set="shift" t-value="shift_count_subscribed[0]" />
+                <t t-set="count" t-value="shift_count_subscribed[1]" />
+                <t t-set="is_subscribed" t-value="shift_count_subscribed[2]" />
+                <div class="modal fade" t-att-id="'subscribe-shift-%s' % shift.id" tabindex="-1" role="dialog"
+                    t-att-aria-labelledby="'subscribe-shift-%s-label' % shift.id">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">×</span>
+                                </button>
+                                <h4 class="modal-title" t-att-id="'subscribe-shift-%s-label' % shift.id">
+                                    Please confirm subscription
+                                </h4>
+                            </div>
+                            <div class="modal-body">
+                                <span t-field="shift.start_time"/> -
+                                <span t-field="shift.end_time" t-options='{"format": "HH:mm"}'/><br/>
+                                <t t-esc="shift.task_type_id.name"/><br/>
+                                <t t-esc="count"/> available space(s)
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                                <a class="btn btn-primary"
+                                    t-if="irregular_enable_sign_up"
+                                    t-att-href="'/shift/%s/subscribe?nexturl=%s' % (shift.id, nexturl)">
+                                    Subscribe
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
 
-      <t t-call="beesdoo_website_shift.my_shift_title"/>
+        </t>
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <div class="alert alert-info">
-                Please contact the members office to suscribe to shifts.
-              </div>
-            </div>
-          </div>
+    </template>
+
+    <!-- Help Texts -->
+    <template
+        id="help_text_title"
+        name="Help Text Title">
+        <h2>
+            Help
+        </h2>
+    </template>
+
+    <template
+        id="help_text_common"
+        name="Help Text Common">
+        <div class="alert alert-info">
+            <strong>Info!</strong> If you do not agree with your status, please contact the members office by mail (membre@bees-coop.be) or during the open hours of the office (Monday 5PM to 7:30PM, Wednesday 5PM to 7:30 PM and Friday 2:30PM to 5 PM).
         </div>
-      </section>
 
-      <div class="oe_structure"/>
-
-    </t>
-  </template>
+        <p>
+            Explanation of the status:
+        </p>
+
+        <p>
+            <strong>Up To Date:</strong>
+            That's perfect! You are in order. Thanks a lot. You can come and shop, so can your eaters if you have any.
+        </p>
+    </template>
+
+    <template
+        id="help_text_regular_worker"
+        name="Help Text for Regular Worker">
+        <p class="h_reg_alert">
+            <strong>Alert:</strong>
+            If you are in alert status, that means you didn't do your last shift. You have
+            until your next scheduled shift to do your compensation shift according to your situation.
+            Your compensation is either simple or double. If you don't how how many compensation shifts you have to do, please contact your supercooperator.
+            To do your compensation shift, no need to subscribe in advance : you come at the beginning of the shift that best suits you.
+            Add your name and the indication "compensation shift" on the attendance list.
+            No panic, you still can come and shop, so can your eaters if you have any.
+        </p>
+        <p class="h_reg_suspended">
+            <strong>Suspended:</strong>
+            If you are suspended, that means you didn't come to a shift and you didn't do you compensation shifts in the delay (4 weeks).
+            You cannot shop (so as your eaters). But no need to panic : a two-weeks delay is activable on demand at the entrance of the supermarket.
+            You will be able to shop during 2 more weeks and to put your situation in order.
+            To do your compensation shift, no need to subscribe in advance : you come at the beginning of the shift that best suits you.
+            Add your name and the indication "compensation shift" on the attendance list.
+        </p>
+        <p class="h_reg_autoextension">
+            <strong>Auto-Extension:</strong>
+            You didn't manage to do your compensation shifts in the delay but you benefit from the auto-extension.
+            This is two more weeks to do your compensation shifts. You can shop.
+            If you don't do your compensation shifts, you'll be suspended.
+        </p>
+        <p class="h_reg_unsubscribed">
+            <strong>Unsubscribed:</strong>
+            You did not attend two consecutive shifts. You are now unsubscribed. You cannot shop (nor can your eaters) nor come to work.
+            To subscribe again, please contact membre@bees-coop.be or come to the members office during the opening hours.
+        </p>
+    </template>
+
+    <template
+        id="help_text_irregular_worker"
+        name="Help Text for Irregular Worker">
+        <p class="h_irreg_alert">
+            <strong>Alert:</strong>
+            If you are in alert status, that means you didn't anticipate enough shifts.
+            Your counter is now negative, directly to -2.
+            You have 4 weeks to do 2 shifts to be up to date.
+            For the compensation shifts, subscribe like you do for a normal shift.
+            Be careful, in addition to these 2 shifts, don't forget to do your normal shift in the same delay to prevent to be in the same situation next month.
+        </p>
+        <p class="h_irreg_suspended">
+            <strong>Suspended:</strong>
+            You did not anticipate enough shifts and you did not come back to a normal situation in the delay.
+            You cannot shop anymore, nor can your eaters.
+            But no need to panic : a two-weeks delay is activable on demand at the entrance of the supermarket.
+            You will be able to shop during 2 more weeks and to put your situation in order.
+            For the compensation shifts, subscribe like you do for a normal shift.
+        </p>
+        <p class="h_irreg_autoextension">
+            <strong>Auto-Extension:</strong>
+            You didn't manage to do your compensation shifts in the delay but you benefit from the auto-extension.
+            This is two more weeks to do your compensation shifts. You can shop.
+            If you don't do your compensation shifts, you'll be suspended.
+        </p>
+        <p class="h_irreg_unsubscribed">
+            <strong>Unsubscribed:</strong>
+            Your counter is negative and you haven't come to work for more than 8 weeks.
+            You are unsubscribed. You cannot shop nor can your eaters.
+            To subscribe again of if it's a mistake, please contact membre@bees-coop.be or come to the members office during the opening hours.
+        </p>
+    </template>
+
+    <!-- Shift for non-worker -->
+    <template
+        id="my_shift_non_worker"
+        name="My Shift for Non Worker"
+        >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
+
+            <div class="container mt16">
+                <div class="row">
+                    <div class="col text-center">
+                        <t t-call="beesdoo_website_shift.my_shift_title"/>
+                    </div>
+                </div>
 
-  <!-- Shifts Exempted Workers -->
-  <template
-    id="my_shift_exempted_worker"
-    name="My Shifts for Exempted Workers"
-    >
-    <t t-call="website.layout">
+                <div class="row">
+                    <div class="col">
 
-      <t t-call="beesdoo_website_shift.my_shift_title"/>
+                        <div class="alert alert-info">
+                            You don't have to participate to shift system.
+                        </div>
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-xs-12 col-md-4 pull-right text-justify">
+                    </div>
+                </div>
+            </div>
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
+        </t>
+    </template>
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
+    <!-- Shift for new worker -->
+    <template
+        id="my_shift_new_worker"
+        name="My Shift for New Worker"
+        >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
 
-              <p t-if="status.exempt_reason_id">
-                <label>Exempt Reason:</label>
-                <t t-esc="status.exempt_reason_id.name"/>
-              </p>
 
-              <div class="oe_structure"/>
+            <div class="container mt6">
+                <div class="row">
+                    <div class="col text-center">
+                        <t t-call="beesdoo_website_shift.my_shift_title"/>
+                    </div>
+                </div>
 
-            </div>
+                <div class="row">
+                    <div class="col">
 
-            <div class="col-xs-12 col-md-8">
+                        <div class="alert alert-info">
+                            Please contact the members office to suscribe to shifts.
+                        </div>
 
-              <section class="wrap">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-md-12">
-                      <div class="alert alert-info">
-                        You don't have to participate to shift system.
-                      </div>
                     </div>
-                  </div>
                 </div>
-              </section>
-
-              <div class="oe_structure"/>
+            </div>
 
-            </div> <!-- col-md-8 -->
-          </div> <!-- row -->
-        </div> <!-- container -->
-      </section>
+        </t>
+    </template>
 
-      <div class="oe_structure"/>
+    <!-- Shifts Exempted Workers -->
+    <template
+        id="my_shift_exempted_worker"
+        name="My Shifts for Exempted Workers"
+        >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
 
-    </t>
-  </template>
 
-  <!-- Shifts regular worker without shift -->
-  <template
-    id="my_shift_regular_worker_without_shift"
-    name="My Shifts for regular worker without shift"
-    >
-    <t t-call="website.layout">
+            <div class="container mt16">
+                <div class="row">
+                    <div class="col text-center">
+                        <t t-call="beesdoo_website_shift.my_shift_title"/>
+                    </div>
+                </div>
 
-      <t t-call="beesdoo_website_shift.my_shift_title"/>
+                <div class="row">
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-xs-12 col-md-4 pull-right text-justify">
+                    <div class="col-12 col-lg-6 m-auto text-justify">
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
 
+                        <p t-if="status.exempt_reason_id">
+                            <label class="font-weight-bold">Exempt Reason:</label>
+                            <t t-esc="status.exempt_reason_id.name"/>
+                        </p>
 
-              <div class="oe_structure"/>
+                    </div>
 
-            </div>
+                    <div class="col-12 col-lg-8 m-auto">
 
-            <div class="col-xs-12 col-md-8">
+                        <div class="alert alert-info">
+                            You don't have to participate to shift system.
+                        </div>
 
-              <section class="wrap">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-md-12">
-                      <div class="alert alert-info">
-                        Please contact the members office to suscribe to shifts.
-                      </div>
                     </div>
-                  </div>
                 </div>
-              </section>
-
-              <div class="oe_structure"/>
+            </div>
 
-            </div> <!-- col-md-8 -->
-          </div> <!-- row -->
-        </div> <!-- container -->
-      </section>
+        </t>
+    </template>
 
-      <div class="oe_structure"/>
+    <!-- Shifts regular worker without shift -->
+    <template
+        id="my_shift_regular_worker_without_shift"
+        name="My Shifts for regular worker without shift"
+        >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
 
-    </t>
-  </template>
 
+            <div class="container mt16">
+                <div class="row">
+                    <div class="col text-center">
+                        <t t-call="beesdoo_website_shift.my_shift_title"/>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12 col-lg-6 m-auto text-justify">
 
-  <!-- Shifts for Regular Workers -->
-  <template
-    id="my_shift_regular_worker"
-    name="My Shifts for Regular Workers"
-    >
-    <t t-call="website.layout">
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
 
-      <t t-call="beesdoo_website_shift.my_shift_title"/>
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-xs-12 col-md-4 pull-right text-justify">
+                    </div>
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
+                    <div class="col-12 col-lg-8 m-auto">
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
+                        <div class="alert alert-info">
+                            Please contact the members office to suscribe to shifts.
+                        </div>
 
-              <p t-if="status.sr != 0">
-                <label>Shift in Advance:</label>
-                <t t-esc="status.sr"/>
-              </p>
+                    </div>
+                </div>
+            </div>
 
-              <p t-if="status.sc != 0">
-                <label>Compensation Shift:</label>
-                <t t-esc="status.sc"/>
-              </p>
+        </t>
+    </template>
 
-              <p t-if="status.alert_start_time">
-                <label for="alert_start_time">In Alert Since:</label>
-                <t t-esc="status.alert_start_time.strftime('%A %d %B %Y')"/>
-              </p>
 
-              <p t-if="status.extension_start_time">
-                <label for="extension_start_time">In Extension Since:</label>
-                <t t-esc="status.extension_start_time.strftime('%A %d %B %Y')"/>
-              </p>
+    <!-- Shifts for Regular Workers -->
+    <template
+        id="my_shift_regular_worker"
+        name="My Shifts for Regular Workers"
+        >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
 
-              <div class="oe_structure"/>
+            <div class="container mt16">
+                <div class="row">
+                    <div class="col text-center">
+                        <t t-call="beesdoo_website_shift.my_shift_title"/>
+                    </div>
+                </div>
 
-              <t t-call="beesdoo_website_shift.help_text_title"/>
-              <t t-call="beesdoo_website_shift.help_text_common"/>
-              <t t-call="beesdoo_website_shift.help_text_irregular_worker"/>
+                <div class="row">
+                    <div class="col-12 col-lg-6 m-auto text-justify">
 
-              <div class="oe_structure"/>
-            </div>
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
 
-            <div class="col-xs-12 col-md-8">
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
 
-              <t t-call="beesdoo_website_shift.my_shift_next_shifts"/>
+                        <p t-if="status.sr != 0">
+                            <label class="font-weight-bold">Shift in Advance:</label>
+                            <t t-esc="status.sr"/>
+                        </p>
 
-              <t t-call="beesdoo_website_shift.my_shift_past_shifts"/>
+                        <p t-if="status.sc != 0">
+                            <label class="font-weight-bold">Compensation Shift:</label>
+                            <t t-esc="status.sc"/>
+                        </p>
 
-            </div> <!-- col-md-8 -->
+                        <p t-if="status.alert_start_time">
+                            <label class="font-weight-bold">In Alert Since:</label>
+                            <t t-esc="status.alert_start_time"/>
+                        </p>
 
-          </div> <!-- row -->
-        </div> <!-- container -->
-      </section>
+                        <p t-if="status.extension_start_time">
+                            <label class="font-weight-bold">In Extension Since:</label>
+                            <t t-esc="status.extension_start_time"/>
+                        </p>
 
-      <div class="oe_structure"/>
+                    </div>
 
-    </t>
-  </template>
+                    <div class="col-12 col-lg-8">
 
-  <!-- Shifts for Irregular Workers -->
-  <template
-    id="my_shift_irregular_worker"
-    name="Shifts for Irregular Workers"
-    >
-    <t t-call="website.layout">
+                        <t t-call="beesdoo_website_shift.my_shift_next_shifts"/>
 
-      <t t-call="beesdoo_website_shift.my_shift_title"/>
+                        <t t-call="beesdoo_website_shift.my_shift_past_shifts"/>
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-xs-12 col-md-4 pull-right text-justify">
+                    </div>
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
+                    <div class="col-12 col-lg-4 text-justify">
 
-              <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
+                        <t t-call="beesdoo_website_shift.help_text_title"/>
+                        <t t-call="beesdoo_website_shift.help_text_common"/>
+                        <t t-call="beesdoo_website_shift.help_text_irregular_worker"/>
 
-              <p>
-                <label>Shift in Advance:</label>
-                <t t-esc="status.sr"/>
-              </p>
+                    </div>
+                </div>
+            </div>
 
-              <p t-if="status.next_countdown_date">
-                <label for="next_countdown_date">Next Countdown Date:</label>
-                <t t-esc="status.next_countdown_date.strftime('%A %d %B %Y')"/>
-              </p>
+        </t>
+    </template>
+
+    <!-- Shifts for Irregular Workers -->
+    <template
+        id="my_shift_irregular_worker"
+        name="Shifts for Irregular Workers"
+        >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
+
+            <div class="container mt16">
+                <div class="row">
+                    <div class="col text-center">
+                        <t t-call="beesdoo_website_shift.my_shift_title"/>
+                    </div>
+                </div>
 
-              <p t-if="status.future_alert_date">
-                <label for="future_alert_date">Future Date of Alert:</label>
-                <t t-esc="status.future_alert_date.strftime('%A %d %B %Y')"/>
-              </p>
+                <div class="row">
+                    <div class="col-12 col-lg-6 m-auto text-justify">
 
-              <p t-if="status.irregular_absence_date">
-                <label for="last_absence_date">Last Absence Date:</label>
-                <t t-esc="status.irregular_absence_date.strftime('%A %d %B %Y')"/>
-              </p>
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_title"/>
 
-              <p t-if="status.irregular_absence_counter">
-                <label>Number of Absence:</label>
-                <t t-esc="status.irregular_absence_counter"/>
-              </p>
+                        <t t-call="beesdoo_website_shift.my_shift_worker_status_common"/>
 
-              <div class="oe_structure"/>
-              <t t-call="beesdoo_website_shift.help_text_title"/>
-              <t t-call="beesdoo_website_shift.help_text_common"/>
-              <t t-call="beesdoo_website_shift.help_text_irregular_worker"/>
-               <div class="oe_structure"/>
-            </div>
+                        <p>
+                            <label class="font-weight-bold">Shift in Advance:</label>
+                            <t t-esc="status.sr"/>
+                        </p>
 
-            <div class="col-xs-12 col-md-8">
+                        <p t-if="status.next_countdown_date">
+                            <label class="font-weight-bold">Next Countdown Date:</label>
+                            <t t-esc="status.next_countdown_date"/>
+                        </p>
 
-              <div t-if="back_from_subscription"
-                role="alert"
-                t-att-class="'alert alert-%s alert-dismissible' % ('success' if success else 'danger',)">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-                  <span aria-hidden="true">×</span>
-                </button>
-                <t t-if="success">
-                  <strong>Success!</strong> Your subscription has succeded.
-                </t>
-                <t t-if="not success">
-                  <strong>Failed!</strong> Your subscription has failed. Someone
-                  subscribed before you or the shift was deleted. Try again in a
-                  moment.
+                        <p t-if="status.future_alert_date">
+                            <label class="font-weight-bold">Future Date of Alert:</label>
+                            <t t-esc="status.future_alert_date"/>
+                        </p>
 
-                  Please note that you can't subscribe <t t-esc="subscription_time_limit"/>  minutes before the shift.
-                </t>
-              </div>
+                        <p t-if="status.irregular_absence_date">
+                            <label class="font-weight-bold">Last Absence Date:</label>
+                            <t t-esc="status.irregular_absence_date"/>
+                        </p>
 
-              <t t-call="beesdoo_website_shift.my_shift_next_shifts"/>
+                        <p t-if="status.irregular_absence_counter">
+                            <label class="font-weight-bold">Number of Absence:</label>
+                            <t t-esc="status.irregular_absence_counter"/>
+                        </p>
 
-              <section class="wrap">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-md-12">
-                      <h2>
-                        Available Shifts
-                      </h2>
-                    </div>
-                  </div>
-                </div>
-              </section>
-
-              <div class="oe_structure"/>
-
-              <section class="wrap">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-12 col-md-12 text-justify">
-                      <p>
-                        Please, subscribe, in priority, to the highlighted shifts. To sign up to a shift click on the
-                        subscribe button. Notice that you can not unsubscribe online. To unsubscribe to a shift, please,
-                        contact us.
-                      </p>
                     </div>
-                  </div>
-                </div>
-              </section>
-              <div class="oe_structure"/>
 
-              <t t-call="beesdoo_website_shift.available_shift_irregular_worker"/>
+                    <div class="col-12 col-lg-8">
+
+                        <div t-if="back_from_subscription"
+                            role="alert"
+                            t-att-class="'alert alert-%s alert-dismissible' % ('success' if success else 'danger',)">
+                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                                <span aria-hidden="true">×</span>
+                            </button>
+                            <t t-if="success">
+                                <strong>Success!</strong> Your subscription has succeded.
+                            </t>
+                            <t t-if="not success">
+                                <strong>Failed!</strong> Your subscription has failed. Someone
+                                subscribed before you or the shift was deleted. Try again in a
+                                moment.
+
+                                Please note that you can't subscribe <t t-esc="subscription_time_limit"/>  minutes before the shift.
+                            </t>
+                        </div>
+
+                        <t t-call="beesdoo_website_shift.my_shift_next_shifts"/>
+
+                        <h2>
+                            Available Shifts
+                        </h2>
+
+                        <div class="row">
+                            <div class="col-12 col-md-6 text-justify">
+                                <p>
+                                    Please, subscribe, in priority, to the highlighted shifts. To sign up to a shift click on the
+                                    subscribe button. Notice that you can not unsubscribe online. To unsubscribe to a shift, please,
+                                    contact us.
+                                </p>
+                            </div>
+                        </div>
+
+                        <t t-call="beesdoo_website_shift.available_shift_irregular_worker"/>
+
+                        <t t-call="beesdoo_website_shift.my_shift_past_shifts"/>
 
-              <t t-call="beesdoo_website_shift.my_shift_past_shifts"/>
+                    </div>
 
-            </div> <!-- col-md-8 -->
+                    <div class="col-12 col-lg-4 text-justify">
 
-          </div> <!-- row -->
-        </div> <!-- container -->
-      </section>
+                        <t t-call="beesdoo_website_shift.help_text_title"/>
+                        <t t-call="beesdoo_website_shift.help_text_common"/>
+                        <t t-call="beesdoo_website_shift.help_text_irregular_worker"/>
 
-      <div class="oe_structure"/>
+                    </div>
+                </div>
+            </div>
 
-    </t>
-  </template>
+        </t>
+    </template>
 
 </odoo>
diff --git a/beesdoo_website_shift/views/res_config_views.xml b/beesdoo_website_shift/views/res_config_views.xml
index 62ba035..60dc430 100644
--- a/beesdoo_website_shift/views/res_config_views.xml
+++ b/beesdoo_website_shift/views/res_config_views.xml
@@ -4,101 +4,91 @@
      License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 -->
 <odoo>
-  <data>
-
     <record id="view_website_shift_config_irregular" model="ir.ui.view">
-      <field name="name">Website Shift Settings Irregular Worker</field>
-      <field name="model">beesdoo.website.shift.config.settings</field>
-      <field name="arch" type="xml">
-        <form string="Configure Website Shift Irregular Worker" class="oe_form_configuration">
-          <header>
-            <button string="Apply" type="object" name="execute" class="oe_highlight"/>
-            <button string="Cancel" type="object" name="cancel" class="oe_link" special="cancel"/>
-          </header>
-          <div>
-            <label for="irregular_shift_limit"/>
-            <field name="irregular_shift_limit"/>
-          </div>
-          <div>
-            <label for="highlight_rule_pc"/>
-            <field name="highlight_rule_pc"/>
-          </div>
-          <div>
-            <label for="hide_rule"/>
-            <field name="hide_rule"/>
-          </div>
-          <div>
-            <label for="irregular_enable_sign_up"/>
-            <field name="irregular_enable_sign_up"/>
-          </div>
-          <div>
-            <label for="irregular_past_shift_limit"/>
-            <field name="irregular_past_shift_limit"/>
-          </div>
-        </form>
-      </field>
+        <field name="name">Website Shift Settings Irregular Worker</field>
+        <field name="model">res.config.settings</field>
+        <field name="inherit_id" ref="website.res_config_settings_view_form" />
+        <field name="arch" type="xml">
+            <div id="webmaster_settings" position="after">
+                <h2>Shift: Irregular Worker</h2>
+                <div class="row mt16 o_settings_container" id="shift_irregular_settings">
+                    <div id="irregular_shift_limit_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="irregular_shift_limit"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="irregular_shift_limit"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="highlight_rule_pc_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="highlight_rule_pc"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="highlight_rule_pc"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="hide_rule_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="hide_rule"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="hide_rule"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="irregular_enable_sign_up_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="irregular_enable_sign_up"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label for="irregular_enable_sign_up"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                        </div>
+                    </div>
+                    <div id="irregular_past_shift_limit_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="irregular_past_shift_limit"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="irregular_past_shift_limit"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <h2>Shift: Regular Worker</h2>
+                <div class="row mt16 o_settings_container" id="shift_regular_settings">
+                    <div id="regular_past_shift_limit_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="regular_past_shift_limit"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="regular_past_shift_limit"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="regular_next_shift_limit_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="regular_next_shift_limit"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="regular_next_shift_limit"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="regular_highlight_rule_settings" class="col-12 col-md-6 o_setting_box">
+                        <div class="o_setting_right_pane">
+                            <label for="regular_highlight_rule"/>
+                            <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                            <div class="mt8">
+                                <field name="regular_highlight_rule"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </field>
     </record>
-
-    <record id="view_website_shift_config_regular" model="ir.ui.view">
-      <field name="name">Website Shift Settings Regular Worker</field>
-      <field name="model">beesdoo.website.shift.config.settings</field>
-      <field name="arch" type="xml">
-        <form string="Configure Website Shift Regular Worker" class="oe_form_configuration">
-          <header>
-            <button string="Apply" type="object" name="execute" class="oe_highlight"/>
-            <button string="Cancel" type="object" name="cancel" class="oe_link" special="cancel"/>
-          </header>
-          <div>
-            <label for="regular_past_shift_limit"/>
-            <field name="regular_past_shift_limit"/>
-          </div>
-          <div>
-            <label for="regular_next_shift_limit"/>
-            <field name="regular_next_shift_limit"/>
-          </div>
-          <div>
-            <label for="regular_highlight_rule"/>
-            <field name="regular_highlight_rule"/>
-          </div>
-        </form>
-      </field>
-    </record>
-
-    <record id="action_website_shift_config_irregular" model="ir.actions.act_window">
-      <field name="name">Website Shift Settings Irregular Worker</field>
-      <field name="res_model">beesdoo.website.shift.config.settings</field>
-      <field name="view_id" ref="view_website_shift_config_irregular"/>
-      <field name="view_mode">form</field>
-      <field name="target">inline</field>
-    </record>
-
-    <record id="action_website_shift_config_regular" model="ir.actions.act_window">
-      <field name="name">Website Shift Settings Regular Worker</field>
-      <field name="res_model">beesdoo.website.shift.config.settings</field>
-      <field name="view_id" ref="view_website_shift_config_regular"/>
-      <field name="view_mode">form</field>
-      <field name="target">inline</field>
-    </record>
-
-    <menuitem
-      id="menu_website_shift_root"
-      name="Shift"
-      parent="website.menu_website_configuration"
-      sequence="20"/>
-
-    <menuitem
-      id="menu_website_shift_irregular"
-      name="Irregular Shift"
-      action="action_website_shift_config_irregular"
-      parent="menu_website_shift_root"
-      sequence="1"/>
-
-    <menuitem
-      id="menu_website_shift_regular"
-      name="Regular Shift"
-      action="action_website_shift_config_regular"
-      parent="menu_website_shift_root"
-      sequence="10"/>
-
-  </data>
 </odoo>
diff --git a/beesdoo_website_shift/views/shift_website_templates.xml b/beesdoo_website_shift/views/shift_website_templates.xml
index 3bfc198..2909702 100644
--- a/beesdoo_website_shift/views/shift_website_templates.xml
+++ b/beesdoo_website_shift/views/shift_website_templates.xml
@@ -1,211 +1,158 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
-     Copyright 2017-2018 Rémy Taymans <remytaymans@gmail.com>
+     Copyright 2017-2020 Rémy Taymans <remytaymans@gmail.com>
      License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 -->
 <odoo>
 
-  <!-- Add menu entries -->
-  <data noupdate="1">
-    <record id="menu_work_irregular" model="website.menu">
-      <field name="name">Shifts Irregular</field>
-      <field name="url">/shift_irregular_worker</field>
-      <field name="parent_id" ref="website.main_menu"/>
-      <field name="sequence">50</field>
-    </record>
-    <record id="menu_work_regular" model="website.menu">
-      <field name="name">Shifts Regular</field>
-      <field name="url">/shift_template_regular_worker</field>
-      <field name="parent_id" ref="website.main_menu"/>
-      <field name="sequence">51</field>
-    </record>
-  </data>
-
-  <template
-    id="public_shift_template_regular_worker"
-    name="Available Tasks Templates for Regular Workers"
+    <!-- Add menu entries -->
+    <data noupdate="1">
+        <record id="menu_work_irregular" model="website.menu">
+            <field name="name">Shifts Irregular</field>
+            <field name="url">/shift_irregular_worker</field>
+            <field name="parent_id" ref="website.main_menu"/>
+            <field name="sequence">50</field>
+        </record>
+        <record id="menu_work_regular" model="website.menu">
+            <field name="name">Shifts Regular</field>
+            <field name="url">/shift_template_regular_worker</field>
+            <field name="parent_id" ref="website.main_menu"/>
+            <field name="sequence">51</field>
+        </record>
+    </data>
+
+
+    <!-- Help texts -->
+    <template
+        id="help_text_public_shift_template_regular_worker"
+        name="Help text for public available shifts template for irregular worker"
     >
-    <t t-call="website.layout">
+        <p class="text-center">
+            Help text or information text.
+        </p>
+    </template>
 
-      <div class="oe_structure"/>
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <h1 class="text-center">
-                Available Tasks Templates for Regular Workers
-              </h1>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <div class="oe_structure"/>
-
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <p class="text-center">
-                Subscribe via the member office or via
-                <a href="mailto:membre@bees-coop.be">membre@bees-coop.be</a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-
-              <div class="oe_structure"/>
-
-              <div class="visible-xs" t-foreach="task_tpls_data" t-as="template_data">
-                <t t-set="template" t-value="template_data[0]"/>
-                <t t-set="has_enough_workers" t-value="template_data[1]"/>
-                <t t-set="highlight_class" t-value="'panel-warning' if not has_enough_workers else 'panel-default'"/>
-                <div t-att-class="'panel %s' % highlight_class">
-                  <div class="panel-heading clearfix">
-                    <div class="panel-title pull-left">
-                      <t t-esc="template.planning_id.name"/> :
-                      <t t-esc="template.day_nb_id.name"/>
-                      <t t-esc='float_to_time(template.start_time)' /> -
-                      <t t-esc='float_to_time(template.end_time)'/>
-                    </div>
-                    <div class="label label-default pull-right"
-                      t-if="template.remaining_worker > 0">
-                      <t t-esc="template.remaining_worker"/> space(s)
-                    </div>
-                    <div class="label label-default pull-right"
-                      t-if="template.remaining_worker == 0">
-                      full
+    <template
+        id="help_text_public_shift_irregular_worker"
+        name="Help text for public Available Shifts for Irregular Worker"
+    >
+        <p class="text-center">
+            Help text or information text.
+        </p>
+    </template>
+
+
+    <!-- Public Available Tasks Templates for Regular Workers -->
+    <template
+        id="public_shift_template_regular_worker"
+        name="Available Tasks Templates for Regular Workers"
+    >
+        <t t-call="portal.portal_layout">
+
+            <div class="o_regular_shift_template">
+
+                <div class="container mt32">
+                    <div class="row mt4">
+                        <div class="col">
+                            <h1 class="text-center">
+                                Available Tasks Templates for Regular Workers
+                            </h1>
+                        </div>
                     </div>
-                  </div>
-                  <div class="panel-body clearfix">
-                    <t t-esc="template.task_type_id.name"/>
-                    <div class="label label-warning pull-right"
-                      t-if="not template.super_coop_id">
-                      Need Super Co-operator
+
+                    <div class="row mt4">
+                        <div class="col">
+                            <t t-call="beesdoo_website_shift.help_text_public_shift_template_regular_worker"/>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
-
-              <table class="hidden-xs table table-striped">
-                <thead>
-                  <tr>
-                    <th>Week</th>
-                    <th>Day</th>
-                    <th>Time</th>
-                    <th>Type of Task</th>
-                    <th>Super Co-operator</th>
-                    <th class="text-center">Available Spaces</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <t t-foreach="task_tpls_data" t-as="template_data">
-                    <t t-set="template" t-value="template_data[0]"/>
-                    <t t-set="has_enough_workers" t-value="template_data[1]"/>
-                    <!-- Row with no super coop will be shown in color -->
-                    <tr t-attf-class="{{ 'warning' if not has_enough_workers else '' }}">
-                      <td>
-                        <t t-esc="template.planning_id.name"/>
-                      </td>
-                      <td>
-                        <t t-esc="template.day_nb_id.name"/>
-                      </td>
-                      <td>
-                        <t t-esc='float_to_time(template.start_time)' /> -
-                        <t t-esc='float_to_time(template.end_time)'/>
-                      </td>
-                      <td>
-                        <t t-esc="template.task_type_id.name"/>
-                      </td>
-                      <td>
-                        <t t-if="template.super_coop_id">
-                          Yes
-                        </t>
-                        <t t-if="not template.super_coop_id">
-                          Not yet
-                        </t>
-                      </td>
-                      <td class="text-center">
-                        <t t-esc="template.remaining_worker"/>
-                      </td>
-                    </tr>
-                  </t>
-                </tbody>
-              </table>
-
-            </div> <!-- col-md -->
-          </div> <!-- row -->
-        </div> <!-- container -->
-      </section>
-
-      <div class="oe_structure"/>
-
-    </t>
-  </template>
-
-
-  <!-- Public Available Shifts for Irregular Workers -->
-    <template
-      id="public_shift_irregular_worker"
-      name="Available Shifts for Irregular Workers"
-    >
-    <t t-call="website.layout">
 
-      <div class="oe_structure"/>
+                <div class="container mb64">
+                    <div class="row mt4 justify-content-center">
+                        <div class="col-12 col-lg-6">
+
+                            <t t-foreach="task_tpls_data" t-as="template_data">
+                                <t t-set="template" t-value="template_data[0]"/>
+                                <t t-set="has_enough_workers" t-value="template_data[1]"/>
+                                <t t-set="highlight_header_class" t-value="'bg-warning' if not has_enough_workers else ''"/>
+                                <t t-set="highlight_class" t-value="'border-warning' if not has_enough_workers else ''"/>
+                                <div t-att-class="'card mt-4 %s' % highlight_class">
+                                    <div t-att-class="'card-header %s clearfix' % highlight_header_class">
+                                        <div class="pull-left">
+                                            <t t-esc="template.planning_id.name"/> :
+                                            <t t-esc="template.day_nb_id.name"/>
+                                            <t t-esc='float_to_time(template.start_time)' /> -
+                                            <t t-esc='float_to_time(template.end_time)'/>
+                                        </div>
+                                        <div class="badge badge-secondary pull-right"
+                                            t-if="template.remaining_worker > 0">
+                                            <t t-esc="template.remaining_worker"/> space(s)
+                                        </div>
+                                        <div class="badge badge-secondary pull-right"
+                                            t-if="template.remaining_worker == 0">
+                                            full
+                                        </div>
+                                    </div>
+                                    <div class="card-body clearfix">
+                                        <t t-esc="template.task_type_id.name"/>
+                                        <div class="badge badge-warning pull-right"
+                                            t-if="not template.super_coop_id">
+                                            Need Super Co-operator
+                                        </div>
+                                    </div>
+                                </div>
+                            </t>
+
+                        </div>
+                    </div>
+                </div>
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <h1 class="text-center">
-                Available Shifts for Irregular Workers
-              </h1>
             </div>
-          </div>
-        </div>
-      </section>
-
-      <div class="oe_structure"/>
-
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
-              <p class="text-center">
-                Subscribe via <a href="mailto:volant@bees-coop.be">volant@bees-coop.be</a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
 
-      <div class="oe_structure"/>
+        </t>
+    </template>
+
 
-      <section class="wrap">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12">
+    <!-- Public Available Shifts for Irregular Workers -->
+    <template
+        id="public_shift_irregular_worker"
+        name="Available Shifts for Irregular Workers"
+    >
+        <t t-call="portal.portal_layout">
+            <t t-set="no_breadcrumbs" t-value="True"/>
+
+            <div class="o_regular_shift_template">
+
+                <div class="container mt32">
+                    <div class="row mt4">
+                        <div class="col">
+                            <h1 class="text-center">
+                                Available Shifts for Irregular Workers
+                            </h1>
+                        </div>
+                    </div>
 
-              <t t-call="beesdoo_website_shift.available_shift_irregular_worker"/>
+                    <div class="row mt4">
+                        <div class="col">
+                            <t t-call="beesdoo_website_shift.help_text_public_shift_irregular_worker "/>
+                        </div>
+                    </div>
+                </div>
 
-            </div> <!-- col-md -->
-          </div> <!-- row -->
-        </div> <!-- container -->
-      </section>
+                <div class="container mb64">
+                    <div class="row mt4 justify-content-center">
+                        <div class="col-12 col-lg-6">
 
-      <div class="oe_structure"/>
+                            <t t-call="beesdoo_website_shift.available_shift_irregular_worker"/>
 
-    </t>
-  </template>
+                        </div>
+                    </div>
+                </div>
 
+            </div>
 
-  
+        </t>
+    </template>
 
 </odoo>