diff --git a/Taipei-City-Dashboard-FE/src/App.vue b/Taipei-City-Dashboard-FE/src/App.vue
index 0ce6ed19..80638c4f 100644
--- a/Taipei-City-Dashboard-FE/src/App.vue
+++ b/Taipei-City-Dashboard-FE/src/App.vue
@@ -9,9 +9,10 @@ Testing: Jack Huang (Data Scientist), Ian Huang (Data Analysis Intern)
 <!-- Department of Information Technology, Taipei City Government -->
 
 <script setup>
-import { onBeforeMount, onMounted } from "vue";
+import { onBeforeMount, onMounted, onBeforeUnmount, ref, computed } from "vue";
 import { useAuthStore } from "./store/authStore";
 import { useDialogStore } from "./store/dialogStore";
+import { useContentStore } from "./store/contentStore";
 
 import NavBar from "./components/utilities/bars/NavBar.vue";
 import SideBar from "./components/utilities/bars/SideBar.vue";
@@ -24,6 +25,29 @@ import LogIn from "./components/dialogs/LogIn.vue";
 
 const authStore = useAuthStore();
 const dialogStore = useDialogStore();
+const contentStore = useContentStore();
+
+const timeToUpdate = ref(600);
+
+const formattedTimeToUpdate = computed(() => {
+	const minutes = Math.floor(timeToUpdate.value / 60);
+	const seconds = timeToUpdate.value % 60;
+	return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+});
+
+function reloadChartData() {
+	if (!["dashboard", "mapview"].includes(authStore.currentPath)) return;
+	contentStore.setCurrentDashboardChartData();
+	timeToUpdate.value = 600;
+}
+function updateTimeToUpdate() {
+	if (!["dashboard", "mapview"].includes(authStore.currentPath)) return;
+	if (timeToUpdate.value <= 0) {
+		timeToUpdate.value = 0;
+		return;
+	}
+	timeToUpdate.value -= 5;
+}
 
 onBeforeMount(() => {
 	authStore.initialChecks();
@@ -41,6 +65,13 @@ onMounted(() => {
 	if (!showInitialWarning) {
 		dialogStore.showDialog("initialWarning");
 	}
+
+	setInterval(reloadChartData, 1000 * 600);
+	setInterval(updateTimeToUpdate, 1000 * 5);
+});
+onBeforeUnmount(() => {
+	clearInterval(reloadChartData);
+	clearInterval(updateTimeToUpdate);
 });
 </script>
 
@@ -84,6 +115,16 @@ onMounted(() => {
 		</div>
 		<InitialWarning />
 		<LogIn />
+		<div
+			class="app-update"
+			v-if="
+				['dashboard', 'mapview'].includes(authStore.currentPath) &&
+				!authStore.isMobile &&
+				!authStore.isNarrowDevice
+			"
+		>
+			<p>下次更新：{{ formattedTimeToUpdate }}</p>
+		</div>
 	</div>
 </template>
 
@@ -108,5 +149,23 @@ onMounted(() => {
 			flex-direction: column;
 		}
 	}
+
+	&-update {
+		position: fixed;
+		bottom: 0;
+		right: 20px;
+		color: white;
+		opacity: 0.3;
+		transition: opacity 0.3s;
+		user-select: none;
+
+		p {
+			color: var(--color-complement-text);
+		}
+
+		&:hover {
+			opacity: 1;
+		}
+	}
 }
 </style>
diff --git a/Taipei-City-Dashboard-FE/src/components/charts/ColumnLineChart.vue b/Taipei-City-Dashboard-FE/src/components/charts/ColumnLineChart.vue
index c27d81f5..5b24e043 100644
--- a/Taipei-City-Dashboard-FE/src/components/charts/ColumnLineChart.vue
+++ b/Taipei-City-Dashboard-FE/src/components/charts/ColumnLineChart.vue
@@ -42,9 +42,6 @@ const chartOptions = ref({
 	grid: {
 		show: false,
 	},
-	labels: {
-		datetimeUTC: false,
-	},
 	legend: {
 		show: true,
 		markers: {
@@ -104,6 +101,9 @@ const chartOptions = ref({
 				color: "var(--color-complement-text)",
 			},
 		},
+		labels: {
+			datetimeUTC: false,
+		},
 		tooltip: {
 			enabled: false,
 		},
diff --git a/Taipei-City-Dashboard-FE/src/components/charts/TimelineSeparateChart.vue b/Taipei-City-Dashboard-FE/src/components/charts/TimelineSeparateChart.vue
index b0566292..e2599ea3 100644
--- a/Taipei-City-Dashboard-FE/src/components/charts/TimelineSeparateChart.vue
+++ b/Taipei-City-Dashboard-FE/src/components/charts/TimelineSeparateChart.vue
@@ -21,9 +21,6 @@ const chartOptions = ref({
 	grid: {
 		show: false,
 	},
-	labels: {
-		datetimeUTC: false,
-	},
 	legend: {
 		show: props.series.length > 1 ? true : false,
 	},
@@ -70,6 +67,9 @@ const chartOptions = ref({
 		crosshairs: {
 			show: false,
 		},
+		labels: {
+			datetimeUTC: false,
+		},
 		tooltip: {
 			enabled: false,
 		},
diff --git a/Taipei-City-Dashboard-FE/src/components/charts/TimelineStackedChart.vue b/Taipei-City-Dashboard-FE/src/components/charts/TimelineStackedChart.vue
index 09c90ac0..62a943a1 100644
--- a/Taipei-City-Dashboard-FE/src/components/charts/TimelineStackedChart.vue
+++ b/Taipei-City-Dashboard-FE/src/components/charts/TimelineStackedChart.vue
@@ -22,9 +22,6 @@ const chartOptions = ref({
 	grid: {
 		show: false,
 	},
-	labels: {
-		datetimeUTC: false,
-	},
 	legend: {
 		show: props.series.length > 1 ? true : false,
 	},
@@ -71,6 +68,9 @@ const chartOptions = ref({
 		crosshairs: {
 			show: false,
 		},
+		labels: {
+			datetimeUTC: false,
+		},
 		tooltip: {
 			enabled: false,
 		},
diff --git a/Taipei-City-Dashboard-FE/src/views/DashboardView.vue b/Taipei-City-Dashboard-FE/src/views/DashboardView.vue
index dec986d2..a5ca9208 100644
--- a/Taipei-City-Dashboard-FE/src/views/DashboardView.vue
+++ b/Taipei-City-Dashboard-FE/src/views/DashboardView.vue
@@ -79,7 +79,7 @@ function handleOpenSettings() {
 			<button
 				@click="handleOpenSettings"
 				class="hide-if-mobile"
-				v-if="contentStore.currentDashboard.index !== 'favorites'"
+				v-if="contentStore.currentDashboard.icon !== 'favorite'"
 			>
 				加入您的第一個組件
 			</button>
diff --git a/Taipei-City-Dashboard-FE/src/views/MapView.vue b/Taipei-City-Dashboard-FE/src/views/MapView.vue
index 7d815ef9..8c4aa80f 100644
--- a/Taipei-City-Dashboard-FE/src/views/MapView.vue
+++ b/Taipei-City-Dashboard-FE/src/views/MapView.vue
@@ -104,7 +104,7 @@ function handleOpenSettings() {
 				<button
 					@click="handleOpenSettings"
 					class="hide-if-mobile"
-					v-if="contentStore.currentDashboard.index !== 'favorites'"
+					v-if="contentStore.currentDashboard.icon !== 'favorite'"
 				>
 					加入您的第一個組件
 				</button>