diff --git a/src/components/CardContact.jsx b/src/components/CardContact.jsx
new file mode 100644
index 000000000..288eac7f5
--- /dev/null
+++ b/src/components/CardContact.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+
+function CardContact(props) {
+
+    const navigate = useNavigate()
+
+    return (
+
+        <>
+            <div className="card bg-secondary" style={{ width: "12rem"}}>
+                <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/025.png" className="card-img-top" alt="Contact" />
+
+                <div className="card-body">
+                    <h5 className="card-title"> {props.contactName}</h5>
+                </div>
+                <ul className="list-group list-group-flush">
+                    <li className="list-group-item">{props.contactMail}</li>
+                    <li className="list-group-item">{props.contactPhone}</li>
+                    <li className="list-group-item">{props.contactAddress}</li>
+                </ul>
+                <div className="card-body">
+                    <a className="card-link" onClick={() => navigate(`/ViewContacts/${props.contactId}`)}> View Contact</a>
+                    <a className="card-link">Another link</a>
+                </div>
+            </div>
+        </>
+    )
+}
+export default CardContact;
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 30d43a263..3bd123556 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,19 +1,37 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";
 
-export const Navbar = () => {
+function Navbar() {
+	const navigate = useNavigate();
+
+	const goHome =() => {
+		navigate('/');
+	};
+	const goBack = () => {
+		navigate(-1);
+	};
+
 
 	return (
-		<nav className="navbar navbar-light bg-light">
-			<div className="container">
-				<Link to="/">
-					<span className="navbar-brand mb-0 h1">React Boilerplate</span>
-				</Link>
-				<div className="ml-auto">
-					<Link to="/demo">
-						<button className="btn btn-primary">Check the Context in action</button>
-					</Link>
-				</div>
-			</div>
+		<nav className="navbar navbar-light bg-black">
+			<ul className="cnav-links">
+				<li>
+					<Link to="/contact_list">Lista de contactos</Link>
+				</li>
+				
+				<li>
+					<Link to="/">Acerca de</Link>
+				</li>
+				
+				<li>
+					<Link to="/">Contacto</Link>
+				</li>
+				
+				</ul>
+				
 		</nav>
 	);
-};
\ No newline at end of file
+};
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 3a122d76a..f83d4cede 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,8 +5,12 @@ import { RouterProvider } from "react-router-dom";  // Import RouterProvider to
 import { router } from "./routes";  // Import the router configuration
 import { StoreProvider } from './hooks/useGlobalReducer';  // Import the StoreProvider for global state management
 
