diff --git a/odoo_dynamic_dashboard/static/description/assets/modules/1.gif b/odoo_dynamic_dashboard/static/description/assets/modules/1.gif
old mode 100644
new mode 100755
index e69de29bb..ae3a880a2
Binary files a/odoo_dynamic_dashboard/static/description/assets/modules/1.gif and b/odoo_dynamic_dashboard/static/description/assets/modules/1.gif differ
diff --git a/odoo_dynamic_dashboard/static/description/assets/modules/2.gif b/odoo_dynamic_dashboard/static/description/assets/modules/2.gif
old mode 100644
new mode 100755
index e69de29bb..d19e2b352
Binary files a/odoo_dynamic_dashboard/static/description/assets/modules/2.gif and b/odoo_dynamic_dashboard/static/description/assets/modules/2.gif differ
diff --git a/odoo_dynamic_dashboard/static/description/assets/modules/3.png b/odoo_dynamic_dashboard/static/description/assets/modules/3.png
old mode 100644
new mode 100755
index e69de29bb..8513873ea
Binary files a/odoo_dynamic_dashboard/static/description/assets/modules/3.png and b/odoo_dynamic_dashboard/static/description/assets/modules/3.png differ
diff --git a/odoo_dynamic_dashboard/static/description/assets/modules/4.png b/odoo_dynamic_dashboard/static/description/assets/modules/4.png
old mode 100644
new mode 100755
index e69de29bb..3bedf7981
Binary files a/odoo_dynamic_dashboard/static/description/assets/modules/4.png and b/odoo_dynamic_dashboard/static/description/assets/modules/4.png differ
diff --git a/odoo_dynamic_dashboard/static/description/assets/modules/5.png b/odoo_dynamic_dashboard/static/description/assets/modules/5.png
old mode 100644
new mode 100755
index e69de29bb..0e311ca87
Binary files a/odoo_dynamic_dashboard/static/description/assets/modules/5.png and b/odoo_dynamic_dashboard/static/description/assets/modules/5.png differ
diff --git a/odoo_dynamic_dashboard/static/description/assets/modules/6.jpg b/odoo_dynamic_dashboard/static/description/assets/modules/6.jpg
old mode 100644
new mode 100755
index e69de29bb..67c7f7062
Binary files a/odoo_dynamic_dashboard/static/description/assets/modules/6.jpg and b/odoo_dynamic_dashboard/static/description/assets/modules/6.jpg differ
diff --git a/odoo_dynamic_dashboard/static/description/index.html b/odoo_dynamic_dashboard/static/description/index.html
index 2a5c93b6c..50b701e66 100644
--- a/odoo_dynamic_dashboard/static/description/index.html
+++ b/odoo_dynamic_dashboard/static/description/index.html
@@ -16,16 +16,18 @@
           href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
     <style>
         :root {
-          --primary-color: #7f54b3;
-          --bg-white: #fff;
-          --text-color: #121212;
-          --text-color-light: #64728f;
+            --primary-color: #7f54b3;
+            --bg-white: #fff;
+            --text-color: #121212;
+            --text-color-light: #64728f;
         }
-        body{
-          font-family: "Montserrat", sans-serif;
+
+        body {
+            font-family: "Montserrat", sans-serif;
         }
+
         .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
-            color: var(--text-color);
+            color: #121212;
             font-family: Montserrat;
             font-size: 16px !important;
             font-weight: 500 !important;
@@ -36,51 +38,54 @@
             border: none;
             margin-bottom: 0;
             padding: 12px 24px;
-      }
-      .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
-      border-color: transparent;
-      isolation: isolate;
-      }
-      .nav-tabs .nav-link:focus-visible {
-      border-color: transparent;
-      box-shadow: none;
-      }
-      /* owl-carosel */
-    .owl-carousel .owl-nav {
-      position: absolute;
-      top: 42%;
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      transform: translateY(-42%);
-    }
+        }
 
