diff --git a/Pengu Loader/plugins/ROSE-CustomSkinSelector/index.js b/Pengu Loader/plugins/ROSE-CustomSkinSelector/index.js
index e7efc6ff..500fa444 100644
--- a/Pengu Loader/plugins/ROSE-CustomSkinSelector/index.js	
+++ b/Pengu Loader/plugins/ROSE-CustomSkinSelector/index.js	
@@ -319,6 +319,8 @@
 }
 .${pnl} .chroma-modal { background: #000; display: flex; flex-direction: column; width: 305px; position: relative; z-index: 0; }
 .${pnl} .chroma-modal.chroma-view { min-height: 355px; max-height: 420px; }
+.${pnl} .champ-select-chroma-modal { background: #000; display: flex; flex-direction: column; width: 305px; position: relative; z-index: 0; }
+.${pnl} .champ-select-chroma-modal.chroma-view { min-height: 0; max-height: 420px; }
 .${pnl} .border {
   position: absolute; top: 0; left: 0; box-sizing: border-box; background-color: transparent;
   box-shadow: 0 0 0 1px rgba(1,10,19,0.48); transition: 250ms all cubic-bezier(0.02,0.85,0.08,0.99);
@@ -329,13 +331,12 @@
 }
 .${pnl} .lc-flyout-content { position: relative; }
 .${pnl} .chroma-information {
-  background-image: url('lol-game-data/assets/content/src/LeagueClient/GameModeAssets/Classic_SRU/img/champ-select-flyout-background.jpg');
-  background-size: cover; border-bottom: thin solid #463714; flex-grow: 1; height: 315px;
-  position: relative; width: 100%; z-index: 1;
+  border-bottom: thin solid #463714; flex-grow: 0;
+  overflow: hidden; position: relative; width: 100%; z-index: 1;
 }
+.${pnl} .chroma-information[data-has-preview="false"] { display: none; }
 .${pnl} .chroma-information-image {
-  bottom: 0; left: 0; position: absolute; right: 0; top: 0;
-  background-size: contain; background-position: center; background-repeat: no-repeat;
+  bottom: 0; display: block; height: auto; left: 0; position: absolute; width: 100%;
 }
 .${pnl} .child-skin-name {
   bottom: 10px; color: #f7f0de;
@@ -343,6 +344,10 @@
   font-size: 24px; font-weight: 700; position: absolute; text-align: center; width: 100%;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+.${pnl} .standalone-skin-name {
+  bottom: auto; box-sizing: border-box; display: none; padding: 10px 12px 8px; position: relative;
+}
+.${pnl} .champ-select-chroma-modal[data-has-preview="false"] > .standalone-skin-name { display: block; }
 .${pnl} .chroma-selection {
   pointer-events: all; height: 100%; overflow: auto; transform: translateZ(0);
   -webkit-mask-box-image-source: url("/fe/lol-static-assets/images/uikit/scrollable/scrollable-content-gradient-mask-bottom.png");
@@ -557,13 +562,17 @@
     const chromaInfo = document.createElement("div");
     chromaInfo.className = "chroma-information";
 
-    const preview = document.createElement("div");
+    const preview = document.createElement("img");
     preview.className = "chroma-information-image";
 
     const skinName = document.createElement("div");
     skinName.className = "child-skin-name";
     skinName.textContent = getCurrentSkinContext().skinName;
 
+    const standaloneSkinName = document.createElement("div");
+    standaloneSkinName.className = "child-skin-name standalone-skin-name";
+    standaloneSkinName.textContent = skinName.textContent;
+
     chromaInfo.appendChild(preview);
     chromaInfo.appendChild(skinName);
 
@@ -571,11 +580,39 @@
     scrollable.className = "chroma-selection";
 
     const list = document.createElement("ul");
+    let previewLoadToken = 0;
 
     const setPreviewImage = (url, label) => {
-      preview.style.display = "block";
-      preview.style.backgroundImage = url ? `url('${url}')` : "";
-      skinName.textContent = label || getCurrentSkinContext().skinName;
+      previewLoadToken += 1;
+      const loadToken = previewLoadToken;
+      const hasPreview = Boolean(url);
+      const nextLabel = label || getCurrentSkinContext().skinName;
+
+      skinName.textContent = nextLabel;
+      standaloneSkinName.textContent = nextLabel;
+
+      if (!hasPreview) {
+        modal.dataset.hasPreview = "false";
+        chromaInfo.dataset.hasPreview = "false";
+        preview.removeAttribute("src");
+        chromaInfo.style.height = "";
+        if (panel && panelButtonRef) requestAnimationFrame(() => positionPanel(panel, panelButtonRef));
+        return;
+      }
+
+      const loader = new Image();
+      loader.addEventListener("load", () => {
+        if (loadToken !== previewLoadToken) return;
+        const width = chromaInfo.clientWidth || 305;
+        if (loader.naturalWidth > 0) {
+          chromaInfo.style.height = `${loader.naturalHeight * (width / loader.naturalWidth)}px`;
+        }
+        preview.src = url;
+        modal.dataset.hasPreview = "true";
+        chromaInfo.dataset.hasPreview = "true";
+        if (panel && panelButtonRef) positionPanel(panel, panelButtonRef);
+      });
+      loader.src = url;
     };
 
     const noneEntry = {
@@ -649,6 +686,7 @@
     scrollable.appendChild(list);
     modal.appendChild(border);
     modal.appendChild(chromaInfo);
+    modal.appendChild(standaloneSkinName);
     modal.appendChild(scrollable);
     flyoutContent.appendChild(modal);
     flyout.appendChild(flyoutContent);