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..00f4d9815
--- /dev/null
+++ b/src/libs/actions/data-lake.ts
@@ -0,0 +1,107 @@
+/**
+ * A parameter for a Cockpit action
+ * @param { string } name - The name of the parameter
+ * @param { 'string' | 'number' | 'boolean' } type - The type of the parameter (string, number or boolean)
+ * @param { string } description - What the parameter does or means
+ * @param { string | number | boolean } defaultValue - The default value of the parameter
+ * @param { boolean } required - Whether the parameter is required or not
+ * @param { (string | number)[]? } options - The options for the parameter (only if type is string or number).
+ * @param { number? } min - The minimum value for the parameter (only if type is number).
+ * @param { number? } max - The maximum value for the parameter (only if type is number).
+ */
+class CockpitActionParameter {
+  id: string
+  name: string
+  type: 'string' | 'number' | 'boolean'
+  required: boolean
+  description?: string
+  defaultValue?: string | number | boolean
+  options?: (string | number)[]
+  min?: number
+  max?: number
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor(
+    id: string,
+    name: string,
+    type: 'string' | 'number' | 'boolean',
+    required: boolean,
+    description?: string,
+    defaultValue?: string | number | boolean,
+    options?: (string | number)[],
+    min?: number,
+    max?: number
+  ) {
+    this.id = id
+    this.name = name
+    this.type = type
+    this.description = description
+    this.defaultValue = defaultValue
+    this.required = required
+    this.options = options
+    this.min = min
+    this.max = max
+  }
+}
+
+const cockpitActionParametersInfo: Record<string, CockpitActionParameter> = {}
+export const cockpitActionParametersData: Record<string, string | number | boolean> = {}
+
+export const getCockpitActionParametersInfo = (id: string): CockpitActionParameter | undefined => {
+  return cockpitActionParametersInfo[id]
+}
+
+export const getAllCockpitActionParametersInfo = (): Record<string, CockpitActionParameter> => {
+  return cockpitActionParametersInfo
+}
+
+export const getCockpitActionParameterInfo = (id: string): CockpitActionParameter | undefined => {
+  return cockpitActionParametersInfo[id]
+}
+
+export const setCockpitActionParameterInfo = (id: string, parameter: CockpitActionParameter): void => {
+  cockpitActionParametersInfo[id] = parameter
+}
+
+export const getCockpitActionParameterData = (id: string): string | number | boolean | undefined => {
+  return cockpitActionParametersData[id]
+}
+
+export const setCockpitActionParameterData = (id: string, data: string | number | boolean): void => {
+  cockpitActionParametersData[id] = data
+}
+
+const fakeRovNameInfo = new CockpitActionParameter(
+  'fakeRovName',
+  'Placeholder Parameter One',
+  'string',
+  true,
+  'This is a placeholder parameter for the first parameter'
+)
+
+const fakeRovAgeInitialDivesInfo = new CockpitActionParameter(
+  'fakeRovAgeInitialDives',
+  'Placeholder Parameter Two',
+  'number',
+  true,
+  'This is a placeholder parameter for the second parameter',
+  undefined,
+  undefined,
+  undefined,
+  0
+)
+
+const placeholderParameterThreeInfo = new CockpitActionParameter(
+  'placeholderParameterThree',
+  'Placeholder Parameter Three',
+  'boolean',
+  true,
+  'This is a placeholder parameter for the third parameter'
+)
+
+setCockpitActionParameterInfo(fakeRovNameInfo.id, fakeRovNameInfo)
+setCockpitActionParameterInfo(fakeRovAgeInitialDivesInfo.id, fakeRovAgeInitialDivesInfo)
+setCockpitActionParameterInfo(placeholderParameterThreeInfo.id, placeholderParameterThreeInfo)
+
+setCockpitActionParameterData(fakeRovNameInfo.id, 'John Doe')
+setCockpitActionParameterData(fakeRovAgeInitialDivesInfo.id, 5)
+setCockpitActionParameterData(placeholderParameterThreeInfo.id, true)
diff --git a/src/libs/actions/http-request.ts b/src/libs/actions/http-request.ts
new file mode 100644
index 000000000..80205448c
--- /dev/null
+++ b/src/libs/actions/http-request.ts
@@ -0,0 +1,150 @@
+import {
+  CockpitAction,
+  CockpitActionsFunction,
+  registerActionCallback,
+  registerNewAction,
+} from '../joystick/protocols/cockpit-actions'
+import { getCockpitActionParameterData } from './data-lake'
+
+/**
+ * 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 = `http-request-action (${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 => {
+  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 = getCockpitActionParameterData(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 = getCockpitActionParameterData(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 60fd2aa27..f76d54981 100644
--- a/src/libs/joystick/protocols/cockpit-actions.ts
+++ b/src/libs/joystick/protocols/cockpit-actions.ts
@@ -23,7 +23,7 @@ export enum CockpitActionsFunction {
  * An action to be performed by Cockpit itself
  */
 export class CockpitAction implements ProtocolAction {
-  id: CockpitActionsFunction | string
+  id: CockpitActionsFunction
   name: string
   readonly protocol = JoystickProtocol.CockpitAction
 
@@ -34,8 +34,8 @@ export class CockpitAction implements ProtocolAction {
   }
 }
 