-    .owl-carousel .owl-nav button.owl-prev {
-      position: absolute;
-      right: -36px;
-      font-size: 28px;
-      background-color: #e4e4e4;
-      border-radius: 20px;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+        .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
+            border-color: transparent;
+            isolation: isolate;
+        }
 
-    .owl-carousel .owl-nav button.owl-next {
-      position: absolute;
-      left: -36px;
-      font-size: 28px;
-      background-color: #e4e4e4;
-      border-radius: 20px;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+        .nav-tabs .nav-link:focus-visible {
+            border-color: transparent;
+            box-shadow: none;
+        }
 
-    }
+        /* owl-carosel */
+        .owl-carousel .owl-nav {
+            position: absolute;
+            top: 42%;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-42%);
+        }
+
+        .owl-carousel .owl-nav button.owl-prev {
+            position: absolute;
+            right: -36px;
+            font-size: 28px;
+            background-color: #e4e4e4;
+            border-radius: 20px;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .owl-carousel .owl-nav button.owl-next {
+            position: absolute;
+            left: -36px;
+            font-size: 28px;
+            background-color: #e4e4e4;
+            border-radius: 20px;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+        }
 
     </style>
 </head>
@@ -118,7 +123,7 @@
                             <p class="my-1 text-center text-uppercase"
                                style="
               letter-spacing: 4px !important;
-              color: var(--primary-color);
+              color: #7f54b3;
               font-weight: bold;
               text-align: center;
               font-size: 14px;
@@ -130,7 +135,7 @@
                             </p>
                             <h1 class="text-center text-uppercase my-0"
                                 style="
-              color: var(--text-color);
+              color: #121212;
               font-size: 46px;
               font-weight: 700;
               line-height: normal;
@@ -152,8 +157,8 @@
               font-family: Montserrat;
               display: inline-block;
               padding: 7px 33px;
-              border: 1px solid var(--primary-color);
-              color: var(--primary-color);
+              border: 1px solid #7f54b3;
+              color: #7f54b3;
               text-decoration: none;
             "
                                class="mx-1 mb-2 deep-1 deep_hover">
@@ -195,13 +200,13 @@
                                  style="z-index: 3; height: auto;">
                         </div>
                     </div>
-                    <div class="position-absolute"
-                         style="bottom: 0; z-index: 1; width: 100%;">
+                    <div class="position-absolute bottom-0"
+                         style="z-index: 1; width: 100%;">
                         <img src="./assets/icons/banner-bg.svg"
                              class="img-fluid w-100">
                     </div>
-                    <div class="position-absolute"
-                         style="bottom: 0; right: 0; z-index: 2;">
+                    <div class="position-absolute bottom-0 end-0"
+                         style=" z-index: 2;">
                         <img src="./assets/icons/patter.svg">
                     </div>
                 </div>
@@ -213,7 +218,7 @@
      box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25); ">
                     <div class="row">
                         <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
-                            <h2 style=" color: var(--text-color);
+                            <h2 style=" color: #121212;
             text-align: center;
             font-size: 40px;
             font-weight: 700;
@@ -291,13 +296,12 @@
                 </div>
                 <!--code  -->
                 <div class="my-5">
-                    <div style=" padding: 5rem 4rem 5rem 4rem; background-color: #0A1425; border-radius: 12px; position: relative;">
-                        <div class="wrapper-info"
-                             style="display: flex; flex-direction: column; gap: 20px;">
+                    <div class="position-relative" style=" padding: 5rem 4rem 5rem 4rem; background-color: #0A1425; border-radius: 12px;">
+                        <div class="d-flex flex-column gap-4">
                             <span class="wrapper-subtitle"
-                                  style="font-size: 40px; font-weight: 700; color: #fff;line-height: 60px; text-transform: capitalize; width: 450px;">Odoo Dynamic Dashboard</span>
+                                  style="font-size: 40px; font-weight: 700; color: #fff;line-height: 60px; text-transform: capitalize; width: 450px;  font-family: Montserrat;">Odoo Dynamic Dashboard</span>
                             <h3 class="wrapper-details"
