diff --git a/net/web/src/App.js b/net/web/src/App.js
index 3f60dc0d..5e0e5411 100644
--- a/net/web/src/App.js
+++ b/net/web/src/App.js
@@ -1,6 +1,6 @@
 
 import 'antd/dist/reset.css';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 
 import { AppContextProvider } from 'context/AppContext';
diff --git a/net/web/src/access/Access.styled.js b/net/web/src/access/Access.styled.js
index ad8e5fdb..250b49ee 100644
--- a/net/web/src/access/Access.styled.js
+++ b/net/web/src/access/Access.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AccessWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/access/admin/Admin.styled.js b/net/web/src/access/admin/Admin.styled.js
index 23958ef3..f72b78a6 100644
--- a/net/web/src/access/admin/Admin.styled.js
+++ b/net/web/src/access/admin/Admin.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AdminWrapper = styled.div`
   max-width: 400px;
diff --git a/net/web/src/access/createAccount/CreateAccount.styled.js b/net/web/src/access/createAccount/CreateAccount.styled.js
index 4c86d2e5..4430b966 100644
--- a/net/web/src/access/createAccount/CreateAccount.styled.js
+++ b/net/web/src/access/createAccount/CreateAccount.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CreateAccountWrapper = styled.div`
   max-width: 400px;
diff --git a/net/web/src/access/login/Login.styled.js b/net/web/src/access/login/Login.styled.js
index 18ab4e40..d8f474c9 100644
--- a/net/web/src/access/login/Login.styled.js
+++ b/net/web/src/access/login/Login.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const LoginWrapper = styled.div`
   max-width: 400px;
diff --git a/net/web/src/carousel/Carousel.styled.js b/net/web/src/carousel/Carousel.styled.js
index 042c664b..87d48845 100644
--- a/net/web/src/carousel/Carousel.styled.js
+++ b/net/web/src/carousel/Carousel.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CarouselWrapper = styled.div`
   position: relative;
diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 3c832d1c..c01af4ba 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -1,4 +1,4 @@
-const Colors = {
+export const Colors = {
   background: '#8fbea7',
   primary: '#448866',
   formBackground: '#f2f2f2',
@@ -37,4 +37,45 @@ const Colors = {
   selectHover: '#fafafa',
 };
 
-export default Colors;
+export const LightTheme = {
+  headerArea: '#f2f2f2',
+  footerArea: '#f2f2f2',
+  itemArea: '#f8f8f8',
+  hoverArea: '#efefef',
+  selectedArea: '#e8e8e8',
+  enabledArea: '#448866',
+  disabledArea: '#cccccc',
+  mainText: '#444444',
+  hintText: '#777777',
+  activeText: '#ffffff',
+  idleText: '#aaaaaa',
+  placeholderText: '#777777',
+  linkText: '#448866',
+  labelText: '#888888',
+  alertText: '#ff8888',
+  itemLine: '#eeeeee',
+  sectionLine: '#dddddd',
+  headerLine: '#aaaaaa',
+};
+
+export const DarkTheme = {
+  headerArea: '#111111',
+  footerArea: '#111111',
+  itemArea: '#222222',
+  hoverArea: '#444444',
+  selectedArea: '#333333',
+  enabledArea: '#448866',
+  disabledArea: '#888888',
+  mainText: '#ffffff',
+  hintText: '#aaaaaa',
+  activeText: '#ffffff',
+  idleText: '#aaaaaa',
+  placeholderText: '#cccccc',
+  linkText: '#448866',
+  labelText: '#dddddd',
+  alertText: '#ff8888',
+  itemLine: '#555555',
+  sectionLine: '#777777',
+  headerLine: '#aaaaaa',
+};
+
diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js
index 8b1889db..21df784e 100644
--- a/net/web/src/context/useSettingsContext.hook.js
+++ b/net/web/src/context/useSettingsContext.hook.js
@@ -1,75 +1,5 @@
 import { useEffect, useState } from 'react';
-
-const LightTheme = {
-  background: '#8fbea7',
-  primary: '#448866',
-  formBackground: '#f2f2f2',
-  darkBackground: '#222222',
-  formFocus: '#f8f8f8',
-  formHover: '#efefef',
-  grey: '#888888',
-  white: '#ffffff',
-  black: '#000000',
-  divider: '#dddddd',
-  mask: '#dddddd',
-  encircle: '#cccccc',
-  alert: '#ff8888',
-  warn: '#dd4444',
-  enabled: '#444444',
-  disabled: '#aaaaaa',
-  text: '#444444',
-  link: '#0077CC',
-  itemDivider: '#eeeeee',
-  connected: '#44cc44',
-  connecting: '#dd88ff',
-  requested: '#4488ff',
-  pending: '#22aaaa',
-  confirmed: '#aaaaaa',
-  error: '#ff4444',
-  profileForm: '#e8e8e8',
-  profileDivider: '#aaaaaa',
-  statsForm: '#ededed',
-  statsDivider: '#afafaf',
-  channel: '#f2f2f2',
-  card: '#eeeeee',
-  selectHover: '#fafafa',
-};
-
-const DarkTheme = {
-  background: '#8fbea7',
-  primary: '#448866',
-  formBackground: '#f2f2f2',
-  darkBackground: '#222222',
-  formFocus: '#f8f8f8',
-  formHover: '#efefef',
-  grey: '#888888',
-  white: '#ffffff',
-  black: '#000000',
-  divider: '#dddddd',
-  mask: '#dddddd',
-  encircle: '#cccccc',
-  alert: '#ff8888',
-  warn: '#dd4444',
-  enabled: '#444444',
-  disabled: '#aaaaaa',
-  text: '#444444',
-  link: '#0077CC',
-  itemDivider: '#eeeeee',
-  connected: '#44cc44',
-  connecting: '#dd88ff',
-  requested: '#4488ff',
-  pending: '#22aaaa',
-  confirmed: '#aaaaaa',
-  error: '#ff4444',
-  profileForm: '#e8e8e8',
-  profileDivider: '#aaaaaa',
-  statsForm: '#ededed',
-  statsDivider: '#afafaf',
-  channel: '#f2f2f2',
-  card: '#eeeeee',
-  selectHover: '#fafafa',
-};
-
+import { LightTheme, DarkTheme } from 'constants/Colors';
 
 export function useSettingsContext() {
 
diff --git a/net/web/src/dashboard/Dashboard.styled.js b/net/web/src/dashboard/Dashboard.styled.js
index 706a5656..50cd1150 100644
--- a/net/web/src/dashboard/Dashboard.styled.js
+++ b/net/web/src/dashboard/Dashboard.styled.js
@@ -1,6 +1,6 @@
 import { Button, Space } from 'antd';
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const DashboardWrapper = styled.div`
   display: flex;
diff --git a/net/web/src/dashboard/copyButton/useCopyButton.hook.js b/net/web/src/dashboard/copyButton/useCopyButton.hook.js
index 0533f4dc..0a94a57a 100644
--- a/net/web/src/dashboard/copyButton/useCopyButton.hook.js
+++ b/net/web/src/dashboard/copyButton/useCopyButton.hook.js
@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function useCopyButton() {
 
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
index b83bca56..184273e2 100644
--- a/net/web/src/session/Session.styled.js
+++ b/net/web/src/session/Session.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const RingingWrapper = styled.div`
   .ringing-list {
diff --git a/net/web/src/session/account/Account.styled.js b/net/web/src/session/account/Account.styled.js
index 5bc305f2..47b563b2 100644
--- a/net/web/src/session/account/Account.styled.js
+++ b/net/web/src/session/account/Account.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AccountWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/account/profile/Profile.styled.js b/net/web/src/session/account/profile/Profile.styled.js
index e4426711..ac29b884 100644
--- a/net/web/src/session/account/profile/Profile.styled.js
+++ b/net/web/src/session/account/profile/Profile.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ProfileWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
index 20e05cea..29269ced 100644
--- a/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
+++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AccountAccessWrapper = styled.div`
   display: flex;
diff --git a/net/web/src/session/bottomNav/BottomNav.styled.js b/net/web/src/session/bottomNav/BottomNav.styled.js
index 7262a191..bb5c4562 100644
--- a/net/web/src/session/bottomNav/BottomNav.styled.js
+++ b/net/web/src/session/bottomNav/BottomNav.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const BottomNavWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/cardSelect/CardSelect.styled.js b/net/web/src/session/cardSelect/CardSelect.styled.js
index aff1fef9..2c565e53 100644
--- a/net/web/src/session/cardSelect/CardSelect.styled.js
+++ b/net/web/src/session/cardSelect/CardSelect.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CardSelectWrapper = styled.div`
   display: flex;
diff --git a/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js b/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
index 082e9917..79d5218e 100644
--- a/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
+++ b/net/web/src/session/cardSelect/selectItem/SelectItem.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const SelectItemWrapper = styled.div`
   .active {
diff --git a/net/web/src/session/cards/Cards.styled.js b/net/web/src/session/cards/Cards.styled.js
index f1e087f4..9fa42a5f 100644
--- a/net/web/src/session/cards/Cards.styled.js
+++ b/net/web/src/session/cards/Cards.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CardsWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/cards/cardItem/CardItem.styled.js b/net/web/src/session/cards/cardItem/CardItem.styled.js
index cd924a9e..3c961cfd 100644
--- a/net/web/src/session/cards/cardItem/CardItem.styled.js
+++ b/net/web/src/session/cards/cardItem/CardItem.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const CardItemWrapper = styled.div`
   height: 48px;
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js
index ab15d6ca..14f7963f 100644
--- a/net/web/src/session/channels/Channels.styled.js
+++ b/net/web/src/session/channels/Channels.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ChannelsWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/channels/addChannel/AddChannel.styled.js b/net/web/src/session/channels/addChannel/AddChannel.styled.js
index 3f63f1e8..a4bbd2b1 100644
--- a/net/web/src/session/channels/addChannel/AddChannel.styled.js
+++ b/net/web/src/session/channels/addChannel/AddChannel.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AddChannelWrapper = styled.div`
   display: flex;
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
index d140b01e..29327cb3 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ChannelItemWrapper = styled.div`
   height: 48px;
diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js
index ccfd195c..f30c7494 100644
--- a/net/web/src/session/contact/Contact.styled.js
+++ b/net/web/src/session/contact/Contact.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ContactWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js
index 5e94402b..9ff5f801 100644
--- a/net/web/src/session/conversation/Conversation.styled.js
+++ b/net/web/src/session/conversation/Conversation.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ConversationWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.styled.js b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
index 35a7dd9f..e628b7ac 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.styled.js
+++ b/net/web/src/session/conversation/addTopic/AddTopic.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AddTopicWrapper = styled.div`
   width: 100%;
diff --git a/net/web/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js b/net/web/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js
index 6101a3c3..a598ec14 100644
--- a/net/web/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js
+++ b/net/web/src/session/conversation/addTopic/binaryFile/BinaryFile.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const BinaryFileWrapper = styled.div`
   position: relative;
diff --git a/net/web/src/session/conversation/channelHeader/ChannelHeader.styled.js b/net/web/src/session/conversation/channelHeader/ChannelHeader.styled.js
index 6dd01f79..e92f5470 100644
--- a/net/web/src/session/conversation/channelHeader/ChannelHeader.styled.js
+++ b/net/web/src/session/conversation/channelHeader/ChannelHeader.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ChannelHeaderWrapper = styled.div`
   margin-left: 16px;
diff --git a/net/web/src/session/conversation/topicItem/TopicItem.styled.js b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
index 3b50a130..3314539f 100644
--- a/net/web/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/net/web/src/session/conversation/topicItem/TopicItem.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const TopicItemWrapper = styled.div`
   display: flex;
diff --git a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
index 09c44930..53f22233 100644
--- a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
+++ b/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
@@ -4,7 +4,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import { PlayCircleOutlined, MinusCircleOutlined, SoundOutlined } from '@ant-design/icons';
 import { AudioAssetWrapper, AudioModalWrapper } from './AudioAsset.styled';
 import { useAudioAsset } from './useAudioAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 import background from 'images/audio.png';
 
diff --git a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js b/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
index 27d5431a..fbadd96a 100644
--- a/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
+++ b/net/web/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const AudioAssetWrapper = styled.div`
   position: relative;
diff --git a/net/web/src/session/conversation/topicItem/binaryAsset/BinaryAsset.jsx b/net/web/src/session/conversation/topicItem/binaryAsset/BinaryAsset.jsx
index 30b264a6..cfac9d77 100644
--- a/net/web/src/session/conversation/topicItem/binaryAsset/BinaryAsset.jsx
+++ b/net/web/src/session/conversation/topicItem/binaryAsset/BinaryAsset.jsx
@@ -4,7 +4,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import { DownloadOutlined } from '@ant-design/icons';
 import { BinaryAssetWrapper } from './BinaryAsset.styled';
 import { useBinaryAsset } from './useBinaryAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function BinaryAsset({ asset }) {
 
diff --git a/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
index 029c4d3b..02a1245a 100644
--- a/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
+++ b/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@@ -3,7 +3,7 @@ import { Progress, Modal, Spin } from 'antd';
 import ReactResizeDetector from 'react-resize-detector';
 import { ImageAssetWrapper, ImageModalWrapper } from './ImageAsset.styled';
 import { useImageAsset } from './useImageAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function ImageAsset({ asset }) {
 
diff --git a/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
index 7162a19e..ccb5bd26 100644
--- a/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
+++ b/net/web/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ImageAssetWrapper = styled.div`
   position: relative;
diff --git a/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
index 9e158f58..14a86fc9 100644
--- a/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
+++ b/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
@@ -3,7 +3,7 @@ import ReactResizeDetector from 'react-resize-detector';
 import { VideoCameraOutlined } from '@ant-design/icons';
 import { VideoAssetWrapper, VideoModalWrapper } from './VideoAsset.styled';
 import { useVideoAsset } from './useVideoAsset.hook';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export function VideoAsset({ asset }) {
 
diff --git a/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js b/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
index c0b5db69..7feb6b99 100644
--- a/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
+++ b/net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const VideoAssetWrapper = styled.div`
   position: relative;
diff --git a/net/web/src/session/details/Details.styled.js b/net/web/src/session/details/Details.styled.js
index 72c9dd13..6fe6f212 100644
--- a/net/web/src/session/details/Details.styled.js
+++ b/net/web/src/session/details/Details.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const DetailsWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/details/editMembers/EditMembers.styled.js b/net/web/src/session/details/editMembers/EditMembers.styled.js
index e9c0d5cb..1a7a1df8 100644
--- a/net/web/src/session/details/editMembers/EditMembers.styled.js
+++ b/net/web/src/session/details/editMembers/EditMembers.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const EditMembersWrapper = styled.div`
   display: flex;
diff --git a/net/web/src/session/identity/Identity.styled.js b/net/web/src/session/identity/Identity.styled.js
index 2480bae0..59c0c4c4 100644
--- a/net/web/src/session/identity/Identity.styled.js
+++ b/net/web/src/session/identity/Identity.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const IdentityWrapper = styled.div`
   width: 100%;
@@ -9,18 +9,26 @@ export const IdentityWrapper = styled.div`
   align-items: center;
   padding-left: 16px;
   padding-right: 16px;
-  border-bottom: 1px solid ${Colors.divider};
   @media (prefers-color-scheme: light) {
-    background-color: ${props => props.theme.light.formBackground};
+    background-color: ${props => props.theme.light.headerArea};
+    border-bottom: 1px solid ${props => props.theme.light.sectionLine};
+    color: ${props => props.theme.light.mainText};
   }
   @media (prefers-color-scheme: dark) {
-    background-color: ${props => props.theme.dark.formBackground};
+    background-color: ${props => props.theme.dark.headerArea};
+    border-bottom: 1px solid ${props => props.theme.dark.sectionLine};
+    color: ${props => props.theme.dark.mainText};
   }
   flex-shrink: 0;
 
   &:hover {
     cursor: pointer;
-    background-color: ${Colors.formFocus};
+    @media (prefers-color-scheme: light) {
+      background-color: ${props => props.theme.light.hoverArea};
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: ${props => props.theme.dark.hoverArea};
+    }
 
     .drop {
       font-weight: bold;
@@ -31,7 +39,14 @@ export const IdentityWrapper = styled.div`
     padding-left: 4px;
     padding-right: 4px;
     border-radius: 8px;
-    border: 1px solid ${Colors.formBackground};
+    @media (prefers-color-scheme: light) {
+      border: 1px solid ${props => props.theme.light.sectionLine};
+      color: ${props => props.theme.light.mainText};
+    }
+    @media (prefers-color-scheme: dark) {
+      border: 1px solid ${props => props.theme.dark.sectionLine};
+      color: ${props => props.theme.dark.mainText};
+    }
   }
 
   .label {
@@ -73,15 +88,30 @@ export const LogoutContent = styled.div`
 
   .logoutMode {
     padding-right: 8px;
-    color: ${Colors.text};
+    @media (prefers-color-scheme: light) {
+      color: ${props => props.theme.light.mainText};
+    }
+    @media (prefers-color-scheme: dark) {
+      color: ${props => props.theme.dark.mainText};
+    }
   }
 `
 
 export const ErrorNotice = styled.div`
-  color: ${Colors.alert};
+  @media (prefers-color-scheme: light) {
+    color: ${props => props.theme.light.alertText};
+  }
+  @media (prefers-color-scheme: dark) {
+    color: ${props => props.theme.dark.alertText};
+  }
 `
 
 export const InfoNotice = styled.div`
-  color: ${Colors.primary};
+  @media (prefers-color-scheme: light) {
+    color: ${props => props.theme.light.linkText};
+  }
+  @media (prefers-color-scheme: dark) {
+    color: ${props => props.theme.dark.linkText};
+  }
 `
 
diff --git a/net/web/src/session/listing/Listing.styled.js b/net/web/src/session/listing/Listing.styled.js
index 56736fe6..23b0c843 100644
--- a/net/web/src/session/listing/Listing.styled.js
+++ b/net/web/src/session/listing/Listing.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ListingWrapper = styled.div`
   height: 100%;
diff --git a/net/web/src/session/listing/listingItem/ListingItem.styled.js b/net/web/src/session/listing/listingItem/ListingItem.styled.js
index 3b1191a8..6b1135fb 100644
--- a/net/web/src/session/listing/listingItem/ListingItem.styled.js
+++ b/net/web/src/session/listing/listingItem/ListingItem.styled.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Colors from 'constants/Colors';
+import { Colors } from 'constants/Colors';
 
 export const ListingItemWrapper = styled.div`
   height: 48px;