diff --git a/package.json b/package.json
index a3dc872..fafb153 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     },
     "dependencies": {
         "@vuetify/vite-plugin": "^1.0.0-alpha.11",
+        "@mdi/font": "5.9.55",
         "core-js": "^3.8.3",
         "fuse.js": "^6.4.2",
         "js-base64": "^2.5.1",
@@ -44,6 +45,7 @@
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^4.1.0",
+        "vite-plugin-vuetify": "^1.0.2",
         "babel-eslint": "^10.0.3",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
@@ -54,7 +56,7 @@
         "vite-plugin-aws3": "^0.3.0",
         "vue-template-compiler": "^2.7.14",
         "vue-tsc": "^1.2.0",
-        "vuetify-loader": "^1.9.2"
+        "vuetify-loader": "^1.9.2" 
     },
     "eslintConfig": {
         "root": true,
diff --git a/src/App.vue b/src/App.vue
index c1e2161..5123716 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,5 +23,6 @@ export default {
  
 };
 </script>
+ <style src="./styles/_app.scss" lang="scss" /> 
 
 
diff --git a/src/plugins/vuetify/index.js b/src/plugins/vuetify/index.js
index e616aa4..00e1be8 100644
--- a/src/plugins/vuetify/index.js
+++ b/src/plugins/vuetify/index.js
@@ -1,15 +1,20 @@
-import { createVuetify } from 'vuetify'
-import { VDataTable } from 'vuetify/labs/VDataTable'
-import 'vuetify/styles'
+import { createVuetify } from "vuetify";
 
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+import { VDataTable } from 'vuetify/labs/VDataTable'
+import * as labs from 'vuetify/labs/components'
+import * as directives from 'vuetify/directives'
 import theme from './theme'
- import * as directives from 'vuetify/directives'
+
+// Vuetify
+
 export default createVuetify({
+  theme,
   ssr: true,
   directives,
-  
-  components: {
-    VDataTable,
-  },
-  theme
-})
+    components: {
+        VDataTable,
+        ...labs,
+      },
+});
diff --git a/src/routes/retailer/cart_products.vue b/src/routes/retailer/cart_products.vue
index 4379765..35caec0 100644
--- a/src/routes/retailer/cart_products.vue
+++ b/src/routes/retailer/cart_products.vue
@@ -17,28 +17,32 @@
     </v-overlay>
     <div v-show="!cartProductsProgress">
       <v-row
-        ><v-col cols="12" sm="12" md="12">
+        >
+        <v-col cols="12" sm="12" md="12">
           <v-col cols="12" sm="12" md="8">
-            <v-menu offset-y down allow-overflow>
-              <template v-slot:activator="{ on }">
+           
+            <v-menu location="bottom"   attach   >
+              <template v-slot:activator="{ props}">
                 <v-text-field
                   prepend-inner-icon="mdi-magnify"
                   placeholder="Enter Item, Name, Keyword"
                   v-model="searchData"
-                  v-on="on"
+                  
                   @input="searchProducts"
                   hide-details
+                   variant="underlined"
+                  color="primary"
+                  v-bind="props"
                 >
                 </v-text-field>
               </template>
-              <div>
-                <v-card tile flat v-if="searchData">
+                <v-card tile flat v-if="searchData" min-width="500">
                   <RetailerSearchProducts @actionClose="showSnackBarMessage" />
                 </v-card>
-                 <v-card  v-else>
+                 <v-card  v-else >
                    <div class="fontcolor-bordeaux pa-1">Please type  Item, Name, or Keyword to search</div>
                 </v-card>
-              </div>
+              
             </v-menu>
           </v-col>
         </v-col>
