diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
index 7d15d84d12..ecb21b72ad 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
@@ -34,6 +34,7 @@ const FilterDouble = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
@@ -49,6 +50,7 @@ const FilterDouble = ({
           maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
+          popoverProps={popoverProps}
       >
           {children}
       </FiltersPopover>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
index 4d8b285f01..950575006b 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
@@ -33,6 +33,7 @@ const FilterSingle = ({
   maxHeight,
   minWidth,
   placement,
+  popoverProps,
   ...bgProps
 }: FilterSingleProps): React.ReactElement => {
   return (
@@ -52,6 +53,7 @@ const FilterSingle = ({
                 maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
+                popoverProps={popoverProps}
             >
             {children}
             </FiltersPopover>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx b/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
index 72ce03420a..362915bcc0 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
+import { GenericObject } from '../../types'
 
 type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
@@ -9,8 +10,9 @@ type FiltersPopoverProps = {
   maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+  popoverProps?: GenericObject,
 }
-const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -33,6 +35,7 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
+        {...popoverProps}
     >
         <div className="pb-form">
           {typeof children === 'function'
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
new file mode 100644
index 0000000000..da96315cce
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb
@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_popover_props",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { width: "250px" },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
new file mode 100644
index 0000000000..d98bb00b04
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+const FilterPopoverProps = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+
+  const popoverProps = {
+    width: "250px"
+  }
+
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        popoverProps={popoverProps}
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
+              {...props}
+          />
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
+              {...props}
+          />
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterPopoverProps
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
new file mode 100644
index 0000000000..2b57fbbd17
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
new file mode 100644
index 0000000000..b95652ba24
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
@@ -0,0 +1 @@
+This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml b/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
index dce7ebf254..b38f20e5ee 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/example.yml
@@ -10,6 +10,7 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
 
   react:
   - filter_default: Default
@@ -21,3 +22,5 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
+  - filter_popover_props: Popover Props
+
diff --git a/playbook/app/pb_kits/playbook/pb_filter/docs/index.js b/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
index b8ecc76ae8..a204c56a8d 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
+++ b/playbook/app/pb_kits/playbook/pb_filter/docs/index.js
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
+export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb b/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
index bf52558263..e29aef6667 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_filter/filter.html.erb
@@ -71,13 +71,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_filter/filter.rb b/playbook/app/pb_kits/playbook/pb_filter/filter.rb
index 5eb81e25a5..0e0567cea6 100644
--- a/playbook/app/pb_kits/playbook/pb_filter/filter.rb
+++ b/playbook/app/pb_kits/playbook/pb_filter/filter.rb
@@ -15,6 +15,8 @@ class Filter < Playbook::KitBase
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                        default: "bottom-start"
+      prop :popover_props, type: Playbook::Props::HashProp,
+                           default: {}
 
       def classname
         generate_classname("pb_filter_kit").rstrip
diff --git a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
index a302194c67..4cf9eec90a 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
+++ b/playbook/app/pb_kits/playbook/pb_popover/_popover.tsx
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
     targetId,
   } = props;
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
       maxHeight ? { maxHeight: maxHeight } : {},
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {}
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
     );
   };
   const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
   } = props;
 
   useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         placement={placement}
         referenceElement={referenceElement}
         targetId={targetId}
+        width={width}
         zIndex={zIndex}
         {...props}
     >
diff --git a/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb b/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
index 0f8ff1a668..7bed04c76a 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_popover/popover.rb b/playbook/app/pb_kits/playbook/pb_popover/popover.rb
index 48a53630ff..ca5e02bc0e 100644
--- a/playbook/app/pb_kits/playbook/pb_popover/popover.rb
+++ b/playbook/app/pb_kits/playbook/pb_popover/popover.rb
@@ -12,6 +12,7 @@ class Popover < Playbook::KitBase
       prop :max_width
       prop :min_width
       prop :min_height
+      prop :width
       prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ def width_height_helper
         out += "max-width: #{max_width}; " if max_width.present?
         out += "min-height: #{min_height}; " if min_height.present?
         out += "min-width: #{min_width};" if min_width.present?
+        out += "width: #{width};" if width.present?
         out
       end
 
       def width_height_class_helper
-        "overflow_handling" if max_height || max_width
+        "overflow_handling" if max_height || max_width || width
       end
 
       def data