diff --git a/.prettierignore b/.prettierignore
index b656b39f..65a14476 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,5 @@
 # Ignore artifacts:
 dist
-skins/weewx-wdc/includes/stat-tile.inc
\ No newline at end of file
+skins/weewx-wdc/includes/stat-tile.inc
+*.inc
+*.html.tmpl
\ No newline at end of file
diff --git a/changelog.md b/changelog.md
index 5f0982a1..5e9876c2 100644
--- a/changelog.md
+++ b/changelog.md
@@ -751,5 +751,6 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.3.0...580071ca175a03fe4924b
 - Bugfix: Fixed "ValueError: could not convert string to float" in forecast, introduced in GH-191
 - Bugfix: Added missing `nl.conf` in `install.py` GH-221
 - Bugfix: Fixed Gauge tiles daily reset (via MQTT)
+- Open Webcam Links/Stat Tile links in a Modal GH-220
 - Bugfix: Max Rain Rate Does Not Reset GH-224
 - Added MQTT connection with username/password GH-225
diff --git a/install.py b/install.py
index 063a0478..0631f445 100644
--- a/install.py
+++ b/install.py
@@ -90,6 +90,7 @@ def __init__(self):
                         "skins/weewx-wdc/includes/dwd-warning.inc",
                         "skins/weewx-wdc/includes/stat-tile.inc",
                         "skins/weewx-wdc/includes/stat-tile-xaggs.inc",
+                        "skins/weewx-wdc/includes/stat-tile-modals.inc",
                         "skins/weewx-wdc/includes/conditions-table.inc",
                         "skins/weewx-wdc/includes/climatological-days.inc",
                         "skins/weewx-wdc/includes/ui-shell.inc",
diff --git a/playwright.config.ts b/playwright.config.ts
index 878e81c9..f60d9241 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -57,13 +57,13 @@ const config: PlaywrightTestConfig = {
       },
     },
 
-    {
-      name: "firefox",
-      use: {
-        ...devices["Desktop Firefox"],
-        viewport: { width: 1920, height: 1000 },
-      },
-    },
+    // {
+    //   name: "firefox",
+    //   use: {
+    //     ...devices["Desktop Firefox"],
+    //     viewport: { width: 1920, height: 1000 },
+    //   },
+    // },
 
     // {
     //   name: "webkit",
@@ -71,13 +71,6 @@ const config: PlaywrightTestConfig = {
     //     ...devices["Desktop Safari"],
     //     viewport: { width: 1920, height: 1000 },
     //   },
-    //   timeout: 50 * 1000,
-    //   expect: {
-    //     timeout: 25000,
-    //     toHaveScreenshot: {
-    //       maxDiffPixelRatio: 0.07,
-    //     },
-    //   },
     // },
 
     /* Test against mobile viewports. */
diff --git a/skins/weewx-wdc/day-archive/day-%Y-%m-%d.html.tmpl b/skins/weewx-wdc/day-archive/day-%Y-%m-%d.html.tmpl
index aeaaf089..5f5bd064 100644
--- a/skins/weewx-wdc/day-archive/day-%Y-%m-%d.html.tmpl
+++ b/skins/weewx-wdc/day-archive/day-%Y-%m-%d.html.tmpl
@@ -57,6 +57,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/includes/html-head.inc b/skins/weewx-wdc/includes/html-head.inc
index 35db26ff..540775c3 100644
--- a/skins/weewx-wdc/includes/html-head.inc
+++ b/skins/weewx-wdc/includes/html-head.inc
@@ -88,6 +88,11 @@
   };
 </script>
 
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.1/modal.min.js"
+></script>
+
 #if "heights" in $diagrams_config
 <!--prettier-ignore-->
 <style>
