diff --git a/src/components/Locations.svelte b/src/components/Locations.svelte
new file mode 100644
index 0000000..5b973db
--- /dev/null
+++ b/src/components/Locations.svelte
@@ -0,0 +1,28 @@
+<script>
+    import { locations } from '../store'
+</script>
+
+<div class="columns">
+    {#each $locations as location}
+    <div class="column is-one-third">
+        <div class="card">
+            <div class="card-content">
+                <a class="media" href="/location/{location.country.slug}/{location.slug}">
+                    <figure class="media-left">
+                        <span class="icon is-medium has-text-danger">
+                            <i class="fas fa-map-marker-alt fa-lg"></i>
+                        </span>
+                    </figure>
+                    <div class="media-content">
+                        <span class="title is-5">{location.name}</span><br>
+                        {location.region}, {location.country.name}<br>
+                        <!-- {#if (location.photos.length > 0)}
+                        {location.photos.length} {(location.photos.length > 1) ? 'photos' : 'photo'}
+                        {/if} -->
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+    {/each}
+</div>