diff --git a/app/javascript/components/App.vue b/app/javascript/components/App.vue
index 5fbebd1..6a5c8e0 100644
--- a/app/javascript/components/App.vue
+++ b/app/javascript/components/App.vue
@@ -17,7 +17,6 @@
 <script>
 
   import { mapMutations, mapState } from "vuex";
-  import AppNavbar from "./AppNavbar";
   import api from "../lib/Api";
 
   export default {
@@ -78,7 +77,6 @@
     },
 
     components: {
-      AppNavbar
     }
   }
 
diff --git a/app/javascript/components/AppModal.vue b/app/javascript/components/AppModal.vue
index 1ccd644..426f742 100644
--- a/app/javascript/components/AppModal.vue
+++ b/app/javascript/components/AppModal.vue
@@ -20,7 +20,6 @@
 
 <script>
 
-  import AppIcon from "./AppIcon";
   import { mapState } from "vuex";
 
   export default {
@@ -53,7 +52,6 @@
     },
 
     components: {
-      AppIcon
     }
   }
 
diff --git a/app/javascript/components/AppRating.vue b/app/javascript/components/AppRating.vue
index 2461991..d05eec4 100644
--- a/app/javascript/components/AppRating.vue
+++ b/app/javascript/components/AppRating.vue
@@ -1,17 +1,16 @@
 <template>
   <span ref="wrapper" class="rating" @click="handleClick" @mousemove="handleMousemove" @mouseleave="handleMouseleave">
     <span class="set empty-set">
-      <app-icon v-for="i in starCount" icon="star"></app-icon>
+      <app-icon v-for="i in starCount" :key="i" icon="star"></app-icon>
     </span>
     <span class="set filled-set" :style="filledStyle">
-      <app-icon v-for="i in starCount" icon="star"></app-icon>
+      <app-icon v-for="i in starCount" :key="i" icon="star"></app-icon>
     </span>
   </span>
 </template>
 
 <script>
 
-  import AppIcon from "./AppIcon";
 
   export default {
     props: {
@@ -67,7 +66,6 @@
     },
 
     components: {
-      AppIcon
     }
   }
 
diff --git a/app/javascript/components/IngredientEdit.vue b/app/javascript/components/IngredientEdit.vue
index 0637a23..4fd70ba 100644
--- a/app/javascript/components/IngredientEdit.vue
+++ b/app/javascript/components/IngredientEdit.vue
@@ -136,8 +136,6 @@
 <script>
 
   import api from "../lib/Api";
-  import AppAutocomplete from "./AppAutocomplete";
-  import AppIcon from "./AppIcon";
 
   export default {
     props: {
@@ -244,8 +242,6 @@
     },
 
     components: {
-      AppAutocomplete,
-      AppIcon
     }
   }
 
diff --git a/app/javascript/components/RecipeEdit.vue b/app/javascript/components/RecipeEdit.vue
index 53d8396..658c104 100644
--- a/app/javascript/components/RecipeEdit.vue
+++ b/app/javascript/components/RecipeEdit.vue
@@ -91,7 +91,6 @@
   import api from "../lib/Api";
 
   import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";
-  import AppTagEditor from "./AppTagEditor";
 
   export default {
     props: {
@@ -142,7 +141,6 @@
     },
 
     components: {
-      AppTagEditor,
       RecipeEditIngredientEditor
     }
   }
diff --git a/app/javascript/components/RecipeEditIngredientEditor.vue b/app/javascript/components/RecipeEditIngredientEditor.vue
index ef93351..196236f 100644
--- a/app/javascript/components/RecipeEditIngredientEditor.vue
+++ b/app/javascript/components/RecipeEditIngredientEditor.vue
@@ -35,7 +35,6 @@
 
 <script>
 
-  import AppModal from "./AppModal";
   import RecipeEditIngredientItem from "./RecipeEditIngredientItem";
 
   import { mapState } from "vuex";
@@ -194,7 +193,6 @@
     },
 
     components: {
-      AppModal,
       RecipeEditIngredientItem
     }
   }
diff --git a/app/javascript/components/RecipeEditIngredientItem.vue b/app/javascript/components/RecipeEditIngredientItem.vue
index 7495616..b1647e1 100644
--- a/app/javascript/components/RecipeEditIngredientItem.vue
+++ b/app/javascript/components/RecipeEditIngredientItem.vue
@@ -46,8 +46,6 @@
 
 <script>
 
