src/components/SectionHeader.tsx

@@ -11,16 +11,19 @@ export function SectionHeader({
   viewAllLabel: string;
 }) {
   return (
-    <div className="flex h-6 items-center justify-between gap-4">
+    <div className="flex h-[49px] items-center justify-between gap-4 md:h-6">
-      <div className="flex min-w-0 items-center gap-4">
+      <div className="flex min-w-0 items-center gap-3 md:gap-4">
-        <span className="h-6 w-1 shrink-0 bg-ark-gold" aria-hidden />
+        <span
-        <h2 className="truncate text-2xl font-bold leading-6 tracking-tight text-white md:text-2xl">
+          className="h-5 w-[3px] shrink-0 bg-ark-gold md:h-6 md:w-1"
+          aria-hidden
+        />
+        <h2 className="truncate text-lg font-semibold leading-[24.5px] tracking-tight text-white md:text-2xl md:font-bold md:leading-6">
           {title}
         </h2>
       </div>
       <Link
         to={viewAllTo}
-        className="inline-flex shrink-0 items-center gap-1 text-[15px] font-medium leading-none text-ark-gold hover:text-ark-gold2"
+        className="inline-flex shrink-0 items-center gap-1 text-[13px] font-normal leading-none text-ark-gold hover:text-ark-gold2 md:text-[15px] md:font-medium"
       >
         {viewAllLabel}
         <ChevronRight className="h-4 w-4" strokeWidth={2.7} />

src/components/messageStream/FilterChips.tsx

@@ -23,17 +23,17 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
 
   const tabClass = (active: boolean) =>
     [
-      "relative shrink-0 whitespace-nowrap px-1 py-3 text-[15px] leading-none outline-none transition-colors",
+      "relative flex h-[52px] shrink-0 items-center whitespace-nowrap px-3 pb-4 pt-3 text-[15px] leading-6 outline-none transition-colors md:h-auto md:px-1 md:py-3 md:leading-none",
-      "border-b-2",
+      "border-b-0 md:border-b-2",
       active
-        ? "border-ark-gold text-ark-gold font-medium"
+        ? "border-ark-gold font-medium text-white md:text-ark-gold"
-        : "border-transparent text-neutral-400 hover:text-ark-gold/80",
+        : "border-transparent text-[#97989A] hover:text-ark-gold/80 md:text-neutral-400",
     ].join(" ");
 
   return (
-    <div className="sticky top-0 z-10 border-b border-ark-line bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
+    <div className="sticky top-0 z-10 bg-ark-bg/95 backdrop-blur md:rounded-t-xl md:border-b md:border-ark-line">
       <div
-        className="flex items-end gap-5 overflow-x-auto overflow-y-hidden px-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        className="relative flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-8 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
         role="tablist"
       >
         {TYPE_FILTERS.map((tp) => {
@@ -51,6 +51,10 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
             </button>
           );
         })}
+        <div
+          className="pointer-events-none absolute right-0 top-0 hidden h-[52px] w-[114px] bg-gradient-to-l from-ark-bg via-ark-bg/85 to-transparent max-md:block"
+          aria-hidden
+        />
       </div>
     </div>
   );

src/components/messageStream/MessageStream.tsx

@@ -72,10 +72,10 @@ export function MessageStream({ scope }: MessageStreamProps) {
   };
 
   return (
-    <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
+    <div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
       <FilterChips type={type} onTypeChange={(v) => updateParam("type", v)} />
 
-      <div className="flex flex-col gap-3 pt-2">
+      <div className="flex flex-col gap-3 px-4 pt-4 md:px-0 md:pt-2">
         {groups.map((group) => (
           <div key={group.dayKey} className="flex flex-col gap-3">
             {group.items.map((post) => (

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -14,7 +14,6 @@ import { postDisplayText } from "../utils/postText";
 
 function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   const { t } = useI18n();
-  const isImageAsDoc = att.mime.startsWith("image/");
   const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
   const displayFilename = filenameWithExtension(att.filename, att.mime);
   const [isDownloading, setIsDownloading] = useState(false);
@@ -28,50 +27,41 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   };
 
   return (
-    <div className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5">
+    <div className="group flex h-[52px] items-center gap-3">
+      <div
+        className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
+        style={{ backgroundColor: color }}
+        aria-hidden="true"
+      >
+        <Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div
+          className="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2"
+          title={displayFilename}
+        >
+          {middleEllipsisFilename(displayFilename)}
+        </div>
+        <div className="text-[12px] font-medium leading-[19.2px] text-[#A8A9AE]">
+          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
+        </div>
+      </div>
       <button
         type="button"
         onClick={handleDownload}
         disabled={isDownloading}
-        className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full disabled:cursor-wait md:h-12 md:w-12"
+        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white transition hover:bg-[#22232D] disabled:cursor-wait"
         aria-label={
           isDownloading ? t("downloading") : `Download ${att.filename}`
         }
         aria-busy={isDownloading}
       >
-        {isImageAsDoc && att.thumbnailUrl ? (
-          <img
-            src={att.thumbnailUrl}
-            alt=""
-            className="absolute inset-0 h-full w-full object-cover"
-          />
-        ) : (
-          <div
-            className="flex h-full w-full items-center justify-center"
-            style={{ backgroundColor: color }}
-          >
-            <Icon className="h-5 w-5 text-white" strokeWidth={2.2} />
-          </div>
-        )}
-        <div className="absolute inset-0 flex items-center justify-center bg-black/35 text-white opacity-100 transition group-hover:bg-black/45 group-focus-visible:bg-black/45">
         {isDownloading ? (
-            <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
+          <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.3} />
         ) : (
-            <DownloadCloudIcon className="h-4 w-4" />
+          <DownloadCloudIcon className="h-6 w-6" />
         )}
-        </div>
       </button>
-      <div className="min-w-0 flex-1">
-        <div
-          className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold"
-          title={displayFilename}
-        >
-          {middleEllipsisFilename(displayFilename)}
-        </div>
-        <div className="text-[11px] text-neutral-400">
-          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
-        </div>
-      </div>
     </div>
   );
 }
@@ -80,12 +70,12 @@ export function FileDocBubble({ post }: { post: Post }) {
   const { lang } = useI18n();
   const text = postDisplayText(post, lang);
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col gap-3">
       {post.attachments.map((att) => (
         <AttachmentRow key={att.id} postId={post.id} att={att} />
       ))}
       {text ? (
-        <div className="message-stream-copyable-text mt-1 select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-neutral-100">
           {text}
         </div>
       ) : null}

src/layouts/PublicLayout.tsx

@@ -531,8 +531,10 @@ export function PublicLayout() {
       </header>
 
       <main
-        className={`mx-auto w-full max-w-[1280px] px-4 pt-6 min-[440px]:px-5 sm:px-6 md:px-9 md:pt-10 xl:px-0 ${
+        className={`mx-auto w-full max-w-[1280px] ${
-          footerInContentFlow ? "pb-0" : "flex-1 pb-6 md:pb-10"
+          footerInContentFlow
+            ? "px-0 pb-0 pt-0 md:px-9 md:pt-10 xl:px-0"
+            : "flex-1 px-4 pb-6 pt-6 min-[440px]:px-5 sm:px-6 md:px-9 md:pb-10 md:pt-10 xl:px-0"
         }`}
       >
         <Outlet />

src/pages/Browse/index.tsx

@@ -1,5 +1,6 @@
 import { useSearchParams } from "react-router-dom";
 import { MessageStream } from "../../components/messageStream/MessageStream";
+import { SectionHeader } from "../../components/SectionHeader";
 import { useI18n } from "../../i18n";
 
 export function Browse() {
@@ -7,10 +8,14 @@ export function Browse() {
   const [sp] = useSearchParams();
   const q = sp.get("q") || "";
   return (
-    <section className="space-y-3">
+    <section>
-      <h1 className="mx-auto max-w-full px-4 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
+      <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
-        {q ? `${t("search")}: ${q}` : t("all")}
+        <SectionHeader
-      </h1>
+          title={q ? `${t("search")}: ${q}` : t("all")}
+          viewAllTo="/browse"
+          viewAllLabel={t("viewAll")}
+        />
+      </div>
       <MessageStream scope={{ kind: "all" }} />
     </section>
   );

src/pages/Home/index.tsx

@@ -26,6 +26,8 @@ export function Home() {
   const [latest, setLatest] = useState<PostBackedResource[]>([]);
   const [err, setErr] = useState<string | null>(null);
   const recRowRef = useRef<HTMLDivElement>(null);
+  const categoryRowRef = useRef<HTMLDivElement>(null);
+  const [activeCategoryPage, setActiveCategoryPage] = useState(0);
   const [canScrollRec, setCanScrollRec] = useState(false);
   const [recScroll, setRecScroll] = useState({ ratio: 1, progress: 0 });
 
@@ -58,6 +60,31 @@ export function Home() {
   const iconKeyForResource = (r: PostBackedResource) =>
     cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
 
+  const categoryPages: Category[][] = [];
+  for (let index = 0; index < cats.length; index += 9) {
+    categoryPages.push(cats.slice(index, index + 9));
+  }
+
+  useEffect(() => {
+    const row = categoryRowRef.current;
+    if (!row) return;
+
+    const update = () => {
+      const width = row.clientWidth || 1;
+      const next = Math.round(row.scrollLeft / width);
+      setActiveCategoryPage((prev) => (prev === next ? prev : next));
+    };
+
+    update();
+    row.addEventListener("scroll", update, { passive: true });
+    return () => row.removeEventListener("scroll", update);
+  }, [cats.length]);
+
+  useEffect(() => {
+    setActiveCategoryPage(0);
+    categoryRowRef.current?.scrollTo({ left: 0 });
+  }, [lang]);
+
   useEffect(() => {
     const row = recRowRef.current;
     if (!row) {
@@ -113,7 +140,70 @@ export function Home() {
           viewAllTo="/browse"
           viewAllLabel={t("viewAll")}
         />
-        <div className="mt-7 grid grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
+
+        <div className="md:hidden">
+          <div
+            ref={categoryRowRef}
+            className="flex snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            aria-label={t("categorySection")}
+          >
+            {categoryPages.map((page, pageIndex) => (
+              <div
+                key={`category-page-${pageIndex}`}
+                className="grid w-full shrink-0 snap-start grid-cols-3 gap-2"
+              >
+                {page.map((c) => (
+                  <Link
+                    key={c.id}
+                    to={`/category/${c.slug}`}
+                    className="group flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl bg-[#1D1E23] px-4 py-3 text-center transition hover:bg-[#252630] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                  >
+                    <CategoryIcon
+                      iconKey={c.iconKey}
+                      categorySlug={c.slug}
+                      className="h-9 w-9 shrink-0 text-ark-gold"
+                    />
+                    <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
+                      {c.name}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          {categoryPages.length > 1 ? (
+            <div
+              className="flex h-[30px] items-center justify-center gap-1.5"
+              aria-label="Category pagination"
+            >
+              {categoryPages.map((_, index) => (
+                <button
+                  key={`category-dot-${index}`}
+                  type="button"
+                  aria-label={`Go to category page ${index + 1}`}
+                  aria-current={activeCategoryPage === index}
+                  onClick={() => {
+                    const row = categoryRowRef.current;
+                    if (!row) return;
+                    row.scrollTo({
+                      left: row.clientWidth * index,
+                      behavior: "smooth",
+                    });
+                    setActiveCategoryPage(index);
+                  }}
+                  className={`h-1.5 rounded-full transition-all ${
+                    activeCategoryPage === index
+                      ? "w-6 bg-ark-gold"
+                      : "w-1.5 bg-[#7C7C7C]"
+                  }`}
+                />
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
           {cats.map((c) => {
             const { line1, line2 } = categoryCardLines(c.name);
             return (