diff --git a/challenges/ecosystem/04.md b/challenges/ecosystem/04.md
index 091ff5c0..0342dd80 100644
--- a/challenges/ecosystem/04.md
+++ b/challenges/ecosystem/04.md
@@ -4,7 +4,7 @@
 
 ## 📡 What you will learn
 
-- Setup Storybook with React Native.
+- Setup Storybook v10 with React Native.
 - Writing `.stories` to debug your application with isolated components.
 
 ## 👾 Before we start the exercise
@@ -16,7 +16,7 @@
 - [ ] Setup Storybook
 
 ```console
-npx sb@latest init --type react_native
+npm create storybook@latest
 ```
 
 **🔭 Hint:** Read the prompt, the setup is NOT 100% automated.
@@ -28,10 +28,19 @@ First create metro config file if you don't have it yet.
 ```console
 npx expo customize metro.config.js
 ```
-Enable transformer.unstable_allowRequireContext in your metro config
+
+Then wrap your config with the `withStorybook` function and add the `enabled` option:
 
 ```js
-config.transformer.unstable_allowRequireContext = true;
+// metro.config.js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withStorybook(config, {
+  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
+});
 ```
 
 For a more detailed guide go to:
@@ -42,29 +51,54 @@ https://github.com/storybookjs/react-native#existing-project
 
 ![Change App.tsx for Storybook in React Native](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/ecosystem/storybook-booting.png)
 
-- [ ] Change the entry point of your application and comment your `default export` to return Storybook's UI.
+- [ ] Change the entry point of your application to conditionally load Storybook based on the environment variable:
 
-```javascript
+```tsx
 // App.tsx
-
-...
-
-// eslint-disable-next-line import/no-default-export
-// export default App;    <------ comment this for now
-
-// return Storybook's UI
-export { default } from "./.storybook";
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.tsx to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+let AppEntryPoint = App;
+
+if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
+  AppEntryPoint = require('./.rnstorybook').default;
+}
+
+export default AppEntryPoint;
 ```
 
-- [ ] Update your `package.json` to run storybook with `npm run storybook`:
+- [ ] Update your `package.json` to add the storybook command:
 
 ```diff
-    "storybook-generate": "sb-rn-get-stories",
-    "storybook-watch": "sb-rn-watcher",
-++    "storybook": "sb-rn-get-stories && expo start"
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+++  "storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start",
+    "storybook-generate": "sb-rn-get-stories"
+  },
 ```
 
-- [ ] Run your app, you should have the Storybook displayed like this:
+- [ ] Run Storybook with `npm run storybook`, you should have the Storybook displayed like this:
 
 <img src="https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/ecosystem/storybook-first-launch.gif" width="50%" height="50%" alt="Storybook React Native first launch" />
 
@@ -74,19 +108,25 @@ Right now, storybook display components created for testing purposes. We want to
 
 > Place code as close to where it's relevant as possible
 
-- [ ] Delete generated `Button.stories.js` files:
+- [ ] Delete generated example stories:
 
 ```console
-rm -rf .storybook/stories/
+rm -rf .rnstorybook/stories/
 ```
 
-- [ ] Update `.storybook/main.ts` file to load stories from our components folder:
+- [ ] Update `.rnstorybook/main.ts` file to load stories from our components folder:
 
 ```diff
