diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 4f16082..f8ef398 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -90,11 +90,11 @@
                                 <b-form-radio-group buttons button-variant="outline-info" size="lg"
                                                     v-bind:value="item.rating" @change="changeRating(index, $event)"
                                                     required>
-                                    <b-form-radio value=1>1</b-form-radio>
-                                    <b-form-radio value=2>2</b-form-radio>
-                                    <b-form-radio value=3>3</b-form-radio>
-                                    <b-form-radio value=4>4</b-form-radio>
-                                    <b-form-radio value=5>5</b-form-radio>
+                                    <b-form-radio button-variant="1" value=1>1</b-form-radio>
+                                    <b-form-radio button-variant="2" value=2>2</b-form-radio>
+                                    <b-form-radio button-variant="3" value=3>3</b-form-radio>
+                                    <b-form-radio button-variant="4" value=4>4</b-form-radio>
+                                    <b-form-radio button-variant="5" value=5>5</b-form-radio>
                                 </b-form-radio-group>
                             </b-form-group>
                         </b-col>
@@ -384,4 +384,214 @@ img {
   height: 60px;
   object-fit: contain;
 }
+
+.btn-1 {
+    color: #ffffff;
+    background-color: #CC3232;
+    border-color: #000000;
+}
+.btn-1:hover,
+.btn-1:focus,
+.btn-1:active,
+.btn-1.active,
+.open .dropdown-toggle.btn-1 {
+    color: #ffffff;
+    background-color: #4285F4;
+    border-color: #000000;
+}
+.btn-1:active,
+.btn-1.active,
+.open .dropdown-toggle.btn-1 {
+    background-image: none;
+}
+.btn-1.disabled,
+.btn-1[disabled],
+fieldset[disabled] .btn-1,
+.btn-1.disabled:hover,
+.btn-1[disabled]:hover,
+fieldset[disabled] .btn-1:hover,
+.btn-1.disabled:focus,
+.btn-1[disabled]:focus,
+fieldset[disabled] .btn-1:focus,
+.btn-1.disabled:active,
+.btn-1[disabled]:active,
+fieldset[disabled] .btn-1:active,
+.btn-1.disabled.active,
+.btn-1[disabled].active,
+fieldset[disabled] .btn-1.active {
+    background-color: #CC3232;
+    border-color: #4285F4;
+}
+.btn-1 .badge {
+    color: #CC3232;
+    background-color: #ffffff;
+}
+
+.btn-2 {
+    color: #ffffff;
+    background-color: #DB7B2B;
+    border-color: #000000;
+}
+.btn-2:hover,
+.btn-2:focus,
+.btn-2:active,
+.btn-2.active,
+.open .dropdown-toggle.btn-2 {
+    color: #ffffff;
+    background-color: #4285F4;
+    border-color: #000000;
+}
+.btn-2:active,
+.btn-2.active,
+.open .dropdown-toggle.btn-2 {
+    background-image: none;
+}
+.btn-2.disabled,
+.btn-2[disabled],
+fieldset[disabled] .btn-2,
+.btn-2.disabled:hover,
+.btn-2[disabled]:hover,
+fieldset[disabled] .btn-2:hover,
+.btn-2.disabled:focus,
+.btn-2[disabled]:focus,
+fieldset[disabled] .btn-2:focus,
+.btn-2.disabled:active,
+.btn-2[disabled]:active,
+fieldset[disabled] .btn-2:active,
+.btn-2.disabled.active,
+.btn-2[disabled].active,
+fieldset[disabled] .btn-2.active {
+    background-color: #DB7B2B;
+    border-color: #4285F4;
+}
+.btn-2 .badge {
+    color: #DB7B2B;
+    background-color: #ffffff;
+}
+
+.btn-3 {
+    color: #ffffff;
+    background-color: #E7B416;
+    border-color: #000000;
+}
+.btn-3:hover,
+.btn-3:focus,
+.btn-3:active,
+.btn-3.active,
+.open .dropdown-toggle.btn-3 {
+    color: #ffffff;
+    background-color: #4285F4;
+    border-color: #000000;
+}
+.btn-3:active,
+.btn-3.active,
+.open .dropdown-toggle.btn-3 {
+    background-image: none;
+}
+.btn-3.disabled,
+.btn-3[disabled],
+fieldset[disabled] .btn-3,
+.btn-3.disabled:hover,
+.btn-3[disabled]:hover,
+fieldset[disabled] .btn-3:hover,
+.btn-3.disabled:focus,
+.btn-3[disabled]:focus,
+fieldset[disabled] .btn-3:focus,
+.btn-3.disabled:active,
+.btn-3[disabled]:active,
+fieldset[disabled] .btn-3:active,
+.btn-3.disabled.active,
+.btn-3[disabled].active,
+fieldset[disabled] .btn-3.active {
+    background-color: #E7B416;
+    border-color: #4285F4;
+}
+.btn-3 .badge {
+    color: #E7B416;
+    background-color: #ffffff;
+}
+
+.btn-4 {
+    color: #ffffff;
+    background-color: #99C140;
+    border-color: #000000;
+}
+.btn-4:hover,
+.btn-4:focus,
+.btn-4:active,
+.btn-4.active,
+.open .dropdown-toggle.btn-4 {
+    color: #ffffff;
+    background-color: #4285F4;
+    border-color: #000000;
+}
+.btn-4:active,
+.btn-4.active,
+.open .dropdown-toggle.btn-4 {
+    background-image: none;
+}
+.btn-4.disabled,
+.btn-4[disabled],
+fieldset[disabled] .btn-4,
+.btn-4.disabled:hover,
+.btn-4[disabled]:hover,
+fieldset[disabled] .btn-4:hover,
+.btn-4.disabled:focus,
+.btn-4[disabled]:focus,
+fieldset[disabled] .btn-4:focus,
+.btn-4.disabled:active,
+.btn-4[disabled]:active,
+fieldset[disabled] .btn-4:active,
+.btn-4.disabled.active,
+.btn-4[disabled].active,
+fieldset[disabled] .btn-4.active {
+    background-color: #99C140;
+    border-color: #4285F4;
+}
+.btn-4 .badge {
+    color: #99C140;
+    background-color: #ffffff;
+}
+
+.btn-5 {
+    color: #ffffff;
+    background-color: #2DC937;
+    border-color: #000000;
+}
+.btn-5:hover,
+.btn-5:focus,
+.btn-5:active,
+.btn-5.active,
+.open .dropdown-toggle.btn-5 {
+    color: #ffffff;
+    background-color: #4285F4;
+    border-color: #000000;
+}
+.btn-5:active,
+.btn-5.active,
+.open .dropdown-toggle.btn-5 {
+    background-image: none;
+}
+.btn-5.disabled,
+.btn-5[disabled],
+fieldset[disabled] .btn-5,
+.btn-5.disabled:hover,
+.btn-5[disabled]:hover,
+fieldset[disabled] .btn-5:hover,
+.btn-5.disabled:focus,
+.btn-5[disabled]:focus,
+fieldset[disabled] .btn-5:focus,
+.btn-5.disabled:active,
+.btn-5[disabled]:active,
+fieldset[disabled] .btn-5:active,
+.btn-5.disabled.active,
+.btn-5[disabled].active,
+fieldset[disabled] .btn-5.active {
+    background-color: #2DC937;
+    border-color: #4285F4;
+}
+.btn-5 .badge {
+    color: #2DC937;
+    background-color: #ffffff;
+}
 </style>