diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
index bc1f99ed..0e16db6b 100644
--- a/frontend/src/components/details/PieChartComponent.jsx
+++ b/frontend/src/components/details/PieChartComponent.jsx
@@ -64,7 +64,7 @@ const PieChartComponent = () => {
         },
         responsive: [
             {
-                breakpoint: 2400,
+                breakpoint: 5000,
                 options: {
                     chart: {
                         height: '300px'
diff --git a/frontend/src/components/details/SelectVariableComponent.jsx b/frontend/src/components/details/SelectVariableComponent.jsx
index c6088232..495df647 100644
--- a/frontend/src/components/details/SelectVariableComponent.jsx
+++ b/frontend/src/components/details/SelectVariableComponent.jsx
@@ -48,13 +48,13 @@ class SelectVariableComponent extends Component {
         */
 
         return (
-            <div className='w3-row w3-margin-top'>
+            <div className='w3-row'>
                 <div className='w3-col l6 m6 s3'>
                     <h4 className='TextContent'>Select your desire variable:</h4>
                 </div>
                 <div className='w3-col l6 m6 s8 w3-left'>
-                    <div className='w3-dropdown-hover w3-margin-left w3-margin-right'>
-                        <button className='w3-button w3-2018-sailor-blue'>
+                    <div className='w3-dropdown-hover w3-margin-left w3-margin-right w3-margin-top w3-margin-bottom'>
+                        <button className='w3-button' style={{backgroundColor:'#468c46'}}>
                             <div className='ButtonTitle'>{this.state.selectedVariable}</div>
                         </button>
                         <div className='w3-dropdown-content w3-bar-block w3-border'>
diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
index 2567f394..b9c349f8 100644
--- a/frontend/src/components/details/TableComponent.jsx
+++ b/frontend/src/components/details/TableComponent.jsx
@@ -100,7 +100,7 @@ class TableComponent extends Component {
                     <thead>
                         <tr
                             key={'FirstRow'}
-                            style={{ backgroundColor:'#6aa66a'}}
+                            style={{ backgroundColor:'#88b598'}}
                         >
                             {this.state.headers.map((item) => (
                                 <th key={idKey + 'thead' + item.key}>{item.value}</th>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3f1884ef..041230c6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -277,6 +277,7 @@ body {
     min-width: 360;
     max-width: 450;
     min-height: 400px;
+    margin-top:10px;
 
 }
 
@@ -289,12 +290,12 @@ body {
     cursor: 'pointer';
     min-width: 300;
     max-width: 360;
+    margin-top:10px;
+
 }
 .TableContainer{
-
     background-color: #FFFFFF;
     /* border:0.5px solid #00b300; */
-    border-color: #00b300;
     border-radius: 4px;
     cursor: 'pointer';
     /* min-width: 500px;
@@ -313,9 +314,6 @@ body {
     background-color: #FFFFFF;
 
 }
-
-
-
 .Separator {
     border-left: '1px';
     /* margin-left: 40;