diff --git a/src/assets/Icons/thumbs.svg b/src/assets/Icons/thumbs.svg
new file mode 100644
index 0000000..d1ae766
--- /dev/null
+++ b/src/assets/Icons/thumbs.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" ?><svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{display:none;}
+	.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st2{fill:#303030;}
+</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M17.95222,33.90544h0.9013c0.21198,0,0.42036,0.06112,0.59631,0.17936    c0.28018,0.18827,0.55758,0.3808,0.84545,0.55725c0.16461,0.1009,0.35297,0.24185,0.53977,0.29492l6.92604,0.00805l4.83793,0.0013    c0.9355,0.00025,1.71305-0.76513,1.69462-1.70044c-0.01669-0.84692-0.15599-1.60765-1.00351-1.60765h0.1076    c0.91396,0,1.61795-0.74711,1.60863-1.66102c-0.00988-0.96905,0.13757-1.76219-0.82805-1.76219h0.3228    c0.92,0,1.40993-0.80351,1.40993-1.73351c0-0.92,0.12016-1.65903-0.79984-1.65903h0.32154c0.92,0,1.04668-0.81019,1.04668-1.73019    c0-0.93-0.49831-1.60727-1.41831-1.60727l-8.70333,0.01419c0.20236-0.27825,1.23094-4.09943,1.15505-4.83301    c-0.0544-0.52583-0.20867-1.0503-0.3366-1.56151c-0.17118-0.68406-0.35542-1.36467-0.53957-2.04532    c-0.11769-0.43504-0.8064-0.7405-1.18842-0.87866c-0.58066-0.21-1.19885-0.11427-1.68509,0.26741    c-0.2588,0.20315-0.66063,0.53764-0.66016,0.88888c0.00162,1.21729-0.00109,2.43457,0.00345,3.65185    c0.00004,0.01062,0.00008,0.02123,0.00012,0.03185c0.00023,0.06161,0.00036,0.12407-0.01541,0.18363    c-0.0169,0.06386-0.05128,0.12147-0.08524,0.17812c-0.68155,1.13686-1.36008,2.27553-2.03821,3.41444    c-0.29735,0.4994-0.59458,0.99887-0.89091,1.49888c-0.26875,0.45347-0.51342,0.94802-0.9745,1.23768    c-0.40725,0.25585-0.7805,0.49207-1.19004,0.74735"/><path class="st1" d="M16.5418,35.94944h-3.68656c-0.7371,0-1.33464-0.59753-1.33464-1.33463V24.34045    c0-0.7371,0.59754-1.33464,1.33464-1.33464h3.68656c0.7371,0,1.33464,0.59754,1.33464,1.33464v10.27436    C17.87644,35.35191,17.2789,35.94944,16.5418,35.94944z"/><line class="st1" x1="13.55524" x2="13.55524" y1="29.80501" y2="24.76078"/><line class="st1" x1="13.55524" x2="13.55524" y1="30.95262" y2="31.7558"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/Icons/trash-can.svg b/src/assets/Icons/trash-can.svg
new file mode 100644
index 0000000..564d70b
--- /dev/null
+++ b/src/assets/Icons/trash-can.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 593.727 593.727"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M491.362,593.727H102.374c-20.865,0-37.84-16.975-37.84-37.84v-448.5h464.668v448.5
+			C529.202,576.752,512.228,593.727,491.362,593.727z M79.677,122.529v433.357c0,12.516,10.182,22.697,22.697,22.697h388.989
+			c12.516,0,22.697-10.182,22.697-22.697V122.529H79.677z"/>
+	</g>
+	<g>
+		<path d="M550.8,91.913H42.927V58.382c0-20.86,16.973-37.831,37.835-37.831h192.852C276.618,8.58,286.12,0,297.506,0
+			c11.399,0,20.907,8.578,23.905,20.551H512.97c20.859,0,37.83,16.971,37.83,37.831V91.913L550.8,91.913z M58.07,76.77h477.587
+			V58.382c0-12.51-10.178-22.688-22.688-22.688h-205.57l-0.148-7.42c-0.145-7.24-4.516-13.131-9.745-13.131
+			c-5.219,0-9.586,5.893-9.736,13.136l-0.154,7.415H80.762c-12.512,0-22.692,10.177-22.692,22.688V76.77z"/>
+	</g>
+	<g>
+		<path d="M144.621,546.275c-15.949,0-28.924-12.977-28.924-28.926V196.011c0-15.95,12.975-28.926,28.924-28.926
+			c15.95,0,28.926,12.976,28.926,28.926V517.35C173.547,533.299,160.571,546.275,144.621,546.275z M144.621,182.228
+			c-7.599,0-13.781,6.183-13.781,13.783V517.35c0,7.6,6.183,13.783,13.781,13.783c7.601,0,13.783-6.184,13.783-13.783V196.011
+			C158.404,188.411,152.222,182.228,144.621,182.228z"/>
+	</g>
+	<g>
+		<path d="M243.094,546.275c-15.95,0-28.925-12.977-28.925-28.926V196.011c0-15.95,12.976-28.926,28.925-28.926
+			c15.949,0,28.925,12.976,28.925,28.926V517.35C272.019,533.299,259.043,546.275,243.094,546.275z M243.094,182.228
+			c-7.6,0-13.782,6.183-13.782,13.783V517.35c0,7.6,6.183,13.783,13.782,13.783s13.782-6.184,13.782-13.783V196.011
+			C256.876,188.411,250.694,182.228,243.094,182.228z"/>
+	</g>
+	<g>
+		<path d="M341.565,546.275c-15.949,0-28.926-12.977-28.926-28.926V196.011c0-15.95,12.977-28.926,28.926-28.926
+			s28.926,12.976,28.926,28.926V517.35C370.491,533.299,357.515,546.275,341.565,546.275z M341.565,182.228
+			c-7.6,0-13.783,6.183-13.783,13.783V517.35c0,7.6,6.184,13.783,13.783,13.783s13.783-6.184,13.783-13.783V196.011
+			C355.347,188.411,349.165,182.228,341.565,182.228z"/>
+	</g>
+	<g>
+		<path d="M440.038,546.275c-15.955,0-28.934-12.977-28.934-28.926V196.011c0-15.95,12.979-28.926,28.934-28.926
+			c15.949,0,28.924,12.976,28.924,28.926V517.35C468.962,533.299,455.987,546.275,440.038,546.275z M440.038,182.228
+			c-7.605,0-13.791,6.183-13.791,13.783V517.35c0,7.6,6.186,13.783,13.791,13.783c7.6,0,13.781-6.184,13.781-13.783V196.011
+			C453.819,188.411,447.638,182.228,440.038,182.228z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/views/ViewBlog.vue b/src/views/ViewBlog.vue
index 34ef744..9f9d716 100644
--- a/src/views/ViewBlog.vue
+++ b/src/views/ViewBlog.vue
@@ -3,14 +3,15 @@
     <div class="post-view" v-if="currentBlog">
       <div class="container">
         <h1 class="blog-title">{{ currentBlog.blogTitle }}</h1>
-        <h4 class="blog-date">Posted on: {{ new Date(currentBlog.date).toLocaleString('en-us', { dateStyle: 'long' }) }}
+        <h4 class="blog-date">
+          Posted on: {{ new Date(currentBlog.date).toLocaleString('en-us', { dateStyle: 'long' }) }}
         </h4>
         <div class="pic-wrapper">
           <img class="blog-pic" :src="currentBlog.blogCoverPhoto" alt="Blog Cover Photo" />
         </div>
         <div class="post-content ql-editor" v-html="currentBlog.blogHTML"></div>
         <div class="like-section">
-          <i @click="toggleLike" :class="{ 'fas fa-heart liked': liked, 'far fa-heart': !liked }" class="like-icon"></i>
+          <thumbs @click="toggleLike" class="like-icon"/>
           <span>{{ currentBlog.likes }} likes</span>
         </div>
         <div class="comments-section">
@@ -21,12 +22,12 @@
           </div>
           <div class="comments-list">
             <div class="comment" v-for="comment in comments" :key="comment.id">
-              <div class="comment-author">{{ comment.authorName }}</div>
+              <div class="comment-header">
+                <div class="comment-author">{{ comment.authorName }}</div>
+                <div class="comment-date">{{ formatTimestamp(comment.timestamp.seconds) }}</div>
+                <trash v-if="canDeleteComment(comment)" class="delete-icon" @click="deleteComment(comment.id)" />
+              </div>
               <div class="comment-content">{{ comment.content }}</div>
-              <div class="comment-date">{{
-              formatTimestamp(comment.timestamp.seconds) }}</div>
-              <i v-if="canDeleteComment(comment)" class="fas fa-trash-alt" @click="deleteComment(comment.id)"></i>
-
             </div>
           </div>
         </div>
@@ -40,18 +41,18 @@
 
 
 
-
-
 <script>
 import firebase from 'firebase/app';
+import thumbs from '../assets/Icons/thumbs.svg';
+import trash from '../assets/Icons/trash-can.svg';
 import 'firebase/firestore';
 import 'firebase/auth';
 import '@fortawesome/fontawesome-free/css/all.css';
 import '@fortawesome/fontawesome-free/js/all.js';
 
-
 export default {
   name: "ViewBlog",
+  components: { thumbs, trash },
   metaInfo() {
     return {
       title: this.currentBlog.blogTitle,
@@ -74,6 +75,7 @@ export default {
       liked: false,
       comments: [],
       newComment: '',
+      isLiking: false, // To prevent multiple like actions at the same time
     };
   },
   async mounted() {
@@ -106,12 +108,15 @@ export default {
   methods: {
     async toggleLike() {
       const user = firebase.auth().currentUser;
-      console.log('like clicked');
+      console.log('like')
       if (!user) {
         this.$router.push({ name: 'Register' });
         return;
       }
 
+      if (this.isLiking) return; // Prevent multiple like actions
+      this.isLiking = true;
+
       const blogId = this.$route.params.blogid;
       const db = firebase.firestore();
       const blogRef = db.collection('blogPosts').doc(blogId);
@@ -122,29 +127,33 @@ export default {
           const blogDoc = await transaction.get(blogRef);
           const userLikesDoc = await transaction.get(userLikesRef);
 
-          if (blogDoc.exists) {
-            let newLikes = blogDoc.data().likes;
-            const likedPosts = userLikesDoc.exists ? userLikesDoc.data().likedPosts || [] : [];
-
-            if (this.liked) {
-              newLikes -= 1;
-              const index = likedPosts.indexOf(blogId);
-              if (index > -1) likedPosts.splice(index, 1);
-              this.liked = false;
-            } else {
-              newLikes += 1;
-              likedPosts.push(blogId);
-              this.liked = true;
-            }
-
-            transaction.update(blogRef, { likes: newLikes });
-            transaction.set(userLikesRef, { likedPosts });
-
-            this.currentBlog.likes = newLikes;
+          if (!blogDoc.exists) throw new Error('Blog post does not exist');
+
+          const currentLikes = blogDoc.data().likes;
+          const likedPosts = userLikesDoc.exists ? userLikesDoc.data().likedPosts || [] : [];
+          let newLikes;
+
+          if (this.liked) {
+            newLikes = currentLikes - 1;
+            const index = likedPosts.indexOf(blogId);
+            if (index > -1) likedPosts.splice(index, 1);
+            this.liked = false;
+          } else {
+            newLikes = currentLikes + 1;
+            likedPosts.push(blogId);
+            this.liked = true;
           }
+
+          transaction.update(blogRef, { likes: newLikes });
+          transaction.set(userLikesRef, { likedPosts }, { merge: true });
+
+          this.currentBlog.likes = newLikes;
         });
       } catch (error) {
         console.error('Transaction failed: ', error);
+        alert('An error occurred while updating the like status. Please try again.');
+      } finally {
+        this.isLiking = false;
       }
     },
     async fetchComments() {
@@ -153,13 +162,11 @@ export default {
       try {
         const commentsSnapshot = await db.collection('blogPosts').doc(blogId).collection('comments').orderBy('timestamp', 'desc').get();
         const comments = commentsSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
-        console.log("comments:", comments)
 
         for (let comment of comments) {
           const userDoc = await db.collection('users').doc(comment.userId).get();
           if (userDoc.exists) {
             comment.authorName = userDoc.data().userName;
-
           } else {
             comment.authorName = 'Unknown';
           }
@@ -198,18 +205,15 @@ export default {
         console.error('Error submitting comment:', error);
       }
     },
-
     formatTimestamp(seconds) {
       const date = new Date(seconds * 1000);
       return date.toLocaleString();
     },
-
     canDeleteComment(comment) {
       const currentUser = firebase.auth().currentUser;
       // Check if the current user is the author of the comment or an admin
       return currentUser && (comment.userId === currentUser.uid || currentUser.isAdmin);
     },
-
     async deleteComment(commentId) {
       const db = firebase.firestore();
       const blogId = this.$route.params.blogid;
@@ -228,9 +232,6 @@ export default {
 </script>
 
 
-
-
-
 <style lang="scss" scoped>
 .post-view {
   font-family: 'Georgia', 'Times New Roman', Times, serif;
@@ -291,11 +292,14 @@ export default {
 
   .like-icon {
     cursor: pointer;
-    font-size: 24px;
+    width: 38px;
+    fill: #8F80BF;
+    height: auto;
     transition: transform 0.3s ease, color 0.3s ease;
 
     &:hover {
       transform: scale(1.2);
+      fill: #1C1C20;
     }
 
     &.liked {
@@ -358,21 +362,40 @@ export default {
       margin-bottom: 10px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-      .comment-author {
-        font-weight: bold;
-        margin-bottom: 5px;
+      .comment-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .comment-author {
+          font-weight: bold;
+          margin-bottom: 5px;
+        }
+
+        .comment-date {
+          font-size: 0.875rem;
+          color: #888;
+        }
+
+        .delete-icon {
+          cursor: pointer;
+          width: 22px;
+          height: auto;
+          fill: #101110;
+
+          &:hover {
+            fill: #c0392b;
+            transform: scale(1.2);
+
+          }
+        }
       }
 
       .comment-content {
-        margin-bottom: 5px;
+        margin-top: 5px;
         font-size: 1rem;
         color: #555;
       }
-
-      .comment-date {
-        font-size: 0.875rem;
-        color: #888;
-      }
     }
   }
 }
@@ -420,4 +443,4 @@ export default {
     max-height: 300px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue.config.js b/vue.config.js
index 184e9e2..c8ee2d5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,5 +18,10 @@ module.exports = {
       },
     },
   },
+  devServer: {
+    allowedHosts: [
+      '8acf37da7fa549fc9a6fcbc39490ccae.vfs.cloud9.us-east-1.amazonaws.com'
+    ]
+  },
 };