diff --git a/functions/control/main.py b/functions/control/main.py
index 0b2abdb..52cbea2 100644
--- a/functions/control/main.py
+++ b/functions/control/main.py
@@ -11,7 +11,8 @@ DEFAULT_STATE = {
     },
     "image_popup": {
         "showing": False,
-        "image_url": ""
+        "image_url": "",
+        "caption": ""
     }
 }
 
@@ -54,6 +55,7 @@ def main(args):
             return {"status": "success"}
         elif route == "push_image":
             image_b64 = body.get("image_b64", "")
+            caption = body.get("caption", "")
             image_bytes = base64.b64decode(image_b64)
             file_name = f"tv-image-{int(time.time() * 1000)}.jpg"
             MINIO_CLIENT.put_object(
@@ -62,6 +64,7 @@ def main(args):
             public_url = f"https://content2.reversed.dev/{BUCKET}/{file_name}"
             current = _read_state()
             current["image_popup"]["image_url"] = public_url
+            current["image_popup"]["caption"] = caption
             current["image_popup"]["showing"] = True
             _write_state(current)
             return {"status": "success", "image_url": public_url}
diff --git a/mobile/App.tsx b/mobile/App.tsx
index 2240586..6381c94 100644
--- a/mobile/App.tsx
+++ b/mobile/App.tsx
@@ -2,14 +2,20 @@ import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View } from "react-native";
 import { BottomNav } from "./src/components/BottomNav";
 import { NotFoundPage } from "./src/pages/NotFound";
+import { ImagePage } from "./src/pages/image";
 import { IndexPage } from "./src/pages/index";
+import { TextPage } from "./src/pages/text";
 import { Route, RouterProvider, useRouter } from "./src/router";
 interface Tab {
   label: string;
   route: Route;
   page: React.ComponentType;
 }
-const TABS: Tab[] = [{ label: "Home", route: "home", page: IndexPage }];
+const TABS: Tab[] = [
+  { label: "Home", route: "home", page: IndexPage },
+  { label: "Text", route: "text", page: TextPage },
+  { label: "Image", route: "image", page: ImagePage },
+];
 export { TABS, type Tab };
 
 function Screen() {
@@ -46,3 +52,39 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
   },
 });
