diff --git a/cart.html b/cart.html
index 8e0b7c0..d75e961 100644
--- a/cart.html
+++ b/cart.html
@@ -56,7 +56,7 @@
 							href="index.html"
 							class="btn-primary"
 							style="display: inline-flex; text-decoration: none">
-							Start Shopping
+							Start Shopping →
 						</a>
 					</div>
 				</div>
@@ -103,10 +103,11 @@
 								flex-direction: column;
 								gap: var(--space-3);
 							">
-							<a href="checkout.html" class="btn-checkout" id="checkout-btn">
-								Proceed to Checkout
-							</a>
-							<a href="index.html" class="btn-continue">Continue Shopping</a>
+							<button class="btn-primary btn-checkout" id="btn-checkout">
+								<span class="btn-text">Proceed to Checkout →</span>
+								<span class="btn-spinner"></span>
+							</button>
+							<a href="index.html" class="btn-continue">← Continue Shopping</a>
 							<button class="btn-clear" onclick="clearCart()">
 								🗑 Clear entire cart
 							</button>
diff --git a/checkout.html b/checkout.html
index 10fff0b..63542b7 100644
--- a/checkout.html
+++ b/checkout.html
@@ -35,50 +35,54 @@
 					<form id="checkout-form" class="checkout-form">
 						<div class="form-row">
 							<div class="form-group">
-								<label for="firstName">First Name <span>*</span></label>
-								<input type="text" id="firstName" required />
+								<label for="first_name">First Name <span>*</span></label>
+								<input type="text" id="first_name" name="first_name" required />
 							</div>
 
 							<div class="form-group">
-								<label for="lastName">Last Name <span>*</span></label>
-								<input type="text" id="lastName" required />
+								<label for="last_name">Last Name <span>*</span></label>
+								<input type="text" id="last_name" name="last_name" required />
 							</div>
 						</div>
 
 						<div class="form-group">
 							<label for="email">Email Address </label>
-							<input type="email" id="email" />
+							<input type="email" id="email" name="email" />
 						</div>
 
 						<div class="form-group">
 							<label for="phone">Phone <span>*</span></label>
-							<input type="tel" id="phone" required />
+							<input type="tel" id="phone" name="phone" required />
 						</div>
 
 						<div class="form-group">
 							<label for="address">Street Address <span>*</span></label>
-							<input type="text" id="address" required />
+							<input type="text" id="address" name="address" required />
 						</div>
 
 						<div class="form-row">
 							<div class="form-group">
 								<label for="city">City <span>*</span></label>
-								<input type="text" id="city" required />
+								<input type="text" id="city" name="city" required />
 							</div>
 
 							<div class="form-group">
 								<label for="state">State <span>*</span></label>
-								<input type="text" id="state" required />
+								<input type="text" id="state" name="state" required />
 							</div>
 						</div>
 
 						<div class="form-group">
-							<label for="postal">Postal Code <span>*</span></label>
-							<input type="text" id="postal" required />
+							<label for="post_code">Postal Code <span>*</span></label>
+							<input type="text" id="post_code" name="post_code" required />
 						</div>
 
-						<button type="submit" class="btn-primary checkout-continue">
-							Continue to Payment
+						<button
+							type="submit"
+							id="btn-order"
+							class="btn-primary checkout-continue">
+							<span class="btn-text">Continue to Payment →</span>
+							<span class="btn-spinner"></span>
 						</button>
 					</form>
 				</div>