diff --git a/src/main/resources/templates/explore.html b/src/main/resources/templates/explore.html
index 7cdc9d7..04d5528 100644
--- a/src/main/resources/templates/explore.html
+++ b/src/main/resources/templates/explore.html
@@ -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>
+                	<span th:text="${recipe.cost != null ? #strings.repeat('$', recipe.cost) : ''}"></span>
             	</div>
         	</a>
 		</div>	
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index f675b32..3d2cf1a 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -50,7 +50,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>
+                	<span th:text="${recipe.cost != null ? #strings.repeat('$', recipe.cost) : ''}"></span>
             	</div>
         	</a>	
         </div>
diff --git a/src/main/resources/templates/view-recipe.html b/src/main/resources/templates/view-recipe.html
index 5257c91..3195e67 100644
--- a/src/main/resources/templates/view-recipe.html
+++ b/src/main/resources/templates/view-recipe.html
@@ -72,7 +72,7 @@
                     <p><strong>Prep Time:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> minutes</p>
                     <p><strong>Cook Time:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> minutes</p>
                     <p><strong>Servings:</strong> <span th:text="${recipe.servings}">0</span></p>
-                    <p><strong>Cost:</strong> <span th:text="${recipe.cost}">0</span></p>
+                    <p><strong>Cost:</strong> <span th:text="${#strings.repeat('$', recipe.cost)}">$</span></p>
                 </div>
 
                 <div style="margin-bottom: 30px;">