diff --git a/src/BlazingPizza.Client/Shared/ConfigurePizzaDialog.razor b/src/BlazingPizza.Client/Shared/ConfigurePizzaDialog.razor
index 47b708c6..7d800591 100644
--- a/src/BlazingPizza.Client/Shared/ConfigurePizzaDialog.razor
+++ b/src/BlazingPizza.Client/Shared/ConfigurePizzaDialog.razor
@@ -1,68 +1,70 @@
 @inject HttpClient HttpClient
+@inject IJSRuntime JSRuntime
 
 
-        <div class="dialog-title">
-            <h2>@Pizza.Special?.Name</h2>
-            @Pizza.Special?.Description
-        </div>
-        <form class="dialog-body">
-            <div>
-                <label>Size:</label>
-                <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
-                <span class="size-label">
-                    @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
-                </span>
-            </div>
-            <div>
-                <label>Extra Toppings:</label>
-                @if (toppings is null)
-                {
-                    <select class="custom-select" disabled>
-                        <option>(loading...)</option>
-                    </select>
-                }
-                else if (Pizza.Toppings.Count >= 6)
-                {
-                    <div>(maximum reached)</div>
-                }
-                else
+<div class="dialog-title">
+    <h2>@Pizza.Special?.Name</h2>
+    @Pizza.Special?.Description
+</div>
+<form class="dialog-body">
+    <div>
+        <label>Size:</label>
+        <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
+        <span class="size-label">
+            @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
+        </span>
+    </div>
+    <div>
+        <label>Extra Toppings:</label>
+        @if (toppings is null)
+        {
+            <select class="custom-select" disabled>
+                <option>(loading...)</option>
+            </select>
+        }
+        else if (Pizza.Toppings.Count >= 6)
+        {
+            <div>(maximum reached)</div>
+        }
+        else
+        {
+            <select class="custom-select" @onchange="ToppingSelected" @ref="toppingsSelect">
+                <option value="-1" disabled selected>(select)</option>
+                @for (var i = 0; i < toppings.Count; i++)
                 {
-                    <select class="custom-select" @onchange="ToppingSelected">
-                        <option value="-1" disabled selected>(select)</option>
-                        @for (var i = 0; i < toppings.Count; i++)
-                        {
-                            <option value="@i">@toppings[i].Name - (£@(toppings[i].GetFormattedPrice()))</option>
-                        }
-                    </select>
+                    <option value="@i">@toppings[i].Name - (£@(toppings[i].GetFormattedPrice()))</option>
                 }
-            </div>
+            </select>
+        }
+    </div>
 
-            <div class="toppings">
-                @foreach (var topping in Pizza.Toppings)
-                {
-                    if (topping?.Topping is not null)
-                    {
-                        <div class="topping">
-                            @topping.Topping.Name
-                            <span class="topping-price">@topping.Topping.GetFormattedPrice()</span>
-                            <button type="button" class="delete-topping" @onclick="@(() => RemoveTopping(topping.Topping))">x</button>
-                        </div>
-                    }
-                }
-            </div>
-        </form>
+    <div class="toppings">
+        @foreach (var topping in Pizza.Toppings)
+        {
+            if (topping?.Topping is not null)
+            {
+                <div class="topping">
+                    @topping.Topping.Name
+                    <span class="topping-price">@topping.Topping.GetFormattedPrice()</span>
+                    <button type="button" class="delete-topping" @onclick="@(() => RemoveTopping(topping.Topping))">x</button>
+                </div>
+            }
+        }
+    </div>
+</form>
 
-        <div class="dialog-buttons">
-            <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
-            <span class="mr-center">
-                Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
-            </span>
-            <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
-        </div>
+<div class="dialog-buttons">
+    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
+    <span class="mr-center">
+        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
+    </span>
+    <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
+</div>
 
 
 @code {
     List<Topping>? toppings;
+    ElementReference? toppingsSelect { get; set; }
 
     [Parameter, EditorRequired] public Pizza Pizza { get; set; } = new();
     [Parameter, EditorRequired] public EventCallback OnCancel { get; set; }
@@ -73,25 +75,34 @@
         toppings = await HttpClient.GetFromJsonAsync<List<Topping>>("toppings") ?? new();
     }
 
-    void ToppingSelected(ChangeEventArgs e)
+    async Task ToppingSelected(ChangeEventArgs e)
     {
         if (toppings is null) return;
         if (int.TryParse((string?)e.Value, out var index) && index >= 0)
         {
-            AddTopping(toppings[index]);
+            await AddTopping(toppings[index]);
         }
     }
 
-    void AddTopping(Topping topping)
+    async Task AddTopping(Topping topping)
     {
         if (Pizza.Toppings.Find(pt => pt.Topping == topping) is null)
         {
             Pizza.Toppings.Add(new PizzaTopping() { Topping = topping });
         }
+        await SetDefaultTopping();
     }
 
-    void RemoveTopping(Topping topping)
+    async Task RemoveTopping(Topping topping)
     {
         Pizza.Toppings.RemoveAll(pt => pt.Topping == topping);
+        if (!Pizza.Toppings.Any())
+            await SetDefaultTopping();
+    }
+
+    private async Task SetDefaultTopping()
+    {
+        if (toppingsSelect != null)
+            await JSRuntime.InvokeVoidAsync("JsFunctions.setSelectedIndex", toppingsSelect, 0);
     }
-}
+}
\ No newline at end of file
diff --git a/src/BlazingPizza.Client/wwwroot/index.html b/src/BlazingPizza.Client/wwwroot/index.html
index 0aeae293..a7425c58 100644
--- a/src/BlazingPizza.Client/wwwroot/index.html
+++ b/src/BlazingPizza.Client/wwwroot/index.html
@@ -14,7 +14,7 @@
 <body>
     <div id="app">
         <div class="loading-bar"></div>
-    </div>
+    </div> 
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.
@@ -29,5 +29,6 @@
     <script src="_content/BlazingPizza.ComponentsLibrary/deliveryMap.js"></script>
     <script src="_content/BlazingPizza.ComponentsLibrary/leaflet/leaflet.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
+    <script src="js/functions.js"></script>
 </body>
 </html>
diff --git a/src/BlazingPizza.Client/wwwroot/js/functions.js b/src/BlazingPizza.Client/wwwroot/js/functions.js
new file mode 100644
index 00000000..486fcc7b
--- /dev/null
+++ b/src/BlazingPizza.Client/wwwroot/js/functions.js
@@ -0,0 +1,6 @@
+window.JsFunctions =
+{
+    setSelectedIndex: function (element, index) {
+        element.selectedIndex = index;
+    }
+};
\ No newline at end of file