diff --git a/web/src/pages/Create.tsx b/web/src/pages/Create.tsx
index 865a3d0..19e3266 100644
--- a/web/src/pages/Create.tsx
+++ b/web/src/pages/Create.tsx
@@ -1,8 +1,333 @@
+import Banner from "../components/Banner";
 
 export default function Create() {
+  const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  }
+
   return (
     <>
-      <p>Create</p>
+      <Banner content="Create Your Masterpiece" />
+      <div className="mx-4 md:mx-16 my-8">
+        <p className="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 className="text-red-500">*</span>. Once everything looks perfect, just hit the "Create Recipe"
+          button to
+          share your masterpiece!
+        </p>
+        <form>
+          <div className="flex flex-col">
+            <label htmlFor="title" className="text-sm">
+              Recipe Title
+              <span className="text-red-500">*</span>
+            </label>
+            <p className="text-xs pt-1 pb-2 text-gray-700">
+              Please provide a unique title for your recipe. This is the most important part!
+            </p>
+            <input
+              onKeyDown={keyDownHandler}
+              className="peer 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 invalid:border-red-500"
+              type="text"
+              id="title"
+              name="title"
+              required
+              maxLength={128}
+              minLength={1}
+              placeholder="e.g., Classic Chicken Curry"
+            />
+            <p className="hidden peer-invalid:block text-xs text-red-500 my-1">Please enter a title. Between 1-128 characters.</p>
+          </div>
+          <div className="flex flex-col my-4">
+            <label htmlFor="description" className="text-sm">
+              Description
+              <span className="text-red-500">*</span>
+            </label>
+            <p className="text-xs pt-1 pb-2 text-gray-700">
+              Please provide a description for your recipe. This can be short and sweet or long and detailed!
+            </p>
+            <textarea
+              className="peer 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 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 className="hidden peer-invalid:block text-xs text-red-500 my-1">
+              Please enter a description. Between 1-1000 characters.
+            </p>
+          </div>
+          <div className="my-4 flex flex-col gap-x-2">
+            <div className="flex flex-col flex-grow">
+              <label htmlFor="tags" className="text-sm">
+                Recipe Tags
+              </label>
+              <p className="text-xs pt-1 pb-2 text-gray-700">
+                Please provide a list of tags. <span className="italic">e.g., easy, dairy-free, gluten-free, high protein.</span>
+              </p>
+              <input
+                onKeyDown={keyDownHandler}
+                className="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"
+                maxLength={32}
+                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" className="my-2 flex gap-1 flex-wrap"></ul>
+          </div>
+          <div className="my-4 flex gap-x-2">
+            <div className="flex flex-col flex-grow w-1/3">
+              <label htmlFor="preparation-time" className="text-sm">
+                Prep Time
+                <span className="text-red-500">*</span>
+              </label>
+              <p className="text-xs pt-1 pb-2 text-gray-700">
+                Please provide the estimated prep time (minutes).
+              </p>
+              <input
+                onKeyDown={keyDownHandler}
+                className="peer 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 invalid:border-red-500"
+                type="number"
+                id="preparation-time"
+                name="preparation-time"
+                required
+                min="0"
+                max="120"
+                placeholder="e.g., 20"
+              />
+              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                Please enter a time (minutes).
+              </p>
+            </div>
+            <div className="flex flex-col flex-grow w-1/3">
+              <label htmlFor="cook-time" className="text-sm">
+                Cook Time
+                <span className="text-red-500">*</span>
+              </label>
+              <p className="text-xs pt-1 pb-2 text-gray-700">
+                Please provide the estimated cook time (minutes).
+              </p>
+              <input
+                onKeyDown={keyDownHandler}
+                className="peer 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 invalid:border-red-500"
+                type="number"
+                id="cook-time"
+                name="cook-time"
+                required
+                min="0"
+                max="120"
+                placeholder="e.g., 45"
+              />
+              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                Please enter a time (minutes).
+              </p>
+            </div>
+            <div className="flex flex-col flex-grow w-1/3">
+              <label htmlFor="serving-size" className="text-sm">
+                Serving Size
+                <span className="text-red-500">*</span>
+              </label>
+              <p className="text-xs pt-1 pb-2 text-gray-700">
+                Please provide the estimated serving size.
+              </p>
+              <input
+                onKeyDown={keyDownHandler}
+                className="peer 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 invalid:border-red-500"
+                type="number"
+                max="16"
+                min="1"
+                required
+                id="serving-size"
+                name="serving-size"
+                placeholder="e.g., 4"
+              />
+              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                Please enter a serving size.
+              </p>
+            </div>
+          </div>
+          <div className="my-4 flex gap-x-2">
+            <div className="flex flex-col flex-grow w-1/3">
+              <label htmlFor="category" className="text-sm">
+                Category
+                <span className="text-red-500">*</span>
+              </label>
+              <p className="text-xs pt-1 pb-2 text-gray-700">
+                Please provide the meal category.
+              </p>
+              <select
+                id="category"
+                name="category"
+                required
+                className="peer border border-gray-300 bg-gray-200 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 
+            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 className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                Please select a category.
+              </p>
+            </div>
+            <div className="flex flex-col flex-grow w-1/3">
+              <label htmlFor="difficulty" className="text-sm">
+                Difficulty
+                <span className="text-red-500">*</span>
+              </label>
+              <p className="text-xs pt-1 pb-2 text-gray-700">
+                Please provide a baseline difficulty.
+              </p>
+              <select
+                id="difficulty"
+                name="difficulty"
+                required
+                className="peer border border-gray-300 bg-gray-200 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 
+            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 className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                Please select a difficulty.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col my-4">
+            <label htmlFor="ingredients" className="text-sm">
+              Ingredients
+              <span className="text-red-500">*</span>
+            </label>
+            <p className="text-xs py-1 text-gray-700">Please provide a list of ingredients and their quantities.</p>
+            <ul id="ingredient-list">
+              <li className="w-full flex gap-x-2 py-2">
+                <div className="flex-grow">
+                  <input
+                    onKeyDown={keyDownHandler}
+                    className="peer w-full 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
+                invalid:border-red-500"
+                    type="text"
+                    id="ingredients"
+                    name="ingredients"
+                    required
+                    minLength={1}
+                    placeholder="Ingredient name (e.g., Chicken Breast)"
+                  />
+                  <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                    Please enter at least one ingredient.
+                  </p>
+                </div>
+                <div className="w-1/3">
+                  <input
+                    onKeyDown={keyDownHandler}
+                    className="peer w-full 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
+                invalid:border-red-500"
+                    type="text"
+                    id="quantity"
+                    name="quantity"
+                    required
+                    minLength={1}
+                    placeholder="Quantity (e.g., 1lb)"
+                  />
+                  <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                    Please provide a quantity.
+                  </p>
+                </div>
+              </li>
+            </ul>
+            <button
+              type="button"
+              className="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 className="flex flex-col my-4">
+            <label htmlFor="instructions" className="text-sm">
+              Instructions
+              <span className="text-red-500">*</span>
+            </label>
+            <p className="text-xs py-1 text-gray-700">
+              Please provide a list of instructions. You do not need to include step number, they will be added automatically!
+            </p>
+            <div id="instruction-list" className="flex flex-col">
+              <textarea
+                className="peer 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 resize-none shadow-sm invalid:border-red-500 
+            valid:my-2 invalid:mt-2"
+                id="instructions"
+                name="instructions"
+                rows={3}
+                required
+                minLength={1}
+                placeholder="Step 1: Describe this step..."
+              ></textarea>
+              <p className="hidden peer-invalid:block text-xs text-red-500 my-1">
+                Please enter at least one step.
+              </p>
+            </div>
+            <button
+              type="button"
+              className="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 className="flex flex-col my-4">
+            <label htmlFor="image" className="text-sm">
+              Recipe Image
+            </label>
+            <p className="text-xs pt-1 pb-2 text-gray-700">
+              Please provide an image of your creation. This is optional but is a nice touch!
+            </p>
+            <input
+              type="file"
+              accept="image/*"
+              name="image"
+              id="image"
+              className="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" className="hidden"></p>
+          <button
+            type="submit"
+            className="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>
     </>
   );
 }