diff --git a/js/app/components/live-dashboard/bento-grid.tsx b/js/app/components/live-dashboard/bento-grid.tsx
index d70bbc11..dcf2fa30 100644
--- a/js/app/components/live-dashboard/bento-grid.tsx
+++ b/js/app/components/live-dashboard/bento-grid.tsx
@@ -3,6 +3,7 @@ import {
   borders,
   Button,
   Dashboard,
+  useLivestream,
   useLivestreamStore,
   usePlayerStore,
   useProfile,
@@ -81,6 +82,7 @@ export default function BentoGrid({ isLive, videoRef }: BentoGridProps) {
   const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
   const ingestStarted = usePlayerStore((x) => x.ingestStarted);
   const emojiData = useEmojiData();
+  const livestream = useLivestream();
 
   // Calculate derived values
   const isConnected = ingestConnectionState === "connected";
@@ -112,8 +114,10 @@ export default function BentoGrid({ isLive, videoRef }: BentoGridProps) {
     | "excellent"
     | "good"
     | "poor"
-    | "offline" => {
+    | "offline"
+    | "pre-live" => {
     if (!isLive) return "offline";
+    if (!livestream) return "pre-live";
     switch (segmentTiming.connectionQuality) {
       case "good":
         return "excellent";
@@ -124,7 +128,7 @@ export default function BentoGrid({ isLive, videoRef }: BentoGridProps) {
       default:
         return "offline";
     }
-  }, [isLive, segmentTiming.connectionQuality]);
+  }, [isLive, livestream, segmentTiming.connectionQuality]);
 
   // Calculate messages per minute
   const messagesPerMinute = useMemo((): number => {
diff --git a/js/app/components/live-dashboard/stream-monitor.tsx b/js/app/components/live-dashboard/stream-monitor.tsx
index 301963ec..f71a40c2 100644
--- a/js/app/components/live-dashboard/stream-monitor.tsx
+++ b/js/app/components/live-dashboard/stream-monitor.tsx
@@ -61,6 +61,7 @@ export default function StreamMonitor({
   // Connection quality indicator
   const getConnectionIcon = () => {
     if (!isLive) return null;
+    if (!ls) return <Wifi size={16} color="#3b82f6" />;
 
     switch (segmentTiming.connectionQuality) {
       case "good":
@@ -76,6 +77,7 @@ export default function StreamMonitor({
 
   const getConnectionColor = () => {
     if (!isLive) return "red";
+    if (!ls) return "blue";
 
     switch (segmentTiming.connectionQuality) {
       case "good":
diff --git a/js/components/src/components/dashboard/header.tsx b/js/components/src/components/dashboard/header.tsx
index b5c74e68..f10710eb 100644
--- a/js/components/src/components/dashboard/header.tsx
+++ b/js/components/src/components/dashboard/header.tsx
@@ -36,7 +36,7 @@ function MetricItem({ icon: Icon, label, value, status }: MetricItemProps) {
 }
 
 interface StatusIndicatorProps {
-  status: "excellent" | "good" | "poor" | "offline";
+  status: "excellent" | "good" | "poor" | "offline" | "pre-live";
   isLive: boolean;
 }
 
@@ -44,6 +44,8 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
   const getStatusColor = () => {
     if (!isLive) return bg.gray[500];
     switch (status) {
+      case "pre-live":
+        return bg.blue[500];
       case "excellent":
         return bg.green[500];
       case "good":
@@ -60,6 +62,8 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
   const getStatusText = () => {
     if (!isLive) return "OFFLINE";
     switch (status) {
+      case "pre-live":
+        return "NOT LIVE";
       case "excellent":
         return "EXCELLENT";
       case "good":
@@ -101,7 +105,7 @@ interface HeaderProps {
   uptime?: string;
   bitrate?: string;
   timeBetweenSegments?: number;
-  connectionStatus?: "excellent" | "good" | "poor" | "offline";
+  connectionStatus?: "excellent" | "good" | "poor" | "offline" | "pre-live";
   problemsCount?: number;
   onProblemsPress?: () => void;
 }
diff --git a/js/components/src/components/dashboard/information-widget.tsx b/js/components/src/components/dashboard/information-widget.tsx
index 07321f6b..bd299e81 100644
--- a/js/components/src/components/dashboard/information-widget.tsx
+++ b/js/components/src/components/dashboard/information-widget.tsx
@@ -13,11 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native";
 import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg";
 import { useAQState } from "../../hooks";
-import {
-  useLivestreamStore,
-  useSegment,
-  useViewers,
-} from "../../livestream-store";
+import { useLivestream, useSegment, useViewers } from "../../livestream-store";
 import * as zero from "../../ui";
 import { InfoBox, InfoRow } from "../ui";
 
@@ -50,7 +46,7 @@ export default function InformationWidget({
   const isCompactHeight = layoutMeasured && componentHeight < 350;
 
   const seg = useSegment();
-  const livestream = useLivestreamStore((x) => x.livestream);
+  const livestream = useLivestream();
   const viewers = useViewers();
 
   const getBitrate = useCallback((): number => {
@@ -173,8 +169,9 @@ export default function InformationWidget({
                 width: 8,
                 height: 8,
                 borderRadius: 4,
-                backgroundColor:
-                  getConnectionStatus() === "good"
+                backgroundColor: !livestream
+                  ? "#3b82f6"
+                  : getConnectionStatus() === "good"
                     ? "#22c55e"
                     : getConnectionStatus() === "warning"
                       ? "#f59e0b"
@@ -182,6 +179,11 @@ export default function InformationWidget({
               },
             ]}
           />
+          {!livestream && (
+            <Text style={[text.blue[400], { fontSize: 13, fontWeight: "600" }]}>
+              (not live)
+            </Text>
+          )}
         </View>
         <TouchableOpacity
           onPress={() => setShowViewers(!showViewers)}
@@ -315,6 +317,7 @@ export default function InformationWidget({
                 data={bitrateHistory}
                 width={componentWidth - 40}
                 height={120}
+                color={livestream ? "#22c55e" : "#3b82f6"}
               />
             </View>
           )}
@@ -395,6 +398,7 @@ export default function InformationWidget({
                 data={bitrateHistory}
                 width={componentWidth - 40}
                 height={isCompactHeight ? 80 : 120}
+                color={livestream ? "#22c55e" : "#3b82f6"}
               />
             </View>
           )}
@@ -432,10 +436,12 @@ function BitrateChart({
   data,
   width,
   height,
+  color = "#22c55e",
 }: {
   data: number[];
   width: number;
   height: number;
+  color?: string;
 }) {
   const maxDataValue = Math.max(...data, 1);
   const minDataValue = Math.min(...data);
@@ -515,7 +521,7 @@ function BitrateChart({
         </SvgText>
         <Path
           d={pathData}
-          stroke="#22c55e"
+          stroke={color}
           strokeWidth="2"
           fill="none"
           strokeLinecap="round"