diff --git a/restapi/.env b/restapi/.env
new file mode 100644
index 0000000..15687e9
--- /dev/null
+++ b/restapi/.env
@@ -0,0 +1,3 @@
+DB_CONN_STRING="mongodb+srv://dede_es1a:1234@dede-es1a.shdhg.mongodb.net/myFirstDatabase?retryWrites=true&w=majority"
+DB_NAME="dede-es1a"
+DB_COLLECTION_NAME="myFirstDatabase"
\ No newline at end of file
diff --git a/restapi/api.ts b/restapi/api.ts
index 61a3a90..869d3ae 100644
--- a/restapi/api.ts
+++ b/restapi/api.ts
@@ -6,15 +6,40 @@ import {findUsers, addUser, deleteUser, loginUser, logout} from './controllers/U
 const User = require("./models/User");
 const Rock = require("./models/Rock");
 
+
 const api:Router = express.Router()
 const mongoose = require("mongoose");
 
-//Methods for control users from the app
-api.get("/users/list", findUsers);
-
-api.post("/users/add", addUser);
-
-api.post("/users/delete", deleteUser);
+interface User {
+    name: string;
+    email: string;
+}
+
+//This is not a restapi as it mantains state but it is here for
+//simplicity. A database should be used instead.
+let users: Array<User> = [];
+
+api.get(
+    "/users/list",
+    async (req: Request, res: Response): Promise<Response> => {
+        return res.status(200).send(users);
+    }
+);
+
+
+api.post(
+  "/users/add",[
+    check('name').isLength({ min: 1 }).trim().escape(),
+    check('email').isEmail().normalizeEmail(),
+  ],
+  async (req: Request, res: Response): Promise<Response> => {
+    let name = req.body.name;
+    let email = req.body.email;
+    let user: User = {name:name,email:email}
+    users.push(user);
+    return res.sendStatus(200);
+  }
+);
 
 api.post("/users/login", loginUser);
 
diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index dcd8a97..647734e 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect } from 'react';
 import Welcome from './components/Welcome';
 import  {getRocas} from './api/api';
 import './css/App.css';
-
 import { Route, Routes, Navigate, BrowserRouter as Router } from "react-router-dom";
 import {Rock} from './shared/shareddtypes';
 import Catalog from './components/Catalog';
@@ -11,6 +10,8 @@ import { theme } from "./code/Theme";
 import LogIn from './views/Login';
 import Register from './views/Register';
 import NavBar from './components/NavigationBar';
+import { Container } from '@mui/material';
+//import {createData} from "./code/insertExampleData"
 
 
 //import {createData} from "./code/insertExampleData"
@@ -27,9 +28,10 @@ function App(): JSX.Element {
   },[]);
   return (
     <ThemeProvider theme={theme}>
-
+      <Container maxWidth="xl" className="principal">
       <NavBar/>
       <Router>
+        
         <Routes>
           <Route path="/home" element={<Welcome/>} />
           <Route path="/" element={<Navigate replace to="/home" />} />
@@ -37,9 +39,11 @@ function App(): JSX.Element {
           <Route path = '/login' element = {<LogIn/>}/>
           <Route path = '/register' element = {<Register/>}/>
         </Routes>
+        
       </Router>
-      
+      </Container>
     </ThemeProvider>
+
   );
 }
 
