diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
new file mode 100644
index 0000000..7d6b2d5
--- /dev/null
+++ b/src/components/Cards/TaskCard.js
@@ -0,0 +1,24 @@
+"use client";
+//MUI
+import Card from '@mui/material/Card';
+import TextField from '@mui/material/TextField';
+import Radio from '@mui/material/Radio';
+
+//React
+import React from 'react';
+
+export default function TaskCard() {
+
+    return (
+        <>
+            <div style={{ justifyContent: 'center', display: 'flex' }}>
+                <Card sx={{ width: '50%', borderRadius: '0px' }}>
+                    <div style={{ justifyContent: 'left', display: 'flex', alignItems:'center' }}>
+                        <Radio size='small' />
+                        <TextField placeholder='Title' variant='standard' sx={{ width: '100%' }} InputProps={{ disableUnderline: 'true' }} />
+                    </div>
+                </Card>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/components/Cards/TaskHeaderCard.js b/src/components/Cards/TaskHeaderCard.js
new file mode 100644
index 0000000..61daa02
--- /dev/null
+++ b/src/components/Cards/TaskHeaderCard.js
@@ -0,0 +1,47 @@
+"use client";
+// MUI
+import Box from '@mui/material/Box';
+import AddTaskIcon from '@mui/icons-material/AddTask';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import MoreVertOutlined from '@mui/icons-material/MoreVertOutlined';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
+// React
+import React from 'react';
+
+export default function TaskHeaderCard() {
+    return (
+        <>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Card sx={{ width: '50%', borderTopRightRadius: '20px', borderTopLeftRadius: '20px' }}>
+                    <div style={{ display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'left' }}>
+                        <Typography variant='h4' sx={{ marginLeft: '2%' }}>
+                            My Tasks
+                        </Typography>
+
+                        <IconButton style={{ marginLeft: 'auto', marginRight: '2%', top: '3px', position: 'relative' }}>
+                            <Tooltip title='More options' arrow>
+                                <MoreVertOutlined />
+                            </Tooltip>
+                        </IconButton>
+                    </div>
+
+                    <CardActions sx={{ width: '100%' }}>
+                        <Button sx={{ textTransform: 'inherit', width: '100%', justifyContent: 'left', borderRadius: '20px', }}>
+                            <AddTaskIcon color='blue' />
+                            <Box width={'25px'} />
+                            <Typography>
+                                Add a task
+                            </Typography>
+                        </Button>
+                    </CardActions>
+
+                </Card>
+            </div>
+        </>
+    );
+}
\ No newline at end of file