diff --git a/frontend/src/pages/Dashboard/Chart.js b/frontend/src/pages/Dashboard/Chart.js
index 36085f30..cf314846 100644
--- a/frontend/src/pages/Dashboard/Chart.js
+++ b/frontend/src/pages/Dashboard/Chart.js
@@ -147,11 +147,10 @@ const Chart = () => {
 						type="monotone"
 						dataKey="amount"
 						stroke={theme.palette.primary.main}
-						strokeDasharray="3 4 5 2"
-						strokeWidth={.1}
-						fillOpacity={1}
-						fill="#a0b3f4"
-						activeDot={true}
+						strokeWidth={2}
+						fillOpacity={0.7}
+						fill="#3f51b5"
+						activeDot={{ r: 8 }}
 					/>
 				</AreaChart>
 			</ResponsiveContainer>
diff --git a/frontend/src/pages/Dashboard/TagCloud.js b/frontend/src/pages/Dashboard/TagCloud.js
index 4e9421ce..6e754357 100644
--- a/frontend/src/pages/Dashboard/TagCloud.js
+++ b/frontend/src/pages/Dashboard/TagCloud.js
@@ -38,7 +38,11 @@ const TagCloud = () => {
                         <Chip
                             key={tag.id}
                             label={`${tag.name} (${tag.usageCount})`}
-                            style={{ backgroundColor: tag.color }}
+                            style={{
+                                backgroundColor: tag.color,
+                                borderRadius: "8px",
+                                padding: "6px 12px",
+                            }}
                             className={classes.chip}
                         />
                     ))}
diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index 9d3d478f..68265dab 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -23,13 +23,18 @@ const useStyles = makeStyles(theme => ({
 		overflow: "auto",
 		flexDirection: "column",
 		height: 240,
+		borderRadius: "12px",
+		backgroundColor: "#f9fafc",
 	},
 	customFixedHeightPaper: {
 		padding: theme.spacing(2),
 		display: "flex",
-		overflow: "auto",
+		overflow: "none",
 		flexDirection: "column",
 		height: 120,
+		borderRadius: "12px",
+		backgroundColor: "#f9fafc",
+		boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
 	},
 	customFixedHeightPaperLg: {
 		padding: theme.spacing(2),
@@ -37,6 +42,8 @@ const useStyles = makeStyles(theme => ({
 		overflow: "auto",
 		flexDirection: "column",
 		height: "100%",
+		borderRadius: "12px",
+		backgroundColor: "#f9fafc",
 	},
 }));
 
@@ -63,8 +70,8 @@ const Dashboard = () => {
 		<div>
 			<Container maxWidth="lg" className={classes.container}>
 				<Grid container spacing={3}>
-					<Grid item xs={4}>
-						<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
+					<Grid item xs={12} sm={6} md={4}>
+						<Paper className={classes.customFixedHeightPaper}>
 							<Typography component="h3" variant="h6" color="primary" paragraph>
 								{i18n.t("dashboard.messages.inAttendance.title")}
 							</Typography>
@@ -75,8 +82,8 @@ const Dashboard = () => {
 							</Grid>
 						</Paper>
 					</Grid>
-					<Grid item xs={4}>
-						<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
+					<Grid item xs={12} sm={6} md={4}>
+						<Paper className={classes.customFixedHeightPaper}>
 							<Typography component="h3" variant="h6" color="primary" paragraph>
 								{i18n.t("dashboard.messages.waiting.title")}
 							</Typography>
@@ -87,8 +94,8 @@ const Dashboard = () => {
 							</Grid>
 						</Paper>
 					</Grid>
-					<Grid item xs={4}>
-						<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
+					<Grid item xs={12} sm={6} md={4}>
+						<Paper className={classes.customFixedHeightPaper}>
 							<Typography component="h3" variant="h6" color="primary" paragraph>
 								{i18n.t("dashboard.messages.closed.title")}
 							</Typography>