diff --git a/cookbook/migrations/0167_userpreference_left_handed.py b/cookbook/migrations/0167_userpreference_left_handed.py
new file mode 100644
index 000000000..23fb0f4af
--- /dev/null
+++ b/cookbook/migrations/0167_userpreference_left_handed.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.2.11 on 2022-01-20 22:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0166_alter_userpreference_shopping_add_onhand'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userpreference',
+            name='left_handed',
+            field=models.BooleanField(default=False),
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index 8263dd44d..fef3ab838 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -339,6 +339,7 @@ class UserPreference(models.Model, PermissionModelMixin):
     mealplan_autoinclude_related = models.BooleanField(default=True)
     shopping_add_onhand = models.BooleanField(default=False)
     filter_to_supermarket = models.BooleanField(default=False)
+    left_handed = models.BooleanField(default=False)
     default_delay = models.DecimalField(default=4, max_digits=8, decimal_places=4)
     shopping_recent_days = models.PositiveIntegerField(default=7)
     csv_delim = models.CharField(max_length=2, default=",")
diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index c0543efec..6fa745a29 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -183,7 +183,7 @@ class UserPreferenceSerializer(WritableNestedModelSerializer):
             'user', 'theme', 'nav_color', 'default_unit', 'default_page', 'use_kj', 'search_style', 'show_recent', 'plan_share',
             'ingredient_decimals', 'comments', 'shopping_auto_sync', 'mealplan_autoadd_shopping', 'food_inherit_default', 'default_delay',
             'mealplan_autoinclude_related', 'mealplan_autoexclude_onhand', 'shopping_share', 'shopping_recent_days', 'csv_delim', 'csv_prefix',
-            'filter_to_supermarket', 'shopping_add_onhand'
+            'filter_to_supermarket', 'shopping_add_onhand', 'left_handed'
         )
 
 
diff --git a/cookbook/static/themes/tandoor.min.css b/cookbook/static/themes/tandoor.min.css
index 9dc091af6..f329e4e87 100644
--- a/cookbook/static/themes/tandoor.min.css
+++ b/cookbook/static/themes/tandoor.min.css
@@ -10461,4 +10461,9 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
 
 .form-control-search {
     font-size: 20px;
+}
+
+.ghost {
+  opacity: 0.5 !important;
+  background: #b98766 !important;
 }
\ No newline at end of file
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 85485d4e7..d45fb0753 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -79,21 +79,20 @@
                     <div class="col-12 col-md-9 col-lg-6">
                         <h5>{{ $t("Meal_Types") }}</h5>
                         <div>
-                            <draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10"
-                                       handle=".handle" @sort="sortMealTypes()">
-                                <b-card no-body class="mt-1" v-for="(meal_type, index) in meal_types" v-hover
+                            <draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10" @sort="sortMealTypes()" ghost-class="ghost">
+                                <b-card no-body class="mt-1 list-group-item p-2" style="cursor:move" v-for="(meal_type, index) in meal_types" v-hover
                                         :key="meal_type.id">
-                                    <b-card-header class="p-4">
+                                    <b-card-header class="p-2 border-0">
                                         <div class="row">
-                                            <div class="col-2 handle">
+                                            <div class="col-2">
                                                 <button type="button" class="btn btn-lg shadow-none"><i
                                                     class="fas fa-arrows-alt-v"></i></button>
                                             </div>
                                             <div class="col-10">
-                                                <h5>
+                                                <h5 class="mt-1 mb-1">
                                                     {{ meal_type.icon }} {{
                                                         meal_type.name
-                                                    }}<span class="float-right text-primary"
+                                                    }}<span class="float-right text-primary" style="cursor:pointer"
                                                 ><i class="fa"
                                                     v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
                                                     @click="editOrSaveMealType(index)" aria-hidden="true"></i
@@ -878,4 +877,9 @@ having to override as much.
 .theme-default .cv-day.draghover {
     box-shadow: inset 0 0 0.2em 0.2em yellow;
 }
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
 </style>
diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 9113b5a16..cb98502b7 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -5,10 +5,10 @@
       <div class="col-auto no-gutter ml-auto">
         <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
           <i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode"
-             :class="entrymode ? 'text-success' : 'text-muted'"/>
+             :class="entrymode ? 'text-success' : 'text-primary'"/>
         </b-button>
         <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
-          <i class="fas fa-download fa-lg nav-link dropdown-toggle text-muted px-1" id="downloadShoppingLink"
+          <i class="fas fa-download fa-lg nav-link dropdown-toggle text-primary px-1" id="downloadShoppingLink"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
 
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink">
@@ -23,7 +23,7 @@
         </b-button>
         <b-button variant="link" id="id_filters_button" class="px-1 pt-0 pb-1">
           <i class="btn fas fa-filter text-decoration-none fa-lg px-1"
-             :class="filterApplied ? 'text-danger' : 'text-muted'"/>
+             :class="filterApplied ? 'text-danger' : 'text-primary'"/>
         </b-button>
       </div>
     </div>
@@ -93,8 +93,9 @@
                 <!-- shopping list table -->
                 <div v-if="items && items.length > 0">
                   <div v-for="(done, x) in Sections" :key="x">
-                    <div v-if="x == 'true'">
-                      <h4 class="pl-2 pl-md-0">{{ $t("Completed") }}</h4>
+                    <div v-if="x == 'true'"
+                         class="bg-header w-100 text-center d-flex justify-content-center align-items-center">
+                      <span class="h4 d-flex mt-1 mb-1">{{ $t("Completed") }}</span>
                     </div>
 
                     <div v-for="(s, i) in done" :key="i">
@@ -127,7 +128,7 @@
                         <transition-group name="slide-fade">
                           <div v-for="(entries, x) in Object.entries(s)" :key="x">
                             <transition name="slide-fade" mode="out-in">
-                              <ShoppingLineItem :entries="entries[1]" :groupby="group_by"
+                              <ShoppingLineItem :entries="entries[1]" :groupby="group_by" :settings="settings"
                                                 @open-context-menu="openContextMenu" @update-checkbox="updateChecked"/>
                             </transition>
                           </div>
@@ -173,7 +174,7 @@
         <div class="row justify-content-center">
           <!-- supermarkets column -->
           <div class="col col-md-5">
-            <b-card>
+            <b-card no-body>
               <template #header>
                 <h4 class="mb-0">{{ $t("Supermarkets") }}
                   <b-button
@@ -190,12 +191,12 @@
                                         "
                   >
                     <i class="btn fas fa-plus-circle fa-lg px-0"
-                       :class="new_supermarket.entrymode ? 'text-success' : 'text-muted'"/>
+                       :class="new_supermarket.entrymode ? 'text-success' : 'text-primary'"/>
                   </b-button>
                 </h4>
               </template>
               <b-card
-                  class="m-1 p-1 no-body"
+                  class="pt-5 pl-5 pr-5"
                   border-variant="success"
                   header-bg-variant="success"
                   header-text-variant="white"
@@ -207,30 +208,33 @@
                                 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") }}
+                        class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
                     </b-button>
                   </b-input-group-append>
                 </b-input-group>
               </b-card>
 
               <b-card-body class="m-0 p-0">
-                <b-card class="no-body mb-2" v-for="s in supermarkets" v-bind:key="s.id">
-                  <b-card-title>
+                <b-card class="mt-1 p-0" v-for="s in supermarkets" v-bind:key="s.id">
+                  <b-card-header class="p-2 border-0 pt-3">
                     <div class="row">