-  import AppAutocomplete from "./AppAutocomplete";
-  import AppIcon from "./AppIcon";
   import api from "../lib/Api";
 
   export default {
@@ -95,8 +93,6 @@
     },
 
     components: {
-      AppAutocomplete,
-      AppIcon
     }
   }
 
diff --git a/app/javascript/components/TheCalculator.vue b/app/javascript/components/TheCalculator.vue
index 3c25c74..69991fb 100644
--- a/app/javascript/components/TheCalculator.vue
+++ b/app/javascript/components/TheCalculator.vue
@@ -63,8 +63,6 @@
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
 
-  import AppAutocomplete from "./AppAutocomplete";
-
   export default {
     data() {
       return {
@@ -119,7 +117,6 @@
     },
 
     components: {
-      AppAutocomplete
     }
   }
 
diff --git a/app/javascript/components/TheIngredientList.vue b/app/javascript/components/TheIngredientList.vue
index d3bffb1..7cad5cb 100644
--- a/app/javascript/components/TheIngredientList.vue
+++ b/app/javascript/components/TheIngredientList.vue
@@ -53,8 +53,6 @@
 
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
-  import AppIcon from "./AppIcon";
-  import AppPager from "./AppPager";
 
   export default {
     data() {
@@ -116,8 +114,6 @@
     },
 
     components: {
-      AppIcon,
-      AppPager
     }
   }
 
diff --git a/app/javascript/components/TheRecipeList.vue b/app/javascript/components/TheRecipeList.vue
index d1b3947..256d542 100644
--- a/app/javascript/components/TheRecipeList.vue
+++ b/app/javascript/components/TheRecipeList.vue
@@ -72,10 +72,6 @@
 
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
-  import AppDateTime from "./AppDateTime";
-  import AppIcon from "./AppIcon";
-  import AppPager from "./AppPager";
-  import AppRating from "./AppRating";
 
   export default {
     data() {
@@ -178,10 +174,6 @@
     },
 
     components: {
-      AppRating,
-      AppIcon,
-      AppDateTime,
-      AppPager
     }
   }
 
diff --git a/app/javascript/components/UserLogin.vue b/app/javascript/components/UserLogin.vue
index 4d1a951..e1add90 100644
--- a/app/javascript/components/UserLogin.vue
+++ b/app/javascript/components/UserLogin.vue
@@ -47,8 +47,6 @@
 
 <script>
 
-  import AppModal from "./AppModal";
-  import AppIcon from "./AppIcon";
   import api from "../lib/Api";
   import { mapMutations } from "vuex";
 
@@ -88,8 +86,6 @@
     },
 
     components: {
-      AppIcon,
-      AppModal
     }
   }
 
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 21530c5..b82363b 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -9,6 +9,25 @@ import router from '../router';
 import '../lib/GlobalMixins';
 import App from '../components/App';
 
+import AppAutocomplete from "../components/AppAutocomplete";
+import AppDateTime from "../components/AppDateTime";
+import AppIcon from "../components/AppIcon";
+import AppModal from "../components/AppModal";
+import AppNavbar from "../components/AppNavbar";
+import AppPager from "../components/AppPager";
+import AppRating from "../components/AppRating";
+import AppTagEditor from "../components/AppTagEditor";
+
+Vue.component("AppAutocomplete", AppAutocomplete);
+Vue.component("AppDateTime", AppDateTime);
+Vue.component("AppIcon", AppIcon);
+Vue.component("AppModal", AppModal);
+Vue.component("AppNavbar", AppNavbar);
+Vue.component("AppPager", AppPager);
+Vue.component("AppRating", AppRating);
+Vue.component("AppTagEditor", AppTagEditor);
+
+
 Vue.use(VueProgressBar, {
 //  color: '#bffaf3',
 //  failedColor: '#874b4b',
diff --git a/app/javascript/styles/_variables.scss b/app/javascript/styles/_variables.scss
index 3164690..c2c8076 100644
--- a/app/javascript/styles/_variables.scss
+++ b/app/javascript/styles/_variables.scss
@@ -1,7 +1,7 @@
 
 // Bluma default overrides
 $green: #79A736;
-$red: #FF0000;
+$red: #d4424e;
 $primary: $green;
 
 $modal-content-width: 750px;