diff --git a/Areas/OTcalculate/Controllers/HrDashboardController.cs b/Areas/OTcalculate/Controllers/HrDashboardController.cs
index 92160f0..5e515d1 100644
--- a/Areas/OTcalculate/Controllers/HrDashboardController.cs
+++ b/Areas/OTcalculate/Controllers/HrDashboardController.cs
@@ -19,5 +19,10 @@ namespace PSTW_CentralSystem.Areas.OTcalculate.Controllers
         {
             return View();
         }
+
+        public IActionResult Calendar()
+        {
+            return View();
+        }
     }
 }
diff --git a/Areas/OTcalculate/Models/RateModel.cs b/Areas/OTcalculate/Models/RateModel.cs
new file mode 100644
index 0000000..bde8851
--- /dev/null
+++ b/Areas/OTcalculate/Models/RateModel.cs
@@ -0,0 +1,11 @@
+using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations.Schema;
+using PSTW_CentralSystem.Models;
+
+namespace PSTW_CentralSystem.Areas.OTcalculate.Models
+{
+    public class RateModel
+    {
+
+    }
+}
diff --git a/Areas/OTcalculate/Views/HrDashboard/Calendar.cshtml b/Areas/OTcalculate/Views/HrDashboard/Calendar.cshtml
new file mode 100644
index 0000000..c61132d
--- /dev/null
+++ b/Areas/OTcalculate/Views/HrDashboard/Calendar.cshtml
@@ -0,0 +1,12 @@
+@{
+    ViewData["Title"] = "Calendar Update";
+    Layout = "~/Views/Shared/_Layout.cshtml";
+}
+
+<div id="OTregister">
+    <div class="row card">
+        <div class="card-header">
+            <p>Name:</p>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Areas/OTcalculate/Views/HrDashboard/Rate.cshtml b/Areas/OTcalculate/Views/HrDashboard/Rate.cshtml
index 0fc82ea..68cd433 100644
--- a/Areas/OTcalculate/Views/HrDashboard/Rate.cshtml
+++ b/Areas/OTcalculate/Views/HrDashboard/Rate.cshtml
@@ -1,4 +1,329 @@
 @{
-    ViewData["Title"] = "Rate";
+    ViewData["Title"] = "Rate Update";
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
+
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+<div class="col-6 col-md-6 col-lg-3">
+    <div class="card card-hover">
+        <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
+            <div class="box bg-success text-center">
+                <h1 class="font-light text-white">
+                    <i class="mdi mdi-currency-usd"></i>
+                </h1>
+                <h6 class="text-white">Rate</h6>
+            </div>
+        </a>
+    </div>
+</div>
+
+<div class="col-6 col-md-6 col-lg-3">
+    <div class="card card-hover">
+        <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
+            <div class="box bg-purple text-center">
+                <h1 class="font-light text-white">
+                    <i class="mdi mdi-calendar"></i>
+                </h1>
+                <h6 class="text-white">Calendar</h6>
+            </div>
+        </a>
+    </div>
+</div>
+
+        <div class="row">
+            <div id="rateUpdate" class="card m-1">
+                <div class="row" v-if="addSection == true">
+                    <form v-on:submit.prevent="updateRate" data-aos="fade-right">
+                        <div class="container update" data-aos="fade-right">
+                            <div class="row" data-aos="fade-right">
+                                <div class="col-md-12">
+                                    <div class="tab-content" id="myTabContent">
+                                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                                            <div class="card-header" style="background-color: white;">
+                                                <h3 class="rate-heading text-center">UPDATE RATE</h3>
+                                            </div>
+                                            <div class="row update-form card-body">
+                                                <div class="col-md-6">
+
+                                                    @* Enter Rate *@   
+                                                    <div class="form-group row">
+                                                    <label for="rate" class="col-sm-3">Rate</label>
+                                                        <div class="col-sm-9">
+                                                            <input type="number" id="rate" class="form-control" v-model="rate" placeholder="Enter new rate">
+                                                        </div>
+                                                    </div>
+
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="row">
+                                            <div class="col-md-12 col-lg-12">
+                                                <div class="card">
+                                                    <div class="card-body">
+                                                        <div class="col-md-12 col-lg-12">
+                                                            <div>
+                                                                <table class="table table-bordered table-hover table-striped no-wrap align-middle" id="userDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+@section Scripts {
+    @{
+        await Html.RenderPartialAsync("_ValidationScriptsPartial");
+    }
+    <script>
+
+        $(function () {
+            app.mount('#app');
+        });
+
+        const app = Vue.createApp({
+            data() {
+                return {
+                    userList: null,
+                    roleList: null,
+                    selectedModule: null,
+                    selectedRole: [],
+                    userDatatable: null,
+                };
+            },
+            mounted() {
+                this.fetchUsers();
+                this.fetchRoles();
+            },
+            methods: {
+                async fetchUsers() {
+                    fetch('/AdminAPI/GetUserList', {
+                        method: 'POST'
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        this.userList = data.userInfo.length ? data.userInfo : [];
+                        this.$nextTick(() => {
+                            if (this.userDatatable != null) {
+                                this.userDatatable.clear().destroy();
+                            }
+                            this.initiateTable();
+                        });
+                    })
+                    .catch(error => {
+                        console.error('There was a problem with the fetch operation:', error);
+                    });
+                },
+                async fetchRoles() {
+                    fetch('/RoleAPI/GetRoleList', {
+                        method: 'POST'
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        this.roleList = data.length ? data : [];
+                    })
+                    .catch(error => {
+                        console.error('There was a problem with the fetch operation:', error);
+                    });
+                },
+                editUser(user) {
+                    // Check if the user ID exists
+                    if (module.settingId) {
+                        // Redirect the user to the edit user page
+                        window.location.href = 'ModuleSetting/' + module.settingId;
+                    } else {
+                        console.error('Module ID not found');
+                    }
+                },
+                deleteUser(user) {
+                    this.selectedModule = module; // Set selected user
+                    $('#confirm-dialog').modal('show'); // Show the modal
+
+                    // console.log(this.selectedModule);
+                },
+                confirmDelete(user) {
+                    fetch(`/ModuleAPI/DeleteModule/${module.settingId}`, {
+                        method: 'POST'
+                    })
+                        .then(response => {
+                            if (!response.ok) {
+                                throw new Error('Failed to delete module');
+                            }
+                            // Remove the deleted user from the userData array
+                            const index = this.moduleData.findIndex(u => u.settingId === module.settingId);
+                            if (index !== -1) {
+                                alert("Module deleted successfully");
+                                this.moduleData.splice(index, 1);
+                            }
+                            this.hideModal(); // Hide the modal after deletion
+                        })
+                        .catch(error => {
+                            console.error('Failed to delete module with status:', error);
+                        });
+                },
+                hideModal() {
+                    $('#confirm-dialog').modal('hide');
+                },
+                async initiateTable() {
+                    self = this;
+                    this.userDatatable = $('#userDatatable').DataTable({
+                        "data": self.userList,
+                        "columns": [
+                            {
+                                "title": "Email",
+                                "data": "email",
+                            },
+                            {
+                                "title": "Company Name",
+                                "data": "company",
+                            },
+                            {
+                                "title": "Department",
+                                "data": "department",
+                            },
+                            {
+                                "title": "Role",
+                                "data": "role",
+                                "render": function (data, type, row, meta) {
+                                    if (data.length > 0) {
+                                        return data;
+                                    }
+                                    else if(row.company == null && row.department == null) {
+                                        var thisCol = `
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <select class="form-select role-select" data-id="${row.id}" disabled>
+                                                        <option value="" selected disabled>Select Role</option>
+                                                        ${self.roleList && self.roleList.map(role => `<option value="${role.name}">${role.name}</option>`).join('')}
+                                                    </select>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <button type="button" class="btn btn-primary update-btn" data-id="${row.id}" disabled>Update</button>
+                                                </div>
+                                            </div>`
+                                        return thisCol;
+                                    }
+                                    else {
+                                        var thisCol = `
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <select class="form-select role-select" data-id="${row.id}">
+                                                        <option value="" selected disabled>Select Role</option>
+                                                        ${self.roleList && self.roleList.map(role => `<option value="${role.name}">${role.name}</option>`).join('')}
+                                                    </select>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <button type="button" class="btn btn-primary update-btn" data-id="${row.id}">Update</button>
+                                                </div>
+                                            </div>`
+                                        return thisCol;
+                                    }
+                                },
+                            },
+                            {
+                                "title": "Info Status",
+                                "data": "status",
+                                "render": function (data, type, row, meta) {
+                                    return data == 1 ? `Info Complete`: `Info Incomplete`;
+                                },
+                                "createdCell": function (td, cellData, rowData, row, col) {
+                                    // Add text-danger or text-success class to the <td>
+                                    if (cellData == 1) {
+                                        $(td).addClass('text-success');
+                                    } else {
+                                        $(td).addClass('text-danger');
+                                    }
+                                },
+                            },
+                            {
+                                "title": "User Details",
+                                "data": "id",
+                                "render": function (data, type, row, meta) {
+                                    if (!row.role.includes("SuperAdmin") && !row.role.includes("SystemAdmin")) {
+                                        var detailsButton = `<button type="button" class="btn btn-danger details-btn" data-id="${data}">Details</button>`;
+                                        return detailsButton;
+                                    } else {
+                                        return ""; // Return empty string if role is "SuperAdmin" or "SystemAdmin"
+                                    }
+                                },
+                            },
+                            {
+                                "title": "Delete",
+                                "data": "id",
+                                "render": function (data, type, row, meta) {
+                                    if (!row.role.includes("SuperAdmin") && !row.role.includes("SystemAdmin")) {
+                                        var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
+                                        return deleteButton;
+                                    } else {
+                                        return ""; // Return empty string if role is "SuperAdmin" or "SystemAdmin"
+                                    }
+                                },
+                            }
+                        ],
+                        responsive: true,
+                        order: [[5, 'asc']],
+                    })
+
+                    // Attach click event listener to the button
+                    $('#userDatatable tbody').on('change', '.role-select', function () {
+                        const userId = $(this).data('id');
+                        const role = $(this).val();
+                        self.selectedRole[userId] = role;
+                    });
+
+                    // Attach click event listener to the update button
+                    $('#userDatatable tbody').on('click', '.update-btn', function () {
+                        const userId = $(this).data('id');
+                        const thisUserRole = self.selectedRole[userId];
+                        self.updateInfo(thisUserRole, userId);
+                    });
+
+                    // Attach click event listener to the delete button
+                    $('#itemDatatable tbody').on('click', '.delete-btn', function () {
+                        const itemId = $(this).data('id');
+                        self.deleteItem(itemId);
+                    });
+
+                    this.loading = false;
+                },
+                async updateInfo(thisUserRole, thisUserId) {
+                    try
+                    {
+                        const response = await fetch(`/AdminAPI/UpdateUserStatusAndRole/${thisUserId}`, {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(thisUserRole)
+                        });
+
+                        if (!response.ok) {
+                            throw new Error('Failed to update role');
+                        }
+
+                        console.log('Role updated successfully');
+                    }
+                    catch (error) {
+                        console.error('Failed to update role:', error);
+                    }
+
+                    // console.log("User ID:" + thisUserId + " Role:" + thisUserRole);
+
+                    //How to reload the table with new data from this.userList
+
+                    this.fetchUsers();
+                },
+            }
+        })
+    </script>
+}
+
+
diff --git a/Areas/OTcalculate/Views/HrDashboard/Settings.cshtml b/Areas/OTcalculate/Views/HrDashboard/Settings.cshtml
index ff0824c..40acac7 100644
--- a/Areas/OTcalculate/Views/HrDashboard/Settings.cshtml
+++ b/Areas/OTcalculate/Views/HrDashboard/Settings.cshtml
@@ -7,9 +7,9 @@
 <div class="col-6 col-md-6 col-lg-3">
     <div class="card card-hover">
         <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