-                      <div class="col">{{ s.name }}</div>
-                      <div class="col-auto text-right ml-auto">
-                        <b-button variant="link"
-                                  class="p-0 m-0"
-                                  @click="s.editmode = !s.editmode;new_category.entrymode = false;new_supermarket.entrymode = false;editSupermarket(s)">
-                          <i class="btn fas fa-edit fa-lg px-0" :class="s.editmode ? 'text-success' : 'text-muted'"/>
-                        </b-button>
-                        <b-button variant="link" class="p-0 m-0" @click="deleteSupermarket(s)">
-                          <i class="btn fas fa-trash fa-lg px-2 text-muted"/>
-                        </b-button>
+                      <div class="col-12">
+                        <h5 class="mt-1 mb-1">
+                          {{ s.name }}
+                          <b-button variant="link"
+                                    class="p-0 m-0 float-right"
+                                    @click="s.editmode = !s.editmode;new_category.entrymode = false;new_supermarket.entrymode = false;editSupermarket(s)">
+                            <i class="btn fas fa-edit fa-lg px-0"
+                               :class="s.editmode ? 'text-success' : 'text-primary'"/>
+                          </b-button>
+                          <b-button variant="link" class="p-0 m-0 float-right" @click="deleteSupermarket(s)">
+                            <i class="btn fas fa-trash fa-lg px-2 text-danger"/>
+                          </b-button>
+                        </h5>
                       </div>
                     </div>
-                  </b-card-title>
-                  <b-card-body class="py-0">
+                  </b-card-header>
+                  <b-card-body class="m-0 p-0">
                     <generic-pill :item_list="s.category_to_supermarket" label="category::name"
                                   color="info"></generic-pill>
                   </b-card-body>
@@ -251,7 +255,7 @@
                                             "
                   >
                     <i class="btn fas fa-plus-circle fa-lg px-0"
-                       :class="new_category.entrymode ? 'text-success' : 'text-muted'"/>
+                       :class="new_category.entrymode ? 'text-success' : 'text-primary'"/>
                   </b-button>
                 </h4>
               </template>
@@ -269,7 +273,7 @@
                                 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") }}
+                        class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
                     </b-button>
                   </b-input-group-append>
                 </b-input-group>
@@ -292,17 +296,28 @@
                   v-bind="{ animation: 200, disabled: !new_supermarket.editmode }"
               >
                 <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-                  <b-card
-                      class="m-0 p-0 font-weight-bold no-body list-group-item"
-                      :style="new_supermarket.editmode ? 'cursor:move' : ''"
-                      v-for="c in supermarketCategory"
-                      v-bind:key="c.id"
-                      :border-variant="new_supermarket.editmode ? 'success' : ''"
-                  >
-                    {{ categoryName(c) }}
-                    <b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
-                      <i class="btn fas fa-trash fa-lg px-2 text-muted"/>
-                    </b-button>
+                  <b-card no-body v-hover
+                          class="mt-1 list-group-item p-2"
+                          :style="new_supermarket.editmode ? 'cursor:move' : ''"
+                          v-for="c in supermarketCategory"
+                          v-bind:key="c.id"
+                          :border-variant="new_supermarket.editmode ? 'success' : ''">
+                    <b-card-header class="p-2 border-0">
+                      <div class="row">
+                        <div class="col-2" v-if="new_supermarket.editmode">
+                          <button type="button" class="btn btn-lg shadow-none"><i
+                              class="fas fa-arrows-alt-v"></i></button>
+                        </div>
+                        <div :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
+                          <h5 class="mt-1 mb-1">
+                            {{ categoryName(c) }}
+                            <b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
+                              <i class="btn fas fa-trash fa-lg px-2 text-danger"/>
+                            </b-button>
+                          </h5>
+                        </div>
+                      </div>
+                    </b-card-header>
                   </b-card>
                 </transition-group>
               </draggable>
@@ -313,19 +328,34 @@
                   class="list-group"
                   :list="notSupermarketCategory"
                   group="category"
-                  v-if="new_supermarket.editmode"
                   @start="drag = true"
                   @end="drag = false"
                   ghost-class="ghost"
