diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index d7ced51..b29bd45 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -42,65 +42,86 @@
         </div>
     </div>
 
-    <!-- Filter Form -->
-    <form method="POST" action="{{ url_for('main.filter_dashboard') }}" class="p-4 bg-white rounded-lg shadow-md">
-        <h3 class="text-lg font-bold text-gray-800 mb-4">Filter Readings</h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-                <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
-                <input type="date" name="start_date" id="start_date" class="w-full p-2 border rounded">
-            </div>
-            <div>
-                <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
-                <input type="date" name="end_date" id="end_date" class="w-full p-2 border rounded">
-            </div>
-        </div>
-        <div class="mt-4">
-            <button type="submit" class="w-full md:w-auto bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
-                Apply Filters
+    <div x-data="{ open: false }" class="p-4 bg-white rounded-lg shadow-md">
+        <!-- Collapsible Header -->
+        <div class="flex justify-between items-center">
+            <h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
+            <button @click="open = !open" class="text-blue-600 hover:underline">
+                <span x-show="!open">Show Filters</span>
+                <span x-show="open" x-cloak>Hide Filters</span>
             </button>
         </div>
-    </form>
+
+        <!-- Collapsible Content -->
+        <form method="POST" action="{{ url_for('main.filter_dashboard') }}" x-show="open" x-transition.duration.300ms
+            class="mt-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
+                    <input type="date" name="start_date" id="start_date"
+                        class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                </div>
+                <div>
+                    <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
+                    <input type="date" name="end_date" id="end_date"
+                        class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                </div>
+            </div>
+            <div class="mt-4">
+                <button type="submit"
+                    class="w-full md:w-auto bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    Apply Filters
+                </button>
+            </div>
+        </form>
+    </div>
 
     <!-- Readings Table -->
     <div class="bg-white rounded-lg shadow-md overflow-hidden">
-        <table class="w-full bg-white rounded shadow border-collapse">
-            <thead class="bg-gray-200">
-                <tr>
-                    <th class="p-2 text-left">Timestamp</th>
-                    <th class="p-2 text-left">Systolic</th>
-                    <th class="p-2 text-left">Diastolic</th>
-                    <th class="p-2 text-left">Heart Rate</th>
-                    <th class="p-2 text-left">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for reading in readings %}
-                <tr class="border-t hover:bg-gray-100">
-                    <td class="p-2">{{ reading.timestamp }}</td>
-                    <td class="p-2">{{ reading.systolic }}</td>
-                    <td class="p-2">{{ reading.diastolic }}</td>
-                    <td class="p-2">{{ reading.heart_rate }}</td>
-                    <td class="p-2">
-                        <a rel="prefetch" href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
-                            class="text-blue-600 hover:underline">Edit</a>
-                        <form method="POST" action="{{ url_for('main.delete_reading', reading_id=reading.id) }}"
-                            class="inline">
-                            {{ delete_form.hidden_tag() }}
-                            <button type="submit" class="text-red-600 hover:underline ml-2">
-                                Delete
-                            </button>
-                        </form>
-                    </td>
-                </tr>
-                {% else %}
-                <tr>
-                    <td colspan="5" class="p-2 text-center text-gray-500">No readings found.</td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+        <div class="overflow-x-auto">
+            <table class="w-full text-left bg-white border-collapse">
+                <!-- Table Header -->
+                <thead class="bg-gray-50 border-b">
+                    <tr>
+                        <th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Timestamp</th>
+                        <th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Blood Pressure (mmHg)</th>
+                        <th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Heart Rate</th>
+                        <th class="px-6 py-3 text-sm font-semibold text-gray-700 uppercase">Actions</th>
+                    </tr>
+                </thead>
 
+                <!-- Table Body -->
+                <tbody>
+                    {% for reading in readings %}
+                    <tr class="border-b hover:bg-gray-50">
+                        <td class="px-6 py-4 text-sm text-gray-600"> {{ reading.timestamp.strftime('%d %b %Y, %I:%M %p')
+                            }}
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-600">
+                            {{ reading.systolic }}/{{ reading.diastolic }}
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-600">{{ reading.heart_rate }}</td>
+                        <td class="px-6 py-4 text-sm text-gray-600">
+                            <a rel="prefetch" href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
+                                class="text-blue-600 hover:underline">Edit</a>
+                            <form method="POST" action="{{ url_for('main.delete_reading', reading_id=reading.id) }}"
+                                class="inline">
+                                {{ delete_form.hidden_tag() }}
+                                <button type="submit" class="text-red-600 hover:underline ml-2">
+                                    Delete
+                                </button>
+                            </form>
+                        </td>
+                    </tr>
+                    {% else %}
+                    <tr>
+                        <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500">No readings found.</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
+
 </div>
 {% endblock %}
\ No newline at end of file