diff --git a/base_accounting_kit/static/description/assets/icons/blog-icon.svg b/base_accounting_kit/static/description/assets/icons/blog-icon.svg
new file mode 100644
index 000000000..357cad65a
--- /dev/null
+++ b/base_accounting_kit/static/description/assets/icons/blog-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6667 18.3346H5.41667C3.80583 18.3346 2.5 17.0288 2.5 15.418V4.16797C2.5 2.78726 3.61929 1.66797 5 1.66797H16.6667C17.1269 1.66797 17.5 2.04107 17.5 2.5013V17.5013C17.5 17.9616 17.1269 18.3346 16.6667 18.3346ZM15.8333 16.668V14.168H5.41667C4.72631 14.168 4.16667 14.7276 4.16667 15.418C4.16667 16.1083 4.72631 16.668 5.41667 16.668H15.8333ZM8.33333 3.33464V10.0013L11.25 8.33464L14.1667 10.0013V3.33464H8.33333Z" fill="white"/>
+</svg>
diff --git a/base_accounting_kit/static/description/assets/icons/external-link-line.svg b/base_accounting_kit/static/description/assets/icons/external-link-line.svg
new file mode 100644
index 000000000..bbd6a2b8a
--- /dev/null
+++ b/base_accounting_kit/static/description/assets/icons/external-link-line.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75 5.25V7H4.375V16.625H14V12.25H15.75V17.5C15.75 17.9833 15.3583 18.375 14.875 18.375H3.5C3.01675 18.375 2.625 17.9833 2.625 17.5V6.125C2.625 5.64176 3.01675 5.25 3.5 5.25H8.75ZM18.375 2.625V9.625H16.625L16.6249 5.61138L9.80621 12.4312L8.56878 11.1938L15.3868 4.375H11.375V2.625H18.375Z" fill="black"/>
+</svg>
diff --git a/base_accounting_kit/static/description/assets/icons/password.svg b/base_accounting_kit/static/description/assets/icons/password.svg
new file mode 100644
index 000000000..172a2effc
--- /dev/null
+++ b/base_accounting_kit/static/description/assets/icons/password.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17ZM11 14V18H13V14H11Z" fill="#B4B4B4"/>
+</svg>
diff --git a/base_accounting_kit/static/description/assets/icons/user.svg b/base_accounting_kit/static/description/assets/icons/user.svg
new file mode 100644
index 000000000..edc53c44e
--- /dev/null
+++ b/base_accounting_kit/static/description/assets/icons/user.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z" fill="#B4B4B4"/>
+</svg>
diff --git a/base_accounting_kit/static/description/index.html b/base_accounting_kit/static/description/index.html
index de245b231..fcc447455 100644
--- a/base_accounting_kit/static/description/index.html
+++ b/base_accounting_kit/static/description/index.html
@@ -98,13 +98,12 @@
         <!-- version support -->
         <!-- support-header -->
 
-        <div class="supports my-5 py-3" style="border-bottom: 1px solid #e7e7e7;">
+        <div class="supports my-5 py-3">
             <div class="row justify-content-between">
                 <div class="col-4">
                 </div>
                 <div class="col-6">
                     <div class="row" style="margin-top:10px">
-
                         <div class="my-3 d-flex align-items-center justify-content-end">
                             <span class="me-3"><b>Supports: </b></span>
                             <div class="text-center"
@@ -266,64 +265,46 @@
 
                 <!-- Live Preview -->
 
-                <div class="" style="border-radius: 32px;
-                                     padding: 27px 40px;
-                                     border: 5px solid #EBEEF2;
-                                     background: #E3E3EE;
-                                     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">
-
-                        <div style="display: flex; justify-content: center; z-index: 999; margin-bottom: 40px;">
-                              <a href="https://www.youtube.com/watch?v=ROhYgB35Sls" target="_blank" style="font-weight: bold;width:300px;margin-right: 22px; background-color: #FF0000;padding: 15px 24px; border-radius: 6px; color: #fff; text-decoration: none; border-radius: 35px; display: flex; align-items: center;gap: 8px; ">
-                                <img style="margin-bottom: 3px; margin-right: 5px;" src="./assets/icons/youtube-icon.png">
-                                    Watch Demo on YouTube</a>
-                              <a href="https://www.cybrosys.com/blog/what-are-the-key-features-of-odoo-18-full-accounting-kit-for-community" target="_blank"
-                                 style="font-weight: bold;width:300px;background-color: #2D2D2D;padding: 15px 35px; border-radius: 6px; color: #fff; text-decoration: none;  border-radius: 35px; display: flex; align-items: center;gap: 8px; ">
-                                <img style="margin-bottom: 3px; margin-right: 5px;" src="./assets/icons/blog-icon.png">
-                                  Read Our Detailed Blog</a>
-                        </div>
+                    <!-- demo-main -->
+                <div style="background-color: #ECE8F2; padding: 40px; border-radius: 12px; font-family: Arial, sans-serif; text-align: center; color: #000; margin-top: 34px;">
+                  <h1 style="font-size: 32px; font-weight: bold; margin-bottom: 30px;">
+                    Demo Database for Accounting Kit
+                  </h1>
 
