diff --git a/package-lock.json b/package-lock.json
index 3c65e57..96884b9 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.27.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3085,6 +3086,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "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.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.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.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg=="
+    },
     "@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.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "requires": {
+        "@remix-run/router": "1.20.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "requires": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.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..60d5689 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.27.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.css b/src/App.css
index 74b5e05..d512e83 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,152 @@
-.App {
-  text-align: center;
+/* Reset some default browser styles */
+body, html, h1, h2, h3, p, ul, li {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+/* Overall page styles */
+body {
+  background-color: #f4f4f4;
+  color: #333;
+  padding: 20px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* Style for the Header */
+.header {
+  background-color: #00aaff;
+  padding: 10px 20px;
+  text-align: center;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.header a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+/* Home Page Styles */
+.home {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.home a {
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.home img {
+  width: 100%;
+  max-width: 300px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.home h2 {
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+/* Beers List Styles */
+.beers-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.beers-list div {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.beers-list img {
+  height: 150px;
+  object-fit: contain;
+}
+
+.beers-list h3 {
+  font-size: 18px;
+  margin-top: 10px;
+}
+
+/* Beer Detail Page Styles */
+.beer-detail {
+  background-color: #fff;
+  padding: 20px;
+  margin: 20px auto;
+  max-width: 600px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.beer-detail img {
+  height: 250px;
+  margin-bottom: 20px;
+}
+
+.beer-detail h2 {
+  font-size: 28px;
+  margin-bottom: 10px;
+}
+
+.beer-detail p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+/* New Beer Form Styles */
+form {
+  background-color: #fff;
+  padding: 20px;
+  margin: 20px auto;
+  max-width: 400px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+form input, form textarea {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+form button {
+  width: 100%;
+  padding: 10px;
+  background-color: #00aaff;
   color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+form button:hover {
+  background-color: #0077cc;
 }
 
-.App-link {
-  color: #61dafb;
+/* General Utility Classes */
+.text-center {
+  text-align: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.mt-20 {
+  margin-top: 20px;
 }
diff --git a/src/App.js b/src/App.js
index 3784575..27d9907 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+// src/App.js
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './components/Home';
+import Beers from './components/Beers';
+import BeerDetail from './components/BeerDetail';
+import NewBeer from './components/NewBeer';
+import RandomBeer from './components/RandomBeer';
+import 'D:/Palak Jain/lab-react-FullStackDrinks/src/components/style.css';
 
-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>
-  );
-}
+const App = () => {
+  const [beers, setBeers] = useState([]);
+
+    const addBeer = (newBeer) => {
+        setBeers([...beers, newBeer]); // Update beers list
+    };
+    return (
+        <Router>
+            <div className="App">
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/beers" element={<Beers beers={beers}  />} />
+                    <Route path="/beers/:id" element={<BeerDetail beers={beers} />} />
+                    <Route path="/new-beer" element={<NewBeer addBeer={addBeer}/>} />
+                    <Route path="/random-beer" element={<RandomBeer beers={beers}/>} />
+                </Routes>
+            </div>
+        </Router>
+    );
+};
 
 export default App;
diff --git a/src/components/BeerDetail.js b/src/components/BeerDetail.js
new file mode 100644
index 0000000..b4168ca
--- /dev/null
+++ b/src/components/BeerDetail.js
@@ -0,0 +1,35 @@
+// src/components/BeerDetail.js
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import './style.css';
+
+const BeerDetail = () => {
+    const { id } = useParams();
+    const [beer, setBeer] = useState(null);
+
+    useEffect(() => {
+        const fetchBeerDetail = async () => {
+            const response = await fetch(`https://api.punkapi.com/v2/beers/${id}`);
+            const data = await response.json();
+            setBeer(data[0]);
+        };
+        fetchBeerDetail();
+    }, [id]);
+
+    return (
+        <div className="beer-detail">
+            {beer ? (
+                <>
+                    <h2>{beer.name}</h2>
+                    <img src={beer.image_url} alt={beer.name} />
+                    <p>{beer.description}</p>
+                    <p><strong>ABV:</strong> {beer.abv}%</p>
+                </>
+            ) : (
+                <p>Loading...</p>
+            )}
+        </div>
+    );
+};
+
+export default BeerDetail;
diff --git a/src/components/Beers.js b/src/components/Beers.js
new file mode 100644
index 0000000..85c2ed7
--- /dev/null
+++ b/src/components/Beers.js
@@ -0,0 +1,21 @@
+// src/components/Beers.js
+import React from 'react';
+
+const Beers = ({ beers }) => {
+    return (
+        <div className="beers">
+            <h2>All Beers</h2>
+            <ul>
+                {beers.map((beer, index) => (
+                    <li key={index}>
+                        <img src={beer.image} alt={beer.name} />
+                        <h3>{beer.name}</h3>
+                        <p>{beer.description}</p>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default Beers;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..d92ca66
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <header className="header">
+      <Link to="/">
+        <h1>Home</h1>
+      </Link>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..7cd2a89
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,21 @@
+// src/components/Home.js
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './style.css';
+import beersImg from '../assets/beers.png';
+
+const Home = () => {
+    return (
+        <div className="home">
+            <h1>Welcome to FullStackDrinks</h1>
+            <img src={beersImg} alt="Beers" className="home-image" />
+            <div className="home-links">
+                <Link to="/beers" className="home-link">All Beers</Link>
+                <Link to="/random-beer" className="home-link">Random Beer</Link>
+                <Link to="/new-beer" className="home-link">New Beer</Link>
+            </div>
+        </div>
+    );
+};
+
+export default Home;
diff --git a/src/components/NewBeer.js b/src/components/NewBeer.js
new file mode 100644
index 0000000..8ed3378
--- /dev/null
+++ b/src/components/NewBeer.js
@@ -0,0 +1,55 @@
+// src/components/NewBeer.js
+import React, { useState } from 'react';
+import './style.css';
+import newBeerImg from '../assets/new-beer.png'; // Import your image
+
+const NewBeer = ({ addBeer }) => {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [image, setImage] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const newBeer = {
+            name,
+            description,
+            image,
+        };
+        addBeer(newBeer); // Call the function passed from App.js
+        setName('');
+        setDescription('');
+        setImage('');
+    };
+    return (
+        <div className="new-beer">
+            <h2>Add a New Beer</h2>
+            <img src={newBeerImg} alt="New Beer" className="new-beer-image" />
+            <form onSubmit={handleSubmit}>
+                <input
+                    type="text"
+                    placeholder="Beer Name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    required
+                />
+                <input
+                    type="text"
+                    placeholder="Description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    required
+                />
+                <input
+                    type="text"
+                    placeholder="Image URL"
+                    value={image}
+                    onChange={(e) => setImage(e.target.value)}
+                    required
+                />
+                <button type="submit">Add Beer</button>
+            </form>
+        </div>
+    );
+};
+
+export default NewBeer;
diff --git a/src/components/RandomBeer.js b/src/components/RandomBeer.js
new file mode 100644
index 0000000..e512979
--- /dev/null
+++ b/src/components/RandomBeer.js
@@ -0,0 +1,33 @@
+// src/components/RandomBeer.js
+import React, { useEffect, useState } from 'react';
+import './style.css';
+
+const RandomBeer = () => {
+    const [beer, setBeer] = useState(null);
+
+    useEffect(() => {
+        const fetchRandomBeer = async () => {
+            const response = await fetch('https://api.punkapi.com/v2/beers/random');
+            const data = await response.json();
+            setBeer(data[0]);
+        };
+        fetchRandomBeer();
+    }, []);
+
+    return (
+        <div className="random-beer">
+            {beer ? (
+                <>
+                    <h2>{beer.name}</h2>
+                    <img src={beer.image_url} alt={beer.name} />
+                    <p>{beer.description}</p>
+                    <p><strong>ABV:</strong> {beer.abv}%</p>
+                </>
+            ) : (
+                <p>Loading...</p>
+            )}
+        </div>
+    );
+};
+
+export default RandomBeer;
diff --git a/src/components/style.css b/src/components/style.css
new file mode 100644
index 0000000..10967b3
--- /dev/null
+++ b/src/components/style.css
@@ -0,0 +1,121 @@
+/* src/style.css */
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f9fa; 
+}
+
+h1, h2, h3 {
+    color: #343a40; 
+}
+
+.container {
+    max-width: 1200px;
+    margin: auto; 
+    padding: 20px; 
+}
+
+.home {
+    text-align: center;
+    margin: 20px;
+}
+
+.home-image {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+    border-radius: 10px; 
+}
+
+.home-links {
+    display: flex; 
+    justify-content: center; 
+    gap: 20px; 
+}
+
+.home-link {
+    text-decoration: none; 
+    color: white; 
+    background-color: #007bff; 
+    padding: 10px 20px; 
+    border-radius: 5px;
+    transition: background-color 0.3s; 
+}
+
+.home-link:hover {
+    background-color: #0056b3; 
+}
+
+.beers {
+    padding: 20px; 
+}
+
+.beers ul {
+    list-style-type: none; 
+    padding: 0; 
+}
+
+.beers li {
+    margin: 20px 0; 
+    text-align: center;
+}
+ 
+.beers img {
+    width: 100px;
+    height: auto; 
+    border-radius: 10px;
+}
+
+.beer-detail {
+    padding: 20px; 
+    text-align: center; 
+}
+
+.beer-detail img {
+    width: 200px; 
+    height: auto; 
+    border-radius: 10px; 
+}
+
+.new-beer, .random-beer {
+    padding: 20px; 
+    text-align: center;
+}
+
+.new-beer-image {
+    width: 300px; 
+    height: auto; 
+    border-radius: 10px; 
+}
+
+form {
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    margin-top: 20px;
+}
+
+form input {
+    margin: 10px 0; 
+    padding: 10px; 
+    width: 80%; 
+    max-width: 400px;
+    border: 1px solid #ced4da; 
+    border-radius: 5px; 
+}
+
+form button {
+    padding: 10px 20px; 
+    background-color: #28a745; 
+    color: white; 
+    border: none; 
+    border-radius: 5px; 
+    cursor: pointer; 
+    transition: background-color 0.3s; 
+}
+
+form button:hover {
+    background-color: #218838; 
+}