diff --git a/package.json b/package.json
index fafb153..5568959 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
         "vue3-google-map": "^0.14.0",
         "vue3-tel-input": "^1.0.4",
         "vueperslides": "^2.8.2",
-        "vuetify": "^3.0.0-beta.11",
+        "vuetify": "^3.2.4",
         "vuex": "^4.0.2",
         "vuex-map-fields": "^1.3.6"
     },
diff --git a/src/plugins/vuetify/index.js b/src/plugins/vuetify/index.js
index 00e1be8..5dc4fe7 100644
--- a/src/plugins/vuetify/index.js
+++ b/src/plugins/vuetify/index.js
@@ -6,6 +6,7 @@ import { VDataTable } from 'vuetify/labs/VDataTable'
 import * as labs from 'vuetify/labs/components'
 import * as directives from 'vuetify/directives'
 import theme from './theme'
+import { VuetifyDateAdapter } from 'vuetify/labs/date/adapters/vuetify'
 
 // Vuetify
 
@@ -17,4 +18,7 @@ export default createVuetify({
         VDataTable,
         ...labs,
       },
+      date: {
+        adapter: VuetifyDateAdapter,
+      },
 });
diff --git a/src/routes/retailer/boxed_order_history.vue b/src/routes/retailer/boxed_order_history.vue
index e98210a..db599a7 100644
--- a/src/routes/retailer/boxed_order_history.vue
+++ b/src/routes/retailer/boxed_order_history.vue
@@ -13,11 +13,11 @@
         <v-col cols="12" sm="12" md="12" lg="12">
           <v-text-field
             label="Order Number"
-            persistent-hint
-            outlined
+            color="primary"
+            variant="outlined"
             hide-details
             v-model="orderNumber"
-            dense
+            density="compact"
           ></v-text-field>
         </v-col>
         <v-col cols="12" sm="12" md="6" lg="5"> 
@@ -29,16 +29,16 @@
             offset-y
             min-width="auto"
           >
-            <template v-slot:activator="{ on, attrs }">
+            <template v-slot:activator="{ on, props }">
               <v-text-field
                 v-model="dateAtFormatted"
                 label="Created From"
-                persistent-hint
-                outlined
+                variant="outlined"
+                density="compact"
+                 color="primary"
                 hide-details
-                dense
                 readonly
-                v-bind="attrs"
+                 v-bind="props"
                 v-on="on"
               ></v-text-field>
             </template>
@@ -49,7 +49,7 @@
           </v-menu>
         </v-col>
 
-        <div class="pt-md-7">-</div>
+        <div class="pt-7">-</div>
 
         <v-col cols="12" sm="12" md="6" lg="5">
           <v-menu
@@ -60,17 +60,18 @@
             offset-y
             min-width="auto"
           >
-            <template v-slot:activator="{ on, attrs }">
+            <template v-slot:activator="{ on, props }">
               <v-text-field
-                v-model=" dateToFormatted"
+                v-model="dateToFormatted"
                 label="To"
-                persistent-hint
-                outlined
+                variant="outlined"
+                density="compact"
                 hide-details
-                dense
+                 color="primary"
                 readonly
-                v-bind="attrs"
+                  v-bind="props"
                 v-on="on"
+                type="date"
               
               ></v-text-field>
             </template>
@@ -90,12 +91,15 @@
             v-model="purchaseOrderNumber"
           ></v-text-field>
         </v-col> -->
+          
+
         <v-col cols="12" sm="12" md="6" lg="3">
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{  isHovering, props  }">
             <v-btn
-              :class="hover ? 'white--text  warning' : 'warning--text'"
+              :class="isHovering ? 'text-white bg-warning  ' : 'text-warning warning'"
               class="width-250px"
-              outlined
+              variant="outlined"
+              v-bind="props"
               @click="reset"
             >
               Reset
@@ -103,11 +107,12 @@
           </v-hover>
         </v-col>
         <v-col cols="12" sm="12" md="6" lg="3">
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{ isHovering, props }">
             <v-btn
-              :class="hover ? 'white--text  warning' : 'warning--text'"
+            :class="isHovering ? 'text-white bg-warning  ' : 'text-warning warning'"
               class="width-250px"
-              outlined
+               v-bind="props"
+                  variant="outlined"
               @click.prevent="orderlistApi"
             >
               Search
@@ -115,15 +120,16 @@
           </v-hover>
         </v-col>
         <v-col cols="12" sm="12" md="6" lg="3">
