diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js
index 09b58418..0d0dbcce 100644
--- a/src/cards/repo-card.js
+++ b/src/cards/repo-card.js
@@ -61,6 +61,7 @@ const renderRepoCard = (repo, options = {}) => {
     isTemplate,
     starCount,
     forkCount,
+    openGraphImageUrl,
   } = repo;
   const {
     hide_border = false,
@@ -141,6 +142,7 @@ const renderRepoCard = (repo, options = {}) => {
     height,
     border_radius,
     colors,
+    imageUrl: openGraphImageUrl,
   });
 
   card.disableAnimations();
diff --git a/src/common/Card.js b/src/common/Card.js
index d32da562..93564ffd 100644
--- a/src/common/Card.js
+++ b/src/common/Card.js
@@ -11,6 +11,8 @@ class Card {
    * @param {string?=} args.customTitle Card custom title.
    * @param {string?=} args.defaultTitle Card default title.
    * @param {string?=} args.titlePrefixIcon Card title prefix icon.
+   * @param {string?=} args.imageUrl Card preview image.
+   * @param {number?=} args.imageHeight Card preview image.
    * @param {object?=} args.colors Card colors arguments.
    * @param {string} args.colors.titleColor Card title color.
    * @param {string} args.colors.textColor Card text color.
@@ -27,6 +29,8 @@ class Card {
     customTitle,
     defaultTitle = "",
     titlePrefixIcon,
+    imageUrl = "",
+    imageHeight = 200,
   }) {
     this.width = width;
     this.height = height;
@@ -36,6 +40,8 @@ class Card {
 
     this.border_radius = border_radius;
 
+    this.imageHeight = imageHeight;
+    this.imageUrl = imageUrl;
     // returns theme based colors with proper overrides and defaults
     this.colors = colors;
     this.title =
@@ -51,6 +57,10 @@ class Card {
     this.animations = true;
     this.a11yTitle = "";
     this.a11yDesc = "";
+    if (this.imageUrl) {
+      this.height += this.imageHeight;
+      this.paddingY += this.imageHeight;
+    }
   }
 
   /**
@@ -199,6 +209,18 @@ class Card {
     `;
   };
 
+  renderImage = () => {
+    if (!this.imageUrl) {
+      return "";
+    }
+    return `
+    <g transform="translate(0, 0)">
+    <image x="0" y="0" height="${this.imageHeight}"
+      href="${this.imageUrl}">
+    </image>
+  </g>`;
+  };
+
   /**
    * @param {string} body The inner body of the card.
    * @returns {string} The rendered card.
@@ -264,6 +286,7 @@ class Card {
         >
           ${body}
         </g>
+          ${this.renderImage()}
       </svg>
     `;
   }
diff --git a/src/fetchers/repo-fetcher.js b/src/fetchers/repo-fetcher.js
index 6438f889..b361a987 100644
--- a/src/fetchers/repo-fetcher.js
+++ b/src/fetchers/repo-fetcher.js
@@ -34,6 +34,7 @@ const fetcher = (variables, token) => {
           name
         }
         forkCount
+        openGraphImageUrl
       }
       query getRepo($login: String!, $repo: String!) {
         user(login: $login) {
diff --git a/src/fetchers/types.d.ts b/src/fetchers/types.d.ts
index affb407b..e7775eea 100644
--- a/src/fetchers/types.d.ts
+++ b/src/fetchers/types.d.ts
@@ -22,6 +22,7 @@ export type RepositoryData = {
   };
   forkCount: number;
   starCount: number;
+  openGraphImageUrl: string;
 };
 
 export type StatsData = {
diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap
index f38ac26e..65920589 100644
--- a/tests/__snapshots__/renderWakatimeCard.test.js.snap
+++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap
@@ -150,6 +150,7 @@ exports[`Test Render WakaTime Card should render correctly with compact layout 1
     </svg>
   
         </g>
+          
       </svg>
     "
 `;
@@ -302,6 +303,7 @@ exports[`Test Render WakaTime Card should render correctly with compact layout w
     </svg>
   
         </g>
+          
       </svg>
     "
 `;