diff --git a/src/components/mini-widgets/ArmerButton.vue b/src/components/mini-widgets/ArmerButton.vue
index 0e19f2f4ba..8cc9bff9c3 100644
--- a/src/components/mini-widgets/ArmerButton.vue
+++ b/src/components/mini-widgets/ArmerButton.vue
@@ -1,26 +1,24 @@
 <template>
   <button
     class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60"
-    @click="!widgetStore.editingMode && (vehicleStore.isArmed ? disarm() : arm())"
+    :class="{ 'cursor-not-allowed': !vehicleStore.isVehicleOnline }"
+    :title="!vehicleStore.isVehicleOnline ? 'Vehicle disconnected' : undefined"
+    @click="handleClick"
   >
     <div
       class="absolute top-auto flex items-center px-1 rounded-[4px] shadow transition-all w-[70%] h-[80%]"
-      :class="
-        vehicleStore.isArmed === undefined
-          ? 'justify-start bg-slate-800/60 text-slate-400 left-[4%]'
-          : vehicleStore.isArmed
-          ? 'bg-red-700 hover:bg-red-800 text-slate-50 justify-end left-[26%]'
-          : 'bg-green-700 hover:bg-green-800 text-slate-400 justify-start left-[4%]'
-      "
+      :class="stateClasses"
     >
       <span class="inline-block font-extrabold align-middle unselectable">
-        {{ vehicleStore.isArmed === undefined ? '...' : vehicleStore.isArmed ? 'Armed' : 'Disarmed' }}
+        {{ stateLabel }}
       </span>
     </div>
   </button>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { useSnackbar } from '@/composables/snackbar'
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
@@ -30,6 +28,32 @@ const vehicleStore = useMainVehicleStore()
 const widgetStore = useWidgetManagerStore()
 const { openSnackbar } = useSnackbar()
 
+const stateLabel = computed(() => {
+  if (!vehicleStore.isVehicleOnline) return 'Offline'
+  if (vehicleStore.isArmed === undefined) return '...'
+  return vehicleStore.isArmed ? 'Armed' : 'Disarmed'
+})
+
+const stateClasses = computed(() => {
+  if (!vehicleStore.isVehicleOnline) return 'justify-center bg-slate-600/60 text-slate-300 left-[15%]'
+  if (vehicleStore.isArmed === undefined) return 'justify-start bg-slate-800/60 text-slate-400 left-[4%]'
+  if (vehicleStore.isArmed) return 'bg-red-700 hover:bg-red-800 text-slate-50 justify-end left-[26%]'
+  return 'bg-green-700 hover:bg-green-800 text-slate-400 justify-start left-[4%]'
+})
+
+const handleClick = (): void => {
+  if (widgetStore.editingMode) return
+  if (!vehicleStore.isVehicleOnline) {
+    openSnackbar({ message: 'Vehicle is disconnected.', variant: 'error', duration: 3000 })
+    return
+  }
+  if (vehicleStore.isArmed) {
+    disarm()
+  } else {
+    arm()
+  }
+}
+
 const arm = async (): Promise<void> => {
   try {
     await slideToConfirm({ command: 'Arm' }, canByPassCategory(EventCategory.ARM))
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index fecdfba771..3deaaa8e1f 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -217,6 +217,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     }
     if (isOnline) return
     currentlyConnectedVehicleId.value = undefined
+    isArmed.value = undefined
   })
 
   watch(enableDatalakeVariablesFromOtherSystems, (newValue) => {