-          <v-hover v-slot:default="{ hover }">
+          <v-hover v-slot:default="{  isHovering, props }">
             <router-link
               class="text-decoration-none"
               :to="{ name: 'CartProducts' }"
             >
               <v-btn
-                :class="hover ? 'white--text  primary' : 'primary--text'"
+               :class="isHovering ? 'text-white bg-primary ' : 'text-primary primary'"
+                   variant="outlined"
                 class="width-250px"
-                outlined
+                   v-bind="props"
               >
                 New Order
               </v-btn>
@@ -147,39 +153,38 @@
                 class="elevation-1 pt-5"
               >
                 <template v-slot:item.date="{ item }">
-                  <span>{{ isoStringToNormalDate(item.updatedAt) }}</span>
+                  <span>{{ isoStringToNormalDate(item.value.updatedAt) }}</span>
                 </template>
                 <template v-slot:item.order="{ item }">
-                  <span>{{ item.incrementId }}</span>
+                  <span>{{ item.value.incrementId }}</span>
                 </template>
                 
                 <template v-slot:item.salesrepname="{ item }">
                   <span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
                 </template>
                 <template v-slot:item.status="{ item }">
-                  <span>{{ item.status }}</span>
+                  <span>{{ item.value.status }}</span>
                 </template>
                 <template v-slot:item.POnumber="{ item }">
-                  <span>{{ item.payment.poNumber }}</span>
-                </template>
-                <template v-slot:item.action="{ item }">
-                  <v-hover v-slot:default="{ hover }">
-                    <router-link
-                      :class="
-                        hover ? 'content-link-hover-color' : 'secondary--text'
-                      "
-                      to
-                      @click.native="viewMyOrder(item.items[0].orderId)"
-                      class="
-                        ls-n009
-                        text-decoration-none
-                        body
-                        myorders-route-link
-                      "
-                      >View Order</router-link
-                    >
-                  </v-hover>
+                  <span>{{ item.value.payment.poNumber }}</span>
                 </template>
+                  
+                   <template v-slot:item.actions={item}>
+
+              <v-hover v-slot="{ isHovering, props }">
+                        <router-link
+                          :class="isHovering ? 'content-link-hover-color' : 'text-primary'"
+                          to
+                          :variant="isHovering?'outlined':''"
+                          v-bind="props"
+                          @click.stop="viewMyOrder(item.value.items[0].orderId)"
+                          class="ls-n009 text-decoration-none body myorders-route-link"
+                        >View Order</router-link>
+                      </v-hover>
+              
+            </template>
+
+                 
               </v-data-table>
             </v-col>
           </v-row>
@@ -206,12 +211,12 @@ export default {
    dateAtFormatted:"",
    dateToFormatted:"",
     headers: [
-      { text: "Date", value: "date" },
-      { text: "Order #", value: "order" },
-      { text: "Sales Rep Name", value: "salesrepname" },
-      { text: "Status", value: "status" },
-      { text: "PO Number", value: "POnumber" },
-      { text: "Action", value: "action" },
+      { title: "Date", key: "date" },
+      { title: "Order #", key: "order" },
+      { title: "Sales Rep Name", key: "salesrepname" },
+      { title: "Status", key: "status" },
+      { title: "PO Number", key: "POnumber" },
+      { title: "Action", key: "actions" },
     ],
   }),
   computed: {
diff --git a/yarn.lock b/yarn.lock
index 33bda4d..62a27b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3742,10 +3742,10 @@ vuetify-loader@^1.9.2:
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
-vuetify@^3.0.0-beta.11:
-  version "3.1.15"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.1.15.tgz#aacee61d81dcaaeabaae44f68172de142dadd274"
-  integrity sha512-uxB4UCrP+hFyJaoSsVObAGBRD73qq5ga7HULepzGoMeUWap2H99mcqmMdN/a/Yp4ODK3gT8EcUeph3EgEcsArQ==
+vuetify@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.2.4.tgz#e31e23305b23d2a08ccbb845e295ff07d4c1a71f"
+  integrity sha512-Lj3fXSTY/lLXpuzAM0n2B/9o7WKpHsqv2USanXyFVXbePsl9kx7XY4HPrMqTDEYRlY9AyMjF9ilTbkQ8IovPmQ==
 
 vuex-map-fields@^1.3.6:
   version "1.4.0"