diff --git a/CardActions.vue b/CardActions.vue
index 49a65d2..8613ebc 100644
--- a/CardActions.vue
+++ b/CardActions.vue
@@ -1,11 +1,13 @@
 <template>
   <q-card-actions>
-    <q-btn flat v-on:click="SendAndRequest(senddata, 1, 0, 'mykey', true)">Apply</q-btn>
-    <q-btn flat v-on:click="SendAndRequest(senddata, 1, 1, 'mykey', true)">Save</q-btn>
-    <q-btn flat v-on:click="SendAndRequest(senddata, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
+    <q-btn color="green" v-on:click="SendAndRequest(senddata, 1, 0, 'mykey', true)">Apply</q-btn>
+    <q-btn color="orange" v-on:click="SendAndRequest(senddata, 1, 1, 'mykey', true)">Save</q-btn>
+    <q-btn color="red" v-on:click="SendAndRequest(senddata, 1, 2, 'mykey', true)">Save & Reboot</q-btn>
   </q-card-actions>
 </template>
 
 <script setup>
-import { SendAndRequest } from "boot/network";
+import { SendAndRequest } from "components/webguicomp/network";
+import { defineProps } from "vue";
+const props = defineProps(['senddata']);
 </script>
diff --git a/cards/EthSetCard.vue b/cards/EthSetCard.vue
index d668947..20c1a5e 100644
--- a/cards/EthSetCard.vue
+++ b/cards/EthSetCard.vue
@@ -19,17 +19,13 @@
         </div>
       </div>
     </q-card-section>
-    <q-card-actions>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 0, 'mykey', true)">Apply</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 1, 'mykey', true)">Save</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
-    </q-card-actions>
-
+    <CardActions :senddata="data"></CardActions>
   </q-card>
 </template>
 <script setup>
 import { reactive } from "vue";
 import { SendAndRequest } from "boot/network";