-module.exports = {
---  // stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
-++  stories: ["../src/components/**/*.stories.?(ts|tsx|js|jsx)"],
+// .rnstorybook/main.ts
+import type { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+--  stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
+++  stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: [],
 };
+
+export default main;
 ```
 
 - [ ] Create a new file `./src/components/Text.stories.tsx`:
@@ -155,5 +195,4 @@ Default.story = {
 
 ## 👽 Bonus
 
-- [ ] Update your `package.json` with `STORYBOOK_ENABLED` to [swap between React Native Storybook and your app](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o).
 - [ ] You can [watch me live coding with Dany](https://www.youtube.com/watch?v=QgYPgDxJRkU) the maintainer of Storybook React Native.
diff --git a/challenges/expo-router/01.md b/challenges/expo-router/01.md
new file mode 100644
index 00000000..235c0bbb
--- /dev/null
+++ b/challenges/expo-router/01.md
@@ -0,0 +1,168 @@
+# File-based Routing
+
+## 📡 What you will learn
+
+- Organise your routes using file-based routing.
+- How to use the `expo-router` library with the `Link` component and `useRouter` hook.
+
+## 👾 Before we start the exercise
+
+- There are others routing solutions available, keep in mind **we are using [`expo-router` library](https://docs.expo.dev/router/introduction/)**.
+- Expo Router is built on top of React Navigation, so you get the same navigation primitives with a file-based approach.
+- TypeScript is fully supported and routes are automatically typed.
+
+Here is a preview of our application user flow:
+
+![expo-router](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/react-navigation/react-navigation.png)
+
+## 👨‍🚀 Exercise 1
+
+### Installation
+
+- [ ] Read the [Getting started](https://docs.expo.dev/router/installation/) guide to:
+  1. Install `expo-router` in your React Native project.
+  2. Configure the entry point in `package.json` and `app.json`.
+
+**🔭 Hint:** With Expo Router, routes are automatically generated based on the file structure in the `app/` directory.
+
+### Create your first routes
+
+- [ ] Create a new `app/` directory at the root of your project.
+- [ ] Create an `app/_layout.tsx` file to define your root layout:
+
+```javascript
+// app/_layout.tsx
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="terms" />
+    </Stack>
+  );
+}
+```
+
+- [ ] Create `app/index.tsx` for your `LoginScreen`.
+- [ ] Create `app/terms.tsx` for your `TermsScreen`.
+
+**🔭 Hint:** In Expo Router, `index.tsx` is the default route (like `index.html` on the web).
+
+### Navigate to another screen
+
+Do you remember the `<Text>` "by login you accept the Terms and Conditions."? We will use the `Link` component or `router.push()` to go to another screen.
+
+![expo-router](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/react-navigation/react-navigation-focus.png)
+
+- [ ] Use the `Link` component from `expo-router`:
+
+```javascript
+import { Link } from "expo-router";
+
+// Option 1: Using Link component (recommended)
+<Link href="/terms">
+  <Text>Terms and Conditions</Text>
+</Link>
+
+// Option 2: Using useRouter hook
+import { useRouter } from "expo-router";
+
+function LoginScreen() {
+  const router = useRouter();
+
+  function navigateToTerms() {
+    router.push("/terms");
+  }
+
+  return (
+    <TouchableOpacity onPress={navigateToTerms}>
+      <Text>Terms and Conditions</Text>
+    </TouchableOpacity>
+  );
+}
+```
+
+- [ ] Add a `goBack` behavior on `terms.tsx`:
+
+```javascript
+import { useRouter } from "expo-router";
+
+function TermsScreen() {
+  const router = useRouter();
+
+  return (
+    <Button title="Go Back" onPress={() => router.back()} />
+  );
+}
+```
+
+### Options for screens
+
+- [ ] On the `TermsScreen`, we have an issue with the double header, we can fix it with some options within the layout:
+
+```javascript
+// app/_layout.tsx
+<Stack screenOptions={{ headerShown: false }}>
+  ...
+</Stack>
+```
+
+Or configure specific screen options:
+
+```javascript
+// app/_layout.tsx
+<Stack.Screen
+  name="terms"
+  options={{
+    headerShown: true,
+    title: "Terms & Conditions",
+  }}
+/>
+```
+
+## 👽 Bonus
+
+### Typed routes
+
+Expo Router automatically generates types for your routes. Enable typed routes in your `app.json`:
+
+```json
+{
+  "expo": {
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
+```
+
+Now your routes are fully typed:
+
+```javascript
+import { Link } from "expo-router";
+
+// TypeScript will autocomplete and validate your routes
+<Link href="/terms">Terms</Link>
+<Link href="/starships">Starships</Link>
+```
+
+- [ ] Enable typed routes in your project.
+- [ ] Verify that TypeScript autocompletes your route paths.
+
+### Organize with route groups
+
+You can organize routes using groups (folders with parentheses):
+
+```
+app/
+  (auth)/
+    _layout.tsx
+    index.tsx      → /
+    terms.tsx      → /terms
+  (app)/
+    _layout.tsx
+    starships.tsx  → /starships
+```
+
+- [ ] Create route groups to separate auth and app routes.
diff --git a/challenges/expo-router/02.md b/challenges/expo-router/02.md
new file mode 100644
index 00000000..077a0e48
--- /dev/null
+++ b/challenges/expo-router/02.md
@@ -0,0 +1,186 @@
+# Passing data with Dynamic Routes
+
+## 📡 What you will learn
+
+- Use dynamic routes with `[param]` syntax.
+- Read `params` using the `useLocalSearchParams` hook.
+
+## 👾 Before we start the exercise
+
+- Check the [Dynamic routes documentation](https://docs.expo.dev/router/create-pages/#dynamic-routes).
+- Check the [useLocalSearchParams documentation](https://docs.expo.dev/router/reference/hooks/#uselocalsearchparams).
+
+## 👨‍🚀 Exercise 2
+
+### Create a dynamic route for starship details
+
+Go to your `app/` folder:
+
+- [ ] Create a new file `app/starship/[id].tsx` for the starship details screen.
+
+The `[id]` in the filename creates a dynamic route that can match any value.
+
+```
+app/
+  _layout.tsx
+  index.tsx
+  terms.tsx
+  starships.tsx
+  starship/
+    [id].tsx       → /starship/1, /starship/2, etc.
+```
+
+- [ ] Update your `_layout.tsx` to include the new route:
+
+```javascript
+// app/_layout.tsx
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="terms" />
+      <Stack.Screen name="starships" />
+      <Stack.Screen name="starship/[id]" />
+    </Stack>
+  );
+}
+```
+
+### Navigating to the details screen with params
+
+- [ ] Go to `app/starships.tsx` and implement navigation with params:
+
+```javascript
+import { Link, useRouter } from "expo-router";
+
+// Option 1: Using Link with href object
+<Link
+  href={{
+    pathname: "/starship/[id]",
+    params: { id: starship.id, name: starship.name }
+  }}
+>
+  <Text>{starship.name}</Text>
+</Link>
+
+// Option 2: Using useRouter
+function StarshipsScreen() {
+  const router = useRouter();
+
+  function handlePress(starship) {
+    router.push({
+      pathname: "/starship/[id]",
+      params: {
+        id: starship.id,
+        name: starship.name,
+        model: starship.model,
+        // Pass any data you need
+      }
+    });
+  }
+
+  return (
+    <TouchableOpacity onPress={() => handlePress(starship)}>
+      <Text>{starship.name}</Text>
+    </TouchableOpacity>
+  );
+}
+```
+
+- [ ] The header title for the starships list should be `Starships`.
+
+### Create the details screen
+
+- [ ] Go and create `app/starship/[id].tsx`:
+
+<img src="https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/react-navigation/details-screen.png" alt="expo-router details screen" width="50%" height="50%" />
+
+- [ ] Read the `params` using `useLocalSearchParams`:
+
+```javascript
+// app/starship/[id].tsx
+import { useLocalSearchParams } from "expo-router";
+
+export default function StarshipDetailsScreen() {
+  const { id, name, model } = useLocalSearchParams();
+
+  return (
+    <View>
+      <Text>Starship: {name}</Text>
+      <Text>Model: {model}</Text>
+    </View>
+  );
+}
+```
+
+**🔭 Hint:** You can also use `useGlobalSearchParams` if you need to access params from parent routes.
+
+You can use these components to make it pretty:
+
+- [`DataTable`](https://callstack.github.io/react-native-paper/docs/components/DataTable/)
+- [List.Section](https://callstack.github.io/react-native-paper/docs/components/List/ListSection)
+- [Chip](https://callstack.github.io/react-native-paper/docs/components/Chip/)
+
+## 👽 Bonus
+
+### Modal presentation
+
+- [ ] Change the screen presentation to display as a modal:
+
+```javascript
+// app/_layout.tsx
+<Stack.Screen
+  name="starship/[id]"
+  options={{
+    presentation: "modal",
+    headerShown: true,
+  }}
+/>
+```
+
+- [ ] Add a "close modal" Button with an icon:
+
+```javascript
+import { useRouter } from "expo-router";
+
+function StarshipDetailsScreen() {
+  const router = useRouter();
+
+  return (
+    <Button
+      title="Close"
+      onPress={() => router.dismiss()}
+    />
+  );
+}
+```
+
+### Debugging
+
+- [ ] Add [`expo-dev-tools`](https://docs.expo.dev/debugging/devtools-plugins/) to your project.
+- [ ] Install `@dev-plugins/react-navigation` to inspect routes and params.
+
+Start the project and open the `expo-dev-tools` with `?` and `shift + m` in your terminal to open the menu and select `@dev-plugins/react-navigation`.
+
+Now you can navigate in your app and see the route and params.
+
+### Typed params
+
+With typed routes enabled, you can type your params:
+
+```javascript
+import { useLocalSearchParams } from "expo-router";
+
+type StarshipParams = {
+  id: string;
+  name: string;
+  model?: string;
+};
+
+export default function StarshipDetailsScreen() {
+  const { id, name, model } = useLocalSearchParams<StarshipParams>();
+  // ...
+}
+```
diff --git a/challenges/expo-router/03.md b/challenges/expo-router/03.md
new file mode 100644
index 00000000..a73005cf
--- /dev/null
+++ b/challenges/expo-router/03.md
@@ -0,0 +1,242 @@
+# Protected Routes & Auth Flow
+
+## 📡 What you will learn
+
+- Understand how protected routes work with Expo Router.
+- Add an authentication flow using route groups.
+- Redirect unauthenticated users automatically.
+- Use React Context to manage auth state across the app.
+
+## 👾 Before we start the exercise
+
+- Check the [Authentication documentation](https://docs.expo.dev/router/reference/authentication/).
+- Check the [Route groups documentation](https://docs.expo.dev/router/layouts/#groups).
+- Check the [Redirect documentation](https://docs.expo.dev/router/reference/redirects/).
+
+Here is a preview of our application user flow:
+
+![expo-router](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/react-navigation/react-navigation.png)
+
+## 👨‍🚀 Exercise 3
+
+### Understanding Protected Routes
+
+Protected routes are routes that require authentication to access. In Expo Router, we protect routes by:
+
+1. **Grouping routes** with `(parentheses)` folders
+2. **Checking auth state** in the layout component
+3. **Redirecting** unauthenticated users to the login screen
+
+### Organize routes with groups
+
+- [ ] Reorganize your `app/` folder to separate auth and protected routes for the Spacecraft app:
+
+```
+app/
+  _layout.tsx              → Root layout with providers
+  (auth)/
+    _layout.tsx            → Auth stack layout
+    index.tsx              → LoginScreen (/)
+    terms.tsx              → TermsScreen (/terms)
+  (app)/
+    _layout.tsx            → Protected layout with auth check
+    (tabs)/
+      _layout.tsx          → Bottom Tab Navigator
+      starships/
+        index.tsx          → StarshipFeedScreen
+        [id].tsx           → StarshipDetailsScreen
+      pilots/
+        index.tsx          → PilotScreen
+        [id].tsx           → PilotDetailsScreen
+      planets/
+        index.tsx          → PlanetsScreen
+        [id].tsx           → PlanetDetailsScreen
+      plus/
+        index.tsx          → PlusScreen
+        feedback.tsx       → DoYouLikeScreen
+```
+
+**🔭 Hint:** Route groups (folders with parentheses) don't affect the URL. `(auth)/index.tsx` maps to `/`, not `/(auth)/`.
+
+### Create an Auth Context
+
+- [ ] Create `src/context/AuthContext.tsx` to manage authentication state:
+
+```javascript
+// src/context/AuthContext.tsx
+import { createContext, useContext, useState, ReactNode } from "react";
+
+type AuthContextType = {
+  user: boolean;
+  signIn: () => void;
+  signOut: () => void;
+};
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState(false);
+
+  const signIn = () => setUser(true);
+  const signOut = () => setUser(false);
+
+  return (
+    <AuthContext.Provider value={{ user, signIn, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+```
+
+### Setup the root layout with providers
+
+- [ ] Update `app/_layout.tsx` to wrap your app with all providers (Auth, React Query, Paper):
+
+```javascript
+// app/_layout.tsx
+import { Slot } from "expo-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { PaperProvider } from "react-native-paper";
+import { AuthProvider } from "../src/context/AuthContext";
+import { theme } from "../src/theme/theme";
+
+const queryClient = new QueryClient();
+
+export default function RootLayout() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PaperProvider theme={theme}>
+        <AuthProvider>
+          <Slot />
+        </AuthProvider>
+      </PaperProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### Create the protected route layout
+
+This is the key part: the `(app)/_layout.tsx` file checks if the user is authenticated and redirects to the login page if not.
+
+- [ ] Create `app/(app)/_layout.tsx` to protect all routes inside:
+
+```javascript
+// app/(app)/_layout.tsx
+import { Redirect, Stack } from "expo-router";
+import { useAuth } from "../../src/context/AuthContext";
+
+export default function AppLayout() {
+  const { user } = useAuth();
+
+  // 🔐 PROTECTED ROUTE CHECK
+  // If not authenticated, redirect to login
+  if (!user) {
+    return <Redirect href="/" />;
+  }
+
+  // User is authenticated, render the app
+  return <Stack screenOptions={{ headerShown: false }} />;
+}
+```
+
+**🔐 How it works:**
+
+1. When a user tries to access any route inside `(app)/`, this layout runs first
+2. It checks if `user` is truthy (authenticated)
+3. If not authenticated → `<Redirect href="/" />` sends them to login
+4. If authenticated → renders the `<Stack />` with child routes
+
+### Create the auth layout
+
+- [ ] Create `app/(auth)/_layout.tsx` for the authentication screens:
+
+```javascript
+// app/(auth)/_layout.tsx
+import { Redirect, Stack } from "expo-router";
+import { useAuth } from "../../src/context/AuthContext";
+
+export default function AuthLayout() {
+  const { user } = useAuth();
+
+  // If already authenticated, redirect to the app
+  if (user) {
+    return <Redirect href="/starships" />;
+  }
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="terms" />
+    </Stack>
+  );
+}
+```
+
+### Add sign in / sign out functionality
+
+- [ ] Update the LoginScreen to sign in:
+
+```javascript
+// app/(auth)/index.tsx
+import { useRouter } from "expo-router";
+import { useAuth } from "../../src/context/AuthContext";
+
+export default function LoginScreen() {
+  const { signIn } = useAuth();
+  const router = useRouter();
+
+  const handleSignIn = () => {
+    signIn();
+    // Use replace to prevent going back to login
+    router.replace("/starships");
+  };
+
+  return (
+    <View>
+      {/* Your login form here */}
+      <Button title="Sign in" onPress={handleSignIn} />
+    </View>
+  );
+}
+```
+
+- [ ] Add a sign out button in the PlusScreen:
+
+```javascript
+// app/(app)/(tabs)/plus/index.tsx
+import { useRouter } from "expo-router";
+import { useAuth } from "../../../../src/context/AuthContext";
+
+export default function PlusScreen() {
+  const { signOut } = useAuth();
+  const router = useRouter();
+
+  const handleSignOut = () => {
+    signOut();
+    router.replace("/");
+  };
+
+  return (
+    <View>
+      <Button title="Sign out" onPress={handleSignOut} />
+    </View>
+  );
+}
+```
+
+**🔭 Hint:** Use `router.replace()` instead of `router.push()` to prevent the user from going back to the previous screen with the back button.
+
+## 👽 Bonus
+
+- [ ] Add a "Remember me" checkbox on the login screen that stores the preference.
+- [ ] Create a `/forgot-password` screen in the `(auth)` group with a simple form.
+- [ ] Add a loading spinner on the login button while `signIn` is in progress.
diff --git a/challenges/expo-router/04.md b/challenges/expo-router/04.md
new file mode 100644
index 00000000..4c1961c9
--- /dev/null
+++ b/challenges/expo-router/04.md
@@ -0,0 +1,112 @@
+# Tab Navigation
+
+## 📡 What you will learn
+
+- Build a Bottom Tab Navigator with Expo Router.
+- Create nested stacks within tabs.
+- Present screens as modals.
+
+## 👾 Before we start the exercise
+
+- Make sure you have completed [Exercise 3](./03.md) with the authentication flow.
+- Check the [Tabs documentation](https://docs.expo.dev/router/layouts/#tabs).
+
+## 👨‍🚀 Exercise 4
+
+### Add the Bottom Tab Navigator
+
+- [ ] Create `app/(app)/(tabs)/_layout.tsx` for the Spacecraft tabs:
+
+```javascript
+// app/(app)/(tabs)/_layout.tsx
+import { Tabs } from "expo-router";
+import { useTheme } from "react-native-paper";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function TabLayout() {
+  const theme = useTheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: theme.colors.primary,
+      }}
+    >
+      <Tabs.Screen
+        name="starships"
+        options={{
+          title: "Starships",
+          tabBarIcon: ({ color }) => (
+            <Ionicons name="rocket" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="pilots"
+        options={{
+          title: "Pilots",
+          tabBarIcon: ({ color }) => (
+            <Ionicons name="people" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="planets"
+        options={{
+          title: "Planets",
+          tabBarIcon: ({ color }) => (
+            <Ionicons name="planet" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="plus"
+        options={{
+          title: "Plus",
+          tabBarIcon: ({ color }) => (
+            <Ionicons name="add-circle" size={24} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+```
+
+### Nested stack for each tab
+
+Each tab can have its own navigation stack, allowing you to navigate to detail screens while keeping the tab bar visible.
+
+- [ ] Create a nested layout for the starships tab with details modal:
+
+```javascript
+// app/(app)/(tabs)/starships/_layout.tsx
+import { Stack } from "expo-router";
+
+export default function StarshipsLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{ title: "Starships" }}
+      />
+      <Stack.Screen
+        name="[id]"
+        options={{
+          presentation: "modal",
+          title: "Starship Details",
+        }}
+      />
+    </Stack>
+  );
+}
+```
+
+- [ ] Create similar layouts for `pilots`, `planets`, and `plus` tabs.
+
+## 👽 Bonus
+
+- [ ] Add a badge on the "Plus" tab icon showing a notification count.
+- [ ] Customize the tab bar style with a custom background color and shadow.
+- [ ] Hide the tab bar on detail screens using `tabBarStyle: { display: 'none' }` in screen options.
diff --git a/challenges/expo-router/05.md b/challenges/expo-router/05.md
new file mode 100644
index 00000000..dbe7356b
--- /dev/null
+++ b/challenges/expo-router/05.md
@@ -0,0 +1,147 @@
+# Auth Persistence & Splash Screen
+
+## 📡 What you will learn
+
+- Persist authentication state with `expo-secure-store`.
+- Handle splash screen during auth state loading.
+- Test protected routes end-to-end.
+
+## 👾 Before we start the exercise
+
+- Make sure you have completed [Exercise 4](./04.md) with the Tab Navigator.
+- Check the [Splash Screen documentation](https://docs.expo.dev/router/reference/splash-screen/).
+- Check the [expo-secure-store documentation](https://docs.expo.dev/versions/latest/sdk/securestore/).
+
+## 👨‍🚀 Exercise 5
+
+### Persist authentication with expo-secure-store
+
+Right now, when you refresh the app, the user is logged out. Let's persist the authentication state using `expo-secure-store`.
+
+- [ ] Install `expo-secure-store`:
+
+```bash
+npx expo install expo-secure-store
+```
+
+- [ ] Update `src/context/AuthContext.tsx` to persist the user token:
+
+```javascript
+// src/context/AuthContext.tsx
+import { createContext, useContext, useState, ReactNode, useEffect } from "react";
+import * as SecureStore from "expo-secure-store";
+
+type AuthContextType = {
+  user: boolean;
+  isLoading: boolean;
+  signIn: () => Promise<void>;
+  signOut: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const signIn = async () => {
+    await SecureStore.setItemAsync("userToken", "authenticated");
+    setUser(true);
+  };
+
+  const signOut = async () => {
+    await SecureStore.deleteItemAsync("userToken");
+    setUser(false);
+  };
+
+  // Check for existing token on app load
+  useEffect(() => {
+    const checkToken = async () => {
+      const token = await SecureStore.getItemAsync("userToken");
+      setUser(!!token);
+      setIsLoading(false);
+    };
+    checkToken();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, signIn, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+```
+
+### Add a splash screen during auth check
+
+While the app is checking the authentication state, we want to show a splash screen instead of a blank screen or flickering.
+
+- [ ] Update `app/_layout.tsx` to handle the splash screen:
+
+```javascript
+// app/_layout.tsx
+import { Slot, SplashScreen } from "expo-router";
+import { useEffect } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { PaperProvider } from "react-native-paper";
+import { AuthProvider, useAuth } from "../src/context/AuthContext";
+import { theme } from "../src/theme/theme";
+
+const queryClient = new QueryClient();
+
+// Prevent the splash screen from auto-hiding
+SplashScreen.preventAutoHideAsync();
+
+function RootLayoutNav() {
+  const { isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading) {
+      SplashScreen.hideAsync();
+    }
+  }, [isLoading]);
+
+  if (isLoading) {
+    return null;
+  }
+
+  return <Slot />;
+}
+
+export default function RootLayout() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PaperProvider theme={theme}>
+        <AuthProvider>
+          <RootLayoutNav />
+        </AuthProvider>
+      </PaperProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+**🔭 Hint:** We need a separate `RootLayoutNav` component inside the `AuthProvider` to access the `useAuth` hook.
+
+### Test the protected routes
+
+- [ ] Verify these scenarios work correctly:
+
+1. **Unauthenticated user** visits `/starships` → redirected to `/`
+2. **Unauthenticated user** visits `/pilots` → redirected to `/`
+3. **Authenticated user** visits `/` → redirected to `/starships`
+4. **Authenticated user** signs out → redirected to `/`
+5. **Refresh the app** → stays logged in (with persist)
+
+## 👽 Bonus
+
+- [ ] Add biometric authentication (Face ID / Touch ID) using `expo-local-authentication`.
+- [ ] Store the user's email in SecureStore and pre-fill the login form on next visit.
diff --git a/challenges/react-navigation/04.md b/challenges/react-navigation/04.md
deleted file mode 100644
index 5d21bfd7..00000000
--- a/challenges/react-navigation/04.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Custom navigation design
-
-## 📡 What you will learn
-
-- Custom Header with `react-navigation`
-
-## 👾 Before we start the exercise
-
-- [ ] Have a look on how implement [custom app bar from `react-native-paper`](https://callstack.github.io/react-native-paper/docs/guides/react-navigation)
-
-## 👨‍🚀 Exercise 4
-
-- [ ] Customize Stack's header by passing custom component `CustomNavigationBar`
-- [ ] Implement `CustomNavigationBar` using `AppBar` component
-- [ ] Pass navigation props to `CustomNavigationBar`
-- [ ] Check if navigation has previous state