diff --git a/client/package.json b/client/package.json
index b8f949e..11bef88 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,7 +12,8 @@
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
     "vue-router": "^4.0.15",
-    "vuejs-logger": "^1.5.5"
+    "vuejs-logger": "^1.5.5",
+    "vuetify": "^2.6.7"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -20,10 +21,13 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "deepmerge": "^4.2.2",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "node-sass": "^7.0.1",
-    "sass-loader": "^13.0.0",
+    "sass": "~1.32",
+    "sass-loader": "^13.0.2",
+    "vue-cli-plugin-vuetify": "^2.5.1",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
diff --git a/client/public/index.html b/client/public/index.html
index 3632c28..4753fba 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -8,6 +8,8 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>style.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
diff --git a/client/src/Api.js b/client/src/Api.js
index 12f8a57..e9bd60d 100644
--- a/client/src/Api.js
+++ b/client/src/Api.js
@@ -4,7 +4,7 @@ const SERVER_URL = 'http://localhost:9000'
 
 const instance = axios.create({
     baseURL : SERVER_URL,
-    timeout: 1000
+    timeout: 0
 })
 
 export default {
@@ -14,7 +14,19 @@ export default {
         transformResponse: [function (data) {  
           return data? JSON.parse(data)._embedded.items : data;  
         }]  
-      }), 
+      }),
+
+    getRecipesForFridge: () => instance.get('/api/v1/recipe/forFridge', {
+        transformResponse: [function (data) {
+            return data? JSON.parse(data) : data;
+        }]
+    }),
+
+    getRandom: () => instance.get('/api/v1/recipe/random', {
+        transformResponse: [function (data) {
+            return data? JSON.parse(data) : data;
+        }]
+    }),
 
     removeForId: (id) => instance.delete('/api/v1/items/'+ id)
 }
\ No newline at end of file
diff --git a/client/src/App.vue b/client/src/App.vue
index 003db3e..61887a1 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,11 +1,15 @@
+
+
 <script>
 import ItemModel from "@/components/ItemModel";
 import LoginPage from "@/components/LoginPage";
 import Custom404Page from "@/components/Custom404Page";
+import RecipePage from "@/components/RecipeModel";
 
 const routes = {
   '/': ItemModel,
-  '/login': LoginPage
+  '/login': LoginPage,
+  '/recipes' : RecipePage
 }
 
 export default {
@@ -31,7 +35,16 @@ export default {
 </script>
 
 <template>
-  <component :is="currentView" />
+
+
+
+  <v-app
+      :is="currentView"
+  >
+    <v-main>
+
+    </v-main>
+  </v-app>
 </template>
 
 
diff --git a/client/src/components/Custom404Page.vue b/client/src/components/Custom404Page.vue
index 5ad891b..a91b58b 100644
--- a/client/src/components/Custom404Page.vue
+++ b/client/src/components/Custom404Page.vue
@@ -14,7 +14,7 @@ export default {
 
 <style lang="scss">
 
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap");
 
 *,
 *::before,
@@ -30,7 +30,7 @@ export default {
   justify-content: center;
   align-items: center;
   align-content: space-between;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .text {
@@ -83,7 +83,7 @@ h1::after{
 }
 
 h1::before{
-  background: #213737;
+  background: #006064;
   animation: shifteffect 4s steps(22) forwards;
 }
 
diff --git a/client/src/components/HomePage.vue b/client/src/components/HomePage.vue
index da5be2c..2aad75e 100644
--- a/client/src/components/HomePage.vue
+++ b/client/src/components/HomePage.vue
@@ -8,31 +8,31 @@
 
         <!-- navbar -->
 
-        <header class="navbar-header">
-          <div class="logo">
-            <a>Home</a>
-          </div>
+<!--        <header class="navbar-header">-->
+<!--          <div class="logo">-->
+<!--            <a>Home</a>-->
+<!--          </div>-->
 
-          <input type="checkbox" class="menu-btn" id="menu-btn">
-          <label for="menu-btn" class="menu-icon">
-            <span class="menu-icon__line"></span>
-          </label>
+<!--          <input type="checkbox" class="menu-btn" id="menu-btn">-->
+<!--          <label for="menu-btn" class="menu-icon">-->
+<!--            <span class="menu-icon__line"></span>-->
+<!--          </label>-->
 
-          <ul class="nav-links">
-            <li class="nav-link">
-              <a href="#">Profile</a>
-            </li>
-            <li class="nav-link">
-              <a href="#">Storage</a>
-            </li>
-            <li class="nav-link">
-              <a href="#">Recipes</a>
-            </li>
-            <li class="nav-link">
-              <a href="#">About</a>
-            </li>
-          </ul>
-        </header>
+<!--          <ul class="nav-links">-->
+<!--            <li class="nav-link">-->
+<!--              <a href="#">Profile</a>-->
+<!--            </li>-->
+<!--            <li class="nav-link">-->
+<!--              <a href="#">Storage</a>-->
+<!--            </li>-->
+<!--            <li class="nav-link">-->
+<!--              <a href="#">Recipes</a>-->
+<!--            </li>-->
+<!--            <li class="nav-link">-->
+<!--              <a href="#">About</a>-->
+<!--            </li>-->
+<!--          </ul>-->
+<!--        </header>-->
     </div>
   </div>
 
diff --git a/client/src/components/ItemModel.vue b/client/src/components/ItemModel.vue
index a093284..30ae13c 100644
--- a/client/src/components/ItemModel.vue
+++ b/client/src/components/ItemModel.vue
@@ -24,6 +24,9 @@
             <li class="nav-link">
               <a href="/#/login">Sign up</a>
             </li>
+            <li class="nav-link">
+              <a href="/#/recipes">Recipes</a>
+            </li>
           </ul>
         </div>
 
@@ -32,14 +35,69 @@
         <!-- input field -->
 
         <div class="field-header-box">
-          <div class="inputField-header">
-            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"
-                   @keyup.enter="addItem"/>
-            <label for="inputTextField" class="formLabel">
-              Add here ...
-            </label>
-          </div>
+<!--          <div class="inputField-header">-->
+<!--            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"-->
+<!--                   @keyup.enter="addItem"/>-->
+<!--            <label for="inputTextField" class="formLabel">-->
+<!--              Add here ...-->
+<!--            </label>-->
+          <v-row>
+            <v-col cols="3">
+              <v-text-field
+                  label="Ingredient"
+                  value=""
+                  v-model="newItem"
+                  @keyup.enter="addItem"
+                  require
+                  dark
+              ></v-text-field>
+            </v-col>
+            <v-col cols="2">
+              <v-text-field
+                  label="Quantity"
+                  required
+                  v-model="newQuantity"
+                  @keyup.enter="addItem"
+                  dark
+              ></v-text-field>
+            </v-col>
+            <v-col cols="1">
+                <p>Unit</p>
+
+                <v-btn-toggle
+                    v-model="newUnit"
+                    tile
+                    color="deep-purple accent-3"
+                    group
+                    mandatory
+
+                >
+                  <v-btn value="units">
+                    units
+                  </v-btn>
+
+                  <v-btn value="g">
+                    g
+                  </v-btn>
+
+                  <v-btn value="ml">
+                    ml
+                  </v-btn>
+
+                </v-btn-toggle>
+            </v-col>
+            <v-col cols="1">
+<!--              <v-btn-->
+<!--                  elevation="2"-->
+<!--                  fab-->
+<!--                  @click="addItem"-->
+<!--              ><v-icon>mdi-plus</v-icon>-->
+<!--              </v-btn>-->
+            </v-col>
+          </v-row>
         </div>
+        
+
 
         <!-- response element -->
 
@@ -84,6 +142,8 @@ const Items = {
     return {
       items: [],
       newItem: '',
+      newQuantity: 0,
+      newUnit: '',
       editedItem: null,
       loading: true,
       error: null,
@@ -109,29 +169,29 @@ const Items = {
       return this.activeUser ? this.activeUser.email : ''
     },
     inputPlaceholder: function () {
-      return this.activeUser ? this.activeUser.given_name + ', what do you want to add?' : 'What needs to be added'
+      return this.activeUser ? this.activeUser.given_name + ', What do you want to add?' : 'What needs to be added?'
     }
   },
 
   methods: {
     addItem: function () {
-      var value = this.newItem && this.newItem.trim()
-      if (!value) {
+      const addableItem = this.newItem && this.newItem.trim();
+      const addableQuantity = parseInt(this.newQuantity);
+      const addableUnit = this.newUnit;
+      if (!addableItem) {
         return
       }
 
-      var components = value.split(' ')
-
-      api.createNew(components[0],
-          parseInt(components[1].replace(/[^\d.]/g, '')),
-          components[1].replace(/[0-9]/g, '') === 'ml' ? 'MILLILETERS' : "GRAMMS"
+      api.createNew(addableItem,
+          addableQuantity,
+          addableUnit
       ).then((response) => {
         this.$log.debug("New item created:", response);
         this.items.push({
           id: response.data.id,
-          name: components[0],
-          quantity: parseInt(components[1].replace(/[^\d.]/g, '')),
-          unit: components[1].replace(/[0-9]/g, '') === 'MILLILETERS' ? 'ml' : 'g'
+          name: addableItem,
+          quantity: addableQuantity,
+          unit: addableUnit
         })
       }).catch((error) => {
         this.$log.debug(error);
@@ -164,10 +224,6 @@ export default Items
 </script>
 
 
-
-
-
-
 <style lang="scss">
 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
@@ -194,7 +250,7 @@ export default Items
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -205,7 +261,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -215,13 +271,23 @@ body{
   left: 0;
   top: 0;
   z-index: 3;
-  background: #213737;
+  background: #006064;
   width: 100vw;
   height: 15vh;
 }
 
 /* input field styling */
 
+
+
+
+.inputField-header {
+  position: relative;
+  z-index: 5;
+  width: 20vh;
+  height: 2vh;
+}
+
 .field-header-box{
   z-index: 3;
   position: fixed;
@@ -232,13 +298,7 @@ body{
   display: grid;
   align-content: center;
   justify-content: center;
-}
-
-.inputField-header {
-  position: relative;
-  z-index: 5;
-  width: 20vh;
-  height: 3vh;
+  color: white
 }
 
 .newItemName {
@@ -255,7 +315,7 @@ body{
   outline: none;
   padding: 0.5vh;// size of font
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
-  background: #213737;
+  background: #006064;
 }
 
 .newItemName:hover {
diff --git a/client/src/components/LoginPage.vue b/client/src/components/LoginPage.vue
index 00f2238..9e8803a 100644
--- a/client/src/components/LoginPage.vue
+++ b/client/src/components/LoginPage.vue
@@ -114,12 +114,13 @@ export default {
   display: grid;
   justify-content: center;
   align-items: center;
-  background: #213737;
+  background: #006064;
 }
 
 .logo {
   left: -3vh;
   top: 1vh;
+  color: white;
 }
 
 .logo a {
diff --git a/client/src/components/RecipeModel.vue b/client/src/components/RecipeModel.vue
new file mode 100644
index 0000000..6a564d2
--- /dev/null
+++ b/client/src/components/RecipeModel.vue
@@ -0,0 +1,559 @@
+<template>
+  <body>
+  <div class="main">
+    <h1 class="email">{{ userEmail }}</h1>
+    <section class="itemapp">
+      <div v-if="loading">
+        <h1 class="loading">Loading...</h1>
+      </div>
+      <div v-else>
+
+        <!-- navbar -->
+
+        <div class="navbar-header">
+          <div class="logo">
+            <a>Recipes</a>
+          </div>
+
+          <input type="checkbox" class="menu-btn" id="menu-btn">
+          <label for="menu-btn" class="menu-icon">
+            <span class="menu-icon__line"></span>
+          </label>
+
+          <ul class="nav-links">
+            <li class="nav-link">
+              <a href="/#/login">Sign up</a>
+            </li>
+            <li class="nav-link">
+              <a href="/#/">Storage</a>
+            </li>
+          </ul>
+        </div>
+
+
+
+        <!-- input field -->
+
+        <div>
+
+          <v-container
+              fluid
+              dark
+              style="background-color: transparent; height: 100%"
+          >
+            <v-row
+                align="align">
+              <v-col
+                  v-for="recipe in recipes"
+                  :key="recipe.id"
+                  cols="4"
+                  sm="3"
+              >
+                <v-item>
+                  <v-card
+                      class="pa-2"
+                      min-width="350"
+                      max-width="350"
+                      min-height="400"
+                      max-height="400"
+                      tile
+                      rounded = true
+                      color="#385F73"
+                      dark
+                  >
+                    <v-img
+                        class="white--text align-end"
+                        height="200px"
+                        :src="recipe.image"
+                    >
+                    </v-img>
+
+                    <v-card-title
+                        style="word-break: break-word"
+                    >{{ recipe.title }}</v-card-title>
+                    <v-card-subtitle class="pb-0">
+                      Ready in {{ recipe.readyInMinutes }} minutes
+                    </v-card-subtitle>
+
+                    <!--                      <v-card-text class="text&#45;&#45;primary">-->
+                    <!--                        <div>Whitehaven Beach</div>-->
+
+                    <!--                        <div>Whitsunday Island, Whitsunday Islands</div>-->
+                    <!--                      </v-card-text>-->
+
+                    <v-card-actions
+                    >
+                      <!--                        <v-btn-->
+                      <!--                            color="orange"-->
+                      <!--                            text-->
+                      <!--                        >-->
+                      <!--                          Share-->
+                      <!--                        </v-btn>-->
+
+                      <v-btn
+                          :href="recipe.sourceUrl"
+                          text
+                      >
+                        <!--                            @click = ""-->
+                        Cook
+                      </v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-item>
+              </v-col>
+            </v-row>
+          </v-container>
+
+        </div>
+
+      </div>
+    </section>
+
+  </div>
+  </body>
+</template>
+
+<script>
+
+import api from '../Api';
+
+const Recipes = {
+  name: 'Recipes',
+  props: {
+    activeUser: Object
+  },
+
+  // app initial state
+  data: function () {
+    return {
+      items: [],
+      recipes: [],
+      loading: true,
+      error: null,
+      id: 0
+    }
+  },
+
+  mounted() {
+    this.populateRecipes()
+  },
+
+  methods: {
+    populateFromFridge() {
+      api.getRecipesForFridge()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.recipes = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load recipes"
+          })
+          .finally(() => this.loading = false)
+    },
+
+    populateRandom() {
+      api.getRandom()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.recipes = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load recipes"
+          })
+          .finally(() => this.loading = false)
+    },
+
+    populateRecipes() {
+      api.getAll()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.items = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load items"
+          })
+          .finally(() => {
+            if (this.items.length > 3) {
+              this.populateFromFridge()
+            } else {
+              this.populateRandom()
+            }
+          })
+    }
+  }
+
+}
+export default Recipes
+</script>
+
+<style lang="scss">
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+@import 'src/styling/navbar';
+
+:root{
+  --globalFontSize: 20px; // 1/108
+  --globalFontSizeHalf: var(--globalFontSize) * 0.5;
+  --globalFontSizeOneAndHalf: var(--globalFontSize) * 1.5;
+
+  --globalFontSizeTenth: var(--globalFontSize) * 0.1;
+  --globalFontSizeFifth: var(--globalFontSize) * 0.2;
+  --globalFontSizeFourFiths: var(--globalFontSize) * 0.8;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body{
+  margin: 0;
+  padding: 0;
+  background-color: #006064;
+}
+
+.main {
+  position: relative;
+  font-family: 'Montserrat', sans-serif;
+  height: 100vh;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25vh;
+  background-color: #006064;
+}
+
+/* navbar-background */
+
+.nav-background{
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  background: #006064;
+  width: 100vw;
+  height: 15vh;
+}
+
+/* input field styling */
+
+//.field-header-box{
+//  z-index: 3;
+//  position: center;
+//  width: 200vw;
+//  height: 5vh;
+//  left: 0;
+//  top: 10vh;
+//  display: grid;
+//  align-content: center;
+//  justify-content: center;
+//}
+
+.inputField-header {
+  position: relative;
+  z-index: 5;
+  width: 20vh;
+  height: 2vh;
+}
+
+.newItemName {
+  z-index: 3;
+  position: relative;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0.07352941176470588vh solid white; // 0.10 of font size // u cannot use var here
+  border-radius: 0.4411764705882353vh; // times 2 of border
+  font-family: inherit;
+  font-size: inherit;
+  color: white;
+  outline: none;
+  padding: 0.5vh;// size of font
+  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
+  background: #006064;
+}
+
+.newItemName:hover {
+  border-color: black;
+}
+
+.newItemName:focus {
+  border-color: black;
+}
+
+.formLabel {
+  z-index: 3;
+  position: relative;
+  top: -67.75vh;
+  left: 0.75vh;
+  padding: 0.1vh;
+  font-size: 0.1vh;
+  color: white;
+  cursor: text;
+  transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
+  background-color: darkcyan;
+}
+
+.newItemName:hover ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:hover) ~ .formLabel {
+  top: -69.30vh;
+  left: 0.15vw;
+  font-size: 0.1vh;
+  color: black;
+}
+
+.newItemName:focus ~ .formLabel, .newItemName:not(:placeholder-shown).newItemName:not(:focus) ~ .formLabel {
+  top: -69.30vh;
+  left: 0.15vw;
+  font-size: 0.1vh;
+  color: black;
+}
+
+/* Workaround for below WQHD resolution */
+
+//@media screen and (max-height: 1400px) {
+//  .formLabel{
+//    opacity: 0;
+//  }
+//}
+
+/* item section */
+
+.item-section{
+  z-index: 2;
+  position: absolute;
+  top: 80%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  font-size: 20px;
+  margin-left: 30px;
+  border: 1px solid black;
+}
+
+.item-list{
+  z-index: 2;
+  align-self: center;
+  position: relative;
+  display: grid;
+  top: -60vh;
+  left: -44.33vw;
+
+  row-gap: 75px;
+  column-gap: 340px;
+
+  .item{
+    z-index: 2;
+    text-align: center;
+    position: relative;
+    margin-top: 0;
+    font-family: Montserrat, sans-serif;
+    list-style: none;
+    background: darkslategrey;
+    display: flex;
+    padding: 100px;
+    width: 300px;
+  }
+
+  .item-name{
+    z-index: 2;
+    position: relative;
+
+    left: -20px;
+  }
+
+  .item-name-fame{
+    z-index: 2;
+
+    letter-spacing: 4px;
+    font-size: 30px;
+  }
+
+  .item-name-fame:after{
+    content:'';
+    display:block;
+    border-bottom:2px solid #000;
+    height:0;
+    position:relative;
+
+    top: 16px;
+    width:250px;
+  }
+
+  .item-information-frame{
+    position: relative;
+
+    letter-spacing: 2px;
+    top: 32px;
+  }
+
+  .view{
+    position: relative;
+    color: white;
+
+    top: -60px;
+    left: -52px;
+  }
+
+  .destroy{
+    display: block;
+    position: relative;
+    left: 0;
+    border-radius: 1px;
+    border: solid black 1px;
+    transform: rotate(45deg);
+
+    height: 50px;
+    width: 2px;
+    top: 140px;
+  }
+
+  .destroy:after{
+    content: '';
+    border-radius: 1px;
+    border: solid black 1px;
+    position: fixed;
+    transform: rotate(-90deg);
+
+    height: 50px;
+    width: 2px;
+    top: -2px;
+  }
+
+  .destroy:hover{
+    cursor: pointer;
+  }
+}
+
+@media (max-width: 2100px) {
+  .item-list{
+    grid-template-columns: repeat(7, 2vh);
+  }
+
+  .item{
+    right: 4.1vw;
+  }
+}
+
+@media (min-width: 2100px) {
+  .item-list{
+    grid-template-columns: repeat(8, 2vh);
+  }
+}
+
+@media (min-width: 2560px) {
+  .item-list{
+    grid-template-columns: repeat(8, 2vh);
+  }
+}
+
+
+@media (min-width: 3800px) {
+  .item-list{
+    grid-template-columns: repeat(9, 2vh);
+    border-collapse: separate;
+    border-spacing: 0 15px;
+  }
+}
+
+/* responsive */
+
+@media (max-height: 1440px) and (min-width: 720px) {
+
+  .item-section{
+
+    font-size: 40/3 px;
+    margin-left: 80px;
+  }
+
+  .item-list{
+    z-index: 2;
+    align-self: center;
+    position: relative;
+    display: grid;
+    top: -60vh;
+    left: -44.33vw;
+
+    row-gap: 50px;
+    column-gap: 230px;
+
+    .item{
+      width: 200px;
+      height: 200px;
+    }
+
+    .item-name{
+      left: -30px;
+    }
+
+    .item-name-fame{
+      position: relative;
+      letter-spacing: 4px;
+      font-size: 12px;
+      top: -20px;
+    }
+
+    .item-name-fame:after{
+      content:'';
+      display:block;
+      border-bottom:2px solid #000;
+      height:0;
+      position:relative;
+
+      top: 8px;
+      width:170px;
+    }
+
+    .item-information-frame{
+
+      font-size: 8px;
+
+      letter-spacing: 1px;
+      top: -5px;
+    }
+
+    .view{
+      position: relative;
+      color: white;
+
+      top: -50px;
+      left: -52px;
+    }
+
+    .destroy{
+      display: block;
+      position: relative;
+      left: -10px;
+      border-radius: 1px;
+      border: solid black 1px;
+      transform: rotate(45deg);
+
+      height: 35px;
+      width: 2px;
+      top: 50px;
+    }
+
+    .destroy:after{
+      content: '';
+      border-radius: 1px;
+      border: solid black 1px;
+      position: fixed;
+      transform: rotate(-90deg);
+
+      height: 35px;
+      width: 2px;
+      top: -2px;
+    }
+
+    .destroy:hover{
+      cursor: pointer;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/client/src/main.js b/client/src/main.js
index 4b37061..0f343ce 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App'
+import vuetify from '@/plugins/vuetify' // path to vuetify export
 
 Vue.config.productionTip = false
 
@@ -22,4 +23,8 @@ new Vue({
   el: '#app',
   template: '<App/>',
   components: { App}
-});
\ No newline at end of file
+});
+
+new Vue({
+  vuetify,
+}).$mount('#app')
\ No newline at end of file
diff --git a/client/src/plugins/vuetify.js b/client/src/plugins/vuetify.js
new file mode 100644
index 0000000..184a2d4
--- /dev/null
+++ b/client/src/plugins/vuetify.js
@@ -0,0 +1,11 @@
+// src/plugins/vuetify.js
+
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import 'vuetify/dist/vuetify.min.css'
+
+Vue.use(Vuetify)
+
+const opts = {}
+
+export default new Vuetify(opts)
\ No newline at end of file
diff --git a/client/src/styling/navbar.scss b/client/src/styling/navbar.scss
index 263f10c..0c34746 100644
--- a/client/src/styling/navbar.scss
+++ b/client/src/styling/navbar.scss
@@ -36,6 +36,7 @@
 .menu-icon {
   position: relative;
   padding: 0.5vh 0.5vh;
+  top: 2vh;
   cursor: pointer;
   z-index: 1;
   display: none;
@@ -75,6 +76,7 @@
 .logo{
   position: relative;
   padding: 0.5vh 0.5vh;
+  top: 2vh;
 }
 
 .logo:hover {
diff --git a/client/yarn.lock b/client/yarn.lock
index 395e6b7..06f2543 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2284,7 +2284,7 @@ charcodes@^0.2.0:
   resolved "https://registry.npmmirror.com/charcodes/-/charcodes-0.2.0.tgz"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -2773,6 +2773,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmmirror.com/default-gateway/-/default-gateway-6.0.3.tgz"
@@ -3994,6 +3999,11 @@ inherits@2.0.3:
   resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.3.tgz"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
+interpret@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
+
 ip@^1.1.5:
   version "1.1.8"
   resolved "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz"
@@ -4028,7 +4038,7 @@ is-ci@^1.0.10:
   dependencies:
     ci-info "^1.5.0"
 
-is-core-module@^2.5.0, is-core-module@^2.8.1:
+is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
   version "2.9.0"
   resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz"
   integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
@@ -4908,6 +4918,14 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+null-loader@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-4.0.1.tgz#8e63bd3a2dd3c64236a4679428632edd0a6dbc6a"
+  integrity sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz"
@@ -5619,6 +5637,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==
+  dependencies:
+    resolve "^1.1.6"
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz"
@@ -5742,6 +5767,15 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve@^1.1.6:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^1.10.0, resolve@^1.14.2:
   version "1.22.0"
   resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz"
@@ -5821,14 +5855,21 @@ sass-graph@4.0.0:
     scss-tokenizer "^0.3.0"
     yargs "^17.2.1"
 
-sass-loader@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.npmjs.org/sass-loader/-/sass-loader-13.0.0.tgz"
-  integrity sha512-IHCFecI+rbPvXE2zO/mqdVFe8MU7ElGrwga9hh2H65Ru4iaBJAMRteum1c4Gsxi9Cq1FOtTEDd6+/AEYuQDM4Q==
+sass-loader@^13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.0.2.tgz#e81a909048e06520e9f2ff25113a801065adb3fe"
+  integrity sha512-BbiqbVmbfJaWVeOOAu2o7DhYWtcNmTfvroVgFXa6k2hHheMxNAeDHLNoDy/Q5aoaVlz0LH+MbMktKwm9vN/j8Q==
   dependencies:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
+sass@~1.32:
+  version "1.32.13"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.13.tgz#8d29c849e625a415bce71609c7cf95e15f74ed00"
+  integrity sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz"
@@ -5892,7 +5933,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.2.1, semver@^7.3.4, semver@^7.3.5:
+semver@^7.1.2, semver@^7.2.1, semver@^7.3.4, semver@^7.3.5:
   version "7.3.7"
   resolved "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -5999,6 +6040,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.7.3.tgz"
   integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
 
+shelljs@^0.8.3:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz"
@@ -6620,6 +6670,15 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vue-cli-plugin-vuetify@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.5.1.tgz#6a3ee80c6e8d09b634ec7705422573f2ee0bc7e7"
+  integrity sha512-OcZ8/bqf84yTbQN+PyRf+8Wvr8czg+u5J4JGVx+Lq5ytsBxTgIUIZ/oMO7j+bd9WCjiKid2l9gZbQYjZABw2+g==
+  dependencies:
+    null-loader "^4.0.1"
+    semver "^7.1.2"
+    shelljs "^0.8.3"
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz"
@@ -6693,6 +6752,11 @@ vuejs-logger@^1.5.5:
     es6-object-assign "1.1.0"
     vue "2.6.11"
 
+vuetify@^2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.7.tgz#9c6fb7d20e1c4b07417084cbe5996c2dadf099df"
+  integrity sha512-1XxCv6mt1UsKaW7rqow0hF/jOw1ijT/fHH9euWLHgSVIcPAx8D2AY5ihTCBbMmV53Hj/YD0DUvzyk6cM/OGHvw==
+
 watchpack@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.3.1.tgz"
diff --git a/server/src/main/whattocook/controller/RecipeSearchController.java b/server/src/main/whattocook/controller/RecipeSearchController.java
index 59a3eec..426ddd8 100644
--- a/server/src/main/whattocook/controller/RecipeSearchController.java
+++ b/server/src/main/whattocook/controller/RecipeSearchController.java
@@ -17,7 +17,7 @@ import java.util.List;
 @RestController()
 @BasePathAwareController()
 public class RecipeSearchController {
-    private final int nextRecipes=10;
+    private final int nextRecipes=12;
     private final int nextRecipesForOneRandom = 20;
 
     @Autowired
diff --git a/server/src/main/whattocook/models/Unit.java b/server/src/main/whattocook/models/Unit.java
index debc25c..0743e0c 100644
--- a/server/src/main/whattocook/models/Unit.java
+++ b/server/src/main/whattocook/models/Unit.java
@@ -2,5 +2,6 @@ package whattocook.models;
 
 public enum Unit {
     g,
-    ml
+    ml,
+    units
 }
