From 8bc6f5b35da8fa225a5068f5893da3910634b4c3 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Mon, 7 Sep 2026 21:08:37 +0000
Subject: [PATCH 1/7] Redesign feed layout for clearer reading and navigation

---
 .../app/(dynamicPages)/feed/feed-reading.scss | 480 ++++++++++++++++++
 .../src/app/(dynamicPages)/feed/layout.tsx    |   9 +-
 .../_components/entry-index-menu/index.tsx    | 183 +++----
 .../_components/my-favorites-widget/index.tsx |  22 +-
 .../top-communities-widget/index.tsx          | 105 ++--
 .../_components/trending-tags-card/index.tsx  | 112 ++--
 apps/web/src/features/i18n/locales/en-US.json |   5 +
 .../entry-list-item-muted-content.tsx         |   2 +-
 .../features/shared/entry-list-item/index.tsx |   4 +-
 apps/web/src/features/shared/navbar/index.tsx |  16 +-
 .../features/shared/navbar/navbar-desktop.tsx |  35 +-
 .../shared/navbar/navbar-perks-button.tsx     |  19 +-
 .../shared/navbar/navbar-text-menu.tsx        |   8 +-
 .../src/specs/app/entry-index-menu.spec.tsx   |  70 ++-
 .../specs/app/top-communities-widget.spec.tsx | 135 +++++
 .../src/specs/app/trending-tags-card.spec.tsx |  49 +-
 .../shared/navbar-perks-button.spec.tsx       |  17 +-
 17 files changed, 998 insertions(+), 273 deletions(-)
 create mode 100644 apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
 create mode 100644 apps/web/src/specs/app/top-communities-widget.spec.tsx