diff --git a/webapp/src/components/Product.tsx b/webapp/src/components/Product.tsx
index 4eef154..e128e5b 100644
--- a/webapp/src/components/Product.tsx
+++ b/webapp/src/components/Product.tsx
@@ -24,18 +24,16 @@ function Product(product: ProductProps): JSX.Element {
               {product.product!==null ?
               <>
               
-              <ListItemText primary={"precio: "+product.product.price+"€"} className="datoProduct"/>
-              <ListItemText primary={"tipo: "+ product.product.type} className="datoProduct"/>
-              <ListItemText primary={"mohs: "+ product.product.mohsHardness} className="datoProduct"/>
-              <ListItemText primary={"densidad: "+product.product.density} className="datoProduct"/>
+              <p className="datoProduct">{"precio: "+product.product.price+"€"}</p>
+              <p className="datoProduct">{"tipo: "+ product.product.type}</p>
+              <p className="datoProduct">{"mohs: "+ product.product.mohsHardness}</p>
+              <p className="datoProduct">{"densidad: "+product.product.density}</p>
               </>
               : <></>
             }
               
           </div>
-          <Grid item xs={12} hidden={!product.buyable}>
-            <Button variant="contained" color="primary" style={{width:'100%'}}>Comprar</Button>
-          </Grid>
+          <Button variant="contained" className='btnBuy' color="primary" style={{width:'100%'}}>Comprar</Button>
       </div>
   );
 }
diff --git a/webapp/src/components/Showcase.tsx b/webapp/src/components/Showcase.tsx
index d5c86c9..76c1d99 100644
--- a/webapp/src/components/Showcase.tsx
+++ b/webapp/src/components/Showcase.tsx
@@ -1,4 +1,4 @@
-import { ListItemText } from '@mui/material';
+import { AppBar, ListItemText } from '@mui/material';
 import { useState } from 'react';
 import {Rock} from '../shared/shareddtypes';
 import Product from './Product';
