diff --git a/demo/src/main/resources/templates/create-account.html b/demo/src/main/resources/templates/create-account.html
new file mode 100644
index 0000000..4a37b9c
--- /dev/null
+++ b/demo/src/main/resources/templates/create-account.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Create Thyme Crunch Account</title>
+    <link rel="stylesheet" th:href="@{css/create-account.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>
+<body>
+
+<header class="top-header">
+    <img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
+    <h1 class="site-name">Thyme Crunch</h1>
+    <img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
+</header>
+
+<!-- Main Content -->
+<main class="main-content">
+    <div class="login-box">
+        <h2>Create Account</h2>
+
+        <form id="createUserForm">
+            <div class="rows">
+                <label for="username">Username</label>
+                <input type="text" id="username" required>
+            </div>
+            <div class="rows">
+                <label for="email">Email</label>
+                <input type="email" id="email" required>
+            </div>
+            <div class="rows">
+                <label for="password">Password</label>
+                <input type="password" id="password" required>
+            </div>
+            <div class="rows">
+                <label for="confirmPassword">Confirm Password</label>
+                <input type="password" id="confirmPassword" required>
+            </div>
+            <p id="passwordError"></p>
+
+            <button type="submit">Create</button>
+        </form>
+    </div>
+</main>
+</body>
+</html>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+
+        const passwordField = document.getElementById("password");
+        const confirmPasswordField = document.getElementById("confirmPassword");
+
+        function checkPasswords() {
+
+            if (confirmPasswordField.value === "") {
+                confirmPasswordField.classList.remove("invalid");
+                return;
+            }
+
+            if (passwordField.value !== confirmPasswordField.value) {
+                confirmPasswordField.classList.add("invalid");
+            } else {
+                confirmPasswordField.classList.remove("invalid");
+            }
+        }
+
+        passwordField.addEventListener("input", checkPasswords);
+        confirmPasswordField.addEventListener("input", checkPasswords);
+
+        document.getElementById("createUserForm").addEventListener("submit", function(e) {
+
+            const password = passwordField.value;
+            const confirmPassword = confirmPasswordField.value;
+
+            if (password !== confirmPassword) {
+                e.preventDefault();
+                confirmPasswordField.classList.add("invalid");
+                return;
+            }
+
+            const userData = {
+                username: document.getElementById("username").value,
+                email: document.getElementById("email").value,
+                hashedpassword: password,
+                role: "USER"
+            };
+
+            fetch("http://localhost:8080/api/users", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(userData)
+            });
+
+            e.preventDefault();
+        });
+
+    });
+</script>
\ No newline at end of file
