diff --git a/app.js b/app.js
index a206dd8d91..2f583275e2 100644
--- a/app.js
+++ b/app.js
@@ -2,10 +2,8 @@ const express = require('express');
 
 const hbs = require('hbs');
 const path = require('path');
-const PunkAPIWrapper = require('punkapi-javascript-wrapper');
 
 const app = express();
-const punkAPI = new PunkAPIWrapper();
 
 app.set('view engine', 'hbs');
 app.set('views', path.join(__dirname, 'views'));
@@ -14,6 +12,11 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 // Register the location for handlebars partials here:
 
+hbs.registerPartials(__dirname + "/views/partials");
+hbs.registerHelper("eq", function (a, b) {
+  return a===b;
+});
+
 // ...
 
 // Add the route handlers here:
@@ -22,4 +25,26 @@ app.get('/', (req, res) => {
   res.render('index');
 });
 
+app.get(`/breweries`, (req, res) => {
+  fetch(`https://api.openbrewerydb.org/v1/breweries`)
+  .then((response) => response.json())
+  .then((response) => {
+        res.render(`breweries`, { breweries: response });
+  });
+});
+
+app.get(`/randomBrewery`, (req, res) => {
+  fetch(`https://api.openbrewerydb.org/v1/breweries/random`)
+  .then((response) => response.json())
+  .then((response) => res.render(`randomBrewery`, { brewery: response[0] }));
+});
+
+
+app.get(`/breweries/:id`, (req, res) => {
+  const id = req.params.id;
+  fetch(`https://api.openbrewerydb.org/v1/breweries/${id}`)
+    .then((response) => response.json())
+    .then((response) => res.render(`randomBrewery`, { brewery: response}));
+});
+
 app.listen(3000, () => console.log('🏃‍ on port 3000'));
diff --git a/package.json b/package.json
index 111c4e477d..c2a6f02c10 100644
--- a/package.json
+++ b/package.json
@@ -11,5 +11,7 @@
     "express": "^4.17.1",
     "hbs": "^4.1.1",
     "punkapi-javascript-wrapper": "^1.0.2"
-  }
+  },
+  "description": "![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)",
+  "author": ""
 }
diff --git a/public/images/brewery.webp b/public/images/brewery.webp
new file mode 100644
index 0000000000..3c06390e2e
Binary files /dev/null and b/public/images/brewery.webp differ
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index 251470be83..24f3292666 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -5,3 +5,118 @@ dark-blue: #0a2c42;
 grey: #bfbfbf;
 font-family: Arial, Helvetica, sans-serif;
 */