-            <div class="box bg-cyan text-center">
+            <div class="box bg-success text-center">
                 <h1 class="font-light text-white">
-                    <i class="mdi mdi-factory"></i>
+                    <i class="mdi mdi-currency-usd"></i>
                 </h1>
                 <h6 class="text-white">Rate</h6>
             </div>
@@ -20,12 +20,53 @@
 <div class="col-6 col-md-6 col-lg-3">
     <div class="card card-hover">
         <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
-            <div class="box bg-info text-center">
+            <div class="box bg-purple text-center">
                 <h1 class="font-light text-white">
-                    <i class="mdi mdi-checkbox-multiple-blank"></i>
+                    <i class="mdi mdi-calendar"></i>
                 </h1>
                 <h6 class="text-white">Calendar</h6>
             </div>
         </a>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<div class="row">
+    <div id="dateUpdate" class="card m-1">
+        <div class="row" v-if="addSection == true">
+            <form v-on:submit.prevent="updateDate" data-aos="fade-right">
+                <div class="container updateDate" data-aos="fade-right">
+                    <div class="row" data-aos="fade-right">
+                        <div class="col-md-12">
+                            <div class="tab-content" id="myTabContent">
+                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                                    <div class="card-header" style="background-color: white;">
+                                        <h3 class="date-heading text-center">UPDATE DATE</h3>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                            <div class="card-header" style="background-color: white;">
+                                <lable class="date-heading text-center">Rate Latest Update:</lable>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                            <div class="card-header" style="background-color: white;">
+                                <lable class="date-heading text-center">Calendar Latest Update:</lable>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
diff --git a/Controllers/API/CentralDbContext.cs b/Controllers/API/CentralDbContext.cs
new file mode 100644
index 0000000..8a22eaa
--- /dev/null
+++ b/Controllers/API/CentralDbContext.cs
@@ -0,0 +1,7 @@
+namespace PSTW_CentralSystem.Controllers.API
+{
+    public class CentralDbContext
+    {
+        public object Users { get; internal set; }
+    }
+}
\ No newline at end of file
diff --git a/Controllers/API/OvertimeAPI.cs b/Controllers/API/OvertimeAPI.cs
new file mode 100644
index 0000000..9ff4ed1
--- /dev/null
+++ b/Controllers/API/OvertimeAPI.cs
@@ -0,0 +1,44 @@
+using Azure.Core;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Mono.TextTemplating;
+using Newtonsoft.Json;
+using PSTW_CentralSystem.Areas.OTcalculate.Models;
+using PSTW_CentralSystem.Controllers.API;
+using PSTW_CentralSystem.DBContext;
+using PSTW_CentralSystem.Models;
+using System.ComponentModel.Design;
+using System.Data;
+using System.Diagnostics;
+using System.Reflection;
+using static System.Collections.Specialized.BitVector32;
+
+namespace PSTW_CentralSystem.Controllers.API
+{
+    [ApiController]
+    [Route("[controller]")]
+    public class OvertimeAPI : Controller
+    {
+        private readonly ILogger<OvertimeAPI> _logger;
+        private readonly CentralSystemContext _centralDbContext;
+        private readonly UserManager<UserModel> _userManager;
+
+        public OvertimeAPI(ILogger<OvertimeAPI> logger, CentralSystemContext centralDbContext, UserManager<UserModel> userManager)
+        {
+            _logger = logger;
+            _centralDbContext = centralDbContext;
+            _userManager = userManager;
+        }
+
+        public class UserDetails
+        {
+            public required string FullName { get; set; }
+            public int DepartmentId { get; set; }
+
+
+
+        }
+    }
+}
diff --git a/Controllers/API/Reporting/ReportingAPI.cs b/Controllers/API/ReportingAPI.cs
similarity index 98%
rename from Controllers/API/Reporting/ReportingAPI.cs
rename to Controllers/API/ReportingAPI.cs
index bcd6291..dea8cd6 100644
--- a/Controllers/API/Reporting/ReportingAPI.cs
+++ b/Controllers/API/ReportingAPI.cs
@@ -6,7 +6,7 @@ using PSTW_CentralSystem.Areas.Inventory.Models;
 using PSTW_CentralSystem.DBContext;
 using PSTW_CentralSystem.Models;
 
-namespace PSTW_CentralSystem.Controllers.API.Reporting
+namespace PSTW_CentralSystem.Controllers.API
 {
     [ApiController]
     [Route("[controller]")]
diff --git a/PSTW_CentralSystem.csproj b/PSTW_CentralSystem.csproj
index bf76018..322365c 100644
--- a/PSTW_CentralSystem.csproj
+++ b/PSTW_CentralSystem.csproj
@@ -34,8 +34,8 @@
   <ItemGroup>
     <Folder Include="Areas\JSA\Models\" />
     <Folder Include="Areas\JSA\Views\" />
-    <Folder Include="Areas\OTcalculate\Models\" />
     <Folder Include="Areas\Report\Models\" />
+    <Folder Include="Controllers\API\Reporting\" />
     <Folder Include="Logs\" />
   </ItemGroup>