diff --git a/app/templates/home.html b/app/templates/home.html
index 38b929f..e85ecbc 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -1,17 +1,17 @@
 {% include 'header.html' %}
 
 <h1 class=" my-2 text-2xl text-center font-bold text-green-400">
-    Available Sources
+    = Available Sources =
 </h1>
 
 <div class="mx-auto my-1 p-1 w-full">
-    <div class="block p-4 md:flex md:flex-wrap md:justify-items-center w-full text-center break-words">
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 place-items-stretch text-center break-words">
         {% for chat in chats %}
         <a title="{{chat.name}}" href="/{{chat.page_id}}"
-            class="mx-auto flex flex-col justify-items-center w-2/3 min-h-full md:w-2/5 lg:w-1/6 rounded my-2 p-2 shadow hover:shadow-md hover:border hover:border-blue-300 hover:bg-blue-100">
+            class="p-2 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 id="chatimg" src="/{{chat.page_id}}/logo?big=1" onerror="chatImgAlt()" class="w-full rounded-full">
-            <div class="p-4 rounded">{{chat.name}}</div>
+            <div class="p-2 rounded">{{chat.name}}</div>
 
         </a>
         {% endfor %}