diff --git a/src/components/application/app-navigation/base-components/nav-account-card.tsx b/src/components/application/app-navigation/base-components/nav-account-card.tsx
index 7da65a7..9f84595 100644
--- a/src/components/application/app-navigation/base-components/nav-account-card.tsx
+++ b/src/components/application/app-navigation/base-components/nav-account-card.tsx
@@ -69,12 +69,11 @@ export const NavAccountMenu = ({
         <AriaDialog
             {...dialogProps}
             ref={dialogRef}
-            className={cx("w-66 rounded-xl shadow-lg outline-hidden", className)}
-            style={{ backgroundColor: 'rgb(28, 33, 44)' }}
+            className={cx("w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden", className)}
         >
             {({ close }) => (
                 <>
-                    <div className="rounded-xl" style={{ backgroundColor: 'rgb(28, 33, 44)' }}>
+                    <div className="rounded-xl bg-primary ring-1 ring-secondary">
                         <div className="flex flex-col gap-0.5 py-1.5">
                             <NavAccountCardMenuItem label="View profile" icon={IconUser} shortcut="⌘K->P" />
                             <NavAccountCardMenuItem label="Account settings" icon={IconSettings} shortcut="⌘S" />
@@ -105,17 +104,17 @@ const NavAccountCardMenuItem = ({
         <button {...buttonProps} className={cx("group/item w-full cursor-pointer px-1.5 focus:outline-hidden", buttonProps.className)}>
             <div
                 className={cx(
-                    "flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-[rgb(42,48,60)]",
+                    "flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-primary_hover",
                     // Focus styles.
                     "outline-focus-ring group-focus-visible/item:outline-2 group-focus-visible/item:outline-offset-2",
                 )}
             >
-                <div className="flex gap-2 text-sm font-semibold text-[rgb(255,255,255)] group-hover/item:text-[rgb(73,160,225)]">
-                    {Icon && <Icon className="size-5 text-[rgb(255,255,255)]" />} {label}
+                <div className="flex gap-2 text-sm font-semibold text-secondary group-hover/item:text-secondary_hover">
+                    {Icon && <Icon className="size-5 text-fg-quaternary" />} {label}
                 </div>
 
                 {shortcut && (
-                    <kbd className="flex rounded px-1 py-px font-body text-xs font-medium text-[rgb(255,255,255)] ring-1 ring-secondary ring-inset">{shortcut}</kbd>
+                    <kbd className="flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset">{shortcut}</kbd>
                 )}
             </div>
         </button>
@@ -146,7 +145,7 @@ export const NavAccountCard = ({
     }
 
     return (
-        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3">
+        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset">
             <AvatarLabelGroup
                 size="md"
                 src={selectedAccount.avatar}
diff --git a/src/components/application/app-navigation/base-components/nav-item.tsx b/src/components/application/app-navigation/base-components/nav-item.tsx
index 5bc2a30..7677ad6 100644
--- a/src/components/application/app-navigation/base-components/nav-item.tsx
+++ b/src/components/application/app-navigation/base-components/nav-item.tsx
@@ -6,8 +6,8 @@ import { Badge } from "@/components/base/badges/badges";
 import { cx, sortCx } from "@/utils/cx";
 
 const styles = sortCx({
-    root: "group relative flex w-full cursor-pointer items-center rounded-md bg-transparent outline-focus-ring transition duration-100 ease-linear select-none hover:bg-[rgb(42,48,60)] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
-    rootSelected: "bg-[rgb(42,48,60)] hover:bg-[rgb(42,48,60)]",
+    root: "group relative flex w-full cursor-pointer items-center rounded-md bg-primary outline-focus-ring transition duration-100 ease-linear select-none hover:bg-primary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+    rootSelected: "bg-active hover:bg-secondary_hover border-l-2 border-l-brand-600 text-brand-secondary",
 });
 
 interface NavItemBaseProps {
@@ -48,9 +48,9 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
     const labelElement = (
         <span
             className={cx(
-                "flex-1 text-md font-semibold transition-inherit-all",
+                "flex-1 text-md font-semibold text-secondary transition-inherit-all group-hover:text-secondary_hover",
                 truncate && "truncate",
-                current ? "text-[rgb(73,160,225)]" : "text-[rgb(255,255,255)] group-hover:text-[rgb(73,160,225)]",
+                current && "text-secondary_hover",
             )}
         >
             {children}
diff --git a/src/components/base/avatar/avatar-label-group.tsx b/src/components/base/avatar/avatar-label-group.tsx
index 250f43f..f9792e7 100644
--- a/src/components/base/avatar/avatar-label-group.tsx
+++ b/src/components/base/avatar/avatar-label-group.tsx
@@ -20,8 +20,8 @@ export const AvatarLabelGroup = ({ title, subtitle, className, ...props }: Avata
         <figure className={cx("group flex min-w-0 flex-1 items-center", styles[props.size].root, className)}>
             <Avatar {...props} />
             <figcaption className="min-w-0 flex-1">
-                <p className={cx(styles[props.size].title)} style={{ color: 'rgb(255, 255, 255)' }}>{title}</p>
-                <p className={cx("truncate", styles[props.size].subtitle)} style={{ color: 'rgb(255, 255, 255)' }}>{subtitle}</p>
+                <p className={cx("text-primary", styles[props.size].title)}>{title}</p>
+                <p className={cx("truncate text-tertiary", styles[props.size].subtitle)}>{subtitle}</p>
             </figcaption>
         </figure>
     );
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 8d138e4..82f5be0 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -151,9 +151,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
 
     const content = (
         <aside
-            style={{ "--width": `${width}px`, backgroundColor: 'rgb(28, 33, 44)' } as React.CSSProperties}
+            style={{ "--width": `${width}px` } as React.CSSProperties}
             className={cx(
-                "flex h-full w-full max-w-full flex-col justify-between overflow-auto pt-4 shadow-xs transition-all duration-200 ease-linear lg:w-(--width) lg:pt-5",
+                "flex h-full w-full max-w-full flex-col justify-between overflow-auto border-secondary bg-primary pt-4 shadow-xs transition-all duration-200 ease-linear md:border-r lg:w-(--width) lg:rounded-xl lg:border lg:pt-5",
             )}
         >
             {/* Logo + collapse toggle */}
@@ -162,8 +162,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                     <img src="/favicon-32.png" alt="Helix Engage" className="size-8 rounded-lg shrink-0" />
                 ) : (
                     <div className="flex flex-col gap-1">
-                        <span className="text-md font-bold" style={{ color: 'rgb(255, 255, 255)'}}>Helix Engage</span>
-                        <span className="text-xs" style={{ color: 'rgb(255, 255, 255)' }}>Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
+                        <span className="text-md font-bold text-primary">Helix Engage</span>
+                        <span className="text-xs text-tertiary">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
                     </div>
                 )}
                 <button
@@ -191,15 +191,11 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                                         <Link
                                             to={item.href ?? '/'}
                                             title={item.label}
-                                            style={item.href !== activeUrl ? {
-                                                '--hover-bg': 'rgb(42, 48, 60)',
-                                                '--hover-text': 'rgb(73, 160, 225)'
-                                            } as React.CSSProperties : undefined}
                                             className={cx(
                                                 "flex size-10 items-center justify-center rounded-lg transition duration-100 ease-linear",
                                                 item.href === activeUrl
                                                     ? "bg-active text-fg-brand-primary"
-                                                    : "text-fg-quaternary hover:bg-[var(--hover-bg)] hover:text-[var(--hover-text)]",
+                                                    : "text-fg-quaternary hover:bg-primary_hover hover:text-fg-secondary",
                                             )}
                                         >
                                             {item.icon && <item.icon className="size-5" />}
@@ -253,9 +249,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
     return (
         <>
             <MobileNavigationHeader>{content}</MobileNavigationHeader>
-            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
             <div
-                style={{ paddingLeft: width }}
+                style={{ paddingLeft: width + 4 }}
                 className="invisible hidden lg:sticky lg:top-0 lg:bottom-0 lg:left-0 lg:block transition-all duration-200 ease-linear"
             />
 
diff --git a/src/pages/call-history.tsx b/src/pages/call-history.tsx
index c67d970..3cd7ca3 100644
--- a/src/pages/call-history.tsx
+++ b/src/pages/call-history.tsx
@@ -57,24 +57,12 @@ const formatPhoneDisplay = (call: Call): string => {
 
 const DirectionIcon: FC<{ direction: CallDirection | null; status: Call['callStatus'] }> = ({ direction, status }) => {
     if (status === 'MISSED') {
-        return (
-            <div className="flex items-center justify-center size-8 rounded-full" style={{ backgroundColor: 'rgba(202, 59, 51, 0.1)' }}>
-                <FontAwesomeIcon icon={faPhoneXmark} className="size-4" style={{ color: 'rgb(202, 59, 51)' }} />
-            </div>
-        );
+        return <FontAwesomeIcon icon={faPhoneXmark} className="size-4 text-fg-error-secondary" />;
     }
     if (direction === 'OUTBOUND') {
-        return (
-            <div className="flex items-center justify-center size-8 rounded-full" style={{ backgroundColor: 'rgba(73, 160, 225, 0.1)' }}>
-                <FontAwesomeIcon icon={faPhoneArrowUp} className="size-4" style={{ color: 'rgb(73, 160, 225)' }} />
-            </div>
-        );
+        return <FontAwesomeIcon icon={faPhoneArrowUp} className="size-4 text-fg-brand-secondary" />;
     }
-    return (
-        <div className="flex items-center justify-center size-8 rounded-full" style={{ backgroundColor: 'rgba(34, 197, 94, 0.1)' }}>
-            <FontAwesomeIcon icon={faPhoneArrowDown} className="size-4" style={{ color: 'rgb(34, 197, 94)' }} />
-        </div>
-    );
+    return <FontAwesomeIcon icon={faPhoneArrowDown} className="size-4 text-fg-success-secondary" />;
 };
 
 const RecordingPlayer: FC<{ url: string }> = ({ url }) => {