diff --git a/fe/src/components/PropertyAdd.js b/fe/src/components/PropertyAdd.js
index 47aa5f3..123ff2b 100644
--- a/fe/src/components/PropertyAdd.js
+++ b/fe/src/components/PropertyAdd.js
@@ -26,9 +26,13 @@ const PropertyAdd = () => {
     apiRequest('PUT', '/property', { data: form, headers: { ...getAuthHeader() } })
       .then((res) => {
         console.log('Property added!', res.data);
+        alert('Property added!');
+        location.href = location.origin + '/property/list';
       })
       .catch((err) => {
         console.error('There was an error adding the property!', err);
+        alert('There was an error adding the property!');
+        location.href = location.origin + '/property/list';
       });
   };
 
diff --git a/fe/src/components/PropertyDetail.js b/fe/src/components/PropertyDetail.js
index 0a0bcc0..c001a0b 100644
--- a/fe/src/components/PropertyDetail.js
+++ b/fe/src/components/PropertyDetail.js
@@ -10,6 +10,8 @@ import Header from "./Header";
 const PropertyDetail = () => {
   const [detail, setDetail] = useState([]);
 
+  const [whichView, setWhichView] = useState('show');
+
   const getDetail = () => {
     apiRequest('GET', location.pathname, { headers: { ...getAuthHeader() } })
       .then((res) => {
@@ -24,16 +26,14 @@ const PropertyDetail = () => {
   const handleLike = () => {
   };
 
-  const handleInterested = () => {
-    return (
-      <div>
-        <p>Name: {detail.user.firstName} {detail.user.lastName}</p>
-        <br />
-        <p>Email Address: {detail.user.email}</p>
-        <br />
-        <p>Phone Number: {detail.user.phoneNumber}</p>
-      </div>
-    );
+  const handleInterested = (e) => {
+    e.preventDefault();
+    if (sessionStorage.getItem('role') == null) {
+        alert('Please Login!');
+        location.href = location.origin + '/login';
+    }
+    setWhichView("user");
+    //location.reload();
   };
 
   const handleChange = (e) => {
@@ -43,14 +43,20 @@ const PropertyDetail = () => {
     });
   };
 
-  const handleSubmit = (e) => {
+  const handleUpdate = (e) => {
     e.preventDefault();
     apiRequest('POST', location.pathname, { data: detail, headers: { ...getAuthHeader() } })
       .then((res) => {
-        console.log('Property updated!', res.data);
+        console.log("Property updated!", res.data);
+        alert("Property updated!");
+        setWhichView("show");
+        location.reload();
       })
       .catch((err) => {
-        console.error('There was an error updating the property!', err);
+        console.error("There was an error updating the property!", err);
+        alert("There was an error updating the property!");
+        setWhichView("show");
+        location.reload();
       });
   };
 
@@ -58,41 +64,14 @@ const PropertyDetail = () => {
     getDetail();
   }, []);
 
-  const editProperty = () => {
-    return (
-      <form onSubmit={handleSubmit}>
-        <div>
-          <label>Title:</label>
-          <input type="text" name="title" value={detail.title} onChange={handleChange} />
-        </div>
-        <div>
-          <label>Description:</label>
-          <input type="text" name="description" value={detail.description} onChange={handleChange} />
-        </div>
-        <div>
-          <label>Location:</label>
-          <input type="text" name="location" value={detail.location} onChange={handleChange} />
-        </div>
-        <div>
-          <label>Bedrooms:</label>
-          <input type="number" name="bedrooms" value={detail.bedrooms} onChange={handleChange} />
-        </div>
-        <div>
-          <label>Bathrooms:</label>
-          <input type="number" name="bathrooms" value={detail.bathrooms} onChange={handleChange} />
-        </div>
-        <div>
-          <label>Rent:</label>
-          <input type="number" name="rent" value={detail.rent} onChange={handleChange} />
-        </div>
-        <button type="submit">Update</button>
-      </form>
-    );
+  const handleEdit = () => {
+    setWhichView("edit");
+    //location.reload();
   };
 
-  const deleteProperty = (e) => {
+  const handleDelete = (e) => {
     e.preventDefault();
-    apiRequest('DELETE', location.pathname, { headers: { ...getAuthHeader() } })
+    apiRequest("DELETE", location.pathname, { headers: { ...getAuthHeader() } })
       .then((res) => {
         console.log("Property deleted!", res.data);
         alert("Property deleted!");
@@ -105,35 +84,89 @@ const PropertyDetail = () => {
       });
   };
 
-  return (
-    <div>
-      <Header />
-      <p>Title: {detail.title}</p>
-      <br />
-      <p>Description: {detail.description}</p>
-      <br />
-      <p>Location: {detail.location}</p>
-      <br />
-      <p>Bedrooms: {detail.bedrooms}</p>
-      <br />
-      <p>Bathrooms: {detail.bathrooms}</p>
-      <br />
-      <p>Rent: {detail.rent}</p>
-      <br />
-      { (sessionStorage.getItem('role') === 'buyer')
-        ? (
+  const renderView = () => {
+    if (whichView === 'show') {
+      return (
+        <div>
+          <p>Title: {detail.title}</p>
+          <br />
+          <p>Description: {detail.description}</p>
+          <br />
+          <p>Location: {detail.location}</p>
+          <br />
+          <p>Bedrooms: {detail.bedrooms}</p>
+          <br />
+          <p>Bathrooms: {detail.bathrooms}</p>
+          <br />
+          <p>Rent: {detail.rent}</p>
+          <br />
+          {(sessionStorage.getItem("role") === "seller")
+            ? (
+              <div>
+                <button className="editproperty" onClick={handleEdit}>Edit</button>
+                <button className="deleteproperty" onClick={handleDelete}>Delete</button>
+              </div>
+            )
+            : (
+              <div>
+                <button className="likebutton" onClick={handleLike}>Like</button>
+                <button className="interestedbutton" onClick={handleInterested}>Interested</button>
+              </div>
+            )
+          }
+        </div>
+      );
+    } else {
+      if (whichView === "edit") {
+        return (
           <div>
-            <button className="likebutton" onClick={handleLike}>Like</button>
-            <button className="interestedbutton" onClick={handleInterested}>Interested</button>
+            <form onSubmit={handleUpdate}>
+              <div>
+                <label>Title:</label>
+                <input type="text" name="title" value={detail.title} onChange={handleChange} />
+              </div>
+              <div>
+                <label>Description:</label>
+                <input type="text" name="description" value={detail.description} onChange={handleChange} />
+              </div>
+              <div>
+                <label>Location:</label>
+                <input type="text" name="location" value={detail.location} onChange={handleChange} />
+              </div>
+              <div>
+                <label>Bedrooms:</label>
+                <input type="number" name="bedrooms" value={detail.bedrooms} onChange={handleChange} />
+              </div>
+              <div>
+                <label>Bathrooms:</label>
+                <input type="number" name="bathrooms" value={detail.bathrooms} onChange={handleChange} />
+              </div>
+              <div>
+                <label>Rent:</label>
+                <input type="number" name="rent" value={detail.rent} onChange={handleChange} />
+              </div>
+              <button type="submit">Update</button>
+            </form>
           </div>
-        )
-        : (
+        );
+      } else {
+        return (
           <div>
-            <button className="editproperty" onClick={editProperty}>Edit</button>
-            <button className="deleteproperty" onClick={deleteProperty}>Delete</button>
+            <p>Name: {detail.seller.firstName} {detail.seller.lastName}</p>
+            <br />
+            <p>Email Address: {detail.seller.email}</p>
+            <br />
+            <p>Phone Number: {detail.seller.phoneNumber}</p>
           </div>
-        )
+        );
       }
+    }
+  }
+
+  return (
+    <div>
+      <Header />
+      {renderView()}
     </div>
   );
 };