diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index ca2b8c1..fd51918 100644
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -15,10 +15,16 @@ window.addEventListener("load", (event)=>{
     if (editBtn) {
         editBtn.addEventListener('click', (event) => {
             event.preventDefault();
+
+            document.querySelector('.delete-btn').style.visibility = "hidden";
+            document.querySelector('.edit-btn').style.visibility = "hidden";
+
             const id = event.target.id
             let area = document.querySelector(`#text-${id}`);
-            area.parentElement.innerHTML = `<textarea id="review-text">${area.innerText}</textarea> <button id="save-btn">Save</button>`;
+            area.parentElement.innerHTML = `<textarea id="review-text">${area.innerText}</textarea> <br> <button id="save-btn">Save</button>`;
+
             let body;
+
             const saveBtn = document.querySelector('#save-btn');
             console.log(saveBtn);
             if (saveBtn) {
@@ -30,9 +36,10 @@ window.addEventListener("load", (event)=>{
                     });
                     const update = await review.json();
                     window.location.href = `/trail/${update.trailId}`
+
                 });
             }
-            const updateValue = async (event) => {
+            const updateValue= async (event) => {
                 body = event.target.value;
                 console.log(body);
             }
diff --git a/public/stylesheets/details.css b/public/stylesheets/details.css
index c909b48..84ac5e6 100644
--- a/public/stylesheets/details.css
+++ b/public/stylesheets/details.css
@@ -118,7 +118,7 @@ img {
     text-align: center;
     font-size: 30px;
     font-weight: 700;
-    padding: 15px;
+    padding: 30px;
 }
 
 .details {
@@ -142,6 +142,11 @@ img {
     width: fit-content;
 }
 
+.delete-btn {
+    background-color: rgb(83, 83, 83);
+    visibility: visible;
+}
+
 .btn-container {
     display: flex;
     justify-content: center;
@@ -188,7 +193,46 @@ textarea {
     padding: 5px;
 }
 
-button.submit-btn {
+.submit-btn {
     display: block;
     margin: auto;
+    border-radius: 10px;
+    color: white;
+    background-color: brown;
+    border: solid 1px white;
+    font-size: 15px;
+    padding: 5px;
+    width: fit-content;
+}
+
+.review-date {
+    font-size: 10px;
+}
+
+.review-username {
+    font-size: 15px;
+}
+
+.review-text {
+    font-style: italic;
+    font-weight: 700;
+}
+
+#review-text {
+    margin: 10px;
+}
+
+#save-btn {
+    margin: 5px;
+    border-radius: 6px;
+    color: white;
+    background-color: lightskyblue;
+    border: solid 1px white;
+    font-size: 15px;
+    padding: 5px;
+    width: fit-content;
+}
+
+.edit-btn {
+    visibility: visible;
 }
diff --git a/views/trail-detail.pug b/views/trail-detail.pug
index 66232c2..15368ee 100644
--- a/views/trail-detail.pug
+++ b/views/trail-detail.pug
@@ -36,13 +36,13 @@ block content
       form(action=`/trail/${trail.id}` method="post" class="")
         textarea(name="text" placeholder="Write a review!" class="review-input")
         br
-        button(type="submit" class="submit-btn hi") Submit
+        button(type="submit" class="submit-btn") Submit
     div(class="list-reviews")
       each review in reviews
         div(class="review")
-          p(class="review-username")= `User: ${review.User.username}`
           div
             p(id=`text-${review.id}` class="review-text")= `${review.text}`
+          p(class="review-username")= `User: ${review.User.username}`
           p(class="review-date")= `Reviewed at: ${review.createdAt}`
           if (review.User.id === user.id)
             button(type="submit" id=`${review.id}` class="edit-btn hi") Edit Review