diff --git a/src/App.js b/src/App.js
index 841662c..d8d7f4b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,8 +4,11 @@ import { TouchableOpacity, View } from 'react-native';
 //components
 import HomePage from './pages/HomePage';
 import GroceryListPage from './pages/groceryList/GroceryListPage';
+
 import RecipePage from './pages/recipes/RecipesPage';
 import AddRecipe from './pages/recipes/AddRecipe';
+import Recipe from './pages/recipes/Recipe';
+
 import theme from './styles/theme';
 //dependencies
 //navigation
@@ -24,16 +27,6 @@ const MyTheme = {
 	},
 };
 
-// const ScrollToTop = () => {
-//   const { pathname } = useLocation();
-
-//   useEffect(() => {
-//     window.scrollTo(0, 0);
-//   }, [pathname]);
-//   return null
-// }
-
-
 const Stack = createNativeStackNavigator();
 
 function App() {
@@ -59,6 +52,8 @@ function App() {
 					),
 				}} />
 				<Stack.Screen name="Groceries" component={GroceryListPage} />
+				<Stack.Screen name="Recipes" component={RecipePage} />
+				<Stack.Screen name="Recipe" component={Recipe} />
 			</Stack.Navigator>
 		</NavigationContainer>
 	);
diff --git a/src/components/Home/RecipeCard.js b/src/components/Home/RecipeCard.js
index 07d13a4..0607913 100644
--- a/src/components/Home/RecipeCard.js
+++ b/src/components/Home/RecipeCard.js
@@ -1,18 +1,18 @@
 import React from 'react';
+import { useNavigation } from '@react-navigation/core';
 //dependencies
 
 //styles
 import {WrapperCard, TextCard, IconRecipe} from './styles/groceryCard'
 
 const RecipeCard = () => {
+    const navigation = useNavigation();
 
     return (
-        // <Link to="/recipes">
-            <WrapperCard>
+            <WrapperCard onPress={() => navigation.navigate('Recipes')}>
                 <TextCard>Recipes</TextCard>
                 <IconRecipe/>
             </WrapperCard>
-        // </Link>
     )
 }
 
