diff --git a/src/components/Home/Task.jsx b/src/components/Home/Task.jsx
index 1ef5073..27af129 100644
--- a/src/components/Home/Task.jsx
+++ b/src/components/Home/Task.jsx
@@ -35,7 +35,14 @@ const Task = ({
       />
       <ListItemText
         primary={
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: ['column', 'row'],
+              alignItems: ['baseline', 'center'],
+              gap: '0.5rem',
+            }}
+          >
             {task.name}
             {task.due != undefined ? (
               <Chip
diff --git a/src/utils/theme.js b/src/utils/theme.js
index 8b2cb6a..356c95c 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -17,4 +17,13 @@ export const theme = createTheme({
   typography: {
     fontFamily: 'Roboto, sans-serif',
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
 })