-                                style="font-size: 20px; font-weight: 400; color: #fff; line-height: 32px; ">
+                                style="font-size: 20px; font-weight: 400; color: #fff; line-height: 32px;  ">
                                 Are you ready to make your business more
                                 organized?
                                 <br> Improve now!
@@ -305,32 +309,31 @@
                             <div class="d-flex gap-3">
                                 <a href="mailto:odoo@cybrosys.com"
                                    class="shop-btn" style="cursor: pointer; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 7px;
-            border: 1px solid var(--DarkOverlayElement-DO20, rgba(255, 255, 255, 0.20));
-            background: linear-gradient(93deg, rgba(255, 255, 255, 0.08) 6.01%, rgba(255, 255, 255, 0.17) 90.83%);
+            border: 1px solid  #ffffff33;
+            background-color: #ffffff14;
             backdrop-filter: blur(10px); color: #fff; padding: 12px 16px 12px 16px; text-decoration: none;">
              <span style="border-radius: 12px;
-             background: var(--DarkOverlayElement-DO10, rgba(255, 255, 255, 0.10));
-             backdrop-filter: blur(6px);padding: 12px;">
+             background-color: #ffffff1a;
+             backdrop-filter: blur(6px);padding: 12px;  ">
               <img src="./assets/icons/banner-mail.svg">
            </span>
-                                    <span style="font-weight: 500;">odoo@cybrosys.com</span>
+                                    <span style="font-weight: 500;font-family: Montserrat;">odoo@cybrosys.com</span>
                                 </a>
-                                <a href="https://wa.me/919074270811" target="_blank" class="shop-btn"
+                                <a href="tel:+91 9074270811" class="shop-btn"
                                    style="cursor: pointer; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 7px;
-            border: 1px solid var(--DarkOverlayElement-DO20, rgba(255, 255, 255, 0.20));
-            background: linear-gradient(93deg, rgba(255, 255, 255, 0.08) 6.01%, rgba(255, 255, 255, 0.17) 90.83%);
+             border: 1px solid  #ffffff33;
+             background-color: #ffffff14;
             backdrop-filter: blur(10px); color: #fff; padding: 12px 22px 12px 18px; text-decoration: none;">
              <span style="border-radius: 12px;
-             background: var(--DarkOverlayElement-DO10, rgba(255, 255, 255, 0.10));
+             background-color: #ffffff1a;
              backdrop-filter: blur(6px);padding: 12px;">
               <img src="./assets/icons/banner-call.svg">
            </span>
-                                    <span style="font-weight: 500;">+91 9074270811</span>
+                                    <span style="font-weight: 500;font-family: Montserrat;">+91 9074270811</span>
                                 </a>
                             </div>
                         </div>
-                        <div class=""
-                             style="position: absolute; bottom: 0; right: 0;">
+                        <div class="position-absolute bottom-0 end-0">
                             <img src="./assets/icons/banner-pattern.svg"
                                  style="width: 540px;">
                         </div>
@@ -397,9 +400,9 @@
                                         <div class="col-md-12">
                                             <h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
                               font-weight: 700;">
-                                      <span style="color:#121212; font-size:calc(1.1rem + 1vw)">Odoo Dynamic Dashboard
+                                      <span style="color:#121212; font-size:calc(1.1rem + 1vw)">Database Backup Configuration
                                       </span>
