diff --git a/src/mainapp/templates/venues.html b/src/mainapp/templates/venues.html
index 8d02516..e357063 100644
--- a/src/mainapp/templates/venues.html
+++ b/src/mainapp/templates/venues.html
@@ -9,10 +9,6 @@
 {% endblock style %}
 
 {% block header_buttons %}
-    <!-- <a href="/" class="btn btn-company d-flex align-items-center">
-        <i class="bi bi-plus-lg"></i>
-        <span class="ms-2">Add Venue and Waters</span>
-    </a> -->
 {% endblock header_buttons %}
 
 {% block content %}
@@ -31,7 +27,7 @@
         </div>
         <div class="col-xl-3 col-md-4">
             <div class="input-group d-flex justify-content-md-end">
-                <button class="btn border-secondary-subtle btn-outline-company" id="addVenue" data-bs-toggle="modal" data-bs-target="#venueModal" data-bs-toggle="tooltip" data-bs-title="Add Venue" data-bs-custom-class="light-tooltip">
+                <button class="btn border-secondary-subtle btn-outline-company" id="addVenue" onclick="openVenueModal(-1);" data-bs-toggle="tooltip" data-bs-title="Add Venue" data-bs-custom-class="light-tooltip">
                     <i class="bi bi-plus-lg"></i>
                 </button>
                 <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="importVenue" data-bs-toggle="tooltip" data-bs-title="Import Venue" data-bs-custom-class="light-tooltip">
@@ -58,10 +54,7 @@
     <div class="m-4 mt-0 row">
         {% for venue in venues %}
             <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
-                <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover overflow-hidden">
-                    <div class="card-badge-container">
-                        <div class="card-badge"></div>
-                    </div>
+                <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover overflow-hidden flex-row">
                     <div class="card-body d-flex">
                         <div class="d-flex flex-column">
                             <h5 class="card-title text-company mb-0">{{ venue.name }}</h5>
@@ -79,6 +72,19 @@
                             </div>
                         </div>
                     </div>
+                    <div class="d-flex flex-column">
+                        <div class="card-badge-container">
+                            <div class="card-badge"></div>
+                        </div>
+                        <div class="btn-group btn-group-vertical m-3 mt-auto">
+                            <a class="btn btn-outline-company rounded-top-4" href="{{ venue.id }}">
+                                <i class="bi bi-eye-fill"></i>
+                            </a>
+                            <button class="btn btn-outline-secondary rounded-bottom-4 ms-0" onclick="openVenueModal({{ venue.id }});">
+                                <i class="bi bi-pencil-fill"></i>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         {% endfor %}
@@ -93,8 +99,11 @@
                     <div class="card-badge"></div>
                 </div>
                 <div class="p-4">
-                    <h4 class="card-title text-company fw-bold mb-4">New Venue</h4>
-                    <ul id="newVenueTabBtns" class="nav nav-pills mb-4 border" role="tablist">
+                    <h4 class="card-title text-company fw-bold mb-4">
+                        <span class="create" style="display: none">New Venue</span>
+                        <span class="edit" style="display: none">Edit Venue</span>
+                    </h4>
+                    <ul id="newVenueTabBtns" class="nav nav-pills mb-4 border d-flex" role="tablist">
                         <li class="nav-item" role="presentation">
                             <button id="newVenueDetailsTabBtn" class="nav-link active" data-bs-toggle="pill" data-bs-target="#newVenueDetailsTab" type="button" role="tab" aria-controls="newVenueDetailsTab" aria-selected="true">Details</button>
                         </li>
@@ -121,15 +130,15 @@
                                 <div class="col-6">
                                     <label for="venueType" class="form-label">Type</label>
                                     <select name="venueType" id="venueType" class="form-select">
-                                        <option value="0">Fishery</option>
-                                        <option value="1">Club</option>
-                                        <option value="2">Private</option>
+                                        {% for type in venue_types %}
+                                            <option value="{{ type.0 }}">{{ type.1 }}</option>
+                                        {% endfor %}
                                     </select>
                                 </div>
                             </div>
                             <div>
                                 <label for="venueDescription" class="form-label">Description</label>
-                                <textarea name="venueDescription" id="venueDescription" type="text" class="form-control" rows="3" placeholder="A brief description of the Venues and Waters ..."></textarea>
+                                <textarea name="venueDescription" id="venueDescription" type="text" class="form-control" rows="3" placeholder="A brief description of the Venues and Waters ..." style="max-height: 150px"></textarea>
                             </div>
                         </div>
                         <div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
