diff --git a/src/App.jsx b/src/App.jsx
index 85ffc61..ebc1101 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,21 @@
+// Create a TodoListItem component.
+// Props: children = name; isComplete: boolean
+// Checkbox: checked if complete
+// Label (children value)
+
+import { TodoListItem } from "./TodoListItem"
+
 function App() {
-  return "Hello World"
+  return (
+    <div>
+      <h1>Todo List</h1>
+      <ul>
+        <TodoListItem isComplete={true}>Hardik Pandya</TodoListItem>
+        <TodoListItem isComplete={false}>Virat Kohli</TodoListItem>
+        <TodoListItem isComplete={true}>Rohit Sharma</TodoListItem>
+      </ul>
+    </div>
+  )
 }
 
 export default App
diff --git a/src/TodoListItem.jsx b/src/TodoListItem.jsx
new file mode 100644
index 0000000..297565e
--- /dev/null
+++ b/src/TodoListItem.jsx
@@ -0,0 +1,10 @@
+export function TodoListItem({ children, isComplete }) {
+  const bgColor = isComplete ? "green" : "red"
+  const width = "50%"
+  return (
+    <li style={{ backgroundColor: bgColor, width: width }}>
+      <input type="checkbox" checked={isComplete} />
+      <label for="list">{children}</label>
+    </li>
+  )
+}