diff --git a/package.json b/package.json
index ad4df15..2a73c6c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/Tomas025/PJTProcessoSoftware#readme",
   "dependencies": {
+    "chart.js": "^4.0.1",
     "dotenv": "^16.0.3",
     "ejs": "^3.1.8",
     "express": "^4.18.2",
diff --git a/public/css/style.css b/public/css/style.css
index 86e0dcf..5c0fb81 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -3,16 +3,16 @@
     padding: 0;
     font-family: 'K2D', sans-serif;
 }
-
+ 
 body {
     background-color: #1E1E1E;
     font-family: Arial, Helvetica, sans-serif;
 }
-
+ 
 main {
     margin-left: 5vw;
 }
-
+ 
 #bgModal {
     visibility: hidden;
     position: fixed;
@@ -23,7 +23,11 @@ main {
     z-index: 2;
     display: block;
 }
-
+ 
+#mainModal {
+    width: 25vw;
+}
+ 
 #modalCriarAtividade {
     visibility: hidden;
     width: 70%;
@@ -32,7 +36,48 @@ main {
     border-radius: 10px;
     margin: 17vh auto 0 auto;
 }
+ 
+#categoria {
+    background-color: #B3ADC0;
+    border-radius: 10px;
+    border: 0;
+    padding-left: 7px;
+    margin-bottom: 30px;
+}
+ 
+#descrição, #data, #data2, #hora, #hora2 {
+    background-color: #B3ADC0;
+    border-radius: 10px;
+    border: 0;
+    padding-left: 7px;
+}
+ 
+.data1, .datafim, .inicio, .fim {
+    margin-top: 25px;
+    font-size: 20px;
+}
 
+.inicio, .fim {
+    width: 10vw;
+    height: 30px;
+}
+ 
+.finalizar, .cancelar{
+    width: 7vw !important;
+    height: 40px !important;
+    margin: 20px 10px 0 0;
+    background-color: #9891A7;
+    border-radius: 10px;
+    border: none;
+}
+.lixeira {
+    width: 4vw !important;
+    height: 40px !important;
+    background-color: #9891A7;
+    border-radius: 10px;
+    border: none;
+}
+ 
 #modalVisualizarAtividade {
     visibility: hidden;
     width: 70%;
@@ -41,7 +86,7 @@ main {
     border-radius: 10px;
     margin: 17vh auto 0 auto;
 }
-
+ 
 #headerModal {
     height: 20%;
     display: flex;
@@ -52,34 +97,34 @@ main {
     font-size: 90%;
     color: #00000080;
 }
-
+ 
 #bodyModal {
     display: flex;
     align-items: center;
     justify-content: space-around;
 }
-
+ 
 #bodyModal input {
     width: 100%;
-    height: 50%;
     font-size: 130%;
 }
-
+ 
 #headerModal input {
     width: 50%;
     height: 50%;
     background-color: transparent;
     border: none;
     font-size: 130%;
-    cursor: pointer;
+    cursor: text;
     margin-left: 1vw;
+    margin-top: 3px;
 }
-
+ 
 #headerModal input:focus {
     box-shadow: 0 0 0 0;
     outline: 0;
 }
-
+ 
 #navBar {
     display: flex;
     align-items: center;
@@ -87,12 +132,12 @@ main {
     background-color: #3C3845;
     margin-bottom: 5vh;
 }
-
+ 
 #logo {
     width: 250px;
     height: 65px;
 }
-
+ 
 #openModal {
     width: 250px;
     height: 40px;
@@ -103,16 +148,16 @@ main {
     cursor: pointer;
     margin-left: 5vw;
 }
-
+ 
 #listaDeAtividades::-webkit-scrollbar{
     width: 10px;
 }
-
+ 
 #listaDeAtividades::-webkit-scrollbar-thumb{
     background-color: #706c7a71;
     border-radius: 10px;
 }
-
+ 
 #listaDeAtividades {
     display: flex;
     flex-direction: column;
@@ -122,7 +167,7 @@ main {
     overflow-y: scroll;
     margin: 5vh 0 0 21vw;
 }
-
+ 
 #atividade {
     list-style: none;
     width: 40vw;
