diff --git a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
index d44c4e92a..f8f7abc72 100644
--- a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
+++ b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../../basic/Flex';
 import { SessionIconButton } from '../../icon';
+import { SubtitleStrings, SubtitleStringsType } from './ConversationHeaderTitle';
 
-// NOTE the subtitle toggling logic needs improvment
-function loadDataTestId(subtitles: Array<string>, currentIndex: number) {
-  if (currentIndex === subtitles.length - 1) {
+function loadDataTestId(currentSubtitle: SubtitleStringsType) {
+  if (currentSubtitle === 'disappearingMessages') {
     return 'disappear-messages-type-and-time';
   } else {
     return 'conversation-header-subtitle';
@@ -63,34 +63,36 @@ const SubtitleDotMenu = ({
 );
 
 type ConversationHeaderSubitleProps = {
-  subtitles: Array<string>;
-  currentIndex: number;
-  setCurrentIndex: (index: number) => void;
+  subtitlesArray: Array<SubtitleStringsType>;
+  subtitleStrings: SubtitleStrings;
+  currentSubtitle: SubtitleStringsType;
+  setCurrentSubtitle: (index: SubtitleStringsType) => void;
   onClickFunction: () => void;
   showDisappearingMessageIcon: boolean;
 };
 
 export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps) => {
   const {
-    subtitles,
-    currentIndex,
-    setCurrentIndex,
+    subtitlesArray,
+    subtitleStrings,
+    currentSubtitle,
+    setCurrentSubtitle,
     onClickFunction,
     showDisappearingMessageIcon,
   } = props;
 
   const handleTitleCycle = (direction: 1 | -1) => {
-    let newIndex = currentIndex + direction;
-    if (newIndex > subtitles.length - 1) {
+    let newIndex = subtitlesArray.indexOf(currentSubtitle) + direction;
+    if (newIndex > subtitlesArray.length - 1) {
       newIndex = 0;
     }
 
     if (newIndex < 0) {
-      newIndex = subtitles.length - 1;
+      newIndex = subtitlesArray.length - 1;
     }
 
-    if (subtitles[newIndex]) {
-      setCurrentIndex(newIndex);
+    if (subtitlesArray[newIndex]) {
+      setCurrentSubtitle(subtitlesArray[newIndex]);
     }
   };
 
@@ -99,7 +101,7 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
       <Flex
         container={true}
         flexDirection={'row'}
-        justifyContent={subtitles.length < 2 ? 'center' : 'space-between'}
+        justifyContent={subtitlesArray.length < 2 ? 'center' : 'space-between'}
         alignItems={'center'}
         width={'100%'}
       >
@@ -112,7 +114,7 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
           onClick={() => {
             handleTitleCycle(-1);
           }}
-          isHidden={subtitles.length < 2}
+          isHidden={subtitlesArray.length < 2}
           tabIndex={0}
         />
         {showDisappearingMessageIcon && (
@@ -134,9 +136,9 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
             }
           }}
           tabIndex={0}
-          data-testid={loadDataTestId(subtitles, currentIndex)}
+          data-testid={loadDataTestId(currentSubtitle)}
         >
-          {subtitles[currentIndex]}
+          {subtitleStrings[currentSubtitle]}
         </span>
         <SessionIconButton
           iconColor={'var(--button-icon-stroke-selected-color)'}
@@ -147,14 +149,14 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
           onClick={() => {
             handleTitleCycle(1);
           }}
-          isHidden={subtitles.length < 2}
+          isHidden={subtitlesArray.length < 2}
           tabIndex={0}
         />
       </Flex>
       <SubtitleDotMenu
-        options={subtitles}
-        selectedOptionIndex={currentIndex}
-        style={{ display: subtitles.length < 2 ? 'none' : undefined, margin: '8px 0' }}
+        options={subtitlesArray}
+        selectedOptionIndex={subtitlesArray.indexOf(currentSubtitle)}
+        style={{ display: subtitlesArray.length < 2 ? 'none' : undefined, margin: '8px 0' }}
       />
     </StyledSubtitleContainer>
   );
diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx
index 6d374e0db..f856edcb9 100644
--- a/ts/components/conversation/header/ConversationHeaderTitle.tsx
+++ b/ts/components/conversation/header/ConversationHeaderTitle.tsx
@@ -15,6 +15,16 @@ import {
 } from '../../../util/expiringMessages';
 import { ConversationHeaderSubitle } from './ConversationHeaderSubtitle';
 
+export type SubtitleStrings = Record<string, string> & {
+  notifications?: string;
+  members?: string;
+  disappearingMessages?: string;
+};
+export type SubtitleStringsType = keyof Pick<
+  SubtitleStrings,
+  'notifications' | 'members' | 'disappearingMessages'
+>;
+
 export type ConversationHeaderTitleProps = {
   conversationKey: string;
   isMe: boolean;
@@ -37,7 +47,7 @@ export const ConversationHeaderTitle = () => {
   const convoName = useConversationUsername(headerTitleProps?.conversationKey);
   const dispatch = useDispatch();
 
-  const [visibleTitleIndex, setVisibleTitleIndex] = useState(0);
+  const [visibleSubtitle, setVisibleSubtitle] = useState<SubtitleStringsType>('notifications');
 
   if (!headerTitleProps) {
     return null;
@@ -56,12 +66,15 @@ export const ConversationHeaderTitle = () => {
 
   const { i18n } = window;
 
-  const subtitles: Array<string> = [];
+  const subtitleStrings: SubtitleStrings = {};
+  const subtitleArray: Array<SubtitleStringsType> = [];
+
   const notificationSubtitle = notificationSetting
     ? i18n('notificationSubtitle', [notificationSetting])
     : null;
   if (notificationSubtitle) {
-    subtitles.push(notificationSubtitle);
+    subtitleStrings.notifications = notificationSubtitle;
+    subtitleArray.push('notifications');
   }
 
   let memberCount = 0;
@@ -79,7 +92,8 @@ export const ConversationHeaderTitle = () => {
     memberCountSubtitle = isPublic ? i18n('activeMembers', [count]) : i18n('members', [count]);
   }
   if (memberCountSubtitle) {
-    subtitles.push(memberCountSubtitle);
+    subtitleStrings.members = memberCountSubtitle;
+    subtitleArray.push('members');
   }
 
   const disappearingMessageSettingText =
@@ -102,14 +116,15 @@ export const ConversationHeaderTitle = () => {
       }`
     : null;
   if (disappearingMessageSubtitle) {
-    subtitles.push(disappearingMessageSubtitle);
+    subtitleStrings.disappearingMessages = disappearingMessageSubtitle;
+    subtitleArray.push('disappearingMessages');
   }
 
   const handleRightPanelToggle = () => {
     if (isRightPanelOn) {
       dispatch(closeRightPanel());
     } else {
-      if (visibleTitleIndex === subtitles.length - 1) {
+      if (visibleSubtitle === 'disappearingMessages') {
         dispatch(setRightOverlayMode('disappearing-messages'));
       } else {
         dispatch(setRightOverlayMode('panel-settings'));
@@ -119,14 +134,14 @@ export const ConversationHeaderTitle = () => {
   };
 
   useEffect(() => {
-    setVisibleTitleIndex(0);
+    setVisibleSubtitle('notifications');
   }, [convoName]);
 
   useEffect(() => {
-    if (!subtitles[visibleTitleIndex]) {
-      setVisibleTitleIndex(0);
+    if (subtitleArray.indexOf(visibleSubtitle) < 0) {
+      setVisibleSubtitle('notifications');
     }
-  }, [visibleTitleIndex, subtitles]);
+  }, [subtitleArray, visibleSubtitle]);
 
   return (
     <div className="module-conversation-header__title-container">
@@ -150,13 +165,16 @@ export const ConversationHeaderTitle = () => {
               {convoName}
             </span>
           )}
-          {subtitles && subtitles[visibleTitleIndex] && (
+          {subtitleArray.length && subtitleArray.indexOf(visibleSubtitle) > -1 && (
             <ConversationHeaderSubitle
-              currentIndex={visibleTitleIndex}
-              setCurrentIndex={setVisibleTitleIndex}
-              subtitles={subtitles}
+              currentSubtitle={visibleSubtitle}
+              setCurrentSubtitle={setVisibleSubtitle}
+              subtitlesArray={subtitleArray}
+              subtitleStrings={subtitleStrings}
               onClickFunction={handleRightPanelToggle}
-              showDisappearingMessageIcon={visibleTitleIndex === 2 && expirationType !== 'off'}
+              showDisappearingMessageIcon={
+                visibleSubtitle === 'disappearingMessages' && expirationType !== 'off'
+              }
             />
           )}
         </div>