+
+
+
 const Main = () => {
     return (
+        
         <React.StrictMode>  
             {/* Provide global state to all components */}
             <StoreProvider> 
diff --git a/src/pages/Contacts/AddContact.jsx b/src/pages/Contacts/AddContact.jsx
new file mode 100644
index 000000000..7afc05bc9
--- /dev/null
+++ b/src/pages/Contacts/AddContact.jsx
@@ -0,0 +1,14 @@
+import React from "react";    
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";   
+
+ const AddContact = () => {
+
+    const {store, dispatch} =useGlobalReducer()
+    return (
+
+        <div className = "addContact"/>, <h2>Add Contacts</h2>
+    );
+};
+
+export default AddContact;
+    
\ No newline at end of file
diff --git a/src/pages/Contacts/ContactList.jsx b/src/pages/Contacts/ContactList.jsx
new file mode 100644
index 000000000..2ff0c6685
--- /dev/null
+++ b/src/pages/Contacts/ContactList.jsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";
+import CardContact from "../../components/CardContact.jsx"
+
+const ContactList = () => {
+
+    const { store, dispatch } = useGlobalReducer()
+
+    useEffect(() => { fetchContacts() }, []);
+
+    const fetchContacts = async () => {
+        try {
+            const response = await fetch('https://playground.4geeks.com/contact/agendas/Dani');
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log(data);
+            dispatch({ type: 'setContacts', payload: data.contacts });
+
+        } catch (error) {
+            console.error("Hubo un problema con la solicitud:", error);
+        }
+    };
+
+    return (
+
+        <>
+            <div className="ContactList">
+                <h2 className="bg-danger"> Contact List </h2>
+                <div className="row">
+                    {store.contacts.map((contact, index) => {
+                        return (
+                            <div key={index} className="col-3">
+                                <CardContact contactName={contact.name}
+                                    contacMail={contact.email}
+                                    contactPhone={contact.phone}
+                                    contactAddress={contact.address}
+                                    contactId={contact.id} />
+
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ContactList;
+
+
+
diff --git a/src/pages/Contacts/EditContact.jsx b/src/pages/Contacts/EditContact.jsx
new file mode 100644
index 000000000..512222fba
--- /dev/null
+++ b/src/pages/Contacts/EditContact.jsx
@@ -0,0 +1,14 @@
+import React from "react";    
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";   
+
+const EditContact = () => {
+
+    const {store, dispatch} =useGlobalReducer()
+
+    return (
+
+        <div className = "EditContacts"/>, <h2>Edit Contacts</h2>
+    );
+};
+
+export default EditContact;
\ No newline at end of file
diff --git a/src/pages/Contacts/ViewContacts.jsx b/src/pages/Contacts/ViewContacts.jsx
new file mode 100644
index 000000000..9a604b5b0
--- /dev/null
+++ b/src/pages/Contacts/ViewContacts.jsx
@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+import useGlobalReducer from "../../hooks/useGlobalReducer.jsx";   
+
+const ViewContacts = () => {
+
+    const {store, dispatch} =useGlobalReducer()
+    return (
+
+        <div className = "ViewContacts"/>, <h2>View Contacts</h2>
+    );
+};
+
+export default ViewContacts;
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 3e9f1aefa..5b62c53c4 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,7 +1,7 @@
 import rigoImageUrl from "../assets/img/rigo-baby.jpg";
 import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
 
-export const Home = () => {
+const Home = () => {
 
   const {store, dispatch} =useGlobalReducer()
 
@@ -13,4 +13,6 @@ export const Home = () => {
 			</p>
 		</div>
 	);
-}; 
\ No newline at end of file
+}; 
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
index 9bfa31325..ce9953a11 100644
--- a/src/pages/Layout.jsx
+++ b/src/pages/Layout.jsx
@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom/dist"
 import ScrollToTop from "../components/ScrollToTop"
-import { Navbar } from "../components/Navbar"
+import  Navbar  from "../components/Navbar"
 import { Footer } from "../components/Footer"
 
 // Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
@@ -12,4 +12,6 @@ export const Layout = () => {
             <Footer />
         </ScrollToTop>
     )
-}
\ No newline at end of file
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/src/pages/Single.jsx b/src/pages/Single.jsx
deleted file mode 100644
index 7e68487da..000000000
--- a/src/pages/Single.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Import necessary hooks and components from react-router-dom and other libraries.
-import { Link, useParams } from "react-router-dom";  // To use link for navigation and useParams to get URL parameters
-import PropTypes from "prop-types";  // To define prop types for this component
-import rigoImageUrl from "../assets/img/rigo-baby.jpg"  // Import an image asset
-import useGlobalReducer from "../hooks/useGlobalReducer";  // Import a custom hook for accessing the global state
-
-// Define and export the Single component which displays individual item details.
-export const Single = props => {
-  // Access the global state using the custom hook.
-  const { store } = useGlobalReducer()
-
-  // Retrieve the 'theId' URL parameter using useParams hook.
-  const { theId } = useParams()
-  const singleTodo = store.todos.find(todo => todo.id === parseInt(theId));
-
-  return (
-    <div className="container text-center">
-      {/* Display the title of the todo element dynamically retrieved from the store using theId. */}
-      <h1 className="display-4">Todo: {singleTodo?.title}</h1>
-      <hr className="my-4" />  {/* A horizontal rule for visual separation. */}
-
-      {/* A Link component acts as an anchor tag but is used for client-side routing to prevent page reloads. */}
-      <Link to="/">
-        <span className="btn btn-primary btn-lg" href="#" role="button">
-          Back home
-        </span>
-      </Link>
-    </div>
-  );
-};
-
-// Use PropTypes to validate the props passed to this component, ensuring reliable behavior.
-Single.propTypes = {
-  // Although 'match' prop is defined here, it is not used in the component.
-  // Consider removing or using it as needed.
-  match: PropTypes.object
-};
diff --git a/src/routes.jsx b/src/routes.jsx
index 0557df614..0fc7bf37c 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -1,30 +1,24 @@
-// Import necessary components and functions from react-router-dom.
-
-import {
-    createBrowserRouter,
-    createRoutesFromElements,
-    Route,
-} from "react-router-dom";
+import { createBrowserRouter, createRoutesFromElements, Route, Navigate } from "react-router-dom";
 import { Layout } from "./pages/Layout";
-import { Home } from "./pages/Home";
-import { Single } from "./pages/Single";
-import { Demo } from "./pages/Demo";
+import Home  from "./pages/Home";
+import ContactList from "./pages/Contacts/ContactList"
+import ViewContacts from "./pages/Contacts/ViewContacts";
+import AddContact from "./pages/Contacts/AddContact";
+import EditContact from "./pages/Contacts/EditContact";
 
 export const router = createBrowserRouter(
-    createRoutesFromElements(
-    // CreateRoutesFromElements function allows you to build route elements declaratively.
-    // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
-    // Root, on the contrary, create a sister Route, if you have doubts, try it!
-    // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
-    // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
+  createRoutesFromElements(
+    <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>}>
 
-      // Root Route: All navigation will start from here.
-      <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>} >
+     
+        <Route path="/" element={<Home />} />
+        <Route path="/ViewContacts/:Id" element={<ViewContacts />} />
+        <Route path="/contact_list" element={<ContactList/>} />
+        <Route path="/add_contact" element={<AddContact/>} />
+        <Route path="/edit_contact" element={<EditContact/>} />
 
-        {/* Nested Routes: Defines sub-routes within the BaseHome component. */}
-        <Route path= "/" element={<Home />} />
-        <Route path="/single/:theId" element={ <Single />} />  {/* Dynamic route for single items */}
-        <Route path="/demo" element={<Demo />} />
       </Route>
-    )
-);
\ No newline at end of file
+  )
+);
+
+export default router;
diff --git a/src/store.js b/src/store.js
index 933c7bc40..63360997d 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,32 +1,51 @@
-export const initialStore=()=>{
-  return{
-    message: null,
-    todos: [
+
+
+export const initialStore = () => {
+  return {
+
+    contacts: [
       {
-        id: 1,
-        title: "Make the bed",
-        background: null,
+        "name": "",
+        "phone": "",
+        "email": "",
+        "address": "",
+        "id": 0
       },
-      {
-        id: 2,
-        title: "Do my homework",
-        background: null,
-      }
-    ]
-  }
-}
+    ],
+    userRole:""
+  };
+};
 
-export default function storeReducer(store, action = {}) {
-  switch(action.type){
-    case 'add_task':
+export default function storeReducer(store, action) {
+  switch (action.type) {
 
-      const { id,  color } = action.payload
+    
+    case "setContacts":
+      return {
+        ...store,
+        contacts: action.payload
+      };
 
+    case "editcontact":
       return {
         ...store,
-        todos: store.todos.map((todo) => (todo.id === id ? { ...todo, background: color } : todo))
+        contacts: [...store.contacts, action.payload]
       };
-    default:
-      throw Error('Unknown action.');
-  }    
+
+    case "deleteContact":
+
+      return {
+        ...store,
+        contacts: store.contacts.filter(contact => contact.id !== action.payload)
+      };
+
+    
+   
+  default: return store;
+
+  }
+
+   
 }
+
+ 
\ No newline at end of file