diff --git a/skins/weewx-wdc/includes/stat-tile-modals.inc b/skins/weewx-wdc/includes/stat-tile-modals.inc
new file mode 100644
index 00000000..3d318135
--- /dev/null
+++ b/skins/weewx-wdc/includes/stat-tile-modals.inc
@@ -0,0 +1,40 @@
+#errorCatcher Echo
+#encoding UTF-8
+
+#if $DisplayOptions.get('layout', 'alternative') == 'alternative' and 'stat_tile_links' in $DisplayOptions
+  #for $skin_obs in $DisplayOptions.get('stat_tile_links')
+    #set $render_modal = "stat_tile_links" in $DisplayOptions and $skin_obs in $DisplayOptions["stat_tile_links"] and $DisplayOptions["stat_tile_links"][$skin_obs]["open"] == "modal"
+    #set $skin_obs_key = $get_custom_data_binding_obs_key($skin_obs)
+
+    #if $render_modal
+        <cds-modal id="modal-$skin_obs_key" size="lg" fullWidth>
+        <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <!-- <cds-modal-label>Label (Optional)</cds-modal-label> -->
+            <cds-modal-heading>$obs.label[$skin_obs]</cds-modal-heading>
+        </cds-modal-header>
+        <cds-modal-body>
+            <iframe src='$DisplayOptions["stat_tile_links"][$skin_obs]["link"]' style="width: 100%; height: 100%; border: none;" ></iframe>
+        </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+            document
+                .querySelector(".stat-tile[data-observation='$skin_obs_key']")
+                .addEventListener("click", () => {
+                    document.getElementById("modal-$skin_obs_key").open = true;
+                });
+        </script>
+
+        <style>
+            .stat-tile[data-observation='$skin_obs_key'] {
+                cursor: pointer;
+            }
+            #modal-$skin_obs_key cds-modal-body {
+                min-height: 65vh;
+                overflow: hidden;
+            }
+        </style>
+    #end if
+  #end for
+#end if
\ No newline at end of file
diff --git a/skins/weewx-wdc/includes/stat-tile.inc b/skins/weewx-wdc/includes/stat-tile.inc
index 3fa2e1a3..f0209790 100644
--- a/skins/weewx-wdc/includes/stat-tile.inc
+++ b/skins/weewx-wdc/includes/stat-tile.inc
@@ -17,15 +17,20 @@
 #set $skin_obs_key = $get_custom_data_binding_obs_key($partial_obs)
 #set $rounding = $str($get_rounding($partial_obs, $skin_obs_key))
 #set $observation_binding =  $get_time_span_from_context($context, $day($data_binding=$skin_obs_binding), $week($data_binding=$skin_obs_binding), $month($data_binding=$skin_obs_binding), $year($data_binding=$skin_obs_binding), $alltime($data_binding=$skin_obs_binding), $yesterday($data_binding=$skin_obs_binding))
+
+#set $render_link = "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"] and $DisplayOptions["stat_tile_links"][$partial_obs]["open"] in ["new_tab", "same_tab"]
+#set $render_modal = "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"] and $DisplayOptions["stat_tile_links"][$partial_obs]["open"] == "modal"
+
 <script
   type="module"
   src="https://1.www.s81c.com/common/carbon/web-components/version/v1.27.0/tooltip.min.js"
 ></script>
 
-<div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-3 bx--col-max-2">
+
+<div class="bx--col-sm-4 bx--col-md-4 bx--col-lg-6 bx--col-xlg-3 bx--col-max-2 stat-tile-wrap-$skin_obs_key">
   <!--prettier-ignore-->
-  #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
-    #set $open_new_tab = "_blank" if $to_bool($DisplayOptions["stat_tile_links"][$partial_obs]["open_new_tab"]) else "_self"
+  #if $render_link
+    #set $open_new_tab = "_blank" if $DisplayOptions["stat_tile_links"][$partial_obs]["open"] == "new_tab" else "_self"
     <a class="stat-tile-link" href='$DisplayOptions["stat_tile_links"][$partial_obs]["link"]' target='$open_new_tab'>
   #end if
   <div
@@ -41,7 +46,7 @@
     <!-- Main row -->
     <div class="bx--row">
 
-      #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+      #if $render_link or $render_modal
         <svg
           class="icon-link"
           xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +56,6 @@
             points="10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6"
           />
           <rect
