diff --git a/src/browser/components/buttons/__snapshots__/ConfirmationButton.test.js.snap b/src/browser/components/buttons/__snapshots__/ConfirmationButton.test.js.snap
index 91ccf5760e7..91588d37d02 100644
--- a/src/browser/components/buttons/__snapshots__/ConfirmationButton.test.js.snap
+++ b/src/browser/components/buttons/__snapshots__/ConfirmationButton.test.js.snap
@@ -7,7 +7,7 @@ exports[`ConfirmationButton renders changes state on clicks and finally calls th
     data-testid="confirmation-button-initial"
   >
     <i
-      class="IconContainer__I-sc-16whwc5-0 iJwbeZ sl-minus-circle"
+      class="sl-minus-circle IconContainer__I-sc-16whwc5-0 iJwbeZ"
     />
   </button>
 </div>
@@ -21,7 +21,7 @@ exports[`ConfirmationButton renders changes state on clicks and finally calls th
       data-testid="confirmation-button-confirm"
     >
       <i
-        class="IconContainer__I-sc-16whwc5-0 iJwbeZ sl-arrow-circle-right"
+        class="sl-arrow-circle-right IconContainer__I-sc-16whwc5-0 iJwbeZ"
       />
     </button>
     <button
@@ -29,7 +29,7 @@ exports[`ConfirmationButton renders changes state on clicks and finally calls th
       data-testid="confirmation-button-cancel"
     >
       <i
-        class="IconContainer__I-sc-16whwc5-0 iJwbeZ sl-delete-circle"
+        class="sl-delete-circle IconContainer__I-sc-16whwc5-0 iJwbeZ"
       />
     </button>
   </span>
@@ -43,7 +43,7 @@ exports[`ConfirmationButton renders changes state on clicks and finally calls th
     data-testid="confirmation-button-initial"
   >
     <i
-      class="IconContainer__I-sc-16whwc5-0 iJwbeZ sl-minus-circle"
+      class="sl-minus-circle IconContainer__I-sc-16whwc5-0 iJwbeZ"
     />
   </button>
 </div>
@@ -56,7 +56,7 @@ exports[`ConfirmationButton renders changes state on clicks and finally calls th
     data-testid="confirmation-button-initial"
   >
     <i
-      class="IconContainer__I-sc-16whwc5-0 iJwbeZ sl-minus-circle"
+      class="sl-minus-circle IconContainer__I-sc-16whwc5-0 iJwbeZ"
     />
   </button>
 </div>
diff --git a/src/browser/modules/App/App.jsx b/src/browser/modules/App/App.jsx
index 8d986ba1599..b217f60a36b 100644
--- a/src/browser/modules/App/App.jsx
+++ b/src/browser/modules/App/App.jsx
@@ -32,26 +32,17 @@ import {
 import { FOCUS, EXPAND } from 'shared/modules/editor/editorDuck'
 import { useBrowserSync } from 'shared/modules/features/featuresDuck'
 import { getErrorMessage } from 'shared/modules/commands/commandsDuck'
-import {
-  allowOutgoingConnections,
-  getVersion
-} from 'shared/modules/dbMeta/dbMetaDuck'
+import { allowOutgoingConnections } from 'shared/modules/dbMeta/dbMetaDuck'
 import {
   getActiveConnection,
   getConnectionState,
   getLastConnectionUpdate,
   getActiveConnectionData,
   isConnected,
-  getConnectionData,
-  SILENT_DISCONNECT,
-  SWITCH_CONNECTION,
-  SWITCH_CONNECTION_FAILED
+  getConnectionData
 } from 'shared/modules/connections/connectionsDuck'
 import { toggle } from 'shared/modules/sidebar/sidebarDuck'
-import {
-  CONNECTION_ID,
-  INJECTED_DISCOVERY
-} from 'shared/modules/discovery/discoveryDuck'
+import { CONNECTION_ID } from 'shared/modules/discovery/discoveryDuck'
 import {
   StyledWrapper,
   StyledApp,
@@ -66,24 +57,21 @@ import asTitleString from '../DocTitle/titleStringBuilder'
 import Intercom from '../Intercom'
 import Render from 'browser-components/Render'
 import BrowserSyncInit from '../Sync/BrowserSyncInit'
-import DesktopIntegration from 'browser-components/DesktopIntegration'
-import {
-  getActiveGraph,
-  buildConnectionCredentialsObject
-} from 'browser-components/DesktopIntegration/helpers'
 import { getMetadata, getUserAuthStatus } from 'shared/modules/sync/syncDuck'
 import ErrorBoundary from 'browser-components/ErrorBoundary'
 import { getExperimentalFeatures } from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'
 import FeatureToggleProvider from '../FeatureToggle/FeatureToggleProvider'
-import { inWebEnv, URL_ARGUMENTS_CHANGE } from 'shared/modules/app/appDuck'
+import { inWebEnv } from 'shared/modules/app/appDuck'
 import useDerivedTheme from 'browser-hooks/useDerivedTheme'
 import FileDrop from 'browser-components/FileDrop/FileDrop'
+import RelateApi from 'browser-components/relate-api/relate-api'
 
 export function App(props) {
   const [derivedTheme, setEnvironmentTheme] = useDerivedTheme(
     props.theme,
     LIGHT_THEME
   )
+  const themeData = themes[derivedTheme] || themes[LIGHT_THEME]
 
   useEffect(() => {
     document.addEventListener('keyup', focusEditorOnSlash)
@@ -95,15 +83,6 @@ export function App(props) {
     }
   }, [])
 
-  const detectDesktopThemeChanges = (_, newContext) => {
-    if (newContext.global.prefersColorScheme) {
-      setEnvironmentTheme(newContext.global.prefersColorScheme)
-    } else {
-      setEnvironmentTheme(null)
-    }
-  }
-  const themeData = themes[derivedTheme] || themes[LIGHT_THEME]
-
   const focusEditorOnSlash = e => {
     if (['INPUT', 'TEXTAREA'].indexOf(e.target.tagName) > -1) return
     if (e.key !== '/') return
@@ -113,6 +92,7 @@ export function App(props) {
     if (e.keyCode !== 27) return
     props.bus && props.bus.send(EXPAND)
   }
+
   const {
     drawer,
     cmdchar,
@@ -129,7 +109,8 @@ export function App(props) {
     browserSyncAuthStatus,
     experimentalFeatures,
     store,
-    codeFontLigatures
+    codeFontLigatures,
+    defaultConnectionData
   } = props
 
   const wrapperClassNames = []
@@ -139,33 +120,16 @@ export function App(props) {
 
   return (
     <ErrorBoundary>
+      <RelateApi
+        defaultConnectionData={defaultConnectionData}
+        setEnvironmentTheme={setEnvironmentTheme}
+      />
       <ThemeProvider theme={themeData}>
         <FeatureToggleProvider features={experimentalFeatures}>
           <FileDrop store={store}>
             <StyledWrapper className={wrapperClassNames}>
               <DocTitle titleString={props.titleString} />
               <UserInteraction />
-              <DesktopIntegration
-                integrationPoint={props.desktopIntegrationPoint}
-                onArgumentsChange={props.onArgumentsChange}
-                onMount={(
-                  activeGraph,
-                  connectionsCredentials,
-                  context,
-                  getKerberosTicket
-                ) => {
-                  props.setInitialConnectionData(
-                    activeGraph,
-                    connectionsCredentials,
-                    context,
-                    getKerberosTicket
-                  )
-                  detectDesktopThemeChanges(null, context)
-                }}
-                onGraphActive={props.switchConnection}
-                onGraphInactive={props.closeConnectionMaybe}
-                onColorSchemeUpdated={detectDesktopThemeChanges}
-              />
               <Render if={loadExternalScripts}>
                 <Intercom appID="lq70afwx" />
               </Render>
@@ -222,8 +186,7 @@ const mapStateToProps = state => {
     browserSyncConfig: getBrowserSyncConfig(state),
     browserSyncAuthStatus: getUserAuthStatus(state),
     loadSync: useBrowserSync(state),
-    isWebEnv: inWebEnv(state),
-    neo4jVersion: getVersion(state)
+    isWebEnv: inWebEnv(state)
   }
 }
 
@@ -235,59 +198,4 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const switchConnection = async (
-    event,
-    newContext,
-    oldContext,
-    getKerberosTicket
-  ) => {
-    const connectionCreds = await buildConnectionCredentialsObject(
-      newContext,
-      stateProps.defaultConnectionData,
-      getKerberosTicket,
-      stateProps.neo4jVersion
-    )
-    ownProps.bus.send(SWITCH_CONNECTION, connectionCreds)
-  }
-  const setInitialConnectionData = async (
-    graph,
-    credentials,
-    context,
-    getKerberosTicket
-  ) => {
-    const connectionCreds = await buildConnectionCredentialsObject(
-      context,
-      stateProps.defaultConnectionData,
-      getKerberosTicket,
-      stateProps.neo4jVersion
-    )
-    // No connection. Probably no graph active.
-    if (!connectionCreds) {
-      ownProps.bus.send(SWITCH_CONNECTION_FAILED)
-      return
-    }
-    ownProps.bus.send(INJECTED_DISCOVERY, connectionCreds)
-  }
-  const closeConnectionMaybe = (event, newContext, oldContext) => {
-    const activeGraph = getActiveGraph(newContext)
-    if (activeGraph) return // We still got an active graph, do nothing
-    ownProps.bus.send(SILENT_DISCONNECT, {})
-  }
-  const onArgumentsChange = argsString => {
-    ownProps.bus.send(URL_ARGUMENTS_CHANGE, { url: `?${argsString}` })
-  }
-  return {
-    ...stateProps,
-    ...ownProps,
-    ...dispatchProps,
-    switchConnection,
-    setInitialConnectionData,
-    closeConnectionMaybe,
-    onArgumentsChange
-  }
-}
-
-export default withBus(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)(App)
-)
+export default withBus(connect(mapStateToProps, mapDispatchToProps)(App))
diff --git a/src/browser/modules/App/App.test.js b/src/browser/modules/App/App.test.js
index 9f6800cd056..3c56b3e2a30 100644
--- a/src/browser/modules/App/App.test.js
+++ b/src/browser/modules/App/App.test.js
@@ -18,108 +18,37 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/* global jest, test, expect */
 import React from 'react'
 import { render } from '@testing-library/react'
 import configureMockStore from 'redux-mock-store'
 import { App } from './App'
-import { buildConnectionCredentialsObject } from 'browser-components/DesktopIntegration/helpers'
-import { flushPromises } from 'services/utils'
 
 const mockStore = configureMockStore()
 const store = mockStore({})
 
 jest.mock('../FeatureToggle/FeatureToggleProvider', () => {
-  const FT = ({ children }) => <div>{children}</div>
-  FT.displayName = 'FTMock'
-  return FT
+  return ({ children }) => <div>{children}</div>
 })
 jest.mock('./styled', () => {
   const orig = require.requireActual('./styled')
   return {
     ...orig,
-    StyledApp: () => null
+    StyledApp: () => <div>Loaded</div>
   }
 })
 
 describe('App', () => {
   test('App loads', async () => {
     // Given
-    const getKerberosTicket = jest.fn(() => Promise.resolve('xxx'))
-    const desktopIntegrationPoint = getIntegrationPoint(true, getKerberosTicket)
-    let connectionCreds = null
     const props = {
-      store,
-      desktopIntegrationPoint,
-      setInitialConnectionData: async (
-        graph,
-        credentials,
-        context,
-        getKerberosTicket
-      ) => {
-        connectionCreds = await buildConnectionCredentialsObject(
-          context,
-          {},
-          getKerberosTicket
-        )
-      }
+      store
     }
 
     // When
-    render(<App {...props} />)
+    const { getByText } = render(<App {...props} />)
 
     // Then
-    await flushPromises()
-    expect(connectionCreds).toMatchObject({
-      authenticationMethod: 'KERBEROS',
-      password: 'xxx'
-    })
-    expect(getKerberosTicket).toHaveBeenCalledTimes(1)
+    expect(getByText('Loaded'))
   })
 })
-
-const getIntegrationPoint = (kerberosEnabled, getKerberosTicket) => {
-  const context = Promise.resolve(getDesktopContext(kerberosEnabled))
-  return {
-    getKerberosTicket: getKerberosTicket,
-    getContext: () => context
-  }
-}
-
-const getDesktopContext = (kerberosEnabled = false) => ({
-  projects: [
-    {
-      graphs: [
-        {
-          status: 'ACTIVE',
-          connection: {
-            type: 'REMOTE',
-            configuration: {
-              authenticationMethods: {
-                kerberos: {
-                  enabled: kerberosEnabled,
-                  servicePrincipal: 'KERBEROS'
-                }
-              },
-              protocols: {
-                bolt: {
-                  enabled: true,
-                  username: 'neo4j',
-                  password: 'password',
-                  tlsLevel: 'REQUIRED',
-                  url: 'bolt://localhost:7687'
-                },
-                http: {
-                  enabled: true,
-                  username: 'neo4j',
-                  password: 'password',
-                  host: 'localhost',
-                  port: '7474'
-                }
-              }
-            }
-          }
-        }
-      ]
-    }
-  ]
-})
diff --git a/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.js.snap b/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.js.snap
index e3fd460a0ac..d5c5dff188a 100644
--- a/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.js.snap
+++ b/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.js.snap
@@ -11,7 +11,7 @@ exports[`LabelItems renders empty 1`] = `
       Node Labels
     </h5>
     <div
-      class="Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs undefined"
+      class="undefined Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs"
     >
       <p>
         There are no labels in database
@@ -32,7 +32,7 @@ exports[`LabelItems renders labels 1`] = `
       Node Labels
     </h5>
     <div
-      class="Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs undefined"
+      class="undefined Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs"
     >
       <div
         class="styled__chip-t72hk3-0 styled__StyledLabel-t72hk3-1 hThrTr"
@@ -68,7 +68,7 @@ exports[`PropertyItems renders empty 1`] = `
       Property Keys
     </h5>
     <div
-      class="Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs undefined"
+      class="undefined Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs"
     >
       <p>
         There are no properties in database
@@ -89,7 +89,7 @@ exports[`PropertyItems renders properties 1`] = `
       Property Keys
     </h5>
     <div
-      class="Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs undefined"
+      class="undefined Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs"
     >
       <div
         class="styled__chip-t72hk3-0 styled__StyledProperty-t72hk3-3 EbItw"
@@ -119,7 +119,7 @@ exports[`RelationshipItems renders empty 1`] = `
       Relationship Types
     </h5>
     <div
-      class="Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs undefined"
+      class="undefined Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs"
     >
       <p>
         No relationships in database
@@ -140,7 +140,7 @@ exports[`RelationshipItems renders relationshipTypes 1`] = `
       Relationship Types
     </h5>
     <div
-      class="Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs undefined"
+      class="undefined Drawer__DrawerSectionBody-sc-5bct1g-5 RMcRs"
     >
       <div
         class="styled__chip-t72hk3-0 styled__StyledRelationship-t72hk3-2 jIILpR"
diff --git a/src/browser/modules/Sidebar/__snapshots__/Settings.test.js.snap b/src/browser/modules/Sidebar/__snapshots__/Settings.test.js.snap
index 4e016ac6b99..e7f49f837b0 100644
--- a/src/browser/modules/Sidebar/__snapshots__/Settings.test.js.snap
+++ b/src/browser/modules/Sidebar/__snapshots__/Settings.test.js.snap
@@ -35,7 +35,7 @@ exports[`Settings renders with strange characters in display name 1`] = `
               åäö üüü
             </div>
             <input
-              class="styled__StyledSettingTextInput-xqaooh-2 coeKcS testSetting"
+              class="testSetting styled__StyledSettingTextInput-xqaooh-2 coeKcS"
               title=""
               value="true"
             />
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/CodeView.test.js.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/CodeView.test.js.snap
index ccee9f210a8..e508ceb60ff 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/CodeView.test.js.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/CodeView.test.js.snap
@@ -89,7 +89,7 @@ exports[`CodeViews CodeView displays request and response info if successful que
           >
             Summary
             <div
-              class="styled__StyledExpandable-sc-1dtvgs1-38 dMVSiX fa fa-caret-right"
+              class="fa fa-caret-right styled__StyledExpandable-sc-1dtvgs1-38 dMVSiX"
               title="Expand section"
             />
           </td>
@@ -107,7 +107,7 @@ exports[`CodeViews CodeView displays request and response info if successful que
           >
             Response
             <div
-              class="styled__StyledExpandable-sc-1dtvgs1-38 dMVSiX fa fa-caret-right"
+              class="fa fa-caret-right styled__StyledExpandable-sc-1dtvgs1-38 dMVSiX"
               title="Expand section"
             />
           </td>
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.js.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.js.snap
index bce9af884a3..72a4128bf93 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.js.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.js.snap
@@ -10,7 +10,7 @@ exports[`ErrorsViews ErrorsStatusbar displays error 1`] = `
       title="Test.Error: Test error description"
     >
       <i
-        class="IconContainer__I-sc-16whwc5-0 bXwiKG fa fa-exclamation-triangle"
+        class="fa fa-exclamation-triangle IconContainer__I-sc-16whwc5-0 bXwiKG"
       />
        
       Test.Error: Test error description
@@ -61,7 +61,7 @@ exports[`ErrorsViews ErrorsView displays procedure link if unknown procedure 1`]
           class="styled__StyledLink-sc-1dtvgs1-8 fPQgTq"
         >
           <i
-            class="IconContainer__I-sc-16whwc5-0 eTELIJ fa fa-play-circle-o"
+            class="fa fa-play-circle-o IconContainer__I-sc-16whwc5-0 eTELIJ"
           />
            List available procedures
         </a>
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/TableView.test.js.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/TableView.test.js.snap
index 31f75b06fb9..d40695c6da2 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/TableView.test.js.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/TableView.test.js.snap
@@ -51,7 +51,7 @@ exports[`TableViews TableView does not display bodyMessage if rows 1`] = `
       <thead>
         <tr>
           <th
-            class="DataTables__StyledTh-bf850j-2 ikUpyS table-header"
+            class="table-header DataTables__StyledTh-bf850j-2 ikUpyS"
           >
             x
           </th>
@@ -59,10 +59,10 @@ exports[`TableViews TableView does not display bodyMessage if rows 1`] = `
       </thead>
       <tbody>
         <tr
-          class="DataTables__StyledBodyTr-bf850j-1 iGjwRr table-row"
+          class="table-row DataTables__StyledBodyTr-bf850j-1 iGjwRr"
         >
           <td
-            class="DataTables__StyledTd-bf850j-3 lfnTDs table-properties"
+            class="table-properties DataTables__StyledTd-bf850j-3 lfnTDs"
           >
             <span>
               "y"
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.js.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.js.snap
index 5bd5044f9d8..cb033d109ee 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.js.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.js.snap
@@ -8,32 +8,32 @@ exports[`Visualization renders with result 1`] = `
     class="VisualizationViewstyled__StyledVisContainer-sc-1b47q51-0 dFbJTz"
   >
     <div
-      class="styled__StyledFullSizeContainer-sc-13boxex-30 hrlJke one-legend-row"
+      class="one-legend-row styled__StyledFullSizeContainer-sc-13boxex-30 hrlJke"
       id="svg-vis"
     >
       <div
-        class="styled__StyledLegend-sc-13boxex-23 epTuur one-row"
+        class="one-row styled__StyledLegend-sc-13boxex-23 epTuur"
       >
         <div
-          class="styled__StyledLegendRow-sc-13boxex-22 btLVbI contracted"
+          class="contracted styled__StyledLegendRow-sc-13boxex-22 btLVbI"
         >
           <ul
-            class="styled__StyledInlineList-sc-13boxex-9 styled__StyledLegendInlineList-sc-13boxex-24 bXzLDX list-inline"
+            class="styled__StyledInlineList-sc-13boxex-9 list-inline styled__StyledLegendInlineList-sc-13boxex-24 bXzLDX"
           >
             <li
               class="styled__StyledInlineListItem-sc-13boxex-10 styled__StyledLegendInlineListItem-sc-13boxex-25 bKGCvD"
               data-testid="viz-legend-labels"
             >
               <ul
-                class="styled__StyledLegendContents-sc-13boxex-21 hvWlVe contents"
+                class="contents styled__StyledLegendContents-sc-13boxex-21 hvWlVe"
               >
                 <li
-                  class="styled__StyledInlineListItem-sc-13boxex-10 styled__StyledToken-sc-13boxex-15 styled__StyledLabelToken-sc-13boxex-16 jNYiQl token token-label"
+                  class="styled__StyledInlineListItem-sc-13boxex-10 styled__StyledToken-sc-13boxex-15 token token-label styled__StyledLabelToken-sc-13boxex-16 jNYiQl"
                   style="background-color: rgb(247, 151, 103); color: rgb(255, 255, 255);"
                 >
                   *
                   <span
-                    class="styled__StyledTokenCount-sc-13boxex-20 SIGMp count"
+                    class="count styled__StyledTokenCount-sc-13boxex-20 SIGMp"
                   >
                     (1)
                   </span>
@@ -45,15 +45,15 @@ exports[`Visualization renders with result 1`] = `
               data-testid="viz-legend-labels"
             >
               <ul
-                class="styled__StyledLegendContents-sc-13boxex-21 hvWlVe contents"
+                class="contents styled__StyledLegendContents-sc-13boxex-21 hvWlVe"
               >
                 <li
-                  class="styled__StyledInlineListItem-sc-13boxex-10 styled__StyledToken-sc-13boxex-15 styled__StyledLabelToken-sc-13boxex-16 jNYiQl token token-label"
+                  class="styled__StyledInlineListItem-sc-13boxex-10 styled__StyledToken-sc-13boxex-15 token token-label styled__StyledLabelToken-sc-13boxex-16 jNYiQl"
                   style="background-color: rgb(201, 144, 192); color: rgb(255, 255, 255);"
                 >
                   Person
                   <span
-                    class="styled__StyledTokenCount-sc-13boxex-20 SIGMp count"
+                    class="count styled__StyledTokenCount-sc-13boxex-20 SIGMp"
                   >
                     (1)
                   </span>
@@ -131,26 +131,26 @@ exports[`Visualization renders with result 1`] = `
         </svg>
       </div>
       <div
-        class="styled__StyledStatusBar-sc-13boxex-12 fBQkwD status-bar"
+        class="status-bar styled__StyledStatusBar-sc-13boxex-12 fBQkwD"
       >
         <div
-          class="styled__StyledStatus-sc-13boxex-13 lfPraq status"
+          class="status styled__StyledStatus-sc-13boxex-13 lfPraq"
         >
           <div
-            class="styled__StyledInspectorFooter-sc-13boxex-5 fLefTL contracted inspector-footer"
+            class="contracted inspector-footer styled__StyledInspectorFooter-sc-13boxex-5 fLefTL"
           >
             <ul
-              class="styled__StyledInspectorFooterRow-sc-13boxex-6 cjMrGU inspector-footer-row"
+              class="inspector-footer-row styled__StyledInspectorFooterRow-sc-13boxex-6 cjMrGU"
               data-testid="vizInspector"
             >
               <ul
-                class="styled__StyledInlineList-sc-13boxex-9 fWraRP list-inline"
+                class="list-inline styled__StyledInlineList-sc-13boxex-9 fWraRP"
               >
                 <li
-                  class="styled__StyledInlineListItem-sc-13boxex-10 styled__StyledInspectorFooterRowListPair-sc-13boxex-14 jeBqUF pair"
+                  class="styled__StyledInlineListItem-sc-13boxex-10 pair styled__StyledInspectorFooterRowListPair-sc-13boxex-14 jeBqUF"
                 >
                   <div
-                    class="styled__StyledInspectorFooterRowListValue-sc-13boxex-8 huEFTy value"
+                    class="value styled__StyledInspectorFooterRowListValue-sc-13boxex-8 huEFTy"
                   >
                     Displaying 1 nodes, 0 relationships.
                   </div>
diff --git a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.js.snap b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.js.snap
index 791ad62952d..ab40db11b3c 100644
--- a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.js.snap
+++ b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.js.snap
@@ -15,7 +15,7 @@ exports[`SchemaFrame renders empty 1`] = `
           <thead>
             <tr>
               <th
-                class="DataTables__StyledTh-bf850j-2 ikUpyS table-header"
+                class="table-header DataTables__StyledTh-bf850j-2 ikUpyS"
               >
                 Indexes
               </th>
@@ -23,10 +23,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="DataTables__StyledBodyTr-bf850j-1 iGjwRr table-row"
+              class="table-row DataTables__StyledBodyTr-bf850j-1 iGjwRr"
             >
               <td
-                class="DataTables__StyledTd-bf850j-3 lfnTDs table-properties"
+                class="table-properties DataTables__StyledTd-bf850j-3 lfnTDs"
               >
                 None
               </td>
@@ -39,7 +39,7 @@ exports[`SchemaFrame renders empty 1`] = `
           <thead>
             <tr>
               <th
-                class="DataTables__StyledTh-bf850j-2 ikUpyS table-header"
+                class="table-header DataTables__StyledTh-bf850j-2 ikUpyS"
               >
                 Constraints
               </th>
@@ -47,10 +47,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="DataTables__StyledBodyTr-bf850j-1 iGjwRr table-row"
+              class="table-row DataTables__StyledBodyTr-bf850j-1 iGjwRr"
             >
               <td
-                class="DataTables__StyledTd-bf850j-3 lfnTDs table-properties"
+                class="table-properties DataTables__StyledTd-bf850j-3 lfnTDs"
               >
                 None
               </td>
@@ -95,7 +95,7 @@ exports[`SchemaFrame renders with result 1`] = `
           <thead>
             <tr>
               <th
-                class="DataTables__StyledTh-bf850j-2 ikUpyS table-header"
+                class="table-header DataTables__StyledTh-bf850j-2 ikUpyS"
               >
                 Indexes
               </th>
@@ -103,10 +103,10 @@ exports[`SchemaFrame renders with result 1`] = `
           </thead>
           <tbody>
             <tr
-              class="DataTables__StyledBodyTr-bf850j-1 iGjwRr table-row"
+              class="table-row DataTables__StyledBodyTr-bf850j-1 iGjwRr"
             >
               <td
-                class="DataTables__StyledTd-bf850j-3 lfnTDs table-properties"
+                class="table-properties DataTables__StyledTd-bf850j-3 lfnTDs"
               >
                  ON :Movie(released) ONLINE 
               </td>
@@ -119,7 +119,7 @@ exports[`SchemaFrame renders with result 1`] = `
           <thead>
             <tr>
               <th
-                class="DataTables__StyledTh-bf850j-2 ikUpyS table-header"
+                class="table-header DataTables__StyledTh-bf850j-2 ikUpyS"
               >
                 Constraints
               </th>
@@ -127,10 +127,10 @@ exports[`SchemaFrame renders with result 1`] = `
           </thead>
           <tbody>
             <tr
-              class="DataTables__StyledBodyTr-bf850j-1 iGjwRr table-row"
+              class="table-row DataTables__StyledBodyTr-bf850j-1 iGjwRr"
             >
               <td
-                class="DataTables__StyledTd-bf850j-3 lfnTDs table-properties"
+                class="table-properties DataTables__StyledTd-bf850j-3 lfnTDs"
               >
                  ON ( book:Book ) ASSERT book.isbn IS UNIQUE
               </td>