+                  v-if="new_supermarket.editmode"
                   v-bind="{ animation: 200 }"
               >
                 <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-                  <b-card class="m-0 p-0 font-weight-bold no-body list-group-item" style="cursor: move"
-                          v-for="c in notSupermarketCategory" v-bind:key="c.id" :border-variant="'danger'">
-                    {{ categoryName(c) }}
-                    <b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
-                      <i class="btn fas fa-trash fa-lg px-2 text-muted"/>
-                    </b-button>
+                  <b-card no-body v-hover
+                          class="mt-1 list-group-item p-2"
+                          style="cursor: move"
+                          v-for="c in notSupermarketCategory" v-bind:key="c.id"
+                          :border-variant="'danger'">
+                    <b-card-header class="p-2 border-0">
+                      <div class="row">
+                        <div class="col-2" v-if="new_supermarket.editmode">
+                          <button type="button" class="btn btn-lg shadow-none"><i
+                              class="fas fa-arrows-alt-v"></i></button>
+                        </div>
+                        <div :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
+                          <h5 class="mt-1 mb-1">
+                            {{ categoryName(c) }}
+                            <b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
+                              <i class="btn fas fa-trash fa-lg px-2 text-primary"/>
+                            </b-button>
+                          </h5>
+                        </div>
+                      </div>
+                    </b-card-header>
                   </b-card>
                 </transition-group>
               </draggable>
@@ -341,7 +371,7 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="checkbox" class="form-control-sm" v-model="settings.mealplan_autoadd_shopping"
+                  <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoadd_shopping"
                          @change="saveSettings"/>
                 </div>
               </div>
@@ -354,7 +384,7 @@
                 <div class="row">
                   <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
                   <div class="col col-md-6 text-right">
-                    <input type="checkbox" class="form-control-sm" v-model="settings.mealplan_autoexclude_onhand"
+                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoexclude_onhand"
                            @change="saveSettings"/>
                   </div>
                 </div>
@@ -368,7 +398,7 @@
                 <div class="row">
                   <div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div>
                   <div class="col col-md-6 text-right">
-                    <input type="checkbox" class="form-control-sm" v-model="settings.mealplan_autoinclude_related"
+                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoinclude_related"
                            @change="saveSettings"/>
                   </div>
                 </div>
@@ -404,7 +434,7 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="number" class="form-control-sm" v-model="settings.shopping_auto_sync"
+                  <input type="number" class="form-control" v-model="settings.shopping_auto_sync"
                          @change="saveSettings"/>
                 </div>
               </div>
@@ -418,7 +448,7 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="checkbox" class="form-control-sm" v-model="settings.shopping_add_onhand"
+                  <input type="checkbox" class="form-control settings-checkbox" v-model="settings.shopping_add_onhand"
                          @change="saveSettings"/>
                 </div>
               </div>
@@ -432,11 +462,10 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("shopping_recent_days") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="number" class="form-control-sm" v-model="settings.shopping_recent_days"
+                  <input type="number" class="form-control" v-model="settings.shopping_recent_days"
                          @change="saveSettings"/>
                 </div>
               </div>
-
               <div class="row sm mb-3">
                 <div class="col">
                   <em class="small text-muted">
@@ -447,7 +476,8 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="checkbox" class="form-control-sm" v-model="settings.filter_to_supermarket"
+                  <input type="checkbox" class="form-control settings-checkbox"
+                         v-model="settings.filter_to_supermarket"
                          @change="saveSettings"/>
                 </div>
               </div>
@@ -461,7 +491,7 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("default_delay") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="number" class="form-control-sm" min="1" v-model="settings.default_delay"
+                  <input type="number" class="form-control" min="1" v-model="settings.default_delay"
                          @change="saveSettings"/>
                 </div>
               </div>
@@ -475,7 +505,7 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("csv_delim_label") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input class="form-control-sm" v-model="settings.csv_delim" @change="saveSettings"/>
+                  <input class="form-control" v-model="settings.csv_delim" @change="saveSettings"/>
                 </div>
               </div>
               <div class="row sm mb-3">
