diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index f59e4e90e..20e47b40f 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -1,13 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 
 import { contextMenu } from 'react-contexify';
-import styled, { CSSProperties } from 'styled-components';
+import styled from 'styled-components';
 import { ConversationNotificationSettingType } from '../../models/conversationAttributes';
 import {
-  getConversationHeaderTitleProps,
-  getCurrentNotificationSettingText,
   getIsSelectedActive,
   getIsSelectedBlocked,
   getIsSelectedNoteToSelf,
@@ -17,7 +15,6 @@ import {
   getSelectedMessageIds,
   isMessageDetailView,
   isMessageSelectionMode,
-  isRightPanelShowing,
 } from '../../state/selectors/conversations';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -27,13 +24,12 @@ import {
 } from '../../interactions/conversations/unsendingInteractions';
 import {
   closeMessageDetailsView,
-  closeRightPanel,
   openRightPanel,
   resetSelectedMessageIds,
 } from '../../state/ducks/conversations';
 import { callRecipient } from '../../interactions/conversationInteractions';
 import { getHasIncomingCall, getHasOngoingCall } from '../../state/selectors/call';
-import { useConversationUsername, useIsRequest } from '../../hooks/useParamSelector';
+import { useIsRequest } from '../../hooks/useParamSelector';
 import {
   SessionButton,
   SessionButtonColor,
@@ -43,11 +39,7 @@ import {
 import { SessionIconButton } from '../icon';
 import { ConversationHeaderMenu } from '../menu/ConversationHeaderMenu';
 import { Flex } from '../basic/Flex';
-import {
-  DisappearingMessageConversationType,
-  ExpirationTimerOptions,
-} from '../../util/expiringMessages';
-import { setRightOverlayMode } from '../../state/ducks/section';
+import { ConversationHeaderTitle } from './ConversationHeaderTitle';
 
 export interface TimerOption {
   name: string;
@@ -239,247 +231,6 @@ const CallButton = () => {
   );
 };
 
-export const StyledSubtitleContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-  min-width: 230px;
-
-  div:first-child {
-    span:last-child {
-      margin-bottom: 0;
-    }
-  }
-`;
-
-const StyledSubtitleDot = styled.span<{ active: boolean }>`
-  border-radius: 50%;
-  background-color: ${props =>
-    props.active ? 'var(--text-primary-color)' : 'var(--text-secondary-color)'};
-
-  height: 5px;
-  width: 5px;
-  margin: 0 2px;
-`;
-
-const SubtitleDotMenu = ({
-  options,
-  selectedOptionIndex,
-  style,
-}: {
-  options: Array<string | null>;
-  selectedOptionIndex: number;
-  style: CSSProperties;
-}) => (
-  <Flex container={true} alignItems={'center'} style={style}>
-    {options.map((option, index) => {
-      if (!option) {
-        return null;
-      }
-
-      return (
-        <StyledSubtitleDot
-          key={`subtitleDotMenu-${index}`}
-          active={selectedOptionIndex === index}
-        />
-      );
-    })}
-  </Flex>
-);
-
-export type ConversationHeaderTitleProps = {
-  conversationKey: string;
-  isMe: boolean;
-  isGroup: boolean;
-  isPublic: boolean;
-  members: Array<any>;
-  subscriberCount?: number;
-  isKickedFromGroup: boolean;
-  currentNotificationSetting?: ConversationNotificationSettingType;
-  expirationType?: DisappearingMessageConversationType;
-  expireTimer?: number;
-};
-
-const ConversationHeaderTitle = () => {
-  const headerTitleProps = useSelector(getConversationHeaderTitleProps);
-  const notificationSetting = useSelector(getCurrentNotificationSettingText);
-  const isRightPanelOn = useSelector(isRightPanelShowing);
-
-  const convoName = useConversationUsername(headerTitleProps?.conversationKey);
-  const dispatch = useDispatch();
-
-  const [visibleTitleIndex, setVisibleTitleIndex] = useState(0);
-
-  if (!headerTitleProps) {
-    return null;
-  }
-
-  const {
-    isGroup,
-    isPublic,
-    members,
-    subscriberCount,
-    isMe,
-    isKickedFromGroup,
-    expirationType,
-    expireTimer,
-  } = headerTitleProps;
-
-  const { i18n } = window;
-
-  const subtitles: Array<string> = [];
-  const notificationSubtitle = notificationSetting
-    ? i18n('notificationSubtitle', [notificationSetting])
-    : null;
-
-  let memberCount = 0;
-  if (isGroup) {
-    if (isPublic) {
-      memberCount = subscriberCount || 0;
-    } else {
-      memberCount = members.length;
-    }
-  }
-  if (notificationSubtitle) {
-    subtitles.push(notificationSubtitle);
-  }
-
-  let memberCountSubtitle = null;
-  if (isGroup && memberCount > 0 && !isKickedFromGroup) {
-    const count = String(memberCount);
-    memberCountSubtitle = isPublic ? i18n('activeMembers', [count]) : i18n('members', [count]);
-  }
-  if (memberCountSubtitle) {
-    subtitles.push(memberCountSubtitle);
-  }
-
-  const disappearingMessageSettingText =
-    expirationType === 'off'
-      ? null
-      : expirationType === 'deleteAfterRead'
-      ? window.i18n('disappearingMessagesModeAfterRead')
-      : window.i18n('disappearingMessagesModeAfterSend');
-  const abbreviatedExpireTime = Boolean(expireTimer)
-    ? ExpirationTimerOptions.getAbbreviated(expireTimer)
-    : null;
-  const disappearingMessageSubtitle = disappearingMessageSettingText
-    ? `${disappearingMessageSettingText}${
-        abbreviatedExpireTime ? ` - ${abbreviatedExpireTime}` : ''
-      }`
-    : null;
-  if (disappearingMessageSubtitle) {
-    subtitles.push(disappearingMessageSubtitle);
-  }
-
-  window.log.info(`WIP: subtitles`, subtitles, visibleTitleIndex);
-
-  const handleTitleCycle = (direction: 1 | -1) => {
-    let newIndex = visibleTitleIndex + direction;
-    if (newIndex > subtitles.length - 1) {
-      newIndex = 0;
-    }
-
-    if (newIndex < 0) {
-      newIndex = subtitles.length - 1;
-    }
-
-    if (subtitles[newIndex]) {
-      setVisibleTitleIndex(newIndex);
-    }
-  };
-
-  useEffect(() => {
-    setVisibleTitleIndex(0);
-  }, [convoName]);
-
-  if (isMe) {
-    // TODO customise for new disappearing message system
-    return <div className="module-conversation-header__title">{i18n('noteToSelf')}</div>;
-  }
-
-  return (
-    <div
-      className="module-conversation-header__title"
-      onClick={() => {
-        if (isRightPanelOn) {
-          dispatch(closeRightPanel());
-        } else {
-          if (visibleTitleIndex === 2) {
-            dispatch(setRightOverlayMode('disappearing-messages'));
-          } else {
-            dispatch(setRightOverlayMode('panel-settings'));
-          }
-          dispatch(openRightPanel());
-        }
-      }}
-      role="button"
-    >
-      <span
-        className="module-contact-name__profile-name"
-        data-testid="header-conversation-name"
-        style={{
-          marginBottom:
-            subtitles && subtitles[visibleTitleIndex] && subtitles.length > 1 ? '-5px' : undefined,
-        }}
-      >
-        {convoName}
-      </span>
-      {subtitles && subtitles[visibleTitleIndex] && (
-        <StyledSubtitleContainer>
-          <Flex
-            container={true}
-            flexDirection={'row'}
-            justifyContent={subtitles.length < 2 ? 'center' : 'space-between'}
-            alignItems={'center'}
-            width={'100%'}
-          >
-            <SessionIconButton
-              iconColor={'var(--button-icon-stroke-selected-color)'}
-              iconSize={'medium'}
-              iconType="chevron"
-              iconRotation={90}
-              margin={'0 var(--margins-xs) 0 0'}
-              onClick={() => {
-                handleTitleCycle(-1);
-              }}
-              isHidden={subtitles.length < 2}
-            />
-            {visibleTitleIndex === 2 && expirationType !== 'off' && (
-              <SessionIconButton
-                iconColor={'var(--button-icon-stroke-selected-color)'}
-                iconSize={'tiny'}
-                iconType="timer50"
-                margin={'0 var(--margins-xs) 0 0'}
-              />
-            )}
-            <span className="module-conversation-header__title-text">
-              {subtitles[visibleTitleIndex]}
-            </span>
-            <SessionIconButton
-              iconColor={'var(--button-icon-stroke-selected-color)'}
-              iconSize={'medium'}
-              iconType="chevron"
-              iconRotation={270}
-              margin={'0 0 0 var(--margins-xs)'}
-              onClick={() => {
-                handleTitleCycle(1);
-              }}
-              isHidden={subtitles.length < 2}
-            />
-          </Flex>
-          <SubtitleDotMenu
-            options={subtitles}
-            selectedOptionIndex={visibleTitleIndex}
-            style={{ visibility: subtitles.length < 2 ? 'hidden' : undefined, margin: '3px 0' }}
-          />
-        </StyledSubtitleContainer>
-      )}
-    </div>
-  );
-};
-
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
   const isMessageDetailOpened = useSelector(isMessageDetailView);
@@ -502,12 +253,7 @@ export const ConversationHeaderWithDetails = () => {
           showBackButton={isMessageDetailOpened}
         />
         <TripleDotsMenu triggerId={triggerId} showBackButton={isMessageDetailOpened} />
-
-        <div className="module-conversation-header__title-container">
-          <div className="module-conversation-header__title-flex">
-            <ConversationHeaderTitle />
-          </div>
-        </div>
+        <ConversationHeaderTitle />
 
         {!isSelectionMode && (
           <Flex
diff --git a/ts/components/conversation/ConversationHeaderTitle.tsx b/ts/components/conversation/ConversationHeaderTitle.tsx
new file mode 100644
index 000000000..b582e73fd
--- /dev/null
+++ b/ts/components/conversation/ConversationHeaderTitle.tsx
@@ -0,0 +1,263 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled, { CSSProperties } from 'styled-components';
+import { useConversationUsername } from '../../hooks/useParamSelector';
+import { ConversationNotificationSettingType } from '../../models/conversationAttributes';
+import { closeRightPanel, openRightPanel } from '../../state/ducks/conversations';
+import { setRightOverlayMode } from '../../state/ducks/section';
+import {
+  getConversationHeaderTitleProps,
+  getCurrentNotificationSettingText,
+  isRightPanelShowing,
+} from '../../state/selectors/conversations';
+import {
+  DisappearingMessageConversationType,
+  ExpirationTimerOptions,
+} from '../../util/expiringMessages';
+import { Flex } from '../basic/Flex';
+import { SessionIconButton } from '../icon';
+
+export const StyledSubtitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  min-width: 230px;
+
+  div:first-child {
+    span:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const StyledSubtitleDot = styled.span<{ active: boolean }>`
+  border-radius: 50%;
+  background-color: ${props =>
+    props.active ? 'var(--text-primary-color)' : 'var(--text-secondary-color)'};
+
+  height: 5px;
+  width: 5px;
+  margin: 0 2px;
+`;
+
+const SubtitleDotMenu = ({
+  options,
+  selectedOptionIndex,
+  style,
+}: {
+  options: Array<string | null>;
+  selectedOptionIndex: number;
+  style: CSSProperties;
+}) => (
+  <Flex container={true} alignItems={'center'} style={style}>
+    {options.map((option, index) => {
+      if (!option) {
+        return null;
+      }
+
+      return (
+        <StyledSubtitleDot
+          key={`subtitleDotMenu-${index}`}
+          active={selectedOptionIndex === index}
+        />
+      );
+    })}
+  </Flex>
+);
+
+export type ConversationHeaderTitleProps = {
+  conversationKey: string;
+  isMe: boolean;
+  isGroup: boolean;
+  isPublic: boolean;
+  members: Array<any>;
+  subscriberCount?: number;
+  isKickedFromGroup: boolean;
+  currentNotificationSetting?: ConversationNotificationSettingType;
+  expirationType?: DisappearingMessageConversationType;
+  expireTimer?: number;
+};
+
+export const ConversationHeaderTitle = () => {
+  const headerTitleProps = useSelector(getConversationHeaderTitleProps);
+  const notificationSetting = useSelector(getCurrentNotificationSettingText);
+  const isRightPanelOn = useSelector(isRightPanelShowing);
+
+  const convoName = useConversationUsername(headerTitleProps?.conversationKey);
+  const dispatch = useDispatch();
+
+  const [visibleTitleIndex, setVisibleTitleIndex] = useState(0);
+
+  if (!headerTitleProps) {
+    return null;
+  }
+
+  const {
+    isGroup,
+    isPublic,
+    members,
+    subscriberCount,
+    isMe,
+    isKickedFromGroup,
+    expirationType,
+    expireTimer,
+  } = headerTitleProps;
+
+  const { i18n } = window;
+
+  const subtitles: Array<string> = [];
+  const notificationSubtitle = notificationSetting
+    ? i18n('notificationSubtitle', [notificationSetting])
+    : null;
+
+  let memberCount = 0;
+  if (isGroup) {
+    if (isPublic) {
+      memberCount = subscriberCount || 0;
+    } else {
+      memberCount = members.length;
+    }
+  }
+  if (notificationSubtitle) {
+    subtitles.push(notificationSubtitle);
+  }
+
+  let memberCountSubtitle = null;
+  if (isGroup && memberCount > 0 && !isKickedFromGroup) {
+    const count = String(memberCount);
+    memberCountSubtitle = isPublic ? i18n('activeMembers', [count]) : i18n('members', [count]);
+  }
+  if (memberCountSubtitle) {
+    subtitles.push(memberCountSubtitle);
+  }
+
+  const disappearingMessageSettingText =
+    expirationType === 'off'
+      ? null
+      : expirationType === 'deleteAfterRead'
+      ? window.i18n('disappearingMessagesModeAfterRead')
+      : window.i18n('disappearingMessagesModeAfterSend');
+  const abbreviatedExpireTime = Boolean(expireTimer)
+    ? ExpirationTimerOptions.getAbbreviated(expireTimer)
+    : null;
+  const disappearingMessageSubtitle = disappearingMessageSettingText
+    ? `${disappearingMessageSettingText}${
+        abbreviatedExpireTime ? ` - ${abbreviatedExpireTime}` : ''
+      }`
+    : null;
+  if (disappearingMessageSubtitle) {
+    subtitles.push(disappearingMessageSubtitle);
+  }
+
+  const handleTitleCycle = (direction: 1 | -1) => {
+    let newIndex = visibleTitleIndex + direction;
+    if (newIndex > subtitles.length - 1) {
+      newIndex = 0;
+    }
+
+    if (newIndex < 0) {
+      newIndex = subtitles.length - 1;
+    }
+
+    if (subtitles[newIndex]) {
+      setVisibleTitleIndex(newIndex);
+    }
+  };
+
+  useEffect(() => {
+    setVisibleTitleIndex(0);
+  }, [convoName]);
+
+  if (isMe) {
+    // TODO customise for new disappearing message system
+    return <div className="module-conversation-header__title">{i18n('noteToSelf')}</div>;
+  }
+
+  return (
+    <div className="module-conversation-header__title-container">
+      <div className="module-conversation-header__title-flex">
+        <div
+          className="module-conversation-header__title"
+          onClick={() => {
+            if (isRightPanelOn) {
+              dispatch(closeRightPanel());
+            } else {
+              if (visibleTitleIndex === 2) {
+                dispatch(setRightOverlayMode('disappearing-messages'));
+              } else {
+                dispatch(setRightOverlayMode('panel-settings'));
+              }
+              dispatch(openRightPanel());
+            }
+          }}
+          role="button"
+        >
+          <span
+            className="module-contact-name__profile-name"
+            data-testid="header-conversation-name"
+            style={{
+              marginBottom:
+                subtitles && subtitles[visibleTitleIndex] && subtitles.length > 1
+                  ? '-5px'
+                  : undefined,
+            }}
+          >
+            {convoName}
+          </span>
+          {subtitles && subtitles[visibleTitleIndex] && (
+            <StyledSubtitleContainer>
+              <Flex
+                container={true}
+                flexDirection={'row'}
+                justifyContent={subtitles.length < 2 ? 'center' : 'space-between'}
+                alignItems={'center'}
+                width={'100%'}
+              >
+                <SessionIconButton
+                  iconColor={'var(--button-icon-stroke-selected-color)'}
+                  iconSize={'medium'}
+                  iconType="chevron"
+                  iconRotation={90}
+                  margin={'0 var(--margins-xs) 0 0'}
+                  onClick={() => {
+                    handleTitleCycle(-1);
+                  }}
+                  isHidden={subtitles.length < 2}
+                />
+                {visibleTitleIndex === 2 && expirationType !== 'off' && (
+                  <SessionIconButton
+                    iconColor={'var(--button-icon-stroke-selected-color)'}
+                    iconSize={'tiny'}
+                    iconType="timer50"
+                    margin={'0 var(--margins-xs) 0 0'}
+                  />
+                )}
+                <span className="module-conversation-header__title-text">
+                  {subtitles[visibleTitleIndex]}
+                </span>
+                <SessionIconButton
+                  iconColor={'var(--button-icon-stroke-selected-color)'}
+                  iconSize={'medium'}
+                  iconType="chevron"
+                  iconRotation={270}
+                  margin={'0 0 0 var(--margins-xs)'}
+                  onClick={() => {
+                    handleTitleCycle(1);
+                  }}
+                  isHidden={subtitles.length < 2}
+                />
+              </Flex>
+              <SubtitleDotMenu
+                options={subtitles}
+                selectedOptionIndex={visibleTitleIndex}
+                style={{ visibility: subtitles.length < 2 ? 'hidden' : undefined, margin: '3px 0' }}
+              />
+            </StyledSubtitleContainer>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};