diff --git a/assets/src/less/admin.less b/assets/src/less/admin.less
index c4514d2783..9135fdc0c1 100644
--- a/assets/src/less/admin.less
+++ b/assets/src/less/admin.less
@@ -103,7 +103,7 @@
                     cursor: context-menu;
                     top: 80px;
                     right: -10px;
-                    z-index: 1;
+                    z-index: 99999;
                     background-color: #fff;
                     padding: 20px;
                     border-radius: 3px;
diff --git a/assets/src/less/global-admin.less b/assets/src/less/global-admin.less
index fb339a6a5a..671fb44012 100644
--- a/assets/src/less/global-admin.less
+++ b/assets/src/less/global-admin.less
@@ -255,12 +255,23 @@
 
     @media only screen and (max-width: 375px) {
         .dokan-admin-notices {
+            .notice-content{
+                flex-direction: column;
+                align-items: start !important;
+                gap: 1rem;
+            }
             .dokan-notice-slides {
                 min-height: 245px;
 
                 .dokan-admin-notice {
+                    align-items: start;
+                    padding: 10px 20px;
                     .dokan-message {
-                        margin: 0 0 0 23px;
+                        div{
+                            max-height: 50px;
+                            overflow: auto;
+                        }
+                        margin: 0;
                     }
                 }
             }
@@ -276,21 +287,33 @@
 
     @media screen and (min-width: 376px) and (max-width: 576px) {
         .dokan-admin-notices {
+
+            .notice-content{
+                flex-direction: column;
+                align-items: start !important;
+                gap: 1rem;
+                height: 195px;
+            }
             .dokan-notice-slides {
                 min-height: 195px;
 
                 .dokan-admin-notice {
+                    align-items: start;
+                    padding: 10px  20px;
                     .dokan-message {
-                        margin: 0 0 0 23px;
+                        div{
+                            max-height: 50px;
+                            overflow: scroll;
+                        }
+                        margin: 0;
                     }
                 }
             }
 
             .slide-notice {
-                bottom: 0;
-                right: 10px;
+                right: 3rem;
                 padding: 3px 8px;
-                top: unset;
+                top: 2rem;
             }
         }
     }
diff --git a/includes/Admin/Settings.php b/includes/Admin/Settings.php
index 5ddaef5b95..c60ec94825 100644
--- a/includes/Admin/Settings.php
+++ b/includes/Admin/Settings.php
@@ -835,7 +835,7 @@ public function get_settings_fields() {
                     'type'                 => 'social',
                     'desc'                 => sprintf(
                     /* translators: 1) Opening anchor tag, 2) Closing anchor tag, 3) Opening anchor tag, 4) Closing anchor tag */
-                        __( '%1$sreCAPTCHA%2$s credentials required to enable invisible captcha for contact forms. %3$sGet Help%4$s', 'dokan-lite' ),
+                        __( '%1$sreCAPTCHA_v3%2$s credentials required to enable invisible captcha for contact forms. %3$sGet Help%4$s', 'dokan-lite' ),
                         '<a href="https://developers.google.com/recaptcha/docs/v3" target="_blank" rel="noopener noreferrer">',
                         '</a>',
                         '<a href="https://wedevs.com/docs/dokan/settings/dokan-recaptacha-v3-integration" target="_blank" rel="noopener noreferrer">',
diff --git a/src/admin/components/AdminNotice.vue b/src/admin/components/AdminNotice.vue
index 88fce3fee8..0859c3bdd9 100644
--- a/src/admin/components/AdminNotice.vue
+++ b/src/admin/components/AdminNotice.vue
@@ -13,10 +13,12 @@
                                 <h3 v-if="notice.title">{{ notice.title }}</h3>
                                 <div v-if="notice.description" v-html="notice.description"></div>
                                 <template v-if="notice.actions && notice.actions.length">
+                                    <div>
                                     <template v-for="action in notice.actions">
                                         <a v-if="action.action" class="dokan-btn" :class="[`dokan-btn-${action.type}`, action.class]" :target="action.target ? action.target : '_self'" :href="action.action">{{ action.text }}</a>
                                         <button :disabled="loading" v-else class="dokan-btn btn-dokan" :class="[`dokan-btn-${action.type}`, action.class]" @click="handleAction(action, index)">{{ loading || task_completed ? button_text : action.text }}</button>
                                     </template>
+                                    </div>
                                 </template>
                             </div>
 
diff --git a/src/admin/components/Settings/MobileSettingsList.vue b/src/admin/components/Settings/MobileSettingsList.vue
new file mode 100644
index 0000000000..7a45a6a5b5
--- /dev/null
+++ b/src/admin/components/Settings/MobileSettingsList.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div
+            v-if="isOpen"
+            class="fixed inset-0 bg-black bg-opacity-50 z-[999999]"
+            @click="$emit('close')"
+        ></div>
+
+        <!-- Drawer -->
+        <div
+            :class="[
+                'fixed top-0 left-0 h-full w-[85%] max-w-[320px] bg-white z-[1000000] transform transition-transform duration-300 ease-in-out',
+                isOpen ? 'translate-x-0' : '-translate-x-full'
+            ]"
+        >
+            <!-- Drawer Header -->
+            <div class="flex items-center justify-between px-4 md:pt-4 pt-8 border-b mt-8 mb-4">
+                <h2 class="text-lg font-bold m-0 p-0">{{ __('Settings Menu', 'dokan-lite') }}</h2>
+                <button
+                    class="bg-none border-0 p-1"
+                    @click="$emit('close')"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Settings List -->
+            <div class="overflow-y-auto h-full pb-4 box-border">
+                <template v-for="section in sections">
+                    <div
+                        :key="section.id"
+                        :class="[
+                            'flex items-center px-4 py-2 cursor-pointer border-b border-gray-100',
+                            { 'bg-blue-50 border-l-4 border-l-blue-500': currentTab === section.id }
+                        ]"
+                        @click="handleTabChange(section)"
+                    >
+                        <img
+                            :src="section.icon_url"
+                            :alt="section.settings_title"
+                            class="w-5 h-5 mr-3"
+                        />
+                        <div class="flex-1">
+                            <h3 class="text-sm font-semibold">{{ section.title }}</h3>
+                            <p class="text-xs text-gray-600">{{ section.description }}</p>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'MobileSettingsDrawer',
+
+    props: {
+        isOpen: {
+            type: Boolean,
+            required: true
+        },
+        sections: {
+            type: Array,
+            required: true
+        },
+        currentTab: {
+            type: String,
+            required: true
+        }
+    },
+
+    methods: {
+        handleTabChange(section) {
+            this.$emit('change-tab', section);
+            this.$emit('close');
+        }
+    },
+}
+</script>
diff --git a/src/admin/components/SettingsBanner.vue b/src/admin/components/SettingsBanner.vue
index 8d3f3b941e..8e9f43033e 100644
--- a/src/admin/components/SettingsBanner.vue
+++ b/src/admin/components/SettingsBanner.vue
@@ -35,13 +35,12 @@ export default {
         background: #fff;
         display: flex;
         align-items: flex-start;
-
+        flex-wrap: wrap;
         a {
             box-shadow: none;
             background: #FF5722;
             color: #fff;
             border-color: #FF5722;
-
             &:hover {
                 background: lighten(#FF5722, 5%);
             }
diff --git a/src/admin/pages/ChangeLog.vue b/src/admin/pages/ChangeLog.vue
index 12c9f316d9..645c2849df 100644
--- a/src/admin/pages/ChangeLog.vue
+++ b/src/admin/pages/ChangeLog.vue
@@ -321,7 +321,7 @@ ul {
         }
 
         .dokan-notice {
-            background: rgba(223, 0, 0, 0.05);
+            background: rgba(239, 234, 255, 1);
             margin: -15px -20px 0;
             padding: 15px 15px 0;
         }
diff --git a/src/admin/pages/Settings.vue b/src/admin/pages/Settings.vue
index 522f88d425..1c05a8368c 100644
--- a/src/admin/pages/Settings.vue
+++ b/src/admin/pages/Settings.vue
@@ -12,40 +12,131 @@
                 </button>
             </div>
 
-            <div class="dokan-settings-wrap" ref='settingsWrapper'>
-                <div class='flex d-xs:flex-col md:flex-row w-full'>
-                    <div class="nav-tab-wrapper d-xs:!pb-5 d-xs:!pt-5 d-xs:w-full md:w-[340px]">
-                        <div class='d-xs:flex justify-between md:hidden font-bold'>
-                            <p class='font-bold'>{{ __( 'Settings', 'dokan-lite' ) }}</p>
-                            <label v-if="screenWidth < 753" for='dokan-setting-show'><i :class="showMenu || screenWidth >= 753 ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i></label>
-                            <input v-if="screenWidth < 753" class='!hidden' id='dokan-setting-show' checked :value='showMenu' @click='() => showMenu = !showMenu' type='checkbox'>
-                        </div>
-                        <div class="nab-section md:block" :class="showMenu || screenWidth >= 753 ? 'd-xs:block' : 'd-xs:hidden'">
-                            <div class="search-box">
-                                <label for="dokan-admin-search" class="dashicons dashicons-search"></label>
-                                <input type="text" id="dokan-admin-search" class="dokan-admin-search-settings"
-                                       :placeholder="__( 'Search e.g. vendor', 'dokan-lite' )" v-model="searchText"
-                                       @input="searchInSettings" ref="searchInSettings" />
-                                <span
-                                    class="dashicons dashicons-no-alt"
-                                    @click.prevent="clearSearch"
-                                    v-if="'' !== searchText"
-                                ></span>
-                            </div>
-
-                            <template v-for="section in settingSections">
-                                <div :class="['nav-tab', currentTab === section.id ? 'nav-tab-active' : '']"
-                                     @click.prevent="changeTab(section)" :key="section.id">
-                                    <img :src="section.icon_url" :alt="section.settings_title"/>
-                                    <div class="nav-content">
-                                        <div class="nav-title">{{ section.title }}</div>
-                                        <div class="nav-description">{{ section.description }}</div>
+            <div class="dokan-settings-wrap " ref='settingsWrapper'>
+                <div class='flex d-xs:flex-col lg:flex-row w-full'>
+                    <div class="nav-tab-wrapper d-xs:!pb-5 d-xs:!pt-5 px-4 py-2 lg:overflow-hidden d-xs:w-full z-[500] lg:w-[340px]">
+                        <div class="nab-section block">
+                            <div class="flex gap-4 items-center">
+                                <!-- Mobile menu toggle button -->
+                                <button
+                                    class="d-xs:flex lg:hidden p-2.5 bg-white  dokan-settings-menu-toggle-btn
+                                     rounded-lg shadow-sm hover:bg-gray-50 transition-all duration-200 ease-in-out group outline-none "
+                                    @click="openMobileDrawer"
+                                >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 24 24"
+                                        width="24"
+                                        height="24"
+                                        class="group-hover:scale-110 transition-transform duration-200"
+                                    >
+                                        <path
+                                            stroke="#246EFE"
+                                            stroke-width="2.5"
+                                            stroke-linecap="round"
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                            class="group-hover:stroke-[#1b4fd1]"
+                                        />
+                                    </svg>
+                                    <span class="sr-only">{{ __('Toggle Settings Menu', 'dokan-lite') }}</span>
+                                </button>
+                                <template>
+                                    <div class="relative flex-1">
+                                        <!-- Search Box -->
+                                        <div class="search-section relative w-full mb-4">
+                                            <div class="search-box w-full bg-white rounded-lg border border-gray-200 flex items-center">
+                                                <label for="dokan-admin-search" class="dashicons dashicons-search "></label>
+                                                <input
+                                                    type="text"
+                                                    autocomplete="off"
+                                                    id="dokan-admin-search"
+                                                    class="w-full px-3 py-2 border-none focus:outline-none focus:ring-0 bg-transparent "
+                                                    :placeholder="__('Search e.g. vendor', 'dokan-lite')"
+                                                    v-model="searchText"
+                                                    @input="searchInSettings"
+                                                    ref="searchInSettings"
+                                                />
+                                                <span
+                                                    v-if="searchText !== ''"
+                                                    class="dashicons dashicons-no-alt mr-3 text-gray-400 cursor-pointer hover:text-gray-600"
+                                                    @click.prevent="clearSearch"
+                                                ></span>
+                                            </div>
+
+                                            <!-- Search Suggestions Dropdown -->
+                                            <div
+                                                v-if="searchText && settingSections.length > 0"
+                                                class="d-xs:absolute lg:hidden left-0 right-0 top-[calc(100%+4px)] bg-white border border-gray-200 rounded-lg shadow-lg divide-y divide-gray-100 max-h-[280px] overflow-y-auto z-50"
+                                            >
+                                                <div
+                                                    v-for="section in settingSections"
+                                                    :key="section.id"
+                                                    class="hover:bg-gray-50 transition-colors cursor-pointer"
+                                                    @click="handleSectionClick(section)"
+                                                >
+                                                    <div class="p-3">
+                                                        <div class="flex items-center gap-3">
+                                                            <img
+                                                                :src="section.icon_url"
+                                                                :alt="section.title"
+                                                                class="w-5 h-5"
+                                                            />
+                                                            <div class="flex-1 min-w-0">
+                                                                <div class="text-sm font-medium text-gray-900 truncate">
+                                                                    {{ section.title }}
+                                                                </div>
+                                                                <div class="text-xs text-gray-500 mt-0.5 line-clamp-1">
+                                                                    {{ section.description }}
+                                                                </div>
+                                                            </div>
+                                                            <svg
+                                                                class="w-4 h-4 text-gray-400 flex-shrink-0"
+                                                                fill="none"
+                                                                stroke="currentColor"
+                                                                viewBox="0 0 24 24"
+                                                            >
+                                                                <path
+                                                                    stroke-linecap="round"
+                                                                    stroke-linejoin="round"
+                                                                    stroke-width="2"
+                                                                    d="M9 5l7 7-7 7"
+                                                                />
+                                                            </svg>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                            </template>
+                                </template>
+                            </div>
+                            <!-- Mobile Settings List -->
+                            <transition name="slide">
+                                <MobileSettingsDrawer
+                                    :is-open="showMobileDrawer"
+                                    :sections="settingSections"
+                                    :current-tab="currentTab"
+                                    @close="closeMobileDrawer"
+                                    @change-tab="changeTab"
+                                />
+                            </transition>
+
+                           <div class="d-xs:hidden lg:block">
+                               <template  v-for="section in settingSections">
+                                   <div :class="['nav-tab', currentTab === section.id ? 'nav-tab-active' : '']"
+                                        @click.prevent="changeTab(section)" :key="section.id">
+                                       <img :src="section.icon_url" :alt="section.settings_title"/>
+                                       <div class="nav-content">
+                                           <div class="nav-title">{{ section.title }}</div>
+                                           <div class="nav-description">{{ section.description }}</div>
+                                       </div>
+                                   </div>
+                               </template>
+                           </div>
                         </div>
                     </div>
 
+
                 <div class="metabox-holder">
                     <fieldset class="settings-header" v-for="section in settingSections" v-if="currentTab === section.id">
                         <div class="settings-content">
@@ -111,18 +202,23 @@
 </template>
 
 <script>
+    import MobileSettingsList from "admin/components/Settings/MobileSettingsList.vue";
+
     let Loading     = dokan_get_lib('Loading');
     let AdminNotice = dokan_get_lib('AdminNotice');
 
     import Fields from "admin/components/Fields.vue"
     import SettingsBanner from "admin/components/SettingsBanner.vue";
     import UpgradeBanner from "admin/components/UpgradeBanner.vue";
+    import MobileSettingsDrawer from "admin/components/Settings/MobileSettingsList.vue";
 
     export default {
 
         name: 'Settings',
 
         components: {
+            MobileSettingsDrawer,
+            MobileSettingsList,
             Fields,
             Loading,
             SettingsBanner,
@@ -153,7 +249,10 @@
                 dokanAssetsUrl: dokan.urls.assetsUrl,
                 disableSubmit: false,
                 showMenu: false,
-                screenWidth: window.document.documentElement.clientWidth
+                screenWidth: window.document.documentElement.clientWidth,
+                showMobileDrawer: false,
+                showSuggestions :false
+
             }
         },
 
@@ -485,7 +584,7 @@
 
             clearSearch() {
                 this.searchText = '';
-
+                this.showSuggestions = false;
                 this.validateBlankSearch();
             },
 
@@ -519,6 +618,7 @@
                         // Search now with searchText.
                         this.doSearch( searchText );
                         this.awaitingSearch = false;
+                        this.showSuggestions= true;
                     }, 1000 );
                 }
 
@@ -595,7 +695,26 @@
 
             updateDocumentWidth() {
                 this.screenWidth = window.document.documentElement.clientWidth;
+            },
+            openMobileDrawer() {
+                this.showMobileDrawer = true;
+                // Clear search text when opening drawer
+                this.searchText = '';
+                const settingsWrap = document.querySelector('.dokan-settings-wrap');
+                settingsWrap.style.zIndex = 9999;
+                this.validateBlankSearch();
+            },
+
+            closeMobileDrawer() {
+                this.showMobileDrawer = false;
+                const settingsWrap = document.querySelector('.dokan-settings-wrap');
+                settingsWrap.style.zIndex = 1;
+            },
+            handleSectionClick(section) {
+                this.changeTab(section);
+                this.searchText = '';
             }
+
         },
 
         created() {
@@ -664,6 +783,7 @@
 </script>
 
 <style lang="less">
+
     .dokan-settings-wrap {
         border: 1px solid #c8d7e1;
         display: flex;
@@ -672,7 +792,9 @@
         background: #fff;
         padding-bottom: 100px;
         scroll-margin-top: 65px;
-
+        .dokan-settings-menu-toggle-btn {
+            border: 1px solid #e9e9ea;
+        }
         .loading{
             position: absolute;
             width: 100%;
@@ -691,9 +813,7 @@
         }
 
         div.nav-tab-wrapper {
-            width: 340px;
-            padding: 14px 16px 30px 24px;
-            overflow: hidden;
+            //width: 340px;
             background: #F9FAFB;
             box-sizing: border-box;
             margin-right: 12px;
@@ -990,7 +1110,43 @@
             grid-template-columns: repeat(2, 1fr);
         }
 
-        .search-box {
+        .search-section {
+            .search-box {
+                input {
+                    width: 100%;
+                    height: 48px;
+                    border: none;
+                    display: block;
+                    padding: 0 45px 0 0;
+                    background: transparent;
+                    font-weight: 400;
+                    font-family: Roboto, sans-serif;
+
+                    &:focus {
+                        outline: none;
+                        box-shadow: none;
+                        border-color: transparent;
+                    }
+                }
+
+                .dashicons {
+                    &.dashicons-search {
+                        font-size: 1.5rem;
+                    }
+
+                    &.dashicons-no-alt {
+                        cursor: pointer;
+                        position: absolute;
+                        right: 12px;
+                        top: 50%;
+                        transform: translateY(-50%);
+
+                        &:hover {
+                            color: #d43f3a;
+                        }
+                    }
+                }
+            }
             color: rgba(60, 60, 67, 0.6);
             filter: drop-shadow(0px 0.0869484px 0.260845px rgba(0, 0, 0, 0.1)) drop-shadow(0px 0.869484px 1.73897px rgba(0, 0, 0, 0.2));
             margin: 8px 0px 14px;
@@ -1014,7 +1170,7 @@
                 cursor: pointer;
                 color: #000;
                 font-size: 25px;
-                transform: translate( 0%, -60%);
+                transform: translate(0%, -60%);
                 &:hover {
                     color: #d43f3a;
                 }
@@ -1087,97 +1243,63 @@
         }
     }
 
-    @media only screen and (max-width: 430px) {
+
+
+    @media only screen and (max-width: 768px) {
         .dokan-settings-wrap {
             .nav-tab-wrapper {
-                width: 60%;
-                padding: 10px 12px 15px 12px;
-
                 .nav-tab {
-                    padding-left: 10px !important;
-
-                    img {
-                        margin: 3px 8px 0px 4px;
-                    }
-
                     .nav-content {
                         .nav-title {
-                            font-size: 7px;
+                            font-size: 10px;
                         }
 
                         .nav-description {
-                            font-size: 5px !important;
+                            font-size: 8px !important;
                         }
                     }
                 }
-
-                .nav-tab-active {
-                    &:before {
-                        width: 2px !important;
-                    }
-                }
             }
 
             .metabox-holder {
                 width: 100%;
-
+                padding: 0 !important;
                 .settings-header {
-                    display: block;
-
                     .settings-content {
-                        .settings-title,
-                        .settings-description {
+                        .settings-title {
                             padding-left: 0;
                         }
                     }
-
-                    .settings-document-button {
-                        text-align: left;
-                    }
                 }
             }
 
-            .search-box {
-                .dashicons.dashicons-search {
-                    margin-left: 10px;
-                }
-
-                .dokan-admin-search-settings {
-                    font-size: 10px;
-                }
+            .slide-enter-active, .slide-leave-active {
+                transition: transform 0.3s ease-out;
             }
-        }
-    }
-
-    @media only screen and (max-width: 768px) {
-        .dokan-settings-wrap {
-            .nav-tab-wrapper {
-                width: 35%;
-
-                .nav-tab {
-                    .nav-content {
-                        .nav-title {
-                            font-size: 10px;
-                        }
-
-                        .nav-description {
-                            font-size: 8px !important;
-                        }
-                    }
-                }
+            .slide-enter, .slide-leave-to {
+                transform: translateX(-100%);
             }
+            .dokan-settings-wrap {
+                    .nav-tab-wrapper {
+                        .mobile-settings-list {
+                            margin-top: 1rem;
+
+                            .setting-section {
+                                &.active {
+                                    border-left: 4px solid #246EFE;
+                                }
 
-            .metabox-holder {
-                width: 100%;
-
-                .settings-header {
-                    .settings-content {
-                        .settings-title {
-                            padding-left: 0;
+                                &:hover {
+                                    background-color: #f9fafb;
+                                }
+                            }
                         }
                     }
                 }
             }
         }
-    }
+
+
+
+
 </style>