diff --git a/website/src/lib/docs/zh-HK/files-and-stats.mdx b/website/src/lib/docs/zh-HK/files-and-stats.mdx
index 19cf4e98e..c682ff7fb 100644
--- a/website/src/lib/docs/zh-HK/files-and-stats.mdx
+++ b/website/src/lib/docs/zh-HK/files-and-stats.mdx
@@ -3,9 +3,9 @@ title: Files and statistics
 ---
 
 <script lang="ts">
-    import { ChartNoAxesColumn } from 'lucide-svelte';
+    import { ChartNoAxesColumn } from '@lucide/svelte';
     import DocsNote from '$lib/components/docs/DocsNote.svelte';
-    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+    import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
     import GPXStatistics from '$lib/components/GPXStatistics.svelte';
     import { exampleGPXFile } from '$lib/assets/example';
     import { writable } from 'svelte/store';
@@ -13,7 +13,7 @@ title: Files and statistics
     let gpxStatistics = writable(exampleGPXFile.getStatistics());
     let slicedGPXStatistics = writable(undefined);
     let additionalDatasets = writable(['speed', 'atemp']);
-    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
+    let elevationFill = writable(undefined);
 </script>
 
 # { title }
@@ -84,8 +84,8 @@ You can also use the mouse wheel to zoom in and out on the elevation profile, an
     <ElevationProfile
         {gpxStatistics}
         {slicedGPXStatistics}
-        additionalDatasets={$additionalDatasets}
-        elevationFill={$elevationFill}
+        {additionalDatasets}
+        {elevationFill}
     />
 </div>
 <div class="flex flex-col items-center -mt-6">