diff --git a/src/components/modals/groceries/ModalAddItem.js b/src/components/modals/groceries/ModalAddItem.js
index 6d613c5..b847253 100644
--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/src/components/modals/groceries/ModalAddItem.js
@@ -68,76 +68,76 @@ const ModalAddItem = (props) => {
             onBackdropPress={props.closeModal}
             onBackButtonPress={props.closeModal}
             useNativeDriverForBackdrop
-            style={{margin: 0}} >
+            style={{ margin: 0 }} >
             <Wrapper>
-            <ModalHeader>Add product</ModalHeader>
-            {/* {product && product.image && <Image source={product.image} />}  */}
-            <WrapperInput>
-                <IconProduct />
-                <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
-                    value={productName}
-                    onChangeText={(text) => setProductName(text)}
-                    placeholder="Product name" />
-                {productName != "" ? <IconCheck /> : <IconWrong />}
-            </WrapperInput>
-            {focusedProduct && <WrapperDropdown>
-                <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconAmount />
-                <Input style={{ width: '69%' }}
-                    keyboardType={'number-pad'}
-                    value={amount}
-                    onChangeText={(text) => setAmount(text)}
-                    placeholder="Amount" />
-                {amount ? <IconCheck /> : <IconWrong />}
-                <InputSmall style={{ marginLeft: "1%", width: '10%' }}
-                    onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
-                    value={qt}
-                    onChangeText={(text) => setQt(text)}
-                    placeholder="Qt." />
-            </WrapperInput>
-            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
-                <QtDropdown  text={qt} setElement={setQt} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconPerson />
-                <Input 
-                    value={person}
-                    onChangeText={(text) => setPerson(text)}
-                    placeholder="For" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconDetails />
-                <Input
-                    value={details}
-                    onChangeText={(text) => setDetails(text)}
-                    placeholder="Additional details" />
-            </WrapperInput>
-            <WrapperInput>
-                <IconTag />
-                <Input type="text"
-                    onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
-                    value={tag}
-                    onChangeText={(text) => setTag(text)}
-                    placeholder="Tag" />
-            </WrapperInput>
-            {focusedTag && <WrapperDropdown>
-                <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
-            </WrapperDropdown>}
-            <WrapperInput>
-                <IconDollar />
-                <Input 
-                    keyboardType={'number-pad'}
-                    value={price}
-                    onChangeText={(text) => setPrice(text)}
-                    placeholder="Price" />
-            </WrapperInput>
-            <WrapperButtons>
-                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
-                <VerticalSeperator />
-                <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
-            </WrapperButtons>
+                <ModalHeader>Add product</ModalHeader>
+                {/* {product && product.image && <Image source={product.image} />}  */}
+                <WrapperInput>
+                    <IconProduct />
+                    <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)}
+                        value={productName}
+                        onChangeText={(text) => setProductName(text)}
+                        placeholder="Product name" />
+                    {productName != "" ? <IconCheck /> : <IconWrong />}
+                </WrapperInput>
+                {focusedProduct && <WrapperDropdown>
+                    <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconAmount />
+                    <Input style={{ width: '69%' }}
+                        keyboardType={'number-pad'}
+                        value={amount}
+                        onChangeText={(text) => setAmount(text)}
+                        placeholder="Amount" />
+                    {amount ? <IconCheck /> : <IconWrong />}
+                    <InputSmall style={{ marginLeft: "1%", width: '10%' }}
+                        onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
+                        value={qt}
+                        onChangeText={(text) => setQt(text)}
+                        placeholder="Qt." />
+                </WrapperInput>
+                {focusedQt && <WrapperDropdown style={{ marginLeft: "60%" }}>
+                    <QtDropdown text={qt} setElement={setQt} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconPerson />
+                    <Input
+                        value={person}
+                        onChangeText={(text) => setPerson(text)}
+                        placeholder="For" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconDetails />
+                    <Input
+                        value={details}
+                        onChangeText={(text) => setDetails(text)}
+                        placeholder="Additional details" />
+                </WrapperInput>
+                <WrapperInput>
+                    <IconTag />
+                    <Input type="text"
+                        onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
+                        value={tag}
+                        onChangeText={(text) => setTag(text)}
+                        placeholder="Tag" />
+                </WrapperInput>
+                {focusedTag && <WrapperDropdown>
+                    <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
+                </WrapperDropdown>}
+                <WrapperInput>
+                    <IconDollar />
+                    <Input
+                        keyboardType={'number-pad'}
+                        value={price}
+                        onChangeText={(text) => setPrice(text)}
+                        placeholder="Price" />
+                </WrapperInput>
+                <WrapperButtons>
+                    <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
+                    <VerticalSeperator />
+                    <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
+                </WrapperButtons>
             </Wrapper>
         </StyledModal >
     )
diff --git a/src/components/modals/recipes/ModalAddIngredients.js b/src/components/modals/recipes/ModalAddIngredients.js
index 323c4f1..50b5608 100644
--- a/src/components/modals/recipes/ModalAddIngredients.js
+++ b/src/components/modals/recipes/ModalAddIngredients.js
@@ -7,12 +7,13 @@ import { findRecipeById } from '../../../redux/slices/recipesSlice'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong
+    StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong, Wrapper, ButtonText
 } from '../styles/modal'
 import Ingredient from '../../recipes/Ingredient&Button'
 import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
 import Dropdown from '../../Dropdown'
 import theme from '../../../styles/theme';
+import { Text } from 'react-native';
 
 const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />
 
