diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
index 528adbc..ea33f89 100644
--- a/src/components/Dropdown.js
+++ b/src/components/Dropdown.js
@@ -48,7 +48,7 @@ const Dropdown = (props) => {
         )
     })
     return (
-        <WrapperDropdown>
+        <WrapperDropdown keyboardShouldPersistTaps={'always'}>
             {dropdownList}
         </WrapperDropdown>
     )
diff --git a/src/components/modals/groceries/ModalAddItem.js b/src/components/modals/groceries/ModalAddItem.js
index 2c540ea..dbfcd8f 100644
--- a/src/components/modals/groceries/ModalAddItem.js
+++ b/src/components/modals/groceries/ModalAddItem.js
@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
 
 //styles
 import {
-    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper
+    StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, ButtonText, IconWrong, IconCheck, InputSmall, Wrapper
 } from '../styles/modal'
 import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
 import { IconTag, IconDollar } from './styles/addProduct'
@@ -75,7 +75,6 @@ const ModalAddItem = (props) => {
             <WrapperInput>
                 <IconProduct />
                 <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
-                    type="text"
                     value={productName}
                     onChangeText={(text) => setProductName(text)}
                     placeholder="Product name" />
@@ -87,31 +86,30 @@ const ModalAddItem = (props) => {
             <WrapperInput>
                 <IconAmount />
                 <Input style={{ width: '69%' }}
-                    type="number"
+                    keyboardType={'number-pad'}
                     value={amount}
                     onChange={(text) => setAmount(text)}
                     placeholder="Amount" />
                 {amount ? <IconCheck /> : <IconWrong />}
                 <InputSmall style={{ marginLeft: "1%", width: '10%' }}
-                    onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
-                    type="text"
+                    onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
                     value={qt}
                     onChange={(text) => setQt(text)}
                     placeholder="Qt." />
             </WrapperInput>
-            {/*{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
+            {focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
                 <QtDropdown  text={qt} setElement={setQt} />
             </WrapperDropdown>}
             <WrapperInput>
                 <IconPerson />
-                <Input type="text"
+                <Input 
                     value={person}
-                    onChange={(text) => setPerson(text.target.value)}
+                    onChange={(text) => setPerson(text)}
                     placeholder="For" />
             </WrapperInput>
             <WrapperInput>
                 <IconDetails />
-                <Input type="text"
+                <Input
                     value={details}
                     onChange={(text) => setDetails(text.target.value)}
                     placeholder="Additional details" />
@@ -119,9 +117,9 @@ const ModalAddItem = (props) => {
             <WrapperInput>
                 <IconTag />
                 <Input type="text"
-                    onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
+                    onFocus={() => setFocusedTag(true)} onBlur={() => setFocusedTag(false)}
                     value={tag}
-                    onChange={(text) => setTag(text.target.value)}
+                    onChange={(text) => setTag(text)}
                     placeholder="Tag" />
             </WrapperInput>
             {focusedTag && <WrapperDropdown>
@@ -129,16 +127,17 @@ const ModalAddItem = (props) => {
             </WrapperDropdown>}
             <WrapperInput>
                 <IconDollar />
-                <Input type="text"
+                <Input 
+                    keyboardType={'number-pad'}
                     value={price}
-                    onChange={(text) => setPrice(text.target.value)}
+                    onChange={(text) => setPrice(text)}
                     placeholder="Price" />
             </WrapperInput>
             <WrapperButtons>
-                <Button onClick={props.closeModal}>Close</Button>
+                <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
                 <VerticalSeperator />
-                <Button onClick={() => handleSubmit()}>Add Item</Button>
-            </WrapperButtons> */}
+                <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
+            </WrapperButtons>
             </Wrapper>
         </StyledModal >
     )
diff --git a/src/components/modals/groceries/styles/addItem.js b/src/components/modals/groceries/styles/addItem.js
index b88fd6c..cf15087 100644
--- a/src/components/modals/groceries/styles/addItem.js
+++ b/src/components/modals/groceries/styles/addItem.js
@@ -17,7 +17,7 @@ export const StyledImage = styled(Image)`
     border-bottom-right-radius: 100px;
 `
 
-export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.buttonGrey} size={32} />
-export const IconAmount = () => <MaterialCommunityIcons name="counter" color={theme.colors.buttonGrey} size={32} />
-export const IconPerson = () => <MaterialCommunityIcons name="account-circle" color={theme.colors.buttonGrey} size={32} />
-export const IconDetails = () => <MaterialCommunityIcons name="comment-plus-outline" color={theme.colors.buttonGrey} size={32} />
\ No newline at end of file
+export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.iconGrey} size={32} />
+export const IconAmount = () => <MaterialCommunityIcons name="counter" color={theme.colors.iconGrey} size={32} />
+export const IconPerson = () => <MaterialCommunityIcons name="account-circle" color={theme.colors.iconGrey} size={32} />
+export const IconDetails = () => <MaterialCommunityIcons name="comment-plus-outline" color={theme.colors.iconGrey} size={32} />
\ No newline at end of file
diff --git a/src/components/modals/groceries/styles/addProduct.js b/src/components/modals/groceries/styles/addProduct.js
index a90c54c..d4dba49 100644
--- a/src/components/modals/groceries/styles/addProduct.js
+++ b/src/components/modals/groceries/styles/addProduct.js
@@ -12,7 +12,7 @@ export const StyledImage = styled(Image)`
     right:0;
     border-radius: 15px; 
 `
-const iconSize = '32px'
+const iconSize = 32
 export const IconProduct = () => <MaterialCommunityIcons name="fast-food" color={theme.colors.iconGrey} size={iconSize} />
 
 export const IconTag = () => <MaterialCommunityIcons name="tag-outline" color={theme.colors.iconGrey} size={iconSize} />
diff --git a/src/components/modals/styles/modal.js b/src/components/modals/styles/modal.js
index f9e9885..83d61a2 100644
--- a/src/components/modals/styles/modal.js
+++ b/src/components/modals/styles/modal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, TextInput } from 'react-native'
+import { Text, View, TextInput, TouchableOpacity } from 'react-native'
 import styled from 'styled-components'
 import Modal from 'react-native-modal';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -63,11 +63,13 @@ export const Input = styled(TextInput)`
     margin-left: 5px;
     padding-right: 20px;
 `
-export const Button = styled(Text)`
+export const Button = styled(TouchableOpacity)`
+    margin-bottom: 10px;
+`
+export const ButtonText = styled(Text)`
     color: ${props => props.theme.colors.primary};
     font-weight: bold;
     font-size: ${({ theme }) => theme.fontSizes.fontS}px;
-    margin-bottom: 10px;
 `
 
 export const ModalHeader = styled(Text)`