diff --git a/vue/src/apps/CookbookView/CookbookView.vue b/vue/src/apps/CookbookView/CookbookView.vue
index bc922d7e6..78e59eae7 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app" class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
+    <div id="app" class="books col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
         <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
             <div class="row">
                 <div class="col col-md-12">
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 58793c706..7e18a5a6e 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="app" class="mealplan">
         <div class="d-none d-lg-block">
             <div class="row ">
                 <div class="col col-2">
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 2705b5e3d..5b098a1f4 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app" style="padding-bottom: 60px">
+    <div id="app" class="search" style="padding-bottom: 60px">
         <RecipeSwitcher ref="ref_recipe_switcher" />
         <div class="row">
             <div class="col-12 col-xl-10 col-lg-10 offset-xl-1 offset-lg-1">
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 119c902e5..e2ddac0d1 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app" v-if="recipe_id !== undefined">
+    <div id="app" class="recipe" v-if="recipe_id !== undefined">
         <recipe-view-component :recipe_id="recipe_id"></recipe-view-component>
 
         <bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 668672272..0c19c317a 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app">
+    <div id="app" class="shopping">
         <b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
 
         <div class="row float-top w-100">
diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index 18876f061..3b56f02b3 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -1,20 +1,20 @@
 <template>
-    <tr>
+    <tr class="ingredient">
         <template v-if="ingredient.is_header">
-            <td colspan="5" @click="done">
+            <td class="header" colspan="5" @click="done">
                 <b>{{ ingredient.note }}</b>
             </td>
         </template>
 
         <template v-else>
-            <td class="d-print-none align-baseline py-2" v-if="detailed" @click="done">
+            <td class="check d-print-none align-baseline py-2" v-if="detailed" @click="done">
                 <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
                 <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
             </td>
-            <td class="text-nowrap" @click="done">
+            <td class="amount text-nowrap" @click="done">
                 <span v-if="ingredient.amount !== 0 && !ingredient.no_amount" v-html="calculateAmount(ingredient.amount)"></span>
             </td>
-            <td @click="done">
+            <td class="unit" @click="done">
                 <template v-if="ingredient.unit !== null && !ingredient.no_amount">
                     <template>
                         <template v-if="ingredient.unit.plural_name === '' || ingredient.unit.plural_name === null">
@@ -28,7 +28,7 @@
                     </template>
                 </template>
             </td>
-            <td @click="done">
+            <td class="food" @click="done">
                 <template v-if="ingredient.food !== null">
                     <a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer">
                         {{ ingredientName(ingredient) }}
@@ -40,7 +40,7 @@
                     </template>
                 </template>
             </td>
-            <td v-if="detailed" class="align-baseline">
+            <td v-if="detailed" class="note align-baseline">
                 <template v-if="ingredient.note">
                     <span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
                         <i class="far fa-comment"></i>
diff --git a/vue/src/components/IngredientsCard.vue b/vue/src/components/IngredientsCard.vue
index 0b2cb69fd..56293a38e 100644
--- a/vue/src/components/IngredientsCard.vue
+++ b/vue/src/components/IngredientsCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'card border-primary no-border': header }">
+    <div :class="{ 'ingredients card border-primary no-border': header }">
         <div :class="{ 'card-body': header, 'p-0': header }">
             <div class="card-header" v-if="header">
                 <div class="row">
