diff --git a/templates/clock.svg b/templates/clock.svg
index 9fcfe29029..4c281f19d9 100644
--- a/templates/clock.svg
+++ b/templates/clock.svg
@@ -1,40 +1,51 @@
 <svg viewBox="-20 -20 40 40" stroke-linecap="round" stroke="black" fill="white" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .epic:hover {
+        stroke: darkorchid;
+    }
+    .legendary:hover {
+        stroke: gold;
+    }
+    .mythic:hover {
+        stroke: #f2a900;
+    }
+  </style>
   <circle r="4000" fill="#dedede" stroke="none"/>
   <circle r="19" stroke-width="0.2"/>
   <text y="4" dominant-baseline="middle" text-anchor="middle" stroke="none" font-size="4" fill="lightgrey">{{self.height}}</text>
-  <line y1="-16" y2="-15" stroke-width="0.3" stroke="#d00505"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(10.90909090909091)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(21.81818181818182)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(32.72727272727273)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(43.63636363636364)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(54.54545454545455)"/>
-  <line y1="-16" y2="-15" stroke-width="0.5" transform="rotate(65.45454545454545)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(76.36363636363636)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(87.27272727272728)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(98.18181818181817)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(109.0909090909091)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(120.0)"/>
-  <line y1="-16" y2="-15" stroke-width="0.5" transform="rotate(130.9090909090909)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(141.8181818181818)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(152.72727272727272)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(163.63636363636363)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(174.54545454545456)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(185.45454545454544)"/>
-  <line y1="-16" y2="-15" stroke-width="0.5" transform="rotate(196.36363636363635)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(207.27272727272728)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(218.1818181818182)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(229.0909090909091)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(240.0)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(250.90909090909093)"/>
-  <line y1="-16" y2="-15" stroke-width="0.5" transform="rotate(261.8181818181818)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(272.72727272727275)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(283.6363636363636)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(294.54545454545456)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(305.45454545454544)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(316.3636363636364)"/>
-  <line y1="-16" y2="-15" stroke-width="0.5" transform="rotate(327.27272727272725)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(338.1818181818182)"/>
-  <line y1="-16" y2="-15" stroke-width="0.3" transform="rotate(349.0909090909091)"/>
+  <line class="mythic" y1="-16" y2="-15" stroke-width="0.3" stroke="#d00505"><title>Genesis</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(10.90909090909091)"><title>1st Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(21.81818181818182)"><title>2nd Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(32.72727272727273)"><title>3rd Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(43.63636363636364)"><title>4th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(54.54545454545455)"><title>5th Halving</title></line>
+  <line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(65.45454545454545)"><title>1st Conjunction</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(76.36363636363636)"><title>7th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(87.27272727272728)"><title>8th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(98.18181818181817)"><title>9th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(109.0909090909091)"><title>10th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(120.0)"><title>11th Halving</title></line>
+  <line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(130.9090909090909)"><title>2nd Conjunction</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(141.8181818181818)"><title>13th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(152.72727272727272)"><title>14th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(163.63636363636363)"><title>15th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(174.54545454545456)"><title>16th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(185.45454545454544)"><title>17th Halving</title></line>
+  <line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(196.36363636363635)"><title>3rd Conjunction</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(207.27272727272728)"><title>19th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(218.1818181818182)"><title>20th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(229.0909090909091)"><title>21st Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(240.0)"><title>22nd Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(250.90909090909093)"><title>23rd Halving</title></line>
+  <line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(261.8181818181818)"><title>4th Conjunction</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(272.72727272727275)"><title>25th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(283.6363636363636)"><title>26th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(294.54545454545456)"><title>27th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(305.45454545454544)"><title>28th Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(316.3636363636364)"><title>29th Halving</title></line>
+  <line class="legendary" y1="-16" y2="-15" stroke-width="0.5" transform="rotate(327.27272727272725)"><title>5th Conjunction</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(338.1818181818182)"><title>31st Halving</title></line>
+  <line class="epic" y1="-16" y2="-15" stroke-width="0.3" transform="rotate(349.0909090909091)"><title>32nd Halving</title></line>
   <line y2="-9" transform="rotate({{self.hour}})"/>
   <line y2="-13" stroke-width="0.6" transform="rotate({{self.minute}})"/>
   <line y2="-16" stroke="#d00505" stroke-width="0.2" transform="rotate({{self.second}})"/>