diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js
index 8e2b738..f7df1cb 100644
--- a/front/static/js/viewHistory.js
+++ b/front/static/js/viewHistory.js
@@ -29,22 +29,29 @@ function displayListOfReports(listOfReports) {
     const cardBody = document.querySelector(".card-body");
     const table = document.createElement("table");
     const reports = listOfReports.reports;
-    let rowsInserted = 0;
+    let reportsAdded = 0;
 
+    // Create report table
     for (let i = 0; i < reports.length; i++) {
         let title = reports[i].title;
         let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
         let state = reports[i].state;
         let dateSubmitted;
 
+        // Create edit/view button
         let actionButton = document.createElement("button");
         actionButton.type = "submit";
+        actionButton.setAttribute("data-toggle", "modal");
         actionButton.classList.add("btn");
+
         if (state === "created") {
+            // Edit button
             dateSubmitted = "TBD";
             actionButton.classList.add("btn-primary");
             actionButton.innerHTML = "Edit";
+            actionButton.setAttribute("data-target", "#editReportModal");
         } else {
+            // View button
             dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
             actionButton.classList.add("btn-success");
             actionButton.innerHTML = "View";
@@ -64,16 +71,17 @@ function displayListOfReports(listOfReports) {
         dateSubmittedCell.classList.add("d-none", "d-md-table-cell");
 
         bodyRow.insertCell(4).appendChild(actionButton);
-        rowsInserted++;
+        reportsAdded++;
     }
 
-    if (rowsInserted === 0) {
-        // Empty report list
+    if (reportsAdded === 0) {
+        // Report list is empty
         const p = document.createElement("p");
         p.innerHTML = "No reports found.";
         cardBody.appendChild(p);
     } else {
-        // Create table header, add to table, and append result to the card body
+        // Report list exists and table rows have been created
+        // Create table header, add it to the table, and append the result to the card body
         const thead = document.createElement("thead");
         const tr = document.createElement("tr");
 
@@ -87,12 +95,12 @@ function displayListOfReports(listOfReports) {
 
         const headState = document.createElement("th");
         headState.innerHTML = "State";
-        headState.classList.add("d-none", "d-lg-table-cell");
+        headState.classList.add("d-none", "d-lg-table-cell"); // Column shown only on large displays
         tr.appendChild(headState);
 
         const headDateSubmitted = document.createElement("th")
         headDateSubmitted.innerHTML = "Date Submitted";
-        headDateSubmitted.classList.add("d-none", "d-md-table-cell");
+        headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column only shown on medium and larger displays
         tr.appendChild(headDateSubmitted);
 
         const headAction = document.createElement("th")
diff --git a/front/static/view_history.html b/front/static/view_history.html
index 62fe36e..99a2da2 100644
--- a/front/static/view_history.html
+++ b/front/static/view_history.html
@@ -52,6 +52,36 @@
             </div>
         </div>
     </div>
+
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open modal for @mdo</button>
+
+    <div class="modal" id="editReportModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Edit Report</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="form-group">
+                            <label for="recipient-name" class="col-form-label">Recipient:</label>
+                            <input type="text" class="form-control" id="recipient-name">
+                        </div>
+                        <div class="form-group">
+                            <label for="message-text" class="col-form-label">Message:</label>
+                            <textarea class="form-control" id="message-text"></textarea>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Send message</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="js/logout.js"></script>
     <script src="js/viewHistory.js"></script>
 </body>