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 8cbb388..e93db36 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
@@ -2,10 +2,40 @@
 sidebar_position: 2
 ---
 
-# Reel Slot
-
-> To be added
-
+# Set Up Reel Slot
 ---
 
-> To be added
\ No newline at end of file
+1. Prepare the asset for symbols and reel frame.
+
+    ![Add Symbol Texture](../img/05-main-scene/add-symbol-texture.png)
+    ![Add Symbol Texture](../img/05-main-scene/add-reel-frame.png)
+
+2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
+
+    ![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider.png)
+
+3. Add reel frame.
+
+    ![Sprite Frame Provider](../img/05-main-scene/add-reel-frame-2.png) ![Sprite Frame Provider](../img/05-main-scene/reel-frame.png)
+
+4. Config reel slot using `reel-scroller-helper`. 
+
+    ![Reel Scroller Helper](../img/05-main-scene/reel-scroller-helper.png)
+
+    | Properties | Explaination | Example |
+    |------------|--------------|---------|
+    |**Cell Item Script Name**|The name of the script will be attached to each cell item.|![cell-item-script-name](../img/05-main-scene/hyper-cell-item.png)|
+    | **Scroller Script Name** | the name of the script for handling the spinning logic.|![scroller](../img/05-main-scene/scroller.png)|
+    |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.|![reel-row-column](../img/05-main-scene/reel-row-column.png)|
+    |**Cell Size**| the size of each cells.|![cell-size](../img/05-main-scene/cell-size.png)|
+    |**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.|![dim-cell-color](../img/05-main-scene/dim-cell-color.png)|
+    |**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.|![cell-top-bottom](../img/05-main-scene/cell-top-bottom.png)|
+
+5. Generate panel using `reel-scroller-helper`.
+
+    ![Generate Panel](../img/05-main-scene/generate-panel.png)
+
+:::tip
+There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
+:::
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 b4ba140..01e42dc 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
@@ -2,10 +2,58 @@
 sidebar_position: 4
 ---
 
-# Spinning Panel
-
-> To be added
+# Set Up Spinning Panel
 
 ---
 
