diff --git a/dist/index.html b/dist/index.html
index 16e68cd..6fa0abc 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -5815,9 +5815,10 @@ function autofocus(node, condition = true) {
 }
 //#endregion
 //#region src/components/LockScreen.svelte
-var root_1$7 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-7sq1ct" role="alert"> </div>`);
-var root_2$6 = /* @__PURE__ */ from_html(`<div class="form-group"><label for="confirm-password">Confirm Password</label> <input id="confirm-password" type="password" placeholder="Confirm master password" autocomplete="new-password"/></div>`);
-var root$7 = /* @__PURE__ */ from_html(`<div class="lock-screen svelte-7sq1ct"><div class="lock-card svelte-7sq1ct"><div class="lock-icon svelte-7sq1ct">🔐</div> <h1 class="svelte-7sq1ct">Password Vault</h1> <p class="subtitle svelte-7sq1ct"> </p> <!> <form class="lock-form svelte-7sq1ct"><div class="form-group"><label for="master-password">Master Password</label> <input id="master-password" type="password" placeholder="Enter master password" autocomplete="current-password"/></div> <!> <button type="submit" class="btn btn-primary w-full"> </button></form> <p class="hint svelte-7sq1ct"> </p></div></div>`);
+var root_1$7 = /* @__PURE__ */ from_html(`<div class="warning-banner svelte-7sq1ct" role="alert">This HTML file is intended for offline use.</div>`);
+var root_2$6 = /* @__PURE__ */ from_html(`<div class="error-banner svelte-7sq1ct" role="alert"> </div>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<div class="form-group"><label for="confirm-password">Confirm Password</label> <input id="confirm-password" type="password" placeholder="Confirm master password" autocomplete="new-password"/></div>`);
+var root$7 = /* @__PURE__ */ from_html(`<div class="lock-screen svelte-7sq1ct"><div class="lock-card svelte-7sq1ct"><div class="lock-icon svelte-7sq1ct">🔐</div> <h1 class="svelte-7sq1ct">Password Vault</h1> <p class="subtitle svelte-7sq1ct"> </p> <!> <!> <form class="lock-form svelte-7sq1ct"><div class="form-group"><label for="master-password">Master Password</label> <input id="master-password" type="password" placeholder="Enter master password" autocomplete="current-password"/></div> <!> <button type="submit" class="btn btn-primary w-full"> </button></form> <p class="hint svelte-7sq1ct"> </p></div></div>`);
 function LockScreen($$anchor, $$props) {
 	push($$props, true);
 	let masterPassword = /* @__PURE__ */ state("");
@@ -5825,6 +5826,7 @@ function LockScreen($$anchor, $$props) {
 	let error = /* @__PURE__ */ state("");
 	let loading = /* @__PURE__ */ state(false);
 	let isSetup = /* @__PURE__ */ state(false);
+	let notLocal = /* @__PURE__ */ user_derived(() => typeof window !== "undefined" && window.location.protocol !== "file:");
 	async function checkVault() {
 		set(isSetup, !await isVaultInitialized());
 	}
@@ -5886,36 +5888,43 @@ function LockScreen($$anchor, $$props) {
 	reset(p);
 	var node = sibling(p, 2);
 	var consequent = ($$anchor) => {
-		var div_2 = root_1$7();
-		var text_1 = child(div_2, true);
-		reset(div_2);
-		template_effect(() => set_text(text_1, get(error)));
-		append($$anchor, div_2);
+		append($$anchor, root_1$7());
 	};
 	if_block(node, ($$render) => {
-		if (get(error)) $$render(consequent);
+		if (get(notLocal)) $$render(consequent);
 	});
-	var form = sibling(node, 2);
-	var div_3 = child(form);
-	var input = sibling(child(div_3), 2);
+	var node_1 = sibling(node, 2);
+	var consequent_1 = ($$anchor) => {
+		var div_3 = root_2$6();
+		var text_1 = child(div_3, true);
+		reset(div_3);
+		template_effect(() => set_text(text_1, get(error)));
+		append($$anchor, div_3);
+	};
+	if_block(node_1, ($$render) => {
+		if (get(error)) $$render(consequent_1);
+	});
+	var form = sibling(node_1, 2);
+	var div_4 = child(form);
+	var input = sibling(child(div_4), 2);
 	remove_input_defaults(input);
 	effect(() => bind_value(input, () => get(masterPassword), ($$value) => set(masterPassword, $$value)));
 	action(input, ($$node) => autofocus?.($$node));
-	reset(div_3);
-	var node_1 = sibling(div_3, 2);
-	var consequent_1 = ($$anchor) => {
-		var div_4 = root_2$6();
-		var input_1 = sibling(child(div_4), 2);
+	reset(div_4);
+	var node_2 = sibling(div_4, 2);
+	var consequent_2 = ($$anchor) => {
+		var div_5 = root_3$6();
+		var input_1 = sibling(child(div_5), 2);
 		remove_input_defaults(input_1);
-		reset(div_4);
+		reset(div_5);
 		template_effect(() => input_1.disabled = get(loading));
 		bind_value(input_1, () => get(confirmPassword), ($$value) => set(confirmPassword, $$value));
-		append($$anchor, div_4);
+		append($$anchor, div_5);
 	};
-	if_block(node_1, ($$render) => {
-		if (get(isSetup)) $$render(consequent_1);
+	if_block(node_2, ($$render) => {
+		if (get(isSetup)) $$render(consequent_2);
 	});
-	var button = sibling(node_1, 2);
+	var button = sibling(node_2, 2);
 	var text_2 = child(button, true);
 	reset(button);
 	reset(form);
@@ -7835,6 +7844,17 @@ label {
     text-align: center;
   }
 
+  .warning-banner.svelte-7sq1ct {
+    width: 100%;
+    padding: 10px 14px;
+    background: rgba(255, 193, 7, 0.15);
+    border: 1px solid rgba(230, 168, 0, 0.5);
+    border-radius: var(--radius-md);
+    color: #b8860b;
+    font-size: 0.85rem;
+    text-align: center;
+  }
+
   .hint.svelte-7sq1ct {
     font-size: 0.75rem;
     color: var(--color-text-muted);
diff --git a/src/components/LockScreen.svelte b/src/components/LockScreen.svelte
index d3b89cd..0e5f1e2 100644
--- a/src/components/LockScreen.svelte
+++ b/src/components/LockScreen.svelte
@@ -11,6 +11,7 @@
   let error = $state('')
   let loading = $state(false)
   let isSetup = $state(false)
+  let notLocal = $derived(typeof window !== 'undefined' && window.location.protocol !== 'file:')
 
   // Check if vault was already created
   async function checkVault() {
@@ -87,6 +88,10 @@
     <h1>Password Vault</h1>
     <p class="subtitle">{isSetup ? 'Create your vault' : 'Unlock your vault'}</p>
 
+    {#if notLocal}
+      <div class="warning-banner" role="alert">This HTML file is intended for offline use.</div>
+    {/if}
+
     {#if error}
       <div class="error-banner" role="alert">{error}</div>
     {/if}
@@ -189,6 +194,17 @@
     text-align: center;
   }
 
+  .warning-banner {
+    width: 100%;
+    padding: 10px 14px;
+    background: rgba(255, 193, 7, 0.15);
+    border: 1px solid rgba(230, 168, 0, 0.5);
+    border-radius: var(--radius-md);
+    color: #b8860b;
+    font-size: 0.85rem;
+    text-align: center;
+  }
+
   .hint {
     font-size: 0.75rem;
     color: var(--color-text-muted);