From 68f77fc77ad10a9b98541663f8e5da8a48ce582b Mon Sep 17 00:00:00 2001
From: gardenGnostic <ayanamirei403@gmail.com>
Date: Sun, 8 Mar 2026 22:03:45 +0100
Subject: [PATCH] v2.9.0

---
 index.html        | 160 ++++++--
 package-lock.json |   4 +-
 package.json      |   2 +-
 renderer.js       | 937 +++++++++++++++++++---------------------------
 skin_manager.js   | 390 +++++++++++++++++++
 strings.txt       |   5 +
 style.css         |  42 ++-
 7 files changed, 964 insertions(+), 576 deletions(-)
 create mode 100644 skin_manager.js

diff --git a/index.html b/index.html
index 1bf5c3b..356bc5a 100644
--- a/index.html
+++ b/index.html
@@ -27,39 +27,56 @@
     </div>
 
     <div class="main-wrapper">
-        <div class="sidebar">
-            <div class="sidebar-title">PATCH NOTES</div>
+        <div class="sidebar collapsed" id="main-sidebar">
+            <div class="sidebar-title" onclick="toggleSidebar()">
+                <span id="sidebar-title-text">PATCH NOTES</span>
+                <span id="sidebar-toggle-icon" title="Expand Patch Notes">▶</span>
+            </div>
             <div id="updates-list">
                 <div class="update-item">Loading updates...</div>
             </div>
         </div>
 
-        <div class="content-area">
-            <div class="relative">
-                <img src="minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo">
-                <div id="splash-text" class="splash-text">Splash!</div>
-            </div>
-    
-            <div id="btn-play-main" class="btn-mc btn-play nav-item" onclick="launchGame()" tabindex="0">PLAY</div>
-    
-            <div class="version-row">
-                <span class="version-label">Version:</span>
-                <div id="version-select-box" class="version-select-box nav-item" tabindex="0">
-                    <span id="current-version-display">Loading...</span>
-                    <div class="select-arrow">▼</div>
-                    <select id="version-select" class="hidden-select" onchange="updateSelectedRelease()">
-                        <option>Loading...</option>
-                    </select>
+        <div class="content-area" style="flex-direction: row; align-items: stretch; padding: 0;">
+            
+            <!-- Left Side: Main Menu -->
+            <div class="menu-column" style="flex: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 5;">
+                <div class="relative">
+                    <img src="minecraftlogo.png" class="mc-logo-img" alt="Minecraft Logo">
+                    <div id="splash-text" class="splash-text">Splash!</div>
                 </div>
-                <div id="btn-check-update" class="btn-mc btn-mini nav-item" onclick="checkForUpdatesManual()" title="Check for Updates" tabindex="0">
-                    <img src="restart.png" alt="Update">
+        
+                <div id="btn-play-main" class="btn-mc btn-play nav-item" onclick="launchGame()" tabindex="0">PLAY</div>
+        
+                <div class="version-row">
+                    <span class="version-label">Version:</span>
+                    <div id="version-select-box" class="version-select-box nav-item" tabindex="0">
+                        <span id="current-version-display">Loading...</span>
+                        <div class="select-arrow">▼</div>
+                        <select id="version-select" class="hidden-select" onchange="updateSelectedRelease()">
+                            <option>Loading...</option>
+                        </select>
+                    </div>
+                    <div id="btn-check-update" class="btn-mc btn-mini nav-item" onclick="checkForUpdatesManual()" title="Check for Updates" tabindex="0">
+                        <img src="restart.png" alt="Update">
+                    </div>
+                </div>
+        
+                <div class="flex gap-4 w-[500px] max-w-[90%]">
+                    <div class="btn-mc flex-grow nav-item" id="btn-instances" onclick="toggleInstances(true)" tabindex="0" style="font-size: 18px;">INSTANCES</div>
+                    <div class="btn-mc flex-grow nav-item" id="btn-profile" onclick="toggleProfile(true)" tabindex="0" style="font-size: 18px;">PROFILE</div>
+                    <div class="btn-mc flex-grow nav-item" id="btn-servers" onclick="toggleServers(true)" tabindex="0" style="font-size: 18px;">SERVERS</div>
+                    <div class="btn-mc flex-grow nav-item" id="btn-options" onclick="toggleOptions(true)" tabindex="0" style="font-size: 18px;">OPTIONS</div>
                 </div>
             </div>
-    
-            <div class="flex gap-4 w-[500px] max-w-[90%]">
-                <div class="btn-mc flex-grow nav-item" id="btn-profile" onclick="toggleProfile(true)" tabindex="0">PROFILE</div>
-                <div class="btn-mc flex-grow nav-item" id="btn-servers" onclick="toggleServers(true)" tabindex="0">SERVERS</div>
-                <div class="btn-mc flex-grow nav-item" id="btn-options" onclick="toggleOptions(true)" tabindex="0">OPTIONS</div>
+
+            <!-- Right Side: Skin Viewer -->
+            <div class="skin-column" style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 300px; padding-right: 0px;">
+                <div id="main-skin-viewer" style="width: 100%; height: 500px; cursor: grab; display: flex; align-items: center; justify-content: center;"></div>
+                
+                <div class="btn-mc nav-item" onclick="openSkinManager()" style="width: 250px; height: 48px; font-size: 20px; margin-top: -20px; z-index: 10; margin-left: auto; margin-right: auto;" tabindex="0">
+                    CHANGE SKIN
+                </div>
             </div>
     
             <div class="progress-container" id="progress-container">
@@ -103,6 +120,43 @@
         </div>
     </div>
 
+    <div class="modal-overlay" id="instances-modal">
+        <div class="modal-box" style="max-width: 900px;">
+            <div class="modal-title">GAME INSTANCES</div>
+
+            <div id="instances-list-container" class="w-full max-h-[400px] overflow-y-auto mb-6 border-2 border-[#555] bg-black p-2">
+                <!-- Instances will be listed here -->
+                <div class="text-center text-gray-400 py-4">No instances found.</div>
+            </div>
+
+            <div class="flex gap-4 w-full">
+                <div class="btn-mc flex-grow nav-item" onclick="createNewInstance()" tabindex="0">ADD INSTANCE</div>
+                <div class="btn-mc flex-grow nav-item" onclick="toggleInstances(false)" tabindex="0">DONE</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal-overlay" id="add-instance-modal">
+        <div class="modal-box" style="max-width: 600px;">
+            <div class="modal-title" style="font-size: 32px;">NEW INSTANCE</div>
+            
+            <div class="mc-input-group">
+                <label class="mc-label">Instance Name:</label>
+                <input type="text" id="new-instance-name" class="mc-input nav-item" placeholder="My Instance" tabindex="0">
+            </div>
+
+            <div class="mc-input-group">
+                <label class="mc-label">GitHub Repo (user/repo):</label>
+                <input type="text" id="new-instance-repo" class="mc-input nav-item" placeholder="smartcmd/MinecraftConsoles" tabindex="0">
+            </div>
+
+            <div class="flex gap-4 w-full mt-4">
+                <div class="btn-mc flex-grow nav-item" onclick="saveNewInstance()" tabindex="0">CREATE</div>
+                <div class="btn-mc flex-grow nav-item" onclick="toggleAddInstance(false)" tabindex="0">CANCEL</div>
+            </div>
+        </div>
+    </div>
+
     <div class="modal-overlay" id="options-modal">
         <div class="modal-box">
             <div class="modal-title">LAUNCHER OPTIONS</div>
@@ -168,7 +222,7 @@
 
             <div class="mc-input-group">
                 <label class="mc-label">In-Game Username:</label>
-                <input type="text" id="username-input" class="mc-input nav-item" placeholder="Steve" tabindex="0">
+                <input type="text" id="username-input" class="mc-input nav-item" placeholder="Steve" tabindex="0" maxlength="16">
             </div>
 
             <div class="mc-input-group mt-4">
@@ -194,12 +248,66 @@
         </div>
     </div>
 
+    <div class="modal-overlay" id="skin-modal" style="display: none;">
+        <div class="modal-box" style="max-width: 900px; background: var(--mc-gui-bg); border: 4px solid #000; padding: 30px; box-shadow: inset 4px 4px 0 #fff;">
+            <div class="modal-title" style="margin-bottom: 25px;">SKIN UPLOADER</div>
+            
+            <div id="drop-zone" class="nav-item" style="width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; background: #000; border: 2px solid #555; cursor: pointer; margin-bottom: 20px;" tabindex="0">
+                <input type="file" id="skin-input" accept=".png" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+                <div id="upload-prompt" class="text-center">
+                    <p class="text-xl text-white" style="text-shadow: 2px 2px 0 #000;">CLICK OR DRAG SKIN HERE</p>
+                    <p class="text-xs text-gray-400 mt-1 uppercase font-bold" style="letter-spacing: 2px;">64x32 or 64x64 PNG</p>
+                </div>
+            </div>
+
+            <div id="preview-container" class="hidden flex flex-col items-center w-full">
+                <div class="flex flex-row gap-6 items-stretch w-full justify-center mb-6" style="height: 400px;">
+                    <!-- 3D Preview Panel -->
+                    <div class="relative bg-black rounded-none border-2 border-[#555] flex flex-col items-center overflow-hidden w-1/2">
+                        <div id="skin-viewer-container" class="w-full h-full"></div>
+                        <div style="position: absolute; bottom: 10px; left: 10px; color: #55ff55; font-size: 14px; text-shadow: 1px 1px 0 #000; z-index: 5;">3D PREVIEW</div>
+                    </div>
+
+                    <!-- info/2D Panel -->
+                    <div class="flex-1 w-1/2 flex flex-col gap-4">
+                        <div class="bg-black p-4 border-2 border-[#555] flex flex-col items-center flex-1 justify-center">
+                            <div class="relative" style="margin-bottom: 15px;">
+                                <canvas id="skin-canvas" width="64" height="32" class="pixelated" style="width: 256px; height: 128px; image-rendering: pixelated; border: 2px solid #555;"></canvas>
+                            </div>
+                            <div style="color: #aaa; font-size: 14px; text-align: center; text-transform: uppercase;">LEGACY OUTPUT (64x32)</div>
+                            <div id="status-message" style="margin-top: 10px; font-size: 18px;"></div>
+                        </div>
+
+                        <div style="background: rgba(0,0,0,0.3); padding: 15px; border: 2px solid #555; color: #eee; font-size: 16px;">
+                            <div style="display: flex; justify-content: space-between; border-bottom: 2px solid #555; padding-bottom: 8px; margin-bottom: 8px;">
+                                <span>DETECTED:</span>
+                                <span id="format-label" style="color: #fff;">--</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between;">
+                                <span>TARGET:</span>
+                                <span style="color: #888; font-size: 14px;">Common/res/mob/char.png</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="save-skin-btn" class="btn-mc w-full nav-item" tabindex="0">SAVE SKIN</div>
+            </div>
+
+            <div class="flex justify-center w-full mt-6">
+                 <div id="btn-close-skin" class="btn-mc nav-item !mb-0" onclick="closeSkinManager()" tabindex="0">DONE</div>
+            </div>
+        </div>
+    </div>
+
     <div id="toast">NOTIFICATION</div>
 
     <div id="music-toggle" class="music-btn nav-item" onclick="toggleMusic()" title="Toggle Music" tabindex="0">
         <span id="music-icon">♪</span>
     </div>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="skin_manager.js"></script>
     <script src="renderer.js"></script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index ec0ce50..6d735f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "legacylauncher",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "legacylauncher",
