diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 8c30c17..80edb80 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -17,7 +17,6 @@
 <script>
 import data from '@/data';
 
-
 export default {
     name: 'LoginVue',
     props: {
diff --git a/src/components/CompactParsedIngredient.vue b/src/components/ingredients/CompactParsedIngredient.vue
similarity index 100%
rename from src/components/CompactParsedIngredient.vue
rename to src/components/ingredients/CompactParsedIngredient.vue
diff --git a/src/components/IngredientLine.vue b/src/components/ingredients/IngredientLine.vue
similarity index 100%
rename from src/components/IngredientLine.vue
rename to src/components/ingredients/IngredientLine.vue
diff --git a/src/components/DatePicker.vue b/src/components/meals/DatePicker.vue
similarity index 100%
rename from src/components/DatePicker.vue
rename to src/components/meals/DatePicker.vue
diff --git a/src/components/EditMealPage.vue b/src/components/meals/EditMealPage.vue
similarity index 94%
rename from src/components/EditMealPage.vue
rename to src/components/meals/EditMealPage.vue
index acf25fc..f5c53b1 100644
--- a/src/components/EditMealPage.vue
+++ b/src/components/meals/EditMealPage.vue
@@ -41,11 +41,11 @@
 
 <script>
 import data from '@/data.js'
-import RecipeSearchBox from './RecipeSearchBox.vue';
-import RecipeCard from './RecipeCard.vue';
+import RecipeSearchBox from '@/components/recipes/RecipeSearchBox.vue';
+import RecipeCard from '@/components/recipes/RecipeCard.vue';
 import DatePicker from './DatePicker.vue';
 import IngredientAddBox from './IngredientAddBox.vue';
-import CompactParsedIngredient from './CompactParsedIngredient.vue';
+import CompactParsedIngredient from '@/components/ingredients/CompactParsedIngredient.vue';
 
 export default {
     props: ['id'],
diff --git a/src/components/IngredientAddBox.vue b/src/components/meals/IngredientAddBox.vue
similarity index 93%
rename from src/components/IngredientAddBox.vue
rename to src/components/meals/IngredientAddBox.vue
index a4d5bdc..c931f2d 100644
--- a/src/components/IngredientAddBox.vue
+++ b/src/components/meals/IngredientAddBox.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import IngredientLine from './IngredientLine.vue';
+import IngredientLine from '@/components/ingredients/IngredientLine.vue';
 import data from '@/data.js'
 
 export default {
diff --git a/src/components/MealCard.vue b/src/components/meals/MealCard.vue
similarity index 100%
rename from src/components/MealCard.vue
rename to src/components/meals/MealCard.vue
diff --git a/src/components/MealPlanPage.vue b/src/components/meals/MealPlanPage.vue
similarity index 95%
rename from src/components/MealPlanPage.vue
rename to src/components/meals/MealPlanPage.vue
index 3e34d43..e728069 100644
--- a/src/components/MealPlanPage.vue
+++ b/src/components/meals/MealPlanPage.vue
@@ -77,8 +77,8 @@ ul.actions {
 </style>
 
 <script>
-import ActionItem from './ActionItem.vue'
-import MealCard from './MealCard.vue'
+import ActionItem from '@/components/ActionItem.vue'
+import MealCard from '@/components/meals/MealCard.vue'
 import data from '@/data.js'
 
 export default {
diff --git a/src/components/EditRecipePage.vue b/src/components/recipes/EditRecipePage.vue
similarity index 98%
rename from src/components/EditRecipePage.vue
rename to src/components/recipes/EditRecipePage.vue
index 55d9fa2..aa4475b 100644
--- a/src/components/EditRecipePage.vue
+++ b/src/components/recipes/EditRecipePage.vue
@@ -91,7 +91,7 @@ li {
 <script>
 
 import data from '@/data.js'
-import IngredientLine from './IngredientLine.vue'
+import IngredientLine from '@/components/ingredients/IngredientLine.vue'
 
 export default {
     props: {
diff --git a/src/components/RecipeCard.vue b/src/components/recipes/RecipeCard.vue
similarity index 100%
rename from src/components/RecipeCard.vue
rename to src/components/recipes/RecipeCard.vue
diff --git a/src/components/RecipeSearchBox.vue b/src/components/recipes/RecipeSearchBox.vue
similarity index 100%
rename from src/components/RecipeSearchBox.vue
rename to src/components/recipes/RecipeSearchBox.vue
diff --git a/src/components/RecipesPage.vue b/src/components/recipes/RecipesPage.vue
similarity index 90%
rename from src/components/RecipesPage.vue
rename to src/components/recipes/RecipesPage.vue
index 1c03f25..c1be309 100644
--- a/src/components/RecipesPage.vue
+++ b/src/components/recipes/RecipesPage.vue
@@ -5,7 +5,7 @@
     </div>
 </template>
 <script>
-import ActionItem from './ActionItem.vue'
+import ActionItem from '@/components/ActionItem.vue'
 import RecipeSearchBox from './RecipeSearchBox.vue';
 
 export default {
diff --git a/src/main.js b/src/main.js
index 1d5646a..b4ab12f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,11 +4,11 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 
 import LoginPage from './components/LoginPage.vue'
-import RecipesPage from './components/RecipesPage.vue'
-import MealPlanPage from './components/MealPlanPage.vue'
+import RecipesPage from './components/recipes/RecipesPage.vue'
+import MealPlanPage from './components/meals/MealPlanPage.vue'
 import ShoppingPage from './components/ShoppingPage.vue'
-import EditMealPage from './components/EditMealPage.vue'
-import EditRecipePage from './components/EditRecipePage.vue'
+import EditMealPage from './components/meals/EditMealPage.vue'
+import EditRecipePage from './components/recipes/EditRecipePage.vue'
 
 // 2. Define some routes
 // Each route should map to a component.