From 65450ddd3ef1cf49d5dfac02e96dd6378e9da0cc Mon Sep 17 00:00:00 2001
From: moulichand16 <moulichand16@gmail.com>
Date: Tue, 31 Mar 2026 12:30:27 +0530
Subject: [PATCH 1/3] changed colors in sidebar

---
 .../base-components/nav-account-card.tsx       | 15 ++++++++-------
 .../base-components/nav-item.tsx               |  8 ++++----
 .../base/avatar/avatar-label-group.tsx         |  4 ++--
 src/components/layout/sidebar.tsx              | 18 +++++++++++-------
 src/pages/call-history.tsx                     | 18 +++++++++++++++---
 5 files changed, 40 insertions(+), 23 deletions(-)

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 9f84595..7da65a7 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,11 +69,12 @@ export const NavAccountMenu = ({
         <AriaDialog
             {...dialogProps}
             ref={dialogRef}
-            className={cx("w-66 rounded-xl bg-secondary_alt shadow-lg ring ring-secondary_alt outline-hidden", className)}
+            className={cx("w-66 rounded-xl shadow-lg outline-hidden", className)}
+            style={{ backgroundColor: 'rgb(28, 33, 44)' }}
         >
             {({ close }) => (
                 <>
-                    <div className="rounded-xl bg-primary ring-1 ring-secondary">
+                    <div className="rounded-xl" style={{ backgroundColor: 'rgb(28, 33, 44)' }}>
                         <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" />
@@ -104,17 +105,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-primary_hover",
+                    "flex w-full items-center justify-between gap-3 rounded-md p-2 group-hover/item:bg-[rgb(42,48,60)]",
                     // 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-secondary group-hover/item:text-secondary_hover">
-                    {Icon && <Icon className="size-5 text-fg-quaternary" />} {label}
+                <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>
 
                 {shortcut && (
-                    <kbd className="flex rounded px-1 py-px font-body text-xs font-medium text-tertiary ring-1 ring-secondary ring-inset">{shortcut}</kbd>
+                    <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>
                 )}
             </div>
         </button>
@@ -145,7 +146,7 @@ export const NavAccountCard = ({
     }
 
     return (
-        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset">
+        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3">
             <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 7677ad6..5bc2a30 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-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",
+    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)]",
 });
 
 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 text-secondary transition-inherit-all group-hover:text-secondary_hover",
+                "flex-1 text-md font-semibold transition-inherit-all",
                 truncate && "truncate",
-                current && "text-secondary_hover",
+                current ? "text-[rgb(73,160,225)]" : "text-[rgb(255,255,255)] group-hover:text-[rgb(73,160,225)]",
             )}
         >
             {children}
