diff --git a/im-ui/src/App.vue b/im-ui/src/App.vue
index 340ff3d..b60f612 100644
--- a/im-ui/src/App.vue
+++ b/im-ui/src/App.vue
@@ -18,7 +18,6 @@
 	font-family: 'Avenir', Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	color: #2c3e50;
 	position: absolute;
 	height: 100%;
 	width: 100%;
diff --git a/im-ui/src/components/chat/ChatBox.vue b/im-ui/src/components/chat/ChatBox.vue
index bbfb698..6e4a766 100644
--- a/im-ui/src/components/chat/ChatBox.vue
+++ b/im-ui/src/components/chat/ChatBox.vue
@@ -781,12 +781,11 @@ export default {
 	
 	.el-header {
 		padding: 3px;
-		background-color: #5870e6;
+		background-color: white;
 		line-height: 50px;
 		font-size: 20px;
 		font-weight: 600;
-		color: #f8f8f8;
-	
+		border-bottom: 1px #ddd solid;
 		.btn-side {
 			position: absolute;
 			right: 20px;
@@ -799,11 +798,11 @@ export default {
 
 	.im-chat-main {
 		padding: 0;
-	
+		background-color: #f8f8f8;
 		.im-chat-box {
 			>ul {
 				padding: 0 20px;
-
+					
 				li {
 					list-style-type: none;
 				}
diff --git a/im-ui/src/components/common/HeadImage.vue b/im-ui/src/components/common/HeadImage.vue
index ce438de..eccba60 100644
--- a/im-ui/src/components/common/HeadImage.vue
+++ b/im-ui/src/components/common/HeadImage.vue
@@ -84,7 +84,7 @@
 		
 		.avatar-text{
 			background-color: #f2f2f2; /* 默认背景色 */
-			border-radius: 10%; /* 圆角效果 */
+			border-radius: 15%; /* 圆角效果 */
 			display: flex;
 			align-items: center;
 			justify-content: center;
diff --git a/im-ui/src/ssl/cert.crt b/im-ui/src/ssl/cert.crt
new file mode 100644
index 0000000..12f90bf
--- /dev/null
+++ b/im-ui/src/ssl/cert.crt
@@ -0,0 +1,19 @@
+-----BEGIN CERTIFICATE-----
+MIIDIjCCAgoCCQCw2aUcFWVX4jANBgkqhkiG9w0BAQsFADBTMQswCQYDVQQGEwJj
+bjEMMAoGA1UECAwDZ3oIMQswCQYDVQQHDAJnejEcMBoGA1UECgwTRGVmYXVsdCBD
+b21wYW55IEx0ZDELMAkGA1UEAwwCYngwHhcNMjQwNDI4MTQzNTIzWhcNMzQwNDI2
+MTQzNTIzWjBTMQswCQYDVQQGEwJjbjEMMAoGA1UECAwDZ3oIMQswCQYDVQQHDAJn
+ejEcMBoGA1UECgwTRGVmYXVsdCBDb21wYW55IEx0ZDELMAkGA1UEAwwCYngwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDqZXvAXwH0xA5TSposclmZXxox
+pfT5F0eSOaxRE2NFfUbHoCrCHYV8pPAIy9S6vbG5Bbh4eprv4smH4lHWfa+81nI8
+sKizmJ3jdFSzCRrIHzbdlQsY0Vg+VasyoWjyjVDJeDzz/G/vQUeb19+kXlHVDETt
+J7sZEqNyDxewsiDBUf2f+fvsgtIWakuD7CGe/P9e6gHz0D++GezOUKgUtL3eUkCa
+pI8+ecoAG1ud/3MtRvGyq9FwwsQwsscu1YVmt7fRhuGbcM3/bog1VXe/to/msKUC
+gCZjWS82D9sw0ikEAn7jagKJu1ezybmN9/JljhpC8UgZnqPT01LzfFvDECN7AgMB
+AAEwDQYJKoZIhvcNAQELBQADggEBAMnjP0ANnPSTbwSCufVXwJgX5tWcSGjezFAY
+Du+rbdUipn2O4/NCkTTPpDbrDKRET2zDUrxJOXu/UZBS8lreowtUQCk8lX7kH5oj
+72lmcOFgWUyk8ULTPzrl0sdaQ8mhsvf+vHO9Ww/+RqQlzlr+eMuamMm1wDrbczWK
+z1tq2QQuIhxf1pIznHag5eWui6Z0RIRQaozbXWU6VuSf703CNixxdZsdNWHpdiJW
+vj8LewFaSmGp6HzwMX6/Kx/kocqpeeCZ6CharePv2C5bC5Kd5KVFCHnp5xbcZKUq
+8Q7CSH5WKV3QkoFKGPz1qh17qeryxgoqLQXLapptNKOS76QBivM=
+-----END CERTIFICATE-----
diff --git a/im-ui/src/ssl/cert.key b/im-ui/src/ssl/cert.key
new file mode 100644
index 0000000..ec189b5
--- /dev/null
+++ b/im-ui/src/ssl/cert.key
@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEA6mV7wF8B9MQOU0qaLHJZmV8aMaX0+RdHkjmsURNjRX1Gx6Aq
+wh2FfKTwCMvUur2xuQW4eHqa7+LJh+JR1n2vvNZyPLCos5id43RUswkayB823ZUL
+GNFYPlWrMqFo8o1QyXg88/xv70FHm9ffpF5R1QxE7Se7GRKjcg8XsLIgwVH9n/n7
+7ILSFmpLg+whnvz/XuoB89A/vhnszlCoFLS93lJAmqSPPnnKABtbnf9zLUbxsqvR
+cMLEMLLHLtWFZre30Ybhm3DN/26INVV3v7aP5rClAoAmY1kvNg/bMNIpBAJ+42oC
+ibtXs8m5jffyZY4aQvFIGZ6j09NS83xbwxAjewIDAQABAoIBAQC8uyPunFE15Rrn
+w9zpxtUQIjw0F71tR2pQefGegm7fR+TS3csv65dM6n1/h6ftCMpuAQYstAPG/aNp
+rzhX7XGwKjdnWJMtsMgImeWNFtqiokeKGPULcZyM7GvhY4feLR0Ma60gg3UZf0WK
+XUJs1aksUym4jtIeeRxzvWVE19h57uEG1fJM3Rf0OFhb1iUYVjtW4iW+RTtc1mpb
+hoda+8P3Tua33WuhSYtFusDx35ZM2WDgYlgeMxm94JUFUUOIhiggasYNsu1YmQl4
+AqhRncGn6p/gZVQsjkeCtmTIyD+igqulI/OkqI3DmFCzFSoSXLFE7HZ4pL500Vxn
+aOvOYRCZAoGBAP1Aopr0scpLzt7Lei+dbLc3wxziCyeNtVDvswFS93Lx1bnSJw4m
+0PAvQGoOdeiPI1vmsdDJdV5R0Vmbybyz7JPiTyUyti4p909s5AtpPqdLptjuO2ge
+2b1YD/HnubL0omlejKu5fKg3zaPqhr/Z8f6WfYSsm1dV10arSBj4JdvVAoGBAOzw
+epHXXnAfaC/cEOUOOVe5o/MNxIYYfJkG6VtmB3v+oY0/C+SyUbkY3Qu5yjCDBYhP
+rLVr1+TiLE3Sqj+ndRvICy8T6Iv+hA2ijvJiNVAjtqkwM5YOMJdFYI6fem1N+Hkv
+ipOQUWFmwUBAKQm4BSGtNdbL89KTTV1tMubH4joPAoGBANRGmkWSd3gepO8A1ZEV
+vmuw1N3f5wOnd2S5Fm00su9pIAGa0lu9U4MPyEldh52AZV4B9+gPBU8i+3zF5YpD
+sjifCEIgyK3XRVIQ7vFVrUujUN4iii8TNOXN68eTuYb0ITJ7KyRB3OhPphIQYhRr
+xbjlQZ6045yH+mNk7JDpZyplAoGAVF4sxtGRZwtH5gLOYUF3Wa1Ym6tDVxxRAYxc
+e5cRAy3gCJNygLSeNPKNgydcv3ln9umn7dHAxldivzNMO+483O+WS+Ui4PZ3vwMr
+M1OU+Dw/Rm9LbxsOYk7p2t8ekN06pKwxA+pXj/8uwNoXwsYrzZoHmbx1zX12BtZj
+UZnLDDECgYBpvFK+cntSzE+qpsvxYnosSswcJvmGoOzBCE2aWebwXp0QOwjg/Zh/
+VR5Mc8L8xHpcpUJZXaTmyeouwc2XPfBvvbWlGZFh7zBn2dKCNxT62fPXKFX2rBgE
+k4f033ToXD6Lv0JT94JfjS0GB+zzHjfcS/K8Lr3d3lUmkiI1LFD5GA==
+-----END RSA PRIVATE KEY-----
diff --git a/im-ui/src/view/Chat.vue b/im-ui/src/view/Chat.vue
index 6d6d2a6..f7b729b 100644
--- a/im-ui/src/view/Chat.vue
+++ b/im-ui/src/view/Chat.vue
@@ -76,6 +76,7 @@
 			.chat-list-header {
 				padding: 3px 8px;
 				line-height: 50px;
+				border-bottom: 1px #ddd solid;
 				
 				.el-input__inner {
 					border-radius: 10px !important;
diff --git a/im-ui/src/view/Friend.vue b/im-ui/src/view/Friend.vue
index aecbcff..2344478 100644
--- a/im-ui/src/view/Friend.vue
+++ b/im-ui/src/view/Friend.vue
@@ -190,7 +190,8 @@
 				display: flex;
 				align-items: center;
 				padding: 3px 8px;
-
+				border-bottom: 1px #ddd solid;
+				
 				.el-input__inner {
 					border-radius: 10px !important;
 					background-color: #F8F8F8;
@@ -226,19 +227,21 @@
 				font-size: 20px;
 				font-weight: 600;
 				text-align: center;
-				color: #f8f8f8;
-				background-color: #5870e6;
+				background-color: white;
+				border-bottom: 1px #ddd solid;
 			}
 
 			.friend-detail {
 				display: flex;
 				padding: 50px 80px 20px 80px;
 				text-align: center;
-
+				
+				
 				.info-item {
 					margin-left: 20px;
 					background-color: #ffffff;
 					border-radius: 10px ;
+					border: 1px #ddd solid;
 				}
 
 				.description {
diff --git a/im-ui/src/view/Group.vue b/im-ui/src/view/Group.vue
index 0afeeb0..0c94908 100644
--- a/im-ui/src/view/Group.vue
+++ b/im-ui/src/view/Group.vue
@@ -282,6 +282,8 @@
 				display: flex;
 				align-items: center;
 				padding: 3px 8px;
+				background-color: white;
+				border-bottom: 1px #ddd solid;
 				
 				.el-input__inner {
 					border-radius: 10px !important;
@@ -316,18 +318,17 @@
 				font-size: 20px;
 				font-weight: 600;
 				text-align: center;
-				color: #f8f8f8;
-				background-color: #5870e6;
+				background-color: white;
+				border-bottom: 1px #ddd solid;
 			}
 
 			.group-container {
-				margin: 20px;
-
+				padding: 20px;
+				flex: 1;
 				.group-info {
 					display: flex;
 					padding: 5px 20px;
 					
-					
 					.group-form {
 						flex: 1;
 						padding-left: 40px;
diff --git a/im-ui/src/view/Home.vue b/im-ui/src/view/Home.vue
index d6672fd..1ea3f07 100644
--- a/im-ui/src/view/Home.vue
+++ b/im-ui/src/view/Home.vue
@@ -339,7 +339,7 @@
 					text-decoration: none;
 					
 					&.router-link-active .icon {
-						color: #d5894c;
+						color: #ba785a;
 					}
 				}
 				
diff --git a/im-ui/vue.config.js b/im-ui/vue.config.js
index a991c1f..7ed74db 100644
--- a/im-ui/vue.config.js
+++ b/im-ui/vue.config.js
@@ -1,16 +1,23 @@
+const path = require('path')
+const fs = require('fs')
+
 module.exports = {
+	devServer: {
+		proxy: {
+			'/api': {
+				target: 'http://127.0.0.1:8888',
+				changeOrigin: true,
+				ws: false,
+				pathRewrite: {
+					'^/api': ''
+				}
+			}
+		},
+		// 音视频功能需要ssl证书，如需调试请打开注释
+		// https: {
+		// 	cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
+		// 	key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
+		// }
+	}
 
-  devServer: {
-    proxy: {
-      '/api': {
-        target: 'http://127.0.0.1:8888',
-        changeOrigin: true,
-        ws: false,
-        pathRewrite: {
-          '^/api': ''
-        }
-      }
-    }
-  }
- 
-}
+}
\ No newline at end of file