diff --git a/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss b/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
new file mode 100644
index 0000000000..f0469cae56
--- /dev/null
+++ b/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
@@ -0,0 +1,480 @@
+@import "../../../styles/vars_mixins";
+
+.feed-page {
+  min-height: 100vh;
+  display: flow-root;
+  --feed-muted: #606a74;
+
+  @include themify(night) {
+    background: #15171b;
+    --feed-muted: #a8adb6;
+    --border-color: #30343b;
+
+    .ecency-navbar-desktop {
+      background: #15171b;
+    }
+    .entry-list-body:not(.grid-view) .entry-list-item {
+      border-bottom-color: #292d33;
+    }
+  }
+}
+
+// Keep this treatment on feed routes. Profile lists, Decks, post pages and
+// the reader's grid preference continue to use their existing layouts.
+.feed-reading-layout {
+  max-width: 1440px;
+  gap: 28px;
+  padding-inline: 24px;
+
+  .tags-side {
+    display: none;
+    width: 180px;
+    margin-right: 0;
+    padding-top: 16px;
+
+    @media (min-width: 1024px) {
+      display: block;
+    }
+  }
+
+  .entry-page-content {
+    width: 100%;
+    max-width: 840px;
+    margin-inline: auto;
+  }
+
+  .side-menu {
+    width: 280px;
+    margin-left: 0;
+    padding-top: 16px;
+  }
+
+  .feed-sidebar-heading {
+    color: var(--feed-muted);
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.5;
+    margin-bottom: 16px;
+  }
+
+  .feed-sidebar-link {
+    @apply text-blue-dark-sky;
+    display: inline-flex;
+    align-items: center;
+    min-height: 40px;
+    margin-top: 12px;
+    padding: 0;
+    font-size: 14px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .feed-favorites a:not(.feed-sidebar-link) {
+    @apply text-gray-700 dark:text-gray-300;
+  }
+
+  .feed-topics {
+    margin-top: 24px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .feed-topics:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  .feed-topic-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .feed-topic-row {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 4px;
+
+    > a {
+      @apply text-gray-700 dark:text-gray-300;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+      min-height: 36px;
+      flex: 1;
+      font-size: 14px;
+
+      &:hover,
+      &[aria-current="page"] {
+        @apply text-blue-dark-sky;
+      }
+    }
+
+    > [role="button"],
+    .feed-topic-dismiss {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 28px;
+      height: 32px;
+      margin: 0;
+    }
+  }
+
+  .feed-community-heading {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+
+    > button {
+      flex-shrink: 0;
+    }
+  }
+
+  .feed-community-name {
+    @apply text-gray-800 dark:text-gray-200;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 120px;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    overflow-wrap: anywhere;
+
+    .user-avatar {
+      flex-shrink: 0;
+    }
+    &:hover {
+      @apply text-blue-dark-sky;
+    }
+  }
+
+  .feed-community-about {
+    @apply line-clamp-2;
+    color: var(--feed-muted);
+    margin: 8px 0 4px;
+    font-size: 14px;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  .feed-community-members {
+    color: var(--feed-muted);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .feed-community-create {
+    margin-top: 16px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .entry-list-body:not(.grid-view) {
+    .entry-list-item {
+      margin-top: 0;
+      padding: 24px 0;
+
+      .item-header {
+        margin-bottom: 10px;
+        flex-wrap: wrap;
+        overflow: visible;
+        gap: 4px 12px;
+      }
+
+      .item-header-main {
+        flex-shrink: 1;
+        flex-wrap: wrap;
+        min-width: 0;
+        row-gap: 4px;
+
+        .author-part .author-avatar {
+          min-width: 32px;
+          min-height: 36px;
+          margin-right: 8px;
+        }
+        .author-part .author,
+        .author-part .author-name {
+          font-weight: 500;
+        }
+        > a {
+          min-height: 32px;
+          max-width: 100%;
+        }
+        > a > div {
+          color: var(--feed-muted);
+          background: transparent;
+          border: 0;
+          padding-inline: 4px;
+          white-space: normal;
+          overflow-wrap: anywhere;
+        }
+        .date {
+          color: var(--feed-muted);
+        }
+      }
+
+      .item-header-features {
+        flex-wrap: wrap;
+        min-width: 0;
+        margin-bottom: 0;
+        .reblogged {
+          flex-shrink: 1;
+          flex-wrap: wrap;
+          opacity: 1;
+        }
+        &:empty {
+          display: none;
+        }
+      }
+
+      .item-summary {
+        min-width: 0;
+        .item-title {
+          @apply text-gray-900 dark:text-gray-100;
+          font-size: 22px;
+          line-height: 1.35;
+          max-height: none;
+          font-weight: 600;
+          overflow-wrap: anywhere;
+          @apply line-clamp-2;
+        }
+        .item-body {
+          @apply line-clamp-2;
+          color: var(--feed-muted);
+          font-size: 16px;
+          line-height: 1.55;
+          max-height: none;
+          margin: 6px 0 0;
+          overflow-wrap: anywhere;
+        }
+      }
+
+      .entry-actions {
+        width: 100%;
+        max-width: 100%;
+        flex-wrap: wrap;
+        gap: 6px 12px;
+        border: 0;
+        border-radius: 0;
+        padding: 8px 0 0;
+        min-height: 44px;
+
+        .entry-payout:not(.payout-declined):not(.payout-limit-hit),
+        .entry-votes .inner-btn,
+        .entry-reblog-btn:not(.reblogged):not(:hover) .inner-btn,
+        .entry-menu > button:not(:hover),
+        .entry-menu .dropdown-btn:not(:hover) {
+          color: var(--feed-muted);
+        }
+
+        > .border-r {
+          display: none;
+        }
+        > .text-gray-steel {
+          color: var(--feed-muted);
+        }
+        > * {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    @media (min-width: 640px) {
+      .entry-preview {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        gap: 24px;
+      }
+
+      .entry-list-item .item-body {
+        .item-image {
+          float: right;
+          flex: 0 0 150px;
+          width: 150px;
+          height: 104px;
+          margin: 0 0 0 24px;
+          border-radius: 8px;
+        }
+        .entry-preview .item-image {
+          margin: 0;
+        }
+        .entry-preview .item-image.noImage {
+          display: none;
+        }
+        .item-summary {
+          width: auto;
+          flex: 1;
+        }
+      }
+
+      .entry-list-loading-item .item-image {
+        float: right;
+        margin-left: 24px;
+        margin-right: 0;
+      }
+    }
+  }
+
+  a:focus-visible,
+  button:focus-visible,
+  [tabindex="0"]:focus-visible {
+    outline: 2px solid #357ce6 !important;
+    outline-offset: 3px;
+  }
+
+  @media (max-width: 639px) {
+    padding-inline: 16px;
+    .entry-list-body:not(.grid-view) .entry-list-item {
+      padding-block: 20px;
+      .item-summary .item-title {
+        font-size: 20px;
+      }
+      .entry-actions {
+        column-gap: 8px;
+      }
+    }
+  }
+}
+
+.feed-navigation {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  min-height: 56px;
+  padding-block: 4px;
+  border-bottom: 1px solid var(--border-color);
+
+  .feed-navigation-desktop {
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+  }
+  .feed-source-tabs,
+  .feed-sort-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    li {
+      min-width: 0;
+    }
+  }
+  .feed-sort-controls,
+  .feed-navigation-mobile {
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .feed-sort-controls {
+    display: flex;
+  }
+  .feed-tab {
+    border-bottom: 2px solid transparent;
+    overflow-wrap: anywhere;
+  }
+  .feed-tab-selected {
+    @apply text-blue-dark-sky dark:text-blue-dark-sky;
+    border-bottom-color: currentColor;
+    font-weight: 600;
+  }
+  .feed-reblog-toggle {
+    color: var(--feed-muted);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 44px;
+    padding: 4px 0;
+    font-size: 13px;
+    cursor: pointer;
+    margin-left: auto;
+  }
+  .feed-switch-track {
+    @apply bg-gray-300 dark:bg-gray-600;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 34px;
+    height: 20px;
+    padding: 2px;
+    border-radius: 20px;
+  }
+  .feed-switch-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: white;
+  }
+  [aria-checked="true"] {
+    .feed-switch-track {
+      @apply bg-blue-dark-sky;
+    }
+    .feed-switch-thumb {
+      transform: translateX(14px);
+    }
+  }
+}
+
+.feed-navbar {
+  .ecency-navbar-desktop {
+    max-width: 1440px;
+    gap: 12px;
+    padding-inline: 24px;
+  }
+  .navbar-search-slot {
+    max-width: 320px;
+    min-width: 120px;
+    flex: 1;
+  }
+  .navbar-actions {
+    gap: 8px;
+    margin-left: 0;
+    flex-shrink: 0;
+  }
+  .text-menu {
+    gap: 8px;
+    flex-shrink: 0;
+  }
+  .text-menu a {
+    border-radius: 0;
+    padding: 12px 8px;
+  }
+  .text-menu a[aria-current="page"] {
+    background: transparent;
+    border-bottom: 2px solid #357ce6;
+  }
+  .feed-write-button {
+    white-space: nowrap;
+  }
+
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid #357ce6 !important;
+    outline-offset: 3px;
+  }
+
+  @media (max-width: 1279px) {
+    .ecency-navbar-desktop {
+      padding-inline: 16px;
+      gap: 8px;
+    }
+    .navbar-actions {
+      gap: 4px;
+    }
+  }
+}
diff --git a/apps/web/src/app/(dynamicPages)/feed/layout.tsx b/apps/web/src/app/(dynamicPages)/feed/layout.tsx
index 545ea64947..070811e60f 100644
--- a/apps/web/src/app/(dynamicPages)/feed/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/feed/layout.tsx
@@ -9,15 +9,16 @@ import { Feedback } from "@/features/shared/feedback";
 import { Navbar } from "@/features/shared/navbar";
 import { ScrollToTop } from "@/features/shared/scroll-to-top";
 import { Theme } from "@/features/shared/theme";
+import "./feed-reading.scss";
 
 export default function FeedLayout({ children }: PropsWithChildren) {
   return (
-    <>
+    <div className="feed-page">
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar />
-      <div className="app-content overflow-hidden entry-index-page">
+      <Navbar readingLayout />
+      <div className="app-content entry-index-page feed-reading-layout">
         <div className="tags-side">
           <MyFavoritesWidget />
           <TrendingTagsCard />
@@ -33,6 +34,6 @@ export default function FeedLayout({ children }: PropsWithChildren) {
           <TopCommunitiesWidget />
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/src/app/_components/entry-index-menu/index.tsx b/apps/web/src/app/_components/entry-index-menu/index.tsx
index 4a97750028..c9cf0ce349 100644
--- a/apps/web/src/app/_components/entry-index-menu/index.tsx
+++ b/apps/web/src/app/_components/entry-index-menu/index.tsx
@@ -18,9 +18,9 @@ import {
   useFeedMenu
 } from "@/app/_components/entry-index-menu/use-feed-menu";
 
-const PILL_CLASS =
-  "text-gray-steel hover:text-blue-dark-sky rounded-full flex items-center px-3 py-1.5";
-const PILL_SELECTED_CLASS = "bg-blue-dark-sky text-white hover:text-white";
+const TAB_CLASS =
+  "feed-tab flex items-center px-3 py-3 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-dark-sky";
+const TAB_SELECTED_CLASS = "feed-tab-selected";
 
 export function EntryIndexMenu() {
   const router = useRouter();
@@ -49,10 +49,6 @@ export function EntryIndexMenu() {
     [sorts, overflow]
   );
 
-  const reblogLabel = noReblog
-    ? i18next.t("entry-filter.filter-with-reblog")
-    : i18next.t("entry-filter.filter-no-reblog");
-
   // Logged-out users can't view a community ("/my") feed — fall back to global.
   useEffect(() => {
     const fallback = globalFeedFallbackPath(pathname);
@@ -85,15 +81,15 @@ export function EntryIndexMenu() {
     router.push(qs ? `${pathname}?${qs}` : pathname);
   }, [noReblog, pathname, router, searchParams]);
 
-  const renderPill = (item: FeedMenuItem) => (
+  const renderTab = (item: FeedMenuItem) => (
     <li key={item.id}>
       <Link
         href={item.href}
         id={item.id}
         aria-current={item.selected ? "page" : undefined}
         className={classNameObject({
-          [PILL_CLASS]: true,
-          [PILL_SELECTED_CLASS]: item.selected,
+          [TAB_CLASS]: true,
+          [TAB_SELECTED_CLASS]: item.selected,
           [`link-${item.id}`]: true
         })}
       >
@@ -103,100 +99,89 @@ export function EntryIndexMenu() {
   );
 
   const reblogToggle = (
-    <Button size="sm" appearance="gray-link" onClick={handleFilterReblog}>
-      {reblogLabel}
-    </Button>
+    <button
+      type="button"
+      role="switch"
+      aria-checked={!noReblog}
+      onClick={handleFilterReblog}
+      className="feed-reblog-toggle"
+    >
+      <span>{i18next.t("entry-filter.show-reblogs")}</span>
+      <span className="feed-switch-track" aria-hidden="true">
+        <span className="feed-switch-thumb" />
+      </span>
+    </button>
   );
 
   return (
-    <div>
-      <div className="entry-index-menu flex items-center justify-center md:justify-between py-3.5 border-b dark:border-dark-200">
-        <div className="bg-gray-100 dark:bg-gray-900 rounded-3xl lg:px-4 p-2 text-sm flex flex-col-reverse items-center md:flex-row">
-          <div className="flex items-center">
-            {/* Desktop: Source group + Sort group (or reblog toggle for Following) */}
-            <div className="main-menu hidden lg:flex md:items-center">
-              {showSources && (
-                <ul className="flex flex-wrap mb-0" aria-label={i18next.t("entry-filter.source-label")}>
-                  {sources.map(renderPill)}
-                </ul>
-              )}
-              {showSources && (
-                <div className="border-l border-[--border-color] mx-3 dropDown-left-border-height" />
-              )}
-              {isFollowing ? (
-                reblogToggle
-              ) : (
-                <>
-                  <ul className="flex flex-wrap mb-0" aria-label={i18next.t("entry-filter.sort-label")}>
-                    {sorts.map(renderPill)}
-                  </ul>
-                  <div className="kebab-icon flex">
-                    <Dropdown>
-                      <DropdownToggle>
-                        <Button
-                          size="sm"
-                          appearance="gray-link"
-                          icon={kebabMenuHorizontalSvg}
-                          aria-label={i18next.t("entry-filter.more-filters")}
-                          aria-haspopup="menu"
-                        />
-                      </DropdownToggle>
-                      <DropdownMenu align="left">
-                        {overflow.map((item, i) => (
-                          <DropdownItem key={i} href={item.href} selected={item.selected}>
-                            {item.label}
-                          </DropdownItem>
-                        ))}
-                      </DropdownMenu>
-                    </Dropdown>
-                  </div>
-                </>
-              )}
-            </div>
-
-            {/* Mobile/tablet: Source dropdown + Sort dropdown (or reblog toggle) */}
-            <div className="main-menu flex lg:hidden md:items-center">
-              {showSources && (
-                <Dropdown>
-                  <DropdownToggle>
-                    <Button size="sm" icon={menuDownSvg} appearance="gray-link">
-                      {selectedSource?.label}
-                    </Button>
-                  </DropdownToggle>
-                  <DropdownMenu align="left">
-                    {sources.map((item, i) => (
-                      <DropdownItem key={i} selected={item.selected} onClick={item.onClick}>
-                        {item.label}
-                      </DropdownItem>
-                    ))}
-                  </DropdownMenu>
-                </Dropdown>
-              )}
-              {showSources && (
-                <div className="border-l border-[--border-color] mx-2 dropDown-left-border-height" />
-              )}
-              {isFollowing ? (
-                reblogToggle
-              ) : (
-                <Dropdown>
-                  <DropdownToggle>
-                    <Button size="sm" icon={menuDownSvg} appearance="gray-link">
-                      {selectedSort?.label ?? i18next.t("entry-filter.sort-label")}
-                    </Button>
-                  </DropdownToggle>
-                  <DropdownMenu align="left">
-                    {[...sorts, ...overflow].map((item, i) => (
-                      <DropdownItem key={i} selected={item.selected} onClick={item.onClick}>
-                        {item.label}
-                      </DropdownItem>
-                    ))}
-                  </DropdownMenu>
-                </Dropdown>
-              )}
-            </div>
+    <div className="entry-index-menu feed-navigation">
+      <div className="hidden lg:flex feed-navigation-desktop">
+        {showSources && (
+          <ul className="feed-source-tabs" aria-label={i18next.t("entry-filter.source-label")}>
+            {sources.map(renderTab)}
+          </ul>
+        )}
+        {!isFollowing && (
+          <div className="feed-sort-controls">
+            <ul className="feed-sort-tabs" aria-label={i18next.t("entry-filter.sort-label")}>
+              {sorts.map(renderTab)}
+            </ul>
+            <Dropdown>
+              <DropdownToggle>
+                <Button
+                  size="sm"
+                  appearance="gray-link"
+                  icon={kebabMenuHorizontalSvg}
+                  aria-label={i18next.t("entry-filter.more-filters")}
+                  aria-haspopup="menu"
+                />
+              </DropdownToggle>
+              <DropdownMenu align="left">
+                {overflow.map((item) => (
+                  <DropdownItem key={item.id} href={item.href} selected={item.selected}>
+                    {item.label}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
           </div>
-        </div>
+        )}
+      </div>
+      <div className="flex lg:hidden feed-navigation-mobile">
+        {showSources && (
+          <Dropdown>
+            <DropdownToggle>
+              <Button size="sm" icon={menuDownSvg} appearance="gray-link">
+                {selectedSource?.label}
+              </Button>
+            </DropdownToggle>
+            <DropdownMenu align="left">
+              {sources.map((item) => (
+                <DropdownItem key={item.id} selected={item.selected} onClick={item.onClick}>
+                  {item.label}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
+        {!isFollowing && (
+          <Dropdown>
+            <DropdownToggle>
+              <Button size="sm" icon={menuDownSvg} appearance="gray-link">
+                {selectedSort?.label ?? i18next.t("entry-filter.sort-label")}
+              </Button>
+            </DropdownToggle>
+            <DropdownMenu align="left">
+              {[...sorts, ...overflow].map((item) => (
+                <DropdownItem key={item.id} selected={item.selected} onClick={item.onClick}>
+                  {item.label}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
       </div>
+      {isFollowing && reblogToggle}
     </div>
   );
 }
diff --git a/apps/web/src/app/_components/my-favorites-widget/index.tsx b/apps/web/src/app/_components/my-favorites-widget/index.tsx
index 8d003733d3..ed53b0ac31 100644
--- a/apps/web/src/app/_components/my-favorites-widget/index.tsx
+++ b/apps/web/src/app/_components/my-favorites-widget/index.tsx
@@ -16,14 +16,13 @@ const MAX_VISIBLE = 5;
 export function MyFavoritesWidget() {
   const { activeUser } = useActiveAccount();
   const username = activeUser?.username;
-  const accessToken = useMemo(
-    () => (username ? getAccessToken(username) : undefined),
-    [username]
-  );
+  const accessToken = useMemo(() => (username ? getAccessToken(username) : undefined), [username]);
 
-  const { data: favorites, isLoading, isError } = useQuery(
-    getFavoritesQueryOptions(username, accessToken)
-  );
+  const {
+    data: favorites,
+    isLoading,
+    isError
+  } = useQuery(getFavoritesQueryOptions(username, accessToken));
 
   const [showDialog, setShowDialog] = useState(false);
 
@@ -32,8 +31,8 @@ export function MyFavoritesWidget() {
   }
 
   return (
-    <div className="mb-4">
-      <div className="font-semibold">{i18next.t("my-favorites-widget.title")}</div>
+    <div className="feed-favorites mb-8">
+      <h2 className="feed-sidebar-heading">{i18next.t("my-favorites-widget.title")}</h2>
       <div className="flex flex-col gap-2 mt-2">
         {isLoading &&
           new Array(MAX_VISIBLE).fill(0).map((_, i) => (
@@ -67,10 +66,9 @@ export function MyFavoritesWidget() {
       </div>
       {!isLoading && favorites && favorites.length > MAX_VISIBLE && (
         <Button
-          className="mt-2"
+          className="feed-sidebar-link mt-2"
           size="sm"
-          appearance="gray"
-          full={true}
+          appearance="link"
           onClick={() => setShowDialog(true)}
         >
           {i18next.t("my-favorites-widget.view-all")}
diff --git a/apps/web/src/app/_components/top-communities-widget/index.tsx b/apps/web/src/app/_components/top-communities-widget/index.tsx
index 19ccdcbf8f..7902bffad7 100644
--- a/apps/web/src/app/_components/top-communities-widget/index.tsx
+++ b/apps/web/src/app/_components/top-communities-widget/index.tsx
@@ -1,68 +1,85 @@
 "use client";
 
-import { CommunityListItem, CommunityListItemLoading } from "@/app/_components";
 import { getCommunityCache } from "@/core/caches";
 import { Community } from "@/entities";
-import { Button } from "@/features/ui";
+import { UserAvatar } from "@/features/shared/user-avatar";
+import { IntentLink } from "@/features/shared/intent-link";
+import { SubscriptionBtn } from "@/app/communities/_components/subscription-btn";
+import { formattedNumber, makePath } from "@/utils";
+import { AllFilter } from "@/enums";
 import { getCommunitiesQueryOptions } from "@ecency/sdk";
 import { useQuery } from "@tanstack/react-query";
 import i18next from "i18next";
 import Link from "next/link";
-import { Fragment, useMemo } from "react";
+import { useMemo } from "react";
 
 export const TopCommunitiesWidget = () => {
-  const { data: ecencyCommunity } = useQuery(getCommunityCache("hive-125125"));
-  const { data, isLoading: loading } = useQuery(getCommunitiesQueryOptions("rank"));
+  const { data: ecencyCommunity, isLoading: ecencyLoading } = useQuery(
+    getCommunityCache("hive-125125")
+  );
+  const { data, isLoading, isError } = useQuery(getCommunitiesQueryOptions("rank"));
 
   const list = useMemo(() => {
-    if (!data || !ecencyCommunity) {
-      return [];
-    }
-
-    // CSPRNG pick — the picked community flows into URLs and CodeQL treats
-    // it as taint when sourced from Math.random. Rejection-sample to drop
-    // any draw that would introduce modulo bias.
-    const pickIndex = (n: number) => {
-      const limit = Math.floor(0x1_0000_0000 / n) * n;
-      const buf = new Uint32Array(1);
-      do {
-        crypto.getRandomValues(buf);
-      } while (buf[0] >= limit);
-      return buf[0] % n;
-    };
-
-    const result: Community[] = [];
-    while (result.length < 5 && result.length < data.length) {
-      const index = pickIndex(data.length);
-      if (result.every((item) => data[index].id !== item.id)) {
-        result.push(data[index]);
+    // A failed Town Square request must not hide the other suggestions. Keep
+    // the selection stable while reading, and deduplicate by community name.
+    const communities = new Map<string, Community>();
+    for (const community of [...(ecencyCommunity ? [ecencyCommunity] : []), ...(data ?? [])]) {
+      if (!communities.has(community.name)) {
+        communities.set(community.name, community);
       }
+      if (communities.size === 3) break;
     }
-    if (ecencyCommunity) {
-      return [ecencyCommunity, ...result.slice(0, result.length - 1)];
-    }
-
-    return result;
+    return [...communities.values()];
   }, [ecencyCommunity, data]);
+  const loading = isLoading || ecencyLoading;
 
   return (
-    <div className="mt-4">
-      <div className="font-semibold">{i18next.t("top-communities.title")}</div>
-      <div className="flex flex-col gap-2 lg:gap-4">
+    <div className="feed-communities">
+      <h2 className="feed-sidebar-heading">{i18next.t("top-communities.discover-title")}</h2>
+      <div className="flex flex-col gap-6">
+        {list.map((community) => (
+          <div key={community.name} className="feed-community">
+            <div className="feed-community-heading">
+              <IntentLink
+                href={makePath(AllFilter.hot, community.name)}
+                className="feed-community-name"
+              >
+                <UserAvatar username={community.name} size="small" />
+                <span>{community.title}</span>
+              </IntentLink>
+              <SubscriptionBtn community={community} buttonProps={{ size: "sm", outline: true }} />
+            </div>
+            <p className="feed-community-about">{community.about}</p>
+            <div className="feed-community-members">
+              {i18next.t("communities.n-subscribers", {
+                n: formattedNumber(community.subscribers, { fractionDigits: 0 })
+              })}
+            </div>
+          </div>
+        ))}
+        {list.length === 0 &&
+          loading &&
+          Array.from({ length: 3 }, (_, i) => (
+            <div
+              key={i}
+              className="h-24 rounded bg-gray-100 dark:bg-gray-800 animate-pulse"
+              aria-hidden="true"
+            />
+          ))}
         {list.length === 0 && !loading && (
-          <div className="no-results">{i18next.t("communities.no-results")}</div>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {i18next.t(isError ? "g.server-error" : "communities.no-results")}
+          </p>
         )}
-        {list.map((x, i) => (
-          <CommunityListItem key={i} community={x} small={true} />
-        ))}
-        {loading &&
-          new Array(5).fill(1).map((_, i) => <CommunityListItemLoading small={true} key={i} />)}
       </div>
-      <Link href="/communities/create" className="mt-4 block">
-        <Button full={true} size="sm" appearance="gray">
-          {i18next.t("top-communities.create-button")}
-        </Button>
+      <Link href="/communities" className="feed-sidebar-link">
+        {i18next.t("top-communities.explore")}
       </Link>
+      <div className="feed-community-create">
+        <Link href="/communities/create" className="feed-sidebar-link">
+          {i18next.t("top-communities.create-button")}
+        </Link>
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/app/_components/trending-tags-card/index.tsx b/apps/web/src/app/_components/trending-tags-card/index.tsx
index e5eecb7794..eae6b59458 100644
--- a/apps/web/src/app/_components/trending-tags-card/index.tsx
+++ b/apps/web/src/app/_components/trending-tags-card/index.tsx
@@ -3,16 +3,16 @@
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 
 import { FollowTagChipToggle, useFollowedTags } from "@/features/shared/follow-tag-btn";
-import { TagLink } from "@/features/shared/tag";
+import { makePathTag } from "@/features/shared/tag";
 import { getAccessToken } from "@/utils";
-import { Button } from "@ui/button";
 import { getTrendingTagsQueryOptions } from "@ecency/sdk";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { UilMultiply } from "@tooni/iconscout-unicons-react";
 import i18next from "i18next";
 import Link from "next/link";
+import { IntentLink } from "@/features/shared/intent-link";
 import { useParams, useRouter } from "next/navigation";
-import { Fragment, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import "./_index.scss";
 
 export function TrendingTagsCard() {
@@ -27,12 +27,13 @@ export function TrendingTagsCard() {
 
   const { activeUser } = useActiveAccount();
   const username = activeUser?.username;
-  const accessToken = useMemo(
-    () => (username ? getAccessToken(username) : undefined),
-    [username]
-  );
+  const accessToken = useMemo(() => (username ? getAccessToken(username) : undefined), [username]);
 
-  const { data: trendingTagsPages } = useInfiniteQuery(getTrendingTagsQueryOptions(250));
+  const {
+    data: trendingTagsPages,
+    isLoading,
+    isError
+  } = useInfiniteQuery(getTrendingTagsQueryOptions(250));
   // The user's followed tags come first, then the trending list without them,
   // so a followed topic is one click away and never listed twice.
   const { tags: favoriteTags } = useFollowedTags(username, accessToken);
@@ -40,7 +41,7 @@ export function TrendingTagsCard() {
   const trendingTags = useMemo(() => {
     const first = trendingTagsPages?.pages[0];
     if (!first) {
-      return first;
+      return pinnedTags;
     }
     const pinned = new Set(pinnedTags);
     return [...pinnedTags, ...first.filter((t) => !pinned.has(t))];
@@ -50,63 +51,54 @@ export function TrendingTagsCard() {
     router.push("/" + filter + ((activeUser && activeUser.username && "/my") || ""));
   }, [activeUser, filter, router]);
 
-  return (
-    <div className="trending-tags-card">
-      <h2 className="list-header">{i18next.t("trending-tags.title")}</h2>
+  // Keep the current topic reachable even when it falls outside the short list.
+  const visibleTags = useMemo(() => {
+    const selected = trendingTags?.includes(tag) ? tag : undefined;
+    return [...new Set([...(selected ? [selected] : []), ...(trendingTags ?? [])])].slice(0, 6);
+  }, [tag, trendingTags]);
 
-      <div className="flex flex-wrap gap-2">
-        {trendingTags?.slice(0, 30).map((t) => (
-          <Fragment key={t}>
-            <div className="flex">
-              <TagLink tag={t} type="link">
-                <>
-                  {t}
-                  {activeUser && <FollowTagChipToggle tag={t} />}
-                  {tag === t && (
-                    <div
-                      className="text-gray-600 flex dark:text-gray-400 ml-1 cursor-pointer"
-                      role="button"
-                      tabIndex={0}
-                      aria-label={i18next.t("g.dismiss", { defaultValue: "Dismiss" })}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        handleUnselection();
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          handleUnselection();
-                        }
-                      }}
-                    >
-                      <UilMultiply className="size-3.5" />
-                    </div>
-                  )}
-                </>
-              </TagLink>
-            </div>
-          </Fragment>
+  return (
+    <div className="trending-tags-card feed-topics">
+      <h2 className="feed-sidebar-heading">{i18next.t("trending-tags.title")}</h2>
+      <ul className="feed-topic-list">
+        {visibleTags.map((t) => (
+          <li key={t} className="feed-topic-row">
+            <IntentLink
+              href={makePathTag("created", t)}
+              aria-current={tag === t ? "page" : undefined}
+            >
+              <span aria-hidden="true">#</span>
+              <span className="truncate">{t}</span>
+            </IntentLink>
+            {activeUser && <FollowTagChipToggle tag={t} />}
+            {tag === t && (
+              <button
+                type="button"
+                className="feed-topic-dismiss"
+                aria-label={i18next.t("g.dismiss")}
+                onClick={handleUnselection}
+              >
+                <UilMultiply className="size-3.5" aria-hidden="true" />
+              </button>
+            )}
+          </li>
         ))}
-        {trendingTags?.length === 0 &&
-          Array.from(new Array(30).keys()).map((i) => (
-            <div
-              className="animate-pulse rounded-full h-[22px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey"
+        {isLoading &&
+          visibleTags.length === 0 &&
+          Array.from({ length: 6 }, (_, i) => (
+            <li
               key={i}
-              style={{
-                width: 64 + (i % 3) * 10
-              }}
+              className="h-8 w-28 rounded bg-gray-100 dark:bg-gray-800 animate-pulse"
+              aria-hidden="true"
             />
           ))}
-      </div>
-      {trendingTags && trendingTags.length > 0 && (
-        <Link href="/tags" className="mt-4 block">
-          <Button full={true} size="sm" appearance="gray">
-            {i18next.t("trending-tags.view-more")}
-          </Button>
-        </Link>
+      </ul>
+      {isError && visibleTags.length === 0 && (
+        <p className="text-sm text-gray-600 dark:text-gray-400">{i18next.t("g.server-error")}</p>
       )}
+      <Link href="/tags" className="feed-sidebar-link">
+        {i18next.t("trending-tags.explore")}
+      </Link>
     </div>
   );
 }
diff --git a/apps/web/src/features/i18n/locales/en-US.json b/apps/web/src/features/i18n/locales/en-US.json
index 51acc044a6..dac8ecd506 100644
--- a/apps/web/src/features/i18n/locales/en-US.json
+++ b/apps/web/src/features/i18n/locales/en-US.json
@@ -362,12 +362,14 @@
     "filter-year": "This year",
     "filter-alltime": "All time",
     "filter-no-reblog": "Exclude reblog",
+    "show-reblogs": "Show reblogs",
     "filter-with-reblog": "Include reblog"
   },
   "navbar": {
     "discover": "Discover",
     "decks": "Decks",
     "post": "Create Post",
+    "write": "Write",
     "day-theme": "Day Theme",
     "night-theme": "Night Theme",
     "address-placeholder": "enter url or search query",
@@ -668,6 +670,7 @@
   },
   "trending-tags": {
     "title": "Topics",
+    "explore": "Explore topics",
     "view-more": "View more"
   },
   "sort-trending-tags": {
@@ -3186,6 +3189,8 @@
   },
   "top-communities": {
     "title": "Top communities",
+    "discover-title": "Discover communities",
+    "explore": "Explore communities",
     "create-button": "Create your community"
   },
   "feedback-modal": {
diff --git a/apps/web/src/features/shared/entry-list-item/entry-list-item-muted-content.tsx b/apps/web/src/features/shared/entry-list-item/entry-list-item-muted-content.tsx
index b75c3f8889..3159cf8287 100644
--- a/apps/web/src/features/shared/entry-list-item/entry-list-item-muted-content.tsx
+++ b/apps/web/src/features/shared/entry-list-item/entry-list-item-muted-content.tsx
@@ -81,7 +81,7 @@ export function EntryListItemMutedContent({ entry: entryProp, isThumbLcp }: Prop
           </a>
         </div>
       )}
-      <div className={shouldShowMutedOverlay ? "opacity-50" : ""}>
+      <div className={shouldShowMutedOverlay ? "entry-preview opacity-50" : "entry-preview"}>
         {(!nsfw || showNsfw || globalNsfw) && (
           <EntryListItemThumbnail
             entryProp={entryProp}
diff --git a/apps/web/src/features/shared/entry-list-item/index.tsx b/apps/web/src/features/shared/entry-list-item/index.tsx
index 3441a9d623..14968eefb8 100644
--- a/apps/web/src/features/shared/entry-list-item/index.tsx
+++ b/apps/web/src/features/shared/entry-list-item/index.tsx
@@ -158,7 +158,7 @@ export function EntryListItemComponent({
         forceShow={actionsFocused}
         placeholder={
           <div
-            className="w-full flex md:w-auto md:inline-flex items-center gap-2 md:gap-3 rounded-xl border border-[--border-color] px-2 py-1 text-sm"
+            className="entry-actions w-full flex md:w-auto md:inline-flex items-center gap-2 md:gap-3 rounded-xl border border-[--border-color] px-2 py-1 text-sm"
             aria-hidden="true"
           >
             <span className="h-4 w-8 rounded bg-gray-200 dark:bg-dark-200" />
@@ -168,7 +168,7 @@ export function EntryListItemComponent({
           </div>
         }
       >
-        <div className="w-full flex md:w-auto md:inline-flex items-center gap-2 md:gap-3 rounded-xl border border-[--border-color] px-2 py-1 text-sm">
+        <div className="entry-actions w-full flex md:w-auto md:inline-flex items-center gap-2 md:gap-3 rounded-xl border border-[--border-color] px-2 py-1 text-sm">
           <EntryVoteBtn isPostSlider={true} entry={entry} account={account} />
           <EntryPayout entry={entry} />
           <div className="border-r border-[--border-color] w-[1px] h-4" />
diff --git a/apps/web/src/features/shared/navbar/index.tsx b/apps/web/src/features/shared/navbar/index.tsx
index 10d7233395..cb06840834 100644
--- a/apps/web/src/features/shared/navbar/index.tsx
+++ b/apps/web/src/features/shared/navbar/index.tsx
@@ -25,9 +25,16 @@ interface Props {
   setStepOne?: () => void;
   setStepTwo?: () => void;
   experimental?: boolean; // Use this flag for testing something
+  readingLayout?: boolean;
 }
 
-export function Navbar({ setStepOne, setStepTwo, step, experimental = false }: Props) {
+export function Navbar({
+  setStepOne,
+  setStepTwo,
+  step,
+  experimental = false,
+  readingLayout = false
+}: Props) {
   const { activeUser } = useActiveAccount();
   const [theme, toggleTheme] = useClientTheme();
 
@@ -103,9 +110,9 @@ export function Navbar({ setStepOne, setStepTwo, step, experimental = false }: P
   return (
     <div
       className={classNameObject({
-        "fixed z-20 top-[unset] bottom-0 md:top-0 md:bottom-[unset] left-0 right-0 flex flex-col justify-start":
-          true,
-        "md:p-2": experimental
+        "fixed z-20 top-[unset] bottom-0 md:top-0 md:bottom-[unset] left-0 right-0 flex flex-col justify-start": true,
+        "md:p-2": experimental,
+        "feed-navbar": readingLayout
       })}
       id="sticky-container"
     >
@@ -124,6 +131,7 @@ export function Navbar({ setStepOne, setStepTwo, step, experimental = false }: P
         setStepOne={setStepOne}
         setSmVisible={setSmVisible}
         experimental={experimental}
+        readingLayout={readingLayout}
       />
       <Suspense fallback={null}>
         <LoginDialog />
diff --git a/apps/web/src/features/shared/navbar/navbar-desktop.tsx b/apps/web/src/features/shared/navbar/navbar-desktop.tsx
index ef410a9d4d..18beb7708b 100644
--- a/apps/web/src/features/shared/navbar/navbar-desktop.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-desktop.tsx
@@ -28,6 +28,7 @@ interface Props {
   mainBarExpanded: boolean;
   setMainBarExpanded: (v: boolean) => void;
   experimental?: boolean; // Use this flag for testing something
+  readingLayout?: boolean;
 }
 
 export function NavbarDesktop({
@@ -36,7 +37,8 @@ export function NavbarDesktop({
   setStepOne,
   mainBarExpanded,
   setMainBarExpanded,
-  experimental = false
+  experimental = false,
+  readingLayout = false
 }: Props) {
   const { activeUser } = useActiveAccount();
   const hydrated = useHydrated();
@@ -66,8 +68,7 @@ export function NavbarDesktop({
     >
       <div
         className={classNameObject({
-          "ecency-navbar-desktop max-w-[1600px] w-full mx-auto flex items-center justify-between px-4 py-3":
-            true,
+          "ecency-navbar-desktop max-w-[1600px] w-full mx-auto flex items-center justify-between px-4 py-3": true,
           "bg-white dark:bg-dark-700 border-b border-[--border-color]": !experimental,
           "ecency-navbar-desktop-experemental glass-box rounded-2xl bg-white/80 dark:bg-dark-200/80 backdrop-blur-sm dark:backdrop-blur-md":
             experimental,
@@ -76,7 +77,7 @@ export function NavbarDesktop({
       >
         <NavbarMainSidebarToggle onClick={() => setMainBarExpanded(true)} />
         <div className="flex-1" />
-        <NavbarTextMenu />
+        <NavbarTextMenu readingLayout={readingLayout} />
         <div className="flex-spacer" />
         <Tooltip content="FAQ and documetation">
           <Button
@@ -94,12 +95,12 @@ export function NavbarDesktop({
           // isDesktop, so its chunk never loads on mobile; until it mounts the
           // pixel-identical server-rendered shell keeps the input visible from
           // the first paint (#1664).
-          <div className="max-w-[400px] w-full">
+          <div className="navbar-search-slot max-w-[400px] w-full">
             {isDesktop ? <Search /> : <NavbarSearchShell />}
           </div>
         )}
-        <div className="flex items-center ml-3 gap-3">
-          <NavbarPerksButton />
+        <div className="navbar-actions flex items-center ml-3 gap-3">
+          <NavbarPerksButton subdued={readingLayout} />
           <Tooltip content={i18next.t("chat.title")}>
             <div key={`desktop-chat-${activeUser?.username || "anon"}`} className="relative">
               <Button
@@ -110,19 +111,23 @@ export function NavbarDesktop({
                 aria-label={i18next.t("chat.title")}
               />
               {!unread?.truncated && unread?.totalUnread ? (
-                <span className="navbar-chat-badge notranslate">
-                  {unread.totalUnread}
-                </span>
+                <span className="navbar-chat-badge notranslate">{unread.totalUnread}</span>
               ) : null}
             </div>
           </Tooltip>
           <Tooltip content={i18next.t("navbar.post")}>
             <Button
               href="/publish"
-              appearance="gray-link"
+              appearance={readingLayout && activeUser ? "primary" : "gray-link"}
+              className={readingLayout ? "feed-write-button" : undefined}
+              iconPlacement="left"
               icon={<UilEditAlt />}
               aria-label={i18next.t("navbar.post")}
-            />
+            >
+              {readingLayout && (
+                <span className="hidden xl:inline">{i18next.t("navbar.write")}</span>
+              )}
+            </Button>
           </Tooltip>
           {hydrated && activeUser && (
             <NavbarNotificationsButton key={`desktop-notifications-${activeUser.username}`} />
@@ -150,7 +155,11 @@ export function NavbarDesktop({
         </div>
       </div>
       {hydrated && activeUser && (
-        <NavbarSide key={`desktop-${activeUser.username}`} show={showSidebar} setShow={setShowSidebar} />
+        <NavbarSide
+          key={`desktop-${activeUser.username}`}
+          show={showSidebar}
+          setShow={setShowSidebar}
+        />
       )}
       <NavbarMainSidebar
         show={mainBarExpanded}
diff --git a/apps/web/src/features/shared/navbar/navbar-perks-button.tsx b/apps/web/src/features/shared/navbar/navbar-perks-button.tsx
index c3ad589c6a..64a1b79689 100644
--- a/apps/web/src/features/shared/navbar/navbar-perks-button.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-perks-button.tsx
@@ -13,7 +13,7 @@ import * as ls from "@/utils/local-storage";
 /** Set once the user opens /perks — clears the one-time discovery dot. */
 export const PERKS_SEEN_KEY = "perks_seen";
 
-export function NavbarPerksButton() {
+export function NavbarPerksButton({ subdued = false }: { subdued?: boolean }) {
   const label = i18next.t("user-nav.perks");
   const { activeUser } = useActiveAccount();
 
@@ -44,19 +44,30 @@ export function NavbarPerksButton() {
     streak && streak.current > 0 ? (
       <Button
         href="/perks"
-        aria-label={streakLabel}
+        appearance={subdued ? "gray-link" : "primary"}
+        aria-label={subdued ? `${label}: ${streakLabel}` : streakLabel}
         title={streak.at_risk ? i18next.t("perks.quests.streak-at-risk") : streakLabel}
         className={clsx(
           "font-semibold flex items-center gap-1 whitespace-nowrap text-sm",
           streak.at_risk && "text-orange-500"
         )}
       >
-        <span aria-hidden>🔥</span>
-        <span>{streak.current > 99 ? "99+" : streak.current}</span>
+        <span className="inline-flex items-center gap-1.5">
+          {subdued ? (
+            <>
+              <UilFire className="size-4 xl:hidden" aria-hidden="true" />
+              <span className="hidden xl:inline">{label}</span>
+            </>
+          ) : (
+            <span aria-hidden>🔥</span>
+          )}
+          <span>{streak.current > 99 ? "99+" : streak.current}</span>
+        </span>
       </Button>
     ) : (
       <Button
         href="/perks"
+        appearance={subdued ? "gray-link" : "primary"}
         icon={<UilFire />}
         aria-label={label}
         title={label}
diff --git a/apps/web/src/features/shared/navbar/navbar-text-menu.tsx b/apps/web/src/features/shared/navbar/navbar-text-menu.tsx
index 5c93e61efa..0edb07b31a 100644
--- a/apps/web/src/features/shared/navbar/navbar-text-menu.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-text-menu.tsx
@@ -10,7 +10,7 @@ import { classNameObject } from "@ui/util";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import { useHydrated } from "@/api/queries";
 
-export function NavbarTextMenu() {
+export function NavbarTextMenu({ readingLayout = false }: { readingLayout?: boolean }) {
   const pathname = usePathname();
   const { activeUser } = useActiveAccount();
   const hydrated = useHydrated();
@@ -53,18 +53,18 @@ export function NavbarTextMenu() {
           <IntentLink
             key={item.link}
             className={classNameObject({
-              "text-sm font-semibold duration-300 hover:opacity-75 mt-0 px-2 py-0.5 rounded-2xl":
-                true,
+              "text-sm font-semibold duration-300 hover:opacity-75 mt-0 px-2 py-0.5 rounded-2xl": true,
               "text-gunmetal dark:text-white": !pathname?.includes(item.link),
               "bg-blue-duck-egg text-blue-dark-sky dark:bg-dark-default": pathname?.includes(
                 item.link
               )
             })}
             href={item.link}
+            aria-current={pathname?.includes(item.link) ? "page" : undefined}
           >
             {item.label}
           </IntentLink>
-          {i !== visibleItems.length - 1 && (
+          {!readingLayout && i !== visibleItems.length - 1 && (
             <i
               key={"circle" + item.label}
               className="size-2 bg-gray-200 dark:bg-dark-default rounded-full"
diff --git a/apps/web/src/specs/app/entry-index-menu.spec.tsx b/apps/web/src/specs/app/entry-index-menu.spec.tsx
index a8567ba19f..f46d570613 100644
--- a/apps/web/src/specs/app/entry-index-menu.spec.tsx
+++ b/apps/web/src/specs/app/entry-index-menu.spec.tsx
@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
@@ -5,13 +6,14 @@ import { useActiveAccount } from "@/core/hooks/use-active-account";
 // Route state is driven by the catch-all [...sections] segments. Tests mutate
 // `mockSections` before rendering to simulate Following / Communities / Global.
 let mockSections: string[] = [];
+let mockQuery = "";
 const mockPush = vi.fn();
 
 vi.mock("next/navigation", () => ({
   useParams: () => ({ sections: mockSections }),
   useRouter: () => ({ push: mockPush }),
   usePathname: () => "/" + mockSections.join("/"),
-  useSearchParams: () => new URLSearchParams()
+  useSearchParams: () => new URLSearchParams(mockQuery)
 }));
 
 import { EntryIndexMenu } from "@/app/_components/entry-index-menu";
@@ -48,6 +50,7 @@ const SORT = {
 describe("EntryIndexMenu — Source × Sort filter bar", () => {
   beforeEach(() => {
     mockSections = [];
+    mockQuery = "";
     mockPush.mockClear();
     setLoggedIn(false);
   });
@@ -58,7 +61,9 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     expect(screen.queryByRole("link", { name: SOURCE.following })).toBeNull();
     expect(screen.queryByRole("link", { name: SOURCE.communities })).toBeNull();
 
-    expect(screen.getByRole("link", { name: SORT.trending }).getAttribute("href")).toBe("/trending");
+    expect(screen.getByRole("link", { name: SORT.trending }).getAttribute("href")).toBe(
+      "/trending"
+    );
     expect(screen.getByRole("link", { name: SORT.hot }).getAttribute("href")).toBe("/hot");
     expect(screen.getByRole("link", { name: SORT.created }).getAttribute("href")).toBe("/created");
     // "Top" surfaces the payout sort out of the overflow menu.
@@ -96,7 +101,9 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     );
     expect(screen.getByRole("link", { name: SORT.top }).getAttribute("href")).toBe("/payout/my");
     // Global drops the tag, keeping the current sort.
-    expect(screen.getByRole("link", { name: SOURCE.global }).getAttribute("href")).toBe("/trending");
+    expect(screen.getByRole("link", { name: SOURCE.global }).getAttribute("href")).toBe(
+      "/trending"
+    );
   });
 
   it("hides sorts and shows the reblog toggle on the Following feed", () => {
@@ -107,13 +114,13 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     expect(screen.queryByRole("link", { name: SORT.trending })).toBeNull();
     expect(screen.queryByRole("link", { name: SORT.top })).toBeNull();
 
-    expect(
-      screen.getByRole("link", { name: SOURCE.following }).getAttribute("aria-current")
-    ).toBe("page");
-    // Reblog toggle replaces the sort group (rendered for both desktop and mobile).
-    expect(
-      screen.getAllByRole("button", { name: "entry-filter.filter-no-reblog" }).length
-    ).toBeGreaterThan(0);
+    expect(screen.getByRole("link", { name: SOURCE.following }).getAttribute("aria-current")).toBe(
+      "page"
+    );
+    expect(screen.getByRole("switch", { name: "entry-filter.show-reblogs" })).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
   });
 
   it("does not strand logged-out visitors on a feed URL — sorts stay as an escape", () => {
@@ -124,8 +131,39 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     // Not treated as the personal Following feed, so the sort tabs remain
     // navigable instead of collapsing to a lone reblog toggle.
     expect(screen.getByRole("link", { name: SORT.hot }).getAttribute("href")).toBe("/hot");
-    expect(screen.getByRole("link", { name: SORT.trending }).getAttribute("href")).toBe("/trending");
-    expect(screen.queryByRole("button", { name: "entry-filter.filter-no-reblog" })).toBeNull();
+    expect(screen.getByRole("link", { name: SORT.trending }).getAttribute("href")).toBe(
+      "/trending"
+    );
+    expect(screen.queryByRole("switch", { name: "entry-filter.show-reblogs" })).toBeNull();
+  });
+
+  it("excludes reblogs without dropping unrelated query parameters", () => {
+    setLoggedIn(true);
+    mockSections = ["feed", "@alice"];
+    mockQuery = "view=compact&test=a%26b";
+    render(<EntryIndexMenu />);
+    fireEvent.click(screen.getByRole("switch", { name: "entry-filter.show-reblogs" }));
+    expect(mockPush).toHaveBeenCalledWith("/feed/@alice?view=compact&test=a%26b&no-reblog=true");
+  });
+
+  it("reflects a bookmarked exclusion and only removes that filter when enabled", () => {
+    setLoggedIn(true);
+    mockSections = ["feed", "@alice"];
+    mockQuery = "no-reblog=true&view=compact";
+    render(<EntryIndexMenu />);
+    const toggle = screen.getByRole("switch", { name: "entry-filter.show-reblogs" });
+    expect(toggle).toHaveAttribute("aria-checked", "false");
+    fireEvent.click(toggle);
+    expect(mockPush).toHaveBeenCalledWith("/feed/@alice?view=compact");
+  });
+
+  it("does not leave a trailing question mark after enabling reblogs", () => {
+    setLoggedIn(true);
+    mockSections = ["feed", "@alice"];
+    mockQuery = "no-reblog=true";
+    render(<EntryIndexMenu />);
+    fireEvent.click(screen.getByRole("switch", { name: "entry-filter.show-reblogs" }));
+    expect(mockPush).toHaveBeenCalledWith("/feed/@alice");
   });
 
   it("labels the mobile sort trigger with the active overflow filter", () => {
@@ -146,8 +184,12 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     const chip = screen.getByRole("link", { name: "#photography" });
     expect(chip.getAttribute("aria-current")).toBe("page");
     // ...so Global must NOT read as selected.
-    expect(screen.getByRole("link", { name: SOURCE.global }).getAttribute("aria-current")).toBeNull();
-    expect(screen.getByRole("link", { name: SOURCE.global }).getAttribute("href")).toBe("/trending");
+    expect(
+      screen.getByRole("link", { name: SOURCE.global }).getAttribute("aria-current")
+    ).toBeNull();
+    expect(screen.getByRole("link", { name: SOURCE.global }).getAttribute("href")).toBe(
+      "/trending"
+    );
 
     // Sort tabs stay and preserve the hashtag.
     expect(screen.getByRole("link", { name: SORT.hot }).getAttribute("href")).toBe(
diff --git a/apps/web/src/specs/app/top-communities-widget.spec.tsx b/apps/web/src/specs/app/top-communities-widget.spec.tsx
new file mode 100644
index 0000000000..8d4d522e9d
--- /dev/null
+++ b/apps/web/src/specs/app/top-communities-widget.spec.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithQueryClient, mockCommunity } from "@/specs/test-utils";
+import type { Community } from "@/entities";
+
+const subscribe = vi.fn(async () => undefined);
+const unsubscribe = vi.fn(async () => undefined);
+let ranked: Community[] = [];
+let town: Community | null = null;
+let failTown = false;
+let failRanked = false;
+let subscriptions: string[][] = [];
+
+vi.mock("@/core/hooks/use-active-account", () => ({
+  useActiveAccount: () => ({ activeUser: { username: "alice" } })
+}));
+vi.mock("@/features/shared", () => ({
+  LoginRequired: ({ children }: React.PropsWithChildren) => <>{children}</>
+}));
+vi.mock("@/features/shared/user-avatar", () => ({
+  UserAvatar: () => <span />
+}));
+vi.mock("@/utils", async () => ({
+  ...(await vi.importActual<typeof import("@/utils")>("@/utils"))
+}));
+vi.mock("@/core/caches", () => ({
+  getCommunityCache: () => ({
+    queryKey: ["town"],
+    queryFn: async () => {
+      if (failTown) throw new Error("Town Square unavailable");
+      return town;
+    }
+  })
+}));
+vi.mock("@ecency/sdk", async () => ({
+  ...(await vi.importActual<typeof import("@ecency/sdk")>("@ecency/sdk")),
+  getCommunitiesQueryOptions: () => ({
+    queryKey: ["ranked"],
+    queryFn: async () => {
+      if (failRanked) throw new Error("Ranked communities unavailable");
+      return ranked;
+    }
+  }),
+  getAccountSubscriptionsQueryOptions: () => ({
+    queryKey: ["subscriptions"],
+    queryFn: async () => subscriptions
+  })
+}));
+vi.mock("@/api/sdk-mutations", () => ({
+  useSubscribeCommunityMutation: () => ({ mutateAsync: subscribe, isPending: false }),
+  useUnsubscribeCommunityMutation: () => ({ mutateAsync: unsubscribe, isPending: false })
+}));
+
+import { TopCommunitiesWidget } from "@/app/_components/top-communities-widget";
+
+describe("feed community suggestions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    failTown = false;
+    failRanked = false;
+    subscriptions = [];
+    town = mockCommunity({ name: "hive-125125", title: "Town Square" });
+    ranked = [
+      town,
+      mockCommunity({ name: "hive-100001", title: "Photography" }),
+      mockCommunity({ name: "hive-100002", title: "Gaming" }),
+      mockCommunity({ name: "hive-100003", title: "Music" })
+    ];
+  });
+
+  it("shows three distinct communities and keeps discovery and creation reachable", async () => {
+    renderWithQueryClient(<TopCommunitiesWidget />);
+    await screen.findByRole("link", { name: "Gaming" });
+    expect(screen.getAllByRole("link", { name: "Town Square" })).toHaveLength(1);
+    expect(screen.queryByRole("link", { name: "Music" })).toBeNull();
+    expect(screen.getByRole("link", { name: "Photography" })).toHaveAttribute(
+      "href",
+      "/created/hive-100001"
+    );
+    expect(screen.getByRole("link", { name: "top-communities.explore" })).toHaveAttribute(
+      "href",
+      "/communities"
+    );
+    expect(screen.getByRole("link", { name: "top-communities.create-button" })).toHaveAttribute(
+      "href",
+      "/communities/create"
+    );
+  });
+
+  it("renders the ranked list even when the Town Square request fails", async () => {
+    failTown = true;
+    ranked = ranked.slice(1);
+    renderWithQueryClient(<TopCommunitiesWidget />);
+    await screen.findByRole("link", { name: "Music" });
+    expect(screen.getByRole("link", { name: "Photography" })).toBeInTheDocument();
+  });
+
+  it("handles duplicates without hanging or repeating a community", async () => {
+    ranked = [town!, town!, ranked[1], ranked[1]];
+    renderWithQueryClient(<TopCommunitiesWidget />);
+    await screen.findByRole("link", { name: "Photography" });
+    expect(screen.getAllByRole("link", { name: "Town Square" })).toHaveLength(1);
+    expect(screen.getAllByRole("link", { name: "Photography" })).toHaveLength(1);
+  });
+
+  it("keeps cached Town Square available if ranking fails", async () => {
+    failRanked = true;
+    renderWithQueryClient(<TopCommunitiesWidget />);
+    expect(await screen.findByRole("link", { name: "Town Square" })).toBeInTheDocument();
+  });
+
+  it("retains join, joined status, and unsubscribe with the compact presentation", async () => {
+    ranked = [];
+    renderWithQueryClient(<TopCommunitiesWidget />);
+    fireEvent.click(await screen.findByRole("button", { name: "community.subscribe" }));
+    await waitFor(() => expect(subscribe).toHaveBeenCalledWith({ community: "hive-125125" }));
+    const joined = await screen.findByRole("button", { name: "community.subscribed" });
+    await waitFor(() => expect(joined).toBeEnabled());
+    fireEvent.click(joined);
+    await waitFor(() => expect(unsubscribe).toHaveBeenCalledWith({ community: "hive-125125" }));
+    expect(await screen.findByRole("button", { name: "community.subscribe" })).toBeInTheDocument();
+  });
+
+  it("keeps discovery links available when both requests fail", async () => {
+    failRanked = failTown = true;
+    renderWithQueryClient(<TopCommunitiesWidget />);
+    expect(await screen.findByText("g.server-error")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "top-communities.explore" })).toHaveAttribute(
+      "href",
+      "/communities"
+    );
+  });
+});
diff --git a/apps/web/src/specs/app/trending-tags-card.spec.tsx b/apps/web/src/specs/app/trending-tags-card.spec.tsx
index 9875091a12..6a1a403a9b 100644
--- a/apps/web/src/specs/app/trending-tags-card.spec.tsx
+++ b/apps/web/src/specs/app/trending-tags-card.spec.tsx
@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithQueryClient } from "@/specs/test-utils";
@@ -9,9 +9,12 @@ vi.mock("@/core/hooks/use-active-account", () => ({
   useActiveAccount: vi.fn()
 }));
 
+let sections = ["hot", ""];
+const push = vi.fn();
+
 vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: vi.fn() }),
-  useParams: () => ({ sections: ["hot", ""] })
+  useRouter: () => ({ push }),
+  useParams: () => ({ sections })
 }));
 
 // The global @/utils mock keeps only two members; TagLink needs isCommunity.
@@ -29,7 +32,7 @@ vi.mock("@/core/caches", () => ({
 }));
 
 let followedTags: string[] = [];
-const TRENDING = ["hive", "photography", "life", "art"];
+let trending = ["hive", "photography", "life", "art"];
 
 vi.mock("@ecency/sdk", async () => {
   const actual = await vi.importActual<typeof import("@ecency/sdk")>("@ecency/sdk");
@@ -37,7 +40,7 @@ vi.mock("@ecency/sdk", async () => {
     ...actual,
     getTrendingTagsQueryOptions: vi.fn(() => ({
       queryKey: ["trending-tags", 250],
-      queryFn: async () => TRENDING,
+      queryFn: async () => trending,
       initialPageParam: 0,
       getNextPageParam: () => undefined
     })),
@@ -56,16 +59,18 @@ vi.mock("@ecency/sdk", async () => {
   };
 });
 
-// The chips only: the card's "View more" link sits outside the flex-wrap row.
+// Topic links are separate from their follow and dismiss actions.
 const chipTexts = () =>
-  Array.from(document.querySelectorAll(".trending-tags-card .flex-wrap a")).map((a) =>
-    (a.textContent ?? "").trim()
+  Array.from(document.querySelectorAll(".feed-topic-list a")).map((a) =>
+    (a.textContent ?? "").replace(/^#/, "").trim()
   );
 
 describe("TrendingTagsCard", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     followedTags = [];
+    sections = ["hot", ""];
+    trending = ["hive", "photography", "life", "art"];
   });
 
   it("pins the user's followed tags first and lists each tag once", async () => {
@@ -87,7 +92,33 @@ describe("TrendingTagsCard", () => {
     renderWithQueryClient(<TrendingTagsCard />);
 
     await screen.findByText("art");
-    expect(chipTexts()).toEqual(TRENDING);
+    expect(chipTexts()).toEqual(trending);
     expect(screen.queryByRole("button", { name: "follow-tag.add" })).not.toBeInTheDocument();
   });
+  it("limits suggestions, keeps the selected topic and offers the full topics page", async () => {
+    vi.mocked(useActiveAccount).mockReturnValue({ activeUser: { username: "alice" } } as never);
+    trending = ["hive", "photography", "life", "art", "gaming", "music", "gardening", "travel"];
+    sections = ["hot", "travel"];
+    renderWithQueryClient(<TrendingTagsCard />);
+    await screen.findByText("travel");
+    expect(chipTexts()).toHaveLength(6);
+    expect(screen.getByText("travel").closest("a")).toHaveAttribute("aria-current", "page");
+    expect(screen.getByRole("link", { name: "trending-tags.explore" })).toHaveAttribute(
+      "href",
+      "/tags"
+    );
+    fireEvent.click(screen.getByRole("button", { name: "g.dismiss" }));
+    expect(push).toHaveBeenCalledWith("/hot/my");
+  });
+
+  it("does not put follow controls inside navigation links", async () => {
+    vi.mocked(useActiveAccount).mockReturnValue({ activeUser: { username: "alice" } } as never);
+    renderWithQueryClient(<TrendingTagsCard />);
+    await waitFor(() =>
+      expect(screen.getAllByRole("button", { name: "follow-tag.add" })).toHaveLength(4)
+    );
+    for (const control of screen.getAllByRole("button", { name: "follow-tag.add" })) {
+      expect(control.closest("a")).toBeNull();
+    }
+  });
 });
diff --git a/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx b/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
index ddc556581d..d726c5c334 100644
--- a/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
+++ b/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
@@ -4,7 +4,9 @@ import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-const useActiveAccount = vi.fn(() => ({ activeUser: { username: "tester" } as { username: string } | null }));
+const useActiveAccount = vi.fn(() => ({
+  activeUser: { username: "tester" } as { username: string } | null
+}));
 vi.mock("@/core/hooks/use-active-account", () => ({
   useActiveAccount: () => useActiveAccount()
 }));
@@ -22,14 +24,14 @@ import { NavbarPerksButton } from "@/features/shared/navbar/navbar-perks-button"
 
 type Streak = { current: number; best: number; at_risk: boolean };
 
-function renderWith(streak?: Streak) {
+function renderWith(streak?: Streak, subdued = false) {
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   if (streak) {
     queryClient.setQueryData(["quests", "status", "tester"], { streak });
   }
   return render(
     <QueryClientProvider client={queryClient}>
-      <NavbarPerksButton />
+      <NavbarPerksButton subdued={subdued} />
     </QueryClientProvider>
   );
 }
@@ -96,4 +98,13 @@ describe("NavbarPerksButton", () => {
     const { container } = renderWith({ current: 6, best: 6, at_risk: false });
     expect(dot(container)).toBeNull();
   });
+  test("the subdued feed variant preserves the streak, destination, and at-risk signal", () => {
+    markPerksSeen();
+    const { container } = renderWith({ current: 150, best: 200, at_risk: true }, true);
+    expect(control(container)).toHaveAttribute("href", "/perks");
+    expect(control(container)).toHaveAttribute("aria-label", "user-nav.perks: perks.quests.streak");
+    expect(container.textContent).toContain("99+");
+    expect(control(container).className).toContain("text-orange-500");
+    expect(dot(container)).not.toBeNull();
+  });
 });

From dc6ad48aca46d281ac4e357cfe614e1150d069eb Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Tue, 8 Sep 2026 05:58:12 +0000
Subject: [PATCH 2/7] Restore feed thumbnail placement and navbar width;
 refresh topic suggestions

---
 .../app/(dynamicPages)/feed/feed-reading.scss | 32 ++++---
 .../_components/entry-index-menu/index.tsx    |  2 +-
 .../_components/trending-tags-card/index.tsx  | 35 +++++--
 apps/web/src/features/i18n/locales/en-US.json |  2 +
 .../features/shared/navbar/navbar-desktop.tsx |  2 +-
 .../shared/navbar/navbar-perks-button.tsx     |  4 +-
 .../src/specs/app/trending-tags-card.spec.tsx | 95 ++++++++++++++++++-
 .../shared/navbar-perks-button.spec.tsx       |  7 +-
 8 files changed, 150 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss b/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
index f0469cae56..94685cbebd 100644
--- a/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
+++ b/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
@@ -59,6 +59,7 @@
 
   .feed-sidebar-link {
     @apply text-blue-dark-sky;
+
     display: inline-flex;
     align-items: center;
     min-height: 40px;
@@ -104,6 +105,7 @@
 
     > a {
       @apply text-gray-700 dark:text-gray-300;
+
       display: flex;
       align-items: center;
       gap: 10px;
@@ -143,6 +145,7 @@
 
   .feed-community-name {
     @apply text-gray-800 dark:text-gray-200;
+
     display: flex;
     align-items: center;
     gap: 8px;
@@ -163,6 +166,7 @@
 
   .feed-community-about {
     @apply line-clamp-2;
+
     color: var(--feed-muted);
     margin: 8px 0 4px;
     font-size: 14px;
@@ -184,10 +188,10 @@
   .entry-list-body:not(.grid-view) {
     .entry-list-item {
       margin-top: 0;
-      padding: 24px 0;
+      padding: 20px 0;
 
       .item-header {
-        margin-bottom: 10px;
+        margin-bottom: 8px;
         flex-wrap: wrap;
         overflow: visible;
         gap: 4px 12px;
@@ -243,6 +247,7 @@
         min-width: 0;
         .item-title {
           @apply text-gray-900 dark:text-gray-100;
+
           font-size: 22px;
           line-height: 1.35;
           max-height: none;
@@ -252,6 +257,7 @@
         }
         .item-body {
           @apply line-clamp-2;
+
           color: var(--feed-muted);
           font-size: 16px;
           line-height: 1.55;
@@ -294,18 +300,18 @@
     @media (min-width: 640px) {
       .entry-preview {
         display: flex;
-        flex-direction: row-reverse;
+        flex-direction: row;
         align-items: flex-start;
-        gap: 24px;
+        gap: 20px;
       }
 
       .entry-list-item .item-body {
         .item-image {
-          float: right;
+          float: left;
           flex: 0 0 150px;
           width: 150px;
           height: 104px;
-          margin: 0 0 0 24px;
+          margin: 0 20px 0 0;
           border-radius: 8px;
         }
         .entry-preview .item-image {
@@ -321,9 +327,9 @@
       }
 
       .entry-list-loading-item .item-image {
-        float: right;
-        margin-left: 24px;
-        margin-right: 0;
+        float: left;
+        margin-left: 0;
+        margin-right: 20px;
       }
     }
   }
@@ -362,7 +368,6 @@
   .feed-navigation-desktop {
     flex: 1;
     min-width: 0;
-    flex-direction: column;
   }
   .feed-source-tabs,
   .feed-sort-tabs {
@@ -390,7 +395,8 @@
   }
   .feed-tab-selected {
     @apply text-blue-dark-sky dark:text-blue-dark-sky;
-    border-bottom-color: currentColor;
+
+    border-bottom-color: currentcolor;
     font-weight: 600;
   }
   .feed-reblog-toggle {
@@ -406,6 +412,7 @@
   }
   .feed-switch-track {
     @apply bg-gray-300 dark:bg-gray-600;
+
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
@@ -432,9 +439,7 @@
 
 .feed-navbar {
   .ecency-navbar-desktop {
-    max-width: 1440px;
     gap: 12px;
-    padding-inline: 24px;
   }
   .navbar-search-slot {
     max-width: 320px;
@@ -470,7 +475,6 @@
 
   @media (max-width: 1279px) {
     .ecency-navbar-desktop {
-      padding-inline: 16px;
       gap: 8px;
     }
     .navbar-actions {
diff --git a/apps/web/src/app/_components/entry-index-menu/index.tsx b/apps/web/src/app/_components/entry-index-menu/index.tsx
index c9cf0ce349..f9b35a7c79 100644
--- a/apps/web/src/app/_components/entry-index-menu/index.tsx
+++ b/apps/web/src/app/_components/entry-index-menu/index.tsx
@@ -115,7 +115,7 @@ export function EntryIndexMenu() {
 
   return (
     <div className="entry-index-menu feed-navigation">
-      <div className="hidden lg:flex feed-navigation-desktop">
+      <div className="hidden lg:flex flex-col feed-navigation-desktop">
         {showSources && (
           <ul className="feed-source-tabs" aria-label={i18next.t("entry-filter.source-label")}>
             {sources.map(renderTab)}
diff --git a/apps/web/src/app/_components/trending-tags-card/index.tsx b/apps/web/src/app/_components/trending-tags-card/index.tsx
index eae6b59458..b4a37dfe19 100644
--- a/apps/web/src/app/_components/trending-tags-card/index.tsx
+++ b/apps/web/src/app/_components/trending-tags-card/index.tsx
@@ -12,7 +12,7 @@ import i18next from "i18next";
 import Link from "next/link";
 import { IntentLink } from "@/features/shared/intent-link";
 import { useParams, useRouter } from "next/navigation";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import "./_index.scss";
 
 export function TrendingTagsCard() {
@@ -38,14 +38,26 @@ export function TrendingTagsCard() {
   // so a followed topic is one click away and never listed twice.
   const { tags: favoriteTags } = useFollowedTags(username, accessToken);
   const pinnedTags = useMemo(() => favoriteTags?.map((f) => f.tag) ?? [], [favoriteTags]);
-  const trendingTags = useMemo(() => {
-    const first = trendingTagsPages?.pages[0];
-    if (!first) {
-      return pinnedTags;
+  const firstTrendingPage = trendingTagsPages?.pages[0];
+  const [shuffledTags, setShuffledTags] = useState<string[] | null>(null);
+
+  // Shuffle after hydration, then keep suggestions steady during local interactions.
+  useEffect(() => {
+    const shuffled = [...(firstTrendingPage ?? [])];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    setShuffledTags(shuffled);
+  }, [firstTrendingPage]);
+
+  const trendingTags = useMemo(() => {
     const pinned = new Set(pinnedTags);
-    return [...pinnedTags, ...first.filter((t) => !pinned.has(t))];
-  }, [pinnedTags, trendingTagsPages?.pages]);
+    return [
+      ...pinnedTags,
+      ...(shuffledTags ?? firstTrendingPage ?? []).filter((t) => !pinned.has(t))
+    ];
+  }, [pinnedTags, shuffledTags, firstTrendingPage]);
 
   const handleUnselection = useCallback(() => {
     router.push("/" + filter + ((activeUser && activeUser.username && "/my") || ""));
@@ -53,9 +65,14 @@ export function TrendingTagsCard() {
 
   // Keep the current topic reachable even when it falls outside the short list.
   const visibleTags = useMemo(() => {
-    const selected = trendingTags?.includes(tag) ? tag : undefined;
+    // Following URLs rewrite to /feed/feed/%40username; that segment is an account,
+    // while "my" and "global" identify feed sources rather than hashtags.
+    const selected =
+      filter !== "feed" && tag && tag !== "my" && tag !== "global" && !/^(@|%40)/i.test(tag)
+        ? tag
+        : undefined;
     return [...new Set([...(selected ? [selected] : []), ...(trendingTags ?? [])])].slice(0, 6);
-  }, [tag, trendingTags]);
+  }, [filter, tag, trendingTags]);
 
   return (
     <div className="trending-tags-card feed-topics">
diff --git a/apps/web/src/features/i18n/locales/en-US.json b/apps/web/src/features/i18n/locales/en-US.json
index dac8ecd506..f410185d5b 100644
--- a/apps/web/src/features/i18n/locales/en-US.json
+++ b/apps/web/src/features/i18n/locales/en-US.json
@@ -180,6 +180,7 @@
     "view-on-x": "View on X"
   },
   "g": {
+    "dismiss": "Dismiss",
     "now": "Now",
     "all": "All",
     "add": "Add",
@@ -370,6 +371,7 @@
     "decks": "Decks",
     "post": "Create Post",
     "write": "Write",
+    "perks-streak": "{{label}}: {{streak}}",
     "day-theme": "Day Theme",
     "night-theme": "Night Theme",
     "address-placeholder": "enter url or search query",
diff --git a/apps/web/src/features/shared/navbar/navbar-desktop.tsx b/apps/web/src/features/shared/navbar/navbar-desktop.tsx
index 18beb7708b..d2a11f3607 100644
--- a/apps/web/src/features/shared/navbar/navbar-desktop.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-desktop.tsx
@@ -122,7 +122,7 @@ export function NavbarDesktop({
               className={readingLayout ? "feed-write-button" : undefined}
               iconPlacement="left"
               icon={<UilEditAlt />}
-              aria-label={i18next.t("navbar.post")}
+              aria-label={i18next.t(readingLayout ? "navbar.write" : "navbar.post")}
             >
               {readingLayout && (
                 <span className="hidden xl:inline">{i18next.t("navbar.write")}</span>
diff --git a/apps/web/src/features/shared/navbar/navbar-perks-button.tsx b/apps/web/src/features/shared/navbar/navbar-perks-button.tsx
index 64a1b79689..9fc3b1cd33 100644
--- a/apps/web/src/features/shared/navbar/navbar-perks-button.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-perks-button.tsx
@@ -45,7 +45,9 @@ export function NavbarPerksButton({ subdued = false }: { subdued?: boolean }) {
       <Button
         href="/perks"
         appearance={subdued ? "gray-link" : "primary"}
-        aria-label={subdued ? `${label}: ${streakLabel}` : streakLabel}
+        aria-label={
+          subdued ? i18next.t("navbar.perks-streak", { label, streak: streakLabel }) : streakLabel
+        }
         title={streak.at_risk ? i18next.t("perks.quests.streak-at-risk") : streakLabel}
         className={clsx(
           "font-semibold flex items-center gap-1 whitespace-nowrap text-sm",
diff --git a/apps/web/src/specs/app/trending-tags-card.spec.tsx b/apps/web/src/specs/app/trending-tags-card.spec.tsx
index 6a1a403a9b..0034f8d891 100644
--- a/apps/web/src/specs/app/trending-tags-card.spec.tsx
+++ b/apps/web/src/specs/app/trending-tags-card.spec.tsx
@@ -1,9 +1,11 @@
 import { screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithQueryClient } from "@/specs/test-utils";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import { TrendingTagsCard } from "@/app/_components/trending-tags-card";
+import i18next from "i18next";
+import english from "@/features/i18n/locales/en-US.json";
 
 vi.mock("@/core/hooks/use-active-account", () => ({
   useActiveAccount: vi.fn()
@@ -68,11 +70,16 @@ const chipTexts = () =>
 describe("TrendingTagsCard", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.spyOn(Math, "random").mockReturnValue(0.999);
     followedTags = [];
     sections = ["hot", ""];
     trending = ["hive", "photography", "life", "art"];
   });
 
+  afterEach(() => {
+    vi.mocked(Math.random).mockRestore();
+  });
+
   it("pins the user's followed tags first and lists each tag once", async () => {
     vi.mocked(useActiveAccount).mockReturnValue({ activeUser: { username: "alice" } } as never);
     followedTags = ["art", "contest-2026"];
@@ -100,7 +107,7 @@ describe("TrendingTagsCard", () => {
     trending = ["hive", "photography", "life", "art", "gaming", "music", "gardening", "travel"];
     sections = ["hot", "travel"];
     renderWithQueryClient(<TrendingTagsCard />);
-    await screen.findByText("travel");
+    await screen.findByText("photography");
     expect(chipTexts()).toHaveLength(6);
     expect(screen.getByText("travel").closest("a")).toHaveAttribute("aria-current", "page");
     expect(screen.getByRole("link", { name: "trending-tags.explore" })).toHaveAttribute(
@@ -121,4 +128,88 @@ describe("TrendingTagsCard", () => {
       expect(control.closest("a")).toBeNull();
     }
   });
+
+  it("randomizes suggestions while keeping selected and followed topics first and stable", async () => {
+    vi.mocked(Math.random).mockReturnValue(0);
+    vi.mocked(useActiveAccount).mockReturnValue({ activeUser: { username: "alice" } } as never);
+    followedTags = ["art", "contest-2026"];
+    sections = ["hot", "niche-topic"];
+    trending = ["hive", "photography", "life", "art", "gaming", "music", "travel"];
+    const { rerender, unmount, queryClient } = renderWithQueryClient(<TrendingTagsCard />);
+    await waitFor(() =>
+      expect(chipTexts()).toEqual([
+        "niche-topic",
+        "art",
+        "contest-2026",
+        "photography",
+        "life",
+        "gaming"
+      ])
+    );
+    vi.mocked(Math.random).mockReturnValue(0.999);
+    rerender(<TrendingTagsCard />);
+    expect(chipTexts()).toEqual([
+      "niche-topic",
+      "art",
+      "contest-2026",
+      "photography",
+      "life",
+      "gaming"
+    ]);
+    expect(new Set(chipTexts()).size).toBe(6);
+    unmount();
+    renderWithQueryClient(<TrendingTagsCard />, { queryClient });
+    await waitFor(() =>
+      expect(chipTexts()).toEqual([
+        "niche-topic",
+        "art",
+        "contest-2026",
+        "hive",
+        "photography",
+        "life"
+      ])
+    );
+  });
+
+  it("keeps a non-trending route topic selected and dismissible", async () => {
+    vi.mocked(useActiveAccount).mockReturnValue({ activeUser: null } as never);
+    sections = ["created", "niche-topic"];
+    renderWithQueryClient(<TrendingTagsCard />);
+    await screen.findByText("photography");
+    expect(chipTexts()[0]).toBe("niche-topic");
+    expect(screen.getByText("niche-topic").closest("a")).toHaveAttribute("aria-current", "page");
+    fireEvent.click(screen.getByRole("button", { name: "g.dismiss" }));
+    expect(push).toHaveBeenCalledWith("/created");
+  });
+
+  it("gives the icon-only dismiss control a translated accessible name", async () => {
+    const { createInstance } = await vi.importActual<typeof import("i18next")>("i18next");
+    const translations = createInstance();
+    await translations.init({ lng: "en-US", resources: { "en-US": { translation: english } } });
+    const translate = vi.spyOn(i18next, "t").mockImplementation(translations.t);
+    try {
+      vi.mocked(useActiveAccount).mockReturnValue({ activeUser: null } as never);
+      sections = ["hot", "niche-topic"];
+      renderWithQueryClient(<TrendingTagsCard />);
+      fireEvent.click(screen.getByRole("button", { name: "Dismiss", exact: true }));
+      expect(push).toHaveBeenCalledWith("/hot");
+    } finally {
+      translate.mockRestore();
+    }
+  });
+
+  it.each([
+    ["hot", "my"],
+    ["hot", "global"],
+    ["feed", "%40alice"],
+    ["feed", "@alice"],
+    ["hot", "%40alice"]
+  ])("does not treat the %s/%s route marker as a selected topic", async (filter, tag) => {
+    vi.mocked(useActiveAccount).mockReturnValue({ activeUser: { username: "alice" } } as never);
+    sections = [filter, tag];
+    renderWithQueryClient(<TrendingTagsCard />);
+    await screen.findByText("photography");
+    expect(chipTexts()).toEqual(trending);
+    expect(screen.queryByRole("button", { name: "g.dismiss" })).not.toBeInTheDocument();
+  });
 });
diff --git a/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx b/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
index d726c5c334..f31de4e0ce 100644
--- a/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
+++ b/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
@@ -1,5 +1,6 @@
 import { vi } from "vitest";
 import React from "react";
+import i18next from "i18next";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -102,7 +103,11 @@ describe("NavbarPerksButton", () => {
     markPerksSeen();
     const { container } = renderWith({ current: 150, best: 200, at_risk: true }, true);
     expect(control(container)).toHaveAttribute("href", "/perks");
-    expect(control(container)).toHaveAttribute("aria-label", "user-nav.perks: perks.quests.streak");
+    expect(control(container)).toHaveAttribute("aria-label", "navbar.perks-streak");
+    expect(i18next.t).toHaveBeenCalledWith("navbar.perks-streak", {
+      label: "user-nav.perks",
+      streak: "perks.quests.streak"
+    });
     expect(container.textContent).toContain("99+");
     expect(control(container).className).toContain("text-orange-500");
     expect(dot(container)).not.toBeNull();

From 4c2c44478bf14b7eb785d70e617a7649340cb6f9 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Tue, 8 Sep 2026 06:15:23 +0000
Subject: [PATCH 3/7] Show all desktop feed filters and label the payout tab
 clearly

---
 .../_components/entry-index-menu/index.tsx    | 34 +++++--------------
 .../entry-index-menu/use-feed-menu.ts         | 27 +++++++++------
 .../src/specs/app/entry-index-menu.spec.tsx   | 29 +++++++++-------
 3 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/apps/web/src/app/_components/entry-index-menu/index.tsx b/apps/web/src/app/_components/entry-index-menu/index.tsx
index f9b35a7c79..f238a989f3 100644
--- a/apps/web/src/app/_components/entry-index-menu/index.tsx
+++ b/apps/web/src/app/_components/entry-index-menu/index.tsx
@@ -4,7 +4,7 @@ import { useActiveAccount } from "@/core/hooks/use-active-account";
 
 import React, { useCallback, useEffect, useMemo } from "react";
 import "./_index.scss";
-import { kebabMenuHorizontalSvg, menuDownSvg } from "@ui/svg";
+import { menuDownSvg } from "@ui/svg";
 import Link from "next/link";
 import i18next from "i18next";
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from "@ui/dropdown";
@@ -30,7 +30,7 @@ export function EntryIndexMenu() {
   const { activeUser } = useActiveAccount();
   const prevActiveUser = usePrevious(activeUser);
 
-  const { sources, sorts, overflow, isFollowing } = useFeedMenu();
+  const { sources, sorts, additionalFilters, isFollowing } = useFeedMenu();
 
   const noReblog = useMemo(() => searchParams?.get("no-reblog") === "true", [searchParams]);
 
@@ -42,11 +42,11 @@ export function EntryIndexMenu() {
     () => sources.find((s) => s.selected) ?? sources[sources.length - 1],
     [sources]
   );
-  // Include overflow (Muted/Promoted) so the mobile trigger reflects the active
-  // filter even when it isn't one of the visible sort tabs.
+  // Include Muted/Promoted so the mobile trigger reflects the active
+  // filter when the dropdown is closed.
   const selectedSort = useMemo(
-    () => [...sorts, ...overflow].find((s) => s.selected),
-    [sorts, overflow]
+    () => [...sorts, ...additionalFilters].find((s) => s.selected),
+    [sorts, additionalFilters]
   );
 
   // Logged-out users can't view a community ("/my") feed — fall back to global.
@@ -124,26 +124,8 @@ export function EntryIndexMenu() {
         {!isFollowing && (
           <div className="feed-sort-controls">
             <ul className="feed-sort-tabs" aria-label={i18next.t("entry-filter.sort-label")}>
-              {sorts.map(renderTab)}
+              {[...sorts, ...additionalFilters].map(renderTab)}
             </ul>
-            <Dropdown>
-              <DropdownToggle>
-                <Button
-                  size="sm"
-                  appearance="gray-link"
-                  icon={kebabMenuHorizontalSvg}
-                  aria-label={i18next.t("entry-filter.more-filters")}
-                  aria-haspopup="menu"
-                />
-              </DropdownToggle>
-              <DropdownMenu align="left">
-                {overflow.map((item) => (
-                  <DropdownItem key={item.id} href={item.href} selected={item.selected}>
-                    {item.label}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
           </div>
         )}
       </div>
@@ -172,7 +154,7 @@ export function EntryIndexMenu() {
               </Button>
             </DropdownToggle>
             <DropdownMenu align="left">
-              {[...sorts, ...overflow].map((item) => (
+              {[...sorts, ...additionalFilters].map((item) => (
                 <DropdownItem key={item.id} selected={item.selected} onClick={item.onClick}>
                   {item.label}
                 </DropdownItem>
diff --git a/apps/web/src/app/_components/entry-index-menu/use-feed-menu.ts b/apps/web/src/app/_components/entry-index-menu/use-feed-menu.ts
index 7c686b855e..9f3c34972d 100644
--- a/apps/web/src/app/_components/entry-index-menu/use-feed-menu.ts
+++ b/apps/web/src/app/_components/entry-index-menu/use-feed-menu.ts
@@ -25,8 +25,8 @@ const SORT_FILTERS: EntryFilter[] = [
  * Splits the feed filter bar into two orthogonal axes:
  *  - `sources`: where posts come from — Following, Communities, Global
  *    (Following/Communities require an active user; Global is always present)
- *  - `sorts`: how Communities/Global posts are ranked — Trending, Hot, New, Top
- *  - `overflow`: niche views surfaced behind a "more" menu — Muted, Promoted
+ *  - `sorts`: how Communities/Global posts are ranked — Trending, Hot, New, Payout
+ *  - `additionalFilters`: additional feed views — Muted, Promoted
  *
  * URL scheme is unchanged: Following → /@user/feed (rewritten to the feed
  * route), Communities → /{sort}/my, Global → /{sort}.
@@ -77,7 +77,7 @@ export function useFeedMenu() {
   const isGlobal = !isFollowing && !isCommunities && !hasTag;
 
   // Sort to carry when switching between Communities and Global. Following has no
-  // sort, and overflow views (muted/promoted) aren't real sorts, so default to Hot.
+  // sort, and additional views (muted/promoted) aren't real sorts, so default to Hot.
   const currentSort = SORT_FILTERS.includes(filter as EntryFilter)
     ? (filter as EntryFilter)
     : EntryFilter.hot;
@@ -128,7 +128,16 @@ export function useFeedMenu() {
     });
 
     return items;
-  }, [activeUser, currentSort, hasTag, isCommunities, isFollowing, isGlobal, normalizedTag, router]);
+  }, [
+    activeUser,
+    currentSort,
+    hasTag,
+    isCommunities,
+    isFollowing,
+    isGlobal,
+    normalizedTag,
+    router
+  ]);
 
   const sorts: FeedMenuItem[] = useMemo(() => {
     // Preserve the current source context when changing sort:
@@ -145,9 +154,7 @@ export function useFeedMenu() {
       const href = `/${x}${tagSegment ? `/${tagSegment}` : ""}`;
       return {
         label:
-          x === EntryFilter.payout
-            ? i18next.t("entry-filter.filter-top")
-            : i18next.t(`entry-filter.filter-${x}`),
+          x === EntryFilter.payout ? i18next.t("g.payout") : i18next.t(`entry-filter.filter-${x}`),
         href,
         selected: (filter as EntryFilter) === x,
         id: x,
@@ -156,7 +163,7 @@ export function useFeedMenu() {
     });
   }, [filter, isCommunities, normalizedTag, router]);
 
-  const overflow: FeedMenuItem[] = useMemo(
+  const additionalFilters: FeedMenuItem[] = useMemo(
     () => [
       {
         label: i18next.t("entry-filter.filter-muted"),
@@ -177,7 +184,7 @@ export function useFeedMenu() {
   );
 
   return useMemo(
-    () => ({ sources, sorts, overflow, isFollowing }),
-    [isFollowing, overflow, sorts, sources]
+    () => ({ sources, sorts, additionalFilters, isFollowing }),
+    [isFollowing, additionalFilters, sorts, sources]
   );
 }
diff --git a/apps/web/src/specs/app/entry-index-menu.spec.tsx b/apps/web/src/specs/app/entry-index-menu.spec.tsx
index f46d570613..0420bb7356 100644
--- a/apps/web/src/specs/app/entry-index-menu.spec.tsx
+++ b/apps/web/src/specs/app/entry-index-menu.spec.tsx
@@ -44,7 +44,7 @@ const SORT = {
   trending: "entry-filter.filter-trending",
   hot: "entry-filter.filter-hot",
   created: "entry-filter.filter-created",
-  top: "entry-filter.filter-top"
+  payout: "g.payout"
 };
 
 describe("EntryIndexMenu — Source × Sort filter bar", () => {
@@ -66,8 +66,8 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     );
     expect(screen.getByRole("link", { name: SORT.hot }).getAttribute("href")).toBe("/hot");
     expect(screen.getByRole("link", { name: SORT.created }).getAttribute("href")).toBe("/created");
-    // "Top" surfaces the payout sort out of the overflow menu.
-    expect(screen.getByRole("link", { name: SORT.top }).getAttribute("href")).toBe("/payout");
+    // The payout label uses the existing singular translation.
+    expect(screen.getByRole("link", { name: SORT.payout }).getAttribute("href")).toBe("/payout");
   });
 
   it("shows Following, Communities and Global as sources once logged in", () => {
@@ -99,7 +99,7 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     expect(screen.getByRole("link", { name: SORT.trending }).getAttribute("href")).toBe(
       "/trending/my"
     );
-    expect(screen.getByRole("link", { name: SORT.top }).getAttribute("href")).toBe("/payout/my");
+    expect(screen.getByRole("link", { name: SORT.payout }).getAttribute("href")).toBe("/payout/my");
     // Global drops the tag, keeping the current sort.
     expect(screen.getByRole("link", { name: SOURCE.global }).getAttribute("href")).toBe(
       "/trending"
@@ -112,7 +112,7 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     render(<EntryIndexMenu />);
 
     expect(screen.queryByRole("link", { name: SORT.trending })).toBeNull();
-    expect(screen.queryByRole("link", { name: SORT.top })).toBeNull();
+    expect(screen.queryByRole("link", { name: SORT.payout })).toBeNull();
 
     expect(screen.getByRole("link", { name: SOURCE.following }).getAttribute("aria-current")).toBe(
       "page"
@@ -166,13 +166,18 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     expect(mockPush).toHaveBeenCalledWith("/feed/@alice");
   });
 
-  it("labels the mobile sort trigger with the active overflow filter", () => {
-    mockSections = ["muted"];
+  it.each([
+    ["muted", "entry-filter.filter-muted"],
+    ["promoted", "entry-filter.filter-promoted"],
+    ["payout", "g.payout"]
+  ])("marks %s as active in desktop tabs and the mobile trigger", (filter, label) => {
+    mockSections = [filter];
     render(<EntryIndexMenu />);
 
-    // Muted lives in the overflow menu, but the closed mobile trigger must still
+    // The closed mobile trigger must still
     // reflect it rather than falling back to the generic "Sort by" label.
-    expect(screen.getByRole("button", { name: "entry-filter.filter-muted" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: label })).toBeTruthy();
+    expect(screen.getByRole("link", { name: label })).toHaveAttribute("aria-current", "page");
   });
 
   it("shows a hashtag chip, leaves Global unselected and keeps the tag on sorts", () => {
@@ -195,7 +200,7 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     expect(screen.getByRole("link", { name: SORT.hot }).getAttribute("href")).toBe(
       "/hot/photography"
     );
-    expect(screen.getByRole("link", { name: SORT.top }).getAttribute("href")).toBe(
+    expect(screen.getByRole("link", { name: SORT.payout }).getAttribute("href")).toBe(
       "/payout/photography"
     );
   });
@@ -213,12 +218,12 @@ describe("EntryIndexMenu — Source × Sort filter bar", () => {
     expect(screen.queryByRole("link", { name: SOURCE.communities })).toBeNull();
   });
 
-  it("exposes Muted and Promoted behind the More filters menu", () => {
+  it("exposes Muted and Promoted directly without a More filters menu", () => {
     setLoggedIn(true);
     mockSections = ["hot"];
     render(<EntryIndexMenu />);
 
-    fireEvent.click(screen.getByRole("button", { name: "entry-filter.more-filters" }));
+    expect(screen.queryByRole("button", { name: "entry-filter.more-filters" })).toBeNull();
 
     expect(
       screen.getByRole("link", { name: "entry-filter.filter-muted" }).getAttribute("href")

From 6615951f55dee720ecaa92a2ac1059414aa0ebc4 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Tue, 8 Sep 2026 06:51:02 +0000
Subject: [PATCH 4/7] Unify profile and community reading layouts with
 responsive grids

---
 .../community/[community]/[tag]/loading.tsx   |   8 +-
 .../_components/community-menu/index.tsx      |  26 +-
 .../community/[community]/community.scss      |  11 -
 .../community/[community]/layout.tsx          |  13 +-
 .../feed/[...sections]/entry-index.scss       |  14 +-
 .../feed/[...sections]/loading.tsx            |  12 +-
 .../app/(dynamicPages)/feed/feed-reading.scss | 226 +---------
 .../src/app/(dynamicPages)/feed/layout.tsx    |   5 +-
 .../profile/[username]/[section]/loading.tsx  |   8 +-
 .../_components/profile-info/_index.scss      |   2 +-
 .../_components/profile-menu/index.tsx        |  24 +-
 .../[username]/_components/profile-search.tsx |   2 +-
 .../profile/[username]/layout.tsx             |  15 +-
 .../profile/[username]/loading.tsx            |   8 +-
 .../shared/reading-layout/reading-layout.scss | 416 ++++++++++++++++++
 .../reading-layout/reading-list-loading.tsx   |  19 +
 .../features/ui/page-menu/page-menu-link.tsx  |   1 +
 apps/web/src/features/ui/tooltip.tsx          |  10 +-
 .../shared/reading-list-loading.spec.tsx      |  21 +
 19 files changed, 516 insertions(+), 325 deletions(-)
 create mode 100644 apps/web/src/features/shared/reading-layout/reading-layout.scss
 create mode 100644 apps/web/src/features/shared/reading-layout/reading-list-loading.tsx
 create mode 100644 apps/web/src/specs/features/shared/reading-list-loading.spec.tsx

diff --git a/apps/web/src/app/(dynamicPages)/community/[community]/[tag]/loading.tsx b/apps/web/src/app/(dynamicPages)/community/[community]/[tag]/loading.tsx
index 55e0116f68..d0a15f11e7 100644
--- a/apps/web/src/app/(dynamicPages)/community/[community]/[tag]/loading.tsx
+++ b/apps/web/src/app/(dynamicPages)/community/[community]/[tag]/loading.tsx
@@ -1,9 +1,5 @@
-import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
 
 export default function Loading() {
-  return (
-    <div className="flex flex-col gap-4">
-      <EntryListLoadingItem />
-    </div>
-  );
+  return <ReadingListLoading />;
 }
diff --git a/apps/web/src/app/(dynamicPages)/community/[community]/_components/community-menu/index.tsx b/apps/web/src/app/(dynamicPages)/community/[community]/_components/community-menu/index.tsx
index 8e14977a07..4d5cafd692 100644
--- a/apps/web/src/app/(dynamicPages)/community/[community]/_components/community-menu/index.tsx
+++ b/apps/web/src/app/(dynamicPages)/community/[community]/_components/community-menu/index.tsx
@@ -33,7 +33,10 @@ export const CommunityMenu = (props: Props) => {
     if (filter === EntryFilter.trending) {
       newLabel = i18next.t("community.posts");
     } else if (menuItems.some((item) => item === filter)) {
-      newLabel = i18next.t(`entry-filter.filter-${filter}`);
+      newLabel =
+        filter === EntryFilter.payout
+          ? i18next.t("g.payout")
+          : i18next.t(`entry-filter.filter-${filter}`);
     } else if (label && !newLabel) {
       newLabel = label;
     } else {
@@ -45,22 +48,23 @@ export const CommunityMenu = (props: Props) => {
   const isFilterInItems = () => menuItems.some((item) => filter === item);
 
   return (
-    <PageMenu className="pb-4 pt-4 md:pt-0">
+    <PageMenu className="reading-page-menu pb-4 pt-4 md:pt-0">
       <PageMenuMobileDropdown isSelected={isFilterInItems()} label={label}>
         {menuItems.map((x) => (
-            <DropdownItem
-                key={x}
-                href={`/${x}/${props.community.name}`}
-                selected={filter === x}
-            >
-              {i18next.t(`entry-filter.filter-${x}`)}
-            </DropdownItem>
+          <DropdownItem key={x} href={`/${x}/${props.community.name}`} selected={filter === x}>
+            {x === EntryFilter.payout
+              ? i18next.t("g.payout")
+              : i18next.t(`entry-filter.filter-${x}`)}
+          </DropdownItem>
         ))}
       </PageMenuMobileDropdown>
-      <PageMenuItems>
+      <PageMenuItems className="reading-page-tabs">
         {menuItems
           .map((x) => ({
-            label: i18next.t(`entry-filter.filter-${x}`),
+            label:
+              x === EntryFilter.payout
+                ? i18next.t("g.payout")
+                : i18next.t(`entry-filter.filter-${x}`),
             href: `/${x}/${props.community.name}`,
             selected: filter === x
           }))
diff --git a/apps/web/src/app/(dynamicPages)/community/[community]/community.scss b/apps/web/src/app/(dynamicPages)/community/[community]/community.scss
index 25e04ec530..b25e5510e4 100644
--- a/apps/web/src/app/(dynamicPages)/community/[community]/community.scss
+++ b/apps/web/src/app/(dynamicPages)/community/[community]/community.scss
@@ -22,16 +22,5 @@
   .content-side {
     flex-grow: 1;
     padding-bottom: 60px;
-
-    @media (min-width: $lg-break) {
-      .entry-list {
-        .entry-list-body.grid-view {
-          align-content: stretch;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-        }
-      }
-    }
   }
 }
diff --git a/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx b/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx
index e658b1e592..2cf6a1fde8 100644
--- a/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx
@@ -1,3 +1,4 @@
+import "@/features/shared/reading-layout/reading-layout.scss";
 import { Feedback } from "@/features/shared/feedback";
 import { Navbar } from "@/features/shared/navbar";
 import { ScrollToTop } from "@/features/shared/scroll-to-top";
@@ -28,12 +29,12 @@ export default async function CommunityPageLayout({ children, params }: PropsWit
   ]);
 
   return (
-    <>
+    <div className="reading-page">
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar />
-      <div className="app-content community-page">
+      <Navbar readingLayout />
+      <div className="app-content community-page reading-list-layout">
         <div className="profile-side">
           {account && communityData && (
             <CommunityCard account={account} community={communityData} />
@@ -50,10 +51,12 @@ export default async function CommunityPageLayout({ children, params }: PropsWit
         )}
         <div className="content-side">
           {communityData && <CommunityMenu community={communityData} />}
-          {communityData && account && <CommunityCover account={account} community={communityData} />}
+          {communityData && account && (
+            <CommunityCover account={account} community={communityData} />
+          )}
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/src/app/(dynamicPages)/feed/[...sections]/entry-index.scss b/apps/web/src/app/(dynamicPages)/feed/[...sections]/entry-index.scss
index bce6960b75..74ac1e99f6 100644
--- a/apps/web/src/app/(dynamicPages)/feed/[...sections]/entry-index.scss
+++ b/apps/web/src/app/(dynamicPages)/feed/[...sections]/entry-index.scss
@@ -13,7 +13,6 @@
     }
 
     @media (min-width: $lg-break) {
-
     }
   }
 
@@ -33,17 +32,6 @@
         border-bottom-color: transparent;
       }
     }
-
-    @media (min-width: $lg-break) {
-      .entry-list {
-        .entry-list-body.grid-view {
-          align-content: stretch;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-        }
-      }
-    }
   }
 
   .side-menu {
@@ -133,4 +121,4 @@
 
 .pt-6 {
   padding-top: 6rem !important;
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/app/(dynamicPages)/feed/[...sections]/loading.tsx b/apps/web/src/app/(dynamicPages)/feed/[...sections]/loading.tsx
index 901feea06e..2624ca2ea7 100644
--- a/apps/web/src/app/(dynamicPages)/feed/[...sections]/loading.tsx
+++ b/apps/web/src/app/(dynamicPages)/feed/[...sections]/loading.tsx
@@ -1,13 +1,5 @@
-import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
-import { LinearProgress } from "@/features/shared/linear-progress";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
 
 export default function Loading() {
-  return (
-    <div className="entry-list">
-      <div className="entry-list-body">
-        <LinearProgress />
-        <EntryListLoadingItem />
-      </div>
-    </div>
-  );
+  return <ReadingListLoading showProgress />;
 }
diff --git a/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss b/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
index 94685cbebd..fdea5f10de 100644
--- a/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
+++ b/apps/web/src/app/(dynamicPages)/feed/feed-reading.scss
@@ -1,26 +1,6 @@
 @import "../../../styles/vars_mixins";
 
-.feed-page {
-  min-height: 100vh;
-  display: flow-root;
-  --feed-muted: #606a74;
-
-  @include themify(night) {
-    background: #15171b;
-    --feed-muted: #a8adb6;
-    --border-color: #30343b;
-
-    .ecency-navbar-desktop {
-      background: #15171b;
-    }
-    .entry-list-body:not(.grid-view) .entry-list-item {
-      border-bottom-color: #292d33;
-    }
-  }
-}
-
-// Keep this treatment on feed routes. Profile lists, Decks, post pages and
-// the reader's grid preference continue to use their existing layouts.
+// Feed-specific column widths and sidebar treatments.
 .feed-reading-layout {
   max-width: 1440px;
   gap: 28px;
@@ -185,155 +165,6 @@
     border-top: 1px solid var(--border-color);
   }
 
-  .entry-list-body:not(.grid-view) {
-    .entry-list-item {
-      margin-top: 0;
-      padding: 20px 0;
-
-      .item-header {
-        margin-bottom: 8px;
-        flex-wrap: wrap;
-        overflow: visible;
-        gap: 4px 12px;
-      }
-
-      .item-header-main {
-        flex-shrink: 1;
-        flex-wrap: wrap;
-        min-width: 0;
-        row-gap: 4px;
-
-        .author-part .author-avatar {
-          min-width: 32px;
-          min-height: 36px;
-          margin-right: 8px;
-        }
-        .author-part .author,
-        .author-part .author-name {
-          font-weight: 500;
-        }
-        > a {
-          min-height: 32px;
-          max-width: 100%;
-        }
-        > a > div {
-          color: var(--feed-muted);
-          background: transparent;
-          border: 0;
-          padding-inline: 4px;
-          white-space: normal;
-          overflow-wrap: anywhere;
-        }
-        .date {
-          color: var(--feed-muted);
-        }
-      }
-
-      .item-header-features {
-        flex-wrap: wrap;
-        min-width: 0;
-        margin-bottom: 0;
-        .reblogged {
-          flex-shrink: 1;
-          flex-wrap: wrap;
-          opacity: 1;
-        }
-        &:empty {
-          display: none;
-        }
-      }
-
-      .item-summary {
-        min-width: 0;
-        .item-title {
-          @apply text-gray-900 dark:text-gray-100;
-
-          font-size: 22px;
-          line-height: 1.35;
-          max-height: none;
-          font-weight: 600;
-          overflow-wrap: anywhere;
-          @apply line-clamp-2;
-        }
-        .item-body {
-          @apply line-clamp-2;
-
-          color: var(--feed-muted);
-          font-size: 16px;
-          line-height: 1.55;
-          max-height: none;
-          margin: 6px 0 0;
-          overflow-wrap: anywhere;
-        }
-      }
-
-      .entry-actions {
-        width: 100%;
-        max-width: 100%;
-        flex-wrap: wrap;
-        gap: 6px 12px;
-        border: 0;
-        border-radius: 0;
-        padding: 8px 0 0;
-        min-height: 44px;
-
-        .entry-payout:not(.payout-declined):not(.payout-limit-hit),
-        .entry-votes .inner-btn,
-        .entry-reblog-btn:not(.reblogged):not(:hover) .inner-btn,
-        .entry-menu > button:not(:hover),
-        .entry-menu .dropdown-btn:not(:hover) {
-          color: var(--feed-muted);
-        }
-
-        > .border-r {
-          display: none;
-        }
-        > .text-gray-steel {
-          color: var(--feed-muted);
-        }
-        > * {
-          flex-shrink: 0;
-        }
-      }
-    }
-
-    @media (min-width: 640px) {
-      .entry-preview {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        gap: 20px;
-      }
-
-      .entry-list-item .item-body {
-        .item-image {
-          float: left;
-          flex: 0 0 150px;
-          width: 150px;
-          height: 104px;
-          margin: 0 20px 0 0;
-          border-radius: 8px;
-        }
-        .entry-preview .item-image {
-          margin: 0;
-        }
-        .entry-preview .item-image.noImage {
-          display: none;
-        }
-        .item-summary {
-          width: auto;
-          flex: 1;
-        }
-      }
-
-      .entry-list-loading-item .item-image {
-        float: left;
-        margin-left: 0;
-        margin-right: 20px;
-      }
-    }
-  }
-
   a:focus-visible,
   button:focus-visible,
   [tabindex="0"]:focus-visible {
@@ -343,15 +174,6 @@
 
   @media (max-width: 639px) {
     padding-inline: 16px;
-    .entry-list-body:not(.grid-view) .entry-list-item {
-      padding-block: 20px;
-      .item-summary .item-title {
-        font-size: 20px;
-      }
-      .entry-actions {
-        column-gap: 8px;
-      }
-    }
   }
 }
 
@@ -436,49 +258,3 @@
     }
   }
 }
-
-.feed-navbar {
-  .ecency-navbar-desktop {
-    gap: 12px;
-  }
-  .navbar-search-slot {
-    max-width: 320px;
-    min-width: 120px;
-    flex: 1;
-  }
-  .navbar-actions {
-    gap: 8px;
-    margin-left: 0;
-    flex-shrink: 0;
-  }
-  .text-menu {
-    gap: 8px;
-    flex-shrink: 0;
-  }
-  .text-menu a {
-    border-radius: 0;
-    padding: 12px 8px;
-  }
-  .text-menu a[aria-current="page"] {
-    background: transparent;
-    border-bottom: 2px solid #357ce6;
-  }
-  .feed-write-button {
-    white-space: nowrap;
-  }
-
-  a:focus-visible,
-  button:focus-visible {
-    outline: 2px solid #357ce6 !important;
-    outline-offset: 3px;
-  }
-
-  @media (max-width: 1279px) {
-    .ecency-navbar-desktop {
-      gap: 8px;
-    }
-    .navbar-actions {
-      gap: 4px;
-    }
-  }
-}
diff --git a/apps/web/src/app/(dynamicPages)/feed/layout.tsx b/apps/web/src/app/(dynamicPages)/feed/layout.tsx
index 070811e60f..5a333d00f1 100644
--- a/apps/web/src/app/(dynamicPages)/feed/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/feed/layout.tsx
@@ -1,3 +1,4 @@
+import "@/features/shared/reading-layout/reading-layout.scss";
 import { TrendingTagsCard } from "@/app/_components/trending-tags-card";
 import { EntryIndexMenu } from "@/app/_components/entry-index-menu";
 import React, { PropsWithChildren } from "react";
@@ -13,12 +14,12 @@ import "./feed-reading.scss";
 
 export default function FeedLayout({ children }: PropsWithChildren) {
   return (
-    <div className="feed-page">
+    <div className="feed-page reading-page">
       <ScrollToTop />
       <Theme />
       <Feedback />
       <Navbar readingLayout />
-      <div className="app-content entry-index-page feed-reading-layout">
+      <div className="app-content entry-index-page feed-reading-layout reading-list-layout">
         <div className="tags-side">
           <MyFavoritesWidget />
           <TrendingTagsCard />
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/[section]/loading.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/[section]/loading.tsx
index 55e0116f68..d0a15f11e7 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/[section]/loading.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/[section]/loading.tsx
@@ -1,9 +1,5 @@
-import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
 
 export default function Loading() {
-  return (
-    <div className="flex flex-col gap-4">
-      <EntryListLoadingItem />
-    </div>
-  );
+  return <ReadingListLoading />;
 }
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-info/_index.scss b/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-info/_index.scss
index cd78a58e78..97bdd36cbc 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-info/_index.scss
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-info/_index.scss
@@ -9,7 +9,7 @@
     margin-bottom: 6px;
     display: flex;
     align-items: center;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
 
     svg {
       @apply text-white;
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-menu/index.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-menu/index.tsx
index 1081c5cbbf..066aca416f 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-menu/index.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-menu/index.tsx
@@ -77,7 +77,7 @@ export function ProfileMenu({ username }: Props) {
   const allMenuItems = [...menuItems, ...kebabMenuItemsAll];
 
   return (
-    <PageMenu className="pb-4 pt-4 md:pt-0">
+    <PageMenu className="reading-page-menu pb-4 pt-4 md:pt-0">
       <PageMenuMobileDropdown
         label={
           allMenuItems.some((item) => item.id === section)
@@ -87,16 +87,12 @@ export function ProfileMenu({ username }: Props) {
         isSelected={false}
       >
         {dropDownMenuItems.map((item) => (
-            <DropdownItem
-                href={item.href}
-                key={item.id}
-                selected={item.selected}
-            >
-                {item.label}
-            </DropdownItem>
+          <DropdownItem href={item.href} key={item.id} selected={item.selected}>
+            {item.label}
+          </DropdownItem>
         ))}
       </PageMenuMobileDropdown>
-      <PageMenuItems>
+      <PageMenuItems className="reading-page-tabs">
         {menuItems.map((menuItem) => (
           <PageMenuLink
             href={menuItem.href!}
@@ -126,13 +122,9 @@ export function ProfileMenu({ username }: Props) {
           </DropdownToggle>
           <DropdownMenu align="left">
             {kebabMenuItems.map((item) => (
-                <DropdownItem
-                    href={item.href}
-                    key={item.id}
-                    selected={item.selected}
-                >
-                    {item.label}
-                </DropdownItem>
+              <DropdownItem href={item.href} key={item.id} selected={item.selected}>
+                {item.label}
+              </DropdownItem>
             ))}
           </DropdownMenu>
         </Dropdown>
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-search.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-search.tsx
index 0666e67fdf..433293ae40 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-search.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/_components/profile-search.tsx
@@ -57,7 +57,7 @@ export function ProfileSearch({ username }: Props) {
   return (
     <div
       className={clsx(
-        "bg-white p-2 md:p-4",
+        "reading-profile-search bg-white p-2 md:p-4",
         listStyle === ListStyle.grid ? "sm:rounded-xl mb-4" : "sm:rounded-t-xl"
       )}
     >
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
index bd96be4270..7f8d04eafb 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
@@ -1,3 +1,4 @@
+import "@/features/shared/reading-layout/reading-layout.scss";
 import { ProfileCard, ProfileMenu, ProfileSearch } from "./_components";
 import { PropsWithChildren } from "react";
 import { getAccountFullQueryOptions } from "@ecency/sdk";
@@ -21,17 +22,13 @@ export default async function ProfileLayout({ children, params }: Props) {
   const account = await prefetchQuery(getAccountFullQueryOptions(username));
 
   return (
-    <>
+    <div className="reading-page">
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar experimental={true} />
-      <div className="fixed top-0 left-0 w-full h-full bg-gradient-to-br from-blue-dark-sky to-blue-duck-egg backdrop-blur-lg -z-[1]" />
-      <div className="fixed top-0 left-0 w-full h-full bg-white/80 dark:bg-black/90 backdrop-blur-lg -z-[1]" />
-      <div className="pb-20 md:pb-0 profile-page pt-16 sm:pt-16 md:pt-[128px] max-w-[1600px] sm:px-2 md:px-2 mx-auto flex flex-col lg:flex-row gap-0 sm:gap-4 min-h-[100vh] items-start w-full">
-        <div
-          className="bg-white/80 dark:bg-dark-200/90 glass-box rounded-none sm:rounded-xl lg:min-w-[280px] lg:max-w-[280px] w-full overflow-hidden"
-        >
+      <Navbar readingLayout />
+      <div className="pb-20 md:pb-0 profile-page reading-list-layout pt-16 sm:pt-16 md:pt-[128px] max-w-[1600px] sm:px-2 md:px-2 mx-auto flex flex-col lg:flex-row gap-0 sm:gap-4 min-h-[100vh] items-start w-full">
+        <div className="bg-white/80 dark:bg-dark-200/90 glass-box rounded-none sm:rounded-xl lg:min-w-[280px] lg:max-w-[280px] w-full overflow-hidden">
           {account ? <ProfileCard account={account} /> : <ProfileCardLoading />}
 
           {account && <JsonLd data={buildProfileJsonLd({ account, username })} />}
@@ -43,6 +40,6 @@ export default async function ProfileLayout({ children, params }: Props) {
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/loading.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/loading.tsx
index 55e0116f68..d0a15f11e7 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/loading.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/loading.tsx
@@ -1,9 +1,5 @@
-import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
 
 export default function Loading() {
-  return (
-    <div className="flex flex-col gap-4">
-      <EntryListLoadingItem />
-    </div>
-  );
+  return <ReadingListLoading />;
 }
diff --git a/apps/web/src/features/shared/reading-layout/reading-layout.scss b/apps/web/src/features/shared/reading-layout/reading-layout.scss
new file mode 100644
index 0000000000..20e3e5d1d8
--- /dev/null
+++ b/apps/web/src/features/shared/reading-layout/reading-layout.scss
@@ -0,0 +1,416 @@
+@import "../../../styles/vars_mixins";
+
+.reading-page {
+  .profile-page,
+  .community-page {
+    max-width: 1200px;
+    padding-inline: 24px;
+    gap: 28px;
+  }
+
+  .profile-page {
+    padding-top: 96px;
+  }
+
+  .community-page {
+    .profile-side {
+      margin-right: 0;
+    }
+    .content-side {
+      min-width: 0;
+      width: 100%;
+    }
+  }
+
+  .reading-page-menu {
+    position: relative;
+    z-index: 15;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px 16px;
+    padding-block: 4px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .reading-profile-search {
+    background: transparent;
+    padding: 16px 0;
+    border-radius: 0;
+  }
+
+  .reading-page-tabs {
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+
+    > a {
+      padding: 12px 8px;
+      border-bottom: 2px solid transparent;
+      border-radius: 0;
+      overflow-wrap: anywhere;
+    }
+    > a[aria-current="page"] {
+      @apply text-blue-dark-sky;
+
+      background: transparent;
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .profile-page,
+    .community-page {
+      padding-inline: 16px;
+      gap: 20px;
+    }
+    .profile-page {
+      padding-top: 72px;
+    }
+  }
+}
+
+.reading-page {
+  min-height: 100vh;
+  display: flow-root;
+  --feed-muted: #606a74;
+
+  @include themify(night) {
+    background: #15171b;
+    --feed-muted: #a8adb6;
+    --border-color: #30343b;
+
+    .ecency-navbar-desktop {
+      background: #15171b;
+    }
+    .entry-list-body:not(.grid-view) .entry-list-item {
+      border-bottom-color: #292d33;
+    }
+  }
+}
+
+// Shared post and loading layouts, using the same row/grid preference.
+.reading-page .reading-list-layout {
+  .entry-list-body.grid-view {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+
+    > .linear-progress {
+      grid-column: 1 / -1;
+    }
+
+    .entry-list-item,
+    .entry-list-loading-item {
+      width: 100%;
+      min-width: 0;
+      margin: 0;
+      padding: 16px;
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+    }
+
+    .entry-list-item {
+      background: transparent;
+    }
+
+    .entry-list-item .item-image,
+    .entry-list-loading-item .item-image {
+      float: none;
+      width: 100%;
+      height: 200px;
+      min-height: 0;
+      margin: 0 0 10px;
+    }
+
+    .entry-list-loading-item {
+      .item-header,
+      .item-summary .item-title {
+        max-width: 100%;
+      }
+    }
+
+    .entry-actions {
+      flex-wrap: wrap;
+      width: 100%;
+      max-width: 100%;
+      gap: 6px 8px;
+      border: 0;
+      padding: 8px 0 0;
+    }
+
+    @media (max-width: 639px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .entry-list-body:not(.grid-view) {
+    .entry-list-item {
+      background: transparent;
+      border-radius: 0;
+      margin-top: 0;
+      padding: 20px 0;
+
+      .item-header {
+        margin-bottom: 8px;
+        flex-wrap: wrap;
+        overflow: visible;
+        gap: 4px 12px;
+      }
+
+      .item-header-main {
+        flex-shrink: 1;
+        flex-wrap: wrap;
+        min-width: 0;
+        row-gap: 4px;
+
+        .author-part .author-avatar {
+          min-width: 32px;
+          min-height: 36px;
+          margin-right: 8px;
+        }
+        .author-part .author,
+        .author-part .author-name {
+          font-weight: 500;
+        }
+        > a {
+          min-height: 32px;
+          max-width: 100%;
+        }
+        > a > div {
+          color: var(--feed-muted);
+          background: transparent;
+          border: 0;
+          padding-inline: 4px;
+          white-space: normal;
+          overflow-wrap: anywhere;
+        }
+        .date {
+          color: var(--feed-muted);
+        }
+      }
+
+      .item-header-features {
+        flex-wrap: wrap;
+        min-width: 0;
+        margin-bottom: 0;
+        .reblogged {
+          flex-shrink: 1;
+          flex-wrap: wrap;
+          opacity: 1;
+        }
+        &:empty {
+          display: none;
+        }
+      }
+
+      .item-summary {
+        min-width: 0;
+        .item-title {
+          @apply text-gray-900 dark:text-gray-100;
+
+          font-size: 22px;
+          line-height: 1.35;
+          max-height: none;
+          font-weight: 600;
+          overflow-wrap: anywhere;
+          @apply line-clamp-2;
+        }
+        .item-body {
+          @apply line-clamp-2;
+
+          color: var(--feed-muted);
+          font-size: 16px;
+          line-height: 1.55;
+          max-height: none;
+          margin: 6px 0 0;
+          overflow-wrap: anywhere;
+        }
+      }
+
+      .entry-actions {
+        width: 100%;
+        max-width: 100%;
+        flex-wrap: wrap;
+        gap: 6px 12px;
+        border: 0;
+        border-radius: 0;
+        padding: 8px 0 0;
+        min-height: 44px;
+
+        .entry-payout:not(.payout-declined):not(.payout-limit-hit),
+        .entry-votes .inner-btn,
+        .entry-reblog-btn:not(.reblogged):not(:hover) .inner-btn,
+        .entry-menu > button:not(:hover),
+        .entry-menu .dropdown-btn:not(:hover) {
+          color: var(--feed-muted);
+        }
+
+        > .border-r {
+          display: none;
+        }
+        > .text-gray-steel {
+          color: var(--feed-muted);
+        }
+        > * {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    @media (min-width: 640px) {
+      .entry-preview {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 20px;
+      }
+
+      .entry-list-item .item-body {
+        .item-image {
+          float: left;
+          flex: 0 0 150px;
+          width: 150px;
+          height: 104px;
+          margin: 0 20px 0 0;
+          border-radius: 8px;
+        }
+        .entry-preview .item-image {
+          margin: 0;
+        }
+        .entry-preview .item-image.noImage {
+          display: none;
+        }
+        .item-summary {
+          width: auto;
+          flex: 1;
+        }
+      }
+    }
+
+    .entry-list-loading-item {
+      margin-top: 0;
+      padding: 20px 0;
+
+      .item-header {
+        width: min(300px, 70%);
+        height: 36px;
+        margin-bottom: 8px;
+      }
+
+      > .item-body {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+
+        > .item-image {
+          float: none;
+          width: 100%;
+          height: auto;
+          aspect-ratio: 16 / 9;
+          margin: 0 0 10px;
+          border-radius: 8px;
+        }
+
+        > .item-summary {
+          float: none;
+          width: auto;
+          min-width: 0;
+
+          .item-title {
+            width: 70%;
+            height: 27px;
+          }
+        }
+
+        > .item-controls {
+          float: none;
+          grid-column: 1 / -1;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          width: 100%;
+          min-height: 44px;
+          padding-top: 8px;
+
+          > div {
+            float: none;
+            width: min(85px, 20%);
+            margin: 0;
+          }
+        }
+      }
+
+      @media (min-width: 640px) {
+        > .item-body {
+          grid-template-columns: 150px minmax(0, 1fr);
+          column-gap: 20px;
+
+          > .item-image {
+            height: 104px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 639px) {
+    .entry-list-body:not(.grid-view) .entry-list-item {
+      padding-block: 20px;
+      .item-summary .item-title {
+        font-size: 20px;
+      }
+      .entry-actions {
+        column-gap: 8px;
+      }
+    }
+  }
+}
+
+.feed-navbar {
+  .ecency-navbar-desktop {
+    gap: 12px;
+  }
+  .navbar-search-slot {
+    max-width: 320px;
+    min-width: 120px;
+    flex: 1;
+  }
+  .navbar-actions {
+    gap: 8px;
+    margin-left: 0;
+    flex-shrink: 0;
+  }
+  .text-menu {
+    gap: 8px;
+    flex-shrink: 0;
+  }
+  .text-menu a {
+    border-radius: 0;
+    padding: 12px 8px;
+  }
+  .text-menu a[aria-current="page"] {
+    background: transparent;
+    border-bottom: 2px solid #357ce6;
+  }
+  .feed-write-button {
+    white-space: nowrap;
+  }
+
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid #357ce6 !important;
+    outline-offset: 3px;
+  }
+
+  @media (max-width: 1279px) {
+    .ecency-navbar-desktop {
+      gap: 8px;
+    }
+    .navbar-actions {
+      gap: 4px;
+    }
+  }
+}
diff --git a/apps/web/src/features/shared/reading-layout/reading-list-loading.tsx b/apps/web/src/features/shared/reading-layout/reading-list-loading.tsx
new file mode 100644
index 0000000000..4182a1df7e
--- /dev/null
+++ b/apps/web/src/features/shared/reading-layout/reading-list-loading.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useGlobalStore } from "@/core/global-store";
+import { ListStyle } from "@/enums";
+import { EntryListLoadingItem } from "@/features/shared/entry-list-loading-item";
+import { LinearProgress } from "@/features/shared/linear-progress";
+
+export function ReadingListLoading({ showProgress = false }: { showProgress?: boolean }) {
+  const listStyle = useGlobalStore((state) => state.listStyle);
+
+  return (
+    <div className="entry-list">
+      <div className={`entry-list-body ${listStyle === ListStyle.grid ? "grid-view" : ""}`}>
+        {showProgress && <LinearProgress />}
+        <EntryListLoadingItem />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/features/ui/page-menu/page-menu-link.tsx b/apps/web/src/features/ui/page-menu/page-menu-link.tsx
index 03a29c2e2a..4242135d4e 100644
--- a/apps/web/src/features/ui/page-menu/page-menu-link.tsx
+++ b/apps/web/src/features/ui/page-menu/page-menu-link.tsx
@@ -15,6 +15,7 @@ export function PageMenuLink({ isSelected, href, label }: Props) {
         "text-gray-steel py-1 px-2 text-sm items-center hover:text-blue-dark-sky flex": true,
         "bg-blue-dark-sky text-white rounded-xl hover:text-white": isSelected
       })}
+      aria-current={isSelected ? "page" : undefined}
       href={href!}
     >
       {label}
diff --git a/apps/web/src/features/ui/tooltip.tsx b/apps/web/src/features/ui/tooltip.tsx
index 147105ded1..5564c83ec2 100644
--- a/apps/web/src/features/ui/tooltip.tsx
+++ b/apps/web/src/features/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { offset } from "@floating-ui/dom";
-import { flip, useFloating } from "@floating-ui/react-dom";
+import { flip, shift, useFloating } from "@floating-ui/react-dom";
 import { safeAutoUpdate } from "@ui/util";
 import clsx from "clsx";
 import React, { JSX, ReactNode, useEffect, useState } from "react";
@@ -49,7 +49,7 @@ export function StyledTooltip({
   const { refs, floatingStyles } = useFloating({
     whileElementsMounted: safeAutoUpdate,
     placement: "bottom",
-    middleware: [flip(), offset({ mainAxis: 4 })]
+    middleware: [flip(), offset({ mainAxis: 4 }), shift({ padding: 8 })]
   });
 
   const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -83,7 +83,11 @@ export function StyledTooltip({
           <div
             ref={refs.setFloating}
             className="z-[1070] absolute"
-            style={{ ...floatingStyles, visibility: show && content ? "visible" : "hidden" }}
+            style={{
+              ...floatingStyles,
+              maxWidth: "calc(100vw - 32px)",
+              visibility: show && content ? "visible" : "hidden"
+            }}
           >
             <div
               className={clsx(
diff --git a/apps/web/src/specs/features/shared/reading-list-loading.spec.tsx b/apps/web/src/specs/features/shared/reading-list-loading.spec.tsx
new file mode 100644
index 0000000000..281b43dd6a
--- /dev/null
+++ b/apps/web/src/specs/features/shared/reading-list-loading.spec.tsx
@@ -0,0 +1,21 @@
+import { render, act } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { useGlobalStore } from "@/core/global-store";
+import { ListStyle } from "@/enums";
+import { ReadingListLoading } from "@/features/shared/reading-layout/reading-list-loading";
+
+// Loading routes must follow the same shared preference as loaded lists.
+describe("ReadingListLoading", () => {
+  afterEach(() => useGlobalStore.getState().setListStyle(ListStyle.row));
+
+  it("uses the selected grid preference and follows changes back to rows", () => {
+    useGlobalStore.getState().setListStyle(ListStyle.grid);
+    const { container } = render(<ReadingListLoading showProgress />);
+    expect(container.querySelector(".entry-list-body.grid-view")).not.toBeNull();
+    expect(container.querySelectorAll(".entry-list-loading-item")).toHaveLength(6);
+    expect(container.querySelector(".linear-progress")).not.toBeNull();
+    act(() => useGlobalStore.getState().setListStyle(ListStyle.row));
+    expect(container.querySelector(".entry-list-body.grid-view")).toBeNull();
+    expect(container.querySelectorAll(".entry-list-loading-item")).toHaveLength(6);
+  });
+});

From 1a1f9c1e8bc036e03783e082a749939d879783fe Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Tue, 8 Sep 2026 07:14:30 +0000
Subject: [PATCH 5/7] Reduce outer margins on profile and community pages

---
 .../src/features/shared/reading-layout/reading-layout.scss    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/features/shared/reading-layout/reading-layout.scss b/apps/web/src/features/shared/reading-layout/reading-layout.scss
index 20e3e5d1d8..f2cc1547a3 100644
--- a/apps/web/src/features/shared/reading-layout/reading-layout.scss
+++ b/apps/web/src/features/shared/reading-layout/reading-layout.scss
@@ -3,8 +3,8 @@
 .reading-page {
   .profile-page,
   .community-page {
-    max-width: 1200px;
-    padding-inline: 24px;
+    max-width: 1600px;
+    padding-inline: 16px;
     gap: 28px;
   }
 

From 60a9194d73b7d0bd105bdd6cdacaa3c73032a510 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Tue, 8 Sep 2026 07:39:15 +0000
Subject: [PATCH 6/7] Clean up obsolete feed styles and strengthen accessible
 label tests

---
 .../profile/[username]/layout.tsx             |  2 +-
 apps/web/src/features/i18n/locales/en-US.json |  1 -
 .../src/specs/app/trending-tags-card.spec.tsx |  4 +--
 .../shared/navbar-perks-button.spec.tsx       | 29 +++++++++++--------
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
index 7f8d04eafb..917ec24074 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
@@ -27,7 +27,7 @@ export default async function ProfileLayout({ children, params }: Props) {
       <Theme />
       <Feedback />
       <Navbar readingLayout />
-      <div className="pb-20 md:pb-0 profile-page reading-list-layout pt-16 sm:pt-16 md:pt-[128px] max-w-[1600px] sm:px-2 md:px-2 mx-auto flex flex-col lg:flex-row gap-0 sm:gap-4 min-h-[100vh] items-start w-full">
+      <div className="pb-20 md:pb-0 profile-page reading-list-layout max-w-[1600px] sm:px-2 md:px-2 mx-auto flex flex-col lg:flex-row gap-0 sm:gap-4 min-h-[100vh] items-start w-full">
         <div className="bg-white/80 dark:bg-dark-200/90 glass-box rounded-none sm:rounded-xl lg:min-w-[280px] lg:max-w-[280px] w-full overflow-hidden">
           {account ? <ProfileCard account={account} /> : <ProfileCardLoading />}
 
diff --git a/apps/web/src/features/i18n/locales/en-US.json b/apps/web/src/features/i18n/locales/en-US.json
index f410185d5b..8c78b172e1 100644
--- a/apps/web/src/features/i18n/locales/en-US.json
+++ b/apps/web/src/features/i18n/locales/en-US.json
@@ -348,7 +348,6 @@
     "filter-community": "My Community",
     "source-label": "Feed source",
     "sort-label": "Sort by",
-    "more-filters": "More filters",
     "filter-controversial": "Controversial",
     "filter-rising": "Rising",
     "filter-global-part1": "This feed contains ",
diff --git a/apps/web/src/specs/app/trending-tags-card.spec.tsx b/apps/web/src/specs/app/trending-tags-card.spec.tsx
index 0034f8d891..eab9c20507 100644
--- a/apps/web/src/specs/app/trending-tags-card.spec.tsx
+++ b/apps/web/src/specs/app/trending-tags-card.spec.tsx
@@ -1,4 +1,4 @@
-import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { screen, fireEvent, waitFor, within } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithQueryClient } from "@/specs/test-utils";
@@ -63,7 +63,7 @@ vi.mock("@ecency/sdk", async () => {
 
 // Topic links are separate from their follow and dismiss actions.
 const chipTexts = () =>
-  Array.from(document.querySelectorAll(".feed-topic-list a")).map((a) =>
+  within(screen.getByRole("list")).queryAllByRole("link").map((a) =>
     (a.textContent ?? "").replace(/^#/, "").trim()
   );
 
diff --git a/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx b/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
index f31de4e0ce..890602a459 100644
--- a/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
+++ b/apps/web/src/specs/features/shared/navbar-perks-button.spec.tsx
@@ -1,7 +1,8 @@
 import { vi } from "vitest";
 import React from "react";
 import i18next from "i18next";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import english from "@/features/i18n/locales/en-US.json";
 import "@testing-library/jest-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
@@ -99,17 +100,21 @@ describe("NavbarPerksButton", () => {
     const { container } = renderWith({ current: 6, best: 6, at_risk: false });
     expect(dot(container)).toBeNull();
   });
-  test("the subdued feed variant preserves the streak, destination, and at-risk signal", () => {
+  test("the subdued feed variant preserves the streak, destination, and at-risk signal", async () => {
     markPerksSeen();
-    const { container } = renderWith({ current: 150, best: 200, at_risk: true }, true);
-    expect(control(container)).toHaveAttribute("href", "/perks");
-    expect(control(container)).toHaveAttribute("aria-label", "navbar.perks-streak");
-    expect(i18next.t).toHaveBeenCalledWith("navbar.perks-streak", {
-      label: "user-nav.perks",
-      streak: "perks.quests.streak"
-    });
-    expect(container.textContent).toContain("99+");
-    expect(control(container).className).toContain("text-orange-500");
-    expect(dot(container)).not.toBeNull();
+    const { createInstance } = await vi.importActual<typeof import("i18next")>("i18next");
+    const translations = createInstance();
+    await translations.init({ lng: "en-US", resources: { "en-US": { translation: english } } });
+    const translate = vi.spyOn(i18next, "t").mockImplementation(translations.t);
+    try {
+      const { container } = renderWith({ current: 150, best: 200, at_risk: true }, true);
+      const link = screen.getByRole("link", { name: "Perks: 150-day streak", exact: true });
+      expect(link).toHaveAttribute("href", "/perks");
+      expect(link).toHaveTextContent("99+");
+      expect(link).toHaveClass("text-orange-500");
+      expect(dot(container)).not.toBeNull();
+    } finally {
+      translate.mockRestore();
+    }
   });
 });

From c5bf116d6670dfc46fcff307209eb63cb16517a7 Mon Sep 17 00:00:00 2001
From: feruzm <fmiboy@gmail.com>
Date: Tue, 8 Sep 2026 07:50:37 +0000
Subject: [PATCH 7/7] Use a consistent shared navbar across application pages

---
 .../community/[community]/layout.tsx          |  2 +-
 .../[category]/[author]/[permlink]/layout.tsx |  2 +-
 .../src/app/(dynamicPages)/feed/layout.tsx    |  2 +-
 .../profile/[username]/layout.tsx             |  2 +-
 apps/web/src/app/communities/layout.tsx       |  2 +-
 apps/web/src/app/discover/layout.tsx          |  2 +-
 apps/web/src/app/gift/layout.tsx              |  2 +-
 apps/web/src/app/hosting/layout.tsx           |  2 +-
 apps/web/src/app/newsletter/layout.tsx        |  2 +-
 apps/web/src/app/perks/layout.tsx             |  2 +-
 apps/web/src/app/publish/layout.tsx           |  2 +-
 .../_components/signup-layout-client.tsx      |  2 +-
 .../src/app/wallet/setup-external/page.tsx    |  2 +-
 apps/web/src/app/waves/layout.tsx             |  2 +-
 .../src/features/shared/navbar/_index.scss    | 57 +++++++++++++++++++
 apps/web/src/features/shared/navbar/index.tsx | 19 +------
 .../features/shared/navbar/navbar-desktop.tsx | 25 +++-----
 .../shared/navbar/navbar-text-menu.tsx        | 42 ++++++--------
 .../shared/reading-layout/reading-layout.scss | 49 ----------------
 19 files changed, 98 insertions(+), 122 deletions(-)

diff --git a/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx b/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx
index 2cf6a1fde8..c49e83b31e 100644
--- a/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/community/[community]/layout.tsx
@@ -33,7 +33,7 @@ export default async function CommunityPageLayout({ children, params }: PropsWit
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar readingLayout />
+      <Navbar />
       <div className="app-content community-page reading-list-layout">
         <div className="profile-side">
           {account && communityData && (
diff --git a/apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/layout.tsx b/apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/layout.tsx
index cc9f1b4a88..810c398da7 100644
--- a/apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/layout.tsx
@@ -11,7 +11,7 @@ export default function EntryPageLayout(props: PropsWithChildren) {
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       {props.children}
     </>
   );
diff --git a/apps/web/src/app/(dynamicPages)/feed/layout.tsx b/apps/web/src/app/(dynamicPages)/feed/layout.tsx
index 5a333d00f1..f1d07fe5bb 100644
--- a/apps/web/src/app/(dynamicPages)/feed/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/feed/layout.tsx
@@ -18,7 +18,7 @@ export default function FeedLayout({ children }: PropsWithChildren) {
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar readingLayout />
+      <Navbar />
       <div className="app-content entry-index-page feed-reading-layout reading-list-layout">
         <div className="tags-side">
           <MyFavoritesWidget />
diff --git a/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx b/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
index 917ec24074..6e6e86aba1 100644
--- a/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
+++ b/apps/web/src/app/(dynamicPages)/profile/[username]/layout.tsx
@@ -26,7 +26,7 @@ export default async function ProfileLayout({ children, params }: Props) {
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar readingLayout />
+      <Navbar />
       <div className="pb-20 md:pb-0 profile-page reading-list-layout max-w-[1600px] sm:px-2 md:px-2 mx-auto flex flex-col lg:flex-row gap-0 sm:gap-4 min-h-[100vh] items-start w-full">
         <div className="bg-white/80 dark:bg-dark-200/90 glass-box rounded-none sm:rounded-xl lg:min-w-[280px] lg:max-w-[280px] w-full overflow-hidden">
           {account ? <ProfileCard account={account} /> : <ProfileCardLoading />}
diff --git a/apps/web/src/app/communities/layout.tsx b/apps/web/src/app/communities/layout.tsx
index b51c037e0f..9df68b1335 100644
--- a/apps/web/src/app/communities/layout.tsx
+++ b/apps/web/src/app/communities/layout.tsx
@@ -17,7 +17,7 @@ export default function Layout(props: PropsWithChildren) {
     <>
       <ScrollToTop />
       <Theme />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="bg-blue-duck-egg dark:bg-black pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
         <div className="container mx-auto px-2 sm:p-0 relative mt-4 md:mt-0">
           <div className="grid grid-cols-12 my-4 md:mb-10 items-center gap-4 md:gap-6 lg:gap-8 xl:gap-10 p-2 sm:p-0 md:mt-16">
diff --git a/apps/web/src/app/discover/layout.tsx b/apps/web/src/app/discover/layout.tsx
index 3eb9e78a0e..1022f9dfdc 100644
--- a/apps/web/src/app/discover/layout.tsx
+++ b/apps/web/src/app/discover/layout.tsx
@@ -23,7 +23,7 @@ export default function Layout(
       <ScrollToTop />
       <FullHeight />
       <Theme />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="bg-blue-duck-egg dark:bg-black pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
         <div className="absolute hidden lg:block top-16 left-0 right-0 h-[280px]">
           <Image
diff --git a/apps/web/src/app/gift/layout.tsx b/apps/web/src/app/gift/layout.tsx
index d3799d798c..3e2ddb48b5 100644
--- a/apps/web/src/app/gift/layout.tsx
+++ b/apps/web/src/app/gift/layout.tsx
@@ -6,7 +6,7 @@ export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="container mx-auto px-4">{children}</div>
     </div>
   );
diff --git a/apps/web/src/app/hosting/layout.tsx b/apps/web/src/app/hosting/layout.tsx
index e6a47d7696..1f96d00c81 100644
--- a/apps/web/src/app/hosting/layout.tsx
+++ b/apps/web/src/app/hosting/layout.tsx
@@ -10,7 +10,7 @@ export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="container mx-auto px-4">{children}</div>
     </div>
   );
diff --git a/apps/web/src/app/newsletter/layout.tsx b/apps/web/src/app/newsletter/layout.tsx
index c383ec9208..fc184e18c6 100644
--- a/apps/web/src/app/newsletter/layout.tsx
+++ b/apps/web/src/app/newsletter/layout.tsx
@@ -7,7 +7,7 @@ export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="container mx-auto px-4">{children}</div>
     </div>
   );
diff --git a/apps/web/src/app/perks/layout.tsx b/apps/web/src/app/perks/layout.tsx
index 68a57561fd..8a4bca33cd 100644
--- a/apps/web/src/app/perks/layout.tsx
+++ b/apps/web/src/app/perks/layout.tsx
@@ -7,7 +7,7 @@ export default function Layout({ children }: PropsWithChildren) {
   return (
     <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="container mx-auto">
         <PerksHeader />
         {children}
diff --git a/apps/web/src/app/publish/layout.tsx b/apps/web/src/app/publish/layout.tsx
index b23464a687..8802f5ac57 100644
--- a/apps/web/src/app/publish/layout.tsx
+++ b/apps/web/src/app/publish/layout.tsx
@@ -14,7 +14,7 @@ export default function Layout({ children }: PropsWithChildren) {
       <UploadTrackerProvider>
         <Theme />
         <Feedback />
-        <Navbar experimental={true} />
+        <Navbar />
         <div className="bg-blue-duck-egg dark:bg-dark-700 pb-4 md:pb-8 xl:pb-12">
           <div className="pt-16 md:pt-24 min-h-[100vh] mb-24 md:mb-0">{children}</div>
         </div>
diff --git a/apps/web/src/app/signup/_components/signup-layout-client.tsx b/apps/web/src/app/signup/_components/signup-layout-client.tsx
index 21655fcef9..bb1a19e1d2 100644
--- a/apps/web/src/app/signup/_components/signup-layout-client.tsx
+++ b/apps/web/src/app/signup/_components/signup-layout-client.tsx
@@ -31,7 +31,7 @@ export function SignupLayoutClient({ children }: PropsWithChildren) {
   return (
     <div className=" bg-blue-duck-egg dark:bg-transparent pt-[63px] md:pt-[69px] min-h-[100vh] pb-16">
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
 
       {/* Hoisted into <head> by React. The hero <img> below must stay lazy:
           its container is display:none under md, and a lazy image with no box
diff --git a/apps/web/src/app/wallet/setup-external/page.tsx b/apps/web/src/app/wallet/setup-external/page.tsx
index 8653f42ff3..9fcec79a81 100644
--- a/apps/web/src/app/wallet/setup-external/page.tsx
+++ b/apps/web/src/app/wallet/setup-external/page.tsx
@@ -50,7 +50,7 @@ export default function WalletSetupExternalPage() {
       <ScrollToTop />
       <Theme />
       <Feedback />
-      <Navbar experimental={true} />
+      <Navbar />
       <div className="fixed top-0 left-0 w-full h-full bg-gradient-to-br from-blue-dark-sky to-blue-duck-egg backdrop-blur-lg -z-[1]" />
       <div className="fixed top-0 left-0 w-full h-full bg-white/80 dark:bg-black/90 backdrop-blur-lg -z-[1]" />
       <div className="container mx-auto px-2 pt-[63px] md:pt-[69px] min-h-[100vh] pb-24 md:pb-16">
diff --git a/apps/web/src/app/waves/layout.tsx b/apps/web/src/app/waves/layout.tsx
index b53686de46..94c364c041 100644
--- a/apps/web/src/app/waves/layout.tsx
+++ b/apps/web/src/app/waves/layout.tsx
@@ -64,7 +64,7 @@ export default function WavesLayout(props: PropsWithChildren) {
       <div className="waves-page-layout bg-blue-duck-egg dark:bg-dark-700 min-h-[100vh]">
         <Feedback />
         <ScrollToTop />
-        <Navbar experimental={true} />
+        <Navbar />
         <div className="pt-16 pb-24 md:pt-[108px] md:pb-0 max-w-[1600px] md:px-6 lg:px-8 mx-auto grid grid-cols-12 gap-4 md:gap-6 xl:gap-8">
           <div className="hidden md:col-span-4 xl:col-span-3 md:flex flex-col gap-4 xl:gap-8">
             {isWaveDetails && waveAuthor ? (
diff --git a/apps/web/src/features/shared/navbar/_index.scss b/apps/web/src/features/shared/navbar/_index.scss
index 3891c92fb2..2757503c8c 100644
--- a/apps/web/src/features/shared/navbar/_index.scss
+++ b/apps/web/src/features/shared/navbar/_index.scss
@@ -52,3 +52,60 @@ body.is-inapp-browser .profile-page {
     padding-bottom: 0;
   }
 }
+
+.ecency-navbar {
+  .navbar-desktop-shell {
+    background: #fff;
+    border-bottom: 1px solid #e5e7eb;
+
+    @include themify(night) {
+      background: #15171b;
+      border-bottom-color: #30343b;
+    }
+  }
+
+  .ecency-navbar-desktop {
+    gap: 12px;
+  }
+  .navbar-search-slot {
+    max-width: 320px;
+    min-width: 120px;
+    flex: 1;
+  }
+  .navbar-actions {
+    gap: 8px;
+    margin-left: 0;
+    flex-shrink: 0;
+  }
+  .text-menu {
+    gap: 8px;
+    flex-shrink: 0;
+  }
+  .text-menu a {
+    border-radius: 0;
+    padding: 11px 8px;
+    border-bottom: 2px solid transparent;
+  }
+  .text-menu a[aria-current="page"] {
+    background: transparent;
+    border-bottom: 2px solid #357ce6;
+  }
+  .navbar-write-button {
+    white-space: nowrap;
+  }
+
+  a:focus-visible,
+  button:focus-visible {
+    outline: 2px solid #357ce6 !important;
+    outline-offset: 3px;
+  }
+
+  @media (max-width: 1279px) {
+    .ecency-navbar-desktop {
+      gap: 8px;
+    }
+    .navbar-actions {
+      gap: 4px;
+    }
+  }
+}
diff --git a/apps/web/src/features/shared/navbar/index.tsx b/apps/web/src/features/shared/navbar/index.tsx
index cb06840834..60a72da06e 100644
--- a/apps/web/src/features/shared/navbar/index.tsx
+++ b/apps/web/src/features/shared/navbar/index.tsx
@@ -8,7 +8,6 @@ import { NavbarMobile } from "./navbar-mobile";
 import { NavbarDesktop } from "./navbar-desktop";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Theme } from "@/enums";
-import { classNameObject } from "@ui/util";
 import { useClientTheme } from "@/api/queries";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 
@@ -24,17 +23,9 @@ interface Props {
   step?: number;
   setStepOne?: () => void;
   setStepTwo?: () => void;
-  experimental?: boolean; // Use this flag for testing something
-  readingLayout?: boolean;
 }
 
-export function Navbar({
-  setStepOne,
-  setStepTwo,
-  step,
-  experimental = false,
-  readingLayout = false
-}: Props) {
+export function Navbar({ setStepOne, setStepTwo, step }: Props) {
   const { activeUser } = useActiveAccount();
   const [theme, toggleTheme] = useClientTheme();
 
@@ -109,11 +100,7 @@ export function Navbar({
 
   return (
     <div
-      className={classNameObject({
-        "fixed z-20 top-[unset] bottom-0 md:top-0 md:bottom-[unset] left-0 right-0 flex flex-col justify-start": true,
-        "md:p-2": experimental,
-        "feed-navbar": readingLayout
-      })}
+      className="ecency-navbar fixed z-20 top-[unset] bottom-0 md:top-0 md:bottom-[unset] left-0 right-0 flex flex-col justify-start"
       id="sticky-container"
     >
       <NavbarMobile
@@ -130,8 +117,6 @@ export function Navbar({
         step={step}
         setStepOne={setStepOne}
         setSmVisible={setSmVisible}
-        experimental={experimental}
-        readingLayout={readingLayout}
       />
       <Suspense fallback={null}>
         <LoginDialog />
diff --git a/apps/web/src/features/shared/navbar/navbar-desktop.tsx b/apps/web/src/features/shared/navbar/navbar-desktop.tsx
index d2a11f3607..6beac68ec7 100644
--- a/apps/web/src/features/shared/navbar/navbar-desktop.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-desktop.tsx
@@ -27,8 +27,6 @@ interface Props {
   setSmVisible: (v: boolean) => void;
   mainBarExpanded: boolean;
   setMainBarExpanded: (v: boolean) => void;
-  experimental?: boolean; // Use this flag for testing something
-  readingLayout?: boolean;
 }
 
 export function NavbarDesktop({
@@ -36,9 +34,7 @@ export function NavbarDesktop({
   transparentVerify,
   setStepOne,
   mainBarExpanded,
-  setMainBarExpanded,
-  experimental = false,
-  readingLayout = false
+  setMainBarExpanded
 }: Props) {
   const { activeUser } = useActiveAccount();
   const hydrated = useHydrated();
@@ -62,22 +58,19 @@ export function NavbarDesktop({
 
   return (
     <div
-      className={`hidden md:flex w-full select-none relative ${
+      className={`navbar-desktop-shell hidden md:flex w-full select-none relative ${
         !transparentVerify && step === 1 ? "transparent" : ""
       } `}
     >
       <div
         className={classNameObject({
           "ecency-navbar-desktop max-w-[1600px] w-full mx-auto flex items-center justify-between px-4 py-3": true,
-          "bg-white dark:bg-dark-700 border-b border-[--border-color]": !experimental,
-          "ecency-navbar-desktop-experemental glass-box rounded-2xl bg-white/80 dark:bg-dark-200/80 backdrop-blur-sm dark:backdrop-blur-md":
-            experimental,
           transparent: !transparentVerify && step === 1
         })}
       >
         <NavbarMainSidebarToggle onClick={() => setMainBarExpanded(true)} />
         <div className="flex-1" />
-        <NavbarTextMenu readingLayout={readingLayout} />
+        <NavbarTextMenu />
         <div className="flex-spacer" />
         <Tooltip content="FAQ and documetation">
           <Button
@@ -100,7 +93,7 @@ export function NavbarDesktop({
           </div>
         )}
         <div className="navbar-actions flex items-center ml-3 gap-3">
-          <NavbarPerksButton subdued={readingLayout} />
+          <NavbarPerksButton subdued />
           <Tooltip content={i18next.t("chat.title")}>
             <div key={`desktop-chat-${activeUser?.username || "anon"}`} className="relative">
               <Button
@@ -118,15 +111,13 @@ export function NavbarDesktop({
           <Tooltip content={i18next.t("navbar.post")}>
             <Button
               href="/publish"
-              appearance={readingLayout && activeUser ? "primary" : "gray-link"}
-              className={readingLayout ? "feed-write-button" : undefined}
+              appearance={activeUser ? "primary" : "gray-link"}
+              className="navbar-write-button"
               iconPlacement="left"
               icon={<UilEditAlt />}
-              aria-label={i18next.t(readingLayout ? "navbar.write" : "navbar.post")}
+              aria-label={i18next.t("navbar.write")}
             >
-              {readingLayout && (
-                <span className="hidden xl:inline">{i18next.t("navbar.write")}</span>
-              )}
+              <span className="hidden xl:inline">{i18next.t("navbar.write")}</span>
             </Button>
           </Tooltip>
           {hydrated && activeUser && (
diff --git a/apps/web/src/features/shared/navbar/navbar-text-menu.tsx b/apps/web/src/features/shared/navbar/navbar-text-menu.tsx
index 0edb07b31a..579d232698 100644
--- a/apps/web/src/features/shared/navbar/navbar-text-menu.tsx
+++ b/apps/web/src/features/shared/navbar/navbar-text-menu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { Fragment } from "react";
+import React from "react";
 import { IntentLink } from "@/features/shared/intent-link";
 import i18next from "i18next";
 import i18n from "i18next";
@@ -10,7 +10,7 @@ import { classNameObject } from "@ui/util";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import { useHydrated } from "@/api/queries";
 
-export function NavbarTextMenu({ readingLayout = false }: { readingLayout?: boolean }) {
+export function NavbarTextMenu() {
   const pathname = usePathname();
   const { activeUser } = useActiveAccount();
   const hydrated = useHydrated();
@@ -48,29 +48,21 @@ export function NavbarTextMenu({ readingLayout = false }: { readingLayout?: bool
 
   return (
     <div className="hidden sm:flex md:hidden xl:flex text-menu items-center gap-4 justify-center h-full md:mr-2">
-      {visibleItems.map((item, i) => (
-        <Fragment key={i}>
-          <IntentLink
-            key={item.link}
-            className={classNameObject({
-              "text-sm font-semibold duration-300 hover:opacity-75 mt-0 px-2 py-0.5 rounded-2xl": true,
-              "text-gunmetal dark:text-white": !pathname?.includes(item.link),
-              "bg-blue-duck-egg text-blue-dark-sky dark:bg-dark-default": pathname?.includes(
-                item.link
-              )
-            })}
-            href={item.link}
-            aria-current={pathname?.includes(item.link) ? "page" : undefined}
-          >
-            {item.label}
-          </IntentLink>
-          {!readingLayout && i !== visibleItems.length - 1 && (
-            <i
-              key={"circle" + item.label}
-              className="size-2 bg-gray-200 dark:bg-dark-default rounded-full"
-            />
-          )}
-        </Fragment>
+      {visibleItems.map((item) => (
+        <IntentLink
+          key={item.link}
+          className={classNameObject({
+            "text-sm font-semibold duration-300 hover:opacity-75 mt-0 px-2 py-0.5 rounded-2xl": true,
+            "text-gunmetal dark:text-white": !pathname?.includes(item.link),
+            "bg-blue-duck-egg text-blue-dark-sky dark:bg-dark-default": pathname?.includes(
+              item.link
+            )
+          })}
+          href={item.link}
+          aria-current={pathname?.includes(item.link) ? "page" : undefined}
+        >
+          {item.label}
+        </IntentLink>
       ))}
     </div>
   );
diff --git a/apps/web/src/features/shared/reading-layout/reading-layout.scss b/apps/web/src/features/shared/reading-layout/reading-layout.scss
index f2cc1547a3..149054d375 100644
--- a/apps/web/src/features/shared/reading-layout/reading-layout.scss
+++ b/apps/web/src/features/shared/reading-layout/reading-layout.scss
@@ -82,9 +82,6 @@
     --feed-muted: #a8adb6;
     --border-color: #30343b;
 
-    .ecency-navbar-desktop {
-      background: #15171b;
-    }
     .entry-list-body:not(.grid-view) .entry-list-item {
       border-bottom-color: #292d33;
     }
@@ -368,49 +365,3 @@
     }
   }
 }
-
-.feed-navbar {
-  .ecency-navbar-desktop {
-    gap: 12px;
-  }
-  .navbar-search-slot {
-    max-width: 320px;
-    min-width: 120px;
-    flex: 1;
-  }
-  .navbar-actions {
-    gap: 8px;
-    margin-left: 0;
-    flex-shrink: 0;
-  }
-  .text-menu {
-    gap: 8px;
-    flex-shrink: 0;
-  }
-  .text-menu a {
-    border-radius: 0;
-    padding: 12px 8px;
-  }
-  .text-menu a[aria-current="page"] {
-    background: transparent;
-    border-bottom: 2px solid #357ce6;
-  }
-  .feed-write-button {
-    white-space: nowrap;
-  }
-
-  a:focus-visible,
-  button:focus-visible {
-    outline: 2px solid #357ce6 !important;
-    outline-offset: 3px;
-  }
-
-  @media (max-width: 1279px) {
-    .ecency-navbar-desktop {
-      gap: 8px;
-    }
-    .navbar-actions {
-      gap: 4px;
-    }
-  }
-}