diff --git a/src/main/resources/static/css/explore.css b/src/main/resources/static/css/explore.css
index 78e60a2..86a0df9 100644
--- a/src/main/resources/static/css/explore.css
+++ b/src/main/resources/static/css/explore.css
@@ -425,6 +425,12 @@ a {
   color: var(--dusty-red-hover);                
 }
 
+.card-cost {
+  font-weight: 800;
+  color: var(--dusty-red);
+}
+
+
 /* =========================
    Card Image
 ========================= */
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 62eb60b..d203aa3 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -290,6 +290,12 @@ a {
   color: var(--dusty-red-hover);                
 }
 
+.card-cost {
+  font-weight: 800;
+  color: var(--dusty-red);
+}
+
+
 /* =========================
    Card Image
 ========================= */
diff --git a/src/main/resources/static/css/my-profile.css b/src/main/resources/static/css/my-profile.css
index ec62180..5b3a175 100644
--- a/src/main/resources/static/css/my-profile.css
+++ b/src/main/resources/static/css/my-profile.css
@@ -399,6 +399,11 @@ a {
   overflow: hidden;
 }
 
+.card-cost {
+  font-weight: 800;
+  color: var(--dusty-red);
+}
+
 /* =========================
    Card Image
 ========================= */
diff --git a/src/main/resources/templates/explore.html b/src/main/resources/templates/explore.html
index 63870bd..7c14e6f 100644
--- a/src/main/resources/templates/explore.html
+++ b/src/main/resources/templates/explore.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
     <meta name="_csrf" th:content="${_csrf.token}"/>
-    <title>Thyme Crunch Home</title>
+    <title>Explore - Thyme Crunch</title>
     <link rel="stylesheet" th:href="@{css/explore.css}">
     <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
@@ -65,7 +65,7 @@
                 	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                     	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
-                	<p th:text="${recipe.cost}">Cost</p>
+                	<p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>
 		</div>	
@@ -234,6 +234,12 @@
 	    window.location.href = '/explore?' + out.toString();
 	  }
 	})();
+	
+	// For cost display
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
 </script>
             
 </body>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index f432621..744e94d 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Thyme Crunch Home</title>
+    <title>Home - Thyme Crunch</title>
     <link rel="stylesheet" th:href="@{css/home.css}">
     <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
 </head>
@@ -51,7 +51,7 @@
                 	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                     	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
-                	<p th:text="${recipe.cost}">Cost</p>
+                	<p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>	
         </div>
@@ -64,5 +64,13 @@
         </div>
     </div>
 </div>
+
+<script>
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
+</script>
+
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/my-profile.html b/src/main/resources/templates/my-profile.html
index 3542a32..5c2b4e5 100644
--- a/src/main/resources/templates/my-profile.html
+++ b/src/main/resources/templates/my-profile.html
@@ -56,7 +56,7 @@
                 	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                     	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
-                	<p th:text="${recipe.cost}">Cost</p>
+                	<p class="card-cost" th:text="${recipe.cost}"><b>Cost</b></p>
             	</div>
         	</a>
         	<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}" class="edit-link">Edit</a>
@@ -91,5 +91,12 @@
 
 </div>
 
+<script>
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
+</script>
+
 </body>
 </html>
\ No newline at end of file
