diff --git a/components/SetupView.js b/components/SetupView.js
new file mode 100644
index 0000000..c0f4c4d
--- /dev/null
+++ b/components/SetupView.js
@@ -0,0 +1,103 @@
+import React from "react";
+import {
+  StyleSheet,
+  View,
+  StatusBar,
+  ImageBackground,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import EntypoIcon from "react-native-vector-icons/Entypo";
+
+
+function AdditionalOptionsBottomBar(props) {
+  return (
+    <View style={bottomBarStyles.container}>
+      { props.leftText ?
+        <TouchableOpacity onPress={props.onLeftPress}>
+          <Text style={bottomBarStyles.text}>{props.leftText} </Text>
+        </TouchableOpacity> : <View></View>
+      }
+      {props.rightText &&
+        <TouchableOpacity onPress={props.onRightPress}>
+          <Text style={bottomBarStyles.text}>{props.rightText}</Text>
+        </TouchableOpacity>
+      }
+    </View>
+  );
+};
+
+const bottomBarStyles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: 30,
+  },
+  text: {
+    color: "rgba(255,255,255,0.5)",
+  }
+})
+
+// ---------------------------------------------------------------------------------------------
+
+
+function SetupView(props) {
+
+  return (
+    <View style={{ flex: 1 }}>
+
+      <StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
+      <ImageBackground
+        source={require("../assets/pool_sky_background_blurred.jpg")}
+        resizeMode="cover"
+        style={{ flex: 1 }}
+      >
+        <View style={setupViewStyles.container}>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            {props.backButton &&
+              <TouchableOpacity onPress={props.navigation.goBack}>
+                <EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
+                </TouchableOpacity>
+            }
+            <Text style={setupViewStyles.headerText}>
+              {props.headerText}
+            </Text>
+          </View>
+          {props.children}
+          <AdditionalOptionsBottomBar leftText={props.lowerLeftButtonText}
+            onLeftPress={props.onLowerLeftButtonPress}
+            rightText={props.lowerRightButtonText}
+            onRightPress={props.onLowerRightButtonPress}>
+          </AdditionalOptionsBottomBar>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+}
+
+const setupViewStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "space-between",
+    width: "80%",
+    marginLeft: 40,
+    marginTop: 60,
+  },
+  headerText: {
+    color: "rgba(255,255,255,1)",
+    fontSize: 25,
+  },
+  subtext: {
+    color: "rgba(255,255,255,1)",
+    textAlign: "left",
+    fontSize: 18,
+    lineHeight: 25,
+    width: "80%",
+  },
+  backButton: {
+    color: "rgba(255,255,255,1)",
+    fontSize: 40
+  },
+});
+
+export default SetupView;
\ No newline at end of file
diff --git a/views/ConnectingView.js b/views/ConnectingView.js
new file mode 100644
index 0000000..88507e6
--- /dev/null
+++ b/views/ConnectingView.js
@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  ActivityIndicator,
+} from "react-native";
+import SetupView from '../components/SetupView';
+
+
+function ConnectingView(props) {
+
+  return (
+    <SetupView
+      headerText="Connecting..."
+      lowerLeftButtonText="Advanced Setup"
+      lowerRightButtonText="Need help?"
+    >
+      <ActivityIndicator size="large" color="#ffffff" />
+      <Text style={styles.subtext}>
+        Please connect your phone to the WiFi of your SwimTracker
+            </Text>
+
+    </SetupView>
+  )
+}
+
+const styles = StyleSheet.create({
+  subtext: {
+    color: "rgba(255,255,255,1)",
+    textAlign: "left",
+    fontSize: 18,
+    lineHeight: 25,
+    width: "80%",
+  }
+});
+
+export default ConnectingView;
\ No newline at end of file
diff --git a/views/WifiPasswordView.js b/views/WifiPasswordView.js
new file mode 100644
index 0000000..30bbdaf
--- /dev/null
+++ b/views/WifiPasswordView.js
@@ -0,0 +1,135 @@
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  TextInput,
+} from "react-native";
+import SetupView from '../components/SetupView';
+import EvilIcon from "react-native-vector-icons/EvilIcons";
+import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
+import themeColors from '../components/themeColors';
+
+
+function WifiPasswordView(props) {
+
+  let iconName = "wifi-strength-" + props.strength;
+  if (props.lock) {
+    iconName += "-lock";
+  }
+
+  return (
+    <SetupView
+      headerText="WiFi Password"
+      lowerRightButtonText="Need help?"
+    >
+      <Text style={styles.subtext}>
+        {props.subText}
+      </Text>
+
+      <View style={styles.formContainer}>
+        <View style={[styles.row, { backgroundColor: "rgba(155,155,155,0.8)" }]}>
+          <MaterialIcon style={styles.ssidIcon} name={iconName}></MaterialIcon>
+          <Text style={styles.ssidLabel} >{props.ssid}</Text>
+        </View>
+
+        <View style={styles.row}>
+          <EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
+          <TextInput style={styles.passwordInput}
+            autoCompleteType="password"
+            placeholder="Password"
+            placeholderTextColor="rgba(255,255,255,0.5)"
+            secureTextEntry={true}
+          ></TextInput>
+        </View>
+
+        {props.confirmPwInput &&
+          < View style={styles.row}>
+            <EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
+            <TextInput style={styles.passwordInput}
+              autoCompleteType="password"
+              placeholder="Repeat Password"
+              placeholderTextColor="rgba(255,255,255,0.5)"
+              secureTextEntry={true}
+            ></TextInput>
+          </View>
+        }
+
+        <TouchableOpacity style={[styles.row, styles.button]}>
+          <Text style={[styles.ssidLabel, { alignSelf: "center", textAlign: "center" }]}>{props.buttonText}</Text>
+        </TouchableOpacity>
+
+      </View>
+
+    </SetupView >
+  );
+}
+
+WifiPasswordView.defaultProps = {
+  lock: true,
+  strength: 2,
+  ssid: "TheWLANName",
+  confirmPwInput: false,
+  buttonText: "Set Password",
+  subText: "Please enter password for your home WiFi"
+}
+
+
+WifiPasswordView.defaultProps = {
+  lock: true,
+  strength: 3,
+  ssid: "swimtracker-E2842S",
+  subText: "Use this option only if you're home WiFi doesn't reach the SwimTracker. The SwimTracker creates its own WiFi with the password you set here.",
+  confirmPwInput: true,
+  buttonText: "Set Password",
+}
+
+
+const styles = StyleSheet.create({
+  subtext: {
+    color: "rgba(255,255,255,1)",
+    textAlign: "left",
+    fontSize: 18,
+    lineHeight: 25,
+    width: "80%",
+  },
+  formContainer: {
+  },
+  row: {
+    backgroundColor: "rgba(255,255,255,0.4)",
+    borderRadius: 5,
+    width: "100%",
+    height: 50,
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  ssidLabel: {
+    color: "rgba(255,255,255,1)",
+    fontSize: 18,
+    width: "100%"
+  },
+  button: {
+    marginTop: 20,
+    backgroundColor: themeColors["GREEN SEA"],
+    justifyContent: "center"
+  },
+  ssidIcon: {
+    fontSize: 25,
+    color: "rgba(255,255,255,1)",
+    marginLeft: 15,
+    marginRight: 15,
+  },
+  passwordInput: {
+    height: 30,
+    color: "rgba(255,255,255,1)",
+    width: "100%",
+    fontSize: 18,
+  }
+
+});
+
+
+export default WifiPasswordView;
\ No newline at end of file
diff --git a/views/WifiSelectionView.js b/views/WifiSelectionView.js
new file mode 100644
index 0000000..dd85469
--- /dev/null
+++ b/views/WifiSelectionView.js
@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  ScrollView,
+} from "react-native";
+import SetupView from '../components/SetupView';
+import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
+
+
+function WifiListElement(props) {
+  let iconName = "wifi-strength-" + props.strength;
+  if(props.lock) {
+    iconName += "-lock";
+  }
+
+  return (
+    <TouchableOpacity>
+      <View style={wifiListElementStyles.container}>
+        <MaterialIcon style={wifiListElementStyles.icon} name={iconName}></MaterialIcon>
+        <Text style={wifiListElementStyles.text} >{props.text}</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+const wifiListElementStyles = {
+  container: {
+    backgroundColor: "rgba(255,255,255,0.4)",
+    borderRadius: 5,
+    width: "100%",
+    height: 50,
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  icon: {
+    fontSize: 25,
+    color: "rgba(255,255,255,1)",
+    marginLeft: 15,
+    marginRight: 15,
+  },
+  text: {
+    color: "rgba(255,255,255,1)",
+    fontSize: 18,
+    width: "100%"
+  }
+};
+
+// ---------------------------------------------------------------------------------------------
+
+
+function WifiSelectionView(props) {
+
+  return (
+    <SetupView
+      headerText="WiFi Connection"
+      lowerLeftButtonText="My WiFi wasn't found"
+      lowerRightButtonText="Need help?"
+    >
+      <View style={styles.listContainer}>
+        <ScrollView>
+          <WifiListElement text="WLAN" strength="4" lock={true}></WifiListElement>
+          <WifiListElement text="GastWLAN" strength="2" lock={false}></WifiListElement>
+
+          <WifiListElement text="WLAN" strength="4"></WifiListElement>
+          <WifiListElement text="GastWLAN" strength="2"></WifiListElement>
+
+          <WifiListElement text="WLAN" strength="4"></WifiListElement>
+          <WifiListElement text="GastWLAN" strength="2"></WifiListElement>
+        </ScrollView>
+
+      </View>
+    </SetupView>
+  )
+}
+
+const styles = StyleSheet.create({
+  listContainer: {
+    height: "75%",
+    //backgroundColor: "red",
+  }
+});
+
+export default WifiSelectionView;
\ No newline at end of file