diff --git a/src/components/CompanySwitcher.tsx b/src/components/CompanySwitcher.tsx
index 7a583dd0b..83a925603 100644
--- a/src/components/CompanySwitcher.tsx
+++ b/src/components/CompanySwitcher.tsx
@@ -37,6 +37,7 @@ import { useHandleCurrentUserChangeProperty } from '$app/common/hooks/useHandleC
 import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
 import { useUpdateCompanyUser } from '$app/pages/settings/user/common/hooks/useUpdateCompanyUser';
 import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges';
+import { useColorScheme } from '$app/common/colors';
 
 const SwitcherDiv = styled.div`
   &:hover {
@@ -57,6 +58,7 @@ export function CompanySwitcher() {
 
   const logo = useLogo();
   const location = useLocation();
+  const colors = useColorScheme();
   const companyName = useCompanyName();
   const queryClient = useQueryClient();
   const { isAdmin, isOwner } = useAdmin();
@@ -141,8 +143,8 @@ export function CompanySwitcher() {
           src={logo}
           alt="Company logo"
           style={{
-            borderColor: '#FFFFFF19',
-            width: '1.5rem',
+            borderColor: '#e5e7eb',
+            width: '1.66rem',
           }}
         />
       </>
@@ -163,29 +165,23 @@ export function CompanySwitcher() {
       >
         <div className="flex items-center">
           <Menu.Button className="flex items-center justify-start space-x-3 w-full">
-            <SwitcherDiv
-              className="flex items-center space-x-3 p-1.5 rounded-md"
-              theme={{ hoverColor: '#FFFFFF0D' }}
-            >
+            <div className="flex items-center space-x-3 p-1.5 rounded-md hover:bg-gray-700">
               <img
                 className="rounded-full border overflow-hidden aspect-square"
                 src={logo}
                 alt="Company logo"
                 style={{
-                  borderColor: '#FFFFFF19',
+                  borderColor: '#e5e7eb',
                   width: '1.65rem',
                 }}
               />
 
-              <span
-                className="text-sm text-start w-28 truncate"
-                style={{ color: '#FAFAFA' }}
-              >
+              <span className="text-sm text-start w-28 truncate text-gray-200">
                 {companyName}
               </span>
 
-              <ExpandCollapseChevron />
-            </SwitcherDiv>
+              <ExpandCollapseChevron color="#e5e7eb" />
+            </div>
           </Menu.Button>
 
           <div
@@ -197,7 +193,7 @@ export function CompanySwitcher() {
               )
             }
           >
-            <CloseNavbarArrow />
+            <CloseNavbarArrow color="#e5e7eb" />
           </div>
         </div>
 
@@ -211,23 +207,19 @@ export function CompanySwitcher() {
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className="origin-top-right absolute left-0 mt-2 rounded shadow-lg"
+            className="origin-top-right absolute left-0 mt-2 rounded shadow-lg border"
             style={{
-              backgroundColor: 'white',
+              backgroundColor: colors.$1,
               width: '14.5rem',
+              borderColor: colors.$4,
             }}
           >
-            <div className="border-b" style={{ borderColor: '#09090B1A' }}>
+            <div className="border-b" style={{ borderColor: colors.$4 }}>
               <Menu.Item>
                 <div className="px-3 pb-1.5 pt-2">
-                  <p style={{ fontSize: '0.6875rem', color: '#A1A1AA' }}>
-                    {t('signed_in_as')}
-                  </p>
+                  <p className="text-xs text-gray-500">{t('signed_in_as')}</p>
 
-                  <p
-                    className="font-medium truncate text-black"
-                    style={{ fontSize: '0.8125rem' }}
-                  >
+                  <p className="font-medium truncate text-sm">
                     {currentUser?.email}
                   </p>
                 </div>
@@ -236,24 +228,21 @@ export function CompanySwitcher() {
 
             <div
               className="flex flex-col pb-1 pt-2 border-b"
-              style={{ borderColor: '#09090B1A' }}
+              style={{ borderColor: colors.$4 }}
             >
               {state?.api?.length >= 1 &&
                 state?.api?.map((record: any, index: number) => (
                   <Menu.Item key={index}>
                     <div className="px-1 space-y-0.5">
                       {index === 0 && (
-                        <p
-                          className="pl-2"
-                          style={{ color: '#A1A1AA', fontSize: '0.6875rem' }}
-                        >
+                        <p className="pl-2 text-xs text-gray-500">
                           {t('company')}
                         </p>
                       )}
 
                       <SwitcherDiv
                         className="flex items-center px-2 justify-between py-1.5 rounded-md cursor-pointer"
-                        theme={{ hoverColor: `#09090B13` }}
+                        theme={{ hoverColor: colors.$5 }}
                         onClick={() =>
                           preventNavigation({
                             fn: () => switchCompany(index),
@@ -268,7 +257,7 @@ export function CompanySwitcher() {
                               src={record.company.settings.company_logo}
                               alt="Company logo"
                               style={{
-                                borderColor: '#FFFFFF19',
+                                borderColor: colors.$4,
                                 width: '1.5rem',
                               }}
                             />
@@ -283,16 +272,15 @@ export function CompanySwitcher() {
                             />
                           )}
 
-                          <div
-                            className="flex-1 truncate text-black"
-                            style={{ fontSize: '0.8125rem' }}
-                          >
+                          <div className="w-36 truncate text-sm">
                             {record.company.settings.name ||
                               t('untitled_company')}
                           </div>
                         </div>
 
-                        {state.currentIndex === index && <Check />}
+                        {state.currentIndex === index && (
+                          <Check color={colors.$3} />
+                        )}
                       </SwitcherDiv>
                     </div>
                   </Menu.Item>
@@ -307,17 +295,12 @@ export function CompanySwitcher() {
                     <div className="px-1">
                       <SwitcherDiv
                         className="flex items-center pl-3 space-x-3 py-2 rounded-md cursor-pointer"
-                        theme={{ hoverColor: `#09090B13` }}
+                        theme={{ hoverColor: colors.$5 }}
                         onClick={() => setIsCompanyCreateModalOpened(true)}
                       >
                         <Plus />
 
-                        <span
-                          className="text-black"
-                          style={{ fontSize: '0.8125rem' }}
-                        >
-                          {t('add_company')}
-                        </span>
+                        <span className="text-sm">{t('add_company')}</span>
                       </SwitcherDiv>
                     </div>
                   </Menu.Item>
@@ -328,7 +311,7 @@ export function CompanySwitcher() {
                   <div className="px-1">
                     <SwitcherDiv
                       className="flex items-center space-x-3 pl-3 py-2 rounded-md cursor-pointer"
-                      theme={{ hoverColor: `#09090B13` }}
+                      theme={{ hoverColor: colors.$5 }}
                       onClick={() =>
                         preventNavigation({
                           url: '/settings/account_management',
@@ -337,12 +320,7 @@ export function CompanySwitcher() {
                     >
                       <Person />
 
-                      <span
-                        className="text-black"
-                        style={{ fontSize: '0.8125rem' }}
-                      >
-                        {t('account_management')}
-                      </span>
+                      <span className="text-sm">{t('account_management')}</span>
                     </SwitcherDiv>
                   </div>
                 </Menu.Item>
@@ -352,7 +330,7 @@ export function CompanySwitcher() {
                 <div className="pl-1.5 pr-1">
                   <SwitcherDiv
                     className="flex items-center space-x-3 pl-3 py-2 rounded-md cursor-pointer"
-                    theme={{ hoverColor: `#09090B13` }}
+                    theme={{ hoverColor: colors.$5 }}
                     onClick={() =>
                       preventNavigation({
                         url: '/logout',
@@ -361,12 +339,7 @@ export function CompanySwitcher() {
                   >
                     <Exit />
 
-                    <span
-                      className="text-black"
-                      style={{ fontSize: '0.8125rem' }}
-                    >
-                      {t('logout')}
-                    </span>
+                    <span className="text-sm">{t('logout')}</span>
                   </SwitcherDiv>
                 </div>
               </Menu.Item>
diff --git a/src/components/icons/Check.tsx b/src/components/icons/Check.tsx
index cf259e1ea..f16c301b3 100644
--- a/src/components/icons/Check.tsx
+++ b/src/components/icons/Check.tsx
@@ -8,21 +8,25 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
-export function Check() {
+type Props = {
+  color?: string;
+};
+
+export function Check({ color = '#18181B' }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       x="0px"
       y="0px"
-      width="1rem"
-      height="1rem"
+      width="1.1rem"
+      height="1.1rem"
       viewBox="0 0 20 20"
     >
       <polyline
         points="4 11 8 15 16 5"
         fill="none"
-        stroke="#18181B"
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
diff --git a/src/components/icons/ExpandCollapseChevron.tsx b/src/components/icons/ExpandCollapseChevron.tsx
index f623a0392..0a34b0181 100644
--- a/src/components/icons/ExpandCollapseChevron.tsx
+++ b/src/components/icons/ExpandCollapseChevron.tsx
@@ -8,7 +8,11 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
-export function ExpandCollapseChevron() {
+interface Props {
+  color?: string;
+}
+
+export function ExpandCollapseChevron({ color = '#FFFFFF' }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +26,7 @@ export function ExpandCollapseChevron() {
       <polyline
         points="13 7 10 4 7 7"
         fill="none"
-        stroke="#74747C"
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
@@ -30,7 +34,7 @@ export function ExpandCollapseChevron() {
       <polyline
         points="13 13 10 16 7 13"
         fill="none"
-        stroke="#74747C"
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx
index 72bc753d4..8f3f0c048 100644
--- a/src/components/layouts/Default.tsx
+++ b/src/components/layouts/Default.tsx
@@ -441,7 +441,7 @@ export function Default(props: Props) {
             onClick={() => setSidebarOpen(true)}
           >
             <span className="sr-only">Open sidebar</span>
-            <MenuIcon className="dark:text-gray-100" />
+            <MenuIcon color={colors.$3} />
           </button>
 
           <div
@@ -460,7 +460,7 @@ export function Default(props: Props) {
                       )
                     }
                   >
-                    <OpenNavbarArrow />
+                    <OpenNavbarArrow color={colors.$3} />
                   </div>
                 )}
 
diff --git a/src/components/layouts/components/DesktopSidebar.tsx b/src/components/layouts/components/DesktopSidebar.tsx
index 68e587afa..866e27808 100644
--- a/src/components/layouts/components/DesktopSidebar.tsx
+++ b/src/components/layouts/components/DesktopSidebar.tsx
@@ -68,7 +68,7 @@ export function DesktopSidebar(props: Props) {
             }
           )}
           style={{
-            borderColor: '#FFFFFF13',
+            borderColor: 'white',
             color: colors.$3,
           }}
         >
diff --git a/src/components/layouts/components/MobileSidebar.tsx b/src/components/layouts/components/MobileSidebar.tsx
index 0c66d97a0..a98a3334b 100644
--- a/src/components/layouts/components/MobileSidebar.tsx
+++ b/src/components/layouts/components/MobileSidebar.tsx
@@ -16,7 +16,6 @@ import { NavigationItem } from './DesktopSidebar';
 import { SidebarItem } from './SidebarItem';
 import { useColorScheme } from '$app/common/colors';
 import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges';
-import { useLogo } from '$app/common/hooks/useLogo';
 import { HelpSidebarIcons } from '$app/components/HelpSidebarIcons';
 
 interface Props {
@@ -26,7 +25,6 @@ interface Props {
 }
 
 export function MobileSidebar(props: Props) {
-  const logo = useLogo();
   const colors = useColorScheme();
   const user = useInjectUserChanges();
 
@@ -62,7 +60,10 @@ export function MobileSidebar(props: Props) {
           leaveFrom="translate-x-0"
           leaveTo="-translate-x-full"
         >
-          <div className="relative flex-1 flex flex-col max-w-xs w-full bg-ninja-gray dark:bg-gray-900">
+          <div
+            className="relative flex-1 flex flex-col max-w-xs w-full px-3"
+            style={{ backgroundColor: colors.$6 }}
+          >
             <Transition.Child
               as={Fragment}
               enter="ease-in-out duration-300"
@@ -85,14 +86,10 @@ export function MobileSidebar(props: Props) {
             </Transition.Child>
 
             <div
-              className="flex-shrink-0 flex items-center px-4 py-3 border-b h-16 justify-center border-gray-600"
-              style={{ backgroundColor: colors.$1, color: colors.$3 }}
+              className="flex-shrink-0 flex items-center px-0 md:px-4 py-3 border-b h-16 justify-center border-gray-600"
+              style={{ backgroundColor: colors.$6, color: colors.$3 }}
             >
-              {isMiniSidebar ? (
-                <img className="w-8" src={logo} alt="Company logo" />
-              ) : (
-                <CompanySwitcher />
-              )}
+              <CompanySwitcher />
             </div>
 
             <div className="flex flex-col flex-1 h-0 overflow-y-auto mt-4">