diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index 5dd1766c2..b41f76d82 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -561,6 +561,17 @@ class FoodInheritFieldViewSet(viewsets.ReadOnlyModelViewSet):
         return super().get_queryset()
 
 
+# TODO make TreeMixin a view type and move schema to view type
+@extend_schema_view(
+    list=extend_schema(
+        parameters=[
+            OpenApiParameter(name='query', description='lookup if query string is contained within the name, case insensitive', type=str),
+            OpenApiParameter(name='updated_at', description='if model has an updated_at timestamp, filter only models updated at or after datetime', type=str),  # TODO format hint
+            OpenApiParameter(name='limit', description='limit number of entries to return', type=str),
+            OpenApiParameter(name='random', description='randomly orders entries (only works together with limit)', type=str),
+        ]
+    )
+)
 class FoodViewSet(viewsets.ModelViewSet, TreeMixin):
     queryset = Food.objects
     model = Food
@@ -1101,7 +1112,7 @@ class RecipeViewSet(viewsets.ModelViewSet):
     )
     def flat(self, request):
         qs = Recipe.objects.filter(
-            space=request.space).filter(Q(private=False) | (Q(private=True) & (Q(created_by=self.request.user) | Q(shared=self.request.user)))).all() # TODO limit fields retrieved but .values() kills image
+            space=request.space).filter(Q(private=False) | (Q(private=True) & (Q(created_by=self.request.user) | Q(shared=self.request.user)))).all()  # TODO limit fields retrieved but .values() kills image
 
         return Response(self.serializer_class(qs, many=True).data)
 
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..20c3a9bda
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@vueuse/core": "^10.9.0"
+  }
+}
diff --git a/vue3/src/apps/tandoor/main.ts b/vue3/src/apps/tandoor/main.ts
index e0adb1e24..b10d3d5ba 100644
--- a/vue3/src/apps/tandoor/main.ts
+++ b/vue3/src/apps/tandoor/main.ts
@@ -12,12 +12,13 @@ import RecipeSearchPage from "@/pages/RecipeSearchPage.vue";
 import RecipeViewPage from "@/pages/RecipeViewPage.vue";
 import luxonPlugin from "@/plugins/luxonPlugin";
 import RecipeEditPage from "@/pages/RecipeEditPage.vue";
