diff --git a/App.js b/App.js
index 8abf7c9..5fd3bf6 100644
--- a/App.js
+++ b/App.js
@@ -2,7 +2,7 @@ import "react-native-gesture-handler";
 import { StatusBar } from "expo-status-bar";
 import { Text, View } from "react-native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
-import { NavigationContainer } from "@react-navigation/native";
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import SideBar from "./src/Components/SideBar";
 import {
   AppContext,
@@ -20,7 +20,18 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { TouchableOpacity } from "react-native";
 import MyIcon from "./src/Components/Icon";
 import { useTranslation } from "react-i18next";
-import { LightsEditActionModalContent } from "./src/Screens/Device/modals/EditActions/Lights";
+import {
+  LayersEditActionColorModeSelectionModalContent,
+  LightsEditActionModalContent,
+} from "./src/Screens/Device/modals/EditActions/Lights";
+import ChooseSceneModalContent from "./src/Screens/Device/modals/ChooseScene";
+import CreateSceneModalContent from "./src/Screens/Device/modals/ChooseScene/CreateScene";
+import AddSceneActionModalContent from "./src/Screens/Device/modals/AddSceneAction";
+import LayerSelectionModalContent from "./src/Screens/Device/modals/AddSceneAction/LayerSelection";
+import {
+  SettingsAppColorSchemeModalContent,
+  SettingsAppLanguageModalContent,
+} from "./src/Screens/Settings";
 
 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@@ -66,20 +77,32 @@ export function MyApp() {
     loadData();
   }, []);
 
