diff --git a/packages/markups/src/mentions/UserMention.js b/packages/markups/src/mentions/UserMention.js
index 45615e4a1a..f3954ca78d 100644
--- a/packages/markups/src/mentions/UserMention.js
+++ b/packages/markups/src/mentions/UserMention.js
@@ -1,8 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Tooltip } from '@embeddedchat/ui-elements';
-import { useUserStore } from '@embeddedchat/react/src/store';
-import useSetExclusiveState from '@embeddedchat/react/src/hooks/useSetExclusiveState';
+import { useChatLayoutStore, useUserStore } from '@embeddedchat/react/src/store';
 import RCContext from '@embeddedchat/react/src/context/RCInstance';
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
 import useMentionStyles from '../elements/elements.styles';
@@ -10,7 +9,9 @@ import useMentionStyles from '../elements/elements.styles';
 const UserMention = ({ contents }) => {
   const { members, username } = useContext(MarkupInteractionContext);
   const { RCInstance } = useContext(RCContext);
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
   const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
     setShowCurrentUserInfo: state.setShowCurrentUserInfo,
     setCurrentUser: state.setCurrentUser,
@@ -23,7 +24,8 @@ const UserMention = ({ contents }) => {
       username: data.user.username,
       name: data.user.name,
     });
-    setExclusiveState(setShowCurrentUserInfo);
+    setShowCurrentUserInfo(true);
+    openExclusivePanel('showCurrentUserInfo');
   };
 
   const hasMember = (user) => {
diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js
index 2078fdf05d..3391400c61 100644
--- a/packages/react/src/hooks/useFetchChatData.js
+++ b/packages/react/src/hooks/useFetchChatData.js
@@ -5,7 +5,7 @@ import {
   useChannelStore,
   useMemberStore,
   useMessageStore,
-  useStarredMessageStore,
+  useChatDataStore,
 } from '../store';
 
 const useFetchChatData = (showRoles) => {
@@ -16,9 +16,7 @@ const useFetchChatData = (showRoles) => {
   const setMessagesOffset = useMessageStore((state) => state.setMessagesOffset);
   const setAdmins = useMemberStore((state) => state.setAdmins);
   const permissionsRef = useRef(null);
-  const setStarredMessages = useStarredMessageStore(
-    (state) => state.setStarredMessages
-  );
+  const setStarredMessages = useChatDataStore((state) => state.setStarredMessages);
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js
index 0402fb63d9..d82f600191 100644
--- a/packages/react/src/hooks/useRCAuth.js
+++ b/packages/react/src/hooks/useRCAuth.js
@@ -1,15 +1,13 @@
 import { useContext } from 'react';
 import { useToastBarDispatch } from '@embeddedchat/ui-elements';
 import RCContext from '../context/RCInstance';
-import { useUserStore, totpModalStore, useLoginStore } from '../store';
+import { useAuthStore, useUserStore } from '../store';
 
 export const useRCAuth = () => {
   const { RCInstance } = useContext(RCContext);
-  const setIsTotpModalOpen = totpModalStore(
-    (state) => state.setIsTotpModalOpen
-  );
+  const setIsTotpModalOpen = useAuthStore((state) => state.setIsTotpModalOpen);
   const setUserAvatarUrl = useUserStore((state) => state.setUserAvatarUrl);
-  const setIsLoginModalOpen = useLoginStore(
+  const setIsLoginModalOpen = useAuthStore(
     (state) => state.setIsLoginModalOpen
   );
   const setAuthenticatedUserUsername = useUserStore(
diff --git a/packages/react/src/hooks/useSetExclusiveState.js b/packages/react/src/hooks/useSetExclusiveState.js
deleted file mode 100644
index 9a59fdb419..0000000000
--- a/packages/react/src/hooks/useSetExclusiveState.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useMemo } from 'react';
-import {
-  useUserStore,
-  useMemberStore,
-  useSearchMessageStore,
-  useChannelStore,
-  useThreadsMessageStore,
-  useMentionsStore,
-  usePinnedMessageStore,
-  useStarredMessageStore,
-  useFileStore,
-  useSidebarStore,
-} from '../store';
-
-const useSetExclusiveState = () => {
-  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
-  const setShowMembers = useMemberStore((state) => state.setShowMembers);
-  const setShowSearch = useSearchMessageStore((state) => state.setShowSearch);
-  const setShowPinned = usePinnedMessageStore((state) => state.setShowPinned);
-  const setShowStarred = useStarredMessageStore(
-    (state) => state.setShowStarred
-  );
-  const setShowAllThreads = useThreadsMessageStore(
-    (state) => state.setShowAllThreads
-  );
-  const setShowAllFiles = useFileStore((state) => state.setShowAllFiles);
-  const setShowMentions = useMentionsStore((state) => state.setShowMentions);
-  const setShowCurrentUserInfo = useUserStore(
-    (state) => state.setShowCurrentUserInfo
-  );
-  const setShowChannelinfo = useChannelStore(
-    (state) => state.setShowChannelinfo
-  );
-  const stateSetters = useMemo(
-    () => [
-      setShowStarred,
-      setShowPinned,
-      setShowMembers,
-      setShowSearch,
-      setShowChannelinfo,
-      setShowAllThreads,
-      setShowAllFiles,
-      setShowMentions,
-      setShowCurrentUserInfo,
-    ],
-    [
-      setShowAllFiles,
-      setShowAllThreads,
-      setShowChannelinfo,
-      setShowCurrentUserInfo,
-      setShowMembers,
-      setShowMentions,
-      setShowPinned,
-      setShowSearch,
-      setShowStarred,
-    ]
-  );
-
-  const setExclusiveState = (activeSetter) => {
-    let isPanelActive = false;
-    stateSetters.forEach((setter) => {
-      if (setter === activeSetter) {
-        isPanelActive = true;
-        setter(true);
-      } else {
-        setter(false);
-      }
-    });
-    setShowSidebar(isPanelActive);
-  };
-
-  return setExclusiveState;
-};
-
-export default useSetExclusiveState;
diff --git a/packages/react/src/store/authStore.js b/packages/react/src/store/authStore.js
new file mode 100644
index 0000000000..64b74f5bb6
--- /dev/null
+++ b/packages/react/src/store/authStore.js
@@ -0,0 +1,55 @@
+import { create } from 'zustand';
+
+const useAuthStore = create((set) => ({
+  userId: '',
+  setUserId: (userId) => set({ userId }),
+
+  name: '',
+  setName: (name) => set({ name }),
+
+  username: '',
+  setUsername: (username) => set({ username }),
+
+  avatarUrl: '',
+  setUserAvatarUrl: (avatarUrl) => set({ avatarUrl }),
+
+  isUserAuthenticated: false,
+  setIsUserAuthenticated: (isUserAuthenticated) => set({ isUserAuthenticated }),
+
+  canSendMsg: true,
+  setCanSendMsg: (canSendMsg) => set({ canSendMsg }),
+
+  password: null,
+  setPassword: (password) => set({ password }),
+
+  emailoruser: null,
+  setEmailorUser: (emailoruser) => set({ emailoruser }),
+
+  roles: [],
+  setRoles: (roles) => set({ roles }),
+
+  userPinPermissions: {},
+  setUserPinPermissions: (userPinPermissions) => set({ userPinPermissions }),
+
+  viewUserInfoPermissions: {},
+  setViewUserInfoPermissions: (viewUserInfoPermissions) =>
+    set({ viewUserInfoPermissions }),
+
+  showCurrentUserInfo: false,
+  setShowCurrentUserInfo: (showCurrentUserInfo) => set({ showCurrentUserInfo }),
+
+  currentUser: {},
+  setCurrentUser: (currentUser) => set({ currentUser }),
+
+  isLoginIn: false,
+  setIsLoginIn: (isLoginIn) => set({ isLoginIn }),
+
+  isLoginModalOpen: false,
+  setIsLoginModalOpen: (isLoginModalOpen) => set({ isLoginModalOpen }),
+
+  isTotpModalOpen: false,
+  setIsTotpModalOpen: (isTotpModalOpen) => set({ isTotpModalOpen }),
+}));
+
+export default useAuthStore;
+
diff --git a/packages/react/src/store/chatDataStore.js b/packages/react/src/store/chatDataStore.js
new file mode 100644
index 0000000000..f68e0a95f3
--- /dev/null
+++ b/packages/react/src/store/chatDataStore.js
@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+
+const useChatDataStore = create((set) => ({
+  starredMessages: [],
+  setStarredMessages: (messages) => set({ starredMessages: messages || [] }),
+}));
+
+export default useChatDataStore;
+
diff --git a/packages/react/src/store/chatLayoutStore.js b/packages/react/src/store/chatLayoutStore.js
new file mode 100644
index 0000000000..54fce36195
--- /dev/null
+++ b/packages/react/src/store/chatLayoutStore.js
@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+
+const initialPanelsState = {
+  showMembers: false,
+  showSearch: false,
+  showPinned: false,
+  showStarred: false,
+  showAllThreads: false,
+  showAllFiles: false,
+  showMentions: false,
+  showCurrentUserInfo: false,
+  showChannelinfo: false,
+};
+
+const useChatLayoutStore = create((set, get) => ({
+  showSidebar: false,
+  setShowSidebar: (showSidebar) => set({ showSidebar }),
+
+  ...initialPanelsState,
+
+  setPanelState: (panelKey, isOpen) => {
+    if (!(panelKey in initialPanelsState)) return;
+    set({ [panelKey]: Boolean(isOpen) });
+  },
+
+  closeAllPanels: () => set({ ...initialPanelsState, showSidebar: false }),
+
+  openExclusivePanel: (panelKey) => {
+    if (!panelKey) {
+      return set({ ...initialPanelsState, showSidebar: false });
+    }
+    if (!(panelKey in initialPanelsState)) return;
+
+    const nextPanels = Object.keys(initialPanelsState).reduce((acc, key) => {
+      acc[key] = key === panelKey;
+      return acc;
+    }, {});
+
+    set({ ...nextPanels, showSidebar: true });
+  },
+
+  getOpenPanelKey: () => {
+    const state = get();
+    const openKey = Object.keys(initialPanelsState).find((key) => state[key]);
+    return openKey || null;
+  },
+}));
+
+export default useChatLayoutStore;
+
diff --git a/packages/react/src/store/fileStore.js b/packages/react/src/store/fileStore.js
deleted file mode 100644
index 5f7db6f252..0000000000
--- a/packages/react/src/store/fileStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const useFileStore = create((set) => ({
-  showAllFiles: false,
-  setShowAllFiles: (showAllFiles) => set(() => ({ showAllFiles })),
-}));
-
-export default useFileStore;
diff --git a/packages/react/src/store/index.js b/packages/react/src/store/index.js
index bddd0bd1d6..af85735bf6 100644
--- a/packages/react/src/store/index.js
+++ b/packages/react/src/store/index.js
@@ -1,13 +1,7 @@
 export { default as useMessageStore } from './messageStore';
 export { default as useUserStore } from './userStore';
 export { default as useMemberStore } from './memberStore';
-export { default as totpModalStore } from './totpmodalStore';
-export { default as useSearchMessageStore } from './searchMessageStore';
-export { default as useLoginStore } from './loginStore';
 export { default as useChannelStore } from './channelStore';
-export { default as useThreadsMessageStore } from './threadsMessageStore';
-export { default as useFileStore } from './fileStore';
-export { default as useMentionsStore } from './mentionsStore';
-export { default as usePinnedMessageStore } from './pinnedMessageStore';
-export { default as useStarredMessageStore } from './starredMessageStore';
-export { default as useSidebarStore } from './sidebarStore';
+export { default as useChatLayoutStore } from './chatLayoutStore';
+export { default as useChatDataStore } from './chatDataStore';
+export { default as useAuthStore } from './authStore';
diff --git a/packages/react/src/store/loginStore.js b/packages/react/src/store/loginStore.js
deleted file mode 100644
index aae81f34a2..0000000000
--- a/packages/react/src/store/loginStore.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { create } from 'zustand';
-
-const useLoginStore = create((set) => ({
-  isLoginIn: false,
-  setIsLoginIn: (isLoginIn) => set(() => ({ isLoginIn })),
-  isLoginModalOpen: false,
-  setIsLoginModalOpen: (isLoginModalOpen) => set(() => ({ isLoginModalOpen })),
-}));
-
-export default useLoginStore;
diff --git a/packages/react/src/store/mentionsStore.js b/packages/react/src/store/mentionsStore.js
deleted file mode 100644
index 240f0602af..0000000000
--- a/packages/react/src/store/mentionsStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const useMentionsStore = create((set) => ({
-  showMentions: false,
-  setShowMentions: (showMentions) => set(() => ({ showMentions })),
-}));
-
-export default useMentionsStore;
diff --git a/packages/react/src/store/pinnedMessageStore.js b/packages/react/src/store/pinnedMessageStore.js
deleted file mode 100644
index 36ee4e3851..0000000000
--- a/packages/react/src/store/pinnedMessageStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const usePinnedMessageStore = create((set) => ({
-  showPinned: false,
-  setShowPinned: (showPinned) => set(() => ({ showPinned })),
-}));
-
-export default usePinnedMessageStore;
diff --git a/packages/react/src/store/searchMessageStore.js b/packages/react/src/store/searchMessageStore.js
deleted file mode 100644
index 71980c9d5d..0000000000
--- a/packages/react/src/store/searchMessageStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const useSearchMessageStore = create((set) => ({
-  showSearch: false,
-  setShowSearch: (showSearch) => set(() => ({ showSearch })),
-}));
-
-export default useSearchMessageStore;
diff --git a/packages/react/src/store/sidebarStore.js b/packages/react/src/store/sidebarStore.js
deleted file mode 100644
index 27a1c7f630..0000000000
--- a/packages/react/src/store/sidebarStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const useSidebarStore = create((set) => ({
-  showSidebar: false,
-  setShowSidebar: (showSidebar) => set(() => ({ showSidebar })),
-}));
-
-export default useSidebarStore;
diff --git a/packages/react/src/store/starredMessageStore.js b/packages/react/src/store/starredMessageStore.js
deleted file mode 100644
index 989ec8b6fb..0000000000
--- a/packages/react/src/store/starredMessageStore.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { create } from 'zustand';
-
-const useStarredMessageStore = create((set) => ({
-  showStarred: false,
-  setShowStarred: (showStarred) => set(() => ({ showStarred })),
-  starredMessages: [],
-  setStarredMessages: (messages) => set(() => ({ starredMessages: messages })),
-}));
-
-export default useStarredMessageStore;
diff --git a/packages/react/src/store/threadsMessageStore.js b/packages/react/src/store/threadsMessageStore.js
deleted file mode 100644
index f455a04f6c..0000000000
--- a/packages/react/src/store/threadsMessageStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const useThreadsMessageStore = create((set) => ({
-  showAllThreads: false,
-  setShowAllThreads: (showAllThreads) => set(() => ({ showAllThreads })),
-}));
-
-export default useThreadsMessageStore;
diff --git a/packages/react/src/store/totpmodalStore.js b/packages/react/src/store/totpmodalStore.js
deleted file mode 100644
index f9adc3d307..0000000000
--- a/packages/react/src/store/totpmodalStore.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from 'zustand';
-
-const totpModalStore = create((set) => ({
-  isTotpModalOpen: false,
-  setIsTotpModalOpen: (isTotpModalOpen) => set(() => ({ isTotpModalOpen })),
-}));
-
-export default totpModalStore;
diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
index 34f5c8bf40..cc4b63bff2 100644
--- a/packages/react/src/views/ChatBody/ChatBody.js
+++ b/packages/react/src/views/ChatBody/ChatBody.js
@@ -21,7 +21,7 @@ import {
   useMessageStore,
   useUserStore,
   useChannelStore,
-  useLoginStore,
+  useAuthStore,
 } from '../../store';
 import MessageList from '../MessageList';
 import TotpModal from '../TotpModal/TwoFactorTotpModal';
@@ -66,7 +66,7 @@ const ChatBody = ({
   const removeMessage = useMessageStore((state) => state.removeMessage);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const channelInfo = useChannelStore((state) => state.channelInfo);
-  const isLoginIn = useLoginStore((state) => state.isLoginIn);
+  const isLoginIn = useAuthStore((state) => state.isLoginIn);
   const setMessages = useMessageStore((state) => state.setMessages);
 
   const [isThreadOpen, threadMainMessage] = useMessageStore((state) => [
diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js
index a310e538fd..417ba9cbcf 100644
--- a/packages/react/src/views/ChatHeader/ChatHeader.js
+++ b/packages/react/src/views/ChatHeader/ChatHeader.js
@@ -16,20 +16,13 @@ import {
   useUserStore,
   useMessageStore,
   useMemberStore,
-  useSearchMessageStore,
   useChannelStore,
-  useThreadsMessageStore,
-  useMentionsStore,
-  usePinnedMessageStore,
-  useStarredMessageStore,
-  useFileStore,
-  useSidebarStore,
+  useChatLayoutStore,
 } from '../../store';
 import { DynamicHeader } from '../DynamicHeader';
 import useFetchChatData from '../../hooks/useFetchChatData';
 import useSettingsStore from '../../store/settingsStore';
 import getChatHeaderStyles from './ChatHeader.styles';
-import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 import SurfaceMenu from '../SurfaceMenu/SurfaceMenu';
 
 const ChatHeader = ({
@@ -63,12 +56,11 @@ const ChatHeader = ({
     configOverrides.optionConfig?.menuItems || optionConfig.menuItems;
   const theme = useTheme();
   const styles = getChatHeaderStyles(theme);
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
   const channelInfo = useChannelStore((state) => state.channelInfo);
   const setChannelInfo = useChannelStore((state) => state.setChannelInfo);
-  const setShowChannelinfo = useChannelStore(
-    (state) => state.setShowChannelinfo
-  );
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const setIsChannelPrivate = useChannelStore(
     (state) => state.setIsChannelPrivate
@@ -92,7 +84,7 @@ const ChatHeader = ({
   const setIsUserAuthenticated = useUserStore(
     (state) => state.setIsUserAuthenticated
   );
-  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
+  const setShowSidebar = useChatLayoutStore((state) => state.setShowSidebar);
   const dispatchToastMessage = useToastBarDispatch();
   const { getMessagesAndRoles } = useFetchChatData(showRoles);
   const setMessageLimit = useSettingsStore((state) => state.setMessageLimit);
@@ -108,17 +100,6 @@ const ChatHeader = ({
 
   const closeThread = useMessageStore((state) => state.closeThread);
 
-  const setShowMembers = useMemberStore((state) => state.setShowMembers);
-  const setShowSearch = useSearchMessageStore((state) => state.setShowSearch);
-  const setShowPinned = usePinnedMessageStore((state) => state.setShowPinned);
-  const setShowStarred = useStarredMessageStore(
-    (state) => state.setShowStarred
-  );
-  const setShowAllThreads = useThreadsMessageStore(
-    (state) => state.setShowAllThreads
-  );
-  const setShowAllFiles = useFileStore((state) => state.setShowAllFiles);
-  const setShowMentions = useMentionsStore((state) => state.setShowMentions);
   const getChannelAvatarURL = (channelname) => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${channelname}`;
@@ -252,56 +233,56 @@ const ChatHeader = ({
       thread: {
         label: 'Threads',
         id: 'thread',
-        onClick: () => setExclusiveState(setShowAllThreads),
+        onClick: () => openExclusivePanel('showAllThreads'),
         iconName: 'thread',
         visible: true,
       },
       mentions: {
         label: 'Mentions',
         id: 'mention',
-        onClick: () => setExclusiveState(setShowMentions),
+        onClick: () => openExclusivePanel('showMentions'),
         iconName: 'at',
         visible: true,
       },
       starred: {
         label: 'Starred Messages',
         id: 'starred',
-        onClick: () => setExclusiveState(setShowStarred),
+        onClick: () => openExclusivePanel('showStarred'),
         iconName: 'star',
         visible: true,
       },
       pinned: {
         label: 'Pinned Messages',
         id: 'pinned',
-        onClick: () => setExclusiveState(setShowPinned),
+        onClick: () => openExclusivePanel('showPinned'),
         iconName: 'pin',
         visible: true,
       },
       members: {
         label: 'Members',
         id: 'members',
-        onClick: () => setExclusiveState(setShowMembers),
+        onClick: () => openExclusivePanel('showMembers'),
         iconName: 'members',
         visible: isUserAuthenticated,
       },
       files: {
         label: 'Files',
         id: 'files',
-        onClick: () => setExclusiveState(setShowAllFiles),
+        onClick: () => openExclusivePanel('showAllFiles'),
         iconName: 'clip',
         visible: isUserAuthenticated,
       },
       search: {
         label: 'Search Messages',
         id: 'search',
-        onClick: () => setExclusiveState(setShowSearch),
+        onClick: () => openExclusivePanel('showSearch'),
         iconName: 'magnifier',
         visible: isUserAuthenticated,
       },
       rInfo: {
         label: 'Room Information',
         id: 'rInfo',
-        onClick: () => setExclusiveState(setShowChannelinfo),
+        onClick: () => openExclusivePanel('showChannelinfo'),
         iconName: 'info',
         visible: isUserAuthenticated,
       },
@@ -320,15 +301,7 @@ const ChatHeader = ({
       handleLogout,
       setFullScreen,
       setClosableState,
-      setExclusiveState,
-      setShowAllThreads,
-      setShowMentions,
-      setShowStarred,
-      setShowPinned,
-      setShowMembers,
-      setShowAllFiles,
-      setShowSearch,
-      setShowChannelinfo,
+      openExclusivePanel,
     ]
   );
 
@@ -389,7 +362,7 @@ const ChatHeader = ({
                   <Box css={styles.channelInfoContainer}>
                     <Box
                       css={styles.channelName}
-                      onClick={() => setExclusiveState(setShowChannelinfo)}
+                      onClick={() => openExclusivePanel('showChannelinfo')}
                     >
                       <Icon
                         name={
diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index f6fb0e111f..8ad6545e67 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -16,9 +16,9 @@ import { useRCContext } from '../../context/RCInstance';
 import {
   useUserStore,
   useMessageStore,
-  useLoginStore,
   useChannelStore,
   useMemberStore,
+  useAuthStore,
 } from '../../store';
 import ChatInputFormattingToolbar from './ChatInputFormattingToolbar';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
@@ -122,10 +122,8 @@ const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
     deletedMessage: state.deletedMessage,
   }));
 
-  const setIsLoginModalOpen = useLoginStore(
-    (state) => state.setIsLoginModalOpen
-  );
-  const isLoginIn = useLoginStore((state) => state.isLoginIn);
+  const setIsLoginModalOpen = useAuthStore((state) => state.setIsLoginModalOpen);
+  const isLoginIn = useAuthStore((state) => state.isLoginIn);
 
   const { toggle, setData, data } = useAttachmentWindowStore((state) => ({
     toggle: state.toggle,
diff --git a/packages/react/src/views/ChatLayout/ChatLayout.js b/packages/react/src/views/ChatLayout/ChatLayout.js
index f3b4262acb..2da0aefea5 100644
--- a/packages/react/src/views/ChatLayout/ChatLayout.js
+++ b/packages/react/src/views/ChatLayout/ChatLayout.js
@@ -3,15 +3,10 @@ import { Box, useComponentOverrides } from '@embeddedchat/ui-elements';
 import styles from './ChatLayout.styles';
 import {
   useChannelStore,
+  useChatDataStore,
+  useChatLayoutStore,
   useUserStore,
-  usePinnedMessageStore,
-  useStarredMessageStore,
-  useSearchMessageStore,
-  useFileStore,
-  useMentionsStore,
-  useThreadsMessageStore,
   useMemberStore,
-  useSidebarStore,
 } from '../../store';
 
 import RoomMembers from '../RoomMembers/RoomMember';
@@ -32,6 +27,7 @@ import CheckPreviewType from '../AttachmentPreview/CheckPreviewType';
 import { useRCContext } from '../../context/RCInstance';
 import UiKitContextualBar from '../ContextualBarBlock/uiKit/UiKitContextualBar';
 import useUiKitStore from '../../store/uiKitStore';
+import useFetchChatData from '../../hooks/useFetchChatData';
 
 const ChatLayout = () => {
   const messageListRef = useRef(null);
@@ -40,25 +36,19 @@ const ChatLayout = () => {
   const { RCInstance, ECOptions } = useRCContext();
   const anonymousMode = ECOptions?.anonymousMode;
   const showRoles = ECOptions?.showRoles;
-  const setStarredMessages = useStarredMessageStore(
-    (state) => state.setStarredMessages
-  );
-  const starredMessages = useStarredMessageStore(
-    (state) => state.starredMessages
-  );
-  const showSidebar = useSidebarStore((state) => state.showSidebar);
-  const showMentions = useMentionsStore((state) => state.showMentions);
-  const showAllFiles = useFileStore((state) => state.showAllFiles);
-  const showAllThreads = useThreadsMessageStore(
-    (state) => state.showAllThreads
-  );
-  const showPinned = usePinnedMessageStore((state) => state.showPinned);
-  const showStarred = useStarredMessageStore((state) => state.showStarred);
-  const showSearch = useSearchMessageStore((state) => state.showSearch);
-  const showChannelinfo = useChannelStore((state) => state.showChannelinfo);
-  const showMembers = useMemberStore((state) => state.showMembers);
+  const setStarredMessages = useChatDataStore((state) => state.setStarredMessages);
+  const { getStarredMessages } = useFetchChatData(showRoles);
+  const showSidebar = useChatLayoutStore((state) => state.showSidebar);
+  const showMentions = useChatLayoutStore((state) => state.showMentions);
+  const showAllFiles = useChatLayoutStore((state) => state.showAllFiles);
+  const showAllThreads = useChatLayoutStore((state) => state.showAllThreads);
+  const showPinned = useChatLayoutStore((state) => state.showPinned);
+  const showStarred = useChatLayoutStore((state) => state.showStarred);
+  const showSearch = useChatLayoutStore((state) => state.showSearch);
+  const showChannelinfo = useChatLayoutStore((state) => state.showChannelinfo);
+  const showMembers = useChatLayoutStore((state) => state.showMembers);
   const members = useMemberStore((state) => state.members);
-  const showCurrentUserInfo = useUserStore(
+  const showCurrentUserInfo = useChatLayoutStore(
     (state) => state.showCurrentUserInfo
   );
   const attachmentWindowOpen = useAttachmentWindowStore(
@@ -82,22 +72,9 @@ const ChatLayout = () => {
       });
     }
   };
-  const getStarredMessages = useCallback(async () => {
-    if (isUserAuthenticated) {
-      try {
-        if (!isUserAuthenticated && !anonymousMode) {
-          return;
-        }
-        const { messages } = await RCInstance.getStarredMessages();
-        setStarredMessages(messages);
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }, [isUserAuthenticated, anonymousMode, RCInstance]);
   useEffect(() => {
-    getStarredMessages();
-  }, [showSidebar]);
+    getStarredMessages(anonymousMode);
+  }, [showSidebar, anonymousMode, getStarredMessages]);
   return (
     <Box
       css={styles.layout}
diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js
index f3b94c7b48..96a16d460d 100644
--- a/packages/react/src/views/EmbeddedChat.js
+++ b/packages/react/src/views/EmbeddedChat.js
@@ -18,7 +18,7 @@ import {
 import { ChatLayout } from './ChatLayout';
 import { ChatHeader } from './ChatHeader';
 import { RCInstanceProvider } from '../context/RCInstance';
-import { useUserStore, useLoginStore, useMessageStore } from '../store';
+import { useAuthStore, useUserStore, useMessageStore } from '../store';
 import DefaultTheme from '../theme/DefaultTheme';
 import { getTokenStorage } from '../lib/auth';
 import { styles } from './EmbeddedChat.styles';
@@ -82,7 +82,7 @@ const EmbeddedChat = (props) => {
     setRoles: state.setRoles,
   }));
 
-  const setIsLoginIn = useLoginStore((state) => state.setIsLoginIn);
+  const setIsLoginIn = useAuthStore((state) => state.setIsLoginIn);
   if (isClosable && !setClosableState) {
     throw Error(
       'Please provide a setClosableState to props when isClosable = true'
diff --git a/packages/react/src/views/LoginForm/LoginForm.js b/packages/react/src/views/LoginForm/LoginForm.js
index 1285e5e1eb..74b5339a8c 100644
--- a/packages/react/src/views/LoginForm/LoginForm.js
+++ b/packages/react/src/views/LoginForm/LoginForm.js
@@ -8,7 +8,7 @@ import {
   Icon,
   useTheme,
 } from '@embeddedchat/ui-elements';
-import { useLoginStore } from '../../store';
+import { useAuthStore } from '../../store';
 import { useRCAuth } from '../../hooks/useRCAuth';
 import styles from './LoginForm.styles';
 
@@ -18,8 +18,8 @@ export default function LoginForm() {
   const [showPassword, setShowPassword] = useState(false);
   const [usernameError, setUsernameError] = useState(false);
   const [passwordError, setPasswordError] = useState(false);
-  const isLoginModalOpen = useLoginStore((state) => state.isLoginModalOpen);
-  const setIsLoginModalOpen = useLoginStore(
+  const isLoginModalOpen = useAuthStore((state) => state.isLoginModalOpen);
+  const setIsLoginModalOpen = useAuthStore(
     (state) => state.setIsLoginModalOpen
   );
   const { handleLogin } = useRCAuth();
diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index 355cde9b4a..b0628b0fb3 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -13,7 +13,7 @@ import {
 import { Attachments } from '../AttachmentHandler';
 import { Markdown } from '../Markdown';
 import MessageHeader from './MessageHeader';
-import { useMessageStore, useUserStore, useSidebarStore } from '../../store';
+import { useChatLayoutStore, useMessageStore, useUserStore } from '../../store';
 import RCContext from '../../context/RCInstance';
 import { MessageBody } from './MessageBody';
 import { MessageReactions } from './MessageReactions';
@@ -51,7 +51,8 @@ const Message = ({
 
   const { RCInstance, ECOptions } = useContext(RCContext);
   showAvatar = ECOptions?.showAvatar && showAvatar;
-  const { showSidebar, setShowSidebar } = useSidebarStore();
+  const showSidebar = useChatLayoutStore((state) => state.showSidebar);
+  const setShowSidebar = useChatLayoutStore((state) => state.setShowSidebar);
   const authenticatedUserId = useUserStore((state) => state.userId);
   const authenticatedUserUsername = useUserStore((state) => state.username);
   const userRoles = useUserStore((state) => state.roles);
diff --git a/packages/react/src/views/Message/MessageAvatarContainer.js b/packages/react/src/views/Message/MessageAvatarContainer.js
index 7fdf1b0b8a..ceaaf9e648 100644
--- a/packages/react/src/views/Message/MessageAvatarContainer.js
+++ b/packages/react/src/views/Message/MessageAvatarContainer.js
@@ -8,8 +8,7 @@ import {
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import { getMessageAvatarContainerStyles } from './Message.styles';
-import useSetExclusiveState from '../../hooks/useSetExclusiveState';
-import { useUserStore } from '../../store';
+import { useChatLayoutStore, useUserStore } from '../../store';
 
 const MessageAvatarContainer = ({
   message,
@@ -26,14 +25,13 @@ const MessageAvatarContainer = ({
     return URL;
   };
 
-  const setExclusiveState = useSetExclusiveState();
-  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
-    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
-    setCurrentUser: state.setCurrentUser,
-  }));
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
+  const setCurrentUser = useUserStore((state) => state.setCurrentUser);
 
   const handleAvatarClick = () => {
-    setExclusiveState(setShowCurrentUserInfo);
+    openExclusivePanel('showCurrentUserInfo');
     setCurrentUser(message?.u);
   };
 
diff --git a/packages/react/src/views/MessageAggregators/StarredMessages.js b/packages/react/src/views/MessageAggregators/StarredMessages.js
index 5ced944f06..f6ebb0cec9 100644
--- a/packages/react/src/views/MessageAggregators/StarredMessages.js
+++ b/packages/react/src/views/MessageAggregators/StarredMessages.js
@@ -1,15 +1,13 @@
 import React, { useCallback, useEffect } from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
-import { useStarredMessageStore, useUserStore } from '../../store';
+import { useChatDataStore, useUserStore } from '../../store';
 import { MessageAggregator } from './common/MessageAggregator';
 
 const StarredMessages = () => {
   const authenticatedUserId = useUserStore((state) => state.userId);
   const { variantOverrides } = useComponentOverrides('StarredMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
-  const starredMessages = useStarredMessageStore(
-    (state) => state.starredMessages
-  );
+  const starredMessages = useChatDataStore((state) => state.starredMessages);
   const shouldRender = useCallback(
     (msg) =>
       msg.starred &&
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
index ab8c3bc2f0..09a8871bb4 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -13,12 +13,11 @@ import {
 import { MessageDivider } from '../../Message/MessageDivider';
 import Message from '../../Message/Message';
 import getMessageAggregatorStyles from './MessageAggregator.styles';
-import { useMessageStore, useSidebarStore } from '../../../store';
+import { useChatLayoutStore, useMessageStore } from '../../../store';
 import { useSetMessageList } from '../../../hooks/useSetMessageList';
 import LoadingIndicator from './LoadingIndicator';
 import NoMessagesIndicator from './NoMessageIndicator';
 import FileDisplay from '../../FileMessage/FileMessage';
-import useSetExclusiveState from '../../../hooks/useSetExclusiveState';
 import { useRCContext } from '../../../context/RCInstance';
 
 export const MessageAggregator = ({
@@ -37,7 +36,9 @@ export const MessageAggregator = ({
   const { theme } = useTheme();
   const { mode } = useTheme();
   const styles = getMessageAggregatorStyles(theme);
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
   const { ECOptions } = useRCContext();
   const showRoles = ECOptions?.showRoles;
   const messages = useMessageStore((state) => state.messages);
@@ -53,7 +54,7 @@ export const MessageAggregator = ({
     shouldRender
   );
 
-  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
+  const setShowSidebar = useChatLayoutStore((state) => state.setShowSidebar);
   const openThread = useMessageStore((state) => state.openThread);
   const closeThread = useMessageStore((state) => state.closeThread);
 
@@ -142,7 +143,7 @@ export const MessageAggregator = ({
       iconName={iconName}
       filterProps={filterProps}
       searchProps={searchProps}
-      onClose={() => setExclusiveState(null)}
+      onClose={() => openExclusivePanel(null)}
       style={{
         width: '400px',
         padding: 0,
diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js
index 3008d46c1f..5522f82c77 100644
--- a/packages/react/src/views/RoomInformation/RoomInformation.js
+++ b/packages/react/src/views/RoomInformation/RoomInformation.js
@@ -10,9 +10,8 @@ import {
   useTheme,
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
-import { useChannelStore } from '../../store';
+import { useChannelStore, useChatLayoutStore } from '../../store';
 import getRoomInformationStyles from './RoomInformation.styles';
-import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 
 const Roominfo = () => {
   const { RCInstance, ECOptions } = useContext(RCContext);
@@ -21,7 +20,9 @@ const Roominfo = () => {
   const isRoomTeam = useChannelStore((state) => state.isRoomTeam);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
   const getChannelAvatarURL = (channelname) => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${channelname}`;
@@ -35,7 +36,7 @@ const Roominfo = () => {
     <ViewComponent
       title={isRoomTeam ? 'Team Information' : 'Room Information'}
       iconName="info"
-      onClose={() => setExclusiveState(null)}
+      onClose={() => openExclusivePanel(null)}
       style={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }}
       {...(viewType === 'Popup'
         ? {
diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
index 27a97278fc..2f383e4243 100644
--- a/packages/react/src/views/RoomMembers/RoomMember.js
+++ b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -19,7 +19,7 @@ import useInviteStore from '../../store/inviteStore';
 import InviteMembers from './InviteMembers';
 import { getRoomMemberStyles } from './RoomMembers.styles';
 import LoadingIndicator from '../MessageAggregators/common/LoadingIndicator';
-import useSetExclusiveState from '../../hooks/useSetExclusiveState';
+import { useChatLayoutStore } from '../../store';
 
 const RoomMembers = ({ members }) => {
   const { RCInstance } = useContext(RCContext);
@@ -35,7 +35,9 @@ const RoomMembers = ({ members }) => {
   const viewType = variantOverrides.viewType || 'Sidebar';
 
   const [userInfo, setUserInfo] = useState(null);
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
 
   const [searchTerm, setSearchTerm] = useState('');
   const [filteredMembers, setFilteredMembers] = useState(members);
@@ -87,7 +89,7 @@ const RoomMembers = ({ members }) => {
     <ViewComponent
       title="Members"
       iconName="members"
-      onClose={() => setExclusiveState(null)}
+      onClose={() => openExclusivePanel(null)}
       style={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }}
       {...(viewType === 'Popup'
         ? {
diff --git a/packages/react/src/views/RoomMembers/RoomMemberItem.js b/packages/react/src/views/RoomMembers/RoomMemberItem.js
index d53632782d..d6ef390066 100644
--- a/packages/react/src/views/RoomMembers/RoomMemberItem.js
+++ b/packages/react/src/views/RoomMembers/RoomMemberItem.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Icon, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import { RoomMemberItemStyles } from './RoomMembers.styles';
-import useSetExclusiveState from '../../hooks/useSetExclusiveState';
-import { useUserStore } from '../../store';
+import { useChatLayoutStore, useUserStore } from '../../store';
 
 const RoomMemberItem = ({ user, host, userStatus }) => {
   const avatarUrl = new URL(`avatar/${user.username}`, host).toString();
@@ -12,14 +11,13 @@ const RoomMemberItem = ({ user, host, userStatus }) => {
   const { mode } = useTheme();
   const styles = RoomMemberItemStyles(theme, mode);
 
-  const setExclusiveState = useSetExclusiveState();
-  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
-    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
-    setCurrentUser: state.setCurrentUser,
-  }));
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
+  const setCurrentUser = useUserStore((state) => state.setCurrentUser);
 
   const handleShowUserInfo = () => {
-    setExclusiveState(setShowCurrentUserInfo);
+    openExclusivePanel('showCurrentUserInfo');
     setCurrentUser(user);
   };
   return (
diff --git a/packages/react/src/views/TotpModal/TwoFactorTotpModal.js b/packages/react/src/views/TotpModal/TwoFactorTotpModal.js
index aef5d201ef..e3860f4355 100644
--- a/packages/react/src/views/TotpModal/TwoFactorTotpModal.js
+++ b/packages/react/src/views/TotpModal/TwoFactorTotpModal.js
@@ -8,12 +8,12 @@ import {
   Input,
   Button,
 } from '@embeddedchat/ui-elements';
-import { totpModalStore, useUserStore } from '../../store';
+import { useAuthStore, useUserStore } from '../../store';
 
 export default function TotpModal({ handleLogin }) {
   const [accessCode, setAccessCode] = useState(null);
-  const isTotpModalOpen = totpModalStore((state) => state.isTotpModalOpen);
-  const setIsTotpModalOpen = totpModalStore(
+  const isTotpModalOpen = useAuthStore((state) => state.isTotpModalOpen);
+  const setIsTotpModalOpen = useAuthStore(
     (state) => state.setIsTotpModalOpen
   );
   const password = useUserStore((state) => state.password);
diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js
index a544bd334b..38a0ade89d 100644
--- a/packages/react/src/views/UserInformation/UserInformation.js
+++ b/packages/react/src/views/UserInformation/UserInformation.js
@@ -13,18 +13,19 @@ import {
   useTheme,
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
-import { useUserStore } from '../../store';
+import { useChatLayoutStore, useUserStore } from '../../store';
 import formatTimestamp from '../../lib/formatTimestamp';
 import formatTimestampGetDate from '../../lib/formatTimestampGetDate';
 import UserInfoField from './UserInfoField';
 import getUserInformationStyles from './UserInformation.styles';
-import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 import { Markdown } from '../Markdown';
 
 const UserInformation = () => {
   const { variantOverrides } = useComponentOverrides('UserInformation');
   const viewType = variantOverrides.viewType || 'Sidebar';
-  const setExclusiveState = useSetExclusiveState();
+  const openExclusivePanel = useChatLayoutStore(
+    (state) => state.openExclusivePanel
+  );
   const { RCInstance } = useContext(RCContext);
   const { theme } = useTheme();
   const { mode } = useTheme();
@@ -68,7 +69,7 @@ const UserInformation = () => {
     <ViewComponent
       title="User Info"
       iconName="user"
-      onClose={() => setExclusiveState(null)}
+      onClose={() => openExclusivePanel(null)}
       style={{
         width: '400px',
         zIndex: window.innerWidth <= 780 ? 1 : null,