diff --git a/vue/src/apps/CookbookView/CookbookView.vue b/vue/src/apps/CookbookView/CookbookView.vue
index 737300564f..bb63db823d 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -18,6 +18,9 @@
                                         <b-dropdown-item @click = " enableSortManually" v-show="showMan">manually</b-dropdown-item>
                                     </b-dropdown>
                                 </b-input-group-append>
+                                <b-button class= "ml-2" variant="primary" v-show="!showMan" @click="submitManualChanging">
+                                    {{submitText}}
+                                </b-button>
                             </b-input-group>
                         </div>
                     </div>
@@ -33,10 +36,10 @@
                             <b-col no-gutters :md="md" style="height: inherit">
                                 <b-card-body class="m-0 py-0" style="height: inherit">
                                     <b-card-text class="h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
-                                        <b-button variant="primary" v-on:click="openBook(book.id)">                                        
+                                        <b-button  v-on:click="openBook(book.id)"  style="color: #000; background-color: white" variant="primary">                                        
                                             <h5 class="m-0 mt-1 text-truncate" >
                                             {{ book.name }} <span class="float-right"><i class="fa fa-book"></i></span>
-                                        </h5></b-button>
+                                            </h5></b-button>
                                         <div class="m-0 text-truncate">{{ book.description }}</div>
                                         <div class="mt-auto mb-1 d-flex flex-row justify-content-end"></div>
                                     </b-card-text>
@@ -44,14 +47,13 @@
                             </b-col>
                             <b-col>
                                 <b-button-group vertical md = "1" >
-                                    <b-button  v-if="!showMan && index != 0"  variant="primary" style="border-radius:28px!important;"  @click= "swapUpBooks(index)">&uarr;</b-button>
-                                    <b-button  v-if="!showMan && index != cookbooks.length-1"  variant="primary" style="border-radius:28px!important;"  @click= "swapDownBooks(index)">&darr;</b-button>
+                                    <b-button  v-if="!showMan && index != 0 && submitManual "  variant="primary" style="border-radius:28px!important;"  @click= "swapUpBooks(index)">&uarr;</b-button>
+                                    <b-button  v-if="!showMan && index != cookbooks.length-1 && submitManual"  variant="primary" style="border-radius:28px!important;"  @click= "swapDownBooks(index)">&darr;</b-button>
                                 </b-button-group>
                                  <b-button-group vertical md = "1" class="ml-2">
-                                    <input v-model.lazy="inputValue" v-if="!showMan" placeholder="enter swap position">                      
-                                    <b-button v-if="!showMan" variant="primary"  style="border-radius:28px!important;"  @click= "swapWithPos(index)">swap</b-button>
+                                    <input v-model.lazy="inputValue" v-if="!showMan && submitManual" placeholder="enter swap position">                      
+                                    <b-button v-if="!showMan && submitManual" variant="primary"  style="border-radius:28px!important;"  @click= "swapWithPos(index)">swap</b-button>
                                 </b-button-group>
-
                             </b-col>
                         </b-row>
                     </b-card>
@@ -118,7 +120,9 @@ export default {
             showAlp: true,
             showMan: true,
             md: 12,
-            inputValue: ""
+            inputValue: "",
+            submitManual: false,
+            submitText: "Edit"
         }
     },
     computed: {
@@ -200,6 +204,7 @@ export default {
             this.showNtO = true
             this.showOtN = true
             this.showMan = true
+            this.submitManual = false
             this.md = 12
 
         },
@@ -210,6 +215,7 @@ export default {
             this.showAlp=  true
             this.showOtN = true
             this.showMan = true
+            this.submitManual = false
             this.md = 12
         },
         sortOldest: function(){
@@ -219,16 +225,22 @@ export default {
             this.showAlp= true
             this.showNtO = true
             this.showMan = true
+            this.submitManual = false
             this.md = 12
         },
         enableSortManually: function(){
+            console.log(1)
+            this.synchroniseLocalToDatabase();
+            console.log(2)
+            if (localStorage.getItem('cookbooks') ){
+                this.cookbooks =  JSON.parse(localStorage.getItem('cookbooks'))
+            }
             this.showOtN=  true
             this.showAlp= true
             this.showNtO = true
             this.showMan =  false
-            this.md = 8
             this.dropdown_text = "Sort by: manually"
-        
+            
         },
         swapUpBooks: function(index){
             const tempArray = this.cookbooks
@@ -250,7 +262,6 @@ export default {
             const position =  parseInt(this.inputValue)
             this.inputValue = ""
             if (!(/^\d+$/.test(position)) || position >= this.cookbooks.length || position < 0){
-                    console.log("catch")
                     this.inputValue = ""
             } else {
                 const tempArray = this.cookbooks
@@ -261,6 +272,32 @@ export default {
                 this.cookbooks = tempArray
             }
                 
+        }, submitManualChanging: function(){
+            if (!this.submitManual){
+                this.submitText = "Submit"
+                this.submitManual = true
+                this.md = 8
+            } else {
+                localStorage.setItem('cookbooks',JSON.stringify(this.cookbooks))
+                this.submitText = "Edit"
+                this.submitManual = false
+                this.md = 12
+            }
+        }, synchroniseLocalToDatabase: function(){
+            const localStorageData = localStorage.getItem('cookbooks');
+            const localStorageArray = JSON.parse(localStorageData) || [];
+            const updatedLocalStorageArray = localStorageArray.filter(localStorageElement => {      
+             // Assuming there's a unique identifier in your objects, replace 'id' with the actual property
+             const isElementInTargetArray = this.cookbooks.some(targetElement => targetElement.id === localStorageElement.id);
+                return isElementInTargetArray;
+            });
+            this.cookbooks.forEach(targetElement => {
+                const isNewElement = !updatedLocalStorageArray.some(localStorageElement => localStorageElement.id === targetElement.id);
+                if (isNewElement) {
+                    updatedLocalStorageArray.push(targetElement);
+                }
+            });
+            localStorage.setItem('cookbooks', JSON.stringify(updatedLocalStorageArray));
         }
     }, 
     directives: {