diff --git a/dark_mode_backend/static/description/assets/all_screens.png b/dark_mode_backend/static/description/assets/all_screens.png
new file mode 100644
index 000000000..dedbb2138
Binary files /dev/null and b/dark_mode_backend/static/description/assets/all_screens.png differ
diff --git a/dark_mode_backend/static/description/assets/hero.png b/dark_mode_backend/static/description/assets/hero.png
new file mode 100644
index 000000000..71ec979c0
Binary files /dev/null and b/dark_mode_backend/static/description/assets/hero.png differ
diff --git a/dark_mode_backend/static/description/assets/menu_focus.png b/dark_mode_backend/static/description/assets/menu_focus.png
new file mode 100644
index 000000000..97c546e30
Binary files /dev/null and b/dark_mode_backend/static/description/assets/menu_focus.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/10.png b/dark_mode_backend/static/description/assets/screenshots/10.png
deleted file mode 100644
index 79b063b85..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/10.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/11.png b/dark_mode_backend/static/description/assets/screenshots/11.png
deleted file mode 100644
index 4524b4412..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/11.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/12.png b/dark_mode_backend/static/description/assets/screenshots/12.png
deleted file mode 100644
index ab24bd5b1..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/12.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/13.png b/dark_mode_backend/static/description/assets/screenshots/13.png
deleted file mode 100644
index 106928770..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/13.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/14.png b/dark_mode_backend/static/description/assets/screenshots/14.png
deleted file mode 100644
index 2891d0906..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/14.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/15.png b/dark_mode_backend/static/description/assets/screenshots/15.png
deleted file mode 100644
index 0aa186b70..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/15.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/16.png b/dark_mode_backend/static/description/assets/screenshots/16.png
deleted file mode 100644
index ba7eb0971..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/16.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/17.png b/dark_mode_backend/static/description/assets/screenshots/17.png
deleted file mode 100644
index 10b220aa7..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/17.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/18.png b/dark_mode_backend/static/description/assets/screenshots/18.png
deleted file mode 100644
index e56879eba..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/18.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/19.png b/dark_mode_backend/static/description/assets/screenshots/19.png
deleted file mode 100644
index c606ff78b..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/19.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/2.png b/dark_mode_backend/static/description/assets/screenshots/2.png
deleted file mode 100644
index 7188653d4..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/2.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/20.png b/dark_mode_backend/static/description/assets/screenshots/20.png
deleted file mode 100644
index dbcc1b76a..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/20.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/21.png b/dark_mode_backend/static/description/assets/screenshots/21.png
deleted file mode 100644
index 59b7ccfd7..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/21.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/22.png b/dark_mode_backend/static/description/assets/screenshots/22.png
deleted file mode 100644
index 9bfbd096f..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/22.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/23.png b/dark_mode_backend/static/description/assets/screenshots/23.png
deleted file mode 100644
index 9c334e826..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/23.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/3.png b/dark_mode_backend/static/description/assets/screenshots/3.png
deleted file mode 100644
index c30d74543..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/3.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/4.png b/dark_mode_backend/static/description/assets/screenshots/4.png
deleted file mode 100644
index 3c920e37c..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/4.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/5.png b/dark_mode_backend/static/description/assets/screenshots/5.png
deleted file mode 100644
index 94461b8da..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/5.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/6.png b/dark_mode_backend/static/description/assets/screenshots/6.png
deleted file mode 100644
index 9ff30442a..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/6.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/7.png b/dark_mode_backend/static/description/assets/screenshots/7.png
deleted file mode 100644
index 5ab883e11..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/7.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/8.png b/dark_mode_backend/static/description/assets/screenshots/8.png
deleted file mode 100644
index ce7fd779f..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/8.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/9.png b/dark_mode_backend/static/description/assets/screenshots/9.png
deleted file mode 100644
index 40ceff7d7..000000000
Binary files a/dark_mode_backend/static/description/assets/screenshots/9.png and /dev/null differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/alert.png b/dark_mode_backend/static/description/assets/screenshots/alert.png
new file mode 100644
index 000000000..b593ca57c
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/alert.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/apps_uninstall.png b/dark_mode_backend/static/description/assets/screenshots/apps_uninstall.png
new file mode 100644
index 000000000..470845245
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/apps_uninstall.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/chatters.png b/dark_mode_backend/static/description/assets/screenshots/chatters.png
new file mode 100644
index 000000000..9367b5be8
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/chatters.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/discuss.png b/dark_mode_backend/static/description/assets/screenshots/discuss.png
new file mode 100644
index 000000000..7222525a1
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/discuss.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/form.png b/dark_mode_backend/static/description/assets/screenshots/form.png
new file mode 100644
index 000000000..c91367939
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/form.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/form_product.png b/dark_mode_backend/static/description/assets/screenshots/form_product.png
new file mode 100644
index 000000000..a48b2ba9d
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/form_product.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/graph.png b/dark_mode_backend/static/description/assets/screenshots/graph.png
new file mode 100644
index 000000000..6d3e8dc3c
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/graph.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/group.png b/dark_mode_backend/static/description/assets/screenshots/group.png
new file mode 100644
index 000000000..1d286bdcf
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/group.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/invoice.png b/dark_mode_backend/static/description/assets/screenshots/invoice.png
new file mode 100644
index 000000000..121eecec4
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/invoice.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/kanban_empl.png b/dark_mode_backend/static/description/assets/screenshots/kanban_empl.png
new file mode 100644
index 000000000..74d4bd7cd
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/kanban_empl.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/kanban_group.png b/dark_mode_backend/static/description/assets/screenshots/kanban_group.png
new file mode 100644
index 000000000..7e3b7574b
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/kanban_group.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/kanban_product.png b/dark_mode_backend/static/description/assets/screenshots/kanban_product.png
new file mode 100644
index 000000000..70a04dcb9
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/kanban_product.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/kanban_recruits.png b/dark_mode_backend/static/description/assets/screenshots/kanban_recruits.png
new file mode 100644
index 000000000..31967fc75
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/kanban_recruits.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/kanban_sale.png b/dark_mode_backend/static/description/assets/screenshots/kanban_sale.png
new file mode 100644
index 000000000..15a432708
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/kanban_sale.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/kiosk.png b/dark_mode_backend/static/description/assets/screenshots/kiosk.png
new file mode 100644
index 000000000..3eb03c755
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/kiosk.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/list_purchase.png b/dark_mode_backend/static/description/assets/screenshots/list_purchase.png
new file mode 100644
index 000000000..e5b0f0b28
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/list_purchase.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/list_sales.png b/dark_mode_backend/static/description/assets/screenshots/list_sales.png
new file mode 100644
index 000000000..ee9fbcdad
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/list_sales.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/1.png b/dark_mode_backend/static/description/assets/screenshots/login.png
similarity index 100%
rename from dark_mode_backend/static/description/assets/screenshots/1.png
rename to dark_mode_backend/static/description/assets/screenshots/login.png
diff --git a/dark_mode_backend/static/description/assets/screenshots/modal.png b/dark_mode_backend/static/description/assets/screenshots/modal.png
new file mode 100644
index 000000000..f030a2eed
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/modal.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/settings.png b/dark_mode_backend/static/description/assets/screenshots/settings.png
new file mode 100644
index 000000000..7f0abbf8f
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/settings.png differ
diff --git a/dark_mode_backend/static/description/assets/screenshots/tab.png b/dark_mode_backend/static/description/assets/screenshots/tab.png
new file mode 100644
index 000000000..731674dce
Binary files /dev/null and b/dark_mode_backend/static/description/assets/screenshots/tab.png differ
diff --git a/dark_mode_backend/static/description/index.html b/dark_mode_backend/static/description/index.html
index cc3eee3dd..ea5966678 100644
--- a/dark_mode_backend/static/description/index.html
+++ b/dark_mode_backend/static/description/index.html
@@ -1,193 +1,134 @@
-<div style="background-color: #714B67; min-height: 600px; width: 100%; padding: 15px; position: relative;">
-    <!-- TITLE BAR -->
-    <div
-        style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
-        <img src="assets/misc/cybrosys-logo.png" width="42" height="42" style="width: 42px; height: 42px;" />
-        <div>
-            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
-                class="mr-2">
-                <i class="fa fa-check mr-1"></i>Community
-            </div>
-            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
-                class="mr-2">
-                <i class="fa fa-check mr-1"></i>Enterprise
-            </div>
-            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
-                class="mr-2">
-                <i class="fa fa-check mr-1"></i>Odoo.sh
-            </div>
+<html>
+<head></head>
+<body>
+<!-- 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;">
+                Dark Mode
+            </h1>
+            <p class="my-1 text-center text-uppercase"
+               style="letter-spacing: 4px !important; color: #74788D !important;">Minimalist and Elegant Backend
+                Theme for Odoo 16</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>
-    <!-- END OF TITLE BAR -->
-
-    <!-- APP HERO -->
-    <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">Dark Mode</h1>
-    <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;"> Minimalist and Elegant Backend Theme for Odoo 16</p>
-    <!-- END OF APP HERO -->
-    <img src="assets/screenshots/hero.gif"
-        style="width: 75%; height: auto; position: absolute; margin-left: auto; margin-right: auto; top: 45%; left: 12%; right: auto;" />
-
 </div>
