diff --git a/im-platform/src/main/java/com/lx/implatform/controller/FriendController.java b/im-platform/src/main/java/com/lx/implatform/controller/FriendController.java
index eb25d50..2bbd2f2 100644
--- a/im-platform/src/main/java/com/lx/implatform/controller/FriendController.java
+++ b/im-platform/src/main/java/com/lx/implatform/controller/FriendController.java
@@ -31,7 +31,10 @@ public class FriendController {
     public Result< List<FriendVO>> findFriends(){
         List<Friend> friends = friendService.findFriendByUserId(SessionContext.getSession().getId());
         List<FriendVO> vos = friends.stream().map(f->{
-            FriendVO vo = BeanUtils.copyProperties(f, FriendVO.class);
+            FriendVO vo = new FriendVO();
+            vo.setId(f.getFriendId());
+            vo.setHeadImage(f.getFriendHeadImage());
+            vo.setNickName(f.getFriendNickName());
             return vo;
         }).collect(Collectors.toList());
         return ResultUtils.success(vos);
diff --git a/im-platform/src/main/java/com/lx/implatform/service/impl/FriendServiceImpl.java b/im-platform/src/main/java/com/lx/implatform/service/impl/FriendServiceImpl.java
index 73b2906..626d5e6 100644
--- a/im-platform/src/main/java/com/lx/implatform/service/impl/FriendServiceImpl.java
+++ b/im-platform/src/main/java/com/lx/implatform/service/impl/FriendServiceImpl.java
@@ -80,15 +80,15 @@ public class FriendServiceImpl extends ServiceImpl<FriendMapper, Friend> impleme
         QueryWrapper<Friend> queryWrapper = new QueryWrapper<>();
         queryWrapper.lambda()
                 .eq(Friend::getUserId,userId)
-                .eq(Friend::getFriendId,vo.getFriendId());
+                .eq(Friend::getFriendId,vo.getId());
 
         Friend f = this.getOne(queryWrapper);
         if(f == null){
             throw new GlobalException(ResultCode.PROGRAM_ERROR,"对方不是您的好友");
         }
 
-        f.setFriendHeadImage(vo.getFriendHeadImage());
-        f.setFriendNickName(vo.getFriendNickName());
+        f.setFriendHeadImage(vo.getHeadImage());
+        f.setFriendNickName(vo.getNickName());
         this.updateById(f);
     }
 
diff --git a/im-platform/src/main/java/com/lx/implatform/vo/FriendVO.java b/im-platform/src/main/java/com/lx/implatform/vo/FriendVO.java
index d4c739b..6b8a230 100644
--- a/im-platform/src/main/java/com/lx/implatform/vo/FriendVO.java
+++ b/im-platform/src/main/java/com/lx/implatform/vo/FriendVO.java
@@ -13,13 +13,13 @@ public class FriendVO {
 
     @NotNull(message = "好友id不可为空")
     @ApiModelProperty(value = "好友id")
-    private Long friendId;
+    private Long id;
 
     @NotNull(message = "好友昵称不可为空")
     @ApiModelProperty(value = "好友昵称")
-    private String friendNickName;
+    private String nickName;
 
 
     @ApiModelProperty(value = "好友头像")
-    private String friendHeadImage;
+    private String headImage;
 }
diff --git a/im-ui/src/components/friend/AddFriend.vue b/im-ui/src/components/friend/AddFriend.vue
index 21dd0ff..01db5aa 100644
--- a/im-ui/src/components/friend/AddFriend.vue
+++ b/im-ui/src/components/friend/AddFriend.vue
@@ -4,17 +4,17 @@
 			<el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
 		</el-input>
 		<el-scrollbar style="height:400px">
-			<div v-for="(userInfo) in users" :key="userInfo.id">
+			<div v-for="(user) in users" :key="user.id">
 				<div class="item">
 					<div class="avatar">
-						<head-image :url="userInfo.headImage"></head-image>
+						<head-image :url="user.headImage"></head-image>
 					</div>
 					<div class="add-friend-text">
-						<div>{{userInfo.nickName}}</div>
-						<div :class="userInfo.online ? 'online-status  online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div>
+						<div>{{user.nickName}}</div>
+						<div :class="user.online ? 'online-status  online':'online-status'">{{ user.online?"[在线]":"[离线]"}}</div>
 					</div>
-					 <el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriend(userInfo)">添加</el-button>
-					 <el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button>
+					 <el-button type="success" v-show="!isFriend(user.id)" plain @click="handleAddFriend(user)">添加</el-button>
+					 <el-button type="info" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
 				</div>
 			</div>
 		</el-scrollbar>
@@ -54,27 +54,27 @@
 					this.users = data;
 				})
 			},