+
+
+function Screen() {
+  const { route } = useRouter();
+  return (
+    <>
+      {TABS.map((tab) => {
+        if (tab.route === route) {
+          const Page = tab.page;
+          return <Page key={tab.route} />;
+        }
+        return null;
+      })}
+      {!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <RouterProvider>
+      <View style={styles.container}>
+        <StatusBar style="auto" />
+        <Screen />
+        <BottomNav />
+      </View>
+    </RouterProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+});
diff --git a/mobile/src/pages/image.tsx b/mobile/src/pages/image.tsx
new file mode 100644
index 0000000..c1e1081
--- /dev/null
+++ b/mobile/src/pages/image.tsx
@@ -0,0 +1,145 @@
+import * as ImagePicker from "expo-image-picker";
+import { useState } from "react";
+import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";
+
+const BASE_URL =
+  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
+
+export function ImagePage() {
+  const [caption, setCaption] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const [previewUri, setPreviewUri] = useState<string | null>(null);
+
+  const handleTakePhoto = async () => {
+    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
+    if (!granted) {
+      alert("Camera permission is required to take photos.");
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      mediaTypes: "images",
+      quality: 1,
+      base64: true,
+    });
+
+    if (result.canceled) return;
+
+    const asset = result.assets[0];
+    setPreviewUri(asset.uri);
+    setUploading(true);
+
+    try {
+      const res = await fetch(`${BASE_URL}/push_image`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ image_b64: asset.base64, caption }),
+      });
+      const data = await res.json();
+      if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
+    } catch (error) {
+      console.error("Upload error:", error);
+      alert("Failed to upload image.");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDismiss = () => {
+    fetch(`${BASE_URL}/push_dismiss_image`, { method: "POST" })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.status !== "success") alert("Failed to dismiss image.");
+      })
+      .catch((error) => {
+        console.error("Error dismissing image:", error);
+        alert("Error dismissing image.");
+      });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Image Popup</Text>
+      <Text style={styles.subtitle}>Show a photo on the TV with an optional caption.</Text>
+
+      <View style={styles.field}>
+        <Text style={styles.label}>Caption (optional)</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Add a caption..."
+          value={caption}
+          onChangeText={setCaption}
+        />
+      </View>
+
+      {previewUri && (
+        <Image source={{ uri: previewUri }} style={styles.preview} />
+      )}
+
+      {uploading ? (
+        <ActivityIndicator size="large" style={{ marginTop: 8 }} />
+      ) : (
+        <View style={styles.actions}>
+          <View style={styles.actionBtn}>
+            <Button title="Take Photo & Show" onPress={handleTakePhoto} />
+          </View>
+          <View style={styles.actionBtn}>
+            <Button title="Dismiss" onPress={handleDismiss} color="#e55" />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: "#f9f9f9",
+    gap: 20,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: "700",
+    color: "#111",
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: -12,
+  },
+  field: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#555",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 10,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  preview: {
+    width: "100%",
+    height: 200,
+    borderRadius: 10,
+    resizeMode: "cover",
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 4,
+  },
+  actionBtn: {
+    flex: 1,
+  },
+});
diff --git a/mobile/src/pages/index.tsx b/mobile/src/pages/index.tsx
index 817fa95..acf4b79 100644
--- a/mobile/src/pages/index.tsx
+++ b/mobile/src/pages/index.tsx
@@ -1,118 +1,26 @@
-import * as ImagePicker from "expo-image-picker";
-import { useState } from "react";
-import { ActivityIndicator, Button, Image, StyleSheet, Text, TextInput, View } from "react-native";
-
-const BASE_URL =
-  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useRouter } from "../router";
 
 export function IndexPage() {
-  const [text, setText] = useState("");
-  const [uploading, setUploading] = useState(false);
-  const [previewUri, setPreviewUri] = useState<string | null>(null);
-
-  const handleSend = () => {
-    if (text.trim() === "") {
-      alert("Please enter some text before sending.");
-      return;
-    }
-
-    fetch(`${BASE_URL}/push_text`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text }),
-    })
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.status === "success") {
-          alert("Text sent successfully!");
-        } else {
-          alert("Failed to send text.");
-        }
-      })
-      .catch((error) => {
-        console.error("Error sending text:", error);
-        alert("Error sending text.");
-      });
-  };
-
-  const handlePullText = () => {
-    fetch(`${BASE_URL}/pull_text`)
-      .then((r) => r.json())
-      .then((data) => {
-        alert(data.text ?? "No text received.");
-      })
-      .catch((error) => {
-        console.error("Error pulling text:", error);
-        alert("Error pulling text.");
-      });
-  };
-
-  const handleTakePhoto = async () => {
-    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
-    if (!granted) {
-      alert("Camera permission is required to take photos.");
-      return;
-    }
-
-    const result = await ImagePicker.launchCameraAsync({
-      mediaTypes: "images",
-      quality: 0.8,
-      base64: true,
-    });
-
-    if (result.canceled) return;
-
-    const asset = result.assets[0];
-    setPreviewUri(asset.uri);
-    setUploading(true);
-
-    try {
-      // Send base64 image to server — server uploads to Minio and saves the URL
-      const res = await fetch(`${BASE_URL}/push_image`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ image_b64: asset.base64 }),
-      });
-      const data = await res.json();
-      if (data.status !== "success") throw new Error(data.message ?? "Upload failed");
-
-      alert("Image uploaded and sent to TV!");
-    } catch (error) {
-      console.error("Upload error:", error);
-      alert("Failed to upload image.");
-    } finally {
-      setUploading(false);
-    }
-  };
+  const { navigate } = useRouter();
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>TV Control</Text>
+      <Text style={styles.subtitle}>Choose what to send to the TV.</Text>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>Text</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="Type something..."
-          value={text}
-          onChangeText={setText}
-        />
-        <View style={styles.row}>
-          <Button title="Send Text" onPress={handleSend} />
-          <Button title="Pull Text" onPress={handlePullText} />
-        </View>
-      </View>
+      <View style={styles.cards}>
+        <TouchableOpacity style={styles.card} onPress={() => navigate("text")} activeOpacity={0.8}>
+          <Text style={styles.cardIcon}>💬</Text>
+          <Text style={styles.cardTitle}>Text Popup</Text>
+          <Text style={styles.cardDesc}>Display a message on the TV screen.</Text>
+        </TouchableOpacity>
 
