diff --git a/components/app.js b/components/app.js
index ce0eaf2..39318f3 100644
--- a/components/app.js
+++ b/components/app.js
@@ -7,7 +7,8 @@ import Calendar from './calendar'
 import CycleDay from './cycle-day/cycle-day-overview'
 import symptomViews from './cycle-day/symptoms'
 import Chart from './chart/chart'
-import Settings from './settings'
+import SettingsMenu from './settings/settings-menu'
+import settingsViews from './settings'
 import Stats from './stats'
 import {headerTitles, menuTitles} from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
@@ -24,6 +25,7 @@ const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
 }, {})
 
 const isSymptomView = name => Object.keys(symptomViews).includes(name)
+const isSettingsView = name => Object.keys(settingsViews).includes(name)
 const isMenuItem = name => Object.keys(menuTitles).includes(name)
 
 export default class App extends Component {
@@ -58,6 +60,8 @@ export default class App extends Component {
       this.navigate(
         this.originForSymptomView, { date: this.state.currentProps.date }
       )
+    } else if (isSettingsView(this.state.currentPage)) {
+      this.navigate('SettingsMenu')
     } else if(this.state.currentPage === 'CycleDay') {
       this.navigate(this.menuOrigin)
     } else {
@@ -68,7 +72,7 @@ export default class App extends Component {
 
   render() {
     const page = {
-      Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
+      Home, Calendar, CycleDay, Chart, SettingsMenu, ...settingsViews, Stats, ...symptomViews
     }[this.state.currentPage]
     return (
       <View style={{flex: 1}}>
diff --git a/components/menu.js b/components/menu.js
index 4e80cbb..7a692e0 100644
--- a/components/menu.js
+++ b/components/menu.js
@@ -38,7 +38,7 @@ export default class Menu extends Component {
           { title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
           { title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
           { title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
-          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('Settings') },
+          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('SettingsMenu') },
         ].map(this.makeMenuItem)}
       </View >
     )
diff --git a/components/settings/about.js b/components/settings/about.js
index 85a7721..96d0b96 100644
--- a/components/settings/about.js
+++ b/components/settings/about.js
@@ -1,17 +1,17 @@
 import React, { Component } from 'react'
-import {
-  View
-} from 'react-native'
+import { View, ScrollView } from 'react-native'
 import AppText from '../app-text'
 import styles from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+import labels from '../../i18n/en/settings'
 export default class AboutSection extends Component {
   render() {
     return (
-      <View style={styles.settingsSegment}>
-        <AppText style={styles.settingsSegmentTitle}>{`${labels.aboutSection.title} `}</AppText>
-        <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
-      </View>
+      <ScrollView>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>{`${labels.aboutSection.title} `}</AppText>
+          <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
+        </View>
+      </ScrollView>
     )
   }
 }
diff --git a/components/settings/export-dialog.js b/components/settings/import-export/export-dialog.js
similarity index 80%
rename from components/settings/export-dialog.js
rename to components/settings/import-export/export-dialog.js
index 97db9d3..58301cf 100644
--- a/components/settings/export-dialog.js
+++ b/components/settings/import-export/export-dialog.js
@@ -1,9 +1,9 @@
 import Share from 'react-native-share'
 
-import { getCycleDaysSortedByDate } from '../../db'
-import getDataAsCsvDataUri from '../../lib/import-export/export-to-csv'
-import alertError from './alert-error'
-import { settings } from '../../i18n/en/settings'
+import { getCycleDaysSortedByDate } from '../../../db'
+import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
+import alertError from '../alert-error'
+import settings from '../../../i18n/en/settings'
 import RNFS from 'react-native-fs'
 
 export default async function exportData() {
diff --git a/components/settings/import-dialog.js b/components/settings/import-export/import-dialog.js
similarity index 86%
rename from components/settings/import-dialog.js
rename to components/settings/import-export/import-dialog.js
index 5701b08..2ff977e 100644
--- a/components/settings/import-dialog.js
+++ b/components/settings/import-export/import-dialog.js
@@ -1,10 +1,10 @@
 import { Alert } from 'react-native'
 import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
 import rnfs from 'react-native-fs'
-import importCsv from '../../lib/import-export/import-from-csv'
-import { shared as sharedLabels } from '../../i18n/en/labels'
-import { settings as labels } from '../../i18n/en/settings'
-import alertError from './alert-error'
+import importCsv from '../../../lib/import-export/import-from-csv'
+import { shared as sharedLabels } from '../../../i18n/en/labels'
+import labels from '../../../i18n/en/settings'
+import alertError from '../alert-error'
 
 export default function openImportDialogAndImport() {
   Alert.alert(
diff --git a/components/settings/import-export/index.js b/components/settings/import-export/index.js
new file mode 100644
index 0000000..430f29b
--- /dev/null
+++ b/components/settings/import-export/index.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import {
+  View, ScrollView,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../../styles/index'
+import labels from '../../../i18n/en/settings'
+import AppText from '../../app-text'
+import openImportDialogAndImport from './import-dialog'
+import openShareDialogAndExport from './export-dialog'
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>
+            {labels.export.button}
+          </AppText>
+          <AppText>{labels.export.segmentExplainer}</AppText>
+          <TouchableOpacity
+            onPress={openShareDialogAndExport}
+            style={styles.settingsButton}>
+            <AppText style={styles.settingsButtonText}>
+              {labels.export.button}
+            </AppText>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>
+            {labels.import.button}
+          </AppText>
+          <AppText>{labels.import.segmentExplainer}</AppText>
+          <TouchableOpacity
+            onPress={openImportDialogAndImport}
+            style={styles.settingsButton}>
+            <AppText style={styles.settingsButtonText}>
+              {labels.import.button}
+            </AppText>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    )
+  }
+}
diff --git a/components/settings/index.js b/components/settings/index.js
index 8091867..a1eaa03 100644
--- a/components/settings/index.js
+++ b/components/settings/index.js
@@ -1,69 +1,9 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native'
-import styles from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
-import AppText from '../app-text'
-import TempReminderPicker from './temp-reminder-picker'
-import PeriodReminderPicker from './period-reminder'
-import TempSlider from './temp-slider'
-import AboutSection from './about'
-import openImportDialogAndImport from './import-dialog'
-import openShareDialogAndExport from './export-dialog'
-import PasswordSetting from './password'
-import UseCervixSetting from './use-cervix'
+import Reminders from './reminders'
+import NfpSettings from './nfp-settings'
+import ImportExport from './import-export'
+import Password from './password'
+import About from './about'
 
-export default class Settings extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
-  render() {
-    return (
-      <ScrollView>
-        <TempReminderPicker/>
-        <UseCervixSetting/>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.tempScale.segmentTitle}
-          </AppText>
-          <AppText>{labels.tempScale.segmentExplainer}</AppText>
-          <TempSlider/>
-        </View>
-        <PeriodReminderPicker/>
-        <PasswordSetting />
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.export.button}
-          </AppText>
-          <AppText>{labels.export.segmentExplainer}</AppText>
-          <TouchableOpacity
-            onPress={openShareDialogAndExport}
-            style={styles.settingsButton}>
-            <AppText style={styles.settingsButtonText}>
-              {labels.export.button}
-            </AppText>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.settingsSegment}>
-          <AppText style={styles.settingsSegmentTitle}>
-            {labels.import.button}
-          </AppText>
-          <AppText>{labels.import.segmentExplainer}</AppText>
-          <TouchableOpacity
-            onPress={openImportDialogAndImport}
-            style={styles.settingsButton}>
-            <AppText style={styles.settingsButtonText}>
-              {labels.import.button}
-            </AppText>
-          </TouchableOpacity>
-        </View>
-        <AboutSection/>
-      </ScrollView>
-    )
-  }
+export default {
+  Reminders, NfpSettings, ImportExport, Password, About
 }
diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
new file mode 100644
index 0000000..bac516c
--- /dev/null
+++ b/components/settings/nfp-settings/index.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import {
+  ScrollView, View
+} from 'react-native'
+import styles from '../../../styles'
+import labels from '../../../i18n/en/settings'
+import AppText from '../../app-text'
+import TempSlider from './temp-slider'
+import UseCervixSetting from './use-cervix'
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <UseCervixSetting/>
+        <View style={styles.settingsSegment}>
+          <AppText style={styles.settingsSegmentTitle}>
+            {labels.tempScale.segmentTitle}
+          </AppText>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
+          <TempSlider/>
+        </View>
+      </ScrollView>
+    )
+  }
+}
diff --git a/components/settings/temp-slider.js b/components/settings/nfp-settings/temp-slider.js
similarity index 86%
rename from components/settings/temp-slider.js
rename to components/settings/nfp-settings/temp-slider.js
index 7052299..9dcdfb9 100644
--- a/components/settings/temp-slider.js
+++ b/components/settings/nfp-settings/temp-slider.js
@@ -1,15 +1,15 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import Slider from '@ptomasroos/react-native-multi-slider'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   scaleObservable,
   saveTempScale,