-
-<!-- NAVIGATION SECTION -->
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/compass.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Explore This
-        Module</h2>
-</div>
-<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
-    <div class="col-sm-12 col-md-6 my-3">
-        <a href="#overview">
-            <div class="d-flex justify-content-between align-items-center"
-                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
-                <div>
-                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
-                    <span
-                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
-                        more about this
-                        module</span>
-                </div>
-                <img src="assets/misc/right-arrow.png" width="36" height="36" />
-            </div>
-        </a>
-    </div>
-    <div class="col-sm-12 col-md-6 my-3">
-        <a href="#features">
-            <div class="d-flex justify-content-between align-items-center"
-                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
-                <div>
-                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
-                    <span
-                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
-                        features of this
-                        module</span>
-                </div>
-                <img src="assets/misc/right-arrow.png" width="36" height="36" />
-            </div>
-        </a>
-    </div>
-    <div class="col-sm-12 col-md-6 my-3">
-        <a href="#screenshots">
-            <div class="d-flex justify-content-between align-items-center"
-                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
-                <div>
-                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
-                    <span
-                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
-                        screenshots for this
-                        module</span>
-                </div>
-                <img src="assets/misc/right-arrow.png" width="36" height="36" />
-            </div>
-        </a>
-    </div>
-</div>
-<!-- END OF NAVIGATION SECTION -->
-
-<!-- OVERVIEW SECTION -->
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/pie-chart.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Overview
-    </h2>
-</div>
-<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
-    <div class="col-sm-12 py-4">
-         The Dark Mode Backend Theme V15 Gives You a Fully Modified View with a Full Screen Display.
-                This is a Minimalist and Elegant Backend Theme for Odoo 15.
+<!-- 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 Dark Mode Backend Theme V16 Gives You a Fully Modified View with a Full Screen Display.
+                This is a Minimalist and Elegant Backend Theme for Odoo 16.
                 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 15.