@@ -171,21 +180,30 @@
                         <div id="newVenueSocialsTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueSocialsTabBtn" tabindex="0">
                             <div class="row g-4 align-items-center">
                                 <div class="col-12">
-                                    <label for="venueTwitter" class="form-label">Twitter Link</label>
-                                    <input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="https://anglingtrust.net/">
+                                    <label for="venueTwitter" class="form-label d-flex align-items-center">
+                                        <i class="bi bi-twitter me-2" style="color: #1DA1F2"></i>
+                                        Twitter Link
+                                    </label>
+                                    <input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="https://twitter.com/anglingtrust">
                                 </div>
                                 <div class="col-12">
-                                    <label for="venueFacebook" class="form-label">Facebook Link</label>
-                                    <input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="https://anglingtrust.net/">
+                                    <label for="venueFacebook" class="form-label d-flex align-items-center">
+                                        <i class="bi bi-facebook me-2" style="color: #4267B2"></i>
+                                        Facebook Link
+                                    </label>
+                                    <input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="https://www.facebook.com/AnglingTrust">
                                 </div>
                                 <div class="col-12">
-                                    <label for="venueInstagram" class="form-label">Instagram Link</label>
-                                    <input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="https://anglingtrust.net/">
+                                    <label for="venueInstagram" class="form-label d-flex align-items-center">
+                                        <i class="bi bi-instagram me-2" style="color: #D62976;"></i>
+                                        Instagram Link
+                                    </label>
+                                    <input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="https://www.instagram.com/angling_trust">
                                 </div>
                             </div>
                         </div>
                         <div id="newVenueWatersTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueWatersTabBtn" tabindex="0">
-                            <div class="p-3 pt-0 d-flex justify-content-between align-items-center border-bottom">
+                            <div class="pb-4 px-3 pt-0 d-flex justify-content-between align-items-center border-bottom">
                                 <button class="btn btn-outline-secondary rounded-4 d-flex align-items-center">
                                     <i class="bi bi-info-lg"></i>
                                 </button>
@@ -201,8 +219,73 @@
                                         <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                     </div>
                                     <div class="d-flex flex-column align-self-stretch">
-                                        <span class="badge company-bg rounded-pill mb-auto">1 · 36</span>
-                                        <button class="btn btn-outline-secondary small rounded-4">
+                                        <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                        <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                            <i class="bi bi-pencil-fill"></i>
+                                        </button>
+                                    </div>
+                                </li>
+                                <li class="list-group-item d-flex justify-content-between align-items-start">
+                                    <div class="ms-2 me-auto">
+                                        <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                        <p class="mb-0">Commercial Water</p>
+                                        <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                    </div>
+                                    <div class="d-flex flex-column align-self-stretch">
+                                        <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                        <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                            <i class="bi bi-pencil-fill"></i>
+                                        </button>
+                                    </div>
+                                </li>
+                                <li class="list-group-item d-flex justify-content-between align-items-start">
+                                    <div class="ms-2 me-auto">
+                                        <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                        <p class="mb-0">Commercial Water</p>
+                                        <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                    </div>
+                                    <div class="d-flex flex-column align-self-stretch">
+                                        <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                        <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                            <i class="bi bi-pencil-fill"></i>
+                                        </button>
+                                    </div>
+                                </li>
+                                <li class="list-group-item d-flex justify-content-between align-items-start">
+                                    <div class="ms-2 me-auto">
+                                        <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                        <p class="mb-0">Commercial Water</p>
+                                        <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                    </div>
+                                    <div class="d-flex flex-column align-self-stretch">
+                                        <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                        <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                            <i class="bi bi-pencil-fill"></i>
+                                        </button>
+                                    </div>
+                                </li>
+                                <li class="list-group-item d-flex justify-content-between align-items-start">
+                                    <div class="ms-2 me-auto">
+                                        <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                        <p class="mb-0">Commercial Water</p>
+                                        <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                    </div>
+                                    <div class="d-flex flex-column align-self-stretch">
+                                        <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                        <button class="btn btn-outline-secondary small rounded-4 mt-auto">
+                                            <i class="bi bi-pencil-fill"></i>
+                                        </button>
+                                    </div>
+                                </li>
+                                <li class="list-group-item d-flex justify-content-between align-items-start">
+                                    <div class="ms-2 me-auto">
+                                        <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
+                                        <p class="mb-0">Commercial Water</p>
+                                        <p class="mb-0 text-body-secondary">Specimen Carp</p>
+                                    </div>
+                                    <div class="d-flex flex-column align-self-stretch">
+                                        <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
+                                        <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                             <i class="bi bi-pencil-fill"></i>
                                         </button>
                                     </div>
