diff --git a/App.js b/App.js
index 0c7a9274..200467b0 100644
--- a/App.js
+++ b/App.js
@@ -7,6 +7,7 @@ import { enableScreens } from 'react-native-screens';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as PaperProvider } from 'react-native-paper';
 import * as Linking from 'expo-linking';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { Navigation } from './src/Navigation';
 import { store, persistor } from './src/Store/configureStore';
@@ -31,10 +32,12 @@ const App = (props) => {
     <ReduxProvider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <PaperProvider>
-          <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
-            <Navigation />
-          </NavigationContainer>
-          <FlashMessage position="bottom" />
+          <SafeAreaProvider>
+            <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
+              <Navigation />
+            </NavigationContainer>
+            <FlashMessage position="bottom" />
+          </SafeAreaProvider>
         </PaperProvider>
       </PersistGate>
     </ReduxProvider>
diff --git a/src/Components/DrillListPage.js b/src/Components/DrillListPage.js
index d63ed957..71e32536 100644
--- a/src/Components/DrillListPage.js
+++ b/src/Components/DrillListPage.js
@@ -38,16 +38,14 @@ export const DrillListPage = (props) => {
     <View style={styles.drillListPage}>
       <View style={styles.filtersArea}>
         <Text style={styles.counter}>{I18n.t('drillListPage.availableDrills', { count: displayedDrills.length })}</Text>
-        {type === DrillTypes.FRISBEE && (
-          <Button
-            onPress={openFilters}
-            icon="filter"
-            text={I18n.t('drillListPage.filter')}
-            testID="filterButton"
-            small
-            light={!filterIsOn}
-          />
-        )}
+        <Button
+          onPress={openFilters}
+          icon="filter"
+          text={I18n.t('drillListPage.filter')}
+          testID="filterButton"
+          small
+          light={!filterIsOn}
+        />
       </View>
       <DrillList navigation={navigation} drillsToDisplay={displayedDrills} />
     </View>
diff --git a/src/Components/DrillPageMinimal.js b/src/Components/DrillPageMinimal.js
index eea931a2..dbcd7d91 100644
--- a/src/Components/DrillPageMinimal.js
+++ b/src/Components/DrillPageMinimal.js
@@ -1,6 +1,7 @@
 import React, { useLayoutEffect, useCallback } from 'react';
 import { Platform, StyleSheet, View, ScrollView, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import theme from '../styles/theme.style';
@@ -53,14 +54,12 @@ export const DrillPageMinimal = (props) => {
   }, [navigation, currentDrillIndex, training]);
 
   return (
-    <>
-      <View style={styles.drillPage}>
-        <ScrollView style={styles.illustration}>
-          {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
-          {drill.type === DrillTypes.FITNESS && <FitnessDrillIllustration drill={drill} />}
-          <Description drill={drill} minimal />
-        </ScrollView>
-      </View>
+    <SafeAreaView edges={['left', 'bottom', 'right']} style={styles.drillPage}>
+      <ScrollView style={styles.illustration}>
+        {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
+        {drill.type === DrillTypes.FITNESS && <FitnessDrillIllustration drill={drill} />}
+        <Description drill={drill} minimal />
+      </ScrollView>
       <View style={styles.footer}>
         {isLastTraining ? (
           <ButtonNext onPress={finishTraining} text={I18n.t('drillPageMinimal.finish')} />
@@ -68,7 +67,7 @@ export const DrillPageMinimal = (props) => {
           <ButtonNext onPress={goToNextDrill} text={I18n.t('drillPageMinimal.next')} />
         )}
       </View>
-    </>
+    </SafeAreaView>
   );
 };
 
@@ -80,7 +79,7 @@ const styles = StyleSheet.create({
   drillPage: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
     flex: 1,
-    marginBottom: 50,
+    marginBottom: 60,
   },
   headerTitle: {
     flexDirection: 'column',
@@ -116,17 +115,14 @@ const styles = StyleSheet.create({
     fontSize: theme.FONT_SIZE_LARGE,
     fontWeight: 'bold',
     textAlign: 'center',
-    marginRight: 46, // Matches the details icon width
   },
   illustration: {
     flexGrow: 1,
     flexShrink: 0,
   },
   footer: {
-    position: 'absolute',
     paddingBottom: 10,
     paddingTop: 5,
-    bottom: 0,
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
     width: '100%',
     alignItems: 'center',
diff --git a/src/Components/FitnessFilters.js b/src/Components/FitnessFilters.js
index 4fc691ef..16a927ec 100644
--- a/src/Components/FitnessFilters.js
+++ b/src/Components/FitnessFilters.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import filterStyle from '../styles/filters.style';
@@ -131,7 +132,7 @@ export class FitnessFilters extends React.Component {
     } = this.state;
 
     return (
-      <View style={filterStyle.wrapper}>
+      <SafeAreaView style={filterStyle.wrapper} edges={['left', 'bottom', 'right']}>
         <ScrollView contentContainerStyle={filterStyle.filters}>
           <View style={filterStyle.filter}>
             <Button
@@ -218,7 +219,7 @@ export class FitnessFilters extends React.Component {
             text={I18n.t('fitnessFilters.cta', { count: this.state.displayedDrills.length })}
           />
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 }
diff --git a/src/Components/FrisbeeFilters.js b/src/Components/FrisbeeFilters.js
index 05b5d181..59dfc0b1 100644
--- a/src/Components/FrisbeeFilters.js
+++ b/src/Components/FrisbeeFilters.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import filterStyle from '../styles/filters.style';
@@ -99,7 +100,7 @@ export class FrisbeeFilters extends React.Component {
   render() {
     const { selectedFavorites, selectedLevels, selectedGoals, numberOfPlayers } = this.state;
     return (
-      <View style={filterStyle.wrapper}>
+      <SafeAreaView style={filterStyle.wrapper}>
         <ScrollView contentContainerStyle={filterStyle.filters}>
           <View style={filterStyle.filter}>
             <Button
@@ -152,7 +153,7 @@ export class FrisbeeFilters extends React.Component {
             text={I18n.t('fitnessFilters.cta', { count: this.state.displayedDrills.length })}
           />
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 }
diff --git a/src/Components/PlayEditorPage.js b/src/Components/PlayEditorPage.js
index 2c899c47..5f23b5a7 100644
--- a/src/Components/PlayEditorPage.js
+++ b/src/Components/PlayEditorPage.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import Drill from './animation/Drill';
 import I18n from '../utils/i18n';
@@ -63,7 +63,7 @@ export const PlayEditorPage = (props) => {
 
   const saveCurrentPlay = () => {
     const defaultTitle = I18n.t('playEditorPage.untitledPlay');
-    if (currentPlay.title == I18n.t('playEditorPage.untitledPlay')) {
+    if (currentPlay.title === I18n.t('playEditorPage.untitledPlay')) {
       let newTitle = defaultTitle;
 
       let counter = 1;
@@ -97,7 +97,7 @@ export const PlayEditorPage = (props) => {
   };
 
   return (
-    <View style={styles.playEditorPage}>
+    <SafeAreaView style={styles.playEditorPage} edges={['right', 'bottom', 'right']}>
       <View style={styles.centeredView}>
         {modalRenameVisible ? (
           <RenamePlayModal currentPlay={currentPlay} onRename={setTitle} close={() => setModalRenameVisible(false)} />
@@ -128,7 +128,7 @@ export const PlayEditorPage = (props) => {
         <AnimationHistory animation={currentPlay.animation} onAnimationHistoryChange={onAnimationChange} />
         <SharePlay currentPlay={currentPlay} />
       </View>
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -145,6 +145,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(PlayEditorPage);
 const styles = StyleSheet.create({
   playEditorPage: {
     flex: 1,
+    backgroundColor: theme.COLOR_PRIMARY,
   },
   centeredView: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
@@ -155,8 +156,6 @@ const styles = StyleSheet.create({
     minHeight: 40,
     width: '100%',
     backgroundColor: theme.COLOR_PRIMARY,
-    position: 'absolute',
-    bottom: 0,
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-evenly',
diff --git a/src/Components/TrainingPage.js b/src/Components/TrainingPage.js
index bb1d5f0e..18fea202 100644
--- a/src/Components/TrainingPage.js
+++ b/src/Components/TrainingPage.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import ViewPager from '@react-native-community/viewpager';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import DrillList from './shared/DrillList';
@@ -93,7 +94,7 @@ const TrainingPage = (props) => {
     const goToFirstDrill = () =>
       navigation.navigate('DrillPageMinimal', { drill: training.drills[0], training, program });
     return (
-      <View key={index}>
+      <SafeAreaView key={index} edges={['left', 'bottom', 'right']}>
         <DrillList
           ListHeaderComponent={renderHeader(training, index)}
           ListFooterComponent={<View style={{ paddingBottom: 30 }} />}
@@ -105,7 +106,7 @@ const TrainingPage = (props) => {
         <View style={styles.footer}>
           <Button onPress={goToFirstDrill} text={I18n.t('trainingPage.start')} testID={`start${index}`} />
         </View>
-      </View>
+      </SafeAreaView>
     );
   };
 
@@ -180,11 +181,9 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
   },
   footer: {
-    position: 'absolute',
-    paddingBottom: 20,
-    paddingTop: 5,
-    bottom: 0,
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+    paddingTop: 5,
+    paddingBottom: 10,
     width: '100%',
     alignItems: 'center',
   },
diff --git a/src/Components/VideoPage.js b/src/Components/VideoPage.js
index 13d84369..8100f7e9 100644
--- a/src/Components/VideoPage.js
+++ b/src/Components/VideoPage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Platform, StyleSheet, View, Text, Share } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import theme from '../styles/theme.style';
 import VimeoVideo from './shared/VimeoVideo';
@@ -22,16 +23,14 @@ const VideoPage = (props) => {
   };
 
   return (
-    <View style={styles.videoPage}>
+    <SafeAreaView style={styles.videoPage} edges={['left', 'right', 'bottom']}>
       <View style={styles.video}>
         <VimeoVideo vimeoId={video.video} sounds shouldPlay />
       </View>
       <View style={styles.title}>
         <Text style={styles.text}>{video.title}</Text>
         <Text style={styles.textAuthor}>{video.text}</Text>
-      </View>
-      {video.youtube && (
-        <View style={styles.footer}>
+        {video.youtube && (
           <Button
             onPress={share}
             icon={Platform.select({
@@ -40,12 +39,13 @@ const VideoPage = (props) => {
             })}
             text={I18n.t('videoPage.share')}
             testID="shareButton"
+            style={styles.share}
             small
             light
           />
-        </View>
-      )}
-    </View>
+        )}
+      </View>
+    </SafeAreaView>
   );
 };
 
@@ -65,19 +65,15 @@ const styles = StyleSheet.create({
   },
   text: {
     color: theme.COLOR_PRIMARY,
-    fontSize: theme.FONT_SIZE_MEDIUM,
+    fontSize: theme.FONT_SIZE_LARGE,
     fontWeight: 'bold',
   },
   textAuthor: {
     color: theme.COLOR_SECONDARY,
-    fontSize: theme.FONT_SIZE_SMALL,
+    fontSize: theme.FONT_SIZE_MEDIUM,
   },
-  footer: {
-    position: 'absolute',
-    paddingBottom: 20,
-    paddingTop: 5,
-    bottom: 0,
-    width: '100%',
-    alignItems: 'center',
+  share: {
+    marginTop: 10,
+    alignSelf: 'flex-start',
   },
 });
diff --git a/src/Components/__snapshots__/DictionaryPage.test.js.snap b/src/Components/__snapshots__/DictionaryPage.test.js.snap
index d6c9d99e..6e80dcf2 100644
--- a/src/Components/__snapshots__/DictionaryPage.test.js.snap
+++ b/src/Components/__snapshots__/DictionaryPage.test.js.snap
@@ -245,7 +245,7 @@ exports[`<DictionaryPage /> renders correctly 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
diff --git a/src/Components/__snapshots__/DrillListPage.test.js.snap b/src/Components/__snapshots__/DrillListPage.test.js.snap
index 73b4b349..f20295f8 100644
--- a/src/Components/__snapshots__/DrillListPage.test.js.snap
+++ b/src/Components/__snapshots__/DrillListPage.test.js.snap
@@ -1051,6 +1051,79 @@ exports[`<DrillListPage /> renders fitness drills sorted by duration 1`] = `
     >
       3 drills available
     </Text>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "center",
+          "backgroundColor": "#fff",
+          "borderColor": "#2a9e91",
+          "borderRadius": 5,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "height": 30,
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 10,
+          "paddingVertical": 0,
+          "width": "auto",
+        }
+      }
+      testID="filterButton"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": undefined,
+              "fontSize": 12,
+            },
+            Array [
+              Object {
+                "marginRight": 20,
+              },
+              Object {
+                "color": "#2a9e91",
+                "fontSize": 16,
+                "fontWeight": "bold",
+              },
+              Object {
+                "marginRight": 5,
+              },
+            ],
+            Object {
+              "fontFamily": "ionicons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
+        }
+      >
+        
+      </Text>
+      <Text
+        style={
+          Object {
+            "color": "#2a9e91",
+            "fontSize": 16,
+            "fontWeight": "bold",
+          }
+        }
+      >
+        Filter
+      </Text>
+    </View>
   </View>
   <RCTScrollView
     contentContainerStyle={
diff --git a/src/Components/__snapshots__/DrillPageMinimal.test.js.snap b/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
index a169a040..dde2f794 100644
--- a/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
+++ b/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
@@ -1,158 +1,209 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DrillPageMinimal /> renders correctly with a training and a drill 1`] = `
-Array [
-  <View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "left",
+      "bottom",
+      "right",
+    ]
+  }
+  style={
+    Object {
+      "backgroundColor": "#fff",
+      "flex": 1,
+      "marginBottom": 60,
+    }
+  }
+>
+  <RCTScrollView
     style={
       Object {
-        "backgroundColor": "#fff",
-        "flex": 1,
-        "marginBottom": 50,
+        "flexGrow": 1,
+        "flexShrink": 0,
       }
     }
   >
-    <RCTScrollView
-      style={
-        Object {
-          "flexGrow": 1,
-          "flexShrink": 0,
+    <View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
         }
-      }
-    >
-      <View>
+      >
         <View
           style={
-            Object {
-              "flex": 1,
-            }
+            Array [
+              Object {
+                "height": 250,
+              },
+              false,
+            ]
           }
         >
           <View
             style={
-              Array [
-                Object {
-                  "height": 250,
-                },
-                false,
-              ]
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "height": 250,
+                "justifyContent": "center",
+              }
             }
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "flex": 1,
+                  "position": "absolute",
+                }
+              }
+            >
+              <ActivityIndicator
+                animating={true}
+                color="#A6A6A6"
+                hidesWhenStopped={true}
+                size="large"
+              />
+              <Text>
+                Loading…
+              </Text>
+            </View>
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
                   "height": 250,
-                  "justifyContent": "center",
+                  "overflow": "hidden",
+                  "width": "100%",
                 }
               }
             >
-              <View
+              <ViewManagerAdapter_ExpoVideoView
+                proxiedProperties={
+                  Object {
+                    "onError": [Function],
+                    "onFullscreenUpdate": [Function],
+                    "onLoad": [Function],
+                    "onLoadStart": [Function],
+                    "onReadyForDisplay": [Function],
+                    "onStatusUpdate": [Function],
+                    "resizeMode": "mock",
+                    "source": undefined,
+                    "status": Object {},
+                    "useNativeControls": true,
+                  }
+                }
                 style={
                   Object {
+                    "bottom": 0,
+                    "left": 0,
                     "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
-              >
-                <ActivityIndicator
-                  animating={true}
-                  color="#A6A6A6"
-                  hidesWhenStopped={true}
-                  size="large"
-                />
-                <Text>
-                  Loading…
-                </Text>
-              </View>
+              />
+            </View>
+          </View>
+        </View>
+        <RCTScrollView
+          data={
+            Array [
+              Object {
+                "id": 0,
+                "subtitle": "This is a subtitle",
+                "title": "Warmup",
+                "vimeoId": "462695757",
+              },
+              Object {
+                "id": 1,
+                "subtitle": "This is a subtitle",
+                "title": "Do the drill",
+                "vimeoId": "462695757",
+              },
+              Object {
+                "id": 2,
+                "subtitle": "This is a subtitle",
+                "title": "Last step",
+                "vimeoId": "462695757",
+              },
+            ]
+          }
+          disableVirtualization={false}
+          getItem={[Function]}
+          getItemCount={[Function]}
+          horizontal={false}
+          initialNumToRender={10}
+          keyExtractor={[Function]}
+          maxToRenderPerBatch={10}
+          nestedScrollEnabled={true}
+          onContentSizeChange={[Function]}
+          onEndReachedThreshold={2}
+          onLayout={[Function]}
+          onMomentumScrollEnd={[Function]}
+          onScroll={[Function]}
+          onScrollBeginDrag={[Function]}
+          onScrollEndDrag={[Function]}
+          removeClippedSubviews={false}
+          renderItem={[Function]}
+          scrollEventThrottle={50}
+          stickyHeaderIndices={Array []}
+          updateCellsBatchingPeriod={50}
+          viewabilityConfigCallbackPairs={Array []}
+          windowSize={21}
+        >
+          <View>
+            <View
+              onLayout={[Function]}
+              style={null}
+            >
               <View
-                pointerEvents="box-none"
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "height": 250,
-                    "overflow": "hidden",
-                    "width": "100%",
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "padding": 20,
                   }
                 }
               >
-                <ViewManagerAdapter_ExpoVideoView
-                  proxiedProperties={
-                    Object {
-                      "onError": [Function],
-                      "onFullscreenUpdate": [Function],
-                      "onLoad": [Function],
-                      "onLoadStart": [Function],
-                      "onReadyForDisplay": [Function],
-                      "onStatusUpdate": [Function],
-                      "resizeMode": "mock",
-                      "source": undefined,
-                      "status": Object {},
-                      "useNativeControls": true,
-                    }
-                  }
+                <View
                   style={
                     Object {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignItems": "center",
+                      "flexGrow": 0,
+                      "flexShrink": 0,
                     }
                   }
-                />
-              </View>
-            </View>
-          </View>
-          <RCTScrollView
-            data={
-              Array [
-                Object {
-                  "id": 0,
-                  "subtitle": "This is a subtitle",
-                  "title": "Warmup",
-                  "vimeoId": "462695757",
-                },
-                Object {
-                  "id": 1,
-                  "subtitle": "This is a subtitle",
-                  "title": "Do the drill",
-                  "vimeoId": "462695757",
-                },
-                Object {
-                  "id": 2,
-                  "subtitle": "This is a subtitle",
-                  "title": "Last step",
-                  "vimeoId": "462695757",
-                },
-              ]
-            }
-            disableVirtualization={false}
-            getItem={[Function]}
-            getItemCount={[Function]}
-            horizontal={false}
-            initialNumToRender={10}
-            keyExtractor={[Function]}
-            maxToRenderPerBatch={10}
-            nestedScrollEnabled={true}
-            onContentSizeChange={[Function]}
-            onEndReachedThreshold={2}
-            onLayout={[Function]}
-            onMomentumScrollEnd={[Function]}
-            onScroll={[Function]}
-            onScrollBeginDrag={[Function]}
-            onScrollEndDrag={[Function]}
-            removeClippedSubviews={false}
-            renderItem={[Function]}
-            scrollEventThrottle={50}
-            stickyHeaderIndices={Array []}
-            updateCellsBatchingPeriod={50}
-            viewabilityConfigCallbackPairs={Array []}
-            windowSize={21}
-          >
-            <View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
+                >
+                  <Text
+                    style={
+                      Array [
+                        Object {
+                          "color": "#232b2b",
+                          "fontSize": 20,
+                        },
+                        Object {},
+                        Object {
+                          "fontWeight": "bold",
+                        },
+                      ]
+                    }
+                  >
+                     
+                    Warmup
+                  </Text>
+                </View>
                 <View
                   accessible={true}
                   focusable={true}
@@ -165,307 +216,259 @@ Array [
                   onStartShouldSetResponder={[Function]}
                   style={
                     Object {
-                      "flexDirection": "row",
+                      "flex": 1,
                       "opacity": 1,
-                      "padding": 20,
                     }
                   }
+                  testID="doneIcon"
                 >
                   <View
                     style={
                       Object {
-                        "alignItems": "center",
-                        "flexGrow": 0,
-                        "flexShrink": 0,
+                        "opacity": 1,
                       }
                     }
                   >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#232b2b",
-                            "fontSize": 20,
-                          },
-                          Object {},
-                          Object {
-                            "fontWeight": "bold",
-                          },
-                        ]
-                      }
-                    >
-                       
-                      Warmup
-                    </Text>
+                    <Text />
                   </View>
                   <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       Object {
-                        "flex": 1,
-                        "opacity": 1,
+                        "opacity": 0,
                       }
                     }
-                    testID="doneIcon"
                   >
-                    <View
-                      style={
-                        Object {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <Text />
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "opacity": 0,
-                        }
-                      }
-                    >
-                      <Text />
-                    </View>
+                    <Text />
                   </View>
                 </View>
               </View>
+            </View>
+            <View
+              onLayout={[Function]}
+              style={null}
+            >
               <View
-                onLayout={[Function]}
-                style={null}
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "padding": 20,
+                  }
+                }
               >
                 <View
-                  accessible={true}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Object {
-                      "flexDirection": "row",
-                      "opacity": 1,
-                      "padding": 20,
+                      "alignItems": "center",
+                      "flexGrow": 0,
+                      "flexShrink": 0,
                     }
                   }
                 >
-                  <View
+                  <Text
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "flexGrow": 0,
-                        "flexShrink": 0,
-                      }
+                      Array [
+                        Object {
+                          "color": "#232b2b",
+                          "fontSize": 20,
+                        },
+                        Object {},
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#232b2b",
-                            "fontSize": 20,
-                          },
-                          Object {},
-                          Object {},
-                        ]
-                      }
-                    >
-                       
-                      Do the drill
-                    </Text>
-                  </View>
+                     
+                    Do the drill
+                  </Text>
                 </View>
               </View>
+            </View>
+            <View
+              onLayout={[Function]}
+              style={null}
+            >
               <View
-                onLayout={[Function]}
-                style={null}
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "padding": 20,
+                  }
+                }
               >
                 <View
-                  accessible={true}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Object {
-                      "flexDirection": "row",
-                      "opacity": 1,
-                      "padding": 20,
+                      "alignItems": "center",
+                      "flexGrow": 0,
+                      "flexShrink": 0,
                     }
                   }
                 >
-                  <View
+                  <Text
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "flexGrow": 0,
-                        "flexShrink": 0,
-                      }
+                      Array [
+                        Object {
+                          "color": "#232b2b",
+                          "fontSize": 20,
+                        },
+                        Object {},
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#232b2b",
-                            "fontSize": 20,
-                          },
-                          Object {},
-                          Object {},
-                        ]
-                      }
-                    >
-                       
-                      Last step
-                    </Text>
-                  </View>
+                     
+                    Last step
+                  </Text>
                 </View>
               </View>
             </View>
-          </RCTScrollView>
-        </View>
+          </View>
+        </RCTScrollView>
+      </View>
+      <View
+        style={
+          Object {
+            "paddingBottom": 10,
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "borderBottomColor": "#e5e5e5",
+              "borderBottomWidth": 1,
+            }
+          }
+        />
         <View
           style={
             Object {
-              "paddingBottom": 10,
+              "padding": 10,
             }
           }
         >
-          <View
+          <Text
             style={
-              Object {
-                "borderBottomColor": "#e5e5e5",
-                "borderBottomWidth": 1,
-              }
+              Array [
+                Object {
+                  "color": "#232b2b",
+                  "fontSize": 20,
+                  "fontWeight": "bold",
+                  "marginBottom": 5,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
-          />
-          <View
+          >
+            Equipment
+          </Text>
+          <Text
             style={
-              Object {
-                "padding": 10,
-              }
+              Array [
+                Object {
+                  "color": "#A6A6A6",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
           >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#232b2b",
-                    "fontSize": 20,
-                    "fontWeight": "bold",
-                    "marginBottom": 5,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Equipment
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#A6A6A6",
-                    "fontSize": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Equipment needs for the drill
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "borderBottomColor": "#e5e5e5",
-                "borderBottomWidth": 1,
-              }
+            Equipment needs for the drill
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "borderBottomColor": "#e5e5e5",
+              "borderBottomWidth": 1,
             }
-          />
-          <View
+          }
+        />
+        <View
+          style={
+            Object {
+              "padding": 10,
+            }
+          }
+        >
+          <Text
             style={
-              Object {
-                "padding": 10,
-              }
+              Array [
+                Object {
+                  "color": "#232b2b",
+                  "fontSize": 20,
+                  "fontWeight": "bold",
+                  "marginBottom": 5,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
           >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#232b2b",
-                    "fontSize": 20,
-                    "fontWeight": "bold",
-                    "marginBottom": 5,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Description
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#A6A6A6",
-                    "fontSize": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Description of the drill
-            </Text>
-          </View>
-          <View
+            Description
+          </Text>
+          <Text
             style={
-              Object {
-                "borderBottomColor": "#e5e5e5",
-                "borderBottomWidth": 1,
-              }
+              Array [
+                Object {
+                  "color": "#A6A6A6",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
-          />
+          >
+            Description of the drill
+          </Text>
         </View>
+        <View
+          style={
+            Object {
+              "borderBottomColor": "#e5e5e5",
+              "borderBottomWidth": 1,
+            }
+          }
+        />
       </View>
-    </RCTScrollView>
-  </View>,
+    </View>
+  </RCTScrollView>
   <View
     style={
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
-        "bottom": 0,
         "paddingBottom": 10,
         "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -486,7 +489,7 @@ Array [
           "backgroundColor": "#2a9e91",
           "borderRadius": 5,
           "flexDirection": "row",
-          "height": 40,
+          "height": 50,
           "justifyContent": "center",
           "opacity": 1,
           "paddingHorizontal": 20,
@@ -508,6 +511,6 @@ Array [
         Next drill
       </Text>
     </View>
-  </View>,
-]
+  </View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/FitnessFilters.test.js.snap b/src/Components/__snapshots__/FitnessFilters.test.js.snap
index bc80404d..1d67e007 100644
--- a/src/Components/__snapshots__/FitnessFilters.test.js.snap
+++ b/src/Components/__snapshots__/FitnessFilters.test.js.snap
@@ -1,12 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FitnessFilters /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "left",
+      "bottom",
+      "right",
+    ]
+  }
   style={
     Object {
       "backgroundColor": "#fff",
+      "flex": 1,
       "height": "100%",
-      "paddingTop": 20,
     }
   }
 >
@@ -845,10 +852,8 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
-        "bottom": 0,
         "paddingBottom": 10,
         "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -869,7 +874,7 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
           "backgroundColor": "#2a9e91",
           "borderRadius": 5,
           "flexDirection": "row",
-          "height": 40,
+          "height": 50,
           "justifyContent": "center",
           "opacity": 1,
           "paddingHorizontal": 20,
@@ -892,5 +897,5 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
index ed05924f..93e7f2de 100644
--- a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
+++ b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FrisbeeFilters /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
   style={
     Object {
       "backgroundColor": "#fff",
+      "flex": 1,
       "height": "100%",
-      "paddingTop": 20,
     }
   }
 >
@@ -470,10 +470,8 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
-        "bottom": 0,
         "paddingBottom": 10,
         "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -494,7 +492,7 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
           "backgroundColor": "#2a9e91",
           "borderRadius": 5,
           "flexDirection": "row",
-          "height": 40,
+          "height": 50,
           "justifyContent": "center",
           "opacity": 1,
           "paddingHorizontal": 20,
@@ -517,5 +515,5 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/ImporterPage.test.js.snap b/src/Components/__snapshots__/ImporterPage.test.js.snap
index 04c88f27..6aabcc02 100644
--- a/src/Components/__snapshots__/ImporterPage.test.js.snap
+++ b/src/Components/__snapshots__/ImporterPage.test.js.snap
@@ -116,7 +116,7 @@ exports[`<ImporterPage /> renders correctly after download 1`] = `
             "backgroundColor": "#2a9e91",
             "borderRadius": 5,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
@@ -156,7 +156,7 @@ exports[`<ImporterPage /> renders correctly after download 1`] = `
             "borderRadius": 5,
             "borderWidth": 1,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
diff --git a/src/Components/__snapshots__/PlayEditorPage.test.js.snap b/src/Components/__snapshots__/PlayEditorPage.test.js.snap
index 4dec293a..c84b3d4e 100644
--- a/src/Components/__snapshots__/PlayEditorPage.test.js.snap
+++ b/src/Components/__snapshots__/PlayEditorPage.test.js.snap
@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "right",
+      "bottom",
+      "right",
+    ]
+  }
   style={
     Object {
+      "backgroundColor": "#232b2b",
       "flex": 1,
     }
   }
@@ -800,12 +808,10 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#232b2b",
-        "bottom": 0,
         "flexDirection": "row",
         "height": "8%",
         "justifyContent": "space-evenly",
         "minHeight": 40,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -992,7 +998,7 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
                   "borderRadius": 5,
                   "borderWidth": 1,
                   "flexDirection": "row",
-                  "height": 40,
+                  "height": 50,
                   "justifyContent": "center",
                   "marginTop": 20,
                   "opacity": 1,
@@ -1220,13 +1226,21 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
 
 exports[`<PlayEditorPage /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "right",
+      "bottom",
+      "right",
+    ]
+  }
   style={
     Object {
+      "backgroundColor": "#232b2b",
       "flex": 1,
     }
   }
@@ -1938,12 +1952,10 @@ exports[`<PlayEditorPage /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#232b2b",
-        "bottom": 0,
         "flexDirection": "row",
         "height": "8%",
         "justifyContent": "space-evenly",
         "minHeight": 40,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -2111,7 +2123,7 @@ exports[`<PlayEditorPage /> renders correctly 1`] = `
                   "borderRadius": 5,
                   "borderWidth": 1,
                   "flexDirection": "row",
-                  "height": 40,
+                  "height": 50,
                   "justifyContent": "center",
                   "marginTop": 20,
                   "opacity": 1,
@@ -2240,5 +2252,5 @@ exports[`<PlayEditorPage /> renders correctly 1`] = `
       <Text />
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/TrainingPage.test.js.snap b/src/Components/__snapshots__/TrainingPage.test.js.snap
index ce99d6af..880671d9 100644
--- a/src/Components/__snapshots__/TrainingPage.test.js.snap
+++ b/src/Components/__snapshots__/TrainingPage.test.js.snap
@@ -15,8 +15,15 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
     }
   }
 >
-  <View
+  <RNCSafeAreaView
     collapsable={false}
+    edges={
+      Array [
+        "left",
+        "bottom",
+        "right",
+      ]
+    }
     style={
       Array [
         undefined,
@@ -1330,10 +1337,8 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         Object {
           "alignItems": "center",
           "backgroundColor": "#fff",
-          "bottom": 0,
-          "paddingBottom": 20,
+          "paddingBottom": 10,
           "paddingTop": 5,
-          "position": "absolute",
           "width": "100%",
         }
       }
@@ -1354,7 +1359,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
             "backgroundColor": "#2a9e91",
             "borderRadius": 5,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
@@ -1377,9 +1382,16 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         </Text>
       </View>
     </View>
-  </View>
-  <View
+  </RNCSafeAreaView>
+  <RNCSafeAreaView
     collapsable={false}
+    edges={
+      Array [
+        "left",
+        "bottom",
+        "right",
+      ]
+    }
     style={
       Array [
         undefined,
@@ -2658,10 +2670,8 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         Object {
           "alignItems": "center",
           "backgroundColor": "#fff",
-          "bottom": 0,
-          "paddingBottom": 20,
+          "paddingBottom": 10,
           "paddingTop": 5,
-          "position": "absolute",
           "width": "100%",
         }
       }
@@ -2682,7 +2692,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
             "backgroundColor": "#2a9e91",
             "borderRadius": 5,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
@@ -2705,6 +2715,6 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         </Text>
       </View>
     </View>
-  </View>
+  </RNCSafeAreaView>
 </RNCViewPager>
 `;
diff --git a/src/Components/__snapshots__/VideoPage.test.js.snap b/src/Components/__snapshots__/VideoPage.test.js.snap
index 428c267e..5588d228 100644
--- a/src/Components/__snapshots__/VideoPage.test.js.snap
+++ b/src/Components/__snapshots__/VideoPage.test.js.snap
@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<VideoPage /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "left",
+      "right",
+      "bottom",
+    ]
+  }
   style={
     Object {
       "backgroundColor": "#fff",
@@ -93,7 +100,7 @@ exports[`<VideoPage /> renders correctly 1`] = `
       style={
         Object {
           "color": "#232b2b",
-          "fontSize": 16,
+          "fontSize": 20,
           "fontWeight": "bold",
         }
       }
@@ -104,25 +111,12 @@ exports[`<VideoPage /> renders correctly 1`] = `
       style={
         Object {
           "color": "#A6A6A6",
-          "fontSize": 14,
+          "fontSize": 16,
         }
       }
     >
       Rise Up Ultimate
     </Text>
-  </View>
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "bottom": 0,
-        "paddingBottom": 20,
-        "paddingTop": 5,
-        "position": "absolute",
-        "width": "100%",
-      }
-    }
-  >
     <View
       accessible={true}
       focusable={true}
@@ -136,7 +130,7 @@ exports[`<VideoPage /> renders correctly 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "alignSelf": "center",
+          "alignSelf": "flex-start",
           "backgroundColor": "#fff",
           "borderColor": "#2a9e91",
           "borderRadius": 5,
@@ -144,6 +138,7 @@ exports[`<VideoPage /> renders correctly 1`] = `
           "flexDirection": "row",
           "height": 30,
           "justifyContent": "center",
+          "marginTop": 10,
           "opacity": 1,
           "paddingHorizontal": 10,
           "paddingVertical": 0,
@@ -166,5 +161,5 @@ exports[`<VideoPage /> renders correctly 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap b/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap
index 896d0b39..d17ab4ca 100644
--- a/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap
+++ b/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap
@@ -120,7 +120,7 @@ exports[`<RenamePlayModal /> renders correctly 1`] = `
                     "backgroundColor": "#2a9e91",
                     "borderRadius": 5,
                     "flexDirection": "row",
-                    "height": 40,
+                    "height": 50,
                     "justifyContent": "center",
                     "marginTop": 10,
                     "opacity": 1,
@@ -164,7 +164,7 @@ exports[`<RenamePlayModal /> renders correctly 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
diff --git a/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap b/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap
index e257182b..c3776a2b 100644
--- a/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap
+++ b/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap
@@ -183,7 +183,7 @@ exports[`<SavedPlaysList /> renders an empty state with no plays 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
@@ -691,7 +691,7 @@ exports[`<SavedPlaysList /> renders correctly with plays 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
diff --git a/src/Components/shared/Button.js b/src/Components/shared/Button.js
index 17f7b6c2..d9586407 100644
--- a/src/Components/shared/Button.js
+++ b/src/Components/shared/Button.js
@@ -25,7 +25,7 @@ const Button = ({ onPress, icon, text, light, small, style, testID }) => {
 const styles = StyleSheet.create({
   button: {
     width: '80%',
-    height: 40,
+    height: 50,
     borderRadius: 5,
     backgroundColor: theme.MAIN_COLOR,
     paddingVertical: 10,
diff --git a/src/Components/shared/__snapshots__/Button.test.js.snap b/src/Components/shared/__snapshots__/Button.test.js.snap
index af720085..dee86675 100644
--- a/src/Components/shared/__snapshots__/Button.test.js.snap
+++ b/src/Components/shared/__snapshots__/Button.test.js.snap
@@ -17,7 +17,7 @@ exports[`<Button /> renders correctly 1`] = `
       "backgroundColor": "#2a9e91",
       "borderRadius": 5,
       "flexDirection": "row",
-      "height": 40,
+      "height": 50,
       "justifyContent": "center",
       "opacity": 1,
       "paddingHorizontal": 20,
@@ -60,7 +60,7 @@ exports[`<Button /> renders correctly when light 1`] = `
       "borderRadius": 5,
       "borderWidth": 1,
       "flexDirection": "row",
-      "height": 40,
+      "height": 50,
       "justifyContent": "center",
       "opacity": 1,
       "paddingHorizontal": 20,
@@ -143,7 +143,7 @@ exports[`<Button /> renders correctly with an icon 1`] = `
       "backgroundColor": "#2a9e91",
       "borderRadius": 5,
       "flexDirection": "row",
-      "height": 40,
+      "height": 50,
       "justifyContent": "center",
       "opacity": 1,
       "paddingHorizontal": 20,
diff --git a/src/Components/shared/__snapshots__/Modal.test.js.snap b/src/Components/shared/__snapshots__/Modal.test.js.snap
index 928746c1..a7396b0b 100644
--- a/src/Components/shared/__snapshots__/Modal.test.js.snap
+++ b/src/Components/shared/__snapshots__/Modal.test.js.snap
@@ -93,7 +93,7 @@ exports[`<Modal /> renders correctly 1`] = `
             "borderRadius": 5,
             "borderWidth": 1,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "marginTop": 20,
             "opacity": 1,
diff --git a/src/styles/filters.style.js b/src/styles/filters.style.js
index 021850cd..6f222ed0 100644
--- a/src/styles/filters.style.js
+++ b/src/styles/filters.style.js
@@ -2,7 +2,7 @@ import theme from '../styles/theme.style';
 
 export default {
   wrapper: {
-    paddingTop: 20,
+    flex: 1,
     height: '100%',
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
   },
@@ -22,11 +22,9 @@ export default {
     justifyContent: 'space-between',
   },
   footer: {
-    position: 'absolute',
-    paddingBottom: 10,
-    paddingTop: 5,
-    bottom: 0,
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+    paddingTop: 5,
+    paddingBottom: 10,
     width: '100%',
     alignItems: 'center',
   },
diff --git a/src/utils/locales/fr.js b/src/utils/locales/fr.js
index 5b5b104d..f8386c4f 100644
--- a/src/utils/locales/fr.js
+++ b/src/utils/locales/fr.js
@@ -95,7 +95,7 @@ export default {
     junior: 'Juniors',
     programs: 'Programmes',
     leanTitle: 'Exercices',
-    leanSubtitle: 'Tous nos exercises pour garder la forme !',
+    leanSubtitle: 'Tous nos exercices pour garder la forme !',
     bodyweightTitle: 'Sans matériel',
     bodyweightSubtitle: 'Des programmes conçus pour plusieurs semaines',
     gymTitle: 'En salle',