diff --git a/code_backend_theme/__init__.py b/code_backend_theme/__init__.py
new file mode 100644
index 000000000..5042f465e
--- /dev/null
+++ b/code_backend_theme/__init__.py
@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from .hooks import test_pre_init_hook, test_post_init_hook
diff --git a/code_backend_theme/__manifest__.py b/code_backend_theme/__manifest__.py
new file mode 100644
index 000000000..6ff1eb090
--- /dev/null
+++ b/code_backend_theme/__manifest__.py
@@ -0,0 +1,53 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+{
+    "name": "Code Backend Theme V14",
+    "description": """Minimalist and elegant backend theme for Odoo 14, Backend Theme, Theme""",
+    "summary": "Code Backend Theme V14 is an attractive theme for backend",
+    "category": "Theme/Backend",
+    "version": "14.0.1.0.0",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    "depends": ['base', 'web'],
+    "data": [
+        'assets/assets.xml',
+        'views/icons.xml',
+    ],
+    "qweb": [
+        'static/src/xml/styles.xml',
+        'static/src/xml/top_bar.xml',
+        'static/src/xml/sidebar.xml',
+    ],
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'license': 'LGPL-3',
+    'pre_init_hook': 'test_pre_init_hook',
+    'post_init_hook': 'test_post_init_hook',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}
diff --git a/code_backend_theme/assets/assets.xml b/code_backend_theme/assets/assets.xml
new file mode 100644
index 000000000..413431ce8
--- /dev/null
+++ b/code_backend_theme/assets/assets.xml
@@ -0,0 +1,24 @@
+<odoo>
+    <data>
+        <template id="code_backend_theme_assets" name="Code Backend Theme Assets" inherit_id="web.assets_backend">
+            <xpath expr=".">
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/theme_accent.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/navigation_bar.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/datetimepicker.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/theme.scss"/>
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/sidebar.scss"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/fields/basic_fields.js"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/fields/graph.js"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/chrome/sidebar.js"/>
+                <script type="application/javascript" src="/code_backend_theme/static/src/js/chrome/sidebar_menu.js"/>
+                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+            </xpath>
+        </template>
+        <template id="code_backend_theme_assets_frontend" inherit_id="web.assets_frontend">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" href="/code_backend_theme/static/src/scss/login.scss"/>
+                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+            </xpath>
+        </template>
+    </data>
+</odoo>
diff --git a/code_backend_theme/hooks.py b/code_backend_theme/hooks.py
new file mode 100644
index 000000000..936e2e8e2
--- /dev/null
+++ b/code_backend_theme/hooks.py
@@ -0,0 +1,228 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+import base64
+
+from odoo import api, SUPERUSER_ID
+from odoo.modules import get_module_resource
+
+
+def test_pre_init_hook(cr):
+
+    env = api.Environment(cr, SUPERUSER_ID, {})
+    menu_item = env['ir.ui.menu'].search([('parent_id', '=', False)])
+
+    for menu in menu_item:
+        if menu.name == 'Contacts':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Contacts.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Link Tracker':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Link Tracker.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Dashboards':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Dashboards.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Sales':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Sales.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Invoicing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Invoicing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Inventory':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Inventory.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Purchase':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Purchase.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Calendar':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Calendar.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'CRM':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'CRM.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Note':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Note.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Website':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Website.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Point of Sale':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Point of Sale.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Manufacturing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Manufacturing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Repairs':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Repairs.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Email Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Email Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'SMS Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'SMS Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Project':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Project.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Surveys':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Surveys.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Employees':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Employees.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Recruitment':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Recruitment.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Attendances':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Attendances.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Time Off':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Time Off.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Expenses':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Expenses.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Maintenance':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Maintenance.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Live Chat':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Live Chat.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Lunch':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Lunch.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Fleet':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Fleet.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Timesheets':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Timesheets.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Events':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Events.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'eLearning':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'eLearning.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Members':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Members.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+
+
+def test_post_init_hook(cr, registry):
+
+    env = api.Environment(cr, SUPERUSER_ID, {})
+    menu_item = env['ir.ui.menu'].search([('parent_id', '=', False)])
+
+    for menu in menu_item:
+        if menu.name == 'Contacts':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Contacts.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Link Tracker':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Link Tracker.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Dashboards':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Dashboards.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Sales':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Sales.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Invoicing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Invoicing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Inventory':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Inventory.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Purchase':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Purchase.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Calendar':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Calendar.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'CRM':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'CRM.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Note':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Note.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Website':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Website.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Point of Sale':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Point of Sale.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Manufacturing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Manufacturing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Repairs':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Repairs.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Email Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Email Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'SMS Marketing':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'SMS Marketing.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Project':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Project.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Surveys':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Surveys.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Employees':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Employees.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Recruitment':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Recruitment.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Attendances':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Attendances.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Time Off':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Time Off.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Expenses':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Expenses.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Maintenance':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Maintenance.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Live Chat':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Live Chat.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Lunch':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Lunch.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Fleet':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Fleet.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Timesheets':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Timesheets.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Events':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Events.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'eLearning':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'eLearning.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
+        if menu.name == 'Members':
+            img_path = get_module_resource('code_backend_theme', 'static', 'src', 'img', 'icons', 'Members.png')
+            menu.write({'web_icon_data': base64.b64encode(open(img_path, "rb").read())})
diff --git a/code_backend_theme/static/description/assets/all_screens.png b/code_backend_theme/static/description/assets/all_screens.png
new file mode 100644
index 000000000..184446385
Binary files /dev/null and b/code_backend_theme/static/description/assets/all_screens.png differ
diff --git a/code_backend_theme/static/description/assets/hero.png b/code_backend_theme/static/description/assets/hero.png
new file mode 100644
index 000000000..48572a3c7
Binary files /dev/null and b/code_backend_theme/static/description/assets/hero.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._.DS_Store b/code_backend_theme/static/description/assets/icons/._.DS_Store
new file mode 100644
index 000000000..9ad849cdb
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._.DS_Store differ
diff --git a/code_backend_theme/static/description/assets/icons/._cogs.png b/code_backend_theme/static/description/assets/icons/._cogs.png
new file mode 100644
index 000000000..f7148d473
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._cogs.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._consultation.png b/code_backend_theme/static/description/assets/icons/._consultation.png
new file mode 100644
index 000000000..aa8a531ac
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._consultation.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._ecom-black.png b/code_backend_theme/static/description/assets/icons/._ecom-black.png
new file mode 100644
index 000000000..ff71cac34
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._ecom-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._education-black.png b/code_backend_theme/static/description/assets/icons/._education-black.png
new file mode 100644
index 000000000..038789127
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._education-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._hotel-black.png b/code_backend_theme/static/description/assets/icons/._hotel-black.png
new file mode 100644
index 000000000..962af8bbc
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._hotel-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._license.png b/code_backend_theme/static/description/assets/icons/._license.png
new file mode 100644
index 000000000..26ba90fe5
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._license.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._lifebuoy.png b/code_backend_theme/static/description/assets/icons/._lifebuoy.png
new file mode 100644
index 000000000..51bb6606d
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._lifebuoy.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._manufacturing-black.png b/code_backend_theme/static/description/assets/icons/._manufacturing-black.png
new file mode 100644
index 000000000..54bc914ea
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._manufacturing-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._pos-black.png b/code_backend_theme/static/description/assets/icons/._pos-black.png
new file mode 100644
index 000000000..a11f4cd96
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._pos-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._puzzle.png b/code_backend_theme/static/description/assets/icons/._puzzle.png
new file mode 100644
index 000000000..f7e7e7e33
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._puzzle.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._restaurant-black.png b/code_backend_theme/static/description/assets/icons/._restaurant-black.png
new file mode 100644
index 000000000..33ea178a3
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._restaurant-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._service-black.png b/code_backend_theme/static/description/assets/icons/._service-black.png
new file mode 100644
index 000000000..0ec2cf2a5
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._service-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._trading-black.png b/code_backend_theme/static/description/assets/icons/._trading-black.png
new file mode 100644
index 000000000..d6299d375
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._trading-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._training.png b/code_backend_theme/static/description/assets/icons/._training.png
new file mode 100644
index 000000000..9bade5f8e
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._training.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._update.png b/code_backend_theme/static/description/assets/icons/._update.png
new file mode 100644
index 000000000..48784837e
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._update.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._user.png b/code_backend_theme/static/description/assets/icons/._user.png
new file mode 100644
index 000000000..d5b105ad2
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._user.png differ
diff --git a/code_backend_theme/static/description/assets/icons/._wrench.png b/code_backend_theme/static/description/assets/icons/._wrench.png
new file mode 100644
index 000000000..db48ce407
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/._wrench.png differ
diff --git a/code_backend_theme/static/description/assets/icons/chevron.png b/code_backend_theme/static/description/assets/icons/chevron.png
new file mode 100644
index 000000000..2089293d6
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/chevron.png differ
diff --git a/code_backend_theme/static/description/assets/icons/cogs.png b/code_backend_theme/static/description/assets/icons/cogs.png
new file mode 100644
index 000000000..95d0bad62
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/cogs.png differ
diff --git a/code_backend_theme/static/description/assets/icons/consultation.png b/code_backend_theme/static/description/assets/icons/consultation.png
new file mode 100644
index 000000000..8319d4baa
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/consultation.png differ
diff --git a/code_backend_theme/static/description/assets/icons/ecom-black.png b/code_backend_theme/static/description/assets/icons/ecom-black.png
new file mode 100644
index 000000000..a9385ff13
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/ecom-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/education-black.png b/code_backend_theme/static/description/assets/icons/education-black.png
new file mode 100644
index 000000000..3eb09b27b
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/education-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/feature-icons/._lifebuoy.png b/code_backend_theme/static/description/assets/icons/feature-icons/._lifebuoy.png
new file mode 100644
index 000000000..4f178d2ad
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/feature-icons/._lifebuoy.png differ
diff --git a/code_backend_theme/static/description/assets/icons/feature-icons/document.png b/code_backend_theme/static/description/assets/icons/feature-icons/document.png
new file mode 100644
index 000000000..4054e8480
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/feature-icons/document.png differ
diff --git a/code_backend_theme/static/description/assets/icons/feature-icons/down.png b/code_backend_theme/static/description/assets/icons/feature-icons/down.png
new file mode 100644
index 000000000..65a94a23b
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/feature-icons/down.png differ
diff --git a/code_backend_theme/static/description/assets/icons/feature-icons/lifebuoy.png b/code_backend_theme/static/description/assets/icons/feature-icons/lifebuoy.png
new file mode 100644
index 000000000..658d56ccc
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/feature-icons/lifebuoy.png differ
diff --git a/code_backend_theme/static/description/assets/icons/hotel-black.png b/code_backend_theme/static/description/assets/icons/hotel-black.png
new file mode 100644
index 000000000..130f613be
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/hotel-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/license.png b/code_backend_theme/static/description/assets/icons/license.png
new file mode 100644
index 000000000..a5869797e
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/license.png differ
diff --git a/code_backend_theme/static/description/assets/icons/lifebuoy.png b/code_backend_theme/static/description/assets/icons/lifebuoy.png
new file mode 100644
index 000000000..658d56ccc
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/lifebuoy.png differ
diff --git a/code_backend_theme/static/description/assets/icons/manufacturing-black.png b/code_backend_theme/static/description/assets/icons/manufacturing-black.png
new file mode 100644
index 000000000..697eb0e9f
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/manufacturing-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/pos-black.png b/code_backend_theme/static/description/assets/icons/pos-black.png
new file mode 100644
index 000000000..97c0f90c1
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/pos-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/puzzle.png b/code_backend_theme/static/description/assets/icons/puzzle.png
new file mode 100644
index 000000000..65cf854e7
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/puzzle.png differ
diff --git a/code_backend_theme/static/description/assets/icons/restaurant-black.png b/code_backend_theme/static/description/assets/icons/restaurant-black.png
new file mode 100644
index 000000000..4a35eb939
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/restaurant-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/service-black.png b/code_backend_theme/static/description/assets/icons/service-black.png
new file mode 100644
index 000000000..301ab51cb
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/service-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/trading-black.png b/code_backend_theme/static/description/assets/icons/trading-black.png
new file mode 100644
index 000000000..9398ba2f1
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/trading-black.png differ
diff --git a/code_backend_theme/static/description/assets/icons/training.png b/code_backend_theme/static/description/assets/icons/training.png
new file mode 100644
index 000000000..884ca024d
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/training.png differ
diff --git a/code_backend_theme/static/description/assets/icons/update.png b/code_backend_theme/static/description/assets/icons/update.png
new file mode 100644
index 000000000..ecbc5a01a
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/update.png differ
diff --git a/code_backend_theme/static/description/assets/icons/user.png b/code_backend_theme/static/description/assets/icons/user.png
new file mode 100644
index 000000000..6ffb23d9f
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/user.png differ
diff --git a/code_backend_theme/static/description/assets/icons/wrench.png b/code_backend_theme/static/description/assets/icons/wrench.png
new file mode 100644
index 000000000..6c04dea0f
Binary files /dev/null and b/code_backend_theme/static/description/assets/icons/wrench.png differ
diff --git a/code_backend_theme/static/description/assets/menu_focus.png b/code_backend_theme/static/description/assets/menu_focus.png
new file mode 100644
index 000000000..713e36058
Binary files /dev/null and b/code_backend_theme/static/description/assets/menu_focus.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/alert.png b/code_backend_theme/static/description/assets/screenshots/alert.png
new file mode 100644
index 000000000..71196c7c2
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/alert.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/apps_uninstall.png b/code_backend_theme/static/description/assets/screenshots/apps_uninstall.png
new file mode 100644
index 000000000..8ff9ec779
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/apps_uninstall.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/chatters.png b/code_backend_theme/static/description/assets/screenshots/chatters.png
new file mode 100644
index 000000000..42e6a3592
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/chatters.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/discuss.png b/code_backend_theme/static/description/assets/screenshots/discuss.png
new file mode 100644
index 000000000..abba065e0
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/discuss.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/form.png b/code_backend_theme/static/description/assets/screenshots/form.png
new file mode 100644
index 000000000..c5520beaa
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/form.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/form_product.png b/code_backend_theme/static/description/assets/screenshots/form_product.png
new file mode 100644
index 000000000..10d2ca748
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/form_product.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/graph.png b/code_backend_theme/static/description/assets/screenshots/graph.png
new file mode 100644
index 000000000..0d7135cdb
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/graph.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/group.png b/code_backend_theme/static/description/assets/screenshots/group.png
new file mode 100644
index 000000000..926afe5f2
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/group.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/invoice.png b/code_backend_theme/static/description/assets/screenshots/invoice.png
new file mode 100644
index 000000000..8a5e13e9c
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/invoice.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/kanban_empl.png b/code_backend_theme/static/description/assets/screenshots/kanban_empl.png
new file mode 100644
index 000000000..61d4423f6
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/kanban_empl.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/kanban_group.png b/code_backend_theme/static/description/assets/screenshots/kanban_group.png
new file mode 100644
index 000000000..4d04525fb
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/kanban_group.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/kanban_product.png b/code_backend_theme/static/description/assets/screenshots/kanban_product.png
new file mode 100644
index 000000000..fe95a1de5
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/kanban_product.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/kanban_recruits.png b/code_backend_theme/static/description/assets/screenshots/kanban_recruits.png
new file mode 100644
index 000000000..25d2132b0
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/kanban_recruits.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/kanban_sale.png b/code_backend_theme/static/description/assets/screenshots/kanban_sale.png
new file mode 100644
index 000000000..de2e9bac1
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/kanban_sale.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/kiosk.png b/code_backend_theme/static/description/assets/screenshots/kiosk.png
new file mode 100644
index 000000000..34ac29fde
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/kiosk.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/list_purchase.png b/code_backend_theme/static/description/assets/screenshots/list_purchase.png
new file mode 100644
index 000000000..e46b5d785
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/list_purchase.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/list_sales.png b/code_backend_theme/static/description/assets/screenshots/list_sales.png
new file mode 100644
index 000000000..bb852c213
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/list_sales.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/login.png b/code_backend_theme/static/description/assets/screenshots/login.png
new file mode 100644
index 000000000..cb6e824f5
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/login.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/modal.png b/code_backend_theme/static/description/assets/screenshots/modal.png
new file mode 100644
index 000000000..b8fd4ce07
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/modal.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/settings.png b/code_backend_theme/static/description/assets/screenshots/settings.png
new file mode 100644
index 000000000..f8d344c3f
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/settings.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/sidebar-gif.gif b/code_backend_theme/static/description/assets/screenshots/sidebar-gif.gif
new file mode 100644
index 000000000..072bc8283
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/sidebar-gif.gif differ
diff --git a/code_backend_theme/static/description/assets/screenshots/sidebar_list.png b/code_backend_theme/static/description/assets/screenshots/sidebar_list.png
new file mode 100644
index 000000000..a6b7e0e29
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/sidebar_list.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/sidebar_settings.png b/code_backend_theme/static/description/assets/screenshots/sidebar_settings.png
new file mode 100644
index 000000000..3dc7c280a
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/sidebar_settings.png differ
diff --git a/code_backend_theme/static/description/assets/screenshots/tab.png b/code_backend_theme/static/description/assets/screenshots/tab.png
new file mode 100644
index 000000000..de07e4a25
Binary files /dev/null and b/code_backend_theme/static/description/assets/screenshots/tab.png differ
diff --git a/code_backend_theme/static/description/banner.png b/code_backend_theme/static/description/banner.png
new file mode 100644
index 000000000..60cf8f060
Binary files /dev/null and b/code_backend_theme/static/description/banner.png differ
diff --git a/code_backend_theme/static/description/icon.png b/code_backend_theme/static/description/icon.png
new file mode 100644
index 000000000..d620656d6
Binary files /dev/null and b/code_backend_theme/static/description/icon.png differ
diff --git a/code_backend_theme/static/description/index.html b/code_backend_theme/static/description/index.html
new file mode 100644
index 000000000..0cb9706d1
--- /dev/null
+++ b/code_backend_theme/static/description/index.html
@@ -0,0 +1,959 @@
+<!-- HERO -->
+<div class="container">
+    <div class="row" style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
+        <div class="col-lg-12 d-flex flex-column align-items-center">
+            <h1 class="text-center text-uppercase"
+                style="font-family: Montserrat, 'sans-serif' !important; font-weight: bolder !important; font-size: 2.5rem !important; color: #212121;">
+                Code Backend Theme
+            </h1>
+            <p class="my-1 text-center text-uppercase"
+                style="letter-spacing: 4px !important; color: #74788D !important;">Minimalist and Elegant Backend
+                Theme for Odoo 14</p>
+        </div>
+        <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin: 2rem 0;">
+            <img src="./assets/hero.png" width="100%" height="auto" class="img-responsive">
+        </div>
+    </div>
+</div>
+<!-- END OF HERO -->
+
+<!-- OVERVIEW -->
+<div class="container">
+    <div class="row" style="padding: 0rem 2.5rem !important; background-color: #fff !important;">
+        <div class="col-lg-12 d-flex flex-column justify-content-center">
+            <p class="my-1 text-center"
+                style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
+                The Code Backend Theme V14 Gives You The Fully Modified View with a Full Screen Display.
+                This is a Minimalist and Elegant Backend Theme for Odoo 14.
+                This Theme Will Change Your Old Experience to a New Experience With Odoo.
+                It is a Perfect Choice for Your Odoo Backend and an Attractive Theme for Your Odoo 14.
+                It will Give You a Clean Layout with the New Color Combination and a Modified Font. It Have a
+                Sidebar with
+                New App Icons and Company Logo. This Will Change Your Old Kanban, List and Form Views to A Fully
+                Modified Views.
+            </p>
+        </div>
+        <div class="col-lg-12 mt-4">
+            <div class="alert alert-warning text-center" role="alert">
+                <i class="fa fa-exclamation-triangle mr-2" aria-hidden="true"></i>Please make sure that you install all
+                your apps prior to the installation of this theme.
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END OF OVERVIEW-->
+
+<!-- FEATURE -->
+<div class="container" style="margin-top: 3rem;">
+    <div class="row">
+        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+            <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+            <h2
+                style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                Features</h2>
+        </div>
+    </div>
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">Kanban Group View</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    The Code Backend Theme V14 Gives You The Fully Modified Kanban View and Kanban Group View.
+                    The Section Wise Separated Stages are have a Good Looking Experience And a Extra Ordinary Design
+                    for Your Content Tiles is Looking Great.
+                    It will Give You a Clean Layout with the New Color Combination and a Modified Font.
+                </h6>
+                <div class="row mt-4">
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modified Font</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Full Screen View</p>
+                        </span>
+                    </div>
+
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Stages are Seperated in View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Clean Layout</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Buttons with New Colors</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_group.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- FEATURE -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">List View</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    The All new Code Backend Theme V14 Gives You The Fully Modified List View and This Table Design
+                    is Also Have Awesome Design and it Gives You More Beauty for Your Odoo Backend.
+                    It will Give You a Clean Layout with the New Color Combination and a Modified Font.
+                </h6>
+                <div class="row mt-4">
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modified Table Style</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Scroll Bar</p>
+                        </span>
+                    </div>
+
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Status Tag</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Scrollbar</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Buttons with New Colors</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/list_sales.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- FEATURE -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">Form View</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    Code Backend Theme Gives You The Fully Modified Form View with a Full Screen Experience. It will
+                    Give You a Clean Layout with the New Color Combination
+                    and a Modified Font.
+                </h6>
+                <div class="row mt-4">
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modified Form Style</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Full Screen Form View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Looks for Tabs</p>
+                        </span>
+                    </div>
+
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Style for Required Field</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Chatter Style Under Form View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Looks for Status Button</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/form.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- TWO COLUMN BLOCK -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row" style="margin: 2rem; ; min-width: 100% !important;">
+
+            <div class="col-lg-8" style="padding: 1rem 1rem 1rem 0rem !important;">
+                <div class=" shadow"
+                    style="background-color: #fff !important; border-top:  3px solid #556EE6 !important;  padding: 2.5rem 0rem 0rem 0rem !important;">
+                    <h3 class="mx-4 mt-3" style="font-weight: 700 !important;">Overview</h3>
+                    <h6 class="mx-4"
+                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                        Code Backend Theme V14 is an Attractive Theme for Your Odoo 14. This Theme Will Change Your
+                        All Experience With Odoo.
+                        The Minimalist and Elegant Backend Theme for Odoo 14. This Theme is a Perfect Choice for
+                        Your Odoo Backend."
+                    </h6>
+                    <div class="mx-4 my-4">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Modifed Structure for All Type Views</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Style for Active Menus, Radio Buttons and Checkboxes</p>
+                        </span>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>New Look for All Applications</p>
+                        </span>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>A Clean layout and New Font Style</p>
+                        </span>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                                style="color:#556EE6 !important; margin-top: 5px !important;"></i>
+                            <p>Sidebar with New Menu Icons</p>
+                        </span>
+
+                    </div>
+                    <img src="./assets/all_screens.png" class="img-responsive" width="100% !important"
+                        height="auto !important">
+                </div>
+            </div>
+
+            <div class="col-lg-4" style="padding: 1rem 0rem 1rem 1rem!important;">
+                <div class="shadow"
+                    style="background-color: #fff !important; border-top:  3px solid #556EE6 !important; padding: 2.5rem 0rem 0rem 1.5rem !important; position: relative; overflow: hidden !important;">
+                    <div class="text-center"
+                        style="background-color: #556EE6 !important; color: #fff !important; font-size: 10px !important; font-weight: 500 !important; width: 100px !important; padding: 3px 0px 3px 20px !important; white-space: nowrap !important; position: absolute !important; transform: rotate(40deg) !important; top: 0px !important; right: -20px !important; ">
+                        New</div>
+                    <h3 class="mt-3" style="font-weight: 700 !important;">All-New Menu Design</h3>
+                    <h6
+                        style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important; padding-bottom: 6.7rem !important;">
+                        The All-New Menu Design is Main Attractive Section for the Code Backend Theme. The Sidebar
+                        have New Minimalist
+                        Icons for Applications in Odoo. Also the Sidebar Have Closing and Opening Option.
+                        Customisable Logo Attached in Sidebar
+                        That is Automatically Fetch Your Company Logo.
+                    </h6>
+                    <img src="./assets/menu_focus.png" class="img-responsive" width="100% !important"
+                        height="auto !important">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <!-- END OF TWO COLUMN BLOCK -->
+
+
+    <!-- FEATURE -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #556EE6 !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2.5rem 1.5rem!important;">
+                <h3 style="font-weight: 700 !important;">Easily Access Sidebar Menu</h3>
+                <h6
+                    style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+                    Reveal the sidebar menu with just a click. Sidebar menu features all the relevant links to navigate
+                    through the application.
+                    Hiding the sidebar leaves more space on the main area offering a distraction-free view that lets you
+                    focus on what matters the most.
+                </h6>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/sidebar-gif.gif" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+    </div>
+    <!-- END OF FEATURE -->
+
+    <!-- SCREENSHOTS -->
+    <div class="container" style="margin-top: 3rem;">
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Screenshots</h2>
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">1</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Login Page</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/login.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">2</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Group By View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/group.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">3</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Settings Page</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/settings.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">4</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Discuss Page</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/discuss.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">5</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Product Kanban View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_product.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">6</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Purchase List View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/list_purchase.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">7</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Product View with Smart Buttons</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/form_product.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">8</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Modified Alert Notification are Placed on Right Bottom of Display</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/alert.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">9</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Wizards and User Error Popups</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/modal.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">10</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">New Looks for The Tabs</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/tab.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">11</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Recruitment Kanban View With Ribbons</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_recruits.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">12</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Sales Kanban View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_sale.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">13</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Modified Kanban View for Employees With New Designed Category Section</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kanban_empl.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">14</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Newly Customised Chatter and Popup Chatter</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/chatters.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">15</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">New Looks for Wizards and Buttons with New Colors</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/apps_uninstall.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">16</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Sidebar with List View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/sidebar_list.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">17</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Sidebar with Settings Page View</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/sidebar_settings.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">18</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Attendance Pages</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/kiosk.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">19</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Invoice Pages</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/invoice.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+        <div class="row shadow"
+            style="margin: 2rem; padding: 0rem !important; background-color: #fff !important; border-top:  3px solid #74788D !important; min-width: 100% !important;">
+            <div class="col-lg-12" style="padding: 2rem 1.5rem!important;">
+                <div class="d-flex my-3">
+                    <div class="d-flex justify-content-center align-items-center"
+                        style="background-color: #556EE6 !important; border: 4px solid #D4DAF9 !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
+                        <h6 style="margin-top: 0.3rem; color: #fff !important;">20</h6>
+                    </div>
+                    <h6 class="mt-2 ml-2">Graphs with Sidebar</h6>
+                </div>
+            </div>
+            <div class="col-lg-12" style="padding-left: 0 !important; padding-right: 0!important;">
+                <img src="assets/screenshots/graph.png" width="100%" height="auto" class="img-responsive">
+            </div>
+        </div>
+
+    </div>
+
+    <!-- END OF SCREENSHOTS -->
+
+    <!-- OUR SERVICES -->
+    <section class="container" style="margin-top: 6rem !important;">
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Our Services</h2>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Customization</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Implementation</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Support</h6>
+            </div>
+
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Hire
+                    Odoo
+                    Developer</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Integration</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Migration</h6>
+            </div>
+
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Consultancy</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Implementation</h6>
+            </div>
+
+            <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                    style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                    <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+                </div>
+                <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                    Odoo
+                    Licensing Consultancy</h6>
+            </div>
+        </div>
+    </section>
+    <!-- END OF END OF OUR SERVICES -->
+
+    <!-- OUR INDUSTRIES -->
+    <section class="container" style="margin-top: 6rem !important; background-color: #fff !important;">
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Our Industries</h2>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Trading
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Easily
+                        procure
+                        and
+                        sell your products</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        POS
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Easy
+                        configuration
+                        and convivial experience</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px"
+                        width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Education
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">A
+                        platform for
+                        educational management</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                        width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Manufacturing
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Plan,
+                        track and
+                        schedule your operations</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        E-commerce &amp; Website
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Mobile
+                        friendly,
+                        awe-inspiring product pages</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Service Management
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Keep
+                        track of
+                        services and invoice</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px"
+                        width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Restaurant
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Run
+                        your bar or
+                        restaurant methodically</p>
+                </div>
+            </div>
+
+            <div class="col-lg-3">
+                <div class="my-4 d-flex flex-column justify-content-center"
+                    style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                    <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                    <h5
+                        style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                        Hotel Management
+                    </h5>
+                    <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">An
+                        all-inclusive
+                        hotel management application</p>
+                </div>
+            </div>
+
+        </div>
+    </section>
+
+    <!-- END OF END OF OUR INDUSTRIES -->
+
+    <!-- FOOTER -->
+    <!-- Footer Section -->
+    <section class="container" style="margin: 5rem auto 2rem; background-color: #fff !important;">
+        <div class="row" style="max-width:1540px;">
+            <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mb-4">
+                <hr class="position-absolute" style="border: 1px solid #c4c6cc !important; width: 40% !important;">
+                <h2
+                    style="font-weight: 300 !important; background-color: #fff !important; z-index: 1 !important; padding: 0 1rem !important;">
+                    Need Help?</h2>
+            </div>
+        </div>
+
+        <!-- Contact Cards -->
+        <div class="row d-flex justify-content-center align-items-center"
+            style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+            <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+                <div class="row mt-4">
+                    <div class="col-lg-4">
+                        <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                            style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+                    </div>
+                    <div class="col-lg-4">
+                        <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+                            class="btn btn-block mb-2 deep_hover"
+                            style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+                                class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
+                    </div>
+                    <div class="col-lg-4">
+                        <a href="mailto:info@cybrosys.com" target="_blank" class="btn btn-block deep_hover"
+                            style="text-decoration: none; background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                class="fa fa-envelope mr-2"></i>info@cybrosys.com</a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <!-- End of Contact Cards -->
+    </section>
+    <!-- Footer -->
+    <section class="oe_container" style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
+        <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+            <!-- Logo -->
+            <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+                <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+            </div>
+            <!-- End of Logo -->
+        </div>
+    </section>
+    <!-- END OF FOOTER -->
\ No newline at end of file
diff --git a/code_backend_theme/static/description/theme_screenshot.png b/code_backend_theme/static/description/theme_screenshot.png
new file mode 100644
index 000000000..7fd2c7f2f
Binary files /dev/null and b/code_backend_theme/static/description/theme_screenshot.png differ
diff --git a/code_backend_theme/static/src/img/code_logo.png b/code_backend_theme/static/src/img/code_logo.png
new file mode 100644
index 000000000..124152a05
Binary files /dev/null and b/code_backend_theme/static/src/img/code_logo.png differ
diff --git a/code_backend_theme/static/src/img/icons/Attendances.png b/code_backend_theme/static/src/img/icons/Attendances.png
new file mode 100644
index 000000000..6f2e83d36
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Attendances.png differ
diff --git a/code_backend_theme/static/src/img/icons/CRM.png b/code_backend_theme/static/src/img/icons/CRM.png
new file mode 100644
index 000000000..01e326198
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/CRM.png differ
diff --git a/code_backend_theme/static/src/img/icons/Calendar.png b/code_backend_theme/static/src/img/icons/Calendar.png
new file mode 100644
index 000000000..bfa7e4761
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Calendar.png differ
diff --git a/code_backend_theme/static/src/img/icons/Contacts.png b/code_backend_theme/static/src/img/icons/Contacts.png
new file mode 100644
index 000000000..5865350a0
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Contacts.png differ
diff --git a/code_backend_theme/static/src/img/icons/Dashboards.png b/code_backend_theme/static/src/img/icons/Dashboards.png
new file mode 100644
index 000000000..0ab419664
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Dashboards.png differ
diff --git a/code_backend_theme/static/src/img/icons/Email Marketing.png b/code_backend_theme/static/src/img/icons/Email Marketing.png
new file mode 100644
index 000000000..66c873ab5
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Email Marketing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Employees.png b/code_backend_theme/static/src/img/icons/Employees.png
new file mode 100644
index 000000000..85aff52c1
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Employees.png differ
diff --git a/code_backend_theme/static/src/img/icons/Events.png b/code_backend_theme/static/src/img/icons/Events.png
new file mode 100644
index 000000000..b0c5e7188
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Events.png differ
diff --git a/code_backend_theme/static/src/img/icons/Expenses.png b/code_backend_theme/static/src/img/icons/Expenses.png
new file mode 100644
index 000000000..67406ddc3
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Expenses.png differ
diff --git a/code_backend_theme/static/src/img/icons/Fleet.png b/code_backend_theme/static/src/img/icons/Fleet.png
new file mode 100644
index 000000000..422959bf3
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Fleet.png differ
diff --git a/code_backend_theme/static/src/img/icons/Inventory.png b/code_backend_theme/static/src/img/icons/Inventory.png
new file mode 100644
index 000000000..5dd73dd19
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Inventory.png differ
diff --git a/code_backend_theme/static/src/img/icons/Invoicing.png b/code_backend_theme/static/src/img/icons/Invoicing.png
new file mode 100644
index 000000000..9be39f578
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Invoicing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Link Tracker.png b/code_backend_theme/static/src/img/icons/Link Tracker.png
new file mode 100644
index 000000000..b468d30c4
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Link Tracker.png differ
diff --git a/code_backend_theme/static/src/img/icons/Live Chat.png b/code_backend_theme/static/src/img/icons/Live Chat.png
new file mode 100644
index 000000000..60a44e72e
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Live Chat.png differ
diff --git a/code_backend_theme/static/src/img/icons/Lunch.png b/code_backend_theme/static/src/img/icons/Lunch.png
new file mode 100644
index 000000000..d8a2e95b9
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Lunch.png differ
diff --git a/code_backend_theme/static/src/img/icons/Maintenance.png b/code_backend_theme/static/src/img/icons/Maintenance.png
new file mode 100644
index 000000000..a0bb8a72b
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Maintenance.png differ
diff --git a/code_backend_theme/static/src/img/icons/Manufacturing.png b/code_backend_theme/static/src/img/icons/Manufacturing.png
new file mode 100644
index 000000000..4b922f995
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Manufacturing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Members.png b/code_backend_theme/static/src/img/icons/Members.png
new file mode 100644
index 000000000..c538782c8
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Members.png differ
diff --git a/code_backend_theme/static/src/img/icons/Note.png b/code_backend_theme/static/src/img/icons/Note.png
new file mode 100644
index 000000000..329f473e2
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Note.png differ
diff --git a/code_backend_theme/static/src/img/icons/Point of Sale.png b/code_backend_theme/static/src/img/icons/Point of Sale.png
new file mode 100644
index 000000000..bbdb5a1d4
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Point of Sale.png differ
diff --git a/code_backend_theme/static/src/img/icons/Project.png b/code_backend_theme/static/src/img/icons/Project.png
new file mode 100644
index 000000000..c22fe19fb
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Project.png differ
diff --git a/code_backend_theme/static/src/img/icons/Purchase.png b/code_backend_theme/static/src/img/icons/Purchase.png
new file mode 100644
index 000000000..457740d18
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Purchase.png differ
diff --git a/code_backend_theme/static/src/img/icons/Recruitment.png b/code_backend_theme/static/src/img/icons/Recruitment.png
new file mode 100644
index 000000000..b3a2dc763
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Recruitment.png differ
diff --git a/code_backend_theme/static/src/img/icons/Repairs.png b/code_backend_theme/static/src/img/icons/Repairs.png
new file mode 100644
index 000000000..0547711f1
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Repairs.png differ
diff --git a/code_backend_theme/static/src/img/icons/SMS Marketing.png b/code_backend_theme/static/src/img/icons/SMS Marketing.png
new file mode 100644
index 000000000..6b90e20d8
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/SMS Marketing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Sales.png b/code_backend_theme/static/src/img/icons/Sales.png
new file mode 100644
index 000000000..6259ec78e
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Sales.png differ
diff --git a/code_backend_theme/static/src/img/icons/Surveys.png b/code_backend_theme/static/src/img/icons/Surveys.png
new file mode 100644
index 000000000..f422f46e2
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Surveys.png differ
diff --git a/code_backend_theme/static/src/img/icons/Time Off.png b/code_backend_theme/static/src/img/icons/Time Off.png
new file mode 100644
index 000000000..c34cde490
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Time Off.png differ
diff --git a/code_backend_theme/static/src/img/icons/Timesheets.png b/code_backend_theme/static/src/img/icons/Timesheets.png
new file mode 100644
index 000000000..3c552b3e6
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Timesheets.png differ
diff --git a/code_backend_theme/static/src/img/icons/Website.png b/code_backend_theme/static/src/img/icons/Website.png
new file mode 100644
index 000000000..cd10570fa
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Website.png differ
diff --git a/code_backend_theme/static/src/img/icons/apps.png b/code_backend_theme/static/src/img/icons/apps.png
new file mode 100644
index 000000000..ce5cf33fc
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/apps.png differ
diff --git a/code_backend_theme/static/src/img/icons/discuss.png b/code_backend_theme/static/src/img/icons/discuss.png
new file mode 100644
index 000000000..382b72f87
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/discuss.png differ
diff --git a/code_backend_theme/static/src/img/icons/eLearning.png b/code_backend_theme/static/src/img/icons/eLearning.png
new file mode 100644
index 000000000..e0cd5c2a5
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/eLearning.png differ
diff --git a/code_backend_theme/static/src/img/icons/settings.png b/code_backend_theme/static/src/img/icons/settings.png
new file mode 100644
index 000000000..7ff68e472
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/settings.png differ
diff --git a/code_backend_theme/static/src/js/chrome/sidebar.js b/code_backend_theme/static/src/js/chrome/sidebar.js
new file mode 100644
index 000000000..a04453b75
--- /dev/null
+++ b/code_backend_theme/static/src/js/chrome/sidebar.js
@@ -0,0 +1,44 @@
+odoo.define('code_backend_theme.SideBar', function (require) {
+    "use strict";
+
+    var Widget = require('web.Widget');
+    var SideBar = Widget.extend({
+        events: _.extend({}, Widget.prototype.events, {
+            'click .nav-link': '_onAppsMenuItemClicked',
+        }),
+        template: "code_backend_theme.SideBar",
+
+        init: function (parent, menuData) {
+            this._super.apply(this, arguments);
+            this._apps = _.map(menuData.children, function (appMenuData) {
+                return {
+                    actionID: parseInt(appMenuData.action.split(',')[1]),
+                    menuID: appMenuData.id,
+                    name: appMenuData.name,
+                    xmlID: appMenuData.xmlid,
+                    web_icon_data: appMenuData.web_icon_data,
+                };
+            });
+        },
+
+        getApps: function () {
+            return this._apps;
+        },
+
+        _openApp: function (app) {
+            this.trigger_up('app_clicked', {
+                action_id: app.actionID,
+                menu_id: app.menuID,
+            });
+        },
+
+        _onAppsMenuItemClicked: function (ev) {
+            var $target = $(ev.currentTarget);
+            var actionID = $target.data('action-id');
+            var menuID = $target.data('menu-id');
+            var app = _.findWhere(this._apps, { actionID: actionID, menuID: menuID });
+            this._openApp(app);
+        },
+    });
+    return SideBar;
+});
\ No newline at end of file
diff --git a/code_backend_theme/static/src/js/chrome/sidebar_menu.js b/code_backend_theme/static/src/js/chrome/sidebar_menu.js
new file mode 100644
index 000000000..ec0edb617
--- /dev/null
+++ b/code_backend_theme/static/src/js/chrome/sidebar_menu.js
@@ -0,0 +1,72 @@
+odoo.define('code_backend_theme.SidebarMenu', function (require) {
+    "use strict";
+
+    const config = require("web.config");
+    const Menu = require("web.Menu");
+    const SideBar = require("code_backend_theme.SideBar");
+
+    Menu.include({
+        start() {
+            var res = this._super.apply(this, arguments);
+            this.sidebar_apps = this.$('.sidebar_panel');
+            this._sideBar = new SideBar(this, this.menu_data);
+            var sideBar = this._sideBar.appendTo(this.sidebar_apps);
+
+            return res, sideBar
+        },
+    });
+
+    //sidebar toggle effect
+    $(document).on("click", "#closeSidebar", function(event){
+        $("#closeSidebar").hide();
+        $("#openSidebar").show();
+    });
+    $(document).on("click", "#openSidebar", function(event){
+        $("#openSidebar").hide();
+        $("#closeSidebar").show();
+    });
+    $(document).on("click", "#openSidebar", function(event){
+        $("#sidebar_panel").css({'display':'block'});
+        $(".o_action_manager").css({'margin-left': '200px','transition':'all .1s linear'});
+        $(".top_heading").css({'margin-left': '180px','transition':'all .1s linear'});
+
+        //add class in navbar
+        var navbar = $(".o_main_navbar");
+        var navbar_id = navbar.data("id");
+        $("nav").addClass(navbar_id);
+        navbar.addClass("small_nav");
+    });
+    $(document).on("click", "#closeSidebar", function(event){
+        $("#sidebar_panel").css({'display':'none'});
+        $(".o_action_manager").css({'margin-left': '0px'});
+        $(".top_heading").css({'margin-left': '0px'});
+
+        //remove class in navbar
+        var navbar = $(".o_main_navbar");
+        var navbar_id = navbar.data("id");
+        $("nav").removeClass(navbar_id);
+        navbar.removeClass("small_nav");
+    });
+
+    $(document).on("click", ".sidebar a", function(event){
+        var menu = $(".sidebar a");
+        var $this = $(this);
+        var id = $this.data("id");
+        $("header").removeClass().addClass(id);
+        menu.removeClass("active");
+        $this.addClass("active");
+
+        //sidebar close on menu-item click
+        $("#sidebar_panel").css({'display':'none'});
+        $(".o_action_manager").css({'margin-left': '0px'});
+        $(".top_heading").css({'margin-left': '0px'});
+        $("#closeSidebar").hide();
+        $("#openSidebar").show();
+
+        //remove class in navbar
+        var navbar = $(".o_main_navbar");
+        var navbar_id = navbar.data("id");
+        $("nav").removeClass(navbar_id);
+        navbar.removeClass("small_nav");
+    });
+});
\ No newline at end of file
diff --git a/code_backend_theme/static/src/js/fields/basic_fields.js b/code_backend_theme/static/src/js/fields/basic_fields.js
new file mode 100644
index 000000000..1680bd98d
--- /dev/null
+++ b/code_backend_theme/static/src/js/fields/basic_fields.js
@@ -0,0 +1,53 @@
+odoo.define('code_backend_theme.fields', function (require) {
+    "use strict";
+
+    var basic_fields = require("web.basic_fields");
+
+    //Changing Sales Team Graph color
+    var SalesTeamGraph = basic_fields.JournalDashboardGraph.include({
+
+        _getBarChartConfig: function () {
+            this._super();
+            var data = [];
+            var labels = [];
+            var backgroundColor = [];
+
+            this.data[0].values.forEach(function (pt) {
+                data.push(pt.value);
+                labels.push(pt.label);
+                var color = pt.type === 'past' ? '#ccbdc8' : (pt.type === 'future' ? '#f1b44c' : '#556ee6');
+                backgroundColor.push(color);
+            });
+            return {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        data: data,
+                        fill: 'start',
+                        label: this.data[0].key,
+                        backgroundColor: backgroundColor,
+                    }]
+                },
+                options: {
+                    legend: {display: false},
+                    scales: {
+                        yAxes: [{display: false}],
+                    },
+                    maintainAspectRatio: false,
+                    tooltips: {
+                        intersect: false,
+                        position: 'nearest',
+                        caretSize: 0,
+                    },
+                    elements: {
+                        line: {
+                            tension: 0.000001
+                        }
+                    },
+                },
+            };
+        },
+    });
+});
+
diff --git a/code_backend_theme/static/src/js/fields/graph.js b/code_backend_theme/static/src/js/fields/graph.js
new file mode 100644
index 000000000..e5f7c678a
--- /dev/null
+++ b/code_backend_theme/static/src/js/fields/graph.js
@@ -0,0 +1,101 @@
+odoo.define('code_backend_theme.graph', function (require) {
+    "use strict";
+
+    var GraphRenderer = require('web.GraphRenderer');
+
+    var MyCOLORS = ["#556ee6", "#f1b44c", "#50a5f1", "#ffbb78", "#34c38f", "#98df8a", "#d62728",
+        "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2",
+        "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
+    var MyCOLOR_NB = MyCOLORS.length;
+
+    function hexToRGBA(hex, opacity) {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        var rgb = result.slice(1, 4).map(function (n) {
+            return parseInt(n, 16);
+        }).join(',');
+        return 'rgba(' + rgb + ',' + opacity + ')';
+    }
+
+    return GraphRenderer.include({
+
+        _getMyColor: function (index) {
+            return MyCOLORS[index % MyCOLOR_NB];
+        },
+
+        _renderBarChart: function (dataPoints) {
+            var self = this;
+
+            // prepare data
+            var data = this._prepareData(dataPoints);
+
+            data.datasets.forEach(function (dataset, index) {
+                // used when stacked
+                dataset.stack = self.state.stacked ? self.state.origins[dataset.originIndex] : undefined;
+                // set dataset color
+                var color = self._getMyColor(index);
+                dataset.backgroundColor = color;
+            });
+
+            // prepare options
+            var options = this._prepareOptions(data.datasets.length);
+
+            // create chart
+            var ctx = document.getElementById(this.chartId);
+            this.chart = new Chart(ctx, {
+                type: 'bar',
+                data: data,
+                options: options,
+            });
+        },
+
+        _renderLineChart: function (dataPoints) {
+            var self = this;
+
+            // prepare data
+            var data = this._prepareData(dataPoints);
+            data.datasets.forEach(function (dataset, index) {
+                if (self.state.processedGroupBy.length <= 1 && self.state.origins.length > 1) {
+                    if (dataset.originIndex === 0) {
+                        dataset.fill = 'origin';
+                        dataset.backgroundColor = hexToRGBA(MyCOLORS[0], 0.4);
+                        dataset.borderColor = hexToRGBA(MyCOLORS[0], 1);
+                    } else if (dataset.originIndex === 1) {
+                        dataset.borderColor = hexToRGBA(MyCOLORS[1], 1);
+                    } else {
+                        dataset.borderColor = self._getMyColor(index);
+                    }
+                } else {
+                    dataset.borderColor = self._getMyColor(index);
+                }
+                if (data.labels.length === 1) {
+                    // shift of the real value to right. This is done to center the points in the chart
+                    // See data.labels below in Chart parameters
+                    dataset.data.unshift(undefined);
+                }
+                dataset.pointBackgroundColor = dataset.borderColor;
+                dataset.pointBorderColor = 'rgba(0,0,0,0.2)';
+            });
+            if (data.datasets.length === 1) {
+                const dataset = data.datasets[0];
+                dataset.fill = 'origin';
+                dataset.backgroundColor = hexToRGBA(MyCOLORS[0], 0.4);
+            }
+
+            // center the points in the chart (without that code they are put on the left and the graph seems empty)
+            data.labels = data.labels.length > 1 ?
+                data.labels :
+                Array.prototype.concat.apply([], [[['']], data.labels, [['']]]);
+
+            // prepare options
+            var options = this._prepareOptions(data.datasets.length);
+
+            // create chart
+            var ctx = document.getElementById(this.chartId);
+            this.chart = new Chart(ctx, {
+                type: 'line',
+                data: data,
+                options: options,
+            });
+        },
+    });
+});
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/datetimepicker.scss b/code_backend_theme/static/src/scss/datetimepicker.scss
new file mode 100644
index 000000000..9c8f31088
--- /dev/null
+++ b/code_backend_theme/static/src/scss/datetimepicker.scss
@@ -0,0 +1,68 @@
+/* date time picker colour changes for the theme */
+.datepicker {
+    .table-sm {
+        > thead {
+            > tr > .prev {
+                color: #fff !important;
+                background-color: $primary_accent !important;
+                &:hover{
+                    background-color: darken($primary_accent, 10%) !important;
+                }
+                > .fa{
+                    color: #fff !important;
+                }
+            }
+            > tr > .next {
+                color: #fff !important;
+                background-color: $primary_accent !important;
+                &:hover{
+                    background-color: darken($primary_accent, 10%) !important;
+                }
+                > .fa{
+                    color: #fff !important;
+                }
+            }
+            > tr > .picker-switch {
+                color: #fff !important;
+                background-color: $primary_accent !important;
+                &:hover{
+                    background-color: darken($primary_accent, 10%) !important;
+                }
+            }
+        }
+        > tbody > tr > td {
+            &.today:before {
+                border-bottom-color: $primary_accent !important;
+            }
+            &.active {
+                background-color: $primary_accent !important;
+            }
+        }
+    }
+}
+.picker-switch {
+    span.fa {
+        margin: 0;
+        @include transition($btn-transition);
+        &.primary {
+            background-color: $primary_accent;
+            color: white;
+            &:hover {
+                background-color: darken($primary_accent, 20%);
+            }
+        }
+    }
+}
+
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child {
+    color: #FFFFFF;
+    background-color: $primary_accent;
+}
+
+.daterangepicker .drp-calendar .calendar-table tbody tr td:not(.off).active, .daterangepicker .drp-calendar .calendar-table tbody tr td:not(.off).active:hover {
+    background-color: $primary_accent;
+}
+
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child th.prev:hover, .daterangepicker .drp-calendar .calendar-table thead tr:first-child th.next:hover {
+    background-color: darken($primary_accent, 20%);
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/login.scss b/code_backend_theme/static/src/scss/login.scss
new file mode 100644
index 000000000..e4234aa5e
--- /dev/null
+++ b/code_backend_theme/static/src/scss/login.scss
@@ -0,0 +1,145 @@
+#wrapwrap > main {
+    background: #f8f8fb;
+}
+.navbar {
+    background: #fff !important;
+}
+body {
+    font-family: 'Poppins', sans-serif !important;
+}
+body.bg-100 {
+    background-color: #f8f8fb !important;
+}
+.card.o_database_list {
+    align-items: center;
+    max-width: 450px !important
+}
+.card.o_database_list .card-body {
+    background-color: #fff !important;
+    border-radius: 5px !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    width: 450px;
+}
+a {
+    color: #556ee6;
+    text-decoration: none;
+}
+a:hover {
+    color: #4458b8;
+    text-decoration: underline;
+}
+.alert-info {
+    color: #306391;
+    background-color: #dcedfc;
+    border-color: #cbe4fb;
+}
+.oe_login_form button.btn-link {
+    color: #495057;
+    font-weight: 500;
+    font-size: 14px !important;
+}
+.oe_login_form button.btn-link:hover {
+    color: #171a1c;
+}
+
+//login button starts
+.btn-primary {
+    color: #fff;
+    background-color: #556ee6;
+    border-color: #556ee6;
+}
+.btn-primary:hover {
+    color: #fff;
+    background-color: #485ec4;
+    border-color: #4458b8;
+}
+.btn-check:active+.btn-primary,
+.btn-check:checked+.btn-primary,
+.btn-primary.active,.btn-primary:active,
+.show>.btn-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #4458b8 !important;
+    border-color: #4053ad !important;
+}
+.btn-check:focus+.btn-primary, .btn-primary:focus {
+    color: #fff;
+    background-color: #485ec4 !important;
+    border-color: #4458b8 !important;
+    -webkit-box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+    box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+}
+.oe_login_form .btn {
+    display: inline-block;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding: .47rem .75rem;
+    border-radius: .25rem;
+    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+}
+.btn-secondary {
+    color: #fff !important;
+    background-color: #74788d !important;
+    border-color: #74788d !important;
+}
+.btn-secondary:hover {
+    color: #fff !important;
+    background-color: #636678 !important;
+    border-color: #5d6071 !important;
+}
+.btn-secondary:active {
+    color: #fff;
+    background-color: #5d6071 !important;
+    border-color: #575a6a !important;
+}
+.btn-secondary i,.btn-secondary span {
+    color: #fff !important;
+}
+.btn-fill-secondary:focus, .btn-secondary:focus, .btn-fill-secondary.focus, .focus.btn-secondary {
+    box-shadow: none !important;
+}
+//login button ends
+
+//input starts
+.oe_login_form input {
+    display: block;
+    width: 100%;
+    height: 40px !important;
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    box-shadow: none !important;
+    margin-bottom:10px !important;
+}
+form label {
+    font-weight: 400 !important;
+}
+.oe_login_form a.btn.btn-secondary {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.75rem;
+}
+.oe_login_form a.btn.btn-secondary i.fa.fa-database {
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/navigation_bar.scss b/code_backend_theme/static/src/scss/navigation_bar.scss
new file mode 100644
index 000000000..2f04db210
--- /dev/null
+++ b/code_backend_theme/static/src/scss/navigation_bar.scss
@@ -0,0 +1,343 @@
+.o_form_statusbar{
+  .o_statusbar_buttons{
+  .btn{
+    margin-right: 30px !important;
+  }
+  }
+}
+.o_cp_left{
+.btn{
+margin-right: 30px !important;
+}
+}
+
+.o_calendar_buttons > button > .fa{
+color: #ffffff !important;
+}
+.o_main_navbar, .btn-primary, .btn-primary:active, .o_searchview_facet_label {
+  background-color: $primary_accent !important;
+  color: $inverse_accent !important;
+}
+.o_search_panel_section_icon {
+  color: $primary_accent !important;
+}
+.btn-secondary {
+  border-radius: 0;
+  border: solid 1px $primary_accent !important;
+  color: $primary_accent !important;
+}
+.o_list_view .o_list_table thead {
+    position: sticky;
+    top: 0;
+}
+
+.breadcrumb-item > a, .o_menu_item > a {
+  color: $primary_accent !important;
+}
+
+.fa-trash {
+  color: #f46a6a !important;
+}
+
+.o_main_navbar > a:hover {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_main_navbar > .o_menu_sections > li > a:hover, .o_main_navbar > .o_menu_systray > li > a:hover, .o_main_navbar > .o_menu_sections > li.show > a, .o_main_navbar > .o_menu_systray > li.show > a {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_main_navbar > .o_menu_apps > li > a:hover, .o_main_navbar > .o_menu_apps > li > a:active {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_main_navbar > .o_menu_apps > .dropdown.show > .dropdown-menu.show {
+  max-height: 100vh !important;
+  height: 93vh !important;
+}
+.o_main_navbar > .o_menu_apps > .dropdown.show > .dropdown-menu.show > a {
+  //border-bottom: 1px solid lighten($primary_accent, 30%);
+}
+
+.o_mail_discuss_sidebar {
+  background-color: #1c2833;
+}
+
+.dropdown-toggle:after {
+  background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o_external_button {
+  border: none !important;
+}
+
+.o_field_x2many_list_row_add > a {
+  color: $primary_accent !important;
+}
+
+.nav-item > a {
+  color: $primary_accent !important;
+}
+
+.o_main_navbar > .o_menu_apps > li > a > i {
+  color: $inverse_accent !important;
+  font-size: 16px !important;
+}
+
+.o_form_uri > span {
+  color: $primary_accent !important;
+}
+
+.o_required_modifier.o_input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+
+.o_input {
+  border: solid 1px $primary_accent !important;
+  color: $primary_accent !important;
+}
+
+.o-no-caret > i, button[aria-pressed=true] {
+  color: $inverse_accent !important;
+}
+
+.o_loading {
+  background-color: $primary_accent;
+}
+
+.fas {
+  color: $inverse_accent !important;
+}
+
+.dashboard_mainbar {
+  width: 100%;
+}
+
+.a_app_menu_title {
+  display: none;
+}
+
+.o_menu_apps > .dropdown.show > .dropdown-menu.show:hover .a_app_menu_title {
+  display: inline-block;
+  width: 200px;
+}
+
+.o_required_modifier.o_input, .o_required_modifier.o_input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+.o_required_modifier .o_input, .o_required_modifier .o_input {
+  background-color: $inverse_accent !important;
+}
+
+
+
+.dropdown-toggle:after {
+  background-color: #ffffff00 !important;
+}
+
+.o_required_modifier > .o_input_dropdown > .ui-autocomplete-input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+
+.o_datepicker.o_field_date.o_field_widget.o_required_modifier > input {
+  background-color: $inverse_accent !important;
+  color: $primary_accent !important;
+  border-left: solid 3px #f46a6a !important;
+}
+
+.ui-state-active {
+  background-color: $primary_accent !important;
+  color: $inverse_accent !important;
+}
+
+.oe_search_bgnd {
+  background-color: lighten($primary_accent, 20%) !important;
+  color: $inverse_accent !important;
+}
+
+.oe_search_tab {
+  background-color: $primary_accent !important;
+  color: $inverse_accent !important;
+}
+
+.o_horizontal_separator {
+  color: $primary_accent !important
+}
+
+.o_field_widget.o_field_image .o_form_image_controls {
+  background-color: $primary_accent !important;
+}
+
+.o_field_widget.o_field_image .o_form_image_controls > button {
+  color: $inverse_accent !important;
+}
+
+.dropdown-item.o_app.mt0:hover , .dropdown-item.o_app.mt0:hover > .a_app_menu_title{
+background-color: $primary_accent !important;
+color: $inverse_accent !important;
+}
+
+.o_address_country{
+display: none !important;
+}
+div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before {
+background-color: $primary_accent !important;
+}
+div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before {
+background-color: $primary_accent !important;
+}
+.o_mail_systray_item .o_mail_systray_dropdown .o_mail_systray_dropdown_top .o_filter_button.active {
+color: $primary_accent;
+text-decoration: none;
+}
+.o_mail_user_status.o_user_online {
+color: #fff !important;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after {
+   border-left-color: $primary_accent;
+}
+.btn-link {
+font-weight: 400;
+color: $primary_accent !important;
+text-decoration: none;
+}
+.o_thread_window_header {
+background-color: $primary_accent !important;
+}
+.o_thread_window_close,.o_thread_window_expand{
+color: $inverse_accent !important;
+}
+.o_menu_sections, .o_menu_systray, .o_web_client > header{
+background: $primary_accent !important;
+}
+.fa-building-o{
+color: white !important;
+}
+.o_button_import, .oe_import_file{
+background: #5aa29f !important;
+color: white !important;
+border: solid 2px #5aa29f !important;
+}
+.o_button_import:hover, .oe_import_file:hover,.o_button_import:active, .oe_import_file:active{
+background: white !important;
+color: #5aa29f !important;
+border: solid 2px #5aa29f !important;
+}
+.o_form_button_save,.o_form_button_edit{
+background: #7BA94F !important;
+color: white !important;
+border: solid 2px #7BA94F !important;
+}
+.o_form_button_save:hover,.o_form_button_edit:hover,.o_form_button_save:active,.o_form_button_edit:active{
+background: white !important;
+color: #7BA94F !important;
+border: solid 2px #7BA94F !important;
+}
+.o-kanban-button-new, .o_list_button_add,.o_form_button_create{
+background: #b9408d !important;
+color: white !important;
+border: solid 2px #b9408d !important;
+}
+.o-kanban-button-new:hover, .o_list_button_add:hover,.o_form_button_create:hover,.o-kanban-button-new:active, .o_list_button_add:active,.o_form_button_create:active{
+background: white !important;
+color: #b9408d !important;
+border: solid 2px #b9408d !important;
+}
+.o_form_button_cancel,.o_import_cancel{
+background: #cf4137 !important;
+color: white !important;
+border: solid 2px #cf4137 !important;
+
+}
+.o_form_button_cancel:hover,.o_import_cancel:hover,.o_form_button_cancel:active,.o_import_cancel:active{
+background: white !important;
+color: #cf4137 !important;
+border: solid 2px #cf4137 !important;
+}
+.report_button{
+border-radius: 0 !important;
+border: solid 2px $primary_accent;
+background: $primary_accent !important;
+}
+.report_button:hover,.report_button:active{
+border-radius: 0 !important;
+border: solid 2px $primary_accent !important;
+color: $primary_accent !important;
+background: $inverse_accent !important;
+}
+.btn-primary{
+border-radius: 0 !important;
+}
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
+border: none;
+border-bottom: solid;
+font-weight: bold;
+}
+.nav-link{
+    @include hover-focus {
+      border: none;
+    }
+}
+.o_data_row:has(.custom-control-input:checked){
+background: blue !important;
+}
+.o_field_one2many{
+    .o_list_view{
+        .table-responsive{
+            max-height:50vh;
+        }
+    }
+}
+thead{
+position: sticky;
+position: -webkit-sticky;
+top: 0;
+}
+.o_list_view .o_list_table tbody{
+    position: sticky;
+    top: 30px;
+}
+.o_list_view{
+    .o_list_table{
+        thead{
+            z-index:999;
+        }
+    }
+}
+.o_list_view .table-responsive .table{
+    width: max-content !important;
+    min-width: 100%;
+
+    thead
+    {
+    z-index:999;
+    tr:nth-child(1) th{
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background-color: #eeeeee !important;
+    }
+  }
+}
+.o_list_view .o_list_table tbody{
+position:initial !important;
+}
+.o_list_view .table-responsive .table thead{
+z-index: 1;
+}
+.o_optional_columns_dropdown_toggle{
+z-index: 999;
+}
+
+.o_progressbar .o_progress .o_progressbar_complete {
+background-color: #3d9bbb;
+}
+.o_cp_left .btn {
+    margin-right: 10px !important;
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/sidebar.scss b/code_backend_theme/static/src/scss/sidebar.scss
new file mode 100644
index 000000000..d278ecd3b
--- /dev/null
+++ b/code_backend_theme/static/src/scss/sidebar.scss
@@ -0,0 +1,78 @@
+#sidebar_panel {
+    height: calc(100% - 0%);
+	position: fixed;
+    top: 0px;
+    background-color: #2a3042;
+    display: none;
+    width: 200px;
+    overflow-y: scroll;
+    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
+    scrollbar-width: none;  /* Hide scrollbar for Firefox */
+    z-index: 2;
+}
+#sidebar_panel::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.sidebar_panel .sidebar {
+    padding: 0;
+    white-space: nowrap;
+    padding-bottom: 20px;
+    padding-top: 5px;
+}
+.sidebar_panel .sidebar .sidebar_logo {
+    padding-top: 20px;
+    text-align: center;
+    padding-bottom: 20px;
+}
+.sidebar_panel .sidebar .sidebar_logo img {
+    max-width: 150px;
+}
+
+.sidebar_panel .sidebar .sidebar_head {
+    padding-top: 20px;
+    padding-left: 15px;
+    color: #6a7187;
+    font-size: 14px;
+}
+
+.sidebar_panel .sidebar .sidebar_menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li {
+    margin: 0;
+    padding: 0;
+    border: 0px;
+    display: block;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a {
+    margin: 0;
+    border: 0px;
+    display: block;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 8px 10px 8px 25px;
+    color: #ffffff;
+    font-size: 13px;
+    transition:.3s all;
+}
+.sidebar_panel .sidebar .sidebar_menu li:hover  a {
+    background: #1e2230;
+    color: #fff;
+}
+.sidebar_panel .nav-link {
+	opacity: .5;
+    transition:.3s all;
+}
+.sidebar_panel .sidebar a.nav-link.active {
+    color: #fff !important;
+	opacity: 1;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img {
+    width: 20px;
+    margin-right: 8px;
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/theme.scss b/code_backend_theme/static/src/scss/theme.scss
new file mode 100644
index 000000000..4a7adca91
--- /dev/null
+++ b/code_backend_theme/static/src/scss/theme.scss
@@ -0,0 +1,1431 @@
+//Top Bar
+body {
+    font-family: 'Poppins', sans-serif !important;
+    background-color: #f8f8fb;
+}
+a {
+    color: $primary_accent;
+}
+a:hover {
+    color: $primary_hover;
+}
+a.btn {
+    height: auto !important;
+}
+
+.o_main_navbar, .o_searchview_facet_label {
+  background-color: transparent !important;
+  color: $f_color !important;
+  border:1px !important;
+}
+.o_menu_sections, .o_menu_systray, .o_web_client > header{
+background: $bg_white !important;
+}
+.oe_topbar_name {
+    color: $f_color !important;
+}
+.o_main_navbar > .o_menu_apps > li > a > i {
+    color: $f_color !important;
+    font-size: 16px !important;
+}
+.o_main_navbar {
+  height: 65px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 0px solid #5f5e97 !important;
+  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+  box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+  background-color: #fff !important;
+}
+
+.top_heading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.top_heading ul {
+  margin-bottom: 0 !important;
+}
+.top_heading > a {
+  margin-left: 10px;
+  font-size: 20px;
+}
+.top_heading li {
+  list-style: none;
+}
+
+.o-no-caret > i, button[aria-pressed="true"] {
+    color: $f_color !important;
+}
+.o_main_navbar > ul > li > a, .o_main_navbar > ul > li > label {
+    height: 46px;
+    padding: 0 5px;
+    color: $f_color !important;
+    line-height: 46px;
+}
+.o_main_navbar > .o_menu_sections > li > a:hover, .o_main_navbar > .o_menu_systray > li > a:hover, .o_main_navbar > .o_menu_sections > li.show > a, .o_main_navbar > .o_menu_systray > li.show > a {
+    background-color: $bg_white !important;
+}
+
+.topbar_icon .fa {
+    color: #555b6d !important;
+    font-size: 20px !important
+}
+
+.o_main_navbar .o_user_menu .oe_topbar_avatar {
+    height: 35px;
+    width: 35px;
+}
+
+.o_MessagingMenu_counter {
+    background-color: #556ee6;
+    color: #fff !important;
+}
+.o_mail_systray_item .o_notification_counter {
+    background: #556ee6 !important;
+}
+
+.o_control_panel {
+    background: #f8f8fb !important;
+    border:none !important;
+}
+
+.o_searchview {
+    border: 1px solid #ddd;
+    height: 38px;
+    padding-left: 12px;
+    padding-right: 20px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border-radius: 5px;
+    padding-top: 6px;
+}
+.o_searchview .o_searchview_icon {
+    position: absolute;
+    top: 11px;
+    left: auto;
+    bottom: auto;
+    right: 8px;
+}
+.o_searchview .o_searchview_facet {
+    border: 1px solid #ddd;
+    background: #f8f8fb;
+    border-radius: 10px;
+    padding: 0 4px;
+}
+.o_cp_bottom_right  span.o_dropdown_title {
+    color: #555b6d;
+}
+.o_cp_bottom_left .o_form_button_cancel {
+    margin-right: 5px !important;
+    padding: 6px 8px !important;
+    color: #fff !important;
+    background-color: #f46a6a !important;
+    border-color: #f46a6a !important;
+}
+.o_cp_bottom_left .o_form_button_cancel:hover {
+    background-color: #cf5a5a !important;
+    border-color: #c35555 !important;
+}
+.o_control_panel {
+    border-bottom: none important;
+    margin: 15px 15px 0 15px;
+    background-color: #ffffff !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    border-radius: 5px;
+}
+
+.o_form_view,
+.o_widget_Discuss {
+    background: #f8f8fb;
+}
+.o_form_statusbar .o_statusbar_buttons .btn {
+    margin-right: 15px !important;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child):before, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child):after {
+    border-top: 21px solid transparent !important;
+    border-bottom: 17px solid transparent !important;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child):before {
+    right: -11px;
+    border-left-color: $primary_accent;
+}
+//Top Bar End
+
+// Button
+.btn {
+    display: inline-block;
+    font-weight: 400 !important;
+    line-height: 1.5 !important;
+    color: #495057;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 6px 15px !important;
+    border-radius: 4px !important;
+    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    height: 40px !important;
+    margin-bottom: 2px;
+}
+.btn-primary {
+    color: #fff !important;
+    background-color: $primary_accent !important;
+    border-color: $primary_accent !important;
+}
+.btn-primary:hover {
+    color: #fff !important;
+    background-color: $primary_hover !important;
+    border-color: #4458b8 !important;
+}
+.btn-primary:active {
+    color: #fff !important;
+    background-color: #4458b8 !important;
+    border-color: #4053ad !important;
+}
+.btn-check:focus+.btn-primary, .btn-primary:focus {
+    color: #fff;
+    background-color: #485ec4 !important;
+    border-color: #4458b8 !important;
+    -webkit-box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+    box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+}
+.btn-primary i,.btn-primary span {
+    color: #fff !important;
+}
+.btn-secondary {
+    color: #fff !important;
+    background-color: #74788d !important;
+    border-color: #74788d !important;
+}
+.btn-secondary:hover {
+    color: #fff !important;
+    background-color: #636678 !important;
+    border-color: #5d6071 !important;
+}
+.btn-secondary:active {
+    color: #fff;
+    background-color: #5d6071 !important;
+    border-color: #575a6a !important;
+}
+.btn-check:focus+.btn-secondary, .btn-secondary:focus {
+    color: #fff;
+    background-color: #636678 !important;
+    border-color: #5d6071 !important;
+    -webkit-box-shadow: 0 0 0 .15rem rgba(137,140,158,.5) !important;
+    box-shadow: 0 0 0 .15rem rgba(137,140,158,.5) !important;
+}
+.btn-secondary i,.btn-secondary span {
+    color: #fff !important;
+}
+.btn-info {
+    color: #fff !important;
+    background-color: #50a5f1 !important;
+    border-color: #50a5f1 !important;
+}
+.btn-info:hover {
+    color: #fff !important;
+    background-color: #448ccd !important;
+    border-color: #4084c1 !important;
+}
+button[name="action_cancel"],
+button[name="button_cancel"],
+button[special="cancel"] {
+    color: #fff !important;
+    background-color: #f46a6a !important;
+    border-color: #f46a6a !important;
+}
+button[name="action_cancel"]:hover,
+button[name="button_cancel"]:hover,
+button[special="cancel"]:hover {
+    background-color: #cf5a5a !important;
+    border-color: #c35555 !important;
+}
+button[name="action_cancel"]:active,
+button[name="button_cancel"]:active,
+button[special="cancel"]:active {
+    color: #fff !important;
+    background-color: #c35555 !important;
+    border-color: #b75050 !important;
+}
+button[name="action_cancel"]:focus,
+button[name="button_cancel"]:focus,
+button[special="cancel"]:focus {
+    color: #fff !important;
+    background-color: #cf5a5a !important;
+    border-color: #c35555 !important;
+    -webkit-box-shadow: 0 0 0 0.15rem rgba(246,128,128,.50) !important;
+    box-shadow: 0 0 0 0.15rem rgba(246,128,128,.50) !important;
+}
+button[name="update_module"] {
+    margin-right: 2px;
+}
+
+.btn-warning,
+button[name="action_uninstall"] {
+    color: #fff !important;
+    background-color: #f1b44c !important;
+    border-color: #f1b44c !important;
+}
+.btn-warning:hover,
+button[name="action_uninstall"]:hover {
+    color: #fff !important;
+    background-color: #cd9941 !important;
+    border-color: #c1903d !important;
+}
+.btn-warning:active,
+button[name="action_uninstall"]:active {
+    color: #fff !important;
+    background-color: #c1903d !important;
+    border-color: #b58739 !important;
+}
+.btn-warning:focus,
+button[name="action_uninstall"]:focus {
+    color: #fff !important;
+    background-color: #cd9941 !important;
+    border-color: #c1903d !important;
+    -webkit-box-shadow: 0 0 0 0.15rem rgba(243,191,103,.50) !important;
+    box-shadow: 0 0 0 0.15rem rgba(243,191,1,.50) !important;
+}
+
+.o_statusbar_status .o_arrow_button.btn-secondary {
+    border: solid 1px #556ee6 !important;
+    color: #556ee6 !important;
+    background-color: #fff !important;
+}
+.o_statusbar_status .o_arrow_button.btn-secondary:hover:after {
+    border-color: #fff !important;
+}
+.o_statusbar_status .o_arrow_button.btn-primary {
+    border: solid 1px #556ee6 !important;
+    color: #fff !important;
+}
+.o_cp_bottom_right .btn-secondary {
+    background: #fff;
+    border-color: #dddddd !important;
+    margin-right: 5px !important;
+    padding : 6px 8px !important;
+}
+.o_cp_bottom_left .o_form_button_create {
+    color: #fff !important;
+    background-color: #74788d !important;
+    border-color: #74788d !important;
+    padding: 5px 15px !important;
+}
+
+.o_web_settings_invite {
+    margin-left: 7px;
+    position: relative;
+    top: -1px;
+}
+.o_form_view .oe_button_box .btn.oe_stat_button {
+    height: 44px !important;
+    opacity: 1 !important;
+    border-radius: 0px !important;
+}
+.oe_module_action .btn {
+    height: auto !important;
+}
+.o_cp_buttons a.btn {
+    display: flex !important;
+    align-items: center;
+}
+button.fa.fa-external-link.btn.btn-secondary.o_external_button {
+    padding: 2px !important;
+    color: #74788d !important;
+    background: none !important;
+}
+.o_statusbar_status.o_field_widget.o_readonly_modifier .btn {
+    margin-right: 0 !important;
+}
+.btn-group .btn {
+    margin-right: 3px;
+}
+.o_Composer_actionButton.o-last.o-has-current-partner-avatar.o-composer-is-compact {
+    height: 48px !important;
+    border-bottom-left-radius: 0px !important;
+    border-top-left-radius: 0px !important;
+}
+.oe_right .btn {
+    margin-left: 2px;
+}
+//Button End
+
+//table
+.table-sm th, .table-sm td {
+    padding: 0.5rem;
+}
+tr.o_data_row {
+    font-size: 15px;
+}
+.o_list_view .table-responsive .table thead tr:nth-child(1) th {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background-color: #ffffff !important;
+}
+th.o_list_record_selector {
+    color: #495057 !important;
+    border-color: #eff2f7 !important;
+    background-color: #f8f9fa !important;
+}
+.table>:not(caption)>*>* {
+    padding: 1rem 1rem;
+    background-color: var(--bs-table-bg);
+    border-bottom-width: 1px;
+    -webkit-box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+.o_list_view .o_list_table thead > tr > th:not(.o_list_record_selector).o_list_number_th {
+    text-align: left !important;
+}
+.o_list_view .o_list_table thead > tr > th:not(.o_list_record_selector) {
+    border-left: none !important;
+}
+.table thead th {
+    vertical-align: bottom;
+    border-bottom: none;
+}
+.table th {
+    border-top: 1px solid #fff !important;
+}
+.o_list_view .o_list_table tfoot {
+    background-color: #fff !important;
+}
+.o_list_view .table-responsive .o_list_table tfoot tr:nth-child(1) td {
+    background-color: #fff !important;
+}
+.o_list_view .o_list_table tr:focus-within,
+.o_list_view .o_list_table.table-striped tr:focus-within {
+    background-color: #fff !important;
+}
+// Table End
+
+// Checkbox
+.custom-checkbox label {
+  position: relative;
+  cursor: pointer;
+}
+
+.custom-checkbox label:before {
+  content:'';
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 1px solid #0079bf;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  margin-right: 5px;
+  margin-top: 0px;
+}
+
+.custom-checkbox input:checked + label:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 2px;
+  left: 9px;
+  width: 6px;
+  height: 14px;
+  border: solid #0079bf;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.custom-checkbox label::before {
+    content: '';
+    -webkit--webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+    padding: 10px;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-right: 5px;
+}
+.custom-control-label::before {
+    position: absolute;
+    top: 0px !important;
+    left: 1px !important;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    pointer-events: none;
+    content: "";
+    background-color: #FFFFFF;
+    border: 1px solid rgba(0,0,0,.25) !important;
+    box-shadow: none !important;
+    border-radius: 5 !important;
+    margin-top: -5px;
+}
+.custom-checkbox {
+    padding-left: 0rem !important;
+}
+
+.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: $primary_accent;
+}
+
+.custom-checkbox input:checked + label::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 9px;
+    width: 6px;
+    height: 14px;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+.dropdown-item .custom-checkbox input:checked + label::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 19px;
+    width: 6px;
+    height: 14px;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+    color: #ffffff;
+    background-color: #556ee6;
+    border-color: #556ee6;
+}
+.custom-control.custom-checkbox .custom-control-input:not(:checked):not(:indeterminate) ~ .custom-control-label:before {
+    background: none;
+    outline: none !important;
+}
+
+.o_list_selection_box {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    vertical-align: middle;
+    border: 1px solid rgba(85,110,230,.25)!important;
+    background-color: rgba(85,110,230,.25)!important;
+    color: $primary_accent !important;
+    border-radius: 5px;
+}
+.o_radio_input +  .custom-control-label::before {
+    position: absolute !important;
+    top: 8.5px !important;
+    left: -1.5rem !important;
+    display: block !important;
+    width: 1rem !important;
+    height: 1rem !important;
+    pointer-events: none !important;
+    content: "" !important;
+    background-color: #FFFFFF !important;
+    border: #adb5bd solid 1px !important;
+}
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background: $primary_accent !important;
+    border-radius: 30px;
+}
+// Checkbox End
+
+//sheet
+.o_form_view .o_form_sheet_bg {
+    border-bottom: none;
+    background: #ffffff !important;
+    box-shadow: none !important;
+    border-radius: 5px;
+    padding: 10px;
+}
+.o_form_view .o_form_sheet_bg > .o_form_sheet {
+    min-width: 650px;
+    max-width: initial;
+    min-height: 330px;
+    border: 1px solid #c8c8d3;
+    box-shadow: none !important;
+    background: white;
+    margin: 4.8px auto;
+    padding: 24px;
+    padding-right: 16px;
+    padding-left: 16px;
+    border-radius: 5px;
+}
+.o_form_view .o_form_statusbar {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 5px;
+    border-bottom: none !important;
+    background-color: white;
+    border-radius: 5px;
+}
+.o_required_modifier > .o_input_dropdown > .ui-autocomplete-input {
+    border-left: solid 3px #f46a6a !important;
+}
+//sheet end
+
+//Discuss
+.o_Discuss {
+	padding: 15px !important;
+	background: #f5f5f9 !important;
+}
+
+.o_Discuss .o_DiscussSidebar {
+	background-color: #ffffff !important;
+	color: #dee2e6 !important;
+    border-radius: 5px;
+	margin-right: 10px !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+
+.o_DiscussSidebar_item.o-active {
+    color: #f46a6a !important;
+    font-weight: 500 !important;
+}
+.o_DiscussSidebarItem:hover {
+    background: none !important;
+}
+.o_DiscussSidebarItem {
+    cursor: pointer !important;
+    color: #74788d !important;
+    line-height: 24px !important;
+    padding: 10px 5px !important;
+}
+.o_DiscussSidebarItem_activeIndicator.o-item-active {
+    background: none !important;
+}
+.o_DiscussSidebar_item.o-active .fa {
+    color: #f46a6a !important;
+}
+.o_widget_Discuss .o_Discuss_content {
+    border-top: none !important;
+    background-color: #ffffff !important;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+}
+.o_DiscussSidebarItem_counter {
+    background-color: #f46a6a !important;
+    color: #fff !important;
+}
+.o_ThreadIcon_online {
+    color: #34c38f;
+}
+// Discuss End
+
+//Chatter @form
+.o_FormRenderer_chatterContainer {
+    max-width: initial;
+    margin-top: 15px !important;
+    padding: 0 !important;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.o_ChatterContainer {
+    padding: 10px;
+    background: #fff;
+    border-radius: 5px;
+}
+.o_Discuss .o_Message .o_Message_prettyBody p a {
+    background: $primary_accent !important;
+}
+.o_Message.o-not-discussion {
+    background-color: #eff2f7;
+    margin: 5px;
+    border-radius: 5px;
+    border-bottom: none;
+}
+.o_Composer {
+    background-color: #fff;
+    border-radius: 0 0 5px 5px;
+    border: none !important;
+}
+//Chatter @form Ends
+
+//Chatter mini starts
+.o_ChatWindow {
+    background-color: #fff !important;
+    border-radius: 5px 5px 0 0 !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.25) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .25) !important;
+}
+.o_PartnerImStatusIcon_icon.o-offline {
+    color: #495057 !important;
+}
+.o_PartnerImStatusIcon_icon.o-online {
+    color: #34c38f !important;
+}
+.o_PartnerImStatusIcon_innerBackground {
+    color: white !important;
+}
+i.o_PartnerImStatusIcon_outerBackground.fa.fa-circle.fa-stack-1x {
+    color: #fff !important;
+}
+.o_ChatWindowHeader_item.o_ChatWindowHeader_rightArea .fa {
+    color: #fff !important;
+}
+.o_ChatWindowHeader {
+    background-color: #556ee6;
+    color: white !important;
+}
+//Chatter mini ends
+
+// Tabs Start
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
+    border: none;
+    border-bottom: solid;
+    font-weight: bold;
+    background: $primary_accent;
+    color: #ffffff !important;
+    border-radius: 5px;
+}
+.nav-link {
+    display: block;
+    padding: 1rem 2rem;
+}
+.o_form_view .o_notebook {
+    clear: both;
+    margin-top: 25px;
+}
+.nav-tabs {
+    border-bottom: none;
+}
+.nav-tabs .nav-link {
+    border: 1px solid #e3e3e3;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom: none !important;
+}
+.nav-item > a {
+    color: #555b6d !important;
+}
+.nav-link:hover, .nav-link:focus {
+    border: 1px solid #e9e9e9 !important;
+    border-bottom: none !important;
+}
+ul.sidebar_menu .nav-link:hover,ul.sidebar_menu .nav-link:focus {
+    border: none !important;
+    border-bottom: none !important;
+}
+
+// TAbs End
+
+//font color
+.o_horizontal_separator {
+    color: #495057 !important;
+}
+.btn-link {
+    font-weight: 400;
+    color: $primary_accent !important;
+    text-decoration: none;
+}
+.o_activity_view .o_record_selector {
+    color: #34c38f;
+}
+//font color ends
+
+//form
+input {
+    display: block;
+    width: 100%;
+    height: 40px !important;
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    box-shadow: none !important;
+    margin-bottom:10px !important;
+}
+select {
+    width: 100%;
+    height: 40px !important;
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da !important;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    box-shadow: none !important;
+    margin-bottom:10px !important;
+}
+.o_field_widget .o_input_dropdown .o_dropdown_button {
+    position: absolute;
+    top: 6px;
+    left: auto;
+    bottom: auto;
+    right: 9px;
+}
+.o_datepicker .o_datepicker_button {
+    position: absolute;
+    top: 6px;
+    left: auto;
+    bottom: auto;
+    right: 9px;
+    pointer-events: none;
+}
+.o_input {
+    border: solid 1px #ced4da !important;
+    color: #495057 !important;
+}
+.o_form_view .oe_button_box .btn.oe_stat_button > .o_stat_info .o_stat_value,
+.o_form_view .oe_button_box .btn.oe_stat_button > span .o_stat_value {
+    color: #556ee6;
+}
+.o_form_view .oe_button_box .oe_stat_button .o_button_icon {
+    color: #556ee6;
+}
+//form end
+
+//search view
+.o_searchview input.o_searchview_input {
+    border: none !important;
+    height: auto !important;
+    margin: 0 !important;
+}
+.o_base_settings .o_control_panel .o_panel .o_setting_search .searchIcon {
+    top: 9px;
+    right: 10px;
+}
+.o_base_settings .o_control_panel .o_panel .o_setting_search .searchInput {
+    padding: 10px 15px;
+}
+//search view end
+
+//settings page
+.o_web_settings_invite {
+    margin-left: 7px;
+}
+
+.o_setting_container {
+    background: #f8f8fb;
+    padding: 15px 0 0 0;
+}
+.o_base_settings .o_control_panel {
+    margin: 0;
+}
+.settings {
+    margin-left: 15px;
+	background-color: #ffffff !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    border-radius: 5px;
+}
+.settings_tab {
+	background-color: #ffffff !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    border-radius: 5px;
+}
+.o_base_settings .o_setting_container .settings_tab .selected,
+ .o_base_settings .o_setting_container .settings_tab .selected span {
+    box-shadow: none !important;
+    color: #f46a6a !important;
+    font-weight: 500 !important;
+    background: none !important;
+}
+.o_base_settings .o_setting_container .settings_tab .tab {
+    color: #74788d !important;
+}
+.o_setting_container .o_field_widget.o_field_many2one.o_with_button.oe_inline {
+    margin-left: 15px !important;
+}
+//settings page end
+
+//scrollbar starts
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.19);
+	border-radius: 10px;
+	background-color: #F5F5F5;
+}
+::-webkit-scrollbar {
+	width: 12px;
+	background-color: #F5F5F5;
+}
+::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.2);
+	background-color: #c9ccd6;
+}
+//scrollbar ends
+
+//common starts
+.o_content {
+    margin: 15px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    background-color: #f8f8fb;
+}
+.o_action{
+    background: #f8f8fb;
+}
+//common ends
+
+//kanban_view starts
+.o_kanban_view {
+    border-radius: 5px;
+    background: #fff;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.o_kanban_view.o_kanban_ungrouped .o_kanban_record {
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.o_kanban_view .o_kanban_group {
+    background: #fff;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+.o_kanban_view.o_kanban_grouped {
+    background-color: #f8f8fb;
+}
+.o_kanban_view.o_kanban_grouped .o_kanban_record, .o_kanban_view.o_kanban_grouped .o_kanban_quick_create {
+    border-radius: 5px;
+    margin-bottom: 10px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.o_kanban_view.o_kanban_dashboard .o_kanban_record .o_kanban_card_header + .container.o_kanban_card_content .o_kanban_primary_bottom.bottom_block {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    background: rgba(85,110,230,.25) !important;
+}
+.o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image_fill_left {
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+}
+.o_kanban_record::after {
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+}
+.o_kanban_quick_create .o_form_view,
+.o_kanban_quick_create .o_action,
+.o_kanban_quick_create .o_content {
+    background: #fff;
+    margin: 0px;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+}
+.o_kanban_view .o_kanban_content .bg-primary {
+    border-radius: 5px 0 0 5px;
+}
+//kanban_view ends
+
+//Apps menu starts
+.o_search_panel {
+    border-right: none;
+    background-color: #ffffff;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.list-group-item-action {
+    width: 100%;
+    color: #74788d;
+    text-align: inherit;
+}
+.list-group-item-action:hover, .list-group-item-action:focus {
+    color: none !important;
+    background: none !important;
+}
+.o_search_panel .list-group-item header.active {
+    background: none !important;
+    color: #f46a6a !important;
+    font-weight: 500 !important;
+}
+.o_controller_with_searchpanel .o_renderer_with_searchpanel {
+    margin-left: 15px;
+}
+//Apps menu ends
+
+//Website app starts
+.o_dashboards .o_website_dashboard {
+    background-color: #ffffff !important;
+}
+.o_dashboards .o_website_dashboard div.o_box {
+    box-shadow: none !important;
+}
+.o_inner_box {
+    background-color: $primary_accent !important;
+    border-radius: 5px;
+}
+.o_inner_box:hover {
+    background-color: $primary_hover !important;
+}
+//Website app ends
+
+//Purchase app starts
+td.o_main {
+    background-color: $primary_accent !important;
+    border-radius: 5px;
+}
+td.o_main:hover {
+    background-color: $primary_hover !important;
+}
+.o_purchase_dashboard .table > thead > tr > td,
+.o_purchase_dashboard .table tbody > tr > td {
+    border-radius: 5px;
+}
+//Purchase app ends
+
+//input inside colour starts
+select, input {
+    color: #4c4c4c !important;
+}
+.o_required_modifier > .o_input_dropdown > .ui-autocomplete-input {
+    color: #4c4c4c !important;
+}
+.o_required_modifier.o_input, .o_required_modifier.o_input {
+    color: #4c4c4c !important;
+}
+.o_datepicker.o_field_date.o_field_widget.o_required_modifier > input {
+    color: #4c4c4c !important;
+}
+//input inside colour ends
+
+//welcome demo starts
+.o_onboarding_container.collapse.show {
+    border-radius: 5px !important;
+    margin: 15px 15px 0px 15px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.o_onboarding.o_onboarding_blue,
+.o_onboarding.o_onboarding_blue .o_onboarding_step_title,
+.o_onboarding.o_onboarding_blue .o_onboarding_step_action,
+.o_onboarding.o_onboarding_blue a.o_onboarding_all_done,
+.o_onboarding.o_onboarding_blue .o_onboarding_all_done > .fa,
+.o_onboarding.o_onboarding_blue .o_onboarding_btn_close {
+    border-radius: 5px;
+}
+.o_onboarding {
+    border-radius: 5px;
+}
+//welcome demo ends
+
+//modal starts
+.modal.o_technical_modal .modal-content {
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #f6f6f6;
+}
+.modal.o_technical_modal .modal-content .o_form_view,
+.modal.o_technical_modal .modal-content .o_content,
+.modal.o_technical_modal .modal-content .o_action {
+    background-color: #fff !important;;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+}
+.modal.show .modal-dialog {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - 1rem);
+}
+.modal .o_form_view .o_group .o_field_widget {
+    width: 98% !important;
+}
+//modal ends
+
+//Calendar starts
+.o_calendar_view {
+    background: #fff;
+}
+//Calendar ends
+
+//expense starts
+.o_content .o_expense_container {
+    background: #fff;
+}
+//expense ends
+
+//lunch starts
+.o_lunch_content .o_lunch_banner {
+    border-bottom: none !important;
+    background-color: #fff !important;
+    margin: 0 15px 10px 15px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+//lunch ends
+
+//kiosk starts
+.o_hr_attendance_kiosk_backdrop {
+    background-color: #f8f8fb !important;
+}
+.o_hr_attendance_kiosk_mode {
+    background-color: #fff !important;
+    border-radius: 0 0 5px 5px !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.o_hr_attendance_kiosk_mode .o_hr_attendance_user_badge {
+    border-radius: 5px 5px 0 0 !important;
+    border-top: none !important;
+    background: rgba(85,110,230,.25) !important;
+}
+.o_hr_attendance_sign_in_out_icon.fa-sign-in {
+    color: #fff !important;
+    background-color: $primary_accent !important;
+    border-color: $primary_accent !important;
+}
+.o_hr_attendance_sign_in_out_icon.fa-sign-in:hover {
+    color: #fff !important;
+    background-color: $primary_hover !important;
+    border-color: #4458b8 !important;
+}
+.o_hr_attendance_sign_in_out_icon.fa-sign-in:active {
+    color: #fff !important;
+    background-color: #4458b8 !important;
+    border-color: #4053ad !important;
+}
+.o_hr_attendance_sign_in_out_icon.fa-sign-in:focus {
+    color: #fff;
+    background-color: #485ec4 !important;
+    border-color: #4458b8 !important;
+    -webkit-box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+    box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+}
+.o_hr_attendance_kiosk_mode h3.mt0.mb0.text-muted {
+    color: $primary_accent !important;
+}
+.o_hr_attendance_button_employees div.mb16.mt16 {
+    margin-top: 4px !important;
+}
+//kiosk ends
+
+//timeoff starts
+.o_timeoff_container {
+    background: #fff;
+}
+//timeoff ends
+
+//project .fa colours starts
+.o_mail_activity .o_activity_color_planned {
+    color: #34c38f !important;
+}
+.o_mail_activity .o_activity_color_overdue {
+    color: #f46a6a !important;
+}
+.o_field_widget.o_priority > .o_priority_star.fa-star {
+    color: #f1b44c !important;
+}
+//project .fa colours ends
+
+//sale status icon starts
+.bg-primary {
+    background-color: $primary_accent !important;
+}
+.bg-secondary {
+    background-color: $secondary_accent !important;
+}
+.bg-success-light {
+    color: #1f7556 !important;
+    background-color: #d6f3e9 !important;
+}
+.bg-info-light {
+    color: #306391 !important;
+    background-color: #dcedfc !important;
+}
+.bg-danger-light {
+    background-color: #fde1e1 !important;
+    color: #924040 !important;
+}
+.bg-warning-light {
+    background-color: #fcf0db !important;
+    color: #916c2e !important;
+}
+.o_field_widget.o_field_badge {
+    color: #464855;
+    background-color: #e3e4e8;
+}
+//sale status icon end
+
+//stock icon colors starts
+.o_list_view .o_list_table .text-danger,
+.o_list_view .o_list_table .oe_import .alert.text-error,
+.oe_import .o_list_view .o_list_table .alert.text-error {
+    color: #f46a6a !important;
+}
+.text-danger {
+    color: #f1b44c !important;
+}
+.text-warning {
+    color: #f1b44c !important;
+}
+.text-error {
+    color: #f46a6a !important;
+}
+.text-success {
+    color: #34c38f !important;
+}
+//stock icon colors ends
+
+//badges starts
+.badge-primary {
+    background-color: #556ee6 !important;
+}
+.badge-secondary {
+  background-color: #74788d;
+}
+.badge-success {
+    background-color: #34c38f;
+}
+.badge-info {
+  background-color: #50a5f1;
+}
+.badge-danger {
+  background-color: #f46a6a;
+}
+.badge-warning {
+  background-color: #f1b44c;
+}
+.badge-dark {
+  background-color: #343a40;
+}
+.bg-success {
+    background-color: #34c38f !important;
+}
+.bg-success-full {
+    background-color: #34c38f !important;
+}
+.bg-warning-full {
+    background-color: #f1b44c !important;
+}
+.bg-danger-full {
+    background-color: #f46a6a;
+}
+.o-planned {
+    color: #34c38f !important;
+}
+.o-overdue {
+    color: #f46a6a !important;
+}
+.o_progressbar_complete {
+    background-color: #34c38f !important;
+}
+//badges ends
+
+//alert starts
+.alert-warning {
+    color: #916c2e;
+    background-color: #fcf0db;
+    border-color: #fbe9c9;
+}
+.alert-danger {
+    color: #924040;
+    background-color: #fde1e1;
+    border-color: #fcd2d2;
+}
+.alert-success {
+    color: #1f7556;
+    background-color: #d6f3e9;
+    border-color: #c2eddd;
+}
+.alert-info {
+    color: #306391;
+    background-color: #dcedfc;
+    border-color: #cbe4fb;
+}
+.toast {
+    border-radius: 5px !important;
+    color: #924040 !important;
+    background-color: #fde1e1 !important;
+    border-color: #fcd2d2 !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+}
+.toast-header {
+    border-bottom: 1px solid #fcd2d2 !important;
+    color: #924040 !important;
+    background-color: #fde1e1 !important;
+    border-color: #fcd2d2 !important;
+}
+.toast-body {
+    color: #924040 !important;
+    background-color: #fde1e1 !important;
+    border-color: #fcd2d2 !important;
+}
+.o_notification_manager {
+    top: auto !important;
+    bottom: 30px !important;
+}
+//alert ends
+
+//recruitment starts
+div.o_boolean_toggle.custom-control.custom-checkbox > label.custom-control-label::before,
+div.o_boolean_toggle.custom-control.custom-checkbox > label.custom-control-label::after {
+    left: 0.1rem !important;
+}
+div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::after {
+    top: 1.5px !important;
+}
+div.o_boolean_toggle.custom-control.custom-checkbox > label.custom-control-label::after {
+    top: 1px;
+}
+.o_kanban_view.o_kanban_dashboard.o_hr_recruitment_kanban .ribbon span {
+    background-color: #556ee6;
+}
+.o_kanban_view.o_kanban_dashboard.o_hr_recruitment_kanban.o_kanban_ungrouped .o_kanban_record:not(.o_kanban_ghost) {
+    height: 197px;
+}
+//recruitment ends
+
+//note editor starts
+.note-popover .popover .popover-body, .panel-heading.note-toolbar {
+    padding: 5px !important;
+    border-bottom: none !important;
+    background: rgba(85, 110, 230, 0.25) !important;
+    border-radius: 5px 5px 0 0  ;
+}
+.note-editor .note-statusbar {
+    border-radius: 0 0 5px 5px;
+}
+.wysiwyg_iframe, .note-editor {
+    border: 1px solid #556ee640 !important;
+    border-radius: 5px;
+}
+//note editor ends
+
+//progress starts
+.oe_kanban_content .progress .progress-bar {
+    background-color: #556ee6;
+}
+.progress-bar.bg-muted-full {
+    background-color: #dee2e6;
+}
+//progress ends
+
+//email marketing starts
+.o_domain_node.o_domain_tree.o_domain_selector > .o_domain_debug_container {
+    background: rgba(85, 110, 230, 0.25);
+    color: #000;
+}
+.o_domain_node.o_domain_tree.o_domain_selector > .o_domain_debug_container > input {
+    background: rgba(85, 110, 230, 0.25);
+}
+.o_field_widget.o_field_domain.o_inline_mode.o_edit_mode > .o_field_domain_panel {
+    top: -18px;
+}
+.o_domain_node .o_domain_selector_row > .o_domain_node_control_panel {
+    top: 5px;
+}
+.o_mail_emojis_dropdown {
+    bottom: 50px;
+}
+//emal marketing ends
+
+// menu+ color starts
+.o_main_navbar > ul > li.o_extra_menu_items.show > ul > li > a {
+    background-color: #74788d;
+}
+.o_main_navbar > ul > li.o_extra_menu_items.show > ul > li > a.dropdown-toggle {
+    background-color: #abadba;
+}
+//menu+ color ends
+
+//top menu bar starts
+nav.o_main_navbar.small_nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: right;
+    height: auto;
+}
+
+ul.o_menu_systray.topbar_icon {
+    margin-left: auto;
+}
+.o_main_navbar .o_user_menu > a {
+    display: flex;
+    align-items: center;
+}
+.oe_topbar_name {
+    max-width: 300px;
+    margin-left: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+ul.o_menu_sections {
+    padding-left: 20px;
+}
+@media (max-width: 1371px){
+    nav.o_main_navbar {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: right;
+        height: auto;
+    }
+    ul.o_menu_systray.topbar_icon {
+        margin-left: auto;
+    }
+}
+//top menu bar ends
+
+//datetimepicker starts
+.datepicker td,
+.datepicker td a,
+.datepicker th,
+.datepicker span {
+    padding: 0.5rem !important;
+}
+div.dropdown-menu.bootstrap-datetimepicker-widget{
+    width: auto !important;
+}
+//datetimepicker ends
+
+//groupby color starts
+.o_list_view tbody > tr.o_group_header {
+    background-image: none !important;
+}
+.table-striped tbody tr.o_group_header:nth-of-type(odd) {
+    background-color: rgba(85,110,230,0.17);
+}
+.table-striped tbody tr.o_group_header:hover {
+    background-color: rgba(85,110,230,0.23);
+}
+//groupby color ends
diff --git a/code_backend_theme/static/src/scss/theme_accent.scss b/code_backend_theme/static/src/scss/theme_accent.scss
new file mode 100644
index 000000000..45de24323
--- /dev/null
+++ b/code_backend_theme/static/src/scss/theme_accent.scss
@@ -0,0 +1,8 @@
+$primary_accent: #556ee6 !default;
+$secondary_accent: #334332 !default;
+$inverse_accent: #ffffff !default;
+$o-kanban-color-border-width: 8px;
+$selected_row: #ffffff !default;
+$bg_white: #ffffff !default;
+$f_color: #555b6d !default;
+$primary_hover: #485ec4 !default;
\ No newline at end of file
diff --git a/code_backend_theme/static/src/xml/sidebar.xml b/code_backend_theme/static/src/xml/sidebar.xml
new file mode 100644
index 000000000..5eea4ec8b
--- /dev/null
+++ b/code_backend_theme/static/src/xml/sidebar.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+	<t t-extend="Menu">
+		<t t-jquery=".o_main_navbar" t-operation="after">
+			<div class="sidebar_panel" id="sidebar_panel"/>
+        </t>
+    </t>
+	<t t-name="code_backend_theme.SideBar">
+        <div class="sidebar">
+			<div class="sidebar_logo">
+				<img src="/web/binary/company_logo" class="logo_img"/>
+			</div>
+			<h6 class="sidebar_head">MENU</h6>
+			<ul class="sidebar_menu">
+	            <t t-foreach="widget.getApps()" t-as="app">
+		            <li>
+		            	<a role="menuitem" t-attf-href="#menu_id=#{app.menuID}"
+						   class="nav-link" t-att-data-menu-id="app.menuID"
+						   t-att-data-menu-xmlid="app.xmlID"
+						   t-att-data-action-id="app.actionID">
+		                	<img class="sidebar_img"
+								 t-attf-src="data:image/png;base64,#{app.web_icon_data}"/>
+							<span class="sidebar_app_name">
+								<t t-esc="app.name"/>
+							</span>
+		            	 </a>
+		            </li>
+		    	</t>
+	        </ul>
+	    </div>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/code_backend_theme/static/src/xml/styles.xml b/code_backend_theme/static/src/xml/styles.xml
new file mode 100644
index 000000000..cc61085c1
--- /dev/null
+++ b/code_backend_theme/static/src/xml/styles.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <!--Align Invite Button in Settings-->
+    <t t-inherit="base_setup.res_config_invite_users" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('d-flex')]" position="attributes">
+            <attribute name="class">d-flex align-items-center</attribute>
+        </xpath>
+    </t>
+
+    <!--Remove App Icon in Settings-->
+    <t t-inherit="web.BaseSetting.Tabs" t-inherit-mode="extension" owl="1">
+        <xpath expr="//div[hasclass('tab')]" position="replace">
+            <div class="tab" t-attf-data-key="#{tab.key}" role="tab">
+                <span class="app_name"><t t-esc="tab.string"/></span>
+            </div>
+        </xpath>
+    </t>
+
+    <!--Active Color for App Counter-->
+    <t t-inherit="web.SearchPanel.Category" t-inherit-mode="extension" owl="1">
+        <xpath expr="//span[hasclass('o_search_panel_counter')]" position="attributes">
+            <attribute name="class">o_search_panel_counter ml-2 small</attribute>
+        </xpath>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/code_backend_theme/static/src/xml/top_bar.xml b/code_backend_theme/static/src/xml/top_bar.xml
new file mode 100644
index 000000000..703527c96
--- /dev/null
+++ b/code_backend_theme/static/src/xml/top_bar.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-inherit="web.Menu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//nav[hasclass('o_main_navbar')]" position="replace">
+            <nav class="o_main_navbar">
+                <div class="top_heading">
+                    <ul class="o_menu_apps"/>
+                    <a class="o_menu_brand" role="button"/>
+                </div>
+                <ul class="o_menu_sections" role="menu"/>
+                <ul class="o_menu_systray topbar_icon" role="menu"/>
+            </nav>
+        </xpath>
+    </t>
+    <t t-inherit="web.AppsMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//li[hasclass('dropdown')]" position="replace">
+            <li class="dropdown">
+                <a id="openSidebar" style="display: block; cursor: pointer;">
+                    <i class="fa fa-bars fa-lg"/>
+                </a>
+                <a id="closeSidebar" style="display: none; cursor: pointer;">
+                    <i class="fa fa-bars fa-lg"/>
+                </a>
+            </li>
+        </xpath>
+    </t>
+
+    <t t-inherit="web.UserMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//span[hasclass('oe_topbar_name')]" position="replace">
+            <div class="oe_topbar_name"/>
+        </xpath>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/code_backend_theme/views/icons.xml b/code_backend_theme/views/icons.xml
new file mode 100644
index 000000000..51db54d89
--- /dev/null
+++ b/code_backend_theme/views/icons.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <data>
+        <menuitem id="base.menu_administration" name="Settings" web_icon="code_backend_theme,static/src/img/icons/settings.png"/>
+        <menuitem id="base.menu_management" name="Apps" web_icon="code_backend_theme,static/src/img/icons/apps.png"/>
+        <menuitem id="mail.menu_root_discuss" name="Discuss" web_icon="code_backend_theme,static/src/img/icons/discuss.png"/>
+    </data>
+</odoo>
\ No newline at end of file