diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 91ffd4770..016479f74 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -35,7 +35,7 @@
           <b-spinner v-if="loading" type="border" small></b-spinner>
           {{ $t("Shopping_list") }}
         </template>
-        <div class="container p-0 pr-lg-5 pl-lg-5" id="shoppinglist">
+        <div class="container p-0" id="shoppinglist">
           <div class="row">
             <div class="col col-md-12 p-0 p-lg-3">
               <div role="tablist">
@@ -124,12 +124,12 @@
                       <div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel"
                            :class="{ show: x == 'false' }">
                         <!-- passing an array of values to the table grouped by Food -->
-                        <transition-group name="slider-fade" mode="out-in">
+                        <transition-group name="slide-fade">
                           <div v-for="(entries, x) in Object.entries(s)" :key="x">
-
-                            <ShoppingLineItem :entries="entries[1]" :groupby="group_by"
-                                              @open-context-menu="openContextMenu" @update-checkbox="updateChecked"/>
-
+                            <transition name="slide-fade" mode="out-in">
+                              <ShoppingLineItem :entries="entries[1]" :groupby="group_by"
+                                                @open-context-menu="openContextMenu" @update-checkbox="updateChecked"/>
+                            </transition>
                           </div>
                         </transition-group>
                       </div>
@@ -143,28 +143,30 @@
       </b-tab>
       <!-- recipe tab -->
       <b-tab :title="$t('Recipes')">
-        <table class="table w-100">
-          <thead>
-          <tr>
-            <th scope="col">{{ $t("Meal_Plan") }}</th>
-            <th scope="col">{{ $t("Recipe") }}</th>
-            <th scope="col">{{ $t("Servings") }}</th>
-            <th scope="col"></th>
-          </tr>
-          </thead>
-          <tr v-for="r in Recipes" :key="r.list_recipe">
-            <td>{{ r.recipe_mealplan.name }}</td>
-            <td>{{ r.recipe_mealplan.recipe_name }}</td>
-            <td class="block-inline">
-              <b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings"
-                            @input="updateServings($event, r.list_recipe)"></b-form-input>
-            </td>
-            <td>
-              <i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')"
-                 @click="deleteRecipe($event, r.list_recipe)"/>
-            </td>
-          </tr>
-        </table>
+        <div class="container p-0">
+          <table class="table w-100">
+            <thead>
+            <tr>
+              <th scope="col">{{ $t("Meal_Plan") }}</th>
+              <th scope="col">{{ $t("Recipe") }}</th>
+              <th scope="col">{{ $t("Servings") }}</th>
+              <th scope="col"></th>
+            </tr>
+            </thead>
+            <tr v-for="r in Recipes" :key="r.list_recipe">
+              <td>{{ r.recipe_mealplan.name }}</td>
+              <td>{{ r.recipe_mealplan.recipe_name }}</td>
+              <td class="block-inline">
+                <b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings"
+                              @input="updateServings($event, r.list_recipe)"></b-form-input>
+              </td>
+              <td>
+                <i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')"
+                   @click="deleteRecipe($event, r.list_recipe)"/>
+              </td>
+            </tr>
+          </table>
+        </div>
       </b-tab>
       <!-- supermarkets tab -->
       <b-tab :title="$t('Supermarkets')">
@@ -173,8 +175,7 @@
           <div class="col col-md-5">
             <b-card>
               <template #header>
-                <h4 class="mb-0">
-                  {{ $t("Supermarkets") }}
+                <h4 class="mb-0">{{ $t("Supermarkets") }}
                   <b-button
                       variant="link"
                       class="p-0 m-0 float-right"
@@ -193,7 +194,6 @@
                   </b-button>
                 </h4>
               </template>
-
               <b-card
                   class="m-1 p-1 no-body"
                   border-variant="success"
@@ -201,14 +201,16 @@
                   header-text-variant="white"
                   align="center"
                   v-if="new_supermarket.entrymode"
-                  :header="$t('SupermarketName')"
-              >
-                <div class="input-group">
-                  <b-form-input type="text" :placeholder="$t('SupermarketName')" v-model="new_supermarket.value"/>
-                  <b-button class="input-group-append" variant="success" @click="addSupermarket"><i
-                      class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}
-                  </b-button>
-                </div>
+                  :header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')">
+                <b-input-group>
+                  <b-form-input type="text" class="form-control-append" :placeholder="$t('SupermarketName')"
+                                v-model="new_supermarket.value"/>
+                  <b-input-group-append>
+                    <b-button class="input-group-append" variant="success" @click="addSupermarket"><i
+                        class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}
+                    </b-button>
+                  </b-input-group-append>
+                </b-input-group>
               </b-card>
 
               <b-card-body class="m-0 p-0">
