diff --git a/docs/02-setup-main-game/05-main-scene/06-special-win.md b/docs/02-setup-main-game/05-main-scene/06-special-win.md
index 80c5096..74f52a9 100644
--- a/docs/02-setup-main-game/05-main-scene/06-special-win.md
+++ b/docs/02-setup-main-game/05-main-scene/06-special-win.md
@@ -24,7 +24,7 @@ Special Wins are high-value reward events categorized by payout thresholds:
- 
- **Coin Effect System**:
- - Variants for different markets:
+ - Variants for different game theme:
| Submodule | Theme | Preview |
|-----------|-------|---------|
| `hyper-coin-shower-international` | International |  |
diff --git a/docs/02-setup-main-game/05-main-scene/08-free-round.md b/docs/02-setup-main-game/05-main-scene/08-free-round.md
index af1449a..fc5a816 100644
--- a/docs/02-setup-main-game/05-main-scene/08-free-round.md
+++ b/docs/02-setup-main-game/05-main-scene/08-free-round.md
@@ -48,7 +48,7 @@ The **Free Round** system manages the display and logic for tracking remaining f
- 
- **Mobile**:
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
- - 
- **Common**:
- Free Round Background: 
diff --git a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
index aaebffe..e19ca38 100644
--- a/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
+++ b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
@@ -1,105 +1,58 @@
---
sidebar_position: 10
---
-# Bottom Bar UI (Desktop)
-The bottom bar UI on desktop provides a functional interface for gameplay control
+# Desktop Bottom Bar UI
----
+## Overview
+The **Bottom Bar UI** provides a functional interface for gameplay controls on desktop, using a horizontal layout to maximize screen width.
-### Overview
-- Full bottom bar with all controls visible
-- Horizontal layout maximizing screen width
-
-
+
## Implementation
+1. **Set Up Prefab Editor**:
+ - **Locate Prefab**:
+ - Search for `ui-bottom-bar-panel` prefab.
+ - 
+ - **Find Assets**:
+ - Navigate to `core/editor` directory.
+ - 
+ - **Clone Assets**:
+ - Copy and paste to the game assets location.
+ - 
-### Step 1: Set Up Prefab Editor
+2. **Configure Prefabs**:
+ - **Core Prefabs Structure**:
+ - Path: `assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs`
+ - 
+ - **Rename Prefabs**:
+ - Remove unnecessary prefixes:
+ | Prefix to Remove | Original Name | Final Name |
+ |------------------|---------------|------------|
+ | `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
+ | `template-` | `template-button-auto-selection` | `button-auto-selection` |
+ - 
+ - **Customize `button-auto-selection` Label**:
+ - Use `template-label-auto-selection` to adjust appearance.
+ - Add **Label Outline** and **Label Shadow** for better readability.
+ - 
+ - **Customize `ui-bottom-bar-panel` Label**:
+ - Use `assets/game-assets/editor/bottom-ui/template-label-title`.
+ - Include a localization component for multi-language support.
+ - 
+ - **FormatText Properties**:
+ | Property | Description | Example |
+ |----------|-------------|---------|
+ | `default` | Initial formatting state | `false` |
+ | `notify` | Formatting update callback | Updates when value changes |
-| Step | Action | image |
-|------|---------|--------------|
-| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab |  |
-| 2. Find Assets | Navigate to `core/editor` directory |  |
-| 3. Clone Assets | Copy / Paste to game assets location |  |
+3. **Set Up UI in Main Scene**:
+ - Create a new node and configure in the main scene.
+ - 
----
+4. **Apply Textures**:
+ - Ensure assets for bottom UI and button UI text are complete.
+ - 
-### Step 2: Configure Prefabs
-
-#### Core Prefabs Structure
-Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
-
-
-#### Rename Prefabs
-Rename the copied prefabs by removing unnecessary prefixes:
-| 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` |
-
-
-```jsx title="The folder structure is as follows:"
- assets\game-assets\prefabs
-```
-
-
-
-
-#### Customize *`button-auto-selection`* Label
-
-**Follow Design:**
-Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.
-
-| Component | Description |
-| -------------------- | ------------------------------------------------- |
-| **Label Outline** | Add an outline to make the text stand out. |
-| **Label Shadow** | Add a shadow for better contrast and readability. |
-| -------------------- | ------------------------------------------------- |
-
-
-
-#### Customize *`ui-bottom-bar-panel`* Label
-Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`:
-:::info
-๐[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)
-Bottom bar labels include a localization component for multi-language support
-:::
-
-
-
-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: Set Up UI In Main Scenes
-
-Create new node and configuration in your main scene:
-
-
-#### Platform Node Spawner Settings
-
-๐ Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
-
-### Step 4: Apply Textures
-
-#### Texture Button Bar
-Checklist assets completed for bottom UI and button UI text
-:::info
-๐ Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
-:::
- 
-
-#### Run the Helper Tool
-
-To configure the bottom bar UI helper.
-:::info
-๐Details: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
-:::
-
----
\ No newline at end of file
+5. **Run Helper Tool**:
+ - Configure the bottom bar UI using the helper tool.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md b/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
index a138821..4f4324c 100644
--- a/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md
@@ -1,109 +1,96 @@
---
sidebar_position: 11
---
+
# Mobile UI Panel
-The Mobile UI provides a functional interface for gameplay control
----
+## Overview
+The Mobile UI provides a responsive interface for gameplay controls, adapting to both **Landscape** and **Portrait** orientations on mobile devices.
-### Overview
-The mobile interface adapts to both landscape and portrait orientations:
-
-| Orientation | Preview |
-|-------------|----------|
+| Orientation | Preview |
+|-------------|---------|
| Landscape |  |
-| Portrait | 
+| Portrait |  |
## Implementation
+
### Step 1: Set Up Prefabs
+Configure the necessary prefabs for the Mobile UI.
-| Step | Action | Description | Image Reference |
-| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- |
-| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab |  |
-| 2 | Clone Assets | Copy the required assets |  |
-| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - |
-| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab |  |
-| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - |
+| Step | Action | Description | Image Reference |
+|------|--------|-------------|-----------------|
+| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. |  |
+| 2 | Clone Assets | Copy the required assets to the game assets directory. |  |
+| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile`. | - |
+| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab. |  |
+| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile`. | - |
-
-:::tip File Structure
-Maintain this directory structure for proper prefab references:
+**Tip**: Maintain the following directory structure for proper prefab references:
```
assets/
โโโ game-assets/
โโโ prefabs/
โโโ mobile/
- โโโ Exp: mobile-ui.prefab
- โโโ Exp: buy-feature.prefab
+ โโโ mobile-ui.prefab
+ โโโ buy-feature.prefab
```
-:::
-### Step 2: Rename Prefabs
+### Step 2: Rename Prefabs
+Rename the copied prefabs by removing unnecessary prefixes to ensure consistency.
-Rename the copied prefabs by removing unnecessary prefixes:
-| Prefix to Remove | Final Name |
-|------------------|----------------------|
-| `template-` | |
+| Prefix to Remove | Example |
+|------------------|---------|
+| `template-` |  |
-### Step 3: Configure UI in Main Scenes
+### Step 3: Configure UI in Main Scene
+Add and configure a new node in the main scene to integrate the Mobile UI.
-Create new node and configuration in your main scene:
-
+
-#### Platform Node Spawner Settings
+**Platform Node Spawner Settings**:
-๐ Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
+### Step 4: Apply Textures
+Ensure all Mobile UI assets are prepared and applied correctly.
-### Step 4: Apply Textures
+
-#### Texture Mobile UI
+**Run the Helper Tool**:
+- Use the Mobile UI helper tool to configure the UI components.
-Checklist assets completed for Mobile UI
+### Step 5: Set Color Theme for Mobile UI
+Customize the color theme for the Mobile UI using the `helper-paint-color-ui-mobile.js` component to apply theme-based colors across UI elements.
-:::info
-๐Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
-:::
- 
+**Follow Design**:
+| Landscape | Portrait |
+|-----------|----------|
+|  |  |
-#### Run the Helper Tool
+**Configuration Steps**:
+1. **Access the Helper Component**:
+ - Locate the `helper-paint-color-ui-mobile.js` component in the node inspector.
+ - 
-To configure the mobile UI helper.
-:::info
-๐Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
-:::
+2. **Configure Color Properties**:
+ - Adjust the following properties to match the game design:
-
+| # | Property | Description | Example |
+|---|----------|-------------|---------|
+| 0 | **Paint Color** | Triggers repainting of UI components. |  |
+| 1 | **Main UI Normal Color** | Default color for UI elements (e.g., Buy, Close, Auto). |  |
+| 2 | **Main UI Highlight Color** | Color for highlighted or selected UI elements. |  |
+| 3 | **Toggle State Off Color** | Color for toggles in the off state. |  |
+| 4 | **Toggle State On Color** | Color for toggles in the on state. |  |
+| 5 | **Background Info Page Color** | Background color for info pages. |  |
+| 6 | **Background Menu Color** | Background color for menus. |  |
+| 7 | **Background Point Panel Color** | Background color for point/balance panels. |  |
+| 8 | **Background Bottom Bar Color** | Background color for the bottom bar (Portrait only). |  |
+| 9 | **Button Quit Color** | Color for the Quit button. |  |
+| 10 | **Button Cancel Color** | Color for the Cancel button. |  |
+| 11 | **Label Balance Normal Color** | Color for the balance label in normal state. |  |
+| 12 | **Label Balance Spin Color** | Color for the balance label during spins. |  |
+| 13 | **Button Plus/Minus Auto Color** | Color for Plus/Minus buttons in autoplay. |  |
+| 14 | **Label Start Auto Color** | Color for the Start Autoplay label. |  |
+| 15 | **Label Outline Notification** | Outline color and width for notifications. |  |
+| 16 | **Total Win Medium Win Color** | Color for medium win labels. |  |
-### Step 5: Set Color Theme for Mobile Menu UI
-
-#### Follow Design:
-
-| |  |
-|---------|-------|
-
-#### Overview
-The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface.
-
-
-
-|Ordinal number| Properties | Explaination | Example |
-|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------|
-|0 |**paintColor** |Trigger to repaint UI components | |
-|1 | **Main Ui Normal Color** |Default color of UI elements |  |
-|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements |  |
-|3 | **Toggle State Off Color** | Color of toggle when off |  |
-|4 | **Toggle State On Color** | Color of toggle when on |  |
-|5 | **Background Info Page Color** | Info screen background |  |
-|6 | **Background Menu Color** | Menu background color |  |
-|7 | **Background Point Panel Color** | Background panel for point/balance UI | |
-|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) |  |
-|9 | **Button Quit Color** | Quit button color |  |
-|10 | **Button Cancel Color** | Cancel button color |  |
-|11 | **Label Balance Normal Color** | Normal balance label color |  |
-|12 | **Label Balance Spin Color** | During-spin label color |  |
-|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | |
-|14 | **Label Start Auto Color** | Start autoplay label |  |
-|15 | **Label Outline Notification** | Outline color + width config | |
-|16 | **Total Win Medium Win Color** | Color for label medium win |  |
-
----
\ No newline at end of file
+**Tip**: Ensure color values align with the gameโs visual design specifications.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/12-popup-panel.md b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
index aca866c..8d31634 100644
--- a/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
@@ -2,61 +2,47 @@
sidebar_position: 12
---
-
# Popup Panel
-### Overview
-
-A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
-
-||||
-|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
+## Overview
+The **Popup Panel** is a temporary UI element that overlays the main game content to display additional information or user options, such as exit prompts or disconnection notices.
+| Exit Popup | Disconnect Popup | Credit Popup |
+|------------|------------------|--------------|
+|  |  |  |
## Multiple Popup Panel
-The popup panel is already integrated into the main scenes `template-main-game`.
+The **Multiple Popup Panel** is pre-integrated into the main scene via the `template-main-game` prefab, allowing multiple popups to be managed efficiently.
-
+
- Detail configuring:
-
-#### Base Setting
-
-:::info
-
-
-To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core:
-
-**Path** : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab*
-:::
+**Base Settings**:
+- **Prefab**: `hyper-multiple-popup.prefab`
+- **Path**: `assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab`
+- **Configuration**: Reference the prefab in the main scene to enable multiple popup layouts.
+- 
## Manual Popup Panel
+Manually configured popups allow for custom textures and layouts, tailored to the gameโs design. Note that the **Exit Game** popup is exclusive to the Desktop platform.
-:::info
-- This popup is self-configured using shared textures and layout structure.
-- The color theme and style may vary depending on the game design.
-- Note: **Exit Game** Popup only in **Desktop**.
-:::
+**Setup Steps**:
+1. **Prepare Assets**:
+ - **Path**: `assets/game-assets/textures/desktop/preloads/main-game/exit`
+ - **Example**: 
-#### Pack Assets
+2. **Configure Prefabs**:
+ - Locate and clone the popup prefab to `assets/game-assets/prefabs`.
+ - Structure the prefab as shown:
+ - 
-- *Prepare asset to pack*.
+3. **Apply Textures**:
+ - Manually drag and drop images onto the corresponding nodes in the editor.
+ - 
-๐ Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
+4. **Preview Result**:
+ - Verify the popup displays correctly in the game.
+ - 
-| Path | Example |
-|---------------------------------|-----------------------------------------------------|
-|`assets\game-assets\textures\desktop\preloads\main-game\exit`||
-
-- Structure prefabs:
-
-
-
-- Manually drag and drop the image onto the node:
-
-
-
-**Preview Result**:
-
-
----
\ No newline at end of file
+**Tip**:
+- Ensure textures align with the gameโs color theme and design specifications.
+- Test the popup on Desktop to confirm functionality for the Exit Game feature.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/13-game-logo.md b/docs/02-setup-main-game/05-main-scene/13-game-logo.md
index 31a3108..b02997d 100644
--- a/docs/02-setup-main-game/05-main-scene/13-game-logo.md
+++ b/docs/02-setup-main-game/05-main-scene/13-game-logo.md
@@ -5,126 +5,112 @@ sidebar_position: 13
# Game Logo
## Overview
-The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
+The **Game Logo** is a key branding element displayed consistently across all platforms and orientations to reinforce the gameโs identity.
| Platform | Orientation | Preview |
-|----------|------------|----------|
-| Desktop | Standard |  |
-| Mobile | Landscape |  |
-| Mobile | Portrait |  |
+|----------|-------------|---------|
+| Desktop | Standard |  |
+| Mobile | Landscape |  |
+| Mobile | Portrait |  |
## Implementation
### Prepare Assets
#### 1. Core Setup
-Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation`
-
-```typescript
-// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js
-onLoad: function () {
- var self = this;
- // Initialize animation states
- self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
- self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
-}
-```
+- **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation`
+- **Script**: Initialize animation states for the logo.
+ ```typescript
+ // File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
+ onLoad: function () {
+ const self = this;
+ // Initialize animation states
+ self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
+ self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
+ }
+ ```
#### 2. Required Assets
-##### Static Assets
+**Static Assets**:
| Platform | Location | Preview |
|----------|----------|---------|
-| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` |  |
-| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` |  |
+| Desktop | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` |  |
+| Mobile | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` |  |
-##### Animation Assets
+**Animation Assets**:
| Platform | Location | Preview |
|----------|----------|---------|
-| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
-| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
+| Desktop | `assets/game-assets/textures/desktop/postloads/main-game/animations` |  |
+| Mobile | `assets/game-assets/textures/mobile/postloads/main-game/animations` |  |
#### 3. Animation Settings
-1. Configure Provider
+1. **Configure Animation Provider**:
+ - Register the logo animations in the Animation Provider.
+ - 
- 
-
-2. Setup States
-
- - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
-
- 
-
- - Configure continuous loop playback:
-
- 
+2. **Set Up Animation States**:
+ - Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
+ - 
+ - Configure continuous loop playback for animations.
+ - 
### Setup
#### Desktop Configuration
+1. **Base Settings**:
+ - Configure the logo node in the main scene.
+ - 
-1. Base Settings
+2. **Node Setup**:
+ - Add the `hyper-logo-animation` component to the logo node.
+ - ```typescript
+ Components: {
+ animation: 'hyper-logo-animation',
+ }
+ ```
+ - 
- 
-
- ๐ Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
-
-2. Node Setup
- ```typescript
- Components: {
- animation: 'hyper-logo-animation',
- }
- ```
- 
-
-:::tip
- - **Position And Size**: Follow Game Design.
-:::
+**Tip**: Adjust position and size according to the game design specifications.
#### Mobile Configuration
##### Landscape Mode
-
-1. Node Setup
-
- | Component | Description |
- |-------------------------------------------|--------------------------------------------------|
- | `hyper-logo-animation` | Plays and manages the logo animation |
- | `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
- | `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) |
-
- 
+1. **Node Setup**:
+ - Configure the logo node with the following components:
+ | Component | Description |
+ |-----------|-------------|
+ | `hyper-logo-animation` | Plays and manages the logo animation. |
+ | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
+ | `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
+ - 
##### Portrait Mode
+1. **Node Setup**:
+ - Configure the logo node with the following components:
+ | Component | Description |
+ |-----------|-------------|
+ | `hyper-logo-animation` | Plays and manages the logo animation. |
+ | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
+ | `spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
+ - 
-1. Node Setup
+2. **Position Settings**:
+ - Adjust logo position based on jackpot state:
+ | State | Position | Example |
+ |-------|----------|---------|
+ | Jackpot Active | Upper position |  |
+ | Jackpot Inactive | Default position |  |
- | Component | Description |
- |----------------------------|--------------------------------------------------|
- | `hyper-logo-animation` | Plays and manages the logo animation |
- | `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
- | `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
+3. **Size Settings**:
+ - Use the `spine-aspect-ratio-keeper` component to maintain logo proportions.
+ - 
+ - **Settings**:
+ | Setting | Description | Default Value |
+ |---------|-------------|---------------|
+ | **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) |
+ | **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) |
- 
-
-2. Position Settings
-
- | State | Position | Example |
- |-------|----------|---------|
- | Jackpot Active | Upper position |  |
- | Jackpot Inactive | Default position |  |
-
-3. Size Settings
-
- Using componet `spine-aspect-ratio-keeper` :
-
- 
-
- | Setting | Description | Default Value |
- | ----------------- | -------------------------------------------- | --------------------- |
- | **Default Scale** | Initial scale factor applied to the node | Configurable per game (**Exp: 1.0**) |
- | **Default Size** | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) |
-
-:::tip
-- Check static logo display under slow network conditions.
-:::
\ No newline at end of file
+**Tip**:
+- Test the static logo display under slow network conditions to ensure fallback works.
+- Verify animation states (`play` and `idle`) for smooth transitions.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
index 436d8d1..3fd3fd6 100644
--- a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md
@@ -1,82 +1,61 @@
---
sidebar_position: 15
---
-# Jackpot
----
+
+# Jackpot Panel
## Overview
+The **Jackpot Feature** offers multiple prize tiers, each with increasing value, providing players with frequent smaller wins and the chance for a large top prize. The panel is responsive, supporting both desktop and mobile layouts.
-- **Jackpot Feature** is a system where there are **multiple levels (tiers)** of prizes, usually increasing in value. This structure gives players a chance to win **smaller jackpots more frequently**, while still keeping a large top prize available.
+**Jackpot Tiers**:
+| Tier | Description | Preview |
+|------|-------------|---------|
+| Grand | The top prize, rare and often worth thousands or millions (progressive). |  |
+| Major | A significant prize, less frequent but substantial. |  |
+| Minor | A moderately valuable prize, relatively common. |  |
+| Mini | The smallest prize, easiest to win. |  |
-| Tier | Description | Preview |
-|-------|------------------------------|------------------------------------------------------------|
-| Grand | The top prize, very rare
and often worth thousands
or even millions(especially if it's progressive)| |
-| Major | A significant prize, harder to win. |  |
-| Minor | A bit higher in value, still fairly common. |  |
-| Mini | The smallest and easiest to win. |  |
-
-- The panel is responsive and supports both desktop and mobile layouts:
-
-| Orientation | Preview |
-|-------------|------------------------------------------------------------|
-| Desktop |  |
-| Mobile |  |
+**Platform Support**:
+| Orientation | Preview |
+|-------------|---------|
+| Desktop |  |
+| Mobile |  |
## Implementation
### Prepare Assets
-
-- Use the prefabs located at:
-
- |`assets/core-assets/jackpot-package/prefabs`||
- |--------------------------------------------|--------------------------------------------------------------------|
+- **Prefab Location**:
+ - Path: `assets/core-assets/jackpot-package/prefabs`
+ - Example: 
### Setup
-#### Jackpot runner
+#### Jackpot Runner
##### Desktop
-
-- The node jackpot to your main scene:
-
- 
-
- More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner)
+1. **Add Node**:
+ - Integrate the jackpot node into the main scene.
+ - 
##### Mobile
+1. **Configure Node**:
+ - Set up the jackpot node for both landscape and portrait orientations.
+ - Use `UI Mobile Landscape Position` and `UI Mobile Portrait Position` components for responsiveness.
+ - 
-- Configure the jackpot node for both landscape and portrait orientations.
-
-- Use `UI Mobile landscape Position` and `UI Mobile portrait Position` for a responsive layout.
-
- 
-
- More info: [UI Mobile Position](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position)
-
-- Example using `Platform Node Spawner`:
-
- 
-
- More info: [Platform Node Spawner](/docs/faqs/setup-cocos-scene#platform-node-spawner)
+2. **Platform Node Spawner**:
+ - Example: 
#### Result Panel
+- Ensure the jackpot panel displays correctly across all platforms and orientations.
+- 
-- The jackpot panel works seamlessly across all platforms and orientations.
-
- 
-
- More info: [Node Spawner](/docs/faqs/setup-cocos-scene#node-spawner)
-
-:::tip
-- Follow the game design layout.
-:::
-
+**Tip**: Follow the game design layout for positioning and sizing.
## Game Result Examples
-
| Win Tier | Example |
-|----------|------------------------------------------------------------------|
-| Grand |  |
-| Major |  |
-| Minor |  |
-| Mini |  |
+|----------|---------|
+| Grand |  |
+| Major |  |
+| Minor |  |
+| Mini |  |
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/16-idle-animation.md b/docs/02-setup-main-game/05-main-scene/16-idle-animation.md
index 3ca25e4..02901ec 100644
--- a/docs/02-setup-main-game/05-main-scene/16-idle-animation.md
+++ b/docs/02-setup-main-game/05-main-scene/16-idle-animation.md
@@ -1,26 +1,29 @@
---
sidebar_position: 16
---
+
# Idle Animation
----
-
## Overview
+The **Idle Animation** enhances the visual appeal of the game by animating slot symbols during idle states, providing a dynamic and engaging experience.
+
+| Static Preview | Animated Preview |
+|--------|-------------|
+|  |  |
- 
## Prepare the assets
| Assets | Description |
|--------|-------------|
-|  | Used to Setup the static sprite frame. |
-|  | Used to Setup the idle animation. |
+|  | Static sprite frame for the idle state. |
+|  | Animation assets for the idle animation. |
## Setup Idle Animation
### Configure Settings
- Create the following script:
+ Create a script to register the idle animation components with the dependency injection container.
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
var BaseSlottySetting = p4fslot.require('slotty-setting');
var DIContainer = p4fcore.require('di-container');
@@ -44,14 +47,18 @@ BaseSlottySetting.prototype._registerInjection = function () {

### Configure Scene
-1. Search for the `idle-animation-panel` prefab.
-2. Drag the "prefab" into "scene".
-3. Click "Generate Panel".
-
-
+1. **Locate Prefab**:
+ - Search for the `idle-animation-panel` prefab.
+2. **Add to Scene**:
+ - Drag the prefab into the main scene.
+3. **Generate Panel**:
+ - Click **Generate Panel** to set up the animation panel.
+ -
:::warning
-When using **prefab** directly from **core-assets**, you should convert to **Regular Node**.
+When using prefabs directly from `core-assets`, convert them to a **Regular Node** to avoid reference issues.

-:::
\ No newline at end of file
+:::
+
+**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/17-win-limit.md b/docs/02-setup-main-game/05-main-scene/17-win-limit.md
index 6ed6bc8..b8d8ad3 100644
--- a/docs/02-setup-main-game/05-main-scene/17-win-limit.md
+++ b/docs/02-setup-main-game/05-main-scene/17-win-limit.md
@@ -1,76 +1,54 @@
---
sidebar_position: 17
title: Win Limit
-description: Display limit win
+description: Display win limit popups during gameplay.
---
# Win Limit
## Overview
+The **Win Limit** system displays popups when specific win conditions are met, enhancing player feedback and interaction.
-#### Win Limit
+- **Win Limit Popup**: Appears when a playerโs win points reach a predefined threshold.
+ - 
+- **Gamble Win Limit Popup**: Triggered during the gamble feature when the maximum number of gamble attempts (typically 5) is reached.
+ - 
-- The **Win Limit** popup appears during gameplay when the player's win points reach a predefined threshold.
-
-
-
-#### Gamble Win Limit
-
-- The **Gamble Win Limit** popup is triggered during the gamble feature when the player reaches the maximum number of allowed gamble attempts (typically 5).
-
-
-
----
-
-### Prepare Assets
+## Prepare Assets
#### Prefab Location
-
-| Path | Prefab Name |
-|----------------------------------------------------------|------------------------------|
-| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
+| Path | Prefab Name |
+|------|-------------|
+| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
#### Scene Hierarchy
-
Place the prefab in the following scene structure:
-
```
Canvas
โโโ [main-view]
โโโ [game-view]
โโโ [present-win-limit-reached]
```
+- 
-
-
----
-
-### Setup
+## Setup
#### Assets
+- Drag and drop the required images onto the corresponding nodes in the editor.
+- 
-- Drag and drop the required image onto the node in the editor:
-
-
-
-| Drag Sprite | Node Name |
-|-------------------------|-----------------------|
-| `you-won` | `you-won` |
-| `win-limit-reached` | `win-limit-reached` |
-| `gamble-limit-reached` | `gamble-limit-reached`|
-| `btn-normal` | `btn-continue` |
-| `text-continue` | `continue` |
-
+| Sprite | Node Name |
+|--------|-----------|
+| `you-won` | `you-won` |
+| `win-limit-reached` | `win-limit-reached` |
+| `gamble-limit-reached` | `gamble-limit-reached` |
+| `btn-normal` | `btn-continue` |
+| `text-continue` | `continue` |
#### Font
+- Use a custom font to match the win label style, aligning with the gameโs theme.
+- 
-- Use a **custom font** to match the win label style for your game theme.
-
-
-
----
-
-:::tip
-- Follow the game design layout for assets and fonts.
-- Win limit configuration may vary by game.
-:::
+**Tip**:
+- Follow the game design layout for asset placement and font styling.
+- Verify win limit configurations to ensure they match game-specific thresholds.
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/18-Gamble.md b/docs/02-setup-main-game/05-main-scene/18-Gamble.md
index 5cdbe0e..c1757e3 100644
--- a/docs/02-setup-main-game/05-main-scene/18-Gamble.md
+++ b/docs/02-setup-main-game/05-main-scene/18-Gamble.md
@@ -8,7 +8,7 @@ description: Display Gamble
## Overview
-**Gamble** in slot games is a feature that lets players risk their winnings for a chance to double (or multiply) them, usually by guessing a card color.
+The **Gamble Feature** allows players to risk their winnings for a chance to double or multiply them, typically by guessing a cardโs color. It is supported across desktop and mobile platforms in both landscape and portrait orientations.
| Device Type | Preview |
|---------------|-----------------------------------------------------------------------------|
@@ -23,7 +23,7 @@ description: Display Gamble
#### Scene Hierarchy
-Place the node in the following scene structure:
+Place the gamble node in the following scene structure: