diff --git a/package-lock.json b/package-lock.json
index 3c65e57..5207e4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3085,6 +3086,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
+      "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -13971,6 +13980,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
+      "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
+      "dependencies": {
+        "@remix-run/router": "1.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
+      "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
+      "dependencies": {
+        "@remix-run/router": "1.15.0",
+        "react-router": "6.22.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18835,6 +18874,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
+      "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26585,6 +26629,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
+      "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
+      "requires": {
+        "@remix-run/router": "1.15.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
+      "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
+      "requires": {
+        "@remix-run/router": "1.15.0",
+        "react-router": "6.22.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 022d9bf..1e34cca 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/public/index.html b/public/index.html
index aa069f2..35a6cc8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
+   <link rel="stylesheet" href="./style.css"/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..ee5d9bd
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,52 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+/* styles.css */
+/* Existing styles ... */
+
+.new-beer-container {
+    padding: 20px;
+  }
+
+  .new-beer {
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  .new-beer label {
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  .new-beer input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+  }
+
+  .new-beer button {
+    width:100%;
+    border-radius:30px;
+    background-color:rgb(14, 180, 202);
+    font-size: 26px;
+    color:white;
+    padding: 20px;
+    border:none;
+  }
+
+  .beer{
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: baseline;
+    width:100vw;
+    height:100vh;
+  }
+  .beer div{
+    margin:25px;
+  } 
+  .beer img{
+    width:70px;
+  }
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index 74b5e05..a92568e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,39 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+img{
+  width:60%;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+p{
+  font-size: 17px;
 }
-
-.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;
+h1{
+  color:black;
 }
-
-.App-link {
-  color: #61dafb;
+h1:hover{
+  color:tomato;
 }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.box{
+  margin:30px 40px;
+  padding:20px;
+  border:3px solid grey;
+  padding:10px;
+  border-radius: 7px;
+  overflow: auto;
+}
+.box:hover{
+  background-color: rgb(218, 218, 218);
+  border-color:rgb(218, 218, 218);
+}
+.box img{
+  float:left;
+  margin-right:18px;
+}
+.navbar{
+  padding:30px;
+  text-align: center;
+  background-color:rgb(14, 180, 202);
+  width:100;
 }
+.navbar i{
+  color:white;
+  font-size: 40px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..f963920 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,25 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import BeerList from './components/BeerList';
+import BeerDetails from './components/BeerDetails';
+import RandomBeer from './components/RandomBeer';
+import NewBeerForm from './components/NewBeerForm';
+import './App.css'
+import HomePage from './components/HomePage';
+
+const App = () => {
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/beers" element={<BeerList />} />
+        <Route path="/beers/:beerId" element={<BeerDetails />} />
+        <Route path="/random-beer" element={<RandomBeer />} />
+        <Route path="/new-beer" element={<NewBeerForm />} />
+      </Routes>
+    </Router>
   );
-}
+};
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/BeerDetails.js b/src/components/BeerDetails.js
new file mode 100644
index 0000000..dfb043b
--- /dev/null
+++ b/src/components/BeerDetails.js
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import Navbar from './Navbar';
+
+const BeerDetails = () => {
+  const { beerId } = useParams();
+  const [beer, setBeer] = useState(null);
+
+  useEffect(() => {
+    // Fetch data for the selected beer
+    fetch(`https://ih-beers-api2.herokuapp.com/beers/${beerId}`)
+      .then((response) => response.json())
+      .then((data) => setBeer(data))
+      .catch((error) => console.error('Error fetching beer details:', error));
+  }, [beerId]);
+
+  if (!beer) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+    <Navbar/>
+    <div>
+      <h2>{beer.name}</h2>
+      <img src={beer.image_url} alt={beer.name} style={{ maxWidth: '100px' }} />
+      <p>{beer.tagline}</p>
+      <p>First Brewed: {beer.first_brewed}</p>
+      <p>Attenuation Level: {beer.attenuation_level}</p>
+      <p>Description: {beer.description}</p>
+      <p>Contributed by: {beer.contributed_by}</p>
+      </div>
+    </div>
+  );
+};
+
+export default BeerDetails;
\ No newline at end of file
diff --git a/src/components/BeerList.js b/src/components/BeerList.js
new file mode 100644
index 0000000..10c43ea
--- /dev/null
+++ b/src/components/BeerList.js
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Navbar from './Navbar';
+
+const BeerList = () => {
+  const [beers, setBeers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    // Fetch data from the API
+    fetch(`https://ih-beers-api2.herokuapp.com/beers/search?q=${searchQuery}`)
+      .then((response) => response.json() )
+      .then((data) => setBeers(data))
+      .catch((error) => console.error('Error fetching data:', error));
+  }, [searchQuery]);
+
+  const handleSearchChange = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div>
+      <Navbar/>
+      <div>
+      <h1>All Beers</h1>
+      <input type="text" placeholder="Search for beers" onChange={handleSearchChange} />
+      <div className='beer'>
+        {beers.map((beer) => (
+          <div key={beer.id}>
+            <img src={beer.image_url} alt={beer.name}/>
+            <h3>{beer.name}</h3>
+            <p>{beer.tagline}</p>
+            <p>Contributed by: {beer.contributed_by}</p>
+            <Link to={`/beers/${beer.id}`}>Details</Link>
+          </div>
+        ))}
+      </div>
+      </div>
+    </div>
+  );
+};
+
+export default BeerList;
\ No newline at end of file
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
new file mode 100644
index 0000000..4c03730
--- /dev/null
+++ b/src/components/HomePage.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import beersImage from '../assets/beers.png';
+import randomBeerImage from '../assets/random-beer.png';
+import newBeerImage from '../assets/new-beer.png';
+function HomePage(){
+    return (
+        <div>
+        <div className='box'>
+        <img src={beersImage} alt='beer_pic'></img>
+        <Link to="/beers"><h1>All Beers</h1></Link>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate lorem ac dolor euismod hendrerit. Maecenas lacinia tempus massa, at iaculis arcu. Vestibulum a eros ut sapien porttitor finibus. Curabitur risus velit, laoreet id molestie ut, placerat non quam. Proin posuere enim at massa porttitor volutpat. Vivamus vel scelerisque nulla. Proin blandit massa a rhoncus imperdiet. Suspendisse ac dapibus lorem. Sed posuere ullamcorper lorem. Nullam quis iaculis leo.</p>
+      </div>
+
+      <div className='box'>
+        <img src={randomBeerImage} alt="random-beer"></img>
+        <Link to="/random-beer"><h1>Random Beer</h1></Link>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate lorem ac dolor euismod hendrerit. Maecenas lacinia tempus massa, at iaculis arcu. Vestibulum a eros ut sapien porttitor finibus. Curabitur risus velit, laoreet id molestie ut, placerat non quam. Proin posuere enim at massa porttitor volutpat. Vivamus vel scelerisque nulla. Proin blandit massa a rhoncus imperdiet. Suspendisse ac dapibus lorem. Sed posuere ullamcorper lorem. Nullam quis iaculis leo.</p>
+      </div>
+     
+      <div className='box'>
+        <img src={newBeerImage} alt="new-beer"></img>
+        <Link to="/new-beer"><h1>New Beer</h1></Link>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate lorem ac dolor euismod hendrerit. Maecenas lacinia tempus massa, at iaculis arcu. Vestibulum a eros ut sapien porttitor finibus. Curabitur risus velit, laoreet id molestie ut, placerat non quam. Proin posuere enim at massa porttitor volutpat. Vivamus vel scelerisque nulla. Proin blandit massa a rhoncus imperdiet. Suspendisse ac dapibus lorem. Sed posuere ullamcorper lorem. Nullam quis iaculis leo.</p>
+        </div>
+        </div>
+    )
+}
+export default HomePage
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..36d6583
--- /dev/null
+++ b/src/components/Navbar.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+function Navbar()
+{
+  return (
+    <div className='navbar'>
+        <Link to="/">
+            <i class="fa-solid fa-house"></i>
+        </Link>
+    </div>
+  )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/src/components/NewBeerForm.js b/src/components/NewBeerForm.js
new file mode 100644
index 0000000..40f3c4d
--- /dev/null
+++ b/src/components/NewBeerForm.js
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import Navbar from './Navbar';
+
+const NewBeerForm = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    tagline: '',
+    description: '',
+    first_brewed: '',
+    brewers_tips: '',
+    attenuation_level: '',
+    contributed_by: '',
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Perform POST request to create a new beer
+    fetch('https://ih-beers-api2.herokuapp.com/beers/new', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log('New beer created successfully:', data);
+      })
+      .catch((error) => console.error('Error creating new beer:', error));
+  };
+
+  return (
+    <div>
+        <Navbar/>
+    <form className="new-beer" onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" name="name" value={formData.name} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Tagline:
+        <input type="text" name="tagline" value={formData.tagline} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Description:
+        <input type="text" name="description" value={formData.description} onChange={handleInputChange} required />
+      </label>
+      <label>
+        First Brewed:
+        <input type="text" name="first_brewed" value={formData.first_brewed} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Brewers Tips:
+        <input type="text" name="brewers_tips" value={formData.brewers_tips} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Attenuation Level:
+        <input type="number" name="attenuation_level" value={formData.attenuation_level} onChange={handleInputChange} required />
+      </label>
+      <label>
+        Contributed By:
+        <input type="text" name="contributed_by" value={formData.contributed_by} onChange={handleInputChange} required />
+      </label>
+      <button type="submit">Create Beer</button>
+    </form>
+  </div>
+  );
+};
+
+export default NewBeerForm;
\ No newline at end of file
diff --git a/src/components/RandomBeer.js b/src/components/RandomBeer.js
new file mode 100644
index 0000000..f26c07b
--- /dev/null
+++ b/src/components/RandomBeer.js
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import Navbar from './Navbar';
+
+const RandomBeer = () => {
+  const [randomBeer, setRandomBeer] = useState(null);
+
+  useEffect(() => {
+    // Fetch data for a random beer
+    fetch('https://ih-beers-api2.herokuapp.com/beers/random')
+      .then((response) => response.json())
+      .then((data) => setRandomBeer(data))
+      .catch((error) => console.error('Error fetching random beer details:', error));
+  }, []);
+
+  if (!randomBeer) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+     <Navbar/>
+    <div>
+      <h2>{randomBeer.name}</h2>
+      <img src={randomBeer.image_url} alt={randomBeer.name} style={{ maxWidth: '100px' }} />
+      <p>{randomBeer.tagline}</p>
+      <p>First Brewed: {randomBeer.first_brewed}</p>
+      <p>Attenuation Level: {randomBeer.attenuation_level}</p>
+      <p>Description: {randomBeer.description}</p>
+      <p>Contributed by: {randomBeer.contributed_by}</p>
+    </div>
+    </div>
+  );
+};
+
+export default RandomBeer;
\ No newline at end of file