diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
new file mode 100644
index 000000000..2a373389c
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { useStore } from 'App/mstore'
+import { observer } from 'mobx-react-lite'
+import { toJS } from 'mobx'
+
+function ClickMapCard() {
+  const { metricStore } = useStore()
+
+  console.log(toJS(metricStore.instance))
+  return (
+    <div>this is a card</div>
+  )
+}
+
+export default observer(ClickMapCard)
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/index.ts
new file mode 100644
index 000000000..c72a4090b
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/index.ts
@@ -0,0 +1 @@
+export { default } from './ClickMapCard'
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 732359789..37a0e9297 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -19,6 +19,7 @@ import ErrorsWidget from '../Errors/ErrorsWidget';
 import SessionWidget from '../Sessions/SessionWidget';
 import CustomMetricTableSessions from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions';
 import CustomMetricTableErrors from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors';
+import ClickMapCard from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard'
 
 interface Props {
     metric: any;
@@ -179,11 +180,11 @@ function WidgetChart(props: Props) {
         }
         if (metricType === CLICKMAP) {
             return (
-                <div>rendering clickmap</div>
+                <ClickMapCard />
             )
         }
 
-        return <div>Unknown</div>;
+        return <div>Unknown metric type</div>;
     }
     return (
         <Loader loading={loading} style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricSubtypeDropdown/MetricSubtypeDropdown.tsx b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricSubtypeDropdown/MetricSubtypeDropdown.tsx
index eccfda55e..fe7d3a503 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricSubtypeDropdown/MetricSubtypeDropdown.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricSubtypeDropdown/MetricSubtypeDropdown.tsx
@@ -28,6 +28,11 @@ function MetricSubtypeDropdown(props: Props) {
     return false;
   }, [metric.metricType]);
 
+  React.useEffect(() => {
+    // @ts-ignore
+    setTimeout(() => props.onSelect({ name: 'metricOf', value: { value: options[0].value }}), 0)
+  }, [metric.metricType])
+
   return options ? (
     <>
       <div className="mx-3">of</div>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
index 9a7d85fe8..891a21d40 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
@@ -8,13 +8,20 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
 
+interface Options {
+  label: string;
+  icon: string;
+  value: string;
+  description: string;
+}
+
 interface Props {
   query: Record<string, (key: string) => any>;
 }
 function MetricTypeDropdown(props: Props) {
   const { metricStore } = useStore();
   const metric: any = metricStore.instance;
-  const options: any = useMemo(() => {
+  const options: Options[] = useMemo(() => {
     // TYPES.shift(); // remove "Add from library" item
     return TYPES.filter((i: MetricType) => i.slug !== LIBRARY).map((i: MetricType) => ({
       label: i.title,
@@ -27,9 +34,8 @@ function MetricTypeDropdown(props: Props) {
   React.useEffect(() => {
     const queryCardType = props.query.get('type')
     if (queryCardType && options.length > 0 && metric.metricType) {
-      const type = options.find(i => i.value === queryCardType)
+      const type = options.find((i) => i.value === queryCardType)
       setTimeout(() => onChange(type.value), 0)
-      console.log('trying to change to ', type, metric.metricType)
     }
   }, [])