diff --git a/src/components/Input/DateInput.stories.js b/src/components/Input/DateInput.stories.js
index 9042024b6..0819fe2c3 100644
--- a/src/components/Input/DateInput.stories.js
+++ b/src/components/Input/DateInput.stories.js
@@ -151,7 +151,7 @@ export const CalendarCustomDay = (args) => (
           'text-danger': !day.future,
           'text-muted': !day.sameMonth,
           'text-white bg-primary': day.date.getDate() === 24,
-          'bg-info': day.date.getDate() === 28,
+          'bg-info-subtle': day.date.getDate() === 28,
         });
         return (
           <td className={className}>
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index d30847c34..ca3455b0e 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -165,7 +165,7 @@ function List<T extends Item>({
   return (
     <ListGroup flush={flush} tag="div" {...props}>
       {showHeader && (
-        <ListGroupItem tag="header" className="d-flex align-items-center bg-secondary js-header">
+        <ListGroupItem tag="header" className="d-flex align-items-center js-header">
           {select && select !== 'radio' && (
             <div className="h-100 d-flex align-items-center me-3">
               <Input
diff --git a/src/components/Note/NoteHeader.tsx b/src/components/Note/NoteHeader.tsx
index db53648fa..208ad758c 100644
--- a/src/components/Note/NoteHeader.tsx
+++ b/src/components/Note/NoteHeader.tsx
@@ -37,7 +37,7 @@ const NoteHeader: FC<NoteHeaderProps> = ({ dateFormat = defaultProps.dateFormat,
     'justify-content-between',
     'py-2',
     'pe-2',
-    'bg-info'
+    'bg-info-subtle'
   );
 
   const anyDataExisting = date || from || title;
diff --git a/src/tooling/colors.js b/src/tooling/colors.js
index 72842ace0..a878e8d9f 100644
--- a/src/tooling/colors.js
+++ b/src/tooling/colors.js
@@ -8,6 +8,7 @@ export const colors = [
   'ai',
   'light',
   'dark',
+  'white',
 ];
 export const buttonColors = [...colors, 'link'];
 export const bgColors = [...colors, 'transparent'];