diff --git a/src/views/dashboard/shockers/own/OwnShocker.vue b/src/views/dashboard/shockers/own/OwnShocker.vue
index 05f1677..c8268b9 100644
--- a/src/views/dashboard/shockers/own/OwnShocker.vue
+++ b/src/views/dashboard/shockers/own/OwnShocker.vue
@@ -34,9 +34,12 @@
                 <span v-if="liveMode">
                     <b-row class="live-type">
                         <b-button-group>
-                            <b-button :class="{ active: shocker.$live.type === 'sound'}" @click="shocker.$live.type = 'sound'"><i class="fas fa-solid fa-volume-high"></i></b-button>
-                            <b-button :class="{ active: shocker.$live.type === 'vibrate'}" @click="shocker.$live.type = 'vibrate'"><i class="fas fa-solid fa-water"></i></b-button>
-                            <b-button :class="{ active: shocker.$live.type === 'shock'}" @click="shocker.$live.type = 'shock'"><i class="fas fa-solid fa-bolt"></i></b-button>
+                            <b-button :class="{ active: shocker.$live.type === 'sound' }"
+                                @click="shocker.$live.type = 'sound'"><i class="fas fa-solid fa-volume-high"></i></b-button>
+                            <b-button :class="{ active: shocker.$live.type === 'vibrate' }"
+                                @click="shocker.$live.type = 'vibrate'"><i class="fas fa-solid fa-water"></i></b-button>
+                            <b-button :class="{ active: shocker.$live.type === 'shock' }"
+                                @click="shocker.$live.type = 'shock'"><i class="fas fa-solid fa-bolt"></i></b-button>
                         </b-button-group>
                     </b-row>
 
@@ -66,14 +69,15 @@
                         </b-container>
                     </b-row>
                     <b-row v-if="delay.controlsDisabled" align-h="center">
-                    <b-col md="auto">
-                        <b-button id="delayed-actions-button" variant="nano" @click="cancelDelayed">Delayed actions in {{ this.delay.timeRemaining }}s</b-button>
-                        <b-tooltip target="delayed-actions-button" triggers="hover">
-                            Click to cancel
-                        </b-tooltip>
-                    </b-col>
-                </b-row>
-                <b-row v-else align-h="center">
+                        <b-col md="auto">
+                            <b-button id="delayed-actions-button" variant="nano" @click="cancelDelayed">Delayed actions in
+                                {{ this.delay.timeRemaining }}s</b-button>
+                            <b-tooltip target="delayed-actions-button" triggers="hover">
+                                Click to cancel
+                            </b-tooltip>
+                        </b-col>
+                    </b-row>
+                    <b-row v-else align-h="center">
                         <b-col cols="auto" md="auto">
                             <control-button style="width: 46px" text="" icon="fa-solid fa-volume-high"
                                 loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(3)" />
@@ -88,20 +92,20 @@
                         </b-col>
                     </b-row>
 
-                <b-row class="random-slider">
-                    <b-col md="auto">
-                        <BFormCheckbox v-model="delay.randomSliderWarning" id="random-slider-warning-checkbox">
-                        </BFormCheckbox>
-                        <b-tooltip target="random-slider-warning-checkbox" triggers="hover">
-                            Send a warning (vibrate) before sending a shock<br>
-                            (Set slider to 0 to disable delay)
-                        </b-tooltip>
-                    </b-col>
-                    <b-col>
-                        <Slider v-model="delay.randomSliderValue" style="margin-top: 10px" :step=0.3 :min=0 :max=5
-                            :format="formatTooltipSlider" showTooltip="focus" />
-                    </b-col>
-                </b-row>
+                    <b-row class="random-slider">
+                        <b-col md="auto">
+                            <BFormCheckbox v-model="delay.randomSliderWarning" id="random-slider-warning-checkbox">
+                            </BFormCheckbox>
+                            <b-tooltip target="random-slider-warning-checkbox" triggers="hover">
+                                Send a warning (vibrate) before sending a shock<br>
+                                (Set slider to 0 to disable delay)
+                            </b-tooltip>
+                        </b-col>
+                        <b-col>
+                            <Slider v-model="delay.randomSliderValue" style="margin-top: 10px" :step=0.3 :min=0 :max=5
+                                :format="formatTooltipSlider" showTooltip="focus" />
+                        </b-col>
+                    </b-row>
                 </span>
             </div>
         </div>