-} from '../../local-storage'
-import { secondaryColor } from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
-import config from '../../config'
-import alertError from './alert-error'
+} from '../../../local-storage'
+import { secondaryColor } from '../../../styles/index'
+import labels from '../../../i18n/en/settings'
+import config from '../../../config'
+import alertError from '../alert-error'
 
 export default class TempSlider extends Component {
   constructor(props) {
diff --git a/components/settings/use-cervix.js b/components/settings/nfp-settings/use-cervix.js
similarity index 87%
rename from components/settings/use-cervix.js
rename to components/settings/nfp-settings/use-cervix.js
index 668a0e8..ecfe5d3 100644
--- a/components/settings/use-cervix.js
+++ b/components/settings/nfp-settings/use-cervix.js
@@ -4,13 +4,13 @@ import {
   TouchableOpacity,
   Switch
 } from 'react-native'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   useCervixObservable,
   saveUseCervix
-} from '../../local-storage'
-import styles from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+} from '../../../local-storage'
+import styles from '../../../styles/index'
+import labels from '../../../i18n/en/settings'
 
 export default class UseCervixSetting extends Component {
   constructor() {
diff --git a/components/settings/password/create.js b/components/settings/password/create.js
index 011bbd7..bda688f 100644
--- a/components/settings/password/create.js
+++ b/components/settings/password/create.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import { settings } from '../../../i18n/en/settings'
+import settings from '../../../i18n/en/settings'
 import EnterNewPassword from './enter-new-password'
 import SettingsButton from './settings-button'
 import showBackUpReminder from './show-backup-reminder'
diff --git a/components/settings/password/delete.js b/components/settings/password/delete.js
index d75f2de..6cef844 100644
--- a/components/settings/password/delete.js
+++ b/components/settings/password/delete.js
@@ -6,7 +6,7 @@ import {
 import nodejs from 'nodejs-mobile-react-native'
 import AppText from '../../app-text'
 import styles from '../../../styles'
-import { settings as labels } from '../../../i18n/en/settings'
+import labels from '../../../i18n/en/settings'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
 import PasswordField from './password-field'
 import showBackUpReminder from './show-backup-reminder'
diff --git a/components/settings/password/enter-new-password.js b/components/settings/password/enter-new-password.js
index a63556b..ed09ead 100644
--- a/components/settings/password/enter-new-password.js
+++ b/components/settings/password/enter-new-password.js
@@ -8,7 +8,7 @@ import PasswordField from './password-field'
 import SettingsButton from './settings-button'
 
 import styles from '../../../styles'
-import { settings } from '../../../i18n/en/settings'
+import settings from '../../../i18n/en/settings'
 
 const LISTENER_TYPE = 'create-or-change-pw'
 
diff --git a/components/settings/password/index.js b/components/settings/password/index.js
index 47e4848..f5741e3 100644
--- a/components/settings/password/index.js
+++ b/components/settings/password/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
+import { View, ScrollView } from 'react-native'
 import CreatePassword from './create'
 import ChangePassword from './update'
 import DeletePassword from './delete'
@@ -8,7 +8,7 @@ import {
   hasEncryptionObservable
 } from '../../../local-storage'
 import styles from '../../../styles/index'
-import { settings as labels } from '../../../i18n/en/settings'
+import labels from '../../../i18n/en/settings'
 
 export default class PasswordSetting extends Component {
   constructor(props) {
@@ -21,30 +21,32 @@ export default class PasswordSetting extends Component {
 
   render() {
     return (
-      <View style={styles.settingsSegment}>
+      <ScrollView>
+        <View style={styles.settingsSegment}>
 
-        <AppText style={styles.settingsSegmentTitle}>
-          {labels.passwordSettings.title}
-        </AppText>
+          <AppText style={styles.settingsSegmentTitle}>
+            {labels.passwordSettings.title}
+          </AppText>
 
-        {this.state.showUpdateAndDelete ?
-          <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
-          :
-          <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
-        }
+          {this.state.showUpdateAndDelete ?
+            <AppText>{labels.passwordSettings.explainerEnabled}</AppText>
+            :
+            <AppText>{labels.passwordSettings.explainerDisabled}</AppText>
+          }
 
-        {this.state.showUpdateAndDelete &&
+          {this.state.showUpdateAndDelete &&
           <View>
             <ChangePassword/>
             <DeletePassword/>
           </View>
-        }
+          }
 
-        {this.state.showCreate &&
+          {this.state.showCreate &&
           <CreatePassword/>
-        }
+          }
 
-      </View>
+        </View>
+      </ScrollView>
     )
   }
 }
\ No newline at end of file
diff --git a/components/settings/password/show-backup-reminder.js b/components/settings/password/show-backup-reminder.js
index 708b81c..f61e5a4 100644
--- a/components/settings/password/show-backup-reminder.js
+++ b/components/settings/password/show-backup-reminder.js
@@ -1,6 +1,6 @@
 import { Alert } from 'react-native'
 import { shared } from '../../../i18n/en/labels'
-import { settings as labels } from '../../../i18n/en/settings'
+import labels from '../../../i18n/en/settings'
 
 export default function showBackUpReminder(okHandler, isDelete) {
   let title, message
diff --git a/components/settings/password/update.js b/components/settings/password/update.js
index 33cddbd..a246c0e 100644
--- a/components/settings/password/update.js
+++ b/components/settings/password/update.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
-import { settings } from '../../../i18n/en/settings'
+import settings from '../../../i18n/en/settings'
 import { requestHash } from '../../../db'
 import EnterNewPassword from './enter-new-password'
 import PasswordField from './password-field'
diff --git a/components/settings/reminders/index.js b/components/settings/reminders/index.js
new file mode 100644
index 0000000..ca234d1
--- /dev/null
+++ b/components/settings/reminders/index.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import {
+  ScrollView,
+} from 'react-native'
+import TempReminderPicker from './temp-reminder-picker'
+import PeriodReminderPicker from './period-reminder'
+
+export default class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <TempReminderPicker/>
+        <PeriodReminderPicker/>
+      </ScrollView>
+    )
+  }
+}
diff --git a/components/settings/period-reminder.js b/components/settings/reminders/period-reminder.js
similarity index 85%
rename from components/settings/period-reminder.js
rename to components/settings/reminders/period-reminder.js
index 1bc41cb..3c07c10 100644
--- a/components/settings/period-reminder.js
+++ b/components/settings/reminders/period-reminder.js
@@ -3,13 +3,13 @@ import {
   View,
   Switch
 } from 'react-native'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   periodReminderObservable,
   savePeriodReminder
-} from '../../local-storage'
-import styles from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
+} from '../../../local-storage'
+import styles from '../../../styles/index'
+import labels from '../../../i18n/en/settings'
 
 export default class PeriodReminderPicker extends Component {
   constructor(props) {
diff --git a/components/settings/temp-reminder-picker.js b/components/settings/reminders/temp-reminder-picker.js
similarity index 90%
rename from components/settings/temp-reminder-picker.js
rename to components/settings/reminders/temp-reminder-picker.js
index 48a7611..09dda42 100644
--- a/components/settings/temp-reminder-picker.js
+++ b/components/settings/reminders/temp-reminder-picker.js
@@ -5,14 +5,14 @@ import {
   Switch
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import AppText from '../app-text'
+import AppText from '../../app-text'
 import {
   tempReminderObservable,
   saveTempReminder
-} from '../../local-storage'
-import styles from '../../styles/index'
-import { settings as labels } from '../../i18n/en/settings'
-import padWithZeros from '../helpers/pad-time-with-zeros'
+} from '../../../local-storage'
+import styles from '../../../styles/index'
+import labels from '../../../i18n/en/settings'
+import padWithZeros from '../../helpers/pad-time-with-zeros'
 
 export default class TempReminderPicker extends Component {
   constructor(props) {
diff --git a/components/settings/settings-menu.js b/components/settings/settings-menu.js
new file mode 100644
index 0000000..4152c11
--- /dev/null
+++ b/components/settings/settings-menu.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native'
+import styles from '../../styles/index'
+import settingsLabels from '../../i18n/en/settings'
+import AppText from '../app-text'
+
+console.log(settingsLabels.menuTitles)
+const labels = settingsLabels.menuTitles
+console.log(settingsLabels.menuTitles)
+
+const menu = [
+  {title: labels.reminders, component: 'Reminders'},
+  {title: labels.nfpSettings, component: 'NfpSettings'},
+  {title: labels.importExport, component: 'ImportExport'},
+  {title: labels.password, component: 'Password'},
+  {title: labels.about, component: 'About'}
+]
+
+export default function SettingsMenu(props) {
+  return (
+    <ScrollView>
+      { menu.map(menuItem)}
+    </ScrollView>
+  )
+
+  function menuItem(item) {
+    return (
+      <TouchableOpacity
+        style={styles.settingsSegment}
+        key={item.title}
+        onPress={() => props.navigate(item.component)}
+      >
+        <AppText>{item.title}</AppText>
+      </TouchableOpacity>
+    )
+  }
+}
\ No newline at end of file
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index 059e2c0..743f4c1 100644
--- a/i18n/en/labels.js
+++ b/i18n/en/labels.js
@@ -1,3 +1,6 @@
+import labels from './settings'
+const settingsTitles = labels.menuTitles
+
 export const shared = {
   cancel: 'Cancel',
   save: 'Save',
@@ -21,7 +24,12 @@ export const headerTitles = {
   Calendar: 'Calendar',
   Chart: 'Chart',
   Stats: 'Statistics',
-  Settings: 'Settings',
+  SettingsMenu: 'Settings',
+  Reminders: settingsTitles.reminders,
+  NfpSettings: settingsTitles.nfpSettings,
+  ImportExport: settingsTitles.importExport,
+  Password: settingsTitles.password,
+  About: settingsTitles.about,
   BleedingEditView: 'Bleeding',
   TemperatureEditView: 'Temperature',
   MucusEditView: 'Mucus',
diff --git a/i18n/en/settings.js b/i18n/en/settings.js
index cc30955..d230cf0 100644
--- a/i18n/en/settings.js
+++ b/i18n/en/settings.js
@@ -1,4 +1,11 @@
-export const settings = {
+export default {
+  menuTitles: {
+    reminders: 'Reminders',
+    importExport: 'Import and Export',
+    nfpSettings: 'NFP settings',
+    password: 'Password',
+    about: 'About'
+  },
   export: {
     errors: {
       noData: 'There is no data to export',