diff --git a/webapp/src/components/AboutView.vue b/webapp/src/components/AboutView.vue
index 7196cf52..77f897b8 100644
--- a/webapp/src/components/AboutView.vue
+++ b/webapp/src/components/AboutView.vue
@@ -98,4 +98,24 @@
 
     </div>
 
-</template>
\ No newline at end of file
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+    BIconInfoCircle,
+    BIconActivity,
+    BIconBug,
+    BIconChat
+} from 'bootstrap-icons-vue';
+
+export default defineComponent({
+    components: {
+        BIconInfoCircle,
+        BIconActivity,
+        BIconBug,
+        BIconChat,
+    },
+});
+
+</script>
\ No newline at end of file
diff --git a/webapp/src/components/ConfigAdminView.vue b/webapp/src/components/ConfigAdminView.vue
index 9055cc16..aacad9a6 100644
--- a/webapp/src/components/ConfigAdminView.vue
+++ b/webapp/src/components/ConfigAdminView.vue
@@ -116,11 +116,19 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import {
+    BIconExclamationCircleFill,
+    BIconArrowLeft,
+    BIconCheckCircle
+} from 'bootstrap-icons-vue';
 import * as bootstrap from 'bootstrap';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
 export default defineComponent({
     components: {
+        BIconExclamationCircleFill,
+        BIconArrowLeft,
+        BIconCheckCircle,
         BootstrapAlert,
     },
     data() {
diff --git a/webapp/src/components/FirmwareUpgradeView.vue b/webapp/src/components/FirmwareUpgradeView.vue
index 72504083..2e120438 100644
--- a/webapp/src/components/FirmwareUpgradeView.vue
+++ b/webapp/src/components/FirmwareUpgradeView.vue
@@ -74,8 +74,20 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import SparkMD5 from "spark-md5";
+import {
+    BIconExclamationCircleFill,
+    BIconArrowLeft,
+    BIconArrowRepeat,
+    BIconCheckCircle
+} from 'bootstrap-icons-vue';
 
 export default defineComponent({
+    components: {
+        BIconExclamationCircleFill,
+        BIconArrowLeft,
+        BIconArrowRepeat,
+        BIconCheckCircle,
+    },
     data() {
         return {
             loading: true,
@@ -122,7 +134,7 @@ export default defineComponent({
             this.uploading = true;
             const formData = new FormData();
             if (event !== null) {
-                const target= event.target as HTMLInputElement;
+                const target = event.target as HTMLInputElement;
                 if (target.files !== null) {
                     this.file = target.files[0];
                 }
diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index 4a7f0286..4c30c704 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -314,11 +314,23 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import InverterChannelInfo from "@/components/partials/InverterChannelInfo.vue";
 import * as bootstrap from 'bootstrap';
+import {
+    BIconXCircleFill,
+    BIconExclamationCircleFill,
+    BIconCheckCircleFill,
+    BIconSpeedometer,
+    BIconPower,
+    BIconCpu,
+    BIconJournalText,
+    BIconToggleOn,
+    BIconToggleOff,
+    BIconArrowCounterclockwise
+} from 'bootstrap-icons-vue';
 import EventLog from '@/components/partials/EventLog.vue';
 import DevInfo from '@/components/partials/DevInfo.vue';
 import BootstrapAlert from '@/components/partials/BootstrapAlert.vue';
+import InverterChannelInfo from "@/components/partials/InverterChannelInfo.vue";
 
 declare interface Inverter {
     serial: number,
@@ -337,6 +349,16 @@ export default defineComponent({
         EventLog,
         DevInfo,
         BootstrapAlert,
+        BIconXCircleFill,
+        BIconExclamationCircleFill,
+        BIconCheckCircleFill,
+        BIconSpeedometer,
+        BIconPower,
+        BIconCpu,
+        BIconJournalText,
+        BIconToggleOn,
+        BIconToggleOff,
+        BIconArrowCounterclockwise,
     },
     data() {
         return {
diff --git a/webapp/src/components/InverterAdminView.vue b/webapp/src/components/InverterAdminView.vue
index d27f9076..3a00e952 100644
--- a/webapp/src/components/InverterAdminView.vue
+++ b/webapp/src/components/InverterAdminView.vue
@@ -96,7 +96,7 @@
 
                             <div class="mb-3" v-for="(max, index) in editInverterData.max_power" :key="`${index}`">
                                 <label :for="`inverter-max_${index}`" class="col-form-label">Max power string {{ index +
-                                        1
+                                1
                                 }}:</label>
                                 <div class="input-group">
                                     <input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
@@ -146,6 +146,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import {
+    BIconTrash,
+    BIconPencil
+} from 'bootstrap-icons-vue';
 import * as bootstrap from 'bootstrap';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
@@ -160,6 +164,8 @@ declare interface Inverter {
 export default defineComponent({
     components: {
         BootstrapAlert,
+        BIconTrash,
+        BIconPencil,
     },
     data() {
         return {
@@ -184,7 +190,7 @@ export default defineComponent({
         this.getInverters();
     },
     computed: {
-        sortedInverters() {
+        sortedInverters(): Inverter[] {
             return this.inverters.slice().sort((a, b) => {
                 return a.serial - b.serial;
             });
diff --git a/webapp/src/components/partials/DevInfo.vue b/webapp/src/components/partials/DevInfo.vue
index bb20e68d..ce53af49 100644
--- a/webapp/src/components/partials/DevInfo.vue
+++ b/webapp/src/components/partials/DevInfo.vue
@@ -10,7 +10,8 @@
                 <td>Model</td>
                 <td v-if="devInfoList.hw_model_name != ''">{{ devInfoList.hw_model_name }}</td>
                 <td v-else>Unknown model! Please report the "Hardware Part Number" and model (e.g. HM-350) as an issue
-                    <a href="https://github.com/tbnobody/OpenDTU/issues" target="_blank">here</a>.</td>
+                    <a href="https://github.com/tbnobody/OpenDTU/issues" target="_blank">here</a>.
+                </td>
             </tr>
             <tr>
                 <td>Bootloader Version</td>
@@ -38,6 +39,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { BIconInfoSquare } from 'bootstrap-icons-vue';
 import BootstrapAlert from '@/components/partials/BootstrapAlert.vue';
 
 declare interface DevInfoData {
@@ -52,6 +54,7 @@ declare interface DevInfoData {
 
 export default defineComponent({
     components: {
+        BIconInfoSquare,
         BootstrapAlert,
     },
     props: {
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index 78162676..e54f91b1 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -1,9 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { BootstrapIconsPlugin } from 'bootstrap-icons-vue';
 
 import "bootstrap/dist/css/bootstrap.min.css"
 import "bootstrap"
 
-createApp(App).use(router).use(BootstrapIconsPlugin).mount('#app')
+createApp(App).use(router).mount('#app')