diff --git a/components/common/button.js b/components/common/button.js
index 86f258286e88096cf1c033f569abd3ae4c37dc1f..afd57e52614ee4c53dd00ed965a4c41d0fa8a78c 100644
--- a/components/common/button.js
+++ b/components/common/button.js
@@ -4,11 +4,11 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 
 import AppText from './app-text'
 
-import { Containers, Typography } from '../../styles/redesign'
+import { Colors, Fonts, Spacing } from '../../styles/redesign'
 
-const Button = ({ children, isOrange, onPress, testID }) => {
-  const buttonStyle = isOrange ? styles.orange : {}
-  const textStyle = isOrange ? styles.buttonTextBold : styles.buttonTextRegular
+const Button = ({ children, isCTA, onPress, testID }) => {
+  const buttonStyle = isCTA ? styles.orange : {}
+  const textStyle = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
   return (
     <TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
       <AppText style={textStyle}>{children}</AppText>
@@ -18,20 +18,29 @@ const Button = ({ children, isOrange, onPress, testID }) => {
 
 Button.propTypes = {
   children: PropTypes.node,
-  isOrange: PropTypes.bool,
+  isCTA: PropTypes.bool,
   onPress: PropTypes.func,
   testID: PropTypes.string
 }
 
+const button = {
+  paddingHorizontal: Spacing.large,
+  paddingVertical: Spacing.base,
+  textTransform: 'uppercase'
+}
+
 const styles = StyleSheet.create({
   orange: {
-    ...Containers.orangeButton
+    backgroundColor: Colors.orange,
+    borderRadius: 25
   },
   buttonTextBold: {
-    ...Typography.buttonTextBold
+    fontFamily: Fonts.main,
+    ...button
   },
   buttonTextRegular: {
-    ...Typography.buttonTextRegular
+    fontFamily: Fonts.bold,
+    ...button
   }
 })
 
diff --git a/styles/containers.js b/styles/containers.js
index 66c3f0ccd77d727492742bd1791c5d68b7a2e968..32a240478d7bce4cbf9e1d470b899aab07ee9fa0 100644
--- a/styles/containers.js
+++ b/styles/containers.js
@@ -12,10 +12,6 @@ export default {
     borderStyle: 'solid',
     borderWidth: 1,
   },
-  orangeButton: {
-    backgroundColor: Colors.orange,
-    borderRadius: 25
-  },
   page: {
     backgroundColor: Colors.tourquiseLight,
     flex: 1
diff --git a/styles/redesign.js b/styles/redesign.js
index 019a9b84209ac3ed742e4cab656721f669083fcc..080add1ef791f5cf3180bde6b753f333fb8c0677 100644
--- a/styles/redesign.js
+++ b/styles/redesign.js
@@ -1,6 +1,6 @@
 import Colors from './colors'
 import Containers from './containers'
 import Spacing from './spacing'
-import Typography, { sizes as Sizes } from './typography'
+import Typography, { fonts as Fonts, sizes as Sizes } from './typography'
 
-export { Colors, Containers, Spacing, Sizes, Typography }
+export { Colors, Containers, Fonts, Spacing, Sizes, Typography }
diff --git a/styles/typography.js b/styles/typography.js
index e28bf7e033e846adc3c1ee7b458d771b403ce278..d567c3221d560cdc79b148bf6932c6f37ee0a423 100644
--- a/styles/typography.js
+++ b/styles/typography.js
@@ -1,7 +1,7 @@
 import Colors from './colors'
 import Spacing from './spacing'
 
-const fonts = {
+export const fonts = {
   main: 'Jost-400-Book',
   bold : 'Jost-700-Bold',
 }
@@ -12,21 +12,7 @@ export const sizes = {
   title: 24
 }
 
-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.base