@@ -488,7 +518,7 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("csv_prefix_label") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input class="form-control-sm" v-model="settings.csv_prefix" @change="saveSettings"/>
+                  <input class="form-control" v-model="settings.csv_prefix" @change="saveSettings"/>
                 </div>
               </div>
               <div class="row sm mb-3">
@@ -498,6 +528,21 @@
                   </em>
                 </div>
               </div>
+              <div class="row">
+                <div class="col col-md-6">{{ $t("left_handed") }}</div>
+                <div class="col col-md-6">
+                  <input type="checkbox" class="form-control settings-checkbox"
+                         v-model="settings.left_handed"
+                         @change="saveSettings"/>
+                </div>
+              </div>
+              <div class="row sm mb-3">
+                <div class="col">
+                  <em class="small text-muted">
+                    {{ $t("left_handed_help") }}
+                  </em>
+                </div>
+              </div>
             </b-card>
           </div>
         </div>
@@ -549,7 +594,6 @@
             </b-col>
           </b-row>
         </ContextMenuItem>
-
         <ContextMenuItem @click="$refs.menu.close();onHand(contextData)">
           <a class="dropdown-item p-2" href="#"><i class="fas fa-clipboard-check"></i> {{ $t("OnHand") }}</a>
         </ContextMenuItem>
@@ -570,20 +614,29 @@
       <div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none"
            style="background: rgba(255, 255, 255, 0.6)"
            v-if="current_tab === 0">
-        <div class="col-md-3 col-6">
+        <div class="col-6">
           <a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode"
           ><i class="fas fa-cart-plus"></i>
             {{ $t("New Entry") }}
           </a>
         </div>
-        <div class="col-md-3 col-6">
-          <a class="btn btn-block btn-secondary shadow-none"
-          ><i class="fas fa-download"></i>
-            {{ $t("Export") }}
-          </a>
+        <div class="col-6">
+          <b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
+            <template #button-content>
+              <i class='fas fa-download'></i> {{ $t('Export') }}
+            </template>
+            <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')" icon="far fa-file-pdf"/>
+            <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv" :label="$t('download_csv')"
+                         icon="fas fa-file-csv"/>
+            <CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')"
+                             icon="fas fa-clipboard-list"/>
+            <CopyToClipboard :items="csvData" :settings="settings" format="table" :label="$t('copy_markdown_table')"
+                             icon="fab fa-markdown"/>
+          </b-dropdown>
         </div>
       </div>
     </transition>
+
   </div>
 </template>
 
@@ -654,6 +707,7 @@ export default {
         csv_delim: ",",
         csv_prefix: undefined,
         shopping_add_onhand: true,
+        left_handed: false
       },
       new_supermarket: {entrymode: false, value: undefined, editmode: undefined},
       new_category: {entrymode: false, value: undefined},
@@ -842,20 +896,22 @@ export default {
     // this.genericAPI inherited from ApiMixin
     addItem: function () {
       if (this.entry_mode_simple) {
-        this.genericPostAPI("api_ingredient_from_string", {text: this.new_item.ingredient}).then((result) => {
+        if (this.new_item.ingredient !== '' && this.new_item.ingredient !== undefined) {
+          this.genericPostAPI("api_ingredient_from_string", {text: this.new_item.ingredient}).then((result) => {
 
             let unit = null
             if (result.data.unit !== '') {
-                unit = {'name': result.data.unit}
+              unit = {'name': result.data.unit}
             }
 
-          this.new_item = {
-            amount: result.data.amount,
-            unit: unit,
-            food: {name: result.data.food},
-          }
-          this.addEntry()
-        })
+            this.new_item = {
+              amount: result.data.amount,
+              unit: unit,
+              food: {name: result.data.food},
+            }
+            this.addEntry()
+          })
+        }
       } else {
         this.addEntry()
       }
@@ -1292,6 +1348,17 @@ export default {
       window.removeEventListener("online", this.updateOnlineStatus)
       window.removeEventListener("offline", this.updateOnlineStatus)
     },
+  }, directives: {
+    hover: {
+      inserted: function (el) {
+        el.addEventListener("mouseenter", () => {
+          el.classList.add("shadow")
+        })
+        el.addEventListener("mouseleave", () => {
+          el.classList.remove("shadow")
+        })
+      },
+    },
   },
 }
 </script>