-            id="_Transparent_Rectangle_"
             data-name="&lt;Transparent Rectangle&gt;"
             class="cls-1"
             width="32"
@@ -371,7 +375,8 @@
     </div>
     #end if
   </div>
-  #if "stat_tile_links" in $DisplayOptions and $partial_obs in $DisplayOptions["stat_tile_links"]
+  #if $render_link
     </a>
   #end if
 </div>
+
diff --git a/skins/weewx-wdc/index.html.tmpl b/skins/weewx-wdc/index.html.tmpl
index 1952c7df..411ae9fa 100644
--- a/skins/weewx-wdc/index.html.tmpl
+++ b/skins/weewx-wdc/index.html.tmpl
@@ -69,11 +69,98 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
+    <!--Externals Modals-->
+    #set $externals_list = []
+    #if 'externals' in $Extras and $len($Extras['externals']) > 0
+      #for $external in $Extras['externals']
+        #if $external == 'description'
+          #continue
+        #end if
+        #if $to_bool($Extras['externals'][$external].show_on_front)
+          #silent $externals_list.append($external)
+        #end if
+      #end for
+    #end if
+
+    #if ('radar_html' in $Extras or $len($externals_list) > 0) and 'open_radar_and_externals_modal' in $Extras and $to_bool($Extras['open_radar_and_externals_modal'])
+      #if 'radar_html' in $Extras
+        <cds-modal id="modal-radar-default" size="md" fullWidth>
+          <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <!-- <cds-modal-label>Label (Optional)</cds-modal-label> -->
+            <cds-modal-heading>$gettext("Recent radar")</cds-modal-heading>
+          </cds-modal-header>
+          <cds-modal-body>
+            $Extras.radar_html
+          </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+          document
+            .getElementById("panel-radar")
+            .addEventListener("click", () => {
+              document.getElementById("modal-radar-default").open = true;
+            });
+
+          if (document .querySelector("#panel-radar a")) {
+            document
+              .querySelector("#panel-radar a")
+              .addEventListener("click", (event) => {
+                event.preventDefault();
+              });
+          }
+        </script>
+        <style>
+          #panel-radar {
+            cursor: pointer;
+          }
+        </style>
+      #end if
+
+      #for $external in externals_list
+        <cds-modal id="modal-$external" size="md" fullWidth>
+          <cds-modal-header>
+            <cds-modal-close-button></cds-modal-close-button>
+            <cds-modal-label>$Extras['externals'][$external].title_long</cds-modal-label>
+            <cds-modal-heading>$Extras['externals'][$external].title</cds-modal-heading>
+          </cds-modal-header>
+          <cds-modal-body>
+            $Extras['externals'][$external].source
+          </cds-modal-body>
+        </cds-modal>
+
+        <script type="text/javascript">
+          document
+            .getElementById("panel-$external")
+            .addEventListener("click", () => {
+              document.getElementById("modal-$external").open = true;
+            });
+
+          if (document .querySelector("#panel-$external a")) {
+            document
+              .querySelector("#panel-$external a")
+              .addEventListener("click", (event) => {
+                event.preventDefault();
+              });
+          }
+        </script>
+        <style>
+          #panel-$external {
+            cursor: pointer;
+          }
+        </style>
+      #end for
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
     #if $to_bool($Extras['mqtt']['mqtt_websockets_enabled'])
-    <!--prettier-ignore-->
     <script>
       var mqtt_host = "$Extras['mqtt']['mqtt_websockets_host']";
       var mqtt_port = "$Extras['mqtt']['mqtt_websockets_port']";
