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
new file mode 100644
index 0000000..0a50bad
--- /dev/null
+++ b/docs/02-setup-main-game/05-main-scene/18-Gamble.md
@@ -0,0 +1,62 @@
+---
+sidebar_position: 18
+title: Gamble
+description: Display Gamble
+---
+
+# 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.
+
+| Device Type   | Preview                                                                     |
+|---------------|-----------------------------------------------------------------------------|
+| Desktop       | ![Desktop](../img/05-main-scene/gamle/gamble-desktop.png)                   |
+| Landscape     | ![Landscape](../img/05-main-scene/gamle/gamble-landscape.png)               |
+| Portrait      | <center>![Portrait](../img/05-main-scene/gamle/gamble-portrait.png)</center>|
+
+
+### Scene Hierarchy
+
+Place the node in the following scene structure:
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "500px" }}>Path</th>
+      <th style={{ width: "500px" }}>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+            ```
+                Canvas
+                └── [main-view]
+                    └── [game-view]
+                        └── [gamble-loader]
+            ```
+        </td>
+      <td><center>![Scene Structure](../img/05-main-scene/gamle/gamble-structure.png)</center></td>
+    </tr>
+  </tbody>
+</table>
+---
+
+### Gamble Setup
+
+- In node component include:
+
+    ![Scene Structure](../img/05-main-scene/gamle/gamble-component.png)
+
+#### `gamble-loader`
+
+- A component for managing the loading and unloading of gambling scenes in a game.
+
+| Property         | Type      | Description                                             |
+|------------------|-----------|---------------------------------------------------------|
+| nodeBackground   | cc.Node   | Background node reference                               |
+| sceneGamble      | String    | Name of the gamble scene                                |
+| rootGambleName   | String    | Root node name for the gamble scene                     |
+| rootGamble       | Node      | Runtime reference to the gamble root node (initialized in ctor) |
diff --git a/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-component.png b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-component.png
new file mode 100644
index 0000000..6c0d811
Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-component.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-desktop.png b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-desktop.png
new file mode 100644
index 0000000..64af99d
Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-desktop.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-landscape.png b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-landscape.png
new file mode 100644
index 0000000..5223bac
Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-landscape.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-portrait.png b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-portrait.png
new file mode 100644
index 0000000..162a5ef
Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-portrait.png differ
diff --git a/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-structure.png b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-structure.png
new file mode 100644
index 0000000..761d86e
Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/gamle/gamble-structure.png differ
diff --git a/docs/faqs/03-setup-cocos-scene.md b/docs/faqs/03-setup-cocos-scene.md
index d2967b1..eb29cf9 100644
--- a/docs/faqs/03-setup-cocos-scene.md
+++ b/docs/faqs/03-setup-cocos-scene.md
@@ -45,4 +45,20 @@ Positions a node at a specific location when the device is in landscape / portra
 2. Set `default Position` in the Inspector.
 3. The position updates automatically in mobile landscape / portrait mode.
 
-![Position](./img/default-setting.png)
\ No newline at end of file
+![Position](./img/default-setting.png)
+
+## Orientation UI Controller
+
+Manage UI visibility based on device orientation (landscape or portrait).
+
+![Position](./img/orientation-ui-controller.png)
+
+| Property            | Type    | Default   | Description                                                                                  |
+|---------------------|---------|-----------|----------------------------------------------------------------------------------------------|
+| **isLandscape**     | Boolean | true      | Indicates if the UI should be visible in landscape mode. Automatically syncs with ***isPortrait***. |
+| **isPortrait**      | Boolean | false     | Indicates if the UI should be visible in portrait mode. Automatically syncs with ***isLandscape***. |
+| **useActiveObject** | Boolean | false     | Visibility method:<br />- `false`: Uses opacity (0-255)<br />- `true`: Uses node active state       |
+
+**Notes:**
+- Automatically keeps landscape and portrait states in sync.
+- Supports both opacity and active state for controlling visibility.
diff --git a/docs/faqs/img/orientation-ui-controller.png b/docs/faqs/img/orientation-ui-controller.png
new file mode 100644
index 0000000..ddaf0b9
Binary files /dev/null and b/docs/faqs/img/orientation-ui-controller.png differ