diff --git a/staff/debora-garcia/project/api/handlers/getRandomWorkoutHandler.js b/staff/debora-garcia/project/api/handlers/getRandomWorkoutHandler.js
new file mode 100644
index 000000000..bfe90a05a
--- /dev/null
+++ b/staff/debora-garcia/project/api/handlers/getRandomWorkoutHandler.js
@@ -0,0 +1,32 @@
+import "dotenv/config"
+import logic from "../logic/index.js"
+import jwt from "../utils/jsonwebtoken-promised.js"
+import { CredentialsError } from "com/errors.js"
+
+const { JWT_SECRET } = process.env
+const getRandomWorkoutHandler = (req, res, next) => {
+    try {
+        const token = req.headers.authorization.slice(7)
+
+        jwt.verify(token, JWT_SECRET)
+            .then(payload => {
+                const { sub: userId } = payload
+                const { workoutType } = req.params                
+
+                try {
+                    logic.getRandomWorkout(userId, workoutType)
+                        .then(randomWorkout => res.json(randomWorkout))
+                        .catch(error => next(error))
+                } catch (error) {
+                    next(error)
+                }
+
+            })
+            .catch(error => next(new CredentialsError(error.message)))
+
+    } catch (error) {
+        next(error)
+    }
+}
+
+export default getRandomWorkoutHandler
\ No newline at end of file
diff --git a/staff/debora-garcia/project/api/handlers/index.js b/staff/debora-garcia/project/api/handlers/index.js
index 1a1398bcd..9cfb51903 100644
--- a/staff/debora-garcia/project/api/handlers/index.js
+++ b/staff/debora-garcia/project/api/handlers/index.js
@@ -1,5 +1,6 @@
 import authenticateUserHandler from "./authenticateUserHandler.js";
 import errorHandler from "./errorHandler.js";
+import getRandomWorkoutHandler from "./getRandomWorkoutHandler.js";
 import getUsernameHandler from "./getUsernameHandler.js";
 import registerUserHandler from "./registerUserHandler.js";
 
@@ -8,7 +9,8 @@ const routeHandler = {
     errorHandler,
     registerUserHandler,
     authenticateUserHandler,
-    getUsernameHandler
+    getUsernameHandler,
+    getRandomWorkoutHandler
 }
 
 export default routeHandler
\ No newline at end of file
diff --git a/staff/debora-garcia/project/api/index.js b/staff/debora-garcia/project/api/index.js
index 086e6ca3b..1c735a2d3 100644
--- a/staff/debora-garcia/project/api/index.js
+++ b/staff/debora-garcia/project/api/index.js
@@ -24,6 +24,7 @@ mongoose.connect(MONGODB_URL)
         api.post("/users", jsonBodyParser, routeHandler.registerUserHandler)
         api.post("/users/auth", jsonBodyParser, routeHandler.authenticateUserHandler)
         api.get("/users/:targetUserId", routeHandler.getUsernameHandler)
+        api.get("/workouts/:workoutType", routeHandler.getRandomWorkoutHandler)
         api.use(errorHandler)
         api.listen(PORT, () => console.log(`API running on PORT ${PORT}`))
 
diff --git a/staff/debora-garcia/project/api/logic/getRandomWorkout.js b/staff/debora-garcia/project/api/logic/getRandomWorkout.js
new file mode 100644
index 000000000..99e8533f4
--- /dev/null
+++ b/staff/debora-garcia/project/api/logic/getRandomWorkout.js
@@ -0,0 +1,34 @@
+import { User, Workout } from "../data/index.js"
+import { SystemError, NotFoundError } from "com/errors.js"
+import validate from "com/validate.js"
+
+const getRandomWorkout = (userId, workoutType) => {
+    validate.id(userId, "userId")
+    validate.type(workoutType, "workoutType")
+
+    return User.findById(userId).lean()
+        .catch(error => { throw new SystemError(error.message) })
+        .then(user => {
+            if (!user) throw new NotFoundError("user not found")
+
+            return Workout.find({ workoutType }).select("-__v").populate("movements").lean()
+                .catch(error => { throw new SystemError(error.message) })
+                .then(workouts => {
+                    if (!workouts) throw new NotFoundError("workouts not found")
+
+                    const randomNumber = Math.floor(Math.random() * workouts.length)
+
+                    const randomWorkout = workouts[randomNumber]
+
+                    if (!randomWorkout) throw new NotFoundError("workout not found")
+
+                    randomWorkout.id = randomWorkout._id.toString()
+
+                    delete randomWorkout._id
+
+                    return randomWorkout
+                })
+
+        })
+}
+export default getRandomWorkout
diff --git a/staff/debora-garcia/project/api/logic/getRandomWorkout.test.js b/staff/debora-garcia/project/api/logic/getRandomWorkout.test.js
new file mode 100644
index 000000000..8a7b27715
--- /dev/null
+++ b/staff/debora-garcia/project/api/logic/getRandomWorkout.test.js
@@ -0,0 +1,18 @@
+import "dotenv/config"
+import mongoose from "mongoose"
+
+import getRandomWorkout from "./getRandomWorkout.js"
+const { MONGODB_URL } = process.env
+
+mongoose.connect(MONGODB_URL)
+    .then(() => {
+        try {
+            getRandomWorkout("66b0b8ff337c2b614a26583b", "emom")
+                .then(randomWorkout => console.log(randomWorkout))
+                .catch(error => console.error(error))
+
+        } catch (error) {
+            console.error(error)
+        }
+    })
+    .catch(error => console.error(error))
diff --git a/staff/debora-garcia/project/api/logic/index.js b/staff/debora-garcia/project/api/logic/index.js
index ffb745143..88957cce1 100644
--- a/staff/debora-garcia/project/api/logic/index.js
+++ b/staff/debora-garcia/project/api/logic/index.js
@@ -2,6 +2,7 @@ import registerUser from "./registerUser.js"
 import authenticateUser from "./authenticateUser.js"
 import getUsername from "./getUsername.js"
 import insertWorkout from "./insertWorkout.js"
