diff --git a/addons/default/visiosoft/advs-module/resources/js/list-table.js b/addons/default/visiosoft/advs-module/resources/js/list-table.js
index e6cb27468..beba35ca4 100644
--- a/addons/default/visiosoft/advs-module/resources/js/list-table.js
+++ b/addons/default/visiosoft/advs-module/resources/js/list-table.js
@@ -1,3 +1,13 @@
 $(".clickable-row").click(function () {
     window.location = $(this).data("href");
-});
\ No newline at end of file
+});
+
+$('.hover-area').mouseover((e) => {
+    var el = $(e);
+
+    var img = $(`.${$(el[0].target).data('id')}`);
+
+    img.siblings('img').hide();
+
+    img.show();
+});
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig b/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
index b2c9865be..d93d3f898 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
@@ -14,12 +14,14 @@
                 <div class="d-flex flex-column product-hb gallery-card pb-3 px-1 pt-1 border shadow-sm rounded">
                     <div class="product-image-hb p-sm-3 p-1">
                         <a href="{{ adv.detail_url }}" class="imgs" id="{{ adv.id }}">
-                                {%  for key,photo in adv.getViewPhotoUrl|slice(0, 3) %}
+                            {% set slicedPhotos = adv.getViewPhotoUrl|slice(0,3) %}
+
+                            {%  for key,photo in slicedPhotos %}
                                     <img src="{{ photo }}" class="product-image-in ads-img img-{{ adv.id ~ '-' ~ key }}" alt="">
 
                                 {% endfor %}
                             <div class="hover-area">
-                                {% for key, photo in adv.getViewPhotoUrl|(0,3) %}
+                                {% for key, photo in slicedPhotos %}
                                         <div class="hover-{{ key }}" data-parent="{{ adv.id }}" data-id="img-{{ adv.id ~ '-' ~ key }}"></div>
                                 {% endfor %}
                             </div>
@@ -44,19 +46,8 @@
             </div>
         {% endfor %}
     </div>
-    <script>
-        $('.ads-img').first().css('display', 'block');
 
-        $('.hover-area').mouseover((e) => {
-            var el = $(e);
-
-            var img = $(`.${$(el[0].target).data('id')}`);
-
-            img.siblings('img').css('display', 'none');
-
-            img.css('display', 'block');
-        });
-    </script>
+    {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
 
 {% endblock %}
 
@@ -66,7 +57,6 @@
 {% endblock %}
 
 {% block customjs %}
-    {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
     {% include "theme::scroll-modal" %}
 {% endblock %}
 
diff --git a/addons/default/visiosoft/defaultadmin-theme/resources/scss/theme/_variables.scss b/addons/default/visiosoft/defaultadmin-theme/resources/scss/theme/_variables.scss
index 7e2cf34c1..4d1a5f84a 100644
--- a/addons/default/visiosoft/defaultadmin-theme/resources/scss/theme/_variables.scss
+++ b/addons/default/visiosoft/defaultadmin-theme/resources/scss/theme/_variables.scss
@@ -164,7 +164,7 @@ $grid-gutter-widths: (
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;