diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
index 22003691..ed5612f4 100644
--- a/frontend/src/components/details/PieChartComponent.jsx
+++ b/frontend/src/components/details/PieChartComponent.jsx
@@ -31,13 +31,13 @@ const PieChartComponent = () => {
         labels: labels,
         // TODO: do the materials stay the same? otherwise doesn't make sense to use fixed color / hardcode them
         colors: [
-            '#e2d000',
+            '#F6E600',
             theme.color.Steel,
             theme.color.Pressboard,
             theme.color.StainlessSteel,
             theme.color.Alminium,
             '#0084E1',
-            theme.color.Copper
+            '#f28e30'
         ],
         responsive: [
             {
diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
index de1442c6..951d1bed 100644
--- a/frontend/src/components/details/TableComponent.jsx
+++ b/frontend/src/components/details/TableComponent.jsx
@@ -86,7 +86,7 @@ class TableComponent extends Component {
 
                 <table className='w3-table-all w3-card-4 w3-small w3-center'>
                     <thead>
-                        <tr key={'FirstRow'} style={{ backgroundColor: '#11c26b' }}>
+                        <tr key={'FirstRow'} style={{ backgroundColor: '#009B55' }}>
                             {this.state.headers.map((item) => (
                                 <th key={idKey + 'thead' + item.key}>{item.value}</th>
                             ))}