diff --git a/src/components/configuration/ActionLinkConfig.vue b/src/components/configuration/ActionLinkConfig.vue
new file mode 100644
index 000000000..6d101f20d
--- /dev/null
+++ b/src/components/configuration/ActionLinkConfig.vue
@@ -0,0 +1,144 @@
+<template>
+  <v-dialog v-model="dialog.show" max-width="500px">
+    <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold py-4 text-center">Link Action to Variables</v-card-title>
+      <v-card-text class="px-8">
+        <div v-if="dialog.action" class="mb-4">
+          <p class="text-subtitle-1 font-weight-bold">Action: {{ dialog.action.name }}</p>
+          <p class="text-caption">Type: {{ humanizeString(dialog.action.type) }}</p>
+        </div>
+
+        <v-text-field
+          v-model="searchQuery"
+          label="Search variables"
+          variant="outlined"
+          density="compact"
+          prepend-inner-icon="mdi-magnify"
+          class="mb-2"
+          clearable
+          @update:model-value="menuOpen = true"
+          @click:clear="menuOpen = false"
+          @update:focused="(isFocused: boolean) => (menuOpen = isFocused)"
+        />
+
+        <v-select
+          v-model="dialog.selectedVariables"
+          :items="filteredDataLakeVariables"
+          label="Data Lake Variables"
+          multiple
+          chips
+          variant="outlined"
+          density="compact"
+          theme="dark"
+          closable-chips
+          :menu-props="{ modelValue: menuOpen }"
+          @update:menu="menuOpen = $event"
+        />
+
+        <v-text-field
+          v-model="dialog.minInterval"
+          label="Minimum interval between calls (ms)"
+          type="number"
+          min="0"
+          variant="outlined"
+          density="compact"
+          class="mt-4"
+        />
+
+        <div class="mt-4">
+          <p class="text-caption">
+            The action will be called whenever any of the selected variables change, respecting the minimum interval
+            between consecutive calls.
+          </p>
+        </div>
+      </v-card-text>
+      <v-divider class="mt-2 mx-10" />
+      <v-card-actions>
+        <div class="flex justify-between items-center pa-2 w-full h-full">
+          <v-btn variant="text" @click="closeDialog">Cancel</v-btn>
+          <v-btn :disabled="!isFormValid" @click="saveConfig">Save</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { getActionLink, removeActionLink, saveActionLink } from '@/libs/actions/action-links'
+import { getAllDataLakeVariablesInfo } from '@/libs/actions/data-lake'
+import { humanizeString } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { ActionConfig } from '@/types/cockpit-actions'
+
+const interfaceStore = useAppInterfaceStore()
+const searchQuery = ref('')
+const menuOpen = ref(false)
+
+const defaultDialogConfig = {
+  show: false,
+  action: null as ActionConfig | null,
+  selectedVariables: [] as string[],
+  minInterval: 1000,
+}
+
+const dialog = ref(defaultDialogConfig)
+
+const availableDataLakeVariables = computed(() => {
+  const variables = getAllDataLakeVariablesInfo()
+  return Object.values(variables).map((variable) => ({
+    title: variable.id,
+    value: variable.id,
+  }))
+})
+
+const filteredDataLakeVariables = computed(() => {
+  const variables = availableDataLakeVariables.value
+  if (!searchQuery.value) return variables
+
+  const query = searchQuery.value.toLowerCase()
+  return variables.filter((variable) => variable.title.toLowerCase().includes(query))
+})
+
+const isFormValid = computed(() => {
+  return dialog.value.action && dialog.value.minInterval >= 0
+})
+
+const openDialog = (item: ActionConfig): void => {
+  const existingLink = getActionLink(item.id)
+  dialog.value = {
+    show: true,
+    action: item,
+    selectedVariables: existingLink?.variables || [],
+    minInterval: existingLink?.minInterval || 1000,
+  }
+}
+
+const closeDialog = (): void => {
+  dialog.value = defaultDialogConfig
+}
+
+const saveConfig = (): void => {
+  if (!dialog.value.action) return
+
+  // Always remove the existing link first
+  removeActionLink(dialog.value.action.id)
+
+  // Only create a new link if variables are selected
+  if (dialog.value.selectedVariables.length > 0) {
+    saveActionLink(
+      dialog.value.action.id,
+      dialog.value.action.type,
+      dialog.value.selectedVariables,
+      dialog.value.minInterval
+    )
+  }
+
+  closeDialog()
+}
+
+defineExpose({
+  openDialog,
+})
+</script>
diff --git a/src/components/configuration/HttpRequestActionConfig.vue b/src/components/configuration/HttpRequestActionConfig.vue
index e2830b9ba..42f823bf4 100644
--- a/src/components/configuration/HttpRequestActionConfig.vue
+++ b/src/components/configuration/HttpRequestActionConfig.vue
@@ -20,7 +20,8 @@
             required
             variant="outlined"
             density="compact"