+                  <div style="display: flex; justify-content: center; gap: 16px; margin-bottom: 40px; flex-wrap: wrap;">
+                    <a href="https://youtu.be/ROhYgB35Sls" target="_blank" style="background-color: red; color: white; padding: 12px 20px; border-radius: 26px; text-decoration: none; font-weight:600; display: flex; align-items: center; gap: 8px;">
+                      <span style="font-size: 18px;"><img src="./assets/icons/youtube-icon.png"></span> Watch Demo on YouTube
+                    </a>
+                    <a href="https://www.cybrosys.com/blog/what-are-the-key-features-of-odoo-18-full-accounting-kit-for-community" target="_blank" style="background-color: black; color: white; padding: 12px 20px; border-radius: 26px; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                      <span style="font-size: 18px;">                    <img src="./assets/icons/blog-icon.png"></span> Read Our Detailed Blog
+                    </a>
+                  </div>
 
+                  <div style="max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap; background: white; border-radius: 16px; overflow: hidden; padding: 30px;">
+                    <div style="flex: 1; min-width: 250px; text-align: left;">
+                      <h2 style="font-size: 20px; font-weight: bold; margin-bottom: 24px;">Login credentials</h2>
+                      <p style="margin-bottom: 8px;">Link</p>
+                      <a href="https://kit.easyinstance.com" target="_blank" style="display: inline-block; padding: 10px 14px; border: 2px dotted black; border-radius: 10px; font-weight: bold; text-decoration: none; color: black;">
+                        https://kit.easyinstance.com
+                        <span style="margin-left: 8px;"><img src="./assets/icons/external-link-line.svg"></span>
+                      </a>
+                    </div>
 
-                            <h2 style=" color: var(--text-color);
-                                        text-align: center;
-                                        font-size: 40px;
-                                        font-weight: 620;
-                                        padding-bottom: 50px;">Demo Database for Accounting Kit
-                            </h2>
-                            <div class="col-md-6 col-sm-12 p-3">
-                                <div class="d-flex flex-column h-100"
-                                     style="padding:13px; border-radius:25px; background-color:#faf8ff">
-                                    <div class="d-flex align-items-center justify-content-center">
-                                        <a href="https://kit.easyinstance.com"
-                                           style="text-decoration: none; color:#1A202C; font-weight:700; font-size:1.6rem; margin-bottom:2px;"
-                                           target="_blank">
-                                            https://kit.easyinstance.com
-                                        </a>
-                                        <div class="d-flex justify-content-center align-items-center"
-                                             style="margin-left:13px; background-color:#A375FF !important; border-radius:8px !important; height:50px; width:50px">
-                                            <img src="./assets/icons/mouse-cursor.svg"
-                                                 class="img-responsive" height="29px"
-                                                 width="29px">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-md-3 col-sm-12 p-3">
-                                <div class="d-flex flex-column h-100"
-                                     style="padding:13px; border-radius:25px; background-color:#ece9f2">
-                                    <div class="d-flex align-items-center justify-content-center">
-                                        <p
-                                                style="text-decoration: none; color:#d20606; font-weight:500; font-size:1.2rem; margin-bottom:2px;">
-                                            login : demo <br/>
-                                            password : demo
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
+                    <div style="flex: 1; min-width: 250px; background-color: #f2f2f2; border-radius: 12px; padding: 20px; margin-top: 20px;">
+                      <div style="margin-bottom: 20px; text-align: left;">
+                        <p style="margin-bottom: 6px;">Log in</p>
+                        <div style="display: flex; justify-content: space-between; align-items: center; background-color: white; padding: 10px 14px; border-radius: 10px; font-weight: bold;">
+                          demo <span><img src="./assets/icons/user.svg"></span>
+                        </div>
+                      </div>
+                      <div style="text-align: left;">
+                        <p style="margin-bottom: 6px;">Password</p>
+                        <div style="display: flex; justify-content: space-between; align-items: center; background-color: white; padding: 10px 14px; border-radius: 10px; font-weight: bold;">
+                          demo <span><img src="./assets/icons/password.svg"></span>
                         </div>
+                      </div>
                     </div>
+                  </div>
                 </div>
 
                 <!-- key-highlight -->