diff --git a/components/common/app-loading.js b/components/common/app-loading.js
index 0c0057199bae817cd86e3c5204163b5603b54a77..87612bb76e6145241b2a790bdb7f532f67807fbe 100644
--- a/components/common/app-loading.js
+++ b/components/common/app-loading.js
@@ -1,18 +1,24 @@
 import React from 'react'
-
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
+
+import { Containers } from '../../styles/redesign'
+
 import { shared } from '../../i18n/en/labels'
 
 const AppLoadingView = () => {
   return (
-    <View flex={1}>
-      <View style={{flex:1, justifyContent: 'center'}}>
-        <AppText style={{alignSelf: 'center'}}>{shared.loading}</AppText>
-      </View>
+    <View style={styles.container}>
+      <AppText>{shared.loading}</AppText>
     </View>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
 export default AppLoadingView
diff --git a/components/common/app-text-input.js b/components/common/app-text-input.js
index 235337577d1e1d547a91a7f583b04ff731b1a78b..79bcee9491eb33bf15a03ef87c73e80af0fb72b1 100644
--- a/components/common/app-text-input.js
+++ b/components/common/app-text-input.js
@@ -1,17 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TextInput } from 'react-native'
-import styles from '../../styles'
+import { StyleSheet, TextInput } from 'react-native'
 
-export default function AppTextInput({ style, ...props }) {
+import { Containers } from '../../styles/redesign'
+
+const AppTextInput = ({
+  autoFocus,
+  onChangeText,
+  placeholder,
+  value,
+  style,
+  ...props
+}) => {
   if (!Array.isArray(style)) style = [style]
+
   return (
     <TextInput
-      style={[styles.textInputField, ...style]}
-      autoFocus={props.autoFocus}
-      onChangeText={props.onChangeText}
-      value={props.value}
-      placeholder={props.placeholder}
+      autoFocus={autoFocus}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      style={[styles.input, ...style]}
+      value={value}
       {...props}
     />
   )
@@ -28,3 +37,11 @@ AppTextInput.propTypes = {
 AppTextInput.defaultProps = {
   style: []
 }
+
+const styles = StyleSheet.create({
+  input: {
+    ...Containers.greyBorder
+  }
+})
+
+export default AppTextInput
diff --git a/components/common/button.js b/components/common/button.js
index f493cf70ec74a2a039c796ea137b2502fbdfea89..86f258286e88096cf1c033f569abd3ae4c37dc1f 100644
--- a/components/common/button.js
+++ b/components/common/button.js
@@ -1,31 +1,38 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TouchableOpacity } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+
 import AppText from './app-text'
-import styles from '../../styles'
 
-export default function Button({
-  backgroundColor,
-  children,
-  onPress,
-  style,
-  testID
-}) {
+import { Containers, Typography } from '../../styles/redesign'
+
+const Button = ({ children, isOrange, onPress, testID }) => {
+  const buttonStyle = isOrange ? styles.orange : {}
+  const textStyle = isOrange ? styles.buttonTextBold : styles.buttonTextRegular
   return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[styles.button, style, { backgroundColor }]}
-      testID={testID}
-    >
-      <AppText style={styles.homeButtonText}>{children}</AppText>
+    <TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
+      <AppText style={textStyle}>{children}</AppText>
     </TouchableOpacity>
   )
 }
 
 Button.propTypes = {
-  backgroundColor: PropTypes.string,
   children: PropTypes.node,
+  isOrange: PropTypes.bool,
   onPress: PropTypes.func,
-  style: PropTypes.object,
   testID: PropTypes.string
 }
+
+const styles = StyleSheet.create({
+  orange: {
+    ...Containers.orangeButton
+  },
+  buttonTextBold: {
+    ...Typography.buttonTextBold
+  },
+  buttonTextRegular: {
+    ...Typography.buttonTextRegular
+  }
+})
+
+export default Button
diff --git a/styles/containers.js b/styles/containers.js
index 50f986fe39acfebf42ab91e83a89ab0759ef5091..8927d297bcb1b0cbe64aaa0509c05716f719e0de 100644
--- a/styles/containers.js
+++ b/styles/containers.js
@@ -13,6 +13,16 @@ export default {
     flex: 1,
     justifyContent: 'center'
   },
+  greyBorder: {
+    borderColor: Colors.greyLight,
+    borderRadius: 5,
+    borderStyle: 'solid',
+    borderWidth: 1,
+  },
   marginBottom: { marginBottom: Spacing.base },
+  orangeButton: {
+    backgroundColor: Colors.orange,
+    borderRadius: 25
+  },
   segmentContainer: { marginHorizontal: Spacing.base }
 }
\ No newline at end of file
diff --git a/styles/spacing.js b/styles/spacing.js
index 037caa161b255c328276001914b348d7272f7a46..d1dece00afdd8f05b7deac9145864ddbbc611792 100644
--- a/styles/spacing.js
+++ b/styles/spacing.js
@@ -1,3 +1,4 @@
 export default {
-  base: 16
+  base: 16,
+  large: 20
 }
\ No newline at end of file
diff --git a/styles/typography.js b/styles/typography.js
index 15371a1e6102f02758c977a8bfb5318bbe600613..f73d6f93a6c0a810c42a8dec0e90789012930e01 100644
--- a/styles/typography.js
+++ b/styles/typography.js
@@ -14,15 +14,29 @@ const sizes = {
   titleLarge: 28
 }
 
+const button = {
+  paddingHorizontal: Spacing.large,
+  paddingVertical: Spacing.base,
+  textTransform: 'uppercase'
+}
+
 export default {
+  buttonTextBold: {
+    fontFamily: fonts.bold,
+    ...button
+  },
+  buttonTextRegular: {
+    fontFamily: fonts.main,
+    ...button
+  },
   mainText: {
     fontFamily: fonts.main,
     fontSize: sizes.mainMedium
   },
-  underline: { textDecorationLine: 'underline' },
   titleSmall: {
     color: Colors.purple,
     fontSize: sizes.titleSmall,
     marginVertical: Spacing.base
-  }
+  },
+  underline: { textDecorationLine: 'underline' }
 }