From 35bf69d79ce706e531f2b3639410d0e99e98c1d8 Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Wed, 2 Jul 2025 21:21:10 -0700
Subject: [PATCH] (UI): Implemented the recipe view page!

This can be accessed from `/v1/web/recipe/:id`! Static implementation,
not yet wired to the DB. Working on that next!
---
 internal/app/handlers/page_handler.go         |   7 +
 internal/app/server/server.go                 |   1 +
 internal/templates/components/banner_templ.go |   2 +-
 internal/templates/components/cards_templ.go  |   2 +-
 .../templates/components/dropdowns_templ.go   |   2 +-
 internal/templates/components/navbar_templ.go |  26 +-
 .../templates/layouts/app_layout_templ.go     |   2 +-
 internal/templates/pages/create_templ.go      |   4 +-
 internal/templates/pages/favorites_templ.go   |   2 +-
 internal/templates/pages/home_templ.go        |  10 +-
 internal/templates/pages/list_templ.go        |   2 +-
 internal/templates/pages/login_templ.go       |  10 +-
 internal/templates/pages/profile_templ.go     |  10 +-
 internal/templates/pages/recipe.templ         | 218 ++++++-
 internal/templates/pages/recipe_templ.go      | 552 +++++++++++++++++-
 internal/templates/partials/row_templ.go      |   2 +-
 web/static/css/tailwind.css                   | 181 +++++-
 17 files changed, 956 insertions(+), 77 deletions(-)

diff --git a/internal/app/handlers/page_handler.go b/internal/app/handlers/page_handler.go
index 99a2bca..3d3a39b 100644
--- a/internal/app/handlers/page_handler.go
+++ b/internal/app/handlers/page_handler.go
@@ -66,3 +66,10 @@ func ListPage(ctx *gin.Context) {
 
 	ctx.HTML(200, "", layouts.AppLayout(title, page))
 }