diff --git a/skins/weewx-wdc/month-%Y-%m.html.tmpl b/skins/weewx-wdc/month-%Y-%m.html.tmpl
index 22645353..1020095b 100644
--- a/skins/weewx-wdc/month-%Y-%m.html.tmpl
+++ b/skins/weewx-wdc/month-%Y-%m.html.tmpl
@@ -47,6 +47,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/month.html.tmpl b/skins/weewx-wdc/month.html.tmpl
index 4d3995cd..923d498f 100644
--- a/skins/weewx-wdc/month.html.tmpl
+++ b/skins/weewx-wdc/month.html.tmpl
@@ -40,6 +40,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/skin.conf b/skins/weewx-wdc/skin.conf
index 5e1b994c..c23100b1 100644
--- a/skins/weewx-wdc/skin.conf
+++ b/skins/weewx-wdc/skin.conf
@@ -30,9 +30,13 @@ SKIN_VERSION = 3.4.0
 
     # The radar code. Full html allowed.
     #radar_html = ''
+
     # The Foreacst/Radar/Webcam section heading.
     #forecast_radar_heading = "Forecast & Recent radar"
 
+    # Open the radar and external images/videos in a modal.
+    open_radar_and_externals_modal = False
+
     # Set to True to have the Forecast tile and the radar/externals tile to have the same width.
     # Default is forecast = 2/3 and radar tile = 1/3.
     forecast_radar_equal_width = False
diff --git a/skins/weewx-wdc/src/scss/index.scss b/skins/weewx-wdc/src/scss/index.scss
index 0e85d7ce..b602c343 100644
--- a/skins/weewx-wdc/src/scss/index.scss
+++ b/skins/weewx-wdc/src/scss/index.scss
@@ -16,10 +16,23 @@ bx-header,
 bx-btn,
 bx-tooltip,
 bx-tooltip-definition,
