diff --git a/examples/react-concepts/src/App.css b/examples/react-concepts/src/App.css
index a75369a..4dbb201 100644
--- a/examples/react-concepts/src/App.css
+++ b/examples/react-concepts/src/App.css
@@ -1,5 +1,13 @@
+/**Clear default styles*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 .App {
   background-color: bisque;
   min-height: 100vh;
   font-size: 1rem;
+  height: 100vh;
 }
diff --git a/examples/react-concepts/src/App.js b/examples/react-concepts/src/App.js
index 01c5339..09333fd 100644
--- a/examples/react-concepts/src/App.js
+++ b/examples/react-concepts/src/App.js
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-
 import Input from "./components/class/Input";
-
+import Header from "./components/class/Header";
 import "./App.css";
 
 function App() {
   const [text, setText] = useState("default");
   const [name, setName] = useState("default");
+  const [showFilter, setShowFilter] = useState(false);
 
   return (
     <div
@@ -16,13 +16,24 @@ function App() {
         textAlign: "center",
       }}
     >
-      Text: <Input placeholder="Escriba su nombre" setValue={setText} />
+      <Header>
+        <h1>Welcome!!</h1>
+        <button onClick={() => setShowFilter(!showFilter)}>
+          {showFilter ? "Hide filter" : "Show filter"}
+        </button>
+      </Header>
+      {showFilter && (
+        <>
+          Text: <Input placeholder="Escriba su nombre" setValue={setText} />
+        </>
+      )}
+
       <br />
-      Nombre: <Input placeholder="Escriba su nombre" setValue={setName} />
-      {/*Apellido: <Input placeholder="Escriba su apellido" />
-      Edad: <Input placeholder="Escriba su apellido" type="number" /> */}
       <h2>Text: {text}</h2>
-      <h2>Nombre: {name}</h2>
+      {/*Nombre: <Input placeholder="Escriba su nombre" setValue={setName} />
+      Apellido: <Input placeholder="Escriba su apellido" />
+      Edad: <Input placeholder="Escriba su apellido" type="number" /> */}
+      {/* <h2>Nombre: {name}</h2> */}
     </div>
   );
 }
diff --git a/examples/react-concepts/src/components/class/Header.jsx b/examples/react-concepts/src/components/class/Header.jsx
new file mode 100644
index 0000000..f47bed8
--- /dev/null
+++ b/examples/react-concepts/src/components/class/Header.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./header.style.css";
+
+class Header extends React.Component {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <header>{this.props.children}</header>;
+  }
+}
+
+export default Header;
diff --git a/examples/react-concepts/src/components/class/Input.jsx b/examples/react-concepts/src/components/class/Input.jsx
index a97a97d..8192857 100644
--- a/examples/react-concepts/src/components/class/Input.jsx
+++ b/examples/react-concepts/src/components/class/Input.jsx
@@ -27,7 +27,7 @@ class Input extends Component {
   }
 
   componentWillUnmount() {
-    console.log("componentWillUnmount...");
+    console.log("componentWillUnmount... Se desmontó el componente");
   }
 
   render() {
diff --git a/examples/react-concepts/src/components/class/header.style.css b/examples/react-concepts/src/components/class/header.style.css
new file mode 100644
index 0000000..4e9602f
--- /dev/null
+++ b/examples/react-concepts/src/components/class/header.style.css
@@ -0,0 +1,9 @@
+header {
+  height: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 2rem;
+  background-color: maroon;
+  color: white;
+}