diff --git a/.github/workflows/pre-merge.yml b/.github/workflows/pre-merge.yml
index 05804beac..416287fea 100644
--- a/.github/workflows/pre-merge.yml
+++ b/.github/workflows/pre-merge.yml
@@ -5,6 +5,7 @@ on:
     types: [opened, synchronize, reopened, ready_for_review]
     branches:
       - dev
+      - main
   push:
     branches:
       - dev
@@ -63,7 +64,7 @@ jobs:
         env:
           PROD_CYPRESS_EMAIL: ${{ secrets.PROD_CYPRESS_EMAIL }}
           PROD_CYPRESS_PASSWORD: ${{ secrets.PROD_CYPRESS_PASSWORD }}
-          VITE_ENVIRONMENT: "production"
+          VITE_ENVIRONMENT: 'production'
         with:
           build: yarn build
           start: yarn dev --logLevel=warn
@@ -162,25 +163,25 @@ jobs:
     needs: [run-tests, download_and_merge]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-        
-    - uses: actions/download-artifact@v4
-      with:
-        name: coverage_unit_report
-        
-    - uses: actions/download-artifact@v4
-      with:
-        name: coverage_e2e_report
-        
-    - name: Extract E2E Coverage Report
-      run: |
-        unzip coverage.zip -d coverage_e2e
-        pwd
-        find ./
-        
-    - name: SonarCloud Scan
-      uses: sonarsource/sonarcloud-github-action@v2.3.0
-      env:
-        SONAR_TOKEN: ${{ secrets.SONAR_CLOUD_TOKEN }}
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: coverage_unit_report
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: coverage_e2e_report
+
+      - name: Extract E2E Coverage Report
+        run: |
+          unzip coverage.zip -d coverage_e2e
+          pwd
+          find ./
+
+      - name: SonarCloud Scan
+        uses: sonarsource/sonarcloud-github-action@v2.3.0
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_CLOUD_TOKEN }}
diff --git a/src/helpers/extract-api-error.js b/src/helpers/extract-api-error.js
new file mode 100644
index 000000000..04553710e
--- /dev/null
+++ b/src/helpers/extract-api-error.js
@@ -0,0 +1,34 @@
+/**
+ * Extracts the first error message from an API response.
+ * For generic errors, returns the detail message.
+ * For field validation errors, returns "field: error message".
+ *
+ * @param {Object} httpResponse - The HTTP response object.
+ * @param {Object} httpResponse.body - The response body.
+ * @returns {string} The formatted error message.
+ */
+export const extractApiError = (httpResponse) => {
+  const errorBody = httpResponse.body
+
+  if (errorBody.detail) {
+    return errorBody.detail
+  }
+
+  const findFirstError = (obj) => {
+    for (const [key, value] of Object.entries(obj)) {
+      if (Array.isArray(value)) {
+        return `${key}: ${value[0]}`
+      }
+      if (typeof value === 'object' && value !== null) {
+        const nestedError = findFirstError(value)
+        if (nestedError) {
+          const cleanFieldName = nestedError.replace(/^[^:]+\./, '')
+          return cleanFieldName
+        }
+      }
+    }
+    return null
+  }
+
+  return findFirstError(errorBody) || 'Unknown error occurred'
+}
diff --git a/src/router/routes/domains-routes/index.js b/src/router/routes/domains-routes/index.js
index df93394fd..685cc3d99 100644
--- a/src/router/routes/domains-routes/index.js
+++ b/src/router/routes/domains-routes/index.js
@@ -3,6 +3,7 @@ import * as DomainServices from '@/services/domains-services'
 import * as DomainServicesV4 from '@/services/domains-services/v4'
 import * as DigitalCertificatesServices from '@/services/digital-certificates-services'
 import * as EdgeApplicationServices from '@/services/edge-application-services'
