diff --git a/react-project/src/App.jsx b/react-project/src/App.jsx
index 4f03aa1..ae22c43 100644
--- a/react-project/src/App.jsx
+++ b/react-project/src/App.jsx
@@ -1,34 +1,13 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
+import reactLogo from "./assets/react.svg";
+import viteLogo from "./assets/vite.svg";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          type="button"
-          className="counter"
-          onClick={() => setCount((count) => count + 1)}
-        >
-          Count is {count}
-        </button>
-      </section>
+      <Header />
 
       <div className="ticks"></div>
 
@@ -115,8 +94,9 @@ function App() {
 
       <div className="ticks"></div>
       <section id="spacer"></section>
+      <Footer />
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/react-project/src/components/Footer.jsx b/react-project/src/components/Footer.jsx
new file mode 100644
index 0000000..f86f20d
--- /dev/null
+++ b/react-project/src/components/Footer.jsx
@@ -0,0 +1,9 @@
+function Footer() {
+  return (
+    <div id="foot">
+      <h3>The react project</h3>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/react-project/src/components/Header.jsx b/react-project/src/components/Header.jsx
new file mode 100644
index 0000000..a198e37
--- /dev/null
+++ b/react-project/src/components/Header.jsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+function Header() {
+  const [count, setCount] = useState(0);
+  return (
+    <section id="center">
+      <div>
+        <h1>The react project</h1>
+        <p>
+          Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
+        </p>
+      </div>
+      <button
+        type="button"
+        className="counter"
+        onClick={() => setCount((count) => count + 1)}
+      >
+        Count is {count}
+      </button>
+    </section>
+  );
+}
+
+export default Header;