@@ -220,7 +224,7 @@ export default {
                 this.delay.timeout = null;
             }
 
-            this.delay.controlsDisabled = false;  
+            this.delay.controlsDisabled = false;
         },
         delayCountDown() {
             this.delay.timeRemaining = (Math.max(0, (this.delay.in - Date.now())) / 1000).toFixed(1);
@@ -396,5 +400,4 @@ export default {
             padding: 0 12px;
         }
     }
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/src/views/dashboard/shockers/shared/Shared.vue b/src/views/dashboard/shockers/shared/Shared.vue
index 93a4200..f48e7b5 100644
--- a/src/views/dashboard/shockers/shared/Shared.vue
+++ b/src/views/dashboard/shockers/shared/Shared.vue
@@ -45,6 +45,11 @@ export default {
                             intensity: 25,
                             duration: 1
                         }
+                        shocker.$live = {
+                            dragging: false,
+                            intensity: 0,
+                            type: "vibrate"
+                        }
                     });
                 });
             });
diff --git a/src/views/dashboard/shockers/shared/SharedDevice.vue b/src/views/dashboard/shockers/shared/SharedDevice.vue
index ef8e5f4..3c6f42a 100644
--- a/src/views/dashboard/shockers/shared/SharedDevice.vue
+++ b/src/views/dashboard/shockers/shared/SharedDevice.vue
@@ -4,19 +4,36 @@
             <b-col cols="auto">
                 <p>{{ device.name }}</p>
             </b-col>
-            <b-col :class="onlineStateComp">
-                <i class="fa-solid fa-circle"></i>
+            <b-col cols="auto">
+                <span :id="'tooltip-state' + device.id" :class="!this.onlineState ? 'offline' : 'online'">
+                    <i class="fa-solid fa-circle"></i>
+                </span>
+                <b-tooltip :target="'tooltip-state' + device.id" triggers="hover">
+                    {{ !this.onlineState ? 'Offline' : 'Online' }}<span v-if="this.onlineState"><br>Firmware Version: {{
+                        getFirmwareVersionString }}</span>
+                </b-tooltip>
+            </b-col>
+            <b-col cols="auto">
+                    <span class="live" :id="'tooltip-live' + device.id" :class="{ active: this.lcgState === 1 }"
+                        @click="liveClick">LIVE<span v-if="live.rawState === 0"> <i style="color: var(--main-text-color);" class="fas fa-cog fa-spin"></i></span></span>
+                    <b-tooltip :target="'tooltip-live' + device.id" triggers="hover">
+                        <span v-if="!live.enabled">Connect to Live Control</span>
+                        <span v-else-if="live.rawState === 0">Connecting...<br><br>Gateway: {{ live.gateway }}<br>Country: {{ live.gatewayCountry }}</span>
+                        <span v-else>Disconnect from Live Control<br><br>Gateway: {{ live.gateway }}<br>Country: {{ live.gatewayCountry }}<br>Latency: {{ live.latency }}ms</span>
+                    </b-tooltip>
             </b-col>
         </b-row>
         <b-row>
             <b-col v-for="item in device.shockers" :key="item.id" class="shocker-col">
-                <shared-shocker :shocker="item"></shared-shocker>
+                <shared-shocker :shocker="item" :live-mode="live.rawState === 1"></shared-shocker>
             </b-col>
+        
         </b-row>
     </b-container>
 </template>
 
 <script>
