diff --git a/plants/templates/plants/locations.html b/plants/templates/plants/locations.html
index 8ccfbc2..2ad64a2 100644
--- a/plants/templates/plants/locations.html
+++ b/plants/templates/plants/locations.html
@@ -1,36 +1,72 @@
+{# plants/templates/plants/locations.html #}
 {% extends "plants/base.html" %}
-{% block title %}Areas — BloomBase{% endblock %}
+{% block title %}My Garden — BloomBase{% endblock %}
 {% block content %}
+{% load static %}
 
-<div class="d-flex align-items-center gap-2 mb-3">
-    <a href="{% url 'plant_list' %}" class="btn btn-sm btn-outline-secondary">←</a>
-    <h5 class="mb-0 flex-grow-1">Areas</h5>
-</div>
+<div class="px-4 pt-8 pb-4">
 
-<div class="list-group mb-3">
-{% for loc in locations %}
-<div class="list-group-item d-flex justify-content-between align-items-center py-2">
-    <span>{{ loc.name }} <small class="text-muted">{{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}</small></span>
-    <div class="d-flex gap-1">
-        <a href="{% url 'location_edit' loc.pk %}" class="btn btn-sm btn-outline-secondary py-0 px-2">✏️</a>
-        <form method="post" action="{% url 'location_delete' loc.pk %}"
-              onsubmit="return {% if loc.plant_count %}confirm('{{ loc.name|escapejs }} has {{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}. Their area will be cleared. Delete anyway?'){% else %}true{% endif %}">
-            {% csrf_token %}
-            <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-2">✕</button>
-        </form>
-    </div>
-</div>
-{% empty %}
-<div class="list-group-item text-muted">No areas yet.</div>
-{% endfor %}
-</div>
+  <!-- Header row -->
+  <div class="flex justify-between items-center mb-4">
+    <h1 class="font-nunito font-black text-[22px] text-[#1A1208]">My Garden</h1>
+    <a href="#" class="font-nunito font-bold text-sm text-[#F07040]">Edit</a>
+  </div>
 
-<form method="post">
+  <!-- Search bar -->
+  <div class="flex items-center gap-2 bg-[#F5F0EA] rounded-full px-4 py-2.5 mb-4">
+    <svg width="16" height="16" fill="none" stroke="#B0A090" stroke-width="2" viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+    </svg>
+    <span class="font-nunito text-sm font-semibold text-[#C0B0A0]">Search plants or areas</span>
+  </div>
+
+  <!-- Area rows -->
+  <div class="flex flex-col gap-3 mb-6">
+    {% for loc in locations %}
+    {% with idx=forloop.counter0 %}
+    <a href="{% url 'location_detail' loc.pk %}"
+       class="flex items-center bg-white rounded-2xl overflow-hidden shadow-sm no-underline">
+      <!-- Thumbnail -->
+      <div class="w-[72px] h-[60px] flex-shrink-0 overflow-hidden">
+        {% if loc.cover_photo %}
+        <img src="{{ loc.cover_photo.url }}" alt="{{ loc.name }}"
+             class="w-full h-full object-cover">
+        {% else %}
+        <div class="w-full h-full
+          {% if idx|divisibleby:5 %}at-placeholder-5
+          {% elif idx|divisibleby:4 %}at-placeholder-4
+          {% elif idx|divisibleby:3 %}at-placeholder-3
+          {% elif idx|divisibleby:2 %}at-placeholder-2
+          {% else %}at-placeholder-1{% endif %}"></div>
+        {% endif %}
+      </div>
+      <!-- Info -->
+      <div class="flex-1 px-3">
+        <div class="font-nunito font-extrabold text-[13px] text-[#1A1208]">{{ loc.name }}</div>
+        <div class="font-nunito text-[10px] font-semibold text-[#B0A090] mt-0.5">
+          {{ loc.plant_count }} plant{{ loc.plant_count|pluralize }}
+        </div>
+      </div>
+      <!-- Chevron -->
+      <span class="text-[#D0C0B0] font-bold text-lg pr-3">›</span>
+    </a>
+    {% endwith %}
+    {% empty %}
+    <p class="font-nunito text-sm text-[#B0A090] text-center py-8">
+      No areas yet — add one below!
+    </p>
+    {% endfor %}
+  </div>
+
+  <!-- Add area form -->
+  <form method="post" class="flex gap-2">
     {% csrf_token %}
-    <div class="d-flex gap-2">
-        <input type="text" name="name" class="form-control form-control-sm" placeholder="New area name" required>
-        <button type="submit" class="btn btn-sm btn-success text-nowrap">+ Add</button>
-    </div>
-</form>
+    <input type="text" name="name" placeholder="New area name…" required
+           class="flex-1 bg-white border border-[#F0E4D4] rounded-full px-4 py-2.5
+                  font-nunito text-sm text-[#1A1208] placeholder-[#C0B0A0]
+                  outline-none focus:border-[#F07040]">
+    <button type="submit" class="bb-fab text-xl font-light flex-shrink-0">+</button>
+  </form>
 
+</div>
 {% endblock %}