diff --git a/https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462 b/https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/https:/github.com/anhld1110/APPTODO-L-c-Anh-20167462
@@ -0,0 +1 @@
+
diff --git a/https:/github.com/anhld1110/Addtask.js b/https:/github.com/anhld1110/Addtask.js
new file mode 100644
index 0000000..c50a22c
--- /dev/null
+++ b/https:/github.com/anhld1110/Addtask.js
@@ -0,0 +1,68 @@
+import React from "react";
+
+class Addtask extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      title: '',
+      mieuta :'' 
+  }
+  this.handleChange = this.handleChange.bind(this)
+  this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  handleChange(event) {
+    var target = event.target;
+    var name = target.name;
+    var value = target.value;
+    this.setState(
+      {
+        [name]: value
+      }
+    )
+  }
+
+  handleSubmit(event) {
+
+    this.props.handleClickParent(this.state);
+    event.preventDefault();
+
+  }
+
+  render() {
+    return (
+      <div className="panel panel-danger">
+        <div className="panel-heading">
+          <h3 className="panel-title">Add Task</h3>
+        </div>
+        <div className="panel-body">
+          <form onSubmit={this.handleSubmit}>
+            <div className="form-group">
+              <label >Title</label>
+              <input 
+              type="text" 
+              className="form-control" 
+              name = {this.state.title}
+              onChange={this.handleChange}
+
+              />
+              <br />
+              <label >Description</label>
+              <textarea
+                name={this.state.mieuta}
+                className="form-control"
+                rows="5"
+                onChange={this.handleChange}
+              ></textarea>
+            </div>
+
+            <button type="submit"  className="btn btn-primary">
+              Save
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Addtask;
diff --git a/https:/github.com/anhld1110/Taskitem.js b/https:/github.com/anhld1110/Taskitem.js
new file mode 100644
index 0000000..346bfc9
--- /dev/null
+++ b/https:/github.com/anhld1110/Taskitem.js
@@ -0,0 +1,29 @@
+import React from "react";
+
+class Taskitem extends React.Component {
+
+  onDelete = ()=>{
+    this.props.onDelete(this.props.index);
+
+  }
+  render() {
+  var task = this.props.task;
+  var index = this.props.index;
+    return (
+        <tr>
+        <td>{index}</td>
+        <td>{task.title}</td>
+        <td>{task.mieuta}</td>
+        <td>
+        <button 
+        type="button" 
+        className="btn btn-danger"
+        onClick = {this.onDelete}
+        >Delete Task</button>
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default Taskitem;
diff --git a/https:/github.com/anhld1110/Tasklist.js b/https:/github.com/anhld1110/Tasklist.js
new file mode 100644
index 0000000..16fb655
--- /dev/null
+++ b/https:/github.com/anhld1110/Tasklist.js
@@ -0,0 +1,42 @@
+import React from "react";
+import Taskitem from "./Taskitem";
+class Tasklist extends React.Component {
+  onDelete = ()=>{
+    this.props.onDelete(this.props.index);
+
+  }
+  render() {
+    var Task = this.props.Task;
+    var element =Task.map((task,index)=>{
+      return <Taskitem 
+      key={task.id} 
+      index={index} 
+      task ={task}
+      onDelete = {this.props.onDelete}
+      ></Taskitem>
+    });
+
+    return (
+      <div className="panel panel-danger">
+        <div className="panel-heading">
+          <h3 className="panel-title">Task List</h3>
+        </div>
+        <div className="panel-body">
+          <table className="table table-bordered table-hover">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Title</th>
+                <th>Description</th>
+                <th>Tools</th>
+              </tr>
+            </thead>
+            <tbody>{element}</tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Tasklist;
diff --git a/https:/github.com/anhld1110/TodoTile.js b/https:/github.com/anhld1110/TodoTile.js
new file mode 100644
index 0000000..a2491e7
--- /dev/null
+++ b/https:/github.com/anhld1110/TodoTile.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+class TodoTitle extends React.Component {
+  render() {
+    return <h1 className="text-center">To Do App</h1>;
+  }
+}
+
+export default TodoTitle;
diff --git a/public/index.html b/public/index.html
index aa069f2..3ac10b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,30 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
+  work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
+      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
+      crossorigin="anonymous"
+    />
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
+@@ -39,5 +51,11 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/Addtask.js b/src/Addtask.js
new file mode 100644
index 0000000..c50a22c
--- /dev/null
+++ b/src/Addtask.js
@@ -0,0 +1,68 @@
+import React from "react";
+
+class Addtask extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      title: '',
+      mieuta :'' 
+  }
+  this.handleChange = this.handleChange.bind(this)
+  this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  handleChange(event) {
+    var target = event.target;
+    var name = target.name;
+    var value = target.value;
+    this.setState(
+      {
+        [name]: value
+      }
+    )
+  }
+
+  handleSubmit(event) {
+
+    this.props.handleClickParent(this.state);
+    event.preventDefault();
+
+  }
+
+  render() {
+    return (
+      <div className="panel panel-danger">
+        <div className="panel-heading">
+          <h3 className="panel-title">Add Task</h3>
+        </div>
+        <div className="panel-body">
+          <form onSubmit={this.handleSubmit}>
+            <div className="form-group">
+              <label >Title</label>
+              <input 
+              type="text" 
+              className="form-control" 
+              name = {this.state.title}
+              onChange={this.handleChange}
+
+              />
+              <br />
+              <label >Description</label>
+              <textarea
+                name={this.state.mieuta}
+                className="form-control"
+                rows="5"
+                onChange={this.handleChange}
+              ></textarea>
+            </div>
+
+            <button type="submit"  className="btn btn-primary">
+              Save
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Addtask;
diff --git a/src/App.css b/src/App.css
index 4200254..77fcc06 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,38 @@
 .App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {.App {
   width: 800px;
   margin: 20px auto;
   display: flex;
@@ -14,11 +48,15 @@
   margin: 8px 4px;
   padding-bottom: 16px;
   border-bottom: 1px solid #aaa;
+  text-align: center;
 }
 
 .App-form > :nth-child(1) {
   display: flex;
   flex-direction: column;
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
 }
 
 .App-form > :nth-child(1) > * {
@@ -26,6 +64,10 @@
   border: 1px solid #aaa;
   transition: all .3s;
   border-radius: 2px;
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-form > :nth-child(1) > *:focus {
@@ -47,9 +89,16 @@
 }
 
 .App-form > :nth-child(2) {
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
 
 .App-form button {
@@ -60,8 +109,22 @@
   margin-top: 8px;
   cursor: pointer;
   box-shadow: 0px 2px 2px 0px rgba(0,0,0,.1);
+.App-link {
+  color: #61dafb;
 }
 
 .App-form button:hover {
   box-shadow: 0px 2px 2px 2px rgba(0,0,0,.1);
-}
\ No newline at end of file
+} 
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+    transform: rotate(360deg);
+  }
+}
+}
diff --git a/src/App.js b/src/App.js
index 93d4b5e..a421f87 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,94 @@
 import React, { Component } from 'react';
 import ToDoListItem from "./ToDoListItem.js"
 import './App.css';
+import React from "react";
+import Addtask from "./components/Addtask";
+import Tasklist from "./components/Tasklist";
+import TodoTitle from "./components/TodoTile"
+import "./App.css";
 
 class App extends Component {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      Task: [
+        {
+          id   :this.createGuid(),
+          title: "寝る",
+          mieuta: "寝る前に漫画を読む"
+        },
+        {
+          id    :this.createGuid(),
+          title: "ITSSを学習",
+          mieuta: "平田先生の宿題をする"
+        },
+        {
+          id   :this.createGuid(),
+          title: "食堂でご飯を食べる",
+          mieuta: "トランさんと一緒に食べる"
+        },
+        {
+          id   :this.createGuid(),
+          title: "泳ぎに行きます",
+          mieuta: "午前9時にプールで泳ぎに行く"
+        }
+      ]
+    };
+
+  }
+  createGuid() {
+
+    function s4() {
+       return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    }
+    return s4() + s4() + s4() + s4(); // Example => 'e014026082e6237b'
+  }
+  callbackHandlerFunction = (data) => {
+    var Task =this.state.Task;
+    data.id = this.createGuid();
+    Task.push(data);
+    this.setState({
+      Task : Task
+    })
+
+
+}
+onDelete =(index) =>{
+  var Task = this.state.Task;
+  Task.splice(index,1);
+  this.setState({
+    Task : Task
+  });
+
+}
   render() {
+    var Task = this.state.Task;
     return (
       <div className="App">
         <div>
           <ToDoListItem
           />
+      <div className="container">
+        <TodoTitle></TodoTitle>
+        <br />
+        <div className="row">
+          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+            <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
+              <Addtask handleClickParent={this.callbackHandlerFunction}></Addtask>
+            </div>
+            <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
+              <Tasklist 
+              Task={Task}
+              onDelete = {this.onDelete}
+              ></Tasklist>
+            </div>
+
+          </div>
         </div>
       </div>
     );
   }
 }
 
-export default App;
\ No newline at end of file
+export default App; 
diff --git a/src/components b/src/components
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/components
@@ -0,0 +1 @@
+