diff --git a/App.js b/App.js
index 7a46697..b74f208 100644
--- a/App.js
+++ b/App.js
@@ -65,7 +65,7 @@ export function MyApp() {
           screenOptions={{
             // headerShown: false,
             headerStyle: {
-              backgroundColor: appContext.appTheme.drawer.backgroundColor,
+              backgroundColor: appContext.appTheme.backgroundColor,
             },
             headerTintColor: appContext.appTheme.text,
             drawerStyle: {
diff --git a/README.md b/README.md
index 4a855d5..f31b8ba 100644
--- a/README.md
+++ b/README.md
@@ -6,10 +6,6 @@ npx expo start -c
 
 https://pictogrammers.com/library/mdi/
 
-# RNUILib
-
-https://wix.github.io/react-native-ui-lib/docs/getting-started/setup
-
 https://stackoverflow.com/questions/68243384/dark-mode-usecolorscheme-always-returns-light-on-android
 
 https://stackoverflow.com/questions/70493788/i18nextpluralresolver-your-environment-seems-not-to-be-intl-api-compatible-u
diff --git a/assets/icons/chevronDown.png b/assets/icons/chevronDown.png
deleted file mode 100644
index 6439e5c..0000000
Binary files a/assets/icons/chevronDown.png and /dev/null differ
diff --git a/locales/de.json b/locales/de.json
index ed6ae46..ef0ab17 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -10,7 +10,9 @@
     "device": {
       "light": {
         "pickerColorModeText": "Farbauswahl",
-        "pickerColorModePlaceholder": "Wählen Sie einen Farbmodus"
+        "pickerColorModePlaceholder": "Wählen Sie einen Farbmodus",
+        "minimumBrightnessText": "Minimale Helligkeit",
+        "maximumBrightnessText": "Maximale Helligkeit"
       },
       "settings": {
         "settingsTitle": "Einstellungen",
diff --git a/locales/en.json b/locales/en.json
index feb5c81..37df20d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -10,7 +10,9 @@
     "device": {
       "light": {
         "pickerColorModeText": "Color selection",
-        "pickerColorModePlaceholder": "Select a color mode"
+        "pickerColorModePlaceholder": "Select a color mode",
+        "minimumBrightnessText": "Minimum brightness",
+        "maximumBrightnessText": "Maximum brightness"
       },
       "settings": {
         "settingsTitle": "Settings",
diff --git a/src/Components/Slider/index.js b/src/Components/Slider/index.js
index 7147c4b..258743a 100644
--- a/src/Components/Slider/index.js
+++ b/src/Components/Slider/index.js
@@ -8,6 +8,7 @@ export default function MySlider({
   onValueChange,
   minimumValue,
   maximumValue,
+  inverted,
 }) {
   const appContext = useContext(AppContext);
 
@@ -17,6 +18,7 @@ export default function MySlider({
       minimumValue={minimumValue}
       maximumValue={maximumValue}
       value={value}
+      inverted={inverted}
       onValueChange={onValueChange}
       minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor}
       maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor}
diff --git a/src/Components/Switch/index.js b/src/Components/Switch/index.js
index 0df437c..766ae0b 100644
--- a/src/Components/Switch/index.js
+++ b/src/Components/Switch/index.js
@@ -2,11 +2,12 @@ import { useContext } from "react";
 import { Switch } from "react-native";
 import { AppContext } from "../../utils";
 
-export default function MySwitch({ value, onValueChange }) {
+export default function MySwitch({ style, value, onValueChange }) {
   const appContext = useContext(AppContext);
 
   return (
     <Switch
+      style={style}
       value={value}
       onValueChange={onValueChange}
       trackColor={{
diff --git a/src/Screens/Device/light.js b/src/Screens/Device/light.js
index 29ebdde..685646f 100644
--- a/src/Screens/Device/light.js
+++ b/src/Screens/Device/light.js
@@ -16,7 +16,7 @@ import ColorPicker, {
   HueCircular,
   Panel1,
 } from "reanimated-color-picker";
-import { AppContext } from "../../utils";
+import { AppContext, AppStyles } from "../../utils";
 import Card from "../../Components/Card";
 import MySwitch from "../../Components/Switch";
 import MyIcon from "../../Components/Icon";
@@ -113,6 +113,10 @@ export default function LightView() {
   const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
   const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
 
+  const [sliderBrightness, setSliderBrightness] = useState(10);
+  const [sliderMinimumBrightness, setSliderMinimumBrightness] = useState(25);
+  const [sliderMaximumBrightness, setSliderMaximumBrightness] = useState(75);
+
   const onColorSelect = (color) => {
     selectedColorPickerColor.value = color.hex;
 
@@ -133,191 +137,268 @@ export default function LightView() {
   };
 
   return (
-    <Card>
-      <TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
-        >
-          <View>
-            <Text style={{ color: appContext.appTheme.text }}>
-              {t("screens.device.light.pickerColorModeText")}
-            </Text>
-            <Text style={{ color: appContext.appTheme.colors.primary }}>
-              {selectedDeviceColorMode === ""
-                ? t("screens.device.light.pickerColorModePlaceholder")
-                : colorModePickerOptions.find(
-                    (item) => item.value === selectedDeviceColorMode
-                  ).label}
-            </Text>
+    <>
+      <Card>
+        <TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <View>
+              <Text style={{ color: appContext.appTheme.text }}>
+                {t("screens.device.light.pickerColorModeText")}
+              </Text>
+              <Text style={{ color: appContext.appTheme.colors.primary }}>
+                {selectedDeviceColorMode === ""
+                  ? t("screens.device.light.pickerColorModePlaceholder")
+                  : colorModePickerOptions.find(
+                      (item) => item.value === selectedDeviceColorMode
+                    ).label}
+              </Text>
+            </View>
+            <MyIcon
+              name="chevron-down"
+              size={24}
+              color={appContext.appTheme.icon}
+            />
           </View>
+        </TouchableOpacity>
+
+        <PickerModal
+          isOpen={modalDeviceColorModeVisible}
+          setIsOpen={setModalDeviceColorModeVisible}
+          items={colorModePickerOptions.map((item) => {
+            return {
+              label: item.label,
+              onPress: () => setSelectedDeviceColorMode(item.value),
+              selected: selectedDeviceColorMode === item.value,
+            };
+          })}
+        />
+
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <MySwitch
+            value={switchState}
+            onValueChange={(e) => setSwitchState(e)}
+          />
           <MyIcon
-            name="chevron-down"
+            name={
+              sliderBrightness < 1
+                ? "brightness-5"
+                : sliderBrightness < 40
+                ? "brightness-4"
+                : sliderBrightness < 80
+                ? "brightness-6"
+                : "brightness-7"
+            }
+            color={appContext.appTheme.icon}
+            size={20}
+          />
+          <MySlider
+            style={{ flex: 1 }}
+            minimumValue={0}
+            maximumValue={100}
+            value={sliderBrightness}
+            onValueChange={(v) => setSliderBrightness(v)}
+          />
+        </View>
+
+        <Animated.View>
+          <ColorPicker
+            value={selectedColorPickerColor.value}
+            sliderThickness={25}
+            thumbSize={27}
+            onChange={onColorSelect}
+          >
+            <View
+              style={{
+                justifyContent: "center",
+                flexDirection: "row",
+                alignItems: "center",
+                marginBottom: 10,
+              }}
+            >
+              <ColorLayer
+                layerNumber={1}
+                sharedColor={selectedColorLayer1}
+                selected={selectedGlasLayer === 1}
+                onPress={() => {
+                  setSelectedGlasLayer(1);
+                  selectedColorPickerColor.value = selectedColorLayer1.value;
+                }}
+              />
+              <ColorLayer
+                layerNumber={2}
+                sharedColor={selectedColorLayer2}
+                selected={selectedGlasLayer === 2}
+                onPress={() => {
+                  setSelectedGlasLayer(2);
+                  selectedColorPickerColor.value = selectedColorLayer2.value;
+                }}
+              />
+              <ColorLayer
+                layerNumber={3}
+                sharedColor={selectedColorLayer3}
+                selected={selectedGlasLayer === 3}
+                onPress={() => {
+                  setSelectedGlasLayer(3);
+                  selectedColorPickerColor.value = selectedColorLayer3.value;
+                }}
+              />
+              <ColorLayer
+                layerNumber={4}
+                sharedColor={selectedColorLayer4}
+                selected={selectedGlasLayer === 4}
+                onPress={() => {
+                  setSelectedGlasLayer(4);
+                  selectedColorPickerColor.value = selectedColorLayer4.value;
+                }}
+              />
+            </View>
+
+            <TouchableOpacity
+              onPress={() =>
+                setColorSwatchesFavorites([
+                  ...colorSwatchesFavorites,
+                  selectedColorPickerColor.value,
+                ])
+              }
+              style={{
+                position: "absolute",
+                top: 20,
+                right: 0,
+              }}
+            >
+              <MyIcon
+                name="star-outline"
+                color={appContext.appTheme.icon}
+                size={20}
+              />
+            </TouchableOpacity>
+
+            <View style={{ marginLeft: 30, marginRight: 30 }}>
+              <HueCircular
+                containerStyle={{
+                  justifyContent: "center",
+                  backgroundColor: appContext.appTheme.backgroundColor,
+                }}
+                thumbShape="pill"
+              >
+                <Panel1 style={styles.panelStyle} />
+              </HueCircular>
+            </View>
+
+            <Swatches
+              style={styles.swatchesContainer}
+              swatchStyle={styles.swatchStyle}
+              colors={colorSwatchesFavorites}
+            />
+
+            {appContext.isUserExpertModeEnabled && (
+              <View style={styles.previewTxtContainer}>
+                <InputWidget
+                  inputStyle={{
+                    color: appContext.appTheme.text,
+                    paddingVertical: 2,
+                    borderColor: "#707070",
+                    fontSize: 12,
+                    marginLeft: 5,
+                  }}
+                  iconColor="#707070"
+                />
+              </View>
+            )}
+          </ColorPicker>
+        </Animated.View>
+      </Card>
+
+      <Card>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <MyIcon
+            name="brightness-6"
             size={24}
             color={appContext.appTheme.icon}
           />
-        </View>
-      </TouchableOpacity>
-
-      <PickerModal
-        isOpen={modalDeviceColorModeVisible}
-        setIsOpen={setModalDeviceColorModeVisible}
-        items={colorModePickerOptions.map((item) => {
-          return {
-            label: item.label,
-            onPress: () => setSelectedDeviceColorMode(item.value),
-            selected: selectedDeviceColorMode === item.value,
-          };
-        })}
-      />
-
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
-        <MySwitch
-          value={switchState}
-          onValueChange={(e) => setSwitchState(e)}
-        />
-        <MyIcon
-          name={"brightness-7"}
-          color={appContext.appTheme.icon}
-          size={20}
-        />
-        <View style={{ flex: 1 }}>
-          <MySlider />
-        </View>
-      </View>
-
-      <Animated.View>
-        <ColorPicker
-          value={selectedColorPickerColor.value}
-          sliderThickness={25}
-          thumbSize={27}
-          onChange={onColorSelect}
-        >
-          <View
-            style={{
-              justifyContent: "center",
-              flexDirection: "row",
-              alignItems: "center",
-              marginBottom: 10,
-            }}
-          >
-            <ColorLayer
-              layerNumber={1}
-              sharedColor={selectedColorLayer1}
-              selected={selectedGlasLayer === 1}
-              onPress={() => {
-                setSelectedGlasLayer(1);
-                selectedColorPickerColor.value = selectedColorLayer1.value;
-              }}
-            />
-            <ColorLayer
-              layerNumber={2}
-              sharedColor={selectedColorLayer2}
-              selected={selectedGlasLayer === 2}
-              onPress={() => {
-                setSelectedGlasLayer(2);
-                selectedColorPickerColor.value = selectedColorLayer2.value;
-              }}
-            />
-            <ColorLayer
-              layerNumber={3}
-              sharedColor={selectedColorLayer3}
-              selected={selectedGlasLayer === 3}
-              onPress={() => {
-                setSelectedGlasLayer(3);
-                selectedColorPickerColor.value = selectedColorLayer3.value;
-              }}
-            />
-            <ColorLayer
-              layerNumber={4}
-              sharedColor={selectedColorLayer4}
-              selected={selectedGlasLayer === 4}
-              onPress={() => {
-                setSelectedGlasLayer(4);
-                selectedColorPickerColor.value = selectedColorLayer4.value;
-              }}
-            />
-          </View>
-
-          <TouchableOpacity
-            onPress={() =>
-              setColorSwatchesFavorites([
-                ...colorSwatchesFavorites,
-                selectedColorPickerColor.value,
-              ])
-            }
-            style={{
-              position: "absolute",
-              top: 20,
-              right: 0,
-            }}
-          >
-            <MyIcon
-              name="star-outline"
-              color={appContext.appTheme.icon}
-              size={20}
-            />
-          </TouchableOpacity>
-
-          <View style={{ marginLeft: 30, marginRight: 30 }}>
-            <HueCircular
-              containerStyle={{
-                justifyContent: "center",
-                backgroundColor: appContext.appTheme.backgroundColor,
-              }}
-              thumbShape="pill"
-            >
-              <Panel1 style={styles.panelStyle} />
-            </HueCircular>
-          </View>
-
-          <Swatches
-            style={styles.swatchesContainer}
-            swatchStyle={styles.swatchStyle}
-            colors={colorSwatchesFavorites}
+          <Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
+            Auto brightness
+          </Text>
+          <MySwitch
+            style={{ flex: 1 }}
+            value={switchState}
+            onValueChange={(e) => setSwitchState(e)}
           />
+        </View>
 
-          {appContext.isUserExpertModeEnabled && (
-            <View style={styles.previewTxtContainer}>
-              <InputWidget
-                inputStyle={{
-                  color: appContext.appTheme.text,
-                  paddingVertical: 2,
-                  borderColor: "#707070",
-                  fontSize: 12,
-                  marginLeft: 5,
-                }}
-                iconColor="#707070"
-              />
-            </View>
-          )}
-        </ColorPicker>
-      </Animated.View>
-    </Card>
+        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {t("screens.device.light.minimumBrightnessText")}
+          </Text>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {sliderMinimumBrightness} %
+          </Text>
+        </View>
+        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {t("screens.device.light.maximumBrightnessText")}
+          </Text>
+          <Text
+            style={[
+              AppStyles.typography14,
+              { color: appContext.appTheme.text },
+            ]}
+          >
+            {sliderMaximumBrightness} %
+          </Text>
+        </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-around",
+            marginTop: 10,
+          }}
+        >
+          <View style={{ width: "60%" }}>
+            <MySlider
+              minimumValue={50}
+              maximumValue={0}
+              inverted
+              value={sliderMinimumBrightness}
+              onValueChange={(v) => setSliderMinimumBrightness(Math.round(v))}
+            />
+          </View>
+          <View style={{ width: "60%", right: 1 }}>
+            <MySlider
+              minimumValue={51}
+              maximumValue={100}
+              value={sliderMaximumBrightness}
+              onValueChange={(v) => setSliderMaximumBrightness(Math.round(v))}
+            />
+          </View>
+        </View>
+      </Card>
+    </>
   );
 }
 
-/*
- <View row center style={{ flexWrap: "wrap", marginTop: 5 }}>
-  {colorSwatchesFavorites.map((color, i) => (
-    <ColorSwatch
-      key={i}
-      color={color}
-      onPress={() => {
-        console.log("press", color, renderKey);
-        selectedColorPickerColor.value = color;
-        setRenderKey((prevKey) => prevKey + 1);
-      }}
-    />
-  ))}
-</View>
-*/
-
-//  <BrightnessSlider style={styles.sliderStyle} /> <Panel3 style={styles.panelStyle} />
-
 const styles = StyleSheet.create({
   previewTxtContainer: {
     paddingTop: 20,
diff --git a/src/utils.js b/src/utils.js
index cf75c5e..de087f9 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -54,12 +54,12 @@ const DarkAppTheme = {
       activeBackgroundColor: "rgba(0, 0, 0, 0.1)",
     },
   },
-  divider: "#888",
+  divider: "#434443",
   icon: "#ddd",
   switch: {
-    trackColorTrue: "#b2b3b3",
+    trackColorTrue: "#01d064",
     trackColorFalse: "#b2b3b3",
-    thumbColorTrue: "#e67e22",
+    thumbColorTrue: "#f4f3f4",
     thumbColorFalse: "#f4f3f4",
     ios_backgroundColor: "#3e3e3e",
   },
@@ -93,9 +93,9 @@ const LightAppTheme = {
   divider: "#ddd",
   icon: "#000",
   switch: {
-    trackColorTrue: "#b2b3b3",
+    trackColorTrue: "#01d064",
     trackColorFalse: "#b2b3b3",
-    thumbColorTrue: "#e67e22",
+    thumbColorTrue: "#f4f3f4",
     thumbColorFalse: "#f4f3f4",
     ios_backgroundColor: "#3e3e3e",
   },