diff --git a/src/components/GeneratePage.vue b/src/components/GeneratePage.vue
index 941302a..c92e5cc 100644
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -292,29 +292,60 @@ button {
   flex-direction: row;
   justify-content: space-around;
 }
+
 .green,
-.input-line label:hover input#greenCheckbox ~ .border .checkmark,
 .input-line label input#greenCheckbox:checked ~ .border .checkmark {
   background-color: #c8f9df;
 }
 
+.input-line label:hover input#greenCheckbox ~ .border .checkmark {
+  background-color: #10e783;
+}
+
+.input-line label:focus input#greenCheckbox ~ .border .checkmark,
+.input-line label:active input#greenCheckbox ~ .border .checkmark {
+  background-color: #0ed277;
+}
+
 .red,
-.input-line label:hover input#redCheckbox ~ .border .checkmark,
 .input-line label input#redCheckbox:checked ~ .border .checkmark {
   background-color: #fbd7de;
 }
 
+.input-line label:hover input#redCheckbox ~ .border .checkmark {
+  background-color: #ef5878;
+}
+
+.input-line label:focus input#redCheckbox ~ .border .checkmark,
+.input-line label:active input#redCheckbox ~ .border .checkmark {
+  background-color: #ec3b61;
+}
+
 .yellow,
-.input-line label:hover input#yellowCheckbox ~ .border .checkmark,
 .input-line label input#yellowCheckbox:checked ~ .border .checkmark {
   background-color: #fff6d6;
 }
 
+.input-line label:hover input#yellowCheckbox ~ .border .checkmark {
+  background-color: #ffde5d;
+}
+.input-line label:focus input#yellowCheckbox ~ .border .checkmark,
+.input-line label:active input#yellowCheckbox ~ .border .checkmark {
+  background-color: #ecc31d;
+}
+
 .blue,
-.input-line label:hover input#blueCheckbox ~ .border .checkmark,
 .input-line label input#blueCheckbox:checked ~ .border .checkmark {
   background-color: #d4f2fe;
 }
+.input-line label:hover input#blueCheckbox ~ .border .checkmark {
+  background-color: #57d2fb;
+}
+
+.input-line label:focus input#blueCheckbox ~ .border .checkmark,
+.input-line label:active input#blueCheckbox ~ .border .checkmark {
+  background-color: #24acda;
+}
 
 @media only screen and (max-width: 768px) {
   input,
diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index 96ede2d..ba6dbaf 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <canvas ref="purchase-chart" width="100" height="50"></canvas>
+    <div ref="chartjsLegend" class="chartjsLegend"></div>
   </div>
 </template>
 
@@ -105,4 +106,12 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.chartjsLegend li span {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+  border-radius: 25px;
+}
+</style>