diff --git a/hooks/AuthHooks/useLoginHook.ts b/hooks/AuthHooks/useLoginHook.ts
index 3e76ab2a..b835b797 100644
--- a/hooks/AuthHooks/useLoginHook.ts
+++ b/hooks/AuthHooks/useLoginHook.ts
@@ -39,6 +39,7 @@ const useLoginHook = () => {
         localStorage.setItem('isLoggedIn', 'true');
         localStorage.setItem('user', values.usr);
         localStorage.setItem('party_name', tokenData?.data?.full_name);
+        localStorage.setItem('user_role', JSON.stringify(tokenData?.data?.user_role));
 
         dispatch(storeToken(tokenData?.data));
         router.push('/');
diff --git a/hooks/CheckoutPageHook/useCheckout.ts b/hooks/CheckoutPageHook/useCheckout.ts
index 1fc1c9da..6a629570 100644
--- a/hooks/CheckoutPageHook/useCheckout.ts
+++ b/hooks/CheckoutPageHook/useCheckout.ts
@@ -97,6 +97,7 @@ const useCheckout = () => {
         setErrMessage('Failed to place order');
       } finally {
         setIsLoading(false);
+        localStorage.setItem('otp_verified', 'false');
       }
     }
   };
diff --git a/hooks/CustomerGroupHook/useCustomerGroupList.ts b/hooks/CustomerGroupHook/useCustomerGroupList.ts
new file mode 100644
index 00000000..cedecab1
--- /dev/null
+++ b/hooks/CustomerGroupHook/useCustomerGroupList.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { get_access_token } from '../../store/slices/auth/token-login-slice';
+import { CONSTANTS } from '../../services/config/app-config';
+import useHandleStateUpdate from '../GeneralHooks/handle-state-update-hook';
+import getCustomerGroupListAPI from '../../services/api/customer-group-list-apis/get-customer-group-list-api';
+
+const useCustomerGroupList = () => {
+  const { isLoading, setIsLoading, errorMessage, setErrMessage }: any = useHandleStateUpdate();
+  const { SUMMIT_APP_CONFIG }: any = CONSTANTS;
+  const [customerGroupList, setCustomerGroupList] = useState<any>({});
+  const tokenFromStore: any = useSelector(get_access_token);
+
+  const fetchCustomerGroupList: any = async () => {
+    let customerGroupList: any;
+    setIsLoading(true);
+
+    /**
+     * Fetches customer group list from the API using the given token.
+     *
+     * @async
+     * @function fetchCustomerGroupList
+     * @param {Object} SUMMIT_APP_CONFIG - The Summit API SDK object used to interact with the API.
+     * @param {string} token - The authentication token obtained from the store.
+     * @returns {Promise<void>} - Resolves when the API response is handled.
+     * @throws {Error} Throws an error if the API call fails.
+     */
+    try {
+      customerGroupList = await getCustomerGroupListAPI(SUMMIT_APP_CONFIG, tokenFromStore.token);
+      console.log('customerGroupList', customerGroupList);
+      if (customerGroupList?.status === 200 && customerGroupList?.data?.message?.msg === 'success') {
+        setCustomerGroupList(customerGroupList?.data?.message?.data);
+      } else {
+        setErrMessage(customerGroupList?.data?.message?.error);
+      }
+    } catch (error) {
+      setErrMessage(customerGroupList?.data?.message?.error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCustomerGroupList();
+  }, []);
+
+  return { customerGroupList, isLoading, errorMessage };
+};
+
+export default useCustomerGroupList;
diff --git a/hooks/WebsiteUserList/useWebsiteUserList.ts b/hooks/WebsiteUserList/useWebsiteUserList.ts
new file mode 100644
index 00000000..6ff2a405
--- /dev/null
+++ b/hooks/WebsiteUserList/useWebsiteUserList.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { get_access_token } from '../../store/slices/auth/token-login-slice';
+import { CONSTANTS } from '../../services/config/app-config';
+import useHandleStateUpdate from '../GeneralHooks/handle-state-update-hook';
+import getWebsiteUserListAPI from '../../services/api/user/get-website-user-list-api';
+
+const useWebsiteUserList = (type: any) => {
+  const { isLoading, setIsLoading, errorMessage, setErrMessage }: any = useHandleStateUpdate();
+  const { SUMMIT_APP_CONFIG }: any = CONSTANTS;
+  const [websiteUserList, setWebsiteUserList] = useState<any>({});
+  const tokenFromStore: any = useSelector(get_access_token);
+
+  const fetchuseWebsiteUserListList: any = async () => {
+    let websiteUserList: any;
+    setIsLoading(true);
+
+    /**
+     * Fetches user list from the API using the given token.
+     *
+     * @async
+     * @function fetchuseWebsiteUserListList
+     * @param {Object} SUMMIT_APP_CONFIG - The Summit API SDK object used to interact with the API.
+     * @param {string} token - The authentication token obtained from the store.
+     * @returns {Promise<void>} - Resolves when the API response is handled.
+     * @throws {Error} Throws an error if the API call fails.
+     */
+    try {
+      websiteUserList = await getWebsiteUserListAPI(SUMMIT_APP_CONFIG, type, tokenFromStore.token);
+      console.log('websiteUserList', websiteUserList);
+      if (websiteUserList?.status === 200 && websiteUserList?.data?.message?.msg === 'success') {
+        setWebsiteUserList(websiteUserList?.data?.message?.data);
+      } else {
+        setErrMessage(websiteUserList?.data?.message?.error);
+      }
+    } catch (error) {
+      setErrMessage(websiteUserList?.data?.message?.error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchuseWebsiteUserListList();
+  }, [type]);
+
+  return { websiteUserList, isLoading, errorMessage };
+};
+
+export default useWebsiteUserList;
diff --git a/package.json b/package.json
index 44dde76a..85263fb3 100644
--- a/package.json
+++ b/package.json
@@ -39,11 +39,13 @@
     "react-paginate": "^8.2.0",
     "react-redux": "^8.0.5",
     "react-select": "^5.10.1",
+    "react-select-search": "^4.1.8",
     "react-simple-star-rating": "^5.1.7",
     "react-social-login-buttons": "^4.1.0",
     "react-toastify": "^9.1.3",
     "reactjs-social-login": "^2.6.3",
     "redux-persist": "^6.0.0",
+    "swiper": "^11.2.6",
     "yup": "^1.3.3"
   },
   "devDependencies": {
diff --git a/services/api/customer-group-list-apis/get-customer-group-list-api.ts b/services/api/customer-group-list-apis/get-customer-group-list-api.ts
new file mode 100644
index 00000000..80aa00dd
--- /dev/null
+++ b/services/api/customer-group-list-apis/get-customer-group-list-api.ts
@@ -0,0 +1,27 @@
+import APP_CONFIG from '../../../interfaces/app-config-interface';
+import { executeGETAPI } from '../../../utils/http-methods';
+
+/**
+ * Fetches customer group list from the API using the given parameters.
+ *
+ * @async
+ * @function getCustomerGroupListAPI
+ * @param {string} appConfig - The configuration of the application.
+ * @param {string} token - The authentication token.
+ * @returns {Promise<any>} - The response from the API call.
+ * @throws {Error} Throws an error if the API call fails.
+ */
+const getCustomerGroupListAPI = async (appConfig: APP_CONFIG, token: any): Promise<any> => {
+  let additionalParams = {};
+  // Use executeGETAPI to handle GET Request logic
+  const response = await executeGETAPI(
+    appConfig,
+    'get-customer-group-list-api',
+    token,
+    additionalParams // Pass additional parameters if needed
+  );
+
+  return response;
+};
+
+export default getCustomerGroupListAPI;
diff --git a/services/api/product-listing-page-apis/get-all-filters-api.ts b/services/api/product-listing-page-apis/get-all-filters-api.ts
new file mode 100644
index 00000000..2a641098
--- /dev/null
+++ b/services/api/product-listing-page-apis/get-all-filters-api.ts
@@ -0,0 +1,17 @@
+import APP_CONFIG from '../../../interfaces/app-config-interface';
+import { executeGETAPI } from '../../../utils/http-methods';
+
+const fetchProductListingPageALLFilters = async (appConfig: APP_CONFIG, token: any) => {
+  const additionalParams = {}; // Add additional parameters if needed
+  // Use executeGETAPI to handle GET Request logic
+  const response = await executeGETAPI(
+    appConfig,
+    'get-product-listing-all-filters-api',
+    token,
+    additionalParams // Pass additional parameters if needed
+  );
+
+  return response;
+};
+
+export default fetchProductListingPageALLFilters;
diff --git a/services/api/product-listing-page-apis/get-product-list-api.ts b/services/api/product-listing-page-apis/get-product-list-api.ts
index 08c0a7ea..a1a835e8 100644
--- a/services/api/product-listing-page-apis/get-product-list-api.ts
+++ b/services/api/product-listing-page-apis/get-product-list-api.ts
@@ -16,12 +16,15 @@ const fetchProductListingFromAPI = async (appName: any, query: any, token: any)
   }
 
   const category: any = query.url_params.category;
+  const email: any = query.url_params.email || '';
 
   // Construct URL parameters
   const urlParams = Object.keys(query.url_params)
     .map((key) => {
       if (key === 'filter') {
         return `${key}={"${query.filterDoctype}":"${query.filterDocname}", "sections":${query.url_params.filter}}`;
+      } if (key === 'vehicle_filters') {
+        return `${key}={"${query.filterDoctype}":"${query.filterDocname}", "sections":${query.url_params.vehicle_filters}}`;
       } else {
         return `${key}=${encodeURIComponent(query.url_params[key])}`;
       }
@@ -53,6 +56,7 @@ const fetchProductListingFromAPI = async (appName: any, query: any, token: any)
     additionalParams = {
       ...additionalParams,
       category,
+      email
     };
     response = await executeGETAPI(appName, 'product-list-api', token, additionalParams);
   } else if (query.router_origin === 'catalog') {
diff --git a/services/api/user/get-website-user-list-api.ts b/services/api/user/get-website-user-list-api.ts
new file mode 100644
index 00000000..aee5e17e
--- /dev/null
+++ b/services/api/user/get-website-user-list-api.ts
@@ -0,0 +1,27 @@
+import APP_CONFIG from '../../../interfaces/app-config-interface';
+import { executeGETAPI } from '../../../utils/http-methods';
+
+/**
+ * Fetches website user list from the API using the given parameters.
+ *
+ * @async
+ * @function getWebsiteUserListAPI
+ * @param {string} appConfig - The configuration of the application.
+ * @param {string} token - The authentication token.
+ * @returns {Promise<any>} - The response from the API call.
+ * @throws {Error} Throws an error if the API call fails.
+ */
+const getWebsiteUserListAPI = async (appConfig: APP_CONFIG, type: any, token: any): Promise<any> => {
+  let additionalParams = { customer_group: type || '' };
+  // Use executeGETAPI to handle GET Request logic
+  const response = await executeGETAPI(
+    appConfig,
+    'get-website-user-list-api',
+    token,
+    additionalParams // Pass additional parameters if needed
+  );
+
+  return response;
+};
+
+export default getWebsiteUserListAPI;
diff --git a/store/root-reducer.ts b/store/root-reducer.ts
index 3446e431..d930ebc4 100644
--- a/store/root-reducer.ts
+++ b/store/root-reducer.ts
@@ -22,7 +22,7 @@ const appReducer = combineReducers({
   cart: cartLocalSlice,
   catalogSlice: catalogLocalSlice,
   quickOrder: quickOrderSlice,
-});
+  });
 
 const rootReducer = (state: any, action: any) => {
   if (action.type === resetStore.type) {
diff --git a/utils/api_sdk_registry.ts b/utils/api_sdk_registry.ts
index 8ba8403e..3be0cb72 100644
--- a/utils/api_sdk_registry.ts
+++ b/utils/api_sdk_registry.ts
@@ -58,6 +58,12 @@ const apiSdkRegistry: any = {
   'sitemap-api': { method: 'get_site_map', entity: 'seo' },
   'promotional-banner-api': { method: '', entity: '' },
   'blog-api': { method: 'get_blog_post_list', entity: 'blog_post' },
+  'get-product-listing-dropdown-filters-api': { method: 'get_vehicle_filters', entity: 'filter' },
+  'get-customer-group-list-api': { method: 'get_customer_group', entity: 'customer_group' },
+  'get-website-user-list-api': { method: 'get_website_user', entity: 'user' },
+  'get-mechanic-list-api': { method: 'get_mechanic', entity: 'user' },
+  'add-mechanic-to-user-api': { method: 'update_mechanic_in_customer', entity: 'user' },
+  'get-product-listing-all-filters-api': { method: 'get_filters_without_category', entity: 'filter' },
 };
 
 export default apiSdkRegistry;