diff --git a/static/css/style.css b/static/css/style.css
index 936e517..0198f83 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -496,6 +496,16 @@ input:focus {
     margin-top: 0.25rem;
 }
 
+.events-total {
+    margin-left: auto;
+    background: rgba(15, 118, 110, 0.1);
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius);
+    border: 1px solid var(--primary-light);
+    color: var(--text-primary);
+    font-size: 0.95rem;
+}
+
 .events-list {
     grid-column: 1 / -1;
     display: grid;
diff --git a/static/index.html b/static/index.html
index 08f28e8..a9312c5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ZynkTime - Time Reporting</title>
-    <link rel="stylesheet" href="/static/css/style.css">
+    <link rel="stylesheet" href="/static/css/style.css?v=2">
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
@@ -112,6 +112,7 @@
                     <div class="approval-actions">
                         <button class="btn btn-secondary" id="loadEvents">Load Events</button>
                         <button class="btn btn-primary" id="approveEvents">Approve Events</button>
+                        <div id="eventsTotal" class="events-total" style="display: none;"></div>
                     </div>
                     <div class="events-list" id="eventsList">
                         <div class="loading">No events loaded yet</div>
@@ -154,6 +155,6 @@
         <p>Processing your request...</p>
     </div>
 
-    <script src="/static/js/app.js"></script>
+    <script src="/static/js/app.js?v=2"></script>
 </body>
 </html>
diff --git a/static/js/app.js b/static/js/app.js
index b918f8e..eaf59b9 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -25,6 +25,7 @@ const endDateInput = document.getElementById('endDate');
 const loadEventsBtn = document.getElementById('loadEvents');
 const approveEventsBtn = document.getElementById('approveEvents');
 const eventsList = document.getElementById('eventsList');
+const eventsTotal = document.getElementById('eventsTotal');
 
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
@@ -352,19 +353,24 @@ projectSelect.addEventListener('change', updateSubmitButton);
 function renderEvents(events) {
     if (!events || events.length === 0) {
         eventsList.innerHTML = '<div class="loading">No events found for range</div>';
+        eventsTotal.style.display = 'none';
         return;
     }
     
+    let totalHours = 0;
     eventsList.innerHTML = '';
     events.forEach(event => {
         const approved = event.approved;
+        const hours = parseFloat(event.hours) || 0;
+        totalHours += hours;
+        
         const item = document.createElement('div');
         item.className = 'event-item';
         item.innerHTML = `
             <div>
                 <div class="project-name">${event.date || 'Unknown date'}</div>
                 <div class="event-meta">
-                    <span>Hours: ${event.hours ?? '-'}</span>
+                    <span>Hours: ${hours.toFixed(2)}</span>
                     <span>Activity: ${event.activity?.id ?? '-'}</span>
                     <span>Project: ${event["client-project"]?.id ?? '-'}</span>
                 </div>
@@ -375,6 +381,9 @@ function renderEvents(events) {
         `;
         eventsList.appendChild(item);
     });
+
+    eventsTotal.innerHTML = `Total Hours: <strong>${totalHours.toFixed(2)}</strong>`;
+    eventsTotal.style.display = 'block';
 }
 
 function getDateRange() {
