diff --git a/Wabbajack.App.Blazor/Components/InfoModal.razor b/Wabbajack.App.Blazor/Components/InfoModal.razor
new file mode 100644
index 00000000..4b027d2f
--- /dev/null
+++ b/Wabbajack.App.Blazor/Components/InfoModal.razor
@@ -0,0 +1,9 @@
+@namespace Wabbajack.App.Blazor.Components
+
+<h3>[TBI] Model Component</h3>
+<p>@Content</p>
+
+@code {
+    [Parameter]
+    public string Content { get; set; }
+}
diff --git a/Wabbajack.App.Blazor/Components/StepLogger.razor b/Wabbajack.App.Blazor/Components/StepLogger.razor
new file mode 100644
index 00000000..89e47510
--- /dev/null
+++ b/Wabbajack.App.Blazor/Components/StepLogger.razor
@@ -0,0 +1,20 @@
+@using Wabbajack.App.Blazor.Pages
+
+@namespace Wabbajack.App.Blazor.Components
+
+<div id="step-logger">
+    @foreach (var step in value.StatusStep.Take(ShownSteps))
+    {
+        <div class="step">@step</div>
+    }
+</div>
+
+@code {
+    [Parameter]
+    public int ShownSteps { get; set; }
+    [Parameter]
+    public bool Reverse { get; set; }
+
+    [CascadingParameter]
+    public Installing value { get; set; }
+}
diff --git a/Wabbajack.App.Blazor/Components/StepLogger.razor.scss b/Wabbajack.App.Blazor/Components/StepLogger.razor.scss
new file mode 100644
index 00000000..1f6da37a
--- /dev/null
+++ b/Wabbajack.App.Blazor/Components/StepLogger.razor.scss
@@ -0,0 +1,33 @@
+#step-logger {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+
+  .step {
+    &:nth-child(1) {
+      margin-left: 0.5rem;
+      font-size: 2rem;
+      font-weight: 100;
+      color: rgba(255, 255, 255, 0.9);
+    }
+
+    &:nth-child(2) {
+      margin-left: 0.75rem;
+      font-size: 1.85rem;
+      font-weight: 100;
+      color: rgba(255, 255, 255, 0.6);
+      filter: blur(1px);
+    }
+
+    &:nth-child(3) {
+      margin-left: 1rem;
+      font-size: 1.7rem;
+      font-weight: 100;
+      color: rgba(255, 255, 255, 0.4);
+      filter: blur(1.5px);
+    }
+  }
+}