diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index d97d5f73..440a899c 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -651,15 +651,23 @@ class FoodViewSet(viewsets.ModelViewSet, TreeMixin):
             content = {'error': True, 'msg': e.args[0]}
             return Response(content, status=status.HTTP_403_FORBIDDEN)
 
-
+import json
 class RecipeBookViewSet(viewsets.ModelViewSet, StandardFilterMixin):
     queryset = RecipeBook.objects
     serializer_class = RecipeBookSerializer
     permission_classes = [(CustomIsOwner | CustomIsShared) & CustomTokenHasReadWriteScope]
 
     def get_queryset(self):
+        order_field = self.request.GET.get('order_field')
+        order_direction = self.request.GET.get('order_direction')
+
+        if not order_field:
+            order_field = 'id'
+
+        ordering = f"{'' if order_direction == 'asc' else '-'}{order_field}"
+        
         self.queryset = self.queryset.filter(Q(created_by=self.request.user) | Q(shared=self.request.user)).filter(
-            space=self.request.space).distinct()
+        space=self.request.space).distinct().order_by(ordering)
         return super().get_queryset()
 
 
diff --git a/vue/src/apps/CookbookView/CookbookView.vue b/vue/src/apps/CookbookView/CookbookView.vue
index bb63db82..1b2560dc 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -11,11 +11,11 @@
                                     <b-button variant="primary" v-b-tooltip.hover :title="$t('Create')" @click="createNew">
                                         <i class="fas fa-plus"></i>
                                     </b-button>
-                                    <b-dropdown variant="primary" id="sortDropDown" :text= dropdown_text class="border-left">
-                                        <b-dropdown-item @click = "sortOldest" v-show="showOtN">oldest to newest</b-dropdown-item>
-                                        <b-dropdown-item @click = "sortNewest" v-show="showNtO">newest to oldest</b-dropdown-item>
-                                        <b-dropdown-item @click = "sortAlphabetical" v-show="showAlp">alphabetical order</b-dropdown-item>
-                                        <b-dropdown-item @click = " enableSortManually" v-show="showMan">manually</b-dropdown-item>
+                                    <b-dropdown variant="primary" id="sortDropDown" text="Order By"  class="border-left">
+                                        <b-dropdown-item @click = "orderBy('id','asc')"   :disabled= "isActiveSort('id','asc')">oldest to newest</b-dropdown-item>
+                                        <b-dropdown-item @click = "orderBy('id','desc')"  :disabled= "isActiveSort('id','desc')">newest to oldest</b-dropdown-item>
+                                        <b-dropdown-item @click = "orderBy('name','asc')" :disabled= "isActiveSort('name','asc')">alphabetical order</b-dropdown-item>
+                                        <b-dropdown-item @click = " enableSortManually"   :disabled= "isActiveSort('name','asc')" >manually</b-dropdown-item>
                                     </b-dropdown>
                                 </b-input-group-append>
                                 <b-button class= "ml-2" variant="primary" v-show="!showMan" @click="submitManualChanging">
@@ -114,10 +114,8 @@ export default {
             current_book: undefined,
             loading: false,
             search: "",
-            dropdown_text: "Sort by: oldest to newest",
-            showOtN: false,
-            showNtO: true,
-            showAlp: true,
+            activeSortField : 'id',
+            activeSortDirection: 'asc',
             showMan: true,
             md: 12,
             inputValue: "",
@@ -139,7 +137,7 @@ export default {
     methods: {
         refreshData: function () {
             let apiClient = new ApiApiFactory()
-
+            
             apiClient.listRecipeBooks().then((result) => {
                 this.cookbooks = result.data
             })
@@ -197,41 +195,24 @@ export default {
                 }
             })
         },
-        sortAlphabetical: function(){
-            this.dropdown_text = "Sort by: alphabetical order"
-            this.cookbooks = this.cookbooks.sort((a, b) => a.name.localeCompare(b.name))
-            this.showAlp=  false
-            this.showNtO = true
-            this.showOtN = true
-            this.showMan = true
-            this.submitManual = false
-            this.md = 12
-
+        orderBy: function(order_field,order_direction){
+            let apiClient = new ApiApiFactory()
+            const options = {
+                order_field: order_field,
+                order_direction: order_direction
+            }
+            this.activeSortField = order_field
+            this.activeSortDirection = order_direction
+            apiClient.listRecipeBooks(options).then((result) => {
+                this.cookbooks = result.data
+            })
         },
-        sortNewest: function(){
-            this.dropdown_text = "Sort by: newest to oldest"
-            this.cookbooks = this.cookbooks.sort((a, b) => b.id - a.id);
-            this.showNtO = false
-            this.showAlp=  true
-            this.showOtN = true
-            this.showMan = true
-            this.submitManual = false
-            this.md = 12
-        },
-        sortOldest: function(){
-            this.dropdown_text = "Sort by: oldest to newest"
-            this.cookbooks = this.cookbooks.sort((a, b) => a.id - b.id)
-            this.showOtN=  false
-            this.showAlp= true
-            this.showNtO = true
-            this.showMan = true
-            this.submitManual = false
-            this.md = 12
+        isActiveSort: function(field, direction) {
+        // Check if the current item is the active sorting option
+        return this.activeSortField === field && this.activeSortDirection === direction;
         },
         enableSortManually: function(){
-            console.log(1)
             this.synchroniseLocalToDatabase();
-            console.log(2)
             if (localStorage.getItem('cookbooks') ){
                 this.cookbooks =  JSON.parse(localStorage.getItem('cookbooks'))
             }
diff --git a/vue/src/utils/openapi/api.ts b/vue/src/utils/openapi/api.ts
index 064297c4..b08ea251 100644
--- a/vue/src/utils/openapi/api.ts
+++ b/vue/src/utils/openapi/api.ts
@@ -8985,6 +8985,13 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
             const localVarQueryParameter = {} as any;
 
 
+            if (options.order_field !== undefined) {
+                localVarQueryParameter['order_field'] =  options.order_field;
+            }
+
+            if (options.order_direction!== undefined) {
+                localVarQueryParameter['order_direction'] = options.order_direction;
+            }
     
             setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};