+
+func RecipePage(ctx *gin.Context) {
+	title := "Potion - View Recipe"
+	page := pages.RecipePage()
+
+	ctx.HTML(200, "", layouts.AppLayout(title, page))
+}
diff --git a/internal/app/server/server.go b/internal/app/server/server.go
index da6a782..a234450 100644
--- a/internal/app/server/server.go
+++ b/internal/app/server/server.go
@@ -164,6 +164,7 @@ func (s *Server) Setup() *Server {
 	router_web.GET("/create", handlers.CreatePage)
 	router_web.GET("/profile", handlers.ProfilePage)
 	router_web.GET("/list", handlers.ListPage)
+	router_web.GET("/recipe/:id", handlers.RecipePage)
 
 	// WEB state endpoints
 	router_state.POST("/tags", handlers.NewTag)
diff --git a/internal/templates/components/banner_templ.go b/internal/templates/components/banner_templ.go
index 44042cb..bf8cab0 100644
--- a/internal/templates/components/banner_templ.go
+++ b/internal/templates/components/banner_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/cards_templ.go b/internal/templates/components/cards_templ.go
index 72add43..c90fc10 100644
--- a/internal/templates/components/cards_templ.go
+++ b/internal/templates/components/cards_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/dropdowns_templ.go b/internal/templates/components/dropdowns_templ.go
index 1a3d6e9..dde6499 100644
--- a/internal/templates/components/dropdowns_templ.go
+++ b/internal/templates/components/dropdowns_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/components/navbar_templ.go b/internal/templates/components/navbar_templ.go
index d2a2eef..6e0c2f8 100644
--- a/internal/templates/components/navbar_templ.go
+++ b/internal/templates/components/navbar_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package components
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -89,12 +89,8 @@ func navLink(current, name, url string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var3 templ.SafeURL
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(url))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/navbar.templ`, Line: 39, Col: 28}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		var templ_7745c5c3_Var3 templ.SafeURL = templ.SafeURL(url)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var3)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -159,12 +155,8 @@ func dropdownLink(name, url string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var6 templ.SafeURL
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(url))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/navbar.templ`, Line: 47, Col: 41}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(url)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -214,12 +206,8 @@ func listIcon(current, name, url string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var9 templ.SafeURL
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(url))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/components/navbar.templ`, Line: 53, Col: 28}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		var templ_7745c5c3_Var9 templ.SafeURL = templ.SafeURL(url)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var9)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/layouts/app_layout_templ.go b/internal/templates/layouts/app_layout_templ.go
index 44af2bc..e87c188 100644
--- a/internal/templates/layouts/app_layout_templ.go
+++ b/internal/templates/layouts/app_layout_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/create_templ.go b/internal/templates/pages/create_templ.go
index aa8fe7b..9f01ee6 100644
--- a/internal/templates/pages/create_templ.go
+++ b/internal/templates/pages/create_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -76,7 +76,7 @@ func Page() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"mx-4 md:mx-16 my-8\"><p class=\"mb-8\">Welcome to the Recipe Creation Wizard! Simply fill in the details about your culinary creation, including the recipe's name, a description, and other specifics like its category, duration, and difficulty. Don't forget to dynamically add all your ingredients and instructions using the dedicated buttons, and feel free to upload an appealing image. All required fields are marked with an <span class=\"text-red-500\">*</span>. Once everything looks perfect, just hit the \"Create Recipe\" button to share your masterpiece!</p><form hx-post=\"/v1/api/recipe\" hx-swap=\"outerHTML\" hx-target=\"#response\" hx-trigger=\"submit\" hx-encoding=\"multipart/form-data\"><div class=\"flex flex-col\"><label for=\"title\" class=\"text-sm mb-2\">Recipe Title <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"text\" id=\"title\" name=\"title\" required maxlength=\"128\" minlength=\"1\" placeholder=\"e.g., Classic Chicken Curry\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a title. Between 1-128 characters.</p></div><div class=\"flex flex-col my-4\"><label for=\"description\" class=\"text-sm mb-2\">Description <span class=\"text-red-500\">*</span></label> <textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500\" id=\"description\" name=\"description\" rows=\"4\" required maxlength=\"1024\" minlength=\"1\" placeholder=\"A brief description of your delicious recipe...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a description. Between 1-1000 characters.</p></div><div class=\"my-4 flex flex-col gap-x-2\"><div class=\"flex flex-col flex-grow\"><label for=\"tags\" class=\"text-sm mb-2\">Recipe Tags</label> <input onkeydown=\"return event.key != 'Enter';\" class=\"border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\" hx-post=\"/v1/web/state/tags\" maxlength=\"32\" hx-trigger=\"keyup[keyCode==13]\" hx-on::after-request=\"this.value=''\" hx-swap=\"innerHTML\" hx-target=\"#tag-list\" enterkeyhint=\"done\" type=\"text\" id=\"tag\" name=\"tag\" placeholder=\"e.g., Healthy\"> <input type=\"hidden\" name=\"tags\" id=\"tags\" value=\"\"></div><ul id=\"tag-list\" class=\"my-2 flex gap-1 flex-wrap\"></ul></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"preparation-time\" class=\"text-sm mb-2\">Prep Time <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"preparation-time\" name=\"preparation-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 20\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"cook-time\" class=\"text-sm mb-2\">Cook Time <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"cook-time\" name=\"cook-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 45\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"serving-size\" class=\"text-sm mb-2\">Serving Size <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != 'Enter';\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" max=\"16\" min=\"1\" required id=\"serving-size\" name=\"serving-size\" placeholder=\"e.g., 4\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a serving size.</p></div></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"category\" class=\"text-sm mb-2\">Category <span class=\"text-red-500\">*</span></label> <select id=\"category\" name=\"category\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a category</option> <option value=\"breakfast\">Breakfast</option> <option value=\"lunch\">Lunch</option> <option value=\"dinner\">Dinner</option> <option value=\"dessert\">Dessert</option> <option value=\"snack\">Snack</option> <option value=\"side\">Side</option> <option value=\"other\">Other</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a category.</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"difficulty\" class=\"text-sm mb-2\">Difficulty <span class=\"text-red-500\">*</span></label> <select id=\"difficulty\" name=\"difficulty\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a difficulty</option> <option value=\"1\">Beginner</option> <option value=\"2\">Easy</option> <option value=\"3\">Intermediate</option> <option value=\"4\">Challenging</option> <option value=\"5\">Extreme</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a difficulty.</p></div></div><div class=\"flex flex-col my-4\"><label for=\"ingredients\" class=\"text-sm\">Ingredients <span class=\"text-red-500\">*</span></label><div id=\"ingredient-list\"><div class=\"w-full flex gap-x-2 py-2\"><div class=\"flex-grow\"><input onkeydown=\"return event.key != 'Enter';\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"ingredients\" name=\"ingredients\" required minlength=\"1\" placeholder=\"Ingredient name (e.g., Chicken Breast)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one ingredient.</p></div><div class=\"w-1/3\"><input onkeydown=\"return event.key != 'Enter';\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"quantity\" name=\"quantity\" required minlength=\"1\" placeholder=\"Quantity (e.g., 1lb)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please provide a quantity.</p></div></div></div><button type=\"button\" onClick=\"addIngredient();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Ingredient</button></div><div class=\"flex flex-col my-4\"><label for=\"instructions\" class=\"text-sm\">Instructions <span class=\"text-red-500\">*</span></label><div id=\"instruction-list\" class=\"flex flex-col\"><textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500\n            focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500 \n            valid:my-2 invalid:mt-2\" id=\"instructions\" name=\"instructions\" rows=\"3\" required minlength=\"1\" placeholder=\"Step 1: Describe this step...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one step.</p></div><button type=\"button\" onClick=\"addInstruction();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Instruction Step</button></div><div class=\"flex flex-col my-4\"><label for=\"image\" class=\"text-sm\">Recipe Image</label> <input type=\"file\" accept=\"image/*\" name=\"image\" id=\"image\" class=\"my-2 block w-full text-sm text-placeholder file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 cursor-pointer\"></div><p id=\"response\" class=\"hidden\"></p><button type=\"submit\" class=\"w-full mt-8 bg-gradient-to-r from-blue-200 to-purple-200 py-2 rounded-lg text-lg cursor-pointer shadow-md\">Create Recipe</button></form></div><script>\n  function addIngredient() {\n    const list = document.getElementById(\"ingredient-list\");\n    const item = document.createElement(\"div\");\n    item.classList.add(\"w-full\", \"flex\", \"gap-x-2\", \"py-2\");\n    item.innerHTML = `\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"flex-grow border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"ingredients\"\n\t\t\t\t\t\t\tname=\"ingredients\"\n\t\t\t\t\t\t\tplaceholder=\"Ingredient name (e.g., Chicken Breast)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"w-1/3 border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"quantity\"\n\t\t\t\t\t\t\tname=\"quantity\"\n\t\t\t\t\t\t\tplaceholder=\"Quantity (e.g., 1lb)\"\n\t\t\t\t\t\t/>\n    `;\n    list.appendChild(item);\n  }\n\n  function addInstruction() {\n    const list = document.getElementById(\"instruction-list\");\n    const itemNum = list.querySelectorAll(\"textarea\").length + 1;\n    const item = document.createElement(\"textarea\");\n    item.id = \"instructions\";\n    item.name = \"instructions\";\n    item.className = \"border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm\";\n    item.rows = \"3\";\n    item.placeholder = `Step ${itemNum}: Describe this step...`;\n    list.appendChild(item);\n  }\n</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"mx-4 md:mx-16 my-8\"><p class=\"mb-8\">Welcome to the Recipe Creation Wizard! Simply fill in the details about your culinary creation, including the recipe's name, a description, and other specifics like its category, duration, and difficulty. Don't forget to dynamically add all your ingredients and instructions using the dedicated buttons, and feel free to upload an appealing image. All required fields are marked with an <span class=\"text-red-500\">*</span>. Once everything looks perfect, just hit the \"Create Recipe\" button to share your masterpiece!</p><form hx-post=\"/v1/api/recipe\" hx-swap=\"outerHTML\" hx-target=\"#response\" hx-trigger=\"submit\" hx-encoding=\"multipart/form-data\"><div class=\"flex flex-col\"><label for=\"title\" class=\"text-sm mb-2\">Recipe Title <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"text\" id=\"title\" name=\"title\" required maxlength=\"128\" minlength=\"1\" placeholder=\"e.g., Classic Chicken Curry\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a title. Between 1-128 characters.</p></div><div class=\"flex flex-col my-4\"><label for=\"description\" class=\"text-sm mb-2\">Description <span class=\"text-red-500\">*</span></label> <textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n          focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500\" id=\"description\" name=\"description\" rows=\"4\" required maxlength=\"1024\" minlength=\"1\" placeholder=\"A brief description of your delicious recipe...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a description. Between 1-1000 characters.</p></div><div class=\"my-4 flex flex-col gap-x-2\"><div class=\"flex flex-col flex-grow\"><label for=\"tags\" class=\"text-sm mb-2\">Recipe Tags</label> <input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\" hx-post=\"/v1/web/state/tags\" maxlength=\"32\" hx-trigger=\"keyup[keyCode==13]\" hx-on::after-request=\"this.value=&#39;&#39;\" hx-swap=\"innerHTML\" hx-target=\"#tag-list\" enterkeyhint=\"done\" type=\"text\" id=\"tag\" name=\"tag\" placeholder=\"e.g., Healthy\"> <input type=\"hidden\" name=\"tags\" id=\"tags\" value=\"\"></div><ul id=\"tag-list\" class=\"my-2 flex gap-1 flex-wrap\"></ul></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"preparation-time\" class=\"text-sm mb-2\">Prep Time <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"preparation-time\" name=\"preparation-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 20\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"cook-time\" class=\"text-sm mb-2\">Cook Time <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" id=\"cook-time\" name=\"cook-time\" required min=\"0\" max=\"120\" placeholder=\"e.g., 45\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a time (minutes).</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"serving-size\" class=\"text-sm mb-2\">Serving Size <span class=\"text-red-500\">*</span></label> <input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 \n            focus:ring-2 duration-200 ease-in-out transition-all shadow-sm invalid:border-red-500\" type=\"number\" max=\"16\" min=\"1\" required id=\"serving-size\" name=\"serving-size\" placeholder=\"e.g., 4\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter a serving size.</p></div></div><div class=\"my-4 flex gap-x-2\"><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"category\" class=\"text-sm mb-2\">Category <span class=\"text-red-500\">*</span></label> <select id=\"category\" name=\"category\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a category</option> <option value=\"breakfast\">Breakfast</option> <option value=\"lunch\">Lunch</option> <option value=\"dinner\">Dinner</option> <option value=\"dessert\">Dessert</option> <option value=\"snack\">Snack</option> <option value=\"side\">Side</option> <option value=\"other\">Other</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a category.</p></div><div class=\"flex flex-col flex-grow w-1/3\"><label for=\"difficulty\" class=\"text-sm mb-2\">Difficulty <span class=\"text-red-500\">*</span></label> <select id=\"difficulty\" name=\"difficulty\" required class=\"peer border border-gray-300 bg-gray-200 px-4 py-2 rounded-lg focus:outline-none \n            focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm \n            invalid:border-red-500\"><option value=\"\">Select a difficulty</option> <option value=\"1\">Beginner</option> <option value=\"2\">Easy</option> <option value=\"3\">Intermediate</option> <option value=\"4\">Challenging</option> <option value=\"5\">Extreme</option></select><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please select a difficulty.</p></div></div><div class=\"flex flex-col my-4\"><label for=\"ingredients\" class=\"text-sm\">Ingredients <span class=\"text-red-500\">*</span></label><div id=\"ingredient-list\"><div class=\"w-full flex gap-x-2 py-2\"><div class=\"flex-grow\"><input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"ingredients\" name=\"ingredients\" required minlength=\"1\" placeholder=\"Ingredient name (e.g., Chicken Breast)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one ingredient.</p></div><div class=\"w-1/3\"><input onkeydown=\"return event.key != &#39;Enter&#39;;\" class=\"peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none \n                focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\n                invalid:border-red-500\" type=\"text\" id=\"quantity\" name=\"quantity\" required minlength=\"1\" placeholder=\"Quantity (e.g., 1lb)\"><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please provide a quantity.</p></div></div></div><button type=\"button\" onClick=\"addIngredient();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Ingredient</button></div><div class=\"flex flex-col my-4\"><label for=\"instructions\" class=\"text-sm\">Instructions <span class=\"text-red-500\">*</span></label><div id=\"instruction-list\" class=\"flex flex-col\"><textarea class=\"peer border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500\n            focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm invalid:border-red-500 \n            valid:my-2 invalid:mt-2\" id=\"instructions\" name=\"instructions\" rows=\"3\" required minlength=\"1\" placeholder=\"Step 1: Describe this step...\"></textarea><p class=\"hidden peer-invalid:block text-xs text-red-500 my-1\">Please enter at least one step.</p></div><button type=\"button\" onClick=\"addInstruction();\" class=\"text-base md:text-lg text-white bg-blue-500 w-fit px-5 py-2 rounded-lg cursor-pointer\">Add Instruction Step</button></div><div class=\"flex flex-col my-4\"><label for=\"image\" class=\"text-sm\">Recipe Image</label> <input type=\"file\" accept=\"image/*\" name=\"image\" id=\"image\" class=\"my-2 block w-full text-sm text-placeholder file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 cursor-pointer\"></div><p id=\"response\" class=\"hidden\"></p><button type=\"submit\" class=\"w-full mt-8 bg-gradient-to-r from-blue-200 to-purple-200 py-2 rounded-lg text-lg cursor-pointer shadow-md\">Create Recipe</button></form></div><script>\n  function addIngredient() {\n    const list = document.getElementById(\"ingredient-list\");\n    const item = document.createElement(\"div\");\n    item.classList.add(\"w-full\", \"flex\", \"gap-x-2\", \"py-2\");\n    item.innerHTML = `\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"flex-grow border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"ingredients\"\n\t\t\t\t\t\t\tname=\"ingredients\"\n\t\t\t\t\t\t\tplaceholder=\"Ingredient name (e.g., Chicken Breast)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n            onkeydown=\"return event.key != 'Enter';\"\n\t\t\t\t\t\t\tclass=\"w-1/3 border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tid=\"quantity\"\n\t\t\t\t\t\t\tname=\"quantity\"\n\t\t\t\t\t\t\tplaceholder=\"Quantity (e.g., 1lb)\"\n\t\t\t\t\t\t/>\n    `;\n    list.appendChild(item);\n  }\n\n  function addInstruction() {\n    const list = document.getElementById(\"instruction-list\");\n    const itemNum = list.querySelectorAll(\"textarea\").length + 1;\n    const item = document.createElement(\"textarea\");\n    item.id = \"instructions\";\n    item.name = \"instructions\";\n    item.className = \"border border-gray-300 my-2 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all resize-none shadow-sm\";\n    item.rows = \"3\";\n    item.placeholder = `Step ${itemNum}: Describe this step...`;\n    list.appendChild(item);\n  }\n</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/pages/favorites_templ.go b/internal/templates/pages/favorites_templ.go
index ed0d24f..f2d6abe 100644
--- a/internal/templates/pages/favorites_templ.go
+++ b/internal/templates/pages/favorites_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/home_templ.go b/internal/templates/pages/home_templ.go
index fc5fac4..5e3d5de 100644
--- a/internal/templates/pages/home_templ.go
+++ b/internal/templates/pages/home_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -318,12 +318,8 @@ func ctaSection() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var8 templ.SafeURL
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinURLErrs(domain.WEB_CREATE)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/home.templ`, Line: 148, Col: 27}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		var templ_7745c5c3_Var8 templ.SafeURL = domain.WEB_CREATE
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/pages/list_templ.go b/internal/templates/pages/list_templ.go
index f5b8500..2d6b0ed 100644
--- a/internal/templates/pages/list_templ.go
+++ b/internal/templates/pages/list_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
diff --git a/internal/templates/pages/login_templ.go b/internal/templates/pages/login_templ.go
index 3c5be60..7adc048 100644
--- a/internal/templates/pages/login_templ.go
+++ b/internal/templates/pages/login_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -35,12 +35,8 @@ func LoginPage() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var2 templ.SafeURL
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinURLErrs(domain.API_AUTH_LOGIN)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/login.templ`, Line: 20, Col: 33}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		var templ_7745c5c3_Var2 templ.SafeURL = domain.API_AUTH_LOGIN
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/pages/profile_templ.go b/internal/templates/pages/profile_templ.go
index 8d9a680..845c66e 100644
--- a/internal/templates/pages/profile_templ.go
+++ b/internal/templates/pages/profile_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -105,12 +105,8 @@ func logoutSection() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var6 templ.SafeURL
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(domain.API_AUTH_LOGOUT)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/profile.templ`, Line: 25, Col: 31}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		var templ_7745c5c3_Var6 templ.SafeURL = domain.API_AUTH_LOGOUT
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/pages/recipe.templ b/internal/templates/pages/recipe.templ
index 1a905a9..0191569 100644
--- a/internal/templates/pages/recipe.templ
+++ b/internal/templates/pages/recipe.templ
@@ -1,7 +1,217 @@
 package templates
 
-templ RecipePage() {
-	<p>
-		Viewing page
-	</p>
+import "github.com/haydenhargreaves/Potion/internal/templates/components"
+
+templ servingIcon() {
+	<svg
+		class="h-8 text-blue-600"
+		fill="currentColor"
+		version="1.1"
+		id="Icons"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		viewBox="0 0 32 32"
+		xml:space="preserve"
+	>
+		<g>
+			<circle cx="12" cy="16" r="5"></circle>
+			<path
+				d="M12,6C6.5,6,2,10.5,2,16s4.5,10,10,10s10-4.5,10-10S17.5,6,12,6z M12,23c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7
+		S15.9,23,12,23z"
+			></path>
+			<path
+				d="M30,10.5V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v5.5c0,0.2,0,0.4,0,0.5h-1V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-1c0-0.2,0-0.4,0-0.5V5
+		c0-0.6-0.4-1-1-1s-1,0.4-1,1v5.5c0,1.9,0.5,3.4,1.4,4.3c0.7,0.8,1,1.8,0.9,2.7l-1,7.3c-0.1,0.8,0.1,1.6,0.6,2.2S25.2,28,26,28
+		s1.5-0.3,2.1-0.9s0.8-1.4,0.6-2.2l-1-7.3c-0.1-1,0.2-2,0.9-2.8C29.5,13.8,30,12.3,30,10.5z"
+			></path>
+		</g>
+	</svg>
+}
+
+templ timeIcon() {
+	<svg class="h-7 text-blue-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M12 7V12L14.5 13.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+			stroke="currentColor"
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		></path>
+	</svg>
+}
+
+templ starIcon(filled bool) {
+	if filled {
+		<svg class="h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M23.632 9.201a.628.628 0 0 1-.22.678l-5.726 4.96 1.727 7.394a.606.606 0 0 1-.935.676l-6.503-3.953-6.503 3.953a.713.713 0 0 1-.374.112.57.57 0 0 1-.34-.109.629.629 0 0 1-.222-.679l1.729-7.393L.539 9.879A.607.607 0 0 1 .897 8.78l7.536-.635 2.965-7.083a.62.62 0 0 1 1.155.001l2.965 7.082 7.536.635a.63.63 0 0 1 .578.42z"
+			></path>
+			<path fill="none" d="M0 0h24v24H0z"></path>
+		</svg>
+	} else {
+		<svg class="h-6 text-gray-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M23.054 8.781l-7.536-.635-2.965-7.082a.619.619 0 0 0-1.155 0L8.433 8.145.896 8.78a.607.607 0 0 0-.357 1.1l5.726 4.96-1.729 7.395a.63.63 0 0 0 .223.679.573.573 0 0 0 .339.108.717.717 0 0 0 .374-.111l6.503-3.954 6.503 3.953a.606.606 0 0 0 .935-.677l-1.727-7.392 5.725-4.96a.607.607 0 0 0-.357-1.099zm-6.48 5.698l1.662 7.113-6.261-3.806-6.262 3.807 1.663-7.114-5.513-4.776 7.257-.611 2.855-6.817 2.855 6.817 7.257.611z"
+			></path>
+			<path fill="none" d="M0 0h24v24H0z"></path>
+		</svg>
+	}
+}
+
+templ RecipePage() {
+	@components.Navbar("")
+	<div class="w-full flex justify-center">
+		<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
+			<img class="bg-gray-100 w-full h-96 mx-auto mb-8" src="" alt=""/>
+			<div class="px-4 py-8 md:px-8">
+				<h1 class="text-3xl md:text-4xl font-bold text-gray-800">Easy Chicken Alfredo</h1>
+				<p class="text-sm mt-2 mb-1 text-gray-700">Author: Hayden Hargreaves</p>
+				<p class="text-sm mb-2 text-gray-700">Category: Dinner</p>
+			</div>
+			@metadataSection()
+			<div class="px-4 py-8 md:px-8">
+				<h3 class="text-xl text-gray-800 font-semibold mb-2">About this recipe</h3>
+				<p class="text-gray-700">
+					A rich and creamy Classic Chicken Curry that's perfect for a comforting weeknight meal.
+					Tender chicken pieces are simmered in a luscious, spiced sauce with a hint of coconut, making
+					it an irresistible dish for the whole family. This recipe is designed to be straightforward,
+					delivering authentic flavors without requiring extensive culinary expertise. Enjoy it with
+					fluffy basmati rice or warm naan bread!
+				</p>
+			</div>
+			@ingredientList()
+			@instructionList()
+			@tagList()
+		</div>
+	</div>
+}
+
+templ metadataSection() {
+	<div
+		class="border border-blue-300 bg-blue-50 text-gray-700 mx-4 md:mx-8 rounded-lg flex flex-col 
+  md:flex-row justify-center items-center py-8"
+	>
+		<div class="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-full md:w-1/4">
+			@timeIcon()
+			<p>Prep: 20 min</p>
+			<p>Cook: 45 min</p>
+		</div>
+		<div
+			class="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 border-y md:border-y-0 md:border-x border-blue-300 py-8 w-9/10 md:w-fit md:py-0 px-8"
+		>
+			<div class="flex gap-x-1 my-2">
+				@starIcon(true)
+				@starIcon(true)
+				@starIcon(true)
+				@starIcon(false)
+				@starIcon(false)
+			</div>
+			<p>Intermediate</p>
+		</div>
+		<div class="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-1/4">
+			@servingIcon()
+			<p>Serves 4</p>
+		</div>
+	</div>
+}
+
+templ ingredientList() {
+	<div class="px-4 py-8 md:px-8">
+		<h2 class="text-2xl text-gray-800 font-semibold mb-2">Ingredients</h2>
+		<hr class="text-gray-300"/>
+		<ul class="text-lg my-4 text-gray-700">
+			@ingredientListItem("Chicken breast", "1lb", false)
+			@ingredientListItem("Butter", "1/2 cup", true)
+			@ingredientListItem("Heavy cream", "1 cup", false)
+			@ingredientListItem("Garlic powder", "1/4 tsp", true)
+			@ingredientListItem("Chicken breast", "1lb", false)
+			@ingredientListItem("Butter", "1/2 cup", true)
+			@ingredientListItem("Heavy cream", "1 cup", false)
+			@ingredientListItem("Garlic powder", "1/4 tsp", true)
+		</ul>
+	</div>
+}
+
+templ instructionList() {
+	<div class="px-4 py-8 md:px-8">
+		<h2 class="text-2xl text-gray-800 font-semibold mb-2">Instructions</h2>
+		<hr class="text-gray-300"/>
+		<ul class="text-lg my-4 text-gray-700">
+			@instructionListItem(`
+    Heat vegetable oil in a large skillet or Dutch oven over medium heat. Add chopped onion
+    and cook until softened, about 5 minutes.
+    `, 1)
+			@instructionListItem(`
+    Stir in minced garlic and grated ginger, cooking for another minute until fragrant. Add the curry paste and cook
+    for 2-3 minutes, stirring constantly, to toast the spices.
+    `, 2)
+			@instructionListItem(`
+    Add the chicken cubes to the pan and cook until lightly browned on all sides.
+    `, 3)
+			@instructionListItem(`
+    Pour in the coconut milk, stirring to combine everything. Bring to a gentle simmer, then reduce heat to low,
+    cover, and cook for 20-25 minutes, or until chicken is cooked through and tender.
+    `, 4)
+			@instructionListItem(`
+    Taste and adjust seasonings if necessary. Garnish with fresh cilantro before serving. Serve hot with basmati
+    rice or naan bread.
+    `, 5)
+		</ul>
+	</div>
+}
+
+templ tagList() {
+	<div class="px-4 py-4 md:px-8">
+		<h2 class="text-2xl text-gray-800 font-semibold mb-2">Tags</h2>
+		<hr class="text-gray-300"/>
+		<ul id="tag-list" class="my-4 flex gap-1 flex-wrap">
+			@tagListItem("healthy")
+			@tagListItem("high-protein")
+		</ul>
+		<hr class="text-gray-300"/>
+		<p class="my-4 mb-1.5 text-sm text-gray-700">Created: January 2, 2025</p>
+		<p class="mb-4 text-sm text-gray-700">Last Modified: February 14, 2025</p>
+	</div>
+}
+
+templ ingredientListItem(name, quantity string, odd bool) {
+	<li
+		if odd {
+			class="p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start bg-[#f8f8f8]"
+		} else {
+			class="p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start"
+		}
+	>
+		<span class="mr-4">
+			<svg class="h-4 text-gray-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				></path>
+			</svg>
+		</span>
+		<span class="font-semibold mr-2">{ quantity }: </span> { name }
+	</li>
+}
+
+templ instructionListItem(content string, num int) {
+	<li if num % 2==0 {
+	class="p-4 flex items-start gap-x-4 bg-[#f8f8f8]"
+} else {
+	class="p-4 flex items-start gap-x-4"
+}>
+		<div class="size-10 bg-blue-50 rounded-full flex items-center justify-center flex-shrink-0">
+			<h3 class="text-blue-600 font-semibold">{ num }</h3>
+		</div>
+		<p class="">{ content }</p>
+	</li>
+}
+
+templ tagListItem(content string) {
+	<li class="text-sm items-center bg-blue-100 text-blue-700 w-fit px-3 py-1.5 rounded-full">
+		{ content }
+	</li>
 }
diff --git a/internal/templates/pages/recipe_templ.go b/internal/templates/pages/recipe_templ.go
index 2cd953c..07617e9 100644
--- a/internal/templates/pages/recipe_templ.go
+++ b/internal/templates/pages/recipe_templ.go
@@ -8,7 +8,9 @@ package templates
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func RecipePage() templ.Component {
+import "github.com/haydenhargreaves/Potion/internal/templates/components"
+
+func servingIcon() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -29,7 +31,553 @@ func RecipePage() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<p>Viewing page</p>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<svg class=\"h-8 text-blue-600\" fill=\"currentColor\" version=\"1.1\" id=\"Icons\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><g><circle cx=\"12\" cy=\"16\" r=\"5\"></circle> <path d=\"M12,6C6.5,6,2,10.5,2,16s4.5,10,10,10s10-4.5,10-10S17.5,6,12,6z M12,23c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7\n\t\tS15.9,23,12,23z\"></path> <path d=\"M30,10.5V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v5.5c0,0.2,0,0.4,0,0.5h-1V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-1c0-0.2,0-0.4,0-0.5V5\n\t\tc0-0.6-0.4-1-1-1s-1,0.4-1,1v5.5c0,1.9,0.5,3.4,1.4,4.3c0.7,0.8,1,1.8,0.9,2.7l-1,7.3c-0.1,0.8,0.1,1.6,0.6,2.2S25.2,28,26,28\n\t\ts1.5-0.3,2.1-0.9s0.8-1.4,0.6-2.2l-1-7.3c-0.1-1,0.2-2,0.9-2.8C29.5,13.8,30,12.3,30,10.5z\"></path></g></svg>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func timeIcon() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<svg class=\"h-7 text-blue-600\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 7V12L14.5 13.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func starIcon(filled bool) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if filled {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<svg class=\"h-6 text-blue-600\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M23.632 9.201a.628.628 0 0 1-.22.678l-5.726 4.96 1.727 7.394a.606.606 0 0 1-.935.676l-6.503-3.953-6.503 3.953a.713.713 0 0 1-.374.112.57.57 0 0 1-.34-.109.629.629 0 0 1-.222-.679l1.729-7.393L.539 9.879A.607.607 0 0 1 .897 8.78l7.536-.635 2.965-7.083a.62.62 0 0 1 1.155.001l2.965 7.082 7.536.635a.63.63 0 0 1 .578.42z\"></path> <path fill=\"none\" d=\"M0 0h24v24H0z\"></path></svg>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<svg class=\"h-6 text-gray-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M23.054 8.781l-7.536-.635-2.965-7.082a.619.619 0 0 0-1.155 0L8.433 8.145.896 8.78a.607.607 0 0 0-.357 1.1l5.726 4.96-1.729 7.395a.63.63 0 0 0 .223.679.573.573 0 0 0 .339.108.717.717 0 0 0 .374-.111l6.503-3.954 6.503 3.953a.606.606 0 0 0 .935-.677l-1.727-7.392 5.725-4.96a.607.607 0 0 0-.357-1.099zm-6.48 5.698l1.662 7.113-6.261-3.806-6.262 3.807 1.663-7.114-5.513-4.776 7.257-.611 2.855-6.817 2.855 6.817 7.257.611z\"></path> <path fill=\"none\" d=\"M0 0h24v24H0z\"></path></svg>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		return nil
+	})
+}
+
+func RecipePage() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = components.Navbar("").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"w-full flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><img class=\"bg-gray-100 w-full h-96 mx-auto mb-8\" src=\"\" alt=\"\"><div class=\"px-4 py-8 md:px-8\"><h1 class=\"text-3xl md:text-4xl font-bold text-gray-800\">Easy Chicken Alfredo</h1><p class=\"text-sm mt-2 mb-1 text-gray-700\">Author: Hayden Hargreaves</p><p class=\"text-sm mb-2 text-gray-700\">Category: Dinner</p></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = metadataSection().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"px-4 py-8 md:px-8\"><h3 class=\"text-xl text-gray-800 font-semibold mb-2\">About this recipe</h3><p class=\"text-gray-700\">A rich and creamy Classic Chicken Curry that's perfect for a comforting weeknight meal. Tender chicken pieces are simmered in a luscious, spiced sauce with a hint of coconut, making it an irresistible dish for the whole family. This recipe is designed to be straightforward, delivering authentic flavors without requiring extensive culinary expertise. Enjoy it with fluffy basmati rice or warm naan bread!</p></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientList().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = instructionList().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tagList().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func metadataSection() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"border border-blue-300 bg-blue-50 text-gray-700 mx-4 md:mx-8 rounded-lg flex flex-col \n  md:flex-row justify-center items-center py-8\"><div class=\"flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-full md:w-1/4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = timeIcon().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<p>Prep: 20 min</p><p>Cook: 45 min</p></div><div class=\"flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 border-y md:border-y-0 md:border-x border-blue-300 py-8 w-9/10 md:w-fit md:py-0 px-8\"><div class=\"flex gap-x-1 my-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = starIcon(true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = starIcon(true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = starIcon(true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = starIcon(false).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = starIcon(false).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><p>Intermediate</p></div><div class=\"flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-1/4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = servingIcon().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<p>Serves 4</p></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func ingredientList() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"px-4 py-8 md:px-8\"><h2 class=\"text-2xl text-gray-800 font-semibold mb-2\">Ingredients</h2><hr class=\"text-gray-300\"><ul class=\"text-lg my-4 text-gray-700\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Chicken breast", "1lb", false).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Butter", "1/2 cup", true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Heavy cream", "1 cup", false).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Garlic powder", "1/4 tsp", true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Chicken breast", "1lb", false).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Butter", "1/2 cup", true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Heavy cream", "1 cup", false).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ingredientListItem("Garlic powder", "1/4 tsp", true).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</ul></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func instructionList() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"px-4 py-8 md:px-8\"><h2 class=\"text-2xl text-gray-800 font-semibold mb-2\">Instructions</h2><hr class=\"text-gray-300\"><ul class=\"text-lg my-4 text-gray-700\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = instructionListItem(`
+    Heat vegetable oil in a large skillet or Dutch oven over medium heat. Add chopped onion
+    and cook until softened, about 5 minutes.
+    `, 1).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = instructionListItem(`
+    Stir in minced garlic and grated ginger, cooking for another minute until fragrant. Add the curry paste and cook
+    for 2-3 minutes, stirring constantly, to toast the spices.
+    `, 2).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = instructionListItem(`
+    Add the chicken cubes to the pan and cook until lightly browned on all sides.
+    `, 3).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = instructionListItem(`
+    Pour in the coconut milk, stirring to combine everything. Bring to a gentle simmer, then reduce heat to low,
+    cover, and cook for 20-25 minutes, or until chicken is cooked through and tender.
+    `, 4).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = instructionListItem(`
+    Taste and adjust seasonings if necessary. Garnish with fresh cilantro before serving. Serve hot with basmati
+    rice or naan bread.
+    `, 5).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</ul></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func tagList() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"px-4 py-4 md:px-8\"><h2 class=\"text-2xl text-gray-800 font-semibold mb-2\">Tags</h2><hr class=\"text-gray-300\"><ul id=\"tag-list\" class=\"my-4 flex gap-1 flex-wrap\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tagListItem("healthy").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tagListItem("high-protein").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</ul><hr class=\"text-gray-300\"><p class=\"my-4 mb-1.5 text-sm text-gray-700\">Created: January 2, 2025</p><p class=\"mb-4 text-sm text-gray-700\">Last Modified: February 14, 2025</p></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func ingredientListItem(name, quantity string, odd bool) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<li")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if odd {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " class=\"p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start bg-[#f8f8f8]\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " class=\"p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "><span class=\"mr-4\"><svg class=\"h-4 text-gray-400\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></span> <span class=\"font-semibold mr-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(quantity)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/recipe.templ`, Line: 196, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, ": </span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/recipe.templ`, Line: 196, Col: 63}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func instructionListItem(content string, num int) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<li")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if num%2 == 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " class=\"p-4 flex items-start gap-x-4 bg-[#f8f8f8]\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " class=\"p-4 flex items-start gap-x-4\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "><div class=\"size-10 bg-blue-50 rounded-full flex items-center justify-center flex-shrink-0\"><h3 class=\"text-blue-600 font-semibold\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(num)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/recipe.templ`, Line: 207, Col: 48}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</h3></div><p class=\"\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(content)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/recipe.templ`, Line: 209, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</p></li>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func tagListItem(content string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var15 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var15 == nil {
+			templ_7745c5c3_Var15 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<li class=\"text-sm items-center bg-blue-100 text-blue-700 w-fit px-3 py-1.5 rounded-full\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(content)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/recipe.templ`, Line: 215, Col: 11}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</li>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/internal/templates/partials/row_templ.go b/internal/templates/partials/row_templ.go
index 4f9ddbc..1d1995d 100644
--- a/internal/templates/partials/row_templ.go
+++ b/internal/templates/partials/row_templ.go
@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.898
+// templ: version: v0.3.865
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
diff --git a/web/static/css/tailwind.css b/web/static/css/tailwind.css
index f2a784d..0653d56 100644
--- a/web/static/css/tailwind.css
+++ b/web/static/css/tailwind.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -13,6 +13,7 @@
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-300: oklch(80.9% 0.105 251.813);
@@ -27,9 +28,11 @@
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xl: 36rem;
@@ -48,6 +51,8 @@
     --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -252,6 +257,12 @@
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
+  .mx-8 {
+    margin-inline: calc(var(--spacing) * 8);
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
@@ -279,12 +290,24 @@
   .mt-16 {
     margin-top: calc(var(--spacing) * 16);
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
@@ -322,6 +345,14 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
   .size-32 {
     width: calc(var(--spacing) * 32);
     height: calc(var(--spacing) * 32);
@@ -339,6 +370,15 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
   .h-auto {
     height: auto;
   }
@@ -354,9 +394,15 @@
   .w-1 {
     width: calc(var(--spacing) * 1);
   }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
   .w-1\/3 {
     width: calc(1/3 * 100%);
   }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -451,12 +497,18 @@
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -501,6 +553,14 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
+  .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -521,6 +581,9 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-blue-300 {
+    border-color: var(--color-blue-300);
+  }
   .border-blue-500 {
     border-color: var(--color-blue-500);
   }
@@ -536,12 +599,21 @@
   .border-white {
     border-color: var(--color-white);
   }
+  .bg-\[\#f8f8f8\] {
+    background-color: #f8f8f8;
+  }
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -595,12 +667,18 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -616,6 +694,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -704,9 +785,21 @@
   .text-blue-500 {
     color: var(--color-blue-500);
   }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
   .text-gray-600 {
     color: var(--color-gray-600);
   }
@@ -716,15 +809,9 @@
   .text-gray-800 {
     color: var(--color-gray-800);
   }
-  .text-green-500 {
-    color: var(--color-green-500);
-  }
   .text-green-600 {
     color: var(--color-green-600);
   }
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -867,11 +954,6 @@
       margin-block: calc(var(--spacing) * 2);
     }
   }
-  .valid\:border-gray-300 {
-    &:valid {
-      border-color: var(--color-gray-300);
-    }
-  }
   .invalid\:mt-2 {
     &:invalid {
       margin-top: calc(var(--spacing) * 2);
@@ -910,6 +992,13 @@
       }
     }
   }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
   .hover\:bg-red-100 {
     &:hover {
       @media (hover: hover) {
@@ -1025,11 +1114,21 @@
       margin-inline: calc(var(--spacing) * 0);
     }
   }
+  .md\:mx-8 {
+    @media (width >= 48rem) {
+      margin-inline: calc(var(--spacing) * 8);
+    }
+  }
   .md\:mx-16 {
     @media (width >= 48rem) {
       margin-inline: calc(var(--spacing) * 16);
     }
   }
+  .md\:my-0 {
+    @media (width >= 48rem) {
+      margin-block: calc(var(--spacing) * 0);
+    }
+  }
   .md\:flex {
     @media (width >= 48rem) {
       display: flex;
@@ -1062,6 +1161,11 @@
       width: calc(1/3 * 100%);
     }
   }
+  .md\:w-1\/4 {
+    @media (width >= 48rem) {
+      width: calc(1/4 * 100%);
+    }
+  }
   .md\:w-2\/3 {
     @media (width >= 48rem) {
       width: calc(2/3 * 100%);
@@ -1082,16 +1186,53 @@
       width: calc(var(--spacing) * 48);
     }
   }
+  .md\:w-fit {
+    @media (width >= 48rem) {
+      width: fit-content;
+    }
+  }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:border-x {
+    @media (width >= 48rem) {
+      border-inline-style: var(--tw-border-style);
+      border-inline-width: 1px;
+    }
+  }
+  .md\:border-y-0 {
+    @media (width >= 48rem) {
+      border-block-style: var(--tw-border-style);
+      border-block-width: 0px;
+    }
+  }
   .md\:p-8 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 8);
     }
   }
+  .md\:px-8 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .md\:px-44 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 44);
     }
   }
+  .md\:py-0 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:py-8 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 8);
+    }
+  }
   .md\:py-12 {
     @media (width >= 48rem) {
       padding-block: calc(var(--spacing) * 12);
@@ -1114,6 +1255,12 @@
       line-height: var(--tw-leading, var(--text-3xl--line-height));
     }
   }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
   .md\:text-lg {
     @media (width >= 48rem) {
       font-size: var(--text-lg);
@@ -1136,16 +1283,6 @@
       width: calc(2/7 * 100%);
     }
   }
-  .\[\&\:not\(\:placeholder-shown\)\:invalid\]\:border-red-500 {
-    &:not(:placeholder-shown):invalid {
-      border-color: var(--color-red-500);
-    }
-  }
-  .\[\&\:not\(\:placeholder-shown\)\:valid\]\:border-green-500 {
-    &:not(:placeholder-shown):valid {
-      border-color: var(--color-green-500);
-    }
-  }
 }
 @property --tw-translate-x {
   syntax: "*";