diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index 663c47181..dc0e225d7 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -56,8 +56,9 @@ const FilterSeriesHeader = observer(
     };
     return (
       <div
-        className={cn('px-4 h-12 flex items-center relative', {
+        className={cn('px-4 h-12 flex items-center relative bg-white border-gray-lighter border-t border-l border-r rounded-t-xl', {
           hidden: props.hidden,
+          'rounded-b-xl': !props.expanded,
         })}
       >
         <Space className="mr-auto" size={30}>
@@ -181,7 +182,7 @@ function FilterSeries(props: Props) {
 
       {expandable && (
         <Space
-          className="justify-between w-full px-5 py-2 cursor-pointer"
+          className="justify-between w-full py-2 cursor-pointer"
           onClick={() => setExpanded(!expanded)}
         >
           <div>
@@ -211,6 +212,7 @@ function FilterSeries(props: Props) {
           onFilterMove={onFilterMove}
           excludeFilterKeys={excludeFilterKeys}
           onAddFilter={onAddFilter}
+          mergeUp
         />
       ) : null}
     </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index 873cb570f..e2b2a60da 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Card, Space, Typography, Button, Alert, Form } from 'antd';
+import { FilterList } from 'Shared/Filters/FilterList';
+
 import { useStore } from 'App/mstore';
 import { eventKeys } from 'Types/filter/newFilter';
 import {
@@ -45,8 +47,6 @@ function WidgetFormNew() {
 export default observer(WidgetFormNew);
 
 const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
-  // const timeseriesOptions = metricOf.filter((i) => i.type === 'timeseries');
-  // const tableOptions = metricOf.filter((i) => i.type === 'table');
   const isTable = metric.metricType === TABLE;
   const isClickMap = metric.metricType === HEATMAP;
   const isFunnel = metric.metricType === FUNNEL;
@@ -54,29 +54,53 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
   const isPathAnalysis = metric.metricType === USER_PATH;
   const isRetention = metric.metricType === RETENTION;
   const canAddSeries = metric.series.length < 3;
-  const eventsLength = metric.series[0].filter.filters.filter((i: any) => i && i.isEvent).length;
-  // const cannotSaveFunnel = isFunnel && (!metric.series[0] || eventsLength <= 1);
 
   const isSingleSeries = isTable || isFunnel || isClickMap || isInsights || isRetention;
 
-  // const onAddFilter = (filter: any) => {
-  //     metric.series[0].filter.addFilter(filter);
-  //     metric.updateKey('hasChanged', true)
-  // }
+  const onUpdateFilter = (filterIndex: any, filter: any) => {
+    metric.series[0].filter.updateFilter(filterIndex, filter);
+    metric.updateKey('hasChanged', true)
+  };
+
+  const onFilterMove = (newFilters: any) => {
+    metric.series[0].filter.replaceFilters(newFilters.toArray());
+    metric.updateKey('hasChanged', true)
+  };
+
+  const onChangeEventsOrder = (_: any, { name, value }: any) => {
+    metric.series[0].filter.updateKey(name, value);
+    metric.updateKey('hasChanged', true)
+  };
+
+  const onRemoveFilter = (filterIndex: any) => {
+    metric.series[0].filter.removeFilter(filterIndex);
+    metric.updateKey('hasChanged', true)
+  };
+
+  const onAddFilter = (filter: any) => {
+    metric.series[0].filter.addFilter(filter);
+    metric.updateKey('hasChanged', true)
+  }
 
   return (
     <>
-      {
-        metric.series.length > 0 && metric.series
+      {metric.series.length > 0 &&
+        metric.series
           .slice(0, isSingleSeries ? 1 : metric.series.length)
           .map((series: any, index: number) => (
-            <div className="mb-2" key={series.name}>
+            <div className="mb-2 rounded-xl border border-gray-lighter" key={series.name}>
               <FilterSeries
                 canExclude={isPathAnalysis}
                 supportsEmpty={!isClickMap && !isPathAnalysis}
                 excludeFilterKeys={excludeFilterKeys}
                 observeChanges={() => metric.updateKey('hasChanged', true)}
-                hideHeader={isTable || isClickMap || isInsights || isPathAnalysis || isFunnel}
+                hideHeader={
+                  isTable ||
+                  isClickMap ||
+                  isInsights ||
+                  isPathAnalysis ||
+                  isFunnel
+                }
                 seriesIndex={index}
                 series={series}
                 onRemoveSeries={() => metric.removeSeries(index)}
@@ -89,11 +113,13 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
                 expandable={isSingleSeries}
               />
             </div>
-          ))
-      }
+          ))}
 
       {!isSingleSeries && canAddSeries && (
-        <Card styles={{ body: { padding: '4px' } }} className="rounded-full shadow-sm">
+        <Card
+          styles={{ body: { padding: '4px' } }}
+          className="rounded-xl shadow-sm mb-2"
+        >
           <Button
             type="link"
             onClick={() => {
@@ -110,6 +136,21 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
           </Button>
         </Card>
       )}
+
+      {metric.series[0] ?
+       <div className={'rounded-xl border border-gray-lighter'}>
+        <FilterList
+          filter={metric.series[0].filter}
+          onUpdateFilter={onUpdateFilter}
+          onRemoveFilter={onRemoveFilter}
+          onChangeEventsOrder={onChangeEventsOrder}
+          supportsEmpty
+          onFilterMove={onFilterMove}
+          excludeFilterKeys={excludeFilterKeys}
+          onAddFilter={onAddFilter}
+        />
+       </div>
+      : null}
     </>
   );
 });
diff --git a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
index 6f7f8a0b6..c39547b2b 100644
--- a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx
@@ -1,6 +1,6 @@
 import {observer} from "mobx-react-lite";
 import {Tooltip} from "UI";
-import {Segmented} from "antd";
+import {Segmented, Select} from "antd";
 import React from "react";
 
 const EventsOrder = observer((props: {
@@ -12,19 +12,19 @@ const EventsOrder = observer((props: {
     const options = [
         {
             name: 'eventsOrder',
-            label: 'THEN',
+            label: 'Then',
             value: 'then',
             disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'),
         },
         {
             name: 'eventsOrder',
-            label: 'AND',
+            label: 'And',
             value: 'and',
             disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'),
         },
         {
             name: 'eventsOrder',
-            label: 'OR',
+            label: 'Or',
             value: 'or',
             disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'),
         },
@@ -42,7 +42,7 @@ const EventsOrder = observer((props: {
             </Tooltip>
         </div>
 
-        <Segmented
+        <Select
             size={"small"}
             className="text-sm"
             onChange={(v) => onChange(null, options.find((i) => i.value === v))}
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 2b5a430c4..002705eaf 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -44,12 +44,12 @@ export const FilterList = observer((props: Props) => {
   };
   return (
     <div
-      className={'py-2 px-4 widget-wrapper'}
+      className={'py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
       style={{
-        borderBottomLeftRadius: props.mergeDown ? 0 : 'unset',
-        borderBottomRightRadius: props.mergeDown ? 0 : 'unset',
-        borderTopLeftRadius: props.mergeUp ? 0 : 'unset',
-        borderTopRightRadius: props.mergeUp ? 0 : 'unset',
+        borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
+        borderBottomRightRadius: props.mergeDown ? 0 : undefined,
+        borderTopLeftRadius: props.mergeUp ? 0 : undefined,
+        borderTopRightRadius: props.mergeUp ? 0 : undefined,
       }}
     >
       <div className={'flex items-center gap-2 mb-2'}>
@@ -174,17 +174,17 @@ export const EventsList = observer((props: Props) => {
   const eventsNum = filters.filter((i: any) => i.isEvent).length;
   return (
     <div
-      className={'widget-wrapper border-b border-b-gray-lighter py-2 px-4'}
+      className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
       style={{
-        borderBottomLeftRadius: props.mergeDown ? 0 : 'unset',
-        borderBottomRightRadius: props.mergeDown ? 0 : 'unset',
-        borderTopLeftRadius: props.mergeUp ? 0 : 'unset',
-        borderTopRightRadius: props.mergeUp ? 0 : 'unset',
+        borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
+        borderBottomRightRadius: props.mergeDown ? 0 : undefined,
+        borderTopLeftRadius: props.mergeUp ? 0 : undefined,
+        borderTopRightRadius: props.mergeUp ? 0 : undefined,
         marginBottom: props.mergeDown ? '-1px' : undefined,
       }}
     >
       <div className="flex items-center mb-2 gap-2">
-        <div className="font-semibold">{filter.eventsHeader || 'Events'}</div>
+        <div className="font-semibold">Events</div>
         <FilterSelection mode={'events'} filter={undefined} onFilterClick={onAddFilter}>
           <Button icon={<Plus size={16} strokeWidth={1} />} type="default" size={'small'}>
             Add