diff --git a/controllers/attendance.js b/controllers/attendance.js
index b5b18fd910..a6eaf6b25e 100644
--- a/controllers/attendance.js
+++ b/controllers/attendance.js
@@ -11,10 +11,10 @@ const markAttendance = async (req, res) => {
             employeeID: employeeID
         })
 
-        // if (employee) {
-        //     const attendance = new attendanceModel({ employeeID: employeeID })
-        //     attendance.save()
-        // }
+        if (employee) {
+            const attendance = new attendanceModel({ employeeID: employee._id })
+            await attendance.save()
+        }
 
         res.status(200).send(employee)
     } catch (error) {
diff --git a/controllers/employee.js b/controllers/employee.js
index 846ed2d85d..89a38dec07 100644
--- a/controllers/employee.js
+++ b/controllers/employee.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
+const attendanceModel = require('../model/attendance')
 const employeeModel = require('../model/employee')
 
 const saveEmployee = async (req, res) => {
@@ -28,7 +29,30 @@ const getEmployees = async (req, res) => {
     res.status(200).send(employees)
 }
 
+const getPresentEmployees = async (req, res) => {
+    const presentEmployees = await attendanceModel.find()
+        .populate('employeeID')
+        .exec()
+
+    res.status(200).send(presentEmployees)
+}
+
+const updateEmployeeColumn = async (req, res) => {
+    try {
+        const { id, columnId } = req.body
+
+        await employeeModel.findByIdAndUpdate(id, { columnId: columnId })
+
+        res.status(200).send("Successfully updated the column")
+
+    } catch (error) {
+        res.status(400).send(error)
+    }
+}
+
 module.exports = {
     saveEmployee,
-    getEmployees
+    getEmployees,
+    getPresentEmployees,
+    updateEmployeeColumn,
 }
\ No newline at end of file
diff --git a/frontend/.firebase/hosting.YnVpbGQ.cache b/frontend/.firebase/hosting.YnVpbGQ.cache
new file mode 100644
index 0000000000..8a942d989e
--- /dev/null
+++ b/frontend/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,14 @@
+asset-manifest.json,1704346213494,683dda928baf100aa526aa94b41ed91a9a2279c5cd5df10d1d72839fa68e9a11
+favicon.ico,1703916380428,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d
+index.html,1704346213494,0a7af72373355552aec7537a38ebca3941681255f6ab51200dddadaeb2245a62
+logo192.png,1703916385621,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0
+manifest.json,1703916384269,ee04fb47e525c67d8424ffe9b4d8a8a24e434504478afca4e0ca602146836d4c
+robots.txt,1703916387913,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+logo512.png,1703916385770,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e8124379aabccb41d
+static/css/main.df6fdbff.css,1704346213498,5cdf51ab3b1b6834629dd176b078b004cd07590b3e139d6f86bb8654bcfed145
+static/js/787.7f5a1603.chunk.js,1704346213498,d1c56c4ccee8cd01f41593669db64c2db2210dda0addaa9cce2349252ad51e57
+static/css/main.df6fdbff.css.map,1704346213498,49ab3be7a7d9886fcb4b4bfeb7d559b9d37c3d582347bf867f43081bd6bd0328
+static/js/main.3d825961.js.LICENSE.txt,1704346213498,1816694f55f8c926962178d808fa817fab63f3a889e740ddb54d628e529c6df5
+static/js/787.7f5a1603.chunk.js.map,1704346213498,a1da92fe96f176f27e3a7602c0c9ff985ae8b29b3405b8b7c6b66158ebda95b6
+static/js/main.3d825961.js,1704346213498,2a9497b1d92e8555988e3d772d333d07fb9f4248463f9edee8d2591a2cafce38
+static/js/main.3d825961.js.map,1704346213498,e2144b6645cee11c4399a0695b3be952bd2bbc69a2a2213247985e958ffe1d86
diff --git a/frontend/.firebaserc b/frontend/.firebaserc
new file mode 100644
index 0000000000..c4693f832c
--- /dev/null
+++ b/frontend/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "manueltaveras-fiverr"
+  }
+}
diff --git a/frontend/firebase.json b/frontend/firebase.json
new file mode 100644
index 0000000000..340ed5b734
--- /dev/null
+++ b/frontend/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/frontend/src/components/Supervisor.js b/frontend/src/components/Supervisor.js
index e0e5604272..f1205e7bad 100644
--- a/frontend/src/components/Supervisor.js
+++ b/frontend/src/components/Supervisor.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
 import {
     DndContext,
     DragEndEvent,
@@ -15,6 +15,7 @@ import { createPortal } from "react-dom";
 import Container from './Container';
 import PlusIcon from '../icons/PlusIcon';
 import TaskCard from './TaskCard';
+import axios from 'axios';
 
 const defaultCols = [
     {
@@ -100,16 +101,35 @@ const defaultTasks = [
     },
 ];
 
-const Supervisor = ({ employeeDetails }) => {
-    console.log(employeeDetails)
-    const [columns, setColumns] = useState(defaultCols);
-    const updatedTask = [
-        ...defaultTasks,
-        ...employeeDetails
-    ]
-    console.log(updatedTask)
+const GetPresentEmployeesURL = 'http://localhost:8000/employee/getPresentEmployees'
+const UpdateEmployeeColumnURL = 'http://localhost:8000/employee/updateEmployeeColumn'
+
+const Supervisor = () => {
+
+    const [employeeDetails, setEmployeeDetails] = useState([])
     const [tasks, setTasks] = useState(employeeDetails);
 
+    useEffect(() => {
+        axios.get(GetPresentEmployeesURL)
+            .then(response => {
+                const data = response.data
+                const empDetails = data.map((emp) => {
+                    const { employeeID } = emp
+                    return {
+                        ...employeeID,
+                        // columnId: "justComeIn",
+                        id: employeeID._id,
+                        content: employeeID.skills,
+                    }
+                })
+                setTasks(empDetails)
+            })
+            .catch(e => console.log(e))
+    }, [])
+
+
+    const [columns, setColumns] = useState(defaultCols);
+
     const [activeColumn, setActiveColumn] = useState(null);
 
     const [activeTask, setActiveTask] = useState(null);
@@ -169,6 +189,7 @@ const Supervisor = ({ employeeDetails }) => {
     function onDragStart(event) {
         if (event.active.data.current?.type === "Column") {
             setActiveColumn(event.active.data.current.column);
+            console.log(event.active.data.current.column)
             return;
         }
 
@@ -240,7 +261,18 @@ const Supervisor = ({ employeeDetails }) => {
         if (isActiveATask && isOverAColumn) {
             setTasks((tasks) => {
                 const activeIndex = tasks.findIndex((t) => t.id === activeId);
+                console.log(tasks[activeIndex])
+                const { _id } = tasks[activeIndex]
+                
+                const data = {
+                    columnId: overId,
+                    id: _id
+                }
 
+                axios.post(UpdateEmployeeColumnURL, data)
+                    .then((res) => console.log(res.data))
+                    .catch(e => console.log(e))
+                    
                 tasks[activeIndex].columnId = overId;
                 console.log("DROPPING TASK OVER COLUMN", { activeIndex });
                 return arrayMove(tasks, activeIndex, activeIndex);
diff --git a/frontend/src/components/TaskCard.jsx b/frontend/src/components/TaskCard.jsx
index 07694844c3..e75cf5c076 100644
--- a/frontend/src/components/TaskCard.jsx
+++ b/frontend/src/components/TaskCard.jsx
@@ -6,7 +6,7 @@ import { CSS } from "@dnd-kit/utilities";
 const TaskCard = ({ task, deleteTask, updateTask }) => {
     console.log(task)
     const [mouseIsOver, setMouseIsOver] = useState(false);
-    const [editMode, setEditMode] = useState(true);
+    // const [editMode, setEditMode] = useState(true);
     const {
         setNodeRef,
         attributes,
@@ -20,7 +20,7 @@ const TaskCard = ({ task, deleteTask, updateTask }) => {
             type: "Task",
             task,
         },
-        disabled: editMode,
+        // disabled: editMode,
     });
     const style = {
         transition,
@@ -28,7 +28,7 @@ const TaskCard = ({ task, deleteTask, updateTask }) => {
     };
 
     const toggleEditMode = () => {
-        setEditMode((prev) => !prev);
+        // setEditMode((prev) => !prev);
         setMouseIsOver(false);
     };
 
@@ -45,34 +45,34 @@ const TaskCard = ({ task, deleteTask, updateTask }) => {
         );
     }
 
-    if (editMode) {
-        return (
-            <div
-                ref={setNodeRef}
-                style={style}
-                {...attributes}
-                {...listeners}
-                className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
-            >
-                <textarea
-                    className="
-                        h-[90%]
-                        w-full resize-none border-none rounded text-black bg-transparent text-white focus:outline-none
-                    "
-                    value={task.content}
-                    autoFocus
-                    placeholder="Task content here"
-                    onBlur={toggleEditMode}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter" && e.shiftKey) {
-                            toggleEditMode();
-                        }
-                    }}
-                    onChange={(e) => updateTask(task.id, e.target.value)}
-                />
-            </div>
-        );
-    }
+    // if (editMode) {
+    //     return (
+    //         <div
+    //             ref={setNodeRef}
+    //             style={style}
+    //             {...attributes}
+    //             {...listeners}
+    //             className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative"
+    //         >
+    //             <textarea
+    //                 className="
+    //                     h-[90%]
+    //                     w-full resize-none border-none rounded text-black bg-transparent text-white focus:outline-none
+    //                 "
+    //                 value={task.content}
+    //                 autoFocus
+    //                 placeholder="Task content here"
+    //                 onBlur={toggleEditMode}
+    //                 onKeyDown={(e) => {
+    //                     if (e.key === "Enter" && e.shiftKey) {
+    //                         toggleEditMode();
+    //                     }
+    //                 }}
+    //                 onChange={(e) => updateTask(task.id, e.target.value)}
+    //             />
+    //         </div>
+    //     );
+    // }
 
     return (
         <div
diff --git a/model/attendance.js b/model/attendance.js
index fbca160a15..aff7822e43 100644
--- a/model/attendance.js
+++ b/model/attendance.js
@@ -4,8 +4,9 @@ const { Schema, model } = require('mongoose')
 
 const attendanceSchema = new Schema({
     employeeID: {
-        type: String,
-        required: true
+        type: Schema.Types.ObjectId,
+        ref: "employee",
+        // required: true,
     }
 }, { timestamps: true })
 
diff --git a/model/employee.js b/model/employee.js
index daf21241d7..c7fe08b4de 100644
--- a/model/employee.js
+++ b/model/employee.js
@@ -52,6 +52,11 @@ const employeeSchema = new Schema({
     isHere: {
         type: String,
         required: true,
+    },
+    columnId: {
+        type: String,
+        required: true,
+        default: 'justComeIn'
     }
 })
 
diff --git a/package.json b/package.json
index 39823a027f..bd99551f7d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "Cyclic.sh micro api starter",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon index.js"
   },
   "author": "",
   "license": "ISC",
diff --git a/routes/employee.js b/routes/employee.js
index 2362ba19f5..13f3a2c093 100644
--- a/routes/employee.js
+++ b/routes/employee.js
@@ -1,12 +1,14 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
 const { Router } = require('express')
-const { saveEmployee, getEmployees } = require('../controllers/employee')
+const { saveEmployee, getEmployees, getPresentEmployees, updateEmployeeColumn } = require('../controllers/employee')
 
 const router = Router()
 
 router.post('/saveEmployee', saveEmployee)
 router.get('/getEmployees', getEmployees)
+router.get('/getPresentEmployees', getPresentEmployees)
+router.post('/updateEmployeeColumn', updateEmployeeColumn)
 
 
 module.exports = router
\ No newline at end of file