diff --git a/ctod/templates/preview/index.html b/ctod/templates/preview/index.html
index a779d81..c0268ab 100644
--- a/ctod/templates/preview/index.html
+++ b/ctod/templates/preview/index.html
@@ -5,13 +5,13 @@
     <script type="module">
       import { Pane } from "https://cdn.jsdelivr.net/npm/tweakpane@4.0.1/dist/tweakpane.min.js";
     </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.106.0/Cesium.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.121.1/Cesium.js"></script>
     <script src="./scripts/utils.js"></script>
     <script src="./scripts/index.js"></script>
     <script src="./scripts/controls.js"></script>
     <script src="./scripts/slopeshade.js"></script>
     <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.106.0/Widgets/widgets.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.121.1/Widgets/widgets.min.css"
       rel="stylesheet"
     />
 
@@ -42,7 +42,8 @@
       }
 
       #attribution {
-        font-family: "Courier New", Courier, "Lucida Console", "Monaco", monospace;
+        font-family: "Courier New", Courier, "Lucida Console", "Monaco",
+          monospace;
         position: absolute;
         bottom: 0;
         right: 0;
@@ -57,7 +58,6 @@
   </head>
   <body>
     <div id="cesiumContainer"></div>
-    <div id="attribution">
-    </div>
+    <div id="attribution"></div>
   </body>
 </html>
diff --git a/ctod/templates/preview/scripts/index.js b/ctod/templates/preview/scripts/index.js
index 7189fed..c42f2e7 100644
--- a/ctod/templates/preview/scripts/index.js
+++ b/ctod/templates/preview/scripts/index.js
@@ -7,11 +7,11 @@ var viewer,
   currentCog,
   dataset;
 
-function loadCesium() {
+async function loadCesium() {
   Cesium.Ion.defaultAccessToken = undefined;
 
   viewer = new Cesium.Viewer("cesiumContainer", {
-    imageryProvider: false,
+    baseLayer: false,
     requestRenderMode: true,
     timeline: false,
     animation: false,
@@ -26,13 +26,13 @@ function loadCesium() {
     msaaSamples: 1,
   });
 
-  initializeLayers();
-  initTerrainProvider();
+  await initializeLayers();
+  await initTerrainProvider();
   configureViewer();
   setShading();
 }
 
-function initializeLayers() {
+async function initializeLayers() {
   streetsLayer = new Cesium.ImageryLayer(
     new Cesium.OpenStreetMapImageryProvider({
       url: "https://tile.openstreetmap.org/",
@@ -68,7 +68,7 @@ function initializeLayers() {
   useStreetLayer();
 }
 
-function initTerrainProvider() {
+async function initTerrainProvider() {
   dataset = getUrlParamIgnoreCase("dataset") || undefined;
   const minZoom = getUrlParamIgnoreCase("minZoom") || 1;
   const maxZoom = getUrlParamIgnoreCase("maxZoom") || 18;
@@ -76,7 +76,7 @@ function initTerrainProvider() {
   const cog = getUrlParamIgnoreCase("cog") || "./ctod/files/test_cog.tif";
   const skipCache = getUrlParamIgnoreCase("skipCache") || false;
   const meshingMethod = getUrlParamIgnoreCase("meshingMethod") || "grid";
-  setTerrainProvider(
+  await setTerrainProvider(
     minZoom,
     maxZoom,
     noData,
@@ -124,7 +124,7 @@ function configureViewer() {
   });
 }
 
-function setTerrainProvider(
+async function setTerrainProvider(
   minZoom,
   maxZoom,
   noData,
@@ -145,10 +145,12 @@ function setTerrainProvider(
     }
   }
 
-  terrainProvider = new Cesium.CesiumTerrainProvider({
-    url: terrainProviderUrl,
-    requestVertexNormals: true,
-  });
+  terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
+    terrainProviderUrl,
+    {
+      requestVertexNormals: true,
+    }
+  );
 
   viewer.terrainProvider = terrainProvider;
   if (currentCog !== cog) {
