diff --git a/js/app/components/mobile/badge-picker.tsx b/js/app/components/mobile/badge-picker.tsx
new file mode 100644
index 000000000..832d381cd
--- /dev/null
+++ b/js/app/components/mobile/badge-picker.tsx
@@ -0,0 +1,412 @@
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  formatHandleWithAt,
+  hexToRgba,
+  ResponsiveDropdownMenuContent,
+  Text,
+  useLivestream,
+  useToast,
+  zero,
+} from "@streamplace/components";
+import {
+  Badge,
+  BADGE_IMAGES,
+} from "@streamplace/components/src/components/chat/badge";
+import { borderRadius as radiusTokens } from "@streamplace/components/src/lib/theme/tokens";
+import { usePDSAgent } from "@streamplace/components/src/streamplace-store/xrpc";
+import { useNameColorPicker } from "components/name-color-picker/name-color-picker";
+import { Image } from "expo-image";
+import { SwatchBook } from "lucide-react-native";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useStore } from "store";
+import type { PlaceStreamBadgeDefs } from "streamplace";
+
+const { gap, layout } = zero;
+
+const HOT_COLORS = [
+  { r: 232, g: 121, b: 160 }, // rose
+  { r: 251, g: 113, b: 133 }, // coral
+  { r: 251, g: 146, b: 60 }, // orange
+  { r: 251, g: 191, b: 36 }, // amber
+  { r: 163, g: 230, b: 53 }, // lime
+  { r: 45, g: 212, b: 191 }, // teal
+  { r: 56, g: 189, b: 248 }, // sky
+  { r: 167, g: 139, b: 250 }, // lavender
+  { r: 244, g: 114, b: 182 }, // pink
+  { r: 253, g: 224, b: 71 }, // yellow
+  { r: 52, g: 211, b: 153 }, // emerald
+  { r: 96, g: 165, b: 250 }, // blue
+];
+
+export function BadgePicker() {
+  const agent = usePDSAgent();
+  const { theme } = zero.useTheme();
+  const toast = useToast();
+  const linfo = useLivestream();
+  const streamerDid = linfo?.author?.did;
+
+  const [loading, setLoading] = useState(false);
+  const [streamerSlot, setStreamerSlot] =
+    useState<PlaceStreamBadgeDefs.BadgeSlot | null>(null);
+  const [userSlot, setUserSlot] =
+    useState<PlaceStreamBadgeDefs.BadgeSlot | null>(null);
+  const [toggling, setToggling] = useState<string | null>(null);
+  const togglingRef = useRef<string | null>(null);
+
+  const activeBadge = streamerSlot?.selected ?? userSlot?.selected ?? null;
+
+  const load = useCallback(async () => {
+    if (!agent?.did) return;
+    try {
+      setLoading(true);
+      const res = await agent.place.stream.badge.getIssuedBadges({
+        streamer: streamerDid,
+      });
+      setStreamerSlot(res.data.streamer);
+      setUserSlot(res.data.user);
+    } catch (e: any) {
+      toast.show("Failed to load badges", e?.message, { variant: "error" });
+    } finally {
+      setLoading(false);
+    }
+  }, [agent, streamerDid]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleToggle = useCallback(
+    async (
+      badge: PlaceStreamBadgeDefs.BadgeIssuanceView,
+      slot: "streamer" | "global",
+    ) => {
+      if (!agent?.did || togglingRef.current) return;
+      togglingRef.current = badge.issuanceUri;
+      setToggling(badge.issuanceUri);
+
+      try {
+        let currentRecord: Record<string, any> = {
+          $type: "place.stream.chat.profile",
+        };
+        let swapCid: string | undefined;
+
+        try {
+          const getRes = await agent.com.atproto.repo.getRecord({
+            repo: agent.did,
+            collection: "place.stream.chat.profile",
+            rkey: "self",
+          });
+          currentRecord = getRes.data.value as Record<string, any>;
+          swapCid = getRes.data.cid;
+        } catch {
+          // no profile yet, will create
+        }
+
+        const currentBadges: Record<string, any> =
+          (currentRecord.badges as Record<string, any>) ?? {};
+        const isCurrentlySelected = badge.selected ?? false;
+        const ref = { uri: badge.issuanceUri, cid: badge.issuanceCid ?? "" };
+
+        let newBadges: Record<string, any>;
+        if (slot === "streamer") {
+          const currentStreamer: Array<{
+            streamer: string;
+            badge: { uri: string; cid: string };
+          }> = (currentBadges.streamer as any[]) ?? [];
+          newBadges = {
+            ...currentBadges,
+            streamer: isCurrentlySelected
+              ? currentStreamer.filter((s) => s.badge.uri !== badge.issuanceUri)
+              : [
+                  ...currentStreamer.filter((s) => s.streamer !== badge.issuer),
+                  { streamer: badge.issuer, badge: ref },
+                ],
+          };
+        } else {
+          newBadges = {
+            ...currentBadges,
+            global: isCurrentlySelected ? undefined : ref,
+          };
+        }
+
+        await agent.com.atproto.repo.putRecord({
+          repo: agent.did,
+          collection: "place.stream.chat.profile",
+          rkey: "self",
+          record: { ...currentRecord, badges: newBadges },
+          swapRecord: swapCid,
+        });
+
+        if (slot === "streamer") {
+          setStreamerSlot((prev) => {
+            if (!prev) return prev;
+            const available = prev.available.map((b) =>
+              b.issuanceUri === badge.issuanceUri
+                ? { ...b, selected: !isCurrentlySelected }
+                : b.issuer === badge.issuer
+                  ? { ...b, selected: false }
+                  : b,
+            );
+            return {
+              available,
+              selected: isCurrentlySelected
+                ? undefined
+                : available.find((b) => b.issuanceUri === badge.issuanceUri),
+            };
+          });
+        } else {
+          setUserSlot((prev) => {
+            if (!prev) return prev;
+            const available = prev.available.map((b) =>
+              b.issuanceUri === badge.issuanceUri
+                ? { ...b, selected: !isCurrentlySelected }
+                : { ...b, selected: false },
+            );
+            return {
+              available,
+              selected: isCurrentlySelected
+                ? undefined
+                : available.find((b) => b.issuanceUri === badge.issuanceUri),
+            };
+          });
+        }
+      } catch (e: any) {
+        toast.show("Failed to update badge", e?.message, { variant: "error" });
+      } finally {
+        togglingRef.current = null;
+        setToggling(null);
+      }
+    },
+    [agent],
+  );
+
+  const { currentColor, openModal, modal } = useNameColorPicker();
+  const createChatProfileRecord = useStore((s) => s.createChatProfileRecord);
+
+  if (!agent?.did) return null;
+
+  const hasStreamerBadges = (streamerSlot?.available?.length ?? 0) > 0;
+  const hasUserBadges = (userSlot?.available?.length ?? 0) > 0;
+  const streamerName = linfo?.author;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <BadgeTriggerButton badge={activeBadge} loading={loading} />
+        </DropdownMenuTrigger>
+        <ResponsiveDropdownMenuContent align="start">
+          <Text size="lg" style={[zero.pl[2], zero.pb[2], zero.pt[1]]}>
+            Your chat appearance
+          </Text>
+          {loading ? (
+            <View style={[layout.flex.center, { height: 60 }]}>
+              <ActivityIndicator color={theme.colors.primary} />
+            </View>
+          ) : hasStreamerBadges || hasUserBadges ? (
+            <>
+              {hasStreamerBadges && (
+                <DropdownMenuGroup
+                  title={`${streamerName ? formatHandleWithAt(streamerName) + " " : ""}badges`}
+                  description={`Shows up only in ${streamerName ? `${formatHandleWithAt(streamerName)}'s` : "this"} channel`}
+                >
+                  {streamerSlot!.available.map((badge) => (
+                    <BadgeCheckboxItem
+                      key={badge.issuanceUri}
+                      badge={badge}
+                      toggling={toggling === badge.issuanceUri}
+                      onToggle={() => handleToggle(badge, "streamer")}
+                    />
+                  ))}
+                </DropdownMenuGroup>
+              )}
+              {hasUserBadges && (
+                <DropdownMenuGroup
+                  title="Global badge"
+                  description="Shows up across all channels"
+                >
+                  {userSlot!.available.map((badge) => (
+                    <BadgeCheckboxItem
+                      key={badge.issuanceUri}
+                      badge={badge}
+                      toggling={toggling === badge.issuanceUri}
+                      onToggle={() => handleToggle(badge, "global")}
+                    />
+                  ))}
+                </DropdownMenuGroup>
+              )}
+            </>
+          ) : null}
+          <DropdownMenuGroup title="Name color">
+            <View
+              style={[
+                layout.flex.row,
+                { flexWrap: "wrap", gap: 8, padding: 6 },
+              ]}
+            >
+              {HOT_COLORS.map(({ r, g, b }) => {
+                const hex = `rgb(${r}, ${g}, ${b})`;
+                const isSelected = currentColor === hex;
+                return (
+                  <TouchableOpacity
+                    key={hex}
+                    onPress={() => createChatProfileRecord(r, g, b)}
+                    style={{
+                      width: 28,
+                      height: 28,
+                      borderRadius: 999,
+                      backgroundColor: hex,
+                      borderWidth: isSelected ? 2 : 0,
+                      borderColor: "white",
+                      shadowColor: isSelected ? hex : "transparent",
+                      shadowOpacity: isSelected ? 0.8 : 0,
+                      shadowRadius: 4,
+                      shadowOffset: { width: 0, height: 0 },
+                      elevation: isSelected ? 4 : 0,
+                    }}
+                  />
+                );
+              })}
+            </View>
+            <DropdownMenuItem onPress={openModal}>
+              <View
+                style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}
+              >
+                <SwatchBook size={24} color={currentColor} />
+                <Text style={{ color: currentColor }}>Custom color...</Text>
+              </View>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </ResponsiveDropdownMenuContent>
+      </DropdownMenu>
+      {modal}
+    </>
+  );
+}
+
+function BadgeTriggerButton({
+  badge,
+  loading,
+}: {
+  badge: PlaceStreamBadgeDefs.BadgeIssuanceView | null;
+  loading: boolean;
+}) {
+  const { theme } = zero.useTheme();
+  const [hover, setHover] = useState(false);
+
+  return (
+    <Pressable
+      style={{
+        paddingHorizontal: 9.5,
+        marginRight: -9.5,
+        height: 43,
+        borderRadius: radiusTokens.xl,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: hover
+          ? theme.colors.muted
+          : hexToRgba(theme.colors.muted, 0.3),
+      }}
+      onHoverIn={() => setHover(true)}
+      onHoverOut={() => setHover(false)}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={theme.colors.mutedForeground} />
+      ) : badge?.imageUrl ? (
+        <Image
+          source={{ uri: badge.imageUrl }}
+          style={{ width: 24, height: 24, borderRadius: 5 }}
+        />
+      ) : badge && BADGE_IMAGES[badge.badgeType] ? (
+        <Badge badgeType={badge.badgeType} size={22} />
+      ) : (
+        <View
+          style={{
+            width: 22,
+            height: 22,
+            borderRadius: 4,
+            backgroundColor: theme.colors.mutedForeground,
+            opacity: 0.3,
+          }}
+        />
+      )}
+    </Pressable>
+  );
+}
+
+function BadgeCheckboxItem({
+  badge,
+  toggling,
+  onToggle,
+}: {
+  badge: PlaceStreamBadgeDefs.BadgeIssuanceView;
+  toggling: boolean;
+  onToggle: () => void;
+}) {
+  const { theme } = zero.useTheme();
+  const badgeName = badge.name ?? badge.badgeType.split("#")[1];
+  const desc = badge.description;
+
+  return (
+    <DropdownMenuCheckboxItem
+      checked={badge.selected ?? false}
+      onCheckedChange={onToggle}
+      closeOnPress={false}
+      disabled={toggling}
+    >
+      <View
+        style={[
+          layout.flex.row,
+          layout.flex.alignCenter,
+          gap.all[2],
+          { opacity: toggling ? 0.5 : 1 },
+        ]}
+      >
+        {badge.imageUrl ? (
+          <Image
+            source={{ uri: badge.imageUrl }}
+            style={{ width: 22, height: 22, borderRadius: 3 }}
+          />
+        ) : BADGE_IMAGES[badge.badgeType] ? (
+          <Badge badgeType={badge.badgeType} size={20} />
+        ) : (
+          <View
+            style={[
+              {
+                width: 22,
+                height: 22,
+                borderRadius: 3,
+                backgroundColor: theme.colors.muted,
+              },
+            ]}
+          />
+        )}
+        <View style={{ flex: 1 }}>
+          <Text size="sm">{badgeName}</Text>
+          {desc && (
+            <Text muted size="xs">
+              {desc}
+            </Text>
+          )}
+        </View>
+        {toggling && (
+          <ActivityIndicator
+            size="small"
+            color={theme.colors.primary}
+            style={{ marginLeft: 8 }}
+          />
+        )}
+      </View>
+    </DropdownMenuCheckboxItem>
+  );
+}
diff --git a/js/app/components/mobile/useResponsiveLayout.ts b/js/app/components/mobile/useResponsiveLayout.ts
index 774a96a9f..d26c3e539 100644
--- a/js/app/components/mobile/useResponsiveLayout.ts
+++ b/js/app/components/mobile/useResponsiveLayout.ts
@@ -47,8 +47,8 @@ export function useResponsiveLayout({
   const chatPanelWidth = responsiveValue(
     {
       md: 320,
-      lg: 400,
-      xl: 480,
+      lg: 380,
+      xl: 400,
       default: 300,
     },
     screenWidth,
diff --git a/js/components/src/components/chat/chat-box.tsx b/js/components/src/components/chat/chat-box.tsx
index 73473c078..2754ec080 100644
--- a/js/components/src/components/chat/chat-box.tsx
+++ b/js/components/src/components/chat/chat-box.tsx
@@ -13,6 +13,7 @@ import {
 import { StreamNotifications } from "../../lib/stream-notifications";
 import { SystemMessages } from "../../lib/system-messages";
 import {
+  bg,
   borders,
   flex,
   gap,
@@ -62,6 +63,7 @@ export function ChatBox({
   emojiPicker,
   skinTone = 0,
   hideLogin = false,
+  leftSlot,
 }: {
   isPopout?: boolean;
   chatBoxStyle?: any;
@@ -75,8 +77,10 @@ export function ChatBox({
   ) => ReactNode;
   skinTone?: number;
   hideLogin?: boolean;
+  leftSlot?: ReactNode;
 }) {
   const [submitting, setSubmitting] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
   const [message, setMessage] = useState("");
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [showEmojiSuggestions, setShowEmojiSuggestions] = useState(false);
@@ -423,90 +427,133 @@ export function ChatBox({
         </View>
       )}
       <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
-        <Textarea
-          ref={textAreaRef}
-          numberOfLines={1}
-          value={message}
-          enterKeyHint="send"
-          onSubmitEditing={(e) => {
-            e.preventDefault();
-            submit();
-          }}
-          multiline={false}
-          onChangeText={(text) => {
-            setMessage(text);
-            updateSuggestions(text);
-          }}
-          onKeyPress={(k) => {
-            if (k.nativeEvent.key === "Enter") {
-              if (showSuggestions) {
-                k.preventDefault();
-                const handles = Array.from(filteredAuthors.keys());
-                if (handles.length > 0) {
-                  handleMentionSelect(handles[highlightedIndex]);
+        <View
+          style={
+            leftSlot
+              ? [
+                  layout.flex.row,
+                  layout.flex.alignCenter,
+                  { flex: 1 },
+                  borders.width.thin,
+                  borders.color.gray[400],
+                  bg.gray[900],
+                  chatBoxStyle,
+                  isOverLimit
+                    ? {
+                        borderColor: "#ef4444",
+                        borderWidth: 2,
+                        outline: "none",
+                      }
+                    : inputFocused
+                      ? {
+                          borderColor: theme.colors.foreground,
+                          outline: "none",
+                        }
+                      : null,
+                  pr[2],
+                ]
+              : [{ flex: 1 }]
+          }
+        >
+          {leftSlot}
+          <Textarea
+            ref={textAreaRef}
+            numberOfLines={1}
+            value={message}
+            enterKeyHint="send"
+            onSubmitEditing={(e) => {
+              e.preventDefault();
+              submit();
+            }}
+            multiline={false}
+            onChangeText={(text) => {
+              setMessage(text);
+              updateSuggestions(text);
+            }}
+            onKeyPress={(k) => {
+              if (k.nativeEvent.key === "Enter") {
+                if (showSuggestions) {
+                  k.preventDefault();
+                  const handles = Array.from(filteredAuthors.keys());
+                  if (handles.length > 0) {
+                    handleMentionSelect(handles[highlightedIndex]);
+                  }
+                } else if (showEmojiSuggestions) {
+                  k.preventDefault();
+                  if (filteredEmojis.length > 0) {
+                    handleEmojiSelect(filteredEmojis[highlightedIndex]);
+                  }
+                } else {
+                  k.preventDefault();
+                  submit();
                 }
-              } else if (showEmojiSuggestions) {
-                k.preventDefault();
-                if (filteredEmojis.length > 0) {
-                  handleEmojiSelect(filteredEmojis[highlightedIndex]);
+              } else if (k.nativeEvent.key === "Tab") {
+                if (showSuggestions) {
+                  k.preventDefault();
+                  const handles = Array.from(filteredAuthors.keys());
+                  if (handles.length > 0) {
+                    handleMentionSelect(handles[highlightedIndex]);
+                  }
+                } else if (showEmojiSuggestions) {
+                  k.preventDefault();
+                  if (filteredEmojis.length > 0) {
+                    handleEmojiSelect(filteredEmojis[highlightedIndex]);
+                  }
                 }
-              } else {
-                k.preventDefault();
-                submit();
-              }
-            } else if (k.nativeEvent.key === "Tab") {
-              if (showSuggestions) {
-                k.preventDefault();
-                const handles = Array.from(filteredAuthors.keys());
-                if (handles.length > 0) {
-                  handleMentionSelect(handles[highlightedIndex]);
+              } else if (k.nativeEvent.key === "ArrowUp") {
+                if (showSuggestions || showEmojiSuggestions) {
+                  k.preventDefault();
+                  setHighlightedIndex((prev) => Math.max(prev - 1, 0));
                 }
-              } else if (showEmojiSuggestions) {
-                k.preventDefault();
-                if (filteredEmojis.length > 0) {
-                  handleEmojiSelect(filteredEmojis[highlightedIndex]);
+              } else if (k.nativeEvent.key === "ArrowDown") {
+                if (showSuggestions) {
+                  k.preventDefault();
+                  setHighlightedIndex((prev) =>
+                    Math.min(
+                      prev + 1,
+                      Array.from(filteredAuthors.keys()).length - 1,
+                    ),
+                  );
+                } else if (showEmojiSuggestions) {
+                  k.preventDefault();
+                  setHighlightedIndex((prev) =>
+                    Math.min(prev + 1, filteredEmojis.length - 1),
+                  );
+                }
+              } else if (k.nativeEvent.key === "Escape") {
+                if (showSuggestions || showEmojiSuggestions) {
+                  k.preventDefault();
+                  setShowSuggestions(false);
+                  setShowEmojiSuggestions(false);
                 }
               }
-            } else if (k.nativeEvent.key === "ArrowUp") {
-              if (showSuggestions || showEmojiSuggestions) {
-                k.preventDefault();
-                setHighlightedIndex((prev) => Math.max(prev - 1, 0));
-              }
-            } else if (k.nativeEvent.key === "ArrowDown") {
-              if (showSuggestions) {
-                k.preventDefault();
-                setHighlightedIndex((prev) =>
-                  Math.min(
-                    prev + 1,
-                    Array.from(filteredAuthors.keys()).length - 1,
-                  ),
-                );
-              } else if (showEmojiSuggestions) {
-                k.preventDefault();
-                setHighlightedIndex((prev) =>
-                  Math.min(prev + 1, filteredEmojis.length - 1),
-                );
-              }
-            } else if (k.nativeEvent.key === "Escape") {
-              if (showSuggestions || showEmojiSuggestions) {
-                k.preventDefault();
-                setShowSuggestions(false);
-                setShowEmojiSuggestions(false);
-              }
+            }}
+            onFocus={() => setInputFocused(true)}
+            onBlur={() => setInputFocused(false)}
+            style={
+              leftSlot
+                ? [
+                    {
+                      flex: 1,
+                      borderWidth: 0,
+                      backgroundColor: "transparent",
+                      outline: "none",
+                    },
+                  ]
+                : [
+                    chatBoxStyle,
+                    isOverLimit && {
+                      borderColor: "#ef4444",
+                      borderWidth: 2,
+                      outline: "none",
+                    },
+                  ]
             }
-          }}
-          style={[
-            chatBoxStyle,
-            isOverLimit && {
-              borderColor: "#ef4444",
-              borderWidth: 2,
-              outline: "none",
-            },
-          ]}
-          // "submit" won't blur on enter
-          submitBehavior="submit"
-          placeholder="Type a message..."
-        />
+            // "submit" won't blur on enter
+            submitBehavior="submit"
+            placeholder="Type a message..."
+          />
+        </View>
         <View>
           <Button
             disabled={submitting}
diff --git a/js/components/src/components/ui/dropdown.tsx b/js/components/src/components/ui/dropdown.tsx
index a1ea56560..455081fed 100644
--- a/js/components/src/components/ui/dropdown.tsx
+++ b/js/components/src/components/ui/dropdown.tsx
@@ -509,17 +509,30 @@ export function DropdownMenuShortcut(props: any) {
 
 export const DropdownMenuGroup = forwardRef<
   any,
-  { inset?: boolean; title?: string; children: ReactNode }
+  { inset?: boolean; title?: string; description?: string; children: ReactNode }
 >((props, ref) => {
   const { theme } = useTheme();
-  const { inset, title, children, ...rest } = props;
+  const { inset, title, children, description, ...rest } = props;
   return (
     <View style={[inset && gap[2]]} ref={ref} {...rest}>
       {title && (
-        <Text style={[{ color: theme.colors.textMuted }, pb[1], pl[2]]}>
+        <Text
+          style={[
+            { color: theme.colors.text },
+            description ? pt[1] : py[1],
+            pl[2],
+          ]}
+        >
           {title}
         </Text>
       )}
+      {description && (
+        <Text
+          style={[{ color: theme.colors.textMuted }, pb[2], pl[2], fontSize.sm]}
+        >
+          {description}
+        </Text>
+      )}
       <View
         style={[
           { backgroundColor: theme.colors.muted },