diff --git a/apps/web/src/components/dashboard/WidgetContainer.tsx b/apps/web/src/components/dashboard/WidgetContainer.tsx
index 046aaa7..3e9e09e 100644
--- a/apps/web/src/components/dashboard/WidgetContainer.tsx
+++ b/apps/web/src/components/dashboard/WidgetContainer.tsx
@@ -30,7 +30,7 @@ export function WidgetContainer({
       className={`flex flex-col h-full rounded-xl border overflow-hidden transition-all duration-200 ${
         isDragging
           ? "shadow-xl border-brand-400 dark:border-brand-500 scale-[1.01] ring-2 ring-brand-400/30"
-          : "border-gray-200/80 bg-[linear-gradient(180deg,rgba(250,250,251,0.95),rgba(255,255,255,0.98))] shadow-sm hover:shadow-md hover:border-gray-300 dark:border-gray-700/60 dark:bg-[linear-gradient(180deg,rgba(22,23,26,0.97),rgba(16,17,19,0.95))] dark:hover:border-gray-600"
+          : "border-gray-200/80 bg-[linear-gradient(180deg,rgba(250,250,251,0.95),rgba(255,255,255,0.98))] shadow-sm hover:shadow-md hover:border-gray-300 dark:border-gray-700/60 dark:bg-[linear-gradient(180deg,rgb(var(--surface-elevated)/0.97),rgb(var(--surface-card)/0.95))] dark:hover:border-gray-600"
       }`}
     >
       <div className="flex items-start justify-between gap-3 px-4 pt-3.5 pb-3 shrink-0 widget-drag-handle group">