-> To be added
\ No newline at end of file
+## Overview
+
+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.
+
+## Set Up Panel
+
+- Landing Panel: 
+
+    ![Landing Panel](../img/05-main-scene/landing-panel.png)     
+
+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](../img/05-main-scene/present-win-cell-panel.png)
+
+- Present Win Cell Panel:
+
+    ![Present Win Border Panel](../img/05-main-scene/present-win-border-panel.png)
+
+- Tension Panel:
+
+    ![Tension Panel](../img/05-main-scene/tension-panel.png)
+
+    If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
+
+    ![Tension Size Custom](../img/05-main-scene/tension-panel-custom.png)    
+
+    **check toggle General Panel** 
+
+    ![Tension Size Custom](../img/05-main-scene/note-bug-tension.png)    
+    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'));
+    };
+    ```
+    :::  
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
new file mode 100644
index 0000000..142b2e9
--- /dev/null
+++ b/docs/02-setup-main-game/05-main-scene/10-desktop-bottom-bar-ui.md
@@ -0,0 +1,104 @@
+---
+sidebar_position: 10
+---
+# Bottom Bar UI (Desktop)
+---
+
+### Overview
+- Full bottom bar with all controls visible
+- Horizontal layout maximizing screen width
+
+![Desktop Bottom Bar UI Layout](../img/05-main-scene/bottom-ui-desktop.png)
+
+### Step 1: Set Up Prefab Editor    
+
+| Step | Action | image |
+|------|---------|--------------|
+| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](../img/05-main-scene/add-texture-bottom-bar-prefab.png) |
+| 2. Find Assets | Navigate to `core/editor` directory | ![Copy UI Folder](../img/05-main-scene/add-texture-label-prefab.png) |
+| 3. Clone Assets | Copy / Paste to game assets location | ![Asset Placement](../img/05-main-scene/editor-texture-label-prefab.png) |
+
+---
+
+### Step 2: Configure Prefabs  
+
+#### Core Prefabs Structure 
+Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
+![Directory Structure](../img/05-main-scene/add-texture-bottom-bar-prefab2.png)   
+
+#### 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
+```
+
+
+![Prefab Naming Example](../img/05-main-scene/rename-prefab.png)
+
+#### 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. |
+| -------------------- | ------------------------------------------------- |
+
+![Label Configuration Options](../img/05-main-scene/option-for-label.png)
+
+#### 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 
+:::
+
+![component-locale](../img/05-main-scene/component-locale.png)  
+
+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:                    
+![main scenes](../img/05-main-scene/prepare-ui-bottom-bar.png)    
+
+#### 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)
+:::      
+ ![main scenes](../img/05-main-scene/prepare-ui-bottom-bar.png)    
+
+#### 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)
+:::
+
+---
\ No newline at end of file
diff --git a/docs/02-setup-main-game/05-main-scene/11-ui-panel-mobile.md b/docs/02-setup-main-game/05-main-scene/11-ui-panel-mobile.md
new file mode 100644
index 0000000..112b63b
--- /dev/null
+++ b/docs/02-setup-main-game/05-main-scene/11-ui-panel-mobile.md
@@ -0,0 +1,110 @@
+---
+sidebar_position: 11
+---
+# Mobile UI Panel
+
+### Overview
+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) 
+
+
+### Step 1: Set Up Prefabs
+
+| Step | Action                      | Description                                     | Image Reference                                                      |
+| ---- | --------------------------- | ----------------------------------------------- | -------------------------------------------------------------------  |
+| 1    | Locate `mobile-ui` Prefab   | Search for the `mobile-ui` prefab               | ![Locate Prefabs](../img/05-main-scene/search-mobile-ui.png)          |
+| 2    | Clone Assets                | Copy the required assets                        | ![Asset Placement](../img/05-main-scene/mobile-ui-prefab.png)         |
+| 3    | Paste Assets                | Paste into: `assets/game-assets/prefabs/mobile` | -                                                                    |
+| 4    | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab             | ![Locate Prefabs](../img/05-main-scene/buy-feature-bonus-mobile.png)  |
+| 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-`      |![Prefab Naming Example](../img/05-main-scene/result-rename-mobile.png)   |   
+
+### Step 3: Configure UI in Main Scenes
+
+Create new node and configuration in your main scene:                        
+![main scenes](../img/05-main-scene/set-positon-mobile-ui.png)   
+
+#### 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)       
+:::
+ ![main scenes](../img/05-main-scene/add-texture-mobile-ui.png)
+
+#### 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 5: Set Color Theme for Mobile Menu UI
+
+#### Follow Design:
+
+| ![Auto Selection Result](../img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](../img/05-main-scene/menu-portrait.png)  |
+|---------|-------|
+
+#### 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.
+  
+![Auto Selection Result](../img/05-main-scene/set-color-menu-ui.png)    
+
+|Ordinal number|                Properties           |              Explaination                  |              Example                                                                             |
+|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------|
+|0             |**paintColor**                       |Trigger to repaint UI components            | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)|
+|1             | **Main Ui Normal Color**            |Default color of UI elements                | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) |
+|2             | **Main Ui Highlight Color**          | Highlight color for selected UI elements  | ![Auto Selection Result](../img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
+|3             | **Toggle State Off Color**           | Color of toggle when off                  | ![Auto Selection Result](../img/05-main-scene/toggle-off.png)                                    |
+|4             | **Toggle State On Color**            | Color of toggle when on                   | ![Auto Selection Result](../img/05-main-scene/toggle-on.png)                                     |
+|5             | **Background Info Page Color**       | Info screen background                    | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/background-info.png)    |
+|6             | **Background Menu Color**            | Menu background color                     | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/background-menu.png)    |
+|7             | **Background Point Panel Color**     | Background panel for point/balance UI     | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png)|
+|8             | **Background Bottom Bar Color**      | Background bottom bar (show only mobile portrait)  | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
+|9             | **Button Quit Color**                | Quit button color                         | ![Auto Selection Result](../img/05-main-scene/btn-quit-game.png)                                 |
+|10            | **Button Cancel Color**              | Cancel button color                       | ![Auto Selection Result](../img/05-main-scene/btn-cancel-game.png)                               |
+|11            | **Label Balance Normal Color**       | Normal balance label color                | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png)    |
+|12            | **Label Balance Spin Color**         | During-spin label color                   | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png)   |
+|13            | **Button Plus Minus Auto Color**     | Button plus/Minus autoplay                | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png)|
+|14            | **Label Start Auto Color**           | Start autoplay label                      | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/button%20start.png)     |
+|15            | **Label Outline Notification**       | Outline color + width config              | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png)|
+|16            | **Total Win Medium Win Color**       | Color for label medium win                | ![Auto Selection Result](../img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |
+
+---
\ 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
new file mode 100644
index 0000000..be20681
--- /dev/null
+++ b/docs/02-setup-main-game/05-main-scene/12-popup-panel.md
@@ -0,0 +1,62 @@
+---
+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.
+
+|![Popup overview exit](../img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](../img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](../img/05-main-scene/popup-credit-game.png)|
+|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
+
+
+## Multiple Popup Panel
+The popup panel is already integrated into the main scenes `template-main-game`.
+
+![Popup In Game](../img/05-main-scene/popup-panel-in-game.png)       
+
+ Detail configuring:
+
+#### Base Setting
+
+:::info
+![Popup Position](../img/05-main-scene/popup-multi.png) 
+
+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**.
+:::
+
+#### Pack Assets
+
+- *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`|![Exit Game Popup In Game](../img/05-main-scene/exit-popup-game.png)|
+
+- Structure prefabs:
+
+![Exit Game Popup In Game](../img/05-main-scene/popup-exit-in-game.png)
+
+- Manually drag and drop the image onto the node:
+
+![Exit Game Popup In Game](../img/05-main-scene/popup-draw.png)
+
+**Preview Result**:         
+![Popup overview exit](../img/05-main-scene/popup-exit-game.png)
+
+---
\ 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
new file mode 100644
index 0000000..a38797e
--- /dev/null
+++ b/docs/02-setup-main-game/05-main-scene/13-game-logo.md
@@ -0,0 +1,128 @@
+---
+sidebar_position: 13
+---
+
+# Game Logo
+
+### Overview
+The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
+
+| Platform | Orientation | Preview |
+|----------|------------|----------|
+| Desktop | Standard | ![Desktop View](../img/05-main-scene/logo-overview-desktop.png) |
+| Mobile | Landscape | ![Landscape View](../img/05-main-scene/logo-overview.png) |
+| Mobile | Portrait | ![Portrait View](../img/05-main-scene/logo-overview-portrait.png) |
+
+### Logo Settings
+
+#### 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` | ![Desktop](../img/05-main-scene/logo-static-desktop.png) |
+| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` | ![Mobile](../img/05-main-scene/logo-static-mobile.png) |
+
+##### Animation Assets
+| Platform | Location | Preview |
+|----------|----------|---------|
+| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` | ![Desktop Anim](../img/05-main-scene/logo-anim-desktop.png) |
+| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` | ![Mobile Anim](../img/05-main-scene/logo-anim-mobile.png) |
+
+#### 3. Animation Settings
+1. Configure Provider
+
+   ![Provider Setup](../img/05-main-scene/logo-anim-provider.png)
+
+2. Setup States
+
+   - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
+
+   ![Provider Setup](../img/05-main-scene/logo-static-in-anim.png)
+
+   - Configure continuous loop playback:    
+
+   ![Provider Setup](../img/05-main-scene/logo-anim-loop.png)
+
+### Platform-Specific Setup
+
+#### Desktop Configuration
+
+1. Base Settings        
+
+   ![Desktop Settings](../img/05-main-scene/logo-setting-desktop.png)
+
+🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
+
+2. Node Setup
+   ```typescript
+   Components: {
+     animation: 'hyper-logo-animation',
+   }
+   ```
+   ![Desktop Setup](../img/05-main-scene/logo-script-desktop.png)
+
+:::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**)   |
+   
+    ![Landscape Setup](../img/05-main-scene/logo-mobile-landcape.png)
+
+##### 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** ) |
+
+    ![Portrait Setup](../img/05-main-scene/logo-mobile-portrait.png)
+
+2. Position Settings
+
+   | State | Position | Example |
+   |-------|----------|---------|
+   | Jackpot Active | Upper position | ![Active](../img/05-main-scene/logo-portrait-jackpot.png) |
+   | Jackpot Inactive | Default position | ![Inactive](../img/05-main-scene/logo-portrait-no-jackpot.png) |
+
+3. Size Settings
+
+    Using componet `spine-aspect-ratio-keeper` :
+
+    ![Portrait Logo Configuration](../img/05-main-scene/logo-center-align.png)    
+
+    | 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