+import * as EdgeFirewallServicesV4 from '@/services/edge-firewall-services/v4'
 
 /** @type {import('vue-router').RouteRecordRaw} */
 export const domainsRoutes = {
@@ -36,6 +37,8 @@ export const domainsRoutes = {
         createDomainService: DomainServices.createDomainService,
         listDigitalCertificatesService: DigitalCertificatesServices.listDigitalCertificatesService,
         listEdgeApplicationsService: EdgeApplicationServices.listEdgeApplicationsService,
+        listEdgeFirewallService: EdgeFirewallServicesV4.listEdgeFirewallService,
+        loadEdgeFirewallService: EdgeFirewallServicesV4.loadEdgeFirewallService,
         clipboardWrite: Helpers.clipboardWrite
       },
       meta: {
@@ -60,6 +63,8 @@ export const domainsRoutes = {
         listDigitalCertificatesService: DigitalCertificatesServices.listDigitalCertificatesService,
         listEdgeApplicationsService: EdgeApplicationServices.listEdgeApplicationsService,
         loadDomainService: DomainServices.loadDomainService,
+        listEdgeFirewallService: EdgeFirewallServicesV4.listEdgeFirewallService,
+        loadEdgeFirewallService: EdgeFirewallServicesV4.loadEdgeFirewallService,
         updatedRedirect: 'list-domains',
         clipboardWrite: Helpers.clipboardWrite
       },
diff --git a/src/services/edge-firewall-services/v4/index.js b/src/services/edge-firewall-services/v4/index.js
index cb42c72aa..0cafe796c 100644
--- a/src/services/edge-firewall-services/v4/index.js
+++ b/src/services/edge-firewall-services/v4/index.js
@@ -1,5 +1,6 @@
 import { listEdgeFirewallService } from './list-edge-firewall-service'
 import { cloneEdgeFirewallService } from './clone-edge-firewall-service'
+import { loadEdgeFirewallService } from './load-edge-firewall-service'
 
 /**
  * @typedef {Object} ExportedServicesType - The type of the exported services
@@ -9,4 +10,4 @@ import { cloneEdgeFirewallService } from './clone-edge-firewall-service'
 /**
  * @type {ExportedServicesType}
  */
-export { listEdgeFirewallService, cloneEdgeFirewallService }
+export { listEdgeFirewallService, cloneEdgeFirewallService, loadEdgeFirewallService }
diff --git a/src/services/edge-firewall-services/v4/load-edge-firewall-service.js b/src/services/edge-firewall-services/v4/load-edge-firewall-service.js
new file mode 100644
index 000000000..eba4efdbe
--- /dev/null
+++ b/src/services/edge-firewall-services/v4/load-edge-firewall-service.js
@@ -0,0 +1,38 @@
+import { extractApiError } from '@/helpers/extract-api-error'
+import { AxiosHttpClientAdapter, parseHttpResponse } from '@/services/axios/AxiosHttpClientAdapter'
+import { makeEdgeFirewallBaseUrl } from './make-edge-firewall-base-url'
+
+export const loadEdgeFirewallService = async ({ id }) => {
+  let httpResponse = await AxiosHttpClientAdapter.request({
+    url: `${makeEdgeFirewallBaseUrl()}/${id}`,
+    method: 'GET'
+  })
+
+  httpResponse = adapt(httpResponse)
+
+  return parseHttpResponse(httpResponse)
+}
+
+const adapt = ({ body, statusCode }) => {
+  if (statusCode !== 200) {
+    throw new Error(extractApiError({ body })).message
+  }
+
+  const payload = body.data
+  const parsedBody = {
+    id: payload.id,
+    name: payload.name,
+    isActive: payload.active,
+    edgeFunctionsEnabled: payload.modules.edge_functions_enabled,
+    networkProtectionEnabled: payload.modules.network_protection_enabled,
+    wafEnabled: payload.modules.waf_enabled,
+    debugRules: payload.debug_rules,
+    domains: payload.domains || [],
+    ddosProtectionUnmetered: true
+  }
+
+  return {
+    body: parsedBody,
+    statusCode
+  }
+}
diff --git a/src/templates/form-fields-inputs/fieldDropdownLazyLoader.vue b/src/templates/form-fields-inputs/fieldDropdownLazyLoader.vue
new file mode 100644
index 000000000..16d7f2df6
--- /dev/null
+++ b/src/templates/form-fields-inputs/fieldDropdownLazyLoader.vue
@@ -0,0 +1,364 @@
+<template>
+  <LabelBlock
+    :for="props.name"
+    :label="props.label"
+    :isRequired="$attrs.required"
+    :data-testid="customTestId.label"
+  />
+  <Dropdown
+    appendTo="self"
+    :id="name"
+    :name="props.name"
+    :loading="loading"
+    v-model="inputValue"
+    :options="data"
+    :optionLabel="props.optionLabel"
+    :optionDisabled="props.optionDisabled"
+    :optionValue="props.optionValue"
+    :placeholder="props.placeholder"
+    @change="emitChange"
+    @blur="emitBlur"
+    :class="errorMessage ? 'p-invalid' : ''"
+    v-bind="$attrs"
+    class="w-full"
+    :pt="{
+      filterInput: {
+        class: 'w-full',
+        'data-testid': customTestId.filterInput
+      },
+      trigger: {
+        'data-testid': customTestId.trigger
+      },
+      loadingIcon: {
+        'data-testid': customTestId.loadingIcon
+      }
+    }"
+    :data-testid="customTestId.dropdown"
+    :virtualScrollerOptions="VIRTUAL_SCROLLER_CONFIG"
+  >
+    <template
+      v-if="enableCustomLabel"
+      #value="slotProps"
+    >
+      <span :data-testid="customTestId.value">
+        {{ getLabelBySelectedValue(slotProps.value) }}
+      </span>
+    </template>
+
+    <template #header>
+      <div class="p-2 flex">
+        <div class="p-inputgroup">
+          <InputText
+            type="text"
+            v-model="search"
+            placeholder="Search"
+            class="w-full rounded-r-none"
+            ref="focusSearch"
+            :data-testid="customTestId.search"
+          />
+          <span
+            class="p-inputgroup-addon"
+            @click="searchFilter"
+          >
+            <i class="pi pi-search"></i>
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </Dropdown>
+
+  <small
+    v-if="errorMessage"
+    :data-testid="customTestId.error"
+    class="p-error text-xs font-normal leading-tight"
+  >
+    {{ errorMessage }}
+  </small>
+  <small
+    class="text-xs text-color-secondary font-normal leading-5"
+    :data-testid="customTestId.description"
+    v-if="props.description || hasDescriptionSlot"
+  >
+    <slot name="description">
+      {{ props.description }}
+    </slot>
+  </small>
+</template>
+
+<script setup>
+  import Dropdown from 'primevue/dropdown'
+  import InputText from 'primevue/inputtext'
+  import { useField } from 'vee-validate'
+  import { computed, toRef, useSlots, useAttrs, ref, onMounted, watchEffect, watch } from 'vue'
+  import { watchDebounced } from '@vueuse/core'
+  import LabelBlock from '@/templates/label-block'
+
+  const props = defineProps({
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    optionLabel: {
+      type: String,
+      default: ''
+    },
+    optionValue: {
+      type: String,
+      default: ''
+    },
+    moreOptions: {
+      type: Array,
+      default: null
+    },
+    optionDisabled: {
+      type: [String, Function],
+      default: ''
+    },
+    service: {
+      type: Function,
+      required: true
+    },
+    loadService: {
+      type: Function,
+      required: true
+    },
+    enableWorkaroundLabelToDisabledOptions: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const emit = defineEmits(['onBlur', 'onChange', 'onSelectOption'])
+
+  const PAGE_INCREMENT = 1
+  const PAGE_SIZE = 100
+  const INITIAL_PAGE = 1
+  const SEARCH_DEBOUNCE = 500
+  const SEARCH_MAX_WAIT = 1000
+  const NUMBER_OF_CHARACTERS_MIN_FOR_SEARCH = 3
+  const NUMBER_OF_CHARACTERS_TO_RESET_SEARCH = 0
+
+  const name = toRef(props, 'name')
+  const slots = useSlots()
+  const data = ref([])
+  const loading = ref(false)
+  const totalCount = ref(0)
+  const page = ref(INITIAL_PAGE)
+  const search = ref('')
+  const focusSearch = ref(null)
+
+  onMounted(async () => {
+    await fetchData()
+  })
+
+  const hasDescriptionSlot = !!slots.description
+  const { value: inputValue, errorMessage } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const handleLazyLoad = async (event) => {
+    const { last } = event
+    const numberOfPage = Math.ceil(totalCount.value / PAGE_SIZE)
+    const goRequest = last >= data.value?.length
+
+    if (page.value < numberOfPage && goRequest && !loading.value) {
+      page.value += PAGE_INCREMENT
+      await fetchData(page.value)
+    }
+  }
+
+  const emitBlur = () => {
+    emit('onBlur')
+  }
+
+  const emitChange = () => {
+    const selectedOption = data.value.find(
+      (option) => option[props.optionValue] === inputValue.value
+    )
+
+    emit('onChange', inputValue.value)
+
+    if (selectedOption) {
+      emit('onSelectOption', selectedOption)
+    }
+  }
+
+  /**
+   * Workaround to resolve the issue described in https://github.com/primefaces/primevue/issues/4431
+   * This should be remove from this field component as soon as the
+   * primevue team fixes the issue.
+   * When we select a disabled value, the label  is not showing
+   * @param {*} selectedValue The selected value in the Dropdown component.
+   * @returns {string | null} The selected value if it corresponds to a disabled option, or null otherwise.
+   */
+  const getLabelBySelectedValue = (selectedValue) => {
+    const result = props.options.find((option) => option.value === selectedValue)
+    return result?.label
+  }
+
+  const fetchData = async (currentPage = 1) => {
+    try {
+      loading.value = true
+
+      if (currentPage === INITIAL_PAGE) {
+        data.value = []
+      }
+
+      const response = await props.service({
+        pageSize: PAGE_SIZE,
+        page: currentPage,
+        search: search.value,
+        ordering: 'name'
+      })
+
+      totalCount.value = response.count
+      let results = response.body?.map((item) => {
+        return {
+          [props.optionLabel]: item.name,
+          [props.optionValue]: item.id,
+          ...props?.moreOptions?.reduce(
+            (additionalFields, option) => ({
+              ...additionalFields,
+              [option]: item[option]
+            }),
+            {}
+          )
+        }
+      })
+
+      if (currentPage === INITIAL_PAGE) {
+        data.value = results
+      } else {
+        const uniqueResults = results.filter(
+          (newItem) =>
+            !data.value.some(
+              (existingItem) => existingItem[props.optionValue] === newItem[props.optionValue]
+            )
+        )
+
+        data.value = [...data.value, ...uniqueResults]
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadSelectedValue = async (id) => {
+    if (!id) return
+    try {
+      loading.value = true
+      const results = await props.loadService({ id })
+      if (!results) return
+
+      const newOption = {
+        [props.optionLabel]: results.name,
+        [props.optionValue]: results.id,
+        ...props?.moreOptions?.reduce(
+          (additionalFields, option) => ({
+            ...additionalFields,
+            [option]: results[option]
+          }),
+          {}
+        )
+      }
+
+      const optionExists = data.value.some(
+        (item) => item[props.optionValue] === newOption[props.optionValue]
+      )
+
+      if (!optionExists) {
+        data.value = [newOption, ...data.value]
+      }
+      emitChange()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const searchFilter = () => {
+    page.value = INITIAL_PAGE
+    fetchData()
+  }
+
+  const enableCustomLabel = computed(() => {
+    return props.enableWorkaroundLabelToDisabledOptions && !!inputValue.value
+  })
+  /**
+   * end of primevue workaround
+   */
+
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-dropdown'
+
+    return {
+      label: `${id}__label`,
+      dropdown: `${id}__dropdown`,
+      value: `${id}__value`,
+      description: `${id}__description`,
+      error: `${id}__error-message`,
+      filterInput: `${id}__dropdown-filter-input`,
+      trigger: `${id}__dropdown-trigger`,
+      loadingIcon: `${id}__loading-icon`,
+      search: `${id}__dropdown-search`
+    }
+  })
+
+  watch(
+    () => props.value,
+    (newValue) => {
+      const existitemInList = data.value?.some((item) => item[props.optionValue] === newValue)
+      if (!existitemInList) {
+        loadSelectedValue(newValue)
+      }
+    }
+  )
+
+  watchDebounced(
+    search,
+    () => {
+      if (
+        search.value.length >= NUMBER_OF_CHARACTERS_MIN_FOR_SEARCH ||
+        search.value.length === NUMBER_OF_CHARACTERS_TO_RESET_SEARCH
+      ) {
+        searchFilter()
+      }
+    },
+    { debounce: SEARCH_DEBOUNCE, maxWait: SEARCH_MAX_WAIT }
+  )
+
+  watchEffect(() => {
+    if (focusSearch.value) {
+      focusSearch.value.$el.focus()
+    }
+  })
+
+  const VIRTUAL_SCROLLER_CONFIG = {
+    lazy: true,
+    onLazyLoad: handleLazyLoad,
+    itemSize: 38,
+    showLoader: true,
+    loading
+  }
+</script>
diff --git a/src/views/Domains/CreateView.vue b/src/views/Domains/CreateView.vue
index 806321a10..e319fc7eb 100644
--- a/src/views/Domains/CreateView.vue
+++ b/src/views/Domains/CreateView.vue
@@ -17,12 +17,12 @@
           <FormFieldsCreateDomains
             :digitalCertificates="digitalCertificates"
             :edgeApplicationsData="edgeApplicationsData"
-            :edgeFirewallsData="edgeFirewallsData"
             :isLoadingRequests="isLoadingRequests"
             :isLoadingEdgeFirewalls="isLoadingEdgeFirewalls"
             :updateDigitalCertificates="updateDigitalCertificates"
+            :listEdgeFirewallService="listEdgeFirewallService"
+            :loadEdgeFirewallService="loadEdgeFirewallService"
             @edgeApplicationCreated="handleEdgeApplicationCreated"
-            @edgeFirewallCreated="handleEdgeFirewallCreated"
           />
         </template>
         <template #action-bar="{ onSubmit, onCancel, loading }">
@@ -48,7 +48,6 @@
   import ActionBarTemplate from '@/templates/action-bar-block/action-bar-with-teleport'
   import CopyDomainDialog from './Dialog/CopyDomainDialog.vue'
   import { useRoute, useRouter } from 'vue-router'
-  import { listEdgeFirewallService } from '@/services/edge-firewall-services'
   import { useDialog } from 'primevue/usedialog'
   import * as yup from 'yup'
   import { handleTrackerError } from '@/utils/errorHandlingTracker'
@@ -73,6 +72,14 @@
     listEdgeApplicationsService: {
       type: Function,
       required: true
+    },
+    loadEdgeFirewallService: {
+      type: Function,
+      required: true
+    },
+    listEdgeFirewallService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -82,7 +89,6 @@
   const router = useRouter()
 
   const edgeApplicationsData = ref([])
-  const edgeFirewallsData = ref([])
   const digitalCertificates = ref([])
   const domainName = ref('')
   const isLoadingRequests = ref(true)
@@ -159,25 +165,10 @@
     }
   }
 
-  const requestEdgeFirewalls = async () => {
-    isLoadingEdgeFirewalls.value = true
-    try {
-      edgeFirewallsData.value = await listEdgeFirewallService({})
-    } catch (error) {
-      toastError(error)
-    } finally {
-      isLoadingEdgeFirewalls.value = false
-    }
-  }
-
   const handleEdgeApplicationCreated = async () => {
     await requestEdgeApplications()
   }
 
-  const handleEdgeFirewallCreated = async () => {
-    await requestEdgeFirewalls()
-  }
-
   const requestDigitalCertificates = async () => {
     digitalCertificates.value = await props.listDigitalCertificatesService({})
   }
@@ -198,11 +189,7 @@
 
   onMounted(async () => {
     try {
-      await Promise.all([
-        requestEdgeApplications(),
-        requestDigitalCertificates(),
-        requestEdgeFirewalls()
-      ])
+      await Promise.all([requestEdgeApplications(), requestDigitalCertificates()])
     } catch (error) {
       toastError(error)
     } finally {
diff --git a/src/views/Domains/EditView.vue b/src/views/Domains/EditView.vue
index d3181d2fd..2fdc45969 100644
--- a/src/views/Domains/EditView.vue
+++ b/src/views/Domains/EditView.vue
@@ -17,13 +17,13 @@
           <FormFieldsEditDomains
             :digitalCertificates="digitalCertificates"
             :edgeApplicationsData="edgeApplicationsData"
-            :edgeFirewallsData="edgeFirewallsData"
             :isLoadingEdgeFirewalls="isLoadingEdgeFirewalls"
-            @edgeFirewallCreated="handleEdgeFirewallCreated"
             hasDomainName
             @copyDomainName="copyDomainName"
             :loadingEdgeApplications="loadingEdgeApplications"
             :updateDigitalCertificates="updateDigitalCertificates"
+            :listEdgeFirewallService="listEdgeFirewallService"
+            :loadEdgeFirewallService="loadEdgeFirewallService"
             @edgeApplicationCreated="handleEdgeApplicationCreated"
           />
         </template>
@@ -50,7 +50,6 @@
   import * as yup from 'yup'
   import { useToast } from 'primevue/usetoast'
   import { handleTrackerError } from '@/utils/errorHandlingTracker'
-  import { listEdgeFirewallService } from '@/services/edge-firewall-services'
 
   /**@type {import('@/plugins/analytics/AnalyticsTrackerAdapter').AnalyticsTrackerAdapter} */
   const tracker = inject('tracker')
@@ -83,6 +82,14 @@
     updateDigitalCertificates: {
       type: Function,
       required: true
+    },
+    loadEdgeFirewallService: {
+      type: Function,
+      required: true
+    },
+    listEdgeFirewallService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -109,7 +116,6 @@
   const toast = useToast()
   const loadingEdgeApplications = ref(true)
   const domainName = ref()
-  const edgeFirewallsData = ref([])
   const isLoadingEdgeFirewalls = ref(true)
 
   const requestEdgeApplications = async () => {
@@ -155,29 +161,10 @@
     domainName.value = domain.name
   }
 
-  const requestEdgeFirewalls = async () => {
-    isLoadingEdgeFirewalls.value = true
-    try {
-      edgeFirewallsData.value = await listEdgeFirewallService({})
-    } catch (error) {
-      toastError(error)
-    } finally {
-      isLoadingEdgeFirewalls.value = false
-    }
-  }
-
-  const handleEdgeFirewallCreated = async () => {
-    await requestEdgeFirewalls()
-  }
-
   onMounted(async () => {
     try {
       scrollToTop()
-      await Promise.all([
-        requestEdgeApplications(),
-        requestDigitalCertificates(),
-        requestEdgeFirewalls()
-      ])
+      await Promise.all([requestEdgeApplications(), requestDigitalCertificates()])
     } catch (error) {
       toastError(error)
     } finally {
diff --git a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
index 2a875cbe5..efdb98f6c 100644
--- a/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsCreateDomains.vue
@@ -12,6 +12,7 @@
   import FieldGroupRadio from '@/templates/form-fields-inputs/fieldGroupRadio'
   import DigitalCertificatesDrawer from '@/views/DigitalCertificates/Drawer'
   import FieldSwitchBlock from '@/templates/form-fields-inputs/fieldSwitchBlock'
+  import FieldDropdownLazyLoader from '@/templates/form-fields-inputs/fieldDropdownLazyLoader'
   import DrawerEdgeFirewall from '@/views/EdgeFirewall/Drawer'
   import { useField } from 'vee-validate'
   import { computed, ref, watch } from 'vue'
@@ -25,10 +26,6 @@
       type: Array,
       required: true
     },
-    edgeFirewallsData: {
-      type: Array,
-      required: true
-    },
     isLoadingEdgeFirewalls: {
       type: Boolean,
       required: true
@@ -44,6 +41,14 @@
     updateDigitalCertificates: {
       type: Function,
       required: true
+    },
+    listEdgeFirewallService: {
+      type: Function,
+      required: true
+    },
+    loadEdgeFirewallService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -91,12 +96,6 @@
     return props.edgeApplicationsData.map((edgeApp) => ({ name: edgeApp.name, value: edgeApp.id }))
   })
 
-  const edgeFirewallOptions = computed(() => {
-    return props.edgeFirewallsData.map((edgeFirewall) => ({
-      name: edgeFirewall.name,
-      value: edgeFirewall.id
-    }))
-  })
   const edgeCertificatesOptions = computed(() => {
     const defaultCertificate = [
       { name: 'Azion (SAN)', value: 0 },
@@ -247,17 +246,15 @@
         </FieldDropdown>
       </div>
       <div class="flex flex-col w-full sm:max-w-xs gap-2">
-        <FieldDropdown
+        <FieldDropdownLazyLoader
           label="Edge Firewall"
           data-testid="domains-form__edge-firewall-field"
           name="edgeFirewall"
-          :options="edgeFirewallOptions"
-          :loading="isLoadingEdgeFirewalls"
-          :disabled="isLoadingEdgeFirewalls"
+          :service="listEdgeFirewallService"
+          :loadService="loadEdgeFirewallService"
           optionLabel="name"
           optionValue="value"
           :value="edgeFirewall"
-          filter
           appendTo="self"
           placeholder="Select an edge firewall"
         >
@@ -280,7 +277,7 @@
               </li>
             </ul>
           </template>
-        </FieldDropdown>
+        </FieldDropdownLazyLoader>
       </div>
       <FieldSwitchBlock
         data-testid="domains-form__cname-access-only-field"
diff --git a/src/views/Domains/FormFields/FormFieldsEditDomains.vue b/src/views/Domains/FormFields/FormFieldsEditDomains.vue
index d440e101f..e35f327ae 100644
--- a/src/views/Domains/FormFields/FormFieldsEditDomains.vue
+++ b/src/views/Domains/FormFields/FormFieldsEditDomains.vue
@@ -6,6 +6,7 @@
   import FormHorizontal from '@/templates/create-form-block/form-horizontal'
   import PrimeButton from 'primevue/button'
   import FieldText from '@/templates/form-fields-inputs/fieldText'
+  import FieldDropdownLazyLoader from '@/templates/form-fields-inputs/fieldDropdownLazyLoader'
   import InputText from 'primevue/inputtext'
   import PrimeTag from 'primevue/tag'
   import FieldTextArea from '@/templates/form-fields-inputs/fieldTextArea'
@@ -39,13 +40,17 @@
       type: Function,
       required: true
     },
-    edgeFirewallsData: {
-      type: Array,
-      required: true
-    },
     isLoadingEdgeFirewalls: {
       type: Boolean,
       required: true
+    },
+    listEdgeFirewallService: {
+      type: Function,
+      required: true
+    },
+    loadEdgeFirewallService: {
+      type: Function,
+      required: true
     }
   })
 
@@ -72,13 +77,6 @@
     emit('edgeFirewallCreated')
   }
 
-  const edgeFirewallOptions = computed(() => {
-    return props.edgeFirewallsData.map((edgeFirewall) => ({
-      name: edgeFirewall.name,
-      value: edgeFirewall.id
-    }))
-  })
-
   const edgeCertificates = computed(() => {
     return props.digitalCertificates.filter((certificate) => certificate.type === EDGE_CERTIFICATE)
   })
@@ -328,17 +326,15 @@
           ref="drawerEdgeFirewallRef"
           @onSuccess="handleEdgeFirewallCreated"
         />
-        <FieldDropdown
+        <FieldDropdownLazyLoader
           label="Edge Firewall"
           data-testid="domains-form__edge-firewall-field"
           name="edgeFirewall"
-          :options="edgeFirewallOptions"
-          :loading="isLoadingEdgeFirewalls"
-          :disabled="isLoadingEdgeFirewalls"
+          :service="listEdgeFirewallService"
+          :loadService="loadEdgeFirewallService"
           optionLabel="name"
           optionValue="value"
           :value="edgeFirewall"
-          filter
           appendTo="self"
           placeholder="Select an edge firewall"
         >
@@ -361,7 +357,7 @@
               </li>
             </ul>
           </template>
-        </FieldDropdown>
+        </FieldDropdownLazyLoader>
       </div>
       <FieldSwitchBlock
         nameField="cnameAccessOnly"