@@ -1340,4 +1407,21 @@ export default {
 .form-control-append {
   font-size: 20px;
 }
+
+@media (max-width: 768px) {
+  #shoppinglist {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 65vh;
+    padding-right: 8px !important;
+  }
+}
+
+.settings-checkbox {
+  font-size: 0.3rem
+}
+
 </style>
diff --git a/vue/src/components/Buttons/CopyToClipboard.vue b/vue/src/components/Buttons/CopyToClipboard.vue
index cb64987eb..6c555aa5c 100644
--- a/vue/src/components/Buttons/CopyToClipboard.vue
+++ b/vue/src/components/Buttons/CopyToClipboard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="cursor:pointer">
         <a v-if="!button" class="dropdown-item" @click="clipboard"><i :class="icon"></i> {{ label }}</a>
         <b-button v-if="button" @click="clipboard">{{ label }}</b-button>
     </div>
diff --git a/vue/src/components/Buttons/DownloadCSV.vue b/vue/src/components/Buttons/DownloadCSV.vue
index d85947ba3..a490bdec6 100644
--- a/vue/src/components/Buttons/DownloadCSV.vue
+++ b/vue/src/components/Buttons/DownloadCSV.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="cursor:pointer">
         <a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a>
         <b-button v-if="button" @click="downloadFile">{{ label }}</b-button>
     </div>
diff --git a/vue/src/components/Buttons/DownloadPDF.vue b/vue/src/components/Buttons/DownloadPDF.vue
index 9d5475613..23ea65158 100644
--- a/vue/src/components/Buttons/DownloadPDF.vue
+++ b/vue/src/components/Buttons/DownloadPDF.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="cursor:pointer">
         <a v-if="!button" class="dropdown-item" @click="downloadFile"><i :class="icon"></i> {{ label }}</a>
         <b-button v-if="button" @click="downloadFile">{{ label }}</b-button>
     </div>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index f202fc06b..ff5035370 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -1,135 +1,150 @@
 <template>
   <div id="shopping_line_item">
-    <b-container fluid class="pr-0 pl-1 pl-md-3">
-      <!-- summary rows -->
-      <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">
+    <b-row align-h="start">
+      <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
+             v-if="settings.left_handed">
+        <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
+               @change="updateChecked"
+               :key="entries[0].id"/>
+        <b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
+          <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
+          </div>
+        </b-button>
+      </b-col>
+      <b-col cols="1" class="align-items-center d-flex">
+        <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
+             @click.stop="$emit('open-context-menu', $event, entries)">
+          <button
+              aria-haspopup="true"
+              aria-expanded="false"
+              type="button"
+              :class="settings.left_handed ? 'pl-0' : ''"
+              class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
+            <i class="fas fa-ellipsis-v fa-lg"></i>
+          </button>
+        </div>
+      </b-col>
+      <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
+        <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
+               @change="updateChecked"
+               :key="entries[0].id"/>
+      </b-col>
+      <b-col cols="8" md="9">
+        <b-row class="d-flex h-100">
+          <b-col cols="6" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
+            <strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong> {{
+              Object.entries(formatAmount)[0][0]
+            }}
+          </b-col>
+          <b-col cols="6" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
+            <div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }} &ensp;
+              {{ x[0] }}
+            </div>
+          </b-col>
+
+          <b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
+            {{ formatFood }}
+          </b-col>
+          <b-col cols="3" data-html2canvas-ignore="true"
+                 class="align-items-center d-none d-md-flex justify-content-end">
+            <b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none"
+                      variant="link">
+              <div class="text-nowrap"><i class="fa fa-chevron-right rotate"
+                                          :class="showDetails ? 'rotated' : ''"></i> <span
+                  class="d-none d-md-inline-block">{{ $t('Details') }}</span>
+              </div>
+            </b-button>
+          </b-col>
+        </b-row>
+      </b-col>
+      <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
+             v-if="!settings.left_handed">
+        <b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
+          <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
+          </div>
+        </b-button>
+        <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
+               @change="updateChecked"
+               :key="entries[0].id"/>
+      </b-col>
+    </b-row>
+    <b-row align-h="center" class="d-none d-md-flex">
+      <b-col cols="12">
+        <div class="small text-muted text-truncate">{{ formatHint }}</div>
+      </b-col>
+    </b-row>
+    <!-- detail rows -->
+    <div class="card no-body mb-1 pt-2 align-content-center shadow-sm" v-if="showDetails">
+      <div v-for="(e, x) in entries" :key="e.id">
+        <b-row class="small justify-content-around">
+          <b-col cols="auto" md="4" class="overflow-hidden text-nowrap">
             <button
                 aria-haspopup="true"
                 aria-expanded="false"
                 type="button"