diff --git a/src/components/base/avatar/avatar-label-group.tsx b/src/components/base/avatar/avatar-label-group.tsx
index f9792e7..250f43f 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("text-primary", styles[props.size].title)}>{title}</p>
-                <p className={cx("truncate text-tertiary", styles[props.size].subtitle)}>{subtitle}</p>
+                <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>
             </figcaption>
         </figure>
     );
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 82f5be0..8d138e4 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` } as React.CSSProperties}
+            style={{ "--width": `${width}px`, backgroundColor: 'rgb(28, 33, 44)' } as React.CSSProperties}
             className={cx(
-                "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",
+                "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",
             )}
         >
             {/* 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 text-primary">Helix Engage</span>
-                        <span className="text-xs text-tertiary">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
+                        <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>
                     </div>
                 )}
                 <button
@@ -191,11 +191,15 @@ 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-primary_hover hover:text-fg-secondary",
+                                                    : "text-fg-quaternary hover:bg-[var(--hover-bg)] hover:text-[var(--hover-text)]",
                                             )}
                                         >
                                             {item.icon && <item.icon className="size-5" />}
@@ -249,9 +253,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
     return (
         <>
             <MobileNavigationHeader>{content}</MobileNavigationHeader>
-            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
             <div
-                style={{ paddingLeft: width + 4 }}
+                style={{ paddingLeft: width }}
                 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 3cd7ca3..c67d970 100644
--- a/src/pages/call-history.tsx
+++ b/src/pages/call-history.tsx
@@ -57,12 +57,24 @@ const formatPhoneDisplay = (call: Call): string => {
 
 const DirectionIcon: FC<{ direction: CallDirection | null; status: Call['callStatus'] }> = ({ direction, status }) => {
     if (status === 'MISSED') {
-        return <FontAwesomeIcon icon={faPhoneXmark} className="size-4 text-fg-error-secondary" />;
+        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>
+        );
     }
     if (direction === 'OUTBOUND') {
-        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(73, 160, 225, 0.1)' }}>
+                <FontAwesomeIcon icon={faPhoneArrowUp} className="size-4" style={{ color: 'rgb(73, 160, 225)' }} />
+            </div>
+        );
     }
-    return <FontAwesomeIcon icon={faPhoneArrowDown} className="size-4 text-fg-success-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>
+    );
 };
 
 const RecordingPlayer: FC<{ url: string }> = ({ url }) => {

From 3cafe820cf5626fadd5ac0fe847121613153f59b Mon Sep 17 00:00:00 2001
From: moulichand16 <moulichand16@gmail.com>
Date: Tue, 31 Mar 2026 15:05:05 +0530
Subject: [PATCH 2/3] reverted back to initial colors

---
 .../base-components/nav-account-card.tsx       | 15 +++++++--------
 .../base-components/nav-item.tsx               |  8 ++++----
 .../base/avatar/avatar-label-group.tsx         |  4 ++--
 src/components/layout/sidebar.tsx              | 18 +++++++-----------
 src/pages/call-history.tsx                     | 18 +++---------------
 5 files changed, 23 insertions(+), 40 deletions(-)

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 }) => {

From 9a2253b56ef165542d2a872992e0219f2d42dd17 Mon Sep 17 00:00:00 2001
From: moulichand16 <moulichand16@gmail.com>
Date: Wed, 1 Apr 2026 11:29:05 +0530
Subject: [PATCH 3/3] added colors to side bar

---
 .../base-components/nav-account-card.tsx      |  2 +-
 .../base-components/nav-item.tsx              | 16 ++++++------
 .../base/avatar/avatar-label-group.tsx        |  4 +--
 src/components/layout/sidebar.tsx             | 25 +++++++++++++------
 src/styles/globals.css                        | 20 +++++++++++++++
 src/styles/theme.css                          |  7 ++++++
 6 files changed, 56 insertions(+), 18 deletions(-)

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 9f84595..da17827 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
@@ -145,7 +145,7 @@ export const NavAccountCard = ({
     }
 
     return (
-        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3 ring-1 ring-secondary ring-inset">
+        <div ref={triggerRef} className="relative flex items-center gap-3 rounded-xl p-3">
             <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 7677ad6..e39e37f 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-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",
+    root: "group relative flex w-full cursor-pointer items-center rounded-md outline-focus-ring transition duration-100 ease-linear select-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
+    rootSelected: "bg-sidebar-active hover:bg-sidebar-active border-l-2 border-l-brand-600",
 });
 
 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 text-secondary transition-inherit-all group-hover:text-secondary_hover",
+                "flex-1 text-md font-semibold text-white transition-inherit-all",
                 truncate && "truncate",
-                current && "text-secondary_hover",
+                current ? "text-sidebar-active" : "group-hover:text-sidebar-hover",
             )}
         >
             {children}
@@ -62,7 +62,9 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
 
     if (type === "collapsible") {
         return (
-            <summary className={cx("px-3 py-2", styles.root, current && styles.rootSelected)} onClick={onClick}>
+            <summary 
+                className={cx("px-3 py-2 bg-sidebar", !current && "hover:bg-sidebar-hover", styles.root, current && styles.rootSelected)} 
+                onClick={onClick}>
                 {iconElement}
 
                 {labelElement}
@@ -80,7 +82,7 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
                 href={href!}
                 target={isExternal ? "_blank" : "_self"}
                 rel="noopener noreferrer"
-                className={cx("py-2 pr-3 pl-10", styles.root, current && styles.rootSelected)}
+                className={cx("py-2 pr-3 pl-10 bg-sidebar", !current && "hover:bg-sidebar-hover", styles.root, current && styles.rootSelected)}
                 onClick={onClick}
                 aria-current={current ? "page" : undefined}
             >
@@ -96,7 +98,7 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
             href={href!}
             target={isExternal ? "_blank" : "_self"}
             rel="noopener noreferrer"
-            className={cx("px-3 py-2", styles.root, current && styles.rootSelected)}
+            className={cx("px-3 py-2 bg-sidebar", !current && "hover:bg-sidebar-hover", styles.root, current && styles.rootSelected)}
             onClick={onClick}
             aria-current={current ? "page" : undefined}
         >
diff --git a/src/components/base/avatar/avatar-label-group.tsx b/src/components/base/avatar/avatar-label-group.tsx
index f9792e7..954a862 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("text-primary", styles[props.size].title)}>{title}</p>
-                <p className={cx("truncate text-tertiary", styles[props.size].subtitle)}>{subtitle}</p>
+                <p className={cx("text-white", styles[props.size].title)}>{title}</p>
+                <p className={cx("truncate text-white opacity-70", styles[props.size].subtitle)}>{subtitle}</p>
             </figcaption>
         </figure>
     );
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 82f5be0..4800c46 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -153,7 +153,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
         <aside
             style={{ "--width": `${width}px` } as React.CSSProperties}
             className={cx(
-                "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",
+                "flex h-full w-full max-w-full flex-col justify-between overflow-auto bg-sidebar pt-4 shadow-xs transition-all duration-200 ease-linear lg:w-(--width) 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 text-primary">Helix Engage</span>
-                        <span className="text-xs text-tertiary">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
+                        <span className="text-md font-bold text-white">Helix Engage</span>
+                        <span className="text-xs text-white opacity-70">Global Hospital &middot; {getRoleSubtitle(user.role)}</span>
                     </div>
                 )}
                 <button
@@ -180,7 +180,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                 {navSections.map((group) => (
                     <li key={group.label}>
                         {!collapsed && (
-                            <div className="px-5 pb-1">
+                            <div className="px-5 pb-1 bg-sidebar">
                                 <p className="text-xs font-bold text-quaternary uppercase">{group.label}</p>
                             </div>
                         )}
@@ -191,11 +191,19 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                                         <Link
                                             to={item.href ?? '/'}
                                             title={item.label}
+                                            style={
+                                                item.href !== activeUrl
+                                                    ? {
+                                                          "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)",
+                                                          "--hover-text": "var(--color-sidebar-nav-item-hover-text)",
+                                                      } 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-primary_hover hover:text-fg-secondary",
+                                                    : "text-fg-quaternary hover:bg-(--hover-bg) hover:text-(--hover-text)",
                                             )}
                                         >
                                             {item.icon && <item.icon className="size-5" />}
@@ -224,7 +232,8 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
                     <button
                         onClick={handleSignOut}
                         title={`${user.name}\nSign out`}
-                        className="rounded-lg p-1 hover:bg-primary_hover transition duration-100 ease-linear"
+                        style={{ "--hover-bg": "var(--color-sidebar-nav-item-hover-bg)" } as React.CSSProperties}
+                        className="rounded-lg p-1 hover:bg-(--hover-bg) transition duration-100 ease-linear"
                     >
                         <Avatar size="sm" initials={user.initials} status="online" />
                     </button>
@@ -249,9 +258,9 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
     return (
         <>
             <MobileNavigationHeader>{content}</MobileNavigationHeader>
-            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:py-1 lg:pl-1">{content}</div>
+            <div className="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:flex">{content}</div>
             <div
-                style={{ paddingLeft: width + 4 }}
+                style={{ paddingLeft: width }}
                 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/styles/globals.css b/src/styles/globals.css
index 749bd7d..133dee4 100755
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -29,6 +29,26 @@
     transition-timing-function: inherit;
 }
 
+@utility bg-sidebar {
+    background-color: var(--color-sidebar-bg);
+}
+
+@utility bg-sidebar-active {
+    background-color: var(--color-sidebar-nav-item-active-bg);
+}
+
+@utility bg-sidebar-hover {
+    background-color: var(--color-sidebar-nav-item-hover-bg);
+}
+
+@utility text-sidebar-active {
+    color: var(--color-sidebar-nav-item-active-text);
+}
+
+@utility text-sidebar-hover {
+    color: var(--color-sidebar-nav-item-hover-text);
+}
+
 /* FontAwesome duotone — icons inherit color from parent via currentColor.
    Secondary layer opacity controls the duotone effect. */
 :root {
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 9cf83fb..84f7996 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -761,6 +761,13 @@
     --color-bg-brand-section: var(--color-brand-600);
     --color-bg-brand-section_subtle: var(--color-brand-500);
 
+    /* SIDEBAR-SPECIFIC COLORS (Light Mode Only) */
+    --color-sidebar-bg: rgb(28, 33, 44);
+    --color-sidebar-nav-item-hover-bg: rgb(42, 48, 60);
+    --color-sidebar-nav-item-hover-text: rgb(73, 160, 225);
+    --color-sidebar-nav-item-active-bg: rgb(42, 48, 60);
+    --color-sidebar-nav-item-active-text: rgb(73, 160, 225);
+
     /* COMPONENT COLORS */
     --color-app-store-badge-border: rgb(166 166 166);
     --color-avatar-bg: var(--color-gray-100);