-      <View style={styles.section}>
-        <Text style={styles.sectionLabel}>Image</Text>
-        {previewUri && (
-          <Image source={{ uri: previewUri }} style={styles.preview} />
-        )}
-        {uploading ? (
-          <ActivityIndicator size="large" style={{ marginTop: 12 }} />
-        ) : (
-          <Button title="Take Photo & Send to TV" onPress={handleTakePhoto} />
-        )}
+        <TouchableOpacity style={styles.card} onPress={() => navigate("image")} activeOpacity={0.8}>
+          <Text style={styles.cardIcon}>📷</Text>
+          <Text style={styles.cardTitle}>Image Popup</Text>
+          <Text style={styles.cardDesc}>Take a photo and show it on the TV.</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -121,44 +29,48 @@ export function IndexPage() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#f9f9f9",
     padding: 24,
-    gap: 24,
+    backgroundColor: "#f9f9f9",
+    gap: 20,
   },
   title: {
-    fontSize: 28,
+    fontSize: 30,
     fontWeight: "700",
-    marginBottom: 8,
+    color: "#111",
+    marginTop: 8,
   },
-  section: {
-    width: "100%",
-    gap: 8,
+  subtitle: {
+    fontSize: 15,
+    color: "#888",
+    marginTop: -12,
   },
-  sectionLabel: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#555",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
+  cards: {
+    gap: 16,
+    marginTop: 8,
   },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    padding: 10,
-    fontSize: 16,
+  card: {
     backgroundColor: "#fff",
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "#e8e8e8",
+    padding: 20,
+    gap: 6,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2,
   },
-  row: {
-    flexDirection: "row",
-    gap: 8,
+  cardIcon: {
+    fontSize: 28,
   },
-  preview: {
-    width: "100%",
-    height: 200,
-    borderRadius: 8,
-    resizeMode: "cover",
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#111",
   },
-});
\ No newline at end of file
+  cardDesc: {
+    fontSize: 14,
+    color: "#888",
+  },
+});
diff --git a/mobile/src/pages/text.tsx b/mobile/src/pages/text.tsx
new file mode 100644
index 0000000..de215be
--- /dev/null
+++ b/mobile/src/pages/text.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { Button, StyleSheet, Text, TextInput, View } from "react-native";
+
+const BASE_URL =
+  "https://shsf-api.reversed.dev/api/exec/15/1c44d8b5-4065-4a54-b259-748561021329";
+
+export function TextPage() {
+  const [title, setTitle] = useState("");
+
+  const handleShow = () => {
+    if (title.trim() === "") {
+      alert("Please enter some text before sending.");
+      return;
+    }
+
+    fetch(`${BASE_URL}/push_text`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.status !== "success") alert("Failed to send text.");
+      })
+      .catch((error) => {
+        console.error("Error sending text:", error);
+        alert("Error sending text.");
+      });
+  };
+
+  const handleDismiss = () => {
+    fetch(`${BASE_URL}/push_dismiss_text`, { method: "POST" })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.status !== "success") alert("Failed to dismiss text.");
+      })
+      .catch((error) => {
+        console.error("Error dismissing text:", error);
+        alert("Error dismissing text.");
+      });
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Text Popup</Text>
+      <Text style={styles.subtitle}>Display a text message on the TV.</Text>
+
+      <View style={styles.field}>
+        <Text style={styles.label}>Message</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Type something..."
+          value={title}
+          onChangeText={setTitle}
+          multiline
+        />
+      </View>
+
+      <View style={styles.actions}>
+        <View style={styles.actionBtn}>
+          <Button title="Show on TV" onPress={handleShow} />
+        </View>
+        <View style={styles.actionBtn}>
+          <Button title="Dismiss" onPress={handleDismiss} color="#e55" />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: "#f9f9f9",
+    gap: 20,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: "700",
+    color: "#111",
+    marginTop: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: -12,
+  },
+  field: {
+    gap: 6,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#555",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 10,
+    padding: 12,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    minHeight: 80,
+    textAlignVertical: "top",
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 4,
+  },
+  actionBtn: {
+    flex: 1,
+  },
+});
diff --git a/mobile/src/router.tsx b/mobile/src/router.tsx
index 02e5aed..5b6af77 100644
--- a/mobile/src/router.tsx
+++ b/mobile/src/router.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState } from "react";
 
