diff --git a/common/css/homepage.css b/common/css/homepage.css
index 74db31ca..b1a94dd0 100644
--- a/common/css/homepage.css
+++ b/common/css/homepage.css
@@ -129,6 +129,10 @@ a {
     background: url("../img/codeeditor.jpg") center/cover no-repeat
 }
 
+#bg_nnotepad {
+    background: url("../img/nnotepad.png") center/cover no-repeat
+}
+
 .cardwrapper:hover {
     -webkit-animation: zoomin 5s linear;
     animation: zoomin 5s linear;
diff --git a/common/img/nnotepad.png b/common/img/nnotepad.png
new file mode 100644
index 00000000..2fcebfbd
Binary files /dev/null and b/common/img/nnotepad.png differ
diff --git a/index.html b/index.html
index c14f19e1..6b604e15 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,35 @@ <h4 class="text-info">WebNN Samples</h4>
       <p>continuously update based on WebNN spec</p>
     </div>
     <div class="row">
+      <div class="col-lg">
+        <div class="card1 card">
+          <div id="bg_nnotepad" class="cardwrapper">
+            <div class="data">
+              <div class="content">
+                <h1 class="title"><a class="replaceableUrl" href="./nnotepad/index.html">NNotepad - WebNN Playground</a></h1>
+                <p class="text">A browser-based playground for experimenting with WebNN expressions without boilerplate code.</p>
+                <div class="samplelink">
+                  <a class="replaceableUrl" href="./nnotepad/index.html">
+                    Explore
+                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                      stroke-width="2" class="link" viewBox="0 0 24 24">
+                      <path d="M5 12h14M12 5l7 7-7 7"></path>
+                    </svg>
+                  </a>
+                  <a href="https://github.com/webmachinelearning/webnn-samples/tree/master/nnotepad/">
+                    View Code
+                    <svg viewBox="0 0 24 24" class="gh">
+                      <path
+                        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12">
+                      </path>
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="col-lg">
         <div class="card1 card">
           <div id="bg_ce" class="cardwrapper">
@@ -90,6 +119,8 @@ <h1 class="title"><a class="replaceableUrl" href="./image_classification/index.h
         </div>
       </div>
 
+    </div>
+    <div class="row">
       <div class="col-lg">
         <div class="card1 card">
           <div id="bg_hr" class="cardwrapper">
@@ -120,8 +151,6 @@ <h1 class="title"><a class="replaceableUrl" href="./lenet/index.html">Handwritte
           </div>
         </div>
       </div>
-    </div>
-    <div class="row">
       <div class="col-lg">
         <div class="card2 card">
           <div id="bg_st" class="cardwrapper">
@@ -182,6 +211,8 @@ <h1 class="title"><a class="replaceableUrl" href="./nsnet2/index.html">Noise
           </div>
         </div>
       </div>
+    </div>
+    <div class="row">
       <div class="col-lg">
         <div class="card2 card">
           <div id="bg_ns2" class="cardwrapper">
@@ -212,8 +243,6 @@ <h1 class="title"><a class="replaceableUrl" href="./rnnoise/index.html">Noise
           </div>
         </div>
       </div>
-    </div>
-    <div class="row">
       <div class="col-lg">
         <div class="card2 card">
           <div id="bg_od" class="cardwrapper">
@@ -276,6 +305,8 @@ <h1 class="title"><a class="replaceableUrl" href="./semantic_segmentation/index.
           </div>
         </div>
       </div>
+    </div>
+    <div class="row">
       <div class="col-lg">
         <div class="card2 card">
           <div id="bg_fld" class="cardwrapper">
@@ -307,8 +338,6 @@ <h1 class="title"><a class="replaceableUrl" href="./facial_landmark_detection/in
           </div>
         </div>
       </div>
-    </div>
-    <div class="row">
       <div class="col-lg">
         <div class="card2 card">
           <div id="bg_fr" class="cardwrapper">
@@ -344,10 +373,6 @@ <h1 class="title"><a class="replaceableUrl" href="./face_recognition/index.html"
         <div class="card2 card">
         </div>
       </div>
-      <div class="col-lg">
-        <div class="card2 card">
-        </div>
-      </div>
     </div>
   </div>
   <footer class="text-muted text-center text-small mt-5">