@@ -136,7 +181,7 @@ main {
     display: flex;
     align-items: center;
 }
-
+ 
 .circle {
     width: 12px;
     height: 12px;
diff --git a/public/imgs/Lixeira.png b/public/imgs/Lixeira.png
new file mode 100644
index 0000000..85c2f2a
Binary files /dev/null and b/public/imgs/Lixeira.png differ
diff --git a/src/controllers/taskController.js b/src/controllers/taskController.js
index 438dea0..dbed74b 100644
--- a/src/controllers/taskController.js
+++ b/src/controllers/taskController.js
@@ -1,5 +1,87 @@
+const taskModel = require('../models/task');
+
 module.exports = {
     async createTask(req, res){
-        return res.render("main");
+        const { name, category, dateTimeInitial, dateTimeFinal } = req.body;
+
+        try {
+            const task = await taskModel.create({name, category, dateTimeInitial, dateTimeFinal});
+            return res.status(200).json(task);
+            // return res.status(200).render("main");
+        } catch (error) {
+            console.log(error);
+            return res.status(404).json({msg: "Error create task"});
+        }
+    },
+    
+    async index(req, res){
+        try {
+            const tasks = await taskModel.find();
+            return res.status(200).json(tasks);
+            // return res.status(200).render("main");
+        } catch (error) {
+            console.log(error);
+            return res.status(404).json({msg: "Error show tasks"});
+        }
+    },
+    
+    async getTask(req, res){
+        const taskId = req.params.taskId;
+        try {
+            const task = await taskModel.findById({_id: taskId});
+            return res.status(200).json(task);
+            // return res.status(200).render("main");
+        } catch (error) {
+            console.log(error);
+            return res.status(404).json({msg: "error show task"});
+        }
+    }, 
+    
+    async update(req, res){
+        const taskId = req.params.taskId;
+        const { name, category, dateTimeInitial, dateTimeFinal, finished } = req.body;
+        
+        try {
+            const task = await taskModel.updateOne({
+                name: name || undefined,
+                category: category || undefined,
+                dateTimeInitial: dateTimeInitial || undefined,
+                dateTimeFinal: dateTimeFinal || undefined,
+                finished: finished || undefined
+            }).where({_id: taskId});
+            return res.status(200).json(task);
+            // return res.status(200).render("main");
+        } catch (error) {
+            console.log(error);
+            return res.status(404).json({msg: "Update error"});
+        }
+        
+    },
+    
+    async destroy(req, res){
+        const taskId = req.params.taskId;
+        
+        try {
+            const task = await taskModel.deleteOne({_id: taskId});
+            return res.status(200).json(task);
+            // return res.status(200).render("main");
+        } catch (error) {
+            console.log(error);
+            return res.status(404).json({msg: "Delete error"});
+        }
+    }, 
+
+    async finishTask(req, res){
+        const taskId = req.params.taskId;
+        const {finished} = req.body;
+        
+        try {
+            const task = await taskModel.updateOne({finished: !finished}).where({_id: taskId});
+            return res.status(200).json(task);
+            // return res.status(200).render("main");
+        } catch (error) {
+            console.log(error);
+            return res.status(404).json({msg: "error when finishing task"});
+        }
     }
 }
\ No newline at end of file
diff --git a/src/db/connection.js b/src/db/connection.js
new file mode 100644
index 0000000..7bac8e1
--- /dev/null
+++ b/src/db/connection.js
@@ -0,0 +1,7 @@
+const mongoose = require('mongoose');
+
+async function connetiodb(){
+    await mongoose.connect('mongodb+srv://gabriel:gbr81828182@cluster0.spv2phu.mongodb.net/test');
+}
+
+module.exports = connetiodb;
\ No newline at end of file
diff --git a/src/models/.gitkeep b/src/models/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/models/task.js b/src/models/task.js
new file mode 100644
index 0000000..01ea9e9
--- /dev/null
+++ b/src/models/task.js
@@ -0,0 +1,17 @@
+const mongoose = require('mongoose');
+
+const Schema = mongoose.Schema;
+const ObjectId = Schema.ObjectId;
+
+const taskSchema = new Schema({
+  id: ObjectId,
+  name: String,
+  category: String,
+  dateTimeInitial: String,
+  dateTimeFinal: String,
+  finished: {type: Boolean, default: false}
+});
+
+const taskModel = mongoose.model('tasks', taskSchema);
+
+module.exports = taskModel;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 127f78e..7e3db5d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,6 +2,11 @@ const router = require("express").Router();
 
 const taskController = require('./controllers/taskController');
 
-router.get('/', taskController.createTask);
+router.post('/createtask', taskController.createTask);
+router.get('/alltask', taskController.index);
+router.get('/gettask/:taskId', taskController.getTask);
+router.post('/updatetask/:taskId', taskController.update);
+router.get('/deletetask/:taskId', taskController.destroy);
+router.post('/finishtask/:taskId', taskController.finishTask);
 
 module.exports = router;
\ No newline at end of file
diff --git a/src/server.js b/src/server.js
index 5a8a596..948089a 100644
--- a/src/server.js
+++ b/src/server.js
@@ -1,8 +1,10 @@
 const express = require("express");
 const routes = require('./router');
 const path = require('path');
+const connetiodb = require('./db/connection');
 
 const app = express();
+connetiodb();
 
 app.use(express.json());
 app.use(express.urlencoded({extended: false}));
diff --git a/views/home/home.ejs b/views/home/home.ejs
index e472f48..798badf 100644
--- a/views/home/home.ejs
+++ b/views/home/home.ejs
@@ -1,62 +1,104 @@
 <!-- MODAIS -->
 <div id="bgModal">
-    <div id="modalCriarAtividade">
+    <form id="modalCriarAtividade" action="/createtask" method="post">
         <div id="headerModal">
             <h1>Título: </h1>
             <input type="text" name="titulo" id="titulo" placeholder="Ex.: Atividade 1">
         </div>
         <div id="bodyModal">
             <div id="mainModal">
-                <h2>Categoria: </h2>
+                <h2 class="categoria">Categoria: </h2>
                 <input type="text" name="categoria" id="categoria">
-                
-                <h2>Descrição </h2>
-                <input type="text" name="descrição" id="descrição">
+               
+                <h2 class="descrição">Descrição </h2>
+                <textarea form="modalCriarAtividade" id="descrição" name="descrição" rows="5" cols="43"></textarea>
             </div>
             <div id="mainModal">
-                <h2>Data de início: </h2>
+                <h2 class="data1">Data de início: </h2>
                 <input type="date" name="data" id="data">
-
-                <h2>Data de fim: </h2>
+ 
+                <h2 class="datafim">Data de fim: </h2>
                 <input type="date" name="data2" id="data2">
+ 
+                <div style="display: flex;">
+                    <div style="margin: 0 5vw 20px 0;">                        
+                        <h2 class="inicio">Início:</h2>
+                        <input type="time" name="hora" id="hora">
+                    </div>
+                    <div>
+                        <h2 class="fim">Fim:</h2>
+                        <input type="time" name="hora2" id="hora2">
+                    </div>
+                </div>
 
-                <div>
-                    <h2>Início:</h2>
-                    <input type="time" name="time" id="time">
-                    
-                    <h2>Fim:</h2>
-                    <input type="time" name="time2" id="time2">
+                <div style="display: flex; justify-content: space-around;">
+                    <input type="submit" value="Finalizar" name="finalizar-criação" class="finalizar" />
+                    <input type="reset" value="Cancelar" name="cancelar-criação" class="cancelar" onclick="closeModal()" />
                 </div>
+            </div>
+        </div>
+    </form>
+</div>
 
-                <div>
-                    <button>Finalizar</button>
-                    <button onclick="closeModal()">Cancelar</button>
-                    <button>lixeira</button>
+<div id="bgModal">
+    <form id="modalEditarAtividade" action="javascript: editar();">
+        <div id="headerModal">
+            <h1>Título: </h1>
+            <input type="text" name="titulo" id="titulo" placeholder="Ex.: Atividade 1">
+        </div>
+        <div id="bodyModal">
+            <div id="mainModal">
+                <h2 class="categoria">Categoria: </h2>
+                <input type="text" name="categoria" id="categoria">
+               
+                <h2 class="descrição">Descrição </h2>
+                <textarea form="modalCriarAtividade" id="descrição" name="descrição" rows="5" cols="43"></textarea>
+            </div>
+            <div id="mainModal">
+                <h2 class="data1">Data de início: </h2>
+                <input type="date" name="data" id="data">
+ 
+                <h2 class="datafim">Data de fim: </h2>
+                <input type="date" name="data2" id="data2">
+ 
+                <div style="display: flex;">
+                    <div style="margin: 0 5vw 20px 0;">                        
+                        <h2 class="inicio">Início: </h2>
+                        <input type="time" name="hora" id="hora">
+                    </div>
+                    <div>
+                        <h2 class="fim">Fim: </h2>
+                        <input type="time" name="hora2" id="hora2">
+                    </div>
                 </div>
+ 
+                <input type="submit" value="Finalizar" name="finalizar-criação" class="finalizar" />
+                <input type="reset" value="Cancelar" name="cancelar-criação" class="cancelar" onclick="closeModal()" />
+                <button class="lixeira" onclick="closeModal()"><i class="bi bi-trash3"></i></button>
             </div>
         </div>
-    </div>
+    </form>
 </div>
 
 <div id="bgModal">
     <div id="modalVisualizarAtividade">
         <span onclick="closeModal()">&times;</span>
-        <p>apoi tome3</p> 
+        <p>apoi tome3</p>
     </div>
 </div>
 
 <div id="bgModal">
     <div id="modalEditarAtividade">
         <span onclick="closeModal()">&times;</span>
-        <p>apoi tome4</p> 
+        <p>apoi tome4</p>
     </div>
 </div>
-
+ 
 <main>
     <button id="openModal" onclick="openModal()">+ Adicionar atividade</button>
-
+ 
     <ul id="listaDeAtividades">
-        <li id="atividade" onclick="openModalActivity()"><div class="circle"></div>PAIA</li>
+        <li id="atividade" onclick="openModalActivity()"><div><div class="circle"></div>PAIA<span style="justify-self: flex-end;" onclick="openModalEdit()">&hellip;</span></li>
         <li id="atividade" onclick="openModalActivity()"><div class="circle"></div>PAIA</li>
         <li id="atividade" onclick="openModalActivity()"><div class="circle"></div>PAIA</li>
         <li id="atividade" onclick="openModalActivity()"><div class="circle"></div>PAIA</li>
@@ -78,4 +120,6 @@
         <li id="atividade" onclick="openModalActivity()"><div class="circle"></div>PAIA</li>
         <li id="atividade" onclick="openModalActivity()"><div class="circle"></div>PAIA</li>
     </ul>
+
+    <canvas class="line-chart"></canvas>
 </main>
\ No newline at end of file
diff --git a/views/main.ejs b/views/main.ejs
index 82460a7..b8087df 100644
--- a/views/main.ejs
+++ b/views/main.ejs
@@ -7,6 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=K2D:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
     <link rel="stylesheet" href="/css/style.css">
     <title>Processo de software</title>
 </head>
@@ -18,14 +19,43 @@
 </body>
 
 <script>
+    var ctx = document.getElementsByClassName("line-chart");
+    var chartGraph = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
+            datasets: [{
+                label: 'Atividades',
+                data: [12, 19, 3, 5, 2, 3, 1],
+                borderWhidth: 6,
+                borderColor: '#FF0000',
+                backgroundColor: 'transparent',
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+
     function openModal() {
         document.getElementById('bgModal').style.visibility = 'visible';
         document.getElementById('modalCriarAtividade').style.visibility = 'visible';
     }
+
     function openModalActivity() {
         document.getElementById('bgModal').style.visibility = 'visible';
         document.getElementById('modalVisualizarAtividade').style.visibility = 'visible';
     }
+    
+    function openModalEdit() {
+        document.getElementById('bgModal').style.visibility = 'visible';
+        document.getElementById('modalEditarAtividade').style.visibility = 'visible';
+    }
+
     function closeModal() {
         document.getElementById('bgModal').style.visibility = 'hidden';
         document.getElementById('modalCriarAtividade').style.visibility = 'hidden';