diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 6f713cc384..e97346a060 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -1,4 +1,9 @@
-function Search() {
+function Search(props) {
+
+  const handleChange = (e) => {
+    props.onChange(e.target.value)
+  }
+  
   return (
     <div className="d-inline-flex justify-content-center align-items-center w-100 p-4">
       <div className="input-group mb-2 w-50">
@@ -7,7 +12,7 @@ function Search() {
             Search
           </span>
         </div>
-        <input
+        <input onChange={handleChange}
           type="text"
           className="form-control search-bar"
         />
diff --git a/src/pages/AddBeerPage.jsx b/src/pages/AddBeerPage.jsx
index 243d84b9ef..3e7031a7e5 100644
--- a/src/pages/AddBeerPage.jsx
+++ b/src/pages/AddBeerPage.jsx
@@ -1,4 +1,6 @@
+import axios from "axios";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 function AddBeerPage() {
   // State variables to store the values of the form inputs. You can leave these as they are.
@@ -28,13 +30,38 @@ function AddBeerPage() {
   // 2. Use axios to make a POST request to the Beers API.
   // 3. Once the beer is created, navigate the user to the page showing the list of all beers.
 
+  const navigate = useNavigate()
+  const BASE_URL = "https://ih-beers-api2.herokuapp.com";
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    const newBeer = {
+      name: name,
+      tagline: tagline,
+      description: description,
+      image_url: imageUrl,
+      first_brewed: firstBrewed,
+      brewers_tips: brewersTips,
+      attenuation_level: attenuationLevel,
+      contributed_by: contributedBy,
+    }
+
+    axios
+      .post(`${BASE_URL}/beers/new`, newBeer)
+      .then(()=>{
+        navigate("/beers")
+      })
+      .catch((e) => console.log("Error creating a new project...", e));
+  }
+
 
 
   // Structure and the content of the page showing the form for adding a new beer. You can leave this as it is.
   return (
     <>
       <div className="d-inline-flex flex-column w-100 p-4">
-        <form>
+        <form onSubmit={handleSubmit}>
           <label>Name</label>
           <input
             className="form-control mb-4"
diff --git a/src/pages/AllBeersPage.jsx b/src/pages/AllBeersPage.jsx
index 801a1dc5bd..aba08e224e 100644
--- a/src/pages/AllBeersPage.jsx
+++ b/src/pages/AllBeersPage.jsx
@@ -1,27 +1,46 @@
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Search from "../components/Search";
 import beersJSON from "./../assets/beers.json";
-
-
+import axios from "axios";
 
 function AllBeersPage() {
   // Mock initial state, to be replaced by data from the API. Once you retrieve the list of beers from the Beers API store it in this state variable.
-  const [beers, setBeers] = useState(beersJSON);
+  const [beers, setBeers] = useState([]);
+
+  const BASE_URL = "https://ih-beers-api2.herokuapp.com";
 
+  useEffect(() => {
+    axios
+      .get(`${BASE_URL}/beers`)
+      .then((response) => {
+        setBeers(response.data);
+      })
+      .catch((error) =>
+        console.log("Error getting project details from the API...", error)
+      );
+  }, []);
 
+  const handleSearch = (query) => {
+    axios
+      .get(`${BASE_URL}/beers/search?q=${query}`)
+      .then((response) => {
+        setBeers(response.data);
+      })
+      .catch((error) =>
+        console.log("Error getting project details from the API...", error)
+      );
+  };
 
   // TASKS:
   // 1. Set up an effect hook to make a request to the Beers API and get a list with all the beers.
   // 2. Use axios to make a HTTP request.
   // 3. Use the response data from the Beers API to update the state variable.
 
-
-
   // The logic and the structure for the page showing the list of beers. You can leave this as it is for now.
   return (
     <>
-      <Search />
+      <Search onChange={handleSearch} />
 
       <div className="d-inline-flex flex-wrap justify-content-center align-items-center w-100 p-4">
         {beers &&
@@ -29,14 +48,19 @@ function AllBeersPage() {
             return (
               <div key={i}>
                 <Link to={"/beers/" + beer._id}>
-                  <div className="card m-2 p-2 text-center" style={{ width: "24rem", height: "18rem" }}>
+                  <div
+                    className="card m-2 p-2 text-center"
+                    style={{ width: "24rem", height: "18rem" }}
+                  >
                     <div className="card-body">
                       <img
                         src={beer.image_url}
                         style={{ height: "6rem" }}
                         alt={"image of" + beer.name}
                       />
-                      <h5 className="card-title text-truncate mt-2">{beer.name}</h5>
+                      <h5 className="card-title text-truncate mt-2">
+                        {beer.name}
+                      </h5>
                       <h6 className="card-subtitle mb-3 text-muted">
                         <em>{beer.tagline}</em>
                       </h6>
diff --git a/src/pages/BeerDetailsPage.jsx b/src/pages/BeerDetailsPage.jsx
index 3669d39a64..acfa6452c2 100644
--- a/src/pages/BeerDetailsPage.jsx
+++ b/src/pages/BeerDetailsPage.jsx
@@ -1,15 +1,32 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import beersJSON from "./../assets/beers.json";
+import { useParams } from "react-router-dom";
+import axios from "axios";
 
 
 function BeerDetailsPage() {
   // Mock initial state, to be replaced by data from the Beers API. Store the beer info retrieved from the Beers API in this state variable.
-  const [beer, setBeer] = useState(beersJSON[0]);
+  const [beer, setBeer] = useState([]);
+  const BASE_URL = "https://ih-beers-api2.herokuapp.com";
 
   // React Router hook for navigation. We use it for the back button. You can leave this as it is.
   const navigate = useNavigate();
 
+  const {beerId} = useParams();
+
+  useEffect(()=>{
+    axios
+    .get(`${BASE_URL}/beers/${beerId}`)
+    .then((response)=>{
+      setBeer(response.data)
+    .catch((error) =>
+        console.log("Error getting project details from the API...", error)
+      );  
+
+    })
+  },[beerId])
+
 
 
   // TASKS:
diff --git a/src/pages/RandomBeerPage.jsx b/src/pages/RandomBeerPage.jsx
index 050bdcdcfb..253241947d 100644
--- a/src/pages/RandomBeerPage.jsx
+++ b/src/pages/RandomBeerPage.jsx
@@ -1,14 +1,17 @@
-import { useState } from "react";
+import { useState, useEffect} from "react";
 import { useNavigate } from "react-router-dom";
 import beersJSON from "./../assets/beers.json";
+import axios from "axios";
 
 
 function RandomBeersPage() {
   // Mock initial state, to be replaced by data from the Beers API. Store the beer info retrieved from the Beers API in this state variable.
-  const [randomBeer, setRandomBeer] = useState(beersJSON[0]);
+  const [randomBeer, setRandomBeer] = useState([]);
 
   // React Router hook for navigation. We use it for the back button. You can leave this as it is.
   const navigate = useNavigate();
+  const BASE_URL = "https://ih-beers-api2.herokuapp.com";
+
 
 
   
@@ -17,6 +20,16 @@ function RandomBeersPage() {
   // 2. Use axios to make a HTTP request.
   // 3. Use the response data from the Beers API to update the state variable.
 
+  useEffect(()=>{
+    axios
+    .get(`${BASE_URL}/beers/random`)
+    .then((response)=>{
+      setRandomBeer(response.data)
+    .catch((e) => console.log("Error creating a new project...", e));
+    })
+  },[])
+
+
 
 
   // The logic and the structure for the page showing the random beer. You can leave this as it is.