diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md
deleted file mode 100644
index 3410b93..0000000
--- a/docs/02-setup-main-game/05-main-scene.md
+++ /dev/null
@@ -1,598 +0,0 @@
----
-sidebar_position: 5
----
-
-# Main Scene
-
-This is where all the magic happen.
-
----
-
-Main scene is the most complicated scene with hundreds of object, script and config.
-
-
-
-Yet it is suprisingly simple to use.
-
-By following step by step setup, you'll have a working main scene in no time.
-
-:::info
-In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.
-
-Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.
-
-
-:::
-
-## Setup SpriteFrame Provider
----
-
- **SpriteFrameProvider** allows global access to "sprite frames" from code.
-
- 
-
-## Setup Animation Provider
----
-
- **Animation Provider** contains all **animations** of the game.
-
- 
-
-## Setup Reel Slot
----
-
-1. Prepare the asset for symbols and reel frame.
-
- 
- 
-
-2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
-
- 
-
-3. Add reel frame.
-
-  
-
-4. Config reel slot using `reel-scroller-helper`.
-
- 
-
- | Properties | Explaination | Example |
- |------------|--------------|---------|
- |**Cell Item Script Name**|The name of the script will be attached to each cell item.||
- | **Scroller Script Name** | the name of the script for handling the spinning logic.||
- |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.||
- |**Cell Size**| the size of each cells.||
- |**Cell Spacing**| the distance between each cells horizontally and vertically.||
- |**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.||
- |**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.||
-
-5. Generate panel using `reel-scroller-helper`.
-
- 
-
-:::tip
-There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
-:::
-
-## Setup Spinning Panel
-
-Reel slot panel is just one part one the spinning panel.
-
-There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**.
-
-The setup is very straightforward by using the `Generate Panel` command in each panel's helper class.
-
-- Landing Panel:
-
- 
-
-To define Landing Panel, create the following script:
-
-:::warning
- ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
- SlottySetting.prototype._registerInjection = function () {
- DIContainer.Register('landingGenerator', require('landing-generator'));
- };
- ```
-:::
-
-- Present Win Cell Panel:
-
- 
-
-- Present Win Cell Panel:
-
- 
-
-- Tension Panel:
-
- 
-
- If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
-
- 
- **check toggle General Panel**
- 
- To define Tension Panel, create the following script:
- :::warning
- ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
- SlottySetting.prototype._registerInjection = function () {
- DIContainer.Register('tensionGenerator', require('tension-generator'));
- };
- ```
- :::
-
-
-## Setup UI Panel
-
-### UI Panel Overview
-
-The UI system supports both desktop and mobile layouts design.
-
-#### π₯οΈ Desktop Layout
-- Full bottom bar with all controls visible
-- Horizontal layout maximizing screen width
-
-
-
-#### π± Mobile Layout
-The mobile interface adapts to both landscape and portrait orientations:
-
-| Orientation | Preview |
-|-------------|----------|
-| Landscape |  |
-| Portrait |  |
-
-
-### UI Sideband
-> To Be Added:
-> - Prepare the asset
-> - Run helper / p4f menu or setup manually
-### UI Bottom Bar Desktop
-
-#### Step 1: Setup Prefab Editor
-
-| 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 |  |
-
----
-
-#### 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: Setup UI In Main Scenes
-
-Create new node and configuration in your main scene:
-
-
-##### Platform Node Spawner Settings
-
-| Setting | Value | Description |
-|---------|-------|-------------|
-| Desktop Toggle | β Enabled | Show prefabs for desktop platform |
-| Mobile Toggle | β Disabled | Hide prefabs for mobile platform |
-| Target Prefab | `ui-bottom-bar-panel` | References prefab |
-
-#### Step 4: Apply Textures
-
-##### Texture Button Bar
-Checklist assets completed for bottom UI and button UI text
-:::info
-π Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
-:::
- 
-
-##### Run the Helper Tool
-
-To configure the bottom bar UI helper.
-:::info
-π [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor)
-:::
-
----
-
-### UI Panel Mobile
-
-#### Step 1: Setup Prefab
-
-| 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` | - |
-
-
-:::tip File Structure
-Maintain this directory structure for proper prefab references:
-```
-assets/
-βββ game-assets/
- βββ prefabs/
- βββ mobile/
- βββ Exp: mobile-ui.prefab
- βββ Exp: buy-feature.prefab
-```
-:::
-
-#### Step 2: Rename Prefabs
-
-Rename the copied prefabs by removing unnecessary prefixes:
-| Prefix to Remove | Final Name |
-|------------------|----------------------|
-| `template-` | |
-
-#### Step 3: Setup Ui In Main Scenes
-
-Create new node and configuration in your main scene:
-
-
-##### Platform Node Spawner Settings
-
-| Setting | Value | Description |
-|---------|-------|-------------|
-| Mobile Toggle | β Enabled | Show prefabs for mobile platform |
-| Desktop Toggle | β Disabled | Hide prefabs for desktop platform |
-| Target Prefab | `mobile-ui` | References prefab |
-
-#### Step 4: Apply Textures
-
-##### Texture Mobile UI
-
-Checklist assets completed for Mobile UI
-
-:::info
-π [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure)
-:::
- 
-
-##### Run the Helper Tool
-
-To configure the mobile UI helper.
-:::info
-π [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
-:::
-
-
-
-#### Step 4: Setup Color For Menu Mobile 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 |  |1
-|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 |  |
-
----
-
-## Setup Background
-
-Background overview:
-
-| | Desktop | Mobile |
-|:-:|--------------|---------|
-|**Background Landscape**
|
|
|
-|**Background Portrait**
||
|
-
-**Background landscape** use for Desktop and Mobile landscape.
-
-**Background portrait** only use for Mobile portrait.
-
-### Prepare the assets
-| | Assets | Description |
-|:-:|--------------|---------|
-|**Static**
||Static background is necessary for the game|
-|**Animation**
||Animation background may or may not be present, depending on the game design|
-
-### Background Landscape
-
- We use sprite frame background for landscape from prepared assets.
-
- 
-
-### Background Portrait
-
- We use sprite frame background for mobile from prepared assets.
-
- 
-
-### Background Animation
-
-If the game have design animation for background, we will do this step.
-
-1. Using hepler to generate animation from prepared assets
-
- 
- 
-
-2. We have the result as below, and continue setup for **spine-animation**.
- - **Is Loop**: is β
because this animation will play through the game.
- - **Static Sprite Frame**: It will be displayed when the animation has not finished loading.
-
- 
- 
-
-3. Add animation background with component below:
-
- **Animation background landscape**
-
- - Create **Empty Node** with name **anim-background-main-game**.
- - Add **animation-play-on-anable** with animation name in **Animation Provider**.
- - Add **background-scaler** resize with screen resolution.
-
- 
-
- **Animation background portrait**
-
- - Create **Empty Node** with name **mobile-background-anim-portrait**.
- - Add **mobile-portrait-background-ui-controller** to display only on **Mobile**.
- - Add **orientation-ui-controller** to display on Portrait with the options below.
-
- 
-
- - Create **Empty Node** with name **anim-background-main-game**.
- - Add **animation-play-on-anable** with animation name in **Animation Provider**.
- - Add **portrait-anim-background-scaler** resize with screen resolution.
-
- 
-
-## Setup Popup Panel
-
-### Overview
-
-A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
-
-||||
-|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
-
-
-### Popup in the Game
-The popup panel is already integrated into the main scenes `template-main-game`.
-
-
-
-#### Detail configuring:
-
-##### Multiple Popup Panel:
-
-:::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*
-:::
-
-##### Manual Popup Panel:
-
-:::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**.
-:::
-
-##### Assets pack:
-
-- *Prepare asset to pack*.
-
-π Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
-
-| Path | Example |
-|-------------------------------------------------------------|-------------------------------------------------------------------|
-|`assets\game-assets\textures\desktop\preloads\main-game\exit`||
-
-- Structure prefabs:
-
-
-
-- Manually drag and drop the image onto the node:
-
-
-
-**Preview Result**:
-
-
----
-
-## Game Logo Setup Guide
-
-### Overview
-The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
-
-| Platform | Orientation | Preview |
-|----------|------------|----------|
-| Desktop | Standard |  |
-| Mobile | Landscape |  |
-| Mobile | Portrait |  |
-
-### Logo Configuration
-
-#### 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');
-}
-```
-
-#### 2. Required 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` |  |
-
-##### 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` |  |
-
-#### 3. Animation Settings
-1. Configure Provider
-
- 
-
-2. Setup States
-
- - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
-
- 
-
- - Configure continuous loop playback:
-
- 
-
-### Platform Setup
-
-#### Desktop Configuration
-
-1. Base Settings
-
- 
-
-π Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
-
-2. Node Setup
- ```typescript
- Components: {
- animation: 'hyper-logo-animation',
- }
- ```
- 
-
-:::tip
- - **Position And Size**: Follow Game Design.
-:::
-
-#### 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**) |
-
- 
-
-##### Portrait 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 |
- | `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
-
- 
-
-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
diff --git a/docs/02-setup-main-game/05-main-scene/01-system.md b/docs/02-setup-main-game/05-main-scene/01-system.md
index a779ce2..97bb9f5 100644
--- a/docs/02-setup-main-game/05-main-scene/01-system.md
+++ b/docs/02-setup-main-game/05-main-scene/01-system.md
@@ -5,4 +5,16 @@ sidebar_position: 1
# System
---
-> To be added
\ No newline at end of file
+## Sprite Frame Provider Setup
+
+**SpriteFrameProvider** gives global access to **sprite frames** from anywhere in the codebase.
+
+
+
+---
+
+## Animation Provider Setup
+
+The **Animation Provider** manages and exposes all game-related **animation assets** globally.
+
+
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md
index e93db36..dce226d 100644
--- a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md
+++ b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md
@@ -5,24 +5,31 @@ sidebar_position: 2
# Set Up Reel Slot
---
-1. Prepare the asset for symbols and reel frame.
+### Prepare Assets
+
+ Add the symbol textures and reel frame:
- 
- 
+ |||
+ |------------------------------------------------------------------|--------------------------------------------------------------|
-2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
+### Add symbols to `SpriteFrameProvider`
- 
+ This allows symbols to be accessed globally from code:
-3. Add reel frame.
+ 
-  
+### Add Reel Frame
-4. Config reel slot using `reel-scroller-helper`.
+ | | |
+ |--------------------------------------------------------------------|--------------------------------------------------------------|
+
+### Configure the Reel Slot
+
+Use `reel-scroller-helper` to configure spinning behavior:
- | Properties | Explaination | Example |
+ | Properties | Description | Example |
|------------|--------------|---------|
|**Cell Item Script Name**|The name of the script will be attached to each cell item.||
| **Scroller Script Name** | the name of the script for handling the spinning logic.||
@@ -32,10 +39,12 @@ sidebar_position: 2
|**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.||
|**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.||
-5. Generate panel using `reel-scroller-helper`.
+### Generate Reel Panel
+
+ Use `reel-scroller-helper` to auto-generate the full panel:
:::tip
-There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
+A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components.
:::
diff --git a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md
index ebf225e..8ac0d05 100644
--- a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md
+++ b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md
@@ -7,11 +7,18 @@ sidebar_position: 4
## Overview
-Reel slot panel is just one part one the spinning panel.
+The **reel slot panel** is just one part of the overall **spinning panel** system.
-There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**.
+Other required panels include:
-The setup is very straightforward by using the `Generate Panel` command in each panel's helper class.
+- `landing-panel`
+- `tension-panel`
+- `present-win-cell-panel`
+- `present-win-border-panel`
+
+Each panel can be quickly set up using the **Generate Panel** function from its helper script.
+
+---
## Set Up Panel
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 8f091aa..2a67f13 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
@@ -74,22 +74,18 @@ The `FormatText` property controls text formatting behavior for label components
### Step 3: Set Up UI In Main Scenes
Create new node and configuration in your main scene:
-
+
#### Platform Node Spawner Settings
-| Setting | Value | Description |
-|---------|-------|-------------|
-| Desktop Toggle | β Enabled | Show prefabs for desktop platform |
-| Mobile Toggle | β Disabled | Hide prefabs for mobile platform |
-| Target Prefab | `ui-bottom-bar-panel` | References prefab |
+π 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
-π Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
+π Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
:::
@@ -97,7 +93,7 @@ Checklist assets completed for bottom UI and button UI text
To configure the bottom bar UI helper.
:::info
-π [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor)
+πDetails: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
:::
---
\ 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 112b63b..6a69ede 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
@@ -49,11 +49,7 @@ Create new node and configuration in your main scene:
#### Platform Node Spawner Settings
-| Setting | Value | Description |
-|---------|-------|-------------|
-| Mobile Toggle | β Enabled | Show prefabs for mobile platform |
-| Desktop Toggle | β Disabled | Hide prefabs for desktop platform |
-| Target Prefab | `mobile-ui` | References prefab |
+π Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
### Step 4: Apply Textures
@@ -62,7 +58,7 @@ Create new node and configuration in your main scene:
Checklist assets completed for Mobile UI
:::info
-π [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure)
+πDetails [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
:::
@@ -70,7 +66,7 @@ Checklist assets completed for Mobile UI
To configure the mobile UI helper.
:::info
-π [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
+πDetails: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
:::
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 a38797e..ac081a4 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
@@ -65,7 +65,7 @@ onLoad: function () {
-π Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
+ π Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
2. Node Setup
```typescript
diff --git a/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md b/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md
deleted file mode 100644
index f9c7c7e..0000000
--- a/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebar_position: 14
----
-
-# Sprite Frame Provider Setup
----
-**SpriteFrameProvider** allows global access to "sprite frames" from code.
-
-
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/15-setup-animation-provider.md b/docs/02-setup-main-game/05-main-scene/15-setup-animation-provider.md
deleted file mode 100644
index 5a5374f..0000000
--- a/docs/02-setup-main-game/05-main-scene/15-setup-animation-provider.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebar_position: 15
----
-
-# Set Up the Animation Provider
----
-**Animation Provider** contains all **animations** of the game.
-
-
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx b/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx
index 49e4f47..1ca9191 100644
--- a/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx
+++ b/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx
@@ -6,23 +6,22 @@ description: Main scene structure and setup process.
# Main Scene
-This is where all the magic happen.
+This is where all the magic happens.
---
-Main scene is the most complicated scene with hundreds of object, script and config.
+The **Main Scene** is the most complex scene in the project, containing **hundreds of objects, scripts, and configurations**.
-Yet it is suprisingly simple to use.
+Yet, it is surprisingly simple to use.
-By following step by step setup, you'll have a working main scene in no time.
+By following the step-by-step setup, you'll have a fully working main scene in no time.
:::info
-In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.
+In fact, if all the other scenes are set up correctly, you can even test the game without configuring the main scene.
-Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.
+Try running the project - the result might look minimal, but it's actually the full game logic running without any visual assets.
:::
-
diff --git a/docs/02-setup-main-game/img/05-main-scene/animation-provider.png b/docs/02-setup-main-game/img/05-main-scene/animation-provider.png
index 6977e6f..4650176 100644
Binary files a/docs/02-setup-main-game/img/05-main-scene/animation-provider.png and b/docs/02-setup-main-game/img/05-main-scene/animation-provider.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png b/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png
index b6ea223..e011c23 100644
Binary files a/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png and b/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png b/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png
index ee0fe1b..6653686 100644
Binary files a/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png and b/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider-reel-slot.png b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider-reel-slot.png
new file mode 100644
index 0000000..30108c8
Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider-reel-slot.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png
index b680feb..0568d60 100644
Binary files a/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png and b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png differ
diff --git a/docs/faqs/03-setup-cocos-scene.md b/docs/faqs/03-setup-cocos-scene.md
index e69de29..2a55f42 100644
--- a/docs/faqs/03-setup-cocos-scene.md
+++ b/docs/faqs/03-setup-cocos-scene.md
@@ -0,0 +1,24 @@
+# Cocos Scene Setup
+---
+
+## Platform Node Spawner
+
+Use this configuration to control which prefabs appear based on the current platform.
+
+| Setting | Value | Description |
+|--------------------|----------------------|-----------------------------------------------|
+| **Desktop Toggle** | β
Enabled | Show prefab on desktop |
+| **Mobile Toggle** | β Disabled | Hide prefab on mobile |
+| **Target Prefab** | `prefab name` | Name of the prefab to be spawned |
+
+
+## Platform ui controller
+
+1. Attach this script to any node that should only appear on a specific platform.
+
+2. At runtime, the node will automatically be removed if it doesnβt match the active platform.
+
+| Setting | Value | Description |
+|--------------------|----------------------|-----------------------------------------------|
+| **Desktop Toggle** | β
Enabled | Show node on desktop |
+| **Mobile Toggle** | β Disabled | Hide node on mobile |