diff --git a/web/navigation-panels/chat-thread-ancestors.css b/web/navigation-panels/chat-thread-ancestors.css
--- a/web/navigation-panels/chat-thread-ancestors.css
+++ b/web/navigation-panels/chat-thread-ancestors.css
@@ -1,51 +1,39 @@
-div.ancestorThreadsContainer {
+.container {
   font-size: var(--xs-font-12);
   display: flex;
   align-items: center;
-  column-gap: 5px;
+  column-gap: 12px;
 }
 
-div.ancestorName {
-  display: flex;
-  align-items: center;
-  padding: 2px 6px;
-  border-radius: 2px;
-  box-sizing: border-box;
-  line-height: 1.5;
-}
-
-button.seeFullStructure {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
+.communityName {
+  color: var(--thread-ancestor-color);
+  font-size: var(--l-font-18);
+  font-weight: var(--semi-bold);
+  white-space: nowrap;
 }
 
-div.ancestorKeyserver {
+.ancestorThreadsContainer {
+  border: 1px solid var(--topbar-lines);
+  border-radius: 8px;
   display: flex;
-  align-items: center;
+  padding: 7px 12px;
+  margin-right: 16px;
 }
 
-div.ancestorKeyserverName {
-  border-radius: 0 2px 2px 0;
+.ancestorName {
+  color: var(--thread-ancestor-color);
+  font-size: var(--xs-font-12);
+  font-weight: var(--semi-bold);
+  line-height: 1.5;
+  white-space: nowrap;
 }
 
-svg.ancestorSeparator {
+svg.chevronRight {
   color: var(--thread-ancestor-separator-color);
+  flex-shrink: 0;
 }
 
-div.ancestorKeyserverOperator {
-  display: flex;
-  column-gap: 5px;
-  padding: 0 5px;
-  align-items: center;
-  border: 1px solid var(--thread-ancestor-keyserver-border);
-  border-radius: 2px 0 0 2px;
-  height: 22px;
-  box-sizing: border-box;
-}
-
-button.seeFullAncestor {
-  font-size: var(--xs-font-12);
-  font-weight: var(--semi-bold);
-  cursor: pointer;
+svg.ancestorSeparator {
+  align-self: center;
+  padding: 0 8px;
 }
diff --git a/web/navigation-panels/chat-thread-ancestors.react.js b/web/navigation-panels/chat-thread-ancestors.react.js
--- a/web/navigation-panels/chat-thread-ancestors.react.js
+++ b/web/navigation-panels/chat-thread-ancestors.react.js
@@ -1,126 +1,70 @@
 // @flow
 
-import classNames from 'classnames';
+import classnames from 'classnames';
 import * as React from 'react';
+import { ChevronRight } from 'react-feather';
 
-import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
-import { colorIsDark } from 'lib/shared/thread-utils.js';
-import { useKeyserverAdmin } from 'lib/shared/user-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './chat-thread-ancestors.css';
-import CommIcon from '../CommIcon.react.js';
-
-const SHOW_SEE_FULL_STRUCTURE = false;
 
 type ThreadAncestorsProps = {
   +threadInfo: ThreadInfo,
 };
 function ThreadAncestors(props: ThreadAncestorsProps): React.Node {
   const { threadInfo } = props;
-  const { color: threadColor } = threadInfo;
-  const darkColor = colorIsDark(threadColor);
-  const threadColorStyle = React.useMemo(
-    () => ({
-      backgroundColor: `#${threadColor}`,
-      color: darkColor
-        ? 'var(--thread-ancestor-color-light)'
-        : 'var(--thread-ancestor-color-dark)',
-    }),
-    [darkColor, threadColor],
-  );
-  const fullStructureButtonColorStyle = React.useMemo(
-    () => ({ color: `#${threadColor}` }),
-    [threadColor],
-  );
 
-  const ancestorThreads = useAncestorThreads(threadInfo);
-
-  const community = ancestorThreads[0] ?? threadInfo;
-  const keyserverAdmin = useKeyserverAdmin(community);
-  const keyserverOwnerUsername = keyserverAdmin?.username;
+  const ancestorThreadsWithCommunity = useAncestorThreads(threadInfo);
 
+  const community = ancestorThreadsWithCommunity[0] ?? threadInfo;
   const resolvedCommunity = useResolvedThreadInfo(community);
 
-  const keyserverInfo = React.useMemo(
-    () => (
-      <div className={css.ancestorKeyserver}>
-        <div className={css.ancestorKeyserverOperator}>
-          <CommIcon icon="cloud-filled" size={12} />
-          <span>{keyserverOwnerUsername}</span>
-        </div>
-        <div
-          style={threadColorStyle}
-          className={classNames(css.ancestorName, css.ancestorKeyserverName)}
-        >
-          {resolvedCommunity.uiName}
-        </div>
-      </div>
-    ),
-    [resolvedCommunity.uiName, keyserverOwnerUsername, threadColorStyle],
-  );
+  const threadHasNoAncestors = community === threadInfo;
+
+  const ancestorThreads = ancestorThreadsWithCommunity.slice(1);
 
-  const middlePath = React.useMemo(() => {
-    if (ancestorThreads.length < 2) {
+  const chevronRight = React.useMemo(() => {
+    if (threadHasNoAncestors) {
       return null;
     }
-    return (
-      <>
-        <SWMansionIcon
-          className={css.ancestorSeparator}
-          icon="chevron-right"
-          size={12}
-        />
-        <div style={threadColorStyle} className={css.ancestorName}>
-          &hellip;
-        </div>
-      </>
-    );
-  }, [ancestorThreads.length, threadColorStyle]);
-
-  const threadHasNoAncestors = community === threadInfo;
+    return <ChevronRight size={20} className={css.chevronRight} />;
+  }, [threadHasNoAncestors]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
-  const currentThread = React.useMemo(() => {
+
+  const path = React.useMemo(() => {
     if (threadHasNoAncestors) {
       return null;
     }
+    const ancestors = ancestorThreads.map(ancestor => (
+      <ThreadAncestor threadInfo={ancestor} key={ancestor.id} />
+    ));
     return (
-      <>
-        <SWMansionIcon
-          className={css.ancestorSeparator}
-          icon="chevron-right"
-          size={12}
-        />
-        <div style={threadColorStyle} className={css.ancestorName}>
-          {uiName}
-        </div>
-      </>
+      <div className={css.ancestorThreadsContainer}>
+        {ancestors}
+        <div className={css.ancestorName}>{uiName}</div>
+      </div>
     );
-  }, [threadHasNoAncestors, threadColorStyle, uiName]);
+  }, [ancestorThreads, threadHasNoAncestors, uiName]);
 
-  let seeFullStructure = null;
-  if (SHOW_SEE_FULL_STRUCTURE) {
-    seeFullStructure = (
-      <button
-        style={fullStructureButtonColorStyle}
-        className={css.seeFullStructure}
-      >
-        See full structure
-      </button>
-    );
-  }
+  return (
+    <div className={css.container}>
+      <div className={css.communityName}>{resolvedCommunity.uiName}</div>
+      {chevronRight}
+      {path}
+    </div>
+  );
+}
 
+function ThreadAncestor(props: ThreadAncestorsProps): React.Node {
+  const { uiName } = useResolvedThreadInfo(props.threadInfo);
+  const chevronClasses = classnames(css.ancestorSeparator, css.chevronRight);
   return (
     <>
-      <div className={css.ancestorThreadsContainer}>
-        {keyserverInfo}
-        {middlePath}
-        {currentThread}
-      </div>
-      {seeFullStructure}
+      <div className={css.ancestorName}>{uiName}</div>
+      <ChevronRight size={12} className={chevronClasses} />
     </>
   );
 }
diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -3,27 +3,27 @@
   background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
   color: var(--thread-top-bar-color);
   height: 56px;
 }
 
 div.topBarThreadInfo {
-  height: 24px;
   display: flex;
   align-items: center;
-  column-gap: 8px;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.topBarThreadInfo::-webkit-scrollbar {
+  display: none;
 }
 
 div.threadColorSquare {
   width: 24px;
   height: 24px;
   border-radius: 4px;
-}
-
-p.threadTitle {
-  font-size: var(--m-font-16);
-  font-weight: var(--bold);
+  flex: 0 0 auto;
+  margin: 0 12px 0 16px;
 }
 
 div.hide {
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -4,7 +4,6 @@
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadAncestors from './chat-thread-ancestors.react.js';
 import css from './nav-state-info-bar.css';
@@ -22,7 +21,6 @@
     [threadInfo.color],
   );
 
-  const { uiName } = useResolvedThreadInfo(threadInfo);
   return (
     <>
       <div className={css.topBarThreadInfo}>
@@ -30,7 +28,6 @@
           className={css.threadColorSquare}
           style={threadBackgroundColorStyle}
         />
-        <p className={css.threadTitle}>{uiName}</p>
         <ThreadAncestors threadInfo={threadInfo} />
       </div>
     </>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -108,8 +108,7 @@
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
-  --thread-ancestor-color-light: var(--shades-white-70);
-  --thread-ancestor-color-dark: var(--shades-black-100);
+  --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
@@ -209,4 +208,5 @@
   --filter-panel-fg: var(--shades-black-60);
   --topbar-button-bg-hover: var(--shades-black-80);
   --topbar-button-fg: var(--shades-white-60);
+  --topbar-lines: rgba(255, 255, 255, 0.08);
 }