diff --git a/src/cards/wakatime.js b/src/cards/wakatime.js
index 64ded83d41692..c70fe2b662774 100644
--- a/src/cards/wakatime.js
+++ b/src/cards/wakatime.js
@@ -25,6 +25,7 @@ const languageColors = require("../common/languageColors.json"); // now works
 const DEFAULT_CARD_WIDTH = 495;
 const MIN_CARD_WIDTH = 250;
 const COMPACT_LAYOUT_MIN_WIDTH = 400;
+const DEFAULT_LINE_HEIGHT = 25;
 
 /**
  * Creates the no coding activity SVG node.
@@ -103,7 +104,7 @@ const createLanguageTextNode = ({ langs, y, display_format, card_width }) => {
     return createCompactLangNode({
       lang,
       x: isLeft ? LEFT_X : RIGHT_X,
-      y: isLeft ? 12.5 * index + y : 12.5 + 12.5 * index,
+      y: y + DEFAULT_LINE_HEIGHT * Math.floor(index / 2),
       display_format,
     });
   });
@@ -135,6 +136,8 @@ const createTextNode = ({
   progressBarBackgroundColor,
   progressBarWidth,
 }) => {
+  const PROGRESSBAR_PADDING = 130;
+  const HIDDEN_PROGRESSBAR_PADDING = 170;
   const staggerDelay = (index + 3) * 150;
 
   const cardProgress = hideProgress
@@ -156,7 +159,7 @@ const createTextNode = ({
       <text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
       <text
         class="stat"
-        x="${hideProgress ? 170 : 130 + progressBarWidth}"
+        x="${hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth}"
         y="12.5"
       >${value}</text>
       ${cardProgress}
@@ -249,7 +252,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     hide_border = false,
     card_width,
     hide,
-    line_height = 25,
+    line_height = DEFAULT_LINE_HEIGHT,
     title_color,
     icon_color,
     text_color,
@@ -318,8 +321,8 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   // RENDER COMPACT LAYOUT
   if (layout === "compact") {
-    let width = normalizedWidth - 5;
-    height = 90 + Math.round(filteredLanguages.length / 2) * 25;
+    const PROGRESSBAR_PADDING = 25;
+    height = 90 + Math.round(filteredLanguages.length / 2) * DEFAULT_LINE_HEIGHT;
 
     // progressOffset holds the previous language's width and used to offset the next language
     // so that we can stack them one after another, like this: [--][----][---]
@@ -327,7 +330,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     const compactProgressBar = filteredLanguages
       .map((language) => {
         // const progress = (width * lang.percent) / 100;
-        const progress = ((width - 25) * language.percent) / 100;
+        const progress = ((normalizedWidth - PROGRESSBAR_PADDING) * language.percent) / 100;
 
         const languageColor = languageColors[language.name] || "#858585";
 
@@ -349,7 +352,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
     finalLayout = `
       <mask id="rect-mask">
-      <rect x="25" y="0" width="${width - 50}" height="8" fill="white" rx="5" />
+      <rect x="${PROGRESSBAR_PADDING}" y="0" width="${normalizedWidth - 2 * PROGRESSBAR_PADDING}" height="8" fill="white" rx="5" />
       </mask>
       ${compactProgressBar}
       ${
@@ -372,6 +375,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
       }
     `;
   } else {
+    const TOTAL_TEXT_WIDTH = 275;
     finalLayout = flexLayout({
       items: filteredLanguages.length
         ? filteredLanguages.map((language, index) => {
@@ -386,7 +390,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
               // @ts-ignore
               progressBarBackgroundColor: textColor,
               hideProgress: hide_progress,
-              progressBarWidth: normalizedWidth - 275,
+              progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
             });
           })
         : [