diff --git a/app/templates/index.html b/app/templates/index.html
index 6af3712..b85952e 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -41,6 +41,12 @@
 			}
 		}
 	</style>
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+	<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
+	
 </head>
 
 <body class="bg-gray-100 font-poppins">
@@ -169,13 +175,13 @@ <h2 class="text-4xl font-bold mb-8">Ready to Join?</h2>
                                 ${recipe.image_url && recipe.image_url.trim() !== '' ? `
                                 <img src="https://recipe-files.s3.eu-north-1.amazonaws.com/recipes/${recipe.image_url}" alt="${recipe.title}" class="w-full h-full object-cover">
                                 ` : `
-                                <span class="text-gray-500">No Image Available</span>
+                                <img src="https://recipe-files.s3.eu-north-1.amazonaws.com/recipes/no-image.png" alt="${recipe.title}" class="w-full h-full object-cover">
                                 `}
                             </div>
                             <div class="p-4">
                                 <h3 class="text-lg font-bold text-gray-800 mb-2">${recipe.title}</h3>
                                 <p class="text-gray-500 text-sm">${new Date(recipe.created_at).toLocaleDateString()} at ${new Date(recipe.created_at).toLocaleTimeString()}</p>
-                                <a href="#" class="text-blue-600 mt-2 inline-block">Read More</a>
+                                <a href="/recipes/${recipe.id}" class="text-blue-600 mt-2 inline-block">Read More</a>
                             </div>
                     </div>
 					`;
diff --git a/app/templates/recipes/createPages/create.html b/app/templates/recipes/createPages/create.html
index 6ac9df5..875b9f7 100644
--- a/app/templates/recipes/createPages/create.html
+++ b/app/templates/recipes/createPages/create.html
@@ -20,22 +20,22 @@ <h1 class="text-2xl font-semibold text-gray-800 mb-6">Add Your Favorite Recipe</
 
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 		<div>
-			<label class="block text-gray-700">Title</label>
-			<input name="title" type="text" class="w-full p-2 border border-gray-300 rounded" placeholder="Sweet Potato Enchiladas">
+			<label for="title" class="block text-gray-700">Title</label>
+			<input name="title" type="text" id="title" class="w-full p-2 border border-gray-300 rounded" placeholder="Sweet Potato Enchiladas">
 		</div>
 		<div>
-			<label class="block text-gray-700">Description</label>
-			<input name="description" type="text" class="w-full p-2 border border-gray-300 rounded" placeholder="Tasty enchilada recipe">
+			<label for="description" class="block text-gray-700">Description</label>
+			<input name="description" id="description" type="text" class="w-full p-2 border border-gray-300 rounded" placeholder="Tasty enchilada recipe">
 		</div>
 		<div>
-			<label class="block text-gray-700">Oven Temp</label>
+			<label for="oven_temp" class="block text-gray-700">Oven Temp</label>
 			<div class="input-group">
-				<input name="oven_temp"  type="number" class="p-2 border border-gray-300 rounded w-1/2" placeholder="60">
+				<input name="oven_temp"  type="number" id="oven_temp" class="p-2 border border-gray-300 rounded w-1/2" placeholder="60">
 				<span>°F</span>
 			</div>
 		</div>
 		<div>
-			<label class="block text-gray-700">Category</label>
+			<label for="categoryIdInput" class="block text-gray-700">Category</label>
 			<input type="text" id="categoryInput" class="w-full p-2 border border-gray-300 rounded"
 				placeholder="Select a category" readonly onclick="toggleDropdown()">
 				<input type="hidden" id="categoryIdInput" name="category_id">
@@ -55,23 +55,23 @@ <h1 class="text-2xl font-semibold text-gray-800 mb-6">Add Your Favorite Recipe</
 		
 		<div class="grid grid-cols-1 gap-6 md:grid-cols-3 mt-6">
 			<div>
-				<label class="block text-gray-700">Prep Time</label>
+				<label for="prep_time" class="block text-gray-700">Prep Time</label>
 				<div class="input-group">
-					<input name="prep_time" type="number" class="p-2 border border-gray-300 rounded w-1/2" placeholder="30">
+					<input name="prep_time" id="prep_time" type="number" class="p-2 border border-gray-300 rounded w-1/2" placeholder="30">
 					<span>min</span>
 				</div>
 			</div>
 			<div>
-				<label class="block text-gray-700">Cook Time</label>
+				<label for="cook_time" class="block text-gray-700">Cook Time</label>
 				<div class="input-group">
-					<input name="cook_time" type="number" class="p-2 border border-gray-300 rounded w-1/2" placeholder="25">
+					<input name="cook_time" id="cook_time" type="number" class="p-2 border border-gray-300 rounded w-1/2" placeholder="25">
 					<span>min</span>
 				</div>
 			</div>
 			<div>
-				<label class="block text-gray-700">Yield</label>
+				<label for="servings" class="block text-gray-700">Yield</label>
 				<div class="input-group">
-					<input name="servings" type="number" class="p-2 border border-gray-300 rounded w-1/2" placeholder="5">
+					<input name="servings" type="number" id="servings" class="p-2 border border-gray-300 rounded w-1/2" placeholder="5">
 					<span>servings</span>
 				</div>
 			</div>
diff --git a/app/templates/recipes/createPages/create_layout.html b/app/templates/recipes/createPages/create_layout.html
index dcd6c8b..93843eb 100644
--- a/app/templates/recipes/createPages/create_layout.html
+++ b/app/templates/recipes/createPages/create_layout.html
@@ -13,9 +13,16 @@
 	</title>
 
 	<link rel="stylesheet" href="{{url_for('static', filename='css/output.css')}}">
+	<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="{{ url_for('static', filename='css/recipe_form.css') }}">
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+	<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
+	
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
 	<!-- Include SortableJS for drag-and-drop functionality -->
-	<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
 </head>
 
 <body class="bg-gray-50">
@@ -57,9 +64,9 @@
 
 	</div>
 	<!-- Footer -->
-	<footer class="bg-gray-100 py-6 mt-10">
+	<footer class="bg-blue-100 py-6 mt-10">
 		<div class="max-w-6xl mx-auto text-center">
-			<p class="mb-4">Made with ❤️ by Esekyi</p>
+			<p class="mb-4 text-blue-600">Made with ❤️ by Esekyi</p>
 			<a href="">
 				<p class="text-sm text-gray-600 mt-4">About</p>
 			</a>
diff --git a/app/templates/recipes/readPages/allRecipes.html b/app/templates/recipes/readPages/allRecipes.html
index f752953..2b1bd64 100644
--- a/app/templates/recipes/readPages/allRecipes.html
+++ b/app/templates/recipes/readPages/allRecipes.html
@@ -6,7 +6,7 @@ <h1 class="text-3xl font-bold">Recipes</h1>
 		onclick="window.location.href='{{ url_for('recipe_routes.add_recipe') }}';">+ Add Recipe</button>
 </div>
 <div class="mt-6">
-	<input type="text" placeholder="Search by recipe name, category, ingredients..."
+	<input type="text" name="search" placeholder="Search by recipe name, category, ingredients..."
 		class="w-full border border-gray-300 rounded-lg py-2 px-4 mb-6">
 </div>
 <div class="grid grid-cols-3 gap-6">
diff --git a/app/templates/recipes/readPages/read_layout.html b/app/templates/recipes/readPages/read_layout.html
index d643ff7..c42f40d 100644
--- a/app/templates/recipes/readPages/read_layout.html
+++ b/app/templates/recipes/readPages/read_layout.html
@@ -13,7 +13,16 @@
 	</title>
 
 	<link rel="stylesheet" href="{{url_for('static', filename='css/output.css')}}">
+	<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
 	<link rel="stylesheet" href="{{ url_for('static', filename='css/recipe_form.css') }}">
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+	<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
+
 	<!-- Include SortableJS for drag-and-drop functionality -->
 </head>
 
@@ -54,13 +63,18 @@
 	</main>
 
 	<!-- Footer -->
-	<footer class="bg-gray-100 py-6 mt-10">
+	<footer class="bg-blue-100 py-6 mt-10">
 		<div class="max-w-6xl mx-auto text-center">
-			<p class="mb-4">Made with ❤️ by Esekyi</p>
+			<p class="mb-4 text-blue-600">Made with ❤️ by Esekyi</p>
 			<a href="">
 				<p class="text-sm text-gray-600 mt-4">About</p>
 			</a>
 			<p class="text-sm text-gray-600 mt-4">&copy; 2024 SpiceShare. All rights reserved.</p>
 		</div>
 	</footer>
-</body>
\ No newline at end of file
+
+	{% block scripts %}
+		
+	{% endblock scripts %}
+</body>
+
diff --git a/app/templates/recipes/readPages/recipe_detail.html b/app/templates/recipes/readPages/recipe_detail.html
index e69de29..29f86c5 100644
--- a/app/templates/recipes/readPages/recipe_detail.html
+++ b/app/templates/recipes/readPages/recipe_detail.html
@@ -0,0 +1,192 @@
+{% extends "recipes/readPages/read_layout.html" %}
+{% block content %}
+
+<body class="bg-white text-gray-900 font-sans">
+
+	<!-- Main Content -->
+	<main class="max-w-4xl mx-auto p-4">
+		<!-- Recipe Title -->
+		 {% if recipe %}
+		<section class="text-center mb-8">
+			<h1 class="text-3xl font-semibold mb-2 text-indigo-600">{{recipe.title}}</h1>
+			<p class="text-sm text-gray-500">{{ recipe.created_at.strftime('%B %d, %Y') }} at {{ recipe.created_at.strftime('%I:%M %p') }}</p>
+			<p class="text-sm text-gray-500">By: {{recipe.user.username}}</p>
+		</section>
+
+		<!-- Image -->
+		<div class="relative mt-4">
+			{% if recipe.image_url %}
+				<img src="https://recipe-files.s3.eu-north-1.amazonaws.com/recipes/{{recipe.image_url}}" alt="{{ recipe.title }}"
+					class="w-full h-[500px] object-cover rounded-lg mb-8">
+			{% else %}
+				<img src="{{url_for('static', filename='images/no-image-available.png') }}" alt="{{ recipe.title }}"
+					class="w-full h-[500px] object-cover rounded-lg mb-8">
+			{% endif %}
+			<div class="absolute top-2 right-2 space-x-2">
+				<button class="bg-white text-gray-700 px-3 py-1 rounded shadow hover:bg-gray-100" onclick="window.print()">Print</button>
+				<button class="bg-white text-gray-700 px-3 py-1 rounded shadow hover:bg-gray-100" onclick="copyToClipboard('{{ recipe.id }}')">Share</button>
+				{% if current_user.is_authenticated and current_user.id == recipe.user_id %}
+				<button class="bg-white text-gray-700 px-3 py-1 rounded shadow hover:bg-gray-100" onclick="window.location.href='{{ url_for('recipe_routes.edit_recipe', recipe_id=recipe.id) }}'">Edit</button>
+				{% endif %}
+			</div>
+		</div>
+
+		<!-- Info Section -->
+		<section class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center mb-8">
+			<div>
+				<p class="font-bold">Prep Time</p>
+				<p>{{recipe.prep_time}} min</p>
+			</div>
+			<div>
+				<p class="font-bold">Cook Time</p>
+				<p>{{recipe.cook_time}} min</p>
+			</div>
+			<div>
+				<p class="font-bold">Oven Temp</p>
+				<p>{{recipe.oven_temp}} °F</p>
+			</div>
+			<div>
+				<p class="font-bold">Yield</p>
+				<p>{{recipe.servings}} servings</p>
+			</div>
+		</section>
+		
+		<section>
+			<div>
+				<h2 class="text-2xl font-semibold mb-4 text-indigo-600">Description</h2>
+				<p class="mb-8">{{recipe.description}}</p>
+			</div>
+		</section>
+		{% endif %}
+
+		<!-- Ingredients and Directions Section -->
+		 {% if ingredients %}
+		<section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
+			<!-- Ingredients -->
+			<div>
+				<h2 class="text-2xl font-semibold mb-4 text-indigo-600">Ingredients</h2>
+				<ul class="space-y-2 text-black-700">
+					{% for ingredient in ingredients %}
+						<li>{{ ingredient.name }}</li>
+					{% endfor %}
+				</ul>
+			</div>
+		{% endif %}
+
+			<!-- Directions -->
+			{% if instructions %}
+			<div>
+				<h2 class="text-2xl font-semibold mb-4 text-indigo-600">Instructions</h2>
+				<ol class="space-y-4 list-decimal list-inside text-black-700">
+					{% for instruction in instructions %}
+					<li>{{ instruction.name }}</li>
+					{% endfor %}
+				</ol>
+			</div>
+			{% endif %}
+
+			
+		</section>
+
+		<!-- Comment Section -->
+		<div class="max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-lg mt-8">
+			<h2 class="text-2xl font-semibold mb-6 text-indigo-600">Comments</h2>
+		
+			<!-- Display Comments -->
+			{% for comment in comments %}
+			<div class="flex items-start space-x-4 mb-6">
+				<div class="shrink-0">
+					<img src="{{ url_for('static', filename='images/avartar.png') }}" alt="User Avatar"
+						class="w-10 h-10 rounded-full bg-gray-400">
+				</div>
+				<div class="flex-1 bg-gray-100 p-4 rounded-lg">
+					<div class="flex justify-between items-center">
+						<h3 class="font-semibold text-gray-800">{{ comment.user.username }}</h3>
+						<p class="text-sm text-gray-500">{{ comment.created_at.strftime('%b %d, %Y %I:%M %p') }}</p>
+					</div>
+					<p class="text-gray-700 mt-2">{{ comment.text }}</p>
+					{% if current_user.is_authenticated and current_user.id == comment.user_id %}
+					<div class="flex space-x-2 mt-4">
+						<form action="{{ url_for('recipe_routes.update_comment', comment_id=comment.id) }}" method="POST"
+							class="inline">
+							<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+							<input type="text" name="text" placeholder="Update your comment..."
+								class="text-gray-700 p-2 rounded bg-white border-gray-300 w-full">
+							<button type="submit" class="text-blue-600 hover:text-blue-800">Update</button>
+						</form>
+						<form action="{{ url_for('recipe_routes.delete_comment', comment_id=comment.id) }}" method="POST"
+							class="inline">
+							<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+							<button type="submit" class="text-red-600 hover:text-red-800">Delete</button>
+						</form>
+					</div>
+					{% endif %}
+				</div>
+			</div>
+			{% else %}
+			<p class="text-gray-500">No comments yet. Be the first to comment!</p>
+			{% endfor %}
+		
+			<!-- Add Comment Form -->
+			{% if current_user.is_authenticated %}
+			<form action="{{ url_for('recipe_routes.add_comment', recipe_id=recipe.id) }}" method="POST" class="mt-6">
+				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+				<textarea name="text" placeholder="Write a comment..."
+					class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required></textarea>
+				<button type="submit"
+					class="mt-4 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700">Comment</button>
+			</form>
+			{% else %}
+			<p class="text-gray-500">Please <a href="{{ url_for('auth.login') }}" class="text-indigo-600 hover:underline">sign
+					in</a> to leave a comment.</p>
+			{% endif %}
+		</div>
+
+
+	</main>
+
+
+	{% endblock content %}
+
+	{% block scripts %}
+	<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+	<script>
+		function copyToClipboard(recipeId)
+			{
+				const fullUrl = `${window.location.origin}/recipes/${recipeId}`; // Construct full URL
+				navigator.clipboard.writeText(fullUrl).then(() =>
+				{
+					// Show flash message
+					const flashMessageBox = document.createElement('div');
+					flashMessageBox.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 p-4 w-96 bg-info text-white text-center rounded-lg shadow-lg flash-message';
+					flashMessageBox.innerHTML = `
+                Recipe link copied to clipboard!
+                <button class="ml-4 font-bold" onclick="this.parentElement.style.display='none';">×</button>
+            `;
+
+					// Append the flash message to the flash messages container
+					const flashContainer = document.querySelector('.flash-messages');
+					if (flashContainer)
+					{
+						flashContainer.appendChild(flashMessageBox);
+					} else
+					{
+						// If the flash container is not found, append it directly to the body
+						document.body.appendChild(flashMessageBox);
+					}
+
+					// Auto-remove the flash message after 3 seconds
+					setTimeout(() =>
+					{
+						if (flashMessageBox)
+						{
+							flashMessageBox.remove();
+						}
+					}, 3000);
+				}).catch(err =>
+				{
+					console.error('Failed to copy: ', err);
+				});
+			}
+	</script>
+	{% endblock scripts %}
\ No newline at end of file
diff --git a/app/templates/user_auth/login.html b/app/templates/user_auth/login.html
index 6f9055d..f4ea7f8 100644
--- a/app/templates/user_auth/login.html
+++ b/app/templates/user_auth/login.html
@@ -11,6 +11,12 @@
 			cursor: pointer;
 		}
 	</style>
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+	<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
+	
 </head>
 
 <body class="bg-gray-100 font-poppins flex items-center justify-center min-h-screen">
diff --git a/app/templates/user_auth/register.html b/app/templates/user_auth/register.html
index 5c40565..5eb7833 100644
--- a/app/templates/user_auth/register.html
+++ b/app/templates/user_auth/register.html
@@ -12,6 +12,12 @@
 			cursor: pointer;
 		}
 	</style>
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+	<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
+	
 	</head>
 	
 	<body class="bg-gray-100 font-poppins flex items-center justify-center h-screen">
diff --git a/app/templates/user_auth/user_profile.html b/app/templates/user_auth/user_profile.html
index 69ec3b6..aea0d47 100644
--- a/app/templates/user_auth/user_profile.html
+++ b/app/templates/user_auth/user_profile.html
@@ -6,6 +6,12 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>My Profile | SpiceShare</title>
 	<link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}">
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
+	<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
+	
 </head>
 
 <body class="bg-gray-100 font-poppins">