-                class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
-                @click.stop="$emit('open-context-menu', $event, entries)">
-              <i class="fas fa-ellipsis-v fa-lg"></i>
+                class="btn btn-link btn-sm m-0 p-0 pl-2"
+                style="text-overflow: ellipsis"
+                @click.stop="openRecipeCard($event, e)"
+                @mouseover="openRecipeCard($event, e)">
+              {{ formatOneRecipe(e) }}
             </button>
-          </div>
-        </b-col>
-        <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
-          <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
-                 @change="updateChecked"
-                 :key="entries[0].id"/>
-        </b-col>
-        <b-col cols="8" md="9">
-          <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] }}
-              </div>
-            </b-col>
-            <b-col cols="6" md="6" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
-              <div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }} &ensp;
-                {{ x[0] }}
-              </div>
-            </b-col>
-
-            <b-col cols="6" md="3" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
-              {{ formatFood }}
-            </b-col>
-            <b-col cols="3" data-html2canvas-ignore="true" class="align-items-center d-none d-md-flex">
-              <b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2" variant="link">
-                <div class="text-nowrap"><i class="fa fa-chevron-right rotate"
-                                            :class="showDetails ? 'rotated' : ''"></i> <span
-                    class="d-none d-md-inline-block">{{ $t('Details') }}</span>
-                </div>
-              </b-button>
-            </b-col>
-          </b-row>
-        </b-col>
-        <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none">
-          <b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
-            <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
-            </div>
-          </b-button>
-          <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
-                 @change="updateChecked"
-                 :key="entries[0].id"/>
-        </b-col>
-      </b-row>
-      <b-row align-h="center" class="d-none d-md-flex">
-        <b-col cols="12">
-          <div class="small text-muted text-truncate">{{ formatHint }}</div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <!-- detail rows -->
-    <div class="card no-body mb-1 pt-2 align-content-center ml-2" v-if="showDetails">
-      <b-container fluid>
-        <div v-for="(e, x) in entries" :key="e.id">
-          <b-row class="small justify-content-around">
-            <b-col cols="auto" md="4" class="overflow-hidden text-nowrap">
+          </b-col>
+          <b-col cols="auto" md="4" class="text-muted">{{ formatOneMealPlan(e) }}</b-col>
+          <b-col cols="auto" md="4" class="text-muted text-right overflow-hidden text-nowrap pr-4">
+            {{ formatOneCreatedBy(e) }}
+            <div v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
+          </b-col>
+        </b-row>
+        <b-row align-h="start">
+          <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
+                 v-if="settings.left_handed">
+            <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
+                   :checked="formatChecked"
+                   @change="updateChecked"
+                   :key="entries[0].id"/>
+          </b-col>
+          <b-col cols="1" class="align-items-center d-flex">
+            <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
+                 @click.stop="$emit('open-context-menu', $event, e)">
               <button
                   aria-haspopup="true"
                   aria-expanded="false"
                   type="button"