-  const options = ({ navigation }) => {
+  const options = ({ navigation, pageTitle }) => {
     return getScreenStackOptions(
       navigation,
-      t("screens.device.scenes.modalLayersEditAction.headerTitle"),
+      pageTitle,
       appContext.appTheme.text,
       appContext.appTheme.backgroundColor,
       true
     );
   };
 
+  const navigatonTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: appContext.appTheme.backgroundColor,
+    },
+  };
+
   return (
     <SafeAreaView style={{ height: "100%" }}>
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
+      <NavigationContainer theme={navigatonTheme}>
+        <Stack.Navigator
+          screenOptions={{
+            headerTitleAlign: "center",
+          }}
+        >
           <Stack.Screen
             name="drawer"
             component={MyDrawer}
@@ -87,9 +110,103 @@ export function MyApp() {
           />
 
           <Stack.Screen
-            name="modalLayersEditActionIsOpen"
+            name="modalChooseScene"
+            component={ChooseSceneModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalChooseScene.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalCreateScene"
+            component={CreateSceneModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalCreateScene.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalAddSceneAction"
+            component={AddSceneActionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalAddSceneAction.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalLayerSection"
+            component={LayerSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalLayerSection.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalLayersEditAction"
             component={LightsEditActionModalContent}
-            options={options}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalLayersEditAction.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalLayersEditActionColorModeSelection"
+            component={LayersEditActionColorModeSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalLayersEditActionColorModeSelection.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalSettingsAppColorScheme"
+            component={SettingsAppColorSchemeModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t("screens.settings.appColorSchemeModalTitle"),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalSettingsAppLanguage"
+            component={SettingsAppLanguageModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t("screens.settings.languageModalTitle"),
+              })
+            }
           />
         </Stack.Navigator>
       </NavigationContainer>
diff --git a/locales/de.json b/locales/de.json
index 14cf312..2a3071f 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -36,11 +36,11 @@
         "infoNoActionsAvailableInScene": "Keine Aktionen in der Szene vorhanden",
         "buttonAddAction": "Aktion hinzufügen",
         "modalChooseScene": {
-          "headerTitle": "Wähle eine Szene aus",
+          "pageTitle": "Wähle eine Szene aus",
           "textButtonAddScene": "Neue Szene erstellen"
         },
         "modalCreateScene": {
-          "headerTitle": "Szene erstellen",
+          "pageTitle": "Szene erstellen",
           "options": {
             "emptyScene": "Leere Szene erstellen",
             "standardScene": "Standard Szene erstellen",
@@ -48,7 +48,7 @@
           }
         },
         "modalAddSceneAction": {
-          "headerTitle": "Aktion hinzufügen",
+          "pageTitle": "Aktion hinzufügen",
           "actions": {
             "layers": "Ebenen",
             "motor": "Motor",
@@ -62,10 +62,13 @@
           }
         },
         "modalLayerSection": {
-          "headerTitle": "Layer auswahl"
+          "pageTitle": "Layer auswahl"
         },
         "modalLayersEditAction": {
-          "headerTitle": "Ebenen bearbeiten"
+          "pageTitle": "Ebenen bearbeiten"
+        },
+        "modalLayersEditActionColorModeSelection": {
+          "pageTitle": "Wähle einen Farbmodus"
         }
       }
     },
@@ -79,7 +82,9 @@
       "pageTitle": "Einstellungen",
       "settingsCardTitle": "Einstellungen",
       "languageText": "Sprache",
+      "languageModalTitle": "Sprache anpassen",
       "appColorSchemeText": "Anzeigemodus",
+      "appColorSchemeModalTitle": "Anzeigemodus anpassen",
       "appColorSchemePicker": {
         "auto": "System Standard",
         "dark": "Dunkel",
diff --git a/locales/en.json b/locales/en.json
index d2b02b7..974f3b9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -36,11 +36,11 @@
         "infoNoActionsAvailableInScene": "No actions available in the scene",
         "buttonAddAction": "Add action",
         "modalChooseScene": {
-          "headerTitle": "Choose a scene",
+          "pageTitle": "Choose a scene",
           "textButtonAddScene": "Create new scene"
         },
         "modalCreateScene": {
-          "headerTitle": "Create scene",
+          "pageTitle": "Create scene",
           "options": {
             "emptyScene": "Create empty scene",
             "standardScene": "Create standard scene",
@@ -48,7 +48,7 @@
           }
         },
         "modalAddSceneAction": {
-          "headerTitle": "Add action",
+          "pageTitle": "Add action",
           "actions": {
             "layers": "Layers",
             "motor": "Motor",
@@ -62,10 +62,13 @@
           }
         },
         "modalLayerSection": {
-          "headerTitle": "Layer selection"
+          "pageTitle": "Layer selection"
         },
         "modalLayersEditAction": {
-          "headerTitle": "Edit layers"
+          "pageTitle": "Edit layers"
+        },
+        "modalLayersEditActionColorModeSelection": {
+          "pageTitle": "Choose a color mode"
         }
       }
     },
@@ -79,7 +82,9 @@
       "pageTitle": "Settings",
       "settingsCardTitle": "Settings",
       "languageText": "Language",
+      "languageModalTitle": "Customize language",
       "appColorSchemeText": "Appearance",
+      "appColorSchemeModalTitle": "Customize appearance",
       "appColorSchemePicker": {
         "auto": "System default",
         "dark": "Dark",
diff --git a/src/Components/ColorPicker/index.js b/src/Components/ColorPicker/index.js
index 9aea1aa..34bb602 100644
--- a/src/Components/ColorPicker/index.js
+++ b/src/Components/ColorPicker/index.js
@@ -268,22 +268,6 @@ export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
         onChange={onColorSelect}
         boundedThumb
       >
-        <TouchableOpacity
-          onPress={() =>
-            setColorSwatchesFavorites([
-              ...colorSwatchesFavorites,
-              selectedColorPickerColor.value,
-            ])
-          }
-          style={{
-            position: "absolute",
-            top: -18,
-            right: 2,
-          }}
-        >
-          <MyIcon name="star-outline" size={20} />
-        </TouchableOpacity>
-
         <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
           <Panel3 style={{ width: 200 }} />
 
diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js
index c6a2fe1..162dda1 100644
--- a/src/Components/Modal/index.js
+++ b/src/Components/Modal/index.js
@@ -97,7 +97,7 @@ export function MyDefaultModalHeader({ title, closeModal }) {
 
       <Text
         style={[
-          AppStyles.typography16,
+          AppStyles.typography20,
           { fontWeight: "bold", color: appContext.appTheme.text },
         ]}
       >
diff --git a/src/Components/SideBar/index.js b/src/Components/SideBar/index.js
index 589968e..ffc8e38 100644
--- a/src/Components/SideBar/index.js
+++ b/src/Components/SideBar/index.js
@@ -1,7 +1,7 @@
 import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
 import { useContext } from "react";
 import { Image, Text, TouchableOpacity, View } from "react-native";
-import { AppContext, AppStyles } from "../../utils";
+import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
 import { Divider } from "../Divider";
 import { useTranslation } from "react-i18next";
 import MyIcon from "../Icon";
@@ -27,6 +27,8 @@ export default function Sidebar(props) {
       ? appContext.appTheme.drawer.item.activeTintColor
       : appContext.appTheme.drawer.item.inactiveTintColor;
 
+    if (isFocused && isDevice) AppSelectedUserDevice.current = routeName;
+
     return (
       <DrawerItem
         label={() =>
@@ -138,11 +140,6 @@ export default function Sidebar(props) {
           label={"Old Device"}
           onPress={() => props.navigation.navigate("Old Turtle")}
         />
-
-        <MyDrawerItem
-          label={"test"}
-          onPress={() => props.navigation.navigate("test")}
-        />
       </DrawerContentScrollView>
 
       <View style={{ justifyContent: "flex-end" }}>
diff --git a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
index 1480a03..ed4830d 100644
--- a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
+++ b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import MyButton from "../../../../../Components/Button";
 import { useTranslation } from "react-i18next";
+import { AppSelectedUserDevice, ModalContainer } from "../../../../../utils";
 
 function Layer({ number, selected, onPress }) {
   return (
@@ -36,9 +37,7 @@ function Layer({ number, selected, onPress }) {
   );
 }
 
-export default function LayerSelectionModalContent({
-  openLayersActionEditModal,
-}) {
+export default function LayerSelectionModalContent({ navigation, route }) {
   const { t } = useTranslation();
   const [selectedLayer, setSelectedLayer] = useState([]);
 
@@ -53,7 +52,7 @@ export default function LayerSelectionModalContent({
   };
 
   return (
-    <>
+    <ModalContainer>
       <View
         style={{
           flexDirection: "row",
@@ -77,9 +76,12 @@ export default function LayerSelectionModalContent({
           title={t("screens.device.scenes.buttonAddAction")}
           style={{ marginTop: 20, width: 180 }}
           disabled={selectedLayer.length === 0}
-          onPress={openLayersActionEditModal}
+          onPress={() => {
+            navigation.navigate(AppSelectedUserDevice.current);
+            navigation.navigate("modalLayersEditAction", route.params);
+          }}
         />
       </View>
-    </>
+    </ModalContainer>
   );
 }
diff --git a/src/Screens/Device/modals/AddSceneAction/index.js b/src/Screens/Device/modals/AddSceneAction/index.js
index 47261e1..4a0b0ca 100644
--- a/src/Screens/Device/modals/AddSceneAction/index.js
+++ b/src/Screens/Device/modals/AddSceneAction/index.js
@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { Image, Text, TouchableOpacity, View } from "react-native";
-import { AppContext, AppStyles } from "../../../../utils";
+import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { AppContext, AppStyles, ModalContainer } from "../../../../utils";
 import MyIcon from "../../../../Components/Icon";
 import { Divider } from "../../../../Components/Divider";
 import { useTranslation } from "react-i18next";
@@ -65,100 +65,103 @@ function Action({
   );
 }
 
-export default function AddSceneActionModalContent({
-  device,
-  openLayerSelectionModal,
-}) {
+export default function AddSceneActionModalContent({ navigation, route }) {
   const { t } = useTranslation();
 
-  // TODO: check model type for actions
+  const deviceFirmwareVersion = route.params.deviceFirmwareVersion;
+
+  // TODO: show only actions by device model
 
   return (
-    <>
-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
-        iconName="lightbulb-on-outline"
-        imageSource={require("../../../../../assets/layers.gif")}
-        onPress={openLayerSelectionModal}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+    <ScrollView>
+      <ModalContainer>
+        <Action
+          text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
+          iconName="lightbulb-on-outline"
+          imageSource={require("../../../../../assets/layers.gif")}
+          onPress={() => navigation.navigate("modalLayerSection", route.params)}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
-        iconName="axis-z-rotate-counterclockwise"
-        imageSource={require("../../../../../assets/motor.gif")}
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
+          iconName="axis-z-rotate-counterclockwise"
+          imageSource={require("../../../../../assets/motor.gif")}
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.ambilight")}
-        iconName="television-ambient-light"
-        imageSource={require("../../../../../assets/ambilight.gif")}
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.ambilight"
+          )}
+          iconName="television-ambient-light"
+          imageSource={require("../../../../../assets/ambilight.gif")}
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
-        )}
-        iconName="timer-sand"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
+          )}
+          iconName="timer-sand"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
-        )}
-        iconName="clock-time-eight-outline"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
+          )}
+          iconName="clock-time-eight-outline"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
-        iconName="pause-octagon-outline"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
+          iconName="pause-octagon-outline"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.timeControl"
-        )}
-        iconName="timer-cog"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.timeControl"
+          )}
+          iconName="timer-cog"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />
 
-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
-        )}
-        iconName="gesture-tap-button"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.0"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
+          )}
+          iconName="gesture-tap-button"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.0"]}
+        />
 
-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
-        )}
-        iconName="debug-step-over"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.0"]}
-      />
-    </>
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
+          )}
+          iconName="debug-step-over"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.0"]}
+        />
+      </ModalContainer>
+    </ScrollView>
   );
 }