-// Available actions
-export const availableCockpitActions: { [key in CockpitActionsFunction | string]: 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'),
@@ -68,10 +68,11 @@ interface CallbackEntry {
  * Responsible for routing cockpit actions
  */
 export class CockpitActionsManager {
+  availableActions: { [key in CockpitActionsFunction]: CockpitAction } = { ...predefinedCockpitActions }
   actionsCallbacks: Record<string, CallbackEntry> = {}
 
   registerNewAction = (action: CockpitAction): void => {
-    availableCockpitActions[action.id] = action
+    this.availableActions[action.id] = action
   }
 
   registerActionCallback = (action: CockpitAction, callback: CockpitActionCallback): string => {
@@ -101,6 +102,11 @@ export class CockpitActionsManager {
 
 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 registerActionCallback = (action: CockpitAction, callback: CockpitActionCallback): string => {
   return cockpitActionsManager.registerActionCallback(action, callback)
 }
@@ -112,3 +118,5 @@ export const unregisterActionCallback = (id: string): void => {
 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 486955679..5e7de41cf 100644
--- a/src/stores/controller.ts
+++ b/src/stores/controller.ts
@@ -49,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>(
@@ -400,6 +400,11 @@ export const useControllerStore = defineStore('controller', () => {
     }
   })
 
+  setInterval(() => {
+    availableButtonActions.value = allAvailableButtons()
+    availableAxesActions.value = allAvailableAxes()
+  }, 1000)
+
   return {
     registerControllerUpdateCallback,
     enableForwarding,
diff --git a/src/views/ConfigurationActionsView.vue b/src/views/ConfigurationActionsView.vue
new file mode 100644
index 000000000..2c6ea6e5c
--- /dev/null
+++ b/src/views/ConfigurationActionsView.vue
@@ -0,0 +1,576 @@
+<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]"
+        :class="interfaceStore.isOnSmallScreen ? 'max-w-[80vw] max-h-[90vh]' : 'max-w-[680px] max-h-[85vh]'"
+      >
+        <ExpansiblePanel no-top-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-[600px]">
+              <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-[260px]">
+                        <p class="whitespace-nowrap overflow-hidden text-overflow-ellipsis">{{ item.url }}</p>
+                      </div>
+                    </td>
+                    <td class="w-[120px] 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="openActionDialog(); editActionConfig(item.id)"
+                        />
+                        <v-btn
+                          variant="outlined"
+                          class="rounded-full mx-1"
+                          color="error"
+                          icon="mdi-delete"
+                          size="x-small"
+                          @click="deleteActionConfig(item.id)"
+                        >
+                          <v-icon>mdi-delete</v-icon>
+                        </v-btn>
+                      </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">
+                          <v-btn
+                            variant="outlined"
+                            class="rounded-lg"
+                            @click="openActionDialog(); resetNewAction()"
+                          >
+                            <v-icon start>mdi-plus</v-icon>
+                            New HTTP 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 p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pa-2">{{ editMode ? 'Edit Action' : 'Create New Action' }}</v-card-title>
+      <v-card-text class="pa-2">
+        <v-form @submit.prevent="createActionConfig" class="d-flex flex-column gap-2">
+          <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" @click="openUrlParamDialog" class="px-2 py-1" density="compact">
+              <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
+                @click:close="removeUrlParam(param[0])"
+                size="x-small"
+                class="ma-1"
+              >
+                {{ 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" @click="openHeaderDialog" class="px-2 py-1" density="compact">
+              <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
+                @click:close="removeHeader(header[0])"
+                size="x-small"
+                class="ma-1"
+              >
+                {{ 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" @click="openJsonDialog" class="px-2 py-1" density="compact">
+              <v-icon size="small">mdi-code-json</v-icon>
+              Edit
+            </v-btn>
+          </div>
+        </v-form>
+      </v-card-text>
+      <v-card-actions class="pa-2">
+        <v-spacer></v-spacer>
+        <v-btn color="primary" variant="text" @click="closeActionDialog" size="small">Cancel</v-btn>
+        <v-btn
+          color="primary"
+          :disabled="!isFormValid"
+          @click="createActionConfig(); closeActionDialog()"
+          size="small"
+        >
+          {{ editMode ? 'Save' : 'Create' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- URL Parameter Dialog -->
+  <v-dialog v-model="urlParamDialog.show" max-width="400px">
+    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pa-2">Add URL Parameter</v-card-title>
+      <v-card-text class="pa-2">
+        <v-form @submit.prevent="addUrlParameter" class="d-flex flex-column gap-2">
+          <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 === 'hardcoded'"
+            v-model="urlParamDialog.hardcodedValue"
+            label="Hardcoded Value"
+            required
+            variant="outlined"
+            density="compact"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-card-actions class="pa-2">
+        <v-spacer></v-spacer>
+        <v-btn color="primary" variant="text" @click="closeUrlParamDialog" size="small">Cancel</v-btn>
+        <v-btn
+          color="primary"
+          @click="addUrlParameter(); closeUrlParamDialog()"
+          size="small"
+        >
+          Save
+        </v-btn>
+      </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 pa-2">Add Header</v-card-title>
+      <v-card-text class="pa-2">
+        <v-form @submit.prevent="addHeader" class="d-flex flex-column gap-2">
+          <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-card-actions class="pa-2">
+        <v-spacer></v-spacer>
+        <v-btn color="primary" variant="text" @click="closeHeaderDialog" size="small">Cancel</v-btn>
+        <v-btn color="primary" @click="addHeader" size="small">Save</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- JSON Body Dialog -->
+  <v-dialog v-model="bodyDialog.show" max-width="400px">
+    <v-card class="rounded-lg p-3" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold pa-2">Edit JSON Body Template</v-card-title>
+      <v-card-text class="pa-2">
+        <v-form @submit.prevent="saveJsonBody" class="d-flex flex-column gap-2">
+          <v-textarea
+            v-model="bodyDialog.bodyText"
+            label="JSON Body Template"
+            hint="Use {{ anyInputName }} for dynamic values"
+            persistent-hint
+            :error-messages="bodyDialog.error"
+            rows="10"
+            @update:model-value="validateJsonTemplateForDialog"
+            variant="outlined"
+            density="compact"
+          ></v-textarea>
+        </v-form>
+      </v-card-text>
+      <v-card-actions class="pa-2">
+        <v-spacer></v-spacer>
+        <v-btn color="primary" variant="text" @click="closeJsonDialog" size="small">Cancel</v-btn>
+        <v-btn color="primary" :disabled="!bodyDialog.isValid" @click="saveJsonBody" size="small">Save</v-btn>
+      </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 { getAllCockpitActionParametersInfo } from '@/libs/actions/data-lake'
+import {
+  availableHttpRequestMethods,
+  deleteHttpRequestActionConfig,
+  getAllHttpRequestActionConfigs,
+  HttpRequestActionConfig,
+  HttpRequestMethod,
+  registerHttpRequestActionConfig,
+} from '@/libs/actions/http-request'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+import BaseConfigurationView from './BaseConfigurationView.vue'
+import { watch } from '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: 'hardcoded',
+  hardcodedValue: '',
+})
+
+const bodyDialog = ref({
+  show: false,
+  bodyText: '',
+  error: '',
+  isValid: false,
+})
+
+const headerDialog = ref({
+  show: false,
+  key: '',
+  value: '',
+  error: '',
+})
+
+const paramValueOptions = computed(() => {
+  const options = [{ title: 'Hardcoded value', value: 'hardcoded' }]
+  const availableInputParameters = getAllCockpitActionParametersInfo()
+  Object.values(availableInputParameters).forEach((parameter) => {
+    options.push({ title: parameter.id, value: parameter.id })
+  })
+  return options
+})
+
+const isFormValid = computed(() => {
+  return (
+    newActionConfig.value.name &&
+    newActionConfig.value.method &&
+    newActionConfig.value.url &&
+    isValidUrlParams(newActionConfig.value.urlParams) &&
+    isValidHeaders(newActionConfig.value.headers) &&
+    isValidJsonTemplate(newActionConfig.value.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 !== 'hardcoded')
+    for (const placeholder of placeholders) {
+      const inputName = placeholder.match(/\{\{\s*([^}]+)\s*\}\}/)?.[1]?.trim()
+      console.log('inputName', inputName)
+      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: 'hardcoded',
+    hardcodedValue: '',
+  }
+}
+
+const closeUrlParamDialog = (): void => {
+  urlParamDialog.value.show = false
+}
+
+const addUrlParameter = (): void => {
+  const parsedValue = `{{ ${urlParamDialog.value.valueType} }}`
+  const value = urlParamDialog.value.valueType === 'hardcoded' ? urlParamDialog.value.hardcodedValue : 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 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 }))
+})
+
+watch(actionsConfigs, () => {
+  console.log('actionsConfigs', actionsConfigs)
+  console.log('allSavedActionConfigs', allSavedActionConfigs.value)
+})
+
+const discardChanges = (): void => {
+  resetNewAction()
+}
+
+const deleteActionConfig = (id: string): void => {
+  console.log('deleteActionConfig', id)
+  delete actionsConfigs[id]
+  deleteHttpRequestActionConfig(id)
+  loadSavedActions()
+}
+
+const loadSavedActions = (): void => {
+  Object.assign(actionsConfigs, getAllHttpRequestActionConfigs())
+}
+
+const actionDialog = ref({
+  show: false,
+})
+
+const openActionDialog = (): void => {
+  actionDialog.value.show = true
+}
+
+const closeActionDialog = (): void => {
+  actionDialog.value.show = false
+  resetNewAction()
+}
+
+onMounted(() => {
+  loadSavedActions()
+})
+</script>
+
+<style scoped>
+.v-data-table ::v-deep tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}
+</style>