diff --git a/apps/home/static/home/js/venues.js b/apps/home/static/home/js/venues.js
index add164c..2ca4815 100644
--- a/apps/home/static/home/js/venues.js
+++ b/apps/home/static/home/js/venues.js
@@ -1,7 +1,19 @@
+var venueTypes;
+
 $(document).ready(async () => {
+    await loadVenueTypes();
     await loadVenues();
 });
 
+const loadVenueTypes = async () => {
+    const response = await $.ajax({
+        url: "/api/venues",
+        method: "OPTIONS"
+    });
+
+    venueTypes = response?.actions?.POST?.type?.choices || [];
+}
+
 const loadVenues = async () => {
     const response = await $.ajax({
         url: "/api/venues/",
@@ -10,19 +22,64 @@ const loadVenues = async () => {
 
     for (const venue of response?.results || []) {
         addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
+        addVenue(venue);
     }
 }
 
 const addVenue = venue => {
-    let $template = $($("#venueItemTemplate").html());
+    let $venue = $($("#venueItemTemplate").html());
 
-    $template.find(".venue-item").data("id", venue.id);
-    $template.find(".venue-name").text(venue.name);
-    $template.find(".venue-description").text(venue.description);
+    const type = venueTypes.find(type => type.value === venue.type);
 
-    $template.off("click").on("click", async () => await selectVenue(venue.id));
+    $venue.find(".venue-type").text(type.display_name);
+    $venue.find(".venue-item").data("id", venue.id);
+    $venue.find(".venue-name").text(venue.name);
+    $venue.find(".venue-description").text(venue.description);
 
-    $("#venueContainer").append($template);
+    const phoneNumber = venue.contacts?.phone_number;
+    addVenueTemplateContact(
+        $venue,
+        phoneNumber,
+        `tel:${phoneNumber}`,
+        "bi-telephone"
+    );
+
+    const emailAddress = venue.contacts?.email_address;
+    addVenueTemplateContact(
+        $venue,
+        emailAddress,
+        `mailto:${emailAddress}`,
+        "bi-envelope"
+    );
+
+    $venue.off("click").on("click", async () => await selectVenue(venue.id));
+
+    $("#venueContainer").append($venue);
+}
+
+const addVenueTemplateContact = ($venue, value, url, iconClass) => {
+    if (!value) {
+        return;
+    }
+
+    let $contact = $($("#venueContactTemplate").html())
+
+    $contact.find(".venue-contact-url").attr("href", url);
+    $contact.find(".venue-contact-icon")
+        .addClass(iconClass)
+        .attr("data-bs-title", value)
+        .attr("data-bs-toggle", "tooltip")
+        .tooltip();
+
+    $venue.find(".venue-contacts").append($contact);
 }
 
 const selectVenue = async id => {
diff --git a/apps/home/static/home/scss/venues.scss b/apps/home/static/home/scss/venues.scss
index f245ae8..f880100 100644
--- a/apps/home/static/home/scss/venues.scss
+++ b/apps/home/static/home/scss/venues.scss
@@ -1,22 +1,107 @@
 @import "scss/base.scss";
 
+.search-group {
+
+    max-width: 400px;
+
+    .form-control {
+
+        border-left: none !important;
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+
+        &:focus, &:focus-within {
+
+            box-shadow: none;
+            border: var(--bs-border-width) solid var(--bs-border-color);
+
+        }
+
+    }
+
+    .input-group-text {
+
+        background-color: transparent;
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+        padding-right: 0.25rem;
+        cursor: text;
+
+    }
+
+}
+
 .venue-item {
 
     color: var(--bs-body-color);
     padding: 1rem;
     border: 1px solid var(--bs-border-color);
     border-radius: 0.25rem;
+    min-width: 0;
+
+    .venue-type {
+
+        color: var(--bs-tertiary-color);
+        margin-bottom: 0.25rem;
+        @extend small;
+        @extend .text-truncate;
+
+    }
 
     .venue-name {
 
         font-weight: bold;
         margin-bottom: 1rem;
+        color: var(--bs-body-color);
 
+        // Single line with ellipsis
+        max-width: 100%;
+        overflow: hidden;
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
     }
 
     .venue-description {
 
         color: var(--bs-secondary-color);
+        margin-bottom: 1rem;
+
+        // 3 lines with fadeout
+        position: relative;
+        max-height: 1.5rem * 3;
+        overflow: hidden;
+
+        &::after {
+
+            content: "";
+            text-align: right;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 50%;
+            height: 1.5rem;
+            background: linear-gradient(to right, rgba(var(--bs-body-bg-rgb), 0), rgba(var(--bs-body-bg-rgb), 1) 50%);
+
+        }
+
+    }
+
+    .venue-contacts {
+
+        display: flex;
+        flex-direction: row;
+        list-style: none;
+        margin-bottom: 0;
+        padding-left: 0;
+
+        .venue-contact {
+
+            margin-right: 0.75rem;
+
+            .venue-contact-url { color: var(--bs-body-color); }
+            .venue-contact-icon { @extend .bi; }
+
+        }
 
     }
 
diff --git a/apps/home/templates/home/venues.html b/apps/home/templates/home/venues.html
index 95631ec..01bec57 100644
--- a/apps/home/templates/home/venues.html
+++ b/apps/home/templates/home/venues.html
@@ -11,19 +11,43 @@
 {% endblock stylesheets %}
 
 {% block content %}
-<div class="container-lg">
-    <div id="venueContainer" class="row g-5 venue-items mt-5"></div>
+<div class="container-xxl">
+    <div class="row mt-4">
+        <div class="col-md-6">
+            <div class="input-group search-group mb-4 mb-md-0">
+                <label for="venueSearch" class="input-group-text">
+                    <i class="bi bi-search"></i>
+                </label>
+                <input type="search" id="venueSearch" name="venueSearch" class="form-control" placeholder="Search...">
+            </div>
+        </div>
+        <div class="col-md-6 text-md-end">
+            <button type="button" class="btn btn-primary rounded-1">
+                Create a Venue
+            </button>
+        </div>
+    </div>
+    <div id="venueContainer" class="row gy-0 venue-items"></div>
 </div>
 {% endblock content %}
 
 {% block scripts %}
 <script id="venueItemTemplate" type="text/template">
-    <div class="col-4">
+    <div class="col-md-6 col-lg-4 col-xxl-3 mt-4">
         <div class="venue-item" role="button">
+            <div class="venue-type"></div>
             <div class="venue-name"></div>
             <div class="venue-description"></div>
+            <ul class="venue-contacts"></ul>
         </div>
     </div>
 </script>
+<script id="venueContactTemplate" type="text/template">
+    <li class="venue-contact">
+        <a href="" class="venue-contact-url">
+            <i class="venue-contact-icon"></i>
+        </a>
+    </li>
+</script>
 <script src="{% static 'home/js/venues.js' %}"></script>
 {% endblock scripts %}
\ No newline at end of file