diff --git a/static/index/index.js b/static/index/index.js
index 032f0f1cc..b017b7245 100644
--- a/static/index/index.js
+++ b/static/index/index.js
@@ -32,6 +32,14 @@ function getCookie(name) {
     return cookieValue;
 }
 
+function handleSidebarToggle() {
+    // Delay the execution slightly to allow existing toggle logic to finish
+    setTimeout(() => {
+        const isOpen = !$('.oh-wrapper-main').hasClass('oh-wrapper-main--closed');
+        localStorage.setItem('sidebarOpen', isOpen);
+    }, 50);
+}
+
 function addToSelectedId(newIds, storeKey) {
     ids = JSON.parse($(`#${storeKey}`).attr("data-ids") || "[]");
 
@@ -636,6 +644,34 @@ nav.after(
     )
 );
 
+$(function () {
+    const $wrapper = $('.oh-wrapper-main');
+    const sidebarOpen = localStorage.getItem('sidebarOpen');
+
+    if (sidebarOpen === 'false') {
+        $wrapper.addClass('oh-wrapper-main--closed');
+    } else {
+        $wrapper.removeClass('oh-wrapper-main--closed');
+    }
+
+    $('#sidebar').on('mouseleave', () => {
+        if (localStorage.getItem('sidebarOpen') === 'false') {
+            $wrapper.addClass('oh-wrapper-main--closed');
+        }
+    });
+});
+
+$(document).on('click', '.oh-kanban__card-body-collapse', function (e) {
+    e.preventDefault();
+
+    var $cardBody = $(this).closest('.oh-kanban__card-body');
+
+    $cardBody.find('.oh-kanban__card-content').toggleClass('oh-kanban__card-content--hide');
+
+    $(this).toggleClass('oh-kanban__card-collapse--down');
+});
+
+
 $(document).on("htmx:beforeRequest", function (event, data) {
     if (
         !Array.from(event.target.getAttributeNames()).some((attr) =>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 9a40e28e7..72d05f24b 100755
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -80,12 +80,16 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%); /* Center the modal */
-        width: 80%; /* Adjust the width of the modal */
-        height: 80%; /* Adjust the height of the modal */
+        transform: translate(-50%, -50%);
+        /* Center the modal */
+        width: 80%;
+        /* Adjust the width of the modal */
+        height: 80%;
+        /* Adjust the height of the modal */
         overflow: hidden;
         z-index: 1001;
-        background: transparent; /* Ensure background is transparent */
+        background: transparent;
+        /* Ensure background is transparent */
         display: flex;
         justify-content: center;
         align-items: center;
@@ -100,63 +104,63 @@
         height: 100%;
         background-size: cover;
         filter: blur(5px);
-        opacity: 2; /* Adjust opacity level */
-        z-index: 1000; /* Ensure it's behind the canvas */
+        opacity: 2;
+        /* Adjust opacity level */
+        z-index: 1000;
+        /* Ensure it's behind the canvas */
     }
-
-
 </style>
 
-    <div class="oh-wrapper">
+<div class="oh-wrapper">
 
-        <!-- back button -->
-        <div class="d-none mt-5" id="back_button" style="width: 10%">
-            <a href="{% url 'home-page' %}" class="oh-btn oh-btn--secondary oh-btn--shadow ms-3">
-                <ion-icon class="me-2 md hydrated" name="arrow-back-outline" role="img"
-                    aria-label="arrow-back-outline"></ion-icon>{% trans "Back" %}</a>
-        </div>
-        <!-- end of back button -->
-        <div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">
+    <!-- back button -->
+    <div class="d-none mt-5" id="back_button" style="width: 10%">
+        <a href="{% url 'home-page' %}" class="oh-btn oh-btn--secondary oh-btn--shadow ms-3">
+            <ion-icon class="me-2 md hydrated" name="arrow-back-outline" role="img"
+                aria-label="arrow-back-outline"></ion-icon>{% trans "Back" %}</a>
+    </div>
+    <!-- end of back button -->
+    <div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">
 
 
-            <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
-                <div class="oh-dashboard__cards row">
-                    {% if perms.employee.view_employee %}
+        <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
+            <div class="oh-dashboard__cards row">
+                {% if perms.employee.view_employee %}
                     {% if "recruitment"|app_installed %}
-                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-                        <div class="oh-card-dashboard oh-card-dashboard--success tile">
-                            <a href="{% url 'candidate-view' %}?joining_date={{current_date}}"
-                                style="text-decoration: none">
-                                <div class="oh-card-dashboard__header">
-                                    <span class="oh-card-dashboard__title">{% trans "New Joining Today" %}</span>
-                                </div>
-                                <div class="oh-card-dashboard__body">
-                                    <div class="oh-card-dashboard__counts">
-                                        <span class="oh-card-dashboard__count" hx-get="{% url 'joining-today-count' %}" hx-trigger="load">
-                                            <div style="height: 67px;"></div>
-                                        </span>
+                        <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                            <div class="oh-card-dashboard oh-card-dashboard--success tile">
+                                <a href="{% url 'candidate-view' %}?joining_date={{current_date}}"
+                                    style="text-decoration: none">
+                                    <div class="oh-card-dashboard__header">
+                                        <span class="oh-card-dashboard__title">{% trans "New Joining Today" %}</span>
                                     </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-                        <div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile">
-                            <a href="{% url 'candidate-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
-                                style="text-decoration: none">
-                                <div class="oh-card-dashboard__header">
-                                    <span class="oh-card-dashboard__title">{% trans "New Joining This Week" %}</span>
-                                </div>
-                                <div class="oh-card-dashboard__body">
-                                    <div class="oh-card-dashboard__counts">
-                                        <span class="oh-card-dashboard__count" hx-get="{% url 'joining-week-count' %}" hx-trigger="load">
-                                            <div style="height: 67px;"></div>
-                                        </span>
+                                    <div class="oh-card-dashboard__body">
+                                        <div class="oh-card-dashboard__counts">
+                                            <span class="oh-card-dashboard__count" hx-get="{% url 'joining-today-count' %}" hx-trigger="load">
+                                                <div style="height: 67px;"></div>
+                                            </span>
+                                        </div>
                                     </div>
-                                </div>
-                            </a>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                            <div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile">
+                                <a href="{% url 'candidate-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
+                                    style="text-decoration: none">
+                                    <div class="oh-card-dashboard__header">
+                                        <span class="oh-card-dashboard__title">{% trans "New Joining This Week" %}</span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <div class="oh-card-dashboard__counts">
+                                            <span class="oh-card-dashboard__count" hx-get="{% url 'joining-week-count' %}" hx-trigger="load">
+                                                <div style="height: 67px;"></div>
+                                            </span>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
                         </div>
-                    </div>
                     {% endif %}
                     <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                         <a href="{% url 'employee-view' %}" style="text-decoration: none">
@@ -166,7 +170,8 @@
                                 </div>
                                 <div class="oh-card-dashboard__body">
                                     <div class="oh-card-dashboard__counts">
-                                        <span class="oh-card-dashboard__count" hx-get="{% url 'total-employees-count' %}" hx-trigger="load">
+                                        <span class="oh-card-dashboard__count" hx-get="{% url 'total-employees-count' %}"
+                                            hx-trigger="load">
                                             <div style="height: 67px;"></div>
                                         </span>
                                     </div>
@@ -174,117 +179,119 @@
                             </div>
                         </a>
                     </div>
-                    {% endif %}
-                    <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
-                        {% include "dashboard_tile_container.html" %}
-                    </div>
+                {% endif %}
+                <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
+                    {% include "dashboard_tile_container.html" %}
                 </div>
             </div>
-            <div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
-                {% if 'birthday_view'|feature_is_accessible:request or perms.employee.view_employee %}
-                    <div class="oh-dashboard__events" hx-get="{% url 'get-birthday' %}" hx-trigger="load"> </div>
-                {% endif %}
-                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
-                    <div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
-                        <span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
-                        {% if perms.base.add_announcement %}
+        </div>
+        <div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
+            {% if 'birthday_view'|feature_is_accessible:request or perms.employee.view_employee %}
+                <div class="oh-dashboard__events" hx-get="{% url 'get-birthday' %}" hx-trigger="load"> </div>
+            {% endif %}
+            <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
+                <div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
+                    <span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
+                    {% if perms.base.add_announcement %}
                         <span>
                             <button id="addAnnouncement" style="display: inline-block;padding: 0px;
-                        border-radius: 6px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 50px;
-                        height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
+                            border-radius: 6px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            width: 50px;
+                            height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
                                 hx-get="{% url 'create-announcement' %}" hx-target="#objectCreateModalTarget"
                                 hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
                                 title="{% trans 'Create Announcement' %}">
                                 <ion-icon name="add-outline" class="m-0"></ion-icon>
                             </button>
                         </span>
-                        {% endif %}
-                    </div>
-
-                    <hr>
-
-                    <div class="oh-card-dashboard__body" hx-get="{% url 'announcement-list' %}" hx-trigger="load" id="announcementListCard">
-                        <div class="animated-background"></div>
-                    </div>
-                </div>
-                {% if "leave"|app_installed %}
-                    {% if perms.leave.view_leaverequest or request.user|is_reportingmanager %}
-                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
-                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
-                                <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
-                            </div>
-                            <div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load" style="height:300px;overflow-x: auto;">
-                                <div class="animated-background"></div>
-                            </div>
-                        </div>
                     {% endif %}
-                {% endif %}
-                {% if perms.employee.view_employeeworkinformation or request.user|is_reportingmanager %}
-                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                </div>
+
+                <hr>
+
+                <div class="oh-card-dashboard__body" hx-get="{% url 'announcement-list' %}" hx-trigger="load"
+                    id="announcementListCard">
+                    <div class="animated-background"></div>
+                </div>
+            </div>
+            {% if "leave"|app_installed %}
+                {% if perms.leave.view_leaverequest or request.user|is_reportingmanager %}
+                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
                         <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
-                            <span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
+                            <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
                         </div>
-                        <!-- Search bar -->
-                        <div class="oh-search-bar mb-3">
-                            <input type="text" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
-                                hx-trigger="keyup  changed dealy:0.3s" id="employeeSearch" name="search"
-                                placeholder="Search Employee">
-                        </div>
-                        <div class="oh-card-dashboard__body" hx-get="{% url 'emp-workinfo-complete' %}" hx-trigger="load">
+                        <div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load"
+                            style="height:300px;overflow-x: auto;">
                             <div class="animated-background"></div>
                         </div>
                     </div>
                 {% endif %}
-            </div>
+            {% endif %}
+            {% if perms.employee.view_employeeworkinformation or request.user|is_reportingmanager %}
+                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                        <span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
+                    </div>
+                    <!-- Search bar -->
+                    <div class="oh-search-bar mb-3">
+                        <input type="text" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
+                            hx-trigger="keyup  changed dealy:0.3s" id="employeeSearch" name="search"
+                            placeholder="Search Employee">
+                    </div>
+                    <div class="oh-card-dashboard__body" hx-get="{% url 'emp-workinfo-complete' %}" hx-trigger="load">
+                        <div class="animated-background"></div>
+                    </div>
+                </div>
+            {% endif %}
         </div>
     </div>
-    <div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <span class="oh-modal__dialog-title" id="sendMailModalLabel">
-                    <h5>{% trans 'Send Mail' %}</h5>
-                </span>
-                <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
-            </div>
-            <div class="oh-modal__dialog-body" id="mail-content"></div>
+</div>
+<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <span class="oh-modal__dialog-title" id="sendMailModalLabel">
+                <h5>{% trans 'Send Mail' %}</h5>
+            </span>
+            <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
         </div>
+        <div class="oh-modal__dialog-body" id="mail-content"></div>
     </div>
+</div>
 
-    <div class="oh-modal" id="bigModal" role="dialog" aria-labelledby="bigModal" aria-hidden="true">
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <h2 class="oh-modal__dialog-title" id="">
-                    {% trans "Details" %}
-                </h2>
-                <button class="oh-modal__close" aria-label="Close">
-                    <ion-icon name="close-outline"></ion-icon>
-                </button>
-            </div>
-            <div class="oh-modal__dialog-body oh-modal__dialog-relative" id="bigModalTarget"></div>
+<div class="oh-modal" id="bigModal" role="dialog" aria-labelledby="bigModal" aria-hidden="true">
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="">
+                {% trans "Details" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
         </div>
+        <div class="oh-modal__dialog-body oh-modal__dialog-relative" id="bigModalTarget"></div>
     </div>
+</div>
 
 
-    <div class="oh-modal" id="editModal" role="dialog" aria-labelledby="editModal" aria-hidden="true">
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <h2 class="oh-modal__dialog-title" id="editModalLabel">
-                    {% trans "Add Asset Report" %}
-                </h2>
-                <button type="button" class="oh-modal_close--custom"
-                    onclick="$('#editModal').removeClass('oh-modal--show');">
-                    <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
-                </button>
-            </div>
-            <div class="oh-modal__dialog-body" id="editModalForm"></div>
+<div class="oh-modal" id="editModal" role="dialog" aria-labelledby="editModal" aria-hidden="true">
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="editModalLabel">
+                {% trans "Add Asset Report" %}
+            </h2>
+            <button type="button" class="oh-modal_close--custom"
+                onclick="$('#editModal').removeClass('oh-modal--show');">
+                <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
+            </button>
         </div>
+        <div class="oh-modal__dialog-body" id="editModalForm"></div>
     </div>
+</div>
 
-    {% include "announcement_single_view.html" %}
+{% include "announcement_single_view.html" %}
 
 
 </main>
@@ -295,10 +302,7 @@
 <script src="{% static 'dashboard/employeeChart.js' %}"></script>
 
 {% if "leave"|app_installed %}
-<script src="{% static 'dashboard/onLeave.js' %}"></script>
-{% endif %}
-
-{% if "leave"|app_installed %}
+    <script src="{% static 'dashboard/onLeave.js' %}"></script>
     <script src="{% static 'dashboard/leaveChart.js' %}"></script>
 {% endif %}
 
@@ -359,71 +363,67 @@
         return [...setA.filter(element => !setB.includes(element))];
     }
     $(document).ready(function () {
-        if (localStorage.getItem("tileOrder")) {
-            var tileOrder = []
-            $.each(
-                $(".oh-card-dashboard--moveable"),
-                function (indexInArray, valueOfElement) {
-                    tileOrder.push($(valueOfElement).attr("id"));
+        function setDifference(arr1, arr2) {
+            return arr2.filter(id => !arr1.includes(id));
+        }
+
+        const defaultTileOrder = [
+            "notInYetId", "LeaveApprove", "shiftRequestApprove", "WorkTypeRequestApprove", "AttendanceValidate", "OTApprove",
+            "LeaveAllocationApprove", "feedbackAnswer", "assetRequestApprove", "movable8", "pendingHours", "notoutYetId",
+            "movable2", "movable3", "movable4", "movable1", "movable5", "movable6", "movable7", "movable9", "movable10", "movable11"
+        ];
+
+        const allCurrentTileIds = $(".oh-card-dashboard--moveable[id]").map(function () {
+            return $(this).attr("id");
+        }).get();
+
+        // If tile order is not saved, initialize it
+        if (!localStorage.getItem("tileOrder")) {
+            localStorage.setItem("tileOrder", JSON.stringify(defaultTileOrder));
+        } else {
+            let storedIds = JSON.parse(localStorage.getItem("tileOrder")) || [];
+
+            // Add only new tiles (not already in storage) to the end
+            const newTileIds = setDifference(storedIds, allCurrentTileIds);  // removes missing IDs
+            const missingTileIds = setDifference(allCurrentTileIds, storedIds);  // adds new IDs
+
+            const updatedOrder = storedIds.filter(id => allCurrentTileIds.includes(id)); // clean invalid
+            const finalOrder = [...updatedOrder, ...missingTileIds];
+
+            localStorage.setItem("tileOrder", JSON.stringify(finalOrder));
+        }
+
+        // Reorder dashboard tiles based on tileOrder
+        function orderDashboardTile() {
+            const parentContainer = $("#tileContainer");
+            const orderIds = JSON.parse(localStorage.getItem("tileOrder")) || [];
+
+            const sortedElements = [];
+            for (const id of orderIds) {
+                const element = $("#" + id);
+                if (element.length) {
+                    sortedElements.push(element);
                 }
-            );
-            var storedIds = JSON.parse(localStorage.getItem("tileOrder"))
-            var existingElements = $(".oh-card-dashboard--moveable[id]")
-            var existingElementsIds = [];
-            $.each(existingElements, function (indexInArray, valueOfElement) {
-                existingElementsIds.push($(this).attr("id"))
-            });
-            var newOrderIds = [...storedIds, ...setDifference(storedIds, existingElementsIds)]
-            if (storedIds.length != existingElementsIds.length) {
-                localStorage.setItem("tileOrder", JSON.stringify(newOrderIds))
             }
 
-        } else {
-            localStorage.setItem("tileOrder", JSON.stringify(
-                [
-                    "notInYetId", "LeaveApprove", "shiftRequestApprove", "WorkTypeRequestApprove", "AttendanceValidate", "OTApprove",
-                    "LeaveAllocationApprove", "feedbackAnswer", "assetRequestApprove", "movable8", "pendingHours", "notoutYetId",
-                    "movable2", "movable3", "movable4", "movable1", "movable5", "movable6", "movable7", "movable9", "movable10", "movable11"
-                ]
-            ))
-        }
-        // localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
-
-        function orderDashboardTile() {
-            var orderIds = JSON.parse(localStorage.getItem("tileOrder"));
-            const parentContainer = $("#tileContainer");
-            if (orderIds != null) {
-                const sortedElements = [];
-
-                // Loop through the desired order of IDs
-                for (const id of orderIds) {
-                    const element = $("#" + id);
-                    if (element.length) {
-                        sortedElements.push(element);
-                    }
-                }
-
-                // Clear the parent container
-                if (sortedElements.length) {
-                    parentContainer.empty();
-                }
-                // Append the sorted elements to the parent container
+            if (sortedElements.length) {
+                parentContainer.empty();
                 for (const element of sortedElements) {
                     parentContainer.append(element);
                 }
             }
         }
+
         orderDashboardTile();
-        $(".oh-card-dashboard--moveable").mouseup(function () {
-            var tileOrder = [];
-            setTimeout((e) => {
-                $.each(
-                    $(".oh-card-dashboard--moveable"),
-                    function (indexInArray, valueOfElement) {
-                        tileOrder.push($(valueOfElement).attr("id"));
-                    }
-                );
-                localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
+
+        // Update tileOrder on mouseup
+        $(".oh-card-dashboard--moveable").on("mouseup", function () {
+            setTimeout(() => {
+                const newOrder = $(".oh-card-dashboard--moveable").map(function () {
+                    return $(this).attr("id");
+                }).get();
+
+                localStorage.setItem("tileOrder", JSON.stringify(newOrder));
             }, 10);
         });
     });
@@ -433,379 +433,379 @@
     }
 
     var w = c.width = window.innerWidth,
-    h = c.height = window.innerHeight,
-    ctx = c.getContext('2d'),
+        h = c.height = window.innerHeight,
+        ctx = c.getContext('2d'),
 
-    hw = w / 2, // half-width
-    hh = h / 2,
+        hw = w / 2, // half-width
+        hh = h / 2,
 
-    opts = {
-        strings: ['HAPPY', 'BIRTHDAY!',"{{request.user.employee_get|escapejs}}"],
-        charSize: 60,
-        charSpacing: 45,
-        lineHeight: 65,
-        cx: w / 2,
-        cy: h / 2,
-        fireworkPrevPoints: 10,
-        fireworkBaseLineWidth: 5,
-        fireworkAddedLineWidth: 8,
-        fireworkSpawnTime: 200,
-        fireworkBaseReachTime: 30,
-        fireworkAddedReachTime: 30,
-        fireworkCircleBaseSize: 20,
-        fireworkCircleAddedSize: 10,
-        fireworkCircleBaseTime: 30,
-        fireworkCircleAddedTime: 30,
-        fireworkCircleFadeBaseTime: 10,
-        fireworkCircleFadeAddedTime: 5,
-        fireworkBaseShards: 20,
-        fireworkAddedShards: 5,
-        fireworkShardPrevPoints: 3,
-        fireworkShardBaseVel: 4,
-        fireworkShardAddedVel: 2,
-        fireworkShardBaseSize: 10,
-        fireworkShardAddedSize: 3,
-        gravity: 0.1,
-        upFlow: -0.1,
-        letterContemplatingWaitTime: 360,
-        balloonSpawnTime: 10,
-        balloonBaseInflateTime: 10,
-        balloonAddedInflateTime: 10,
-        balloonBaseSize: 60,
-        balloonAddedSize: 20,
-        balloonBaseVel: 0.4,
-        balloonAddedVel: 0.4,
-        balloonBaseRadian: -(Math.PI / 2 - 0.5),
-        balloonAddedRadian: -1,
-    },
-    calc = {
-        totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length)
-    },
+        opts = {
+            strings: ['HAPPY', 'BIRTHDAY!', "{{request.user.employee_get|escapejs}}"],
+            charSize: 60,
+            charSpacing: 45,
+            lineHeight: 65,
+            cx: w / 2,
+            cy: h / 2,
+            fireworkPrevPoints: 10,
+            fireworkBaseLineWidth: 5,
+            fireworkAddedLineWidth: 8,
+            fireworkSpawnTime: 200,
+            fireworkBaseReachTime: 30,
+            fireworkAddedReachTime: 30,
+            fireworkCircleBaseSize: 20,
+            fireworkCircleAddedSize: 10,
+            fireworkCircleBaseTime: 30,
+            fireworkCircleAddedTime: 30,
+            fireworkCircleFadeBaseTime: 10,
+            fireworkCircleFadeAddedTime: 5,
+            fireworkBaseShards: 20,
+            fireworkAddedShards: 5,
+            fireworkShardPrevPoints: 3,
+            fireworkShardBaseVel: 4,
+            fireworkShardAddedVel: 2,
+            fireworkShardBaseSize: 10,
+            fireworkShardAddedSize: 3,
+            gravity: 0.1,
+            upFlow: -0.1,
+            letterContemplatingWaitTime: 360,
+            balloonSpawnTime: 10,
+            balloonBaseInflateTime: 10,
+            balloonAddedInflateTime: 10,
+            balloonBaseSize: 60,
+            balloonAddedSize: 20,
+            balloonBaseVel: 0.4,
+            balloonAddedVel: 0.4,
+            balloonBaseRadian: -(Math.PI / 2 - 0.5),
+            balloonAddedRadian: -1,
+        },
+        calc = {
+            totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length)
+        },
 
-    Tau = Math.PI * 2,
-    TauQuarter = Tau / 4,
+        Tau = Math.PI * 2,
+        TauQuarter = Tau / 4,
 
-    letters = [];
+        letters = [];
 
-ctx.font = opts.charSize + 'px "Lobster"';
+    ctx.font = opts.charSize + 'px "Lobster"';
 
 
-function Letter(char, x, y) {
-    this.char = char;
-    this.x = x;
-    this.y = y;
+    function Letter(char, x, y) {
+        this.char = char;
+        this.x = x;
+        this.y = y;
 
-    this.dx = -ctx.measureText(char).width / 2;
-    this.dy = +opts.charSize / 2;
+        this.dx = -ctx.measureText(char).width / 2;
+        this.dy = +opts.charSize / 2;
 
-    this.fireworkDy = this.y - hh;
+        this.fireworkDy = this.y - hh;
 
-    var hue = x / calc.totalWidth * 360;
+        var hue = x / calc.totalWidth * 360;
 
-    this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
-    this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
-    this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
-    this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);
+        this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
+        this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
+        this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
+        this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);
 
-    {% comment %} this.color = 'hsl(8, 77%, 56%)'; // Base color
-    this.lightAlphaColor = 'hsla(8, 77%, 56%, 0.5)'; // Semi-transparent
-    this.lightColor = 'hsla(8, 77%, 56%, 0.8)'; // Slightly transparent
-    this.alphaColor = 'hsla(8, 77%, 56%, 0.6)'; // Semi-transparent {% endcomment %}
+        {% comment %} this.color = 'hsl(8, 77%, 56%)'; // Base color
+        this.lightAlphaColor = 'hsla(8, 77%, 56%, 0.5)'; // Semi-transparent
+        this.lightColor = 'hsla(8, 77%, 56%, 0.8)'; // Slightly transparent
+        this.alphaColor = 'hsla(8, 77%, 56%, 0.6)'; // Semi-transparent {% endcomment %}
 
 
-    this.reset();
-}
-Letter.prototype.reset = function () {
-    this.phase = 'firework';
-    this.tick = 0;
-    this.spawned = false;
-    this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
-    this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
-    this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
-    this.prevPoints = [[0, hh, 0]];
-}
-Letter.prototype.step = function () {
-    if (this.phase === 'firework') {
-        if (!this.spawned) {
-            ++this.tick;
-            if (this.tick >= this.spawningTime) {
-                this.tick = 0;
-                this.spawned = true;
-            }
-        } else {
-            ++this.tick;
+        this.reset();
+    }
+    Letter.prototype.reset = function () {
+        this.phase = 'firework';
+        this.tick = 0;
+        this.spawned = false;
+        this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
+        this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
+        this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
+        this.prevPoints = [[0, hh, 0]];
+    }
+    Letter.prototype.step = function () {
+        if (this.phase === 'firework') {
+            if (!this.spawned) {
+                ++this.tick;
+                if (this.tick >= this.spawningTime) {
+                    this.tick = 0;
+                    this.spawned = true;
+                }
+            } else {
+                ++this.tick;
 
-            var linearProportion = this.tick / this.reachTime,
-                harmonicProportion = Math.sin(linearProportion * TauQuarter),
+                var linearProportion = this.tick / this.reachTime,
+                    harmonicProportion = Math.sin(linearProportion * TauQuarter),
 
-                x = linearProportion * this.x,
-                y = hh + harmonicProportion * this.fireworkDy;
+                    x = linearProportion * this.x,
+                    y = hh + harmonicProportion * this.fireworkDy;
 
-            if (this.prevPoints.length > opts.fireworkPrevPoints)
-                this.prevPoints.shift();
+                if (this.prevPoints.length > opts.fireworkPrevPoints)
+                    this.prevPoints.shift();
 
-            this.prevPoints.push([x, y, linearProportion * this.lineWidth]);
+                this.prevPoints.push([x, y, linearProportion * this.lineWidth]);
 
-            var lineWidthProportion = 1 / (this.prevPoints.length - 1);
+                var lineWidthProportion = 1 / (this.prevPoints.length - 1);
 
-            for (var i = 1; i < this.prevPoints.length; ++i) {
-                var point = this.prevPoints[i],
-                    point2 = this.prevPoints[i - 1];
+                for (var i = 1; i < this.prevPoints.length; ++i) {
+                    var point = this.prevPoints[i],
+                        point2 = this.prevPoints[i - 1];
 
-                ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
-                ctx.lineWidth = point[2] * lineWidthProportion * i;
-                ctx.beginPath();
-                ctx.moveTo(point[0], point[1]);
-                ctx.lineTo(point2[0], point2[1]);
-                ctx.stroke();
-            }
+                    ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
+                    ctx.lineWidth = point[2] * lineWidthProportion * i;
+                    ctx.beginPath();
+                    ctx.moveTo(point[0], point[1]);
+                    ctx.lineTo(point2[0], point2[1]);
+                    ctx.stroke();
+                }
 
-            if (this.tick >= this.reachTime) {
-                this.phase = 'contemplate';
+                if (this.tick >= this.reachTime) {
+                    this.phase = 'contemplate';
 
-                this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
-                this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
-                this.circleCreating = true;
-                this.circleFading = false;
+                    this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
+                    this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
+                    this.circleCreating = true;
+                    this.circleFading = false;
 
-                this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
-                this.tick = 0;
-                this.tick2 = 0;
+                    this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
+                    this.tick = 0;
+                    this.tick2 = 0;
 
-                this.shards = [];
+                    this.shards = [];
 
-                var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
-                    angle = Tau / shardCount,
-                    cos = Math.cos(angle),
-                    sin = Math.sin(angle),
+                    var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
+                        angle = Tau / shardCount,
+                        cos = Math.cos(angle),
+                        sin = Math.sin(angle),
 
-                    x = 1,
-                    y = 0;
+                        x = 1,
+                        y = 0;
 
-                for (var i = 0; i < shardCount; ++i) {
-                    var x1 = x;
-                    x = x * cos - y * sin;
-                    y = y * cos + x1 * sin;
+                    for (var i = 0; i < shardCount; ++i) {
+                        var x1 = x;
+                        x = x * cos - y * sin;
+                        y = y * cos + x1 * sin;
 
-                    this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
+                        this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
+                    }
                 }
             }
-        }
-    } else if (this.phase === 'contemplate') {
-        ++this.tick;
-
-        if (this.circleCreating) {
-            ++this.tick2;
-            var proportion = this.tick2 / this.circleCompleteTime,
-                harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;
-
-            ctx.beginPath();
-            ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
-            ctx.arc(this.x, this.y, harmonic * this.circleFinalSize, 0, Tau);
-            ctx.fill();
-
-            if (this.tick2 > this.circleCompleteTime) {
-                this.tick2 = 0;
-                this.circleCreating = false;
-                this.circleFading = true;
-            }
-        } else if (this.circleFading) {
-            ctx.fillStyle = this.lightColor.replace('light', 70);
-            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
-
-            ++this.tick2;
-            var proportion = this.tick2 / this.circleFadeTime,
-                harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;
-
-            ctx.beginPath();
-            ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - harmonic);
-            ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
-            ctx.fill();
-
-            if (this.tick2 >= this.circleFadeTime)
-                this.circleFading = false;
-
-        } else {
-            ctx.fillStyle = this.lightColor.replace('light', 70);
-            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
-        }
-
-        for (var i = 0; i < this.shards.length; ++i) {
-            this.shards[i].step();
-
-            if (!this.shards[i].alive) {
-                this.shards.splice(i, 1);
-                --i;
-            }
-        }
-
-        if (this.tick > opts.letterContemplatingWaitTime) {
-            this.phase = 'balloon';
-
-            this.tick = 0;
-            this.spawning = true;
-            this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
-            this.inflating = false;
-            this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
-            this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;
-
-            var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
-                vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();
-
-            this.vx = Math.cos(rad) * vel;
-            this.vy = Math.sin(rad) * vel;
-        }
-    } else if (this.phase === 'balloon') {
-        ctx.strokeStyle = this.lightColor.replace('light', 80);
-
-        if (this.spawning) {
-            ++this.tick;
-            ctx.fillStyle = this.lightColor.replace('light', 70);
-            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
-
-            if (this.tick >= this.spawnTime) {
-                this.tick = 0;
-                this.spawning = false;
-                this.inflating = true;
-            }
-        } else if (this.inflating) {
+        } else if (this.phase === 'contemplate') {
             ++this.tick;
 
-            var proportion = this.tick / this.inflateTime,
-                x = this.cx = this.x,
-                y = this.cy = this.y - this.size * proportion;
+            if (this.circleCreating) {
+                ++this.tick2;
+                var proportion = this.tick2 / this.circleCompleteTime,
+                    harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;
 
-            ctx.fillStyle = this.alphaColor.replace('alp', proportion);
-            ctx.beginPath();
-            generateBalloonPath(x, y, this.size * proportion);
-            ctx.fill();
+                ctx.beginPath();
+                ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
+                ctx.arc(this.x, this.y, harmonic * this.circleFinalSize, 0, Tau);
+                ctx.fill();
 
-            ctx.beginPath();
-            ctx.moveTo(x, y);
-            ctx.lineTo(x, this.y);
-            ctx.stroke();
+                if (this.tick2 > this.circleCompleteTime) {
+                    this.tick2 = 0;
+                    this.circleCreating = false;
+                    this.circleFading = true;
+                }
+            } else if (this.circleFading) {
+                ctx.fillStyle = this.lightColor.replace('light', 70);
+                ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
-            ctx.fillStyle = this.lightColor.replace('light', 70);
-            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
+                ++this.tick2;
+                var proportion = this.tick2 / this.circleFadeTime,
+                    harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;
+
+                ctx.beginPath();
+                ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - harmonic);
+                ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
+                ctx.fill();
+
+                if (this.tick2 >= this.circleFadeTime)
+                    this.circleFading = false;
+
+            } else {
+                ctx.fillStyle = this.lightColor.replace('light', 70);
+                ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
+            }
+
+            for (var i = 0; i < this.shards.length; ++i) {
+                this.shards[i].step();
+
+                if (!this.shards[i].alive) {
+                    this.shards.splice(i, 1);
+                    --i;
+                }
+            }
+
+            if (this.tick > opts.letterContemplatingWaitTime) {
+                this.phase = 'balloon';
 
-            if (this.tick >= this.inflateTime) {
                 this.tick = 0;
+                this.spawning = true;
+                this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
                 this.inflating = false;
+                this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
+                this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;
+
+                var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
+                    vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();
+
+                this.vx = Math.cos(rad) * vel;
+                this.vy = Math.sin(rad) * vel;
             }
-        } else {
-            this.cx += this.vx;
-            this.cy += this.vy += opts.upFlow;
+        } else if (this.phase === 'balloon') {
+            ctx.strokeStyle = this.lightColor.replace('light', 80);
 
-            ctx.fillStyle = this.color;
-            ctx.beginPath();
-            generateBalloonPath(this.cx, this.cy, this.size);
-            ctx.fill();
+            if (this.spawning) {
+                ++this.tick;
+                ctx.fillStyle = this.lightColor.replace('light', 70);
+                ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
 
-            ctx.beginPath();
-            ctx.moveTo(this.cx, this.cy);
-            ctx.lineTo(this.cx, this.cy + this.size);
-            ctx.stroke();
+                if (this.tick >= this.spawnTime) {
+                    this.tick = 0;
+                    this.spawning = false;
+                    this.inflating = true;
+                }
+            } else if (this.inflating) {
+                ++this.tick;
 
-            ctx.fillStyle = this.lightColor.replace('light', 70);
-            ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);
+                var proportion = this.tick / this.inflateTime,
+                    x = this.cx = this.x,
+                    y = this.cy = this.y - this.size * proportion;
 
-            if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
-                this.phase = 'done';
+                ctx.fillStyle = this.alphaColor.replace('alp', proportion);
+                ctx.beginPath();
+                generateBalloonPath(x, y, this.size * proportion);
+                ctx.fill();
+
+                ctx.beginPath();
+                ctx.moveTo(x, y);
+                ctx.lineTo(x, this.y);
+                ctx.stroke();
+
+                ctx.fillStyle = this.lightColor.replace('light', 70);
+                ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
+
+                if (this.tick >= this.inflateTime) {
+                    this.tick = 0;
+                    this.inflating = false;
+                }
+            } else {
+                this.cx += this.vx;
+                this.cy += this.vy += opts.upFlow;
+
+                ctx.fillStyle = this.color;
+                ctx.beginPath();
+                generateBalloonPath(this.cx, this.cy, this.size);
+                ctx.fill();
+
+                ctx.beginPath();
+                ctx.moveTo(this.cx, this.cy);
+                ctx.lineTo(this.cx, this.cy + this.size);
+                ctx.stroke();
+
+                ctx.fillStyle = this.lightColor.replace('light', 70);
+                ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);
+
+                if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
+                    this.phase = 'done';
+            }
         }
     }
-}
-function Shard(x, y, vx, vy, color) {
-    var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();
+    function Shard(x, y, vx, vy, color) {
+        var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();
 
-    this.vx = vx * vel;
-    this.vy = vy * vel;
+        this.vx = vx * vel;
+        this.vy = vy * vel;
 
-    this.x = x;
-    this.y = y;
+        this.x = x;
+        this.y = y;
 
-    this.prevPoints = [[x, y]];
-    this.color = color;
+        this.prevPoints = [[x, y]];
+        this.color = color;
 
-    this.alive = true;
+        this.alive = true;
 
-    this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
-}
-Shard.prototype.step = function () {
-    this.x += this.vx;
-    this.y += this.vy += opts.gravity;
+        this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
+    }
+    Shard.prototype.step = function () {
+        this.x += this.vx;
+        this.y += this.vy += opts.gravity;
 
-    if (this.prevPoints.length > opts.fireworkShardPrevPoints)
-        this.prevPoints.shift();
+        if (this.prevPoints.length > opts.fireworkShardPrevPoints)
+            this.prevPoints.shift();
 
-    this.prevPoints.push([this.x, this.y]);
+        this.prevPoints.push([this.x, this.y]);
 
-    var lineWidthProportion = this.size / this.prevPoints.length;
+        var lineWidthProportion = this.size / this.prevPoints.length;
 
-    for (var k = 0; k < this.prevPoints.length - 1; ++k) {
-        var point = this.prevPoints[k],
-            point2 = this.prevPoints[k + 1];
+        for (var k = 0; k < this.prevPoints.length - 1; ++k) {
+            var point = this.prevPoints[k],
+                point2 = this.prevPoints[k + 1];
 
-        ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
-        ctx.lineWidth = k * lineWidthProportion;
-        ctx.beginPath();
-        ctx.moveTo(point[0], point[1]);
-        ctx.lineTo(point2[0], point2[1]);
-        ctx.stroke();
+            ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
+            ctx.lineWidth = k * lineWidthProportion;
+            ctx.beginPath();
+            ctx.moveTo(point[0], point[1]);
+            ctx.lineTo(point2[0], point2[1]);
+            ctx.stroke();
+        }
+
+        if (this.prevPoints[0][1] > hh)
+            this.alive = false;
+    }
+    function generateBalloonPath(x, y, size) {
+        ctx.moveTo(x, y);
+        ctx.bezierCurveTo(x - size / 2, y - size / 2,
+            x - size / 4, y - size,
+            x, y - size);
+        ctx.bezierCurveTo(x + size / 4, y - size,
+            x + size / 2, y - size / 2,
+            x, y);
     }
 
-    if (this.prevPoints[0][1] > hh)
-        this.alive = false;
-}
-function generateBalloonPath(x, y, size) {
-    ctx.moveTo(x, y);
-    ctx.bezierCurveTo(x - size / 2, y - size / 2,
-        x - size / 4, y - size,
-        x, y - size);
-    ctx.bezierCurveTo(x + size / 4, y - size,
-        x + size / 2, y - size / 2,
-        x, y);
-}
+    function anim() {
+        window.requestAnimationFrame(anim);
 
-function anim() {
-    window.requestAnimationFrame(anim);
+        // Clear the canvas for the next frame
+        ctx.clearRect(0, 0, w, h);
 
-    // Clear the canvas for the next frame
-    ctx.clearRect(0, 0, w, h);
+        ctx.translate(hw, hh);
 
-    ctx.translate(hw, hh);
+        var done = true;
+        for (var l = 0; l < letters.length; ++l) {
+            letters[l].step();
+            if (letters[l].phase !== 'done') done = false;
+        }
 
-    var done = true;
-    for (var l = 0; l < letters.length; ++l) {
-        letters[l].step();
-        if (letters[l].phase !== 'done') done = false;
+        ctx.translate(-hw, -hh);
+
+        if (done)
+            for (var l = 0; l < letters.length; ++l)
+                letters[l].reset();
     }
 
-    ctx.translate(-hw, -hh);
-
-    if (done)
-        for (var l = 0; l < letters.length; ++l)
-            letters[l].reset();
-}
-
-for (var i = 0; i < opts.strings.length; ++i) {
-    for (var j = 0; j < opts.strings[i].length; ++j) {
-        letters.push(new Letter(opts.strings[i][j],
-            j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
-            i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
+    for (var i = 0; i < opts.strings.length; ++i) {
+        for (var j = 0; j < opts.strings[i].length; ++j) {
+            letters.push(new Letter(opts.strings[i][j],
+                j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
+                i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
+        }
     }
-}
 
-anim();
+    anim();
 
-window.addEventListener('resize', function () {
-    w = c.width = window.innerWidth;
-    h = c.height = window.innerHeight;
+    window.addEventListener('resize', function () {
+        w = c.width = window.innerWidth;
+        h = c.height = window.innerHeight;
 
-    hw = w / 2;
-    hh = h / 2;
+        hw = w / 2;
+        hh = h / 2;
 
-    ctx.font = opts.charSize + 'px Verdana';
-})
+        ctx.font = opts.charSize + 'px Verdana';
+    })
 
 </script>
 <script src="{% static 'build/js/dashboardDriver.js' %}"></script>
diff --git a/templates/index.html b/templates/index.html
index 7701a8aba..8eeed0d95 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -61,9 +61,9 @@
     {% if messages %}
         <div class="oh-alert-container">
             {% for message in messages %}
-            <div class="oh-alert oh-alert--animated {{message.tags}}">
-                {{ message }}
-            </div>
+                <div class="oh-alert oh-alert--animated {{message.tags}}">
+                    {{ message }}
+                </div>
             {% endfor %}
         </div>
     {% endif %}
@@ -75,17 +75,7 @@
     {% endif %}
     <button id="reloadMessagesButton" hx-get="{% url 'reload-messages' %}" hx-swap="afterend" hidden hx-target="#reloadMessages"></button>
 
-    <div class="oh-wrapper-main" :class="!sidebarOpen ? 'oh-wrapper-main--closed' : ''" x-data="{sidebarOpen: true}"
-        @load.window="
-                        width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-                        if (width < 575.98) {
-                          sidebarOpen = false
-                        }" @resize.window="
-                        width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
-                        if (width < 575.98) {
-                          sidebarOpen = false
-                        }"
-        >
+    <div class="oh-wrapper-main">
 
         <!-- Start of Sidebar -->
         <div id="sidebar">
@@ -136,8 +126,7 @@
             <nav class="oh-navbar" style="width: -webkit-fill-available;;">
                 <div class="oh-wrapper oh-navbar__wrapper">
                     <div class="oh-navbar__toggle-container">
-                        <a href="#" class="oh-navbar__toggle-link oh-link__unstyled"
-                            @click="sidebarOpen = !sidebarOpen">
+                        <a href="#" class="oh-navbar__toggle-link oh-link__unstyled" onclick="handleSidebarToggle()">
                             <img src="{% static 'images/ui/menu.svg' %}" width="24" height="24"
                                 class="oh-navbar__toggle-menu" loading="lazy" />
                         </a>
@@ -160,11 +149,11 @@
 
                         {% if request.user|any_permission:'base' or perms.attendance.view_attendancevalidationcondition %}
                             <!-- Start of settings button in nav bar -->
-                                <div class="oh-navbar__action-icons" title="Settings">
-                                    <a href="/settings/general-settings" id="settingsMenu" class="oh-navbar__action-icons-link">
-                                        <ion-icon name="settings-outline" class="oh-navbar__icon"></ion-icon>
-                                    </a>
-                                </div>
+                            <div class="oh-navbar__action-icons" title="Settings">
+                                <a href="{% url 'general-settings' %}" id="settingsMenu" class="oh-navbar__action-icons-link">
+                                    <ion-icon name="settings-outline" class="oh-navbar__icon"></ion-icon>
+                                </a>
+                            </div>
                             <!-- End of settings button in nav bar -->
                         {% endif %}
 
@@ -195,11 +184,11 @@
 
             <!-- Start of main section -->
             <div id='main-section'>
-                <div id="tripple-loader-contaner"
+                {% comment %} <div id="tripple-loader-contaner"
                     class="d-flex justify-content-center align-items-center  tripple-loader-contaner--visible"
                     style="height:90vh;">
                     <div class="triple-spinner"></div>
-                </div>
+                </div> {% endcomment %}
                 <div id="main-section-data" style="display: none;" data-lang="{{LANGUAGE_CODE}}">
                     {% block content %}
                         {% include 'dashboard.html' %}
@@ -252,7 +241,7 @@
     {% if "attendance"|app_installed %}
         <script src="{% static 'attendance/actions.js' %}"></script>
     {% endif %}
-    <script type="module"  src="{% static 'images/ionicons/ui_icons/ionicons/ionicons.esm.js' %}"></script>
+    <script type="module" src="{% static 'images/ionicons/ui_icons/ionicons/ionicons.esm.js' %}"></script>
     <script src="{% static '/build/js/sweetAlert.js' %}"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
@@ -291,8 +280,6 @@
             function switchTab(e) {
                 let parentContainerEl = e.target.closest(".oh-tabs");
                 let tabElement = e.target.closest(".oh-tabs__tab");
-
-
                 let targetSelector = e.target.dataset.target;
                 let targetEl = parentContainerEl
                     ? parentContainerEl.querySelector(targetSelector)