diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss
index 5685c4f3d..c687ed2f8 100644
--- a/src/components/cardbuilder/card.scss
+++ b/src/components/cardbuilder/card.scss
@@ -327,6 +327,7 @@ button::-moz-focus-inner {
     vertical-align: middle;
     font-family: inherit;
     font-size: inherit;
+    text-decoration: none;
 }
 
 .textActionButton:hover {
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 6ce72d08b..c9c7b8ac0 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -22,6 +22,7 @@ import './card.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../guide/programs.scss';
 import ServerConnections from '../ServerConnections';
+import { appRouter } from '../appRouter';
 
         const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -1038,9 +1039,10 @@ import ServerConnections from '../ServerConnections';
                 return text;
             }
 
-            let html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
+            const url = appRouter.getRouteUrl(item);
+            let html = '<a href="' + url + '" ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' class="itemAction textActionButton" title="' + text + '" data-action="link">';
             html += text;
-            html += '</button>';
+            html += '</a>';
 
             return html;
         }
@@ -1349,10 +1351,11 @@ import ServerConnections from '../ServerConnections';
             } else {
                 const cardImageContainerAriaLabelAttribute = ` aria-label="${item.Name}"`;
 
+                const url = appRouter.getRouteUrl(item);
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + cardImageContainerAriaLabelAttribute + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
+                cardImageContainerOpen = imgUrl ? ('<a href="' + url + '" data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + cardImageContainerAriaLabelAttribute + '>') : ('<a href="' + url + '" data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction"' + cardImageContainerAriaLabelAttribute + '>');
 
-                cardImageContainerClose = '</button>';
+                cardImageContainerClose = '</a>';
             }
 
             const cardScalableClass = 'cardScalable';
@@ -1470,6 +1473,8 @@ import ServerConnections from '../ServerConnections';
             let html = '';
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
+            const url = appRouter.getRouteUrl(item);
+            html += '<a href="' + url + '" class="cardImageContainer"></a>';
 
             const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 5ba96adb4..1e8278614 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -791,7 +791,7 @@ function renderDetailImage(elem, item, imageLoader) {
     imageLoader.lazyChildren(elem);
 
     // Avoid breaking the design by preventing focus of the poster using the keyboard.
-    elem.querySelector('button').tabIndex = -1;
+    elem.querySelector('a').tabIndex = -1;
 }
 
 function renderImage(page, item) {