diff --git a/webapp/src/components/Modal.vue b/webapp/src/components/ModalDialog.vue
similarity index 100%
rename from webapp/src/components/Modal.vue
rename to webapp/src/components/ModalDialog.vue
diff --git a/webapp/src/views/ConfigAdminView.vue b/webapp/src/views/ConfigAdminView.vue
index 01e35201..c0954396 100644
--- a/webapp/src/views/ConfigAdminView.vue
+++ b/webapp/src/views/ConfigAdminView.vue
@@ -88,21 +88,21 @@
         </CardElement>
     </BasePage>
 
-    <Modal modalId="factoryReset" small :title="$t('configadmin.FactoryReset')" :closeText="$t('configadmin.Cancel')">
+    <ModalDialog modalId="factoryReset" small :title="$t('configadmin.FactoryReset')" :closeText="$t('configadmin.Cancel')">
         {{ $t('configadmin.ResetMsg') }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
                 {{ $t('configadmin.ResetConfirm') }}
             </button>
         </template>
-    </Modal>
+    </ModalDialog>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
-import Modal from '@/components/Modal.vue';
+import ModalDialog from '@/components/ModalDialog.vue';
 import type { ConfigFileList } from '@/types/Config';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import * as bootstrap from 'bootstrap';
@@ -118,7 +118,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
-        Modal,
+        ModalDialog,
         BIconArrowLeft,
         BIconCheckCircle,
         BIconExclamationCircleFill,
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 12b5f875..d2fca838 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -124,19 +124,19 @@
         </div>
     </BasePage>
 
-    <Modal modalId="eventView" :title="$t('home.EventLog')" :loading="eventLogLoading">
+    <ModalDialog modalId="eventView" :title="$t('home.EventLog')" :loading="eventLogLoading">
         <EventLog :eventLogList="eventLogList" />
-    </Modal>
+    </ModalDialog>
 
-    <Modal modalId="devInfoView" :title="$t('home.InverterInfo')" :loading="devInfoLoading">
+    <ModalDialog modalId="devInfoView" :title="$t('home.InverterInfo')" :loading="devInfoLoading">
         <DevInfo :devInfoList="devInfoList" />
-    </Modal>
+    </ModalDialog>
 
-    <Modal modalId="gridProfileView" :title="$t('home.GridProfile')" :loading="gridProfileLoading">
+    <ModalDialog modalId="gridProfileView" :title="$t('home.GridProfile')" :loading="gridProfileLoading">
         <GridProfile :gridProfileList="gridProfileList" :gridProfileRawList="gridProfileRawList" />
-    </Modal>
+    </ModalDialog>
 
-    <Modal modalId="limitSettingView" :title="$t('home.LimitSettings')" :loading="limitSettingLoading">
+    <ModalDialog modalId="limitSettingView" :title="$t('home.LimitSettings')" :loading="limitSettingLoading">
         <BootstrapAlert v-model="showAlertLimit" :variant="alertTypeLimit">
             {{ alertMessageLimit }}
         </BootstrapAlert>
@@ -206,9 +206,9 @@
             <button type="button" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
                 $t('home.SetNonPersistent') }}</button>
         </template>
-    </Modal>
+    </ModalDialog>
 
-    <Modal modalId="powerSettingView" :title="$t('home.PowerSettings')" :loading="powerSettingLoading">
+    <ModalDialog modalId="powerSettingView" :title="$t('home.PowerSettings')" :loading="powerSettingLoading">
         <BootstrapAlert v-model="showAlertPower" :variant="alertTypePower">
             {{ alertMessagePower }}
         </BootstrapAlert>
@@ -239,7 +239,7 @@
                 <BIconArrowCounterclockwise class="fs-4" />&nbsp;{{ $t('home.Restart') }}
             </button>
         </div>
-    </Modal>
+    </ModalDialog>
 </template>
 
 <script lang="ts">
@@ -251,7 +251,7 @@ import GridProfile from '@/components/GridProfile.vue';
 import HintView from '@/components/HintView.vue';
 import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
