diff --git a/src/views/chat/ChatPage/Index.vue b/src/views/chat/ChatPage/Index.vue
index b17e7064..e81604a5 100644
--- a/src/views/chat/ChatPage/Index.vue
+++ b/src/views/chat/ChatPage/Index.vue
@@ -1,7 +1,8 @@
 <template>
   <view class="flex h-full flex-1">
-    <ToolSection />
-    <Session />
+    <ToolSection @menuSelectChange="toolMenuSelectChange" />
+    <Session v-if="bussinessType === MENU_LIST_ENUM.CONVERSATION" />
+    <Friends v-if="bussinessType === MENU_LIST_ENUM.FRIENDS" />
     <view class="flex w-full flex-col">
       <ChatHeader />
       <ChatMessage />
@@ -17,14 +18,17 @@
 
 import ToolSection from '../components/ToolSection/Index.vue'
 import Session from '../components/Session/Index.vue'
+import Friends from '../components/Friends/Index.vue'
 import ChatHeader from '../components/ChatHeader/Index.vue'
 import ChatMessage from '../components/ChatMessage/Index.vue'
 import InputSection from '../components/InputSection/index.vue'
-
-/**
- * Define Data Structure of this page, then initialize it with reactive object
- */
-interface State {}
+import { MENU_LIST_ENUM } from '../types/index.d.ts'
 
 defineOptions({ name: 'ChatPage' })
+
+const bussinessType = ref(1)
+
+const toolMenuSelectChange = (value) => {
+  bussinessType.value = value
+}
 </script>
diff --git a/src/views/chat/components/FriendItem/Index.vue b/src/views/chat/components/FriendItem/Index.vue
new file mode 100644
index 00000000..0cd5d841
--- /dev/null
+++ b/src/views/chat/components/FriendItem/Index.vue
@@ -0,0 +1,32 @@
+<template>
+  <view class="flex py-2 border-b-gray-3 border-b-solid items-center px-2" :class="bgColor()">
+    <el-avatar shape="square" size="default" class="mr-2" :src="friend.avatar" />
+    <label>{{ friend.name }}</label>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { useChatStore } from '../../store/chatstore'
+import Friend from '../../model/Friend'
+
+defineOptions({ name: 'SessionItem' })
+
+const props = defineProps({
+  friend: {
+    type: Object as PropType<Friend>,
+    default: () => {}
+  },
+  index: Number
+})
+
+const chatStore = useChatStore()
+
+const bgColor = () => {
+  return props.index === chatStore.currentSessionIndex ? 'bg-blue' : 'bg-white'
+}
+
+const fontColor = () => {
+  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'text-gray-f'
+}
+</script>
diff --git a/src/views/chat/components/Friends/Index.vue b/src/views/chat/components/Friends/Index.vue
new file mode 100644
index 00000000..80cf8113
--- /dev/null
+++ b/src/views/chat/components/Friends/Index.vue
@@ -0,0 +1,28 @@
+<template>
+  <view
+    class="flex flex-col items-center h-full py-2 b-1 b-gray b-solid"
+    style="width: 248px; min-width: 248px"
+  >
+    <view class="flex flex-col w-full">
+      <FriendItem
+        v-for="(item, index) in friendList"
+        :key="item.id"
+        :index="index"
+        :friend="item"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import FriendItem from '../FriendItem/Index.vue'
+import { useFriendStore } from '../../store/friendstore'
+import { onMounted } from 'vue'
+
+defineOptions({ name: 'Friends' })
+
+const { friendList } = useFriendStore()
+onMounted(() => {
+  // set default conversation
+})
+</script>
diff --git a/src/views/chat/components/ToolSection/Index.vue b/src/views/chat/components/ToolSection/Index.vue
index 98fb157b..405fdbfe 100644
--- a/src/views/chat/components/ToolSection/Index.vue
+++ b/src/views/chat/components/ToolSection/Index.vue
@@ -1,9 +1,45 @@
 <template>
   <view class="flex flex-col items-center bg-gray h-full py-2" style="width: 80px">
     <el-avatar shape="square" />