+body {
+    margin: 0;
+}
+
+h1 {
+    font-size: 40px;
+    text-align: center;
+}
+
+.random {
+    text-align: center;
+}
+
+.navbar {
+    background-color: #2081c3;
+    color: #f7f9f9;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 100px;
+}
+
+.navbar a {
+    color: #f7f9f9;
+    text-decoration: none;
+}
+
+#home-img {
+    padding: 100px 100px 40px;
+    height: 500px;
+    width: 700px;
+    margin: auto;
+    display: block;
+}
+
+.links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.links a {
+    color: #f7f9f9;
+    text-decoration: none;
+    background-color: #2081c3;
+    padding: 20px 10px;
+    border: none;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 5px
+}
+
+.card {
+    border : 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+.card a {
+    text-decoration: none;
+    color: #111010;
+}
+
+.micro {
+    padding: 5px;
+    border-radius: 15px;
+    background-color: orange;
+    color: white;
+    font-size: 12px;
+}
+
+.large {
+    padding: 5px;
+    border-radius: 15px;
+    background-color: green;
+    color: white;
+    font-size: 12px;
+}
+
+.brewpub {
+    padding: 5px;
+    border-radius: 15px;
+    background-color: purple;
+    color: white;
+    font-size: 12px;
+}
+
+.closed {
+    padding: 5px;
+    border-radius: 15px;
+    background-color: black;
+    color: white;
+    font-size: 12px;
+}
+
+.proprietor {
+    padding: 5px;
+    border-radius: 15px;
+    background-color: blue;
+    color: white;
+    font-size: 12px;
+}
+
+.contract {
+    padding: 5px;
+    border-radius: 15px;
+    background-color: red;
+    color: white;
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/views/breweries.hbs b/views/breweries.hbs
new file mode 100644
index 0000000000..f60cf22689
--- /dev/null
+++ b/views/breweries.hbs
@@ -0,0 +1,24 @@
+<h1>Breweries</h1>
+<div class="grid">
+    {{#each breweries}}
+    <div class="card">
+        {{#if (eq brewery_type "micro")}}
+        <span class="micro">{{brewery_type}}</span>
+        {{else if (eq brewery_type "large")}}
+        <span class="large">{{brewery_type}}</span>
+        {{else if (eq brewery_type "brewpub")}}
+        <span class="brewpub">{{brewery_type}}</span>
+        {{else if (eq brewery_type "closed")}}
+        <span class="closed">{{brewery_type}}</span>
+        {{else if (eq brewery_type "proprietor")}}
+        <span class="proprietor">{{brewery_type}}</span>
+        {{else if (eq brewery_type "contract")}}
+        <span class="contract">{{brewery_type}}</span>
+        {{else}}
+        <span>{{brewery_type}}</span>
+        {{/if}}
+            <h2><a href="/breweries/{{id}}">{{name}}</a></h2>
+            <p>{{city}}</p>
+    </div>
+    {{/each}}
+</div>
\ No newline at end of file
diff --git a/views/breweryId.hbs b/views/breweryId.hbs
new file mode 100644
index 0000000000..3a22606787
--- /dev/null
+++ b/views/breweryId.hbs
@@ -0,0 +1,17 @@
+<h1>{{name}}</h1>
+<ul>
+    {{#each breweryId}}
+    <li>{{id}}</li>
+    <li>{{name}}</li>
+    <li>{{brewery_type}}</li>
+    <li>{{address_1}}</li>
+    <li>{{city}}</li>
+    <li>{{state_province}}</li>
+    <li>{{postal_code}}</li>
+    <li>{{country}}</li>
+    <li>{{phone}}</li>
+    <li>{{website_url}}</li>
+    <li>{{state}}</li>
+    <li>{{street}}</li>
+    {{/each}}
+</ul>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index 3a6cce8d18..07245b895d 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,3 +1,6 @@
-<div>
-
+<h1>Welcome to our brewery app</h1>
+<img id="home-img" src="images/brewery.webp" alt="brewery Image">
+<div class="links">
+    <a href="/breweries">Check the Breweries!</a>
+    <a href="/randomBrewery">Check a Random Brewery!</a>
 </div>
\ No newline at end of file
diff --git a/views/layout.hbs b/views/layout.hbs
new file mode 100644
index 0000000000..35fd19ae9c
--- /dev/null
+++ b/views/layout.hbs
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="stylesheets/styles.css">
+    <title>Document</title>
+</head>
+<body>
+    {{> navbar}}
+    {{{body}}}
+    {{> footer}}
+</body>
+</html>
\ No newline at end of file
diff --git a/views/partials/footer.hbs b/views/partials/footer.hbs
new file mode 100644
index 0000000000..d713b9a0c5
--- /dev/null
+++ b/views/partials/footer.hbs
@@ -0,0 +1 @@
+<p>Develop by Javi ;) &copy; 2024</p>
\ No newline at end of file
diff --git a/views/partials/navbar.hbs b/views/partials/navbar.hbs
new file mode 100644
index 0000000000..96758231d1
--- /dev/null
+++ b/views/partials/navbar.hbs
@@ -0,0 +1,5 @@
+<div class="navbar">
+    <a href="/">Home</a>
+    <a href="/breweries">Breweries</a>
+    <a href="/randomBrewery">Random brewery</a>
+</div>
\ No newline at end of file
diff --git a/views/randomBrewery.hbs b/views/randomBrewery.hbs
new file mode 100644
index 0000000000..d16122dbf3
--- /dev/null
+++ b/views/randomBrewery.hbs
@@ -0,0 +1,19 @@
+<h1>Selected Brewery</h1>
+<div class="random">
+<p>Name: {{brewery.name}}</p>
+<p>Brewery Type: {{brewery.brewery_type}}</p>
+<p>Adress 1: {{brewery.address_1}}</p>
+{{#if brewery.adress_2}}<p>Adress 2: {{brewery.adress_2}}</p>{{/if}}
+{{#if brewery.adress_3}}<p>Adress 3: {{brewery.adress_3}}</p>{{/if}}
+<p>City: {{brewery.city}}</p>
+<p>State/Province: {{brewery.state_province}}</p>
+<p>Postal Code: {{brewery.postal_code}}</p>
+<p>Country: {{brewery.country}}</p>
+{{#if brewery.longitude}}<p>Longitude: {{brewery.longitude}}</p>{{/if}}
+{{#if brewery.latitude}}<p>Latitude: {{brewery.latitude}}</p>{{/if}}
+<p>Phone: {{brewery.phone}}</p>
+<p>Website URL: 
+    <a href="{{brewery.website_url}}">{{brewery.website_url}}</a></p>
+<p>State: {{brewery.state}}</p>
+<p>Street: {{brewery.street}}</p>
+</div>
\ No newline at end of file