diff --git a/src/app/organisms/navigation/Sidebar1.tsx b/src/app/organisms/navigation/Sidebar1.tsx
index fa09c259..d9ee4662 100644
--- a/src/app/organisms/navigation/Sidebar1.tsx
+++ b/src/app/organisms/navigation/Sidebar1.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Icon, Icons, Badge, AvatarFallback, Text } from 'folds';
+import { useAtom } from 'jotai';
 
 import {
   Sidebar,
@@ -8,8 +9,11 @@ import {
   SidebarStack,
   SidebarAvatar,
 } from '../../components/sidebar';
+import { selectedTabAtom, SidebarTab } from '../../state/selectedTab';
 
 export function Sidebar1() {
+  const [selectedTab, setSelectedTab] = useAtom(selectedTabAtom);
+
   return (
     <Sidebar>
       <SidebarContent
@@ -17,12 +21,19 @@ export function Sidebar1() {
           <>
             <SidebarStack>
               <SidebarAvatar
-                active
+                active={selectedTab === SidebarTab.Home}
                 outlined
                 tooltip="Home"
                 avatarChildren={<Icon src={Icons.Home} filled />}
+                onClick={() => setSelectedTab(SidebarTab.Home)}
+              />
+              <SidebarAvatar
+                active={selectedTab === SidebarTab.People}
+                outlined
+                tooltip="People"
+                avatarChildren={<Icon src={Icons.User} />}
+                onClick={() => setSelectedTab(SidebarTab.People)}
               />
-              <SidebarAvatar outlined tooltip="People" avatarChildren={<Icon src={Icons.User} />} />
             </SidebarStack>
             <SidebarStackSeparator />
             <SidebarStack>
diff --git a/src/app/state/selectedRoom.ts b/src/app/state/selectedRoom.ts
new file mode 100644
index 00000000..1ef04de3
--- /dev/null
+++ b/src/app/state/selectedRoom.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const selectedRoomAtom = atom<string | undefined>(undefined);
diff --git a/src/app/state/selectedTab.ts b/src/app/state/selectedTab.ts
new file mode 100644
index 00000000..e680ae60
--- /dev/null
+++ b/src/app/state/selectedTab.ts
@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+
+export enum SidebarTab {
+  Home = 'Home',
+  People = 'People',
+}
+
+export const selectedTabAtom = atom<SidebarTab | string>(SidebarTab.Home);
diff --git a/src/app/state/tabToRoom.ts b/src/app/state/tabToRoom.ts
new file mode 100644
index 00000000..2f4ee92a
--- /dev/null
+++ b/src/app/state/tabToRoom.ts
@@ -0,0 +1,34 @@
+import produce from 'immer';
+import { atom } from 'jotai';
+import { MatrixClient } from 'matrix-js-sdk';
+
+type RoomInfo = {
+  roomId: string;
+  timestamp: number;
+};
+type TabToRoom = Map<string, RoomInfo>;
+
+type TabToRoomAction = {
+  type: 'PUT';
+  tabInfo: { tabId: string; roomInfo: RoomInfo };
+};
+
+const baseTabToRoom = atom<TabToRoom>(new Map());
+export const tabToRoomAtom = atom<TabToRoom, TabToRoomAction>(
+  (get) => get(baseTabToRoom),
+  (get, set, action) => {
+    if (action.type === 'PUT') {
+      set(
+        baseTabToRoom,
+        produce(get(baseTabToRoom), (draft) => {
+          draft.set(action.tabInfo.tabId, action.tabInfo.roomInfo);
+        })
+      );
+    }
+  }
+);
+
+export const useBindTabToRoomAtom = (mx: MatrixClient) => {
+  console.log(mx);
+  // TODO:
+};