diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index d4e622a1f..a53216b22 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
@@ -102,7 +102,7 @@ export const CARD_LIST: CardType[] = [
     title: 'Heatmaps',
     key: HEATMAP,
     cardType: HEATMAP,
-    metricOf: 'sessionCount',
+    metricOf: 'clickMapUrl',
     category: CARD_CATEGORIES[0].key,
     example: HeatmapsExample
   },
diff --git a/frontend/app/mstore/types/IconProvider.tsx b/frontend/app/mstore/types/IconProvider.tsx
index 061367bfe..1939d97cf 100644
--- a/frontend/app/mstore/types/IconProvider.tsx
+++ b/frontend/app/mstore/types/IconProvider.tsx
@@ -1,126 +1,129 @@
-import {Avatar, Icon} from "UI";
-import React from "react";
-import * as Flags from "country-flag-icons/react/3x2";
-import {hashString} from "Types/session/session";
+import { Avatar, Icon } from 'UI';
+import React from 'react';
+import * as Flags from 'country-flag-icons/react/3x2';
+import { hashString } from 'Types/session/session';
 
 interface IconProvider {
-    getIcon(name: string): React.ReactNode;
+  getIcon(obj: any): React.ReactNode;
 }
 
 class BrowserIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        const s = name.toLowerCase();
-        let icon = 'color/browser/unknown'
-        if (s.includes('chrome')) {
-            icon = 'color/browser/chrome';
-        } else if (s.includes('firefox')) {
-            icon = 'color/browser/firefox';
-        } else if (s.includes('safari')) {
-            icon = 'color/browser/safari';
-        } else if (s.includes('edge')) {
-            icon = 'color/browser/edge';
-        } else if (s.includes('opera')) {
-            icon = 'color/browser/opera';
-        } else if (s.includes('ie')) {
-            icon = 'color/browser/ie';
-        }
-
-        return <Icon name={icon} size={24}/>
+  getIcon(obj: any): React.ReactNode {
+    const s = obj.name.toLowerCase();
+    let icon = 'color/browser/unknown';
+    if (s.includes('chrome')) {
+      icon = 'color/browser/chrome';
+    } else if (s.includes('firefox')) {
+      icon = 'color/browser/firefox';
+    } else if (s.includes('safari')) {
+      icon = 'color/browser/safari';
+    } else if (s.includes('edge')) {
+      icon = 'color/browser/edge';
+    } else if (s.includes('opera')) {
+      icon = 'color/browser/opera';
+    } else if (s.includes('ie')) {
+      icon = 'color/browser/ie';
     }
+
+    return <Icon name={icon} size={24} />;
+  }
 }
 
 class CountryIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        const s = name.toUpperCase();
-        if (Flags[s as keyof typeof Flags]) {
-            const FlagComponent = Flags[s as keyof typeof Flags];
-            return <FlagComponent style={{
-                width: 24,
-                height: 24
-            }}/>
-        }
-
-        return <Icon name='flag-na' size={24}/>
+  getIcon(obj: any): React.ReactNode {
+    const s = obj.name.toUpperCase();
+    if (Flags[s as keyof typeof Flags]) {
+      const FlagComponent = Flags[s as keyof typeof Flags];
+      return <FlagComponent style={{
+        width: 24,
+        height: 24
+      }} />;
     }
+
+    return <Icon name="flag-na" size={24} />;
+  }
 }
 
 class IssueIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        const s = name.toLowerCase();
-        let icon = 'color/issues/' + s;  // TODO use this line
+  getIcon(obj: any): React.ReactNode {
+    const s = obj.name.toLowerCase();
+    let icon = 'color/issues/' + s;  // TODO use this line
 
 
-        // if (s.includes('dead_click')) {
-        //     icon = 'color/issues/dead_click';
-        // } else if (s.includes('click_rage')) {
-        //     icon = 'color/issues/click_rage';
-        // } else if (s.includes('mouse_thrashing')) {
-        //     icon = 'color/issues/mouse_thrashing';
-        // } else if (s.includes('bad_request')) {
-        //     icon = 'color/issues/bad_request';
-        // } else if (s.includes('crash')) {
-        //     icon = 'color/issues/crash';
-        // }
-        return <Icon name={icon} size={24}/>
-    }
+    // if (s.includes('dead_click')) {
+    //     icon = 'color/issues/dead_click';
+    // } else if (s.includes('click_rage')) {
+    //     icon = 'color/issues/click_rage';
+    // } else if (s.includes('mouse_thrashing')) {
+    //     icon = 'color/issues/mouse_thrashing';
+    // } else if (s.includes('bad_request')) {
+    //     icon = 'color/issues/bad_request';
+    // } else if (s.includes('crash')) {
+    //     icon = 'color/issues/crash';
+    // }
+
+    // @ts-ignore
+    return <Icon name={icon} size={24} />;
+  }
 }
 
 class UrlIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        return <Icon name="link-45deg" size={24}/>
