diff --git a/frontend/src/components/ScoreSelector.vue b/frontend/src/components/ScoreSelector.vue
new file mode 100644
index 0000000..a61a9f6
--- /dev/null
+++ b/frontend/src/components/ScoreSelector.vue
@@ -0,0 +1,240 @@
+<template>
+  <b-form-radio-group
+    buttons
+    button-variant="outline-info"
+    size="lg"
+    v-model="propModel"
+    required
+  >
+    <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>
+</template>
+
+<script>
+export default {
+    props: ["scoreValue"],
+    computed: {
+        propModel: {
+            get () { return this.scoreValue },
+            set (value) { this.$emit('newselection', value) },
+        }
+    }
+}
+</script>
+
+
+<style>
+.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>
diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 76ae2da..1a83c97 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -71,13 +71,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Monitoring</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.monitoring.rating" @change="item.monitoring.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.monitoring.rating" v-on:newselection="item.monitoring.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.monitoring.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -89,13 +83,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Control Procedural</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.controlProcedural.rating" @change="item.controlProcedural.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.controlProcedural.rating" v-on:newselection="item.controlProcedural.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.controlProcedural.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -109,13 +97,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Control</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.control.rating" @change="item.control.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.control.rating" v-on:newselection="item.control.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.control.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -127,13 +109,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Conservatism</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.conservatism.rating" @change="item.conservatism.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.conservatism.rating" v-on:newselection="item.conservatism.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.conservatism.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -147,13 +123,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Teamwork Communications</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.teamworkCommunications.rating" @change="item.teamworkCommunications.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.teamworkCommunications.rating" v-on:newselection="item.teamworkCommunications.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.teamworkCommunications.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -165,13 +135,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Teamwork Leadership</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.teamworkLeadership.rating" @change="item.teamworkLeadership.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.teamworkLeadership.rating" v-on:newselection="item.teamworkLeadership.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.teamworkLeadership.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -185,13 +149,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Teamwork Workload</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.teamworkWorkload.rating" @change="item.teamworkWorkload.rating = $event; updateTotals();" required>
-                                        <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>
+                                    <score-selector :score-value="item.teamworkWorkload.rating" v-on:newselection="item.teamworkWorkload.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.teamworkWorkload.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -203,13 +161,7 @@
                             <b-row>
                                 <b-col cols="4">
                                     <h5>Knowledge</h5>
-                                    <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="item.knowledge.rating" @change="item.knowledge.rating = $event; updateTotals();"  required>
-                                        <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>
+                                    <score-selector :score-value="item.knowledge.rating" v-on:newselection="item.knowledge.rating = $event; updateTotals();"></score-selector>
                                 </b-col>
                                 <b-col cols="8">
                                     <b-form-textarea v-model="item.knowledge.strengths" placeholder="Strengths" :rows="1" :max-rows="2" no-resize class="strength"></b-form-textarea>
@@ -265,10 +217,12 @@ import "vue-awesome/icons/times-circle";
 import "vue-awesome/icons/exclamation-circle";
 import { mapState } from "vuex";
 import Vue from "vue";
+import ScoreSelector from "../components/ScoreSelector.vue"
 
 export default {
   name: "observation",
   title: "Observation",
+  components: { ScoreSelector },
   data: function() {
     return {
       scenarios: [
@@ -562,214 +516,4 @@ img {
 h5 {
     padding-top: 2px;
 }
-
-.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>