diff --git a/ServerManagement/Components/Controls/ToDoItemListComponent.razor b/ServerManagement/Components/Controls/ToDoItemListComponent.razor
new file mode 100644
index 0000000..7a5b237
--- /dev/null
+++ b/ServerManagement/Components/Controls/ToDoItemListComponent.razor
@@ -0,0 +1,34 @@
+@if (Items != null)
+{
+  @foreach (var item in Items)
+  {
+    <li @key="item.Id">
+      <div class="row mb-2">
+        <div class="col-1" style="width: 30px;">
+          <input type="checkbox" class="form-check-input" style="vertical-align: middle" @bind-value="item.IsCompleted" checked="@item.IsCompleted"/>
+        </div>
+        <div class="col">
+          @if (item.IsCompleted)
+          {
+            <input type="text" class="form-control border-0 text-decoration-line-through" style="vertical-align: middle" @bind-value="item.Name" disabled/>
+          }
+          else
+          {
+            <input type="text" class="form-control border-0" style="vertical-align: middle" @bind-value="item.Name"/>
+          }
+        </div>
+        <div class="col">
+          @if (item.IsCompleted)
+          {
+            <text>Completed at: @item.DateCompleted.ToLongDateString()</text>
+          }
+        </div>
+      </div>
+    </li>
+  }
+}
+
+@code {
+  [Parameter]
+  public List<ToDoItem>? Items { get; set; }
+}
\ No newline at end of file
diff --git a/ServerManagement/Components/Pages/ToDoList.razor b/ServerManagement/Components/Pages/ToDoList.razor
index abe3697..a41e2c4 100644
--- a/ServerManagement/Components/Pages/ToDoList.razor
+++ b/ServerManagement/Components/Pages/ToDoList.razor
@@ -10,32 +10,7 @@
 @if (items != null && items.Count > 0)
 {
   <ul class="list-unstyled">
-    @foreach (var item in items)
-    {
-      <li @key="item.Id">
-        <div class="row mb-2">
-          <div class="col-1" style="width: 30px;">
-            <input type="checkbox" class="form-check-input" style="vertical-align: middle" @bind-value="item.IsCompleted" checked="@item.IsCompleted"/>
-          </div>
-          <div class="col">
-            @if (item.IsCompleted)
-            {
-              <input type="text" class="form-control border-0 text-decoration-line-through" style="vertical-align: middle" @bind-value="item.Name" disabled/>
-            }
-            else
-            {
-              <input type="text" class="form-control border-0" style="vertical-align: middle" @bind-value="item.Name"/>
-            }
-          </div>
-          <div class="col">
-            @if (item.IsCompleted)
-            {
-              <text>Completed at: @item.DateCompleted.ToLongDateString()</text>
-            }
-          </div>
-        </div>
-      </li>
-    }
+    <ToDoItemListComponent Items="items"></ToDoItemListComponent>
   </ul>
 }