diff --git a/jest.config.js b/jest.config.js
index ed3d33f3aa1..6f14ed6b306 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -23,6 +23,7 @@ module.exports = {
     '\\.(css|less)$': '<rootDir>/test_utils/__mocks__/styleMock.js',
     '^browser-styles(.*)$': '<rootDir>/src/browser/styles$1',
     '^browser-components(.*)$': '<rootDir>/src/browser/components$1',
+    '^browser-services(.*)$': '<rootDir>/src/browser/services$1',
     '^browser-hooks(.*)$': '<rootDir>/src/browser/hooks$1',
     'worker-loader': '<rootDir>/test_utils/__mocks__/workerLoaderMock.js',
     'project-root(.*)$': '<rootDir>$1',
diff --git a/src/browser/AppInit.tsx b/src/browser/AppInit.tsx
index 035f056da19..777e5b45840 100644
--- a/src/browser/AppInit.tsx
+++ b/src/browser/AppInit.tsx
@@ -25,7 +25,8 @@ import {
   combineReducers,
   applyMiddleware,
   compose,
-  AnyAction
+  AnyAction,
+  StoreEnhancer
 } from 'redux'
 import { Provider } from 'react-redux'
 import {
@@ -42,7 +43,9 @@ import * as Sentry from '@sentry/react'
 import { Integrations } from '@sentry/tracing'
 import { CaptureConsole } from '@sentry/integrations'
 
+import { CannySDK } from 'browser-services/canny'
 import { createReduxMiddleware, getAll, applyKeys } from 'services/localstorage'
+import { GlobalState } from 'shared/globalState'
 import { APP_START } from 'shared/modules/app/appDuck'
 import { detectRuntimeEnv } from 'services/utils'
 import { NEO4J_CLOUD_DOMAINS } from 'shared/modules/settings/settingsDuck'
@@ -70,13 +73,20 @@ const suberMiddleware = createSuberReduxMiddleware(bus)
 const epicMiddleware = createEpicMiddleware(epics)
 const localStorageMiddleware = createReduxMiddleware()
 
-const reducer = combineReducers({ ...(reducers as any) })
+const reducer = combineReducers<GlobalState>({ ...(reducers as any) })
 
-const enhancer = compose(
+declare global {
+  interface Window {
+    __REDUX_DEVTOOLS_EXTENSION__?: (
+      ...args: unknown[]
+    ) => StoreEnhancer<unknown>
+  }
+}
+
+const enhancer: StoreEnhancer<GlobalState> = compose(
   applyMiddleware(suberMiddleware, epicMiddleware, localStorageMiddleware),
-  process.env.NODE_ENV !== 'production' &&
-    (window as any).__REDUX_DEVTOOLS_EXTENSION__
-    ? (window as any).__REDUX_DEVTOOLS_EXTENSION__({
+  process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION__
+    ? window.__REDUX_DEVTOOLS_EXTENSION__({
         actionSanitizer: (action: AnyAction) =>
           action.type === 'requests/UPDATED'
             ? {
@@ -88,37 +98,35 @@ const enhancer = compose(
                 }
               }
             : action,
-        stateSanitizer: (state: any) => ({
+        stateSanitizer: (state: GlobalState) => ({
           ...state,
           requests: Object.assign(
             {},
-            ...Object.entries(state.requests).map(
-              ([id, request]: [string, any]) => ({
-                [id]: {
-                  ...request,
-                  result: {
-                    ...request.result,
-                    records:
-                      'REQUEST RECORDS OMITTED FROM REDUX DEVTOOLS TO PREVENT OUT OF MEMORY ERROR'
-                  }
+            ...Object.entries(state.requests).map(([id, request]) => ({
+              [id]: {
+                ...request,
+                result: {
+                  ...request.result,
+                  records:
+                    'REQUEST RECORDS OMITTED FROM REDUX DEVTOOLS TO PREVENT OUT OF MEMORY ERROR'
                 }
-              })
-            )
+              }
+            }))
           )
         })
       })
-    : (f: any) => f
+    : (f: unknown) => f
 )
 
-const store: any = createStore(
+const store = createStore<GlobalState>(
   reducer,
-  getAll(), // rehydrate from local storage on app start
+  getAll() as GlobalState, // rehydrate from local storage on app start
   enhancer
 )
 
 // Send everything from suber into Redux
 bus.applyMiddleware(
-  (_, origin) => (channel: any, message: any, source: any) => {
+  (_, origin) => (channel: string, message: AnyAction, source: string) => {
     // No loop-backs
     if (source === 'redux') return
     // Send to Redux with the channel as the action type
@@ -126,14 +134,14 @@ bus.applyMiddleware(
   }
 )
 
-function scrubQueryparams(event: Sentry.Event): Sentry.Event {
+function scrubQueryParams(event: Sentry.Event): Sentry.Event {
   if (event.request?.query_string) {
     event.request.query_string = ''
   }
   return event
 }
 
-export function setupSentry() {
+export function setupSentry(): void {
   if (process.env.NODE_ENV === 'production') {
     Sentry.init({
       dsn:
@@ -146,7 +154,7 @@ export function setupSentry() {
       tracesSampleRate: 0.2,
       beforeSend: event =>
         allowOutgoingConnections(store.getState())
-          ? scrubQueryparams(event)
+          ? scrubQueryParams(event)
           : null,
       environment: 'unset'
     })
@@ -166,7 +174,7 @@ export function setupSentry() {
           }))
         )
       })
-      .catch(() => {})
+      .catch(() => undefined)
   }
 }
 
@@ -231,9 +239,17 @@ const client = new ApolloClient({
   link: uploadLink
 })
 
-const AppInit = () => {
+CannySDK.init()
+  .then(() => {
+    window.CannyIsLoaded = true
+  })
+  .catch(() => {
+    window.CannyIsLoaded = false
+  })
+
+const AppInit = (): JSX.Element => {
   return (
-    <Provider store={store}>
+    <Provider store={store as any}>
       <BusProvider bus={bus}>
         <ApolloProvider client={client}>
           <App />
diff --git a/src/browser/components/TabNavigation/Navigation.tsx b/src/browser/components/TabNavigation/Navigation.tsx
index 5f28555ae08..ead93c35fc4 100644
--- a/src/browser/components/TabNavigation/Navigation.tsx
+++ b/src/browser/components/TabNavigation/Navigation.tsx
@@ -21,8 +21,10 @@
 import React, { Component } from 'react'
 import {
   StyledNavigationButton,
-  NavigationButtonContainer
+  NavigationButtonContainer,
+  StyledCannyBadgeAnchor
 } from 'browser-components/buttons'
+import { cannyOptions } from 'browser-services/canny'
 import {
   StyledSidebar,
   StyledDrawer,
@@ -36,26 +38,61 @@ const Closed = 'CLOSED'
 const Open = 'OPEN'
 const Opening = 'OPENING'
 
-type State = any
+export interface NavItem {
+  name: string
+  title: string
+  icon: (isOpen: boolean) => JSX.Element
+  content: any
+  enableCannyBadge?: boolean
+}
+
+interface NavigationProps {
+  openDrawer: string
+  onNavClick: (name: string) => void
+  topNavItems: NavItem[]
+  bottomNavItems?: NavItem[]
+}
+
+type TransitionState =
+  | typeof Closing
+  | typeof Closed
+  | typeof Open
+  | typeof Opening
+
+interface NavigationState {
+  transitionState?: TransitionState
+  drawerContent?: null | string
+}
 
-class Navigation extends Component<any, State> {
-  _onTransitionEnd: any
-  transitionState: any
-  state: any = {}
-  constructor(props: {}) {
+class Navigation extends Component<NavigationProps, NavigationState> {
+  _onTransitionEnd: () => void
+  transitionState?: TransitionState
+  state: NavigationState = {}
+  constructor(props: NavigationProps) {
     super(props)
     this._onTransitionEnd = this.onTransitionEnd.bind(this)
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.setState({
       transitionState: Closed
     })
+
+    window.Canny && window.Canny('initChangelog', cannyOptions)
+  }
+
+  componentWillUnmount(): void {
+    if (window.Canny) {
+      window.Canny('closeChangelog')
+    }
   }
 
-  componentDidUpdate(prevProps: any, prevState: State) {
+  componentDidUpdate(
+    prevProps: NavigationProps,
+    prevState: NavigationState
+  ): void {
     if (prevProps.openDrawer !== this.props.openDrawer) {
-      const newState: any = {}
+      const newState: NavigationState = {}
       if (this.props.openDrawer) {
         newState.drawerContent = this.props.openDrawer
         if (
@@ -77,7 +114,7 @@ class Navigation extends Component<any, State> {
     }
   }
 
-  onTransitionEnd() {
+  onTransitionEnd(): void {
     if (this.transitionState === Closing) {
       this.setState({
         transitionState: Closed,
@@ -91,32 +128,37 @@ class Navigation extends Component<any, State> {
     }
   }
 
-  render() {
+  render(): JSX.Element {
     const { onNavClick, topNavItems, bottomNavItems = [] } = this.props
 
-    const buildNavList = (list: any, selected: any) =>
-      list.map((item: any) => {
+    const buildNavList = (list: NavItem[], selected?: null | string) =>
+      list.map(item => {
         const isOpen = item.name.toLowerCase() === selected
         return (
-          <NavigationButtonContainer
-            title={item.title}
-            data-testid={'drawer' + item.name}
-            key={item.name}
-            onClick={() => onNavClick(item.name.toLowerCase())}
-            isOpen={isOpen}
-          >
-            <StyledNavigationButton name={item.name}>
-              {item.icon(isOpen)}
-            </StyledNavigationButton>
-          </NavigationButtonContainer>
+          <>
+            {item.enableCannyBadge ? (
+              <StyledCannyBadgeAnchor data-canny-changelog />
+            ) : null}
+            <NavigationButtonContainer
+              title={item.title}
+              data-testid={'drawer' + item.name}
+              key={item.name}
+              onClick={() => onNavClick(item.name.toLowerCase())}
+              isOpen={isOpen}
+            >
+              <StyledNavigationButton name={item.name}>
+                {item.icon(isOpen)}
+              </StyledNavigationButton>
+            </NavigationButtonContainer>
+          </>
         )
       })
 
-    const getContentToShow = (openDrawer: any) => {
+    const getContentToShow = (openDrawer?: null | string) => {
       if (openDrawer) {
         const filteredList = topNavItems
           .concat(bottomNavItems)
-          .filter((item: any) => item.name.toLowerCase() === openDrawer)
+          .filter(item => item.name.toLowerCase() === openDrawer)
         const TabContent = filteredList[0].content
         return <TabContent />
       }
diff --git a/src/browser/components/buttons/index.tsx b/src/browser/components/buttons/index.tsx
index 6440d67208c..7d680864752 100644
--- a/src/browser/components/buttons/index.tsx
+++ b/src/browser/components/buttons/index.tsx
@@ -28,11 +28,11 @@ import { hexToRgba } from '../../styles/utils'
 
 import styles from './style.css'
 
-export const CloseButton = (props: any) => {
+export const CloseButton = (props: any): JSX.Element => {
   return <button {...props}>×</button>
 }
 
-export const EditorButton = (props: any) => {
+export const EditorButton = (props: any): JSX.Element => {
   const { icon, title, color, width, onClick, ...rest } = props
   const overrideColor = { ...(color ? { color } : {}) }
   return (
@@ -77,6 +77,24 @@ const BaseButton: any = styled.span`
   }
 `
 
+export const StyledCannyBadgeAnchor = styled.div`
+  pointer-events: none;
+
+  .Canny_BadgeContainer {
+    pointer-events: none;
+
+    .Canny_Badge {
+      pointer-events: none;
+      top: 10px;
+      right: 10px;
+      border-radius: 10px;
+      background-color: red;
+      padding: 4px;
+      border: 1px solid red;
+    }
+  }
+`
+
 export const StyledNavigationButton = styled.button`
   background: transparent;
   border: 0;
@@ -229,7 +247,7 @@ interface ButtonTypeProps {
   className?: any
 }
 
-export const FormButton = (props: ButtonTypeProps) => {
+export const FormButton = (props: ButtonTypeProps): JSX.Element => {
   const { icon, label, children, ...rest } = props
   const ButtonType =
     buttonTypes[props.buttonType as string] || buttonTypes.primary
@@ -262,7 +280,7 @@ export const FormButton = (props: ButtonTypeProps) => {
   )
 }
 
-export const CypherFrameButton = (props: any) => {
+export const CypherFrameButton = (props: any): JSX.Element => {
   const { selected, ...rest } = props
   return selected ? (
     <StyledSelectedCypherFrameButton {...rest} />
@@ -296,7 +314,7 @@ const StyledSelectedCypherFrameButton = styled(StyledCypherFrameButton)`
   color: ${props => props.theme.secondaryButtonTextHover};
   fill: ${props => props.theme.secondaryButtonTextHover};
 `
-export const FrameButton = (props: any) => {
+export const FrameButton = (props: any): JSX.Element => {
   const { pressed, children, ...rest } = props
   return pressed ? (
     <StyledFrameButtonPressed {...rest}>{children}</StyledFrameButtonPressed>
@@ -361,7 +379,7 @@ export const FrameButtonAChild = styled(DefaultA)`
   }
 `
 
-export const ActionButton = (props: any) => {
+export const ActionButton = (props: any): JSX.Element => {
   const { className, ...rest } = props
   return <button className={className + ' ' + styles.action} {...rest} />
 }
@@ -446,7 +464,7 @@ const BaseCarouselButton = styled.button`
   }
 `
 
-export const CarouselButton = (props: any) => {
+export const CarouselButton = (props: any): JSX.Element => {
   const { children, ...rest } = props
   return <BaseCarouselButton {...rest}>{children}</BaseCarouselButton>
 }
diff --git a/src/browser/components/icons/IconContainer.tsx b/src/browser/components/icons/IconContainer.tsx
index 0c3c649a547..ea36f07df98 100644
--- a/src/browser/components/icons/IconContainer.tsx
+++ b/src/browser/components/icons/IconContainer.tsx
@@ -18,8 +18,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { Component } from 'react'
-import styled from 'styled-components'
+import React, { ReactNode } from 'react'
+import styled, {
+  CSSProperties,
+  FlattenSimpleInterpolation
+} from 'styled-components'
 import SVGInline from 'react-svg-inline'
 
 const StyledIconWrapper = ({
@@ -28,7 +31,10 @@ const StyledIconWrapper = ({
   isOpen,
   children,
   ...rest
-}: any) => {
+}: Exclude<
+  IconContainerProps,
+  'text' | 'regulateSize' | 'icon' | 'width' | 'title'
+>) => {
   const I = styled.i`
     ${isOpen ? activeStyle : inactiveStyle};
     &:hover {
@@ -45,43 +51,47 @@ const StyledText = styled.div`
   padding: 0;
 `
 
-type IconContainerState = any
-
-export class IconContainer extends Component<any, IconContainerState> {
-  constructor(props: {}) {
-    super(props)
-    this.state = {
-      mouseover: false
-    }
-  }
+type IconContainerProps = {
+  activeStyle?: string | FlattenSimpleInterpolation
+  icon?: string
+  inactiveStyle?: string
+  isOpen?: boolean
+  regulateSize?: 1 | 2
+  text?: string
+  title?: string
+  width?: number
+  suppressIconStyles?: true | string
+  className?: string
+  style?: CSSProperties
+  children?: ReactNode
+}
 
-  render() {
-    const { text, regulateSize, icon, width, title, ...rest } = this.props
+export const IconContainer = (props: IconContainerProps): JSX.Element => {
+  const { text, regulateSize, icon, width, title, ...rest } = props
 
-    const regulateSizeStyle = regulateSize
-      ? { fontSize: regulateSize + 'em' }
-      : null
+  const regulateSizeStyle = regulateSize
+    ? { fontSize: regulateSize + 'em' }
+    : undefined
 
-    const currentIcon = icon ? (
-      <StyledIconWrapper {...rest}>
-        <SVGInline
-          cleanup={['title']}
-          svg={icon}
-          accessibilityLabel={title}
-          width={width + 'px'}
-        />
-      </StyledIconWrapper>
-    ) : (
-      <StyledIconWrapper {...rest} style={regulateSizeStyle} />
-    )
+  const currentIcon = icon ? (
+    <StyledIconWrapper {...rest}>
+      <SVGInline
+        cleanup={['title']}
+        svg={icon}
+        accessibilityLabel={title}
+        width={width + 'px'}
+      />
+    </StyledIconWrapper>
+  ) : (
+    <StyledIconWrapper {...rest} style={regulateSizeStyle} />
+  )
 
-    return text ? (
-      <span>
-        {currentIcon}
-        <StyledText>{text}</StyledText>
-      </span>
-    ) : (
-      currentIcon
-    )
-  }
+  return text ? (
+    <span>
+      {currentIcon}
+      <StyledText>{text}</StyledText>
+    </span>
+  ) : (
+    currentIcon
+  )
 }
diff --git a/src/browser/components/icons/Icons.tsx b/src/browser/components/icons/Icons.tsx
index 47d532d8560..999ad7496f1 100644
--- a/src/browser/components/icons/Icons.tsx
+++ b/src/browser/components/icons/Icons.tsx
@@ -45,6 +45,8 @@ import save_favorite from 'icons/save_favorite.svg'
 import run_icon from 'icons/run_icon.svg'
 import stop_icon from 'icons/stop_icon.svg'
 import help from 'icons/help.svg'
+import cannyFeedback from 'icons/canny-feedback.svg'
+import cannyNotifications from 'icons/canny-changelog.svg'
 
 const inactive = `
   color: #797979;
@@ -108,7 +110,11 @@ const databaseConnectionStateStyles: {
   }
 }
 
-export const DatabaseIcon = (props: any) => {
+export const DatabaseIcon = (props: {
+  isOpen: boolean
+  connectionState: string
+  title: string
+}): JSX.Element => {
   const { connectionState, ...rest } = props
   return (
     <IconContainer
@@ -122,198 +128,234 @@ export const DatabaseIcon = (props: any) => {
   )
 }
 
-export const FavoritesIcon = (props: any) => (
+interface SidebarIconProps {
+  isOpen: boolean
+  title: string
+}
+
+export const FavoritesIcon = ({
+  isOpen,
+  title
+}: SidebarIconProps): JSX.Element => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={inactive}
     icon={ratingStar}
     width={28}
-    {...props}
+    isOpen={isOpen}
+    title={title}
   />
 )
-export const ProjectFilesIcon = (props: any) => (
+export const ProjectFilesIcon = ({
+  isOpen,
+  title
+}: SidebarIconProps): JSX.Element => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={inactive}
     icon={file}
     width={28}
-    {...props}
+    isOpen={isOpen}
+    title={title}
   />
 )
 
-export const DocumentsIcon = (props: any) => (
+export const DocumentsIcon = ({
+  isOpen,
+  title
+}: SidebarIconProps): JSX.Element => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={inactive}
     icon={help}
     width={28}
-    {...props}
+    isOpen={isOpen}
+    title={title}
   />
 )
 
-export const CloudIcon = (props: any) => (
-  <IconContainer
-    activeStyle={successGreen}
-    inactiveStyle={inactive}
-    icon={cloudCheck}
-    width={28}
-    {...props}
-  />
-)
-export const CloudDisconnectedIcon = (props: any) => (
-  <IconContainer
-    activeStyle={warningRed}
-    inactiveStyle={warningRed}
-    icon={cloudRemove}
-    width={28}
-    {...props}
-  />
-)
-export const CloudSyncIcon = (props: any) => {
-  const { connected, ...rest } = props
+export const CloudSyncIcon = ({
+  isOpen,
+  title,
+  connected
+}: SidebarIconProps & { connected: boolean }): JSX.Element => {
   return (
     <IconContainer
       activeStyle={connected ? successGreen : warningRed}
       inactiveStyle={connected ? inactive : warningRed}
       icon={connected ? cloudCheck : cloudRemove}
       width={28}
-      {...rest}
+      isOpen={isOpen}
+      title={title}
     />
   )
 }
 
-export const SettingsIcon = (props: any) => (
+export const SettingsIcon = ({
+  isOpen,
+  title
+}: SidebarIconProps): JSX.Element => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={inactive}
     icon={cog}
     width={28}
-    {...props}
+    isOpen={isOpen}
+    title={title}
   />
 )
-export const AboutIcon = (props: any) => (
+export const AboutIcon = ({ isOpen, title }: SidebarIconProps): JSX.Element => (
   <IconContainer
     activeStyle={credits}
     inactiveStyle={inactive}
     icon={neo4j}
     width={32}
-    {...props}
+    isOpen={isOpen}
+    title={title}
   />
 )
 
-export const SlidePreviousIcon = () => (
+export const SlidePreviousIcon = (): JSX.Element => (
   <IconContainer icon={arrowLeft1} width={20} />
 )
-export const SlideNextIcon = () => (
+export const SlideNextIcon = (): JSX.Element => (
   <IconContainer icon={arrowRight1} width={20} />
 )
-export const StackPreviousIcon = () => (
+export const StackPreviousIcon = (): JSX.Element => (
   <IconContainer icon={skipPrev} width={12} />
 )
-export const StackNextIcon = () => (
+export const StackNextIcon = (): JSX.Element => (
   <IconContainer
     icon={skipPrev}
     style={{ transform: 'rotate(180deg)' }}
     width={12}
   />
 )
-export const TableIcon = () => (
+export const TableIcon = (): JSX.Element => (
   <IconContainer icon={table01} text="Table" width={20} />
 )
-export const VisualizationIcon = () => (
+export const VisualizationIcon = (): JSX.Element => (
   <IconContainer icon={neo4j} text="Graph" width={20} />
 )
-export const AsciiIcon = () => (
+export const AsciiIcon = (): JSX.Element => (
   <IconContainer icon={Text201} text="Text" width={18} />
 )
-export const CodeIcon = () => (
+export const CodeIcon = (): JSX.Element => (
   <IconContainer icon={appWindowCode} text="Code" width={20} />
 )
-export const PlanIcon = () => (
+export const PlanIcon = (): JSX.Element => (
   <IconContainer className="sl-hierarchy" text="Plan" />
 )
-export const AlertIcon = () => (
+export const AlertIcon = (): JSX.Element => (
   <IconContainer className="sl-alert" text="Warn" />
 )
-export const ErrorIcon = () => (
+export const ErrorIcon = (): JSX.Element => (
   <IconContainer className="fa fa-file-text-o" text="Error" />
 )
 
-export const ZoomInIcon = (props: any) => (
+export const ZoomInIcon = ({
+  regulateSize
+}: {
+  regulateSize: 1 | 2
+}): JSX.Element => (
   <IconContainer
     activeStyle={inactive}
     inactiveStyle={inactive}
-    {...props}
+    regulateSize={regulateSize}
     className="sl-zoom-in"
   />
 )
-export const ZoomOutIcon = (props: any) => (
+export const ZoomOutIcon = ({
+  regulateSize
+}: {
+  regulateSize: 1 | 2
+}): JSX.Element => (
   <IconContainer
     activeStyle={inactive}
     inactiveStyle={inactive}
-    {...props}
+    regulateSize={regulateSize}
     className="sl-zoom-out"
   />
 )
 
-export const BinIcon = (props: any) => (
+export const BinIcon = (): JSX.Element => (
   <IconContainer
-    activeStyle={props.deleteAction ? warningRed : white}
-    inactiveStyle={props.deleteAction ? warningRed : white}
-    {...props}
+    activeStyle="white"
+    inactiveStyle="white"
+    suppressIconStyles="true"
     className="sl-bin"
   />
 )
 
-export const ExpandIcon = () => <IconContainer icon={expand01} width={12} />
-export const ContractIcon = () => <IconContainer icon={shrink} width={12} />
-export const RefreshIcon = () => (
+export const ExpandIcon = (): JSX.Element => (
+  <IconContainer icon={expand01} width={12} />
+)
+export const ContractIcon = (): JSX.Element => (
+  <IconContainer icon={shrink} width={12} />
+)
+export const RefreshIcon = (): JSX.Element => (
   <IconContainer icon={buttonRefreshArrow} width={12} />
 )
-export const RunIcon = () => <IconContainer icon={run_icon} width={12} />
-export const StopIcon = () => <IconContainer icon={stop_icon} width={12} />
+export const RunIcon = (): JSX.Element => (
+  <IconContainer icon={run_icon} width={12} />
+)
+export const StopIcon = (): JSX.Element => (
+  <IconContainer icon={stop_icon} width={12} />
+)
 
-export const CloseIcon = () => <IconContainer icon={close} width={12} />
-export const UpIcon = () => <IconContainer className="sl-chevron-up" />
-export const DownIcon = () => <IconContainer className="sl-chevron-down" />
-export const DoubleUpIcon = () => <IconContainer className="sl-double-up" />
-export const DoubleDownIcon = () => <IconContainer className="sl-double-down" />
-export const PinIcon = () => <IconContainer icon={pin} width={12} />
-export const SaveFavorite = () => (
+export const CloseIcon = (): JSX.Element => (
+  <IconContainer icon={close} width={12} />
+)
+export const UpIcon = (): JSX.Element => (
+  <IconContainer className="sl-chevron-up" />
+)
+export const DownIcon = (): JSX.Element => (
+  <IconContainer className="sl-chevron-down" />
+)
+export const DoubleUpIcon = (): JSX.Element => (
+  <IconContainer className="sl-double-up" />
+)
+export const DoubleDownIcon = (): JSX.Element => (
+  <IconContainer className="sl-double-down" />
+)
+export const PinIcon = (): JSX.Element => (
+  <IconContainer icon={pin} width={12} />
+)
+export const SaveFavorite = (): JSX.Element => (
   <IconContainer icon={save_favorite} width={12} />
 )
 
-export const MinusIcon = () => (
+export const MinusIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={blue}
     inactiveStyle={inactive}
     className="sl-minus-circle"
   />
 )
-export const RightArrowIcon = () => (
+export const RightArrowIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={blue}
     inactiveStyle={inactive}
     className="sl-arrow-circle-right"
   />
 )
-export const CancelIcon = () => (
+export const CancelIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={blue}
     inactiveStyle={inactive}
     className="sl-delete-circle"
   />
 )
-export const DownloadIcon = () => (
+export const DownloadIcon = (): JSX.Element => (
   <IconContainer icon={downloadBottom} width={12} />
 )
-export const ExpandMenuIcon = () => (
+export const ExpandMenuIcon = (): JSX.Element => (
   <IconContainer activeStyle={blue} className="fa fa-caret-left" />
 )
-export const CollapseMenuIcon = () => (
+export const CollapseMenuIcon = (): JSX.Element => (
   <IconContainer activeStyle={blue} className="fa fa-caret-down" />
 )
-export const PlayIcon = () => (
+export const PlayIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={lightBlue}
     inactiveStyle={blue}
@@ -321,53 +363,71 @@ export const PlayIcon = () => (
   />
 )
 
-export const PlainPlayIcon = () => (
+export const PlainPlayIcon = (): JSX.Element => (
   <IconContainer className="fa fa-play-circle" />
 )
-export const QuestionIcon = (props: any) => (
+export const QuestionIcon = ({ title }: { title: string }): JSX.Element => (
   <IconContainer
     activeStyle={lightBlue}
     inactiveStyle={blue}
-    {...props}
+    title={title}
     className="fa fa-question-circle-o"
   />
 )
-export const PlusIcon = () => (
+export const PlusIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={white}
     className="fa fa-plus"
   />
 )
-export const EditIcon = () => (
+export const EditIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={white}
     className="sl-pencil"
   />
 )
-export const Spinner = () => (
+export const Spinner = (): JSX.Element => (
   <IconContainer
     data-testid="spinner"
     className="fa fa-spinner fa-spin fa-2x"
   />
 )
-export const SmallSpinner = () => (
+export const SmallSpinner = (): JSX.Element => (
   <IconContainer className="fa fa-spinner fa-spin " />
 )
-export const SquareIcon = () => <IconContainer className="fa fa-square-o" />
-export const CheckedSquareIcon = () => (
+export const SquareIcon = (): JSX.Element => (
+  <IconContainer className="fa fa-square-o" />
+)
+export const CheckedSquareIcon = (): JSX.Element => (
   <IconContainer className="fa fa-check-square-o" />
 )
 
-export const ExclamationTriangleIcon = () => (
+export const ExclamationTriangleIcon = (): JSX.Element => (
   <IconContainer suppressIconStyles className="fa fa-exclamation-triangle" />
 )
 
-export const FireExtinguisherIcon = ({ title = 'Reset' }) => (
+export const FireExtinguisherIcon = ({
+  title = 'Reset'
+}: {
+  title: string
+}): JSX.Element => (
   <IconContainer className="fa fa-fire-extinguisher" title={title} />
 )
 
-export const SavedScriptsExpandMenuRightIcon = () => <Icon name="caret right" />
+export const SavedScriptsExpandMenuRightIcon = (): JSX.Element => (
+  <Icon name="caret right" />
+)
+
+export const SavedScriptsCollapseMenuIcon = (): JSX.Element => (
+  <Icon name="caret down" />
+)
 
-export const SavedScriptsCollapseMenuIcon = () => <Icon name="caret down" />
+export const CannyFeedbackIcon = (): JSX.Element => (
+  <IconContainer icon={cannyFeedback} />
+)
+
+export const CannyNotificationsIcon = (): JSX.Element => (
+  <IconContainer icon={cannyNotifications} />
+)
diff --git a/src/browser/icons/canny-changelog.svg b/src/browser/icons/canny-changelog.svg
new file mode 100644
index 00000000000..2d200c80902
--- /dev/null
+++ b/src/browser/icons/canny-changelog.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path d="M10 22.417C10.127 22.8497 10.3908 23.2296 10.7518 23.4998C11.1127 23.7701 11.5516 23.9161 12.0025 23.9161C12.4534 23.9161 12.8923 23.7701 13.2532 23.4998C13.6142 23.2296 13.878 22.8497 14.005 22.417" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 3.66699V1.41699" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 3.66699C13.9891 3.66699 15.8968 4.45717 17.3033 5.86369C18.7098 7.27021 19.5 9.17787 19.5 11.167C19.5 18.213 21 19.417 21 19.417H3C3 19.417 4.5 17.501 4.5 11.167C4.5 9.17787 5.29018 7.27021 6.6967 5.86369C8.10322 4.45717 10.0109 3.66699 12 3.66699V3.66699Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0">
+    <rect width="24" height="24" fill="white" transform="translate(0 0.666992)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/browser/icons/canny-feedback.svg b/src/browser/icons/canny-feedback.svg
new file mode 100644
index 00000000000..fdc45e20363
--- /dev/null
+++ b/src/browser/icons/canny-feedback.svg
@@ -0,0 +1,12 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path d="M16.3125 14.0625H8.4375L3.9375 17.4375V14.0625H1.6875C1.38913 14.0625 1.10298 13.944 0.892005 13.733C0.681026 13.522 0.5625 13.2359 0.5625 12.9375V1.6875C0.5625 1.38913 0.681026 1.10298 0.892005 0.892005C1.10298 0.681026 1.38913 0.5625 1.6875 0.5625H16.3125C16.6109 0.5625 16.897 0.681026 17.108 0.892005C17.319 1.10298 17.4375 1.38913 17.4375 1.6875V12.9375C17.4375 13.2359 17.319 13.522 17.108 13.733C16.897 13.944 16.6109 14.0625 16.3125 14.0625Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9.5625 11.25C9.63709 11.25 9.70863 11.2204 9.76137 11.1676C9.81412 11.1149 9.84375 11.0433 9.84375 10.9688C9.84375 10.8942 9.81412 10.8226 9.76137 10.7699C9.70863 10.7171 9.63709 10.6875 9.5625 10.6875C9.48791 10.6875 9.41637 10.7171 9.36363 10.7699C9.31088 10.8226 9.28125 10.8942 9.28125 10.9688C9.28125 11.0433 9.31088 11.1149 9.36363 11.1676C9.41637 11.2204 9.48791 11.25 9.5625 11.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M9.5625 8.4375V3.9375" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="18" height="18" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/browser/modules/Sidebar/DocumentItems.tsx b/src/browser/modules/Sidebar/DocumentItems.tsx
index 6182c8e790a..875da8b2d83 100644
--- a/src/browser/modules/Sidebar/DocumentItems.tsx
+++ b/src/browser/modules/Sidebar/DocumentItems.tsx
@@ -17,8 +17,9 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react'
+import React, { Dispatch, useState } from 'react'
 import { connect } from 'react-redux'
+import { Action } from 'redux'
 import {
   DrawerSubHeader,
   DrawerSection,
@@ -37,11 +38,17 @@ import {
   executeCommand
 } from 'shared/modules/commands/commandsDuck'
 import styled from 'styled-components'
+import {
+  SavedScriptsCollapseMenuIcon,
+  SavedScriptsExpandMenuRightIcon
+} from 'browser-components/icons/Icons'
+import { SavedScriptsFolderCollapseIcon } from 'browser-components/SavedScripts/styled'
 const DrawerSubHeaderWithMargin = styled(DrawerSubHeader)`
   margin: 0 24px 0 24px;
 `
 
 type DocumentItemsOwnProps = {
+  expandable?: true
   header: string
   items: (Link | Command)[]
 }
@@ -61,10 +68,13 @@ type Command = {
 }
 
 export const DocumentItems = ({
+  expandable,
   header,
   items,
   executeCommand
 }: DocumentItemsProps): JSX.Element => {
+  const [expanded, setExpanded] = useState(false)
+
   const listOfItems = items.map(item =>
     'url' in item ? (
       <StyledHelpItem key={item.url}>
@@ -84,10 +94,26 @@ export const DocumentItems = ({
 
   return (
     <DrawerSection>
-      <DrawerSubHeaderWithMargin>{header}</DrawerSubHeaderWithMargin>
-      <DrawerSectionBody>
-        <ul>{listOfItems}</ul>
-      </DrawerSectionBody>
+      <DrawerSubHeaderWithMargin
+        onClick={() => expandable && setExpanded(!expanded)}
+        style={{ cursor: expandable ? 'pointer' : 'auto' }}
+      >
+        {expandable && (
+          <SavedScriptsFolderCollapseIcon>
+            {expanded ? (
+              <SavedScriptsCollapseMenuIcon />
+            ) : (
+              <SavedScriptsExpandMenuRightIcon />
+            )}
+          </SavedScriptsFolderCollapseIcon>
+        )}
+        {header}
+      </DrawerSubHeaderWithMargin>
+      {(!expandable || expanded) && (
+        <DrawerSectionBody>
+          <ul>{listOfItems}</ul>
+        </DrawerSectionBody>
+      )}
     </DrawerSection>
   )
 }
@@ -102,7 +128,7 @@ const CommandItem = ({ name, command, executeCommand }: CommandItemProps) => (
   </StyledCommandListItem>
 )
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
   executeCommand: (cmd: string) => {
     dispatch(
       executeCommand(cmd, {
diff --git a/src/browser/modules/Sidebar/Documents.tsx b/src/browser/modules/Sidebar/Documents.tsx
index e025b202ba7..cdc95ceb1bc 100644
--- a/src/browser/modules/Sidebar/Documents.tsx
+++ b/src/browser/modules/Sidebar/Documents.tsx
@@ -17,16 +17,24 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react'
+import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import semver from 'semver'
+
+import { cannyOptions, CANNY_FEATURE_REQUEST_URL } from 'browser-services/canny'
+import { GlobalState } from 'shared/globalState'
 import { getVersion } from 'shared/modules/dbMeta/dbMetaDuck'
 import DocumentItems from './DocumentItems'
-import { Drawer, DrawerBody, DrawerHeader } from 'browser-components/drawer'
-import styled from 'styled-components'
-const FullSizeDrawerBody = styled(DrawerBody)`
-  padding: 0;
-`
+import { Drawer, DrawerHeader } from 'browser-components/drawer'
+import {
+  CannyFeedbackIcon,
+  CannyNotificationsIcon
+} from 'browser-components/icons/Icons'
+import {
+  StyledFeedbackButton,
+  StyledFullSizeDrawerBody,
+  StyledHeaderContainer
+} from './styled'
 
 export const formatDocVersion = (v = ''): string => {
   if (!semver.valid(v)) {
@@ -103,44 +111,67 @@ const getReferences = (version: string, v: string) => {
   ]
   return { docs, other }
 }
+const useful = [
+  { name: 'Help by topic', command: ':help' },
+  { name: 'Cypher help', command: ':help cypher' },
+  { name: 'Available commands', command: ':help commands' },
+  { name: 'Keybindings', command: ':help keys' },
+  { name: 'Command history', command: ':history' },
+  { name: 'Show schema', command: 'CALL db.schema.visualization()' },
+  { name: 'System info', command: ':sysinfo' }
+]
+
+const guides = [
+  { name: 'Intro to Neo4j Browser', command: ':play intro' },
+  { name: 'Cypher basics', command: ':play cypher' },
+  { name: 'Queries with Cypher - Movies use case', command: ':play movies' },
+  {
+    name: 'More guides',
+    url: 'https://neo4j.com/graphgists/'
+  }
+]
 
 type DocumentsProps = { version: string; urlVersion: string }
+
 const Documents = ({ version, urlVersion }: DocumentsProps) => {
-  const useful = [
-    { name: 'Help by topic', command: ':help' },
-    { name: 'Cypher help', command: ':help cypher' },
-    { name: 'Available commands', command: ':help commands' },
-    { name: 'Keybindings', command: ':help keys' },
-    { name: 'Command history', command: ':history' },
-    { name: 'Show schema', command: 'CALL db.schema.visualization()' },
-    { name: 'System info', command: ':sysinfo' }
-  ]
+  useEffect(() => {
+    window.Canny && window.Canny('initChangelog', cannyOptions)
 
-  const guides = [
-    { name: 'Intro to Neo4j Browser', command: ':play intro' },
-    { name: 'Cypher basics', command: ':play cypher' },
-    { name: 'Queries with Cypher - Movies use case', command: ':play movies' },
-    {
-      name: 'More guides',
-      url: 'https://neo4j.com/graphgists/'
+    return () => {
+      window.Canny && window.Canny('closeChangelog')
     }
-  ]
+  }, [])
 
   const { docs, other } = getReferences(version, urlVersion)
   return (
     <Drawer id="db-documents">
-      <DrawerHeader>Help &amp; Learn</DrawerHeader>
-      <FullSizeDrawerBody>
+      <StyledHeaderContainer>
+        <DrawerHeader>Help &amp; Learn</DrawerHeader>
+        <a data-canny-changelog>
+          <CannyNotificationsIcon />
+        </a>
+      </StyledHeaderContainer>
+      <StyledFeedbackButton
+        color="twitter"
+        content={
+          <>
+            <CannyFeedbackIcon />
+            &nbsp; Send Feedback
+          </>
+        }
+        onClick={() => window.open(CANNY_FEATURE_REQUEST_URL, '_blank')}
+      ></StyledFeedbackButton>
+      <StyledFullSizeDrawerBody>
         <DocumentItems header="Useful commands" items={useful} />
         <DocumentItems header="Built-in guides" items={guides} />
         <DocumentItems header="Documentation links" items={docs} />
-        <DocumentItems header="Other Resources" items={other} />
-      </FullSizeDrawerBody>
+        <DocumentItems expandable header="Other Resources" items={other} />
+      </StyledFullSizeDrawerBody>
     </Drawer>
   )
 }
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: GlobalState) => {
   const version = getVersion(state)
   return {
     version,
diff --git a/src/browser/modules/Sidebar/Settings.tsx b/src/browser/modules/Sidebar/Settings.tsx
index 9ec0e1967f9..449283cafef 100644
--- a/src/browser/modules/Sidebar/Settings.tsx
+++ b/src/browser/modules/Sidebar/Settings.tsx
@@ -187,7 +187,7 @@ export const Settings = ({
                     onSettingsSave(settings)
                   }}
                   defaultValue={settings[setting]}
-                  title={[tooltip]}
+                  title={tooltip}
                   className={setting}
                 />
               </StyledSettingLabel>
diff --git a/src/browser/modules/Sidebar/Sidebar.tsx b/src/browser/modules/Sidebar/Sidebar.tsx
index d8b6aab1b03..a461f455380 100644
--- a/src/browser/modules/Sidebar/Sidebar.tsx
+++ b/src/browser/modules/Sidebar/Sidebar.tsx
@@ -29,10 +29,13 @@ import SettingsDrawer from './Settings'
 import Favorites from './favorites'
 import StaticScripts from './static-scripts'
 import ProjectFilesDrawer from './ProjectFiles'
-import TabNavigation from 'browser-components/TabNavigation/Navigation'
+import TabNavigation, {
+  NavItem
+} from 'browser-components/TabNavigation/Navigation'
 import { DrawerHeader } from 'browser-components/drawer'
 import NewSavedScript from './NewSavedScript'
 import BrowserSync from '../Sync/BrowserSync'
+import { GlobalState } from 'shared/globalState'
 import { isUserSignedIn } from 'shared/modules/sync/syncDuck'
 import { addFavorite } from 'shared/modules/favorites/favoritesDuck'
 import { utilizeBrowserSync } from 'shared/modules/features/featuresDuck'
@@ -83,7 +86,7 @@ const Sidebar = ({
   scriptDraft,
   resetDraft
 }: SidebarProps) => {
-  const topNavItemsList = [
+  const topNavItemsList: NavItem[] = [
     {
       name: 'DBMS',
       title: 'Database Information',
@@ -152,18 +155,19 @@ const Sidebar = ({
             }
           }
         ]
-      : []),
+      : [])
+  ]
+
+  const bottomNavItemsList: NavItem[] = [
     {
       name: 'Documents',
       title: 'Help &amp; Resources',
       icon: function docsIcon(isOpen: boolean): ReactElement {
         return <DocumentsIcon isOpen={isOpen} title="Help &amp; Resources" />
       },
-      content: DocumentsDrawer
-    }
-  ]
-
-  const bottomNavItemsList = [
+      content: DocumentsDrawer,
+      enableCannyBadge: true
+    },
     {
       name: 'Sync',
       title: 'Browser Sync',
@@ -206,7 +210,7 @@ const Sidebar = ({
   )
 }
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: GlobalState) => {
   let connectionState = 'disconnected'
   if (state.connections) {
     switch (state.connections.connectionState) {
diff --git a/src/browser/modules/Sidebar/styled.tsx b/src/browser/modules/Sidebar/styled.tsx
index 94d2e8d2d10..83ee2756f63 100644
--- a/src/browser/modules/Sidebar/styled.tsx
+++ b/src/browser/modules/Sidebar/styled.tsx
@@ -17,7 +17,9 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { Button } from 'semantic-ui-react'
 import styled from 'styled-components'
+import { DrawerBody } from 'browser-components/drawer'
 
 export const StyledSetting = styled.div`
   padding-bottom: 15px;
@@ -32,7 +34,7 @@ export const StyledErrorListContainer = styled.div`
   color: #ffaf00;
 `
 
-export const StyledSettingTextInput: any = styled.input`
+export const StyledSettingTextInput = styled.input`
   height: 34px;
   color: #555;
   font-size: 14px;
@@ -69,6 +71,7 @@ export const StyledHelpItem = styled.li`
 export const StyledCommandListItem = styled.li`
   list-style-type: none;
   cursor: pointer;
+  text-decoration: none;
   -webkit-text-decoration: none;
   position: relative;
 
@@ -106,8 +109,43 @@ export const StyledCommand = styled.div`
   font-family: Fira Code;
 
   overflow: hidden;
-  white-space: nowrap
+  white-space: nowrap;
   text-overflow: ellipsis;
 
   max-width: 45%;
 `
+
+export const StyledFullSizeDrawerBody = styled(DrawerBody)`
+  padding: 0;
+`
+
+export const StyledHeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  a {
+    cursor: pointer;
+    margin-right: 10px;
+
+    .Canny_BadgeContainer .Canny_Badge {
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      border-radius: 10px;
+      background-color: red;
+      padding: 4px;
+      border: 1px solid red;
+    }
+  }
+`
+
+// important to override semantic UI styles
+export const StyledFeedbackButton = styled(Button)`
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  max-width: fit-content !important;
+  margin: 0 0 25px 25px !important;
+  min-height: fit-content !important;
+`
diff --git a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
index 07ac7b4633a..00645277dcf 100644
--- a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
+++ b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
@@ -7,16 +7,16 @@ exports[`SchemaFrame renders empty 1`] = `
   >
     <div>
       <div
-        class="sc-hwwEjo DAKUg"
+        class="sc-kPVwWT fjqFEh"
       >
         <table
-          class="sc-kPVwWT pOTGP"
+          class="sc-kfGgVZ fenSKa"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Indexes
               </th>
@@ -24,10 +24,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kfGgVZ fpSMyT table-row"
+              class="sc-esjQYD dhfQlm table-row"
             >
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               >
                 None
               </td>
@@ -35,13 +35,13 @@ exports[`SchemaFrame renders empty 1`] = `
           </tbody>
         </table>
         <table
-          class="sc-kPVwWT pOTGP"
+          class="sc-kfGgVZ fenSKa"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Constraints
               </th>
@@ -49,10 +49,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kfGgVZ fpSMyT table-row"
+              class="sc-esjQYD dhfQlm table-row"
             >
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               >
                 None
               </td>
@@ -89,46 +89,46 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
   >
     <div>
       <div
-        class="sc-hwwEjo DAKUg"
+        class="sc-kPVwWT fjqFEh"
       >
         <table
-          class="sc-kPVwWT pOTGP"
+          class="sc-kfGgVZ fenSKa"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Index Name
               </th>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Type
               </th>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Uniqueness
               </th>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 EntityType
               </th>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 LabelsOrTypes
               </th>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Properties
               </th>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 State
               </th>
@@ -136,42 +136,42 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kfGgVZ fpSMyT table-row"
+              class="sc-esjQYD dhfQlm table-row"
             >
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               >
                 None
               </td>
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               />
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               />
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               />
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               />
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               />
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               />
             </tr>
           </tbody>
         </table>
         <table
-          class="sc-kPVwWT pOTGP"
+          class="sc-kfGgVZ fenSKa"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Constraints
               </th>
@@ -179,10 +179,10 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kfGgVZ fpSMyT table-row"
+              class="sc-esjQYD dhfQlm table-row"
             >
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               >
                 None
               </td>
@@ -219,16 +219,16 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
   >
     <div>
       <div
-        class="sc-hwwEjo DAKUg"
+        class="sc-kPVwWT fjqFEh"
       >
         <table
-          class="sc-kPVwWT pOTGP"
+          class="sc-kfGgVZ fenSKa"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Indexes
               </th>
@@ -236,10 +236,10 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kfGgVZ fpSMyT table-row"
+              class="sc-esjQYD dhfQlm table-row"
             >
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               >
                  ON :Movie(released) ONLINE 
               </td>
@@ -247,13 +247,13 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </tbody>
         </table>
         <table
-          class="sc-kPVwWT pOTGP"
+          class="sc-kfGgVZ fenSKa"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-esjQYD eCulGm table-header"
+                class="sc-kIPQKe znCrs table-header"
               >
                 Constraints
               </th>
@@ -261,10 +261,10 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kfGgVZ fpSMyT table-row"
+              class="sc-esjQYD dhfQlm table-row"
             >
               <td
-                class="sc-kIPQKe hyTQUe table-properties"
+                class="sc-eXEjpC cgCZkv table-properties"
               >
                  ON ( book:Book ) ASSERT book.isbn IS UNIQUE
               </td>
diff --git a/src/browser/modules/Sync/BrowserSync.tsx b/src/browser/modules/Sync/BrowserSync.tsx
index 481228a57af..a12179dad8b 100644
--- a/src/browser/modules/Sync/BrowserSync.tsx
+++ b/src/browser/modules/Sync/BrowserSync.tsx
@@ -202,7 +202,7 @@ export class BrowserSync extends Component<any, BrowserSyncState> {
                     : 'Clear local data'
                 }
                 onClick={() => this.signOutAndClearLocalStorage()}
-                icon={<BinIcon suppressIconStyles="true" />}
+                icon={<BinIcon />}
                 buttonType="drawer"
               />
               <p>&nbsp;</p>
@@ -254,7 +254,7 @@ export class BrowserSync extends Component<any, BrowserSyncState> {
                 data-testid="clearLocalData"
                 label="Clear local data"
                 onClick={this.signOutAndClearLocalStorage.bind(this)}
-                icon={<BinIcon suppressIconStyles="true" />}
+                icon={<BinIcon />}
                 buttonType="drawer"
               />
             </DrawerSectionBody>
diff --git a/src/browser/services/canny.ts b/src/browser/services/canny.ts
new file mode 100644
index 00000000000..2a23c530587
--- /dev/null
+++ b/src/browser/services/canny.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export const cannyOptions = {
+  appID: '601d00fb7a41e3035f75e1e8',
+  position: 'right',
+  align: 'top'
+}
+export const CANNY_FEATURE_REQUEST_URL =
+  'https://neo4j-browser.canny.io/feature-requests'
+
+declare global {
+  interface Window {
+    Canny?: { (command: string, options?: unknown): void }
+    CannyIsLoaded?: boolean
+    attachEvent?: typeof window.addEventListener
+  }
+}
+
+export const CannySDK = {
+  init: (): Promise<Event> =>
+    new Promise(function(resolve, reject) {
+      // Code obtained from Canny.io; See: https://developers.canny.io/install
+
+      if (typeof window.Canny === 'function') {
+        return
+      }
+
+      const canny = function(...args: unknown[]) {
+        canny.q.push(args)
+      }
+      canny.q = [] as unknown[]
+      window.Canny = canny
+
+      function loadCanny() {
+        if (document.getElementById('canny-jssdk')) {
+          return
+        }
+        const f = document.getElementsByTagName('script')[0]
+        const e = document.createElement('script') as HTMLScriptElement
+        e.type = 'text/javascript'
+        e.async = true
+        e.src = 'https://canny.io/sdk.js'
+        e.onerror = reject
+        e.onload = resolve
+        e.addEventListener('error', reject)
+        e.addEventListener('load', resolve)
+        f?.parentNode?.insertBefore(e, f)
+      }
+
+      if (document.readyState === 'complete') {
+        loadCanny()
+      } else if (window.attachEvent) {
+        window.attachEvent('onload', loadCanny)
+      } else {
+        window.addEventListener('load', loadCanny, false)
+      }
+    })
+}
diff --git a/src/shared/services/localstorage.test.ts b/src/shared/services/localstorage.test.ts
index fdd660023ab..bb817ed57e6 100644
--- a/src/shared/services/localstorage.test.ts
+++ b/src/shared/services/localstorage.test.ts
@@ -23,7 +23,7 @@ import * as ls from './localstorage'
 describe('localstorage', () => {
   test('getItem return items', () => {
     // Given
-    const givenKey = 'myKey'
+    const givenKey = 'myKey' as ls.key
     const givenVal = 'myVal'
     const storage = {
       getItem: (key: string) => {
@@ -61,7 +61,7 @@ describe('localstorage', () => {
 
   test('should fetch items from storage based on key input', () => {
     // Given
-    const keys: any[] = ['key1', 'key2', 'key3']
+    const keys = (['key1', 'key2', 'key3'] as unknown) as ls.key[]
     const vals = {
       key1: 'hello',
       key2: [1, 2, 3]
diff --git a/src/shared/services/localstorage.ts b/src/shared/services/localstorage.ts
index 5140148a460..bf1505ed77e 100644
--- a/src/shared/services/localstorage.ts
+++ b/src/shared/services/localstorage.ts
@@ -21,11 +21,12 @@
 import { Middleware } from 'redux'
 import { GlobalState } from 'shared/globalState'
 import { shouldRetainConnectionCredentials } from '../modules/dbMeta/dbMetaDuck'
+import { initialState as settingsInitialState } from '../modules/settings/settingsDuck'
 
 export const keyPrefix = 'neo4j.'
 let storage = window.localStorage
 
-type key =
+export type key =
   | 'connections'
   | 'settings'
   | 'history'
@@ -37,7 +38,7 @@ type key =
   | 'experimentalFeatures'
 const keys: key[] = []
 
-export function getItem(key: string): Record<string, unknown> | undefined {
+export function getItem(key: key): GlobalState[key] | undefined {
   try {
     const serializedVal = storage.getItem(keyPrefix + key)
     if (serializedVal === null) return undefined
@@ -58,15 +59,18 @@ export function setItem(key: string, val: unknown): boolean {
   }
 }
 
-export function getAll(): Record<string, unknown> {
-  const out: Record<string, unknown> = {}
+export function getAll(): Partial<GlobalState> {
+  const out: Partial<GlobalState> = {}
   keys.forEach(key => {
     const current = getItem(key)
     if (current !== undefined) {
       if (key === 'settings') {
-        out[key] = { ...current, playImplicitInitCommands: true }
+        out[key] = {
+          ...(current as typeof settingsInitialState),
+          playImplicitInitCommands: true
+        }
       } else {
-        out[key] = current
+        out[key] = current as any
       }
     }
   })