-    }
+  getIcon(obj: any): React.ReactNode {
+    return <Icon name="link-45deg" size={24} />;
+  }
 }
 
 class DeviceIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        const s = name.toLowerCase();
-        let icon = 'color/device/desktop'
-        if (s.includes('desktop')) {
-            icon = 'color/device/desktop';
-        } else if (
-            s.includes('mobile') || s.includes('iphone') || s === 'k' || s.includes('android') ||
-            s.includes('smartphone') || s.includes('phone') || s.includes('moto')
-        ) {
-            icon = 'color/device/mobile';
-        } else if (s.includes('tablet')) {
-            icon = 'color/device/tablet';
-        } else {
-            icon = 'color/device/desktop';
-        }
-
-        return <Icon name={icon} size={24}/>
+  getIcon(obj: any): React.ReactNode {
+    const s = obj.name.toLowerCase();
+    let icon = 'color/device/desktop';
+    if (s.includes('desktop')) {
+      icon = 'color/device/desktop';
+    } else if (
+      s.includes('mobile') || s.includes('iphone') || s === 'k' || s.includes('android') ||
+      s.includes('smartphone') || s.includes('phone') || s.includes('moto')
+    ) {
+      icon = 'color/device/mobile';
+    } else if (s.includes('tablet')) {
+      icon = 'color/device/tablet';
+    } else {
+      icon = 'color/device/desktop';
     }
+
+    // @ts-ignore
+    return <Icon name={icon} size={24} />;
+  }
 }
 
 class OsIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        const s = name.toLowerCase();
-        if (s.includes('windows')) {
-            return 'os/windows';
-        } else if (s.includes('mac')) {
-            return 'os/mac';
-        } else if (s.includes('linux')) {
-            return 'os/linux';
-        } else {
-            return 'os/unknown';
-        }
+  getIcon(obj: any): React.ReactNode {
+    const s = obj.name.toLowerCase();
+    if (s.includes('windows')) {
+      return 'os/windows';
+    } else if (s.includes('mac')) {
+      return 'os/mac';
+    } else if (s.includes('linux')) {
+      return 'os/linux';
+    } else {
+      return 'os/unknown';
     }
+  }
 }
 
 class UserIconProvider implements IconProvider {
-    getIcon(name: string): React.ReactNode {
-        return <Avatar seed={hashString(name)}/>
-    }
+  getIcon(obj: any): React.ReactNode {
+    return <Avatar seed={hashString(obj.name || 'Anounymous')} />;
+  }
 }
 
 export {
-    BrowserIconProvider,
-    CountryIconProvider,
-    IssueIconProvider,
-    UrlIconProvider,
-    DeviceIconProvider,
-    OsIconProvider,
-    UserIconProvider
+  BrowserIconProvider,
+  CountryIconProvider,
+  IssueIconProvider,
+  UrlIconProvider,
+  DeviceIconProvider,
+  OsIconProvider,
+  UserIconProvider
 };
-export type {IconProvider};
+export type { IconProvider };
 
diff --git a/frontend/app/mstore/types/sessionsCardData.ts b/frontend/app/mstore/types/sessionsCardData.ts
index 2e98f05d2..a3984e1c9 100644
--- a/frontend/app/mstore/types/sessionsCardData.ts
+++ b/frontend/app/mstore/types/sessionsCardData.ts
@@ -15,7 +15,7 @@ interface NameFormatter {
 
 class BaseFormatter implements NameFormatter {
   format(name: string): string {
-    return name.replace(/_/g, ' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))).trim();
+    return name?.replace(/_/g, ' ').replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))).trim();
   }
 }
 
@@ -40,6 +40,16 @@ class IssueFormatter extends BaseFormatter {
   }
 }
 
+class UserNameFormatter extends BaseFormatter {
+  format(name: string): string {
+    if (name === null || name === undefined || name === '' || name === 'null' || name === 'undefined') {
+      return 'Anonymous';
+    }
+
+    return super.format(name);
+  }
+}
+
 export class SessionsByRow {
   name: string;
   displayName: string;
@@ -53,7 +63,7 @@ export class SessionsByRow {
     this.displayName = nameFormatter.format(json.name) || 'Unidentified';
     this.sessionCount = numberWithCommas(json.sessionCount);
     this.progress = Math.round((json.sessionCount / totalSessions) * 100);
-    this.icon = iconProvider.getIcon(json.name);
+    this.icon = iconProvider.getIcon(json);
     return this;
   }
 
@@ -72,7 +82,7 @@ export class SessionsByRow {
       case 'platform':
         return { nameFormatter: new BaseFormatter(), iconProvider: new OsIconProvider() };
       case 'userId':
-        return { nameFormatter: new BaseFormatter(), iconProvider: new UserIconProvider() };
+        return { nameFormatter: new UserNameFormatter(), iconProvider: new UserIconProvider() };
       default:
         return { nameFormatter: new BaseFormatter(), iconProvider: new DefaultIconProvider() };
     }