diff --git a/js/app/components/container.tsx b/js/app/components/container.tsx
index ea44c6a4..aaf92f8d 100644
--- a/js/app/components/container.tsx
+++ b/js/app/components/container.tsx
@@ -23,6 +23,7 @@ function getMaxWidth(width: number): number {
   if (width >= 800) return maxContainerWidths.xl;
   if (width >= 740) return maxContainerWidths.lg;
   if (width >= 660) return maxContainerWidths.md;
+  if (width >= 440) return width;
   return maxContainerWidths.sm;
 }
 
@@ -33,6 +34,7 @@ export default function Container({
 }: ContainerProps) {
   const { width } = useWindowDimensions();
   const maxWidth = getMaxWidth(width);
+  const isMobile = width < 768;
 
   return (
     <View
@@ -45,7 +47,7 @@ export default function Container({
       <View
         style={[
           zero.w.percent[100],
-          zero.px[8],
+          isMobile ? zero.px[2] : zero.px[8],
           { marginHorizontal: "auto" },
           { maxWidth },
           style,
diff --git a/js/app/components/home/cards.tsx b/js/app/components/home/cards.tsx
index 7805d010..8eb6e06a 100644
--- a/js/app/components/home/cards.tsx
+++ b/js/app/components/home/cards.tsx
@@ -38,11 +38,13 @@ interface StreamCardProps {
   activity?: string;
   tags?: string[];
   isLive?: boolean;
+  showAvatar?: boolean;
 }
 
 const StreamCard = ({
   size = "sm",
   horizontal = false,
+  showAvatar = true,
   thumbnailUrl,
   avatarUrl,
   title,
@@ -54,6 +56,7 @@ const StreamCard = ({
   isLive = true,
 }: StreamCardProps) => {
   const layoutHorizontal = horizontal;
+  const inMobileMode = horizontal && !showAvatar;
   const { url } = useStreamplaceNode();
   const { theme } = useTheme();
   const isWeb = Platform.OS === "web";
@@ -95,8 +98,8 @@ const StreamCard = ({
   const contentPaddingHoriz = 12;
   const contentPaddingVertical = 2.65;
   const avatarSize = 40;
-  const livePillHeight = 30;
-  const livePillPaddingHorizontal = 4;
+  const livePillHeight = inMobileMode ? 20 : 30;
+  const livePillPaddingHorizontal = inMobileMode ? 2 : 4;
 
   const contentSectionHeight = avatarSize + 2 * contentPaddingVertical;
   const contentSectionWidth = avatarSize * 2 + contentPaddingHoriz;
@@ -123,7 +126,11 @@ const StreamCard = ({
         style={[
           {
             flex: layoutHorizontal ? 0 : undefined,
-            minWidth: layoutHorizontal ? "63%" : "100%",
+            minWidth: layoutHorizontal
+              ? inMobileMode
+                ? "40%"
+                : "63%"
+              : "100%",
             // native seems to be unable to adjust widths properly?
             maxHeight: !isWeb ? "76.5%" : "100%",
             position: "relative",
@@ -146,8 +153,8 @@ const StreamCard = ({
             style={[
               {
                 position: "absolute",
-                top: contentPaddingHoriz,
-                right: contentPaddingVertical,
+                top: contentPaddingVertical * 2,
+                right: contentPaddingVertical * 2,
                 backgroundColor: "rgba(0, 0, 0, 0.75)",
                 borderRadius: 999,
                 borderWidth: 1,
@@ -161,7 +168,10 @@ const StreamCard = ({
               },
             ]}
           >
-            <PlayerUI.DehydratedViewers viewers={viewers} />
+            <PlayerUI.DehydratedViewers
+              viewers={viewers}
+              size={inMobileMode ? "sm" : "md"}
+            />
           </View>
         )}
       </View>
@@ -182,42 +192,46 @@ const StreamCard = ({
         ]}
       >
         {/* Avatar */}
-        <View
-          style={[
-            {
-              width: avatarSize,
-              height: avatarSize,
-              marginVertical: layoutHorizontal ? 0 : contentPaddingVertical * 4,
-              borderRadius: avatarSize / 2,
-              overflow: "hidden",
-              flexShrink: 0,
-            },
-          ]}
-        >
-          {/* dynamically switching between these src crashes android */}
-          {avatarUrl && (
-            <View style={[zero.flex.values[1]]} key="avatar">
-              <Image
-                key="avatar"
-                source={{
-                  uri: avatarUrl,
-                }}
-                style={{ width: "100%", height: "100%" }}
-                contentFit="cover"
-              />
-            </View>
-          )}
-          {!avatarUrl && (
-            <View key="avatar-placeholder">
-              <Image
-                key="avatar"
-                source={require("./../../assets/images/goose.png")}
-                style={{ width: "100%", height: "100%" }}
-                contentFit="cover"
-              />
-            </View>
-          )}
-        </View>
+        {showAvatar && (
+          <View
+            style={[
+              {
+                width: avatarSize,
+                height: avatarSize,
+                marginVertical: layoutHorizontal
+                  ? 0
+                  : contentPaddingVertical * 4,
+                borderRadius: avatarSize / 2,
+                overflow: "hidden",
+                flexShrink: 0,
+              },
+            ]}
+          >
+            {/* dynamically switching between these src crashes android */}
+            {avatarUrl && (
+              <View style={[zero.flex.values[1]]} key="avatar">
+                <Image
+                  key="avatar"
+                  source={{
+                    uri: avatarUrl,
+                  }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit="cover"
+                />
+              </View>
+            )}
+            {!avatarUrl && (
+              <View key="avatar-placeholder">
+                <Image
+                  key="avatar"
+                  source={require("./../../assets/images/goose.png")}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit="cover"
+                />
+              </View>
+            )}
+          </View>
+        )}
 
         {/* Text content */}
         <View
@@ -240,6 +254,7 @@ const StreamCard = ({
                   lineHeight: 16,
                 },
               ]}
+              size={showAvatar ? "base" : "base"}
               numberOfLines={1}
               ellipsizeMode="tail"
             >
@@ -264,12 +279,13 @@ const StreamCard = ({
           {((activity && category.length > 0) || tags.length > 0) && (
             <View
               style={{
-                flexWrap: "nowrap",
-                gap: 6,
+                flexWrap: inMobileMode ? "wrap" : "nowrap",
+                gap: inMobileMode ? 4 : 8,
                 alignItems: "center",
                 alignSelf: "stretch",
                 flexDirection: "row",
                 overflow: "hidden",
+                maxHeight: inMobileMode ? 40 : undefined,
               }}
               onLayout={(e) => {
                 const width = e.nativeEvent?.layout?.width;
@@ -283,7 +299,7 @@ const StreamCard = ({
                 <Text
                   size="sm"
                   style={{ flexShrink: 0 }}
-                  color={hexToRgba(theme.colors.primaryForeground, 0.85)}
+                  color={hexToRgba(theme.colors.accentForeground, 0.85)}
                   numberOfLines={1}
                   ellipsizeMode="tail"
                   onLayout={(e) => {
@@ -300,7 +316,10 @@ const StreamCard = ({
                   {activity}
                 </Text>
               )}
-              {tagItems.slice(0, visibleTagCount).map((cat, index) => (
+              {(inMobileMode
+                ? tagItems
+                : tagItems.slice(0, visibleTagCount)
+              ).map((cat, index) => (
                 <View
                   key={index}
                   style={[
@@ -325,7 +344,7 @@ const StreamCard = ({
                   }}
                 >
                   <Text
-                    size="sm"
+                    size={inMobileMode ? "xs" : "sm"}
                     color={hexToRgba(theme.colors.primaryForeground, 0.85)}
                     numberOfLines={1}
                     ellipsizeMode="tail"
diff --git a/js/app/src/screens/home.tsx b/js/app/src/screens/home.tsx
index 2581f088..3450c2ed 100644
--- a/js/app/src/screens/home.tsx
+++ b/js/app/src/screens/home.tsx
@@ -107,11 +107,13 @@ function HomeScreenItem({
   size,
   avatarUrl,
   horizontal = false,
+  showAvatar = true,
 }: {
   item: PlaceStreamLivestream.LivestreamView;
   size: StreamCardSize;
   avatarUrl?: string;
   horizontal?: boolean;
+  showAvatar?: boolean;
 }) {
   const user = item.author.handle || item.author.did;
   return (
@@ -132,6 +134,7 @@ function HomeScreenItem({
           (item.record as PlaceStreamLivestream.Record).title || "A livestream!"
         }
         horizontal={horizontal}
+        showAvatar={showAvatar}
         thumbnailUrl={`/api/playback/${user}/stream.jpg?ts=${(Date.now() / 120000).toFixed(0)}`}
         avatarUrl={avatarUrl}
         streamerName={user}
@@ -215,6 +218,8 @@ export default function HomeScreen({
   let cols = getHomeScreenCols(width);
   let size = getHomeScreenItemSize(width);
 
+  // Use horizontal (SBS) layout for all items on single-column breakpoint
+  const useHorizontalAll = cols === 1;
   // Only use horizontal layout for first card when we have enough columns (3+)
   const useHorizontalFirst = cols >= 3;
   const firstRowCols = useHorizontalFirst ? cols - 1 : cols;
@@ -336,7 +341,7 @@ export default function HomeScreen({
                 { flexDirection: "row" },
                 {
                   gap: 24,
-                  marginBottom: 24,
+                  marginBottom: useHorizontalAll ? 12 : 24,
                   width: "100%",
                 },
               ]}
@@ -358,7 +363,10 @@ export default function HomeScreen({
                     item={item}
                     size={size}
                     avatarUrl={avis[item.author.did]?.avatar}
-                    horizontal={itemIndex == 0 && useHorizontalFirst}
+                    horizontal={
+                      useHorizontalAll || (itemIndex == 0 && useHorizontalFirst)
+                    }
+                    showAvatar={!useHorizontalAll}
                   />
                 </View>
               ))}
@@ -384,7 +392,7 @@ export default function HomeScreen({
                   key={`row-${rowIndex}`}
                   style={[
                     { flexDirection: "row" },
-                    { gap: 24, marginBottom: 24 },
+                    { gap: 24, marginBottom: useHorizontalAll ? 12 : 24 },
                   ]}
                 >
                   {row.map((item, itemIndex) =>
@@ -397,6 +405,8 @@ export default function HomeScreen({
                           item={item}
                           size={size}
                           avatarUrl={avis[item.author.did]?.avatar}
+                          horizontal={useHorizontalAll}
+                          showAvatar={!useHorizontalAll}
                         />
                       </View>
                     ) : (
diff --git a/js/components/src/components/mobile-player/ui/viewers.tsx b/js/components/src/components/mobile-player/ui/viewers.tsx
index aea7b81d..688a5d7a 100644
--- a/js/components/src/components/mobile-player/ui/viewers.tsx
+++ b/js/components/src/components/mobile-player/ui/viewers.tsx
@@ -9,18 +9,29 @@ export function Viewers() {
   return <DehydratedViewers viewers={viewers || 0} />;
 }
 
-export function DehydratedViewers({ viewers }: { viewers: number }) {
+export function DehydratedViewers({
+  viewers,
+  size = "md",
+}: {
+  viewers: number;
+  size?: "sm" | "md";
+}) {
+  const iconSize = size === "sm" ? 12 : 24;
+  const fontSize = size === "sm" ? 11 : 16;
   return (
     <View
       style={[
         atoms.layout.flex.center,
         atoms.layout.flex.row,
-        atoms.gap.all[2],
+        atoms.gap.all[size === "sm" ? 1 : 2],
         atoms.px[1],
       ]}
     >
-      <Eye color="#fd5050" />
-      <ViewerCount count={viewers} />
+      <Eye color="#fd5050" size={iconSize} />
+      <ViewerCount
+        count={viewers}
+        style={{ fontSize, lineHeight: fontSize * 1.5 }}
+      />
     </View>
   );
 }