diff --git a/components/cycle-day/select-box-group.js b/components/cycle-day/select-box-group.js
index bde91772748ae18283a673567a373b0ef9c39e7e..ca14494bbe1b8405ef5e5f4b71903f26f27b47c7 100644
--- a/components/cycle-day/select-box-group.js
+++ b/components/cycle-day/select-box-group.js
@@ -9,7 +9,7 @@ import { AppText } from '../app-text'
 export default class SelectBoxGroup extends Component {
   render() {
     return (
-      <View flexDirection='row' flexWrap='wrap'>
+      <View style={styles.selectBoxSection}>
         {this.props.data.map(({ label, stateKey }) => {
           const style = [styles.selectBox]
           const textStyle = []
diff --git a/components/cycle-day/symptoms/pain.js b/components/cycle-day/symptoms/pain.js
index cc103bc4b7868909c4afdd0c4a1ccd53c142b01c..9005d1ec72c6dd634c13bb3e591f502a07482419 100644
--- a/components/cycle-day/symptoms/pain.js
+++ b/components/cycle-day/symptoms/pain.js
@@ -9,6 +9,7 @@ import { pain as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
+import styles from '../../../styles'
 
 const categories = labels.categories
 const boxes = [{
@@ -61,7 +62,7 @@ export default class Pain extends Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
           <SymptomSection
             explainer={labels.explainer}
           >
diff --git a/styles/index.js b/styles/index.js
index f8f3dc8ec81d246b7031313fce7c53e73f4d12be..21084769a10dfb16342f0bb164a04dfbbd4ea5d1 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -182,7 +182,8 @@ export default StyleSheet.create({
   },
   selectBox: {
     backgroundColor: 'lightgrey',
-    margin: 7,
+    marginRight: 7,
+    marginVertical: 5,
     paddingHorizontal: 15,
     paddingVertical: 10,
     borderRadius: 10