diff --git a/config/.env b/config/.env
index dbe126e0a..fc5b2fd79 100644
--- a/config/.env
+++ b/config/.env
@@ -1,2 +1,2 @@
 PORT = 2121
-DB_STRING = mongodb+srv://demo:demo@cluster0.hcds1.mongodb.net/todos?retryWrites=true&w=majority
\ No newline at end of file
+DB_STRING = mongodb+srv://Devknight:Testing@cluster0.k84utii.mongodb.net/?retryWrites=true&w=majority
\ No newline at end of file
diff --git a/controllers/todos.js b/controllers/todos.js
index b10950f93..f1d6a6f49 100644
--- a/controllers/todos.js
+++ b/controllers/todos.js
@@ -13,7 +13,7 @@ module.exports = {
     },
     createTodo: async (req, res)=>{
         try{
-            await Todo.create({todo: req.body.todoItem, completed: false, userId: req.user.id})
+            await Todo.create({todo: req.body.todoItem, completed: false, priority: req.body.todoPriority, userId: req.user.id})
             console.log('Todo has been added!')
             res.redirect('/todos')
         }catch(err){
@@ -51,5 +51,21 @@ module.exports = {
         }catch(err){
             console.log(err)
         }
-    }
+    },
+    
+    updateTodo: async (req, res)=>{
+        console.log(req.body.taskID)
+        
+         try{
+            await Todo.findOneAndUpdate({_id:req.body.taskID},{
+                todo: req.body.todoTaskEdit,
+                priority: req.body.todoPriorityEdit,
+            })
+            console.log("updated to information")
+            res.redirect('/todos')
+         }catch(err){
+             console.log(err)
+         }
+    },
+
 }    
\ No newline at end of file
diff --git a/models/Todo.js b/models/Todo.js
index 8698f6900..b1f6ca19e 100644
--- a/models/Todo.js
+++ b/models/Todo.js
@@ -12,7 +12,12 @@ const TodoSchema = new mongoose.Schema({
   userId: {
     type: String,
     required: true
+  },
+  priority: {
+    type: Number,
+    required: true
   }
 })
 
+
 module.exports = mongoose.model('Todo', TodoSchema)
diff --git a/public/css/style.css b/public/css/style.css
index fbd6b929e..954a562f7 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -7,4 +7,38 @@ h1{
 }
 .not{
     text-decoration: underline;
-}
\ No newline at end of file
+}
+
+.delete:hover{
+    background-color: red;
+    font-weight: bold;
+    cursor: pointer;
+    border: 3px solid black;
+}
+
+.urgent{
+    background-color: red;
+    font-weight: bold;
+}
+.urgent:hover{
+    background-color: pink;
+    font-weight: bold;
+}
+
+.high{
+    background-color: yellow;
+    font-weight: bold;
+}
+.normal{
+    background-color: yellowgreen;
+    font-weight: bold;
+}
+.low{
+    background-color: lightblue;
+    font-weight: bold;
+}
+.backlog{
+    background-color: grey;
+    font-weight: bold;
+
+}
diff --git a/public/js/main.js b/public/js/main.js
index b4cfee075..a5f3a9e2c 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,9 +1,11 @@
 const deleteBtn = document.querySelectorAll('.del')
 const todoItem = document.querySelectorAll('span.not')
 const todoComplete = document.querySelectorAll('span.completed')
