diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index f856453..2549671 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@react-google-maps/api": "^2.19.3",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2364,6 +2365,23 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
+      "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
+    "node_modules/@googlemaps/markerclusterer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
+      "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "supercluster": "^8.0.1"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -3247,6 +3265,33 @@
         }
       }
     },
+    "node_modules/@react-google-maps/api": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.3.tgz",
+      "integrity": "sha512-jiLqvuOt5lOowkLeq7d077AByTyJp+s6hZVlLhlq7SBacBD37aUNpXBz2OsazfeR6Aw4a+9RRhAEjEFvrR1f5A==",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "1.16.2",
+        "@googlemaps/markerclusterer": "2.5.3",
+        "@react-google-maps/infobox": "2.19.2",
+        "@react-google-maps/marker-clusterer": "2.19.2",
+        "@types/google.maps": "3.55.2",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@react-google-maps/infobox": {
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz",
+      "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg=="
+    },
+    "node_modules/@react-google-maps/marker-clusterer": {
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz",
+      "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw=="
+    },
     "node_modules/@remix-run/router": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
@@ -4012,6 +4057,11 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/google.maps": {
+      "version": "3.55.2",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.2.tgz",
+      "integrity": "sha512-JcTwzkxskR8DN/nnX96Pie3gGN3WHiPpuxzuQ9z3516o1bB243d8w8DHUJ8BohuzoT1o3HUFta2ns/mkZC8KRw=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.7.tgz",
@@ -9295,6 +9345,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -11987,6 +12045,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -16118,6 +16181,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/app/frontend/package.json b/app/frontend/package.json
index 61af867..2614db3 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-google-maps/api": "^2.19.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/app/frontend/public/favicon.ico b/app/frontend/public/favicon.ico
deleted file mode 100644
index a11777c..0000000
Binary files a/app/frontend/public/favicon.ico and /dev/null differ
diff --git a/app/frontend/public/index.html b/app/frontend/public/index.html
index aa069f2..20d3cdd 100644
--- a/app/frontend/public/index.html
+++ b/app/frontend/public/index.html
@@ -1,15 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/lionLogo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Zoo Functions</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/app/frontend/public/lionLogo.png b/app/frontend/public/lionLogo.png
new file mode 100644
index 0000000..3f1f359
Binary files /dev/null and b/app/frontend/public/lionLogo.png differ
diff --git a/app/frontend/public/logo192.png b/app/frontend/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/app/frontend/public/logo192.png and /dev/null differ
diff --git a/app/frontend/public/logo512.png b/app/frontend/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/app/frontend/public/logo512.png and /dev/null differ
diff --git a/app/frontend/public/manifest.json b/app/frontend/public/manifest.json
index 080d6c7..7e2ec8c 100644
--- a/app/frontend/public/manifest.json
+++ b/app/frontend/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "lionLogo.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "lionLogo.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "lionLogo.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/app/frontend/src/App.css b/app/frontend/src/App.css
index 74b5e05..e69de29 100644
--- a/app/frontend/src/App.css
+++ b/app/frontend/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/app/frontend/src/App.js b/app/frontend/src/App.js
index f16f165..cb932fb 100644
--- a/app/frontend/src/App.js
+++ b/app/frontend/src/App.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Home from './pages/Home'
 import './App.css';
