diff --git a/ServerManagement/Components/Controls/ToDoItemComponent.razor b/ServerManagement/Components/Controls/ToDoItemComponent.razor
new file mode 100644
index 0000000..264488d
--- /dev/null
+++ b/ServerManagement/Components/Controls/ToDoItemComponent.razor
@@ -0,0 +1,32 @@
+@if (Item != null)
+{
+  <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 ToDoItem? Item { get; set; }
+
+}
\ No newline at end of file
diff --git a/ServerManagement/Components/Controls/ToDoItemListComponent.razor b/ServerManagement/Components/Controls/ToDoItemListComponent.razor
index 7a5b237..67c7732 100644
--- a/ServerManagement/Components/Controls/ToDoItemListComponent.razor
+++ b/ServerManagement/Components/Controls/ToDoItemListComponent.razor
@@ -2,29 +2,7 @@
 {
   @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>
+    <ToDoItemComponent Item="item"></ToDoItemComponent>
   }
 }