diff --git a/js/mobile/app.config.ts b/js/mobile/app.config.ts
index cb8009b..2c99236 100644
--- a/js/mobile/app.config.ts
+++ b/js/mobile/app.config.ts
@@ -9,7 +9,7 @@ const config: ExpoConfig = {
   orientation: "portrait",
   icon: "./assets/icon.png",
   scheme: "flowy",
-  userInterfaceStyle: "automatic",
+  userInterfaceStyle: "dark",
   newArchEnabled: true,
   splash: {
     image: "./assets/icon.png",
diff --git a/js/mobile/src/App.tsx b/js/mobile/src/App.tsx
index f932e26..23be821 100644
--- a/js/mobile/src/App.tsx
+++ b/js/mobile/src/App.tsx
@@ -31,7 +31,7 @@ export default function App() {
               <RootNavigator />
             </NavigationContainer>
             <Toaster />
-            <StatusBar style="auto" />
+            <StatusBar style="light" />
           </SafeAreaProvider>
         </PusherProvider>
       </QueryClientProvider>
diff --git a/js/mobile/src/components/FlowyLogo.tsx b/js/mobile/src/components/FlowyLogo.tsx
new file mode 100644
index 0000000..148ce89
--- /dev/null
+++ b/js/mobile/src/components/FlowyLogo.tsx
@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+
+type Props = {
+  height?: number;
+  color?: string;
+};
+
+const ASPECT_RATIO = 89 / 18;
+
+export function FlowyLogo({ height = 18, color = "#828282" }: Props) {
+  const width = height * ASPECT_RATIO;
+  return (
+    <Svg width={width} height={height} viewBox="0 0 89 18" fill="none">
+      <Path
+        d="M11.788 7.788C12.018 7.788 12.2097 7.87233 12.363 8.041C12.5317 8.19433 12.616 8.386 12.616 8.616V10.318C12.616 10.5327 12.5317 10.7243 12.363 10.893C12.2097 11.0463 12.018 11.123 11.788 11.123H4.221V17.011C4.221 17.2257 4.14433 17.4173 3.991 17.586C3.83767 17.7393 3.646 17.816 3.416 17.816H1.668C1.45333 17.816 1.26167 17.7393 1.093 17.586C0.939667 17.4173 0.863 17.2257 0.863 17.011V8.616C0.863 8.386 0.939667 8.19433 1.093 8.041C1.26167 7.87233 1.45333 7.788 1.668 7.788H11.788ZM12.823 0.749999C13.0377 0.749999 13.2217 0.834332 13.375 1.003C13.5437 1.15633 13.628 1.34033 13.628 1.555V3.234C13.628 3.464 13.5437 3.66333 13.375 3.832C13.2217 3.98533 13.0377 4.062 12.823 4.062H1.668C1.45333 4.062 1.26167 3.98533 1.093 3.832C0.939667 3.66333 0.863 3.464 0.863 3.234V1.555C0.863 1.34033 0.939667 1.15633 1.093 1.003C1.26167 0.834332 1.45333 0.749999 1.668 0.749999H12.823ZM18.5996 0.749999C18.8143 0.749999 18.9983 0.834332 19.1516 1.003C19.3203 1.15633 19.4046 1.34033 19.4046 1.555V16.965C19.4046 17.1797 19.3203 17.3713 19.1516 17.54C18.9983 17.6933 18.8143 17.77 18.5996 17.77H16.8516C16.6369 17.77 16.4453 17.6933 16.2766 17.54C16.1233 17.3713 16.0466 17.1797 16.0466 16.965V1.555C16.0466 1.34033 16.1233 1.15633 16.2766 1.003C16.4453 0.834332 16.6369 0.749999 16.8516 0.749999H18.5996ZM26.9946 14.481C27.2246 14.481 27.4163 14.5653 27.5696 14.734C27.7229 14.8873 27.7996 15.0713 27.7996 15.286V16.965C27.7996 17.1797 27.7229 17.3713 27.5696 17.54C27.4163 17.6933 27.2246 17.77 26.9946 17.77H21.6356C21.4056 17.77 21.2139 17.6933 21.0606 17.54C20.9073 17.3713 20.8306 17.1797 20.8306 16.965V15.286C20.8306 15.0713 20.9073 14.8873 21.0606 14.734C21.2139 14.5653 21.4056 14.481 21.6356 14.481H26.9946ZM36.7098 0.933999C36.8938 1.10267 36.9858 1.30967 36.9858 1.555V3.28C36.9858 3.70933 36.7711 3.97767 36.3418 4.085C35.3604 4.28433 34.5248 4.752 33.8348 5.488C32.8994 6.46933 32.4318 7.74967 32.4318 9.329C32.4318 10.893 32.8994 12.1733 33.8348 13.17C34.5248 13.8907 35.3604 14.3507 36.3418 14.55C36.7711 14.6573 36.9858 14.9257 36.9858 15.355V17.08C36.9858 17.3407 36.8938 17.5477 36.7098 17.701C36.5411 17.8237 36.3648 17.885 36.1808 17.885H36.0428C34.2641 17.5937 32.7384 16.7887 31.4658 15.47C29.8711 13.8293 29.0738 11.7823 29.0738 9.329C29.0738 6.891 29.8711 4.83633 31.4658 3.165C32.7078 1.877 34.2334 1.07967 36.0428 0.773C36.2881 0.726999 36.5104 0.780666 36.7098 0.933999ZM43.9318 3.165C45.5264 4.83633 46.3238 6.891 46.3238 9.329C46.3238 11.7823 45.5264 13.8293 43.9318 15.47C43.3031 16.114 42.6054 16.643 41.8388 17.057C41.0874 17.4557 40.2594 17.7317 39.3548 17.885H39.2168C39.0328 17.885 38.8564 17.8237 38.6878 17.701C38.5038 17.5477 38.4118 17.3407 38.4118 17.08V15.355C38.4118 14.9257 38.6264 14.6573 39.0558 14.55C40.0371 14.3507 40.8728 13.8907 41.5628 13.17C42.4981 12.1733 42.9658 10.893 42.9658 9.329C42.9658 7.74967 42.4981 6.46933 41.5628 5.488C40.8728 4.752 40.0371 4.28433 39.0558 4.085C38.6264 3.97767 38.4118 3.70933 38.4118 3.28V1.555C38.4118 1.30967 38.5038 1.10267 38.6878 0.933999C38.8871 0.780666 39.1094 0.726999 39.3548 0.773C41.1641 1.07967 42.6898 1.877 43.9318 3.165ZM71.0516 1.095C71.205 1.30967 71.2433 1.54733 71.1666 1.808L66.3136 17.379C66.2676 17.5477 66.168 17.6857 66.0146 17.793C65.8766 17.9003 65.7156 17.954 65.5316 17.954H63.5306C63.362 17.954 63.201 17.908 63.0476 17.816C62.9096 17.7087 62.8176 17.5707 62.7716 17.402L59.3216 6.73L55.8946 17.402C55.8333 17.5707 55.7336 17.7087 55.5956 17.816C55.4576 17.908 55.2966 17.954 55.1126 17.954H53.1116C52.8356 17.954 52.6133 17.8467 52.4446 17.632C52.2913 17.3713 52.2606 17.126 52.3526 16.896L57.5506 1.302C57.5966 1.13333 57.6886 1.003 57.8266 0.910999C57.98 0.803666 58.141 0.749999 58.3096 0.749999H60.3336C60.7323 0.749999 60.993 0.941666 61.1156 1.325L64.5196 11.905L67.7396 1.325C67.801 1.15633 67.9006 1.01833 68.0386 0.910999C68.192 0.803666 68.353 0.749999 68.5216 0.749999H70.3846C70.6606 0.749999 70.883 0.864999 71.0516 1.095ZM52.2146 5.626C52.3066 5.88667 52.2683 6.132 52.0996 6.362C51.931 6.57667 51.7086 6.684 51.4326 6.684H49.6156C49.4316 6.684 49.263 6.63033 49.1096 6.523C48.9716 6.41567 48.8796 6.27767 48.8336 6.109L47.4996 1.808C47.4076 1.54733 47.446 1.30967 47.6146 1.095C47.768 0.864999 47.9826 0.749999 48.2586 0.749999H50.1216C50.3056 0.749999 50.4666 0.803666 50.6046 0.910999C50.758 1.01833 50.8576 1.15633 50.9036 1.325L52.2146 5.626ZM87.7671 1.187C87.9357 1.47833 87.9204 1.762 87.7211 2.038L81.3501 11.238V17.149C81.3501 17.3637 81.2657 17.5553 81.0971 17.724C80.9437 17.8773 80.7597 17.954 80.5451 17.954H78.7741C78.5441 17.954 78.3447 17.8773 78.1761 17.724C78.0227 17.5553 77.9461 17.3637 77.9461 17.149V10.41C77.9461 10.272 77.9997 10.1187 78.1071 9.95L84.2481 1.095C84.4014 0.864999 84.6237 0.749999 84.9151 0.749999H87.0541C87.3761 0.749999 87.6137 0.895666 87.7671 1.187ZM78.0841 6.247C77.9307 6.53833 77.6931 6.684 77.3711 6.684H75.2321C74.9561 6.684 74.7261 6.569 74.5421 6.339L71.5521 2.038C71.3834 1.762 71.3681 1.47833 71.5061 1.187C71.6441 0.895666 71.8817 0.749999 72.2191 0.749999H74.3811C74.6417 0.749999 74.8641 0.864999 75.0481 1.095L78.0381 5.396C78.2067 5.672 78.2221 5.95567 78.0841 6.247Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
diff --git a/js/mobile/src/components/ListSeparator.tsx b/js/mobile/src/components/ListSeparator.tsx
new file mode 100644
index 0000000..e65d57e
--- /dev/null
+++ b/js/mobile/src/components/ListSeparator.tsx
@@ -0,0 +1,10 @@
+import { View } from "react-native";
+
+/**
+ * Inset hairline separator for edge-to-edge list rows. Pass to a FlatList
+ * via `ItemSeparatorComponent` so it renders only between rows, not after
+ * the last one. Mirrors desktop's <Separator className="mx-4" /> pattern.
+ */
+export function ListSeparator() {
+  return <View className="bg-border mx-4 h-px" />;
+}
diff --git a/js/mobile/src/features/networks/NetworkListScreen.tsx b/js/mobile/src/features/networks/NetworkListScreen.tsx
index 9a824b6..4efb26a 100644
--- a/js/mobile/src/features/networks/NetworkListScreen.tsx
+++ b/js/mobile/src/features/networks/NetworkListScreen.tsx
@@ -13,6 +13,8 @@ import { useNetworks } from "@/hooks/use-networks";
 import { useAuthStore } from "@/stores/auth-store";
 import { toUserMessage } from "@/lib/errors";
 import type { RootStackScreenProps } from "@/navigation/types";
+import { FlowyLogo } from "@/components/FlowyLogo";
+import { ListSeparator } from "@/components/ListSeparator";
 import { Drawer } from "./Drawer";
 
 export function NetworkListScreen({
@@ -48,7 +50,7 @@ export function NetworkListScreen({
             {initials}
           </Text>
         </Pressable>
-        <Text className="text-foreground text-base font-semibold">Flowy</Text>
+        <FlowyLogo />
         <View className="w-9" />
       </View>
 
@@ -71,10 +73,10 @@ export function NetworkListScreen({
         <FlatList
           data={data}
           keyExtractor={(item) => item.id}
-          contentContainerClassName="p-4 gap-2"
           refreshControl={
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           }
+          ItemSeparatorComponent={ListSeparator}
           renderItem={({ item }) => (
             <NetworkCard
               network={item}
@@ -106,10 +108,10 @@ function NetworkCard({
   return (
     <Pressable
       onPress={onPress}
-      className="bg-card border-border active:bg-accent rounded-lg border px-4 py-4 flex-row items-center justify-between"
+      className="active:bg-accent flex-row items-center justify-between px-4 py-4"
     >
       <View className="flex-1">
-        <Text className="text-card-foreground text-base font-semibold">
+        <Text className="text-foreground text-base font-semibold">
           {network.name}
         </Text>
         <Text className="text-muted-foreground text-sm">
diff --git a/js/mobile/src/features/streams/StreamCard.tsx b/js/mobile/src/features/streams/StreamCard.tsx
index 782d979..5780450 100644
--- a/js/mobile/src/features/streams/StreamCard.tsx
+++ b/js/mobile/src/features/streams/StreamCard.tsx
@@ -96,10 +96,7 @@ export const StreamCard = memo(function StreamCard({
     <Pressable
       onPress={onPress}
       android_ripple={{ color: "rgba(0,0,0,0.05)" }}
-      className={cn(
-        "bg-card border-b px-3.5 py-3 flex-row items-center gap-3 active:bg-accent",
-        isUnseen ? "border-primary" : "border-border",
-      )}
+      className="bg-card flex-row items-center gap-3 px-4 py-3 active:bg-accent"
     >
       <View
         className={cn(
diff --git a/js/mobile/src/features/streams/StreamListScreen.tsx b/js/mobile/src/features/streams/StreamListScreen.tsx
index 2f64a9f..4043059 100644
--- a/js/mobile/src/features/streams/StreamListScreen.tsx
+++ b/js/mobile/src/features/streams/StreamListScreen.tsx
@@ -6,6 +6,7 @@ import {
   View,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { ListSeparator } from "@/components/ListSeparator";
 import { toUserMessage } from "@/lib/errors";
 import { particlePath } from "@/lib/particle-path";
 import { useNetwork } from "@/hooks/use-networks";
@@ -43,7 +44,7 @@ export function StreamListScreen({
         <FlatList
           data={streams}
           keyExtractor={(s) => s.id}
-          contentContainerClassName=""
+          ItemSeparatorComponent={ListSeparator}
           renderItem={({ item }) => (
             <StreamCard
               particle={item}
diff --git a/js/mobile/tailwind.config.js b/js/mobile/tailwind.config.js
index e39e396..a4516ff 100644
--- a/js/mobile/tailwind.config.js
+++ b/js/mobile/tailwind.config.js
@@ -1,45 +1,44 @@
 /** @type {import('tailwindcss').Config} */
-// Tokens mirror js/desktop/src/styles/globals.css. Desktop authors values in
-// OKLCH; React Native's color parser is not guaranteed to handle oklch(), so
-// we ship hex equivalents here and keep the OKLCH source in comments.
+// Tokens mirror js/desktop/src/styles/globals.css `.dark` palette. Desktop
+// authors values in OKLCH; React Native's color parser is not guaranteed to
+// handle oklch(), so we ship hex/rgba equivalents here and keep the OKLCH
+// source in comments.
 //
-// Names match desktop 1:1 — components written against `bg-background`,
-// `text-foreground`, etc. behave identically.
+// Mobile is dark-only by design — names match desktop 1:1 so components
+// written against `bg-background`, `text-foreground`, etc. behave identically
+// to the desktop app in dark mode.
 module.exports = {
   content: ["./index.ts", "./src/**/*.{ts,tsx}"],
   presets: [require("nativewind/preset")],
-  darkMode: "class",
   theme: {
     extend: {
       colors: {
-        // ---- Light tokens (desktop :root) ----
-        background: { DEFAULT: "#ffffff", dark: "#252525" }, // oklch(1 0 0) / oklch(0.145 0 0)
-        foreground: { DEFAULT: "#252525", dark: "#fafafa" }, // oklch(0.145 0 0) / oklch(0.985 0 0)
-        card: { DEFAULT: "#ffffff", dark: "#363636" }, // oklch(1 0 0) / oklch(0.205 0 0)
-        "card-foreground": { DEFAULT: "#252525", dark: "#fafafa" },
-        popover: { DEFAULT: "#ffffff", dark: "#363636" },
-        "popover-foreground": { DEFAULT: "#252525", dark: "#fafafa" },
-        primary: { DEFAULT: "#363636", dark: "#ebebeb" }, // oklch(0.205 0 0) / oklch(0.922 0 0)
-        "primary-foreground": { DEFAULT: "#fafafa", dark: "#363636" },
-        secondary: { DEFAULT: "#f4f4f4", dark: "#454545" }, // oklch(0.97 0 0) / oklch(0.269 0 0)
-        "secondary-foreground": { DEFAULT: "#363636", dark: "#fafafa" },
-        muted: { DEFAULT: "#f4f4f4", dark: "#454545" },
-        "muted-foreground": { DEFAULT: "#878787", dark: "#a6a6a6" }, // oklch(0.556 0 0) / oklch(0.708 0 0)
-        accent: { DEFAULT: "#f4f4f4", dark: "#454545" },
-        "accent-foreground": { DEFAULT: "#363636", dark: "#fafafa" },
-        destructive: { DEFAULT: "#dc2626", dark: "#ef4444" }, // oklch(0.577 0.245 27.325) / oklch(0.704 0.191 22.216)
-        border: { DEFAULT: "#dcdcdc", dark: "rgba(255,255,255,0.1)" },
-        input: { DEFAULT: "#dcdcdc", dark: "rgba(255,255,255,0.15)" },
-        ring: { DEFAULT: "#a6a6a6", dark: "#878787" }, // oklch(0.708 0 0) / oklch(0.556 0 0)
-        // Sidebar (drawer) tokens — desktop also defines these
-        sidebar: { DEFAULT: "#fafafa", dark: "#363636" },
-        "sidebar-foreground": { DEFAULT: "#252525", dark: "#fafafa" },
-        "sidebar-primary": { DEFAULT: "#363636", dark: "#6366f1" }, // chart-1 dark = oklch(0.488 0.243 264.376)
-        "sidebar-primary-foreground": { DEFAULT: "#fafafa", dark: "#fafafa" },
-        "sidebar-accent": { DEFAULT: "#f4f4f4", dark: "#454545" },
-        "sidebar-accent-foreground": { DEFAULT: "#363636", dark: "#fafafa" },
-        "sidebar-border": { DEFAULT: "#dcdcdc", dark: "rgba(255,255,255,0.1)" },
-        "sidebar-ring": { DEFAULT: "#a6a6a6", dark: "#878787" },
+        background: "#252525", // oklch(0.145 0 0)
+        foreground: "#fafafa", // oklch(0.985 0 0)
+        card: "#363636", // oklch(0.205 0 0)
+        "card-foreground": "#fafafa",
+        popover: "#363636",
+        "popover-foreground": "#fafafa",
+        primary: "#ebebeb", // oklch(0.922 0 0)
+        "primary-foreground": "#363636",
+        secondary: "#454545", // oklch(0.269 0 0)
+        "secondary-foreground": "#fafafa",
+        muted: "#454545",
+        "muted-foreground": "#a6a6a6", // oklch(0.708 0 0)
+        accent: "#454545",
+        "accent-foreground": "#fafafa",
+        destructive: "#ef4444", // oklch(0.704 0.191 22.216)
+        border: "rgba(255,255,255,0.1)", // oklch(1 0 0 / 10%)
+        input: "rgba(255,255,255,0.15)", // oklch(1 0 0 / 15%)
+        ring: "#878787", // oklch(0.556 0 0)
+        sidebar: "#363636",
+        "sidebar-foreground": "#fafafa",
+        "sidebar-primary": "#6366f1", // chart-1 dark = oklch(0.488 0.243 264.376)
+        "sidebar-primary-foreground": "#fafafa",
+        "sidebar-accent": "#454545",
+        "sidebar-accent-foreground": "#fafafa",
+        "sidebar-border": "rgba(255,255,255,0.1)",
+        "sidebar-ring": "#878787",
       },
       borderRadius: {
         lg: "10px", // --radius: 0.625rem