-			handleAddFriend(userInfo){
+			handleAddFriend(user){
 				this.$http({
 					url: "/api/friend/add",
 					method: "post",
 					params: {
-						friendId: userInfo.id
+						friendId: user.id
 					}
 				}).then((data) => {
 					this.$message.success("添加成功，对方已成为您的好友");
-					let friendInfo = {
-						friendId:userInfo.id,
-						friendNickName: userInfo.nickName,
-						friendHeadImage: userInfo.headImage,
-						online: userInfo.online
+					let friend = {
+						id:user.id,
+						nickName: user.nickName,
+						headImage: user.headImage,
+						online: user.online
 					}
-					this.$store.commit("addFriend",friendInfo);
+					this.$store.commit("addFriend",friend);
 				})
 			},
 			isFriend(userId){
 				let friends = this.$store.state.friendStore.friends;
-				let friend = friends.find((f)=> f.friendId==userId);			
+				let friend = friends.find((f)=> f.id==userId);			
 				return friend != undefined;
 			}
 		},
diff --git a/im-ui/src/components/friend/FriendItem.vue b/im-ui/src/components/friend/FriendItem.vue
index 4717b19..bb3c686 100644
--- a/im-ui/src/components/friend/FriendItem.vue
+++ b/im-ui/src/components/friend/FriendItem.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="item" :class="active ? 'active' : ''">
 		<div class="avatar">
-			<head-image :url="friendInfo.friendHeadImage" > </head-image>
+			<head-image :url="friend.headImage"> </head-image>
 		</div>
 		<div class="text">
-			<div>{{ friendInfo.friendNickName}}</div>
+			<div>{{ friend.nickName}}</div>
 			<div :class="online ? 'online-status  online':'online-status'">{{ online?"[在线]":"[离线]"}}</div>
 		</div>
-		<div class="close" @click.stop="$emit('del',friendInfo,index)">
+		<div class="close" @click.stop="$emit('del',friend,index)">
 			<i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i>
 		</div>
 	</div>
@@ -15,27 +15,28 @@
 
 <script>
 	import HeadImage from '../common/HeadImage.vue';
-	
+
 	export default {
 		name: "frinedItem",
-		components: {HeadImage},
+		components: {
+			HeadImage
+		},
 		data() {
-			return {
-}
+			return {}
 		},
 		props: {
-			friendInfo: {
+			friend: {
 				type: Object
 			},
-			active:{
+			active: {
 				type: Boolean
 			},
-			index:{
+			index: {
 				type: Number
 			}
 		},
-		computed:{
-			online(){
+		computed: {
+			online() {
 				return this.$store.state.friendStore.friends[this.index].online;
 			}
 		}
@@ -52,15 +53,16 @@
 		align-items: center;
 		padding-right: 5px;
 		background-color: #eeeeee;
+
 		&:hover {
 			background-color: #dddddd;
 		}
-		
-		&.active{
+
+		&.active {
 			background-color: #cccccc;
 		}
-		
-		
+
+
 		.close {
 			width: 1.5rem;
 			height: 1.5rem;
@@ -93,15 +95,17 @@
 			height: 100%;
 			flex-shrink: 0;
 			overflow: hidden;
+
 			&>div {
 				display: flex;
 				justify-content: flex-start;
 			}
-			
-			.online-status{
+
+			.online-status {
 				font-size: 12px;
 				font-weight: 600;
-				&.online{
+
+				&.online {
 					color: #5fb878;
 				}
 			}
diff --git a/im-ui/src/components/group/CreateGroup.vue b/im-ui/src/components/group/CreateGroup.vue
deleted file mode 100644
index 48d48ea..0000000
--- a/im-ui/src/components/group/CreateGroup.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
diff --git a/im-ui/src/store/chatStore.js b/im-ui/src/store/chatStore.js
index 1d88515..50fa08a 100644
--- a/im-ui/src/store/chatStore.js
+++ b/im-ui/src/store/chatStore.js
@@ -10,7 +10,6 @@ export default {
 			let chat = null;
 			for(let i in state.chats){
 				if(state.chats[i].targetId === chatInfo.targetId){
-			
 					chat = state.chats[i];
 					// 放置头部
 					state.chats.splice(i,1);
@@ -68,11 +67,11 @@ export default {
 				}
 			}
 		},
-		setChatUserInfo(state, userInfo){
+		updateChatFromUser(state, user){
 			for(let i in state.chats){
-				if(state.chats[i].targetId == userInfo.id){
-					state.chats[i].headImage = userInfo.headImageThumb;
-					state.chats[i].showName = userInfo.nickName;
+				if(state.chats[i].targetId == user.id){
+					state.chats[i].headImage = user.headImageThumb;
+					state.chats[i].showName = user.nickName;
 					break;
 				}
 			}
diff --git a/im-ui/src/store/friendStore.js b/im-ui/src/store/friendStore.js
index 0de5c47..c508dc2 100644
--- a/im-ui/src/store/friendStore.js
+++ b/im-ui/src/store/friendStore.js
@@ -21,10 +21,10 @@ export default {
 		setFriends(state, friends) {
 			state.friends = friends;
 		},
-		updateFriend(state,friendInfo){
+		updateFriend(state,friend){
 			state.friends.forEach((f,index)=>{
-				if(f.friendId==friendInfo.friendId){
-					state.friends[index] = friendInfo;
+				if(f.id==friend.id){
+					state.friends[index] = friend;
 				}
 			})
 		},
@@ -34,15 +34,15 @@ export default {
 		removeFriend(state, index) {
 			state.friends.splice(index, 1);
 		},
-		addFriend(state, friendInfo) {
-			state.friends.push(friendInfo);
+		addFriend(state, friend) {
+			state.friends.push(friend);
 		},
 		refreshOnlineStatus(state){
 			let userIds = [];
 			if(state.friends.length ==0){
 				return; 
 			}
-			state.friends.forEach((f)=>{userIds.push(f.friendId)});
+			state.friends.forEach((f)=>{userIds.push(f.id)});
 			httpRequest({
 				url: '/api/user/online',
 				method: 'get',
@@ -59,7 +59,7 @@ export default {
 		},
 		setOnlineStatus(state,onlineIds){
 			state.friends.forEach((f)=>{
-				let onlineFriend = onlineIds.find((id)=> f.friendId==id);
+				let onlineFriend = onlineIds.find((id)=> f.id==id);
 				f.online = onlineFriend != undefined;
 			});
 			
@@ -77,7 +77,7 @@ export default {
 			// 重新排序后，activeIndex指向的好友可能会变化，需要重新指定
 			if(state.activeIndex >=0){
 				state.friends.forEach((f,i)=>{
-					if(f.friendId == activeFriend.friendId){
+					if(f.id == activeFriend.id){
 						state.activeIndex = i;
 					}
 				})
diff --git a/im-ui/src/store/groupStore.js b/im-ui/src/store/groupStore.js
index f6c4f04..a30f1a8 100644
--- a/im-ui/src/store/groupStore.js
+++ b/im-ui/src/store/groupStore.js
@@ -7,13 +7,16 @@ export default {
 		activeIndex: -1,
 	},
 	mutations: {
-		initGroupStore(state, userInfo) {
+		initGroupStore(state) {
 			httpRequest({
-				url: '/api/friends/list',
+				url: '/api/group/list',
 				method: 'get'
-			}).then((friendsList) => {
-				this.commit("setFriendsList",friendsList);
-				this.commit("refreshOnlineStatus");
+			}).then((groups) => {
+				this.commit("setGroups",groups);
 			})
 		},
+		setGroups(state,groups){
+			state.groups = groups;
+		}
+	}	
 }
\ No newline at end of file
diff --git a/im-ui/src/store/index.js b/im-ui/src/store/index.js
index 40752ca..9705f11 100644
--- a/im-ui/src/store/index.js
+++ b/im-ui/src/store/index.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import chatStore from './chatStore.js';
 import friendStore from './friendStore.js';
 import userStore from './userStore.js';
+import groupStore from './groupStore.js';
 import VuexPersistence from 'vuex-persist'
 
 
@@ -14,15 +15,15 @@ const vuexLocal = new VuexPersistence({
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	modules: {chatStore,friendStore,userStore},
+	modules: {chatStore,friendStore,userStore,groupStore},
 	state: {
 		userInfo: {}
 	},
 	plugins: [vuexLocal.plugin],
 	mutations: {
 		initStore(state){
-		
 			this.commit("initFriendStore");
+			this.commit("initGroupStore");
 		}
 		
 	},
diff --git a/im-ui/src/view/Chat.vue b/im-ui/src/view/Chat.vue
index 9e05a6d..029f624 100644
--- a/im-ui/src/view/Chat.vue
+++ b/im-ui/src/view/Chat.vue
@@ -94,12 +94,12 @@
 				this.$http({
 					url: `/api/user/find/${userId}`,
 					method: 'get'
-				}).then((userInfo) => {
+				}).then((user) => {
 					// 如果发现好友的头像和昵称改了，进行更新
 					let chat = this.chatStore.chats[index];
-					if (userInfo.headImageThumb != chat.headImage ||
-						userInfo.nickName != chat.showName) {
-						this.updateFriendInfo(userInfo, index)
+					if (user.headImageThumb != chat.headImage ||
+						user.nickName != chat.showName) {
+						this.updateFriendInfo(user, index)
 					}
 				})
 			},
@@ -245,19 +245,19 @@
 					this.scrollToBottom();
 				})
 			},
-			updateFriendInfo(userInfo, index) {
-				let friendsInfo = {
-					friendId: userInfo.id,
-					friendNickName: userInfo.nickName,
-					friendHeadImage: userInfo.headImageThumb
+			updateFriendInfo(user, index) {
+				let friendInfo = {
+					id: user.id,
+					nickName: user.nickName,
+					headImage: user.headImageThumb
 				};
 				this.$http({
 					url: "/api/friends/update",
 					method: "put",
-					data: friendsInfo
+					data: friendInfo
 				}).then(() => {
-					this.$store.commit("updateFriends", friendsInfo);
-					this.$store.commit("setChatUserInfo", userInfo);
+					this.$store.commit("updateFriend", friendInfo);
+					this.$store.commit("updateChatFromUser", user);
 				})
 			},
 			showName(msg) {
diff --git a/im-ui/src/view/Friend.vue b/im-ui/src/view/Friend.vue
index 8eb31eb..593d4f6 100644
--- a/im-ui/src/view/Friend.vue
+++ b/im-ui/src/view/Friend.vue
@@ -13,9 +13,9 @@
 				</add-friend>
 			</el-header>
 			<el-main>
-				<div v-for="(friendInfo,index) in $store.state.friendStore.friends" :key="friendInfo.id">
-					<friend-item v-show="friendInfo.friendNickName.startsWith(searchText)" :friendInfo="friendInfo" :index="index"
-					 :active="index === $store.state.friendStore.activeIndex" @del="handleDelItem(friendInfo,index)" @click.native="handleActiveItem(friendInfo,index)">
+				<div v-for="(friend,index) in $store.state.friendStore.friends" :key="friend.id">
+					<friend-item v-show="friend.nickName.startsWith(searchText)" :friend="friend" :index="index"
+					 :active="index === $store.state.friendStore.activeIndex" @del="handleDelItem(friend,index)" @click.native="handleActiveItem(friend,index)">
 					</friend-item>
 				</div>
 			</el-main>
@@ -23,15 +23,15 @@
 		<el-container class="r-friend-box">
 			<div v-show="$store.state.friendStore.activeIndex>=0">
 				<div class="user-detail">
-					<head-image class="detail-head-image" :url="activeUserInfo.headImage"></head-image>
+					<head-image class="detail-head-image" :url="activeUser.headImage"></head-image>
 					<div class="info-item">
 						<el-descriptions title="好友信息" class="description" :column="1">
-							<el-descriptions-item label="用户名">{{ activeUserInfo.userName }}
+							<el-descriptions-item label="用户名">{{ activeUser.userName }}
 							</el-descriptions-item>
-							<el-descriptions-item label="昵称">{{ activeUserInfo.nickName }}
+							<el-descriptions-item label="昵称">{{ activeUser.nickName }}
 							</el-descriptions-item>
-							<el-descriptions-item label="性别">{{ activeUserInfo.sex==0?"男":"女" }}</el-descriptions-item>
-							<el-descriptions-item label="签名">{{ activeUserInfo.signature }}</el-descriptions-item>
+							<el-descriptions-item label="性别">{{ activeUser.sex==0?"男":"女" }}</el-descriptions-item>
+							<el-descriptions-item label="签名">{{ activeUser.signature }}</el-descriptions-item>
 						</el-descriptions>
 					</div>
 				</div>
@@ -59,7 +59,7 @@
 			return {
 				searchText: "",
 				showAddFriend: false,
-				activeUserInfo: {}
+				activeUser: {}
 			}
 		},
 		methods: {
@@ -69,26 +69,26 @@
 			handleCloseAddFriend() {
 				this.showAddFriend = false;
 			},
-			handleActiveItem(friendInfo, index) {
+			handleActiveItem(friend, index) {
 				this.$store.commit("activeFriend", index);
 				this.$http({
-					url: `/api/user/find/${friendInfo.friendId}`,
+					url: `/api/user/find/${friend.id}`,
 					method: 'get'
-				}).then((userInfo) => {
-					this.activeUserInfo = userInfo;
+				}).then((user) => {
+					this.activeUser = user;
 					// 如果发现好友的头像和昵称改了，进行更新
-					if (userInfo.headImageThumb != friendInfo.friendHeadImage ||
-						userInfo.nickName != friendInfo.friendNickName) {
-						this.updateFriendInfo(friendInfo, userInfo, index)
+					if (user.headImageThumb != friend.headImage ||
+						user.nickName != friend.nickName) {
+						this.updateFriendInfo(friend, user, index)
 					}
 				})
 			},
-			handleDelItem(friendInfo, index) {
+			handleDelItem(friend, index) {
 				this.$http({
 					url: '/api/friend/delete',
 					method: 'delete',
 					params: {
-						friendId: friendInfo.friendId
+						friendId: friend.id
 					}
 				}).then((data) => {
 					this.$message.success("删除好友成功");
@@ -96,27 +96,27 @@
 				})
 			},
 			handleSendMessage() {
-				let userInfo = this.activeUserInfo;
-				let chatInfo = {
+				let user = this.activeUser;
+				let chat = {
 					type: 'single',
-					targetId: userInfo.id,
-					showName: userInfo.nickName,
-					headImage: userInfo.headImage,
+					targetId: user.id,
+					showName: user.nickName,
+					headImage: user.headImage,
 				};
-				this.$store.commit("openChat", chatInfo);
+				this.$store.commit("openChat", chat);
 				this.$store.commit("activeChat", 0);
 				this.$router.push("/home/chat");
 			},
-			updateFriendInfo(friendInfo, userInfo, index) {
-				friendInfo.friendHeadImage = userInfo.headImageThumb;
-				friendInfo.friendNickName = userInfo.nickName;
+			updateFriendInfo(friend, user, index) {
+				friend.headImage = user.headImageThumb;
+				friend.nickName = user.nickName;
 				this.$http({
 					url: "/api/friend/update",
 					method: "put",
-					data: friendInfo
+					data: friend
 				}).then(() => {
-					this.$store.commit("updateFriend", friendInfo);
-					this.$store.commit("setChatUserInfo", userInfo);
+					this.$store.commit("updateFriend", friend);
+					this.$store.commit("updateChatFromUser", user);
 				})
 			}
 		}
diff --git a/im-ui/src/view/Group.vue b/im-ui/src/view/Group.vue
index 9603f13..ee24d85 100644
--- a/im-ui/src/view/Group.vue
+++ b/im-ui/src/view/Group.vue
@@ -7,12 +7,17 @@
 						<el-button slot="append" icon="el-icon-search"></el-button>
 					</el-input>
 				</div>
-				<el-button plain icon="el-icon-plus" 
-				style="border: none; padding: 12px; font-size: 20px;color: black;" 
-				title="添加好友" @click="handleCreateGroup()"></el-button>
+				<el-button plain icon="el-icon-plus" style="border: none; padding: 12px; font-size: 20px;color: black;" title="创建群聊"
+				 @click="handleCreateGroup()"></el-button>
 			</el-header>
 			<el-main>
-
+				<el-main>
+					<div v-for="(group,index) in groupStore.groups" :key="group.id">
+						<group-item v-show="group.name.startsWith(searchText)" :group="group" :index="index" :active="index === groupStore.activeIndex"
+						 @click.native="handleActiveItem(group,index)">
+						</group-item>
+					</div>
+				</el-main>
 			</el-main>
 		</el-aside>
 		<el-container class="r-chat-box">
@@ -21,9 +26,15 @@
 	</el-container>
 </template>
 
+
 <script>
+	import GroupItem from '../components/group/GroupItem';
+
 	export default {
 		name: "group",
+		components: {
+			GroupItem
+		},
 		data() {
 			return {
 				searchText: ""
@@ -32,18 +43,26 @@
 		methods: {
 			handleCreateGroup() {
 				this.$prompt('请输入群聊名称', '创建群聊', {
-					  confirmButtonText: '确定',
-					  cancelButtonText: '取消',
-					  inputPattern:  /\S/,
-					  inputErrorMessage: '请输入群聊名称'
-					}).then((o) => {
-						this.$http({
-							url: `/api/group/create?groupName=${o.value}`,
-							method: 'post'
-						}).then((groupInfo)=>{
-							console.log(groupInfo);
-						})
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					inputPattern: /\S/,
+					inputErrorMessage: '请输入群聊名称'
+				}).then((o) => {
+					this.$http({
+						url: `/api/group/create?groupName=${o.value}`,
+						method: 'post'
+					}).then((groupInfo) => {
+						console.log(groupInfo);
 					})
+				})
+			},
+			handleActiveItem(group, index) {
+				this.$store.commit("activeGroup", index);
+			}
+		},
+		computed: {
+			groupStore() {
+				return this.$store.state.groupStore;
 			}
 		}
 	}
@@ -60,11 +79,11 @@
 				align-items: center;
 				padding: 5px;
 				background-color: white;
-				
-				.l-group-search{
+
+				.l-group-search {
 					flex: 1;
 				}
-			}		
+			}
 		}
 	}
 </style>
diff --git a/im-ui/src/view/Home.vue b/im-ui/src/view/Home.vue
index 57b6e58..3c34418 100644
--- a/im-ui/src/view/Home.vue
+++ b/im-ui/src/view/Home.vue
@@ -73,12 +73,12 @@
 			},
 			handleSingleMessage(msg){
 				// 插入私聊消息
-				let f = this.$store.state.friendStore.friends.find((f)=>f.friendId==msg.sendUserId);
+				let f = this.$store.state.friendStore.friends.find((f)=>f.id==msg.sendUserId);
 				let chatInfo = {
 					type: 'single',
-					targetId: f.friendId,
-					showName: f.friendNickName,
-					headImage: f.friendHeadImage
+					targetId: f.id,
+					showName: f.nickName,
+					headImage: f.headImage
 				};
 				// 打开会话
 				this.$store.commit("openChat",chatInfo);