diff --git a/web/chat/chat-thread-ancestors.css b/web/chat/chat-thread-ancestors.css
new file mode 100644
--- /dev/null
+++ b/web/chat/chat-thread-ancestors.css
@@ -0,0 +1,47 @@
+div.ancestorThreadsContainer {
+  font-size: var(--xs-font-12);
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+
+div.ancestorName {
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  height: 22px;
+}
+
+button.seeFullStructure {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+div.ancestorKeyserver {
+  display: flex;
+  align-items: center;
+}
+
+div.ancestorKeyserverName {
+  border-radius: 0px 2px 2px 0px;
+}
+
+div.ancestorKeyserverOperator {
+  display: flex;
+  column-gap: 5px;
+  padding: 0px 5px;
+  align-items: center;
+  border: 1px solid var(--thread-ancestor-keyserver-border);
+  border-radius: 2px 0px 0px 2px;
+  height: 22px;
+  box-sizing: border-box;
+}
+
+button.seeFullAncestor {
+  font-size: var(--xs-font-12);
+  font-weight: var(--semi-bold);
+  cursor: pointer;
+}
diff --git a/web/chat/chat-thread-ancestors.react.js b/web/chat/chat-thread-ancestors.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/chat-thread-ancestors.react.js
@@ -0,0 +1,110 @@
+// @flow
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useAncestorThreads } from 'lib/shared/ancestor-threads';
+import { memberHasAdminPowers, colorIsDark } from 'lib/shared/thread-utils';
+import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types';
+
+import { useSelector } from '../redux/redux-utils';
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './chat-thread-ancestors.css';
+
+type ThreadAncestorsProps = {
+  +threadInfo: ThreadInfo,
+};
+function ThreadAncestors(props: ThreadAncestorsProps): React.Node {
+  const { threadInfo } = props;
+  const threadColor = threadInfo.color;
+  const darkColor = colorIsDark(threadColor);
+  const threadBackgroundColorStyle = React.useMemo(
+    () => ({
+      backgroundColor: `#${threadInfo.color}`,
+      color: darkColor
+        ? 'var(--thread-ancestor-color-light)'
+        : 'var(--thread-ancestor-color-dark)',
+    }),
+    [darkColor, threadInfo.color],
+  );
+  const threadColorStyle = React.useMemo(
+    () => ({ color: `#${threadInfo.color}` }),
+    [threadInfo.color],
+  );
+
+  const ancestorThreads = useAncestorThreads(threadInfo);
+
+  const userInfos = useSelector(state => state.userStore.userInfos);
+  const community = ancestorThreads[0] ?? threadInfo;
+  const keyserverOperatorUsername: ?string = React.useMemo(() => {
+    for (const member: RelativeMemberInfo of community.members) {
+      if (memberHasAdminPowers(member)) {
+        return userInfos[member.id].username;
+      }
+    }
+  }, [community, userInfos]);
+
+  const keyserverInfo = React.useMemo(
+    () => (
+      <div className={css.ancestorKeyserver}>
+        <div className={css.ancestorKeyserverOperator}>
+          <SWMansionIcon icon="cloud" size={10} />
+          <span>{keyserverOperatorUsername}</span>
+        </div>
+        <div
+          style={threadBackgroundColorStyle}
+          className={classNames(css.ancestorName, css.ancestorKeyserverName)}
+        >
+          {community.uiName}
+        </div>
+      </div>
+    ),
+    [community.uiName, keyserverOperatorUsername, threadBackgroundColorStyle],
+  );
+
+  const middlePath = React.useMemo(() => {
+    if (ancestorThreads.length < 2) {
+      return null;
+    }
+    return (
+      <>
+        <div className={css.ancestorSeparator}>
+          <SWMansionIcon icon="chevron-right" size={10} />
+        </div>
+        <div style={threadBackgroundColorStyle} className={css.ancestorName}>
+          ...
+        </div>
+      </>
+    );
+  }, [ancestorThreads.length, threadBackgroundColorStyle]);
+
+  const currentThread = React.useMemo(() => {
+    if (community === threadInfo) {
+      return null;
+    }
+    return (
+      <>
+        <div className={css.ancestorSeparator}>
+          <SWMansionIcon icon="chevron-right" size={10} />
+        </div>
+        <div style={threadBackgroundColorStyle} className={css.ancestorName}>
+          {threadInfo.uiName}
+        </div>
+      </>
+    );
+  }, [community, threadBackgroundColorStyle, threadInfo]);
+
+  return (
+    <>
+      <div className={css.ancestorThreadsContainer}>
+        {keyserverInfo}
+        {middlePath}
+        {currentThread}
+      </div>
+      <button style={threadColorStyle} className={css.seeFullStructure}>
+        See full structure
+      </button>
+    </>
+  );
+}
+
+export default ThreadAncestors;
diff --git a/web/chat/chat-thread-top-bar.react.js b/web/chat/chat-thread-top-bar.react.js
--- a/web/chat/chat-thread-top-bar.react.js
+++ b/web/chat/chat-thread-top-bar.react.js
@@ -4,6 +4,7 @@
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import SWMansionIcon from '../SWMansionIcon.react';
+import ThreadAncestors from './chat-thread-ancestors.react';
 import css from './chat-thread-top-bar.css';
 
 type threadTopBarProps = {
@@ -26,6 +27,7 @@
           style={threadBackgroundColorStyle}
         />
         <div className={css.threadTitle}>{threadInfo.uiName}</div>
+        <ThreadAncestors threadInfo={threadInfo} />
       </div>
       <button className={css.topBarMenu}>
         <SWMansionIcon icon="menu-vertical" size={20} />
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -83,4 +83,7 @@
   --breadcrumb-color: var(--shades-white-60);
   --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);
 }