diff --git a/public/index.html b/public/index.html
index e5b37b15c..4094d1912 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 4661df052..000000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.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: #233553;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #97ca3f;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 952c8f1fd..000000000
--- a/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './platzi.webp';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edita el archivo <code>src/App.js</code> y guarda para recargar.
-        </p>
-        <a
-          className="App-link"
-          href="https://platzi.com/reactjs"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/Icons/CompleteIcon/index.css b/src/Icons/CompleteIcon/index.css
new file mode 100644
index 000000000..7962e22de
--- /dev/null
+++ b/src/Icons/CompleteIcon/index.css
@@ -0,0 +1,9 @@
+.iconCheck {
+  /* border-style: solid; */
+  width: 20%;
+  height: -webkit-fill-available;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor:pointer;
+}
diff --git a/src/Icons/CompleteIcon/index.js b/src/Icons/CompleteIcon/index.js
new file mode 100644
index 000000000..962954c14
--- /dev/null
+++ b/src/Icons/CompleteIcon/index.js
@@ -0,0 +1,13 @@
+import "./index.css";
+
+const CompleteIcon = ({onCompleted, completed}) => {
+  return(
+    <span className="iconCheck">
+      <svg onClick={ onCompleted } xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill={ `${ completed ? 'red' : 'blue'}`} className={"bi bi-check2"} viewBox="0 0 16 16">
+        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+      </svg>
+    </span>
+  );
+}
+
+export { CompleteIcon }
diff --git a/src/Icons/DeleteIcon/index.css b/src/Icons/DeleteIcon/index.css
new file mode 100644
index 000000000..dc50cb100
--- /dev/null
+++ b/src/Icons/DeleteIcon/index.css
@@ -0,0 +1,17 @@
+.closeButton {
+  position: relative;
+  top: -50%;
+  right: 0px;
+  /* border-style: solid; */
+  
+  height: 50px;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  background-color: white;
+  cursor: pointer;
+  border-radius: 50%;
+  border-style: solid;
+}
\ No newline at end of file
diff --git a/src/Icons/DeleteIcon/index.js b/src/Icons/DeleteIcon/index.js
new file mode 100644
index 000000000..976cadf32
--- /dev/null
+++ b/src/Icons/DeleteIcon/index.js
@@ -0,0 +1,13 @@
+import './index.css'
+
+const DeleteIcon = ({onDelete}) => {
+  return(
+    <span className='closeButton'> 
+      <svg onClick={ onDelete } xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className={"bi bi-eraser"} viewBox="0 0 16 16">
+        <path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z"/>
+      </svg>
+    </span>
+  );
+}
+
+export {DeleteIcon}
diff --git a/src/Icons/iconManager/index.css b/src/Icons/iconManager/index.css
new file mode 100644
index 000000000..7962e22de
--- /dev/null
+++ b/src/Icons/iconManager/index.css
@@ -0,0 +1,9 @@
+.iconCheck {
+  /* border-style: solid; */
+  width: 20%;
+  height: -webkit-fill-available;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor:pointer;
+}
diff --git a/src/Icons/iconManager/index.js b/src/Icons/iconManager/index.js
new file mode 100644
index 000000000..962954c14
--- /dev/null
+++ b/src/Icons/iconManager/index.js
@@ -0,0 +1,13 @@
+import "./index.css";
+
+const CompleteIcon = ({onCompleted, completed}) => {
+  return(
+    <span className="iconCheck">
+      <svg onClick={ onCompleted } xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill={ `${ completed ? 'red' : 'blue'}`} className={"bi bi-check2"} viewBox="0 0 16 16">
+        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+      </svg>
+    </span>
+  );
+}
+
+export { CompleteIcon }
diff --git a/src/Modal/index.css b/src/Modal/index.css
new file mode 100644
index 000000000..e977e5ca8
--- /dev/null
+++ b/src/Modal/index.css
@@ -0,0 +1,14 @@
+.Modal{
+    padding: 40px;
+    background-color: blue;
+    color: white;
+    position: fixed;
+
+    top:0;
+    z-index:1;
+    right:0;
+
+    width: 30vw;
+    height: 100vh;;
+
+}
\ No newline at end of file
diff --git a/src/Modal/index.js b/src/Modal/index.js
new file mode 100644
index 000000000..ed81d8a7b
--- /dev/null
+++ b/src/Modal/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import './index.css'
+
+
+const Modal =( {children} )=> {
+    return ReactDOM.createPortal(
+        <div className="Modal">
+            {children}
+        </div>,
+        
+        document.getElementById('modal')
+    );
+}
+
+export { Modal }
\ No newline at end of file
diff --git a/src/components/App/AppUI.js b/src/components/App/AppUI.js
new file mode 100644
index 000000000..a3fff7e6b
--- /dev/null
+++ b/src/components/App/AppUI.js
@@ -0,0 +1,48 @@
+import { TodoCounter } from '../TodoCounter';
+import { TodoSearch } from '../TodoSearch';
+import { TodoList } from '../TodoList';
+import { TodoItem } from '../TodoItem';
+import { CreateTodo } from '../CreateTodo';
+import { LoadingsTodo } from '../LoadingsTodos';
+import { ErrorsTodo } from '../ErrorsTodos';
+import { EmptyTodos } from '../EmptysTodos';
+import { TodoContext } from '../TodoContext';
+import { Modal } from '../../Modal';
+import React from 'react';
+import { TodoForm } from '../TodoForm';
+
+const AppUI = ( )=>{
+    //Esto es utilizado para pasar los props de una manera más limpia a la aplicación.
+    const { loading, searchedTodo, error, toggleToDo, deleteTodo, openModal } = React.useContext(TodoContext);  
+
+    return ( 
+        <div className='App'>
+          
+          <div className='contenedorPrincipal'>
+        
+            <TodoCounter />
+            <TodoSearch />
+          
+            <TodoList>
+              { loading ? <LoadingsTodo/>  : "" }
+              { error ? <ErrorsTodo/>  : "" }
+              { !loading && searchedTodo.length === 0 ? <EmptyTodos/> : "" }
+              { searchedTodo.map( todo => (  
+                  <TodoItem  mensaje = { todo.text } key = { todo.text } completed ={todo.Completed}
+                    onCompleted = { ()=>{ toggleToDo(todo.text) }}
+                    onDelete = { () => { deleteTodo(todo.text); }} 
+                  /> 
+              ))}
+            </TodoList>
+                    
+            <CreateTodo/>
+
+          </div>
+
+          { openModal ? <Modal> <TodoForm></TodoForm>  </Modal>: "" }
+
+        </div>
+    );
+}
+
+export { AppUI }
diff --git a/src/components/App/index.css b/src/components/App/index.css
new file mode 100644
index 000000000..e41207475
--- /dev/null
+++ b/src/components/App/index.css
@@ -0,0 +1,79 @@
+.App {
+  
+  text-align: center; 
+  display: flex;
+  flex-direction: row;  
+  align-items: center;
+  justify-content: center;
+  
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.App-header {
+  background-color: #233553;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #97ca3f;
+}
+
+
+
+.contenedorInferior{
+
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: flex-end;
+  /* border-style: solid; */
+  position: relative;
+  bottom: 100px;
+
+}
+
+.contenedorPrincipal{
+
+  min-width: 600px;
+  /* border-style: solid; */
+  padding: 50px 100px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  background-color: rgb(243,244,245);
+  border-radius: 10px;
+  gap: 50px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  border-style: solid;
+  border-color: white;
+  border-width: 2px;
+  
+}
+
+
diff --git a/src/components/App/index.js b/src/components/App/index.js
new file mode 100644
index 000000000..3b8b634e9
--- /dev/null
+++ b/src/components/App/index.js
@@ -0,0 +1,31 @@
+import './index.css';
+import { AppUI } from './AppUI';
+import { TodoProvider } from '../TodoContext';
+
+
+/**
+ *
+ * 
+ * 
+const defaultTodos = [
+  { text: ' cebolla', Completed: true },
+  { text: 'tomar el curso de React', Completed: false },
+  { text: 'Llorar con la llorona', Completed: false },
+  { text: 'Cortar cebolla', Completed: false },
+  { text: 'LALALALA ', Completed: false },
+  { text: 'Usar estados derivados ', Completed: true }
+]
+
+localStorage.setItem(itemName, JSON.stringify(defaultTodos));
+
+*/
+
+const App = () =>{
+  return(
+    <TodoProvider>
+      <AppUI />
+    </TodoProvider>
+  )
+}
+
+export default App;
diff --git a/src/components/CreateTodo/index.css b/src/components/CreateTodo/index.css
new file mode 100644
index 000000000..7b90be12f
--- /dev/null
+++ b/src/components/CreateTodo/index.css
@@ -0,0 +1,25 @@
+.buttonAgregar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    font-size: 50px;
+    
+    position: absolute;
+    right: 50px;
+    bottom:50px;
+    background-color: rgb(130,216,246);
+    color: white;
+    border-style: none;
+    cursor: pointer;
+    
+    
+    transform: rotate(0deg);
+    transition: 0.3s ease;
+    z-index: 2
+    
+}
+
+.buttonAgregar:hover {
+    transform: rotate(224deg);
+    
+}
\ No newline at end of file
diff --git a/src/components/CreateTodo/index.js b/src/components/CreateTodo/index.js
new file mode 100644
index 000000000..aed28c7f8
--- /dev/null
+++ b/src/components/CreateTodo/index.js
@@ -0,0 +1,19 @@
+import './index.css';
+import React from 'react';
+import { TodoContext } from '../TodoContext';
+
+const CreateTodo = () => {
+  const { setOpenModal, openModal } = React.useContext(TodoContext);  
+
+  return(
+   
+    <button className='buttonAgregar' onClick={() => { setOpenModal(!openModal)}}>
+      +
+   </button>
+
+  );
+}
+
+
+
+export { CreateTodo };
diff --git a/src/components/EmptysTodos/index.css b/src/components/EmptysTodos/index.css
new file mode 100644
index 000000000..cdd2c7d2c
--- /dev/null
+++ b/src/components/EmptysTodos/index.css
@@ -0,0 +1,23 @@
+.buttonAgregar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    font-size: 50px;
+    
+    position: absolute;
+    right: 50px;
+    bottom:50px;
+    background-color: rgb(130,216,246);
+    color: white;
+    border-style: none;
+    cursor: pointer;
+    
+    
+    transform: rotate(0deg);
+    transition: 0.3s ease;
+    
+}
+
+.buttonAgregar:hover {
+    transform: rotate(224deg);
+}
\ No newline at end of file
diff --git a/src/components/EmptysTodos/index.js b/src/components/EmptysTodos/index.js
new file mode 100644
index 000000000..ced9d67a9
--- /dev/null
+++ b/src/components/EmptysTodos/index.js
@@ -0,0 +1,11 @@
+import './index.css';
+
+const EmptyTodos = () => {
+  return(
+   
+    <p>Crea tu primer TODO!</p>  
+
+  );
+}
+
+export { EmptyTodos };
diff --git a/src/components/ErrorsTodos/index.css b/src/components/ErrorsTodos/index.css
new file mode 100644
index 000000000..cdd2c7d2c
--- /dev/null
+++ b/src/components/ErrorsTodos/index.css
@@ -0,0 +1,23 @@
+.buttonAgregar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    font-size: 50px;
+    
+    position: absolute;
+    right: 50px;
+    bottom:50px;
+    background-color: rgb(130,216,246);
+    color: white;
+    border-style: none;
+    cursor: pointer;
+    
+    
+    transform: rotate(0deg);
+    transition: 0.3s ease;
+    
+}
+
+.buttonAgregar:hover {
+    transform: rotate(224deg);
+}
\ No newline at end of file
diff --git a/src/components/ErrorsTodos/index.js b/src/components/ErrorsTodos/index.js
new file mode 100644
index 000000000..bb85b4543
--- /dev/null
+++ b/src/components/ErrorsTodos/index.js
@@ -0,0 +1,12 @@
+import './index.css';
+
+const ErrorsTodo = () => {
+  return(
+    <p>Hubo un error en el sistema...</p>
+
+  );
+}
+
+
+
+export { ErrorsTodo };
diff --git a/src/components/LoadingsTodos/index.css b/src/components/LoadingsTodos/index.css
new file mode 100644
index 000000000..4a0ba3929
--- /dev/null
+++ b/src/components/LoadingsTodos/index.css
@@ -0,0 +1,20 @@
+.spinner {
+    border: 7px solid rgba(57, 0, 200, 1);
+    border-left-color: transparent;
+    border-radius: 50%;
+
+    width: 50px;
+    height: 50px;
+
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/src/components/LoadingsTodos/index.js b/src/components/LoadingsTodos/index.js
new file mode 100644
index 000000000..145856fdb
--- /dev/null
+++ b/src/components/LoadingsTodos/index.js
@@ -0,0 +1,8 @@
+import './index.css';
+
+const LoadingsTodo = () => {
+  return(
+    <div className={'spinner'}></div>
+  );
+}
+export { LoadingsTodo };
diff --git a/src/components/TodoContext/index.js b/src/components/TodoContext/index.js
new file mode 100644
index 000000000..ab2ede7dc
--- /dev/null
+++ b/src/components/TodoContext/index.js
@@ -0,0 +1,84 @@
+import React, {useState}from "react";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
+const TodoContext = React.createContext();
+
+
+const TodoProvider =( {children} )=> {
+    
+    const [ searchValue, setSearchValue ] = useState('');
+    const { item:todo, saveItems:saveTodos, loading, error } = useLocalStorage("TODO_V1", [] );
+    const [ openModal, setOpenModal ] = useState(false);
+    
+    const completedTodo = todo.filter( todo => !!todo.Completed ).length;
+    const totalToDo = todo.length;
+    
+    // estados derivados
+    const searchedTodo = todo.filter( (todo) => {
+
+        const todoText = todo.text.toLowerCase();
+        const searchText = searchValue.toLowerCase();
+        return todoText.includes(searchText);
+
+    });
+
+    const toggleToDo = (text) => {
+    
+        // copiar un array dentro de otro
+        const newTodos = [...todo];
+        // buscar el indice en donde aparece el texto
+        const todoIndex = newTodos.findIndex(
+        (todo) => todo.text === text
+        );
+        // editamos solamente el objeto por indice encontrado
+        if( newTodos[todoIndex].Completed ===  true ){
+        newTodos[todoIndex].Completed = false;
+        }else{
+        newTodos[todoIndex].Completed = true;
+        }
+        // inyectamos todo el nuevo array
+        
+        saveTodos(newTodos);
+    }
+
+    const deleteTodo = (text) => {
+    
+        // copiar un array dentro de otro
+        const newTodos = [...todo];
+        // buscar el indice en donde aparece el texto
+        const todoIndex = newTodos.findIndex(
+        (todo) => todo.text === text
+        );
+        // editamos solamente el objeto por indice encontrado
+        newTodos.splice(todoIndex, 1);
+        // inyectamos todo el nuevo array
+        
+        saveTodos(newTodos);
+    }
+    const addTodo = (text) => {
+        
+        
+        // copiar un array dentro de otro
+        const newTodos = [...todo];
+        // buscar el indice en donde aparece el texto
+
+        let data =  { text: text, Completed: false };
+        
+        newTodos.push(data)
+
+        saveTodos(newTodos);
+    }
+
+    return(
+        
+        <TodoContext.Provider value={{ 
+            totalToDo, completedTodo, searchValue, 
+            searchedTodo, loading, error, openModal, 
+            setOpenModal, setSearchValue, toggleToDo, 
+            deleteTodo, addTodo
+        } }>
+            {children}
+        </TodoContext.Provider>
+    )
+}
+
+export { TodoContext, TodoProvider }
\ No newline at end of file
diff --git a/src/components/TodoCounter/index.css b/src/components/TodoCounter/index.css
new file mode 100644
index 000000000..d777e9a16
--- /dev/null
+++ b/src/components/TodoCounter/index.css
@@ -0,0 +1,4 @@
+.tittleTodoCounter {
+    font-size: 40px;
+    font-weight: lighter;
+}
\ No newline at end of file
diff --git a/src/components/TodoCounter/index.js b/src/components/TodoCounter/index.js
new file mode 100644
index 000000000..f214a8859
--- /dev/null
+++ b/src/components/TodoCounter/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { TodoContext } from '../TodoContext';
+import './index.css';
+
+const TodoCounter = ( ) => {
+
+  const { totalToDo, completedTodo } = React.useContext(TodoContext);  
+
+  return(
+    <h1 className='tittleTodoCounter'>
+      Has completado {completedTodo} de {totalToDo} TODOS
+    </h1>
+  );
+}
+
+export { TodoCounter };
diff --git a/src/components/TodoForm/index.css b/src/components/TodoForm/index.css
new file mode 100644
index 000000000..881d08641
--- /dev/null
+++ b/src/components/TodoForm/index.css
@@ -0,0 +1,30 @@
+.formularioTodo {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.contenedorInf_formulario {
+
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    justify-content: flex-end;
+
+}
+
+.textArea_formularioTodo{
+    height: 200px;
+}
+
+.titulos_formularioTodo{
+    font-size: 30px;
+}
+
+.btn_formularioTodo{
+
+    height: 50px;
+    width: 200px;
+    cursor: pointer;
+
+}
\ No newline at end of file
diff --git a/src/components/TodoForm/index.js b/src/components/TodoForm/index.js
new file mode 100644
index 000000000..d49f5c8a2
--- /dev/null
+++ b/src/components/TodoForm/index.js
@@ -0,0 +1,41 @@
+import { TodoContext } from '../TodoContext';
+import './index.css';
+import React from 'react';
+
+
+
+const TodoForm = (  ) => {
+    const { setOpenModal, addTodo } = React.useContext(TodoContext);
+    const [ value, setValue ] = React.useState('');
+
+    const onSubmit = (event) => {
+        event.preventDefault();
+    }
+
+    const onCancel = (event) => {
+        setOpenModal(false)
+    }
+
+    const onSubmitTodo = () =>{
+        addTodo(value);
+    }
+
+
+
+    return (
+        <form className='formularioTodo' onSubmit={ onSubmit }>
+            
+            <label className='titulos_formularioTodo'> Escribe un nuevo Todo </label>
+            <textarea onChange={(Event) => Event(setValue(Event.target.value))} placeholder='Cortar cebolla para el almuerzo' className='textArea_formularioTodo'/> 
+            
+            <div className='contenedorInf_formulario'> 
+                <button className='btn_formularioTodo' onClick={ onCancel }>Cancelar</button>
+                <button className='btn_formularioTodo' onClick={ onSubmitTodo }>Crear Todo</button>
+            </div>
+        
+        </form>
+        
+    );
+}
+
+export { TodoForm };
diff --git a/src/components/TodoItem/index.css b/src/components/TodoItem/index.css
new file mode 100644
index 000000000..6d803e87e
--- /dev/null
+++ b/src/components/TodoItem/index.css
@@ -0,0 +1,17 @@
+.TodoItem {
+    display: flex;
+    /* border-style: solid; */
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    min-height: 140px;
+    width: 100%;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    
+}
+
+.taskName-completed {
+    text-decoration: line-through;
+}
\ No newline at end of file
diff --git a/src/components/TodoItem/index.js b/src/components/TodoItem/index.js
new file mode 100644
index 000000000..27a49a8b1
--- /dev/null
+++ b/src/components/TodoItem/index.js
@@ -0,0 +1,19 @@
+import './index.css';
+import { CompleteIcon } from '../../Icons/iconManager';
+import { DeleteIcon } from '../../Icons/DeleteIcon';
+
+const TodoItem = ( {mensaje, completed, onCompleted, onDelete} ) => {
+  return (
+    <li className='TodoItem'>
+
+      <CompleteIcon className='iconCheck' onCompleted = {onCompleted} completed={completed}/>
+      
+      <p className={`taskName ${ completed ? 'taskName-completed' : ''}`}>{mensaje} </p>
+        
+      <DeleteIcon className='closeButton' onDelete={onDelete}/>
+
+    </li>
+  );
+}
+
+export { TodoItem };
diff --git a/src/components/TodoList/index.css b/src/components/TodoList/index.css
new file mode 100644
index 000000000..f098c81e8
--- /dev/null
+++ b/src/components/TodoList/index.css
@@ -0,0 +1,16 @@
+.TodoList {
+    /* border-style: solid; */
+    display: flex;
+    flex-direction: column;
+    
+    align-items: center;
+    
+    padding: 30px;
+    height: 50vh;
+    width: 100%;
+    overflow: auto;
+    gap: 40px;  
+
+    
+    
+}
\ No newline at end of file
diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js
new file mode 100644
index 000000000..2606e0d68
--- /dev/null
+++ b/src/components/TodoList/index.js
@@ -0,0 +1,11 @@
+import './index.css'
+
+const TodoList = ( {children} ) => {
+  return(
+    <ul className='TodoList'>
+      {children}
+    </ul>
+  );
+}
+
+export { TodoList };
diff --git a/src/components/TodoSearch/index.css b/src/components/TodoSearch/index.css
new file mode 100644
index 000000000..99fe24423
--- /dev/null
+++ b/src/components/TodoSearch/index.css
@@ -0,0 +1,5 @@
+.inputSearch {
+    
+    width: 80%;
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/src/components/TodoSearch/index.js b/src/components/TodoSearch/index.js
new file mode 100644
index 000000000..72f2ae682
--- /dev/null
+++ b/src/components/TodoSearch/index.js
@@ -0,0 +1,20 @@
+import { TodoContext } from '../TodoContext';
+import './index.css'
+import React from 'react';
+
+const TodoSearch = ( ) => {
+  const { searchValue, setSearchValue } = React.useContext(TodoContext);  
+
+
+  return(
+    <input 
+      className='inputSearch' 
+      placeholder='Cortar Cebolla' 
+      onChange={ (Event) => { setSearchValue( Event.target.value ) } } 
+      value ={ searchValue }
+    />
+  );
+
+}
+
+export { TodoSearch };
diff --git a/src/hooks/useLocalStorage/index.js b/src/hooks/useLocalStorage/index.js
new file mode 100644
index 000000000..c205898c4
--- /dev/null
+++ b/src/hooks/useLocalStorage/index.js
@@ -0,0 +1,65 @@
+import React from 'react';
+/**
+ * 
+ * @param { Nombre de el valor en localStorage } itemName 
+ * @param { Valor inicial del aplicativo } initialValue 
+ * @returns 
+ * 
+ * Custon Hook, esto lo que hacce es que gurda en el localstorage, los cambios en el aplicativo
+ * 
+ */
+
+const useLocalStorage = ( itemName, initialValue ) => {
+
+  const [item, setItems] = React.useState(initialValue);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(false);
+
+  // Aqui se observa la funcionalidad del useEfect
+  // se implemento un loading
+
+  React.useState(() => {
+    setTimeout( ()=> {
+
+      try{
+
+        const localStorageTodos = localStorage.getItem(itemName);
+        let parsedItem;
+      
+        if(!localStorageTodos){
+          
+          localStorage.setItem(itemName, JSON.stringify(initialValue));
+          parsedItem = initialValue;
+        
+        }else {
+          
+          parsedItem = JSON.parse(localStorageTodos);
+          setItems(parsedItem);
+        
+        }
+  
+        setLoading(false);
+  
+      }catch(error){
+        setLoading(false);
+        setError(true);
+      }
+
+    }, 2000 )
+  }, []);
+  // Esto se utiliza para renderizar solo al inicio el efecto. 
+   
+  
+  const saveItems = (newItem) =>{
+
+    localStorage.removeItem(itemName);
+    localStorage.setItem(itemName, JSON.stringify(newItem));
+    setItems(newItem);
+
+  }
+
+  return { item, saveItems, loading, error }
+  
+}
+
+  export {useLocalStorage}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e8c..1b468244f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,16 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  border-style: solid;
+  
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  
 }
 
 code {
diff --git a/src/index.js b/src/index.js
index 793e2b837..7fa8ad7cb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './components/App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<App />);
