diff --git a/src/appStart/StartHelper.tsx b/src/appStart/StartHelper.tsx
index bc2f61c..38d5142 100644
--- a/src/appStart/StartHelper.tsx
+++ b/src/appStart/StartHelper.tsx
@@ -20,7 +20,7 @@ import {initKey} from '@caj/helper/storage/bdm/encryption';
 import UserManager from '@caj/user/UserManager';
 import MyUserManager from '@caj/user/MyUserManager';
 import DBSchemas from '@caj/helper/storage/bdm/schemas';
-import {chatType} from '@caj/components/chat/types';
+import {chatTags, chatType} from '@caj/components/chat/types';
 
 const AnimationView = animated(View);
 
@@ -33,8 +33,8 @@ function onAppStart() {
         console.log('finish');
         await BigDataManager.databases.users.setEntry({
           UserId: 'test',
-          AccountName: 'TestAcc',
-          Username: 'TestAccountVirtual',
+          AccountName: '#845613',
+          Username: 'TestGroupVirtual',
           Description: 'This is a test account that is not real. ^^',
           FollowersCount: 2,
           FollowingCount: 24,
@@ -54,14 +54,16 @@ function onAppStart() {
           appNonSaveVarActions.setChatEntity({
             id: MyUserManager.getSelectedUserId(),
             type: chatType.User,
-            tags: [],
+            tags: [chatTags.GOOD_FRIEND],
+            unreadMessages: 1234,
           }),
         );
         store.dispatch(
           appNonSaveVarActions.setChatEntity({
             id: 'test',
             type: chatType.User,
-            tags: [],
+            tags: [chatTags.GROUP, chatTags.GOOD_FRIEND, chatTags.FRIEND],
+            unreadMessages: 0,
           }),
         );
       })
diff --git a/src/caj/components/chat/listChats.tsx b/src/caj/components/chat/listChats.tsx
index 7934a6f..69d55ac 100644
--- a/src/caj/components/chat/listChats.tsx
+++ b/src/caj/components/chat/listChats.tsx
@@ -1,12 +1,19 @@
+import {
+  darkThemeStyle,
+  getBackgroundColor,
+  themeSelector,
+} from '@caj/configs/colors';
 import {RootState} from '@caj/redux/store';
 import UserManager from '@caj/user/UserManager';
 import {Box, HStack, Text, VStack} from 'native-base';
 import {useSelector} from 'react-redux';
+import {start} from 'repl';
 import {ProfilePicture} from '../ProfilePicture';
 import {TextSkeleton} from '../simple/Skeleton';
-import {chatType} from './types';
+import {chatType, getTagUI} from './types';
 
 export function ListChats() {
+  const theme = themeSelector();
   const chats = useSelector((state: RootState) => state.nonSaveVariables.chats);
   const chatActivity = useSelector(
     (state: RootState) => state.nonSaveVariables.chatActivity,
@@ -16,8 +23,14 @@ export function ListChats() {
   const ppSize = 64;
   const tagSize = 24;
 
+  const lang = useSelector((state: RootState) => state.appVariables.lang);
+
   return (
-    <VStack space={space + 'px'} width="100%" marginY={space + 'px'}>
+    <VStack
+      mt={space * 2 + 'px'}
+      space={tagSize * 0.3 + space + 'px'}
+      width="100%"
+      marginY={space + 'px'}>
       {chatActivity.map((chatId, i) => {
         const chat = chats[chatId];
         if (chat.type === chatType.User) {
@@ -26,20 +39,68 @@ export function ListChats() {
           return (
             <Box
               key={'chatList_i' + i + chatId}
-              bg={'black.400'}
-              borderTopRadius={ppSize / 2 + 'px'}
-              borderBottomRightRadius={ppSize / 2 + 'px'}
-              borderBottomLeftRadius={tagSize / 2 + 'px'}
+              bg={'blackBG.400'}
+              {...darkThemeStyle(theme, 'black.400')}
+              borderRadius={ppSize / 2 + 'px'}
+              borderTopRightRadius={
+                chat.unreadMessages !== 0
+                  ? tagSize / 2 + 'px'
+                  : ppSize / 2 + 'px'
+              }
+              borderBottomLeftRadius={
+                chat.tags.length > 0 ? tagSize / 2 + 'px' : ppSize / 2 + 'px'
+              }
               marginX={space + 'px'}
               padding={space + 'px'}>
-              <VStack space={space + 'px'}>
+              <HStack
+                position={'absolute'}
+                space={space * 2 + 'px'}
+                right={space + 'px'}
+                top={-tagSize * 0.3 + 'px'}>
+                <Box
+                  height={tagSize + 'px'}
+                  paddingX={tagSize / 3 + 'px'}
+                  borderRadius={tagSize / 2}
+                  bg={'#666'}>
+                  <TextSkeleton
+                    color={'#eee'}
+                    SkeletonProps={{
+                      lines: 1,
+                      width: '75px',
+                    }}
+                    lineHeight={tagSize + 'px'}
+                    fontSize={tagSize / 1.75 + 'px'}>
+                    {user.AccountName.data}
+                  </TextSkeleton>
+                </Box>
+                <Box
+                  alignItems={'center'}
+                  height={tagSize + 'px'}
+                  paddingX={tagSize / 2.75 + 'px'}
+                  mt={tagSize * 0.3 + space + 'px'}
+                  borderRadius={tagSize / 2}
+                  bg={'primary.600'}
+                  opacity={chat.unreadMessages === 0 ? 0 : 1}>
+                  <TextSkeleton
+                    color={'#fff'}
+                    SkeletonProps={{
+                      lines: 1,
+                      width: '75px',
+                    }}
+                    lineHeight={tagSize + 'px'}
+                    fontSize={tagSize / 1.75 + 'px'}>
+                    {chat.unreadMessages}
+                  </TextSkeleton>
+                </Box>
+              </HStack>
+              <VStack>
                 <HStack space={space + 'px'}>
                   <ProfilePicture
                     UserId={chatId}
                     size={ppSize}></ProfilePicture>
-                  <VStack>
+                  <VStack mt={ppSize / 6 + 'px'}>
                     <TextSkeleton
-                      lineHeight={ppSize / 2.5 + 'px'}
+                      lineHeight={ppSize / 3 + 'px'}
                       numberOfLines={1}
                       SkeletonProps={{
                         lines: 1,
@@ -49,28 +110,43 @@ export function ListChats() {
                       {user.Username.data}
                     </TextSkeleton>
                     <TextSkeleton
-                      lineHeight={ppSize / 2.5 + 'px'}
+                      lineHeight={ppSize / 3 + 'px'}
                       numberOfLines={1}
                       SkeletonProps={{
                         lines: 1,
                         width: '160px',
                       }}
-                      color="white.400">
-                      {user.Username.data}
+                      color="white.700">
+                      {'I love Chicken McNuggets von Burgerking'}
                     </TextSkeleton>
                   </VStack>
                 </HStack>
-                <HStack>
-                  <Box
-                    height={tagSize + 'px'}
-                    paddingX={tagSize / 2 + 'px'}
-                    borderRadius={tagSize / 2}
-                    bg={'lime.300'}>
-                    <Text color={'#000'} lineHeight={tagSize + 'px'}>
-                      Friend
-                    </Text>
-                  </Box>
-                </HStack>
+                {chat.tags.length > 0 ? (
+                  <HStack flexWrap={'wrap'}>
+                    {chat.tags.map((tag, i) => {
+                      const tagObj = getTagUI(tag, lang);
+
+                      let tagName = tagObj.name;
+                      return (
+                        <Box
+                          key={'tag' + i + tag + chat.id}
+                          height={tagSize + 'px'}
+                          mr={space + 'px'}
+                          mt={space + 'px'}
+                          paddingX={tagSize / 3 + 'px'}
+                          borderRadius={tagSize / 2}
+                          bg={tagObj.background}>
+                          <Text
+                            color={tagObj.textColor}
+                            lineHeight={tagSize + 'px'}
+                            fontSize={tagSize / 1.75 + 'px'}>
+                            {tagName}
+                          </Text>
+                        </Box>
+                      );
+                    })}
+                  </HStack>
+                ) : null}
               </VStack>
             </Box>
           );
diff --git a/src/caj/components/chat/types.ts b/src/caj/components/chat/types.ts
index b843392..7d6307c 100644
--- a/src/caj/components/chat/types.ts
+++ b/src/caj/components/chat/types.ts
@@ -1,23 +1,63 @@
-import { UserId } from "@caj/configs/types"
+import {UserId} from '@caj/configs/types';
+import LangFormat from '@caj/lang/default';
 
 type GroupId = string;
 
 export enum chatType {
-    User = 0,
-    Group = 1,
+  User = 0,
+  Group = 1,
 }
 
 export enum chatTags {
-    FRIEND,
-    GROUP,
-    GOOD_FRIENDS,
+  GROUP = 0,
+  FRIEND = 1,
+  GOOD_FRIEND = 2,
+}
+
+interface tagUIType {
+  name: string;
+  background: string;
+  textColor?: string;
+}
+
+interface tagUITypeFinal extends tagUIType {
+  textColor: string;
+}
+
+const tagUI: {[key in chatTags]: tagUIType} = {
+  [chatTags.GROUP]: {
+    name: 'Group',
+    background: '#37f',
+  },
+  [chatTags.FRIEND]: {
+    name: 'Friend',
+    background: 'lime.300',
+    textColor: '#111',
+  },
+  [chatTags.GOOD_FRIEND]: {
+    name: 'Good friend',
+    background: 'lime.600',
+  },
+};
+
+export function getTagUI(tagKey: chatTags, lang?: LangFormat): tagUITypeFinal {
+  let tag = tagUI[tagKey];
+
+  tag.textColor = tag.textColor || '#fff';
+
+  if (lang !== undefined && lang.chat.tags.names[tagKey] !== undefined) {
+    tag.name = lang.chat.tags.names[tagKey];
+  }
+
+  return tag as tagUITypeFinal;
 }
 
 export type chatId = UserId | GroupId;
 
 export interface chatEntity {
-    type: chatType;
-    id:  chatId;
-    title?: string;
-    tags: chatTags[];
+  type: chatType;
+  id: chatId;
+  title?: string;
+  unreadMessages: number;
+  tags: chatTags[];
 }
\ No newline at end of file
diff --git a/src/caj/components/userUI/AccountInfoBanner.tsx b/src/caj/components/userUI/AccountInfoBanner.tsx
index e6b24f7..10aafb5 100644
--- a/src/caj/components/userUI/AccountInfoBanner.tsx
+++ b/src/caj/components/userUI/AccountInfoBanner.tsx
@@ -84,7 +84,7 @@ export default function AccountInfoBanner(props: {
           </TextSkeleton>
           <TextSkeleton
             SkeletonProps={{lines: 1, width: '120px'}}
-            color="white.100"
+            color="white.900"
             margin={0}
             padding={0}>
             {user.AccountName.data}
@@ -104,13 +104,13 @@ export default function AccountInfoBanner(props: {
               <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
                 {user.FollowingCount.data}
               </TextSkeleton>
-              <Text color="white.100">{lang.account.profile.follower}</Text>
+              <Text color="white.900">{lang.account.profile.follower}</Text>
             </VStack>
             <VStack alignItems={'center'}>
               <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
                 {user.FollowersCount.data}
               </TextSkeleton>
-              <Text color="white.100">{lang.account.profile.following}</Text>
+              <Text color="white.900">{lang.account.profile.following}</Text>
             </VStack>
           </HStack>
           <Box
@@ -149,7 +149,7 @@ export default function AccountInfoBanner(props: {
               width: '80%',
               mx: spacing * 2 + 'px',
             }}
-            color="white.100">
+            color="white.900">
             {user.Description.data}
           </TextSkeleton>
         </Box>
diff --git a/src/caj/configs/colors.ts b/src/caj/configs/colors.ts
index 5a430ad..c9eb682 100644
--- a/src/caj/configs/colors.ts
+++ b/src/caj/configs/colors.ts
@@ -46,15 +46,15 @@ export const theme = (_theme: ThemeMode) => {
         },
         {
           //light
-          900: '#e9e8f0',
-          800: '#e4e3ec',
-          700: '#dfdde8',
-          600: '#dad8e4',
-          500: '#d7d5e1',
-          400: '#d4d2de',
-          300: '#d2d0db',
-          200: '#cfcdd8',
-          100: '#cdcbd5',
+          100: '#efefef',
+          200: '#dfdfdf',
+          300: '#cececf',
+          400: '#bebebf',
+          500: '#aeaeb0',
+          600: '#9e9ea0',
+          700: '#8e8e90',
+          800: '#7d7d80',
+          900: '#6d6d70',
         },
       ][_theme],
       blackBG: [
@@ -84,15 +84,15 @@ export const theme = (_theme: ThemeMode) => {
         },
         {
           //light
-          900: '#e9e8f0',
-          800: '#e4e3ec',
-          700: '#dfdde8',
-          600: '#dad8e4',
-          500: '#d7d5e1',
-          400: '#d4d2de',
-          300: '#d2d0db',
-          200: '#cfcdd8',
-          100: '#cdcbd5',
+          900: '#fbfafc',
+          800: '#f8f8fb',
+          700: '#f6f6f9',
+          600: '#f4f4f8',
+          500: '#f2f1f6',
+          400: '#f0eff5',
+          300: '#ededf3',
+          200: '#ebeaf2',
+          100: '#e9e8f0',
         },
       ][_theme],
       white: [
@@ -112,14 +112,14 @@ export const theme = (_theme: ThemeMode) => {
           //dark
 
           900: '#e9e8f0',
-          800: '#e4e3ec',
-          700: '#dfdde8',
-          600: '#dad8e4',
-          500: '#d7d5e1',
-          400: '#d4d2de',
-          300: '#d2d0db',
-          200: '#cfcdd8',
-          100: '#cdcbd5',
+          800: '#d2d1d8',
+          700: '#babac0',
+          600: '#a3a2a8',
+          500: '#8c8b90',
+          400: '#757478',
+          300: '#5d5d60',
+          200: '#464648',
+          100: '#2f2e30',
         },
         {
           //light
@@ -162,7 +162,7 @@ export const theme = (_theme: ThemeMode) => {
           fontFamily: 'Outfit-Regular',
           colorScheme: 'black',
         },
-        spaces:{},
+        spaces: {},
         sizes: {
           xl: {
             fontSize: '64px',
@@ -191,14 +191,17 @@ export const theme = (_theme: ThemeMode) => {
   });
 };
 
-export function getBackgroundColor(tm: ThemeMode): string {
+export function getBackgroundColor(tm: ThemeMode /*, index?: number*/): string {
+  let i = /*index ||*/ 0;
+  i += 2;
+
   switch (tm) {
     case ThemeMode.Light:
-      return '#fff';
+      return ['#fff', '#e8e8e9', '#d1d2d3', '#bbbbbd', '#a4a4a7'][0];
     case ThemeMode.Darkest:
       return '#000';
     default:
-      return '#1b1c22';
+      return ['#16161b', '##18191f', '#1b1c22', '#323338', '#49494e'][i];
   }
 }
 
diff --git a/src/caj/lang/default.ts b/src/caj/lang/default.ts
index 5dc9ca9..f6ad3f9 100644
--- a/src/caj/lang/default.ts
+++ b/src/caj/lang/default.ts
@@ -1,3 +1,4 @@
+import {chatTags} from '@caj/components/chat/types';
 import {type} from 'os';
 
 interface LangDetails {
@@ -21,10 +22,16 @@ export default interface LangFormat {
   info: string;
   error: string;
   success: string;
-  account: {profile: {
-    follower: string,
-    following:  string,
-  },
+  chat: {
+    tags: {
+      names: {[key in chatTags]: string};
+    };
+  };
+  account: {
+    profile: {
+      follower: string;
+      following: string;
+    };
     login: {
       title: string;
       wrongEmPw: string;
diff --git a/src/caj/lang/en.ts b/src/caj/lang/en.ts
index 162e16e..fc490de 100644
--- a/src/caj/lang/en.ts
+++ b/src/caj/lang/en.ts
@@ -20,10 +20,19 @@ export const lang: LangFormat = {
   info: 'Info',
   error: 'Error',
   success: 'Success',
+  chat: {
+    tags: {
+      names: {
+        0: 'Group',
+        1: 'Friend',
+        2: 'Good friend',
+      },
+    },
+  },
   account: {
     profile: {
-      follower: "Follower",
-      following: "Following",
+      follower: 'Follower',
+      following: 'Following',
     },
     login: {
       title: 'Log in',