diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
index 5cd5a0440b..227124b0ee 100644
--- a/src/components/AggregationPanel/AggregationPanel.js
+++ b/src/components/AggregationPanel/AggregationPanel.js
@@ -47,7 +47,7 @@ const AggregationPanel = ({
       ) : shouldShowAggregatedData ? (
         data.panel.segments.map((segment, index) => (
           <div key={index}>
-            <h2 className={styles.heading}>{segment.title}</h2>
+            <h2 className={styles.heading} style={{'--fontColor': segment.titleFontColor || undefined, '--backgroundColor': segment.titleBackgroundColor || undefined }}>{segment.title}</h2>
             <div className={styles.segmentItems}>
               {segment.items.map((item, idx) => {
                 switch (item.type) {
diff --git a/src/components/AggregationPanel/AggregationPanel.scss b/src/components/AggregationPanel/AggregationPanel.scss
index 2bfda14147..cab0069342 100644
--- a/src/components/AggregationPanel/AggregationPanel.scss
+++ b/src/components/AggregationPanel/AggregationPanel.scss
@@ -5,8 +5,8 @@
     margin-top: 0;
     padding: 8px;
     padding-left: 10px;
-    background-color: $blue;
-    color: $white;
+    background-color: var(--backgroundColor, $blue);  
+    color: var(--fontColor, $white);                
 }
 
 .segmentItems {
@@ -24,6 +24,8 @@
     font-size: 14px;
     display: flex;
     gap: 10px;
+    background-color: var(--backgroundColor, inherit); 
+    color: var(--fontColor, inherit);     
 }
 
 .video {
@@ -66,10 +68,10 @@
     text-overflow: ellipsis;
     cursor: pointer;
     margin-bottom: 15px;
-    background-color: $blue;
+    background-color:var(--backgroundColor, $blue);  
     padding: 3px 13px;
     border: none;
-    color: $white;
+    color:var(--fontColor, $white);    
     line-height: 28px;
     outline: 0;
     text-decoration: none;
@@ -78,7 +80,7 @@
     font-size: 14px;
     &:hover,
     &:focus {
-        background-color: $darkBlue;
+        background-color: var(--onhoverBackgroundColor, $blue); 
     }
 }
 
diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
index 2f876c17d0..ef9b611a29 100644
--- a/src/components/AggregationPanel/AggregationPanelComponents.js
+++ b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -10,7 +10,7 @@ export const TextElement = ({ text }) => (
 
 // Key-Value Element Component
 export const KeyValueElement = ({ item }) => (
-  <div className={styles.keyValue}>
+  <div className={styles.keyValue} style={{'--fontColor': item.fontColor || undefined, '--backgroundColor': item.backgroundColor || undefined }}>
     {item.key}:
     {item.url ? <a href={item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
   </div>
@@ -89,7 +89,7 @@ export const ButtonElement = ({ item, showNote }) => {
 
   return (
     <div className={styles.buttonContainer}>
-      <button onClick={handleClick} className={styles.button}>
+      <button onClick={handleClick} className={styles.button} style={{'--fontColor': item.fontColor || undefined, '--backgroundColor': item.backgroundColor || undefined , '--onhoverBackgroundColor' : item.onhoverBackgroundColor || undefined}}>
         {item.text}
       </button>
     </div>