diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss
new file mode 100644
index 00000000..c8a1de09
--- /dev/null
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss
@@ -0,0 +1,15 @@
+@use "../../../scss/globals.scss";
+
+.hero-panel-playtime {
+  &__download-details {
+    gap: globals.$spacing-unit;
+    display: flex;
+    color: globals.$body-color;
+    align-items: center;
+  }
+
+  &__downloads-link {
+    color: globals.$body-color;
+    text-decoration: underline;
+  }
+}
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
index 7955694b..567858c3 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx
@@ -1,24 +1,18 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import * as styles from "./hero-panel.css";
 import { formatDownloadProgress } from "@renderer/helpers";
 import { useDate, useDownload, useFormat } from "@renderer/hooks";
 import { Link } from "@renderer/components";
-
 import { gameDetailsContext } from "@renderer/context";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import "./hero-panel-playtime.scss";
 
 export function HeroPanelPlaytime() {
   const [lastTimePlayed, setLastTimePlayed] = useState("");
-
   const { game, isGameRunning } = useContext(gameDetailsContext);
-
   const { t } = useTranslation("game_details");
-
   const { numberFormatter } = useFormat();
-
   const { progress, lastPacket } = useDownload();
-
   const { formatDistance } = useDate();
 
   useEffect(() => {
@@ -55,8 +49,8 @@ export function HeroPanelPlaytime() {
     game.status === "active" && lastPacket?.game.id === game.id;
 
   const downloadInProgressInfo = (
-    <div className={styles.downloadDetailsRow}>
-      <Link to="/downloads" className={styles.downloadsLink}>
+    <div className="hero-panel-playtime__download-details">
+      <Link to="/downloads" className="hero-panel-playtime__downloads-link">
         {game.status === "active"
           ? t("download_in_progress")
           : t("download_paused")}
@@ -81,7 +75,6 @@ export function HeroPanelPlaytime() {
     return (
       <>
         <p>{t("playing_now")}</p>
-
         {hasDownload && downloadInProgressInfo}
       </>
     );