-export type Route = "home" | "mystery";
+export type Route = "home" | "text" | "image";
 
 interface RouterContextValue {
   route: Route;
diff --git a/tv/src/App.tsx b/tv/src/App.tsx
index d37959e..7813d29 100644
--- a/tv/src/App.tsx
+++ b/tv/src/App.tsx
@@ -1,11 +1,22 @@
 import { useEffect, useState } from "react";
 
+interface TextState {
+  showing: boolean;
+  title: string;
+}
+
+interface ImagePopupState {
+  showing: boolean;
+  image_url: string;
+  caption: string;
+}
+
 function App() {
   const [screenStatus, setScreenStatus] = useState<
     "notfullscreen" | "fullscreen"
   >("notfullscreen");
-  const [text, setText] = useState("");
-  const [imageUrl, setImageUrl] = useState("");
+  const [textState, setTextState] = useState<TextState>({ showing: false, title: "" });
+  const [imagePopup, setImagePopup] = useState<ImagePopupState>({ showing: false, image_url: "", caption: "" });
 
   useEffect(() => {
     const handleFullscreenChange = () => {
@@ -31,16 +42,17 @@ function App() {
         )
           .then((response) => response.json())
           .then((data) => {
-            setText(data.state?.text ?? "");
-            setImageUrl(data.state?.image_url ?? "");
+            const state = data.state ?? {};
+            setTextState(state.text ?? { showing: false, title: "" });
+            setImagePopup(state.image_popup ?? { showing: false, image_url: "", caption: "" });
           })
           .catch((error) => {
             console.error("Error pulling state:", error);
           });
       };
 
-      handlePullState(); // Initial pull when entering fullscreen
-      const interval = setInterval(handlePullState, 5000); // Poll every 5 seconds
+      handlePullState();
+      const interval = setInterval(handlePullState, 5000);
 
       return () => clearInterval(interval);
     }
@@ -71,7 +83,7 @@ function App() {
               TV View
             </h1>
             <p className="text-gray-500 text-sm max-w-xs">
-              Enter fullscreen mode to enter fullscreen mode.
+              Enter fullscreen mode to start displaying content.
             </p>
           </div>
 
@@ -97,18 +109,41 @@ function App() {
           </button>
         </div>
       ) : (
-        <div className="flex flex-col items-center gap-6 text-center w-full h-full justify-center">
-          {imageUrl && (
-            <img
-              src={imageUrl}
-              alt="TV display"
-              className="max-w-full max-h-[70vh] rounded-2xl object-contain shadow-2xl"
-            />
+        <div className="w-screen h-screen relative">
+          {/* Text popup modal */}
+          {textState.showing && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+              <div className="bg-gray-900 border border-gray-700 rounded-3xl px-16 py-12 shadow-2xl max-w-3xl w-full mx-8">
+                <h1 className="text-6xl font-bold tracking-tight text-white text-center">
+                  {textState.title}
+                </h1>
+              </div>
+            </div>
           )}
-          {text && (
-            <h1 className="text-4xl font-bold tracking-tight text-white">
-              {text}
-            </h1>
+
+          {/* Image popup modal */}
+          {imagePopup.showing && imagePopup.image_url && (
+            <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/75 backdrop-blur-sm">
+              <div className="flex flex-col items-center gap-5 p-6 bg-gray-950/80 rounded-3xl border border-white/10 shadow-2xl max-w-[90vw] max-h-[92vh]">
+                {imagePopup.caption && (
+                  <h2 className="text-4xl font-bold text-white tracking-tight text-center">
+                    {imagePopup.caption}
+                  </h2>
+                )}
+                <img
+                  src={imagePopup.image_url}
+                  alt="TV display"
+                  className="max-w-full max-h-[78vh] rounded-2xl object-contain shadow-xl"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Background idle state */}
+          {!textState.showing && !imagePopup.showing && (
+            <div className="flex items-center justify-center w-full h-full">
+              <p className="text-gray-600 text-lg">Waiting for content...</p>
+            </div>
           )}
         </div>
       )}