diff --git a/src/gui/src/UI/Dashboard/TabHome.js b/src/gui/src/UI/Dashboard/TabHome.js
index c1d47fa21..ec554fc51 100644
--- a/src/gui/src/UI/Dashboard/TabHome.js
+++ b/src/gui/src/UI/Dashboard/TabHome.js
@@ -149,7 +149,7 @@ const TabHome = {
 
         // Recent apps card (rectangle)
         h += '<div class="bento-card bento-recent">';
-        h += '<div class="bento-card-fancy-header">';
+        h += '<a href="#" class="bento-card-fancy-header" data-target-tab="apps">';
         h += '<div class="bento-card-fancy-icon bento-card-fancy-icon-apps">';
         h += '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>';
         h += '</div>';
@@ -160,7 +160,7 @@ const TabHome = {
         h += 'Recently used';
         h += '</span>';
         h += '</div>';
-        h += '</div>';
+        h += '</a>';
         h += '<div class="bento-recent-apps-container">';
         h += buildRecentAppsHTML();
         h += '</div>';
@@ -168,7 +168,7 @@ const TabHome = {
 
         // Usage card (spans full width on second row)
         h += '<div class="bento-card bento-usage">';
-        h += '<div class="bento-card-fancy-header">';
+        h += '<a href="#" class="bento-card-fancy-header" data-target-tab="usage">';
         h += '<div class="bento-card-fancy-icon bento-card-fancy-icon-usage">';
         h += '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z"/><path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3"/></svg>';
         h += '</div>';
@@ -179,7 +179,7 @@ const TabHome = {
         h += 'Monthly overview';
         h += '</span>';
         h += '</div>';
-        h += '</div>';
+        h += '</a>';
         h += '<div class="bento-usage-container">';
         h += buildUsageHTML();
         h += '</div>';
@@ -208,7 +208,7 @@ const TabHome = {
         });
 
         // Handle "View details" link clicks
-        $el_window.on('click', '.bento-view-more, .bento-usage-card-header', function (e) {
+        $el_window.on('click', '.bento-view-more, .bento-usage-card-header, .bento-card-fancy-header[data-target-tab]', function (e) {
             e.preventDefault();
             const targetTab = $(this).attr('data-target-tab');
             if ( targetTab ) {
diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css
index 796935b80..0d1579fc4 100644
--- a/src/gui/src/css/dashboard.css
+++ b/src/gui/src/css/dashboard.css
@@ -2170,6 +2170,8 @@ body {
     padding: 20px 24px;
     background: linear-gradient(135deg, var(--dashboard-fancy-header-start) 0%, var(--dashboard-fancy-header-end) 100%);
     border-bottom: 1px solid var(--dashboard-shadow-light);
+    text-decoration: none;
+    color: inherit;
 }
 
 .dashboard .bento-card-fancy-icon {