diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index 819284a77..018dbe885 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -37,7 +37,7 @@ const SlackForm = (props: Props) => {
             <div className="shrink-0" style={{ width: '350px' }}>
                 <div className="flex items-center p-5">
                     <h3 className="text-2xl mr-3">Slack</h3>
-                    <Button rounded={true} icon="plus" variant="outline" onClick={onNew}/>
+                    <Button rounded={true} icon="plus" iconSize={24} variant="outline" onClick={onNew}/>
                 </div>
                 <SlackChannelList onEdit={onEdit} />
             </div>
diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
index 04b8e9451..c99ed38f2 100644
--- a/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/TeamsAddForm.tsx
@@ -65,7 +65,7 @@ class TeamsAddForm extends React.PureComponent<Props> {
               name="endpoint"
               value={instance.endpoint}
               onChange={this.write}
-              placeholder="Slack webhook URL"
+              placeholder="Teams webhook URL"
               type="text"
             />
           </Form.Field>
diff --git a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
index 9c5189705..6b9533ca5 100644
--- a/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/TeamsChannelList.tsx
@@ -20,7 +20,7 @@ function TeamsChannelList(props: { list: any, edit: (inst: any) => any, onEdit:
                         <div className="text-base text-left">
                             Integrate MS Teams with OpenReplay and share insights with the rest of the team, directly from the recording page.
                         </div>
-                        <DocLink className="mt-4 text-base" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" />
+                        <DocLink className="mt-4 text-base" label="Integrate MS Teams" url="https://docs.openreplay.com/integrations/ms-teams" />
                     </div>
                 }
                 size="small"
diff --git a/frontend/app/components/Client/Integrations/Teams/index.tsx b/frontend/app/components/Client/Integrations/Teams/index.tsx
index 4814697b8..e51bd64b1 100644
--- a/frontend/app/components/Client/Integrations/Teams/index.tsx
+++ b/frontend/app/components/Client/Integrations/Teams/index.tsx
@@ -37,7 +37,7 @@ const MSTeams = (props: Props) => {
             <div className="shrink-0" style={{ width: '350px' }}>
                 <div className="flex items-center p-5">
                     <h3 className="text-2xl mr-3">Microsoft Teams</h3>
-                    <Button rounded={true} icon="plus" variant="outline" onClick={onNew}/>
+                    <Button rounded={true} icon="plus" iconSize={24} variant="outline" onClick={onNew}/>
                 </div>
                 <TeamsChannelList onEdit={onEdit} />
             </div>
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index ffb489b11..0f0f3aafa 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -1,83 +1,74 @@
-import { useObserver } from "mobx-react-lite";
-import React from "react";
-import SessionItem from "Shared/SessionItem";
-import { Pagination, NoContent } from "UI";
-import { useStore } from "App/mstore";
+import { observer, useObserver } from 'mobx-react-lite';
+import React, { useMemo } from 'react';
+import SessionItem from 'Shared/SessionItem';
+import { Pagination, NoContent } from 'UI';
+import { useStore } from 'App/mstore';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import Session from 'App/mstore/types/session';
 
 interface Props {
-    metric: any;
-    isTemplate?: boolean;
-    isEdit?: boolean;
-    data: any;
+  metric: any;
+  isTemplate?: boolean;
+  isEdit?: boolean;
+  data: any;
 }
 
 function CustomMetricTableSessions(props: Props) {
-    const { isEdit = false, metric, data } = props;
-    const { dashboardStore } = useStore();
-    const period = dashboardStore.period;
+  const { isEdit = false, metric, data } = props;
 
-    return useObserver(() => (
-        <NoContent
-            show={
-                !metric ||
-                !data ||
-                !data.sessions ||
-                data.sessions.length === 0
-            }
-            size="small"
-            title={
-                <div className="flex items-center justify-center flex-col">
-                    <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
-                    <div className="mt-2" />
-                    <div className="text-center text-gray-600">No relevant sessions found for the selected time period.</div>
-                </div>
-            } 
-        >
-            <div className="pb-4">
-                {data.sessions &&
-                    data.sessions.map((session: any, index: any) => (
-                        <div
-                            className="border-b last:border-none"
-                            key={session.sessionId}
-                        >
-                            <SessionItem session={session} />
-                        </div>
-                    ))}
+  const sessions = useMemo(() => {
+    return data && data.sessions ? data.sessions.map((session: any) => new Session().fromJson(session)) : [];
+  }, []);
 
-                {isEdit && (
-                    <div className="mt-6 flex items-center justify-center">
-                        <Pagination
-                            page={metric.page}
-                            totalPages={Math.ceil(
-                                data.total / metric.limit
-                            )}
-                            onPageChange={(page: any) =>
-                                metric.updateKey("page", page)
-                            }
-                            limit={data.total}
-                            debounceRequest={500}
-                        />
-                    </div>
-                )}
-
-                {!isEdit && (
-                    <ViewMore total={data.total} limit={metric.limit} />
-                )}
+  return useObserver(() => (
+    <NoContent
+      show={!metric || !data || !sessions || sessions.length === 0}
+      size="small"
+      title={
+        <div className="flex items-center justify-center flex-col">
+          <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
+          <div className="mt-2" />
+          <div className="text-center text-gray-600">
+            No relevant sessions found for the selected time period.
+          </div>
+        </div>
+      }
+    >
+      <div className="pb-4">
+        {sessions &&
+          sessions.map((session: any, index: any) => (
+            <div className="border-b last:border-none" key={session.sessionId}>
+              <SessionItem session={session} />
             </div>
-        </NoContent>
-    ));
+          ))}
+
+        {isEdit && (
+          <div className="mt-6 flex items-center justify-center">
+            <Pagination
+              page={metric.page}
+              totalPages={Math.ceil(data.total / metric.limit)}
+              onPageChange={(page: any) => metric.updateKey('page', page)}
+              limit={data.total}
+              debounceRequest={500}
+            />
+          </div>
+        )}
+
+        {!isEdit && <ViewMore total={data.total} limit={metric.limit} />}
+      </div>
+    </NoContent>
+  ));
 }
 
-export default CustomMetricTableSessions;
+export default observer(CustomMetricTableSessions);
 
 const ViewMore = ({ total, limit }: any) =>
-    total > limit && (
-        <div className="mt-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
-            <div className="text-center">
-                <div className="color-teal text-lg">
-                    All <span className="font-medium">{total}</span> sessions
-                </div>
-            </div>
+  total > limit ? (
+    <div className="mt-4 flex items-center justify-center cursor-pointer w-fit mx-auto">
+      <div className="text-center">
+        <div className="color-teal text-lg">
+          All <span className="font-medium">{total}</span> sessions
         </div>
-    );
+      </div>
+    </div>
+  ) : null;
diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
index 25ff80e81..90ecd4761 100644
--- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -86,6 +86,7 @@ function DashboardHeader(props: Props) {
               showModal(<AddCardModal dashboardId={dashboardId} siteId={siteId} />, { right: true })
             }
             icon="plus"
+            iconSize={24}
           >
             Add Card
           </Button>
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index b741dbb8d..795337cb9 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -11,27 +11,34 @@ interface Props extends RouteComponentProps {
   siteId: string;
   selected?: boolean;
   toggleSelection?: any;
-  disableSelection?: boolean
+  disableSelection?: boolean;
 }
 
 function MetricTypeIcon({ type }: any) {
   const [card, setCard] = useState<any>('');
   useEffect(() => {
-    const t = TYPES.find(i => i.slug === type);
-    setCard(t)
-  }, [type])
+    const t = TYPES.find((i) => i.slug === type);
+    setCard(t);
+  }, [type]);
 
   return (
-    <Tooltip delay={0} title={<div className="capitalize">{card.title}</div>} >
+    <Tooltip delay={0} title={<div className="capitalize">{card.title}</div>}>
       <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
-        { card.icon && <Icon name={card.icon} size="16" color="tealx" /> }
+        {card.icon && <Icon name={card.icon} size="16" color="tealx" />}
       </div>
     </Tooltip>
   );
 }
 
 function MetricListItem(props: Props) {
-  const { metric, history, siteId, selected, toggleSelection = () => {}, disableSelection = false } = props;
+  const {
+    metric,
+    history,
+    siteId,
+    selected,
+    toggleSelection = () => {},
+    disableSelection = false,
+  } = props;
 
   const onItemClick = (e: React.MouseEvent) => {
     if (!disableSelection) {
@@ -40,7 +47,7 @@ function MetricListItem(props: Props) {
     const path = withSiteId(`/metrics/${metric.metricId}`, siteId);
     history.push(path);
   };
-  
+
   return (
     <div
       className="grid grid-cols-12 py-4 border-t select-none items-center hover:bg-active-blue cursor-pointer px-6"
@@ -56,10 +63,10 @@ function MetricListItem(props: Props) {
             onClick={toggleSelection}
           />
         )}
-        
+
         <div className="flex items-center">
           <MetricTypeIcon type={metric.metricType} />
-          <div className={ cn("capitalize-first", { "link" : disableSelection })}>{metric.name}</div>
+          <div className={cn('capitalize-first', { link: disableSelection })}>{metric.name}</div>
         </div>
       </div>
       <div className="col-span-4">{metric.owner}</div>
diff --git a/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx b/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx
index 6a0b8152f..0d5fc4c89 100644
--- a/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx
@@ -26,7 +26,7 @@ function MetricTypeItem(props: Props) {
     <Tooltip disabled={!disabled} title="This feature requires an enterprise license." delay={0}>
       <div
         className={cn(
-          'rounded color-gray-darkest flex items-start border border-transparent p-4 hover:bg-active-blue hover:!border-active-blue-border cursor-pointer group hover-color-teal',
+          'rounded color-gray-darkest flex items-start border border-transparent p-4 hover:bg-active-blue cursor-pointer group hover-color-teal',
           { 'opacity-30 pointer-events-none': disabled }
         )}
         onClick={onClick}
diff --git a/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx b/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx
index df556b46e..54c09e336 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/GridView.tsx
@@ -1,14 +1,19 @@
 import React from 'react';
 import WidgetWrapper from 'App/components/Dashboard/components/WidgetWrapper';
-
-interface Props {
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { withSiteId } from 'App/routes';
+interface Props extends RouteComponentProps {
   list: any;
   siteId: any;
   selectedList: any;
-  toggleSelection?: (metricId: any) => void;
 }
 function GridView(props: Props) {
-  const { siteId, list, selectedList, toggleSelection } = props;
+  const { siteId, list, selectedList, history } = props;
+
+  const onItemClick = (metricId: number) => {
+    const path = withSiteId(`/metrics/${metricId}`, siteId);
+    history.push(path);
+  };
   return (
     <div className="grid grid-cols-4 gap-4 m-4 items-start">
       {list.map((metric: any) => (
@@ -17,9 +22,9 @@ function GridView(props: Props) {
             key={metric.metricId}
             widget={metric}
             active={selectedList.includes(metric.metricId)}
-            // isTemplate={true}
+            isTemplate={true}
             isWidget={metric.metricType === 'predefined'}
-            // onClick={() => toggleSelection(parseInt(metric.metricId))}
+            onClick={() => onItemClick(parseInt(metric.metricId))}
           />
         </React.Fragment>
       ))}
@@ -27,4 +32,4 @@ function GridView(props: Props) {
   );
 }
 
-export default GridView;
+export default withRouter(GridView);
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index 29e1785e8..59a1b619a 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -148,7 +148,7 @@ function WidgetForm(props: Props) {
 
           {metric.metricType === INSIGHTS && (
             <>
-              <span className="mx-3">issue category</span>
+              <span className="mx-3">of</span>
               <Select
                 name="metricValue"
                 options={issueCategories}
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index 74786d14c..aaa49ee38 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -71,7 +71,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
   });
 
   const onDelete = async () => {
-    dashboardStore.deleteDashboardWidget(dashboard?.dashboardId, widget.widgetId);
+    dashboardStore.deleteDashboardWidget(dashboard?.dashboardId!, widget.widgetId);
   };
 
   const onChartClick = () => {
@@ -119,53 +119,59 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
           {'Cannot drill down system provided metrics'}
         </div>
       )}
-      <Tooltip disabled={!isTemplate} title="Click to select">
-        {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
-        <div
-          className={cn('p-3 pb-4 flex items-center justify-between', {
-            'cursor-move': !isTemplate && isWidget,
-          })}
-        >
-          {!props.hideName ? (
-            <div className="capitalize-first w-full font-medium"><TextEllipsis text={widget.name} /></div>
-          ) : null}
-          {isWidget && (
-            <div className="flex items-center" id="no-print">
-              {!isPredefined && isTimeSeries && (
-                <>
-                  <AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
-                  <div className="mx-2" />
-                </>
-              )}
 
-              {!isTemplate && (
-                <ItemMenu
-                  items={[
-                    {
-                      text:
-                        widget.metricType === 'predefined'
-                          ? 'Cannot edit system generated metrics'
-                          : 'Edit',
-                      onClick: onChartClick,
-                      disabled: widget.metricType === 'predefined',
-                    },
-                    {
-                      text: 'Hide',
-                      onClick: onDelete,
-                    },
-                  ]}
-                />
-              )}
-            </div>
-          )}
-        </div>
-
-        <LazyLoad offset={!isTemplate ? 100 : 600}>
-          <div className="px-4" onClick={onChartClick}>
-            <WidgetChart isPreview={isPreview} metric={widget} isTemplate={isTemplate} isWidget={isWidget} />
+      {addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
+      <div
+        className={cn('p-3 pb-4 flex items-center justify-between', {
+          'cursor-move': !isTemplate && isWidget,
+        })}
+      >
+        {!props.hideName ? (
+          <div className="capitalize-first w-full font-medium">
+            <TextEllipsis text={widget.name} />
           </div>
-        </LazyLoad>
-      </Tooltip>
+        ) : null}
+        {isWidget && (
+          <div className="flex items-center" id="no-print">
+            {!isPredefined && isTimeSeries && (
+              <>
+                <AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
+                <div className="mx-2" />
+              </>
+            )}
+
+            {!isTemplate && (
+              <ItemMenu
+                items={[
+                  {
+                    text:
+                      widget.metricType === 'predefined'
+                        ? 'Cannot edit system generated metrics'
+                        : 'Edit',
+                    onClick: onChartClick,
+                    disabled: widget.metricType === 'predefined',
+                  },
+                  {
+                    text: 'Hide',
+                    onClick: onDelete,
+                  },
+                ]}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      <LazyLoad offset={!isTemplate ? 100 : 600}>
+        <div className="px-4" onClick={onChartClick}>
+          <WidgetChart
+            isPreview={isPreview}
+            metric={widget}
+            isTemplate={isTemplate}
+            isWidget={isWidget}
+          />
+        </div>
+      </LazyLoad>
     </div>
   );
 }
diff --git a/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx b/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
index ce25bb996..b6afe9b94 100644
--- a/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
+++ b/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
@@ -16,7 +16,7 @@ function CustomDropdownOption(props: Props) {
       <Tooltip disabled={!disabled} title="This feature requires an enterprise license." delay={0}>
         <div
           className={cn(
-            'group p-2 flex item-start border border-transparent rounded hover:border-teal hover:!bg-active-blue !leading-0',
+            'cursor-pointer group p-2 flex item-start border border-transparent rounded hover:!bg-active-blue !leading-0',
             { 'opacity-30': disabled }
           )}
         >
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index a59f8e5aa..1c9d756a3 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -12,6 +12,7 @@ import PlayLink from './PlayLink';
 import ErrorBars from './ErrorBars';
 import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes';
 import { capitalize } from 'App/utils';
+import { Duration } from 'luxon';
 
 const ASSIST_ROUTE = assistRoute();
 const ASSIST_LIVE_SESSION = liveSession();
@@ -27,7 +28,7 @@ interface Props {
     userDisplayName: string;
     userCountry: string;
     startedAt: number;
-    duration: string;
+    duration: Duration;
     eventsCount: number;
     errorsCount: number;
     pagesCount: number;
@@ -98,8 +99,9 @@ function SessionItem(props: RouteComponentProps & Props) {
   const hasUserId = userId || userAnonymousId;
   const isSessions = isRoute(SESSIONS_ROUTE, location.pathname);
   const isAssist =
-    isRoute(ASSIST_ROUTE, location.pathname) || isRoute(ASSIST_LIVE_SESSION, location.pathname)
-    || location.pathname.includes('multiview');
+    isRoute(ASSIST_ROUTE, location.pathname) ||
+    isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
+    location.pathname.includes('multiview');
   const isLastPlayed = lastPlayedSessionId === sessionId;
 
   const _metaList = Object.keys(metadata)
@@ -213,7 +215,7 @@ function SessionItem(props: RouteComponentProps & Props) {
             id="play-button"
             data-viewed={viewed}
           >
-            {live && session.isCallActive && session.agentIds.length > 0 ? (
+            {live && session.isCallActive && session.agentIds!.length > 0 ? (
               <div className="mr-4">
                 <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
                   <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index 35e3588fa..3b08f55f7 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -32,41 +32,25 @@ export default (props: Props) => {
     ...rest
   } = props;
 
-  let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
   let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal';
 
-  if (variant === 'default') {
-    classes.push('bg-white hover:bg-gray-light border border-gray-light');
-  }
+  const variantClasses = {
+    default: 'bg-white hover:bg-gray-light border border-gray-light',
+    primary: 'bg-teal color-white hover:bg-teal-dark',
+    green: 'bg-green color-white hover:bg-green-dark',
+    text: 'bg-transparent color-gray-dark hover:bg-gray-light-shade hover:!text-teal hover-fill-teal',
+    'text-primary': 'bg-transparent color-teal hover:bg-teal-light hover:color-teal-dark',
+    'text-red': 'bg-transparent color-red hover:bg-teal-light',
+    outline: 'bg-white color-teal border border-teal hover:bg-teal-light',
+  };
 
-  if (variant === 'primary') {
-    classes.push('bg-teal color-white hover:bg-teal-dark');
-  }
-
-  if (variant === 'green') {
-    classes.push('bg-green color-white hover:bg-green-dark');
-    iconColor = 'white';
-  }
-
-  if (variant === 'text') {
-    classes.push('bg-transparent color-gray-dark hover:bg-gray-light-shade');
-  }
-
-  if (variant === 'text-primary') {
-    classes.push('bg-transparent color-teal hover:bg-teal-light hover:color-teal-dark');
-  }
-
-  if (variant === 'text-red') {
-    classes.push('bg-transparent color-red hover:bg-teal-light');
-  }
-
-  if (variant === 'outline') {
-    classes.push('bg-white color-teal border border-teal hover:bg-teal-light');
-  }
-
-  if (disabled) {
-    classes.push('opacity-40 pointer-events-none');
-  }
+  let classes = cn(
+    'relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap',
+    variantClasses[variant],
+    { 'opacity-40 pointer-events-none': disabled },
+    { '!rounded-full h-10 w-10 justify-center': rounded },
+    className
+  );
 
   if (variant === 'primary') {
     iconColor = 'white';
@@ -75,10 +59,6 @@ export default (props: Props) => {
     iconColor = 'red';
   }
 
-  if (rounded) {
-    classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center'));
-  }
-
   const render = () => (
     <button {...rest} type={type} className={cn(classes, className)}>
       {icon && (
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 2bd33f4c9..a416581a6 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dash' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'errors-icon' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'magic' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'performance-icon' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-circle' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
+export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dash' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'errors-icon' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'magic' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'performance-icon' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-circle' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
 
 interface Props {
     name: IconNames;
@@ -356,7 +356,8 @@ const SVG = (props: Props) => {
     case 'play-hover': return <svg viewBox="0 0 42 42" width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M21 0a21 21 0 1 1 0 42 21 21 0 0 1 0-42Zm0 1.276a19.724 19.724 0 1 0 0 39.448 19.724 19.724 0 0 0 0-39.448Z"/><circle cx="21" cy="21" r="20"/><path d="M29.32 23.084c1.833-1.13 1.833-2.94 0-4.039l-10.638-6.389c-1.833-1.13-3.336-.395-3.336 1.616V27.76c0 1.971 1.503 2.714 3.344 1.616l10.63-6.292Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h42v42H0z"/></clipPath></defs></svg>;
     case 'play': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/></svg>;
     case 'plus-circle': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>;
-    case 'plus': return <svg viewBox="0 0 8 8" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4 0a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 4 0Z"/></svg>;
+    case 'plus-lg': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/></svg>;
+    case 'plus': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>;
     case 'pointer-sessions-search': return <svg viewBox="0 0 157 200" width={ `${ width }px` } height={ `${ height }px` } ><path d="M156.877 1.647a1 1 0 0 0-1.415-.96l-3.852 1.76a1 1 0 0 0-.072 1.782l3.662 2.047a1 1 0 0 0 1.487-.823l.19-3.806ZM.372 100.542c7.18-.574 15.4-.41 23.76-.369 8.333.041 16.793-.039 24.361-1.12 7.564-1.08 14.325-3.171 19.195-7.208 4.894-4.057 7.792-10.005 7.792-18.627h-1.395c0 8.364-2.8 13.96-7.354 17.737-4.579 3.795-11.02 5.827-18.462 6.89-7.439 1.062-15.791 1.146-24.13 1.105-8.314-.042-16.5 1.011-23.767 1.592Zm67.68-14.233c2.937 2.554 6.59 3.334 10.667 2.6 4.036-.726 8.484-2.932 13.149-6.323 9.338-6.788 19.76-18.48 29.779-33.325 0 0-.039-.38-.508-.624-9.983 14.792-21.001 26.348-30.16 33.006-4.585 3.332-8.825 6.174-12.54 6.843-3.675.661-6.838-.04-9.406-2.271l-.982.094Zm53.595-37.048c25.462-37.726 24.623-33.749 32.521-44.276l-.472-.673c-7.82 10.423-7.082 6.58-32.557 44.325.469.244.508.624.508.624ZM75.48 73.218c0-.428-.047-.805-.156-1.121-.107-.314-.291-.612-.601-.816-.675-.443-1.469-.18-2.005.116-1.135.63-2.463 2.104-3.575 3.823-1.127 1.742-2.103 3.845-2.466 5.824-.358 1.955-.142 3.947 1.374 5.265l.982-.094c-1.034-.899-1.312-3.16-.979-4.977.33-1.795.539-3.76 1.61-5.414 1.086-1.68 2.966-2.93 3.799-3.392.447-.248.5-.121.425-.17-.01-.007.045.025.1.188.056.161.097.409.097.768h1.395Z" fill="#000"/></svg>;
     case 'prev1': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>;
     case 'puzzle-piece': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6.75 1a.75.75 0 0 1 .75.75V8a.5.5 0 0 0 1 0V5.467l.086-.004c.317-.012.637-.008.816.027.134.027.294.096.448.182.077.042.15.147.15.314V8a.5.5 0 1 0 1 0V6.435a4.9 4.9 0 0 1 .106-.01c.316-.024.584-.01.708.04.118.046.3.207.486.43.081.096.15.19.2.259V8.5a.5.5 0 0 0 1 0v-1h.342a1 1 0 0 1 .995 1.1l-.271 2.715a2.5 2.5 0 0 1-.317.991l-1.395 2.442a.5.5 0 0 1-.434.252H6.035a.5.5 0 0 1-.416-.223l-1.433-2.15a1.5 1.5 0 0 1-.243-.666l-.345-3.105a.5.5 0 0 1 .399-.546L5 8.11V9a.5.5 0 0 0 1 0V1.75A.75.75 0 0 1 6.75 1zM8.5 4.466V1.75a1.75 1.75 0 1 0-3.5 0v5.34l-1.2.24a1.5 1.5 0 0 0-1.196 1.636l.345 3.106a2.5 2.5 0 0 0 .405 1.11l1.433 2.15A1.5 1.5 0 0 0 6.035 16h6.385a1.5 1.5 0 0 0 1.302-.756l1.395-2.441a3.5 3.5 0 0 0 .444-1.389l.271-2.715a2 2 0 0 0-1.99-2.199h-.581a5.114 5.114 0 0 0-.195-.248c-.191-.229-.51-.568-.88-.716-.364-.146-.846-.132-1.158-.108l-.132.012a1.26 1.26 0 0 0-.56-.642 2.632 2.632 0 0 0-.738-.288c-.31-.062-.739-.058-1.05-.046l-.048.002zm2.094 2.025z"/></svg>;
diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css
index 1af69f93d..1d1bd5ab1 100644
--- a/frontend/app/styles/colors-autogen.css
+++ b/frontend/app/styles/colors-autogen.css
@@ -37,6 +37,42 @@
 .fill-borderColor { fill: $borderColor }
 .fill-transparent { fill: $transparent }
 .fill-figmaColors { fill: $figmaColors }
+.hover-fill-main:hover svg { fill: $main }
+.hover-fill-gray-light-shade:hover svg { fill: $gray-light-shade }
+.hover-fill-gray-lightest:hover svg { fill: $gray-lightest }
+.hover-fill-gray-light:hover svg { fill: $gray-light }
+.hover-fill-gray-bg:hover svg { fill: $gray-bg }
+.hover-fill-gray-medium:hover svg { fill: $gray-medium }
+.hover-fill-gray-dark:hover svg { fill: $gray-dark }
+.hover-fill-gray-darkest:hover svg { fill: $gray-darkest }
+.hover-fill-teal:hover svg { fill: $teal }
+.hover-fill-teal-dark:hover svg { fill: $teal-dark }
+.hover-fill-teal-light:hover svg { fill: $teal-light }
+.hover-fill-tealx:hover svg { fill: $tealx }
+.hover-fill-tealx-light:hover svg { fill: $tealx-light }
+.hover-fill-tealx-light-border:hover svg { fill: $tealx-light-border }
+.hover-fill-tealx-lightest:hover svg { fill: $tealx-lightest }
+.hover-fill-orange:hover svg { fill: $orange }
+.hover-fill-yellow:hover svg { fill: $yellow }
+.hover-fill-yellow2:hover svg { fill: $yellow2 }
+.hover-fill-orange-dark:hover svg { fill: $orange-dark }
+.hover-fill-green:hover svg { fill: $green }
+.hover-fill-green2:hover svg { fill: $green2 }
+.hover-fill-green-dark:hover svg { fill: $green-dark }
+.hover-fill-red:hover svg { fill: $red }
+.hover-fill-red2:hover svg { fill: $red2 }
+.hover-fill-red-lightest:hover svg { fill: $red-lightest }
+.hover-fill-blue:hover svg { fill: $blue }
+.hover-fill-blue2:hover svg { fill: $blue2 }
+.hover-fill-active-blue:hover svg { fill: $active-blue }
+.hover-fill-bg-blue:hover svg { fill: $bg-blue }
+.hover-fill-active-blue-border:hover svg { fill: $active-blue-border }
+.hover-fill-pink:hover svg { fill: $pink }
+.hover-fill-light-blue-bg:hover svg { fill: $light-blue-bg }
+.hover-fill-white:hover svg { fill: $white }
+.hover-fill-borderColor:hover svg { fill: $borderColor }
+.hover-fill-transparent:hover svg { fill: $transparent }
+.hover-fill-figmaColors:hover svg { fill: $figmaColors }
 
 /* color */
 .color-main { color: $main }
diff --git a/frontend/app/svg/icons/plus-lg.svg b/frontend/app/svg/icons/plus-lg.svg
new file mode 100644
index 000000000..2a37f8191
--- /dev/null
+++ b/frontend/app/svg/icons/plus-lg.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus-lg" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/plus.svg b/frontend/app/svg/icons/plus.svg
index 7270c46a8..818b4f214 100644
--- a/frontend/app/svg/icons/plus.svg
+++ b/frontend/app/svg/icons/plus.svg
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M4,0 C4.27614237,0 4.5,0.223857625 4.5,0.5 L4.5,3.5 L7.5,3.5 C7.77614237,3.5 8,3.72385763 8,4 C8,4.27614237 7.77614237,4.5 7.5,4.5 L4.5,4.5 L4.5,7.5 C4.5,7.77614237 4.27614237,8 4,8 C3.72385763,8 3.5,7.77614237 3.5,7.5 L3.5,4.5 L0.5,4.5 C0.223857625,4.5 0,4.27614237 0,4 C0,3.72385763 0.223857625,3.5 0.5,3.5 L3.5,3.5 L3.5,0.5 C3.5,0.223857625 3.72385763,0 4,0 Z" id="Path"></path>
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/scripts/colors.js b/frontend/scripts/colors.js
index 928fd2275..2baf1a6b0 100644
--- a/frontend/scripts/colors.js
+++ b/frontend/scripts/colors.js
@@ -8,6 +8,7 @@ fs.writeFileSync('app/styles/colors-autogen.css', `/* Auto-generated, DO NOT EDI
 
 /* fill */
 ${ colors.map(color => `.fill-${ color } { fill: $${ color } }`).join('\n') }
+${ colors.map(color => `.hover-fill-${ color }:hover svg { fill: $${ color } }`).join('\n') }
 
 /* color */
 ${ colors.map(color => `.color-${ color } { color: $${ color } }`).join('\n') }