diff --git a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
index 448b802e..992a43c3 100644
--- a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
+++ b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
@@ -34,9 +34,9 @@ import { useDispatch } from 'react-redux';
 import { Datum } from '@elastic/charts/dist/utils/commons';
 import React from 'react';
 import { TIME_RANGE_OPTIONS } from '../../Dashboard/utils/constants';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { searchES } from '../../../redux/reducers/elasticsearch';
-import { MAX_DETECTORS } from '../../../utils/constants';
+import { MAX_DETECTORS, MAX_ANOMALIES } from '../../../utils/constants';
 import { AD_DOC_FIELDS } from '../../../../server/utils/constants';
 export interface AnomaliesDistributionChartProps {
   allDetectorsSelected: boolean;
@@ -64,17 +64,23 @@ export const AnomaliesDistributionChart = (
   const [timeRange, setTimeRange] = useState(TIME_RANGE_OPTIONS[0].value);
 
   const getAnomalyResult = async (currentDetectors: DetectorListItem[]) => {
-    const finalAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
+    const latestAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
       searchES,
       props.selectedDetectors,
       timeRange,
-      MAX_DETECTORS,
-      dispatch
+      dispatch,
+      0,
+      MAX_ANOMALIES,
+      MAX_DETECTORS
     );
-    setAnomalyResults(finalAnomalyResult);
+
+    const nonZeroAnomalyResult = latestAnomalyResult.filter(
+      anomalyData => get(anomalyData, AD_DOC_FIELDS.ANOMALY_GRADE, 0) > 0
+    );
+    setAnomalyResults(nonZeroAnomalyResult);
 
     const resultDetectors = getFinalDetectors(
-      finalAnomalyResult,
+      nonZeroAnomalyResult,
       props.selectedDetectors
     );
     setIndicesNumber(getFinalIndices(resultDetectors).size);
@@ -123,9 +129,8 @@ export const AnomaliesDistributionChart = (
         <EuiFlexItem>
           <EuiText className={'anomaly-distribution-subtitle'}>
             <p>
-              {
-                'The inner circle shows the anomaly distribution by your indices. The outer circle shows the anomaly distribution by your detectors.'
-              }
+              {'The inner circle shows the anomaly distribution by your indices. ' +
+                'The outer circle shows the anomaly distribution by your detectors.'}
             </p>
           </EuiText>
         </EuiFlexItem>
@@ -141,13 +146,14 @@ export const AnomaliesDistributionChart = (
         />
       }
     >
-      <EuiFlexGroup style={{ padding: '10px' }}>
+      <EuiFlexGroup style={{ marginTop: '0px' }}>
         <EuiFlexItem>
           <EuiStat
             description={'Indices with anomalies'}
             title={indicesNumber}
             isLoading={anomalyResultsLoading}
             titleSize="s"
+            style={{ color: '#000' }}
           />
         </EuiFlexItem>
         <EuiFlexItem>
@@ -156,17 +162,12 @@ export const AnomaliesDistributionChart = (
             title={finalDetectors.length}
             isLoading={anomalyResultsLoading}
             titleSize="s"
+            style={{ color: '#000' }}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
       {anomalyResultsLoading ? (
         <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false}>
-            <EuiLoadingChart size="m" />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiLoadingChart size="l" />
-          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiLoadingChart size="xl" />
           </EuiFlexItem>
@@ -174,67 +175,69 @@ export const AnomaliesDistributionChart = (
       ) : (
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>
-            <Chart className="anomalies-distribution-sunburst">
-              <Partition
-                id="Anomalies by index and detector"
-                data={visualizeAnomalyResultForSunburstChart(
-                  anomalyResults,
-                  finalDetectors
-                )}
-                valueAccessor={(d: Datum) => d.count as number}
-                valueFormatter={(d: number) => d.toString()}
-                layers={[
-                  {
-                    groupByRollup: (d: Datum) => d.indices,
-                    nodeLabel: (d: Datum) => {
-                      return d;
-                    },
-                    fillLabel: {
-                      textInvertible: true,
-                    },
-                    shape: {
-                      fillColor: d => {
-                        return fillOutColors(
-                          d,
-                          (d.x0 + d.x1) / 2 / (2 * Math.PI),
-                          []
-                        );
+            {isEmpty(anomalyResults) ? null : (
+              <Chart className="anomalies-distribution-sunburst">
+                <Partition
+                  id="Anomalies by index and detector"
+                  data={visualizeAnomalyResultForSunburstChart(
+                    anomalyResults,
+                    finalDetectors
+                  )}
+                  valueAccessor={(d: Datum) => d.count as number}
+                  valueFormatter={(d: number) => d.toString()}
+                  layers={[
+                    {
+                      groupByRollup: (d: Datum) => d.indices,
+                      nodeLabel: (d: Datum) => {
+                        return d;
+                      },
+                      fillLabel: {
+                        textInvertible: true,
+                      },
+                      shape: {
+                        fillColor: d => {
+                          return fillOutColors(
+                            d,
+                            (d.x0 + d.x1) / 2 / (2 * Math.PI),
+                            []
+                          );
+                        },
                       },
                     },
-                  },
-                  {
-                    groupByRollup: (d: Datum) => d.name,
-                    nodeLabel: (d: Datum) => {
-                      return d;
+                    {
+                      groupByRollup: (d: Datum) => d.name,
+                      nodeLabel: (d: Datum) => {
+                        return d;
+                      },
+                      fillLabel: {
+                        textInvertible: true,
+                      },
+                      shape: {
+                        fillColor: d => {
+                          return fillOutColors(
+                            d,
+                            (d.x0 + d.x1) / 2 / (2 * Math.PI),
+                            []
+                          );
+                        },
+                      },
                     },
+                  ]}
+                  config={{
+                    partitionLayout: PartitionLayout.sunburst,
+                    fontFamily: 'Arial',
+                    outerSizeRatio: 1,
                     fillLabel: {
                       textInvertible: true,
                     },
-                    shape: {
-                      fillColor: d => {
-                        return fillOutColors(
-                          d,
-                          (d.x0 + d.x1) / 2 / (2 * Math.PI),
-                          []
-                        );
-                      },
-                    },
-                  },
-                ]}
-                config={{
-                  partitionLayout: PartitionLayout.sunburst,
-                  fontFamily: 'Arial',
-                  outerSizeRatio: 1,
-                  fillLabel: {
-                    textInvertible: true,
-                  },
-                  // TODO: Given only 1 detector exists, the inside Index circle will have issue in following scenarios:
-                  // 1: if Linked Label is configured for identifying index, label of Index circle will be invisible;
-                  // 2: if Fill Label is configured for identifying index, label of it will be overlapped with outer Detector circle
-                  // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/24
-                }}
-              />
-            </Chart>
+                    // TODO: Given only 1 detector exists, the inside Index circle will have issue in following scenarios:
+                    // 1: if Linked Label is configured for identifying index, label of Index circle will be invisible;
+                    // 2: if Fill Label is configured for identifying index, label of it will be overlapped with outer Detector circle
+                    // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/24
+                  }}
+                />
+              </Chart>
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
index 8c4fa443..f2e35fb9 100644
--- a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
+++ b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
@@ -21,6 +21,8 @@ import {
 } from '../../../../server/utils/constants';
 import {
   EuiBadge,
+  EuiButton,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingChart,
@@ -52,6 +54,7 @@ import {
   getLatestAnomalyResultsForDetectorsByTimeRange,
 } from '../utils/utils';
 import { AppState } from '../../../redux/reducers';
+import { MAX_ANOMALIES } from '../../../utils/constants';
 
 export interface AnomaliesLiveChartProps {
   allDetectorsSelected: boolean;
@@ -81,20 +84,41 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
 
   const [liveAnomalyData, setLiveAnomalyData] = useState([] as object[]);
 
+  const [anomalousDetectorCount, setAnomalousDetectorCount] = useState(0);
+
+  const [hasLatestAnomalyData, setHasLatestAnomalyData] = useState(false);
+
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
   const getLiveAnomalyResults = async () => {
-    const finalLiveAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
+    const latestLiveAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
       searchES,
       props.selectedDetectors,
       '30m',
-      MAX_LIVE_DETECTORS,
-      dispatch
+      dispatch,
+      -1,
+      MAX_ANOMALIES,
+      MAX_LIVE_DETECTORS
+    );
+
+    setHasLatestAnomalyData(!isEmpty(latestLiveAnomalyResult));
+
+    const nonZeroAnomalyResult = latestLiveAnomalyResult.filter(
+      anomalyData => get(anomalyData, AD_DOC_FIELDS.ANOMALY_GRADE, 0) > 0
     );
+    setLiveAnomalyData(nonZeroAnomalyResult);
 
-    setLiveAnomalyData(finalLiveAnomalyResult);
-    if (!isEmpty(finalLiveAnomalyResult)) {
-      setLastAnomalyResult(finalLiveAnomalyResult[0]);
+    if (!isEmpty(nonZeroAnomalyResult)) {
+      setLastAnomalyResult(nonZeroAnomalyResult[0]);
+      const uniqueIds = new Set(
+        nonZeroAnomalyResult.map(anomalyData =>
+          get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, '')
+        )
+      );
+      setAnomalousDetectorCount(uniqueIds.size);
     } else {
       setLastAnomalyResult(undefined);
+      setAnomalousDetectorCount(0);
     }
     setLiveTimeRange({
       startDateTime: moment().subtract(30, 'minutes'),
@@ -137,11 +161,12 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
         continue;
       }
       result.push({
-        [AD_DOC_FIELDS.DETECTOR_NAME]: '',
+        [AD_DOC_FIELDS.DETECTOR_NAME]: null,
         [AD_DOC_FIELDS.PLOT_TIME]: currentTime,
         [AD_DOC_FIELDS.ANOMALY_GRADE]: null,
       });
     }
+
     return result;
   };
 
@@ -153,14 +178,25 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
 
   const annotations = [timeNowAnnotation];
 
-  // Add View full screen button
-  // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/26
+  const fullScreenButton = () => (
+    <EuiButton
+      onClick={() => setIsFullScreen(isFullScreen => !isFullScreen)}
+      iconType={isFullScreen ? 'exit' : 'fullScreen'}
+      aria-label="View full screen"
+    >
+      {isFullScreen ? 'Exit full screen' : 'View full screen'}
+    </EuiButton>
+  );
+
   return (
     <ContentPanel
       title={
         <EuiTitle size="s" className="content-panel-title">
           <h3>
-            Live anomalies <EuiBadge color={'#DB1374'}>Live</EuiBadge>
+            Live anomalies{' '}
+            <EuiBadge color={hasLatestAnomalyData ? '#DB1374' : '#DDD'}>
+              Live
+            </EuiBadge>
           </h3>
         </EuiTitle>
       }
@@ -168,101 +204,160 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
         <EuiFlexItem>
           <EuiText className={'live-anomaly-results-subtile'}>
             <p>
-              {'Live anomaly results across detectors for the last 30 minutes'}
+              {'Live anomaly results across detectors for the last 30 minutes. ' +
+                'The results refresh every 1 minute. ' +
+                'For each detector, if an anomaly occurence is detected at the end of the detector interval, ' +
+                'you will see a bar representing its anomaly grade.'}
             </p>
           </EuiText>
         </EuiFlexItem>
       }
+      actions={[fullScreenButton()]}
+      contentPanelClassName={isFullScreen ? 'full-screen' : undefined}
     >
-      <EuiFlexGroup style={{ padding: '10px' }}>
-        <EuiFlexItem>
-          <EuiStat
-            description={'Detector with most recent anomaly occurrence'}
-            title={
-              lastAnomalyResult === undefined
-                ? '-'
-                : get(lastAnomalyResult, AD_DOC_FIELDS.DETECTOR_NAME, '')
-            }
-            titleSize="s"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiStat
-            description={'Most recent anomaly grade'}
-            title={
-              lastAnomalyResult === undefined
-                ? '-'
-                : get(lastAnomalyResult, AD_DOC_FIELDS.ANOMALY_GRADE, 0)
-            }
-            titleSize="s"
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiStat
-            description={'Last updated time'}
-            title={liveTimeRange.endDateTime.format('MM/DD/YYYY hh:mm A')}
-            titleSize="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <div
-        style={{
-          height: '200px',
-          width: '100%',
-          opacity: 1,
-        }}
-      >
-        {elasticsearchState.requesting ? (
-          <EuiFlexGroup justifyContent="center">
-            <EuiFlexItem grow={false}>
-              <EuiLoadingChart size="m" />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiLoadingChart size="l" />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiLoadingChart size="xl" />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ) : (
-          [
-            <EuiText size="s" style={{ marginLeft: '10px' }}>
-              <p>10 detectors with the most recent anomaly occurrence</p>
-            </EuiText>,
-            <Chart>
-              <Settings showLegend legendPosition={Position.Right} />
-              <LineAnnotation
-                domainType={AnnotationDomainTypes.XDomain}
-                dataValues={annotations}
-                style={TIME_NOW_LINE_STYLE}
-                marker={'Now'}
-              />
-              <Axis
-                id={'bottom'}
-                position={Position.Bottom}
-                tickFormat={timeFormatter}
-                showOverlappingTicks={false}
+      {elasticsearchState.requesting ? (
+        <EuiFlexGroup justifyContent="center">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingChart size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : !hasLatestAnomalyData ? (
+        <EuiText
+          style={{
+            color: '#666666',
+            paddingTop: '12px',
+            paddingBottom: '4px',
+          }}
+        >
+          <p>
+            All matching detectors are under initialization or stopped for the
+            last 30 minutes. Please adjust filters or come back later.
+          </p>
+        </EuiText>
+      ) : (
+        // show below content as long as there exists anomaly data,
+        // regardless of whether anomaly grade is 0 or larger.
+        [
+          <EuiFlexGroup style={{ marginTop: '0px' }}>
+            <EuiFlexItem>
+              <EuiStat
+                description={'Last updated time'}
+                title={liveTimeRange.endDateTime.format('MM/DD/YYYY hh:mm A')}
+                titleSize="s"
+                style={{ color: '#000' }}
               />
-              <Axis
-                id={'left'}
-                title={'Anomaly grade'}
-                position={Position.Left}
-                domain={{ min: 0, max: 1 }}
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiStat
+                description={'Detector with most recent anomaly occurrence'}
+                title={
+                  lastAnomalyResult === undefined
+                    ? '-'
+                    : get(lastAnomalyResult, AD_DOC_FIELDS.DETECTOR_NAME, '')
+                }
+                titleSize="s"
+                style={{ color: '#000' }}
               />
-              <BarSeries
-                id={'Detectors Anomaly grade'}
-                xScaleType={ScaleType.Time}
-                timeZone="local"
-                yScaleType="linear"
-                xAccessor={AD_DOC_FIELDS.PLOT_TIME}
-                yAccessors={[AD_DOC_FIELDS.ANOMALY_GRADE]}
-                splitSeriesAccessors={[AD_DOC_FIELDS.DETECTOR_NAME]}
-                data={prepareVisualizedAnomalies(visualizedAnomalies)}
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiStat
+                description={'Most recent anomaly grade'}
+                title={
+                  lastAnomalyResult === undefined
+                    ? '-'
+                    : get(lastAnomalyResult, AD_DOC_FIELDS.ANOMALY_GRADE, 0)
+                }
+                titleSize="s"
+                style={{ color: '#000' }}
               />
-            </Chart>,
-          ]
-        )}
-      </div>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          <div>
+            {[
+              // only show below message when anomalousDetectorCount >= MAX_LIVE_DETECTORS
+              anomalousDetectorCount >= MAX_LIVE_DETECTORS ? (
+                <EuiCallOut
+                  size="s"
+                  title={`You are viewing ${MAX_LIVE_DETECTORS} detectors with the most recent anomaly occurrences.`}
+                  style={{
+                    width: '88%', // ensure width reaches NOW annotation line
+                    marginTop: '20px',
+                    marginBottom: '20px',
+                  }}
+                >
+                  <p>
+                    10 detectors with the most recent anomalies are shown on the
+                    chart. Adjust filters if there are specific detectors you
+                    would like to monitor.
+                  </p>
+                </EuiCallOut>
+              ) : anomalousDetectorCount === 0 ? (
+                // all the data points have anomaly grade as 0
+                <EuiCallOut
+                  color="success"
+                  size="s"
+                  title="No anomalies found during the last 30 minutes across all matching detectors."
+                  style={{
+                    width: '96%', // ensure width reaches NOW line
+                    marginTop: '20px',
+                    marginBottom: '20px',
+                  }}
+                />
+              ) : null,
+              <div
+                style={{
+                  height: '200px',
+                  width: '100%',
+                  opacity: 1,
+                }}
+              >
+                <Chart>
+                  <Settings
+                    // hide legend if there only exists anomalies with 0 anomaly grade
+                    showLegend={!isEmpty(liveAnomalyData)}
+                    legendPosition={Position.Right}
+                    xDomain={{
+                      min: liveTimeRange.startDateTime.valueOf(),
+                      max: liveTimeRange.endDateTime.valueOf(),
+                    }}
+                  />
+                  <LineAnnotation
+                    domainType={AnnotationDomainTypes.XDomain}
+                    dataValues={annotations}
+                    style={TIME_NOW_LINE_STYLE}
+                    marker={'Now'}
+                  />
+                  <Axis
+                    id={'bottom'}
+                    position={Position.Bottom}
+                    tickFormat={timeFormatter}
+                    showOverlappingTicks={false}
+                  />
+                  <Axis
+                    id={'left'}
+                    title={'Anomaly grade'}
+                    position={Position.Left}
+                    domain={{ min: 0, max: 1 }}
+                  />
+                  <BarSeries
+                    // `id` for placeholder data point introduced by `prepareVisualizedAnomalies` shows as legend,
+                    // When there exists anomalies with anomaly grade > 0
+                    // we make `id` to blank string to hide the legend of placeholder data point
+                    id={!isEmpty(liveAnomalyData) ? '' : ' '}
+                    xScaleType={ScaleType.Time}
+                    timeZone="local"
+                    yScaleType="linear"
+                    xAccessor={AD_DOC_FIELDS.PLOT_TIME}
+                    yAccessors={[AD_DOC_FIELDS.ANOMALY_GRADE]}
+                    splitSeriesAccessors={[AD_DOC_FIELDS.DETECTOR_NAME]}
+                    data={prepareVisualizedAnomalies(visualizedAnomalies)}
+                  />
+                </Chart>
+              </div>,
+            ]}
+          </div>,
+        ]
+      )}
     </ContentPanel>
   );
 };
diff --git a/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx b/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx
index 4197086e..f1dfb309 100644
--- a/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx
+++ b/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx
@@ -76,22 +76,24 @@ export const AnomalousDetectorsList = (props: AnomalousDetectorsListProps) => {
   };
 
   return (
-    <ContentPanel title="Detectors and features" titleSize="s">
-      <EuiBasicTable
-        items={getOrderedDetectorsForPage(
-          props.selectedDetectors,
-          indexOfPage,
-          sizeOfPage,
-          sortDirection,
-          fieldForSort
-        )}
-        columns={anomalousDetectorsStaticColumn}
-        tableLayout={'auto'}
-        onChange={handleTableChange}
-        sorting={sorting}
-        pagination={pagination}
-        compressed
-      />
-    </ContentPanel>
+    <div style={{ height: 'auto' }}>
+      <ContentPanel title="Detectors and features" titleSize="s">
+        <EuiBasicTable
+          items={getOrderedDetectorsForPage(
+            props.selectedDetectors,
+            indexOfPage,
+            sizeOfPage,
+            sortDirection,
+            fieldForSort
+          )}
+          columns={anomalousDetectorsStaticColumn}
+          tableLayout={'auto'}
+          onChange={handleTableChange}
+          sorting={sorting}
+          pagination={pagination}
+          compressed
+        />
+      </ContentPanel>
+    </div>
   );
 };
diff --git a/public/pages/Dashboard/Container/Dashboard.tsx b/public/pages/Dashboard/Container/Dashboard.tsx
index b70b29be..ab19bb84 100644
--- a/public/pages/Dashboard/Container/Dashboard.tsx
+++ b/public/pages/Dashboard/Container/Dashboard.tsx
@@ -22,34 +22,28 @@ import { EmptyDashboard } from '../Components/EmptyDashboard/EmptyDashboard';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { DashboardHeader } from '../Components/utils/DashboardHeader';
 import { DashboardOverview } from './DashboardOverview';
-//@ts-ignore
-import chrome from 'ui/chrome';
-import { BREADCRUMBS } from '../../../utils/constants';
 
 export const Dashboard = () => {
-  // Set breadcrumbs on page initialization
-  useEffect(() => {
-    chrome.breadcrumbs.set([
-      BREADCRUMBS.ANOMALY_DETECTOR,
-      BREADCRUMBS.DASHBOARD,
-    ]);
-  }, []);
-
   const dispatch = useDispatch();
 
   const [isLoading, setIsLoading] = useState(true);
 
   const onRefreshPage = async () => {
-    await dispatch(
-      getDetectorList({
-        from: 0,
-        size: 1,
-        search: '',
-        sortDirection: SORT_DIRECTION.DESC,
-        sortField: 'name',
-      })
-    );
-    setIsLoading(false);
+    try {
+      await dispatch(
+        getDetectorList({
+          from: 0,
+          size: 1,
+          search: '',
+          sortDirection: SORT_DIRECTION.DESC,
+          sortField: 'name',
+        })
+      );
+    } catch (error) {
+      console.log('Error is found during getting detector list', error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const totalDetectors = useSelector(
diff --git a/public/pages/Dashboard/Container/DashboardOverview.tsx b/public/pages/Dashboard/Container/DashboardOverview.tsx
index 952e2190..a165ee1d 100644
--- a/public/pages/Dashboard/Container/DashboardOverview.tsx
+++ b/public/pages/Dashboard/Container/DashboardOverview.tsx
@@ -187,8 +187,8 @@ export function DashboardOverview() {
 
   return (
     <Fragment>
-      <EuiFlexGroup justifyContent="flexStart">
-        <EuiFlexItem grow={1}>
+      <EuiFlexGroup justifyContent="flexStart" gutterSize="s">
+        <EuiFlexItem>
           <EuiComboBox
             id="detectorFilter"
             placeholder={ALL_DETECTORS_MESSAGE}
@@ -196,9 +196,10 @@ export function DashboardOverview() {
             onChange={handleDetectorsFilterChange}
             selectedOptions={selectedDetectorsName.map(buildItemOption)}
             isClearable={true}
+            fullWidth
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={1}>
+        <EuiFlexItem>
           <EuiComboBox
             id="detectorStateFilter"
             placeholder={ALL_DETECTOR_STATES_MESSAGE}
@@ -206,9 +207,10 @@ export function DashboardOverview() {
             onChange={handleDetectorStateFilterChange}
             selectedOptions={selectedDetectorStates.map(buildItemOption)}
             isClearable={true}
+            fullWidth
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={2}>
+        <EuiFlexItem>
           <EuiComboBox
             id="indicesFilter"
             placeholder={ALL_INDICES_MESSAGE}
@@ -216,6 +218,7 @@ export function DashboardOverview() {
             onChange={handleIndicesFilterChange}
             selectedOptions={selectedIndices.map(buildItemOption)}
             isClearable={true}
+            fullWidth
           />
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/public/pages/Dashboard/index.scss b/public/pages/Dashboard/index.scss
index ad1192b1..492cbd13 100644
--- a/public/pages/Dashboard/index.scss
+++ b/public/pages/Dashboard/index.scss
@@ -14,23 +14,29 @@
  */
 
 .live-anomaly-results-subtile {
-  height: 14px;
-  width: 376px;
   color: #879196;
-  font-family: 'Helvetica Neue';
   font-size: 12px;
   letter-spacing: 0;
-  line-height: 14px;
+  line-height: 16px;
 }
 
 .anomaly-distribution-subtitle {
   color: #879196;
-  font-family: 'Helvetica Neue';
   font-size: 12px;
   letter-spacing: 0;
+  line-height: 16px;
 }
 
 .anomalies-distribution-sunburst {
-  height: 500px;
-  width: 500px;
+  height: 400px;
+  width: 400px;
+}
+
+.full-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
 }
diff --git a/public/pages/Dashboard/utils/utils.tsx b/public/pages/Dashboard/utils/utils.tsx
index b83adb85..bffbd16c 100644
--- a/public/pages/Dashboard/utils/utils.tsx
+++ b/public/pages/Dashboard/utils/utils.tsx
@@ -34,6 +34,7 @@ import {
 import { get, orderBy } from 'lodash';
 import { APIAction } from 'public/redux/middleware/types';
 import { useDispatch } from 'react-redux';
+import { Dispatch } from 'redux';
 
 /**
  * Get the recent anomaly result query for the last timeRange period(Date-Math)
@@ -344,7 +345,7 @@ export const anomalousDetectorsStaticColumn = [
     textOnly: true,
     render: (name: string, detector: Detector) => (
       <EuiLink
-        href={`${PLUGIN_NAME}#/detectors/${detector.id}/configurations/`}
+        href={`${PLUGIN_NAME}#/detectors/${detector.id}/results`}
         target="_blank"
       >
         {name}
@@ -434,7 +435,8 @@ export const getFloorPlotTime = (plotTime: number): number => {
 export const buildGetAnomalyResultQueryByRange = (
   timeRange: string,
   from: number,
-  size: number
+  size: number,
+  threadhold: number
 ) => {
   return {
     index: `${ANOMALY_RESULT_INDEX}*`,
@@ -446,7 +448,7 @@ export const buildGetAnomalyResultQueryByRange = (
           {
             range: {
               [AD_DOC_FIELDS.ANOMALY_GRADE]: {
-                gt: 0.0,
+                gt: threadhold,
               },
             },
           },
@@ -473,13 +475,14 @@ export const buildGetAnomalyResultQueryByRange = (
   };
 };
 
-//TODO: clean unused code like server/routes/ad.ts#getAnomalyResults.range
 export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
   func: (request: any) => APIAction,
   selectedDetectors: DetectorListItem[],
   timeRange: string,
-  detectorNum = MAX_DETECTORS,
-  dispatch = useDispatch()
+  dispatch: Dispatch<any>,
+  threadhold: number,
+  anomalySize: number,
+  detectorNum: number
 ): Promise<object[]> => {
   const detectorAndIdMap = buildDetectorAndIdMap(selectedDetectors);
   let from = 0;
@@ -487,7 +490,14 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
   let anomalyResults = [] as object[];
   do {
     const searchResponse = await dispatch(
-      func(buildGetAnomalyResultQueryByRange(timeRange, from, MAX_ANOMALIES))
+      func(
+        buildGetAnomalyResultQueryByRange(
+          timeRange,
+          from,
+          anomalySize,
+          threadhold
+        )
+      )
     );
     const searchAnomalyResponse = searchResponse.data.response;
 
@@ -535,7 +545,7 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
   );
 
   const finalLiveAnomalyResult = orderedLiveAnomalyData.filter(anomalyData =>
-    latestDetetorIds.includes(get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, ''))
+    latestDetetorIds.has(get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, ''))
   );
   return finalLiveAnomalyResult;
 };
@@ -554,27 +564,21 @@ const buildDetectorAndIdMap = (
 
 const selectLatestDetetorIds = (
   orderedAnomalyData: object[],
-  needeDetectorNum: number
-): string[] => {
-  const uniqueIds = [
-    ...new Set(
-      orderedAnomalyData.map(anomalyData =>
-        get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, '')
-      )
-    ),
-  ];
-  if (uniqueIds.length <= needeDetectorNum) {
+  neededDetectorNum: number
+): Set<string> => {
+  const uniqueIds = new Set(
+    orderedAnomalyData.map(anomalyData =>
+      get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, '')
+    )
+  );
+  if (uniqueIds.size <= neededDetectorNum) {
     return uniqueIds;
   }
-  const latestDetectorIds = [] as string[];
+  const latestDetectorIds = new Set<string>();
   for (let anomalyData of orderedAnomalyData) {
-    if (
-      !latestDetectorIds.includes(
-        get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, '')
-      )
-    ) {
-    }
-    if (latestDetectorIds.length === needeDetectorNum) {
+    const detectorId = get(anomalyData, AD_DOC_FIELDS.DETECTOR_ID, '');
+    latestDetectorIds.add(detectorId);
+    if (latestDetectorIds.size === neededDetectorNum) {
       return latestDetectorIds;
     }
   }