diff --git a/custom-products-catalog/template/.yarnrc.yml b/custom-products-catalog/template/.yarnrc.yml
new file mode 100644
index 0000000..3186f3f
--- /dev/null
+++ b/custom-products-catalog/template/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/custom-products-catalog/template/package.json.ejs b/custom-products-catalog/template/package.json.ejs
index 5642552..7a45983 100644
--- a/custom-products-catalog/template/package.json.ejs
+++ b/custom-products-catalog/template/package.json.ejs
@@ -5,12 +5,12 @@ to: package.json
   "name": "<%= packageName %>",
   "version": "1.0.0",
   "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
     "@wix/dashboard-react": "^1.0.4",
     "@wix/sdk-react": "^0.3.8",
     "@wix/design-system": "^1.0.0",
     "@wix/stores": "^1.0.120",
     "@wix/wix-ui-icons-common": "^3.0.34"
+    "@wix/patterns": "^1.3.0",
   },
   "devDependencies": {
     "@types/react": "^16.0.0",
diff --git a/custom-products-catalog/template/src/dashboard/components/create-product.tsx b/custom-products-catalog/template/src/dashboard/components/create-product.tsx
index 2fc18d3..fb8e993 100644
--- a/custom-products-catalog/template/src/dashboard/components/create-product.tsx
+++ b/custom-products-catalog/template/src/dashboard/components/create-product.tsx
@@ -1,20 +1,20 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  Button,
   Modal,
   CustomModalLayout,
   FormField,
   Input,
-  Loader,
 } from '@wix/design-system';
 import '@wix/design-system/styles.global.css';
-import * as Icons from '@wix/wix-ui-icons-common';
-import { useCreateProduct } from '../hooks/stores';
 
