diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
index a4755f5a..7dbf32fe 100644
--- a/src/lib/i18n/locales/en.json
+++ b/src/lib/i18n/locales/en.json
@@ -240,5 +240,12 @@
     "permissions": "Permissions",
     "settings": "Settings",
     "history": "History"
+  },
+  "history": {
+    "title": "History and Downloads",
+    "data_preview": "Data Preview",
+    "no_data": "No data to display",
+    "download_selected": "Download Selected Range",
+    "search_text": "Filter Data Points"
   }
 }
diff --git a/src/lib/i18n/locales/jp.json b/src/lib/i18n/locales/jp.json
index 21571d00..a91baab7 100644
--- a/src/lib/i18n/locales/jp.json
+++ b/src/lib/i18n/locales/jp.json
@@ -255,5 +255,12 @@
     "rename": " ",
     "new_name": "新しい名前"
   },
-  "close": "閉じる"
+  "close": "閉じる",
+  "history": {
+    "title": "履歴",
+    "data_preview": "データプレビュー",
+    "no_data": "データがありません",
+    "download_selected": "選択したデータをダウンロード",
+    "search_text": "Filter Data Points"
+  }
 }
diff --git a/src/routes/(api)/api/v1/devices/[dev_eui]/data/+server.ts b/src/routes/(api)/api/v1/devices/[dev_eui]/data/+server.ts
index b1e4d2ba..6193d5d0 100644
--- a/src/routes/(api)/api/v1/devices/[dev_eui]/data/+server.ts
+++ b/src/routes/(api)/api/v1/devices/[dev_eui]/data/+server.ts
@@ -14,6 +14,7 @@ export const GET: RequestHandler = async ({ url, params, locals: { supabase, saf
   const from = query.get('from');
   const to = query.get('to');
   const dataPoints = query.get('data-points');
+  const noLimit = query.get('no-limit' || 0);
   const csv = query.get('csv');
 
   if (!dev_eui) {
@@ -31,14 +32,16 @@ export const GET: RequestHandler = async ({ url, params, locals: { supabase, saf
     .eq('dev_eui', dev_eui)
     .order('created_at', { ascending: false })
 
-    if (from) {
-      baseQuery = baseQuery.gte('created_at', moment(from).toISOString());
-    }
-    if (to) {
-      baseQuery = baseQuery.lte('created_at', moment(to).toISOString());
-    }
+  if (from) {
+    baseQuery = baseQuery.gte('created_at', moment(from).utc().toISOString());
+  }
+  if (to) {
+    baseQuery = baseQuery.lte('created_at', moment(to).utc().toISOString());
+  }
 
+  if (!noLimit) {
     baseQuery.range(startingPage, startingPage + itemsPerPage - 1);
+  }
 
   // Conditionally apply `.single()` if itemsPerPage is 1
   let finalQuery = itemsPerPage === 1 ? baseQuery.single() : baseQuery;
diff --git a/src/routes/app/devices/[dev_eui]/history/+page.svelte b/src/routes/app/devices/[dev_eui]/history/+page.svelte
index 68ec40db..bfab3be1 100644
--- a/src/routes/app/devices/[dev_eui]/history/+page.svelte
+++ b/src/routes/app/devices/[dev_eui]/history/+page.svelte
@@ -1,107 +1,118 @@
 <script lang="ts">
-    import Back from '$lib/components/ui/Back.svelte';
-    import historyImage from '$lib/images/UI/cw_history.svg';
-    import { Button, DateRangeField, MultiSelect, PeriodType } from 'svelte-ux';
-    import { subDays, subWeeks } from 'date-fns';
-    import { mdiDownload } from '@mdi/js';
-    import { _ } from 'svelte-i18n';
-    import { HighChartsTimeSeriesChart } from '$lib/charts/highcharts/timeseries.js';
-    import Highcharts from '$lib/actions/highcharts.action';
-    import { page } from '$app/stores';
-    import DarkCard from '$lib/components/ui/DarkCard.svelte';
-    import DarkCard2 from '$lib/components/ui/DarkCard2.svelte';
-
-    export let data;
-    export let sensorName = 'NS';
-
-    let today = new Date();
-    let value = {
-        from: subWeeks(today, 1),
-        to: today,
-        periodType: PeriodType.Day
-    };
-
-    let chartKey = 0;
-
-    let options = Object.keys(data.sensorData).map((key) => {
-        return {
-            value: key,
-            name: $_(key)
-        };
-    });
-    let selectedDataPoints: string[] = [];
-
-    $: chartConfig = HighChartsTimeSeriesChart(chartData.series, chartData.yAxes, '');
-
-    let chartData = {
-        series: [],
-        yAxes: []
-    };
-
-    // Define a list of colors for the chart lines and Y-axes
-    const colors = ['lightblue', 'lightgreen', 'red', 'purple', 'orange', 'grey', 'pink', 'cyan', 'yellow', 'magenta'];
-
-    function createChartSeries(res) {
-        const series = {};
-        const yAxes = {};
-
-        res.forEach((d) => {
-            Object.keys(d).forEach((key, i) => {
-                if (key !== 'created_at') {
-                    if (!series[key]) {
-                        let colorIndex = Object.keys(yAxes).length % colors.length; // Cycle through colors
-                        series[key] = {
-                            type: 'line',
-                            yAxis: colorIndex, // Assign to new yAxis index
-                            name: $_(key),
-                            data: [],
-                            color: colors[colorIndex] // Use color from the array
-                        };
-                        yAxes[key] = {
-                            title: {
-                                text: $_(key),
-                                style: { color: colors[colorIndex] }
-                            },
-                            labels: {
-                                format: '{value}', // Customize if needed
-                                style: { color: colors[colorIndex] }
-                            },
-                            opposite: i % 2 === 0
-                        };
-                    }
-                    series[key].data.push([new Date(d.created_at).valueOf(), d[key]]);
-                }
-            });
-        });
-
-        return {
-            series: Object.values(series),
-            yAxes: Object.values(yAxes)
-        };
-    }
-
-    const loadSelectedDataRange = async () => {
-        const response = await fetch(
-            `/api/v1/devices/${$page.params.dev_eui}/data?from=${value.from}&to=${value.to}&data-points=${selectedDataPoints}&page=0&count=10000`,
-            {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            }
-        );
-        const res = await response.json();
-        chartData = createChartSeries(res);
-        chartKey++; // Increment key to force re-render
-    };
+	import Back from '$lib/components/ui/Back.svelte';
+	import historyImage from '$lib/images/UI/cw_history.svg';
+	import { Button, DateRangeField, MultiSelect, PeriodType } from 'svelte-ux';
+	import { subDays, subWeeks } from 'date-fns';
+	import { mdiDownload } from '@mdi/js';
+	import { _ } from 'svelte-i18n';
+	import { HighChartsTimeSeriesChart } from '$lib/charts/highcharts/timeseries.js';
+	import Highcharts from '$lib/actions/highcharts.action';
+	import { page } from '$app/stores';
+	import DarkCard2 from '$lib/components/ui/DarkCard2.svelte';
+
+	export let data;
+	export let sensorName = 'NS';
+
+	let today = new Date();
+	let value = {
+		from: subWeeks(today, 1),
+		to: today,
+		periodType: PeriodType.Day
+	};
+    let isLoading: boolean = false;
+	let chartKey = 0;
+
+	let options = Object.keys(data.sensorData).map((key) => {
+		return {
+			value: key,
+			name: $_(key)
+		};
+	});
+	let selectedDataPoints: string[] = [];
+
+	$: chartConfig = HighChartsTimeSeriesChart(chartData.series, chartData.yAxes, '');
+
+	let chartData = {
+		series: [],
+		yAxes: []
+	};
+
+	// Define a list of colors for the chart lines and Y-axes
+	const colors = [
+		'lightblue',
+		'lightgreen',
+		'red',
+		'purple',
+		'orange',
+		'grey',
+		'pink',
+		'cyan',
+		'yellow',
+		'magenta'
+	];
+
+	function createChartSeries(res) {
+		const series = {};
+		const yAxes = {};
+
+		res.forEach((d) => {
+			Object.keys(d).forEach((key, i) => {
+				if (key !== 'created_at') {
+					if (!series[key]) {
+						let colorIndex = Object.keys(yAxes).length % colors.length; // Cycle through colors
+						series[key] = {
+							type: 'line',
+							yAxis: colorIndex, // Assign to new yAxis index
+							name: $_(key),
+							data: [],
+							color: colors[colorIndex] // Use color from the array
+						};
+						yAxes[key] = {
+							title: {
+								text: $_(key),
+								style: { color: colors[colorIndex] }
+							},
+							labels: {
+								format: '{value}', // Customize if needed
+								style: { color: colors[colorIndex] }
+							},
+							opposite: i % 2 === 0
+						};
+					}
+					series[key].data.push([new Date(d.created_at).valueOf(), d[key]]);
+				}
+			});
+		});
+
+		return {
+			series: Object.values(series),
+			yAxes: Object.values(yAxes)
+		};
+	}
+
+	const loadSelectedDataRange = async () => {
+		const response = await fetch(
+			`/api/v1/devices/${$page.params.dev_eui}/data?from=${value.from}&to=${value.to}&data-points=${selectedDataPoints}&page=0&count=10000`,
+			{
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			}
+		);
+		const res = await response.json();
+		chartData = createChartSeries(res);
+		chartKey++; // Increment key to force re-render
+	};
 
 	const downloadCSV = (sensorName) => {
+        isLoading = true;
 		const date = new Date();
 		const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
 		const fileName = `${sensorName}-${formattedDate}.csv`;
 
 		fetch(
-			`/api/v1/devices/${$page.params.dev_eui}/data?from=${value.from}&to=${value.to}&data-points=${selectedDataPoints}&page=0&count=10000&csv=1`,
+			`/api/v1/devices/${$page.params.dev_eui}/data?from=${value.from}&to=${value.to}&data-points=${selectedDataPoints}&no-limit=1&csv=1`,
 			{
 				method: 'GET',
 				headers: {
@@ -119,14 +130,18 @@
 				document.body.appendChild(a);
 				a.click();
 				window.URL.revokeObjectURL(url);
+                isLoading = false;
 			})
-			.catch((error) => console.error('Error downloading the file:', error));
+			.catch((error) => {
+                console.error('Error downloading the file:', error);
+                isLoading = false;
+            });
 	};
 </script>
 
 <div class="flex flex-row bg-emerald-300 p-4 text-center justify-center">
 	<img src={historyImage} alt="History" class="w-10 h-10" />
-	<p class="text-surface-100 text-3xl ml-2">History and Downloads</p>
+	<p class="text-surface-100 text-3xl ml-2">{$_('history.title')}</p>
 </div>
 
 <div class="mt-4 mx-2 flex justify-between">
@@ -152,9 +167,9 @@
 			/>
 		</DarkCard2>
 		<DarkCard2>
-			<h2 class="text-xl text-neutral-content">Data Preview:</h2>
+			<h2 class="text-xl text-neutral-content">{$_('history.data_preview')}:</h2>
 			{#if chartKey === 0}
-				<p class="text-center text-neutral-content">No data to display</p>
+				<p class="text-center text-neutral-content">{$_('history.no_data')}</p>
 			{/if}
 			{#key chartKey}
 				<div class="chart" use:Highcharts={chartConfig} />
@@ -170,7 +185,9 @@
 			on:click={() => downloadCSV('sensor')}
 			size="lg"
 			class="w-full"
-			rounded>Download Selected Range</Button
+            loading={isLoading}
+            disabled={isLoading}
+			rounded>{$_('history.download_selected')}</Button
 		>
 	</div>
 </div>