diff --git a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
index 934731c..ca1f996 100644
--- a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
@@ -1,13 +1,14 @@
 import { useContext } from "react";
-import { AppContext, NewEmptyDeviceScene } from "../../../../../utils";
+import {
+  AppContext,
+  ModalContainer,
+  NewEmptyDeviceScene,
+} from "../../../../../utils";
 import { FlatList } from "react-native";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
 import { useTranslation } from "react-i18next";
 
-export default function CreateSceneModalContent({
-  device,
-  closeChooseSceneModals,
-}) {
+export default function CreateSceneModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
@@ -29,27 +30,29 @@ export default function CreateSceneModalContent({
   ];
 
   return (
-    <FlatList
-      data={options}
-      keyExtractor={(item) => item.id}
-      renderItem={({ item }) => (
-        <MyPickerModalListItem
-          itemName={item.name}
-          onPress={() => {
-            appContext.setDevices((arr) => {
-              const newArr = [...arr];
+    <ModalContainer>
+      <FlatList
+        data={options}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <MyPickerModalListItem
+            itemName={item.name}
+            onPress={() => {
+              appContext.setDevices((arr) => {
+                const newArr = [...arr];
 
-              newArr[arr.findIndex((d) => d.id === device.id)].scenes.push(
-                NewEmptyDeviceScene()
-              );
+                newArr[
+                  arr.findIndex((d) => d.id === route.params.id)
+                ].scenes.push(NewEmptyDeviceScene());
 
-              return newArr;
-            });
+                return newArr;
+              });
 
-            closeChooseSceneModals();
-          }}
-        />
-      )}
-    />
+              navigation.pop(2);
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
   );
 }
diff --git a/src/Screens/Device/modals/ChooseScene/index.js b/src/Screens/Device/modals/ChooseScene/index.js
index 431749b..9bf9693 100644
--- a/src/Screens/Device/modals/ChooseScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/index.js
@@ -1,20 +1,19 @@
 import { useContext } from "react";
 import { FlatList } from "react-native";
-import { AppContext } from "../../../../utils";
+import { AppContext, ModalContainer } from "../../../../utils";
 import { MyPickerModalListItem } from "../../../../Components/Modal";
 import { useTranslation } from "react-i18next";
 import { MyTextButton } from "../../../../Components/Button";
 import MyResult from "../../../../Components/Result";
 
-export default function ChooseSceneModalContent({
-  device,
-  openCreateSceneModal,
-}) {
+export default function ChooseSceneModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
+  const device = route.params;
+
   return (
-    <>
+    <ModalContainer>
       {device.scenes.length === 0 ? (
         <MyResult
           text={"Keine Szenen vorhanden"}
@@ -38,6 +37,8 @@ export default function ChooseSceneModalContent({
 
                   return newArr;
                 });
+
+                navigation.goBack();
               }}
             />
           )}
@@ -47,9 +48,11 @@ export default function ChooseSceneModalContent({
       <MyTextButton
         style={{ marginTop: 10 }}
         actionColor={!device.scenes.length}
-        onPress={openCreateSceneModal}
+        onPress={() =>
+          navigation.navigate("modalCreateScene", { id: device.id })
+        }
         title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
       />
-    </>
+    </ModalContainer>
   );
 }
diff --git a/src/Screens/Device/modals/EditActions/Lights/index.js b/src/Screens/Device/modals/EditActions/Lights/index.js
index 3c9b8cc..1c731c5 100644
--- a/src/Screens/Device/modals/EditActions/Lights/index.js
+++ b/src/Screens/Device/modals/EditActions/Lights/index.js
@@ -7,14 +7,14 @@ import {
 import Card from "../../../../../Components/Card";
 import MyDropdown from "../../../../../Components/Dropdown";
 import { useContext, useState } from "react";
-import { AppContext } from "../../../../../utils";
+import { AppContext, ModalContainer } from "../../../../../utils";
 import MyModal, {
   MyDefaultModalHeader,
   MyPickerModalListItem,
 } from "../../../../../Components/Modal";
 import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
 
-export function LightsEditActionModalContent({ route }) {
+export function LightsEditActionModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const [modalColorModeSelectionIsOpen, setModalColorSelectionModeIsOpen] =
     useState(false);
@@ -64,7 +64,12 @@ export function LightsEditActionModalContent({ route }) {
                     appContext.appLanguage
                   ]
             }
-            onPress={() => setModalColorSelectionModeIsOpen(true)}
+            onPress={() =>
+              navigation.navigate("modalLayersEditActionColorModeSelection", {
+                supportedLightModes: supportedLightModes,
+                selectedLightMode: selectedLightMode,
+              })
+            }
           />
 
           <MyColorPickerV2
@@ -77,32 +82,31 @@ export function LightsEditActionModalContent({ route }) {
           <Card key={i} />
         ))}
       </ScrollView>
-
-      <MyModal
-        isOpen={modalColorModeSelectionIsOpen}
-        closeModal={() => setModalColorSelectionModeIsOpen(false)}
-        header={
-          <MyDefaultModalHeader
-            title={"Farbmodus wählen"}
-            closeModal={() => setModalColorSelectionModeIsOpen(false)}
-          />
-        }
-        content={
-          <FlatList
-            data={supportedLightModes}
-            renderItem={({ item, index }) => (
-              <MyPickerModalListItem
-                itemName={item.name[appContext.appLanguage]}
-                itemSelected={selectedLightMode === index}
-                onPress={() => {
-                  setSelectedLightMode(index);
-                  setModalColorSelectionModeIsOpen(false);
-                }}
-              />
-            )}
-          />
-        }
-      />
     </View>
   );
 }
