diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index 359a235..a4e2c31 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -3,13 +3,29 @@ import React from "react";
 import {Feather} from "@expo/vector-icons";
 import {useTheme} from "@/src/context/ThemeProvider";
 import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper";
+import {Dimensions} from "react-native";
+import {Tooltip} from "react-native-paper";
+
+
+const screenWidth = Dimensions.get("window").width;
+
+
+const tabs = [
+    {name: 'modes/text', title: 'Text', icon: 'type'},
+    {name: 'modes/image', title: 'Bilder', icon: 'image'},
+    {name: 'index', title: 'Startseite', icon: 'home'},
+    {name: 'modes/music', title: 'Musik', icon: 'music'},
+    {name: 'modes/clock', title: 'Uhr', icon: 'clock'},
+] as const; // "as const" macht das Array readonly und validiert die Strings.
 
 export default function TabLayout() {
     const theme = useTheme();
+    const shouldHideText = (screenWidth < 400); // Dynamisch basierend auf der Bildschirmbreite
+
     return (
         <AuthenticatedWrapper>
             <Tabs
-                screenOptions={{
+                screenOptions={({route}) => ({
                     headerStyle: {
                         backgroundColor: theme.theme.colors.primaryContainer,
                     },
@@ -35,46 +51,28 @@ export default function TabLayout() {
                         borderTopColor: theme.theme.colors.outline,
                         elevation: 4,
                     },
-                }}
+                    tabBarItemStyle: {
+                        borderLeftWidth: route.name === tabs[0].name ? 0 : 1,
+                        borderLeftColor: theme.theme.colors.outlineVariant, // Trennlinienfarbe
+                    },
+                })}
             >
-                <Tabs.Screen
-                    name={'modes/text'}
-                    options={{
-                        title: 'Text',
-                        tabBarIcon: ({color}) => <Feather size={28} name="type" color={color}/>,
-                    }}
-                />
-
-                <Tabs.Screen
-                    name={'modes/image'}
-                    options={{
-                        title: 'Bilder',
-                        tabBarIcon: ({color}) => <Feather size={28} name="image" color={color}/>,
-                    }}/>
-
-                <Tabs.Screen
-                    name="index"
-                    options={{
-                        title: 'Startseite',
-                        tabBarIcon: ({color}) => <Feather size={28} name="home" color={color}/>,
-                    }}
-                />
-
-
-                <Tabs.Screen
-                    name={'modes/music'}
-                    options={{
-                        title: 'Musik',
-                        tabBarIcon: ({color}) => <Feather size={28} name="music" color={color}/>,
-                    }}/>
-
-
-                <Tabs.Screen
-                    name={'modes/clock'}
-                    options={{
-                        title: 'Uhr',
-                        tabBarIcon: ({color}) => <Feather size={28} name="clock" color={color}/>,
-                    }}/>
+                {tabs.map(({name, title, icon}) => (
+                    <Tabs.Screen
+                        key={name}
+                        name={name}
+                        options={{
+                            title: shouldHideText ? '' : title,
+                            tabBarIcon: ({color}) => (
+                                <Tooltip
+                                    title={title}
+                                >
+                                    <Feather size={28} name={icon} color={color}/>
+                                </Tooltip>
+                            ),
+                        }}
+                    />
+                ))}
 
                 <Tabs.Screen
                     name="settings"
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 701daa1..3a9492e 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -12,8 +12,9 @@ export default function HomeScreen() {
             <ThemedHeader>Welcome to the Home Page!</ThemedHeader>
             <ThemedButton mode={"outlined"} onPress={() => {
                 console.log("Button pressed");
-                logout();
-                router.replace("/login");
+                logout().then(() => {
+                    router.replace("/login");
+                });
             }
             }>
                 Logout
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index c7f3a85..d7675dc 100644
--- a/app/(tabs)/settings.tsx
+++ b/app/(tabs)/settings.tsx
@@ -9,6 +9,7 @@ import {Paragraph, Text} from 'react-native-paper';
 
 import * as WebBrowser from "expo-web-browser";
 import {useAuth} from "@/src/context/AuthProvider";
+import {StyleSheet, View} from "react-native";
 
 WebBrowser.maybeCompleteAuthSession();
 
@@ -21,18 +22,29 @@ export default function SettingsScreen() {
         console.log('Erhaltener Authentifizierungscode:', token);
     };
 
-    console.log('authenticatedUser', authenticatedUser)
-
     return (
         <ThemedBackground>
             <ThemedHeader>
                 Settings
             </ThemedHeader>
-            <Paragraph>Guten Tag, {authenticatedUser?.name}</Paragraph>
-            <ChangePasswordModal/>
-            <ThemeToggleButton/>
-            <SpotifyAuthButton onAuthSuccess={handleAuthSuccess} jwtToken={jwtToken!}/>
-            {token && <Text>Erhaltener Code: {token.access_token}</Text>}
+            <View style={styles.container}>
+                <Paragraph>Guten Tag, {authenticatedUser?.name}</Paragraph>
+                <ChangePasswordModal/>
+                <ThemeToggleButton/>
+                <SpotifyAuthButton
+                    onAuthSuccess={handleAuthSuccess}
+                    jwtToken={jwtToken!}
+                />
+                {token && <Text>Erhaltener Code: {token.access_token}</Text>}
+            </View>
         </ThemedBackground>
     );
 }
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        gap: 12, // Für Abstand zwischen den Kind-Elementen (ab React Native 0.71)
+        alignItems: "center", // Zentrierung
+    },
+});
diff --git a/package-lock.json b/package-lock.json
index 8d2e43b..264139b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,6 @@
         "@babel/core": "^7.26.0",
         "@types/jest": "^29.5.14",
         "@types/react": "~18.3.12",
-        "@types/react-native-vector-icons": "^6.4.18",
         "@types/react-test-renderer": "^18.3.0",
         "compression": "^1.7.5",
         "eslint-config-expo": "~8.0.1",
@@ -5028,27 +5027,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-native": {
-      "version": "0.70.19",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
-      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-native-vector-icons": {
-      "version": "6.4.18",
-      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
-      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*",
-        "@types/react-native": "^0.70"
-      }
-    },
     "node_modules/@types/react-test-renderer": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz",
@@ -9283,9 +9261,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9308,7 +9286,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -9323,6 +9301,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/cookie": {
@@ -14649,9 +14631,9 @@
       "license": "ISC"
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/src/components/themed/ThemedBackground.tsx b/src/components/themed/ThemedBackground.tsx
index b068816..ae34de8 100644
--- a/src/components/themed/ThemedBackground.tsx
+++ b/src/components/themed/ThemedBackground.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import {ImageBackground, KeyboardAvoidingView, StyleSheet,} from "react-native";
 import {useTheme} from "../../context/ThemeProvider";
+import { Dimensions } from "react-native";
+
 
 type Props = {
     children: React.ReactNode;
@@ -21,6 +23,8 @@ export default function ThemedBackground({children}: Props) {
     );
 }
 
+const screenWidth = Dimensions.get("window").width;
+
 const styles = StyleSheet.create({
     background: {
         flex: 1,
@@ -29,8 +33,7 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         padding: 20,
-        width: "100%",
-        maxWidth: 340,
+        width: Math.min(screenWidth, 340),
         alignSelf: "center",
         alignItems: "center",
         justifyContent: "center",