diff --git a/package.json b/package.json
index c3236beb..767b04ff 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   "file-loader": "^6.2.0",
   "fs-extra": "^10.0.0",
   "html-webpack-plugin": "^5.5.0",
+  "linkify-it": "^3.0.3",
   "mini-css-extract-plugin": "^2.5.3",
   "react": "^17.0.2",
   "react-dev-utils": "^12.0.0",
@@ -40,6 +41,7 @@
   "react-google-login": "^5.2.2",
   "react-hot-toast": "^2.2.0",
   "react-icons": "^4.3.1",
+  "react-linkify": "^1.0.0-alpha",
   "react-redux": "^7.2.6",
   "react-refresh": "^0.11.0",
   "react-router-dom": "6",
@@ -53,6 +55,7 @@
   "styled-components": "^5.3.3",
   "styled-reset": "^4.3.4",
   "terser-webpack-plugin": "^5.3.1",
+  "tippy.js": "^6.3.7",
   "webpack": "^5.68.0",
   "webpack-dev-server": "^4.7.4",
   "webpack-manifest-plugin": "^4.1.1",
diff --git a/public/index.html b/public/index.html
index 8ae85a46..7b54cc56 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/api/resource/organization/logo" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="add up everything you input" />
@@ -30,7 +30,8 @@
   </style>
 </head>
 <style>
-  #root-modal {
+  #root-modal,
+  #modal-modal {
     pointer-events: none;
     position: fixed;
     z-index: 999;
@@ -40,7 +41,8 @@
     height: 100%;
   }
 
-  #root-modal>.wrapper {
+  #root-modal>.wrapper,
+  #modal-modal>.wrapper {
     pointer-events: all;
     width: 100vw;
     height: 100vh;
@@ -75,11 +77,18 @@
     cursor: pointer;
   }
 </style>
+<style>
+  /* animate.css */
+  :root {
+    --animate-delay: 0.1s;
+  }
+</style>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <div id="root-modal"></div>
+  <div id="modal-modal"></div>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/app/config.js b/src/app/config.js
index 08b42b72..79e03d25 100644
--- a/src/app/config.js
+++ b/src/app/config.js
@@ -1,13 +1,14 @@
 // const BASE_URL = `${location.origin}/api`;
-const BASE_URL = `https://rustchat.com:3000/api`;
+const BASE_URL = `https://privoce.rustchat.com/api`;
+// const BASE_URL = `https://rustchat.net/api`;
 export const ContentTypes = {
- text: 'text/plain',
- image: 'image/png',
- json: 'application/json'
+  text: "text/plain",
+  image: "image/png",
+  json: "application/json",
 };
 export const googleClientID =
- '418687074928-naojba82n9ktf0rkvnqoor4nhr54ql1b.apps.googleusercontent.com';
+  "418687074928-naojba82n9ktf0rkvnqoor4nhr54ql1b.apps.googleusercontent.com";
 // "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com";
-export const tokenHeader = 'X-API-Key';
+export const tokenHeader = "X-API-Key";
 
 export default BASE_URL;