+import CardActions from "components/webguicomp/CardActions.vue"
 
 defineOptions({
   name: 'EthSetCard'
diff --git a/cards/FirmwareCard.vue b/cards/FirmwareCard.vue
index 75d37e3..741b68e 100644
--- a/cards/FirmwareCard.vue
+++ b/cards/FirmwareCard.vue
@@ -15,17 +15,14 @@
         </div>
       </div>
     </q-card-section>
-    <q-card-actions>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 0, 'mykey', true)">Apply</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 1, 'mykey', true)">Save</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
-    </q-card-actions>
+    <CardActions :senddata="data"></CardActions>
   </q-card>
 </template>
 
 <script setup>
 import { reactive } from "vue";
 import { SendAndRequest } from "boot/network";
+import CardActions from "components/webguicomp/CardActions.vue"
 
 defineOptions({
   name: 'FirmwareCard'
diff --git a/cards/MQTT1Card.vue b/cards/MQTT1Card.vue
index c709556..dc2bfc2 100644
--- a/cards/MQTT1Card.vue
+++ b/cards/MQTT1Card.vue
@@ -17,17 +17,14 @@
         </div>
       </div>
     </q-card-section>
-    <q-card-actions>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 0, 'mykey', true)">Apply</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 1, 'mykey', true)">Save</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
-    </q-card-actions>
+    <CardActions :senddata="data"></CardActions>
   </q-card>
 </template>
 
 <script setup>
 import { reactive } from "vue";
 import { SendAndRequest } from "boot/network";
+import CardActions from "components/webguicomp/CardActions.vue"
 
 
 const init = {
diff --git a/cards/MQTT2Card.vue b/cards/MQTT2Card.vue
index b694b9a..25863c3 100644
--- a/cards/MQTT2Card.vue
+++ b/cards/MQTT2Card.vue
@@ -6,34 +6,25 @@
     <q-card-section class="q-pt-none">
       <div class="q-pa-md">
         <div class="q-gutter-md q-pa-none q-pb-none">
-          <q-toggle :dense="true" v-model="data.mqtt_2_enab" label="Eanble MQTT 2" />
-          <q-input :dense="true" v-model="data.mqtt_2_serv" label="MQTT broker URL	" />
-          <q-input :dense="true" v-model="data.mqtt_2_port" label="MQTT broker port	" />
-          <q-input :dense="true" v-model="data.mqtt_2_syst" label="Global system name	" />
-          <q-input :dense="true" v-model="data.mqtt_2_group" label="Group name	" />
-          <q-input :dense="true" v-model="data.mqtt_2_clid" label="Device ID prefix" />
-          <q-input :dense="true" v-model="data.mqtt_2_uname" label="Login" />
-          <q-input :dense="true" v-model="data.mqtt_2_pass" label="Password" />
+          <q-toggle v-model="data.mqtt_2_enab" label="Eanble MQTT 2" />
+          <q-input v-model="data.mqtt_2_serv" label="MQTT broker URL	" />
+          <q-input v-model="data.mqtt_2_port" label="MQTT broker port	" />
+          <q-input v-model="data.mqtt_2_syst" label="Global system name	" />
+          <q-input v-model="data.mqtt_2_group" label="Group name	" />
+          <q-input v-model="data.mqtt_2_clid" label="Device ID prefix" />
+          <q-input v-model="data.mqtt_2_uname" label="Login" />
+          <q-input v-model="data.mqtt_2_pass" label="Password" />
         </div>
       </div>
     </q-card-section>
-
-    <q-card-actions>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 0, 'mykey', true)">Apply</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 1, 'mykey', true)">Save</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
-    </q-card-actions>
-
-    <CardActions />
-
+    <CardActions :senddata="data"></CardActions>
   </q-card>
 </template>
 
-
-
 <script setup>
 import { reactive } from "vue";
 import { SendAndRequest } from "boot/network";
+import CardActions from "components/webguicomp/CardActions.vue"
 
 const init = {
   mqtt_2_enab: false,
diff --git a/cards/SNTPCard.vue b/cards/SNTPCard.vue
index b1048ec..93075c2 100644
--- a/cards/SNTPCard.vue
+++ b/cards/SNTPCard.vue
@@ -13,18 +13,14 @@
         </div>
       </div>
     </q-card-section>
-    <q-card-actions>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 0, 'mykey', true)">Apply</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 1, 'mykey', true)">Save</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
-    </q-card-actions>
+    <CardActions :senddata="data"></CardActions>
   </q-card>
 </template>
 
 <script setup>
 import { reactive } from "vue";
 import { SendAndRequest } from "boot/network";
-
+import CardActions from "components/webguicomp/CardActions.vue"
 
 
 const init = {
diff --git a/cards/SystemCard.vue b/cards/SystemCard.vue
index d4c2165..403f06e 100644
--- a/cards/SystemCard.vue
+++ b/cards/SystemCard.vue
@@ -18,18 +18,14 @@
         </div>
       </div>
     </q-card-section>
-    <q-card-actions>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 0, 'mykey', true)">Apply</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 1, 'mykey', true)">Save</q-btn>
-      <q-btn flat v-on:click="SendAndRequest(data, 1, 2, 'mykey', true)">Save&Reboot</q-btn>
-    </q-card-actions>
-
+    <CardActions :senddata="data"></CardActions>
   </q-card>
 </template>
 
 <script setup>
 import { reactive } from "vue";
 import { SendAndRequest } from "boot/network";
+import CardActions from "components/webguicomp/CardActions.vue"
 
 defineOptions({
   name: 'SystemCard'
diff --git a/cards/WifiSetCard.vue b/cards/WifiSetCard.vue
index 0624e7e..cc26c96 100644
--- a/cards/WifiSetCard.vue
+++ b/cards/WifiSetCard.vue
@@ -8,7 +8,7 @@
       <div class="q-pa-md">
         <div class="q-gutter-md q-pa-none q-pb-none">
           <q-toggle :dense="true" v-model="data.wifi_enab" label="WiFi enable" />
-          <q-btn :dense="true" label="Scan WiFi" @click="OpenScanDialog()"></q-btn>
+          <q-btn color="primary" label="Scan WiFi" @click="OpenScanDialog()"></q-btn>
           <q-select :dense="true" v-model="wifimodestr" :options="wifimodes" :map-options="true" :emit-value="true"
             label="WiFi mode"></q-select>
           <q-input :dense="true" v-model="wifipwr" label="Max power, dBm" />