diff --git a/Thermo.Active/wwwroot/src/modules/app-header.ts b/Thermo.Active/wwwroot/src/modules/app-header.ts
index cadd5d71..bd9e3a9f 100644
--- a/Thermo.Active/wwwroot/src/modules/app-header.ts
+++ b/Thermo.Active/wwwroot/src/modules/app-header.ts
@@ -9,6 +9,7 @@ import AppRibbon from "@/components/app-ribbon.vue";
 import UserInfo from "@/app_modules/machine/components/user-info.vue";
 import { Prop } from "vue-property-decorator";
 import Archinterface from "@/app_modules_thermo/components/arch-interface/arch-interface.vue";
+import { recipeService } from "@/services/recipeService";
 
 
 declare let $: any;
@@ -112,6 +113,10 @@ export default class AppHeader extends Vue {
     //     Hub.Current.sendPowerCommand(btn.id);
   }
 
+
+  async saveRecipe() {
+    await recipeService.Save();
+  }
 }
 
 enum ribbonStatusEnum {
diff --git a/Thermo.Active/wwwroot/src/modules/app-header.vue b/Thermo.Active/wwwroot/src/modules/app-header.vue
index c4081e89..cedfd55f 100644
--- a/Thermo.Active/wwwroot/src/modules/app-header.vue
+++ b/Thermo.Active/wwwroot/src/modules/app-header.vue
@@ -150,10 +150,13 @@
 		<div class="process-container over">
 			<process-info :status="state.cycleProd.status">
 				<strong v-if="panel.nomeRicetta">{{panel.nomeRicetta}}</strong>
-				<strong v-else class="black"><i class="fa fa-exclamation-triangle"></i> {{'label_no_recipe' | localize("No Recipe loaded")}}</strong>
+				<strong v-else class="black">
+					<i class="fa fa-exclamation-triangle"></i>
+					{{'label_no_recipe' | localize("No Recipe loaded")}}
+				</strong>
 			</process-info>
 		</div>
-		<button class="over blue" :title="'recipe_save' | localize('save')">
+		<button class="over blue" :title="'recipe_save' | localize('save')" @click="saveRecipe()">
 			<i class="fa fa-save"></i>
 		</button>
 		<archinterface></archinterface>