-export function CreateProduct() {
-  const createProduct = useCreateProduct();
+export function CreateProductModal({ showModal, onSave }: { showModal: boolean, onSave: (name: string) => void }) {
   const [productName, setProductName] = useState('');
-  const [shown, setShown] = useState(false);
+  const [shown, setShown] = useState(showModal);
+
+  useEffect(() => {
+    setShown(showModal);
+  }, [showModal])
+
 
   const toggleModal = () => {
     setShown(!shown);
@@ -22,39 +22,34 @@ export function CreateProduct() {
   };
 
   return (
-    <>
-      <Button prefixIcon={<Icons.Add />} onClick={toggleModal}>
-        Add Product
-      </Button>
-      <Modal
-        isOpen={shown}
-        onRequestClose={toggleModal}
-        shouldCloseOnOverlayClick
-        screen="desktop"
-      >
-        <CustomModalLayout
-          title="Create Product"
-          primaryButtonProps={{
-            disabled: createProduct.isLoading || !productName,
-            children: createProduct.isLoading ? <Loader size="tiny" /> : 'Save',
-          }}
-          primaryButtonOnClick={async () => {
-            await createProduct.mutateAsync({ product: { name: productName } });
-            toggleModal();
-          }}
-          secondaryButtonText="Cancel"
-          secondaryButtonOnClick={toggleModal}
-          onCloseButtonClick={toggleModal}
-          content={
-            <FormField label="Name">
-              <Input
-                value={productName}
-                onChange={(e) => setProductName(e.currentTarget.value)}
-              />
-            </FormField>
-          }
-        />
-      </Modal>
-    </>
+    <Modal
+      isOpen={shown}
+      onRequestClose={toggleModal}
+      shouldCloseOnOverlayClick
+      screen="desktop"
+    >
+      <CustomModalLayout
+        title="Create Product"
+        primaryButtonProps={{
+          disabled: !productName,
+          children: 'Save',
+        }}
+        primaryButtonOnClick={() => {
+          onSave(productName)
+          setProductName('')
+        }}
+        secondaryButtonText="Cancel"
+        secondaryButtonOnClick={toggleModal}
+        onCloseButtonClick={toggleModal}
+        content={
+          <FormField label="Name">
+            <Input
+              value={productName}
+              onChange={(e) => setProductName(e.currentTarget.value)}
+            />
+          </FormField>
+        }
+      />
+    </Modal>
   );
 }
diff --git a/custom-products-catalog/template/src/dashboard/hooks/stores.ts b/custom-products-catalog/template/src/dashboard/hooks/stores.ts
index a19f101..59e7647 100644
--- a/custom-products-catalog/template/src/dashboard/hooks/stores.ts
+++ b/custom-products-catalog/template/src/dashboard/hooks/stores.ts
@@ -1,89 +1,59 @@
 import { products } from '@wix/stores';
 import { useWixModules } from '@wix/sdk-react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useDashboard } from '@wix/dashboard-react';
+import { useCallback } from 'react';
+import { CollectionOptimisticActions } from '@wix/patterns';
 
-export function useProductsQuery() {
-  const { queryProducts } = useWixModules(products);
-  return useQuery({
-    queryKey: ['products'],
-    refetchOnWindowFocus: false,
-    queryFn: async () => {
-      const { items } = await queryProducts().descending('lastUpdated').find();
-      return items;
-    },
-  });
-}
+export function useCreateProduct(optimisticActions: CollectionOptimisticActions<products.Product, {}>) {
+  const {createProduct} = useWixModules(products);
 
-export function useCreateProduct() {
-  const queryClient = useQueryClient();
-  const { showToast } = useDashboard();
-  const { createProduct } = useWixModules(products);
+  return useCallback((productName: string) => {
+    const newProduct: products.Product = {
+      _id: Date().toString(),
+      name: productName,
+      _createdDate: new Date(),
+      lastUpdated: new Date(),
+      productType: products.ProductType.physical,
+      description: 'New Product Description',
+      priceData: {
+        currency: 'USD',
+        price: 10,
+      },
+    };
+    optimisticActions.createOne(newProduct, {
+      submit: async (products: products.Product[]) => {
+        const createdProduct = products[0]
+        const response = await createProduct(createdProduct);
+        return response.product ? [response.product] : [];
+      },
+      successToast: {
+        message: `${newProduct.name} was successfully created`,
+        type: 'SUCCESS',
+      },
+      errorToast: () => 'Failed to create product',
+    })
+  }, [optimisticActions, createProduct]);
 
-  return useMutation({
-    mutationKey: ['createProduct'],
-    mutationFn: (createProductRequest?: products.CreateProductRequest) => {
-      return createProduct({
-        name: 'New Product',
-        description: 'New Product Description',
-        priceData: {
-          currency: 'USD',
-          price: 10,
-        },
-        productType: products.ProductType.physical,
-        ...createProductRequest?.product,
-      });
-    },
-    onError: () =>
-      showToast({ message: 'Failed to create product', type: 'error' }),
-    onSuccess: ({ product }) => {
-      queryClient.setQueryData<products.Product[]>(
-        ['products'],
-        (oldProducts = []) =>
-          product ? [product, ...oldProducts] : oldProducts
-      );
-      showToast({
-        message: 'Product created successfully',
-        type: 'success',
-      });
-    },
-  });
 }
 
-export function useDeleteProducts({
-  productIdsToDelete,
-  onSuccess,
-}: {
-  productIdsToDelete: Set<string>;
-  onSuccess?: () => void;
-}) {
-  const queryClient = useQueryClient();
-  const { showToast } = useDashboard();
+export function useDeleteProducts(optimisticActions: CollectionOptimisticActions<products.Product, {}>) {
   const { deleteProduct } = useWixModules(products);
 
-  return useMutation<products.DeleteProductResponse>({
-    mutationKey: ['deleteProducts'],
-    mutationFn: () =>
-      Promise.all(
-        [...productIdsToDelete].map((productId) => deleteProduct(productId))
+  return useCallback((productsToDelete: products.Product[] ) => {
+    optimisticActions.deleteMany(productsToDelete, {
+      submit: async (deletedProducts: products.Product[]) => (
+        await Promise.all(
+          deletedProducts.map((product) => deleteProduct(product._id!))
+        )
       ),
-    onError: () =>
-      showToast({ message: 'Failed to delete products', type: 'error' }),
-    onSuccess: () => {
-      queryClient.setQueryData<products.Product[]>(
-        ['products'],
-        (oldProducts = []) =>
-          oldProducts.filter(
-            (product: products.Product) => !productIdsToDelete.has(product._id!)
-          )
-      );
-      showToast({
+      successToast: {
         message: `${
-          productIdsToDelete.size > 1 ? 'Products' : 'Product'
+          productsToDelete.length > 1 ? 'Products' : 'Product'
         } deleted successfully`,
-        type: 'success',
-      });
-      onSuccess?.();
-    },
-  });
+        type: 'SUCCESS',
+      },
+      errorToast: () => `Failed to delete ${
+        productsToDelete.length > 1 ? 'Products' : 'Product'
+      }`,
+    });
+  }, [optimisticActions, deleteProduct]);
 }
diff --git a/custom-products-catalog/template/src/dashboard/pages/page.tsx b/custom-products-catalog/template/src/dashboard/pages/page.tsx
index 87c642f..3cf20b6 100644
--- a/custom-products-catalog/template/src/dashboard/pages/page.tsx
+++ b/custom-products-catalog/template/src/dashboard/pages/page.tsx
@@ -1,160 +1,283 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import {
-  Button,
-  Page,
-  Table,
   Box,
   Text,
-  TextButton,
-  Card,
-  TableToolbar,
   Image,
-  Checkbox,
-  Loader,
-  EmptyState,
+  Breadcrumbs
 } from '@wix/design-system';
 import '@wix/design-system/styles.global.css';
-import * as Icons from '@wix/wix-ui-icons-common';
-import type { products } from '@wix/stores';
+import { products } from '@wix/stores';
 import { withProviders } from '../withProviders';
-import { useDeleteProducts, useProductsQuery } from '../hooks/stores';
-import { CreateProduct } from '../components/create-product';
-import EmptyStateServerError from '../svg/EmptyState_ServerError.svg';
+import { useCreateProduct, useDeleteProducts } from '../hooks/stores';
+import { CreateProductModal } from '../components/create-product';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  useTableCollection,
+  Table,
+  PrimaryPageButton,
+  useOptimisticActions,
+  deleteSecondaryAction,
+  MultiBulkActionToolbar,
+  CustomColumns,
+  Filter,
+  CollectionToolbarFilters,
+  dateRangeFilter,
+  RangeItem,
+  DateRangeFilter,
+  RadioGroupFilter,
+  stringsArrayFilter,
+} from '@wix/patterns'
+import { useWixModules } from '@wix/sdk-react';
+
+type TableFilters = {
+  productType: Filter<products.ProductType[]>;
+  lastUpdated: Filter<RangeItem<Date>>;
+}
+
+type SupportedQueryFields = Parameters<products.ProductsQueryBuilder['ascending']>[0] | Parameters<products.ProductsQueryBuilder['descending']>[0]
+
+const productTypeToDisplayName: {[key in products.ProductType] : string | undefined} = {
+  [products.ProductType.physical]: 'Physical',
+  [products.ProductType.digital]: 'Digital',
+  [products.ProductType.unspecified_product_type]: undefined
+}
 
 function Products() {
-  const [productIdsToDelete, setProductIdsToDelete] = useState<Set<string>>(
-    new Set()
-  );
-  const products = useProductsQuery();
+  const [shown, setShown] = useState(false);
+  const { queryProducts, deleteProduct } = useWixModules(products);
+  const tableState = useTableCollection<products.Product, TableFilters>({
+    queryName: 'products-catalog',
+    itemKey: (product: products.Product) => product._id!,
+    itemName: (contact: products.Product) => contact.name!,
+    limit: 20,
+    fetchData: (query) => {
+      const { limit, offset, search, sort, filters } = query;
+      let queryBuilder = queryProducts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith("name", search)
+      }
+
+      if (filters) {
+        const { productType, lastUpdated } = filters
+
+        if (productType) {
+          queryBuilder = queryBuilder.in('productType', productType)
+        }
 
-  const deleteProducts = useDeleteProducts({
-    productIdsToDelete,
-    onSuccess: () => setProductIdsToDelete(new Set()),
+        if (lastUpdated) {
+          if (lastUpdated.from) {
+            queryBuilder = queryBuilder
+            .gt('lastUpdated', lastUpdated.from)  
+          }
+
+          if (lastUpdated.to) {
+            queryBuilder = queryBuilder
+            .lt('lastUpdated', lastUpdated.to);
+          }
+        }
+      }
+
+      if (sort) {
+        sort.forEach(s => {
+          const fieldName = s.fieldName as SupportedQueryFields;
+          if (s.order === 'asc') {
+            queryBuilder = queryBuilder.ascending(fieldName);
+          } else if (s.order === 'desc') {
+            queryBuilder = queryBuilder.descending(fieldName);
+          }
+        });
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => {
+        return {
+          items,
+          total,
+        };
+      });
+    },
+    fetchErrorMessage: () => 'Error fetching products',
+    filters: {
+      lastUpdated: dateRangeFilter(),
+      productType: stringsArrayFilter({ itemName: (p) => productTypeToDisplayName[p] ?? p })
+    },
   });
 
-  const addProductToDelete = async (productId: string) => {
-    if (productIdsToDelete.has(productId)) {
-      productIdsToDelete.delete(productId);
-      setProductIdsToDelete(new Set(productIdsToDelete));
-    } else {
-      productIdsToDelete.add(productId);
-      setProductIdsToDelete(new Set(productIdsToDelete));
-    }
-  };
-
-  const columns = useMemo(
-    () => [
-      {
-        title: '',
-        width: '20px',
-        render: (row: products.Product) => (
-          <Box align="center">
-            <Checkbox
-              checked={productIdsToDelete.has(row._id!)}
-              onChange={() => addProductToDelete(row._id!)}
-            />
-          </Box>
-        ),
-      },
-      {
-        title: '',
-        width: '72px',
-        render: (row: products.Product) => (
-          <Image src={row.media?.mainMedia?.image?.url} />
-        ),
-      },
-      {
-        title: 'Name',
-        render: (row: products.Product) => (
-          <Box direction="vertical" gap="3px">
-            <Text size="medium" weight="normal">
-              {row.name}
-            </Text>
-            <Text size="tiny" weight="thin" secondary>
-              {row.description}
-            </Text>
-          </Box>
-        ),
-        width: '40%',
-      },
-      {
-        title: 'Price',
-        render: (row: products.Product) => `$${row.priceData?.price}`,
-        width: '15%',
-      },
-      {
-        title: 'Type',
-        render: (row: products.Product) => row.productType,
-        width: '15%',
-      },
-    ],
-    [productIdsToDelete, addProductToDelete]
-  );
+  const optimisticActions = useOptimisticActions(tableState.collection, {
+    orderBy: () => [],
+    predicate: ({ search, filters }) => {
+      return (product) => {
+        if (search && !product.name?.startsWith(search)) {
+          return false;
+        }
+
+        if (filters.productType && product.productType && filters.productType.indexOf(product.productType) === -1) {
+          return false;
+        }
+
+        if (filters.lastUpdated && product.lastUpdated) {
+          const from = filters.lastUpdated.from
+          const to = filters.lastUpdated.to
+          const productLastUpdated = (new Date(product.lastUpdated)).getTime()
+
+          if (from && productLastUpdated < from.getTime()) {
+            return false
+          }
+        
+          if (to && productLastUpdated > to.getTime()) {
+            return false
+          }
+        }
+
+        return true;
+      }
+    },
+  });
+
+  const createProduct = useCreateProduct(optimisticActions);
+  const deleteProducts = useDeleteProducts(optimisticActions);
 
   return (
-    <Page height="100vh">
-      <Page.Header
-        title="Products"
-        actionsBar={products.isSuccess && <CreateProduct />}
+    <CollectionPage height="100vh">
+      <CollectionPage.Header
+        title={{ text: 'Products' }}
+        breadcrumbs={
+          <Breadcrumbs
+            activeId="2"
+            items={[
+              { id: '1', value: 'Apps', disabled: true },
+              { id: '2', value: 'Products' },
+            ]}
+          />
+        }
+        primaryAction={
+          <PrimaryPageButton
+            text="Add Product"
+            onClick={() => setShown(!shown)}
+          />
+        }
       />
-      <Page.Content>
-        {products.isLoading ? (
-          <Box align="center" verticalAlign="middle" height="50vh">
-            <Loader text="Loading..." />
-          </Box>
-        ) : products.isError ? (
-          <EmptyState
-            theme="page-no-border"
-            image={
-              <Image width="120px" src={EmptyStateServerError} transparent />
+      <CollectionPage.Content>
+        <CreateProductModal showModal={shown} onSave={(productName: string) => {
+          createProduct(productName)
+          setShown(false)
+        }}/>
+        <Table
+          state={tableState}
+          maxSelection={20}
+          filters={
+            <CollectionToolbarFilters>
+              <RadioGroupFilter
+                accordionItemProps={{ label: 'Type' }}
+                filter={tableState.collection.filters.productType}
+                data={[products.ProductType.physical, products.ProductType.digital]}
+              />
+              <DateRangeFilter
+                filter={tableState.collection.filters.lastUpdated}
+                accordionItemProps={{ label: 'Last Updated' }}
+              />
+            </CollectionToolbarFilters>
+          }
+          bulkActionToolbar={({ selectedValues, openConfirmModal }) => {
+            const disabled = selectedValues.length > 20;
+            return (
+              <MultiBulkActionToolbar
+                primaryActionItems={[
+                  {
+                    label: 'Delete',
+                    tooltip: disabled
+                      ? 'Deleting is supported for up to 20 items'
+                      : undefined,
+                    disabled,
+                    onClick: () => {
+                      openConfirmModal({
+                        theme: 'destructive',
+                        primaryButtonOnClick: () => {
+                          deleteProducts(selectedValues)
+                        },
+                      });
+                    },
+                  },
+                ]}
+              />)
+          }}
+          customColumns={<CustomColumns />}
+          columns={[
+            {
+              id: 'avatar',
+              name: 'Avatar',
+              title: '',
+              width: '72px',
+              render: (product) => <Image src={product.media?.mainMedia?.image?.url}/>,
+              reorderDisabled: true,
+              hiddenFromCustomColumnsSelection: true
+            },
+            {
+              id: 'name',
+              title: 'Product / Description',
+              render: (row: products.Product) => (
+                <Box direction="vertical" gap="3px">
+                  <Text size="medium" weight="normal">
+                    {row.name}
+                  </Text>
+                  <Text size="tiny" weight="thin" secondary>
+                    {row.description}
+                  </Text>
+                </Box>
+              ),
+              width: 'auto',
+              reorderDisabled: true,
+              hideable: false
+            },
+            {
+              id: 'price',
+              title: 'Price',
+              render: (row: products.Product) => `$${row.priceData?.price}`,
+              width: '100px',
+              sortable: true,
+            },
+            {
+              id: 'type',
+              title: 'Type',
+              render: (row: products.Product) => {
+                if (!row.productType) {
+                  return ''
+                }
+
+                return productTypeToDisplayName[row.productType] ?? row.productType
+              },
+              width: '100px',
+            },
+            {
+              id: 'last-updated',
+              title: 'Last Updated',
+              render: (row: products.Product) => row.lastUpdated,
+              width: '200px',
+              defaultHidden: true,
+            },
+          ]}
+          actionCell={(_product, _index, actionCellAPI) => ({
+              secondaryActions: [
+                deleteSecondaryAction({
+                  optimisticActions,
+                  actionCellAPI,
+                  submit: (products: products.Product[]) => (
+                    Promise.all(
+                      products.map((product: products.Product) => deleteProduct(product._id!))
+                    )
+                  ),
+                  successToast: {
+                    message: `${_product.name} deleted successfully.`,
+                    type: 'SUCCESS',
+                  },
+                  errorToast: () => 'Product deletion failed.',
+                }),
+              ]
             }
-            title="We couldn't load this page"
-            // You likely didn't added required permissions or installed stores app in your site, please check the template documentation for more information.
-            subtitle={"Looks like there was a technical issue"}
-          >
-            <TextButton
-              onClick={() => products.refetch()}
-              prefixIcon={<Icons.Refresh />}
-            >
-              Try Again
-            </TextButton>
-          </EmptyState>
-        ) : (
-          <Table data={products.data || []} columns={columns}>
-            <Page.Sticky>
-              <Card>
-                <TableToolbar>
-                  <TableToolbar.ItemGroup position="start">
-                    <TableToolbar.Item>
-                      <TableToolbar.Label>
-                        {productIdsToDelete.size > 0
-                          ? `${productIdsToDelete.size}/${products.data?.length} selected`
-                          : `${products.data?.length || 0} products`}
-                      </TableToolbar.Label>
-                    </TableToolbar.Item>
-                  </TableToolbar.ItemGroup>
-                  {productIdsToDelete.size > 0 && (
-                    <TableToolbar.ItemGroup position="end">
-                      <TableToolbar.Item>
-                        <Button
-                          skin="destructive"
-                          prefixIcon={<Icons.DeleteSmall />}
-                          onClick={() => deleteProducts.mutate()}
-                        >
-                          Delete
-                        </Button>
-                      </TableToolbar.Item>
-                    </TableToolbar.ItemGroup>
-                  )}
-                </TableToolbar>
-                <Table.Titlebar />
-              </Card>
-            </Page.Sticky>
-            <Table.Content titleBarVisible={false} />
-          </Table>
-        )}
-      </Page.Content>
-    </Page>
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
   );
 }
 
diff --git a/custom-products-catalog/template/src/dashboard/svg/EmptyState_ServerError.svg b/custom-products-catalog/template/src/dashboard/svg/EmptyState_ServerError.svg
deleted file mode 100644
index ab26ffc..0000000
--- a/custom-products-catalog/template/src/dashboard/svg/EmptyState_ServerError.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_6_15)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M44.658 96.497H9.93802L6.96802 68.917L17.368 80.437L18.028 59.777L25.558 79.397L32.098 55.707L44.658 96.497Z" fill="#192C55"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M71.561 96.4999L73.51 92.5319C75.0013 89.409 77.3353 86.7647 80.2488 84.8971C83.1624 83.0295 86.5397 82.0129 90 81.9619C93.8917 81.9556 97.6665 83.2913 100.688 85.7439L113.943 96.4999H71.561Z" fill="#28BF9A"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M83.558 89.9971L82.364 89.4101L83.228 88.9971L78.018 72.9971L68.06 65.6071L72.478 55.9971L67.268 39.9971L59.998 36.9971L48.598 39.9971L42.828 55.9971L45.574 67.6891L36.688 72.9971L30.558 89.9971H24.548L24.448 95.9971H89.448L89.548 89.9971H83.558Z" fill="#FFD527"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M117 96V97H3V96H117ZM83.228 89L83.558 90H56V89H83.228Z" fill="#192C55"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M67.263 40H48.593L54.723 23H61.723L67.263 40ZM72.478 56L78.018 73H36.688L42.828 56H72.478Z" fill="#FCA760"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_6_15">
-            <rect width="120" height="120" fill="white"/>
-        </clipPath>
-    </defs>
-</svg>
diff --git a/custom-products-catalog/template/src/dashboard/withProviders.tsx b/custom-products-catalog/template/src/dashboard/withProviders.tsx
index f585430..3e0de21 100644
--- a/custom-products-catalog/template/src/dashboard/withProviders.tsx
+++ b/custom-products-catalog/template/src/dashboard/withProviders.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { WixDesignSystemProvider } from '@wix/design-system';
 import { withDashboard } from '@wix/dashboard-react';
-
-const queryClient = new QueryClient();
+import { WixPatternsProvider } from '@wix/patterns/provider';
 
 export function withProviders<P extends {} = {}>(Component: React.FC<P>) {
   return withDashboard(function DashboardProviders(props: P) {
     return (
-      <WixDesignSystemProvider>
-        <QueryClientProvider client={queryClient}>
+      <WixDesignSystemProvider features={{ newColorsBranding: true }}>
+        <WixPatternsProvider>
           <Component {...props} />
-        </QueryClientProvider>
+        </WixPatternsProvider>
       </WixDesignSystemProvider>
     );
   });