+import getRandomWorkout from "./getRandomWorkout.js"
 
 
 
@@ -10,6 +11,7 @@ const logic = {
     authenticateUser,
     getUsername,
     insertWorkout,
+    getRandomWorkout
 }
 
 export default logic
\ No newline at end of file
diff --git a/staff/debora-garcia/project/api/test/get-randomWorkout.sh b/staff/debora-garcia/project/api/test/get-randomWorkout.sh
new file mode 100755
index 000000000..ccb0867e0
--- /dev/null
+++ b/staff/debora-garcia/project/api/test/get-randomWorkout.sh
@@ -0,0 +1 @@
+curl http://localhost:8080/workouts/emom -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NmFiZTA1NjcxM2E4YmU5MmY4ZTU4NDQiLCJpYXQiOjE3MjI3OTUwMjAsImV4cCI6MTcyMzM5OTgyMH0.9JIikHMaqlttsnSqRe_YCT_1tYl9cEDfo3o6DFIePO8" -v
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/App.jsx b/staff/debora-garcia/project/app/src/App.jsx
index 40781664d..463d7f393 100644
--- a/staff/debora-garcia/project/app/src/App.jsx
+++ b/staff/debora-garcia/project/app/src/App.jsx
@@ -1,4 +1,4 @@
-import { Routes, Route, useNavigate, Navigate } from "react-router-dom"
+import { Routes, Route, Navigate } from "react-router-dom"
 
 import logic from "./logic";
 
@@ -7,28 +7,27 @@ import Register from "./views/Register";
 import Workouts from "./views/Workouts";
 import Achievements from "./views/Achievements";
 import Feed from "./views/Feed";
+import Amrap from "./views/Amrap";
+import Emom from "./views/Emom";
+import ForTime from "./views/ForTime";
+import Benchmark from "./views/Benchmark";
+import Home from "./views/Home";
 
+//TODO hacer una pagina de home
 export default function App() {
     console.log("App -> render")
-    const navigate = useNavigate()
 
-    const handleGoToLogin = () => navigate("/login")
-    const handleGoToRegister = () => navigate("/register")
-    const handleGoToFeed = () => navigate("/feed")
-    const handleGoToWorkouts = () => navigate("/workouts")
-    const handleGoToAchievements = () => navigate("/achievements")
     return <Routes>
 
-        <Route path="/login" element={logic.isUserLoggedIn() ? <Navigate to="/workouts" /> : <Login />} />
+        <Route path="/login" element={<RenderLogin />} />
 
-        <Route path="/register" element={logic.isUserLoggedIn() ? <Navigate to="/workouts" /> : <Register />} />
-
-        <Route path="/feed" element={logic.isUserLoggedIn() ? <Feed onUserLoggedOut={handleGoToLogin} /> : <Navigate to="/login" />} />
-
-        <Route path="/workouts" element={logic.isUserLoggedIn() ? <Workouts onUserLoggedOut={handleGoToLogin} /> : <Navigate to="/login" />} />
-
-        <Route path="/achievements" element={logic.isUserLoggedIn() ? <Achievements onUserLoggedOut={handleGoToLogin} /> : <Navigate to="/login" />} />
+        <Route path="/register" element={<RenderRegister />} />
 
+        <Route path="/*" element={<RenderHome />} />
+        
     </Routes>
 }
 
+const RenderRegister = () => (logic.isUserLoggedIn() ? <Navigate to="/workouts" /> : <Register />)
+const RenderLogin = () => (logic.isUserLoggedIn() ? <Navigate to="/workouts" /> : <Login />)
+const RenderHome = () => (logic.isUserLoggedIn() ? <Home /> : <Navigate to="/login" />)
diff --git a/staff/debora-garcia/project/app/src/components/Button/index.jsx b/staff/debora-garcia/project/app/src/components/Button/index.jsx
index 70e55b70f..47925354b 100644
--- a/staff/debora-garcia/project/app/src/components/Button/index.jsx
+++ b/staff/debora-garcia/project/app/src/components/Button/index.jsx
@@ -1,6 +1,6 @@
 import "./index.css"
 
 export default function Button({ type, className, onClick, children }) {
-    return <button className={`Button ${className ? className : ""}`} onClick={onClick}>{children}</button>
+    return <button className={`Button ${className ? className : ""}`} type={type} onClick={onClick}>{children}</button>
 
 }
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/index.css b/staff/debora-garcia/project/app/src/index.css
index 3540b6286..6a1c69f6e 100644
--- a/staff/debora-garcia/project/app/src/index.css
+++ b/staff/debora-garcia/project/app/src/index.css
@@ -15,14 +15,13 @@
 }
 
 body {
-  background-color: var(--second-color);
-  margin: 0;
+  @apply flex min-h-screen w-full flex-col bg-[--second-color] justify-center;
 }
