diff --git a/app/views/habits/index.php b/app/views/habits/index.php
index 314fdc8..b050b5b 100644
--- a/app/views/habits/index.php
+++ b/app/views/habits/index.php
@@ -3,33 +3,22 @@
     <?php if (empty($this->get('habits'))): ?>
         <p>No habits yet. <a href="/habits/create">Create your first habit</a>.</p>
     <?php else: ?>
-        <table>
-            <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Frequency</th>
-                    <th>Custom Schedule</th>
-                    <th>Points</th>
-                    <th>Created At</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                <?php foreach ($this->get('habits') as $habit): ?>
-                    <tr>
-                        <td><?= htmlspecialchars($habit['title']) ?></td>
-                        <td><?= htmlspecialchars($habit['frequency']) ?></td>
-                        <td><?= htmlspecialchars($habit['custom_frequency'] ?? 'N/A') ?></td>
-                        <td><?= htmlspecialchars($habit['reward_points']) ?></td>
-                        <td><?= htmlspecialchars($habit['created_at']) ?></td>
-                        <td>
-                            <a href="/habits/edit?id=<?= $habit['id'] ?>">Edit</a> |
-                            <a href="/habits/delete?id=<?= $habit['id'] ?>" onclick="return confirm('Are you sure you want to delete this habit?')">Delete</a>
-                        </td>
-                    </tr>
-                <?php endforeach; ?>
-            </tbody>
-        </table>
-        <a href="/habits/create">Create new habit!</a>
+        <div class="habits-wrapper">
+        <?php foreach ($this->get('habits') as $habit): ?>
+            <div class="habit bordered">
+                <b><?= htmlspecialchars($habit['title']) ?></b>
+                <p>Frequency: <?= htmlspecialchars($habit['frequency']) ?></p>
+                <?php if (isset($habit['custom_frequency'])): ?>
+                    <p><?= htmlspecialchars($habit['custom_frequency'] ?? 'N/A') ?></p>
+                <?php endif; ?>
+                    <p><?= htmlspecialchars($habit['reward_points']) ?></p>
+                    <p><?= htmlspecialchars($habit['created_at']) ?></p>
+                    <a href="/habits/done">Mark as done</a> |
+                    <a href="/habits/edit?id=<?= $habit['id'] ?>">Edit</a> |
+                    <a href="/habits/delete?id=<?= $habit['id'] ?>" onclick="return confirm('Are you sure you want to delete this habit?')">Delete</a>
+            </div>
+        <?php endforeach; ?>
+        </div>
+        <a href="/habits/create" class="btn-green">Create new habit!</a>
     <?php endif; ?>
 </section>
diff --git a/public/css/habits_dashboard.css b/public/css/habits_dashboard.css
index c035cc9..9ee54e9 100644
--- a/public/css/habits_dashboard.css
+++ b/public/css/habits_dashboard.css
@@ -1,26 +1,15 @@
-.habits h1 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+.habits-wrapper {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
-.habits table {
-  width: 100%;
-  border-collapse: collapse;
+.habits .bordered {
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+  width: 17rem;
+  padding: 1rem;
   margin-top: 1rem;
-}
-
-.habits table th,
-.habits table td {
-  border: 1px solid #ccc;
-  padding: 8px;
-  text-align: left;
-}
-
-.habits a {
-  color: #007bff;
-  text-decoration: none;
-}
-
-.habits a:hover {
-  text-decoration: underline;
+  text-align: center;
 }