add UI panel desktop

docs/02-setup-main-game/05-main-scene.md

@@ -88,9 +88,108 @@ The setup is very straightforward by using the `Generate Panel` command in each
 
 ## Setup UI Panel
 
-> To be Added:
+### UI Panel Overview
-> - Different UI Layout on Desktop and Mobile
+
-> - Which helper/p4f menu can be used
+#### Available Layouts
+
+The UI system supports both desktop and mobile layouts design.
+
+#### 🖥️ Desktop Layout
+- Full bottom bar with all controls visible
+- Horizontal layout maximizing screen width
+
+![Desktop UI Layout](./img/05-main-scene/bottom-ui-desktop.png)
+
+#### 📱 Mobile Layout
+The mobile interface adapts to both landscape and portrait orientations:
+
+| Orientation  | Preview |
+|------------|----------|
+| Landscape | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) |
+| Portrait | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) |
+
+
+### :one: **Add Prefabs For Desktop**
+
+#### Step 1: Setup Prefab Files 
+
+1. **Locate Required Prefabs**  
+   - Find `ui-bottom-bar-panel` prefab  
+   ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) 
+
+2. **Copy UI Assets**   
+   - Go to **core/editor** directory    
+   - Copy the `bottom-ui` folder    
+   ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png)  
+
+3. **Place Assets in Game Directory**   
+   - Paste the copied `bottom-ui` folder    
+   ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png)  
+
+#### Step 2: Configure Prefabs  
+
+1. **Core Prefabs**   
+   ![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png)   
+
+2. **Copied Prefab**      
+
+At here:
+
+| Prefix to Remove | Original Prefab Name | Final Name |
+|-----------------|---------------------|------------|
+| `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
+| `template-` | `template-button-auto-selection` | `button-auto-selection` |
+
+![Prefab Naming Example](./img/05-main-scene/rename-prefab.png)
+
+
+#### Button Auto Selection Label
+Use `template-label-auto-selection` to customize the `button-auto-selection`:
+- Modify text color
+- Add Label Outline component
+- Add Label Shadow component
+![Label Configuration Options](./img/05-main-scene/option-for-label.png)
+
+#### Ui Bottom Bar Panel Label
+Use `template-label-title` to customize the `ui-bottom-bar-panel`:  
+:::tip
+[Detailed configuration the same Button Auto Selection Label](#button-auto-selection-label) 
+:::
+Bottom bar labels include a localization component for multi-language support:
+![[Localization Component](./img/05-main-scene/component-locale.png)
+
+#### FormatText
+
+The `FormatText` property controls text formatting behavior for label components:
+
+| Property | Description | Example |
+|----------|-------------|---------|
+| `default` | Initial formatting state | `false` |
+| `notify` | Formatting update callback | Updates when value changes |
+
+
+#### Step 3: Apply Textures 
+
+1. **Run the Helper Tool**
+   - Open the UI Desktop Helper 
+   - Select texture assignment options  
+   ![Helper Tool](./img/05-main-scene/run-ui-desktop-helper.png)    
+
+2. **Verify Results**   
+   
+   **Auto Selection Component**     
+   ![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png)
+
+   **Bottom Bar Component** 
+   ![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png)
+
+:::tip Success Verification
+✔️ Check all textures are correctly mapped  
+✔️ Verify button states display properly    
+✔️ Confirm UI layout matches design 
+:::
+
+---
 
 ## Setup Background