@@ -56,7 +57,12 @@ const ModalAddIngredients = (props) => {
         }
     }
     return (
-        <StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
+        <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={props.closeModal}
+            onBackButtonPress={props.closeModal}
+            useNativeDriverForBackdrop
+            style={{margin: 0}} >
+            <Wrapper>
             <ModalHeader>Add to grocerylist</ModalHeader>
             <ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
             <WrapperInput>
@@ -65,7 +71,7 @@ const ModalAddIngredients = (props) => {
                     style={{ fontSize: 20 }}
                     type="text"
                     value={listName}
-                    onChange={(text) => setListName(text.target.value)}
+                    onChangeText={(text) => setListName(text)}
                     onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
                     placeholder="Grocery list" />
                 {listName ? <IconCheck /> : <IconWrong />}
@@ -78,9 +84,9 @@ const ModalAddIngredients = (props) => {
                 <IconMeal />
                 <Input
                     style={{ fontSize: 20, width: 100 }}
-                    type="number"
+                    type="number-pad"
                     value={servings}
-                    onChange={(text) => setServings(Number(text.target.value))}
+                    onChangeText={(text) => setServings(text)}
                     min={amountOfServings}
                     step={amountOfServings}
                     placeholder="Multiplier" />
@@ -88,10 +94,11 @@ const ModalAddIngredients = (props) => {
             </WrapperInput>
             {IngredientsList}
             <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
+                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                 <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add</Button>
+                <Button onPress={() => handleSubmit()}><ButtonText>Add</ButtonText></Button>
             </WrapperButtons>
+            </Wrapper>
         </StyledModal >
     )
 }
diff --git a/src/components/recipes/Ingredient&Button.js b/src/components/recipes/Ingredient&Button.js
index bf08136..c0347cb 100644
--- a/src/components/recipes/Ingredient&Button.js
+++ b/src/components/recipes/Ingredient&Button.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { View } from 'react-native'
 import styled from "styled-components"
 
@@ -10,10 +11,10 @@ export const Wrapper = styled(View)`
     display: flex;
     flex-direction: row;
     justify-content: center;
-    border-bottom-color: ${props => props.theme.colors.dp1};
+    border-bottom-color: ${props => props.theme.colors.dp01};
     border-bottom-width: 1px;
     border-radius: 20px;
-    background-color: ${props => props.checked === true && props.theme.colors.selected + '33'};
+    ${props => props.checked === true && css`background-color: ` + props.theme.colors.selected + '33'};
 `
 
 const IngredientButton = (props) => {
diff --git a/src/components/recipes/RecipeCard.js b/src/components/recipes/RecipeCard.js
index 558eb53..d2d93c2 100644
--- a/src/components/recipes/RecipeCard.js
+++ b/src/components/recipes/RecipeCard.js
@@ -1,11 +1,13 @@
-
+import { useNavigation } from "@react-navigation/core";
+import React from "react";
 import { WrapperRecipeCard, RecipeName, ImageRecipe } from "./styles/recipeCard"
 
 const RecipeCard = (props) => {
     let recipe = props.recipe
+    const navigation = useNavigation();
     return (
-        <WrapperRecipeCard to={"/recipes/"+recipe._id}>
-            {recipe.image && <ImageRecipe source={recipe.image} />}
+        <WrapperRecipeCard onPress={() => navigation.navigate('Recipe', { id: recipe._id })}>{/*to={"/recipes/"+recipe._id}>*/}
+            {recipe.image != "" && <ImageRecipe source={{ uri: recipe.image }} />}
             <RecipeName>{recipe.name}</RecipeName>
         </WrapperRecipeCard>
     )
diff --git a/src/components/recipes/RecipeList.js b/src/components/recipes/RecipeList.js
index 4fbdd05..958c81a 100644
--- a/src/components/recipes/RecipeList.js
+++ b/src/components/recipes/RecipeList.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { WrapperRecipeList } from "./styles/recipeList"
 import RecipeCard from "./RecipeCard"
 import { useSelector } from "react-redux"
diff --git a/src/components/recipes/addRecipe/Buttons.js b/src/components/recipes/addRecipe/Buttons.js
index 6a10b1e..1e3f2c6 100644
--- a/src/components/recipes/addRecipe/Buttons.js
+++ b/src/components/recipes/addRecipe/Buttons.js
@@ -4,6 +4,7 @@ import {
     WrapperAddRecipe, IconPlus,
     WrapperOptions, IconOptions, WrapperOptionButtons, IconRemove, IconEdit
 } from "./styles/buttons"
+import React from "react";
 import { useDispatch } from "react-redux"
 import { removeRecipe } from "../../../redux/slices/recipesSlice"
 
@@ -12,6 +13,7 @@ import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"
 import { Alert } from "react-native"
 
 export const AddRecipeButton = () => {
+
     return (
         // < Link to="/recipes/addRecipe">
             <WrapperAddRecipe>
@@ -24,7 +26,7 @@ export const AddRecipeButton = () => {
 export const AddIngredientsButton = (props) => {
     const [visible, setVisible] = useState(false)
     return (<>
-        <WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}>
+        <WrapperAddItem style={{ bottom: 10 }} onPress={()=>setVisible(true)}>
             <PlusIcon />
         </WrapperAddItem>
         <ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />
diff --git a/src/components/recipes/addRecipe/Ingredient.js b/src/components/recipes/addRecipe/Ingredient.js
index 0f75500..d7f352f 100644
--- a/src/components/recipes/addRecipe/Ingredient.js
+++ b/src/components/recipes/addRecipe/Ingredient.js
@@ -1,7 +1,8 @@
+import React from 'react';
 import { View } from "react-native"
 import { useSelector } from "react-redux"
 
-import { WrapperIngredient, TagCircle, IngredientName, IngredientPortion, IngredientAmount, IconEdit, IconRemove } from './styles/ingredient'
+import { WrapperIngredient, WrapperIngredientLeft, TagCircle, IngredientName, IngredientPortion, IngredientAmount, IconEdit, IconRemove } from './styles/ingredient'
 
 export const Ingredient = (props) => {
     let ingredient = props.ingredient
@@ -9,14 +10,14 @@ export const Ingredient = (props) => {
     let multiplier = props.multiplier ? props.multiplier : 1
     return (
         <WrapperIngredient>
-            <View id="left">
+            <WrapperIngredientLeft>
                 <TagCircle tagColor={tag.color} />
                 <IngredientPortion>{ingredient.portion}</IngredientPortion>
                 <IngredientName>{ingredient.productName}</IngredientName>
-            </View>
+            </WrapperIngredientLeft>
             <IngredientAmount>{ingredient.amount*multiplier}</IngredientAmount>
-            {/* {props.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />} */}
-            {/* {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />} */}
+            {props.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />}
+            {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />}
         </WrapperIngredient>
     )
 }
\ No newline at end of file
diff --git a/src/components/recipes/addRecipe/Inputs.js b/src/components/recipes/addRecipe/Inputs.js
index f013761..fc649e4 100644
--- a/src/components/recipes/addRecipe/Inputs.js
+++ b/src/components/recipes/addRecipe/Inputs.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useState } from "react"
 import { View } from "react-native"
 import { useSelector } from "react-redux"
diff --git a/src/components/recipes/addRecipe/styles/ingredient.js b/src/components/recipes/addRecipe/styles/ingredient.js
index 3feea56..6384cb4 100644
--- a/src/components/recipes/addRecipe/styles/ingredient.js
+++ b/src/components/recipes/addRecipe/styles/ingredient.js
@@ -5,58 +5,58 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import theme from "../../../../styles/theme";
 
 export const WrapperIngredient = styled(View)`
-margin: 5px 0px;
-display: flex;
-flex: 1;
-flex-direction: row;
-justify-content: center;
-align-items: center;
-#left{
+    margin: 5px 0px;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`
+export const WrapperIngredientLeft = styled(View)`
     display: flex;
     flex-direction: row;
     align-items: center;
     width: 75%;
-}
 `
 export const TagCircle = styled(View)`
-background-color: ${(props) => props.tagColor};
-width: 7px;
-height: 7px;
-border-radius: 4px;
-align-self: center;
-margin: 0px 5px;
+    background-color: ${(props) => props.tagColor};
+    width: 7px;
+    height: 7px;
+    border-radius: 4px;
+    align-self: center;
+    margin: 0px 5px;
 `
 export const IngredientName = styled(Text)`
-margin-left: 10px;
-width: 60%;
-font-size: ${({ theme }) => theme.fontSize.fontS};
-/* overflow-wrap: break-word; */
-color: ${props => props.theme.colors.textW4};
+    margin-left: 10px;
+    width: 60%;
+    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
+    /* overflow-wrap: break-word; */
+    color: ${props => props.theme.colors.textW4};
 `
 export const IngredientPortion = styled(Text)`
-width: 35%;
-font-size: ${({ theme }) => theme.fontSize.fontS};
-font-weight: 900;
-/* word-break: break-all; */
-/* overflow-wrap: break-word; */
-color: ${props => props.theme.colors.textW5};
+    width: 35%;
+    font-size: ${({ theme }) => theme.fontSizes.fontS}px;
+    font-weight: 900;
+    /* word-break: break-all; */
+    /* overflow-wrap: break-word; */
+    color: ${props => props.theme.colors.textW5};
 `
 export const IngredientAmount = styled(Text)`
-max-width: 12%;
-margin-right: 48px;
-font-size: ${({theme}) => theme.fontSize.fontS};
-/* overflow-wrap: break-word; */
-color: ${props => props.theme.colors.textW5};
+    max-width: 12%;
+    margin-right: 48px;
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
+    /* overflow-wrap: break-word; */
+    color: ${props => props.theme.colors.textW5};
 `
-const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />
 
 export const IconRemove = styled(Remove)`
-position:absolute;
-right: 0px;
+    position:absolute;
+    right: 0px;
 `
-const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSize.fontS} />
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSizes.fontS} />
 
 export const IconEdit = styled(Edit)`
-position:absolute;
-right: 20px;
+    position:absolute;
+    right: 20px;
 `
\ No newline at end of file
diff --git a/src/components/recipes/addRecipe/styles/inputs.js b/src/components/recipes/addRecipe/styles/inputs.js
index b4ab80b..0c07c00 100644
--- a/src/components/recipes/addRecipe/styles/inputs.js
+++ b/src/components/recipes/addRecipe/styles/inputs.js
@@ -15,19 +15,19 @@ export const WrapperIngredients = styled(View)`
 `
 export const InputIngredientName = styled(TextInput)`
     margin-top: 10px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
     width:100%;
 `
 export const InputAmount = styled(TextInput)`
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
     width: 50px;
 `
 export const InputPortion = styled(TextInput)`
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
     width: 60%;
@@ -39,5 +39,5 @@ export const Button = styled(Text)`
     bottom: -8px;
     color: ${props => props.theme.colors.primary + 'bb'};
     font-weight: bold;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
 `
\ No newline at end of file
diff --git a/src/components/recipes/styles/recipeCard.js b/src/components/recipes/styles/recipeCard.js
index 1023dc6..18e587a 100644
--- a/src/components/recipes/styles/recipeCard.js
+++ b/src/components/recipes/styles/recipeCard.js
@@ -1,19 +1,16 @@
-import { Image, Text, View } from 'react-native'
+import { Image, Text, TouchableOpacity, View } from 'react-native'
 import styled from 'styled-components'
 
-export const WrapperRecipeCard = styled(View)`
+export const WrapperRecipeCard = styled(TouchableOpacity)`
     box-shadow: ${({theme})=> theme.colors.shadow};
     display: flex;
-    flex:1;
     flex-direction: column;
     align-items: center;
     overflow: hidden;
     position: relative;
 
-    margin: 5px;
     height: 130px;
-    min-width: 130px;
-    max-width: 200px;
+    width: 48%;
     background-color: ${props => props.theme.colors.dp01 + 'dd'};
     border-radius: 20px;
 `
diff --git a/src/components/recipes/styles/recipeList.js b/src/components/recipes/styles/recipeList.js
index 041221f..907243f 100644
--- a/src/components/recipes/styles/recipeList.js
+++ b/src/components/recipes/styles/recipeList.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 export const WrapperRecipeList = styled(View)`
     display: flex;
-    justify-content: flex-start;
+    flex-direction: row;
+    justify-content: space-evenly;
     flex-wrap: wrap;
 `
\ No newline at end of file
diff --git a/src/pages/recipes/AddRecipe.js b/src/pages/recipes/AddRecipe.js
index b66890b..2ee143d 100644
--- a/src/pages/recipes/AddRecipe.js
+++ b/src/pages/recipes/AddRecipe.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Text, View } from 'react-native'
 //components
 import Header from "../../components/Header"
diff --git a/src/pages/recipes/Recipe.js b/src/pages/recipes/Recipe.js
index dbd3df3..35fc378 100644
--- a/src/pages/recipes/Recipe.js
+++ b/src/pages/recipes/Recipe.js
@@ -1,17 +1,17 @@
+import React from "react"
 import { useSelector } from "react-redux"
-import { useParams } from "react-router"
 //redux
 import { findRecipeById } from "../../redux/slices/recipesSlice"
 
-import { Wrapper, WrapperRecipe } from "./styles/addRecipe"
+import { Column, Row, Wrapper, WrapperRecipe } from "./styles/addRecipe"
 import { Ingredient } from "../../components/recipes/addRecipe/Ingredient"
-import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr } from "./styles/recipe"
+import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr, SubTitle, InstructionText, WrapperNumber } from "./styles/recipe"
 import { OptionsButtonRecipe, AddIngredientsButton } from "../../components/recipes/addRecipe/Buttons"
-import { Text, View } from "react-native"
+import { ScrollView, Text, View } from "react-native"
 import HeaderPadding from "../../components/Header"
 
-const Recipe = () => {
-    let { id } = useParams()
+const Recipe = (props) => {
+    const id = props.route.params.id
     const recipe = useSelector(state => findRecipeById(state, id))
     const IngredientList = recipe.ingredients.map((ingredient, index) => {
         return (<Ingredient ingredient={ingredient} index={index} key={index} />)
@@ -21,48 +21,50 @@ const Recipe = () => {
     let strArr = recipe.instructions.split("- ")
     const InstructionList = strArr.map((instruction, index) => {
         return index !== 0 && (<InstructionWrapper key={index} >
-            <View><InstructionNumber>{index}</InstructionNumber></View>
-            <Text id="instruction">{instruction}</Text>
+            <WrapperNumber><InstructionNumber>{index}</InstructionNumber></WrapperNumber>
+            <InstructionText>{instruction}</InstructionText>
         </InstructionWrapper>)
     })
     return (
         <>
-            <HeaderPadding/>
-            <Wrapper >
-                {recipe.image && <StyledImage source={recipe.image} />}
-                <WrapperRecipe>
-                    <Text>{recipe.name}</Text>
-                    <Hr />
-                    {recipe.prepTime !== 0 && recipe.prepTime && <>
-                        <View id="row" style={{ position: 'relative', marginTop: 0 }} >
-                            <IconPotLarge />
-                            <TextPrep>READY IN:</TextPrep>
-                            <View id="column" >
-                                <TextTime>{recipe.prepTime}</TextTime>
-                                <TextMinutes>minutes</TextMinutes>
-                            </View>
-                            {recipe.servings !== 0 && recipe.servings && <>
-                                <WrapperServings>
-                                    <IconMeal />
-                                    <View>
-                                        <TextTime>{recipe.servings}</TextTime>
-                                        <TextServings>servings</TextServings>
-                                    </View>
-                                </WrapperServings>
-                            </>}
-                        </View>
-                        <Hr />
-                    </>}
+            <ScrollView>
 
-                    <View style={{ width: '100%' }}>
-                        <Title>Ingredients</Title>
-                        {IngredientList}
+                <Wrapper >
+                    {recipe.image != "" && <StyledImage source={{ uri: recipe.image }} />}
+                    <WrapperRecipe>
+                        <Title>{recipe.name}</Title>
                         <Hr />
-                        <Title>Instructions</Title>
-                        {InstructionList}
-                    </View>
-                </WrapperRecipe>
-            </Wrapper>
+                        {recipe.prepTime !== 0 && recipe.prepTime && <>
+                            <Row style={{ position: 'relative', marginTop: 0 }} >
+                                <IconPotLarge />
+                                <TextPrep>READY IN:</TextPrep>
+                                <Column >
+                                    <TextTime>{recipe.prepTime}</TextTime>
+                                    <TextMinutes>minutes</TextMinutes>
+                                </Column>
+                                {recipe.servings !== 0 && recipe.servings && <>
+                                    <WrapperServings>
+                                        <IconMeal />
+                                        <View>
+                                            <TextTime>{recipe.servings}</TextTime>
+                                            <TextServings>servings</TextServings>
+                                        </View>
+                                    </WrapperServings>
+                                </>}
+                            </Row>
+                            <Hr />
+                        </>}
+
+                        <View style={{ width: '100%' }}>
+                            <SubTitle>Ingredients</SubTitle>
+                            {IngredientList}
+                            <Hr />
+                            <SubTitle>Instructions</SubTitle>
+                            {InstructionList}
+                        </View>
+                    </WrapperRecipe>
+                </Wrapper>
+            </ScrollView>
             <AddIngredientsButton id={id} />
         </>
     )
diff --git a/src/pages/recipes/RecipesPage.js b/src/pages/recipes/RecipesPage.js
index 3924867..b8cf103 100644
--- a/src/pages/recipes/RecipesPage.js
+++ b/src/pages/recipes/RecipesPage.js
@@ -1,4 +1,5 @@
 //components
+import React from "react";
 import RecipeList from "../../components/recipes/RecipeList"
 import Header from '../../components/Header'
 import { ArrowBack } from '../styles/page'
diff --git a/src/pages/recipes/styles/addRecipe.js b/src/pages/recipes/styles/addRecipe.js
index 5cedf2b..9fd5e0f 100644
--- a/src/pages/recipes/styles/addRecipe.js
+++ b/src/pages/recipes/styles/addRecipe.js
@@ -16,21 +16,20 @@ export const WrapperRecipe = styled(View)`
     align-items: flex-start;
     width: 100%;
     padding: 10px;
-    #row{
-        margin-top: 5px;
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        align-items: flex-end;
-    }
-    #column{
-        margin-left: 5px;
-        margin-bottom: -3px;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        justify-content: flex-end;
-    }
+`
+export const Row = styled(View)`
+    margin-top: 5px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+`
+export const Column = styled(View)`
+    margin-left: 5px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: flex-end;
 `
 export const Input = styled(TextInput)`
     flex:1;
@@ -39,7 +38,7 @@ export const Input = styled(TextInput)`
     color: ${props => props.theme.colors.textW1};
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
 
     width: 100%;
 `
@@ -49,10 +48,9 @@ export const InputInstructions = styled(Text)`
     padding: 5px;
 
     color: ${props => props.theme.colors.textW1};
-    border-top: solid ${props => props.theme.colors.primary + 'aa'} 1px;
     border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
     border-bottom-width: 1px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
     min-height: 600px;
     width: 100%;
 `
@@ -60,15 +58,15 @@ export const StyledImage = styled(Image)`
     width: 100px;
     height: 100px;
 `
-export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
 
-export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
 
-export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
 
-export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
+export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
 
-const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSize.fontL} />
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSizes.fontL} />
 
 export const IconCheck = styled(Check)`
     margin-right: 10px;
diff --git a/src/pages/recipes/styles/recipe.js b/src/pages/recipes/styles/recipe.js
index 6c0cdcd..9cdd278 100644
--- a/src/pages/recipes/styles/recipe.js
+++ b/src/pages/recipes/styles/recipe.js
@@ -5,6 +5,14 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import theme from "../../../styles/theme";
 
 export const Title = styled(Text)`
+    color: ${({theme}) => theme.colors.textW1};
+    font-weight: bold;
+    font-size: 28px;
+`
+export const SubTitle = styled(Text)`
+    color: ${({theme}) => theme.colors.textW2};
+    font-weight: bold;
+    font-size: 24px;
     margin-top: 10px;
 `
 export const InstructionWrapper = styled(View)`
@@ -15,27 +23,30 @@ export const InstructionWrapper = styled(View)`
     align-items: center;
     border-bottom-color: ${({ theme }) => theme.colors.dp02};
     border-bottom-width: 3px;
-    #instruction{
-        margin-left: 7px;
-        color: ${({theme}) => theme.colors.textW4};
-    }
 `
-export const InstructionNumber = styled(Text)`
+export const InstructionText= styled(Text)`
+    width: 80%;
+    font-size: 18px;
+    margin-left: 7px;
+    color: ${({theme}) => theme.colors.textW4};
+`
+export const WrapperNumber = styled(View)`
     display: flex;
     align-items: center;
     justify-content: center;
 
     background-color: ${({theme}) => theme.colors.primary + 'dd'};
+    height: 36px;
+    width: 36px;
+    border-radius: 18px;
+`
+export const InstructionNumber = styled(Text)`
     color: ${({theme}) => theme.colors.textB1};
     font-size: 25px;
     font-weight: bold;
-    height: 34px;
-    width: 34px;
-    border-radius: 17px;
 `
 
 export const StyledImage = styled(Image)`
-    margin-top: -70px;
     height: 200px;
     width: 100%;
 `
@@ -43,25 +54,24 @@ export const TextPrep = styled(Text)`
     text-align: right;
     width: 70px;
     font-weight: bold;
-    font-size: ${({theme}) => theme.fontSize.fontS};
-    line-height: 1.2;
+    font-size: ${({theme}) => theme.fontSizes.fontM}px;
+    color: ${({theme}) => theme.colors.textW4};
 `
 export const TextTime = styled(Text)`
-    margin-bottom: -3px;
     width: 70px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
     font-weight: bold;
-    line-height: 1.2;
+    font-size: ${({theme}) => theme.fontSizes.fontM}px;
     color: ${({ theme }) => theme.colors.primary};
 `
 export const TextMinutes = styled(Text)`
     width: 70px;
-    font-size: ${({theme}) => theme.fontSize.fontS};
-    font-weight: normal;
+    font-size: ${({theme}) => theme.fontSizes.fontS}px;
     color: ${({ theme }) => theme.colors.primary};
 `
 export const WrapperServings = styled(View)`
     display: flex;
+    flex-direction: row;
+    align-items: center;
     position: absolute;
     right: 2%;
     top: 2px;
@@ -69,14 +79,16 @@ export const WrapperServings = styled(View)`
 export const TextServings = styled(Text)`
     margin-top: -5px;
     font-weight: bold;
+    font-size: 18px;
+    color: ${({theme}) => theme.colors.textW4};
 `
-const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={theme.fontSize.fontL} />
+const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={40} />
 
 export const IconPotLarge = styled(PotLarge)`
     margin: -20px 0px -16px 0px;
 `
 
-const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primary} size={theme.fontSize.fontL} />
+const Meal = () => <MaterialCommunityIcons name="silverware-clean" color={theme.colors.primary} size={40} />
 
 export const IconMeal = styled(Meal)`
     margin: -20px 0px -16px 0px;