diff --git a/front/static/edit_report.html b/front/static/edit_report.html
index 474746f..50af1af 100644
--- a/front/static/edit_report.html
+++ b/front/static/edit_report.html
@@ -81,6 +81,20 @@
             </div>
         </div>
     </div>
+    <div class="modal" id="viewReportModal" 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="viewReportModalLabel"></h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-view">
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="js/logout.js"></script>
     <script src="js/viewHistory.js"></script>
 </body>
diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js
index 4b2899b..6eae3cf 100644
--- a/front/static/js/viewHistory.js
+++ b/front/static/js/viewHistory.js
@@ -252,8 +252,10 @@ function displayListOfReports(parsedData) {
             } else {
                 // View button
                 dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
-                actionButton.classList.add("btn-success");
+                actionButton.classList.add("btn-success", "view-report-button");
                 actionButton.innerHTML = "View";
+                actionButton.setAttribute("data-toggle", "modal");
+                actionButton.setAttribute("data-target", "#viewReportModal");
             }
 
             let dateSubmittedCell = bodyRow.insertCell(3);
@@ -266,6 +268,63 @@ function displayListOfReports(parsedData) {
     }
 }
 
+function displayReport(parsedData){
+    //Able to get the correct report ID now just needs to display the
+    //report as an modual
+    const modalBody = document.querySelector(".modal-view");
+    const modalLabel = document.querySelector("#viewReportModalLabel");
+
+    while (modalBody.firstChild) {
+        modalBody.removeChild(modalBody.firstChild);
+    }
+
+    // Add report title and date
+    const reportTitle = parsedData.title;
+    const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
+    modalLabel.innerHTML = reportTitle + " " + dateCreated;
+
+    const card = document.createElement("div");
+    card.classList.add("card");
+
+    const cardHeader = document.createElement("div");
+    cardHeader.classList.add("card-header");
+
+    const cardBody = document.createElement("div");
+    cardBody.classList.add("card-body");
+
+    /*
+    const displayTable = document.createElement("table");
+    displayTable.classList.add("table table-striped table-responsive-sm");
+    displayTable.style.visibility = "visible";
+    cardBody.appendChild(displayTable);
+*/
+
+
+    const sections = parsedData.sections;
+    for (let key in sections) {
+        let section = sections[key];
+        if(section.completed) {
+            const h4 = document.createElement("h4");
+            const value = document.createTextNode(section.title);
+
+            h4.appendChild(value);
+            cardBody.appendChild(h4);
+            let fields = section.fields;
+            for (let key in fields) {
+                let field = fields[key];
+                const p1 = document.createElement("p");
+                const p1Value = document.createTextNode(field.label + ": " + field.value);
+                p1.appendChild(p1Value);
+                cardBody.appendChild(p1);
+            }
+            cardHeader.appendChild(cardBody);
+            card.appendChild(cardHeader);
+        }
+    }
+
+    modalBody.appendChild(card);
+}
+
 document.addEventListener("DOMContentLoaded", function(event) {
     const url = getEndpointDomain() + "api/v1/reports";
     getDataFromEndpoint(url, displayListOfReports);
@@ -277,6 +336,11 @@ document.addEventListener("click", function(event) {
         const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
         getDataFromEndpoint(url, createEditReportForm);
     }
-
-    // TODO: Add view report
+    if(event.target && event.target.classList.contains("view-report-button"))
+    {
+        console.log("View button clicked");
+        const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
+        getDataFromEndpoint(url, displayReport);
+    }
+    // TODO: Add View Report
 });
diff --git a/front/static/new_report.html b/front/static/new_report.html
index 5d8dd49..30a91f7 100644
--- a/front/static/new_report.html
+++ b/front/static/new_report.html
@@ -36,8 +36,21 @@
         </div>
     </nav>
     <div class="container pt-3">
-        <p>Create a new report</p>
-    </div>
-    <script src="js/logout.js"></script>
+        <div class="row">
+            <div class="col-sm-6 mx-auto">
+                <div class="card bg-light text-dark">
+                    <div class="card-header">
+                        <h3>Create a new report</h3>
+                        <div class="form-group">
+                            <label for="title">Report title:</label>
+                            <input type="text" class="form-control" id="title">
+                        </div>
+                        <button type="button" class="btn btn-primary" herf="#Create">Create</button>
+                   </div>
+               </div>
+           </div>
+       </div>
+   </div>
+   <script src="js/logout.js"></script>
 </body>
 </html>