diff --git a/website_apps_store/static/src/css/main.less b/website_apps_store/static/src/css/main.less
deleted file mode 100644
index cf0d8e3..0000000
--- a/website_apps_store/static/src/css/main.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.desc_rst > {
-    .document > .reference{
-         display: none;
-    }
-}
diff --git a/website_apps_store/static/src/css/main.scss b/website_apps_store/static/src/css/main.scss
new file mode 100644
index 0000000..0793914
--- /dev/null
+++ b/website_apps_store/static/src/css/main.scss
@@ -0,0 +1,14 @@
+.desc_rst > {
+    .document > .reference{
+         display: none;
+    }
+}
+
+.font_12 {
+    font-size: 12px;
+}
+
+.dropdown-scrollable {
+    max-height: 15rem;
+    overflow-y: auto;
+}
diff --git a/website_apps_store/static/src/css/style.css b/website_apps_store/static/src/css/style.css
deleted file mode 100644
index 8004787..0000000
--- a/website_apps_store/static/src/css/style.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.padd_0{
-    padding: 0;
-}
-.font_12{
-    font-size: 12px;
-}
diff --git a/website_apps_store/views/assets.xml b/website_apps_store/views/assets.xml
index eb7bef8..e0f95f0 100644
--- a/website_apps_store/views/assets.xml
+++ b/website_apps_store/views/assets.xml
@@ -4,8 +4,7 @@
         <template id="assets_frontend" name="Website Apps Store"
             inherit_id="website.assets_frontend">
             <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/website_apps_store/static/src/css/style.css"/>
-                <link rel="stylesheet" href="/website_apps_store/static/src/css/main.less"/>
+                <link rel="stylesheet" href="/website_apps_store/static/src/css/main.scss"/>
                 <script type="text/javascript" src="/website_apps_store/static/src/js/website_sale.js"></script>
                 <script type="text/javascript" src="/website_apps_store/static/src/js/website_apps_store_tour.js"></script>
             </xpath>
diff --git a/website_apps_store/views/templates.xml b/website_apps_store/views/templates.xml
index 35732c1..8b91cf6 100644
--- a/website_apps_store/views/templates.xml
+++ b/website_apps_store/views/templates.xml
@@ -5,59 +5,57 @@
 -->
 <odoo>
     <data>
-        <!--Shop Customization/-->
+        <!-- Filter: Category by -->
         <template id="category_display" name="Show Category by">
             <div class="dropdown btn-group dropdown_category_by">
+                <!-- Search selected category -->
                 <t t-set="selected_category" t-value="False"/>
                 <t t-foreach="category_all" t-as="cat">
                     <t t-if="cat.id == int(category or 0)"
                         t-set="selected_category" t-value="cat"/>
                 </t>
-                <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
-                    <span>Category : <t t-esc="(selected_category and
-                            selected_category.name) or 'All'"/></span>
-                    <span class="caret"></span>
+
+                <!-- Dropdown menu -->
+                <a class="btn btn-secondary dropdown-toggle ml-2" href="#" role="button" id="dropdownMenuFilterCategoryBy" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Category: <t t-esc="(selected_category and selected_category.name) or 'All'"/>
                 </a>
-                <ul class="dropdown-menu" role="menu">
-                    <li t-att-class="'active' if not category else ''">
-                        <a t-att-href="keep('/shop/', category='')">All</a>
-                    </li>
+                <div class="dropdown-menu dropdown-scrollable" aria-labelledby="dropdownMenuFilterCategoryBy">
+                    <a t-att-class="'dropdown-item %s' % ('active' if not category else '')" t-att-href="keep('/shop/', category='')">All</a>
                     <t t-foreach="category_all" t-as="c">
-                        <li t-att-class="'active' if c.id == int(category or 0) else None">
-                            <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-field="c.name"></a>
-                        </li>
+                        <a t-att-class="'dropdown-item %s' % ('active' if c.id == int(category or 0) else '')" t-att-href="keep('/shop/category/' + slug(c), category=0)" t-field="c.name" />
                     </t>
-                </ul>
+                </div>
             </div>
         </template>
+
+        <!-- Filter: Version by -->
         <template id="version_display" name="Show Version by">
             <div class="dropdown btn-group dropdown_version_by">