@@ -16,7 +16,9 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element {
   return (
     <>
     <div>
-        <ListItemText className="titleOfShowcase" primary={prefilteredbox.name}/>
+        <AppBar position='relative' className="titleOfShowcase">
+          <p> {prefilteredbox.name}</p>
+        </AppBar>
         <div className="showcase">
         {
             prefilteredbox.rocks.map((_,product)=>{
@@ -26,6 +28,7 @@ function Showcase(prefilteredbox: RockListProps): JSX.Element {
             })
         }
         </div>
+        
     </div>
     </>
   );
diff --git a/webapp/src/components/Welcome.tsx b/webapp/src/components/Welcome.tsx
index 63251ed..18ca905 100644
--- a/webapp/src/components/Welcome.tsx
+++ b/webapp/src/components/Welcome.tsx
@@ -9,15 +9,13 @@ function Welcome(): JSX.Element {
   
   return (
     <>
+      <div id="App-logo-container">
+        <img src={logo} className="App-logo" alt="logo" />
+      </div>
       
-      <Container maxWidth="sm" className="principal">
-        <Grid item xs={12} >
-          <Box className="logoClass"><img src={logo} className="App-logo" alt="logo" /></Box>
-        </Grid>
-        <div id="showcases">
+      <div id="showcases">
         <Showcases />
-        </div>
-      </Container>
+      </div>
     </>
   );
 }
diff --git a/webapp/src/components/solid-pods/GetPodAddress.tsx b/webapp/src/components/solid-pods/GetPodAddress.tsx
index 1cd3199..7856e24 100644
--- a/webapp/src/components/solid-pods/GetPodAddress.tsx
+++ b/webapp/src/components/solid-pods/GetPodAddress.tsx
@@ -1,9 +1,9 @@
-import React, {useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Grid from "@mui/material/Grid"
 import Box from "@mui/material/Box"
 
-import {VCARD } from "@inrupt/vocab-common-rdf";
+import { FOAF, VCARD } from "@inrupt/vocab-common-rdf";
 import {getSolidDataset, getStringNoLocale, getThing, Thing, getUrl} from "@inrupt/solid-client";
 
 type PODProps = {
diff --git a/webapp/src/components/solid-pods/LoginPod.tsx b/webapp/src/components/solid-pods/LoginPod.tsx
index ae23123..6505fc5 100644
--- a/webapp/src/components/solid-pods/LoginPod.tsx
+++ b/webapp/src/components/solid-pods/LoginPod.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { SessionProvider, useSession } from "@inrupt/solid-ui-react";
 import LoginForm from "./LoginForm"
 import ProfileViewer from "./ProfileViewer"
diff --git a/webapp/src/components/solid-pods/ProfileViewer.tsx b/webapp/src/components/solid-pods/ProfileViewer.tsx
index 0666063..29fd4bc 100644
--- a/webapp/src/components/solid-pods/ProfileViewer.tsx
+++ b/webapp/src/components/solid-pods/ProfileViewer.tsx
@@ -1,6 +1,6 @@
-import { useSession, CombinedDataProvider, LogoutButton, Text } from "@inrupt/solid-ui-react";
-import { Button, Card, CardContent, Container, Typography } from "@material-ui/core";
-import { FOAF } from "@inrupt/lit-generated-vocab-common";
+import { useSession, CombinedDataProvider, Image, LogoutButton, Text } from "@inrupt/solid-ui-react";
+import { Button, Card, CardActionArea, CardContent, Container, Typography } from "@material-ui/core";
+import { FOAF, VCARD } from "@inrupt/lit-generated-vocab-common";
 import GetPodAddress from './GetPodAddress';
 
 const ProfileViewer = () => {
diff --git a/webapp/src/css/App.css b/webapp/src/css/App.css
index 423e1b6..abb5b22 100644
--- a/webapp/src/css/App.css
+++ b/webapp/src/css/App.css
@@ -1,55 +1,7 @@
-.App {
-  text-align: center;
-  background-color: #acb7be;
-}
-
-body {
-  text-align: center;
-}
 
-header {
-  text-align: left;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 .principal {
-  padding-top: 5px;
-}
-.titulo {
-  font-size: 38px;
-  padding-top: 25px;
-}
-.logoClass {
-  padding-top: 0.5em;
-}
-.appBar {
-  background-color: brown;
-}
-.App-header {
-  background-color: #acb7be;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: rgb(192, 157, 40);
-}
-
-.App-link {
-  color: #e0c66f;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  margin-top: 7em;
+  background-color: rgb(230, 237, 241);
 }
 
 body {
@@ -60,10 +12,25 @@ header {
   background-color: #f3af2f;
 }
 
-#logoRock {
-  width: 20%;
+@media only screen and (max-width: 1000px) {
+  body {
+    font-size: 12px;
+  }
+  .btnBuy{
+    font-size:  12px !important;
+  }
+}
+@media only screen and (max-width: 800px) {
+  body {
+    font-size: 8px;
+  }
+  .btnBuy{
+    font-size:  8px !important;
+  }
+  
 }
-
 @import "Catalog.css";
 @import "Showcases.css";
 @import "Product.css";
+@import "LoginRegister.css";
+@import "SpinningLogo.css";
\ No newline at end of file
diff --git a/webapp/src/css/Catalog.css b/webapp/src/css/Catalog.css
index e7a3970..d7585c4 100644
--- a/webapp/src/css/Catalog.css
+++ b/webapp/src/css/Catalog.css
@@ -1,19 +1,8 @@
-
 #catalog {
-  border-radius: 1em;
-  background-color: rgb(241, 248, 255);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
 
-  padding: 1em;
-  width: 75%;
-  left: 11%;
-  margin-top: 3em;
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  padding-bottom: 5em;
+  
 }
 
-
-
-
-#catalog .product{
-    margin-bottom: 6em; /* Superior margin for products inside de catalog */
-}
diff --git a/webapp/src/css/Product.css b/webapp/src/css/Product.css
index 46264ba..0fdfbd2 100644
--- a/webapp/src/css/Product.css
+++ b/webapp/src/css/Product.css
@@ -2,30 +2,44 @@
   padding: 1em;
   margin-bottom: 3em;
   text-align: center;
-  text-rendering: optimizeSpeed;
+  height: 100%;
 }
 .infoProduct {
-  width: 100%;
-  height: 75%;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2,1fr);
+  grid-template-rows: repeat(2,1fr);
+  
+  gap: 0.3em;
 }
 .imageProductContainer {
-  height: 7em;
+  height: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  border: #f3af2f 0.2em dashed;
-  border-radius: 0.3em;
+  border-radius: 1em;
+  
+}
+.imageProductContainer  img{
+  border-radius: 1em;
+  margin: 1em;
+
+  
 }
+
+
 .datoProduct {
   background-color: #ced9ee;
   padding: 0.3em;
   border-radius: 0.3em;
   border: rgb(230, 237, 241) 0.15em solid;
-
+  height: 80%;
   display: flex;
   justify-content: center;
   align-items: center;
+  
 }
+.btnBuy{
+  position: relative;
+  top:2em !important;
+}
\ No newline at end of file
diff --git a/webapp/src/css/Showcases.css b/webapp/src/css/Showcases.css
index 6ba353c..fa69fca 100644
--- a/webapp/src/css/Showcases.css
+++ b/webapp/src/css/Showcases.css
@@ -3,29 +3,40 @@
   background-color: #d8e3f7;
   border-radius: 1em;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2,1fr);
+  grid-template-rows: repeat(2,1fr);
+  position: relative;
+  top: 5em;
+  
 }
 #showcases {
   max-width: max-content;
-  border: #f3af2f 0.5em solid;
+
   border-radius: 1em;
-  position: relative;
-  right: 15%;
-  width: 125%;
+
   gap: 1em;
+  
   padding: 1em;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
 }
 .titleOfShowcase {
-  text-shadow: 2px 2px 8px #91b6fc;
-  background-color: #f3af2f;
+  padding-left: 1em;
+  margin-bottom: 0.8em;
+  font-size: 1.5em;
+  height: 3em;
+
+  position: relative;
+  top: 4em;
 }
