diff --git a/html/css/default.css b/html/css/default.css
index dbffdf6..9effc01 100644
--- a/html/css/default.css
+++ b/html/css/default.css
@@ -1,5 +1,5 @@
 body {
-  margin: 2em 1em 2em 70px;
+  margin: 2em 1em 0 3em;
   color: black;
   background: white;
   background-position: top left;
@@ -9,19 +9,19 @@ body {
   text-align: center;
 }
 
-th.requirement { background-color: #ff66ff; color: black; }
+h1 { text-align: center; }
+h2, h3, h4, h5, h6 { text-align: left; }
+h1 { color: black; font: 120% sans-serif; font-weight: bold; }
+h2 { color: #005A9C; font: 110%; font-weight: medium; }
+h3 { color: #001A4C; font: 105% sans-serif; font-weight: medium; }
+h4 { color: #007A9C; font: 90% sans-serif; font-weight: medium; }
+h5 { color: #005A9C; font: italic 80% sans-serif; }
+h6 { font: small-caps 70% sans-serif; }
 
-h1 {text-align: center}
-h2, h3, h4, h5, h6 { text-align: left }
-h1 { color: black; font: 120% sans-serif; font-weight: bold}
-h2 { color: #005A9C; font: 110%; font-weight: medium}
-h3 { color: #001A4C; font: 105% sans-serif; font-weight: medium}
-h4 { color: #007A9C; font: 90% sans-serif; font-weight: medium}
-h5 { color: #005A9C; font: italic 80% sans-serif }
-h6 { font: small-caps 70% sans-serif }
+img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
+
+main { display: flex; flex-wrap: wrap; }
+main div.graph { margin: 5px auto; }
+main div.range-select span { color: blue; text-decoration: underline; cursor: pointer; }
 
-pre {
-    background-color: lightcyan;
-    text-color: black;
-}
 
diff --git a/html/index.html b/html/index.html
index 0afc5bd..cd77acf 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,33 +1,72 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
+<!doctype html>
+<html lang="en">
 <head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-<meta http-equiv="content-language" content="ja" />
-<meta http-equiv="Content-Stype-Type" content="text/css" />
-<meta http-equiv="Content-Script-Type" content="text/javascript" />
-<meta http-equiv="refresh" content="60" />
-<link rel="stylesheet" type="text/css" href="css/default.css" />
-<title>C407 Server Room Temperature</title>
+  <meta charset="utf-8">
+  <title>C407 Server Room Temperature</title>
+  <meta name="description" content="C407 Server Room Temperature">
+  <meta name="author" content="Neuroinformatics Unit, RIKEN CBS">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta http-equiv="refresh" content="300">
+  <link rel="stylesheet" href="css/default.css">
 </head>
+
 <body>
 <h1>C407 Server Room Temperature</h1>
 
-<table>
-  <tbody>
-    <tr>
-      <td><img src="./images/graph-hour.png" alt="Hourly Graph" /></td>
-      <td><img src="./images/graph-day.png" alt="Daily Graph" /></td>
-    </tr>
-    <tr>
-      <td><img src="./images/graph-week.png" alt="Weekly Graph" /></td>
-      <td><img src="./images/graph-month.png" alt="Monthly Graph" /></td>
-    </tr>
-    <tr>
-      <td><img src="./images/graph-year.png" alt="Yearly Graph" /></td>
-      <td><img src="./images/graph-3year.png" alt="3 Years Graph" /></td>
-    </tr>
-  </tbody>
-</table>
-
+<main>
+  <div class="graph">
+    <div class="range-select">
+      Hour:
+      <span onclick="changeGraph('g1', 'hour', 1)">1</span> ...
+      <span onclick="changeGraph('g1', 'hour', 3)">3</span> ...
+      <span onclick="changeGraph('g1', 'hour', 6)">6</span> ...
+      <span onclick="changeGraph('g1', 'hour', 12)">12</span>
+    </div>
+    <div><img id="g1" src="./images/graph-hour.png" alt="Hourly Graph" /></div>
+  </div>
+  <div class="graph">
+    <div class="range-select">
+      Day:
+      <span onclick="changeGraph('g2', 'day', 1)">1</span> ...
+      <span onclick="changeGraph('g2', 'day', 3)">3</span>
+    </div>
+    <div><img id="g2" src="./images/graph-day.png" alt="Daily Graph" /></div>
+  </div>
+  <div class="graph">
+    <div class="range-select">
+      Week:
+      <span onclick="changeGraph('g3', 'week', 1)">1</span> ...
+      <span onclick="changeGraph('g3', 'week', 2)">2</span>
+    </div>
+    <div><img id="g3" src="./images/graph-week.png" alt="Weekly Graph" /></div>
+  </div>
+  <div class="graph">
+    <div class="range-select">
+      Month:
+      <span onclick="changeGraph('g4', 'month', 1)">1</span> ...
+      <span onclick="changeGraph('g4', 'month', 3)">3</span> ...
+      <span onclick="changeGraph('g4', 'month', 6)">6</span>
+    </div>
+    <div><img id="g4" src="./images/graph-month.png" alt="Monthly Graph" /></div>
+  </div>
+  <div class="graph">
+    <div class="range-select">
+      Year:
+      <span onclick="changeGraph('g5', 'year', 1)">1</span> ...
+      <span onclick="changeGraph('g5', 'year', 3)">3</span> ...
+      <span onclick="changeGraph('g5', 'year', 5)">5</span> ...
+      <span onclick="changeGraph('g5', 'year', 10)">10</span>
+    </div>
+    <div><img id="g5" src="./images/graph-year.png" alt="Yearly Graph" /></div>
+  </div>
+</main>
+<script>
+function changeGraph(id, type, num) {
+  const img = document.getElementById(id);
+    if (img) {
+      img.src = './images/graph-' + (num === 1 ? '' : num) + type + '.png';
+    }
+}
+</script>
 </body>
 </html>
