diff --git a/website/index.php b/website/index.php
index 90e41dd7..9ee5f1dc 100644
--- a/website/index.php
+++ b/website/index.php
@@ -486,9 +486,26 @@ if (isset($_SESSION['steamid'])) {
 				// Clear previous skins
 				skinGrid.innerHTML = '';
 
-				// Populate skins with lazy loading
+				// Populate skins with intersection observer lazy loading
 				const skinEntries = Object.entries(skinsData[weaponId]);
 				
+				// Create intersection observer for lazy loading
+				const imageObserver = new IntersectionObserver((entries, observer) => {
+					entries.forEach(entry => {
+						if (entry.isIntersecting) {
+							const img = entry.target;
+							const imageUrl = img.dataset.src;
+							if (imageUrl && !img.src) {
+								img.setAttribute('data-loading', 'true');
+								img.src = imageUrl;
+								observer.unobserve(img);
+							}
+						}
+					});
+				}, {
+					rootMargin: '100px' // Load images 100px before they're visible
+				});
+				
 				skinEntries.forEach(([paintId, skin], index) => {
 					const skinItem = document.createElement('div');
 					skinItem.className = 'skin-item';
@@ -498,28 +515,25 @@ if (isset($_SESSION['steamid'])) {
 					const img = document.createElement('img');
 					img.alt = skin.paint_name;
 					img.className = 'skin-image';
+					img.style.minHeight = '300px';
 					
-					// Add loading placeholder
-					img.style.background = 'linear-gradient(145deg, #333, #222)';
-					img.style.minHeight = '180px';
-					
-					// Lazy load: only load first 12 images immediately, rest on scroll/delay
-					if (index < 12) {
+					// Only load first 8 images immediately, rest use intersection observer
+					if (index < 8) {
 						img.src = skin.image_url;
 					} else {
-						// Load after a delay or when scrolled into view
-						setTimeout(() => {
-							img.src = skin.image_url;
-						}, index * 50); // Stagger loading
+						// Store URL in data attribute for lazy loading
+						img.dataset.src = skin.image_url;
+						imageObserver.observe(img);
 					}
 					
 					img.onerror = function() {
 						console.log('Failed to load image:', skin.image_url);
-						this.style.background = '#333';
-						this.style.content = '""';
+						this.style.background = '#444';
+						this.removeAttribute('data-loading');
 					};
 					img.onload = function() {
 						this.style.background = 'transparent';
+						this.removeAttribute('data-loading');
 						console.log('Successfully loaded image:', skin.image_url);
 					};
 					
diff --git a/website/style.css b/website/style.css
index 494f6ac9..18a4f135 100644
--- a/website/style.css
+++ b/website/style.css
@@ -403,9 +403,10 @@ body {
 }
 
 .overlay-content {
-	width: 1000px;
-	height: 700px;
-	max-height: 85vh;
+	width: 1400px;
+	height: 800px;
+	max-height: 95vh;
+	max-width: 98vw;
 }
 
 .modal-content {
@@ -448,8 +449,8 @@ body {
 /* Skin Grid */
 .skin-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	gap: 1rem;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 1.5rem;
 	padding: 1.5rem;
 	overflow-y: auto;
 	flex: 1;
@@ -472,14 +473,20 @@ body {
 
 .skin-item .skin-image {
 	width: 100%;
-	height: 180px;
+	height: 300px;
 	object-fit: contain;
 	background: linear-gradient(145deg, #333, #222);
-	padding: 0.75rem;
+	padding: 0.5rem;
 	display: block;
 	box-sizing: border-box;
-	transform: scale(1.2);
+	transform: scale(1.6);
 	transform-origin: center;
+	transition: opacity 0.3s ease;
+}
+
+.skin-item .skin-image[data-loading="true"] {
+	opacity: 0.6;
+	background: linear-gradient(145deg, #444, #333);
 }
 
 .skin-name {