+import './css/header.css'
+import './css/home.css'
 
 
 class App extends React.Component {
diff --git a/app/frontend/src/componets/Header.js b/app/frontend/src/componets/Header.js
index e69de29..6fa59ec 100644
--- a/app/frontend/src/componets/Header.js
+++ b/app/frontend/src/componets/Header.js
@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import lionLogo from '../images/lionLogo.png';
+
+function Header() {
+  return (
+    <header>
+      <div id="header-image">
+        <img src={lionLogo} alt="logo" id="logo" />
+      </div>
+      <div id="header-link">
+        <Link to='entradas' className="button-header">Entradas</Link>
+        <Link to='' className="button-header">Cronogramas</Link>
+        <Link to='' className="button-header">Colaboradores</Link>
+        <Link to='' className="button-header">Animais</Link>
+        <Link to='' className="button-header" id="button-login">Login</Link>
+        <Link to='' className="button-header" id="button-cadastro">Cadastro</Link>
+      </div>
+    </header>
+  );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/app/frontend/src/css/header.css b/app/frontend/src/css/header.css
new file mode 100644
index 0000000..3ea6efb
--- /dev/null
+++ b/app/frontend/src/css/header.css
@@ -0,0 +1,38 @@
+header {
+    background-color: rgba(7, 49, 0, 1);
+}
+
+#header-link {
+    text-align: end;
+    display: inline-block;
+    width: 60%;
+    padding-top: 20px;
+}
+
+#header-image {
+    width: 40%;
+    text-align: start;
+    display: inline-block;
+}
+
+.button-header {
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 10px;
+    height: 40px;
+}
+
+#button-login {
+    background-color: rgba(9, 36, 5, 1);
+}
+
+#button-cadastro {
+    background-color: rgba(6, 23, 3, 1);
+}
+
+#logo {
+    width: 50px;
+    text-align: start;
+}
\ No newline at end of file
diff --git a/app/frontend/src/css/home.css b/app/frontend/src/css/home.css
new file mode 100644
index 0000000..9bdd583
--- /dev/null
+++ b/app/frontend/src/css/home.css
@@ -0,0 +1,3 @@
+#home-image-lion, #home-image-penguin {
+   width: 100%;
+}
\ No newline at end of file
diff --git a/app/frontend/src/images/girafa.jpg b/app/frontend/src/images/girafa.jpg
new file mode 100644
index 0000000..fb7b3a3
Binary files /dev/null and b/app/frontend/src/images/girafa.jpg differ
diff --git a/app/frontend/src/images/lion.jpg b/app/frontend/src/images/lion.jpg
new file mode 100644
index 0000000..15899cc
Binary files /dev/null and b/app/frontend/src/images/lion.jpg differ
diff --git a/app/frontend/src/images/lionLogo.png b/app/frontend/src/images/lionLogo.png
new file mode 100644
index 0000000..3f1f359
Binary files /dev/null and b/app/frontend/src/images/lionLogo.png differ
diff --git a/app/frontend/src/images/poucos-pinguins.jpg b/app/frontend/src/images/poucos-pinguins.jpg
new file mode 100644
index 0000000..f4e0454
Binary files /dev/null and b/app/frontend/src/images/poucos-pinguins.jpg differ
diff --git a/app/frontend/src/images/tigre.jpg b/app/frontend/src/images/tigre.jpg
new file mode 100644
index 0000000..4097ef3
Binary files /dev/null and b/app/frontend/src/images/tigre.jpg differ
diff --git a/app/frontend/src/logo.svg b/app/frontend/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/app/frontend/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/app/frontend/src/pages/Entradas.js b/app/frontend/src/pages/Entradas.js
new file mode 100644
index 0000000..e69de29
diff --git a/app/frontend/src/pages/Home.js b/app/frontend/src/pages/Home.js
index d35a533..d3bdd81 100644
--- a/app/frontend/src/pages/Home.js
+++ b/app/frontend/src/pages/Home.js
@@ -1,6 +1,72 @@
+import React from 'react'
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+
+import Header from "../componets/Header";
+import lion from '../images/lion.jpg';
+import penguin from '../images/poucos-pinguins.jpg';
+import girafa from '../images/girafa.jpg';
+import tigre from '../images/tigre.jpg';
+
 function Home() {
+  const containerStyle = {
+    width: '400px',
+    height: '400px'
+  };
+  
+  const center = { lat: -25.559623473260427, lng: -49.2314230896749 };
+
+    const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: "YOUR_API_KEY"
+  })
+
+  const [map, setMap] = React.useState(null)
+
+  const onLoad = React.useCallback(function callback(map) {
+    // This is just an example of getting and using the map instance!!! don't just blindly copy!
+    const bounds = new window.google.maps.LatLngBounds(center);
+    map.fitBounds(bounds);
+
+    setMap(map)
+  }, [])
+
+  const onUnmount = React.useCallback(function callback(map) {
+    setMap(null)
+  }, [])
+
   return (
-    <h1>Teste</h1>
+    <div>
+      <Header />
+      <img src={lion} id="home-image-lion" />
+      <div>
+      <h1>Parque Zoológico Municipal de Curitiba</h1>
+      <p>O Parque Zoológico Municipal de Curitiba tem como objetivo garantir qualidade de vida para animais selvagens obtidos na caça ilegal, dando-lhes alimentação adequada, atividades desenvolvidas por biólogos e um local protegido de serem caçados.</p>
+      <img src={penguin} id="home-image-penguin" />
+      <h2>Conservação</h2>
+      <p>Alguns dos animais não podem voltar a natureza por não fazer parte do habitate e é custoso de mandá-los de volta com algum biologo para ajudá-lo a ser inserido. Por isso, tentamos imitar o seu habitate natural com as atividades propostas e dietas restritas</p>
+      <img src={girafa} id="home-image-lion" />
+      <h2>Biólogos</h2>
+      <p>Nossos biólogos são escolhidos com cuidado para que eles consigam atender cada espécie com sua própria necessidade.</p>
+      <img src={tigre} id="home-image-lion" />
+      <h2>Doações</h2>
+      <p>Felizmente, nossos ganhos são suficientes para nos manter, porém com a ajuda da população, podemos melhorar nossas atividades e aumentarmos o número de animais resgatados.</p>
+      </div>
+      <h1>Dia de Funcionamento</h1>
+      <p>Terça à Domingo.</p>
+      <button>Saiba mais sobre os horários</button>
+      <h3>Localização: Rua inexistente, 05. Centro. Curitiba Paraná Contato: Whatsapp, email telefone fixo Redes sociais Instagram, facebook e Youtube.</h3>
+{ isLoaded ? <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={10}
+        onLoad={onLoad}
+        onUnmount={onUnmount}
+        >
+        { /* Child components, such as markers, info windows, etc. */ }
+        <></>
+      </GoogleMap> : <></> }
+      <p>Mais informações: Home, ingressos, funcionarios, horarios</p>
+    </div>
   );
 }