diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 5e3eb4d6a..802124baa 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -117,7 +117,7 @@ function WidgetChart(props: Props) {
     useEffect(() => {
         _metric.updateKey('page', 1);
         loadPage();
-    }, [drillDownPeriod, period, depsString, metric.metricType, metric.metricOf, metric.viewType, metric.metricValue, metric.startType]);
+    }, [drillDownPeriod, period, depsString, metric.metricType, metric.metricOf, metric.viewType, metric.metricValue, metric.startType, metric.metricFormat]);
     useEffect(loadPage, [_metric.page]);
 
 
diff --git a/frontend/app/components/Dashboard/components/WidgetOptions.tsx b/frontend/app/components/Dashboard/components/WidgetOptions.tsx
new file mode 100644
index 000000000..9cd20e89c
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/WidgetOptions.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { HEATMAP, TABLE, USER_PATH } from 'App/constants/card';
+import { Select, Space, Switch } from 'antd';
+import { useStore } from 'App/mstore';
+import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker';
+import { FilterKey } from 'Types/filter/filterType';
+
+interface Props {
+
+}
+
+
+function WidgetOptions(props: Props) {
+  const { metricStore, dashboardStore } = useStore();
+  const metric: any = metricStore.instance;
+
+  const handleChange = (value: any) => {
+    console.log(`selected ${value}`);
+    metric.update({ metricFormat: value });
+  };
+
+  return (
+    <div>
+      {metric.metricType === USER_PATH && (
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            metric.update({ hideExcess: !metric.hideExcess });
+          }}
+        >
+          <Space>
+            <Switch checked={metric.hideExcess} size="small" />
+            <span className="mr-4 color-gray-medium">
+                    Hide Minor Paths
+                  </span>
+          </Space>
+        </a>
+      )}
+
+      {metric.metricType === TABLE && metric.metricOf != FilterKey.USERID && (
+        <Select
+          defaultValue={metric.metricFormat}
+          style={{ width: 120 }}
+          onChange={handleChange}
+          options={[
+            { value: 'sessionCount', label: 'Sessions' },
+            { value: 'userCount', label: 'Users' }
+          ]}
+        />
+      )}
+
+      {metric.metricType === HEATMAP ? (
+        <ClickMapRagePicker />
+      ) : null}
+    </div>
+  );
+}
+
+export default WidgetOptions;
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
index 9bcc199b6..06fcddf88 100644
--- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -8,6 +8,7 @@ import { useStore } from 'App/mstore';
 import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker';
 
 import WidgetWrapper from '../WidgetWrapper';
+import WidgetOptions from 'Components/Dashboard/components/WidgetOptions';
 
 interface Props {
   className?: string;
@@ -28,22 +29,24 @@ function WidgetPreview(props: Props) {
         <div className="flex items-center justify-between px-4 pt-2">
           <h2 className="text-xl">{props.name}</h2>
           <div className="flex items-center">
-            {metric.metricType === USER_PATH && (
-              <a
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault();
-                  metric.update({ hideExcess: !metric.hideExcess });
-                }}
-              >
-                <Space>
-                  <Switch checked={metric.hideExcess} size="small" />
-                  <span className="mr-4 color-gray-medium">
-                    Hide Minor Paths
-                  </span>
-                </Space>
-              </a>
-            )}
+            <WidgetOptions />
+            {/*{metric.metricType === USER_PATH && (*/}
+            {/*  <a*/}
+            {/*    href="#"*/}
+            {/*    onClick={(e) => {*/}
+            {/*      e.preventDefault();*/}
+            {/*      metric.update({ hideExcess: !metric.hideExcess });*/}
+            {/*    }}*/}
+            {/*  >*/}
+            {/*    <Space>*/}
+            {/*      <Switch checked={metric.hideExcess} size="small" />*/}
+            {/*      <span className="mr-4 color-gray-medium">*/}
+            {/*        Hide Minor Paths*/}
+            {/*      </span>*/}
+            {/*    </Space>*/}
+            {/*  </a>*/}
+            {/*)}*/}
+
 
             {/*{isTimeSeries && (*/}
             {/*    <>*/}
@@ -101,10 +104,7 @@ function WidgetPreview(props: Props) {
             {/*</>*/}
             {/*)}*/}
 
-            <div className="mx-4" />
-            {metric.metricType === HEATMAP ? (
-                <ClickMapRagePicker />
-            ) : null}
+
 
             {/* add to dashboard */}
             {/*{metric.exists() && (*/}