diff --git a/app/templates/home.html b/app/templates/home.html
index d5fa08d..13a6808 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -8,10 +8,10 @@
     <div class="px-2 sm:px-4 md:px-6 lg:px-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 text-center break-words">
         {% for chat in chats %}
         <a title="{{chat.name}}" href="/{{chat.page_id}}"
-            class="p-4 rounded shadow hover:shadow-md hover:border hover:border-blue-300 hover:bg-blue-100 dark:bg-red-500 dark:hover:bg-red-700">
+            class="p-4 rounded shadow hover:shadow-md hover:border hover:border-blue-300 hover:bg-blue-100 dark:bg-red-700 dark:hover:bg-red-500">
 
             <img src="/{{chat.page_id}}/logo?big=1" class="w-full rounded-full ">
-            <div class="p-2 rounded">{{chat.name}}</div>
+            <div class="p-2 mt-2 rounded text-white bg-blue-500 dark:bg-yellow-500">{{chat.name}}</div>
 
         </a>
         {% endfor %}
diff --git a/app/templates/index.html b/app/templates/index.html
index a422725..48240ac 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -50,7 +50,7 @@
         <!-- Card  -->
         <div title="{% if item.media %} {{item.mime_type}} | {{item.human_size}} {% else %} Text message {% endif %}"
             href="{{item.url}}"
-            class="text-sm items-center justify-center w-full min-h-full sm:w-2/5 md:w-1/4 lg:w-1/6 rounded m-2 shadow hover:shadow-lg dark:bg-red-500">
+            class="text-sm items-center justify-center w-full min-h-full sm:w-2/5 md:w-1/4 lg:w-1/6 rounded m-2 shadow hover:shadow-lg dark:bg-red-700">
 
             {% if item.media %}