diff --git a/vue/src/components/KeywordsComponent.vue b/vue/src/components/KeywordsComponent.vue
index ddaf2336e..d3e6a7c50 100644
--- a/vue/src/components/KeywordsComponent.vue
+++ b/vue/src/components/KeywordsComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="recipe.keywords.length > 0">
-      <span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
+      <span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="keyword pl-1">
           <template v-if="enable_keyword_links">
               <a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`">
                   <b-badge pill variant="light" class="font-weight-normal">{{ k.label }}</b-badge>
diff --git a/vue/src/components/RecipeViewComponent.vue b/vue/src/components/RecipeViewComponent.vue
index 07a051ad3..ef565c905 100644
--- a/vue/src/components/RecipeViewComponent.vue
+++ b/vue/src/components/RecipeViewComponent.vue
@@ -1,38 +1,38 @@
 <template>
 
-    <div>
+    <div> 
         <template v-if="loading">
             <loading-spinner></loading-spinner>
         </template>
 
         <div v-if="!loading" style="padding-bottom: 60px">
             <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" v-if="show_recipe_switcher"/>
-            <div class="row">
+            <div class="title row">
                 <div class="col-12" style="text-align: center">
                     <h3>{{ recipe.name }}</h3>
                 </div>
             </div>
 
-            <div class="row text-center">
+            <div class="rating row text-center">
                 <div class="col col-md-12">
                     <recipe-rating :recipe="recipe"></recipe-rating>
                     <last-cooked :recipe="recipe" class="mt-2"></last-cooked>
                 </div>
             </div>
 
-            <div class="my-auto">
+            <div class="description my-auto">
                 <div class="col-12" style="text-align: center">
                     <i>{{ recipe.description }}</i>
                 </div>
             </div>
 
-            <div style="text-align: center">
+            <div class="keywords" style="text-align: center">
                 <keywords-component :recipe="recipe" :enable_keyword_links="enable_keyword_links"></keywords-component>
             </div>
 
             <hr/>
-            <div class="row align-items-center">
-                <div class="col col-md-3">
+            <div class="prep-data row align-items-center">
+                <div class="prep-time col col-md-3">
                     <div class="d-flex">
                         <div class="my-auto mr-1">
                             <i class="fas fa-fw fa-user-clock fa-2x text-primary"></i>
@@ -44,7 +44,7 @@
                     </div>
                 </div>
 
-                <div class="col col-md-3">
+                <div class="wait-time col col-md-3">
                     <div class="row d-flex">
                         <div class="my-auto mr-1">
                             <i class="far fa-fw fa-clock fa-2x text-primary"></i>
@@ -56,7 +56,7 @@
                     </div>
                 </div>
 
-                <div class="col col-md-4 col-10 mt-2 mt-md-0">
+                <div class="servings col col-md-4 col-10 mt-2 mt-md-0">
                     <div class="d-flex">
                         <div class="my-auto mr-1">
                             <i class="fas fa-fw fa-pizza-slice fa-2x text-primary"></i>
@@ -75,14 +75,14 @@
                     </div>
                 </div>
 
-                <div class="col col-md-2 col-2 mt-2 mt-md-0 text-right">
+                <div class="context-menu col col-md-2 col-2 mt-2 mt-md-0 text-right">
                     <recipe-context-menu v-bind:recipe="recipe" :servings="servings"
                                          :disabled_options="{print:false}" v-if="show_context_menu"></recipe-context-menu>
                 </div>
             </div>
             <hr/>
 
-            <div class="row">
+            <div class="overview row">
                 <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2"
                      v-if="recipe && ingredient_count > 0 && (recipe.show_ingredient_overview || recipe.steps.length < 2)">
                     <ingredients-card
@@ -118,7 +118,7 @@
                 </div>
             </template>
 
-            <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
+            <div class="steps" v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
                 <step-component
                     :recipe="recipe"
                     :step="s"
@@ -130,13 +130,13 @@
                 ></step-component>
             </div>
 
-            <div v-if="recipe.source_url !== null">
+            <div class="source" v-if="recipe.source_url !== null">
                 <h6 class="d-print-none"><i class="fas fa-file-import"></i> {{ $t("Imported_From") }}</h6>
                 <span class="text-muted mt-1"><a style="overflow-wrap: break-word;"
                                                  :href="recipe.source_url">{{ recipe.source_url }}</a></span>
             </div>
 
-            <div class="row" style="margin-top: 2vh; ">
+            <div class="properties row" style="margin-top: 2vh; ">
                 <div class="col-lg-6 offset-lg-3 col-12">
                     <property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></property-view-component>
                 </div>
diff --git a/vue/src/components/StepComponent.vue b/vue/src/components/StepComponent.vue
index eda1f58c6..9a7567442 100644
--- a/vue/src/components/StepComponent.vue
+++ b/vue/src/components/StepComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="step">
         <hr/>
         <!-- Step header (only shown if more than one step -->
         <div class="row mb-1" v-if="recipe.steps.length > 1">
@@ -32,7 +32,7 @@
 
             <div class="row">
                 <!-- ingredients table -->
-                <div class="col col-md-4"
+                <div class="ingredients col col-md-4"
                      v-if="step.show_ingredients_table && step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
                     <table class="table table-sm">
                         <ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor"
@@ -40,7 +40,7 @@
                     </table>
                 </div>
 
-                <div class="col"
+                <div class="method col"
                      :class="{ 'col-md-8 col-12': recipe.steps.length > 1, 'col-md-12 col-12': recipe.steps.length <= 1 }">
                     <!-- step text -->
                     <div class="row">
@@ -71,7 +71,7 @@
             </div>
 
             <!-- Sub recipe (always full width own row) -->
-            <div class="row">
+            <div class="subrecipe row">
                 <div class="col col-md-12">
                     <div class="card" v-if="step.step_recipe_data !== null">
                         <b-collapse id="collapse-1" v-model="details_visible">