diff --git a/assets/css/styles.css b/assets/css/styles.css
index a0471ee..4c4bce8 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -748,6 +748,13 @@ textarea {
   letter-spacing: 0.02em;
 }
 
+.asset-image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 10px;
+}
+
 .asset-card-body {
   display: grid;
   gap: 12px;
diff --git a/assets/js/asset-websites.js b/assets/js/asset-websites.js
index be1e9d7..8ffff00 100644
--- a/assets/js/asset-websites.js
+++ b/assets/js/asset-websites.js
@@ -52,6 +52,15 @@ const renderFilters = categories => {
 
 const renderCards = (sites, categoryData) => {
   const cards = [];
+  const bannerMap = {
+    kenney: '../assets/assetWebsites/KennyBanner.png',
+    opengameart: '../assets/assetWebsites/Opengameart-logo.jpg',
+    pixabay: '../assets/assetWebsites/Pixabay-logo.svg.png',
+    freesound: '../assets/assetWebsites/Freesound_project_website_logo.png',
+    sonniss_gdc: '../assets/assetWebsites/Sonniss GameAudioGD.png',
+    zapsplat: '../assets/assetWebsites/zapsplat_logo_share.png',
+  };
+
   Object.entries(sites).forEach(([siteId, site]) => {
     const categoryEntries = categoryData.siteCategories[siteId];
     const categories = categoryEntries ? Array.from(categoryEntries.values()) : [];
@@ -69,8 +78,16 @@ const renderCards = (sites, categoryData) => {
     const image = document.createElement('div');
     image.className = 'asset-image';
     image.setAttribute('aria-hidden', 'true');
-    // Using simple placeholder logic; in a real app, map site.name to an image file
-    image.innerHTML = '<span>Image</span>';
+    const bannerSrc = bannerMap[siteId];
+
+    if (bannerSrc) {
+      const img = document.createElement('img');
+      img.src = bannerSrc;
+      img.alt = `${site.name} banner`;
+      image.appendChild(img);
+    } else {
+      image.innerHTML = '<span>Image</span>';
+    }
 
     const body = document.createElement('div');
     body.className = 'asset-card-body';