-bx-structured-list {
+bx-structured-list,
+cds-modal {
   @include carbon--theme($carbon--theme--g10, true);
 }
 
+cds-modal cds-modal-body {
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+    width: auto;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
 html.dark {
   @include carbon--theme($carbon--theme--g90, true);
 
@@ -32,7 +45,8 @@ html.dark {
   bx-btn,
   bx-tooltip,
   bx-tooltip-definition,
-  bx-structured-list {
+  bx-structured-list,
+  cds-modal {
     @include carbon--theme($carbon--theme--g90, true);
   }
 
diff --git a/skins/weewx-wdc/statistics.html.tmpl b/skins/weewx-wdc/statistics.html.tmpl
index bc90b7b9..b92569a0 100644
--- a/skins/weewx-wdc/statistics.html.tmpl
+++ b/skins/weewx-wdc/statistics.html.tmpl
@@ -64,6 +64,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/week.html.tmpl b/skins/weewx-wdc/week.html.tmpl
index abe04e11..7211a961 100644
--- a/skins/weewx-wdc/week.html.tmpl
+++ b/skins/weewx-wdc/week.html.tmpl
@@ -40,6 +40,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/year-%Y.html.tmpl b/skins/weewx-wdc/year-%Y.html.tmpl
index e5a183ae..fd2b63e7 100644
--- a/skins/weewx-wdc/year-%Y.html.tmpl
+++ b/skins/weewx-wdc/year-%Y.html.tmpl
@@ -56,6 +56,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/year.html.tmpl b/skins/weewx-wdc/year.html.tmpl
index d9b4e9d0..33bb1dd2 100644
--- a/skins/weewx-wdc/year.html.tmpl
+++ b/skins/weewx-wdc/year.html.tmpl
@@ -40,6 +40,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/skins/weewx-wdc/yesterday.html.tmpl b/skins/weewx-wdc/yesterday.html.tmpl
index 7d85a229..0f821b73 100644
--- a/skins/weewx-wdc/yesterday.html.tmpl
+++ b/skins/weewx-wdc/yesterday.html.tmpl
@@ -37,6 +37,11 @@
       </section>
     </main>
 
+    <!--Stat tile Modals-->
+    #if $DisplayOptions.get('layout', 'alternative') == 'alternative'
+      #include "includes/stat-tile-modals.inc"
+    #end if
+
     #include "includes/footer.inc"
 
     <script src="$get_base_path(path='dist/main.js')" defer></script>
diff --git a/test/e2e-tests/basic/modals.test.ts b/test/e2e-tests/basic/modals.test.ts
new file mode 100644
index 00000000..6e918b82
--- /dev/null
+++ b/test/e2e-tests/basic/modals.test.ts
@@ -0,0 +1,79 @@
+import { test, expect, type Page } from "@playwright/test";
+
+test.describe("Modal", () => {
+  const modalTestExpectations = [
+    {
+      url: "artifacts-custom-weewx-html/public_html/index.html",
+      external: true,
+      statTiles: true,
+    },
+    {
+      url: "artifacts-custom-weewx-html/public_html/week.html",
+      external: false,
+      statTiles: true,
+    },
+    {
+      url: "artifacts-custom-weewx-html/public_html/month.html",
+      external: false,
+      statTiles: true,
+    },
+    {
+      url: "artifacts-custom-weewx-html/public_html/year.html",
+      external: false,
+      statTiles: true,
+    },
+  ];
+
+  for (const testExpectation of modalTestExpectations) {
+    test(`Modal, url: ${testExpectation.url}`, async ({ page }) => {
+      await page.goto(testExpectation.url);
+
+      const modalStatET = page.locator("#modal-ET"),
+        modalExternal1 = page.locator("#modal-external_1"),
+        modalRadar = page.locator("#modal-radar-default");
+
+      await expect(modalStatET).toBeHidden();
+      await expect(modalExternal1).toBeHidden();
+      await expect(modalRadar).toBeHidden();
+
+      // Open stat tile modal.
+      await page.locator('.stat-tile[data-observation="ET"]').click();
+      await expect(modalStatET).toBeVisible();
+      await expect(modalExternal1).toBeHidden();
+      await expect(modalRadar).toBeHidden();
+
+      await expect(page).toHaveScreenshot();
+
+      // Close stat tile modal.
+      await modalStatET.getByRole("button", { name: "Close" }).click();
+      await expect(modalStatET).toBeHidden();
+
+      if (testExpectation.external) {
+        // Open Radar tile modal.
+        await page.locator("#panel-radar").click();
+        await expect(modalRadar).toBeVisible();
+        await expect(modalStatET).toBeHidden();
+        await expect(modalExternal1).toBeHidden();
+
+        await expect(page).toHaveScreenshot();
+
+        // Close Radar tile modal.
+        await modalRadar.getByRole("button", { name: "Close" }).click();
+        await expect(modalRadar).toBeHidden();
+
+        // Open external tile modal.
+        await page.locator("#tab-external_1").click();
+        await page.locator("#panel-external_1").click();
+        await expect(modalExternal1).toBeVisible();
+        await expect(modalStatET).toBeHidden();
+        await expect(modalRadar).toBeHidden();
+
+        await expect(page).toHaveScreenshot();
+
+        // Close external tile modal.
+        await modalExternal1.getByRole("button", { name: "Close" }).click();
+        await expect(modalExternal1).toBeHidden();
+      }
+    });
+  }
+});
diff --git a/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.png b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.png
new file mode 100644
index 00000000..6e4bc304
Binary files /dev/null and b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.png differ
diff --git a/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-2-chromium-linux.png b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-2-chromium-linux.png
new file mode 100644
index 00000000..5e5356c1
Binary files /dev/null and b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-2-chromium-linux.png differ
diff --git a/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-3-chromium-linux.png b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-3-chromium-linux.png
new file mode 100644
index 00000000..e1f41351
Binary files /dev/null and b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-index-html-3-chromium-linux.png differ
diff --git a/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.png b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.png
new file mode 100644
index 00000000..43748eb6
Binary files /dev/null and b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.png differ
diff --git a/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-week-html-1-chromium-linux.png b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-week-html-1-chromium-linux.png
new file mode 100644
index 00000000..6d1943ad
Binary files /dev/null and b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-week-html-1-chromium-linux.png differ
diff --git a/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-year-html-1-chromium-linux.png b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-year-html-1-chromium-linux.png
new file mode 100644
index 00000000..c1937656
Binary files /dev/null and b/test/e2e-tests/basic/modals.test.ts-snapshots/Modal-Modal-url-artifacts-custom-weewx-html-public-html-year-html-1-chromium-linux.png differ
diff --git a/test/test_install_report/src/skin-custom.conf b/test/test_install_report/src/skin-custom.conf
index a9f6e049..54345e06 100644
--- a/test/test_install_report/src/skin-custom.conf
+++ b/test/test_install_report/src/skin-custom.conf
@@ -16,7 +16,9 @@ SKIN_VERSION = 2.2.1
     # Show a link to the GitHub respository of this skin. Set to False to hide.
     github_link = True
 
-    radar_html = '<a href="https://www.dwd.de/DE/leistungen/radarbild_film/radarbild_film.html"><img src="https://www.dwd.de/DWD/wetter/radar/radfilm_sac_akt.gif" alt="Radar" loading="lazy"></a>'
+    radar_html = '<a href="https://www.dwd.de/DE/leistungen/radarbild_film/radarbild_film.html"><img src="https://public-images-social.s3.eu-west-1.amazonaws.com/webcam-placeholder.png" alt="Radar" loading="lazy"></a>'
+
+    open_radar_and_externals_modal = True
 
     [[mqtt]]
         mqtt_websockets_enabled = 0
@@ -120,6 +122,11 @@ SKIN_VERSION = 2.2.1
     # One of small, medium or large.
     gauges_size = medium
 
+    [[stat_tile_links]]
+        [[[ET]]]
+            link = "https://en.wikipedia.org/wiki/Evapotranspiration"
+            open = modal
+
     [[Gauges]]
         tick_number = 7
         arc = 1.2
diff --git a/yarn.lock b/yarn.lock
index 7f82c99d..f087544c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -668,18 +668,13 @@ __metadata:
   linkType: hard
 
 "@playwright/test@npm:latest":
-  version: 1.35.1
-  resolution: "@playwright/test@npm:1.35.1"
+  version: 1.40.0
+  resolution: "@playwright/test@npm:1.40.0"
   dependencies:
-    "@types/node": "*"
-    fsevents: 2.3.2
-    playwright-core: 1.35.1
-  dependenciesMeta:
-    fsevents:
-      optional: true
+    playwright: 1.40.0
   bin:
     playwright: cli.js
-  checksum: 3509d2f2c7397f9b0d4f49088cab8625f17d186f7e9b3389ddebf7c52ee8aae6407eab48f66b300b7bf6a33f6e3533fd5951e72bfdb001b68838af98596d5a53
+  checksum: 128f05978f9f5a557f0b7924ec134d43cb70c78d74bc3bf7b18576f00e72399100ddf1f4a139e05ea8275407d8e27be0203ac34f514319a2cbeb01eaf0be5be4
   languageName: node
   linkType: hard
 
@@ -4662,12 +4657,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.35.1":
-  version: 1.35.1
-  resolution: "playwright-core@npm:1.35.1"
+"playwright-core@npm:1.40.0":
+  version: 1.40.0
+  resolution: "playwright-core@npm:1.40.0"
   bin:
     playwright-core: cli.js
-  checksum: 179abc0051f00474e528935b507fa8cedc986b2803b020d7679878ba28cdd7036ad5a779792aad2ad281f8dc625eb1d2fb77663cb8de0d20c7ffbda7c18febdd
+  checksum: 57de5c91a4c404b120ed2af8541b21cdedcbc4f27477341157666d356bbee3b3fab8e61d020f0f450708fa2e8f6dc244b9224cb1985d5426e609cebed15af095
+  languageName: node
+  linkType: hard
+
+"playwright@npm:1.40.0":
+  version: 1.40.0
+  resolution: "playwright@npm:1.40.0"
+  dependencies:
+    fsevents: 2.3.2
+    playwright-core: 1.40.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 7ba49e5376a6cfd1d32048dbdb2fd38e09182aa2e4619fdb23d3e6530fa6987f2f3fd34ad1d9d906fb4ec2da69ee7536eeb881982d60750fde809183caa607fc
   languageName: node
   linkType: hard