diff --git a/frontend/app/api_client.js b/frontend/app/api_client.js
index 02e575033..28aa2913b 100644
--- a/frontend/app/api_client.js
+++ b/frontend/app/api_client.js
@@ -16,13 +16,14 @@ const siteIdRequiredPaths = [
   '/integration/sources',
   '/issue_types',
   '/sample_rate',
-  '/flows',
+  '/saved_search',
   '/rehydrations',
   '/sourcemaps',
   '/errors',
   '/funnels',
   '/assist',
-  '/heatmaps'
+  '/heatmaps',
+  '/custom_metrics',
 ];
 
 const noStoringFetchPathStarts = [
diff --git a/frontend/app/components/Alerts/AlertForm.js b/frontend/app/components/Alerts/AlertForm.js
index deb0fa405..692191c96 100644
--- a/frontend/app/components/Alerts/AlertForm.js
+++ b/frontend/app/components/Alerts/AlertForm.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Button, Dropdown, Form, Input, SegmentSelection, Checkbox, Message, Link, Icon } from 'UI';
 import { alertMetrics as metrics } from 'App/constants';
 import { alertConditions as conditions } from 'App/constants';
@@ -8,6 +8,7 @@ import stl from './alertForm.css';
 import DropdownChips from './DropdownChips';
 import { validateEmail } from 'App/validate';
 import cn from 'classnames';
