diff --git a/src/App.vue b/src/App.vue
index 9f4d4e22a..fc19580ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -343,6 +343,7 @@ import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
 import { ConfigComponent } from './types/general'
+import ConfigurationActionsView from './views/ConfigurationActionsView.vue'
 import ConfigurationAlertsView from './views/ConfigurationAlertsView.vue'
 import ConfigurationDevelopmentView from './views/ConfigurationDevelopmentView.vue'
 import ConfigurationGeneralView from './views/ConfigurationGeneralView.vue'
@@ -410,6 +411,11 @@ const configMenu = [
     title: 'Mission',
     component: markRaw(ConfigurationMissionView) as ConfigComponent,
   },
+  {
+    icon: 'mdi-run-fast',
+    title: 'Actions',
+    component: markRaw(ConfigurationActionsView) as ConfigComponent,
+  },
 ]
 
 watch(
diff --git a/src/libs/actions/data-lake.ts b/src/libs/actions/data-lake.ts
new file mode 100644
index 000000000..0cc437574
--- /dev/null
+++ b/src/libs/actions/data-lake.ts
@@ -0,0 +1,78 @@
+/**
+ * A variable to be used on a Cockpit action
+ * @param { string } id - The id of the variable
+ * @param { string } name - The name of the variable
+ * @param { 'string' | 'number' | 'boolean' } type - The type of the variable (string, number or boolean)
+ * @param { string } description - What the variable does or means
+ */
+class CockpitActionVariable {
+  id: string
+  name: string
+  type: 'string' | 'number' | 'boolean'
+  description?: string
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor(id: string, name: string, type: 'string' | 'number' | 'boolean', description?: string) {
+    this.id = id
+    this.name = name
+    this.type = type
+    this.description = description
+  }
+}
+
+const cockpitActionVariableInfo: Record<string, CockpitActionVariable> = {}
+export const cockpitActionVariableData: Record<string, string | number | boolean> = {}
+const cockpitActionVariableListeners: Record<string, ((value: string | number | boolean) => void)[]> = {}
+
+export const getAllCockpitActionVariablesInfo = (): Record<string, CockpitActionVariable> => {
+  return cockpitActionVariableInfo
+}
+
+export const getCockpitActionVariableInfo = (id: string): CockpitActionVariable | undefined => {
+  return cockpitActionVariableInfo[id]
+}
+
+export const createCockpitActionVariable = (variable: CockpitActionVariable): void => {
+  if (cockpitActionVariableInfo[variable.id]) {
+    throw new Error(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
+  }
+  cockpitActionVariableInfo[variable.id] = variable
+}
+
+export const updateCockpitActionVariableInfo = (variable: CockpitActionVariable): void => {
+  if (!cockpitActionVariableInfo[variable.id]) {
+    throw new Error(`Cockpit action variable with id '${variable.id}' does not exist. Create it first.`)
+  }
+  cockpitActionVariableInfo[variable.id] = variable
+}
+
+export const getCockpitActionVariableData = (id: string): string | number | boolean | undefined => {
+  return cockpitActionVariableData[id]
+}
+
+export const setCockpitActionVariableData = (id: string, data: string | number | boolean): void => {
+  cockpitActionVariableData[id] = data
+  notifyCockpitActionVariableListeners(id)
+}
+
+export const deleteCockpitActionVariable = (id: string): void => {
+  delete cockpitActionVariableInfo[id]
+  delete cockpitActionVariableData[id]
+}
+
+export const listenCockpitActionVariable = (id: string, listener: (value: string | number | boolean) => void): void => {
+  if (!cockpitActionVariableListeners[id]) {
+    cockpitActionVariableListeners[id] = []
+  }
+  cockpitActionVariableListeners[id].push(listener)
+}
+
+export const unlistenCockpitActionVariable = (id: string): void => {
+  delete cockpitActionVariableListeners[id]
+}
+
+const notifyCockpitActionVariableListeners = (id: string): void => {
+  if (cockpitActionVariableListeners[id]) {
+    const value = cockpitActionVariableData[id]
+    cockpitActionVariableListeners[id].forEach((listener) => listener(value))
+  }
+}
diff --git a/src/libs/actions/http-request.ts b/src/libs/actions/http-request.ts
new file mode 100644
index 000000000..a6d02f6e0
--- /dev/null
+++ b/src/libs/actions/http-request.ts
@@ -0,0 +1,160 @@
+import {
+  availableCockpitActions,
+  CockpitAction,
+  CockpitActionsFunction,
+  deleteAction,
+  registerActionCallback,
+  registerNewAction,
+} from '../joystick/protocols/cockpit-actions'
+import { getCockpitActionVariableData } from './data-lake'
+
+const httpRequestActionIdPrefix = 'http-request-action'
+
+/**
+ * The types of HTTP methods that can be used.
+ */
+export enum HttpRequestMethod {
+  GET = 'GET',
+  POST = 'POST',
+  PUT = 'PUT',
+  DELETE = 'DELETE',
+  PATCH = 'PATCH',
+}
+export const availableHttpRequestMethods: HttpRequestMethod[] = Object.values(HttpRequestMethod)
+
+export type HttpRequestActionConfig = {
+  /**
+   * The name of the action.
+   */
+  name: string
+  /**
+   * The URL to send the request to.
+   */
+  url: string
+  /**
+   * The HTTP method to use.
+   */
+  method: HttpRequestMethod
+  /**
+   * The headers to send with the request.
+   */
+  headers: Record<string, string>
+  /**
+   * The URL parameters to send with the request.
+   */
+  urlParams: Record<string, string>
+  /**
+   * The body of the request.
+   */
+  body: string
+}
+
+let registeredHttpRequestActionConfigs: Record<string, HttpRequestActionConfig> = {}
+
+export const registerHttpRequestActionConfig = (action: HttpRequestActionConfig): void => {
+  const id = `${httpRequestActionIdPrefix} (${action.name})`
+  registeredHttpRequestActionConfigs[id] = action
+  saveHttpRequestActionConfigs()
+  updateCockpitActions()
+}
+
+export const getHttpRequestActionConfig = (id: string): HttpRequestActionConfig | undefined => {
+  return registeredHttpRequestActionConfigs[id]
+}
+
+export const getAllHttpRequestActionConfigs = (): Record<string, HttpRequestActionConfig> => {
+  return registeredHttpRequestActionConfigs
+}
+
+export const deleteHttpRequestActionConfig = (id: string): void => {
+  delete registeredHttpRequestActionConfigs[id]
+  saveHttpRequestActionConfigs()
+  updateCockpitActions()
+}
+
+export const updateHttpRequestActionConfig = (id: string, updatedAction: HttpRequestActionConfig): void => {
+  registeredHttpRequestActionConfigs[id] = updatedAction
+  saveHttpRequestActionConfigs()
+  updateCockpitActions()
+}
+
+export const updateCockpitActions = (): void => {
+  Object.entries(availableCockpitActions).forEach(([id]) => {
+    if (id.includes(httpRequestActionIdPrefix)) {
+      deleteAction(id as CockpitActionsFunction)
+    }
+  })
+
+  const httpResquestActions = getAllHttpRequestActionConfigs()
+  for (const [id, action] of Object.entries(httpResquestActions)) {
+    try {
+      const cockpitAction = new CockpitAction(id as CockpitActionsFunction, action.name)
+      registerNewAction(cockpitAction)
+      registerActionCallback(cockpitAction, getHttpRequestActionCallback(id))
+    } catch (error) {
+      console.error(`Error registering action ${id}: ${error}`)
+    }
+  }
+}
+
+export const loadHttpRequestActionConfigs = (): void => {
+  const savedActions = localStorage.getItem('cockpit-http-request-actions')
+  if (savedActions) {
+    registeredHttpRequestActionConfigs = JSON.parse(savedActions)
+  }
+}
+
+export const saveHttpRequestActionConfigs = (): void => {
+  localStorage.setItem('cockpit-http-request-actions', JSON.stringify(registeredHttpRequestActionConfigs))
+}
+
+export type HttpRequestActionCallback = () => void
+
+export const getHttpRequestActionCallback = (id: string): HttpRequestActionCallback => {
+  const action = getHttpRequestActionConfig(id)
+  if (!action) {
+    throw new Error(`Action with id ${id} not found.`)
+  }
+
+  let parsedBody = action.body
+  const parsedUrlParams = action.urlParams
+
+  const cockpitInputsInBody = action.body.match(/{{\s*([^{}\s]+)\s*}}/g)
+  if (cockpitInputsInBody) {
+    for (const input of cockpitInputsInBody) {
+      const parsedInput = input.replace('{{', '').replace('}}', '').trim()
+      const inputData = getCockpitActionVariableData(parsedInput)
+      if (inputData) {
+        parsedBody = parsedBody.replace(input, inputData.toString())
+      }
+    }
+  }
+
+  const cockpitInputsInUrlParams = Object.entries(action.urlParams).filter(
+    ([, value]) => typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')
+  )
+  if (cockpitInputsInUrlParams) {
+    for (const [key, value] of cockpitInputsInUrlParams) {
+      const parsedInput = value.replace('{{', '').replace('}}', '').trim()
+      const inputData = getCockpitActionVariableData(parsedInput)
+      if (inputData) {
+        parsedUrlParams[key] = inputData.toString()
+      }
+    }
+  }
+
+  const url = new URL(action.url)
+
+  url.search = new URLSearchParams(parsedUrlParams).toString()
+
+  return () => {
+    fetch(url, {
+      method: action.method,
+      headers: action.headers,
+      body: action.method === HttpRequestMethod.GET ? undefined : parsedBody,
+    })
+  }
+}
+
+loadHttpRequestActionConfigs()
+updateCockpitActions()
diff --git a/src/libs/joystick/protocols.ts b/src/libs/joystick/protocols.ts
index e24ae286f..0ef876ec1 100644
--- a/src/libs/joystick/protocols.ts
+++ b/src/libs/joystick/protocols.ts
@@ -7,14 +7,15 @@ import {
 } from './protocols/mavlink-manual-control'
 import { modifierKeyActions, otherAvailableActions } from './protocols/other'
 
-export const allAvailableAxes: ProtocolAction[] = [
-  ...Object.values(mavlinkManualControlAxes),
-  ...Object.values(otherAvailableActions),
-]
+export const allAvailableAxes = (): ProtocolAction[] => {
+  return [...Object.values(mavlinkManualControlAxes), ...Object.values(otherAvailableActions)]
+}
 
-export const allAvailableButtons: ProtocolAction[] = [
-  ...Object.values(availableCockpitActions),
-  ...Object.values(availableMavlinkManualControlButtonFunctions),
-  ...Object.values(otherAvailableActions),
-  ...Object.values(modifierKeyActions),
-]
+export const allAvailableButtons = (): ProtocolAction[] => {
+  return [
+    ...Object.values(availableCockpitActions),
+    ...Object.values(availableMavlinkManualControlButtonFunctions),
+    ...Object.values(otherAvailableActions),
+    ...Object.values(modifierKeyActions),
+  ]
+}
diff --git a/src/libs/joystick/protocols/cockpit-actions.ts b/src/libs/joystick/protocols/cockpit-actions.ts
index c6f97e73f..1163f997e 100644
--- a/src/libs/joystick/protocols/cockpit-actions.ts
+++ b/src/libs/joystick/protocols/cockpit-actions.ts
@@ -1,10 +1,7 @@
 /* eslint-disable vue/max-len */
 /* eslint-disable prettier/prettier */
 /* eslint-disable max-len */
-import { v4 as uuid4 } from 'uuid'
-
-import { slideToConfirm } from '@/libs/slide-to-confirm'
-import { type JoystickProtocolActionsMapping,type JoystickState, type ProtocolAction, JoystickProtocol } from '@/types/joystick'
+import { type ProtocolAction,JoystickProtocol } from '@/types/joystick'
 
 /**
  * Possible functions in the MAVLink `MANUAL_CONTROL` message protocol
@@ -37,8 +34,8 @@ export class CockpitAction implements ProtocolAction {
   }
 }
 
-// Available actions
-export const availableCockpitActions: { [key in CockpitActionsFunction]: CockpitAction } = {
+// Predefined actions
+export const predefinedCockpitActions: { [key in CockpitActionsFunction]: CockpitAction } = {
   [CockpitActionsFunction.go_to_next_view]: new CockpitAction(CockpitActionsFunction.go_to_next_view, 'Go to next view'),
   [CockpitActionsFunction.go_to_previous_view]: new CockpitAction(CockpitActionsFunction.go_to_previous_view, 'Go to previous view'),
   [CockpitActionsFunction.toggle_full_screen]: new CockpitAction(CockpitActionsFunction.toggle_full_screen, 'Toggle full screen'),
@@ -67,54 +64,68 @@ interface CallbackEntry {
   callback: CockpitActionCallback
 }
 
-// @ts-ignore: Typescript does not get that we are initializing the object dinamically
-const actionsCallbacks: { [id in string]: CallbackEntry } = {}
-
-export const registerActionCallback = (action: CockpitAction, callback: CockpitActionCallback): string => {
-  const id = uuid4()
-  actionsCallbacks[id] = { action, callback }
-  return id
-}
-export const unregisterActionCallback = (id: string): void => {
-  delete actionsCallbacks[id]
-}
-
 /**
  * Responsible for routing cockpit actions
  */
 export class CockpitActionsManager {
-  joystickState: JoystickState
-  currentActionsMapping: JoystickProtocolActionsMapping
-  activeButtonsActions: ProtocolAction[]
-  actionsJoystickConfirmRequired: Record<string, boolean>
-
-  updateControllerData = (
-    state: JoystickState,
-    protocolActionsMapping: JoystickProtocolActionsMapping,
-    activeButtonsActions: ProtocolAction[],
-    actionsJoystickConfirmRequired: Record<string, boolean>
-  ): void => {
-    this.joystickState = state
-    this.currentActionsMapping = protocolActionsMapping
-    this.activeButtonsActions = activeButtonsActions
-    this.actionsJoystickConfirmRequired = actionsJoystickConfirmRequired
+  availableActions: { [key in CockpitActionsFunction]: CockpitAction } = { ...predefinedCockpitActions }
+  actionsCallbacks: Record<string, CallbackEntry> = {}
+
+  registerNewAction = (action: CockpitAction): void => {
+    this.availableActions[action.id] = action
   }
 
-  sendCockpitActions = (): void => {
-    if (!this.joystickState || !this.currentActionsMapping || !this.activeButtonsActions) return
-
-    const actionsToCallback = this.activeButtonsActions.filter((a) => a.protocol === JoystickProtocol.CockpitAction)
-    Object.values(actionsCallbacks).forEach((entry) => {
-      if (actionsToCallback.map((a) => a.id).includes(entry.action.id)) {
-        console.log('Sending action', entry.action.name, '/ Require confirm:', this.actionsJoystickConfirmRequired[entry.action.id])
-        slideToConfirm(
-          entry.callback,
-          {
-            command: entry.action.name,
-          },
-          !this.actionsJoystickConfirmRequired[entry.action.id]
-        )
-      }
-    })
+  unregisterAction = (id: CockpitActionsFunction): void => {
+    delete this.availableActions[id]
+  }
+
+  registerActionCallback = (action: CockpitAction, callback: CockpitActionCallback): string => {
+    this.actionsCallbacks[action.id] = { action, callback }
+    return action.id
+  }
+
+  unregisterActionCallback = (id: string): void => {
+    delete this.actionsCallbacks[id]
+  }
+
+  executeActionCallback = (id: string): void => {
+    const callbackEntry = this.actionsCallbacks[id]
+    if (!callbackEntry) {
+      console.error(`Callback for action ${id} not found.`)
+      return
+    }
+
+    console.debug(`Executing action callback for action ${id}.`)
+    try {
+      callbackEntry.callback()
+    } catch (error) {
+      console.error(`Error executing action callback for action ${id}.`, error)
+    }
   }
 }
+
+export const cockpitActionsManager = new CockpitActionsManager()
+
+export const registerNewAction = (action: CockpitAction): void => {
+  cockpitActionsManager.registerNewAction(action)
+  console.debug(`Registered new action ${action.name} with id (${action.id}).`)
+}
+
+export const deleteAction = (id: CockpitActionsFunction): void => {
+  cockpitActionsManager.unregisterAction(id)
+  console.debug(`Unregistered action with id (${id}).`)
+}
+
+export const registerActionCallback = (action: CockpitAction, callback: CockpitActionCallback): string => {
+  return cockpitActionsManager.registerActionCallback(action, callback)
+}
+
+export const unregisterActionCallback = (id: string): void => {
+  cockpitActionsManager.unregisterActionCallback(id)
+}
+
+export const executeActionCallback = (id: string): void => {
+  cockpitActionsManager.executeActionCallback(id)
+}
+
+export const availableCockpitActions = cockpitActionsManager.availableActions
diff --git a/src/stores/controller.ts b/src/stores/controller.ts
index 70f53c037..96b19a7d9 100644
--- a/src/stores/controller.ts
+++ b/src/stores/controller.ts
@@ -14,7 +14,9 @@ import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { type JoystickEvent, EventType, joystickManager, JoystickModel } from '@/libs/joystick/manager'
 import { allAvailableAxes, allAvailableButtons } from '@/libs/joystick/protocols'
+import { CockpitActionsFunction, executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { modifierKeyActions, otherAvailableActions } from '@/libs/joystick/protocols/other'
+import { slideToConfirm } from '@/libs/slide-to-confirm'
 import { Alert, AlertLevel } from '@/types/alert'
 import {
   type JoystickProtocolActionsMapping,
@@ -47,8 +49,8 @@ export const useControllerStore = defineStore('controller', () => {
   const protocolMappings = useBlueOsStorage(protocolMappingsKey, cockpitStandardToProtocols)
   const protocolMappingIndex = useBlueOsStorage(protocolMappingIndexKey, 0)
   const cockpitStdMappings = useBlueOsStorage(cockpitStdMappingsKey, availableGamepadToCockpitMaps)
-  const availableAxesActions = allAvailableAxes
-  const availableButtonActions = allAvailableButtons
+  const availableAxesActions = ref(allAvailableAxes())
+  const availableButtonActions = ref(allAvailableButtons())
   const enableForwarding = ref(false)
   const holdLastInputWhenWindowHidden = useBlueOsStorage('cockpit-hold-last-joystick-input-when-window-hidden', false)
   const vehicleTypeProtocolMappingCorrespondency = useBlueOsStorage<typeof defaultProtocolMappingVehicleCorrespondency>(
@@ -374,6 +376,36 @@ export const useControllerStore = defineStore('controller', () => {
     }
   }
 
+  const actionsToCallFromJoystick = ref<CockpitActionsFunction[]>([])
+  const addActionToCallFromJoystick = (actionId: CockpitActionsFunction): void => {
+    if (!actionsToCallFromJoystick.value.includes(actionId)) {
+      actionsToCallFromJoystick.value.push(actionId)
+    }
+  }
+
+  registerControllerUpdateCallback((joystickState, actionsMapping, activeActions, actionsConfirmRequired) => {
+    if (!joystickState || !actionsMapping || !activeActions || !actionsConfirmRequired) {
+      return
+    }
+
+    actionsToCallFromJoystick.value = []
+
+    const actionsToCallback = activeActions.filter((a) => a.protocol === JoystickProtocol.CockpitAction)
+    Object.values(actionsToCallback).forEach((a) => {
+      const callback = (): void => addActionToCallFromJoystick(a.id as CockpitActionsFunction)
+      slideToConfirm(callback, { command: a.name }, !actionsConfirmRequired[a.id])
+    })
+
+    if (enableForwarding.value) {
+      actionsToCallFromJoystick.value.forEach((a) => executeActionCallback(a as CockpitActionsFunction))
+    }
+  })
+
+  setInterval(() => {
+    availableButtonActions.value = allAvailableButtons()
+    availableAxesActions.value = allAvailableAxes()
+  }, 1000)
+
   return {
     registerControllerUpdateCallback,
     enableForwarding,
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 0b80a982d..6faa044a2 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -18,11 +18,7 @@ import { ConnectionManager } from '@/libs/connection/connection-manager'
 import type { Package } from '@/libs/connection/m2r/messages/mavlink2rest'
 import { MavAutopilot, MAVLinkType, MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import type { Message } from '@/libs/connection/m2r/messages/mavlink2rest-message'
-import {
-  availableCockpitActions,
-  CockpitActionsManager,
-  registerActionCallback,
-} from '@/libs/joystick/protocols/cockpit-actions'
+import { availableCockpitActions, registerActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { MavlinkManualControlManager } from '@/libs/joystick/protocols/mavlink-manual-control'
 import type { ArduPilot } from '@/libs/vehicle/ardupilot/ardupilot'
 import { CustomMode } from '@/libs/vehicle/ardupilot/ardurover'
@@ -523,9 +519,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   })
 
   const mavlinkManualControlManager = new MavlinkManualControlManager()
-  const cockpitActionsManager = new CockpitActionsManager()
   controllerStore.registerControllerUpdateCallback(mavlinkManualControlManager.updateControllerData)
-  controllerStore.registerControllerUpdateCallback(cockpitActionsManager.updateControllerData)
 
   // Loop to send MAVLink Manual Control messages
   setInterval(() => {
@@ -541,13 +535,6 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   }, 40)
   setInterval(() => sendGcsHeartbeat(), 1000)
 
-  // Loop to send Cockpit Action messages
-  setInterval(() => {
-    if (controllerStore.enableForwarding) {
-      cockpitActionsManager.sendCockpitActions()
-    }
-  }, 10)
-
   return {
     arm,
     takeoff,
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
new file mode 100644
index 000000000..171fea4f7
--- /dev/null
+++ b/src/views/ConfigurationActionsView.vue
@@ -0,0 +1,675 @@
+<template>
+  <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]'"
+      >
+        <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+          <template #title>HTTP Request Actions</template>
+          <template #info>
+            <p>View, manage, and create HTTP request actions.</p>
+          </template>
+          <template #content>
+            <div class="flex justify-center flex-col ml-2 mb-8 mt-2 w-[640px]">
+              <v-data-table
+                :items="allSavedActionConfigs"
+                items-per-page="10"
+                class="elevation-1 bg-transparent rounded-lg"
+                theme="dark"
+                :style="interfaceStore.globalGlassMenuStyles"
+              >
+                <template #headers>
+                  <tr>
+                    <th class="text-left">
+                      <p class="text-[16px] font-bold">Name</p>
+                    </th>
+                    <th class="text-center">
+                      <p class="text-[16px] font-bold">URL</p>
+                    </th>
+                    <th class="text-right">
+                      <p class="text-[16px] font-bold">Actions</p>
+                    </th>
+                  </tr>
+                </template>
+                <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>
+                    </td>
+                    <td>
+                      <div :id="item.id" class="flex items-center justify-center rounded-xl mx-1 w-[200px]">
+                        <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">{{ item.url }}</p>
+                      </div>
+                    </td>
+                    <td class="w-[200px] text-right">
+                      <div class="flex items-center justify-center">
+                        <v-btn
+                          variant="outlined"
+                          class="rounded-full mx-1"
+                          icon="mdi-pencil"
+                          size="x-small"
+                          @click="openActionEditDialog(item.id)"
+                        />
+                        <v-btn
+                          variant="outlined"
+                          class="rounded-full mx-1"
+                          icon="mdi-play"
+                          size="x-small"
+                          @click="runAction(item.id)"
+                        />
+                        <v-btn
+                          variant="outlined"
+                          class="rounded-full mx-1 pl-[3px] pt-[1px]"
+                          icon="mdi-export"
+                          size="x-small"
+                          @click="exportAction(item.id)"
+                        />
+                        <v-btn
+                          variant="outlined"
+                          class="rounded-full mx-1"
+                          color="error"
+                          icon="mdi-delete"
+                          size="x-small"
+                          @click="deleteActionConfig(item.id)"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+                <template #bottom>
+                  <tr class="w-full">
+                    <td colspan="3" class="text-center flex items-center justify-center h-[50px] mb-3 w-full gap-2">
+                      <v-btn variant="outlined" class="rounded-lg" @click="openNewActionDialog()">
+                        <v-icon start>mdi-plus</v-icon>
+                        New HTTP action
+                      </v-btn>
+                      <v-btn variant="outlined" class="rounded-lg" @click="importAction">
+                        <v-icon start>mdi-import</v-icon>
+                        Import action
+                      </v-btn>
+                    </td>
+                  </tr>
+                </template>
+                <template #no-data>
+                  <tr>
+                    <td colspan="3" class="text-center flex items-center justify-center h-[50px] w-full">
+                      <p class="text-[16px] ml-[170px] w-full">No HTTP request actions found</p>
+                    </td>
+                  </tr>
+                </template>
+              </v-data-table>
+            </div>
+          </template>
+        </ExpansiblePanel>
+      </div>
+    </template>
+  </BaseConfigurationView>
+
+  <v-dialog v-model="actionDialog.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">{{
+        editMode ? 'Edit action' : 'Create new action'
+      }}</v-card-title>
+      <v-card-text class="px-8">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="createActionConfig">
+          <v-text-field
+            v-model="newActionConfig.name"
+            label="Action Name"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+          <v-select
+            v-model="newActionConfig.method"
+            :items="availableHttpRequestMethods"
+            label="Request Type"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-select>
+          <v-text-field
+            v-model="newActionConfig.url"
+            label="URL"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+
+          <div class="d-flex align-center justify-space-between">
+            <h3 class="text-subtitle-2 font-weight-bold">URL Parameters</h3>
+            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openUrlParamDialog">
+              <v-icon size="small">mdi-plus</v-icon>
+              Add
+            </v-btn>
+          </div>
+          <div v-if="Object.keys(newActionConfig.urlParams).length > 0" class="mb-2">
+            <v-chip-group>
+              <v-chip
+                v-for="(param, index) in Object.entries(newActionConfig.urlParams)"
+                :key="`param-${index}`"
+                closable
+                size="x-small"
+                class="m-1"
+                @click:close="removeUrlParam(param[0])"
+              >
+                {{ param[0] }}: {{ param[1] }}
+              </v-chip>
+            </v-chip-group>
+          </div>
+
+          <div class="d-flex align-center justify-space-between">
+            <h3 class="text-subtitle-2 font-weight-bold">Headers</h3>
+            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openHeaderDialog">
+              <v-icon size="small">mdi-plus</v-icon>
+              Add
+            </v-btn>
+          </div>
+          <div v-if="Object.keys(newActionConfig.headers).length > 0" class="mb-2">
+            <v-chip-group>
+              <v-chip
+                v-for="(header, index) in Object.entries(newActionConfig.headers)"
+                :key="`header-${index}`"
+                closable
+                size="x-small"
+                class="m-1"
+                @click:close="removeHeader(header[0])"
+              >
+                {{ header[0] }}: {{ header[1] }}
+              </v-chip>
+            </v-chip-group>
+          </div>
+
+          <div class="d-flex align-center justify-space-between">
+            <h3 class="text-subtitle-2 font-weight-bold">JSON Body</h3>
+            <v-btn variant="text" class="px-2 py-1" density="compact" @click="openJsonDialog">
+              <v-icon size="small">mdi-code-json</v-icon>
+              Edit
+            </v-btn>
+          </div>
+        </v-form>
+      </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 color="white" variant="text" @click="closeActionDialog">Cancel</v-btn>
+          <div class="flex gap-x-10">
+            <v-btn variant="text" @click="resetNewAction">Reset</v-btn>
+            <v-btn color="primary" :disabled="!isFormValid" variant="text" @click="saveActionConfig">
+              {{ editMode ? 'Save' : 'Create' }}
+            </v-btn>
+          </div>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- URL Parameter Dialog -->
+  <v-dialog v-model="urlParamDialog.show" max-width="400px">
+    <v-card class="rounded-lg px-6 py-2" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 text-center font-weight-bold pb-6">Add URL parameter</v-card-title>
+      <v-card-text class="pa-2">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="addUrlParameter">
+          <v-text-field
+            v-model="urlParamDialog.key"
+            label="Parameter Key"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+          <v-select
+            v-model="urlParamDialog.valueType"
+            :items="paramValueOptions"
+            label="Parameter Value"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-select>
+          <v-text-field
+            v-if="urlParamDialog.valueType === 'fixed'"
+            v-model="urlParamDialog.fixedValue"
+            label="Fixed Value"
+            required
+            variant="outlined"
+            density="compact"
+            placeholder="Non-dynamic value."
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-divider class="m-2" />
+      <v-card-actions class="pa-2 -mb-1">
+        <div class="flex w-full justify-between">
+          <v-btn color="white" variant="text" size="small" @click="closeUrlParamDialog">Cancel</v-btn>
+          <v-btn color="white" size="small" @click="saveUrlParameter()"> Save </v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- Header Dialog -->
+  <v-dialog v-model="headerDialog.show" max-width="400px">
+    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pb-4 text-center">Add header</v-card-title>
+      <v-card-text class="pa-4">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="addHeader">
+          <v-text-field
+            v-model="headerDialog.key"
+            label="Header Key"
+            required
+            variant="outlined"
+            :error-messages="headerDialog.error"
+            density="compact"
+          ></v-text-field>
+          <v-text-field
+            v-model="headerDialog.value"
+            label="Header Value"
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-divider class="m-2" />
+      <v-card-actions class="pa-2 -mb-1">
+        <div class="flex w-full justify-between">
+          <v-btn color="white" variant="text" size="small" @click="closeHeaderDialog">Cancel</v-btn>
+          <v-btn color="white" size="small" @click="addHeader">Save</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- JSON Body Dialog -->
+  <v-dialog v-model="bodyDialog.show" max-width="520px">
+    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pa-2 text-center">Edit JSON body template</v-card-title>
+      <v-card-text class="px-6">
+        <v-form class="d-flex flex-column gap-2" @submit.prevent="saveJsonBody">
+          <v-textarea
+            v-model="bodyDialog.bodyText"
+            label="JSON Body Template"
+            hint="Use {{ inputId }} for dynamic values."
+            persistent-hint
+            :error-messages="bodyDialog.error"
+            rows="12"
+            variant="outlined"
+            density="compact"
+            @update:model-value="validateJsonTemplateForDialog"
+          ></v-textarea>
+        </v-form>
+      </v-card-text>
+      <v-divider class="m-2" />
+      <v-card-actions class="pa-2 -mb-1">
+        <div class="flex w-full justify-between">
+          <v-btn color="white" variant="text" @click="closeJsonDialog">Cancel</v-btn>
+          <v-btn color="white" :disabled="!bodyDialog.isValid" @click="saveJsonBody">Save</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import { openSnackbar } from '@/composables/snackbar'
+import { getAllCockpitActionVariablesInfo } from '@/libs/actions/data-lake'
+import {
+  availableHttpRequestMethods,
+  deleteHttpRequestActionConfig,
+  getAllHttpRequestActionConfigs,
+  getHttpRequestActionConfig,
+  HttpRequestActionConfig,
+  HttpRequestMethod,
+  registerHttpRequestActionConfig,
+} from '@/libs/actions/http-request'
+import { executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+import BaseConfigurationView from './BaseConfigurationView.vue'
+
+const interfaceStore = useAppInterfaceStore()
+
+const actionsConfigs = reactive<Record<string, HttpRequestActionConfig>>({})
+const newActionConfig = ref<HttpRequestActionConfig>({
+  name: '',
+  method: HttpRequestMethod.GET,
+  url: '',
+  headers: {},
+  urlParams: {},
+  body: '',
+})
+
+const bodyInputError = ref('')
+
+const urlParamDialog = ref({
+  show: false,
+  key: '',
+  valueType: 'fixed',
+  fixedValue: '',
+})
+
+const bodyDialog = ref({
+  show: false,
+  bodyText: '',
+  error: '',
+  isValid: false,
+})
+
+const headerDialog = ref({
+  show: false,
+  key: '',
+  value: '',
+  error: '',
+})
+
+const paramValueOptions = computed(() => {
+  const options = [{ title: 'Fixed (specify below)', value: 'fixed' }]
+  const availableInputParameters = getAllCockpitActionVariablesInfo()
+  Object.values(availableInputParameters).forEach((parameter) => {
+    options.push({ title: parameter.id, value: parameter.id })
+  })
+  return options
+})
+
+const isFormValid = computed(() => {
+  return isValidRequestConfig(newActionConfig.value)
+})
+
+const isValidRequestConfig = (config: HttpRequestActionConfig): boolean => {
+  return (
+    !!config.name &&
+    !!config.method &&
+    !!config.url &&
+    isValidUrlParams(config.urlParams) &&
+    isValidHeaders(config.headers).isValid &&
+    isValidJsonTemplate(config.body)
+  )
+}
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const validateJsonTemplate = (template: string): { isValid: boolean; error: string } => {
+  if (!template.trim()) {
+    return { isValid: true, error: '' }
+  }
+
+  // Check if all placeholders are properly formatted
+  const placeholderRegex = /\{\{\s*([^}]+)\s*\}\}/g
+  const placeholders = template.match(placeholderRegex)
+  if (placeholders) {
+    const availableInputs = paramValueOptions.value.map((option) => option.value).filter((option) => option !== 'fixed')
+    for (const placeholder of placeholders) {
+      const inputName = placeholder.match(/\{\{\s*([^}]+)\s*\}\}/)?.[1]?.trim()
+      if (!inputName) {
+        return { isValid: false, error: `Invalid placeholder format: ${placeholder}` }
+      }
+      if (!availableInputs.includes(inputName)) {
+        return {
+          isValid: false,
+          error: `Invalid input name in placeholder: ${inputName}. Available inputs are: ${availableInputs.join(', ')}`,
+        }
+      }
+    }
+  }
+
+  // Replace placeholders with a valid JSON value temporarily
+  const tempTemplate = template.replace(placeholderRegex, 'PLACEHOLDER')
+
+  try {
+    const parsed = JSON.parse(tempTemplate)
+    if (typeof parsed !== 'object' || parsed === null) {
+      return { isValid: false, error: 'Invalid JSON structure' }
+    }
+
+    return { isValid: true, error: '' }
+  } catch (error) {
+    return { isValid: false, error: 'Invalid JSON: ' + (error as Error).message }
+  }
+}
+
+const isValidJsonTemplate = (template: string): boolean => {
+  const { isValid } = validateJsonTemplate(template)
+  return isValid
+}
+
+const validateJsonTemplateForDialog = (template: string): void => {
+  const { isValid, error } = validateJsonTemplate(template)
+  bodyDialog.value.error = error
+  bodyDialog.value.isValid = isValid
+}
+
+const isValidUrlParams = (params: Record<string, string>): boolean => {
+  return Object.entries(params).every(([key, value]) => {
+    if (value.startsWith('{{') && value.endsWith('}}')) {
+      const parsedValue = value.replace('{{', '').replace('}}', '').trim()
+      return key !== '' && value !== '' && paramValueOptions.value.map((option) => option.value).includes(parsedValue)
+    }
+    return key !== '' && value !== ''
+  })
+}
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const isValidHeaders = (headers: Record<string, string>): { isValid: boolean; error: string } => {
+  for (const [key, value] of Object.entries(headers)) {
+    // Header keys should be non-empty and contain valid characters
+    const validKeyRegex = /^[a-zA-Z0-9!#$%&'*+-.^_`|~]+$/
+    if (!key || !validKeyRegex.test(key)) {
+      const error = 'Invalid header key. Use only letters, numbers, and common punctuation. No spaces allowed.'
+      return { isValid: false, error }
+    }
+
+    // Header values can be empty, but if not, they should not contain newlines
+    if (value && /[\r\n]/.test(value)) {
+      return { isValid: false, error: 'Header value cannot contain newlines.' }
+    }
+  }
+  return { isValid: true, error: '' }
+}
+
+const openUrlParamDialog = (): void => {
+  urlParamDialog.value = {
+    show: true,
+    key: '',
+    valueType: 'fixed',
+    fixedValue: '',
+  }
+}
+
+const closeUrlParamDialog = (): void => {
+  urlParamDialog.value.show = false
+}
+
+const addUrlParameter = (): void => {
+  const parsedValue = `{{ ${urlParamDialog.value.valueType} }}`
+  const value = urlParamDialog.value.valueType === 'fixed' ? urlParamDialog.value.fixedValue : parsedValue
+  newActionConfig.value.urlParams[urlParamDialog.value.key] = value
+  closeUrlParamDialog()
+}
+
+const openJsonDialog = (): void => {
+  bodyDialog.value = {
+    show: true,
+    bodyText: newActionConfig.value.body,
+    error: '',
+    isValid: isValidJsonTemplate(newActionConfig.value.body),
+  }
+}
+
+const closeJsonDialog = (): void => {
+  bodyDialog.value.show = false
+}
+
+const saveJsonBody = (): void => {
+  if (bodyDialog.value.isValid) {
+    newActionConfig.value.body = bodyDialog.value.bodyText
+    closeJsonDialog()
+  }
+}
+
+const removeUrlParam = (key: string): void => {
+  delete newActionConfig.value.urlParams[key]
+}
+
+const openHeaderDialog = (): void => {
+  headerDialog.value = {
+    show: true,
+    key: '',
+    value: '',
+    error: '',
+  }
+}
+
+const closeHeaderDialog = (): void => {
+  headerDialog.value.show = false
+  headerDialog.value.error = ''
+}
+
+const addHeader = (): void => {
+  const { isValid, error } = isValidHeaders({ [headerDialog.value.key]: headerDialog.value.value })
+  if (isValid) {
+    newActionConfig.value.headers[headerDialog.value.key] = headerDialog.value.value
+    closeHeaderDialog()
+  } else {
+    headerDialog.value.error = error
+  }
+}
+
+const removeHeader = (key: string): void => {
+  delete newActionConfig.value.headers[key]
+}
+
+const editMode = ref(false)
+
+const editActionConfig = (id: string): void => {
+  editMode.value = true
+  newActionConfig.value = JSON.parse(JSON.stringify(actionsConfigs[id])) // Deep copy
+}
+
+const createActionConfig = (): void => {
+  editMode.value = false
+  registerHttpRequestActionConfig(newActionConfig.value)
+  loadSavedActions()
+  resetNewAction()
+}
+
+const saveActionConfig = (): void => {
+  createActionConfig()
+  closeActionDialog()
+}
+
+const resetNewAction = (): void => {
+  newActionConfig.value = {
+    name: '',
+    method: HttpRequestMethod.GET,
+    url: '',
+    headers: {},
+    urlParams: {},
+    body: '',
+  }
+  bodyInputError.value = ''
+  editMode.value = false
+}
+
+const allSavedActionConfigs = computed(() => {
+  return Object.entries(actionsConfigs).map(([id, action]) => ({ id, ...action }))
+})
+
+const deleteActionConfig = (id: string): void => {
+  delete actionsConfigs[id]
+  deleteHttpRequestActionConfig(id)
+  loadSavedActions()
+}
+
+const loadSavedActions = (): void => {
+  Object.assign(actionsConfigs, getAllHttpRequestActionConfigs())
+}
+
+const runAction = (id: string): void => {
+  executeActionCallback(id)
+}
+
+const exportAction = (id: string): void => {
+  const action = getHttpRequestActionConfig(id)
+  if (!action) {
+    console.error('Action not found')
+    return
+  }
+  const json = JSON.stringify(action, null, 2)
+  const blob = new Blob([json], { type: 'application/json' })
+  const url = window.URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.style.display = 'none'
+  a.href = url
+  a.download = `${id}.json`
+  document.body.appendChild(a)
+  a.click()
+  window.URL.revokeObjectURL(url)
+  a.remove()
+}
+
+const importAction = (): void => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = 'application/json'
+  input.onchange = (event) => {
+    const file = (event.target as HTMLInputElement).files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        try {
+          const json = JSON.parse(e.target?.result as string)
+
+          if (!isValidRequestConfig(json)) {
+            throw new Error('Invalid request configuration file.')
+          }
+
+          registerHttpRequestActionConfig(json as HttpRequestActionConfig)
+          loadSavedActions()
+        } catch (error) {
+          openSnackbar({ message: `Cannot import action. ${error}`, variant: 'error', duration: 5000 })
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+  input.click()
+  input.remove()
+}
+
+const actionDialog = ref({
+  show: false,
+})
+
+const closeActionDialog = (): void => {
+  actionDialog.value.show = false
+  resetNewAction()
+}
+
+const openActionEditDialog = (id: string): void => {
+  editActionConfig(id)
+  actionDialog.value.show = true
+}
+
+const openNewActionDialog = (): void => {
+  resetNewAction()
+  actionDialog.value.show = true
+}
+
+const saveUrlParameter = (): void => {
+  addUrlParameter()
+  closeUrlParamDialog()
+}
+
+onMounted(() => {
+  loadSavedActions()
+})
+</script>
+
+<style scoped>
+.v-data-table ::v-deep tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+</style>