diff --git a/many2many_attachment_preview/static/description/index.html b/many2many_attachment_preview/static/description/index.html
index 85c3dd80d..e61e340b6 100644
--- a/many2many_attachment_preview/static/description/index.html
+++ b/many2many_attachment_preview/static/description/index.html
@@ -1,6 +1,6 @@
 <div style="background-color: #714B67; min-height: 600px; width: 100%; padding: 15px; position: relative;">
     <!-- TITLE BAR -->
-    <div
+    <div class="d-flex align-items-center justify-content-between"
             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;"/>
@@ -22,6 +22,9 @@
     <!-- END OF TITLE BAR -->
 
     <!-- APP HERO -->
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
     <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
         Many2Many Attachment Preview</h1>
     <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;">
@@ -29,6 +32,7 @@
     <!-- 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></div></div>
 
 </div>