@@ -339,6 +343,7 @@ export default {
       });
     },
    async searchProducts() {
+    
       if (this.timeout) clearTimeout(this.timeout);
       this.timeout = setTimeout(() => {
         if (this.searchData) {
diff --git a/src/stores/retailer/catalog_browser.js b/src/stores/retailer/catalog_browser.js
index 96e5f37..8becb84 100644
--- a/src/stores/retailer/catalog_browser.js
+++ b/src/stores/retailer/catalog_browser.js
@@ -132,7 +132,7 @@ export const catalogBrowser = {
         /* eslint-disable no-alert, no-console ,  no-debugger */
 
         search:async ({ commit, state }, { fullCatalog, keywords, filters, pageNumber, pageSize, sortBy }) => {
-            
+             
               
             commit('inProgress', true)
             await new Promise((resolve) => setTimeout(resolve, 1000));
diff --git a/src/styles/_app.scss b/src/styles/_app.scss
new file mode 100644
index 0000000..cef1abb
--- /dev/null
+++ b/src/styles/_app.scss
@@ -0,0 +1,3 @@
+@import './custom_functions.scss';
+@import './overrides.scss';
+
diff --git a/src/styles/custom_functions.scss b/src/styles/custom_functions.scss
new file mode 100644
index 0000000..4488f22
--- /dev/null
+++ b/src/styles/custom_functions.scss
@@ -0,0 +1,11 @@
+@import 'vuetify/lib/styles/settings/_variables.scss';
+
+@mixin mq($mq-breakpoint) { 
+  @if map-has-key($grid-breakpoints, $mq-breakpoint) {
+    $mq-breakpoint: map-get($grid-breakpoints, $mq-breakpoint);
+  }
+  
+  @media screen and (min-width: #{$mq-breakpoint}) {
+    @content;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
new file mode 100644
index 0000000..d242273
--- /dev/null
+++ b/src/styles/overrides.scss
@@ -0,0 +1,436 @@
+.mdi:before,.mdi-set {
+    display: inline-block;
+    font: normal normal normal 24px/1 "Material Design Icons";
+    font-size: inherit;
+    text-rendering: auto;
+    line-height: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+@import './custom_functions.scss';
+@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');
+
+@font-face {
+    font-family: 'Whyte-Regular';
+    src: url('../assets/font/Whyte-Regular.woff2') format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Whyte-Book';
+    src: url('../assets/font/Whyte-Book.woff2') format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+.v-application {
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .whyte-regular-font {
+        font-family: 'Whyte-Regular', sans-serif;
+    }
+    .whyte-book-font {
+        font-family: 'Whyte-Book', sans-serif;
+    }
+    .body {
+        font-family: 'Whyte-Regular', sans-serif;
+    }
+    .body-font {
+        font-family: 'Whyte-Book', sans-serif;
+    }
+    .body-font1 {
+        font-family: 'PT Serif', serif;
+    }
+    .regular-font {
+        font-family: 'Whyte-Regular', sans-serif;
+    }
+    .whyteTmin10-font {
+        font-family: 'WhyteTmin10', sans-serif;
+    }
+    .whyteBookTmin10-font {
+        font-family: 'WhyteBookTmin10', sans-serif;
+    }
+    .ls-n01 {
+        letter-spacing: -0.1px;
+    }
+    .ls-n03 {
+        letter-spacing: -0.03px;
+    }
+    .ls-n009 {
+        letter-spacing: -0.09px;
+    }
+    // .ls-n10 {
+    //     letter-spacing: -1px !important;
+    // }
+    .ls-n008 {
+        letter-spacing: -0.08px;
+    }
+    .ls-0 {
+        letter-spacing: 0px;
+    }
+    .ls-n012 {
+        letter-spacing: -0.12px;
+    }
+    .ls-n015 {
+        letter-spacing: -0.15px;
+    }
+    .ls-n028 {
+        letter-spacing: -0.28px;
+    }
+    .ls-n016 {
+        letter-spacing: -0.16px;
+    }
+    .ls-n029 {
+        letter-spacing: -0.29px;
+    }
+    .primary-focus-button:hover,
+    .primary-focus-button:active,
+    .primary-focus-button:focus {
+        color: #fff !important;
+        background-color: #2850DA !important;
+    }
+    .primary-focus:hover,
+    .primary-focus:active,
+    .primary-focus:focus {
+        color: #2850DA !important;
+    }
+    .title-color-black {
+        color: #000000;
+    }
+    .transparent-background {
+        background: transparent !important;
+    }
+    .fontcolor-black-darken {
+        color: #1D1D1D!important;
+    }
+    .fontcolor-black-light {
+        color: #333333;
+    }
+    .fontcolor-grey-darken {
+        color: #666666;
+    }
+    .fontcolor-grey-shade8b {
+        color: #8b8b8b;
+    }
+    .fontcolor-mauve {
+        color: #E5DBFE;
+    }
+    .fontcolor-mauve-CCB7FF {
+        color: #CCB7FF;
+    }
+    .background-mauve-CCB7FF {
+        background-color: #CCB7FF;
+    }
+    .fontcolor-monarch {
+        color: #EB7525;
+    }
+    .fontcolor-lapis {
+        color: #2E5D86;
+    }
+    .fontcolor-bordeaux {
+        color: #C53C44;
+    }
+    .fontcolor-ecru {
+        color: #F5F3F2;
+    }
+    .fontcolor-404040 {
+        color: #404040;
+    }
+    .fontcolor-cloud {
+        color: #CEE4F2;
+    }
+    .background-ecru {
+        background-color: #F5F3F2;
+    }
+    .background-bordeaux {
+        background-color: #C53C44;
+    }
+    .background-lapis {
+        background-color: #2E5D86;
+    }
+    .background-mauve {
+        background-color: #E5DBFE;
+    }
+    .background-monarch {
+        background-color: #EB7525;
+    }
+    .background-cloud {
+        background-color: #CEE4F2;
+    }
+   
+    .fontsize-10 {
+        font-size: 0.625rem;
+    }
+    .fontsize-12 {
+        font-size: 0.75rem;
+    }
+    .fontsize-28 {
+        font-size: 1.75rem;
+    }
+    .fontsize-14 {
+        font-size: 0.875rem;
+    }
+    .fontsize-15 {
+        font-size: 0.970rem;
+    }
+    .fontsize-16 {
+        font-size: 1rem !important;
+    }
+    .fontsize-18 {
+        font-size: 1.125rem;
+    }
+    .fontsize-16pt {
+        font-size: 1.375rem;
+    }
+    .fontsize-50 {
+        font-size: 3.125rem;
+    }
+    .fontsize-70 {
+        font-size: 4.375rem;
+    }
+    .font-weight-400 {
+        font-weight: 400;
+    }
+    .font-weight-300 {
+        font-weight: 300;
+    }
+    .line-height-18 {
+        line-height: 1.125rem !important;
+    }
+    .line-height-18pt {
+        line-height: 1.5rem !important;
+    }
+    .line-height-20 {
+        line-height: 1.25rem !important;
+    }
+    .line-height-21 {
+        line-height: 1.3125rem !important;
+    }
+    .line-height-22 {
+        line-height: 1.375rem !important;
+    }
+    .line-height-36 {
+        line-height: 2.25rem !important;
+    }
+    .line-height-33 {
+        line-height: 2.0625rem !important;
+    }
+    .line-height-46 {
+        line-height: 2.875rem !important;
+    }
+    .line-height-54 {
+        line-height: 3.375rem !important;
+    }
+    .text-decoration-none {
+        text-decoration: none;
+    }
+    .word-break {
+        word-break: break-word!important;
+        overflow-wrap: break-word!important;
+    }
+    .content-link-hover-color {
+        color: #CCB7FF !important;
+    }
+    // custom css for vue-tel-input
+    .phonenumber-input-error-border {
+        &.vue-tel-input,
+        &.vue-tel-input:focus,
+        &.vue-tel-input:focus-within,
+        &.vue-tel-input:active {
+            border: 2px solid red !important;
+            border-radius: 4px !important;
+            box-shadow: unset !important;
+        }
+    }
+    .phonenumber-custom-input .vti__input {
+        height: 40px!important;
+    }
+    .phonenumber-custom-input.vue-tel-input {
+        border-radius: 4px !important;
+        border: thin solid rgba(0, 0, 0, 0.42) !important;
+    }
+    .phonenumber-custom-input {
+        &,
+        &:focus,
+        &:active,
+        &:focus-within {
+            border: 2px solid #2c05da !important;
+        }
+    }
+    .phonenumber-custom-input.vue-tel-input:focus-within {
+        box-shadow: unset !important;
+    }
+    .phonenumber-custom-input .vti__dropdown {
+        &:focus,
+        &:active,
+        &:focus-within {
+            border: unset !important;
+            outline: unset !important;
+        }
+    }
+    .opacity-1 {
+        opacity: 1;
+    }
+    .height-100 {
+        height: 100vh;
+    }
+    .height-130px{
+        height: 130px;
+    }
+    
+    // end vue-tel-input  css end
+    @include mq(xs) {
+        .h1 {
+            font-size: 2rem;
+            line-height: 2.25rem;
+        }
+        .h2 {
+            font-size: 1.625rem;
+            line-height: 1.875rem;
+        }
+        .h3 {
+            font-size: 1.375rem;
+            line-height: 1.75rem;
+        }
+        .h4 {
+            font-size: 1.125rem;
+            line-height: 1.375rem;
+        }
+        .body {
+            font-size: 1rem!important;
+            line-height: 1.5rem!important
+        }
+        .v-btn--outlined {
+            border: 1px solid !important;
+        }
+        .textfield-border.v-text-field>.v-input__control>.v-input__slot:before {
+            border-width: 1px 0 0 0 !important;
+        }
+    }
+    @include mq(sm) {
+        .h1 {
+            font-size: 2rem;
+            line-height: 2.25rem;
+        }
+        .h2 {
+            font-size: 1.625rem;
+            line-height: 1.875rem;
+        }
+        .h3 {
+            font-size: 1.375rem;
+            line-height: 1.75rem;
+        }
+        .h4 {
+            font-size: 1.125rem;
+            line-height: 1.375rem;
+        }
+        .body {
+            font-size: 1rem!important;
+            line-height: 1.5rem!important
+        }
+        .v-btn--outlined {
+            border: thin solid !important;
+        }
+        .textfield-border.v-text-field>.v-input__control>.v-input__slot:before {
+            border-width: thin 0 0 0 !important;
+        }
+    }
+    @include mq(md) {
+        .h1 {
+            font-size: 2.5rem;
+            line-height: 2.875rem;
+        }
+        .h2 {
+            font-size: 2rem;
+            line-height: 2.25rem;
+        }
+        .h3 {
+            font-size: 1.5rem;
+            line-height: 1.75rem;
+        }
+        .h4 {
+            font-size: 1.125rem;
+            line-height: 1.375rem;
+        }
+        .body {
+            font-size: 1rem!important;
+            line-height: 1.5rem!important
+        }
+    }
+    @include mq(lg) {
+        .h1 {
+            font-size: 3rem;
+            line-height: 3.375rem;
+        }
+        .h2 {
+            font-size: 2.25rem;
+            line-height: 2.5rem;
+        }
+        .h3 {
+            font-size: 1.75rem;
+            line-height: 2.25rem;
+        }
+        .h4 {
+            font-size: 1.125rem;
+            line-height: 1.375rem;
+        }
+        .body {
+            font-size: 1rem!important;
+            line-height: 1.5rem!important
+        }
+    }
+    @include mq(xl) {
+        .h1 {
+            font-size: 3rem;
+            line-height: 3.375rem;
+        }
+        .h2 {
+            font-size: 2.25rem;
+            line-height: 2.5rem;
+        }
+        .h3 {
+            font-size: 1.75rem;
+            line-height: 2.25rem;
+        }
+        .h4 {
+            font-size: 1.125rem;
+            line-height: 1.375rem;
+        }
+        .body {
+            font-size: 1rem!important;
+            line-height: 1.5rem!important
+        }
+    }
+    @supports (-webkit-overflow-scrolling: touch) {
+        /* CSS specific to iOS devices */
+        .ios-fill-height {
+            height: -webkit-fill-available;
+        }
+    }
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.button-background.v-btn:before {
+    background-color: transparent !important;
+}
+
+* {
+    text-transform: none !important;
+}
+
+.p-absolute {
+    position: absolute!important;
+}
+
+// .v-application{
+// 	font-family: 'Whyte-Regular'!important;
+// }
\ No newline at end of file
diff --git a/src/styles/variables1.scss b/src/styles/variables1.scss
new file mode 100644
index 0000000..724f8fa
--- /dev/null
+++ b/src/styles/variables1.scss
@@ -0,0 +1,5 @@
+// @import '~vuetify/src/styles/settings/_variables.scss';
+
+
+$body-font-family: 'Whyte-Regular', sans-serif !default;
+$body-font-family-book: 'Whyte-Book', sans-serif !default;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 9d0b5cb..33bda4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1956,6 +1956,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@mdi/font@5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.9.55.tgz#41acd50b88073ded7095fc3029d8712b6e12f38e"
+  integrity sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"