+    <icon
+      icon="ep:chat-line-round"
+      :size="24"
+      color="white"
+      class="px-4 py-4 mt-1 rounded-2"
+      :class="selectItem === MENU_LIST_ENUM.CONVERSATION ? 'bg-red' : ''"
+      @click="onConversatonClicked"
+    />
+    <icon
+      icon="ep:avatar"
+      :size="24"
+      color="white"
+      class="px-4 py-4 rounded-2 mt-2"
+      :class="selectItem === MENU_LIST_ENUM.FRIENDS ? 'bg-red' : ''"
+      @click="onFriendsClicked"
+    />
   </view>
 </template>
 
 <script lang="ts" setup>
+import { MENU_LIST_ENUM } from '../../types/index.d.ts'
+
 defineOptions({ name: 'ToolSection' })
+
+const selectItem = ref(1)
+
+const emit = defineEmits(['menuSelectChange'])
+watch(
+  () => selectItem.value,
+  (newValue) => {
+    emit('menuSelectChange', newValue)
+  }
+)
+
+const onConversatonClicked = () => {
+  selectItem.value = MENU_LIST_ENUM.CONVERSATION
+}
+
+const onFriendsClicked = () => {
+  selectItem.value = MENU_LIST_ENUM.FRIENDS
+}
 </script>
diff --git a/src/views/chat/model/Friend.ts b/src/views/chat/model/Friend.ts
new file mode 100644
index 00000000..3a62b79b
--- /dev/null
+++ b/src/views/chat/model/Friend.ts
@@ -0,0 +1,15 @@
+export default class Friend {
+  public id: string
+  public avatar: string
+  public name: string
+  public description: string
+  public createTime: number
+
+  constructor(id, avatar, name, description, createTime) {
+    this.id = id
+    this.avatar = avatar
+    this.name = name
+    this.description = description
+    this.createTime = createTime
+  }
+}
diff --git a/src/views/chat/store/friendstore.ts b/src/views/chat/store/friendstore.ts
new file mode 100644
index 00000000..7b121701
--- /dev/null
+++ b/src/views/chat/store/friendstore.ts
@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia'
+import BaseConversation from '../model/BaseConversation'
+import Friend from '../model/Friend'
+
+interface FriendStoreModel {
+  friendList: Array<Friend>
+}
+
+export const useFriendStore = defineStore('friendStore', {
+  state: (): FriendStoreModel => ({
+    friendList: [
+      {
+        id: '1111',
+        name: 'Elon Musk',
+        avatar:
+          'https://img0.baidu.com/it/u=4211304696,1059959254&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1174',
+        description: 'cool boy',
+        createTime: 1695201147622
+      },
+      {
+        id: '2222',
+        name: 'Spider Man',
+        avatar:
+          'https://www.hottoys.com.cn/wp-content/uploads/2019/06/bloggerreview_spiderman_advanced_ben-9.jpg',
+        description: 'hero',
+        createTime: 1695201147622
+      }
+    ]
+  }),
+
+  getters: {
+    getFriendList(state: FriendStoreModel): Array<Friend> {
+      return state.friendList
+    }
+  },
+
+  actions: {
+    addSession(session: BaseConversation) {
+      this.friendList.push(session)
+    }
+  }
+})
diff --git a/src/views/chat/types/index.d.ts b/src/views/chat/types/index.d.ts
index 697decec..ab8b1507 100644
--- a/src/views/chat/types/index.d.ts
+++ b/src/views/chat/types/index.d.ts
@@ -23,5 +23,10 @@ export enum MessageType {
   SYSTEM = 4
 }
 
+export const enum MENU_LIST_ENUM {
+  CONVERSATION = 1,
+  FRIENDS = 2
+}
+
 export type MessageModelType = BaseMessage | TextMessage | ImageMessage
 export type ConversationModelType = BaseConversation | ChatConversation