+import toastr from 'toastr';
 import SharedShocker from './SharedShocker.vue';
 export default {
   components: { SharedShocker },
@@ -24,7 +41,14 @@ export default {
     data() {
         return {
             onlineState: false,
-            firmwareVersion: null
+            firmwareVersion: null,
+            live: {
+                enabled: false,
+                gateway: null,
+                websocket: null,
+                rawState: 3,
+                latency: 0
+            }
         }
     },
     beforeMount() {
@@ -35,7 +59,111 @@ export default {
             this.firmwareVersion = data.firmwareVersion;
         });
     },
+    mounted() {
+        setInterval(() => {
+                this.updateWebSocketStatus();
+            }, 20);
+    },
     methods: {
+        liveClick() {
+            this.live.enabled = !this.live.enabled;
+            if (this.live.enabled) {
+                this.startLive();
+            } else {
+                this.stopLive();
+            }
+        },
+        startLive() {
+            this.connectLive();
+            this.tickLoop();
+        },
+        stopLive() {
+            this.live.enabled = false;
+            this.disconnect();
+        },
+        async disconnect() {
+            this.live.websocket?.close();
+        },
+        async connectLive() {
+            await this.disconnect();
+
+            const res = await apiCall.makeCallNoThrow('GET', '1/devices/' + this.device.id + '/lcg');
+            if (res.status !== 200) {
+                console.log(res);
+                toastr.error(res.data.message, "Failed to connect to live control gateway");
+                return;
+            }
+
+            this.live.gateway = res.data.data.gateway;
+            this.live.gatewayCountry = res.data.data.country;
+            this.live.websocket = new WebSocket('wss://' + 'localhost:5443' + '/1/ws/live/' + this.device.id);
+
+            this.live.websocket.onclose = (event) => {
+                console.log(event, "Live Control Gateway Connection Closed");
+                this.live.websocket = null;
+                this.live.rawState = 3;
+                this.live.latency = 0;
+                this.live.enabled = false;
+            };
+
+            
+            this.live.websocket.onerror = (event) => {
+                console.log(event, "Live Control Gateway Connection Error");
+                this.live.websocket = null;
+                this.live.rawState = 3;
+                this.live.latency = 0;
+                this.live.enabled = false;
+            };
+
+            this.live.websocket.onmessage = (event) => {
+                console.log(event.data);
+
+                const json = JSON.parse(event.data);
+
+                switch (json.ResponseType) {
+                    case "Ping":
+                        this.live.websocket.send(JSON.stringify({
+                            RequestType: "Pong",
+                            Data: {
+                                Timestamp: json.Data.Timestamp
+                            }
+                        }));
+                        break;
+                    case "LatencyAnnounce": 
+
+                        this.live.latency = json.Data[this.$store.state.user.id];
+                        break;
+                }
+            };
+        },
+        updateWebSocketStatus() {
+            this.live.rawState = this.live.websocket?.readyState;
+        },
+
+        tickLoop() {
+            if (!this.live.enabled) return;
+
+            this.device.shockers.forEach(shocker => {
+                if (!shocker.$live.isDragging) return;
+
+                console.log(shocker.name + " - " + shocker.$live.intensity);
+
+                this.live.websocket.send(JSON.stringify({
+                    RequestType: "Frame",
+                    Data: {
+                        Shocker: shocker.id,
+                        Intensity: parseInt(shocker.$live.intensity),
+                        Type: shocker.$live.type
+                    }
+                }));
+            });
+
+            setTimeout(() => {
+                this.tickLoop();
+            }, 100);
+        },
+
+
         getOnlineState() {
             if (this.$store.state.deviceStates[this.device.id] === undefined) return false;
             return this.$store.state.deviceStates[this.device.id].online;
@@ -46,9 +174,14 @@ export default {
         }
     },
     computed: {
-        onlineStateComp() {
-            return this.onlineState ? 'online' : 'offline';
-        }
+        getFirmwareVersionString() {
+            if (this.firmwareVersion === null) return "Older than 7.1.0.0, please upgrade.";
+            return this.firmwareVersion;
+        },
+        lcgState() {
+            if(this.live.websocket === null || this.live.rawState === null) return 3;
+            return this.live.rawState;
+        },
     }
 }
 </script>
@@ -60,7 +193,32 @@ export default {
     padding: 20px;
 
     .shocker-col {
-        min-width: 300px;
+        @media screen and (min-width: 465px) {
+            min-width: 375px;
+        }
+    }
+
+    .live {
+        border: 1px solid;
+        border-color: var(--main-text-color);
+        padding: 0 4px;
+        font-size: 10pt;
+        background: var(--main-text-color);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        cursor: pointer;
+
+        &.active {
+            background: linear-gradient(to right, rgb(185, 123, 255), #e100ff);
+            background-clip: text;
+            color: transparent;
+            -webkit-background-clip: text;
+
+
+            border-image: linear-gradient(to right, rgb(167, 89, 255), #e100ff);
+            border-image-slice: 1;
+        }
     }
 
     .online {
diff --git a/src/views/dashboard/shockers/shared/SharedShocker.vue b/src/views/dashboard/shockers/shared/SharedShocker.vue
index 20beb2d..5321bf0 100644
--- a/src/views/dashboard/shockers/shared/SharedShocker.vue
+++ b/src/views/dashboard/shockers/shared/SharedShocker.vue
@@ -23,66 +23,85 @@
                 </b-container>
             </div>
             <div class="content-child" :class="shocker.isPaused ? 'paused' : ''">
-                <b-row>
-                    <b-container align-items="center" style="margin-top: 15px">
-                        <b-row align-h="center">
-                            <b-col md="auto" style="width: unset">
-                                <round-slider v-model="shocker.state.intensity" pathColor="#1b1d1e" rangeColor="#e14a6d"
-                                    start-angle="315" end-angle="+270" width="30" line-cap="round" radius="75"
-                                    :max="shocker.limits.intensity === null ? 100 : shocker.limits.intensity"
-                                    />
-
-                                <p style="text-align: center;">Intensity</p>
-                            </b-col>
-                            <b-col md="auto" style="width: unset">
-                                <round-slider v-model="shocker.state.duration" pathColor="#1b1d1e" rangeColor="#e14a6d"
-                                    start-angle="315" end-angle="+270" line-cap="round" radius="75" width="30" min="0.3"
-                                    step="0.1"
-                                    :max="shocker.limits.duration === null ? 30 : shocker.limits.duration / 1000"
-                                    />
-
-                                <p style="text-align: center;">Duration</p>
-                            </b-col>
-                        </b-row>
-                    </b-container>
-                </b-row>
-                <b-row v-if="delay.controlsDisabled" align-h="center">
-                    <b-col md="auto">
-                        <b-button id="delayed-actions-button" variant="nano" @click="cancelDelayed">Delayed actions in {{ this.delay.timeRemaining }}s</b-button>
-                        <b-tooltip target="delayed-actions-button" triggers="hover">
-                            Click to cancel
-                        </b-tooltip>
-                    </b-col>
-                </b-row>
-                <b-row v-else align-h="center">
-                    <b-col cols="auto" md="auto">
-                        <control-button style="width: 46px" text="" icon="fa-solid fa-volume-high"
-                            loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(3)" />
-                    </b-col>
-                    <b-col cols="auto" md="auto">
-                        <control-button style="width: 46px" text="" icon="fa-solid fa-water"
-                            loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(2)" />
-                    </b-col>
-                    <b-col cols="auto" md="auto">
-                        <control-button style="left: 0; width: 46px" text="" icon="fa-solid fa-bolt"
-                            loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(1)" />
-                    </b-col>
-                </b-row>
-
-                <b-row class="random-slider">
-                    <b-col v-if="shocker.permissions.vibrate" md="auto">
-                        <BFormCheckbox v-model="delay.randomSliderWarning" id="random-slider-warning-checkbox">
-                        </BFormCheckbox>
-                        <b-tooltip target="random-slider-warning-checkbox" triggers="hover">
-                            Send a warning (vibrate) before sending a shock<br>
-                            (Set slider to 0 to disable delay)
-                        </b-tooltip>
-                    </b-col>
-                    <b-col>
-                        <Slider v-model="delay.randomSliderValue" style="margin-top: 10px" :step=0.3 :min=0 :max=5
-                            :format="formatTooltipSlider" showTooltip="focus" />
-                    </b-col>
-                </b-row>
+                <span v-if="liveMode">
+                    <b-row class="live-type">
+                        <b-button-group>
+                            <b-button v-if="shocker.permissions.sound" :class="{ active: shocker.$live.type === 'sound' }"
+                                @click="shocker.$live.type = 'sound'"><i class="fas fa-solid fa-volume-high"></i></b-button>
+                            <b-button v-if="shocker.permissions.vibrate" :class="{ active: shocker.$live.type === 'vibrate' }"
+                                @click="shocker.$live.type = 'vibrate'"><i class="fas fa-solid fa-water"></i></b-button>
+                            <b-button  v-if="shocker.permissions.shock" :class="{ active: shocker.$live.type === 'shock' }"
+                                @click="shocker.$live.type = 'shock'"><i class="fas fa-solid fa-bolt"></i></b-button>
+                        </b-button-group>
+                    </b-row>
+
+                    <b-row>
+                        <live-slider style="width: 100%; height: 200px;" :shocker="shocker" />
+                    </b-row>
+
+                </span>
+                <span v-else>
+                    <b-row>
+                        <b-container align-items="center" style="margin-top: 15px">
+                            <b-row align-h="center">
+                                <b-col md="auto" style="width: unset">
+                                    <round-slider v-model="shocker.state.intensity" pathColor="#1b1d1e" rangeColor="#e14a6d"
+                                        start-angle="315" end-angle="+270" width="30" line-cap="round" radius="75"
+                                        :max="shocker.limits.intensity === null ? 100 : shocker.limits.intensity" />
+
+                                    <p style="text-align: center;">Intensity</p>
+                                </b-col>
+                                <b-col md="auto" style="width: unset">
+                                    <round-slider v-model="shocker.state.duration" pathColor="#1b1d1e" rangeColor="#e14a6d"
+                                        start-angle="315" end-angle="+270" line-cap="round" radius="75" width="30" min="0.3"
+                                        step="0.1"
+                                        :max="shocker.limits.duration === null ? 30 : shocker.limits.duration / 1000" />
+
+                                    <p style="text-align: center;">Duration</p>
+                                </b-col>
+                            </b-row>
+                        </b-container>
+                    </b-row>
+
+                    <b-row v-if="delay.controlsDisabled" align-h="center">
+                        <b-col md="auto">
+                            <b-button id="delayed-actions-button" variant="nano" @click="cancelDelayed">Delayed actions in
+                                {{ this.delay.timeRemaining }}s</b-button>
+                            <b-tooltip target="delayed-actions-button" triggers="hover">
+                                Click to cancel
+                            </b-tooltip>
+                        </b-col>
+                    </b-row>
+                    <b-row v-else align-h="center">
+                        <b-col v-if="shocker.permissions.sound" cols="auto" md="auto">
+                            <control-button style="width: 46px" text="" icon="fa-solid fa-volume-high"
+                                loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(3)" />
+                        </b-col>
+                        <b-col v-if="shocker.permissions.vibrate" cols="auto" md="auto">
+                            <control-button style="width: 46px" text="" icon="fa-solid fa-water"
+                                loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(2)" />
+                        </b-col>
+                        <b-col v-if="shocker.permissions.shock" cols="auto" md="auto">
+                            <control-button style="left: 0; width: 46px" text="" icon="fa-solid fa-bolt"
+                                loadingIcon="fa-solid fa-spinner fa-spin" :loading="inProgress" @click="control(1)" />
+                        </b-col>
+                    </b-row>
+
+                    <b-row class="random-slider">
+                        <b-col v-if="shocker.permissions.vibrate" md="auto">
+                            <BFormCheckbox v-model="delay.randomSliderWarning" id="random-slider-warning-checkbox">
+                            </BFormCheckbox>
+                            <b-tooltip target="random-slider-warning-checkbox" triggers="hover">
+                                Send a warning (vibrate) before sending a shock<br>
+                                (Set slider to 0 to disable delay)
+                            </b-tooltip>
+                        </b-col>
+                        <b-col>
+                            <Slider v-model="delay.randomSliderValue" style="margin-top: 10px" :step=0.3 :min=0 :max=5
+                                :format="formatTooltipSlider" showTooltip="focus" />
+                        </b-col>
+                    </b-row>
+                </span>
             </div>
         </div>
     </b-container>
@@ -92,12 +111,13 @@
 import Loading from '../../../utils/Loading.vue';
 import ControlButton from '../../../utils/ControlButton.vue';
 import RoundSlider from 'vue-three-round-slider';
+import LiveSlider from '../LiveSlider.vue';
 import Slider from '@vueform/slider';
 
 export default {
-    components: { ControlButton, Loading, RoundSlider, Slider },
+    components: { ControlButton, Loading, RoundSlider, Slider, LiveSlider },
 
-    props: ["shocker"],
+    props: ["shocker", "liveMode"],
     data() {
         return {
             inProgress: false,
@@ -177,7 +197,7 @@ export default {
                 clearTimeout(this.delay.timeout);
                 this.delay.timeout = null;
             }
-            this.delay.controlsDisabled = false;  
+            this.delay.controlsDisabled = false;
         },
         delayCountDown() {
             this.delay.timeRemaining = (Math.max(0, (this.delay.in - Date.now())) / 1000).toFixed(1);
@@ -266,6 +286,7 @@ export default {
         color: var(--bs-heading-color);
         font-size: 1.25rem;
     }
+
     .random-slider {
         margin-top: 20px;
         margin-bottom: 10px;
@@ -323,5 +344,4 @@ export default {
             padding: 0 12px;
         }
     }
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file