-      "version": "2.0.2",
+      "version": "2.2.0",
       "license": "ISC",
       "dependencies": {
         "electron-store": "^6.0.1",
diff --git a/package.json b/package.json
index 2f4044f..f77a865 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "legacylauncher",
-  "version": "2.2.0",
+  "version": "2.9.0",
   "description": "",
   "main": "main.js",
   "scripts": {
diff --git a/renderer.js b/renderer.js
index 283874e..a0b4b2f 100644
--- a/renderer.js
+++ b/renderer.js
@@ -10,13 +10,16 @@ const DEFAULT_EXEC = "Minecraft.Client.exe";
 const TARGET_FILE = "LCEWindows64.zip";
 const LAUNCHER_REPO = "gradenGnostic/LegacyLauncher";
 
+let instances = [];
+let currentInstanceId = null;
+let currentInstance = null;
+
 let releasesData = [];
 let commitsData = [];
 let currentReleaseIndex = 0;
 let isProcessing = false;
 let isGameRunning = false;
 
-
 const Store = {
     async get(key, defaultValue) {
         const val = await ipcRenderer.invoke('store-get', key);
@@ -91,7 +94,6 @@ const GamepadManager = {
         const buttons = gp.buttons;
         const axes = gp.axes;
 
-        // Helper to safely get button state
         const isPressed = (idx) => buttons[idx] ? buttons[idx].pressed : false;
         const getAxis = (idx) => axes[idx] !== undefined ? axes[idx] : 0;
 
@@ -100,7 +102,6 @@ const GamepadManager = {
             const axisX = getAxis(0);
             const axisY = getAxis(1);
             
-            // D-pad indices are usually 12, 13, 14, 15
             const up = isPressed(12) || axisY < -threshold;
             const down = isPressed(13) || axisY > threshold;
             const left = isPressed(14) || axisX < -threshold;
@@ -111,25 +112,20 @@ const GamepadManager = {
             else if (left) { this.navigate('left'); this.lastInputTime = now; }
             else if (right) { this.navigate('right'); this.lastInputTime = now; }
             
-            // Shoulder buttons (L1/R1 are 4/5)
             else if (isPressed(4)) { this.cycleActiveSelection(-1); this.lastInputTime = now; }
             else if (isPressed(5)) { this.cycleActiveSelection(1); this.lastInputTime = now; }
             
-            // B Button (Cancel)
             else if (isPressed(1)) { this.cancelCurrent(); this.lastInputTime = now; }
 
-            // X Button (Refresh)
             else if (isPressed(2)) { checkForUpdatesManual(); this.lastInputTime = now; }
         }
 
-        // A Button (Confirm) - Immediate responsive check
         const aPressed = isPressed(0);
         if (aPressed && !this.lastAPressed) {
             this.clickActive();
         }
         this.lastAPressed = aPressed;
 
-        // Right stick for scrolling (Axis 2/3 or 5)
         const rStickY = getAxis(3) || getAxis(2) || getAxis(5);
         if (Math.abs(rStickY) > 0.1) {
             this.scrollActive(rStickY * 15);
@@ -142,8 +138,7 @@ const GamepadManager = {
     },
 
     getVisibleNavItems() {
-        // Find if any modal is open
-        const modals = ['update-modal', 'options-modal', 'profile-modal', 'servers-modal'];
+        const modals = ['update-modal', 'options-modal', 'profile-modal', 'servers-modal', 'instances-modal', 'add-instance-modal', 'skin-modal'];
         let activeModal = null;
         for (const id of modals) {
             const m = document.getElementById(id);
@@ -158,7 +153,6 @@ const GamepadManager = {
             if (activeModal) {
                 return activeModal.contains(item) && item.offsetParent !== null;
             }
-            // Ensure item is not inside any hidden modal
             let parent = item.parentElement;
             while (parent) {
                 if (parent.classList?.contains('modal-overlay') && parent.style.display !== 'flex') return false;
@@ -239,12 +233,15 @@ const GamepadManager = {
             if (activeModal.id === 'options-modal') toggleOptions(false);
             else if (activeModal.id === 'profile-modal') toggleProfile(false);
             else if (activeModal.id === 'servers-modal') toggleServers(false);
+            else if (activeModal.id === 'instances-modal') toggleInstances(false);
+            else if (activeModal.id === 'add-instance-modal') toggleAddInstance(false);
             else if (activeModal.id === 'update-modal') document.getElementById('btn-skip-update')?.click();
+            else if (activeModal.id === 'skin-modal') closeSkinManager();
         }
     },
 
     getActiveModal() {
-        const modals = ['update-modal', 'options-modal', 'profile-modal', 'servers-modal'];
+        const modals = ['update-modal', 'options-modal', 'profile-modal', 'servers-modal', 'instances-modal', 'add-instance-modal', 'skin-modal'];
         for (const id of modals) {
             const m = document.getElementById(id);
             if (m && m.style.display === 'flex') return m;
@@ -273,7 +270,6 @@ const GamepadManager = {
                 updateCompatDisplay();
             }
         } else if (!this.getActiveModal()) {
-            // Shortcut for version cycle on main menu
             const select = document.getElementById('version-select');
             if (select) {
                 let newIdx = select.selectedIndex + dir;
@@ -287,8 +283,11 @@ const GamepadManager = {
 
     scrollActive(val) {
         const serverList = document.getElementById('servers-list-container');
+        const instanceList = document.getElementById('instances-list-container');
         if (this.getActiveModal()?.id === 'servers-modal' && serverList) {
             serverList.scrollTop += val;
+        } else if (this.getActiveModal()?.id === 'instances-modal' && instanceList) {
+            instanceList.scrollTop += val;
         } else if (!this.getActiveModal()) {
             const sidebar = document.getElementById('updates-list')?.parentElement;
             if (sidebar) sidebar.scrollTop += val;
@@ -316,7 +315,6 @@ const MusicManager = {
     async scan() {
         try {
             const installDir = await getInstallDir();
-            // Path provided by user: root of games folder in music/music
             const musicPath = path.join(installDir, 'music', 'music');
             
             if (fs.existsSync(musicPath)) {
@@ -325,15 +323,11 @@ const MusicManager = {
                     .filter(f => f.toLowerCase().endsWith('.ogg'))
                     .map(f => path.join(musicPath, f));
                 
-                // Shuffle playlist
                 for (let i = this.playlist.length - 1; i > 0; i--) {
                     const j = Math.floor(Math.random() * (i + 1));
                     [this.playlist[i], this.playlist[j]] = [this.playlist[j], this.playlist[i]];
                 }
-                console.log(`MusicManager: Loaded ${this.playlist.length} tracks.`);
                 return this.playlist.length > 0;
-            } else {
-                console.log("MusicManager: music/music folder not found yet.");
             }
         } catch (e) {
             console.error("Music scan error:", e);
@@ -356,7 +350,6 @@ const MusicManager = {
         
         let nextIndex;
         if (this.playlist.length > 1) {
-            // Keep picking until we get a different track
             do {
                 nextIndex = Math.floor(Math.random() * this.playlist.length);
             } while (nextIndex === this.currentIndex);
@@ -368,7 +361,6 @@ const MusicManager = {
         this.audio.src = `file://${this.playlist[this.currentIndex]}`;
         this.audio.play().catch(e => {
             console.error("Audio playback error:", e);
-            // If failed, try next one
             setTimeout(() => this.playNext(), 1000);
         });
     },
@@ -400,27 +392,65 @@ const MusicManager = {
     }
 };
 
-window.onload = async () => {
-    document.getElementById('repo-input').value = await Store.get('legacy_repo', DEFAULT_REPO);
-    document.getElementById('exec-input').value = await Store.get('legacy_exec_path', DEFAULT_EXEC);
-    document.getElementById('username-input').value = await Store.get('legacy_username', "");
-    document.getElementById('ip-input').value = await Store.get('legacy_ip', "");
-    document.getElementById('port-input').value = await Store.get('legacy_port', "");
-    document.getElementById('server-checkbox').checked = await Store.get('legacy_is_server', false);
+async function migrateLegacyConfig() {
+    const hasInstances = await Store.get('legacy_instances', null);
+    if (!hasInstances) {
+        const repo = await Store.get('legacy_repo', DEFAULT_REPO);
+        const exec = await Store.get('legacy_exec_path', DEFAULT_EXEC);
+        const ip = await Store.get('legacy_ip', "");
+        const port = await Store.get('legacy_port', "");
+        const isServer = await Store.get('legacy_is_server', false);
+        const compat = await Store.get('legacy_compat_layer', 'direct');
+        const installDir = await Store.get('legacy_install_path', path.join(require('os').homedir(), 'Documents', 'LegacyClient'));
+        const installedTag = await Store.get('installed_version_tag', null);
+
+        const defaultInstance = {
+            id: 'instance-' + Date.now(),
+            name: "Default Instance",
+            repo: repo,
+            execPath: exec,
+            ip: ip,
+            port: port,
+            isServer: isServer,
+            compatLayer: compat,
+            installPath: installDir,
+            installedTag: installedTag
+        };
+
+        instances = [defaultInstance];
+        currentInstanceId = defaultInstance.id;
+        await Store.set('legacy_instances', instances);
+        await Store.set('legacy_current_instance_id', currentInstanceId);
+    } else {
+        instances = hasInstances;
+        currentInstanceId = await Store.get('legacy_current_instance_id', instances[0].id);
+    }
     
-    const installDir = await getInstallDir();
-    document.getElementById('install-path-input').value = installDir;
+    currentInstance = instances.find(i => i.id === currentInstanceId) || instances[0];
+}
+
+window.onload = async () => {
+    await migrateLegacyConfig();
+    
+    document.getElementById('repo-input').value = currentInstance.repo;
+    document.getElementById('exec-input').value = currentInstance.execPath;
+    document.getElementById('username-input').value = await Store.get('legacy_username', "");
+    document.getElementById('ip-input').value = currentInstance.ip;
+    document.getElementById('port-input').value = currentInstance.port;
+    document.getElementById('server-checkbox').checked = currentInstance.isServer;
+    document.getElementById('install-path-input').value = currentInstance.installPath;
     
     if (process.platform === 'linux' || process.platform === 'darwin') {
         document.getElementById('compat-option-container').style.display = 'block';
         scanCompatibilityLayers();
     } else {
-        // Force Windows to direct mode if somehow changed
-        await Store.set('legacy_compat_layer', 'direct');
+        currentInstance.compatLayer = 'direct';
+        await saveInstancesToStore();
     }
 
     ipcRenderer.on('window-is-maximized', (event, isMaximized) => {
-        document.getElementById('maximize-btn').textContent = isMaximized ? '❐' : '▢';
+        const btn = document.getElementById('maximize-btn');
+        if (btn) btn.textContent = isMaximized ? '❐' : '▢';
     });
 
     fetchGitHubData();
@@ -436,211 +466,146 @@ window.onload = async () => {
     });
 };
 
-async function loadSplashText() {
-    const splashEl = document.getElementById('splash-text');
-    if (!splashEl) return;
-
-    try {
-        const filePath = path.join(__dirname, 'strings.txt');
-        if (fs.existsSync(filePath)) {
-            const content = fs.readFileSync(filePath, 'utf-8');
-            const lines = content.split('\n').map(l => l.trim()).filter(l => l !== '');
-            if (lines.length > 0) {
-                const randomSplash = lines[Math.floor(Math.random() * lines.length)];
-                splashEl.textContent = randomSplash;
-            }
-        }
-    } catch (e) {
-        console.error("Failed to load splash text:", e);
-        splashEl.textContent = "Welcome!";
-    }
+async function saveInstancesToStore() {
+    await Store.set('legacy_instances', instances);
+    await Store.set('legacy_current_instance_id', currentInstanceId);
 }
 
-function isNewerVersion(latest, current) {
-    const lParts = latest.split('.').map(Number);
-    const cParts = current.split('.').map(Number);
-    for (let i = 0; i < Math.max(lParts.length, cParts.length); i++) {
-        const l = lParts[i] || 0;
-        const c = cParts[i] || 0;
-        if (l > c) return true;
-        if (l < c) return false;
-    }
-    return false;
-}
-
-async function checkForLauncherUpdates(manual = false) {
-    try {
-        const currentVersion = require('./package.json').version;
-        const res = await fetch(`https://api.github.com/repos/${LAUNCHER_REPO}/releases/latest`);
-        if (!res.ok) {
-            if (manual) showToast("Could not check for updates.");
-            return;
-        }
-        
-        const latestRelease = await res.json();
-        const latestVersion = latestRelease.tag_name.replace('v', '');
-        
-        if (isNewerVersion(latestVersion, currentVersion)) {
-            const updateConfirmed = await promptLauncherUpdate(latestRelease.tag_name, latestRelease.body);
-            if (updateConfirmed) {
-                downloadAndInstallLauncherUpdate(latestRelease);
-            }
-        } else if (manual) {
-            showToast("Launcher is up to date!");
-        }
-    } catch (e) {
-        console.error("Launcher update check failed:", e);
-        if (manual) showToast("Update check failed.");
-    }
-}
-
-async function promptLauncherUpdate(version, changelog) {
-    return new Promise((resolve) => {
-        const modal = document.getElementById('update-modal');
-        const confirmBtn = document.getElementById('btn-confirm-update');
-        const skipBtn = document.getElementById('btn-skip-update');
-        const closeBtn = document.getElementById('btn-close-update');
-        const modalText = document.getElementById('update-modal-text');
-
-        if (modalText) {
-            modalText.innerHTML = `<span class="update-tag">NEW UPDATE: v${version}</span><br>` +
-                                 `<div class="pn-body" style="font-size: 16px; max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 10px; margin-top: 5px;">${changelog || "No changelog provided."}</div>`;
-            modalText.style.display = 'block';
-        }
-
+async function toggleInstances(show) {
+    if (isProcessing) return;
+    const modal = document.getElementById('instances-modal');
+    if (show) {
+        await renderInstancesList();
         document.activeElement?.blur();
         modal.style.display = 'flex';
         modal.style.opacity = '1';
-
-        const cleanup = (result) => {
-            modal.style.opacity = '0';
-            setTimeout(() => {
-                modal.style.display = 'none';
-                if (modalText) modalText.style.display = 'none';
-            }, 300);
-            confirmBtn.onclick = null;
-            skipBtn.onclick = null;
-            closeBtn.onclick = null;
-            resolve(result);
-        };
-
-        confirmBtn.onclick = () => cleanup(true);
-        skipBtn.onclick = () => cleanup(false);
-        closeBtn.onclick = () => cleanup(false);
-    });
+    } else {
+        modal.style.opacity = '0';
+        setTimeout(() => modal.style.display = 'none', 300);
+    }
 }
 
-async function downloadAndInstallLauncherUpdate(release) {
-    setProcessingState(true);
-    updateProgress(0, "Preparing Launcher Update...");
+async function renderInstancesList() {
+    const container = document.getElementById('instances-list-container');
+    container.innerHTML = '';
 
-    let assetPattern = "";
-    if (process.platform === 'win32') assetPattern = ".exe";
-    else if (process.platform === 'linux') assetPattern = ".AppImage";
-    else if (process.platform === 'darwin') assetPattern = ".dmg";
-
-    const asset = release.assets.find(a => a.name.toLowerCase().endsWith(assetPattern));
-    
-    if (!asset) {
-        showToast("No compatible update found for your OS.");
-        setProcessingState(false);
+    if (instances.length === 0) {
+        container.innerHTML = '<div class="text-center text-gray-400 py-4">No instances found.</div>';
         return;
     }
 
-    try {
-        const homeDir = require('os').homedir();
-        const downloadPath = path.join(homeDir, 'Downloads', asset.name);
+    instances.forEach((inst) => {
+        const isActive = inst.id === currentInstanceId;
+        const item = document.createElement('div');
+        item.className = `flex justify-between items-center p-4 border-b border-[#333] hover:bg-[#111] ${isActive ? 'bg-[#1a1a1a] border-l-4 border-l-[#55ff55]' : ''}`;
         
-        updateProgress(10, `Downloading Launcher Update...`);
-        await downloadFile(asset.browser_download_url, downloadPath);
-        
-        updateProgress(100, "Download Complete. Launching Installer...");
-        
-        // Give time for UI update
-        await new Promise(r => setTimeout(r, 1000));
+        item.innerHTML = `
+            <div class="flex flex-col gap-1">
+                <div class="flex items-center gap-2">
+                    <span class="text-white text-xl font-bold">${inst.name}</span>
+                    ${isActive ? '<span class="text-[10px] bg-[#55ff55] text-black px-1 font-bold">ACTIVE</span>' : ''}
+                </div>
+                <span class="text-gray-400 text-sm font-mono">${inst.repo}</span>
+                <span class="text-gray-500 text-xs">${inst.installPath}</span>
+            </div>
+            <div class="flex gap-2">
+                ${!isActive ? `<div class="btn-mc !w-[100px] !h-[40px] !text-lg !mb-0" onclick="switchInstance('${inst.id}')">SWITCH</div>` : ''}
+                <div class="btn-mc !w-[100px] !h-[40px] !text-lg !mb-0" onclick="deleteInstance('${inst.id}')" style="${isActive ? 'opacity: 0.5; pointer-events: none;' : ''}">DELETE</div>
+            </div>
+        `;
+        container.appendChild(item);
+    });
+}
 
-        if (process.platform === 'win32') {
-            childProcess.exec(`start "" "${downloadPath}"`);
-        } else if (process.platform === 'linux') {
-            fs.chmodSync(downloadPath, 0o755);
-            childProcess.exec(`"${downloadPath}"`);
-        } else if (process.platform === 'darwin') {
-            childProcess.exec(`open "${downloadPath}"`);
-        }
-        
-        // Close the app to allow installation
-        setTimeout(() => ipcRenderer.send('window-close'), 2000);
-
-    } catch (e) {
-        showToast("Launcher Update Error: " + e.message);
-        setProcessingState(false);
+function toggleAddInstance(show) {
+    const modal = document.getElementById('add-instance-modal');
+    if (show) {
+        document.getElementById('new-instance-name').value = '';
+        document.getElementById('new-instance-repo').value = DEFAULT_REPO;
+        modal.style.display = 'flex';
+        modal.style.opacity = '1';
+    } else {
+        modal.style.opacity = '0';
+        setTimeout(() => modal.style.display = 'none', 300);
     }
 }
 
-async function scanCompatibilityLayers() {
-    const select = document.getElementById('compat-select');
-    const savedValue = await Store.get('legacy_compat_layer', 'direct');
+function createNewInstance() {
+    toggleAddInstance(true);
+}
+
+async function saveNewInstance() {
+    const name = document.getElementById('new-instance-name').value.trim();
+    const repo = document.getElementById('new-instance-repo').value.trim() || DEFAULT_REPO;
     
-    const layers = [
-        { name: 'Default (Direct)', cmd: 'direct' },
-        { name: 'Wine64', cmd: 'wine64' },
-        { name: 'Wine', cmd: 'wine' }
-    ];
+    if (!name) {
+        showToast("Please enter a name for the instance.");
+        return;
+    }
 
     const homeDir = require('os').homedir();
-    let steamPaths = [];
-    
-    if (process.platform === 'linux') {
-        steamPaths = [
-            path.join(homeDir, '.steam', 'steam', 'steamapps', 'common'),
-            path.join(homeDir, '.local', 'share', 'Steam', 'steamapps', 'common'),
-            path.join(homeDir, '.var', 'app', 'com.valvesoftware.Steam', 'data', 'Steam', 'steamapps', 'common')
-        ];
-    } else if (process.platform === 'darwin') {
-        steamPaths = [
-            path.join(homeDir, 'Library', 'Application Support', 'Steam', 'steamapps', 'common')
-        ];
-    }
+    const sanitizedName = name.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+    const installPath = path.join(homeDir, 'Documents', 'LegacyClient_' + sanitizedName);
 
-    for (const steamPath of steamPaths) {
-        if (fs.existsSync(steamPath)) {
-            try {
-                const dirs = fs.readdirSync(steamPath);
-                dirs.filter(d => d.startsWith('Proton') || d.includes('Wine') || d.includes('CrossOver')).forEach(d => {
-                    // Check for common Proton structure
-                    const protonPath = path.join(steamPath, d, 'proton');
-                    if (fs.existsSync(protonPath)) {
-                        layers.push({ name: d, cmd: protonPath });
-                    }
-                });
-            } catch (e) {}
-        }
-    }
+    const newInst = {
+        id: 'instance-' + Date.now(),
+        name: name,
+        repo: repo,
+        execPath: DEFAULT_EXEC,
+        ip: "",
+        port: "",
+        isServer: false,
+        compatLayer: 'direct',
+        installPath: installPath,
+        installedTag: null
+    };
 
-    select.innerHTML = '';
-    layers.forEach(l => {
-        const opt = document.createElement('option');
-        opt.value = l.cmd;
-        opt.textContent = l.name;
-        select.appendChild(opt);
-        if (l.cmd === savedValue) opt.selected = true;
-    });
-
-    updateCompatDisplay();
+    instances.push(newInst);
+    await saveInstancesToStore();
+    toggleAddInstance(false);
+    renderInstancesList();
+    showToast("Instance Created!");
 }
 
-function updateCompatDisplay() {
-    const select = document.getElementById('compat-select');
-    const display = document.getElementById('current-compat-display');
-    if (select && display && select.selectedIndex !== -1) {
-        display.textContent = select.options[select.selectedIndex].text;
+async function switchInstance(id) {
+    if (isProcessing || id === currentInstanceId) return;
+    
+    currentInstanceId = id;
+    currentInstance = instances.find(i => i.id === currentInstanceId);
+    await saveInstancesToStore();
+    
+    document.getElementById('repo-input').value = currentInstance.repo;
+    document.getElementById('exec-input').value = currentInstance.execPath;
+    document.getElementById('ip-input').value = currentInstance.ip;
+    document.getElementById('port-input').value = currentInstance.port;
+    document.getElementById('server-checkbox').checked = currentInstance.isServer;
+    document.getElementById('install-path-input').value = currentInstance.installPath;
+    
+    if (process.platform === 'linux' || process.platform === 'darwin') {
+        scanCompatibilityLayers();
+    }
+    
+    renderInstancesList();
+    showToast("Switched to " + currentInstance.name);
+    fetchGitHubData();
+    loadSplashText();
+    
+    if (window.loadMainMenuSkin) window.loadMainMenuSkin();
+}
+
+async function deleteInstance(id) {
+    if (id === currentInstanceId) return;
+    
+    if (confirm("Are you sure you want to delete this instance profile? (Files on disk will NOT be deleted)")) {
+        instances = instances.filter(i => i.id !== id);
+        await saveInstancesToStore();
+        renderInstancesList();
+        showToast("Instance Deleted");
     }
 }
 
 async function getInstallDir() {
-    const homeDir = require('os').homedir();
-    const defaultPath = path.join(homeDir, 'Documents', 'LegacyClient');
-    return await Store.get('legacy_install_path', defaultPath);
+    return currentInstance.installPath;
 }
 
 async function browseInstallDir() {
@@ -660,20 +625,17 @@ async function openGameDir() {
 }
 
 async function getInstalledPath() {
-    const installDir = await getInstallDir();
-    const execPath = await Store.get('legacy_exec_path', DEFAULT_EXEC);
-    return path.join(installDir, execPath);
+    return path.join(currentInstance.installPath, currentInstance.execPath);
 }
 
 async function checkIsInstalled(tag) {
     const fullPath = await getInstalledPath();
-    const installedTag = await Store.get('installed_version_tag');
-    return fs.existsSync(fullPath) && installedTag === tag;
+    return fs.existsSync(fullPath) && currentInstance.installedTag === tag;
 }
 
 async function updatePlayButtonText() {
     const btn = document.getElementById('btn-play-main');
-    if (isProcessing) return;
+    if (!btn || isProcessing) return;
 
     if (isGameRunning) {
         btn.textContent = "GAME RUNNING";
@@ -739,11 +701,11 @@ function closeWindow() {
 }
 
 async function fetchGitHubData() {
-    const repo = await Store.get('legacy_repo', DEFAULT_REPO);
+    const repo = currentInstance.repo;
     const loader = document.getElementById('loader');
     const loaderText = document.getElementById('loader-text');
-    loader.style.display = 'flex';
-    loaderText.textContent = "SYNCING: " + repo;
+    if (loader) loader.style.display = 'flex';
+    if (loaderText) loaderText.textContent = "SYNCING: " + repo;
 
     try {
         const [relRes, commRes] = await Promise.all([
@@ -760,15 +722,19 @@ async function fetchGitHubData() {
         populateUpdatesSidebar();
 
         setTimeout(() => {
-            loader.style.opacity = '0';
-            setTimeout(() => loader.style.display = 'none', 300);
+            if (loader) {
+                loader.style.opacity = '0';
+                setTimeout(() => loader.style.display = 'none', 300);
+            }
         }, 500);
     } catch (err) {
-        loaderText.textContent = "REPO NOT FOUND OR API ERROR";
+        if (loaderText) loaderText.textContent = "REPO NOT FOUND OR API ERROR";
         showToast("Check repository name in Options.");
         setTimeout(() => {
-            loader.style.opacity = '0';
-            setTimeout(() => loader.style.display = 'none', 300);
+            if (loader) {
+                loader.style.opacity = '0';
+                setTimeout(() => loader.style.display = 'none', 300);
+            }
         }, 2500);
     }
 }
@@ -776,10 +742,11 @@ async function fetchGitHubData() {
 function populateVersions() {
     const select = document.getElementById('version-select');
     const display = document.getElementById('current-version-display');
+    if (!select) return;
     select.innerHTML = '';
 
     if(releasesData.length === 0) {
-        display.textContent = "No Releases Found";
+        if (display) display.textContent = "No Releases Found";
         return;
     }
 
@@ -788,7 +755,7 @@ function populateVersions() {
         opt.value = index;
         opt.textContent = `Legacy (${rel.tag_name})`;
         select.appendChild(opt);
-        if(index === 0) display.textContent = opt.textContent;
+        if(index === 0 && display) display.textContent = opt.textContent;
     });
     currentReleaseIndex = 0;
     updatePlayButtonText();
@@ -796,6 +763,7 @@ function populateVersions() {
 
 function populateUpdatesSidebar() {
     const list = document.getElementById('updates-list');
+    if (!list) return;
     list.innerHTML = '';
 
     if (commitsData.length === 0) {
@@ -803,15 +771,12 @@ function populateUpdatesSidebar() {
         return;
     }
 
-    // Show the last 20 commits
     commitsData.slice(0, 20).forEach((c) => {
         const item = document.createElement('div');
         item.className = 'update-item patch-note-card commit-card';
-
         const date = new Date(c.commit.author.date).toLocaleString();
         const shortSha = c.sha.substring(0, 7);
         const message = c.commit.message;
-
         item.innerHTML = `
             <div class="pn-header">
                 <span class="update-date">${date}</span>
@@ -825,6 +790,7 @@ function populateUpdatesSidebar() {
 
 function updateSelectedRelease() {
     const select = document.getElementById('version-select');
+    if (!select) return;
     currentReleaseIndex = select.value;
     document.getElementById('current-version-display').textContent = select.options[select.selectedIndex].text;
     updatePlayButtonText();
@@ -832,16 +798,13 @@ function updateSelectedRelease() {
 
 async function launchGame() {
     if (isProcessing || isGameRunning) return;
-
     const release = releasesData[currentReleaseIndex];
     if (!release) return;
-
     const asset = release.assets.find(a => a.name === TARGET_FILE);
     if (!asset) {
         showToast("ZIP Asset missing in this version!");
         return;
     }
-
     const isInstalled = await checkIsInstalled(release.tag_name);
     if (isInstalled) {
         setProcessingState(true);
@@ -862,14 +825,12 @@ async function launchGame() {
                 await launchLocalClient();
                 setProcessingState(false);
             }
-            // if 'cancel', do nothing
         } else {
             setProcessingState(true);
             await handleElectronFlow(asset.browser_download_url);
             setProcessingState(false);
         }
     }
-
     updatePlayButtonText();
 }
 
@@ -880,11 +841,9 @@ async function promptUpdate(newTag) {
         const skipBtn = document.getElementById('btn-skip-update');
         const closeBtn = document.getElementById('btn-close-update');
         const modalText = document.getElementById('update-modal-text');
-
         document.activeElement?.blur();
         modal.style.display = 'flex';
         modal.style.opacity = '1';
-
         const cleanup = (result) => {
             modal.style.opacity = '0';
             setTimeout(() => {
@@ -896,103 +855,70 @@ async function promptUpdate(newTag) {
             closeBtn.onclick = null;
             resolve(result);
         };
-
         confirmBtn.onclick = () => cleanup('update');
         skipBtn.onclick = () => cleanup('launch');
         closeBtn.onclick = () => cleanup('cancel');
     });
 }
 
-// Manual trigger for checking updates via UI button
 async function checkForUpdatesManual() {
-    // If we have releases data loaded, allow reinstall/update flow regardless of current tag
     const rel = releasesData[currentReleaseIndex];
     if (!rel) {
         showToast("No releases loaded yet");
         return;
     }
-
     const asset = rel.assets.find(a => a.name === TARGET_FILE);
     if (!asset) {
         showToast("ZIP Asset missing in this version!");
         return;
     }
-
-    const installedTag = await Store.get('installed_version_tag', 'Unknown');
-    // Prompt user to update/install; Update path will reinstall (delete existing LegacyClient)
     const choice = await promptUpdate(rel.tag_name);
     if (choice === 'update') {
-        // Re-download and install (and launch, as install flow does)
-        // handleElectronFlow now manages clean installation while preserving user data
         setProcessingState(true);
         await handleElectronFlow(asset.browser_download_url);
         setProcessingState(false);
     } else if (choice === 'launch') {
-        // User chose to launch existing/older version
         setProcessingState(true);
         updateProgress(100, "Launching Existing...");
         await launchLocalClient();
         setProcessingState(false);
     }
-    // if 'cancel', do nothing
     updatePlayButtonText();
 }
 
 async function launchLocalClient() {
     const fullPath = await getInstalledPath();
-    
-    if (!fs.existsSync(fullPath)) {
-        throw new Error("Executable not found! Try reinstalling.");
-    }
-
-    // Ensure the file is executable on Linux/macOS
+    if (!fs.existsSync(fullPath)) throw new Error("Executable not found! Try reinstalling.");
     if (process.platform !== 'win32') {
-        try {
-            fs.chmodSync(fullPath, 0o755);
-        } catch (e) {
-            console.warn("Failed to set executable permissions:", e);
-        }
+        try { fs.chmodSync(fullPath, 0o755); } catch (e) { console.warn("Failed to set executable permissions:", e); }
     }
-
     return new Promise(async (resolve, reject) => {
-        const compat = await Store.get('legacy_compat_layer', 'direct');
+        const compat = currentInstance.compatLayer;
         const username = await Store.get('legacy_username', "");
-        const ip = await Store.get('legacy_ip', "");
-        const port = await Store.get('legacy_port', "");
-        const isServer = await Store.get('legacy_is_server', false);
-
+        const ip = currentInstance.ip;
+        const port = currentInstance.port;
+        const isServer = currentInstance.isServer;
         let args = [];
         if (username) args.push("-name", username);
         if (isServer) args.push("-server");
         if (ip) args.push("-ip", ip);
         if (port) args.push("-port", port);
-
         const argString = args.map(a => `"${a}"`).join(" ");
         let cmd = `"${fullPath}" ${argString}`;
-        
         if (process.platform === 'linux' || process.platform === 'darwin') {
-            if (compat === 'wine64' || compat === 'wine') {
-                cmd = `${compat} "${fullPath}" ${argString}`;
-            } else if (compat.includes('Proton')) {
+            if (compat === 'wine64' || compat === 'wine') cmd = `${compat} "${fullPath}" ${argString}`;
+            else if (compat.includes('Proton')) {
                 const prefix = path.join(path.dirname(fullPath), 'pfx');
                 if (!fs.existsSync(prefix)) fs.mkdirSync(prefix, { recursive: true });
-                
                 cmd = `STEAM_COMPAT_CLIENT_INSTALL_PATH="" STEAM_COMPAT_DATA_PATH="${prefix}" "${compat}" run "${fullPath}" ${argString}`;
             }
         }
-
-        console.log("Launching command:", cmd);
         const startTime = Date.now();
         const proc = childProcess.exec(cmd, (error) => {
             const duration = Date.now() - startTime;
-            if (error && duration < 2000) {
-                showToast("Failed to launch: " + error.message);
-                reject(error);
-            } else {
-                resolve();
-            }
+            if (error && duration < 2000) { showToast("Failed to launch: " + error.message); reject(error); }
+            else resolve();
         });
-        
         monitorProcess(proc);
     });
 }
@@ -1002,79 +928,49 @@ function setProcessingState(active) {
     const playBtn = document.getElementById('btn-play-main');
     const optionsBtn = document.getElementById('btn-options');
     const progressContainer = document.getElementById('progress-container');
-
     if (active) {
-        playBtn.classList.add('disabled');
-        optionsBtn.classList.add('disabled');
-        progressContainer.style.display = 'flex';
+        if (playBtn) playBtn.classList.add('disabled');
+        if (optionsBtn) optionsBtn.classList.add('disabled');
+        if (progressContainer) progressContainer.style.display = 'flex';
         updateProgress(0, "Preparing...");
     } else {
-        playBtn.classList.remove('disabled');
-        optionsBtn.classList.remove('disabled');
-        progressContainer.style.display = 'none';
+        if (playBtn) playBtn.classList.remove('disabled');
+        if (optionsBtn) optionsBtn.classList.remove('disabled');
+        if (progressContainer) progressContainer.style.display = 'none';
     }
 }
 
 function updateProgress(percent, text) {
-    document.getElementById('progress-bar-fill').style.width = percent + "%";
-    if (text) document.getElementById('progress-text').textContent = text;
+    const bar = document.getElementById('progress-bar-fill');
+    if (bar) bar.style.width = percent + "%";
+    const txt = document.getElementById('progress-text');
+    if (text && txt) txt.textContent = text;
 }
 
 async function handleElectronFlow(url) {
     try {
-        const homeDir = require('os').homedir();
-        const extractDir = await getInstallDir();
+        const extractDir = currentInstance.installPath;
         const parentDir = path.dirname(extractDir);
         const zipPath = path.join(parentDir, TARGET_FILE);
         const backupDir = path.join(parentDir, 'LegacyClient_Backup');
-
         updateProgress(5, "Downloading " + TARGET_FILE + "...");
         await downloadFile(url, zipPath);
-
         updateProgress(75, "Extracting Archive...");
-
-        // Files to preserve when updating
-        const preserveList = [
-            'options.txt',
-            'servers.txt',
-            'username.txt',
-            'settings.dat',
-            'UID.dat',
-            path.join('Windows64', 'GameHDD')
-        ];
-
+        const preserveList = ['options.txt', 'servers.txt', 'username.txt', 'settings.dat', 'UID.dat', path.join('Windows64', 'GameHDD'), path.join('Common', 'res', 'mob', 'char.png')];
         if (fs.existsSync(extractDir)) {
-            // Backup preserved files
             if (fs.existsSync(backupDir)) fs.rmSync(backupDir, { recursive: true, force: true });
             fs.mkdirSync(backupDir, { recursive: true });
-            
             for (const item of preserveList) {
                 const src = path.join(extractDir, item);
                 const dest = path.join(backupDir, item);
-                if (fs.existsSync(src)) {
-                    fs.mkdirSync(path.dirname(dest), { recursive: true });
-                    fs.renameSync(src, dest);
-                }
-            }
-            // Clean install: remove old client files
-            try {
-                fs.rmSync(extractDir, { recursive: true, force: true });
-            } catch (e) {
-                console.warn("Cleanup error:", e);
+                if (fs.existsSync(src)) { fs.mkdirSync(path.dirname(dest), { recursive: true }); fs.renameSync(src, dest); }
             }
+            try { fs.rmSync(extractDir, { recursive: true, force: true }); } catch (e) { console.warn("Cleanup error:", e); }
         }
-
-        if (!fs.existsSync(extractDir)) {
-            fs.mkdirSync(extractDir, { recursive: true });
-        }
-        
+        if (!fs.existsSync(extractDir)) fs.mkdirSync(extractDir, { recursive: true });
         await extractZip(zipPath, { dir: extractDir });
-
-        // Refresh music playlist if it was empty
         await MusicManager.scan();
         if (MusicManager.enabled) MusicManager.start();
-
-        // Restore preserved files
         if (fs.existsSync(backupDir)) {
             for (const item of preserveList) {
                 const src = path.join(backupDir, item);
@@ -1087,200 +983,98 @@ async function handleElectronFlow(url) {
             }
             fs.rmSync(backupDir, { recursive: true, force: true });
         }
-
-        const execName = await Store.get('legacy_exec_path', DEFAULT_EXEC);
-        const fullPath = path.join(extractDir, execName);
-
-        if (!fs.existsSync(fullPath)) {
-            showToast("Executable not found at: " + execName);
-            return;
-        }
-
+        const fullPath = await getInstalledPath();
+        if (!fs.existsSync(fullPath)) { showToast("Executable not found at: " + currentInstance.execPath); return; }
         updateProgress(100, "Launching...");
-        
-        await Store.set('installed_version_tag', releasesData[currentReleaseIndex].tag_name);
-        
+        currentInstance.installedTag = releasesData[currentReleaseIndex].tag_name;
+        await saveInstancesToStore();
         await new Promise(r => setTimeout(r, 800));
         await launchLocalClient();
-
-    } catch (e) {
-        showToast("Error: " + e.message);
-    }
+    } catch (e) { showToast("Error: " + e.message); }
 }
 
 function downloadFile(url, destPath) {
     return new Promise((resolve, reject) => {
         const dir = path.dirname(destPath);
-        if (!fs.existsSync(dir)) {
-            fs.mkdirSync(dir, { recursive: true });
-        }
-
-        // Always re-download by removing any existing file first
-        if (fs.existsSync(destPath)) {
-            try { fs.unlinkSync(destPath); } catch (e) { /* ignore */ }
-        }
-
+        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+        if (fs.existsSync(destPath)) try { fs.unlinkSync(destPath); } catch (e) {}
         const file = fs.createWriteStream(destPath);
-        let totalSize = 0;
-        let downloadedSize = 0;
-
+        let totalSize = 0; let downloadedSize = 0;
         https.get(url, (response) => {
-            if (response.statusCode === 302 || response.statusCode === 301) {
-                downloadFile(response.headers.location, destPath).then(resolve).catch(reject);
-                return;
-            }
-
+            if (response.statusCode === 302 || response.statusCode === 301) { downloadFile(response.headers.location, destPath).then(resolve).catch(reject); return; }
             totalSize = parseInt(response.headers['content-length'], 10);
-
             response.on('data', (chunk) => {
                 downloadedSize += chunk.length;
                 const percent = Math.floor((downloadedSize / totalSize) * 70) + 5;
                 updateProgress(percent, `Downloading... ${percent}%`);
             });
-
             response.pipe(file);
-
-            file.on('finish', () => {
-                file.close(() => resolve());
-            });
-
-            file.on('error', (err) => {
-                fs.unlink(destPath, () => {});
-                reject(err);
-            });
-        }).on('error', (err) => {
-            fs.unlink(destPath, () => {});
-            reject(err);
-        });
+            file.on('finish', () => file.close(() => resolve()));
+            file.on('error', (err) => { fs.unlink(destPath, () => {}); reject(err); });
+        }).on('error', (err) => { fs.unlink(destPath, () => {}); reject(err); });
     });
 }
 
 function toggleOptions(show) {
     if (isProcessing) return;
     const modal = document.getElementById('options-modal');
-    if (show) {
-        document.activeElement?.blur();
-        modal.style.display = 'flex';
-        modal.style.opacity = '1';
-    } else {
-        modal.style.opacity = '0';
-        setTimeout(() => modal.style.display = 'none', 300);
-    }
+    if (show) { document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; }
+    else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
 }
 
 async function toggleProfile(show) {
     if (isProcessing) return;
     const modal = document.getElementById('profile-modal');
-    if (show) {
-        await updatePlaytimeDisplay();
-        document.activeElement?.blur();
-        modal.style.display = 'flex';
-        modal.style.opacity = '1';
-    } else {
-        modal.style.opacity = '0';
-        setTimeout(() => modal.style.display = 'none', 300);
-    }
+    if (show) { await updatePlaytimeDisplay(); document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; }
+    else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
 }
 
 async function toggleServers(show) {
     if (isProcessing) return;
     const modal = document.getElementById('servers-modal');
-    if (show) {
-        await loadServers();
-        document.activeElement?.blur();
-        modal.style.display = 'flex';
-        modal.style.opacity = '1';
-    } else {
-        modal.style.opacity = '0';
-        setTimeout(() => modal.style.display = 'none', 300);
-    }
+    if (show) { await loadServers(); document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1'; }
+    else { modal.style.opacity = '0'; setTimeout(() => modal.style.display = 'none', 300); }
 }
 
-async function getServersFilePath() {
-    const fullPath = await getInstalledPath();
-    return path.join(path.dirname(fullPath), 'servers.txt');
-}
+async function getServersFilePath() { return path.join(currentInstance.installPath, 'servers.txt'); }
 
 async function loadServers() {
     const filePath = await getServersFilePath();
     const container = document.getElementById('servers-list-container');
+    if (!container) return;
     container.innerHTML = '';
-
-    if (!fs.existsSync(filePath)) {
-        container.innerHTML = '<div class="text-center text-gray-400 py-4">No servers added yet.</div>';
-        return;
-    }
-
+    if (!fs.existsSync(filePath)) { container.innerHTML = '<div class="text-center text-gray-400 py-4">No servers added yet.</div>'; return; }
     try {
         const content = fs.readFileSync(filePath, 'utf-8');
         const lines = content.split('\n').map(l => l.trim()).filter(l => l !== '');
         const servers = [];
-
-        for (let i = 0; i < lines.length; i += 3) {
-            if (lines[i] && lines[i+1] && lines[i+2]) {
-                servers.push({
-                    ip: lines[i],
-                    port: lines[i+1],
-                    name: lines[i+2]
-                });
-            }
-        }
-
-        if (servers.length === 0) {
-            container.innerHTML = '<div class="text-center text-gray-400 py-4">No servers added yet.</div>';
-            return;
-        }
-
+        for (let i = 0; i < lines.length; i += 3) { if (lines[i] && lines[i+1] && lines[i+2]) servers.push({ ip: lines[i], port: lines[i+1], name: lines[i+2] }); }
+        if (servers.length === 0) { container.innerHTML = '<div class="text-center text-gray-400 py-4">No servers added yet.</div>'; return; }
         servers.forEach((s, index) => {
             const item = document.createElement('div');
             item.className = 'flex justify-between items-center p-3 border-b border-[#333] hover:bg-[#111]';
-            item.innerHTML = `
-                <div class="flex flex-col">
-                    <span class="text-white text-xl">${s.name}</span>
-                    <span class="text-gray-400 text-sm">${s.ip}:${s.port}</span>
-                </div>
-                <div class="btn-mc !w-[100px] !h-[40px] !text-lg !mb-0" onclick="removeServer(${index})">DELETE</div>
-            `;
+            item.innerHTML = `<div class="flex flex-col"><span class="text-white text-xl">${s.name}</span><span class="text-gray-400 text-sm">${s.ip}:${s.port}</span></div><div class="btn-mc !w-[100px] !h-[40px] !text-lg !mb-0" onclick="removeServer(${index})">DELETE</div>`;
             container.appendChild(item);
         });
-    } catch (e) {
-        console.error("Failed to load servers:", e);
-        container.innerHTML = '<div class="text-center text-red-400 py-4">Error loading servers.</div>';
-    }
+    } catch (e) { console.error("Failed to load servers:", e); container.innerHTML = '<div class="text-center text-red-400 py-4">Error loading servers.</div>'; }
 }
 
 async function addServer() {
     const nameInput = document.getElementById('server-name-input');
     const ipInput = document.getElementById('server-ip-input');
     const portInput = document.getElementById('server-port-input');
-
     const name = nameInput.value.trim();
     const ip = ipInput.value.trim();
     const port = portInput.value.trim() || "25565";
-
-    if (!name || !ip) {
-        showToast("Name and IP are required!");
-        return;
-    }
-
+    if (!name || !ip) { showToast("Name and IP are required!"); return; }
     const filePath = await getServersFilePath();
     const serverEntry = `${ip}\n${port}\n${name}\n`;
-
     try {
-        const dir = path.dirname(filePath);
-        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-        
+        const dir = path.dirname(filePath); if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
         fs.appendFileSync(filePath, serverEntry);
-        
-        nameInput.value = '';
-        ipInput.value = '';
-        portInput.value = '';
-        
-        showToast("Server Added!");
-        loadServers();
-    } catch (e) {
-        showToast("Failed to save server: " + e.message);
-    }
+        nameInput.value = ''; ipInput.value = ''; portInput.value = '';
+        showToast("Server Added!"); loadServers();
+    } catch (e) { showToast("Failed to save server: " + e.message); }
 }
 
 async function removeServer(index) {
@@ -1289,30 +1083,11 @@ async function removeServer(index) {
         const content = fs.readFileSync(filePath, 'utf-8');
         const lines = content.split('\n').map(l => l.trim()).filter(l => l !== '');
         const servers = [];
-
-        for (let i = 0; i < lines.length; i += 3) {
-            if (lines[i] && lines[i+1] && lines[i+2]) {
-                servers.push({
-                    ip: lines[i],
-                    port: lines[i+1],
-                    name: lines[i+2]
-                });
-            }
-        }
-
+        for (let i = 0; i < lines.length; i += 3) { if (lines[i] && lines[i+1] && lines[i+2]) servers.push({ ip: lines[i], port: lines[i+1], name: lines[i+2] }); }
         servers.splice(index, 1);
-
-        let newContent = "";
-        servers.forEach(s => {
-            newContent += `${s.ip}\n${s.port}\n${s.name}\n`;
-        });
-
-        fs.writeFileSync(filePath, newContent);
-        loadServers();
-        showToast("Server Removed");
-    } catch (e) {
-        showToast("Failed to remove server: " + e.message);
-    }
+        let newContent = ""; servers.forEach(s => { newContent += `${s.ip}\n${s.port}\n${s.name}\n`; });
+        fs.writeFileSync(filePath, newContent); loadServers(); showToast("Server Removed");
+    } catch (e) { showToast("Failed to remove server: " + e.message); }
 }
 
 async function updatePlaytimeDisplay() {
@@ -1322,9 +1097,7 @@ async function updatePlaytimeDisplay() {
 }
 
 function formatPlaytime(seconds) {
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
+    const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); const s = seconds % 60;
     return `${h}h ${m}m ${s}s`;
 }
 
@@ -1336,88 +1109,152 @@ async function saveOptions() {
     const port = document.getElementById('port-input').value.trim();
     const isServer = document.getElementById('server-checkbox').checked;
     const newInstallPath = document.getElementById('install-path-input').value.trim();
-
-    const oldInstallPath = await getInstallDir();
+    const oldInstallPath = currentInstance.installPath;
     if (newInstallPath && newInstallPath !== oldInstallPath) {
-        // Move preserved files to new directory if they exist in old but not in new
         if (fs.existsSync(oldInstallPath)) {
-            const preserveList = [
-                'options.txt',
-                'servers.txt',
-                'username.txt',
-                'settings.dat',
-                'UID.dat',
-                path.join('Windows64', 'GameHDD')
-            ];
-
-            if (!fs.existsSync(newInstallPath)) {
-                fs.mkdirSync(newInstallPath, { recursive: true });
-            }
-
+            const preserveList = ['options.txt', 'servers.txt', 'username.txt', 'settings.dat', 'UID.dat', path.join('Windows64', 'GameHDD'), path.join('Common', 'res', 'mob', 'char.png')];
+            if (!fs.existsSync(newInstallPath)) fs.mkdirSync(newInstallPath, { recursive: true });
             for (const item of preserveList) {
-                const src = path.join(oldInstallPath, item);
-                const dest = path.join(newInstallPath, item);
-                
-                if (fs.existsSync(src)) {
-                    const destDir = path.dirname(dest);
-                    if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
-                    
-                    // Simple move; if cross-device it might fail, but let's try
-                    try {
-                        if (!fs.existsSync(dest)) {
-                            fs.renameSync(src, dest);
-                        } else {
-                            console.log("Dest already exists, skipping move for: " + item);
-                        }
-                    } catch (e) {
-                        console.error("Migration error for " + item + ": " + e.message);
-                    }
-                }
+                const src = path.join(oldInstallPath, item); const dest = path.join(newInstallPath, item);
+                if (fs.existsSync(src)) { const destDir = path.dirname(dest); if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true }); try { if (!fs.existsSync(dest)) fs.renameSync(src, dest); } catch (e) { console.error("Migration error for " + item + ": " + e.message); } }
             }
         }
-        await Store.set('legacy_install_path', newInstallPath);
+        currentInstance.installPath = newInstallPath;
     }
-
-    if (newRepo) await Store.set('legacy_repo', newRepo);
-    if (newExec) await Store.set('legacy_exec_path', newExec);
-    await Store.set('legacy_ip', ip);
-    await Store.set('legacy_port', port);
-    await Store.set('legacy_is_server', isServer);
-    
-    if (compatSelect) {
-        await Store.set('legacy_compat_layer', compatSelect.value);
-    }
-
-    toggleOptions(false);
-    fetchGitHubData();
-    updatePlayButtonText();
-    showToast("Settings Saved");
+    if (newRepo) currentInstance.repo = newRepo;
+    if (newExec) currentInstance.execPath = newExec;
+    currentInstance.ip = ip; currentInstance.port = port; currentInstance.isServer = isServer;
+    if (compatSelect) currentInstance.compatLayer = compatSelect.value;
+    await saveInstancesToStore(); toggleOptions(false); fetchGitHubData(); updatePlayButtonText(); showToast("Settings Saved");
 }
 
 async function saveProfile() {
-    const username = document.getElementById('username-input').value.trim();
+    let username = document.getElementById('username-input').value.trim();
+    if (username.length > 16) {
+        username = username.substring(0, 16);
+    }
     await Store.set('legacy_username', username);
-    toggleProfile(false);
-    showToast("Profile Updated");
+    toggleProfile(false); showToast("Profile Updated");
 }
 
 function showToast(msg) {
-    const t = document.getElementById('toast');
-    t.textContent = msg;
-    t.style.display = 'block';
-    t.style.animation = 'none';
-    t.offsetHeight; 
-    t.style.animation = 'slideUp 0.3s ease-out';
-    setTimeout(() => { 
-        t.style.display = 'none';
-    }, 3000);
+    const t = document.getElementById('toast'); if (!t) return;
+    t.textContent = msg; t.style.display = 'block'; t.style.animation = 'none'; t.offsetHeight; t.style.animation = 'slideUp 0.3s ease-out';
+    setTimeout(() => { t.style.display = 'none'; }, 3000);
 }
 
-async function toggleMusic() {
-    await MusicManager.toggle();
+async function toggleMusic() { await MusicManager.toggle(); }
+
+function scanCompatibilityLayers() {
+    const select = document.getElementById('compat-select'); if (!select) return;
+    const savedValue = currentInstance.compatLayer;
+    const layers = [{ name: 'Default (Direct)', cmd: 'direct' }, { name: 'Wine64', cmd: 'wine64' }, { name: 'Wine', cmd: 'wine' }];
+    const homeDir = require('os').homedir(); let steamPaths = [];
+    if (process.platform === 'linux') steamPaths = [path.join(homeDir, '.steam', 'steam', 'steamapps', 'common'), path.join(homeDir, '.local', 'share', 'Steam', 'steamapps', 'common'), path.join(homeDir, '.var', 'app', 'com.valvesoftware.Steam', 'data', 'Steam', 'steamapps', 'common')];
+    else if (process.platform === 'darwin') steamPaths = [path.join(homeDir, 'Library', 'Application Support', 'Steam', 'steamapps', 'common')];
+    for (const steamPath of steamPaths) {
+        if (fs.existsSync(steamPath)) { try { const dirs = fs.readdirSync(steamPath); dirs.filter(d => d.startsWith('Proton') || d.includes('Wine') || d.includes('CrossOver')).forEach(d => { const protonPath = path.join(steamPath, d, 'proton'); if (fs.existsSync(protonPath)) layers.push({ name: d, cmd: protonPath }); }); } catch (e) {} }
+    }
+    select.innerHTML = '';
+    layers.forEach(l => { const opt = document.createElement('option'); opt.value = l.cmd; opt.textContent = l.name; select.appendChild(opt); if (l.cmd === savedValue) opt.selected = true; });
+    updateCompatDisplay();
+}
+
+function updateCompatDisplay() {
+    const select = document.getElementById('compat-select'); const display = document.getElementById('current-compat-display');
+    if (select && display && select.selectedIndex !== -1) display.textContent = select.options[select.selectedIndex].text;
+}
+
+function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar'); const toggleIcon = document.getElementById('sidebar-toggle-icon');
+    sidebar.classList.toggle('collapsed');
+    if (sidebar.classList.contains('collapsed')) { toggleIcon.textContent = '▶'; toggleIcon.title = 'Expand Patch Notes'; }
+    else { toggleIcon.textContent = '◀'; toggleIcon.title = 'Collapse Patch Notes'; }
+}
+
+function isNewerVersion(latest, current) {
+    const lParts = latest.split('.').map(Number); const cParts = current.split('.').map(Number);
+    for (let i = 0; i < Math.max(lParts.length, cParts.length); i++) {
+        const l = lParts[i] || 0; const c = cParts[i] || 0;
+        if (l > c) return true; if (l < c) return false;
+    }
+    return false;
+}
+
+async function checkForLauncherUpdates(manual = false) {
+    try {
+        const currentVersion = require('./package.json').version;
+        const res = await fetch(`https://api.github.com/repos/${LAUNCHER_REPO}/releases/latest`);
+        if (!res.ok) { if (manual) showToast("Could not check for updates."); return; }
+        const latestRelease = await res.json(); const latestVersion = latestRelease.tag_name.replace('v', '');
+        if (isNewerVersion(latestVersion, currentVersion)) {
+            const updateConfirmed = await promptLauncherUpdate(latestRelease.tag_name, latestRelease.body);
+            if (updateConfirmed) downloadAndInstallLauncherUpdate(latestRelease);
+        } else if (manual) showToast("Launcher is up to date!");
+    } catch (e) { console.error("Launcher update check failed:", e); if (manual) showToast("Update check failed."); }
+}
+
+async function promptLauncherUpdate(version, changelog) {
+    return new Promise((resolve) => {
+        const modal = document.getElementById('update-modal');
+        const confirmBtn = document.getElementById('btn-confirm-update');
+        const skipBtn = document.getElementById('btn-skip-update');
+        const closeBtn = document.getElementById('btn-close-update');
+        const modalText = document.getElementById('update-modal-text');
+        if (modalText) {
+            modalText.innerHTML = `<span class="update-tag">NEW UPDATE: v${version}</span><br><div class="pn-body" style="font-size: 16px; max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 10px; margin-top: 5px;">${changelog || "No changelog provided."}</div>`;
+            modalText.style.display = 'block';
+        }
+        document.activeElement?.blur(); modal.style.display = 'flex'; modal.style.opacity = '1';
+        const cleanup = (result) => {
+            modal.style.opacity = '0'; setTimeout(() => { modal.style.display = 'none'; if (modalText) modalText.style.display = 'none'; }, 300);
+            confirmBtn.onclick = null; skipBtn.onclick = null; closeBtn.onclick = null; resolve(result);
+        };
+        confirmBtn.onclick = () => cleanup(true); skipBtn.onclick = () => cleanup(false); closeBtn.onclick = () => cleanup(false);
+    });
+}
+
+async function downloadAndInstallLauncherUpdate(release) {
+    setProcessingState(true); updateProgress(0, "Preparing Launcher Update...");
+    let assetPattern = "";
+    if (process.platform === 'win32') assetPattern = ".exe";
+    else if (process.platform === 'linux') assetPattern = ".appimage";
+    else if (process.platform === 'darwin') assetPattern = ".dmg";
+    const asset = release.assets.find(a => a.name.toLowerCase().endsWith(assetPattern));
+    if (!asset) { showToast("No compatible update found for your OS."); setProcessingState(false); return; }
+    try {
+        const homeDir = require('os').homedir(); const downloadPath = path.join(homeDir, 'Downloads', asset.name);
+        updateProgress(10, `Downloading Launcher Update...`); await downloadFile(asset.browser_download_url, downloadPath);
+        updateProgress(100, "Download Complete. Launching Installer...");
+        await new Promise(r => setTimeout(r, 1000));
+        if (process.platform === 'win32') childProcess.exec(`start "" "${downloadPath}"`);
+        else if (process.platform === 'linux') { fs.chmodSync(downloadPath, 0o755); childProcess.exec(`"${downloadPath}"`); }
+        else if (process.platform === 'darwin') childProcess.exec(`open "${downloadPath}"`);
+        setTimeout(() => ipcRenderer.send('window-close'), 2000);
+    } catch (e) { showToast("Launcher Update Error: " + e.message); setProcessingState(false); }
+}
+
+async function loadSplashText() {
+    const splashEl = document.getElementById('splash-text');
+    if (!splashEl) return;
+    try {
+        const filePath = path.join(__dirname, 'strings.txt');
+        if (fs.existsSync(filePath)) {
+            const content = fs.readFileSync(filePath, 'utf-8');
+            const lines = content.split('\n').map(l => l.trim()).filter(l => l !== '');
+            if (lines.length > 0) {
+                const randomSplash = lines[Math.floor(Math.random() * lines.length)];
+                splashEl.textContent = randomSplash;
+            }
+        }
+    } catch (e) {
+        console.error("Failed to load splash text:", e);
+        splashEl.textContent = "Welcome!";
+    }
 }
 
 // Global functions for HTML onclick
+window.toggleSidebar = toggleSidebar;
 window.minimizeWindow = minimizeWindow;
 window.toggleMaximize = toggleMaximize;
 window.closeWindow = closeWindow;
@@ -1435,3 +1272,11 @@ window.checkForUpdatesManual = checkForUpdatesManual;
 window.browseInstallDir = browseInstallDir;
 window.openGameDir = openGameDir;
 window.toggleMusic = toggleMusic;
+window.getInstallDir = getInstallDir;
+window.showToast = showToast;
+window.toggleInstances = toggleInstances;
+window.createNewInstance = createNewInstance;
+window.saveNewInstance = saveNewInstance;
+window.switchInstance = switchInstance;
+window.deleteInstance = deleteInstance;
+window.toggleAddInstance = toggleAddInstance;
diff --git a/skin_manager.js b/skin_manager.js
new file mode 100644
index 0000000..9b59d5f
--- /dev/null
+++ b/skin_manager.js
@@ -0,0 +1,390 @@
+// skin_manager.js
+// Handles skin uploading, conversion, 3D preview, and saving to char.png
+
+let mainMenuScene, mainMenuCamera, mainMenuRenderer, mainMenuPlayerGroup;
+let isMainSkinDragging = false;
+
+let skinScene, skinCamera, skinRenderer, skinPlayerGroup;
+let isSkinDragging = false;
+let previousSkinMousePosition = { x: 0, y: 0 };
+let processedSkinDataUrl = null;
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    const skinInput = document.getElementById('skin-input');
+    const dropZone = document.getElementById('drop-zone');
+    const saveSkinBtn = document.getElementById('save-skin-btn');
+    const closeSkinBtn = document.getElementById('btn-close-skin');
+
+    if (skinInput) skinInput.addEventListener('change', (e) => handleSkinFile(e.target.files[0]));
+    
+    if (dropZone) {
+        dropZone.addEventListener('dragover', (e) => { 
+            e.preventDefault(); 
+            dropZone.classList.add('border-green-500'); 
+        });
+        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('border-green-500'));
+        dropZone.addEventListener('drop', (e) => { 
+            e.preventDefault(); 
+            dropZone.classList.remove('border-green-500');
+            handleSkinFile(e.dataTransfer.files[0]); 
+        });
+    }
+
+    if (saveSkinBtn) {
+        saveSkinBtn.addEventListener('click', saveSkinToDisk);
+    }
+
+    if (closeSkinBtn) {
+        closeSkinBtn.addEventListener('click', closeSkinManager);
+    }
+
+    // Initialize Main Menu Viewer
+    initMainMenuSkinViewer();
+});
+
+function initMainMenuSkinViewer() {
+    const container = document.getElementById('main-skin-viewer');
+    if (!container) return;
+
+    mainMenuScene = new THREE.Scene();
+    mainMenuCamera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 1000);
+    mainMenuCamera.position.set(0, 5, 60); 
+
+    mainMenuRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    mainMenuRenderer.setSize(container.offsetWidth, container.offsetHeight);
+    mainMenuRenderer.setPixelRatio(window.devicePixelRatio);
+    mainMenuRenderer.outputEncoding = THREE.sRGBEncoding;
+    container.appendChild(mainMenuRenderer.domElement);
+
+    mainMenuScene.add(new THREE.AmbientLight(0xffffff, 1.1));
+    const dl = new THREE.DirectionalLight(0xffffff, 0.5);
+    dl.position.set(10, 20, 15);
+    mainMenuScene.add(dl);
+
+    mainMenuPlayerGroup = new THREE.Group();
+    mainMenuScene.add(mainMenuPlayerGroup);
+
+    // Interaction for Main Menu Viewer
+    let prevX = 0;
+    container.addEventListener('mousedown', (e) => {
+        isMainSkinDragging = true;
+        prevX = e.clientX;
+    });
+    window.addEventListener('mouseup', () => isMainSkinDragging = false);
+    window.addEventListener('mousemove', (e) => {
+        if (isMainSkinDragging && mainMenuPlayerGroup) {
+            mainMenuPlayerGroup.rotation.y += (e.clientX - prevX) * 0.01;
+            prevX = e.clientX;
+        }
+    });
+
+    // Auto-rotate slowly
+    function animateMain() {
+        requestAnimationFrame(animateMain);
+        if (!isMainSkinDragging && mainMenuPlayerGroup) mainMenuPlayerGroup.rotation.y += 0.005;
+        if (mainMenuRenderer && mainMenuScene && mainMenuCamera) mainMenuRenderer.render(mainMenuScene, mainMenuCamera);
+    }
+    animateMain();
+
+    // Load current skin after short delay to ensure paths are ready
+    setTimeout(loadMainMenuSkin, 500);
+
+    // Handle window resize
+    window.addEventListener('resize', () => {
+        if (mainMenuCamera && mainMenuRenderer && container) {
+            mainMenuCamera.aspect = container.offsetWidth / container.offsetHeight;
+            mainMenuCamera.updateProjectionMatrix();
+            mainMenuRenderer.setSize(container.offsetWidth, container.offsetHeight);
+        }
+    });
+}
+
+async function loadMainMenuSkin() {
+    try {
+        const installDir = await window.getInstallDir();
+        const skinPath = path.join(installDir, 'Common', 'res', 'mob', 'char.png');
+        
+        if (fs.existsSync(skinPath)) {
+            const skinData = fs.readFileSync(skinPath);
+            const blob = new Blob([skinData]);
+            const url = URL.createObjectURL(blob);
+            
+            const img = new Image();
+            img.onload = () => {
+                const isLegacy = img.height === 32;
+                updateSkinModel(img.src, isLegacy, mainMenuPlayerGroup);
+            };
+            img.src = url;
+        } else {
+            console.log("No skin found at " + skinPath);
+        }
+    } catch (e) {
+        console.error("Failed to load main menu skin:", e);
+    }
+}
+
+function updateSkinModel(dataUrl, isLegacy, targetGroup) {
+    if (!targetGroup) return;
+
+    new THREE.TextureLoader().load(dataUrl, (texture) => {
+        texture.magFilter = THREE.NearestFilter;
+        texture.minFilter = THREE.NearestFilter;
+        texture.encoding = THREE.sRGBEncoding;
+
+        // Clear existing children
+        while(targetGroup.children.length > 0) targetGroup.remove(targetGroup.children[0]);
+
+        const createFaceMaterial = (tex, x, y, w, h) => {
+            const texWidth = tex.image.width;
+            const texHeight = tex.image.height;
+            const matTex = tex.clone();
+            matTex.magFilter = THREE.NearestFilter;
+            matTex.minFilter = THREE.NearestFilter;
+            matTex.repeat.set(w / texWidth, h / texHeight);
+            matTex.offset.set(x / texWidth, 1 - (y + h) / texHeight);
+            matTex.needsUpdate = true;
+            return new THREE.MeshLambertMaterial({ map: matTex, transparent: true, alphaTest: 0.5, side: THREE.FrontSide });
+        };
+
+        const createBodyPart = (w, h, d, tex, uv, offset = 0) => {
+            const geometry = new THREE.BoxGeometry(w, h, d);
+            const materials = [
+                createFaceMaterial(tex, uv.left[0], uv.left[1], uv.left[2], uv.left[3]), // Left (Standard MC "Right")
+                createFaceMaterial(tex, uv.right[0], uv.right[1], uv.right[2], uv.right[3]), // Right (Standard MC "Left")
+                createFaceMaterial(tex, uv.top[0], uv.top[1], uv.top[2], uv.top[3]),
+                createFaceMaterial(tex, uv.bottom[0], uv.bottom[1], uv.bottom[2], uv.bottom[3]),
+                createFaceMaterial(tex, uv.front[0], uv.front[1], uv.front[2], uv.front[3]),
+                createFaceMaterial(tex, uv.back[0], uv.back[1], uv.back[2], uv.back[3])
+            ];
+            const mesh = new THREE.Mesh(geometry, materials);
+            if (offset !== 0) mesh.scale.set(1 + offset, 1 + offset, 1 + offset);
+            return mesh;
+        };
+
+        const limbUv = (x, y) => ({
+            top: [x+4, y, 4, 4], bottom: [x+8, y, 4, 4],
+            right: [x, y+4, 4, 12], front: [x+4, y+4, 4, 12],
+            left: [x+8, y+4, 4, 12], back: [x+12, y+4, 4, 12]
+        });
+
+        // Head
+        const headUvs = { top: [8, 0, 8, 8], bottom: [16, 0, 8, 8], right: [0, 8, 8, 8], left: [16, 8, 8, 8], front: [8, 8, 8, 8], back: [24, 8, 8, 8] };
+        const head = createBodyPart(8, 8, 8, texture, headUvs);
+        head.position.y = 10;
+        targetGroup.add(head);
+
+        // Hat
+        const hatUvs = { top: [40, 0, 8, 8], bottom: [48, 0, 8, 8], right: [32, 8, 8, 8], left: [48, 8, 8, 8], front: [40, 8, 8, 8], back: [56, 8, 8, 8] };
+        const hat = createBodyPart(8, 8, 8, texture, hatUvs, 0.12);
+        hat.position.y = 10;
+        targetGroup.add(hat);
+
+        // Torso
+        const torsoUvs = { top: [20, 16, 8, 4], bottom: [28, 16, 8, 4], right: [16, 20, 4, 12], left: [28, 20, 4, 12], front: [20, 20, 8, 12], back: [32, 20, 8, 12] };
+        targetGroup.add(createBodyPart(8, 12, 4, texture, torsoUvs));
+
+        // Jacket (non-legacy only)
+        if (!isLegacy) {
+            const jacketUvs = { top: [20, 32, 8, 4], bottom: [28, 32, 8, 4], right: [16, 36, 4, 12], left: [28, 36, 4, 12], front: [20, 36, 8, 12], back: [32, 36, 8, 12] };
+            targetGroup.add(createBodyPart(8, 12, 4, texture, jacketUvs, 0.05));
+        }
+
+        // Limbs
+        const limbs = [
+            { pos: [-6, 0, 0], uv: limbUv(40, 16), layerUv: limbUv(40, 32) },
+            { pos: [6, 0, 0], uv: isLegacy ? limbUv(40, 16) : limbUv(32, 48), layerUv: limbUv(48, 48) },
+            { pos: [-2, -12, 0], uv: limbUv(0, 16), layerUv: limbUv(0, 32) },
+            { pos: [2, -12, 0], uv: isLegacy ? limbUv(0, 16) : limbUv(16, 48), layerUv: limbUv(0, 48) }
+        ];
+
+        limbs.forEach(l => {
+            const base = createBodyPart(4, 12, 4, texture, l.uv);
+            base.position.set(...l.pos);
+            targetGroup.add(base);
+            if (!isLegacy) {
+                const layer = createBodyPart(4, 12, 4, texture, l.layerUv, 0.05);
+                layer.position.set(...l.pos);
+                targetGroup.add(layer);
+            }
+        });
+    });
+}
+
+function openSkinManager() {
+    const modal = document.getElementById('skin-modal');
+    modal.style.display = 'flex';
+    modal.style.opacity = '1';
+    
+    // Clear previous state in modal
+    const previewContainer = document.getElementById('preview-container');
+    if (previewContainer) previewContainer.classList.add('hidden');
+    
+    const sysMsg = document.getElementById('sys-message');
+    if (sysMsg) sysMsg.classList.add('hidden');
+    
+    // Load current skin into preview (optional, maybe we only want to see uploaded ones)
+    // loadCurrentSkinToPreview(); 
+}
+
+function closeSkinManager() {
+    const modal = document.getElementById('skin-modal');
+    modal.style.opacity = '0';
+    setTimeout(() => {
+        modal.style.display = 'none';
+        
+        // Reset state
+        const prompt = document.getElementById('upload-prompt');
+        if (prompt) prompt.style.display = 'block';
+        
+        const previewContainer = document.getElementById('preview-container');
+        if (previewContainer) previewContainer.classList.add('hidden');
+        
+        processedSkinDataUrl = null;
+        
+    }, 300);
+}
+
+function handleSkinFile(file) {
+    if (!file || !file.type.includes('png')) return window.showToast("Only PNG files are supported!");
+    
+    const prompt = document.getElementById('upload-prompt');
+    if (prompt) prompt.style.display = 'none';
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+            processSkinImage(img, e.target.result);
+        };
+        img.onerror = () => {
+             window.showToast("Failed to load image");
+             if(prompt) prompt.style.display = 'block';
+        };
+        img.src = e.target.result;
+    };
+    reader.readAsDataURL(file);
+}
+
+function processSkinImage(img, srcUrl, isInitialLoad = false) {
+    const canvas = document.getElementById('skin-canvas');
+    const ctx = canvas.getContext('2d');
+    const formatLabel = document.getElementById('format-label');
+    const statusMessage = document.getElementById('status-message');
+    const previewContainer = document.getElementById('preview-container');
+    const saveBtn = document.getElementById('save-skin-btn');
+    const prompt = document.getElementById('upload-prompt');
+
+    if (img.width !== 64) {
+        if(prompt) prompt.style.display = 'block';
+        if(previewContainer) previewContainer.classList.add('hidden');
+        return window.showToast("Invalid skin width. Must be 64px.");
+    }
+    
+    if(prompt) prompt.style.display = 'none';
+
+    const isLegacy = img.height === 32;
+    
+    ctx.clearRect(0, 0, 64, 32);
+    ctx.drawImage(img, 0, 0, 64, 32, 0, 0, 64, 32);
+    processedSkinDataUrl = canvas.toDataURL('image/png');
+    
+    previewContainer.classList.remove('hidden');
+    
+    if (isInitialLoad) {
+        if(formatLabel) formatLabel.textContent = "Current Skin";
+        if(statusMessage) statusMessage.innerHTML = "<span class='text-blue-400 font-black' style='color: #60a5fa;'>LOADED FROM DISK</span>";
+        if(saveBtn) {
+            saveBtn.textContent = "SAVED";
+            saveBtn.classList.add('disabled');
+        }
+    } else {
+        if(formatLabel) formatLabel.textContent = isLegacy ? "64x32 (Legacy)" : "64x64 (Modern)";
+        if(statusMessage) statusMessage.innerHTML = isLegacy ? "<span class='text-green-400 font-black' style='color: #4ade80;'>LEGACY READY</span>" : "<span class='text-yellow-400 font-black' style='color: #facc15;'>CONVERTED TO 64x32</span>";
+        if(saveBtn) {
+            saveBtn.textContent = "SAVE SKIN";
+            saveBtn.classList.remove('disabled');
+        }
+    }
+    
+    if (!skinScene) initPreviewEngine();
+    updateSkinModel(srcUrl, isLegacy, skinPlayerGroup);
+}
+
+function initPreviewEngine() {
+    const container = document.getElementById('skin-viewer-container');
+    if (!container) return;
+    
+    skinScene = new THREE.Scene();
+    skinCamera = new THREE.PerspectiveCamera(35, container.offsetWidth / container.offsetHeight, 0.1, 1000);
+    skinCamera.position.set(0, 5, 70); 
+
+    skinRenderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
+    skinRenderer.setSize(container.offsetWidth, container.offsetHeight);
+    skinRenderer.setPixelRatio(window.devicePixelRatio);
+    skinRenderer.outputEncoding = THREE.sRGBEncoding;
+    container.appendChild(skinRenderer.domElement);
+
+    skinScene.add(new THREE.AmbientLight(0xffffff, 0.9));
+    const dl = new THREE.DirectionalLight(0xffffff, 0.35);
+    dl.position.set(10, 20, 15);
+    skinScene.add(dl);
+
+    skinPlayerGroup = new THREE.Group();
+    skinScene.add(skinPlayerGroup);
+
+    container.addEventListener('mousedown', () => isSkinDragging = true);
+    window.addEventListener('mouseup', () => isSkinDragging = false);
+    window.addEventListener('mousemove', (e) => {
+        if (isSkinDragging && skinPlayerGroup) {
+            skinPlayerGroup.rotation.y += (e.movementX) * 0.01;
+        }
+    });
+
+    function animate() {
+        requestAnimationFrame(animate);
+        if (!isSkinDragging && skinPlayerGroup) skinPlayerGroup.rotation.y += 0.008;
+        if (skinRenderer && skinScene && skinCamera) skinRenderer.render(skinScene, skinCamera);
+    }
+    animate();
+}
+
+async function saveSkinToDisk() {
+    if (!processedSkinDataUrl) return;
+
+    try {
+        const installDir = await window.getInstallDir();
+        const savePath = path.join(installDir, 'Common', 'res', 'mob', 'char.png');
+        const dir = path.dirname(savePath);
+
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+
+        const base64Data = processedSkinDataUrl.replace(/^data:image\/png;base64,/, "");
+        fs.writeFileSync(savePath, base64Data, 'base64');
+        
+        window.showToast("Skin Saved Successfully!");
+        
+        const saveBtn = document.getElementById('save-skin-btn');
+        if(saveBtn) {
+            saveBtn.textContent = "SAVED!";
+            saveBtn.classList.add('disabled');
+        }
+
+        // Refresh main menu skin
+        loadMainMenuSkin();
+        
+        // Close modal after short delay?
+        setTimeout(closeSkinManager, 1000);
+
+    } catch (e) {
+        window.showToast("Error Saving Skin: " + e.message);
+        console.error(e);
+    }
+}
+
+// Global Export
+window.openSkinManager = openSkinManager;
+window.initMainMenuSkinViewer = initMainMenuSkinViewer;
+window.loadMainMenuSkin = loadMainMenuSkin;
diff --git a/strings.txt b/strings.txt
index c4c89db..e0ddf31 100644
--- a/strings.txt
+++ b/strings.txt
@@ -476,3 +476,8 @@ JAKE: Pip pip!
 JAKE: By jove!
 JAKE: Egads!
 JAKE: Jolly good show
+Jade Harley!!!
+Jade Harley!!!
+Jade Harley!!!
+Jade Harley!!!
+Jade Harley!!!
\ No newline at end of file
diff --git a/style.css b/style.css
index ded73fc..ee67369 100644
--- a/style.css
+++ b/style.css
@@ -112,6 +112,43 @@ body {
     overflow-y: auto;
     z-index: 10;
     backdrop-filter: blur(8px);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
+}
+
+.sidebar.collapsed {
+    width: 80px;
+    padding: 30px 10px;
+}
+
+.sidebar.collapsed #updates-list {
+    display: none;
+}
+
+.sidebar.collapsed .sidebar-title {
+    border-bottom: none;
+    margin-bottom: 0;
+    justify-content: center;
+    padding-bottom: 0;
+}
+
+.sidebar.collapsed #sidebar-title-text {
+    display: none;
+}
+
+.sidebar.collapsed #sidebar-toggle-icon {
+    font-size: 32px;
+}
+
+#sidebar-toggle-icon {
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.2s, color 0.2s;
+}
+
+#sidebar-toggle-icon:hover {
+    color: #55ff55;
+    transform: scale(1.1);
 }
 
 .sidebar-title {
@@ -119,9 +156,12 @@ body {
     color: #fff;
     text-shadow: 2px 2px 0 #000;
     margin-bottom: 25px;
-    text-align: center;
     border-bottom: 2px solid #555;
     padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
 }
 
 .commit-author {