+import MealPlanPage from "@/pages/MealPlanPage.vue";
 
 const routes = [
     {path: '/', redirect: '/search', name: 'index'},
     {path: '/search', component: RecipeSearchPage, name: 'view_search'},
     {path: '/shopping', component: ShoppingListPage, name: 'view_shopping'},
-    {path: '/mealplan', component: ShoppingListPage, name: 'view_mealplan'},
+    {path: '/mealplan', component: MealPlanPage, name: 'view_mealplan'},
     {path: '/books', component: ShoppingListPage, name: 'view_books'},
     {path: '/recipe/:id', component: RecipeViewPage, name: 'view_recipe', props: true},
     {path: '/recipe/edit/:recipe_id', component: RecipeEditPage, name: 'edit_recipe', props: true},
diff --git a/vue3/src/components/inputs/ModelSelect.vue b/vue3/src/components/inputs/ModelSelect.vue
new file mode 100644
index 000000000..960631d14
--- /dev/null
+++ b/vue3/src/components/inputs/ModelSelect.vue
@@ -0,0 +1,90 @@
+<template>
+    <template v-if="allow_create">
+        Combobox
+        <v-combobox
+            label="Combobox"
+            :items="items"
+            item-title="name"
+            item-value="id"
+            chips
+            @update:search="search"
+        ></v-combobox>
+
+    </template>
+    <template v-else>
+        Autocomplete
+        <v-autocomplete
+            label="Autocomplete"
+            :items="items"
+            item-title="name"
+            item-value="id"
+            chips
+        ></v-autocomplete>
+    </template>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted} from 'vue'
+import {ApiApi} from "@/openapi/index.js";
+
+const props = defineProps(
+    {
+        placeholder: {type: String, default: undefined},
+        model: {
+            type: String,
+            required: true,
+        },
+        label: {type: String, default: "name"},
+        parent_variable: {type: String, default: undefined},
+        limit: {type: Number, default: 25},
+        sticky_options: {
+            type: Array,
+            default() {
+                return []
+            },
+        },
+        initial_selection: {
+            type: Array,
+            default() {
+                return []
+            },
+        },
+        initial_single_selection: {
+            type: Object,
+            default: undefined,
+        },
+        search_on_load: {type: Boolean, default: true},
+        multiple: {type: Boolean, default: true},
+        allow_create: {type: Boolean, default: false},
+        create_placeholder: {type: String, default: "You Forgot to Add a Tag Placeholder"},
+        clear: {type: Number},
+        disabled: {type: Boolean, default: false,},
+    }
+)
+
+const items = ref([])
+
+function genericApiCall(model: string, query: string) {
+    // TODO make mode an enum
+    // TODO make model an enum as well an manually "clear" allowed types?
+    const api = new ApiApi()
+
+    api[`api${model}List`]({page: 1, query: query}).then(r => {
+        this.items = r.results
+    })
+}
+
+function search(query: string) {
+
+}
+
+// lifecycle hooks
+onMounted(() => {
+    console.log(`The initial count is ${items}.`)
+})
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/openapi/apis/ApiApi.ts b/vue3/src/openapi/apis/ApiApi.ts
index 75f455d61..b45d26c69 100644
--- a/vue3/src/openapi/apis/ApiApi.ts
+++ b/vue3/src/openapi/apis/ApiApi.ts
@@ -539,8 +539,12 @@ export interface ApiFoodInheritFieldRetrieveRequest {
 }
 
 export interface ApiFoodListRequest {
+    limit?: string;
     page?: number;
     pageSize?: number;
+    query?: string;
+    random?: string;
+    updatedAt?: string;
 }
 
 export interface ApiFoodMergeUpdateRequest {
@@ -947,15 +951,6 @@ export interface ApiOpenDataVersionUpdateRequest {
     openDataVersion: OpenDataVersion;
 }
 
-export interface ApiPlanIcalRetrieve2Request {
-    fromDate: string;
-}
-
-export interface ApiPlanIcalRetrieve3Request {
-    fromDate: string;
-    toDate: string;
-}
-
 export interface ApiRecipeBookCreateRequest {
     recipeBook: RecipeBook;
 }
@@ -3135,6 +3130,10 @@ export class ApiApi extends runtime.BaseAPI {
     async apiFoodListRaw(requestParameters: ApiFoodListRequest): Promise<runtime.ApiResponse<PaginatedFoodList>> {
         const queryParameters: any = {};
 
+        if (requestParameters.limit !== undefined) {
+            queryParameters['limit'] = requestParameters.limit;
+        }
+
         if (requestParameters.page !== undefined) {
             queryParameters['page'] = requestParameters.page;
         }
@@ -3143,6 +3142,18 @@ export class ApiApi extends runtime.BaseAPI {
             queryParameters['page_size'] = requestParameters.pageSize;
         }
 
+        if (requestParameters.query !== undefined) {
+            queryParameters['query'] = requestParameters.query;
+        }
+
+        if (requestParameters.random !== undefined) {
+            queryParameters['random'] = requestParameters.random;
+        }
+
+        if (requestParameters.updatedAt !== undefined) {
+            queryParameters['updated_at'] = requestParameters.updatedAt;
+        }
+
         const headerParameters: runtime.HTTPHeaders = {};
 
         if (this.configuration && (this.configuration.username !== undefined || this.configuration.password !== undefined)) {
@@ -6590,70 +6601,6 @@ export class ApiApi extends runtime.BaseAPI {
         await this.apiPlanIcalRetrieveRaw();
     }
 
-    /**
-     */
-    async apiPlanIcalRetrieve2Raw(requestParameters: ApiPlanIcalRetrieve2Request): Promise<runtime.ApiResponse<void>> {
-        if (requestParameters.fromDate === null || requestParameters.fromDate === undefined) {
-            throw new runtime.RequiredError('fromDate','Required parameter requestParameters.fromDate was null or undefined when calling apiPlanIcalRetrieve2.');
-        }
-
-        const queryParameters: any = {};
-
-        const headerParameters: runtime.HTTPHeaders = {};
-
-        if (this.configuration && (this.configuration.username !== undefined || this.configuration.password !== undefined)) {
-            headerParameters["Authorization"] = "Basic " + btoa(this.configuration.username + ":" + this.configuration.password);
-        }
-        const response = await this.request({
-            path: `/api/plan-ical/{from_date}/`.replace(`{${"from_date"}}`, encodeURIComponent(String(requestParameters.fromDate))),
-            method: 'GET',
-            headers: headerParameters,
-            query: queryParameters,
-        });
-
-        return new runtime.VoidApiResponse(response);
-    }
-
-    /**
-     */
-    async apiPlanIcalRetrieve2(requestParameters: ApiPlanIcalRetrieve2Request): Promise<void> {
-        await this.apiPlanIcalRetrieve2Raw(requestParameters);
-    }
-
-    /**
-     */
-    async apiPlanIcalRetrieve3Raw(requestParameters: ApiPlanIcalRetrieve3Request): Promise<runtime.ApiResponse<void>> {
-        if (requestParameters.fromDate === null || requestParameters.fromDate === undefined) {
-            throw new runtime.RequiredError('fromDate','Required parameter requestParameters.fromDate was null or undefined when calling apiPlanIcalRetrieve3.');
-        }
-
-        if (requestParameters.toDate === null || requestParameters.toDate === undefined) {
-            throw new runtime.RequiredError('toDate','Required parameter requestParameters.toDate was null or undefined when calling apiPlanIcalRetrieve3.');
-        }
-
-        const queryParameters: any = {};
-
-        const headerParameters: runtime.HTTPHeaders = {};
-
-        if (this.configuration && (this.configuration.username !== undefined || this.configuration.password !== undefined)) {
-            headerParameters["Authorization"] = "Basic " + btoa(this.configuration.username + ":" + this.configuration.password);
-        }
-        const response = await this.request({
-            path: `/api/plan-ical/{from_date}/{to_date}/`.replace(`{${"from_date"}}`, encodeURIComponent(String(requestParameters.fromDate))).replace(`{${"to_date"}}`, encodeURIComponent(String(requestParameters.toDate))),
-            method: 'GET',
-            headers: headerParameters,
-            query: queryParameters,
-        });
-
-        return new runtime.VoidApiResponse(response);
-    }
-
-    /**
-     */
-    async apiPlanIcalRetrieve3(requestParameters: ApiPlanIcalRetrieve3Request): Promise<void> {
-        await this.apiPlanIcalRetrieve3Raw(requestParameters);
-    }
-
     /**
      */
     async apiRecipeBookCreateRaw(requestParameters: ApiRecipeBookCreateRequest): Promise<runtime.ApiResponse<RecipeBook>> {
diff --git a/vue3/src/openapi/models/DefaultPageEnum.ts b/vue3/src/openapi/models/DefaultPageEnum.ts
index fb2876254..5b15d727e 100644
--- a/vue3/src/openapi/models/DefaultPageEnum.ts
+++ b/vue3/src/openapi/models/DefaultPageEnum.ts
@@ -16,13 +16,15 @@
  * * `SEARCH` - Search
 * `PLAN` - Meal-Plan
 * `BOOKS` - Books
+* `SHOPPING` - Shopping
  * @export
  * @enum {string}
  */
 export enum DefaultPageEnum {
     Search = 'SEARCH',
     Plan = 'PLAN',
-    Books = 'BOOKS'
+    Books = 'BOOKS',
+    Shopping = 'SHOPPING'
 }
 
 export function DefaultPageEnumFromJSON(json: any): DefaultPageEnum {
diff --git a/vue3/src/pages/MealPlanPage.vue b/vue3/src/pages/MealPlanPage.vue
new file mode 100644
index 000000000..a6ccd7b50
--- /dev/null
+++ b/vue3/src/pages/MealPlanPage.vue
@@ -0,0 +1,24 @@
+<template>
+
+  <model-select model="Food" allow_create></model-select>
+
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+
+export default defineComponent({
+    name: "MealPlanPage",
+    components: {ModelSelect},
+    data(){
+        return {
+
+        }
+    }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index fb57ccd13..5ffa6c830 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,3 +2,34 @@
 # yarn lockfile v1
 
 
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
+"@vueuse/core@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
+  integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.9.0"
+    "@vueuse/shared" "10.9.0"
+    vue-demi ">=0.14.7"
+
+"@vueuse/metadata@10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
+  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
+
+"@vueuse/shared@10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
+  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
+  dependencies:
+    vue-demi ">=0.14.7"
+
+vue-demi@>=0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==