diff --git a/common/component/component.js b/common/component/component.js
index 3dee2304..d92cbe68 100644
--- a/common/component/component.js
+++ b/common/component/component.js
@@ -545,6 +545,7 @@ const webnnsamplenav = () => {
             Samples
         </a>
         <div class="dropdown-menu" id="webnn-dropdown">
+            <a class="dropdown-item" href="../nnotepad/index.html">NNotepad - WebNN Playground</a>
             <a class="dropdown-item" href="../image_classification/index.html">Image Classification</a>
             <a class="dropdown-item" href="../lenet/index.html">Handwritten Digits Classification</a>
             <a class="dropdown-item" href="../nsnet2/index.html">Noise Suppression (NSNet2)</a>
diff --git a/common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-200.woff2 b/common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-200.woff2
new file mode 100644
index 00000000..ae9db3a8
Binary files /dev/null and b/common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-200.woff2 differ
diff --git a/common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-regular.woff2 b/common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-regular.woff2
new file mode 100644
index 00000000..c3f046fc
Binary files /dev/null and b/common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-regular.woff2 differ
diff --git a/common/img/webnn-reverse.svg b/common/img/webnn-reverse.svg
new file mode 100644
index 00000000..dac2c58a
--- /dev/null
+++ b/common/img/webnn-reverse.svg
@@ -0,0 +1,36 @@
+<svg width="734" height="146" viewBox="0 0 734 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z" fill="#4777C0"/>
+<path d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5229 393.523 86 388 86H243C237.477 86 233 81.5229 233 76V18Z" fill="#61BAFB"/>
+<path d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z" fill="white"/>
+<path d="M15 66L33 45" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M63 59L44 44" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M77 61L103 55" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M126 16L119 39" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M151 41L127 47" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M161 50L156 85" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M163 38L193 83" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M162 92L188 92" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M148 98L119 119" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M101 90L155 132" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M183 126L155 132" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M194 117L197 105" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M195 131L203 142" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M123 60L149 87" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M67 71L55 103" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M27 72L87 88" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M79 36L97 79" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<path d="M120 11L88 21" stroke="#61BAFB" stroke-width="6" stroke-linecap="round"/>
+<circle cx="38.5" cy="38.5" r="6.5" stroke="#61BAFB" stroke-width="4"/>
+<circle cx="69.5" cy="63.5" r="6.5" stroke="#61BAFB" stroke-width="4"/>
+<circle cx="127.5" cy="8.5" r="6.5" stroke="#61BAFB" stroke-width="4"/>
+<circle cx="154.5" cy="92.5" r="6.5" stroke="#61BAFB" stroke-width="4"/>
+<circle cx="112.5" cy="124.5" r="6.5" stroke="#61BAFB" stroke-width="4"/>
+<circle cx="190.5" cy="124.5" r="6.5" stroke="#61BAFB" stroke-width="4"/>
+<circle cx="200" cy="93" r="10" stroke="#61BAFB" stroke-width="6"/>
+<circle cx="115" cy="51" r="10" stroke="#61BAFB" stroke-width="6"/>
+<circle cx="15" cy="68" r="15" fill="#4777C0"/>
+<circle cx="75" cy="25" r="15" fill="#4777C0"/>
+<circle cx="163" cy="38" r="15" fill="#4777C0"/>
+<circle cx="101" cy="90" r="15" fill="#4777C0"/>
+<circle cx="156" cy="131" r="15" fill="#4777C0"/>
+</svg>
diff --git a/nnotepad/css/index.css b/nnotepad/css/index.css
new file mode 100644
index 00000000..e6eb446d
--- /dev/null
+++ b/nnotepad/css/index.css
@@ -0,0 +1,424 @@
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 200;
+  src: url("../../common/css/fonts/poppins/poppins-v15-latin-200.woff2")
+      format("woff2");
+}
+
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../../common/css/fonts/poppins/poppins-v15-latin-regular.woff2")
+      format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 200;
+  src: url("../../common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-200.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../../common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-regular.woff2")
+    format("woff2");
+}
+
+:root {
+  --hue: 223;
+  --bg: hsl(var(--hue), 10%, 100%);
+  --bg-dark: rgba(30, 30, 30);
+  --fg: hsl(var(--hue), 10%, 0%);
+  --fg-dark: rgba(255, 255, 255, 0.8);
+  --fg-dark-hover: rgba(255, 255, 255, 1);
+  --primary: hsl(var(--hue), 90%, 55%);
+  --primaryT: hsla(var(--hue), 90%, 55%, 0);
+  --transDur: 0.3s;
+  font-size: 16px;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  --input-height: calc(100vh - 200px);
+  --resize-height: 2px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vh;
+  height: 100vw;
+  overflow: hidden;
+  color: var(--fg);
+  font-family: "Poppins";
+}
+
+button {
+  font-family: "Poppins";
+}
+
+html,
+body {
+  background-color: var(--bg);
+}
+
+body.dark {
+  background-color: var(--bg-dark);
+}
+
+pre {
+  white-space: pre-wrap;
+}
+
+#nav {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 40px;
+  font-size: 24px;
+  padding: 8px 32px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  align-items: start;
+  font-family: "Poppins";
+}
+
+.dark #nav {
+  background-color: var(--bg-dark);
+  border-bottom: 1px solid rgba(43, 43, 43, 1);
+}
+
+#nav svg#logo_white {
+  display: inline-flex;
+}
+
+.dark #nav svg#logo_white {
+  display: none;
+}
+
+#nav svg#logo_dark {
+  display: none;
+}
+
+.dark #nav svg#logo_dark {
+  display: inline-flex;
+}
+
+.dark #nav svg path {
+  fill: var(--fg-dark);
+}
+
+.dark #nav svg:hover path {
+  fill: var(--fg-dark-hover);
+}
+
+.dark #nav svg:hover path#web {
+  fill: var(--bg-dark);
+}
+
+#nav > div:first-child {
+  display: flex;
+  align-items: start;
+}
+
+#nav > div:first-child svg {
+  max-height: 20px;
+  margin-left: 4px;
+  margin-top: 2px;
+}
+
+#nav img {
+  height: 20px;
+}
+
+#nav > div:last-child {
+  justify-self: right;
+  display: flex;
+  flex-direction: row;
+}
+
+#nav > div:last-child select {
+  align-self: flex-start;
+  margin-left: 10px;
+  padding: 3px 6px;
+  height: 25px;
+  width: 72px;
+}
+
+.dark #nav > div:last-child select {
+  background-color: var(--bg-dark);
+  color: var(--fg-dark);
+}
+
+#navbar {
+  z-index: 100;
+  list-style: none;
+  min-width: 280px;
+  text-align: right;
+  margin-right: 6px;
+}
+
+#navbar:hover {
+  cursor: pointer;
+}
+
+#navbar:hover #webnn-dropdown {
+  display: block;
+  background: linear-gradient(-45deg, #3666b0, #12294d);
+  color: #fff;
+  border-radius: 3px;
+  padding: 14px;
+}
+
+.dropdown-menu {
+  position: relative;
+  top: 13px;
+  left: 0;
+  display: none;
+  text-align: left;
+  width: 280px;
+}
+
+.dropdown-item {
+  padding: 6px;
+  display: block;
+  color: #fff;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.dropdown-item:hover {
+  background: #2555a0;
+  color: #fff;
+}
+
+.dropdown:hover .dropdown-menu {
+  display: block;
+}
+
+#input {
+  box-sizing: border-box;
+  position: absolute;
+  margin: 0;
+  left: 0;
+  right: 0;
+  height: calc(var(--input-height) - var(--resize-height) / 2);
+  top: 40px;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+}
+
+#input .monaco-editor,
+#input .monaco-editor .overflow-guard {
+  height: calc(var(--input-height) - var(--resize-height) / 2) !important;
+}
+
+#output {
+  box-sizing: border-box;
+  position: absolute;
+  margin: 0;
+  left: 0;
+  right: 0;
+  top: calc(var(--input-height) + 40px + var(--resize-height) / 2);
+  height: calc(100vh - var(--input-height) - 40px - var(--resize-height) / 2);
+  bottom: 0;
+  padding: 10px 32px;
+  border: none;
+  background-color: #eceff7;
+  overflow: auto;
+  font-size: 14px;
+  z-index: 5;
+}
+
+.dark #output {
+  background-color: var(--bg-dark);
+  color: var(--fg-dark);
+}
+
+#nav button {
+  background-color: transparent;
+  border: none;
+  height: 20px;
+}
+
+#nav button:hover {
+  cursor: pointer;
+}
+
+#srcDialog {
+  max-width: calc(100vw - 80px);
+  max-height: calc(100vh - 80px);
+  font-size: 16px;
+}
+
+#srcText {
+  position: relative;
+  box-sizing: border-box;
+  border: 20px solid #eee;
+  max-height: calc(100vh - 200px);
+  overflow: auto;
+  background-image: linear-gradient(#eee 50%, #e4e4e4 50%);
+  background-size: 100% 2lh;
+  font-family: "JetBrains Mono", "Consolas", "Lucida Console", monospace !important;
+}
+
+.monaco-editor .view-lines,
+#output {
+  font-family: "JetBrains Mono", "Consolas", "Lucida Console", monospace !important;
+}
+
+code,
+pre {
+  font-family: "JetBrains Mono", "Consolas", "Lucida Console", monospace !important;
+  padding: 0.25lh;
+}
+
+#helpDialog {
+  max-width: calc(100vw - 80px);
+  max-height: calc(100vh - 80px);
+}
+
+#helpText {
+  position: relative;
+  box-sizing: border-box;
+  border: none;
+  width: calc(100vw - 200px);
+  height: calc(100vh - 200px);
+}
+
+#resize {
+  box-sizing: border-box;
+  position: absolute;
+  background-color: #ddd;
+  margin: 0;
+  padding: 0;
+  cursor: row-resize;
+  left: 0;
+  right: 0;
+  height: var(--resize-height);
+  top: calc(var(--input-height) + 40px - var(--resize-height) / 2);
+  z-index: 5;
+}
+
+.dark #resize {
+  background-color: rgba(43, 43, 43, 1);
+}
+
+.t {
+  display: flex;
+  align-items: flex-start;
+  -webkit-tap-highlight-color: transparent;
+}
+.t_icon {
+  transition: transform var(--transDur) ease-in-out;
+}
+.t_toggle {
+  z-index: 1;
+}
+.t_label,
+.t_toggle,
+.t_toggle-wrap {
+  position: relative;
+}
+.t_toggle,
+.t_toggle:before {
+  display: block;
+}
+.t_toggle {
+  background-color: rgba(97, 186, 251, 0.2);
+  border-radius: 20px;
+  box-shadow: 0 0 0 0.125em var(--primaryT);
+  padding: 4px;
+  width: 60px;
+  height: 25px;
+  -webkit-appearance: none;
+  appearance: none;
+  transition: background-color var(--transDur) ease-in-out,
+    box-shadow 0.15s ease-in-out, transform var(--transDur) ease-in-out;
+}
+.t_toggle:before {
+  background-color: rgba(71, 119, 192, 1);
+  border-radius: 17px;
+  content: "";
+  width: 17px;
+  height: 17px;
+  transition: background-color var(--transDur) ease-in-out,
+    transform var(--transDur) ease-in-out;
+}
+.t_toggle:focus {
+  box-shadow: 0 0 0 0.125em var(--primary);
+  outline: transparent;
+}
+
+.t_toggle:checked {
+  background-color: rgba(244, 202, 37, 0.4);
+}
+.t_toggle:checked:before,
+.t_toggle:checked ~ .t_icon {
+  transform: translateX(33px);
+}
+.t_toggle:checked:before {
+  background-color: hsl(48, 90%, 85%);
+}
+.t_toggle:checked ~ .t_fill {
+  transform: translateX(0);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(1) {
+  box-shadow: 0.2em -0.2em 0 0.2em hsl(0, 0%, 100%) inset;
+  transform: scale(1);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part ~ .t_icon-part {
+  opacity: 0;
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(2) {
+  transform: rotate(45deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(3) {
+  transform: rotate(90deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(4) {
+  transform: rotate(135deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(5) {
+  transform: rotate(180deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(6) {
+  transform: rotate(225deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(7) {
+  transform: rotate(270deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(8) {
+  transform: rotate(315deg) translateY(0.8em);
+}
+.t_toggle:checked ~ .t_icon .t_icon-part:nth-child(9) {
+  transform: rotate(360deg) translateY(0.8em);
+}
+.t_toggle-wrap {
+  margin: -3px 0 0 16px;
+}
+
+@supports selector(:focus-visible) {
+  .t_toggle:focus {
+    box-shadow: 0 0 0 0.125em var(--primaryT);
+  }
+  .t_toggle:focus-visible {
+    box-shadow: 0 0 0 0.125em var(--primary);
+  }
+}
diff --git a/nnotepad/index.html b/nnotepad/index.html
index e2d2a475..68ba7e7a 100644
--- a/nnotepad/index.html
+++ b/nnotepad/index.html
@@ -1,138 +1,173 @@
 <!doctype html>
 <meta charset=utf-8>
 <title>NNotepad</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel=icon href="res/webml.png">
 <link rel=manifest href="res/manifest.json">
-<style>
-html {
-  margin: 0; padding: 0;
-  --input-height: calc(100vh - 200px);
-  --resize-height: 2px;
-}
-body {
-  margin: 0; padding: 0;
-  width: 100vh; height: 100vw;
-  overflow: hidden;
-}
-pre {
-  white-space: pre-wrap;
-}
-#input {
-  box-sizing: border-box;
-  position: absolute;
-  margin: 0;
-  left: 0; right: 0; top: 0; height: calc(var(--input-height) - var(--resize-height)/2);
-  padding: 10px;
-  border: none;
-  outline: none;
-  resize: none;
-}
-#output {
-  box-sizing: border-box;
-  position: absolute;
-  margin: 0;
-  left: 0; right: 0; top: calc(var(--input-height) + var(--resize-height)/2); bottom: 0;
-  padding: 10px;
-  border: none;
-  background-color: #eee;
-  overflow: auto;
-}
-#resize {
-  box-sizing: border-box;
-  position: absolute;
-  background-color: #ddd;
-  margin: 0;
-  padding: 0;
-  cursor: row-resize;
-  left: 0; right: 0; height: var(--resize-height); top: calc(var(--input-height) - var(--resize-height)/2);
-}
-#watermark {
-  position: absolute;
-  right: 15px; top: 5px;
-  color: #61BAFB;
-  color: #4777C0;
-  font-family: sans-serif;
-  font-size: 32px;
-  font-style: italic;
-  font-weight: bold;
-  user-select: none;
-}
-#watermark img {
-  height: 40px;
-  vertical-align: bottom;
-}
-#toolbar {
-  position: absolute;
-  right: 15px;
-  top: 50px;
-}
-#toolbar button {
-  background-color: transparent;
-  border: none;
-  font-size: 40px;
-}
-
-#srcDialog {
-  max-width: calc(100vw - 80px);
-  max-height: calc(100vh - 80px);
-}
-#srcText {
-  position: relative;
-  box-sizing: border-box;
-  border: 20px solid #eee;
-  max-height: calc(100vh - 200px);
-  overflow: auto;
-  background-image: linear-gradient(#eee 50%, #e4e4e4 50%);
-  background-size: 100% 2lh;
-}
-dialog {
-  font-family: sans-serif;
-}
-code {
-  font-family: "Consolas", "Lucida Console", monospace;
-  background-color: #eee;
-  border-radius: 0.25lh;
-  padding: 0.25lh;
-}
-#helpDialog {
-  max-width: calc(100vw - 80px);
-  max-height: calc(100vh - 80px);
-}
-#helpText {
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  width: calc(100vw - 200px);
-  height: calc(100vh - 200px);
-}
-</style>
-
+<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.49.0/min/vs/editor/editor.main.css" />
+<link rel="stylesheet" href="./css/index.css">
 <script src="js/float16arraypolyfill.js"></script>
 <script src="js/util.js" type="module"></script>
 <script src="js/nnotepad.js" type="module"></script>
+<script>
+  var require = { paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.49.0/min/vs' } };
+</script>
+<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.49.0/min/vs/loader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.49.0/min/vs/editor/editor.main.nls.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.49.0/min/vs/editor/editor.main.js"></script>
 <script src="js/index.js" type="module"></script>
 
-<textarea id=input autofocus cols=80 rows=24 placeholder="Enter code here..." spellcheck="false"></textarea>
-<div id=resize></div>
-<pre id=output>Results will show here</pre>
-
-<div id=watermark>
-  <img src="res/webml.png" alt="">NNotepad
-</div>
+<body class=light>
+  <nav id=nav>
+    <div>
+      <svg id="logo_dark" viewBox="0 0 734 146" fill="none">
+        <path
+          d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
+          fill="white" />
+        <path
+          d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5228 393.523 86 388 86H243C237.477 86 233 81.5228 233 76V18Z"
+          fill="white" fill-opacity="0.5" />
+        <path
+          d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
+          fill="white" />
+        <path d="M15 66L33 45" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M63 59L44 44" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M77 61L103 55" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M126 16L119 39" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M151 41L127 47" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M161 50L156 85" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M163 38L193 83" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M162 92L188 92" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M148 98L119 119" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M101 90L155 132" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M183 126L155 132" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M194 117L197 105" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M195 131L203 142" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M123 60L149 87" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M67 71L55 103" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M27 72L87 88" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M79 36L97 79" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <path d="M120 11L88 21" stroke="white" stroke-width="6" stroke-linecap="round" />
+        <circle cx="38.5" cy="38.5" r="6.5" stroke="white" stroke-width="4" />
+        <circle cx="69.5" cy="63.5" r="6.5" stroke="white" stroke-width="4" />
+        <circle cx="127.5" cy="8.5" r="6.5" stroke="white" stroke-width="4" />
+        <circle cx="154.5" cy="92.5" r="6.5" stroke="white" stroke-width="4" />
+        <circle cx="112.5" cy="124.5" r="6.5" stroke="white" stroke-width="4" />
+        <circle cx="190.5" cy="124.5" r="6.5" stroke="white" stroke-width="4" />
+        <circle cx="200" cy="93" r="10" stroke="white" stroke-width="6" />
+        <circle cx="115" cy="51" r="10" stroke="white" stroke-width="6" />
+        <circle cx="15" cy="68" r="15" fill="white" />
+        <circle cx="75" cy="25" r="15" fill="white" />
+        <circle cx="163" cy="38" r="15" fill="white" />
+        <circle cx="101" cy="90" r="15" fill="white" />
+        <circle cx="156" cy="131" r="15" fill="white" />
+      </svg>
+      <svg id="logo_white" viewBox="0 0 734 146" fill="none">
+        <path
+          d="M269.016 103.288C273.283 103.288 276.739 104.589 279.384 107.192C282.029 109.752 283.352 113.464 283.352 118.328V139H277.592V119.16C277.592 115.661 276.717 112.995 274.968 111.16C273.219 109.283 270.829 108.344 267.8 108.344C264.728 108.344 262.275 109.304 260.44 111.224C258.648 113.144 257.752 115.939 257.752 119.608V139H251.928V103.928H257.752V108.92C258.904 107.128 260.461 105.741 262.424 104.76C264.429 103.779 266.627 103.288 269.016 103.288ZM324.226 120.12C324.226 121.229 324.162 122.403 324.034 123.64H296.002C296.215 127.096 297.388 129.805 299.522 131.768C301.698 133.688 304.322 134.648 307.394 134.648C309.911 134.648 312.002 134.072 313.666 132.92C315.372 131.725 316.567 130.147 317.25 128.184H323.522C322.583 131.555 320.706 134.307 317.89 136.44C315.074 138.531 311.575 139.576 307.394 139.576C304.066 139.576 301.079 138.829 298.434 137.336C295.831 135.843 293.783 133.731 292.29 131C290.796 128.227 290.05 125.027 290.05 121.4C290.05 117.773 290.775 114.595 292.226 111.864C293.676 109.133 295.703 107.043 298.306 105.592C300.951 104.099 303.98 103.352 307.394 103.352C310.722 103.352 313.666 104.077 316.226 105.528C318.786 106.979 320.748 108.984 322.114 111.544C323.522 114.061 324.226 116.92 324.226 120.12ZM318.21 118.904C318.21 116.685 317.719 114.787 316.738 113.208C315.756 111.587 314.412 110.371 312.706 109.56C311.042 108.707 309.186 108.28 307.138 108.28C304.194 108.28 301.676 109.219 299.586 111.096C297.538 112.973 296.364 115.576 296.066 118.904H318.21ZM362.377 103.928V139H356.553V133.816C355.444 135.608 353.886 137.016 351.881 138.04C349.918 139.021 347.742 139.512 345.353 139.512C342.622 139.512 340.169 138.957 337.993 137.848C335.817 136.696 334.089 134.989 332.809 132.728C331.572 130.467 330.953 127.715 330.953 124.472V103.928H336.713V123.704C336.713 127.16 337.588 129.827 339.337 131.704C341.086 133.539 343.476 134.456 346.505 134.456C349.62 134.456 352.073 133.496 353.865 131.576C355.657 129.656 356.553 126.861 356.553 123.192V103.928H362.377ZM377.395 109.624C378.419 107.619 379.869 106.061 381.747 104.952C383.667 103.843 385.992 103.288 388.723 103.288V109.304H387.187C380.659 109.304 377.395 112.845 377.395 119.928V139H371.571V103.928H377.395V109.624ZM392.63 121.336C392.63 117.752 393.355 114.616 394.806 111.928C396.256 109.197 398.24 107.085 400.758 105.592C403.318 104.099 406.155 103.352 409.27 103.352C412.342 103.352 415.008 104.013 417.27 105.336C419.531 106.659 421.216 108.323 422.326 110.328V103.928H428.214V139H422.326V132.472C421.174 134.52 419.446 136.227 417.142 137.592C414.88 138.915 412.235 139.576 409.206 139.576C406.091 139.576 403.275 138.808 400.758 137.272C398.24 135.736 396.256 133.581 394.806 130.808C393.355 128.035 392.63 124.877 392.63 121.336ZM422.326 121.4C422.326 118.755 421.792 116.451 420.726 114.488C419.659 112.525 418.208 111.032 416.374 110.008C414.582 108.941 412.598 108.408 410.422 108.408C408.246 108.408 406.262 108.92 404.47 109.944C402.678 110.968 401.248 112.461 400.182 114.424C399.115 116.387 398.582 118.691 398.582 121.336C398.582 124.024 399.115 126.371 400.182 128.376C401.248 130.339 402.678 131.853 404.47 132.92C406.262 133.944 408.246 134.456 410.422 134.456C412.598 134.456 414.582 133.944 416.374 132.92C418.208 131.853 419.659 130.339 420.726 128.376C421.792 126.371 422.326 124.045 422.326 121.4ZM443.24 91.64V139H437.416V91.64H443.24ZM486.036 103.288C490.303 103.288 493.759 104.589 496.404 107.192C499.049 109.752 500.372 113.464 500.372 118.328V139H494.612V119.16C494.612 115.661 493.737 112.995 491.988 111.16C490.239 109.283 487.849 108.344 484.82 108.344C481.748 108.344 479.295 109.304 477.46 111.224C475.668 113.144 474.772 115.939 474.772 119.608V139H468.948V103.928H474.772V108.92C475.924 107.128 477.481 105.741 479.444 104.76C481.449 103.779 483.647 103.288 486.036 103.288ZM541.246 120.12C541.246 121.229 541.182 122.403 541.054 123.64H513.022C513.235 127.096 514.408 129.805 516.542 131.768C518.718 133.688 521.342 134.648 524.414 134.648C526.931 134.648 529.022 134.072 530.686 132.92C532.392 131.725 533.587 130.147 534.27 128.184H540.542C539.603 131.555 537.726 134.307 534.91 136.44C532.094 138.531 528.595 139.576 524.414 139.576C521.086 139.576 518.099 138.829 515.454 137.336C512.851 135.843 510.803 133.731 509.31 131C507.816 128.227 507.07 125.027 507.07 121.4C507.07 117.773 507.795 114.595 509.246 111.864C510.696 109.133 512.723 107.043 515.326 105.592C517.971 104.099 521 103.352 524.414 103.352C527.742 103.352 530.686 104.077 533.246 105.528C535.806 106.979 537.768 108.984 539.134 111.544C540.542 114.061 541.246 116.92 541.246 120.12ZM535.23 118.904C535.23 116.685 534.739 114.787 533.758 113.208C532.776 111.587 531.432 110.371 529.726 109.56C528.062 108.707 526.206 108.28 524.158 108.28C521.214 108.28 518.696 109.219 516.606 111.096C514.558 112.973 513.384 115.576 513.086 118.904H535.23ZM555.397 108.728V129.4C555.397 131.107 555.76 132.323 556.485 133.048C557.21 133.731 558.469 134.072 560.261 134.072H564.549V139H559.301C556.058 139 553.626 138.253 552.005 136.76C550.384 135.267 549.573 132.813 549.573 129.4V108.728H545.029V103.928H549.573V95.096H555.397V103.928H564.549V108.728H555.397ZM617.686 103.928L606.742 139H600.726L592.278 111.16L583.83 139H577.814L566.806 103.928H572.758L580.822 133.368L589.526 103.928H595.478L603.99 133.432L611.926 103.928H617.686ZM638.121 139.576C634.836 139.576 631.849 138.829 629.161 137.336C626.516 135.843 624.425 133.731 622.889 131C621.396 128.227 620.649 125.027 620.649 121.4C620.649 117.816 621.417 114.659 622.953 111.928C624.532 109.155 626.665 107.043 629.353 105.592C632.041 104.099 635.049 103.352 638.377 103.352C641.705 103.352 644.713 104.099 647.401 105.592C650.089 107.043 652.201 109.133 653.737 111.864C655.316 114.595 656.105 117.773 656.105 121.4C656.105 125.027 655.295 128.227 653.673 131C652.095 133.731 649.94 135.843 647.209 137.336C644.479 138.829 641.449 139.576 638.121 139.576ZM638.121 134.456C640.212 134.456 642.175 133.965 644.009 132.984C645.844 132.003 647.316 130.531 648.425 128.568C649.577 126.605 650.153 124.216 650.153 121.4C650.153 118.584 649.599 116.195 648.489 114.232C647.38 112.269 645.929 110.819 644.137 109.88C642.345 108.899 640.404 108.408 638.313 108.408C636.18 108.408 634.217 108.899 632.425 109.88C630.676 110.819 629.268 112.269 628.201 114.232C627.135 116.195 626.601 118.584 626.601 121.4C626.601 124.259 627.113 126.669 628.137 128.632C629.204 130.595 630.612 132.067 632.361 133.048C634.111 133.987 636.031 134.456 638.121 134.456ZM668.947 109.624C669.971 107.619 671.422 106.061 673.299 104.952C675.219 103.843 677.544 103.288 680.275 103.288V109.304H678.739C672.211 109.304 668.947 112.845 668.947 119.928V139H663.123V103.928H668.947V109.624ZM705.942 139L692.182 123.512V139H686.358V91.64H692.182V119.48L705.686 103.928H713.814L697.302 121.4L713.878 139H705.942Z"
+          fill="#4777C0" />
+        <path
+          d="M233 18C233 12.4772 237.477 8 243 8H388C393.523 8 398 12.4772 398 18V76C398 81.5229 393.523 86 388 86H243C237.477 86 233 81.5229 233 76V18Z"
+          fill="#61BAFB" />
+        <path id="web"
+          d="M300.069 33.928L289.125 69H283.109L274.661 41.16L266.213 69H260.197L249.189 33.928H255.141L263.205 63.368L271.909 33.928H277.861L286.373 63.432L294.309 33.928H300.069ZM337.209 50.12C337.209 51.2293 337.145 52.4027 337.017 53.64H308.985C309.199 57.096 310.372 59.8053 312.505 61.768C314.681 63.688 317.305 64.648 320.377 64.648C322.895 64.648 324.985 64.072 326.649 62.92C328.356 61.7253 329.551 60.1467 330.233 58.184H336.505C335.567 61.5547 333.689 64.3067 330.873 66.44C328.057 68.5307 324.559 69.576 320.377 69.576C317.049 69.576 314.063 68.8293 311.417 67.336C308.815 65.8427 306.767 63.7307 305.273 61C303.78 58.2267 303.033 55.0267 303.033 51.4C303.033 47.7733 303.759 44.5947 305.209 41.864C306.66 39.1333 308.687 37.0427 311.289 35.592C313.935 34.0987 316.964 33.352 320.377 33.352C323.705 33.352 326.649 34.0773 329.209 35.528C331.769 36.9787 333.732 38.984 335.097 41.544C336.505 44.0613 337.209 46.92 337.209 50.12ZM331.193 48.904C331.193 46.6853 330.703 44.7867 329.721 43.208C328.74 41.5867 327.396 40.3707 325.689 39.56C324.025 38.7067 322.169 38.28 320.121 38.28C317.177 38.28 314.66 39.2187 312.569 41.096C310.521 42.9733 309.348 45.576 309.049 48.904H331.193ZM350.081 40.456C351.275 38.3653 353.025 36.6587 355.329 35.336C357.633 34.0133 360.257 33.352 363.201 33.352C366.358 33.352 369.195 34.0987 371.713 35.592C374.23 37.0853 376.214 39.1973 377.665 41.928C379.115 44.616 379.841 47.752 379.841 51.336C379.841 54.8773 379.115 58.0347 377.665 60.808C376.214 63.5813 374.209 65.736 371.649 67.272C369.131 68.808 366.315 69.576 363.201 69.576C360.171 69.576 357.505 68.9147 355.201 67.592C352.939 66.2693 351.233 64.584 350.081 62.536V69H344.257V21.64H350.081V40.456ZM373.889 51.336C373.889 48.6907 373.355 46.3867 372.289 44.424C371.222 42.4613 369.771 40.968 367.937 39.944C366.145 38.92 364.161 38.408 361.985 38.408C359.851 38.408 357.867 38.9413 356.033 40.008C354.241 41.032 352.79 42.5467 351.681 44.552C350.614 46.5147 350.081 48.7973 350.081 51.4C350.081 54.0453 350.614 56.3707 351.681 58.376C352.79 60.3387 354.241 61.8533 356.033 62.92C357.867 63.944 359.851 64.456 361.985 64.456C364.161 64.456 366.145 63.944 367.937 62.92C369.771 61.8533 371.222 60.3387 372.289 58.376C373.355 56.3707 373.889 54.024 373.889 51.336Z"
+          fill="white" />
+        <path d="M15 66L33 45" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M63 59L44 44" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M77 61L103 55" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M126 16L119 39" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M151 41L127 47" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M161 50L156 85" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M163 38L193 83" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M162 92L188 92" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M148 98L119 119" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M101 90L155 132" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M183 126L155 132" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M194 117L197 105" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M195 131L203 142" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M123 60L149 87" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M67 71L55 103" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M27 72L87 88" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M79 36L97 79" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <path d="M120 11L88 21" stroke="#61BAFB" stroke-width="6" stroke-linecap="round" />
+        <circle cx="38.5" cy="38.5" r="6.5" stroke="#61BAFB" stroke-width="4" />
+        <circle cx="69.5" cy="63.5" r="6.5" stroke="#61BAFB" stroke-width="4" />
+        <circle cx="127.5" cy="8.5" r="6.5" stroke="#61BAFB" stroke-width="4" />
+        <circle cx="154.5" cy="92.5" r="6.5" stroke="#61BAFB" stroke-width="4" />
+        <circle cx="112.5" cy="124.5" r="6.5" stroke="#61BAFB" stroke-width="4" />
+        <circle cx="190.5" cy="124.5" r="6.5" stroke="#61BAFB" stroke-width="4" />
+        <circle cx="200" cy="93" r="10" stroke="#61BAFB" stroke-width="6" />
+        <circle cx="115" cy="51" r="10" stroke="#61BAFB" stroke-width="6" />
+        <circle cx="15" cy="68" r="15" fill="#4777C0" />
+        <circle cx="75" cy="25" r="15" fill="#4777C0" />
+        <circle cx="163" cy="38" r="15" fill="#4777C0" />
+        <circle cx="101" cy="90" r="15" fill="#4777C0" />
+        <circle cx="156" cy="131" r="15" fill="#4777C0" />
+      </svg>
 
-<div id=toolbar>
-  <button id=peek title="Show generated code">&#x1F50E;</button><br>
-  <button id=help title="Show documentation">&#x1F6C8;</button><br>
-  <select id=device title="MLContext deviceType hint"><option value=cpu>CPU</option><option value=gpu>GPU</option><option value=npu>NPU</option></select>
-</div>
+      <svg viewBox="0 0 311 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M36 48H30.176L6.752 12.48V48H0.928V3.328H6.752L30.176 38.784V3.328H36V48ZM80.36 48H74.536L51.112 12.48V48H45.288V3.328H51.112L74.536 38.784V3.328H80.36V48ZM104.944 48.576C101.659 48.576 98.672 47.8293 95.984 46.336C93.3387 44.8427 91.248 42.7307 89.712 40C88.2187 37.2267 87.472 34.0267 87.472 30.4C87.472 26.816 88.24 23.6587 89.776 20.928C91.3547 18.1547 93.488 16.0427 96.176 14.592C98.864 13.0987 101.872 12.352 105.2 12.352C108.528 12.352 111.536 13.0987 114.224 14.592C116.912 16.0427 119.024 18.1333 120.56 20.864C122.139 23.5947 122.928 26.7733 122.928 30.4C122.928 34.0267 122.117 37.2267 120.496 40C118.917 42.7307 116.763 44.8427 114.032 46.336C111.301 47.8293 108.272 48.576 104.944 48.576ZM104.944 43.456C107.035 43.456 108.997 42.9653 110.832 41.984C112.667 41.0027 114.139 39.5307 115.248 37.568C116.4 35.6053 116.976 33.216 116.976 30.4C116.976 27.584 116.421 25.1947 115.312 23.232C114.203 21.2693 112.752 19.8187 110.96 18.88C109.168 17.8987 107.227 17.408 105.136 17.408C103.003 17.408 101.04 17.8987 99.248 18.88C97.4987 19.8187 96.0907 21.2693 95.024 23.232C93.9573 25.1947 93.424 27.584 93.424 30.4C93.424 33.2587 93.936 35.6693 94.96 37.632C96.0267 39.5947 97.4347 41.0667 99.184 42.048C100.933 42.9867 102.853 43.456 104.944 43.456ZM137.05 17.728V38.4C137.05 40.1067 137.412 41.3227 138.138 42.048C138.863 42.7307 140.122 43.072 141.914 43.072H146.202V48H140.954C137.711 48 135.279 47.2533 133.658 45.76C132.036 44.2667 131.226 41.8133 131.226 38.4V17.728H126.682V12.928H131.226V4.096H137.05V12.928H146.202V17.728H137.05ZM184.618 29.12C184.618 30.2293 184.554 31.4027 184.426 32.64H156.394C156.607 36.096 157.781 38.8053 159.914 40.768C162.09 42.688 164.714 43.648 167.786 43.648C170.303 43.648 172.394 43.072 174.058 41.92C175.765 40.7253 176.959 39.1467 177.642 37.184H183.914C182.975 40.5547 181.098 43.3067 178.282 45.44C175.466 47.5307 171.967 48.576 167.786 48.576C164.458 48.576 161.471 47.8293 158.826 46.336C156.223 44.8427 154.175 42.7307 152.682 40C151.189 37.2267 150.442 34.0267 150.442 30.4C150.442 26.7733 151.167 23.5947 152.618 20.864C154.069 18.1333 156.095 16.0427 158.698 14.592C161.343 13.0987 164.373 12.352 167.786 12.352C171.114 12.352 174.058 13.0773 176.618 14.528C179.178 15.9787 181.141 17.984 182.506 20.544C183.914 23.0613 184.618 25.92 184.618 29.12ZM178.602 27.904C178.602 25.6853 178.111 23.7867 177.13 22.208C176.149 20.5867 174.805 19.3707 173.098 18.56C171.434 17.7067 169.578 17.28 167.53 17.28C164.586 17.28 162.069 18.2187 159.978 20.096C157.93 21.9733 156.757 24.576 156.458 27.904H178.602ZM197.49 19.392C198.642 17.3867 200.348 15.7227 202.61 14.4C204.914 13.0347 207.58 12.352 210.61 12.352C213.724 12.352 216.54 13.0987 219.058 14.592C221.618 16.0853 223.623 18.1973 225.074 20.928C226.524 23.616 227.25 26.752 227.25 30.336C227.25 33.8773 226.524 37.0347 225.074 39.808C223.623 42.5813 221.618 44.736 219.058 46.272C216.54 47.808 213.724 48.576 210.61 48.576C207.623 48.576 204.978 47.9147 202.674 46.592C200.412 45.2267 198.684 43.5413 197.49 41.536V64.64H191.666V12.928H197.49V19.392ZM221.298 30.336C221.298 27.6907 220.764 25.3867 219.698 23.424C218.631 21.4613 217.18 19.968 215.346 18.944C213.554 17.92 211.57 17.408 209.394 17.408C207.26 17.408 205.276 17.9413 203.442 19.008C201.65 20.032 200.199 21.5467 199.09 23.552C198.023 25.5147 197.49 27.7973 197.49 30.4C197.49 33.0453 198.023 35.3707 199.09 37.376C200.199 39.3387 201.65 40.8533 203.442 41.92C205.276 42.944 207.26 43.456 209.394 43.456C211.57 43.456 213.554 42.944 215.346 41.92C217.18 40.8533 218.631 39.3387 219.698 37.376C220.764 35.3707 221.298 33.024 221.298 30.336ZM232.1 30.336C232.1 26.752 232.825 23.616 234.276 20.928C235.726 18.1973 237.71 16.0853 240.228 14.592C242.788 13.0987 245.625 12.352 248.74 12.352C251.812 12.352 254.478 13.0133 256.74 14.336C259.001 15.6587 260.686 17.3227 261.796 19.328V12.928H267.684V48H261.796V41.472C260.644 43.52 258.916 45.2267 256.612 46.592C254.35 47.9147 251.705 48.576 248.676 48.576C245.561 48.576 242.745 47.808 240.228 46.272C237.71 44.736 235.726 42.5813 234.276 39.808C232.825 37.0347 232.1 33.8773 232.1 30.336ZM261.796 30.4C261.796 27.7547 261.262 25.4507 260.196 23.488C259.129 21.5253 257.678 20.032 255.844 19.008C254.052 17.9413 252.068 17.408 249.892 17.408C247.716 17.408 245.732 17.92 243.94 18.944C242.148 19.968 240.718 21.4613 239.652 23.424C238.585 25.3867 238.052 27.6907 238.052 30.336C238.052 33.024 238.585 35.3707 239.652 37.376C240.718 39.3387 242.148 40.8533 243.94 41.92C245.732 42.944 247.716 43.456 249.892 43.456C252.068 43.456 254.052 42.944 255.844 41.92C257.678 40.8533 259.129 39.3387 260.196 37.376C261.262 35.3707 261.796 33.0453 261.796 30.4ZM274.709 30.336C274.709 26.752 275.435 23.616 276.885 20.928C278.336 18.1973 280.32 16.0853 282.837 14.592C285.397 13.0987 288.256 12.352 291.413 12.352C294.144 12.352 296.683 12.992 299.029 14.272C301.376 15.5093 303.168 17.152 304.405 19.2V0.639999H310.293V48H304.405V41.408C303.253 43.4987 301.547 45.2267 299.285 46.592C297.024 47.9147 294.379 48.576 291.349 48.576C288.235 48.576 285.397 47.808 282.837 46.272C280.32 44.736 278.336 42.5813 276.885 39.808C275.435 37.0347 274.709 33.8773 274.709 30.336ZM304.405 30.4C304.405 27.7547 303.872 25.4507 302.805 23.488C301.739 21.5253 300.288 20.032 298.453 19.008C296.661 17.9413 294.677 17.408 292.501 17.408C290.325 17.408 288.341 17.92 286.549 18.944C284.757 19.968 283.328 21.4613 282.261 23.424C281.195 25.3867 280.661 27.6907 280.661 30.336C280.661 33.024 281.195 35.3707 282.261 37.376C283.328 39.3387 284.757 40.8533 286.549 41.92C288.341 42.944 290.325 43.456 292.501 43.456C294.677 43.456 296.661 42.944 298.453 41.92C300.288 40.8533 301.739 39.3387 302.805 37.376C303.872 35.3707 304.405 33.0453 304.405 30.4Z"
+          fill="#4777C0" />
+      </svg>
+    </div>
+    <div>
+      <div class=navbar-nav id=navbar>
+        <div class=nav-link>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+            <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
+          </svg>
+        </div>
+        <div class=dropdown-menu id=webnn-dropdown>
+          <a class=dropdown-item href="../nnotepad/index.html">NNotepad - WebNN Playground</a>
+          <a class=dropdown-item href="../image_classification/index.html">Image Classification</a>
+          <a class=dropdown-item href="../lenet/index.html">Handwritten Digits Classification</a>
+          <a class=dropdown-item href="../nsnet2/index.html">Noise Suppression (NSNet2)</a>
+          <a class=dropdown-item href="../rnnoise/index.html">Noise Suppression (RNNoise)</a>
+          <a class=dropdown-item href="../style_transfer/index.html">Fast Style Transfer</a>
+          <a class=dropdown-item href="../object_detection/index.html">Object Detection</a>
+          <a class=dropdown-item href="../semantic_segmentation/index.html">Semantic Segmentation</a>
+          <a class=dropdown-item href="../face_recognition/index.html">Face Recognition</a>
+          <a class=dropdown-item href="../facial_landmark_detection/index.html">Facial landmark Detection</a>
+          <a class=dropdown-item href="../code/index.html">WebNN Code Editor</a>
+        </div>
+      </div>
+      <button id=peek title="Show generated code">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+          <path
+            d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
+        </svg>
+      </button>
+      <button id=help title="Show documentation">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+          <path
+            d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+        </svg>
+      </button>
+      <select id=device title="MLContext deviceType hint">
+        <option value=cpu>CPU</option>
+        <option value=gpu>GPU</option>
+        <option value=npu>NPU</option>
+      </select>
+      <label for="theme" class="t">
+        <span class="t_toggle-wrap">
+          <input id="theme" class="t_toggle" type="checkbox" role="switch" name="theme" value="light">
+        </span>
+      </label>
+  </nav>
+  <div id=input spellcheck="false">
+  </div>
+  <div id=resize></div>
+  <pre id=output>Results will show here</pre>
 
-<dialog id=srcDialog>
-  An <code>MLGraphBuilder</code> is passed as <code>_</code>
-  <pre id=srcText></pre>
-  <button id=srcClose autofocus>Close</button>
-</dialog>
+  <dialog id=srcDialog>
+    An <code>MLGraphBuilder</code> is passed as <code>_</code>
+    <pre id=srcText></pre>
+    <button id=srcClose autofocus>Close</button>
+  </dialog>
 
-<dialog id=helpDialog>
-  <iframe id=helpText src="res/docs.html"></iframe><br>
-  <button id=helpClose autofocus>Close</button>
-</dialog>
+  <dialog id=helpDialog>
+    <iframe id=helpText src="res/docs.html"></iframe><br>
+    <button id=helpClose autofocus>Close</button>
+  </dialog>
+</body>
\ No newline at end of file
diff --git a/nnotepad/js/index.js b/nnotepad/js/index.js
index 276c333b..6f1c8685 100644
--- a/nnotepad/js/index.js
+++ b/nnotepad/js/index.js
@@ -1,33 +1,46 @@
+/* global monaco */
+
 import {Util} from './util.js';
 import {NNotepad, ParseError} from './nnotepad.js';
-
 const $ = (s) => document.querySelector(s);
 const $$ = (s) => [...document.querySelectorAll(s)];
 document.addEventListener('DOMContentLoaded', async (e) => {
+  let inputValue = '';
   try {
     const req = await fetch('res/default.txt');
     if (req.ok) {
-      $('#input').value = await req.text();
+      inputValue = await req.text();
     }
   } catch (ex) {
     console.warn(ex);
   }
 
+  const editor = monaco.editor.create($('#input'), {
+    value: inputValue,
+    language: 'markdown',
+    lineNumbers: 'on',
+    automaticLayout: true,
+    theme: 'vs',
+    disableMonospaceOptimizations: true,
+  });
+
   async function refresh(e) {
-    const code = $('#input').value;
+    const code = editor.getValue();
     $('#output').innerText = '';
     $('#output').style.color = '';
     $('#srcText').innerText = '';
 
-    if (!code.trim()) {
+    if (code && !code.trim()) {
       return;
     }
 
     try {
       const [builderFunc, src] = NNotepad.makeBuilderFunction(code);
       $('#srcText').innerText = src;
-      const result =
-          await NNotepad.execBuilderFunction($('#device').value, builderFunc);
+      const result = await NNotepad.execBuilderFunction(
+          $('#device').value,
+          builderFunc,
+      );
       $('#output').innerText = explain(result);
     } catch (ex) {
       $('#output').style.color = 'red';
@@ -51,14 +64,20 @@ document.addEventListener('DOMContentLoaded', async (e) => {
 
   refresh();
 
-  $$('dialog > button').forEach((e) => e.addEventListener('click', (e) => {
-    e.target.parentElement.close();
-  }));
+  $$('dialog > button').forEach((e) =>
+    e.addEventListener('click', (e) => {
+      e.target.parentElement.close();
+    }),
+  );
   $$('dialog').forEach((dialog) => {
     dialog.addEventListener('click', (e) => {
       const rect = e.target.getBoundingClientRect();
-      if (e.clientY < rect.top || e.clientY > rect.bottom ||
-          e.clientX < rect.left || e.clientX > rect.right) {
+      if (
+        e.clientY < rect.top ||
+        e.clientY > rect.bottom ||
+        e.clientX < rect.left ||
+        e.clientX > rect.right
+      ) {
         e.target.close();
       }
     });
@@ -69,31 +88,50 @@ document.addEventListener('DOMContentLoaded', async (e) => {
   $('#peek').addEventListener('click', (e) => $('#srcDialog').showModal());
   $('#help').addEventListener('click', (e) => $('#helpDialog').showModal());
 
+  $('#theme').addEventListener('click', (e) => {
+    let theme = $('#theme').value;
+    (theme === 'light') ? theme = 'dark' : theme = 'light';
+    $('#theme').value = theme;
+    let newTheme = 'vs-dark';
+    (theme === 'light') ? newTheme = 'vs' : newTheme = 'vs-dark';
+    monaco.editor.setTheme(newTheme);
+    (theme === 'light') ?
+      document.body.setAttribute('class', 'light') :
+      document.body.setAttribute('class', 'dark');
+  });
+
   $('#resize').addEventListener('pointerdown', (e) => {
     const resize = e.target;
     resize.setPointerCapture(e.pointerId);
     const listener = (e) => {
       document.documentElement.style.setProperty(
-          '--input-height', `${e.clientY}px`);
+          '--input-height',
+          `${e.clientY - $('#nav').offsetHeight}px`,
+      );
     };
     resize.addEventListener('pointermove', listener);
-    resize.addEventListener('pointerup', () => {
-      resize.releasePointerCapture(e.pointerId);
-      resize.removeEventListener('pointermove', listener);
-    }, {once: true});
+    resize.addEventListener(
+        'pointerup',
+        () => {
+          resize.releasePointerCapture(e.pointerId);
+          resize.removeEventListener('pointermove', listener);
+        },
+        {once: true},
+    );
   });
 });
 
 function explain(outputs) {
   return outputs
-      .map(
-          (output) => ['dataType: ' + output.dataType,
-            'shape: ' + Util.stringify(output.shape),
-            'tensor: ' + dumpTensor(output.shape, output.buffer, 8),
-          ].join('\n'))
+      .map((output) =>
+        [
+          'dataType: ' + output.dataType,
+          'shape: ' + Util.stringify(output.shape),
+          'tensor: ' + dumpTensor(output.shape, output.buffer, 8),
+        ].join('\n'),
+      )
       .join('\n\n');
 
-
   function dumpTensor(shape, buffer, indent) {
     // Scalar
     if (shape.length === 0) {
@@ -128,4 +166,3 @@ function explain(outputs) {
     })();
   }
 }
-
diff --git a/nnotepad/res/docs.html b/nnotepad/res/docs.html
index dcb64237..dfbe3bff 100644
--- a/nnotepad/res/docs.html
+++ b/nnotepad/res/docs.html
@@ -11,13 +11,44 @@
 
 -->
 <style>
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 200;
+  src: url("../../common/css/fonts/poppins/poppins-v15-latin-200.woff2")
+      format("woff2");
+}
+
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../../common/css/fonts/poppins/poppins-v15-latin-regular.woff2")
+      format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../../common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-200.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../common/css/fonts/jetbrains-mono/jetbrains-mono-v18-latin-regular.woff2') format('woff2');
+}
 body {
-  font-family: sans-serif;
   font-size: 16px;
   line-height: 30px;
+  font-family: "Poppins", "Consolas", "Lucida Console", monospace;
 }
 code {
-  font-family: "Consolas", "Lucida Console", monospace;
+  font-family: "JetBrains Mono", "Consolas", "Lucida Console", monospace;
 }
 code {
   display: inline-block;
@@ -33,8 +64,9 @@
 }
 pre {
   background-color: #eee;
-  border-radius: 1lh;
+  border-radius: 10px;
   padding: 1lh;
+  font-family: "JetBrains Mono", "Consolas", "Lucida Console", monospace;
 }
 </style>
 
diff --git a/package.json b/package.json
index 41d8d37a..1208b8a4 100644
--- a/package.json
+++ b/package.json
@@ -26,9 +26,9 @@
     "@babel/core": "^7.12.1",
     "@babel/eslint-parser": "^7.12.1",
     "@babel/plugin-syntax-top-level-await": "^7.12.1",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "eslint": "^7.5.0",
     "eslint-config-google": "^0.14.0",
-    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "vite": "^5.1.7"
   },
   "scripts": {
@@ -36,6 +36,7 @@
     "start": "vite --host"
   },
   "dependencies": {
-    "babel-eslint": "^8.0.3"
+    "babel-eslint": "^8.0.3",
+    "monaco-editor": "^0.49.0"
   }
 }
diff --git a/vite.config.js b/vite.config.js
index e4e1185d..0ecb136e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,5 +5,7 @@ export default defineConfig({
   build: {
     target: 'esnext',
   },
-  plugins: [basicSsl()],
+  plugins: [
+    basicSsl(),
+  ],
 });