diff --git a/css/demo.css b/css/demo.css
index 376c668..7cb99b4 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -10,11 +10,12 @@
  */
 
 body {
-  max-width: 750px;
+  max-width: 990px;
   margin: 0 auto;
   padding: 1em;
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
+  -webkit-text-size-adjust: 100%;
   line-height: 1.4;
   background: #212121;
   color: #dedede;
@@ -29,65 +30,58 @@ a:visited {
 a:hover {
   color: #98c379;
 }
-figure,
-tr {
-  background: #363636;
-}
-tr:nth-child(odd) {
-  background: #414141;
-}
-td,
-th {
-  padding: 10px;
-  text-align: left;
-}
-table {
-  width: 100%;
-  word-wrap: break-word;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-figure {
-  margin: 0;
-  padding: 10px;
-  border-radius: 5px;
-  display: inline-block;
-}
-figure,
-table {
-  margin-bottom: 20px;
-}
-img,
-canvas {
-  border: 0;
-  vertical-align: middle;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-}
 h1 {
   margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+label {
+  display: inline-block;
+  margin-bottom: 0.25em;
 }
 button,
 input,
-select,
 textarea {
+  -webkit-appearance: none;
   box-sizing: border-box;
+  margin: 0;
+  padding: 0.5em 0.75em;
   font-family: inherit;
   font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  padding: 5px;
+  line-height: 1.4;
+  background: #414141;
+  color: #dedede;
+  border: 1px solid #363636;
+  border-radius: 5px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
+}
+input,
+textarea {
+  display: block;
+  width: 100%;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
 }
-input[type='file'] {
-  padding: inherit;
-  max-width: 100%;
+textarea {
+  display: block;
+  overflow: auto;
+}
+button {
+  background: #3c76a7;
+  background: linear-gradient(180deg, #3c76a7, #225c8d);
+  border-color: #225c8d;
+  color: #fff;
+}
+button[type='submit'] {
+  background: #6fa349;
+  background: linear-gradient(180deg, #6fa349, #568a30);
+  border-color: #568a30;
+}
+button[type='reset'] {
+  background: #d79435;
+  background: linear-gradient(180deg, #d79435, #be7b1c);
+  border-color: #be7b1c;
+}
+button:active {
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-color-scheme: light) {
@@ -104,22 +98,15 @@ input[type='file'] {
   a:hover {
     color: #6fa349;
   }
-  figure,
-  tr {
+  input,
+  textarea {
     background: #fff;
+    border-color: #d1d1d1;
     color: #212121;
   }
-  tr:nth-child(odd) {
-    background: #f6f6f6;
-  }
-}
-
-#input,
-#result {
-  width: 100%;
 }
 
-@media (min-width: 481px) {
+@media (min-width: 540px) {
   #navigation {
     list-style: none;
     padding: 0;
diff --git a/index.html b/index.html
index 8d95266..ff78e15 100644
--- a/index.html
+++ b/index.html
@@ -53,17 +53,26 @@ <h1>JavaScript MD5 Demo</h1>
       <li><a href="test/">Test</a></li>
       <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
     </ul>
+    <script src="js/md5.js"></script>
     <form>
-      <h2>Input</h2>
-      <textarea rows="6" id="input"></textarea>
-      <br />
-      <button type="submit" id="calculate">Calculate</button>
-      <button type="reset" id="reset">Reset</button>
-      <h2>Result</h2>
-      <input id="result" />
-      <br />
+      <p>
+        <label for="input">Input</label>
+        <textarea rows="6" id="input"></textarea>
+      </p>
+      <p>
+        <button
+          type="submit"
+          id="calculate"
+          onclick="result.value=md5(input.value);return false"
+        >
+          Calculate
+        </button>
+        <button type="reset" id="reset">Reset</button>
+      </p>
+      <p>
+        <label for="result">Result</label>
+        <input id="result" readonly />
+      </p>
     </form>
-    <script src="js/md5.js"></script>
-    <script src="js/demo/demo.js"></script>
   </body>
 </html>
diff --git a/js/demo/demo.js b/js/demo/demo.js
deleted file mode 100644
index 663b28e..0000000
--- a/js/demo/demo.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * JavaScript MD5 Demo JS
- * https://github.com/blueimp/JavaScript-MD5
- *
- * Copyright 2013, Sebastian Tschan
- * https://blueimp.net
- *
- * Licensed under the MIT license:
- * https://opensource.org/licenses/MIT
- */
-
-/* global md5 */
-
-/* eslint-disable strict */
-
-;(function () {
-  'use strict'
-
-  var input = document.getElementById('input')
-  document
-    .getElementById('calculate')
-    .addEventListener('click', function (event) {
-      event.preventDefault()
-      document.getElementById('result').value = md5(input.value)
-    })
-  input.value = '日本'
-})()