diff --git a/net/web/src/User/Profile/Profile.styled.js b/net/web/src/User/Profile/Profile.styled.js
index 6e8e4387..b5c747e4 100644
--- a/net/web/src/User/Profile/Profile.styled.js
+++ b/net/web/src/User/Profile/Profile.styled.js
@@ -15,7 +15,7 @@ export const ProfileWrapper = styled.div`
     width: 100%;
     flex-direction: row;
     align-items: center;
-    background-color: #ddeedd;
+    background-color: #dddddd;
     height: 64px;
     padding-right: 16px;
     padding-left: 16px;
@@ -44,8 +44,8 @@ export const ProfileWrapper = styled.div`
   .logo {
     width: 100%;
     height: 100%;
-    width: 200px;
-    height: 200px;
+    width: 192px;
+    height: 192px;
     border: 1px solid #dddddd;
     border-radius: 8px;
     align-items: center;
diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
new file mode 100644
index 00000000..82df4300
--- /dev/null
+++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export function Cards() {
+  return <div>CARDS</div>
+}
+
diff --git a/net/web/src/User/SideBar/Contacts/Channels/Channels.jsx b/net/web/src/User/SideBar/Contacts/Channels/Channels.jsx
new file mode 100644
index 00000000..f9c77075
--- /dev/null
+++ b/net/web/src/User/SideBar/Contacts/Channels/Channels.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export function Channels() {
+
+  return <div>CHANNELS</div>
+}
diff --git a/net/web/src/User/SideBar/Contacts/Contacts.jsx b/net/web/src/User/SideBar/Contacts/Contacts.jsx
index 0aeef56f..5f864e92 100644
--- a/net/web/src/User/SideBar/Contacts/Contacts.jsx
+++ b/net/web/src/User/SideBar/Contacts/Contacts.jsx
@@ -2,6 +2,11 @@ import { Avatar, Image } from 'antd';
 import React from 'react'
 import { ContactsWrapper } from './Contacts.styled';
 import { useContacts } from './useContacts.hook';
+import { Tabs } from 'antd';
+import { Cards } from './Cards/Cards';
+import { Channels } from './Channels/Channels';
+
+const { TabPane } = Tabs;
 
 export function Contacts() {
 
@@ -9,6 +14,14 @@ export function Contacts() {
 
   return (
     <ContactsWrapper>
+      <Tabs defaultActiveKey="1">
+        <TabPane tab="Contacts" key="1">
+          <Cards />
+        </TabPane>
+        <TabPane tab="Conversations" key="2">
+          <Channels />
+        </TabPane>
+      </Tabs>
     </ContactsWrapper>
   )
 }
diff --git a/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx b/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
index a79dd553..e0730d0c 100644
--- a/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
+++ b/net/web/src/User/SideBar/Contacts/Contacts.styled.jsx
@@ -2,6 +2,7 @@ import { Button } from 'antd';
 import styled from 'styled-components';
 
 export const ContactsWrapper = styled.div`
+  padding: 16px;
   width: 100%;
   flex-grow: 1;
   background-color: #f6f5ed;
diff --git a/net/web/src/User/SideBar/Identity/Identity.styled.js b/net/web/src/User/SideBar/Identity/Identity.styled.js
index d1d93026..ee6f8cb6 100644
--- a/net/web/src/User/SideBar/Identity/Identity.styled.js
+++ b/net/web/src/User/SideBar/Identity/Identity.styled.js
@@ -67,6 +67,7 @@ export const MenuWrapper = styled(Menu)`
 
 export const IdentityDropdown = styled(Dropdown)`
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;