diff --git a/STRIPE_WEBHOOK_SETUP.md b/STRIPE_WEBHOOK_SETUP.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/lib/components/GlobalSidebar.svelte b/src/lib/components/GlobalSidebar.svelte
index d830243b..f78f37c4 100644
--- a/src/lib/components/GlobalSidebar.svelte
+++ b/src/lib/components/GlobalSidebar.svelte
@@ -5,6 +5,9 @@
 	import MaterialIcon from '$lib/components/UI/icons/MaterialIcon.svelte';
 	import { _ } from 'svelte-i18n';
 	import { onMount } from 'svelte';
+	import LanguageSelector from './UI/form/LanguageSelector.svelte';
+	import { globalLoading, startLoading } from '$lib/stores/loadingStore';
+	import ThemeToggle from './theme/ThemeToggle.svelte';
 
 	// Navigation items for the sidebar
 	const navigationItems = [
@@ -134,7 +137,10 @@
 				{$_('Navigation')}
 			</h2>
 			<button
-				onclick={() => sidebarStore.toggle()}
+				onclick={() => {
+					sidebarStore.toggle();
+					startLoading();
+				}}
 				class="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'}"
@@ -146,12 +152,16 @@
 	{/if}
 
 	<!-- Navigation Items -->
-	<nav class="flex flex-1 flex-col overflow-y-auto p-2">
+	<nav class="z-10 flex flex-1 flex-col overflow-y-auto pr-2" style="z-index: 10000;">
 		<ul class="space-y-1">
 			{#each navigationItems as item, index}
 				<li>
 					<a
 						href={item.href}
+						onclick={() => {
+							sidebarStore.close();
+							startLoading();
+						}}
 						class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 no-underline transition-all duration-200 hover:scale-105
 							{isActiveRoute(item.matcher)
 							? getDarkMode()
@@ -180,7 +190,10 @@
 		</ul>
 		<span class="flex flex-auto"></span>
 		<button
-			onclick={() => sidebarStore.toggle()}
+			onclick={() => {
+				sidebarStore.toggle();
+				startLoading();
+			}}
 			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()
@@ -197,22 +210,32 @@
 		<ul class="space-y-1">
 			<li class="mx-3 border-t {getDarkMode() ? 'border-slate-500/30' : 'border-gray-200/30'}"></li>
 			<li>
-				<a
-					href="/app/account-settings/general"
-					class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 no-underline transition-all duration-200 hover:scale-105
+				<div class="flex flex-row">
+					<a
+						href="/app/account-settings/general"
+						onclick={() => {
+							sidebarStore.close();
+							startLoading();
+						}}
+						class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 no-underline transition-all duration-200 hover:scale-105
 							{isActiveRoute('/app/account-settings/general')
-						? 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'}"
-					aria-current={isActiveRoute('/app/account-settings/general') ? 'page' : undefined}
-					title={sidebarStore.isSmallIconMode && !sidebarStore.isOpen ? $_('settings') : ''}
-				>
-					<MaterialIcon name="settings" size="medium" />
-					<input type="hidden" value={sidebarStore.isOpen} />
-				</a>
+							? 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'}"
+						aria-current={isActiveRoute('/app/account-settings/general') ? 'page' : undefined}
+						title={sidebarStore.isSmallIconMode && !sidebarStore.isOpen ? $_('settings') : ''}
+					>
+						<MaterialIcon name="settings" size="medium" />
+						<input type="hidden" value={sidebarStore.isOpen} />
+					</a>
+					<span class="flex flex-1 border-l md:hidden"></span>
+					<ThemeToggle class="flex w-full md:hidden" outlineColor="black" />
+					<span class="flex flex-1 border-l md:hidden"></span>
+					<LanguageSelector class="flex w-full md:hidden" />
+				</div>
 			</li>
 		</ul>
 	</nav>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 13a668e1..29ae914f 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -128,9 +128,7 @@
 		<!-- Mobile menu button -->
 		<button
 			onclick={toggleSidebar}
-			class="mobile-menu-btn rounded-lg p-2 transition-colors lg:hidden {getDarkMode()
-				? 'text-white hover:bg-white/10'
-				: 'text-gray-700 hover:bg-gray-200/50'}"
+			class="mobile-menu-btn rounded-lg p-2 text-white transition-colors lg:hidden"
 			aria-label="Toggle mobile menu"
 			aria-expanded={mobileMenuOpen}
 			aria-controls="mobile-menu"
diff --git a/src/lib/components/UI/form/LanguageSelector.svelte b/src/lib/components/UI/form/LanguageSelector.svelte
index 4ec19c1b..02aa33de 100644
--- a/src/lib/components/UI/form/LanguageSelector.svelte
+++ b/src/lib/components/UI/form/LanguageSelector.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { locale, locales } from 'svelte-i18n';
 
+	let { class: className = '' } = $props();
+
 	const languageOptions = [
 		{ code: 'en', label: '🇺🇸 English' },
 		{ code: 'ja', label: '🇯🇵 日本語' }
@@ -16,9 +18,10 @@
 </script>
 
 <select
+	id="language-selector"
 	bind:value={selected}
 	onchange={handleChange}
-	class="user-select-none border-none bg-transparent text-slate-400 outline-none hover:text-green-400 dark:bg-transparent"
+	class="{className} user-select-none border-none bg-transparent text-slate-400 outline-none hover:text-green-400 dark:bg-transparent"
 	aria-label="Select language"
 >
 	{#each languageOptions as option}
diff --git a/src/lib/components/theme/ThemeToggle.svelte b/src/lib/components/theme/ThemeToggle.svelte
index c5be851e..69fc5d9c 100644
--- a/src/lib/components/theme/ThemeToggle.svelte
+++ b/src/lib/components/theme/ThemeToggle.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { getDarkMode, toggleTheme } from './theme.svelte';
 
+	let { class: className = '', outlineColor = 'white' } = $props();
+
 	// Use the darkMode state from theme.svelte.ts
 	$effect(() => {
 		// This effect will run whenever getDarkMode() changes
@@ -12,7 +14,7 @@
 
 <button
 	type="button"
-	class="text-text-light flex items-center justify-center rounded-full p-2 text-slate-200 transition-colors duration-200"
+	class="{className} text-text-light flex items-center justify-center rounded-full p-2 text-slate-200 transition-colors duration-200"
 	onclick={toggleTheme}
 	aria-label={getDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'}
 >
@@ -23,7 +25,7 @@
 			class="h-5 w-5"
 			fill="none"
 			viewBox="0 0 24 24"
-			stroke="currentColor"
+			stroke={outlineColor}
 		>
 			<path
 				stroke-linecap="round"
@@ -39,7 +41,7 @@
 			class="h-5 w-5"
 			fill="none"
 			viewBox="0 0 24 24"
-			stroke="currentColor"
+			stroke={outlineColor}
 		>
 			<path
 				stroke-linecap="round"
diff --git a/src/lib/interfaces/IDeviceDataService.ts b/src/lib/interfaces/IDeviceDataService.ts
index f32aabb9..47331509 100644
--- a/src/lib/interfaces/IDeviceDataService.ts
+++ b/src/lib/interfaces/IDeviceDataService.ts
@@ -5,26 +5,53 @@ import type { DeviceDataRecord } from '../models/DeviceDataRecord';
  * Interface for dynamic device data retrieval based on device type
  */
 export interface IDeviceDataService {
-  /**
-   * Get the latest data for a device based on its type
-   * @param devEui The device EUI
-   * @param deviceType The device type information containing data_table_v2
-   */
-  getLatestDeviceData(
-    devEui: string,
-    deviceType: DeviceType
-  ): Promise<DeviceDataRecord | null>;
-  
-  /**
-   * Get device data within a date range based on device type
-   * @param devEui The device EUI
-   * @param deviceType The device type information containing data_table_v2
-   * @param startDate The start date
-   * @param endDate The end date
-   */
-  getDeviceDataByDateRange(
-    devEui: string,
-    startDate: Date,
-    endDate: Date
-  ): Promise<DeviceDataRecord[]>;
-}
\ No newline at end of file
+	/**
+	 * Get the latest data for a device based on its type
+	 * @param devEui The device EUI
+	 * @param deviceType The device type information containing data_table_v2
+	 */
+	getLatestDeviceData(devEui: string, deviceType: DeviceType): Promise<DeviceDataRecord | null>;
+
+	/**
+	 * Get device data within a date range based on device type
+	 * @param devEui The device EUI
+	 * @param deviceType The device type information containing data_table_v2
+	 * @param startDate The start date
+	 * @param endDate The end date
+	 */
+	getDeviceDataByDateRange(
+		devEui: string,
+		startDate: Date,
+		endDate: Date
+	): Promise<DeviceDataRecord[]>;
+
+	/**
+	 * Get device data for report with optional filtering
+	 * @param devEui The device EUI
+	 * @param startDate The start date
+	 * @param endDate The end date
+	 * @param timezone The timezone
+	 * @param intervalMinutes The interval in minutes
+	 * @param columns Optional columns to filter
+	 * @param ops Optional operators for filtering
+	 * @param mins Optional minimum values
+	 * @param maxs Optional maximum values
+	 */
+	getDeviceDataForReport(
+		devEui: string,
+		startDate: Date,
+		endDate: Date,
+		timezone: string,
+		intervalMinutes: number,
+		columns?: string[],
+		ops?: string[],
+		mins?: number[],
+		maxs?: (number | null)[]
+	): Promise<DeviceDataRecord[]>;
+
+	/**
+	 * Get alert points for a device from its reports
+	 * @param devEui The device EUI
+	 */
+	getAlertPointsForDevice(devEui: string): Promise<any[]>;
+}
diff --git a/src/lib/pdf/pdfDataTable.ts b/src/lib/pdf/pdfDataTable.ts
index 321b689b..ba5c6463 100644
--- a/src/lib/pdf/pdfDataTable.ts
+++ b/src/lib/pdf/pdfDataTable.ts
@@ -90,7 +90,8 @@ export function createPDFDataTable(
 		});
 	const legendStartY = conf.margin + 15;
 	// Draw alert points legend
-	alertPointData.alert_points.forEach((point, index) => {
+	const alertPoints = alertPointData.alert_points || [];
+	alertPoints.forEach((point, index) => {
 		const color = point.hex_color || '#ffffff';
 		const legendX =
 			conf.margin + (index % finalColumnsPerPage) * (conf.cellWidth + conf.columnMargin);
@@ -213,7 +214,7 @@ function drawColumn(
 			let bgColor = '#ffffff';
 
 			// Check alert points for this value
-			for (const alertPoint of alertPointData.alert_points) {
+			for (const alertPoint of alertPointData.alert_points || []) {
 				if (evaluateAlertCondition(value, alertPoint)) {
 					bgColor = alertPoint.hex_color || '#ffffff';
 					break; // Use the first matching alert point
diff --git a/src/lib/services/DeviceDataService.ts b/src/lib/services/DeviceDataService.ts
index 27c63ba2..bd5d2e45 100644
--- a/src/lib/services/DeviceDataService.ts
+++ b/src/lib/services/DeviceDataService.ts
@@ -256,7 +256,11 @@ export class DeviceDataService implements IDeviceDataService {
 		startDate: Date,
 		endDate: Date,
 		timezone: string,
-		intervalMinutes: number
+		intervalMinutes: number,
+		columns?: string[],
+		ops?: string[],
+		mins?: number[],
+		maxs?: (number | null)[]
 	): Promise<DeviceDataRecord[]> {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
@@ -272,13 +276,59 @@ export class DeviceDataService implements IDeviceDataService {
 		}
 
 		try {
-			const { data, error: deviceError } = await this.supabase.rpc('get_report_data_for_device', {
-				input_dev_eui: devEui,
-				input_start: startDate,
-				input_end: endDate,
-				input_timezone: timezone,
-				input_interval_minutes: intervalMinutes
-			});
+			// If no filtering parameters provided, get alert points from the device's reports
+			let p_columns = columns || ['temperature_c', 'humidity'];
+			let p_ops = ops || ['>', 'BETWEEN'];
+			let p_mins = mins || [25.0, 55.0];
+			let p_maxs = maxs || [null, 65.0];
+
+			// If no explicit filters provided, try to get from device reports
+			if (!columns && !ops && !mins && !maxs) {
+				try {
+					// Get the first report for this device to extract alert points
+					const { data: reports, error: reportError } = await this.supabase
+						.from('reports')
+						.select('report_id, report_alert_points(*)')
+						.eq('dev_eui', devEui)
+						.limit(1);
+
+					if (!reportError && reports && reports.length > 0 && reports[0].report_alert_points) {
+						const alertPoints = reports[0].report_alert_points;
+						if (alertPoints && alertPoints.length > 0) {
+							p_columns = [];
+							p_ops = [];
+							p_mins = [];
+							p_maxs = [];
+
+							alertPoints.forEach((point: any) => {
+								if (point.data_point_key) {
+									p_columns.push(point.data_point_key);
+									p_ops.push(point.operator || '>');
+									p_mins.push(point.min || point.value || 0);
+									p_maxs.push(point.max || null);
+								}
+							});
+						}
+					}
+				} catch (alertError) {
+					// If we can't get alert points, use default values
+					console.warn('Could not load alert points, using defaults:', alertError);
+				}
+			}
+
+			const { data, error: deviceError } = await this.supabase.rpc(
+				'get_filtered_device_report_data_multi',
+				{
+					p_dev_id: devEui,
+					p_start_time: startDate,
+					p_end_time: endDate,
+					p_interval_minutes: intervalMinutes,
+					p_columns: p_columns,
+					p_ops: p_ops,
+					p_mins: p_mins,
+					p_maxs: p_maxs
+				}
+			);
 
 			if (deviceError) {
 				this.errorHandler.logError(deviceError);
@@ -313,6 +363,35 @@ export class DeviceDataService implements IDeviceDataService {
 		}
 	}
 
+	/**
+	 * Get alert points for a device from its reports
+	 * @param devEui The device EUI
+	 */
+	public async getAlertPointsForDevice(devEui: string): Promise<any[]> {
+		if (!devEui) {
+			throw new Error('Device EUI not specified');
+		}
+		if (!this.checkUserHasAccess(devEui)) {
+			throw new Error('User does not have access to this device');
+		}
+
+		try {
+			const { data: reports, error: reportError } = await this.supabase
+				.from('reports')
+				.select('report_id, name, report_alert_points(*)')
+				.eq('dev_eui', devEui)
+				.limit(1);
+
+			if (!reportError && reports && reports.length > 0 && reports[0].report_alert_points) {
+				return reports[0].report_alert_points || [];
+			}
+			return [];
+		} catch (error) {
+			this.errorHandler.logError(error as Error);
+			return [];
+		}
+	}
+
 	private async checkUserHasAccess(dev_eui: string): Promise<boolean> {
 		// Placeholder for user access check logic
 		// This should be implemented based on your authentication and authorization system
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 33b9d110..ea7db89a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { invalidate } from '$app/navigation';
+	import { invalidate, beforeNavigate, afterNavigate } from '$app/navigation';
 	import { page } from '$app/state';
 	import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
 	import Header from '$lib/components/Header.svelte';
@@ -7,6 +7,7 @@
 	import ToastContainer from '$lib/components/Toast/ToastContainer.svelte';
 	import { i18n } from '$lib/i18n/index.svelte';
 	import { sidebarStore } from '$lib/stores/SidebarStore.svelte';
+	import { globalLoading, startLoading, stopLoading } from '$lib/stores/loadingStore';
 	import { createBrowserClient } from '@supabase/ssr';
 	import { onMount } from 'svelte';
 	import '../app.css';
@@ -69,6 +70,15 @@
 	onMount(() => {
 		i18n.initialize();
 	});
+
+	// Handle navigation loading states
+	beforeNavigate(() => {
+		startLoading();
+	});
+
+	afterNavigate(() => {
+		stopLoading();
+	});
 </script>
 
 <!-- Wait until svelte-i18n is initialized -->
diff --git a/src/routes/api/devices/[devEui]/data-jwt-pdf/+server.ts b/src/routes/api/devices/[devEui]/data-jwt-pdf/+server.ts
index eddc24ae..bafc4d9b 100644
--- a/src/routes/api/devices/[devEui]/data-jwt-pdf/+server.ts
+++ b/src/routes/api/devices/[devEui]/data-jwt-pdf/+server.ts
@@ -87,9 +87,17 @@ export const GET: RequestHandler = async ({ params, url, request, locals: { supa
 				'Asia/Tokyo',
 				30 // Default interval in minutes
 			);
-			if (deviceDataResponse.device_data) {
-				deviceData = deviceDataResponse.device_data;
-				reportInfo = deviceDataResponse.report_info[0];
+			if (deviceDataResponse && deviceDataResponse.length > 0) {
+				deviceData = deviceDataResponse;
+
+				// Get alert points for the device
+				const alertPoints = await deviceDataService.getAlertPointsForDevice(devEui);
+
+				// Create proper report info structure
+				reportInfo = {
+					dev_eui: devEui,
+					alert_points: alertPoints
+				};
 			} else {
 				throw new Error(
 					`No device data found for ${devEui} in the specified date range: ${startDate.toISOString()} to ${endDate.toISOString()}`
diff --git a/src/routes/app/dashboard/location/[location_id]/Header.svelte b/src/routes/app/dashboard/location/[location_id]/Header.svelte
index 5851a494..f3580484 100644
--- a/src/routes/app/dashboard/location/[location_id]/Header.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/Header.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-9999 flex flex-col items-start justify-between gap-4 border-b border-gray-300 p-4 md:flex-row md:items-end dark:border-neutral-400"
+	class="sticky top-0 z-9 flex flex-col items-start justify-between gap-4 border-b border-gray-300 p-4 md:flex-row md:items-end dark:border-neutral-400"
 	style:background-color="var(--color-background)"
 >
 	<div class="flex-1">
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
index 13fec6e2..a6cd517a 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-9999 flex flex-col items-start justify-between gap-4 border-b border-gray-300 p-4 md:flex-row md:items-end dark:border-neutral-400"
+	class="sticky top-0 z-9 flex flex-col items-start justify-between gap-4 border-b border-gray-300 p-4 md:flex-row md:items-end dark:border-neutral-400"
 	style:background-color="var(--color-background)"
 >
 	<h1 class="flex w-full flex-1 flex-row items-center gap-4 md:flex-row md:items-end">
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts
index 152785a5..54c51778 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts
@@ -122,23 +122,41 @@ export const GET: RequestHandler = async ({
 			devEui,
 			startDate,
 			endDate,
-			30,
-			'Asia/Tokyo'
+			'Asia/Tokyo',
+			30
 		);
 		if (!deviceData || deviceData.length === 0) {
 			throw error(404, 'No data found for the specified device');
 		}
 
-		// Create the PDF data table
-		const data = deviceData.device_data;
+		// Transform DeviceDataRecord[] to TableData[] format
+		const data = deviceData.map((record) => ({
+			date: record.created_at,
+			values: Object.entries(record)
+				.filter(
+					([key, value]) =>
+						key !== 'dev_eui' && key !== 'created_at' && typeof value === 'number' && value !== null
+				)
+				.map(([_, value]) => value as number)
+		}));
+
 		if (!data || data.length === 0) {
 			throw error(404, 'No data found for the specified device');
 		}
-		if (!deviceData.report_info || deviceData.report_info.length === 0) {
-			throw error(404, 'No report info found for the specified device');
-		}
-		const alertPoints = deviceData.report_info[0].alert_points;
-		createPDFDataTable(doc, data, alertPoints);
+
+		// Get alert points for the device
+		const alertPoints = await deviceDataService.getAlertPointsForDevice(devEui);
+
+		// Create the alert data structure
+		const alertData = {
+			alert_points: alertPoints,
+			created_at: new Date().toISOString(),
+			dev_eui: devEui,
+			id: 1,
+			name: 'Device Report',
+			report_id: '1'
+		};
+		createPDFDataTable(doc, data, alertData);
 
 		// Add generation timestamp
 		doc
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts
index c8c89bd0..76abd693 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts
@@ -7,6 +7,7 @@ import { ReportUserScheduleRepository } from '$lib/repositories/ReportUserSchedu
 import { ErrorHandlingService } from '$lib/errors/ErrorHandlingService';
 import { error, fail, redirect } from '@sveltejs/kit';
 import type { ReportAlertPoint, ReportRecipient, ReportUserSchedule } from '$lib/models/Report';
+import { DeviceDataService } from '$lib/services/DeviceDataService';
 
 export const load: PageServerLoad = async ({ params, locals, url }) => {
 	try {
@@ -28,15 +29,30 @@ export const load: PageServerLoad = async ({ params, locals, url }) => {
 			throw error(401, 'Authentication required');
 		}
 
+		const errorHandler = new ErrorHandlingService();
+		const deviceRepo = new ReportRepository(locals.supabase, errorHandler);
+		const dataService = new DeviceDataService(locals.supabase, deviceRepo);
 		// If reportId is provided, load existing report data
 		let report = null;
 		let alertPoints: ReportAlertPoint[] = [];
 		let recipients: ReportRecipient[] = [];
 		let schedules: ReportUserSchedule[] = [];
+		let dataKeys = null;
+		const latestData = await dataService.getLatestDeviceData(devEui); // pull the latest data for the device keys
+		if (!latestData) {
+			throw error(404, 'No data found for this device');
+		}
+
+		dataKeys = Object.keys(latestData)
+			.filter((k) => latestData[k] != null)
+			.reduce((a, k) => ({ ...a, [k]: latestData[k] }), {});
+		delete dataKeys['dev_eui']; // remove dev_eui as it's not a data key
+		delete dataKeys['created_at']; // remove created_at as it's not a data key
+		delete dataKeys['is_simulated']; // remove updated_at as it's not a data key
+		dataKeys = Object.keys(dataKeys); // get only the keys
 
 		if (reportId) {
 			// Create service dependencies
-			const errorHandler = new ErrorHandlingService();
 			const reportRepo = new ReportRepository(locals.supabase, errorHandler);
 			const alertPointRepo = new ReportAlertPointRepository(locals.supabase, errorHandler);
 			const recipientRepo = new ReportRecipientRepository(locals.supabase, errorHandler);
@@ -73,6 +89,7 @@ export const load: PageServerLoad = async ({ params, locals, url }) => {
 			alertPoints,
 			recipients,
 			schedules,
+			dataKeys,
 			isEditing: !!reportId
 		};
 	} catch (err) {
@@ -171,7 +188,8 @@ export const actions: Actions = {
 					min: point.min,
 					max: point.max,
 					value: point.value,
-					hex_color: point.color
+					hex_color: point.color,
+					data_point_key: point.data_point_key
 				});
 			}
 
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte
index f87ac170..416476c4 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte
@@ -19,6 +19,7 @@
 	const report = $derived(data.report);
 	const isEditing = $derived(data.isEditing);
 	const recipientsData = $derived(data.recipients);
+	const dataKeys = $derived(data.dataKeys);
 
 	// Form state
 	let reportName = $state('');
@@ -33,6 +34,7 @@
 			value?: number;
 			min?: number;
 			max?: number;
+			data_point_key?: string;
 			color: string;
 		}>
 	>([]);
@@ -373,6 +375,16 @@
 									<input type="color" class="h-6 w-5 rounded-xl" bind:value={point.color} />
 									<!-- <div  style="background-color: {point.color}"></div> -->
 									<span class="font-medium">Alert Point {i + 1}</span>
+									<Select
+										id="alert-point-data-key-{i}"
+										bind:value={point.data_point_key}
+										class="w-full"
+									>
+										<option value="" disabled>Select Data Key</option>
+										{#each dataKeys as key}
+											<option value={key}>{key}</option>
+										{/each}
+									</Select>
 								</div>
 								<Button
 									type="button"
diff --git a/static/build-info.json b/static/build-info.json
index 835bd241..378534cd 100644
--- a/static/build-info.json
+++ b/static/build-info.json
@@ -1,9 +1,9 @@
 {
-  "commit": "915f7fc",
-  "branch": "remove-iocconfig",
-  "author": "Kevin Cantrell",
-  "date": "2025-07-07T04:40:02.303Z",
+  "commit": "df838f8",
+  "branch": "pdfbuild-update",
+  "author": "CropWatch",
+  "date": "2025-07-08T08:29:13.143Z",
   "builder": "kevin@kevin-desktop",
   "ipAddress": "192.168.1.100",
-  "timestamp": 1751863202304
+  "timestamp": 1751963353144
 }
diff --git a/test-device-data-service.ts b/test-device-data-service.ts
new file mode 100644
index 00000000..da19822c
--- /dev/null
+++ b/test-device-data-service.ts
@@ -0,0 +1,24 @@
+import { DeviceDataService } from './src/lib/services/DeviceDataService';
+
+// This is just a compilation test to ensure the new method signature works
+function testMethod() {
+	// Test with all parameters
+	const service = new DeviceDataService({} as any);
+
+	const result1 = service.getDeviceDataForReport(
+		'test',
+		new Date(),
+		new Date(),
+		'UTC',
+		30,
+		['temperature_c'],
+		['>'],
+		[25.0],
+		[null]
+	);
+
+	// Test with default parameters
+	const result2 = service.getDeviceDataForReport('test', new Date(), new Date(), 'UTC', 30);
+
+	console.log('Method signatures compile correctly');
+}