diff --git a/components/ExpenseList.vue b/components/ExpenseList.vue
index 0fbb901..30934a3 100644
--- a/components/ExpenseList.vue
+++ b/components/ExpenseList.vue
@@ -131,13 +131,13 @@
             
             <!-- Date and Time -->
             <div class="date-display">
-              <v-icon size="small" class="mr-1 text-grey-darken-2">mdi-calendar-clock</v-icon>
+              <v-icon size="small" class="mr-1 text-grey-darken-3">mdi-calendar-clock</v-icon>
               {{ formatDateTime(expense.Time) }}
             </div>
             
             <!-- Payer -->
             <div v-if="expense.Payer" class="payer-display">
-              <v-icon size="small" class="mr-1 text-grey-darken-2">mdi-account</v-icon>
+              <v-icon size="small" class="mr-1 text-grey-darken-3">mdi-account</v-icon>
               {{ expense.Payer }}
             </div>
             
@@ -408,7 +408,7 @@ const openReceipt = (receipt: any) => {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), 0.8);
   margin-bottom: 4px;
 }
 
@@ -416,13 +416,13 @@ const openReceipt = (receipt: any) => {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), 0.8);
   margin-bottom: 8px;
 }
 
 .contents-preview {
   font-size: 0.875rem;
-  color: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), 0.7);
   line-height: 1.3;
   overflow: hidden;
   display: -webkit-box;