diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index ac05321..e8f0b45 100755
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -17,7 +17,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: '20'
+        node-version: '22'
 
     - name: Install dependencies
       run: npm install
diff --git a/package-lock.json b/package-lock.json
index 419dc0f..0cd0cf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11380,6 +11380,7 @@
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.6.0.tgz",
       "integrity": "sha512-vfZ4GydqbtUPXSLfAvKvXQ6xwRzIjUSjVU0Sx+70VOhc2xx6CdmJXJ8YhH70RpbTUGjxctslQTHul9sIOxCfFQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.24.1",
         "css-box-model": "^1.2.1",
@@ -15063,12 +15064,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -16965,9 +16966,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
diff --git a/package.json b/package.json
index 5d3c242..733c50e 100755
--- a/package.json
+++ b/package.json
@@ -43,4 +43,4 @@
     "eslint-config-next": "^14.1.3",
     "typescript": "^5.3.3"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Cards/TaskCard.js b/src/components/Cards/TaskCard.js
index 7d6b2d5..11f0757 100644
--- a/src/components/Cards/TaskCard.js
+++ b/src/components/Cards/TaskCard.js
@@ -3,20 +3,42 @@
 import Card from '@mui/material/Card';
 import TextField from '@mui/material/TextField';
 import Radio from '@mui/material/Radio';
+import NotesIcon from '@mui/icons-material/Notes';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
 
 //React
 import React from 'react';
 
-export default function TaskCard() {
+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' }}>
+
+                    <div style={{ justifyContent: 'left', display: 'flex', alignItems: 'center' }}>
                         <Radio size='small' />
                         <TextField placeholder='Title' variant='standard' sx={{ width: '100%' }} InputProps={{ disableUnderline: 'true' }} />
                     </div>
+
+                    <div style={{ justifyContent: 'left', display: 'flex', alignItems: 'center' }}>
+                        <NotesIcon sx={{ marginLeft: '1.1%' }} />
+                        <TextField placeholder='Details' variant='standard' sx={{ width: '100%', marginLeft: '1%' }} InputProps={{ disableUnderline: 'true' }} />
+                    </div>
+
+                    <div style={{ justifyContent: 'left', display: 'flex', alignItems: 'center' }}>
+                        <Button sx={{textTransform:'inherit', width:'100%', justifyContent:'left', borderRadius:'20px', color:'gray'}}>
+                            <CalendarMonthIcon sx={{ color: 'gray' }} />
+                            <Typography variant="body1" color="GrayText" sx={{ marginLeft: '1%' }}>
+                                Date/time
+                            </Typography>
+                        </Button>
+                    </div>
                 </Card>
             </div>
         </>