diff --git a/src/client.imba b/src/client.imba
index f02e1cb..11b8db8 100644
--- a/src/client.imba
+++ b/src/client.imba
@@ -1,4 +1,5 @@
 import {vbox, completed} from './styles/index.css'
+import { List } from './item-list'
 
 var store = {
 	title: ""
@@ -15,16 +16,11 @@ tag App
 		data:items.push(title: data:title)
 		data:title = ""
 
-	def completeItem item
-		console.log "clicked,{item:completed}"
-		item:completed = !item:completed
-		
 	def render
 		<self.{vbox}>
 			<header>
 				<input[data:title] placeholder="New..." :keyup.enter.addItem>
 				<button :tap.addItem> 'Add item'
-			<ul> for item in data:items
-				<li .{item:completed and completed} :tap.completeItem(item)> item:title
+			<List list=data:items>
 
 Imba.mount <App[store]>
diff --git a/src/item-list.imba b/src/item-list.imba
new file mode 100644
index 0000000..aec7c98
--- /dev/null
+++ b/src/item-list.imba
@@ -0,0 +1,11 @@
+export tag List
+	prop list
+
+       def completeItem item
+               console.log "clicked,{item:completed}"
+               item:completed = !item:completed
+
+	def render
+		<self>
+			<ul> for item in list
+					<li .{item:completed} :tap.completeItem(item)> item:title