+                It is a Perfect Choice for Your Odoo Backend and an Attractive Theme for Your Odoo 16.
                 It will Give You a Clean Layout with a New Color Combination and a Modified Font. It has a
                 Sidebar with
                 New App Icons and Company Logo. This Will Change Your Old Kanban, List and Form Views to A Fully
                 Modified View.
-    </div>
-    <div class="col-sm-12 py-4">
-        Please make sure that you install
+            </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 SECTION -->
+<!-- END OF OVERVIEW-->
 
-<!-- FEATURES SECTION -->
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/features.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Features
-    </h2>
-</div>
-<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
-    <div class="col-sm-12 col-md-6">
-        <div class="d-flex align-items-center" style="margin-top: 40px; margin-bottom: 40px">
-            <img src="assets/misc/check-box.png" class="mr-2" />
-            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Kanban Group View.</span>
+
+<!-- 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; z-index: 0 !important;">
+            <h2 style="font-weight: 300 !important; background-color: #fff !important; z-index: 99 !important; padding: 0 1rem !important;">
+                Features</h2>
         </div>
-            <div>
+    </div>
+    <!-- RESPONSIVE -->
+    <!-- END OF RESPONSIVE -->
+    <!-- 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 #53b68a !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 Dark Mode Backend Theme V15 Gives You a Fully Modified Kanban View and Kanban Group View.
-                        The Section Wise Separated Stages give a Pleasant Experience And an Extraordinary Design
-                        To Your Content Tiles Making The Tiles Look Great.
-                        It will Give You a Clean Layout with the New Color Combination and a Modified Font.
-                    </h6>
+                    The Dark Mode Backend Theme V16 Gives You a Fully Modified Kanban View and Kanban Group View.
+                    The Section Wise Separated Stages give a Pleasant Experience And an Extraordinary Design
+                    To Your Content Tiles Making The Tiles Look 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:#53b68a !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:#53b68a !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:#53b68a !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:#53b68a !important; margin-top: 5px !important;"></i>
-                                <p>Stages are Separated in View</p>
-                            </span>
-
-                            <span class="d-flex">
-                                <i class="fa fa-check-square mr-2"
-                                   style="color:#53b68a !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:#53b68a !important; margin-top: 5px !important;"></i>
-                                <p>Buttons with New Colors</p>
-                            </span>
-                        </div>
+                    <div class="col-lg-6">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                               style="color:#53b68a !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:#53b68a !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:#53b68a !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:#53b68a !important; margin-top: 5px !important;"></i>
+                            <p>Stages are Separated in View</p>
+                        </span>
+
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                               style="color:#53b68a !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:#53b68a !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 class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
-            <img src="assets/misc/check-box.png" class="mr-2" />
-            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">List View</span>
-        </div>
-        <div>
-            <h6 style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
-                    The All new Dark Mode Backend Theme V15 Gives You The Fully Modified List View and This Table Design
+    </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 #53b68a !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 Dark Mode Backend Theme V16 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>
@@ -233,14 +174,20 @@
                     </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>