diff --git a/src/app/services/auth.js b/src/app/services/auth.js
index 66613711..96157a71 100644
--- a/src/app/services/auth.js
+++ b/src/app/services/auth.js
@@ -1,56 +1,70 @@
-import { createApi } from '@reduxjs/toolkit/query/react';
-import baseQuery from './base.query';
-import BASE_URL from '../config';
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQuery from "./base.query";
+import BASE_URL from "../config";
 export const authApi = createApi({
- reducerPath: 'auth',
- baseQuery,
- endpoints: (builder) => ({
-  login: builder.mutation({
-   query: (credentials) => ({
-    url: 'token/login',
-    method: 'POST',
-    body: { credential: credentials, device: 'web', device_token: 'test' }
-   }),
-   transformResponse: (data) => {
-    const { avatar_updated_at } = data.user;
-    data.user.avatar =
-     avatar_updated_at == 0 ? '' : `${BASE_URL}/resource/avatar?uid=${data.user.uid}`;
-    return data;
-   }
+  reducerPath: "auth",
+  baseQuery,
+  endpoints: (builder) => ({
+    login: builder.mutation({
+      query: (credentials) => ({
+        url: "token/login",
+        method: "POST",
+        body: { credential: credentials, device: "web", device_token: "test" },
+      }),
+      transformResponse: (data) => {
+        const { avatar_updated_at } = data.user;
+        data.user.avatar =
+          avatar_updated_at == 0
+            ? ""
+            : `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`;
+        return data;
+      },
+    }),
+    // 更新token
+    renew: builder.mutation({
+      query: ({ token, refreshToken }) => ({
+        url: "/token/renew",
+        method: "POST",
+        body: {
+          token,
+          refresh_token: refreshToken,
+        },
+      }),
+    }),
+    //   获取openid
+    getOpenid: builder.mutation({
+      query: ({ issuer_url }) => ({
+        url: "/token/openid/authorize",
+        method: "POST",
+        body: {
+          issuer_url,
+        },
+      }),
+    }),
+
+    checkInviteTokenValid: builder.mutation({
+      query: (token) => ({
+        url: "user/check_invite_magic_token",
+        method: "POST",
+        body: { magic_token: token },
+      }),
+    }),
+    getMetamaskNonce: builder.query({
+      query: (address) => ({
+        url: `/token/metamask/nonce?public_address=${address}`,
+      }),
+    }),
+    logout: builder.query({
+      query: () => ({ url: `token/logout` }),
+    }),
   }),
-  // 更新token
-  renew: builder.mutation({
-   query: ({ token, refreshToken }) => ({
-    url: '/token/renew',
-    method: 'POST',
-    body: {
-     token,
-     refresh_token: refreshToken
-    }
-   })
-  }),
-  checkInviteTokenValid: builder.mutation({
-   query: (token) => ({
-    url: 'user/check_invite_magic_token',
-    method: 'POST',
-    body: { magic_token: token }
-   })
-  }),
-  getMetamaskNonce: builder.query({
-   query: (address) => ({
-    url: `/token/metamask/nonce?public_address=${address}`
-   })
-  }),
-  logout: builder.query({
-   query: () => ({ url: `token/logout` })
-  })
- })
 });
 
 export const {
- useRenewMutation,
- useLazyGetMetamaskNonceQuery,
- useLoginMutation,
- useLazyLogoutQuery,
- useCheckInviteTokenValidMutation
+  useGetOpenidMutation,
+  useRenewMutation,
+  useLazyGetMetamaskNonceQuery,
+  useLoginMutation,
+  useLazyLogoutQuery,
+  useCheckInviteTokenValidMutation,
 } = authApi;
diff --git a/src/app/services/channel.js b/src/app/services/channel.js
index 651695e1..33c89891 100644
--- a/src/app/services/channel.js
+++ b/src/app/services/channel.js
@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
 import baseQuery from "./base.query";
 import { ContentTypes } from "../config";
 import { addChannelMsg } from "../slices/message.channel";
+import { updateChannel } from "../slices/channels";
 import {
   addPendingMessage,
   removePendingMessage,
@@ -21,6 +22,9 @@ export const channelApi = createApi({
     getChannels: builder.query({
       query: () => ({ url: `group` }),
     }),
+    getChannel: builder.query({
+      query: (id) => ({ url: `group/${id}` }),
+    }),
     createChannel: builder.mutation({
       query: (data) => ({
         url: "group",
@@ -28,6 +32,26 @@ export const channelApi = createApi({
         body: data,
       }),
     }),
+    updateChannel: builder.mutation({
+      query: ({ id, ...data }) => ({
+        url: `group/${id}`,
+        method: "PUT",
+        body: data,
+      }),
+      async onQueryStarted(
+        { id, name, description },
+        { dispatch, queryFulfilled }
+      ) {
+        // id: who send to ,from_uid: who sent
+        const patchResult = dispatch(updateChannel({ id, name, description }));
+        try {
+          await queryFulfilled;
+        } catch {
+          console.log("channel update failed");
+          patchResult.undo();
+        }
+      },
+    }),
     removeChannel: builder.query({
       query: (id) => ({
         url: `group/${id}`,
@@ -78,6 +102,8 @@ export const channelApi = createApi({
 });
 
 export const {
+  useGetChannelQuery,
+  useUpdateChannelMutation,
   useLazyRemoveChannelQuery,
   useGetChannelsQuery,
   useCreateChannelMutation,
diff --git a/src/app/services/contact.js b/src/app/services/contact.js
index 5f1ab736..92c39666 100644
--- a/src/app/services/contact.js
+++ b/src/app/services/contact.js
@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 import baseQuery from "./base.query";
 import BASE_URL, { ContentTypes } from "../config";
 import { addUserMsg } from "../slices/message.user";
+import { removeContact } from "../slices/contacts";
 import {
   addPendingMessage,
   removePendingMessage,
@@ -26,12 +27,42 @@ export const contactApi = createApi({
           const avatar =
             user.avatar_updated_at == 0
               ? ""
-              : `${BASE_URL}/resource/avatar?uid=${user.uid}`;
+              : `${BASE_URL}/resource/avatar?uid=${user.uid}&t=${user.avatar_updated_at}`;
           user.avatar = avatar;
           return user;
         });
       },
     }),
+    deleteContact: builder.query({
+      query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" }),
+      async onQueryStarted(uid, { dispatch, queryFulfilled }) {
+        // id: who send to ,from_uid: who sent
+        const patchResult = dispatch(removeContact(uid));
+        try {
+          await queryFulfilled;
+        } catch {
+          console.log("channel update failed");
+          patchResult.undo();
+        }
+      },
+    }),
+    updateAvatar: builder.mutation({
+      query: (data) => ({
+        headers: {
+          "content-type": "image/png",
+        },
+        url: `user/avatar`,
+        method: "POST",
+        body: data,
+      }),
+    }),
+    updateInfo: builder.mutation({
+      query: (data) => ({
+        url: `user`,
+        method: "PUT",
+        body: data,
+      }),
+    }),
     register: builder.mutation({
       query: (data) => ({
         url: `user/register`,
@@ -80,6 +111,9 @@ export const contactApi = createApi({
 });
 
 export const {
+  useLazyDeleteContactQuery,
+  useUpdateInfoMutation,
+  useUpdateAvatarMutation,
   useGetContactsQuery,
   useSendMsgMutation,
   useRegisterMutation,
diff --git a/src/app/services/server.js b/src/app/services/server.js
index eb759a2f..a833b80b 100644
--- a/src/app/services/server.js
+++ b/src/app/services/server.js
@@ -20,7 +20,28 @@ export const serverApi = createApi({
         return data;
       },
     }),
+    updateLogo: builder.mutation({
+      query: (data) => ({
+        headers: {
+          "content-type": "image/png",
+        },
+        url: `admin/system/organization/logo`,
+        method: "POST",
+        body: data,
+      }),
+    }),
+    updateServer: builder.mutation({
+      query: (data) => ({
+        url: `admin/system/organization`,
+        method: "PUT",
+        body: data,
+      }),
+    }),
   }),
 });
 
-export const { useGetServerQuery } = serverApi;
+export const {
+  useGetServerQuery,
+  useUpdateServerMutation,
+  useUpdateLogoMutation,
+} = serverApi;
diff --git a/src/app/slices/auth.data.js b/src/app/slices/auth.data.js
index f780e30c..92a2855d 100644
--- a/src/app/slices/auth.data.js
+++ b/src/app/slices/auth.data.js
@@ -1,48 +1,72 @@
-import { createSlice } from '@reduxjs/toolkit';
-
+import { createSlice } from "@reduxjs/toolkit";
+import BASE_URL from "../config";
+import { getNonNullValues } from "../../common/utils";
 const initialState = {
- user: null,
- usersVersion: null,
- afterMid: null,
- token: null,
- refreshToken: null
+  user: null,
+  usersVersion: null,
+  afterMid: null,
+  token: null,
+  refreshToken: null,
 };
 const authDataSlice = createSlice({
- name: 'authData',
- initialState,
- reducers: {
-  setAuthData(state, action) {
-   const { user, token, refresh_token } = action.payload;
-   state.user = user;
-   state.token = token;
-   state.refreshToken = refresh_token;
+  name: "authData",
+  initialState,
+  reducers: {
+    setAuthData(state, action) {
+      const { user, token, refresh_token } = action.payload;
+      state.user = user;
+      state.token = token;
+      state.refreshToken = refresh_token;
+    },
+    updateLoginedUserByLogs(state, action) {
+      const logs = action.payload;
+      logs.forEach(({ action, uid, ...rest }) => {
+        switch (action) {
+          case "update":
+            {
+              const vals = getNonNullValues(rest);
+              console.log("update vals", vals);
+              if (Object.keys(vals).includes("avatar_updated_at")) {
+                vals.avatar = `${BASE_URL}/resource/avatar?uid=${uid}&t=${vals.avatar_updated_at}`;
+              }
+              state.user = { ...state.user, ...vals };
+            }
+
+            break;
+
+          default:
+            break;
+        }
+      });
+    },
+    clearAuthData(state) {
+      console.log("clear auth data");
+      state.user = null;
+      state.token = null;
+      state.refreshToken = null;
+    },
+    updateToken(state, action) {
+      const { token, refresh_token } = action.payload;
+      console.log("refresh token");
+      state.token = token;
+      state.refreshToken = refresh_token;
+    },
+    setUsersVersion(state, action) {
+      const { version } = action.payload;
+      state.usersVersion = version;
+    },
+    setAfterMid(state, action) {
+      const { mid } = action.payload;
+      state.afterMid = mid;
+    },
   },
-  clearAuthData(state) {
-   console.log('clear auth data');
-   state.user = null;
-   state.token = null;
-   state.refreshToken = null;
-   // 清掉本地缓存auth data
-   // localStorage.removeItem("AUTH_DATA");
-   // state.afterMid = null;
-   // state.usersVersion = null;
-  },
-  updateToken(state, action) {
-   const { token, refresh_token } = action.payload;
-   console.log('refresh token');
-   state.token = token;
-   state.refreshToken = refresh_token;
-  },
-  setUsersVersion(state, action) {
-   const { version } = action.payload;
-   state.usersVersion = version;
-  },
-  setAfterMid(state, action) {
-   const { mid } = action.payload;
-   state.afterMid = mid;
-  }
- }
 });
-export const { updateToken, setAuthData, clearAuthData, setUsersVersion, setAfterMid } =
- authDataSlice.actions;
+export const {
+  updateToken,
+  setAuthData,
+  clearAuthData,
+  setUsersVersion,
+  setAfterMid,
+  updateLoginedUserByLogs,
+} = authDataSlice.actions;
 export default authDataSlice.reducer;
diff --git a/src/app/slices/channels.js b/src/app/slices/channels.js
index 80a49c10..a5f41f4e 100644
--- a/src/app/slices/channels.js
+++ b/src/app/slices/channels.js
@@ -14,6 +14,14 @@ const channelsSlice = createSlice({
         })
       );
     },
+
+    updateChannel(state, action) {
+      // console.log("set channels store", action);
+      const { id, name, description } = action.payload;
+      const oObj = state[id];
+      const newObj = { ...oObj, name, description };
+      state[id] = newObj;
+    },
     addChannel(state, action) {
       // console.log("set channels store", action);
       const ch = action.payload;
@@ -32,5 +40,10 @@ const channelsSlice = createSlice({
     // },
   },
 });
-export const { setChannels, addChannel, deleteChannel } = channelsSlice.actions;
+export const {
+  setChannels,
+  addChannel,
+  deleteChannel,
+  updateChannel,
+} = channelsSlice.actions;
 export default channelsSlice.reducer;
diff --git a/src/app/slices/contacts.js b/src/app/slices/contacts.js
index ba41040b..70819bbd 100644
--- a/src/app/slices/contacts.js
+++ b/src/app/slices/contacts.js
@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
+import { getNonNullValues } from "../../common/utils";
 const initialState = [];
 const contactsSlice = createSlice({
   name: `contacts`,
@@ -9,6 +10,47 @@ const contactsSlice = createSlice({
       const contacts = action.payload || [];
       return contacts;
     },
+    removeContact(state, action) {
+      const uid = action.payload;
+      return state.filter((c) => c.uid != uid);
+    },
+    updateUsersByLogs(state, action) {
+      const changeLogs = action.payload;
+      changeLogs.forEach(({ action, uid, ...rest }) => {
+        switch (action) {
+          case "update":
+            {
+              const vals = getNonNullValues(rest);
+              console.log("update vals", vals);
+              const curr = state.find(({ uid: id }) => id == uid);
+              if (curr) {
+                Object.keys(vals).forEach((k) => {
+                  curr[k] = vals[k];
+                });
+              }
+            }
+            break;
+          case "create":
+            {
+              state.push({ uid, ...rest });
+            }
+            break;
+          case "delete":
+            {
+              const idx = state.findIndex((o) => {
+                return o.uid == uid;
+              });
+              if (idx > -1) {
+                state.splice(idx, 1);
+              }
+            }
+            break;
+
+          default:
+            break;
+        }
+      });
+    },
     updateUsersStatus(state, action) {
       const onlines = action.payload;
       onlines.forEach((item) => {
@@ -22,5 +64,10 @@ const contactsSlice = createSlice({
     },
   },
 });
-export const { setContacts, updateUsersStatus } = contactsSlice.actions;
+export const {
+  setContacts,
+  removeContact,
+  updateUsersByLogs,
+  updateUsersStatus,
+} = contactsSlice.actions;
 export default contactsSlice.reducer;
diff --git a/src/app/slices/ui.js b/src/app/slices/ui.js
index defebb3e..0d34d40b 100644
--- a/src/app/slices/ui.js
+++ b/src/app/slices/ui.js
@@ -3,7 +3,6 @@ import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   menuExpand: true,
   setting: false,
-  profileSetting: false,
   channelSetting: null,
 };
 const uiSlice = createSlice({
@@ -16,9 +15,6 @@ const uiSlice = createSlice({
     toggleSetting(state) {
       state.setting = !state.setting;
     },
-    toggleProfileSetting(state) {
-      state.profileSetting = !state.profileSetting;
-    },
     toggleChannelSetting(state, action) {
       console.log("toggle channel setting payload", action);
       const id = action.payload;
@@ -29,7 +25,6 @@ const uiSlice = createSlice({
 export const {
   toggleSetting,
   toggleMenuExpand,
-  toggleProfileSetting,
   toggleChannelSetting,
 } = uiSlice.actions;
 export default uiSlice.reducer;
diff --git a/src/common/component/Avatar.js b/src/common/component/Avatar.js
index 1ebb198a..6a1bcd50 100644
--- a/src/common/component/Avatar.js
+++ b/src/common/component/Avatar.js
@@ -1,54 +1,16 @@
 import { useState, useEffect } from "react";
-const initialAvatar = ({
-  initials = "UK",
-  initial_size = 0,
-  size = 200,
-  foreground = "#fff",
-  background = "#4c99e9",
-  weight = 400,
-  fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'",
-}) => {
-  const canvas = document.createElement("canvas");
-  const width = size;
-  const height = size;
-  const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
-  canvas.width = width * devicePixelRatio;
-  canvas.height = height * devicePixelRatio;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-
-  const context = canvas.getContext("2d");
-  context.scale(devicePixelRatio, devicePixelRatio);
-  context.rect(0, 0, canvas.width, canvas.height);
-  context.fillStyle = background;
-  context.fill();
-  context.font = `${weight} ${initial_size || height / 2}px ${fontFamily}`;
-  context.textAlign = "center";
-  context.textBaseline = "middle";
-  context.fillStyle = foreground;
-  context.fillText(initials, width / 2, height / 2);
-
-  /* istanbul ignore next */
-  return canvas.toDataURL("image/png");
-};
-const getInitials = (name) => {
-  const arr = name.split(" ").filter((n) => !!n);
-  return arr
-    .map((t) => t[0])
-    .join("")
-    .toUpperCase();
-};
+import { getInitials, getInitialsAvatar } from "../utils";
 export default function Avatar({ url, name = "unkonw name", ...rest }) {
   const [src, setSrc] = useState(url);
   const handleError = () => {
-    const tmp = initialAvatar({
+    const tmp = getInitialsAvatar({
       initials: getInitials(name),
     });
     setSrc(tmp);
   };
   useEffect(() => {
     if (!url) {
-      const tmp = initialAvatar({
+      const tmp = getInitialsAvatar({
         initials: getInitials(name),
       });
       setSrc(tmp);
diff --git a/src/common/component/AvatarUploader.js b/src/common/component/AvatarUploader.js
new file mode 100644
index 00000000..89ac405c
--- /dev/null
+++ b/src/common/component/AvatarUploader.js
@@ -0,0 +1,100 @@
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+import { getInitials, getInitialsAvatar } from "../utils";
+const StyledWrapper = styled.div`
+  width: 96px;
+  height: 96px;
+  position: relative;
+  cursor: pointer;
+  .avatar {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #eee;
+    /* border: 1px solid #eee; */
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    input[type="file"] {
+      cursor: pointer;
+      display: block;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    .tip {
+      white-space: nowrap;
+      padding: 4px;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      font-weight: bold;
+      font-size: 12px;
+      line-height: 18px;
+    }
+    &:hover .tip {
+      display: flex;
+    }
+  }
+  .icon {
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+`;
+export default function AvatarUploader({ url = "", name = "", uploadImage }) {
+  const [uploading, setUploading] = useState(false);
+  const [currSrc, setCurrSrc] = useState("");
+  useEffect(() => {
+    if (!url) {
+      const initialsSrc = getInitialsAvatar({ initials: getInitials(name) });
+      setCurrSrc(initialsSrc);
+    } else {
+      setCurrSrc(url);
+    }
+  }, [url, name]);
+  const handleUpload = async (evt) => {
+    if (uploading) return;
+    const [file] = evt.target.files;
+    setUploading(true);
+    await uploadImage(file);
+    setUploading(false);
+  };
+  if (!currSrc) return null;
+  return (
+    <StyledWrapper>
+      <div className="avatar">
+        <img src={currSrc} alt="avatar" />
+        <div className="tip">{uploading ? `Uploading` : `Change Avatar`}</div>
+        <input
+          multiple={false}
+          onChange={handleUpload}
+          type="file"
+          accept="image/*"
+          name="avatar"
+          id="avatar"
+        />
+      </div>
+      <img
+        src="https://static.nicegoodthings.com/project/rustchat/icon.avatar.uploader.svg"
+        alt="icon"
+        className="icon"
+      />
+    </StyledWrapper>
+  );
+}
diff --git a/src/common/component/ChannelSetting/Overview.js b/src/common/component/ChannelSetting/Overview.js
new file mode 100644
index 00000000..aa0e1a8d
--- /dev/null
+++ b/src/common/component/ChannelSetting/Overview.js
@@ -0,0 +1,127 @@
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+import toast from "react-hot-toast";
+// import { useSelector } from "react-redux";
+import {
+  useGetChannelQuery,
+  useUpdateChannelMutation,
+} from "../../../app/services/channel";
+import Input from "../StyledInput";
+import Textarea from "../StyledTextarea";
+import SaveTip from "../SaveTip";
+const StyledWrapper = styled.div`
+  position: relative;
+  width: 512px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  .inputs {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    .input {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      label {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #6b7280;
+      }
+      .name {
+        padding-left: 36px;
+        background: url(https://static.nicegoodthings.com/project/rustchat/icon.hash.svg);
+        background-size: 20px;
+        background-position-x: 8px;
+        background-position-y: 8px;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+`;
+export default function Overview({ id = 0 }) {
+  const { data, refetch } = useGetChannelQuery(id);
+  const [changed, setChanged] = useState(false);
+  const [values, setValues] = useState(null);
+  const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation();
+  const handleUpdate = () => {
+    const { name, description } = values;
+    updateChannel({ id, name, description });
+  };
+  const handleChange = (evt) => {
+    const newValue = evt.target.value;
+    const { type } = evt.target.dataset;
+    setValues((prev) => {
+      return { ...prev, [type]: newValue };
+    });
+  };
+  const handleReset = () => {
+    console.log("reset", data);
+    setValues(data);
+  };
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+  useEffect(() => {
+    if (data && values) {
+      const { name, description } = values;
+      const { name: oName, description: oDescription } = data;
+      if (oName !== name || oDescription !== description) {
+        setChanged(true);
+      } else {
+        setChanged(false);
+      }
+    }
+  }, [data, values]);
+
+  useEffect(() => {
+    if (updated) {
+      toast.success("Channel updated!");
+      refetch();
+    }
+  }, [updated]);
+
+  if (!values || !id) return null;
+  const { name, description } = values;
+  return (
+    <StyledWrapper>
+      <div className="inputs">
+        <div className="input">
+          <label htmlFor="name">Channel Name</label>
+          <Input
+            className="name"
+            data-type="name"
+            onChange={handleChange}
+            value={name}
+            name="name"
+            id="name"
+            placeholder="Channel Name"
+          />
+        </div>
+        <div className="input">
+          <label htmlFor="desc">Channel Topic</label>
+          <Textarea
+            data-type="description"
+            onChange={handleChange}
+            value={description}
+            rows={4}
+            name="name"
+            id="name"
+            placeholder="Let everyone know how to use this channel."
+          />
+        </div>
+      </div>
+      {changed && (
+        <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />
+      )}
+      {/* <button onClick={handleUpdate} className="btn">update</button> */}
+    </StyledWrapper>
+  );
+}
diff --git a/src/common/component/ChannelSetting/index.js b/src/common/component/ChannelSetting/index.js
index 64452e27..54d96339 100644
--- a/src/common/component/ChannelSetting/index.js
+++ b/src/common/component/ChannelSetting/index.js
@@ -3,8 +3,15 @@ import { useDispatch } from "react-redux";
 import { toggleChannelSetting } from "../../../app/slices/ui";
 import StyledSettingContainer from "../StyledSettingContainer";
 import DeleteConfirmModal from "./DeleteConfirmModal";
-import navs from "./navs";
+import useNavs from "./navs";
 export default function ChannelSetting({ id = 0 }) {
+  const navs = useNavs(id);
+  const flatenNavs = navs
+    .map(({ items }) => {
+      return items;
+    })
+    .flat();
+  const [currNav, setCurrNav] = useState(flatenNavs[0]);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const dispatch = useDispatch();
   const close = () => {
@@ -13,10 +20,18 @@ export default function ChannelSetting({ id = 0 }) {
   const toggleDeleteConfrim = () => {
     setDeleteConfirm((prev) => !prev);
   };
+  const updateNav = (name) => {
+    const tmp = flatenNavs.find((n) => n.name == name);
+    if (tmp) {
+      setCurrNav(tmp);
+    }
+  };
   if (!id) return null;
   return (
     <>
       <StyledSettingContainer
+        updateNav={updateNav}
+        nav={currNav}
         closeModal={close}
         title="Channel Setting"
         navs={navs}
@@ -27,7 +42,7 @@ export default function ChannelSetting({ id = 0 }) {
           },
         ]}
       >
-        right block
+        {currNav.component}
       </StyledSettingContainer>
       {deleteConfirm && (
         <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={id} />
diff --git a/src/common/component/ChannelSetting/navs.js b/src/common/component/ChannelSetting/navs.js
index 6ecf46bf..b75e0233 100644
--- a/src/common/component/ChannelSetting/navs.js
+++ b/src/common/component/ChannelSetting/navs.js
@@ -1,25 +1,57 @@
-const navs = [
-  {
-    title: "General",
-    items: [
-      {
-        name: "overview",
-        title: "Overview",
-      },
-      {
-        name: "permissions",
-        title: "Permissions",
-      },
-      {
-        name: "invites",
-        title: "Invites",
-      },
-      {
-        name: "integrations",
-        title: "Integrations",
-      },
-    ],
-  },
-];
+import Overview from "./Overview";
+import ManageMembers from "../ManageMembers";
+import { useSelector } from "react-redux";
+const useNavs = (channelId) => {
+  const { channels, contacts } = useSelector((store) => {
+    return {
+      channels: store.channels,
+      contacts: store.contacts,
+    };
+  });
+  const ids = channels[channelId]?.members || [];
+  const navs = [
+    {
+      title: "General",
+      items: [
+        {
+          name: "overview",
+          title: "Overview",
+          component: <Overview id={channelId} />,
+        },
+        {
+          name: "permissions",
+          title: "Permissions",
+        },
+        {
+          name: "invites",
+          title: "Invites",
+        },
+        {
+          name: "integrations",
+          title: "Integrations",
+        },
+      ],
+    },
+    {
+      title: "User Management",
+      items: [
+        {
+          name: "members",
+          title: "Members",
+          component: (
+            <ManageMembers
+              members={
+                ids.length == 0
+                  ? contacts
+                  : contacts.filter((c) => ids.includes(c.uid))
+              }
+            />
+          ),
+        },
+      ],
+    },
+  ];
+  return navs;
+};
 
-export default navs;
+export default useNavs;
diff --git a/src/common/component/ContextMenu.js b/src/common/component/ContextMenu.js
index 94afe0f3..805a1a0a 100644
--- a/src/common/component/ContextMenu.js
+++ b/src/common/component/ContextMenu.js
@@ -1,32 +1,12 @@
 import { useRef } from "react";
 import styled from "styled-components";
 import { useOutsideClick } from "rooks";
-const StyledWrapper = styled.ul`
+import StyledMenu from "./StyledMenu";
+const StyledWrapper = styled(StyledMenu)`
   z-index: 999;
   position: fixed;
   left: ${({ x }) => `${x}px`};
   top: ${({ y }) => `${y}px`};
-  display: flex;
-  flex-direction: column;
-  padding: 4px 12px;
-  background-color: #fff;
-  box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
-    0px 10px 10px rgba(31, 41, 55, 0.04);
-  border-radius: 6px;
-  .item {
-    padding: 8px 0;
-    /* margin: 0 12px; */
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 20px;
-    color: #616161;
-    &.underline {
-      border-bottom: 1px solid #e5e5e5;
-    }
-    &.danger {
-      color: #a11043;
-    }
-  }
 `;
 export default function ContextMenu({
   posX = 0,
diff --git a/src/common/component/ManageMembers.js b/src/common/component/ManageMembers.js
new file mode 100644
index 00000000..304b1c93
--- /dev/null
+++ b/src/common/component/ManageMembers.js
@@ -0,0 +1,167 @@
+import { useState, useRef, useEffect } from "react";
+import styled from "styled-components";
+import { useOutsideClick } from "rooks";
+import { useLazyDeleteContactQuery } from "../../app/services/contact";
+import Contact from "./Contact";
+import StyledMenu from "./StyledMenu";
+import toast from "react-hot-toast";
+const StyledWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  width: 512px;
+  .intro {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 40px;
+    .title {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 24px;
+      color: #374151;
+    }
+    .desc {
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 18px;
+      color: #616161;
+    }
+  }
+  .members {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    .member {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0;
+      .left {
+        display: flex;
+        gap: 8px;
+        .info {
+          display: flex;
+          flex-direction: column;
+          .name {
+            font-weight: bold;
+            font-size: 14px;
+            line-height: 20px;
+            color: #52525b;
+          }
+          .email {
+            font-weight: normal;
+            font-size: 12px;
+            line-height: 18px;
+            color: #52525b;
+          }
+        }
+      }
+      .right {
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        .role {
+          font-weight: 500;
+          font-size: 12px;
+          line-height: 18px;
+          text-align: right;
+          color: #616161;
+        }
+        .opts {
+          position: relative;
+          width: 24px;
+          height: 24px;
+
+          .dots {
+            cursor: pointer;
+          }
+          .menu {
+            position: absolute;
+          }
+        }
+      }
+    }
+  }
+`;
+export default function ManageMembers({ members = [] }) {
+  const [remove, { isSuccess: removeSuccess }] = useLazyDeleteContactQuery();
+  const wrapperRef = useRef(null);
+  const [menuVisible, setMenuVisible] = useState(null);
+  useOutsideClick(wrapperRef, () => {
+    setMenuVisible(null);
+  });
+  const toggleMenu = (evt) => {
+    const { uid } = evt.target.dataset;
+    if (menuVisible == uid) {
+      setMenuVisible(null);
+    } else {
+      setMenuVisible(uid);
+    }
+  };
+  const handleRemoveUser = (uid) => {
+    remove(uid);
+  };
+  useEffect(() => {
+    if (removeSuccess) {
+      toast.success("delete successfully");
+    }
+  }, [removeSuccess]);
+
+  return (
+    <StyledWrapper>
+      <div className="intro">
+        <h4 className="title">Manage Members</h4>
+        <p className="desc">
+          Disabling your account means you can recover it at any time after
+          taking this action.
+        </p>
+      </div>
+      <ul className="members">
+        {members.map((m) => {
+          const { name, email, uid, is_admin } = m;
+          return (
+            <li key={uid} className="member">
+              <div className="left">
+                <Contact compact uid={uid} name={name} interactive={false} />
+                <div className="info">
+                  <span className="name">{name}</span>
+                  <span className="email">{email}</span>
+                </div>
+              </div>
+              <div className="right">
+                <span className="role">{is_admin ? "Admin" : "User"}</span>
+                <div className="opts">
+                  <img
+                    data-uid={uid}
+                    onClick={toggleMenu}
+                    className="dots"
+                    src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
+                    alt="dots icon"
+                  />
+                  {menuVisible == uid && (
+                    <StyledMenu
+                      ref={wrapperRef}
+                      className="menu animate__animated animate__flipInY animate__faster"
+                    >
+                      <li className="item">Copy Email</li>
+                      <li className="item">Mute</li>
+                      <li className="item underline">Change Nickname</li>
+                      <li className="item danger">Ban</li>
+                      <li
+                        className="item danger"
+                        onClick={handleRemoveUser.bind(null, uid)}
+                        data-uid={uid}
+                      >
+                        Remove
+                      </li>
+                    </StyledMenu>
+                  )}
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </StyledWrapper>
+  );
+}
diff --git a/src/common/component/NotificationHub.js b/src/common/component/NotificationHub.js
index 800058fc..030cf53f 100644
--- a/src/common/component/NotificationHub.js
+++ b/src/common/component/NotificationHub.js
@@ -1,9 +1,7 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
-
 import { useDispatch, useSelector } from "react-redux";
-
 import BASE_URL from "../../app/config";
 import { useRenewMutation } from "../../app/services/auth";
 import {
@@ -11,12 +9,16 @@ import {
   addChannel,
   deleteChannel,
 } from "../../app/slices/channels";
-import { updateUsersStatus } from "../../app/slices/contacts";
+import {
+  updateUsersByLogs,
+  updateUsersStatus,
+} from "../../app/slices/contacts";
 import {
   updateToken,
   clearAuthData,
   setUsersVersion,
   setAfterMid,
+  updateLoginedUserByLogs,
 } from "../../app/slices/auth.data";
 
 import { addChannelMsg } from "../../app/slices/message.channel";
@@ -99,6 +101,20 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
           dispatch(setUsersVersion({ version }));
         }
         break;
+      case "users_log":
+        {
+          console.log("users change logs");
+          const { logs } = data;
+          const loginedUserLogs = logs.filter((l) => {
+            return l.uid == currUser.uid;
+          });
+          if (loginedUserLogs.length) {
+            // 当前登录用户的变动，及时同步到auth data里
+            dispatch(updateLoginedUserByLogs(logs));
+          }
+          dispatch(updateUsersByLogs(logs));
+        }
+        break;
       case "users_state":
       case "users_state_changed":
         {
diff --git a/src/common/component/SaveTip.js b/src/common/component/SaveTip.js
new file mode 100644
index 00000000..baa5bece
--- /dev/null
+++ b/src/common/component/SaveTip.js
@@ -0,0 +1,64 @@
+// import React from "react";
+import styled from "styled-components";
+const StyledWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  bottom: 50px;
+  left: 0;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #333;
+  /* gap: 20px; */
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  border-radius: 25px;
+  .txt {
+    padding: 8px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .btns {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    .btn {
+      color: #fff;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      padding: 8px 14px;
+      background: #1fe1f9;
+      border: 1px solid #1fe1f9;
+      box-sizing: border-box;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 25px;
+      &.reset {
+        background: none;
+        color: #667085;
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+`;
+export default function SaveTip({ saveHandler, resetHandler }) {
+  return (
+    <StyledWrapper className="animate__animated animate__flipInX animate__faster">
+      <span className="txt">You have unsaved changes!</span>
+      <div className="btns">
+        <button className="btn reset" onClick={resetHandler}>
+          Reset
+        </button>
+        <button className="btn" onClick={saveHandler}>
+          Save Changes
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+}
diff --git a/src/common/component/Setting/MyAccount.js b/src/common/component/Setting/MyAccount.js
index 159b99dc..f8035645 100644
--- a/src/common/component/Setting/MyAccount.js
+++ b/src/common/component/Setting/MyAccount.js
@@ -1,5 +1,184 @@
-import React from "react";
-
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import { useSelector } from "react-redux";
+import toast from "react-hot-toast";
+import { useUpdateAvatarMutation } from "../../../app/services/contact";
+import AvatarUploader from "../AvatarUploader";
+import ProfileBasicEditModal from "./ProfileBasicEditModal";
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  .card {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 512px;
+    background: #f3f4f6;
+    border-radius: 20px;
+    .name {
+      margin-top: 8px;
+      margin-bottom: 64px;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 28px;
+      color: #27272a;
+      .uid {
+        font-weight: normal;
+        color: #52525b;
+      }
+    }
+    .row {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 24px;
+      .info {
+        display: flex;
+        flex-direction: column;
+        .label {
+          font-weight: 600;
+          font-size: 12px;
+          line-height: 20px;
+          text-transform: uppercase;
+          color: #52525b;
+        }
+        .txt {
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 20px;
+          color: #52525b;
+          .gray {
+            color: #78787c;
+          }
+        }
+      }
+      .btn {
+        background: #1fe1f9;
+        border: 1px solid #1fe1f9;
+      }
+    }
+  }
+  .danger {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .head {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 24px;
+      color: #374151;
+    }
+    .desc {
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 18px;
+      color: #616161;
+      margin-bottom: 16px;
+    }
+    .btn {
+      background: #ef4444;
+      border: 1px solid #ef4444;
+    }
+  }
+  .btn {
+    color: #fff;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 8px 14px;
+    background: #1fe1f9;
+    border: 1px solid #1fe1f9;
+    box-sizing: border-box;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+    border-radius: 8px;
+  }
+`;
+const EditModalInfo = {
+  name: {
+    label: "Username",
+    title: "Change your username",
+    intro: "Enter a new username.",
+  },
+  email: {
+    label: "Email",
+    title: "Change your email",
+    intro: "Enter a new email.",
+  },
+};
 export default function MyAccount() {
-  return <div>MyAccount</div>;
+  const [editModal, setEditModal] = useState(null);
+  const [
+    uploadAvatar,
+    { isSuccess: uploadSuccess },
+  ] = useUpdateAvatarMutation();
+  const { user } = useSelector((store) => store.authData);
+  useEffect(() => {
+    if (uploadSuccess) {
+      toast.success("update avatar successfully!");
+    }
+  }, [uploadSuccess]);
+  const handleBasicEdit = (evt) => {
+    const { edit } = evt.target.dataset;
+    setEditModal(edit);
+  };
+  const closeBasicEditModal = () => {
+    setEditModal(null);
+  };
+  if (!user) return null;
+  const { uid, avatar, name, email } = user;
+  return (
+    <>
+      <StyledWrapper>
+        <div className="card">
+          <AvatarUploader url={avatar} name={name} uploadImage={uploadAvatar} />
+          <div className="name">
+            {name} <span className="uid">#{uid}</span>
+          </div>
+          <div className="row">
+            <div className="info">
+              <span className="label">username</span>
+              <span className="txt">
+                {name} <span className="gray"> #{uid}</span>
+              </span>
+            </div>
+            {/* <div className="right"> */}
+            <button data-edit="name" onClick={handleBasicEdit} className="btn">
+              Edit
+            </button>
+            {/* </div> */}
+          </div>
+          <div className="row">
+            <div className="info">
+              <span className="label">email</span>
+              <span className="txt">{email}</span>
+            </div>
+            {/* <div className="right"> */}
+            <button data-edit="email" onClick={handleBasicEdit} className="btn">
+              Edit
+            </button>
+            {/* </div> */}
+          </div>
+        </div>
+        <div className="danger">
+          <h4 className="head">Account Removal</h4>
+          <div className="desc">
+            Disabling your account means you can recover it at any time after
+            taking this action.
+          </div>
+          <button className="btn">Delete Account</button>
+        </div>
+      </StyledWrapper>
+      {editModal && (
+        <ProfileBasicEditModal
+          valueKey={editModal}
+          {...EditModalInfo[editModal]}
+          value={eval(editModal)}
+          closeModal={closeBasicEditModal}
+        />
+      )}
+    </>
+  );
 }
diff --git a/src/common/component/Setting/Overview.js b/src/common/component/Setting/Overview.js
new file mode 100644
index 00000000..cdc11f38
--- /dev/null
+++ b/src/common/component/Setting/Overview.js
@@ -0,0 +1,175 @@
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+// import { useSelector } from "react-redux";
+import {
+  useGetServerQuery,
+  useUpdateServerMutation,
+  useUpdateLogoMutation,
+} from "../../../app/services/server";
+import LogoUploader from "../AvatarUploader";
+import Input from "../StyledInput";
+import Textarea from "../StyledTextarea";
+import SaveTip from "../SaveTip";
+import toast from "react-hot-toast";
+const StyledWrapper = styled.div`
+  position: relative;
+  width: 512px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  .logo {
+    display: flex;
+    gap: 16px;
+    .preview {
+      width: 96px;
+      height: 96px;
+    }
+    .upload {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      .tip {
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 20px;
+        color: #374151;
+      }
+      .btn {
+        padding: 8px 14px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #1fe1f9;
+        background: #ecfeff;
+        border: 1px solid #ecfeff;
+        box-sizing: border-box;
+        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+      }
+    }
+  }
+  .inputs {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    .input {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      label {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #6b7280;
+      }
+    }
+  }
+`;
+export default function Overview() {
+  const [changed, setChanged] = useState(false);
+  const [values, setValues] = useState(null);
+  const { data, refetch } = useGetServerQuery();
+  const [updateServer, { isSuccess: updated }] = useUpdateServerMutation();
+  const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
+  const handleUpdate = () => {
+    const { name, description } = values;
+    updateServer({ name, description });
+  };
+  const handleChange = (evt) => {
+    const newValue = evt.target.value;
+    const { type } = evt.target.dataset;
+    setValues((prev) => {
+      return { ...prev, [type]: newValue };
+    });
+  };
+  const handleReset = () => {
+    console.log("reset", data);
+    setValues(data);
+  };
+  useEffect(() => {
+    if (uploadSuccess) {
+      toast.success("update logo successfully");
+      refetch();
+    }
+  }, [uploadSuccess]);
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+  useEffect(() => {
+    if (data && values) {
+      const { name, description } = values;
+      const { name: oName, description: oDescription } = data;
+      if (oName !== name || oDescription !== description) {
+        setChanged(true);
+      } else {
+        setChanged(false);
+      }
+    }
+  }, [data, values]);
+
+  useEffect(() => {
+    if (updated) {
+      toast.success("Server updated!");
+      refetch();
+    }
+  }, [updated]);
+
+  if (!values) return null;
+  const { name, description, logo } = values;
+  return (
+    <StyledWrapper>
+      <div className="logo">
+        <div className="preview">
+          <LogoUploader
+            url={uploadSuccess ? `${logo}?t=${new Date().getTime()}` : logo}
+            name={name}
+            uploadImage={uploadLogo}
+          />
+        </div>
+        <div className="upload">
+          <div className="tip">
+            Minimum size is 128x128, We recommend at least 512x512 for the
+            server. Max size limited to 5M.
+          </div>
+          <button className="btn">Upload Image</button>
+        </div>
+      </div>
+      <div className="inputs">
+        <div className="input">
+          <label htmlFor="name">Server Name</label>
+          <Input
+            data-type="name"
+            onChange={handleChange}
+            value={name}
+            name="name"
+            id="name"
+            placeholder="Server Name"
+          />
+        </div>
+        <div className="input">
+          <label htmlFor="desc">Server Description</label>
+          <Textarea
+            data-type="description"
+            onChange={handleChange}
+            value={description}
+            rows={4}
+            name="name"
+            id="name"
+            placeholder="Tell the world a bit about this server"
+          />
+        </div>
+      </div>
+      {changed && (
+        <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />
+      )}
+      {/* <button onClick={handleUpdate} className="btn">update</button> */}
+    </StyledWrapper>
+  );
+}
diff --git a/src/common/component/Setting/ProfileBasicEditModal.js b/src/common/component/Setting/ProfileBasicEditModal.js
new file mode 100644
index 00000000..9f753f38
--- /dev/null
+++ b/src/common/component/Setting/ProfileBasicEditModal.js
@@ -0,0 +1,95 @@
+// import React from "react";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+// import { useDispatch } from "react-redux";
+import Input from "../StyledInput";
+// import BASE_URL from "../../app/config";
+import { useUpdateInfoMutation } from "../../../app/services/contact";
+import Button from "../StyledButton";
+const StyledEdit = styled.div`
+  width: 440px;
+  padding: 32px;
+  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
+  border-radius: 8px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .title {
+    font-weight: 600;
+    font-size: 20px;
+    color: #374151;
+    margin-bottom: 16px;
+  }
+  .desc {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    color: #6b7280;
+  }
+  .input {
+    margin: 48px 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    label {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      color: #6b7280;
+    }
+  }
+  .btns {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    align-items: center;
+  }
+`;
+import Modal from "../Modal";
+import toast from "react-hot-toast";
+export default function ProfileBasicEditModal({
+  label = "Username",
+  valueKey = "name",
+  value = "",
+  title = "Change your username",
+  intro = "Enter a new username and your existing password.",
+  closeModal,
+}) {
+  const [input, setInput] = useState(value);
+  // const dispatch = useDispatch();
+  const [update, { isLoading, isSuccess }] = useUpdateInfoMutation();
+  const handleChange = (evt) => {
+    setInput(evt.target.value);
+  };
+  const handleUpdate = () => {
+    update({ [valueKey]: input });
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      // todo
+      toast.success("update user info successfully");
+      closeModal();
+    }
+  }, [isSuccess]);
+  return (
+    <Modal id="modal-modal">
+      <StyledEdit className="animate__animated animate__fadeInDown animate__faster">
+        <h3 className="title">{title}</h3>
+        <p className="desc">{intro}</p>
+        <div className="input">
+          <label htmlFor={valueKey}>{label}</label>
+          <Input name={valueKey} value={input} onChange={handleChange}></Input>
+        </div>
+        <div className="btns">
+          <Button onClick={closeModal}>Cancel</Button>
+          <Button onClick={handleUpdate} className="main">
+            {isLoading ? "Updating" : `Done`}
+          </Button>
+        </div>
+      </StyledEdit>
+    </Modal>
+  );
+}
diff --git a/src/common/component/Setting/index.js b/src/common/component/Setting/index.js
index 3a7132af..15d6e6a8 100644
--- a/src/common/component/Setting/index.js
+++ b/src/common/component/Setting/index.js
@@ -2,14 +2,16 @@ import { useState } from "react";
 import { useDispatch } from "react-redux";
 import { toggleSetting } from "../../../app/slices/ui";
 import StyledSettingContainer from "../StyledSettingContainer";
-import navs from "./navs";
+import getNavs from "./navs";
 import LogoutConfirmModal from "./LogoutConfirmModal";
-const flatenNavs = navs
-  .map(({ items }) => {
-    return items;
-  })
-  .flat();
-export default function Setting() {
+
+export default function Setting({ contacts = [] }) {
+  const navs = getNavs(contacts);
+  const flatenNavs = navs
+    .map(({ items }) => {
+      return items;
+    })
+    .flat();
   const [currNav, setCurrNav] = useState(flatenNavs[0]);
   const [logoutConfirm, setLogoutConfirm] = useState(false);
   const dispatch = useDispatch();
@@ -35,7 +37,7 @@ export default function Setting() {
         navs={navs}
         dangers={[{ title: "Log Out", handler: toggleLogoutConfrim }]}
       >
-        right block
+        {currNav.component}
       </StyledSettingContainer>
       {logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfrim} />}
     </>
diff --git a/src/common/component/Setting/navs.js b/src/common/component/Setting/navs.js
index b78c54a5..25f224cd 100644
--- a/src/common/component/Setting/navs.js
+++ b/src/common/component/Setting/navs.js
@@ -1,30 +1,52 @@
-const navs = [
-  {
-    title: "User",
-    items: [
-      {
-        name: "my_account",
-        title: "My Account",
-      },
-      {
-        name: "auth_apps",
-        title: "Authorized Apps",
-      },
-    ],
-  },
-  {
-    title: "App",
-    items: [
-      {
-        name: "appearance",
-        title: "Appearance",
-      },
-      {
-        name: "lang",
-        title: "Language",
-      },
-    ],
-  },
-];
+import MyAccount from "./MyAccount";
+import Overview from "./Overview";
+import ManageMembers from "../ManageMembers";
+const getNavs = (members = []) => {
+  const navs = [
+    {
+      title: "General",
+      items: [
+        {
+          name: "overview",
+          title: "Overview",
+          component: <Overview />,
+        },
+        {
+          name: "roles",
+          title: "Roles",
+        },
+        {
+          name: "security",
+          title: "Security",
+        },
+      ],
+    },
+    {
+      title: "User",
+      items: [
+        {
+          name: "my_account",
+          title: "My Account",
+          component: <MyAccount />,
+        },
+        {
+          name: "auth_apps",
+          title: "Authorized Apps",
+        },
+      ],
+    },
+    {
+      title: "User Management",
+      items: [
+        {
+          name: "members",
+          title: "Members",
+          component: <ManageMembers members={members} />,
+        },
+      ],
+    },
+  ];
+  return navs;
+};
 
-export default navs;
+export default getNavs;
diff --git a/src/common/component/StyledInput.js b/src/common/component/StyledInput.js
new file mode 100644
index 00000000..a7b0c5ec
--- /dev/null
+++ b/src/common/component/StyledInput.js
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+const StyledInput = styled.input`
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: #78787c;
+  padding: 8px;
+`;
+
+export default StyledInput;
diff --git a/src/common/component/StyledMenu.js b/src/common/component/StyledMenu.js
new file mode 100644
index 00000000..9d6ba2ce
--- /dev/null
+++ b/src/common/component/StyledMenu.js
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+const StyledMenu = styled.ul`
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 12px;
+  background-color: #fff;
+  box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
+    0px 10px 10px rgba(31, 41, 55, 0.04);
+  border-radius: 6px;
+  .item {
+    white-space: nowrap;
+    cursor: pointer;
+    padding: 8px 0;
+    /* margin: 0 12px; */
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #616161;
+    &.underline {
+      border-bottom: 1px solid #e5e5e5;
+    }
+    &.danger {
+      color: #a11043;
+    }
+  }
+`;
+
+export default StyledMenu;
diff --git a/src/common/component/StyledSettingContainer.js b/src/common/component/StyledSettingContainer.js
index c46df391..b5823ee3 100644
--- a/src/common/component/StyledSettingContainer.js
+++ b/src/common/component/StyledSettingContainer.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
-  .left {
+  > .left {
     padding: 32px 16px;
     min-width: 212px;
     background-color: #f5f6f7;
@@ -58,7 +58,7 @@ const StyledWrapper = styled.div`
       }
     }
   }
-  .right {
+  > .right {
     background-color: #fff;
     width: 100%;
     padding: 32px;
diff --git a/src/common/component/StyledTextarea.js b/src/common/component/StyledTextarea.js
new file mode 100644
index 00000000..e7a1fc9d
--- /dev/null
+++ b/src/common/component/StyledTextarea.js
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+const StyledTextarea = styled.textarea`
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: #78787c;
+  padding: 8px;
+  resize: unset;
+`;
+
+export default StyledTextarea;
diff --git a/src/common/utils.js b/src/common/utils.js
index 6107e400..6fcc1af1 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -3,3 +3,51 @@ export const isObjectEqual = (obj1, obj2) => {
   let o2 = Object.entries(obj2).sort().toString();
   return o1 === o2;
 };
+export const getNonNullValues = (obj, whiteList = ["log_id"]) => {
+  const tmp = {};
+  Object.keys(obj).forEach((k) => {
+    if (!whiteList.includes(k) && obj[k] !== null) {
+      tmp[k] = obj[k];
+    }
+  });
+  return tmp;
+};
+export const getInitials = (name) => {
+  const arr = name.split(" ").filter((n) => !!n);
+  return arr
+    .map((t) => t[0])
+    .join("")
+    .toUpperCase();
+};
+export const getInitialsAvatar = ({
+  initials = "UK",
+  initial_size = 0,
+  size = 200,
+  foreground = "#fff",
+  background = "#4c99e9",
+  weight = 400,
+  fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+}) => {
+  const canvas = document.createElement("canvas");
+  const width = size;
+  const height = size;
+  const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
+  canvas.width = width * devicePixelRatio;
+  canvas.height = height * devicePixelRatio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  const context = canvas.getContext("2d");
+  context.scale(devicePixelRatio, devicePixelRatio);
+  context.rect(0, 0, canvas.width, canvas.height);
+  context.fillStyle = background;
+  context.fill();
+  context.font = `${weight} ${initial_size || height / 2}px ${fontFamily}`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillStyle = foreground;
+  context.fillText(initials, width / 2, height / 2);
+
+  /* istanbul ignore next */
+  return canvas.toDataURL("image/png");
+};
diff --git a/src/routes/home/ServerDropList.js b/src/routes/home/ServerDropList.js
index 63a931be..20732f77 100644
--- a/src/routes/home/ServerDropList.js
+++ b/src/routes/home/ServerDropList.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
     .logo {
       width: 24px;
       height: 24px;
+      border-radius: 50%;
     }
     .title {
       white-space: nowrap;
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index 054a36b0..09f8bf73 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -20,10 +20,12 @@ export default function HomePage() {
   const {
     ui: { menuExpand, setting, channelSetting },
     authData: { usersVersion, afterMid },
+    contacts,
   } = useSelector((store) => {
     return {
       authData: store.authData,
       ui: store.ui,
+      contacts: store.contacts,
     };
   });
   const { data, loading, error, success } = usePreload();
@@ -72,7 +74,7 @@ export default function HomePage() {
           <Outlet />
         </div>
       </StyledWrapper>
-      {setting && <SettingModal />}
+      {setting && <SettingModal contacts={contacts} />}
       {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>
   );
diff --git a/src/routes/login/SolidLoginButton.js b/src/routes/login/SolidLoginButton.js
new file mode 100644
index 00000000..80678573
--- /dev/null
+++ b/src/routes/login/SolidLoginButton.js
@@ -0,0 +1,38 @@
+/* eslint-disable no-undef */
+import { useEffect } from "react";
+import { useGetOpenidMutation } from "../../app/services/auth";
+export default function SolidLoginButton({ login }) {
+  const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
+
+  const handleSolidLogin = async () => {
+    getOpenId({ issuer_url: "https://solidweb.org" });
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      console.log("wtf", data);
+      const { id, url } = data;
+      window.open(url);
+      login({
+        id,
+        type: "oidc",
+      });
+      // location.href = url;
+    }
+  }, [data, isSuccess]);
+
+  return (
+    <button
+      disabled={isLoading}
+      onClick={handleSolidLogin}
+      href="#"
+      className="btn social"
+    >
+      <img
+        className="icon"
+        src="https://solidproject.org/assets/img/solid-emblem.svg"
+        alt="solid logo icon"
+      />
+      Sign in with Solid
+    </button>
+  );
+}
diff --git a/src/routes/login/index.js b/src/routes/login/index.js
index 98778b07..6b104262 100644
--- a/src/routes/login/index.js
+++ b/src/routes/login/index.js
@@ -7,6 +7,7 @@ import toast from "react-hot-toast";
 
 // import web3 from "web3";
 import MetamaskLoginButton from "./MetamaskLoginButton";
+import SolidLoginButton from "./SolidLoginButton";
 
 import GoogleLoginButton from "./GoogleLoginButton";
 import { useLoginMutation } from "../../app/services/auth";
@@ -109,6 +110,7 @@ export default function LoginPage() {
         <hr className="or" />
         <GoogleLoginButton login={login} />
         <MetamaskLoginButton login={login} />
+        <SolidLoginButton login={login} />
       </div>
     </StyledWrapper>
   );
diff --git a/yarn.lock b/yarn.lock
index 385c779a..9244404a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4808,6 +4808,20 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^2.0.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
+linkify-it@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
+  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^12.3.3:
   version "12.3.3"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.3.tgz#0a465962fe53baa2b4b9da50801ead49a910e03b"
@@ -6338,6 +6352,14 @@ react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-linkify@^1.0.0-alpha:
+  version "1.0.0-alpha"
+  resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-1.0.0-alpha.tgz#b391c7b88e3443752fafe76a95ca4434e82e70d5"
+  integrity sha512-7gcIUvJkAXXttt1fmBK9cwn+1jTa4hbKLGCZ9J1U6EOkyb2/+LKL1Z28d9rtDLMnpvImlNlLPdTPooorl5cpmg==
+  dependencies:
+    linkify-it "^2.0.3"
+    tlds "^1.199.0"
+
 react-redux@^7.2.6:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
@@ -7399,13 +7421,18 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tippy.js@^6.3.1:
+tippy.js@^6.3.1, tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
   dependencies:
     "@popperjs/core" "^2.9.0"
 
+tlds@^1.199.0:
+  version "1.230.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.230.0.tgz#9c836528c4062e565b3b58bfaef83d99e09c113d"
+  integrity sha512-QFuY6JBWZt2bZXlapjqsojul5dv9xfo7Uc8wTUlctJOuF+BS/ICni2f4x7MFiT7muUVmcKC1LvGnU4GWhYO0PQ==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -7535,6 +7562,11 @@ type-is@~1.6.18:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
   integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
+uc.micro@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
