diff --git a/docs/assets/images/connect-chromadeck.gif b/docs/assets/images/connect-chromadeck.gif
new file mode 100644
index 0000000000..5cf8b84fb9
Binary files /dev/null and b/docs/assets/images/connect-chromadeck.gif differ
diff --git a/docs/assets/images/connect-chromalink.gif b/docs/assets/images/connect-chromalink.gif
new file mode 100644
index 0000000000..ff9223cd22
Binary files /dev/null and b/docs/assets/images/connect-chromalink.gif differ
diff --git a/docs/assets/images/duo-case-insertion.gif b/docs/assets/images/duo-case-insertion.gif
new file mode 100644
index 0000000000..f7e08f9d88
Binary files /dev/null and b/docs/assets/images/duo-case-insertion.gif differ
diff --git a/docs/assets/images/duo-case-removal.gif b/docs/assets/images/duo-case-removal.gif
new file mode 100644
index 0000000000..651d52c145
Binary files /dev/null and b/docs/assets/images/duo-case-removal.gif differ
diff --git a/docs/assets/images/lightshow-lol-chromadeck-update-done.png b/docs/assets/images/lightshow-lol-chromadeck-update-done.png
new file mode 100644
index 0000000000..edbfd884a3
Binary files /dev/null and b/docs/assets/images/lightshow-lol-chromadeck-update-done.png differ
diff --git a/docs/assets/images/lightshow-lol-chromalink-duo-basic.png b/docs/assets/images/lightshow-lol-chromalink-duo-basic.png
new file mode 100644
index 0000000000..21336318a4
Binary files /dev/null and b/docs/assets/images/lightshow-lol-chromalink-duo-basic.png differ
diff --git a/docs/duo_upgrade_guide.md b/docs/duo_upgrade_guide.md
index 3d8fc74262..7caa1e233d 100644
--- a/docs/duo_upgrade_guide.md
+++ b/docs/duo_upgrade_guide.md
@@ -26,18 +26,27 @@ Before updating the Duo firmware, always ensure the **Chromadeck** is [up to dat
 
 </div>
 
- - Plug the **Chromadeck** into the PC, turn the power switch on, and connect the **Chromalink** cable to the side of the **Chromadeck**
-&nbsp;
+ - Start by carefully removing the Duo from it's case
+
+<div style="text-align: center; margin: 5px">
+  <img style="max-width:260px;border-radius:5px;border:1px solid gray;" src="assets/images/duo-case-removal.gif">
+</div>
 
  - **Gently** and **carefully** peel the Duo battery away from the Duo like shown below, leaving it connected will degrade the battery
 
 <div style="text-align: center; margin: 5px">
-  <p style="color:white;">⚠ <b>Warning</b> ⚠<br>
-  StoneOrbits is not responsible for damage to the Duo or battery!</p>
+  <p style="color:white;"><span style="color:yellow;">⚠</span> <b>Warning</b> <span style="color:yellow;">⚠</span><br>
+  StoneOrbits is not responsible for any damage to the Duo or battery!</p>
   <img style="max-width:260px;border-radius:5px;border:1px solid gray;" src="assets/images/battery-removal-1.gif">
   <img style="max-width:260px;border-radius:5px;border:1px solid gray;" src="assets/images/battery-removal-2.gif">
 </div>
 
+ - Connect the **Chromalink** cable to the **Chromadeck**, then plug the **Chromadeck** into the PC and power it on
+<div style="text-align: center; margin: 5px">
+  <img style="max-width:260px;border-radius:5px;border:1px solid gray;" src="assets/images/connect-chromalink.gif">
+  <img style="max-width:260px;border-radius:5px;border:1px solid gray;" src="assets/images/connect-chromadeck.gif">
+</div>
+
  - Seat the Duo into the **Chromalink** dock and slide it into place like shown below
 
 <div style="text-align: center; margin: 20px">
@@ -46,6 +55,7 @@ Before updating the Duo firmware, always ensure the **Chromadeck** is [up to dat
 </div>
 
  - **[Optional]** Turn the Duo on to verify it is receiving power from the Chromadeck
+ &nbsp;
 
  - Navigate a **Google Chrome** browser to [lightshow.lol](https://lightshow.lol) and click the **Connect Device** USB icon:
 
@@ -61,7 +71,16 @@ Before updating the Duo firmware, always ensure the **Chromadeck** is [up to dat
   <img src="assets/images/connect-chromadeck-serialport.png">
 </div>
 
- - When the Chromadeck connects the **Chromalink Duo** panel will appear, press the **Update Firmware** button to update the Duo:
+ - With the Chromadeck connected there are two new panels: **Device Updates** & **Chromalink Duo**
+
+ <div style="text-align: center; margin: 5px">
+  <b style="color:white;">Note: </b> If you haven't <a href="chromadeck_upgrade_guide.html">updated the Chromadeck</a> yet, do it <b style="color:white;">now</b>!</p>
+ 
+  <img style="margin:5px;max-width:280px;border-radius:5px;" src="assets/images/lightshow-lol-chromadeck-update-done.png">
+  <img style="margin:5px;max-width:260px;max-height:190px;border-radius:5px;" src="assets/images/lightshow-lol-chromalink-duo-basic.png">
+</div>
+ 
+- If the **Chromadeck** firmware is up to date, then press the **Update Firmware** button in the **Chromalink Duo Panel** to update the Duo:
 
 <div style="text-align: center; margin: 20px; display:flex; flex-direction: column; align-items: center;">
   <p style="color: white;"><b>NOTE</b>: It is unnecessary to press Connect Duo when updating Firmware!</p>
@@ -70,6 +89,10 @@ Before updating the Duo firmware, always ensure the **Chromadeck** is [up to dat
 
  - Let the flash complete then remove the Duo from the Chromalink and reconnect the battery
 &nbsp; 
+
+<div style="text-align: center; margin: 5px">
+  <img style="max-width:300px;border-radius:5px;border:1px solid gray;" src="assets/images/duo-case-insertion.gif">
+</div>
  
  - Turn the Duo on and cycle through all of it's modes to verify the flash was successful
 
diff --git a/docs/lightshow_lol_chromalink_duo.md b/docs/lightshow_lol_chromalink_duo.md
new file mode 100644
index 0000000000..f466f6bdd1
--- /dev/null
+++ b/docs/lightshow_lol_chromalink_duo.md
@@ -0,0 +1,75 @@
+---
+layout: default
+title: Chromalink Duo
+nav_order: 8
+parent: Lightshow.lol
+---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    max-width: 80%;
+    margin-top: 10px;
+  }
+
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #ffcc00;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
+# Chromalink Duo
+
+<img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-chromalink-duo.png">
+
+The **Chromalink Panel** handles the connection with a **Duo** made via the **Chromadeck** and **Chromalink** cable.
+
+### Key Features
+
+- **Realtime Update Check:** Checks with the database on vortex.community for latest firmware version
+- **Instant Firmware Flash:** Immediately update the firmware to the latest with the click of a button
+- **Custom Firmware Flash:** Upload custom Duo Firmwares from your filesystem with the press of a button
+- **Up-to-date Notification:** This window will inform if the firmware is completely up to date
+
+Once the duo is connected with **Connect Duo** the device status appears along with the Duo version and number of modes.
+
+With a Duo connected the **Modes Panel** can be used to **pull** the modes from the Duo into the **Modes List** where they can be edited and then **pushed** back to the duo.
+
+It is possible to adjust the total number of modes on a Duo with the editor, simply delete the extra modes and hit push.
+
+## Other Panels
+
+<div class="panel-grid">
+  <a href="lightshow_lol_update_panel.html" class="panel-link">
+    <span class="panel-title">← Update Panel 🔗</span>
+    <img src="assets/images/lightshow-lol-device-update.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_animation.html" class="panel-link">
+    <span class="panel-title">🔗 Animation Panel →</span>
+    <img src="assets/images/lightshow-lol-animation.png" class="panel-img">
+  </a>
+</div>
+
diff --git a/docs/lightshow_lol_update_panel.md b/docs/lightshow_lol_update_panel.md
new file mode 100644
index 0000000000..4ea505d32f
--- /dev/null
+++ b/docs/lightshow_lol_update_panel.md
@@ -0,0 +1,70 @@
+---
+layout: default
+title: Device Updates
+nav_order: 7
+parent: Lightshow.lol
+---
+<style>
+  .panel-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+    margin: 0 auto;
+    max-width: 80%;
+    margin-top: 10px;
+  }
+
+  .panel-link {
+    background-color: #2e2e2e;
+    border-radius: 8px;
+    text-decoration: none;
+    color: #ffffff;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+    border: 1px solid #080808;
+  }
+
+  .panel-link:hover {
+    transform: scale(1.02);
+  }
+
+  .panel-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #ffcc00;
+  }
+
+  .panel-img {
+    max-width: 100%;
+  }
+</style>
+# Device Updates
+
+<img style="float:right;max-width:40%;margin:10px;" src="assets/images/lightshow-lol-device-update.png">
+
+The **Device Update Panel** is responsible for checking and delivering updates for the ESP32-class Vortex Devices such as the Spark orbit/handles, and the Chromadeck.
+
+### Key Features
+
+- **Realtime Update Check:** Checks with the database on vortex.community for latest firmware version
+- **Instant Firmware Flash:** Immediately update the firmware to the latest with the click of a button
+- **Up-to-date Notification:** This window will inform if the firmware is completely up to date
+
+The other devices like Vortex Orbit, Handles and Wired Gloves are not supported by this update panel.
+
+## Other Panels
+
+<div class="panel-grid">
+  <a href="lightshow_lol_color_picker.html" class="panel-link">
+    <span class="panel-title">← Color Picker 🔗</span>
+    <img src="assets/images/lightshow-lol-color-picker.png" class="panel-img" alt="Color Picker">
+  </a>
+  <a href="lightshow_lol_color_picker.html" class="panel-link">
+    <span class="panel-title">🔗 Chromalink Panel →</span>
+    <img src="assets/images/lightshow-lol-chromalink-duo.png" class="panel-img">
+  </a>
+</div>
+