I'm guessing this may start causing us problems either soon or never.

stockingly-frontend/src/components/BalanceSheet.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card color="blue-grey-lighten-4">
     <v-card-item>
       <v-card-title>Balance sheet</v-card-title>
     </v-card-item>

stockingly-frontend/src/components/EmployeesChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card color="blue-grey-lighten-4">
     <v-card-item>
       <v-card-title>Employees over time</v-card-title>
     </v-card-item>

stockingly-frontend/src/components/EpsChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card color="blue-grey-lighten-4">
     <v-card-item>
       <v-card-title>Earnings per Share (EPS)</v-card-title>
     </v-card-item>

stockingly-frontend/src/components/StockPrice.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card color="blue-grey-lighten-4">
     <v-card-item>
       <v-card-title>Stock price over time</v-card-title>
     </v-card-item>
@@ -15,7 +15,7 @@
         </v-btn-toggle>
         <strong class="label">Current price:</strong>
         <div class="chips">
-          <v-chip class="ma-1" v-for="ticker in tickers" :key="ticker" :color="getTickerColor(ticker)" size="large"
+          <v-chip class="ma-1 max-price" v-for="ticker in tickers" :key="ticker" :color="getTickerColor(ticker)" size="large"
             variant="outlined">
             {{ ticker }}: ${{ maxPrice[ticker] }}
           </v-chip>
@@ -35,6 +35,10 @@
   align-items: center;
 }
 
+.max-price {
+  background-color: white !important;
+}
+
 .toolbar .toggles {
   flex: 1 0;
 }