+
+export function LayersEditActionColorModeSelectionModalContent({
+  navigation,
+  route,
+}) {
+  const appContext = useContext(AppContext);
+
+  return (
+    <ModalContainer>
+      <FlatList
+        data={route.params.supportedLightModes}
+        renderItem={({ item, index }) => (
+          <MyPickerModalListItem
+            itemName={item.name[appContext.appLanguage]}
+            itemSelected={route.params.selectedLightMode === index}
+            onPress={() => {
+              // TODO: set selected light mode directly in appContext actions
+              navigation.goBack();
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}
diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js
index f2f5e2d..8382059 100644
--- a/src/Screens/Device/scene.js
+++ b/src/Screens/Device/scene.js
@@ -1,16 +1,12 @@
 import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import { AppContext, IsPlatformIos } from "../../utils";
-import { useContext, useState } from "react";
+import { AppContext } from "../../utils";
+import { useContext } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
-import MyModal, { MyDefaultModalHeader } from "../../Components/Modal";
-import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
-import ChooseSceneModalContent from "./modals/ChooseScene";
-import AddSceneActionModalContent from "./modals/AddSceneAction";
-import LayerSelectionModalContent from "./modals/AddSceneAction/LayerSelection";
 import { useTranslation } from "react-i18next";
 import MyResult from "../../Components/Result";
+import { MyTextButton } from "../../Components/Button";
 
 export default function SceneView({ navigation, device }) {
   const appContext = useContext(AppContext);
@@ -20,58 +16,18 @@ export default function SceneView({ navigation, device }) {
     (scene) => scene.id === device.selectedScene
   );
 
-  const [modalOpenStates, setModalOpenStates] = useState({
-    modalChooseSceneIsOpen: false,
-    modalCreateSceneIsOpen: false,
-    modalAddSceneActionIsOpen: false,
-    modalLayerSectionIsOpen: false,
-    modalLayersEditActionIsOpen: false,
-  });
-
-  const setModalOpen = (modalName, open) =>
-    setModalOpenStates((prevState) => ({
-      ...prevState,
-      [modalName]: open,
-    }));
-
-  const closeChooseSceneModals = () =>
-    setModalOpenStates((prevState) => ({
-      ...prevState,
-      modalChooseSceneIsOpen: false,
-      modalCreateSceneIsOpen: false,
-    }));
-
-  const openLayersActionEditModal = () => {
-    setModalOpenStates((prevState) => ({
-      ...prevState,
-      modalChooseSceneIsOpen: false,
-      modalCreateSceneIsOpen: false,
-      modalAddSceneActionIsOpen: false,
-      modalLayerSectionIsOpen: false,
-    }));
-
-    // setTimeout is needed, otherwise the modal would not open on iOS
-    IsPlatformIos()
-      ? setTimeout(
-          () =>
-            setModalOpenStates((prevState) => ({
-              ...prevState,
-              modalLayersEditActionIsOpen: true,
-            })),
-          600
-        )
-      : setModalOpenStates((prevState) => ({
-          ...prevState,
-          modalLayersEditActionIsOpen: true,
-        }));
-  };
-
   return (
     <>
       <Card>
         <MyDropdown
           label={t("screens.device.scenes.dropdownSceneSelection.label")}
-          onPress={() => setModalOpen("modalChooseSceneIsOpen", true)}
+          onPress={() =>
+            navigation.navigate("modalChooseScene", {
+              id: device.id,
+              selectedScene: device.selectedScene,
+              scenes: device.scenes,
+            })
+          }
           selectedItemLabel={
             device.selectedScene === null
               ? t(
@@ -110,7 +66,7 @@ export default function SceneView({ navigation, device }) {
                     <Text>{item.name}</Text>
                     <TouchableOpacity
                       onPress={() =>
-                        navigation.navigate("modalLayersEditActionIsOpen", {
+                        navigation.navigate("modalLayersEditAction", {
                           deviceFirmwareVersion: device.firmware.version,
                         })
                       }
@@ -122,85 +78,19 @@ export default function SceneView({ navigation, device }) {
               )}
             />
           )}
+
+          <MyTextButton
+            title={t("screens.device.scenes.buttonAddAction")}
+            style={{ marginTop: 10 }}
+            actionColor={deviceScene.actions.length === 0}
+            onPress={() =>
+              navigation.navigate("modalAddSceneAction", {
+                deviceFirmwareVersion: device.firmware.version,
+              })
+            }
+          />
         </View>
       )}
-
-      <MyModal
-        isOpen={modalOpenStates.modalChooseSceneIsOpen}
-        closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
-        header={
-          <MyDefaultModalHeader
-            title={t("screens.device.scenes.modalChooseScene.headerTitle")}
-            closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
-          />
-        }
-        content={
-          <ChooseSceneModalContent
-            device={{
-              id: device.id,
-              selectedScene: device.selectedScene,
-              scenes: device.scenes,
-            }}
-            openCreateSceneModal={() =>
-              setModalOpen("modalCreateSceneIsOpen", true)
-            }
-          />
-        }
-      >
-        <MyModal
-          isOpen={modalOpenStates.modalCreateSceneIsOpen}
-          closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
-          header={
-            <MyDefaultModalHeader
-              title={t("screens.device.scenes.modalCreateScene.headerTitle")}
-              closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
-            />
-          }
-          content={
-            <CreateSceneModalContent
-              device={{ id: device.id }}
-              closeChooseSceneModals={closeChooseSceneModals}
-            />
-          }
-        />
-      </MyModal>
-
-      <MyModal
-        scrollView
-        isOpen={modalOpenStates.modalAddSceneActionIsOpen}
-        closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
-        header={
-          <MyDefaultModalHeader
-            title={t("screens.device.scenes.modalAddSceneAction.headerTitle")}
-            closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
-          />
-        }
-        content={
-          <AddSceneActionModalContent
-            device={{ firmwareVersion: device.firmware.version }}
-            openLayerSelectionModal={() =>
-              setModalOpen("modalLayerSectionIsOpen", true)
-            }
-          />
-        }
-      >
-        <MyModal
-          scrollView
-          isOpen={modalOpenStates.modalLayerSectionIsOpen}
-          closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
-          header={
-            <MyDefaultModalHeader
-              title={t("screens.device.scenes.modalLayerSection.headerTitle")}
-              closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
-            />
-          }
-          content={
-            <LayerSelectionModalContent
-              openLayersActionEditModal={() => openLayersActionEditModal()}
-            />
-          }
-        />
-      </MyModal>
     </>
   );
 }
diff --git a/src/Screens/Settings/index.js b/src/Screens/Settings/index.js
index 6d1b149..9821d87 100644
--- a/src/Screens/Settings/index.js
+++ b/src/Screens/Settings/index.js
@@ -1,18 +1,15 @@
-import { useContext, useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { useContext } from "react";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import { AppContext, AppStyles, Constants } from "../../utils";
+import { AppContext, AppStyles, Constants, ModalContainer } from "../../utils";
 import { Divider } from "../../Components/Divider";
 import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
-import { MyPickerModal } from "../../Components/Modal";
+import { MyPickerModalListItem } from "../../Components/Modal";
 
-export default function SettingsScreen() {
+export default function SettingsScreen({ navigation }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
-  const [modalAppColorSchemeVisible, setAppColorSchemeModalVisible] =
-    useState(false);
-  const [modalAppLanguageVisible, setModalAppLanguageVisible] = useState(false);
 
   return (
     <View
@@ -35,7 +32,7 @@ export default function SettingsScreen() {
         </Text>
 
         <TouchableOpacity
-          onPress={() => setModalAppLanguageVisible(true)}
+          onPress={() => navigation.navigate("modalSettingsAppLanguage")}
           style={{ marginBottom: 6 }}
         >
           <View
@@ -63,7 +60,9 @@ export default function SettingsScreen() {
           </View>
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={() => setAppColorSchemeModalVisible(true)}>
+        <TouchableOpacity
+          onPress={() => navigation.navigate("modalSettingsAppColorScheme")}
+        >
           <View
             style={{
               flexDirection: "row",
@@ -138,41 +137,72 @@ export default function SettingsScreen() {
             onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
           />
         </View>
-
-        <MyPickerModal
-          isOpen={modalAppColorSchemeVisible}
-          setIsOpen={setAppColorSchemeModalVisible}
-          items={[
-            {
-              label: t("screens.settings.appColorSchemePicker.auto"),
-              onPress: () => appContext.setAppColorScheme("auto"),
-              selected: appContext.appColorScheme === "auto",
-            },
-            {
-              label: t("screens.settings.appColorSchemePicker.dark"),
-              onPress: () => appContext.setAppColorScheme("dark"),
-              selected: appContext.appColorScheme === "dark",
-            },
-            {
-              label: t("screens.settings.appColorSchemePicker.light"),
-              onPress: () => appContext.setAppColorScheme("light"),
-              selected: appContext.appColorScheme === "light",
-            },
-          ]}
-        />
-
-        <MyPickerModal
-          isOpen={modalAppLanguageVisible}
-          setIsOpen={setModalAppLanguageVisible}
-          items={Constants.languages.map((language) => {
-            return {
-              label: language.label,
-              onPress: () => appContext.setAppLanguage(language.name),
-              selected: appContext.appLanguage === language.name,
-            };
-          })}
-        />
       </Card>
     </View>
   );
 }
+
+export function SettingsAppLanguageModalContent({ navigation }) {
+  const appContext = useContext(AppContext);
+
+  return (
+    <ModalContainer>
+      <FlatList
+        data={Constants.languages}
+        renderItem={({ item, index }) => (
+          <MyPickerModalListItem
+            key={index}
+            itemName={item.label}
+            onPress={() => {
+              appContext.setAppLanguage(item.name);
+              navigation.goBack();
+            }}
+            itemSelected={appContext.appLanguage === item.name}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}
+
+export function SettingsAppColorSchemeModalContent({ navigation }) {
+  const appContext = useContext(AppContext);
+  const { t } = useTranslation();
+
+  const items = [
+    {
+      label: t("screens.settings.appColorSchemePicker.auto"),
+      onPress: () => appContext.setAppColorScheme("auto"),
+      selected: appContext.appColorScheme === "auto",
+    },
+    {
+      label: t("screens.settings.appColorSchemePicker.dark"),
+      onPress: () => appContext.setAppColorScheme("dark"),
+      selected: appContext.appColorScheme === "dark",
+    },
+    {
+      label: t("screens.settings.appColorSchemePicker.light"),
+      onPress: () => appContext.setAppColorScheme("light"),
+      selected: appContext.appColorScheme === "light",
+    },
+  ];
+
+  return (
+    <ModalContainer>
+      <FlatList
+        data={items}
+        renderItem={({ item, index }) => (
+          <MyPickerModalListItem
+            key={index}
+            itemName={item.label}
+            itemSelected={item.selected}
+            onPress={() => {
+              item.onPress();
+              navigation.goBack();
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}
diff --git a/src/utils.js b/src/utils.js
index b36f616..27729b2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,7 +1,13 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { createContext, useState } from "react";
+import { createContext, createRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Appearance, Platform, StyleSheet, Vibration } from "react-native";
+import {
+  Appearance,
+  Platform,
+  StyleSheet,
+  Vibration,
+  View,
+} from "react-native";
 import uuid from "react-native-uuid";
 
 export const Constants = {
@@ -39,6 +45,10 @@ export const AppStyles = StyleSheet.create({
     shadowOpacity: 0.2, // only ios
     shadowRadius: 1, // only ios
   },
+  modal: {
+    flex: 1,
+    padding: 10,
+  },
 });
 
 const DarkAppTheme = {
@@ -342,7 +352,18 @@ const devDevices = [
       lastUpdated: "11.07.2023 um 20:33 Uhr",
     },
     selectedScene: null,
-    scenes: [],
+    scenes: [
+      {
+        id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
+        name: "Yolo",
+        actions: [
+          {
+            id: 0,
+            name: "Haha",
+          },
+        ],
+      },
+    ],
   },
 ];
 
@@ -354,6 +375,8 @@ export function NewEmptyDeviceScene() {
   };
 }
 
+export const AppSelectedUserDevice = createRef(null);
+
 export const AppContext = createContext(appContextPreview);
 
 export function AppProvider({ children }) {
@@ -429,3 +452,11 @@ export function IsPlatformIos() {
 export function VibrateShort() {
   Vibration.vibrate(50);
 }
+
+export function ModalContainer({ children }) {
+  return (
+    <View style={AppStyles.modal}>
+      <View>{children}</View>
+    </View>
+  );
+}