diff --git a/public/templates/data.tmpl b/public/templates/data.tmpl
index 203c45c..c915013 100644
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" />
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js{{&key_query}}"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js{{&key_query}}"><\/script>'); }</script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -18,10 +18,10 @@
   </style>
   {{/is_vector}}
   {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
-  <script src="{{public_url}}leaflet.js"></script>
-  <script src="{{public_url}}leaflet-hash.js"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
+  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css{{&key_query}}" />
+  <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
+  <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
+  <script src="{{public_url}}L.TileLayer.NoGap.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index 0763f3f..26b6942 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>TileServer GL - Server for vector and raster maps with GL styles</title>
-  <link rel="stylesheet" type="text/css" href="{{public_url}}index.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}index.css{{&key_query}}" />
   <script>
     function toggle_xyz(id) {
       var el = document.getElementById(id);
@@ -17,7 +17,7 @@
 </head>
 <body>
   <section>
-    <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png" alt="TileServer GL" /></h1>
+    <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png{{&key_query}}" alt="TileServer GL" /></h1>
     <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
     {{#if styles}}
       <h2 class="box-header">Styles</h2>
@@ -27,7 +27,7 @@
           {{#if thumbnail}}
             <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
-            <img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" />
+            <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
@@ -74,7 +74,7 @@
           {{#if thumbnail}}
             <img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
-            <img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" />
+            <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
@@ -104,7 +104,7 @@
     {{/if}}
   </section>
   <footer>
-    <a href="https://www.maptiler.com/" target="_blank"><img src="{{public_url}}images/maptiler-logo.svg" /></a>
+    <a href="https://www.maptiler.com/" target="_blank"><img src="{{public_url}}images/maptiler-logo.svg{{&key_query}}" /></a>
     <p>
       <a href="https://github.com/maptiler/tileserver-gl" target="_blank">Powered by TileServer GL ({{server_version}})</a> – <a href="https://www.maptiler.com/" target="_blank">an open-source project from MapTiler.</a>
     </p>
diff --git a/public/templates/viewer.tmpl b/public/templates/viewer.tmpl
index 6122cdd..6f27aae 100644
--- a/public/templates/viewer.tmpl
+++ b/public/templates/viewer.tmpl
@@ -4,14 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
-  <script src="{{public_url}}leaflet.js"></script>
-  <script src="{{public_url}}leaflet-hash.js"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css{{&key_query}}" />
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js{{&key_query}}"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js{{&key_query}}"><\/script>'); }</script>
+  <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
+  <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
+  <script src="{{public_url}}L.TileLayer.NoGap.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
