diff --git a/frontend/app/components/Session/RightBlock.tsx b/frontend/app/components/Session/RightBlock.tsx
index 8a07bbf2e..d549e905d 100644
--- a/frontend/app/components/Session/RightBlock.tsx
+++ b/frontend/app/components/Session/RightBlock.tsx
@@ -4,7 +4,7 @@ import PageInsightsPanel from '../Session_/PageInsightsPanel/PageInsightsPanel'
 import { Controls as PlayerControls } from 'Player';
 import { connectPlayer } from 'Player';
 import cn from 'classnames';
-import stl from './rightblock.css';
+import stl from './rightblock.module.css';
 
 const EventsBlockConnected = connectPlayer(state => ({
   currentTimeEventIndex: state.eventListNow.length > 0 ? state.eventListNow.length - 1 : 0,
diff --git a/frontend/app/components/Session/Tabs/Tabs.tsx b/frontend/app/components/Session/Tabs/Tabs.tsx
index e59fc9733..87bb8bb39 100644
--- a/frontend/app/components/Session/Tabs/Tabs.tsx
+++ b/frontend/app/components/Session/Tabs/Tabs.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import stl from './tabs.css';
+import stl from './tabs.module.css';
 
 interface Props {
     tabs: Array<any>;
diff --git a/frontend/app/components/Session/Tabs/tabs.css b/frontend/app/components/Session/Tabs/tabs.module.css
similarity index 100%
rename from frontend/app/components/Session/Tabs/tabs.css
rename to frontend/app/components/Session/Tabs/tabs.module.css
diff --git a/frontend/app/components/Session/rightblock.css b/frontend/app/components/Session/rightblock.module.css
similarity index 100%
rename from frontend/app/components/Session/rightblock.css
rename to frontend/app/components/Session/rightblock.module.css
diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index 7c111b2ba..65f64a3ed 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -2,15 +2,14 @@ import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { setAutoplayValues } from 'Duck/sessions'
 import { session as sessionRoute } from 'App/routes';
-import { Link, Icon, Slider, Toggler } from 'UI';
+import { Link, Icon, Toggler } from 'UI';
 import { connectPlayer } from 'Player/store';
 import { Controls as PlayerControls } from 'Player';
 import { Tooltip } from 'react-tippy';
 import cn from 'classnames';
-import { disabled } from '../Player/Controls/controlButton.css';
 
 function Autoplay(props) {
-  const { previousId, nextId, autoplay } = props
+  const { previousId, nextId, autoplay, disabled } = props
 
   useEffect(() => {
     props.setAutoplayValues()
@@ -35,12 +34,12 @@ function Autoplay(props) {
         title="Play Previous Session"
         disabled={!previousId}
         className={cn(
-          "p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium", 
+          "p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
           previousId && 'cursor-pointer',
           !disabled && 'hover:bg-bg-blue'
         )}
       >
-        <Link to={ sessionRoute(previousId) } disabled={!previousId}> 
+        <Link to={ sessionRoute(previousId) } disabled={!previousId}>
           <Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
         </Link>
       </Tooltip>
@@ -53,7 +52,7 @@ function Autoplay(props) {
         title="Play Next Session"
         disabled={!nextId}
         className={cn(
-          "p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium", 
+          "p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium",
           nextId && 'cursor-pointer',
           !disabled && 'hover:bg-bg-blue'
         )}
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index 9d405650e..e6bcbaa33 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -8,7 +8,7 @@ import {
 import Player from './Player';
 import SubHeader from './Subheader';
 
-import styles from './playerBlock.css';
+import styles from './playerBlock.module.css';
 
 @connect(state => ({
   fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
@@ -19,11 +19,11 @@ import styles from './playerBlock.css';
 }))
 export default class PlayerBlock extends React.PureComponent {
   render() {
-    const { 
-      fullscreen, 
-      bottomBlock, 
-      sessionId, 
-      disabled, 
+    const {
+      fullscreen,
+      bottomBlock,
+      sessionId,
+      disabled,
       activeTab,
       jiraConfig,
      } = this.props;
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 8c42e40fa..55f59e73d 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -2,19 +2,15 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { sessions as sessionsRoute, assist as assistRoute, liveSession as liveSessionRoute, withSiteId } from 'App/routes';
-import { Button, Icon, BackLink, Link } from 'UI';
+import { Icon, BackLink, Link } from 'UI';
 import { toggleFavorite, setSessionPath } from 'Duck/sessions';
 import cn from 'classnames';
-import SharePopup from '../shared/SharePopup/SharePopup';
-import { Icon, BackLink, Link } from 'UI';
-import { connectPlayer, showEvents, toggleEvents } from 'Player';
-import { fetchList as fetchListIntegration } from 'Duck/integrations/actions';
+import { connectPlayer, toggleEvents } from 'Player';
 import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
 import UserCard from './EventsBlock/UserCard';
 import Tabs from 'Components/Session/Tabs';
 
 import stl from './playerBlockHeader.module.css';
-import Issues from './Issues/Issues';
 import AssistActions from '../Assist/components/AssistActions';
 import AssistTabs from '../Assist/components/AssistTabs';
 
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 87b4b2d8a..0d4805b78 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -19,10 +19,12 @@ const SVG = (props: Props) => {
     case 'analytics': return <svg viewBox="0 0 576 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16zM64 480H32v-96h32v96zm496-288h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-16 288h-32V224h32v256zM502.77 88.68C510.12 93.24 518.71 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 5.51 1.12 10.71 2.83 15.64l-89.6 71.68c-7.35-4.57-15.94-7.33-25.23-7.33s-17.88 2.76-25.23 7.33l-89.6-71.68C254.88 58.72 256 53.51 256 48c0-26.51-21.49-48-48-48s-48 21.49-48 48c0 7.4 1.81 14.32 4.8 20.58L68.58 164.8C62.32 161.81 55.4 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-7.4-1.81-14.32-4.8-20.58l96.22-96.22C193.68 94.19 200.6 96 208 96c9.29 0 17.88-2.76 25.23-7.33l89.6 71.68c-1.71 4.93-2.83 10.14-2.83 15.65 0 26.51 21.49 48 48 48s48-21.49 48-48c0-5.51-1.12-10.72-2.83-15.65l89.6-71.67zM528 32c8.82 0 16 7.18 16 16s-7.18 16-16 16-16-7.18-16-16 7.18-16 16-16zM48 224c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zM208 64c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm160 128c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm-128 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-16 288h-32V224h32v256zm176-160h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm-16 160h-32V352h32v128z"/></svg>;
     case 'anchor': return <svg class="bi bi-bounding-box" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 2V0H0v5h2v6H0v5h5v-2h6v2h5v-5h-2V5h2V0h-5v2H5zm6 1v2h2v6h-2v2H5v-2H3V5h2V3h6zm1-2h3v3h-3V1zm3 11v3h-3v-3h3zM4 15H1v-3h3v3zM1 4V1h3v3H1z"/></svg>;
     case 'arrow-alt-square-right': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80zm400-16c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352zm-208 64v64H88c-13.2 0-24 10.8-24 24v80c0 13.2 10.8 24 24 24h104v64c0 28.4 34.5 42.8 54.6 22.6l128-128c12.5-12.5 12.5-32.8 0-45.3l-128-128c-20.1-20-54.6-5.8-54.6 22.7zm160 128L224 384v-96H96v-64h128v-96l128 128z"/></svg>;
+    case 'arrow-clockwise': return <svg class="bi bi-arrow-clockwise" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>;
     case 'arrow-down': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m443.5 248.5-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L241 419.9V44c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v375.9L28.5 241.4c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.8 4.8-12.3.1-17z"/></svg>;
     case 'arrow-square-left': return <svg class="bi bi-arrow-left-square" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/></svg>;
     case 'arrow-square-right': return <svg class="bi bi-arrow-right-square" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>;
     case 'arrow-up': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m4.465 263.536 7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L207 92.113V468c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V92.113l178.494 178.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.05c-4.686-4.686-12.284-4.686-16.971 0L4.465 246.566c-4.687 4.686-4.687 12.284 0 16.97z"/></svg>;
+    case 'arrows-angle-extend': return <svg viewBox="0 0 27 27" width={ `${ width }px` } height={ `${ height }px` } ><path clip-rule="evenodd" d="M9.804 17.143a.845.845 0 0 0-1.195 0l-6.92 6.92v-4.676a.845.845 0 0 0-1.689 0v6.715a.845.845 0 0 0 .845.845H7.56a.844.844 0 1 0 0-1.69H2.884l6.92-6.92a.845.845 0 0 0 0-1.194Zm7.339-7.34a.845.845 0 0 0 1.194 0l6.92-6.92V7.56a.845.845 0 0 0 1.69 0V.845A.844.844 0 0 0 26.102 0h-6.715a.845.845 0 0 0 0 1.69h4.676l-6.92 6.92a.845.845 0 0 0 0 1.194Z"/></svg>;
     case 'avatar/icn_bear': return <svg viewBox="0 0 100 100"  width={ `${ width }px` } height={ `${ height }px` } ><path d="M89.8 37.7c-.3-1.5-1.4-5.1-4.7-7.4-1-.7-2-1.3-2.9-1.8.1-.4.2-.7.2-1.1 0-2.4-2-4.4-4.6-4.4-2.3 0-4.2 1.6-4.5 3.7h-9.4l-11.7-4.6-11.5 3-5.9-.3c-.6 0-1.2-.1-1.8-.3-3.7-.9-12.9-2.6-20 2.4-4.6 3.3-7.3 8.6-8 16v.2c0 .4.2 8.8 3.4 17.8 2.7 7.4 3.7 12.6 4 13.7v10.6h20.8v-9.4l-4.9-2.1 1-6.7c4 .4 11.8 1 17.8-.4l1.5 5.5v13.1h19.2v-9.5l-5.2-2.5c.2-1.7.4-4.3.8-7.1 1.2-7.9 2.3-9.7 2.5-9.9 2.4-1.6 3-1.5 4.8-1.2 2.4.3 8.9-1.4 12.8-2.6l7.4.1 4-7.2-5.1-7.6z"/></svg>;
     case 'avatar/icn_beaver': return <svg viewBox="0 0 100 100"  width={ `${ width }px` } height={ `${ height }px` } ><path d="M94.8 54.8c-.9-7.2-6-13.2-12.9-15.3l-13.7-6.1C51.4 25.9 33 37.5 30.6 55.2c-4.2-1.4-9.3-3.2-17.1-3.2C8.8 52 5 55.8 5 60.4c0 4.7 3.8 8.4 8.4 8.4H64c1.6 0 2.8-1.3 2.8-2.8 0-1.6-1.3-2.8-2.8-2.8h-4.2c1.1-1.2 1.8-2.7 2.3-4.2H64c0 .8.4 1.6 1 2.2l8.4 7c1.2 1 3 .8 4-.4 1-1.2.8-3-.4-4L71.3 59h1.5c3.1 2.7 7.1 4.2 11.3 4.2h5.3c.9 0 1.8-.5 2.3-1.3 3.6-5.3 3.5-4.5 3.1-7.1z"/></svg>;
     case 'avatar/icn_bird': return <svg viewBox="0 0 100 100"  width={ `${ width }px` } height={ `${ height }px` } ><path d="M78.6 23.7c5.5-3 6.4-3.6 6.4-4.1 0-.1-.1-.3-.3-.4-.5-.2-1.1-.4-1.6-.5-1-.3-1.9-.5-2.8-1.6-.4-.5-.8-1.4-1.4-2.4-1.6-3.2-4.1-8.1-9.4-9.3-.8-.3-1.7-.4-2.6-.4-3.3 0-6.2 1.4-8.6 4.1-2.6 3-4.3 7.4-5.1 13-.9 7-11.2 20.4-17.3 28.3-2.1 2.7-3.7 4.8-4.4 5.9-2.4 3.9-6.8 9.1-10.4 13.2-4.1 4.8-6.3 7.3-6.2 8.3 0 .2.1.3.2.4.1.1.2.1.4.1 1.3 0 5.7-3.2 9.8-6.4-2.8 2.9-6.3 6.8-9.7 10.7-1.1 1.2-2.1 2.4-3.1 3.5-3.1 3.5-4.8 6.4-4.3 7.5.1.2.3.4.6.4.9 0 2.2-1.1 3.2-2 1.8-1.6 2.8-2.2 3.2-2.3 0 .1-.1.5-.6 1.2-1.1 1.5-1.5 2.8-1.1 3.5.1.3.4.4.7.4.7 0 1.6-.6 2.6-1.8 2.8-3.1 12.4-12 17-16.3 1.3-1.2 2.1-2 2.3-2.2.1 0 .3-.1 1-.1h2.2c1.3 0 3 .1 4.9.1h2.6c0 .8 0 1.8-.3 2 0 0-.1 0-.1.1-.3.2-1.1.7-2.3 2-.5.5-1 1.3-.8 1.7.1.2.2.3.4.3s.5-.1.8-.4c1.9-1.8 4.4-2.9 6.9-2.9.4 0 .7 0 1.1.1 1.6.2 1.9.3 2.4.6.2.1.5.2 1 .4.2.1.4 0 .5-.2.1-.5-.9-1.8-1.7-2.2-.8-.3-1.6-.4-2.5-.4-1 0-1.8.2-2.4.3-.3.1-.5.1-.7.1v-1.5c3.6-.2 6.7-.6 9.6-1.2 2 1.2 3.8 2.3 4 2.5.1.1-.1.7-.2 1.1-.1.5-.3 1.1-.3 1.7 0 .8.2 1.5.5 1.8.1.1.3.2.4.2.1 0 .4 0 .4-.6 0-.8 1.1-3.2 2-4 1.4-1.3 2.6-1.4 4.4-1.3 1.5.1 2.6.4 3.1.6.2.1.3.1.4.1.1 0 .2-.1.3-.1l.1-.2-.1-.1c-.2-.3-1.2-1.6-2.8-2-.9-.3-1.8-.4-2.6-.4-1.5 0-2.4.5-3.1.8-.4.2-.6.3-.8.3-.3-.1-1.3-.6-2.5-1.3 3.6-1.2 6.5-2.8 8.7-4.9 11.1-10.6 10.6-23.6 8.2-32.7-.7-2.5-1.5-4.3-2.1-5.6-1.3-2.7-1.6-3.6 1.9-5.5z"/></svg>;
@@ -239,7 +241,7 @@ const SVG = (props: Props) => {
     case 'integrations/github': return <svg viewBox="0 0 496 512" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>;
     case 'integrations/graphql': return <svg viewBox="0 0 120 120" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><rect fill="#fff" height="120" rx="6.01" width="120"/><path d="m66.84 29.17 16.44 9.5a7 7 0 0 1 1.62-1.28A7.13 7.13 0 1 1 92 49.74a7 7 0 0 1-1.9.76v19a7.13 7.13 0 1 1-5.25 13.11 6.85 6.85 0 0 1-1.76-1.43l-16.32 9.44a7.26 7.26 0 0 1 .36 2.25 7.13 7.13 0 1 1-14-2l-16.42-9.51a7 7 0 0 1-1.59 1.25 7.13 7.13 0 1 1-5.25-13.11v-19a7 7 0 0 1-1.9-.76 7.13 7.13 0 1 1 7.13-12.35 7 7 0 0 1 1.61 1.27l16.45-9.5a7.22 7.22 0 0 1-.29-2 7.13 7.13 0 1 1 14.26 0 7.24 7.24 0 0 1-.29 2.01zm-1.72 2.92 16.49 9.52a7.12 7.12 0 0 0 5.13 8.87v19l-.27.07-21.54-37.27zm-10.05.2-21.53 37.3-.28-.08v-19a7.06 7.06 0 0 0 4.45-3.35 7.15 7.15 0 0 0 .68-5.53l16.48-9.51a1.89 1.89 0 0 1 .2.17zM62 34l21.52 37.27a7.09 7.09 0 0 0-1.25 1.6 6.84 6.84 0 0 0-.75 1.88h-43a6.84 6.84 0 0 0-.75-1.88 7.26 7.26 0 0 0-1.25-1.59L58 34a7.21 7.21 0 0 0 4 0zm3.28 54.09 16.38-9.46c0-.16-.09-.31-.13-.47h-43c0 .09 0 .19-.08.28l16.46 9.5a7.14 7.14 0 0 1 10.41.15z" fill="#e535ab"/></svg>;
     case 'integrations/jira-text': return <svg viewBox="0 0 254.6 150" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient id="a" x1="55.29" y1="50.91" x2="40.58" y2="66.08" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="#0052cc"/><stop offset="1" stop-color="#2684ff"/></linearGradient><linearGradient id="b" x1="39.15" y1="68.24" x2="22.14" y2="84.79" xlinkHref="#a"/></defs><path d="M109.87 42.62h7.92v40.22c0 10.64-4.66 18-15.57 18a28.19 28.19 0 0 1-9.51-1.5v-7.7a22.4 22.4 0 0 0 8.19 1.49c6.69 0 9-4 9-9.77ZM132.23 39.54a4.94 4.94 0 0 1 5.27 5.28 5.28 5.28 0 1 1-10.55 0 4.94 4.94 0 0 1 5.28-5.28Zm-3.88 16.9h7.57v44h-7.57ZM154.75 100.44h-7.39v-44h7.39v7.74c2.55-5.19 6.95-8.89 15.58-8.36v7.39c-9.68-1-15.58 1.94-15.58 11.27ZM205.79 92.52c-2.81 5.8-8.09 8.8-14.87 8.8-11.7 0-17.6-9.95-17.6-22.88 0-12.41 6.16-22.88 18.48-22.88 6.42 0 11.35 2.9 14 8.62v-7.74h7.57v44h-7.57Zm-12.85 1.76c6.78 0 12.85-4.32 12.85-14.08v-3.52c0-9.77-5.54-14.08-12-14.08-8.53 0-12.93 5.63-12.93 15.84.03 10.56 4.25 15.84 12.08 15.84Z"/><path d="M70.14 33.62H35.56a15.61 15.61 0 0 0 15.61 15.61h6.36v6.15A15.6 15.6 0 0 0 73.14 71V36.62a3 3 0 0 0-3-3Z"/><path d="M53 50.85H18.44a15.61 15.61 0 0 0 15.61 15.61h6.37v6.14A15.61 15.61 0 0 0 56 88.21V53.85a3 3 0 0 0-3-3Z"/><path d="M35.91 68.08H1.33a15.6 15.6 0 0 0 15.6 15.61h6.37v6.14a15.61 15.61 0 0 0 15.61 15.61V71.08a3 3 0 0 0-3-3Z"/></svg>;
-    case 'integrations/jira': return <svg viewBox="0 0 74 76" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient x1="67.68%" y1="40.328%" x2="40.821%" y2="81.66%" id="a"><stop stop-color="#0052CC" offset="18%"/><stop stop-color="#2684FF" offset="100%"/></linearGradient><linearGradient x1="32.656%" y1="59.166%" x2="59.343%" y2="17.99%" id="b"><stop stop-color="#0052CC" offset="18%"/><stop stop-color="#2684FF" offset="100%"/></linearGradient></defs><g fill="none"><path d="M72.4 35.76 39.8 3.16 36.64 0 12.1 24.54.88 35.76a3 3 0 0 0 0 4.24L23.3 62.42l13.34 13.34 24.54-24.54.38-.38L72.4 40a3 3 0 0 0 0-4.24ZM36.64 49.08l-11.2-11.2 11.2-11.2 11.2 11.2-11.2 11.2Z" fill="#2684FF"/><path d="M36.64 26.68c-7.333-7.334-7.369-19.212-.08-26.59l-24.51 24.5 13.34 13.34 11.25-11.25Z" fill="url(#a)"/><path d="M47.87 37.85 36.64 49.08a18.86 18.86 0 0 1 0 26.68l24.57-24.57-13.34-13.34Z" fill="url(#b)"/></g></svg>;
+    case 'integrations/jira': return <svg viewBox="0 0 74 76" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient x1="67.68%" y1="40.328%" x2="40.821%" y2="81.66%" id="a"><stop stop-color="#777" offset="18%"/><stop stop-color="#999" offset="100%"/></linearGradient><linearGradient x1="32.656%" y1="59.166%" x2="59.343%" y2="17.99%" id="b"><stop stop-color="#777" offset="18%"/><stop stop-color="#999" offset="100%"/></linearGradient></defs><g fill="none"><path d="M72.4 35.76 39.8 3.16 36.64 0 12.1 24.54.88 35.76a3 3 0 0 0 0 4.24L23.3 62.42l13.34 13.34 24.54-24.54.38-.38L72.4 40a3 3 0 0 0 0-4.24ZM36.64 49.08l-11.2-11.2 11.2-11.2 11.2 11.2-11.2 11.2Z" fill="#999"/><path d="M36.64 26.68c-7.333-7.334-7.369-19.212-.08-26.59l-24.51 24.5 13.34 13.34 11.25-11.25Z" fill="url(#a)"/><path d="M47.87 37.85 36.64 49.08a18.86 18.86 0 0 1 0 26.68l24.57-24.57-13.34-13.34Z" fill="url(#b)"/></g></svg>;
     case 'integrations/mobx': return <svg viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M256 236.394V19.607c0-8.894-5.923-16.4-14.037-18.8l-9.215 5.514-102.265 109.037-3.206 10.021-1.873 9.62 31.89 119.18 4.933 1.82h74.167c10.828 0 19.606-8.777 19.606-19.605" fill="#EA6618"/><path d="M0 19.606v216.787c0 6.705 3.367 12.62 8.5 16.155l6.287-3.01 108.246-115.894 4.244-8.265.159-7.99L97.976 5.306 93.513 0H19.606C8.778 0 0 8.778 0 19.606" fill="#d65813"/><path d="M127.277 125.38 241.963.806a19.595 19.595 0 0 0-5.57-.807H93.515l33.763 125.38z" fill="#e05e11"/><path d="M19.606 256h142.622l-34.951-130.621L8.499 252.549A19.511 19.511 0 0 0 19.606 256" fill="#de5c16"/><path d="M94.918 97.03h14.225c5.668 21.386 12.119 40.152 19.316 57.085 8.152-19.05 14.127-37.83 19.185-57.086h13.442c-6.02 23.926-15.868 48.04-27.132 72.93h-11.89c-10.82-23.586-20.03-47.837-27.146-72.93zm-46.92-37.055h31.63v135.637h-31.77v-10.456H67.33V70.152H47.998V59.975zm160.169 10.177h-19.332v115.004h19.47v10.456h-31.769V59.975h31.63v10.177z" fill="#FFF"/></svg>;
     case 'integrations/newrelic-text': return <svg viewBox="0 0 737.94 132.03" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="m257.96 103.98-20.19-42.32c-4.82-10-9.77-21.36-11.46-26.7l-.39.39c.65 7.55.78 17.06.91 25l.52 43.63h-14.71V13.86h16.93l21.88 44a164.12 164.12 0 0 1 9.25 23.18l.39-.39c-.39-4.56-1.3-17.45-1.3-25.66l-.26-41.15h14.2v90.12ZM300.54 74.94v1c0 9.12 3.39 18.75 16.28 18.75 6.12 0 11.46-2.21 16.41-6.51l5.6 8.73a35.6 35.6 0 0 1-23.7 8.73c-18.62 0-30.34-13.41-30.34-34.51 0-11.59 2.47-19.28 8.21-25.79 5.34-6.12 11.85-8.86 20.19-8.86a25.45 25.45 0 0 1 18.1 6.77c5.73 5.21 8.6 13.28 8.6 28.65v3Zm12.63-27.61c-8.07 0-12.5 6.38-12.5 17.06h24.35c0-10.66-4.68-17.06-11.85-17.06ZM416.1 104.24h-13.46l-8.07-30.34c-2.08-7.81-4.3-18-4.3-18h-.26s-1 6.51-4.3 18.62l-7.94 29.69h-13.42l-18-65.25 14.2-2 7.16 31.91c1.82 8.2 3.39 17.32 3.39 17.32h.39a178.91 178.91 0 0 1 3.78-17.71l8.47-30.47h14.07l7.43 29.72c2.74 10.68 4.17 18.75 4.17 18.75h.39s1.56-10 3.26-17.71l6.77-30.74h14.85ZM518.15 103.98l-7.81-13.94c-6.24-11.06-10.42-17.31-15.37-22.31a7.64 7.64 0 0 0-5.87-2.69v38.94h-14.71V13.86h27.48c20.19 0 29.3 11.72 29.3 25.79 0 12.89-8.33 24.75-22.4 24.75 3.26 1.69 9.25 10.42 13.93 18l13.28 21.62Zm-20.84-78h-8.21V54.5h7.68c7.81 0 12-1 14.72-3.78 2.47-2.47 4-6.25 4-10.94.05-9.12-4.9-13.81-18.19-13.81ZM555.65 74.94v1c0 9.12 3.39 18.75 16.28 18.75 6.12 0 11.46-2.21 16.41-6.51l5.6 8.73a35.6 35.6 0 0 1-23.7 8.73c-18.62 0-30.34-13.41-30.34-34.51 0-11.59 2.47-19.28 8.21-25.79 5.34-6.12 11.85-8.86 20.19-8.86a25.45 25.45 0 0 1 18.1 6.77c5.73 5.21 8.6 13.28 8.6 28.65v3Zm12.64-27.61c-8.07 0-12.5 6.38-12.5 17.06h24.31c0-10.66-4.65-17.06-11.81-17.06ZM621.81 105.42c-14.46 0-14.46-13-14.46-18.62V30.66a106.73 106.73 0 0 0-1.25-19.27l14.72-3.26c1 4 1.17 9.51 1.17 18.1V82.1c0 8.86.39 10.29 1.43 11.85a4 4 0 0 0 4.69 1l2.34 8.86a22.44 22.44 0 0 1-8.64 1.61ZM646.68 28.32a9.34 9.34 0 0 1-9.25-9.51 9.44 9.44 0 1 1 9.25 9.51Zm-7.16 75.67V39.13l14.46-2.61v67.46ZM695 105.68c-18 0-28-12.63-28-33.86 0-24 14.33-35.42 29-35.42 7.16 0 12.37 1.69 18.23 7.16l-7.13 9.5c-3.91-3.52-7.29-5.08-11.07-5.08a11.2 11.2 0 0 0-10.42 6.64c-2 4-2.73 10.16-2.73 18.36 0 9 1.43 14.72 4.43 18a11.58 11.58 0 0 0 8.73 3.78c4.56 0 9-2.21 13.28-6.51l6.77 8.73c-5.99 5.96-12.24 8.7-21.09 8.7ZM728.31 105.43a9.67 9.67 0 1 1 9.62-9.67 9.63 9.63 0 0 1-9.62 9.67Zm0-17.42a7.78 7.78 0 1 0 7.44 7.75 7.55 7.55 0 0 0-7.44-7.76Zm1.9 13.11c-.42-.73-.6-1-1-1.8-1.07-1.95-1.4-2.5-1.79-2.65a.74.74 0 0 0-.34-.08v4.53h-2.13V90.27h4a3 3 0 0 1 3.2 3.17 2.78 2.78 0 0 1-2.42 3 2.49 2.49 0 0 1 .44.47c.62.78 2.6 4.21 2.6 4.21Zm-1.11-8.95a4.35 4.35 0 0 0-1.22-.16h-.78v2.94h.73c.94 0 1.35-.11 1.64-.37a1.53 1.53 0 0 0 .42-1.09 1.28 1.28 0 0 0-.79-1.32Z"/><path d="M168.72 55.82C161.07 20.67 118.92 0 74.56 9.64S.45 55.6 8.09 90.74s49.8 55.83 94.15 46.18 74.12-45.92 66.48-81.1Zm-80.31 49.86a32.4 32.4 0 1 1 32.4-32.4 32.4 32.4 0 0 1-32.4 32.4Z" transform="translate(-6.9 -7.27)"/><path d="M95.57 27.92a46.52 46.52 0 1 0 46.53 46.52 46.52 46.52 0 0 0-46.53-46.52Zm-7.17 73.66a28.3 28.3 0 1 1 28.3-28.3 28.3 28.3 0 0 1-28.29 28.3Z" transform="translate(-6.9 -7.27)"/></svg>;
     case 'integrations/newrelic': return <svg viewBox="0 0 681.02 551.55" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M692.8 220.54C660.86 73.7 484.77-12.68 299.47 27.61s-309.63 192-277.7 338.83 208 233.22 393.32 192.93 309.63-192 277.71-338.83ZM344.87 476.79c-103.41 0-187.2-83.82-187.2-187.22s83.8-187.19 187.2-187.19 187.2 83.81 187.2 187.19-83.82 187.22-187.2 187.22Z" transform="translate(-16.78 -17.71)"/><path d="M391.53 57.56c-132.32 0-239.61 107.28-239.61 239.6s107.29 239.62 239.61 239.62 239.62-107.29 239.62-239.62-107.3-239.6-239.62-239.6Zm-46.66 416.22c-101.75 0-184.19-82.47-184.19-184.21S243.12 105.4 344.87 105.4 529 187.85 529 289.57s-82.42 184.21-184.13 184.21Z" transform="translate(-16.78 -17.71)"/><path d="m278.93 271.2-20.19-42.33c-4.82-10-9.77-21.36-11.46-26.7l-.39.39c.65 7.55.78 17.06.91 25l.52 43.63h-14.71v-90.11h16.93l21.88 44a164.17 164.17 0 0 1 9.25 23.18l.39-.39c-.39-4.56-1.3-17.45-1.3-25.66l-.26-41.15h14.2v90.14ZM321.51 242.16v1c0 9.12 3.39 18.75 16.28 18.75 6.12 0 11.46-2.21 16.41-6.51l5.6 8.73a35.59 35.59 0 0 1-23.7 8.73c-18.62 0-30.34-13.41-30.34-34.51 0-11.59 2.47-19.27 8.21-25.79 5.34-6.12 11.85-8.86 20.19-8.86a25.45 25.45 0 0 1 18.1 6.77c5.73 5.21 8.6 13.28 8.6 28.65v3Zm12.63-27.61c-8.07 0-12.5 6.38-12.5 17.06H346c0-10.68-4.69-17.06-11.85-17.06ZM437 271.46h-13.39l-8.07-30.34c-2.08-7.81-4.3-18-4.3-18H411s-1 6.51-4.3 18.62l-7.94 29.69h-13.44l-18-65.25 14.2-2 7.16 31.91c1.82 8.2 3.39 17.32 3.39 17.32h.39a178.91 178.91 0 0 1 3.78-17.71l8.47-30.47h14.07l7.44 29.77c2.74 10.68 4.17 18.75 4.17 18.75h.39s1.56-10 3.26-17.71l6.77-30.74h14.85ZM267.62 387.2l-7.81-13.94c-6.25-11.07-10.42-17.32-15.37-22.27a7.64 7.64 0 0 0-5.86-2.73v38.94h-14.72v-90.12h27.48c20.19 0 29.3 11.72 29.3 25.79 0 12.89-8.33 24.75-22.4 24.75 3.26 1.69 9.25 10.42 13.93 18l13.28 21.62Zm-20.84-78h-8.21v28.52h7.68c7.81 0 12-1 14.72-3.78 2.47-2.47 4-6.25 4-10.94.03-9.12-4.91-13.81-18.19-13.81ZM305.12 358.16v1c0 9.12 3.39 18.75 16.28 18.75 6.12 0 11.46-2.21 16.41-6.51l5.6 8.72a35.59 35.59 0 0 1-23.7 8.73c-18.62 0-30.34-13.41-30.34-34.51 0-11.59 2.47-19.28 8.21-25.79 5.34-6.12 11.85-8.86 20.19-8.86a25.45 25.45 0 0 1 18.1 6.77c5.73 5.21 8.6 13.28 8.6 28.65v3Zm12.63-27.61c-8.07 0-12.5 6.38-12.5 17.06h24.35c0-10.68-4.68-17.06-11.85-17.06ZM371.28 388.63c-14.46 0-14.46-13-14.46-18.62v-56.13a106.72 106.72 0 0 0-1.3-19.27l14.72-3.26c1 4 1.17 9.51 1.17 18.1v55.87c0 8.86.39 10.29 1.43 11.85a4 4 0 0 0 4.69 1l2.34 8.86a22.44 22.44 0 0 1-8.59 1.6ZM396.15 311.53a9.34 9.34 0 0 1-9.25-9.53 9.44 9.44 0 1 1 9.25 9.51ZM389 387.2v-64.86l14.46-2.6v67.46ZM444.46 388.89c-18 0-28-12.63-28-33.86 0-24 14.33-35.42 29-35.42 7.16 0 12.37 1.69 18.23 7.16l-7.16 9.51c-3.91-3.52-7.29-5.08-11.07-5.08a11.2 11.2 0 0 0-10.42 6.64c-2 4-2.73 10.16-2.73 18.36 0 9 1.43 14.72 4.43 18a11.58 11.58 0 0 0 8.76 3.8c4.56 0 9-2.21 13.28-6.51l6.77 8.72c-5.98 5.95-12.23 8.68-21.09 8.68ZM477.78 388.64a9.67 9.67 0 1 1 9.62-9.64 9.63 9.63 0 0 1-9.62 9.64Zm0-17.42a7.78 7.78 0 1 0 7.44 7.75 7.55 7.55 0 0 0-7.44-7.75Zm1.9 13.1c-.42-.73-.6-1-1-1.79-1.07-2-1.4-2.5-1.79-2.65a.72.72 0 0 0-.34-.08v4.52h-2.15v-10.84h4a3 3 0 0 1 3.2 3.17 2.78 2.78 0 0 1-2.42 3 2.47 2.47 0 0 1 .44.47c.62.78 2.6 4.21 2.6 4.21Zm-1.14-8.94a4.35 4.35 0 0 0-1.22-.16h-.78v2.94h.73c.94 0 1.35-.1 1.64-.36a1.53 1.53 0 0 0 .42-1.09 1.28 1.28 0 0 0-.8-1.33Z" transform="translate(-16.78 -17.71)"/></svg>;
@@ -252,6 +254,7 @@ const SVG = (props: Props) => {
     case 'integrations/segment': return <svg viewBox="0 0 256 238" preserveAspectRatio="xMidYMid" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M159.58 162.377H12.294C5.5 162.377 0 156.876 0 150.084c0-6.792 5.501-12.293 12.293-12.293H159.58c6.791 0 12.292 5.501 12.292 12.293 0 6.792-5.5 12.293-12.292 12.293Zm84.127-62.454H96.426c-6.792 0-12.293-5.501-12.293-12.293 0-6.792 5.5-12.293 12.293-12.293h147.281c6.792 0 12.293 5.5 12.293 12.293 0 6.792-5.501 12.293-12.293 12.293Zm-30.45-59.139c0 6.79-5.503 12.293-12.292 12.293-6.79 0-12.293-5.503-12.293-12.293 0-6.789 5.503-12.292 12.293-12.292 6.789 0 12.293 5.503 12.293 12.292ZM67.326 196.948c0 6.789-5.503 12.292-12.293 12.292-6.789 0-12.293-5.503-12.293-12.292 0-6.79 5.504-12.293 12.293-12.293 6.79 0 12.293 5.503 12.293 12.293Z" fill="#93C8A2"/><path d="M127.933 237.522c-11.992 0-23.836-1.782-35.2-5.305-6.482-2.008-10.108-8.89-8.1-15.37 2.008-6.512 8.907-10.136 15.373-8.11 9.006 2.796 18.399 4.209 27.927 4.209 41.69 0 77.89-26.754 90.081-66.593a12.271 12.271 0 0 1 15.343-8.14c6.487 1.966 10.136 8.847 8.152 15.328-15.37 50.224-61.015 83.98-113.576 83.98ZM26.109 99.84a12.286 12.286 0 0 1-11.75-15.887C29.734 33.733 75.378 0 127.934 0c12 0 23.845 1.782 35.2 5.308a12.286 12.286 0 0 1 8.1 15.373 12.271 12.271 0 0 1-15.373 8.097 95.04 95.04 0 0 0-27.927-4.177c-41.682 0-77.887 26.753-90.078 66.592a12.296 12.296 0 0 1-11.743 8.693l-.003-.046Z" fill="#43AF79"/></svg>;
     case 'integrations/sentry-text': return <svg viewBox="0 0 717.11 249.68" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="m430.56 143.76-44.49-57.43H375v77h11.22v-59l45.74 59h9.82v-77h-11.22Zm-112-14.27h39.84v-10h-39.88V96.31h45v-10h-56.45v77h57v-10h-45.55Zm-46.84-9.78c-15.57-3.72-19.83-6.69-19.83-13.84 0-6.46 5.71-10.81 14.22-10.81 7.09 0 14.07 2.51 21.3 7.67l6.06-8.54c-8-6.13-16.65-9-27.13-9-15.25 0-25.89 9-25.89 21.92 0 13.84 9 18.63 25.5 22.63 14.51 3.35 18.93 6.5 18.93 13.5s-6 11.38-15.35 11.38c-9.07 0-16.81-3-25-9.82l-6.79 8.08a47.82 47.82 0 0 0 31.41 11.6c16.49 0 27.14-8.87 27.14-22.6-.02-11.65-6.91-17.88-24.61-22.17Zm373.9-33.37-23.19 36.31-23-36.31H586l30.51 46.54v30.47h11.56v-30.82l30.5-46.19ZM450.87 96.76h25.23v66.58h11.57V96.76h25.23V86.33h-62Zm115.53 36.52c11.64-3.21 18-11.37 18-23 0-14.78-10.84-24-28.28-24H522v77h11.45v-27.66h19.42l19.54 27.72h13.37l-21.1-29.58Zm-33-7.52V96.53H555c11.27 0 17.74 5.31 17.74 14.56 0 8.91-6.92 14.67-17.62 14.67ZM144.9 65.43a13.75 13.75 0 0 0-23.81 0l-19.6 33.95 5 2.87a96.14 96.14 0 0 1 47.83 77.4h-13.76a82.4 82.4 0 0 0-41-65.54l-5-2.86L76.3 143l5 2.87a46.35 46.35 0 0 1 22.46 33.78H72.33a2.27 2.27 0 0 1-2-3.41l8.76-15.17a31.87 31.87 0 0 0-10-5.71l-8.67 15.14a13.75 13.75 0 0 0 11.91 20.62h43.25v-5.73A57.16 57.16 0 0 0 91.84 139l6.88-11.92a70.93 70.93 0 0 1 30.56 58.26v5.74h36.65v-5.73a107.62 107.62 0 0 0-48.84-90.05L131 71.17a2.27 2.27 0 0 1 3.93 0l60.66 105.07a2.27 2.27 0 0 1-2 3.41H179.4c.18 3.83.2 7.66 0 11.48h14.24a13.75 13.75 0 0 0 11.91-20.62Z"/></svg>;
     case 'integrations/sentry': return <svg viewBox="0 0 150 134" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M86.9 7.43a13.75 13.75 0 0 0-23.81 0l-19.6 33.95 5 2.87a96.14 96.14 0 0 1 47.83 77.4H82.56a82.4 82.4 0 0 0-41-65.54l-5-2.86L18.3 85l5 2.87a46.35 46.35 0 0 1 22.46 33.78H14.33a2.27 2.27 0 0 1-2-3.41l8.76-15.17a31.87 31.87 0 0 0-10-5.71L2.42 112.5a13.75 13.75 0 0 0 11.91 20.62h43.25v-5.73A57.16 57.16 0 0 0 33.84 81l6.88-11.92a70.93 70.93 0 0 1 30.56 58.26v5.74h36.65v-5.73A107.62 107.62 0 0 0 59.09 37.3L73 13.17a2.27 2.27 0 0 1 3.93 0l60.66 105.07a2.27 2.27 0 0 1-2 3.41H121.4c.18 3.83.2 7.66 0 11.48h14.24a13.75 13.75 0 0 0 11.91-20.62L86.9 7.43Z"/></svg>;
+    case 'integrations/slack-bw': return <svg fill="currentColor" class="bi bi-slack" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/></svg>;
     case 'integrations/slack': return <svg viewBox="0 0 51 51" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><g fill="none"><path fill="#E01E5A" d="M10.923 32.126c0 2.932-2.37 5.3-5.301 5.3s-5.3-2.368-5.3-5.3c0-2.931 2.369-5.3 5.3-5.3h5.3v5.3zm2.65 0c0-2.931 2.37-5.3 5.301-5.3 2.932 0 5.3 2.369 5.3 5.3v13.252c0 2.932-2.368 5.3-5.3 5.3-2.931 0-5.3-2.368-5.3-5.3V32.126z"/><path fill="#36C5F0" d="M18.874 10.843c-2.931 0-5.3-2.37-5.3-5.301 0-2.932 2.369-5.301 5.3-5.301 2.932 0 5.3 2.37 5.3 5.3v5.302h-5.3zm0 2.69c2.932 0 5.3 2.37 5.3 5.3 0 2.932-2.368 5.302-5.3 5.302H5.582c-2.932 0-5.3-2.37-5.3-5.301 0-2.932 2.368-5.3 5.3-5.3h13.292z"/><path fill="#2EB67D" d="M40.117 18.834c0-2.932 2.37-5.3 5.301-5.3 2.932 0 5.301 2.368 5.301 5.3 0 2.931-2.37 5.3-5.3 5.3h-5.302v-5.3zm-2.65 0c0 2.931-2.37 5.3-5.3 5.3-2.932 0-5.302-2.369-5.302-5.3V5.542c0-2.932 2.37-5.301 5.301-5.301 2.932 0 5.301 2.37 5.301 5.3v13.293z"/><path fill="#ECB22E" d="M32.166 40.077c2.932 0 5.301 2.37 5.301 5.301 0 2.932-2.37 5.3-5.3 5.3-2.932 0-5.302-2.368-5.302-5.3v-5.3h5.301zm0-2.65c-2.931 0-5.3-2.37-5.3-5.301s2.369-5.3 5.3-5.3h13.292c2.932 0 5.301 2.369 5.301 5.3 0 2.932-2.37 5.3-5.3 5.3H32.165z"/></g></svg>;
     case 'integrations/stackdriver': return <svg viewBox="0 0 65 57" fill="#fff" stroke="#000" stroke-linecap="round" stroke-linejoin="round" font-family="Roboto" font-size="14" text-anchor="middle" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><use xlinkHref="#a" x=".5" y=".5"/><symbol id="a" overflow="visible"><g stroke="none"><path d="m47.83 55.172-16-29.834-15.984 29.84z" fill="#009245"/><path d="m31.83 27.617-16 27.565L0 27.617z" fill="#006837"/><path d="M0 27.627 15.97.01h31.942L31.905 27.627z" fill="#39b54a"/><path d="M47.83 55.172 31.904 27.618 47.91 0 64 27.585z" fill="#8cc63f"/></g></symbol></svg>;
     case 'integrations/sumologic-text': return <svg viewBox="0 0 577 107.3"  width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M118.3 23.8v60.4h-14.1v-6.4C101 83 95.1 86 86.5 86c-14.3 0-21.4-7.4-21.4-19.2v-43h15.4v38.9c0 6.3 3.4 10 10 10 7.7 0 12.4-4.4 12.4-12.5V23.8h15.4zm100 18.2v42.2h-15.4V46.6c0-7.2-2.9-11.6-9.6-11.6s-10.6 5-10.6 12v37.2h-15.4V46.6c0-7.7-3.2-11.6-9.6-11.6-6.8 0-10.6 5-10.6 12v37.2h-15.4V23.8H146v6.7c3.5-5.8 9.3-8.7 17.2-8.7 7.7 0 13.5 3.2 16.8 8.9 4.1-5.9 10.2-8.9 18.1-8.9 12.9 0 20.2 7.7 20.2 20.2zm123.6 42.2h-15.4V.2h15.4v84zm167 0h-15.4V23.8h15.4v60.4zm-15.7-69.5h15.9V0h-15.9v14.7zm73.4 48.9c-6.3 6.7-10.6 9.3-16.4 9.3-6.9 0-11.8-4-14-10.2V45.1c2.3-6.3 7.2-10.3 14.2-10.3 5.1 0 9.2 1.8 15.7 7.9l9.6-9.5c-7.7-8.4-15.2-11.5-25.3-11.5-14.1 0-25 7.4-29.3 19.8v24.8C525.3 78.7 536 86 550 86c10.9 0 18.4-3.6 26.8-14l-10.2-8.4zM31.7 47c-4.2-.9-7.2-1.7-8.9-2.1-2.1-.6-3.7-1.4-4.5-2.5v-4.6c1.4-2.2 4.8-3.6 9.5-3.6 6.5 0 11 1.5 18.1 7.1l8.3-10c-8.4-7-15.6-9.5-26-9.5-12 0-20.3 4.9-23.6 11.9v15.2c2.6 5.1 8.6 8 20.6 10.6 4.3 1 7.2 1.7 8.9 2 2.2.7 4.2 1.6 5.3 3.2V70c-1.5 2.4-5.1 3.7-9.8 3.7-3.4.1-6.7-.6-9.8-1.9-3-1.2-6.5-3.5-10.9-7.1L0 74.6C9.6 83.1 17.7 86 29.2 86c12.3 0 21-4.7 24.3-12.2V58.5C50.7 52.8 44 49.8 31.7 47zm227-25.3c-13.9 0-24.8 7.5-29.3 19.5v25.4c4.4 12 15.4 19.5 29.3 19.5s24.7-7.5 29.1-19.4V41.1c-4.5-11.9-15.4-19.4-29.1-19.4zm14.2 41.1c-2.4 6.4-7.5 10.2-14.3 10.2-6.7 0-12-3.8-14.4-10.2V45c2.4-6.4 7.5-10.3 14.4-10.3 6.8 0 11.8 3.9 14.2 10.3l.1 17.8zm110.2-41.1c-13.9 0-24.8 7.5-29.3 19.5v25.4c4.5 12 15.4 19.5 29.3 19.5s24.7-7.5 29.1-19.4V41.1c-4.4-11.9-15.3-19.4-29.1-19.4zm14.2 41.1c-2.4 6.4-7.5 10.2-14.2 10.2s-12-3.8-14.4-10.2V45c2.4-6.4 7.5-10.3 14.4-10.3s11.8 3.9 14.2 10.3v17.8zm68.5-39v6.7c-3.9-5.8-10-8.7-18.4-8.7-11.4 0-20.6 7-24.6 18.1v24.9c3.9 11.1 13.1 18 24.6 18 7.7 0 13.5-2.6 17.6-7.7v4.8c0 10-5.8 14.7-14.8 14.7-6.7 0-12.2-2-21-7.2l-7.5 11.1c8.5 5.7 18.5 8.8 28.7 8.9 17 0 29.5-9.1 29.5-26.1V23.8h-14.1zm-1.9 36.7c-2.3 5.7-7.1 9.3-13.1 9.3s-10.8-3.5-13.1-9.3V44c2.3-5.7 7-9.2 13.1-9.2s10.8 3.5 13.1 9.2v16.5z"/></svg>;
@@ -284,6 +287,7 @@ const SVG = (props: Props) => {
     case 'os/ubuntu': return <svg viewBox="0 0 568 580" width={ `${ width }px` } height={ `${ height }px` } ><path d="M198.69 283.338c0-41.261 19.314-77.993 49.31-101.64L202.089 108c-38.477 27.715-67.43 67.828-81.089 114.522 21.383 13.802 35.564 37.92 35.564 65.33 0 26.439-13.107 49.748-33.226 63.778 14.686 44.23 43.304 82.093 80.634 108.37l42.698-76.16c-29.256-23.64-47.98-59.881-47.98-100.502Zm23 0c0 32.53 14.667 62.598 39.435 82.611l15.102 12.202-64.655 115.325-20.839-14.668c-41.688-29.345-73.111-71.404-89.223-119.93l-5.41-16.294 14.082-9.82c14.567-10.158 23.382-26.726 23.382-44.911a54.648 54.648 0 0 0-25.037-46.007l-14.42-9.309 4.818-16.473c14.962-51.146 46.69-95.731 89.721-126.727l19.958-14.376 69.805 112.051-16.17 12.747c-25.422 20.042-40.55 50.544-40.55 83.579ZM135 287.992C135 257.085 109.9 232 78.998 232 48.082 232 23 257.085 23 287.992 23 318.915 48.082 344 78.998 344 109.9 344 135 318.914 135 287.992Zm23 0C158 331.61 122.607 367 78.998 367 35.378 367 0 331.616 0 287.992 0 244.38 35.382 209 78.998 209 122.604 209 158 244.385 158 287.992ZM448.475 423.01c12.974 0 25.189 3.172 35.922 8.805 33.43-35.213 55.03-81.675 58.603-133.14L456.359 297c-6.671 64.946-61.569 115.542-128.292 115.542-18.468 0-36.093-3.883-51.998-10.905L233 476.947C261.712 491.067 293.943 499 328.066 499c14.725 0 29.167-1.49 43.083-4.328 2.968-40.054 36.448-71.662 77.326-71.662Zm0 23c-28.6 0-52.294 22.083-54.39 50.362l-1.286 17.357-17.054 3.479a238.657 238.657 0 0 1-47.68 4.792c-36.941 0-72.7-8.423-105.215-24.413l-21.97-10.805 65.514-114.558 18.964 8.372c13.293 5.87 27.78 8.946 42.709 8.946 54.46 0 99.898-41.208 105.412-94.892l2.163-21.055 131.977 2.553-1.674 24.12c-3.868 55.712-26.985 107.48-64.868 147.382l-11.97 12.61-15.397-8.079c-7.694-4.037-16.27-6.17-25.235-6.17ZM504 501.01c0-30.94-25.06-56.009-55.99-56.009-30.932 0-56.01 25.069-56.01 56.009C392 531.925 417.078 557 448.01 557c30.93 0 55.99-25.075 55.99-55.991Zm23 0C527 544.632 491.639 580 448.01 580c-43.631 0-79.01-35.37-79.01-78.991 0-43.64 35.373-79.009 79.01-79.009 43.634 0 78.99 35.368 78.99 79.009Zm-36.536-358.411c-12.64 8.92-28.108 14.2-44.81 14.2-42.903 0-77.64-34.631-77.64-77.364 0-2.27.102-4.465.27-6.668C355.243 70.277 341.765 69 327.997 69c-34.484 0-67.095 8.089-95.996 22.414l42.87 75.243a129.408 129.408 0 0 1 53.126-11.374c66.218 0 120.796 49.703 128.254 113.717l86.75-2.64c-3.83-47.204-23.013-90.083-52.536-123.762Zm17.296-15.162c33.462 38.174 54.015 85.93 58.165 137.064l1.956 24.114-132.034 4.017-2.443-20.97c-6.169-52.952-51.397-93.378-105.408-93.378-15.237 0-30.037 3.22-43.705 9.357l-19.061 8.558-65.277-114.57 21.833-10.822C254.527 54.578 290.693 46 327.996 46c15.139 0 30.063 1.4 44.6 4.174l20.193 3.853-1.571 20.497a63.634 63.634 0 0 0-.204 4.91c0 30.019 24.428 54.364 54.64 54.364 11.476 0 22.388-3.527 31.548-9.991l16.912-11.937 13.646 15.566ZM501 79.005C501 48.079 475.985 23 445.016 23 414.08 23 388.999 48.08 389 79.005 389 109.929 414.082 135 445.017 135 475.987 135 501 109.929 501 79.005Zm23 0c0 43.64-35.325 78.995-78.983 78.995C401.38 158 366 122.633 366 79.006 365.998 35.376 401.38 0 445.016 0 488.674 0 524 35.363 524 79.005Z"/></svg>;
     case 'os/windows': return <svg viewBox="0 0 523 533" width={ `${ width }px` } height={ `${ height }px` } ><path d="M28 257h192V71L28 98.169V257ZM0 285V73.852l248-35.093V285H0Zm28 149.818L220 462V278H28v156.818ZM0 459.133V250h248v244.243L0 459.133Zm240 5.263L495 500V278H240v186.396Zm-28 24.362V250h311v282.181l-311-43.423ZM240 68.43V256h255V33L240 68.43ZM212 44.05 523 .841V284H212V44.051Z"/></svg>;
     case 'os': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm0-1A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm-.348-6.563c0 .696-.218 1.272-.654 1.729-.436.457-1.002.686-1.697.686-.683 0-1.237-.229-1.662-.686C3.213 9.709 3 9.133 3 8.437V7.415c0-.693.213-1.268.639-1.726C4.064 5.229 4.617 5 5.297 5c.695 0 1.262.23 1.7.688.437.458.655 1.033.655 1.726v1.024Zm-.945-1.03c0-.475-.127-.864-.38-1.169-.255-.304-.598-.457-1.03-.457-.417 0-.746.153-.988.457-.243.305-.364.694-.364 1.168v1.032c0 .479.121.871.364 1.177.242.306.573.46.992.46.435 0 .778-.153 1.03-.458.25-.305.376-.698.376-1.18v-1.03Zm5.055 1.902a.732.732 0 0 0-.264-.582c-.176-.151-.486-.287-.932-.407-.635-.166-1.124-.387-1.466-.662a1.318 1.318 0 0 1-.514-1.08c0-.458.19-.836.568-1.133.38-.297.868-.445 1.467-.445.625 0 1.127.168 1.506.504.379.336.562.74.549 1.21l-.008.024h-.91a.916.916 0 0 0-.297-.709c-.198-.18-.48-.271-.848-.271-.346 0-.612.075-.799.226a.72.72 0 0 0-.279.586c0 .216.101.396.303.54.202.143.536.278 1.002.406.612.164 1.077.39 1.394.68.318.288.477.657.477 1.105 0 .474-.19.85-.568 1.13-.38.28-.877.42-1.495.42-.593 0-1.114-.156-1.562-.47a1.447 1.447 0 0 1-.652-1.291l.007-.024h.914c0 .347.12.605.36.776.24.17.55.256.933.256.352 0 .625-.071.82-.213a.676.676 0 0 0 .294-.576Z"/></svg>;
+    case 'pause-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"/></svg>;
     case 'pause': return <svg class="bi bi-pause" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"/></svg>;
     case 'pdf-download': return <svg viewBox="0 0 19 19" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.094 5.249a.594.594 0 0 0-1.188 0v4.504l-1.36-1.362a.595.595 0 0 0-.841.84l2.375 2.376a.596.596 0 0 0 .84 0l2.375-2.375a.595.595 0 0 0-.84-.841l-1.361 1.362V5.249Z"/><path d="M16.625 16.625V5.344L11.281 0H4.75a2.375 2.375 0 0 0-2.375 2.375v14.25A2.375 2.375 0 0 0 4.75 19h9.5a2.375 2.375 0 0 0 2.375-2.375ZM11.281 3.562a1.781 1.781 0 0 0 1.781 1.782h2.376v11.281a1.188 1.188 0 0 1-1.188 1.188h-9.5a1.187 1.187 0 0 1-1.188-1.188V2.375A1.188 1.188 0 0 1 4.75 1.187h6.531v2.375Z"/><path clip-rule="evenodd" d="M15.58 13.49H3.42v4.37h1.789v-3.512H6.61c.282 0 .524.051.726.154.205.103.361.245.47.425.11.178.165.383.165.613 0 .226-.055.424-.164.593-.11.169-.266.3-.47.396-.203.093-.445.14-.727.14h-.554v1.191h2.37v-3.512h1.13c.238 0 .455.041.653.123a1.537 1.537 0 0 1 .854.88c.08.205.12.431.12.68v.148c0 .247-.04.474-.12.68a1.512 1.512 0 0 1-.849.88c-.193.08-.404.12-.635.121h2.046v-3.512h2.35v.654h-1.503v.808h1.365v.651h-1.365v1.399h3.108v-4.37Zm-9.524 1.512v1.013h.554c.12 0 .216-.02.29-.06a.367.367 0 0 0 .161-.167.547.547 0 0 0 .054-.244.668.668 0 0 0-.054-.267.431.431 0 0 0-.161-.198.496.496 0 0 0-.29-.077h-.554Zm3.512 2.207h-.295v-2.207h.283c.123 0 .233.021.328.065a.604.604 0 0 1 .24.195.88.88 0 0 1 .146.321c.033.127.05.275.05.444v.152c0 .225-.03.415-.089.569a.707.707 0 0 1-.256.345.696.696 0 0 1-.407.116Z"/></svg>;
     case 'pencil-stop': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><g clip-path="url(#a)"><path clip-rule="evenodd" d="M12.5-.207 16.207 3.5 5.781 13.926l-6.179 2.472 2.472-6.179L12.5-.207ZM2.926 10.78l-1.529 3.821 3.822-1.528L14.793 3.5 12.5 1.207l-9.574 9.574Z"/><path d="M9 4.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM3.012 2.613a.282.282 0 0 0-.399.399L4.103 4.5l-1.49 1.488a.282.282 0 0 0 .399.399L4.5 4.897l1.488 1.49a.282.282 0 0 0 .399-.399L4.897 4.5l1.49-1.488a.282.282 0 0 0-.399-.399L4.5 4.103l-1.488-1.49Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>;
@@ -295,6 +299,7 @@ const SVG = (props: Props) => {
     case 'pin-fill': return <svg class="bi bi-pin-fill" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354z"/></svg>;
     case 'play-circle-light': return <svg viewBox="0 0 52 52" width={ `${ width }px` } height={ `${ height }px` } ><path d="M26 0A26 26 0 1 1 0 26 26 26 0 0 1 26 0Zm0 1.58A24.42 24.42 0 1 0 50.42 26 24.44 24.44 0 0 0 26 1.58Zm10.3 22c2.27 1.36 2.27 3.6 0 5l-13.16 7.79c-2.28 1.36-4.14.44-4.14-2v-16.7c0-2.49 1.86-3.4 4.13-2ZM35.37 27a1 1 0 0 0 0-1.85l-12.86-7.91c-.83-.51-1.51-.17-1.51.75V34c0 .93.68 1.27 1.52.76Z"/></svg>;
     case 'play-circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 504c137 0 248-111 248-248S393 8 256 8 8 119 8 256s111 248 248 248zM40 256c0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216zm331.7-18-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM192 335.8V176.9c0-4.7 5.1-7.6 9.1-5.1l134.5 81.7c3.9 2.4 3.8 8.1-.1 10.3L201 341c-4 2.3-9-.6-9-5.2z"/></svg>;
+    case 'play-fill-new': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/></svg>;
     case 'play-fill': return <svg viewBox="0 0 52 52" width={ `${ width }px` } height={ `${ height }px` } ><path d="M26 0A26 26 0 1 1 0 26 26 26 0 0 1 26 0Zm0 1.58A24.42 24.42 0 1 0 50.42 26 24.42 24.42 0 0 0 26 1.58Zm10.3 22c2.27 1.36 2.27 3.6 0 5l-13.16 7.79c-2.28 1.36-4.14.44-4.14-2v-16.7c0-2.49 1.86-3.4 4.13-2Z"/></svg>;
     case 'play-hover': return <svg width={ `${ width }px` } height={ `${ height }px` } ><g clip-path="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 class="bi bi-play" 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>;
diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css
index 1d53dea64..8fa85566e 100644
--- a/frontend/app/styles/colors-autogen.css
+++ b/frontend/app/styles/colors-autogen.css
@@ -5,6 +5,7 @@
 .fill-gray-light-shade { fill: $gray-light-shade }
 .fill-gray-lightest { fill: $gray-lightest }
 .fill-gray-light { fill: $gray-light }
+.fill-gray-bg { fill: $gray-bg }
 .fill-gray-medium { fill: $gray-medium }
 .fill-gray-dark { fill: $gray-dark }
 .fill-gray-darkest { fill: $gray-darkest }
@@ -26,8 +27,10 @@
 .fill-blue { fill: $blue }
 .fill-blue2 { fill: $blue2 }
 .fill-active-blue { fill: $active-blue }
+.fill-bg-blue { fill: $bg-blue }
 .fill-active-blue-border { fill: $active-blue-border }
 .fill-pink { fill: $pink }
+.fill-light-blue-bg { fill: $light-blue-bg }
 .fill-white { fill: $white }
 .fill-borderColor { fill: $borderColor }
 
@@ -36,6 +39,7 @@
 .color-gray-light-shade { color: $gray-light-shade }
 .color-gray-lightest { color: $gray-lightest }
 .color-gray-light { color: $gray-light }
+.color-gray-bg { color: $gray-bg }
 .color-gray-medium { color: $gray-medium }
 .color-gray-dark { color: $gray-dark }
 .color-gray-darkest { color: $gray-darkest }
@@ -57,8 +61,10 @@
 .color-blue { color: $blue }
 .color-blue2 { color: $blue2 }
 .color-active-blue { color: $active-blue }
+.color-bg-blue { color: $bg-blue }
 .color-active-blue-border { color: $active-blue-border }
 .color-pink { color: $pink }
+.color-light-blue-bg { color: $light-blue-bg }
 .color-white { color: $white }
 .color-borderColor { color: $borderColor }
 
@@ -67,6 +73,7 @@
 .hover-gray-light-shade:hover { color: $gray-light-shade }
 .hover-gray-lightest:hover { color: $gray-lightest }
 .hover-gray-light:hover { color: $gray-light }
+.hover-gray-bg:hover { color: $gray-bg }
 .hover-gray-medium:hover { color: $gray-medium }
 .hover-gray-dark:hover { color: $gray-dark }
 .hover-gray-darkest:hover { color: $gray-darkest }
@@ -88,8 +95,10 @@
 .hover-blue:hover { color: $blue }
 .hover-blue2:hover { color: $blue2 }
 .hover-active-blue:hover { color: $active-blue }
+.hover-bg-blue:hover { color: $bg-blue }
 .hover-active-blue-border:hover { color: $active-blue-border }
 .hover-pink:hover { color: $pink }
+.hover-light-blue-bg:hover { color: $light-blue-bg }
 .hover-white:hover { color: $white }
 .hover-borderColor:hover { color: $borderColor }
 
@@ -97,6 +106,7 @@
 .border-gray-light-shade { border-color: $gray-light-shade }
 .border-gray-lightest { border-color: $gray-lightest }
 .border-gray-light { border-color: $gray-light }
+.border-gray-bg { border-color: $gray-bg }
 .border-gray-medium { border-color: $gray-medium }
 .border-gray-dark { border-color: $gray-dark }
 .border-gray-darkest { border-color: $gray-darkest }
@@ -118,7 +128,9 @@
 .border-blue { border-color: $blue }
 .border-blue2 { border-color: $blue2 }
 .border-active-blue { border-color: $active-blue }
+.border-bg-blue { border-color: $bg-blue }
 .border-active-blue-border { border-color: $active-blue-border }
 .border-pink { border-color: $pink }
+.border-light-blue-bg { border-color: $light-blue-bg }
 .border-white { border-color: $white }
 .border-borderColor { border-color: $borderColor }