-          ></v-select>
+            theme="dark"
+          />
           <v-text-field
             v-model="newActionConfig.url"
             label="URL"
@@ -117,7 +118,8 @@
             required
             variant="outlined"
             density="compact"
-          ></v-select>
+            theme="dark"
+          />
           <v-text-field
             v-if="urlParamDialog.valueType === 'fixed'"
             v-model="urlParamDialog.fixedValue"
diff --git a/src/components/configuration/MavlinkMessageActionConfig.vue b/src/components/configuration/MavlinkMessageActionConfig.vue
index e5d7824b9..49cae9670 100644
--- a/src/components/configuration/MavlinkMessageActionConfig.vue
+++ b/src/components/configuration/MavlinkMessageActionConfig.vue
@@ -21,6 +21,7 @@
             required
             variant="outlined"
             density="compact"
+            theme="dark"
             @update:model-value="resetActionConfig(newActionConfig.messageType)"
           />
 
diff --git a/src/libs/actions/action-links.ts b/src/libs/actions/action-links.ts
new file mode 100644
index 000000000..fbf77b587
--- /dev/null
+++ b/src/libs/actions/action-links.ts
@@ -0,0 +1,149 @@
+import { listenDataLakeVariable, unlistenDataLakeVariable } from '@/libs/actions/data-lake'
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+
+/**
+ * Interface representing a link between an action and data-lake variables
+ */
+interface ActionLink {
+  /** The ID of the action */
+  actionId: string
+  /** The type of the action */
+  actionType: string
+  /** Array of data-lake variable IDs to watch */
+  variables: string[]
+  /** Minimum time (in ms) between consecutive action executions */
+  minInterval: number
+  /** Timestamp of the last execution */
+  lastExecutionTime: number
+}
+
+const actionLinks: Record<string, ActionLink> = {}
+const listenerIds: Record<string, string[]> = {}
+
+/**
+ * Save a new action link configuration and set up the watchers
+ * @param {string} actionId The ID of the action to link
+ * @param {string} actionType The type of the action
+ * @param {string[]} variables Array of data-lake variable IDs to watch
+ * @param {number} minInterval Minimum time (in ms) between consecutive action executions
+ */
+export const saveActionLink = (
+  actionId: string,
+  actionType: string,
+  variables: string[],
+  minInterval: number
+): void => {
+  // Remove any existing link for this action
+  removeActionLink(actionId)
+
+  // Save the new link configuration
+  actionLinks[actionId] = {
+    actionId,
+    actionType,
+    variables,
+    minInterval,
+    lastExecutionTime: 0,
+  }
+
+  // Set up listeners for each variable
+  listenerIds[actionId] = variables.map((variableId) =>
+    listenDataLakeVariable(variableId, () => {
+      executeLinkedAction(actionId)
+    })
+  )
+
+  saveLinksToPersistentStorage()
+}
+
+/**
+ * Remove an action link and clean up its watchers
+ * @param {string} actionId The ID of the action to unlink
+ */
+export const removeActionLink = (actionId: string): void => {
+  const link = actionLinks[actionId]
+  if (!link) return
+
+  // Remove all listeners
+  if (listenerIds[actionId]) {
+    link.variables.forEach((variableId, index) => {
+      unlistenDataLakeVariable(variableId, listenerIds[actionId][index])
+    })
+    delete listenerIds[actionId]
+  }
+
+  delete actionLinks[actionId]
+
+  saveLinksToPersistentStorage()
+}
+
+/**
+ * Get the link configuration for an action
+ * @param {string} actionId The ID of the action
+ * @returns {ActionLink | null} The link configuration if it exists, null otherwise
+ */
+export const getActionLink = (actionId: string): ActionLink | null => {
+  return actionLinks[actionId] || null
+}
+
+/**
+ * Execute a linked action, respecting the minimum interval between executions
+ * @param {string} actionId The ID of the action to execute
+ */
+const executeLinkedAction = (actionId: string): void => {
+  const link = actionLinks[actionId]
+  if (!link) return
+
+  const now = Date.now()
+  if (now - link.lastExecutionTime >= link.minInterval) {
+    link.lastExecutionTime = now
+    executeActionCallback(actionId)
+  }
+}
+
+/**
+ * Get all action links
+ * @returns {Record<string, ActionLink>} Record of all action links
+ */
+export const getAllActionLinks = (): Record<string, ActionLink> => {
+  return { ...actionLinks }
+}
+
+// Load saved links from localStorage on startup
+const loadSavedLinks = (): void => {
+  try {
+    const savedLinks = localStorage.getItem('cockpit-action-links')
+    if (savedLinks) {
+      const links = JSON.parse(savedLinks) as Record<string, Omit<ActionLink, 'lastExecutionTime'>>
+      Object.entries(links).forEach(([actionId, link]) => {
+        saveActionLink(actionId, link.actionType, link.variables, link.minInterval)
+      })
+    }
+  } catch (error) {
+    console.error('Failed to load saved action links:', error)
+  }
+}
+
+// Save links to localStorage when they change
+const saveLinksToPersistentStorage = (): void => {
+  try {
+    // Don't save the lastExecutionTime
+    const linksToSave = Object.entries(actionLinks).reduce(
+      (acc, [id, link]) => ({
+        ...acc,
+        [id]: {
+          actionId: link.actionId,
+          actionType: link.actionType,
+          variables: link.variables,
+          minInterval: link.minInterval,
+        },
+      }),
+      {}
+    )
+    localStorage.setItem('cockpit-action-links', JSON.stringify(linksToSave))
+  } catch (error) {
+    console.error('Failed to save action links:', error)
+  }
+}
+
+// Initialize
+loadSavedLinks()
diff --git a/src/styles/global.css b/src/styles/global.css
index f5604b024..03477ac82 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -52,11 +52,15 @@
 ::-webkit-scrollbar-thumb:hover {
     background-color: hsla(0, 0%, 0%, 0.411);
 }
