diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..fcf1308
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<title>{% block title %}
+		SpiceShare{% endblock %}
+	</title>
+
+	<link rel="stylesheet" href="{{url_for('static', filename='css/output.css')}}">
+	<style>
+		body {
+			display: flex;
+			flex-direction: column;
+			min-height: 100vh;
+		}
+	
+		main {
+			flex: 1 0 auto;
+		}
+	</style>
+</head>
+
+<body class="bg-background text-text font-sans">
+	<header class="bg-primary text-white py-4 shadow-md">
+		<div class="container mx-auto flex justify-between items-center">
+			<h1 class="text-3xl font-bold"><a href="{{ url_for('user_routes.list_users') }}">SpiceShare</a></h1>
+			<nav>
+				<a href="{{ url_for('user_routes.list_users') }}" class="mr-6 hover:text-accent">Home</a>
+				<a href="{{ url_for('user_routes.list_users') }}" class="mr-6 hover:text-accent">Recipes</a>
+				<a href="{{ url_for('user_routes.list_users') }}" class="hover:text-accent">Login</a>
+			</nav>
+		</div>
+	</header>
+
+	<main class="container mx-auto mt-8 mb-8">
+		{% with messages = get_flashed_messages(with_categories=true) %}
+			{% if messages %}
+				<div class="mb-4 flash-messages">
+					{% for category, message in messages %}
+						<div class="flash-message bg-{{ category }} p-4 rounded text-white mb-2">
+							{{ message }}
+							<button class="ml-4 font-bold" onclick="this.parentElement.style.display='none';">×</button>
+						</div>
+					{% endfor %}
+				</div>
+			{% endif %}
+		{% endwith %}
+
+		{% block content %}
+		{% endblock %}
+
+	</main>
+
+	<footer class="bg-secondary text-white py-4">
+		<div class="container mx-auto text-center">
+			<p>&copy; 2024 SpiceShare. All rights reserved.</p>
+		</div>
+	</footer>
+
+	{% block scripts %}
+	<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
+	{% endblock %}
+</body>
+
+</html>
\ No newline at end of file