-        <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
-            <img src="assets/misc/check-box.png" class="mr-2" />
-            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Form View</span>
-        </div>
-        <div>
-            <h6 style="font-style: Montserrat, 'sans-serif' !important; color: #2A3042 !important; font-weight: 300 !important;">
+    </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 #53b68a !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;">
                     Dark Mode 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.
@@ -287,477 +234,657 @@
                     </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>
-    </div>
-</div>
-<!-- END OF FEATURES SECTION -->
+    <!-- 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 #53b68a !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;">
+                        Dark Mode Backend Theme V16 is an Attractive Theme for Your Odoo 16.
+                        This Theme Will Change Improve Your Experience With Odoo.
+                        This is a Minimalist and Elegant Backend Theme for Odoo 16 And Can Offer 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:#53b68a !important; margin-top: 5px !important;"></i>
+                            <p>Modified Structure for All Type Views</p>
+                        </span>
 
-<!-- SCREENSHOTS SECTION -->
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="screenshots">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/pictures.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Screenshots
-    </h2>
-</div>
-<div class="row">
-    <div class="col-sm-12">
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                               style="color:#53b68a !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:#53b68a !important; margin-top: 5px !important;"></i>
+                            <p>New Color Combination</p>
+                        </span>
 
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Login Page</h3>
-            <img src="assets/screenshots/1.png" class="img-thumbnail">
-        </div>
+                        <span class="d-flex">
+                            <i class="fa fa-check-square mr-2"
+                               style="color:#53b68a !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:#53b68a !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:#53b68a !important; margin-top: 5px !important;"></i>
+                            <p>Sidebar with New Menu Icons</p>
+                        </span>
 
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Group By View</h3>
-            <img src="assets/screenshots/2.png" class="img-thumbnail">
-        </div>
+                    </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 #53b68a !important; padding: 2.5rem 0rem 0rem 1.5rem !important; position: relative; overflow: hidden !important;">
+                    <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: 0 !important;">
+                        The All-New Menu Design is Main Attractive Section for the Dark Mode 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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Settings Page</h3>
-            <img src="assets/screenshots/3.png" class="img-thumbnail">
-        </div>
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Discuss Page</h3>
-            <img src="assets/screenshots/4.png" class="img-thumbnail">
-        </div>
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Product Kanban View</h3>
-            <img src="assets/screenshots/5.png" class="img-thumbnail">
         </div>
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Purchase List View</h3>
-            <img src="assets/screenshots/6.png" class="img-thumbnail">
+    </div>
+    <!-- END OF TWO COLUMN BLOCK -->
+
+
+      <!-- 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; z-index: 0 !important;">
+                <h2 style="font-weight: 300 !important; background-color: #fff !important; z-index: 99 !important; padding: 0 1rem !important;">
+                    Screenshots</h2>
+            </div>
         </div>
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Product View with Smart Buttons</h3>
-            <img src="assets/screenshots/7.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Modified Alert Notifications are Placed on the Right Bottom of Display</h3>
-            <img src="assets/screenshots/8.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Wizards and User Error Popups</h3>
-            <img src="assets/screenshots/9.png" class="img-thumbnail">
-             <img src="assets/screenshots/10.png" class="img-thumbnail">
 
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">New Looks for The Tabs</h3>
-            <img src="assets/screenshots/11.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Recruitment Kanban View With Ribbons</h3>
-            <img src="assets/screenshots/12.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Sales Kanban View</h3>
-            <img src="assets/screenshots/13.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Modified Kanban View for Employees With New Designed Category Section</h3>
-            <img src="assets/screenshots/14.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Newly Customised Chatter and Popup Chatter</h3>
-            <img src="assets/screenshots/15.png" class="img-thumbnail">
+        <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: #53b68a !important; border: 4px solid #e1faee !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 Notifications are Placed on the 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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">New Looks for Wizards and Buttons with New Colors</h3>
-            <img src="assets/screenshots/16.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Attendance Pages</h3>
-            <img src="assets/screenshots/17.png" class="img-thumbnail">
-            <img src="assets/screenshots/18.png" class="img-thumbnail">
-            <img src="assets/screenshots/19.png" class="img-thumbnail">
 
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Invoice Pages</h3>
-            <img src="assets/screenshots/20.png" class="img-thumbnail">
+
+        <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: #53b68a !important; border: 4px solid #e1faee !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 style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Graphs</h3>
-            <img src="assets/screenshots/21.png" class="img-thumbnail">
-            <img src="assets/screenshots/22.png" class="img-thumbnail">
-            <img src="assets/screenshots/23.png" class="img-thumbnail">
+        <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: #53b68a !important; border: 4px solid #e1faee !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>
-</div>
-<!-- END OF SCREENSHOTS SECTION -->
-
-<!-- RELATED PRODUCTS -->
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/categories.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Related
-        Products
-    </h2>
-</div>
-<div class="row">
-    <div class="col-sm-12">
-        <div id="demo1" class="row carousel slide" data-ride="carousel">
-            <!-- The slideshow -->
-            <div class="carousel-inner" style="padding: 30px;">
-                <div class="carousel-item" style="min-height: 198.656px;">
-                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/dynamic_accounts_report/" target="_blank">
-                            <div style="border-radius:10px">
-                                <img class="img img-responsive center-block" style="border-radius: 0px;"
-                                    src="assets/modules/1.png">
-                            </div>
-                        </a>
+        <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: #53b68a !important; border: 4px solid #e1faee !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>
-                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/custom_gantt_view/" target="_blank">
-                            <div style="border-radius:10px">
-                                <img class="img img-responsive center-block" style="border-radius: 0px;"
-                                    src="assets/modules/2.png">
-                            </div>
-                        </a>
+                    <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: #53b68a !important; border: 4px solid #e1faee !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>
-                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/project_custom_gantt/" target="_blank">
-                            <div style="border-radius:10px">
-                                <img class="img img-responsive center-block" style="border-radius: 0px;"
-                                    src="assets/modules/3.png">
-                            </div>
-                        </a>
+                    <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: #53b68a !important; border: 4px solid #e1faee !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">New Looks for Wizards and Buttons with New Colors</h6>
                 </div>
