diff --git a/design_files/arc-wireframes2.2.xd b/design_files/arc-wireframes2.2.xd
index dac9abe..9bec04c 100644
Binary files a/design_files/arc-wireframes2.2.xd and b/design_files/arc-wireframes2.2.xd differ
diff --git a/js/components/PickerItemRow.js b/js/components/PickerItemRow.js
index da251d3..b6443df 100644
--- a/js/components/PickerItemRow.js
+++ b/js/components/PickerItemRow.js
@@ -17,8 +17,8 @@ const PickerItemRow = ({ isSelected, onPress, text = { text } }) => {
 	return (
 		<>
 			<TouchableOpacity onPress={onPress} style={pickerItemRowContainerStyle}>
-				<Text style={{ color, fontSize: 18 }}>{text}</Text>
-				{!!isSelected && <Icon name="check-circle" size={20} style={{ color }} />}
+				<Text style={{ color, fontSize: 16 }}>{text}</Text>
+				{!!isSelected && <Icon name="check" size={22} style={{ color }} />}
 			</TouchableOpacity>
 			<Divider />
 		</>
diff --git a/js/components/TopToolbar.js b/js/components/TopToolbar.js
index 78b1d88..1dc0578 100644
--- a/js/components/TopToolbar.js
+++ b/js/components/TopToolbar.js
@@ -89,18 +89,7 @@ class TopToolbar extends Component {
 		const searchPlaceholder = /\/food/.test(route) ? 'Search Food...' : 'Search Places...';
 
 		return (
-			<View style={{ 
-				backgroundColor: palette.primaryColor,
-				shadowRadius: 2,
-				shadowOpacity: 0.24,
-				shadowColor: 'black',
-				shadowOffset: {
-					height: 2,
-					width: 0,
-				},
-				elevation: 2,
-				}}
-			>
+			<View style={{backgroundColor: palette.primaryColor}}>
 				<SafeAreaView>
 					{!showSearch && (
 						<Toolbar
diff --git a/js/modals/FilterModal.js b/js/modals/FilterModal.js
index 1a9c683..e98fe3a 100644
--- a/js/modals/FilterModal.js
+++ b/js/modals/FilterModal.js
@@ -36,7 +36,7 @@ type Props = {
 
 const rowStyle = { flexDirection: 'row', justifyContent: 'space-between', padding: 15 };
 
-const selectedItemText = { marginTop: 10, color: theme.palette.disabledColor };
+const selectedItemText = { marginTop: 10, color: theme.palette.atcStdGrey };
 
 const FilterModal = (props: Props) => {
 	const {
@@ -74,7 +74,7 @@ const FilterModal = (props: Props) => {
 				return (
 					<View key={category}>
 						<TouchableOpacity style={rowStyle} onPress={toggleCategory(category, isChecked)}>
-							<Text style={{ fontSize: 15 }}>{getCategoryText(category)}</Text>
+							<Text style={{ fontSize: 16 }}>{getCategoryText(category)}</Text>
 							<View style={{ width: 40 }}>
 								<Checkbox
 									value={isChecked ? 0 : 1}
@@ -91,14 +91,14 @@ const FilterModal = (props: Props) => {
 			<TouchableOpacity
 				style={[rowStyle, { flexDirection: 'column' }]}
 				onPress={toggleOrderByModalOpen}>
-				<Text>Sort By</Text>
+				<Text style={{ fontSize: 16 }}>Sort By</Text>
 				<Text style={selectedItemText}>{getOrderbyText(orderby)}</Text>
 			</TouchableOpacity>
 			<Divider />
 			<TouchableOpacity
 				style={[rowStyle, { flexDirection: 'column' }]}
 				onPress={toggleRadiusModalOpen}>
-				<Text>Search Radius</Text>
+				<Text style={{ fontSize: 16 }}>Search Radius</Text>
 				<Text style={selectedItemText}>{radius} miles</Text>
 			</TouchableOpacity>
 			<Divider />
diff --git a/js/pages/CreateFoodItem.js b/js/pages/CreateFoodItem.js
index 959c52c..ca5d704 100644
--- a/js/pages/CreateFoodItem.js
+++ b/js/pages/CreateFoodItem.js
@@ -57,13 +57,14 @@ type GooglePlaceObject = {
 };
 
 const fieldStyle = {
-	paddingTop: 30,
+	paddingTop: 24,
+	paddingLeft: 8,
+	paddingRight: 8,
 };
 
 const fieldNameStyle = {
-	fontSize: 18,
-	paddingBottom: 10,
-	paddingLeft: 10,
+	fontSize: 16,
+	paddingBottom: 8,
 };
 
 const Field = ({
diff --git a/js/pages/LoginPage.js b/js/pages/LoginPage.js
index 8a05408..5f869c5 100644
--- a/js/pages/LoginPage.js
+++ b/js/pages/LoginPage.js
@@ -77,15 +77,12 @@ const LoginPageComponent = ({
 					flexDirection: 'column',
 					alignItems: 'center',
 					justifyContent: 'flex-start',
-					padding: 20,
-					borderWidth: 1,
-					borderColor: 'pink',
 				}}>
-				{error && <Text style={{ fontSize: 16, color: 'red', fontWeight: 'bold' }}>{error}</Text>}
+				{error && <Text style={{ fontSize: 16, color: '#721c24', backgroundColor: '#f8d7da', padding: 16,}}>{error}</Text>}
 
-				<Text style={{ fontSize: 64, fontWeight: '600' }}>Sign In</Text>
+				<Text style={{ fontSize: 42, fontWeight: '300', margin: 16 }}>Sign In</Text>
 
-				<View style={{ flexDirection: 'row', marginTop: 20 }}>
+				<View style={{ flexDirection: 'row', padding: 16, paddingBottom: 0 }}>
 					<View style={{ flex: 1, flexDirection: 'column' }}>
 						<TextInput
 							editable={true}
@@ -93,7 +90,8 @@ const LoginPageComponent = ({
 							placeholder="Email"
 							onChangeText={setEmail}
 							style={{
-								fontSize: 18,
+								fontSize: 16,
+								paddingLeft: 0
 							}}
 						/>
 						<Divider />
@@ -101,7 +99,7 @@ const LoginPageComponent = ({
 				</View>
 
 				{isNewUser && (
-					<View style={{ flexDirection: 'row', marginTop: 20 }}>
+					<View style={{ flexDirection: 'row', padding: 16, paddingBottom: 0 }}>
 						<View style={{ flex: 1, flexDirection: 'column' }}>
 							<TextInput
 								editable={true}
@@ -109,7 +107,8 @@ const LoginPageComponent = ({
 								placeholder="Username"
 								onChangeText={setUsername}
 								style={{
-									fontSize: 18,
+									fontSize: 16,
+									paddingLeft: 0
 								}}
 							/>
 							<Divider />
@@ -117,7 +116,7 @@ const LoginPageComponent = ({
 					</View>
 				)}
 
-				<View style={{ flexDirection: 'row', marginTop: 20 }}>
+				<View style={{ flexDirection: 'row', padding: 16, paddingBottom: 0 }}>
 					<View style={{ flex: 1, flexDirection: 'column' }}>
 						<TextInput
 							editable={true}
@@ -126,15 +125,16 @@ const LoginPageComponent = ({
 							placeholder="Password"
 							onChangeText={setPassword}
 							style={{
-								fontSize: 18,
+								fontSize: 16,
+								paddingLeft: 0
 							}}
 						/>
 						<Divider />
 					</View>
 				</View>
 
-				<View style={{ flexDirection: 'row', marginTop: 20 }}>
-					<View style={{ flex: 1, flexDirection: 'column', paddingTop: 20 }}>
+				<View style={{ flexDirection: 'row', padding: 16, paddingBottom: 0, paddingTop: 32 }}>
+					<View style={{ flex: 1, flexDirection: 'column', }}>
 						<Button title={submitTitle} onPress={submitAction} color={theme.palette.primaryColor} />
 					</View>
 				</View>
@@ -142,7 +142,7 @@ const LoginPageComponent = ({
 				{!isNewUser && (
 					<TouchableOpacity
 						onPress={() => setIsNewUser(true)}
-						style={{ flexDirection: 'row', marginTop: 20, padding: 20 }}>
+						style={{ flexDirection: 'row', marginTop: 16, padding: 16, paddingBottom: 0 }}>
 						<Text
 							style={{
 								flex: 1,
@@ -160,7 +160,7 @@ const LoginPageComponent = ({
 					style={{
 						flexDirection: 'row',
 						marginTop: 0,
-						padding: 20,
+						padding:16,
 						alignItems: 'center',
 						justifyContent: 'center',
 					}}>
@@ -173,7 +173,7 @@ const LoginPageComponent = ({
 						}}>
 						Forgot your pasword?
 					</Text>
-					<Icon name="launch" color={theme.palette.primaryColor} size={18} />
+					<Icon name="launch" color={theme.palette.primaryColor} size={16} />
 				</TouchableOpacity>
 			</View>
 		);
@@ -202,7 +202,7 @@ export default compose(
 				await AuthManager.authenticate({ email, password });
 				checkAuth();
 			} catch (err) {
-				setError('Login Failed! Please check the username and password and try again.');
+				setError('You have entered an invalid username or password. Please try again.');
 			}
 		},
 	}),
diff --git a/js/pages/ProfilePage.js b/js/pages/ProfilePage.js
index bc4ce82..d7465ab 100644
--- a/js/pages/ProfilePage.js
+++ b/js/pages/ProfilePage.js
@@ -39,14 +39,14 @@ export const ProfilePage = (props: Props) => {
 	} = props;
 	const usingGPS = zipcode === 'usegps';
 	return (
-		<View style={{ flex: 1, flexDirection: 'column', padding: 15 }}>
-			<Text style={{ fontSize: 32, marginBottom: 20, color: '#555555' }}>Profile</Text>
-			<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-				<Text style={{ fontSize: 18 }}>Use My Location</Text>
+		<View style={{ flex: 1, flexDirection: 'column',  }}>
+			<Text style={{ fontSize: 42, marginBottom: 8, color: '000', padding: 16 }}>Profile</Text>
+			<View style={{ flexDirection: 'row', justifyContent: 'space-between', borderColor: '#ccc', borderTopWidth: 1, borderBottomWidth: 1, padding: 16 }}>
+				<Text style={{ fontSize: 16 }}>Use My Location</Text>
 				<Switch value={usingGPS} onValueChange={toggleGPS} />
 			</View>
 			{!usingGPS && (
-				<View style={{ flexDirection: 'row' }}>
+				<View style={{ flexDirection: 'row', padding: 16 }}>
 					<View
 						style={{
 							flex: 1,
@@ -62,14 +62,14 @@ export const ProfilePage = (props: Props) => {
 							onEndEditing={saveZip}
 							keyboardType="numeric"
 							style={{
-								fontSize: 18,
+								fontSize: 16,
 							}}
 						/>
 					</View>
 				</View>
 			)}
 			{!!error && <Text style={{ fontSize: 16, color: 'red' }}>{error}</Text>}
-			<View style={{ marginTop: 20 }}>
+			<View style={{ marginTop: 16, padding: 8 }}>
 				{isLoggedIn && (
 					<IconButton
 						glyph="exit-to-app"
diff --git a/js/ui-theme.js b/js/ui-theme.js
index 04c1dba..de03bd4 100644
--- a/js/ui-theme.js
+++ b/js/ui-theme.js
@@ -48,7 +48,7 @@ export default {
 		backgroundColor: 'white',
 	},
 	divider: {
-		container: { height: 2 },
+		container: { height: 1 },
 	},
 	topTabs: {
 		selectedUnderlineStyle: {
@@ -79,7 +79,7 @@ export default {
 			color: COLOR.black,
 		},
 		itemPlaceStyle: {
-			color: 'palette.atcStdGrey',
+			color: palette.atcStdGrey,
 			paddingTop: 1,
 		},
 		availableCountStyle: {
@@ -141,16 +141,9 @@ export default {
 			paddingTop: 8,
 			justifyContent: 'space-around',
 			alignItems: 'baseline',
-			borderWidth: 0,
-			backgroundColor : "#0000",
-			shadowRadius: 2,
-			shadowOpacity: 0.24,
-			shadowColor: 'black',
-			shadowOffset: {
-				height: 2,
-				width: 0,
-			},
-			elevation: 2,
+			borderWidth: 1,
+			borderColor: '#fff',
+			borderTopColor: '#ccc',
 		},
 	},
 	bottomNavigationAction: {