diff --git a/.storybook/addons.js b/.storybook/addons.js
deleted file mode 100644
index 6ae32c3b..00000000
--- a/.storybook/addons.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
\ No newline at end of file
diff --git a/.storybook/config.js b/.storybook/config.js
deleted file mode 100644
index cf681c23..00000000
--- a/.storybook/config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { configure } from '@storybook/preact';
-import '../src/i18nline-glue';
-import '../src/style';
-
-configure([
-    require.context('../stories', true, /\.stories\.js$/),
-    require.context('../plugins', true, /\.stories\.js$/)
-], module);
diff --git a/.storybook/main.js b/.storybook/main.js
index 28dd88a5..65914c6d 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -4,6 +4,8 @@ const transformConfig = require('preact-cli/lib/lib/webpack/transform-config');
 const webpack = require('webpack');
 
 module.exports = {
+	stories: ['../stories/**/*.stories.js', '../plugins/**/*.stories.js'],
+	addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
 	webpackFinal: async(config, {configType}) => {
 		const isProd = configType === 'PRODUCTION';
 		const cwd = process.env.PWD;
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 4226ebbe..2ef76a81 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -1,6 +1,7 @@
 <style>
 	body {
-		display: flex;
+		display: flex !important;
+		padding: 0 !important;
 	}
 	#root {
 		flex: auto;
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 00000000..da511276
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,52 @@
+import { h } from 'preact';
+import '../src/i18nline-glue';
+import '../src/style';
+
+import { ReactQueryCacheProvider, QueryCache } from 'react-query';
+import { addDecorator } from '@storybook/preact';
+import { withKnobs } from '@storybook/addon-knobs';
+
+const boarData = {
+	hostname: 'ql-anaymarcos',
+	release: {
+		description: 'LibreRouterOs 1.2-SNAPSHOT r0-21f7665'
+	},
+	model: 'LibreRouter v1'
+};
+
+const DEFAULT_QUERIES = [
+	[['system', 'board'], boarData]
+]
+
+function queryCacheFactory(queries=[]) {
+	const defaultQueries = Object.fromEntries(DEFAULT_QUERIES
+		.map(([key, value]) => [JSON.stringify(key), value]))
+	const customQueries = Object.fromEntries(queries
+		.map(([key, value]) => [JSON.stringify(key), value]))
+	const finalQueries = {
+		...defaultQueries,
+		...customQueries
+	}
+	const queryCache = new QueryCache({
+		defaultConfig: {
+			queries: {
+				initialStale: Infinity,
+				staleTime: Infinity,
+				refetchOnMount: false,
+				retry: 0
+			}
+		}
+	});
+	for (const [key, value] of Object.entries(finalQueries)) {
+		queryCache.setQueryData(JSON.parse(key), value)
+	}
+	return queryCache;
+}
+
+const withQueryCache = (Story, context) => (
+	<ReactQueryCacheProvider queryCache={queryCacheFactory(context.args.queries)}>
+		<Story />
+	</ReactQueryCacheProvider>
+)
+addDecorator(withKnobs);
+addDecorator(withQueryCache);
diff --git a/i18n/generic.json b/i18n/generic.json
index c029f880..17722543 100644
--- a/i18n/generic.json
+++ b/i18n/generic.json
@@ -1,8 +1,9 @@
 {
   "en": {
+    "a_new_firmware_version_has_been_released_17f89266": "A new firmware version has been released",
     "align_11050992": "Align",
     "an_error_occurred_a4e1cda4": "An error occurred",
-    "applying_changes_the_system_takes_a_minute_to_get__189a700d": "Applying changes. The system takes a minute to get back online.",
+    "applying_changes_23ae34f2": "Applying changes.",
     "at_least_one_alphanumeric_character_357817ee": "At least one alphanumeric character",
     "at_least_one_number_bf8434bb": "At least one number",
     "cancel_caeb1e68": "Cancel",
@@ -42,7 +43,11 @@
     "create_network_d229d642": "Create network",
     "create_new_network_28805f92": "Create new network",
     "current_status_830c5a75": "Current status",
+    "currently_your_node_has_version_1c26984b": "Currently your node has version:",
     "device_95d26d94": "Device",
+    "don_t_show_this_message_again_9950c20": "Don't show this message again",
+    "download_c7ffdfb9": "Download",
+    "downloading_1e41f805": "Downloading",
     "edit_location_420eadc4": "edit location",
     "error_98e81528": "Error",
     "filename_83eeb4ac": "Filename",
@@ -71,6 +76,8 @@
     "metrics_status_gateway_2a77a113": "metrics_status_gateway",
     "metrics_status_path_905a8d22": "metrics_status_path",
     "metrics_status_stations_464641e8": "metrics_status_stations",
+    "more_details_on_the_release_can_be_found_at_dfc8f165": "More details on the release can be found at:",
+    "more_info_at_117c8533": "More info at:",
     "more_than_10_characters_15a6e3bf": "More than 10 characters",
     "most_active_2d5a3cae": "Most Active",
     "must_select_a_network_and_a_valid_hostname_ea82e72c": "Must select a network and a valid hostname",
@@ -81,25 +88,29 @@
     "notes_of_a44a4158": "Notes of",
     "ok_ff1b646a": "Ok",
     "only_gateway_727b1656": "Only gateway",
+    "or_choose_a_firmware_image_from_your_device_d56be2d8": "Or choose a firmware image from your device",
+    "or_upgrade_to_latest_release_e062ddee": "Or upgrade to latest release",
     "packet_loss_1afe48a8": "Packet loss",
     "password_8a271b1c": "Password",
     "please_configure_your_network_d6eb8b76": "Please configure your network",
     "please_select_a_file_b49d6bf4": "Please select a file",
+    "please_select_a_sh_or_bin_file_4004723": "Please select a .sh or .bin file",
     "please_wait_62914c7c": "Please wait",
     "please_wait_patiently_for_seconds_seconds_and_do_n_b98cfb66": "Please wait patiently for %{seconds} seconds and do not disconnect the device.",
     "please_wait_while_the_device_reboots_and_reload_th_67bd290d": "Please wait while the device reboots, and reload the app",
-    "preserve_config_94b340cf": "Preserve config",
     "re_enter_password_49757ed": "Re-enter Password",
     "re_enter_the_shared_password_20f09406": "Re-enter the shared password",
     "reload_3e45154f": "Reload",
     "reload_page_2d381199": "Reload page",
     "rescan_dff042fc": "Rescan",
+    "retry_ebd5f8ba": "Retry",
     "revert_702e7694": "Revert",
     "reverting_to_previous_version_e6e43529": "Reverting to previous version",
     "save_notes_616850ea": "Save notes",
     "scan_for_existing_networks_f7f485c": "Scan for existing networks",
     "scanning_for_existing_networks_195ddb9b": "Scanning for existing networks",
     "seconds_aee2098": "seconds",
+    "see_more_b24a4422": "See More",
     "select_a_network_to_join_b7040672": "Select a network to join",
     "select_file_71aa4113": "Select file",
     "select_new_base_station_3652ae73": "Select new base station",
@@ -111,15 +122,15 @@
     "shared_password_dac7c19d": "Shared Password",
     "show_community_42f3833": "show community",
     "size_b30e1077": "Size",
-    "station_ip_v4_3158a957": "Station IP v4",
     "station_name_7d67417c": "Station name",
     "stations_18122820": "Stations",
     "status_e7fdbe06": "Status",
     "system_55b0ca91": "System",
+    "the_download_failed_130e1274": "The download failed",
     "the_firmware_is_being_upgraded_f3881802": "The firmware is being upgraded...",
     "the_password_should_have_b9f88155": "The password should have:",
     "the_passwords_do_not_match_62d77c67": "The passwords do not match!",
-    "the_selected_image_is_not_a_valid_for_the_target_d_c5edf208": "The selected image is not a valid for the target device",
+    "the_selected_image_is_not_valid_for_the_target_dev_cea9b494": "The selected image is not valid for the target device",
     "the_shared_password_has_been_chosen_by_the_communi_f9d30a92": "The shared password has been chosen by the community when the network was created. You can ask other community members for it.",
     "the_upgrade_should_be_done_d66854": "The upgrade should be done",
     "this_device_does_not_support_secure_rollback_to_pr_1c167a2c": "This device does not support secure rollback to previous version if something goes wrong",
@@ -131,18 +142,21 @@
     "to_the_previous_configuration_bf087867": "to the previous configuration",
     "traffic_bfe536d2": "Traffic",
     "try_reloading_the_app_4e4c3a66": "Try reloading the app",
-    "un_unexpected_error_occurred_please_contact_the_de_b9eb7c49": "Un unexpected error occurred, please contact the developer team",
     "upgrade_5de364f8": "Upgrade",
+    "upgrade_now_f300d697": "Upgrade Now",
+    "upgrade_to_lastest_firmware_version_9b159910": "Upgrade to lastest firmware version",
+    "upgrade_to_versionname_621a0b6a": "Upgrade to %{versionName}",
     "upload_firmware_image_from_your_device_57327bee": "Upload firmware image from your device",
     "uptime_c1d2415d": "Uptime",
+    "versionname_is_now_available_a6fbbb63": "%{versionName} is now available",
     "when_reloading_the_app_you_will_be_asked_to_confir_f9ecb33e": "When reloading the app you will be asked to confirm the upgrade, otherwise it will be reverted",
     "wrong_password_try_again_3100aecf": "Wrong password, try again",
     "you_are_connected_to_another_node_in_the_network_t_a423710a": "You are connected to another node in the network, try connecting to",
     "you_are_now_part_of_90f2585a": "You are now part of ",
     "you_can_search_for_mesh_networks_around_you_to_add_e6fbf1c5": "You can search for mesh networks around you to add or to create a new one.",
+    "you_can_upgrade_to_7af1ea19": "You can upgrade to:",
     "you_don_t_go_through_any_paths_to_get_here_25203ed3": "You don't go through any paths to get here.",
     "you_have_successfuly_connected_to_ddb8c613": "You have successfuly connected to",
-    "you_may_need_to_connect_to_the_new_wireless_networ_e931e438": "You may need to connect to the new wireless network and reload the app",
     "you_need_to_know_the_shared_password_to_enter_this_4b0c4ec1": "You need to know the shared password to enter this page",
     "you_should_try_to_connect_to_the_network_network_8d7f515e": "You should try to connect to the network %{network}.",
     "your_router_has_not_yet_been_configured_you_can_us_27c91373": "Your router has not yet been configured, \n\t\t\tyou can use our wizard to incorporate it into an existing network or create a new one.\n\t\t\tIf you ignore this message it will continue to work with the default configuration."
diff --git a/i18n/translations/es.json b/i18n/translations/es.json
index 3f4b2da8..243ac12f 100644
--- a/i18n/translations/es.json
+++ b/i18n/translations/es.json
@@ -34,11 +34,9 @@
     "traffic_bfe536d2": "Tráfico",
     "uptime_c1d2415d": "Tiempo en actividad",
     "interfaces_44f8a99c": "Interfaces",
-    "applying_changes_the_system_takes_a_minute_to_get__189a700d": "Aplicando cambios, el equipo puede no responder por un minuto.",
     "ground_routing_12ab04c9": "Ground Routing",
     "ground_routing_configuration_3f4fa9c1": "Configuración de Ground Routing",
     "login_6f3d6249": "Ingresar",
-    "station_ip_v4_3158a957": "IP v4",
     "station_name_7d67417c": "Nombre del nodo",
     "this_node_does_not_see_other_nodes_in_the_network_f281b047": "Este nodo no ve a ningún otro nodo la red",
     "cancel_caeb1e68": "Cancelar",
@@ -107,17 +105,13 @@
     "you_need_to_know_the_shared_password_to_enter_this_4b0c4ec1": "Debes ingresar la contraseña compartida para seguir",
     "shared_password_dac7c19d": "Contraseña Compartida",
     "an_error_occurred_a4e1cda4": "Ocurrió un error",
-    "un_unexpected_error_occurred_please_contact_the_de_b9eb7c49": "Un error inesperado ocurrió, porfavor contactá al equipo de desarrollo",
     "reload_3e45154f": "Recargar",
     "firmware_6a098a0d": "Firmware",
-    "preserve_config_94b340cf": "Preservar configuración",
     "select_file_71aa4113": "Seleccioná el archivo",
-    "you_may_need_to_connect_to_the_new_wireless_networ_e931e438": "Es posible que debas conectarte a la nueva red wifi y recargar la aplicación",
-    "the_selected_image_is_not_a_valid_for_the_target_d_c5edf208": "La imagen seleccionada no es válida para este dispositivo",
+    "the_selected_image_is_not_valid_for_the_target_dev_cea9b494": "La imagen seleccionada no es válida para este dispositivo",
     "this_device_does_not_support_secure_rollback_to_pr_1c167a2c": "En este dispositivo no se puede revertir la actualización en caso de errores",
     "this_device_supports_secure_rollback_to_previous_v_a60ddbcb": "En este dispositivo se puede revertir la actualización en caso de errores",
     "upgrade_5de364f8": "Actualizar",
-    "upload_firmware_image_from_your_device_57327bee": "Subí una imagen de firmware desde tu dispositivo",
     "cofirm_upgrade_before_seconds_seconds_or_it_will_b_48b600b6": "Confirmá la actualización en los próximos %{seconds} segundos o será revertida",
     "confirm_6556b3a6": "Confirmar",
     "filename_83eeb4ac": "Nombre",
@@ -150,6 +144,27 @@
     "count_seconds_2953a98e": {
         "one": "segundo",
         "other": "segundos"
-    }
+    },
+    "a_new_firmware_version_has_been_released_17f89266": "Nueva versión del firmware disponible",
+    "applying_changes_23ae34f2": "Aplicando cambios",
+    "currently_your_node_has_version_1c26984b": "Actualmente tu nodo tiene la versión",
+    "more_details_on_the_release_can_be_found_at_dfc8f165": "Puedes encontrar las novedades de esta versión en:",
+    "upgrade_now_f300d697": "Actualizar ahora",
+    "versionname_is_now_available_a6fbbb63": "%{versionName} ya está disponible",
+    "you_can_upgrade_to_7af1ea19": "Puedes actualizar a:",
+    "don_t_show_this_message_again_9950c20": "No volver a mostrar a este mensaje",
+    "download_c7ffdfb9": "Descargar",
+    "downloading_1e41f805": "Descargando",
+    "more_info_at_117c8533": "Más info en:",
+    "retry_ebd5f8ba": "Reintenar",
+    "see_more_b24a4422": "Ver más",
+    "the_download_failed_130e1274": "La descarga falló",
+    "upgrade_to_versionname_621a0b6a": "Actualizar a %{versionName}",
+    "upload_firmware_image_from_your_device_57327bee": "Subí una imagen del firmware desde tu dispositivo",
+    "please_select_a_sh_or_bin_file_4004723": "Por favor, seleccioná un archivo .bin o .sh",
+    "or_choose_a_firmware_image_from_your_device_d56be2d8": "O elige una imagen de firmware desde tu dispositivo",
+    "or_upgrade_to_latest_release_e062ddee": "O actualiza a la última version del firmware",
+    "upgrade_to_lastest_firmware_version_9b159910": "Actualizar a la última version del firwmare"
+ 
 }
 
diff --git a/package.json b/package.json
index a88270af..816bb369 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,9 @@
   "devDependencies": {
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/preact": "^5.3.19",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-knobs": "^6.0.26",
+    "@storybook/preact": "^6.0.26",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/preact": "^2.0.0",
     "colors": "^1.4.0",
@@ -57,6 +57,7 @@
     "jest": "^24.9.0",
     "jest-extended": "^0.11.5",
     "jest-preset-preact": "^1.0.0",
+    "jest-when": "^2.7.2",
     "per-env": "^1.0.2",
     "preact-cli": "^3.0.0-rc.6",
     "preact-render-spy": "^1.2.1",
@@ -78,6 +79,9 @@
     "preact-render-to-string": "^5.1.0",
     "preact-router": "^3.0.0",
     "preact-router-redux": "^4.1.0",
+    "react-hook-form": "^6.9.2",
+    "react-query": "^2.23.1",
+    "react-query-devtools": "^2.6.0",
     "react-redux": "^7.1.3",
     "react-router-redux": "^4.0.8",
     "redux": "^4.0.0",
diff --git a/plugins/lime-plugin-admin/admin.stories.js b/plugins/lime-plugin-admin/admin.stories.js
index ee712909..d3fdc255 100644
--- a/plugins/lime-plugin-admin/admin.stories.js
+++ b/plugins/lime-plugin-admin/admin.stories.js
@@ -1,43 +1,19 @@
 /* eslint-disable react/display-name */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, text } from '@storybook/addon-knobs/react';
 
 import { Admin } from './src/adminPage';
-import { AppContext } from 'utils/app.context';
 
 const actions = {
 	changeHostname: action('changeHostname')
 };
 
 export default {
-	title: 'Containers|Admin',
-	component: Admin,
-	decorators: [withKnobs]
+	title: 'Containers/Admin',
+	component: Admin
 };
 
-const nodeHostname = text('nodeHostname', 'ql-anaymarcos');
+export const configForm = () => <Admin loading={false} {...actions} />
 
-export const configForm = () => {
-	const appContext = { nodeHostname };
-	return (
-		<AppContext.Provider value={appContext}>
-			<Admin
-				loading={false}
-				{...actions}
-			/>
-		</AppContext.Provider>);
-};
-
-export const waitingForChanges = () => {
-	const appContext = { nodeHostname };
-	return (
-		<AppContext.Provider value={appContext}>
-			<Admin
-				loading
-				{...actions}
-			/>
-		</AppContext.Provider>
-	);
-};
+export const waitingForChanges = () => <Admin loading {...actions} />
 
diff --git a/plugins/lime-plugin-admin/src/adminPage.js b/plugins/lime-plugin-admin/src/adminPage.js
index b28ac1b5..025e4b7b 100644
--- a/plugins/lime-plugin-admin/src/adminPage.js
+++ b/plugins/lime-plugin-admin/src/adminPage.js
@@ -13,8 +13,7 @@ import Loading from 'components/loading';
 import I18n from 'i18n-js';
 import { isValidHostname, slugify } from 'utils/isValidHostname';
 import { showNotification } from '../../../src/store/actions';
-import { useAppContext } from 'utils/app.context';
-import axios from 'axios';
+import { useBoardData } from 'utils/queries';
 
 const style = {
 	textLoading: {
@@ -37,8 +36,8 @@ const style = {
 
 
 export const Admin = ({ ipv4, changeHostname, showNotification, loading, redirect, error }) => {
-	const { nodeHostname } = useAppContext();
-	const [ hostname, setHostname ] = useState(nodeHostname);
+	const { data: boardData } = useBoardData();
+	const [ hostname, setHostname ] = useState(boardData && boardData.hostname);
 
 	useEffect(() => {
 		if (redirect) {
diff --git a/plugins/lime-plugin-align/align.stories.js b/plugins/lime-plugin-align/align.stories.js
index e9b5b48b..bf269687 100644
--- a/plugins/lime-plugin-align/align.stories.js
+++ b/plugins/lime-plugin-align/align.stories.js
@@ -1,12 +1,10 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, object, text } from '@storybook/addon-knobs/react';
+import { object } from '@storybook/addon-knobs';
 
-import { store } from '../../src/store';
 import { Align } from './src/alignPage';
 import { useState } from 'preact/hooks';
-import { AppContext } from 'utils/app.context';
 
 const actions = {
 	changeInterface: action('changeInterface'),
@@ -47,14 +45,6 @@ const alignData = {
 		iface: 'wlan1-adhoc'
 	}
 };
-const nodeHostname = text('nodeHostname', 'ql-anaymarcos');
-const communitySettings = object('communitySettings', {
-	bad_signal: '-82',
-	acceptable_loss: '20',
-	bad_bandwidth: '1',
-	good_signal: '-65',
-	good_bandwidth: '5'
-});
 
 const AlignWithState = ({ getSignal }) => {
 	const [ align, setAlign ] = useState(alignData);
@@ -94,22 +84,17 @@ const AlignWithState = ({ getSignal }) => {
 };
 
 export default {
-	title: 'Containers|Align screen',
-	component: Align,
-	decorators: [withKnobs]
+	title: 'Containers/Align screen',
+	component: Align
 };
 
 export const withoutAlignData = () => (
-	<AppContext.Provider value={{ nodeHostname, communitySettings }}>
-		<Align
-			alignData={object('Align data', {})}
-			{...actions}
-		/>
-	</AppContext.Provider>
+	<Align
+		alignData={object('Align data', {})}
+		{...actions}
+	/>
 );
 
 export const withAlignData = () => (
-	<AppContext.Provider value={{ nodeHostname, communitySettings }}>
-		<AlignWithState {...actions} />
-	</AppContext.Provider>
+	<AlignWithState {...actions} />
 );
diff --git a/plugins/lime-plugin-align/src/alignPage.js b/plugins/lime-plugin-align/src/alignPage.js
index 10d05e75..9286e608 100644
--- a/plugins/lime-plugin-align/src/alignPage.js
+++ b/plugins/lime-plugin-align/src/alignPage.js
@@ -10,7 +10,7 @@ import { getAll } from './alignSelectors';
 import I18n from 'i18n-js';
 
 import colorScale from 'simple-color-scale';
-import { useAppContext } from 'utils/app.context';
+import { useCommunitySettings, useBoardData } from 'utils/queries';
 
 //Eperimental text-to-speech
 let synth = window.speechSynthesis;
@@ -65,8 +65,8 @@ function useInterval (callback, delay, off) {
 
 export const Align = ({ startAlign, changeInterface, changeStation, alignData, getSignal }) => {
 
-	const { nodeHostname, communitySettings } = useAppContext();
-
+	const { data: communitySettings } = useCommunitySettings();
+	const { data: boardData } = useBoardData();
 	const [ lastSpeech, setLastSpeech ] = useState(0);
 	const [ resumedTimes, setResumedTimes ] = useState(0);
 
@@ -121,7 +121,7 @@ export const Align = ({ startAlign, changeInterface, changeStation, alignData, g
 				<div className="row">
 					<div className="six columns">
 						<span style={style.hostname}>
-							{nodeHostname || ''}
+							{boardData.hostname || ''}
 						</span>
 						<h1 style={style.signal}>
 							{alignData.currentReading.signal || 0}
diff --git a/plugins/lime-plugin-changeNode/changeNode.stories.js b/plugins/lime-plugin-changeNode/changeNode.stories.js
index a8ce51b1..08cd4e5a 100644
--- a/plugins/lime-plugin-changeNode/changeNode.stories.js
+++ b/plugins/lime-plugin-changeNode/changeNode.stories.js
@@ -1,34 +1,27 @@
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, array, text } from '@storybook/addon-knobs/react';
+import { array } from '@storybook/addon-knobs';
 
 import { ChangeNode } from './src/changeNodePage';
-import { AppContext } from 'utils/app.context';
 
 const actions = {
 	loadStations: action('loadStations')
+	
 };
 
-const nodeHostname = text('Node hostname', 'ql-anaymarcos');
-const baseNodeHostname = text('Base host', 'ql-anaymarcos')
-const changeNode = action('changeNode');
-
 export default {
-	title: 'Containers|ChangeNode',
-	component: ChangeNode,
-	decorators: [withKnobs]
+	title: 'Containers/ChangeNode',
+	component: ChangeNode
 };
 
 
 export const changeNodeScreen = () => (
-	<AppContext.Provider value={{ nodeHostname, baseNodeHostname, changeNode}}>
-		<ChangeNode
-			stations={array('Mesh hosts',[
-				'ql-anaymarcos',
-				'ql-graciela',
-				'ql-czuk-bbone'
-			])}
-			{...actions}
-		/>
-	</AppContext.Provider>
+	<ChangeNode
+		stations={array('Mesh hosts',[
+			'ql-anaymarcos',
+			'ql-graciela',
+			'ql-czuk-bbone'
+		])}
+		{...actions}
+	/>
 );
diff --git a/plugins/lime-plugin-changeNode/src/changeNodePage.js b/plugins/lime-plugin-changeNode/src/changeNodePage.js
index bae7c8f5..ca4f5a9c 100644
--- a/plugins/lime-plugin-changeNode/src/changeNodePage.js
+++ b/plugins/lime-plugin-changeNode/src/changeNodePage.js
@@ -8,23 +8,22 @@ import { getStations } from './changeNodeSelectors';
 import { loadStations } from './changeNodeActions';
 
 import I18n from 'i18n-js';
-import { useAppContext } from 'utils/app.context';
+import { useBoardData } from 'utils/queries';
 
 export const ChangeNode = ({ stations, loadStations }) => {
-	const { nodeHostname } = useAppContext();
+	const { data: boardData } = useBoardData();
 
 	const [ state, setState ] = useState({
-		station: nodeHostname
+		station: boardData && boardData.hostname
 	});
 
-	
 	useEffect(() => {
 		setState({
-			station: nodeHostname
+			station: boardData.hostname
 		});
 		return () => {};
 		
-	},[nodeHostname]);
+	},[boardData]);
 	
 	useEffect(() => {
 		loadStations();
@@ -38,15 +37,15 @@ export const ChangeNode = ({ stations, loadStations }) => {
 	function nextStation(e) {
 		e.preventDefault();
 		if (typeof state.station !== 'undefined') {
-			window.location.href = 'http://' + state.station;
+			window.location.href = 'http://'.concat(state.station);
 		}
 	}
 
 	function sortStations(stations) {
 		const result = stations
-			.filter(x => x !== nodeHostname)
+			.filter(x => x !== boardData.hostname)
 			.sort();
-		result.push(nodeHostname);
+		result.push(boardData.hostname);
 		return result;
 	}
 
@@ -57,7 +56,7 @@ export const ChangeNode = ({ stations, loadStations }) => {
 					<div class="six columns">
 						<p>
 							<label>{I18n.t('Current status')}</label>
-							<span>{I18n.t('Connected Host')}</span>: {nodeHostname}<br />
+							<span>{I18n.t('Connected Host')}</span>: {boardData.hostname}<br />
 						</p>
 					</div>
 					<div class="six columns">
diff --git a/plugins/lime-plugin-fbw/fbw.create.stories.js b/plugins/lime-plugin-fbw/fbw.create.stories.js
index 466dcc8d..75c4378b 100644
--- a/plugins/lime-plugin-fbw/fbw.create.stories.js
+++ b/plugins/lime-plugin-fbw/fbw.create.stories.js
@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 
 import { NetworkForm } from './src/containers/NetworkForm';
 
-storiesOf('Containers|First boot wizard', module)
+storiesOf('Containers/First boot wizard', module)
 	
 	.add('Create a new network', () => (
 		<NetworkForm
diff --git a/plugins/lime-plugin-fbw/fbw.scan.stories.js b/plugins/lime-plugin-fbw/fbw.scan.stories.js
index 488a00bf..a02fb189 100644
--- a/plugins/lime-plugin-fbw/fbw.scan.stories.js
+++ b/plugins/lime-plugin-fbw/fbw.scan.stories.js
@@ -1,60 +1,52 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, array, text } from '@storybook/addon-knobs/react';
+import { array } from '@storybook/addon-knobs';
 
 import { Scan } from './src/containers/Scan';
-import { AppContext } from 'utils/app.context';
-
-const nodeHostname = text('nodeHostname', 'new-node');
 
 export default {
-	title: 'Containers|First boot wizard',
-	component: Scan,
-	decorators: [withKnobs]
+	title: 'Containers/First boot wizard',
+	component: Scan
 };
 
 export const scanningForNetworks = () => (
-	<AppContext.Provider value={{ nodeHostname }}>
-		<Scan
-			networks={[{ config: {
-				wifi: {}
-			}, file: '' }]}
-			status={'scanning'}
-			searchNetworks={action('searchNetworks')}
-			setNetwork={action('setNetwork')}
-			toggleForm={() => action('toggleForm')}
-		/>
-	</AppContext.Provider>
+	<Scan
+		networks={[{ config: {
+			wifi: {}
+		}, file: '' }]}
+		status={'scanning'}
+		searchNetworks={action('searchNetworks')}
+		setNetwork={action('setNetwork')}
+		toggleForm={() => action('toggleForm')}
+	/>
 );
 
 export const selectNetworks = () => (
-	<AppContext.Provider value={{ nodeHostname }}>
-		<Scan
-			networks={array('Hosts founded',[{
-				ap: 'ql-graciela',
-				config: {
-					wifi: {
-						apname_ssid: 'quintanalibre.org.ar/%H',
-						ap_ssid: 'quintanalibre.org.ar'
-					}
-				},
-				file: 'lime_default-ql-graciela'
+	<Scan
+		networks={array('Hosts founded',[{
+			ap: 'ql-graciela',
+			config: {
+				wifi: {
+					apname_ssid: 'quintanalibre.org.ar/%H',
+					ap_ssid: 'quintanalibre.org.ar'
+				}
+			},
+			file: 'lime_default-ql-graciela'
+		},
+		{
+			ap: 'ql-oncelotes',
+			config: {
+				wifi: {
+					apname_ssid: 'quintanalibre.org.ar/%H',
+					ap_ssid: 'quintanalibre.org.ar'
+				}
 			},
-			{
-				ap: 'ql-oncelotes',
-				config: {
-					wifi: {
-						apname_ssid: 'quintanalibre.org.ar/%H',
-						ap_ssid: 'quintanalibre.org.ar'
-					}
-				},
-				file: 'lime_default-ql-oncelotes'
-			}])}
-			status={'scanned'}
-			searchNetworks={action('searchNetworks')}
-			setNetwork={action('setNetwork')}
-			toggleForm={(data) => () => action('toggleForm')(data)}
-		/>
-	</AppContext.Provider>
+			file: 'lime_default-ql-oncelotes'
+		}])}
+		status={'scanned'}
+		searchNetworks={action('searchNetworks')}
+		setNetwork={action('setNetwork')}
+		toggleForm={(data) => () => action('toggleForm')(data)}
+	/>
 );
diff --git a/plugins/lime-plugin-fbw/fbw.select.stories.js b/plugins/lime-plugin-fbw/fbw.select.stories.js
index 54eaf92d..e09965cb 100644
--- a/plugins/lime-plugin-fbw/fbw.select.stories.js
+++ b/plugins/lime-plugin-fbw/fbw.select.stories.js
@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 
 import { SelectAction } from './src/containers/SelectAction';
 
-storiesOf('Containers|First boot wizard', module)
+storiesOf('Containers/First boot wizard', module)
 	
 	.add('Choose an option', () => (
 		<SelectAction
diff --git a/plugins/lime-plugin-fbw/fbw.setting.stories.js b/plugins/lime-plugin-fbw/fbw.setting.stories.js
index ca91fec1..1e116ad5 100644
--- a/plugins/lime-plugin-fbw/fbw.setting.stories.js
+++ b/plugins/lime-plugin-fbw/fbw.setting.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/preact';
 import { Setting } from './src/containers/Setting';
 import FetchStory from '../../.storybook/mockFetch';
 
-storiesOf('Containers|First boot wizard', module)
+storiesOf('Containers/First boot wizard', module)
 	
 	.add('Applying configuration - Correct network', () => (
 		<FetchStory
diff --git a/plugins/lime-plugin-fbw/src/api.js b/plugins/lime-plugin-fbw/src/api.js
index f663cc69..00987bfd 100644
--- a/plugins/lime-plugin-fbw/src/api.js
+++ b/plugins/lime-plugin-fbw/src/api.js
@@ -1,3 +1,4 @@
+import api from 'utils/uhttpd.service';
 
 export const searchNetworks = (api, rescan) =>
 	api.call('lime-fbw', 'search_networks', { scan: rescan || false });
@@ -7,3 +8,8 @@ export const setNetwork = (api, { file, hostname }) =>
 
 export const createNetwork = (api, { network, hostname, adminPassword }) =>
 	api.call('lime-fbw', 'create_network', { network, hostname, adminPassword });
+
+export const getFbwStatus = () =>
+	api.call('lime-fbw', 'status', {}).toPromise()
+		.catch(() => ({ lock: false }));
+
diff --git a/plugins/lime-plugin-fbw/src/containers/Scan.js b/plugins/lime-plugin-fbw/src/containers/Scan.js
index fd14a13d..8a9cbbe0 100644
--- a/plugins/lime-plugin-fbw/src/containers/Scan.js
+++ b/plugins/lime-plugin-fbw/src/containers/Scan.js
@@ -13,14 +13,14 @@ import { Loading } from 'components/loading';
 import Alert from 'components/alert';
 import { isValidHostname, slugify } from 'utils/isValidHostname';
 import { showNotification } from '../../../../src/store/actions';
-import { useAppContext } from 'utils/app.context';
+import { useBoardData } from 'utils/queries';
 
 export const Scan = ({ searchNetworks, setNetwork, toggleForm, status, networks }) => {
-	const { nodeHostname } = useAppContext();
+	const { data: boardData } = useBoardData();
 	const [state, setState] = useState({
 		createForm: false,
 		error: null,
-		hostname: nodeHostname
+		hostname: boardData.hostname
 	});
 
 	/* Load scan results */
diff --git a/plugins/lime-plugin-fbw/src/queries.js b/plugins/lime-plugin-fbw/src/queries.js
new file mode 100644
index 00000000..5736dec3
--- /dev/null
+++ b/plugins/lime-plugin-fbw/src/queries.js
@@ -0,0 +1,10 @@
+import { useQuery, useMutation } from 'react-query';
+import queryCache from 'utils/queryCache';
+import { getFbwStatus } from './api';
+
+export function useFbwStatus() {
+	return useQuery(['lime-fbw', 'status'], getFbwStatus, {
+		initialData: {lock: false},
+		initialStale: true
+	});
+}
diff --git a/plugins/lime-plugin-firmware/firmware.spec.js b/plugins/lime-plugin-firmware/firmware.spec.js
index 97ce5115..f826272f 100644
--- a/plugins/lime-plugin-firmware/firmware.spec.js
+++ b/plugins/lime-plugin-firmware/firmware.spec.js
@@ -1,51 +1,61 @@
 import { h } from 'preact';
-import { render, fireEvent, cleanup, act } from '@testing-library/preact';
+import { render as tlRender, fireEvent, cleanup, act, screen } from '@testing-library/preact';
 import '@testing-library/jest-dom';
 import waitForExpect from 'wait-for-expect';
 
 import FirmwarePage from './src/firmwarePage';
-import { upgradeConfirmIsAvailable, uploadFile, validateFirmware, upgradeFirmware,
-	upgradeConfirm, upgradeRevert } from './src/firmwareApi';
-import { useAppContext } from 'utils/app.context';
+import { getUpgradeInfo, uploadFile, upgradeFirmware,
+	upgradeConfirm, upgradeRevert, downloadRelease, getDownloadStatus, getNewVersion } from './src/firmwareApi';
 import { route } from 'preact-router';
+import { ReactQueryCacheProvider } from 'react-query';
+import queryCache from 'utils/queryCache';
 
 jest.mock('i18n-js', () => ({
-	t: jest.fn(x => x)
+	t: jest.fn((x, data={}) => {
+		Object.entries(data).forEach(
+			([key, value]) => x = x.replace(new RegExp(String.raw`%{${key}}`), value)
+		)
+		return x;
+	})
 }));
 
 jest.mock('./src/firmwareApi');
-jest.mock('utils/app.context');
-
-const mockUhttpdService = {
-	call: () => {}
-};
 
 const secureRollbackText =
 	/this device supports secure rollback to previous version if something goes wrong/i;
 const noSecureRollbackText =
 	/this device does not support secure rollback to previous version if something goes wrong/i;
 
-function stepSelectFile(getByLabelText) {
-	const fileInput = getByLabelText(/select file/i);
-	const file = new File(['(⌐□_□)'], 'test.bin');
+function flushPromises() {
+	return new Promise(resolve => setImmediate(resolve));
+}
+
+const render = (ui) => tlRender(
+	<ReactQueryCacheProvider queryCache={queryCache}>
+		{ui}
+	</ReactQueryCacheProvider>
+)
+
+async function stepSelectFile(fileName='test.bin') {
+	const fileInput = await screen.findByLabelText(/select file/i);
+	const file = new File(['(⌐□_□)'], fileName);
 	Object.defineProperty(fileInput, 'files', {
 		value: [file]
 	});
+	Object.defineProperty(fileInput, 'value', {
+		value: file.name
+	});
 	return file
 }
 
-function stepSubmit(getByLabelText, getByRole, preserveConfig=true) {
-	if (!preserveConfig) {
-		const preserveConfigCheckbox = getByLabelText(/preserve config/i);
-		fireEvent.click(preserveConfigCheckbox);
-	}
-	const submitButton = getByRole('button', /upgrade/i);
-	fireEvent.click(submitButton);
+async function stepSubmit() {
+	const submitButton = await screen.findByRole('button', {name: /upgrade/i});
+	fireEvent.submit(submitButton);
 }
 
-function triggerUpgrade(getByLabelText, getByRole, preserveConfig=true) {
-	const file = stepSelectFile(getByLabelText);
-	stepSubmit(getByLabelText, getByRole, preserveConfig)
+async function triggerUpgrade() {
+	const file = stepSelectFile();
+	await stepSubmit()
 	return file;
 }
 
@@ -55,15 +65,22 @@ describe('firmware form', () => {
 	})
 
 	beforeEach(() => {
-		upgradeConfirmIsAvailable.mockImplementation(jest.fn(async () => true));
-		uploadFile.mockImplementation(jest.fn(async () => true));
-		validateFirmware.mockImplementation(jest.fn(async () => true));
-		upgradeFirmware.mockImplementation(jest.fn(async () => true));
-		useAppContext.mockImplementation(() => ({uhttpdService: mockUhttpdService}))
+		getUpgradeInfo.mockImplementation(async () => ({
+			suCounter: -1,
+			is_upgrade_confirm_supported: true
+		}));
+		uploadFile.mockImplementation(async () => true);
+		upgradeFirmware.mockImplementation(async () => true);
+		getDownloadStatus.mockImplementation(async () => ({
+			download_status: 'not-initiated'
+		}));
+		getNewVersion.mockImplementation(async () => ({}))
+		downloadRelease.mockImplementation(async () => ({}));
 	});
 
 	afterEach(() => {
 		cleanup();
+		act(() => queryCache.clear());
 	});
 	
 	afterAll(() => {
@@ -71,172 +88,241 @@ describe('firmware form', () => {
 	})
 
 	it('shows up a legend telling confirm-mechanism is available when it is', async () => {
-		upgradeConfirmIsAvailable.mockImplementation(async () => true);
-		const { findByText, queryByText } = render(<FirmwarePage />);
-		expect(await findByText(secureRollbackText)).toBeInTheDocument();
-		expect(queryByText(noSecureRollbackText)).not.toBeInTheDocument();
+		render(<FirmwarePage />);
+		expect(await screen.findByText(secureRollbackText)).toBeInTheDocument();
+		expect(screen.queryByText(noSecureRollbackText)).not.toBeInTheDocument();
 	});
 
 
 	it('shows up a legend telling confirm-mechanism is not available when it is not', async () => {
-		upgradeConfirmIsAvailable.mockImplementation(async () => false);
-		const { findByText, queryByText } = render(<FirmwarePage />);
-		expect(await findByText(noSecureRollbackText)).toBeInTheDocument();
-		expect(queryByText(secureRollbackText)).not.toBeInTheDocument();
-	});
-
-	it('shows up a legend to upload a new firmware image from the device', () => {
-		const { getByText } = render(<FirmwarePage />);
-		expect(getByText(/upload firmware image from your device/i)).toBeInTheDocument();
+		getUpgradeInfo.mockImplementation(async () => ({
+			status: 'ok', suCounter: -1,
+			is_upgrade_confirm_supported: false
+		}));
+		render(<FirmwarePage />);
+		expect(await screen.findByText(noSecureRollbackText)).toBeInTheDocument();
+		expect(screen.queryByText(secureRollbackText)).not.toBeInTheDocument();
 	});
 
-	it('shows up a file input to select a firmware image', () => {
-		const { getByLabelText } = render(<FirmwarePage />);
-		expect(getByLabelText(/select file/i)).toBeInTheDocument();
+	it('shows up a legend to upload a new firmware image from the device', async () => {
+		render(<FirmwarePage />);
+		expect(await screen.findByText(/upload firmware image from your device/i)).toBeInTheDocument();
 	});
 
-	it('shows up checked checkbox to preserve config', () => {
-		const { getByLabelText } = render(<FirmwarePage />);
-		expect(getByLabelText(/preserve config/i)).toBeChecked();
+	it('shows up a file input to select a firmware image', async () => {
+		render(<FirmwarePage />);
+		expect(await screen.findByText(/select file/i)).toBeInTheDocument();
 	});
 
-	it('shows up a button to perform the firmware upgrade', () => {
-		const { getByRole } = render(<FirmwarePage />);
-		expect(getByRole('button', {name: /upgrade/i})).toBeEnabled();
+	it('shows up a button to perform the firmware upgrade', async () => {
+		render(<FirmwarePage />);
+		expect(await screen.findByRole('button', {name: /upgrade/i})).toBeEnabled();
 	});
 
 	it('shows error if upgrading without selecting a file', async () => {
-		const { getByLabelText, getByRole, queryByText, getByText} = render(<FirmwarePage />);
-		expect(queryByText('Please select a file', 'i')).toBeNull()
-		stepSubmit(getByLabelText, getByRole)
-		expect(getByText('Please select a file', 'i')).toBeInTheDocument();
+		render(<FirmwarePage />);
+		expect(screen.queryByText('Please select a file', 'i')).toBeNull()
+		stepSubmit()
+		expect(await screen.findByText('Please select a file', 'i')).toBeInTheDocument();
 	});
 
-	it('calls the cgi-io endpoint to upload the file', async () => {
-		const { uhttpdService } = useAppContext();
-		const { getByLabelText, getByRole} = render(<FirmwarePage />);
-		const file = triggerUpgrade(getByLabelText, getByRole);
-		await waitForExpect(() => {
-			expect(uploadFile).toBeCalledWith(uhttpdService, file);
-		})
+	it('shows error if upgrading with a file with invalid extension', async () => {
+		render(<FirmwarePage />);
+		expect(screen.queryByText('Please select a .sh or .bin file', 'i')).toBeNull()
+		stepSelectFile('myfile.unsupportedextension')
+		stepSubmit()
+		expect(await screen.findByText('Please select a .sh or .bin file', 'i')).toBeInTheDocument();
 	});
 
-	it('calls the firmware validation endpoint once uploaded', async () => {
-		const { getByLabelText, getByRole} = render(<FirmwarePage />);
-		const { uhttpdService } = useAppContext();
-		triggerUpgrade(getByLabelText, getByRole);
+	it('calls uploadFile to upload the file', async () => {
+		render(<FirmwarePage />);
+		const file = await triggerUpgrade();
 		await waitForExpect(() => {
-			expect(validateFirmware).toHaveBeenCalledWith(uhttpdService);
-			expect(validateFirmware).toHaveBeenCalledAfter(uploadFile);
+			expect(uploadFile).toBeCalledWith(file);
 		})
 	});
-
-	it('shows up an error message if firmware validation fails', async () => {
-		uploadFile.mockImplementation(async () => true);
-		validateFirmware.mockImplementation(async () => Promise.reject());
-		const noteText = /the selected image is not a valid for the target device/i;
-		const { getByLabelText, getByRole, queryByText, findByText} = render(<FirmwarePage />);
-		expect(queryByText(noteText)).not.toBeInTheDocument();
-		triggerUpgrade(getByLabelText, getByRole);
-		expect(await findByText(noteText)).toBeInTheDocument();
-	});
-
-	it('calls the firmware upgrade endpoint if validation success', async () => {
-		uploadFile.mockImplementation(async () => true);
-		validateFirmware.mockImplementation(async () => true);
-		const { getByLabelText, getByRole} = render(<FirmwarePage />);
-		const { uhttpdService } = useAppContext();
-		triggerUpgrade(getByLabelText, getByRole);
+	
+	it('calls the firmware upgrade endpoint with the path returned by upload file', async () => {
+		uploadFile.mockImplementation(async () => '/tmp/some/given/path');
+		render(<FirmwarePage />);
+		triggerUpgrade();
 		await waitForExpect(() => {
-			expect(upgradeFirmware).toHaveBeenCalledWith(uhttpdService, true);
-			expect(upgradeFirmware).toHaveBeenCalledAfter(validateFirmware);
+			expect(upgradeFirmware).toHaveBeenCalledWith('/tmp/some/given/path');
 		})
 	});
 
-	it('calls the firmware upgrade endpoint with preserve config when requested', async () => {
-		uploadFile.mockImplementation(async () => true);
-		validateFirmware.mockImplementation(async () => true);
-		const { uhttpdService } = useAppContext();
-		const { getByLabelText, getByRole} = render(<FirmwarePage />);
-		const preserveConfig = true;
-		triggerUpgrade(getByLabelText, getByRole, preserveConfig);
-		await waitForExpect(() => {
-			expect(upgradeFirmware).toHaveBeenCalledWith(uhttpdService, true);
-		})
+	it('shows up an error message if firmware validation fails', async () => {
+		upgradeFirmware.mockImplementation(async () => Promise.reject('Invalid firmware'));
+		const noteText = /The selected image is not valid for the target device/i;
+		render(<FirmwarePage />);
+		expect(screen.queryByText(noteText)).not.toBeInTheDocument();
+		triggerUpgrade();
+		expect(await screen.findByText(noteText)).toBeInTheDocument();
 	});
 
-	it.each`preserveConfig ${true} ${false}
-	`('shows up a legend asking the user to wait for the upgrade to finish preserveConfig: $preserveConfig', async ({preserveConfig}) => {
-		uploadFile.mockImplementation(async () => true);
-		validateFirmware.mockImplementation(async () => true);
-		upgradeFirmware.mockImplementation(async () => true);
-		const { findByText, getByLabelText, getByRole} = render(<FirmwarePage />);
-		triggerUpgrade(getByLabelText, getByRole, preserveConfig);
+	it('shows up a legend asking the user to wait for the upgrade to finish', async () => {
+		render(<FirmwarePage />);
+		triggerUpgrade();
 		const noteText1 = new RegExp(
 			'The firmware is being upgraded...', 'i');
-		expect(await findByText(noteText1)).toBeInTheDocument();
+		expect(await screen.findByText(noteText1)).toBeInTheDocument();
 		const noteText2 = new RegExp(
 			'Please wait patiently for .* seconds and do not disconnect the device', 'i');
-		expect(await findByText(noteText2)).toBeInTheDocument();
+		expect(await screen.findByText(noteText2)).toBeInTheDocument();
 	});
 
-	it('shows a button to reload app after upgrade countdown when preserving config', async () => {
-		uploadFile.mockImplementation(async () => true);
-		validateFirmware.mockImplementation(async () => true);
-		upgradeFirmware.mockImplementation(async () => true);
-		const { getByLabelText, getByRole, findByRole, findByText} = render(<FirmwarePage />);
-		const preserveConfig = true;
-		triggerUpgrade(getByLabelText, getByRole, preserveConfig);
+	it('shows a button to reload app after upgrade', async () => {
+		render(<FirmwarePage />);
+		triggerUpgrade();
 		const noteText1 = new RegExp(
 			'The firmware is being upgraded...', 'i');
-		await findByText(noteText1);
+		await screen.findByText(noteText1);
 		act(() => {
 			jest.advanceTimersByTime(181 * 1000)
 		})
-		expect(await findByRole('button', {name: /try reloading the app/i})).toBeEnabled()
+		expect(await screen.findByRole('button', {name: /try reloading the app/i})).toBeEnabled()
 	});
 
-	it('shows a legend saying the user may switch network after upgrade when not preserving config', async () => {
-		uploadFile.mockImplementation(async () => true);
-		validateFirmware.mockImplementation(async () => true);
-		upgradeFirmware.mockImplementation(async () => true);
-		const { getByLabelText, getByRole, findByText} = render(<FirmwarePage />);
-		const preserveConfig = false;
-		triggerUpgrade(getByLabelText, getByRole, preserveConfig);
+	it('shows up a legend telling the user to confirm the upgrade when it is needed', async () => {
+		render(<FirmwarePage />);
+		triggerUpgrade();
 		const noteText1 = new RegExp(
 			'The firmware is being upgraded...', 'i');
-		await findByText(noteText1);
+		await screen.findByText(noteText1);
 		act(() => {
 			jest.advanceTimersByTime(181 * 1000)
 		})
-		expect(await findByText('You may need to connect to the new wireless network and reload the app')).toBeInTheDocument()
+		const noteText2 = new RegExp(
+			'When reloading the app you will be asked to confirm the upgrade,'
+			+ ' otherwise it will be reverted', 'i');
+		expect(await screen.findByText(noteText2)).toBeInTheDocument();
+
+	})
+
+	it('shows download option when realease is available', async () => {
+		getNewVersion.mockImplementation(async () => ({
+			version: 'SomeNewVersionName'
+		}));
+		render(<FirmwarePage />)
+		expect(await screen.findByText('SomeNewVersionName is now available 🎉')).toBeInTheDocument()
+	})
+
+	it('calls downdloadRelease when selecting download option', async () => {
+		getNewVersion.mockImplementation(async () => ({
+			version: 'SomeNewVersionName'
+		}));
+		render(<FirmwarePage />)
+		const downloadButton = await screen.findByRole('button', {name: /Download/i})
+		fireEvent.click(downloadButton);
+		stepSubmit();
+		await waitForExpect(() => {
+			expect(downloadRelease).toHaveBeenCalled();
+		})
+	})
+
+	it('shows downloading message when downloading new release', async () => {
+		getNewVersion
+			.mockImplementation(async () => ({version: 'SomeNewVersionName'}));
+		getDownloadStatus
+			.mockImplementation(async () => ({download_status: 'downloading'}));
+		render(<FirmwarePage />)
+		expect(await screen.findByText(/Downloading/i)).toBeInTheDocument();
+		expect(await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i}))
+			.toBeDisabled();
+	})
+
+	it('shows an enabled button to upgrade from release when its downloaded', async () => {
+		getNewVersion
+			.mockImplementation(async () => ({version: 'SomeNewVersionName'}));
+		getDownloadStatus
+			.mockImplementation(async () => ({download_status: 'downloaded'}));
+		render(<FirmwarePage />)
+		await flushPromises();
+		expect(await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i}))
+			.toBeEnabled();
+	})
+
+	it('shows up a legend asking to wait for the upgrade to finish when upgrading from release', async () => {
+		getNewVersion
+			.mockImplementation(async () => ({version: 'SomeNewVersionName'}));
+		getDownloadStatus
+			.mockImplementation(async () => (
+				{ download_status: 'downloaded', fw_path: '/tmp/upgrade.sh' }
+			));
+		render(<FirmwarePage />)
+		const upgradeButton = await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i});
+		fireEvent.click(upgradeButton);
+		const noteText1 = new RegExp(
+			'The firmware is being upgraded...', 'i');
+		expect(await screen.findByText(noteText1)).toBeInTheDocument();
+		const noteText2 = new RegExp(
+			'Please wait patiently for .* seconds and do not disconnect the device', 'i');
+		expect(await screen.findByText(noteText2)).toBeInTheDocument();
+	});
+
+	it('calls upgradeFirmware with the fw_path from downloadStatus when upgrading from release', async () => {
+		getNewVersion
+			.mockImplementation(async () => ({version: 'SomeNewVersionName'}));
+		getDownloadStatus
+			.mockImplementation(async () => (
+				{ download_status: 'downloaded', fw_path: '/tmp/upgrade.sh' }
+			));
+		render(<FirmwarePage />)
+		const upgradeButton = await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i});
+		fireEvent.click(upgradeButton);
+		expect(upgradeFirmware).toHaveBeenCalledWith('/tmp/upgrade.sh');
 	});
+
+	it('show downloading message until download finished successfully', async () => {
+		getNewVersion.mockImplementation(jest.fn(async () => ({
+			version: 'SomeNewVersionName'
+		})))
+		getDownloadStatus
+			.mockImplementationOnce(async () => ({download_status: 'not-initiated'}))
+			.mockImplementationOnce(async () => ({download_status: 'downloading'}))
+			.mockImplementationOnce(async () => ({download_status: 'downloaded'}));
+		render(<FirmwarePage />)
+		const downloadButton = await screen.findByRole('button', {name: /Download/i})
+		fireEvent.click(downloadButton);
+		expect(await screen.findByText(/Downloading/i)).toBeInTheDocument();
+		act(() => {
+			jest.advanceTimersByTime(12000);
+		})
+		expect(await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i})).toBeDisabled();
+		act(() => {
+			jest.advanceTimersByTime(12000);
+		})
+		await flushPromises();
+		expect(await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i})).toBeEnabled();
+	})
 });
 
 
 describe('firmware confirm', () => {
 	beforeEach(() => {
 		// Reset default mock implementations
+		getUpgradeInfo.mockImplementation(jest.fn(async () => ({
+			suCounter: 340,
+			is_upgrade_confirm_supported: true
+		})));
 		upgradeConfirm.mockImplementation(jest.fn(async () => true));
 		upgradeRevert.mockImplementation(jest.fn(async () => true));
-		useAppContext.mockImplementation(() => (
-			{uhttpdService: mockUhttpdService, suCounter: 630, stopSuCounter: jest.fn()})
-		);
 	});
 
 	afterEach(() => {
 		cleanup();
+		act(() => queryCache.clear());
 	});
 
-	it('shows two buttons, one for confirm, one for revert', () => {
-		const { getByRole } = render(<FirmwarePage />);
-		expect(getByRole('button', {name: /confirm/i})).toBeEnabled();
-		expect(getByRole('button', {name: /revert/i})).toBeEnabled();
+	it('shows two buttons, one for confirm, one for revert', async () => {
+		render(<FirmwarePage />);
+		expect(await screen.findByRole('button', {name: /confirm/i})).toBeEnabled();
+		expect(await screen.findByRole('button', {name: /revert/i})).toBeEnabled();
 	})
 
 	it('routes to home page when clicking on confirm', async () => {
-		const { getByRole } = render(<FirmwarePage />);
-		const button = getByRole('button', {name: /confirm/i});
+		render(<FirmwarePage />);
+		const button = await screen.findByRole('button', {name: /confirm/i});
 		fireEvent.click(button);
 		await waitForExpect(() => {
 			expect(route).toHaveBeenCalledWith('/')
@@ -244,12 +330,12 @@ describe('firmware confirm', () => {
 	})
 
 	it('shows a legend saying device will reboot when reverting', async () => {
-		const { getByRole, findByText } = render(<FirmwarePage />);
-		const button = getByRole('button', {name: /revert/i});
+		render(<FirmwarePage />);
+		const button = await screen.findByRole('button', {name: /revert/i});
 		fireEvent.click(button);
-		expect(await findByText(
+		expect(await screen.findByText(
 			new RegExp('Reverting to previous version', 'i'))).toBeInTheDocument();
 		const noteText = new RegExp('Please wait while the device reboots, and reload the app', 'i');
-		expect(await findByText(noteText)).toBeInTheDocument();
+		expect(await screen.findByText(noteText)).toBeInTheDocument();
 	})
 })
diff --git a/plugins/lime-plugin-firmware/firmware.stories.js b/plugins/lime-plugin-firmware/firmware.stories.js
index bc1d2f8a..9ecb4fa9 100644
--- a/plugins/lime-plugin-firmware/firmware.stories.js
+++ b/plugins/lime-plugin-firmware/firmware.stories.js
@@ -1,55 +1,45 @@
-import { UpgradeConfirm, UpgradeForm, UpgradeSuccess, UpgradeProgress, UpgradeReverted } from './src/firmwarePage';
 import { SafeUpgradeCountdown } from './src/upgradeCountdown';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, number } from '@storybook/addon-knobs';
+import { UpgradeAvailableBanner, UpgradeAvailabeInfo } from './src/upgradeAvailable';
+import { UpgradingPage } from './src/upgradingPage/upgradingPage';
+import { ConfirmChoices, Reverted } from './src/confirmPage/confirmPage';
 
-const formActions = {
-	onUpgrade: action('onUpgrade'),
-	tooglePreserveConfig: action('tooglePreserveConfig')
-};
+import { UpgradePage } from './src/upgradePage/upgradePage';
 
+const newVersionAvailable = {
+	version: 'LibreRouter 1.5',
+	'release-info-url': 'https://foro.librerouter.org/t/lanzamiento-de-librerouteros-1-3'
+}
 
 export default {
-	title: 'Containers|Firmware Upgrade',
-	decorators: [withKnobs]
+	title: 'Containers/Firmware Upgrade'
 };
 
-export const SafeUpgradeIsAvailable = () => (
-	<UpgradeForm {...formActions} />
-);
-
-export const SafeUpgradeIsNotAvailable = () => (
-	<UpgradeForm upgradeConfirmAvailable={false} {...formActions} />
-);
-
-export const SubmittedWithoutFile = () => (
-	<UpgradeForm fileIsRequiredError={true} {...formActions} />
-);
+export const safeUpgradeAvailabe = () => <UpgradePage />;
 
-export const AnInvalidFirmwareWasUploaded = () => (
-	<UpgradeForm firmwareIsValid={false} {...formActions} />
-);
-
-export const uploadingFile = () => (
-	<UpgradeForm submitting={true} {...formActions} />
-);
-
-export const SuccessfullUpgradePreservingConfig = () => (
-	<UpgradeSuccess preserveConfig={true} />
-);
+safeUpgradeAvailabe.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], {}],
+		[['lime-utils', 'get_upgrade_info'], {
+			is_upgrade_confirm_supported: true
+		}]
+	]
+}
 
-export const SuccessfullUpgradeNotPreservingConfig = () => (
-	<UpgradeSuccess preserveConfig={false} />
-);
+export const safeUpgradeNotAvailable = () => <UpgradePage />;
+safeUpgradeNotAvailable.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], {}],
+		[['lime-utils', 'get_upgrade_info'], {
+			is_upgrade_confirm_supported: false
+		}]
+	]
+}
 
-export const SuccessfullUpgradeHasToConfirm = () => (
-	<UpgradeSuccess preserveConfig={false} upgradeConfirmAvailable={true} />
+export const upgrading = () => (
+	<UpgradingPage />
 );
 
-export const upgradeProgress = () => (
-	<UpgradeProgress elapsedTime={number('elapsedTime', 60)} totalTime={number('totalTime', 180)} />
-)
-
 export const safeUpgradeCountdown = () => (
 	<SafeUpgradeCountdown counter={600} />
 )
@@ -60,13 +50,57 @@ const confirmActions = {
 }
 
 export const upgradeConfirm = () => (
-	<UpgradeConfirm {...confirmActions} />
-)
-
-export const upgradeConfirmSubmitting = () => (
-	<UpgradeConfirm {...confirmActions} submitting={true} />
+	<ConfirmChoices {...confirmActions} />
 )
 
 export const upgradeReverted = () => (
-	<UpgradeReverted />
+	<Reverted />
 )
+
+
+export const newVersionAvailableBanner = () => <UpgradeAvailableBanner />
+newVersionAvailableBanner.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], newVersionAvailable]
+	]
+}
+
+export const newVersionAvailableMoreInfo = () => <UpgradeAvailabeInfo />
+newVersionAvailableMoreInfo.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], newVersionAvailable]
+	]
+}
+
+export const upgradePageWithReleaseAvailable = () => <UpgradePage />
+upgradePageWithReleaseAvailable.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], newVersionAvailable],
+		[['lime-utils', 'get_upgrade_info'], {
+			is_upgrade_confirm_supported: true
+		}],
+		[['eupgrade', 'download_status'], {download_status: 'not-initiated'}]
+	]
+}
+
+export const upgradePageWithReleaseDownloading = () => <UpgradePage />
+upgradePageWithReleaseDownloading.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], newVersionAvailable],
+		[['lime-utils', 'get_upgrade_info'], {
+			is_upgrade_confirm_supported: true
+		}],
+		[['eupgrade', 'download_status'], {download_status: 'downloading'}]
+	]
+}
+
+export const upgradePageWithReleaseDownloaded = () => <UpgradePage />
+upgradePageWithReleaseDownloaded.args = {
+	queries: [
+		[['eupgrade', 'is_new_version_available'], newVersionAvailable],
+		[['lime-utils', 'get_upgrade_info'], {
+			is_upgrade_confirm_supported: true
+		}],
+		[['eupgrade', 'download_status'], {download_status: 'downloaded'}]
+	]
+}
diff --git a/plugins/lime-plugin-firmware/index.js b/plugins/lime-plugin-firmware/index.js
index d599730c..277d0920 100644
--- a/plugins/lime-plugin-firmware/index.js
+++ b/plugins/lime-plugin-firmware/index.js
@@ -1,12 +1,17 @@
 import {h} from 'preact';
 import I18n from 'i18n-js';
 import FirmwarePage from './src/firmwarePage';
+import { UpgradeAvailabeInfo } from './src/upgradeAvailable';
 
 export default {
 	name: 'Firmware',
 	page: FirmwarePage,
 	menu: () => <a href={'#/firmware'}>{I18n.t('Firmware')}</a>,
-	isCommunityProtected: true
+	isCommunityProtected: true,
+	additionalRoutes: [
+		['releaseInfo', UpgradeAvailabeInfo]
+	]
 }
 
 export { SafeUpgradeCountdown } from './src/upgradeCountdown';
+export { UpgradeAvailableBanner } from './src/upgradeAvailable';
diff --git a/plugins/lime-plugin-firmware/src/confirmPage/confirmPage.js b/plugins/lime-plugin-firmware/src/confirmPage/confirmPage.js
new file mode 100644
index 00000000..9342814f
--- /dev/null
+++ b/plugins/lime-plugin-firmware/src/confirmPage/confirmPage.js
@@ -0,0 +1,50 @@
+import { h } from 'preact';
+import { route } from 'preact-router';
+import I18n from 'i18n-js';
+
+import { useUpgradeConfirm, useUpgradeRevert } from '../firmwareQueries';
+import Loading from 'components/loading';
+
+export const ConfirmChoices = ({onConfirm, onRevert, submitting}) => (
+	<div class={`container container-padded container-center`}>
+		<button onClick={onConfirm}>{I18n.t('Confirm')}</button>
+		<p>{I18n.t('to keep the current configuration. Or ...')}</p>
+		<button onClick={onRevert}>{I18n.t('Revert')}</button>
+		<p>{I18n.t('to the previous configuration')}</p>
+		{submitting &&
+			<div>
+				<Loading />
+			</div>
+		}
+	</div>
+);
+
+export const Reverted = () => (
+	<div class={`container container-padded container-center`}>
+		<h3>{I18n.t('Reverting to previous version')}</h3>
+		<span>{I18n.t('Please wait while the device reboots, and reload the app')}</span>
+	</div>
+);
+
+export const ConfirmPage = ({hasReverted, onReverted}) => {
+	const [upgradeConfirm, {isLoading: isConfirming}] = useUpgradeConfirm();
+	const [upgradeRevert, {isLoading: isReverting}] = useUpgradeRevert();
+
+	function onConfirm() {
+		upgradeConfirm().then(() => {
+			route('/');
+		})
+	}
+
+	function onRevert() {
+		upgradeRevert().then(() => {
+			onReverted();
+		})
+	}
+
+	if (hasReverted) {
+		return <Reverted />
+	}
+
+	return <ConfirmChoices onConfirm={onConfirm} onRevert={onRevert} submitting={isConfirming || isReverting} />
+}
diff --git a/plugins/lime-plugin-firmware/src/firmwareApi.js b/plugins/lime-plugin-firmware/src/firmwareApi.js
index a64c5d0e..5daca3db 100644
--- a/plugins/lime-plugin-firmware/src/firmwareApi.js
+++ b/plugins/lime-plugin-firmware/src/firmwareApi.js
@@ -1,22 +1,38 @@
-const FW_PATH = '/tmp/firmware.bin';
+const FW_PATH = {
+	'.sh': '/tmp/upgrade.sh',
+	'.bin': '/tmp/firmware.bin'
+};
 
-export function upgradeConfirmIsAvailable(api) {
-	return api.call('lime-utils', 'get_upgrade_info', {})
-		.toPromise()
-		.then(res => res["is_upgrade_confirm_supported"]);
+import path from 'path';
+import api from 'utils/uhttpd.service';
+
+export function getUpgradeInfo() {
+	return api.call('lime-utils', 'get_upgrade_info', {}).toPromise()
+		.then(response => new Promise((res, rej) => {
+			if (response.status === 'ok') {
+				res({
+					...response,
+					suCounter: Number(response.safe_upgrade_confirm_remaining_s)
+				});
+			}
+			else {
+				rej(response.message);
+			}
+		}));
 }
 
-export function uploadFile(api, file) {
+export function uploadFile(file) {
 	return new Promise((res, rej) => {
 		const request = new XMLHttpRequest();
 		const formData = new FormData();
-
-		formData.append("sessionid", api.sid);
-		formData.append("filename", FW_PATH);
+		const extname = path.extname(file.name);
+		const destPath = FW_PATH[extname] || path.resolve('/tmp/', file.name);
+		formData.append("sessionid", api.sid());
+		formData.append("filename", destPath);
 		formData.append("filedata", file)
 	
 		request.addEventListener('loadend', () => {
-			res(request.responseText);
+			res(destPath);
 		});
 	
 		request.addEventListener('error', (error) => {
@@ -28,24 +44,10 @@ export function uploadFile(api, file) {
 	})
 }
 
-export function validateFirmware(api) {
-	return api.call('lime-utils-admin', 'firmware_verify', {fw_path: FW_PATH})
-		.toPromise()
-		.then(response => new Promise((res, rej) => {
-			if (response.status === 'ok') {
-				res(true)
-			}
-			else {
-				rej(response.message);
-			}
-		}));
-}
-
-export function upgradeFirmware(api, preserveConfig) {
+export function upgradeFirmware(filepath) {
 	return api.call('lime-utils-admin', 'firmware_upgrade',
 		{
-			fw_path: FW_PATH,
-			preserve_config: preserveConfig,
+			fw_path: filepath,
 			metadata: { upgrade_timestamp: (Date.now() / 1000).toFixed(1) } // in seconds;
 		})
 		.toPromise()
@@ -59,7 +61,7 @@ export function upgradeFirmware(api, preserveConfig) {
 		}));
 }
 
-export function upgradeConfirm(api) {
+export function upgradeConfirm() {
 	return api.call('lime-utils-admin', 'firmware_confirm', {})
 		.toPromise()
 		.then(response => new Promise((res, rej) => {
@@ -72,6 +74,18 @@ export function upgradeConfirm(api) {
 		}))
 }
 
-export function upgradeRevert(api) {
+export function upgradeRevert() {
 	return api.call('system', 'reboot', {}).toPromise().then(() => true);
 }
+
+export function getNewVersion() {
+	return api.call("eupgrade", "is_new_version_available", {}).toPromise();
+}
+
+export function getDownloadStatus() {
+	return api.call("eupgrade", "download_status", {}).toPromise();
+}
+
+export function downloadRelease() {
+	return api.call('eupgrade', 'start_download', {}).toPromise();
+}
diff --git a/plugins/lime-plugin-firmware/src/firmwareApi.spec.js b/plugins/lime-plugin-firmware/src/firmwareApi.spec.js
index a48915ae..cd9966b2 100644
--- a/plugins/lime-plugin-firmware/src/firmwareApi.spec.js
+++ b/plugins/lime-plugin-firmware/src/firmwareApi.spec.js
@@ -1,34 +1,35 @@
 import xhrMock from 'xhr-mock';
 import { of } from 'rxjs';
+import api from 'utils/uhttpd.service';
+jest.mock('utils/uhttpd.service')
 
-import { upgradeConfirmIsAvailable, uploadFile, validateFirmware, upgradeFirmware,
+import { getUpgradeInfo, uploadFile, upgradeFirmware,
 	upgradeConfirm, upgradeRevert } from './firmwareApi';
 
-const FW_PATH = '/tmp/firmware.bin';
-
-describe('upgradeConfirmIsAvailable', () => {
+describe('upgradeInfo', () => {
 	it('calls the expected endpoint', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		await upgradeConfirmIsAvailable(uhttpService);
-		expect(uhttpService.call).toBeCalledWith('lime-utils', 'get_upgrade_info', {});
+		api.call.mockImplementation(() => of({status: 'ok'}))
+		await getUpgradeInfo();
+		expect(api.call).toBeCalledWith('lime-utils', 'get_upgrade_info', {});
 	})
 
-	it('resolves to true when it is available', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok', is_upgrade_confirm_supported: true}))
-		};
-		const isAvailable = await upgradeConfirmIsAvailable(uhttpService);
-		expect(isAvailable).toBeTrue();
-	});
-
-	it('resolves to false when it is not', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok', is_upgrade_confirm_supported: false}))
-		};
-		const isAvailable = await upgradeConfirmIsAvailable(uhttpService);
-		expect(isAvailable).toBeFalse();
+	it('resolves to expected object value', async () => {
+		api.call.mockImplementation(() => of(
+			{ status: 'ok',
+			  is_upgrade_confirm_supported: true,
+			  safe_upgrade_confirm_remaining_s: '-1'
+			}));
+		let data = await getUpgradeInfo();
+		expect(data.suCounter).toEqual(-1);
+		expect(data.is_upgrade_confirm_supported).toBeTrue();
+		api.call.mockImplementation(() => of(
+			{ status: 'ok',
+			  is_upgrade_confirm_supported: false,
+			  safe_upgrade_confirm_remaining_s: '340'
+			}));
+		data = await getUpgradeInfo();
+		expect(data.suCounter).toEqual(340);
+		expect(data.is_upgrade_confirm_supported).toBeFalse();
 	});
 });
 
@@ -38,149 +39,99 @@ describe('uploadFile', () => {
 
 	afterEach(() => xhrMock.teardown());
 
-	it('sends expected request to cgi-upload endpoint', async () => {
-		const uhttpService = {
-			sid: '4261b19d65fac6be2552e10d3a351b5c'
-		};
-		const file = new File(['(⌐□_□)'], 'test.bin');
+	it.each([
+		['mycustomfirmware.bin', '/tmp/firmware.bin'],
+		['mysutominstaller.sh', '/tmp/upgrade.sh'],
+		['custom.unkonwnextension', '/tmp/custom.unkonwnextension']
+	])('sends expected request to cgi-upload endpoint %s %s', async (userFileName, uploadedFilename) => {
+		api.sid.mockImplementation(() => '4261b19d65fac6be2552e10d3a351b5c');
+		const file = new File(['(⌐□_□)'], userFileName);
 		xhrMock.post('/cgi-bin/cgi-upload', (req, res) => {
 			const body = req.body();
-			expect(body.get('sessionid')).toEqual(uhttpService.sid);
-			expect(body.get('filename')).toEqual('/tmp/firmware.bin');
+			expect(body.get('sessionid')).toEqual(api.sid());
+			expect(body.get('filename')).toEqual(uploadedFilename);
 			expect(body.get('filedata')).toEqual(file);
 			return res.status(200).body({})
 		});
-		await uploadFile(uhttpService, file);
+		await uploadFile(file);
 	});
 
-	it('resolves to cgi-upload response when the upload finished correctly', async () => {
+	it.each([
+		['mycustomfirmware.bin', '/tmp/firmware.bin'],
+		['mysutominstaller.sh', '/tmp/upgrade.sh'],
+		['custom.unkonwnextension', '/tmp/custom.unkonwnextension']
+	])('resolves to destination path when the upload finished correctly', async (userFileName, uploadedFilename) => {
 		const mockResponse = {
 			size: 5374131,
 			checksum: "ef2949e0070830d49e3930a00f9d1794",
 			sha256sum: "3cf8244acc06dd0d852bb2348e0da4f610dda6f0d3eed5807d4fe12570465a24"
 		};
-		const uhttpService = {
-			sid: '4261b19d65fac6be2552e10d3a351b5c'
-		};
-		const file = new File(['(⌐□_□)'], 'test.bin');
+		api.sid.mockImplementation(() => '4261b19d65fac6be2552e10d3a351b5c');
+		const file = new File(['(⌐□_□)'], userFileName);
 		
 		xhrMock.post('/cgi-bin/cgi-upload',
 			(_req, res) => res.status(200).body(JSON.stringify(mockResponse)));
 
-		const response = await uploadFile(uhttpService, file);
-		expect(JSON.parse(response)).toEqual(mockResponse);
+		const destinationPath = await uploadFile(file);
+		expect(destinationPath).toEqual(uploadedFilename);
 	});
 });
 
-describe('validateFirmware', () => {
-	it('calls the expected endpoint with the expected parameters', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		validateFirmware(uhttpService);
-		expect(uhttpService.call).toBeCalledWith('lime-utils-admin', 'firmware_verify', {fw_path: FW_PATH});
-	});
-
-	it('resolves to true when it is valid', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		const isValid = await validateFirmware(uhttpService);
-		expect(isValid).toBeTrue();
-	});
-
-	it('rejects with backend error message when it is not valid', async () => {
-		const backendMessage = 'Invalid firmware';
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'error', message: backendMessage}))
-		};
-		expect.assertions(1);
-		await expect(validateFirmware(uhttpService)).rejects.toEqual(backendMessage);
-	});
-});
-
-
 describe('upgradeFirmware', () => {
-	it('sends the appropiate request to preserve config', () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		upgradeFirmware(uhttpService, true);
-		const timestamp = (Date.now() / 1000).toFixed(1);
-		expect(uhttpService.call).toBeCalledWith('lime-utils-admin', 'firmware_upgrade',
-			{fw_path: FW_PATH, preserve_config: true, metadata: {upgrade_timestamp: timestamp}});
-	});
-
-	it('sends the appropiate request to not to preserve config', () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		upgradeFirmware(uhttpService, false);
+	beforeEach(() => {
+		api.call.mockImplementation(() => of({status: 'ok'}))
+	})
+	it('sends the appropiate request', () => {
+		upgradeFirmware('some_fw_path');
 		const timestamp = (Date.now() / 1000).toFixed(1);
-		expect(uhttpService.call).toBeCalledWith('lime-utils-admin', 'firmware_upgrade',
-			{fw_path: FW_PATH, preserve_config: false, metadata: {upgrade_timestamp: timestamp}});
+		expect(api.call).toBeCalledWith('lime-utils-admin', 'firmware_upgrade',
+			{fw_path: 'some_fw_path', metadata: {upgrade_timestamp: timestamp}});
 	});
 
 	it('resolves to true when upgrade is successfull', async () => {
-		const upgradeId = 'random_id';
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok', upgrade_id: upgradeId}))
-		};
-		const res = await upgradeFirmware(uhttpService, false);
+		const res = await upgradeFirmware('some_fw_path');
 		expect(res).toBe(true);
 	})
 
 	it('rejects with backend error message when upgrade fails', async () => {
-		const backendMessage = 'Firmware file not found';
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'error', message: backendMessage}))
-		};
+		const backendMessage = 'Invalid firmware';
+		api.call.mockImplementation(() => of({status: 'error', message: backendMessage}));
 		expect.assertions(1);
-		await expect(upgradeFirmware(uhttpService, false)).rejects.toEqual(backendMessage)
+		await expect(upgradeFirmware('some_fw_path')).rejects.toEqual(backendMessage)
 	});
 });
 
 
 describe('upgradeConfirm', () => {
 	it('sends the appropiate request', () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		upgradeConfirm(uhttpService);
-		expect(uhttpService.call).toBeCalledWith('lime-utils-admin', 'firmware_confirm', {});
+		api.call.mockImplementation(() => of({status: 'ok'}));
+		upgradeConfirm();
+		expect(api.call).toBeCalledWith('lime-utils-admin', 'firmware_confirm', {});
 	})
 
 	it('resolves to true on status ok', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'ok'}))
-		};
-		const res = await upgradeConfirm(uhttpService);
+		api.call.mockImplementation(() => of({status: 'ok'}));
+		const res = await upgradeConfirm();
 		expect(res).toBe(true);
 	})
 
 	it('rejects to false on status error', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of({status: 'error'}))
-		};
+		api.call.mockImplementation(() => of({status: 'error'}));
 		expect.assertions(1);
-		await expect(upgradeConfirm(uhttpService)).rejects.toEqual(false);
+		await expect(upgradeConfirm()).rejects.toEqual(false);
 	})
 })
 
 describe('upgradeRevert', () => {
-	it('sends the appropiate request', () => {
-		const uhttpService = {
-			call: jest.fn(() => of(null))
-		};
-		upgradeRevert(uhttpService);
-		expect(uhttpService.call).toBeCalledWith('system', 'reboot', {});
+	it('sends the appropiate request', async () => {
+		api.call.mockImplementation(() => of({status: 'ok'}));
+		await upgradeRevert();
+		expect(api.call).toBeCalledWith('system', 'reboot', {});
 	})
 
 	it('resolves to true on success', async () => {
-		const uhttpService = {
-			call: jest.fn(() => of(null))
-		};
-		const res = await upgradeRevert(uhttpService);
+		api.call.mockImplementation(() => of({status: 'ok'}));
+		const res = await upgradeRevert();
 		expect(res).toBe(true);
 	})
 })
diff --git a/plugins/lime-plugin-firmware/src/firmwarePage.js b/plugins/lime-plugin-firmware/src/firmwarePage.js
index cfd4778f..d78b8dcc 100644
--- a/plugins/lime-plugin-firmware/src/firmwarePage.js
+++ b/plugins/lime-plugin-firmware/src/firmwarePage.js
@@ -1,264 +1,30 @@
-import { h, createRef } from 'preact';
-import I18n from 'i18n-js';
-import style from './style.less';
-import { useState, useEffect } from 'preact/hooks';
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
 
-import { upgradeConfirmIsAvailable, uploadFile, validateFirmware,
-	upgradeFirmware, upgradeConfirm, upgradeRevert} from './firmwareApi';
-import { useAppContext } from 'utils/app.context';
-import ProgressBar from 'components/progressbar';
-import Loading from 'components/loading';
-import { route } from 'preact-router';
+import { ConfirmPage } from './confirmPage/confirmPage';
+import { UpgradePage } from './upgradePage/upgradePage';
+import { UpgradingPage } from './upgradingPage/upgradingPage';
+import { useUpgradeInfo } from './firmwareQueries';
+import { Loading } from 'components/loading';
 
-export const UpgradeConfirm = ({onConfirm, onRevert, submitting}) => (
-	<div class={`container container-padded container-center`}>
-		<button onClick={onConfirm}>{I18n.t('Confirm')}</button>
-		<p>{I18n.t('to keep the current configuration. Or ...')}</p>
-		<button onClick={onRevert}>{I18n.t('Revert')}</button>
-		<p>{I18n.t('to the previous configuration')}</p>
-		{submitting &&
-			<div>
-				<Loading />
-			</div>
-		}
-	</div>
-);
-
-export const UpgradeReverted = () => (
-	<div class={`container container-padded container-center`}>
-		<h3>{I18n.t('Reverting to previous version')}</h3>
-		<span>{I18n.t('Please wait while the device reboots, and reload the app')}</span>
-	</div>
-);
-
-const _UpgradeConfirm = () => {
-	const { uhttpdService, stopSuCounter } = useAppContext();
-	const [reverted, setReverted] = useState(false);
-	const [submitting, setSubmitting] = useState(false);
-
-	function onConfirm() {
-		setSubmitting(true);
-		upgradeConfirm(uhttpdService).then(() => {
-			stopSuCounter();
-			route('/');
-		})
-	}
-
-	function onRevert() {
-		setSubmitting(true);
-		upgradeRevert(uhttpdService).then(() => {
-			stopSuCounter();
-			setReverted(true);
-		})
-	}
-
-	if (reverted) {
-		return <UpgradeReverted />
-	}
-
-	return <UpgradeConfirm onConfirm={onConfirm} onRevert={onRevert} submitting={submitting} />
-}
-
-export const UpgradeSuccess = ({ preserveConfig, onReload, upgradeConfirmAvailable} ) => (
-	<div class="container container-padded container-center">
-		<h3>
-			{I18n.t('The upgrade should be done')}
-		</h3>
-		{preserveConfig &&
-			<button onClick={onReload}>{I18n.t('Try reloading the app')}</button>
-		}
-		{!(preserveConfig) &&
-			<span>{I18n.t('You may need to connect to the new wireless network and reload the app')}</span>
-		}
-		{ upgradeConfirmAvailable &&
-			<span>
-				<b>{I18n.t('When reloading the app you will be asked to confirm the upgrade, otherwise it will be reverted')}</b>
-			</span>
-		}
-	</div>
-)
-export const UpgradeProgress = ({elapsedTime, totalTime}) => {
-	const remainingTime = totalTime - elapsedTime;
-	const progress = elapsedTime / totalTime * 100;
-	return (
-		<div class="container container-padded container-center">
-			<h3>
-				{I18n.t('The firmware is being upgraded...')}
-			</h3>
-			<ProgressBar progress={progress} />
-			<span>{I18n.t('Please wait patiently for %{seconds} seconds and do not disconnect the device.', {seconds: remainingTime})}</span>
-		</div>
-	)
-};
-
-const _UpgradeSubmitted = ({ preserveConfig, upgradeConfirmAvailable }) => {
-	const totalTime = 180;
-	const [elapsedTime, setElapsedTime] = useState(0);
-
-	useEffect(() => {
-		const id = setInterval(() => setElapsedTime(elapsedTime => elapsedTime + 1), 1000)
-		return () => {
-			clearInterval(id);
-		}
-	}, [elapsedTime, setElapsedTime])
-
-
-	function onReload() {
-		window.location = window.origin;
-	}
-
-	if (elapsedTime < totalTime) {
-		return <UpgradeProgress elapsedTime={elapsedTime} totalTime={totalTime} />
-	}
-
-	return <UpgradeSuccess {...{preserveConfig, onReload, upgradeConfirmAvailable}} />
-}
-
-export const UpgradeForm = ({
-	upgradeConfirmAvailable=true,
-	firmwareIsValid,
-	preserveConfig=true,
-	tooglePreserveConfig,
-	fileInputRef,
-	onUpgrade,
-	submitting,
-	fileIsRequiredError
-}) => {
-	
-	const [filename, setfilename] = useState('');
-	const [filesize, setfilesize] = useState(null);
-
-	function onSubmitForm(e) {
-		e.preventDefault();
-		onUpgrade()
-	}
-
-	function onFileChange(e) {
-		const files = e.target.files;
-		if (files.length > 0) {
-			setfilename(files[0].name);
-			setfilesize(files[0].size);
-		}
-		else {
-			setfilename('');
-		}
-	}
-
-	return (
-		<div class="container container-padded">
-			{upgradeConfirmAvailable === true &&
-				<div class={`${style.note} ${style.notePositive}`}>
-					{I18n.t('This device supports secure rollback to previous version if something goes wrong')}
-				</div>
-			}
-			{upgradeConfirmAvailable === false &&
-				<div class={`${style.note} ${style.noteWarning}`}>
-					{I18n.t('This device does not support secure rollback to previous version if something goes wrong')}
-				</div>
-			}
-			<h5>{I18n.t('Upload firmware image from your device')}</h5>
-			<form id="file-upload-form" onSubmit={onSubmitForm}>
-				<label class="button" htmlFor="select-file">{I18n.t('Select file')}</label>
-				<input style={{width: 0}} // Hide the ugly builtin input
-					name="select-file" id="select-file" type="file" ref={fileInputRef}
-					onChange={onFileChange}
-				/>
-				{filename &&
-					<div>
-						<div><b>{I18n.t('Filename')}</b>: {filename}</div>
-						<div><b>{I18n.t('Size')}</b>: {(filesize / 1048576).toFixed(1)} MB</div>
-					</div>
-				}
-				{fileIsRequiredError &&
-					<div><span style={{color: "#923838"}}>{I18n.t('Please select a file')}</span></div>
-				}
-				<label>
-					<input name="preserve-config" id="preserve-config" type="checkbox" checked={preserveConfig} onChange={tooglePreserveConfig} />
-					{I18n.t('Preserve config')}
-				</label>
-				<button type="submit">{I18n.t('Upgrade')}</button>
-			</form>
-			{submitting &&
-				<div>
-					<Loading />
-				</div>
-			}
-			{ firmwareIsValid === false &&
-				<div class={`${style.note} ${style.noteError}`}>
-					{I18n.t('The selected image is not a valid for the target device')}
-				</div>
-			}
-		</div>
-	);
-}
-
-const _UpgradeForm = () => {
-	const { uhttpdService } = useAppContext();
-	const [upgradeConfirmAvailable, setUpgradeConfirmAvailable] = useState(undefined);
-	const [firmwareIsValid, setFirmwareIsValid] = useState(undefined);
-	const [submitSuccess, setSubmitSucces] = useState(undefined);
-	const [preserveConfig, setpreserveConfig] = useState(true);
-	const [submitting, setSubmitting] = useState(false);
-	const [fileName, setFilename] = useState('');
-	const [fileIsRequiredError, setFileIsRequiredError] = useState(false);
-	const fileInputRef = createRef();
-
-	useEffect(() => {
-		upgradeConfirmIsAvailable(uhttpdService)
-			.then((isAvailable) => setUpgradeConfirmAvailable(isAvailable));
-	}, [uhttpdService]);
-
-	function _validateFirmware() {
-		return validateFirmware(uhttpdService)
-			.catch(() => Promise.reject('validation'));
-	}
-
-	function tooglePreserveConfig() {
-		setpreserveConfig(prevVal => !prevVal);
-	}
+const FirmwarePage = ({}) => {
+	const { data: upgradeInfo, isLoading } = useUpgradeInfo();
+	const [state, setUpgradeState] = useState(null);
+	const [hasReverted, setHasReverted] = useState(false);
 
-	function onUpgrade() {
-		setFileIsRequiredError(false);
-		setFirmwareIsValid(undefined);
-		const file = fileInputRef.current.files[0];
-		if (file === undefined) {
-			setFileIsRequiredError(true);
-			return;
-		}
-		setSubmitting(true);
-		setFilename(file.filename);
-		uploadFile(uhttpdService, file)
-			.then(_validateFirmware)
-			.then(() => upgradeFirmware(uhttpdService, preserveConfig))
-			.then(() => setSubmitSucces(true))
-			.catch(error => {
-				switch (error) {
-					case 'validation':
-						setFirmwareIsValid(false);
-						break;
-					default:
-						throw new Error(error);
-				}
-			})
-			.finally(() => setSubmitting(false))
+	if (isLoading) {
+		return (
+			<div class="container container-center">
+				<Loading />
+			</div>)
 	}
-
-	if (submitSuccess) {
-		return <_UpgradeSubmitted {...{preserveConfig, upgradeConfirmAvailable}} />
+	if (upgradeInfo.suCounter > 0 || hasReverted) {
+		return <ConfirmPage hasReverted={hasReverted} onReverted={() => setHasReverted(true)} />
 	}
-
-	return <UpgradeForm {...{upgradeConfirmAvailable, firmwareIsValid,
-		preserveConfig, fileInputRef, fileName, onUpgrade, tooglePreserveConfig, submitting, fileIsRequiredError}} />
-}
-
-const FirmwarePage = ({}) => {
-	const { suCounter } = useAppContext();
-	
-	if (suCounter > 0) {
-		return <_UpgradeConfirm />
+	if (state === 'upgrading') {
+		return <UpgradingPage upgradeConfirmAvailable={upgradeInfo.is_upgrade_confirm_supported} />
 	}
-
-	return <_UpgradeForm />
+	return <UpgradePage onUpgrading={() => setUpgradeState('upgrading')} />
 }
 
 export default FirmwarePage;
diff --git a/plugins/lime-plugin-firmware/src/firmwareQueries.js b/plugins/lime-plugin-firmware/src/firmwareQueries.js
new file mode 100644
index 00000000..f1a3f33d
--- /dev/null
+++ b/plugins/lime-plugin-firmware/src/firmwareQueries.js
@@ -0,0 +1,43 @@
+import { useQuery, useMutation } from 'react-query';
+import queryCache from 'utils/queryCache';
+import { getUpgradeInfo, getNewVersion, getDownloadStatus,
+		 upgradeConfirm, upgradeRevert, downloadRelease} from './firmwareApi'
+
+export function useUpgradeInfo() {
+	return useQuery(["lime-utils", "get_upgrade_info"], getUpgradeInfo, {});
+}
+
+function resetSuCounter() {
+	queryCache.setQueryData(
+		['lime-utils', 'get_upgrade_info'],
+		oldInfo => ({...oldInfo, suCounter: -1 }))
+}
+
+export function useUpgradeConfirm() {
+	return useMutation(upgradeConfirm, {
+		onSuccess: resetSuCounter
+	})
+}
+
+export function useUpgradeRevert() {
+	return useMutation(upgradeRevert, {
+		onSuccess: resetSuCounter
+	})
+}
+
+export function useNewVersion() {
+	return useQuery(["eupgrade", "is_new_version_available"], getNewVersion);
+}
+
+export function useDownloadStatus(queryConfig) {
+	return useQuery(["eupgrade", "download_status"], getDownloadStatus, queryConfig);
+}
+
+export function useDownloadRelease() {
+	return useMutation(downloadRelease, {
+		onSuccess: () => queryCache.setQueryData(
+			['eupgrade', 'download_status'],
+			{download_status: 'downloading'}
+		)}
+	)
+}
diff --git a/plugins/lime-plugin-firmware/src/style.less b/plugins/lime-plugin-firmware/src/style.less
deleted file mode 100644
index e153243c..00000000
--- a/plugins/lime-plugin-firmware/src/style.less
+++ /dev/null
@@ -1,18 +0,0 @@
-.note {
-    padding: 0.5em;
-    margin-bottom: 1em;
-}
-
-.notePositive {
-    background-color: #389256;
-    color: #FFF;
-};
-
-.noteWarning {
-    background-color: #f7a336;
-};
-
-.noteError {
-    background-color: #923838;
-    color: #FFF;
-}
diff --git a/plugins/lime-plugin-firmware/src/upgradeAvailable.js b/plugins/lime-plugin-firmware/src/upgradeAvailable.js
new file mode 100644
index 00000000..b1e5d8a1
--- /dev/null
+++ b/plugins/lime-plugin-firmware/src/upgradeAvailable.js
@@ -0,0 +1,71 @@
+import { route } from 'preact-router';
+import Match from 'preact-router/match';
+import I18n from 'i18n-js';
+import { Fragment } from 'preact';
+import { useNewVersion } from './firmwareQueries';
+import Loading from 'components/loading';
+import { useBoardData } from 'utils/queries';
+
+
+export const UpgradeAvailableBanner = () => {
+	const {data: newVersion} = useNewVersion();
+	const hideReleaseBannerPlease = localStorage.getItem('hideReleaseBannerPlease');
+
+	if (!newVersion || hideReleaseBannerPlease === newVersion.version) return;
+
+	return (
+		<Match>
+			{({path}) => !(['firmware', 'releaseInfo'].includes(path.replace('/', ''))) &&
+				<div class="subheader-notification" style={{backgroundColor: "#923853", color: "#fff"}}>
+					{I18n.t('%{versionName} is now available', { versionName: newVersion.version })}
+					<button onClick={() => route('releaseInfo')}>{I18n.t('See More')}</button>
+				</div>
+			}
+		</Match>
+	)
+}
+
+export const UpgradeAvailabeInfo = () => {
+	const { data: boardData } = useBoardData();
+	const {data: newVersion, isLoading} = useNewVersion();
+	const hideReleaseBannerPlease = localStorage.getItem('hideReleaseBannerPlease');
+
+	if (isLoading) {
+		return (
+			<div className="container container-center">
+				<Loading />
+			</div>
+		)
+	}
+
+	function onNotShowAgain(e) {
+		const value = e.target.checked ? newVersion.version : 'show';
+		localStorage.setItem('hideReleaseBannerPlease', value);
+	}
+
+	return (
+		<div className="container container-padded">
+			<p>
+				<h5>{I18n.t('A new firmware version has been released')}</h5>
+				{I18n.t('Currently your node has version:')}
+				<br />{boardData && boardData.release.description}
+				<br />{I18n.t('You can upgrade to:')}
+				<br />{newVersion.version}
+				{newVersion['realease-info-url'] &&
+					<Fragment>
+						<br />{I18n.t('More details on the release can be found at:')}
+						<br /><a href={newVersion['realease-info-url']}> {newVersion['realease-info-url']} </a>
+					</Fragment>
+				}
+			</p>
+			<label>
+				<input type="checkbox" name="not-show-again" onInput={onNotShowAgain}
+					checked={hideReleaseBannerPlease === newVersion.version} />
+				{I18n.t("Don't show this message again")}
+			</label>
+			<div style={{textAlign: "center"}}>
+				<button onClick={() => route('firmware')}>{I18n.t('Upgrade Now')}</button>
+			</div>
+		</div>
+	)
+}
diff --git a/plugins/lime-plugin-firmware/src/upgradeCountdown.js b/plugins/lime-plugin-firmware/src/upgradeCountdown.js
index fc4e8cf4..2d3b5538 100644
--- a/plugins/lime-plugin-firmware/src/upgradeCountdown.js
+++ b/plugins/lime-plugin-firmware/src/upgradeCountdown.js
@@ -17,7 +17,7 @@ export const SafeUpgradeCountdown = ({ counter }) => {
 	}, [_counter, setcounter])
 
 	return (
-		<div class="su-counter">
+		<div class="subheader-notification" style={{backgroundColor: "#f7a336"}}>
 			<div>{I18n.t('Cofirm upgrade before %{seconds} seconds or it will be reverted', {seconds: _counter})}</div>
 			<button onClick={() => route('firmware')}>{I18n.t('Go!')}</button>
 		</div>
diff --git a/plugins/lime-plugin-firmware/src/upgradePage/style.less b/plugins/lime-plugin-firmware/src/upgradePage/style.less
new file mode 100644
index 00000000..0a12bfe7
--- /dev/null
+++ b/plugins/lime-plugin-firmware/src/upgradePage/style.less
@@ -0,0 +1,49 @@
+.note {
+    padding: 0.5em;
+    margin-bottom: 1em;
+}
+
+.notePositive {
+    background-color: #389256;
+    color: #FFF;
+};
+
+.noteWarning {
+    background-color: #f7a336;
+};
+
+.noteError {
+    background-color: #923838;
+    color: #FFF;
+}
+
+.fileDescription {
+    padding-bottom: 1em;
+}
+
+.upgradeForm {
+    display:flex;
+    flex-direction: column;
+}
+
+.withLoadingEllipsis:after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
+    animation: ellipsis steps(4,end) 900ms infinite;
+    content: "\2026"; /* ascii code for the ellipsis character */
+    width: 0px;
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 20px;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 20px;
+    }
+  }
diff --git a/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js b/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js
new file mode 100644
index 00000000..630b0740
--- /dev/null
+++ b/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js
@@ -0,0 +1,201 @@
+import { h } from 'preact';
+import path from 'path';
+
+import I18n from 'i18n-js';
+import style from './style.less';
+import { useState, useEffect } from 'preact/hooks';
+import { useForm } from 'react-hook-form';
+import Loading from 'components/loading';
+import { uploadFile, upgradeFirmware } from '../firmwareApi';
+import { useUpgradeInfo, useDownloadRelease, useDownloadStatus, useNewVersion} from '../firmwareQueries';
+
+export const SafeUpgradeBadge = () => {
+	const { isLoading, data: upgradeInfo} = useUpgradeInfo();
+	if (isLoading) return;
+
+	const isAvailable = upgradeInfo['is_upgrade_confirm_supported'];
+	return (
+		<div>
+			{isAvailable === true &&
+				<div class={`${style.note} ${style.notePositive}`}>
+					{I18n.t('This device supports secure rollback to previous version if something goes wrong')}
+				</div>
+			}
+			{isAvailable === false &&
+				<div class={`${style.note} ${style.noteWarning}`}>
+					{I18n.t('This device does not support secure rollback to previous version if something goes wrong')}
+				</div>
+			}
+		</div>
+	)
+}
+
+const UpgradeFromRelease = ({onUpgrading, onSwitch}) => {
+	const [pollingInterval, setPollingInterval] = useState(null);
+	const {data: newVersion} = useNewVersion();
+	const versionName = newVersion && newVersion.version;
+	const {data: downloadStatus} = useDownloadStatus({
+		refetchInterval: pollingInterval,
+		enabled: versionName,
+		onSuccess: data => {
+			if (data.download_status === 'downloading') {
+				setPollingInterval(1000);
+			}
+			else {
+				setPollingInterval(null);
+			}
+			return data;
+		}
+	});
+
+	const [downloadRelease] = useDownloadRelease();
+	const filePath = downloadStatus && downloadStatus.fw_path;
+	const status = downloadStatus && downloadStatus.download_status;
+
+	function onDownload() {
+		downloadRelease()
+	}
+	
+	function onUpgrade() {
+		upgradeFirmware(filePath)
+			.then(onUpgrading);
+	}
+	
+	if (!versionName) return;
+
+	return (
+		<div class="container container-padded">
+			<h5>{I18n.t('Upgrade to lastest firmware version')}</h5>
+			<h6>{I18n.t('%{versionName} is now available', { versionName })} 🎉</h6>
+			{status === 'not-initiated' &&
+				<button onClick={onDownload}>{I18n.t('Download')}</button>
+			}
+			{status === 'downloading' &&
+				<div>
+					<div class={style.withLoadingEllipsis}>{I18n.t('Downloading')}</div>
+					<button disabled >{I18n.t('Upgrade to %{versionName}', { versionName })}</button>
+				</div>
+			}
+			{status === 'download-failed' &&
+				<div>
+					<div>{I18n.t('The download failed')}</div>
+					<button onClick={onDownload}>{I18n.t('Retry')}</button>
+				</div>
+			}
+			{status === 'downloaded' &&
+				<button onClick={onUpgrade}>{I18n.t('Upgrade to %{versionName}', { versionName })}</button>
+			}
+			{newVersion['release-info-url'] &&
+				<div>
+					{I18n.t('More info at:')}
+					<a href={newVersion['release-info-url']}> {newVersion['release-info-url']} </a>
+				</div>
+			}
+			<div style={{marginTop: "1em"}}>
+				<a href="#" onClick={onSwitch}>{I18n.t('Or choose a firmware image from your device')} </a>
+			</div>
+		</div>
+	)
+}
+
+export const UpgradeFromFile = ({onUpgrading, onSwitch}) => {
+	const {data: newVersion} = useNewVersion();
+	const [invalidFirmwareError, setinvalidFirmwareError] = useState(false);
+	const {register, handleSubmit, errors, watch, formState } = useForm();
+	const file = watch('file');
+	const { isSubmitting } = formState;
+
+	function onUpgrade(data) {
+		setinvalidFirmwareError(false);
+		const file = data.file[0];
+		uploadFile(file)
+			.then((filepath) => upgradeFirmware(filepath))
+			.then(() => onUpgrading())
+			.catch(error => {
+				switch (error) {
+					case 'Invalid firmware':
+						setinvalidFirmwareError(true);
+						break;
+					default:
+						throw new Error(error);
+				}
+			})
+	}
+
+	function isValidExtname(value) {
+		const extname = path.extname(value[0].name);
+		return extname === '.sh' || extname === '.bin';
+	}
+
+	return (
+		<div class="container container-padded">
+			<SafeUpgradeBadge />
+			<h5><b>{I18n.t('Upload firmware image from your device')}</b></h5>
+			<form id="file-upload-form" onSubmit={handleSubmit(onUpgrade)}>
+				<label class="button" htmlFor="file">{I18n.t('Select file')}</label>
+				<input style={{width: 0}} // Hide the ugly builtin input
+					name="file" id="file" type="file" ref={register({required: true, validate: {validExtname: isValidExtname }})}
+				/>
+				{file && file.length > 0 &&
+					<div>
+						<div><b>{I18n.t('Filename')}</b>: {file[0].name}</div>
+						<div><b>{I18n.t('Size')}</b>: {(file[0].size / 1048576).toFixed(1)} MB</div>
+					</div>
+				}
+				{errors.file && errors.file.type === 'required' &&
+					<p style={{color: "#923838"}}>{I18n.t('Please select a file')}</p>
+				}
+				{errors.file && errors.file.type === 'validExtname' &&
+					<p style={{color: "#923838"}}>{I18n.t('Please select a .sh or .bin file')}</p>
+				}
+				<div>
+					<button type="submit">{I18n.t('Upgrade')}</button>
+				</div>
+			</form>
+			{isSubmitting &&
+				<div>
+					<Loading />
+				</div>
+			}
+			{ invalidFirmwareError &&
+				<div class={`${style.note} ${style.noteError}`}>
+					{I18n.t('The selected image is not valid for the target device')}
+				</div>
+			}
+			{ newVersion && newVersion.version &&
+				<div style={{marginTop: "1em"}}>
+					<a href="#" onClick={onSwitch}>{I18n.t('Or upgrade to latest release')} </a>
+				</div>
+			}
+		</div>
+	)
+}
+
+
+export const UpgradePage = ({onUpgrading}) => {
+	const [fwSource, setfwSource] = useState();
+	const { data: newVersion, isLoading } = useNewVersion();
+
+	useEffect(() => {
+		const defaultSrc = newVersion && newVersion.version ? 'fromRelease' : 'fromFile';
+		setfwSource(defaultSrc);
+	}, [newVersion])
+
+	const switchTo = (fwSource) => (e) => {
+		e.preventDefault();
+		setfwSource(fwSource)
+	}
+
+	if (isLoading) {
+		return <div class="container container-padded"><Loading /></div>
+	}
+	if (fwSource === 'fromRelease') {
+		return <UpgradeFromRelease onUpgrading={onUpgrading}
+			onSwitch={switchTo('fromFile')}
+		/>
+	}
+	return <UpgradeFromFile onUpgrading={onUpgrading}
+		onSwitch={switchTo('fromRelease')}
+	/>
+}
+
diff --git a/plugins/lime-plugin-firmware/src/upgradingPage/upgradingPage.js b/plugins/lime-plugin-firmware/src/upgradingPage/upgradingPage.js
new file mode 100644
index 00000000..7a60e2d4
--- /dev/null
+++ b/plugins/lime-plugin-firmware/src/upgradingPage/upgradingPage.js
@@ -0,0 +1,55 @@
+import { h } from 'preact';
+
+import I18n from 'i18n-js';
+import { useState, useEffect } from 'preact/hooks';
+import ProgressBar from 'components/progressbar';
+
+export const UpgradeSuccess = ({ onReload, upgradeConfirmAvailable} ) => (
+	<div class="container container-padded container-center">
+		<h3>
+			{I18n.t('The upgrade should be done')}
+		</h3>
+		<button onClick={onReload}>{I18n.t('Try reloading the app')}</button>
+		{ upgradeConfirmAvailable &&
+			<span>
+				<b>{I18n.t('When reloading the app you will be asked to confirm the upgrade, otherwise it will be reverted')}</b>
+			</span>
+		}
+	</div>
+)
+export const UpgradeProgress = ({elapsedTime, totalTime}) => {
+	const remainingTime = totalTime - elapsedTime;
+	const progress = elapsedTime / totalTime * 100;
+	return (
+		<div class="container container-padded container-center">
+			<h3>
+				{I18n.t('The firmware is being upgraded...')}
+			</h3>
+			<ProgressBar progress={progress} />
+			<span>{I18n.t('Please wait patiently for %{seconds} seconds and do not disconnect the device.', {seconds: remainingTime})}</span>
+		</div>
+	)
+};
+
+export const UpgradingPage = ({ upgradeConfirmAvailable }) => {
+	const totalTime = 180;
+	const [elapsedTime, setElapsedTime] = useState(0);
+
+	useEffect(() => {
+		const id = setInterval(() => setElapsedTime(elapsedTime => elapsedTime + 1), 1000)
+		return () => {
+			clearInterval(id);
+		}
+	}, [elapsedTime, setElapsedTime])
+
+
+	function onReload() {
+		window.location = window.origin;
+	}
+
+	if (elapsedTime < totalTime) {
+		return <UpgradeProgress elapsedTime={elapsedTime} totalTime={totalTime} />
+	}
+
+	return <UpgradeSuccess {...{onReload, upgradeConfirmAvailable}} />
+}
diff --git a/plugins/lime-plugin-locate/src/locatePage.js b/plugins/lime-plugin-locate/src/locatePage.js
index 58b19f7a..c409627e 100644
--- a/plugins/lime-plugin-locate/src/locatePage.js
+++ b/plugins/lime-plugin-locate/src/locatePage.js
@@ -12,7 +12,7 @@ import { loadLeafLet, loadGoogleMapsApi, homeIcon } from './assetsUtils';
 
 import { Loading } from 'components/loading';
 import style from './style';
-import { useAppContext } from 'utils/app.context';
+import { useBoardData } from 'utils/queries';
 
 const openStreetMapTileString = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
 const openStreetMapAttribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@@ -56,7 +56,7 @@ function getCommunityLayer(nodeHostname, stationLat, stationLon, nodesData) {
 
 const LocatePage = ({ editting, submitting, stationLat, stationLon, nodesData,
 	isCommunityLocation, loadLocation, loadLocationLinks, changeLocation, toogleEdit }) => {
-	const { nodeHostname } = useAppContext();
+	const { data: boardData } = useBoardData();
 	const [loading, setLoading] = useState(true);
 	const [assetError, setAssetError] = useState(false);
 	const [map, setMap] = useState(null);
@@ -135,7 +135,7 @@ const LocatePage = ({ editting, submitting, stationLat, stationLon, nodesData,
 			setCommunityLayer(null);
 		}
 		else {
-			const layer = getCommunityLayer(nodeHostname, stationLat, stationLon, nodesData);
+			const layer = getCommunityLayer(boardData.hostname, stationLat, stationLon, nodesData);
 			layer.addTo(map);
 			setCommunityLayer(layer);
 		}
diff --git a/plugins/lime-plugin-metrics/metrics.stories.js b/plugins/lime-plugin-metrics/metrics.stories.js
index d5cd1f4d..bde04fd3 100644
--- a/plugins/lime-plugin-metrics/metrics.stories.js
+++ b/plugins/lime-plugin-metrics/metrics.stories.js
@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, text, object } from '@storybook/addon-knobs/react';
+import { boolean, object } from '@storybook/addon-knobs';
 
 import { Metrics } from './src/metricsPage';
 import Box from './src/components/box';
-import { AppContext } from 'utils/app.context';
 
 const metricState = {
 	metrics: [
@@ -48,7 +47,6 @@ const metricState = {
 	gateway: '16:cc:20:ff:fe:ad:ae:c8 lapraviana si-vale lpl-ravelocasa'
 };
 
-const nodeHostname = text('nodeHostname', 'ql-anaymarcos');
 const communitySettings = object('communitySettings', {
 	bad_signal: '-82',
 	acceptable_loss: '20',
@@ -126,29 +124,24 @@ const actions = {
 const metricsInProcess = addMetrics(metricState);
 
 export default {
-	title: 'Containers|Metrics',
-	component: Metrics,
-	decorators: [withKnobs]
+	title: 'Containers/Metrics',
+	component: Metrics
 };
 
 export const fullPath = () => (
-	<AppContext.Provider value={{ nodeHostname, communitySettings }}>
-		<Metrics
-			metrics={object('Metrics state', metricState)}
-			node={object('Node status', nodeState)}
-			{...actions}
-		/>
-	</AppContext.Provider>
+	<Metrics
+		metrics={object('Metrics state', metricState)}
+		node={object('Node status', nodeState)}
+		{...actions}
+	/>
 );
 
 export const runningMetrics = () => (
-	<AppContext.Provider value={{ nodeHostname, communitySettings }}>
-		<Metrics
-			metrics={object('Metrics state', metricsInProcess)}
-			node={object('Node status', nodeState)}
-			{...actions}
-		/>
-	</AppContext.Provider>
+	<Metrics
+		metrics={object('Metrics state', metricsInProcess)}
+		node={object('Node status', nodeState)}
+		{...actions}
+	/>
 );
 
 export const metricsBox = () => (
diff --git a/plugins/lime-plugin-metrics/src/metricsPage.js b/plugins/lime-plugin-metrics/src/metricsPage.js
index 75d6ddc6..56857152 100644
--- a/plugins/lime-plugin-metrics/src/metricsPage.js
+++ b/plugins/lime-plugin-metrics/src/metricsPage.js
@@ -14,7 +14,7 @@ import { Box } from 'components/box';
 import I18n from 'i18n-js';
 
 import colorScale from 'simple-color-scale';
-import { useAppContext } from 'utils/app.context';
+import { useBoardData, useCommunitySettings } from 'utils/queries';
 
 const style = {
 	textLoading: {
@@ -47,7 +47,8 @@ const style = {
 };
 
 export const Metrics = ({ getNodeMetrics, getMetricsAll, getMetricsGateway, getInternetStatus, metrics, node }) => {
-	const { nodeHostname, communitySettings } = useAppContext();
+	const { data: boardData } = useBoardData();
+	const { data: communitySettings } = useCommunitySettings();
 	function clickGateway(gateway) {
 		return () => {
 			getMetricsGateway(gateway);
@@ -57,7 +58,7 @@ export const Metrics = ({ getNodeMetrics, getMetricsAll, getMetricsGateway, getI
 
 	function showButton(loading) {
 		if (!loading) {
-			return !isGateway(nodeHostname, metrics.gateway)
+			return !isGateway(boardData.hostname, metrics.gateway)
 				? (
 					<div class="row">
 						<br />
@@ -132,8 +133,8 @@ export const Metrics = ({ getNodeMetrics, getMetricsAll, getMetricsGateway, getI
 	}
 
 	useEffect(() => {
-		if (!nodeHostname) return;
-		getMetricsGateway(nodeHostname);
+		if (!boardData.hostname) return;
+		getMetricsGateway(boardData.hostname);
 		getInternetStatus();
 		colorScale.setConfig({
 			outputStart: 1,
@@ -142,12 +143,12 @@ export const Metrics = ({ getNodeMetrics, getMetricsAll, getMetricsGateway, getI
 			inputEnd: 30
 		});
 		return () => {};
-	},[nodeHostname]);
+	},[boardData]);
 
 	return (
 		<div class="container container-padded" style={{ textAlign: 'center' }}>
 			{metrics.loading? showLoading(metrics.loading) : metrics.error.map(x => showError(x))}
-			<div style={style.box}>{I18n.t('From')+' '+nodeHostname}</div>
+			<div style={style.box}>{I18n.t('From')+' '+boardData.hostname}</div>
 			{metrics.metrics.map((station, key) => (
 				<MetricsBox
 					settings={communitySettings}
diff --git a/plugins/lime-plugin-network-admin/network-admin.stories.js b/plugins/lime-plugin-network-admin/network-admin.stories.js
index 16ecba69..1ffdd0a8 100644
--- a/plugins/lime-plugin-network-admin/network-admin.stories.js
+++ b/plugins/lime-plugin-network-admin/network-admin.stories.js
@@ -2,14 +2,13 @@
 import { h } from 'preact';
 import { storiesOf } from '@storybook/preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean } from '@storybook/addon-knobs/react';
+import { boolean } from '@storybook/addon-knobs';
 
 import { NetAdmin } from './src/netAdminPage';
 
 const submitSharedPassword = action('setSharedPassword');
 
-storiesOf('Containers|Network Configuration screen', module)
-	.addDecorator(withKnobs)
+storiesOf('Containers/Network Configuration screen', module)
 	.add('Change Shared Password', () => (
 		<NetAdmin
 			submitting={boolean('submitting', false)}
diff --git a/plugins/lime-plugin-network-admin/src/netAdminPage.js b/plugins/lime-plugin-network-admin/src/netAdminPage.js
index 36639d93..ff172cc8 100644
--- a/plugins/lime-plugin-network-admin/src/netAdminPage.js
+++ b/plugins/lime-plugin-network-admin/src/netAdminPage.js
@@ -3,7 +3,7 @@ import I18n from 'i18n-js';
 
 import { useState } from 'preact/hooks';
 
-import { useAppContext } from 'utils/app.context';
+import api from 'utils/uhttpd.service';
 
 import { isValidPassword, ValidationMessages } from '../../../src/containers/SharedPasswordForm';
 import Loading from 'components/loading';
@@ -72,13 +72,12 @@ export const NetAdmin = ({ submitting, success, submitSharedPassword }) => {
 };
 
 const NetAdminHOC = () => {
-	const { uhttpdService } = useAppContext();
 	const [submitting, setSubmitting] = useState(false);
 	const [success, setSuccess] = useState(false);
 
 	function submitSharedPassword(password) {
 		setSubmitting(true);
-		return uhttpdService
+		return api
 			.call('lime-utils-admin', 'set_root_password', { password })
 			.toPromise()
 			.then(result => new Promise((res, rej) => {
diff --git a/plugins/lime-plugin-notes/notes.stories.js b/plugins/lime-plugin-notes/notes.stories.js
index db3b24d7..e3b5632e 100644
--- a/plugins/lime-plugin-notes/notes.stories.js
+++ b/plugins/lime-plugin-notes/notes.stories.js
@@ -1,30 +1,24 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs/react';
+import { text, boolean } from '@storybook/addon-knobs';
 
 import { Page } from './src/notesPage';
-import { AppContext } from 'utils/app.context';
 
 const actions = {
 	getNotes: action('getNotes'),
 	setNotes: action('setNotes')
 };
 
-const nodeHostname = text('Hostname', 'ql-anaymarcos');
-
 export default {
-	title: 'Containers|Notes',
-	component: Page,
-	decorators: [withKnobs]
+	title: 'Containers/Notes',
+	component: Page
 };
 
 export const manageNote = () => (
-	<AppContext.Provider value={{ nodeHostname }}>
-		<Page
-			notes={text('Note','This node works great')}
-			loading={boolean('Loading', false)}
-			{...actions}
-		/>
-	</AppContext.Provider>
+	<Page
+		notes={text('Note','This node works great')}
+		loading={boolean('Loading', false)}
+		{...actions}
+	/>
 );
diff --git a/plugins/lime-plugin-notes/src/notesPage.js b/plugins/lime-plugin-notes/src/notesPage.js
index 8d90b708..4dc0a97c 100644
--- a/plugins/lime-plugin-notes/src/notesPage.js
+++ b/plugins/lime-plugin-notes/src/notesPage.js
@@ -10,10 +10,10 @@ import { getNotes, setNotes } from './notesActions';
 import { getNotesState } from './notesSelectors';
 
 import I18n from 'i18n-js';
-import { useAppContext } from 'utils/app.context';
+import { useBoardData } from 'utils/queries';
 
 export const Page = ({ setNotes, getNotes, notes, loading }) => {
-	const { nodeHostname } = useAppContext();
+	const { data: boardData } = useBoardData();
 	const [ value, setValue] = useState(notes || '');
 
 	function handleChange(event) {
@@ -38,7 +38,7 @@ export const Page = ({ setNotes, getNotes, notes, loading }) => {
 
 	return (
 		<div className="container container-padded">
-			<h4><span>{I18n.t('Notes of')}</span> {nodeHostname}</h4>
+			<h4><span>{I18n.t('Notes of')}</span> {boardData.hostname}</h4>
 			<textarea onChange={handleChange} className={style.notes} value={value} />
 			<button disabled={loading} onClick={saveNotes}>{I18n.t('Save notes')}</button>
 		</div>
diff --git a/plugins/lime-plugin-rx/rx.stories.js b/plugins/lime-plugin-rx/rx.stories.js
index 6dd0185f..0fb8218a 100644
--- a/plugins/lime-plugin-rx/rx.stories.js
+++ b/plugins/lime-plugin-rx/rx.stories.js
@@ -1,11 +1,9 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, object, boolean } from '@storybook/addon-knobs/react';
+import { object, boolean } from '@storybook/addon-knobs';
 
 import { Page } from '../lime-plugin-rx/src/rxPage';
-import { AppContext } from 'utils/app.context';
-
 
 const nodeData =  {
 	internet: {
@@ -53,13 +51,6 @@ const nodeData =  {
 	}
 };
 
-const boardData = object('board data', {
-	release: {
-		description: 'LibreRouterOs 1.2-SNAPSHOT r0-21f7665'
-	},
-	model: 'LibreRouter v1'
-});
-
 const actions = {
 	getNodeStatusTimer: action('getNodeStatusTimer'),
 	getNodeStatus: action('getNodeStatus'),
@@ -68,31 +59,22 @@ const actions = {
 };
 
 export default {
-	title: 'Containers|Home Screen (Rx)',
-	component: Page,
-	decorators: [withKnobs]
+	title: 'Containers/Home Screen (Rx)',
+	component: Page
 };
 
-export const withData = () => {
-	return (
-		<AppContext.Provider value={{ boardData }}>
-			<Page
-				nodeData={object('Node data', nodeData)}
-				isLoading={boolean('Is loading', false)}
-				{...actions}
-			/>
-		</AppContext.Provider>
-	);
-};
+export const withData = () => (
+	<Page
+		nodeData={object('Node data', nodeData)}
+		isLoading={boolean('Is loading', false)}
+		{...actions}
+	/>
+);
 
-export const loadingNodeData = () => {
-	return (
-		<AppContext.Provider value={{boardData}}>
-			<Page
-				nodeData={object('Node data', nodeData)}
-				isLoading={boolean('Is loading', true)}
-				{...actions}
-			/>
-		</AppContext.Provider>
-	);
-};
+export const loadingNodeData = () => (
+	<Page
+		nodeData={object('Node data', nodeData)}
+		isLoading={boolean('Is loading', true)}
+		{...actions}
+	/>
+);
diff --git a/plugins/lime-plugin-rx/src/rxPage.js b/plugins/lime-plugin-rx/src/rxPage.js
index 8deff656..c09c7842 100644
--- a/plugins/lime-plugin-rx/src/rxPage.js
+++ b/plugins/lime-plugin-rx/src/rxPage.js
@@ -9,7 +9,7 @@ import { getNodeData, isLoading } from './rxSelectors';
 
 import { Box } from 'components/box';
 import I18n from 'i18n-js';
-import { useAppContext } from 'utils/app.context';
+import { useBoardData } from 'utils/queries';
 
 function stripIface (hostIface) {
 	return hostIface.split('_wlan')[0].replace('_','-');
@@ -75,10 +75,10 @@ const MostActiveBox = ({ node, changeNode }) => {
 };
 
 export const Page = ({ getNodeStatusTimer, getNodeStatus, stopTimer, isLoading, nodeData }) => {
-	const { boardData } = useAppContext();
+	const { data: boardData, isLoading: loadingBoardData } = useBoardData();
 
 	function loading(option, nodeData) {
-		if (!option) {
+		if (!option && !loadingBoardData) {
 			return nodeStatus(nodeData);
 		}
 		return (
diff --git a/src/components/app.js b/src/components/app.js
index 1c6d8f5f..2dfd8dc8 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -1,5 +1,7 @@
 import { h } from 'preact';
 import Router from 'preact-router';
+import { ReactQueryCacheProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query-devtools';
 
 import { Provider } from 'react-redux';
 import { store } from '../store';
@@ -7,8 +9,7 @@ import { history } from '../store/history';
 
 import { plugins } from '../config';
 
-import { AppContextProvider, useAppContext } from '../utils/app.context';
-
+import { AppContextProvider } from '../utils/app.context';
 import { Route, CommunityProtectedRoute, Redirect } from '../utils/routes';
 
 import { Menu } from '../containers/Menu';
@@ -16,7 +17,12 @@ import { Menu } from '../containers/Menu';
 import { Header } from './header';
 import Alert from './alert';
 
-import { SafeUpgradeCountdown } from '../../plugins/lime-plugin-firmware';
+import { SafeUpgradeCountdown, UpgradeAvailableBanner } from '../../plugins/lime-plugin-firmware';
+
+import queryCache from 'utils/queryCache';
+
+import { useUpgradeInfo, useNewVersion } from '../../plugins/lime-plugin-firmware/src/firmwareQueries';
+import { useSession, useLogin } from 'utils/queries';
 
 const Routes = () => (
 	<Router history={history}>
@@ -36,16 +42,52 @@ const Routes = () => (
 					<Component.page />
 				</CommunityProtectedRoute>))
 		}
+		{/* Additional plugins routes */}
+		{plugins
+			.filter(plugin => plugin.additionalRoutes)
+			.map(plugin => plugin.additionalRoutes)
+			.flat()
+			.map(([path, Component]) => {
+				return (
+					<Route path={path}>
+						<Component />
+					</Route>
+				)
+			})
+		}
 		<Redirect default path={'/'} to={'rx'} />
 	</Router>
 );
 
+const SubHeader = () => {
+	const { data: session } = useSession();
+	const { data: upgradeInfo } = useUpgradeInfo({enabled: session.username});
+	const { data: newVersion } = useNewVersion({enabled: session.username});
+	const showSuCountdown = upgradeInfo && upgradeInfo.suCounter > 0;
+	const showNewFirmwareVersion = !showSuCountdown && newVersion && newVersion.version;
+
+	return (
+		<div>
+			{showSuCountdown && <SafeUpgradeCountdown counter={upgradeInfo.suCounter} />}
+			{showNewFirmwareVersion && <UpgradeAvailableBanner />}
+		</div>
+	)
+}
+
 const App = () => {
-	const { suCounter } = useAppContext();
+	const { data: session } = useSession();
+	const [login, {isIdle}] = useLogin();
+
+	if (session.username === null && isIdle) {
+		login({username: 'lime-app', password: 'generic'});
+		return 'Loading...'
+	}
+
 	return (
 		<div id="app">
+			<ReactQueryDevtools />
 			<Header Menu={Menu} />
-			{(suCounter > 0) && <SafeUpgradeCountdown counter={suCounter} />}
+			<SubHeader />
 			<div id="content">
 				<Routes />
 			</div>
@@ -56,11 +98,13 @@ const App = () => {
 
 
 const AppDefault = () => (
-	<AppContextProvider>
-		<Provider store={store}>
-			<App />
-		</Provider>
-	</AppContextProvider>
+	<ReactQueryCacheProvider queryCache={queryCache}>
+		<AppContextProvider>
+			<Provider store={store}>
+				<App />
+			</Provider>
+		</AppContextProvider>
+	</ReactQueryCacheProvider>
 );
 
 export default AppDefault;
diff --git a/src/components/header/index.js b/src/components/header/index.js
index cc6129e3..4b7ac58d 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -2,9 +2,11 @@ import { h, Fragment } from 'preact';
 import { useState } from 'preact/hooks';
 import { useAppContext } from '../../utils/app.context';
 import style from './style';
+import { useBoardData } from 'utils/queries';
 
 export const Header = ({ Menu }) => {
-	const { nodeHostname, menuEnabled } = useAppContext();
+	const { data: boardData } = useBoardData();
+	const { menuEnabled } = useAppContext();
 	const [ menuOpened, setMenuOpened ] = useState(false);
 	
 	function toggleMenu() {
@@ -14,7 +16,7 @@ export const Header = ({ Menu }) => {
 	return (
 		<Fragment>
 			<header class={style.header}>
-				<h1>{nodeHostname || 'LiMe'}</h1>
+				<h1>{boardData.hostname}</h1>
 				{menuEnabled &&
 				<div className={`${style.hamburger} ${menuOpened ? style.isActive : ''}`}
 					onClick={toggleMenu}
diff --git a/src/containers/SharedPasswordLogin/sharedPasswordLogin.js b/src/containers/SharedPasswordLogin/sharedPasswordLogin.js
index 004f8290..db3cb2d4 100644
--- a/src/containers/SharedPasswordLogin/sharedPasswordLogin.js
+++ b/src/containers/SharedPasswordLogin/sharedPasswordLogin.js
@@ -1,7 +1,7 @@
-import { useAppContext } from '../../utils/app.context';
 import I18n from 'i18n-js';
 import { useState, useEffect } from 'preact/hooks';
 import Loading from '../../components/loading';
+import { useLogin } from 'utils/queries';
 
 const loadingBoxStyle = {
 	position: 'fixed',
@@ -60,38 +60,26 @@ const SharedPasswordLogin = ({ submitting, error, submitLogin }) => {
 };
 
 const TryToLoginAutomatically = () => {
-	const [hasPassword, sethasPassword] = useState(undefined);
-	const { loginAsRoot } = useAppContext();
+	const [login, {isError}] = useLogin();
 
 	useEffect(() => {
-		loginAsRoot('')
-			.catch(() => sethasPassword(true));
-	}, [sethasPassword, loginAsRoot]);
+		login({username: 'root', password: ''});
+	}, [login]);
 
-	if (hasPassword === undefined) {
-		return <div class="container container-center"><Loading /></div>
-	}
-	if (hasPassword === true) {
+	if (isError) {
 		return <SharedPasswordLoginHOC />
 	}
-	return hasPassword
+	return <div class="container container-center"><Loading /></div>
 }
 
 const SharedPasswordLoginHOC = () => {
-	const { loginAsRoot } = useAppContext();
-	const [submitting, setSubmitting] = useState('');
-	const [error, setError] = useState('');
+	const [login, {isLoading, isError}] = useLogin();
 
 	function submitLogin (password) {
-		setSubmitting(true);
-		loginAsRoot(password)
-			.catch(() => {
-				setError(true);
-				setSubmitting(false);
-			});
+		login({username: 'root', password})
 	}
 
-	return <SharedPasswordLogin submitting={submitting} error={error} submitLogin={submitLogin} />;
+	return <SharedPasswordLogin submitting={isLoading} error={isError} submitLogin={submitLogin} />;
 };
 
 export default TryToLoginAutomatically;
diff --git a/src/style/index.less b/src/style/index.less
index 82439cc7..3e46f51f 100755
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -28,6 +28,7 @@ html, body {
 #content {
 	flex:auto;
 	display: flex;
+	overflow: auto;
 }
 
 .container-padded {
@@ -43,10 +44,9 @@ html, body {
 	text-align: center;
 }
 
-.su-counter {
+.subheader-notification {
 	display: flex;
 	flex-direction: row;
-	background-color: #f7a336;
 	padding: 0.5em;
 	align-items: center;
 	button {
diff --git a/src/utils/app.context.js b/src/utils/app.context.js
index cdbab7f6..46c6505f 100644
--- a/src/utils/app.context.js
+++ b/src/utils/app.context.js
@@ -1,17 +1,6 @@
 /* eslint-disable react/sort-comp */
 import { createContext, Component } from 'preact';
 import { useContext } from 'preact/hooks';
-import uhttpdService from './uhttpd.service';
-
-const UNAUTH_SESSION_ID = '00000000000000000000000000000000';
-const DEFAULT_TIMEOUT = 5000;
-const DEFAULT_COMMUNITY_SETTINGS = {
-	bad_signal: '-82',
-	acceptable_loss: '20',
-	bad_bandwidth: '1',
-	good_signal: '-65',
-	good_bandwidth: '5'
-};
 
 /** Context used to pass application wise data and services to nested components */
 export const AppContext = createContext();
@@ -20,98 +9,17 @@ export class AppContextProvider extends Component {
 
 	constructor(props) {
 		super(props);
-		this.loginAsRoot = this.loginAsRoot.bind(this);
 		this.cancelFbw = this.cancelFbw.bind(this);
 		this.setMenuEnabled = this.setMenuEnabled.bind(this);
-		this.stopSuCounter = this.stopSuCounter.bind(this);
 		this.state = {
-			uhttpdService,
-			nodeHostname: null,
-			boardData: null,
-			loading: true,
-			unexpectedError: false,
-			fbwConfigured: true,
 			fbwCanceled: false,
-			isRoot: false,
-			communitySettings: {},
-			suCounter: null,
 			menuEnabled: true,
-			loginAsRoot: this.loginAsRoot,
 			cancelFbw: this.cancelFbw,
-			setMenuEnabled: this.setMenuEnabled,
-			stopSuCounter: this.stopSuCounter
+			setMenuEnabled: this.setMenuEnabled
 		};
 		this.initialState = this.state;
 	}
 
-	componentDidMount(){
-		this._login('lime-app', 'generic')
-			.then(() => {
-				this.setState({ loading: false });
-			})
-			.then(() => Promise.all(
-				[this._fetchBoardData(),
-					this._fetchCommunitySettings(),
-					this._fetchFBWStatus(),
-					this._fetchUpgradeInfo()]
-			))
-			.then(([boardData, communitySettings, fbwStatus, upgradeInfo]) => {
-				this.setState({
-					nodeHostname: boardData.hostname,
-					boardData,
-					communitySettings: { ...DEFAULT_COMMUNITY_SETTINGS, ...communitySettings },
-					fbwConfigured: !fbwStatus.lock,
-					suCounter: Number(upgradeInfo.safe_upgrade_confirm_remaining_s)
-				});
-			})
-			.catch((error) => {
-				console.error(error);
-				this.setState({ unexpectedError: true });
-			});
-	}
-
-
-	_fetchBoardData() {
-		return this.state.uhttpdService.call('system', 'board', {}).toPromise();
-	}
-
-	_fetchCommunitySettings() {
-		return this.state.uhttpdService.call('lime-utils', 'get_community_settings', {}).toPromise()
-			.catch(() => Promise.resolve(DEFAULT_COMMUNITY_SETTINGS));
-	}
-
-	_fetchFBWStatus() {
-		return this.state.uhttpdService.call('lime-fbw', 'status', {}).toPromise()
-			.catch(() => ({lock: false}));
-	}
-
-	_fetchUpgradeInfo() {
-		return this.state.uhttpdService.call('lime-utils', 'get_upgrade_info', {}).toPromise();
-	}
-
-	_login(username, password) {
-		const observable = this.state.uhttpdService.call('session', 'login',
-			{ username, password, timeout: DEFAULT_TIMEOUT }, UNAUTH_SESSION_ID);
-		return observable.toPromise()
-			.then(response =>
-				new Promise((res, rej) => {
-					if (response.ubus_rpc_session) {
-						this.state.uhttpdService.setSid(response.ubus_rpc_session);
-						res(response);
-					}
-					else {
-						rej(response);
-					}
-				}));
-	}
-
-
-	/** Passed down throw app context to allow components to login as root */
-	loginAsRoot(password) {
-		return this._login('root', password)
-			.then(() => this.setState({ isRoot: true }));
-	}
-
 	cancelFbw() {
 		this.setState({ fbwCanceled: true });
 	}
@@ -120,10 +28,6 @@ export class AppContextProvider extends Component {
 		this.setState({ menuEnabled: value });
 	}
 
-	stopSuCounter() {
-		this.setState({ suCounter: -1 })
-	}
-
 	render () {
 		return (
 			<AppContext.Provider value={this.state}>
diff --git a/src/utils/queries.js b/src/utils/queries.js
new file mode 100644
index 00000000..ab9eed4e
--- /dev/null
+++ b/src/utils/queries.js
@@ -0,0 +1,64 @@
+import api from './uhttpd.service';
+import { useQuery, useMutation } from 'react-query';
+import queryCache from './queryCache';
+
+
+function getSession() {
+	return api.call('session', 'get', {ubus_rpc_session: api.sid()})
+		.toPromise()
+		.then(res => res.values);
+}
+
+
+export function useSession() {
+	return useQuery(['session', 'get'], getSession, {
+		initialData: {
+			username: null
+		}
+	})
+}
+
+function login({username, password}) {
+	return api.login(username, password)
+}
+
+export function useLogin() {
+	return useMutation(login, {
+		onSuccess: res => {
+			queryCache.setQueryData(['session', 'get'], () => res.data)
+		}
+	});
+}
+
+function getBoardData() {
+	return api.call('system', 'board', {}).toPromise();
+}
+
+export function useBoardData() {
+	return useQuery(['system', 'board'], getBoardData, {
+		initialData: {hostname: 'LiMe'},
+		initialStale: true
+	});
+}
+
+const DEFAULT_COMMUNITY_SETTINGS = {
+	bad_signal: '-82',
+	acceptable_loss: '20',
+	bad_bandwidth: '1',
+	good_signal: '-65',
+	good_bandwidth: '5'
+}
+
+
+function getCommunitySettings() {
+	return api.call('lime-utils', 'get_community_settings', {}).toPromise()
+		.then(res => ({...res, DEFAULT_COMMUNITY_SETTINGS }))
+		.catch(() => DEFAULT_COMMUNITY_SETTINGS);
+}
+
+export function useCommunitySettings() {
+	return useQuery(['lime-utils', 'get_community_settings'], getCommunitySettings, {
+		initialData: DEFAULT_COMMUNITY_SETTINGS,
+		initialStale: true
+	})
+}
diff --git a/src/utils/queryCache.js b/src/utils/queryCache.js
new file mode 100644
index 00000000..18e79f99
--- /dev/null
+++ b/src/utils/queryCache.js
@@ -0,0 +1,19 @@
+import { QueryCache, setConsole } from 'react-query';
+
+setConsole({
+	log: () => {},
+	warn: () => {},
+	error: () => {}
+})
+
+const queryCache = new QueryCache({
+	defaultConfig: {
+		queries: {
+			staleTime: Infinity,
+			refetchOnMount: false,
+			retry: 0
+		}
+	}
+});
+
+export default queryCache;
diff --git a/src/utils/routes.js b/src/utils/routes.js
index 803768b1..a76c4258 100644
--- a/src/utils/routes.js
+++ b/src/utils/routes.js
@@ -2,41 +2,24 @@ import { useAppContext } from './app.context';
 import { SharedPasswordLogin } from '../containers/SharedPasswordLogin';
 import { route } from 'preact-router';
 import { useEffect } from 'preact/hooks';
-import { Loading } from '../components/loading';
-import I18n from 'i18n-js';
+import { useSession } from './queries';
+import { useFbwStatus } from '../../plugins/lime-plugin-fbw/src/queries';
 import { FbwBanner } from '../../plugins/lime-plugin-fbw/src/containers/FbwBanner';
 
-
 export const Route = ({ path, children }) => {
-	const { suCounter, loading, fbwConfigured, fbwCanceled, unexpectedError } = useAppContext();
-
-	if (unexpectedError) {
-		return (
-			<div class="container container-center">
-				{I18n.t('Un unexpected error occurred, please contact the developer team')}
-			</div>
-		);
-	}
-
-	if (loading) {
-		return (
-			<div class="container container-center">
-				<Loading />;
-			</div>
-		);
-	}
+	const { data: fbwStatus } = useFbwStatus();
+	const { fbwCanceled } = useAppContext();
 
-	const tryingToConfirmUpgrade = (path === 'firmware') && (suCounter > 0);
-	if (!fbwConfigured && !fbwCanceled && !tryingToConfirmUpgrade && path !== 'firstbootwizard') {
-		return <FbwBanner />;
+	if (fbwStatus.lock && !fbwCanceled && path !== 'firmware' && path !== 'releaseInfo' && path !=='firstbootwizard') {
+		return <FbwBanner />
 	}
 
 	return children;
 };
 
 export const CommunityProtectedRoute = ({ path, children }) => {
-	const { isRoot } = useAppContext();
-	if (!isRoot) {
+	const { data: session } = useSession();
+	if (session.username !== 'root') {
 		return <Route path={path}><SharedPasswordLogin /></Route>;
 	}
 	return <Route path={path}>{children}</Route>;
diff --git a/src/utils/uhttpd.service.js b/src/utils/uhttpd.service.js
index 4e824e61..79cb6edb 100644
--- a/src/utils/uhttpd.service.js
+++ b/src/utils/uhttpd.service.js
@@ -16,21 +16,19 @@ String.prototype.hashCode = function() {
 
 const getHash = (json ) => Promise.resolve(json.hashCode());
 
+const UNAUTH_SESSION_ID = '00000000000000000000000000000000';
+const DEFAULT_SESSION_TIMEOUT = 5000;
+
 export class UhttpdService {
 	constructor(){
 		this.url = window.origin + '/ubus';
-		this.sid = '00000000000000000000000000000000';
 		this.jsonrpc = '2.0';
 		this.sec = 0;
 		this.requestList = [];
 	}
 
-	setSid(sessionId){
-		this.sid = sessionId;
-	}
-
-	getSid() {
-		return this.sid;
+	sid() {
+		return sessionStorage.getItem('sid');
 	}
 
 	addId(){
@@ -54,7 +52,8 @@ export class UhttpdService {
 
 	request(payload, customSid=null) {
 		return new Promise((res, rej) => {
-			getHash(JSON.stringify([customSid || this.sid, ...payload])).then(hash => {
+			const sid = customSid || this.sid();
+			getHash(JSON.stringify([sid, ...payload])).then(hash => {
 				if (this.requestList.filter(x => x.hash === hash).length > 0) {
 					this.requestList.filter(x => x.hash === hash)[0].callbacks = [...this.requestList.filter(x => x.hash === hash)[0].callbacks, { res,rej }];
 					return;
@@ -68,7 +67,7 @@ export class UhttpdService {
 						id,
 						jsonrpc: this.jsonrpc,
 						method: 'call',
-						params: [customSid || this.sid, ...payload]
+						params: [sid, ...payload]
 					}, { timeout: 15000 })
 						.then(x => {
 							const callbacks = this.requestList.filter(x => x.id === id)[0].callbacks;
@@ -95,6 +94,20 @@ export class UhttpdService {
 		return from(this.request([action, method, data], customSid));
 	}
 
+	login(username, password) {
+		const data = { username, password, timeout: DEFAULT_SESSION_TIMEOUT };
+		return this.request(['session', 'login', data], UNAUTH_SESSION_ID)
+			.then(response =>
+				new Promise((res, rej) => {
+					if (response.ubus_rpc_session) {
+						sessionStorage.setItem('sid', response.ubus_rpc_session);
+						res(response);
+					}
+					else {
+						rej(response);
+					}
+				}));
+	}
 }
 
 const uhttpdService = new UhttpdService();
diff --git a/stories/components/alert.stories.js b/stories/components/alert.stories.js
index 16e23907..a0c0f405 100644
--- a/stories/components/alert.stories.js
+++ b/stories/components/alert.stories.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, text } from '@storybook/addon-knobs/react';
+import { text } from '@storybook/addon-knobs';
 
 import Alert from 'components/alert';
 
@@ -13,8 +13,7 @@ const sampleText = 'Lorem ipsum dolor sit amet';
 
 export default {
 	title: 'Alert',
-	component: Alert,
-	decorators: [withKnobs]
+	component: Alert
 };
 
 export const showAlert = () => (
diff --git a/stories/components/banner.stories.js b/stories/components/banner.stories.js
index e22d1daa..94d5bcc3 100644
--- a/stories/components/banner.stories.js
+++ b/stories/components/banner.stories.js
@@ -1,7 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
 import { action } from '@storybook/addon-actions';
-import { withKnobs } from '@storybook/addon-knobs/react';
 
 import { Banner } from 'components/banner';
 
@@ -13,8 +12,7 @@ const actions = {
 
 export default {
 	title: 'Banner',
-	component: Banner,
-	decorator: [withKnobs]
+	component: Banner
 };
 
 export const likeFBW = () => {
diff --git a/stories/components/box.stories.js b/stories/components/box.stories.js
index 09005eca..6c282e1e 100644
--- a/stories/components/box.stories.js
+++ b/stories/components/box.stories.js
@@ -1,12 +1,11 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from 'preact';
-import { withKnobs, text } from '@storybook/addon-knobs/react';
+import { text } from '@storybook/addon-knobs';
 
 import { Box } from 'components/box';
 
 export default {
-	title: 'Box',
-	decorators: [withKnobs]
+	title: 'Box'
 };
 
 export const basicBox = () =>
diff --git a/stories/components/header.stories.js b/stories/components/header.stories.js
index 8acbedd1..ff0c8a48 100644
--- a/stories/components/header.stories.js
+++ b/stories/components/header.stories.js
@@ -4,25 +4,23 @@ import { h } from 'preact';
 import { Header } from 'components/header';
 import { Menu } from '../../src/containers/Menu';
 import { AppContext } from 'utils/app.context';
-import { text, boolean, withKnobs } from '@storybook/addon-knobs/react';
+import { boolean } from '@storybook/addon-knobs';
 
 const menuEnabled = boolean('menuEnabled', true);
-const nodeHostname = text('nodeHostname', 'ql-anaymarcos');
 
 export default {
 	title: 'Header',
-	component: Header,
-	decorators: [withKnobs]
+	component: Header
 };
 
 export const withMenuDisabled = () => (
-	<AppContext.Provider value={{ nodeHostname, menuEnabled: !menuEnabled }}>
+	<AppContext.Provider value={{ menuEnabled: !menuEnabled }}>
 		<Header Menu={Menu} />
 	</AppContext.Provider>
 );
 
 export const withMenuEnabled = () => (
-	<AppContext.Provider value={{ nodeHostname, menuEnabled }}>
+	<AppContext.Provider value={{ menuEnabled }}>
 		<Header Menu={Menu} />
 	</AppContext.Provider>
 );