diff --git a/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor b/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor
new file mode 100644
index 0000000..8f4bdaa
--- /dev/null
+++ b/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor
@@ -0,0 +1,50 @@
+@using BlazingPizza.Services
+
+@page "/checkout"
+@inject OrderState OrderState
+@inject HttpClient HttpClient
+@inject NavigationManager NavigationManager
+
+<div class="top-bar">
+    <a class="logo" href="">
+        <img src="/img/logo.svg" />
+    </a>
+
+    <a class="nav-tab" href="">
+        <img src="/img/pizza-slice.svg" />
+        <div>Get Pizza</div>
+    </a>
+</div>
+
+<div class="main">
+    <div class="checkout-cols">
+        <div class="checkout-order-details">
+            <h4>Review order</h4>
+            @foreach (var pizza in Order.Pizzas)
+            {
+                <p>
+                    <string>
+                        @(pizza.Size)"
+                        @pizza.Special.Name
+                        (£@pizza.GetFormattedTotalPrice())
+                    </string>
+                </p>
+            }
+
+            <p>
+                <string>
+                    Total price:
+                    £@Order.GetFormattedTotalPrice()
+                </string>
+            </p>
+        </div>
+    </div>
+
+    <button class="checkout-button btn btn-warning">
+        Place order
+    </button>
+</div>
+
+@code {
+    Order Order => OrderState.Order;
+}
diff --git a/MyFirstBlazor/BlazingPizza/Pages/Index.razor b/MyFirstBlazor/BlazingPizza/Pages/Index.razor
index e78a60b..dc48366 100644
--- a/MyFirstBlazor/BlazingPizza/Pages/Index.razor
+++ b/MyFirstBlazor/BlazingPizza/Pages/Index.razor
@@ -5,6 +5,15 @@
 @inject NavigationManager NavigationManager
 @inject OrderState OrderState
 
+<div class="top-bar">
+	<a class="logo" href="">
+		<img src="/img/logo.svg" />
+	</a>
+	<a class="nav-tab active" href="">
+		<img src="/img/pizza-slice.svg" />
+		<div>Get Pizza</div>
+	</a>
+</div>
 
 <div class="main">
 	<h1>Blazing Pizzas</h1>