diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index 064809b..c5c2ac4 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -11,7 +11,7 @@ def edit_todo_item
     @todo_item.update(todo_item_params)
   end
 
-  def reset_todo_items
+  def reset_todo_item
     Todo.update_all(checked: false)
   end
 
diff --git a/app/javascript/components/TodoList/index.tsx b/app/javascript/components/TodoList/index.tsx
index 60f7fd3..911107b 100644
--- a/app/javascript/components/TodoList/index.tsx
+++ b/app/javascript/components/TodoList/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import { Container, ListGroup, Form } from "react-bootstrap";
+import React, { useEffect, useState } from "react";
+import { Container, ListGroup, Form, ProgressBar } from "react-bootstrap";
 import { ResetButton } from "./uiComponent";
 import axios from "axios";
 
@@ -7,6 +7,7 @@ type TodoItem = {
   id: number;
   title: string;
   checked: boolean;
+  created_at: Date;
 };
 
 type Props = {
@@ -14,6 +15,8 @@ type Props = {
 };
 
 const TodoList: React.FC<Props> = ({ todoItems }) => {
+  const [todoItemsState, setTodoItemsState] = useState(todoItems)
+  const [progressBar, setProgressBar] = useState(0);
   useEffect(() => {
     const token = document.querySelector(
       "[name=csrf-token]"
@@ -23,23 +26,41 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
 
   const checkBoxOnCheck = (
     e: React.ChangeEvent<HTMLInputElement>,
-    todoItemId: number
+    todoItemId: number,
   ): void => {
     axios.post("/todo", {
       id: todoItemId,
       checked: e.target.checked,
     });
+    const newState = todoItemsState.map(obj => {
+      if(obj.id == todoItemId){
+        return {...obj, checked: !obj.checked}
+      }else{
+        return obj;
+      }
+    })
+    setTodoItemsState(newState);
   };
 
   const resetButtonOnClick = (): void => {
     axios.post("/reset").then(() => location.reload());
   };
 
+  useEffect(() => {
+    const progressItem = [];
+    todoItemsState.map(item => {
+      if(item.checked){
+        progressItem.push(item)
+      }
+    })
+    setProgressBar((progressItem.length/todoItemsState.length)*100)
+  }, [todoItemsState])
+
   return (
     <Container>
       <h3>2022 Wish List</h3>
       <ListGroup>
-        {todoItems.map((todo) => (
+        {todoItemsState.map((todo) => (
           <ListGroup.Item key={todo.id}>
             <Form.Check
               type="checkbox"
@@ -49,6 +70,8 @@ const TodoList: React.FC<Props> = ({ todoItems }) => {
             />
           </ListGroup.Item>
         ))}
+        <br />
+        <ProgressBar variant="success" now={progressBar}/>
         <ResetButton onClick={resetButtonOnClick}>Reset</ResetButton>
       </ListGroup>
     </Container>
diff --git a/db/schema.rb b/db/schema.rb
index c6bc617..6b73feb 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2022_03_05_192904) do
+ActiveRecord::Schema.define(version: 2022_03_05_213159) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"