+                <!-- Search selected version -->
                 <t t-set="selected_version" t-value="False"/>
                 <t t-foreach="versions" t-as="ver">
                     <t t-if="ver.id == int(version or 0)"
                         t-set="selected_version" t-value="ver"/>
                 </t>
-                <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
-                    <span>Version : <t t-esc="(selected_version and
-                            selected_version.name) or 'All'"/></span>
-                    <span class="caret"></span>
+                <!-- Dropdown menu -->
+                <a class="btn btn-secondary dropdown-toggle ml-2" href="#" role="button" id="dropdownMenuFilterVersionBy" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Version: <t t-esc="(selected_version and selected_version.name) or 'All'"/>
                 </a>
-                <ul class="dropdown-menu" role="menu">
-                    <li t-att-class="'active' if not version else ''">
-                        <a t-att-href="keep('/shop', version='')">All</a>
-                    </li>
+                <div class="dropdown-menu dropdown-scrollable" aria-labelledby="dropdownMenuFilterVersionBy">
+                    <a t-att-class="'dropdown-item %s' % ('active' if not version else '')" t-att-href="keep('/shop', version='')">All</a>
                     <t t-foreach="versions" t-as="v">
-                        <li t-att-class="'active' if v.id == int(version or 0) else None">
-                            <a t-att-href="keep('/shop', version=v.id)">
-                                <span t-esc="v.name"/>
-                            </a>
-                        </li>
+                        <a t-att-class="'dropdown-item %s' % ('active' if v.id == int(version or 0) else '')" t-att-href="keep('/shop', version=v.id)">
+                            <t t-esc="v.name"/>
+                        </a>
                     </t>
-                </ul>
+                </div>
             </div>
         </template>
+
+        <!-- Filter: Maturity by -->
         <template id="maturity_display">
             <div class="dropdown btn-group dropdown_maturity_by">
+                <!-- Search selected maturity -->
                 <t t-set="selected_maturity" t-value="False"/>
                     <t t-if="maturity == 'alpha'"
                         t-set="selected_maturity" t-value="'Alpha'"/>
@@ -67,29 +65,21 @@
                         t-set="selected_maturity" t-value="'Production/Stable'"/>
                     <t t-if="maturity == 'mature'"
                         t-set="selected_maturity" t-value="'Mature'"/>
-                <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
-                    <span>Maturity : <t t-esc="selected_maturity or 'All'"/></span>
-                    <span class="caret"></span>
+                <!-- Dropdown menu -->
+                <a class="btn btn-secondary dropdown-toggle ml-2" href="#" role="button" id="dropdownMenuFilterMaturityBy" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Maturity: <t t-esc="selected_maturity or 'All'"/>
                 </a>
-                <ul class="dropdown-menu" role="menu">
-                    <li t-att-class="'active' if not maturity else ''">
-                        <a t-att-href="keep('/shop', maturity='')">All</a>
-                    </li>
-                    <li t-att-class="'active' if maturity == 'alpha' else ''">
-                        <a t-att-href="keep('/shop', maturity='alpha')">Alpha</a>
-                    </li>
-                    <li t-att-class="'active' if maturity == 'beta' else ''">
-                        <a t-att-href="keep('/shop', maturity='beta')">Beta</a>
-                    </li>
-                    <li t-att-class="'active' if maturity == 'production/stable' else ''">
-                        <a t-att-href="keep('/shop', maturity='production/stable')">Production/Stable</a>
-                    </li>
-                    <li t-att-class="'active' if maturity == 'mature' else ''">
-                        <a t-att-href="keep('/shop', maturity='mature')">Mature</a>
-                    </li>
-                </ul>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuFilterMaturityBy">
+                    <a t-att-class="'dropdown-item %s' % ('active' if not maturity else '')" t-att-href="keep('/shop', maturity='')">All</a>
+                    <a t-att-class="'dropdown-item %s' % ('active' if maturity == 'alpha' else '')" t-att-href="keep('/shop', maturity='alpha')">Alpha</a>
+                    <a t-att-class="'dropdown-item %s' % ('active' if maturity == 'beta' else '')" t-att-href="keep('/shop', maturity='beta')">Beta</a>
+                    <a t-att-class="'dropdown-item %s' % ('active' if maturity == 'production/stable' else '')" t-att-href="keep('/shop', maturity='production/stable')">Production/Stable</a>
+                    <a t-att-class="'dropdown-item %s' % ('active' if maturity == 'mature' else '')" t-att-href="keep('/shop', maturity='mature')">Mature</a>
+                </div>
             </div>
         </template>
