diff --git a/plants/templates/plants/location_detail.html b/plants/templates/plants/location_detail.html
index aa29e25..d1c8c61 100644
--- a/plants/templates/plants/location_detail.html
+++ b/plants/templates/plants/location_detail.html
@@ -1,2 +1,67 @@
+{# plants/templates/plants/location_detail.html #}
 {% extends "plants/base.html" %}
-{% block content %}{{ location.name }}{% endblock %}
+{% block title %}{{ location.name }} — BloomBase{% endblock %}
+{% block content %}
+
+<!-- Cover photo hero -->
+<div class="relative h-[180px] overflow-hidden">
+  {% if location.cover_photo %}
+  <img src="{{ location.cover_photo.url }}" alt="{{ location.name }}"
+       class="w-full h-full object-cover">
+  {% else %}
+  <div class="w-full h-full at-placeholder-1"></div>
+  {% endif %}
+  <!-- Gradient fade at bottom -->
+  <div class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white to-transparent"></div>
+  <!-- Back button -->
+  <a href="{% url 'location_list' %}" class="btn-pill absolute top-3 left-3 no-underline">← Back</a>
+  <!-- Edit button -->
+  <a href="{% url 'location_edit' location.pk %}" class="btn-pill absolute top-3 right-3 no-underline">Edit</a>
+</div>
+
+<div class="px-4 pt-3 pb-4">
+
+  <!-- Area name + count -->
+  <h1 class="font-nunito font-black text-[22px] text-[#1A1208] mb-0.5">{{ location.name }}</h1>
+  <p class="font-nunito text-sm font-semibold text-[#B0A090] mb-5">
+    {{ plants.count }} plant{{ plants.count|pluralize }}
+  </p>
+
+  <!-- Plant grid -->
+  {% if plants %}
+  <div class="grid grid-cols-2 gap-3">
+    {% for plant in plants %}
+    <a href="{% url 'plant_detail' plant.pk %}" class="bg-white rounded-2xl overflow-hidden shadow-sm no-underline block">
+      <!-- Plant image -->
+      <div class="h-[100px] overflow-hidden">
+        {% if plant.species and plant.species.api_image_url %}
+        <img src="{{ plant.species.api_image_url }}" alt="{{ plant.name }}"
+             class="w-full h-full object-cover">
+        {% elif plant.thumbnail_url %}
+        <img src="{{ plant.thumbnail_url }}" alt="{{ plant.name }}"
+             class="w-full h-full object-cover">
+        {% else %}
+        <div class="w-full h-full bg-[#D8F3DC] flex items-center justify-center text-3xl">🌿</div>
+        {% endif %}
+      </div>
+      <!-- Plant info -->
+      <div class="p-3">
+        <div class="font-nunito font-extrabold text-[12px] text-[#1A1208] leading-tight">{{ plant.name }}</div>
+        {% if plant.species %}
+        <div class="font-nunito text-[9px] font-semibold text-[#B0A090] mt-0.5 italic">{{ plant.species.scientific_name }}</div>
+        {% endif %}
+      </div>
+    </a>
+    {% endfor %}
+  </div>
+  {% else %}
+  <!-- Empty state -->
+  <div class="text-center py-12">
+    <div class="text-5xl mb-3">🪴</div>
+    <p class="font-nunito font-bold text-[#B0A090] mb-4">No plants here yet.</p>
+    <a href="{% url 'identify_upload' %}" class="btn-bloom inline-block w-auto px-8">Identify a plant</a>
+  </div>
+  {% endif %}
+
+</div>
+{% endblock %}