-                                                <span style="color: var(--primary-color); font-size:calc(1.1rem + 1vw)">View</span>
+                                                <span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)"> Menu</span>
                                             </h1>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -426,7 +429,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">The tiled view of the records in Odoo is also clickable; when you click on a record, you will be directed to the records tree view.
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">The tiled view of the records in Odoo is also clickable; when you click on a record, you will be directed to the records tree view.
                                             </p>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -453,7 +456,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">The chart view of the records in Odoo is provided in the dashboard based on the filtering.
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">The chart view of the records in Odoo is provided in the dashboard based on the filtering.
                                             </p>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -475,7 +478,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Clicking on various icons generates different types of chart data, which can be exported as image, PDF, CSV, and XLSX formats.
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Clicking on various icons generates different types of chart data, which can be exported as image, PDF, CSV, and XLSX formats.
                                             </p>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -497,7 +500,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">By clicking cross icon you can delete the chart and also the same for tile.
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">By clicking cross icon you can delete the chart and also the same for tile.
                                             </p>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -519,7 +522,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Select Type Of The Item.
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Select Type Of The Item.
                                             </p>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -541,7 +544,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">
                                                 When choosing the "Tile" option, input a name for the tile, select a model, operation type, and measured field. Additionally, customize the tile with an icon and color.
                                             </p>
                                         </div>
@@ -564,7 +567,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">When opting for "Charts," provide a name for the chart, select a model, operation type, and measured field, along with filters. Additionally, choose the chart type, set its size, and specify the grouping for the Y-axis.
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">When opting for "Charts," provide a name for the chart, select a model, operation type, and measured field, along with filters. Additionally, choose the chart type, set its size, and specify the grouping for the Y-axis.
                                             </p>
                                         </div>
                                         <div class="col-md-12 text-center">
@@ -590,7 +593,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">You can change the position of the item and resize the item.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">You can change the position of the item and resize the item.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -611,7 +614,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">By double-clicking the tile, it will redirect to the corresponding tree view.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">By double-clicking the tile, it will redirect to the corresponding tree view.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -632,7 +635,7 @@
                                         <div class="col-md-12">
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Dark mode.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Dark mode.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -657,7 +660,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">You can add dashboard menu in any module. Add a name for the menu and select the parent menu also.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">You can add dashboard menu in any module. Add a name for the menu and select the parent menu also.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -682,7 +685,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">You can see all the tiles and charts created in the Dashboard Block menu.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">You can see all the tiles and charts created in the Dashboard Block menu.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -707,7 +710,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Customize the Dashboard Theme via Configuration > Dashboard Theme. Then, choose the configured theme for your dashboard.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Customize the Dashboard Theme via Configuration > Dashboard Theme. Then, choose the configured theme for your dashboard.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -736,7 +739,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Print & Mail whole dashboard in PDF format by clicking the PDF or Mail icon.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Print & Mail whole dashboard in PDF format by clicking the PDF or Mail icon.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -765,7 +768,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Clicking the Mail icon brings up a wizard, where you can select users and then click the SEND button.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Clicking the Mail icon brings up a wizard, where you can select users and then click the SEND button.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -790,7 +793,7 @@
                                             </h1>
                                         </div>
                                         <div class="col-md-12 mb-4">
-                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:var(--text-color-light)">Clicking the Mail icon brings up a wizard, where you can select users and then click the SEND button.</p>
+                                            <p style="font-weight:400; font-size:16px; line-height:150%; text-align:center;  color:#64728f">Clicking the Mail icon brings up a wizard, where you can select users and then click the SEND button.</p>
                                         </div>
                                         <div class="col-md-12 text-center">
                                             <div class="d-inline-block p-3 shadow-sm"
@@ -989,132 +992,86 @@
                 </div>
                 <!--  -->
                 <!-- related post -->