-.v-text-field input { 
-    background-color: transparent;  
+.v-text-field input {
+    background-color: transparent;
+    border: none !important;
+    box-shadow: none !important;
 }
 .v-field__input {
     background-color: transparent;
+    border: none !important;
+    box-shadow: none !important;
 }
 select:focus {
     outline: none;
@@ -68,4 +72,4 @@ select:focus {
 @keyframes highlightBackground {
     0% { background-color: rgba(255, 234, 43, 0.438); }
     100% { background-color: transparent; }
-  }
\ No newline at end of file
+}
diff --git a/src/types/cockpit-actions.ts b/src/types/cockpit-actions.ts
new file mode 100644
index 000000000..0d2ecf234
--- /dev/null
+++ b/src/types/cockpit-actions.ts
@@ -0,0 +1,40 @@
+/**
+ * Custom action types
+ */
+export enum customActionTypes {
+  httpRequest = 'http-request',
+  mavlinkMessage = 'mavlink-message',
+  javascript = 'javascript',
+}
+
+/**
+ * Custom action types names
+ */
+export const customActionTypesNames: Record<customActionTypes, string> = {
+  [customActionTypes.httpRequest]: 'HTTP Request',
+  [customActionTypes.mavlinkMessage]: 'MAVLink Message',
+  [customActionTypes.javascript]: 'JavaScript',
+}
+
+/**
+ * Represents the configuration of a custom action
+ */
+export interface ActionConfig {
+  /**
+   * Action ID
+   */
+  id: string
+  /**
+   * Action name
+   */
+  name: string
+  /**
+   * Action type
+   */
+  type: customActionTypes
+  /**
+   * Action configuration
+   * Specific to the action type
+   */
+  config: any
+}
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
index 7b9952c4d..d57bf65c1 100644
--- a/src/views/ConfigurationActionsView.vue
+++ b/src/views/ConfigurationActionsView.vue
@@ -2,10 +2,7 @@
   <BaseConfigurationView>
     <template #title>Cockpit actions configuration</template>
     <template #content>
-      <div
-        class="flex-col h-full overflow-y-auto ml-[10px] pr-3 -mr-[10px] -mb-[10px]"
-        :class="interfaceStore.isOnSmallScreen ? 'max-w-[80vw] max-h-[90vh]' : 'max-w-[680px] max-h-[85vh]'"
-      >
+      <div class="flex-col h-full overflow-y-auto ml-[10px] pr-3 -mr-[10px] -mb-[10px]">
         <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
           <template #title>Actions</template>
           <template #info>
@@ -13,9 +10,14 @@
             <li>HTTP Request actions can be used to call external APIs, like servers, vehicles, cameras, etc.</li>
             <li>MAVLink Message actions allow you to send specific MAVLink messages to vehicles.</li>
             <li>JavaScript actions give you full flexibility by allowing you to write custom code.</li>
+            <li>
+              The link button can be used to link Actions to Data Lake variables, so that changes to the variable value
+              will automatically trigger the linked action.
+            </li>
+            <li>Actions can also be tested/run manually, using the play button.</li>
           </template>
           <template #content>
-            <div class="flex justify-center flex-col ml-2 mb-8 mt-2 w-[640px]">
+            <div class="flex justify-center flex-col ml-2 pr-4 mb-8 mt-2 w-full">
               <v-data-table
                 :items="allActionConfigs"
                 items-per-page="10"
@@ -27,18 +29,32 @@
                 <template #item="{ item }">
                   <tr>
                     <td>
-                      <div :id="item.id" class="flex items-center justify-left rounded-xl mx-1 w-[140px]">
-                        <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">{{ item.name }}</p>
+                      <div :id="item.id" class="flex items-center justify-left rounded-xl mx-1 w-[160px]">
+                        <p class="whitespace-nowrap overflow-hidden truncate">{{ item.name }}</p>
                       </div>
                     </td>
                     <td>
-                      <div :id="item.id" class="flex items-center justify-center rounded-xl mx-1 w-[200px]">
+                      <div :id="item.id" class="flex items-center justify-center rounded-xl mx-1 w-[120px]">
                         <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">
                           {{ customActionTypesNames[item.type] }}
                         </p>
                       </div>
                     </td>
-                    <td class="w-[200px] text-right">
+                    <td>
+                      <div :id="item.id" class="flex items-center justify-center rounded-xl mx-1 w-[70px]">
+                        <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">
+                          {{ item.minInterval ?? 0 }} ms
+                        </p>
+                      </div>
+                    </td>
+                    <td>
+                      <div :id="item.id" class="flex items-center justify-center rounded-xl mx-1 my-1 w-[150px]">
+                        <p class="whitespace-nowrap overflow-hidden truncate">
+                          {{ item.linkedVariables?.join(' / ') ?? '--' }}
+                        </p>
+                      </div>
+                    </td>
+                    <td class="w-[220px] text-right">
                       <div class="flex items-center justify-center">
                         <v-btn
                           variant="outlined"
@@ -47,6 +63,13 @@
                           size="x-small"
                           @click="editAction(item)"
                         />
+                        <v-btn
+                          variant="outlined"
+                          class="rounded-full mx-1"
+                          icon="mdi-link"
+                          size="x-small"
+                          @click="openLinkDialog(item)"
+                        />
                         <v-btn
                           variant="outlined"
                           class="rounded-full mx-1"
@@ -128,6 +151,8 @@
           </v-card>
         </v-dialog>
 
+        <ActionLinkConfig ref="linkConfig" />
+
         <!-- Action configuration components with their dialogs -->
         <HttpRequestActionConfig
           ref="httpRequestConfig"
@@ -152,10 +177,12 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
+import ActionLinkConfig from '@/components/configuration/ActionLinkConfig.vue'
 import HttpRequestActionConfig from '@/components/configuration/HttpRequestActionConfig.vue'
 import JavascriptActionConfig from '@/components/configuration/JavascriptActionConfig.vue'
 import MavlinkMessageActionConfig from '@/components/configuration/MavlinkMessageActionConfig.vue'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import { getActionLink } from '@/libs/actions/action-links'
 import { getAllJavascriptActionConfigs, registerJavascriptActionConfig } from '@/libs/actions/free-javascript'
 import { getAllHttpRequestActionConfigs, registerHttpRequestActionConfig } from '@/libs/actions/http-request'
 import {
@@ -164,6 +191,7 @@ import {
 } from '@/libs/actions/mavlink-message-actions'
 import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { useAppInterfaceStore } from '@/stores/appInterface'
+import { ActionConfig, customActionTypes, customActionTypesNames } from '@/types/cockpit-actions'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 
@@ -172,6 +200,7 @@ const interfaceStore = useAppInterfaceStore()
 const httpRequestConfig = ref()
 const mavlinkConfig = ref()
 const javascriptConfig = ref()
+const linkConfig = ref()
 
 // Add reactive refs for our action lists
 const httpRequestActions = ref(getAllHttpRequestActionConfigs())
@@ -179,47 +208,20 @@ const mavlinkMessageActions = ref(getAllMavlinkMessageActionConfigs())
 const javascriptActions = ref(getAllJavascriptActionConfigs())
 
 /**
- * Custom action types
- */
-enum customActionTypes {
-  httpRequest = 'http-request',
-  mavlinkMessage = 'mavlink-message',
-  javascript = 'javascript',
-}
-
-/**
- * Custom action types names
- */
-const customActionTypesNames: Record<customActionTypes, string> = {
-  [customActionTypes.httpRequest]: 'HTTP Request',
-  [customActionTypes.mavlinkMessage]: 'MAVLink Message',
-  [customActionTypes.javascript]: 'JavaScript',
-}
-
-/**
- * Action configuration interface
+ * Extended action config with additional variable-link properties
  */
-interface ActionConfig {
-  /**
-   * Action ID
-   */
-  id: string
-  /**
-   * Action name
-   */
-  name: string
+interface LinkedActionConfig extends ActionConfig {
   /**
-   * Action type
+   * Minimum interval between auto-triggered executions
    */
-  type: customActionTypes
+  minInterval: number | undefined
   /**
-   * Action configuration
-   * Specific to the action type
+   * Linked data-lake variables
    */
-  config: any
+  linkedVariables: string[] | undefined
 }
 
-const allActionConfigs = computed<ActionConfig[]>(() => {
+const allActionConfigs = computed<LinkedActionConfig[]>(() => {
   const configs: ActionConfig[] = []
 
   // Use the reactive refs instead of direct function calls
@@ -235,12 +237,21 @@ const allActionConfigs = computed<ActionConfig[]>(() => {
     configs.push({ id, name: config.name, type: customActionTypes.javascript, config })
   })
 
-  return configs
+  const extendedConfigs: LinkedActionConfig[] = []
+
+  configs.forEach((config) => {
+    const link = getActionLink(config.id)
+    extendedConfigs.push({ ...config, minInterval: link?.minInterval, linkedVariables: link?.variables })
+  })
+
+  return extendedConfigs
 })
 
 const headers = [
   { title: 'Name', key: 'name', sortable: true, align: 'start' },
   { title: 'Type', key: 'type', sortable: true, align: 'center' },
+  { title: 'Min Interval', key: 'minInterval', sortable: false, align: 'center' },
+  { title: 'Linked Variables', key: 'linkedVariables', sortable: false, align: 'center' },
   { title: 'Actions', key: 'actions', sortable: false, align: 'end' },
 ]
 
@@ -392,6 +403,10 @@ const importAction = (): void => {
   input.remove()
 }
 
+const openLinkDialog = (item: ActionConfig): void => {
+  linkConfig.value?.openDialog(item)
+}
+
 onMounted(() => {
   loadAllActions()
 })