+
+        <!-- Add new filters -->
         <template id="sort_customize" inherit_id="website_sale.sort">
             <xpath expr='//div[hasclass("dropdown_sorty_by")]' position="after">
                 <t t-call="website_apps_store.category_display"/>
@@ -110,12 +100,14 @@
             </xpath>
         </template>
 
+        <!-- Modify search box placeholder -->
         <template id="search_placeholder" inherit_id="website.website_search_box">
             <xpath expr="//input" position="attributes">
                 <attribute name="placeholder">Name, Author, Version...</attribute>
             </xpath>
         </template>
 
+        <!-- Product Item Cell -->
         <template id="products_item_customize" inherit_id="website_sale.products_item">
             <xpath expr="//section" position="attributes">
                 <attribute name="t-att-style">'padding-bottom: 1px;' if product.odoo_module_id else ''</attribute>
@@ -124,26 +116,22 @@
                 <attribute name="t-att-style">'margin-bottom: 4px;' if product.odoo_module_id else ''</attribute>
             </xpath>
             <xpath expr="//h6//a[1]" position="after">
-                <t t-if="product.odoo_module_id and product.product_variant_ids">
+                <t t-if="product.odoo_module_id">
                     <br />
                     <span t-esc="product.technical_name" class="font_12"/>
                     <br/>
                     <t t-set="author_ids" t-value="product.get_author_details()"/>
                     <span t-esc="', '.join(author.name for author in author_ids)" class="font_12"/>
                     <br/>
-                </t>
-                <t t-if="product.odoo_module_id">
                     <t t-foreach="product.attribute_line_ids" t-as="attr">
                         <span t-esc="' / '.join(value.name for value in attr.value_ids.sorted(reverse=True))" class="font_12"/>
                     </t>
+                    <!-- Download counter -->
+                    <div class="pull-right">
+                        <span class="fa fa-download"></span>
+                        <span t-esc="product.total_download_count"></span>
+                    </div>
                 </t>
-
-                <!--Sort by Download counts-->
-                <div class="pull-right">
-                    <span class="fa fa-download"></span>
-                    <sapn t-esc="product.total_download_count"></sapn>
-                </div>
-
             </xpath>
             <xpath expr='//div[hasclass("product_price")]//span[1]' position="replace">
                 <span t-if="combination_info['price'] and not product.odoo_module_id" t-esc="combination_info['price']" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
@@ -153,8 +141,7 @@
             </xpath>
         </template>
 
-        <!--Product Customization /-->
-
+        <!-- Product Detail Page Customization -->
         <template id="product" inherit_id="website_sale.product">
             <xpath expr="//t[@t-call='website_sale.product_price']" position="attributes">
                 <attribute name="t-if">not product.odoo_module_id</attribute>
@@ -185,7 +172,7 @@
                         <span class="o_website_form_recaptcha" />
                     </div>
                 </div>
-                <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
+                <div class="col-xs-12 p-0" t-if="product.odoo_module_id">
                     <div class="col-xs-4 mt16 mb16">
                         <button class="btn btn-primary btn-lg"
                                 name="download_zip"
@@ -207,69 +194,83 @@
                 <t t-if="product.odoo_module_id">
                     <t t-set="product_var_id" t-value="product.get_version_info()"/>
                 </t>