-import Modal from '@/components/Modal.vue';
+import ModalDialog from '@/components/ModalDialog.vue';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
 import type { GridProfileStatus } from '@/types/GridProfileStatus';
@@ -286,7 +286,7 @@ export default defineComponent({
         HintView,
         InverterChannelInfo,
         InverterTotalInfo,
-        Modal,
+        ModalDialog,
         BIconArrowCounterclockwise,
         BIconCheckCircleFill,
         BIconCpu,
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index f9bd82ec..21ea8dd7 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -71,7 +71,7 @@
         </CardElement>
     </BasePage>
 
-    <Modal modalId="inverterEdit" :title="$t('inverteradmin.EditInverter')" :closeText="$t('inverteradmin.Cancel')">
+    <ModalDialog modalId="inverterEdit" :title="$t('inverteradmin.EditInverter')" :closeText="$t('inverteradmin.Cancel')">
         <nav>
             <div class="nav nav-tabs" id="nav-tab" role="tablist">
                 <button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general"
@@ -186,9 +186,9 @@
             <button type="button" class="btn btn-primary" @click="onEditSubmit">
                 {{ $t('inverteradmin.Save') }}</button>
         </template>
-    </Modal>
+    </ModalDialog>
 
-    <Modal modalId="inverterDelete" small :title="$t('inverteradmin.DeleteInverter')"
+    <ModalDialog modalId="inverterDelete" small :title="$t('inverteradmin.DeleteInverter')"
         :closeText="$t('inverteradmin.Cancel')">
         {{ $t('inverteradmin.DeleteMsg', {
             name: selectedInverterData.name,
@@ -199,7 +199,7 @@
             <button type="button" class="btn btn-danger" @click="onDelete">
                 {{ $t('inverteradmin.Delete') }}</button>
         </template>
-    </Modal>
+    </ModalDialog>
 </template>
 
 <script lang="ts">
@@ -207,7 +207,7 @@ import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
 import InputElement from '@/components/InputElement.vue';
-import Modal from '@/components/Modal.vue';
+import ModalDialog from '@/components/ModalDialog.vue';
 import type { Inverter } from '@/types/InverterConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import * as bootstrap from 'bootstrap';
@@ -235,7 +235,7 @@ export default defineComponent({
         BootstrapAlert,
         CardElement,
         InputElement,
-        Modal,
+        ModalDialog,
         BIconInfoCircle,
         BIconPencil,
         BIconTrash,
diff --git a/webapp/src/views/MaintenanceRebootView.vue b/webapp/src/views/MaintenanceRebootView.vue
index 9d9f6fd9..1c6a9bc5 100644
--- a/webapp/src/views/MaintenanceRebootView.vue
+++ b/webapp/src/views/MaintenanceRebootView.vue
@@ -12,20 +12,20 @@
         </CardElement>
     </BasePage>
 
-    <Modal modalId="performReboot" small :title="$t('maintenancereboot.RebootOpenDTU')" :closeText="$t('maintenancereboot.Cancel')">
+    <ModalDialog modalId="performReboot" small :title="$t('maintenancereboot.RebootOpenDTU')" :closeText="$t('maintenancereboot.Cancel')">
         {{ $t('maintenancereboot.RebootQuestion') }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onReboot">
                         {{ $t('maintenancereboot.Reboot') }}</button>
         </template>
-    </Modal>
+    </ModalDialog>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import CardElement from '@/components/CardElement.vue';
-import Modal from '@/components/Modal.vue';
+import ModalDialog from '@/components/ModalDialog.vue';
 import { authHeader, handleResponse, isLoggedIn } from '@/utils/authentication';
 import * as bootstrap from 'bootstrap';
 import { defineComponent } from 'vue';
@@ -35,7 +35,7 @@ export default defineComponent({
         BasePage,
         BootstrapAlert,
         CardElement,
-        Modal,
+        ModalDialog,
     },
     data() {
         return {