diff --git a/package-lock.json b/package-lock.json
index d6b5fd56a..8991183f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "project",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "bootstrap": "^5.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -21,6 +23,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "vite": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -137,6 +142,53 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -11347,7 +11399,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -11358,7 +11409,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11366,8 +11416,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react": {
       "version": "18.2.0",
diff --git a/package.json b/package.json
index 00c2157f5..ac58b1fbc 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "bootstrap": "^5.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index 74bc8d768..67b64055f 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,28 +1,89 @@
-import React from "react";
+import React, { Component } from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import TemporizadorDeSegundos from "./TemporizadorDeSegundos";
+import { faPlay, faPause, faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
+class Home extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            timerSeconds: 0,
+            estaPausa: false,
+            estaAlertado: false,
+            alertaEnEntrada: "100"
+        };
+        this.interval = setInterval(this.incrementarTemporizador, 1000);
+    }
 
-//create your first component
-const Home = () => {
-	return (
-		<div className="text-center">
-            
+    incrementarTemporizador = () => {
+        if (!this.state.estaPausa) {
+            this.setState(prevState => {
+                const nuevoTiempo = prevState.timerSeconds + 1;
+                const alertaEnNumero = Number(prevState.alertaEnEntrada);
+                return {
+                    timerSeconds: nuevoTiempo,
+                    estaAlertado: nuevoTiempo >= alertaEnNumero
+                };
+            });
+        }
+    };
 
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<p>
-				<img src={rigoImage} />
-			</p>
-			<a href="#" className="btn btn-success">
-				If you see this green button... bootstrap is working...
-			</a>
-			<p>
-				Made by{" "}
-				<a href="http://www.4geeksacademy.com">4Geeks Academy</a>, with
-				love!
-			</p>
-		</div>
-	);
-};
+    manejarCambioEntrada = (event) => {
+        const nuevoValor = event.target.value;
+        this.setState(prevState => ({
+            alertaEnEntrada: nuevoValor,
+            estaAlertado: prevState.timerSeconds >= Number(nuevoValor)
+        }));
+    };
 
-export default Home;
\ No newline at end of file
+    alternarPausa = () => {
+        this.setState(prevState => ({ estaPausa: !prevState.estaPausa }));
+    };
+
+    temporizadorDeReinicio = () => {
+        this.setState({ timerSeconds: 0, estaAlertado: false });
+    };
+
+    render() {
+        return (
+            <div className="container d-flex flex-column align-items-center py-4">
+                {this.state.estaAlertado && 
+                    <div className="alert alert-danger" role="alert">
+                        {'Alerta!! El temporizador ha alcanzado ' + this.state.alertaEnEntrada + ' segundos.'}
+                    </div>
+                }
+                <TemporizadorDeSegundos segundos={this.state.timerSeconds} />
+                
+                <div className="row justify-content-center my-3">
+                    <div className="col-auto">
+                        <button type="button" className="btn btn-secondary mx-2" onClick={this.alternarPausa}>
+                            {!this.state.estaPausa ? <FontAwesomeIcon icon={faPause} /> : <FontAwesomeIcon icon={faPlay} />}
+                        </button>
+                        <button type="button" className="btn btn-secondary mx-2" onClick={this.temporizadorDeReinicio}>
+                            <FontAwesomeIcon icon={faArrowsRotate} />
+                        </button>
+                    </div>
+                </div>
+                
+                <div className="row justify-content-center">
+                    <div className="col-auto">
+                        <div className="input-group">
+                            <div className="input-group-prepend">
+                                <span className="input-group-text">Alerta en</span>
+                            </div>
+                            <input
+                                type="text"
+                                className="form-control text-center"
+                                aria-label="alerta en (segundos)"
+                                onChange={this.manejarCambioEntrada}
+                                value={this.state.alertaEnEntrada}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Home;
diff --git a/src/js/components/TarjetaTemporizadora.jsx b/src/js/components/TarjetaTemporizadora.jsx
new file mode 100644
index 000000000..3a3910619
--- /dev/null
+++ b/src/js/components/TarjetaTemporizadora.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClock } from '@fortawesome/free-solid-svg-icons'
+
+const TarjetaTemporizadora = (props) => {
+    return (
+        <div className="TarjetaTemporizadora">
+            {props.isIcon && <FontAwesomeIcon icon={faClock} style={{color: "#ffffff",}} />}
+            {
+                !props.isIcon && props.numero
+            }
+        </div>
+    );
+};
+
+TarjetaTemporizadora.propTypes = {
+    isIcon: PropTypes.bool,
+    numero: PropTypes.number
+};
+
+export default TarjetaTemporizadora;
\ No newline at end of file
diff --git a/src/js/components/TemporizadorDeSegundos.jsx b/src/js/components/TemporizadorDeSegundos.jsx
new file mode 100644
index 000000000..cce03fd45
--- /dev/null
+++ b/src/js/components/TemporizadorDeSegundos.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TarjetaTemporizadora from "./TarjetaTemporizadora";
+
+function ObtenerSegundosCadena(seconds) {
+    let text = seconds.toString();
+    if (text.length > 6) {
+        return text
+    }
+    return "0".repeat(6-text.length) + text
+
+}
+
+
+const TemporizadorDeSegundos = (props) => {
+    const segundos = ObtenerSegundosCadena(props.segundos)
+    console.log("seconds: " + segundos)
+    return (
+        <>
+            <div className="container-fluid justify-content-center mx-auto d-flex flex-row align-items-center text-center timer-container">
+                <div className="tcard" key="icon">
+                    <TarjetaTemporizadora isIcon={true} />
+                </div>
+                {segundos.split("").map((num, i) => (
+                    <div className="tcard" key={i + 1}>
+                        <TarjetaTemporizadora isIcon={false} numero={Number(num)} />
+                    </div>
+                ))}
+            </div>
+        </>
+    );
+};
+
+TemporizadorDeSegundos.propTypes = {
+    segundos: PropTypes.number
+};
+
+export default TemporizadorDeSegundos;
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 50716eb70..0228fee93 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -9,3 +9,25 @@
     import 'relative/path/to/stylesheet.scss';
 
 */
+
+.timer-container {
+    gap: 50px; 
+    background-color: black;
+}
+
+.timer-container img {
+    height: 85%;
+    width: 100%;
+  }
+
+.TarjetaTemporizadora {
+    color: white;
+    background-color: rgb(42, 42, 42);
+    height: 175px;
+    width: 150px;
+    text-align: center;
+    font-size: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file