-                <div class="carousel-item active" style="min-height: 198.656px;">
-                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/account_reports_xlsx/" target="_blank">
-                            <div style="border-radius:10px">
-                                <img class="img img-responsive center-block" style="border-radius: 0px;"
-                                    src="assets/modules/4.png">
-                            </div>
-                        </a>
+            </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: #53b68a !important; border: 4px solid #e1faee !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>
-                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/base_accounting_kit/" target="_blank">
-                            <div style="border-radius:10px">
-                                <img class="img img-responsive center-block" style="border-radius: 0px;"
-                                    src="assets/modules/5.png">
-                            </div>
-                        </a>
+                    <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: #53b68a !important; border: 4px solid #e1faee !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>
-                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/hr_payroll_community/" target="_blank">
-                            <div style="border-radius:10px">
-                                <img class="img img-responsive center-block" style="border-radius: 0px;"
-                                    src="assets/modules/6.png">
-                            </div>
-                        </a>
+                    <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: #53b68a !important; border: 4px solid #e1faee !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</h6>
                 </div>
             </div>
-            <!-- Left and right controls -->
-            <a class="carousel-control-prev" href="#demo1" data-slide="prev" style="width:35px; color:#000"> <span
-                    class="carousel-control-prev-icon"><i class="fa fa-chevron-left" style="font-size:24px"></i></span>
-            </a> <a class="carousel-control-next" href="#demo1" data-slide="next" style="width:35px; color:#000">
-                <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
-                        style="font-size:24px"></i></span>
-            </a>
+            <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>
-</div>
-<!-- END OF RELATED PRODUCTS -->
-
-<!-- OUR SERVICES -->
 
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/star.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our Services
-    </h2>
-</div>
+    <!-- END OF SCREENSHOTS -->
 