@@ -236,29 +238,22 @@
               </b-card-body>
             </b-card>
           </div>
-          <!-- supermarket category column -->
           <div class="col col-md-5">
-            <b-card class="no-body">
+            <b-card>
               <template #header>
-                <div class="row">
-                  <div class="col">
-                    {{ $t("Shopping_Categories") }}
-                  </div>
-
-                  <div class="col-auto text-right ml-auto">
-                    <b-button
-                        variant="link"
-                        class="p-0 m-0"
-                        @click="
+                <h4 class="mb-0">{{ $t("Shopping_Categories") }}
+                  <b-button
+                      variant="link"
+                      class="p-0 m-0 float-right"
+                      @click="
                                                 new_category.entrymode = !new_category.entrymode
                                                 new_supermarket.entrymode = false
                                             "
-                    >
-                      <i class="btn fas fa-plus-circle fa-lg px-0"
-                         :class="new_category.entrymode ? 'text-success' : 'text-muted'"/>
-                    </b-button>
-                  </div>
-                </div>
+                  >
+                    <i class="btn fas fa-plus-circle fa-lg px-0"
+                       :class="new_category.entrymode ? 'text-success' : 'text-muted'"/>
+                  </b-button>
+                </h4>
               </template>
               <b-card
                   class="m-1 p-1 no-body"
@@ -267,14 +262,17 @@
                   header-text-variant="white"
                   align="center"
                   v-if="new_category.entrymode"
-                  :header="$t('CategoryName')"
+                  :header="new_category.value ? new_category.value : $t('CategoryName')"
               >
-                <div class="input-group">
-                  <b-form-input type="text" :placeholder="$t('CategoryName')" v-model="new_category.value"/>
-                  <b-button class="input-group-append" variant="success" @click="addCategory"><i
-                      class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}
-                  </b-button>
-                </div>
+                <b-input-group>
+                  <b-form-input type="text" class="form-control-append" :placeholder="$t('CategoryName')"
+                                v-model="new_category.value"/>
+                  <b-input-group-append>
+                    <b-button class="input-group-append" variant="success" @click="addCategory"><i
+                        class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}
+                    </b-button>
+                  </b-input-group-append>
+                </b-input-group>
               </b-card>
 
               <b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{
@@ -791,7 +789,7 @@ export default {
   watch: {
     selected_supermarket(newVal, oldVal) {
       this.supermarket_categories_only = this.settings.filter_to_supermarket
-        localStorage.setItem('shopping_v2_selected_supermarket', JSON.stringify(this.selected_supermarket))
+      localStorage.setItem('shopping_v2_selected_supermarket', JSON.stringify(this.selected_supermarket))
     },
     "settings.filter_to_supermarket": function (newVal, oldVal) {
       this.supermarket_categories_only = this.settings.filter_to_supermarket
@@ -1322,28 +1320,18 @@ export default {
   background: #c8ebfb;
 }
 
-.slider-fade-enter-active, .slider-fade-leave-active {
-    transition: all 0.3s ease;
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: all 0.2s ease;
 }
 
-.slider-fade-enter, .slider-fade-leave-to
+.slide-fade-enter, .slide-fade-leave-to
   /* .slider-fade-leave-active below version 2.1.8 */
 {
   transform: translateX(10px);
   opacity: 0;
 }
 
-.slided-fade-enter-active {
-    transition: all 0.3s ease;
-}
-
-.slided-fade-leave-active {
-    transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slided-fade-enter,
-.slided-fade-leave-to {
-    transform: translateY(10px);
-    opacity: 0;
+.form-control-append {
+  font-size: 20px;
 }
 </style>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index a72f20f09..f202fc06b 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -21,7 +21,7 @@
                  :key="entries[0].id"/>
         </b-col>
         <b-col cols="8" md="9">
-          <b-row class="d-flex h-100" @click.stop="$emit('open-context-menu', $event, entries)">
+          <b-row class="d-flex h-100">
             <b-col cols="6" md="6" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
               <div><strong>{{ Object.entries(formatAmount)[0][1] }}</strong> &ensp;
                 {{ Object.entries(formatAmount)[0][0] }}
@@ -85,10 +85,6 @@
               <div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
             </b-col>
           </b-row>
-
-
-
-
           <b-row align-h="start">
             <b-col cols="1" class="align-items-center d-flex">
               <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">