diff --git a/src/lib/components/GlobalSidebar.svelte b/src/lib/components/GlobalSidebar.svelte
index 52a1dd56..246942ba 100644
--- a/src/lib/components/GlobalSidebar.svelte
+++ b/src/lib/components/GlobalSidebar.svelte
@@ -174,6 +174,22 @@
 	<!-- Navigation Items -->
 	<nav class="z-10 flex flex-1 flex-col overflow-y-auto pr-2" style="z-index: 10000;">
 		<ul class="space-y-1">
+			{#if !sidebarStore.isOpen}
+				<li class="mx-3 border-t {getDarkMode() ? 'border-slate-500/30' : 'border-gray-200/30'}">
+					<a
+						onclick={() => {
+							sidebarStore.toggle();
+							startLoading();
+						}}
+						class="flex items-center justify-center rounded-lg p-2 transition-all duration-200 hover:scale-105
+							{getDarkMode()
+							? 'text-slate-400 hover:bg-slate-700/50 hover:text-white'
+							: 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'}"
+					>
+						<MaterialIcon name="menu" size="medium" />
+					</a>
+				</li>
+			{/if}
 			{#each navigationItems as item, index}
 				<li>
 					<a
@@ -209,23 +225,19 @@
 			{/each}
 		</ul>
 		<span class="flex flex-auto"></span>
-		<button
-			onclick={handleLogout}
-			class="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors duration-200
+		{#if sidebarStore.isOpen}
+			<button
+				onclick={handleLogout}
+				class="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors duration-200
 				{getDarkMode() ? 'bg-emerald-600/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700'}
 				{getDarkMode()
-				? 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
-				: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}"
-		>
-			<!-- {#if sidebarStore.isOpen}
-				<MaterialIcon name="arrow_menu_close" size="medium" />
-				<span class="font-medium">{$_('Close')}</span>
-			{:else}
-				<MaterialIcon name="arrow_menu_open" size="medium" />
-			{/if} -->
-			<MaterialIcon name="logout" size="medium" />
-			{$_('Logout')}
-		</button>
+					? 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
+					: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}"
+			>
+				<MaterialIcon name="logout" size="medium" />
+				{$_('Logout')}
+			</button>
+		{/if}
 		<ul class="space-y-1">
 			<li class="mx-3 border-t {getDarkMode() ? 'border-slate-500/30' : 'border-gray-200/30'}"></li>
 			<li>
diff --git a/src/lib/i18n/locales/en.ts b/src/lib/i18n/locales/en.ts
index 2e13fcce..d0d10d90 100644
--- a/src/lib/i18n/locales/en.ts
+++ b/src/lib/i18n/locales/en.ts
@@ -134,6 +134,32 @@ export const strings = {
 		'An unexpected error occurred. Please try again.',
 	'Registration failed. Please try again.': 'Registration failed. Please try again.',
 
+	// Password Reset/Update
+	'Forgot Password': 'Forgot Password',
+	'Reset Password': 'Reset Password',
+	'Update Password': 'Update Password',
+	'New Password': 'New Password',
+	'Confirm New Password': 'Confirm New Password',
+	'Enter your new password': 'Enter your new password',
+	'Confirm your new password': 'Confirm your new password',
+	'Minimum 8 characters required': 'Minimum 8 characters required',
+	'Please enter your new password below.': 'Please enter your new password below.',
+	'Your password has been successfully updated!': 'Your password has been successfully updated!',
+	'You can now log in with your new password.': 'You can now log in with your new password.',
+	'Go to login': 'Go to login',
+	'Updating Password...': 'Updating Password...',
+	'Password updated successfully! You can now log in with your new password.':
+		'Password updated successfully! You can now log in with your new password.',
+	'Failed to update password': 'Failed to update password',
+	"Enter your email address and we'll send you a link to reset your password.":
+		"Enter your email address and we'll send you a link to reset your password.",
+	'Send reset link': 'Send reset link',
+	'Sending...': 'Sending...',
+	'Password reset link sent to your email.': 'Password reset link sent to your email.',
+	'Back to login': 'Back to login',
+	'If an account exists with the email': 'If an account exists with the email',
+	"you'll receive a password reset link shortly.": "you'll receive a password reset link shortly.",
+
 	// Header
 	'IoT Dashboard': 'IoT Dashboard',
 	Welcome: 'Welcome',
diff --git a/src/lib/i18n/locales/ja.ts b/src/lib/i18n/locales/ja.ts
index 0263ebfb..18e4b459 100644
--- a/src/lib/i18n/locales/ja.ts
+++ b/src/lib/i18n/locales/ja.ts
@@ -131,6 +131,29 @@ export const strings = {
 	forgot_password: 'パスワードを忘れた',
 	'Reset Password': 'パスワードをリセット',
 	reset_password: 'パスワードをリセット',
+	'Update Password': 'パスワードを更新',
+	'New Password': '新しいパスワード',
+	'Confirm New Password': '新しいパスワードを確認',
+	'Enter your new password': '新しいパスワードを入力してください',
+	'Confirm your new password': '新しいパスワードを確認してください',
+	'Minimum 8 characters required': '最低8文字が必要です',
+	'Please enter your new password below.': '下に新しいパスワードを入力してください。',
+	'Your password has been successfully updated!': 'パスワードが正常に更新されました！',
+	'You can now log in with your new password.': '新しいパスワードでログインできます。',
+	'Go to login': 'ログインに移動',
+	'Updating Password...': 'パスワード更新中...',
+	'Password updated successfully! You can now log in with your new password.':
+		'パスワードが正常に更新されました！新しいパスワードでログインできます。',
+	'Failed to update password': 'パスワードの更新に失敗しました',
+	"Enter your email address and we'll send you a link to reset your password.":
+		'メールアドレスを入力していただければ、パスワードリセット用のリンクをお送りします。',
+	'Send reset link': 'リセットリンクを送信',
+	'Sending...': '送信中...',
+	'Password reset link sent to your email.': 'パスワードリセットリンクがメールに送信されました。',
+	'Back to login': 'ログインに戻る',
+	'If an account exists with the email': 'メールでアカウントが存在する場合',
+	"you'll receive a password reset link shortly.":
+		'まもなくパスワードリセットリンクを受け取ります。',
 	Email: 'メール',
 	email: 'メール',
 	password: 'パスワード',
@@ -410,8 +433,6 @@ export const strings = {
 	'Back to Devices': 'デバイス一覧に戻る',
 	'Contact Support': 'サポートに連絡',
 	'Go to Device Settings': 'デバイス設定へ',
-	'Send reset link': '📧 パスワードリセットリンクを送信',
-	'Back to login': 'ログインに戻る',
 	'Authentication Error': '認証エラー',
 	'There was a problem with your authentication request. Please try signing in again on the login page. If you continue to experience issues, please contact our support team for additional help.':
 		'認証リクエストに問題が発生しました。再度ログインページからサインインしてください。問題が解決しない場合は、サポートチームまでご連絡ください。',
diff --git a/src/lib/services/AuthService.ts b/src/lib/services/AuthService.ts
index 9a31d279..5192f1b7 100644
--- a/src/lib/services/AuthService.ts
+++ b/src/lib/services/AuthService.ts
@@ -7,201 +7,203 @@ import type { IAuthService } from '../interfaces/IAuthService';
  * This service handles user authentication operations
  */
 export class AuthService implements IAuthService {
-  /**
-   * Constructor with SupabaseClient dependency
-   */
-  constructor(
-    private supabase: SupabaseClient,
-    private errorHandler: ErrorHandlingService
-  ) { }
-
-  /**
-   * Sign in with email and password using Supabase Auth
-   * @param email User email
-   * @param password User password
-   * @returns Promise with the session or null if authentication failed
-   */
-  async signInWithPassword(email: string, password: string): Promise<{ user: any; session: any } | null> {
-    try {
-      const { data, error } = await this.supabase.auth.signInWithPassword({
-        email,
-        password
-      });
-
-      if (error) {
-        this.errorHandler.logError(error);
-        return null;
-      }
-
-      return data;
-    } catch (error) {
-      this.errorHandler.logError(error as Error);
-      return null;
-    }
-  }
-
-  /**
-   * Sign out the current user
-   * @returns Promise indicating success
-   */
-  async signOut(): Promise<void> {
-    try {
-      // Use local scope to ensure we only sign out the current browser session
-      const { error } = await this.supabase.auth.signOut({
-        scope: 'local', // Only sign out the current browser session
-        
-      });
-
-      if (error) {
-        this.errorHandler.logError(error);
-      }
-    } catch (error) {
-      this.errorHandler.logError(error as Error);
-    }
-  }
-
-  /**
-   * Get the current session
-   * @returns Promise with the session or null if not authenticated
-   */
-  async getSession(): Promise<{ user: any; session: any } | null> {
-    try {
-      const { data, error } = await this.supabase.auth.getSession();
-
-      if (error) {
-        this.errorHandler.logError(error);
-        return null;
-      }
-
-      return data.session ? { user: data.session.user, session: data.session } : null;
-    } catch (error) {
-      this.errorHandler.logError(error as Error);
-      return null;
-    }
-  }
-
-  /**
-   * Register a new user with Supabase Auth and store profile data
-   * @param userData User registration data including email, password, and profile
-   * @returns Promise with success status and error message if applicable
-   */
-  async register(userData: {
-    email: string;
-    password: string;
-    firstName: string;
-    lastName: string;
-    company: string;
-  }): Promise<{ 
-    success: boolean; 
-    error?: string;
-    emailConfirmationRequired?: boolean;
-  }> {
-    try {
-      // Create user account with Supabase Auth
-      const { data: authData, error: authError } = await this.supabase.auth.signUp({
-        email: userData.email,
-        password: userData.password,
-        options: {
-          data: {
-            first_name: userData.firstName,
-            last_name: userData.lastName,
-            company: userData.company,
-            full_name: `${userData.firstName} ${userData.lastName}`
-          }
-        }
-      });
-
-      if (authError) {
-        this.errorHandler.logError(authError);
-        return {
-          success: false,
-          error: authError.message
-        };
-      }
-
-      if (!authData.user) {
-        return {
-          success: false,
-          error: 'User registration failed'
-        };
-      }
-
-      // Check if email confirmation is required
-      const emailConfirmationRequired = !authData.user.email_confirmed_at;
-      
-      return {
-        success: true,
-        emailConfirmationRequired,
-        error: emailConfirmationRequired ? 
-          'Please check your email to confirm your account before logging in' : 
-          undefined
-      };
-    } catch (error) {
-      this.errorHandler.logError(error as Error);
-      return {
-        success: false,
-        error: 'An unexpected error occurred during registration'
-      };
-    }
-  }
-
-  /**
-   * Sends password reset email to the provided email address
-   * @param email Email address to send password reset link to
-   * @returns Promise with success status and error message if applicable
-   */
-  async resetPassword(email: string): Promise<{ success: boolean; error?: string }> {
-    try {
-      const { error } = await this.supabase.auth.resetPasswordForEmail(email, {
-        redirectTo: `${this.getRedirectUrl()}/auth/reset-password`
-      });
-
-      if (error) {
-        this.errorHandler.logError(error);
-        return { success: false, error: error.message };
-      }
-
-      return { success: true };
-    } catch (err) {
-      this.errorHandler.logError(err as Error);
-      return { success: false, error: 'Failed to send password reset email' };
-    }
-  }
-
-  /**
-   * Updates the user password after reset
-   * @param newPassword New password to set
-   * @returns Promise with success status and error message if applicable
-   */
-  async updatePassword(newPassword: string): Promise<{ success: boolean; error?: string }> {
-    try {
-      const { error } = await this.supabase.auth.updateUser({
-        password: newPassword
-      });
-
-      if (error) {
-        this.errorHandler.logError(error);
-        return { success: false, error: error.message };
-      }
-
-      return { success: true };
-    } catch (err) {
-      this.errorHandler.logError(err as Error);
-      return { success: false, error: 'Failed to update password' };
-    }
-  }
-
-  /**
-   * Gets the redirect URL based on the environment
-   * @returns The base URL for redirects
-   */
-  private getRedirectUrl(): string {
-    // If running in a browser, use the current origin
-    if (typeof window !== 'undefined') {
-      return window.location.origin;
-    }
-    
-    // Otherwise use environment variables or a default
-    return process.env.PUBLIC_SITE_URL || 'https://cropwatch.io';
-  }
-}
\ No newline at end of file
+	/**
+	 * Constructor with SupabaseClient dependency
+	 */
+	constructor(
+		private supabase: SupabaseClient,
+		private errorHandler: ErrorHandlingService
+	) {}
+
+	/**
+	 * Sign in with email and password using Supabase Auth
+	 * @param email User email
+	 * @param password User password
+	 * @returns Promise with the session or null if authentication failed
+	 */
+	async signInWithPassword(
+		email: string,
+		password: string
+	): Promise<{ user: any; session: any } | null> {
+		try {
+			const { data, error } = await this.supabase.auth.signInWithPassword({
+				email,
+				password
+			});
+
+			if (error) {
+				this.errorHandler.logError(error);
+				return null;
+			}
+
+			return data;
+		} catch (error) {
+			this.errorHandler.logError(error as Error);
+			return null;
+		}
+	}
+
+	/**
+	 * Sign out the current user
+	 * @returns Promise indicating success
+	 */
+	async signOut(): Promise<void> {
+		try {
+			// Use local scope to ensure we only sign out the current browser session
+			const { error } = await this.supabase.auth.signOut({
+				scope: 'local' // Only sign out the current browser session
+			});
+
+			if (error) {
+				this.errorHandler.logError(error);
+			}
+		} catch (error) {
+			this.errorHandler.logError(error as Error);
+		}
+	}
+
+	/**
+	 * Get the current session
+	 * @returns Promise with the session or null if not authenticated
+	 */
+	async getSession(): Promise<{ user: any; session: any } | null> {
+		try {
+			const { data, error } = await this.supabase.auth.getSession();
+
+			if (error) {
+				this.errorHandler.logError(error);
+				return null;
+			}
+
+			return data.session ? { user: data.session.user, session: data.session } : null;
+		} catch (error) {
+			this.errorHandler.logError(error as Error);
+			return null;
+		}
+	}
+
+	/**
+	 * Register a new user with Supabase Auth and store profile data
+	 * @param userData User registration data including email, password, and profile
+	 * @returns Promise with success status and error message if applicable
+	 */
+	async register(userData: {
+		email: string;
+		password: string;
+		firstName: string;
+		lastName: string;
+		company: string;
+	}): Promise<{
+		success: boolean;
+		error?: string;
+		emailConfirmationRequired?: boolean;
+	}> {
+		try {
+			// Create user account with Supabase Auth
+			const { data: authData, error: authError } = await this.supabase.auth.signUp({
+				email: userData.email,
+				password: userData.password,
+				options: {
+					data: {
+						first_name: userData.firstName,
+						last_name: userData.lastName,
+						company: userData.company,
+						full_name: `${userData.firstName} ${userData.lastName}`
+					}
+				}
+			});
+
+			if (authError) {
+				this.errorHandler.logError(authError);
+				return {
+					success: false,
+					error: authError.message
+				};
+			}
+
+			if (!authData.user) {
+				return {
+					success: false,
+					error: 'User registration failed'
+				};
+			}
+
+			// Check if email confirmation is required
+			const emailConfirmationRequired = !authData.user.email_confirmed_at;
+
+			return {
+				success: true,
+				emailConfirmationRequired,
+				error: emailConfirmationRequired
+					? 'Please check your email to confirm your account before logging in'
+					: undefined
+			};
+		} catch (error) {
+			this.errorHandler.logError(error as Error);
+			return {
+				success: false,
+				error: 'An unexpected error occurred during registration'
+			};
+		}
+	}
+
+	/**
+	 * Sends password reset email to the provided email address
+	 * @param email Email address to send password reset link to
+	 * @returns Promise with success status and error message if applicable
+	 */
+	async resetPassword(email: string): Promise<{ success: boolean; error?: string }> {
+		try {
+			const { error } = await this.supabase.auth.resetPasswordForEmail(email, {
+				redirectTo: `${this.getRedirectUrl()}/auth/update-password`
+			});
+
+			if (error) {
+				this.errorHandler.logError(error);
+				return { success: false, error: error.message };
+			}
+
+			return { success: true };
+		} catch (err) {
+			this.errorHandler.logError(err as Error);
+			return { success: false, error: 'Failed to send password reset email' };
+		}
+	}
+
+	/**
+	 * Updates the user password after reset
+	 * @param newPassword New password to set
+	 * @returns Promise with success status and error message if applicable
+	 */
+	async updatePassword(newPassword: string): Promise<{ success: boolean; error?: string }> {
+		try {
+			const { error } = await this.supabase.auth.updateUser({
+				password: newPassword
+			});
+
+			if (error) {
+				this.errorHandler.logError(error);
+				return { success: false, error: error.message };
+			}
+
+			return { success: true };
+		} catch (err) {
+			this.errorHandler.logError(err as Error);
+			return { success: false, error: 'Failed to update password' };
+		}
+	}
+
+	/**
+	 * Gets the redirect URL based on the environment
+	 * @returns The base URL for redirects
+	 */
+	private getRedirectUrl(): string {
+		// If running in a browser, use the current origin
+		if (typeof window !== 'undefined') {
+			return window.location.origin;
+		}
+
+		// Otherwise use environment variables or a default
+		return process.env.PUBLIC_SITE_URL || 'https://cropwatch.io';
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index baca65f3..9281fa42 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
 	import { createBrowserClient } from '@supabase/ssr';
 	import { onMount } from 'svelte';
 	import '../app.css';
-	import { warning } from '$lib/stores/toast.svelte';
+	import { info, warning } from '$lib/stores/toast.svelte';
 
 	// No preloading needed - dashboard will load its data when navigated to
 
@@ -51,15 +51,18 @@
 	onMount(() => {
 		//console.log('Setting up auth listener');
 		const { data: authData } = supabase.auth.onAuthStateChange((event, _session) => {
-			//console.log('Auth state change event:', event, _session?.user?.email);
-
-			if (_session) {
-				//console.log('Session initialized:', _session);
-			} else {
-				warning('Your session has expired. Please login again.');
-				console.warn('No session found during auth state change');
+			console.log('Auth state change event:', event);
+			switch (event) {
+				case 'TOKEN_REFRESHED':
+					info('Your session was refreshed successfully.');
+					break;
+
+				case 'SIGNED_OUT':
+					warning('Your session has ended. Please login again.');
+					break;
+				default:
+					break;
 			}
-
 			// Invalidate to refresh server data when session changes
 			invalidate('supabase:auth');
 		});
diff --git a/src/routes/auth/login/GoogleAuthLogin.svelte b/src/routes/auth/login/GoogleAuthLogin.svelte
index 4e498711..eaf54868 100644
--- a/src/routes/auth/login/GoogleAuthLogin.svelte
+++ b/src/routes/auth/login/GoogleAuthLogin.svelte
@@ -32,7 +32,6 @@
 			const data = await response.json();
 			window.location.href = data.redirectUrl; // Redirect to Google's OAuth page
 		} catch (err) {
-			toastError('Google login failed. Please try again.');
 			console.error('Google login error:', err);
 		}
 	};
diff --git a/src/routes/auth/update-password/+page.server.ts b/src/routes/auth/update-password/+page.server.ts
new file mode 100644
index 00000000..1607bb06
--- /dev/null
+++ b/src/routes/auth/update-password/+page.server.ts
@@ -0,0 +1,103 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { AuthService } from '$lib/services/AuthService';
+import { ErrorHandlingService } from '$lib/errors/ErrorHandlingService';
+
+// Handle password reset token verification and redirect logged-in users
+export const load: PageServerLoad = async ({ url, locals }) => {
+	const errorHandler = new ErrorHandlingService();
+	const authService = new AuthService(locals.supabase, errorHandler);
+
+	// Check if user is already logged in
+	const user = await authService.getSession();
+	if (user) {
+		// If logged in, redirect to account settings
+		throw redirect(303, '/account/update-password');
+	}
+
+	// Check for password reset token in URL
+	const token_hash = url.searchParams.get('token_hash');
+	const type = url.searchParams.get('type');
+
+	if (!token_hash || type !== 'recovery') {
+		// No valid token, redirect to forgot password page
+		throw redirect(303, '/auth/forgot-password');
+	}
+
+	// Verify the reset token
+	const { error } = await locals.supabase.auth.verifyOtp({
+		token_hash,
+		type: 'recovery'
+	});
+
+	if (error) {
+		console.error('Token verification error:', error);
+		// Invalid or expired token, redirect to forgot password
+		throw redirect(303, '/auth/forgot-password');
+	}
+
+	return {
+		tokenVerified: true
+	};
+};
+
+export const actions: Actions = {
+	default: async ({ request, locals }) => {
+		try {
+			// Parse form data
+			const formData = await request.formData();
+			const newPassword = formData.get('newPassword')?.toString() || '';
+			const confirmPassword = formData.get('confirmPassword')?.toString() || '';
+
+			// Validate password
+			if (!newPassword) {
+				return fail(400, {
+					error: 'New password is required',
+					newPassword: '',
+					confirmPassword: ''
+				});
+			}
+
+			if (newPassword.length < 8) {
+				return fail(400, {
+					error: 'Password must be at least 8 characters long',
+					newPassword: '',
+					confirmPassword: ''
+				});
+			}
+
+			// Validate password confirmation
+			if (newPassword !== confirmPassword) {
+				return fail(400, { error: 'Passwords do not match', newPassword: '', confirmPassword: '' });
+			}
+
+			// Get services
+			const errorHandler = new ErrorHandlingService();
+			const authService = new AuthService(locals.supabase, errorHandler);
+
+			// Update password
+			const result = await authService.updatePassword(newPassword);
+
+			if (!result.success) {
+				console.error('Password update error:', result.error);
+				return fail(400, {
+					error: result.error || 'Failed to update password',
+					newPassword: '',
+					confirmPassword: ''
+				});
+			}
+
+			// Password updated successfully
+			return {
+				success: true
+			};
+		} catch (error) {
+			console.error('Password update request error:', error);
+			return fail(500, {
+				error: 'An error occurred. Please try again later.',
+				newPassword: '',
+				confirmPassword: ''
+			});
+		}
+	}
+};
diff --git a/src/routes/auth/update-password/+page.svelte b/src/routes/auth/update-password/+page.svelte
new file mode 100644
index 00000000..6ec97d81
--- /dev/null
+++ b/src/routes/auth/update-password/+page.svelte
@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { success, error, warning, info, neutral } from '$lib/stores/toast.svelte';
+	import { _ } from 'svelte-i18n';
+	import type { ActionResult } from '@sveltejs/kit';
+
+	let { data, form } = $props();
+
+	let newPassword = $state('');
+	let confirmPassword = $state('');
+	let loading = $state(false);
+
+	function handleSubmit() {
+		return () => {
+			loading = true;
+
+			return async ({ result, update }: { result: ActionResult; update: () => Promise<void> }) => {
+				loading = false;
+				await update();
+				if (result.type === 'success') {
+					success($_('Password updated successfully! You can now log in with your new password.'));
+					goto('/auth/login');
+				} else if (result.type === 'failure' && result.data?.error) {
+					error($_(result.data.error));
+				} else {
+					error($_('Failed to update password'));
+				}
+			};
+		};
+	}
+</script>
+
+<svelte:head>
+	<title>{$_('Update Password')} | CropWatch</title>
+</svelte:head>
+
+<!-- Geometric Background Layer -->
+<div class="geometric-background"></div>
+
+<div
+	class="bg-background-light/30 dark:bg-background-dark/30 relative z-10 flex h-screen items-center justify-center p-5 transition-colors duration-300"
+>
+	<div
+		class="bg-card-light/95 dark:bg-card-dark/95 text-text-light dark:text-text-dark w-full max-w-md rounded-lg border-2 border-white/40 p-6 shadow-2xl backdrop-blur-xl dark:border-blue-400/30"
+	>
+		<h1 class="mb-6 text-center text-2xl font-bold">{$_('Update Password')}</h1>
+
+		{#if form?.success}
+			<div
+				class="mb-4 rounded-md bg-green-100 p-4 text-center text-green-700 dark:bg-green-900/30 dark:text-green-400"
+			>
+				<p>
+					{$_('Your password has been successfully updated!')}
+				</p>
+				<p class="mt-2 text-sm">
+					{$_('You can now log in with your new password.')}
+				</p>
+
+				<a
+					href="/auth/login"
+					class="mt-4 inline-block text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+				>
+					{$_('Go to login')} →
+				</a>
+			</div>
+		{:else}
+			<p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
+				{$_('Please enter your new password below.')}
+			</p>
+
+			<form method="POST" use:enhance={handleSubmit()} class="space-y-4">
+				<div>
+					<label for="newPassword" class="mb-1 block text-sm font-medium"
+						>{$_('New Password')}</label
+					>
+					<input
+						type="password"
+						id="newPassword"
+						name="newPassword"
+						bind:value={newPassword}
+						autocomplete="new-password"
+						required
+						minlength="8"
+						placeholder="🔒 {$_('Enter your new password')}"
+						disabled={loading}
+						class="text-text-light dark:text-text-dark focus:ring-primary w-full rounded-md border border-gray-300
+                   bg-white px-3 py-2 focus:border-transparent
+                   focus:ring-2 focus:outline-none dark:border-gray-700 dark:bg-gray-800"
+					/>
+					<p class="mt-1 text-xs text-gray-500">{$_('Minimum 8 characters required')}</p>
+				</div>
+
+				<div>
+					<label for="confirmPassword" class="mb-1 block text-sm font-medium"
+						>{$_('Confirm New Password')}</label
+					>
+					<input
+						type="password"
+						id="confirmPassword"
+						name="confirmPassword"
+						bind:value={confirmPassword}
+						autocomplete="new-password"
+						required
+						placeholder="🔒 {$_('Confirm your new password')}"
+						disabled={loading}
+						class="text-text-light dark:text-text-dark focus:ring-primary w-full rounded-md border border-gray-300
+                   bg-white px-3 py-2 focus:border-transparent
+                   focus:ring-2 focus:outline-none dark:border-gray-700 dark:bg-gray-800"
+					/>
+				</div>
+
+				{#if form?.error}
+					<div
+						class="mb-4 rounded-md bg-red-100 p-3 text-center text-red-700 dark:bg-red-900/30 dark:text-red-400"
+					>
+						{$_(form.error)}
+					</div>
+				{/if}
+
+				<div>
+					<button
+						type="submit"
+						class="bg-primary hover:bg-primary-hover w-full rounded px-4 py-2 font-medium text-white transition-colors duration-200 disabled:opacity-50"
+						disabled={loading || !newPassword || !confirmPassword || newPassword.length < 8}
+					>
+						{loading ? $_('Updating Password...') : $_('Update Password')}
+					</button>
+				</div>
+
+				<div class="mt-4 text-center">
+					<a
+						href="/auth/login"
+						class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+					>
+						{$_('Back to login')}
+					</a>
+				</div>
+			</form>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.geometric-background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: 1;
+
+		/* Rich corporate gradient - more vibrant blues */
+		background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 25%, #2563eb 75%, #1d4ed8 100%);
+
+		/* Ensure it's visible */
+		opacity: 1;
+
+		/* Professional corporate overlay patterns */
+		background-image: 
+			/* Corporate highlight orbs */
+			radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
+			radial-gradient(circle at 85% 75%, rgba(139, 92, 246, 0.25) 0%, transparent 45%),
+			radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.2) 0%, transparent 40%),
+			/* Subtle business texture */
+				radial-gradient(circle at 25% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 35%),
+			radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 30%);
+
+		background-size:
+			1000px 1000px,
+			800px 800px,
+			600px 600px,
+			400px 400px,
+			500px 500px;
+
+		background-position:
+			0 0,
+			100px 100px,
+			300px 200px,
+			500px 300px,
+			200px 400px;
+
+		/* Subtle floating animation */
+		animation: floatBackground 20s ease-in-out infinite;
+	}
+
+	@keyframes floatBackground {
+		0%,
+		100% {
+			transform: translateX(0) translateY(0);
+		}
+		25% {
+			transform: translateX(-20px) translateY(-10px);
+		}
+		50% {
+			transform: translateX(10px) translateY(-20px);
+		}
+		75% {
+			transform: translateX(-10px) translateY(10px);
+		}
+	}
+
+	/* Dark mode - rich professional dark gradient */
+	:global(.dark) .geometric-background {
+		background: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #1e40af 75%, #1e3a8a 100%);
+
+		background-image: 
+			/* Dark mode corporate highlights */
+			radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
+			radial-gradient(circle at 85% 75%, rgba(139, 92, 246, 0.35) 0%, transparent 45%),
+			radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.3) 0%, transparent 40%),
+			/* Professional dark texture */
+				radial-gradient(circle at 25% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 35%),
+			radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 30%);
+	}
+</style>
diff --git a/static/build-info.json b/static/build-info.json
index 378534cd..7f80ea3b 100644
--- a/static/build-info.json
+++ b/static/build-info.json
@@ -1,9 +1,9 @@
 {
-  "commit": "df838f8",
-  "branch": "pdfbuild-update",
-  "author": "CropWatch",
-  "date": "2025-07-08T08:29:13.143Z",
+  "commit": "b8befd1",
+  "branch": "develop",
+  "author": "Kevin Cantrell",
+  "date": "2025-07-14T03:45:41.982Z",
   "builder": "kevin@kevin-desktop",
   "ipAddress": "192.168.1.100",
-  "timestamp": 1751963353144
+  "timestamp": 1752464741983
 }