+// const submitbtns = document.querySelectorAll('#submit')
 
 Array.from(deleteBtn).forEach((el)=>{
     el.addEventListener('click', deleteTodo)
+    el.classList.add('delete')
 })
 
 Array.from(todoItem).forEach((el)=>{
@@ -14,6 +16,12 @@ Array.from(todoComplete).forEach((el)=>{
     el.addEventListener('click', markIncomplete)
 })
 
+// Array.from(submitbtns).forEach((el)=>{
+//     el.addEventListener('click', update)
+// })
+
+
+
 async function deleteTodo(){
     const todoId = this.parentNode.dataset.id
     try{
@@ -66,4 +74,22 @@ async function markIncomplete(){
     }catch(err){
         console.log(err)
     }
-}
\ No newline at end of file
+}
+
+// async function update(){
+//     const todoId = this.parentNode.dataset.id
+//     try{
+//         const response = await fetch('todos/update', {
+//             method: 'put',
+//             headers: {'Content-type': 'application/json'},
+//             body: JSON.stringify({
+//                 'todoOBJ': todoId
+//             })
+//         })
+//         const data = await response.json()
+//         console.log(data)
+//         location.reload()
+//     }catch(err){
+//         console.log(err)
+//     }
+// }
\ No newline at end of file
diff --git a/routes/todos.js b/routes/todos.js
index 03dcf42e4..1f1b045c1 100644
--- a/routes/todos.js
+++ b/routes/todos.js
@@ -13,4 +13,6 @@ router.put('/markIncomplete', todosController.markIncomplete)
 
 router.delete('/deleteTodo', todosController.deleteTodo)
 
+router.post('/updateTodo', todosController.updateTodo)
+
 module.exports = router
\ No newline at end of file
diff --git a/views/todos.ejs b/views/todos.ejs
index d76747a08..058373eb8 100644
--- a/views/todos.ejs
+++ b/views/todos.ejs
@@ -6,27 +6,133 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="css/style.css">
+   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
     <h1>Todos</h1>
-    <ul>
-    <% todos.forEach( el => { %>
-            <li class='todoItem' data-id='<%=el._id%>'>
+    <ul class="list-group">
+    <% todos.forEach( (el) => { %>
+            <li class='todoItem list-group-item' data-id='<%=el._id%>'>
                 <span class='<%= el.completed === true ? 'completed' : 'not'%>'><%= el.todo %></span>
-                <span class='del'> Delete </span>
+               
+                <% switch(el.priority) {
+                    case 1 : %>
+                        <span class="urgent">Urgent</span>
+                        <% break;
+                    case 2 : %>
+                        <span class="high">High</span>
+                        <% break; 
+                    case 3 : %>
+                         <span class="normal">Normal</span>
+                        <% break;
+                    case 4 : %>
+                         <span class="low">Low</span>
+                        <% break; 
+                    case 5 : %>
+                        <span class="backlog">Backlogged</span>
+                        <% break; 
+            } %>
+
+            <!-- Button trigger modal -->
+            <button type="button" class="btn btn-primary edit" data-bs-toggle="modal" data-bs-target="#<%='modal'+ el.id%>">Edit</button>
+    
+
+                    <!-- modal variables to programmatically created modal -->
+                    <!-- modal -->
+                    <div class="modal fade" id="<%='modal'+ el.id%>" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                <h1 class="modal-title fs-5" id="staticBackdropLabel">Update To Do Item</h1>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                </div>
+                                <div class="modal-body">
+                            <form action="/todos/updateTodo" method='POST'>
+                                <input name="taskID" style="display:none" value="<%=el.id%>">
+                                <input type="text" value="<%=el.todo%>" name="todoTaskEdit">          
+                                    <label for="todoPriorityEdit">Priority:</label>
+                                    <select id="todoPriorityEdit" name="todoPriorityEdit">
+                                       
+                                        <% switch(el.priority) {
+                                            case 1 : %>
+                                                <option value=1 selected>Urgent</option>
+                                                <option value=2>High</option>
+                                                <option value=3>Normal</option>
+                                                <option value=4>Low</option>
+                                                <option value=5>Backlog</option>
+                                                <% break;
+                                            case 2 : %>
+                                                <option value=1>Urgent</option>
+                                                <option value=2 selected>High</option>
+                                                <option value=3>Normal</option>
+                                                <option value=4>Low</option>
+                                                <option value=5>Backlog</option>
+                                                <% break; 
+                                            case 3 : %>
+                                                <option value=1>Urgent</option>
+                                                <option value=2>High</option>
+                                                <option value=3 selected>Normal</option>
+                                                <option value=4>Low</option>
+                                                <option value=5>Backlog</option>
+                                                <% break;
+                                            case 4 : %>
+                                                <option value=1>Urgent</option>
+                                                <option value=2>High</option>
+                                                <option value=3>Normal</option>
+                                                <option value=4 selected>Low</option>
+                                                <option value=5>Backlog</option>
+                                                <% break; 
+                                            case 5 : %>
+                                                <option value=1>Urgent</option>
+                                                <option value=2>High</option>
+                                                <option value=3>Normal</option>
+                                                <option value=4>Low</option>
+                                                <option value=5 selected>Backlog</option>
+
+                                                <% break; 
+                                    } %>
+                                    </select>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                                    <button type="submit" id="submit" class="btn btn-primary">Understood</button>
+                                </div>
+                            </form>   <!--end form -->
+                            </div>
+                        </div>
+                    </div>
+                    <!-- end modal -->
+
+
+               <span class='del'> Delete </span>
             </li>
-    <% }) %>    
+    <% }) %>    <!-- end foreach loop -->
     </ul>
 
     <h2><%= user.userName %> has <%= left %> things left to do.</h2>
 
     <form action="/todos/createTodo" method='POST'>
         <input type="text" placeholder="Enter Todo Item" name='todoItem'>
+
+        <label for="todoPriority">Priority:</label>
+            <select id="todoPriority" name="todoPriority">
+                <option value=1>Urgent</option>
+                <option value=2>High</option>
+                <option value=3 selected>Normal</option>
+                <option value=4>Low</option>
+                <option value=5>Backlog</option>
+        </select>
+
         <input type="submit">
     </form>
 
     <a href="/logout">Logout</a>
 
+
+
     <script src="js/main.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+