diff --git a/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
index 5cf30c278..f6fd62ad5 100644
--- a/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
+++ b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
@@ -57,14 +57,14 @@ function AlertFormModal(props) {
         title={
           <div className="flex items-center">
             <span className="mr-3">{ 'Create Alert' }</span>
-            <IconButton 
+            {/* <IconButton 
               circle
               size="small"
               icon="plus" 
               outline
               id="add-button"
               onClick={ () => toggleForm({}, true) }
-            />
+            /> */}
           </div>
         }
         isDisplayed={ showModal }
diff --git a/frontend/app/components/Dashboard/Dashboard.js b/frontend/app/components/Dashboard/Dashboard.js
index 718501081..dc1355c20 100644
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@@ -114,6 +114,7 @@ function isInViewport(el) {
   comparing: state.getIn([ 'dashboard', 'comparing' ]),
   platform: state.getIn([ 'dashboard', 'platform' ]),
   dashboardAppearance: state.getIn([ 'user', 'account', 'appearance', 'dashboard' ]),
+  activeWidget: state.getIn(['customMetrics', 'activeWidget']),
 }), { setPeriod, setPlatform, fetchMetadataOptions })
 @withPageTitle('Metrics - OpenReplay')
 @withRouter
@@ -168,7 +169,7 @@ export default class Dashboard extends React.PureComponent {
   }
 
   render() {
-    const { dashboardAppearance, comparing } = this.props;
+    const { dashboardAppearance, comparing, activeWidget } = this.props;
     const { pageSection } = this.state;
 
     const noWidgets = WIDGET_KEYS
@@ -189,7 +190,7 @@ export default class Dashboard extends React.PureComponent {
             <div className={ cn(styles.header, "flex items-center w-full") }>            
               <MetricsFilters />
               <CustomMetrics />
-              <SessionListModal />
+              { activeWidget && <SessionListModal activeWidget={activeWidget} /> }
             </div>
             <div className="">
               <NoContent
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
index 632c7dc22..6d60e313d 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
@@ -1,7 +1,6 @@
 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';
 
@@ -18,6 +17,8 @@ function CustomMetricsWidgets(props: Props) {
     props.fetchList()
   }, [])
 
+  console.log('activeMetricId', activeMetricId)
+
   return (
     <>
       {list.map((item: any) => (
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
index 74a7099e1..55495fecc 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
@@ -1,4 +1,3 @@
-// import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview';
 import React, { useState } from 'react';
 import { IconButton, SlideModal } from 'UI';
 import CustomMetricForm from './CustomMetricForm';
@@ -13,7 +12,6 @@ interface Props {
 }
 function CustomMetrics(props: Props) {
   const { metric } = props;
-  // const [showModal, setShowModal] = useState(false);
 
   return (
     <div className="self-start">
@@ -27,7 +25,6 @@ function CustomMetrics(props: Props) {
         }
         isDisplayed={ !!metric }
         onClose={ () => props.init(null, false)}
-        // size="medium"
         content={ (!!metric) && (
           <div style={{ backgroundColor: '#f6f6f6' }}>
             <CustomMetricForm metric={metric} onClose={() => props.init(null, false)} />
diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.css b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.css
index 90ca94267..05f1ffb8a 100644
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.css
+++ b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.css
@@ -2,4 +2,28 @@
     padding: 20px;
     background-color: #f6f6f6;
     min-height: calc(100vh - 59px);
+  }
+
+  .dropdown {
+    display: flex !important;
+    padding: 4px 6px;
+    border-radius: 3px;
+    color: $gray-darkest;
+    font-weight: 500;
+    &:hover {
+      background-color: $gray-light;
+    }
+  }
+  
+  .dropdownTrigger {
+    padding: 4px 8px;
+    border-radius: 3px;
+    &:hover {
+      background-color: $gray-light;
+    }
+  }
+  
+  .dropdownIcon {
+    margin-top: 2px;
+    margin-left: 3px;
   }
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
index 4ff591856..5a517679a 100644
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
+++ b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { SlideModal, NoContent, Dropdown } from 'UI';
+import { SlideModal, NoContent, Dropdown, Icon } from 'UI';
 import SessionItem from 'Shared/SessionItem';
 import stl from './SessionListModal.css';
 import { connect } from 'react-redux';
 import { fetchSessionList, setActiveWidget } from 'Duck/customMetrics';
+import { DateTime } from 'luxon';
 
 interface Props {
     loading: boolean;
@@ -42,36 +43,41 @@ function SessionListModal(props: Props) {
     const writeOption = (e, { name, value }) => setActiveSeries(value);
 
     const filteredSessions = activeSeries === 'all' ? list.reduce((a, b) => a.concat(b.sessions), []) : list.filter(item => item.seriesId === activeSeries).reduce((a, b) => a.concat(b.sessions), []);
+    const startTime = new DateTime(activeWidget.startTimestamp).toFormat('LLL dd, yyyy HH:mm a');
+    const endTime = new DateTime(activeWidget.endTimestamp).toFormat('LLL dd, yyyy HH:mm a');
     return (
         <SlideModal
             title={ activeWidget && (
                 <div className="flex items-center">
                     <div className="mr-auto">{ 'Custom Metric: ' + activeWidget.widget.name } </div>
-                    <div className="text-base">
-                        <Dropdown
-                            className="w-4/6"
-                            placeholder="change"
-                            selection
-                            options={ seriesOptions }
-                            name="change"
-                            value={ activeSeries }
-                            onChange={ writeOption }
-                            id="change-dropdown"
-                        />
-                    </div>
                 </div>
             )}
             isDisplayed={ !!activeWidget }
             onClose={ () => props.setActiveWidget(null)}
             content={ activeWidget && (
-                <div className="">
+                <div className={ stl.wrapper }>
+                    <div className="mb-6 flex items-center">
+                        <div className="mr-auto">Showing all sessions between <span className="font-medium">{startTime}</span> and <span className="font-medium">{endTime}</span> </div>
+                        <div className="flex items-center ml-6">
+                            <span className="mr-2 color-gray-medium">Series: </span>
+                            <Dropdown
+                                className={stl.dropdown}
+                                direction="left"
+                                options={ seriesOptions }
+                                name="change"
+                                value={ activeSeries }
+                                onChange={ writeOption }
+                                id="change-dropdown"
+                                // icon={null}
+                                icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
+                            />
+                        </div>
+                    </div>
                     <NoContent 
                         show={ !loading && (filteredSessions.length === 0 || filteredSessions.size === 0 )}
                         title="No recordings found."
                     >
-                        <div className={ stl.wrapper }>
-                            { filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
-                        </div>
+                        { filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
                     </NoContent> 
                 </div>
             )}
@@ -82,5 +88,5 @@ function SessionListModal(props: Props) {
 export default connect(state => ({
     loading: state.getIn(['customMetrics', 'sessionListRequest', 'loading']),
     list: state.getIn(['customMetrics', 'sessionList']),
-    activeWidget: state.getIn(['customMetrics', 'activeWidget']),
+    // activeWidget: state.getIn(['customMetrics', 'activeWidget']),
 }), { fetchSessionList, setActiveWidget })(SessionListModal);