+import { fetchTriggerOptions } from 'Duck/alerts';
 
 const thresholdOptions = [
   { text: '15 minutes', value: 15 },
@@ -46,11 +47,15 @@ const Section = ({ index, title, description, content }) => (
 const integrationsRoute = client(CLIENT_TABS.INTEGRATIONS);
 
 const AlertForm = props => {
-  const { instance, slackChannels, webhooks, loading, onDelete, deleting } = props;  
+  const { instance, slackChannels, webhooks, loading, onDelete, deleting, triggerOptions } = props;  
   const write = ({ target: { value, name } }) => props.edit({ [ name ]: value })
   const writeOption = (e, { name, value }) => props.edit({ [ name ]: value });
   const onChangeOption = (e, { checked, name }) => props.edit({ [ name ]: checked })
 
+  useEffect(() => {
+    props.fetchTriggerOptions();
+  }, [])
+
   const writeQueryOption = (e, { name, value }) => {
     const { query } = instance;
     props.edit({ query: { ...query, [name] : value } });
@@ -61,10 +66,12 @@ const AlertForm = props => {
     props.edit({ query: { ...query, [name] : value } });
   }
 
-  const metric = (instance && instance.query.left) ? metrics.find(i => i.value === instance.query.left) : null;
+  const metric = (instance && instance.query.left) ? triggerOptions.find(i => i.value === instance.query.left) : null;
   const unit = metric ? metric.unit : '';
   const isThreshold = instance.detectionMethod === 'threshold';
 
+  console.log('triggerOptions', triggerOptions)
+
 
   return (
     <Form className={ cn("p-6", stl.wrapper)} style={{ width: '580px' }} onSubmit={() => props.onSubmit(instance)} id="alert-form">
@@ -135,7 +142,7 @@ const AlertForm = props => {
                   placeholder="Select Metric"
                   selection
                   search
-                  options={ metrics }
+                  options={ triggerOptions }
                   name="left"
                   value={ instance.query.left }
                   onChange={ writeQueryOption }
@@ -327,6 +334,7 @@ const AlertForm = props => {
 
 export default connect(state => ({
   instance: state.getIn(['alerts', 'instance']),
+  triggerOptions: state.getIn(['alerts', 'triggerOptions']),
   loading: state.getIn(['alerts', 'saveRequest', 'loading']),
   deleting: state.getIn(['alerts', 'removeRequest', 'loading'])
-}))(AlertForm)
+}), { fetchTriggerOptions })(AlertForm)
diff --git a/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
new file mode 100644
index 000000000..5cf30c278
--- /dev/null
+++ b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import { SlideModal, IconButton } from 'UI';
+import { init, edit, save, remove } from 'Duck/alerts';
+import { fetchList as fetchWebhooks } from 'Duck/webhook';
+import AlertForm from '../AlertForm';
+import { connect } from 'react-redux';
+import { setShowAlerts } from 'Duck/dashboard';
+import { EMAIL, SLACK, WEBHOOK } from 'App/constants/schedule';
+import { confirm } from 'UI/Confirmation';
+
+interface Props {
+  showModal?: boolean;
+  metricId?: number;
+  onClose: () => void;
+}
+function AlertFormModal(props) {
+  const { metricId = null, showModal = false, webhooks, setShowAlerts } = props;
+  const [showForm, setShowForm] = useState(false);
+
+  useEffect(() => {
+    props.fetchWebhooks();
+  }, [])
+
+  const slackChannels = webhooks.filter(hook => hook.type === SLACK).map(({ webhookId, name }) => ({ value: webhookId, text: name })).toJS();
+  const hooks = webhooks.filter(hook => hook.type === WEBHOOK).map(({ webhookId, name }) => ({ value: webhookId, text: name })).toJS();
+
+  const saveAlert = instance => {
+    const wasUpdating = instance.exists();
+    props.save(instance).then(() => {
+      if (!wasUpdating) {
+        toggleForm(null, false);
+      }
+    })
+  }
+
+  const onDelete = async (instance) => {
+    if (await confirm({
+      header: 'Confirm',
+      confirmButton: 'Yes, Delete',
+      confirmation: `Are you sure you want to permanently delete this alert?`
+    })) {
+      props.remove(instance.alertId).then(() => {
+        toggleForm(null, false);
+      });
+    }
+  }
+
+  const toggleForm = (instance, state) => {
+    if (instance) {
+      props.init(instance)
+    }
+    return setShowForm(state ? state : !showForm);
+  }
+
+  return (
+    <SlideModal
+        title={
+          <div className="flex items-center">
+            <span className="mr-3">{ 'Create Alert' }</span>
+            <IconButton 
+              circle
+              size="small"
+              icon="plus" 
+              outline
+              id="add-button"
+              onClick={ () => toggleForm({}, true) }
+            />
+          </div>
+        }
+        isDisplayed={ showModal }
+        onClose={props.onClose}
+        size="medium"
+        content={ showModal &&
+          <AlertForm
+            metricId={ props.metricId }
+            edit={props.edit}
+            slackChannels={slackChannels}
+            webhooks={hooks}
+            onSubmit={saveAlert}
+            onClose={props.onClose}
+            onDelete={onDelete}
+          />
+      }
+      />
+  );
+}
+
+export default connect(state => ({
+  webhooks: state.getIn(['webhooks', 'list']),
+  instance: state.getIn(['alerts', 'instance']),
+}), { init, edit, save, remove, fetchWebhooks, setShowAlerts })(AlertFormModal)
\ No newline at end of file
diff --git a/frontend/app/components/Alerts/AlertFormModal/index.ts b/frontend/app/components/Alerts/AlertFormModal/index.ts
new file mode 100644
index 000000000..6eb4de1f2
--- /dev/null
+++ b/frontend/app/components/Alerts/AlertFormModal/index.ts
@@ -0,0 +1 @@
+export { default } from './AlertFormModal';
\ No newline at end of file
diff --git a/frontend/app/components/BugFinder/Attributes/AttributeItem.js b/frontend/app/components/BugFinder/Attributes/AttributeItem.js
index bc4e45d41..ad27649dd 100644
--- a/frontend/app/components/BugFinder/Attributes/AttributeItem.js
+++ b/frontend/app/components/BugFinder/Attributes/AttributeItem.js
@@ -27,9 +27,9 @@ class AttributeItem extends React.PureComponent {
   applyFilter = debounce(this.props.applyFilter, 1000)
   fetchFilterOptionsDebounce = debounce(this.props.fetchFilterOptions, 500)
 
-  onFilterChange = (e, { name, value }) => {
+  onFilterChange = (name, value, valueIndex) => {
     const { index } = this.props;
-    this.props.editAttribute(index, name, value);
+    this.props.editAttribute(index, name, value, valueIndex);
     this.applyFilter();
   }
 
@@ -69,13 +69,14 @@ class AttributeItem extends React.PureComponent {
           />
         }
         {
-          !filter.hasNoValue &&
+          // !filter.hasNoValue &&
           <AttributeValueField
             filter={ filter }
             options={ options }            
             onChange={ this.onFilterChange }
             handleSearchChange={this.handleSearchChange}
             loading={loadingFilterOptions}
+            index={index}
           />
         }
         
diff --git a/frontend/app/components/BugFinder/Attributes/AttributeValueField.js b/frontend/app/components/BugFinder/Attributes/AttributeValueField.js
index 440eadec0..9e6b7eb78 100644
--- a/frontend/app/components/BugFinder/Attributes/AttributeValueField.js
+++ b/frontend/app/components/BugFinder/Attributes/AttributeValueField.js
@@ -7,7 +7,7 @@ import { LinkStyledInput, CircularLoader } from 'UI';
 import { KEYS } from 'Types/filter/customFilter';
 import Event, { TYPES } from 'Types/filter/event';
 import CustomFilter from 'Types/filter/customFilter';
-import { setActiveKey, addCustomFilter, removeCustomFilter, applyFilter } from 'Duck/filters';
+import { setActiveKey, addCustomFilter, removeCustomFilter, applyFilter, updateValue } from 'Duck/filters';
 import DurationFilter from '../DurationFilter/DurationFilter';
 import AutoComplete from '../AutoComplete';
 
@@ -24,6 +24,7 @@ const getHeader = (type) => {
   addCustomFilter,
   removeCustomFilter,
   applyFilter,
+  updateValue,
 })
 class AttributeValueField extends React.PureComponent {
   state = {
@@ -134,25 +135,46 @@ class AttributeValueField extends React.PureComponent {
     return params;
   }
 
+  onAddValue = () => {
+    const { index, filter } = this.props;
+    this.props.updateValue('filters', index, filter.value.concat(""));
+  }
+
+  onRemoveValue = (valueIndex) => {
+    const { index, filter } = this.props;
+    this.props.updateValue('filters', index, filter.value.filter((_, i) => i !== valueIndex));
+  }
+
+  onChange = (name, value, valueIndex) => {
+    const { index, filter } = this.props;
+    this.props.updateValue('filters', index, filter.value.map((item, i) => i === valueIndex ? value : item));
+  }
+
   render() {
-    const { filter, onChange, onTargetChange } = this.props;
+    // const { filter, onChange } = this.props;
+    const { filter } = this.props;
     const _showAutoComplete = this.isAutoComplete(filter.type);
     const _params = _showAutoComplete ? this.getParams(filter) : {};    
-    let _optionsEndpoint= '/events/search';    
+    let _optionsEndpoint= '/events/search';
 
     return (
       <React.Fragment>
-        { _showAutoComplete ? 
-          <AutoComplete            
+        { _showAutoComplete ? filter.value.map((v, i) => (
+          <AutoComplete
             name={ 'value' }
             endpoint={ _optionsEndpoint }
-            value={ filter.value }
+            value={ v }
+            index={ i }
             params={ _params }           
             optionMapping={this.optionMapping}            
-            onSelect={ onChange }
+            onSelect={ (e, { name, value }) => onChange(name, value, i) }
             headerText={ <h5 className={ stl.header }>{ getHeader(filter.type) }</h5> }
             fullWidth={ (filter.type === TYPES.CONSOLE || filter.type === TYPES.LOCATION || filter.type === TYPES.CUSTOM) && filter.value }
+            onRemoveValue={() => this.onRemoveValue(i)}
+            onAddValue={this.onAddValue}
+            showCloseButton={i !== filter.value.length - 1}
           />
+        ))
         : this.renderField()
         }
         { filter.type === 'INPUT' &&
diff --git a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
index 7c22584a9..f902235ed 100644
--- a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
+++ b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import APIClient from 'App/api_client';
 import cn from 'classnames';
-import { Input } from 'UI';
+import { Input, Icon } from 'UI';
 import { debounce } from 'App/utils';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import EventSearchInput from 'Shared/EventSearchInput';
 import stl from './autoComplete.css';
 import FilterItem from '../CustomFilters/FilterItem';
 
@@ -78,7 +79,7 @@ class AutoComplete extends React.PureComponent {
   })
 
 
-  onInputChange = (e, { name, value }) => {
+  onInputChange = ({ target: { value } }) => {
     changed = true;
     this.setState({ query: value, updated: true })
     const _value = value.trim();
@@ -118,23 +119,53 @@ class AutoComplete extends React.PureComponent {
       valueToText = defaultValueToText,
       placeholder = 'Type to search...',
       headerText = '',
-      fullWidth = false
+      fullWidth = false,
+      onRemoveValue = () => {},
+      onAddValue = () => {},
+      showCloseButton = false,
     } = this.props;
 
     const options = optionMapping(values, valueToText)
     
     return (
       <OutsideClickDetectingDiv 
-        className={ cn("relative", { "flex-1" : fullWidth }) } 
+        className={ cn("relative flex items-center", { "flex-1" : fullWidth }) } 
         onClickOutside={this.onClickOutside}
       >
-        <Input
+        {/* <EventSearchInput /> */}
+        <div className={stl.inputWrapper}>
+          <input
+            name="query"
+            // className={cn(stl.input)}
+            onFocus={ () => this.setState({ddOpen: true})}
+            onChange={ this.onInputChange }
+            onBlur={ this.onBlur }
+            onFocus={ () => this.setState({ddOpen: true})}
+            value={ query }
+            autoFocus={ true }
+            type="text"
+            placeholder={ placeholder }
+            onPaste={(e) => {
+              const text = e.clipboardData.getData('Text');
+              this.hiddenInput.value = text;
+              pasted = true; // to use only the hidden input
+            } }
+          />
+          <div className={stl.right} onClick={showCloseButton ? onRemoveValue : onAddValue}>
+            { showCloseButton ? <Icon name="close" size="18" /> : <span className="px-1">or</span>}
+          </div>
+        </div>
+
+        {showCloseButton && <div className='ml-2'>or</div>}
+        {/* <Input
           className={ cn(stl.searchInput, { [ stl.fullWidth] : fullWidth }) }
           onChange={ this.onInputChange }
           onBlur={ this.onBlur }
           onFocus={ () => this.setState({ddOpen: true})}
           value={ query }
-          icon="search"
+          // icon="search"
+          label={{ basic: true, content: <div>test</div> }}
+          labelPosition='right'
           loading={ loading }
           autoFocus={ true }
           type="search"
@@ -144,7 +175,7 @@ class AutoComplete extends React.PureComponent {
             this.hiddenInput.value = text;
             pasted = true; // to use only the hidden input
           } }
-        />
+        /> */}
         <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea>
         { ddOpen && options.length > 0 &&
           <div className={ stl.menu }>
diff --git a/frontend/app/components/BugFinder/AutoComplete/autoComplete.css b/frontend/app/components/BugFinder/AutoComplete/autoComplete.css
index 79439f51c..09a9a6571 100644
--- a/frontend/app/components/BugFinder/AutoComplete/autoComplete.css
+++ b/frontend/app/components/BugFinder/AutoComplete/autoComplete.css
@@ -19,6 +19,13 @@
     color: $gray-darkest !important;
     font-size: 14px !important;
     background-color: rgba(255, 255, 255, 0.8) !important;
+
+    & .label {
+      padding: 0px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
   height: 28px !important;
   width: 280px;
@@ -28,3 +35,30 @@
 .fullWidth {
   width: 100% !important;
 }
+
+.inputWrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & input {
+    height: 28px;
+    font-size: 13px !important;
+    padding: 0 5px !important;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    background-color: $gray-lightest;
+    border-left: solid thin $gray-light !important;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index a71c54cf9..93ad66347 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -24,9 +24,12 @@ import SessionFlowList from './SessionFlowList/SessionFlowList';
 import { LAST_7_DAYS } from 'Types/app/period';
 import { resetFunnel } from 'Duck/funnels';
 import { resetFunnelFilters } from 'Duck/funnelFilters'
-import NoSessionsMessage from '../shared/NoSessionsMessage';
-import TrackerUpdateMessage from '../shared/TrackerUpdateMessage';
+import NoSessionsMessage from 'Shared/NoSessionsMessage';
+import TrackerUpdateMessage from 'Shared/TrackerUpdateMessage';
+import SessionSearchField from 'Shared/SessionSearchField'
+import SavedSearch from 'Shared/SavedSearch'
 import LiveSessionList from './LiveSessionList'
+import SessionSearch from 'Shared/SessionSearch';
 
 const weakEqual = (val1, val2) => {
   if (!!val1 === false && !!val2 === false) return true;
@@ -170,8 +173,13 @@ export default class BugFinder extends React.PureComponent {
               data-hidden={ activeTab === 'live' || activeTab === 'favorite' }
               className="mb-5"
             >
-              <EventFilter />
-            </div>            
+              <div className="flex items-center">
+                <div style={{ width: "70%", marginRight: "10px"}}><SessionSearchField /></div>
+                <SavedSearch />
+              </div>
+              <SessionSearch />
+              {/* <EventFilter /> */}
+            </div>
             { activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
             { activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }
             { activeTab.type === 'live' && <LiveSessionList /> }
diff --git a/frontend/app/components/BugFinder/DateRange.js b/frontend/app/components/BugFinder/DateRange.js
index 60e98ffa1..b9bbd745a 100644
--- a/frontend/app/components/BugFinder/DateRange.js
+++ b/frontend/app/components/BugFinder/DateRange.js
@@ -1,22 +1,28 @@
 import { connect } from 'react-redux';
-import { applyFilter } from 'Duck/filters';
+// import { applyFilter } from 'Duck/filters';
+import { applyFilter } from 'Duck/search';
 import { fetchList as fetchFunnelsList } from 'Duck/funnels';
 import DateRangeDropdown from 'Shared/DateRangeDropdown';
 
 @connect(state => ({
-  rangeValue: state.getIn([ 'filters', 'appliedFilter', 'rangeValue' ]),
-  startDate: state.getIn([ 'filters', 'appliedFilter', 'startDate' ]),
-  endDate: state.getIn([ 'filters', 'appliedFilter', 'endDate' ]),
+  filter: state.getIn([ 'search', 'instance' ]),
+  // rangeValue: state.getIn([ 'search', 'instance', 'rangeValue' ]),
+  // startDate: state.getIn([ 'search', 'instance', 'startDate' ]),
+  // endDate: state.getIn([ 'search', 'instance', 'endDate' ]),
 }), {
   applyFilter, fetchFunnelsList
 })
 export default class DateRange extends React.PureComponent {
+
   onDateChange = (e) => {
+    console.log('onDateChange', e);
     this.props.fetchFunnelsList(e.rangeValue)
     this.props.applyFilter(e)
   }
   render() {
-    const { startDate, endDate, rangeValue, className } = this.props;
+    const { filter: { rangeValue, startDate, endDate }, className } = this.props;
+    // const { startDate, endDate, rangeValue, className } = this.props;
+    
     return (
       <DateRangeDropdown
         button
diff --git a/frontend/app/components/BugFinder/EventFilter/EventFilter.js b/frontend/app/components/BugFinder/EventFilter/EventFilter.js
index 44fe0bf00..5bc1d1b32 100644
--- a/frontend/app/components/BugFinder/EventFilter/EventFilter.js
+++ b/frontend/app/components/BugFinder/EventFilter/EventFilter.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { Input } from 'semantic-ui-react';
 import { DNDContext } from 'Components/hocs/dnd';
 import {
-  addEvent, applyFilter, moveEvent, clearEvents,
+  addEvent, applyFilter, moveEvent, clearEvents, edit,
   addCustomFilter, addAttribute, setSearchQuery, setActiveFlow, setFilterOption
 } from 'Duck/filters';
 import { fetchList as fetchEventList } from 'Duck/events';
@@ -11,7 +11,7 @@ import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import EventEditor from './EventEditor';
 import ListHeader from '../ListHeader';
 import FilterModal from '../CustomFilters/FilterModal';
-import { IconButton } from 'UI';
+import { IconButton, SegmentSelection } from 'UI';
 import stl from './eventFilter.css';
 import Attributes from '../Attributes/Attributes';
 import RandomPlaceholder from './RandomPlaceholder';
@@ -19,6 +19,7 @@ import CustomFilters from '../CustomFilters';
 import ManageFilters from '../ManageFilters';
 import { blink as setBlink }  from 'Duck/funnels';
 import cn from 'classnames';
+import SaveFilterButton from 'Shared/SaveFilterButton';
 
 @connect(state => ({
   events: state.getIn([ 'filters', 'appliedFilter', 'events' ]),
@@ -41,7 +42,8 @@ import cn from 'classnames';
   setSearchQuery,
   setActiveFlow,
   setFilterOption,
-  setBlink
+  setBlink,
+  edit,
 })
 @DNDContext
 export default class EventFilter extends React.PureComponent {
@@ -109,6 +111,10 @@ export default class EventFilter extends React.PureComponent {
     this.props.setActiveFlow(null)
   }
 
+  changeConditionTab = (e, { name, value }) => {
+    this.props.edit({ [ 'condition' ]: value })
+  };
+
   render() {
     const {
       events,
@@ -124,34 +130,6 @@ export default class EventFilter extends React.PureComponent {
 
     return (
       <OutsideClickDetectingDiv className={ stl.wrapper } onClickOutside={ this.closeModal } >
-        { showPlacehoder && !hasFilters &&
-          <div
-            className={ stl.randomElement }
-            onClick={ this.onPlaceholderClick }
-          >
-            { !searchQuery && 
-              <div className={ stl.placeholder }>Search for users, clicks, page visits, requests, errors and more</div>
-              // <RandomPlaceholder onClick={ this.onPlaceholderItemClick } appliedFilterKeys={ appliedFilterKeys } />
-            }
-          </div>
-        }
-        <Input
-          inputProps={ { "data-openreplay-label": "Search", "autocomplete": "off" } }
-          className={stl.searchField}
-          ref={ this.inputRef }
-          onChange={ this.onSearchChange }
-          onKeyUp={this.onKeyUp}
-          value={searchQuery}
-          icon="search"
-          iconPosition="left"
-          placeholder={ hasFilters ? 'Search sessions using any captured event (click, input, page, error...)' : ''}
-          fluid
-          onFocus={ this.onFocus }
-          onBlur={ this.onBlur }
-          id="search"
-          autocomplete="off"
-        />
-
         <FilterModal
           close={ this.closeModal }
           displayed={ showFilterModal }
@@ -161,7 +139,24 @@ export default class EventFilter extends React.PureComponent {
         />
         
         { hasFilters &&
-          <div className={cn("bg-white rounded border-gray-light mt-2 relative", { 'blink-border' : blink })}>            
+            <div className={cn("bg-white rounded border-gray-light mt-2 relative", { 'blink-border' : blink })}>            
+              <div className="absolute right-0 top-0 m-3 z-10 flex items-center">
+                <div className="mr-2">Operator</div>
+                <SegmentSelection
+                  primary
+                  name="condition"
+                  extraSmall={true}
+                  // className="my-3"
+                  onSelect={ this.changeConditionTab }
+                  value={{ value: appliedFilter.condition }}
+                  list={ [
+                    { name: 'AND', value: 'and' },
+                    { name: 'OR', value: 'or' },
+                    { name: 'THEN', value: 'then' },
+                  ]}
+                />
+              </div>
+            
             { events.size > 0 &&
               <>
                 <div className="py-1"><ListHeader title="Events" /></div>
@@ -189,6 +184,7 @@ export default class EventFilter extends React.PureComponent {
                   showFilters={ true }
                 />
               </div>
+              <SaveFilterButton />
               <div className="flex items-center">
                 <div>
                   <IconButton plain label="CLEAR STEPS" onClick={ this.clearEvents } />
diff --git a/frontend/app/components/BugFinder/Filters/SortDropdown.js b/frontend/app/components/BugFinder/Filters/SortDropdown.js
index 80f88a0d7..cdcc2e468 100644
--- a/frontend/app/components/BugFinder/Filters/SortDropdown.js
+++ b/frontend/app/components/BugFinder/Filters/SortDropdown.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { Dropdown } from 'semantic-ui-react';
 import { Icon } from 'UI';
 import { sort } from 'Duck/sessions';
-import { applyFilter } from 'Duck/filters';
+import { applyFilter } from 'Duck/search';
 import stl from './sortDropdown.css';
 
 @connect(null, { sort, applyFilter })
diff --git a/frontend/app/components/BugFinder/filterSelectionButton.css b/frontend/app/components/BugFinder/filterSelectionButton.css
index 1741e7d83..4c51cf3a4 100644
--- a/frontend/app/components/BugFinder/filterSelectionButton.css
+++ b/frontend/app/components/BugFinder/filterSelectionButton.css
@@ -10,7 +10,7 @@
   width: 150px;
   color: $gray-darkest;
   cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.8) !important;
+  background-color: rgba(0, 0, 0, 0.1) !important;
   &:hover {
     background-color: white;
   }
diff --git a/frontend/app/components/Dashboard/Dashboard.js b/frontend/app/components/Dashboard/Dashboard.js
index ff91e10a6..7d2a2f37b 100644
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@@ -5,6 +5,7 @@ import withPermissions from 'HOCs/withPermissions'
 import { setPeriod, setPlatform, fetchMetadataOptions } from 'Duck/dashboard';
 import { NoContent } from 'UI';
 import { WIDGET_KEYS } from 'Types/dashboard';
+import CustomMetrics from 'Shared/CustomMetrics';
 
 import { 
   MissingResources,
@@ -38,6 +39,7 @@ import SideMenuSection from './SideMenu/SideMenuSection';
 import styles from './dashboard.css';
 import WidgetSection from 'Shared/WidgetSection/WidgetSection';
 import OverviewWidgets from './Widgets/OverviewWidgets/OverviewWidgets';
+import CustomMetricsWidgets from './Widgets/CustomMetricsWidgets/CustomMetricsWidgets';
 import WidgetHolder from './WidgetHolder/WidgetHolder';
 import MetricsFilters from 'Shared/MetricsFilters/MetricsFilters';
 import { withRouter } from 'react-router';
@@ -46,6 +48,7 @@ const OVERVIEW = 'overview';
 const PERFORMANCE = 'performance';
 const ERRORS_N_CRASHES = 'errors_n_crashes';
 const RESOURCES = 'resources';
+const CUSTOM_METRICS = 'custom_metrics';
 
 const menuList = [
   {
@@ -184,6 +187,7 @@ export default class Dashboard extends React.PureComponent {
           <div>
             <div className={ cn(styles.header, "flex items-center w-full") }>            
               <MetricsFilters />
+              <CustomMetrics />
             </div>
             <div className="">
               <NoContent
@@ -199,6 +203,12 @@ export default class Dashboard extends React.PureComponent {
                   </div>
                 </WidgetSection>
 
+                <WidgetSection title="Custom Metrics" type="customMetrics" className="mb-4">
+                  <div className={ cn("gap-4", { 'grid grid-cols-2' : !comparing })} ref={this.list[CUSTOM_METRICS]}>
+                    <CustomMetricsWidgets onClickEdit={(e) => null}/>
+                  </div>
+                </WidgetSection>
+
                 <WidgetSection title="Errors" className="mb-4" type="errors">
                   <div className={ cn("gap-4", { 'grid grid-cols-2' : !comparing })} ref={this.list[ERRORS_N_CRASHES]}>
                     { dashboardAppearance.impactedSessionsByJsErrors && <WidgetHolder Component={SessionsAffectedByJSErrors} /> }
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css
new file mode 100644
index 000000000..1d1ef3ee4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css
@@ -0,0 +1,6 @@
+.wrapper {
+  background-color: white;
+  /* border: solid thin $gray-medium; */
+  border-radius: 3px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
new file mode 100644
index 000000000..21b04b809
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Loader, NoContent, Icon } from 'UI';
+import { widgetHOC, Styles } from '../../common';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
+import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
+import CustomMetricWidgetHoc from '../../common/CustomMetricWidgetHoc';
+import stl from './CustomMetricWidget.css';
+import { getChartFormatter } from 'Types/dashboard/helper'; 
+import { remove, setAlertMetricId } from 'Duck/customMetrics';
+import { confirm } from 'UI/Confirmation';
+import APIClient from 'App/api_client';
+import { setShowAlerts } from 'Duck/dashboard';
+
+const customParams = rangeName => {
+  const params = { density: 70 }
+
+  if (rangeName === LAST_24_HOURS) params.density = 70
+  if (rangeName === LAST_30_MINUTES) params.density = 70
+  if (rangeName === YESTERDAY) params.density = 70
+  if (rangeName === LAST_7_DAYS) params.density = 70
+  
+  return params
+}
+
+interface Period {
+  rangeName: string;
+}
+
+interface Props {
+  metric: any;
+  // loading?: boolean;
+  data?: any;
+  showSync?: boolean;
+  compare?: boolean;
+  period?: Period;
+  onClickEdit: (e) => void;
+  remove: (id) => void;
+  setShowAlerts: (showAlerts) => void;
+  setAlertMetricId: (id) => void;
+  onAlertClick: (e) => void;
+}
+function CustomMetricWidget(props: Props) {
+  const { metric, showSync, compare, period = { rangeName: LAST_24_HOURS} } = props;
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<any>({ chart: [] })
+
+  const colors = compare ? Styles.compareColors : Styles.colors;
+  const params = customParams(period.rangeName)
+  const gradientDef = Styles.gradientDef();
+  const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
+
+  useEffect(() => {
+
+    // dataWrapper: (p, period) => SessionsImpactedBySlowRequests({ chart: p})
+		// 	.update("chart", getChartFormatter(period))
+    
+    new APIClient()['post']('/custom_metrics/chart', { ...metricParams, q: metric.name })
+      .then(response => response.json())
+      .then(({ errors, data }) => {
+        if (errors) {
+          console.log('err', errors)
+        } else {
+          // console.log('data', data);
+          // const _data = data[0].map(CustomMetric).update("chart", getChartFormatter(period)).toJS();
+          const _data = getChartFormatter(period)(data[0]);
+          console.log('__data', _data)
+          setData({ chart: _data });
+        }
+      }).finally(() => setLoading(false));
+  }, [])
+
+  const deleteHandler = async () => {
+    if (await confirm({
+      header: 'Custom Metric',
+      confirmButton: 'Delete',
+      confirmation: `Are you sure you want to delete ${metric.name}`
+    })) {
+      props.remove(metric.metricId)
+    }
+  }
+
+  // const onAlertClick = () => {
+  //   props.setShowAlerts(true)
+  //   props.setAlertMetricId(metric.metricId)
+  // }
+
+  return (
+    <div className={stl.wrapper}>
+      <div className="flex items-center mb-10 p-2">
+        <div className="font-medium">{metric.name + ' ' + metric.metricId}</div>
+        <div className="ml-auto flex items-center">
+        <div className="cursor-pointer mr-6" onClick={deleteHandler}>
+            <Icon name="trash" size="14" />
+          </div>
+          <div className="cursor-pointer mr-6">
+            <Icon name="pencil" size="14" />
+          </div>
+          <div className="cursor-pointer" onClick={props.onAlertClick}>
+            <Icon name="bell-plus" size="14" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <Loader loading={ loading } size="small">
+          <NoContent
+            size="small"
+            show={ data.chart.length === 0 }
+          >
+            <ResponsiveContainer height={ 240 } width="100%">
+              <AreaChart
+                data={ data.chart }
+                margin={Styles.chartMargins}
+                syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+              >
+                {gradientDef}
+                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+                <YAxis
+                  {...Styles.yaxis}
+                  label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
+                  allowDecimals={false}
+                />
+                <Tooltip {...Styles.tooltip} />
+                <Area
+                  name="Sessions"
+                  type="monotone"
+                  dataKey="count"
+                  stroke={colors[0]}
+                  fillOpacity={ 1 }
+                  strokeWidth={ 2 }
+                  strokeOpacity={ 0.8 }
+                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </NoContent>
+        </Loader>
+      </div>
+    </div>
+  );
+}
+
+export default connect(null, { remove, setShowAlerts, setAlertMetricId })(CustomMetricWidget);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
new file mode 100644
index 000000000..4a6d9b653
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricWidget';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css
new file mode 100644
index 000000000..1d1ef3ee4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css
@@ -0,0 +1,6 @@
+.wrapper {
+  background-color: white;
+  /* border: solid thin $gray-medium; */
+  border-radius: 3px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
new file mode 100644
index 000000000..8c09ed389
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Loader, NoContent, Icon } from 'UI';
+import { widgetHOC, Styles } from '../../common';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
+import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
+import stl from './CustomMetricWidgetPreview.css';
+import { getChartFormatter } from 'Types/dashboard/helper'; 
+import { remove } from 'Duck/customMetrics';
+import { confirm } from 'UI/Confirmation';
+
+import APIClient from 'App/api_client';
+
+const customParams = rangeName => {
+  const params = { density: 70 }
+
+  if (rangeName === LAST_24_HOURS) params.density = 70
+  if (rangeName === LAST_30_MINUTES) params.density = 70
+  if (rangeName === YESTERDAY) params.density = 70
+  if (rangeName === LAST_7_DAYS) params.density = 70
+  
+  return params
+}
+
+interface Period {
+  rangeName: string;
+}
+
+interface Props {
+  metric: any;
+  // loading?: boolean;
+  data?: any;
+  showSync?: boolean;
+  compare?: boolean;
+  period?: Period;
+  onClickEdit?: (e) => void;
+  remove: (id) => void;
+}
+function CustomMetricWidget(props: Props) {
+  const { metric, showSync, compare, period = { rangeName: LAST_24_HOURS} } = props;
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<any>({ chart: [{}] })
+
+  const colors = compare ? Styles.compareColors : Styles.colors;
+  const params = customParams(period.rangeName)
+  const gradientDef = Styles.gradientDef();
+  const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
+
+  useEffect(() => {
+    new APIClient()['post']('/custom_metrics/try', { ...metricParams, ...metric.toSaveData() })
+      .then(response => response.json())
+      .then(({ errors, data }) => {
+        if (errors) {
+          console.log('err', errors)
+        } else {
+          const _data = getChartFormatter(period)(data[0]);
+          console.log('__data', _data)
+          setData({ chart: _data });
+        }
+      }).finally(() => setLoading(false));
+  }, [metric])
+
+  
+
+  return (
+    <div className={stl.wrapper}>
+      <div className="flex items-center mb-10 p-2">
+        
+      </div>
+      <div>
+        <Loader loading={ loading } size="small">
+          <NoContent
+            size="small"
+            show={ data.chart.length === 0 }
+          >
+            <ResponsiveContainer height={ 240 } width="100%">
+              <AreaChart
+                data={ data.chart }
+                margin={Styles.chartMargins}
+                syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+              >
+                {gradientDef}
+                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+                <YAxis
+                  {...Styles.yaxis}
+                  label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
+                  allowDecimals={false}
+                />
+                <Tooltip {...Styles.tooltip} />
+                <Area
+                  name="Sessions"
+                  type="monotone"
+                  dataKey="count"
+                  stroke={colors[0]}
+                  fillOpacity={ 1 }
+                  strokeWidth={ 2 }
+                  strokeOpacity={ 0.8 }
+                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </NoContent>
+        </Loader>
+      </div>
+    </div>
+  );
+}
+
+export default connect(null, { remove })(CustomMetricWidget);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts
new file mode 100644
index 000000000..9595513c4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricWidgetPreview';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
new file mode 100644
index 000000000..632c7dc22
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { fetchList } from 'Duck/customMetrics';
+import { list } from 'App/components/BugFinder/CustomFilters/filterModal.css';
+import CustomMetricWidget from './CustomMetricWidget';
+import AlertFormModal from 'App/components/Alerts/AlertFormModal';
+
+interface Props {
+  fetchList: Function;
+  list: any;
+  onClickEdit: (e) => void;
+}
+function CustomMetricsWidgets(props: Props) {
+  const { list } = props;
+  const [activeMetricId, setActiveMetricId] = useState(null);
+
+  useEffect(() => {
+    props.fetchList()
+  }, [])
+
+  return (
+    <>
+      {list.map((item: any) => (
+        <CustomMetricWidget
+          metric={item}
+          onClickEdit={props.onClickEdit}
+          onAlertClick={(e) => setActiveMetricId(item.metricId)}
+        />
+      ))}
+
+      <AlertFormModal
+        showModal={!!activeMetricId}
+        metricId={activeMetricId}
+        onClose={() => setActiveMetricId(null)}
+      />
+    </>
+  );
+}
+
+export default connect(state => ({
+  list: state.getIn(['customMetrics', 'list']),
+}), { fetchList })(CustomMetricsWidgets);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts
new file mode 100644
index 000000000..54d9a4192
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricsWidgets';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css
new file mode 100644
index 000000000..1d1ef3ee4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css
@@ -0,0 +1,6 @@
+.wrapper {
+  background-color: white;
+  /* border: solid thin $gray-medium; */
+  border-radius: 3px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
new file mode 100644
index 000000000..ba4a2726a
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import stl from './CustomMetricWidgetHoc.css';
+import { Icon } from 'UI';
+
+interface Props {
+}
+const CustomMetricWidgetHoc = ({ ...rest }: Props) => BaseComponent => {
+
+  console.log('CustomMetricWidgetHoc', rest);
+  return (
+    <div className={stl.wrapper}>
+      <div className="flex items-center mb-10 p-2">
+        <div className="font-medium">Widget Name</div>
+        <div className="ml-auto">
+          <div className="cursor-pointer">
+            <Icon name="bell-plus" size="16" />
+          </div>
+        </div>
+      </div>
+      {/* <BaseComponent {...rest} /> */}
+    </div>
+  );
+}
+
+export default CustomMetricWidgetHoc;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts
new file mode 100644
index 000000000..0be8a5be5
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricWidgetHoc';
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
new file mode 100644
index 000000000..60bcce7a9
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { Form, SegmentSelection, Button, IconButton } from 'UI';
+import FilterSeries from '../FilterSeries';
+import { connect } from 'react-redux';
+import { edit as editMetric, save } from 'Duck/customMetrics';
+import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview';
+
+interface Props {
+  metric: any;
+  editMetric: (metric) => void;
+  save: (metric) => void;
+  loading: boolean;
+}
+function CustomMetricForm(props: Props) {
+  const { metric, loading } = props;
+
+  const addSeries = () => {
+    const newSeries = {
+      name: `Series ${metric.series.size + 1}`,
+      type: '',
+      series: [],
+      filter: {
+        type: '',
+        value: '',
+      },
+    };
+    props.editMetric({
+      ...metric,
+      series: [...metric.series, newSeries],
+    });
+  }
+
+  const removeSeries = (index) => {
+    const newSeries = metric.series.filter((_series, i) => {
+      return i !== index;
+    });
+    props.editMetric({
+      ...metric,
+      series: newSeries,
+    });
+  }
+
+  const write = ({ target: { value, name } }) => props.editMetric({ ...metric.toData(), [ name ]: value })
+
+  const changeConditionTab = (e, { name, value }) => {
+    props.editMetric({ ...metric.toData(), [ 'type' ]: value })
+  };
+
+  return (
+    <Form
+      className="relative"
+      onSubmit={() => props.save(metric)}
+    >
+      <div className="p-5 pb-20" style={{ height: 'calc(100vh - 60px)', overflowY: 'auto' }}>
+        <div className="form-group">
+          <label className="font-medium">Metric Title</label>
+          <input
+            autoFocus={ true }
+            className="text-lg"
+            name="name"
+            style={{ fontSize: '18px', padding: '10px', fontWeight: '600'}}
+            // value={ instance && instance.name }
+            onChange={ write }
+            placeholder="Metric Title"
+            id="name-field"
+          />
+        </div>
+
+        <div className="form-group">
+          <label className="font-medium">Metric Type</label>
+          <div className="flex items-center">
+            <span className="bg-white p-1 px-2 border rounded">Timeseries</span>
+            <span className="mx-2 color-gray-medium">of</span>
+            <div>
+              <SegmentSelection
+                primary
+                name="condition"
+                small={true}
+                // className="my-3"
+                onSelect={ changeConditionTab }
+                value={{ value: metric.type }}
+                list={ [
+                  { name: 'Session Count', value: 'session_count' },
+                  { name: 'Session Percentage', value: 'session_percentage' },
+                ]}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="form-group">
+          <label className="font-medium">Series</label>
+          {metric.series && metric.series.size > 0 && metric.series.map((series: any, index: number) => (
+            <div className="mb-2">
+              <FilterSeries
+                seriesIndex={index}
+                series={series}
+                onRemoveSeries={() => removeSeries(index)}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-end">
+          <IconButton onClick={addSeries} primaryText label="SERIES" icon="plus" />
+        </div>
+
+        <div className="my-4" />
+
+        <CustomMetricWidgetPreview metric={metric} />
+      </div>
+
+      <div className="fixed border-t w-full bottom-0 px-5 py-2 bg-white">
+        <Button loading={loading} primary>
+          Save
+        </Button>
+      </div>
+    </Form>
+  );
+}
+
+export default connect(state => ({
+  metric: state.getIn(['customMetrics', 'instance']),
+  loading: state.getIn(['customMetrics', 'saveRequest', 'loading']),
+}), { editMetric, save })(CustomMetricForm);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts
new file mode 100644
index 000000000..e6ffb605b
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricForm';
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
new file mode 100644
index 000000000..158ef73c5
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
@@ -0,0 +1,49 @@
+import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview';
+import React, { useState } from 'react';
+import { IconButton, SlideModal } from 'UI'
+import CustomMetricForm from './CustomMetricForm';
+import { connect } from 'react-redux';
+import { edit } from 'Duck/customMetrics';
+
+interface Props {
+  metric: any;
+  edit: (metric) => void;
+}
+function CustomMetrics(props: Props) {
+  const { metric } = props;
+  const [showModal, setShowModal] = useState(false);
+
+  const onClose = () => {
+    setShowModal(false);
+  }
+
+  return (
+    <div className="self-start">
+      <IconButton outline icon="plus" label="CREATE METRIC" onClick={() => {
+        setShowModal(true);
+        // props.edit({ name: 'New', series: [{ name: '', filter: {} }], type: '' });
+      }} />
+
+      <SlideModal
+        title={
+          <div className="flex items-center">
+            <span className="mr-3">{ 'Custom Metric' }</span>
+          </div>
+        }
+        isDisplayed={ showModal }
+        onClose={ () => setShowModal(false)}
+        // size="medium"
+        content={ (showModal || metric) && (
+          <div style={{ backgroundColor: '#f6f6f6' }}>
+            <CustomMetricForm metric={metric} />
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+export default connect(state => ({
+  metric: state.getIn(['customMetrics', 'instance']),
+  alertInstance: state.getIn(['alerts', 'instance']),
+}), { edit })(CustomMetrics);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
new file mode 100644
index 000000000..40214855c
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import FilterList from 'Shared/Filters/FilterList';
+import { edit, updateSeries } from 'Duck/customMetrics';
+import { connect } from 'react-redux';
+import { IconButton, Button, Icon, SegmentSelection } from 'UI';
+import FilterSelection from '../../Filters/FilterSelection';
+import SeriesName from './SeriesName';
+
+interface Props {
+  seriesIndex: number;
+  series: any;
+  edit: typeof edit;
+  updateSeries: typeof updateSeries;
+  onRemoveSeries: (seriesIndex) => void;
+}
+
+function FilterSeries(props: Props) {
+  const [expanded, setExpanded] = useState(true)
+  const { series, seriesIndex } = props;
+
+  const onAddFilter = (filter) => {
+    filter.value = [""]
+    const newFilters = series.filter.filters.concat(filter);
+    props.updateSeries(seriesIndex, {
+      ...series,
+      filter: {
+        ...series.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  const onUpdateFilter = (filterIndex, filter) => {
+    const newFilters = series.filter.filters.map((_filter, i) => {
+      if (i === filterIndex) {
+        return filter;
+      } else {
+        return _filter;
+      }
+    });
+
+    props.updateSeries(seriesIndex, {
+      ...series.toData(),
+      filter: {
+        ...series.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  const onChangeEventsOrder = (e, { name, value }) => {
+    props.updateSeries(seriesIndex, {
+      ...series.toData(),
+      filter: {
+        ...series.filter,
+        eventsOrder: value,
+      }
+    });
+  }
+
+  const onRemoveFilter = (filterIndex) => {
+    const newFilters = series.filter.filters.filter((_filter, i) => {
+      return i !== filterIndex;
+    });
+
+    props.updateSeries(seriesIndex, {
+      ...series,
+      filter: {
+        ...series.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  return (
+    <div className="border rounded bg-white">
+      <div className="border-b px-5 h-12 flex items-center relative">
+        {/* <div className="font-medium flex items-center">
+          { series.name }
+          <div className="ml-3 cursor-pointer"><Icon name="pencil" size="14" /></div>
+        </div> */}
+        <div className="mr-auto">
+          <SeriesName name={series.name} onUpdate={() => null } />
+        </div>    
+    
+        <div className="flex items-center cursor-pointer" >
+          <div onClick={props.onRemoveSeries} className="ml-3">
+            <Icon name="trash" size="16" />
+          </div>
+
+          <div onClick={() => setExpanded(!expanded)} className="ml-3">
+            <Icon name="chevron-down" size="16" />
+          </div>
+          
+        </div>
+      </div>
+      { expanded && (
+        <>
+          <div className="p-5">
+            { series.filter.filters.size > 0 ? (
+              <FilterList
+                // filters={series.filter.filters.toJS()}
+                filter={series.filter}
+                onUpdateFilter={onUpdateFilter}
+                onRemoveFilter={onRemoveFilter}
+                onChangeEventsOrder={onChangeEventsOrder}
+              />
+            ): (
+              <div className="color-gray-medium">Add user event or filter to build the series.</div>
+            )}
+          </div>
+          <div className="px-5 border-t h-12 flex items-center">
+            <FilterSelection
+              filter={undefined}
+              onFilterClick={onAddFilter}
+            >
+              <IconButton primaryText label="ADD STEP" icon="plus" />
+            </FilterSelection>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default connect(null, { edit, updateSeries })(FilterSeries);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
new file mode 100644
index 000000000..7be696fd5
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
@@ -0,0 +1,46 @@
+import { edit } from 'App/components/ui/ItemMenu/itemMenu.css';
+import React, { useState, useRef, useEffect } from 'react';
+import { Icon } from 'UI';
+
+interface Props {
+  name: string;
+  onUpdate: (name) => void;
+}
+function SeriesName(props: Props) {
+  const [editing, setEditing] = useState(false)
+  const [name, setName] = useState(props.name)
+  const ref = useRef<any>(null)
+
+  const write = ({ target: { value, name } }) => {
+    setName(value)
+  }
+
+  const onBlur = () => {
+    setEditing(false)
+    // props.onUpdate(name)
+  }
+
+  useEffect(() => {
+    if (editing) {
+      ref.current.focus()
+    }
+  }, [editing])
+  
+  // const { name } = props;
+  return (
+    <div className="font-medium flex items-center">
+      <input
+        ref={ ref }
+        name="name"
+        className="fluid border-0 -mx-2 px-2"
+        value={name} readOnly={!editing} 
+        onChange={write}
+        onBlur={onBlur}
+        onFocus={() => setEditing(true)}
+      />
+      <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div>
+    </div>
+  );
+}
+
+export default SeriesName;
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts
new file mode 100644
index 000000000..90e63cdb6
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts
@@ -0,0 +1 @@
+export { default }  from './SeriesName';
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts b/frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts
new file mode 100644
index 000000000..5882e382a
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSeries'
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/index.ts b/frontend/app/components/shared/CustomMetrics/index.ts
new file mode 100644
index 000000000..ebbb8203c
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetrics';
\ No newline at end of file
diff --git a/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js b/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js
index 176ae2c4a..daee15cc3 100644
--- a/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js
+++ b/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js
@@ -137,12 +137,13 @@ class AttributeValueField extends React.PureComponent {
     const { filter, onChange } = this.props;
     const _showAutoComplete = this.isAutoComplete(filter.type);
     const _params = _showAutoComplete ? this.getParams(filter) : {};    
-    let _optionsEndpoint= '/events/search';    
+    let _optionsEndpoint= '/events/search';
+    console.log('value', filter.value)
 
     return (
       <React.Fragment>
         { _showAutoComplete ? 
-          <AutoComplete            
+          <AutoComplete
             name={ 'value' }
             endpoint={ _optionsEndpoint }
             value={ filter.value }
@@ -151,6 +152,7 @@ class AttributeValueField extends React.PureComponent {
             onSelect={ onChange }
             headerText={ <h5 className={ stl.header }>{ getHeader(filter.type) }</h5> }
             fullWidth={ (filter.type === TYPES.CONSOLE || filter.type === TYPES.LOCATION || filter.type === TYPES.CUSTOM) && filter.value }
+            // onAddOrRemove={}
           />
         : this.renderField()
         }
diff --git a/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js b/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js
index 922b7f650..e075b17bd 100644
--- a/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js
+++ b/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js
@@ -77,7 +77,7 @@ class AutoComplete extends React.PureComponent {
     noResultsMessage: SOME_ERROR_MSG,
   })
 
-  onInputChange = (e, { name, value }) => {    
+  onInputChange = ({ target: { value } }) => {    
     changed = true;
     this.setState({ query: value, updated: true })
     const _value = value.trim();
@@ -118,7 +118,8 @@ class AutoComplete extends React.PureComponent {
       valueToText = defaultValueToText,
       placeholder = 'Type to search...',
       headerText = '',
-      fullWidth = false
+      fullWidth = false,
+      onAddOrRemove = () => null,
     } = this.props;
 
     const options = optionMapping(values, valueToText)
@@ -128,7 +129,7 @@ class AutoComplete extends React.PureComponent {
         className={ cn("relative", { "flex-1" : fullWidth }) } 
         onClickOutside={this.onClickOutside}
       >
-        <Input
+        {/* <Input
           className={ cn(stl.searchInput, { [ stl.fullWidth] : fullWidth }) }
           onChange={ this.onInputChange }
           onBlur={ this.onBlur }
@@ -144,7 +145,30 @@ class AutoComplete extends React.PureComponent {
             this.hiddenInput.value = text;
             pasted = true; // to use only the hidden input
           } }
-        />
+        /> */}
+        <div className={stl.inputWrapper}>
+          <input
+            name="query"
+            // className={cn(stl.input)}
+            onFocus={ () => this.setState({ddOpen: true})}
+            onChange={ this.onInputChange }
+            onBlur={ this.onBlur }
+            onFocus={ () => this.setState({ddOpen: true})}
+            value={ query }
+            autoFocus={ true }
+            type="text"
+            placeholder={ placeholder }
+            onPaste={(e) => {
+              const text = e.clipboardData.getData('Text');
+              this.hiddenInput.value = text;
+              pasted = true; // to use only the hidden input
+            } }
+          />
+          <div className={cn(stl.right, 'cursor-pointer')} onLick={onAddOrRemove}>
+            {/* <Icon name="close" size="18" /> */}
+            <span className="px-1">or</span>
+          </div>
+        </div>
         <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea>
         { ddOpen && options.length > 0 &&
           <div className={ stl.menu }>
diff --git a/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css b/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css
index c2c827bfe..b72653c42 100644
--- a/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css
+++ b/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css
@@ -28,3 +28,30 @@
 .fullWidth {
   width: 100% !important;
 }
+
+.inputWrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & input {
+    height: 28px;
+    font-size: 13px !important;
+    padding: 0 5px !important;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    background-color: $gray-lightest;
+    border-left: solid thin $gray-light !important;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx b/frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx
new file mode 100644
index 000000000..0a7752ccd
--- /dev/null
+++ b/frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface Props {
+  
+}
+function EventSearchInput(props) {
+  return (
+    <div>
+      <input
+        className="border rounded p-1"
+        type="text" placeholder="Search for an event"
+      />
+    </div>
+  );
+}
+
+export default EventSearchInput;
\ No newline at end of file
diff --git a/frontend/app/components/shared/EventSearchInput/index.ts b/frontend/app/components/shared/EventSearchInput/index.ts
new file mode 100644
index 000000000..2e4e57078
--- /dev/null
+++ b/frontend/app/components/shared/EventSearchInput/index.ts
@@ -0,0 +1 @@
+export { default } from './EventSearchInput';
\ No newline at end of file
diff --git a/frontend/app/components/shared/FilterDropdown/FilterDropdown.js b/frontend/app/components/shared/FilterDropdown/FilterDropdown.js
index 8bf6e5faa..66da1f586 100644
--- a/frontend/app/components/shared/FilterDropdown/FilterDropdown.js
+++ b/frontend/app/components/shared/FilterDropdown/FilterDropdown.js
@@ -27,7 +27,7 @@ const locationOptions = Object.keys(regionLabels).map(k => ({ key: LOCATION, tex
 const _filterKeys = [
   { key: 'userId', name: 'User ID', icon: 'user-alt', placeholder: 'Search for User ID' },
   { key: 'userAnonymousId', name: 'User Anonymous ID', icon: 'filters/userid', placeholder: 'Search for User Anonymous ID' },
-  { key: 'revId', name: 'Rev ID', icon: 'filters/border-outer', placeholder: 'Search for Rev ID' },
+  { key: 'revId', name: 'Rev ID', icon: 'filters/rev-id', placeholder: 'Search for Rev ID' },
   { key: COUNTRY, name: 'Country', icon: 'map-marker-alt', placeholder: 'Search for Country' },
   { key: 'device', name: 'Device', icon: 'device', placeholder: 'Search for Device' },
   { key: 'os', name: 'OS', icon: 'os', placeholder: 'Search for OS' },
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
new file mode 100644
index 000000000..e2ce40ac0
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
@@ -0,0 +1,78 @@
+.wrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & input {
+    height: 28px;
+    font-size: 13px !important;
+    padding: 0 5px !important;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border: solid thin transparent !important;
+  }
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: stretch;
+    padding: 0;
+    background-color: $gray-lightest;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    & div {
+      /* background-color: red; */
+      border-left: solid thin $gray-light !important;
+      width: 28px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+      &:hover {
+        background-color: $gray-light;
+      }
+    }
+  }
+}
+
+.menu {
+  border-radius: 0 0 3px 3px;
+  border: solid thin $gray-light !important;
+  /* box-shadow: 0 2px 10px 0 $gray-light; */
+  /* padding: 20px; */
+  background-color: white;
+  max-height: 350px;
+  overflow-y: auto;
+  position: absolute;
+  top: 28px;
+  left: 0;  
+  width: 500px;
+  z-index: 99;
+}
+
+.filterItem {
+	display: flex;
+	align-items: center;
+	padding: 8px 10px;
+	cursor: pointer;
+	border-radius: 3px;
+	transition: all 0.4s;
+	margin-bottom: 5px;
+	max-width: 100%;	
+	& .label {		
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:hover {
+		background-color: $gray-lightest;
+		transition: all 0.2s;
+	}
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
new file mode 100644
index 000000000..c313563ec
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import { Icon, Loader } from 'UI';
+import APIClient from 'App/api_client';
+import { debounce } from 'App/utils';
+import stl from './FilterAutoComplete.css';
+import cn from 'classnames';
+
+const hiddenStyle = { 
+  whiteSpace: 'pre-wrap',
+  opacity: 0, position: 'fixed', left: '-3000px'
+};
+
+interface Props {
+  showOrButton?: boolean;
+  showCloseButton?: boolean;
+  onRemoveValue?: () => void;
+  onAddValue?: () => void;
+  endpoint?: string;
+  method?: string;
+  params?: any;
+  headerText?: string;
+  placeholder?: string;
+  onSelect: (e, item) => void;
+  value: any;
+}
+
+function FilterAutoComplete(props: Props) {
+  const {
+      showCloseButton = false,
+      placeholder = 'Type to search',
+      method = 'GET',
+      showOrButton = false,
+      onRemoveValue = () => null,
+      onAddValue = () => null,
+      endpoint = '',
+      params = {},
+      headerText = '',
+      value = '',
+  } = props;
+  const [showModal, setShowModal] = useState(true)
+  const [loading, setLoading] = useState(false)
+  const [options, setOptions] = useState<any>([]);
+  const [query, setQuery] = useState(value);
+  
+
+  const requestValues = (q) => {
+    // const { params, method } = props;
+    setLoading(true);
+
+    return new APIClient()[method?.toLowerCase()](endpoint, { ...params, q })
+    .then(response => response.json())
+    .then(({ errors, data }) => {
+      if (errors) {
+        // this.setError();
+      } else {
+        setOptions(data);
+        // this.setState({
+        //   ddOpen: true,
+        //   values: data,
+        //   loading: false,
+        //   noResultsMessage: NO_RESULTS_MSG,
+        // });
+      }
+    }).finally(() => setLoading(false));
+    // .catch(this.setError);
+  }
+
+  const debouncedRequestValues = debounce(requestValues, 1000)
+
+  const onInputChange = ({ target: { value } }) => {
+    setQuery(value);
+  }
+
+  useEffect(() => {
+    if (query === '' || query === ' ') {
+      return 
+    }
+
+    debouncedRequestValues(query)
+  }, [query])
+
+  const onItemClick = (e, item) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // const { onSelect, name } = this.props;
+
+    
+    if (query !== item.value) {
+      setQuery(item.value); 
+    }
+    // this.setState({ query: item.value, ddOpen: false})
+    props.onSelect(e, item);
+    // setTimeout(() => {
+    //   setShowModal(false)
+    // }, 10)
+  }
+
+  return (
+    <div className="relative flex items-center">
+      <div className={stl.wrapper}>
+        <input
+          name="query"
+          onChange={ onInputChange }
+          onBlur={ () => setTimeout(() => { setShowModal(false) }, 50) }
+          onFocus={ () => setShowModal(true)}
+          value={ query }
+          autoFocus={ true }
+          type="text"
+          placeholder={ placeholder }
+          // onPaste={(e) => {
+          //   const text = e.clipboardData.getData('Text');
+          //   // this.hiddenInput.value = text;
+          //   // pasted = true; // to use only the hidden input
+          // } }
+        />
+        <div
+          className={stl.right}
+          // onClick={showOrButton ? onRemoveValue : onAddValue}
+        >
+          { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="18" /></div> }
+          { showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> }
+        </div>
+      </div>
+
+      { !showOrButton && <div className="ml-3">or</div> }
+
+      {/* <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea> */}
+
+      { showModal && (options.length > 0 || loading) &&
+        <div className={ stl.menu }>
+          { headerText && headerText }
+          <Loader loading={loading} size="small">
+            {
+              options.map(item => (
+                <div
+                  className={ cn(stl.filterItem) }
+                  id="filter-item" onClick={ (e) => onItemClick(e, item) }
+                >
+                  { item.icon && <Icon name={ item.icon } size="16" marginRight="8" /> }
+                  <span className={ stl.label }>{ item.value }</span>
+                </div>             
+              ))
+            }
+          </Loader>
+        </div>
+      }
+    </div>
+  );
+}
+
+export default FilterAutoComplete;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/index.ts b/frontend/app/components/shared/Filters/FilterAutoComplete/index.ts
new file mode 100644
index 000000000..8540e6f40
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterAutoComplete';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css
new file mode 100644
index 000000000..c7a272458
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css
@@ -0,0 +1,24 @@
+.wrapper {  
+  display: flex;
+  justify-content: space-between;
+
+  & input {
+    max-width: 85px !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: $gray-medium !important;
+  }
+  
+  & > div {
+    &:first-child {
+      margin-right: 10px;
+    }
+  }
+}
+
+.label {
+  font-size: 13px !important;
+  font-weight: 400 !important;
+  color: $gray-medium !important;
+}
+
diff --git a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js
new file mode 100644
index 000000000..8069bf3a8
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js
@@ -0,0 +1,66 @@
+import { Input, Label } from 'semantic-ui-react';
+import styles from './FilterDuration.css';
+
+const fromMs = value => value ? `${ value / 1000 / 60 }` : ''
+const toMs = value => value !== '' ? value * 1000 * 60 : null
+
+export default class FilterDuration extends React.PureComponent {
+  state = { focused: false }
+  onChange = (e, { name, value }) => {
+    const { onChange } = this.props;
+    if (typeof onChange === 'function') {
+      onChange({
+        [ name ]: toMs(value),
+      });
+    }
+  }
+
+  onKeyPress = e => {
+    const { onEnterPress } = this.props;
+    if (e.key === 'Enter' && typeof onEnterPress === 'function') {
+      onEnterPress(e);
+    }
+  }
+
+  render() {
+    const {
+      minDuration,
+      maxDuration,
+    } = this.props;
+
+    return (
+      <div className={ styles.wrapper }>
+        <Input
+          labelPosition="left"
+          type="number"
+          placeholder="0 min"
+          name="minDuration"
+          value={ fromMs(minDuration) }
+          onChange={ this.onChange }
+          className="customInput"
+          onKeyPress={ this.onKeyPress }
+          onFocus={() => this.setState({ focused: true })}
+          onBlur={this.props.onBlur}
+        >
+          <Label basic className={ styles.label }>{ 'Min' }</Label>
+          <input min="1" />
+        </Input>
+        <Input
+          labelPosition="left"
+          type="number"
+          placeholder="∞ min"
+          name="maxDuration"
+          value={ fromMs(maxDuration) }
+          onChange={ this.onChange }
+          className="customInput"
+          onKeyPress={ this.onKeyPress }
+          onFocus={() => this.setState({ focused: true })}
+          onBlur={this.props.onBlur}
+        >
+          <Label basic className={ styles.label }>{ 'Max' }</Label>
+          <input min="1" />
+        </Input>
+      </div>
+    );
+  }
+}
diff --git a/frontend/app/components/shared/Filters/FilterDuration/index.js b/frontend/app/components/shared/Filters/FilterDuration/index.js
new file mode 100644
index 000000000..cbf9296f3
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterDuration/index.js
@@ -0,0 +1 @@
+export { default } from './FilterDuration';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
new file mode 100644
index 000000000..97e09d190
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import FilterOperator from '../FilterOperator/FilterOperator';
+import FilterSelection from '../FilterSelection';
+import FilterValue from '../FilterValue';
+import { Icon } from 'UI';
+
+interface Props {
+  filterIndex: number;
+  filter: any; // event/filter
+  onUpdate: (filter) => void;
+  onRemoveFilter: () => void;
+  isFilter?: boolean;
+}
+function FitlerItem(props: Props) {
+  const { isFilter = false, filterIndex, filter, onUpdate } = props;
+
+  const replaceFilter = (filter) => {
+    onUpdate(filter);
+  };
+
+  // const onAddValue = () => {
+  //   const newValues = filter.value.concat("")
+  //   onUpdate({ ...filter, value: newValues })
+  // }
+
+  // const onRemoveValue = (valueIndex) => {
+  //   const newValues = filter.value.filter((_, _index) => _index !== valueIndex)
+  //   onUpdate({ ...filter, value: newValues })
+  // }
+
+  // const onSelect = (e, item, valueIndex) => {
+  //   const newValues = filter.value.map((_, _index) => {
+  //     if (_index === valueIndex) {
+  //       return item.value;
+  //     }
+  //     return _;
+  //   })
+  //   onUpdate({ ...filter, value: newValues })
+  // }
+
+  const onOperatorChange = (e, { name, value }) => {
+    console.log('onOperatorChange', name, value)
+    onUpdate({ ...filter, operator: value })
+  }
+
+  return (
+    <div className="flex items-center mb-4">
+      <div className="flex items-start mr-auto">
+        { !isFilter && <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div> }
+        <FilterSelection filter={filter} onFilterClick={replaceFilter} />
+        <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2 flex-shrink-0"/>
+        <FilterValue filter={filter} onUpdate={onUpdate} />
+      </div>
+      <div className="flex self-start mt-2">
+        <div
+          className="cursor-pointer p-1"
+          onClick={props.onRemoveFilter}
+        > 
+          <Icon name="trash" size="16" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FitlerItem;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterItem/index.ts b/frontend/app/components/shared/Filters/FilterItem/index.ts
new file mode 100644
index 000000000..b09a3e2f1
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterItem/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterItem';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
new file mode 100644
index 000000000..c2f71fd5d
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -0,0 +1,82 @@
+import React, { useState} from 'react';
+import FilterItem from '../FilterItem';
+import { SegmentSelection } from 'UI';
+
+interface Props {
+  // filters: any[]; // event/filter
+  filter?: any; // event/filter
+  onUpdateFilter: (filterIndex, filter) => void;
+  onRemoveFilter: (filterIndex) => void;
+  onChangeEventsOrder: (e, { name, value }) => void;
+}
+function FilterList(props: Props) {
+  const { filter } = props;
+  const filters = filter.filters;
+  const hasEvents = filter.filters.filter(i => i.isEvent).size > 0;
+  const hasFilters = filter.filters.filter(i => !i.isEvent).size > 0;
+
+  const onRemoveFilter = (filterIndex) => {
+    const newFilters = filters.filter((_filter, i) => {
+      return i !== filterIndex;
+    });
+
+    props.onRemoveFilter(filterIndex);
+  }
+
+  return (
+    <div className="flex flex-col">
+      { hasEvents && (
+        <>
+          <div className="flex items-center mb-2">
+            <div className="mb-2 text-sm color-gray-medium mr-auto">EVENTS</div>
+            <div className="flex items-center">
+              <div className="mr-2 color-gray-medium text-sm">Events Order</div>
+              <SegmentSelection
+                primary
+                name="eventsOrder"
+                extraSmall={true}
+                // className="my-3"
+                onSelect={props.onChangeEventsOrder}
+                // onSelect={() => null }
+                value={{ value: filter.eventsOrder }}
+                // value={{ value: 'and' }}
+                list={ [
+                  { name: 'AND', value: 'and' },
+                  { name: 'OR', value: 'or' },
+                  { name: 'THEN', value: 'then' },
+                ]}
+              />
+            </div>
+          </div>
+          {filters.map((filter, filterIndex) => filter.isEvent ? (
+            <FilterItem
+              filterIndex={filterIndex}
+              filter={filter}
+              onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+              onRemoveFilter={() => onRemoveFilter(filterIndex) }
+            />
+          ): null)}
+          <div className='mb-2' />
+        </>
+      )}
+
+      {hasFilters && (
+        <>
+          <div className='border-t -mx-5 mb-2' />
+          <div className="mb-2 text-sm color-gray-medium mr-auto">FILTERS</div>
+          {filters.map((filter, filterIndex) => !filter.isEvent ? (
+            <FilterItem
+              isFilter={true}
+              filterIndex={filterIndex}
+              filter={filter}
+              onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+              onRemoveFilter={() => onRemoveFilter(filterIndex) }
+            />
+          ): null)}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default FilterList;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterList/index.ts b/frontend/app/components/shared/Filters/FilterList/index.ts
new file mode 100644
index 000000000..ecf0adf70
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterList/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterList';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
new file mode 100644
index 000000000..e282ab78f
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Icon } from 'UI';
+import { connect } from 'react-redux';
+
+interface Props {
+  filters: any,
+  onFilterClick?: (filter) => void
+}
+function FilterModal(props: Props) {
+  const { filters, onFilterClick = () => null } = props;
+  return (
+    <div className="border p-3" style={{ width: '490px', height: '400px', overflowY: 'auto'}}>
+      <div className="" style={{ columns: "100px 2" }}>
+        {filters && Object.keys(filters).map((key) => (
+          <div className="p-3 aspect-w-1">
+            <div className="uppercase font-medium mb-1">{key}</div>
+            <div>
+              {filters[key].map((filter: any) => (
+                <div className="flex items-center py-2 cursor-pointer hover:bg-gray-lightest -mx-2 px-2" onClick={() => onFilterClick(filter)}>
+                  <Icon name={filter.icon} size="16"/>
+                  <span className="ml-2">{filter.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default connect(state => ({
+  filters: state.getIn([ 'filters', 'filterList' ])
+}))(FilterModal);
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterModal/index.ts b/frontend/app/components/shared/Filters/FilterModal/index.ts
new file mode 100644
index 000000000..a8ab8d552
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterModal/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterModal';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css
new file mode 100644
index 000000000..8a2329dbd
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css
@@ -0,0 +1,19 @@
+.operatorDropdown {
+  font-weight: 400;
+  height: 30px;
+  min-width: 60px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px !important;
+  font-size: 13px;
+  /* background-color: rgba(255, 255, 255, 0.8) !important; */
+  background-color: $gray-lightest !important;
+  border: solid thin rgba(34, 36, 38, 0.15) !important;
+  border-radius: 4px !important;
+  color: $gray-darkest !important;
+  font-size: 14px !important;
+  &.ui.basic.button {
+    box-shadow: 0 0 0 1px rgba(62, 170, 175,36,38,.35) inset, 0 0 0 0 rgba(62, 170, 175,.15) inset !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
new file mode 100644
index 000000000..7399d8e5b
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'classnames';
+import { Dropdown, Icon } from 'UI';
+import stl from './FilterOperator.css';
+
+interface Props {
+  filter: any; // event/filter
+  onChange: (e, { name, value }) => void;
+  className?: string;
+}
+function FilterOperator(props: Props) {
+  const { filter, onChange, className = '' } = props;
+
+  console.log('FilterOperator', filter.operator);
+
+  return (
+    <Dropdown
+      className={ cn(stl.operatorDropdown, className) }      
+      options={ filter.operatorOptions }
+      name="operator"
+      value={ filter.operator }
+      onChange={ onChange }
+      placeholder="Select operator"
+      icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
+    />
+  );
+}
+
+export default FilterOperator;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterOperator/index.ts b/frontend/app/components/shared/Filters/FilterOperator/index.ts
new file mode 100644
index 000000000..9345f24f8
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterOperator/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterOperator';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
new file mode 100644
index 000000000..17cc7d288
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import FilterModal from '../FilterModal';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import { Icon } from 'UI';
+
+interface Props {
+  filter: any; // event/filter
+  onFilterClick: (filter) => void;
+  children?: any;
+}
+function FilterSelection(props: Props) {
+  const { filter, onFilterClick, children } = props;
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <div className="relative flex-shrink-0">
+      <OutsideClickDetectingDiv
+        className="relative"
+        onClickOutside={ () => setTimeout(function() {
+          setShowModal(false)
+        }, 50)}
+      >
+        { children ? React.cloneElement(children, { onClick: () => setShowModal(true)}) : (
+          <div
+            className="rounded py-1 px-3 flex items-center cursor-pointer bg-gray-lightest text-ellipsis"
+            style={{ width: '140px', height: '30px', border: 'solid thin rgba(34, 36, 38, 0.15)'}}
+            onClick={() => setShowModal(true)}
+          >
+            <span className="mr-auto truncate">{filter.label}</span>
+            <Icon name="chevron-down" size="14" />
+          </div>
+        ) }
+      </OutsideClickDetectingDiv>
+      {showModal && (
+        <div className="absolute left-0 top-20 border shadow rounded bg-white z-50">
+          <FilterModal onFilterClick={onFilterClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FilterSelection;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterSelection/index.ts b/frontend/app/components/shared/Filters/FilterSelection/index.ts
new file mode 100644
index 000000000..8c9764781
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterSelection/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSelection';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
new file mode 100644
index 000000000..ef327eb7f
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import FilterAutoComplete from '../FilterAutoComplete';
+import { FilterType } from 'Types/filter/filterType';
+import FilterValueDropdown from '../FilterValueDropdown';
+import FilterDuration from '../FilterDuration';
+
+interface Props {
+  filter: any;
+  onUpdate: (filter) => void;
+}
+function FilterValue(props: Props) {
+  const { filter } = props;
+  const [durationValues, setDurationValues] = useState({ minDuration: 0, maxDuration: 0 });
+
+  const onAddValue = () => {
+    const newValues = filter.value.concat("")
+    props.onUpdate({ ...filter, value: newValues })
+  }
+
+  const onRemoveValue = (valueIndex) => {
+    const newValues = filter.value.filter((_, _index) => _index !== valueIndex)
+    props.onUpdate({ ...filter, value: newValues })
+  }
+
+  const onSelect = (e, item, valueIndex) => {
+    const newValues = filter.value.map((_, _index) => {
+      if (_index === valueIndex) {
+        return item.value;
+      }
+      return _;
+    })
+    props.onUpdate({ ...filter, value: newValues })
+  }
+
+  const onDurationChange = (newValues) => {
+    console.log('durationValues', durationValues)
+    // setDurationValues({ ...durationValues });
+    setDurationValues({ ...durationValues, ...newValues });
+  } 
+
+  const handleBlur = (e) => {
+    // const { filter, onChange } = props;
+    if (filter.type === FilterType.DURATION) {
+      const { maxDuration, minDuration, key } = filter;
+      if (maxDuration || minDuration) return;
+      if (maxDuration !== durationValues.maxDuration || 
+          minDuration !== durationValues.minDuration) {
+        // onChange(e, { name: 'value', value: [this.state.minDuration, this.state.maxDuration] });
+        props.onUpdate({ ...filter, value: [durationValues.minDuration, durationValues.maxDuration] });
+      }
+    }
+  }
+
+  const renderValueFiled = (value, valueIndex) => {
+    switch(filter.type) {
+      case FilterType.DROPDOWN:
+        return (
+          <FilterValueDropdown
+            value={value}
+            filter={filter}
+            options={filter.options}
+            onChange={(e, { name, value }) => onSelect(e, { value }, valueIndex)}
+          />
+        )
+      case FilterType.ISSUE:
+      case FilterType.MULTIPLE_DROPDOWN:
+        return (
+          <FilterValueDropdown
+            multiple={true}
+            value={value}
+            filter={filter}
+            options={filter.options}
+            onChange={(e, { name, value }) => onSelect(e, { value }, valueIndex)}
+          />
+        )
+      case FilterType.DURATION:
+        return (
+          <FilterDuration
+            onChange={ onDurationChange }
+            // onEnterPress={ this.handleClose }
+            onBlur={handleBlur}
+            minDuration={ filter.value[0] }
+            maxDuration={ filter.value[1] }
+          />
+        )
+      case FilterType.NUMBER:
+        return (
+          <input
+            className="w-full px-2 py-1 text-sm leading-tight text-gray-700 rounded-lg"
+            type="number"
+            name={`${filter.key}-${valueIndex}`}
+            value={value}
+            onChange={(e) => onSelect(e, { value: e.target.value }, valueIndex)}
+          />
+        )
+      case FilterType.MULTIPLE:
+        return (
+          <FilterAutoComplete
+            value={value}
+            showCloseButton={filter.value.length > 1}
+            showOrButton={valueIndex === filter.value.length - 1}
+            onAddValue={onAddValue}
+            onRemoveValue={() => onRemoveValue(valueIndex)}
+            method={'GET'}
+            endpoint='/events/search'
+            params={{ type: filter.key  }}
+            headerText={''}
+            // placeholder={''}
+            onSelect={(e, item) => onSelect(e, item, valueIndex)}
+          />
+        )
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-3">
+      { filter.type === FilterType.DURATION ? (
+          renderValueFiled(filter.value, 0)
+      ) : (
+        filter.value && filter.value.map((value, valueIndex) => (
+          renderValueFiled(value, valueIndex)
+        ))
+      )}
+    </div>
+  );
+}
+
+export default FilterValue;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValue/index.ts b/frontend/app/components/shared/Filters/FilterValue/index.ts
new file mode 100644
index 000000000..a4e4a517e
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValue/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterValue';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
new file mode 100644
index 000000000..eb2c457f7
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
@@ -0,0 +1,54 @@
+.wrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  background-color: $gray-lightest !important;
+  display: flex;
+  align-items: center;
+  height: 30px;
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: stretch;
+    padding: 0;
+    background-color: $gray-lightest;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    & div {
+      /* background-color: red; */
+      border-left: solid thin $gray-light !important;
+      width: 28px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+      &:hover {
+        background-color: $gray-light;
+      }
+    }
+  }
+}
+.operatorDropdown {
+  font-weight: 400;
+  height: 30px;
+  min-width: 60px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px !important;
+  font-size: 13px;
+  /* background-color: rgba(255, 255, 255, 0.8) !important; */
+  /* background-color: $gray-lightest !important; */
+  /* border: solid thin rgba(34, 36, 38, 0.15) !important; */
+  /* border-radius: 4px !important; */
+  color: $gray-darkest !important;
+  font-size: 14px !important;
+  &.ui.basic.button {
+    box-shadow: 0 0 0 1px rgba(62, 170, 175,36,38,.35) inset, 0 0 0 0 rgba(62, 170, 175,.15) inset !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
new file mode 100644
index 000000000..f2a54afc8
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import cn from 'classnames';
+import { Dropdown, Icon } from 'UI';
+import stl from './FilterValueDropdown.css';
+
+interface Props {
+  filter: any; // event/filter
+  // options: any[];
+  value: string;
+  onChange: (e, { name, value }) => void;
+  className?: string;
+  options: any[];
+  search?: boolean;
+  multiple?: boolean;
+  showCloseButton?: boolean;
+  showOrButton?: boolean;
+  onRemoveValue?: () => void;
+  onAddValue?: () => void;
+}
+function FilterValueDropdown(props: Props) {
+  const { multiple = false, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
+  // const options = []
+
+  return (
+    <div className={stl.wrapper}>
+      <Dropdown
+        search={search}
+        className={ cn(stl.operatorDropdown, className) }      
+        options={ options }
+        name="issue_type"
+        value={ value }
+        onChange={ onChange }
+        placeholder="Select"
+        icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
+      />
+      <div
+        className={stl.right}
+        // onClick={showOrButton ? onRemoveValue : onAddValue}
+      >
+        { showCloseButton && <div onClick={props.onRemoveValue}><Icon name="close" size="18" /></div> }
+        { showOrButton && <div onClick={props.onAddValue} className="color-teal"><span className="px-1">or</span></div> }
+      </div>
+    </div>
+  );
+}
+
+export default FilterValueDropdown;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/index.ts b/frontend/app/components/shared/Filters/FilterValueDropdown/index.ts
new file mode 100644
index 000000000..0a0240086
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterValueDropdown';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
new file mode 100644
index 000000000..82be6101a
--- /dev/null
+++ b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { save } from 'Duck/filters';
+import { Button } from 'UI';
+import SaveSearchModal from 'Shared/SaveSearchModal'
+
+interface Props {
+  filter: any;
+}
+
+function SaveFilterButton(props) {
+  const [showModal, setshowModal] = useState(false)
+  return (
+    <div>
+      <Button onClick={() => setshowModal(true)}>SAVE FILTER</Button>
+      <SaveSearchModal
+        show={showModal}
+        closeHandler={() => setshowModal(false)}
+      />
+    </div>
+  );
+}
+
+export default connect(state => ({
+  filter: state.getIn([ 'filters', 'appliedFilter' ]),
+}), { save })(SaveFilterButton);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveFilterButton/index.ts b/frontend/app/components/shared/SaveFilterButton/index.ts
new file mode 100644
index 000000000..9f22c4ecb
--- /dev/null
+++ b/frontend/app/components/shared/SaveFilterButton/index.ts
@@ -0,0 +1 @@
+export { default } from './SaveFilterButton'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
new file mode 100644
index 000000000..29084ec42
--- /dev/null
+++ b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { edit, save } from 'Duck/search';
+import { Button, Modal, Form, Icon, Checkbox } from 'UI';
+import stl from './SaveSearchModal.css';
+
+interface Props {
+  filter: any;
+  loading: boolean;
+  edit: (filter: any) => void;
+  save: (filter: any) => Promise<void>;
+  show: boolean;
+  closeHandler: () => void;
+}
+function SaveSearchModal(props: Props) {
+  const { filter, loading, show, closeHandler } = props;
+  
+  const onNameChange = ({ target: { value } }) => {
+    props.edit({ name: value });
+  };
+
+  const onSave = () => {
+    const { filter, closeHandler } = props;
+    if (filter.name.trim() === '') return;
+    props.save(filter).then(function() {
+      // this.props.fetchFunnelsList();
+      closeHandler();
+    });
+  }
+  console.log('filter', filter);
+  return (
+    <Modal size="tiny" open={ show }>
+      <Modal.Header className={ stl.modalHeader }>
+        <div>{ 'Save Search' }</div>
+        <Icon 
+          role="button"
+          tabIndex="-1"
+          color="gray-dark"
+          size="18"
+          name="close"
+          onClick={ closeHandler }
+        />
+      </Modal.Header>
+
+      <Modal.Content>
+        <Form onSubmit={onSave}>
+          <Form.Field>
+            <label>{'Title:'}</label>
+            <input
+              autoFocus={ true }
+              // className={ stl.name }
+              name="name"
+              value={ filter.name }
+              onChange={ onNameChange }
+              placeholder="Title"
+            />
+          </Form.Field>
+        </Form>
+      </Modal.Content>
+      <Modal.Actions className="">
+        <Button
+          primary
+          onClick={ onSave }
+          loading={ loading }
+        >
+          { filter.exists() ? 'Modify' : 'Save' }
+        </Button>
+        <Button className={ stl.cancelButton } marginRight onClick={ closeHandler }>{ 'Cancel' }</Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default connect(state => ({
+  filter: state.getIn(['search', 'instance']),
+  loading: state.getIn([ 'filters', 'saveRequest', 'loading' ]) || 
+    state.getIn([ 'filters', 'updateRequest', 'loading' ]),
+}), { edit, save })(SaveSearchModal);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/index.ts b/frontend/app/components/shared/SaveSearchModal/index.ts
new file mode 100644
index 000000000..6c5515e82
--- /dev/null
+++ b/frontend/app/components/shared/SaveSearchModal/index.ts
@@ -0,0 +1 @@
+export { default } from './SaveSearchModal'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/saveSearchModal.css b/frontend/app/components/shared/SaveSearchModal/saveSearchModal.css
new file mode 100644
index 000000000..ed2600745
--- /dev/null
+++ b/frontend/app/components/shared/SaveSearchModal/saveSearchModal.css
@@ -0,0 +1,15 @@
+@import 'mixins.css';
+
+.modalHeader {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.cancelButton {
+    @mixin plainButton;
+}
+
+.applyButton {
+    @mixin basicButton;
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
new file mode 100644
index 000000000..170e90004
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Icon } from 'UI';
+import SavedSearchDropdown from './components/SavedSearchDropdown';
+import { connect } from 'react-redux';
+import { fetchList as fetchListSavedSearch } from 'Duck/filters';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+
+interface Props {
+  fetchListSavedSearch: () => void;
+  list: any;
+}
+function SavedSearch(props) {
+  const [showMenu, setShowMenu] = useState(false)
+
+  useEffect(() => {
+    props.fetchListSavedSearch()
+  }, [])
+
+  return (
+    <OutsideClickDetectingDiv 
+      // className={ cn("relative", { "flex-1" : fullWidth }) } 
+      onClickOutside={() => setShowMenu(false)}
+    >
+      <div className="relative">
+        <Button prime outline size="small"
+          className="flex items-center"
+          onClick={() => setShowMenu(true)}
+        >
+          <span className="mr-2">Search Saved</span>
+          <Icon name="ellipsis-v" color="teal" size="14" />
+        </Button>
+        { showMenu && (
+          <div
+            className="absolute right-0 bg-white border rounded z-50"
+            style={{ top: '33px', width: '200px' }}
+          >
+            <SavedSearchDropdown list={props.list}/>
+          </div>
+        )}
+      </div>
+    </OutsideClickDetectingDiv>
+  );
+}
+
+export default connect(state => ({
+  list: state.getIn([ 'filters', 'list' ]),
+}), { fetchListSavedSearch })(SavedSearch);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css
new file mode 100644
index 000000000..96609ccae
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css
@@ -0,0 +1,7 @@
+.wrapper {
+  position: relative;
+  display: inline-block;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
new file mode 100644
index 000000000..92746e78d
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import stl from './SavedSearchDropdown.css';
+
+interface Props {
+  list: Array<any>
+}
+
+function Row ({ name }) {
+  return (
+    <div className="p-2 cursor-pointer hover:bg-gray-lightest">{name}</div>
+  )
+}
+
+function SavedSearchDropdown(props: Props) {
+  return (
+    <div className={stl.wrapper}>
+      {props.list.map(item => (
+        <Row key={item.searchId} name={item.name} />
+      ))}
+    </div>
+  );
+}
+
+export default SavedSearchDropdown;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts
new file mode 100644
index 000000000..2fea67949
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from './SavedSearchDropdown';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/index.ts b/frontend/app/components/shared/SavedSearch/index.ts
new file mode 100644
index 000000000..71c14305d
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/index.ts
@@ -0,0 +1 @@
+export { default } from './SavedSearch'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
new file mode 100644
index 000000000..caba99eae
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import FilterList from 'Shared/Filters/FilterList';
+import FilterSelection from 'Shared/Filters/FilterSelection';
+import SaveFilterButton from 'Shared/SaveFilterButton';
+import { connect } from 'react-redux';
+import { IconButton, Button } from 'UI';
+import { edit } from 'Duck/search';
+
+interface Props {
+  appliedFilter: any;
+  edit: typeof edit;
+}
+function SessionSearch(props) {
+  const { appliedFilter } = props;
+
+  const onAddFilter = (filter) => {
+    filter.value = [""]
+    const newFilters = appliedFilter.filters.concat(filter);
+    props.edit({
+        ...appliedFilter.filter,
+        filters: newFilters,
+    });
+  }
+
+  const onUpdateFilter = (filterIndex, filter) => {
+    const newFilters = appliedFilter.filters.map((_filter, i) => {
+      if (i === filterIndex) {
+        return filter;
+      } else {
+        return _filter;
+      }
+    });
+
+    props.edit({
+        ...appliedFilter.filter,
+        filters: newFilters,
+    });
+  }
+
+  const onRemoveFilter = (filterIndex) => {
+    const newFilters = appliedFilter.filters.filter((_filter, i) => {
+      return i !== filterIndex;
+    });
+
+    props.edit({
+      filters: newFilters,
+    });
+  }
+
+  const onChangeEventsOrder = (e, { name, value }) => {
+    props.edit({
+      eventsOrder: value,
+    });
+  }
+
+  const clearSearch = () => {
+    props.edit({
+        filters: [],
+    });
+  }
+  
+
+  return (
+    <div className="border bg-white rounded mt-4">
+      <div className="p-5">
+        <FilterList
+          // filters={appliedFilter.filter.filters.toJS()}
+          filter={appliedFilter}
+          onUpdateFilter={onUpdateFilter}
+          onRemoveFilter={onRemoveFilter}
+          onChangeEventsOrder={onChangeEventsOrder}
+        />
+      </div>
+
+      <div className="border-t px-5 py-1 flex items-center -mx-2">
+        <div>
+          <FilterSelection
+            filter={undefined}
+            onFilterClick={onAddFilter}
+          >
+            <IconButton primaryText label="ADD STEP" icon="plus" />
+          </FilterSelection>
+        </div>
+        <div className="ml-auto flex items-center">
+          <SaveFilterButton />
+          <Button onClick={clearSearch}>CLEAR STEPS</Button>
+          <Button plain>SAVE FUNNEL</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default connect(state => ({
+  appliedFilter: state.getIn([ 'search', 'instance' ]),
+}), { edit })(SessionSearch);
+
+// appliedFilter: state.getIn([ 'filters', 'appliedFilter' ]),
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearch/index.ts b/frontend/app/components/shared/SessionSearch/index.ts
new file mode 100644
index 000000000..d9c909f0d
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearch/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionSearch';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.css b/frontend/app/components/shared/SessionSearchField/SessionSearchField.css
new file mode 100644
index 000000000..6a3a268ba
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.css
@@ -0,0 +1,10 @@
+.searchField {
+  box-shadow: none !important;
+  & input {
+    box-shadow: none !important;
+    border-radius: 3 !important;
+    border: solid thin $gray-light !important;    
+    height: 34px !important;
+    font-size: 16px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
new file mode 100644
index 000000000..76aac5240
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -0,0 +1,69 @@
+import React, { useRef, useState } from 'react';
+import { connect } from 'react-redux';
+import stl from './SessionSearchField.css';
+import { Input } from 'UI';
+import FilterModal from 'Shared/EventFilter/FilterModal';
+import { fetchList as fetchEventList } from 'Duck/events';
+import { debounce } from 'App/utils';
+import {
+  addEvent, applyFilter, moveEvent, clearEvents,
+  addCustomFilter, addAttribute, setSearchQuery, setActiveFlow, setFilterOption
+} from 'Duck/filters';
+
+interface Props {
+  setSearchQuery: (query: string) => void;
+  fetchEventList: (query: any) => void;
+  searchQuery: string
+}
+function SessionSearchField(props: Props) {
+  const debounceFetchEventList = debounce(props.fetchEventList, 1000)
+  const [showModal, setShowModal] = useState(false)
+
+  const onSearchChange = (e, { value }) => {
+    // props.setSearchQuery(value)
+    debounceFetchEventList({ q: value });
+  }
+
+  return (
+    <div className="relative">
+      <Input
+        inputProps={ { "data-openreplay-label": "Search", "autocomplete": "off" } }
+        className={stl.searchField}
+        onFocus={ () => setShowModal(true) }
+        onBlur={ () => setTimeout(setShowModal, 100, false) }
+        // ref={ this.inputRef }
+        onChange={ onSearchChange }
+        // onKeyUp={this.onKeyUp}
+        // value={props.searchQuery}
+        icon="search"
+        iconPosition="left"
+        placeholder={ 'Search sessions using any captured event (click, input, page, error...)'}
+        fluid
+        id="search"
+        type="search"
+        autocomplete="off"
+      />
+
+      <FilterModal
+        close={ () => setShowModal(false) }
+        displayed={ showModal }
+        // displayed={ true }
+        // loading={ loading }
+        // searchedEvents={ searchedEvents }
+        searchQuery={ props.searchQuery }
+      />
+    </div>
+  );
+}
+
+export default connect(state => ({
+  events: state.getIn([ 'filters', 'appliedFilter', 'events' ]),
+  appliedFilter: state.getIn([ 'filters', 'appliedFilter' ]),
+  searchQuery: state.getIn([ 'filters', 'searchQuery' ]),
+  appliedFilterKeys: state.getIn([ 'filters', 'appliedFilter', 'filters' ])
+    .map(({type}) => type).toJS(),
+  searchedEvents: state.getIn([ 'events', 'list' ]),
+  loading: state.getIn([ 'events', 'loading' ]),
+  strict: state.getIn([ 'filters', 'appliedFilter', 'strict' ]),
+  blink: state.getIn([ 'funnels', 'blink' ]),
+}), { setSearchQuery, fetchEventList })(SessionSearchField);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearchField/index.ts b/frontend/app/components/shared/SessionSearchField/index.ts
new file mode 100644
index 000000000..1f99e0c0b
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearchField/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionSearchField';
\ No newline at end of file
diff --git a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
index c4d71a93a..d1d3ae6df 100644
--- a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
+++ b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
@@ -9,12 +9,13 @@ class SegmentSelection extends React.Component {
   }
 
   render() {
-    const { className, list, primary = false, size = "normal" } = this.props;
+    const { className, list, small = false, extraSmall = false, primary = false, size = "normal" } = this.props;
 
     return (
       <div className={ cn(styles.wrapper, { 
           [styles.primary] : primary,
-          [styles.small]  : size === 'small'
+          [styles.small]  : size === 'small' || small,
+          [styles.extraSmall]  : extraSmall,
         }, className) }
       >
         { list.map(item => (
diff --git a/frontend/app/components/ui/SegmentSelection/segmentSelection.css b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
index 543016246..20007b010 100644
--- a/frontend/app/components/ui/SegmentSelection/segmentSelection.css
+++ b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-around;
   border: solid thin $gray-light;
-  border-radius: 5px;
+  border-radius: 3px;
   overflow: hidden;
 
   & .item {
@@ -12,12 +12,13 @@
     padding: 10px;
     flex: 1;
     text-align: center;
-    border-right: solid thin $gray-light;
+    border-right: solid thin $teal;
     cursor: pointer;
     background-color: $gray-lightest;
     display: flex;
     align-items: center;
     justify-content: center;
+    white-space: nowrap;
 
     & span svg {
       fill: $gray-medium;
@@ -61,4 +62,9 @@
 
 .small .item {
   padding: 4px 8px;
+}
+
+.extraSmall .item {
+  padding: 0 4px;
+  font-size: 12px;
 }
\ No newline at end of file
diff --git a/frontend/app/constants/index.js b/frontend/app/constants/index.js
index ba6f53cf0..8ba18841a 100644
--- a/frontend/app/constants/index.js
+++ b/frontend/app/constants/index.js
@@ -10,6 +10,7 @@ export { default as alertConditions } from './alertConditions';
 export { default as alertMetrics } from './alertMetrics';
 export { default as regions } from './regions';
 export { default as links } from './links';
+export { default as platformOptions } from './platformOptions';
 export { 
   DAYS as SCHEDULE_DAYS, 
   HOURS as SCHEDULE_HOURS, 
diff --git a/frontend/app/constants/platformOptions.js b/frontend/app/constants/platformOptions.js
new file mode 100644
index 000000000..46747ea2e
--- /dev/null
+++ b/frontend/app/constants/platformOptions.js
@@ -0,0 +1,5 @@
+export default [
+  { value: 'desktop', text: 'Desktop' },
+  { value: 'mobile', text: 'Mobile' },
+  { value: 'tablet', text: 'Tablet' },
+]
\ No newline at end of file
diff --git a/frontend/app/duck/alerts.js b/frontend/app/duck/alerts.js
index b93ff5878..1869db434 100644
--- a/frontend/app/duck/alerts.js
+++ b/frontend/app/duck/alerts.js
@@ -1,9 +1,38 @@
 import Alert from 'Types/alert';
+import { Map } from 'immutable';
 import crudDuckGenerator from './tools/crudDuck';
+import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
+import { reduceDucks } from 'Duck/tools';
 
+const name = 'alert'
 const idKey = 'alertId';
-const crudDuck = crudDuckGenerator('alert', Alert, { idKey: idKey });
+const crudDuck = crudDuckGenerator(name, Alert, { idKey: idKey });
 export const { fetchList, init, edit, remove } = crudDuck.actions;
+const FETCH_TRIGGER_OPTIONS = new RequestTypes(`${name}/FETCH_TRIGGER_OPTIONS`);
+
+const initialState = Map({
+  definedPercent: 0,
+  triggerOptions: [],
+});
+
+const reducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    // case GENERATE_LINK.SUCCESS:
+    //   return state.update(
+    //     'list',
+    //     list => list
+    //       .map(member => {
+    //         if(member.id === action.id) {
+    //           return Member({...member.toJS(), invitationLink: action.data.invitationLink })
+    //         }
+    //         return member
+    //       })
+    //   );
+    case FETCH_TRIGGER_OPTIONS.SUCCESS:
+      return state.set('triggerOptions', action.data);
+  }
+  return state;
+};
 
 export function save(instance) {
   return {
@@ -12,4 +41,12 @@ export function save(instance) {
   };
 }
 
-export default crudDuck.reducer;
+export function fetchTriggerOptions() {
+  return {
+    types: FETCH_TRIGGER_OPTIONS.toArray(),
+    call: client => client.get('/alerts/triggers'),
+  };
+}
+
+// export default crudDuck.reducer;
+export default reduceDucks(crudDuck, { initialState, reducer }).reducer;
diff --git a/frontend/app/duck/customMetrics.js b/frontend/app/duck/customMetrics.js
new file mode 100644
index 000000000..5842bb851
--- /dev/null
+++ b/frontend/app/duck/customMetrics.js
@@ -0,0 +1,116 @@
+import { List, Map } from 'immutable'; 
+import { clean as cleanParams } from 'App/api_client';
+import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
+import CustomMetric, { FilterSeries } from 'Types/customMetric'
+import { createFetch, fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
+// import { createEdit, createInit } from './funcTools/crud';
+import { createRequestReducer, ROOT_KEY } from './funcTools/request';
+import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
+import Filter from 'Types/filter';
+import NewFilter from 'Types/filter/newFilter';
+import Event from 'Types/filter/event';
+// import CustomFilter from 'Types/filter/customFilter';
+
+const name = "custom_metric";
+const idKey = "metricId";
+
+const FETCH_LIST = fetchListType(name);
+const FETCH = fetchType(name);
+const SAVE = saveType(name);
+const EDIT = editType(name);
+const REMOVE = removeType(name);
+const UPDATE_SERIES = `${name}/UPDATE_SERIES`;
+const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
+
+function chartWrapper(chart = []) {
+  return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
+}
+
+// const updateItemInList = createListUpdater(idKey);
+// const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
+// 	? state.mergeIn([ "instance" ], instance)
+// 	: state;
+
+const initialState = Map({
+	list: List(),
+  alertMetricId: null,
+  // instance: null,
+	instance: CustomMetric({
+    name: 'New',
+    series: List([
+      {
+        name: 'Session Count',
+        filter: new Filter({ filters: [] }),
+      },
+    ])
+  }),
+});
+
+// Metric - Series - [] - filters
+function reducer(state = initialState, action = {}) {
+	switch (action.type) {
+    case EDIT:
+      console.log('EDIT', action);
+      return state.mergeIn([ 'instance' ], CustomMetric(action.instance));
+    case UPDATE_SERIES:
+      console.log('update series', action.series);
+      return state.setIn(['instance', 'series', action.index], FilterSeries(action.series));
+    case success(SAVE):
+      return state.set([ 'instance' ], CustomMetric(action.data));
+    case success(REMOVE):
+      console.log('action', action)
+      return state.update('list', list => list.filter(item => item.metricId !== action.id));
+		case success(FETCH):
+			return state.set("instance", ErrorInfo(action.data));
+		case success(FETCH_LIST):
+			const { data } = action;
+			return state.set("list", List(data.map(CustomMetric)));
+	}
+	return state;
+}
+
+export default mergeReducers(
+	reducer,
+	createRequestReducer({
+		[ ROOT_KEY ]: FETCH_LIST,
+		fetch: FETCH,
+	}),
+);
+
+export const edit = createEdit(name);
+export const remove = createRemove(name);
+
+export const updateSeries = (index, series) => ({
+  type: UPDATE_SERIES,
+  index,
+  series,
+});
+
+export function fetch(id) {
+	return {
+		id,
+		types: array(FETCH),
+		call: c => c.get(`/errors/${id}`),
+	}
+}
+
+export function save(instance) {
+  return {
+    types: SAVE.array,
+    call: client => client.post( `/${ name }s`, instance.toSaveData()),
+  };
+}
+
+export function fetchList() {
+  return {
+    types: array(FETCH_LIST),
+    call: client => client.get(`/${name}s`),
+  };
+}
+
+export function setAlertMetricId(id) {
+  return {
+    type: SET_ALERT_METRIC_ID,
+    id,
+  };
+}
\ No newline at end of file
diff --git a/frontend/app/duck/filters.js b/frontend/app/duck/filters.js
index a06a0b6bc..9122fb9c2 100644
--- a/frontend/app/duck/filters.js
+++ b/frontend/app/duck/filters.js
@@ -7,8 +7,31 @@ import CustomFilter, { KEYS } from 'Types/filter/customFilter';
 import withRequestState, { RequestTypes } from './requestStateCreator';
 import { fetchList as fetchSessionList } from './sessions';
 import { fetchList as fetchErrorsList } from './errors';
+import { fetchListType, fetchType, saveType, editType, initType, removeType } from './funcTools/crud/types';
 import logger from 'App/logger';
 
+import { newFiltersList } from 'Types/filter'
+import NewFilter, { filtersMap } from 'Types/filter/newFilter';
+
+const filterOptions = {}
+
+Object.keys(filtersMap).forEach(key => {
+  // const filter = NewFilter(filtersMap[key]);
+  const filter = filtersMap[key];
+  if (filterOptions.hasOwnProperty(filter.category)) {
+    filterOptions[filter.category].push(filter);
+  } else {
+    filterOptions[filter.category] = [filter];
+  }
+})
+
+console.log('filterOptions', filterOptions)
+   
+
+// for (var i = 0; i < newFiltersList.length; i++) {
+//   filterOptions[newFiltersList[i].category] = newFiltersList.filter(filter => filter.category === newFiltersList[i].category)
+// }
+
 const ERRORS_ROUTE = errorsRoute();
 
 const FETCH_LIST = new RequestTypes('filters/FETCH_LIST');
@@ -16,6 +39,7 @@ const FETCH_FILTER_OPTIONS = new RequestTypes('filters/FETCH_FILTER_OPTIONS');
 const SET_FILTER_OPTIONS = 'filters/SET_FILTER_OPTIONS';
 const SAVE = new RequestTypes('filters/SAVE');
 const REMOVE = new RequestTypes('filters/REMOVE');
+const EDIT = editType('funnel/EDIT');
 
 const SET_SEARCH_QUERY = 'filters/SET_SEARCH_QUERY';
 const SET_ACTIVE = 'filters/SET_ACTIVE';
@@ -35,7 +59,11 @@ const EDIT_ATTRIBUTE = 'filters/EDIT_ATTRIBUTE';
 const REMOVE_ATTRIBUTE = 'filters/REMOVE_ATTRIBUTE';
 const SET_ACTIVE_FLOW = 'filters/SET_ACTIVE_FLOW';
 
+const UPDATE_VALUE = 'filters/UPDATE_VALUE';
+
 const initialState = Map({
+  filterList: filterOptions,
+  instance: Filter(),
   activeFilter: null,
   list: List(),
   appliedFilter: Filter(),
@@ -71,6 +99,8 @@ const updateList = (state, instance) => state.update('list', (list) => {
 const reducer = (state = initialState, action = {}) => {
   let optionsMap = null;
   switch (action.type) {
+    case EDIT:
+      return state.mergeIn([ 'appliedFilter' ], action.instance);
     case FETCH_FILTER_OPTIONS.SUCCESS:
       optionsMap = state.getIn(['filterOptions', action.key]).map(i => i.value).toJS();
       return state.mergeIn(['filterOptions', action.key], Set(action.data.filter(i => !optionsMap.includes(i.value))));
@@ -177,6 +207,8 @@ const reducer = (state = initialState, action = {}) => {
       return state.removeIn([ 'appliedFilter', 'filters', action.index ]);
     case SET_SEARCH_QUERY:
       return state.set('searchQuery', action.query);
+    case UPDATE_VALUE:
+      return state.setIn([ 'appliedFilter', action.filterType, action.index, 'value' ], action.value);
     default:
       return state;
   }
@@ -234,7 +266,7 @@ export function removeAttribute(index) {
 export function fetchList(range) {
   return {
     types: FETCH_LIST.toArray(),
-    call: client => client.get(`/flows${range ? '?range_value=' + range : ''}`),
+    call: client => client.get(`/saved_search`),
   };
 }
 
@@ -257,7 +289,7 @@ export function setFilterOption(key, filterOption) {
 export function save(instance) {
   return {
     types: SAVE.toArray(),
-    call: client => client.post('/filters', instance.toData()),
+    call: client => client.post('/saved_search', instance.toData()),
     instance,
   };
 }
@@ -367,4 +399,21 @@ export function setSearchQuery(query) {
     type: SET_SEARCH_QUERY,
     query
   }
+}
+
+export const edit = instance => {
+  return {
+    type: EDIT,
+    instance,
+  }
+};
+
+// filterType: 'events' or 'filters'
+export const updateValue  = (filterType, index, value) => {
+  return {
+    type: UPDATE_VALUE,
+    filterType, 
+    index,
+    value
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/duck/funnels.js b/frontend/app/duck/funnels.js
index 7dad8550a..7a611dbca 100644
--- a/frontend/app/duck/funnels.js
+++ b/frontend/app/duck/funnels.js
@@ -117,7 +117,7 @@ const reducer = (state = initialState, action = {}) => {
         .set('issueTypesMap', tmpMap);
     case FETCH_INSIGHTS_SUCCESS:
       let stages = [];
-      if (action.isRefresh) {        
+      if (action.isRefresh) {
         const activeStages = state.get('activeStages');
         const oldInsights = state.get('insights');
         const lastStage = action.data.stages[action.data.stages.length - 1]
diff --git a/frontend/app/duck/index.js b/frontend/app/duck/index.js
index c8d7a7c65..ffd0b945d 100644
--- a/frontend/app/duck/index.js
+++ b/frontend/app/duck/index.js
@@ -34,6 +34,8 @@ import errors from './errors';
 import funnels from './funnels';
 import config from './config';
 import roles from './roles';
+import customMetrics from './customMetrics';
+import search from './search';
 
 export default combineReducers({
   jwt,
@@ -68,6 +70,8 @@ export default combineReducers({
   funnels,
   config,
   roles,
+  customMetrics,
+  search,
   ...integrations,
   ...sources,
 });
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
new file mode 100644
index 000000000..0404ca27a
--- /dev/null
+++ b/frontend/app/duck/search.js
@@ -0,0 +1,147 @@
+import { List, Map } from 'immutable'; 
+import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
+import CustomMetric, { FilterSeries } from 'Types/customMetric'
+import { createFetch, fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
+import { createRequestReducer, ROOT_KEY } from './funcTools/request';
+import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
+import Filter from 'Types/filter';
+import SavedFilter from 'Types/filter/savedFilter';
+import { errors as errorsRoute, isRoute } from "App/routes";
+import { fetchList as fetchSessionList } from './sessions';
+import { fetchList as fetchErrorsList } from './errors';
+
+const ERRORS_ROUTE = errorsRoute();
+
+const name = "custom_metric";
+const idKey = "metricId";
+
+const FETCH_LIST = fetchListType(name);
+const FETCH = fetchType(name);
+const SAVE = saveType(name);
+const EDIT = editType(name);
+const REMOVE = removeType(name);
+const UPDATE = `${name}/UPDATE`;
+const APPLY = `${name}/APPLY`;
+const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
+
+function chartWrapper(chart = []) {
+  return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
+}
+
+// const updateItemInList = createListUpdater(idKey);
+// const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
+// 	? state.mergeIn([ "instance" ], instance)
+// 	: state;
+
+const initialState = Map({
+	list: List(),
+  alertMetricId: null,
+	instance: new Filter({ filters: [] }),
+  savedFilter: new SavedFilter({ filters: [] }),
+});
+
+// Metric - Series - [] - filters
+function reducer(state = initialState, action = {}) {
+	switch (action.type) {
+    case EDIT:
+      return state.mergeIn(['instance'], action.instance);
+    case APPLY:
+      return action.fromUrl 
+        ? state.set('instance', 
+            Filter(action.filter)
+            // .set('events', state.getIn([ 'instance', 'events' ]))
+          )
+        : state.mergeIn(['instance'], action.filter);
+    case success(SAVE):
+      return state.mergeIn([ 'instance' ], action.data);
+    case success(REMOVE):
+      return state.update('list', list => list.filter(item => item.metricId !== action.id));
+		case success(FETCH):
+			return state.set("instance", ErrorInfo(action.data));
+		case success(FETCH_LIST):
+			const { data } = action;
+			return state.set("list", List(data.map(CustomMetric)));
+	}
+	return state;
+}
+
+export default mergeReducers(
+	reducer,
+	createRequestReducer({
+		[ ROOT_KEY ]: FETCH_LIST,
+		fetch: FETCH,
+	}),
+);
+
+const filterMap = ({value, type, key, operator, source, custom, isEvent }) => ({
+  // value: Array.isArray(value) ? value: [value],
+  value: value.filter(i => i !== '' && i !== null),
+  custom,
+  type: key,
+  key, operator,
+  source,
+  isEvent
+});
+
+const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
+  dispatch(actionCreator(...args));
+  const filter = getState().getIn([ 'search', 'instance']).toData();
+  filter.filters = filter.filters.map(filterMap);
+  filter.isNew = true  // TODO remove this line
+
+  return isRoute(ERRORS_ROUTE, window.location.pathname)
+    ? dispatch(fetchErrorsList(filter))
+    : dispatch(fetchSessionList(filter));
+};
+
+export const edit = reduceThenFetchResource((instance) => ({
+    type: EDIT,
+    instance,
+}));
+
+export const remove = createRemove(name);
+
+export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
+  type: APPLY,
+  filter,
+  fromUrl,
+}));
+
+export const updateSeries = (index, series) => ({
+  type: UPDATE,
+  index,
+  series,
+});
+
+export function fetch(id) {
+	return {
+		id,
+		types: array(FETCH),
+		call: c => c.get(`/errors/${id}`),
+	}
+}
+
+export function save(instance) {
+  return {
+    types: SAVE.array,
+    call: client => client.post('/saved_search', {
+      name: instance.name,
+      filter: instance.filter.toSaveData(),
+    }),
+    instance,
+  };
+}
+
+export function fetchList() {
+  return {
+    types: array(FETCH_LIST),
+    call: client => client.get(`/${name}s`),
+  };
+}
+
+export function setAlertMetricId(id) {
+  return {
+    type: SET_ALERT_METRIC_ID,
+    id,
+  };
+}
\ No newline at end of file
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index c77533f3c..8915fd341 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -106,4 +106,10 @@
   opacity: .5;
 }
 
-
+.form-group {
+  margin-bottom: 25px;
+  & label {
+    display: inline-block;
+    margin-bottom: 5px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/browser.svg b/frontend/app/svg/icons/filters/browser.svg
new file mode 100644
index 000000000..9718fa3dc
--- /dev/null
+++ b/frontend/app/svg/icons/filters/browser.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-globe" viewBox="0 0 16 16">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/clickrage.svg b/frontend/app/svg/icons/filters/clickrage.svg
new file mode 100644
index 000000000..3220e339e
--- /dev/null
+++ b/frontend/app/svg/icons/filters/clickrage.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-emoji-angry" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zm6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761l2-1zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761l-2-1z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/code.svg b/frontend/app/svg/icons/filters/code.svg
new file mode 100644
index 000000000..c9c41b0d7
--- /dev/null
+++ b/frontend/app/svg/icons/filters/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/country.svg b/frontend/app/svg/icons/filters/country.svg
new file mode 100644
index 000000000..f72a9967b
--- /dev/null
+++ b/frontend/app/svg/icons/filters/country.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-geo-alt" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/custom.svg b/frontend/app/svg/icons/filters/custom.svg
new file mode 100644
index 000000000..c9c41b0d7
--- /dev/null
+++ b/frontend/app/svg/icons/filters/custom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/device.svg b/frontend/app/svg/icons/filters/device.svg
new file mode 100644
index 000000000..b453af4aa
--- /dev/null
+++ b/frontend/app/svg/icons/filters/device.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M702.5,826.7H598V722.1h107.8v-68.6H78.6V157h816.7v277.7h55.5c3.3,0,9.8,0,13.1,3.3V134.1c0-26.1-19.6-45.7-45.7-45.7H55.7C29.6,88.4,10,108,10,134.1v542.3c0,26.1,19.6,45.7,45.7,45.7h323.4v104.5H255c-22.9,0-42.5,19.6-42.5,42.5c0,22.9,19.6,42.5,42.5,42.5h460.6c-6.5-9.8-9.8-19.6-9.8-29.4v-55.5H702.5z"/><path d="M960.6,457.5H767.9c-16.3,0-29.4,13.1-29.4,29.4v392c0,16.3,13.1,29.4,29.4,29.4h192.7c16.3,0,29.4-13.1,29.4-29.4v-392C990,473.9,976.9,457.5,960.6,457.5z M862.6,892c-6.5,0-13.1-6.5-13.1-13.1s6.5-13.1,13.1-13.1c6.5,0,13.1,6.5,13.1,13.1S869.1,892,862.6,892z M970.4,849.5H754.8V522.9h215.6V849.5z"/></g>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/duration.svg b/frontend/app/svg/icons/filters/duration.svg
new file mode 100644
index 000000000..e5ecc83ef
--- /dev/null
+++ b/frontend/app/svg/icons/filters/duration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/error.svg b/frontend/app/svg/icons/filters/error.svg
new file mode 100644
index 000000000..a170d1363
--- /dev/null
+++ b/frontend/app/svg/icons/filters/error.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-exclamation-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/fetch.svg b/frontend/app/svg/icons/filters/fetch.svg
new file mode 100644
index 000000000..40cbbbf86
--- /dev/null
+++ b/frontend/app/svg/icons/filters/fetch.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-arrow-left-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/graphql.svg b/frontend/app/svg/icons/filters/graphql.svg
new file mode 100644
index 000000000..86eafbec1
--- /dev/null
+++ b/frontend/app/svg/icons/filters/graphql.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.52 391.6"><title>graphql</title><path d="M356.7,250.2a35,35,0,0,0-9.2-3.67v-93A34.92,34.92,0,1,0,314,95.57l-80.54-46.5a34.9,34.9,0,1,0-68.35-10A35.24,35.24,0,0,0,166.53,49L86,95.53A35.4,35.4,0,0,0,78.1,89.3a34.92,34.92,0,1,0-25.6,64.19v93a34.93,34.93,0,1,0,33.5,58L166.52,351a34.9,34.9,0,1,0,66.61-1.12l80.05-46.22A34.92,34.92,0,1,0,356.7,250.2Zm-262,22a34.46,34.46,0,0,0-9.81-17L190.28,72.62a34.91,34.91,0,0,0,19.47,0l105.4,182.56a34.81,34.81,0,0,0-9.82,17ZM305.79,110a34.83,34.83,0,0,0,25.11,43.4v93.15l-1.35.36L224.13,64.32c.31-.3.63-.61.93-.92ZM174.9,63.36c.33.33.66.66,1,1L70.47,246.94l-1.37-.37V153.41A34.83,34.83,0,0,0,94.19,110Zm50.91,274a34.92,34.92,0,0,0-50.94-.71l-80.6-46.53c.12-.45.25-.9.36-1.35H305.36c.19.77.4,1.53.64,2.29Z" transform="translate(-25.74 -4.2)"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/i-cursor.svg b/frontend/app/svg/icons/filters/i-cursor.svg
new file mode 100644
index 000000000..ce8709fa8
--- /dev/null
+++ b/frontend/app/svg/icons/filters/i-cursor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M96 38.223C75.091 13.528 39.824 1.336 6.191.005 2.805-.129 0 2.617 0 6.006v20.013c0 3.191 2.498 5.847 5.686 5.989C46.519 33.825 80 55.127 80 80v160H38a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h42v160c0 24.873-33.481 46.175-74.314 47.992-3.188.141-5.686 2.797-5.686 5.989v20.013c0 3.389 2.806 6.135 6.192 6.002C40.03 510.658 75.193 498.351 96 473.777c20.909 24.695 56.176 36.887 89.809 38.218 3.386.134 6.191-2.612 6.191-6.001v-20.013c0-3.191-2.498-5.847-5.686-5.989C145.481 478.175 112 456.873 112 432V272h42a6 6 0 0 0 6-6v-20a6 6 0 0 0-6-6h-42V80c0-24.873 33.481-46.175 74.314-47.992 3.188-.142 5.686-2.798 5.686-5.989V6.006c0-3.389-2.806-6.135-6.192-6.002C151.97 1.342 116.807 13.648 96 38.223z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/input.svg b/frontend/app/svg/icons/filters/input.svg
new file mode 100644
index 000000000..256542f8a
--- /dev/null
+++ b/frontend/app/svg/icons/filters/input.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-input-cursor-text" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 2a.5.5 0 0 1 .5-.5c.862 0 1.573.287 2.06.566.174.099.321.198.44.286.119-.088.266-.187.44-.286A4.165 4.165 0 0 1 10.5 1.5a.5.5 0 0 1 0 1c-.638 0-1.177.213-1.564.434a3.49 3.49 0 0 0-.436.294V7.5H9a.5.5 0 0 1 0 1h-.5v4.272c.1.08.248.187.436.294.387.221.926.434 1.564.434a.5.5 0 0 1 0 1 4.165 4.165 0 0 1-2.06-.566A4.561 4.561 0 0 1 8 13.65a4.561 4.561 0 0 1-.44.285 4.165 4.165 0 0 1-2.06.566.5.5 0 0 1 0-1c.638 0 1.177-.213 1.564-.434.188-.107.335-.214.436-.294V8.5H7a.5.5 0 0 1 0-1h.5V3.228a3.49 3.49 0 0 0-.436-.294A3.166 3.166 0 0 0 5.5 2.5.5.5 0 0 1 5 2z"/>
+  <path d="M10 5h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4v1h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4v1zM6 5V4H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v-1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/link.svg b/frontend/app/svg/icons/filters/link.svg
new file mode 100644
index 000000000..ee908ebd0
--- /dev/null
+++ b/frontend/app/svg/icons/filters/link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-link-45deg" viewBox="0 0 16 16">
+  <path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/location.svg b/frontend/app/svg/icons/filters/location.svg
new file mode 100644
index 000000000..499378c6b
--- /dev/null
+++ b/frontend/app/svg/icons/filters/location.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-cursor" viewBox="0 0 16 16">
+  <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/os.svg b/frontend/app/svg/icons/filters/os.svg
new file mode 100644
index 000000000..7a2781f28
--- /dev/null
+++ b/frontend/app/svg/icons/filters/os.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1 C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.65234375,8.4375 C7.65234375,9.13281598 7.43424697,9.70898209 6.99804688,10.1660156 C6.56184678,10.6230492 5.99609723,10.8515625 5.30078125,10.8515625 C4.61848617,10.8515625 4.06445525,10.6230492 3.63867188,10.1660156 C3.2128885,9.70898209 3,9.13281598 3,8.4375 L3,7.4140625 C3,6.7213507 3.2128885,6.14583563 3.63867188,5.6875 C4.06445525,5.22916437 4.6171841,5 5.296875,5 C5.99219098,5 6.55859156,5.22916437 6.99609375,5.6875 C7.43359594,6.14583563 7.65234375,6.7213507 7.65234375,7.4140625 L7.65234375,8.4375 Z M6.70703125,7.40625 C6.70703125,6.9322893 6.58007939,6.54297027 6.32617188,6.23828125 C6.07226436,5.93359223 5.72916883,5.78125 5.296875,5.78125 C4.88020625,5.78125 4.55078246,5.93359223 4.30859375,6.23828125 C4.06640504,6.54297027 3.9453125,6.9322893 3.9453125,7.40625 L3.9453125,8.4375 C3.9453125,8.91666906 4.06640504,9.30924326 4.30859375,9.61523438 C4.55078246,9.92122549 4.88150832,10.0742188 5.30078125,10.0742188 C5.73567926,10.0742188 6.07877479,9.92187652 6.33007812,9.6171875 C6.58138146,9.31249848 6.70703125,8.91927324 6.70703125,8.4375 L6.70703125,7.40625 Z M11.7617188,9.30859375 C11.7617188,9.0716134 11.673829,8.87760492 11.4980469,8.7265625 C11.3222647,8.57552008 11.011721,8.44010477 10.5664062,8.3203125 C9.93098641,8.153645 9.442059,7.93294408 9.09960938,7.65820312 C8.75715975,7.38346217 8.5859375,7.02343973 8.5859375,6.578125 C8.5859375,6.11978937 8.77538873,5.74218898 9.15429688,5.4453125 C9.53320502,5.14843602 10.0221324,5 10.6210938,5 C11.2460969,5 11.748045,5.16796707 12.1269531,5.50390625 C12.5058613,5.83984543 12.6888021,6.24348723 12.6757812,6.71484375 L12.6679688,6.73828125 L11.7578125,6.73828125 C11.7578125,6.44661313 11.6588552,6.21028736 11.4609375,6.02929688 C11.2630198,5.84830639 10.9804706,5.7578125 10.6132812,5.7578125 C10.2669254,5.7578125 10.000652,5.83333258 9.81445312,5.984375 C9.62825428,6.13541742 9.53515625,6.33072797 9.53515625,6.5703125 C9.53515625,6.78645941 9.6360667,6.96614512 9.83789062,7.109375 C10.0397146,7.25260488 10.3736956,7.3880202 10.8398438,7.515625 C11.451826,7.67968832 11.9166651,7.90624855 12.234375,8.1953125 C12.5520849,8.48437645 12.7109375,8.85286234 12.7109375,9.30078125 C12.7109375,9.77474195 12.5214863,10.1516913 12.1425781,10.4316406 C11.76367,10.7115899 11.2656281,10.8515625 10.6484375,10.8515625 C10.0546845,10.8515625 9.53385641,10.694663 9.0859375,10.3808594 C8.63801859,10.0670557 8.42057285,9.63672148 8.43359375,9.08984375 L8.44140625,9.06640625 L9.35546875,9.06640625 C9.35546875,9.41276215 9.47525922,9.67122311 9.71484375,9.84179688 C9.95442828,10.0123706 10.2656231,10.0976562 10.6484375,10.0976562 C11.0000018,10.0976562 11.2734365,10.0266934 11.46875,9.88476562 C11.6640635,9.74283783 11.7617188,9.55078246 11.7617188,9.30859375 Z"/>
+</svg>
diff --git a/frontend/app/svg/icons/filters/phone-laptop.svg b/frontend/app/svg/icons/filters/platform.svg
similarity index 100%
rename from frontend/app/svg/icons/filters/phone-laptop.svg
rename to frontend/app/svg/icons/filters/platform.svg
diff --git a/frontend/app/svg/icons/filters/referrer.svg b/frontend/app/svg/icons/filters/referrer.svg
new file mode 100644
index 000000000..daa9f0141
--- /dev/null
+++ b/frontend/app/svg/icons/filters/referrer.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-chat-square-quote" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+  <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/resize.svg b/frontend/app/svg/icons/filters/resize.svg
new file mode 100644
index 000000000..ca5a645f8
--- /dev/null
+++ b/frontend/app/svg/icons/filters/resize.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="icn_resize" stroke="none" stroke-width="1">
+        <g id="Group" transform="translate(0.000000, 4.000000)">
+            <path d="M6.3676531,7.24426522 C6.34293965,7.2140599 6.31488039,7.18662417 6.28398858,7.16245992 C6.0529554,6.98174063 5.71583449,7.01836611 5.53100794,7.24426522 L-0.811179719,14.9958279 C-0.887171026,15.0887062 -0.928571429,15.2041069 -0.928571429,15.3230491 C-0.928571429,15.6123411 -0.688723973,15.8468587 -0.392857143,15.8468587 L12.2915182,15.8468587 C12.4131636,15.8468587 12.5311871,15.8063783 12.6261762,15.7320757 C12.8572094,15.5513564 12.8946673,15.221727 12.7098408,14.9958279 L6.3676531,7.24426522 Z M13.5464859,14.3413855 C14.1009655,15.0190828 13.9885919,16.0079708 13.2954924,16.5501287 C13.010525,16.7730365 12.6564545,16.8944777 12.2915182,16.8944777 L-0.392857143,16.8944777 C-1.28045763,16.8944777 -2,16.1909252 -2,15.3230491 C-2,14.9662225 -1.87579879,14.6200203 -1.64782487,14.3413855 L4.69436279,6.58982279 C5.24884242,5.91212546 6.26020517,5.80224902 6.9533047,6.34440688 C7.04598012,6.41689965 7.13015792,6.49920683 7.20429825,6.58982279 L13.5464859,14.3413855 Z" id="Triangle" fill-rule="nonzero" transform="translate(5.949360, 11.447239) rotate(-90.000000) translate(-5.949360, -11.447239) "></path>
+            <path d="M24.2839886,7.16245992 C24.0529554,6.98174063 23.7158345,7.01836611 23.5310079,7.24426522 L17.1888203,14.9958279 C17.112829,15.0887062 17.0714286,15.2041069 17.0714286,15.3230491 C17.0714286,15.6123411 17.311276,15.8468587 17.6071429,15.8468587 L30.2915182,15.8468587 C30.4131636,15.8468587 30.5311871,15.8063783 30.6261762,15.7320757 C30.8572094,15.5513564 30.8946673,15.221727 30.7098408,14.9958279 L24.3676531,7.24426522 C24.3429397,7.2140599 24.3148804,7.18662417 24.2839886,7.16245992 Z M31.5464859,14.3413855 C32.1009655,15.0190828 31.9885919,16.0079708 31.2954924,16.5501287 C31.010525,16.7730365 30.6564545,16.8944777 30.2915182,16.8944777 L17.6071429,16.8944777 C16.7195424,16.8944777 16,16.1909252 16,15.3230491 C16,14.9662225 16.1242012,14.6200203 16.3521751,14.3413855 L22.6943628,6.58982279 C23.2488424,5.91212546 24.2602052,5.80224902 24.9533047,6.34440688 C25.0459801,6.41689965 25.1301579,6.49920683 25.2042983,6.58982279 L31.5464859,14.3413855 Z" id="Triangle-Copy" fill-rule="nonzero" transform="translate(23.949360, 11.447239) rotate(90.000000) translate(-23.949360, -11.447239) "></path>
+            <rect id="Rectangle" x="14.4136458" y="0" width="1.07142857" height="22"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/border-outer.svg b/frontend/app/svg/icons/filters/rev-id.svg
similarity index 100%
rename from frontend/app/svg/icons/filters/border-outer.svg
rename to frontend/app/svg/icons/filters/rev-id.svg
diff --git a/frontend/app/svg/icons/filters/state-action.svg b/frontend/app/svg/icons/filters/state-action.svg
new file mode 100644
index 000000000..b4a93969f
--- /dev/null
+++ b/frontend/app/svg/icons/filters/state-action.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-grid-3x2-gap" viewBox="0 0 16 16">
+  <path d="M4 4v2H2V4h2zm1 7V9a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm5 5V9a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zM9 4v2H7V4h2zm5 0h-2v2h2V4zM4 9v2H2V9h2zm5 0v2H7V9h2zm5 0v2h-2V9h2zm-3-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-2z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/view.svg b/frontend/app/svg/icons/filters/view.svg
new file mode 100644
index 000000000..8feb3ec07
--- /dev/null
+++ b/frontend/app/svg/icons/filters/view.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-eye" viewBox="0 0 16 16">
+  <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
new file mode 100644
index 000000000..0334ae2e6
--- /dev/null
+++ b/frontend/app/types/customMetric.js
@@ -0,0 +1,67 @@
+import Record from 'Types/Record';
+import { List } from 'immutable';
+import Filter from 'Types/filter';
+
+export const FilterSeries = Record({
+  seriesId: undefined,
+  index: undefined,
+  name: 'Filter Series',
+  filter: new Filter(),
+}, {
+  idKey: 'seriesId',
+  methods: {
+    toData() {
+      const js = this.toJS();
+      return js;
+    },
+  },
+  fromJS: ({ filter, ...rest }) => ({
+    ...rest,
+    filter: new Filter(filter),
+  }),
+});
+
+export default Record({
+  metricId: undefined,
+  name: 'Series',
+  type: 'session_count',
+  series: List(),
+  isPublic: false,
+}, {
+  idKey: 'metricId',
+  methods: {
+    validate() {
+      return validateName(this.name, { diacritics: true });
+    },
+
+    toSaveData() {
+      const js = this.toJS();
+      
+      js.series = js.series.map(series => {
+        series.filter.filters = series.filter.filters.map(filter => {
+          filter.type = filter.key
+          delete filter.operatorOptions
+          delete filter.icon
+          delete filter.key
+          delete filter._key
+          return filter;
+        });
+        delete series._key
+        return series;
+      });
+
+      delete js.key;
+
+      return js;
+    },
+
+    toData() {
+      const js = this.toJS();
+      return js;
+    },
+  },
+  fromJS: ({ series, ...rest }) => ({
+    ...rest,
+    series: List(series).map(FilterSeries),
+  }),
+});
diff --git a/frontend/app/types/dashboard/customMetric.js b/frontend/app/types/dashboard/customMetric.js
new file mode 100644
index 000000000..9dd374b56
--- /dev/null
+++ b/frontend/app/types/dashboard/customMetric.js
@@ -0,0 +1,14 @@
+import { Record } from 'immutable';
+
+const CustomMetric = Record({
+  avg: undefined,
+  chart: [],
+});
+
+
+function fromJS(data = {}) {
+  if (data instanceof CustomMetric) return data;
+  return new CustomMetric(data);
+}
+
+export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/filter/customFilter.js b/frontend/app/types/filter/customFilter.js
index ea7d82af2..59e47d985 100644
--- a/frontend/app/types/filter/customFilter.js
+++ b/frontend/app/types/filter/customFilter.js
@@ -30,6 +30,20 @@ const REVID = 'REVID';
 const USERANONYMOUSID = 'USERANONYMOUSID';
 const USERID = 'USERID';
 
+const ISSUE = 'ISSUE';
+const EVENTS_COUNT = 'EVENTS_COUNT';
+const UTM_SOURCE = 'UTM_SOURCE';
+const UTM_MEDIUM = 'UTM_MEDIUM';
+const UTM_CAMPAIGN = 'UTM_CAMPAIGN';
+
+
+const DOM_COMPLETE = 'DOM_COMPLETE';
+const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
+const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
+const TTFB = 'TTFB';
+const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
+const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
+
 export const KEYS = {
   ERROR,
   MISSING_RESOURCE,
@@ -56,7 +70,19 @@ export const KEYS = {
   STATEACTION,
   REVID,
   USERANONYMOUSID,
-  USERID
+  USERID,
+  ISSUE,
+  EVENTS_COUNT,
+  UTM_SOURCE,
+  UTM_MEDIUM,
+  UTM_CAMPAIGN,
+  
+  DOM_COMPLETE,
+  LARGEST_CONTENTFUL_PAINT_TIME,
+  TIME_BETWEEN_EVENTS,
+  TTFB,
+  AVG_CPU_LOAD,
+  AVG_MEMORY_USAGE,
 };
 
 const getOperatorDefault = (type) => {
@@ -85,7 +111,7 @@ export default Record({
   label: '',
   icon: '',
   type: '',
-  value: '',
+  value: [""],
   custom: '',
   target: Target(),
   level: '',
diff --git a/frontend/app/types/filter/event.js b/frontend/app/types/filter/event.js
index 2a6f54da6..17d6357ff 100644
--- a/frontend/app/types/filter/event.js
+++ b/frontend/app/types/filter/event.js
@@ -17,6 +17,13 @@ const USERANONYMOUSID = 'USERANONYMOUSID';
 const USERID = 'USERID';
 const ERROR = 'ERROR';
 
+const DOM_COMPLETE = 'DOM_COMPLETE';
+const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
+const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
+const TTFB = 'TTFB';
+const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
+const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
+
 export const TYPES = {
   CONSOLE,
   GRAPHQL,
@@ -31,7 +38,14 @@ export const TYPES = {
   METADATA,
   USERANONYMOUSID,
   USERID,
-  ERROR
+  ERROR,
+  
+  DOM_COMPLETE,
+  LARGEST_CONTENTFUL_PAINT_TIME,
+  TIME_BETWEEN_EVENTS,
+  TTFB,
+  AVG_CPU_LOAD,
+  AVG_MEMORY_USAGE,
 };
 
 function getLabelText(type, source) {
@@ -49,11 +63,19 @@ function getLabelText(type, source) {
   if (type === TYPES.USERID) return 'User Id';
   if (type === TYPES.USERANONYMOUSID) return 'User Anonymous Id';
   if (type === TYPES.REVID) return 'Rev ID';
+
+  if (type === TYPES.DOM_COMPLETE) return 'DOM Complete';
+  if (type === TYPES.LARGEST_CONTENTFUL_PAINT_TIME) return 'Largest Contentful Paint Time';
+  if (type === TYPES.TIME_BETWEEN_EVENTS) return 'Time Between Events';
+  if (type === TYPES.TTFB) return 'TTFB';
+  if (type === TYPES.AVG_CPU_LOAD) return 'Avg CPU Load';
+  if (type === TYPES.AVG_MEMORY_USAGE) return 'Avg Memory Usage';
+
   if (type === TYPES.CUSTOM) {
     if (!source) return 'Custom';
 		return source;
   }
-  return '?';
+  return type;
 }
 
 export default Record({
@@ -63,7 +85,7 @@ export default Record({
   operator: 'on',
   type: '',
   searchType: '',
-  value: '',
+  value: [],
   custom: '',
   inputValue: '',
   target: Target(),
@@ -73,16 +95,16 @@ export default Record({
 }, {
   keyKey: "_key",
   fromJS: ({ target, type = "" , ...event }) => {
-    const viewType = type.split('_')[0];
+    // const viewType = type.split('_')[0];
     return {
       ...event,
-      type: viewType,
+      type: type,
       searchType: event.searchType || type,
-      label: getLabelText(viewType, event.source),
+      label: getLabelText(type, event.source),
       target: Target(target),
       operator: event.operator || defaultOperator(event),
       // value: target ? target.label : event.value,
-      icon: event.icon || getEventIcon({...event, type: viewType })
+      icon: event.icon || getEventIcon({...event, type: type })
     };
   }
 })
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index 8b3301aad..a9871c793 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -9,7 +9,8 @@ import {
   getDateRangeFromValue
 } from 'App/dateRange';
 import Event from './event';
-import CustomFilter from './customFilter';
+// import CustomFilter from './customFilter';
+import NewFilter from './newFilter';
 
 const rangeValue = DATE_RANGE_VALUES.LAST_7_DAYS;
 const range = getDateRangeFromValue(rangeValue);
@@ -17,8 +18,8 @@ const startDate = range.start.unix() * 1000;
 const endDate = range.end.unix() * 1000;
 
 export default Record({
-  name: undefined,
-  id: undefined,
+  name: '',
+  searchId: undefined,
   referrer: undefined,
   userBrowser: undefined,
   userOs: undefined,
@@ -44,7 +45,41 @@ export default Record({
   suspicious: undefined,
   consoleLevel: undefined,
   strict: false,
+  eventsOrder: 'and',
 }, {
+  idKey: 'searchId',
+  methods: {
+    toSaveData() {
+      const js = this.toJS();
+      js.filters = js.filters.map(filter => {
+        filter.type = filter.key
+        
+        delete filter.category
+        delete filter.icon
+        delete filter.operatorOptions
+        delete filter._key
+        delete filter.key
+        return filter;
+      });
+
+      delete js.createdAt;
+      delete js.key;
+      delete js._key;
+      return js;
+    },
+    toData() {
+      const js = this.toJS();
+      js.filters = js.filters.map(filter => {
+        // delete filter.operatorOptions
+        // delete filter._key
+        return filter;
+      });
+
+      delete js.createdAt;
+      delete js.key;
+      return js;
+    }
+  },
   fromJS({ filters, events, custom, ...filter }) {
     let startDate;
     let endDate;
@@ -59,7 +94,7 @@ export default Record({
       startDate,
       endDate,
       events: List(events).map(Event),
-      filters: List(filters).map(CustomFilter),
+      filters: List(filters).map(NewFilter),
       custom: Map(custom),
     }
   }
@@ -73,6 +108,12 @@ export const defaultFilters = [
 		type: 'default',
 		keys: [
       { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false },
+      { label: 'DOM Complete', key: KEYS.DOM_COMPLETE, type: KEYS.DOM_COMPLETE, filterKey: KEYS.DOM_COMPLETE, icon: 'filters/click', isFilter: false },
+      { label: 'Largest Contentful Paint Time', key: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, type: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, filterKey: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, icon: 'filters/click', isFilter: false },
+      { label: 'Time Between Events', key: KEYS.TIME_BETWEEN_EVENTS, type: KEYS.TIME_BETWEEN_EVENTS, filterKey: KEYS.TIME_BETWEEN_EVENTS, icon: 'filters/click', isFilter: false },
+      { label: 'Avg CPU Load', key: KEYS.AVG_CPU_LOAD, type: KEYS.AVG_CPU_LOAD, filterKey: KEYS.AVG_CPU_LOAD, icon: 'filters/click', isFilter: false },
+      { label: 'Memory Usage', key: KEYS.AVG_MEMORY_USAGE, type: KEYS.AVG_MEMORY_USAGE, filterKey: KEYS.AVG_MEMORY_USAGE, icon: 'filters/click', isFilter: false },
+
       { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false },
       { label: 'Page', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false },
       // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false }
@@ -85,8 +126,8 @@ export const defaultFilters = [
       { label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true },
 			{ label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true },
       { label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true },
-      { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/border-outer', isFilter: true },
-      { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/phone-laptop', isFilter: true }
+      { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true },
+      { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true },
 		]
   },
   {
@@ -103,6 +144,11 @@ export const defaultFilters = [
 		type: 'default',
 		keys: [
       { label: 'Errors', key: KEYS.ERROR, type: KEYS.ERROR, filterKey: KEYS.ERROR, icon: 'exclamation-circle', isFilter: false },
+      { label: 'Issues', key: KEYS.ISSUES, type: KEYS.ISSUES, filterKey: KEYS.ISSUES, icon: 'exclamation-circle', isFilter: true },
+      { label: 'UTM Source', key: KEYS.UTM_SOURCE, type: KEYS.UTM_SOURCE, filterKey: KEYS.UTM_SOURCE, icon: 'exclamation-circle', isFilter: true },
+      { label: 'UTM Medium', key: KEYS.UTM_MEDIUM, type: KEYS.UTM_MEDIUM, filterKey: KEYS.UTM_MEDIUM, icon: 'exclamation-circle', isFilter: true },
+      { label: 'UTM Campaign', key: KEYS.UTM_CAMPAIGN, type: KEYS.UTM_CAMPAIGN, filterKey: KEYS.UTM_CAMPAIGN, icon: 'exclamation-circle', isFilter: true },
+      
       { label: 'Fetch Requests', key: KEYS.FETCH, type: KEYS.FETCH, filterKey: KEYS.FETCH, icon: 'fetch', isFilter: false },
       { label: 'GraphQL Queries', key: KEYS.GRAPHQL, type: KEYS.GRAPHQL, filterKey: KEYS.GRAPHQL, icon: 'vendors/graphql', isFilter: false },
       { label: 'Store Actions', key: KEYS.STATEACTION, type: KEYS.STATEACTION, filterKey: KEYS.STATEACTION, icon: 'store', isFilter: false },
@@ -127,6 +173,13 @@ export const getEventIcon = (filter) => {
   if (type === KEYS.USERBROWSER) return 'window';
   if (type === KEYS.PLATFORM) return 'window';
 
+  if (type === TYPES.DOM_COMPLETE) return 'filters/click';
+  if (type === TYPES.LARGEST_CONTENTFUL_PAINT_TIME) return 'filters/click';
+  if (type === TYPES.TIME_BETWEEN_EVENTS) return 'filters/click';
+  if (type === TYPES.TTFB) return 'filters/click';
+  if (type === TYPES.AVG_CPU_LOAD) return 'filters/click';
+  if (type === TYPES.AVG_MEMORY_USAGE) return 'filters/click';
+
   if (type === TYPES.CLICK) return 'filters/click';
   if (type === TYPES.LOCATION) return 'map-marker-alt';
   if (type === TYPES.VIEW) return 'event/view';
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
new file mode 100644
index 000000000..b5449b161
--- /dev/null
+++ b/frontend/app/types/filter/filterType.ts
@@ -0,0 +1,62 @@
+export enum FilterCategory {
+  INTERACTIONS = "Interactions",
+  GEAR = "Gear",
+  RECORDING_ATTRIBUTES = "Recording Attributes",
+  JAVASCRIPT = "Javascript",
+  USER = "User",
+  METADATA = "Metadata",
+  PERFORMANCE = "Performance",
+};
+
+export enum FilterType {
+  ISSUE = "ISSUE",
+  BOOLEAN = "BOOLEAN",
+  NUMBER = "NUMBER",
+  DURATION = "DURATION",
+  MULTIPLE = "MULTIPLE",
+  COUNTRY = "COUNTRY",
+  DROPDOWN = "DROPDOWN",
+  MULTIPLE_DROPDOWN = "MULTIPLE_DROPDOWN",
+};
+
+export enum FilterKey {
+  ERROR = "ERROR",
+  MISSING_RESOURCE = "MISSING_RESOURCE",
+  SLOW_SESSION = "SLOW_SESSION",
+  CLICK_RAGE = "CLICK_RAGE",
+  CLICK = "CLICK",
+  INPUT = "INPUT",
+  LOCATION = "LOCATION",
+  VIEW = "VIEW",
+  CONSOLE = "CONSOLE",
+  METADATA = "METADATA",
+  CUSTOM = "CUSTOM",
+  URL = "URL",
+  USER_BROWSER = "USERBROWSER",
+  USER_OS = "USEROS",
+  USER_DEVICE = "USERDEVICE",
+  PLATFORM = "PLATFORM",
+  DURATION = "DURATION",
+  REFERRER = "REFERRER",
+  USER_COUNTRY = "USER_COUNTRY",
+  JOURNEY = "JOURNEY",
+  FETCH = "FETCH",
+  GRAPHQL = "GRAPHQL",
+  STATEACTION = "STATEACTION",
+  REVID = "REVID",
+  USERANONYMOUSID = "USERANONYMOUSID",
+  USERID = "USERID",
+  ISSUE = "ISSUE",
+  EVENTS_COUNT = "EVENTS_COUNT",
+  UTM_SOURCE = "UTM_SOURCE",
+  UTM_MEDIUM = "UTM_MEDIUM",
+  UTM_CAMPAIGN = "UTM_CAMPAIGN",
+  
+  DOM_COMPLETE = "DOM_COMPLETE",
+  LARGEST_CONTENTFUL_PAINT_TIME = "LARGEST_CONTENTFUL_PAINT_TIME",
+  TIME_BETWEEN_EVENTS = "TIME_BETWEEN_EVENTS",
+  TTFB = "TTFB",
+  AVG_CPU_LOAD = "AVG_CPU_LOAD",
+  AVG_MEMORY_USAGE = "AVG_MEMORY_USAGE",
+  FETCH_FAILED = "FETCH_FAILED",
+}
\ No newline at end of file
diff --git a/frontend/app/types/filter/index.js b/frontend/app/types/filter/index.js
index dba5512db..957e1dfb8 100644
--- a/frontend/app/types/filter/index.js
+++ b/frontend/app/types/filter/index.js
@@ -6,7 +6,7 @@ export * from './filter';
 
 
 const filterKeys = ['is', 'isNot'];
-const stringFilterKeys = ['is', 'isNot', 'contains'];
+const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
 const targetFilterKeys = ['on', 'notOn'];
 const signUpStatusFilterKeys = ['isSignedUp', 'notSignedUp'];
 const rangeFilterKeys = ['before', 'after', 'on', 'inRange', 'notInRange', 'withInLast', 'notWithInLast'];
@@ -209,6 +209,12 @@ export const operatorOptions = (filter) => {
     case TYPES.REVID:
     case 'metadata':
     case KEYS.ERROR:
+    case TYPES.DOM_COMPLETE:
+    case TYPES.LARGEST_CONTENTFUL_PAINT_TIME:
+    case TYPES.TIME_BETWEEN_EVENTS:
+    case TYPES.TTFB:
+    case TYPES.AVG_CPU_LOAD:
+    case TYPES.AVG_MEMORY_USAGE:
       return stringFilterOptions;
     
     case TYPES.INPUT:
@@ -230,4 +236,22 @@ export const operatorOptions = (filter) => {
     case KEYS.CLICK_RAGE:
       return [{ key: 'onAnything', text: 'on anything', value: 'true' }]
   }
-}
\ No newline at end of file
+}
+
+const NewFilterType = (key, category, label, icon, isEvent = false) => {
+  return {
+    key: key,
+    category: category,
+    label: label,
+    icon: icon,
+    isEvent: isEvent,
+    operators: operatorOptions({ key }),
+    value: [""]
+  }
+}
+
+export const newFiltersList = [
+  NewFilterType(TYPES.CLICK, 'Gear', 'Click', 'filters/click', true),
+  NewFilterType(TYPES.CLICK, 'Gear', 'Input', 'filters/click', true),
+  NewFilterType(TYPES.CONSOLE, 'Other', 'Console', 'filters/click', true),
+];
\ No newline at end of file
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
new file mode 100644
index 000000000..07628ffe2
--- /dev/null
+++ b/frontend/app/types/filter/newFilter.js
@@ -0,0 +1,277 @@
+import Record from 'Types/Record';
+import { FilterType, FilterKey, FilterCategory } from './filterType'
+import { countries, platformOptions } from 'App/constants';
+
+const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
+
+const ISSUE_OPTIONS = [
+  { text: 'Click Range', value: 'click_rage' },
+  { text: 'Dead Click', value: 'dead_click' },
+  { text: 'Excessive Scrolling', value: 'excessive_scrolling' },
+  { text: 'Bad Request', value: 'bad_request' },
+  { text: 'Missing Resource', value: 'missing_resource' },
+  { text: 'Memory', value: 'memory' },
+  { text: 'CPU', value: 'cpu' },
+  { text: 'Slow Resource', value: 'slow_resource' },
+  { text: 'Slow Page Load', value: 'slow_page_load' },
+  { text: 'Crash', value: 'crash' },
+  { text: 'Custom', value: 'custom' },
+  { text: 'JS Exception', value: 'js_exception' },
+]
+
+const filterKeys = ['is', 'isNot'];
+const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith', 'notContains'];
+const targetFilterKeys = ['on', 'notOn', 'onAny'];
+const signUpStatusFilterKeys = ['isSignedUp', 'notSignedUp'];
+const rangeFilterKeys = ['before', 'after', 'on', 'inRange', 'notInRange', 'withInLast', 'notWithInLast'];
+
+const options = [
+  {
+    key: 'is',
+    text: 'is',
+    value: 'is'
+  }, {
+    key: 'isNot',
+    text: 'is not',
+    value: 'isNot'
+  }, {
+    key: 'startsWith',
+    text: 'starts with',
+    value: 'startsWith'
+  }, {
+    key: 'endsWith',
+    text: 'ends with',
+    value: 'endsWith'
+  }, {
+    key: 'contains',
+    text: 'contains',
+    value: 'contains'
+  }, {
+    key: 'notContains',
+    text: 'not contains',
+    value: 'notContains'
+  }, {
+    key: 'hasAnyValue',
+    text: 'has any value',
+    value: 'hasAnyValue'
+  }, {
+    key: 'hasNoValue',
+    text: 'has no value',
+    value: 'hasNoValue'
+  }, 
+  
+
+  {
+    key: 'isSignedUp',
+    text: 'is signed up',
+    value: 'isSignedUp'
+  }, {
+    key: 'notSignedUp',
+    text: 'not signed up',
+    value: 'notSignedUp'
+  },
+  
+  
+  {
+    key: 'before',
+    text: 'before',
+    value: 'before'
+  }, {
+    key: 'after',
+    text: 'after',
+    value: 'after'
+  }, {
+    key: 'on',
+    text: 'on',
+    value: 'on'
+  }, {
+    key: 'notOn',
+    text: 'not on',
+    value: 'notOn'
+  }, {
+    key: 'inRage',
+    text: 'in rage',
+    value: 'inRage'
+  }, {
+    key: 'notInRage',
+    text: 'not in rage',
+    value: 'notInRage'
+  }, {
+    key: 'withinLast',
+    text: 'within last',
+    value: 'withinLast'
+  }, {
+    key: 'notWithinLast',
+    text: 'not within last',
+    value: 'notWithinLast'
+  },
+
+  {
+    key: 'greaterThan',
+    text: 'greater than',
+    value: 'greaterThan'
+  }, {
+    key: 'lessThan',
+    text: 'less than',
+    value: 'lessThan'
+  }, {
+    key: 'equal',
+    text: 'equal',
+    value: 'equal'
+  }, {
+    key: 'not equal',
+    text: 'not equal',
+    value: 'not equal'
+  },
+
+
+  {
+    key: 'onSelector',
+    text: 'on selector',
+    value: 'onSelector'
+  }, {
+    key: 'onText',
+    text: 'on text',
+    value: 'onText'
+  }, {
+    key: 'onComponent',
+    text: 'on component',
+    value: 'onComponent'
+  },
+
+
+  {
+    key: 'onAny',
+    text: 'on any',
+    value: 'onAny'
+  }
+];
+
+export const filterOptions = options.filter(({key}) => filterKeys.includes(key));
+export const stringFilterOptions = options.filter(({key}) => stringFilterKeys.includes(key));
+export const targetFilterOptions = options.filter(({key}) => targetFilterKeys.includes(key));
+export const booleanOptions = [
+  { key: 'true', text: 'true', value: 'true' },
+  { key: 'false', text: 'false', value: 'false' },
+]
+
+export const customOperators = [
+  { key: '=', text: '=', value: '=' },
+  { key: '<', text: '<', value: '<' },
+  { key: '>', text: '>', value: '>' },
+  { key: '<=', text: '<=', value: '<=' },
+  { key: '>=', text: '>=', value: '>=' },
+]
+
+export const filtersMap = {
+  [FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
+  [FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/input', isEvent: true },
+  [FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/location', isEvent: true },
+  [FilterKey.CUSTOM]: { key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Custom Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/custom', isEvent: true },
+  [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/fetch', isEvent: true },
+  [FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/graphql', isEvent: true },
+  [FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/state-action', isEvent: true },
+  [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/error', isEvent: true },
+  // [FilterKey.METADATA]: { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/metadata', isEvent: true },
+
+  [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/os' },
+  [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/browser' },
+  [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/device' },
+  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.GEAR, label: 'Platform', operator: 'is', operatorOptions: filterOptions, icon: 'filters/platform', options: platformOptions },
+  [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/rev-id' },
+
+  [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/referrer' },
+  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
+  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/country', options: countryOptions },
+
+  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/console' },
+  
+  
+  
+
+  [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
+  [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
+  
+  [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, sourcesourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  // [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.TTFB]: { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'is', operatorOptions: stringFilterOptions, sourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, sourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, sourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.FETCH_FAILED]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Fetch Failed', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  
+  
+  // [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.SLOW_SESSION]: { key: FilterKey.SLOW_SESSION, type: FilterType.BOOLEAN, category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
+  // [FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
+  // [FilterKey.CLICK_RAGE]: { key: FilterKey.CLICK_RAGE, type: FilterType.BOOLEAN, category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
+  
+  [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
+  // [FilterKey.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
+  // [FilterKey.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
+  // [FilterKey.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
+}
+
+export default Record({
+  timestamp: 0,
+  key: '',
+  label: '',
+  icon: '',
+  type: '',
+  value: [""],
+  source: [""],
+  category: '',
+  
+  custom: '',
+  // target: Target(),
+  level: '',
+  source: null,
+  hasNoValue: false,
+  isFilter: false,
+  actualValue: '',
+  
+  operator: '',
+  sourceOperator: '=',
+  operatorOptions: [],
+  sourceOptions: [],
+  isEvent: false,
+  index: 0,
+  options: [],
+}, {
+  keyKey: "_key",
+  fromJS: ({ key, ...filter }) => ({
+    ...filter,
+    key,
+    type: filter.type, // camelCased(filter.type.toLowerCase()),
+    // key: filter.type === METADATA ? filter.label : filter.key || filter.type, // || camelCased(filter.type.toLowerCase()),
+    // label: getLabel(filter),
+    // target: Target(target),
+    // operator: getOperatorDefault(key),
+    // value: target ? target.label : filter.value,
+    // value: typeof value === 'string' ? [value] : value,
+    // icon: filter.type ? getfilterIcon(filter.type) : 'filters/metadata'
+  }),
+})
+
+// const NewFilterType = (key, category, icon, isEvent = false) => {
+//   return {
+//     key: key,
+//     category: category,
+//     label: filterMap[key].label,
+//     icon: icon,
+//     isEvent: isEvent,
+//     operators: filterMap[key].operatorOptions,
+//     value: [""]
+//   }
+// }
+
+
+const getOperatorDefault = (type) => {
+  if (type === MISSING_RESOURCE) return 'true';
+  if (type === SLOW_SESSION) return 'true';
+  if (type === CLICK_RAGE) return 'true';
+  if (type === CLICK) return 'on';
+  
+  return 'is';
+}
\ No newline at end of file
diff --git a/frontend/env.js b/frontend/env.js
index 75f421314..85984b376 100644
--- a/frontend/env.js
+++ b/frontend/env.js
@@ -5,13 +5,13 @@ require('dotenv').config()
 
 const oss = {
 	name: 'oss',
-	PRODUCTION: true,
+	PRODUCTION: false,
 	SENTRY_ENABLED: false,
 	SENTRY_URL: "",
 	CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED === 'true',
 	CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
 	ORIGIN: () => 'window.location.origin',
-	API_EDP: () => 'window.location.origin + "/api"',
+	API_EDP: "https://foss.openreplay.com/api",
 	ASSETS_HOST: () => 'window.location.origin + "/assets"',
 	VERSION: '1.4.0',
 	SOURCEMAP: true,