-                <div class="" style="margin-top: 100px;">
-                    <div class="text-center mt-4">
-                        <h3 class="mb-0" style="color: #000;
-      text-align: center;
-      font-family: Montserrat;
-      font-size: 40px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: normal;
-      text-transform: uppercase;
-      padding-bottom: 50px;"
-                        >Related Modules</h3>
-                    </div>
-
-                    <div class="owl-carousel owl-theme">
-                        <div class="item"
-                             style="border:1px solid #CBCBCB !important; border-radius: 6px;">
-                            <div class="p-3">
-                                <a href="https://apps.odoo.com/apps/modules/17.0/base_accounting_kit"
-                                   style="color:#000; text-decoration:none">
-                                    <div style=" border-radius:4px">
-                                        <div>
-                                            <img src="./assets/modules/1.gif"
-                                                 alt="" width="100%"
-                                                 height="auto">
-                                        </div>
-                                        <p class="text-center mb-2 pb-0 text-black"
-                                           style="font-weight: 600; padding-top: 16px;">
-                                            Odoo 17 Full Accounting Kit</p>
+                <!--  -->
+                <section class="oe_container mt32">
+                <h2 style="color: #091E42;font-family: &quot;Montserrat&quot;;text-align: center;margin: 25px auto;text-transform: uppercase;" class="oe_slogan">
+                    <b>Related Products</b>
+                </h2>
+                <div id="demo" class="row carousel slide mt64 mb32" data-bs-ride="carousel">
+                    <!-- The slideshow -->
+                    <div class="carousel-inner">
+                        <div class="carousel-item active">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/base_accounting_kit" target="_blank" style="color: #000; text-decoration: none;">
+                                    <div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
+                                        <img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/1.gif" />
+                                        <h4 class="mt0 text-truncate" style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
+                                            Odoo 17 Full Accounting Kit</h4>
                                     </div>
                                 </a>
                             </div>
-                        </div>
-                        <div class="item"
-                             style="border:1px solid #CBCBCB !important; border-radius: 6px;">
-                            <div class="p-3">
-                                <a href="https://apps.odoo.com/apps/modules/17.0/ohrms_core"
-                                   style="color:#000; text-decoration:none">
-                                    <div style=" border-radius:4px">
-                                        <div>
-                                            <img src="./assets/modules/2.gif"
-                                                 alt="" width="100%"
-                                                 height="auto">
-                                        </div>
-                                        <p class="text-center pb-0 mb-2 text-black"
-                                           style="font-weight: 600; padding-top: 16px;">
-                                            Open HRMS Core</p>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/ohrms_core" target="_blank" style="color: #000; text-decoration: none;">
+                                    <div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
+                                        <img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/2.gif" />
+                                        <h4 class="mt0 text-truncate" style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
+                                             Open HRMS Core</h4>
                                     </div>
                                 </a>
                             </div>
-                        </div>
-                        <div class="item"
-                             style="border:1px solid #CBCBCB !important; border-radius: 6px;">
-                            <div class="p-3">
-                                <a href="https://apps.odoo.com/apps/modules/17.0/invoice_format_editor"
-                                   style="color:#000; text-decoration:none">
-                                    <div style=" border-radius:4px">
-                                        <div>
-                                            <img src="./assets/modules/3.png"
-                                                 alt="" width="100%"
-                                                 height="auto">
-                                        </div>
-                                        <p class="text-center pb-0 mb-2 text-black"
-                                           style="font-weight: 600; padding-top: 16px;">
-                                            Odoo17 Invoice Format Editor</p>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
+                                <a  href="https://apps.odoo.com/apps/modules/17.0/invoice_format_editor" target="_blank" style="color: #000; text-decoration: none;">
+                                    <div style="border-radius: 6px;padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
+                                        <img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/3.png"/>
+                                        <h4 class="mt0 text-truncate" style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
+                                            Odoo17 Invoice Format Editor </h4>
                                     </div>
                                 </a>
                             </div>
                         </div>
