diff --git a/views/index.erb b/views/index.erb
index dab8bd2..7b0b052 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -1,3 +1,24 @@
+<head>
+  <meta charset="utf-8">
+  <script type="module">
+    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
+    window.Stimulus = Application.start()
+
+    Stimulus.register("mood", class extends Controller {
+      static targets = [ "image" ]
+
+      showMode(event) {
+        const image = this.imageTarget
+        image.src = event.target.dataset.mode + ".png"
+      }
+
+      showCurrent() {
+        const image = this.imageTarget
+        image.src = "<%= @last_mood.mode %>.png"
+      }
+
+    })
+  </script>
 <style>
 body {
   margin: 0px;
@@ -84,9 +105,10 @@ tbody tr td {
   background-color: green;
 }
 </style>
-<main>
+</head>
+<main data-controller="mood">
   <div class="mode">
-    <img src="<%= @last_mood.mode %>.png">
+    <img data-mood-target="image" src="<%= @last_mood.mode %>.png">
   </div>
   <div class="tracker">
     <div class="info">
@@ -98,7 +120,7 @@ tbody tr td {
         <div class="week">
           <% week.each do |d| %>
             <% if d[1] %>
-              <div title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+              <div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
             <% else %>
               <div class="day"></div>
             <% end %>