-                <div class="col-sm-4">
-                <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>Technical Name: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0">
-                            <span class="tech_detail" t-esc="product_var_id.odoo_module_version_id.module_id.technical_name"/>
+                <div class="col-md-4 container">
+                    <div class="row">
+                        <div class="col-xs-12 container p-0" t-if="product.odoo_module_id">
+                            <div class="text-left col-xs-4 p-0">
+                                <b>Technical Name: </b>
+                            </div>
+                            <div class="col-xs-8 p-0">
+                                <span class="tech_detail" t-esc="product_var_id.odoo_module_version_id.module_id.technical_name"/>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 padd_0" t-if="product.odoo_module_id and len(product.odoo_module_id.organization_serie_ids) == 1">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>Version: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0">
-                            <span class="tech_detail" t-esc="product_var_id.odoo_module_id.organization_serie_ids[0].name"/>
+                    <div class="row">
+                        <div class="col-xs-12 p-0" t-if="product.odoo_module_id and len(product.odoo_module_id.organization_serie_ids) == 1">
+                            <div class="pull-left text-left col-xs-4 p-0">
+                                <b>Version: </b>
+                            </div>
+                            <div class="pull-right col-xs-8 p-0">
+                                <span class="tech_detail" t-esc="product_var_id.odoo_module_id.organization_serie_ids[0].name"/>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>License: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0">
-                            <a t-att-href="product_var_id.app_license_id.website" class="license_url" target="_blank">
-                                <span class="license_detail" t-esc="product_var_id.app_license_id.name"/>
-                            </a>
+                    <div class="row">
+                        <div class="col-xs-12 p-0" t-if="product.odoo_module_id">
+                            <div class="pull-left text-left col-xs-4 p-0">
+                                <b>License: </b>
+                            </div>
+                            <div class="pull-right col-xs-8 p-0">
+                                <a t-att-href="product_var_id.app_license_id.website" class="license_url" target="_blank">
+                                    <span class="license_detail" t-esc="product_var_id.app_license_id.name"/>
+                                </a>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>Author: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0">
-                            <span class="author_detail" t-esc="', '.join(author.name for author in product_var_id.app_author_ids)"/>
+                    <div class="row">
+                        <div class="col-xs-12 p-0" t-if="product.odoo_module_id">
+                            <div class="pull-left text-left col-xs-4 p-0">
+                                <b>Author: </b>
+                            </div>
+                            <div class="pull-right col-xs-8 p-0">
+                                <span class="author_detail" t-esc="', '.join(author.name for author in product_var_id.app_author_ids)"/>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>Maintainer: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0">
-                            <a href="https://odoo-community.org" target="_blank">
-                                <span class="main_detail">https://odoo-community.org</span>
-                            </a>
+                    <div class="row">
+                        <div class="col-xs-12 p-0" t-if="product.odoo_module_id">
+                            <div class="pull-left text-left col-xs-4 p-0">
+                                <b>Maintainer: </b>
+                            </div>
+                            <div class="pull-right col-xs-8 p-0">
+                                <a href="https://odoo-community.org" target="_blank">
+                                    <span class="main_detail">https://odoo-community.org</span>
+                                </a>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>Website: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0">
-                            <a t-att-href="product_var_id.app_website" target="_blank">
-                                <span class="website_detail" t-esc="product_var_id.app_website"/>
-                            </a>
+                    <div class="row">
+                        <div class="col-xs-12 p-0" t-if="product.odoo_module_id">
+                            <div class="pull-left text-left col-xs-4 p-0">
+                                <b>Website: </b>
+                            </div>
+                            <div class="pull-right col-xs-8 p-0">
+                                <a t-att-href="product_var_id.app_website" target="_blank">
+                                    <span class="website_detail" t-esc="product_var_id.app_website"/>
+                                </a>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-xs-12 padd_0" t-if="product.odoo_module_id">
-                        <div class="pull-left text-left col-xs-4 padd_0">
-                            <b>Repository: </b>
-                        </div>
-                        <div class="pull-right col-xs-8 padd_0" style="overflow-wrap:break-word;">
-                            <a t-att-href="product_var_id.app_github_url" target="_blank">
-                                <span class="repo_detail" t-esc="product_var_id.app_github_url"/>
-                            </a>
+                    <div class="row">
+                        <div class="col-xs-12 p-0" t-if="product.odoo_module_id">
+                            <div class="pull-left text-left col-xs-4 p-0">
+                                <b>Repository: </b>
+                            </div>
+                            <div class="pull-right col-xs-8 p-0" style="overflow-wrap:break-word;">
+                                <a t-att-href="product_var_id.app_github_url" target="_blank">
+                                    <span class="repo_detail" t-esc="product_var_id.app_github_url"/>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -293,8 +294,7 @@
             <xpath expr="//div[@id='product_details']/h1" position="replace">
             </xpath>
             <xpath expr="//div[@id='product_details']" position="attributes">
-                <attribute name="class" remove="col-sm-5 col-lg-4 col-lg-offset-1"></attribute>
-                <attribute name="class" add="col-sm-4" separator=" "></attribute>
+                <attribute name="class" remove="col-md-6 offset-xl-2" add="col-sm-4 col-md-4"></attribute>
             </xpath>
         </template>
         <template id="product_quantity_customize" inherit_id="website_sale.product_quantity">