-                        <div class="item"
-                             style="border:1px solid #CBCBCB !important; border-radius: 6px;">
-                            <div class="p-3">
-                                <a href="https://apps.odoo.com/apps/modules/17.0/login_user_detail"
-                                   style="color:#000; text-decoration:none">
-                                    <div style=" border-radius:4px">
-                                        <div>
-                                            <img src="./assets/modules/4.png"
-                                                 alt="" width="100%"
-                                                 height="auto">
-                                        </div>
-                                        <p class="text-center pb-0 mb-2 text-black"
-                                           style="font-weight: 600; padding-top: 16px;">
-                                            User Log Details</p>
+                        <div class="carousel-item">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/login_user_detail" target="_blank" style="color: #000; text-decoration: none;">
+                                    <div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
+                                        <img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/4.png" />
+                                        <h4 class="mt0 text-truncate" style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
+                                            User Log Details</h4>
                                     </div>
                                 </a>
                             </div>
-                        </div>
-                        <div class="item"
-                             style="border:1px solid #CBCBCB !important; border-radius: 6px;">
-                            <div class="p-3">
-                                <a href="https://apps.odoo.com/apps/modules/17.0/product_barcode"
-                                   style="color:#000; text-decoration:none">
-                                    <div style=" border-radius:4px">
-                                        <div>
-                                            <img src="./assets/modules/5.png"
-                                                 alt="" width="100%"
-                                                 height="auto">
-                                        </div>
-                                        <p class="text-center pb-0 mb-2 text-black"
-                                           style="font-weight: 600; padding-top: 16px;">
-                                            Odoo17 Product Barcode Generator</p>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/product_barcode" target="_blank" style="color: #000; text-decoration: none;">
+                                    <div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
+                                        <img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/5.png" />
+                                        <h4 class="mt0 text-truncate" style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
+                                             Odoo17 Product Barcode Generator </h4>
                                     </div>
                                 </a>
                             </div>
-                        </div>
-                        <div class="item"
-                             style="border:1px solid #CBCBCB !important; border-radius: 6px;">
-                            <div class="p-3">
-                                <a href="https://apps.odoo.com/apps/modules/17.0/whatsapp_redirect"
-                                   style="color:#000; text-decoration:none">
-                                    <div style=" border-radius:4px">
-                                        <div>
-                                            <img src="./assets/modules/6.jpg"
-                                                 alt="" width="100%"
-                                                 height="auto">
-                                        </div>
-                                        <p class="text-center pb-0 mb-2 text-black"
-                                           style="font-weight: 600; padding-top: 16px;">
-                                            Send Whatsapp Message Odoo17</p>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float: left; padding: 10px;">
+                                <a href="https://apps.odoo.com/apps/modules/17.0/whatsapp_redirect" target="_blank" style="color: #000; text-decoration: none;">
+                                    <div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;" class="shadow-sm">
+                                        <img class="img img-responsive center-block" style=" max-width: 100%;" src="./assets/modules/6.jpg" />
+                                        <h4 class="mt0 text-truncate" style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
+                                            Send Whatsapp Message Odoo17</h4>
                                     </div>
                                 </a>
                             </div>
                         </div>
                     </div>
+                    <!-- Left and right controls -->
+                    <a class="carousel-control-prev" href="#demo" data-bs-slide="prev" style="margin-left: -30px;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="#demo" data-bs-slide="next" style="margin-right: -30px;width: 35px;color: #000;">
+                        <span class="carousel-control-next-icon">
+        <i class="fa fa-chevron-right" style="font-size:24px"></i>
+      </span>
+                    </a>
                 </div>
-                <!--  -->
+            </section>
                 <!-- service-section -->
 
                 <section id="services" class="mt-5" style="border-radius: 16px;
@@ -1287,21 +1244,21 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
 <script>
     $('.owl-carousel').owlCarousel({
-     rtl:true,
-     loop:true,
-     margin:10,
-     nav:true,
-     responsive:{
-         0:{
-             items:1
-         },
-         600:{
-             items:3
-         },
-         1000:{
-             items:3
-         }
-     }
- })
+        rtl: true,
+        loop: true,
+        margin: 10,
+        nav: true,
+        responsive: {
+            0: {
+                items: 1
+            },
+            600: {
+                items: 3
+            },
+            1000: {
+                items: 3
+            }
+        }
+    })
 </script>
 </html>