diff --git a/templates/product.html.twig b/templates/product.html.twig
index a267b4e..bbffcd2 100644
--- a/templates/product.html.twig
+++ b/templates/product.html.twig
@@ -1,57 +1,60 @@
 {% extends "template.html.twig" %}
 
 {% block content %}
-    <table class='table table-hover'>
-        <tr>
-            <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
-                                                            href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred %}★{% else %} ☆ {% endif %}</a></td>
-            <td><img src='{{ product.image }}&width=150' class='border rounded p-1' alt='{{ product.name }}'/></td>
-            <td>
-                <a href='{{ path('app_product', {'productId': product.id}) }}' class="text-decoration-none">{{ product.name }}</a>
-                <span class="badge text-bg-light">{{ product.subTitle }}</span>
-            </td>
-            <td>
-                <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';" >
-                    <ol class="breadcrumb">
-                        {% for category in product.categories %}
-                            <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"  href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
-                        {%  endfor %}
-                    </ol>
-                </nav>
-            </td>
-            <td><a href='https://pl.ryobitools.eu/{{ product.url }}'>link</a></td>
-        </tr>
-        <tr>
-            <td colspan="5">
-                <div style="width: 800px;">
-                    <canvas id="price"></canvas>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="5">
-                <table class='table table-hover table-sm mb-0'>
-                    <thead>
-                    <tr>
-                        <th>price</th>
-                        <th>lowest product price in 30 days</th>
-                        <th colspan='2'>standard price</th>
-                        <th>Stock</th>
-                    </tr>
-                    </thead>
-                    {% for price in product.price %}
+    <div class="table-responsive">
+        <table class='table table-hover'>
+            <tr>
+                <td class="align-middle font-weight-bold h3"><a class="text-warning text-decoration-none"
+                                                                href="{{ path('app_star', {'productId': product.id}) }}">{% if product.starred %}★{% else %} ☆ {% endif %}</a></td>
+                <td><img src='{{ product.image }}&width=150' class='border rounded p-1' alt='{{ product.name }}'/></td>
+                <td>
+                    <a href='{{ path('app_product', {'productId': product.id}) }}' class="text-decoration-none">{{ product.name }}</a>
+                    <span class="badge text-bg-light">{{ product.subTitle }}</span>
+                </td>
+                <td>
+                    <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
+                        <ol class="breadcrumb">
+                            {% for category in product.categories %}
+                                <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-item text-decoration-none"
+                                                                                   href="{{ path('app_category', {'category': category}) }}">{{ category }}</a></li>
+                            {% endfor %}
+                        </ol>
+                    </nav>
+                </td>
+                <td><a href='https://pl.ryobitools.eu/{{ product.url }}'>link</a></td>
+            </tr>
+            <tr>
+                <td colspan="5">
+                    <div style="width: 800px;">
+                        <canvas id="price"></canvas>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="5">
+                    <table class='table table-hover table-sm mb-0'>
+                        <thead>
                         <tr>
-                            <td>{{ price.price | format_currency('PLN', {}, 'pl') }}</td>
-                            <td>{{ price.lowestProductPrice30Days | format_currency('PLN', {}, 'pl') }}</td>
-                            <td>{{ price.productStandardPrice | format_currency('PLN', {}, 'pl') }}</td>
-                            <td>{{ price.created_at }}</td>
-                            <td>{{ (product.stock | findByCreatedAtDate(price.created_at | slice(0,10))).stock ?? '' }}</td>
+                            <th>price</th>
+                            <th>lowest product price in 30 days</th>
+                            <th colspan='2'>standard price</th>
+                            <th>Stock</th>
                         </tr>
-                    {% endfor %}
-                </table>
-            </td>
-        </tr>
-    </table>
+                        </thead>
+                        {% for price in product.price %}
+                            <tr>
+                                <td>{{ price.price | format_currency('PLN', {}, 'pl') }}</td>
+                                <td>{{ price.lowestProductPrice30Days | format_currency('PLN', {}, 'pl') }}</td>
+                                <td>{{ price.productStandardPrice | format_currency('PLN', {}, 'pl') }}</td>
+                                <td>{{ price.created_at }}</td>
+                                <td>{{ (product.stock | findByCreatedAtDate(price.created_at | slice(0,10))).stock ?? '' }}</td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
     <script>
diff --git a/templates/productList.html.twig b/templates/productList.html.twig
index 6dedf70..c8b4a66 100644
--- a/templates/productList.html.twig
+++ b/templates/productList.html.twig
@@ -1,6 +1,7 @@
 {% extends "template.html.twig" %}
 
 {% block content %}
+<div class="table-responsive">
     <table class='table table-hover'>
         <thead>
         <tr>
@@ -55,4 +56,5 @@
             </tr>
         {% endfor %}
     </table>
-{% endblock %}
\ No newline at end of file
+</div>
+{% endblock %}