diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index 60b2777..d9fa564 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -22,11 +22,14 @@
 	import { auth } from '$lib/core/stores/auth';
 	import { isUserAdmin } from '$lib/core/admin/adminService';
 	import { referenceFromPage } from '$lib/core/stores/recipeStore';
+	import { env } from '$env/dynamic/public';
 
 	let sideBar: HTMLElement | null = $state(null);
 	let isSideBarOpen: boolean = $state(true);
 	let isAdmin: boolean = $state(false);
 
+	const app_version = env.PUBLIC_APP_VERSION;
+
 	const data = {
 		navMain: [
 			{
@@ -134,16 +137,17 @@
 	});
 
 	let authorizedNavMain = $derived(
-		data.navMain.map(nav => {
-			const filteredItems = nav.items.filter(item => {
-				if (!item.requirePerm) return true;
+		data.navMain
+			.map((nav) => {
+				const filteredItems = nav.items.filter((item) => {
+					if (!item.requirePerm) return true;
 
-				return needPermission(item.requirePerm);
-			});
+					return needPermission(item.requirePerm);
+				});
 
-			return { ...nav, items: filteredItems };
-			
-		}).filter(nav => nav.items.length > 0)
+				return { ...nav, items: filteredItems };
+			})
+			.filter((nav) => nav.items.length > 0)
 	);
 
 	let {
@@ -160,6 +164,9 @@
 				<TaobinLogo size={isSideBarOpen ? 96 : 24} fillColor={'#FFFFFF'} />
 			</button>
 		</div>
+		<p class="justify-center text-center font-mono text-[8px] text-muted-foreground">
+			{app_version ?? ''}
+		</p>
 	</Sidebar.Header>
 	<Sidebar.Content>
 		{#each authorizedNavMain as nav}
diff --git a/src/lib/components/recipe-details/recipe-detail.svelte b/src/lib/components/recipe-details/recipe-detail.svelte
index 9344a8f..bc4115a 100644
--- a/src/lib/components/recipe-details/recipe-detail.svelte
+++ b/src/lib/components/recipe-details/recipe-detail.svelte
@@ -213,17 +213,15 @@
 				<Tabs.Trigger value="info">Info</Tabs.Trigger>
 				<Tabs.Trigger value="details">Details</Tabs.Trigger>
 			</Tabs.List>
-			{#if refPage === 'brew'}
-				<div>
-					<Button type="button" variant="default" onclick={() => saveRecipe()}>Save</Button>
+			<div>
+				<Button type="button" variant="default" onclick={() => saveRecipe()}>Save</Button>
 
-					{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == ''}
-						<Button type="button" variant="default" onclick={async () => sendTriggerBrewNow()}
-							>Test Brew</Button
-						>
-					{/if}
-				</div>
-			{/if}
+				{#if refPage === 'brew' && ($machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == '')}
+					<Button type="button" variant="default" onclick={async () => sendTriggerBrewNow()}
+						>Test Brew</Button
+					>
+				{/if}
+			</div>
 		</div>
 
 		<Tabs.Content value="info">
diff --git a/src/lib/core/stores/websocketStore.ts b/src/lib/core/stores/websocketStore.ts
index 88bfee9..9653cf7 100644
--- a/src/lib/core/stores/websocketStore.ts
+++ b/src/lib/core/stores/websocketStore.ts
@@ -17,6 +17,10 @@ export function connectToWebsocket() {
 	if (browser) {
 		// console.log('connecting to ', env.PUBLIC_WSS);
 		try {
+			if (socket != null) {
+				return;
+			}
+
 			socket = new WebSocket(`${env.PUBLIC_WSS}`);
 
 			socket.addEventListener('open', () => {
@@ -62,6 +66,16 @@ export function connectToWebsocket() {
 						});
 					}
 				}, 10000);
+
+				if (auth.currentUser && socket == null) {
+					console.log('try reconnect websocket ...');
+					// retry again
+					setTimeout(() => {
+						if (socket == null) {
+							connectToWebsocket();
+						}
+					}, 5000);
+				}
 			});
 
 			socket.addEventListener('message', (event) => {