diff --git a/src/shared/Widget.tsx b/src/shared/Widget.tsx
index 2385f279..c78f703a 100644
--- a/src/shared/Widget.tsx
+++ b/src/shared/Widget.tsx
@@ -1,9 +1,13 @@
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
+import cn from 'classnames'
+
+import { useTheme } from 'src/layout/ThemeContext'
 
 const Widget = (props: { children: React.ReactNode }) => {
+  const { isDarkTheme } = useTheme()
   return (
-    <Card>
+    <Card className={cn('card', { dark: isDarkTheme })}>
       <CardContent>{props.children} </CardContent>
     </Card>
   )
diff --git a/src/shared/shared.css b/src/shared/shared.css
index abbafbc1..f6737499 100644
--- a/src/shared/shared.css
+++ b/src/shared/shared.css
@@ -3,3 +3,8 @@
   padding: 20px;
   margin-bottom: 20px;
 }
+
+.card.dark {
+  background: linear-gradient(145deg, #252525, #141414);
+  border: 1px solid #fff;
+}