-.showcase > .product > .infoProduct {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.2em;
-  column-gap: 1em;
+@media only screen and (max-width: 1000px) {
+  .btnBuy{
+    font-size:  12px !important;
+  }
 }
+@media only screen and (max-width: 800px) {
+  .btnBuy{
+    font-size:  8px !important;
+  }
+}
\ No newline at end of file
diff --git a/webapp/src/css/SpinningLogo.css b/webapp/src/css/SpinningLogo.css
new file mode 100644
index 0000000..634bcf9
--- /dev/null
+++ b/webapp/src/css/SpinningLogo.css
@@ -0,0 +1,21 @@
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+#App-logo-container {
+  padding-top: 4em;
+  padding-bottom: 4em;
+  text-align: center;
+}
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+#logoRock {
+  width: 20%;
+}
diff --git a/webapp/src/views/Login.tsx b/webapp/src/views/Login.tsx
index a908df8..016ae0a 100644
--- a/webapp/src/views/Login.tsx
+++ b/webapp/src/views/Login.tsx
@@ -4,8 +4,10 @@ import TextField from '@mui/material/TextField';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
 import type { AlertColor } from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import logo from '../../logoAsturShop.png'
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import {useNavigate} from 'react-router-dom';
-import { checkUser } from '../api/api';
 
 type EmailFormProps = {
   OnUserListChange: () => void;
@@ -29,7 +31,8 @@ function EmailForm(): JSX.Element {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    let result:boolean = await checkUser(email,password);
+    //let result:boolean = await checkUser(username,password);
+    let result:boolean = true;
     if (result){
       setNotificationStatus(true);
       setNotification({ 
diff --git a/webapp/src/views/Register.tsx b/webapp/src/views/Register.tsx
index 4f649d6..7619a10 100644
--- a/webapp/src/views/Register.tsx
+++ b/webapp/src/views/Register.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
 import type { AlertColor } from '@mui/material/Alert';
+import Box from '@mui/material/Box';
 import {useNavigate} from 'react-router-dom';
-import { addUser } from '../api/api';
 
 type RegisterProps = {
   OnUserListChange: () => void;