diff --git a/README.md b/README.md
index 76ab08c1..9fb13259 100644
--- a/README.md
+++ b/README.md
@@ -37,12 +37,15 @@ To get started, follow these steps:
 5. Keep in mind that WebNN currently supports the CPU backend only on Chrome or Edge browsers, and it requires enabling the experimental web platform features flag (see below). Ensure you have this flag enabled in your browser to fully experience WebNN functionality.
 6. Experiment with the code and explore how WebNN can enhance machine learning tasks in the browser, navigating to http://localhost:8080.
 
-### Enabling Experimental Features Flag
-1. In Chrome navigate to `chrome://flags/`. In Edge navigate to `edge://flags/`.
-1. Search for the **#enable-experimental-web-platform-features** flag.
-1. Enable the feature: Toggle the corresponding switch or checkbox to turn it on.  
-   **Note:** Enabling experimental features may lead to unexpected behavior, so proceed with caution.
-1. Restart the browser: If prompted, restart your browser after enabling the feature.
+### WebNN Installation Guides
+
+WebNN requires a compatible browser to run, and Windows 11 v21H2 (DML 1.6.0) or higher for GPU. Try the latest Google Chrome* Canary or Microsoft Edge Canary, which requires enabling WebNN functionality in the settings.
+
+1. Download the latest [Google Chrome Canary](https://www.google.com/chrome/canary/) or [Microsoft Edge Canary](https://www.microsoft.com/en-us/edge/download/insider) browser. 
+2. To enable WebNN, in your browser address bar, `enter chrome://flags`, and then press `Enter`. An Experiments page opens. 
+3. In the Search flags box, enter `webnn`. `Enables WebNN API` appears. 
+4. In the drop-down menu, select `Enabled`. 
+5. Relaunch your browser.
 
 ## Support and Feedback
 If you encounter any issues or have feedback on the WebNN Samples, please open an issue on the repository. We appreciate your input and will strive to address any problems as quickly as possible.
diff --git a/code/index.html b/code/index.html
index 67a631f3..3a34c20c 100644
--- a/code/index.html
+++ b/code/index.html
@@ -61,7 +61,7 @@
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.
diff --git a/common/component/component.js b/common/component/component.js
index e8861ec3..83a7e963 100644
--- a/common/component/component.js
+++ b/common/component/component.js
@@ -576,10 +576,23 @@ const webnnbadge = () => {
   return nnbadge;
 };
 
+const footer = () => {
+    const footerlink = `
+        <p>
+          &copy;2024 
+          <a href="https://webmachinelearning.github.io/">WebNN API</a> ·
+          <a href="https://github.com/webmachinelearning/webnn-samples#webnn-installation-guides">Installation Guides</a> · 
+          <a href="https://webmachinelearning.github.io/webnn-status/">Implementation Status</a>
+        </p>
+    `;
+    return footerlink;
+}
+
 $(document).ready(async () => {
   $("nav ul.navbar-nav").html(webnnsamplenav());
   $("#logosvg").html(webnnlogo());
   $("#badge").html(webnnbadge());
+  $("#footer").html(footer());
   if (await isWebNN()) {
     if ($("#backendBtns")) {
       if (!isElectron()) {
diff --git a/common/css/style.css b/common/css/style.css
index 23994566..72564d1e 100644
--- a/common/css/style.css
+++ b/common/css/style.css
@@ -815,4 +815,12 @@ a:hover {
 .wider-col {
   flex: 0 0 13%;
   max-width: 13%;
+}
+
+#footer {
+  font-size: 0.8rem;
+}
+
+#footer a {
+  display: inline-block;
 }
\ No newline at end of file
diff --git a/face_recognition/index.html b/face_recognition/index.html
index 0a929c3f..6b6f5423 100644
--- a/face_recognition/index.html
+++ b/face_recognition/index.html
@@ -205,7 +205,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.
diff --git a/facial_landmark_detection/index.html b/facial_landmark_detection/index.html
index b6eaf20a..3c5e836e 100644
--- a/facial_landmark_detection/index.html
+++ b/facial_landmark_detection/index.html
@@ -178,7 +178,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.
diff --git a/image_classification/index.html b/image_classification/index.html
index 30f7e033..94394826 100644
--- a/image_classification/index.html
+++ b/image_classification/index.html
@@ -197,7 +197,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.
diff --git a/index.html b/index.html
index 89f7cb96..8d13a6d9 100644
--- a/index.html
+++ b/index.html
@@ -351,7 +351,7 @@ <h1 class="title"><a class="replaceableUrl" href="./face_recognition/index.html"
     </div>
   </div>
   <footer class="text-muted text-center text-small mt-5">
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.
diff --git a/lenet/index.html b/lenet/index.html
index 7ee1a339..cf6b5e8d 100644
--- a/lenet/index.html
+++ b/lenet/index.html
@@ -110,7 +110,7 @@ <h5>Prediction Result:</h5>
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.
diff --git a/nsnet2/index.html b/nsnet2/index.html
index 33bf573f..0c34ce10 100644
--- a/nsnet2/index.html
+++ b/nsnet2/index.html
@@ -100,7 +100,7 @@
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.
diff --git a/object_detection/index.html b/object_detection/index.html
index 5cf2bc30..bcc5c3dc 100644
--- a/object_detection/index.html
+++ b/object_detection/index.html
@@ -154,7 +154,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.
diff --git a/rnnoise/index.html b/rnnoise/index.html
index b8c91d3a..c7fb08bd 100644
--- a/rnnoise/index.html
+++ b/rnnoise/index.html
@@ -100,7 +100,7 @@
     </div>
     <footer class="text-muted text-center text-small mt-5">
       <div id="badge"></div>
-      <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+      <div id="footer"></div>
     </footer>
     <script>
       // This workaround is to fix jquery loading issue in electron.
diff --git a/selfie_segmentation/index.html b/selfie_segmentation/index.html
index 219bea85..f92161bc 100644
--- a/selfie_segmentation/index.html
+++ b/selfie_segmentation/index.html
@@ -164,7 +164,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <img id='feedElement' hidden crossorigin='anonymous' src=''>
   <video id='feedMediaElement' autoplay playsinline hidden></video>
diff --git a/semantic_segmentation/index.html b/semantic_segmentation/index.html
index 7f2a071b..166f27ad 100644
--- a/semantic_segmentation/index.html
+++ b/semantic_segmentation/index.html
@@ -211,7 +211,7 @@ <h2 class="text-uppercase text-info">No model selected</h2>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <img id='feedElement' hidden crossorigin='anonymous' src=''>
   <video id='feedMediaElement' autoplay playsinline hidden></video>
diff --git a/style_transfer/index.html b/style_transfer/index.html
index 4565cc3d..062a56de 100644
--- a/style_transfer/index.html
+++ b/style_transfer/index.html
@@ -189,7 +189,7 @@ <h6 class='text-muted shoulddisplay' style='display: none;'>
   </div>
   <footer class="text-muted text-center text-small mt-5">
     <div id="badge"></div>
-    <p>&copy;2023 <a href="https://webmachinelearning.github.io/">WebNN API</a></p>
+    <div id="footer"></div>
   </footer>
   <script>
     // This workaround is to fix jquery loading issue in electron.