@@ -214,7 +297,10 @@
             </div>
             <div class="modal-footer border-top-0 p-4 pt-2">
                 <button class="btn btn-secondary px-4 me-3 btn-facing-left" data-bs-dismiss="modal">Cancel</button>
-                <button class="btn btn-company btn-facing-right">Save New</button>
+                <button class="btn btn-company btn-facing-right">
+                    <span class="edit" style="display: none;">Save Edit</span>
+                    <span class="create" style="display: none;">Save New</span>
+                </button>
             </div>
         </div>
     </div>
@@ -223,4 +309,5 @@
 {% endblock content %}
 
 {% block scripts %}
+<script src="{% static 'js/mainapp/venues.js' %}"></script>
 {% endblock scripts %}
diff --git a/src/static/js/mainapp/venues.js b/src/static/js/mainapp/venues.js
index 883c45d..d0e11b2 100644
--- a/src/static/js/mainapp/venues.js
+++ b/src/static/js/mainapp/venues.js
@@ -1,13 +1,72 @@
-function getWaters(venueID) {
-    $.ajax({
-        url: `/venues/get-waters/${venueID}`,
-        type: "GET",
-        "dataType": "json",
-        success: function (data) {
-            alert(JSON.stringify(data));
-        },
-        error: function (error) {
-            alert("error: " + error);
-        }
-    });
+// function getWaters(venueID) {
+//     $.ajax({
+//         url: `/venues/get-waters/${venueID}`,
+//         type: "GET",
+//         "dataType": "json",
+//         success: function (data) {
+//             alert(JSON.stringify(data));
+//         },
+//         error: function (error) {
+//             alert("error: " + error);
+//         }
+//     });
+// }
+
+function openVenueModal(venue_id) {
+    if (venue_id == -1) {
+        $("#venueModal .edit").hide();
+        $("#venueModal .create").show();
+
+        $("#venueName").val("");
+        $("#venueDescription").val("");
+        $("#venueType").val("FISHERY").change();
+
+        $("#venueStreetAddress").val("");
+        $("#venueCity").val("");
+        $("#venueProvence").val("");
+        $("#venuePostCode").val("")
+
+        $("#venuePhone").val("");
+        $("#venueEmail").val("");
+        $("#venueWebsite").val("");
+
+        $("#venueTwitter").val("");
+        $("#venueFacebook").val("");
+        $("#venueInstagram").val("");
+    }
+    else {
+        $("#venueModal .edit").show();
+        $("#venueModal .create").hide();
+
+        $.ajax({
+            url: `/venues/api/${venue_id}`,
+            method: 'get',
+            dataType: 'json',
+            success: function(response) {
+                const venue = response.data;
+
+                $("#venueName").val(venue.name);
+                $("#venueDescription").val(venue.description);
+                $("#venueType").val(venue.venue_type).change();
+
+                $("#venueStreetAddress").val(venue.street_address);
+                $("#venueCity").val(venue.city);
+                $("#venueProvence").val(venue.provence);
+                $("#venuePostCode").val(venue.postal_code)
+
+                $("#venuePhone").val(venue.phone_number);
+                $("#venueEmail").val(venue.email_address);
+                $("#venueWebsite").val(venue.website_url);
+
+                $("#venueTwitter").val(venue.twitter_url);
+                $("#venueFacebook").val(venue.facebook_url);
+                $("#venueInstagram").val(venue.instagram);
+            },
+            error: function(error) {
+                alert("error: " + JSON.stringify(error));
+            }
+        });
+    }
+
+    new bootstrap.Modal("#venueModal").show();
 }
\ No newline at end of file
diff --git a/src/static/scss/base.scss b/src/static/scss/base.scss
index 8ec0ec8..98300b3 100644
--- a/src/static/scss/base.scss
+++ b/src/static/scss/base.scss
@@ -155,4 +155,8 @@
     border-bottom-left-radius: 0.8rem !important;
     border-top-right-radius: 1.2rem !important;
     border-bottom-right-radius: 1.2rem !important;
+}
+
+#venueModal .modal-content {
+    min-height: 550px;
 }
\ No newline at end of file