-                  class="btn btn-link btn-sm m-0 p-0"
-                  style="text-overflow: ellipsis"
-                  @click.stop="openRecipeCard($event, e)"
-                  @mouseover="openRecipeCard($event, e)">
-                {{ formatOneRecipe(e) }}
+                  :class="settings.left_handed ? 'pl-0' : ''"
+                  class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
+                <i class="fas fa-ellipsis-v fa-lg"></i>
               </button>
-            </b-col>
-            <b-col cols="auto" md="4" class="text-muted">{{ formatOneMealPlan(e) }}</b-col>
-            <b-col cols="auto" md="4" class="text-muted text-right overflow-hidden text-nowrap">
-              {{ formatOneCreatedBy(e) }}
-              <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">
-                <button
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                    type="button"
-                    class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
-                    @click.stop="$emit('open-context-menu', $event, e)">
-                  <i class="fas fa-ellipsis-v fa-lg"></i>
-                </button>
-              </div>
-            </b-col>
-            <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
-              <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
-                     @change="updateChecked"
-                     :key="entries[0].id"/>
-            </b-col>
-            <b-col cols="8" md="9">
-              <b-row class="d-flex justify-content-around">
-                <b-col cols="6" md="6" class="d-flex align-items-center">
-                  <div>{{ formatOneAmount(e) }} &ensp;
-                    {{ formatOneUnit(e) }}
-                  </div>
-                </b-col>
-
-                <b-col cols="6" md="3" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
-                  {{ formatOneFood(e) }}
-                </b-col>
-                <b-col cols="12" class="d-flex d-md-none">
-                  <div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
-                </b-col>
-              </b-row>
-            </b-col>
-            <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none">
-              <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
-                     :checked="formatChecked"
-                     @change="updateChecked"
-                     :key="entries[0].id"/>
-            </b-col>
-          </b-row>
-          <hr class="w-75" v-if="x !== entries.length -1"/>
-          <div class="pb-4" v-if="x === entries.length -1"></div>
-        </div>
-      </b-container>
+            </div>
+          </b-col>
+          <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
+            <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
+                   @change="updateChecked"
+                   :key="entries[0].id"/>
+          </b-col>
+          <b-col cols="8" md="9">
+            <b-row class="d-flex align-items-center h-100">
+              <b-col cols="6" md="3" class="d-flex align-items-center">
+                <strong class="mr-1">{{ formatOneAmount(e) }}</strong> {{ formatOneUnit(e) }}
+              </b-col>
+              <b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
+                {{ formatOneFood(e) }}
+              </b-col>
+              <b-col cols="12" class="d-flex d-md-none">
+                <div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
+              </b-col>
+            </b-row>
+          </b-col>
+          <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
+                 v-if="!settings.left_handed">
+            <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
+                   :checked="formatChecked"
+                   @change="updateChecked"
+                   :key="entries[0].id"/>
+          </b-col>
+        </b-row>
+        <hr class="w-75" v-if="x !== entries.length -1"/>
+        <div class="pb-4" v-if="x === entries.length -1"></div>
+      </div>
     </div>
     <hr class="m-1" v-if="!showDetails"/>
     <ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width: 300">
@@ -173,6 +188,7 @@ export default {
     entries: {
       type: Array,
     },
+    settings: Object,
     groupby: {type: String},
   },
   data() {
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index 96b10040d..f289a5b32 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -287,5 +287,7 @@
     "sql_debug": "SQL Debug",
     "remember_search": "Remember Search",
     "remember_hours": "Hours to Remember",
-    "tree_select": "Use Tree Selection"
+    "tree_select": "Use Tree Selection",
+    "left_handed": "Left-handed mode",
+    "left_handed_help": "Will optimize the UI for use with your left hand."
 }