diff --git a/CocktailWeb/Pages/ModalComponent.razor b/CocktailWeb/Pages/ModalComponent.razor
new file mode 100644
index 0000000..57a1d43
--- /dev/null
+++ b/CocktailWeb/Pages/ModalComponent.razor
@@ -0,0 +1,51 @@
+<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
+    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">@Title</h5>
+            </div>
+            <div class="modal-body">
+                @Body
+            </div>
+            <div class="modal-footer">
+                @Footer
+            </div>
+        </div>
+    </div>
+</div>
+
+@if (showBackdrop)
+{
+    <div class="modal-backdrop fade show"></div>
+}
+
+@code {
+    [Parameter]
+    public RenderFragment? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment? Body { get; set; }
+
+    [Parameter]
+    public RenderFragment? Footer { get; set; }
+
+    private string modalDisplay = "none;";
+    private string modalClass = "";
+    private bool showBackdrop = false;
+
+    public async Task OpenModal()
+    {
+        modalDisplay = "block;";
+        await Task.Delay(100);//Delay allows bootstrap to perform nice fade animation
+        modalClass = "show";
+        showBackdrop = true;
+    }
+
+    public async Task Close()
+    {
+        modalDisplay = "none";
+        await Task.Delay(250);//Delay allows bootstrap to perform nice fade animation
+        modalClass = "";
+        showBackdrop = false;
+    }
+}
\ No newline at end of file