diff --git a/core/styles.py b/core/styles.py
index c0a672b..37615c7 100755
--- a/core/styles.py
+++ b/core/styles.py
@@ -2,5 +2,5 @@
 
 STYLE = {
     "red_btn": "text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
-    "card": "bg-white drop-shadow-md p-6 mx-auto my-10 aspect-[2/3] hover:drop-shadow-xl hover:scale-[0.95] scale-[0.9] transition-all duration-50 transform ease-in-out w-80",
+    "card": "bg-white drop-shadow-md p-4 mx-auto mt-5 aspect-[2/3] hover:drop-shadow-xl hover:scale-[0.85] scale-[0.8] lg:hover:scale-[0.95] lg:scale-[0.9] transition-all duration-50 transform ease-in-out w-60 sm:w-80",
 }
diff --git a/core/templates/head.html b/core/templates/head.html
index 078f27d..e1d2240 100755
--- a/core/templates/head.html
+++ b/core/templates/head.html
@@ -1,2 +1,3 @@
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/core/templates/index.html b/core/templates/index.html
index 2549c47..c23d056 100755
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -25,7 +25,7 @@
       {% else %}
 
       <div
-        class="mb-5 flex items-center justify-center grid lg:grid-cols-6 md:grid-cols-3"
+        class="mb-5 -mt-5 flex items-center justify-center grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
       >
         {% for report in reports %}