diff --git a/components/dashboard/subscriptions-tab.tsx b/components/dashboard/subscriptions-tab.tsx
index f021f425..24296eb6 100644
--- a/components/dashboard/subscriptions-tab.tsx
+++ b/components/dashboard/subscriptions-tab.tsx
@@ -94,7 +94,7 @@ function SubscriptionInfo({
return (
<>
-
+
{payment.icon}
diff --git a/tests/dashboard/subscriptions-tab.test.tsx b/tests/dashboard/subscriptions-tab.test.tsx
new file mode 100644
index 00000000..37af3776
--- /dev/null
+++ b/tests/dashboard/subscriptions-tab.test.tsx
@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { SubscriptionsTab } from "@/components/dashboard/subscriptions-tab";
+import type { SubscriptionOverviewItem } from "@/lib/finance/subscriptions";
+
+vi.mock("@/lib/i18n", () => ({
+ useI18n: () => ({
+ formatCurrency: (value: number) => `$${value.toFixed(2)}`,
+ formatDate: (value: string | Date) =>
+ value instanceof Date ? value.toISOString().slice(0, 10) : value,
+ t: (key: string) => key,
+ }),
+}));
+
+const subscription: SubscriptionOverviewItem = {
+ amount: 25,
+ categoryKey: "categories.entertainment",
+ frequency: "monthly",
+ icon: "🎬",
+ id: "sub-1",
+ name: "Streaming",
+ nextDate: "2026-10-01",
+ status: "active",
+};
+
+describe("SubscriptionsTab icon background theming", () => {
+ it("uses a theme-aware muted background, not the static accent token", () => {
+ const { container } = render(
+ ,
+ );
+
+ const iconContainer = container.querySelector(".rounded-lg.bg-muted");
+ expect(iconContainer).not.toBeNull();
+ expect(container.querySelector(".rounded-lg.bg-accent")).toBeNull();
+ });
+});