-<div class="container my-5">
-    <div class="row">
-        <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">
+    <!-- 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; z-index: 0 !important;">
+                <h2 style="font-weight: 300 !important; background-color: #fff !important; z-index: 99 !important; padding: 0 1rem !important;">
+                    Our Services</h2>
             </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 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>
-            <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 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>
-            <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 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>
-            <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 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>
-            <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 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>
-            <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: #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 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>
-            <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 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>
-            <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 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>
-            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
-                Odoo
-                Licensing Consultancy</h6>
         </div>
-    </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; z-index: 0 !important;">
+                <h2 style="font-weight: 300 !important; background-color: #fff !important; z-index: 99 !important; padding: 0 1rem !important;">
+                    Our Industries</h2>
+            </div>
 
-<!-- END OF END OF OUR SERVICES -->
+            <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>
 
-<!-- OUR INDUSTRIES -->
+            <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="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/corporate.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">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/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="container my-5">
-    <div class="row">
-        <div class="col-lg-3">
-            <div class="my-4 d-flex flex-column justify-content-center"
-                style="background-color: #f6f8f9 !important; border-radius: 0px; 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: 0px; 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: 0px; 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: 0px; 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: 0px; 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: 0px; 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: 0px; 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: 0px; 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 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>
-    </div>
-</div>
+    </section>
 
-<!-- END OF END OF OUR INDUSTRIES -->
+    <!-- END OF END OF OUR INDUSTRIES -->
 
-<!-- SUPPORT -->
-<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
-    <div class="d-flex justify-content-center align-items-center mr-2"
-        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
-        <img src="assets/misc/customer-support.png" />
-    </div>
-    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Support
-    </h2>
-</div>
-<div class="container mt-5">
-    <div class="row">
-        <div class="col-sm-12 col-md-6">
-            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
-                <div class="mr-4"
-                    style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
-                    <img src="assets/misc/support.png" height="48" width="48" style="width: 42px; height: 42px;" />
-                </div>
-                <div>
-                    <h4>Need Help?</h4>
-                    <p style="line-height: 100%;">Got questions or need help? Get in touch.</p>
-                    <a href="mailto:odoo@cybrosys.com">
-                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
-                            odoo@cybrosys.com</p>
-                    </a>
-                </div>
+    <!-- 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; z-index: 0 !important;">
+                <h2 style="font-weight: 300 !important; background-color: #fff !important; z-index: 99 !important; padding: 0 1rem !important;">
+                    Need Help?</h2>
             </div>
         </div>
-        <div class="col-sm-12 col-md-6">
-            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
-                <div class="mr-4"
-                    style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
-                    <img src="assets/misc/whatsapp.png" height="52" width="52" style="width: 52px; height: 52px;" />
-                </div>
-                <div>
-                    <h4>WhatsApp</h4>
-                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
-                    <a href="https://api.whatsapp.com/send?phone=918606827707">
-                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">+91 86068
-                            27707</p>
-                    </a>
+        <!-- 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-6">
+                        <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-6">
+                        <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>+91 86068 27707</a>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
-            <img src="assets/misc/logo.png" width="144" height="31"
-                style="width:144px; height: 31px; margin-top: 40px;" />
+        <!-- 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>
-    </div>
+    </section>
+    <!-- END OF FOOTER -->
 </div>
-<!-- END OF SUPPORT -->
\ No newline at end of file
+
+</body>
+</html>
+