diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js
index e912ed1100..32b7cb7c8a 100644
--- a/api-generator/components/dropdown.js
+++ b/api-generator/components/dropdown.js
@@ -65,6 +65,12 @@ const DropdownProps = [
         default: 'null',
         description: 'The template of items.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element.'
+    },
     {
         name: 'optionGroupTemplate',
         type: 'any',
@@ -337,6 +343,22 @@ const DropdownEvents = [
                 description: 'Browser event'
             }
         ]
+    },
+    {
+        name: 'onFilter',
+        description: 'Callback to invoke when the value is filtered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.filter',
+                type: 'any',
+                description: 'Value of the filter input'
+            }
+        ]
     }
 ];
 
diff --git a/api-generator/components/listbox.js b/api-generator/components/listbox.js
index dcee1612cf..5b0c2311e9 100644
--- a/api-generator/components/listbox.js
+++ b/api-generator/components/listbox.js
@@ -53,6 +53,12 @@ const ListBoxProps = [
         default: 'null',
         description: 'Custom template for the items.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'Custom template for the filter element.'
+    },
     {
         name: 'optionGroupTemplate',
         type: 'any',
diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
index 8e8901641d..2f0401e93e 100644
--- a/api-generator/components/multiselect.js
+++ b/api-generator/components/multiselect.js
@@ -185,6 +185,12 @@ const MultiSelectProps = [
         default: 'null',
         description: 'Function that gets the option and returns the content for it.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element.'
+    },
     {
         name: 'optionGroupTemplate',
         type: 'any',
diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js
index 66b18fcb03..667ae5c2ac 100644
--- a/api-generator/components/orderlist.js
+++ b/api-generator/components/orderlist.js
@@ -59,6 +59,42 @@ const OrderListProps = [
         default: 'null',
         description: 'Function that gets an item in the list and returns the content for it.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element.'
+    },
+    {
+        name: 'filter',
+        type: 'boolean',
+        default: 'false',
+        description: 'When specified, displays an input field to filter the items on keyup.'
+    },
+    {
+        name: 'filterBy',
+        type: 'string',
+        default: 'label',
+        description: 'When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.'
+    },
+    {
+        name: 'filterMatchMode',
+        type: 'string',
+        default: 'contains',
+        description: 'Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".'
+    },
+    {
+        name: 'filterPlaceholder',
+        type: 'string',
+        default: 'null',
+        description: 'Placeholder text to show when filter input is empty.'
+    },
+    {
+        name: 'filterLocale',
+        type: 'string',
+        default: 'undefined',
+        description: "Locale to use in filtering. The default locale is the host environment's current locale."
+    },
     {
         name: 'tabIndex',
         type: 'number',
@@ -83,13 +119,32 @@ const OrderListEvents = [
                 description: 'Reordered list'
             }
         ]
+    },
+    {
+        name: 'onFilter',
+        description: 'Callback to invoke when the value is filtered.',
+        arguments: [
+            {
+                name: 'event.originalEvent',
+                type: 'object',
+                description: 'Original event'
+            },
+            {
+                name: 'event.filter',
+                type: 'any',
+                description: 'Value of the filter input'
+            }
+        ]
     }
 ];
 
 const OrderListStyles = [
     { name: 'p-orderlist', description: 'Container element.' },
     { name: 'p-orderlist-list', description: 'List container.' },
-    { name: 'p-orderlist-item', description: 'An item in the list' }
+    { name: 'p-orderlist-item', description: 'An item in the list' },
+    { name: 'p-orderlist-filter-container', description: 'Container of filter input.' },
+    { name: 'p-orderlist-filter', description: 'Filter element.' },
+    { name: 'p-orderlist-filter-icon', description: 'Icon of the filter element.' },
 ];
 
 module.exports = {
diff --git a/api-generator/components/tree.js b/api-generator/components/tree.js
index 1eb36b38ac..bbfce0ff5e 100644
--- a/api-generator/components/tree.js
+++ b/api-generator/components/tree.js
@@ -131,6 +131,12 @@ const TreeProps = [
         default: 'null',
         description: 'Template of toggler element.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'Template of filter element.'
+    },
     {
         name: 'showHeader',
         type: 'boolean',
diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js
index ef69ddbf01..3fd3b7ec8b 100644
--- a/api-generator/components/treeselect.js
+++ b/api-generator/components/treeselect.js
@@ -137,6 +137,12 @@ const TreeSelectProps = [
         default: 'null',
         description: 'The template of footer.'
     },
+    {
+        name: 'filterTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of filter element'
+    },
     {
         name: 'transitionOptions',
         type: 'object',
diff --git a/components/doc/dropdown/index.js b/components/doc/dropdown/index.js
index 12be96bc8a..f091e12435 100644
--- a/components/doc/dropdown/index.js
+++ b/components/doc/dropdown/index.js
@@ -897,16 +897,19 @@ const cities = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content.</p>
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content. For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
 <CodeHighlight>
 {`
 <Dropdown value={selectedCountry} options={countries} onChange={(e) => setSelectedCountry(e.value)} optionLabel="name" placeholder="Select a Country"
-    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
+    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
 {`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = useRef();
+
 const selectedCountryTemplate = (option, props) => {
     if (option) {
         return (
@@ -932,6 +935,29 @@ const countryOptionTemplate = (option) => {
         </div>
     );
 }
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
 `}
 </CodeHighlight>
 
@@ -1101,6 +1127,12 @@ const groupedCities = [
                                     <td>null</td>
                                     <td>The template of items.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>optionGroupTemplate</td>
                                     <td>any</td>
@@ -1352,6 +1384,12 @@ const groupedCities = [
                                     <td>event: Browser event.</td>
                                     <td>Callback to invoke when the element loses focus.</td>
                                 </tr>
+                                <tr>
+                                    <td>onFilter</td>
+                                    <td>event.originalEvent: Original event <br />
+                                        event.filter: Value of the filter input</td>
+                                    <td>Callback to invoke when the value is filtered.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
diff --git a/components/doc/listbox/index.js b/components/doc/listbox/index.js
index c3fa4bb035..66d0ab8e43 100644
--- a/components/doc/listbox/index.js
+++ b/components/doc/listbox/index.js
@@ -516,19 +516,45 @@ const cities = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate property. Its value can be JSXElement, function or string.</p>
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> property. Its value can be JSXElement, function or string.  For custom filter support, define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
 
 <CodeHighlight>
 {`
-<ListBox value={city} options={cities} onChange={(e) => setCity(e.value)} itemTemplate={itemTemplate} />
+<ListBox value={city} options={cities} onChange={(e) => setCity(e.value)} itemTemplate={itemTemplate} filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
 {`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = React.useRef();
+
 itemTemplate(option) {
     // custom item content
 }
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex flex-column gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
 `}
 </CodeHighlight>
                     <h5>Filtering</h5>
@@ -704,6 +730,12 @@ const groupedCities = [
                                     <td>null</td>
                                     <td>Custom template for the items.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>Custom template for the filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>optionGroupTemplate</td>
                                     <td>any</td>
diff --git a/components/doc/multiselect/index.js b/components/doc/multiselect/index.js
index 981ad116ce..814d852198 100644
--- a/components/doc/multiselect/index.js
+++ b/components/doc/multiselect/index.js
@@ -830,19 +830,45 @@ const cities = [
 </CodeHighlight>
 
                     <h5>Custom Content</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option as a parameter and returns the content.</p>
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content. For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
 
 <CodeHighlight>
 {`
-<MultiSelect value={cities} options={citySelectItems} onChange={(e) => setCities(e.value)} itemTemplate={itemTemplate} />
+<MultiSelect value={cities} options={citySelectItems} onChange={(e) => setCities(e.value)} itemTemplate={itemTemplate} filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
 <CodeHighlight lang="js">
 {`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = useRef();
+
 itemTemplate(option) {
     // custom item content
 }
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
 `}
 </CodeHighlight>
                     <p><i>selectedItemTemplate</i> can be used to customize the selected values display instead of the default comma separated list.</p>
@@ -1188,6 +1214,12 @@ const groupedCities = [
                                     <td>null</td>
                                     <td>Function that gets the option and returns the content for it.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>optionGroupTemplate</td>
                                     <td>any</td>
diff --git a/components/doc/orderlist/index.js b/components/doc/orderlist/index.js
index 6336847dc5..a7294198c8 100644
--- a/components/doc/orderlist/index.js
+++ b/components/doc/orderlist/index.js
@@ -300,6 +300,59 @@ import { OrderList } from 'primereact/orderlist';
 {`
 <OrderList value={products} itemTemplate={itemTemplate} dragdrop onChange={(e) => setProducts(e.value)}></OrderList>
 `}
+</CodeHighlight>
+                    <h5>Filtering</h5>
+                    <p>Items can be filtered using an input field by enabling the <i>filter</i> property. By default filtering is done against
+                        label of the items and <i>filterBy</i> property is available to choose one or more properties of the options. In addition <i>filterMatchMode</i> can be utilized
+                        to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</p>
+
+<CodeHighlight>
+{`
+<OrderList value={products} filter filterBy="name" />
+`}
+</CodeHighlight>
+
+                    <h5>Custom Content</h5>
+                    <p>For custom content support define an <i>itemTemplate</i> function that gets the item instance as a parameter and returns the content. For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.</p>
+
+<CodeHighlight lang="js">
+{`
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = useRef();
+
+const itemTemplate = (item) => {
+    // custom content
+}
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
+`}
+</CodeHighlight>
+
+<CodeHighlight>
+{`
+<OrderList value={products} header="List of Products" dataKey="id" itemTemplate={itemTemplate} filter filterBy="name" filterTemplate={filterTemplate}></OrderList>
+`}
 </CodeHighlight>
 
                     <h5>Properties</h5>
@@ -374,6 +427,42 @@ import { OrderList } from 'primereact/orderlist';
                                     <td>null</td>
                                     <td>Function that gets an item in the list and returns the content for it.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of filter element.</td>
+                                </tr>
+                                <tr>
+                                    <td>filter</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>When specified, displays an input field to filter the items on keyup.</td>
+                                </tr>
+                                <tr>
+                                    <td>filterBy</td>
+                                    <td>string</td>
+                                    <td>label</td>
+                                    <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
+                                </tr>
+                                <tr>
+                                    <td>filterMatchMode</td>
+                                    <td>string</td>
+                                    <td>contains</td>
+                                    <td>Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</td>
+                                </tr>
+                                <tr>
+                                    <td>filterPlaceholder</td>
+                                    <td>string</td>
+                                    <td>null</td>
+                                    <td>Placeholder text to show when filter input is empty.</td>
+                                </tr>
+                                <tr>
+                                    <td>filterLocale</td>
+                                    <td>string</td>
+                                    <td>undefined</td>
+                                    <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
+                                </tr>
                                 <tr>
                                     <td>tabIndex</td>
                                     <td>number</td>
@@ -401,6 +490,32 @@ import { OrderList } from 'primereact/orderlist';
                                         event.value: Reordered list</td>
                                     <td>Callback to invoke when list is reordered.</td>
                                 </tr>
+                                <tr>
+                                    <td>onFilter</td>
+                                    <td>event.originalEvent: Original event <br />
+                                        event.filter: Value of the filter input</td>
+                                    <td>Callback to invoke when the value is filtered.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <h5>Methods</h5>
+                    <div className="doc-tablewrapper">
+                        <table className="doc-table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Parameters</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>resetFilter</td>
+                                    <td>-</td>
+                                    <td>Reset the options filter.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -428,6 +543,18 @@ import { OrderList } from 'primereact/orderlist';
                                     <td>p-orderlist-item</td>
                                     <td>An item in the list</td>
                                 </tr>
+                                <tr>
+                                    <td>p-orderlist-filter-container</td>
+                                    <td>Container of filter input.</td>
+                                </tr>
+                                <tr>
+                                    <td>p-orderlist-filter</td>
+                                    <td>Filter element.</td>
+                                </tr>
+                                <tr>
+                                    <td>p-orderlist-filter-icon</td>
+                                    <td>Filter icon.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
diff --git a/components/doc/tree/index.js b/components/doc/tree/index.js
index 4bf38a3177..670ce07705 100644
--- a/components/doc/tree/index.js
+++ b/components/doc/tree/index.js
@@ -570,16 +570,18 @@ export const TreeLazyDemo = () => {
 </CodeHighlight>
 
                     <h5>Templating</h5>
-                    <p><i>label</i> property of a node is used to display as the content by default. Templating is supported as well with the <i>nodeTemplate</i> callback that gets the node instance and returns JSX. Example
+                    <p><i>label</i> property of a node is used to display as the content by default. Templating is supported as well with the <i>nodeTemplate</i> callback that gets the node instance and returns JSX.  For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element. Example
         below is a sample tree based navigation of React docs.</p>
 <CodeHighlight lang="js">
 {`
-import React, { Component } from 'react';
+import React, { Component, useState, useRef } from 'react';
 import { Tree } from 'primereact/tree';
 
 export const TreeTemplatingDemo = () => {
 
     const [nodes, setNodes] = useState(createNavigation());
+    const [filterValue, setFilterValue] = useState('');
+    const filterInputRef = useRef();
 
     const createNavigation = () => {
         return [
@@ -620,8 +622,31 @@ export const TreeTemplatingDemo = () => {
         )
     }
 
+    const filterTemplate = (options) => {
+        let {filterOptions} = options;
+    
+        return (
+            <div className="flex gap-2">
+                <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+                <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+            </div>
+        )
+    }
+    
+    const myResetFunction = (options) => {
+        setFilterValue('');
+        options.reset();
+        filterInputRef && filterInputRef.current.focus()
+    }
+    
+    const myFilterFunction = (event, options) => {
+        let _filterValue = event.target.value;
+        setFilterValue(_filterValue);
+        options.filter(event);
+    }
+
     return (
-        <Tree value={nodes} nodeTemplate={nodeTemplate} />
+        <Tree value={nodes} nodeTemplate={nodeTemplate} filter filterTemplate={filterTemplate}/>
     )
 }
 `}
@@ -871,12 +896,24 @@ export const TreeContextMenuDemo = () => {
                                     <td>false</td>
                                     <td>Template of node element.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>Template of filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>togglerTemplate</td>
                                     <td>any</td>
                                     <td>null</td>
                                     <td>Template of toggler element.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>Template of filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>showHeader</td>
                                     <td>boolean</td>
diff --git a/components/doc/treeselect/index.js b/components/doc/treeselect/index.js
index 3cde90e763..6d61db1f7a 100644
--- a/components/doc/treeselect/index.js
+++ b/components/doc/treeselect/index.js
@@ -467,11 +467,47 @@ data() {
 </CodeHighlight>
 
                     <h5>Templating</h5>
-                    <p>Label of an option is used as the display text of an item by default, for custom content support define a <i>valueTemplate</i> that gets the selected nodes as a parameter.
+                    <p>Label of an option is used as the display text of an item by default, for custom content support define a <i>valueTemplate</i> that gets the selected nodes as a parameter. 
+                    For custom filter support define a <i>filterTemplate</i> function that gets the option instance as a parameter and returns the content for the filter element.
                     In addition <i>header</i>, <i>footer</i> and <i>emptyMessage</i> templates are provided for further customization.</p>
 <CodeHighlight>
 {`
-<TreeSelect value={selectedNodeKeys} options={nodes} onChange={(e) => setSelectedNodeKeys(e.value)} valueTemplate={<span>Custom Content</span>} placeholder="Select Items" />
+const [filterValue, setFilterValue] = useState('');
+const filterInputRef = useRef();
+
+const valueTemplate = () => {
+    return (
+        <span>Custom Content</span>
+    )
+}
+
+const filterTemplate = (options) => {
+    let {filterOptions} = options;
+
+    return (
+        <div className="flex gap-2">
+            <InputText value={filterValue} ref={filterInputRef} onChange={(e) => myFilterFunction(e, filterOptions)} />
+            <Button label="Reset" onClick={() => myResetFunction(filterOptions)} />
+        </div>
+    )
+}
+
+const myResetFunction = (options) => {
+    setFilterValue('');
+    options.reset();
+    filterInputRef && filterInputRef.current.focus()
+}
+
+const myFilterFunction = (event, options) => {
+    let _filterValue = event.target.value;
+    setFilterValue(_filterValue);
+    options.filter(event);
+}
+`}
+</CodeHighlight>
+<CodeHighlight>
+{`
+<TreeSelect value={selectedNodeKeys} options={nodes} onChange={(e) => setSelectedNodeKeys(e.value)} valueTemplate={valueTemplate} placeholder="Select Items" filter filterTemplate={filterTemplate}/>
 `}
 </CodeHighlight>
 
@@ -632,6 +668,12 @@ data() {
                                     <td>null</td>
                                     <td>The template of selected values.</td>
                                 </tr>
+                                <tr>
+                                    <td>filterTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template for filter element.</td>
+                                </tr>
                                 <tr>
                                     <td>panelHeaderTemplate</td>
                                     <td>any</td>
diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
index f04e1174a5..3c688eb9a6 100755
--- a/components/lib/dropdown/Dropdown.d.ts
+++ b/components/lib/dropdown/Dropdown.d.ts
@@ -10,6 +10,8 @@ type DropdownValueTemplateType = React.ReactNode | ((option: any, props: Dropdow
 
 type DropdownItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
 
+type DropdownFilterTemplateType = React.ReactNode | ((options: DropdownFilterOptions) => React.ReactNode);
+
 type DropdownEmptyMessageType = React.ReactNode | ((props: DropdownProps) => React.ReactNode);
 
 type DropdownEmptyFilterMessageType = React.ReactNode | ((props: DropdownProps) => React.ReactNode);
@@ -37,6 +39,11 @@ interface DropdownFilterParams {
     filter: string;
 }
 
+interface DropdownFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
 export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
@@ -50,6 +57,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     optionGroupChildren?: string;
     optionGroupTemplate?: DropdownOptionGroupTemplateType;
     valueTemplate?: DropdownValueTemplateType;
+    filterTemplate?: DropdownFilterTemplateType;
     itemTemplate?: DropdownItemTemplateType;
     style?: object;
     className?: string;
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 3eca0f66d8..24f8c1eb39 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -679,7 +679,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
                 {clearIcon}
                 {dropdownIcon}
                 <DropdownPanel ref={overlayRef} visibleOptions={visibleOptions} {...props} appendTo={appendTo} onClick={onPanelClick} onOptionClick={onOptionClick}
-                    filterValue={filterState} hasFilter={hasFilter} onFilterClearIconClick={onFilterClearIconClick} onFilterInputKeyDown={onFilterInputKeyDown} onFilterInputChange={onFilterInputChange}
+                    filterValue={filterState} hasFilter={hasFilter} onFilterClearIconClick={onFilterClearIconClick} resetFilter={resetFilter} onFilterInputKeyDown={onFilterInputKeyDown} onFilterInputChange={onFilterInputChange}
                     getOptionLabel={getOptionLabel} getOptionRenderKey={getOptionRenderKey} isOptionDisabled={isOptionDisabled}
                     getOptionGroupChildren={getOptionGroupChildren} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupRenderKey={getOptionGroupRenderKey}
                     isSelected={isSelected} getSelectedOptionIndex={getSelectedOptionIndex}
@@ -704,6 +704,7 @@ Dropdown.defaultProps = {
     optionGroupLabel: null,
     optionGroupChildren: null,
     optionGroupTemplate: null,
+    filterTemplate: null,
     valueTemplate: null,
     itemTemplate: null,
     style: null,
@@ -748,4 +749,4 @@ Dropdown.defaultProps = {
     onShow: null,
     onHide: null,
     onFilter: null
-}
+}
\ No newline at end of file
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index a812c96395..154d9a8aab 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { classNames, ObjectUtils, DomHandler } from '../utils/Utils';
 import { VirtualScroller } from '../virtualscroller/VirtualScroller';
 import { DropdownItem } from './DropdownItem';
 
@@ -10,6 +10,10 @@ export const DropdownPanel = React.memo(React.forwardRef((props, ref) => {
     const virtualScrollerRef = React.useRef(null);
     const filterInputRef = React.useRef(null);
     const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
+    const filterOptions = {
+        filter: (e) => onFilterInputChange(e),
+        reset: () => props.resetFilter()
+    };
 
     const onEnter = () => {
         props.onEnter(() => {
@@ -32,7 +36,6 @@ export const DropdownPanel = React.memo(React.forwardRef((props, ref) => {
 
     const onFilterInputChange = (event) => {
         virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
-
         props.onFilterInputChange && props.onFilterInputChange(event);
     }
 
@@ -111,14 +114,33 @@ export const DropdownPanel = React.memo(React.forwardRef((props, ref) => {
         if (props.filter) {
             const clearIcon = createFilterClearIcon();
             const containerClassName = classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon });
+            let content = (
+                <div className={containerClassName}>
+                    <input ref={filterInputRef} type="text" autoComplete="off" className="p-dropdown-filter p-inputtext p-component" placeholder={props.filterPlaceholder}
+                        onKeyDown={props.onFilterInputKeyDown} onChange={onFilterInputChange} value={props.filterValue} />
+                        {clearIcon}
+                    <i className="p-dropdown-filter-icon pi pi-search"></i>
+                </div>
+            )
+
+            if (props.filterTemplate) {
+                const defaultContentOptions = {
+                    className: containerClassName,
+                    element: content,
+                    filterOptions: filterOptions,
+                    filterInputKeyDown: props.onFilterInputKeyDown,
+                    filterInputChange: onFilterInputChange,
+                    filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+                    clearIcon: clearIcon,
+                    props,
+                };
+                
+                content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+            }
+
             return (
                 <div className="p-dropdown-header">
-                    <div className={containerClassName}>
-                        <input ref={filterInputRef} type="text" autoComplete="off" className="p-dropdown-filter p-inputtext p-component" placeholder={props.filterPlaceholder}
-                            onKeyDown={props.onFilterInputKeyDown} onChange={onFilterInputChange} value={props.filterValue} />
-                        {clearIcon}
-                        <i className="p-dropdown-filter-icon pi pi-search"></i>
-                    </div>
+                    {content}
                 </div>
             )
         }
diff --git a/components/lib/listbox/ListBox.d.ts b/components/lib/listbox/ListBox.d.ts
index 59c1b14012..8c547d8742 100755
--- a/components/lib/listbox/ListBox.d.ts
+++ b/components/lib/listbox/ListBox.d.ts
@@ -8,6 +8,8 @@ type ListBoxOptionGroupTemplateType = React.ReactNode | ((option: any, index: nu
 
 type ListBoxItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
 
+type ListBoxFilterTemplateType = React.ReactNode | ((options: ListBoxFilterOptions) => React.ReactNode);
+
 type ListBoxOptionDisabledType = string | ((option: any) => boolean);
 
 interface ListBoxChangeTargetOptions {
@@ -29,6 +31,11 @@ interface ListBoxFilterValueChangeParams {
     value: any;
 }
 
+interface ListBoxFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
 export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
     id?: string;
     value?: any;
@@ -40,6 +47,7 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
     optionGroupChildren?: string;
     optionGroupTemplate?: ListBoxOptionGroupTemplateType;
     itemTemplate?: ListBoxItemTemplateType;
+    filterTemplate?: ListBoxFilterTemplateType;
     style?: object;
     listStyle?: object;
     listClassName?: string;
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 768b1e0039..e7e907bf15 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -125,6 +125,11 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    const resetFilter = () => {
+        setFilterValueState('');
+        props.onFilter && props.onFilter({ filter: '' });
+    }
+
     const updateModel = (event, value) => {
         if (props.onChange) {
             props.onChange({
@@ -255,7 +260,7 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
     });
 
     const createHeader = () => {
-        return props.filter ? <ListBoxHeader filter={filteredValue} onFilter={onFilter} disabled={props.disabled} filterPlaceholder={props.filterPlaceholder} filterInputProps={props.filterInputProps} /> : null;
+        return props.filter ? <ListBoxHeader filter={filteredValue} onFilter={onFilter} resetFilter={resetFilter} filterTemplate={props.filterTemplate} disabled={props.disabled} filterPlaceholder={props.filterPlaceholder} filterInputProps={props.filterInputProps} /> : null;
     }
 
     const createGroupChildren = (optionGroup, style) => {
@@ -388,6 +393,7 @@ ListBox.defaultProps = {
     multiple: false,
     metaKeySelection: false,
     filter: false,
+    filterTemplate: null,
     filterBy: null,
     filterValue: null,
     filterMatchMode: 'contains',
diff --git a/components/lib/listbox/ListBoxHeader.js b/components/lib/listbox/ListBoxHeader.js
index 10d2cd1fd1..729413019f 100644
--- a/components/lib/listbox/ListBoxHeader.js
+++ b/components/lib/listbox/ListBoxHeader.js
@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { InputText } from '../inputtext/InputText';
+import { ObjectUtils } from '../utils/Utils';
 
 export const ListBoxHeader = React.memo((props) => {
+    const filterOptions = {
+        filter: (e) => onFilter(e),
+        reset: () => props.resetFilter()
+    };
 
     const onFilter = (event) => {
         if (props.onFilter) {
@@ -12,13 +17,41 @@ export const ListBoxHeader = React.memo((props) => {
         }
     }
 
-    return (
-        <div className="p-listbox-header">
+    const createHeader = () => {
+
+        let content = (
             <div className="p-listbox-filter-container">
                 <InputText type="text" value={props.filter} onChange={onFilter} className="p-listbox-filter" disabled={props.disabled} placeholder={props.filterPlaceholder} {...props.filterInputProps} />
                 <span className="p-listbox-filter-icon pi pi-search"></span>
             </div>
-        </div>
+        );
+
+        if (props.filterTemplate) {
+            const defaultContentOptions = {
+                className: 'p-listbox-filter-container',
+                element: content,
+                filterOptions: filterOptions,
+                filterInputChange: onFilter,
+                filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+                props,
+            };
+
+            content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+        } 
+
+        return (
+            <div className="p-listbox-header">
+                {content}
+            </div>
+        );
+    }
+
+    const content = createHeader();
+
+    return (
+        <>
+            {content}
+        </>
     )
 });
 
diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
index 5848211fc1..b192e45afe 100755
--- a/components/lib/multiselect/MultiSelect.d.ts
+++ b/components/lib/multiselect/MultiSelect.d.ts
@@ -11,6 +11,8 @@ type MultiSelectItemTemplateType = React.ReactNode | ((option: any) => React.Rea
 
 type MultiSelectSelectedItemTemplateType = React.ReactNode | ((value: any) => React.ReactNode);
 
+type MultiSelectFilterTemplateType = React.ReactNode | ((options: MultiSelectFilterOptions) => React.ReactNode);
+
 type MultiSelectEmptyFilterMessageType = React.ReactNode | ((props: MultiSelectProps) => React.ReactNode);
 
 type MultiSelectDisplayType = 'comma' | 'chip';
@@ -66,6 +68,11 @@ interface MultiSelectAllParams {
     checked: boolean;
 }
 
+interface MultiSelectFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
 export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
@@ -107,6 +114,7 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
     selectedItemsLabel?: string;
     ariaLabelledBy?: string;
     itemTemplate?: MultiSelectItemTemplateType;
+    filterTemplate?: MultiSelectFilterTemplateType;
     selectedItemTemplate?: MultiSelectSelectedItemTemplateType;
     panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType;
     panelFooterTemplate?: MultiSelectPanelFooterTemplateType;
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 2a04b6aa92..692d11cd0d 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -564,7 +564,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
                     {IconUtils.getJSXIcon(props.dropdownIcon, { className: 'p-multiselect-trigger-icon p-c' }, { props })}
                 </div>
                 <MultiSelectPanel ref={overlayRef} visibleOptions={visibleOptions} {...props} onClick={onPanelClick} onOverlayHide={hide}
-                    filterValue={filterState} hasFilter={hasFilter} onFilterInputChange={onFilterInputChange} onCloseClick={onCloseClick} onSelectAll={onSelectAll}
+                    filterValue={filterState} hasFilter={hasFilter} onFilterInputChange={onFilterInputChange} resetFilter={resetFilter} onCloseClick={onCloseClick} onSelectAll={onSelectAll}
                     getOptionLabel={getOptionLabel} getOptionRenderKey={getOptionRenderKey} isOptionDisabled={isOptionDisabled}
                     getOptionGroupChildren={getOptionGroupChildren} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupRenderKey={getOptionGroupRenderKey}
                     isSelected={isSelected} getSelectedOptionIndex={getSelectedOptionIndex} isAllSelected={isAllSelected} onOptionSelect={onOptionSelect} allowOptionSelect={allowOptionSelect} onOptionKeyDown={onOptionKeyDown}
@@ -589,6 +589,7 @@ MultiSelect.defaultProps = {
     optionGroupLabel: null,
     optionGroupChildren: null,
     optionGroupTemplate: null,
+    filterTemplate: null,
     display: 'comma',
     style: null,
     className: null,
diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js
index 65eefdfcb1..7f97b30e25 100644
--- a/components/lib/multiselect/MultiSelectHeader.js
+++ b/components/lib/multiselect/MultiSelectHeader.js
@@ -2,10 +2,15 @@ import * as React from 'react';
 import { Checkbox } from '../checkbox/Checkbox';
 import { InputText } from '../inputtext/InputText';
 import { Ripple } from '../ripple/Ripple';
-import { ObjectUtils } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 
 export const MultiSelectHeader = React.memo((props) => {
 
+    const filterOptions = {
+        filter: (e) => onFilter(e),
+        reset: () => props.resetFilter()
+    };
+
     const onFilter = (event) => {
         if (props.onFilter) {
             props.onFilter({
@@ -28,13 +33,33 @@ export const MultiSelectHeader = React.memo((props) => {
 
     const createFilterElement = () => {
         if (props.filter) {
-            return (
-                <div className="p-multiselect-filter-container">
+            const containerClassName = classNames('p-multiselect-filter-container');
+            let content = (
+                <div className={containerClassName}>
                     <InputText type="text" role="textbox" value={props.filterValue} onChange={onFilter}
                         className="p-multiselect-filter" placeholder={props.filterPlaceholder} />
                     <span className="p-multiselect-filter-icon pi pi-search"></span>
                 </div>
-            )
+            );
+
+            if (props.filterTemplate) {
+                const defaultContentOptions = {
+                    className: containerClassName,
+                    element: content,
+                    filterOptions: filterOptions,
+                    onFilter: onFilter,
+                    filterIconClassName: 'p-multeselect-filter-icon pi pi-search',
+                    props,
+                };
+
+                content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+            }
+        
+            return (
+                <>
+                    {content}
+                </>
+            );
         }
 
         return null;
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index b01949e9ed..3c841ff53f 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -35,7 +35,7 @@ export const MultiSelectPanel = React.memo(React.forwardRef((props, ref) => {
 
     const createHeader = () => {
         return (
-            <MultiSelectHeader filter={props.filter} filterValue={props.filterValue} onFilter={onFilterInputChange} filterPlaceholder={props.filterPlaceholder}
+            <MultiSelectHeader filter={props.filter} filterValue={props.filterValue} filterTemplate={props.filterTemplate} onFilter={onFilterInputChange} filterPlaceholder={props.filterPlaceholder}
                 onClose={props.onCloseClick} showSelectAll={props.showSelectAll} selectAll={props.isAllSelected()} onSelectAll={props.onSelectAll} template={props.panelHeaderTemplate} />
         )
     }
diff --git a/components/lib/orderlist/OrderList.css b/components/lib/orderlist/OrderList.css
index 2f6553d1e8..9bdc0f2034 100644
--- a/components/lib/orderlist/OrderList.css
+++ b/components/lib/orderlist/OrderList.css
@@ -27,6 +27,20 @@
     position: relative;
 }
 
+.p-orderlist-filter {
+    position: relative;
+}
+
+.p-orderlist-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-orderlist-filter-input {
+    width: 100%;
+}
+
 .p-orderlist.p-state-disabled .p-orderlist-item,
 .p-orderlist.p-state-disabled .p-button {
     cursor: default;
diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts
index 81f040d5ea..c95d32c714 100755
--- a/components/lib/orderlist/OrderList.d.ts
+++ b/components/lib/orderlist/OrderList.d.ts
@@ -1,10 +1,17 @@
 import * as React from 'react';
 
+type OrderListFilterTemplateType = React.ReactNode | ((options: OrderListFilterOptions) => React.ReactNode);
+
 interface OrderListChangeParams {
     originalEvent: React.SyntheticEvent;
     value: any;
 }
 
+interface OrderListFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
 export interface OrderListProps {
     id?: string;
     value?: any[];
@@ -15,6 +22,12 @@ export interface OrderListProps {
     dragdrop?: boolean;
     tabIndex?: number;
     dataKey?: string;
+    filter?: boolean;
+    filterBy?: string;
+    filterMatchMode?: string;
+    filterPlaceholder?: string;
+    filterLocale?: string;
+    filterTemplate?: OrderListFilterTemplateType;
     onChange?(e: OrderListChangeParams): void;
     itemTemplate?(item: any): React.ReactNode;
     children?: React.ReactNode;
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 758aa6466f..0dede56021 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { useUpdateEffect } from '../hooks/Hooks';
+import { FilterService } from '../api/Api';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { OrderListControls } from './OrderListControls';
 import { OrderListSubList } from './OrderListSubList';
 
 export const OrderList = React.memo(React.forwardRef((props, ref) => {
     const [selectionState, setSelectionState] = React.useState([]);
+    const [filterValueState, setFilterValueState] = React.useState('');
+    const hasFilter = ObjectUtils.isNotEmpty(filterValueState);
     const elementRef = React.useRef(null);
     const reorderDirection = React.useRef(null);
 
@@ -53,6 +56,46 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    const onFilter = (event) => {
+        let _filterValue = event.target.value;
+        setFilterValueState(_filterValue);
+
+        if (props.onFilter) {
+            props.onFilter({
+                originalEvent: event,
+                value: _filterValue
+            })
+        }
+    }
+
+    const resetFilter = () => {
+        setFilterValueState('');
+        props.onFilter && props.onFilter({ filter: '' });
+    }
+
+    const onFilterInputChange = (event) => {
+        const filter = event.target.value;
+
+        setFilterValueState(filter);
+
+        if (props.onFilter) {
+            props.onFilter({
+                originalEvent: event,
+                filter
+            });
+        }
+    }
+
+    const getVisibleList = () => {
+        if (hasFilter) {
+            const filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
+            const searchFields = props.filterBy ? props.filterBy.split(',') : [];
+            return FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+        }
+
+        return props.value;
+    }
+
     const findNextItem = (item) => {
         const nextItem = item.nextElementSibling;
         return nextItem ? (!DomHandler.hasClass(nextItem, 'p-orderlist-item') ? findNextItem(nextItem) : nextItem) : null;
@@ -112,12 +155,13 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
 
     const otherProps = ObjectUtils.findDiffKeys(props, OrderList.defaultProps);
     const className = classNames('p-orderlist p-component', props.className);
+    const visibleList = getVisibleList();
 
     return (
         <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
-            <OrderListControls value={props.value} selection={selectionState} onReorder={onReorder} dataKey={props.dataKey} />
-            <OrderListSubList value={props.value} selection={selectionState} onItemClick={onItemClick} onItemKeyDown={onItemKeyDown}
-                itemTemplate={props.itemTemplate} header={props.header} listStyle={props.listStyle} dataKey={props.dataKey}
+            <OrderListControls value={visibleList} selection={selectionState} onReorder={onReorder} dataKey={props.dataKey} />
+            <OrderListSubList value={visibleList} selection={selectionState} onItemClick={onItemClick} onItemKeyDown={onItemKeyDown} onFilterInputChange={onFilterInputChange}
+                itemTemplate={props.itemTemplate} filter={props.filter} onFilter={onFilter} resetFilter={resetFilter} filterTemplate={props.filterTemplate} header={props.header} listStyle={props.listStyle} dataKey={props.dataKey}
                 dragdrop={props.dragdrop} onChange={props.onChange} tabIndex={props.tabIndex} />
         </div>
     )
@@ -136,5 +180,12 @@ OrderList.defaultProps = {
     tabIndex: 0,
     dataKey: null,
     onChange: null,
-    itemTemplate: null
+    itemTemplate: null,
+    filter: false,
+    filterBy: null,
+    filterMatchMode: 'contains',
+    filterLocale: undefined,
+    filterPlaceholder: null,
+    filterTemplate: null,
+    onFilter: null
 }
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
index f8af2c3374..f3eb64b632 100644
--- a/components/lib/orderlist/OrderListSubList.js
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -7,6 +7,10 @@ export const OrderListSubList = React.memo((props) => {
     const draggedItemIndex = React.useRef(null);
     const dragOverItemIndex = React.useRef(null);
     const listElementRef = React.useRef(null);
+    const filterOptions = {
+        filter: (e) => props.onFilterInputChange(e),
+        reset: () => props.resetFilter()
+    };
 
     const isSelected = (item) => {
         return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
@@ -65,6 +69,14 @@ export const OrderListSubList = React.memo((props) => {
         }
     }
 
+
+    const onFilterInputKeyDown = (event) => {
+        //enter
+        if (event.which === 13) {
+            event.preventDefault();
+        }
+    }
+
     const createDropPoint = (index, key) => {
         return <li key={key} className="p-orderlist-droppoint" onDragOver={(e) => onDragOver(e, index + 1)} onDragLeave={onDragLeave} onDrop={onDrop}></li>
     }
@@ -121,12 +133,50 @@ export const OrderListSubList = React.memo((props) => {
         )
     }
 
+    const createFilter = () => {
+        if (props.filter) {
+            let content = (
+                <div className="p-orderlist-filter">
+                    <input type="text" value={props.filterValue} onChange={props.onFilter} onKeyDown={onFilterInputKeyDown} placeholder={props.placeholder} className="p-orderlist-filter-input p-inputtext p-component" />
+                    <span className="p-orderlist-filter-icon pi pi-search"></span>
+                </div>
+            );
+
+            if (props.filterTemplate) {
+                const defaultContentOptions = {
+                    className: 'p-orderlist-filter',
+                    inputProps: {
+                        inputClassName: 'p-orderlist-filter-input p-inputtext p-component',
+                        onChange: props.onFilter,
+                        onKeyDown: onFilterInputKeyDown,
+                    },
+                    filterOptions: filterOptions,
+                    iconClassName: 'p-orderlist-filter-icon pi pi-search',
+                    element: content,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+            }
+
+            return (
+                <div className="p-orderlist-filter-container">
+                    {content}
+                </div>
+            );
+        }
+
+        return null;
+    }
+
     const header = createHeader();
+    const filter = createFilter();
     const list = createList();
 
     return (
         <div className="p-orderlist-list-container">
             {header}
+            {filter}
             {list}
         </div>
     )
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index 46f6336681..4071bdd11e 100644
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -11,6 +11,8 @@ type TreeFilterModeType = 'lenient' | 'strict';
 
 type TreeHeaderTemplateType = React.ReactNode | ((options: TreeHeaderTemplateOptions) => React.ReactNode);
 
+type TreeFilterTemplateType = React.ReactNode | ((options: TreeFilterOptions) => React.ReactNode);
+
 type TreeFooterTemplateType = React.ReactNode | ((props: TreeProps) => React.ReactNode);
 
 type TreeNodeTemplateType = React.ReactNode | ((node: TreeNode, options: TreeNodeTemplateOptions) => React.ReactNode);
@@ -99,6 +101,11 @@ interface TreeNodeClickParams {
     node: TreeNode;
 }
 
+interface TreeFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
 interface TreeNodeDoubleClickParams extends TreeNodeClickParams {}
 
 export interface TreeProps {
@@ -121,6 +128,7 @@ export interface TreeProps {
     dragdropScope?: string;
     header?: TreeHeaderTemplateType;
     footer?: TreeFooterTemplateType;
+    filterTemplate?: TreeFilterTemplateType;
     showHeader?: boolean;
     filter?: boolean;
     filterValue?: string;
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index ba1ced52f0..6dfcbea173 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -10,7 +10,11 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
     const filterChanged = React.useRef(false);
     const filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
     const expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
-
+    const filterOptions = {
+        filter: (e) => onFilterInputChange(e),
+        reset: () => resetFilter()
+    };
+    
     const getRootNode = () => {
         return (props.filter && filteredNodes.current) ? filteredNodes.current : props.value;
     }
@@ -285,6 +289,10 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
         return matched;
     }
 
+    const resetFilter = () => {
+        setFilterValueState('');
+    }
+
     React.useImperativeHandle(ref, () => ({
         filter,
         ...props
@@ -348,14 +356,33 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
     const createFilter = () => {
         if (props.filter) {
             const value = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
-
-            return (
+            let content = (
                 <div className="p-tree-filter-container">
                     <input type="text" value={value} autoComplete="off" className="p-tree-filter p-inputtext p-component" placeholder={props.filterPlaceholder}
                         onKeyDown={onFilterInputKeyDown} onChange={onFilterInputChange} disabled={props.disabled} />
                     <span className="p-tree-filter-icon pi pi-search"></span>
                 </div>
-            )
+            );
+
+            if (props.filterTemplate) {
+                const defaultContentOptions = {
+                    className: 'p-tree-filter-container',
+                    element: content,
+                    filterOptions: filterOptions,
+                    filterInputKeyDown: onFilterInputKeyDown,
+                    filterInputChange: onFilterInputChange,
+                    filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+                    props,
+                };
+                
+                content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+            }
+
+            return (
+                <>
+                    {content}
+                </>
+            );
         }
 
         return null;
@@ -455,6 +482,7 @@ Tree.defaultProps = {
     filterMode: 'lenient',
     filterPlaceholder: null,
     filterLocale: undefined,
+    filterTemplate: null,
     nodeTemplate: null,
     togglerTemplate: null,
     onSelect: null,
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 93a4a31afd..e09f6f70d9 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -13,6 +13,8 @@ type TreeSelectFilterModeType = 'lenient' | 'strict';
 
 type TreeSelectValueTemplateType = React.ReactNode | ((selectedNodes: TreeNode | TreeNode[], props: TreeSelectProps) => React.ReactNode);
 
+type TreeSelectFilterTemplateType = React.ReactNode | ((options: TreeSelectFilterOptions) => React.ReactNode);
+
 type TreeSelectPanelHeaderTemplateType = React.ReactNode | ((options: TreeSelectPanelHeaderTemplateOptions) => React.ReactNode);
 
 type TreeSelectPanelFooterTemplateType = React.ReactNode | ((props: TreeSelectProps) => React.ReactNode);
@@ -63,6 +65,11 @@ interface TreeSelectFilterValueChangeParams {
     value: string;
 }
 
+interface TreeSelectFilterOptions {
+    filter?: (event?: KeyboardEvent) => void;
+    reset?: () => void;
+}
+
 export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'|'value' | 'ref'> {
     id?: string;
     value?: TreeSelectSelectionKeys;
@@ -87,6 +94,7 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
     valueTemplate?: TreeSelectValueTemplateType;
     panelHeaderTemplate?: TreeSelectPanelHeaderTemplateType;
     panelFooterTemplate?: TreeSelectPanelFooterTemplateType;
+    filterTemplate?: TreeSelectFilterTemplateType;
     transitionOptions?: CSSTransitionProps;
     dropdownIcon?: string;
     filter?: boolean;
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 0e1ee877b3..df64fef581 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -23,6 +23,10 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
     const hasNoOptions = ObjectUtils.isEmpty(props.options);
     const isSingleSelectionMode = props.selectionMode === 'single';
     const isCheckboxSelectionMode = props.selectionMode === 'checkbox';
+    const filterOptions = {
+        filter: (e) => onFilterInputChange(e),
+        reset: () => resetFilter()
+    };
 
     const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
         target: elementRef, overlay: overlayRef, listener: (event, { valid }) => {
@@ -400,16 +404,34 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
         if (props.filter) {
             const filterValue = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
 
-            return (
+            let filterContent = (
                 <div className="p-treeselect-filter-container">
                     <input ref={filterInputRef} type="text" value={filterValue} autoComplete="off" className="p-treeselect-filter p-inputtext p-component" placeholder={props.filterPlaceholder}
                         onKeyDown={onFilterInputKeyDown} onChange={onFilterInputChange} disabled={props.disabled} />
                     <span className="p-treeselect-filter-icon pi pi-search"></span>
                 </div>
             )
-        }
 
-        return null;
+            if (props.filterTemplate) {
+                const defaultContentOptions = {
+                    className: 'p-treeselect-filter-container',
+                    element: filterContent,
+                    filterOptions: filterOptions,
+                    filterInputKeyDown: onFilterInputKeyDown,
+                    filterInputChange: onFilterInputChange,
+                    filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+                    props,
+                };
+
+                filterContent = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+            }
+    
+            return (
+                <>
+                    {filterContent}
+                </>
+            );
+        }
     }
 
     const createHeader = () => {
@@ -509,6 +531,7 @@ TreeSelect.defaultProps = {
     transitionOptions: null,
     dropdownIcon: 'pi pi-chevron-down',
     filter: false,
+    filterTemplate: null,
     filterValue: null,
     filterBy: 'label',
     filterMode: 'lenient',
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 8ca20eae89..a282b738fb 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 368829749b..8d9dd503e7 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index b237389325..bc544b7b24 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index a3b5491a68..8e63909044 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #383838;
   background: #1e1e1e;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 5824c4bf40..9eef809e9f 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem 1.25rem;
+  background: #2a323d;
+  border: 1px solid #3f4b5b;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #3f4b5b;
   background: #2a323d;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 2f0adeb2aa..ac5e7d33a8 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem 1.25rem;
+  background: #2a323d;
+  border: 1px solid #3f4b5b;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #3f4b5b;
   background: #2a323d;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 3fdf86dc95..42fcdd23ad 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem 1.25rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #495057;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 93ab5505a9..af8e977e83 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem 1.25rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #495057;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 06de8efe58..918b1bff60 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #a19f9d;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: #605e5c;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #a19f9d;
   background: #ffffff;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 74867c7717..9e68d98a8f 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #071426;
+  border: 1px solid #0b213f;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #0b213f;
   background: #071426;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index cf3d40474d..7ef054055d 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #071426;
+  border: 1px solid #0b213f;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #0b213f;
   background: #071426;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index c9d1e0a1bc..5f92e350a4 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #071426;
+  border: 1px solid #0b213f;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #0b213f;
   background: #071426;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index b264090f45..765f415c41 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #071426;
+  border: 1px solid #0b213f;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #0b213f;
   background: #071426;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index c807a5c49d..bd074dc275 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 00d96c8e0b..6a77698cbe 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index fd504c3978..386038669e 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index bab8792827..c18dbf3446 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 1b4d2330dc..f2621b3ba4 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #323232;
+  border: 1px solid #191919;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index d258a7f546..0147cd0639 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #323232;
+  border: 1px solid #191919;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 2d0d5500a1..e87dc1e41f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #323232;
+  border: 1px solid #191919;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index cddbfd1f08..a0cf1ff0ab 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #323232;
+  border: 1px solid #191919;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #888888;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #191919;
   background: #323232;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 15f85c50cf..7b149f4602 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 2rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 27a255d68a..d9be9c6d8c 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 2rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 01d0a14b38..1635824daf 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 2rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index e459e07a59..86c865d9e5 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 2rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index d32566fe2f..092d04b6aa 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.75rem;
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index a92569aa01..fdbf2626a6 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.75rem;
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: #1e1e1e;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index b37f0ea308..77e5c4a68a 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.75rem;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index e43dde121e..05cb3cf9c2 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -3367,6 +3367,19 @@
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.75rem;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #e0e0e0;
   background: #ffffff;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 25a763717e..02308e3208 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #ffffff;
+  border: 1px solid #007ad9;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #848484;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 165fc36c66..a9523e26e1 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #ffffff;
+  border: 1px solid #333333;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #848484;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 8ca3a8e3bd..991daa25b4 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -3355,6 +3355,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #ffffff;
+  border: 1px solid #c8c8c8;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #848484;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #c8c8c8;
   background: #ffffff;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index dac30b9f0f..0ab4b3e6a9 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 0.857rem 1rem;
+  background: #ffffff;
+  border: 1px solid #7B95A3;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.429rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.429rem;
+  color: #a6a6a6;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dadada;
   background: #ffffff;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 2055057dff..7ca1f27602 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 1d73b5b064..db781b39fd 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index e0f97cf848..98f208fa92 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 04e1c5127a..11320cdc1b 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #ffffff;
+  border: 1px solid #dee2e6;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: #6c757d;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #dee2e6;
   background: #ffffff;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 62f46b20cc..8946b81964 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -3378,6 +3378,19 @@
   border-top-right-radius: 0.375rem;
   border-top-left-radius: 0.375rem;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.75rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.75rem;
+  color: #71717A;
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #e5e7eb;
   background: #ffffff;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 2f8833d068..fcb36d50fd 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index bf1d4bb98d..038203ae65 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 45ac8ff016..c47414549f 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index e137e307e7..de099185ac 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -3343,6 +3343,19 @@
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
+.p-orderlist .p-orderlist-filter-container {
+  padding: 1rem;
+  background: #1f2d40;
+  border: 1px solid #304562;
+  border-bottom: 0 none;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+  padding-right: 1.5rem;
+}
+.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+  right: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
 .p-orderlist .p-orderlist-list {
   border: 1px solid #304562;
   background: #1f2d40;