frontend/src/index.css

@@ -201,6 +201,24 @@
   border-color: rgba(34, 197, 94, 0.4);
 }
 
+.expense-history-item {
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(229, 231, 235);
+}
+
+[data-theme="dark"] .expense-history-item {
+  background-color: rgba(55, 55, 55, 0.6);
+  border-color: rgba(75, 75, 75, 0.8);
+}
+
+.expense-description {
+  background-color: rgb(249, 250, 251);
+}
+
+[data-theme="dark"] .expense-description {
+  background-color: rgba(40, 40, 40, 0.8);
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-in-out;
 }

frontend/src/pages/FamilyView.tsx

@@ -428,7 +428,7 @@ export default function FamilyView() {
                         {categoryExpenses.map((expense) => (
                           <div
                             key={expense.id}
-                            className="bg-white p-3 rounded-xl shadow-sm border border-gray-200"
+                            className="expense-history-item p-3 rounded-xl shadow-sm border"
                           >
                             <div className="flex justify-between items-start mb-2">
                               <div className="flex items-center gap-2">
@@ -445,7 +445,7 @@ export default function FamilyView() {
                               </div>
                             </div>
                             {expense.description && (
-                              <div className="flex items-start gap-2 text-sm text-gray-600 bg-gray-50 p-2 rounded-lg">
+                              <div className="flex items-start gap-2 text-sm text-gray-600 expense-description p-2 rounded-lg">
                                 <MessageSquare className="w-4 h-4 mt-0.5 flex-shrink-0" />
                                 <span>{expense.description}</span>
                               </div>