diff --git a/src/components/TodoItems.vue b/src/components/TodoItems.vue
new file mode 100644
index 0000000..200e2cc
--- /dev/null
+++ b/src/components/TodoItems.vue
@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <p>To do Item</p>
+    </div>
+</template>
+<script>
+export default {
+    name: "Todo Items",
+    props: ["todo"]
+}
+</script>
+
+<style scoped>
+.todo-item {
+    background-color: antiquewhite;
+    padding: 10px;
+    border-bottom: 1px #ccc dotted;
+}
+
+.is-complete {
+    text-decoration: line-through;
+}
+
+.del {
+    background-color: coral;
+    color: #fff;
+    border: none;
+    padding: 5px 9px;
+    border-radius: 50%;
+    cursor: pointer;
+    float: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Todos.vue b/src/components/Todos.vue
index 5e0c6f2..7018cb8 100644
--- a/src/components/Todos.vue
+++ b/src/components/Todos.vue
@@ -1,13 +1,17 @@
 <template>
 <div>
-    <div>
-</div>
+    <div v-bind:key="todo.id" v-for="todo in  todos"> </div>
+    <TodotItems v-bind:todo="todos"/>
 </div>    
 </template>
 
 <script>
+import TodoItems from './TodoItems.vue'
 export default {
     name: "Todos",
+    components: {
+        TodoItems
+    },
     props: ["todos"]
 }
 </script>