diff --git a/src/App.tsx b/src/App.tsx
index f4cc81d..8ecdded 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,37 @@
 import { useEffect, useState } from 'react';
-import './App.css'
-import Alumno from './Components/Alumno'
+import './App.css';
+import Alumno from './Components/Alumno';
+import { ObtenerUsuarios } from './services/servicioUsuario';
 
+function App() {
+    const [loading, setLoading] = useState(true);
+    const [alumnos, setAlumnos] = useState<any[]>([]);
 
- function App() {
-     const [loading, setLoading] = useState(true);
-     const [alumnos, setAlumnos] = useState<any[]>([]);
+    useEffect(() => {
+        async function cargarDatos() {
+            setLoading(true);
+            try {
+                const data = await ObtenerUsuarios();
+                setAlumnos(data);
+            } catch (error) {
+                console.error('Error al obtener usuarios:', error);
+            } finally {
+                setLoading(false);
+            }
+        }
 
-     useEffect(() => {
-         fetch("https://jsonplaceholder.typicode.com/users")
-             .then(res => res.json())
-             .then(data => {
-                 setAlumnos(data);
-                 setLoading(false);
-             })
-             .catch(() => setLoading(false));
-     }, []);
+        cargarDatos();
+    }, []);
 
-     if (loading) return <div>Cargando...</div>;
+    if (loading) return <div>Cargando...</div>;
 
-     return (
-         <div style={{ display: 'flex', flexDirection: 'row', gap: "1rem", flexWrap: 'wrap' }}>
-             {alumnos.map((x) => (
-                 <Alumno key={x.id} data={x} />
-             ))}
-         </div>
-     );
- }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem', flexWrap: 'wrap', justifyContent: "center"}}>
+            {alumnos.map((x) => (
+                <Alumno key={x.id} data={x} />
+            ))}
+        </div>
+    );
+}
 
-export default App
+export default App;
diff --git a/src/Components/Alumno.tsx b/src/Components/Alumno.tsx
index d42b236..85e8cd8 100644
--- a/src/Components/Alumno.tsx
+++ b/src/Components/Alumno.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import "./Alumno.css"
+import type { Usuario } from "../types/usuario";
 
-export default function Alumno({data}: {data: any}){
+export default function Alumno({data}: {data: Usuario}){
     const [alumno, setAlumno] = useState({ presente: false });
     return (
         <div id="aa"
@@ -22,9 +23,14 @@ export default function Alumno({data}: {data: any}){
                 <p>
                     Nombre: <b>{data.name}</b>
                 </p>
-                <p>
+
+                <p style={{ color: "gray" }}>
                     Usuario: <b>{data.username}</b>
                 </p>
+
+                <p style={{ color: "gray" }}>
+                    Usuario: <b>{data.email}</b>
+                </p>
             </div>
             <hr />
 
diff --git a/src/services/servicioUsuario.ts b/src/services/servicioUsuario.ts
new file mode 100644
index 0000000..d1c8455
--- /dev/null
+++ b/src/services/servicioUsuario.ts
@@ -0,0 +1,7 @@
+import type { Usuario } from "../types/usuario";
+
+export const ObtenerUsuarios = async (): Promise<Usuario[]> => {
+    const usuario = await fetch(`https://jsonplaceholder.typicode.com/users`);
+    const usuJson: Usuario[] = await usuario.json();
+    return usuJson;
+};
diff --git a/src/types/usuario.ts b/src/types/usuario.ts
new file mode 100644
index 0000000..5fa7335
--- /dev/null
+++ b/src/types/usuario.ts
@@ -0,0 +1,6 @@
+export interface Usuario {
+    id: number,
+    name: string,
+    username: string,
+    email: string
+}