-
-form {
-  @apply flex flex-col justify-center min-h-[100vh];
+.Main {
+  @apply flex w-full flex-grow flex-col items-center justify-center;
 }
 
+
 .registerForm {
   @apply flex flex-col items-center;
 }
@@ -38,3 +37,7 @@ form {
 .button-container Button:hover {
   @apply bg-[#65524d];
 }
+
+main {
+  @apply flex flex-col justify-center items-center gap-4
+}
diff --git a/staff/debora-garcia/project/app/src/logic/getRandomWorkout.js b/staff/debora-garcia/project/app/src/logic/getRandomWorkout.js
new file mode 100644
index 000000000..dd572149e
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/logic/getRandomWorkout.js
@@ -0,0 +1,30 @@
+import errors, { SystemError } from "com/errors"
+import validate from "com/validate"
+
+const getRandomWorkout = (workoutType) => {
+    validate.type(workoutType, "workoutType")
+    return fetch(`${import.meta.env.VITE_API_URL}/workouts/${workoutType}`, {
+        method: "GET",
+        headers: {
+            Authorization: `Bearer ${sessionStorage.token}`
+        }
+    })
+        .catch(() => { throw new SystemError("server error") })
+        .then(response => {
+            if (response.status === 200) {
+                return response.json()
+                    .catch(() => { throw new SystemError("server error") })
+                    .then(workoutRandom => workoutRandom)
+            }
+            return response.json()
+                .catch(() => { throw new SystemError("server error") })
+                .then(body => {
+                    const { error, message } = body
+                    const constructor = errors[error]
+                    throw new constructor(message)
+                })
+        })
+}
+        
+
+export default getRandomWorkout
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/logic/index.js b/staff/debora-garcia/project/app/src/logic/index.js
index c23133f8c..aa187be0b 100644
--- a/staff/debora-garcia/project/app/src/logic/index.js
+++ b/staff/debora-garcia/project/app/src/logic/index.js
@@ -3,6 +3,7 @@ import isUserLoggedIn from "./isUserLoggedIn";
 import loginUser from "./loginUser";
 import logoutUser from "./logoutUser";
 import registerUser from "./registerUser";
+import getRandomWorkout from "./getRandomWorkout";
 
 const logic = {
     registerUser,
@@ -10,6 +11,7 @@ const logic = {
     getUsername,
     logoutUser,
     isUserLoggedIn,
+    getRandomWorkout,
 
 }
 
diff --git a/staff/debora-garcia/project/app/src/views/Achievements.jsx b/staff/debora-garcia/project/app/src/views/Achievements.jsx
index e695eca3e..858ab5ccc 100644
--- a/staff/debora-garcia/project/app/src/views/Achievements.jsx
+++ b/staff/debora-garcia/project/app/src/views/Achievements.jsx
@@ -2,74 +2,12 @@ import { useNavigate, Link } from "react-router-dom"
 import { useState, useEffect } from "react"
 import logic from "../logic"
 
-import Footer from "./components/Footer"
-import Header from "./components/Header"
-import Heading from "../components/Heading"
 import Button from "../components/Button"
-import GoBackButton from "../components/GoBackButton"
 
-export default function Achievements({ onUserLoggedOut }) {
+export default function Achievements() {
     console.log("Achievements ->render")
-
-    const [username, setUsername] = useState("")
-    const navigate = useNavigate()
-    const [message, setMessage] = useState(null)
-
-    useEffect(() => {
-        console.log("Home -> useEffect")
-        try {
-            logic.getUsername()
-                .then((username) => {
-                    console.log("Home -> setUsername")
-
-                    setUsername(username)
-                })
-                .catch(error => {
-                    console.error(error)
-
-                    setMessage(error.message)
-                })
-        } catch (error) {
-            console.error(error)
-
-            alert(error.message)
-        }
-    }, [])
-
-    const handleGoToFeedClick = () => {
-        navigate("/feed")
-    }
-
-    const handleGoToWorkoutClick = () => {
-        navigate("/workouts")
-    }
-
-    const handleGoToAchievementClick = () => {
-        navigate("/achievements")
-    }
-    const handleLogout = () => {
-        logic.logoutUser()
-        //navigate("/login")
-        onUserLoggedOut()
-
-    }
-
-    const handlePrintInitialLetter = (username) => {
-        return username.charAt(0).toUpperCase()
-    }
-
-    return <form>
-        <Header>
-            <Heading level="1">ACHIVEVEMENTS</Heading>
-            <div className="flex flex-wrap items-center space-x-4">
-                <div className="flex items-center justify-center w-12 h-12 bg-gray-300 rounded-full text-white text-xl font-bold">
-                    {handlePrintInitialLetter(username)}
-                </div>
-            </div>
-            <Button onClick={handleLogout}>Logout</Button>
-        </Header>
-        <GoBackButton />
-        <Footer goToFeedClick={handleGoToFeedClick} goToWorkoutClick={handleGoToWorkoutClick} goToAchievementClick={handleGoToAchievementClick} />
-    </form>
+    return <div>
+        <p>Achievements</p>
+    </div>
 }
 
diff --git a/staff/debora-garcia/project/app/src/views/Amrap.jsx b/staff/debora-garcia/project/app/src/views/Amrap.jsx
new file mode 100644
index 000000000..9a4aee108
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/views/Amrap.jsx
@@ -0,0 +1,33 @@
+import { useNavigate, Link, Routes, Route, useParams } from "react-router-dom"
+import { useState, useEffect,  } from "react"
+import logic from "../logic"
+
+import Button from "../components/Button"
+
+export default function Amrap() {
+    const { amrap } = useParams()
+    const [workout, setWorkout] = useState({})
+
+    useEffect(() => {
+        console.log("Benchmark ->render")
+        try {
+            logic.getRandomWorkout(amrap)
+                .then((amrapkWorkout) => {
+                    setWorkout(amrapkWorkout)
+                    console.log(amrapkWorkout)
+                })
+                .catch(error => alert(error.message))
+        } catch (error) {
+            alert(error.message)
+        }
+    }, [])
+
+    return (
+        <div>
+            {workout?.workoutType && <p>{workout.workoutType}</p>}
+            {workout?.title && <p>{workout.title}</p>}
+            {workout?.duration && <p>{workout.duration}</p>}
+        </div>
+    );
+}
+
diff --git a/staff/debora-garcia/project/app/src/views/Benchmark.jsx b/staff/debora-garcia/project/app/src/views/Benchmark.jsx
new file mode 100644
index 000000000..47a465436
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/views/Benchmark.jsx
@@ -0,0 +1,32 @@
+import { useNavigate, Link, Routes, Route, useParams } from "react-router-dom"
+import { useState, useEffect } from "react"
+import logic from "../logic"
+
+import Button from "../components/Button"
+
+export default function Benchmark() {
+    const { benchmark } = useParams()
+    const [workout, setWorkout] = useState({})
+
+    useEffect(() => {
+        console.log("Benchmark ->render")
+        try {
+            logic.getRandomWorkout(benchmark)
+                .then((benchmarkWorkout) => {
+                    setWorkout(benchmarkWorkout)
+                    console.log(benchmarkWorkout)
+                })
+                .catch(error => alert(error.message))
+        } catch (error) {
+            alert(error.message)
+        }
+    }, [])
+
+    return (
+        <div>
+            {workout?.workoutType && <p>{workout.workoutType}</p>}
+            {workout?.title && <p>{workout.title}</p>}
+            {workout?.duration && <p>{workout.duration}</p>}    
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/Emom.jsx b/staff/debora-garcia/project/app/src/views/Emom.jsx
new file mode 100644
index 000000000..870465a07
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/views/Emom.jsx
@@ -0,0 +1,38 @@
+import { Route, Routes, useNavigate, useParams } from "react-router-dom"
+import { useState, useEffect } from "react"
+import logic from "../logic"
+
+import Button from "../components/Button"
+
+export default function Emom() {
+    const { emom } = useParams()
+    const [workout, setWorkout] = useState({})
+
+    const generateRandomWorkout = () => {
+        console.log("Emom -> generateRandomWorkout")
+        try {
+            logic.getRandomWorkout(emom)
+                .then((emomWorkout) => {
+                    setWorkout(emomWorkout)
+                    console.log(emomWorkout)
+                })
+                .catch(error => alert(error.message))
+        } catch (error) {
+            alert(error.message)
+        }
+    }
+
+    useEffect(() => {
+        console.log("Emom -> useEffect")
+        generateRandomWorkout()
+    }, [emom])// workout?
+
+    return (
+        <div>
+            {workout?.workoutType && <p>{workout.workoutType}</p>}
+            {workout?.title && <p>{workout.title}</p>}
+            {workout?.duration && <p>{workout.duration}</p>}
+            <Button onClick={generateRandomWorkout} type={"button"}>Again!</Button>
+        </div>
+    )
+}
diff --git a/staff/debora-garcia/project/app/src/views/Feed.jsx b/staff/debora-garcia/project/app/src/views/Feed.jsx
index e0fe519b8..6b6002a86 100644
--- a/staff/debora-garcia/project/app/src/views/Feed.jsx
+++ b/staff/debora-garcia/project/app/src/views/Feed.jsx
@@ -2,72 +2,13 @@ import { useNavigate, Link } from "react-router-dom"
 import { useState, useEffect } from "react"
 import logic from "../logic"
 
-import Footer from "./components/Footer"
-import Header from "./components/Header"
-import Heading from "../components/Heading"
 import Button from "../components/Button"
 import GoBackButton from "../components/GoBackButton"
 
-export default function Feed({ onUserLoggedOut }) {
+export default function Feed() {
     console.log("Feed ->render")
 
-    const [username, setUsername] = useState("")
-    const navigate = useNavigate()
-    const [message, setMessage] = useState(null)
-
-    useEffect(() => {
-        console.log("Home -> useEffect")
-        try {
-            logic.getUsername()
-                .then((username) => {
-                    console.log("Home -> setUsername")
-
-                    setUsername(username)
-                })
-                .catch(error => {
-                    console.error(error)
-
-                    setMessage(error.message)
-                })
-        } catch (error) {
-            console.error(error)
-
-            alert(error.message)
-        }
-    }, [])
-
-    const handleGoToFeedClick = () => {
-        navigate("/feed")
-    }
-
-    const handleGoToWorkoutClick = () => {
-        navigate("/workouts")
-    }
-
-    const handleGoToAchievementClick = () => {
-        navigate("/achievements")
-    }
-    const handleLogout = () => {
-        logic.logoutUser()
-        //navigate("/login")
-        onUserLoggedOut()
-
-    }
-
-    const handlePrintInitialLetter = (username) => {
-        return username.charAt(0).toUpperCase()
-    }
-    return <form>
-    <Header>
-    <Heading level="1">FEED</Heading>
-    <div className="flex items-center space-x-4">
-        <div className="flex items-center justify-center w-12 h-12 bg-gray-300 rounded-full text-white text-xl font-bold">
-            {handlePrintInitialLetter(username)}
-        </div>
+    return <div>
+        <p>Feed</p>
     </div>
-    <Button onClick={handleLogout}>Logout</Button>
-</Header>
-        <GoBackButton />
-        <Footer goToFeedClick={handleGoToFeedClick} goToWorkoutClick={handleGoToWorkoutClick} goToAchievementClick={handleGoToAchievementClick} />
-    </form>
 }
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/ForTime.jsx b/staff/debora-garcia/project/app/src/views/ForTime.jsx
new file mode 100644
index 000000000..acc3ab14d
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/views/ForTime.jsx
@@ -0,0 +1,34 @@
+import { useNavigate, Link, Routes, Route, useParams } from "react-router-dom"
+import { useState, useEffect } from "react"
+import logic from "../logic"
+
+import Button from "../components/Button"
+
+export default function ForTime() {
+    const params = useParams()
+    const forTime = params['for-time']
+
+    const [workout, setWorkout] = useState({})
+
+    useEffect(() => {
+        console.log("ForTime ->render")
+        try {
+            logic.getRandomWorkout(forTime)
+                .then((forTimekWorkout) => {
+                    setWorkout(forTimekWorkout)
+                    console.log(forTimekWorkout)
+                })
+                .catch(error => alert(error.message))
+        } catch (error) {
+            alert(error.message)
+        }
+    }, [])
+
+    return (
+        <div>
+            {workout?.workoutType && <p>{workout.workoutType}</p>}
+            {workout?.title && <p>{workout.title}</p>}
+            {workout?.duration && <p>{workout.duration}</p>}
+        </div>
+    )
+}
diff --git a/staff/debora-garcia/project/app/src/views/Home.jsx b/staff/debora-garcia/project/app/src/views/Home.jsx
index 3f991abfe..d7c373b07 100644
--- a/staff/debora-garcia/project/app/src/views/Home.jsx
+++ b/staff/debora-garcia/project/app/src/views/Home.jsx
@@ -1,9 +1,87 @@
+import { useNavigate, Link, Routes, Route, Navigate } from "react-router-dom"
+import { useState, useEffect } from "react"
+import logic from "../logic"
+
+import Feed from "./Feed"
+import Workouts from "./Workouts"
+import Achievements from "./Achievements"
+
 import Footer from "./components/Footer"
+import Header from "./components/Header"
+import Heading from "../components/Heading"
+import GoBackButton from "../components/GoBackButton"
+import WorkoutDetail from "./WorkoutDetails"
+
+import Emom from "./Emom"
+import Amrap from "./Amrap"
+import Benchmark from "./Benchmark"
+import ForTime from "./ForTime"
+
 export default function Home() {
     console.log("Home ->render")
+    const [username, setUsername] = useState("")
+    const navigate = useNavigate()
+    const [message, setMessage] = useState(null)
+
+
+    useEffect(() => {
+        console.log("Home -> useEffect")
+        try {
+            logic.getUsername()
+                .then((username) => {
+                    console.log("Home -> setUsername")
+
+                    setUsername(username)
+                })
+                .catch(error => {
+                    console.error(error)
+
+                    setMessage(error.message)
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }, [])
+
+    const handleLogout = () => {
+        logic.logoutUser()
+        navigate("/login")
+    }
+
+    return (
+        <>
+        <Header username={username} onLogout={handleLogout}>
+            <Heading level="1">ROUTE</Heading>
+        </Header>
+        <GoBackButton />
+        <main>
+            <Routes>
+                <Route path="/" element={<Navigate to="/workouts" />} />
 
-    return <>
-        <p>Hola Home!</p>
+                <Route path="/feed" element={<Feed />} />
+
+                <Route path="/achievements" element={<Achievements />} />
+
+                <Route path="/workouts" element={<Workouts />} />
+                <Route path="/workouts/:workoutType" element={<WorkoutDetail />} />
+
+
+            </Routes>
+        </main>
         <Footer />
-    </>
-}
\ No newline at end of file
+        </>
+    )
+
+}
+
+
+
+
+
+/*  <Route path="/workouts/emom/:emom" element={<Emom />} />
+ <Route path="/workouts/amrap/:amrap" element={<Amrap />} />
+ <Route path="/workouts/benchmark/:benchmark" element={<Benchmark />} />
+ <Route path="/workouts/for-time/:for-time" element={<ForTime />} />
+ */
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/Login.jsx b/staff/debora-garcia/project/app/src/views/Login.jsx
index fd3e65c80..6f580f026 100644
--- a/staff/debora-garcia/project/app/src/views/Login.jsx
+++ b/staff/debora-garcia/project/app/src/views/Login.jsx
@@ -37,14 +37,14 @@ export default function Login() {
         }
     }
 
-    return <form className="registerForm" onSubmit={handleLoginSubmit} >
-        <Heading level="1" className="Heading">WELLCOME BACK!</Heading>
-        <p>Be part of our team</p>
-
-        <Field id="username" type="text" placeholder="Username"></Field>
-        <Field id="password" type="password" placeholder="Password"></Field>
-        <Button type="submit">Sign in</Button>
-
-
-    </form>
+    return (
+        <form className="registerForm" onSubmit={handleLoginSubmit} >
+            <Heading level="1" className="Heading">WELLCOME BACK!</Heading>
+            <p>Be part of our team</p>
+
+            <Field id="username" type="text" placeholder="Username"></Field>
+            <Field id="password" type="password" placeholder="Password"></Field>
+            <Button type="submit">Sign in</Button>
+        </form>
+    )
 }
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/Register.jsx b/staff/debora-garcia/project/app/src/views/Register.jsx
index ce55b8abb..eb4ea08e5 100644
--- a/staff/debora-garcia/project/app/src/views/Register.jsx
+++ b/staff/debora-garcia/project/app/src/views/Register.jsx
@@ -49,17 +49,20 @@ export default function Register() {
 
     }
 
-    return <form className="registerForm" onSubmit={handleRegisterSubmit}>
-        <Heading level="1" className="Heading">NEW ACCOUNT</Heading>
-        <p>Be part of our team</p>
-        <Field id="name" type="text" placeholder="Name"></Field>
-        <Field id="surname" type="text" placeholder="Surname"></Field>
-        <Field id="username" type="text" placeholder="Username"></Field>
-        <Field id="email" type="email" placeholder="E-mail"></Field>
-        <Field id="password" type="password" placeholder="Password"></Field>
-        <Field id="passwordRepeat" type="password" placeholder="Confirm Password"></Field>
-        <Button type="submit">Sign up</Button>
-        <Link onClick={handleLoginClick}>Login</Link>
-
-    </form>
+    return (
+
+        <form className="registerForm" onSubmit={handleRegisterSubmit}>
+            <Heading level="1" className="Heading">NEW ACCOUNT</Heading>
+            <p>Be part of our team</p>
+            <Field id="name" type="text" placeholder="Name"></Field>
+            <Field id="surname" type="text" placeholder="Surname"></Field>
+            <Field id="username" type="text" placeholder="Username"></Field>
+            <Field id="email" type="email" placeholder="E-mail"></Field>
+            <Field id="password" type="password" placeholder="Password"></Field>
+            <Field id="passwordRepeat" type="password" placeholder="Confirm Password"></Field>
+            <Button type="submit">Sign up</Button>
+            <Link onClick={handleLoginClick}>Login</Link>
+
+        </form>
+    )
 }
diff --git a/staff/debora-garcia/project/app/src/views/WorkoutDetails.css b/staff/debora-garcia/project/app/src/views/WorkoutDetails.css
new file mode 100644
index 000000000..1214a77c8
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/views/WorkoutDetails.css
@@ -0,0 +1,8 @@
+
+.workout-details {
+    @apply flex flex-col justify-center items-center gap-1  p-0 mt-8 w-[350px] h-[420px] rounded-[7px]  
+  }
+  .workout-details Button {
+    @apply p-[10px_20px] rounded-[5px] bg-[--second-color] text-[white] cursor-pointer w-[100px] absolute bottom-[7.5rem];
+  }
+  
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/WorkoutDetails.jsx b/staff/debora-garcia/project/app/src/views/WorkoutDetails.jsx
new file mode 100644
index 000000000..2846ab36a
--- /dev/null
+++ b/staff/debora-garcia/project/app/src/views/WorkoutDetails.jsx
@@ -0,0 +1,50 @@
+import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import logic from "../logic"
+import Button from '../components/Button';
+import "./WorkoutDetails.css"
+
+export default function WorkoutDetail() {
+    const [workout, setWorkout] = useState({})
+    const { workoutType } = useParams()
+
+    const generateRandomWorkout = () => {
+        console.log(`Generating ${workoutType} workout`);
+
+        try {
+            logic.getRandomWorkout(workoutType)
+                .then((workout) => {
+                    setWorkout(workout)
+                    console.log(workout)
+                })
+                .catch(error => alert(error.message))
+        } catch (error) {
+            alert(error.message)
+        }
+    }
+
+    useEffect(() => {
+        generateRandomWorkout();
+    }, [workoutType])
+
+    return (
+        <div className="workout-details">
+            {workout?.workoutType && (
+                <p>
+                    {workout.workoutType.toUpperCase()}
+                    {workout?.duration && ` ${workout.duration} min.`}
+                </p>
+            )}
+            {workout?.title && <p>{workout.title}</p>}
+            
+            {workout?.movements && workout.movements.map((movement, index) => (
+                <div key={index}>
+                    <p> {movement.quantity} {movement.name} {movement.weight}{movement.units}</p>
+                </div>
+            ))}
+            <Button onClick={generateRandomWorkout} type="button">Again!</Button>
+        </div>
+    )
+
+}
+ 
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/Workouts.jsx b/staff/debora-garcia/project/app/src/views/Workouts.jsx
index d169d24f0..a6820154f 100644
--- a/staff/debora-garcia/project/app/src/views/Workouts.jsx
+++ b/staff/debora-garcia/project/app/src/views/Workouts.jsx
@@ -1,82 +1,35 @@
-import { useNavigate, Link } from "react-router-dom"
+import { useNavigate, Link, Routes, Route, useParams} from "react-router-dom"
 import { useState, useEffect } from "react"
 import logic from "../logic"
 
-import Footer from "./components/Footer"
-import Header from "./components/Header"
-import Heading from "../components/Heading"
 import Button from "../components/Button"
-import GoBackButton from "../components/GoBackButton"
+import Emom from './Emom';
+import ForTime from './ForTime';
+import Amrap from './Amrap';
+import Benchmark from './Benchmark'
+import WorkoutDetails from "./WorkoutDetails"
 
 //TODO alert & use context
 //TODO usar Link de react-router-dom para reacer los botones del footer
-export default function Workouts({ onUserLoggedOut }) {
+export default function Workouts() {
     console.log("Workouts ->render")
-    const [username, setUsername] = useState("")
-    const navigate = useNavigate()
-    const [message, setMessage] = useState(null)
-
-
-    useEffect(() => {
-        console.log("Home -> useEffect")
-        try {
-            logic.getUsername()
-                .then((username) => {
-                    console.log("Home -> setUsername")
-
-                    setUsername(username)
-                })
-                .catch(error => {
-                    console.error(error)
-
-                    setMessage(error.message)
-                })
-        } catch (error) {
-            console.error(error)
-
-            alert(error.message)
-        }
-    }, [])
-
-    const handleGoToFeedClick = () => {
-        navigate("/feed")
-    }
-
-    const handleGoToWorkoutClick = () => {
-        navigate("/workouts")
-    }
-
-    const handleGoToAchievementClick = () => {
-        navigate("/achievements")
-    }
-
-    const handleLogout = () => {
-        logic.logoutUser()
-        //navigate("/login")
-        onUserLoggedOut()
-
-    }
-    const handlePrintInitialLetter = (username) => {
-        return username.charAt(0).toUpperCase()
-    }
-
-    return <form>
-        <Header>
-            <Heading level="1">WORKOUT</Heading>
-            <div>
-                <div className="flex flex-wrap items-center justify-center w-12 h-12 bg-gray-300 rounded-full text-white text-xl font-bold">
-                    {handlePrintInitialLetter(username)}
+    const { workoutType } = useParams(); // Captura el tipo de workout desde la URL
+    const workout = {};
+
+    return (
+        <>
+            {!workoutType ? (
+                <div className="button-container">
+                    <Link to="/workouts/emom"><Button>EMOM</Button></Link>
+                    <Link to="/workouts/for-time"><Button>FOR TIME</Button></Link>
+                    <Link to="/workouts/amrap"><Button>AMRAP</Button></Link>
+                    <Link to="/workouts/benchmark"><Button>BENCHMARK</Button></Link>
+                </div>
+            ) : (
+                <div className="workout-details">
+                    <WorkoutDetails workoutType={workoutType} workout={workout} />
                 </div>
-            </div>
-            <Button onClick={handleLogout}>Logout</Button>
-        </Header>
-        <GoBackButton />
-        <div className="button-container">
-            <Button onClick={handleGoToAchievementClick}>EMOM</Button>
-            <Button>FOR TIME</Button>
-            <Button>AMRAP</Button>
-            <Button>BENCHMARK</Button>
-        </div>
-        <Footer goToFeedClick={handleGoToFeedClick} goToWorkoutClick={handleGoToWorkoutClick} goToAchievementClick={handleGoToAchievementClick} />
-    </form>
+            )}
+        </>
+    );
 }
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/components/Footer/index.jsx b/staff/debora-garcia/project/app/src/views/components/Footer/index.jsx
index 48d8044a0..64a183ac7 100644
--- a/staff/debora-garcia/project/app/src/views/components/Footer/index.jsx
+++ b/staff/debora-garcia/project/app/src/views/components/Footer/index.jsx
@@ -1,25 +1,12 @@
 import "./index.css"
 import Button from "../../../components/Button"
+import { Link } from "react-router-dom"
 
-
-export default function Footer({ goToFeedClick, goToWorkoutClick, goToAchievementClick }) {
-
-
-    const handleGoToFeedClick = () => goToFeedClick()
-    const handleGoToWorkoutClick = () => goToWorkoutClick()
-    const handleGoToAchievementClick = () => goToAchievementClick()
-
+export default function Footer() {
+ 
     return <footer className="Footer">
-        <Button onClick={handleGoToFeedClick} className="FooterButton">
-            <i className="fa fa-house"></i>
-        </Button>
-        <Button onClick={handleGoToWorkoutClick} className="FooterButton">
-            <i className="fa fa-dumbbell"></i>
-        </Button>
-        <Button onClick={handleGoToAchievementClick} className="FooterButton">
-            <i className="fa fa-ranking-star"></i>
-        </Button>
+        <Link to="/feed"><Button className="FooterButton"><i className="fa fa-house"></i></Button></Link>
+        <Link to="/workouts"><Button className="FooterButton"><i className="fa fa-dumbbell"></i></Button></Link>
+        <Link to="/achievements"><Button className="FooterButton"><i className="fa fa-ranking-star"></i></Button></Link>
     </footer>
-
-}
-
+}
\ No newline at end of file
diff --git a/staff/debora-garcia/project/app/src/views/components/Header/index.jsx b/staff/debora-garcia/project/app/src/views/components/Header/index.jsx
index 51ec8fde0..50cfce054 100644
--- a/staff/debora-garcia/project/app/src/views/components/Header/index.jsx
+++ b/staff/debora-garcia/project/app/src/views/components/Header/index.jsx
@@ -1,7 +1,29 @@
+import Button from "../../../components/Button"
 import "./index.css"
+import { useNavigate } from "react-router-dom"
 
-export default function Header({ children }) {
+
+export default function Header({ children, username, onLogout }) {
     console.log("Header -> render")
+    const navigate = useNavigate()
+
+    const handleLogout = () => {
+        onLogout()
+    }
+
+    const handlePrintInitialLetter = (username) => {
+        return username.charAt(0).toUpperCase()
+    }
 
-    return <header className="Header">{children}</header>
-}
\ No newline at end of file
+    return (
+        <header className="Header">
+            {children}
+            <div className="flex flex-wrap items-center space-x-4">
+                <div className="flex items-center justify-center w-12 h-12 bg-gray-300 rounded-full text-white text-xl font-bold">
+                    {handlePrintInitialLetter(username)}
+                </div>
+            </div>
+            <Button onClick={handleLogout} className="logout-button">Logout</Button>
+        </header>
+    )
+}
diff --git a/staff/debora-garcia/project/app/src/views/components/Workout/Movement/index.css b/staff/debora-garcia/project/app/src/views/components/Workout/Movement/index.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/staff/debora-garcia/project/app/src/views/components/Workout/Movement/index.jsx b/staff/debora-garcia/project/app/src/views/components/Workout/Movement/index.jsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/staff/debora-garcia/project/app/src/views/components/Workout/index.css b/staff/debora-garcia/project/app/src/views/components/Workout/index.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/staff/debora-garcia/project/app/src/views/components/Workout/index.jsx b/staff/debora-garcia/project/app/src/views/components/Workout/index.jsx
deleted file mode 100644
index 9ad5f2f19..000000000
--- a/staff/debora-garcia/project/app/src/views/components/Workout/index.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Workout() {
-
-}
\ No newline at end of file
diff --git a/staff/debora-garcia/project/com/validate.js b/staff/debora-garcia/project/com/validate.js
index 93697fbd6..f8b555273 100644
--- a/staff/debora-garcia/project/com/validate.js
+++ b/staff/debora-garcia/project/com/validate.js
@@ -53,6 +53,10 @@ function validateId(id, explain = "id") {
     if (typeof id !== "string" || !ID_REGEX.test(id))
         throw new ContentError(`${explain} is not valid`)
 }
+function validateType(type, explain = "type") {
+    if (typeof type !== "string")
+        throw new ContentError(`${explain} is not valid`)
+}
 
 const validate = {
     name: validateName,
@@ -63,7 +67,8 @@ const validate = {
     email: validateEmail,
     text: validateText,
     url: validateUrl,
-    id: validateId
+    id: validateId,
+    type: validateType
 
 }
 
diff --git a/staff/debora-garcia/project/doc/README.md b/staff/debora-garcia/project/doc/README.md
index 0816f6aba..a86150337 100644
--- a/staff/debora-garcia/project/doc/README.md
+++ b/staff/debora-garcia/project/doc/README.md
@@ -97,15 +97,17 @@ Level Up allows users to generate and customize workouts, track personal bests a
 
 - id (string)
 - type (string, enum: emom|amrap|for-time|benchmark)
-- exercises ([Movement.id])
+- movements ([Movement.id])
+- rounds (number)
 - duration (number)
+- description (string)
 
 **Movement**
 
 - id (string)
 - name (string,required)
 - weight (number, optional)
-- repetitions (number, required)
+- quantity (number, required)
 - units (string)
 
 **v0.1**